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

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

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

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

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

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

1. React Native

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

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

2. Titanium

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

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

3. AppGyber

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

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

4. AppDeck

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

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

5. Monaca

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

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

6. Applican

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

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

JavaScriptやHTML5を用いたスマホアプリ開発の流れ

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

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

code.jpeg

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

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

mobile.jpeg

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

3. ビルド (デプロイ)

build.jpeg

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

4. ストアに提出

appstore.jpg

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

JavaScriptやHTML5があればスマホアプリは作れる

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

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

この記事を読んだ方におすすめ

非エンジニアも知っておきたい！HTMLとCSSの基礎知識

非エンジニアも知っておきたい！HTMLとCSSの基礎知識

WebやITを取り扱う仕事の中でたびたび耳にする「HTML」と「CSS」という言葉。聞いたことはあるけど、いまいちよくわからない人も多いでしょう。 エンジニアでなけれWebサイトの制作や運営はCMS（コンテンツ管理システム）に任せることができますが、それでもHTMLとCSSの仕組みを知っているといろいろな面で便利ですし、Webサイト運用にも自信を持てるようになります。 今回は非エンジニアでも覚えておきたい、HTMLとCSSの基礎について解説します。
CSS

CSS

Webページを構築する際、テキストへの下線配置や矢印など、コンテンツをよりわかりやすくする工夫をしたくなるものです。CSSを使うと、簡単なコードを書くだけでテキストの装飾などが思いのままにできます。今回ご紹介するCSSの書き方は、コンテンツの中でユーザーに注目してほしいところを示せる便利なものです。矢印や三角の作り方など、この機会にチェックしてみてください。