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

勉強会メモ

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

Monava

世の中のながれ

monacaで苦労したこと

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

プラグイン

まとめ

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

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

Xamarinとは

開発方法

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

C

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

ネイティブのAPI

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

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

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

Xamarin Forms

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

Unity

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

事例

周辺ツール

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

最近

PWAがたぶんくる

PWAとは

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

What is a PWA

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

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

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

PWAのメリット

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

PWAの構成

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

インストール発生条件

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

オフライン制御の仕組み

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

コンテンツ/アセット

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

事例

対応状況

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

まとめ

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