スプレッドシートからnote用の表を書くテキストを作成する

少し前に、「noteで表を作成する」という記事を書いたのですが、この記事がありがたいことに地味に今でもビュー数が伸び続けいています。

この記事はTexという記法を使って、以下のような表を作るという記事なのですが、少し難しいといった声も聞いたり、後はやっぱり面倒くさいですよね、、、

$$
\begin{array}{|l|l|l|} \hline
\text{a} & \text{b} & \text{c} \\ \hline
\text{d} & \text{e} & \text{f} \\ \hline
\end{array}
$$

なので、今回はこういった表が書けるテキストを自動的に作成してくれるものを作ってみたいと思います！

プログラミング等に慣れていない方は少し戸惑ったり、面倒臭い作業が含まれているかもしれませんが、作ってしまえば使いまわせるので、もし興味のある方がいましたら、ぜひやってみて下さい！！

必要なもの

googleアカウント

どの様なものを作成するのか

今回はgoogleのスプレッドシートを使おうかと思います。

まずは図のように作成したい表をスプレッドシートで作成します。

オリジナル関数(今回は「getTexText」という関数)を作成します。

指定した範囲(図で言うと、「A1:C2」の範囲)でgetTexText関数を使うと、図の様に表示したいテーブルのtex記法を作成してくれるという仕組みです。

後は、作成したテキストをコピーして、編集中のnoteにペーストするだけです。

---

つまり、簡単に言うと、

スプレッドシートに

$$
\begin{array}{|l|l|l|} \hline
\text{a} & \text{b} & \text{c} \\ \hline
\text{d} & \text{e} & \text{f} \\ \hline
\end{array}
$$

を書いて、

=getTexText(A1:C2)

とすると、

$$ 
\begin{array}{|l|l|l|} \hline
\text{a} & \text{b} & \text{c} \\ \hline
\text{d} & \text{e} & \text{f} \\ \hline
\end{array}
$$

が出力されると言う仕組みを作っていきます。

やり方

1. スプレッドシートを作成する

1. googleアカウントにログインした状態で、google.comを開く

2. 右上にある9つの点をクリックして、スプレッドシートを選択

3. 新しいスプレッドシートを作成で「空白」を選択

もしくは、googleのドライブから新規で作成するのもありです。

2. 作成したい表をスプレッドシートに書く

例えば、

$$
\begin{array}{|l|l|l|} \hline
\text{a} & \text{b} & \text{c} \\ \hline
\text{d} & \text{e} & \text{f} \\ \hline
\end{array}
$$

を作成したいのであれば、

と書きます。

3. オリジナル関数を作成する

ここが少し面倒くさいところです。

まず、拡張機能をクリックします。

そこから、「Apps Script」を選択します。

すると、別のタブが開いて、

function myFunction() {
  
}

と書かれたページに飛ばされると思います。
これを消して、以下を書きます。(以下のコードをコピーしてApps Scriptのページに貼り付けます。)

/**
 * @customfunction
 */
function getTexText(values) {
  let alignment = 'l'
  let columnNum = values[0].length;
  let rowNum = values.length;
  
  let beginConfig;
  let endConfig;
  let text;

  beginConfig = '\\begin{array}{|';
  for(let i = 0; i < columnNum; i++){
    beginConfig += alignment + '|';
  }
  beginConfig += '} \\hline';

  endConfig = '\\end{array}';

  text = '$$\n';
  text += beginConfig + '\n';
  for(let i = 0; i < rowNum; i++){
    let valuesWithText = [];
    let len = values[i].length;
    for(let j = 0; j < len; j++){
      valuesWithText.push('\\text{' + values[i][j] + '}')
    }
    text += valuesWithText.join(' & ') + ' \\\\ \\hline\n'
  }
  text += endConfig + '\n$$'
  return text
}

↓こんな感じ、、、

ペーストしたら、実行の左にあるボタンをクリックして保存して下さい。

これで、オリジナル関数は完成です！！

4. オリジナル関数を使ってみる

スプレッドシートに戻り、オリジナル関数を使ってみましょう。

出力したいセルを選択します。(図ではA4を選択)

そして、セルの中もしくは fx の中に
=getTexText(テーブルの範囲)
を書きます。

今回の例だと、
=getTexText(A1:C2)
です。

Enter を押すと、図の様に

$$ 
\begin{array}{|l|l|l|} \hline
\text{a} & \text{b} & \text{c} \\ \hline
\text{d} & \text{e} & \text{f} \\ \hline
\end{array}
$$

な感じのTex表記で書かれたテキストが出力されます。

5. noteに書いてみる

出力されたテキストのセルをコピーして、noteの下書きに貼り付けます。

三点メニューからプレビューを表示させて、テーブルが表示されていれば成功です！！

補足

今回は、全て左寄せで実装しています。

最初に紹介した記事にも書きましたが、中央寄せとかにしたいのであれば、

\begin{array}{|c|c|c|} \hline

と言う感じで、「l」ではなく「c」を使わなければなりません。

その場合は上記のコードの

let alignment = 'l'

を

let alignment = 'c'

に変えると、全て中央寄せになります。

そのほかにも、臨機応変に変更できるようにしたいなどがあれば、コードを修正してみるのもありかなと思います！

例えば、

/**
 * @customfunction
 */
function getTexText(values, alignment) {
  let columnNum = values[0].length;
  let rowNum = values.length;
  
  let beginConfig;
  let endConfig;
  let text;

  beginConfig = '\\begin{array}{|';
  for(let i = 0; i < columnNum; i++){
    beginConfig += alignment + '|';
  }
  beginConfig += '} \\hline';

  endConfig = '\\end{array}';

  text = '$$\n';
  text += beginConfig + '\n';
  for(let i = 0; i < rowNum; i++){
    let valuesWithText = [];
    let len = values[i].length;
    for(let j = 0; j < len; j++){
      valuesWithText.push('\\text{' + values[i][j] + '}')
    }
    text += valuesWithText.join(' & ') + ' \\\\ \\hline\n'
  }
  text += endConfig + '\n$$'
  return text
}

のように「alignment」という引数を増やして、 「let alignment = 'l'」を削除し、スプレッドシートの関数で、

=getTexText(A1:C2, "l")

と書くと、全て左寄せ

=getTexText(A1:C2, "c")

と書くと、全て中央寄せ

の様にスクリプトを修正していけば、自分専用の都合のいい関数ができます。

こんな感じでGoogle Apps Script(GAS)でスプレッドシートのオリジナル関数を使って遊んでみるのも面白いかもしれません。