【初心者向け】スマホアプリ(ハイブリッド / Ionic3)の環境構築

どうも、フリーランスエンジニアのyoshikiです。


2010年から普及し始めたスマートフォンですが、現在では普及率70%を超えています。
今回はそのスマートフォンアプリを作るまでに必要となる知識や開発環境の作り方を説明していきます。

スマホアプリの種類


スマホに載っている基本ソフト(OS)の種類によって、大きく2つに分類されます。皆さんも聞いたことがあるのではないでしょうか。

  • Androidアプリ
  • iOS(iphone)アプリ


日本でのシェア率はAndroidアプリ約30%、iOS(iphone)アプリ約70%となっています。


さてここで問題が一つあります。


それは一般的にAndroidアプリとiOSアプリの作り方が違うという点です。どうゆうことかというと、Android用にアプリを作ったとしてもiphoneでは動かないということです。


それを解消するためのスマホアプリの作り方を説明します。


Ionic開発環境構築


Android・iphoneの両方に対応したアプリをハイブリッドアプリと言います。ハイブリッドアプリを作るためには、MonacaTelerik Platformなどの開発ツールがありますが、今回は見た目がきれいで拡張性の高いIonicを使った作り方を説明していきます。


今回の環境はWindows10です。Macの方はこちら

Node.jsインストール


Node.jsの公式HPからインストーラーをダウンロードします。




コマンドプロンプトを起動(Windowsキーを押して「cmd」と入力)し、インストールの確認をします。



IonicとCordovaインストール


IonicとCordovaを同時にインストールします。cordovaはHTML5/CSS/JavaScriptなどの画面側のプログラムをWebViewで実行し、プラットフォーム(androidやiOS)に依存せず、スマホアプリを作成する仕組みです。



JDKインストール


JDKをこちらからダウンロードします。

私の環境はWindowsなのでWindows用をダウンロードします。 
「Accept License Agreement」をチェックすると、ダウンロードできます。

ダウンロードしたインストーラーを起動し、インストールします。特に気にする箇所はないので、そのまま「次へ」を押して、完了です。


次に環境変数の設定をします。


Windowsキーを押して「環境変数」と入力し、システム環境変数の「新規」で作成します。


以下のように設定します。変数値の箇所はインストールしたJavaのバージョンによって変更してください。

 変数名:JAVA_HOME
 変数値:C:\Program Files\Java\jdk-9



コマンドプロンプトでバージョンを確認できたら完了です。



Android SDKインストール


まずこちらからAndroid Studioをダウンロード&インストールします。(特に気にする箇所はないので、割愛します。SDKをダウンロードしてください。)


次にAVD Manager(Tools→Andoroid→AVD Manager)を起動し、デバイスの追加を行います。(Create Vertual Device) 




以上で環境構築は終了です。

プロジェクト作成&起動

tabsテンプレートでmyApp-testというプロジェクトを作成しますという意味です。

途中で「Connect this app to the Ionic Dashboard?」と聞かれますが、これはIonic公式と作成するプロジェクトを紐づけますか?ということなので、不要な方は「N」を入力しましょう。



続いてAndoroidプラットフォームを追加し、エミュレータを起動します。


「Welcome to Ionic!」の画面が起動されたら、完成です。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする