WWDC19 速報レポート最終 5 日目Safari と WebKit の進化、iPadOS、Sign in with Apple ほかFrontend Engineer の視点＋総括編
report

WWDC19 速報レポート最終 5 日目
Safari と WebKit の進化、iPadOS、Sign in with Apple ほか
Frontend Engineer の視点＋総括編

意外に面白いというかキャッチアップすることがあるなと思った Frontend Engineer（Web Developer）編をお届けします。元々 WWDC はウェブフロントエンドやサーバーサイド・インフラ周りのセッションはあまりなく、やはり iOS/macOS Developer か UI Designer 向けのイベントと言えますが、フロントエンドエンジニアにシェアしたい内容もかなりありました。

そして本文末では総括＜ Engineer Manager 編＞を簡単に行いました。

day2 での Music on the plaza

5 日目レポート

〇〇の視点になって考えてみた WWDC の速報レポートシリーズ 5 日目は＜ Frontend Engineer ＞編です。

  1. iOS Developer の視点 - WWDC19 で注目したい新しいテクノロジー
  2. UI Designer の視点 - これからの iOS アプリの UI デザイン
  3. Apple のヘルスケア関連新サービスと、WWDC の健康アクティビティ、アメリカのヘルスケア産業
  4. DevRel の視点 - 会場運営における UX/UI デザインの工夫、エンジニアがグッとくる Apple の魔法
  5. Frontend Engineer の視点 - Safari と WebKit の進化ほか ← 今回

フロントエンドエンジニアとして気になったセッションは Dark Mode と、iPadOS 、そして Sign in with Apple と Safari / iOS WebView の進化です。

Dark Mode in Web Content

Webkit のアップデートですでに macOS Safari は 12.1 で対応済みの Dark Mode が iOS 13 Safari も対応されます。

  • color-scheme で対応するスキーマを定義
  • prefers-color-scheme メディアクエリが使用できる
  • <picture> を活用して、画像の Light Mode / Dark Mode 切り替えできる
css
:root {
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  /* … */
}
html
<picture>
  <source srcset="dark.jpg" media="(prefers-color-scheme: dark)" />
  <img src="light.jpg" />
</picture>
  • email メッセージはについて、プレーンテキストメールは自動で Dark Mode になる。
  • HTML リッチメールは color-scheme と prefers-color-scheme で対応可能。リモートの画像は現状 Light Color 用になってしまう。
  • 新しい Safari の Web Inspector に Dark Mode 変更のシミュレーション機能が追加。

弊社藤原が実装した https://frontend.dena.com はすでに Mojave リリース時点で WebKit の Dark Mode に対応しており、iOS13 でも同様に Dark Mode が動作すると思われます。

Sign in with Apple / JavaScript SDK + REST API

Apple アカウントでの認証が作れるようになりました。プライバシー保護が非常にユニークなサインイン形式です。

https://developer.apple.com/documentation/signinwithapplejs

  • シンプルにブラウザで動作するログインシステム
  • Safari であれば、TouchID が利用可能
  • 開発でスコープドなユニーク ユーザー ID、Identity token, code、そして利用者が許可すれば、2FA で保護されたアカウント情報＜名前、email ＞、が使用可能
  • email アドレスは利用者のアドレスを直接するのではなく、ランダム文字列に変換された情報で取得可能になるため、プライバシー・個人情報取扱いのリスクが軽減される
  • Sign in with Apple 自体は iOS / macOS / watchOS / tvOS / JavaScript API (Web: ex. Android / Windows) に対応
  • REST API も利用可

新しいレビューガイドラインが物議を醸している Sign in with Apple ですが、iOS / macOS 利用者にとっては親しみのあるログイン方法になっていくことは確実に思えるので、今のうちから Sign in with Apple の JavaScript API に対応しておくと良さそうです。サービスのログインコンバージョンは開発者のビジネスに直結しますしね。:thnking_face:

Web Share

Safari からネイティブのシェア機能が呼び出せるようになります。
OS のシェア機能になるため、Twitter や Facebook や slack に LINE などのシェアができるようになっていれば、いつもいくつも用意しなければならないとされるシェアボタンを一つにすることができます。

html
<body>
  <script>
    let shareButton = document.createElement('button')
    shareButton.innerText = 'share'
    document.body.appendChild(shareButton)
    shareButton.addEventListener('click', async (event) => {
      try {
        await navigator.share({
          title: ‘DeNA DESIGN BLOG’,
          text: ‘DeNA Design Unit Blog’,
          url: 'https://design.dena.com’,
        })
      } catch (error) {
      }
    })
  </script>
</body>

各 SNS のボタンをウェブページに配置すると、ページロードタイムが非常に長くなってしまうのでこれはパフォーマンス改善のためにもとてもいい仕組みだと思います。

Desktop-class Browsing on iPad

新しく発表された iPadOS に搭載される Safari はモバイル向けに表示されていたサイトもデスクトップ表示がされるようになります。

  • デフォルトの表示スタイルがデスクトップ表示になる（いままではモバイルレイアウトで表示されることが多かった）
  • サイトがデスクトップサイズに合うように自動スケーリングされる
    • meta タグの viewport でフォントサイズはそのままにするなどの切り替えが可能 shrink-to-fit=no を使用する
  • マウスサポート（iOS でも MouseEvent 、例えば「ホバーアクション」をサポートするようになる）
  • タッチイベント、マウスイベントである例えば touchmove mousemove を包含するポイントイベント pointermove がサポート
  • Apple Pencil の JavaScript サポート、canvas に描くような機能の実装が可能に
  • WKWebView で、動作タイプを mobile にするか desktop にするかを指定可能に
    • WebView モバイル/デスクトップを切り替えられるようにできる
    • カスタムユーザーエージェントも指定可能
    • ネイティブ側の実装: WebViewConfiguration のプロパティなどに指定

iPadOS の登場により、iPad をパソコンのように使えるように iPad の進化の方向性が定められたように感じます。
iPad は「生産する」vs「消費する」でいうと、後者の方が活用される場面が多いかなという個人的な見立てなのですが、生産性を上げることができる「作業効率化」のための機能も充実してきました。例えば画面分割や iPad を Mac のサブディスプレイにできる Side Car などです。

その他のブラウザの変更

その他様々な強化が行われていくようです。

  • アルファチャンネル動画サポート（HEVC コーデック）
  • Web Inspector に Audit 機能 (自動テストの Web Driver サポート)
  • Web Inspector にバッテリー影響も推測できる CPU Timeline が追加
  • WebRTC 動画のスクリーンキャプチャ
  • Web SQL を削除、Indexed DB への完全移行
  • (昨年のラップアップ) Safari Extensions を終了、Safari App Extensions / Share Extension / Content Blocker の 3 種類に
  • TouchEvents の高速スクロールエミュレーションにより、CSS -webkit-overflow-scrolling: touch; の指定が不要に
  • Apple Pay を WKWebView 内でサポート
  • http(s) の指定のリンクを開くと、アプリが入っている人にはアプリを、そうでない人には AppStore を開く「Universal Link」が macOS Safari にも追加
  • window.visualViewport の追加、resize イベントのサポート

これは機能的なところの紹介でしたので、NDA 解除後パブリックになったあと、can I use などで CSS / JS の実装状況を確認しておきたいところです。

感想

iOS アプリなどモバイルアプリサービスの開発などにおいて、Mobile App Developer 一人で大規模なサービス全ての開発をするのはなかなか時間もかかりますが、Frontend Engineer (Web Developer) と分担して改善のサイクルを回りやすくするため工夫しながら工数を削減することができます。たとえばビューのうちホーム画面はネイティブだが、記事詳細画面は WebView でつくる、などです。

この時アプリの中で使用しているテクノロジーが違う場合も、UI や感触を地続きで表現すると利用者にとってとてもいい体験にできるのは自明なので、Web Developer と Mobile App Developer がお互い情報交換をしながら開発ができるといいなと思いました。

あわよくばと期待していた PWA 周りは特にセッションでの言及は特になかったですが（元々 Google 発祥の言葉・概念ですしね）、PWA の一部は元々 iOS に搭載されていたものであったりして、PWA は Web 中心の思想なので、OS とブラウザ中心になる Apple の思想であると、それは PWA であると言うことはないのでしょう。今回新しい仕組みの Share API や Apple Pencil の Web サポート、 Dark Mode も「ネイティブアプリと同等の動きをするウェブ」という意味では PWA なのかもしれません。

今回 WWDC には iOS Developer の同僚と同行したのですが、Frontend Engineer としてご飯を食べながら情報交換・議論ができたこともあったので、とてもいい体験ができました。

WWDC 参加レポート＜総括＞

dubdub

5 日に及ぶ他に類を見ない長い期間で行われる開発者会議でしたが、今年は本当に濃厚なトピックが一気に登場して、まさに頭が爆発するキービジュアルのような感覚です。Apple がしばらく数年温めてきたトピックが一気に放出したということかもしれません。当たり年という感じです。トピックが本当に多すぎるのです！この 5 日間でキャッチアップするにはそうそうに無理と判断して、多くを一旦切り捨てました。Metal や ML、AR、CoreData 、iCloud、テスト周り、watchOS、tvOS、Core Location、Siri、Core NFC、パフォーマンス回りのセッションは捨てて、SwiftUI と Combine や UI Design と SF Symbols、Sign in with Apple そして Web Develop、Health、iPadOS、アクセシビリティなどの話を中心にキャッチアップしました。帰宅後このままの勢いで切り捨てたトピックもキャッチアップしていきたいですね。

ちなみに、＜ Engineer Manager 編＞を書いてこのシリーズを締めようと思っていましたが、「WWDC や大型のカンファレンスはエンジニアやデザイナーなら行けるなら行った方がいい。ただしその技術や周辺領域への熱意・知識が一定以上あって、発信や仕事を頑張っている人。会社全員がとにかく行くなんてのはあまり意味がないし、行きたくてもいけない、家庭や仕事の都合で行けないにはあまりにもアンフェアだから。」なんて当たり前の話になりそうなので、長くブログで書くほどではないかなと考え、iOS Developer → UI Designer → Health Care Business → Developer Relations → Frontend Engineer という構成にしました。

去年は弊社のメンバーで WWDC に行ったメンバーは僕一人で心細い思い（ホームシック）をしましたが、WWDC18 のタイミングで他社の優しい iOS Developer の方と出会い、勉強会などのコミュニティなどで日本でも知り合いが増えていき、今年は DeNA からも 6 名のメンバーで行くことができたので、セッションおわりもいろんな人とあれはどう言うことだったんだろう、と確認することもできたり、大変充実した日々をおくることができました。来年は今回参加したメンバーがさらに他のエンジニアやデザイナーをエスコートするような感じになったら素敵だなと思いました（そのためには会社の売り上げを上げねばというモチベーションがありますね…）。

ここまで読んでいただいてありがとうございました。WWDC の知見を活かしてよりよいアプリやサービスを作っていきましょう！

告知

6/14 (金)、iOS de KANPAI! (WWDC 2019 報告会) で同僚と一緒に登壇します。良かったらお越しくださいませ〜。

  • Nobuhiro Takahashi

    Nobuhiro Takahashi

    Designer / EngineerShow More

Related Articles