Page Top

Page Top


    第26章 辞典づくりとその継承のための「実務マニュアル(要約・基礎編)」


     Top page | 総目次(全章全節) | ご覧のページ


       第26章・目次
      第1節: はじめに読んで(本章の概要)
      第2節: ドメインとサーバーの契約延長(年1回更新)と支払い
        2-1 ドメイン、その「ユーザー専用ページ」へのアクセス法、契約の延長と支払い法
        2-2 サーバー、その「ユーザー専用ページ」へのアクセス法、契約の延長と支払い法
      第3節: 「ウェブ海洋辞典」編さんに当たっての基本事項・基礎知識(階層構造など)
      第4節: タグ命令言語による「ウェブ辞典」の作成・アップデートの方法
        4-1 タグをもって作成するのがベスト
        4-2 作成からウェブ閲覧までの大まかな流れ
        4-3 タグ命令による作成のための予備知識
        4-4 タグ命令による作成演習
        4-5 ページのアップデートの基礎知識
        4-6 辞典内外のページとのリンク、その他
      第5節: 「ftpソフト」によるファイル・画像などのサーバーへのアップロード法
      第6節: その他の重要事項について

      [参考資料] 「実務マニュアル(詳細編)」 [作成中]



第4節 タグ命令言語による「ウェブ辞典」の作成・アップデートの方法
4-1 タグをもって作成するのがベスト
4-1-1 ホームページ「海洋総合辞典」は、一般市場で流通するウェブ作成専用ソフトでは作成されていない
    ●  海洋辞典をウェブページまたはホームページ(以下、HPという)作成専用ソフトで作成・更新を行った経験が全くない。 「ホームページビルダー」などのいろいろな専用ソフトがあろうが、具体的には知らないし、使ったこともない。また、「ムームー ドメイン社」などが提供するビルダーは月1,000円も要するもので、一般企業・商店・レストランなどのHP作りには都合良いであろうが、 辞典づくりにとって最適なツールとは思えない。レンタル・サーバー会社の「Lolipop社」が提供する有料の作成ソフトなども使ったこともない。

      これまで辞典づくりは全てタグという命令言語(HTML言語という)を用いて作成してきた。大変簡単なHP作成方式である。 「HTML」とは「Hyper Text Markup Language」の略で、ウェブページを書くための言語(記述言語)の一つとされる。

      「html言語」で書かれたファイル(例えば海洋辞典の起点となる「index.html」ファイル)をクリックして、ウェブ・ブラウザ (htmlファイルをネット画面で表示させるためのソフト。例えばグーグル、エッジなど)で閲覧するとネット上で見るいつもの見慣れた画面となる。ブラウザは、いわば「html言語」 で書かれたテキスト(またはテキストファイル)を翻訳してネット画面上に表示させるソフトといえる。 (ウェブ画面上にカーソルを置きマウスを右クリックするとプルダウンメニューに「ページのソースを表示」が表示される。 それをクリックすると、そのページのソース=「html言語」が表示される)。

      「html言語」によるファイル (htmlファイル。拡張子に「.html」をもつファイルのこと) を作成するには、Windowsパソコン に標準装備される、テキスト作成用ソフトの「テキストエディター」と呼ばれる「メモ帳」で十分である。 最初に「メモ帳」を立ち上げ、タグ命令言語を用いてテキストフィアル(拡張子に「.txt」をもつファイル)を作成する。 それを「htmlファイル」へ変換するために「名付けて保存」し、ブラウザで見ることになる(詳細後述)。

    ● 過去に作成してきた海洋辞典の「htmlファイル」、あるいは「txtファイル」をHP作成専用ソフトに取り込んでコンテンツを更新した場合、 どんな不都合が発生し、それにどう対処すべきか、その経験がないので全く分からない。タグ命令言語(html言語)で書かれた それらの文書ファイルは、恐らくわけの分からないものに変換されてしまい、収拾のつかない状態になるものと想像する。 HP作成専用ソフトを上手く使いこなしつつ更新できるのか大いに懸念するところである。  (タグ命令言語による作成・更新に25年以上も慣れてきたので、HP専用ソフトを用いる必要性がなかった)。

    ● 通常、市場流通ソフトは何年かに一度の頻度でアップデートされて行く。ソフトがリニューアルされるたびに、海洋辞典の既存 htmlファイルを問題なく更新し続けられるのか。ソフトによっては5年や10年前の既存ファイルを正常に扱えなくなることもありうる。また、 全く別のHP作成専用ソフトに乗り換える場合、ソフト間の整合性について何の問題も生じることなく、既存htmlファイルの更新作業を 続行できるのか否かも心配である。

      極シンプルにして少量のタグ命令言語をもって「txtファイル」を作成し (あるいは更新し) 、「htmlファイル」に 変換するだけでウェブ辞典を作成・更新できていたにもかかわらず、専用ソフトを使うことによって返ってマスターすべき操作事項が 多くなり、あるいは操作が複雑化して、大きな不便や混乱に悩まされることを避けてきた。



4-1-2 タグ命令言語を用いてのウェブ作成法については、1時間もあればざっくりとその基本を理解できる
    タグ命令言語でのHP作成入門書の通読をぜひお薦めします。例えば、図書の例として、
    (1) 「HTML&CGI入門」、笹木・太田・藤崎共著、エーアイ出版発行、1996年、2200円。
    (2) 「超図解 HTMLタグ辞典(第2版)」、石橋・鐘ヶ江・エクスメディア共著、(株)エクスメディア発行、2002年、1480円。
    (3) 「超図解 HTML&CSS辞典」、ユニゾン著、(株)エクスメディア発行、2006年、1900円。
    (4) 「はじめてのホームページ HTML5入門」、荒石正二、(株)秀和システム発行、2011年、1380円。
    (5) 「今すぐ使えるかんたん ホームページHTML&CSS入門」、リブロワークス著、技術評論社、2016、1580円。
    (6) 「ゼロからわかる HTML&CSS超入門」、太木裕子・山本和泉著、技術評論社、1880円。

      2024年の現在まで上記(3)の入門書を最も愛用してきた。その他多数の基本書がある。 一般書店での購入や公共図書館からの貸し出しをえて通読することができよう。また、アマゾン・ドット・コムなどで「HTML入門書」、「ホームページ作成入門書」、 「ホームページのつくり方」などのキーワードで検索すれば、安価な入門書を購入することもできよう。 (HTML言語=タグ命令言語によるウェブページ作成の基本は時を経てもほとんど変わらない。25年以上も以前に作成した「html ファイル」は今も何の支障もなくネット上で閲覧できる)



4-1-3 300ページの入門書であっても、その要点は最初の数十ページに記述されている
      残りのページには、何百種とあるタグ命令言語とウェブ上での表示法(見え方)について解説される。必要時に紐解いてそれらを 参照または学習すればよいことである。即ち、必要の都度に、入門書記載のいろいろなタグ命令言語とその用例を見ながら、トライ・アンド・エラー方式 で理解を深め、少しずつ使いこなしていけば事足りる。 「海洋辞典」の各ページのほとんどはごくシンプルな命令言語で記述されている。また、使用されるタグ言語数も極く限られており、 後述の通りウェブページの新規作成も、また既存ページのアップデートもごく簡単にできる。

      タグ命令言語が新規に追加されたり部分的に廃止されたりしても、殆ど気にすることはない。 「海洋辞典」で用いられてきた主なタグ命令言語の種類は20~30であり、時を経ても殆ど変わって来なかった。 故に、週末毎の学習においてそれら言語の使い方にすっかり慣れてしまうはずである。



4-1-4 タグ命令言語によるウェブ作成のメリットについて: 簡単で安定していること
    ● タグ命令言語をもって作成・更新するのが長期に見て最も安定している。時代と共にパソコンのハードウェア、基本ソフト(OS)、 その他アプリケーションやソフトウェアがいかに変遷して行こうとも、タグ命令言語による「htmlファイル」(ウェブページ)の作成方法は、そんな 時代変化に殆ど左右されることはない。 (この25年間の体験からして)

      汎用性が常に維持されるタグ命令言語を用いて「テキストファイル」(拡張子として「.txt」が付くファイルで、「メモ帳」で作成する)」 で作成しておけば、「htmlファイル」(拡張子として「.html」が付くファイル)に変換することは、どんなに時を経ても可能であるといえる。 ウェブページの作成・更新を今後半永久的に続けられることになる(世界のネット上のページの殆どは「html言語」で記述されている)。

    ● タグ命令言語での「テキストファイル」の作成は、パソコンメーカーが異なっても全てのパソコンで可能である。また、パソコン を10年後に新機種に乗り換えても、また辞典編纂者の交替がなされても、何の支障もなく円滑に作成・更新の継続が可能である。 タグ命令言語やその使い方はいつの時代になってもぶれることなく基本的に不変であり、ウェブページを簡単に作成・更新し続けられるのが 最大の強みである。

        結論として、タグ命令言語での「txtファイル」の作成・「htmlファイル」への変換による海洋辞典の継続的作成・更新を強く お薦めします。

    ● ウェブ画面での多言語表示が画期的に進化したことの一例: かつてスペイン語、フランス語などがもつ特殊文字 (例えば、ÀàâäҪçéèêîïôöùûœñなど)はネット画面上文字化けしていた。止む無く、それらの特殊文字を写真に撮って、それを画像として 「txtファイル」に貼り付けた後、「htmlファイル」に変換していた。だが、ある時点から 完全に解消された。

      ネットで解決策を検索したところ、ある方法を知ることになった。ある一行のタグ命令を「txtファイル」に記入(コピー&ペースト) した後、「htmlファイル」へ変換するに際しては「文字コード」を「UTF-8」と指定するだけで、ブラウザはそれら特殊文字を正常に 画面表示してくれるようになった。まるで魔法の杖のようであった。タグ命令言語作成法と画面表示法が画期的に進歩し、多言語に対応できるようになった お陰である。







4-2 ホームページの新規作成からウェブ閲覧までの大まかな流れ
    (1) 前提となるパソコン環境について。自宅に普通のパソコン(辞典づくりにはデスクトップタイプが作業しやすい)があって、高速通信回線に接続され、インターネット が快適にできるという普通の状態が保持されていること。「Google Chrome」か「Microsoft Edge」などのウェブ閲覧ソフト(ブラウザ) がインストールされ、ウェブページが閲覧でき、メールのやりとりもできるという、現代では普通のネット接続環境が あれば十分である。

      パソコン本体内臓の記憶容量は大きいものにこしたことはない。「海洋辞典」の全データのバックアップのため、また膨大 となるかもしれない画像データの収納などのため、外部取り付けハードディスクの容量も多いにこしたことはない。 プリンターとの接続、イラスト作成ソフト、画像加工ソフトなど、どなたでも一般に標準装備されておられよう。 また高額でなくともコンパクトなデジタル・カメラ(+ SDカード)も必需品となろう。

    (2) タグ命令言語によるウェブ作成に関する前述のような入門書1~2冊をざっと通読すれば(最初の2~30ページだけでも 通読すれば)、「html言語」による作成の基本的な概念や仕組みを理解できよう。

    (3) 作成した「htmlファイル」をネット上で閲覧するには、ネット上のアドレスである「ドメイン」(IPアドレス、URL、 http://www.oceandictionary.jpなどという)を登録し、その登録の更新を続ける必要がある。 「海洋辞典」はドメイン登録済みである。ドメインは「http://www.oceandictionary.jp」 または「http://oceandictionary.jp」である。 (年間5000円余りの契約料の支払い。「ムームードメイン社」を通じてJPドメインの管理団体に登録している)。
    辞典づくりを後継編さん者にバトンリレーする際のドメインやサーバーの契約延長・支払い方法については、別節で既述 した通りである。
    * URL=Uniform Resource Locatorの略。ウェブページが所在する場所を指定するネット上の住所。

    (4)同時にまた、24時間常時世界中のパソコンとつながるためには特別の専用サーバーが必要である。 自宅に24時間365日何十年もネットにつないでおく専用サーバーをセットするのも一つの方法であるが、個人がこれをすることは極めて 大変である。ウイルス対策、深刻な障害発生時での対応などに専門的知識が必要とされ、その他に多大の時間・金、諸々の労力が 求められる(自宅にこのサーバーシステムを設営するのは全く薦められない)。従って、ウイルス対策も十分なされ、サービスも 行き届いているレンタル・サーバーにウェブ辞典の全データをアップロード(送信)し、24時間世界中のパソコンとオンライン接続させるのが 最も一般的であり、安全安心かつ合理的で賢明な方法である。

      いずれにせよ、全「htmlファイル」をアップし、キープしておくためのサーバーをレンタルする (ホスティングサービス会社と契約している)。現在「ロリポップ社 /Lolipop」と契約し、 200GB容量のサーバーをレンタルしている。

      余談だが、サーバーには「htmlファイル」だけでなく、「txtファイル」もアップしているので、サーバー容量を2倍近く食っている。 後者をアップしなければ、容量にはもっと余裕が生まれる(後者をもアップしても容量に余裕が十分ある)。両ファイルのアップ は単純にテクニカルな理由によるものであるが、アップしておけば万が一のバックアップにはなる。ファイルの更新作業は自身のパソコン上で 同じフォルダー内でなされるのがベストであるが、「htmlファイル」と「txtファイル」を選り分けてサーバーにアップするのが 面倒なため、両者を同時にアップしてきただけである。
    * 「x….jpg(またはx….gif)」の画像ファイル(xから始まる画像)は、サーバーには一切アップしていない。それらはローカルディレクトリー (自宅のパソコン内メモリーや外付けハードディスク)に保存しているのみ。

     「ドメイン登録のための契約」と「レンタル・サーバー契約」の継続は車の両輪であり、どちらも不可欠である。サーバー契約料は 年間5,000円余り。ドメインもサーバーも1年単位で更新する。毎年「所得税の確定申告」時期(2月中旬~3月中旬) になれば、忘れないで必ず、2月中を目途に契約延長・支払いを完了する(期限は3月下旬近く)。 家族ならびに後継編さん者に渇望したい手続きなどは既述の通りである。

    (5) 新規作成・更新した「htmlファイル」を、「ftpソフトまたはffftpソフト」でサーバーにアップロード(送信)する。 ソフトはネット上で提供されるフリーソフトをダウンロードして利用してきた。「Lolipop社」もそれを提供しているが使ったことはない。 ソフトを使用するには、まずホスト名、ホストアドレス、ユーザー名、パスワードなどを入力して新規に設定することが求められる。

      例えば、自宅のPC内にある「txtファイル」に加筆修正をほどこし、 それを「htmlファイル」に変換し、ftpソフトで送信すれば、サーバー内で当該「htmlファイル」が上書きされ、当該ページが即座に更新される。「htmlファイル」に直接加筆修正はできない(「Lolipop社」が提供するグーペとかいうソフトで 可能とされるようだが、使ったことはない。一般論として、いろいろなソフトを使うことで見栄えと使い勝手を便利にすればするほど、 次の後継編纂者が理解しマスターすべき事項が増えて行くことになる。当然、諸々の申し送り事項が複雑多岐となる。現在は、最も シンプルで安定した辞典づくり・更新法を採用している。今後情報技術の進歩があっても、恐らく50年後も変わることのない ウェブページ作成法といえる。

    (6) ネットを立ち上げ、「海洋辞典」の当該上書き済みページにアクセスすると、データが更新されていることが分かる。 作業に慣れれば、「txtファイル」上で更新作業をしながら、変換した「htmlファイル」を随時アップロードし、ほとんど同時に ネット上で更新内容を確認できる。しかし、「ftpソフト」によるサーバーとの常時接続は、セキュリティ上好ましくないとの観点から、 必要時にのみ接続しアップロードしてきた。







4-3.タグ命令記号によるウェブページの作り方の基本

    (1) 「HTML言語(タグ形式の命令言語)」で書かれた「htmlファイル」(拡張子「.html」のファイル)をブラウザで閲覧すると ネット仕様の画面となる。「htmlファイル」を作成するには、まずWindowsパソコンに標準装備されているテキスト作成ソフトの 「メモ帳」を立ち上げ、タグ命令言語を用いながら「txtフィアル」を作成する。それを「htmlファイル」に変換する (拡張子「.txt」を「.html」に変更して、名付けて保存する)。その時「文字コード」を「UTF-8」と指定しておく。その後、「html ファイル」をブラウザで閲覧することになる。(「htmlファイル」からいきなり作成はできない)

    (2) 「メモ帳」でなくとも、マイクロソフトの「ワード」を立ち上げ、文章を普通に書いて、それをテキストファイル  (拡張子「.txt」のファイル) に名付けて保存する。そこに半角英数字でタグ命令言語を書き込む。それを上書きしておいた後に、 「htmlファイル」に変換し、それをクリックしブラウザで閲覧しても同じであるという。だが、「メモ帳」によるのが最も シンプルで扱いやすい。

    (3) タグ(すなわち、<>、</>など)の中に命令言語を書くことによって、ブラウザへ表示方法(見え方、情報の翻訳方法) を指示・命令する。大きくは2種類の命令(コマンド)がある。
    ・ <p>、<br>、<hr>のように、単独のタグでもって独立して命令するもの(独立型コマンド)。
    ・ 他は、 <b>・・・</b>、<i>・・・</i>、<font color="red">・・・・・</font>のように、文章・字句の間に 挟み込むようにして、2つのタグで記述する(範囲指定型)。
    例えば <i>・・・・</i>では、タグで挟まれた文章・字句は斜めの文字(イタリック体)で表示される。<b>・・・</b> では太字(ブロック体)で表示される。このように、タグとは、基本的にペアでもってブラウザへの画面表示方法について命令する 言語のことである。

      重要なことは、上記の<b></b>などのタグ(<、>、/を含めて)は全て半角英数字で書くこと。 ただし、英字は大文字でも小文字でもよい。また、原則として <b>・・・</b>のように文章・字句をはさむこと。 例えば、<FONT COLOR="red">と</FONT COLOR="red">(後者のタグは</FONT>と省略形にできる)とで挟まれた字句は、 赤色にて表示される。<i>と</i>との間の文字は斜体となる。 繰り返すが、タグの命令言語は大文字でも小文字でもよいが、全ての文字・数字や記号は半角である。<></>自身も、 数字やスペースも、さらに%などの記号も全て半角である。

    (4) パソコンに標準装備されている「メモ帳」を起動させ、何でもよいから1行の文を書いてみる。そして、その文章の両側 (文頭と末尾)にタグ、例えば、文章の文頭に<b>、末尾に</b>という命令記号を付けてみる。
    タグをもって、文字を大きくしたり、斜体文字にしたり、下線を引いたり、改行したり、表を作成したり、文字やページに色を施し たり、枠を作成したり、画像を張り付けたり、他のページや外部のウェブサイトへジャンプ(リンク)したりもできる。 文章の末尾に<br>を付けると改行する命令となる。代わりに<p>を付けると、1行あけての改行の命令となる。 <br>、<p>は単独でも使用可能なタグである。

    (5) 例えば、新規ページで一つの文章にタグを書き終えたら、ツールバーの「ファイル」にある「名前を付けて保存」を選ぶ。 次いで、「*.txt」の「 * 」に、例えば「sample」という名前を付けて、「sample.txt」へと書き換える。 即ち、半角英数字にてファイル名を付け、ファイルの特性を指定する拡張子を「.txt」にして、「txtファイル」として保存する。

    (6) 次にこの「txtフィアル」を「htmlフィアル」へ変換する。再度ツールバーの「ファイル」にある「名前を付けて保存」を選ぶ。 ファイル名の「.txt」の代わりに拡張子「.html」を付け、保存する。即ち、「sample」に拡張子「.html」を付けて「sample.html」 として保存する。この時「文字コード」として「UTF-8」を選択しておけば、スペイン語やフランス語の特殊文字が書き込まれていても、 ウェブ上で文字化けすることはない。もっとも、下記4-4の作成事例を参照のこと。さて、ファイルの名は同じだが、拡張子が 異なる「txtファイル」(sample.txt)と 「htmlファイル」(sample.html) の2つのファイル ができる。そして、「sample.html」ファイルをクリックしブラウザを起動させて見ると、ウェブページ仕様で表示される。

    (7) 「海洋辞典」づくりに必要なタグ命令言語はそう多くない。通常使用するタグは、20~30程である。他のタグを使用したければ、 その都度入門書などを参照すればこと足りる。

    ・ 「txtファイル」をクリックして「メモ帳」を立ち上げファイルを開くと作業が続行できる。文章を加筆修正後、 再び「htmlファイル」に変換し、ブラウザで見るとコンテンツがアップデートされている。「htmlファイル」をクリック してネット画面を表示させ、画面上で右クリックして「ページのソースを表示」をクリックすると、そのページのコンテンツと タグ使用状況などを知ることができる(つまり、「txtファイル」が表示される)。今日ではネット上のほとんどのページはタグ命令 言語が多用され複雑に組み合わされているが、「海洋辞典」のそれは極めてシンプルなタグ構成になっている(使用されるタグの種類は 多いように見えるが実際はそれほど多くはない)。







4-4.タグによる作成演習について

  新規にウェブページを作成し、サーバーにアップロードするやり方の基本を記したい。
(1)  テキスト文書作成ソフト「メモ帳」を立ち上げ、その白紙ページに事例として、以下に示す<html>、</html>を含んで、 <html>から</html>までの全てのタグや文章を書き込んでみよう。あるいは全てをコピー&ペーストして白紙ページに貼り付け てみよう。仮にそのページ名を「sample.txt」と名付け、さらに「sample.html」へと変換する。後者のファイルをクリックしてブラウザで 見るとどう表示されるか是非ご覧いただきたい。

  ただし、タグの<>、</>の全てを半角に書きなおしてほしい。全角で書いた場合、タグ機能を果たさない(ここでは機能を果たさないように 故意に全角としてあるので)。ただし、下記では、各行の末尾にある<BR>と<P>(改行のためのタグ)については、タグを機能させるために 半角で記載されている。

    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" CONTENT="海洋辞典 Ocean Dictionary, 海洋辞典づくり回顧雑録, 第18章「実務マニュアル (要約・基礎編)」">
    <TITLE>「実務マニュアル(要約・基礎編)」</TITLE>
    <body>
    <ul> タグを使って作成したサンプルです。
    1. 文字を書いてみる。「ocean」を書く。
    2. <font size="5">文字を大きくする。</font>
    3. <font color="red">文字の色を赤くする。</font>
    4. <b>ゴシック体にする。</b>
    5. 下に一行あける。

    6. <i>イタリック体(斜字)にする。</i>
    7. <u>下線をひく。</u>
    <hr>
    <center>8. 上下の線ではさみこむ。</center>
    <hr width="50%" font color="green">
    <img src="ocean2.jpg">
    9. 上に「ocean2」という名前の画像を表示する。
    10. <a href="ocean1.html">「ocean1.html」</a>と名付けたファイルとリンクする(そのファイルにジャンプする)。
    11. インターネット上のサイト<a href="http://www.yahoo.co.jp">「ヤフー」</a>のトップページとリンクする。
    </ul>
    </body>
    </html>



HTMLファイルの構成についての説明

    <html> HTMLという言語で書かれていることを示す。最下の</html>と対になっている。
     <head> ファイル情報についての記入であることを示す。</head>と対になっている。
      <title>・・・</title> ページのタイトルを記入する。日本語でも、日英混合でもよい。
     </head>
    <body> ページの本文の開始を示す。</body>と対になっている。
    ・・・・・・・・・・・・  (本文)
    ・・・・・・・・・・・・  (本文)
    </body> 本文の終了を示す。
    </html> HTML言語ファイルの終わりを示す。


[留意事項]
(1) 決まり事として、最初と最後の<html>と</html>は、その間にはさまれた文章は「html言語」で書かれている「htmlファイル」 であることを示す。必要不可欠の命令タグ。
  ・ <body>と</body>で挟まれた文章がこのページの本文であることをブラウザへ伝える命令言語である。 いずれもページ作成時はこれらを必ず記入する。なお<html>と<body>の間には、多言語表示を可能にするためのタグ<meta>、 ページの内容を簡単に示すためのタグ<meta>、ページのタイトルを記載するためのタグ<title>、などが記載される。

(2) 新ページを書き終えたらファイルを保存する。「ファイル」のプルダウンメニューの中の「名前を付けて保存」を選択する。 そして、「ファイル名」にファイル名を書き込み、ファイルの種類をそのまま「テキスト文書(拡張子「.txt」)」とし、「文字コード」 として「UFT-8」を選ぶ。
・ ファイル名は半角英数字のみにて表記すること。例えば名を「sample」として「保存」すると、そのファイルは拡張子「.txt」をもつ ファイル「sample.txt」となる。文字数は8文字以内、それ以上の場合は「aabbcc_ddeeff.html」のように「_」でつなぐ。 =、/、%などの記号は使えないなどの基本的約束がある。

(3) 次にその「txtファイル」を「htmlファイル」へと変換する。「名前を付けて保存する」。今度は拡張子「.txt」を「.html」 に書き換えて保存する。つまり、ファイル形式を「sample.txt」から「sample.html」へと変換する。 「ファイル」のプルダウンメニューの中の「名前を付けて保存」を選択し、ファイル名の「.txt」を「.html」へ書き換えた後に 「保存」する。ファイルの名は同じだが、「txtファイル」(sample.txt)と 「htmlファイル」(sample.html)の拡張子が異なる 2つのファイルができることになる。

(4) 「sample.html」ファイルをクリックすると、ブラウザが自動的に立ち上がり、ネッ上でホームページを閲覧するの と同じ画面が表示される。因みに、「sample」ページの画面は下記のようなものとなる。各タグ命令言語がブラウザにどんな表示を指示して いるかが理解できる。



    タグを使って作成したサンプルです。
    1. 文字を書いてみる。「ocean」を書く。
    2. 文字を大きくする。
    3. 文字の色を赤くする。
    4. ゴシック体にする。
    5. 下に一行あける。

    6. イタリック体(斜字)にする。
    7. 下線をひく。



    8. 上下の線ではさみこむ。




    9. 上に「海」という名前の画像を表示する。
    10. 「第1節 はじめに読んで」と名付けたファイルとリンクさせる。
    11. インターネット上のサイト「ヤフー」のトップページとリンクする。


(5)本辞典づくりで使用される基本的なタグ命令言語は意識的に少なくしてきた。必要に応じて、辞典内の「txtファイル」などから のページから適宜コピー&ペ―ストしてタグを拝借することも可能である。ただし、通常閲覧するウェブページのソース を見ると複雑なタグ命令言語が使われていて辞典づくりには殆ど応用しがたい。







4-5 ページのアップデート方法(既存ファイルの加筆修正など)について

    (1) 「海洋辞典」の既存ファイルを更新(アップデート)する方法はいたって簡単である。例えば、「txt ファイル」の「eja.txt」(フォルダー「eejj」の下位の階層にあるフォルダー「ej-abc」の中に ある)」を開く。「eja.txt」ファイルをクリックすれば、自動的に「メモ帳」ソフトが立ち上がり、ファイルが開く。

    重要なのは、既存ファイルをアップデートする場合、必ず拡張子「.txt」が付くファイルを立ち上げてから、更新作業をすること。 仮に「htmlファイル」である「eja.html」をクリックして立ち上げても、ネット画面が立ち上がるだけであり、そこでは更新作業 はできない。

    (2) 次に、「eja.txt」で加筆修正を行なった後、まずはツールバーの「ファイル」の中の「上書き保存」をクリックして保存しておく(これを常に習慣化することが大事となる)。 続いて、その「txtファイル」を「htmlファイル」に変換する。即ち、その「txtファイル」を「名前を付けて保存」するが、その時は拡張子「.html」を ファイル名の末尾に付けて保存する。これで「eja.html」ファイルに上書き保存される。文字コードとして「UFT-8」を指定されていない場合は、 その指定をしておく。

    ・ 画面上で更新内容を確認したい場合は、この「htmlファイル」を立ち上げる。例えば、修正後の「eja.html」ファイルを クリックすれば、ブラウザが立ち上がり、画面上で英和海洋辞典の見出し語「A」の画面が表示されるので、更新されているか確認できる。

    (3) ところで、「メモ帳」の画面上に表示されているファイルは、もはや当初の「eja.txt」ファイルではなく、変換後の 「eja.html」という「html形式ファイル」となっている。 この「htmlファイル」画面上で、そのまま続行してさらに加筆修正作業を行うことができる。

    (4) その作業後、その「htmlファイル」を「上書き保存」してクリックすれば、見出し語「A」の画面が再び立ち上がり、データは アップデートされている。あるいは、見出し語「A」のネット画面がそのまま残されているのであれば (通常残されている)、 その画面上にあるツールバーの「表示」の「最新の情報に更新」ボタンをクリックすれば、更新済みの最新画面が表示される。 その後加筆修正を繰り返せば、画面上で確認しながら「A」の内容のアップデートをずっと続けることができる。

    (5) 「txtファイル」を「htmlファイル」に変換した後の上記のような一連の加筆修正作業は「eja.htmlファイル」上でなされて いるということである(最初は「eja.txt」ファイルであったが)。

    ・ ここで作業を終了するに当たっては、当該「eja.html」ファイル自身を 「上書き保存」しておくと同時に、更に必ず忘れずにその「htmlファイル」をして「名付けて保存」し、「eja.txt」ファイルに変換しておく ことである。即ち、今度は「htmlファイル」から「txtファイル」に変換し、「txtファイル」を上書き保存して最新のデータに 書き換えておくことが不可欠となる。

    (6) このように、「htmlファイル」上で更新作業を行なっていた場合、「htmlファイル」上でのデータの「上書き保存」とともに、さらに 「htmlファイル」を「名付けて保存」し「txtファイル」へと変換しておかないと、次回の更新作業時に大きな不都合が生じる。

    ・ この変換作業を怠れば、直近まで行なっていた更新内容が「txtファイル」上においては未だ何の上書き保存もなされて いないのと同じである。次回の更新作業は必ず「txtファイル」を立ち上げることからなされる。その「txtファイル」が上書き保存措置が なされていない旧ファイルのままとなっていることから、不都合が生じる。「htmlファイル」からいきなり更新作業はできない。

    (7) 万一このような不都合を生じた場合の対処法について。直近の更新作業時に「htmlファイル」については上書き保存をしておいた はずなので、当該「htmlファイル」をクリックして立ち上げ、ウェブ画面を表示する。そして、ツールバーの「表示」の「ソースの表示」を 表示させ、<html>から</html>までの全ての内容を、更新されていなかった「旧txtファイル」にコピー&ペーストして、 ページ内容を全面的に入れ換えた上で、改めて上書き保存し、新たに「txtファイル」を作成することから始める他ない。

    (8) 時々、更新作業を「txtファイル」、「htmlファイル」のいずれで行ったのか忘れることがあり、うっかりしてこの不都合を生じさ せてしまう。両ファイルでの上書き保存が大事となる。新規のファイル作成でも、また既存ファイルの更新作業であっても、「txt ファイル」と「htmlファイル」との間を行き来しながら両ファイルにおいて全く同じ内容を確保することが肝であるが、 辞典づくりの過程で時に錯覚・錯誤が生じがちである。

      作業が「txtファイル」か「htmlファイル」のいずれでなされたかを確認しながら、「上書き保存」か「名前を付けて保存」の措置を行い、 双方のファイルが常に同じ内容で保存されていることを確保・確認しながらアップデートを進めることが極めて大事である。

      辞典づくりに慣れてきた場合でも、時に犯しやすいエラーである。このエラーのために、データが更新されていなかったり、「html ファイル」で加筆修正を行い続けたために「旧txtファイル」上では更新されずそのままであったりして、時に思いがけない手戻りが生じたりする。また、頭の混乱を招いて ストレスとなりかねない。特にファイルを閉じる時にはこのことに十分な注意を払うことが肝心である。 だが、何度か痛い失敗をする過程で、これを確認することが自ずと習慣化することになろう。







4-6 リンクのやり方について
リンクのやり方そのものはシンプルである。大切なことは、リンクのためのタグ命令の記述が適確なのか、試しにリンクをクリックして 確認しておくことである。

    (1) 辞典内の全てのファイルは、他のファイルの一つ、または数多くのファイルと何らかの形でリンクされている。それは 常に認識しておくことである。

      現在までは、意図的に、ファイル・画像・語彙の相互間のリンクは慎重・控え目に行ってきた。かつてはフォルダーやファイルの名前・ 階層上の位置を頻繁に変更することがあった。当然、リンクもその都度頻繁に変更する必要が生じ、手戻りのため多くの 労力・時間を要することになった。昨今ではそのような変更はほとんどなくなっている。しかし、辞典の利便性の向上などのために、 リンクそのものは今後も必要不可欠であり、増大していくことは間違いない。リンクをしないという選択肢はない。 だが、何でもかんでもリンクし過ぎると、辞典のユーザーは複雑な迷路に迷い込んだという印象をもってしまい、大きなストレスを 感じさせることになりかねない。リンクはアクセスの利便性と辞典づくりのしやすさなどとの間でバランスを取り続けることが大事であろう。 一つの変更が驚くほど数多くのリンク変更を生じさせることがある。

      また、外部のウェブサイトとリンクすることが多い。リンクした場合には、それがウェブ画面上で正しくリンク表示されているかどうかを 検証しておくことが大切である。外部サイトや辞典内のページとのリンクが何千と拡充すれば、検証の労力は大変となる。むやみに何が何でもリンクさせるのは考えものかもしれない。 外部サイトのドメイン(アドレス)は先方の都合で往々にして変更され大きな負担となる。

    (2) オンラインでリンクを検証してみると、あるページに貼り付けた画像がうまく表示されなかったり、辞典内の他のページと リンクさせたはずなのにうまくジャンプしないことも多々ある。 うまくリンクされない場合のほとんどは、リンクさせたいファイルや画像の階層上の位置がタグ上において適格に記述されていない ためである。即ち、リンクさせたい2つのファイルや、ファイルと画像の位置関係を読み間違って、タグを正確に記述していないこと による場合が殆どである。時たま、画像ファイルが壊れて表示されないことも例外的に起こりうる。


[リンクの具体的事例について]
  リンクのいくつかの典型的な事例を挙げたい。タグの<、>、およびその間に記述される英数字記号・スペースなど全て半角とする。 なお、リンクさせる場合の第一の要諦は、リンク元の「htmlファイル、例えば"page1.html"」は、リンクさせたい 「htmlファイル、例えば"page2.html"」や「画像ファイル、例えば"image1.jpg"」と同じ「フォルダーA」の中にあるか、または 別の「フォルダーB」にあるか、もし別であるとすれば「フォルダーAおよびB」は同じ階層位置にあるのか、さもなくば異なる階層 にあるかを十分理解することが基本中の基本である。

  幾つかの事例をもって、その意味するところを具体的に説明したい。なお、以下のページでは、技術的な便宜上、<、>、/は 全て全角にて記述されている。半角で記述するとタグ言語が正常に機能してしまい、ウェブ画面に表示されものとなる。それでは読者に 不都合をもたらすからである。

    ● (1)全ての文書ファイルや画像が同じフォルダー内にある場合の事例(下記の模式を参照下さい)
    (1) リンク元であるファイル「page1.html」に、「<a href="page2.html">ページNo.2</a>へジャンプする」という文章を記述する。
    「フォルダーA」内にその「page1.html」と、事前に作成しておいたファイル「page2.html」を収める。文中の「ページNo.2」を クリックすると、「page2.html」のページへとジャンプする(注釈: タグ命令<a href">・・・</a>は指定された「・・・」 へジャンプせよという命令である)

    (2) 文書ファイル「page1.html」に、「<a href="image1.jpg">写真1</a>へジャンプする」という文章を記述する。 「フォルダーA」内にその「page1.html」と、事前に作成しておいた写真画像「image1.jpg」を収める。文中の「写真1」をクリック すると「image1.jpg」の写真が表示される。なお、画像の形式としては一般的な拡張子「.jpg」や「.gif」がある(注釈: 下記 模式参照)

    (3) 文書ファイル「page1.html」において、「ここに写真を貼る。<img src="image1.jpg">」という文章を記述する。 「フォルダーA」内にその「page1.html」と、事前に作成しておいた画像「image1.jpg」を収める。「page1.html」を クリックしてブラウザを立ち上げると、そこに画像が貼り付けられている。(注釈: タグ命令<img src">は指定された画像 「image1.jpg」を表示せよという命令である)。


    ¶ フォルダー、文書ファイル、画像の収納と階層関係の模式事例(1)
    フォルダー A - ファイル「page1.html」、ファイル「page2.html」、および画像「image1.jpg」3つが収納されている。




    ● (2)文書ファイルが「フォルダーA」に、画像が「フォルダーB」内にあって、フォルダーA・Bは同じ階層位置にある 場合の事例(注釈: 下記模式参照)

    「フォルダーA」に文書ファイル「page1.html」を置き、「フォルダーB」には二つの画像「image1.jpg」と「image2.jpg」を収める。 両フォルダーは同じ階層位置に置かれるものとする。
    (1)「page1.html」に「<a href="image1.jpg">写真1</a>へジャンプする」という文章を記述する。さらに続けて、「ここに写真を貼る。 <img src="image2.jpg">」と記述する。

    (2)「page1.html」から「画像image1.jpg」にうまくジャンプ(リンク)させたり、また同時に「画像image2.jpg」をうまく表示させるには、 上記の事例(1)のような命令記述ではではうまくいかない。画像のリンク先を<a href="../folderB/image1.jpg">、および <img src="../folderB/image2.jpg">と指定する必要がある。

    (3)文書ファイル「page1.html」からみて、「フォルダーB」内にある画像へ辿るには、先ず一つ階層を上り「フォルダーA」と同じ 階層位置にある「フォルダーB」へ辿り、その中にある画像「image1.jpg」と「image2.jpg」に行き着くように命令する必要がある。

    ・ 「../」はリンクの起点となるファイル(リンク元のファイル)から一つ階層を上ることを命令している。一つの階層を上って 「フォルダーA」へ、その後は同じ階層にある「フォルダーB」へ。更にその中にある画像「image1.jpg」と「image2.jpg」へと 下り辿るように指示している。


    ¶ フォルダー、文書ファイル、画像の収納と階層関係の模式事例(2)
    フォルダーA - ファイル「page1.html」
    フォルダーB - 画像「image1.jpg」, 画像「image2.jpg」





    ● (3)リンク元文書ファイルが「フォルダーA」内にある。画像ファイルは「フォルダーB」の中の「フォルダーC」(=「フォルダーB」の 一つ下位の位置にあるフォルダー)内に収められている場合の事例(注釈: 下記模式参照)。
    (1)「フォルダーA」に文書ファイル「page1.html」を収め、「フォルダーB」の中にある「フォルダーC」には2つの画像「image1.jpg」と 「image2.jpg」を収める。「フォルダーA・B」は同じ階層位置にあるが、「フォルダーC」は「フォルダーB」の下位にあるとする。

    (2)上記事例(2)と同様に、「page1.html」に「<a href="image1.jpg">写真1</a>へジャンプする」という文章を記述する。 また「ここに写真を貼る。<img src="image2.jpg">」と記述する。

    (3)「page1.html」から画像「image1.jpg」にうまくジャンプさせたり、また同時に画像「image2.jpg」をうまく表示させるには、 上記事例(2)のような記述ではではうまくいかない。画像のリンク先を<a href="../folderB/folderC/image1.jpg">、および <img src="../folderB/folderC/image2.jpg">と命令する必要がある。

    (4)文書ファイル「page1.html」からみて、各画像へ辿るには、一つ階層を上って「フォルダーA」と同じ階層位置にある 「フォルダーB」へ。さらにその下位にある「フォルダーC」へと辿り、その中にある画像「image1.jpg」、「image2.jpg」に行き着くよう 指示している。


    ¶ フォルダー、文書ファイル、画像の収納と階層関係の模式事例(3)
    フォルダーA - ファイル「page1.html」
    フォルダーB - フォルダーC -  画像「image1.jpg」, 画像「image2.jpg」





    ● (4)もう一つの事例(注釈: 下記模式参照)
    (1)文書ファイル「page1.html」が、「フォルダーA」の中の「フォルダーB」内にあって、「フォルダーB」はさらに下位の 階層にある「フォルダーC」内に収納されている(文書ファイル「page1.html」は3階層下にある「フォルダーC」内に位置することになる)。
    画像「image1.jpg」が「フォルダーZ」の下位にある「フォルダーz1000」に収納されている。そして、「フォルダーA」と「フォルダーZ」 とは同じ階層上にあるとする。

    (2)「page1.html」に「<a href="../folderB/folderC/image1.jpg">写真1</a>へジャンプする」という文章を記述する。 また「ここに写真を貼る。<img src="../folderB/folderC/image1.jpg">」と記述する。

    (3)だがしかし、「page1.html」から画像「image1.jpg」にうまくジャンプさせ、かつ同時に画像「image1.jpg」をうまく表示させるには、 上記事例(3)のような命令言語記述ではうまくいかない。画像のリンク先を<a href="../../../Z/z1000/image1.jpg">、および <img src="../../../Z/z1000/image1.jpg">と指定する必要がある。

    (4)文書ファイル「page1.html」からみて、画像へ辿るには、「フォルダーC」から「フォルダーB」へ、さらに「フォルダーA」へと上る 必要があり、記号の「../../../」がそれを意味している。その後「フォルダーA」と同じ階層上にある「フォルダーZ」から、その下位にある 「フォルダーz1000」へ下り、その中にある画像「image1.jpg」に行き着くように指示している。


    ¶ フォルダー、文書ファイル、画像の収納と階層関係の模式事例(4)
    フォルダーA - フォルダーB - フォルダーC -  ファイル「page1.html」
    フォルダーZ - フォルダー z1000 -  画像「image1.jpg」





      文書ファイルや画像ファイルとの相対的な位置関係(上下・左右の関係)を理解したうえで、適切に階層を上り下りしながら、リンク元 からリンクさせたい文書ファイルや画像ファイルへ辿るための道筋を、タグ命令言語をもって記述するものである。

      海洋辞典の何万という「txtファイル」に記述されているリンクに関する事例をもって、その相対的パスの設定方法が自ずと見えてくる ことでしよう。パソコン上の全フォルダーやファイルを総観できる「エキスプローラー」において示される階層構造(ホームページ の起点となる「index.html」を含む全フォルダーやファイルの階層関係)についての理解こそが、リンクを貼るうえで重要な 「羅針盤」となるものです。


このページの トップに戻る/Back to the Pagetop.


    第26章 辞典づくりとその継承のための「実務マニュアル(要約・基礎編)」


     Top page | 総目次(全章全節) | ご覧のページ


       第26章・目次
      第1節: はじめに読んで(本章の概要)
      第2節: ドメインとサーバーの契約延長(年1回更新)と支払い
        2-1 ドメイン、その「ユーザー専用ページ」へのアクセス法、契約の延長と支払い法
        2-2 サーバー、その「ユーザー専用ページ」へのアクセス法、契約の延長と支払い法
      第3節: 「ウェブ海洋辞典」編さんに当たっての基本事項・基礎知識(階層構造など)
      第4節: タグ命令言語による「ウェブ辞典」の作成・アップデートの方法
        4-1 タグをもって作成するのがベスト
        4-2 作成からウェブ閲覧までの大まかな流れ
        4-3 タグ命令による作成のための予備知識
        4-4 タグ命令による作成演習
        4-5 ページのアップデートの基礎知識
        4-6 辞典内外のページとのリンク、その他
      第5節: 「ftpソフト」によるファイル・画像などのサーバーへのアップロード法
      第6節: その他の重要事項について

      [参考資料] 「実務マニュアル(詳細編)」 [作成中]