[Monaca x PhoneGap] Monaca ネイティブコンポーネントを使ったアプリの画面遷移(location.href)でハマった夏。

Monacaでハマったこと

こんにちは。ドリーム系エンジニアの西間木です!
夏といえば、合宿!! -> 合宿といえば、 開発合宿 !!

っていうことで、今年の夏も会社のみんなで伊豆で開発合宿をしてきました。
ちなみにその時の記事は、おすぎが書いてるので良かったらどうぞ。
開発合宿のススメ 〜合宿をやるべき3つの理由〜

最近、アプリを開発するときは、HTML5ベースでマルチデバイスのアプリが開発できるPhoneGapとその開発プラットフォームとして有名なMonacaを主に使ってやってます。

今回の合宿でも、Monacaを使って開発したのですが、合宿でハマってしまって
僕の夏休みの宿題となってしまったことを今回はご紹介したいと思います。
この記事が、みなさんのお力になれればと思います!!

[Monaca x PhoneGap] Monaca ネイティブコンポーネントを使ったアプリの画面遷移(location.href)でハマった夏。


■ 今回やりたい処理の流れ(画面遷移)

今回は、実際に合宿で開発した
お子様の宿題を管理するアプリ 『 おねだりにゃんこの宿題やるにゃ
を例に記事を書いていきます。

・ 処理フロー(画面遷移)

今回は、下記のような処理を行っていきます。

 (1) 宿題追加画面を表示
    ↓
 (2) 入力後「とうろく」ボタンをクリック
    ↓
 (3) 宿題一覧画面を表示

上手くいくと下記のように画面が遷移します。

うまく行った場合の画面遷移

・ Monaca ネイティブコンポーネント「タブバー」

今回のポイントは、Monaca ネイティブコンポーネントの「タブバー」を使うということです。

– ネイティブコンポーネント

Monacaには、ネイティブのような表現ができるように標準でコンポーネントが用意されています。簡単にネイティブアプリっぽい、レイアウトやデザインが実現できるので便利です!

”ネイティブアプリに近い表現を実現するために、Monacaでは標準でネイティブ機能が搭載されています。ネイティブ機能を使うことで、画面描画にネイティブのUIパーツを用いたり、メニューや戻るボタンのようなハードウェアキーを活用できます。”

参照:Monaca 公式ドキュメントより「ネイティブコンポーネント

– タブバー

タブバーは、よくあるアプリの画面下部に配置されているメニューボタンのコンポーネントです。画面遷移もネイティブのようなにスムーズになるので、オススメです!

”タブバーは画面ボトムに配置され、ページの切り替えを行うためのコンポーネントです。ツールバーで配置できるUIコンポーネントは、タブバーには配置できません。”

参照:Monaca 公式ドキュメントより「タブバー

Monaca タブバー

■ location.hrefでハマった。

今回ハマったのは、ズバリ「location.href」での画面遷移です。
説明するよりもまず、コードを見てみます。

・ ハマったところはこんな感じ。

    $("#set_btn").click(function(){
        console.log("#update_setting/click");
        // パラメータをセット
        neko.homework.id           = $("#homework_id").val();
        neko.homework.content      = $("#homework_content").val();
        neko.homework.end_date     = $("#end_date").val();
        neko.homework.complete_flg = $("#complete_flg").val();
        // 宿題新規登録
        neko.insertHomework(function(){
            // 成功したら一覧へ
            location.href = './homework_list.html';
        });
    });

 (1) とうろくボタンがクリックされたら、#set_btn.click()が呼ばれます。
 (2) 登録に必要な情報をセットして、neko.insertHomework()で宿題を登録処理を行います。
 (3) 成功した場合、neko.insertHomework()のコールバックで一覧画面に遷移します。

そのとき、(3)の処理でlocation.hrefを使って宿題一覧画面へ遷移させると、タブバーのアクティブになっているメニューが元の画面(宿題追加画面)のままになってしまいます。

location.hrefを使ったときの画面遷移結果

実は、開発合宿のときは、location.hrefを使って画面遷移をしようとすると、真っ白の画面になってしまっていましたが、この記事を書いている現時点ではコードの解釈が少し変わったみたいですね。こういう風に、すごいスピードでプラットフォームが改善されていくのが感じられるのも、実はMonacaを使って開発してて、楽しいところなんです。


■ monaca.updateUIStyle()を使う。

ネイティブコンポーネントを使った場合、現在のMonacaでは、location.hrefを使用すると、ネイティブUIファイル(ネイティブコンポーネントの定義ファイル)を正常に読み込むことができないみたいです。

お問い合わせをして聞いたら、そのように回答がありました。そのうち、仕様が変わるかもしれませんが!

・ Monaca API ネイティブ制御

そのため、今回のように処理によって、別タブに遷移する際は、location.hrefではなく、MonacaのネイティブUI制御用のAPIを使用します。

– ネイティブ制御

Monaca ネイティブコンポーネントを使った場合は、基本的にMonaca APIを使って制御するのがお作法です!これを理解してないと、結構よくハマります。

”Monacaで独自に実装されている関数群、プロパティのうち、ネイティブ制御を行うものをご紹介します。これらを用いることで、例えばUIコンポーネントのUIスタイル定義を変更、取得することなどができます。ネイティブUIコンポーネントについての詳細は ネイティブコンポーネント を参照してください。”

参照:Monaca 公式ドキュメントより「ネイティブ制御

ネイティブ制御

・ 実際にコードを書くとこんな感じ。

    $("#set_btn").click(function(){
        console.log("#update_setting/click");
        // パラメータをセット
        neko.homework.id           = $("#homework_id").val();
        neko.homework.content      = $("#homework_content").val();
        neko.homework.end_date     = $("#end_date").val();
        neko.homework.complete_flg = $("#complete_flg").val();
        // 宿題新規登録
        neko.insertHomework(function(){
            // 成功したら一覧へ
            // location.href = './homework_list.html';
            monaca.updateUIStyle("footer", "activeIndex", 2);
        });
    });

 (1) とうろくボタンがクリックされたら、#set_btn.click()が呼ばれます。
 (2) 登録に必要な情報をセットして、neko.insertHomework()で宿題を登録処理を行います。
 (3) 成功した場合、neko.insertHomework()のコールバックで一覧画面に遷移します。

location.hrefと書いていた箇所を、monaca.updateUIStyle(id, style, value)に変更しました。

  • 今回は、タブバーに”footer”というIDを定義しているため、第一引数には”footer”を渡しています。
  • また、第二引数のstyleには、現在選択中のインデックスを定義するための”activeIndex”を渡しています。
  • そして、最後に画面遷移後に選択中となるインデックス値:2(インデックス2が「いちらん」タブのため)を渡します。

※ スタイルの種類については、Monaca公式ドキュメント ネイティブコンポーネントのタブバーに詳しく書いてあります。
ネイティブコンポーネント タブバー

ちなみに、今回作成した、ネイティブコンポーネント用のUI定義ファイルは、コチラです。
UI定義ファイル

上記に記載のとおりにmonaca.updateUIStyle()を使うように修正すると、登録処理完了後に、宿題一覧画面に遷移して、タブバーのアクティブになっているメニューも正しく(一覧画面)変更されます。

正しい画面遷移後

■ まとめ

皆さん、いかがだったでしょうか?

今回は、Monacaを使った開発で、ネイティブコンポーネントを使った際に、ボクがハマった画面遷移の処理(location.href)について、解決策を含めご紹介しました。この記事が、少しでもみなさんのためになればと思います!!

ちなみに、monaca.updateUIStyle()をしたときに、ページの再読み込みはしてくれなかったのでそこは現在確認中です。
コチラも分かったら、追記しますね!

ともあれ今回分かったことは、やっぱり”郷に入っては郷に従え”ってことですね。
当たり前って言われるかもしれませんが、Monacaのコンポーネントを使うときは、MonacaのAPIで制御しましょう!!

Monacaのドキュメントは、かなり充実してますしサンプルも沢山ありますので、そちらを参考にしながら開発すると良いと思います。
Monaca サンプルアプリ

そして皆さんは、是非ハマらない夏を過ごしてくださいね♪
では、また。

ハマらない夏

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

アバター

主に、女性向けのWEBサイトやスマホアプリの新規サービス構築に従事。自ら企画をして、数々のサービスやアプリも立ち上げている。企画・開発からプロモーションまで幅広く活躍。2009年、株式会社ヘッドウォータース入社。 / リーンスタートアップ / AI / 画像解析 / GoogleBigQuery / ライフログ / ヘルスケア / ファッション / ビューティ / Misfit / SynAppsTablet / Monaca / エバンジェリスト