mikeo_410
  1. 2.GASで作ったCMS
    1. 1.googleドキュメントでサイト
    2. 2.googleドキュメントのCMS
    3. 3.このCMSアプリの使い方
    4. 4.数式

このCMSアプリの使い方

1. googleドキュメントの作成
1.1. 書式の基本

今のところ分かっているのは、上部に表示されているツールバーのリストボックスにある「標準テキスト」や「タイトル」、「見出し1」などの選択肢、つまり段落スタイルが書式で、それぞれの設定が変更可能になっていることです。この変更は、画面上部のメニューバーの「表示形式」「段落スタイル」で行ないます。「標準テキスト」や「タイトル」などの段落の種類ごとに、「適用」「更新」があって、カーソル位置や選択領域に対して、書式を文書に「適用」するか、記憶されている書式を文書の書式に「更新」するかを選択します。「標準テキスト」であれば「「標準テキスト」を適用」と「「標準テキスト」をカーソル位置のスタイルに更新」と言うメニュー項目が表示されます。

「表示形式」「段落スタイル」「オプション」には「デフォルトのスタイルとして保存」、「デフォルトのスタイルを使用」、「スタイルのリセット」があります。
「デフォルトのスタイル」は「既定のスタイル」に対して利用者が変更を加えて保存した書式で、リセットは「既定のスタイル」に戻すことのようです。

「デフォルトのスタイルとして保存」をしても、新たなドキュメントや、既に存在するドキュメントは影響を受けません。

「デフォルトのスタイル」を使用するには「デフォルトのスタイルを使用」を選択する必要があります。新しいドキュメントは「既定のスタイル」で始まります。

1.2. 字下げ

段落の始めは、空白1文字から始めたいと思います。これは自動でできなくても構わないことです。しかし、HTML化して表示される際に全角スペースが   になるので、字下げのインデントを設定します。

この章を例に取ります。

  1. 「字下げ」と入力し、上のツールバーで「見出し1」を選択します。
  2. ツールバーの「番号付リストアイコン」で、章番号を付けます。
  3. 「見出し1」の最後にカーソルを置いて「enter」キーを押します。
  4. 次行も「番号付リスト」となって番号が表示されます。
  5. 「backspace」を押すと番号が消え、もう一度押すとカーソルが入力可能な範囲の左端まで移動します。
  6. この状態で、最初の段落を入力します。
  7. 入力した段落を選択します。
  8. 画面上部のメニューバーから「表示形式」「配置とインデント」「インデントオプション」と選びます。「インデントオプション」のダイアログが開きます。「特殊インデント」のリストボックスから「先頭行」を選んで、0.4 を設定します。
  9. 「適用」ボタンをクリックしてダイアログを閉じると、選択していた部分の先頭が字下げされます。
  10. この段落の最後にカーソルを置いて「enter」キーを押すと、次の行の開始位置は自動的に字下げの位置になります。
  11. 「shift」+「enter」キーを押した場合は字下げが起きません。段落は続いていると見なされます。
  12. 入力済みのテキストの中にカーソルがある状態で、「表示形式」「段落スタイル」「標準テキスト」「「標準テキスト」をカーソル位置のスタイルに更新」を選択して保存します。
  13. 「表示形式」「段落スタイル」「オプション」には「デフォルトのスタイルとして保存」があります。

また、既に入力してしまったドキュメントの字下げは、全角スペースと、インデントが見分けがつかず、また、行末が「enter」であったか「shift」+「enter」であったかも分からないので面倒です。

まず、先頭の段落に字下げを適用し、次の段落の先頭にカーソルを置いて「backspace」を押して前の行と繋げ、改めて「enter」して字下げしました。

ここで、インデントの量を 0.4 としました。この単位は cm のようです。

1 pt = 1 / 72 in =  0.3527778 mm なので、11pt = 0.3881 cm です。

HTML化したドキュメントでは計算通りのようです。googleドキュメントの編集時には少し短いように見えます。

1.3. 字下げと表

表の中の各項目もそれぞれ段落の先頭と見なされ字下げが起き、表示が崩れました。

そこで、「表示形式」「配置とインデント」「インデントオプション」と選んでダイアログを表示します。

「特殊インデント」のリストボックスで「先頭行」から「なし」に変更します。

標準テキストに字下げを設定すると、既存の表が読めないような状態になってしまいました。理由は、各セルで字下げが機能して、全角1文字分のインデントが起きるからのようです。そこで、全セルを選択して、「表示形式」「配置とインデント」「インデントオプション」と選び「インデントオプション」のダイアログを開きます。ここで「特殊インデント」のリストボックスの「先頭行」を「なし」にすれば良いはずです。

実際には上手くいきません。どうやら、各セルの文字列の長さの計算は変わっていないようです。

上の図の警告文のマイナス「0.4」は、全角スペース1文字の幅(cm)で、セルの中身の方が長いので、マイナスの左右のマージンを指定することを求めていると考えられます。セルが中央揃えなら、左右に -0.2 を設定します。

1.4. 章番号

「章番号」そのものはないので、「番号付リスト」と「見出し」を使用して章番号とします。「見出し」は1,2,3…と番号があります。これは文字の大きさを示し階層を示さないようです。インデントで表示される番号の階層が変わります。

3点気付いていることがあります。

まず、HTML化した後の見出し文字列の一部だけが太文字になったりすることです。これは、2つ目以降の章について、最初の章見出しの書式をコピーして貼り付けていることに起因しているようです。貼り付ける際に見出しの書式の適用範囲をカーソル位置の前後で決めるものと思いますが、その際に文字種などで異なった設定になるようです。これは、見出し文字列全体を選択して、「見出し1」等を設定し直せば解決します。書式をコピーする際に見出し部分を選択すれば良いと考えましたが、この場合、章番号が付きません。

2つ目は、章見出しの前の行との間隔が、適当な量にならないことがあることです。どうやら、「番号付リスト」で終わって、新たな章見出しを書く場合のようです。「表示形式」「行間隔と段落の間隔」に「段落の前にスペースを追加」「段落の後にスペースを追加」があって有効です。

最後は、HTML化した表示の章番号は、普通の文字サイズで、見出しと同じにならないことです。

1.5. 図表のテキストの回り込み

googleドキュメントは、表については、テキストの回り込み機能がないようです。図にはあります。しかし、HTML化した場合、良く認識できていませんが思ったようなレイアウトにはなりません。図表の横にテキストを書く方法は、2列の表のセルに収めて、他方にテキストを書く他は無いものと思います。

この場合、テキストはブラウザの表示幅に追従しなくなります。

1.6. 図表の位置は左インデントで

HTMLドキュメントの目的はブラウザの表示機能に合わせて最適なレイアウトをすることです。したがって、左基準でレイアウトすることが基本です。

googleドキュメントの編集中はA4の大きさがあって、図表を中央揃えして、そのキャプションも中央揃えすれば上手くいきます。しかし、これをHTML化して大きな窓に表示すると、図表が文章から離れた場所に表示されることになります。

1.7. 図表のキャプション

HTMLのテーブルには caption がありますが、googleドキュメントにはないようです。しかし、図表は大きなスペースを伴っていないので、普通に表題が付けられますが、図表に附属したものにはなりません。

また、図表の題には図表番号が必要ですが、この機能もないようです。

表_1. 表の題名

この表の表番号は変かも知れませんが私には十分です。表示できないマークを文書に挿入する方法を知らないので、本文に無さそうな記述にして、スクリプトで検索置換して図表番号を連番にします。

解決できていないのがスクリプトの組み込みで、今のところドキュメントごとにスクリプトエディタを開いて貼り付けるしか方法がありません。

1.8. 「描画」図形の右が切れる

単に図を貼るのではなく、「挿入」「描画」によって、その場で必要な図が描けるのは便利です。しかし、この方は自動的にトリミングされて余白が少ない状態のようです。

HTML化したものをブラウザで見た場合、右が少し切れてしまいます。「描画」の編集の際、右に邪魔にならない図形を描いて必要な部分が確実に表示されるようにすることが必要です。テキストボックスは見えないので有効ですが、あることを忘れないように決まった場所に書くようにしたいと思います。

2. ドキュメントの公開

このCMSは、階層化したインデクスからドキュメントを参照するために作りました。ドキュメントの階層はフォルダの階層で表現します。ドキュメントを作成したら、所定のフォルダ階層に「移動」します。画面左最上段のドキュメントの名前の右にある「移動」アイコンをクリックして移動します。たとえば、このドキュメントは /doc/cms に移動します。

「ファイル」「ウェブに公開」をするとURLが得られます。このURLをブラウズすれば、サーバーはドキュメントをHTML化して返します。
別途、「共有」設定がありますが、これはドキュメント自体の共有で、サーバにアクセスすればgoogleドキュメントのエディタが開きます。

注意が必要なのは、「ウェブに公開」いよって開かれるダイアログの「変更が加えられたときに自動的に再公開する」チェックボックスです。このチェックがないと、ドキュメントを更新してもブラウザの表示に反映されません。

「ファイル」「ウェブに公開」で付与されるURLを知るサーバサイドのスクリプト記述が分かりません。そこで、URLを登録する処理を作りました。

ドキュメントを「ウェブに公開」したら、スプレッドシート「公開したドキュメントのURLとファイルID対照表」を開いて初期化の完了を待ちます。まだ、URLが入力されていない箇所に取得したURLを貼り付けます。

画面左最上段のドキュメントの名前は、googleドキュメントの一覧やgoogleドライブでファイル名になっています。しかし、ファイルはIDで識別され名前は表示に使われているだけなので、名前を変えたり、「移動」しても特になにもする必要はありません。

注意が必要なのは、HTMLに与えるタイトル名に、名前を文字列から切り出して使用しています。この処理は手を抜いているので、名前の先頭と最後の文字がサロゲートペアになっている場合正しく動作しません。常用でない漢字や記号は避けてください。

現在、フォルダは単にスクリプトが受け取った順です。ファイルに関してはソートしています。表示順を指定する機能を持たないので、ドキュメントの名前に [01] のような書き込みをしています。

3. 気付いたこと
3.1. frame-ancestors self

各ページに「目次」ボタンを付けてトップへ戻るようにしたいと考えました。しかし、これは「いけない」ようです。ページはgoogleが提供するiframe内に表示されていますが、frame-ancestors が self となっていて、外部を指すことを許可しないようです。

しかし、サイト内の他のページをリンクすることが出来ることは確認しました。本来のgoogleドキュメントのリンクの挿入は使用できませんが、URLを以下のように指定すればOKです。

[CMSアプリケーションのURL]?doc=[ドキュメントのURL]

目次を開くには、

[CMSアプリケーションのURL]

をリクエストしました。

 前者はOKで、後者は「いけない」ようです。

「挿入」「リンク」で、[CMSアプリケーションのURL]?doc=[ドキュメントのURL] を設定すると、実際には、

https://www.google.com/url?q=[CMSアプリケーションのURL]?doc=[ドキュメントのURL]

と、置き換えられています。

このCMSは、単純にクエリのdocパラメータを開きます。docが指定されなければ目次ページが開きます。

したがって、

[https://www.google.com/url?q=CMSアプリケーションのURL]?top=top

をURLに指定して目次が開きました。

この URL は、buttonタグでlocation.hrefに設定しても有効ではないようです。

3.2. ページ分けなし

「ファイル」「ページ設定」に「ページ分けあり」「ページ分けなし」ボタンがあります。

印刷が目的ではないので、「なし」にすると編集時に余計なページ区切りが表示されなくて便利だと思います。

3.3. 数式

「挿入」「計算式」は簡単で綺麗に書けて便利です。しかし、HTML化すると図になります。

  1. 全角文字を含むと化ける
  2. 図が直ちに作られない。数式が小さい四角いマークになっている。


題目一覧へmikeo_410@hotmail.com(updated: 2022/09/08)