モバイルサイト製作について考察

Pocket
[`evernote` not found]

Advent Calendar in 信州松本(だけじゃなくてもいいよ)15日目です。昨日のハラヒロシさんに引き続き、4_1が担当させて頂きます。

このブログでもモバイルモバイルって、色々言ってますが、実はあまり実務経験ありません。ほぼバージンですorz

そんな僕ですが、周りから入ってくる情報や、うちでのweb製作の流れ/方法、そしてメンテナンス性なども考えてこうすれば、割と効率的じゃないのかな?という考えはあります。
前日、クリエーターさんと飲む機会があって、酔った勢いでろくに経験もないのにのうのうと語ってしまいまして・・・自戒の念も込めて、今日は、まじめに少しまとめてみたいと思います。

前提として・・・
web製作はCMSで行なうものとします。
モバイルファーストではありません。
PCサイトありきで、モバイルでもある程度最適化してみたいなぁ程度です。

キーワードは、モジュール化とテンプレート化じゃないかと思っています。
※言葉の使い方が間違ってたらご指摘ください。

モジュール化

まず、モジュール化について、この考え方は、couldの長谷川泰久さんからの影響が大きいのですが、偶然にもうちで使っているCMSとの相性もよいので、注目している考え方です。(モバイル以外の部分でですが)

could:コンテンツを意識してWebデザインするとは

ページを構成する単位って、当然htmlになるのですが、もっと細かく見ていくと、(header+sidebar+footer)+コンテンツみたいな形で微分できます。
この前者の部分をいわるゆCMSでは、テンプレート化して使い回している訳ですが、コンテンツの部分も細かく見ていくと、画像と文章のブロックに分類できます。(デザインなどに寄りますので、一括りには言えませんが)

この画像と文章のブロック=モジュールを必要に応じて組み替えてページを構築していければいいのではないかという考え方です。それができれば、同じような情報の組み替えただけのページをいちいち複数作らなくても、情報だけ登録しておけば、自由に構築し直す事ができるようになります。

テンプレート化

これは、文字の通り、細かなブロックを必要に応じて組上げる時の設計図としてテンプレートを利用します。
細かな文章や画像というモジュールを必要に応じて組み合わせるための設計図ということでしょうか。

で、このテンプレートをサーバーサイドではなく、java scriptで行なってしまえば、いいんじゃないかと思っています。
jquery.template.jshandlebars.jsと言ったいわゆるjavascriptのテンプレートエンジンがいくつかあります。
これらを利用すると、サーバーサイドの言語を使わなくても、ページの再構成が可能になります。

例えばこんな感じ。

PCサイト風
モバイルサイト風

便宜上CMSを利用していませんが、どちらも同じjsonファイルを利用して表示しています。

{
  "entry": [
    {
      "title": "タイトル1",
      "content": "どっどど どどうど どどうど どどう 青いくるみも吹きとばせ すっぱいかりんも吹きとばせ どっどど どどうど どどうど どどう",
      "imgSrc": "images/img01.jpg",
      "id": "page01"
    },
    {
      "title": "タイトル2",
      "content": "谷川の岸に小さな学校がありました。教室はたった一つでしたが生徒は三年生がないだけで、あとは一年から六年までみんなありました。運動場もテニスコートのくらいでしたが、すぐうしろは栗の木のあるきれいな草の山でしたし、運動場のすみにはごぼごぼつめたい水を噴く岩穴もあったのです。",
      "imgSrc": "images/img02.jpg",
      "id": "page02"
    }
  ]
}

今回は詳しいソースの説明は割愛しますが、jsonを読みこんだりする関係で、javascriptでゴリゴリな感じです。それ以外の部分は、ごくごくシンプルですし、そもそもPCページとモバイルページのファイルが違うので、レイアウトも含め自由に変える事ができます。

サーバーサイドでは、最低限のjsonだけ書き出せるようにしておけば、色んな形で使い回しが可能なのかなと。

この使い回しというのも大切なキーワードで、いわゆるワンソースで構築するとどうしてもコードが煩雑になってしまいますし、デザインの制約も少なからず発生してしまいます。
その点、この方法だと、PCとモバイルは別物でデータだけ共有させていますので、それほど、煩雑なコードにはならないですし、デザインもある程度自由です。

まとめると、ページをhtml単位で考えるのではなく、もっと細かいデータの固まりとして捉えて情報を設計すると、今まで実現が難しかったような来よが自由にできるようになります。それは、スマホ対応だけではなく、サイト全体でも言える事です。ちなみに、某緑のチームのサイトもこの考え方を採用して、随所で情報の流用をして、管理を簡略化しています。(そこでは、javascriptのテンプレート化はしてませんけどね)

レスポンシブやモバイルファーストでのサイト設計を否定するものでもありませんし、この方法の場合も、利用できない状況もありますので、万能ではありませんが、一つの手法として、よいかなと考えています。実際に試していない部分もあるので、頭でっかちな記事になってしまいましたが、来年はこの辺をもう少し掘り下げていきたいと思っています。

Advent Calendar in 信州松本(だけじゃなくてもいいよ)そろそろ終盤に向かっております。参加して頂いている皆さんのおかげで、順調に進んでいます。あと数日まだ空きがありますので、参加しようか悩んでいる方、ぜひぜひ、ご参加ください。よろしくお願いします!

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。