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

    【Android autoSizeTextType】フォントの大きさを自動で調節する時の注意点

    ConstraintLayout上でフォントの大きさを自動調節する方法…

  2. Android

    アプリ開発前に絶対にするべき要件定義

    これからスマホアプリを作る人が開発前にこれだけは!考えるべきことについ…

  3. Android

    Kotlin 内部クラス(inner)

    明示的にクラスの前にinnerと付けることで、外側のクラスのメンバ数に…

  4. Android

    【コルーチン】kotlinで遅延処理

    kotlinで別スレッドによる遅延処理を行います。&n…

  5. Java

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

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

  6. Programming

    MacにWindowをインストールする簡単な方法(BootCamp)

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

  1. Programming

    MacにWindowをインストールする簡単な方法(BootCamp)
  2. 生き方

    交流会で300人と出会って分かった「やりたいことが見つからない人」の特徴3選
  3. LINE

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

    アプリ開発前に絶対にするべき要件定義
  5. Android

    【コルーチン】kotlinで遅延処理
PAGE TOP