IonicとCapacitorを使ったアプリを準備する（iOSプロジェクトの設定）
前回から引き続き、IonicとCapacitorのアプリを構築していきます。 次は、iOSのプラットフォーム（プロジェクト）をアプリに追加します。
$ npx cap open ios
package.json の dependencies に @capacitor/ios が追加されています。
そして ios/ というディレクトリが作られて中に様々なファイルが入っています。
iPhoneアプリを作った事がないので詳細はよくわかりませんが、アプリを起動してWebviewのガワを表示するところまでを準備してくれていそうです。
ここにリソースとしてSPAを埋め込んでおくのかなと今のところ理解しています。
こうする事で、作ったSPAを内包したアプリをXcodeで開く事ができます。 下記コマンドで、SPAをiOSプロジェクトに反映させることができます。
$ npx cap copy
ちなみに、このコマンドでAndroidのプロジェクトにも同時に反映されます。
上記の通り、アプリとして動かすためにはXcodeをインストールする必要があります。(Android Studioと比にならないサイズの8.1GB...)
初めてXcodeを立ち上げたら、以下のようなダイアログが出てきたので、インストールします。
$ npx cap open ios
画面左上にある、再生マークを押します。
すると、iPhoneSE (2nd generation)のシミュレーターが立ち上がります。
違うデバイスのシミュレーターにする場合は、再生マークの右側にあるデバイス部分で選択できます。
Androidと違ってすんなりできました。
おそらく、Android Studioと違って、シミュレーター関連もアプリケーションと一緒にダウンロードしてきているのだと思います。
実機でデバッグしてくには、色々とアカウント周りも必要になってきた記憶がありますが、一旦必要になったらまた設定することにして、次からはIonicとCapacitorを使ったアプリを作っていきます。
IonicとCapacitorを使ったアプリを準備する（Androidプロジェクトの設定）
前回から引き続き、IonicとCapacitorのアプリを構築していきます。
次は、Androidのプラットフォーム（プロジェクト）をアプリに追加します。
$ npx cap add android
package.json の dependencies に @capacitor/android が追加されています。
そして android/ というディレクトリが作られて中に様々なファイルが入っています。
Androidアプリを作った事がないので詳細はよくわかりませんが、アプリを起動してWebviewのガワを表示するところまでを準備してくれていそうです。
ここにリソースとしてSPAを埋め込んでおくのかなと今のところ理解しています。
こうする事で、Android Studioで作ったSPAを内包したアプリを開く事ができます。
下記コマンドで、SPAをAndroidプロジェクトに反映させることができます。
$ npx cap copy
上記の通り、アプリとして動かすためにはAndroid Studioをインストールする必要があります。(1.5GBもあるんですね...)
初めてAndroid Studioを開くと、SDKを選択しようと言われます。
このダイアログ中にあるリンクは切れているので、一旦無視して Cancel で抜けます。
Android Studioをインストールできたら、下記コマンドでAndroidプロジェクトをAndroid Studioで開きます。
$ npx cap open android
アプリを起動するために、SDKをインストールします。
Android SDK Tools 26.0 .1以上と、Android SDK Platforms for API21以降が必要なので、SDKをインストールします。
Android Studio で、 Android Studio -> Preference を開きます。
Appearance & Behavior -> System Settings -> Android SDK を選択し、
Android SDK Location のボックスにある Edit を押します。
自分の場合、下記のようなチェックになっており、特にチェックをつけたり外したりはできなかったです。
そのまま進んでいくと、ダウンロードが始まります。
終わったら Finish で完了です。
先ほどの Android SDK の画面で SDK Platform もダウンロードします。
現時点では、Android10.0 (Q) がCapacitorの対応範囲で最新なので、これを入れておきます。
続いて、 AVD Manager で、 Simulator をダウンロードします。
+ Create Virtual Device を押します。
今回は、 Pixel 3a を選択して、 Next を押します。
System imageとしてAndroidのバージョンを選択します。未ダウンロードの場合は、ダウンロードします。
画面上部のツール部分に Add Configration... を押して、 Templates から Android App を選択し、 Module から app を選択します。
Sync Project with Gradle Files を押します。
ここまでくると、画面上部のツール部分が以下のようになっていて、再生アイコンを押すとシミュレータで作ったアプリが起動します。
これでAndroidプロジェクトの作成はできました！
ハイブリッドアプリの差分としては、
jarRepository.xml misc.xml Project.xml
の3つが差分として出てきました。（途中色々設定をいじってしまったので、もしかするとここは環境によって違うかも）
次は、 iOSプロジェクトの作成をしていきます。
IonicとCapacitorを使ったアプリを準備する（IonicとCapacitorの初期設定）
Nifty Cloud Mobile Backendを試してみようと思い、ひとまずIonic/Capacitorを使ったアプリを作ります。
まず、 Ionic の CLI をインストールします。
npm install -g @ionic/cli
グローバルインストールを避けるならば、git init をした上で npx install @ionic/cli とかでいけるかもです。
次に、blankのテンプレを用意します。今回はReactで作っていくので、 --type=react を指定します。
ionic start lab-ncmb-with-ionic-capacitor blank --type=react
さっきIonicのCLIを避けた場合は、 npx を頭につけるとよさそうです。
package.json に色々追加されて、 npm install が走っています。また、 .gitignore もいくつか設定されてます。
configファイル も Capacitor Ionic TypeScript と追加されています。
Ionic のプロジェクトとしては、必要最低限のコンポーネントの例と、UIフレームワークに利用されている css 、ネイティブに変換するときに必要となりそうな manifest.json やアイコンもここで追加されます。
これが終わったら、次は Capacitor の初期設定です。
npx cap init
AppNameと、PackageIDを指定します。
capacitor.config.json に変更が加わりました。
cocoapodsをインストールするとエラーが出た
なんと、私用のPCはXcode周りの設定していなく、cocoapodsが入っていなかった。 というわけで、インストール！
$ sudo gem install cocoapods
Building native extensions. This could take a while...
ERROR: Error installing cocoapods:
ERROR: Failed to build gem native extension.
current directory: /Library/Ruby/Gems/2.6.0/gems/ffi-1.13.1/ext/ffi_c
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby -I /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0 -r ./siteconf20200829-62169-14h3sh9.rb extconf.rb
mkmf.rb can't find header files for ruby at /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/include/ruby.h
You might have to install separate package for the ruby development
environment, ruby-dev or ruby-devel for example.
extconf failed, exit code 1
Gem files will remain installed in /Library/Ruby/Gems/2.6.0/gems/ffi-1.13.1 for inspection.
Results logged to /Library/Ruby/Gems/2.6.0/extensions/universal-darwin-19/2.6.0/ffi-1.13.1/gem_make.out
gemのネイティブ拡張のビルドに失敗とな？
rubyのheaderファイルを見つけられなかったとな？
アドバイスとして「Ruby開発用に個別のパッケージをインストールする必要があるかもしれません」と言われたので、情報を探す。
ひとまず、ruby入ってるよね？というところから確認。
$ ruby --version ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.x86_64-darwin19]
入ってた。
もしかして、Command Line Tools for Xcodeが入っていない...？
$ xcode-select -print-path /Applications/Xcode.app/Contents/Developer $ xcode-select --install xcode-select: error: command line tools are already installed, use "Software Update" to install updates
ある。あれ、これどこかで見覚えが...。
というわけで
$ sudo rm -rf /Library/Developer/CommandLineTools $ xcode-select --install
よし。入った。これで、もいちど実行！
$ sudo gem install cocoapods
Building native extensions. This could take a while...
ERROR: Error installing cocoapods:
ERROR: Failed to build gem native extension.
current directory: /Library/Ruby/Gems/2.6.0/gems/ffi-1.13.1/ext/ffi_c
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby -I /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0 -r ./siteconf20200829-62169-14h3sh9.rb extconf.rb
mkmf.rb can't find header files for ruby at /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/include/ruby.h
You might have to install separate package for the ruby development
environment, ruby-dev or ruby-devel for example.
extconf failed, exit code 1
Gem files will remain installed in /Library/Ruby/Gems/2.6.0/gems/ffi-1.13.1 for inspection.
Results logged to /Library/Ruby/Gems/2.6.0/extensions/universal-darwin-19/2.6.0/ffi-1.13.1/gem_make.out
ブッブー。
エラーをよく見直してみると、 ffi というのが怪しい？
というわけで、こいつをインストールしてみる。
$ sudo gem install ffi
Building native extensions. This could take a while...
ERROR: Error installing ffi:
ERROR: Failed to build gem native extension.
current directory: /Library/Ruby/Gems/2.6.0/gems/ffi-1.13.1/ext/ffi_c
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby -I /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0 -r ./siteconf20200829-62264-1nmcu4z.rb extconf.rb
mkmf.rb can't find header files for ruby at /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/include/ruby.h
You might have to install separate package for the ruby development
environment, ruby-dev or ruby-devel for example.
extconf failed, exit code 1
Gem files will remain installed in /Library/Ruby/Gems/2.6.0/gems/ffi-1.13.1 for inspection.
Results logged to /Library/Ruby/Gems/2.6.0/extensions/universal-darwin-19/2.6.0/ffi-1.13.1/gem_make.out
おんなじエラーがでた！
ということは、こいつが原因っぽい。
しかし、ここから迷宮入りして、いろいろやったのでコマンドだけメモしておくと・・・
$ bundle update -> 途中でエラー $ bundle install -> 途中でエラー $ sudo gem update --system -> 途中でエラー。。 $ make clean -> なんかライセンス同意してねって言われた。
とやってて、突破口が見えん！！ってなってたので、もっかいやってみると・・・
$ sudo gem install ffi Building native extensions. This could take a while... Successfully installed ffi-1.13.1 Parsing documentation for ffi-1.13.1 Installing ri documentation for ffi-1.13.1 Done installing documentation for ffi after 19 seconds 1 gem installed
えっ。
$ sudo gem install cocoapods
Successfully installed ethon-0.12.0
Successfully installed typhoeus-1.4.0
Successfully installed netrc-0.11.0
Successfully installed cocoapods-core-1.9.3
Successfully installed claide-1.0.3
Successfully installed cocoapods-deintegrate-1.0.4
Successfully installed cocoapods-downloader-1.4.0
Successfully installed cocoapods-plugins-1.0.0
Successfully installed cocoapods-search-1.0.0
Successfully installed cocoapods-stats-1.1.0
Successfully installed cocoapods-trunk-1.5.0
Successfully installed cocoapods-try-1.2.0
Successfully installed molinillo-0.6.6
Successfully installed atomos-0.1.3
Successfully installed colored2-3.1.2
Successfully installed nanaimo-0.3.0
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /usr/bin directory.
おお、やっといけ・・・・て・ない・・・・・・・・？
こちらを参考にしてみました。
sudo gem install cocoapods
Password:
Successfully installed ethon-0.12.0
Successfully installed typhoeus-1.4.0
Successfully installed netrc-0.11.0
Successfully installed cocoapods-core-1.9.3
Successfully installed claide-1.0.3
Successfully installed cocoapods-deintegrate-1.0.4
Successfully installed cocoapods-downloader-1.4.0
Successfully installed cocoapods-plugins-1.0.0
Successfully installed cocoapods-search-1.0.0
Successfully installed cocoapods-stats-1.1.0
Successfully installed cocoapods-trunk-1.5.0
Successfully installed cocoapods-try-1.2.0
Successfully installed molinillo-0.6.6
Successfully installed atomos-0.1.3
Successfully installed colored2-3.1.2
Successfully installed nanaimo-0.3.0
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /usr/bin directory.
aktuehr@akt-mbp20 ~/D/h/g/lab-ncmb-with-capacitor> sudo gem install cocoapods -n /usr/local/bin
Successfully installed xcodeproj-1.18.0
Successfully installed escape-0.0.4
Successfully installed fourflusher-2.3.1
Successfully installed gh_inspector-1.1.3
Successfully installed ruby-macho-1.4.0
Successfully installed cocoapods-1.9.3
Parsing documentation for xcodeproj-1.18.0
Installing ri documentation for xcodeproj-1.18.0
Parsing documentation for escape-0.0.4
Installing ri documentation for escape-0.0.4
Parsing documentation for fourflusher-2.3.1
Installing ri documentation for fourflusher-2.3.1
Parsing documentation for gh_inspector-1.1.3
Installing ri documentation for gh_inspector-1.1.3
Parsing documentation for ruby-macho-1.4.0
Installing ri documentation for ruby-macho-1.4.0
Parsing documentation for cocoapods-1.9.3
Installing ri documentation for cocoapods-1.9.3
Done installing documentation for xcodeproj, escape, fourflusher, gh_inspector, ruby-macho, cocoapods after 3 seconds
6 gems installed
できたーーーーーー！
FCM ってナンジャラホイ
前回、 Capacitor の Push Notification のAPIの仕様書をみていて、 APNs や FCMというのが何かよくわかっていなかったので、今回はFCMに焦点を当てて、調べました。
FCMは、Firebase Cloud Messageの略で、プッシュ通知を配信するためのソリューションのようです。
クロスプラットフォームソリューションとのことで、Androidだけでなく、iOSでも送信できるっぽいですね。(FCM -> APNs -> 端末になるのかな？)
以前は Google Cloud Messaging API(GCM) というものがあったようですが、現在は非推奨です。
主な機能は以下の通り
- 通知メッセージまたはデータ メッセージの送信
- 汎用性の高いメッセージのターゲット設定
- クライアント アプリからのメッセージの送信
という事で、AndroidにPush通知を届けるには、FCMが必要になるそうです。
実装にあたり
- FCM SDK を設定する
- クライアント アプリを開発する
- アプリサーバーを開発する
の3つのステップが必要なそうです。3つ目はnifty cloud mobile backendとか使えばいいのかな？ とりあえず、必要そうなので、FCM SDKを設定する事を次にやってみようと思います。
UX JAM Online #06 を視聴
昨晩は、業務しながらラジオがわりに、 UX JAM Online #06 を聞きました。（途中から）
その中の、休憩フリートーク中にあった質問
「みなさんにとってUXとはなにか？」
について、作業を止めて考えてみた。
言葉通りだと、User Experience（ユーザー体験）になる。
体験なので、サービスによって定義は変わるんだろうけど、あえて共通語っぽくいうなら「使う人が、使う目的を問題なく達成できるもの」かなぁ。
「UX」という言葉を知った頃は、「便利」「使いやすい」を積み重ねてサービスとして良いプロダクトを作り上げるという事を意識していたけど、それって「UI」の「ユーザビリティ」じゃない？って今は思ってます。
一方で、「人を幸せにするもの」といったものは逆に壮大すぎる気がしていて、自分の中ではしっくりきていません。なんというか、それ「ユーザー」じゃなくて「人類」になっちゃってるよ、みたいな。
正解はこれ！っていうのがないので、時代とともに考え方が変化していくのかもしれませんが、定期的に「UXとは何か？」を考えるのは、プロダクトと向き合う上で良い事かもしれません。
余談ですが、「キラキラしている自社サービスを作ってる人がいうUX」という表現が聞こえてきて、めっちゃいい表現やなって思いましたw
（多分、受託のデザインや開発している人が使うUXという言葉との意識の対象が違うというお話）
