• 目次
  • Word
  • Acrobat
  • Photoshop
  • ファイル名変換君
  • プレビュー
  • プレビュー2
  • Dreamweaver


「FlippingBook」は、雑誌のようにページをめくるエフェクトが楽しいFLASHベースのオープンソースです。

拡大表示・印刷・PDF保存などの機能を備えたFlashのビューアーで、
今回はその中の「FlippingBook HTML Edition」をつかいます。

HTMLエディション版は、画像(拡大画像と表示する画像)を「pages」フォルダに入れ、
「bookSettings.js」に画像のパスを入力するだけで利用できます。

配布元はコチラ↓
http://www.filebuzz.com/findsoftware/Flippingbook_Html_Edition/1.html
 

↑これをクリックするとページが開きます。


部分をクリックするだけで、簡単にダウンロードできます。

ダウンロードが完了したら中身をみます。

←フォルダ構造はこうなっています。
この絵にマウスをのせてください。

 .は印刷や、拡大表示に使う画像です。
 .は表示用の、解像度の低い画像です。

「pages」フォルダに表示用画像。同じ階層に、
「large」フォルダがあって、「large」フォルダの中に
まったく同じ名前の、高画質画像がある、という事です。

まずは、この画像を作ります。作り終えたら、
次に .の「liquid-green.css」をなおします。
目的は、日本語で表示させる為。

次は、 .の「flippingbook.js」を直します。
ページめくりが、デモと逆なら、必ず直します。
同じなら、なおさなくても、動く事は動きますが・・・

次は、 .の「bookSettings.js」をなおします。
このジャバスクリプトファイルに、
画像へのパスや、画像の数、サブタイトル、章、を記述します。

正しく配置できれば、「index.html」を開くと、
そのまま、WEBブックになる、という訳です。

>これからやる事
  1. 画像を作る(↓は使うソフト)
    • ワード———————文書作成ソフト
    • アクロバット————PDF作成・編集ソフト
    • フォトショップ———写真・画像編集ソフト
    • ファイル名変換君——ベクターのフリーソフト
    • プレビュー—————Mac純正画像ビューワー
  2. liquid-green.css(カスケーディングスタイルシート)を直す
    • ドリームウィーバー—ホームページ作成ソフト
  3. flippingbook.js(ジャバスクリプト) を直す
    • ドリームウィーバー—ホームページ作成ソフト
  4. bookSettings.js(ジャバスクリプト) を直す
    • ドリームウィーバー—ホームページ作成ソフト
    • エクセル——————表・計算作成ソフト
  5. index.html(webブック) の確認
    • ドリームウィーバー—ホームページ作成ソフト
    • サファリ——————ブラウザソフト



まずは、画像の元の、素材つくり。ワードを使います。
私には文才がないので、友人が創った超大作の小説を使わせてもらいました。
才能に感激し、楽しませてもらったのでカスタマイズしてプレゼントです。

10ヶ月に渡って連載された文章を、ワードにコピペしながら1つに統合します。
完了したら963ページもありました。

次にレイアウトの設定をします。
「印刷レイアウト表示」画面で、全963頁の2ページ目にします。

クリックすると、実寸大で開きます

書式パレットで、文書の余白を設定します。
左:10mm 右:13mm 上:10mm 下:10mm ヘッダー:10mm フッター:10mm
デフォルトで設定できるのはここまでで、もう少し設定する必要があります。

次に、フッターの設定をします。

メニュバーの「書式」から、「文章のレイアウト」を選択して、「文章のレイアウト」BOXを開き、
「その他」タブをクリックします。
セクションの開始位置はプルダウンを開いて「次のページから開始」にします。
ヘッダーとフッターは「先頭ページのみ別指定」にチェックを入れます。
「OK」をクリックして、「文章のレイアウト」BOXを終了します。

次に、フッターの書式を設定します。

メニュバーの「挿入」から、「ページ番号」を選択して、「ページ番号」BOXを開き、
「書式」ボタンをクリックします。「ページ番号の書式」BOXが開きます。
番号書式はプルダウンを開いて「1,2,3,・・・」にします。
連続番号は「開始番号」を「0」にします。
「OK」をクリックして、「ページ番号の書式」BOXを終了します。
「OK」をクリックして、「ページ番号」BOXを終了します。
すると・・・


つまり、1ページ目は表紙なので、ページ番号は"なし"で、
2ページ目から、ページ番号を"1"として
順番に連続して表示させてゆく、という設定。

これでレイアウトの設定は終了したので、誤字脱字のチェックなどの校正をします。
サブタイトルの太字化とか、改行位置の見直し、段落の設定。等。
(実は一番時間がかかる・・・)

これで、印刷しても完璧!!となったら、保存します。○○○○.doc(ワード書類)

ワードでの最後の作業。PDFファイル形式に変換して別ファイルとして保存します。

メニューバーの「 」から、「Automatorワークフローサンプル」を選択する。
開いたメニューから「ページの向きを保持してPDFファイルを保存」をクリックする。

すると・・・訳のわからない○○○○.pdfという名前で、
ワードからアクロバットに切り替わった画面で勝手に.pdfが開きます。


このまま、閉じても大丈夫。.docファイルが保存された同じフォルダに
.docファイルから継承された命名で、勝手に保存されています。

この場合は、「多すぎる容疑者.doc」と保存したので、
PDFも同じフォルダに「多すぎる容疑者.pdf」と保存されました。

アクロバットを閉じちゃうと、ワードも画面に残っていません。
という事は、ワードで完璧に作っておくべきですね。又ワードを起動するのもめんどうです。

という事は、同様に、「large」フォルダに作成して置くのが便利で、わかりやすいですね。

次はAcrobat(アクロバット)です。




はじめに。このソフトは、アドビリーダーではありません。
昔は、アクロバットリーダーと呼んでいた頃もあり、違いがわからず混同されがちですが、
アドビアクロバットは、リーダーの機能もありますが、PDF作成/編集ソフトです。
このソフトがパソコンに入っていなければ、ワードからPDF書き出しができません。

前おきは、さておき。
多すぎる容疑者.pdfを開きます。白い背景がさみしいので、色をつけます。
背景に使う画像は、あらかじめ作っておいた「BG.jpg」です。

 

メニューバーの「文書」を選択し、「背景」をクリックします。
さらにメニューが出るので、「追加/置換」をクリックします。




「背景の追加」BOXで、ソースの「ファイル」のラジオボタンにチェックし、
「選択」ボタンをクリックします。

「開く」BOXで、「BG.jpg」をポイントし、「開く」ボタンを押します。



「OK」をクリックし、 追加されるまで少し待ちます。


ワードやエクセルから作ったPDFには、フォントが埋め込まれていて、文章ファイルです。
これを、画像ファイルとして書き出します。

ツールバーの「書き出し」から、「JPEG」を選びます。
 

「別名で保存」BOXが開くので、「名前」テキストボックスに、
「O_」(オー・アンダーバー)と半角で入力します。

「拡張子を隠す」のチェックを外し、「保存」ボタンを押します。



画像として書き出しているので、ずいぶんかかります。完了したら、

 上書き保存して、Acrobatを終了します。

「large」フォルダを見てみると・・・

963個の.jpgファイルが書き出されました。
どうやら「_ページ_○○○.jpg」で連番で付加されるようです。








「0__ページ_001.jpg」は表紙なので、見栄えの良いものにしたい。
また、ページが奇数なので、新しく「0__ページ_964.jpg」を加えて偶数にします。

「0__ページ_001.jpg」を、フォトショップで開いて編集します。



上書き保存します。

これを利用して、裏表紙用の編集をします。



これは、「新規で保存」か「別名で保存」で「0__ページ_964.jpg」にします。



「large」フォルダの中身

[O__ページ_]001〜964の連番の.jpgファイル:964個
多すぎる容疑者.doc
多すぎる容疑者.pdf
BG.jpg
の、計967個


ページ素材つくりのための、フォトショップ利用は、ここまでです。

ここから下は、読み飛ばしても差し支えありません。




「 img 」フォルダに入っているもの



FlippingBook HTMLは、FLASH素材のビューワです。
ですが、「 img 」フォルダにある「部品」を使っているだけで、
各ボタンは、FLASHに埋め込まれている訳ではありません。

「 img 」フォルダの画像を変えるだけで更にカスタマイズできます。
これは、フォトショップの仕事です。

例えば、bookBackground.jpgは、グリーン色で、背景に使われてますが、
フォトショップで↓のように編集して、上書き保存します。
bookBackground.jpg

各ボタンも同様。。また、新しくこんな↓バナーもつくって
バナー

表示させれば、更にオリジナル感があがります。




ファイル名に、日本語などの2バイト文字が含まれるのは、WEBでは厳禁なので、
ファイル名を、アルファベットのみにします。

「ファイル名変換君」はウインドウズ用の   こんなアイコンです。

ベクターにあったフリーソフトです。「ファイル名変換君」を起動します。
まず、取り込み設定をします。

 

「フォルダ選択」ボタンをクリックして、「large」フォルダを選び、「OK」ボタンをクリック。

 

「取り込み」ボタンをクリック。
ファイルが正しく取り込まれたら、次は、実行設定とリネーム設定をします。

 


実行設定で、「選択ファイルのみリネーム」にチェックを入れる。
リネーム設定で、変更名のテキストボックスに「page_*」と半角入力する。
(ピー・エー・ジー・イー・アンダーバー・アスタリク)

リネームするファイルだけを選択します。
 

001.jpgから964.jpgまでを、「shift」キーで選択します。

 

「実行」ボタンをクリックして、完了したら、「ファイル名変換君」を終了します。

 

ファイル名がアルファベットのみになりました。




「プレビュー」は、Mac純正のイメージビューワです。
見るだけでなく、編集もできます。

ファイルの情報を見てみると、

プリントアウトに適したファイルでした。
実際の大きさは、モニターからはみ出るくらい大きいです。

「プレビュー」を使って、サイズダウンします。
何度か試しましたが、ファイル数が多すぎて、一度にできないので、3回に分けてやります。

300個くらいの.jpgファイルを選択します。

選択したら青く反転するので、そのうえで右クリックし、
コンテキストメニューから、
「このアプリケーションで開く」→「プレビュー.app」と選択します。

「プレビュー」のスライドショーが起動します。

 

サイドバーの白い場所を、クリックしてから、
キーボ−ドの「コマンド」キーと「A」キーを、同時におして、
サイドバーに表示されている、
全てのファイルを選択します。




メニューバーの「ツール」から、「サイズを調整」をクリックします。




縦横比にチェックが入っている事を確認して、高さ:1200、 解像度:72、と入力し、
「OK」ボタンを押します。

サイズダウンするまでしばらく待ちます。終了したら保存します。


メニューバーの「ファイル」から、「すべてを保存」をクリックします。

一旦、「プレビュー」を終了します。今やった事のキャッシュを削除する為です。
そうしないと、エンコードできる量がどんどん減っていってしまいます。

次の300個くらいの.jpgファイルを、同じように処理します。×2



964個の全ての.jpgファイルの、サイズダウンが終了しました。






「large」フォルダの964個の.jpgファイルを選択しコピーします。




ひとつ上の階層の「pages」フォルダに張りつけます。




「pages」フォルダの中の964個の.jpgファイルを「プレビュー」を使って、更にサイズダウンします。



以下、説明文章、省略















ここまでで、素材づくりは終了。。です。



「Dreamweaver」は、夢の「Dream」と、糸を紡ぐ人や織工という言葉の「Weaver」を合わせたものです。
よく呼ばれる「どりーむうぇーばー」は、残念ながら正式な呼び方ではありません
店頭でお買い求め頂く際などの場合は、声高に「ドリームウィーバー」と呼んで頂ければ幸いです。
と、アドビ社が、Q&A ページで発表しているそうですよ。

しかしながら、正式な美しい発音は、ドレームウィーヴァーだそうです。・・・ドレームって・・汗
ドリームウィーバーと書いている当人も、いまだに「どりーむうぇーばー」と発音してますが・・・笑

前おきは、さておき。。



フォルダの中身が、ずいぶん(変更日、サイズなど)変化しました。

表示用ファイル(pagesフォルダ内)のサイズ:564×800ピクセル 72dpi
拡大用ファイル(largeフォルダ内)のサイズ:846×1200ピクセル 72dpi

せっかく、多すぎる容疑者.pdf(300dpi)6.6MBがあるので、
これを使うとする場合は、ファイル名をアルファベットにしなければいけない。
とりあえず、「page.pdf」とファイル名を変えておく。


ドリームウィーバーで、直すファイル
liquid-green.css(カスケーディングスタイルシート)
flippingbooks.js(ジャバスクリプト)
bookSettings.js(ジャバスクリプト)
index.html(FLASHビューワ表示)


liquid-green.css(カスケーディングスタイルシート)をダブルクリックすると、ドリームウィーバーが起動します。



↑のように、1行目に「 @charset "UTF-8"; 」と加えます。これで日本語をFLASHが認識します。

6行目のフォントファミリーに、日本語フォントを入力します。↑では途中で切れていますが、

"ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Arial, Helvetica, sans-serif, "MS Pゴシック";

と入力しました。(改行しないでください。)

liquid-green.cssを保存して終了します。

次に、flippingbooks.js(ジャバスクリプト)を開きます。



↑のように、ブックのサイズを変更します。
11行目 表示ファイルの幅×2 bookWidth: 1128 ,
12行目 表示ファイルの高さ bookHeight: 800 ,
65行目 拡大ファイルの幅 zoomImageWidth: 846 ,
66行目 拡大ファイルの高さ zoomImageHeight: 1200 ,
「page.pdf」(多すぎる容疑者.pdf)を利用するとき。
82行目   downloadSize:Size: 6.6MB ,

※参考:日本の漫画や単行本、縦書きの小説などは、ページめくりが逆なので、
26行目の、firstPageNumber: は、最後のページ番号にします。

flippingbooks.js(ジャバスクリプト)を保存して終了します。

次に、bookSettings.js(ジャバスクリプト)を開きます。



同じように、ブックのサイズを変更します。
21行目 表示ファイルの幅×2 .bookWidth = 1128 ;
22行目 表示ファイルの高さ .bookHeight = 800 ;
28行目 拡大ファイルの幅 .zoomImageWidth = 846 ;
29行目 拡大ファイルの高さ .zoomImageHeight = 1200 ;
「page.pdf」(多すぎる容疑者.pdf)を利用するとき。
30行目 PDFへのパス .downloadURL ="pages/large/page.pdf" ;

一旦、保存します。次に、上の方の flippingBook.pages = [ を入力しますが、
964個も、タイピングするのは大変なので、エクセルを使います。
エクセルを起動し、


A1セルに[ "pages/page_001.jpg", ]と入力し、オートフィルで
ダ〜っと・・・964個つくり、コピーします。

ドリームウィーバーのflippingbooks.jsに戻って、貼付けます。又、一旦、保存します。

この段階で、もうFLASHビューワが見られます。

一番上の階層にある、index.html をダブルクリックすると、ブラウザが開くので、
実際にページをめくりながら、(確認も兼ねて)今度は、

flippingBook.contents = [ に、章、サブタイトル、ページ番号を入力します。

目次のようなもの、です。これは地道にタイピングするしかありません。

 

入力が完了したら、保存して終了します。

次に、ドリームウィーバーから、「index.html 」を開いて編集します。

5行目の、<title>〜</title>に
「Gorenje Kitchen 2008 online catalogue」と入力されているので、
「WEBブック・『多すぎる容疑者』著/○○○○」と直します。

これで全ての終了です。WEBブックの完成です。

更にカスタマイズしたくなったら、フォトショップの項の下の方を見て下さい。