Onsen UIでスマホサイトを作る その1
先週末、左足をガラスで切ったり、右足を深爪にしたり、さらに偏頭痛がきたりと今月の不幸を使い切った感のあるユキミネです。
唐突ですが、スマホサイトを作ってみようと思います。
経緯
冬にソロで音楽活動をやりたいのでそのサイトを作ろう！
↓
PCサイトならバンドで作ったやつ使い回せばいいけど、今時みんなスマホで見るよなあ
↓
スマホサイトの勉強すっか！
下調べ
今時の（ミュージシャンの）スマホサイトってどんなの？ってことで下調べ。
（2014年10月20日現在）
| アーティスト名 | カラム数 | スライドメニュー | タブバー | 遅延読み込み | 備考 |
|---|---|---|---|---|---|
| チャットモンチー | 1 | なし | なし | あり | |
| ASIAN KUNG-FU GENERATION | 1 | なし | あり | なし | |
| ポルノグラフィティ | 1 | なし | なし | なし | バナー多め |
| RADWIMPS | 1 | なし | なし | なし | 最小構成（？） |
| ONE OK ROCK | 1 | あり | なし | なし |
各アーティストリンク
所感
もっと流行りみたいなのがあるのかと思いましたが、結構バラバラですね。（サンプル数が少ないのもあるかもしれませんが。）
カラム数は5サイトとも1つでした。
画面サイズもあるし、1が適当なのでしょう。
スマホらしいコンポーネントを使ったメニューはスライドメニューとタブバーがありました。
使い分けるとすれば、素早くアクセスしたい・頻繁にアクセスするページはタブバーから、それ以外はスライドメニューからといった感じでしょうか。
是非、これらのコンポーネントは取り入れたいですね。
チャットモンチーの遅延読み込みはおもしろいなあと思いました。
Onsen UI
じゃあどうやって作ろうかという話ですが、先月の内定者開発でも使ったOnsen UIが良さそうです！
Onsen UIはシンプルなHTML5モバイルアプリ開発用のライブラリで、フロント力皆無の僕でも分かりやすいです。
今回はWebサイトで使いますが、ハイブリッドアプリの開発なんかもできます。
そのうちやってみたいですね。
インストール方法はいくつかありますが、Webサイトで使うなら、Bowerで入れるか、Onsen UIのサイトからダウンロードしてくるのが簡単だと思います。
僕はBowerで入れました。
ここら辺の手順はOnsen UIのサイトにも書いてあります。
Onsen UIを使う
Onsen UIのサイトには
- コンポーネント一覧
- マニュアル
- テーマローラー
があり、非常に分かりやすいドキュメント／ツールになっています。
コンポーネント一覧
いわゆるドキュメントです。
マニュアル
●●がしたい！●●が作りたい！というときに役に立ちます。
例えば
- 新しいページの表示
- 一つ前のページに戻る
といった項目があり、非常に分かりやすいです。
テーマローラー
これ、ハンパないです。
CSSコンポーネントタブ
各コンポーネントが視覚的に表示されます。
各コンポーネントを選択すると、実際に動作する（触れる）コンポーネントとコードが表示されます。
パターンタブ
コンポーネントを用いたページ（パターン）一覧が表示されます。
各ページは実際に動作します（触れます）。
各ページ右上の Show Source を選択するとコードが表示されます。
カラースキーマが選べる、編集できる
さらに、CSSコンポーネント、パターンのカラースキーマを編集できます。
編集したカラースキーマはダウンロードして適応できます。
雛形を作ってみた
で以下のような雛形が作成できます。
あっという間ですね！
ここまでのまとめ
スマホサイト作りたい
下調べをした
Onsen UIを使うと簡単に雛形が作れる
次回はページ遷移等、機能を追加していこうと思います。
