クロスプラットフォーム
開発環境のすゝめ
こんな経験はありませんか
?か??
モバイルアプリの勉強を始めようとした方・・・
スタンダードなモバイルアプリ開発って・・・
どちらも勉強したい
IDEが違う
言語が違う
APIが違う
}
クロスプラットフォーム
開発環境がおすすめです
そんなあなたに・・・
• クロスプラットフォーム開発環境とは?
• ネイティブアプリとハイブリッドアプリの違い
• 開発言語、フレームワーク
本日はなすこと
• クロスプラットフォーム開発環境とは?
• ネイティブアプリとハイブリッドアプリの違い
• 開発言語、フレームワーク
本日はなすこと
Android,iOSなど
複数のプラットフォームに
対して開発可能な環境
Android,iOSなど
複数のプラットフォームに
対して開発可能な環境
クロスプラットフォーム開発環境ってなに?
“など”って?
×
+
• 基本はAndroid×iOS
• Windows, Linux, etc…のプ
ラットフォームについても
同じ言語&FWで開発が可
能
OS固有(GPS、カメラ、etc…) OS固有(GPS、カメラ、etc…)
画面(レイアウト、イベント処理)
ビジネスロジック
具体的には?
共通言語
コード共通化
プラグイン
個別実装
メリットとデメリット
• デザイン、ビジネスロジックのコード共有化
• OS固有(GPS、カメラ、etc…)の処理は、
プラグイン(≒ライブラリ)で実装可能
→個別実装ほどレイアウトを細かくいじれない可能性あり
→学習や実装の時間短縮
→学習や実装の時間短縮
→各プラットフォームの理解は必要
• クロスプラットフォーム開発環境とは?
• ネイティブアプリとハイブリッドアプリの違い
• 開発言語、フレームワーク
本日はなすこと
ネイティブアプリとは?
ネイティブAPI
アプリケーション }
スタンダードなIDEや言語で
作れる
ハイブリッドアプリとは?
ネイティブAPI
アプリケーション
WebView }
WebView
デザインをHTML/CSS
動作をJSで記載可能!
ネイティブアプリとハイブリッドアプリの比較
ネイティブ ハイブリッド
処理速度 ◎
iOS ◯
Android ▲
デザイン OS依存 ほぼ共通
機能制約 ほぼなし あり
Web資産の
流用
▲ ◯
ハイブリッドではiOSはほぼ問題なし
Androidは動作が重くなりがち}
} ハイブリッドはHTML/CSSのデザイン
が適応されるため差異が少なめ
}
ネイティブは環境毎にお作法が異なるが
基本制約なし
ハイブリッドは環境によっては制約あり
}
ネイティブはサーバ側ロジックなど
ハイブリッドはデザイン含め
流用しやすい
• 処理速度ならネイティブアプリ。アニメーションなど重
い動作無しならハイブリッドアプリでも可
• Web開発者なら、ハイブリッドアプリの方が入門しやす
そう
ネイティブアプリとハイブリッドアプリの比較
• クロスプラットフォーム開発環境とは?
• ネイティブアプリとハイブリッドアプリの違い
• 開発言語、フレームワーク
本日はなすこと
どれだけ種類があるの?
1
2
3
4
5
6
7
8
9
10
11
どれだけ種類があるの?
1
2
3
4
5
6
7
8
9
10
11
抜粋します
どれだけ種類があるの?
1
2
3
4
5
6
7
8
9
10
11
読み方 ザマリン
種類 ネイティブアプリ
対象
IDE Visual Studio(Windows,Mac) / Rider
言語 C# / F# / XAML(ザムル)
資産 Microsoft
概要
特徴
• Xamarin.Formsという開発手法で、プラットフォーム
固有(GPSなど)以外はコード共通化可能
• Visual Studio(無償版)をインストールすること環境構
築可能
• プラットフォーム固有機能は、Xamarin.Nativeと呼ば
れるAndroid,iOSのSDKを薄くラッパーしたAPIを利用
することで、100%実現可能
その他
• Xamarin概要 - slideshare
• Xamarin Overview - slideshare
• 事例紹介 - XLSOFT様
• Xamarin.Forms 入門 - XLSOFT様
• かずきのXamarin.Forms 入門 - pdf
読み方 リアクト ネイティブ
種類 ネイティブアプリ
対象
IDE なし(Visual Studio Code / Atom / etc…)
言語 HTML / CSS / JavaScript(FW:React)
資産 Facebook
概要
特徴
• React.jsをベースとした、JavaScriptで記述可能な
Android,iOSアプリ開発向けの環境
• npmコマンドを用いて「create-react-native-app」を
インストールするだけで環境構築可能
• プラットフォーム固有機能は、React NativeのAPIと
して実装している様子だが、無い場合は
Android(Java)、iOS(Obj-C,Swift)の実装が必要
その他
• React Nativeで始めるアプリ開発 - slideshare
• create-react-native-appの説明 - 技術ブログ
• ネイティブモジュールの作り方 - 技術ブログ
読み方 コトリン ネイティブ
種類 ネイティブアプリ
対象
IDE CLion + (XCode / Android Studio)
言語 Kotlin
資産 Jet Brains
概要
特徴
• 2017年にAndroid公式言語となったKotlin、クロスプ
ラットフォームに特化した言語(というよりFW?)
• IDEはCLionがメインだが、まだクロスプラットフォ
ーム向けのプロジェクトは作れない
• 2017年からWindows / iOS / WebAssemblyまでサポー
ト対象となった(勢いがある!)
その他
• KotlinConf 2017 まとめ - 技術ブログ
• Kotlin Enucation Tools - Jet Brains様
• Kotlin/NativeでiOSアプリを作ってみる - Qiita
まとめ
• C#(.Net / Mono)経験者ならXamarin、
Web(フロント)経験者ならReactNativeが入門しやすそう
→XamarinはOS固有機能が100%実現可能なので、
AndroidやiOSのSDK学習のためのツールとして
始めてもよいかも。
→ReactNativeは、React.js→ReactNativeと学習した方が
スムーズに入門できそう。
• Kotlin/Nativeはまだ荒削りだけど、Javaを使用していた
Android/Web開発者から人気!要チェック!
ご静聴ありがとうございました

クロスプラットフォーム開発環境のすヽめ