見出し画像

#107 ふきだしくんの内容を、Google スライドに変換する

ポスト Jamboard が話題になっていますが、以下の前多先生の動画で紹介されていた「ふきだしくん」が使い勝手がいい感じ。手軽な感じで使えます!

「ふきだしくん」とは?

「ふきだしくん」は、無償で利用できる以下のように説明されたサービスです。現役の先生方からの声をもとに作成されたサービスと言うこともあって、使い勝手の良いものに出来上がっていると思います。
これが無償で提供されているのか、と心配になるくらいです。

ふきだしくんは、授業・研修会・ワークショップ等で生徒・参加者の意見を一斉に可視化するのを目的としたサービスです。

ふきだしくん

「ふきだしくん」の難点

そんな「ふきだしくん」にも、上記の説明ページにも書かれていますが、

  • セキュリティ対策を目的に、毎日 AM4:00 にボードは自動削除される。
    → 日をまたいでの利用はできない

  • サービス自身にエクスポート機能は備えられていない。
    → データを書き出す場合はスクリーンショット

といった難点が見受けられます。手軽さの裏返しなのかもしれません…

この点については、前多先生が動画で説明されているように、Chrome 拡張機能を用いて、付箋の情報を書き出せるようです。

この拡張機能は、↓ の URL で公開されているもので、ZIP ファイルを展開して、Chrome ブラウザに登録することで、ふきだしくんで作成された付箋の情報を CSV 形式のデータとして書き出せます。

ちなみに、この拡張機能は、↓ の note も運営されている竹谷さんが作成されたものです。 ※今回の記事で、プログラムなどを二次利用することについては、竹谷さんには了解を得ています。

エクスポート機能を強化

前述のような「ふきだしくん」のエクスポート機能を更に拡張して、↓ の記事でも触れたように、Google の純正サービスとすれば「Google スライド」が代替となるので、「ふきだしくん」→「Google スライド」の変換を実現してみようと思います。

「ふきだしくん」→「Google スライド」の変換は次のように行います。

①「ふきだしくん」の情報を CSV 形式で書き出し

前述の竹谷さんの拡張機能に処理を追加して、「テキスト」「名前」「いいね!の数」の他にも、必要な情報を CSV 形式で書き出すようにしました。
以下の URL から ZIP ファイルをダウンロードして、Chrome ブラウザに拡張機能としてインストールしてください。

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

  • ZIP ファイル形式の拡張機能を Chrome ブラウザにインストールする方法は、前出の前多先生の動画をご覧ください。

「ふきだしくん」で下図のように付箋を作成してみました。

「ふきだしくん」のサンプルデータ

この状態で書き出しを行うと、下図のように付箋情報をクリップボードに書き出します。 ※表示されているメッセージの「 」内の内容は、現在アクティブになっているボードのタイトル。

書き出したときに表示されるダイアログメッセージ

ちなみに、上図の「ふきだしくん」のデータは、次のような CSV 形式のデータとして書き出されます。 ※付箋の位置や大きさ、色などの情報も書き出されています。

"てすとのホワイトボード - ふきだしくん","https://477.jp/244/rooms/675be0d0-de56-4b6b-a780-1f8f5c89a0a2","231113-235611"
"","X","Y","width","height"
"initial","1000","700","2000","1400"
"max","0","0","4000","2800"

"text","name","votes","x","y","width","height","Color","background-color"
"あいうえお","せんせい","","1018","722","240","190","64A6A1","D2F8F6"
"わ を ん","せいと","","2751","1894","240","190","64A6A1","D2F8F6"
"かきくけこ","せいと","","1237","761","240","190","7065B7","D9D6FF"
"さしすせそ","せんせい","","1459","800","240","190","81A02A","E0F3AA"
"たちつてと","せいと","","1677","839","240","190","AC6A6C","FFB6C1"
"なにぬねの","せんせい","","1899","871","240","190","B28456","FDD8AF"
"はひふへほ","せんせい","","2121","902","240","190","4C70BA","C0D7FF"
"まみむめも","せんせい","","2340","940","240","190","B89504","FDE885"
"や ゆ よ","せんせい","","2553","988","240","190","888888","F5F5F5"

②CSV 形式のデータを Google スプレッドシートにインポート

前項で CSV 形式となった「ふきだしくん」のデータは、以下 URL からダウンロードした Google スプレッドシートに貼り付けます。

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

  • 2023/12/22 に以下の記事で説明しているように、プログラムを変更しています。新しいプログラムも、上記 URL のままダウンロードできますので、再ダウンロードをお願いします。

ダウンロードした Google スプレッドシートには、GAS のプログラムが埋め込まれていますが、シートは空となっています。セル A1 にカーソルを合わせて、クリップボードの内容を貼り付けます。
貼り付けると、上図のように列 A にCSV 形式のデータが貼り付けられます。

クリップボードの内容を貼り付け

ここで、Google スプレッドシートのメニューバーに追加されている「ふきだしくん」から「CSV を列に分割」を選択します。

メニューから「CSV を列に分割」

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

プログラムが実行されると、下図のように列 A の内容が各列に展開され、体裁が少し整えられます。

プログラムの実行後

③GAS のプログラムで Google スライドを生成

前項までの手順が終わったら、メニューから「スライドを作成」を選択すれば、Google スライドに書き出されます。

セル G3 と G4 のチェックボックスは、Google スライドに書き出す際に、「名前」と「いいね!」の数を付加するかどうかを切り替えるためのチェックボックスです。必要に応じて、設定してください。

メニューから「スライドを作成」
スライドへの書き出し時のオプション

Google スライドへの書き出しが終了すると、セル G1 に生成された Google スライドへのリンクが表示されます。

  • 生成された Google スライドは、Google スプレッドシートと同じ場所(フォルダ)に保存されます。

  • ファイル名は、「ふきだしくん」からデータを書き出した日時とタイトルから生成されます。

書き出されたスライドへのリンク

生成された Google スライドは、下図のような感じになります。「ふきだし」を、テキストボックスによる矩形で表現しているので、少し見た目は変わっていますが、大まかな雰囲気は踏襲していると思います。

Google スライドに変換されたデータ

苦労したところ

今回のプログラム作成にあたって、苦労したところを書き残しておきます。

(い) 「ふきだしくん」のデータを GAS などで取得できない

当初は、Chrome 拡張機能を使わずに、以前の ↓ の記事のように GAS などで「ふきだしくん」のデータを取得しようとしました。

しかし、どうにも取得できなかったために、前述のように拡張機能で取得するようにしています。

(ろ) Google スライドが GAS で制御しきれない

GAS のリファレンスページを何度も確認したり、試行錯誤を行ってみたものの、以下の処理を GAS では行えないようでした。
そのため、プログラム中でつじつまを合わせている部分があります。

  • スライドのサイズを変更できない
    UI では「ファイル」→「ページ設定」からスライドの大きさを変更できますが、この処理に相当する API が提供されていません。そのため、スライドのサイズと「ふきだしくん」の枠のサイズを比較して、その比率を用いてスケーリング(実際は縮小)させています。

  • テキストボックス内の割り付けが面倒
    「ふきだしくん」は付箋の下部に「いいね!」の数と「なまえ」を表示しており、それぞれが左寄せ・右寄せで表示されています。これと同じように表示させようとした場合、複数のテキストボックスをグループ化するなどすれば実現できそうではありましたが、処理が煩雑になるため断念しました。

最後に

これまでの記事で紹介したプログラムとは異なり、今回は Chrome 拡張機能も使用しています。公開されていたプログラムに少し手を入れただけですが、初めての試みだったのでちょっと面白く感じました。
前述のように元の拡張機能を作成された竹谷さんは、今回の記事のようにプログラムを二次利用することについて、快く許可していただきました。ありがとうございます。😍

結果として、想定していた通りに「ふきだしくん」のデータを「Google スライド」に変換させられました。このような機能がどこまで役に立つかはわかりませんが、編集可能な状態で「ふきだしくん」での編集内容を残しておけることには意味があるんじゃないか、と思います。

また、今回のプログラム(主に Chrome 拡張機能)は、「ふきだしくん」が実際にデータを表示している内容から、付箋(ふきだし)の内容を抽出しています。そのため、「ふきだしくん」に仕様変更が行われた場合には、意図しない動作となってしまう可能性があります

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

  • 一応の動作確認は行っているものの、不慮のトラブルによって損害等が生じても、責任はとれませんので予めご了承ください。

  • コメントを含めても 140行くらいのスクリプトであり、実行に際して目的外の場所への書き出しや収集などは行っていません。

  • 特別なエラー処理は行っていないので、意図しないケースでエラーが発生してしまうかもしれません。どうにもならない場合には、ご連絡ください。

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

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