スマートフォンアプリを開発するときに、iOSであればObjective-CSwiftAndroidであればJavaを別々に使えるようにならなければいけない、と思いがちです。
しかしながら、iOSAndroidの両方に対応したアプリを作ろうとすると、全ての言語を習得するのは至難の技です。

今回は、HTML5JavaScriptを使ったスマホアプリの開発方法をご紹介します。
これらの言語はすでにホームページを作成したことがある人であれば基本的な知識を押さえているので、スマホアプリを開発するときにもそれほど学習コストがかかりません。

必要最低限の知識さえ押さえておけば、あとは各プラットフォームのルールにしたがって実装を行っていけばいいのです。

それでは、プラットフォームや開発の流れを紹介していきます。

HTML5やJavaScriptでスマホアプリが作れるプラットフォーム

まず、iOSアプリ開発ならX-Code、AndroidならAndroid Studioにあたる、HTML5やJavaScriptで開発できるプラットフォームを選んでいきましょう。

1. React Native

reactnative.jpeg
https://facebook.github.io/react-native/

React Nativeは、Facebookが開発するUIフレームワークであるReactをベースに、モバイルアプリケーションを開発することができるフレームワークです。
もともとはiOS用に公開されていましたが、今ではiOSAndroid両対応になっています。
JavaScriptとJSXタグを使って開発を行います。

2. Titanium

titanium.jpeg
http://www.appcelerator.com/mobile-app-development-products/

TitaniumJavaScriptを使ってロジック部分やUI部分を組み立てていくアプリ開発プラットフォームです。
デフォルトでついているAPIによってダッシュボードでリアルタイムに分析を行うこともできます。
また、ドラッグ&ドロップでモバイルプロトタイピングが行える「App Designer」や、JavaScriptとiOSAndroidコードの相互変換やサードパーティー製のライブラリを行うことができる「Hyperloop」という機能も利用できます。

3. AppGyber

appgyber.jpeg
https://www.appgyver.com

AppGyberHTML5をベースにアプリ開発を行うプラットフォームです。
UI部分はドラッグ&ドロップでデザインすることもでき、外部APIとの連携も数クリックで行うことができます。
ロジック部分もコーディングではなく、ブロックをつなぎあわせるようなビジュアルエディタを採用しているので、直感的にアプリ開発を行うことができます。

4. AppDeck

appdeck.jpeg
http://www.appdeck.mobi

AppDeckHTML5やCSS、JavaScriptを使っているので、ホームページを作るような感覚でアプリ構築を行えます。
プッシュ通知機能やオフラインモードなど、通常ではプラグインや外部機能として提供されている機能も、デフォルトで用意されています。
すでにWebサイトを所有している場合は、そのコードを使い回ししてアプリ開発ができるのも強みのひとつです。

5. Monaca

monaca.jpeg
https://ja.monaca.io

Monacaは国産のアプリ開発プラットフォームで、クラウド版と「Localkit」と呼ばれるローカル開発版があります。
こちらもHTMLCSSJavaScriptを使って開発していくので、ホームページを作るようにアプリ開発を行うことができます。
Onsen UIと呼ばれる便利なUIキットもあり、美しくてシンプルなデザインのアプリを開発することができます。

6. Applican

applican.jpeg
https://www.applican.com

ApplicanHTMLCSS、JavaScriptを使って開発を行う国産のアプリ開発プラットフォームです。
一旦配布したアプリコンテンツを、CMS上で自由に書き換えて更新する機能があります。
広告が入ってしまいますが、全て無料で利用することができます(アップグレードすると広告なしにできます)。

基本的な開発の流れ

さまざまなプラットフォームを紹介しましたが、基本的な開発の流れは変わりません。
ここでは、スマホアプリの開発の流れについて確認していきましょう。

1. HTML5 / JavaScriptでコーディング

code.jpeg

どのようなアプリを作るかを決めたら、コーディングに入ります。
多くのプラットフォームでは、リアルタイムプレビュー機能が付いているので、打ち込んだコードがどんな風に見えるかをすぐに確認することができます。

2. 実機で確認&デバッグ

mobile.jpeg

ほとんどのプラットフォームでは実機確認用のアプリケーションが配布されています。
通常はApp Storeなどに提出してアプリをダウンロードしなければ確認できませんが、実機確認用のアプリケーションによって、開発段階で実機での見え方や操作性、画面遷移がうまくいっているかなどを確認することができます。

3. ビルド (デプロイ)

build.jpeg

実機での操作を確認することができたら、HTMLJavaScriptで組み込んだコードをハイブリッドアプリにも理解できる言語で変換していきます。
この作業を、ビルドデプロイと言ったりします。

4. ストアに提出

appstore.jpg

iOSAndroid用にファイルが生成されたら、AppleやGoogleアプリストアに必要事項を入力し、ファイルを提出します。
開発環境にもよりますが、審査や掲載に概ね4〜10日はかかりますので、余裕を持って提出しましょう。

まとめ

アプリ開発はホームページ作成に比べると敷居が高いように思えますが、実はHTMLJavaScriptといった既知の言語を使って開発することもできるのです。
また、X-CodeやAndroid Studioと違って、1つのコードでiOSAndroid両対応のアプリを作成できるのも大きなメリットですね。

ぜひ、HTML5やJavaScriptを使って世界でひとつだけのアプリを作ってみてください。