Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

119 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

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

×