「2018年3月定例会「クロスプラットフォーム開発最前線2018」」に参加してきました

• 2018/3/14
• https://japan-android-group.connpass.com/event/81275/

Monaca/Cordova 開発最前線2018〜 国内初の飲みニケーションロボットから、AIとロボットを活用した人気ラーメン店での顔パスサービスまで 〜

• 西間木将矢様（株式会社ヘッドウォータース プロダクトイノベーション部 部長／Monaca UG 運営／Monacaソムリエ ）

Monava

• クラウドベースのアプリ開発プラットフォーム
• クラウドIDE
• OnsenUI

世の中のながれ

• マルチデバイス/マルチプラットフォーム

monacaで苦労したこと

• タップイベントの反応が悪い
  • タッチイベントに変更したり
• スクロール(慣性)中にタッチイベントうまく制御できない
  • 慣性中にタッチさせないようにした
• 処理速度が遅い
  • 無駄なアニメーションなくした
  • APIのリファクタ
  • 画像サムネイルにした
• 縦横斜めのハンドリング
  • スクロール
  • タブスワイプ
  • プルフック

プラグイン

• Cordovaプラグイン使う
• Cordovaプラグイン作る(ネイティブ実装)

まとめ

• クロスプラットフォームが求められる時代
  • デリバリスピード
  • マルチデバイス
• ネイティブとハイブリットを使い分ける

「Xamarinで始めるクロスプラットフォーム開発」

• 石崎充良様 (JXUG / イメージ情報システム株式会社 )

Xamarinとは

• クロスプラットフォーム
• ネイティブアプリ
  • WebViewではない
• Android/iosのAPIカバー率100%
• Android/iosのAPIをC#から使えるようにしたもの
• C#/.NET/VisualStudio
• クロスプラットフォームでコードを共通化するツール
• iosビルドにはmac必須
• iosはobjective-cベース

開発方法

• Xamarin Native
  • ロジックのみ共通化
• Xamarin Forms
  • UIも共通化
  • UIは各プラットフォームの最大公約数の機能

C

• 今も言語はアップデートされている
• 拡張メソッド
• XamarinはC#の最新機能をすぐに使える

ネイティブのAPI

• ネイティブAPIの薄いラッパー
• Javaで書くのとほぼ同じコード
• iosAPIは次の日/AndroidAPIは数ヶ月

AndroidアプリをXamarinに置き換える

• Androidのres -> XamarinのResources
  • そのままコピペでいける
• Javaのコードをそのままコピペから手直しでけっこういける

Xamarin Forms

• xamlで書く
  • コンポーネント化できんのか？
  • できないならつらそう

ゼロから始めるUnity生活　〜Unity 101〜

• 鎌田泰行様(ユニティ・テクノロジーズ・ジャパン合同会社フィールドエンジニア)
• https://www.slideshare.net/yasuyukikamata/unityunity-101

Unity

• 2004年にできた
• ゲームを作るUnityという会社でゲーム作るために作ったFW
• コンテンツを作るためのツール
  • エンジニアのためのものだけじゃない

事例

• スーパーマリオランとかポケモンGoとか
• Switchのゲームもある
• 映像系でも多い
• 30以上のプラットフォーム
• アプリの上位1000のうち40%はUnity

周辺ツール

• エディタ
• ゲームとプレイヤーの解析
• アプリ内課金/広告

最近

• 機械学習
• 音声認識

PWAがたぶんくる

• 進藤龍之介様 (エンジニア／日本Androidの会WWG／NPO日本Androidの会理事)
• https://drive.google.com/file/d/1BuBJUHhZMs36KCr3og1a-0BtiAJfQ5Xc/view

PWAとは

• Web Application
  • ブラウザで動く
• Progressive Web Apps
  • よりアプリっぽく
  • ServiceWorker

What is a PWA

• Responsive
  • マルチデバイス
• Connectivity
  • オフライン
• App-like
  • アプリのように
• Fresh
  • ServiceWorkerが裏でデータとってくる
• Safe
  • https
• Discoverble
  • 検索エンジンで誘導できる
• Re-engageable
  • プッシュ通知によるもの
• Installable
  • ホーム画面にアイコンおける
• Linkable
  • URLでシェアできる

クロスプラットフォームアプリとの違い

• クロスプラットフォーム
  • 開発資源を共通化しつつ各プラットフォーム向けにコンパイル
  • アプリストアで配布
• PWA
  • Webアプリをインストールしてオフライン実行
  • Webサイトにアップロードして配布
• ストアを経由しないことはメリット/デメリット？

PWAのメリット

• Webのいいとこ
  • 検索でひっかかる
  • 更新容易
  • 低コスト
  • 既存のWeb資産活用
• アプリのいいとこ
  • 高速な動作
  • オフライン
  • Push通知
  • ホーム画面にアイコン

PWAの構成

• 既存サイトを対応させるならほんの一手間

インストール発生条件

• httpsが大前提
• 5分以上開けて2回目以降のアクセスで出てくる
• Manifestファイル、ServiceWorkerが存在してること
• インストールすると端末からはアプリとして認識される

オフライン制御の仕組み

• ServiceWorkerがキャッシュとオンラインのハンドリング

コンテンツ/アセット

• ResponsiveならそのままでOK
• 何をキャッシュするか考える
• アイコン設定忘れずに

事例

• trivago
• Sumo
• Twitter

対応状況

• 現状対応してるブラウザのシェアは45%くらい
• SafariとEdge足すと75%くらい!
• ただしOSによって全部の機能が使えるわけじゃない
• グローバルだと75& -> 90%

まとめ

• httpsならManifestとServiceWorkerとちょっとしたコード追加でPWA化できる