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

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


Monaca Navigator を使用して画面遷移をしてみよう Onsen UI+Vue


【スポンサーリンク】


前回までは、Splitter や Tabbar を使用して画面遷移を行いました。
下記の記事で取り上げています。

www.ma-se.com

www.ma-se.com

 

今回は Navigator を使用して画面遷移をしてみましょう!
プロジェクトは、新規プロジェクトを作成するところから始めてください。
忘れてしまった方は、下記の記事を参考にしてみてくださいね。

www.ma-se.com

 

新規プロジェクトの作成では、下記を選択・入力してください。

  • フレームワーク
    「Vue」を選択します。
  • テンプレート
    「Onsen UI V2 VUE Navigation」を選択します。
  • プロジェクトの情報
    プロジェクト名には「Onsen UI テスト03」を入力します。
    説明は任意で構いません。

上記でプロジェクトを新規で作成すると、クラウド IDE には下記のように表示されたかと思います。

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

 Navigator 機能について

Navigator 機能を使用することにより、各画面に遷移することができます。
遷移先では、戻るボタン等を配置するだけで、簡単に遷移元画面に戻ることができます。
尚、遷移元画面に戻る際は、複雑な制御を記述する必要はなく、Navigator 機能で簡潔に実現できます。

 

今回作成した動作で説明します。
Page 1 画面の、Push Page 2 ボタンを押下します。

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

すると、Page 2 に画面が遷移します。
Page 2 画面のツールバーに表示されている、<Page 1 リンクをクリックすると、Page 1 画面に戻ります。

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

 

 

 

文字列を修正してみよう

英語表記されたものを、日本語表記に変更します。

  1. 修正対象は Page1.vue ファイルになります。

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

  2. Page 1 画面のツールバー、コンテンツ内容、ボタン表示名称を変更します。
    ツールバーを変更するため、Page1.vue ファイルの 3 行目を変更します。
    変更前ソース

    <custom-toolbar>Page 1</custom-toolbar>

    変更後ソース

    <custom-toolbar>メイン画面</custom-toolbar>


    コンテンツ内容を変更するため、Page1.vue ファイルの 4、5 行目を変更します。
    変更前ソース

    <p style="text-align: center">

      This is the first page

    変更後ソース

    <p style="text-align: center">

      メイン画面に表示するコンテンツです


    ボタン表示名称を変更するため、App.vue ファイルの 6 行目を変更します。
    変更前ソース

    <v-ons-button @click="push">Push Page 2</v-ons-button>

    変更後ソース

    <v-ons-button @click="push">詳細画面へ</v-ons-button>

  3. Page 2 画面のツールバー、コンテンツ内容、遷移元画面に戻る際のリンク名称を変更します。
    ツールバー名称、及び、遷移元画面に戻る際のリンク名称を変更するため、Page2.vue ファイルの 3 行目を変更します。
    変更前ソース

    <custom-toolbar :back-label="'Page 1'">Page 2</custom-toolbar>

    変更後ソース

    <custom-toolbar :back-label="'メイン画面へ'">詳細画面</custom-toolbar>


    コンテンツ内容を変更するため、Page2.vue ファイルの 4 行目を変更します。
    変更前ソース

    <p style="text-align: center">This is the second page</p>

    変更後ソース

    <p style="text-align: center">詳細画面に表示するコンテンツです</p>

  4. ファイルを保存して、プレビュー画面を確認してください。
    どうでしょう? 文字列は変更されて表示されたでしょうか?

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

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

如何だったでしょうか。
今回は、Navigator を使用して画面遷移を行い、英語表記を日本語表記に変更してみました。 

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