サンプルフォルダのカスタマイズ

それでは、いよいよあなたの漫画をComicFlashに載せてみます。 先程設置したサンプルフォルダをカスタマイズする方向で話を進めます。

目次ページについては前のページで説明しましたので、ここではコンテンツの入れ替えについて説明します。 ということで、作業はsample/contentディレクトリで行います。 以下、例えば「pagesディレクトリに」云々とあったら、「sample/content/pagesディレクトリに」と読み替えてください。

ひとつだけ先に注意事項を書いておくと、ComicFlashは最初に全ページのデータを読み込みますので、ページ数が多いとロード時間がやたらと長くなってしまいます。 長編漫画なら１話ずつに区切るなどの工夫をしてください。 目安としては、16〜24ページ程度がちょうどいいかと思います。

ページ画像を準備する

何はともあれ漫画を用意しなければ始まりません。 もしまだ漫画がなければ、頑張って描いてください。 漫画があるなら、原稿データを開き、各ページを加工して次のような画像を作り、アップロードします。

表示用の画像は、基本的にComicFlash用またはComicFlashWIDE用のどちらかだけで大丈夫です。 また、拡大機能用の画像は、拡大機能を付けたい場合のみ用意してください。

念のために書いておくと、pages、pages_largeの両ディレクトリをはじめ、以降のアップロード先はすべてsampleディレクトリの中です。

表示確認をしてみよう

ページ画像の加工とアップロードが終わったら、一旦表示確認をしてみましょう。 先程設置したサンプルを表示してみてください。 どうですか？

おそらく、pagesディレクトリに何ページ入っていたとしても、2ページまでしか表示されていないと思います。 また、拡大機能も有効になっていないはずです。

ですが、ページの中身がきちんとあなたの漫画になっていれば、心配無用です。 その辺は次の次の次くらいで説明しますので、自分の漫画が表示されていない人以外は、安心して次の項目へ進んでください。

ウィンドウタイトルを変更する

とりあえず、サブウィンドウの「ComicFlashサンプル」というタイトルを何とかしましょう。 あなたの漫画のタイトルに変更してください。 もし長編漫画なら、サブタイトルを併記すると良いです。

ウィンドウのタイトルはFlashからは変更できませんので、comicflash.htmlを編集して、ページタイトルを書き換えてください。

タイトル画像を変更する

ウィンドウ右上に出ているタイトル画像を変更します。 これは横100ピクセル, 縦400ピクセルのJPEG画像です。 そのような画像を用意したら、「title.jpg」という名前でimageディレクトリの中にアップロードしてください。 これで画像が入れ替わるはずです。

ちなみに、その下にある「ページ指定ジャンプ」という画像も適当な物に変更できます。 こちらはPNG画像で、横100ピクセル, 縦22ピクセルです。 変更する場合は、「pagejump.png」という名前で、同じくimageディレクトリにアップロードします。

設定ファイルを編集する

いよいよカスタマイズのキモの部分です。 設定ファイルを編集するには、ワープロではなくテキストエディタが必要です。 Windowsのメモ帳やMac OS Xのテキストエディットでも、まあ構いませんが、あまりお勧めしません。 WindowsならK2Editor、Mac OS Xならmiが使いやすくて良いので、適宜ダウンロードしておくと便利です（両方ともフリーウェアです）。

ホームページ作成ソフトでも編集できるものがあるかもしれませんが、よく分かりません。 ただしDreamWeaverなら大丈夫だと自信を持って言えます。 何故なら、藤川がそれを使っているからです。

さて、道具が用意できたら、おもむろに設定ファイルを開きましょう。 設定ファイルはpref.xmlです。 その内容は、デフォルトではこのようになっています：

<?xml version="1.0"?>
<preference>
    <pageFolder>pages/</pageFolder>
    <partsFolder>image/</partsFolder>
    
    <maxpage>2</maxpage>
    <pagetype>png</pagetype>
    
    <useScope>0</useScope>
    <scopedPageFolder>pages_large/</scopedPageFolder>
    
    <prevstory></prevstory>
    <nextstory></nextstory>
    <webclap></webclap>
    
    <refreshImageCash>0</refreshImageCash>
    
    <bgColor>#333333</bgColor>
    
    <listStyle>
        <bgColor>#ffffff</bgColor>
        <fontColor>#000000</fontColor>
        <rollOverColor>#ccccff</rollOverColor>
        <selectColor>#9999ff</selectColor>
        <textRollOverColor>#000000</textRollOverColor>
        <textSelectColor>#000000</textSelectColor>
    </listStyle>
</preferenece>

ここでXML形式の講釈を始めると、果てしなく長くなってしまいますので省略します。 手っ取り早く言うと、<と>に囲まれた部分が設定する項目の名前です。 で、それらに囲まれた部分（上の例で赤字で示した部分）が設定値です。 編集は原則として設定値に対してのみ行います。

現在のバージョンで設定できる項目を表にしましたので、こちらを参考に設定してください。 全ての設定値を変更する必要はありません。 変更が必須の項目は背景が赤に、変更を推奨する項目の背景は黄色になっています。 なお、設置値はすべて半角英数字です。

まずはComicFlashの動作に関連する項目の一覧です：

項目名	種類 （初期値）	説明・注意事項
pageFolder	相対パス （pages/）	表示用のページ画像を入れておくディレクトリの名前です。 comicflash.htmlからの相対パスで指定し、末尾には必ず/（スラッシュ）を付けてください。
partsFolder	相対パス （image/）	タイトル画像や直接ジャンプの項目画像といった、画像部品を入れておくディレクトリの名前です。 comicflash.htmlからの相対パスで指定し、末尾には必ず/（スラッシュ）を付けてください。
maxpage	数値 （2）	漫画のページ数です。 用意したページ画像の連番のうち、最後の数字を設定してください。 なるべく偶数になるように調整すると良いです。
pagetype	画像形式 （png）	ページ画像の形式です。 具体的には、ページ画像に付けた拡張子を指定します。 ドットは不要です。 なお、ページ画像と拡大用画像は同じ形式でなければなりません。
useScope	数値 （0）	拡大機能を使うかどうか指定します。 使う場合はこの項目を1にしてください。
scopedPageFolder	相対パス （pages_large/）	拡大用画像を入れておくディレクトリの名前です。 comicflash.htmlからの相対パスで指定し、末尾には必ず/（スラッシュ）を付けてください。
prevstory	URL （なし）	連載形式の漫画などで、前回がある場合、ここに前回のURLを記入しておくと、「前回へジャンプ」機能が有効になります。 どちらかというと絶対URL（http://から始まるもの）の方が無難かと思います。
nextstory	URL （なし）	「prevstory」同様、次回へのURLを記入しておくと、「次回へジャンプ」機能が有効になります。
webclap	URL （なし）	あなたのサイトにWeb拍手を設置している、または設置する予定の場合、ここにそのURLを記入すると、そこにリンクの張られた「WebClap」ボタンが表示されるようになります。 なるべく絶対URL（http://から始まる物）で指定してください。
refreshImageCash	数値 （0）	ComicFlashを起動するたびにFlash Playerの画像キャッシュをクリアするかどうかです。 これが0になっていると、ページを入れ直しても表示に反映されないことがありますので、なるべく1にしてください。 ただしローカルでテストする場合は1だと画像が表示されませんので、デフォルトでは0になっています。 また、一部のサーバでは1だと正常に動作しないかもしれません。
bgColor	16進値 （#333333）	ComicFlashの背景色です。 ホームページを作るときのような、16進数のカラーコードで指定してください（色名は使えません）。

これらの動作関連設定の次にある<listStyle>〜</listStyle>で囲まれた部分は、ページ指定ジャンプのリストの見た目に関する設定です。 基本的に触らなくても問題ありませんが、背景色を変更した場合は少しいじった方がいいかもしれません。

bgColor	16進値 （#ffffff）	リストの背景色です。 16進数のカラーコードで指定してください（色名は使えません）。
fontColor	16進値 （#000000）	リストの文字色です。 16進数のカラーコードで指定してください（色名は使えません）。
rollOverColor	16進値 （#ccccff）	リストの項目にマウスが重なったときの項目背景色です。 16進数のカラーコードで指定してください（色名は使えません）。
selectColor	16進値 （#9999ff）	選択された（クリックされた）項目の項目背景色です。 16進数のカラーコードで指定してください（色名は使えません）。
textRollOverColor	16進値 （#000000）	リストの項目にマウスが重なったときの項目文字色です。 16進数のカラーコードで指定してください（色名は使えません）。
textSelectColor	16進値 （#000000）	選択された（クリックされた）項目の項目文字色です。 16進数のカラーコードで指定してください（色名は使えません）。

変更必須項目と変更推奨項目以外は、使い方に合わせて適宜変更してください。

編集が終わったら、それを保存し、サーバにアップロードしてください。 そしてComicFlashを表示してみましょう。 どうでしょうか？　きちんと表示されていたら、ひとまず設置は成功です。 お疲れさまでした！

サンプルフォルダのカスタマイズ »  応用例