monacaでスマホアプリを作ろう #0

# ワイヤーフレームを作る

monacaなら最小限のコーディングで動作するワイヤーフレームを作ることができます。
...とまあ、コーディングレスでワイヤーフレームを作れるものなら既に色々あるとは思います。

_楽しく作れる！スマホアプリ/サイトのワイヤーフレーム・モックアップ作成支援ツール7選_
http://dev.classmethod.jp/smartphone/wireframe-tools-7/


が、monacaで作成した場合、それらとは一線を画す利点が発生します。
つまり

**そのままプロダクトにできる**

ロジック部分を実装してあげればワイヤーフレームだったものが製品になってしまうのです。
すごくないですか？

ワイヤーフレーム専用のツールで作ったものは、その自由度と簡単さゆえに、実際プロダクトにしようとした場合


**できねーよ！**


というデザインや挙動にぶち当たることが往々にしてあります。
しかし最初からmonacaで作ってもらっていれば、多少の産みの苦しみと引き換えにプロダクトにする際の障害が減るわけです。 言い換えると実現性の高いワイヤーフレームを構築できるわけです。

そんなわけでレッツトライ。


## 元になるテンプレを決める

onsen uiのパターン集のページから元となるテンプレを探します。
http://ja.onsen.io/patterns.html


ここでは、ページの下にタブバーがついていてList Thumbnails から Details に遷移するようなものにしてみます。
![Screen Shot 2015-07-16 at 09.30.24.png](https://qiita-image-store.s3.amazonaws.com/0/74328/68e7a5b1-07b1-84b6-77a3-7c2d6431374c.png)
*↑こんなの*


monaca cloudにアクセスして「開発をスタート」をクリック。続いて「Onsen UI Tabbar」を選択します。
![Screen Shot 2015-07-16 at 09.44.56.png](https://qiita-image-store.s3.amazonaws.com/0/74328/73baff98-a698-e685-c9cd-62fbd874a298.png)

表示されているpage1.htmlの中身を見てみます。

```html:page1.html
<ons-toolbar>
    <div class="center">Page1</div>
</ons-toolbar>

<div style="text-align: center">
    <br />
    <ons-button 
        ng-click="myNavigator.pushPage('new_page.html')">
        Push New Page
    </ons-button>
</div>

```

どうやら、ページ遷移したいブロック内に``ng-click="myNavigator.pushPage('new_page.html')``を書けば``new_page.html``に移動しそうです。


ではpage1.htmlを書き換えます。
onsen uiのパターン集のページ(http://ja.onsen.io/patterns.html) から List thumbnailsのコードを確認し、``<ons-page>``タグ内をまるっとコピーしてpage1.htmlの内容を全て置き換えます。ちなみにコードは[Details]ボタンクリックで確認できます。

とこんな表示になるはず。
![Screen Shot 2015-07-16 at 09.57.04.png](https://qiita-image-store.s3.amazonaws.com/0/74328/fb17a303-81f2-53f1-90f4-f7834cb620a2.png)

スタイルが足りていないですね。List thumbnailのcssをcss/style.cssにコピーします。
![Screen Shot 2015-07-16 at 10.00.33.png](https://qiita-image-store.s3.amazonaws.com/0/74328/85ab4c74-3a30-cfb3-0181-67d36bb542c4.png)

画像が表示されていない以外はOKになりました。画像はしょうがないので適当に用意してpage1.html内のimgタグ内のファイル名と合わせて保存します。imgタグ内には ``images/xxx.jpg`` と書かれていると思いますので、monaca cloud左側のフォルダツリーが表示されている箇所で右クリック。imageフォルダーを追加できます。
![Screen Shot 2015-07-28 at 09.20.31.png](https://qiita-image-store.s3.amazonaws.com/0/74328/0f6080fc-fb25-0315-c939-a885ee54cb1c.png)



また画像ファイルはドラックアンドドロップでimageフォルダー内に保存できます。WEBを意識させないUI素晴らしい！！



![Screen Shot 2015-07-16 at 10.06.47.png](https://qiita-image-store.s3.amazonaws.com/0/74328/805f510b-32d9-aff5-8914-8b68c41cf039.png)

できました。次にタップした時にnew_page.htmlに移動するようにコードを追加します。

リストを構成している``ons-list-item``タグ内にng-clickを追加。

```html:page1.html
        <ons-list-item modifier="chevron" class="list-item-container" ng-click="myNavigator.pushPage('new_page.html')">
    
```

これで追加した行をタップするとnew_page.htmlに移動するようになりました。

続いて同じ要領でnew_page.htmlの内容を``Details``のコードで置き換えます。
Detailsのhtmlには色々書いてありますが、``ons-page``タグの中身のみをまるっとコピーすることがポイントです。

また戻るボタンを押した時にちゃんとリストに戻るよう``ons-toolbar-button内にもともとのnew_page.htmlの中にあったpopPageを追記しておきます。

```html:new_page.html
<ons-toolbar-button  ng-click="myNavigator.popPage()"
```

画像は例によって適当で。今回はcssの中で定義していますので、パスにも気をつけてください。うまくいくとこんな感じになるはず。
![Screen Shot 2015-07-16 at 10.30.07.png](https://qiita-image-store.s3.amazonaws.com/0/74328/1951c798-4ba4-12cd-6eb3-2fb3c7539f1f.png)

戻るボタンも動作するしバッチリです。



## サイト全体のカラーを変える
もっと個性を出すためにサイト全体のカラーを変えたい場合もあるかと思います。

そんな時に使えるのが
_Onsen UI Theme Roller_
http://components.onsen.io/

各コンポーネントの色をまとめて変えることができます。
感性の赴くままにカラーを設定して、「Download Theme」ボタンをクリックします。
しばらく待つとcssのzipファイルがダウンロードされます。
zipを解凍して``onsen-css-components.css``を取り出して適当な名前に変更。ここでは``onsen-css-components-custom.css``とします。
www/components/monaca-onsenui/css/にアップロード

さらにloader.cssを修正します。

```css:loader.css
/*** <Start:monaca-onsenui LoadCss:"components/monaca-onsenui/css/onsen-css-components-blue-basic-theme.css"> ***/
@import url("monaca-onsenui/css/onsen-css-components-custom.css");
/*** <End:monaca-onsenui LoadCss:"components/monaca-onsenui/css/onsen-css-components-blue-basic-theme.css"> ***/
/

```

ドヤッ！
![Screen Shot 2015-07-16 at 10.45.29.png](https://qiita-image-store.s3.amazonaws.com/0/74328/a0952457-eb1b-7205-7f3e-827db965aff0.png)


ぜひmonacaで**使えるワイヤーフレーム**を作成してみてください。