https://qiita.com/zaki_zaki/items/3deb61748f5308ffc381 で説明したスライドです。 keynoteで作成したものをpptx変換かけて、 アップロードしたので、多少文字崩れあるかもです。

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

2. こんな経験はありませんか
？か？？
モバイルアプリの勉強を始めようとした方・・・

3. スタンダードなモバイルアプリ開発って・・・
どちらも勉強したい
IDEが違う
言語が違う
APIが違う
}

5. クロスプラットフォーム
開発環境がおすすめです
そんなあなたに・・・

6. • クロスプラットフォーム開発環境とは？
• ネイティブアプリとハイブリッドアプリの違い
• 開発言語、フレームワーク
本日はなすこと

7. • クロスプラットフォーム開発環境とは？
• ネイティブアプリとハイブリッドアプリの違い
• 開発言語、フレームワーク
本日はなすこと

8. Android,iOSなど
複数のプラットフォームに
対して開発可能な環境
Android,iOSなど
複数のプラットフォームに
対して開発可能な環境
クロスプラットフォーム開発環境ってなに？

9. “など”って？
×
+
• 基本はAndroid×iOS
• Windows, Linux, etc…のプ
ラットフォームについても
同じ言語＆FWで開発が可
能

10. OS固有（GPS、カメラ、etc…） OS固有（GPS、カメラ、etc…）
画面（レイアウト、イベント処理）
ビジネスロジック
具体的には？
共通言語
コード共通化
プラグイン
個別実装

11. メリットとデメリット
• デザイン、ビジネスロジックのコード共有化
• OS固有（GPS、カメラ、etc…）の処理は、
プラグイン（≒ライブラリ）で実装可能
→個別実装ほどレイアウトを細かくいじれない可能性あり
→学習や実装の時間短縮
→学習や実装の時間短縮
→各プラットフォームの理解は必要

12. • クロスプラットフォーム開発環境とは？
• ネイティブアプリとハイブリッドアプリの違い
• 開発言語、フレームワーク
本日はなすこと

13. ネイティブアプリとは？
ネイティブAPI
アプリケーション }
スタンダードなIDEや言語で
作れる

14. ハイブリッドアプリとは？
ネイティブAPI
アプリケーション
WebView }
WebView
デザインをHTML/CSS
動作をJSで記載可能！

15. ネイティブアプリとハイブリッドアプリの比較
ネイティブ ハイブリッド
処理速度 ◎
iOS ◯
Android ▲
デザイン OS依存 ほぼ共通
機能制約 ほぼなし あり
Web資産の
流用
▲ ◯
ハイブリッドではiOSはほぼ問題なし
Androidは動作が重くなりがち}
} ハイブリッドはHTML/CSSのデザイン
が適応されるため差異が少なめ
}
ネイティブは環境毎にお作法が異なるが
基本制約なし
ハイブリッドは環境によっては制約あり
}
ネイティブはサーバ側ロジックなど
ハイブリッドはデザイン含め
流用しやすい

16. • 処理速度ならネイティブアプリ。アニメーションなど重
い動作無しならハイブリッドアプリでも可
• Web開発者なら、ハイブリッドアプリの方が入門しやす
そう
ネイティブアプリとハイブリッドアプリの比較

17. • クロスプラットフォーム開発環境とは？
• ネイティブアプリとハイブリッドアプリの違い
• 開発言語、フレームワーク
本日はなすこと

18. どれだけ種類があるの？
1
2
3
4
5
6
7
8
9
10
11

19. どれだけ種類があるの？
1
2
3
4
5
6
7
8
9
10
11
抜粋します

20. どれだけ種類があるの？
1
2
3
4
5
6
7
8
9
10
11

21. 読み方 ザマリン
種類 ネイティブアプリ
対象
IDE Visual Studio(Windows,Mac) / Rider
言語 C# / F# / XAML(ザムル)
資産 Microsoft
概要

22. 特徴
• Xamarin.Formsという開発手法で、プラットフォーム
固有（GPSなど）以外はコード共通化可能
• Visual Studio(無償版)をインストールすること環境構
築可能
• プラットフォーム固有機能は、Xamarin.Nativeと呼ば
れるAndroid,iOSのSDKを薄くラッパーしたAPIを利用
することで、100%実現可能

23. その他
• Xamarin概要 - slideshare
• Xamarin Overview - slideshare
• 事例紹介 - XLSOFT様
• Xamarin.Forms 入門 - XLSOFT様
• かずきのXamarin.Forms 入門 - pdf

24. 読み方 リアクト ネイティブ
種類 ネイティブアプリ
対象
IDE なし(Visual Studio Code / Atom / etc…)
言語 HTML / CSS / JavaScript(FW:React)
資産 Facebook
概要

25. 特徴
• React.jsをベースとした、JavaScriptで記述可能な
Android,iOSアプリ開発向けの環境
• npmコマンドを用いて「create-react-native-app」を
インストールするだけで環境構築可能
• プラットフォーム固有機能は、React NativeのAPIと
して実装している様子だが、無い場合は
Android(Java)、iOS(Obj-C,Swift)の実装が必要

26. その他
• React Nativeで始めるアプリ開発 - slideshare
• create-react-native-appの説明 - 技術ブログ
• ネイティブモジュールの作り方 - 技術ブログ

27. 読み方 コトリン ネイティブ
種類 ネイティブアプリ
対象
IDE CLion + (XCode / Android Studio)
言語 Kotlin
資産 Jet Brains
概要

28. 特徴
• 2017年にAndroid公式言語となったKotlin、クロスプ
ラットフォームに特化した言語（というよりFW？）
• IDEはCLionがメインだが、まだクロスプラットフォ
ーム向けのプロジェクトは作れない
• 2017年からWindows / iOS / WebAssemblyまでサポー
ト対象となった（勢いがある！）

29. その他
• KotlinConf 2017 まとめ - 技術ブログ
• Kotlin Enucation Tools - Jet Brains様
• Kotlin/NativeでiOSアプリを作ってみる - Qiita

30. まとめ
• C#(.Net / Mono)経験者ならXamarin、
Web(フロント)経験者ならReactNativeが入門しやすそう
→XamarinはOS固有機能が100%実現可能なので、
AndroidやiOSのSDK学習のためのツールとして
始めてもよいかも。
→ReactNativeは、React.js→ReactNativeと学習した方が
スムーズに入門できそう。
• Kotlin/Nativeはまだ荒削りだけど、Javaを使用していた
Android/Web開発者から人気！要チェック！

31. ご静聴ありがとうございました