PhoneGapでAndroidアプリを作成する過程で生まれた副産物達をGitHubで公開しました

能書き

今頃になってスマホアプリ開発に興味を持ち始めて今年の初めからAndroidアプリ作成に勤しんでおり、最近ようやく1本完成しました。

アプリ作成にはPhoneGapという、HTML/CSS/JSでAndroidやiOS、最近ではWindowsPhoneやFirefoxOS対応のアプリも作成することができる(一見)優れ物な開発環境を使用しています。

PhoneGapにはメリット・デメリットありますが、そこら辺の話は詳しく説明されているサイトなどもあるのでここでは割愛しますが、WEB関連の開発知識があればJavaやObjective-Cなどのネイティブ開発用の言語を知らなくてもスマホアプリを作ることができるという意味ではおもしろいツールだと思います。

参考サイト

• 日本語ポータル
• 解説サイト
• WEB上で開発できるサービス

今回は、そんなPhoneGapを使ってアプリを作成する過程でいくつか副産物が出来上がったので、オープンソースとして共有してPhoneGap界隈の発展に(ミジンコ程度の微力ですが)寄与してみちゃおうかななーんて思った次第であります。

今回紹介する副産物

1. HTML5モバイルアプリケーションフレームワーク
2. 公式でサポートされていない類のネイティブダイアログを実装できるPhoneGapプラグイン
3. PhoneGapアプリにネイティブのメニューを実装できるパーツ
4. 公式のファイル操作APIを使いやすくするラッパー

以上の4つです。以降で順番に紹介していきます。

1. HTML5モバイルアプリケーションフレームワーク

ViViと命名しています。

こういった類のフレームワークといえばjQuery MobileとかSencha Touchなどが有名ですが、ViViは個人プロジェクトなので当然ながらそこまで至れり尽くせりのフレームワークではありません。が、コンパクトで小規模なのでPhoneGapアプリに挑戦するにあたって気軽に利用できるフレームワークになっています。

また、上記大規模フレームワークは多機能な反面、端末のスペックによっては動作がもっさりしがちですが、ViViはパフォーマンス面も考慮しているので型落ちの古いOSでもそれほどストレスなく動作させることができます。

DEMO

デモ

こちらのデモでどんな見栄えや機能なのかを確認できます。デスクトップPCでも問題なく動作します(IEは未検証)。

決められたルールに従ってHTMLを書いて、あとはJavaScriptで初期化コードを1行書くだけでタブやスワイプによる画面切り替えや(それなりの)慣性スクロール、タップ時のハイライトなどのアプリとして最低限必要な動作をすべてやってくれます。

こんな仕組み

依存しているライブラリはHammer.jsだけなのでサイズ的にもやさしい出来になっております。

詳細はこちらからどうぞ。

【GitHubリポジトリ】

2. 公式でサポートされていない類のネイティブダイアログを実装できるPhoneGapプラグイン

Cordova-Plugin-ExDialogsといいます。

PhoneGapでは公式で通知係プラグインというものが用意されていて、AlertやConfirm、Promptなどの基本的なネイティブダイアログはそちらでまかなえます。

Cordova-Plugin-ExDialogsは公式でサポートされていない種類のネイティブダイアログなどをPhoneGapで使用可能にするプラグインです。

このプラグインをインストールすると以下のネイティブダイアログが使用できるようになります。

詳細はこちらからどうぞ。

【GitHubリポジトリ】

3. PhoneGapアプリにネイティブのメニューを実装できるパーツ

こちらはプラグインではないのですが、PhoneGap開発時のフック機能を使ってネイティブメニューを簡単に組み込むことのできるツールというかパーツになっています。

JSONでこんな感じのメニュー定義を書くだけで、

こんな感じ

[{
  "id": "config",
  "title": "設定",
  "icon": "ic_menu_manage"
}, {
  "id": "help",
  "title": "ヘルプ",
  "icon": "ic_menu_help"
}, {
  "id": "about",
  "title": "アプリ情報",
  "icon": "ic_menu_info_details"
}]

こんな感じのネイティブメニューをアプリに実装することができます。

メニューの項目をタップするとJavaScript上でoptionselectイベントが発生するので、そこで処理する形になります。

JavaScriptでのメニュー処理

document.addEventListener('optionselect', function (event) {
  if (event.itemId === 'help') {
    ...
  }
});

詳細はこちらからどうぞ。

【GitHubリポジトリ】

4. 公式のファイル操作APIを使いやすくするラッパー

PhoneGapでは公式でSDカードなどのストレージのファイルを読み書きするプラグインが用意されていますが、そのAPIインターフェイスの使い方がえらい面倒だったので簡単に操作できるラッパーを作りました。

例として、公式のAPIを使ってファイルを読む場合はこんな感じに書かないといけませんが、

公式APIのファイル読み込み

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);

function gotFS(fileSystem) {
  fileSystem.root.getFile('hoge.txt', null, gotFileEntry, fail);
}

function gotFileEntry(fileEntry) {
  fileEntry.file(gotFile, fail);
}

function gotFile(file){
  readAsText(file);
}

function readAsText(file) {
  var reader = new FileReader();
  reader.onloadend = function(evt) {
    // evt.target.resultにhoge.txtの内容が入っている
  };
  reader.readAsText(file);
}

function fail(error) {
  throw error;
}

このラッパーではこんな感じでファイルを読むことができます。

ラッパーでのファイル読み込み

// SDカードの'myApp'ディレクトリに保存してある'hoge.txt'を読み込む
var fs = new CordovaFileSystem('myApp');
fs.read('hoge.txt', function (err, data) {
  if (err) {
    throw err; // ファイルが存在しないなどのエラー
  }
  // dataにhoge.txtの内容が入っている
});

詳細はこちらからどうぞ。

【GitHubリポジトリ】

まとめ＆自然な流れでアプリ宣伝

以上、PhoneGap開発で利用できる自作フレームワークやライブラリの紹介でした。現在の所、すべてAndroidのみの対応となっています(フレームワークのViViは見た目がAndroidっぽいのを除けばiOSでも使用は可能)。iPhoneアプリにも手を出すようになったらiOS版も対応するようになるかもしれません。

で、ここで紹介したものを組み合わせて作ったアプリの動きがどんなもんかとか気になりません？気になりますよね。

というわけで、作成したアプリの紹介です(自然)。

ブログやニュースの記事部分だけを抽出して簡易ブラウザで軽快にサクサク閲覧することができるちょっと変わったRSSリーダー+αです。

特設サイトも用意してあるのでよろしければご覧ください。

こちらからダウンロードできます。

【Articlip】

ほーこんな感じに動くのかー、なんて確認した後にアプリ自体も気に入って引き続き使いつづけていただけると泣いて喜ぶとかなんとか。

そんなわけでこれらのフレームワークやライブラリを通じてPhoneGapアプリ開発に興味を持ってもらえたら幸いです。