2017-03-10

「診断ビューアー」をアップデートしました

自作アプリ「診断ビューアー」をバージョン2.0.2にアップデートしました。

アップデート内容

2.0.2

診断の読み込みを分割して行うように変更
動作速度の改善
不具合の修正

ダウンロード

2017-03-03

「診断ビューアー」をアップデートしました

iOS Android Xamarin 自作アプリ/Webサービス

自作アプリ「診断ビューアー」をバージョン2.0.0にアップデート、その後、小さな機能追加をしたバージョン2.0.1にアップデートしました。

アップデート内容

2.0.0

UIの大幅な変更
新着・月別・日別・総合ランキングの表示の追加
140文字以上の診断結果の表示に対応
画像・チャート系診断の結果表示に対応

2.0.1

通報機能・フィルタリング機能の追加
不具合の修正

ダウンロード

2016-10-05

大学の学園祭アプリをXamarin.Formsで作りました

Xamarin Android iOS

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

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

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

なぜXamarinなのか

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

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

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

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

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

コンセプト

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

車輪の再発明はしない

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

機能

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

模擬店や展示の紹介
ステージや講堂でのイベントのタイムテーブルと通知機能
学内のマップ機能

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

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

バックエンドについて

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

f:id:andooown:20161003005619p:plain

サーバは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ヶ月間で実際にいろんな方々につかっていただいて、我々では気づかないような点も含めてご指摘いただき、アップデートを続けていけたらという気持ちでリリースをしたからです。

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

ダウンロード

第66回調布祭アプリ
- iOS版
- Android版

最後に

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

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

2016-08-15

「診断ビューアー」をアップデートしました

iOS Xamarin Android 自作アプリ/Webサービス

自作アプリ「診断ビューワー」をバージョン1.0.2にアップデートしました。

アップデート内容

アイコンを修正しました。
- 「診」の文字を中央へ
一部の診断について、診断時にクラッシュする不具合を修正しました。
- 特定の診断が別のURLへリダイレクトされていることが原因のバグでした。
- エラー時はURLを変えてリトライすることで回避しました。
診断検索画面の余白を除去しました。
- StackLayoutのSpacingを設定していないことが原因でした。

ダウンロード

2016-06-03

「診断ビューワー」の技術的な話

Xamarin iOS Android 自作アプリ/Webサービス

先日リリースした「診断ビューワー」の技術的な話です。

今回はXamarinでとりあえずなにか作ってみようということで軽めに1本作りました。

しかし、いろいろ調べながら作っていたため、技術的にはかなり大きな収穫があったと思います。

iOSとAndroidの見た目の違い

Xamarin.Formsでクロスプラットフォーム開発をして、いざiOSとAndroidでビルドして動かしてみると、その見た目の違いがかなり気になります。

というのも標準ではiOSは白背景、Androidは黒背景でコントロールもその色をベースに作られているので、Xamarin.Formsでコードを共通化しても、見た目が全然違います。

これは、Android側を白ベースにしてiOSに近づけることで解決しました。

具体的には、ソリューション内のAndroidプロジェクトの中にあるMainActivity.csの以下のように変更しました。

[Activity(Label = "診断ビューアー",
 Icon = "@drawable/icon",
 MainLauncher = true,
 ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation,
 Theme = "@android:style/Theme.Holo.Light")]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity {
    protected override void OnCreate(Bundle bundle) {
        ...
    }
}

MainActivityクラスの属性の

Theme = "@android:style/Theme.Holo.Light"

が今回変更したところです。
これでAndroidアプリが白ベースになります。

非同期処理について

ただの知識不足だったんですが、Commandにasync/awaitが使えることがわかったので、
できるところはすべて非同期処理に書き換えて、UIをブロックしないようにしました。

new Command(async () => {
    await Task.Run(() => /*時間のかかる処理*/);
};

このように書くことで既存の同期処理を非同期処理に書き換えることができます。

シングルトンなModel

今回はXamarinに慣れる意味もあって、極力MVVMパターンを守りました。
そんななかで設計上インスタンスが何個もあるとまずいModelがありました。
最初はstaticなクラスにしようと思ったのですが、
何となく気持ち悪かったのでteratailで質問したところ無事解決することができました。
teratail.com
(なんとC#とSQL Serverカテゴリで1位の方々に答えていただきました！)

MVVMにおいて共有インスタンスはシングルトン化するのが一般的だと思います。

とのことなので、シングルトンにて実装しました。

ObservableCollectionの更新処理

ViewModelのObservableCollectionをViewにバインドしているのですが、
データの更新処理でデータをすべて書き換えるときに最初は、

void UpdateData() {
    // ObservableCollection を初期化
    this._items = new ObservableCollection<Model>();

    // 更新処理
    foreach (var d in GetDate()) {
        this._item.Add(d);
    }
}

このようにしていたのですが、インスタンスを初期化してしまうとバインドが切れてしまう(？)ようでうまく動きませんでした。
そこで以下のようにしたところうまくいきました。

void UpdateData() {
    // ObservableCollection をクリア
    this._items.Clear();

    // 更新処理
    foreach (var d in GetDate()) {
        this._item.Add(d);
    }
}

インスタンスを初期化せずに要素を全部消して、その上で一から追加していく方法です。
確かによくよく考えれば当たり前な気もしますが....

まとめ

他にも様々な発見がありましたが、ブログに載せるのはこれぐらいにしたいと思います。
また今回はViewからの画面遷移になってしまったので、
MVVMに忠実にViewModelからViewModelへの遷移を実装できたらと思います。
PrismというMVVMフレームワークを使えばできるらしいのですが.........。