目次
まえがき
第1章 Ionicについて
第2章 Webサービスの設計
第3章 セットアップ
第4章 ユーザー認証の実装
第5章 Homeページの作成とデータの作成、読み取り、更新
第6章 OGP画像の生成とmetaタグの動的書き換え
第7章 サービスの完成
まえがき
私が初めてIonicを触ったのは、新卒入社した会社で組み込みエンジニアとして働いているときでした。仕事とは別に趣味でアプリ開発をしており、様々なフレームワークを試し結果、Ionicを使ってアプリ開発をすることを選択しました。当時の私はWindowsのPCしか持っていなかったため、iOSアプリ開発のために、ハイブリッド・フレームワークを選択するしかないという理由もありました。しかし、結果から見れば、初学者に易しいIonicに選択したおかげで、挫折することなくアプリ開発を行うことができました。あのときIonicを使い始めなければ、今も組み込みエンジニアとして働いていたでしょう。振り返ってみると、人生の中でも大きな選択だったと思います。
その後は、Ionicを使って様々なWebサービスを作ってきました。今では、仕事でもIonicを使い、後輩に使い方を教えることもあれば、Ionicに興味がある人にメリットを話したりもしています。そんな中で、Ionicに興味がある人は、自分でサービス開発をしたい人が多いことがわかってきました。そこで、IonicでWebサービスを開発する方法を本としてまとめようと思ったのが、本書の執筆の動機です。
本書は、Ionicを使ったWebサービス（具体的には、匿名質問サービス）を開発するハンズオンになっています。本書で作成する匿名質問サービスは、実際にユーザーにログインしてもらったり、質問を投稿してもらったりできます。このWebサービスを作りながら、Ionicはもちろん、Firebaseによるユーザー認証やサイトの公開、Firestoreによるデータの永続化、CloudFunctionsによるOGP対応、StencilJS、HTMLのレイアウト、スタイルシート、開発の優先順位のつけ方などを学んでもらいます。どれも、自分でWebサービスを開発するのに欠かせない技術です。
私の経験上、Webサービスを作成できるようになる近道は、Webサービスを作成することです。矛盾するようですが、自分なりのテーマを決めてWebサービスを作り続けることによって、自分の思ったものは何でも作れるようになります。私も、とあるビジネスコンテストで、デモアプリを人に見せられるレベルまで完成させたことが大きな経験となり、その後、様々なWebサービスを作るきっかけになりました。今、「作りたいWebサービスがあるけど、その技術力がない」という人は、本書の匿名質問サービスをWebサービス開発の第一歩として、ぜひ作りきってみてください。その経験が、あなたが自分のアイデアを形にできる技術力を身につける近道になると幸いです。
初版との違い
本書は2019年4月の技術書典6で頒布した「Ionicで始めるPWA開発」の改訂版になります。初版から改定したのは以下になります。
・Ionic、StencilJSの最新バージョンに対応
・FirestoreをJavaScriptSDKで利用
・Interfacesファイルの作成
各パッケージのバージョンアップは当然として、大きな変更としてFirestoreの活用を大幅に増やしています。また、全体の文章や説明の足りていなかったところも大幅に加筆修正しております。
対象読者
本書の対象読者はWebサービス開発に興味のあるエンジニアです。ある程度、HTML、JavaScript、CSSに触れた経験がある人を想定しています。目安として、React、Angular、Vue、いずれかのチュートリアルを終えていれば、本書の内容が理解しやすいと思います。それ以外の方には難しい部分もあるかもしれませんが、基本的には本書の手順に沿ってコードを追加していけば、読み終えることができると思います。
サンプルコードについて
GitHubリポジトリで、本書で作成するアプリケーションのコードを公開しています。
・https://github.com/scrpgil/anonymous-question-service-sample
また、サンプルコードは章ごとにブランチが作成しています。表1がその対応表になります。
| ブランチ | 章 |
| setup | 3章 |
| firebase | 4章 |
| home | 5章 |
| ogp | 6章 |
| extends | 7章 |
謝辞
本書を作成するにあたって、松本一将さん(株式会社ベンジャミン所属)に協力していただきました。本書のハンズオンのレビューに、執筆初期から、何か月も長期間に渡って参加してくださり、実際に実施してくださいました。松本さんからいただいた多数の提案や不備の指摘のおかげで、本書の完成度を高めることができ、深く感謝しております。
また、表紙のキャラクターはイラストレーターのαさんに作成していただきました。「休日に個人開発に取り組むプログラマー女子」というざっくりとした要望でしたが、イメージ通りのキャラクターをデザインしていただき感謝しています。
免責事項
本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。また、本書の情報は第１刷発行時点のものを記載しています。Firebaseなどの各種サービスはご利用時には変更されている場合があります。
第1章 Ionicについて
改めて、本書を手にとっていただきありがとうございます。本書は、Ionicを使って匿名質問サービスを作りながら、Webサービス開発の方法を学ぶ本です。最後まで読んでいただければ、自分のアイデアを形にする方法を学べると思います。
さて、本書はWebサービスの開発にIonic(アイオニック)というフレームワークを利用しています。Ionicは、世界中で多くのアプリに利用されていますが、日本ではそこまで知名度がないのが現状です。そこで、まずはIonicについて解説したいと思います。なぜIonicを使うのか、Ionicを使うメリットは何かということに知っていただければ幸いです。
1.1 はじめに
Ionic Framework(アイオニック・フレームワーク)1は、標準的なWeb技術(HTML、CSS、JavaScript)で記述された、UIフレームワークです。2013年に登場したIonicは、高品質なUIコンポーネントと、ひとつのコードで主要なモバイルプラットフォーム(iOS、Android)に対応できる利点から、人気のUIフレームワークとして発展してきました。現在では、ハイブリッドアプリ開発のフレームワークとして、スタートアップや、個人開発者によく使われています。
Ionicが長きに渡って支持されている理由はなんでしょうか？
ひとつ目の理由は、IonicがWeb技術の進化に適応し、変化し続けているからだと思います。登場時は、AngularJS2で記述されていたIonicは、Web技術の発展とともに変化してきました。たとえば、Angular23が登場したときは、IonicもJavaScript・CSSから、TypeScript・SASSに移行したり、PWA(Progressive Web Apps)4も早くから対応してきました。現在では、IonicはWebコンポーネント5で書き直され、Angularだけでなく、React6、Vue7といった主要なフレームワークでも利用できるようになりました。また、ブラウザやアプリの変化も素早く対応しており、一部はIonic公式ブログ8で情報発信されています。Ionicをキャッチアップすれば、Webの進化もキャッチアップできると思います。
もうひとつは、Ionicがモバイル対応のUIフレームワークとして、非常に高い完成度を持っていることです。たとえば、図1.1は、Ionicが提供しているアラートのコンポーネントです。iOSが公式で提供しているアラートと比較しても、それほど差はありません。表示時のアニメーションも違和感ありません。一般的なユーザーは、Ionicで作られたアプリを触っても、違和感を感じることはほとんどないでしょう。
また、iOSのHuman User Interface9、AndroidのMaterialDesign10の両方に対応しており、アクセスした端末により自動的にiOS向けのUIと、Android向けのUIを切り替えることが可能です。図1.2は、Ionicで作られたデモアプリです。iOSとAndoridで、検索バー、アイコンなどの表示が切り替わっているのがわかると思います。
これは、Ionicを使うとマルチプラットフォーム対応のコストを大幅に下げられるということです。複数の端末にUIを対応させる時間を取られず、より多くの時間をサービスのコア機能の向上にあてることができるのです。
Web標準技術について
本書の読者は何かしらWeb開発に携わっていると思いますので、HTML、CSS、JavaScriptといったWeb標準技術については知っているかと思います。もし知らない人でも、本書に沿ってコードを写経していくだけなら特に問題はないと思いますが、知っていたほうが何かと躓くことが少ないかと思います。そのため、この場でWeb標準技術についても軽く触れたいと思います。
まずHTMLですが、これはテキストや画像、ボタンといった画面を構成する情報要素を構築するものです。Web上に表示されるものは全てHTMLによって構成されています。次にCSSですが、これは情報要素のスタイリングをするものです。たとえばテキストのサイズや色、各要素間の距離(pxという単位で表すことが多い)を記述します。
最後に、JavaScriptですが、これはHTMLとCSSを動的に変更するものです。ボタンを押したときに、ローディング中表示を出すなどに使われます。現在では、JavaScriptによりクライアント側でHTMLを構築するSPA(シングルページアプリケーション)のサイトが増えており、SPAのサイトを作成するためのフレームワークも広く使われています。
1.1.1 StencilJSについて
さきほど、主要なフレームワークとしてAngularやReactの名前を出しましたが、本書ではこれらのフレームワークは利用しません。代わりに、StencilJS11というライブラリを利用します。StencilJSは、Ionicチームが開発したWebコンポーネント作成のためのライブラリで、JSX + TypeScriptを使用して、Webコンポーネントを開発できます。Ionic自体も、このStencilJSを用いて開発されています。
なぜ、本書では一般的なフレームワークを使わないのかというと、ReactやAngularといった主要なフレームワークは、それ自体が仕様が大きなフレームワークであり、学ばなければならないことが多くなるからです。もちろんReactもAngularも大事な技術なので、将来的には使えるようになった方がよいでしょう。ただ、Webサービスを初めて見る初期の段階では、なくても問題ありません。また、フレームワーク自体の進化が激しく、本書のサービスでそれらのフレームワークを使うと、あっという間に内容が古くなってしまう可能性があるからです。反面、StencilJSは仕様がコンパクトで、すぐに習得が可能です。また、StencilJSに触れることで、後々Ionicのソースコードを読みにいけるようになります。OSS(オープンソースソフトウェア)を使っていると、エラーを踏み、実装上どうなっているのかOSS本体のコードを読みにいくことはよくあります。
このように、StencilJSを利用することで、様々なメリットが得られます。
1.2 最初のIonicプロジェクト
なんとなくIonicの概要がつかめたと思いますので、この節で実際にIonicを触ってみましょう。Ionicを使うためには、NodeJS12というJavaScriptの実行環境が必要です。もしこの時点でNodeJSをインストールしていなければ、公式サイトから最新のNodeJSをダウンロードしてインストールしてください。
NodeJSがインストールできたら、次はIonicのプロジェクトを作成します。本書はPWA Toolkit13というスタートプロジェクトを利用します。PWA Toolkitは、IonicとStencilを利用したPWA作成のためのスタータープロジェクトで、Ionicチームにより開発されています。
それでは、ターミナルを立ち上げ、次のコマンドを実行してください。
npm init stencil ionic-pwa
ターミナル上に"Project name :"と表示されるので、任意の名称を記入しましょう（ここでは"ionic-pwa-demo"とします）。また、実行の最終確認"Confrim(y/n) : "が行われるので、"y"と入力しましょう。
Project name : ionic-pwa-demo
Confrim(Y/n) : y
これで新規のIonicプロジェクトが作成されました。次は、このプロジェクトを起動させたいと思います。プロジェクトのディレクトリに移動し、次のコマンドを実行しましょう。
cd ionic-pwa-demo
npm install
npmとは、パッケージ管理システムで、npm installとは、package.jsonに記載されたパッケージをインストールする処理です。インストールが終わったら次のコマンドを実行し、アプリを起動させます。
npm run start
図1.4のような画面が表示されたら、アプリの起動は成功です。
1.2.1 ディレクトリ構成
PWA Toolkitで作成されたプロジェクトのディレクトリ構成はどのようになっているのでしょうか？表1.1を見てみてください。
色々なフォルダがありますが、実際に開発で変更するのはsrcフォルダがほとんどです。
| ファイル | 説明 |
| src | ソースの略。 |
| src/assets | 静的なファイルを配置するフォルダ。 |
| src/components | 各コンポーネントが入っている。一番よく触る場所。 |
| src/global | グローバルなCSSはここ。共通で使う設定はここに書く。 |
| src/helpers | 共通関数のファイルはここに置く。 |
| src/index.html | 最初に表示するHTMLファイル。 |
| stencil.config.js | plugin等の設定を行う。 |
1.2.2 UIの切り替え
PCのWebブラウザで見るIonicは、MaterialDesignのUIになっています。せっかくなので、UIをiOSに切り替えたいと思います。Ionicは表示の切り替えをアクセスしたブラウザのUserAgent14を見て行います。ChromeブラウザのDeveloperToolsというデバッグツールを使えば、iOSのUserAgeentに切り替えることができます。
それでは、画面上を右クリックして、「要素を検証」を選択します。図1.5のようなDevToolsが表示されますので、左上あたりにある矢印アイコンの右側にあるスマートフォンっぽいアイコンをクリックします。これで、Deviceツールバーが表示されるので、iPhoneXにデバイスを切り替えてから、ページを再読み込みします。ページ再読み込みにより、、ボタンやヘッダーのUIが切り替われば成功です。
ちなみに、本書で作成する匿名質問サービスは、主にスマートフォンからアクセスされることを想定しています。そのため、この機能を使って、常にスマホ向けのUIで開発することを推奨します。
公式ドキュメント
Ionicをより詳しく知りたいなら、やはり公式ドキュメントを追うのが一番です。特に公式ドキュメントのUIコンポーネントライブラリは、読みやすくまとまった仕様書として、とても重宝します。ドキュメント内でiOS、Androidの切り替えが可能なので、特定のUIについて「iOSならこう？」「Androidならこう？」といったデザインの確認に役立ちます。英語が苦手な人は、日本のIonicコミュニティにより日本語訳されたサイト15もありますので、そちらを利用してください。
1.3 最後に
この章では、Ionicの概要からプロジェクトの立ち上げ方、ディレクトリ構成、ChromeのDevToolsを使ったUIの切り替えなどを解説しました。この章の内容は、基礎的な内容ですが、これから匿名質問サービスを作る上で知っておくと良い知識になります。もし、この章の内容で気になったところや、興味があるところがあったら、ぜひとも深ぼって調べてみましょう。
1.3.1 本章のまとめ
・Ionicはハイブリッドアプリ向けのUIフレームワークである
・IonicはReact、Angular、Vueといった主要なフレームワークで利用可能である
・IonicはStencilJSにより作られている
・IonicはUserAgentによってiOS、Androidの表示を切り替える
・UserAgentの載せ替えはChromeを使って行える
・PWA ToolkitはIonicが提供するPWA作成のためのスタータープロジェクト