LINE株式会社フロントエンド開発センター(通称: UIT)の折原です。
先日 glitch-image という画像にオシャレなエフェクトをかけられる Web Component を公開しました。
今回は使い方はもちろんのこと、このようなコンポーネントができるまでを紹介していきます。
glitch-image とは
glitch-image は src="..." に画像の URL を指定することによって、画像にグリッチエフェクトをかけることができる Web Component です。
もともと UIT App のためだけに作成されたコンポーネントでした。UIT App についての詳細はこちらの記事をご覧ください。
ですが、開発後に <img> タグと同じインターフェースで利用できて気軽におしゃれなエフェクトをかけることができること。そして UIT App が StencilJS を採用していることで、ローコストで切り出してパッケージ化できることから、単体で OSS として提供することとしました。
https://www.npmjs.com/package/@uit/glitch-image
グリッチエフェクトとは
Glitch は機械の故障や異常のことを指します。グリッチエフェクトはこのような故障によって起きる見た目を意図的に表現する演出です。
多くはデジタルなシステムのエラーを表現します、デジタルでないモノのエラーとして有名な演出はアナログ出力装置が起こす "砂嵐" などがあります。
今日のような良質な通信環境ではなかなか起こりませんが、画像ファイルをバイナリエディタで壊すことで簡単に再現することができます。
このように、何らかの影響によって歯抜けになったデータがそのまま表示されると Glitch は起きます。
glitch-image の使い方
一番シンプルに glitch-image を使う方法は <script> タグで呼び出す方法です。
<script src="https://unpkg.com/@uit/glitch-image@0.0.9/dist/glitch-image/glitch-image.js"></script>
<div style="width: 200px; height: 200px;">
<glitch-image src="..."></glitch-image>
</div>
Web Component なので、これだけで好きな画像にグリッチエフェクトを適応することができます。
一方で、React や Vue.js などのコンポーネント内で適用したいケースも勿論あるはずです。そういった時は、 NPM パッケージ `@uit/glitch-image` をインストールして、以下のように polyfill の適用と Custom Element の定義を行ってください。
React での使用例
import { applyPolyfills, defineCustomElements } from "@uit/glitch-image/loader";
applyPolyfills().then(() => {
defineCustomElements();
});
export default function App() {
return (
<div className="App">
<glitch-image src="..." />
</div>
);
}
Vue での使用例
<template>
<div id="app">
<glitch-image src="..." />
</div>
</template>
<script>
import Vue from "vue";
import { applyPolyfills, defineCustomElements } from "@uit/glitch-image/loader";
Vue.config.ignoredElements = [/glitch-image/];
// Vue 3 からは compilerOptions の isCustomElement に glitch-image を追加します
applyPolyfills().then(() => {
defineCustomElements();
});
export default {
name: "App"
};
</script>
@uit/glitch-image パッケージには、フレームワークから利用するための専用の関数がいくつか用意されており、利用するにあたって必須なのが applyPolyfills と defineCustomElements です。
defineCustomElements()は、実行することで @uit/glitch-image に存在する Custom Element が全て登録されます。
今回は <glitch-image> の一つだけですが、複数のコンポーネントが必要な場合でも、この関数で全て読み込むことができます。
また、applyPolyfills() は IE や古い Edge 向けの polyfill を読み込むためのものです、必要ない場合は defineCustomElements() だけを実行してください。
他 JavaScript フレームワークとの連携について詳細に知りたい場合は StencilJS ドキュメントを御覧ください。
https://stenciljs.com/docs/overview
glitch-image を使うシーン
glitch-image の使い方がわかっても、こんな奇抜なコンポーネントどこで使えばいいかわからない。そんな声が聞こえてきそうです。
確かにあまり頻出するシチュエーションではないかもしれませんが、デジタルらしく意図していない画面を表示する場合などには利用できるかな。と思っています。
実際に、 UIT で運営してる技術 Podcast 『UIT INSIDE』では、 404 ページのロゴの部分で glitch-image が使用されています。
https://uit-inside.linecorp.com/404
説明に必要な画像だったり、大事なブランドロゴに glitch-image を使用するのはお控えください。あくまでもワンポイントのおしゃれのためだけにご使用ください。
Stencil で Web Components を作成するメリット・デメリット
冒頭でも紹介しましたが glitch-image は StencilJS で作成された UIT App の副産物です。そのため glitch-image を公開するまでに必要になる特別な手順はなく、ただ UIT App のプロジェクトから切り出しただけでした。
技術選定として StencilJS を選択することを除けば、普段の開発の中で作成したコンポーネントをどれでも Web Component として公開できるということになります。
これはとても素敵で価値のあることです。様々な人が開発したオリジナリティ豊かなコンポーネントを気軽にシェアすることができます。今回の UIT App のように業務で開発していたコードがそのまま OSS へと転用できる場合もあります。
一方で都合の悪い点も挙げられます。
上述した React や Vue をはじめとする JavaScript フレームワークでの扱いに一癖ある点です。<script> タグで読み込んで Web Component として使うならまだ良いですが、TypeScript と連携したりプロジェクトのコードと一緒に bundle したいとなると設定に一手間がかかることがあります。
StencilJS で作成されたコンポーネントを公開するときは、ドキュメントをわかりやすく書くように心がけようと思います。
glitch-image の仕組み
Web で画像を Glitch させるには様々な方法があります。
Three.js では postprocessing を使って、出力される映像全体にたいしてグリッチエフェクトをかけることができます。
はたまた、予め動画を用意しておいて再生することでも実現はできるでしょう
しかし、ワンポイントオシャレにするためにはどちらもオーバースペックであって、軽い気持ちでスマホアプリに入れることはできません。
そこでライトに使えるグリッチエフェクトを考案すべく、CSS clip-path を使い、タイミングや座標をそれっぽくすることで再現を試みました。
CSS clip-path を使うこと自体はシンプルですが、ランダムに生成する座標と Glitch の高さを clip-path のフォーマットに整形し、これを更に次の Glitch につなげることは大変でデバッグしづらい作業でした。
どうにか動作はできている状態にまで持ってこれましたが、解読しづらいコードと依然デバッグしづらい状態だったところ、UIT のチームメンバーから Pull Request を頂きこれが大きく改善しました。
配列を使った力技でコンポーネントに Style を適応してた部分は --gi-clip-top のような変数に変わり、undefined を参照していた不具合も一気に解決しました。これも OSS として公開したことによる恩恵が大きかったと感じます。
おわりに
UIT チームの1つのアプリから生まれたコンポーネントがどのように動作していて、進化していったかを紹介しました。もしかしたら活躍できる箇所は少ないコンポーネントかもしれませんが、おためしに是非使ってみてください!
そして気に入らない点があればぜひ Pull Request を送って改善していきましょう!
最後に宣伝になりますが、
9/18(金)には UIT meetup vol.10「Vue 三昧」が開催されます、スペシャルゲストもお迎えして Vue 3 について語り尽くします。
ぜひご参加ください!
https://uit.connpass.com/event/187267/
また、LINEではフロントエンドエンジニアを募集しております。ご興味のある方は、以下よりご応募ください。
求人情報: フロントエンドエンジニア / フロントエンド開発センター