スマホサイト切り替えサービス「Mobify」を1年使ってみて(制作者目線でのメリット7つ)
mobifyとは？軽く紹介
クリエイターボックスさんなどのブログで以前からとりあげられてはいるのですが、業務で使用したという記事はほとんど見当たらないので書いてみたいと思います。
Mobifyはカナダはバンクーバー発のサービスで、PCサイトをマルチデバイス対応する事ができるサービスです。既に北米ではかなり広まっていて、スターバックスやWIREDも採用。米Googleのマルチスクリーンベンダーとして推奨を受けているという所もポイントです。アップデートも重ねられているので信頼度の高いサービスと言えます。
▼実績(本家)▼
http://www.mobify.com/customers/
▼実績(日本)▼
http://www.domore.co.jp/mobify/works03.html
▼googleマルチスクリーンベンダーの紹介(右サイドカラムにmobifyがえらばれてます)▼
http://www.google.com/think/multiscreen/
日本代理店のドーモ社のサイトにはこう書いてあります。
モビファイとは、既存のPCサイトのコンテンツやデザインを調整し、スマートフォンやタブレットに最適化表示を可能にする「デザインセット+クラウドシステム」によるマルチスクリーン最適化サービスです。
制作者側のメリット
それでは制作者としてのメリットを列挙してみます。
サイトを運営されている側の方へのメリットは公式サイトなどを見て頂ければと思います。
1.PC側のソース、サーバーをいじらずに制作できる。
スマホ対応する際スクラッチで制作する場合は、JSまたはPHPで切り替えたり、両サイトを行き来するボタンを準備したり、レスポンシブなら1から作り直しってことも考えられます。
でもモビファイならPCのHEADタグ内にjsを入れるだけで制作が開始できます。
ちなみに制作だけならタグインジェクションという機能を使えばモビファイタグを記入せずにスタートできます。仕組みとしてはプロキシを介してモビファイタグを入れたページを表示させプレビューするものです。この機能は管理画面のTag Proxyから設定できます。
2.カスタマイズの自由
やっぱりここが制作者として一番気になる所でしょう。
クライアントからの要望に応えられないと意味がないですし。。。
カスタマイズの自由さを伝える為に基本的な制作の流れも書いてみたいと思います。
アカウント作成 + Mobifyタグ埋め込み
↓
スマホ対応するページ指定 + Dom操作(konfファイル)
↓
表示されるテンプレートファイル(tmplファイル)
↓
css/jsファイル制作
↓
バンドルアップ(制作ファイル)
見慣れないのはkonfファイルとtmplファイルだと思います。
konfファイルはjavascriptベースで書かれています。(jQueryが理解できれば制作可能だと思います。)
tmplファイルはDust.jsとhtmlで書かれています。Dust.jsって何？となると思いますがテンプレファイルなのでhtmlの知識があれば問題ないです。
http://www.mobify.com/mobifyjs/docs/konf-reference/
アカウント作成/Mobifyタグ埋め込み
Mobifyは読み込みスピードを上げるため専用のCDNサーバーにバンドル(制作データファイル)をアップするのでそのデータ管理としてアカウントを作成します。
Mobifyタグというのは既存のPCサイトと制作したファイルをひもづけるものでPCサイトHEAD内にMobifyタグ(js)を記入するだけでmobifyの機能が利用できます
スマホ対応するページ指定 + Dom操作(konfファイル)
ここから本格的に制作が始まります。
どのページを変換するかという設定をこのkonfファイルで行います。もちろん全てのページ、1ページだけスマホ化するなども設定できます。設定のロジックはURLやコンテンツ内のid,class、はたまたページタイトルの一致など、いろんな方法があります。指定したらそれをどのtmplで表示させるかを記入します。
続いてDom操作(<p>や<div>などのタグの事)ですがjavascriptでこれらタグを取捨選択、移動が可能です。
例えばヘッダーの中にスマホだけコンテンツを増やす、減らす。
サイドナビの要素をヘッダーの中に入れる、消す。など柔軟に対応できます。
重要なのはhtmlファイル読み込み前にこのkonfが実行される為スピードを落とさずDom操作するという事です。
▼konfリファレンス▼
http://www.mobify.com/mobifyjs/docs/konf-reference/
表示されるテンプレートファイル(tmplファイル)
コンテンツの取捨選択はできたけど、スマホだけ新しく要素を増やしたい場合もありますよね？またこのページだけcss,jsを読み込ませたいなど。そんな時はtmplファイルに書き込みます。このtmplファイルでの作業はCMS等に似た感覚だと思います。詳細ページ等複数ある似たページをこの1ファイルで量産させるという事も可能です。
▼tmplリファレンス▼
http://www.mobify.com/mobifyjs/docs/template-reference/
css/jsファイル制作
ここは普段の制作の様に進めます。
バンドルアップ(制作ファイル)
CDNにアップされたバンドル(制作ファイル)は番号が割り振られ保存されます。
どのバンドルを公開するかなどを管理画面で設定します。
各項目の詳しい解説はまた今度できればと思います。
3.プレビュー機能の充実(テスト環境を作らなくていい)
ローカルデータの確認はもちろんバンドルアップされてたデータの確認も出来ます。各デバイスでの実機での検証の際、対象のPCサイトが変わるという事があると思います。例えばテスト環境と本番環境など。それら環境を簡単に再現できます。
4.css jsの自動圧縮
通常CSSやjsはインデントや改行をして制作するとおもいますが最適化されたソースを見てみると自動でcssやjsが1行に圧縮されています。
5.imageRsize機能(画像最適化)
ページのスピードが重くなる原因として画像のサイズがあげられると思います。特にPCで使用している画像をスマホでも使用する場合は更に影響が大きくなると思います。(もちろんtmplファイルでスマホ用の画像を作成して表示させる事もできます。)MobifyはimageResize機能があり、読み込み時にCDNに保存された画像をデバイスに合った適切な画像に最適化してくれます。更にサイズの指定等オプションもあります。下記の方法で簡単に。
resizeImages()
.resizeImages({cacheBreaker:1})
▼imageResizeリファレンス▼
http://www.mobify.com/mobifyjs/docs/image-resizing/
6.jazzcat機能(jsファイルのリクエストを減らす)
最近のWEBサイトではjsプラグインなど含め沢山のjsファイルが読み込まれていますが、これをjazzcat機能で一度にまとめる事でhttpリクエストを減らし、読み込みスピードを改善できます。
'scripts': function() {
$scripts = $('script').combineScripts();
return $scripts;
}
▼jazzcatリファレンス▼
http://www.mobify.com/mobifyjs/docs/jazzcat/
7.バグが無い
今年1年使用してみてMobify側のバグと言えるような物は何一つありませんでした。
○ndroid2.3とかブラウザバグは沢山あるよね。。。
おまけ.sass機能
sassも使えちゃいます。
→こちらは今度詳しく。。。
一応デメリット
日本でまだ流行っていないため日本語の記事が少ないです。
公式リファレンス(英語)とフォーラム(日本語)から学べます。
日本語マニュアルは日本代理店のドーモ社からGETできます。
システムで動的に吐き出しているサイトにも問題なく対応できますがFlashサイトは対応できません。
※最近サポートページが出来ました!!
何か疑問・解らない事があればここから何でも聞いちゃいましょう！！(2014/9/26追記)
以上制作者サイドから見たMobifyのメリットを書いてみました。スピード、カスタマイズ機能に特化していて尚かつ、簡単に実現できるサービスと言えます。
気になった方はスライドや動画が充実しているので見てみてはいかがでしょうか？
各構築方法などの突っ込んだ解説はまた次回できればと思います。
▼mobify解説動画(ページ下部)▼
http://www.domore.co.jp/mobify/seminar.html
▼github▼
https://github.com/mobify/mobifyjs
Related posts
