大学の学園祭アプリをXamarin.Formsで作りました【旧ブログ】

【この記事は旧ブログから移転したものです】

電気通信大学調布祭実行委員会編集局の安蒜です。

今回は11/25〜27に開催される「第66回調布祭」のアプリをXamarinで作りました。

以下色々と書いて行きます。

なぜXamarinなのか

今回のアプリ開発はとにかく時間がありませんでした。

僕自身はアプリを作る編集局員ではあるのですが、学園祭で使う資材の管理等を行う資材局でもあり、本業は資材局の方です。

この資材局というのが結構な激務で、夏休みの一部しか時間を使えないことが事前にわかっていました。

そのような中で使ったことのないSwiftやJavaを使い、ネイティブのアプリを2つのプラットフォーム分作るというのは不可能でした。

Xamarinを選んだと言うより、この状況ではC#だけでクロスプラットフォーム開発ができるXamarinを選ぶしかなかったという方が正しいでしょう。

とにかく時間がないので、オープンソースのコンポーネントやマネージドなサービスなどをできるだけ利用し、

車輪の再発明はしない

をコンセプトに作りました。

アプリの開発を始めるときに局内で出た実装したい機能は以下の様なものがありました。

また、構成としてデータはサーバで保持し、アプリを更新している時間を待たずに、掲載情報を追加・修正できるようにしようというのも提案されました。

通常の常時公開しているアプリと異なり、調布祭期間の3日間のみ使われるアプリであることを考えると、必須とも言える機能です。

「第66回調布祭アプリ」のバックエンドは以下のようになっています。

バックエンド構成

サーバはConohaのVPSを利用。
- 普段から使っているというのもあるが、お金のない委員会には月額課金ではなく時間課金であることがとてもありがたい。
サーバのミドルウェアとしてはdocker上にオープンソースのMBaaSであるdeploydのコンテナを立て利用。
- 簡単な構成であれば手も加えず使えるため重宝した。
- 参考: オープンソースMBaaS「deployd」を使ってみる - Qiita
サーバのプロビジョニングにはAnsibleを使用。
- 忙しい調布祭中に問題が発生したときに、VPSを作り直してコマンド一つで同じ環境が作れるというのは便利。
スマートフォンへのプッシュ通知にはAWSのSNSを利用。
- プラットフォームの違いや、無効となったトークンの処理などを気にせずにプッシュ通知が実装できる。
- 料金も100万件送って1ドルなのでありがたい。

タイトルの通り、アプリはXamarin.Formsを使って実装しました。

製作は1人ですが、調布祭が近くなってからのメンテナンスは他の人がやる可能性があるため、設計・コードには読みやすさ・理解しやすさが必要でした。全体で統一された設計にするために、MVVMライブラリのPrismを導入しました。

MVVMはデータバインディングとも相まって非常に強力ですが、初めて触る人には少し難しいかもしれないので、 Prismを導入し、ある程度ルールに沿ったコードで実装できたのは、僕自身を含めてメンテナンスのしやすさにつながりました。

一番大変だったのはタイムテーブルの実装です。模擬店・展示の紹介ページなどはListViewそのままである程度行けましたが、タイムテーブル用のViewなど用意されているわけもなく、 Gridを継承した自作コントロールを作ることで対応しました。

しかし、無理にデータバインディングを利用しようとしたせいか、サーバとの通信の間、データがまだ無いため、何も表示されずに2,3秒経過する状態になってしまっていて、現在、何かいい方法がないか模索中です。 (いいアイデアがあったら教えてください)

デザインに沿ったViewの配置についてはAbsoluteLayoutを使うことでデザイン担当の希望にある程度沿ったページが作れたかなといった感じです。

ダウンロードしていただければわかると思いますが、まだまだ荒削りの段階でのリリースとなりました。

というのも、これからの約2ヶ月間で実際にいろんな方々につかっていただいて、我々では気づかないような点も含めてご指摘いただき、アップデートを続けていけたらという気持ちでリリースをしたからです。

ご協力をお願い致します。

(※現在はバックエンドを落としているためLaunchScreen以降が表示できません)

11/25〜27の3日間、電気通信大学の学園祭、「調布祭」が開催されます。

皆様のご来場、心からお待ちしております。