ハイブリッドモバイルアプリのための12のフレームワーク

ハイブリッドモバイルアプリフレームワークを使うと、開発者は一度だけコードを書いて、メインプラットフォームで追加作業なしに動くモバイルアプリを作れるので楽ですね。アプリはAndroidとiOSで動くし、そのコードはプログレッシブウェブアプリや(いくつかの調整を加えてElectronを使えば)デスクトップアプリケーションにも使い回せます。

この記事では、スゴいハイブリッドモバイルアプリを作るための役に立つフレームワークを12個紹介します。

1. React Native


React Native

React Nativeでは、JavaScriptだけでモバイルアプリが作れます。Reactと同じデザインを使って、宣言型のコンポーネントから豊かなモバイルUIを組み立てられます。

このフレームワークを使うと、「モバイルウェブアプリ」や「HTML5アプリ」、「ハイブリッドアプリ」を作るんじゃなくて、Objective-CやJavaを使って作られた本物のモバイルアプリと見分けがつかないものを作れます。React Nativeは、普通のiOSやAndroidアプリと同じ基本的なUIビルディングブロックを使います。それらをJavaScriptとReactを使って組み合わせるだけです。

もしReact Nativeでアプリを作っているなら、こちらのガイドを見てコードを保護していることを確かめてください。

2. Ionic Framework


Ionic Framework

Ionic Frameworkは、ハイブリッドモバイルアプリ開発用の完全なオープンソースのSDKです。CSS、HTML5、Sassといったウェブ技術を使ってハイブリッドモバイルアプリ開発のツールやサービスを提供します。アプリはこれらのウェブ技術で作られ、Cordovaを利用してネイティブアプリストアを通じてデバイスにインストールできます。

このフレームワークは100%フリーでオープンソースで、MITライセンスのもとにあり、大規模な国際コミュニティに支えられています。Cordova/PhoneGapプラグインやTypeScriptエクステンションを使って、Bluetooth、HealthKit、フィンガープリント認証など120以上のネイティブデバイス機能を持っています。CLIを使って、あらゆるプラットフォームにアプリを作成、ビルド、テスト、デプロイできます。アイコンパックのIoniconsを使って、最も一般的なアプリアイコンの何百もを提供しています。Live Reloadにより開発中のアプリをそのつどコンパイルして再デプロイする手間がありません。さらに、ディープリンキング、AoTコンパイリング、カスタムアニメーションAPIなどの役立つ機能があります。

Ionicはフレームワークに依存せず、React、Preact、Angular、Vue、さらにはWeb Componentsの公式サポートがあります。Ionicバージョン5ではたくさんのUIが更新されました。

サイドノート:Ionicソースコードの保護

Ionicモバイルハイブリッドアプリを保護する方法に関する網羅的なチュートリアルがあります。リバースエンジニアリングされたり、コードが盗まれたり、改ざんされるのを防ぎたいなら、こちらをチェックしてみてください!

3. NativeScript


NativeScript

最初にProgress社により作られたNativeScriptは、JavaScript、あるいはTypeScriptのようなJavaScriptにトランスパイルされる言語を使ってアプリをビルドします。

このハイブリッドモバイルアプリフレームワークは、Angular CLI、ルーターサポート、コード生成といったモダンなAngularバージョンとの深い統合を提供します。また、コミュニティが開発したプラグインを通じてVueとの統合も含まれており、Vue CLI、Vuex、その他のVue.jsの素晴らしい機能が使用可能です。

では、NativeScriptで作られたハイブリッドモバイルアプリはどんなものでしょうか?実際、NativeScriptで作られたモバイルアプリケーションは完全にネイティブアプリですし、XcodeやAndroid Studioで開発されたものと同じAPIを使っています。つまり、WebViewなしのプラットフォームネイティブのUIを持ち、ネイティブに近いパフォーマンスで動作します。

さらに、開発者はCocoapods、Android Arsenal、Maven、npm.jsからのサードパーティライブラリをラッパーなしでモバイルアプリケーションに再利用できます。

サイドノート:NativeScriptソースコードの保護

protecting-nativescript-apps-with-jscrambler

Progress Telerikは、NativeScriptアプリケーションを保護するための選択ソリューションとしてJscramblerを推奨しています!統合ガイドはこちらです。

4. Quasar


Quasar Framework

Quasar FrameworkはVue.jsによって強化されており、開発者は一度コードを書くだけで、ウェブサイト(SPA、PWA、SSR)、モバイルアプリ(iOS、Android)、デスクトップ(Electronを使って)として同時にデプロイすることができます。

クワサーは、Googleのマテリアルデザインガイドラインに従って最先端のUIを提供するだけでなく、HTML/CSS/JSの縮小化、キャッシュバスティング、ツリーシェイキング、ソースマッピング、コード分割・遅延読み込み、ES6トランスパイリング、コードのリント処理、アクセシビリティ機能などを提供し、最もパフォーマンスに焦点を当てたフレームワークです - 事実、このフレームワークの開発者は「最もパフォーマンスにフォーカスしたフレームワーク」と主張しています。

クワサーCLIを使用すると、開発者はホットリローディングなどの追加機能も利用できます。また、非常に詳細なドキュメントと活動的なコミュニティにより、フレームワークはよく評価されています。

また、Quasarは100%無料でオープンソースで、MITライセンスの下にあります。

5. Kendo UI


Kendo UI

Kendo UIは、jQuery、Angular、React、Vue用のライブラリを備えた非常に広範なJavaScript UIコンポーネントのコレクションを提供し、ハイブリッドモバイルアプリの作成に役立ちます。Progress Telerik(NativeScriptの親組織)によってサポートされており、jQuery、Angular、React、Vue用の何十もの使いやすいウィジェットがあり、開発チームが高性能のハイブリッドモバイルアプリを迅速に構築できるようにフォーカスしています。

このハイブリッドアプリフレームワークはオープンソースですが、エンタープライズ顧客向けに作られています - 現時点では無料バージョンはありません。Kendo UIの売りの一つは、世界クラスのサポートを受け、各コンポーネントが厳しいQAプロセスを経て徹底的にテストされている点です。

HP、NASA、その他世界中の14万社以上の顧客がKendo UIを利用しており、エンタープライズグレードのソリューションと専用サポートを求める場合に検討する価値があるハイブリッドアプリ開発フレームワークです。

6. Framework7


Framework7

Framework7は無料でオープンソースのモバイルHTMLフレームワークで、ネイティブのような外観と感触のハイブリッドモバイルアプリ、ウェブアプリ、プログレッシブウェブアプリ(PWAs)を開発するために使用されます。さらに、ElectronやNW.jsなどの追加ツールと組み合わせることで、ネイティブのデスクトップアプリを作成することもできます。

このハイブリッドアプリフレームワークは、必要な場合にすぐに機能するアプリプロトタイプを表示するための代替手段として、欠かせないプロトタイピングツールになり得ます。iOSとGoogle Materialのデザインに注力して、最高のエクスペリエンスとシンプルさを提供します。

Framework7も同様に、Vue、React、そしてSvelteのような人気のあるJSフレームワーク向けの豊かなコンポーネントエコシステムを提供しています。

Framework7によって提供されるいくつかの便利な機能には、ネイティブスクロール、ライブラリ独立、ページ遷移アニメーション、マルチビュー対応、CSS3によるハードウェア加速アニメーション、XHR、キャッシング、ブラウザ履歴、プリロードを使ったページのルーティングなどがあります。

7. Aurelia


Aurelia Logo

Aureliaは自身を「ブラウザ、デスクトップ、モバイルアプリケーションを構築するための強力なプラットフォームとして機能する、モダンなJavaScriptモジュールのコレクション」と説明しています。したがって、Aureliaのどのモジュールも任意のJavaScriptまたはNode.jsプロジェクトで単独で使用できます。

クリーンかつ強力なコードを重視するAureliaは、特にバニラJavaScriptまたはTypeScriptを好む人々向けです。実際、彼らは「バニラJavaScript/TypeScriptでコンポーネントを作成できる唯一のフレームワーク」と主張しています。それでも、ウェブ標準を厳格に順

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/jscrambler/12-frameworks-for-hybrid-mobile-apps-546d