今のサイトのGalleryには、女房の手芸作品の写真しか表示していません。旧サイトでは、女房の手芸作品の写真も熊五郎のトレーニング・ビデオも同じGalleryに表示していました。旧サイトのGallery方が、技術的には凝っていたので、それを紹介します。
◆使用したモジュール
・DrupalのPlugin
| FlashVideo | Videoの登録と再生等の機能を提供します。 |
| Content Templates (Contemplate) |
Content Construction Kit (CCK)の拡張モジュールで、コンテンツのティーザーや本文のテンプレートを変更できます。 |
| Image | Drupalで静止画を取り扱う基本的なモジュールで す。その一部であるImage Galleryが提供するViewのSettingを変更し、Videoを表示します。 |
| Taxonomy Menu | Image やVideoに付けたTagをメニュー化します。 |
| Views |
DrupalのContentsを表示する様々なViewが作成できます。Image GalleryのViewのSettingを変更したり、新着画像のViewを作成します。 |
| inline | Video Galleryには直接関係しませんが、ブログに画像を一枚だけ挿入するのに便利です。teaserとbodyで自動的に画像の大きさが変わります。 |
| image assist | Video Galleryには直接関係しませんが、ブログの任意の位置に任意の大きさで、画像を挿入することが出来ます。但し、貼り付けた画像がそのままteaserにも表示されます。 |
・その他のフリーソフト
| FFMPEG | FlashVideoが様々な形式のVideoを登録する際、FFMPEGを使用し、FLV形式に変換します。 |
| Flash Player | FlashVideoが、FLV形式のVideoを再生する際に使用します。 |
◆FlashVideoのインストール
FlashVideoのH/Pにtutorialがあり、基本的にはそれに従いますが、親切とは言い難いtutorialです。
・FFMPEG
tutorialには、CirtexHostingと契約すればFFMPEGはすぐに使えると書いてあるだけで、FFMPEGのインストールに関しては一切言及していません。Red Hat系の場合、FFMPEGはRPMforgeから入手できます。
Ubuntuの場合は、標準リポジトリに入っているので、apt-getでインストールできます。ただし、標準のコーデック・ライブラリ(libavcodec52)では、MP3をエンコードできないので、libavcodec-extra-52をインストールし、libmp3lameでエンコードする必要があります。
・Flash Player
Flash Playerとしては、Dash Media PlayerとJW Playerが選択できます。FlashVideoとの相性はDash Playerの方が良いようです。しかし、Plyaerとしては、JW Playerの方がポピュラーだと思われるので、私は、JW Playerを選択しました。JW Playerは、http://www.longtailvideo.com/からダウンロードし、player.swfを、sites/default/files/にコピーします。
・VideoをAttachするContent typeの登録
Image moduleをインストールするとImageというContent typeが自動的に登録されます。そのビデオ版に相当するVideoというContent typeを、Content Templatesを使って登録します。
Content management > Content types > Add content typeを開きます。Name:Video、Type:videoを入力します。Workflow settingsのDefault optionsのPublishedは無効にします。一旦Saveします。VideoをEditし、Template tabを開きます。Teaserを開き、“Affect teaser output” を選択すると、“Teaser Template”が入力可能になるので、thumbnail tagを追加します。
| <?php print $teaser ?> [thumbnail] |
同様に、Bodyを開き、“Affect body output” を選択すると、“Body Template”が入力可能になるので、video tagを追加します。
| <?php print $body ?> [video] |
・FlashVideoの設定
Site configuration > FlashVideo を開くと、最初にphpのパラメータの推奨値と設定値が並んでいます。設定値が推奨値を下回っていたら、php.iniあるいは.htaccessを修正し、apacheをreloadしてください。
VideoのsettingsをEditします。“Enable the FlashVideo for all nodes of this type: video”と“Require the FlashVideo for this node type.”と“Convert videos immediately.”は有効に、“Disable the [video] tag.”と“Change Node Status after Conversion.”は無効にします。ビデオのFLV形式への変換は、一般には、upload時には行わず、cronで行っているようです。しかし、私は、upload時に結果を確かめたいので、直ぐに変換するように設定しています。直ぐにといっても、Attachでは変換されず、一旦Saveしないと変換されません。したがって、Saveと同時にPublishされないよう“Published”は無効にしています。
Flash Player Settingsを開きます。Flash Player Nameを、player.swf(sites/default/files/にコピーしたFlash Playerの名前)に変更してください。Dash Media Playerの場合は、変更の必要がありません。私は、“Default AutoStart”をfalseに変更し、Video contentを開いても、自動的にビデオが始まらないようにしています。
FFMPEG settingsを開きます。ffmpeg Command:では、ffmpegでuploadしたvideo fileをflvに変化する際に使用するオペランドを指定します。defaultでは画像が荒すぎるので、私は“-b 1000k”オプションを追加しました。また、Ubuntuの場合、本来ならば -acodecをlibmp3lameに変更しなければならないはずですが、FlashVideoが、libmp3lameが有効な時は、mp3をlibmp3lameに書き換えるので、その必要はありません。
| -i @input -f flv -acodec mp3 -ar 22050 -ab 64k -ac 1 -b 1000k @output |
ffmpeg Thumbnail Command:では、ffmpegでThumbnailを作成する際のオペランドを指定しますが、変更の必要はありません。Video Default Sizeは、カメラに合わせて“640x480”にしました。
これで、Videoがuploadできるはずです。Create content > Videoで確かめて下さい。
◆Video Galleryの作成
・Munu
Taxonomy Menuを組み込むmunuを作成します。Navigation等既存のmunuに組み込む場合は、必要ありません。 Site building › Menus > Add menuを開き、Menu nameとTitleを入力し、saveすれば完了です。
・Image Galleriesの設定
Content management > Taxonomyを開き、Image Galleriesをeditし、Content typesにVideoを追加します。
Settingsで、contentをCreateするときの、Tag itemの入力方法を設定します。Tagsを有効にすると、Tag itemを自由に文字列で入力できます。Tagsを無効にすると、登録済みのitemから、Tagを選択するように変わります。Multiple selectを有効にすると、一つのcontentに複数のTagが付けられます。Requiredを有効にすると、Tagを付けないと、contentを登録できなくなります。
Taxonomy menuのMenu locationでTaxonomy menuを組み込むmenuを選択します。
Optionsで、Taxonomy menuの表示方法を設定します。Synchronise changes to this vocabularyを有効にすると、Tag itemを編集すれば、それに同期してTaxonomy menuも変わります。Hide empty termsを有効にすると、contentを含まないTag itemはmenuに表示されません。Add item for vocabularyを有効にすると、vocabularyの名前（この場合はVideo Gallery）が、Taxonomy menuの先頭に表示されます。Auto expand menu itemsを無効にすると、Taxonomy menuはクリックされるまで展開されません。
add termsで、Tag itemを入力します。その際、Advanced optionsのParentsを指定すれば、階層メニューが作れます。
・Views
image_galleryのviewを、Videoも合わせて表示できるようにするとともに、私の好みに合わせて変更しました。Site building > Viewsを開き、image_galleryをEditします。
FiltersでこのViewに表示するcontentを選択します。初期状態では、Node: Type=Imageとなっているので、これをクリックし、Videoを追加します。
Sort criteriaでこのView内の、contentの表示順を指定します。“+”をクリックすれば、新しい条件文を入力できます。既存の条件文を選択し、“Remove”をクリックすれば、条件文が削除できます。
Basic settingsでcontentの見せ方を設定できます。私は、Style: Grid, Number of columns: 4, Alignment:Horizontal 、Row style: Node, Build mode: Teaserに設定し、contentのTeaserが水平方向に４つ並ぶように設定しました。contentのTeaserを表示すれば、Videoの場合はVideoのthumbnailが、Imageの場合はImageのthumbnailが、自動的に表示されるので、content typeの違いを吸収できます。ただし、本文に長い文章を入れると、Teaserが長くなり過ぎ見づらくなるので、本文に<!--break-->を入れてTeaser を短くする必要があります。
・Blocks
Site building > Blocksで、作成したMenuを、sidebar first Regionに表示します。
◆新着画像を紹介するBlockの作成
ImageとVideoをTagで分類せず、新しい順番に表示するBlockを作成しました。
Site building > Viewsを開き、image_galleryをCloneします。View name: image_recentを入力し、Nextをクリックします。TitleをRecent Imagesに変更します。ArgumentsのTaxonomy: Term Idを削除します。Style: GridのNumber of columnsと、Items per pageを5に変更します。
Site building > Blocksで、image_recent: Blockをconfigureします。Block titleを新着画像に変更します。Page specific visibility settingsでShow on only the listed pages.を選択し、Pages: を下記のように設定します。
| <front> Node/* |
最新画像のBlockは、front pageとcontentを表示するときのみ、表示されます。一覧等が表示されるときは、表示されません。
Saveし、content top Regionに表示します。ただし、私の使用しているAcquia MarinaというThemeには、content top Regionがありますが、一般のThemeにはないので、表示位置は工夫してください。