by ciccioetneo :: ON & OFF
既存のサイトをスマートフォン対応にしようと思ったときに、どうしよう。基本的にjQueryとCSSで対応できそうなので、それで対応した。あとは、そこへテンプレートタグを埋めこんで、きちんと動くようにする。
まず、JSをつかってスマートフォンのUAを取得、それと一致するようならそれようのCSSを出力。また、URLを変えたい場合はそのURL先を提示、移動を促す。その場合には双方向で行き来しやすくなると良いと思う。
URL変えたくない場合は、CSSで visiblity:hidden;と display:none:でいらない要素を徹底的に消していって、表示したいやつをうまく整形する。
スマートフォンっぽい見た目にするのに手軽なのが、iUiというライブラリ。画像とかも入ってて、ドキュメントも充実してるようだ。デモはここから。
ちなみに、このライブラリを使っているのは、日本語版LifehackerやGizmodoなどをはじめとするメディアジーンのメディアに見られる。これらはもともとGawker Mediaのブログネットワークのひとつ。オンラインメディアが事業としては地道にこつこつと積み上げていかなければいけないものであるとファウンダーも言っているけど、そうならざるを得ない理由として、誰でも新規参入ができるという点があるだろうと思う。そして、収入が既存のメディアよりも多く無いから事業が大きくなりにくい。特に新規にはじめる場合。
あ、話を戻すけどゴーカーの一部のメディアは新規テンプレートに移行したけど、あのテンプレート、個人的には微妙だと思うよ。だって、他のサイトとナビゲーションが全く違うから。しばらく使っているうちにこのテンプレートが意外と使いやすいかも、とか、過去のポストまでのナビゲーションを必要以上に用意する必要はないのか、とかに気がつくからなんとも言えない。今後スタンダードになるならばアリだな。
コミュニケーションの機能をより強く押して、ポータルサイトとかをあくまで導線に。面白い話をするならゴーカーのサイト内だよな。ってことを目指してるのかな。
なんか、愚痴ったけど以下、今回見たサイト。いい加減デザインや技術関連の本とかほしいね。
・iPhoneの向きによって画像の大きさを自動的に変えるスクリプト – blog.remora.cx
・iPhone用サイトで、画像を縦横ともに画面幅いっぱいにリサイズさせる //iPhone – bute_lab.
・iPhone用にCSS/PHP/JavascriptでCSSを切り替える基本的な方法｜linker journal｜linker
・風俗系スマートフォン向けサイトの作り方 | LonelyComet | 風俗系のデザイン指南サイト
・スマートフォンコーディングTips : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～
去年の冬、HTMLとCSSを勉強がてら、某ニュースサイトをMT4.2で制作したが、（MT4テンプレート作りに早速実践投入してみた）、今度は特設ページを作りたいのでMT3で作ってくださいと言われ、レビューサイトを制作することになった。本当は最新版がよかったんだけどな…
MT4以下でレビューサイトならプラグイン必須
MT4以降にはカスタムフィールドが追加されていて、テンプレートに組み込むのが容易となっている。その為、商品記事として商品説明分を書いて、カスタムフィールドに価格や店情報や画像などを付与してやれば、テンプレートにそったレビューページを創成してくれるのだ。しかしながら、MT3にはそれがない。その為、RightFieldsというプラグインを利用する必要があった。
HTMLとCSSを書く
例によって適当に書いてみたHTMLとCSSをFirebugさんのようなもので調整。やはり直感的に作れるのはうれしい。数値を変更するとリアルタイムに反映されるのはとても気持ちがよいモノだ。今回Google Chtome付属のデベロッパーツールを利用した。こいつは結構使える。
MTタグ入れて完成
タイトルだけで終わりなんだけど、結構面倒くさい。大きなサイトでカテゴリごとに条件分岐させて、表示するべきページ内容を変えなければいけなかったからだ。今あるサイトに新たに特設サイトをつける形だったので、新規に作るより面倒だった。
苦労したこと
Google ChromeにCSSのキャッシュが残ってしまっていて、CSSの内容を更新したはずなのにページが変わらないという状況が発生していたことが判明するのに気がつくのに非常に時間がかかってしまった。いやぁ焦ったね。CSSも条件分岐させてたりしたいるので、ここの記述を間違えていると思い込んでいた。
今後の課題
もっと早く作れるようになること。MT5も勉強する。
早速実践投入してみた。自分用作業メモ。
今回は新しいものを実際に使ってみて、どれほど実用に耐えるレベルになるか。ということを目標に、MT（MovableType4.2）のテンプレートを作ることに。
某社からできますかといわれ、できますと言い、自分を追い込んで勉強。
作業はラフデザインからテンプレートにするという流れ。
まずは適当につくってみる
HTMLとCSSをFirefoxのアドオンであるFireBugさんを使ってどうやって適当に企業サイトを見ながら組めばいいのかということをなんとなく理解。
そのままの流れで、Adobe DreamWeaverの体験版（30日間使える。学習には十分。）を使ってHTMLを書いてみた。どこかでこまめにdivタグで囲うとよいということを知っていたので、その記憶に従いヘッダーやボディーフッター、サイドバーと大きく分けた。そして、その後CSSを当てていく方法が効率がよいことがわかった。
ぶっちゃけHTMLタグとか全部理解してないけど、使うのはpとかhとか数種類でスタイルは全部CSSに投げてしまうのですぐ形にはなった。
これをMTテンプレートの各種部分に入れていき（存在しないものはモジュールテンプレートを使ってほしい場所にインクルードする）作った。
Firebugさんに頼る
この段階で記事を投稿してももちろん画面には出てこない。というのも、MTタグを使ってエントリボディなどを読み込ませてないからだ。まぁ適当にデフォルトテンプレートにあったMTタグをそれっぽく配置してすぐに対応できた。
MTでインデックスを再構築すると、テーマが適応される。
ここで、Firebugさんの出番。要素をライブで編集して確認できるので、それを元にスタイルシートに追加していく。この作業を繰り返すこと数時間。だんだんとHTMLタグとの兼ね合いやDIVでどこをくくるべきなのかがわかり、ちょっと達観できる。
これで、一応完成。
その後MTタグ埋め込み
MTタグのだいたいの理解をしようと試みる。
本文初めから何文字表示させたいか。というときに使えるタグなどを探してきて、モディファイアを色々と試してみると、これまたやはりHTML同様に対して多くの種類は存在しないことに気がつく。lastn=”n”やcategory=”NOT name” words=”n”などそこら辺しか使わない。
プラグイン導入で使えるタグが増えたりするので、こちらを使って関連記事を表示させるようにもしてみた。
JavaScript登場
略してジャバスクですある。スクミｚ…
こいつを使って、特定カテゴリの記事の画像を、ぐるぐる回転させるAmazonのウィジェットっぽいものを取り入れることになった。ここで使うのがJavaScriptだった。
一応jQueryなる超便利なライブラリをグーグルのホスティングの元、読み込むことで、たいしたことしないでも動く様になったけど、理解してやったかといわれるとキツイ。
さらにこいつは、HTMLやCSSの時のようにFirebugさんがライブで使えないので、困った。
このジャバスクはこれから勉強していく予定だ。
苦労したこと
全部はじめて使うものばかりだから、初めは何から手をつけていいのかわからなかった。特にHTMLとCSSは両者が相関関係にあるような気がして、とても複雑に見えた。
CSSにおいて、IEの解釈がやばい。Firefoxを使って作っていたのだけどもIEではとんでもないところにサイドバーが行っていたりすることはざらだった。
俗にCSSハックといわれる先人の知恵がアーカイブされているようだが、短期間でここまで学べる気はしなかった。（最終的にはIEでも表示できるようになってきたが）
MTタグがバージョンによって使えたりそうでなかったりするようだ。MT5でテーマを作った後、MT4に移行したらcategoriesタグをcategoryタグにしないと再構築エラーが出てしまった（ように思う）。
ここで数時間悩み、原因発見に相当労力を割いた。
今後の課題
・CSSでバックグラウンドイメージを指定してグラデーションの効いたちょっと高級なデザインにする
・画像をスライスしてそれをCSSに入れていく（？ というイメージ）手法を学ぶ
・ジャバスクを勉強する
・ページの軽量化、高速化