Mobify Design Developer
制作ガイドライン
Mobify Clientのインストール② 2 P3 Mobify化の前に現状サイトの問題点 P4 コンテンツ構成のイメージ図 P5 構造化の重要性 P6 基本的な構築の流れ P7 管理画面へのログイン P14 Mobify Clientのインストール① P15 P10 Mobify Clientでのプロジェクト作成 P17 構築ファイルの生成① P18 構築ファイルの生成② P19 構築ファイルの生成③ P20 既存ファイルのダウンロード P26 構築 ‒ブロック要素を追加する場合-P27 構築 ‒リスト要素を追加する場合-P28 構築 ‒直接テンプレートに要素追加する場合-P30 運用について ‒公開後のコンテンツ更新方法-P33 構築のためのtips① P34 構築のためのtips② P35 構築のためのtips③ P36 構築のためのtips④ P37 構築のためのtips⑤ P38 構築のためのtips⑥-1 P39 構築のためのtips⑥-2 P40 構築のためのtips⑦ P13 Node.jsのインストール P23 プレビュー P24 プッシュ（バンドルアップ）
Mobify化の前に現状のPCサイトの構造を再度見直す必要があります。
◆既に存在するPCサイト
構築の前に確認すべき点
１：ベースサイトが構造化されているか
MobifyはサイトのDOM要素を紐付けてモバイルデバイス 用に再構築するツールです。従ってサイトの構造化がされ ていないサイトでは十分に効果を発揮できません。２：コーディングルールが統一されているか
現状のPCサイトは構築担当者が変わるたび、あるいはカテ ゴリによってIDやClassが様々な使われ方をしているはずで す。このような構築状態はマルチデバイス化の妨げになり ます。３：画像構成のページを多用していないか
PCでは時間がない、ビジュアル的に見せたいなどの理由で、 画像構成のページが存在しています。これらページは、マ ルチデバイス化をする場合、新規に作るしか選択肢がなく なってしまいます。こちらの構造を再度見直す必要があり ます。■Mobify化の前に現状サイトの問題点
これらを踏まえて、現状のPC標準の構築方法の概念から、マルチデバイス対
応の構築概念への変換が必要になります。
■コンテンツ構成のイメージ図
サイト全体で共通する部分
ジャンルごとに共通する部分
ページ内で共通する部分
ページ内の個別要素
（今まで）
各ページごとに共通するルールが
設定されていない
マルチスクリーン対応での改修後
?
?
?
?
4■構造化の重要性
モビファイの導入により
正規表現で構造化することの重要性が理解できます。
WEBサイトの
「構造化」
の重要性を
理解してただけます。
前提としての考
え方。また、貴
社サイトにあっ
た作業マニュア
ルの作成。
マニュアル
オリエン
実行
チェック
修正
担当者、制作者
を含めた共通認
識と理解。注意
点の確認（説明
会、確認会議）。
場合により現場
トレーニングの
実施。
早めの見直し。
構築1ヶ月∼１．
５ヶ月内での見
直し反省会、
チェック。修正
プランの作成。
実際のMobifyに
よる制作になり
ます。場合によ
りPCサイトの構
造を見直し、修
正を加えMobify
を実行しましょ
う。
修正プランを元
に修正を加えま
す。チェックと
修正は何度か繰
り返し、より最
適化されたサイ
トにしましょう。
■基本的な構築の流れ
サイト公開までのおおまかなスケジュール
ページ構成案 作成 構成案 ご確認 ページデザイ ン制作 デザイン ご確認 Mobify アカウント 発行 対象ページへ JavaScript 埋め込み 構成ファイル の 制作・構築 実装 検証 テストURLで ご確認 (実機確認) 修正・ 最終調整 公開 ※制作ボリュームによりますが、公開までに約2か月ほど必要となります。 各ページのレイアウトをワイヤーフレーム にてご確認いただきます。 ワイヤーフレームに沿ってデザインを制作 しご確認をいただきます。 アカウントの発行と連動し対象ページに発 行したJavaScriptを埋め込みいただきます デザインを基に構成ファイル（Konfファイル、テンプレートファイ ル、スタイルシート）の制作を行い動作の検証を行います。 お客様にてテストサイトをご確認いただき、 不具合の修正を行います。 別途 Mobifyを使ったサイト更新の注意点やテンプレート制作に関するご導入説明会を実施いたします。 ＝ 制作側作業 ＝ クライアントへのご依頼 6■管理画面へのログイン
https://cloud.mobify.com/login/
下記のURLからログイン画面へ進んでください。■管理画面へのログイン
■Email [email protected] ■Password XXXXXXXX を入力し「 Login 」をクリックします。 事前に弊社からお渡しするアカウントにて Loginしてください。10
構築ガイドライン ープロジェクト作成ー
■Mobify Clientでのプロジェクト作成
〇プロジェクト選択・新規作成画面
作成したプロジェクト管理や、新規で
プロジェクトを作成することができます。
：新規プロジェクト作成
新規プロジェクトを作成するボタンになります。 本番公開をしていないテストサイトにもご利用い ただけます。※注意点
すでにプロジェクトが用意されている場合は、既存のプロジェクト をご利用ください。 新規でプロジェクトを立ち上げる場合は、Mobifyサポートまでご連 絡ください。12
構築ガイドライン ー インストール ー
■Node.jsのインストール
■Node.js
URL：
http://nodejs.org/
「 INSTALL 」より
Node.jsをインストール
Mobifyの利用には、まず、制作用PCにnode.jsをインストールしていただく必要があります。
※注意点
Node.jsは管理者権限でインストールする 必要があります。 Node.jsは安定版をインストールしてください まずは、下記のnode.jsのサイトへアクセスし てINSTALLしてください。■Mobify Clientのインストール①
・新規構築されたプロジェクトもしくは、
既存プロジェクトを開きます。
・「Configure」＞「Mobify Client」
を開きます。
14■Mobify Clientのインストール②
①PCのOSを選択します。
②インストールしたnode.jsのバージョン
を調べます。
④APIキーを保存します。
③Mobify Clientをインストールします。
Mobify Clientページを開くと右の画面が開きますので、Windowsはコマンドプロンプト、Macはターミ ナルを起動し、下記の手順で実行していきます。 ④はプレビューやバンドルプッシュ前に必ず実行してください。16
構築ガイドライン ー 構築ファイルの生成 ー
〇 ログイン
管理画面のMobify Client下部にある
【Save your credentials】をコピー＆実行
コマンドプロンプトまたはターミナルにペーストしコマンドを実行。 コマンドをコピー
管理画面から「Configure」を選択。
「General」の「Slug」をメモします。
「Slug 」をメモ
■構築ファイルの生成②
これでローカル環境へ初期プロジェクトリソースファイルをダウンロードすることができます。
コマンドプロンプト/ターミナルを起動して、①のプロジェクト作成コマンドを実行する。
コマンドプロンプトを起動して、プロジェクトを 格納するディレクトリへ移動。
プロジェクト作成コマンドを入力＋実行。
mobify init SLUG
※「SLUG」は管理画面でメモしたプロジェクトID 指定されたルート上にプロジェクトファイル が生成されます。 1 2 3 4
■構築ファイルの生成③
〇プロジェクトファイルのダウンロード
・Bundles を開く ・Bundles からダウンロードしたいプロジェクトをクリック ・Download からファイルをダウンロード ・ダウンロードされたファイルは『.gz』もしくは『.tar』形式 ファイルになります。こちらを解凍することで、過去に作成し たBundleで作業の続きを行うことができます。 ※Macでダウンロードしたファイルは.tar(圧縮ファイル）になります。 .tar対応の解凍ソフトにてファイルを取り出してください。 ※windowsでダウンロードしたファイルは.gz(圧縮ファイル）になります。 .gz対応の解凍ソフトにてファイルを取り出してください。■既存ファイルのダウンロード
20 0[ 例 ] 総合TOPに要素追加する場合
・ダウンロードしたプロジェクトファイルの 「src」フォルダを開く ・要素の紐付けを行うために、.konfファイルをテキストエディタで開く ・「tmpl」フォルダを開く ・home.tmpl をお手持ちのコーディングソフトで開く この２つを開いたら、.Konfファイルにて追加したい要素の紐付けを行 い、.tmplに紐付けた要素を配置。バンドルプッシュすることで追加した要 素を確認することができます。■既存ファイルのダウンロード
例
2122
構築ガイドライン ー プレビュー/プッシュ ー
構築ファイルを生成しましたら、ブラウザ上でプレビューができます。
■プレビュー
■プレビュー方法
次に、新しくブラウザを立ち上げ以下のURLにアクセスします。 https://preview.mobify.com 「Site URL」に対象ページのURLを入力し「Preview」ボタンをクリックします。 コマンドプロンプト/ターミナルでプレビューコマンドを実行します。 mobify preview構築ファイルを管理画面にアップすることをプッシュといいます。
■プッシュ（バンドルアップ）
24■プッシュ方法
※「Initial Bundle」部分は変更可能ですので、 修正内容な日付などのメッセージを入力できます。 コマンドプロンプト/ターミナルでプッシュコマンドを実行します。25
構築ガイドライン ー構築ー
○ PCの要素を追加する場合
・一般的な追加方法 (ブロック)
①
②
①：プロジェクトキー tmplファイルに追加するためのキー要素 ②：PCソースコード 追加したい要素のソースコードmobify.konf
home.tmpl
実際に表示される要素■構築
‒ ブロック要素を追加する場合
-26 6○ PCの要素を追加する場合
・一般的な追加方法 ( リスト )
mobify.konf
home.tmpl
実際に表示される要素■構築
‒ リスト要素を追加する場合
-27○ テンプレートに直接記述し追加する場合
テンプレートファイルはHTMLベースで構成しているため、
追加したい場所にHTMLを記述し、CSSにてデザイン調整をします。
■構築
‒ 直接テンプレートに要素を追加する場合
-28 829
構築ガイドライン ー運用ー
○公開後のコンテンツ更新方法
公開後、コンテンツを更新する場合は、構築時と同じように追加制作したリソースファイルを プロジェクトへバンドルして確認することができます。 Mobifyでは、公開されたバンドルは管理画面の設定から切り離され、 発行されPCサイト側に埋めていただく転送用タグに紐づきます。 その他のバンドルはConfigureにある【URL】に紐づきます。■運用について
‒ 公開後のコンテンツ更新方法
-30○バンドルの紐づきイメージ
①
①
②
②
①は①と、②は②と紐づいて動作します。 ①がCDNに配信される公開バンドルになり、②は構築テ スト用のバンドルになります。■運用について
‒ 公開後のコンテンツ更新方法
-32
構築ガイドライン ーtipsー
○ Konfでのテンプレートマッチ設定⽅法 ― セレクタマッチ ―
Konfファイルにて、作成したテンプレートが、どの場合に適用されるかを設定することができます。 紐づけるキー要素には『！』を先頭に追加します。具体例としては右の図のような記述をします。 『!』はテンプレートの振り分け条件を指定するために使い ます。 そのテンプレートをマッチさせたいページの固有IDやclass のプロジェクトキー（※１）に対して『!』を記述すること で、振り分け条件とすることができます。 ※１ ProductCarouselやsaleItemsなどの returnで返す先の要素をプロジェクトキーと呼 びます。■構築のためのtips①
○ Konfでのテンプレートマッチ設定方法
― ディレクトリマッチ ―
Mobify Konfでは、セレクタマッチの他に、ディレクトリマッチでテンプレートを指定することもできます。 『!』の使用はセレクタマッチと同じですが、プロジェクト キーの後に、 Mobify.urlmatch( /マッチさせたいディレクトリ名/* ) と記述します。 ディレクトリの後ろの＊は、jQueryなどと同じように全て の要素が対象を意味します。 templateName : content , !match : Mobify.urlmatch( /マッチさせたいディレクトリ名/ ), HeadBnr : function(){ Return $( .headBnr ) ▼サンプル 【参考コード】 / / /* すべてのパス /hoge/ 「/hoge/」「/hoge」のみ /hoge 「/hoge/」「/hoge」のみ /hoge/* 「/hoge/foo」「/hoge/bar/」 「/hoge/foo/bar/」 /*/hoge 「/foo/hoge」「/bar/hoge」 /hoge/*/foo 「/hoge/bar/foo」 「hoge/baz/foo」■構築のためのtips②
34Mobifyの画像リサイズエンジンは、.konf(紐付け)ファイルに指定をされた画像のみリサイズがかかる仕様とな ります。 MobifyCloudではリサイズエンジンに指定された画像がキャッシュされ、アクセスがあった際に必要な場合の み取得されます。 したがって、静的な画像はリサイズエンジンを介するよう設定をし、動的な画像(頻繁に更新をする画像)はリサ イズエンジンを 介さないように設定が必要です。 リサイズをかける場合の.konfへの基本的な記述方法は下記の通りです。
○ デバイスに合わせて画像を⾃動調整してくれる、リサイズエンジンについて
詳しくは、下記サイトをご確認ください。●Image Resizing with Mobify.js
http://www.mobify.com/mobifyjs/docs/image-resizing/
‘img’: function() {
var $imgs = $(‘img’).resizeImages(); return $imgs; }
▼上記サンプル
'content': function() {
var $content = $('content'); $content.resizeImages(); return
$content; }
▼DOM要素内のimgを全てリサイズする場合
○ 画像のキャッシュを任意でクリアさせる方法
Mobify画像リサイズAPIは「キャッシュ有効期限パラメーター」を付与できます。 この機能を使用しない場合（デフォルトの設定）2ヶ月間キャッシュとして保存されます。 画像リサイズAPIはこれから cacheHours という任意のパラメーターが認証可能になり、キャッシュする特定の 時間数を指定することができます。 以下がkonfファイルの例です。, 'resizeImages': function(ctx) { return $('img').resizeImages({maxWidth: 300, cacheHours: 1}); }
キャッシュは時間で指定されており、整数でなければなりません。 -- 現段階で一番短いキャッシュ時間は１時間です。 アップデート後、バンドルをサーバーにプッシュし、ページを展開する必要があります。 このキャッシュ時間を指定するとキャッシュ時間によってキャッシュディレクトリが作られその中へ保存されます。 また、最短が1時間のキャッシュになりますので、短期間の間（指定したキャッシュ時間より短い時間の中で） 画像ファイルを上書きする場合は、別名にしてください。 ▼詳しくは下記リファレンスをご確認ください。 http://www.mobify.com/mobifyjs/v2/docs/image-resizer/#resizeimagesresizeimgelements-options
■構築のためのtips④
36○ 既存のアクセス解析タグ、javascriptを流用する方法
MobifyでGoogleAnalyticsなどを流用する際の 方法 konfで残したいスクリプトに、特定のクラスを 付与し、それ以外のスクリプトは取り除くと言 う方法で明示しています。 例として、残すスクリプトをモジュールとして テンプレートに組み込んでいます。 ■konfファイル ●<script>タグは全てリムーブして「script」ブ ロックに格納されている。 ●リムーブしないスクリプトは「x-keep」とい うクラスを付与する。 ■テンプレート ●リムーブしたスクリプトを使用する場合は、 テンプレートファイルに「{script.script}」と記 述する。 テンプレートの記述 Konfの記述■構築のためのtips⑤
○ 最適化サイトとPCサイトの切り替え方法
スマートフォン(タブレット)サイトからPCサイト、PCサイトを表示した後にスマートフォンサイトへ戻すことが、 下記の方法にて可能となります。 仕組みとしては、デバイスにキャッシュしたMobifyのcookieのキャッシュを読み込むか否かとなります。 スマートフォン(タブレット)サイトから PCサイトを閲覧する場合は右のコード を.tmpl内に記述してください。 (footer.tmplなど)○ スマホ→PCへの切り替え方法
※上記のソースを<body>内の配置したい位置に置いてください ※CSSでボタン風に見せることも可能です。 <div class= x-pc ><a href= onclik= Mobify.desktop();return false; >PCサイトを 表示</a>
▼サンプル
■構築のためのtips ⑥ -１
PCサイトからスマートフォン(タブレット)サイトを閲覧する場合は下記のコードをPCサイ トの対象ページに記述してください。
○ PC→スマホへの切り替え方法
※上記のソースを<body>内の配置したい位置に置いてください ※【スマホ版で見る】部分は画像やCSSでボタンを作成してください■構築のためのtips ⑥ -２
MobifyではOpen Source ModulesとしてZepto.jsを使用した、4種類のモバイルでよく使われる機能をご提供 指定しています。
○ Mobify Open Source Modulesについて
下記サイトから、デモとサンプルソースをダウンロードすることができま す。
