darjjeelling apps website



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

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

ic_launcher新規プロジェクト作成

それでは、アプリを作り始めましょう。

まずはXamarinを立ち上げ、初期画面で”New Solution…”を選択。
Multiplatform>App>Native>Single ViewAppを選択します。
そして、”App Name””Organazaion Identifier”を入力していきます。
今回は
1)”App Name”:mirror
2)”Organazaion Identifier”:com.darjjeelling.app.mirror
とします。1)がアプリ名、2)がアプリ識別子です。
その他はとりあえずデフォルトにしておきましょう。

スクリーンショット2-01

これでプロジェクトが新規作成されました。

さて、今から作ろうとしているアプリがこちらですが、
鏡ミラー
https://play.google.com/store/apps/details?id=com.darjjeelling.app.mirror
前回説明しましたとおりこのアプリはカメラを使います。
なので、カメラへのアクセス権の設定が必要になります。

というわけでまずはマニフェストの設定を行っていきましょう。
左側ツリーにてAndroidManifest.xmlを選択します。

スクリーンショット 2-02

そして編集画面の”Required permissions”の欄でCameraにチェックを入れます。
スクリーンショット 2-03

ついでにここで最小対応AndroidOSバージョン”Minimum Android version”を5.0に設定しておきました。
XMLの生データでみてみると、こんな感じになります。

これで設定はとりあえず終わりです。

つづいて、カメラを使うためのコードを書いていきます。

ic_launcherインカメラ動作コード

さて、鏡アプリというのは前回説明したとおり、インカメラの入力映像を画面上に表示させているわけです。
そしてそれは普通のカメラ(背面カメラ)を使う場合のコードとほぼ同じです。

そこでXamarinのサイトにあるこちらのサンプルコード
https://developer.xamarin.com/samples/monodroid/android5.0/Camera2Basic/
が使えます。これをベースに作っていきましょう。

とりあえずこのプロジェクトをダウンロードして、コード全体を読んでみてください。
実際は、この中から使う部分だけを選んで作りましたので、
最終形のコード
https://github.com/darjjeelling/mirrorapp
と見比べながら、ここからの説明を確認してみてください。

まずはアプリを起動した時に最初に表示されるメイン画面を作ります。
とはいえ、新規作成時にMainActivity.csがすでに作られています。
その中身を、上記のサンプルコードのCameraActivity.csを参考に、以下のように書き換えます。

この11行目ではMirrorFragmentクラスに描画などのView処理を任せるようにしています。
なのでMirrorFragmentクラスの定義を書くMirrorFragment.csファイルを新規に作っていきます。
(サンプルコードではCamera2BasicFragment.csに相当します)

このあたりはC#とはいえ、Android開発におけるFragmentのコード書き方ととても似ていますね。(JavaとC#は見た目雰囲気似てますね)

なおファイルの新規追加方法は簡単ですが一応説明しておきますと、

mirror.Droid上を右クリックで追加>新しいファイルを選択し、現れたウィンドウ上でFragmentを選択して、名前に”MirrorFragment”を入力して”新規”ボタンを押せばOKです。

さて、MirrorFragment.csファイルに書いていきますが、長いので最終形を見てみてください。
https://github.com/darjjeelling/mirrorapp/blob/master/Droid/MirrorFragment.cs

この後説明する余計な関数も入っていますが、

基本的にはサンプルコードを流用して、関数名などが修正されているくらいです。
また、サンプル中の写真を保存する処理関数TakePicture()あたりは今回は不要なので削っています。
でも残しておいても動きますので、そのままサンプルをコピペしていってもいいですよ。

ただ今回のミソとなるのが、背面カメラではなくイン(前面)カメラを使うようにするためのこちらのコード。

OpenCamera()関数内のmanager.GetCameraIdList()[1];の部分です。

サンプルコードでは”manager.GetCameraIdList()[0];”となっています。
この[0]が背面カメラ、[1]がインカメラを指しています。なのでこのアプリでは[1]の方を指定してやるようにします。これでインカメラが起動するようになります。

あとは、サンプルコードにあるAutoFitTextureView.csファイルとResourcesフォルダ下にactivity_camera.xmlを、そのまま持ってきます。
さらに、fragment_camera2_basic.xmlをfragment_mirror.xmlに名称変更して持っていきます。
こんな感じでサンプルコードと合わせつつ、クラス名ファイル名などの整合性を取りつつ、ビルドを通してみてください。
実機で起動するとインカメラがリアルタイム表示される状態になれば成功です!

ic_launcher縦方向固定

ところで、鏡として使うアプリとしては端末が回転したときでも、それに画面表示が追従しない方が見やすいですよね。
なので縦方向に固定するように設定しましょう。

で、その方法なんですがXamarinではMainActivity.csのクラス宣言の頭にこのようにScreenOrientation = Android.Content.PM.ScreenOrientation.Portraitを追加するのが、正しいやり方のようです。

ちなみにこの方法にたどり着くまでにだいぶ時間かかってしまいました。
Androidの開発であればAndroidManifest.xmlに記述するもんなのですが。。。それにXamarinでもさっき、カメラのパーミッションでマニフェストファイル直接いじってたよね?!
だからそこにに書けばいいと思ったんですが、なぜか全く反映されずに悩みまくり。。。
どうやらXamarin開発ではマニフェストファイルに書かずに、この部分で指定するというのがデフォルトのやり方のようです。

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


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。