窓を作っては壊していた人のブログ

この謎のブログタイトルの由来を知るものはもういないだろう

東北大学祭アプリをXamarin.Formsで作ってみた

タイトルの通り,第68回 東北大学祭 の公式アプリケーションをXamarin.Formsで作ってみました.

以下リンク

アプリ紹介ページ

東北大学祭公式アプリ - Google Play の Android アプリ

東北大学祭公式アプリを App Store で

↑ダウンロードはこちらから

開発までの背景と,バックエンドの技術,関連技術などを備忘録,また開発の一例として紹介できればと思います.

他大学さんも同じことしてたんだなぁと知った -> 大学の学園祭アプリをXamarin.Formsで作りました - andooownの開発ブログ(andwares)

ある程度書き溜めていたけどここまで構成とか似るとは誰が予想したであろうか...

開発までのお話

私はもともと SmartCampus | 電気情報物理工学科 オープンキャンパスネット のアプリケーション開発チームに所属していました. 偶然このオープンキャンパス期間中に東北大学祭のスタッフが足を運んで,また SmartCampusアプリケーションを使ってくださったことがあり,そこから開発などの要請をいただき開発を行うことになりました.

開発までの検討

今回3人チームで開発を行いました.主にはアプリケーションが2人,バックエンドが1人という構成です.私たちはSmartCampusで構築したベースがもともとあったので,それを流用すれば結構簡単に出来てしまうのではないだろうかとも考えたのですが,アプリケーションサイドに少し懸念事項がありました.

というのもSmartCampusではネイティブのほかにもブラウザをサポートしなくてはならなかったため,ハイブリッドアプリケーションのフレームワークとしてCordova+Angular2+ionic2を採用していました. RC版時代に作成していたのでRC版でありながらバグやバージョンが上がると破壊的変更が入って,書き直すorパッチをあてるという作業が度々見受けられました.またネイティブ機能を使うためのプラグインに関してもOSSのものを探しても自分たちの用途に合ったものが見つからなかったり,修正するにしてもAndroidであればJavaiOSであればObjective-Cで変更を加えなくてはならず,今後もサポートしていくことになるとコストが非常に高くなってしまうという問題がありました.

そこで基本的には C#を使うことでAndroid / iOSのサポートができるフレームワークであるXamarin に白羽の矢が立ったわけです.基本コンポーネントは一通り揃っているので,修士と博士しかいない非常に忙しいチームであっても低コスト,短期間で開発を行えそうと考えたのも1つの要因です.

開発にかける思い

基本的にはこういった展示物を扱うアプリケーションはいわゆるカタログアプリになりがちですが,東北大学の学生は研究以外の分野でも頑張っているんだぞ!と言う面も見せたいとの要望があり(私たちもクオリティを上げたいと思っていたのもあり),様々な技術に触れてさらにユーザに楽しんでいただけるアプリケーションにしようと考えました(時間がないと言っていたのに技術への欲求が抑えられない学生たちだった).

開発においての要件

当初予定されていた機能としては

  • 模擬店や展示のリストが見れる
  • ステージイベントはタイムテーブル形式,また日付ごとに確認可能
  • 外部から来られた方,また内部生も場所がわからないのでマップ機能
  • 任意のタイミングでのお知らせとなるPush通知

といったものが挙げられました.上3つはSmartCampusなどでも採用されている機能でしたが,Push通知などについては初めてでした.またオープンキャンパスは基本的にスケジュールが変わることがなく,オフラインでも使えることが重視されたためローカルにDBを持つという形式でした.

しかし学祭は流動的で常に何かしら伝えたいことが出てきます.そこで今回はサーバとクライアントに同一の構造を持ったDBを持ち,即座にサーバからの変更を反映できる形式にする必要がありました.

動きの激しいイベントだと以上の点が最低限担保されることが必要でしょう.

実際についた機能

  • 模擬店や展示のリストが見れる
  • ステージイベントはタイムテーブル形式,また日付ごとに確認可能
  • 外部から来られた方,また内部生も場所がわからないのでマップ機能
  • 任意のタイミングでのお知らせとなるPush通知 に加えて,
  • 利用者の展示アクセス解析
  • アプリ利用者参加型のタイムライン機能/リアクション機能

などが加わりました.この機能を実現するためのテクノロジを以下で紹介いたします.

使用したテクノロジ

バックエンド

簡単なデータの流れを以下の図に示します. f:id:yamachu_co:20161014121219p:plain

今回は学祭ページでも使っている(?)さくらのVPSを利用しました.

またアプリケーションとの連携をするためのアプリケーションはDocker上にPythonDjangoを採用しました.サーバーを担当した方が使い慣れていた&Djangoフレームワークを少し勉強すれば他の人でも再利用可能という点も非常に優れているかと思います. ここでのチャレンジポイントとしてはDjangoに公式採用されたWebSocketのAPIを利用しているという点かと思います.

Channels adopted as an official Django project | Weblog | Django

リアルタイムに利用者と交流しあえる場としてWebSocketなどの技術が不可欠と考えたため,この挑戦は非常に有意義なものであったと思います.

リアルタイム通知にはFirebaseを利用しました.基本的には無料でPush通知などが扱えるため,非常に経済的で,管理コンソールを利用すればNotificationの管理やテストが簡単に行えるという点もありデバッグ時には非常に有用でした.

ここまでは当日のアプリケーションとの流れに関連する部分ですが,このバックエンドのでは運営者および出展者向けの登録フォームや管理フォームなどなども実装し,他のサービスにも転用しやすいような設計となりました.また利用者アンケートや時間ごとの登録者数など,今後の開発に役に立つ,また学祭の運営に役に立つ情報も視覚化する仕組みも導入しています.f:id:yamachu_co:20161014210237p:plain

いかにも理系学生が作ったというようなサービス...

アプリケーション(フロントエンド?)

前述したように今回はクロスプラットフォームフレームワークとしてXamarin.Formsを採用しました.(ほぼ)シングルソースでAndroid / iOSをサポートできるのは非常に強力で工期を大幅に削減することができたと思っています.

データベースにはRealmを使用しました.RealmはXamarinの対応がされていること,エンティティを用意しJSONマッピングしたクラスをシリアライズして格納できる,またDBの操作に使用するクエリがLINQで発行できるからです.

クエリがLINQで発行できるからです

クエリがLINQで発行できるからです

大事なことなので3度言いました.本アプリケーションは展示を見る機能のほか付加機能として展示などの全文検索機能やお気に入り機能なども搭載されています. そこでLINQのように簡単にコレクションを操作することが出来る機能が非常に求められていました. またデータベースの操作は非常にコストが大きいため,初回起動時のアンケートなどを修正する時点で更新を行ったり,また差分のみを更新するといった実装を行いユーザビリティを損ねない実装も工夫した点と言えるかと思います.

あとは通知機能にFirebaseを利用したということでしょうか. 前の記事 でも取り上げたように,iOSの方はまだnugetに公開されていなかった&ドキュメントがなかった時代に挑戦したのではまりポイントが多かったですが,ユーザの利用状況も統計が取れることもあり,今後も採用していきたいなと思っています.

実装面ではMVVMを強く意識し,各レイヤーの依存度を極力なくし,イベントベースで連携を取るように実装をこないました.ですがどのモデルが通知していたっけ,ここでのコレクションはどのタイミングでの更新?などデバッグ時に苦労したこともありました.

実装などでの苦労

確かにXamarin.FormsはViewの統一をはかることが出来る点で優れていました. しかし実際ネイティブのコントロールをラップしているため,もともとのAndroidのViewとiOSのViewの公約数をとったものの機能しか備えていない&もともとのViewの見え方はネイティブに依存しているという点があります.

そのため今回の開発ではDeviceごとに使用するPageを変えることがあったり,CustomRendererを何度か使うことになりました. 本当にViewをこだわるのであれば,ネイティブの知識がやはり不可欠であると感じました(C# だけで書けるから非常にコストは低いが/ 基本的にはC# だからコピペができないというデメリットもある).

またXamarinを使う上でこれは仕様なのか,それともバグなのか,解決策はあるのか,など調べることに苦労することが多かったと感じています.Xamarinのフォーラムだったり,Bugzillaを見たり,また利用しているライブラリのIssueを確認したりなどなど...

今はまだユーザが試行錯誤して最適解を探っていく段階を完全には抜け切れていないのかなと思います. 共通化できると言っても,やはりネイティブのことも知らなくては出来ることも限られています. 頑張る人,頑張れる人のためのクロスプラットフォーム環境だなという印象を受けました(楽しいですけどね). 現在Xamarinの利用者がどんどん増えているので,多くの人がいろんな解決策を探り,よりよりフレームワークになっていくといいですね.

Xamarinは(他のクロスプラットフォーム開発のフレームワークの中で比較的)いいぞ

おわりに

アプリケーションのガワであったり,サーバアプリケーションは私たちデベロッパが手を入れる部分ですが,これは大学祭のアプリケーションのためコンテンツの拡充のため運営委員の方だったり,展示を行う人がどんどんデータを入れていただくことでベースが完成し,実際に大学祭に来てくださる方が使っていただいてタイムラインなどが活性化します.

多くのユーザの方に触って,またフィードバックがいただけたらと思います.

10月28〜30日,第68回 東北大学祭〜創造しくってごめんなさい。〜 ぜひお越しください.