『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度寝に気をつけて過ごしたいものですね（笑）