中年システムエンジニアのオモチャ箱

中年システムエンジニアが初体験のブログ活動。技術情報の備忘録以外も、色々と載せていければと思います。


Monaca プロジェクトの新規作成 Onsen UI+Vue


【スポンサーリンク】


今回は、プロジェクトを新規で作成してみましょう!

 

まだ準備ができていない方は、下記ページより準備してから読んでくださいね。

www.ma-se.com

www.ma-se.com

 

プロジェクトの新規作成

Monaca ツールでは、様々なフレームワークとテンプレートが用意されています。
今回は、Onsen UI と Vue.js を使用するテンプレートで説明していきます。

Onsen UI とは

モバイルアプリの開発に特化したUIコンポーネントの集まりです。
Onsen UI を利用すると、アプリケーションで使用するメニュー制御やナビゲーション制御を、複雑なソースコードを記載することなく導入できます。

ja.onsen.io

 

Vue.js とは

JavaScript フレームワークのひとつです。
Onsen UI を複雑に制御する際に使用します。

ja.onsen.io

 

 

 

プロジェクトの新規作成

では、早速、下記手順にそって、新規プロジェクトを作成してみましょう!

  1.  ログインボタンをクリックします。

    f:id:middle-aged-se:20190601185049j:plain

  2. ログイン画面が表示されるので、登録した[1]メールアドレスと、[2]パスワードを入力し、[4]ログインボタンをクリックします。
    [3]次回から自動的にログインチェックボックスは、チェック ON / OFF どちらでも問題ありません。
    開発パソコンが共有で使用しているようであれば、OFF にしておく方が無難ですね。

    f:id:middle-aged-se:20190601185047j:plain

  3. 新しいプロジェクトを作るボタンをクリックします。

    f:id:middle-aged-se:20190601185045j:plain

  4. フレームワークテンプレートをクリックします。

    f:id:middle-aged-se:20190601185043j:plain

  5. Vue をクリックします。

    f:id:middle-aged-se:20190601185041j:plain

  6. 下にスクロールし、Onsen UI V2 Vue Splitter の[1]プレビューボタンをクリックしてみてください。
    今回、作成するアプリケーションのテンプレート[2]を見ることができます。

    f:id:middle-aged-se:20190601185128j:plain

    f:id:middle-aged-se:20190601185126j:plain

  7. Onsen UI V2 Vue Splitter をクリックします。
    [1]プロジェクト名、[2]説明に入力後、[3]作成ボタンをクリックします。

    f:id:middle-aged-se:20190601185123j:plain

  8. 下記の通り、ダッシュボード画面にプロジェクトが追加されます。

    f:id:middle-aged-se:20190601185120j:plain

以上で、新規プロジェクトが作成されました。

Onsen UI + Vue のテンプレートを動かてみよう

クラウド IDE で動かしてみましょう。
プレビュー画面の上に表示されている警告メッセージは消えるまでに時間がかかります。
時間が経っても消えない場合は、[×]ボタンをクリックすると閉じることができます。

f:id:middle-aged-se:20190601185118j:plain

下記の通り、プレビューが表示されましたか?
プレビュー画面のメニューアイコン[1]をクリックすると、[2]メニューバーが表示されます。

f:id:middle-aged-se:20190601185149j:plain

f:id:middle-aged-se:20190601185146j:plain

メニューバーの、home、news、settings をクリックすることにより、各画面が表示されることを確認してください。

 

以上の通り、Onsen UI + Vue.js のテンプレートからプロジェクトを作成しただけで、メニュー付きのアプリケーションが簡単に作成できましたね!

 

Monacaで学ぶはじめてのプログラミング ~モバイルアプリ入門編~ [ アシアル株式会社 ]

価格:3,240円
(2019/5/19 15:34時点)
感想(0件)

クラウドでできるHTML5ハイブリッドアプリ開発 Monaca公式ガイドブック Cordova/Onsen UIで作るiOS/Android両対応アプリ Cordova/Onsen UIで作るiOS/An [ 永井勝則 ]

価格:3,240円
(2019/5/19 15:34時点)
感想(2件)

Vue.js入門 基礎から実践アプリケーション開発まで [ 川口和也 ]

価格:3,650円
(2019/6/1 19:40時点)
感想(0件)

基礎から学ぶVue.js [ mio ]

価格:3,693円
(2019/6/1 19:40時点)
感想(0件)