具体例から学ぶ!作り込みたいWeb制作のためのJavaScriptライブラリdat.GUIのススメ

(こちらの記事はクライアントさんであるJTさんの許可を得て事例を掲載しました。この場を借りてお礼を申し上げます。ありがとうございます!)

どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 Tech KAYAC Advent Calendar 2019最終日、25日目の記事を担当します、フロントエンドエンジニアのたがみです。普段何してるかは18日目の記事で話しているので省略します。

先日は自分の趣味爆発させた記事を投稿してしまいましたが(趣味爆発にも関わらず投稿を許可してくださったみなさまありがとうございます)、今年の締めはちゃんと技術の記事を書こうと思い、今回は去年と同じく私の今の推しライブラリについての布教活動をしていきたいと思います。

今年私が色々な案件をやっていて「これは色々と役立てたな〜」と感じたのはdat.GUIでした。元々は同僚さんが使ってるのをみて「あ、なんか便利そう」と思って使い始めたのですが、使ってみて「これは知っておいたらWEB制作でもっと良いものができるようになるぞ?!」と個人的に感じました。なので今回はもっとより良いWEBを作りたい皆さんに向けてその良さを語っていきたいと思います。

この記事の対象読者

  • dat.GUI知らないけど技術の話に興味がある方
  • dat.GUI知ってるけど具体的にどう使うのか知りたい方
  • Web制作を少しでも効率よくスマートにやりたいと感じている方
  • 表現面でもクオリティ面でも限界突破したWebサイトを俺は作りたいんだと内心闘志を燃やしている方

dat.GUIって何?

dat.GUIの画面

github.com

  • JavaScriptで使えるパラメーター調整ライブラリです
  • GUI(グラフィカルユーザーインターフェース)と名がついている通り、このライブラリを読み込んでパラメータの設定を行うだけでスライダーや数値入力ができるフォーム画面ができあがります(画像参照)。
  • パラメーターの値の変化に応じて処理を組み込むことができるため、フォームで設定したパラメータの値に応じて画面を変化させることができます
  • もちろんこういったGUIツールは自作しようと思えばできると思いますが、時間をそこに費やすほど余裕がない。。。!という時にこのライブラリの存在を思い出すと幸せになれるかもしれません

dat.GUIのどこがいいの?

私が使ってみて感じたこのライブラリの良いところは以下の点です

  • 一度dat.GUIの設定をしてしまえば、いちいちコード上で値を変化させて画面の状態を確認…といった手動の操作をしなくて済む
  • dat.GUIの設定をしておくことで、画面の状態の確認をエンジニアだけではなくデザイナーやディレクターさんなど他の職種の人とも共有しやすくなる
  • プロトタイプなどを作る時に、デザインだけでは想像できないインタラクティブな表現のイメージを直感的に伝えることができる

言葉で説明すると伝わりにくいと思うので、こちらのサンプルを見てみましょう。

http://workshop.chromeexperiments.com/examples/gui/

sample

上記のページのパラメータを操作して貰えば分かるように、入力した値に応じて表示されている文字の形や演出が変化しています。このように、「この効果を選んだ時、画面はどのように見えるだろう?」という確認が画面上でスムーズに行うようにできるのが、このライブラリを導入する一番のメリットです。

もっと簡単に言えば、インスタやTwitterなどで画像を投稿する時、用意されてるフィルター選んだら画像の加工結果がすぐに表示されますよね?あれと同じことがこのツールを通じて実現することができるのです。

導入してみる

早速使い方を見ていきましょう。

インストール

cdn経由でもnpm経由でも導入することが可能です。

 // cdnの場合、以下のコードを挿入
<script type=“text/javascript” src=“https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js”></script>

 // npmの場合
npm install --save dat.gui

基本的な導入の仕方 dat.GUIのインスタンスを作成し、GUIに表示させたいパラメータの設定を追加していく、というのが基本的な使い方です。

const gui = new dat.GUI();

// パラメーターの設定。初期値を指定
class Parameters {
    constructor() {
        this.message = 'sample'
        this.angle = 0
        this.isVisible = true
        ...
    }
};

// パラメーターのインスタンスを作成し、GUIに追加
const param = new Parameters();
gui.add(param, 'message');
...

使える入力項目とその設定

dat.GUIで使える入力項目には以下のものがあります。それぞれ addメソッドで指定します。

  • 文字指定(文字列入力)
  • 数値調整(スライダー+数値入力)
  • 効果のオン/オフ切り替え(チェックボックス)
  • 状態の選択(セレクトボックス)
  • イベントの発生(クリックでイベントを発火できる)
  • 色指定(カラーピッカー)

項目の指定の仕方は、パラメーターに設定した初期値の型、ないしはaddで指定した変数によって判断されます。

See the Pen Sample_dat.GUI_1 / param by Mio (@mio_U_M) on CodePen.

ただし、カラーピッカーだけは別で、addColorメソッドで指定します。 16進数カラーコードやRGB、HSVなどで指定が可能です。

See the Pen Sample_dat.GUI_2 / param_color by Mio (@mio_U_M) on CodePen.

値を変更した際に特定の処理を加えたい

guiにaddする際に、メソッドチェーンでonChangeを記述しておけば、値を変更した後の特定の処理を発火させることが可能です。

See the Pen Sample_dat.GUI_3 / onChange by Mio (@mio_U_M) on CodePen.

上記のやり方さえ覚えておけば一通りのGUIの設定は可能です。 もちろん上記以外にも様々な細かい設定を行うことができます。詳しくはAPIのドキュメントやチュートリアルで確認してみてください。

dat.gui/API.md at master · dataarts/dat.gui · GitHub

https://workshop.chromeexperiments.com/examples/gui/

具体的にどう使う? ー AI HOME SCREEN SCANを事例に見てみる

前述の説明でなんとなーく使い方のイメージがついたかとは思います。ただ、具体的にどうやって案件に導入するかを知りたい。。。!と思われた方もいるのではないでしょうか? 百聞は一見に如かず。ということで、実際に私の関わった案件、AI HOME SCREEN SCANでのdat.GUI活用例をお見せしたいと思います。

サイトはこちら↓ (※SP限定)

www.ploom.jp

このコンテンツはカヤックが独自で開発したAIエンジン「AISS」を用いたAI診断コンテンツです(詳しくはこちらに記載しております)。

クライアントであるJTさんはPloom商品(加熱式たばこ)を販売しており、今回このAIエンジンを用いてホーム画面を解析し、結果に基づいて性格分析、ならびにPloom商品のアクセサリーをレコメンドするコンテンツとなっております。

※注意:このAI診断コンテンツ、およびPloomブランドサイトへのアクセスには「20歳以上の喫煙者」の確認が必要となっています!

活用例その1:メインビジュアルを作り込むためのプロトタイプツールに使う

今回この案件でのデザイン的な課題として以下の二点が上がってきました。

  • キービジュアルの方向性として「AIが選出した結果の多様性をだすために有機的なグラデーション表現」で行くことになり、そのグラデーションの調整をデザイナーさんと一緒に詰めていく必要が生じた
  • 「診断結果のページでユーザーがアップロードした画像に応じてグラデーションの色合いを変えよう!」という話になり、結果ページにおける動物アイコンが映えるグラデーションの色を探っていく必要が生じた

デザイナーさんが上げてくれたグラデーションの初期イメージ
デザイナーさんが上げてくれたグラデーションの初期イメージ

そこで今回、サイト制作と並行してグラデーションのイメージやスピード感、色合いなどの検証専用のdat.GUI入りプロトタイプを作成し、デザイナーさんとグラデーションのイメージを詰めていくことにしました。

グラデーションの確認はこのツールを通して行い、スピード感や色合いなどを確認していきました。 (GIF画像なので画質荒くてすみません)

プロトタイプツールでグラデーションの色合いを切り替えている様子
プロトタイプツールでグラデーションの色合いを切り替えている様子

(仕組み的な話をすると、今回グラデーション自体はGLSLで制作したのですが、JavaScriptからGLSLに渡すuniformの項目をdat.GUIのonChangeで操作できるようにつなげています)

時間の経過ごとのグラデーションの状態確認
時間の経過ごとのグラデーションの状態も見れるようになっている

プロトタイプに導入したGUIの入力項目は、デザイナーさんの確認したい要件に合わせて適宜調整し、機能を付け足して行ったりしました。たとえば上記の「time」という項目はデザイナーさんから「グラデーションがいい感じの瞬間をキャプチャしたいんだけど、なんとかできたりしないかな。。。?」という相談から、グラデーションの時間経過を操作できるように入れ込んだ項目です。

このプロトタイプでdat.GUIを導入した結果、デザイナーさん側でグラデーションの色合いや画面上での見え方調整を直接GUIを操作することができるようになり、デザインイメージの再現に貢献することができました。

ビジュアルイメージ
プロトタイプツールのスクリーンショットを用いたビジュアル

また、OGPやキービジュアルのグラデーションをプロトタイプツールから作成するという、実装からデザインへ落とし込むという通常のWeb制作とは真逆のフローになったのも、このツールのおかげです(OGPやこの↑バナーなどのグラデーションは、プロトタイプツールからスクリーンショットを撮って抽出してもらったものなのです)

活用例その2:ページのデザイン確認や診断結果の出し分け確認に使う

また、今回のサイトはSPA(シングルページアプリケーション)形式の診断コンテンツのため、以下の課題もありました。

  • 動物アイコン、診断結果文言、ユーザーの入力項目と解析結果に応じたおすすめ商品…などと、結果画面で表示を出し分ける項目が多かった。そのため、「この解析結果の場合の画面が見たい!」という要望に応えられる環境を作る必要があった
  • SPAなので単純にURLを指定すれば特定のページに飛べる、という状態ではなかった。ただ、デザイン確認のためにいちいちページの初めから辿っていくのはどう考えても手間なので、一発で目的のページを確認できる手段が必要だった

そこでここでもdat.GUIを導入し、出し分け確認用のURLを用意しました。このURLではGUIの項目を変化させれば即座に画面が項目の値に応じた結果を表示できるように設定しています。

表示するページを切り替えている様子
表示するページを切り替えている様子

結果画面の動物アイコンを切り替えている様子
結果画面の動物アイコンを切り替えている様子

このようにdat.GUIを導入した結果、

  • ツールですぐに文言確認や見え方の確認ができるようになったため、文言のミスや、動物アイコンの画像が一部欠けてる!などといった細かいミスをすぐに検出することができた。
  • QA(WEBサイトのテスト)を外部のテスターさんに依頼して実施する際にもこのツールの使い方を共有してテストを実施してもらったため、QAの工数を半分も下げることに成功した(ディレクターさん喜んでいた)

といった作業の効率化、ならびにクオリティ担保に貢献する結果になりました。

やはりGUIが持つ「一度使い方を理解すれば誰でも使用できるようになる」という性質は、案件でスムーズにイメージ共有する上で大きなメリットだと感じました。

最後に

最近のウェブサイトを見ていると、リッチな演出や仕掛けが盛り沢山なウェブサイトや、機能的に色々と詰まったツール的なウェブサイトなどが数多く見られると思います。

そんなサイト達のように、複雑な仕様が求められたり、演出やデザインをより詰めていきたい!という時にぜひこのライブラリを活用してみてください。

一度実装して使い方を共有すれば、エンジニアに限らずデザイナーやディレクターなどの様々な人がwebの完成イメージを共有しやすくなるので、チーム内で「より良いものを作りたい!」という気持ちが高い案件の時には特に、その想いの架け橋になってくれるライブラリだと個人的に感じております。

12月1日から25日間にわたって更新してきました Tech Kayac Advent Calendar 2019もこれが最後の記事です! 技術を軸に色々多方面に展開しまくった記事が揃っていたかと思いますが、みなさまお楽しみいただけましたでしょうか?

また来年もよろしくお願いいたします!みなさま良いクリスマスを&良いお年を!