FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Onsen UI × Vue × mBaaSでカンファレンスアプリを作る(その1)

f:id:mbaasdevrel:20180329235153p:plain

国内外で多くのカンファレンスが行われています。有名なところではAppleのWWDC、GoogleのI/O、Facebookのf8などが知られています。日本でもAndroidユーザ会のABC、JAWS-UGによるJAWS DAYSなども参加者が多いカンファレンスです。他にもRubyKaigiやPyCon、PHPConなどのテックカンファレンスがあります。

そうした大規模なカンファレンスでは専用のアプリをリリースすることがあります。参加者はそれをダウンロードし、情報のアップデートを受け取ったり、カンファレンスのセッション情報を調べます。

今年の7月15日に筆者が主催するDevRelCon Tokyo 2018というカンファレンスがあります。昨年も行ったのですが、余裕がなくてカンファレンスアプリを作れませんでした。そこで今年はMonacaとニフクラ mobile backendを使ってカンファレンスアプリを作ってみたいと思います。

主な機能について

カンファレンスアプリと言うのは決して複雑ではありません。主に以下のような機能があります。

  • セッション情報
  • スピーカー情報
  • 場所
  • その他(カンファレンス自体の説明、ブログなど)

UIとしても複雑なものではないので、今回はMonacaとOnsen UI、そしてVueを使って作ります。MonacaであればiOS/Androidの両方に対応できますし、Onsen UIを使うことでネイティブアプリ風のインタラクションも実現できます。

画面をモックベースで作っていく

データの多くはmBaaSから取得することになりますが、まずHTMLを直に記述して画面と画面遷移を作っていきます。これによって動的なデータとなる部分が分かりますので、後はその部分をmBaaSに置き換えれば良いだけです。

地図はGoogleマップで

地図についてはGoogleマップを使って、画面全体に貼り付けました。カンファレンスアプリとしては、これで十分でしょう。

f:id:mbaasdevrel:20180329235055p:plain

画面構成について

今回の画面構成は次のようになります。基本はタブバーですが、セッション情報やニュース、スピーカー情報は一覧と詳細が組み合わさった画面になります。Onsen UIにはTab berがあり、画面遷移も自動で行ってくれます。それに対して一覧と詳細が組み合わさった画面ではOns navigatorを使います。

f:id:mbaasdevrel:20180329235111p:plain

タブバーの中だけでナビゲーションが完結する場合は問題ありませんが、今回問題になるのはツールバーです。ツールバーには現在、どの画面にいるのか(News/Sessionsなど)の情報が出ています。そして詳細情報に移動した時にその情報をツールバーに出しつつ、画面遷移を戻るためのリンクを追加で出したいと考えるでしょう。

タブバーで出していたツールバーを非表示にして、改めて一覧/詳細用のツールバーを出す方法もありますが、それをやると一瞬ツールバーが消えてしまいます。それによって、Webアプリ感が出てしまいます。今回はそうした挙動を避けるため、以下のような構成にしました。

  • App.vue
    アプリ全体の管理。タブバー追加。ナビゲーション管理用の変数(PageStack)の管理。
  • SpeakerNav.vue
    App.vueのタブバーから呼び出されるナビゲーション機能だけの画面。最初に Speakers.vue を呼び出す。
  • Speakers.vue
    スピーカー一覧の画面。
  • Speaker.vue
    スピーカー詳細の画面。

このようにナビゲーション管理用の変数(PageStack)をApp.vue(タブバーがある画面)で持つことによって、ナビゲーションのページ移動も管理できるようになりました。この方法はセッション、ニュースなどの画面でも使える方法です。

予定している機能について

mBaaSについては以下の情報を配信します。

  • ニュース
  • セッション情報
  • スピーカー情報
  • スポンサー情報

なお、これらの情報は日本語と英語、両方あります。

それ以外の情報については変わることはないので、アプリの中に埋め込んでしまっても良いでしょう。また、以下は相互にデータをやり取りします。

  • 認証情報(Facebook/Twitter)
  • お気に入り(セッションをお気に入り登録しておく)
  • フィードバック(セッションの感想を投稿する)

その他、アプリとして必要な機能になります。

  • オフラインキャッシュ(mBaaSのレスポンス、画像)
  • プッシュ通知
  • チケット情報(未定)

キャッシュ機能はHTML5アプリだけでは難しいので、Cordovaプラグインを使うことになるでしょう。また、認証情報もCordovaプラグインを使うことでデバイス内の情報を使えるようになります。

このアプリはできあがったら実際にリリースします。ソースコードはgoofmint/DevRelConAppにて公開されていますので、ぜひご覧ください。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。