WCAN 2015 レポート「仕組みを理解すれば、世界は広がる」 WebデザイナーのためのSPAsことはじめ こもり まさあき氏

はてなブックマークに追加する

2015年07月23日 

2015年7月11日、Web事業者向けのセミナーイベント「WCAN 2015 Summer」が開催されました。
本レポートでは、こもりまさあき氏によるメインセッション1「WebデザイナーのためのSPAsことはじめ」の概要を紹介します。

こもり氏プロフィール (WCAN 2015 Summerサイトより引用)
1972年生まれ、フリーランス。1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行して従事。2001年、会社を退職しそのままフリーランスの道へ。案件ごとに業務内容や立ち位置が異なるため、職域的な肩書きはなし。「次の10年を生き抜くためにどうすればいいか」を日々模索中。

テーマはSPAs(Single Page Applications)。

Bing不動産や海外メディアなどで利用されている同技術の利点・欠点や活用法など主に制作者の方を意識した内容でしたが、他の形でWebに関わる方々にとっても役立つ内容・意識を学ぶことができました。

● SPAsとは

単一ページ内で必要な部分だけを動的に読み込み、表示内容を変化させる手法です。採用しているWebサイトの代表例としては、Bing不動産Pitchforkがあります。

特にPitchforkは一見静的なWebサイトと同じように見えますが、別のページに移動するときの動作に違いがあります。通常の静的なWebサイトの場合、移動先ページのすべてを読み込みますが、一方Pitchforkでは記事の中身、サイドメニューなど内容が変化する部分・レイアウトだけを読み込みます。

pic01.gif

画像:Pitchfork上で記事ページ(左)から別の記事ページ(右)へ遷移した際の例

左のページ→右のページに遷移すると、赤枠表示の部分だけを読み込むイメージです。

● SPAsの仕組み

SPAsでは、ページの素材をModel(ファイル・データベースなどのデータ要素)とView(テンプレートなどの見た目要素)に分け、ユーザーがページ移動・画面拡大等のリクエストを送るたびにController(Model/Viewにユーザーの指示内容を伝えるプログラム)が必要に応じて処理します。

Model/View/ControllerをまとめてMVCと呼びます。

○ 所感

リフォームに置き換えて理解してみました。

▽ 静的なWebサイト…
初めから完成品の住宅(静的なWebページ)を複数用意しておきます。 顧客から「外壁の色を変えたい(Viewの一部変更)」「この部屋を和室にしたい(Modelの一部変更)」等の注文があったら、条件に合った住宅を探して移設します。

▽ SPAs…
親方(Controller)が、以下のように顧客の注文を職人(Model/View)にわかる指示に落とし込みます。

「外壁の色を変えたい(Viewの一部変更)」→「ペンキを塗り替えよう!」
「この部屋を和室にしたい(Modelの一部変更)」→「建材・畳を調達してその部屋をリフォームしよう!」

職人(Model/View)は、指示に応じて必要な部分だけをリフォームします。

● SPAsの長所と短所

SPAsはWebサイトの動作を軽快にできるという大きな利点がありますが、製作者にとっても検索エンジンにとってもわかりにくいという短所も存在します。 ただし、検索エンジンに対しては見せたい画面を前もって保存しておき、検索エンジンにはそちらを見せるプリレンダリングという手法で対処が可能です。

○ 所感

プリレンダリングについては、Google のGary Illyes氏も「クローキング(検索エンジンにだけ別ページを認識させる不正手法)には当たらないので、プリレンダリングしても全く問題はない」と発言しています。

同氏によると「もっとも、プリレンダリングする必要はない。Google 等の大手検索エンジンは、通常のブラウザと同様にJavaScriptなどを実行できる」とのことですが、あくまでも「必要ではない」だけなので「ベストの状態を検索エンジンに見せて、評価を受ける」ためにはプリレンダリングは有用なのかもしれません。
(参照元:フォーラム内でのGary Illyes氏のコメント、Stack Overflow)

● 仕組みを理解すれば、未来は広がる

・フロントエンドだけでなく、バックエンドを理解する
・Web・データ処理の根本原理
・新技術
これらの知識は、(製作者としての)手元の業務をこなすだけなら必須ではない。しかし、理解することで業務の効率化・レベルアップ・受注機会の増加などにつながる。

○ 所感

Web制作だけでなく、あらゆる業務に通じる重要な考えだと思いました。

仕組みの理解は、業務の効率を高めます。

PitchforkではMVCの制御にCMS(WordPress)を活用していますが、このアイデアは「SPAs=必要な素材・レイアウトをリクエストに応じて処理する」「CMS=素材・レイアウトを統合・体系的に管理する」という両者の仕組みを理解していなければ生まれるものではないでしょう。業務上での難題に対して、複数の方法を検討し、組み合わせることで効率的に解決できます。

仕組みの理解は、業務の幅を広げます。

こもり氏は「案件ごとに業務内容や立ち位置が異なる」とプロフィールで述べておられますが、それはすなわち「さまざまな業務内容・立ち位置に参画できる」ということです。 「次の10年を生き抜くため」に日々模索し、実際に次の10年を生き抜いてきているこもり氏。それを可能にしているのは同氏の多面的な能力あってのことだと思います。

そして仕組みの理解は、業務の質を高めます。

こもり氏は自分のスキルであるSPAsについて、制作者・デザイナー・SEOなど複数の観点から長所・短所を分析し、SPAsを実装すべきWebサイト・向いていないサイトを中立的に判断されていました。自分のスキル=万能の解決策ではないという見地を持っていらっしゃる点に感銘を受けました。

自分の業務に落とし込んで考えると、SEOの相談にいらしたクライアント企業にとって、最善の解決策がSEOであるとは限りません。Web広告・オフライン活動など全く別のアプローチを利用したほうが、より良い形で解決できることもあります。

幅広い分野の仕組みを理解することで、「自分の専門分野=最善の解決策なのか?」「クライアント企業は○○が問題だと認識しているが、問題の根本は他のところにあるのではないか?」と多面的に事象を認識し、より良い解決策を提供できるようになっていきたいと再認識しました。

新しい技術についての具体的な知識を得るだけでなく、業務に臨む姿勢についても貴重な示唆を得ることができた有意義なセッションでした。

執筆:広岡謙 / 株式会社アイレップ 第1ソリューション統括本部
監修:渡辺隆広 / 株式会社アイレップ SEM総合研究所 所長

ページTOPへ戻る

WCAN 2015 レポート「仕組みを理解すれば、世界は広がる」 WebデザイナーのためのSPAsことはじめ こもり まさあき氏を読んだ方におすすめの記事

ページTOPへ戻る