Onsen UIでスマホサイトを作る その2
今回は Onsen UI テーマローラーページ をベースに各ページを作成し、スライドメニューコンポーネントを使ったリンクを貼ってみます。
作成するページ
作成するのは音楽活動のサイトなので、必要なページは
- トップ
- お知らせ
- ライブ日程
- バイオグラフィ
- ディスコグラフィ
- ダウンロード
- お問い合わせ
といった感じでしょうか。
実際にバイオグラフィページを作成してリンクを貼ってみましょう。
スライドメニューからリンクを貼る
まずはスライドメニューに項目を追加し、リンクを貼ります。
Sliding Menuパターンのソースを表示する
先週の復習になりますが、Onsen UI テーマローラーページ を開き、Patternsタブを選択します。
次にSliding MenuパターンのShow Sourceを選択し、ソースを表示します。
ページを分ける
表示したソースはスライドメニューを表示するページ（メインページ）とスライドメニューページが同一ファイルに書かれています。
もちろん、このままの形式で進めていっても良いのですが、このままでは最終的にファイルがものすごく長くなってしまうので、ページごとに分けます。
複数ページを同一ファイルに書く記述である、<ons-template> タグ以下で分けます。
（ <ons-template> タグは含まない）
ページ遷移の処理に書き換える
表示したソースではメニュー項目をクリックした時の処理が、ng-click="menu.close()" になっています。
これではメニューを閉じるだけでページ遷移が行われないので、ng-click="menu.setAbovePage('[遷移先ファイル名]', {closeMenu: true})" もしくは、onclick="menu.setAbovePage('biography.html', {closeMenu: true})" に書き換えます。
アイコンを選ぶ
Onsen UIの公式ページにもある通り、Font Awesome と Ionicons のアイコンを使うことができます。
Onsen UIは、Font Awesomeの400以上のアイコン、そしてIoniconsの500以上のアイコンを使うことができます。
アイコンを使うには <ons-icon icon="[任意のアイコン名]"> に書き換えます。
コード例
上記、
- ページを分ける
- ページ遷移の処理に書き換える
- アイコンを選ぶ
の処理を行ったコードが次です。
index.html（メインページ）
<!doctype html> <html> <head> <link rel="stylesheet" href="bower_components/onsenui/build/css/onsenui.css"> <link rel="stylesheet" href="styles/onsen-css-components.min.css"> <link rel="stylesheet" href="styles/sliding_menu.css"> <script src="bower_components/onsenui/build/js/angular/angular.js"></script> <script src="bower_components/onsenui/build/js/onsenui.js"></script> <script> ons.bootstrap(); </script> </head> <body> <ons-sliding-menu main-page="top.html" menu-page="menu.html" max-slide-distance="260px" type="push" var="menu"> </ons-sliding-menu> </body> </html>
menu.html（メニューページ）
<!doctype html> <ons-page modifier="menu-page"> <ons-toolbar modifier="transparent"> <div class="right"> <ons-toolbar-button class="menu-close" ng-click="menu.close()"> </ons-icon>Close </ons-toolbar-button> </div> </ons-toolbar> <ons-list class="menu-list"> <ons-list-item class="menu-item" onclick="menu.setAbovePage('top.html', {closeMenu: true})"> <ons-icon icon="ion-home"></ons-icon> Top </ons-list-item> <br /> <ons-list-item class="menu-item" onclick="menu.setAbovePage('information.html', {closeMenu: true})"> <ons-icon icon="ion-information"></ons-icon> Infomation </ons-list-item> <ons-list-item class="menu-item" onclick="menu.setAbovePage('live.html', {closeMenu: true})"> <ons-icon icon="ion-mic-c"></ons-icon> Live </ons-list-item> <ons-list-item class="menu-item" onclick="menu.setAbovePage('biography.html', {closeMenu: true})"> <ons-icon icon="ion-person"></ons-icon> Biography </ons-list-item> <ons-list-item class="menu-item" onclick="menu.setAbovePage('discography.html', {closeMenu: true})"> <ons-icon icon="ion-music-note"></ons-icon> Discography </ons-list-item> <ons-list-item class="menu-item" onclick="menu.setAbovePage('download.html', {closeMenu: true})"> <ons-icon icon="ion-cloud"></ons-icon> Download </ons-list-item> <ons-list-item class="menu-item" onclick="menu.setAbovePage('contact.html', {closeMenu: true})"> <ons-icon icon="ion-paper-airplane"></ons-icon> Contact </ons-list-item> </ons-list> </ons-page>
スクリーンショット
バイオグラフィページを作る
スライドメニューを作ったので、リンク先となるバイオグラフィページを作ります。
バイオグラフィページに使うパターンを選ぶ
再度、Onsen UI テーマローラーページ を開き、Patternsタブを選択します。
この中からバイオグラフィページに使えそうなパターンがあれば、それがそのままテンプレートとして使えるわけです。
名前からしてまんまですが、Profileパターンが使えそうですね。
早速Show Sourceを選択してソースを表示します。
コードをコピーし編集する
メニューページと同じように biography.html というファイルを作って <ons-template> タグ以下を貼り付けます。
ただし、この方法だと index.html からではなく biography.html に直接アクセスした際、Onsen UI等々が読み込まれないので、index.html は検索エンジンのクロールを許可しないよう設定したり、 <head> タグ周りもきちんと記述したりといった工夫が必要かと思います。
コード例
biography.html（プロフィールページ）
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles/profile.css"> </head> <body> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="ons.slidingMenu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">Biography</div> </ons-toolbar> <div class="profile-card"> <img src="img/yuk.jpg" class="profile-image"> <div class="profile-name">ユキミネ</div> <div class="profile-desc">Vocal, Guitar, Bass, Cajon, Programming</div> </div> <ons-list modifier="inset" style="margin-top: 10px"> <ons-list-item> Twitter </ons-list-item> <ons-list-item> Instagram </ons-list-item> </ons-list> <br> </ons-page> </body> </html>
スクリーンショット
まとめ
といった感じでOnsen UIを使うとスマホスマホしたサイトが簡単に作成できます。
「Onsen UIでこんなことした！」というのがあればまた紹介したいと思います。
P.S.
いわゆるテンプレートサイトって今どんなのになってるんですかね。
サイトを簡単に作れるサービスなんかがあってテンプレート配布サイトとかはもうないとか？
