高度なWebコンテンツの開発

♪ （高度なwebコンテンツの開発） こんにちは「高度なweb コンテンツの開発」へようこそ Safari and WebKitチームの エンジニア　Sihuiです 重要なアップデートを共有する ことができ嬉しく思います この1年で Web開発者のために WebKitとSafariにおいて 取り込んできました これからお話しすることは 大まかに 3つのカテゴリに 分けられます まずJavaScriptの新機能と 強化点について 説明します 次にWebAssemblyのアップ デートの概要を説明します そして最後に Webコンテンツに 新たな機能を追加できる 新しいWeb APIを いくつかご紹介します 盛りだくさんの内容ですので まずはJavaScriptでの新しい 情報をご紹介します 毎年 JavaScriptエンジンには 何百もの変更が 加えられています まずJavaScriptを扱う上で 知っておかなければならない 最も重要なものを 取り上げます それらは… 新しいクラスフィールド構文 よりスマートなメモリ管理を 可能にする弱い参照 awaitキーワードの 新しい使い方 workerの モジュールのサポート 国際化APIファミリーに追加 されたインターフェースです これらの新機能をイメージ していただくために シンプルなストップウォッチ を例に挙げて説明します ストップウォッチには ボタンが1つしかありません 1度クリックすると カウントを開始します もう一度クリックすると 停止します そして過ぎた時間を 教えてくれます このことを 覚えておいてください 後ほどJavaScriptで 実装してみます では新しいクラスフィールド の構文を見てみましょう 新しいプライベートクラスの フィールドとメソッドがあり 言語によって アクセスが保護された 実のプライベートメンバーを 定義することができます アクセスルールを破ると エラーが表示されます またスタティックフィールドの サポートも追加されました それはクラスのインスタンス を作成することなく アクセスできる クラスメンバーを 宣言することが できるものです これで基本的な情報が理解 いただけたと思います ストップウォッチの例で 使い方を確認してみましょう ストップウォッチクラスの 実装を依頼された場合 このような実装に なるでしょう StopwatchWithOneButtonには 「click()」という名前の メソッドが1つだけあります startTime変数を 確認します スタートが設定されていない 場合クリックは「開始する」 という意味なので 時間をスタートさせるのです すでに開始されている場合 クリックは停止の意味なので 継続時間を計算して 時間の開始をリセットします startTimeにアンダースコア プレフィックスがあります これはその変数がクラス内 のみで使用されることを 示すためによく使われる 命名規則です しかし実際には 時間の開始がパブリックに アクセスされることを 防ぐことはできません 新しいプライベート構文は この問題を解決できるのです アンダースコアをハッシュに 置き換えるだけで真の プライベート・インスタンス ・フィールドを宣言できます カプセル化は言語によって 強制されます またプライベートメソッド にも対応しています 例えば以下のように click() メソッドを構造化するために このようにハイライトされた コンテンツを置き換えるための 2つのプライベートメソッド start()とstop()を 作成することができます ハッシュプレフィックスを メソッドにつけることで クラスの内部からしか メンバー関数に アクセスできないように しています この新しいprivate構文は startedStopwatchCountなど のスタティックフィールド にも適用されます ここでstartedStopwatchCount はスタート時やストップ時の ストップウォッチオブジェクト によってのみ変更可能です もちろん startedStopwatchCountを どこでもアクセスできる ようにしたい場合 ハッシュプレフィックスを付けずに パブリックスタティックフィールド として宣言できます パブリックスタティックフィールドが 今やWebKitでも利用可能です プライベートインスタンスフィールド メソッド プライベートスタティックフィールドと パブリックスタティックフィールドが 今回新しいクラスフィールドの サポートとなります そして もう一つの特徴である 弱い参照に 続けてみましょう 弱い参照はガベージ コレクションを 妨げない方法で JavaScriptオブジェクトへの 参照を保持できます WeakMapやWeakSet とは異なり 既に参照を持っていなくても 基礎となるオブジェクトを 取得することができます このサポートには ガベージコレクションの通知 も含まれていますので 必要に応じてクリーンアップ 作業を行うことができます それがどのように使われる のかを見てみましょう ストップウォッチクラスを 実装したところです ここで様々なタスクに向けた 複数のストップウォッチ オブジェクトを 作成したとします テストで 一度にすべての ボタンをクリックするには どうやってしますか？ 直感的な方法としては すべての ストップウォッチの インスタンスセットを保持します ストップウォッチを作成する ときにセットに追加します 次にclickAllStopwatches 関数でセットを繰り返し 各ストップウォッチを クリックします しかしこの方法には 問題があります JavaScriptのオブジェクトは デフォルトで強い参照を 保持しているので この場合 セットがまだ 参照を保持しているため すべてのストップウォッチオブジェクトが ガベージコレクションされません もちろんテストのためだけで すべてのストップウォッチ オブジェクトを用意して おくわけにはいきません これではメモリの使用に 耐えられません SetをWeakSetに置き換えれば と思われるかもしれませんが WeakSetはイテラブル ではありません では あなたなら どうしますか？ この時 新しいインターフェース WeakRefが必要です これはオブジェクトへの 弱い参照を保持するものです このセットは まだありますが 今回はオブジェクトのWeakRef をセットに加えました clickAllStopwatches関数では クリックの前にオブジェクト を再参照することで オブジェクトがまだ存在する かどうかを確認します これで問題は解決したよう ですが 別の問題があります ガベージコレクションされた ストップウォッチを タイムリーにセットから 取り除くことができません 次のクリックテストまでにセットが かなり増大します さて 私たちは どうすればいいのでしょうか 別の新インターフェイス FinalizationRegistryが このような場合に 役立ちます オブジェクトがガベージ コレクションされたときに 呼び出されるコールバックを 指定することができます ここでfinalizationRegistry オブジェクトを作成します removeStopwatch関数を つけて オブジェクトが収集 される度に この関数が呼び 出されるようにしています ストップウォッチオブジェクト をレジストリに登録します 各ストップウォッチに識別子 が割り当てられているため removeStopwatchはどれを 削除するかを判断できます いいですね　これで ガベージコレクションされた ストップウォッチは allStopwatchesから消えます 弱い参照の使い方はそれほど 難しくないと思います しかしJavaScriptのガベージ コレクションには要注意です それは非常に複雑で 不確定要素が多いのです 例えば コレクションされるべきだと 思われるオブジェクトが 実際にコレクションされるのはかなり 後になるかもしれません またイベントループ上で動作 するため コールバックが FinalizationRegistryから 取得できないかもしれません そのため使用する前に 構文とその期待される動作を 十分に理解してください 弱い参照から 次の機能である top-level awaitに 移りましょう これはモジュールの 新機能です これにより async関数の外でも await式が書ける ということです この場合モジュール自体が 大きな非同期関数のようなもので 非同期モジュールは それらをインポートした モジュールの実行をブロック することができます ストップウォッチクラスの 例を見てみましょう これが先ほど作成した クラスです top-level awaitの使い方を 説明するために モジュールにしてクラスを エクスポートしてみましょう これはインラインモジュールを 含むHTMLファイルです ダイナミックインポートを使用して stopwatchモジュールをインポート インポート関数は promiseを返すので インポートが完了した後に then やcatch メソッドを使って アクションを実行できます top-level awaitを使えば 連鎖するメソッドを削除して 同期的にコードを 書くことができます これによりコードが わかりやすくなります またインポートされたモジュール は ロード時に評価されるので 非同期モジュールは それに 依存するモジュールの実行を ブロックすることができます つまりストップウォッチ モジュールが非同期処理を 実行して結果を待つ場合 ここでのストップウォッチ変数は ストップウォッチモジュールの実行 終了後に初期化されます Top-level awaitにより 依存関係の管理が より簡単になりました しかし何度も言いますがこの機能は モジュールでしか利用できないので スクリプトがモジュール でない場合は以下のように

Webインスペクタで 構文エラーが表示されます モジュールといえば もう一つ関連する機能があります Module Workerです Workerには幾分よく知られている メリットがあります スクリプトをバックグラウンド のスレッドで実行できるので リソースをより効率的に 活用できるようになります この新しいサポートで Worker がモジュールの利点を 共有するようになりました ダイナミックなインポート 最適化されたロードと実行 そして依存関係管理 などもそうです 大変な作業を メインスレッドから バックグランドスレッドに移すのは 今より便利で簡単です モジュールは今 さまざまなタイプ のWorkerで利用できるようになり Web Worker サービスWorker Workletなどがあります Module Workerを 作成するには Web Workerや サービスWorkerの場合 オプションでタイプをモジュールに 指定する必要があります Audio Workletのような Workletでは addModule関数を 使用することができます アプリケーションを高速化する Module Workerを 作るのはとても簡単です JavaScriptセクション の最後は 国際化APIでの アップデートです このAPIは 言語ベースの 書式設定を行います Webコンテンツが異なる ロケールのユーザー向けに 作成されている場合に とても便利です どのように使用できるかを示すために このストップウォッチの 記録ページを作りました ストップウォッチが時代に 遅れずついて行き 機能をリリースする 必要があるからです このページでは ストップウォッチ の単なる使用の詳細が表示されます 期間 開始時間 イベント 参加者 このページで使用可能な言語などが 表示されています それでは 各セクションに進んで それぞれのインターフェースを 詳しく見ていきましょう まずNumberFormatです NumberFormatは 言語を考慮した 数字の書式設定で 期間の書式設定に 使用されています NumberFormatのコンストラクタは 言語とオプションという 2つのオプションの パラメータを取ります ここでは 言語を英語に設定し 2つのオプションを作成して 異なる最小桁数を 指定しています 言語とオプションを持つ2つの NumberFormatオブジェクトを 作成したら それらを使って 継続時間の数字を フォーマットすることができます ここで 数値が ミリ秒でない場合 Format1を使用して 2桁を維持し そうでなければFormat2を 使用して3桁を維持します ご覧のように formatメソッドは ゼロパディングを 自動的に追加してくれます 必要なフォーマットを 作成するために スタイルなどのさまざまな オプションが用意されています ここでは値に 通貨や単位を 指定することができます 次は DateTimeFormatです これは言語に依存した日付と 時刻のフォーマットを可能にします 使い方は NumberFormatに似ています まず 言語を設定します そして オプションを設定します オプションでは 日付と時間に 異なるスタイルを 設定しています DateTimeFormat オブジェクトでは 秒やミリ秒のスタイルを 指定することもできる きめ細かな設定が可能です その後 パラメータ付きの DateTimeFormatオブジェクトを 作成し それを使って 開始時刻のフォーマットに 使用します 結果は英語で 表現されます 長い形式だからこそ 日付がより詳細にわかるのです 次はSegmenterです 言語を考慮した 文字列分割を 行うことができます イベントセンテンスの キーワードを探すのに使いました ストップウォッチの記録ページ の中国語版です まず 強調したいキーワードの 短いリストを宣言します イベントの文字列には 摂氏を表すユニコードも 含まれています ここでは 言語として 中国語を指定します オプションでは 詳細な情報は ワードに設定されています 他の可能な値はgraphemeと sentenceです 次にSegmenterを作成し それを使いsegmentメソッドで 文字列を分割します resultオブジェクトを繰り返して すべてのセグメントを取得します 各セグメントが キーワードリストに 含まれているかどうかを確認し マークします Segmenterは中国語のように 単語の境界がはっきりしない言語 の通訳には非常に便利です 次は ListFormatです ここでは 言語を考慮したリストの フォーマットが行えます 先ほどと同じように 言語やオプションを 指定することができます ListFormatは 他のインターフェースほど 多くのオプションを 持っていません 私が見つけた最も便利なものは タイプとスタイルです 言語とオプションを使って ListFormatを作成し 参加者リストを フォーマットすることができます ご覧のように タイプがconjunctionで スタイルがlongであるため formatメソッドでは結果にカンマと 単語「and」を追加しています 最後は DisplayNamesです 言語 地域 スクリプト の表示名を 一貫して 翻訳することができます ここでは 言語を 日本語にしています DisplayNamesには 言語コードを 入力することができます オプションでは タイプを 言語に設定しました 次に DisplayNamesオブジェクト を作成します そして ここでは メソッドを使って 翻訳された結果を 得ることができます このページは英語で 作成されていますが 日本のユーザーはどの言語に対応 しているかを知ることができます このようにして 新しい国際化 インターフェースを備えた ストップウォッチの 記録ページを構築しました 思い出して欲しいのですが 先ほどのJavaScriptの セクションで見たリストです 続いて 次はWebAssemblyの アップデートです 私たちはWebAssemblyエンジン を出荷しています 少しご存知でない方のために WebAssemblyの バックグラウンドを 説明します WebAssemblyはスタックベース の仮想マシンのための バイナリ命令形式です 最近のWebブラウザで ネイティブコードに近い パフォーマンスで実行できる コードの一種です WebAssemblyはC C++ Rust などのプログラミング言語の ポータブルなコンパイルターゲット として設計されています そのため WebAssemblyは これらの言語で書かれた アプリケーションをWeb上で 展開するのに役立ちます WebAssemblyの ほとんどの使用例では JavaScriptと一緒に 実行されます これらは WebAssembly APIを通じて 相互に通信する ことができます WebAssemblyは ネイティブに 近いパフォーマンスを提供し 有力なフレームワークをWebで 利用できるようにします JavaScriptはDOMを 操作することができ 有力なWeb APIを 提供します それらはお互いに いい補強になるでしょう WebAssemblyの使用例としては Funky Kartsが挙げられます C++をEmscriptenでWebAssemblyに 変換したゲームです ご覧の通り Safariでは動作が 非常にスムーズになりました 今年は WebAssemblyエンジンを バージョンアップしました 以下の特徴があります 新しいmemory instructionで 大量のメモリ操作の パフォーマンスが向上します 例えば メモリのブロックをコピーしたり 初期化したりすることです； ユーザープロセスに指示する 新しいinstructionによって floatとintの変換時に 正のオーバーフローのような例外に トラップしないことができます； 新しい符号付き拡張演算子で 符号付き整数を 拡張することができます； WebAssemblyのi64型と JavaScriptのBigIntの間で 変換するという 最新提案の実現で これまでのソリューション よりもシンプルで コードの実行を高速化 することができます； WebAssemblyモジュールが JavaScriptやDOMオブジェクトへの 参照を保持することができる 新しい参照タイプで それらを引数として 渡し 保存します； そして最後に WebAssemblyの ストリーミングダウンロードと コンパイルにより 全体の 実行時間を短縮しています 以上 WebAssemblyの 新機能をご紹介しました みなさまの開発の お役に立てれば幸いです それでは 有益な ローレベルのコードから ハイレベルなAPIに 話を進めましょう このセクションでは 新しいWeb APIについて ご紹介します 私の目標は 新機能を 知ってもらうだけでなく それを使えるようになったと 感じていただくことです そこでいくつかの良い例を 見ていただきます しかし これは完全な チュートリアルではありませんので 使う前には必ず公式ドキュメント を確認してください これは これからお話しする 機能のプレビューです その中には 音声認識のような 全く新しいものも あります そして そのうちのいくつか はすでに存在しています しかしお伝えしたいアップデート もあるのです Storage Accessが それです では ひとつひとつを 掘り下げてみましょう 私たちは Webコンテンツを 魅力的にするために 素晴らしい視覚体験を提供すること が非常に重要だと思っています WebGL2がWebKitとSafariで 利用できるようになったことで 美しいインタラクティブな Webコンテンツをより簡単に 作成できるようになりました ここでは WebGL2で 何ができるのか その良い例を 紹介します After the Floodは PlayCanvasが開発した 対話型デモです 優しい風が木を揺らしている のがわかります Safariでは 鮮やかに見えます では WebGL2とは 何でしょうか？ WebGLは 2Dおよび3D グラフィックスのレンダリングに 非常に広く使われている ローレベルAPIです WebGL2は フォールバックを排除し いくつか素晴らしい 新機能を導入したWebGLの アップグレード版です 3Dテクスチャを追加することで 雲のようなボリューム感のある レンダリングが 可能になります サンプラーオブジェクトがあるので シェーダーでの テクスチャの使い方が より柔軟になります GPUにパフォーマンス パーティクルシステムを実装する際に 役立つ変換フィードバック を提供します WebGL2には素晴らしい 新機能がたくさんあります そして もっと重要なのは WebGL2がすべてのAppleデバイスの Safariで利用可能になりました つまり どこでも見栄えのする 美しいサイトを 構築できるのです では オレンジ色の四角を作る という例で WebGL2をもっと理解してみましょう そして そのために書くべき JavaScriptのコードがこれです WebGLを使ったことがない人 にとっては 想像しているほど 簡単ではないかもしれません 先に述べたように WebGLは ローレベルのAPIであるため 非常に冗長になる ことがあります しかし 心配する必要はありません 開発を簡素化するのに役立つ 素晴らしいライブラリや フレームワークがたくさんあります それらを使えば きれいな四角や それよりも複雑なものを作るのは それほど難しくありません さて Webコンテンツで すでにWebGLを使用している方に 朗報があります バックエンドを OpenGLからMetalに 移行することで サポートを改善しました つまり iOS Simulatorは Webコンテンツに GPUを 使用できるようになり ユーザーが見るものを より正確に 表現できるように なったのです また Xcode Frame Debugger などの Metalツールを使って 今すぐWebGLコードを 解析することができます WebGLを使ってコンテンツを 制作する以外にも 優れたビジュアル体験を提供する 一般的な方法として ビデオがあります すべてのブラウザが同じように メディアフォーマットを サポートしているわけでは ありません そのため どのフォーマットを 使用するかを 決めるのが 難しい場合があります より使いやすく するために 今年はWeb上で共通の メディアフォーマットである WebMへの対応を強化しました まず最初に このサポートは ストリーミング再生のみです macOS 11.3では VP8やVP9ビデオと VorbisオーディオなどのWebM ファイルの再生に対応しました そして macOS 12では Opusのオーディオを含む ファイルに対応しました 昨年 macOSの Media Source Extensionで WebMの再生の サポートを開始しました 今回 そのサポートを iPadOS 15に導入します お使いのコードでWebMがサポート されているかどうかを確認するには MediaCapabilities APIを 使用してください 使用したいメディア構成を 正確に 検出することができます 画面上の構成は 最新のSafariで サポートされており 現在はVP9もサポート されているということです このビデオコーディング フォーマットに対応したことで SafariやWebKit Appで 利用できる Webコンテンツが 増えることが期待されます ストリーミングとWebRTCの 両方でVP9を使用できます macOSとiPadOSで 動作します 異なるデバイスへの対応 については あらゆるApple Silicon Macで 利用可能です それ以外のものについては 先ほどWebMで見たように MediaCapabilities APIで 確認することができます さて もしサイトにWebM や VP9のコンテンツがある場合 最新のSafariや WebKitで どのように動作するか ぜひ確認してみてください しかしどのメディア形式にするか 迷っているのであれば H.264またはHEVCを お勧めします H.264は完成されており いくつものブラウザで サポートされています HEVCは高品質な映像を サポートしてくれます ハードウェアアクセラレーションを どちらも搭載しており よりスムーズな再生と長時間再生が 可能なバッテリーを実現しています 映像コンテンツの ホスティングについては 我々がコンテンツを 所有しているのではなく 第三者から入手している ケースがよくあります 例えば video.domainにはこんな 素敵なビデオがあります 私のサイトであるmain.domainに 表示させるには video.domainから このビデオソースを読み込むか video.domainの iframeを作成します 第三者のiframeやリソース はセキュリティ上の理由から デフォルトではファーストパーティ のストレージにアクセスできません つまり video.domainへの リソースリクエストが main.domainから 開始された場合 video.domainの クッキーは含まれません video.domainのWebサーバが 認証されたユーザーにのみ コンテンツを提供したい場合に これが問題となります そしてクッキーがないということは 認証がないということを意味します ストレージアクセスAPI が この問題を解決します これにより 第三者の iframeがファーストパーティの クッキーへのアクセス許可を 要求できるようになります ユーザーがこの許可を与えると 第三者であるvideo.domainは そのファーストパーティークッキー にアクセスできるようになります Storage Access APIは 3年以上前からWebKitと Safariで 利用可能です 相互運用性を 高めるために 今年は2つの新機能を 追加しました 第１に アクセスがページごとの 範囲で許可されることです つまり 一度第三者に 許可を与えると 同じページにある すべてのサブリソースにも 許可が及ぶということです iframeごとにリクエストをする 必要はありません 第２に ネストされたiframe が リクエストを行うことができます これにより iframeの中のiframeも ファーストパーティークッキーに アクセスを 要求できるようになりました これは以前 不可能でした 新しい使い方を もっと知りたい方は webkit.orgの ブログ記事 「Updates to the Storage Access API」をご覧ください これで 必要に応じて ユーザーの許可を得て 第三者から ビデオコンテンツを読み込んだり 取り込む方法がわかりました 自分で何かを作ってみるのは どうでしょうか？ 新しいMedia Recorder APIを 使えば とても簡単にできます Media Recorder APIは videoタグや MediaStreamオブジェクトのような HTMLメディア要素を含む メディア要素から データをキャプチャ することができます ユーザーの入力デバイスからの 録音にも使用できます コンテナのMIMEタイプや トラックの 希望ビットレートなど 必要なオプションを 指定できます APIはシンプルです 1つの主要なインターフェースで 構成されているのです MediaRecorderは ソースから データを収集して配信する すべての作業を行います 一例を挙げてみましょう MediaRecorder APIを使って この「Voice Memo」という Web Appを作りました これは私にとって初めての ボイスメモです ボタンをクリックすると マイクからの録音が始まります もう一度クリックすると 録画を停止して 再生を開始します 「これが私の初めての ボイスメモです」 それはそれで楽しいです そして 今度は実装を 確認してみましょう 大きく分けて 2つの機能があります startRecordingと stopRecordingです startRecordingでは マイクの入力メディアストリーム を取得します そして それを使ってMediaRecorder オブジェクトを作成します メディアレコーダーの 2つのイベントをリッスンします そして スタートメソッドで レコーダーを起動します 録音を停止するには mediaRecorderオブジェクトの stopメソッドを 呼び出す必要があります ここでは 2つの イベントハンドラを紹介します キャプチャーした データがあれば それを配列に 格納します 録音が停止すると 収集したデータを 配列にしてblobを作成し 既存のaudio要素に送って 再生します このようにして 機能的なボイス レコーダーを作ることができます オーディオデータを 収集した後 編集したいと思うことが あるかもしれません この場合 新しい Audio Worklet APIを有効に 活用することができます Audio Workletインターフェースは Web Audio APIの一部であり Web上でオーディオ処理を 行ったことがある方には 既に馴染みが あるかもしれません JavaScriptや WebAssemblyコードなどの スクリプトを実行して カスタムAudioNodeを サポートする オーディオレンダリングスレッドで オーディオを処理します ScriptProcessorNodeと 比較すると カスタムスクリプトを実行する 以前の解決策は レンダリングスレッドと メインスレッド間の ホッピングを減らし 低レイテンシーを実現します Audio Workletで Voice Memoに 新たな機能を追加しました 「これは私のゆがんだ声です」 録音時にディストーションボックス がチェックされていると 再生に何らかのディストーション 効果が適用されます 「これは私のゆがんだ声です」 それは 素晴らしいことです ではどのように実装されて いるのか見てみましょう 音声処理を 追加するために startRecording関数を 修正しました やはり最初に 音声入力用のMediaStreamを 取得する必要があります Audio Worklet APIを使用するには 4つの基本ステップがあります ステップ１：ソースを作成 ステップ２： AudioWorkletNodeの作成し オーディオ処理を行う Audio Workletプロセッサ と結合 このプロセッサは モジュールに実装されており 後で見てみましょう ステップ３：デスティネーション を作成 ステップ４：ソースから デスティネーションのパスを接続 今回 MediaRecorderは AudioWorkletの出力を ソースとして受け取り ゆがんだ音声を記録しています これは オーディオ処理の モジュールです ここでは DistortionProcessor クラスを実装しています AudioWorkletProcessorクラス を拡張し プロセス関数の実装を 提供する必要があります 入力はAudio Workletに入力される オーディオサンプルで 出力は処理後の 結果として生じるサンプルです さまざまなアルゴリズムを使って 出力を作ることができます ここでは 「distort() 」という カスタム関数を使って 入力に応じた値を 計算しています Process関数はtrueを返し プロセッサノードがアクティブ であることを意味します これがProcess関数の 基本構造です プロセッサクラスを 作成したのち 指定した名前でグローバルに 登録する必要があります これにより AudioWorkletNodeの 構築に使用できるようになります このようにして オーディオデータに サウンド効果を かけることができます ここまでは オーディオデータの 作成と処理について 説明してきました 記録のために どこかに保存したり 共有したりするのは どうでしょうか ブラウザを終了すると 記録が消えてしまうことを 望まないと思うのです 今年のWeb Share APIの アップデートで 簡単にできるように なりました Webシェアは WebKitやSafariで 以前から導入されています SafariでWebページ上のリンク の共有を選択すると メッセージ メール AirDropなどの 共有対象を示す シェアシートが表示されます Web Share APIを使って システムのスタイルに合った シェアシートを作成します 今年はファイル共有に 対応しました つまり 画像 動画 音声 その他のファイルを このAPIで今や 共有できるようになりました Voice Memoに共有機能を 追加してみましょう Saveボックスに チェックを入れると Voice Memoはキャプチャした データで音声ファイルを作成し 共有ボタンが表示されてファイルを 共有することができるのです では そのメモファイルを メールで共有したいと思います ワンクリックで メモファイルを添付した 素敵な原稿が できあがりました では コードを 確認してみましょう これは MediaRecorderの 例で見た stopイベントハンドラです まず stopイベントハンドラの blob変数を グローバルにして share関数で 使用できるようにしましょう share関数は shareボタンの クリックイベントハンドラです blobをファイルに変換し ファイル名をつけます ファイルを 配列にするのは それが想定される 入力形式だからです そして APIが 利用できるかどうか canShareメソッドでファイルを 共有できるかどうかを確認します 問題がなければ ファイルの配列で navigator.shareを呼び出します タイトルや 説明文など 指定できる オプションがあります ネイティブAppのように Web Appで ファイルを共有することが 簡単にできます 実際にオーディオデータを 操作するのではなく テキストだけが欲しい という場合には 例えば 音声コマンド の場合などですが そのための新しいAPIも 用意されています それが「音声認識」です Speech Recognition APIは その名が示すように ライブの音声をキャプチャして テキストに書き起こします また 転写の可能性や 選択肢も表示されます Siriと同じ音声エンジン を使用しており 多言語対応や 高精度などの メリットがあります また APIを利用するには システム環境設定で Siriまたはディクテーションを オンにする必要があります 認識はサーバーベースで 行われることがあるため App内で認識サービスが 初めて使用される際には プライバシーに関する プロンプトを表示します ユーザーは「システム環境設定」 または「設定」で 権限を変更することができます ではこの新機能を使ってVoice Memo をアップデートしてみましょう 認識ボックスがチェックされている 場合 それは録音のために トランスクリプトを生成する ことを意味します 「これは 私の ボイスメモの記録です 。」 では コードを 確認してみましょう 使い方は メディアレコーダー に似ています ここには大きく分けて 2つの機能があります startRecognitionと stopRecognitionです まず webkitSpeechRecognitionの オブジェクトを 作成する必要があります はい 今はまだ互換性のために WebKitのプレフィックスを 残していますので 忘れずに追加してください また 認識のプロパティを 設定することもできます たとえば 停止するまで続ける ように認識することを求める 「連続」などがそれです 結果やエンドイベント をリッスンします 認識オブジェクトでは startメソッドを 呼び出して開始し stopメソッドを呼び出して 停止することができます 結果イベントでは finalTranscript を文字列にまとめます ここでは 転写候補が 確率に基づいて ソートされているので 結果の最初の項目だけ を選びます 認識が停止したときには カスタムログ機能を使って 画面にトランスクリプト を表示させています このように わずか数行で Webコンテンツに 認識機能を追加する ことができます 長い道のりでしたが 最後にひとつだけ 特筆すべきWeb APIがあります macOSやiOSでは 「Now Playing」ウィジェットで Safariのメディア状態を表示 できることにお気づきでしょうか 便利ですが たいてい情報量は 少ないです 例えば Webページのタイトル が表示されるだけで どんな音声が再生されているか の情報はありません このような状況を改善する 新しいWeb API Media Session API を紹介します Media Session APIは Webページ と他のプラットフォーム コンポーネントとの間でメディア の状態を伝達することができます NowPlayingウィジェットのように ユーザーがWebページ上ではなく メディアの状態を表示したり 操作したりしたい場合は このAPIを 知っておくべきです Media Session APIの詳細 については 「Group Activitiesによる Safariでのメディア再生連携」 というWWDCのセッション をご覧ください そしてこれらが今まで 説明していた新機能です 何かを学んだと 感じていただければ幸いです そして 今日の宿題は これらの 新しいAPIを使って 独自のVoice Memoを 実装することです というのは冗談ですが WebKitとSafariで 最高の開発環境を お届けするために みなさまにご協力いただきたい ことがあります 最新のWebKitおよびSafariで 新機能をお試しいただき bugs.webkit.orgで バグレポートをご提出ください Safari Technology Previewでは 新機能や 開発中の機能の プレビューを体験する ことができます WebKitやSafariで 使用されている Web技術に興味がある方や WebKitコミュニティへの 参加に興味のある方は webkit.orgが 参考になります WebKitに関する最新情報 が必要だったり 何かご質問が ある場合は Twitterでフォローまたは ハッシュタグをつけてください このセッションをご覧いただき ありがとうございました そして引き続きWWDCを お楽しみください！ ♪