【Phonegap/Cordova + Onsen UI 02】Onsen UI を導入する(手動で配置)

みなさん、こんにちは!

前回、PhonegapするならOnsen UIを使わないと!という記事を書きました。
(前回の記事はこちら⇒【Phonegap/Cordova + Onsen UI 01】ハイブリッドアプリに最適なOnsen UIとは)
ので、早速Onsenを導入しましょう。

Onsen UI 公式ページには、2016年7月現在、4つの導入方法があります。

  1. Monaca CLIを使用する
  2. Monaca クラウドIDEを使用する
  3. npm, bowerを使用する
  4. 自分でダウンロードして配置

ここで、私は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を配置します。

割と何処に配置しても良いのですが、ネット情報を参考に、私の場合は

/www/lib/onsen/

というフォルダを作成し、そこに先ほどダウンロード&展開したフォルダのcssとjsをコピーして配置しています。

ここまできたら、後はhtmlでjsファイルとcssファイルを読み込むだけです。

<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>

上記をindex.html内のheadに記載すれば、Onsen UIを使用する準備ができました。

次回からは、Onsenを使ってアプリを作っていこうと思います。

今回は以上です!

 

次の記事はこちら⇒【Phonegap/Cordova + Onsen UI 03】住所検索アプリをOnsenUI+Angular.jsに書き換える

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です