読者です 読者をやめる 読者になる 読者になる

アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

アプリカンが提供する「ハイブリッドアプリ」とは?

アプリカンはHTML/JavaScript/スタイルシートなど、いわゆるWebフロントエンドの技術を使ってiOS/Androidアプリを開発するサービスになります。そうして開発されたアプリは一般的にハイブリッドアプリと呼ばれています。

ではこのハイブリッドアプリとはそもそも何なのでしょうか。今回はその「ハイブリッドアプリ」について説明します。

スマートフォンアプリの種類

スマートフォンやタブレット向けに提供されるアプリは大きく分けて2種類あります。一つはネイティブアプリ、もう一つはWebアプリです。

ネイティブアプリ

iOS(iPhoneやiPad、iPod Touch)向けであればObjective-CまたはSwiftという言語によってアプリが開発できます。Androidであれば主にJavaによってアプリが開発できるようになっています。これらはビルド(コンパイル)することによってiOSやAndroid向けのアプリができあがります。ネイティブアプリはApp StoreやGoogle Playで配布(販売)可能で、加速度センサーやアプリ内課金、バックグラウンド処理、プッシュ通知などiOSやAndroidが提供する機能(API)を余すところなく利用できます。

ネイティブアプリ版Gmail

Webアプリ

WebアプリはiOSであればMobile Safari、AndroidであればGoogle ChromeといったWebブラウザを使って利用します。従来のWebサイトと異なり、AjaxやJavaScriptを使うことで画面遷移の少ない、アニメーションを使ったスムーズな操作が実現できます。

天気表示や乗り換え案内といったシンプルなWebアプリをはじめ、GoogleスプレッドシートやGmailのような大規模なWebアプリケーションまで実に多彩です。こうしたWebアプリの利点として、URLさえ分かればインストールする必要なく利用できるという点があげられます。難点としてはWebブラウザが提供する機能(API)はiOSやAndroidが提供する機能に比べると一部でしかないため、機能制限があるという点があげられます。

Webアプリ版Gmail

ネイティブアプリとWebアプリの違い

インストール必須と不要

ネイティブアプリはApp StoreやGoogle Playを通じて配布されます(エンタープライズ向け、ごく一部のテスター環境は除きます)。そのため利用者はApp StoreやGoogle Playを通じて新しいアプリを知るチャンスがあります。インストール時には各サービスのアカウントが必須になります。Webアプリの場合はそういったインストールの手間はありません。Webブラウザでアクセスすればすぐに使い始められます。

逆に言うとアプリはインストールの敷居が高いものの、ホームボタンに追加されるので何度も利用される可能性が高くなります。Webアプリもホームボタンに追加はできるのですが、あまり利用はされていません。そのためGoogleなどの検索エンジンからの利用が多く、再訪までの道のりが遠くなりがちです。

利用できるAPIの制限

ネイティブアプリはフルにAPIへアクセスできるのに対してWebアプリでは大きな制限があります。位置情報、傾き、カメラへのアクセスはできるようになっていますが、ネイティブアプリに比べると機能上の制限は大きいと感じられるでしょう。

アプリ内課金であったり、HelthKitのような技術も利用できません。また、Webアプリではハードウェアへのアクセスも制限があるので、USBコネクタを介して通信したり、BluetoothやNFCを使うこともできません。

開発言語の違い

ネイティブアプリはObjective-CやSwift、Javaなどを使って開発します。Webアプリの場合はHTML5/JavaScriptで行うのが基本です。JavaScriptはスクリプト言語になるので、難読化処理はできますが、それでもスクリプト全体が誰でも読める状態にあるという問題があります。そのため、セキュリティキーなどを埋め込むのはお勧めされません。

HTML5/JavaScriptは従来のWeb開発者が使ってきたプログラミング言語であり、習得コストが低いという利点があります。Objective-CやSwift、Javaなどを習得し、かつスマートフォン向けに適切なコーディングを行うのは十分な学習期間が必要です。

実行速度

一般的にネイティブアプリに比べるとWebアプリは実行速度が遅いと言われています。iOSやAndroidがバージョンアップするのに伴って改善されていますが、それでもネイティブアプリ以上になることはありません。そのためグラフィクスにこだわったゲームや3Dなどの表現はWebアプリで満足な速度を出すのは困難とされています。

ハイブリッドアプリとは?

このようにネイティブアプリ、Webアプリともに一長一短があります。これはどちらが優れていて、どちらかは駄目であるという話ではなく、双方の利点欠点を知った上で、要件に合わせて必要な技術を選定する必要があるということです。そしてさらに双方のいいとこ取りとして開発されているのがハイブリッドアプリになります。

ハイブリッドアプリはWebViewと呼ばれるHTMLを表示する機能を内包しているのが特徴になります。つまりアプリの中でHTML/JavaScriptを表示しています。そしてネイティブアプリが使っているのと同じ各種APIとWebViewとを橋渡しするようになっています。

ハイブリッドアプリの構成

その橋渡しによって、JavaScriptから本来Webアプリとしては利用できない機能を使えるようになります。Web技術を使った習得コストの低さと、豊富な機能とを兼ね備えた存在なのがハイブリッドアプリということです。

Webアプリにネイティブアプリの機能が備わることでハイブリッドアプリになると言えるでしょう。

ハイブリッドアプリの特徴

Webアプリにはなくてハイブリッドアプリには備わっている主な特徴を紹介します。

アプリストア(App Store/Google Play)で配信できる

ハイブリッドアプリは形態としてはネイティブアプリと変わりませんのでiOS、Androidの提供するアプリストアを使って配信ができます。もちろん有料での販売もできます。

多彩なAPIを利用できる

Web技術だけでは利用できなかったAPIを使えるようになります。例えばファイルの書き込み、読み込みもできます。他にもアプリ内課金やオフライン利用も容易に実現します。プッシュ通知を利用できるのもハイブリッドアプリの大きな利点の一つです。

iOS/Androidなどを同時に開発できる

ハイブリッドアプリの場合、HTML/JavaScriptをラッピングして動作します。そのためラッピングするフレームワーク(システム)の違いはあれど、動作しているHTML/JavaScriptはiOS/Androidの違いはなく利用できます。これはWebアプリケーションが異なるブラウザに対しても共通した仕組みで動作するのと同じです。

さらにWindows 8アプリやFirefox OSであってもフレームワークが対応していれば同じHTML/JavaScriptでアプリが作れるようになります。

外部サイトのWeb APIを利用できる

Webブラウザの場合、セキュリティ上の問題から外部サイトのリソースを取得するのは大きな制限があります。JSONPを使って一部解決はできますが、それでも大きなネックになりえます。ハイブリッドアプリの場合、OSの機能を使って外部リソースに対してアクセスします。ドメインは関係なくアクセスできますので、外部サイトのデータを組み合わせたマッシュアップアプリを作るのは簡単です。

ハイブリッドアプリを作るのに必要な知識

さて、では実際にハイブリッドアプリを開発してみたいと思ったらどういった知識があれば良いのでしょうか。

HTML/スタイルシートを使った画面設計およびデザイン

ハイブリッドアプリはWebアプリと同じくHTML/スタイルシートを使って画面デザインを行います。特に最近ではHTML5を使って開発することが多いです。

また、CSSの最新版であるCSS3ではアニメーション機能も拡充しています。そういった機能を使うことでネイティブアプリに似たスムーズなページ切り替えやエフェクトが可能になります。

JavaScript

ハイブリッドアプリの機能はJavaScriptによって作られます。大型なアプリになると、MVCのようなメンテナンス性、開発効率の良い仕組みを取り入れる必要があります。

ハイブリッドアプリ開発用ライブラリのAPI

ハイブリッドアプリにはネイティブの機能とJavaScriptとの橋渡しを行うフレームワーク(システム)が存在します。実際に開発する上ではそうしたフレームワークの使い方も学ぶ必要があります。


アプリカンは今回紹介したハイブリッドアプリを開発するための枠組み(フレームワーク)になります。これまでに習得してきたWeb開発技術を使って、ハイブリッドアプリを開発できます。もちろんこれからWeb技術を習得したいと思う方でも、容易にはじめられるのが利点です(ブラウザとテキストエディタだけで開発がはじめられます)。

アプリカンは無料で利用開始できます。アプリカン公式サイトへアクセスしてユーザ登録してください!