みなさん、こんにちは！

第4回となる168（いろは）プロジェクト、今回は TypeScriptを使って webサイトに埋め込みできる診断ウィジェットを一週間で作りました！
これだけだとイメージがつかないので、以下のサイトのマッチングアプリの診断機能をイメージしてもらうとわかりやすいかなと思います！
参考: https://jsbs2012.jp/matchingapp/review/mami0016.html

何のために作ったのか？

今回作成した診断機能自体は、いろんなサイトに埋めこまれているものの、 調査した範囲だと、iframe での埋め込みか、自作（特にライブラリを利用とかはせず、自分達でプログラム・ロジックを書いている）しているものが多い印象でした！

ただ、自分でプログラムを書くとなるとどうしても工数が取られます。。
Webサービスにおいては、一見別々の機能でも内側のコードは同じ！みたいな話って結構ありまして、大体同じ機能は共通化して使いまわせるようにしてしまおう
というのがこの手の問題の主流の解決策です。

そんな感じで、いろんな人が使いまわせる診断ツールライブラリを作ってしまおう というのが今回の168プロジェクトでの第4回の作成物です！

今回の機能の使い方

ここでは実装した機能の説明と実際に使用するためのソースコードをご紹介します。

今回実装した機能は以下の2点です。

・JSからライブラリを呼び込んでHTML内に埋め込み、色やデザイン、配置、画像を利用側である程度カスタマイズできる
・選択肢、その数、及び選択結果の表示をカスタマイズできる

比較的誰でも利用しやすいように整備してありますので、プログラミングを始めたばかりの方でも使えると思います。 ソースコードはこちらの URL からご利用ください。
https://github.com/engclass-z/embed_diagnose

ご使用の際はこちらの README をご覧の上、自己責任の範囲でご利用ください。

実際に利用している様子はこちらになります。

試しに、オススメのお茶が何かを診断するウィジェットを埋め込んでみました！

技術的な話

今回は React と TypeScript を用いて、esm 形式でも umd 形式でも出力できるようにしてあります。

利用側は .js / .css をロードするか、もしくは ESModule として読み込むかを選択できます。
その後、window.EmbedDiagnose(…) で、…の箇所にカスタマイズするパラメータを指定して利用します。

詳しくは github のサンプルコードをご覧ください。

最後に

今回は「HTMLに埋め込める診断ウィジェット」を作成しました。

npm パッケージ、umd で配布できる形式で何かを作った経験がそれほど多かったわけでは無いので、今回は良い経験が出来ました。

こういったライブラリを作る実装の土台が出来たので、これから先もなにかこういったライブラリの作成は行っていきたいと思います。

もしこれから先このライブラリを拡張していくのであれば、まずはドキュメントの整備、次にデザイン調整やカスタマイズ可能な項目の追加、そしてより柔軟にカスタマイズできる仕様に作り直したいと考えています。

翌週以降もどうぞよろしくお願いいたします！