WindowsでiPhoneアプリづくりに挑戦してみた！

社内勉強会のLTで発表したスライドです。

Transcript

1. ～初心者挑戦～ WindowsでiPhoneアプリ作りに 挑戦してみた！ 小野 慶子 2018/8/3
2. 挑戦したこと ↓ スマホアプリ開発ない私が、 WindowsによるiPhoneネィティブ アプリ作りをやってみた ✓これまではiPhoneアプリ開発にはMacOSが必要で、Windowsし か持たない私は諦めていた ✓最近Microsoftのxamarin（ザマリン）という開発ツールで Windowsでも作れるという情報を見かけるようになったので、実 際のところ、どうなのかやってみた！
3. 挑戦にあたってのルール • 出来る限り無料で • 自分のiPhoneで動けばよし • まずはライトに１～２日のレベルでやってみる ⇒きりがないので今回はMicrosoft xamarinだけを試し、 他のフレームワークには浮気しない！ まずはやってみることを重 視のため、浅い内容となっ てもOKとした
4. 一般的なiPhoneアプリ開発 • Appleの統合開発環境 Xcode（無料）で開発する • XcodeはmacOSにしか対応していない • 言語はSwift等が選べる • 実機でのテストはApple IDが必要 • App Stroreで公開する場合はDeveloper IDが必要（有料）年間1万程
5. 今回試すもの⇒ Microsoft Xamarin • 読み方・・・ザマリン • 簡潔に説明すると.NET Framework（主にC#, VB.NET）による、 iOS/Androidのクロスプラットフォーム開発環境 • C#など単一のコードによりiOSやAndroidアプリを開発できる というメリットがある • 日本コミュニティもある！
6. 環境づくり～Windows編 • Visual Studio 2017 Communityをダウンロードし、「モバイル 開発」をチェックしインストール • インストールガイドのとおりで特に難しいところはなかった https://docs.microsoft.com/ja-jp/xamarin/cross-platform/get-started/installation/windows インストール画面
7. 環境づくり～iPhone編 • Xamarin Live PlayerというiPhoneアプリを利用する • ネットではApp Storeでダウンロードすればよいとあるが、検 索しても出てこない・・・ハマリポイント • ドキュメントによると、Test FlightというAppleのツール経由 でインストールすればよいことがわかり無事インストール成功 実際のドキュメント 自動翻訳なのもありますが、ちょっと難しいと思いませんか？
8. サンプルを動かしてみよう サンプルがたくさんあるので、 とりあえずすぐ動かしてみるこ とができそう https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/samples/
9. 自分のiPhoneで動かしてみる • PCとiPhoneを同じwifiネットワーク上に • VisualStudio（Windows側）で接続用QRコードを表示 • iPhoneのXamarin Live Playerで、QRコードを読み込む
10. 動いた！ただし・・・ • サンプルを動かすことができた • さらにWindows側のVisualStudioでブレークポイントで 止めてデバッグすることも出来る • ただし、制約事項があり動かない機能がある • 今回の試して動かなかったのはGPS、SQLite・・・ 実際に私のiPhoneで動いたアプリ⇒ 左がToDoアプリ、右が電卓アプリ
11. 一応目標達成！ 全部無料！ 自分のiPhoneで動いた！ 数時間でできた！
12. ただし Xamarin Live Playerアプリの上で動い ているだけで直接iPhoneの上で 動いているわけではない・・・ 直接動かすためには、やはりmacOS上で Xcodeによるビルドが必要
13. 他にないのかなあ？ • ほかのフレームワークを探す • よく聞くreactNativeやionicを調査することにした
14. ionic Framework • ionic(アイオニック）Frameworkとは 開発者が使い慣れたWebテクノロジ（HTML、CSS、およびJavaScript）を使用し て、高性能な高性能モバイルアプリケーションを構築できるオープンソースのSDK • iOSデバイスで動かすにはXcodeが必要なのでNG （xamarinのようにWindowsとiPhoneをつなぎテストも無理） 公式ページのデバイス展開方法より Xcode 7以上 ⇒ この時点でmacPC要 https://ionicframework.com/docs/intro/deploying/
15. React Native • React Nativeとは ReactはFacebookが開発したJavaScriptのフレームワークで あり、React Nativeはそれをモバイルで使えるようにしたも の。iOSとAndroidのアプリが作れるクロスプラットフォーム。 • Windows側 Node.jsのnpm（パッケージ管理ツール）を利用し、React Create Native Appインストールする • iPhone側 Xamarinと同じようにExpo Clientという アプリ上でテストができる • すべて公式のマニュアルのとおりに進められる。JavaScriptで 新たな言語を覚える必要なく魅力的 https://facebook.github.io/react-native/docs/getting-started.html
16. 一旦まとめ • Windowsで開発したものをmacなしにiPhoneでテストできる • ただしアプリの上でであって 直接iPhone上で動かすことはできない
17. 他の手段は？ 1. Windows上に仮想のmacOS入れる ⇒出来るとしてもAppleの規約違反となるのでナシ 2. クラウドでmacをレンタル ⇒価格は月20ドルから 【次の候補になりそう】 ⇒サービス： MacinCloudやMacStadium 3. 中古Macを格安で手に入れる ⇒もう買っちゃってる ⇒なんなら、新しく出たMacBook Proを買うか？ いやお値段が・・・
18. そもそも どうしてこうなっているのか？ 各社の戦略が見え隠れ
19. 各社の戦略（わたし調べ、予想含む） • Appleはプラットフォーム囲い込み戦略 • ネィティブアプリはApp Storeストア経由ではないと配布しなければなら ず、アプリの収益で巨額な利益を得ている • ユーザーと開発者両方から継続的に収益を得る戦略といえる • MicrosoftやFacebookはクロスプラットフォーム戦略 • OSやデバイスに依存しない。OSやデバイスで囲い込まない • FacebookはSNSなど自社のサービスをターゲットとしてアプリを開発し てもらい、 Faceboook を魅力的なものにし、より普及させたい • 非ネィティブアプリ Appleも最近PWAをサポートし始め（Safari）、戦略転換兆候あり Microsoft、Googleもサポートしており、アプリ開発において、ネィ ティブアプリ以外の選択肢が増えた ⇒PWAとはモバイルのWEBページでネイティブアプリのようなUXを提供するもの
20. 最後に～この挑戦で得られたこと 1. 満足感と若干の挫折感 • 結局今のところ直接iPhoneアプリを動かすにはmacOSが必要である • すべてWindowsで開発し、実機である程度確認できるのは 学習としてはあり！ • ずっと気になっていたことが試せたので満足 2. 各社の戦略を考えるきっかけになった 3. 周辺ツールの使い方も一緒に知ることができた • Node.js（npm）やTestFlight ひとつのことを学ぼうとすると様々なことを勉強することがで きる！みなさんもLet‘s「やってみた」！
21. End