ChatWork(チャットワーク)でログを無料で保存する方法を徹底解説

チャットワークでは、エンタープライズプランやKDDI ChatWorkプランに加入していればログを管理画面からエクスポートすることができます。

ただ、エクスポートには権限が必要になることや、ログの保存が必要になるときもあるので、今回は管理画面からのエクスポートを使わずに、無料でチャットワークのログを保存する方法を解説していきたいと思います。

1 今回紹介する方法について
2 ① ブラウザの開発者ツールからコードを実行する方法
3 ②Scraperを使う方法（XPath）
4 ③Chrome拡張機能「Multicopy」を使って力技でコピペ
5 まとめ

今回紹介する方法について

今回は以下の3パターンの方法を紹介していきたいと思います。

ブラウザ内のツールにコードをコピペする方法
Chrome拡張機能「Scraper」を使う方法（XPath）
Chrome拡張機能「Multicopy」を使って力技でコピペ

①ブラウザ内のツールにコードをコピペする方法

こちらの方法ではブラウザの機能を使うので、拡張機能のインストールなどは必要ありません。
下で紹介するコードをコピペすればOKなので、慣れた方なら簡単にログを保存することができます。ファイル形式はテキスト形式またはCSV形式での保存が可能です。

②Scraperを使う方法

Chrome拡張機能を使ってログを保存します。②ではXPathというものを使って保存したい要素を指定するのですが、これもコピペで大丈夫です。
クリップボードにコピーする方法（そのままペーストできる状態になる方法）と、Google Docsのスプレッドシートで保存する方法の2通りが利用できます。

③拡張機能を使ってコピペする方法

こちらの方法ではChrome拡張機能を利用します。こちらはコピーする量が多くなると他の方法に比べて大変になるので、特に理由がなければ①か②の方法がおすすめです。

※ エンタープライズプランとKDDIプランはどちらも1ユーザーにつき月額800円になります。
※ エンタープライズプランは最低利用人数が5人から、 KDDIプランは1人のユーザーでも加入することができます。こちらは大企業や官公庁向け管理機能を強化したプランになります。

① ブラウザの開発者ツールからコードを実行する方法

最初に紹介するのは、Googleクロームなどお使いのブラウザに搭載されている開発者ツールからJavaScriptというプログラミング言語をコピペしてメッセージをダウンロードする方法です。

GoogleクロームとFirefoxで開発者ツールを実行する方法から紹介していくので、すでに開発者ツールでJavaScriptを実行できる方は読み飛ばしてください。

Googleクロームで開発者ツールを使う方法

Googleクロームで開発者ツールを使うには、メニューバーの「表示」> 「開発/管理」にある「JavaScriptコンソール」を選択します。

これでJavaScriptコードが実行できる状態になりました。

※ JavaScriptコンソールを開くと、黄色い背景で文字が出てくる場合もありますが、これはチャットワーク開発者へのメッセージなのでそのまま進めて大丈夫です。

ダウンロードしたいメッセージをすべて表示させる（上にスクロール）

対象となるユーザーやグループでのメッセージが少ない場合には、チャットのページを開いたままでもすべてのメッセージが表示されますが、やり取りが多くなってくると過去のメッセージはすべて表示されません。

上にスクロールすればメッセージが読み込まれるので、スクロールしてダウンロードしたいメッセージを表示させます。

開発者ツールからコードを実行する

それではコードを入力していきましょう。
以下で紹介しているコードを入力画面にコピペします。

ペーストできたら、あとはエンターキーを押せばダウンロードが始まります。

このときファイル名はお好きな名前を付けて保存すれば大丈夫ですが、「.txt」や「.csv」の拡張子はファイル名に入れるようにしてください。

テキスト形式でダウンロードする場合

メッセージをテキスト形式（.txt）でダウンロードしたい場合には、以下のコードを実行します。

function timeConvert(timestamp) {
    var a = new Date(timestamp * 1000);
    var year = a.getFullYear();
    var month = a.getMonth() + 1;
    var date = a.getDate()
    var hour = a.getHours()
    var min = a.getMinutes()
    var time = `${year}年${month}月${date}日 ${hour}:${min}`
    return time;
}
var messages = '';
$('._message').each((idx, item) => {
    var field = '---' + '\n'
    if ($(item).find('._timeStamp').length > 0) {
        field += timeConvert($(item).find('._timeStamp').data('tm')) + '\n'
    } else {
        return;
    }
    if ($(item).find('.timelineMessage__orgName').length > 0) {
        field += $(item).find('.timelineMessage__orgName').text() + '\n'
    }
    if ($(item).find('._speakerName').length > 0) {
        field += $(item).find('._speakerName').text() + '\n'
    } else {
        field += $('._message').eq(idx - 1).find('._speakerName').text() + '\n'
    }
    field += $(item).find('.timelineMessage__message').text() + '\n\n'
    messages += field
})
window.open("data:application/plain;charset=utf-8," + messages)

ファイル名は「○○.txt」のように.txtという拡張子で名前をつけて保存すれば完了です。

保存すると下の画像のようになります。

CSV形式でダウンロードする場合

メッセージをExcelなどの表計算ソフトでも使えるように、CSV形式（.csv）でダウンロードしたい場合には、以下のコードを実行します。

function timeConvert(timestamp) {
    var a = new Date(timestamp * 1000);
    var year = a.getFullYear();
    var month = a.getMonth() + 1;
    var date = a.getDate()
    var hour = a.getHours()
    var min = a.getMinutes()
    var time = `${year}年${month}月${date}日 ${hour}:${min}`
    return time;
}
var arr = [
    ['date', 'orgName', 'name', 'iconSrc', 'message']
]
$('._message').each((idx, item) => {
    var field = []
    if ($(item).find('._timeStamp').length > 0) {
        field.push(timeConvert($(item).find('._timeStamp').data('tm')))
    } else {
        return;
    }
    if ($(item).find('.timelineMessage__orgName').length > 0) {
        field.push($(item).find('.timelineMessage__orgName').text())
    } else {
        field.push('')
    }
    if ($(item).find('._speakerName').length > 0) {
        field.push($(item).find('._speakerName').text())
        field.push($(item).find('._speaker img').attr('src'))
    } else {
        field.push($('._message').eq(idx - 1).find('._speakerName').text())
        field.push($('._message').eq(idx - 1).find('._speaker img').attr('src'))
    }
    field.push($(item).find('.timelineMessage__message').text().replace(/,/gm, '、').replace(/(\r\n|\n|\r)/gm, ""))
    arr.push(field)
})
window.open(encodeURI("data:text/csv;charset=utf-8," + arr.map(e => e.join(",")).join("\n")))

ファイル名は「○○.csv」のように.csvという拡張子と好きな名前をつけてダウンロードします。これでメッセージをExcelでも編集できる形式で保存することができます。

保存すると下の画像のようになります。

うまくダウンロードできないときには・・・

コードを実行しても何も起きない場合

コードを実行しても何も起きない場合には、ダウンロードのためのポップアップがブロックされているかもしれません。

以下はFirefoxの画面になりますが、「1個のポップアップがブロックされました」というメッセージが黄色い背景に書かれています。

このようなメッセージが出てきたら、「設定」ボタンから「ポップアップを許可」すればダウンロードが始まります。

拡張子を入れずにダウンロードした場合

もし「.txt」などの拡張子を入れずにファイルを保存した場合でも、ダウンロード後に拡張子を追加変更することができます。
拡張子変更のときにMacやWindowsからアラートが表示される場合がありますが、今回の場合には気にせず拡張子を変更して大丈夫です。

Firefoxで開発者ツールを使う方法

上ではGoogleクロームを使ってダウンロードする方法を紹介しましたが、Firefoxで開発者ツールからJavaScriptを入力する方法についても紹介しておきたいと思います。

ウェブコンソールを表示させる

Firefox右側にあるメニューアイコンから「ウェブ開発」を開きます。

ウェブ開発のメニュー内にある「ウェブコンソール」をクリックします。

これでJavaScriptを実行できる画面が表示されます。

ウェブコンソールにコードをペーストできるようにする

ウェブコンソールでコードをペーストするのが今回が初めての場合には、ペーストできませんという英語のエラーメッセージが出るかもしれません。

※ 今回はもちろんお使いのパソコンを乗っ取ったりセキュリティに影響を与えるようなものではありませんが、もし気になる場合には下で紹介している他の方法を試してみて下さい

これはブラウザのセキュリティ対策によるものですが、'allow pasting' と入力しないとコードを貼り付けることができないので、ウェブコンソールの入力画面に 'allow pasting' と入力します。

これでFirefoxでもJavaScriptを入力できるようになると思います。

②Scraperを使う方法（XPath）

次は「Scraper」というGoogleクローム拡張機能を使ってログを保存する方法をご紹介します。

Scraperを起動

以下のリンクからScraperを拡張機能として追加します（無料でダウンロードできます）。

https://chrome.google.com/webstore/detail/scraper/mbigbapnjcgaffohmbkdlecaccepngjd?hl=ja

ScraperをGoogleクロームに追加したら、ログを保存したいルームで右クリックしScrape similarを選択します。

XPathで保存したい要素を指定

Scraperを起動するとポップアップが表示されるので、この中に必要な情報を記入していきます。
何を保存するのかという指定を、SelectorとColumnsの欄にXPathとNameをペアにして書いていきます。

最初の状態では「Columns」には1つのXPathとNameしか表示されていませんが、緑色のボタンを押すと、行を追加することができます。

緑色のボタンをクリックして、以下のXPathとNameを追加していきます。

date:	div[contains(@class, “_timeStamp”)]/.
orgName:	p[contains(@class, “timelineMessage__orgName”)]/.
name:	div[contains(@class, “timelineMessage__content”)]/div/p[contains(@class, “_speakerName”)]/.
iconSrc:	div[contains(@class, “_speaker”)]/img/@src
message:	div[contains(@class, “timelineMessage__content”)]/pre[contains(@class, “_message”)]/.

赤いボタンを押すと行が削除されるので、もし上の項目に不要なものがあれば削除してください。

記入できたら「Scrape」ボタンを押してみましょう。
右側のパネルに取得できた情報が表示されます。

※ もしアイコンの画像URLなど不要なものがあれば、「iconSrc」横の赤いボタンを押すことで、それ以外の要素のみを取得することができます。

指定した要素を書き出し

取得した内容で問題なければ、ポップアップ右下の「Copy to clipboard」または「Export to Google Docs」ボタンをクリックして完了です。

Copy to clipboard：	クリップボードにコピーします。そのままメモ帳などに貼り付けることができます。
Export to Google Docs：	Google Docsのスプレッドシートに保存できます。

Scraperではこれまでの設定を保存できる

ここまでScraperの設定画面にSelectorやXPath、Nameを入力してきましたが、Scraperではこれらの入力内容を保存することができます。Scraper便利ですねー。

保存したい名前をつけて「Save」ボタンを押せばプリセットとして保存されるので、次回からXPathなどをコピペせずにログをエクスポートできるようになります。
ここではChatWorkという名前をつけてみました。

保存したプリセットを呼び出したいときには、「ChatWork」などのプリセット名をクリックすれば保存したときの設定が自動で入力されます。

③Chrome拡張機能「Multicopy」を使って力技でコピペ

最後に紹介する方法は、力技になりますが「Multicopy」というChrome拡張機能を利用して複数のテキストをコピペする方法になります。

https://chrome.google.com/webstore/detail/multicopy/bbihhbmcpmmbidebeomhomjelncfghcl

通常はコピーしても過去にコピーしたものを呼び出すことはできませんが、この拡張機能を使うと過去にコピーしたものを最大30件まで（設定可能）呼び出すことができるようになります。

使い方は簡単で、コピーしたいテキストを選択した状態で右クリックすると「Multicopy」という項目が出てくるので、この中の「Copy This」を選択すればテキストがコピーされます。

あとは右クリックすれば「Multicopy」の中に先ほどコピーした項目が表示されるので、過去にコピーした項目も選択することでペーストできるようになります。

保存したいメッセージを一気にコピーしてから一気に貼り付けることで、一つ一つコピペするよりは作業時間の短縮になるはずです。

まとめ

今回はチャットワークのチャット内容を保存する方法を紹介しましたが、いかがだったでしょうか。
開発者ツールやScraperを使ってログを保存する方法では、スクロールせずにプログラムを実行すると、一部のメッセージしか表示されずに保存されてしまうので、保存したいメッセージがすべて表示されるようにした状態で実行するようにお気をつけください。
それでは今回はこのあたりで。閲覧ありがとうございました。