ハイブリッドアプリ開発におけるフロントエンドフレームワーク
2020.12.23. アシアル株式会社

URL: http://ja.monaca.io/ Copyright ©Asial Corporation. All Rights reserved.

アシアル株式会社について

会社概要● 設立 ：2002年● 事業所 ：東京（本社）、サンフランシスコ、ブダペスト● 従業員数：約50名（エンジニアおよびデザイナーが8割、8国籍）
事業内容● 受託開発事業：フロントエンド開発、バックエンド開発● 自社プロダクト事業：開発プラットフォーム「Monaca」、UIフレームワーク「Onsen UI」● 教育事業：アシアル情報教育研究所、各種研修、執筆・出版

URL: http://ja.monaca.io/ Copyright ©Asial Corporation. All Rights reserved.

2

2

本日お話しすること●

ハイブリッドアプリとは●ハイブリッドアプリ開発に利用されるフレームワーク例●

開発プラットフォーム「Monaca」について

URL: http://ja.monaca.io/ Copyright ©Asial Corporation. All Rights reserved.

3

3

ハイブリッドアプリとは標準的なWeb技術（HTML5+CSS3+JavaScript）で開発できるモバイルアプリ

URL: http://ja.monaca.io/ Copyright ©Asial Corporation. All Rights reserved.

44

ハイブリッドアプリとはiOS／Android アプリを、一つのソースコードで開発できる●●●

初期コストの低減
開発、更新の効率化
開発者の確保

URL: http://ja.monaca.io/ Copyright ©Asial Corporation. All Rights reserved.

55

ハイブリッドアプリ開発に利用されるフレームワーク
概要

開発元

使用言語

ApacheCordova

端末内のブラウザエンジンを利用したフレームワーク。
UIはHTMLで記述する。
コンパイル時、開発者側で明示的に追加したプラグインのみが組み込まれる。

オープンソースHTML / CSS / JavaScript

React Native

Reactのモバイル向けフレームワーク。
UIは独自構文（JSX）で記述し、コンパイル時にネイティブのUIコンポーネントに変換される。
カメラなどのネイティブ機能が標準で組み込まれる。

FacebookJavaScript

Xamarin

ネイティブのAPIを100％利用可能。
UIはOSごとに記述する。

MicrosoftC#Flutter

比較的新しいフレームワーク。
標準のUIセット（widget）が豊富。

GoogleDart

URL: http://ja.monaca.io/ Copyright ©Asial Corporation. All Rights reserved.

66ハイブリッドアプリ開発に利用されるフレームワーク（UI/UX）

Onsen UI

Framework7●

モバイルアプリの開発に特化したUIコンポーネント●

ハイブリッドアプリ、Webアプリ向けUIコンポーネント●

ネイティブなiOSとAndroidのデザインガイドに準拠したデザイ
ンと機能●

iOSとGoogleのマテリアルデザインにフォーカス●

無料かつオープンソース（MIT license）●

無料かつオープンソース（Apache v2 license）
動作例 >>
動作例 >>

URL: http://ja.monaca.io/ Copyright ©Asial Corporation. All Rights reserved.

7

7

開発プラットフォーム「Monaca」についてクラウド環境でハイブリッドアプリを開発できるプラットフォーム
クラウドに用意された統合開発環境（IDE）にサインインするだけですぐに開発をスタートできます。

日本語サポート ＆豊富な利用実績
アシアル株 式 会 社のプロダクトであり、ドキュメントやサポートは日本語で提供。
これまでに25 万 超 のユーザーに 利 用 され、10万以上のアプリがビルドされています。

URL: http://ja.monaca.io/ Copyright ©Asial Corporation. All Rights reserved.

88

開発プラットフォーム「Monaca」について
ベースはCordova
Cordovaを利用したハイブリッドアプリ開発が可能です。

Web標準技術でアプリを開発
MonacaではHTML5、JavaScriptといったWeb 標 準 技 術 を 用 いてiOS、Android 向 けのモバイルアプリ、Windowsそしてブラウザー 向 けのPWAアプリの開発を行えます。

HTML5を用いて簡単にiOS、AndroidのUIコンポーネントや 画面遷移 を実装できます。

URL: http://ja.monaca.io/ Copyright ©Asial Corporation. All Rights reserved.

99

開発プラットフォーム「Monaca」について開発環境の構築は不要
ブラウザやコマンドラインツールを 通 じてクラウド環境にアクセスするだけで、プロジェクトの 作 成 からアプリのリリースまで全ての操作を行えます。

WindowsでもiOSアプリ開発
iOSアプリのビルドに 必

要 なMacも、クラウドに用意されています。
Macを使わずにWindowsPCだけでもiOSアプリの開発やストア公開を行えます。

URL: http://ja.monaca.io/ Copyright ©Asial Corporation. All Rights reserved.

1010

開発プラットフォーム「Monaca」について
導入事例

ジャパンネット銀行 様｜残高照会アプリ●●●

自社でのメンテナンスを見据え、Web技術による開発を採用
Onsen UI活用で、期待する操作感を実現
Monacaの機能でアプリ側のリソースファイルを暗号化

テレビ朝日 様｜映像・写真投稿アプリ●●●

ネイティブ開発と比較し、コスト半減
2人月という短期間でのリリース
高評価アプリによって、投稿数が約3倍に増加

東京カレンダー 様｜東カレアプリ●●●

開発期間を1か月短縮、テスト工数50％減
Macを使わずにiPhone向けアプリ開発
開発人員の増減に柔軟に対応
ほかのMonaca導入事例はこちら >>URL: http://ja.monaca.io/ Copyright ©Asial Corporation. All Rights reserved.

1111

開発プラットフォーム「Monaca」について

https://ja.monaca.io/platform/

すべてのプランで、14日間の無料トライアルをご利用いただけます。

URL: http://ja.monaca.io/ Copyright ©Asial Corporation. All Rights reserved.

1212こちらでも情報発信していますTwitter●●

アシアルアカウント： @asialnews（https://twitter.com/asialnews）
Monacaアカウント ： @monaca_ja（https://twitter.com/monaca_ja）

Facebook●●

アシアルアカウント： @asial.co.jp（https://www.facebook.com/asial.co.jp）
Monacaアカウント ： @monaca.io（https://www.facebook.com/monaca.io）

ブログ
●
●
●

Asial Developers Blog： https://blog.asial.co.jp/
モナカプレス： https://press.monaca.io/
エンジニアリングで世界をちょっとよくするノートbyアシアル： https://note.asial.co.jp/

URL: http://ja.monaca.io/ Copyright ©Asial Corporation. All Rights reserved.

1313