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

サイト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/ *

index.html　はトップページです。　
chmファイルとして特化させるため、今回はフレームを使用しません。
MyStyle.css は各フォルダに存在します。　これは各フォルダの独立性を高めるためで、なるべく他のフォルダとの関連を断ち切るためです。
これと同じ理由で、通常は各フォルダにimagesフォルダを設けて図などを格納します。　もちろん、図のリンクはその階層のimages だけ参照するようにしないと意味はありません。　今回は雛形ですのでimagesフォルダは空です。
(*は空フォルダなのでlzh圧縮時に消されてしまっています。　各自で作ってください。^_^;)
スタイルシートの中で、

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

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

Chap1\01_Section1.htm,Chap1\images\BGPicture.gif
のように指定してください。
この指定をしないと、(ブラウザで背景画像が正常に表示されるのですが、)コンパイルすると背景画像が抜けます。　恐らく、ヘルプワークショップのバグでしょう。 ^^;
SimpleHelp.hhpは、フルテキストサーチ・自動インデックス生成・自動目次生成があらかじめ設定してあります。
各フォルダ内のhtmファイルには、00_から始まる連番を付けています。
Windowsエクスプローラで見たとき目次の順にファイルを整列させるためです。
整列させた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.htm, Chap2\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タグを使用します。
SimpleHelp.hhpは[FILES]セクション以外編集しない方が無難です。
各HTMLヘルプの設定を変えたいときは、なるべく、HTML Helpworkshopを通じて変更してください。
hhcファイルは自動的に作るので不要です。
00_番は各章、節のトップページです。　　トップページだけ一つ上位のHタグを使用しても構いません。
サンプルではトップページでも同じフォルダのファイルはすべて同じHタグを使用しています。

シンプルがベスト

HTMLで記述するといっても、マニュアル=ヘルプを作るわけですから、ホームページを作る場合と違い、統一された見やすいものが良いでしょう。
従って、見る人を飽きさせないホームページと違い、調べモノがし易い設計が好まれます。
第一義的には、ヘルプの目的としてはユーザが操作に詰まったとき、それこそ"お助け"になることが目的ですので、解決策の書いてある情報の部分だけ参照できれば良いのです。
二番目に、何がわからないのかユーザ自身もわからないこともあるので、その問題解決の糸口にとなる情報が、色々なキーワードで検索できなければなりません。　ユーザはその情報の説明を要求しているのですから、当然その情報に関する知識も少ないわけで、往々にして、適切なキーワードとして何を入れて良いのやら、ユーザ自身がよくわからないことも珍しくないのです。
このため、アプリケーションとの連動する状況依存のヘルプが不可欠です。　(裏技)上級コースでは、状況依存のヘルプについて説明するつもりです。

次頁へ　　 前頁へ

四方山情報のトップへ

中級のトップへ

初級へ

サイトTopへ

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

次頁へ 前頁へ

次頁へ　　前頁へ