どうも、まさとらん（@0310lan）です。
みなさんは、自分のWebサイトやブログ、もしくはサービスなどを利用してくれるユーザーとコミュニケーションする場合、どのような方法を使いますか？
よくあるのは、フォームなどを用意してメールでやり取りする方法ですが、これを今すぐ「チャット」でのコミュニケーションに変えられるサービスが公開されているのでご紹介しようと思います！
【 Drift 】
専用の「コード」をHTMLにコピペするだけなので、どんなWebページにも簡単に導入できるのが特徴で、なおかつ基本機能は無料で提供されていますよ！
■使い方！
それでは、早速Webサイトに「チャット機能」を組み込んでみましょう！
まずは、サイトにアクセスし「ユーザー登録」をします。
自分のメールアドレスを入力！
すると、プラットフォームを選択できる画面になるので、今回は「Webサイト」や「ブログ」へ簡単に導入できる「JavaScript」をクリックします。
次に、「利用タイプ」を聞かれるので、通常は「左側」を選択しておきます。
ちなみに、右側はWebサービスなどでログインユーザーのみに「チャット機能」を提供するような使い方を想定しています。(設定が少々難しいですが…)
タイプを選び終わると、専用のコードが表示されるのでコピーしておきましょう。
あとは、このコードを自分のWebサイトにある「HTMLファイル」へ貼り付けるだけで完了というわけです。
そこで今回は、以下のような「サンプルページ」を用意しました。
このWebページに、「チャット機能」を組み込みたいと思います。
HTMLファイルを表示し、「headタグ」の終了直前に先ほどのコードを挿入しましょう！
そして、「ボタン」をクリックします。
最後に、コードを挿入したWebページの「URL」を入力すれば完了です！
以下のようなメッセージの「ポップアップウィンドウ」が表示されたら、チャット機能はもう使える状態になっています！
初回のみ、ユーザー登録用のフォームが表示されるので必要事項を入力しておきましょう。
すべて入力する必要はなく、名前・パスワード・会社名くらいを入力しておけばOK！
これで、自分専用の「管理画面」が表示されます。
この画面で、日々の進捗確認やユーザーからの通知、チャットのやり取りなどが行えるようになっています。
ちなみに、この時点でもう一度Webサイトを確認すると、すでに「チャット機能」が利用できるアイコンが表示されているのが分かりますね！
これで誰でもこのサイトを訪問してきた人は、このアイコンをクリックしていつでもサイト管理者とチャットが出来るというわけです。
■カスタマイズしてみよう！
現在のままでも普通に「チャット」を利用できるのですが、もう少しユーザーが使いやすくなるようにカスタマイズしてみましょう！
例えば、今の状態だと「チャットアイコン」をクリックすると、英語で書かれた文章の画面が表示されます。
アイコンもデフォルトのままだし、何よりも日本人向けに「英語」だとちょっと抵抗がありますよね。
そこで、「管理画面」からカスタマイズを選択します。
「編集エディタ」が表示されるので、「Online Messaging」の項目にある「Edit」リンクをクリック！
ここで、「会社名」と「メッセージ」を日本語で入力すればOK！
ついでに、デフォルトアイコンもカスタマイズしておきましょう。
もう一度「管理画面」から「Update Your Profile」を選択します。
ここで、自分の好きな「アイコン画像」と「名前」を入力します。
これで、Webサイトをもう一度チェックしてみると、見事に「チャット画面」に反映されているのが分かります！
さらに細かいカスタマイズも可能で、例えばカラーリングのスタイルやフォントなどを変更したり、チャットボタンの表示アイコンを変えられるようにもなっています。
また、サイト管理者がチャットに対応できる時間を設定し、◯時〜◯時以外はオフラインメッセージを表示する…みたいな使い方も可能なので便利です！
オフライン中でも、ユーザーからのメッセージを受け取ることは可能です。
■まだある、こんな便利機能！
「Drift」を使ったチャット運用において、さらに便利に活用できる機能がいくつか用意されているので少しピックアップしてみたいと思います。
例えば、ユーザーとチャットが増えてくると、過去の履歴をもう一度チェックしたくなることがあると思いますが、管理画面では常に「チャット履歴」が確認できるようになっています。
気になる履歴をクリックすれば、「チャットエディタ」が表示されて、今までのやり取りをまとめて確認することもできます。(もちろん、そのまま返信も可能…)
さらに、画面左下にある「グラフボタン」をクリックするだけで、任意の期間の統計情報も閲覧可能！
- 日々、どれくらいの問い合わせがあるか？
- 問い合わせに対しての返信の速さはどのくらいか？
- 管理者が複数人いる場合は、誰がどのくらい対応したか？
…など、知りたい情報が自動的に「統計データ」としてまとまっているのは非常にありがたい機能だと思います。
さらにユニークな機能として、サイト管理者側から訪問ユーザーに対して「通知メッセージ」を送信することも可能です。
これは、管理画面から「SEND MESSAGE」ボタンをクリックすることで作成できます。
編集エディタ上で、メッセージの「➀タイトル」「➁本文」を入力するだけでOK！(本文にはリンクを挿入することも可能…)
設定を済ませて「送信」すれば、すぐにWebページ上へ表示することが出来るわけです！
サイトに訪問してきたユーザーに対して、任意のメッセージを見てもらうことが出来るので、Webサービスはもちろんのこと「ブログ」などにも応用できるかと思います。
■まとめ
今回ご紹介した「Drift」は、導入が非常にシンプルで簡単なのに、奥の深いカスタマイズや使い方を実現しているのが大きな魅力だと思います。
さらに、「Slack」や「Zapier」などのサービスと連携することも可能なので、活用次第では今回ご紹介した内容以上の使い道も考えられるでしょう。
Webページに「チャット機能」を導入したい人はもちろんですが、「フォームを用意するのが面倒…」とか、「これからプロトタイプを作りたい…」という人も含めて便利に利用できると思いますので、ぜひ一度トライしてみてください！
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
