6年目の朝

快晴の東京、おはようございます。
おかげさまで本日、株式会社ダイレクトサーチジャパンは5周年。
6年目を無事迎えることができました。

ここ1ヶ月ほど、事務所移転に伴う業務でいろいろとてんぱっていて、ほうぼうに迷惑をかけてしまっています。
本当に申し訳ありません。

おそらく今週を目処に移転先も確定し、諸々動き出すのではないかと思います。

というわけで今年度もよろしくお願いします。

代表取締役 田中弘治

事務所移転の準備中

お久しぶりです。TANAKA Kohji です。
秋を飛び越して冬の気配になりましたね。

さてさて。
株式会社ダイレクトサーチジャパンは茅場町駅徒歩5分の場所にあるのですが、にわかに移転の計画が持ち上がりました。

場所は茅場町駅徒歩2分と、今よりも近くなる予定。
理由はいろいろありまして。

「業績好調のための業務拡大のため」だったら嬉しいのですが、明日のご飯を食べることもままならない中小企業ですから、そんなことはありません。

ただただ、いろいろな偶然が重なったからにすぎません。

いつもプロジェクトを一緒に組むパートナーの何人かと話しをしているうちに、一緒の場所に集まることになりました。
なんというか関係者の方向性の延長線上で交わった点が、たまたま事務所移転となったというか、そんな感じです。

新しい事務所は今のところよりも何倍も広く、弊社だけはもとより、我々パートナーだけで使っても使い切れません。

というわけで東京の山手線の東側ではまだまだ数が少ないコワーキングスペースとして利用してもらおうと目論んでいます。
CakePHPやWordPressやWebデザイン等が得意なパートナーが集まる素敵な場所になります。

興味のある方はぜひ一緒に働きましょう。
詳細はまた追って。
それでは。

Bloggerで記事ごとのパーマリンク文字列を任意で指定可能に

昨日の記事で紹介した本(amazon)の出版についてお祝いのメッセージを多数いただきありがとうございます。TANAKA Kohji です。

記事を書いていて、Bloggerの新機能について気づきました。

Bloggerで記事ごとにパーマリンク文字列の指定が可能になっています。

設定箇所は右の画像の通り。
カスタムURLの箇所に入力できます。

パーマリンク(permalink)とは、固定のURLを指し、Bloggerの場合ドメインの後が
/year/month/example-entry.html
となります。

パーマリンクの価値はブログが広めたといっても決して過言ではないでしょう。

もともと一般的なURLは、ブログのような動的に生成されるwebページの場合
/?post_id=123456
のように、クエリーストリングという仕組みで表されるのが一般的でした。
（この場合は記事Noが123456という意味）

今日と違い、当時の検索エンジンは、パーマリンクとクエリーストリングを使用したURLに対し、ページの重み付けを大きく変えていたため、パーマリンク（型のURL）にすることで検索エンジンの上位に表示される機会が多かったのです。

MovableType等の優れたブログシステムは当初からパーマリンクの付与が可能で、書いた記事が上位表示しやすかったことが、ブログという仕組みが流行した一因でもあるでしょう。

Bloggerの場合

このブログは、Bloggerを利用しています。
Bloggerの場合、記事ごとのURLのうち、上述の例でexample-entryにあたる箇所については、記事タイトルから自動的に設定されていました。
たとえば「exampleなentryを書く」というようなタイトルにすると、日本語の箇所がカットされ残された文字列がURLとなります。

今後は、この新機能により、自由に設定が可能です。

ただし自由とはいっても、使用可能な文字には制限があります。

（すべて半角で）アルファベットの大文字小文字、数字、一部の記号  - _ .  です。

残念ながら日本語は使用できません、、、
URLエンコードしてくれたらどんなに嬉しいことか。
今後の改善に期待しています！

（追記）公開後は変更できないので気をつけましょう（笑）

『jQueryプラグイン徹底活用 プロのデザインアイディアとテクニック』発売！

というわけで執筆した原稿が本になりました。TANAKA Kohji です。
まずは、こちらをご覧ください。



本日、わたしが一部原稿を執筆した『jQueryプラグイン徹底活用 プロのデザインアイディアとテクニック』が発売されました。

この本は、jQueryを使ってサイトのUIを向上させるのに有効なプラグインが、88種類掲載されています。
そのうちの半分以上は、導入に対しての詳しい解説やカスタマイズの案内付き。

どのプラグインも「仕事につかえる」という視点で厳選されていて、活用度の高いプラグインばかりです。

たとえば、先頭に紹介されている jQuery Masonry というプラグインを紹介している章では。
このプラグインは、タイル状に並べた矩形のボックスを、ブラウザの横幅にあわせて並び替えるというもの。パソコンの大きな画面では横に多数並び、スマートフォンなどの画面では横には少数で、その分縦が長くなる。このプラグインの面白いのは、スマートフォンを縦から横にしたときなど、画面の横幅が変わるとアニメーションをしながらボックスが並び変わるところです。
なかなか見ていて楽しいプラグインなのですが、この本では、jQuery Masonry を紹介したあと続けて、 Infinite Scroll という、いわゆる無限ページング（スクロールして画面最下部までくると自動的に次ページをその下に表示する）を紹介しています。

組み合わせて紹介することで、より実装イメージが湧きやすく、製作するサイトで利用しやすくなっています。

掲載されているプラグイン一覧

レイアウト

• jQuery Masonry ・・・ウィンドウの幅にあわせて要素をアニメーションして配置
• Modernizr ・・・HTML5やCSS3等の機能に対応しているかどうかを判別
• Infinite Scroll ・・・無限ページング
• jQuery UI Layout ・・・WebアプリのようなUIを実現
• jQuery UI ・・・様々な便利UIのセット
• jQuery Mobile ・・・スマートフォン用UIを実現
• PageSlide ・・・ページを横へスライドさせ、ページ脇にコンテンツを表示
• TwitterBootstrap ・・・CSSフレームワーク。jQueryを使用した機能も多い（本書内では、Modal/Alert/Tab/Collapse/Typeahead等を紹介）
• FeedReader ・・・Google Ajax APIを使用し外部ドメインのRSSを取得
• SNBinder ・・・Ajax等で取得したhtmlをテンプレートに流し込む
• jQSlickWrap ・・・画像の形に合わせて、テキストを回りこませる
• exValidation ・・・入力内容のバリデーション（チェック）を実施
• Password Strength ・・・パスワードの強弱を判定し表示
• ui.elements.js ・・・フォームの要素をキレイにデザイン
• js-columns ・・・雑誌のような段組みレイアウト
• jQuery Easy Pinned Footer ・・・ページ最下部にフッターを固定
• Setting Equal Heights with jQuery ・・・カラム（列）の高さを揃える
• jquery.vgrid.js ・・・ウィンドウの横幅が変更されたときに再レイアウトするグリッドレイアウト
• Tiny Scrollbar ・・・スクロールバーのスタイルを変更
• CrossTable.js ・・・表内でハイライトするセルを十字にフォーカス表示する
• Noisy ・・・背景にノイズを加えテクスチャっぽくする
• selectivizr ・・・IE6~IE8でCSS3セレクタを使用可能にする
• Contactable ・・・ページ脇から問い合わせフォームをスライドして表示
• filtrify ・・・タグ等によりコンテンツを種類別に絞り込み表示

ナビゲーション

• jQuery MegaMenu 2 ・・・メインメニューにマウスカーソルをあわせると子孫メニューをドロップダウンするUI
• Superfish ・・・ドロップダウンメニュー
• idTabs ・・・タブUI
• jquery.socialbutton ・・・各種ソーシャルサイトのシェアボタンを表示
• jQuery UI Accordion ・・・縦に開閉するアコーディオンUI
• jQuery UI Tabs ・・・タブUI
• jquery custom content scroller ・・・スクロールバーのスタイルを変更
• jQuery Easing Plugin ・・・スムーズなアニメーションを実現
• Awesome Bubble Navigation ・・・円形のメニュー
• jBreadCrumb ・・・アニメーションするパンくずリスト
• tipsy ・・・ツールチップ
• Font Sizer ・・・文字サイズ変更
• Font Sizer 拡張版 ・・・Font Sizer の拡張版
• Javascript Cookie Library with jQuery bindings and JSON support ・・・JSON形式で保存可能なCookieライブラリ
• droppy ・・・深い階層に対応したドロップダウンメニュー
• Highliner jQuery Plugin ・・・コンテンツの一部をハイライト表示する
• jQuery Radmenu Plugin ・・・円形のセレクトメニュー（ナビゲーション）
• jQuery.autopager ・・・オートページングを実装
• jQuery Waypoints ・・・スクロールUI。無限スクロールやScrollSpy等
• jQuery Mouse Wheel Plugin ・・・マウスホイールのイベントを捕捉
• hashchangeTab.js ・・・戻る・進むボタンに対応したタブUI
• jQuery Joyride Feature Tour Plugin ・・・サイトの機能ツアー
• jPages ・・・アニメーションを使用したページング
• FerroSlider ・・・矢印キーに対応したページング

エフェクト

• parallaxSlider ・・・スーパーマリオの背景のようにスクロール速度の違う複数の背景を表示
• DD_belatedPNG ・・・IEで透過png
• Cloud Zoom ・・・画像の一部をzoomして表示
• MobilySlidy ・・・スライドUI
• Quicksand ・・・アニメーションによる絞り込み・並び替えUI
• html5.js ・・・IE等でもhtml5を利用
• Roundabout ・・・回転して画像が入れ替わるギャラリー
• Background-Position Animation Plugin ・・・任意の要素の背景を入れ替え
• Foundation ・・・jQueryを利用した多機能UI集
• Fisheye menu ・・・MacのDocメニュー風UI（天地配置）
• jqDock ・・・MacのDocメニュー風UI（天地左右配置）
• jQuery Reel Plugin ・・・360度画像を回転表示するUI（iPhone等にも対応）
• youRhere ・・・文章にしおりをはさめる機能を実装
• jquery.spritely ・・・CSSスプライトを使用しアニメーションを作成
• jQuery Notify bar ・・・Twitter風の通知UIを画面上部からアニメーションして表示
• jQuery Cycle Plugin ・・・いろんな種類のスライドショー
• jQuery Peel Back Ad ・・・ページの隅をめくるUIによる（広告）リンク
• jParallax ・・・スーパーマリオの背景のようにスクロール速度の違う複数の背景を表示
• Zoomooz.js ・・・ページ内の要素をアニメーションさせながら拡大表示
• Animate CSS Rotation and Scale ・・・CSS3のtransformをjQueryで実装
• jQzoom Evolution ・・・画像の一部を拡大表示
• jQuery NiceScroll plugin ・・・iPhoneのような慣性スクロール

グラフィック

• carouFredSel ・・・カルーセル
• jquery.mb.YTPlayer ・・・YouTubeプレーヤーを背景全体に表示
• jquery.metadata.js ・・・html要素のclass内にデータを埋め込める
• Circle Navigation Effect with CSS3 ・・・円形のサムネイルが飛び出すUI
• fb.wall ・・・サイト内にfacebookのWallを埋め込む
• Google maps v3 plugin for jQuery and jQuery Mobile ・・・Googleマップを埋め込みマーカー等を追加
• jQuery-Visualize ・・・グラフを作成
• ExplorerCanvas ・・・IE等でcanvasを利用
• fancyBox ・・・Light Box風のポップアップUI
• Camera slideshow ・・・多彩なアニメーションのスライドショー
• jQuery Before/After plugin ・・・画像加工前後などの複数の画像をスライダーを使用して比較するUI
• Nivo Slider ・・・多彩なアニメーションのスライドショー
• ColorBox ・・・アニメーションの種類が豊富なLightBox風UI
• SuperSized ・・・ウィンドウにあわせて背景画像を画面いっぱいに表示
• Slicebox ・・・3Dアニメーションによるスライドショー
• jQuery Text Change Event ・・・テキスト入力のイベントを捕捉する
• Elastislide ・・・ウィンドウサイズによって画像サイズや枚数が変わるカルーセル
• jQuery Shuffle Text ・・・テキストをシャッフルする演出

以上、総勢88種類のプラグインが紹介されています。

（導入が詳しく掲載されているのは太字のプラグインです）
（わたしが寄稿した記事はマーカーのプラグインです）

jQueryはどなたでも扱いやすいですが、解説が英語だったりして導入に苦労することもあるでしょう。

そんなときに実践的な内容でカスタマイズ方法も掲載されている本書は、きっとあなたの役に立ってくれるはずです。

本書に寄稿するにあたり執筆経験のないわたしにレクチャーをしてくださいましたMdN編集部のKさん、ありがとうございました。

また、Kさんにわたしをご紹介していただきました下北沢オープンソースカフェのマスターのKawamuraさんありがとうございます。2冊献本いただいているので1冊寄贈しますね。

これだけ豊富だと、ぱらぱら眺めているだけでもWebサイト構築時のUIのヒントが得られますよ。ぜひ1冊どうぞ。

CakePHP HTML Cache Plugin の2.x対応と追加機能とか

@mon_sat です。
CakePHP HTML Cache Plugin についてメモしておきます。

CakePHPにはキャッシュの機能がありますが、純粋な静的ファイルを書き出すもっと強力なキャッシュをおこなうためのプラグインがあります。
（symfonyでは sfSuperCache 、Fuel PHP ではfuel-pagecacheという同様のプラグイン等があるそうです）

仕組みは、mod_rewriteの機能を利用し、webroot/cache以下に、該当するhtmlやrss等のファイルがあれば、それを直接表示し、無ければ、CakePHPが通常の描画後、webroot/cache以下にページを書き出すというもの。

一度作成するとphpすら使われませんので当然速いわけです。

ただしそのファイルを消さないと永遠にCakePHPが再表示しませんので、以下のコマンドのようなことでファイルを消してあげる必要がありますが。

find /full/path/to/app/webroot/cache -mmin +360 | xargs rm -f

さてこのプラグイン、もともとはMatt Curry氏が作成したプラグインです。
その後CakePHP2.x系への対応がまだのようでしたので、forkして作成したのが、こちらです。

• MontBlanc-Sucks/HtmlCache
  

インストールと準備

ダウンロード後、APP/Plugin/HtmlCacheとなるように配置してください。

bootstrap.phpでPluginをloadします。

# APP/Config/bootstrap.php
CakePlugin::load('HtmlCache');

webroot/.htaccess を修正します。
（修正内容は extras/.htaccess のようにします）

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} ^GET$
    RewriteCond %{DOCUMENT_ROOT}/cache/$1/index.html -f
    RewriteRule ^(.*)$ /cache/$1/index.html [L]
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ index.php [QSA,L]
</IfModule>

プラグインの使用

あとは、Controllerで $helpers = array('HtmlCache.HtmlCache'); のようにします。

ただ特定のactionだけ使用するというケースがほとんどでしょう。ですので。

viewファイル内で使用する場合は、次のようにします。

$this->Helpers->load('HtmlCache.HtmlCache');
$this->HtmlCache->options($options);    // 必要に応じて

オプションの指定

オプションは配列で指定します。

# view
$this->HtmlCache->options(array('cache_dir' => 'statics'));

オプション（デフォルト）

• 'test_mode' => false,
• trueにするとdebug level が1以上でもキャッシュファイルを書き出します
• 'host' => null,
• 'domain' => false,
• trueにすると、複数ドメインで運用している場合にhostごとに書き出すことができます
• $_SERVER['HTTP_HOST']もしくはhostオプションの値が使用されます
• 'www_root' => APP . WEBROOT_DIR,
• webルートのフォルダをフルパスで指定します
• 'cache_dir' => 'cache',
• デフォルトでは webroot/cache 以下にキャッシュファイルが作られます
• ここを修正した場合は webroot/.htaccess も適宜修正しましょう
• 'filename' => 'index.html',
• 拡張子なしでCakePHPにアクセスしたときに書き出すファイル名です
• index.htm や index.php を使用したいという場合はここを書き換えます
• 'file_path' => null,
• まったく別のURL（パス）で書き出したいという場合は、ここを編集します
• 例） 'file_path' => $this->webroot . DS . $item['Item']['filename'],

というわけでRSS等の出力に絶大な効力を発揮する HtmlCache Plugin を紹介しました。

ぜひご活用ください

MontBlanc-Sucks/HtmlCache
ご意見・ご要望・ご質問は、 @mon_sat までお願いします。

CakePHP OGP Plugin つくりました

@mon_sat です。

OGPタグというものがあります。
facebookとかでシェアしたときに、任意のタイトルやdescription、画像等を設定するmetaタグです。

このブログの場合は、次のようになります。

さて、このOGPタグと、titleタグ、metaタグの一部（description）等は、内容が重なります。

これらを、view等から簡単に設定できると良いですね。
というわけで @yando さんのアドバイスを受け、プラグインにしてみました。

CakePHP OGP Plugin

インストールと設定

プラグインをダウンロードし、 APP/Plugin/Ogp となるように設置します。

git で clone / submodule add する場合は、次のような感じで

cd your_app
git clone git://github.com/monsat/Ogp.git Plugin/Ogp

CakePHP2.xではプラグインを明示的に読み出す必要があるので

# APP/Config/bootstrap.php
CakePlugin::load('Ogp');

とし、Controllerで、OgpHelperを読み出します。

# APP/Controller/AppController.php
public $helpers = array( 'Html', 'Form', 'Ogp.Ogp');

これで準備完了です。

次に、サイトの設定をします。

# APP/Config/bootstrap.php
Configure::write('Site', array(
  'site_name' => 'サイトのタイトル',
  'description' => 'サイトの説明',
  'image' => '/img/image.png',  // サイトの画像
  'type' => 'website',                 // サイトの種類（blog等）
  'separator' => ' - ',                 // ページタイトルとサイトタイトルの間の文字列
));
Configure::write('Ogp.settings', array(
  'base' => 'Site.',
  'autoKeys' => array('type', 'site_name', 'description', 'image'),   // viewで設定しなくても必ず書き出すOGPタグ
));

Configureで Ogp.settings.base で設定しているので、
Configure::read('Site.site_name') や Configure::read('Site.description') などが利用されます。

使い方

layoutファイルの次の記述の箇所に、他のmetaタグと一緒に書き出されます。

# layout
echo $this->fetch('meta');

viewファイルでは、以下のように使います。

# view
// <title>タグ($title_for_layout)も同時に設定されます。
$this->Ogp->title('ページのタイトル');
// フルURLで書き出されます。
$this->Ogp->image($post['Post']['author_image_url']);
// その他は、ogpタグのname（og:無し）とcontent
$this->Ogp->set(
  'description',
  "stripped \n and <b>tags</b>",
  // options
  array(
    'meta' => true,
  ),
);

contentに使用される文字列は、タブ・改行文字およびhtmlタグを除去します。
※ stripTagsオプションを false にすると、htmlタグの除去は行われません

metaオプションを true にすると、通常のmetaタグも同時に書き出されます。

この記事の例では、次のようなタグが出力されるでしょう。（順番は変えてあります）

<title>ページのタイトル - サイトのタイトル</title>
<meta property="og:title" content="ページのタイトル - サイトのタイトル" />
<meta property="og:site_name" content="サイトのタイトル" />';

<meta name="description" content="サイトの説明" />
<meta property="og:description" content="サイトの説明" />
<meta property="og:type" content="website" />

<meta property="og:image" content="http://example.com/img/author_image_example.png" />

という具合です。
$this->Ogp->title()を設定しなければ、Site.site_nameの値がtitleタグとog:titleに使用されます。

ぜひご活用ください

monsat/Ogp · GitHub
ご意見・ご要望・ご質問があれば、 @mon_sat までお願いいたします。

jQuery Link Box プラグイン作りました

@mon_sat です。
非常に車輪の再発明的ではありますが、jQuery Link Box プラグインを作りました。
（jquery 1.7以上に対応しています）

簡単に言うと、リンクの外側のボックス（div等）全体をクリック可能にするためのプラグインです。

使用例は以下およびsample/index.htmlをご覧ください

使い方

jqueryを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.linkbox.js"></script>

</body>の直前に記述するか、<head></head>内に記述してください。

クリック可能にするbox（div等）にdata-click="linkbox"を記述します

<div data-click="linkbox" class="sample">
    <p>sample <a href="/">最初のリンク</a> が使用されます。</p>
    <p>sample <a href="/p/blog-page.html">このリンク</a> は直接クリックする必要があります。</p>
</div>

[data-click="linkbox"]が書かれた属性内の最初のリンクが使用され、ボックスをクリックしたときに遷移します。

（オプション）必要に応じて、ボックスにスタイルを設定します

ボックスがクリック可能であることを示すようなstyleを記述しましょう。

.linkbox {
    background-color: #eee;
}
div.sample {
    cursor: pointer;
}

デフォルトでは .linkbox というクラスが使用されます。
※ 追記（2012-06-29）：iPad等で有効にするためには、cursor: pointer をあらかじめ指定しておく必要があります。

（オプション）任意のaタグのリンク先を使用したい場合

[data-linkbox="target"]という属性が存在するリンクは、優先して使用されます。

<div data-click="linkbox">
    <p>sample <a href="/">最初のリンク</a> ですが、直接クリックする必要があります。</p>
    <p>sample <a href="/p/blog-page.html" data-linkbox="target">このリンク</a> は優先して使用されます。</p>
</div>

デモ

サンプル1

https://github.com/monsat/jquery.linkbox

サンプル2

https://github.com/monsat/jquery.linkbox

<a href="/" data-linkbox="target">このようなリンク</a>の場合、優先して使用されます

https://github.com/monsat/

ぜひご活用ください

monsat/jquery.linkbox · GitHub
ご意見ご要望ご質問は、@mon_satまでお願いします。

Webデベロッパ ハッカソン at PoRTAL Shibuya に参加してきました

@mon_sat です。
金曜日から土曜日にかけて行われた Webデベロッパ ハッカソン at PoRTAL Shibuya というイベントに参加してきました。

金曜日の夜に開始し、翌午前中まで開発そして成果発表をして終了という、比較的負担の少ないハッカソンです。

ちなみにハッカソンとは hack + marathon ということで、各自が開発をしつづけるというイベントです。たいていは夜通しおこなわれるところがマラソンっぽく体力勝負なわけです。

デザイナー向けCakePHP勉強会でも使わせていただいた PoRTAL Shibuya に10名以上の開発者が集まり、それぞれ普段ではなかなかできないようなことを中心に開発してました。
CakePHPの勉強会等で知り合った方も何人か参加していて、CakePHPに関する質問をしあったりする光景も。

わたしも前日から開発していた monsat/jquery.linkbox に加え monsat/Ogp · GitHub と、 MontBlanc-Sucks/HtmlCache の追加機能を作りました。じつは来週の仕事の準備なんですけど（笑）

HtmlCacheは、もともとMatt Curry氏が作成したHTML等の静的ページを書き出すためのプラグインです。
その後 sams 氏がCakePHP2.0対応を試みていたようなので、forkしてその続きをすでに開発していたのですが。
この日は「任意のディレクトリやファイルを削除する機能」を実装しました。
これによりサイト全体のキャッシュを削除したり、任意のフォルダ以下のキャッシュを削除というような利用が可能になります。

詳しくは別途ブログにまとめたいと思いますが。

話をハッカソンに戻し。
やはり、こういうイベントで他の方と開発をおこなうというのは、非常に刺激になります。
詰まったときに他の方と話をすることで解決の糸口を見つけたりもできますし。

そして、成果発表する時間があるので、「何かしら作る」というモチベーションも高まることでしょう。
どんなに些細なことでも、それが自分にとって有益であれば良いのだと思います。
こういうイベントに積極的に参加することで、開発スキルや、開発の基礎体力がついていくのかもしれません。

まだ参加されてない方は、事前に登録しておくと良いですね。
というわけで次回のイベントでお会いしましょう。

他の参加者のブログ記事

• Webデベロッパ ハッカソン at PoRTAL Shibuya に参加してきました – ja.naoko.cc
  （今回の記事は、↑の記事からタイトルを拝借してしました）

BloggerでOGPタグを出力する設定方法

というわけで TANAKA Kohji です。
Blogger の記事を facebook でシェアしようとすると、HTMLの先頭にある JavaScript が本文の代わりに読み込まれて困っていました。

そこで、OGPタグを出力するように変更してみました。

検索設定でメタタグ（description）を設定する

設定ー検索設定より、メタタグの設定を行います。

この部分は、ブログのトップページ等をシェアした場合等に使用される説明文です。

（metaタグのdescriptionや、og:descriptionに使用されます）

テンプレートのHTMLを修正する

ここは多少専門的な知識が必要になります。

テンプレートーHTMLの編集より、テンプレートを編集します。

（事前にページ右上の『バックアップ/復元』より現在のテンプレートのバックアップをとっておくと安全です）

以下を参考に、修正してください。

修正する前のコード（ctrl+f 等で該当箇所を探してください）

    <title><data:blog.pageTitle/></title>

修正後のコード

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <title><data:blog.pageTitle/></title>
    <b:else/>
        <title><data:blog.pageName/><b:if cond='data:blog.pageName'> | </b:if><data:blog.title/></title>
    </b:if>
    <meta expr:content='data:blog.title' name='og:site_name'/>
    <meta expr:content='data:blog.pageTitle' name='og:title'/>
    <meta content='blog' name='og:type'/>
    <b:if cond='data:blog.metaDescription != &quot;&quot;'>
        <meta expr:content='data:blog.metaDescription' name='og:description'/>
    </b:if>

修正したら保存しましょう。

記事投稿時に『検索向け説明』を設定する

これはちょっと冗長なのですが、記事投稿時に、検索向け説明を設定する必要があります。

（投稿画面の右側）

ここは記事本文から自動的に設定してほしいところですが、いたしかたありません。

facebookでシェアする

あとは、記事公開後に、facebookでシェアすれば終了です。

というわけで設定していない方は、お試しください。

今年は閏秒の挿入年

最近は減りましたが、2度寝が大好きな TANAKA Kohji です。
今年は約4年に1度の閏年ですね。
2月29日があり、通常の年よりも1日長いのはご存知の通り。

それにたいし、閏秒というものがあります。

閏秒（うるうびょう、英: leap second）は、現行の協定世界時 (UTC) において、UT1との差を調整するために追加または削除される1秒である[1][2]。1972年以来、これまでに閏秒の挿入が24回実施されている（2011年末現在）。
（中略）
地球の自転に基づく世界時は、太陽が朝に出て夕方に沈むといった、日常生活に関係する時間観念からすれば便利である。しかし、月による潮汐摩擦や地球内部の核、海水や氷河の分布変化など、さまざまな原因により地球の自転運動は一定の速さではない[6]。ゆえに UT1 は1秒の長さが一定せず、時の標準を学術的に正確に定めるのに向いていない。この点では1秒の長さが一定である国際原子時は便利である。しかし国際原子時は地球の自転に従わないため、やがて両者のずれは拡大し、理論上は時間観念とも食い違うことになる。
閏秒 - Wikipedia

というわけで、地球の自転によるずれを修正するために、閏秒という「1秒」をどこかに挿入することがあるのですね。

これは不定期に行われ、大体6月末か12月末のUTC深夜24時直前に挿入されることが慣例です。
世界標準時との時差は9時間ですから、日本では7月1日か1月1日の9時直前になります。

今年は、3年半ぶりに閏秒が挿入されます。
7月1日は、他の日よりも1秒長いのです。

9時直前は、117で時報を聞くというのも面白いかもしれません。
記憶が定かではありませんが、たしか、通常より、プップップポーンの始まりが1秒遅れるはず・・・
（追記 NTTからの発表でもそうでした）

「1秒を大切に」ということを考える1日にしても良いかもしれません。


2度寝に気をつけて過ごしたいものですね（笑）

WindowsユーザーがMacに移行して買うべきたったひとつのアプリ

新しいMacBook Air や Proが発表されても、ずっと我慢の子を続ける TANAKA Kohji です。

この機会にmacユーザーになるという方も多いのではないでしょうか。
もしくは、この機会にmacにしたいんだけど、ExcelやらIllustratorやら現状の環境からの移行が大変そうで二の足を踏んでいる方も多いでしょう。

そういったかたが買うべきたったひとつのソフトをご紹介します。
それが Parallels Desktop です。

このソフトが無ければ、わたしはiMacを買わなかったといえるほど強力なソフトです。

基本的には、Mac OS X 上で windowsを動かすためのソフトなのですが、Switch to Mac Edition というのを利用すると、現在のwindowsの環境をそっくりそのままMacの中に持ってこれるのです！

どういうことか。
つまり、これを利用することで、現在windowsで使用していたすべてのソフト、そしてすべてのデータをMacの中にとりこめ、Macを使いながらにして、同時に従来のwindowsのパソコンを使用するというような芸当が可能になります。

Spacesという機能を使い、複数のデスクトップを使うことがMacではできるのですが、そのひとつにwindowsを当てるということもできます。
また、ParallelsのCoherenceというモードを使用すると、windowsのデスクトップは無くなり、スタートメニューのみが残ります。あとは、wordやexcelといったソフトを立ち上げるたびに、Mac上で立ち上がったかのように、別々のwindowのなかでそれらのソフトが動くのです。ここまでくると、仮想かソフトを使用している感覚ではなく、本当にMacの中で旧PCが動いているかのような錯覚に陥ります。

注意点としては、windowsに充分なメモリを与えること。
最近はメモリも安くなってきました。
わたしは当時最安iMac標準の4GB（2GB x 2）のほか空きスロット2つに4GBを差し、合計12GBとしています。
これだけあると、windowsの2GBをまるまる当てても、充分にMac側に余裕ができます。
MBPなら最大16GBです。windows7だろうが割り当てられることでしょう。

わたしはいまだにMac版のIllustratorを買わずに済んでいます。
これはwindows時代に清水の舞台を飛び降りる気持ちで購入したIllustratorCS3が現役という理由が大きいです。
古いphotoshopも同様に現役です。

Macがwindowsと比較して優位と言えないのが、ソフトの豊富さです。とくにフリーウェアの多さはwindowsには敵いません。

後悔せずに移行するために買うべきたったひとつのソフトは、Parallels Desktopのほかはありません。
とってもおすすめですから是非どうぞ。

Yahoo!ミュージックのサービス終了

まずはこちらをご覧ください。

というわけで、Yahoo!ミュージックのサービスが2012年8月27日で終了するそうです。
投稿したコンテンツも削除されるとのことで完全な終了ですね。

まさかPing今秋終了のお知らせ...WSJ報道 : ギズモード・ジャパンやDVDリッピング違法化・違法ダウンロード刑罰化の著作権法改正が衆院で可決 | 家電 | マイナビニュースを受けてサービス終了するわけではないと思いますが、非常に寂しい限りですね。

Yahoo!ミュージックのトップページでも掲載されているのかな？と思ったら

ん？？？

Yahoo!ミュージックからご利用の皆様へ大切なお知らせというわけで、人によってはスルーされそうです。もしかしたら直前になって知る人も多いかもしれません。

Xデーは8月27日。
わたしはほとんど音楽を聴かないので影響は皆無ですが、これまで愛用してきたユーザーも多いはず。そういう方々へ最後のサービスがあっても良いかもしれませんがいかがでしょうかね。

Yahoo!ニュースの閲覧履歴をfacebookに投稿できるという新機能を爆速で試してみた

facebookから名前を「漢字で登録してね」と言われる TANAKA Kohji です。
Yahoo!ニュースの新機能のニュース見ましたでしょうか？

Yahoo!ニュース、読んだ記事をFacebookに自動配信できる新機能
ヤフーは6月14日、「Yahoo!ニュース」でFacebookへのアクティビティの自動投稿が可能になったことを発表した。この機能を利用することで、Yahoo!ニュースの記事を表示させるだけで「Yahoo!ニュースの○○の記事を読んだ」という自身のアクティビティが、自動的にFacebook上の友人のウォールに表示されるようになるという。
Facebookアカウントでログインしている状態で、Yahoo!ニュースの記事詳細ページなどに表示される「Facebookの友達に記事を知らせよう」枠の「利用開始」ボタンをクリックし、Facebookと連携することで利用できる。あらかじめ公開範囲を設定することも可能だ。
アクティビティとして自動投稿されたくないときは、一時的に自動投稿を停止することもできる。また、自動投稿されてしまった場合も、あとから削除できる。なお、ブログ/意見、企業トレンド、リサーチ、ランキングは、アクティビティ自動投稿の対象外となる。

というCNETの記事。

なんかネガティブな反応のTweetとともに知ったのですが、なかなか物議を醸しそうな新機能ですね（笑）

というわけで試してみましたよ。

Yahoo!ニュースで記事を閲覧し、自動配信の設定

Yahoo!ニュースの記事個別ページに移動すると、記事および配信元リンクの下に、当機能の表示が確認できます。
（ただしその時点でfacebookにログインしている必要があります）

まず、利用開始ボタンをクリックし、facebookとの連携を行います。

facebookでアプリの設定をする

facebookに移動しアプリの承認を行う画面となります。（1の枠）
（なお、この時点でキャンセルを行えば何も設定されません）

facebookアプリを承認する場合はこの画面に記載された情報を良く読まなければなりません。
2の枠の位置に書かれた内容を見ることで、このアプリがfacebookで何ができるかを確認することが可能。
この場合は、あなたのfacebookに登録した情報のうち最も基本的なものへのアクセスとともに、あなたにかわって投稿する機能への承認確認です。
（前者はどのアプリでも表示されます。その他の情報をアプリが使用する場合は、この欄がずらずらと増えていきます）

自分の意図に反して自動的に投稿されるスパム系のアプリもありますが、必ずこの画面での承認を必要とします。スパムと言われたからスパムアプリだと決めつけるのではなく、何をするアプリで、何ができるのかを確認し、承認するか承認しないかを決めましょう。思考停止はよくありませんね。

Yahoo!ニュースのアプリの場合、自動投稿以上のことはできないようですので承認してすすむのですが、その前に、3の枠の箇所で、自動投稿されるニュースの閲覧履歴の公開範囲を指定できます。

このアプリの使い方を、自分の閲覧履歴としてのみ利用する場合は、ここを自分のみなどに変えると良いでしょう。
すべてのユーザーにすると、Yahoo!ニュースを閲覧するたびに、あなたのアクティビティとして表示されます。
図書館の貸し出し情報も、Yahoo!ニュースの閲覧履歴も個人情報ですから気をつけなくてはなりませんね（笑）

自動投稿の設定

Yahoo!ニュースの閲覧が自動投稿されるのにはもう1ステップあるようです。

ふたたび記事ページを表示し、開始リンクをクリックして開始されます。

facebook内での表示のされ方

その後Yahoo!ニュースの記事ページを閲覧するたびに、facebookへ自動投稿されるわけですが、facebook上ではどのように表示されるのでしょうか。
facebookの場合、自分の投稿がどう表示されているかは分かりづらいのですが、もっとも簡単に確認するのは、自分のページから、アクティビティを確認することでしょう。

タイムライン

アクティビティログ

他の人のウォールからも同様に確認できることと想像できます。
（まだ実際には確認できてないので分かりません）

自動投稿を中断する・履歴を削除する

自動投稿を中断するには、Yahoo!ニュースの記事ページより中断リンクをクリックすることで行えます。
また、個別に閲覧履歴の投稿を削除するのも、右上の×削除のリンクで行えます。（facebook上のアクティビティログからももちろん可能）

アプリの使用をやめる

アプリの使用自体をやめ、使用開始前の状態に戻すことも可能です。（なお一度投稿したものは、アクティビティログから削除する必要はあります）
プライバシー設定のアプリの設定から行えますので、facebookのヘッダーの右端の▼からプライバシー設定をクリックし表示されるページで、広告、アプリ、ウェブサイトの設定の編集リンクをクリックします。

こんな画面になりますので利用しているアプリの設定の編集から

アプリを指定し編集もしくは×リンクから連携の削除（使用の中止）ができます。

新機能についての所感

おおまかな使い方は以上です。あとは自動的に投稿されますので、個人情報のだだ漏れに気をつけつつ使っていきましょう。

さて、この新機能ですが。
いまいち理解しづらいのは、どのような利用シーンを想定しているかということ。

Yahoo! JAPANにとっての狙いは、facebook上に多くの記事を投稿してもらい、Yahoo!ニュースの閲覧数を高めること（および広告を多く見てもらうこと）ということになるでしょう。

しかし同様の機能を実装しているサイトをわたしはあまり聞いたことがありません。

ユーザーにとって閲覧履歴としての役割は果たすでしょうが、その場合自動投稿する必要性を感じません。

この機能を使うことにより、良い記事がシェアしやすくなるわけではないため、どうしてもサービス提供側がひとりよがりな機能を実装したという感が否めないのです。
もしfacebook上に多くの投稿を流すことが目的であれば、よりクリックしやすい、目立つシェアボタンを使用することのほうが効果があるような気がします。

アプリの使用を承諾させる上に、その後自動投稿のリンクをクリックさせるのは、ややSTEP数が多いですし。

スタートしたばかりでしょうから、意見を聞きつつ改善を図ろうという意図なのかも知れません。もしそうだとすると以前のYahoo! JAPANのやり方からの脱却であり歓迎するべきことですが。

この機能単体の評価は置いておくとして。
もし変わりつつあるというのであれば、今後も新しい機能が追加されていくということですから、今後の機能追加も注目したいところです。

タイトルで爆速とあるけどとくに爆速ではないという意見がありそうですが、まああまり意味は無いです。はい。

虚構新聞がまた誤報、もとい正報。おーぷん2ちゃんねるオープン

まずは虚構新聞のこちらの記事

転載自由の匿名掲示板「転載ちゃんねる」がオープン
匿名掲示板のコメントを抽出・編集した「まとめサイト」向けに、書き込みの著作権を放棄し「転載自由」をうたった新しい匿名掲示板「転載ちゃんねる」が５日オープンした。「村八分ＳＮＳ」などで知られる、管理人の「ひらゆき」氏は「昨日の２ちゃんねる騒動で『転載禁止』と名指しされたブログ管理人も気軽に利用してほしい」と話す。

先日突然大手2chまとめサイトが相次いで休止や方向転換を発表。
その裏には2ch運営者の側から名指しで転載禁止の通達を受けたという経緯があります。

そこで虚構新聞がそのことをネタにしているわけですね。
ただそこは、新聞記事に現実が追いつくことで有名な虚構新聞。
またまた単に他社よりちょっと早く記事がでただけという結果になってしまった模様。
（最近は日経新聞も頑張っていますね）

転載自由な2ch風掲示板が実際にオープンしたようです。

一見して2chと見紛うデザイン。
それどころか掲示板としての機能もほぼ同一です。

メインページには次のような記載が。

■open2chって？
open2chは転載自由な２ちゃんねる風掲示板ですよ。。。
すべての投稿はクリエイティブ・コモンズライセンスの元に
コピペブログ等で商用、非商用問わず自由に利用できます。
■2chに完全対応!
open2chはすべての2chの板に完全対応しています。。
2ch.netのドメインの前にopenを付けるだけで簡単に open2chにアクセスできます。

掲示板に投稿された記事は、自由に転載可能で、「コピペブログ等で商用、非商用問わず自由に利用でき」るとのこと。
これなら安心ですね！

それどころかドメインの前にopenをつけるだけでアクセスできるらしいです。
http://uni.2ch.net/newsplus/ （ニュース速報＋＠2ch掲示板）
の場合は
http://uni.open2ch.net/newsplus/
になる模様
分かりやすいですね。

open2ch.net 虚構新聞にすっぱ抜かれたけど 『オープン２ちゃんねる』はじめてみました。転載自由な２ちゃん風掲示板です。 #2ch
— satoru.netさん (@satorunet) 6月 6, 2012

作成したのは satoru.net さんでした。
どうりで素早いわけですね。

プレゼン資料の作成やサイト製作で使うアイコンを探せる「Open Clip Art Library」

いっつも自分で使うのを忘れてしまいがちだけど便利なサイトをご紹介します。

プレゼン資料などで写真やアイコンを使用したいときは多いと思います。
前者はGoogleの画像検索やFlickrなどで再使用OKな写真を探すことでかないますが、アイコンやイラストはなかなか使いたいものはありません。

そこでこの OpenClipArt です。

このサイトは、再使用可能なクリップアートが多数掲載されています。
主な特徴としては

• パブリックドメインで提供され再使用が可能（無料・修正可能）
• ベクター形式でも配布されているので加工が簡単
• オンラインで画像の加工が可能

という感じです。

使い方も簡単です。

画像をクリックすると下のような画面になり、View Imageボタンでsvg形式で表示（ダウンロード）、PNGボタンでpng形式で表示（ダウンロード）できます。

svgファイルは、Illustrator等で加工しても良いですが、凝ったことをしないのであれば、Edit Imageボタンで画像エディタを使えます。

また、たとえば iPhoneと検索 すると

このように80以上出てきました。

これらがすべてベクター画像で配布されているのです。

プレゼン資料やWebサイトのアクセントとして、ぜひ活用したいですね！

豊洲新市場についてのニュースサイト「豊洲新市場ニュース」を開設しました

株式会社ダイレクトサーチジャパンは、2015年3月までの開場をめざし計画が進んでいる「豊洲新市場（仮）」およびその周辺地域の情報をまとめたニュースサイトをリリースいたしました。

豊洲新市場ニュース

どうぞよろしくお願いします。

Yahoo! JAPAN のシークレットIDが素晴らしいので今すぐ使おう

今日も順調にお腹がいたい TANAKA Kohji です。
ニュースでではなく、たまたま知ったYahoo! JAPANの新しい機能、シークレットIDを試してみました。

新機能「シークレットID」を使ってみよう (Yahoo! JAPAN Tech Blog)

この機能は簡単にいうと

• ログインIDを変更できる

という機能。簡単すぎて一行でした。

Yahoo! JAPAN のようにIDがサービス内で表示される場合、ログインIDが既知なのでパスワードのみ何らかの手段で入手されるとIDを乗っ取られてしまいます。

パスワードを総当たりで攻撃するとか、破られやすいパスワードを利用している場合もありますね。

大抵の場合、複雑で、長い（たとえば20文字程度の）パスワードを使用することで防衛するわけですが、それでもIDが知られているので相対的にはリスクは高くなります。

そこで、シークレットIDで、ログイン用のIDを別にしてしまおうという発想ですね。

これ素晴らしいと思います。

思いつく限りで

• （当然のことながら）アカウントを乗っ取られる危険性が減る
• 既存の仕組み（通常のID）と共存できる
• システム的に実装難易度が高くない
• より重要なサービスの場合、シークレットID必須というようなことが将来的に可能になる

という感じ。

ひとつめはいわずもがな。

わたしも早速パスワード管理ソフトのパスワード生成機能で、パスワード以上に堅牢なIDに変更しました。（そこまでする必要はないかもしれませんが、せっかくなので）

ふたつめの共存というのはYahoo! JAPANのようなサービスには絶対に必要でしょう。

ユーザーを啓蒙しながら、徐々に移行させるということも可能なので、意識の高いユーザーから移行していけます。

利用を休止しているユーザーの存在を考えると移行率が100%になることはありませんが、逆に言えば100%にする必要がありません。

3つ目の実装難易度が低いというのもポイントです。

技術的な話をするとおそらく以下のような手順で既存のサービスに載せることになるでしょう。

1. usersテーブルにsecret_idフィールドを追加
2. Userを追加するときにIDをハッシュ化しsecret_idフィールドに投入
3. UserがシークレットID機能を利用するときはsecret_idを変更
4. ログイン時にはシークレットIDとパスワードでログイン

という感じでしょうか。既存のユーザーも一律変換してしまって良いですね。

既存のログインの仕組みと大差ないので実装が簡単です。

（シークレットIDを失念したユーザーへの対応はパスワードと同様のフローで必要）
（ハッシュ化されてるかは不明ですが、まあしておいて損は無さそうですね。追記：確認したら登録情報のページでシークレットID表示されてたのでハッシュ化はされてないですね、ログイン専用IDという表記がふさわしいところでしょうか[06/07]）

そして最後の点。

Yahoo!カードのような、よりIDパスワードが重要な意味を持つサービスがあります。

このようなサービスのみ、シークレットIDの登録が必須というようにすれば、よりセキュアにサービス展開が可能でしょう。

良いアイディアとはこういう少ない手間で大きな効果を生むものを言うのだと思います。

シークレットIDの機能、良いですね。

サービス提供者にとってパスワードをハッシュ化しておくのは当然ですが、シークレットIDの実装をするのも当然になってくるかもしれません。

というわけでみなさんぜひ活用しましょう！

8時間耐久でPHPUnitについて勉強してきたよ

というわけで @mon_sat です！

PHPUnitについてのセッションということで気合い充分で参加してきました。
この8時間耐久シリーズはノマドのなかのノマドであり、安藤の中の安藤である@yandoさんが、無償で行っているセミナー（？）です。
コワーキングスペースのなかのコワーキングスペースである下北沢オープンソースカフェにて、午前中から夕方まで、みっちりPHPUnitについて学んできました。

PHPUnit使ってますか？
普段テストを書いていないとは言えませんが、胸を張って言えるレベルではないわたし。
独習でやってきていると基礎体力の点で充分とは言えないもの。今回はみっちりと筋トレしてこようと思い参加した次第。

8時間耐久PHPUnitの教室

View more presentations from yandod

午前中はPHPUnitのインストールが中心。
しかしそこはサービス精神旺盛の@yandoさん、普通にインストールするだけではありません。
PyrusというPEARの環境を整えるソフトの説明とそれを利用するメリットも教えてくれます。

わたしが理解したところによると、PEARでいろいろinstallしようとすると、全ユーザーに影響する形でインストールされてしまうという問題があるそうです。
自分の環境のみで特定のバージョンのPEARを使用したいといった場合など、普通にPEARを使用すると生じる問題を解決してくれるナイスなツールですね。

午後からいよいよ本格的にテストについてのお話。
まず簡単なclassのファイルを見て、それに対しテストを書いていきます。

基本的なPHPUnitによるテストの書き方は

という具合。
これでSmapleクラスのanyMethod()メソッドが実行され、期待する値（ここでは'正しい値'）と比較されます。
assartEquals()というアサーションは == を用いた比較をおこない、同値であればめでたくpassedとなります。
実行は、コマンドラインから次のように行います。

$ phpunit tests/Sample.php

ちなみにこうすると、結果が緑（赤）のバーで表示され見やすくなります。

$ phpunit --colors tests/Sample.php

テストに失敗した場合は、失敗したというメッセージとともに「最後の引数で与えたコメント」が表示されます。
複数のテストを書く場合に分かりやすくなりますね。

その後さまざまなアサーションの種類を教えてもらいました。バージョンアップのたびに増殖中とのこと。
$this->assertCount()とか。

また setUp() と tearDown() を利用して、共通処理の説明も。
上記のサンプルであれば。

という具合。これでテストメソッドがtestOther(), testAnother()のように増えていってもそれぞれのメソッド内でいちいちインスタンスを生成するという重複が避けられます。DRYですね。

ちなみにtearDown()の 'tear' は、涙の「ティア」ではなく、破るという意味の「テア」だそうです。
tear down で「建物等を取り壊す」という意味になるそう。
いやあ勉強になります。こんなこと自分で勉強してたら絶対に分からないですからね。
（この後、休憩中にmacのsayコマンドでいろいろ発音させて遊びました）

その後聞いたことも無い機能を次々と教えてもらいました。

まずはアノテーション。
テストメソッドの前に、指定された内容を書くことで、テストの実行を制限したり、特殊なテストを実行できるようになるとのこと。

他にもこんなアノテーションも。かなりDRYに記述できますね。（テストについてはDRYすぎるのも善し悪しだと思いますが、こういうのであれば何をテストしているかも分かりやすく活用したいところです）

PHPUnitの @dataProvider アノテーションを使用することで配列内のデータでテストを反復して実行可能

@mon_sat2012-05-29 15:18:31

テストの書き方（@は半角）
合計4回のテストが実行される

<?php
class DataTest extends PHPUnit_Framework_TestCase
{
/**
* ＠dataProvider provider
*/
public function testAdd($a, $b, $c)
{
$this->assertEquals($c, $a + $b);
}

public function provider()
{
return array(
array(0, 0, 0),
array(0, 1, 1),
array(1, 0, 1),
array(1, 1, 3)
);
}
}

#phpunit

tipshare.info

続いて、PHPUnitが行う気の利いた機能。
なんとPHPUnitではテスト実行前にスーパーグローバル変数を退避させ、テスト実行後に書き戻してくれるのです！
テストケース内で書き換えても影響は無いんだそう。毎度setUp()とtearDown()で $this->_session = $_SESSION; して $_SESSION = $this->_session; する必要はまったくないんだって。驚愕です。

で、ふと気になって、CakePHPのConfigure::read()できる設定はどうなんだろうと、CakePHPのソースを見てみると！

CakePHPのCakeTestCaseは、setUp()とtearDown()でConfigure::read()の値を保存・書き戻しをしてくれる

@mon_sat2012-05-29 15:36:33

テストケースの中でConfigure::write()しても、他のテストケースに影響を及ぼさない
https://github.com/cakephp/cakephp/blob/master/lib/Cake/TestSuite/CakeTestCase.php
#CakePHP
#phpunit

tipshare.info

案の定、同じように処理をしていました。
これは便利すぎますね。


この会では、実際に手を動かして何も無いところからテストを書いていったり、逆にテストが与えられclassを作っていくというプチテスト駆動開発を体験できたりと、非常に盛りだくさんの内容でした。

というわけでまた血になり肉になったようです。
@yando さんどうもありがとうございました！

Learn how to learn と Learn how to ask

目覚まし時計が無くても朝起きれるようになった TANAKA Kohji です。
いいことなのか、悪いことなのか・・・

さて。PHP祭りというイベントで知った大切な言葉に@hyoshiokさんの

Learn how to learn

 という言葉があります。
「学び方を学ぼう」ということで、その道の達人から学び方を学ぶことが、上達する近道であるというお話でした。

この言葉にいたく感激したわたしは、あちこちでこのお話をするようにしています。

（どの分野でも当てはまりますが）プログラムを学ぶときには、とくに重要ではないでしょうか。
今日、プログラムを学ぶにはお金をかける必要がありません。
インターネット上に山ほど情報がころがっていて、また書籍が多数ある分野も数多くあります。
試行錯誤は大事ですが、試行錯誤それ自体は目的ではありません。
「どのように学習すると良いのか」というのは何かを学ぶときに、常に意識しておいて、その道の先達がいれば、その方に教えてもらうと良いでしょう。
（教えてもらわずとも、その方が「どのように学習したのか」を意識することは大切です）

さて、ここからは別の話。
毎日複数の勉強会が開催され、あちこちで、無料で、有志の人たちが、勉強会参加者にいろんなことを教えています。
しかし、一方で。そういう方の多くは、そのことを本業にし、そして日々忙しく活躍しているのです。
その方に「今(ruby|python|php|etc)を勉強しようと思ってるから、今度教えてください」と言っても、よっぽどじゃないと時間とってくれないと思います。
逆の立場だったら嫌ですよね。仕事じゃないのに、、、ってなると思います。

じゃあそういった方が、何も教えてくれないかというとそういうわけでもありません。
twitterとかで困っている人がいると、積極的にヒントを教えていたりするのは、良く目にします。
わたしもそうやって助けてもらったことがたくさんあるし、つい昨日もありました。（ありがとうございます）

個人的な意見としては（少なくともわたしがお会いしている方々で）「教えることが嫌い」な方っていませんし、そういうことを積極的にやっている方が多いです。
自分から勉強会を開催したりとか。

ただたまに残念なのは「教わり方が残念な人」という人もいるようで。
それゆえ「学習スピードが遅く」結果的に「上達が遅い」という人がいるようです。

逆にそういうのが上手な方がいるので、その方を参考に、どういうふうにすると良いのかというのを考えてみました。
そういう方は

1. （前提として）何事も教えてもらうものではなく、自分で学習するものだと考えている
2. 自分が分からないことを隠さない
3. 具体的にどのポイントが分からないかを説明している
4. どのように試行錯誤したかを説明している
5. 尋ねるときは「答え」ではなく、自分がググるための「キーワード」のみを聞く

という感じでしょうか。

まず当然のこととして、1にあるように、教えてもらわずとも自力で解決するというように考えていない人には、救いの手は差し伸べられないと思います。ここを勘違いする人は論外ですのでまあ置いておくとしまして。

2は大事だと思います。

わたし自身もこれに気づくまでに大きく遠回りをしたものです。

自分が知らないことを「分かってない」と正直に公言するのは非常に勇気のいることです。それによって下に見られるんじゃないかとか（今考えれば）つまらないことを思ってしまうもの。

ですが、何人かそういう人を見てきて分かったのは、そういうふうに考えている人は、半年後1年後に会ってもまったく成長してないという方がほとんどということです。

数年前の自分を振り返って、当たり前のことができていなかった（もしくは当たり前のことを知らなかった）と思ったとしたら、今の自分に対し当たり前のことができていないと思っている方がいるということです。

その道の先達には、どう隠そうとしても、今のあなたは丸裸です。そう。隠そうとしていることまで。

それなのに 2 を実践しない理由はどこにあるでしょうか。

（と過去の自分に教えてあげたくなります）

そして、3と4です。

「動かない」では（助けようとしている人がいても）教えてもらえません。可能な限り具体的に、何をどうしていて動かないのかを（端的に）説明する努力が必要です。

また幸運にも教えてもらったときに「それは試しました」じゃいけません。あなたが事前に説明していない方がよっぽど悪いのです。逆の立場で、それをいわれて良い気がする人がいるでしょうか。

（でもこれついつい言っちゃいますけど。どう返したら良いんでしょうね）

そして最後がもっとも大事な 5 のポイント。

なかには親切に答えを教えてくれる方もいますが、あくまでそれが特殊事例。

反応してくれただけでも（本来なら）充分すぎることですよね。ひとりで誰にも聞けない状況で学習しているのであれば。

その方に、それ以上の何かを求めるのであれば、それは自分が調べて学習するためのキーワード（ヒント）でなくてはなりません。

学習をする時間を大幅に短縮するのは、答えそのものを教えてもらったときではなく、キーワードを知ったときなのです。

キーワードは問題解決の糸口とも言い換えられます。それを見つけるのに時間がかかるのです。

そしてヒントであれば、多くの方が発信しているものです。あとはそれに気づくかどうかですね。

というわけでこれから本格的に何かを学習する（あなた | わたし）へのお話でした。

と延々書いてきて気づいたことが。

これ、いつも以上に、自分のためになりました。

それどころか自戒になりました。

教えてくれる周囲の凄い方々へ、感謝を伝えることを忘れていたかもしれません。

直接言うべきことでこの場でいうべきことではありませんが、いつも助けていただいている皆様、心の底から感謝しています。はい。本当に。

第1回ゼロからはじめるWordPress勉強会に参加してきました

久しぶりの朝ブログ。というわけで TANAKA Kohji です。
昨日、コワーキングスペース恵比寿で行われた第1回ゼロからはじめるWordPress勉強会に参加してきました。

WordPressとは、オリジナルのブログやWebサイトを簡単に構築するためのCMSとよばれるソフトのこと。

わたしも何度か使用したことがありますが、非常に使い勝手が良く、自分の作りたい物を時間をかけずに構築することができます。

そして特徴のひとつに、ユーザー数が非常に多く、またコミュニティも活発ということもあります。
ここしばらくWordPress界隈の方とお話しする機会が増えたのですが、コミュニティが発展しつづけるのもうなづける見習うべき方々ばかりでした。

さてこの勉強会。
これからWordPressを始める方、もしくは、始めて間もなくいろいろと試行錯誤をしている方を対象とした勉強会です。
主催されているのは、コワーキングスペース恵比寿の管理人でもある中畑隆拓さん（@nakachon）です。
自身の経験をもとに、学習初期の「コミュニケーションをとる仲間」の大切さをみなさんに知ってもらおうということで、勉強会の定期開催を決めたそうです。
わたしもWordPressの情報収集をするべく参加してみました。

参加者は10名ほど。コワーキングスペース恵比寿が満席に。
集まった方は、WordPressに興味がありこれから本格的に使っていこうと思っている方から、すでに独習でWordPressを使用したサイトを作成し運営している方まで。

テーマは『○○』勉強会に参加してもらっている小池安雲さん（@agumo5）も参加されました。自身のWebサイト（http://space-bliss.com/）をWordPressで構築しているそうです、すべて独習で。
わたし自身が独習でプログラミングを身につけていったこともあり、こういった方を応援するのは大好きです。


この日の勉強会では、ふたつのことを。
ひとつは、ローカル環境の構築ということで、持参してもらったノートPC内でWordPressが動くようにすること。
もうひとつは、WordPressのインストールということで、WordPressの最新版をダウンロードし初期設定をすませるところまで。
みなさん優秀で、概ね何のトラブルも無く終了しました。

慣れた人には、たったこれだけのことだと思います。しかし、そのたったこれだけのことに、学習初期のころ何時間もかけてしまうもの。つまづいた理由が分からずに。
この時期、どういう点がはまりどころかというのを仲間と共有しておくのは大事です。
（上達すると忘れてしまいますからね、その時苦労したことを）

ちなみにはまったことを解決したらブログに残すことが大事です。
あとから自分が「同じ点でつまづいたり」することは良くあることですし、それ以上に「同じポイントではまっている方」を助けることになります。
あなたが何時間もはまった問題を解決してくれたそのWebページは、先に経験した方が、後の方のために書いてくれたものかもしれません。
次はあなたが、あなたの視点で書くことで、同じ経験をする方の役に立つ番です。
（ちなみに「ブログに書いてる時間が無い」という方のための http://tipshare.info/ というサービスを作っています。5分で書けるようにTipsという単位で投稿するためのサイトです）

勉強会に参加したらブログに書く、これはわたし自身が勉強会に参加して教えてもらった大事なことです。（「勉強会はブログに書くまでが勉強会」という名言もあります）
ぜひ昨日参加された方は実践しましょうね。なんせWordPressの勉強会なんですから（笑）


今はBloggerやTumblr等を利用して無料でブログが書けます。（独自ドメインで！）
それでもWordPressを利用するのは、自分の作りたいものが作りたいからでしょう。
スキルアップは表現力アップに通じます。
勉強会に参加して一番の収穫は、参加者の「作りたい」というパワーを感じたことです。
以前ほどその情熱を持てていないことに、ふと気づかされました。
今日からまたゼロからやり直そうと、初心をとりもどした次第。
非常に有意義な勉強会となりました。

雨の高尾山

TANAKA Kohji です。
先日、高尾山へ行ってきました。
子供のころ以来なので何十年ぶりか。もう前回行った記憶はほとんどありません。

電車が到着する直前から雨がぱらぱら。
夕方からの雨予報が午前中には降り出しました。

予報では小雨ということだったので気にせず出発。
の前に。
早めの腹ごしらえということで、観光客の行かなそうな駅近のお蕎麦屋さんへ。

そうしたらお店に着いたとたんに、どしゃ降りに。
もう笑ってしまうくらいの雨でした。

しかし。
おそばを食べ終わってしばらくしたら、小止みに。
ついてますね。
ところでこの「ついてる」って何が付いてるんでしょうね？

さて、そそくさと駅に戻り、傘を買おうとしたら、さっきのどしゃ降りのときに売り切れたそうです。
当然ですね。
というわけでお蕎麦屋さんの道すがらにあったこじんまりとしたお店で傘を調達。
こっちは売ってることが知られていないのか、まだまだ在庫はありました。
お蕎麦屋さんに行かなかったら気づかなかっただろうし。
ついてますね。

そしてケーブルカーを使って、、、ではなく、リフトで上へ。
リフトはムスメのリクエストです。
小雨も降っていたしケーブルカーの方が良いのですが、リクエストには勝てません。

一応、幌のようなものがありますが、横からの雨には濡れてしまいます。
それでも霧雨のような雨だったので無問題。

ムスメと一緒にリフトに乗り、ごとごとと約10分間。
景色は見られませんでしたが、すれ違う団体の小学生に挨拶しながら上昇。
ムスメもご満悦でした。

そして降り口。
降りた途端、再度どしゃ降り。
リフトに乗ってたらずぶぬれだったことでしょう。
ついてますね。

その後はてくてくと緩い坂道を登っていき、途中見晴らしの良いところまでくるころには雨は一旦あがりました。
結構遠くまで見えるものですね。八王子や相模原くらいまでははっきりと視認できました。
もっと晴れていればスカイツリーや千葉県のほうまで見えるそうですが。

晴れてればこんな感じらしいです

それでも見晴らしの良い場所で雨が上がっているのですから。
ついてますね。

そして予想通り、山の中腹でムスメの「もうケーブルカーで帰りたい」という申し出。
というわけで道半ばにして踵を返します。

ケーブルカー乗り場も大混雑でしたが、次のケーブルカーに乗れました。

結局あまり高尾山を堪能できませんでしたが、まあ濡れなくて幸いでした。
（雨が降らなければもっとついてると思うのですが、、、）

Googleドライブとdropbox

かねてから噂のあったGoogleドライブがついに公開されました。
dropboxユーザーとして注目している TANAKA Kohji です。

新しいプロダクト: Google ドライブ
新しいドキュメント共有・同期ツールである、Google ドライブをご紹介します。Google ドライブは、Google ドキュメント上で、ファイルを共有・管理できるツールで、ブラウザ、Google ドライブクライアント、そしてモバイルアプリからファイルへアクセスできるようになります。
Google ドライブは、今後 4-8 週間をかけて、すべてのドメインでご利用可能になります。

https://drive.google.com/

5GBの容量まで無料と、同種のサービスの中ではSugarSyncと同様の大盤振る舞いです。

個人的にもどかしかっただろうと思うのは、Google としては差別化しやすい「大容量」というポイントですが、同社としては昨今有料ユーザーを増やすために四苦八苦していて、あまりに無料スペースが多いと、gmail同様有料ユーザーが増えないという悪循環に陥ります。

容量についてはいろいろな憶測が飛び交いましたが、結局5GBで落ち着いたようですね。

ただし。

Googleドライブで注目するべきポイントはそこではありません。

何といってもGoogle Docsとの連携です。

もともとGoogle Docsは、ファイル共有の機能があり、1GB程度までは誰でも共有できました。

この機能は非常に便利で、Google Chromeを利用していると、ブラウザへのドラッグアンドドロップだけでファイルがアップロードされ共有できるのです。

その容量が拡張され、スタンドアロンのアプリケーションからのアクセスが可能になったと考えれば分かりやすいかもしれませんね。

Googleドライブ開始に伴い、Googleドキュメントの次の点が変更になるそうです。

• 「コレクション」から「フォルダ」へと名称を変更

• アップロード設定など、「メニュー」項目を追加

• 左のナビゲーションの項目を変更（「マイ ドライブ」や「更新情報」など）

• ホームの代わりに、「マイ ドライブ」からファイル、フォルダの管理を

UIをより手元のパソコンに近づけることで一般的になるようです。


これに対してdropboxです。
わりと有名な話として、dropboxが、Y-Combinatorから投資を受けるにあたり、他の類似のサービスとの違いとして謳ったのが「技術力」という点。
実際にAPIを利用している方のこえでは、その使いやすさが群を抜いているとのことです。

最近でも、より簡単にファイルを他人へ受け渡すことが可能になる機能を追加し、ユーザー層の拡大も進めているようです（Dropbox、「リンクの取得」機能で非ユーザーとのファイル共有を可能に - ITmedia ニュース）

Web上のUIも刷新し新規のユーザーにも使いやすくなっています。
このことは、わたしの周囲ではじめてこの手のサービス（dropbox）を使うようになった方々も言っていました。


dropboxにとっては大きなライバルの出現ですが、Googleがこの分野でどの程度力を入れてくるかは未知数です。
またLinuxでも使用できるという点でdropboxの使われ方というのは、単なるファイル共有ソフトにとどまらないということもあります。
今すぐにdropboxが下降線をたどるということはなさそうですね。


ユーザー数の多さはこの分野での圧倒的なアドバンテージになるためGoogleアカウントで利用できるということはGoogleドライブに有利な点ですが、一方でGoogleAppsなど複数アカウントの管理はどうなるのかという不安な点もあります。


しばらくは両者を試用しつつ行方を見守っていきたいと思います。

第2回Webデザイナー向けCakePHP勉強会とワークショップ #3

今回の勉強会では、CakePHPの使用が初めてという方も何人かいたため、ワークショップを開催しました。

講師は、WebデザイナーのためのCakePHPビューコーディング入門 の著者の滝下 真玄さん、原 一浩さんのおふたり。

今回のポイントは、何といってもインストールから指導しCakePHPの簡単なアプリを作るところまでフォローしたという点。

なにごとも始めの一歩が一番躊躇します。
右も左も分からないまま、とりあえず試そうと思っても、インストールでつまずいてしまい、本質のところまで到達せずに終了というのは良くあることです。

CakePHPはRuby on Rails と違い、その名の通りPHP製ですから、インストールも簡単です。
とはいえそれすらままならないユーザーのために、今回はインストール指導のコースも用意しました。


そしてインストール後はいっきにアプリの作成へ。
今回は本ではフォローされていない、カラムの追加といった実践的な内容も学べたようです。
本に書かれた内容だけでは物足りないという方でも満足できる内容ですね。

今回使用したテキストは、もちろんこちら。



好評なだけに、事前購入者が多かったです。

ワークショップの雰囲気を知りたい方は、PoRTAL Shibuyaのfacebookページの写真をご覧ください。

今後も定期的に開催していこうと思います。

第2回Webデザイナー向けCakePHP勉強会とワークショップ #2

昨日途中になった勉強会とワークショップのお話です。

今回も勉強会後は恒例の懇親会を行いました。
会場を提供していただいた PoRTAL 渋谷 さんより20時以降であればということで勉強会会場でのビアバッシュを許可していただきました。

勉強会の模様と懇親会の模様はPoRTALさんのfacebookページで見られます。

わたしが主催する勉強会では、基本的に懇親会を行うようにしています。

理由のひとつは、勉強会は単に勉強する場ではないということです。
勉強がしたいのであれば、ひとりで図書館や喫茶店でも可能です。
勉強会というスタイルは、有志によるスピーカーがいて、そして、そこに集まる参加者がいて成り立つもの。

最近では勉強会をUstream等で配信することが多いですが、それらを見てもかなわないことが、参加者やスタッフとの交流です。

わたしが過去参加してきた勉強会では多くのケースで交流する場を設けていました。
この交流こそ、勉強会に参加する、ひとつの意義だと思うのです。

そして可能であれば、懇親会会場は勉強会会場と同一が望ましいですよね。
立派なお店を予約して行うのも良いのですが、会場をささっと片付け、缶ビールとピザなどで手作りに実施するのも良いのです。

なかなかそういう会場をご提供いただく機会は多くありませんので、今回は大変助かりました。

おかげで和気あいあいとした雰囲気で和やかに交流することができました。
勉強会中は参加者の方々に気を配ることが難しいことが多いので、懇親会でようやく参加者の方々の顔を見られることもしばしば。

今回は普段良く利用するセミナー形式の会場ではなく、アトリエのような場所で、より交流しやすかったと思います。
こういう場所で仕事をしてみたいという方は、今ならキャンペーン料金で申し込めるそうですので、ぜひどうぞ。

あら、ワークショップについては、また明日にでも。それでは。

第2回Webデザイナー向けCakePHP勉強会とワークショップ

土曜日の勉強会の余韻の残る @mon_sat です。

4月21日（土）に第2回Webデザイナー向けCakePHP勉強会を開催しました。
昨年7月の第1回から随分と間が空いてしまいましたが、本当はずっとやりたかったんです。

もともとこの勉強会はふたつの狙いがあります。
ひとつは、CakePHPに興味がある方に対しCakePHPを知ってもらって、もっとたくさんのひとに使ってもらいたいというもの。
もうひとつはプログラマーとデザイナーが一緒に（CakePHPで）Webアプリを作成するときに、デザイナーさんがCakePHPについて知ることで、より良いものが作りやすくなるだろうと、その橋渡しをするというもの。

後者はたとえば、デザイナーさんが作成したHTMLをCakePHPのビューに変換した後、クライアントからデザインの修正依頼がはいったとき、元のHTMLではなくCakePHPのビューを編集できたら全体の仕事量は減るでしょう。
同じHTMLの修正にも関わらず全体として2重の作業が発生してしまうと、本来するべき他の作業に影響がでないとも限りません。

反対にデザインのベストプラクティスが分かればCakePHPに取り込むこともできるかもしれません。

デザイナー／プログラマーというのは関係なく、CakePHPに興味のある誰しもがCakePHPのコミュニティの一員でありコミュニティを支えていると思うのです。

このコミュニティこそがCakePHPの強みのひとつであり、興味のある方が気軽に参加できるイベントになれば良いなと思っています。
もし勉強会自体に不慣れな方がいても、そういう人にも参加してもらいたいですし。


今回は勉強会の初っ端に「座談会」ということで「これからCakePHPを利用して何かを作りたい」というかたを交え、CakePHPについての疑問を解決するという試みを行いました。
CakePHPに限らずフレームワークは、まずその思想に惚れ込むというのが効率的に学習していく秘訣です。
今回はあまりご紹介できませんでしたが、Ruby on RailsやCakePHPの思想を意識することは学習の手助けになることでしょう。
（以前紹介した、37signalsのGetting Realも同様に読んでおくと良いですね）


セッションの方はあまり準備期間の無いままに行ってしまって反省点の多いところです。
とはいえその限られた時間で用意したとは思えない素晴らしい出来でしたので、ぜひご参加されなかった方も見てください。


第2回Webデザイナー向けCakePHP勉強会（ビューの基本） | ZENPRE（ゼンプレ）
No Helper No Life | ZENPRE（ゼンプレ）

DebugKit | ZENPRE（ゼンプレ）

第2回Webデザイナー向けCakePHP勉強会（テーマ機能） | ZENPRE（ゼンプレ）


懇親会とワークショップについてはまた明日書きたいと思います。

よろしければ次回もやりたいと思いますので、ご参加ください。それでは。

sukuel.net終了のお知らせ

春は出会いと分かれの季節です。
昨年3月にスタートした sukuel.net ですが、本日を持ってサービスを終了させていただきます。

なお当サイトからの収益は日本赤十字社を通じて東日本大震災の復興のために寄付させていただきました。
弊社負担分を合わせ、25,000円となります。

ご協力誠にありがとうございました。

閏日に思うこと

2012年最初の記事は、年があらたまって60日目。
本来なら3月1日ですが、今年は閏年ということでぎりぎり2月です。

というわけで TANAKA Kohji です。
なんとか無事に生きています。

今日2月29日は閏日と言います。
閏日は、公転する太陽と24時間×365日のずれを修正するために約4年に1度存在する日。

正確には4年に1度ではないのは、プログラムを組むようになってから知ったこと。

1. 西暦年が4で割り切れる年は閏年
2. ただし、西暦年が100で割り切れる年は平年
3. ただし、西暦年が400で割り切れる年は閏年

（引用：Wikipedia - 閏年）

JavaScriptで書くとこのような感じでしょうか。

（非プログラマーの方すみません）

さて、そんな特別な日があるということは。
今年はいつもの年より1日多いのです。

『今日あなたが無駄に過ごした一日は、昨日死んだ人がどうしても生きたかった一日である』

という言葉があります。

いつもと違う雪が舞う東京の朝でしたが、今日という1日を無駄にせずに過ごしていきたいものです。
約4年に1度、貴重な1日なのですから。