2020年7月17日更新

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

Thumbnail

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

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

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

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

今回紹介する方法

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

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

JavaScriptを実行できる画面が表示される

ブラウザに搭載されている機能にコピペするので、拡張機能などをインストールしなくても大丈夫です。

PCの操作に慣れた方や、開発者ツールを使ったことがある方やなら簡単にログを保存することができると思います。ファイル形式はテキスト形式やCSV形式で保存ができます。

②Googleクローム拡張機能「Scraper」を使う方法

Googleクローム拡張機能「Scraper」

「Scraper」というGoogleクロームの拡張機能を使ってログを保存する方法です。これもコピペで大丈夫です。

クリップボードにコピーする方法（そのままペーストできる状態になる方法）と、Google Docsのスプレッドシートで保存する方法の2通りが利用できます。

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

via @sambmotion

この方法もGoogleクロームの拡張機能を使っていきます。
手軽に利用できるのですが、力技になるので、メッセージの量が多いときは①か②の方法がオススメです。

エンタープライズプランについて

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

公式サイトチャットワークの料金プラン

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

まずはGoogleクロームなどのブラウザ内の機能を使う方法から見ていきましょう。

冬眠明けのクマ冬眠明けのクマ

開発者ツールでJavaScriptを実行できる人は「ステップ2」から見てね。

ステップ1: Googleクロームで開発者ツールを使う方法

メニューバーの「表示」内の「開発/管理」にある「JavaScriptコンソール」 を選択

Googleクロームで開発者ツールを使うには 、メニューバーの表示 > 開発/管理にあるJavaScriptコンソールを選択します。これでJavaScriptコードが実行できる状態になりました。

チャットワーク開発者へのメッセージ

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

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

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

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

ステップ3: 開発者ツールからコードを実行する

それではコードを入力していきましょう。

JavaScriptコンソールへコードを入力した状態

下の方で紹介しているコードをコピペして、開発者ツールの入力欄に貼り付けます。

テキストファイルの保存画面

ペーストしてからEnter（エンター）キーを押せば、ダウンロードが始まります。

冬眠明けのクマ冬眠明けのクマ

「.txt」や「.csv」の拡張子を忘れないようにね。

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

メッセージをテキスト形式（.txt）でダウンロードする場合には、以下のコードをコンソールに貼り付けて実行します。

JS
コピーする
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() + 'nn'
    messages += field
})
window.open("data:application/plain;charset=utf-8," + messages)
テキストファイルの保存画面

「○○.txt」のように.txtの拡張子で名前をつけて保存すれば完了です。


（ぼかしが多いですけど）ちゃんとテキスト形式で保存されていますね。

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

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

JS
コピーする
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(/(rn|n|r)/gm, ""))
    arr.push(field)
})
window.open(encodeURI("data:text/csv;charset=utf-8," + arr.map(e => e.join(",")).join("n")))
CSVファイルの保存画面

「○○.csv」のように、.csvという拡張子をつけてダウンロードします。


これでExcelでも編集できる形式で保存することができました。

補足: コードを実行しても何も起きないときは？

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

ポップアップがブロックされたら「設定」ボタンを押す

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

「設定」からポップアップを許可する

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

補足: 拡張子を入れずにダウンロードしたら？

もし「.txt」などの拡張子を入れずにファイルを保存した場合でも、ダウンロード後に拡張子を追加/変更することができます。

拡張子変更時に出てくるメッセージ

拡張子を変更すると警告が出ることがありますが、そのまま変更してもらって大丈夫です。

冬眠明けのクマ冬眠明けのクマ

拡張子を変更するときに警告が表示されるかもしれないけど、今回は気にせず変更しても大丈夫だよ。

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

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

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

Firefoxのメニューから「ウェブ開発」を選択

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

「ウェブコンソール」を選択

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

JavaScriptを実行できる画面が表示される

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

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

ウェブコンソールに表示されたペースト禁止のメッセージ

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

ウェブコンソールにallow pastingと入力すればJavaScriptコードをペーストできるようになる

ペーストできないときは、ウェブコンソールの入力画面に「’allow pasting’」と入力します。
これでFirefoxでもJavaScriptを入力できるようになるはずです！

冬眠明けのクマ冬眠明けのクマ

allow pastingの文字は‘（シングルクオート）で囲まないといけないよ。

②Scraperを使う方法（XPath）

次は「Scraper」というGoogleクローム拡張機能を使ってログを保存する方法について見ていきましょう。

無料Scraper（Chromeウェブストア）
Googleクローム拡張機能「Scraper」

ChromeウェブストアからScraperを拡張機能として追加します。

ステップ1: Scraperを起動

右クリックしてScrape similarを選択

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

ステップ2: 保存したい内容を指定する

次はXpathというものを使って、保存したい内容を指定します。

Scraperの画面でXPathを使って保存したい要素を指定

Scraperを起動するとポップアップが表示されるので、この中に必要な情報を記入していきます。

「Column」の隣りにある緑色のボタンをクリックして、次の表にあるNameとXPathをコピペで追加していきます。

「Name」に入力する内容 「Xpath」に入力する内容
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”)]/.
Scraperの設定画面

上の表の内容を記入すると画像のような感じになります。

Scrapeボタンを押すと選択した項目が取得される

右側のパネルに取得できた情報が表示されます。

行を追加/削除するには？
「Columns」の右側にある緑色のボタンを押すと、行を追加することができます。赤いボタンを押せば、行が削除されます。

ステップ3: 指定した要素を書き出し

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

冬眠明けのクマ冬眠明けのクマ

これで保存完了だよ。

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

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

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

ScraperのPresetsボタンを押せばプリセット一覧に移動できる

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

ScraperのPresetsでChatWorkという名前をつけて設定を保存

ここではChatWorkという名前をつけてみました。

ScraperのPresetsで設定を保存しておけばすぐに呼び出すことができるようになる

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

冬眠明けのクマ冬眠明けのクマ

Scraperほんと便利だわ。

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

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

無料 Multicopy（Chromeウェブストア）
Googleクローム拡張機能「Multicopy」

こちらもChromeウェブストアから無料でダウンロードできます。

Multicopyの使い方

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

「Multicopy」インストール後にテキストを選択した状態で「Copy This」を押せばテキストがコピーされる

コピーしたいテキストを選択した状態で右クリックしてから「Multicopy」 > 「Copy This」を選択します。

Multicopyでコピー後に右クリックすれば先ほどコピーした項目が表示されるようになる

メモ帳などで右クリックすると「Multicopy」の中にコピーした項目が表示されるので、それを選択するとペーストできます。

冬眠明けのクマ冬眠明けのクマ

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

まとめ

今回はチャットワークのチャット内容を保存する方法について紹介しました。

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

Home

関連記事

トップに戻る

Copyrights © WebCraftLogAll Rights Reserved.