榊原昌彦

2019/01/24

Ionic 4 リリース!!: Ionic for Everyone

記事のアイキャッチ画像

おはようございます。
公式ブログで「Introducing Ionic 4: Ionic for Everyone」が発表され、Ionic 4が正式リリースされました!!ここで改めて、Ionicについての紹介と、4になって何が変わったかをまとめることにします。

Ionicとは

最近、私は「HTML5でモバイルアプリをつくるためのUIを中核にしたFramework」と紹介しています。

モバイルアプリをつくる方法は、一般的に「ネイティブ開発」といわれる、iOSではSwift/Objective-C、AndroidではJava/Kotlinで書く以外にもいくつかやり方があり、Ionicはその中のひとつの「HTML5でつくる」ところにフォーカスしています。HTML/CSSの豊かな表現力とWebの技術をそのままモバイルアプリ開発に持ち込むことができます!

ただ、iOSでしたらiOS User Interface Guidelines、AndroidでしたらMaterial Designという、Native UIのためのデザインガイドラインがあります。Appleは「Webエクスペリエンスではなく、iOSアプリのエクスペリエンスを提供することを保証する必要があります。」と述べており、ネイティブ開発しようが、HTML5でモバイルアプリをつくろうが、デバイスのデザイン文化に寄り添う必要があります。

参考:AppleとHTML(Adobe)

ただ、HTMLでモバイルコンポーネントデザインを1からやるのは大変ですよね(Material Designのクリック時エフェクトとか書きたくない!)。そこで、モバイルアプリをつくるためのUIフレームワークが必要になります。Ionicが担っている最も大きな役割はまさにこの部分になります。

一度、Ionicドキュメントのコンポーネント一覧をみてください。ネイティブのコンポーネントがWeb上で軽快に動作することが確認することができます。

スクリーンショット 2019-01-24 9.08.44.png

https://ionicframework.jp/docs/components

そして、HTML5でつくったWebページをCordovaやCapacitorという「ストアから配布できるようにするライブラリ」を使ってネイティブアプリにして配布します。

アメリカではアムトラック(全米鉄道旅客公社。日本でいうJR的立ち位置)やゼネラル・エレクトリック(アメリカの超有名企業。日本でいうSony的立ち位置)、日本ではテクノロジー情報に特化した情報収集サービス「TechFeed」をはじめとして世界的に多くの企業、開発者に採用されている人気の技術です。

UIフレームワークだけ?

モバイルアプリをつくるには、UIフレームワークだけでは完結しません。Ionicではモバイルアプリ開発をサポートするための多くのエコシステムを公式で提供しています。例えば、データのストレージへの保存(Ionic Storage)、指紋認証や傾きなどのデバイスAPIへのアクセス(Ionic Native)、開発支援のためのCLI(Ionic CLI)、Web上でビルドしたりエラーの収集を行ったりするオンラインツール(Ionic Appflow)などです。

そういった一連のFramework/プロジェクトを総称して、Ionicと呼んでいます。

Ionic 4になって何が変わったか

Ionic 2 から 4 への、この2年間の進化を振り返る で詳細をご紹介していますが、簡単にみていきます。

Web Componentsを採用して、Web標準になった

今まではAngularのComponents、Directiveを利用して構築されていたのですが、Web標準であるWeb Componentsを採用して再構成することにより、Angularに限らずすべてのフレームワーク(Vanilla JSでも!)で利用可能になりました。

ComponentsのLazy Loadingを採用することにより高速に

Ionicは基本的なモバイルUIを網羅したパッケージですので、Web上でアプリを公開する時に(最初にすべてのパッケージをDLするために)First Meaningful Paintが遅くなりがちでした。そこで、Ionic 4では、「利用するComponentsだけを、利用するタイミングでDLさせる(Lazy Loading)」するように設計されており、高速・軽快に利用することができます。

セマンティック バージョニングの採用

セマンティック バージョニング の採用によって、将来に技術的負債を持ちにくい仕組みに。(詳細は「プロダクト視点からのAngular/Ionicのバージョニングの魅力」をご覧ください)。ちなみに、Ionic 4はLTSになりました。

Componentsの改善と追加

iOS User Interface GuidelinesとMaterial Designの更新に追随して、Componentsのデザインの改善と新たなComponentsの追加が行われています。

Ionic for Everyone

最も大きな変化は、フレームワーク非依存になったので、フレームワークの破壊的変更に柔軟に対応できるようになったことでしょうか。

また、Ionic 4リリースにあわせて、 `@ionic/angular` の4.0.0も正式リリースとなりました。フレームワーク非依存とはいってもフレームワークのRouterを使ったり、呼び出しメソッドをフレームワークのルールに乗るための薄いラッパーは必要で、これまで通りフレームワークへのサポートは行われます。私的には、AngularのデフォルトRouterとCLIを使えるようになったのはかなり大きなメリットだと思っております。

また、`@ionic/react`、`@ionic/vue`の開発も進んでいますので(現在、alpha版)、これからより用途とユーザは広がっていきそうな予感があります。

HTML5アプリのUIフレームワーク、そしてエコシステムが大きく発展してきたことで、Web制作者はわずかな投資でモバイルネイティブのアプリをリリースすることができるようになりました。また、PWAによって「Web上でできること」も増えてきています。

ぜひこれを機会にチャレンジしてください!

コミュニティ

Ionic Frameworkの日本コミュニティとして、Ionic Japan Users Groupがあります。普段、slackでコミュニケーションしており(https://ionic-jp.herokuapp.com/)、また定期的にIT勉強会のイベントも開催しておりますので、ぜひご参加ください。

https://ionicframework.jp/docs/

の日本語化プロジェクトもすすめておりますので、ご利用いただけましたら幸いです。

それでは、また。

Cookieを利用します

このWebサイトでは、Google Analyticsをアクセス解析のために導入しており、個人データであるCookieにアクセスします。引き続き利用する場合はCookieの利用への同意が必要です。

同意する