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

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

【スポンサーリンク】

 

Monaca Splitter メニューの文字列を変更(連想配列を使ってみる) Onsen UI+Vue


【スポンサーリンク】


今回は、前回作成したプロジェクトを使用して、メニューバー、及び、各画面の文字列を変更します。
また、連想配列という便利な配列があるので使用してみましょう!
フレームワークは「Onsen UI+Vue」です。

 

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

www.ma-se.com

 

連想配列とは

ウィキペディアにも掲載されています。

連想配列 - Wikipedia

簡単に説明すると、『”キー”と”値”のペアによるデータ構造のこと』です。
純粋な連想配列においてはキーの重複があってはいけません。

キー
C001 あんず
C002 らいち
C003 いちご
C004 みかん

上記の連想配列が存在した場合、「キー=C001、値=めろん」のデータは設定できません。

 

尚、「キー=C005、値=めろん」のようにキーが異なる場合は設定可能です。

 

今回は、この連想配列を使用して、メニューバーで選択された時に表示するページを”キー”、メニューバーに表示するページ名を”値”として設定します。

 

連想配列については、下記ページが大変参考になりました。

www.sejuku.net

現行動作の確認

既に作成した「Onsen UI テスト01」プロジェクトを動かして、現行の動作を確認してみましょう!

  1. [1]のメニューアイコンをクリックすると、[2]メニューバーが表示されます。

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

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

  2. メニューバーの「settings」をクリックすると、Settings 画面が表示されます。

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

  3. メニューバーの「news」をクリックすると、News 画面が表示されます。

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

  4. メニューバーの「home」をクリックすると、Home 画面が表示されます。

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

以上が現行の動きです。
メニューバーで選択した画面が表示されましたね!

 

 

 

連想配列を使用してメニューバーを修正してみよう

メニューバーには「home、news、settings」という 3 項目が存在していました。
各項目をクリックすることにより、対応した画面が表示されましたね。
今回、メニューバーに英語表記されたものを、日本語表記に変更します。

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

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

  2. メニューバーのタイトルを「MENU」から「メニュー」に変更します。

    f:id:middle-aged-se:20190608183300j:plain
    App.vue ファイルの 9 行目を変更します。

    変更前ソース

    <v-ons-list-header>Menu</v-ons-list-header>

    変更後ソース

    <v-ons-list-header>メニュー</v-ons-list-header>

  3. メニューバーの項目タイトルを「home」から「ホーム」、「news」から「ニュース」、「settings」から「設定」に変更します。

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

    まず、script ブロックで英語表記から、日本語表記に変更します。
    App.vue ファイルの 33 行目を変更します。
    改行して見やすくしているので、33 ~ 35 行目が変更後となります。
    変更前ソース

    pages: ['home', 'news', 'settings'],

    変更後ソース

    pages:{home: 'ホーム',

                news: 'ニュース',

                settings: '設定'},

    この変更では、連想配列を使用して下記のように設定しています。

    キー(ページ) 値(ページタイトル)
    home ホーム
    news ニュース
    settings 設定

    続いて、template ブロックで設定した data を使用して「メニューバーの項目タイトル、及び、表示するページ」の制御を実装します。
    変更箇所は、App.vue ファイルの 10 ~ 14 行目を変更します。

    変更前ソース

    <v-ons-list-item v-for="page in pages" :key="page" tappable modifier="chevron"

      @click="currentPage = page; openSide = false"

    >

        <div class="center">{{ page }}</div>

    </v-ons-list-item>

    変更後ソース

    <v-ons-list-item v-for="(value, key) in pages" :key="key" tappable modifier="chevron"

      @click="currentPage = key; openSide = false"

    >

        <div class="center">{{ value }}</div>

    </v-ons-list-item>

    v-for ディレクティブを使用することにより、pages に格納されている連想配列数分、ループ処理を実行します。
    今回の場合だと、3 回ループします。

    また、「v-for="(value, key) in pages"」と記述することにより、pages に格納されている要素を、ループする毎に連想配列の値を「value」及び「key」変数に格納しています。
    「key」には連想配列のキーであるページ名にアクセスし、「value」にはキーに対応する値であるページタイトルにアクセスできます。

  4. 上記修正後、ファイルを保存してプレビュー画面を確認してください。
    メニューバーのタイトル、及び、メニュー項目名が日本語に変更されましたね!

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

各画面のツールバー及びコンテンツ画面の表示文字列を変更してみよう
  1. 修正対象となるファイルは、components フォルダに存在する、「homePage.vue」、「newsPage.vue」、「settingsPage.vue」となります。
    ・homePage.vue:Home 画面
    ・newsPage.vue:News 画面
    ・settingsPage.vue:Settings 画面

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

  2. Home 画面のツールバーを日本語表記に変更します。
    変更箇所は、homePage.vue ファイルの 3 行目を変更します。
    変更前ソース

    <custom-toolbar :title="'Home'" :action="toggleMenu"></custom-toolbar>

    変更後ソース

    <custom-toolbar :title="'ホーム画面'" :action="toggleMenu"></custom-toolbar>

  3. Home 画面のコンテンツ内容を日本語表記に変更します。
    変更箇所は、homePage.vue ファイルの 4 ~ 6 行目を変更します。
    変更前ソース

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

      Welcome home.

    </p>

    変更後ソース

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

      ホーム画面へようこそ

    </p>

  4. News 画面のツールバーを日本語表記に変更します。
    変更箇所は、newsPage.vue ファイルの 3 行目を変更します。
    変更前ソース

    <custom-toolbar :title="'News'" :action="toggleMenu"></custom-toolbar>

    変更後ソース

    <custom-toolbar :title="'ニュース画面'" :action="toggleMenu"></custom-toolbar>

  5. News 画面のコンテンツ内容を日本語表記に変更します。
    変更箇所は、newsPage.vue ファイルの 4 ~ 6 行目を変更します。
    変更前ソース

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

      Some news here.

    </p>

    変更後ソース

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

      ニュースを記載します

    </p>

  6. Settings 画面のツールバーを日本語表記に変更します。
    変更箇所は、settingsPage.vue ファイルの 3 行目を変更します。
    変更前ソース

    <custom-toolbar :title="'Settings'" :action="toggleMenu"></custom-toolbar>

    変更後ソース

    <custom-toolbar :title="'設定画面'" :action="toggleMenu"></custom-toolbar>

  7. Settings 画面のコンテンツ内容を日本語表記に変更します。
    変更箇所は、settingsPage.vue ファイルの 4 ~ 6 行目を変更します。
    変更前ソース

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

      Change the settings.

    </p>

    変更後ソース

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

      各種設定の変更を行います

    </p>

  8. メニューバーの各項目をクリックすると、日本語表記された画面が表示されます。

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

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

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

 

如何だったでしょうか。
今回は、英語表記を日本語表記に変更しながら、メニューバー、ツールバー、コンテンツ内容を修正してみました。
また、連想配列というものを使用して制御してみました。

 

詳しいプログラムの説明は省略しましたが、案外簡単にプログラム変更できるもんだと実感していただけたでしょうか。
これを機に、プログラム開発に興味を持っていただければ嬉しいです!

 

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