東京ウェブデザへろへろ日記

iPhone、Galaxyなどスマホが普及して、スマホ専用サイト制作の需要が増大している。

私はスマホをもっていないが、時流に乗り遅れないように自分のサイトを実験台にしてスマホサイトを制作してみた。

スマホは独特のUIがあり、アップルが提供しているパーツもある。そのインターフェイスと使用感はPCとはまったく異なる世界のようだ。したがって、アップルが提供しているデザインの要素や動きを効果的に使って、「らしい」サイトにしたほうが、見た目もいいし、使い勝手もいいだろう。

そこで、スマホ制作用のプラットホームを探して、それを使って制作することにした。

いろいろググった結果、jQuery Mobileというのがあり、それが定番というわけではないが、いまのところ有力であることがわかった。



で、このjQuery Mobileでつくってみた。

jQuery Mobileでスマホ用サイトをつくる場合、基本的にページを分けずに、すべて1ファイルの中に入れ、アンカーでページを呼び出す仕組みになっている。そうすることで、スマホらしいページ遷移の動きが可能になる。一番ポピュラーなものでやったが、サファリでみても、ページがぬるっと横にスライドされて遷移するので、「らしい」感じになる。いい感じだ。

制作した後、ヤマダ電機のiPhoneでチェックしたら、ちゃんと動いた。それにしても、iPhoneの液晶はものすごく高精細で、ドットが細かく、文字が美しい。この美しさが、スティーブ・ジョブスの偉大さなのだろう。

とりあえず、基本的なパターンでつくるのはむずかしくないことがわかった。

ご要望があれば、仕事としても受注します。※ただし、実機検証なし。すみません。

土日を使って、HTML5の研究をした。

HTML5といえば、FLASHの代わりになるものであって、FLASHが不要になるといった話題が先行しがちだが、セマンティックなHTMLの記述という点のほうが、WEBデザイナーの基本的技術として重要である。

セマンティックとはむずかしい言葉であるが、意味論の、という意味だ。これは、記述の仕方を意味論的におこなうということらしい。それによって、コンピュータによる意味的な理解が容易になる。もともとXMLはそんな感じであるが、そういう階層化が明確な記述をおこなうということと私は理解した。

HTML5はセマンティックWEBを標榜している。タグの記述はかなり構造化されている。とはいえ、sectionの中をどうするか、微妙にわからないところも何箇所かあった。

とりあえず、土日を使ってすでに完成している自分のサイトをテスト的にHTML5化してつくり直してみた。

感触としては、仕事でも使えそうだなという感じ。よしよし。

MT（MovableType）をいろいろカスタマイズしていじくっている。

スマホが普及してきたため、スマホ対応にしようと考えてトライしたが、再構築が重くなったりして、けっこうむずかしい部分がある。

自分流でカスタマイズするのに限界を感じたので、配布されているMT用のテーマを使ってみた。

MT underHatさんが配布しているテーマである。



MT underHat テーマ 002 - カンバス

インストールするのは簡単だ。ファイルをダウンロードして、MTのサーバーにアップし、管理画面のテーマのところから適用させればいい。そのとき、同時に必要なプラグインを入れる（サイトの説明に従って）。

で、管理画面からサイト全体を再構築する。すると、いちおうサイトは表示されたが、よくよくチェックすると、記事のパーマリンクが変更されていることに気がついた。

私がいままでにアップした記事とは異なるパーマリンクが設定されている。いままでの記事は大切なので、パーマリンクを変える必要がある。で、記事アーカイブのテンプレートを開き、アーカイブマッピングを変更する。これで、OK。

素晴らしいテーマである。文句なしにおすすめする。デザインはシンプルで、改造のしがいがある。

ただ、ひとつ問題があった。スマホサイトが表紙しか表示されないのだ。どういうわけか、私の場合、記事のファイルが生成されていなかった。いろいろ調べて、次の方法で解決した。

結論をいうと、スマホのテンプレートのアーカイブマッピングを変更する。そのとき、通常ならプルダウンメニューですでに例示されているもののなかから選ぶのだが、スマホの場合、ディレクトリをつくるため、選択のなかにない。カスタムでつくる必要がある。この作り方が、間違っていた。

■アーカイブマッピングの記述方法
ダメだった記述
i/yyyy/mm/entry_basename.html
↓
OKの記述
i/%y/%m/%_c.html

MTのマニュアル
この表のなかの一番左の列「項目」というのを使うとできた。
なぜか、わからないけど。
これで一見落着。

この問題が解決したので、次は自分独自のMT用スマホサイトを構築しようと思う。