Page Top

Page Top


    第18章 辞典づくりとその継承のための「実務マニュアル(要約・基礎編)」
    第4節 タグ命令言語による「ウェブ辞典」の作成・アップデートの方法


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


     第18章・目次
      第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 ホームページ「海洋総合辞典」は、市販のウェブ作成専用ソフトでは作成されていない
    ●  海洋辞典をホームページ作成専用ソフトで作成・更新を行った経験が全くない (「ホームページビルダー」などのいろいろな ソフトがあろうが、具体的には知らないし、使ったこともない)。また、ドメイン社などが提供するビルダーは月1,000円もかかり、 一般企業・商店、カフェ、レストランなどのホームページづくりには良いだろうが、辞典づくりに最適とはとても思われない。 レンタル・サーバー会社の「Lolipop社」が提供する有料の作成ソフトなども使ったこともない。

      これまで辞典づくりでは全てタグという命令記号を用いて作成してきた。大変簡単なホームページ作成方式である。 このタグ命令記号方式を「HTML言語 (Hyper Text Markup Language)」という。

      「html言語」で書かれたファイルをダブルクリックしてブラウザ (インターネットを見るソフト) で閲覧しるとネットで見る いつもの見慣れた画面となる。ブラウザは、いわば「html言語」で書かれたテキストを翻訳してネット画面上に表示するソフトといえる。 (ウェブ画面上でマウスの右クリックをすると「ページのソースを表示」が現われる。それをクリックすると、その「html言語」表示、 即ちソースが表示される)

      html言語を用いたファイル (html形式ファイル。拡張子に「.html」をもつファイル) を作成するには、Windowsパソコンに標準 装備されるテキスト作成ソフトの「メモ帳」で十分である。まずタグ命令記号を用いてテキスト形式フィアル(拡張子に「.txt」をもつ ファイル)を作成のうえ、それをhtml形式ファイルに「名付けて保存」し、htmlファイルに変換した上でブラウザで見ることになる。

    ● 過去に作成してきた「html形式ファイル」、あるいは「txt形式ファイル」をHP作成専用ソフトに取り込んで内容の更新をした場合、 どんな不都合が発生し、それにどう対処すべきなのか、経験がないので全く分からない。タグ命令記号で書かれたそれらの文書ファイルは、 恐らくわけの分からないものに変換されてしまい、収拾のつかない状態になるものと想像する。HP作成専用ソフトを正常に機能させ、 正常に更新させられるのかと危惧する。 (タグ命令記号による作成・更新にずっと長く慣れてきたので、専用ソフトを用いる 必要がなかった)。

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

      単純で少量のタグ命令記号でシンプルに「txt形式ファイル」を作成 (あるいは更新) し、「html形式ファイル」に変換するだけで HPを作成できていたものを、専用ソフトを使うことによってかえって憶えるべき事項が多くなり、また作業が複雑化して、大きな 不便や混乱に戸惑い悩まされることになるのではと懸念してきた。



4-1-2 タグという命令記号を用いてのウェブ作成法の基本を理解するには、1時間もあれば、ざっくりとその基本を理解できる
    タグ命令記号でのHP作成入門書の通読をぜひお薦めします。例えば、図書の例として、
    (1) 「HTML&CGI入門」、笹木・太田・藤崎共著、エーアイ出版発行、1996年、2200円。
    (2) 「超図解 HTMLタグ辞典(第2版)」、石橋・鐘ヶ江・エクスメディア共著、(株)エクスメディア発行、2002年、1480円。
    (3) 「超図解 HTML&CSS辞典」、ユニゾン著、(株)エクスメディア発行、2006年、1900円。
    (4) 「はじめてのホームページ HTML5入門」、荒石正二、(株)秀和システム発行、2011年、1380円。

      2023年現在まで上記(3)の図書を最も愛用してきた。その他多数の入門書がある。公共図書館で借りれよう。また、アマゾン・コムで「HTML入門書」 「ホームページ作成入門書」、「ホームページのつくり方」などのキーワードで検索すれば、安価な入門書を直ぐに購入できよう。 (HTML言語=タグ命令記号によるホームページ作成の基本は時を経てもほとんど変わらない。20年以上も前に作成したhtml形式ファイルは今も ネット上で閲覧できる)



4-1-3 300ページの入門書であっても、その要点はほんの最初の10~20ページ程に記述されている
(残ページには、何百とあるタグ命令の解説とウェブ上でどのように表示されるかの説明である。必要になれば参照し学習すれば よいだけのこと)

    あとはその都度、入門書記載のいろいろなタグ命令記号とその用例を見ながら、トライ・アンド・エラー方式で理解を深め、 少しずつ使いこなしていけばOKである。 「海洋辞典」の各ページはごく単純な命令記号で記述されている。また、時点で使用されるタグ命令記号の数も極く限られており、 後述の通り、ページの新規作成も既存ページの更新(アップデート)もごく簡単にできる。

      タグ命令記号が新規に追加されたり部分的に廃止されたりして、技術進歩として少しは変わってはいくが、ほとんど気にすることが ないほどである。「海洋辞典」で用いるタグ命令記号は20~30くらいであり、それらは時を経てもほとんど変わらないし、 またその数は極めて少ないので、一回の週末のうちにそれらの記号の使い方に慣れてしまう。



4-1-4 タグ命令による作成のメリットについて: 簡単で安定していること

    ● タグ命令記号をもって作成・更新するのが長期に見て最も安定している。時代と共にパソコンのハードウェア、基本ソフト(OS)、 その他アプリケーション・ソフトウェアがいかに変わろうとも、タグ命令記号によるhtmlファイルの作成の方法は、そんな時代変化に ほとんど左右されない。 (この25年間の体験からして)

      汎用性がつねに維持されるタグ命令記号を用いて 「テキスト形式ファイル(拡張子として「.txt」が付くファイル)」で作成しておけば、 「html形式ファイル (拡張子として「.html」が付くファイル)」に変換することは、どんなに時を経ても可能であり、ウェブページ の作成・更新をずっと半永久的に続けられることになる(世界中のページのほとんどはこのhtml形式で記述されている)。

    ● タグ命令記号でのテキスト形式ファイル作成は、パソコンメーカーが異なっても全てのパソコンで可能である。また、パソコン を10年後に新機種に乗り替えても、またHPの編纂者が交替することがあっても、何の支障もなく円滑に作成・更新が可能である。 さらに、それらのタグ命令記号や使い方は基本的には同じであり、いつの時代になってもぶれることなく、HPを簡単に作成・更新できる のが最大の強みである。

        結論として、この海洋辞典の作成・更新には、タグ命令記号での「txt形式ファイル」の作成→「html形式ファイル」への変換による 辞典づくり、およびその継続を強くお薦めしたい。

    ● 多言語の表示が画期的に進化した一例: かつてスペイン語、フランス語などの特殊文字は文字化けしていた。止む無く、 特殊文字を写真に撮って、それをtxtファイルに貼り付けた後htmlファイルに変換していた。だが、ある時点から 完全に解消された。ネットで知ったある一行のタグをtxtファイルに記入した後、htmlファイルへ変換する際に文字コードを 「UTF-8」と指定するだけで、ブラウザはウェブ上で正常に表示してくれるようになった。まるで魔法の杖のようであった。 ウェブ作成と表示技術が多言語に対応できるように進化したお陰であった。







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

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

    (2) タグ命令記号によるウェブ作成(html形式ファイルの作成)に関する入門書1~2冊をざっと通読し (最初の2~30ページを 通読すれば、タグ命令記号による作成の基本的な概念や仕組みなどを理解できよう。入門書はいろいろあるが、書例は上記に記載の通り。

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

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

      いずれにせよ、全データをアップロード(送信)し、キープしておくためのサーバーをレンタルする (ホスティングサービス会社と契約して確保している)。現在「ロリポップ社 /Lolipop」というホスティング会社と契約し、 200GB容量のサーバーをレンタルしている。
    (サーバーには「htmlファイル」だけでなく、「txtファイル」もサーバーにアップしているので、サーバーの 容量を2倍近く食っている。後者をアップしなければ、容量にはもっと余裕が生まれる。アップしておけば万が一のバックアップに なる。なお、「x….jpg(またはx….gif)」の画像はサーバーに一切アップしていない。

    ドメイン登録のための契約とレンタル・サーバー契約の継続は車の両輪であり、どちらも不可欠である。サーバー契約料は年間 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」を選択しておけば、スペイン語やフランス語の特殊文字が書き込まれていても、 ウェブ上で文字化けすることはない。さて、ファイルの名は同じだが、拡張子が異なる「txtファイル」(sample.txt)と 「htmlファイル」(sample.html) の2つのファイル ができる。そして、「sample.html」ファイルをダブルクリックし、ブラウザを起動させて見ると、ウェブページ仕様で表示される。

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

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







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

    新規にページを作成し、サーバーにアップロードするやり方の基本を記したい。
    (1)  テキスト文書作成ソフト「メモ帳」を立ち上げ、その白紙ページに事例として、以下に示す<html>から</html>までの 文章・記号を試しに全部書き込んでみよう。仮にそのページ名を「sample」とする。

    ただし、タグの<>、</>、およびそのタグ中の英数字や記号の全てを半角にすること。全角で書いた場合、機能を果たさない。 なお、各行の末尾にある<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>



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

(2) 上記を書き終えたらファイルを保存する。「ファイル」のプルダウンメニューの中の「名前を付けて保存」を選択する。 そして、「ファイル名」にファイル名を書き込み、ファイルの種類をそのまま「テキスト文書(*.txt)」とし、「文字コード」 として「UFT-8」を選ぶ。「ファイルの種類」は「*.txt」でよい。
ファイル名は半角英数字のみにて表記すること。例えば名を「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)本辞典づくりで使用される基本的なタグ命令記号は20~30ほど。中には少し込み入ったタグが使われるが、別の「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」ファイルに上書き保存される。

    ネット画面上で確認したい場合は、この「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ファイル」にコピー&ペーストして、 ページを全面的に取り換えた上で、改めてそれを上書き保存する。

    (8) 時々、更新作業を「txtファイル」、「htmlファイル」のいずれで行ったのか忘れることがあり、うっかりしてこの不都合を生じさ せてしまう。両ファイルでの上書き保存が大事となる。新規のファイル作成でも、また既存ファイルの更新作業であっても、「txt ファイル」と「htmlファイル」との間を行き来しながら両ファイルにおいて全く同じ内容を確保することが肝であるが、 辞典づくりの過程で時に錯覚・錯誤が生じがちである。 作業が「txtファイル」か「htmlファイル」のいずれでなされたかを確認しながら、「上書き保存」か「名前を付けて保存」の措置を行い、 双方のファイルが常に同じ内容で保存・更新されていることを確保・確認することが極めて大事である。辞典づくりに慣れてきた 場合でも、時に犯しやすいエラーである。このエラーのために、データが更新されていなかったり、加筆修正を行ったとしても(「旧txt ファイル」のままであったりする)、時に思いがけない手戻りが生じたりする。また、頭の混乱を招いてストレスとなりかねない。 ファイルを閉じる時にはこのことへの注意が肝心となる。







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

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

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

    (2) オンラインでリンクを検証してみると、あるページに貼り付けた画像がうまく表示されなかったり、辞典内の他のページとリンクさせた はずなのにうまくジャンプしないことも多々ある。 うまくリンクされない場合のほとんどは、リンクしたいファイルや画像の階層上の位置がタグ命令上適格に反映されていない ためである。即ち、リンクしたい2つのファイルや、ファイルと画像が置かれた相互の位置関係をよく理解されず、タグ命令に間違った 既述をしてしまったことによるエラーがほとんどである。


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

      ● 全ての文書ファイルや画像が同じフォルダー内にある場合の事例
      (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」をクリック すると写真が表示される。なお、画像の形式は一般的な拡張子「.jpg」である(同 上)

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


      ¶ フォルダー、文書ファイル、画像の事例模式
      フォルダー A - ファイル「page1.html」, ファイル「page2.html」, 画像「image1.jpg」


      ● 文書ファイルが「フォルダーA」に、画像が「フォルダーB」内にあって、フォルダーA・Bは同じ階層位置にある場合の事例
      「フォルダーA」に文書ファイル「page1.html」を置き、「フォルダーB」には二つの画像「image1.jpgとimage2.jpg」を収める。 両フォルダーは同じ階層位置に置かれるものとする。
      「page1.html」に「<a href="image1.jpg">写真1</a>へジャンプする」という文章を記述する。さらに続けて、「ここに写真を貼る。 <img src="image2.jpg">」と記述する。
      「page1.html」から「画像image1.jpg」にうまくジャンプ(リンク)させたり、また同時に「画像image2.jpg」をうまく表示させるには、 上記のような命令記述ではではうまくいかない。画像のリンク先を<a href="../folderB/image1.jpg">、および <img src="../folderB/image2.jpg">と指定する必要がある。文書ファイル「page1.html」からみて、「フォルダーB」内にある 画像へ辿るには、先ず一つ階層を上り「フォルダーA」と同じ階層位置にある「フォルダーB」へ辿り、その中にある 画像「image1.jpgとimage2.jpg」に行き着くように命令する必要がある。
      (「../」はリンクの起点となるファイル(リンク元のファイル)から一つ階層を上り「フォルダーA」へ、その後は同列階層にある 「ふぁおルダーB」内にある画像へと辿るように指示している)


      ¶ フォルダー、文書ファイル、画像の事例模式
      フォルダーA - ファイル「page1.html」
      フォルダーB - 画像「image1.jpg」, 画像「image2.jpg」



      ● 文書ファイルが「フォルダーA」内にあり、画像は「フォルダーB」の中にある「フォルダーC」(=フォルダーBの一つ下位の 位置にあるフォルダー)内に収められている場合の事例。
      「フォルダーA」に文書ファイル「page1.html」を収め、「フォルダーB」の中にある「フォルダーC」内に2つの画像「image1.jpgと image2.jpg」を収める。「フォルダーA・B」は同じ階層位置にあるが、「フォルダーC」は「フォルダーB」の下位にあるとする。
      同様に、「page1.html」に「<a href="image1.jpg">写真1</a>へジャンプする」という文章を記述する。また「ここに写真を貼る。 <img src="image2.jpg">」と記述する。

      「page1.html」から画像「image1.jpg」にうまくジャンプさせたり、また同時に画像「image2.jpg」をうまく表示させるには、 上記の命令の記述ではではうまくいかない。画像のリンク先を<a href="../folderB/folderC/image1.jpg">、および <img src="../folderB/folderC/image2.jpg">と命令する必要がある。
      文書ファイル「page1.html」からみて、各画像へ辿るには、一つ階層を上って「フォルダーA」と同じ階層位置にある 「フォルダーB」から、さらに下位にある「フォルダーC」へと辿り、その中にある画像「image1.jpg、image2.jpg」に行き着くよう 指示している。


      ¶ フォルダー、文書ファイル、画像の事例模式
      フォルダーA - ファイル「page1.html」
      フォルダーB - フォルダーC -  画像「image1.jpg」, 画像「image2.jpg」



      ● もう一つの事例について。
      文書ファイル「page1.html」が、「フォルダーA」の中の「フォルダーB」内にあり、さらに下位の階層にある「フォルダーC」に 収納されている(文書ファイルは3階層下に位置することになる)。
      画像「image1.jpg」が「フォルダー z」の下位にある「フォルダー z1000」に収納されている。 「フォルダーA」と「フォルダー z」とは同じ階層上にあるとする。

      「page1.html」に「<a href="image1.jpg">写真1</a>へジャンプする」という文章を記述する。また「ここに写真を貼る。 <img src="image1.jpg">」と記述する。
      「page1.html」から画像「image1.jpg」にうまくジャンプさせたり、また同時に画像「image1.jpg」をうまく表示させるには、 上記のような命令記述ではうまくいかない。画像のリンク先を<a href="../../../z/z1000/image1.jpg">、および <img src="../../../z/z1000/image1.jpg">と指定する必要がある。
      (「../../../」はリンクの起点となるファイル「page1.html」から3つ階層を上ること、その後は画像が収蔵される「フォルダー z」 を経て「フォルダー z1000」内にある画像へ辿るように指示することになる)
      文書ファイル「page1.html」からみて、画像へ辿るには、「フォルダーC」から「フォルダーB」へ、さらに「フォルダーA」へと上る (「../../../」が意味するところ)。その後「フォルダーA」と同じ階層上にある「フォルダーz」から、その下位にある 「フォルダーz1000」へ辿り、その中にある画像「image1.jpg」に行き着くよう指定している。


      ¶ フォルダー、文書ファイル、画像の事例模式
      フォルダーA - フォルダーB - フォルダーC -  ファイル「page1.html」
      フォルダー z - フォルダー z1000 -  画像「image1.jpg」



      (2) 文書ファイルや画像との相対的な位置関係(上下・左右の関係)を理解したうえで、適切に階層を上り下りしながら、リンク元 からリンクしたい文書ファイルや画像へ辿る道筋を、タグ命令として記述するものである。海洋辞典の何千何万という 「txtファイル」に記述されているリンクに関する命令記号の事例を見れば、その相対的パスの設定方法が自ずと見えてくる ことでしよう。パソコン上の全フォルダー・ファイルを総観できる「エキスプローラー」において示される階層構造(index.htmlをはじめ とする全フォルダー・ファイルの階層関係)の理解こそがリンクを張るうえで確かな「羅針盤」となろう。


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


    第18章 辞典づくりとその継承のための「実務マニュアル(要約・基礎編)」
    第4節 タグ命令言語による「ウェブ辞典」の作成・アップデートの方法


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


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