Drupal7の画像モジュールを用いたVideo Galleryの構築

遅まきながらDruap7にUpgradeしましたでも述べたように、このサイトでは、Drupal6とDrupal7で、画像もジュールの使い方がガラリと変わったので、Drupal6によるVideo Galleryの構築を、Drupal7仕様に全面的に書き換えました。

◆使用したモジュール

 ・Drupal Core

Image 画像の操作を行います。
Taxonomy コンテンツを分類するためのタグを付けます。

 ・DrupalのPlugin

Video 動画ファイルのアップロードの際には、FLV変換とサムネイル抽出を行います。表示に際しては、動画(プレイヤー)とサムネイルの使い分けが可能です。
Video Presets Videoモジュールの事前設定を行います。
Flowplayer VideoがFLVを表示する際に使用するFlash Playerです。
Image resize filter 本文に画像を挿入する際、サイズを変更するフィルターです。
Taxonomy Menu Taxonomyで分類されたコンテンツを、Term毎にメニュー表示します。
Views コンテンツの検索結果を、様々なフォーマットで表示します。

・その他のフリーソフト

FFMPEG ビデオコーデックの変換やサムネイルの抽出を行います。

◆Videoのインストール

Videoモジュールは、動画のコード変換に、ZencoderかFFMPEGを使用します。Video 7.x-1.xまではFFMPEGが標準でしたが、Video 7.x-2.xからはZencoderが標準に変わりました。Video 7.x-2.xの使い方がまずいのかもしれませんが、Zencoderを選ぶとサムネイルがうまく抽出できません。また、FFMPEGを選ぶと、Video 7.x-1.xにあった設定項目がなくなっているので、FFMPEGはまともに機能しませんVideo 7.x-2.xにアップグレードすれば、本文中にビデオが挿入できると期待したのですが、Video 7.x-1.xに戻しました。

Zencoderと異なり、FFMPEGは別途インストールする必要があります。Red Hat系の場合、FFMPEGはRPMforgeから入手できます。Ubuntuの場合は、標準リポジトリに入っているので、apt-getでインストールできます。ただし、標準のコーデック・ライブラリ(libavcodec52)では、MP3をエンコードできないので、libavcodec-extra-52をインストールする必要があります。

Flash Playerをインストールせずに、Videoモジュールを有効化すると、PlayersタブにSWF ToolsかFlowplayerをインストールするように表示されます。しかし、SWF ToolsはDrupal7に対応していないので、選択肢はFlowplayerしかありません。

Configuration » Media » Video で設定する必要のある項目は、下記の通りです。

  • Generalタグ:動画ファイルのFLV変換は、“Video convert on node submit”をOnにすると、コンテンツを保存するときに行われます。Offにすると、Cronの際にバッチで変換されます。動画が短い場合は、Onにした方が結果を直ぐに確認できるので便利です。しかし、動画が長い場合は、Onにすると保存処理で長時間待たされることになります。私は、短い動画しか登録していないので、Onにしています。
  • Playersタグ:Flash Player for f4v と Flash Player for flv で Flowplayer を選択します。
  • Transcodersタグ:Video ThumbnailsのAdvanced SettingsのVideo thumbnailer options に -s ...x... を追加します。...x...はサムネイルのサイズですが、Imageのサムネイルのサイズ(Configuration » Media » Image styles で設定する)にそろえた方が綺麗です。
  • Manage Presetタグ:FLVを選択し一旦保存します。デフォルトでは画像が荒いので、editをクリックし、Command Line OptionsのCommand line codes to runにビットレート -b ... を追加します。

◆ Blog entryにImage Fieldを追加

ブログに挿入した画像を、Teaserにサムネイルで表示するためにBlog entryに手を加えます。Blog entryにImage Fieldを追加し、Image Fieldに一旦アップロードした画像を、別途 Image resize filter を用いて本文に挿入します。Teaserには、Image Fieldをサムネイル表示します。全文表示に際しては、Image Fieldは非表示にします。

Structure » Content typesの画面で、Blog entryのmanage fieldsをクリックします。先ずAdd existing fieldを確認し、Image Fieldがあればそれを使用します。なければ、Add new fieldで、Image Fieldを作成します。Field TypeでImageを選択すると、Widgetは自動的にImageに切り変わるので、LabelとField nameに適当な名前を入れて、一旦保存します。引き続き設定画面が現れるので、次の項目を設定します。

  • “Required field”は画像を張り付けないブログもあるのでOffのままにします。
  • /sites/.../filesの下に画像用のサブディレクトリを作りたいときは、“File directory”にその名前を記入します。
  • “Maximum image resolution”で画像の最大値を設定します。それを越える画像をアップロードすると、自動的に縮小してくれます。私は、1024x1024に設定しています。
  • “Number of values”は、ブログに何枚でも画像を貼り付けられるように、Unlimitedに設定します。

 Manage Display画面でDefaultを選択し、Image FieldのFormatを<Hidden>にし、全文表示の際にImageがFieldとして表示されないようにします。Imageは、別途 Image resize filter を用いて、本文中に挿入します。そのためには、Configuration » Content authoring » Text formats で使用するformatをconfigureし、Image resize filter を有効化する必要があります。また、Configuration » Content authoring » Wysiwyg profiles で使用するformatをEditし、Buttons and Plugins のImageを有効化すれば、Wysiwyg Editorで挿入できるようになります。

Manage Display画面でTeaserを選択し、Image FieldのFormatをImageにします。しかし、このままではTeaserにOriginal imageが表示されるので、右横の編集ボタンをクリックし、Image styleをthumbnailに変更します。また、Link image toで画像のリンク先を指定できます。Contentを選択すればコンテンツの全文表示に、Fileを選択すればOriginal imageにリンクします。

◆Galleryの作成

○Menu

Taxonomy Menuを組み込むmenuを作成します。Navigation等既存のmenuに組み込む場合は、必要ありません。 Structure » MenusでAdd menuをクリックし、Titleを入力します。英数字を入力した場合はURL pathが自動生成されますが、日本語の場合は別途入力する必要があります。保存すれば完了です。

Taxonomy

Structure » TaxonomyでAdd vocabularyをクリックし、Nameを入力します。Menuと同様、英数字を入力した場合は Machine nameが自動生成されます。Menu locationに作成したMenuを選択します。Menu path typeは、Defaultしか選択できません。Defaultでは、taxonomy_termというViewしか使えないので、Taxonomyにより表示を変えたいときに困ります。README.txtには、“The modules Taxonomy Menu Custom Path and Taxonomy Menu Hierarchy provide additional path configuration types (see the "INTEGRATION WITH VIEWS MODULE" section below). ”とあるので探したのですが、そのようなモジュールは見つかりませんでした。

Structure » Taxonomyでadd termsをクリックし、画像を分類するタグを登録します。その際、RelationsのParentsを選択すれば、階層メニューが作れます。

Content type:Image

ギャラリーに登録する画像を格納するコンテンツを作成します。

Structure » Content typesでAdd content typeをクリックし、NameにImageを入力します。Machine nameは自動的にimageに設定されます。Display settingsの“Display author and date information.”で、コンテンツに“Author username and publish date”を表示するか否かを選択できます。私は、ギャラリーをすっきりさせるため、このチェックを外しています。

ここで一旦保存すると、Structure » Content typesの一覧にImageが加わります。この段階では、Content type:Imageには、TitleとBodysしかありません。続いて、Structure » Content typesの画面で、Imagemanage fieldsをクリックし、画像を登録するImage Fieldと、Taxonomy Termを登録するTerm Reference Fieldを追加します。

Image Fieldを登録する方法は、Blog entryと同じです。ただし、このコンテンツは、必ず一つだけ画像を格納するので、“Required field”はOnに、“Number of values”は1に設定します。

Add new fieldのField TypeでTerm Referenceを選択します。Wiget は、“Select list”か“Check boxes/radio buttons”か“Autocomplete term widget(tagging)Image”の中から選択します。最初の二つは、コンテンツにタグを付ける際、事前登録したタグのリストから選択します。この二つには、文字列を直接クリックして選択するか、チェックボックスをクリックして選択するかの違いしかありません。“Autocomplete term widget(tagging)Image”は、付けたいタグを直接文字列で入力します。タグを事前に登録する必要はありません。

LabelとField nameに適当な名前を入れて、一旦保存すると、設定画面が現れます。最初の画面では、Vocabulary欄でギャラリー用に作成したTaxonomyを選択します。保存すると、次の設定画面が現れます。登録した画像を全てギャラリーに表示したければ、“Required field”をOnにします。また、複数のタグ付けを認めるならば(同じ画像がメニューの中に複数登場してもよければ)、“Number of values”に1以外の値を設定します。

Manage Display画面で、全文表示およびTeaserにおける各フィールドの表示方法を指示します。ギャラリーは、サムネイルの一覧にしたいので、TeaserではBodyを非表示にしています。

Content type:Video

ギャラリーに登録するビデオを格納するコンテンツを作成します。

Structure » Content typesでAdd content typeをクリックし、NameにVideoを入力します。Machine nameは自動的にvideoに設定されます。ギャラーには、画像とビデオを混在させるので、Content type:ImageとContent type:Videoの表示設定は、揃えないと不細工です。

ここで一旦保存すると、Structure » Content typesの一覧にImageが加わります。この段階では、Content type:Videoには、TitleとBodysしかありません。続いて、Structure » Content typesの画面で、Videomanage fieldsをクリックし、ビデオを登録するVideo Fieldと、Taxonomy Termを登録するTerm Reference Fieldを追加します。

Add new fieldで、Video Fieldを作成します。Field TypeでVideoを選択すると、Widgetは自動的にVideo Uploadに切り変わるので、LabelとField nameに適当な名前を入れて一旦保存すると、設定画面が現れます。最初の画面では、“Enable video conversion.”と“Automatically generate thumbnails”をOnに設定し、再び保存します。次の画面では、“Required field”はOnに、“Number of values”は1に設定します。

Term Reference Fieldは作成済みなので、Add existing fieldから選択します。設定は、Content type:Imageに合わせてください。

Manage Displayの設定も、Content type:Imageに合わせてください。

Views

Structure » ViewsでTaxonomy termを有効化し、編集します。編集する項目は下記の通りです。

  • Format:Unformatted listをクリックし、Gridに変更し、一旦保存します。Gridの属性画面に変わるので、Number of columnsに一行に表示するティーザーの数を入力し、一旦保存します。Gridの属性は、Settingsをクリックすれば、後から変更できます。
  • Show:Content | Teaserになっていることを確認し、違って居れば変更してください。
  • Paged, 10 itemsをクリックし、一ページに表示するティーザーの数を変更してください。
  • Filter Criteriaを追加します。Content: Typeを選択し、一旦保存します。Is one ofとImageとVideoを選択し保存します。

Blocks

Structure » Blocksで、作成したMenuを、sidebar firstに表示します。