スマホ最適化サービスMobify のマッチング(テンプレ指定)の使い方
以前Mobifyの「スマホサイト切り替えサービス「Mobify」を1年使ってみて(制作者目線でのメリット7つ)」を紹介しましたが、そのkonfファイルの基本となるマッチングの使い方を紹介したいと思います。
マッチング(テンプレ指定)とは？
そもそもMobify・konfってなに？という方はこの記事を先にご覧下さい。
マッチングとは「PCのどのページをどのテンプレートでスマホ化するかを決める事」です。
Mobifyはkonfファイルでhtmlを読み込む前にDom操作や、画像最適化などができますが、
まずはどのページを最適化するかを決めないといけません。そんなkonfファイルの基本とも言える使い方を書いていきたいと思います。
1.Dom判定型のマッチング方式
以下にソースファイルの部分的抜粋をかきましたがいわゆるJSなどで言うスコープブロックがあり、
キー : 値の書き方でtemplateName:テンプレート名を書きます。
その次のキーに 「’!__match’」のfunctionを入れます。
その下returnの中にjQueryベースの書き方でdomが書いてあります。
'!__match': function () {
return $('#productContents');
},
これだけです。これだけで指定したテンプレートが紐づけされます。
PCサイトのhtmlの中に「#productContents」があるかどうかでマッチングされます。なければ次のスコープブロックに移動して行きます。
2.URL判定型のマッチング方式
じゃあどのページにもこのID、Classがあったら、またはID、classだけではしぼれない場合はどうしたらいいでしょうか？そんな時はURL判別しましょう。
'!match':Mobify.urlmatch('/product/page1.html'),
説明不要な感じがしますが、キー名に「!match’」をパラメータにMobify.urlmatch(‘/product/page1.html’),
と指定したいURLを書きます。
これで特定のページにテンプレートが割り振られます。
ディレクトリ内下層の指定は「/product/*」のようにします。その他ディレクトリ指定は以下ページの「Path Expression」で詳しく書かれています。
https://www.mobify.com/mobifyjs/docs/matching-to-urls/
実はこの2つだけでほとんどの条件を割り振れます。
同じようなデザインのページが複数あり、それを1つのテンプレで最適化したい場合はDom判定型のマッチング方式でマッチングするやり方が向いていると思います。コーディングする人は複数似たようなデザインのページを作成する場合、共有化したスタイルを使うはずだからです。
独立したページ→URL判定型のマッチング方式
その他下層ページ→Dom指定型のマッチング方式
3.その他条件型判定
では応用です。
jQueryベースなので以下のような条件分でもマッチングが可能です。
あまり使わないかもしれませんが、htmlのタイトルタグに入っている文字列で判別する方法です。
titleタグはページ名以外にカテゴリ名も入っている事が多いのでそれを利用した方法です。
'!match': function() {
if(/商品詳細/.test($('title').text())){
return true;
}
},
先ほどURLマッチングを説明しましたが、下記のように「window.location.pathname.match」を使用してurlで条件を立てる事もできます。
'!match' : window.location.pathname.match(/^\/product\//) !== null || window.location.pathname.match(/^\/detail\//) !== null,
以上基本のマッチング方法と応用方法を記述しましたが、なるべく基本の方法でマッチングした方がいいでしょう。あまり複雑にするとPC側が更新、拡張した際に修正も大変になる可能性があります。なるべくシンプルに振り分けられる様にしたいですね。
その他詳しい方法は下記公式サイトにて公開されていますのでぜひご覧下さい。
https://www.mobify.com/mobifyjs/docs/matching-to-urls/
Related posts
