目次
はじめに
こんにちは、dely株式会社でエンジニアをしているしらりんです。4月に立ち上げられたリテール事業部という部署で、主にウェブフロントエンド・サーバーサイド領域の開発を担当しています。 先日初めてのぎっくり腰を経験し、それ以降日々腰を曲げるのに恐怖を感じています。
そんなことはさておき、この記事は「dely #2 Advent Calendar 2020」の14日目の記事です。
昨日は開発部GM 井上さん(@gomesuit)の「技術だけではもう足りない？エンジニアとしての成長のために避けては通れない４つの領域とは！」という記事でした。 tech.dely.jp
ウェブのこれからを追いかける
記事のテーマに「ウェブの未来」とスケール大きめな表現が含まれていますが大した内容ではありません。 Project Fuguで考えられているこれからのウェブでどんなことができるようになっていくのか、今どんなことが進んでいるのかをfugu-tracker-apiを少し眺めてみるといった内容になります。
Project Fugu とは
ウェブは汎用的なプラットフォームとしてとても優秀ですが、汎用的であることもあり少し凝ったこと(特化したこと)をやろうとすると、ネイティブアプリではできるがウェブでは難しいということが多く存在します。アプリではよくみるシェア機能をウェブで提供するWeb Share APIが使えるようになったのもつい最近のことになります。
Web Share APIの対応状況 caniuse.com
そういったネイティブアプリとウェブのギャップを埋めるための取り組みがProject Fugu(Web Capabilities Project)です。
そんなProject Fuguで考えられている機能がいつ提供されるのかが把握しやすくまとまっているのがfugu-api-trackerです。
ここでは現在どのようなエコシステムが試験・検討されているのか、いくつかみてみることにします。
検討されているエコシステム
User Idle Detection API
現在origin trialとして提供されている機能。 マウスやキーボード、タッチスクリーンに対する操作が行われていないことや、別のタブやウィンドウを開いているなどユーザーのアイドル状態を検知することができます。 例えばフィードバックのタイミングをユーザーがアクティブな状態に戻ったときに行うなどといった活用が考えられます。
macOS Touch Bar API
中にはこんなものもあります。
名前の通り、最近のmacbook(pro)に付いているタッチバーを活用するAPIです。 例えばこれを使ってタッチバーでプログレスバーを表現したり、簡単なゲームを作ったりとすることができます。 ドキュメント内から参照できるelectronのAPIでは、electronと以下のコードを利用してタッチバーのついているmacbookで動かせるスロットゲームを作るサンプルがのっています。 将来的にこれがweb apiとしても利用可能になるかもしれません。
// touchbar.js const { app, BrowserWindow, TouchBar } = require('electron') const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar let spinning = false const reel1 = new TouchBarLabel() const reel2 = new TouchBarLabel() const reel3 = new TouchBarLabel() const result = new TouchBarLabel() const spin = new TouchBarButton({ label: '🎰 Spin', backgroundColor: '#7851A9', click: () => { if (spinning) { return } spinning = true result.label = '' let timeout = 10 const spinLength = 4 * 1000 const startTime = Date.now() const spinReels = () => { updateReels() if ((Date.now() - startTime) >= spinLength) { finishSpin() } else { timeout *= 1.1 setTimeout(spinReels, timeout) } } spinReels() } }) const getRandomValue = () => { const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀'] return values[Math.floor(Math.random() * values.length)] } const updateReels = () => { reel1.label = getRandomValue() reel2.label = getRandomValue() reel3.label = getRandomValue() } const finishSpin = () => { const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size if (uniqueValues === 1) { result.label = '💰 Jackpot!' result.textColor = '#FDFF00' } else if (uniqueValues === 2) { result.label = '😍 Winner!' result.textColor = '#FDFF00' } else { result.label = '🙁 Spin Again' result.textColor = null } spinning = false } const touchBar = new TouchBar({ items: [ spin, new TouchBarSpacer({ size: 'large' }), reel1, new TouchBarSpacer({ size: 'small' }), reel2, new TouchBarSpacer({ size: 'small' }), reel3, new TouchBarSpacer({ size: 'large' }), result ] }) let window app.whenReady().then(() => { window = new BrowserWindow({ frame: false, titleBarStyle: 'hiddenInset', width: 200, height: 200, backgroundColor: '#000' }) window.loadURL('about:blank') window.setTouchBar(touchBar) })
./node_modules/.bin/electron touchbar.js
(一瞬ラッキーセブンが揃った🤑 )
アドベントカレンダー用 pic.twitter.com/Y0cbPp9ZYF
— しらりん (@Srrn97) 2020年12月14日
その他
その他にも上の方で少し触れたWeb Share APIのデスクトップ対応だったり、input type="file" などから選択されたファイルのリサイズ機能(将来的には動画のサイズ変更にも対応)といった様々な機能の提供が検討されています。
おわりに
いかがでしたでしょうか。 ブラウザやOSの種類、バージョンなど多くの壁が存在するウェブですが、他のどんなネイティブアプリケーションにもなれる可能性を秘めていることがウェブの魅力の1つだと僕は思っています。
fugu-api-trackerを見れば今後どのようなエコシステムが試験され、提供されていくのかを把握しやすく眺めているだけでも楽しいです。ここで紹介したものは極一部のものでしかないので、是非一度目を通してみてください。
明日はnancyさんの「iOSのサブスクリプション機能 プロモーションオファーを触ってみた」です。お楽しみに！
最後になりますが、delyではエンジニア・デザイナーを積極的に採用しています。 興味がある方は是非エントリーしてください！
また、定期的にテックトークイベントを開催しています。 delyについてちょっと興味ある・もっと知ってみたいという方は、お気軽にご参加ください。
