「診断ビューワー」の技術的な話
先日リリースした「診断ビューワー」の技術的な話です。
今回は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フレームワークを使えばできるらしいのですが.........。
Xamarin.iOSでAdMobの広告がReleaseビルドの実機環境でのみ表示されない
(追記:2016/06/03 08:36 無事に審査を通過しました)
(追記:2016/06/03 03:14 解決したのでページ下部に詳細を追記)
クロスプラットフォームでアプリを開発し、Play Storeには無事公開中なのですが、
App Storeへの申請中に「広告識別子を利用してるのに広告が貼られてないよ」とのことでリジェクトされました。
そんなはずはないと思いながら添付されたスクリーンショットを見ると確かに広告が表示されていません。
テストをしたところ、
Debug ビルド
- シミュレータ → ◯
- 実機 → ◯
Release ビルド
- シミュレータ → ◯
- 実機 → 表示されない
という結果に。
iOSから導入されたATSの設定をしたりしましたが、依然として状況は変わらず.....。
StackOverflowでも同様の症状が報告されていましたが、解決には至っていませんでした。
誰かわかる方いませんか..........
無事表示されました(追記:2016/06/03 03:14)
以下のNugetパッケージを使ってAdMobを表示していたのですが、
試しにパッケージに頼らず、Custom Rendererを使って自分でAdMob用のViewを実装したら無事表示されました!
www.nuget.org
このままApp Storeへと申請したいと思います。
WebAPIのモックアップ作りにjson-serverがすごい便利だった
現在、Xamarinを使って学祭のアプリを開発中なのですが、サーバサイドとクライアントサイドで友人と分担してて、クライアントサイド担当の私がAPIの仕様決めて友人がそれを作るみたいな感じでやってます。
何度も仕様を変更するのも悪いので、ガチガチに仕様を固めてから渡そうとローカルでAPIのモックアップを作ろうと思ったらこんなのを見つけました。
【個人メモ】JSON Serverを使って手っ取り早くWebAPIのモックアップを作る - Qiita
http://qiita.com/futoase/items/2859a60c8b240da70572
npmパッケージのjson-serverというもので、jsonファイルを元にWebAPIのモックアップを作ってくれるらしいです。
さっそく使ってみる。
インストール
ターミナルで以下のコマンドを入力して下さい。
>npm install -g json-server
npmコマンドが使える前提です。-gオプションを付けてシステムにインストールしています。
jsonファイルを用意する
初めは引用元のような下のjsonファイルを用意しました。
{ "users": [ { "id": 1, "name": "futoase" }, { "id": 2, "name": "hogehoge" } ], "limit": 100 }
すると、次のようなエラーが発生。
>json-server db.json \{^_^}/ hi! Loading db.json Done /usr/local/lib/node_modules/json-server/src/server/router/index.js:73 throw new Error(msg) ^ Error: Type of "limit" (number) in db.json is not supported. Use objects or arrays of objects. at /usr/local/lib/node_modules/json-server/src/server/router/index.js:73:11 at /usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:4389:15 at baseForOwn (/usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:2652:24) at /usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:4358:18 at Function.forEach (/usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:8561:14) at /usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:3877:28 at arrayReduce (/usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:639:21) at baseWrapperValue (/usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:3876:14) at LodashWrapper.wrapperValue (/usr/local/lib/node_modules/json-server/node_modules/lodash/lodash.js:8261:14) at LodashWrapper.<anonymous> (/usr/local/lib/node_modules/json-server/node_modules/lowdb/lib/index.js:77:19)
どうやらlimitのところでエラーが起きているようです。
原因はわからず.....。
とりあえずlimitのところを削ると無事動きました。
>json-server db.json \{^_^}/ hi! Loading db.json Done Resources http://localhost:3000/users Home http://localhost:3000 Type s + enter at any time to create a snapshot of the database
表示されているように、
http://localhost:3000/users
でユーザーの一覧を取得できるみたいです。
その他
引用元では他にもレコードの更新やスナップショットの取り方も公開されています。
まとめ
json-server、非常に便利ですね。
サーバと連携するアプリの開発が捗りそうです。