第5章　Ｗｏｒｄ文書からウエブサイト原稿を作成する

5.1.1　ＨＴＭＬでは自由なスタイル設定は困難
チラシは画像化する方が良い

このようなチラシは
画像化する

送られてきた記事原稿（word文書）には画像が貼付けてあり、原稿作成者の好みのスタイルでテキスト、色設定、フォント、画像配置されています。記事としてウエブにアップロードする場合、可能な限り原稿作成者の希望するスタイルを守りたいのが基本です。
しかし、ＨＴＭＬにはＷｏｒｄほどのスタイル設定の自由さはありません。忠実に再現は不可能ではないですが、大きな労力を必要となります。
更に、印刷物と違い、閲覧者のデバイスやブラウザにより見え方が同一ではありません。
ウエブサイトには、Ａ4、B5といったサイズの概念はありません。新聞に色々な記事を配置するのに似ています。
従って、記事にするときは、ウエブサイト全体のバランスや記事作成の手間を考慮すことになります。
デザイン優先の行事案内チラシは、ワード文書をPDF化して、<a href="URL"> 文書名称</a>でリンクさせます。

5.1.3　拡張子　.docと.docx　の違い

Word2007以降では拡張子が「.docx」で、それ以前では「.doc」です。Word2007以降ではファイル保存形式にXMLベースが採用されました。そのため「.doc」＋「『x』ml」で「.docx」のようです。(出典：こちら。 )XML：マークアップ言語（タグで囲むことで構造を表現する言語）のひとつ。

ファイル保存方法が異なるので、2007以降では名前を付けて保存に「word97-2003文書（*.doc）」を選択するようになっています。上位互換【 upward compatible 】 で2007以降では2003文書を読めますが、逆はできません。

「.docx」では、構成するファイルがzipで圧縮されていますので、解凍して内容を分離できます。詳細は不明ですが、画像ファイルやテキストファイルが分離できる」とういう「ハウツー」だけを利用します。

1. サンプル文書を開くサンプル文書（docx）（別窓で開く）
2. そのdocxファイルをパソコン（例えばデスクトップ）に仮保存して下さい。ファイル名「sample (1).docx」となっています。
3. 右クリックで「名前の変更」を選び、「.zip」を追加して、「sample (1).docx.zip」とします。
4. ファイル名「sample (1).docx.zip」を右クリックします。
5. 次の画像のようにデータ構成ホルダーが展開されます。
   
6. 「word」ホルダー→「media」ホルダーをクリックすると画像ファイルがあります。
   
7. pngファイルです。これを利用します。
   
8. 「.docx」をWebページ（*.htm,*.html）で保存しても画像分離はできます。どちらの方法でもかまいません。
9. これは原稿文書がエクセル（.xlsx）、パワーポイント（.pptx）でも同様です。

5.1.4 　絶対ＵＲＬと相対ＵＲＬ
外部リンクは絶対URL、内部は相対ＵＲＬ

ＨＴＭＬ文書で、<a href="リンク先ＵＲＬ">で表わされる ハイパーリンクあるいは、画像を表示するする<img src="画像ファイルＵＲＬ">等で指定するＵＲＬの記述には絶対ＵＲＬ表示と相対ＵＲＬの2種類があります。
*絶対ＵＲＬは、「日本国千葉県千葉市・・・・」
*相対ＵＲＬは、「今居る場所の前の通り右に行き、2本目の道を左に入った３軒目」

URLとは「Uniform Resource Locator」の略称で、インターネット上に存在する情報資源（文書や画像など）の場所を指し示す技術方式です。 通常「プロトコル://ドメイン名/ディレクトリパス名/ファイル名」という形式で構成されるホームページページの住所（アドレス）のことです。絶対表示が建前です。

ところが、絶対表示ではリンク先や画像ファイルがインターネット上にないとリンクすることができません。HP管理で原稿作成している時には非常に不便です。
そこで、「ひとつ上のAAAAディレクトリ内のBBBBホルダーにあるgazou.jpgと指定するのが相対ＵＲＬです。ＨＰ管理では頻繁に使用します。
<img src="../AAA/BBBB/gazou.ipg">

ＥＣ千葉のホームページでのホルダー関係で図示すると次のようになります。「../../../」は３つ先の大通りから、gakushu横町に入り、images建物の、2019号室にある「001.jpg」のファイルを表示との意味です。

5.1.5　 ディレクトリ、ホルダ、ファイル名
日本語(全角文字）ではなく「nihongo」で

ウエブで使用するディレクトリ名、ホルダ名とファイル名を漢字を含む日本語にできると非常に便利ですが、当分は止めておきます。「jimukyoku」より「事務局」の方が遙かに管理が容易ですが・・・
「文字化け」との因果関係が不明だからです。さくらインターネットサーバでは、日本語のファイル名を読み取ることは確認しています。しかし、公式のガイドpでは次にようになっています。こちら。

日本語名のファイルをサーバに転送する場合は、いったん半角英数字に変更してから転送してください。
上記以外の文字を使用すると、次のような問題が発生することがありますのでご注意ください。
ホームページや画像が表示されない
CGIが動作しない,break ファイルが削除できない

現に、ECUのウエブページでは日本語を使用しています。そこでウエブ上で情報を得ようとしましたが、断片的な情報だけでしたので諦めました。ＥＣ千葉のホームページでは「半角英数字」を使用しています。

webページで保存する選択肢

ワードをwebページで保存する選択肢は、次の表のように種類があります。

名前を付けて保存

画像ファイルの拡張子の違い
「.jpg」、「.png」、「.gif」

JPG（「.jpg」）は、（Joint Photographic Experts Group）がプロのカメラマンの標準となるべく開発したファイル形式です。ファイル内の冗長性を見つけて圧縮するZIP形式のように、JPGは画像データをピクセルと呼ばれるタイルに分割することでデータを圧縮します。この圧縮は非可逆圧縮です。つまり、一度圧縮してしまうと元には復元できないのです。しかしながら、大きな画像を驚くほど小さいデータにすることができます。また、JPEGは圧縮率を自由に設定（普通は2：1から100：1まで）することができます。

GIF （「.gif」）は、（Graphics Interchange Format）の略です。GIFはJPEGと同じように古くからあるファイル形式です。GIFは写真以外の画像をサポートするのに使われていました。GIFはTIFFファイルが用いるのと同じ、LZW圧縮を採用しています。この技術は一度、特許の問題で論争を起こしましたが、今では全ての特許の有効期限が切れているので問題なく使うことができます

PNG（「.png」）は、Portable Network Graphicsの略語です。
一番の特徴は、可逆圧縮であり、透明を色として持つことができると言う点です。テキストや線画など色の境界がはっきりしたイメージに適しています。なので、JPGのように保存をしても簡単に画像は劣化しないという特徴があります。
そして、JPGとおなじようにフルカラー対応ですが、ファイルサイズはJPGより大きくなりがちです。

非常に乱暴な分類ですが

• 写真,グラデーションのある画像など、色数が多い場合 → jpg
• PC画面キャプチャ,図表,線画など、色数が少ない画像の場合 → png
• 画像ファイルサイズを気にせず、画質重視の場合 → png
• gifは動画用。静止画にはpngかjpg

上の情報はかなり断片的です。詳しくは、ウエブ等で調査して下さい。ＥＣ千葉のホームページでは、画質にこだわる必然性は少ないようですが・・・

画像ファイルの拡張子の小文字化
JPG→jpg が必要

アルファベットの大文字と小文字の区別

デジカメ、スマホの写真をパソコンに取り込みインターネット上にアップロードするには、画像の拡張子を「JPG→jpg」に変換する必要があります。

マイクロソフトのMS-DOSとwindowsでは、大文字と小文字を区別しません。パソコン（windows）で内蔵の画像を見ている時には、拡張子「.JPG」と「.jpg」は混在していても、区別されされないので問題はありません。しかし、Apach やUNIX で動作するインターネットサーバでは大文字/小文字を区別します。ＥＣ千葉のホームページがあるさくらインターネットサーバのOSは、UNIX系ですので大文字/小文字を区別します。従って、サーバにアップロードする時に、拡張子をJPG→jpg に変換し統一しておくと混乱を避けることができます。

マイクロソフトの「IIS」ソフトのサーバは大文字と小文字を区別しません。「London.jpg」と「london.jpg」が区別できません。そのためか、英語圏等ではファイル名にも小文字を用いるようにしているようです。（ウエブページの引用：こちら。）ＥＣ千葉のホームページでは、「EMS」と「ems」を使い分けています。

Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg" or "london.jpg".
If you use a mix of upper and lower case, you have to be extremely consistent. If you move from a case insensitive to a case sensitive server, even small errors will break your web!
To avoid these problems, always use lower case file names.

拡張子の小文字化（JPG→jpg）する方法

windowsのパソコンでは大文字/小文字区別がないので、拡張子「.JPG」 ファイルの名前変更で「.jpg」としても反応せず変更できません。次の方法があります。

１．拡張子を（JPG→jpg）変換する命令文のバッチファイルを作成し、「.JPG」 を含むホルダーに保存して命令を実行すると変換されます。命令文は「ren *.JPG *.jpg」だけです。「ren」は、「rename]でもOKです。「*.JPG」を「*.jpg」に置き換える命令です。簡単なので試して下さい。
ウエブの一例は、こちら。

リネーム君ロゴ

２．もうひとつは、無料のソフトを導入して行う方法です。HP管理人は、そのフォルダー内ののファイル名を拡張子だけでなく、連番、名前自体、接頭語や接尾語も変更できる「リネーム君」を使っています。説明とDLは、こちらから。

画像編集ソフトPicture Manager のダウンロード

このソフトPicture Managerは多機能ではないが、操作がシンプルで使い勝手の良い優れたものでした。Picture Manager は Office 2013 以降のバージョンには含まれていませんが、スタンドアロンアプリとしてインストールできます。
一部の方から送られてくる原稿の画像ファイルが巨大なので、ここに紹介するものです。ダウンロードして活用ください。マイクロソフトサポート記事

文字化けと文字コード
EC千葉のホームページは「Unicode」と「UTF-8」を使用

ウエブページ閲覧時や受信メールで、時々判読不能な「文字化け」現象があります。HTML文書作成し、<head>部に<meta charset="UTF-8">のように使用している文字コードをブラウザーに指示する必要があります。ブラウザは指定された文字コード（対応表）に基づき表示をします。ところが指示と実際の使われている文字コードが違うと「文字化け」となります。これは、日本語に特に起こる現象で、「mojibake」で通用するとも言われているます。
コンピュータに使用する言葉はASCIIと呼ばれる英語のコード（記号を含め128個）でスタートしました。そこに、仏語や独語等の言語を含む「Latin-1」等のコードができました。ところが日本語、韓国語、中国語のような半角（1バイト）文字ではなく、数万の漢字がある全角文字（2バイト）を使用するのは非常に複雑です。そう言えば、最初のころのコンピュータは「半角のカタカナ」しか表示できなかったことを思い出してください。処理速度や記憶容量が理由だったようです。
そのような歴史的な背景から、日本語（特に漢字）を扱うコードには、JISで定めた漢字コード、Windowsで採用された「Shift_JIS」、主にUNIX系での「EUC_JP」があります。更に、最近主流になっている「Unicode」があります。これが、日本語特有と言われる原因になっているのではと想像しています。
情報通信技術が発達して国際的な活動が増えると，今度は，国や地域別に作られていた文字コードをまとめて国際的な統一文字コードを作ろうということになりました。開発された国際文字コードがISO/IEC 10646，一般には「Unicode」として知られるものです。しかし一方で国別の規格がすでにあるわけですから，そこと互換性をどう保つかが問題になります。さらに，Unicode自体も拡張を重ねており，またUTF-16やUTF-8といった各種の符号化方式が作られ，当初の思惑から離れて非常に複雑なものになっています。最近は日本初の絵文字も採用されているとのことです。
以上、ウエブのあちこちの記事を参考に記載しましたが今一つ分からないのが実感です。
結論をいうとEC千葉のホームページは、「Unicode」を使い「UTF-8」の文字符号化方式を使用しています。
ちなみに、現在日本語メールとして広く一般に利用されている文字コードはJISコードであり、ほとんどのメールではこれが利用されている。シフトJISやEUCは、Webページの制作などではまだ利用されているが、メール環境ではほとんど利用されていない。これらのコードは、ほかの言語との互換性や、多言語が同一メッセージ中に混在するようなメールではうまく利用できないからです。