サイトTopへ

サンプルプロジェクト(1)

2001/11/13

 今回の作業をするのに一番手っ取り早いのが、既にあるページをコピーすることです。 一々HTMLヘルプワークショップを開いて作業していては日が暮れます。
HTMLヘルプワークショップを開発した人には悪いのですが、このソフトは、雛形となるページ作りと、コンパイルだけに利用した方がかなり能率が上がります。

また、その雛形も、ヘルプという目的からはあまり華やかなものは不必要 (と少なくとも私は思っています)と割り切ると自ずとそのスタイルも決まってしまいます。

そこで、いきなり天下り的ですが、私が作った雛形を以下に示しますので、これを利用すればすぐに完成してしまいます。
つまり、キーワードと内容・図を埋め込むだけの作業になります。
なお、このサンプルプロジェクトに関しては、営利・非営利を問わず自由に改変・転載・ご使用してくださって構いません。

雛形の プロジェクトソースファイル SimpleHelp.lzh 7KB (データサイズ 6,427 バイト)
とそれをコンパイルしてできた SimpleHelp.chm 14KB (データサイズ14,038 バイト)
をまずダウンロードしてください。
動きは、SimpleHelp.chmファイルで確認してください。

SimpleHelp.lzhを解凍しますと

SimpleHelpというフォルダiの中につぎのような構造のHTMLソースが作られます。
(*は空フォルダなのでlzh圧縮時に消されてしまいます。)

SimpleHelp/index.html      
SimpleHelp/MyStyle.css
SimpleHelp/SimpleHelp.hhp
SmppleHelp/images/ *

SimpleHelp/Chap1/00_Chap1.htm
SimpleHelp/Chap1/01_Section1.htm
SimpleHelp/Chap1/02_Section1.htm
SimpleHelp/Chap1/MyStyle.css
SimpleHelp/Chap1/images/ *

SimpleHelp/Chap2/00_Howto.htm
SimpleHelp/Chap2/01_Load.htm
SimpleHelp/Chap2/02_Save.htm
SimpleHelp/Chap2/MyStyle.css
SimpleHelp/Chap2/images/ *

SimpleHelp/Chap2/01_Load/00_Sample.htm
SimpleHelp/Chap2/01_Load/01_Test.htm
SimpleHelp/Chap2/01_Load/02_Results.htm
SimpleHelp/Chap2/01_Load/MyStyle.css
SimpleHelp/Chap2/01_Load/images/ *
  1. index.html はトップページです。 
    chmファイルとして特化させるため、今回はフレームを使用しません。

  2. MyStyle.css は各フォルダに存在します。 これは各フォルダの独立性を高めるためで、 なるべく他のフォルダとの関連を断ち切るためです。

  3. これと同じ理由で、通常は各フォルダにimagesフォルダを設けて図などを格納します。 もちろん、図のリンクはその階層のimages だけ参照するようにしないと意味はありません。 今回は雛形ですのでimagesフォルダは空です。
    (*は空フォルダなのでlzh圧縮時に消されてしまっています。  各自で作ってください。^_^;)

  4. スタイルシートの中で、

    BODY
    {
    BACKGROUND-image: url(images/BGPicture.gif);
    BACKGROUND-color:#f3f7f8;
    FONT-SIZE: 11pt
    ;}

    のように背景画像を使用している場合は、[FILES]セクションにその画像のフォルダを

    Chap1\01_Section1.htm,Chap1\images\BGPicture.gif

    のように指定してください。
    この指定をしないと、(ブラウザで背景画像が正常に表示されるのですが、)コンパイルすると背景画像が抜けます。  恐らく、ヘルプワークショップのバグでしょう。 ^^;

  5. SimpleHelp.hhpは、フルテキストサーチ・自動インデックス生成・自動目次生成があらかじめ設定してあります。

  6. 各フォルダ内のhtmファイルには、00_から始まる連番を付けています。
    Windowsエクスプローラで見たとき目次の順にファイルを整列させるためです。

  7. 整列させたhtmファイルのリストはSimpleHelp.hhp ファイルに記述する[FILES]のセクションにそのまま利用します。

    ここで、SimpleHelp.hhpファイルの[FILES]セクションを見てみましょう

    [FILES]
    index.html
    Chap1\00_Chap1.htm
    Chap1\01_Section1.htm
    Chap1\02_Section2.htm
    Chap2\00_Howto.htm
    Chap2\01_Load.htm
    Chap2\01_Load\00_Sample.htm
    Chap2\01_Load\01_Test.htm
    Chap2\01_Load\02_Results.htm
    Chap2\02_Save.htm

    このように、目次順にファイルを並べます。 なお、目次として表示する文字列に

    index.html はH1タグ

    Chap1\00_Chap1.htmChap2\00_Howto.htm
    にはH2タグ

    Chap1\01_Section1.htm,Chap1\02_Section2.htm
    Chap2\01_Load.htm,Chap2\02_Save.htm

    にはH3タグ

    Chap2\01_Load\00_Sample.htm
    Chap2\01_Load\01_Test.htm
    Chap2\01_Load\02_Results.htm

    にはH4タグを使用します。

  8. SimpleHelp.hhpは[FILES]セクション以外編集しない方が無難です。
    各HTMLヘルプの設定を変えたいときは、なるべく、HTML Helpworkshopを通じて変更してください。

  9. hhcファイルは自動的に作るので不要です。

  10. 00_番は各章、節のトップページです。  トップページだけ一つ上位のHタグを使用しても構いません。
    サンプルではトップページでも同じフォルダのファイルはすべて同じHタグを使用しています。


シンプルがベスト

  1. HTMLで記述するといっても、マニュアル=ヘルプを作るわけですから、ホームページを作る場合と違い、統一された見やすいものが良いでしょう。

  2. 従って、見る人を飽きさせないホームページと違い、調べモノがし易い設計が好まれます。

  3. 第一義的には、ヘルプの目的としてはユーザが操作に詰まったとき、それこそ"お助け"になることが目的ですので、解決策の書いてある情報の部分だけ参照できれば良いのです。

  4. 二番目に、何がわからないのかユーザ自身もわからないこともあるので、その問題解決の糸口にとなる情報が、色々なキーワードで検索できなければなりません。 ユーザはその情報の説明を要求しているのですから、当然その情報に関する知識も少ないわけで、往々にして、適切なキーワードとして何を入れて良いのやら、ユーザ自身がよくわからないことも珍しくないのです。

  5. このため、アプリケーションとの連動する状況依存のヘルプが不可欠です。 (裏技)上級コースでは、状況依存のヘルプについて説明するつもりです。 

次頁へ  前頁へ


四方山情報のトップへ 中級のトップへ 初級へ
サイトTopへ

Copyright (C) 2000,2001 T.Ichida All rights reserved.
無断転載を禁止します