◆はじめに
この記事は『flamingoを使ってPCサイトをスマホサイトに最適化してみた 1/4』の続きになっています。
◆前回のおさらい
前回はflamingoってなんだろうから、flamingoに登録して『さぁ、開発するぞ！』というところまででした。
今回は開発していきたいと思います。
それでは、ログインしてflamingoCPに遷移します。
プロジェクト一覧から開発するプロジェクトを選択し、『IDEで開く』というボタンを押します。
◆flamingoIDEでできること
ローディングが終わると表示される画面がflamingoIDEです。
flamingoIDEは、マルチデバイスに最適化するために必要な開発を行う場所です。
まずは両サイドにたくさんのアイコンがあります。
一つずつ説明します。
①flamingoIDEに戻るボタン
②URLを入力したり、更新、閲覧履歴を確認することができるボタン
③デバイスをPCに変更するボタン
④デバイスをタブレットに変更するボタン
⑤デバイスをスマホに変更するボタン
⑥コードエディタの画面に変更するボタン
⑦テンプレートマネージャーを開くボタン
⑧ファイルマネージャーを開くボタン
⑨スニペットマネージャーを開くボタン
⑩プロジェクトをリリースするためのボタン
⑪作業するブランチを選択するボタン
⑫IDE画面の設定をするボタン
⑬今表示しているページのQRコードを表示するボタン
⑭キーワード検索のボタン
⑮CSSを編集するボタン
⑯スニペットを編集するボタン
⑰スクリプトを編集するボタン
⑱編集履歴をみるボタン
⑲他の人のプロジェクト作業状況を確認するボタン
⑳チャット機能のボタン
㉑サイドバーを固定するしないのボタン
◆UIライブラリとUIフレームワークの使い方
PCサイトを作るにしろ、スマホサイトを作るにしろ『このUIライブラリを使いたい』とか『このUIフレームワークを使いたい』という方がいらっしゃるかと思います。
もちろんflamingoで使えます。
使い方は、プロジェクト作成時に『UI framework』の箇所でBootstrapかjQueryを選択することができるセレクトボックスがあります。
ここでいずれかのフレームワークを選択すると、選択されたものがダウンロードされた状態でプロジェクトを立ち上げることができ、また各フレームワークのガイドに従ってダウンロードしたものを、flamingoのファイルマネージャーにアップロードすることで使用できます。
これは『UIライブラリ』も『UIフレームワーク』同様にダウンロードしたファイルをflamingoにアップロードすることで、使用することができます。
◆テンプレートを作成してみる
flamingoでソースコードを書くにあたり、テンプレートの作成が必要不可欠。
テンプレートとは、PCサイト向けにデザインされたページをマルチデバイスに適用させるために、スマホやタブレット上でのページの見え方を記述するところです。
実際にテンプレートを作成してみます。
まず、表示されている『新規テンプレート作成』 ボタンを押します。
テンプレートマネージャーが表示されるので、テンプレートを適応させる条件を決めます。
テンプレートの便利な機能
例えば、お店の商品詳細ページであれば商品ごとに複製のテンプレートを作るのではなく、
条件次第で、複数ある商品詳細ページを1つのテンプレートで変換することが可能です。
テンプレートが完成したので、ソースコードの編集をしていきます。
今回はPCサイトのトップページのHTMをコピーしてきました。
ちなみに、コピーしてこなくても1からHTMLを書いて編集できるところがflamingoの特徴です。
既に、PCのCSSが適応されていますね。
PCのHTMLをコピーしているので、現在はCSSなどもPCサイトのものがあたっている状態です。
これからスマホサイトにするために、CSSもJSもスマホ用に書き込んでいきます。
次に、パラメータでPCサイトからデータを取得します。
◆パラメータとは
flamingoを使って変換するには、まずパラメータを書く必要があります。
パラメータはPCサイトからデータを取得するのに必要な物になり、今回はXpathで書いていきます。
他にも、セレクタで取得も可能です。
パラメータはコードエディタ画面の下部に表示されています。
パラメータのアイコンを押すことで、Xpathを書くスペースが表示されます。
例えば、トップページのタイトルである『TEST』を取得してみます。
(Xpathの書き方についてはmerrillさんが詳しく書いてくださっているのでこちらを参考にしてみてください)
◆ソースコードを書く
HTMLは通常の書き方ですが、flamingoではPCサイトから取得してきたデータをflamingo独自の書き方をします。
例えば下記の書き方です。
<!--{= $.title}-->
この書き方で、パラメータのデータが表示されます。
また、パラメータで定義された変数は全て『$』で関連付くようになっています。
それでは、トップページ全体を表示させるように、ソースコードを書いてみます。
画像の中に、下記の様なソースコードがあります。
<!--{= __CONTENTS_ROOT__ }-->
これは、アップロードしたファイルを読み込むために必要なソースコードになります。
(flamingo独自のソースコードの書き方の詳細はこちらを参考にしてください。)
◆スニペットを作ってみる
スニペットとは、よく使うソースコードの塊です。
同じコードを何度も、または複数のテンプレートに入れる時にスニペットはとっても便利です！
今回は他のテンプレートにも存在し、どのページでも同じコードで記述されているheadタグを例にスニペットを実装していきます。
左側のサイドバーにある『スニペットマネージャー』のアイコンを押します。
表示されたスニペットマネージャーの上部に『+新規スニペット』ボタンを押し、スニペットの名前を入力します。
今回はheadタグなので『html_head』とし、入力したら『OK』ボタンを押し、スニペットを作成します。
作成したスニペットを編集していきます。
スニペットの編集
ソースコードは挿入したいコードを書きますが、今回はheadタグということもあり、PCページのソースコードをコピーしてきます。
編集終了。
次に、トップページのテンプレートにこのスニペットを挿入します。
トップページに書かれているheadタグのソースコードを削除して、
画面下部にある『スニペットを挿入』アイコンを押します。
そうすると、先程作成したスニペットが表示されています。
このやり方の他にも下記のソースコードを書くことでスニペットを呼び出すこともできます。
<!--{call html_hrad()}-->
今回はここまで。
次回がファイルのアップロード方法を書いていきたいと思います。