中津川篤司Twitter2Facebook15はてブPocket4LINEDevRelという単語をご存じでしょうか。Relationsの略で、開発者と自社製品/サービスとの繋がりを改善、強化するマーケティング施策です。最近よく聞かれるようになったエバンジェリスト、アドボケイトといった職種はこのDevRelに属する方達です。そんなDevRelに関するカンファレンス、「DevRelCon」が東京にて7月15日に開催されます。ご興味のある方はぜひご参加ください。Appを作っています(残念ながら今年は間に合わなそうですが...)。Vueに関する知見を紹介します。作るものアプリの画面構成としてありがちな、タブバー(v-ons-tabbar)の中にナビゲーション(v-ons-navigator)が入っているUIの作り方を紹介します。ナビゲーション機能で辿れる各ページは多階層になっています。UIで様々なコンポーネントを組み合わせる場合、特に注意が必要なのがツールバーです。ツールバーが各タブ内にあると、タブを切り替える度にツールバーが再描画されてしまいます。これはWebアプリっぽさを感じさせるのでできればやらないことをおすすめします。このアプリではツールバーはアプリ全体で共通として、ナビゲーションは各タブ内で独立して動くものとしました。(ナビゲーション機能)が制御する各ページは、親子関係ではなく兄弟関係です。使って変数を送る仕組みはありません。42};}})タブ毎に呼び出すナビゲーション機能は共通化しよう今回は3つのタブがありますが、それぞれにナビゲーションを行うコンポーネントを作るのは面倒です。どのページを表示するかはタブバー側で指定することにします。使ってデータを引き継げるようにします。this.pageStack);}}}</script>そして、このNavコンポーネントをAppコンポーネント内で使います。表示するコンテンツとしてHomeコンポーネントを渡します。Homeコンポーネントを指定することで、AppコンポーネントからHomeコンポーネントに対してデータを渡せるようになります(今回は空ですが)。省略}画面遷移についてメイン画面(タブ内の1ページ目)から詳細画面(2ページ目)に遷移する際には、NavコンポーネントのpushPage()を呼び出します。HomeDetail});}}}</script>さらに、詳細画面(たとえば、HOMEタブの詳細画面)から別タブの詳細画面(たとえば、NEWSタブの詳細画面)に移動することもできます。これを受け取ったNavコンポーネントは、文字列型からオブジェクト型のNewsDetailコンポーネントに変更します。(Nav.vueの※1参照)このような記述方法を取っているのには理由があります。HomeDetailコンポーネント(HOMEタブの詳細画面)とNewsDetailコンポーネント(NEWSタブの詳細画面)間で相互に画面遷移させたいので、セオリー通りに記述すると以下のようになります。するとお互いをインポートし合う構成になり、無限にインポートが発生してしまいます。'./HomeDetail';これを防ぐために、文字列型でコンポーネント名を渡して、Navコンポーネント内でオブジェクト型に変更するようにしています。Appコンポーネントよりも下の階層にあるため、Appコンポーネント内で利用できません。戻るボタンの描画は自分で実装する必要があります。画面遷移したタイミングで戻るボタンを表示したいのですが、ページスタック(pageStack)はNavコンポーネント内、ツールバーはAppコンポーネント内にあります。使っても望んだ動作になりませんでした。そこでどうしたかというと、Appコンポーネント内にて表示判定を行うようにしました。実行されると、App.vueのbackButton()が呼び出されます。現在のページスタック数から2引いたインデックスのページ、つまり現在表示されているページの一つ前のページをthis.lastに設定しています。styleToolbar()の中では、this.lastが空かどうか(=現在のページよりも前にページが存在するかどうか)を判定し、CSSのスタイルを返却しています。'none'}`;},現在のページよりも前にページが存在する場合は、ツールバーに戻るボタンを表示します。戻るボタンを押した時の処理はページスタックを減らすだけなのですが、どうやってAppコンポーネントからNavコンポーネントのページスタックにアクセスすれば良いでしょうか。ここはちょっとトリッキーなのですが、refを使います。このrefを指定することで別のコンポーネントの変数にアクセスできるようになります。-->:index.sync="activeIndex"@postchange="changeTab"@backButton="backButton"></v-ons-tabbar>こうすることで戻るボタンを押した時にNavコンポーネントにアクセスできるようになります。ページスタック配列を減らした後に、戻るボタンの表示判定を行っています。最後にタブを切り替えた時の処理を追加します。-->@backButton="backButton"></v-ons-tabbar>changeTab()は、戻るボタンの表示判定を行うだけのメソッドです。配置するサンプルアプリの完成です。多階層を辿ったり、別タブの画面に遷移したりすることもできるので、画面数が多いアプリを作る際の参考になるのではないでしょうか。今回のコードはgoofmint/OnsenUI-Tab-Navにアップロードしてあります。実装時の参考にしてください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。一緒に隠れることになります。アプリによってはツールバーやタブバーを残したい場合もあると思います。このやり方についてはMonaca公式のモナカプレスで詳しく解説されています。