iOS, Androidスマートフォンアプリを簡単に開発するためのフレームワークの使い方 ハンズオン用資料

1. 非エンジニアのためのIT勉強会
July 13, 2016
Code for Kanagawa
古川

2. Our Concepts
目的を達成するために
• なるべく簡単に
• なるべく覚えることを少なく
スマートフォンアプリを開発したい
今回お題「一般社団法人ガバナンスチェック」
または、持ち寄った課題の解決(=目的)

3. Table of Contents
• ハイブリッドフレームワークのいろは
• 開発環境の考え方
• 開発環境の作り方
• アプリケーションの開発
• デプロイの仕方

4. ハイブリッドフレームワークのいろは
• Hybrid mobile app UI frameworkって何？
• スマホアプリを開発しようとすると覚えることが沢山
• 両方のネイティブ環境での開発方法を覚えるのは大変
• 両プラットフォームのAPIを全部覚えるのは大変
• リリース後のソフトウェアアップデート、バージョン管理が大変
大変を乗り越えて覚えても・・・時間が経つと陳腐化してしまう
Android iPhone/iPod
プログラミング言語 Java Swift, Objective-C
OS Windows ,Mac OS X ,Linux Mac OS X
SDK
Android Studio
Eclipse
Xcode

5. ハイブリッドフレームワークのいろは
• Hybrid mobile app UI frameworkって何？
• 一度にAndroid, iPhoneの両方同時に開発したい
Your ApplicatinonYour Applicatinon
Hybrid mobile app UI FrameworkHybrid mobile app UI Framework
iPhone(iOS)iPhone(iOS)
Your ApplicatinonYour Applicatinon
Hybrid mobile app UI FrameworkHybrid mobile app UI Framework
Android OSAndroid OS
iOS APIiOS API Android APIAndroid API
同じ
コード

6. ハイブリッドフレームワークのいろは
• 人気のあるHybrid mobile app UI framework
• CordovaとIONICが2強、ユーザーと情報量が多いのが強み
• 日本語サポートならOnsenUI
• 3D高速描画ならfamo.us
http://www.buildinsider.net/web/popularjslib/2016

7. 開発環境の考え方
• Mac OS →アプリ開発に強い
• Xcode, GNU tools, その他オープンソース開発環境が広く使える
• Windows →オジサン・オバサンのOS?まだまだユーザー多い
• スマホアプリ開発はまだ大変
• Linux →Onlyで使ってる人少ないですよね？
• AndroidはそもそもLinuxなのでAndroidとの親和性高い
開発環境OS iOS開発 Android開発
Mac OS xcode, swift
Android Studio
Eclipse
Windows ×
Android Studio
Eclipse
Visual Studio
Linux ×
Android Studio
Eclipse

8. 開発環境の考え方
• ちなみに・・・
Windows
89%
MacOS
10%
Linux
1%
デスクトップOSシェア 出典：NetApplication April, 2016

9. 開発環境の考え方
• OS X(Mac)の方
• 簡単
• Xcode,Android Studio
• Windowsの方
• Widowsネイティブの開発環境構築難しい
• Linux仮想マシン上に環境構築
• Android Studio

10. 開発環境の作り方
• Windows+UbuntuでIONIC
• Androd Studio
sudo apt-get update
sudo apt-get –y install nodejs npm
sudo update-alternatives --install /usr/bin/node node /usr/bin/nodejs 10
sudo apt-get install build-essential
sudo npm install cordova -g
sudo npm install ionic –g
https://developer.android.com/studio/index.html
Unzip (zipファイル)
sudo mv android-studio /usr/local
vi ~/.bash_profile
export PATH=/usr/local/android-studio/bin:$PATH

11. 開発環境の作り方
• MacOSでIONIC
• Androd Studio
xcodeインストール
https://itunes.apple.com/jp/app/xcode/id497799835?mt=12
node.jsのインストール
http://nodejs.jp/nodejs.org_ja/docs/v0.10/
cordovaのインストール
sudo npm install -g cordova
https://developer.android.com/studio/index.html
Unzip (zipファイル)
sudo mv android-studio /usr/local
vi ~/.bash_profile
export PATH=/usr/local/android-studio/bin:$PATH

12. 開発環境の作り方
• Androd Studio
• Androidシステムイメージ
Oracle JDK
http://www.oracle.com/technetwork/jp/java/javase/downloads/index.html
sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6
sudo apt-get install gradle
KVMのインストール
sudo apt-get install kvm virt-manager libvirt-bin bridge-utils
echo vhost_net | sudo tee -a /etc/modules
sudo service libvirt-bin start
sudo update-rc.d libvirt-bin defaults
Android Studioの起動
studio.sh
http://www.buildinsider.net/web/popularjslib/2016

13. アプリケーションの開発
• Scaffoldのビルド
• Emulation
ionic start myapp blank
cd myapp
ionic platform add ios ※MacOSのみ
ionic platform add android
ionic build android
ionic build ios
ionic emulate android
ionic emulate ios

14. HTML5から呼び出すAPIの例
• Mashup Awards
• http://mashupaward.jp/apis/