darjjeelling apps website


Xamarin Studio for Macでアプリを作ってストア公開してみた5

(2016/9)
(この記事は、Xamarin for Macでアプリを作ってストア公開してみた4 のつづき。最終回です)

ic_launcherテスト

さて、前回までで鏡アプリとして作りたい機能の実装はすべてできました。
これでバンザーイ!終了!!♪(=゚ω゚)ノと言いたいところですが、まだまだやることは残っています。
まずは、テストですね。

一般にはテストコードを書いて実行、といくかと思いますが、このアプリではカメラを使った機能がほぼすべてですので、すべて手動で動作チェックします。
#テストコードの書き方の解説を期待してた方はすみません。

テストの内容としては、
・ボタンを押して左右反転が切り替わるか?
・ボタンを押して明るさ、ズームが変化するか?
・タップして画面が停止するか、もう一度タップして再開するか?
と、これまで実装してきた通りに動作しているか実機を使ってテストしましょう。

ちなみに、クラウド上で数百台の端末でテストできる環境もXamarinには用意されているみたいですね
有償ですが試すのもいいかもしれません
Xamarin Test Cloud
https://www.xlsoft.com/jp/products/xamarin/test-cloud.html
https://www.xlsoft.com/jp/products/xamarin/introduction-to-test-cloud.html

ic_launcherGoogle Playストア公開

さてテストが終わったら、Google Playストアへの公開の手続きのための準備をしていきます。
やり方は、、、、こちら!

https://www.xlsoft.com/jp/products/xamarin/publish_android.html

こちらが詳しくてわかりやすいです。
よく読んでその通りやりましょう!!

以上。(笑)

とまた他人任せですが、少しトピック的に追加話をしてみます。
でも、上のページもちゃんと読んでくださいね(笑

アイコンの準備

さて、このミラーアプリではアイコン画像としてこんなのを用意しました。
icon_main_60@3x

(ちなみに鏡の反射する様子をデザインしてます。ま、何でもいいですが)
ファイル名は”ic_launcher”です。これをアプリに反映させるためには、
MainActivity.csの宣言部分に「Icon=”@mipmap/ic_launcher”」という形で加えてあげます。

[Activity(Label = “@string/app_name”, MainLauncher = true, Icon = “@mipmap/ic_launcher”, ScreenOrientation = Android.Content.PM.ScreenOrientation.Portrait)]

また、アプリのアイコンは各種サイズ用意が必要になりますが、これが以外と面倒くさいですよね。
そんな際にちょっとオススメなのがこちらのWebサービス
https://makeappicon.com/

ここに大元の大きめな画像を加えてやると、Androidで必要なサイズの画像ファイル一覧を自動生成してくれます。それをダウンロードできます。
結果はこんな感じです。

スクリーンショット 2016-09-20 22.32.02111.png

とても楽ですので、もしよかったら試してみてください。

ストア公開ファイル作成

GooglePlayストアに公開するファイルを作るために、まずはキーストアの生成をします。
ターミナル上でコマンド実行でできますね。

$ keytool -genkey -v -keystore .keystore -alias -keyalg RSA -keysize 2048 -validity 10000

パスワードを設定したりしますが、詳しいやり方は先ほどのページをご覧ください。
キーストアができたら、XamarinStudioのプロジェクトオプションの中で指定してあげます。
それがこちら。
スクリーンショット 2016-09-20 22.34.36.png

各所に入力してください。そのあとビルド>アーカイブを実行すればOKです。

ちなみに、
ここの設定にパスワードとか書いておくと、プロジェクトファイル(mirror.Droid.csproj)の中に、パスワードがそのまま平文テキストで保存されちゃってるよ〜おいおい!
(ここに平文が入っている)

<AndroidSigningStorePass>(ここに平文が入っている)</AndroidSigningStorePass>

この仕様はやめてほしいですね。
せめて暗号化これ気づかずに間違えてGitHubにアップしちゃったらどうするんですか。

ま、ともかくもアーカイブができれば、あとはそのファイルをアップロードするのみです。

XamarinStudioを使って送信できるようですが、
なんとなく心配だったのでAPKファイルを直接Google Play Developer Consoleからアップしました。
こちらも参照です。
https://support.google.com/googleplay/android-developer/answer/113469?hl=ja

ファイルのアップロードが終われば、今度こそバンザーイ!終了!!♪(=゚ω゚)ノ

お疲れさまでした。

ic_launcherおわりに

これまで5回にわたってXamarin Studioのセットアップから、Xamarinを使った実装、ストア公開まで解説してきました。
めでたくこれで終了です!
ここまで読んでくださったみなさん、ありがとうございました。

最後にXamarin Studioを使ってアプリを作ってみた感想をいくつか述べたいと思います。

まず、Xamarinを使うにせよAndroidアプリ開発の知識は必要、という感じです。
ActivityやResourcesなどAndroidの基本的な事を知らないでXamarin開発しても、つまづいた時にすぐお手上げになります。
ネット上にあるXamarin開発の情報もまだ十分な感じはしませんでしたし、Android開発のページから情報を読み取る必要が出てくると思います。

また、今回はiOSは作りませんでしたが、これも同様にiOS開発の基本を知っておく必要があるのではないかと思います。
そう考えると、「なんだ全部知識必要なのかい!それに加えてXamarinも覚えて大変なだけじゃん!」という感じですが(笑)、
良い点としては、Android/iOSアプリを同じ言語C#でメンテできることですかね。
また、Android/iOSで共通コード部分が多くできれば、これもまたメンテが楽になって嬉しいですね。

あとアプリの動作スピードは問題ないレベルなのでは、と思いました。
とあっさり言ってみましたが、昔PhoneGapで作ったアプリのあの遅さを思い出すと、Xamarinは本当にすごいですね。驚くべき開発ツールだと思います。(今はあちらも改善されているのかもしれませんが)

Xamarinは今年、無料化されたツールということもあって、まだネット上に出ている情報も限られている感じがしますが、
記事も増えてきてこれから本格普及するのかも、という感覚がしています。
#この記事もみなさんの何かのお役に立てれば幸いです。

長くなりましたがあらためて、これまで読んでくださりありがとうございました。
Xamarin Studio for Macを使ってアプリ開発楽しみましょう。
それでは、さようなら!

<この記事で作ったアプリ>
鏡ミラー
https://play.google.com/store/apps/details?id=com.darjjeelling.app.mirror
Get it on Google Play

<アプリのソース>
https://github.com/darjjeelling/mirrorapp

<記事一覧>
Xamarin Studio for Macでアプリを作ってストア公開してみた
Xamarin Studio for Macでアプリを作ってストア公開してみた2
Xamarin Studio for Macでアプリを作ってストア公開してみた3
Xamarin Studio for Macでアプリを作ってストア公開してみた4
Xamarin Studio for Macでアプリを作ってストア公開してみた5


新アプリ「線画風カメラ2+」登場

%e7%b7%9a%e7%94%bb%e9%a2%a8%e3%82%ab%e3%83%a1%e3%83%a92

線画風カメラをご利用のみなさん。
長い間ありがとうございます。

このたび「線画風カメラ+」の続編(というよりほぼ置き換え?)として、「線画風カメラ2+」を新たにご用意いたしました。

「線画風カメラ2+」
https://itunes.apple.com/jp/app/id1158880481?mt=8

機能はほとんど「線画風カメラ+」と同じですが、ちょっと違いがあります。

☆より大きい写真サイズに対応。最大3264×3264まで扱えます
☆元の画像を絵画風にして線画と重ね合せられるようになりました
☆処理スピードが上がりました などなど

こんな感じの絵が作れます。

アイコンのイメージも変更、線画の処理アルゴリズムもちょっと変更してます。
そのせいかこれまでとまた一味違った感じにもなってるかもしれません。
もしよければ使ってください!

なおこれを機に旧作「線画風カメラ+」の方は値下げいたしました。

では、これから線画風カメラ2+をよろしくお願いいたします。

フォローチェック for Twitter


フォローチェックiPhone版アップデートv9.5.2

Icon-App-60x60@3x

フォローチェックのご利用誠にありがとうございます。
このたびiPhone版でVer9.5.2のアップデートが公開されました。

今回は、iOS10対応や公式ムービーへのリンク追加などの小さな修正となっております。

それでは、よろしくお願いします。

フォローチェック for Twitter


セピアカラー(sepia+color) ver.3.0公開

%e3%82%bb%e3%83%92%e3%82%9a%e3%82%a2%e3%82%ab%e3%83%a9%e3%83%bc

お久しぶりです、セピアカラーをご利用のみなさん。
いつもありがとうございます。

このたびアップデートが公開されましたので、お知らせいたします。

今回からアイコンを少し変更しました。
またiOS10対応を行いました。
なお今回からiOS7以降に対応とさせていただきます。

だいぶ放置してしまっていましたが、これを機にまたセピアカラーを使っていただけると幸いです。

これからも、よろしくお願いいたします!

darjjeelling - View my 'sepia+color' set on Flickriver

sepia+color


Xamarin Studio for Macでアプリを作ってストア公開してみた4

(2016/9)
(この記事は、Xamarin for Macでアプリを作ってストア公開してみた3 のつづきです)

ic_launcher明るさ変更機能の追加

前回ではズーム表示の機能を作りましたが、今回は画面の明るさを変更できる機能を追加してみましょう。

と、説明に入る前にいきなり余談ですが。
実はここは最大の鬼門でした。この機能をどうコーディングするかが分からずに1日くらい無駄にしてしまいました。

Androidでスマホの画面の明るさを指定するには、こんな感じで書けばいいですよね。

LayoutParameterクラスnewしてscreenBrightnessに好きな明るさの値を入れて、あとはgetWindow()でとったWindowにセットしてやります。

なので、これに対応するAPIを公式ドキュメントで探してみるわけです。
Android/iOS API互換100%をうたうXamarinですから、あるはずですよ!
そして近いのを見つけました。
これ↓
https://developer.xamarin.com/api/type/Android.Views.WindowManagerLayoutParams/
このWindowManagerLayoutParamsを使ってgetWindow()に対して指定してやればいいはず。
が、しかし、、、

getWindow()に対応するAPIがない!( ;´Д`)

なんじゃこりゃあ?絶対あるはずだ〜?でも検索に引っかからない、サンプルコードにもないし!?
もうパニックになりつつ迷って、これは誰かに聞くしかないか。と思った瞬間、フォーラムを探すのを忘れていたことに気づきました。
そしたら案の定、同じく悩んでた人がいるじゃないですか。

答えはバッチリここにありました。。。
http://forums.xamarin.com/discussion/comment/144246#Comment_144246

これをもとに書いた明るさを変えるコードがこちら。

うーん、言われてみれば、ActivityのWindowにSetAttributeって自然な流れのようにも見えますが。。。Androidの流儀とは全く違いますよねえ。Androidをもとに探してたらわかりませんよ。

Xamarinの罠にかかった、と思った瞬間でした。。。

さて、前置き長くなりましたが、さっきのChangeBrightness()を画面の明るさを変えるためのメソッドとして作り、これを画面上のボタンを押すたびに呼ばれるようにしていきましょう。
ボタンは例によって「+」「−」の二つを後で用意しますので、それぞれ押すと呼ぶ関数をここで作っておきます。
それがこちらです。

Lighten()が明るくするボタンを押された時に呼ぶ、Darken()は逆です。それぞれの関数内で先ほどのChangeBrightness()を呼んでますよね。これらのメソッドはMirrorFragmentクラス内に作ります。

さて、説明をスルーしてきましたが、MirrorControllerクラスに明るさ値を変更し、それを読み出せるようなメソッドを作っておきます。それを呼んでいるコードが上記に出てくる、
MirrorController.GetInstance().GetBrightness();
MirrorController.GetInstance().Lighten();
MirrorController.GetInstance().Darken();
なのです。
中身も一応見ておきましょう。MirrorController.csファイルを見てください。

明るさ値を保存する変数mBrightnessを用意して、1から5の範囲で値が変えられるようにします。GetBrightness()で返す値は、0〜1.0の値にするため5で割っています。

以上でメソッドの準備は終わり。
続いてfragment_mirror.xmlをいじって、ボタンを画面上に追加しましょう。
これは、前回のズームボタンとやり方は同じです。もう分かりますよね。

こちらのXMLファイルを見てみてください。
https://github.com/darjjeelling/mirrorapp/blob/master/Droid/Resources/layout/fragment_mirror.xml
これで、こんな画面イメージになります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-08-27-19-16-47

そして、ボタンを押された時に先のLighten()/Darken()を呼ぶよう、MirrorController.csのOnClick()のSwitch文に追加すればOKです。

あとはボタンのリスナー登録もお忘れなく。
ここまで出来れば明るさ変更機能の完成です。

ic_launcherタップでストップ」機能の追加

さて、鏡アプリによくある機能でもうひとつ。それは、

画面を一時停止する機能。

使ったことありませんか?
横顔とか、後ろ髪とか、ふつうの鏡使っても自分の目でなかなか見えない場所。スマホをその辺りに向けて画面タップして一時停止してあげます。そのあと画面を見れば、見えない場所も自分で確認できるというものです。
まあ、簡易的なカメラ機能ですね。
これが、「タップでストップ」機能です。

それでは、画面をタップした時に一時停止を行えるようにしましょう。
まずは画面をタップしたことを検知するリスナーの登録。MirrorFragment.csに以下のように書きます。

View.IOnTouchListenerをクラス宣言に追加して、OnTouch()リスナー内に呼び出しコードを書きます。
ここではStopCapture()を呼ぶようにしています(8行目)
そのメソッドの中で画面を一時停止しますが、このように書きます。

7行目のmPreviewSession.StopRepeating();が肝です。
mPreviewSession変数はCameraCaptureSessionクラスで、これはカメラから流れてくる映像ストリーミングの制御するためのクラスです。
ミラー機能を実現するために、ふだんは前面カメラからリアルタイムに流れるストリーミングは垂れ流しで画面上に表示され続けます。この表示を開始するのがSetRepeatingRequest()メソッド。
これをMirrorFragmentクラスのUpdatePreview()内で呼んでいました。
ですが、今回は逆にこれを止めたい。
そのためのメソッドがStopRepeating()です。

上記のコードでは4行目でStopRepeating()つまり一時停止、と、表示の再開、つまりSetRepeatingRequest()もといUpdatePreview()を切り替えています。

そのフラグ切り替えのためのコードは例によってMirrorContorollerクラス内に作ります。

これで、画面をタップするたびに画面上の映像が止まったり再開したりする、「タップでストップ」機能が出来上がりました。

ic_launcher情報画面の追加

さて、ここまでで鏡アプリとして作っておきたい機能は作り終わりました!
ですが、最後に情報画面を追加してみましょう。
いわゆるPreferenceです。

Androidと同様に、以下の場所にXMLファイルを生成します。
Resources/Xml/preferences.xml

スクリーンショット 4-1.png

この中に、アプリのバージョン情報やサポートリンクなどを書きます。
さらに、このXML定義を使って画面を作るActivityクラスファイル(SettingsActivity.cs)も用意します。
この方法はAndroidで作る時と同様ですので解説を省きます。
出来上がりはこちらの2つのファイルです。
https://github.com/darjjeelling/mirrorapp/blob/master/Droid/Resources/Xml/preferences.xml
https://github.com/darjjeelling/mirrorapp/blob/master/Droid/SettingsActivity.cs

あと、情報画面を開くためのボタンを追加します。
それが、Resources/layout/fragment_mirror.xml内の以下の部分です。

画面の右上に出るようにレイアウトしています。
ボタン画像ファイルはmipmap-xhdpi/settings.pngを用意しました。

そして、ボタンを押された時に情報画面を表示するためのコードは、いつもの場所、MirrorFragmentクラス内のOnClick()に追加しましょう。

以上の手順を終えたら、画面右上のボタンを押して、情報画面が開くようになっていることを確認してみてください。

ic_launcher日本語化

ところで、これまでアプリ名やらToast表示やらは全部、英語表記のままでした。
これを日本語化しておきましょう。

やり方は、Resources/valuesフォルダと同列に、Resources/values-jaフォルダを作り、そこにStrings.xmlを作って日本語定義を書いてやります。
#これもAndroid開発の場合と同じですね。

こんな感じです。
https://github.com/darjjeelling/mirrorapp/blob/master/Droid/Resources/values-ja/Strings.xml

ic_launcherこれでおわり?

さてさて、ここまでおつかれさまでした。
これで鏡アプリとして作りたい機能はできました。めでたくアプリが完成!
、、、と言いたいところですが、まだやることは残っています。よね。

ともあれ今回はここまで。
つづきは次回最終回にて!

<この記事で作るアプリ>
鏡ミラー
https://play.google.com/store/apps/details?id=com.darjjeelling.app.mirror
Get it on Google Play

<アプリのソース>
https://github.com/darjjeelling/mirrorapp

<記事一覧>
Xamarin Studio for Macでアプリを作ってストア公開してみた
Xamarin Studio for Macでアプリを作ってストア公開してみた2
Xamarin Studio for Macでアプリを作ってストア公開してみた3
Xamarin Studio for Macでアプリを作ってストア公開してみた4
Xamarin Studio for Macでアプリを作ってストア公開してみた5


フォローチェックiPhone版 新バージョン9.5.1登場

Icon-App-60x60@3x

いつもフォローチェックのご利用誠にありがとうございます。

このたび新バージョン(9.5.1)が登場しましたのでおしらせします。

今回のバージョンはマイナーバージョンアップで、いくつかのバグ修正が含まれています。

・今日のレポートの表示修正
・オート de DM(設定より)の広告変更
・その他バグ修正

これからもよろしくお願いします!!

フォローチェック for Twitter