milkcocoa ホームページ作成

【milkcocoa】ページ読み込み時にチャット画面が自動的に開くのを止める方法

2018年2月5日

milkcocoaというチャットのサービスを使っています。ホームページに無料で簡単にチャット機能を設けることができるとても優れたサービスです。

大きな問題ではないのですが、このmilkcocoaは、ホームページを開くと同時にチャットの画面まで自動で開いてしまうことがあります。そして、そのチャットの画面には、前回のチャットのやり取りがそのまま残った状態になっています。

チャットでの問合せを希望しないときに、チャットの画面が開くのは微妙な感じもしますので、この問題を解消する方法をご紹介します。

 

 

チャットの画面が自動で開く現象とは?

通常、ホームページを開くと画面の右下にチャット受付のメッセージが表示されます。下図のような感じです。

 

ところが、ホームページを開くと同時にチャット画面まで開いてしまうことがあります。下図のような感じです。

 

どのようなときにこの現象が起きるのでしょうか。

通常、「チャット受付中!」というメッセージをクリックするとチャットの画面が開くようになっています。ところが、milkcocoaでは一度でもチャットの画面が開いてしまうと、そのあとはホームページにアクセスするたびに自動的にチャット画面が開いてしまいます。

ブラウザを一旦閉じても、パソコンを再起動してもこの現象は止まりません。

 

 

チャットの画面が自動的に開いてしまう原因

恐らく、キャッシュやCookieが原因ではないかと考えられます。というわけで以下で記した順にデータを消去して様子を見てみました。

  • ①.閲覧履歴
  • ②.Cookieと他のサイトデータ
  • ③.キャッシュされた画像とファイル

Google Chromeの設定画面で「詳細設定」>「プライバシーとセキュリティ」>「閲覧履歴データを消去する」を選択し、①から順にデータを消去してみました。すると②の「Cookieと他のサイトデータ」を消去した段階で問題が解消されることが分かりました。

ある程度原因は分かってきましたが、もう少し細かくみておきたいと思います。

Google Chromeの設定画面で「詳細設定」>「プライバシーとセキュリティ」>「コンテンツの設定」>「Cookie」>「すべてのCookieとサイトデータを表示」を選択します。するとmlkcca.comというドメインからの3個のCookieとローカルストレージにデータが格納されていることが分かりました。

 

さらに詳細を見てみますと、Cookieの名称は、「_ga」、「_gid」、「mlkccatop.sid」となっているようです。

 

まず、これら3個のCookieを削除して様子をみてみました。残念ながら問題は解消されず、相変わらず自動的にチャット画面が開くという状態です。

というわけで、ローカルストレージに格納されているデータが問題の原因であろうということを推測することができました。

とはいえ毎回、手動でローカルストレージを消去するわけにはいかないので、javascriptを使って自動的に消去するようにしたいと思います。

 

 

ローカルストレージとは?

javascriptを使ってローカルストレージを消去する方法を見ておきましょう。

まず、ローカルストレージとは一体何でしょうか。ブラウザ側でデータを格納しているという点では、Cookieとよく似たもののようです。しかし、Cookieよりも大きなデータ量を扱うことができたり、javascriptでの制御がしやすいという違いがあるようです。

このローカルストレージは、Web Storageと呼ばれるものの一種です。Web Storageにはローカルストレージとセッションストレージの2種類があります。以下の表に簡単にまとめておきます。

 

有効期限 サーバへデータを送信するタイミング
Local Storage 永続 データを利用するときのみ
Session Storage ウィンドウかタブを閉じるまで データを利用するときのみ
Cookie 指定期限まで、またはウィンドウかタブを閉じるまで リクエストごとに自動送信

 

ローカルストレージは、Cookieと同じくウェブサイトごとに「キー(key)」と「値」とがセットで格納されています。キーを指定することで特定のデータを削除することが可能です。

 

 

ローカルストレージに格納されたデータを削除する方法

では、milkcocoaは、どのような「キー(key)」でローカルストレージに値を格納しているのでしょうか。それを調べるために以下のjavascriptをチャットを設置したページに埋め込みます。</head>タグの直前に入れておけば間違いないと思います。

 

このコードは何をしているかと言いますと、格納されているローカルストレージの「キー(key)」をメッセージボックスに表示させています。実際にこのコードを入れてみるとmilkcocoaは、「mcp-chatsupport」というキー(key)でローカルストレージにデータを格納しているようです。あとで分かったのですが、このことはmilkcocoaの公式サイトにも記載されていました。

次に、調べたキー(key)をもとに「値」を削除したいと思います。以下のjavascriptで削除することができます。

 

この一文を記したjavascriptファイルをHTMLファイルの<head>タグ内で読み込んで実行することによって問題解決できそうです。では、最後に具体的な実装方法を見てみましょう。

 

 

実装方法

次の手順で実装します。

  • ①.javascriptファイルを作成し、FTPでwebサーバにアップロードする。
  • ②.HTMLの<head>内でそのjavascriptファイルを読み込む。

 

javascriptファイルの作成

たとえば、hogehoge.jsというファイル名のファイルに先ほどの一文を記します。そして、そのファイルをFTPソフトを使ってwebサーバにアップロードします。

 

HTMLファイルの修正

HTMLファイルと同じフォルダにjavascriptファイルをアップロードした場合は、以下の記述をHTMLファイルの<head>タグ内に加えます。

 

これで、ホームページが読み込まれるたびにローカルストレージがクリアされます。それによって自動的にチャット画面が開くという現象を止めることができます。

ちなみに、これはIEとGoogle Chromeだけで動作確認しました。念のために他のブラウザやスマホなどでも動作テストをすることをお勧めいたします。

なお、ここでご紹介した方法でチャット画面が自動的に開くことはなくなりますが、ブラウザでページを再読み込みするとチャットのやり取りも消えてしまいます。履歴として残しておきたいという方にはお勧めしません。

では、今回はここまでです。

 

 

  • この記事を書いた人
  • 最新記事
社長

社長

8年間の客先常駐を経験後、いったんソフトウェア業界を離れ、事業承継のために再びこの業界に戻ってきた異色のエンジニア。ただ今、SEOやWebマーケティングに注力中。

-milkcocoa, ホームページ作成

Copyright© コアースのブログ , 2020 All Rights Reserved.