宝島社さんの公式サイトである「宝島チャンネル」のサイトトップのローテーションバナー（右上のやつ）を改修させていただきました。毎度ご依頼ありがとうございます。

以下、改修内容。



元々Flashで作られていたものを、JSとCSS3で改修してます。

・動きはほぼ従来のFlashバージョンと同様
・左から右にアニメーションしてる白いカーソルみたいのは、CSS3で再現。
　ただし、Chrome、Safari、Firefoxなどの対応で、IEだとここは省略されます。
　いわゆるプログレッシブエンハンスメントってやつです。
・Flashバージョンの更新性があまり良くなかったので、外部のxmlで更新をおこなう仕様に変更しました。

という感じで、現在はアプリ事業に注力してるのですが、
こういったFlash→JS化は好きなので、ご依頼を受けることにしてます。
お仕事ございましたらぜひ。

「宝島チャンネル」

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

ご自身でこの手の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行」という表現は不適切であるとのご指摘をいただきました。
エントリ名から削除いたしました。誤解を与えてしまうような表現を用いまして、大変申し訳ありませんでした。

基本は、CSSとJavaScriptのみでレイアウト変更しています。

PHPではUA判定してスマートフォン用のCSSとJSを読み込む数行を加えた程度で、WordPressのテーマのスイッチなどはおこなっていません。

[html]
<link rel="stylesheet" href="http://blog.kaleido-jp.net/wp-content/themes/station2/iLayout/css/iLayout.css">
<link rel="stylesheet" href="http://blog.kaleido-jp.net/wp-content/themes/station2/css/istyle.css" />
…
<script type=’text/javascript’ src=’http://blog.kaleido-jp.net/wp-content/themes/station2/iLayout/js/iLayout_ui.js?ver=0.1.0′></script>
[/html]

HTMLソース的には、上記の3行を変えただけでスマートフォン最適化を実現しています。

場合によっては、WordPressのスマホ用テーマを作って、スイッチしてもいいと思うのですが、今回はその方法は見送りました。

なぜかというと、別のテーマを作るということは、サイトの構成を変えたくなったとき
基本的に2つのテーマを管理・更新しなくてはいけなくなるなーと。

CSSとJSによるレイアウト変更であれば、基本的にPCサイトの要素はそのまま引き継げるので、要素の取捨選択や変更することに集中でき、変更するファイルがCSSとJSのみとなり効率が良いからです。

PHPテンプレートを変更する必要がなくなります。

もちろん、サイトを管理する人が複数いるとか、運用体制に余裕がある場合は、テーマ切替による最適化でもよいと思います。

また、iPhone3GS全盛時代までは、CSSのメディアクエリで振り分けることもできたのですが、今現在横幅が480px以上のAndroid端末がだいぶ多いので、サーバ言語かJSなどでUA判定して振り分けるようにしましょう。

ほとんどお決まりの記述ですね。
[html]
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
[/html]

これについては、いろんなサイトで情報が出ていますので、説明は割愛します。
下記サイトなどをご覧ください。

• ・iPhone向けサイト構築 基礎文法最速マスター
• ・ASCII.jp：作って学ぶスマートフォン対応サイトの基本｜実践！iPhone＆Androidサイト制作ガイド

[html]
<link rel="apple-touch-icon" href="http://blog.kaleido-jp.net/wp-content/themes/station2/iLayout/Images/WebClipIcon.png">
[/html]

（アイコンがダサいですがスルーで…）

この記述をおこなうことで、iPhoneならホーム画面に追加する際のアイコン、Androidならショートカットアイコンを設定できます。
（iPhoneは用意した画像に、自動的に磨き処理がかかって、いい感じになります）

余談ですが、「スマートフォン対応しました！」とアピールしているものの、この設定がされてないサイトをたまに見かけます。なんだか、アピールしているだけに惜しい感じが出てしまうので出来るだけ設定しておいた方が良さそうです（笑）

スマートフォン時のCSSには次の記述をしています。
[css]
body {
…
-webkit-text-size-adjust: none;
…
}
[/css]

これを行うことで、横向きしたときのテキストの自動拡大表示を無効にします。最近は拡大をしないのが一般的のようです。拡大表示されちゃうとなんだか不自然な印象を受けます。

比較していただければわかるように、情報量が全く違います。

このサイトはスマートフォン時には、コンテナ要素をwidth:100%としており、内部要素も必要に応じて横向きにした際に横幅が広がるレイアウトを組んでいます。

たまに横幅320pxなどとしたサイトを見かけます。別にそれがいけないというわけではないですが、問題はAndroidで閲覧した時です。iPhoneはレイアウトの組み方によっては、横向きにしたときに自動的にフィットしてくれますが、Androidでは純粋にその固定幅で表示されるため、以下のようなイメージになります。

左右に無駄な余白ができてしまい、なんだか不自然な感じになってしまいます。

フリックできるスライドの実装

サイトトップのバナーは、ユーザーがフリック操作が出来るようにしています。
トランジションはCSS3、UIの構築にはjQueryを使って自前プラグイン化してます。

今後いろんなサイトで使い回せるように、実装は下記の1行で済むようなプラグインを作っています。
[javascript]
$(‘#mainImageArea>#mainImages ul li’).flickSlide({target:’#mainImageArea’, duration:5000});
[/javascript]

このUIはけっこう手の込んだことをしています。

スマホサイトは横向き時というのを、念頭においてリキッドレイアウトという大前提で組む必要がありますが、絶対配置（position:absolute）などの要素を使うことになると、かなりハードルが高くなります。今までのPCサイトでのCSSレイアウト術より高度なスキルと発想が求められるのでは〜？と思っています。

後日のエントリでプラグインの説明と配布をおこなうつもりです。

ちなみに、このUIはAndroidでたまーにバグることがあります。どうやらYahooさんのサイトなどを見ると、iPhoneではフリックが有効になっているのに、Androidではフリック無効となっているので、まだまだAndroid向けサイトではフリックの実装はおこなわない方がよいのかも知れません。

LightBox風の画像表示の実装

こちらも自前で作成しています。

PC時はColorBoxという海外の方のプラグインを使用させてもらってるのですが、それをスマートフォン時でも同様に使うと想定どおりにおかしな表示になりました（笑）

なので、こちらのUIも独自にjQueryで作成しました。PCのように凝ったUIにするとだいぶ重くなってしまうので、とりあえずシンプルにしています。

だいぶ基本的な部分は作ったものの、元々サイトの構成ができてない上、細かい部分で最適化が行き届いてないです。
たとえば、リンクがボックスリンク（？）になってなかったり…タッチしにくいですよね。

とりあえずは、ちょっと凝ったUIの部分に時間を割いてみました。

もし、なにか気づかれた部分などあればお知らせください。
まだまだ知らないことが多く、日々勉強中です。

長くなってしまいましたが、少しでもみなさんのご参考になれば幸いです。