Googleドキュメントで使用頻度の高い描画をボタン1つで簡単に挿入したい！

こんにちは。湯沢町にUターン後に小学生向けのプログラミング講師として活動している腰越です。この内容は現職でハマった「Google」についてご紹介をしています。

【※注意】
以前の私のように「仕事ではWindowsのエクセル・ワードが命です」という方に向けてオススメする内容です。既にGoogleを活用して仕事をされている方の閲覧はご遠慮ください。

ここから挑戦は始まった...

ど田舎にUターンしてからプログラミングの素晴らしさを知るというかなりレアパターンの私ですが、
「せっかく勉強をしているのなら、記録に残そう」
「絶対知らずに損している地元民はたくさんいるはずだ」
と最近思うようになったので、noteで細々記録しながらSNSで発信をしてみると、いつもコワーキングスペースでお世話になっている「きら星BASE」代表の伊藤さんから、
「提出書類で○をつけなければいけないものが結構あるんだけど、毎回描画しなけりゃいけないのが面倒...」というコメントを頂戴しました。

実際に自分でもやってみると、
まず毎回挿入からの描画・新規（作成）で

円書いて、中の色を透過して、大きさを調整してそれを該当箇所に貼り付けて...

って...確かに毎回だと地味に面倒...

ということでちょっと試しに
「ボタン1つでいい感じの○が出ちゃうシステム」を作ってみました。

出...出来ないだと!?

ということでまずはいつも通り先人の知恵を拝借すべく、Googleさんに様々な方法で検索アタックしました。
「GAS 描画 挿入」「GAS ドキュメント 描画」「GAS ○ 挿入」etc.....

しかし、中々ヒントが出てこない。色々調べているとYahoo！知恵袋から衝撃の質問&回答が...

...。まじかよ。
どうやら現状では指定した描画をGASで挿入することは出来ないらしい...
全然「ナイス！」じゃねーよ。。。
この時点でかなり絶望的になりましたが、他の方法で出来ないのか考えてみることにしました。

手段にこだわるな！

知恵袋発見までは、ずーっと「描画を操作していい感じの○を出す方法」を考えていたので、方法が無いとわかってうずくまっていると、別の方法がパーン！と閃きました。

そもそもゴールは「いい感じの○が出ればいい」わけで、描画をプログラミングで操作して○をつくる必要はないんじゃないか？...と。

その後も色々と検索をかけていくと、どうやら「画像の挿入」ならGASで操作できることが判明。なんかこれをうまく使えばということで急遽別の作戦に切り替えることに。

LINEスタンプの技法を転用

私が切り替えた別作戦は「背景透過画像の活用」です。

これはLINEスタンプ制作でよく使う技なので説明の都合上、ちょっと話を脱線させます。

湯沢の高山さん4 - LINE スタンプ | LINE STORE

LINEスタンプって意外と奥が深くて、いい感じに作るには必ず背景画面を透過させないといけません。

例えばこちら↓

普通の写真（下記画像）だと白い背景部分もスタンプに入ってしまうので

白い部分を消去して背景が透けるようにしてあげます（＝透過）
（伝わりづらかったらすいません...）

この透過の作業は本来Photoshop使って編集するのがLINEの推奨なのですが、私は画像編集のプロではないのでオンライン上で無料使用できる「Photopea」というものを使っています。

...で、話を戻します。
何が言いたいかというと、この技術を使って「背景が透過状態の○の画像」を作って、それを貼り付けるのはどうか？と思ったのです。

これを保存して、
画像を取り込む方法をGoogleさんで発掘して...

【GAS 基礎】Blobオブジェクト ファイル・データ操作

GASをコピペ&修正&改善した結果........

出来た！！！
おー！ただの○なのに超感動！！！！！

無事、任務をやり遂げました。
参考コードはこちら↓↓↓

function onOpen () {
 const ui = DocumentApp.getUi()
 .createMenu('○挿入')
 .addItem('実行', 'insertCircle')
 .addToUi();
}


function insertCircle() {
  // 1．ターゲットのファイル（今回は◯の画像ファイル）を取得（file）
  var file = DriveApp.getFileById("ファイルのIDを入力");
  // 2．getBobメソッドでBlobオブジェクトとして取得（blob）
  var blob = file.getBlob();
  // 3. スクリプトに紐づくドキュメントのアクティブなドキュメント（=使用中のドキュメント）を読み込む
  var doc = DocumentApp.getActiveDocument();
  // 4. 先頭に画像を挿入
  doc.insertImage(0, blob);  
}

まさかのバットエンド

実装できたはいいが、このシステムには最大の欠点が。

（私の文章力で伝わるかわからないのですが）
○をつけるボタンは完成したのですが、これを毎回使うには「○をつける資料ファイルが出てくる度に実装」しなければなりません。

つまり、膨大な○をつける資料が現れたら、その度にプログラミングを１データずつ実装してあげないと使えないのです...
（※多分...もし全データに適用する技があれば教えてください）

ということで、結果依頼主の要望には応えられなかったのですが、

・目標達成するために違う角度からのアプローチを思いつけたこと
・全く違うスキル（LINEスタンプ作り）がプログラミングで活きたこと
・新たな技能（使用頻度の高い画像を簡単に挿入する仕組みづくり）を習得できたこと
は私にとってプラスになりました。

今後もプログラミング未経験者だった者（＝私）の目線で、自分の仕事で便利だった機能や、皆さんにも転用できそうな機能が作れれば記録していこうと思います。

ではではまた。