みなさん、こんにちは！
前回、PhonegapするならOnsen UIを使わないと！という記事を書きました。
(前回の記事はこちら⇒【Phonegap/Cordova + Onsen UI 01】ハイブリッドアプリに最適なOnsen UIとは)
ので、早速Onsenを導入しましょう。
Onsen UI 公式ページには、2016年7月現在、4つの導入方法があります。
- Monaca CLIを使用する
- Monaca クラウドIDEを使用する
- npm, bowerを使用する
- 自分でダウンロードして配置
ここで、私はMonacaを使用したことがありませんし、当分使う予定もないので、1,2は却下。3は…ごめんなさい。これを選ぶべきなんでしょうが、bowerとかよくわからないので、真に原始的ながら4を採用しています。
勉強してきたら3の方法について書こうと思います。
というわけで、まず、Onsen UIの公式ページに行きます。
トップ -> はじめる -> すべてダウンロード
OnsenUI Distribution Release に飛びます。その先でOnsen UI のSource Codeをダウンロードします。
ダウンロードしたファイルを展開すると、中にcssとjsというフォルダが存在すると思います。今回はこれを使用します。
現在、Onsen UI 2 がリリースされていますが、私はまだ1.x系を使用しているので、説明などは1.x系にて行います。ご了承ください。
さて、ダウンロードが完了したら、自身のPhonegapプロジェクトにOnsen UIを配置します。
割と何処に配置しても良いのですが、ネット情報を参考に、私の場合は
[shell]/www/lib/onsen/[/shell]というフォルダを作成し、そこに先ほどダウンロード&展開したフォルダのcssとjsをコピーして配置しています。
ここまできたら、後はhtmlでjsファイルとcssファイルを読み込むだけです。
[html] <link rel="stylesheet" href="lib/onsen/css/onsenui.css" /><link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
<script src="lib/onsen/js/onsenui_all.min.js"></script>
[/html]
上記をindex.html内のheadに記載すれば、Onsen UIを使用する準備ができました。
次回からは、Onsenを使ってアプリを作っていこうと思います。
今回は以上です！
次の記事はこちら⇒【Phonegap/Cordova + Onsen UI 03】住所検索アプリをOnsenUI+Angular.jsに書き換える
