paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

プログラミングなしで超簡単!Webサイトやブログに「チャット機能」を組み込める「Drift」を使ってみた!

f:id:paiza:20160719122307j:plain
どうも、まさとらん(@0310lan)です。

みなさんは、自分のWebサイトやブログ、もしくはサービスなどを利用してくれるユーザーとコミュニケーションする場合、どのような方法を使いますか?

よくあるのは、フォームなどを用意してメールでやり取りする方法ですが、これを今すぐ「チャット」でのコミュニケーションに変えられるサービスが公開されているのでご紹介しようと思います!

Drift

f:id:paiza:20160719122613j:plain
専用の「コード」をHTMLにコピペするだけなので、どんなWebページにも簡単に導入できるのが特徴で、なおかつ基本機能は無料で提供されていますよ!

■使い方!

それでは、早速Webサイトに「チャット機能」を組み込んでみましょう

まずは、サイトにアクセスし「ユーザー登録」をします。
f:id:paiza:20160719122650j:plain


自分のメールアドレスを入力!
f:id:paiza:20160719122703j:plain


すると、プラットフォームを選択できる画面になるので、今回は「Webサイト」や「ブログ」へ簡単に導入できる「JavaScriptをクリックします。
f:id:paiza:20160719122735j:plain


次に、「利用タイプ」を聞かれるので、通常は「左側」を選択しておきます。
f:id:paiza:20160719122801j:plain
ちなみに、右側はWebサービスなどでログインユーザーのみに「チャット機能」を提供するような使い方を想定しています。(設定が少々難しいですが…)


タイプを選び終わると、専用のコードが表示されるのでコピーしておきましょう。
f:id:paiza:20160719122817j:plain
あとは、このコードを自分のWebサイトにある「HTMLファイル」へ貼り付けるだけで完了というわけです。


そこで今回は、以下のような「サンプルページ」を用意しました。
f:id:paiza:20160719122827j:plain
このWebページに、「チャット機能」を組み込みたいと思います。


HTMLファイルを表示し、「headタグ」の終了直前に先ほどのコードを挿入しましょう!
f:id:paiza:20160719122914j:plain


そして、「ボタン」をクリックします。
f:id:paiza:20160719122921j:plain


最後に、コードを挿入したWebページの「URL」を入力すれば完了です!
f:id:paiza:20160719122929j:plain


以下のようなメッセージの「ポップアップウィンドウ」が表示されたら、チャット機能はもう使える状態になっています!
f:id:paiza:20160719122937j:plain


初回のみ、ユーザー登録用のフォームが表示されるので必要事項を入力しておきましょう。
f:id:paiza:20160719122945j:plain
すべて入力する必要はなく、名前・パスワード・会社名くらいを入力しておけばOK!


これで、自分専用の「管理画面」が表示されます。
f:id:paiza:20160719122958j:plain
この画面で、日々の進捗確認やユーザーからの通知、チャットのやり取りなどが行えるようになっています。


ちなみに、この時点でもう一度Webサイトを確認すると、すでに「チャット機能」が利用できるアイコンが表示されているのが分かりますね!
f:id:paiza:20160719123032j:plain
これで誰でもこのサイトを訪問してきた人は、このアイコンをクリックしていつでもサイト管理者とチャットが出来るというわけです。

■カスタマイズしてみよう!

現在のままでも普通に「チャット」を利用できるのですが、もう少しユーザーが使いやすくなるようにカスタマイズしてみましょう!

例えば、今の状態だと「チャットアイコン」をクリックすると、英語で書かれた文章の画面が表示されます。
f:id:paiza:20160719123432j:plain
アイコンもデフォルトのままだし、何よりも日本人向けに「英語」だとちょっと抵抗がありますよね。


そこで、「管理画面」からカスタマイズを選択します。
f:id:paiza:20160719123450j:plain


「編集エディタ」が表示されるので、「Online Messaging」の項目にある「Edit」リンクをクリック!
f:id:paiza:20160719123512j:plain


ここで、「会社名」と「メッセージ」を日本語で入力すればOK!
f:id:paiza:20160719123520j:plain


ついでに、デフォルトアイコンもカスタマイズしておきましょう。

もう一度「管理画面」から「Update Your Profile」を選択します。
f:id:paiza:20160719123532j:plain


ここで、自分の好きな「アイコン画像」と「名前」を入力します。
f:id:paiza:20160719123542j:plain


これで、Webサイトをもう一度チェックしてみると、見事に「チャット画面」に反映されているのが分かります!
f:id:paiza:20160719123554j:plain
さらに細かいカスタマイズも可能で、例えばカラーリングのスタイルやフォントなどを変更したり、チャットボタンの表示アイコンを変えられるようにもなっています。


また、サイト管理者がチャットに対応できる時間を設定し、◯時〜◯時以外はオフラインメッセージを表示する…みたいな使い方も可能なので便利です!
f:id:paiza:20160719123625j:plain
オフライン中でも、ユーザーからのメッセージを受け取ることは可能です。

■まだある、こんな便利機能!

Drift」を使ったチャット運用において、さらに便利に活用できる機能がいくつか用意されているので少しピックアップしてみたいと思います。


例えば、ユーザーとチャットが増えてくると、過去の履歴をもう一度チェックしたくなることがあると思いますが、管理画面では常に「チャット履歴」が確認できるようになっています。
f:id:paiza:20160719123821j:plain


気になる履歴をクリックすれば、「チャットエディタ」が表示されて、今までのやり取りをまとめて確認することもできます。(もちろん、そのまま返信も可能…)
f:id:paiza:20160719123841j:plain


さらに、画面左下にある「グラフボタン」をクリックするだけで、任意の期間の統計情報も閲覧可能!
f:id:paiza:20160719123920j:plain

  • 日々、どれくらいの問い合わせがあるか?
  • 問い合わせに対しての返信の速さはどのくらいか?
  • 管理者が複数人いる場合は、誰がどのくらい対応したか?

…など、知りたい情報が自動的に「統計データ」としてまとまっているのは非常にありがたい機能だと思います。


さらにユニークな機能として、サイト管理者側から訪問ユーザーに対して「通知メッセージ」を送信することも可能です。

これは、管理画面から「SEND MESSAGE」ボタンをクリックすることで作成できます。
f:id:paiza:20160719124008j:plain


編集エディタ上で、メッセージの「➀タイトル」「➁本文」を入力するだけでOK!(本文にはリンクを挿入することも可能…)
f:id:paiza:20160719124039j:plain


設定を済ませて「送信」すれば、すぐにWebページ上へ表示することが出来るわけです!
f:id:paiza:20160719124049j:plain


サイトに訪問してきたユーザーに対して、任意のメッセージを見てもらうことが出来るので、Webサービスはもちろんのこと「ブログ」などにも応用できるかと思います。

paizaについて

f:id:paiza:20150730172136p:plain
paizaでは、プログラミングスキルチェック問題(14言語に対応)を多数ご用意いたしております。もちろん今回使用しているJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです!

paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください!!

プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者です」「初心者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。

さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください!

■まとめ

今回ご紹介したDrift」は、導入が非常にシンプルで簡単なのに、奥の深いカスタマイズや使い方を実現しているのが大きな魅力だと思います。

さらに、Slack」や「Zapier」などのサービスと連携することも可能なので、活用次第では今回ご紹介した内容以上の使い道も考えられるでしょう。

Webページに「チャット機能」を導入したい人はもちろんですが、「フォームを用意するのが面倒…」とか、「これからプロトタイプを作りたい…」という人も含めて便利に利用できると思いますので、ぜひ一度トライしてみてください!




paizaではITエンジニアとしてのスキルレベル測定や、動画によるプログラミング学習コンテンツ(paiza Learning)を提供しています。テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

http://paiza.jp


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編