flamingoを使ってPCサイトをスマホサイトに最適化してみた 2/4

## ◆はじめに
この記事は『[flamingoを使ってPCサイトをスマホサイトに最適化してみた 1/4](http://qiita.com/h_arasawa/items/a231644dd933ff1f6b17)』の続きになっています。  

## ◆前回のおさらい
前回はflamingoってなんだろうから、flamingoに登録して『さぁ、開発するぞ！』というところまででした。
今回は開発していきたいと思います。

それでは、ログインしてflamingoCPに遷移します。
プロジェクト一覧から開発するプロジェクトを選択し、『IDEで開く』というボタンを押します。

## ◆flamingoIDEでできること
ローディングが終わると表示される画面がflamingoIDEです。
flamingoIDEは、マルチデバイスに最適化するために必要な開発を行う場所です。

まずは両サイドにたくさんのアイコンがあります。
一つずつ説明します。


![flamingo_IDE.png](https://qiita-image-store.s3.amazonaws.com/0/170776/44ec619c-e8bf-83a7-319d-db5539fdd4fd.png)


①flamingoIDEに戻るボタン
②URLを入力したり、更新、閲覧履歴を確認することができるボタン
③デバイスをPCに変更するボタン
④デバイスをタブレットに変更するボタン
⑤デバイスをスマホに変更するボタン
⑥コードエディタの画面に変更するボタン
⑦テンプレートマネージャーを開くボタン
⑧ファイルマネージャーを開くボタン
⑨スニペットマネージャーを開くボタン
⑩プロジェクトをリリースするためのボタン
⑪作業するブランチを選択するボタン
⑫IDE画面の設定をするボタン
⑬今表示しているページのQRコードを表示するボタン
⑭キーワード検索のボタン
⑮CSSを編集するボタン
⑯スニペットを編集するボタン
⑰スクリプトを編集するボタン
⑱編集履歴をみるボタン
⑲他の人のプロジェクト作業状況を確認するボタン 
⑳チャット機能のボタン
㉑サイドバーを固定するしないのボタン

## ◆UIライブラリとUIフレームワークの使い方
PCサイトを作るにしろ、スマホサイトを作るにしろ『このUIライブラリを使いたい』とか『このUIフレームワークを使いたい』という方がいらっしゃるかと思います。
もちろんflamingoで使えます。
使い方は、プロジェクト作成時に『UI framework』の箇所でBootstrapかjQueryを選択することができるセレクトボックスがあります。  
ここでいずれかのフレームワークを選択すると、選択されたものがダウンロードされた状態でプロジェクトを立ち上げることができ、また各フレームワークのガイドに従ってダウンロードしたものを、flamingoのファイルマネージャーにアップロードすることで使用できます。
これは『UIライブラリ』も『UIフレームワーク』同様にダウンロードしたファイルをflamingoにアップロードすることで、使用することができます。

## ◆テンプレートを作成してみる
flamingoでソースコードを書くにあたり、テンプレートの作成が必要不可欠。

テンプレートとは、PCサイト向けにデザインされたページをマルチデバイスに適用させるために、スマホやタブレット上でのページの見え方を記述するところです。  

実際にテンプレートを作成してみます。  
まず、表示されている『新規テンプレート作成』  ボタンを押します。  
![template.png](https://qiita-image-store.s3.amazonaws.com/0/170776/bc00499b-e1d1-b316-c36b-6f71836e67f6.png)


テンプレートマネージャーが表示されるので、テンプレートを適応させる条件を決めます。

:star:テンプレートの便利な機能
例えば、お店の商品詳細ページであれば商品ごとに複製のテンプレートを作るのではなく、
条件次第で、複数ある商品詳細ページを1つのテンプレートで変換することが可能です。  

テンプレートが完成したので、ソースコードの編集をしていきます。  
今回はPCサイトのトップページのHTMをコピーしてきました。
ちなみに、コピーしてこなくても1からHTMLを書いて編集できるところがflamingoの特徴です。  

既に、PCのCSSが適応されていますね。  
PCのHTMLをコピーしているので、現在はCSSなどもPCサイトのものがあたっている状態です。  
これからスマホサイトにするために、CSSもJSもスマホ用に書き込んでいきます。

次に、パラメータでPCサイトからデータを取得します。

## ◆パラメータとは
flamingoを使って変換するには、まずパラメータを書く必要があります。
パラメータはPCサイトからデータを取得するのに必要な物になり、今回はXpathで書いていきます。
他にも、セレクタで取得も可能です。

パラメータはコードエディタ画面の下部に表示されています。
パラメータのアイコンを押すことで、Xpathを書くスペースが表示されます。

例えば、トップページのタイトルである『TEST』を取得してみます。
(Xpathの書き方についてはmerrillさんが詳しく書いてくださっているので[こちら](http://qiita.com/merrill/items/aa612e6e865c1701f43b)を参考にしてみてください)  

## ◆ソースコードを書く
HTMLは通常の書き方ですが、flamingoではPCサイトから取得してきたデータをflamingo独自の書き方をします。
例えば下記の書き方です。
```
<!--{= $.title}-->
```
この書き方で、パラメータのデータが表示されます。
また、パラメータで定義された変数は全て『$』で関連付くようになっています。

それでは、トップページ全体を表示させるように、ソースコードを書いてみます。  
![top_code.jpg](https://qiita-image-store.s3.amazonaws.com/0/170776/f92e4864-8eb8-173d-5b9b-2c32decc7ee6.jpeg)


画像の中に、下記の様なソースコードがあります。
```
<!--{= __CONTENTS_ROOT__ }-->
```
これは、アップロードしたファイルを読み込むために必要なソースコードになります。
(flamingo独自のソースコードの書き方の詳細は[こちら](http://docs.flamingo.gomobile.jp/ja/template-syntax.html?highlight=flamingo%20%E6%A7%8B%E6%96%87)を参考にしてください。)  

## ◆スニペットを作ってみる
スニペットとは、よく使うソースコードの塊です。
同じコードを何度も、または複数のテンプレートに入れる時にスニペットはとっても便利です！
今回は他のテンプレートにも存在し、どのページでも同じコードで記述されているheadタグを例にスニペットを実装していきます。  

左側のサイドバーにある『スニペットマネージャー』のアイコンを押します。
表示されたスニペットマネージャーの上部に『+新規スニペット』ボタンを押し、スニペットの名前を入力します。
今回はheadタグなので『html_head』とし、入力したら『OK』ボタンを押し、スニペットを作成します。  
![snippet.png](https://qiita-image-store.s3.amazonaws.com/0/170776/486147fe-d732-86d6-fc4e-729cb930b3a1.png)


作成したスニペットを編集していきます。

### スニペットの編集
ソースコードは挿入したいコードを書きますが、今回はheadタグということもあり、PCページのソースコードをコピーしてきます。  

![snippet_code.jpg](https://qiita-image-store.s3.amazonaws.com/0/170776/e54e410c-c4ef-a4f8-c6ce-42160fc58ff5.jpeg)


編集終了。  

次に、トップページのテンプレートにこのスニペットを挿入します。
トップページに書かれているheadタグのソースコードを削除して、
画面下部にある『スニペットを挿入』アイコンを押します。

![editor_snippet.jpg](https://qiita-image-store.s3.amazonaws.com/0/170776/3a278082-880b-315f-8df3-fb24613945d2.jpeg)


そうすると、先程作成したスニペットが表示されています。  

このやり方の他にも下記のソースコードを書くことでスニペットを呼び出すこともできます。
```
<!--{call html_hrad()}-->
```

今回はここまで。
次回がファイルのアップロード方法を書いていきたいと思います。