WebプログラマがAndroidアプリ開発をやってみた / infra_workshop_20180902

Transcript

1. 【ITエンジニア向け】 Webプログラマが Androidアプリ開発をやってみた【1 から始める】 － 2018/09/02 インフラ勉強会 － Twitter:@FORTEgp0
2. 名前：FORTE(フォルテ) Twitter：@FORTEgp05 9月からスマホアプリ開発会社に、 未経験で転職した現Webプログラマです。 趣味：ゲーム(直近はMarvel's SPIDER-MAN購入予定)、 ネトゲ(DQ10、FF14(Tiamat))、スパロボ、ガンダム、ミステリ、SF、ガンプラ、 ミニ四駆(来週レース予定)、電子工作(ニキシー管時計)、ボドゲ(カタン好き)、 お酒(ビール、果実酒好き)、ニコニコ動画(ゆっくり実況動画UP) 自己紹介
3. スキル その他(業務経験あり言語)： C/C++、Perl、basic、Tcl/Tk、VB、AS3など…
4. アジェンダ ・注意事項 ・お勉強の目的 ・Androidアプリの基本 ・MVVMについて ・今回開発したアプリ(Desire Manager)の概要 ・開発時にハマったこと ・リリース(オープンβ版)のやり方 ・感想 ・終わりに
5. 注意！ あくまで個人的にお勉強した結果の共有になります。 そのため、この資料内の情報を活用する際は内容の正誤に気を つけてご利用ください。 なお私が勉強に用いた資料はすべてインターネットの情報か、私 が経験した内容になります。 なるべく出典は明示するように致します。 (出典はこのように青字下線でリンクを貼るようにします)
6. お勉強の目的 Sier(Web系業務sys) Web系 (BtoC) スマホアプリ開 発(BtoC) 2007年入社 2016年転職 2018年9月 未経験で転職 未経験で転職するから勉強しよう！
7. 開発環境 開発環境のバージョンは以下の通りです。 Windows 10 HOME Version 1803, OS build 17134.228 Android Studio Version 3.1.4 出典：Android Studioのダウンロード 出典：公式のインストール方法(Mac含)
8. Androidアプリの基本 .apk ファイル インストール
9. Androidアプリの基本　インストール方法 .apk ファイル 自作 例：フォートナイト 検索してダウンロード 公式サイトから 直接ダウンロード 自作してUSBケーブルでイ ンストール
10. Androidアプリの基本 公式ドキュメントから個人的に重要と思う部分を抜粋。 ・AndroidはLinuxシステムで動作している。 ・Androidアプリは基本的にJava言語で記述される。 ・Android は各アプリのいずれかのコンポーネントを実行する必要 があるときプロセスを開始し、 それが必要なくなったときなどにプロセスをシャットダウンします。 出典：公式ドキュメント アプリケーションの基礎
11. Androidアプリの基本　開発環境 アンドロイドスタジオ (公式) インテリJアイディア (非公式だがAndroidStudioのベースらしい) その他 eclipseやVS Codeでも可能らしいが、 プラグインが必要と思われる。 出典：統合開発環境（IDE）はどれを使えば善いか？（独断と偏見の遥か彼方）#Android開発向け 今回はAndroidStudioを使用して開発しました
12. .apk ファイル Androidアプリの基本　主なファイル XAML(ザムル) (.xmlファイル) Java (.javaファイル) 見た目を管理するファイル 見た目”以外”を管理するファイル その他(画像とか設定とか)
13. Androidアプリの基本 XAML (.xmlファイル) 見た目を管理するファイル 実際の開発画面(抜粋)
14. Androidアプリの基本 XAML (.xmlファイル) 見た目を管理するファイル その他(画像とか設定とか) 実際の開発画面(抜粋)
15. 設計方針について(MVVMの説明) ソフトウェア開発の世界では、 ソフトウェアアーキテクチャという設計方針のようなものがありま す。 AndroidアプリではMVVMという考え方があるので、 次のページからMVVMについて説明していきます。
16. MVVMについて 今回開発に用いた「ソフトウェアアーキテクチャパターン」は MVVM(Model View ViewModel)パターンの一種です。 ソフトウェアアーキテクチャ（Software Architecture）は、ソフトウェアコ ンポーネント、それらの外部特性、またそれらの相互関係から構成され る。また、この用語はシステムのソフトウェアアーキテクチャの文書化を 意味することもある。～中略～プロジェクト間でのコンポーネントとパ ターンの設計を再利用することを可能にする。 出典：ソフトウェアアーキテクチャ
17. MVVMについて ソフトウェアアーキテクチャとは なるほどわからん。つまりソフトウェアアーキテクチャって何? 【自分なりの解釈】 自由すぎるシステム環境にある一定のルールと縛りを与える事で、コ ミュニケーションロスの低減や再利用を狙った考え方。 例：NASにファイル置く時にルールがないと崩壊しますよね? ある一定のルール(構造)に則って置くとみんなハッピーみたいな。
18. MVVMとは MVVMはModel、View、View Modelの略称。 ・ModelはUI以外(ビジネスロジックやデータソースへのアクセス等)を担当する　(P.10で あげたJavaが該当する)。 ・Viewは、見た目を制御する部分(P.10であげたXAMLが該当する)。 ・ViewModelは、PDS(Presentation Domain Separation)を実現しつつ、 　View(XAML)の都合を吸収する部分。 出典：MVVMとは?　勉強結果と参考資料の共有
19. ViewModelとは　まとめ(図解) XAML (View) Java (ViewModel) Java (Model)
20. XAML(ザムル)について AndroidアプリのViewに一般的に用いられるXML言語。 その昔、Silverlightで使われていた(らしい) 似たようなものだと、 FLASHのFLEXではMXMLと言うものがあります。
21. PDS(Presentation Domain Separation)とは Presentation(UI)とDomain(その他の機能)を分けること。 PDSは以下のような経緯から生まれた(と理解した)。 ・UIはテストしづらいので、UI(View)とそれ以外を分けたい 　(UIは自動テストとかしづらいがJavaとかはしやすいので分けたい) ・Viewとそれ以外を分けると理解しやすい ・見た目の変更がその他の機能に波及しない(しづらい) 　(見た目の変更はよくあるので…) ・デザイナーとの分業の達成
22. View(XAML)の都合とは? 1.XAMLの特徴(コントロールの状態保持について) 　操作に対してコントロールの状態を保持するには、 　バインディングしたオブジェクトが必須(XMLだけではダメでJavaが必要) 　無いとスクロールしただけで再描画されて状態が消える。 　(チェックボックスのチェックが消えるなど) 2.バインディングしたオブジェクトからのみ操作可能な定義が存在する! 　XAMLはXML形式でコントロールの定義が可能だが、 　中にはバインディングしたオブジェクトからのみ操作可能な定義が存在する。
23. ViewModelとは　まとめ P.15で以下のように説明しました。 　ViewModelは、PDS(Presentation Domain Separation)を実現しつつ、 　View(XAML)の都合を吸収する部分。 つまり「見た目」とそれ以外(Java)を分離しつつ、 View(XAML)の都合であるオブジェクトが必要であるという部分を担保するのが ViewModelとなります。
24. ViewModelとは　まとめ(図解) XAML (View) Java (ViewModel) Java (Model) オブジェクト化 データのやり取り 見た目とそれ以外の分割のため、 ViewとModelが直接やり取りはしない。 Presentation(UI) Domain(その他の機能)
25. 今回開発したアプリの概要 今回はDesireManagerというアプリを開発しました。 現状ではオープンβテスト状態で公開済みです。 Android端末があればインストール可能です。 このアプリはもともとは自分用に開発したWebアプリを、 スマホアプリに移植したものになります。 (なのでUI/UXとかスゴイ適当です…) ▶Google Play
26. アプリの概要説明 ・やりたい事を管理するアプリ ・やりたい事を登録して、 　それがやれたら実績を登録する。 ・実績はグラフで確認可能で、 　振り返りに使える。 ・やりたい事は毎日やりたい事と、 　そのうちやりたい事の2種類登録可。 ・データは端末内のローカルDB(sqlite)に保存する やりたい事リスト画面
27. アプリの概要説明 ・登録した実績は右図の様にグラフ化可能。 ・グラフは幅の都合で、 　1ヶ月を10日ごとに3分割表示。 ・(画像では見切れてますが) 　グラフの下には表で今日の実績を表示。 実績リスト画面
28. アプリの概要説明　画面遷移 やりたい事リスト画面 過去の実績リスト画面 やりたい事リスト画面
29. アプリの概要説明　構成とデータの流れ sqlite View (画面) ViewModel Model 画面 データ入力・表示 データ読み込み 書き込み SQL データベース
30. 開発時にハマったこと 実際に開発してみてハマったことを いくつか紹介します。
31. デザインに何も表示されない問題 Hello World!を表示するだけの サンプルプロジェクトなのに、 「Hello World!」というテキストが デザイン画面に表示されない。
32. 【正常時の開発画面】 ちゃんとラベルが 出ている。
33. 【異常時の開発画面】 何も出てない…。
34. デザインに何も表示されない問題　原因 原因：開発環境が新しすぎた！ Androidの開発環境はバージョン28が最新。 が、Android Studioが追いついていないようで、 28だとこういった現象が発生するらしい…。 インストールしてサンプルプロジェクトを作った直後でこれでした。 なので正直、前途多難だなぁ勘弁してくれ…って感じでした。 対策としては設定ファイルでバージョン設定を変えることで治りました。 (詳細はリンク先で…) 出典：Designタブのpreviewにテキストボックスなどが表示されない
35. ネットの情報が古い問題 これはある程度覚悟していた問題ですが、 やはりネットの情報が古いことが多い。 例えばあるライブラリの使い方をググるとバージョンが明記されておらず、 自分の環境では動かなったり(そもそもコンパイルが通らない)、 ネットでよく引っかかるサンプルコードが既に非推奨になっていたり…。
36. ネットの情報が古い問題　対策 ・ライブラリは公式ドキュメントを見る 　基本ですが、英語しかないとメンドイなぁとなって、 　日本語のページを検索してしまったりするので…。 　結局英語の公式ドキュメントを眺めたり、 　サンプルコードをみたら解決する事がよくあります。
37. ネットの情報が古い問題　対策 ・Googleの検索結果の期間を1年以内とかにする
38. アプリアイコンとアプリ名がデフォ問題 これは問題というか、単純に自分の思い込みでハマっただけだったのですが…。 AndroidアプリをGoogle Playにリリースする際に、 アプリ名やアイコンを登録する必要があります。 画像のような感じ。 自分はこれがインストールした後のアプリアイコンと、 アプリ名になると思いこんでいたのですが…。
39. アプリアイコンとアプリ名がデフォ問題
40. アプリアイコンとアプリ名がデフォ問題 開発時に設定ファイルで、 アイコン画像やアプリ名を設定する必要がありました。 思い込んでいると疑問に思わない例だなぁと…。
41. リリース(オープンβ版)のやり方。 Webサービスであればネットに公開して終わりですが、 Google Playという基盤でアプリ公開をするためには様々な設定 が必要でした。 個人的にはこういった設定や審査が意外だったので、 共有させていただきます。
42. 設定項目　一覧 右の画像のように最低4つは設定が必要です。 基本情報に加えて以下の3つです。 ・ストアの掲載情報 　アプリ名や説明などの基本情報。 ・コンテンツのレーティング 　アプリの種類(SNS、ゲームなど)や、 　暴力表現や課金有無、音声要否など。 ・価格と配布 　有料/無料の他、配布先の地域(国)を選択する。 　国によって制限が異なります。
43. まずGoogleに25ドル払う。 調べるまで知りませんでしたが、 Google Playにアプリ登録するには登録料が必要です。 正確にはデベロッパーアカウントというのが必要で、 これの登録に25ドル要ります。 公開せずに自作アプリとして使うのであれば無料です。 ちなみにiOSは年11,800円必要なので安いですね。
44. ストアの掲載情報　 アプリ名や説明、 アイコン画像やスクショを登録します
45. ストアの掲載情報　動画情報など ・テレビバナー? 　AndroidTV用バナー ・Daydream? 　Android用の 　VRプラットフォーム。 出典：公式ヘルプ
46. コンテンツのレーティング
47. コンテンツのレーティング　設定 アプリのカテゴリの選択。
48. コンテンツのレーティング　設定 アンケートに答えると、 自動的にレーティングが設定される。
49. 価格と配布
50. 価格と配布
51. 価格と配布
52. リリース
53. 感想 ・思ったより簡単にできたなーという印象 　もともとJavaをやっていたので、 　そこで詰まらなかったのは大きかったと思います。 　久しぶりすぎてStringを=(イコール)で比較して、 　なぜtrueにならない!?とかやってましたが…。 　Android特有の環境とかお約束でハマることはありましたが、 　結果的に全てググって解決出来たのでそこまでシンドクはありませんでした。 　初心者がWebサイトを作るのもいいですが、 　Androidアプリもかなり敷居が低いのでオススメだと思います。
54. 感想 ・開発期間は11日、一日数時間(4～8時間程度?) 　久しぶりにPHPとjQuery意外の言語や環境だったので楽しくなっちゃって、 　ダラダラ書いていたなぁという感じでした。 　楽しかったのはスゴク良かったのですが、 　もう少しメリハリ付けて作業したかったなーという感じです。 　転職前の休みだったこともあって、 　明け方4時くらいまでずっと作業してたりしていたので…。
55. 終わりに。 最後になりましたが、 アウトプットの場を頂いたインフラ勉強会に大感謝です。 本当にありがとうございます! まったくインフラに関係ない内容で恐縮です…。 ですが、インフラ勉強会で学んだ精神で登壇させていただきました。 その精神とは…
57. 終わりに　勝手に宣伝 インフラ勉強会に参加したキッカケなので勝手に宣伝…。 自分も”しがない”勢なので非常に楽しく聞けました。 もちろん元SIerじゃない方もゲスト出演されてます! インフラ勉強会でよく見る方も出演されてたり、これからしたりするっぽいです! おすすめです! しがないラジオ公式サイト
58. おわり