mikeo_410
  1. 1.サイトのこと
    1. 1.単純なWEBサイトに
    2. 2.このレンタルサーバについて
    3. 3.URLエンコード
    4. 4.サイトジェネレータに関する修正記録
    5. 5.Google Docs について
    6. A1.ツール

サイトジェネレータに関する修正記録

このサイトのページは google docs で書いています。google docsは、「共有」「公開」を選択するとHTMLのページを用意します。これをブラウザで開いて「名前を付けて保存」したものがサイトジェネレータの入力です。

パソコンにサイトの構造にフォルダを作成して置いて、「名前を付けて保存」で配置します。この構造に従って、レンタルサーバにアップロードするファイルを用意します。

1. 各ページの変換
2. 数式が図になったもの

3. <img> の src のURLエンコード

4. イメージの右端が切れている

張り付けた図は常に右端が欠けます。理屈は分かりませんが、親のstyle属税から、

        overflow : hidden

を消せば解決します。

  1. <span style=
  2. "overflow : hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 449.33px;;">
  3.     <img
  4.         alt=""
  5.         src=        "./%ef%bc%91%ef%bc%8e%e3%82%a4%e3%83%b3%e3%83%81%e3%80%81%e7%94%a8%e7%b4%99%e3%82%b5%e3%82%a4%e3%82%ba%e3%80%81DPI%e3%80%81%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88_files/Untitled.png"
  6.         style=
  7.         "width: 601.70px; height: 449.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
  8.         title="">
  9. </span>

<img>タグを列挙して、数式の場合にはサイズを追加している箇所で、親の促成を調べ、一律に「overflow : hidden」を削除しました。

5. 挿入、リンクで加えたページ外のリンクのURL

他のページをリンクする正しい方法は良くわかりませんが、「挿入」「リンク」で「リンクを検索または貼り付け」の欄に完全なURLを貼れば参照できるようになります。

しかし、HTML化したページを見ると、

<a class="c12" href="https://www.google.com/url?q=http://mikeo410.minim.ne.jp/

%25EF%25BC%2593・・・%25BB.html&amp;sa=D&amp;source=editors&amp;

ust=nnn&amp;usg=xxx">2.地球儀と楕円体の描画</a>

のような形式になっています。

一旦、googleのサイトに送られるので、ブラウザにリダイレクトの表示がでます。

また、このエンコードは、%に続いて4桁の16進数が続いていますが、%の次は全て25で、2度URLエンコードしたようです。

「リンクを検索または貼り付け」には、「検索」をする方法があります。フォルダ名の先頭を入力して検索して設定するとgoogle ドライブのファイルのURLになります。これは、希望しないので、このサーバのページを開いて、アドレスバーをコピーして貼り付けます。この際、ブラウザは、URLエンコードしたものをクリップボードに入れます。

これが、2回エンコードされる理由のようです。

ただし、直接、"./1.このサイトについて/5.Google Docs について.html"のように入力すれば、エンコードされずに、そのまま href に設定されるので単純ではないようです。

href が "https://www.google.com/url?" で始まる場合、qパラメータを直接hrefに設定するようにします。この際、先頭が%25であったらURLデコードします。結果の先頭が%25であればもう一度URLデコードします。

これは、google ドライブ上のページの名前の先頭を全角で付けるという前提を置くものです。

 "https://www.google.com/url?" が複数つ続く場合があって、どういうケースか分からないが ?q= の "=" が%エンコードされている箇所があった。

繰り返し、処理する。

Uri クラスを作ると、URLをScheme、Host、LocalPath に分割できました。

LocalPathはデコードされています。

これをもう一度デコードするには、Uri.UnescapeDataString() が使えます。

Hostが ".google." を含む場合は、href を書き換えないことにします。

それ以外は、パラメータは削除します。したがって、googleサイト以外の外部サイトのリンクを挿入する場合パラメータが削除されることになります。

6. 章みだし

書いているものが文書なのでページは章で構成されていると考えています。ページはWEBページという意味でhtmlファイルに相当します。ページは「巻」でページ区切りはありません。章はネストします。章は、章番号と章見出しから始まります。章番号は、ドットで区切って章の階層を表します。章見出しは階層に合わせて文字サイズを換えます。

これが私の希望する章立てです。これは、 google Docs の考えとは異なるようです。

段落見出しは、単に文字の大きさの指定のようです。番号とは無関係です。番号付きリストを適用すれば章番号に見えます。章番号は、インデント操作で、ドットで区切った階層表現が切り替わります。これは、段落見出しの番号とは無関係で、見出し1をインデントすれば見出し1のまま、「1」、「1.1」と番号が変わります。

したがって、章番号は、文書の始めの方で、見出しに番号を付け、それを「書式の貼り付け」でコピーして使うことになります。番号と見出しを組み合わせたスタイルとしては保存されないようです。

html化した後の章見出しは以下のようになっています。

  1. <ol class="c5 lst-kix_i03d82xjhy7i-0" start="2">
  2.     <li class="c2 li-bullet-0">
  3.         <h1 id="h.xzexjk2vbxmw" style="display:inline">
  4.             <span class="c7"></span>
  5.             <span class="c4">ージ分けなし</span>
  6.         </h1>
  7.     </li>
  8. </ol>

段落スタイルの見出し1は<h1>に相当します。これは単に文字サイズを決めるのみで、章の階層を示しません。

オーダーリストを使って番号が与えられますが、章見出しは全て独立で、ネストしません。したがって、start属性で個々の番号が直接指定されます。

したがって、cssによるカウンタは不要に思えますが、styleの大半はカウンタに関するものです。

start属性の数字は誤っている場合があることが分かりました。google Docsでは正常なのに、HTML化すると新たな章の次のレベルが1から始まらないと言うものです。

以下のようにします。

  1. syleから、”.lst-”を含まないものだけコピーする。
  2. 段落スタイルに見出し1から4まであるので、章番号は4階層までとします。
  3. htmlでは、h1、h2、h3、h4 が階層を表すと決めます。
  4. 章番号は新たに発番します。したがって、必ずしも google Dos で見えるものとは一致せず、変則的な番号の振り方はできません。ページの先頭は常に1章です。
  5. 章見出しは、<ol><li><hn></hn></li></ol>のような構成ですが、これを

<div><span>章番号</span><span>見出し</span></div>に換えます。

  1. google Docs の目次は、html化すると h1、h2、h3、h4 のidの値を参照しています。このidを、章番号の<div>に移します。

7. index.tml

8. 基本的な動作

パソコンに SaveHml と site ディレクトリを用意します。

SaveHtml/ 以下には、googleドライブ上のドキュメントと同じ構造のフォルダを用意して、Google Docsドキュメントを「ファイル」「共有」「ウエブに公開」を選択して、公開されたhtmlドキュメントを開きます。「名前を付けて保存」で、SaveHtml/ 以下の対応場所に保存します。

保存されるのは、x.html と、x_filesフォルダです。x_filesフォルダには、張り付けた図や、数式が図になったものが入ります。図がなければ、x_filesは作られません。

x.htmlは、スクリプトなど表示されないものは削除し、ヘッダ、フッタを付与して、site側にコピーします。x_filesフォルダはそのままコピーします。

フォルダ、ファイルの配置を反映したindex.htmlを作ります。

各ページには、同じ階層のインデクスを付与します。

9. Google Docsドキュメント以外のhtml

基本的には、Google Docsドキュメントで作成したドキュメントですが、中には別の方法で作成したページもサイトに含めたいと思います。

その方法は、site/下に、直接.htmを入れることにします。

siteには、SaveHml/から変換されたものと、それ以外があります。

10. 全体を再生成するとき
10.0.1. SaveHml/から変換されたもの以外

site/下に、直接.htmを置くことがあるので、消してしまわないように注意が必要です。

10.0.2. 各ページのヘッディングのインデクス

各ページの先頭部分に同じ階層のインデクスを作ります。SaveHml/以下のフォルダ、ファイル構造から、インデクスを作っていましたが、site/下に、直接.htmを置いたものが反映されません。そこで、site/側でインデクスを作成することにしました。

全体を再構成するために、SaveHml/側から変換されたものを、site/側から削除して、再変換すると、各ファイルのヘッダのインデクスは、中途半端な状態から作られ網羅しません。2度、変換をすれば各ファイルのヘッダのインデクスは完全になります。

これは、スクリプトで動的に作成する方が賢いものと思いますが、今回は単純な静的htmlで作ってみます。

11. 補助機能
11.0.1. SaveHml/側 .htmlファイルの更新日時の更新

サイトジェネレータは、SaveHml/と、site/側の対応するものの更新日を比較します。SaveHml/側が更新された場合のみ変換をします。

主にデバッグのために、SaveHml/以下の .htmlの更新日時を現時点に設定しなおします。


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