「okayama-js 2020/02 Ionicもくもく会」に参加してもくもくしてきました。

勉強会 もくもく会 モバイルアプリ Ionic

はじめに

2/15(土)、okayama-js 2020/02 Ionicもくもく会に参加してきました。

okayama-js.connpass.com

モバイルアプリ開発も少し手を出してみたいと思っていた今日この頃。
「Webの技術でモバイルアプリが作れる」フレームワークであるIonicのもくもく会が開催されるとのことで、良い機会と思い参加してきました。
(マルチなプラットフォームにデプロイできるものとして最近Flutterというのも知りました。機会あればそっちも触ってみたい。)

Ionicとは

まずは、岸野さん(@kishisuke)によるIonicの紹介からです。

岸野さんのスライドにもある通り、「Web技術でモバイルアプリ作るための統合開発環境」的なのがIonicです。
SwiftやKotlinｾﾞﾝｾﾞﾝﾜｶﾗﾅｲな私のような人でも、html・javascriptなどWebアプリ開発のノウハウを転用して開発ができます。

当日のメモも合わせて改めて自分なりにまとめると

  • ボタンや各種入力要素といった豊富なUIコンポーネントが提供されている
    • UAを見て各プラットフォームに合わせてUIを自動で切り替えてくれます。Androidだとちゃんとマテリアルデザインになります。
    • 見た目だけでなく、iOSなら画面左端からのスワイプで前の画面に戻るなど、操作感もネイティヴに近づけてくれます。
  • 開発フレームワークにはAngular/React/Vue.jsを選択可能
    • ただし、Vue.jsは現時点ではベータ版。
    • 元々Angular依存だったので、情報はAngularが豊富。
    • URLルーティングもこれらフレームワークのものを利用可能。
  • Ionic CLIでプロジェクトの雛形作成からビルド〜デプロイまで可能
  • Capacitorという、Ionicチームが開発したクロスプラットフォームフレームワークが使える
    • Cordovaも使えるが、公式にはこっちを推してる空気ありとのこと。
    • Electronにも対応しているとのこと。つまり、デスクトップアプリ化もいける。
  • PWA対応可能(テンプレートあり)
  • 学習コストは高め(フレームワーク、機能の多さ、高いリリース頻度)

ちなみに、「アイオニック」と読みます。「イオニック」ではないです。

もくもくタイム

岸野さんによるイントロダクションが終わり、Let'sもくもく。

Angularでフォトギャラリー実装する公式チュートリアルがあったので、それを進めることにしました。
日頃仕事でAngularを使ってるので、コーディング自体は特に詰まる所ナシです(まぁ、チュートリアルということでコピペで進められるようになってたのですが)。解説を読みながらちまちま進めました。
Web実行時とランタイム実行時(Capacitor、Cordova)で、画像ファイルの永続化/ロード周りの操作が違うようでした(まだよく分かってませんが、ランタイム実行時はWeb実行時のようにアップロードファイルをIndexedDBにbase64エンコードして保存、それを読み出してimgタグのsrc属性に指定、みたいなことをしない様子)。
どちらの形式でもデプロイ予定ならきっちりロジック分岐が必要みたいです。

とりあえず、それっぽく動くものができました(まだ実機ではないですが)。
※以下、ばっちいおっさんが出てきます。

この後、Xcode経由でiPhone実機にデプロイする工程があったのですが、しばらく更新していなかったXcodeさんエラーで起動せず…。
続きは宿題です。

他の方々の成果

個性が強いですね…

もくもくしてみて

UIコンポーネントやテンプレートをはじめとした手厚いサポートを受けながら、Web技術でモバイルアプリ開発ができるところは魅力ですね。学習コスト高そうではありますが、(Webアプリエンジニアなら)ネイティブアプリ開発のために1から勉強し始めるよりは気軽に始められるのではないでしょうか。
カメラなどのリソース制御は色々面倒なのかなと思ってたのですが、割とあっさりできてしまったあたりもCapacitorのおかげですね。
今後、新規にAngular案件があれば、最初からIonicでプロジェクト始めるのもアリかなと思いました。

もくもくコーディング画面
もくもくコーディング画面イメージ

その後…

とりあえず実機で動きました。

Xcode、起動すらほとんどしたことなかったのでビルド周りでエラー吐いて色々調べまわってました…。

やはりスマホで実際に動かすと感動も違いますね！
チュートリアルなので大したものではないですが、Webアプリとはまた違う「成果が形になった」感覚を味わいました。

その後…Part2

翌日、環境キレイキレイする過程でせっかくだからとiOSも最新(13.3.1)にアプデしたところ、ビルドエラー吐くようになりました(dyld: Library not loadedとかどうとか)。
エラー内容で調べても絞り込めなかったため、Ionic(Capacitor)側かと思ってIssue調べたところ、ヒットしました。

github.com

どうも、「無料のAppleIDアカウントかつiOS 13.3.1で起こってるバグ」のようです。

stackoverflow.com

上記回答の通りですね。
有料アカウントはちょっとまだ手が出ないので、シミュレーターで一旦我慢ですかね…。
実家に戻れば昔使ってたAndroid端末があるはずですが、動いたとしてもバージョン古すぎてダメな予感…。