Ionic

【初心者向け】スマホアプリ(ハイブリッド / 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!」の画面が起動されたら、完成です。
 

関連記事

  1. Android

    kotlin スコープ関数の使い方

    applyapplyはローカル変数を書かずにオブジェク…

  2. LINE

    【2018年 LINE Bot 作り方】GASで支出管理Botを作ってみた

    フリーランスエンジニアのyoshikiです。&nbsp…

  3. Android

    【最短!】パッケージ名の変更方法

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

  4. Java

    Javaオブジェクト⇔JSONの変換はGSONを使おう

    GSONとは、Googleが提供しているJavaオブジェクトとJSON…

  5. Ionic

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

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

  1. エンジニア

    円満な退職の仕方
  2. Android

    【Android Studio】よく出るエラーの解決方法まとめ
  3. Java

    Javaオブジェクト⇔JSONの変換はGSONを使おう
  4. Android

    Kotlin 内部クラス(inner)
  5. エンジニア

    【現役エンジニアが解説!】システムエンジニアって何?
PAGE TOP