今回は、プロジェクトを新規で作成してみましょう！
まだ準備ができていない方は、下記ページより準備してから読んでくださいね。
プロジェクトの新規作成
Monaca ツールでは、様々なフレームワークとテンプレートが用意されています。
今回は、Onsen UI と Vue.js を使用するテンプレートで説明していきます。
Onsen UI とは
モバイルアプリの開発に特化したUIコンポーネントの集まりです。
Onsen UI を利用すると、アプリケーションで使用するメニュー制御やナビゲーション制御を、複雑なソースコードを記載することなく導入できます。
Vue.js とは
JavaScript フレームワークのひとつです。
Onsen UI を複雑に制御する際に使用します。
プロジェクトの新規作成
では、早速、下記手順にそって、新規プロジェクトを作成してみましょう！
- ログインボタンをクリックします。
- ログイン画面が表示されるので、登録した［1］メールアドレスと、［2］パスワードを入力し、［4］ログインボタンをクリックします。
［3］次回から自動的にログインチェックボックスは、チェック ON / OFF どちらでも問題ありません。
開発パソコンが共有で使用しているようであれば、OFF にしておく方が無難ですね。
- 新しいプロジェクトを作るボタンをクリックします。
- フレームワークテンプレートをクリックします。
- Vue をクリックします。
- 下にスクロールし、Onsen UI V2 Vue Splitter の［1］プレビューボタンをクリックしてみてください。
今回、作成するアプリケーションのテンプレート［2］を見ることができます。
- Onsen UI V2 Vue Splitter をクリックします。
［1］プロジェクト名、［2］説明に入力後、［3］作成ボタンをクリックします。
- 下記の通り、ダッシュボード画面にプロジェクトが追加されます。
以上で、新規プロジェクトが作成されました。
Onsen UI ＋ Vue のテンプレートを動かてみよう
クラウド IDE で動かしてみましょう。
プレビュー画面の上に表示されている警告メッセージは消えるまでに時間がかかります。
時間が経っても消えない場合は、［×］ボタンをクリックすると閉じることができます。
下記の通り、プレビューが表示されましたか？
プレビュー画面のメニューアイコン［1］をクリックすると、［2］メニューバーが表示されます。
メニューバーの、home、news、settings をクリックすることにより、各画面が表示されることを確認してください。
以上の通り、Onsen UI ＋ Vue.js のテンプレートからプロジェクトを作成しただけで、メニュー付きのアプリケーションが簡単に作成できましたね！
 |
Monacaで学ぶはじめてのプログラミング ～モバイルアプリ入門編～ [ アシアル株式会社 ] 価格:3,240円 |
|
価格:3,240円 |
 |
 |
Vue．js入門 基礎から実践アプリケーション開発まで [ 川口和也 ] 価格:3,650円 |
|
価格:3,693円 |
 |
