２．このレンタルサーバについて

このレンタルサーバについて

httpd はサイトをOSの管理するフォルダやファイルを使って表すものです。この原点に戻って考えます。OSの管理するフォルダ名やファイル名やディレクトリ構造は様々です。

httpd はURLからHTMLファイルを引き当てます。HTMLファイルに記述されたページは図などを含んでいます。これはブラウザがページを記述したHTMLを見てhttpdに新たに要求を送ることになります。この要求もURLです。

1. 日本語を含んだURL

元は google docsでページを書いてGASで作ったCMSに入れていたもので、ドキュメントの構造はフォルダやファイル名で表していました。

それをパソコンに移して、サイトジェネレータを作って、サーバにアップロードするイメージを作ります。サイトジェネレータの出力は、サーバなしでブラウズして見ることができます。

これをレンタルサーバに移せば終わりと思ったのですが、本来URLは日本語が通らないものでした。

URLエンコードが必要です。しかも、このサーバは shift_jis をエンコードしたものでなければならないようです。

shift_jis にすると、パソコンに置いたものはブラウズできなくなると思ったのですが、ブラウズはできます。図は表示されなくなりました。

以下の説明はパソコン上で使用するサイトジェネレータのコードに関するものです。入力は google docs で書いたドキュメントを「ファイル」「共有」「ウェブに公開」で表示されるURLを開いて「名前を付けて保存」で保存されるHTMLファイルです。Visual Studio で C#を使います。

2. shift_jis の URL エンコード

現時点では、NuGet で「System.Text.Encoding.CodePages」をプロジェクトに加えることが必要なようです。

※誤認でした。このレンタルサーバーは。概ね、コード系に係わらず、フォルダやファイルを作ると言うことのようです。レンタルサーバの管理ツールでは、UTF-8でアクセスできるフォルダやファイルが作られ、FileZilla で転送したものはSJISでアクセス可能なファイルができると言うことのようです。どちらでも、レンタルサーバの管理ツールも、FileZillaも文字化けはありません。一旦削除して FileZilla をUTF-8強制に設定して送り直した結果、すべてUTF-8でOKになりました。

HTMLにはURLエンコードしていない、日本語のファイルのパスを書けば、ブラウザが自動的にUTF-8エンコードして get をサーバに送ります。

さらに、1度、以下の関数を呼び出す必要があります。

Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);

URL は Windows のフォルダ名やファイル名から作ります。これらは C# の内部コードである UCS16 で保持されており shift_jis に変換してURLエンコードした結果が得られると解釈しました。

System.Text.Encoding enc = System.Text.Encoding.GetEncoding("shift_jis");
string part = System.Web.HttpUtility.UrlEncode(s, enc);

URLはスラッシュで区切って階層的に表現されますが、この一連のものをエンコードすることは不可でした。サイトのトップフォルダ以下のみをスラッシュがエンコードされないように個別にエンコードしました。

これは止むを得ないことだと思いますが少し残念です。UTF-8 エンコードであれば、ブラウザのアドレスバーはデコードされ日本語で表示されます。エラー表示なども日本語で正しく表示されます。

shift_jis だと、サイトのエラーページも文字化けしています。

3. スペースを含むファイル名

HTMLにはURLエンコードしていない、日本語のファイルのパスを書けば、ブラウザが自動的にUTF-8エンコードして get をサーバに送ります。

このエンコードはスペースを含んでも旨く行きます。

google docs で画像を張り付けたり、数式を書いて、HTML化すると自動的に名前が付けられたファイルができます。中には「pasted image 0(1).png」のようなスペース文字を含む名前を作ることがあります。

URL はスペースを + に置き換えるようです。良くわかりませんが、このサーバでは、スペースの入った名前にはアクセスできないようです。

ファイル名はスペースをアンダースコアに置き換えることにしました。

HTML中の参照も同様に換えます。

また、HTMLファイルの名前は、ドキュメントの名前からとられます。したがって、ドキュメントの名前にスペースは不可です。

4. index.html

並びを制御したいが特に設定は作りたくないのでフォルダ名、ファイル名の先頭に全角で番号を付けることにしました。

したがって、ol（ordered list）、li（list item）タグでは番号を付与しないようにします。

ol {list-style-type: none}

目次の階層ごとに開閉可能にするには、<details>タグ、<summary>タグを使います。

<div>

<ol>

<li>

<summary>フォルダA</summary>

<ol>

<li>ファイルA1</li>

<li>

<summary>フォルダAA</summary>

<ol>

<li>ファイルAA1</li>

<li>ファイルAA2</li>

</ol>

</details>

</li>

</ol>

</details>

</il>

</ol>

</div>

5. ページの変換

入力は google docs で書いたドキュメントを「ファイル」「共有」「ウェブに公開」で表示されるURLを開いて「名前を付けて保存」で保存されるHTMLファイルです。

保存すると、そのページに張り付けた図や、数式を図にしたものを格納したフォルダも作られます。

このページを「ウェブに公開」したHTMLページを「名前を付けて保存」すれば、「２．このレンタルサーバについて.html」ファイルと、「２．このレンタルサーバについて_files」フォルダができます。

HTML記述では同じフォルダにある図を参照するように記述されています。

6. HTMLドキュメントの操作

NuGet で HtmlAgilityPack.NetCore を追加しました。

DOMにHTMLファイルをロードして編集しセーブします。

6.1. 不要な要素の削除

必要なのは、以下の区間のようです。

<div id="contents">
:
</div>

<head> の内容は <title>以外のすべてを削除して新たに必要な設定をしました。

<body>は、id="contents" の<div>以下以外はすべて削除しました。

id="contents" の<div>からは<script>をすべて削除しました。

7. head

7.0.1. 日本語の明示

<head>タグではありませんが、その前の<html>タグの属性で日本語を指定して置きました。効能は分かりません。ASCIIやJIS7単位符号だけの文字列は UTF-8 と見なせます。UTF-8 は日本語を意味しません。日本語であることを記述することは必要だろうと考えました。

<html lang="ja">

<head>タグの領域に<meta>タグを書いてUTF-8を指定することは、このレンタルサーバでは必須でした。パソコンでブラウズする限りは不要です。

<meta charset="UTF-8">

7.0.2. リンク

次にファビコンとcssファイルのリンクを書きました。

そのhref属性で指定するURLはパソコンで直接参照しても、サーバに置いても有効でなければなりません。相対で指定することにすると、<base>を書き換える必要があって難しいので、最初からサーバのURLを書いてしまうことにしました。cssを書き換えたら、必ずサーバにアップロードして確認しなければなりません。

8. body

ページとしてブラウザに表示される内容は、ヘッダ、コンテンツ、フッタの三段とします。

ドキュメントはコンテンツの段に表示され、ヘッダ、フッタはすべてのページに同じものを付加します。

8.0.1. ヘッダ

ロゴマークと、表示しているページと同じ階層の目次を畳んで表示します。

表示しているページと同じ階層の目次は、ページごとに作成することになります。

これは、「パンくずリスト」の代わりです。

フォルダ名が見出しで、その下のHTMLファイルがページですが、フォルダ名を「パンくずリスト」にしてもクリックで開くものがありません。

8.0.2. コンテンツ

id="contents" の<div>以下がページの表示内容です。この先頭部分は長い<style>になっています。長い理由は、章番号のカウンタです。google docs が作ったhtmlでは、章番号は個別にカウンタを持っていて、1つの章番号に3つのcss記述を要するためです。

章番号はオーダーリスト（ol、li）ですが、ネストしておらず章見出しごとに閉じられています。したがって、必ずしもカウンタは必要ないわけですが、良くわからないので先送りしておきます。

8.0.3. フッタ

大見出しへのリンクと、メールアドレスを書いておきます。