Googleドキュメント(Google Docs)に図表番号挿入機能を実装する~環境構築と仕様決定~

Googleドキュメントって便利だと思うのですよ。
自分のPCにソフトインストールせずに使えますし、自動で保存されますし(要インターネット環境)。

でも、一般的に使われるMicrosoftのWordにあってGoogleドキュメントにはない機能があるわけで…。
その機能が欲しいと思うわけですよ。

その中でも、個人的に欲しいと思う機能が「図表番号の挿入」なんですよ。
アドオンを探せば見つかると思うんですけど、せっかくなんで自力で作って見ようと思い、作ってみました。


# 必要なもの

- Googleアカウント(Googleのサービスを使用するので)
- JavaScriptの知識(事前知識がなければ調べながらコードを書けば、今回は十分です)

必要なものはこれだけです。


# 使用する環境
ここで使用するのは「 **Google Apps Script (GAS)** 」です。

「**GAS**って何？」って思われる方向けに次章で簡単に紹介しますね。

コードを書くためのエディタや実行はすべてWEB上での操作になるので**インターネットに繋げるPC**があれば十分です。

参考までに私の作業環境を載せておきます。
macOS Mojave 10.4.5
safari 12.1.1


# [Google Apps Script (GAS)](https://developers.google.com/apps-script/)とは
簡単に言うならば、MicrosoftのWordやExcelなどの**マクロ**に相当します。
**GAS**を使うことで欲しいと思う機能を自分で実装出来るわけです。

また、WEB上で書けるので自分のPCに環境を作る必要がありません。

コード自体はJavaScriptです。
[リファレンス](https://developers.google.com/apps-script/reference/document/)を見ながらコードを書いていきましょう。
英語が多い(2019/07/21時点)ですが、英語が苦手な方でも読めると思います。


# 準備
## ファイル名について
ここまでで必要になるものや環境については説明したので次は準備です。
今回はドキュメントに図表番号の挿入機能を付け足すのでドキュメントを用意しましょう。
ドキュメントの名前、スクリプトのプロジェクト名はなんでもOKです。
ここでは分かりやすいように次のように名前を設定していきましょう。

| 種類         | 名前               |
|:-----------:|:-----------------:|
| ドキュメント名 | 図表番号の挿入テスト |
| プロジェクト名 | 図表番号の挿入      |

手順を簡単に載せておきます。
「よくわからない！」って方は次節以降に少し詳しく書いたので次節以降を見てください。

1. ドキュメントを作成し、名前を「図表番号の挿入テスト」にする。
2. ツールタブからスクリプトエディタを開く。
3. プロジェクト名を「図表番号の挿入」にする。

## 手順1
まず、GoogleDrive(以下、ドライブ)を開き、ドキュメントを作成しましょう。

ドキュメントを作成したら、画像中の「無題のドキュメント」と書かれている部分を「図表番号の挿入テスト」に変更します。
「無題のドキュメント」と書かれている部分をダブルクリックし、「図表番号の挿入テスト」と入力すれば変更されます。
<img width="652" alt="No1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466919/277cfdd2-b44a-d9cf-58bc-28e77d1025ed.png">
変更内容は少し放置しておけば自動で保存されます。

## 手順2
さっきの画像中に「ツール」と書かれた箇所があります。
それをクリックしましょう。
クリックすると、下の画像のように一覧が出るのでその中から「スクリプトエディタ」をクリックしましょう。
<img width="652" alt="No2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466919/bdbc7f91-55ea-1eab-b490-8ff3e6896b42.png">

## 手順3
手順2まで完了していれば下の画像のようなタブがあります。
<img width="431" alt="No3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466919/eb7a09eb-8048-96e8-a080-e994527086bb.png">
「無題のプロジェクト」と書かれている部分をダブルクリックし、「図表番号の挿入」と入力し、プロジェクト名を変更しましょう(プロジェクト名は自由です。今回は分かりやすいように「図表番号の挿入」にしてます)。

「コード.gs」と書かれているところはそのままにしておきましょう。
(変更しても影響はないので変更したい方は変更しても大丈夫です。)


# 仕様
「準備は整った。早速書くぞ！」といきたいところですが、コードを書く上で必要不可欠な**仕様**が決まっていません。
なので、仕様を決めてコードを書く前準備をしましょう。

## 今回の機能

作成する機能のリストです。

- 図表番号の挿入機能
 - カーソル位置の取得
 - その位置に挿入すべき番号の取得
 - カーソル位置に番号を挿入
- 挿入後の自動更新機能
 - その位置において適切な番号の取得
 - 挿入前の番号を挿入後の番号へ置換

挿入後の自動更新機能を例を使って説明すると

**図1&nbsp;&nbsp;図1のタイトル**
**図2&nbsp;&nbsp;図2のタイトル**

となっている状態で、図1と図2の間に図番号を挿入した時に

**図1&nbsp;&nbsp;図1のタイトル**
**図3&nbsp;&nbsp;図3のタイトル**
**図2&nbsp;&nbsp;図2のタイトル**

ってなると変ですよね。なので、これを

**図1&nbsp;&nbsp;図1のタイトル**
**図2&nbsp;&nbsp;図2のタイトル**
**図3&nbsp;&nbsp;図3のタイトル**

に**自動**で直そうということです。
手動で番号を更新するなんて面倒ですからね……。

## 制約条件
機能を作成する上での制約条件を載せておきます。
実装時に必要になります。

- 図表番号は下のどちらかの書式になっている
 - 「図(半角数字)(全角スペース)(図のタイトルや説明)」
 - 「表(半角数字)(全角スペース)(表のタイトルや説明)」
- 違う図番号・表番号で同じタイトルや説明を持たない
- 同じ行に図表番号が2個以上存在しない

要するに、下の画像のような状態になっているということです。
表番号も図番号と同じように考えてください。
<img width="239" alt="No4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466919/29102df2-231e-0ab3-ef40-b91f263aa472.png">

## 挿入方法
挿入方法はシンプルがいいので下の画像のように
<img width="344" alt="No5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466919/4a51c432-abab-7761-e2aa-7dbe0d63d576.png">
「図表番号の挿入」をクリックしたら、「図番号の挿入」と「表番号の挿入」が選べて、
それをクリックするとドキュメント内にあるカーソルの位置に挿入されるようにします。


# まとめ
この記事ではGASを使用する環境の作成と機能の仕様についてお話ししました。
[次の記事](https://qiita.com/Allermist/items/5175232067907cac6175)で実際にコードを書いて、機能を作成していきます。