フロントエンドBlog
Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。
かんたんパララックスでAnimation Worklet APIを試してみた
Google Chrome 71よりOrigin Trialsに予定されている、CSS Animation Worklet APIを試してみました。
Animation Worklet APIとはCSS Houdini タスクフォースが策定しているAPIのひとつです。このAPIを用いることで、ハイパフォーマンスなWebアニメーションやスクロールと連動したアニメーションの実装が可能になります。
このAPIをGoogle Chrome 71（2018年11月現在Bata版）で試すには、chrome://flagsから「Experimental Web Platform features」をEnabledに設定するか、特定のオリジンに対する期限付きトークンを取得する必要があります。（取得方法やOrigin Trialsの詳細はOrigin Trials Guide for Web Developersを参照ください）
HTML5 Conference 2018 に参加してきました！
皆さんこんにちは！UI開発者の宇賀です。
今年も素晴らしかったですね！HTML5 Conference！どのセッションも興味深いテーマばかりで、入るルームを選ぶのは苦渋の選択です...。
主催元であるhtml5jさんのYouTubeチャンネルには、去年のHTML5 Conference2017の様子が公開されているので、今年の動画もアップロードされるかもしれませんね。
当日の雰囲気は、次のTwitterハッシュタグで追うことができます。
サイトにCSSだけで魔法陣を散りばめて新しい表現を模索してみる（前編）
突然ですが皆さん、魔法陣はお好きですか？
特に男性のみなさんは、一度くらいは紙や地面に描いたことがあるのではないでしょうか？
あの童心をくすぐるデザインをどうにかしてサイトに取り入れることはできないかと考え、サイトにある様々なパーツと組み合わせて新しい表現を模索していきたいと思います！
今回は、記事を前編と後編に分けて魔法陣の実装方法からサイトのパーツと組み合わせた際の表現までをご紹介いたします！
Vue.jsを使ったモダンなAdobe XDプラグイン開発
10/15にリリースされたAdobe XDバージョン13より、アプリケーション上でサードパーティーのプラグインを使用できるようになりました。XDがはじめてリリースされた当初はプロトタイピング機能が特に注目されていましたが、毎月のアップデートにより今では単なるプロトタイプツールとしてではなくデザインツールとしてSketchなどのアプリケーションとよく比較されています。今年の5月にはXD専用の無料プランが発表され、より多くの人が手軽に使用できるようになりました。さらに、今回のアップデートで誰でもプラグインを作ることが可能になったことで、今まで以上に便利になることが期待できます。
プラグイン開発の基本的な情報はAdobe Creative Stationに投稿されている「はじめてのAdobe XDプラグイン開発！定番のHello Worldを表示させてみよう」にわかりやすくまとめられています。今回の記事ではVue.jsを用いてテキストを置換するプラグインを例としてご紹介します。
顔にモザイクをかけてFace Detection APIを試してみました
Google Chrome 70よりOrigin Trialsとされた、Shape Detection API内で定義されているFace Detection APIを試してみました。
Face Detection APIは画像内から人間の顔を検出できるAPIです。Shape Detection APIの中で定義されているAPIの一種であり、Shape Detection APIには他にもバーコードを検出するBarcode Detection APIが定義されています。