#104 Jamboard の付箋を Google スプレッドシートに書き出す

2023年9月13日 07:18

ある Facebook グループに寄せられていた以下のような質問。

【質問】Jamboardについて，初歩的な質問です。（既に出ている質問でしたら申し訳ありません。）

付箋で集めた言葉や文章をテキストで保存する方法はありませんか？

やりたいことは，集めた意見や感想からテキストマイニングしたいのです。

ＰＤＦからのＯＣＲでは，重なっている部分がテキスト化できません。ＧＡＳのメニューもないようです。

よろしくお願いします。

Facebook グループに寄せられた質問

これは、ユーザーローカルの「AIテキストマイニング」などを利用することを想定されているものだと思います。

これまで、Jamboard についてはファイルとしては GAS で扱えるものの、Jamboard に保存されているデータについて、Google スライドや Google ドキュメントのようには扱えない。GAS で操作するための API が提供されておらず、ただ保存されていることがわかるだけだと思っていました…

それが、上記の質問に寄せられた

ブラウザの開発者モードでパースされたHTMLを別ファイルに保存してからDOMParserでdivでjam-postit-elementクラスのものを引っ張ってきてdata-valueを取得していくだけでは？

質問に対するコメント

というコメントを見て、Web ブラウザに表示されている方法から、取得するという方法があったことに気付かされました。
とは言え、表示されている Jamboard を HTML ファイルとして保存し、それを解析するというのは酷なので、何かいい方法がないかを考えてみました。

案１：IMPORTXML 関数で抽出

生じる制限 → 「リンクを知っている全員」で共有

以降の方法は、Jamboard としてアクセスするのではなく、Web ページとしてアクセスして、その表示している HTML の内容から目的を達成しようというものです。

一つ目の案としては、Google スプレッドシートに用意されているIMPORTXML 関数を用いて、Web ページの内容（HTML）を取得します。

この関数を用いることで、GAS のプログラムを用いなくても、指定した URL の Web ページの内容が取得できるものの、認証なくアクセスできる Web ページでなければなりません。
そのため、「リンクを知っている全員」で共有されている必要があります。

関数だけで抽出できます

前項のように「リンクを知っている全員」で共有されていれば、以下の URL にアクセスすれば、関数を設定した Google スプレッドシートがコピーできます。

https://bit.ly/45ODa4i
→ 利用件数を確認するために Bitly の短縮 URL で掲載しています。

この Google スプレッドシートを自身の Google ドライブにコピーして、下図のような Jamboard の URL をセル B1 に入力します。

すると、入力された URL を読み込み、下図のように Jam の中にある付箋の文字情報（テキスト）をスプレッドシートに書き出してくれます。

この案の課題

処理は関数で行っているので、権限の確認なども不要で手軽に利用できるものの、次のような課題があります。

Jam の中のどのフレームの付箋なのかがわからない。
→ 関数だけでは、どのフレームなのかを判別しづらい
それぞれの付箋に設定された色情報を RGB で取得できるものの、その色情報をセルに反映させられない。
→ 関数では、セルの色を設定できない

前者が何とか解決できないか？という感じ…😖

案２：GAS のプログラムで抽出

GAS のプログラムによって、前項の IMPORTXML 関数での課題を解消してみました。👍　作成した GAS のプログラムは、下図のような Google スプレッドシートに埋め込んであります。

このスプレッドシートは、以下 URL にアクセスして、画面右上の「テンプレートを使用」ボタンを押すと、自身の Google にコピーを作成できます。

https://bit.ly/tomokatsu_gas103
→ 利用件数を確認するために Bitly の短縮 URL で掲載しています。
※設定し間違えて103 となっていますが、正しい URL にリンクするはず

プログラムをはじめて実行する際には、アカウントによる確認作業が必要になります。詳しくは以下の投稿をご覧ください。

操作手順

案１と同様に、セル B1 に抽出の対象となる Jamboard の URL を入力して、「付箋の内容を読み込む」ボタンを押します。

「付箋の内容を読み込む」ボタンを押すと、現在日時と指定された Jamboard のファイル名を連結した名前で新規にシートを作成し、そのシートに付箋の情報を書き出します。

書き出される情報は、下図のように 5つの情報を書き出します。

列 A：フレームの番号
→ ファイル内のどのフレームに保存されているのかがわかるようになっています。
列 B：フレーム内の付箋番号
→ この付箋番号は、Jamboard のファイル内に設定されているものではなく、このプログラムで便宜上設定したものです。ファイル内で順番に処理する際に採番したもので、細かな仕様は開示されていないので断定できませんが、表示順が関係すると思います。フレーム毎に初期化しています。
列 C：付箋のテキストデータ
→ 付箋のテキスト情報を書き出すとともに、その付箋に設定されている背景色（黄、緑、青、ピンク、オレンジ）を反映させてあります。
列 D：付箋のフォントサイズ
→ 参考情報として書き出したもの。
列 E：付箋のスタイル
→ 参考情報として書き出したもの。

上記の例では、1つのフレームに 1つの付箋しかありませんでしたが、下図のように複数の付箋があっても問題なく動作します。

制限事項

この GAS のプログラム（案２）でも、案１と同様に「リンクを知っている全員」で共有されている Jamboard でなければ処理できません。
Jamboard のデータフォーマットが公開されているわけではなく、実際のデータを試行錯誤で解析して、付箋のテキスト情報を抽出しています。そのため、今後の Google Jamboard の仕様変更などによって、意図した動作結果が得られなくなる場合があります。

ちなみに…　今回のプログラムでは、以下 URL などを参考にしてライブラリ「Cheerio」を使用して、読み込んだ HTML の解析を行っています。GAS（JavaScript）の基本構文や API だけで処理しているわけではありません。この辺りが気になる方は、プログラムもご覧ください。

【GAS】Google Apps Scriptを使って簡単にスクレイピングを始めよう！｜muchi-no-chi ‐ https://mowfile.com/2023/04/15/gas_-scraping/3081/

最後に

このような質問（要望）が寄せられるというのは、Google Jamboard が様々な場面で利用されているものの、その使い勝手に難があるということなのだと思います。
本当は Google スライドのように Jamboard を GAS で扱うための API が提供されていればいいのですが、現時点では提供されていないので、ちょっとアクロバティックな方法で解決しています。
何はともあれ、困っていた点が解消できたそうなのでよかったかな？と思っています。

最後に、お決まりのフレーズなどを書いておきます。

一応の動作確認は行っているものの、不慮のトラブルによって損害等が生じても、責任はとれませんので予めご了承ください。
コメントを含めても 80行くらいのスクリプトであり、実行に際して目的外の場所への書き出しや収集などは行っていません。
特別なエラー処理は行っていないので、意図しないケースでエラーが発生してしまうかもしれません。どうにもならない場合には、ご連絡ください。

わたし自身にしてみると、このような「スクリプトを作ること」が目的になっているような感じですが、このスクリプトが何かの役に立てば幸いです。
「スキ ♡」を押してもらえると、このようなプログラム作成の励みになります。😍

この記事が気に入ったらサポートをしてみませんか？