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

理系ジン

しばらくPythonに力を入れる予定です。

HTML5アプリ開発計画

HTML5アプリ開発の経緯

そもそも何故HTML5アプリを開発しようとしているのかを説明します。

パズルなどのゲームやオフィス系のツールのアプリ開発しようと思い、iOSAndroidのプログラミングについて調べ始めました。

iOSアプリは、少々敷居が高くいずれ会社を作ることになるかも知れないと想像し、少なくても数年はそこまで本格的にやるのは避けたいと思い開発しないことにしました。今後、iOSアプリを開発することがあるのは、アプリをiOSに移植してさらに会社を作るのに見合うと見込める場合になると思います(何もしないうちから考え過ぎですが)。

Androidアプリは気軽に始められそうでしたが、Androidを持っていないのとOpenGL ESについて調べた頃からHTML5アプリが良いと思うようになったので後回しにすることにしました。

iOSAndroidでのGUIプログラミングは、エディタ中心で設計する方法とプログラムのみでやる方法がありますが、後者の方が分かりやすく思いました。

ゲームに使うOpenGL ESも調べましたが、iOSAndroidは、UnityやCocos2Dなどの本格的なツールは充実しているけどオープンソースの小さなライブラリは充実していないと感じ、WebGLを調べたところでWeb関連はライブラリが充実していると気づいたことからHTML5アプリ開発をしようと思い始めました(iOSAndroidのそれぞれのSDKでアプリを開発する方が主流なのですが、Unityなどの本格的ツールを避ける発想があるとこういう結論に至ります)。そして、理系ジンを始めました。

HTML5アプリ構成の概要

理系ジンは、次のようなライブラリなどを利用してHTML5アプリを開発する予定です。

文字の表示・入力、ボタンなどのHTMLの通常のGUIは、デザインにはMaterial Design(Google Design)を使い、HTMLの生成にはReactを使う予定です。

Material Designは、見た目がAndroidアプリ風になり、デザインについて考えるのを省ける利点があります。Reactは、JavaScriptでHTMLを指定して生成する感じなので、iOSAndroidでのGUIプログラミングに類似性があると思い使うことにしました。まだ簡単に概要を見た程度なので問題があれば方針を変えるかも知れません。

2Dグラフィックスは速度を考えWebGLを使います。WebGL自体は難易度が高いので、ライブラリPixi.jsまたはPhaserを使います。3Dは当分は考えません。2Dグラフィックスの色使いなどもMaterial Design風にします。

先ずは、2Dグラフィックスから始めます。

とりあえずは、サーバーとの通信は使わないつもりです。

上から順に、次の環境で動作するように開発していく予定です。

HTML5アプリ開発スケジュール

来年以降1日数時間しかアプリ開発に使えなくなる予定です。次のようなスケジュールを考えています。

  • 2015年3月まで:アプリに必要な様々な動作の開発
  • 2015年7月まで:HTML5アプリを一通り開発
  • 2015年9月まで:Androidアプリ化、Google Playで公開

なるべく作業を細分化してそれなりの頻度で記事を書いていきたいと思います。

次回の予定

アプリやブラウザ向けのゲームを提供・紹介しているサービスを調べ、参考にして自分の開発するアプリを考えます。