はじめに

概要

ちょちょいとファイル合併 2 は、静的 HTML によるヘルプの作成をアシストする、開発者向けのツールです。

メイクファイルを作成しておくことにより、

などができます。

ちなみに、本ヘルプもちょちょいとファイル合併 2 で作成されており、左側の目次も自動挿入されたものです。

(補足)
本ヘルプで縮小表示されている画像は、マウスを重ねると少し拡大され、クリックすると原寸大で表示されます。

動作環境

ちょちょいとファイル合併 2 公式ページのサポート情報をご覧ください。

インストール

ちょちょいとファイル合併 2 を Microsoft Store から入手することでインストールが完了します。

更新(バージョンアップ)は自動的に行われます。更新版が公開された場合、何度かちょちょいとファイル合併 2 を使用しているうちに自動的に更新されますので、通常は何ら更新作業は必要ありません。自動更新を待つのではなくすぐに更新したい場合は、Microsoft Store で更新してください。

チュートリアル

ちょちょいとファイル合併 2 で HTML ヘルプを作成する一連の流れを説明します。

起動

スタートメニューの「た」行の位置にちょちょいとファイル合併 2 が登録されているので、クリックして起動します。

メインウィンドウが表示されます。

(補足)
表示言語は OS の言語設定によって異なります。

メイクファイル指定

HTML ヘルプを作成するために、メイクファイルを指定します。

本チュートリアルでは、サンプルとして用意されているメイクファイルを指定します。

(ヘルプボタン)をクリックし、[サンプルフォルダー]メニューをクリックすると、サンプルが用意されているフォルダーが開きます。

「メイクファイル」欄に、サンプルフォルダー内にある「SampleMakeFile.cfm2」をドラッグ&ドロップします。

(注意)
サンプルフォルダーには以下のファイルもありますが、これらはメイクファイルの中で参照されるサンプルです。メイクファイル欄には「SampleMakeFile.cfm2」を指定してください。

ドラッグ&ドロップだけではなく、参照ボタンや、「メイクファイル」欄への直接入力も可能です。

「メイクファイル」欄に直接入力する場合は、フルパスまたは、相対パスで「Documents\Samples\SampleMakeFile.cfm2」と入力します。

メイクファイルの中身は HTML ファイルです。従って、サンプルのメイクファイルを Web ブラウザで開くと内容を見ることができます。

メイクファイルが通常の HTML ファイルと異なるのは、HTML コメントの形式をした「Cfm タグ」が埋め込まれていることです。

例えば、「<!-- Cfm/Toc: -->」という Cfm タグを埋め込まれていると、その場所に目次が挿入されることになります。

サンプルのメイクファイルをテキストエディタで開くと、Cfm タグの様子が分かるかと思います。

HTML ヘルプ作成

メイクファイルを指定したら、「スタート」ボタンをクリックすると HTML ヘルプが作成されます。

サンプルのメイクファイルでは、Cfm タグで HTML ヘルプのパスが指定されており、「C:\Temp\Sample.html」に HTML ヘルプが作成されます。

「出力ファイルを開く」ボタンをクリックすると、作成された HTML ヘルプがブラウザで開かれます。

HTML ヘルプの先頭に目次が挿入されています。あくまでも HTML ですので、目次の書式などは CSS で自由に変更することができます。

また、HelpParts フォルダー内にいくつかの HTML ファイルが作成されていますが、これらはアンカーファイルと呼ばれます。アンカーファイルを開くと直ちに HTML ヘルプに遷移しますが、HTML ヘルプの先頭ではなく、対応する見出しのところに遷移します。

以上でチュートリアルは終了です。

より詳しい使い方は次章以降をご覧ください。

使い方

チュートリアル章で実践したように、ちょちょいとファイル合併 2 ではメイクファイルを元に HTML ヘルプを作成します。

メイクファイル自体も HTML ファイルで、かつ、Cfm タグを埋め込んだものになりますので、

となります。

メイクファイルの文字コードは UTF-8 を推奨します。

Cfm タグは HTML コメントの形式で、例えば「<!-- Cfm/Toc: -->」という Cfm タグではその場所に目次が挿入されます。また、「<!-- Cfm/Include: インクルードファイル名 -->」という Cfm タグではその場所に別の HTML ファイルを読み込むことができます。

Cfm タグを活用することで、手作業ですべての HTML ヘルプを作成するよりも効率的になります。

Cfm タグの仕様については次章をご覧ください。

Cfm タグ仕様

共通仕様

本節では、Cfm タグに共通する仕様について説明します。

Cfm タグは HTML コメント形式で記載し、書式は

書式<!-- Cfm/タグ名: タグ値 -->

です。

Cfm の後ろにスラッシュ、タグ名の後ろにコロンが必要です。

例)

<!-- Cfm/Include: SampleIncludeFile -->

Cfm タグによってはタグ値がないものもありますが、その場合もコロンは必要です。

例)

<!-- Cfm/Toc: -->

タグ名の大文字小文字は区別されません。タグ値の両側の空白文字は無視されます。

なお、Cfm タグ同士は前方(文書頭に近い方)のみ参照されます。例えば、Var タグは前方にあるSet タグで設定された変数のみを表示できますので、Set タグ ➡ Var タグの順に記載する必要があります。

アンカーパス(AnchorPath)

アンカーメイクファイルで使用する Cfm タグです。アンカーメイクファイルについては GenerateAnchorFiles タグをご覧ください。

出力先ファイルとそのアンカーへのパスを挿入します。

書式<!-- Cfm/AnchorPath: -->

AnchorPath の後ろのコロンを忘れずに記載してください。

例)

<a href="<!-- Cfm/AnchorPath: -->">クリック</a>

アンカーファイル作成(GenerateAnchorFiles)

アンカーファイルを作成します。

アンカーファイルとは、出力ファイルの指定の見出しへの遷移を目的としたファイルです。Web の場合は、

  https://www.example.com/index.html#SomeTitle

のように「#」に続けてアンカーを指定することにより、当該部分を表示することができます。しかし、ローカルディスクのファイルとして HTML ヘルプを作成した場合、ブラウザで

  C:\Temp\Help.html#SomeTitle

を開いても「#SomeTitle」に遷移せず、文書頭が表示されてしまいます。

そこで、ブラウザで

  C:\Temp\Help.html\HelpParts\Help_SomeTitle.html

を開くと

  C:\Temp\Help.html#SomeTitle

に遷移するようにします。Help_SomeTitle.html がアンカーファイルです。

書式<!-- Cfm/GenerateAnchorFiles: アンカーメイクファイル名, アンカーファイルを作成するフォルダー名, アンカーファイル作成対象ランク -->

GenerateAnchorFiles タグは原則としてメイクファイルのどこに記述しても構いません。GenerateAnchorFiles タグがあればアンカーファイルを作成し、なければアンカーファイルは作成しません。アンカーファイルを作成したくない場合は、メイクファイルに GenerateAnchorFiles を記述しないようにします。

アンカーメイクファイル名は、アンカーファイルの内容になるファイルを指定します。アンカーメイクファイル内に AnchorPath タグを記述しておくことで、出力ファイルへの遷移をするようにします。アンカーメイクファイルのサンプルについては、サンプルフォルダー内にある SampleAnchorMakeFile.cfm2anchor を参考にしてください。

アンカーファイルを作成するフォルダー名には、アンカーファイル群を作成するフォルダーを指定します。通常は出力先ファイルのあるフォルダーからの相対パスで指定します。

アンカーファイルを作成するフォルダー名は省略可能です。省略した場合、「HelpParts」が指定されます。

アンカーファイル作成対象ランクはアンカーファイル作成対象となる <hx> タグのランクを列挙します。例えば「23」とすると、<h2> タグおよび <h3> タグが目次作成対象となります。

アンカーファイル作成対象ランクは省略可能です。省略した場合、環境設定で設定した内容が適用されます。

例)

<!-- Cfm/GenerateAnchorFiles: C:\AnchorMake\SampleAnchorMakeFile.cfm2anchor -->
<!-- Cfm/GenerateAnchorFiles: SampleAnchorMakeFile.cfm2anchor -->
<!-- Cfm/GenerateAnchorFiles: ..\..\SampleAnchorMakeFile.cfm2anchor -->
<!-- Cfm/GenerateAnchorFiles: SampleAnchorMakeFile.cfm2anchor, HelpParts -->
<!-- Cfm/GenerateAnchorFiles: SampleAnchorMakeFile.cfm2anchor, HelpParts, 123 -->
<!-- Cfm/GenerateAnchorFiles: SampleAnchorMakeFile.cfm2anchor, , 123 -->

インクルード(Include)

別の HTML ファイルを読み込んで挿入します。

複数の HTML ヘルプで共通の部品がある場合などに便利です。

書式<!-- Cfm/Include: インクルードファイル名 -->

インクルードファイル名は絶対パスで記載することもできますし、IncludeFolder タグで指定したフォルダーからの相対パスで記載することもできます。

インクルードファイル名の拡張子は省略することができます。省略した場合は、IncludeDefaultExt タグで指定した拡張子が使われます。

インクルードファイルもメイクファイル同様に Cfm タグを使うことができます。例えば、メイクファイルでファイル A をインクルードし、ファイル A でファイル B をインクルードする、といった使い方ができます。

例)

<!-- Cfm/Include: C:\Include\Hoge1.html -->
<!-- Cfm/Include: Hoge2.html -->
<!-- Cfm/Include: ..\..\Hoge3.cfm2 -->
<!-- Cfm/Include: Hoge4 -->

インクルード拡張子(IncludeDefaultExt)

Include タグで拡張子が指定されなかった場合のデフォルト拡張子を指定します。

書式<!-- Cfm/IncludeDefaultExt: デフォルト拡張子 -->

拡張子の先頭にピリオドがあってもなくても構いません。

例)

<!-- Cfm/IncludeDefaultExt: .cfm2 -->
<!-- Cfm/IncludeDefaultExt: html -->

IncludeDefaultExt タグが指定されなかった場合のデフォルト拡張子はメイクファイルの拡張子と同じ .cfm2 です。

インクルードフォルダー(IncludeFolder)

Include タグで相対パスが記載された場合の基準フォルダーを指定します。

書式<!-- Cfm/IncludeFolder: 基準フォルダー名 -->

基準フォルダー名は絶対パスで記載することもできますし、メイクファイルのあるフォルダーからの相対パスで記載することもできます。

例)

<!-- Cfm/IncludeFolder: C:\Include1 -->
<!-- Cfm/IncludeFolder: Include2 -->
<!-- Cfm/IncludeFolder: ..\..\Include3 -->

IncludeFolder タグが指定されなかった場合の基準フォルダーはメイクファイルのあるフォルダーです。

出力ファイル(OutFile)

出力する HTML ヘルプのファイル名を指定します。

書式<!-- Cfm/OutFile: 出力ファイル名 -->

出力ファイル名は絶対パスで記載することもできますし、メイクファイルのあるフォルダーからの相対パスで記載することもできます。

例)

<!-- Cfm/OutFile: C:\Output\Help1.html -->
<!-- Cfm/OutFile: Help2.html -->
<!-- Cfm/OutFile: ..\..\Help3.html -->

OutFile タグが指定されなかった場合、メイクファイル名の末尾に「Output.html」が付与されたファイル名に出力されます。

変数設定(Set)

変数に値を設定します。Var タグで変数の値を表示できるようになります。

アプリ名など頻出単語の表記揺れをなくし統一表記にする場合などに便利です。

書式<!-- Cfm/Set: 変数名 = 変数値 -->

変数名および変数値の両側の空白文字は無視されます。変数値の両側に空白文字を設定したい場合は「&nbsp;」を使うと良いでしょう。

例)

<!-- Cfm/Set: Score = 95 -->
<!-- Cfm/Set: Name = 山田太郎 -->
<!-- Cfm/Set: Space = 右にスペース&nbsp; -->

目次挿入(Toc)

文書全体の <hx> タグを見出しとした目次を挿入します。

書式<!-- Cfm/Toc: 目次対象ランク -->

目次対象ランクは目次作成対象となる <hx> タグのランクを列挙します。例えば「23」とすると、<h2> タグおよび <h3> タグが目次作成対象となります。

目次対象ランクは省略可能です。省略した場合、環境設定で設定した内容が適用されます。

目次対象ランクを省略した場合でも Toc の後ろのコロンを忘れずに記載してください。

なお、複数の Toc タグで目次対象ランクを指定した場合、最後に指定したランクが有効になります。

例)

<!-- Cfm/Toc: -->
<!-- Cfm/Toc: 246 -->

それぞれの <hx> タグには id 属性が記載されている必要があります。

例)

<h1 id="Beginning">はじめに</h1>
<h2 id="FAQ">よくある質問</h2>

変数表示(Var)

Set タグで設定した変数値を表示します。

書式<!-- Cfm/Var: 変数名 -->

例)

<!-- Cfm/Var: Score -->
<!-- Cfm/Var: Name -->
<!-- Cfm/Var: Space -->

環境設定

ちょちょいとファイル合併 2 の全体的な動作に関する設定を行います。

設定後、OK ボタンをクリックすると設定が確定します。初期化ボタンをクリックすると、初期設定に戻すことができます。

設定タブ

目次対象

Toc タグを記載した際、どの <hx> タグを目次として記載するかを指定します。

Toc タグで目次対象ランクが指定されている場合は、Toc タグの指定が優先されます。

アンカーファイル作成対象

GenerateAnchorFiles タグを記載した際、どの <hx> タグのアンカーファイルを作成するかを指定します。

GenerateAnchorFiles タグでアンカーファイル作成対象ランクが指定されている場合は、GenerateAnchorFiles タグの指定が優先されます。

既存のアンカーファイルを上書きする

このオプションを有効にすると、既にアンカーファイルが存在している場合でも、再度アンカーファイルを作成して上書きします。

アンカーメイクファイルの内容を更新した場合などはこのオプションを有効にすると良いでしょう。

メンテナンスタブ

ちょちょいとファイル合併 2 の最新情報を自動的に確認する

このオプションを有効にすると、起動時にホームページから関連の最新情報を取得し、最新情報が見つかった場合はブラウザで表示します。Ver 3.3 現在、最新情報の確認は 3 日ごとに行います。

最新情報表示前には、表示するかどうかの確認が行われます。表示しないを選択した場合、当該情報については次回以降は表示されませんのでご注意下さい。

「今すぐ最新情報を確認」ボタンをクリックすると、直ちに確認が行われます。

設定のバックアップ

ちょちょいとファイル合併 2 の設定を保存します。動作に問題が発生したときに開発者とやり取りする際、手助けになる場合があります。

設定の復元

バックアップしておいたちょちょいとファイル合併 2 の設定を読み込みます。

困ったときは

ちょちょいとファイル合併 2 のサポートページをご覧ください。

お願い

ニコニコユーザー

ニコニコ動画のアカウントを持っている方は、SHINTA のアカウントをフォローして頂けると嬉しいです。

クリエイター支援

ニコニコ動画クリエイターサポート

ニコニコ動画のクリエイターサポート制度でご支援いただけると、開発費等が助かりますので、よろしくお願いします。

Fantia

クリエイター支援サイト「Fantia」内に、ちょちょいとファイル合併 2 を含む SHINTA のファンサイトを開設しました

無料プランもありますので、是非ご入会いただけると励みになります。

有料プランにご入会頂けると、開発費等が助かりますので、よろしくお願いします。

その他

データベース

種類別 フリーウェア
名称 HTML 作成ツール
ソフトウェア名 ちょちょいとファイル合併 2 
ダウンロード https://shinta.coresv.com/software_dev/cfilemerge2-jpn/#Download(メイン)
http://shinta0806be.ldblog.jp/archives/9212448.html(バックアップ)
作者 SHINTA
作者 E メール
製品番号 SHWI-051-F

ライセンス

ちょちょいとファイル合併 2 には以下のライセンスが適用されます。

※第三者から提供されている部分を除きます。第三者から提供されている部分については、元のライセンスに従います。
※営利目的で使用したい場合は、個別に応じられる場合がありますので事前にご相談下さい。

改訂履歴

ちょちょいとファイル合併 2 の改訂履歴は以下をご覧ください。

活用事例

ちょちょいとファイル合併 2 を活用してヘルプを作成しているアプリとしては、例えば以下のようなものがあります。

謝辞

ちょちょいとファイル合併 2 の動作に当たり、以下のソフトウェアを使用させていただいております。ありがとうございます。各ソフトウェアのライセンス等については、各ソフトウェアのドキュメントを ThirdPartyDocuments フォルダ内に同梱しています。