Makopy'5 La6

スマホアプリ開発とかその周辺のこととか関係ないこと。または恋は言ってみりゃボディー・ブロー

スマホアプリ開発の学習で真っ先に押さえるべきポイント

スマホアプリ開発 Xamarin Xamarin.Forms

スマホアプリ開発の学習

5年？6年？くらいはスマホアプリ開発に携わってきました。
他記事でも書いていることですが…。
iOSネイティブを中心に、色んなプラットフォームでの開発に携わってきました。
どれもこれも突然(FIELD OF VIEW)な話で、
そういう状況下では、そこまでの経験をベースにして、

  • 大事なことから優先的に取り組む
  • 実戦の中でのトライアンドエラーで補完
  • 並行して個人的な取り組みで補完

という動きにならざるを得ません。
基本的に上記のようなスタンスで日々悪戦苦闘しています。

真っ先に押さえるべきポイント

画面遷移とライフサイクル

なるはやで開発の戦力になることを目標に置くならば。
まず画面遷移とライフサイクル周りのことを押さえておくべきだと考えます。

  • ベーシックかつ頻出の画面遷移
    • Navigation
    • Modal
    • Tab
  • 画面やアプリのライフサイクル
    • どのようなライフサイクルをフックできるか
    • 画面遷移ごとの特性

これらを学習のエントリポイントにすると、簡単なサンプル実装でも色んなことでつまずくと思います。
Xamarin.Formsで言えば。
どうしても画面関連にはXAMLの存在はつきまとうし、 MVVMのお話とか。
そういうのは副産物的に学習やトライアンドエラーが稼げる点で、うれしい誤算と思うことにしています。

リスト形式のUI

UIの中ではリスト形式のUIを使えるようになることが先決です。
TableViewとかListViewと呼んでるやつです。

色んな場面で静的にも動的にも使用する頻出のUIです。
静的な例では設定画面。
動的な例ではSNSやチャットのタイムライン表示とか商品リストなどの何かしらの一覧など。

ここにも副産物があります。
リスト形式UIに対しては、DataSourceがつきまといます。
そうなると必然的にコレクションを扱うことになります。
コレクションにModelをぶち込んでぶん回す。
こういったことを理屈ではなく、具体的に言語レベルで押さえることになります。

実験用ベースプロジェクトを作っています(まだ途中)

Xamarin.Formsで。
上記のポイントを盛り込んだプロジェクトを作成しようと思っています。
そのプロジェクトをベースとして学習やトライアンドエラーを積み重ねていこうかと。
そもそも、
覚書的にアウトプット
というのが本ブログの目的だったりするわけですが。
そのアウトプット先をまずは限定してみようかなと。
結果的にGitHubやGistも充実していったらいいなと思ったりするわけです。

ということで、作ってみました。
まだ途中です…。

github.com

Xamarinでもなんとかなるぞ！

Xamarin Xamarin.Forms

以下、個人的な見解に基づいて…。

Xamarinはいいぞ！

「Xamarinはいいぞ！」
Xamarinに関わっている人/興味がある人は、
そんなようなセリフを見聞きしたことがあると思います。
確かに自分もそう思います。
様々な点で魅力に溢れていると思います。
それはもはや筆者がここで語るまでもありません。

Xamarinでもなんとかなるぞ！

個人的なXamarinの出発点は、技術的な興味からでした。
ちょっとやってみようとゆるーく始めた取り組み。

それからあまり時を置かずして、
「来月からXamarinのプロジェクトやってもらうから」
という話が。
その時点での「来月」は「来週」とイコールでしたけどw

とにかく、
「Xamarinを使って開発せざるをえない」
状況に追い込まれたわけです…。
まぁ、こういうの慣れてますけどねw

実情として、
「Xamarinの知識や経験が豊富な人が望んでXamarinの案件にアサインされる」
というケースはあまりないのではないかと思います。

といった、
部分的にXamarinの技術要素にマッチする人がアサインされるケースの方が多いと思います。
少なくとも筆者が現在やっているプロジェクトのメンバーはiOS/Androidのどちらか or 両方な人だけです。
C#やXAMLに至っては実務経験がある人はほとんどいませんw
でも、自分含めて苦労しながらもなんとかなっています。

うん…、
「Xamarinでもなんとかなるぞ！」

とっかかりやすさ

以前の話ですが。
似たような流れでハイブリッドアプリ開発に携わることになりました。
その時は不安が結構大きかった記憶があります。
それまでのiOS/Androidのネイティブの経験が活かしづらく感じたからだと思います。
プラグイン部分は各ネイティブのコードを書きますが、基本はWebView上の世界です。

ハイブリッドの時と比べて、Xamarinの場合はどうかというと。
Xamarinの場合はその辺りの不安は感じなくて、
「Xamarinでもなんとかなりそう！」
くらいの感触はまず持てました。
なんとかなりそうという感触は実戦経験から、
「Xamarinでもなんとかなるぞ！」
という確信めいたものに変わりました。
(実戦経験せいぜい3ヶ月くらいですけど…)

あくまでネイティブアプリのエンジニア視点ですが、
「とっかかりやすさ 」
みたいなものがあるのではないかと思います。

Xamarinで開発するかどうかの判断基準

メリットや魅力に溢れるXamarin。
「Xamarinはいいぞ！」
とは言いつつも、
プロジェクトの性質によっては、Xamarinの向き/不向きもあると思います。
何でもかんでもXamarinでというのはハッピーな結果を生まないと思います。

これは何か標準的な指標みたいなものがあるといいなと思います。
チェックシートみたくして、点数が多かったらXamarinで検討/提案してみようとか。

(iOS/Android)WebViewのInspect(Mac OS)

iOS Android スマホアプリ開発

WebViewを巡るあれこれ

ハイブリッドアプリは、それ自体がWebViewの世界の話なので言わずもがなですが…。
ネイティブアプリ開発においても、実戦では結構WebViewを使う頻度は多いです。
何かしらのログイン画面を表示したり、URLロードをフックして云々とか、JavaScriptと連携したりとか。
Webのページ遷移の中にネイティブの画面遷移を絡めて…というのも実際にありました。

WebViewを使ったテクニカルトピックは別の機会に書くとして。
今回はとりあえずWebインスペクタの設定方法を覚書しておきます。

WebViewが絡む開発ではWebインスペクタの存在は重要です。

@ハイブリッドアプリ開発

Webインスペクタは手放せない！！

今回記事では設定方法等扱いませんが、OSやブラウザに依存しないweinreというツールもあります。
weinre - Home

ハイブリッドアプリではインスペクタの使用頻度が必然的に高くなるため、weinreを使う方が楽かもしれません。
(設定はちょっとばかり面倒です)

@ネイティブアプリ開発

WebViewを使った開発時にWebインスペクタがあると便利！

Webインスペクタの設定/起動方法

今回はiOSとAndroidでそれぞれの方法を示します。

iOS

Safariを利用します。

  • Safariの設定
    • 設定
      • 詳細
        • 「メニューバーに"開発"メニューを表示」にチェック f:id:makopy_inside:20170222223633p:plain
  • 開発メニューからInspectする対象を選択 f:id:makopy_inside:20170222223718p:plainf:id:makopy_inside:20170222223745p:plain

Android

前提条件として、Chromeが必要です。

Xamarin.Formsの基礎の基礎

Xamarin Xamarin.Forms

Xamarin.Formsとは何者か？

Xamarin.Formsとはどういうものか？
どのような思想で成り立っているのか？

既にXamarin.Formsで開発をしている人はもちろん、Xamarin.Formsに興味を持っている人や始めてみようと思っている人なら、何となくご存知だと思います。
Xamarinの公式サイトを見ればそのようなことは大体書いてあります。

よく見る図

Xamarin.Formsの記事では、 ↓ような図をよく見ると思います。

f:id:makopy_inside:20170221231229p:plain

上述の
Mobile Application Development to Build Apps in C# - Xamarin
にも、同じような図があると思います。

同じような図があるというか、模倣して作りました…。
作っておけば他に使うこともあろうかと思いまして。
そのままもらってきて貼り付けるのも気がひけるし。

「よく見る図」の重要性

図中でいう、
「Shared C#…」
の部分を実装することもあれば、
DependencyServiceやCustom Rendererといった、
「Platform-specific C#」 の部分を実装することもあります。

特にXamarin.Formsに携わって日が浅い場合。
そうこうしている内に迷子になることも結構あります。
そんなときに立ち返るべきは「よく見る図」なのではないかと思います。

Xamarin.Forms実戦開発要素(クイックスタート用)

Xamarin.Forms

スマホアプリ開発全般

スマホアプリ開発の全般的な要素としては、前記事を参考にしてください
↓↓↓
スマホアプリ実戦開発要素(クイックスタート用)

Xamarin.Forms実戦開発要素(クイックスタート用)

いきなりXamarin.Formsでスマホアプリ開発をしなければならなくなった人向け。
実戦に向けて優先的に押さえておきたい要素をピックアップしておきます。

Xamarin.Forms的要素

C#的要素

スマホアプリ実戦開発要素(クイックスタート用)

スマホアプリ開発

自分自身のスマホアプリ開発の経験を振り返ると…。

  • 最初はiOSオンリー
  • 「iOSできるんだから、Androidもできるでしょ？」とAndroidをやることに
  • 一度Androidの実績ができてしまったもんだから、「iOS版/Android版あるから、両方よろしく！」とか
  • 「iOSもAndroidもできるからハイブリッド(Cordova+Ionic)もいけるでしょ？」
  • 「いろいろやってきたからXamarin.Formsも楽勝だよね？」← 今ココ

みたいな感じで、 次々に新しいことに携われて楽しくて充実しています☆

って、そういう話じゃなくて…。 いやまぁ、確かに楽しいんですけどw
こういうのって急に言われたりして、そんなに準備期間が取れなかったりするのが悩みです…。
実戦開発が差し迫っている場合、まずは最低限の要素を携えて立ち上がっていかなければなりません。

そんな時、
限られた時間の中で何から押さえていけば立ち上がりがスムーズか？
という観点で要素をピックアップします。

スマホアプリ実戦開発要素(クイックスタート)

スマホアプリとして基本的な要素

  • 画面の作成
    • レイアウト/パーツ配置/コードとの紐付け など
  • 標準のUIコンポーネントは何が用意されているか？
  • 画面遷移のパターン
    • ナビゲーション/モーダル/タブ など
  • 画面の追加
    • 画面の追加方法/追加した画面への遷移方法
  • 画面遷移時のデータ連携
  • ビューライフサイクル/アプリ状態遷移
  • リスト形式UI
  • Alert(ダイアログ)

実戦開発で頻出の要素

スマホアプリ要素

  • リソースの扱い方
    • 画像/音声/HTML など
  • データの扱い方
  • カスタムAlert(ダイアログ)
    • Alert(ダイアログ)のカスタムはどこまで可能か？/自作が必要か？ など
  • WebView
  • 外部アプリ連携
    • 外部アプリを起動/外部アプリから起動
  • サーバサイド連携
    • Web APIリクエスト/レスポンスパース(XML, JSON) など
  • アプリバックグラウンド時動作

プログラミング要素

  • ログ出力
  • 定数
  • ユーティリティクラスの実現
  • 非同期処理/マルチスレッド
  • コールバック
  • マルチスレッド
  • シングルトン

積極利用したくないけど…な要素

  • OSバージョン取得・判定
  • 端末情報取得・判定
    • idiom(phone/Tablet)/端末モデル/画面サイズ/SIM情報 など
  • アプリ終了方法
  • グローバル変数