はじめに
Ionic Frameworkは、イオンや三井住友銀行をはじめとして、国内で大手の採用が続いており、市場においても存在感のある技術となってきています。
一方で書籍においては、筆者が書いた2019年11月発刊の Ionicで作る モバイルアプリ制作入門[Angular版]が最後となっています。Amazonのレビューでも高い評価を得ていますが、この書籍は初心者から中級者のユーザに向けて書いたものであり、それ以上Ionicでの開発に慣れたユーザは物足りない内容であることは否めません。
そこで本書では、「Ionicで作る モバイルアプリ制作入門」を読み終え、Ionicを使い慣れた中級者以上のユーザに向けて、プロダクションでの実コードをモデルとして様々なユースケースを提供します。本書で扱っているコードのすべては、著者が実務にて実装し、現在ユーザに利用しているコードがたたき台となっています。そのため、上記書籍のチュートリアルよりより実践的であり、また高度な内容となっています。
本書によって、Ionicへの理解を深め、より自由でネイティブUIとIonicのコンポーネントの意図に沿った実装の知見を共有できれば幸いです。
対象としているユーザ
- Ionicで作る モバイルアプリ制作入門[Angular版]を読了済み
- 実務でIonic/Angularを利用しており、使い慣れている
コードについて
Web上での公開なのでできるだけコピーしやすいように、全行がdiffで + のでるコードについては、diff表記ではなく、HTML、CSS、TypeScriptの表記でそのまま書いています。もし実際に手を動かす場合はコピーしてご利用ください。
行の一部に新行を挿入したり、また削除したりする場合はdiff表記としています。
注意書き
記載内容についてご質問があれば、以下のどちらかにお問い合わせください。
各章の内容紹介
各章の概要とチュートリアルで作成するアプリのアニメーション、そして目次を紹介します。
CHAPTER1 はじめに
本章です。
CHAPTER2 各章のベースとなるプロジェクト作成
プロジェクト作成をします。筆者が必ずプロジェクトで行う以下の初期設定についても行っていきます。
CHAPTER3 LINEライクなトークUIをちゃんとつくる
以下のようなUIを実装します。Ionicの既知の不具合を避けながら、Webでは難しいといわれている「上へのスクロールに伴いコンテンツの高さを計算」などを行います。
CHAPTER4 iOSでのキーボードの出現をスムーズにする
Capacitor iOSでは、 ion-footer を伴ったキーボードのスムーズな出現はサポートされていません。そこで、自分自身でキーボードの出現に伴ったコンテンツのリサイズを実装します。
Gifアニメーションの左が初期値、右が実装したものの動作となっています。
CHAPTER5 キーボードの代わりに絵文字フィールドを表示
非テキストベースのコミュニケーションが一般的になりました。絵文字で😆（嬉しい）を伝えたり、今向かってることを伝えるために🚃（電車）を送ったりとコミュニケーションは多彩化しています。
本章では、キーボードの代わりに絵文字フィールドを表示してタップで絵文字を送信できるようにします。
CHAPTER6 テストとリファクタリングで保守性をあげよう
前章まででつくったもののテストとリファクタリングを行います。ステップ別のテストと本格的なリファクタリングで、読みやすい、保守しやすいプロジェクトにしましょう。
CHAPTER7 ion-headerの高さをスクロールにあわせて変更する
iOSではLarge Titleが採用され、スクロールによりヘッダーコンテンツを切り替えるのが当たり前になりました。しかし、AndroidではLarge Titleは無効化され、採用できる部分は限定的です。そこで手動でスクロールによってヘッダーコンテンツを切り替えてみましょう。s
CHAPTER8 転ばぬ先の杖としてのAppflowのインストール
ストアアプリは配信後に重大な不具合があった場合、修正ビルドの審査から配信まで短い場合でも6時間、長い場合は数日かかる場合があります。そこで、WebViewとしての性質を最大限に使ったライブアップデートの方法について解説します。
万が一の時のために無料プランで備えておき、対応する時は規模によって有料プランにアップデートしてライブアップデートを行うのはアプリサービスにおいてとても有用です。
CHAPTER9 おわりに
おわりにです。