横向き対応がハードルを高くする

ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。

今現在、ディスプレイサイズが多様なAndroid端末が普及しており、横向きになったときにそれぞれの端末において横幅を変える必要があります。わざわざ各機種のディスプレイサイズを登録しておくようなことは、フロントエンドの処理としては非現実的です。

そこで、このプラグインはフレキシブルな端末対応をおこなうために、端末の向きが変わった際に横幅を取得しなおすという処理をおこなっています。

プラグイン化したことで、上記のような手の込んだことを毎回書かなくてもよくなります。

ダウンロードしたファイルを解凍後、
jquery.flickslide.jsとflickslide.cssをご自身のサイトの任意の箇所に置いてください。

【解凍後のファイル】
js – jquery.flickslide.js　：プラグインJSファイル　
css – flickslide.css ：　プラグイン用CSSファイル
– arrowL.png 　：　左矢印画像
– arrowR.png　：　右矢印画像

HTML
[html]
<script src="js/jquery.flickslide.js"></script>
<link rel="stylesheet" href="css/flickslide.css" type="text/css" />
[/html]
JavaScript（jQuery）
[javascript]
$(‘適用したい繰返し要素’).flickSlide({target:’差換え要素’});
[/javascript]

※cssフォルダに入っている画像は、flickslide.cssと同じディレクトリに置いてください。
ただ、CSSのカスタマイズをすることで、ご自身でご用意された画像などに変更することができますので、
その場合は、同じディレクトリである必要はありません。

画像を並べたような下記HTMLがあったとします。

HTML
[html]
<div id="mainImages" class="mainImageInit">
<ul>
<li id="mainImage0">
<a href="/category/web/html5/">
<img src="/images/html5.jpg" />
</a>
</li>
<li id="mainImage1">
<a href="/category/web/smart/">
<img src="/images/smart.jpg" />
</a>
</li>
<li id="mainImage2">
<a href="/category/web/music/">
<img src="/images/music.jpg" />
</a>
</li>
<li id="mainImage3">
<a href="/category/web/iphone/">
<img src="/images/app.jpg" />
</a>
</li>
<li id="mainImage4">
<a href="/category/web/jquery/">
<img src="/images/lovejquery.jpg" />
</a>
</li>
<li id="mainImage5">
<a href="/category/web/moviemusic/">
<img src="/images/moviemusic.jpg" />
</a>
</li>
</ul>
</div>
[/html]

上記のようなHTMLがあった場合、JavaScriptは下記のように記述する。

JavaScript
[javascript]
$(‘#mainImages li’).flickslide({target:’#mainImages ul’});
[/javascript]

適用したい繰返し要素：#mainImages li
スライドとしたいのはli要素の中身なので、上記の用に指定。

差換え要素：#mainImages ul
プラグインが発動されると、UIを生成。差換え要素で指定された箇所と置き換わります。

※iPhone・Androidでアクセスしないとプラグインが自動的に発動を止めますので、テストする際は必ず実機やシミュレータでおこなってください。Mac・PC版のSafariなどのユーザーエージェント変更では、見た目がだいぶ異なると思います。

・自動的に5秒ごとにスライド
・スワイプによるスライド
・フリックによるスライド
・横向き時に自動的にサイズ補正・センター寄せレイアウト
・ページング的UIの自動生成
・「前へ」「次へ」のボタン自動生成
・ユーザーエージェント判定し、iPhone・Androidでない場合は発動しません。
・CSSのカスタマイズによるデザイン変更

※ごく稀にAndroidでバグが起きるようです。激しいスワイプやフリックについていけないようです。
　これについてはOSなどに依存するのかなぁという認識です。ゆっくりスワイプしなおすと正常に動作します。
※内部的にはかなりベタ書きで、美しいプログラムではありませんのでご了承ください。
　ご自身でUIなどの開発ができず、とりあえずUIを組込みたい方向けです。
※ライセンスはMITでお願いします。ご使用については一切の責任を持ちませんので、ご理解いただけますようお願いいたします。
※ご要望があれば、これらの設定はパラメータ制御できるようにバージョンアップ予定です。
カスタマイズやご自身のサイトへの最適化のご相談・ご依頼などはコメントもしくはメールでお願いいたします。あくまで業務としてのご相談やご依頼を前提としてください。Web関連の業者の方に無条件での回答などはいたしませんので、ご了承ください。
※Android端末はIS03のみしか確認できていません。他のAndroid端末で表示をご報告いただけたら幸いです。
※【追記（2011.4.30 23:55）】1ページにつき1つまでの実装可能です。またスライドさせる要素は極めてシンプルな要素の方が良いです。
※【追記：2011.5.1 23:36】デモについて最初大きい画像が表示されますが、単純に画像を並べただけのHTMLソースですのでそのようになります。このサイトトップでは、CSSでdisplay:noneしておきページロード後に表示という処理をおこなっているため綺麗に表示されます。プラグイン自体は、あくまでUIの生成・置換えのみの機能ですので、同様の処理をおこなう場合は、対象となる要素をdisplay:noneするなど、独自でCSSやJSの追加をおこなってください。
※【追記：2011.5.2 21:45】上記の画像が一瞬大きく表示されるのをプラグイン側でもある程度制御できたので、修正版をアップしております。2011/5/2 21:45以前にダウンロードされた方は、よろしければダウンロードしなおすことをおすすめいたします。
※【追記：2011.5.6】Androidではブラウザのメニューを開いた際、ローテーションスクロールのキューが溜まり、バグが起きてしまうようです。ブラウザメニューを開いた検知などができないため、次回バージョンアップでローテーションをOFFする設定を設けたいと思っています。

スマートフォンサイトでは横向き時のサイズ変更に対応した、手の込んだレイアウトを組める必要があります。
そのレイアウト術は、スマートフォンサイトを組む上で、今後必要となるスキルだと思われるので、次回のエントリで紹介したいと思っています。

このサイトのスマートフォン対応の全体的なことは、下記エントリーに書いていますので、こちらも合わせてご一読いただけると幸いです。

スマホ最適化でやったこと

また、今回のプラグインはサイトトップで実装されています。

サイトトップ

【追記：2011.5.1】エントリのタイトルに「1行」という表現は不適切であるとのご指摘をいただきました。
エントリ名から削除いたしました。誤解を与えてしまうような表現を用いまして、大変申し訳ありませんでした。