HTMLコンテンツのパッケージング

HTML5の機能だけでは動的なファイルの保存やスマホでのカメラ機能が使用できません。そういったOS固有の機能を一般的にネイティブ機能と呼びます。今回はそれらブラウザー版では実現できないネイティブ機能の実装のために、デスクトップとモバイル向けにアプリケーション化を行いました。

デスクトップアプリへのパッケージングはElectronを採用

Electronはデスクトップアプリを作成するためのフレームワークです。Electronを使うことで、Webの技術であるHTML5やJavaScriptで作ったコンテンツをデスクトップアプリにできます。具体的な内容については記事「初めてのElectron! HTML5でデスクトップアプリを作成しよう」にて詳しく記載しています。

Electronでネイティブ機能を使用するのは簡単です。下記のコードは保存用のダイアログを表示してファイルを保存をしています。ダイアログを表示するには必要なモジュールの取得とdialog.showSaveDialog()メソッドの呼び出しの3行、ファイルを保存するコードはfsモジュールの取得と、fs.writeFile()メソッドの呼び出しの2行のみとなっています。

let electron = require('electron'); // electronモジュールを使用する
let dialog = electron.remote.dialog; // disalogモジュールを取得する

// 保存用ダイアログを表示する
dialog.showSaveDialog();
let fs = require('fs');// fsモジュールを使用する
fs.writeFile(); // ファイルを保存する

モバイルアプリのパッケージングはApache Cordovaで

Apache CordovaPhoneGapもElectron同様Web技術を使用してアプリを作成するためのフレームワーク(※)ですが、どちらかと言えばモバイルアプリ向けに特化しています。詳細な導入手順、パッケージングの様子については別途記事で紹介するので、今回は概要だけ説明します。

※ PhoneGapはハイブリッドアプリ作成技術であるApache Cordovaを元に、Adobeが開発している技術です。ほぼ同じものと捉えていただいて差し支えありません。(参考「ハイブリッドアプリ開発といえばこれ!PhoneGap/Cordova事始め | HTML5Experts.jp」)

Apache Cordovaを使用できる環境を構築した後、WebコンテンツをiOSアプリ化する為のコマンドは下記です。

cordova run ios

また、Cordovaでネイティブの機能を使用する場合はプラグイン(Cordova Plugins)を経由します。例えば、ネイティブのカメラの機能を使いたい時は、コマンドを使ってカメラを使うためのプラグイン「cordova-plugin-camera」をインストールします。

cordova plugin add https://github.com/apache/cordova-plugin-camera.git

続いて、Webコンテンツ側のJavaScriptにてカメラを操作するAPIを実行します。

// カメラを起動
navigator.camera.getPicture();

これだけで、Webコンテンツのアプリ化とネイティブ機能との連携が可能になります。

Particle Developの開発を通して

Particle Developの開発を通して、前編記事「高まるHTML5製アプリの需要」で紹介したように、HTML5でのアプリ開発を取り巻く環境の好転を体感しました。canvas要素を使ったリッチなグラフィック表現、最近のライブラリーを駆使したスピーディな開発、少ない手順で可能なパッケージング技術は、より質の高いHTML5アプリ制作に役立つことでしょう。ぜひ皆さんもHTML5を使ったアプリ制作にチャレンジし、新たなコンテンツを発信してみませんか?

また、本アプリのソースコードはGitHubに公開しています。ぜひご覧くださいませ。