トーク

名刺忘れた？名刺切れた？——あるあるですよね！
でももう大丈夫。そんなときは、スマホをサッと出して「これが私のWeb名刺です！」ってドヤ顔キメちゃいましょう！

今回のLTでは、できるだけ簡単に！でもちゃんとカッコよく！ をモットーに、リアルなWeb名刺をVanillaで爆速制作しちゃいます！
フレームワーク？ナニソレおいしいの？今回はVanillaのHTML・CSS・JavaScriptだけで作っちゃいます！

「Webは好きだけど、ちょっと作るのめんどくさそう…」という方も大丈夫！
超簡単に、自分だけのオレオレ名刺を爆誕させましょう！

フロントエンドの責務は広がり続けており、その中で「エラー」の扱いは重要な課題の一つです。Result型などエラーハンドリングは確立されつつありますが、そのエラーを「UIとしてどうユーザーに伝えるか」という観点での議論は、まだ十分とは言えません。

本LTでは、その問いへの一つの答えとして、アクセシビリティの観点から「良いエラーUI」を考察します。具体的なUIデザインを交えながら、エラーメッセージの文言、表示タイミング、位置など、すぐに実践できる設計のヒントを紹介します。

このLTは、エラー実装に「アクセシビリティ」という新たな評価軸をもたらします。また、実装都合ではない、サービスの品質を高めるためのUI設計に取り組むきっかけを提供します。

▼ 話すこと

• エラーUIの設計方針
• ヒントとなるWCAG達成基準の紹介

▼ 話さないこと

• ロジックや描画層でのハンドリング実装

　p5.jsは、Processing言語をベースにした、クリエイティブコーディングのためのJavaScriptライブラリです。簡単にグラフィックやアニメーションを生成し、Web上で動作するインタラクティブな作品を創出できます。Webエディタを利用すれば、環境構築なしに利用することができます。
　昨年のフロントエンドカンファレンス北海道2024でもp5.jsについてLTを行い、Webカメラやマイクを使ったデモやtoioとの連携などのデモをお見せしました。しかし、まだまだp5.jsの魅力を伝えきれていません。本LTでは、昨年紹介できなかったWeb Serial APIを用いた外部デバイス(M5Stack)との連携や、物理演算を手軽に扱えるゲームエンジンp5playを、デモを交えてご紹介します。LTを通じて、p5.jsの可能性をお伝えできればと思います。

「スピナーよりスケルトンスクリーンの方が早く感じる」という体験をしたことはありませんか？
物理的にはスピナーと同等の待機時間でも、ユーザーはスケルトンスクリーンを「より早い」と感じる傾向があります。
この現象は偶然ではなく、人間の認知特性に基づいた心理学的なメカニズムによるものです。
ただし、すべての状況でスケルトンスクリーンが最適というわけではありません。どんな場面で使うべきか、逆に避けるべきかの判断も必要になります。
本LTでは、スケルトンスクリーンが早く感じるメカニズムや、使用する際の留意点についてご紹介します。

ウェブページの入力フォームでは、inputやselectなどの入力要素に適切なラベルをつけることが、アクセシビリティとユーザビリティの両面で非常に重要です。入力すべき内容を明確に示すラベルがあれば、ユーザーはスムーズに入力を完了できるでしょう。

しかし、ときには固有の可視ラベルなしに、入力要素を使用したいケースがあると思います。本LTでは、SmartHRの開発の中で実際に見つけた“ラベルのない入力要素”たちについて5分間でご紹介します。

最近注目され、便利な UI を簡単に実装できる Popover API ですが、その手軽さの裏にはアクセシビリティの落とし穴が潜んでいるかもしれません。特に、新しい WCAG 2.2 の達成基準を考慮すると、これまで見過ごされてきた問題がクリティカルになる可能性があります。
このセッションでは、 Popover API を利用する際に特に注意すべき WCAG 2.2 の達成基準をピックアップし、具体的なコード例を交えながら、よくある実装のつまずきどころと、それを乗り越えるための実装のヒントを共有します。

アクセシビリティって難しそう...」そんな声をよく耳にします。
確かにWCAGガイドライン、スクリーンリーダー対応など専門用語が飛び交い、敷居が高く感じられるのも無理はありません。

しかし、2024年にiPhoneに搭載されたEye Tracking機能を触ってみると、驚くほどシンプルにアクセシビリティの恩恵を感じることができます。視線だけでアプリを操作する体験は、「使いやすさとは何か」を直感的に教えてくれるのです。

この発表では、実際にEye Tracking機能を使いながら、アクセシビリティの基本概念を体感的に学びます。

技術的な実装例も交えながら、Eye Tracking機能を通じて自然と身につくアクセシブルな設計思考を紹介します。

アクセシビリティは特別なものではなく、すべてのユーザーにとっての「当たり前の使いやすさ」なのだということを、一緒に体感してみませんか？

Web上でまるで魔法のようなビジュアル表現を実現したいと思いませんか？
本トークでは、その夢を現実にするWebGLシェーダーの魅力と、その魔法の呪文とも言えるシェーディング言語「GLSL」の面白さをお伝えします。
シェーダーを使えば、従来の常識を超えるインタラクティブなアニメーションや、美しいエフェクトを生み出すことが可能です。
GLSLの数行のコードが驚くようなグラフィックを生み出す様子を、実際のデモを交えながらご紹介します。

ID/パスワードを使わず、指紋や顔認証で安全かつ簡単にログインできる「パスキー認証」は、信頼性の高いFIDO技術を基盤としています。
このパスキー認証をフロントエンドで支えるのが、Web APIの「WebAuthn」です。
WebAuthn自体は数年前から存在する技術ですが、最近ではその利用可否チェックの関数が簡略化されたり、TypeScript 5.8から関連する型定義がサポートされるなど、開発環境が格段に整い、ぐっと利用しやすくなりました。
そして何より、フロントエンド側の実装は思った以上にシンプルです。

本LTでは、WebAuthn APIの実装例と共に「パスキー認証、意外と簡単！」を実感していただくことを目指します。

近頃、V8やJavaScriptCore、SpiderMonkeyのようなメジャーなJSエンジン以外にも新しいJSエンジンのプロジェクトがいくつか進んでいます。

また、自作のJSエンジンを含めた自作ブラウザを作るような書籍も出版されており、JSエンジンへの興味を持ちやすく、理解への敷居も多少は下がりつつあると思います。

そして、JSエンジンを（拙いなりに）自作できるということは自分の「推しプロポーザル」も実装出来るということです！

このトークでは、最小の実装で自分の「推しプロポーザル」であるIntl.MessageFormatの初歩的な機能が動くまでのポイントを紹介し、JSエンジンやJSの仕様・プロポーザルへ興味を持ってもらえるきっかけとすることを目指します。

ロジスティクス関係で働く人には、おじいちゃんが沢山います。
おじいちゃん達は、年齢による症状（老眼、認知負荷）や長年ちから仕事をしているため、指が太く細かい操作がしにくいなどの問題がありました。
それらを解決するために、webエンジニアがおじいちゃんに優しいUIを作ってみたお話です。
（硬く言うと、シニア世代に向けたアクセシビリティのお話です）

Dateに代わる新たな日時操作標準APIとして、長らくTC39のプロポーザルだった Temporal がついに標準化されました。
Dateに苦しみ、多くのライブラリを用いて日時操作と格闘してきた我々フロントエンドエンジニアの福音となるか！？
2022年よりpolyfillを用いて先行利用してきた中で得られた知見とつらみを共有します！

某動画配信サービスのWebブラウザ向けプレイヤーにおいて、大規模なリプレイスを実施しました。
案件PRの最終的なファイル変更数は260を超え、リプレイスの対象領域もCSSフレームワークやグローバル状態管理ライブラリの刷新、利用しているOSSのメジャーバージョンアップの対応、パフォーマンス改善の一環としてのリファクタリングや非同期処理フローの見直しなど多岐に渡ります。

本セッションでは、主に以下の技術的観点について詳しく掘り下げます。

・なぜプレイヤーの全面的なリプレイスが必要だったのか（リリース当初に発生した課題）
・複数のブラウザやOS、ユーザー環境に依存するゆえのトラブルシューティング（再生環境や端末依存の不具合への対応）
・リプレイス前後で開発体験やパフォーマンスにどの程度ポジティブな効果があったか

本リプレイスに約半年間取り組んだ中で得た知見と学びについてお話しします。