pict-drupal-module.pngTinyBrowserモジュールはTinyMCEやFCKeditなどのWYSIWYGエディタのファイルブラウザとして使えるTinyBrowserをDrupalに組み込みためのオリジナルモジュールです。

TinyBrowserについて

TinyBrowserはWYSIWYGエディタTinyMCEのカスタムファイルブラウザとしてLunarvisのBryn Jones氏により開発されたものでGNUパブリックライセンスで配布されているオープンソースのソフトウェアです。

TinyBrowserの特徴

  • TinyMCEやFCKeditorに組み込んで画像ファイル、メディアファイル、一般ファイルのファイルブラウザーとして利用できます
  • Flashベースのファイルアップローダは複数ファイルの一括アップロードに対応
  • サムネイルを用いた見やすく直感的なブラウザー画面とインターフェイス
  • サブフォルダの作成や削除も可能
  • ファイルのリネーム、画像のリサイズ、回転などの編集機能を実装
  • 一覧項目の中から絞り込み検索可能
  • 一覧項目をファイル名、サイズ、作成日、タイプなどでソート可能
  • 他の方法で追加されたファイルのサムネイルも自動作成

これはTinyBrowserを画像ファイルモードで起動した時に表示される画像ブラウザの画面です。このようにサムネイル表示を使ってファイルのブラウズが直感的にできるようになっています。

ss-tinybrowser-1.png
以下はファイルのアップロード画面です。このように複数ファイルを指定して一括でダウンロードできるのがTinyBrowserの最大の特徴です。

ss-tinybrowser-2.png TinyBrowserモジュールは、このTinyBrowserをDrupalに統合するためのモジュールです。

TinyBrowserモジュールの特徴

  • 複数サイトや複数ユーザー、複数ロールに対応
  • アップロードディレクトリの最大サイズ割り当て(quota)機能に対応
  • IMCEモジュールのコードを一部流用し、環境設定画面のUIなども同じようにすることでIMCEを利用している人が違和感なく使えるようにしています。
  • TinyMCE、FCKEditor、CKEditorといった最もポピュラーなWYSIWYGエディタに対応
  • TinyTinyMCEモジュール、FCKeditorモジュール、CKEditorモジュール、Wysiwygモジュールをサポート
  • ユーザプロファイルページにファイルブラウザメニュを追加
  • TinyBrowser本体のソースコードに対してもセキュリティ対策の強化

動作条件

  1. クリーンURLが有効になっていること
  2. サイトのsettings.phpで、$cookie_domainが有効に指定されていること
  3. PHP safe_mode (セーフモード)がOFFになっていること
  4. Javascriptの最適化がOFFでJavascript Aggregatorモジュールを使っていないこと
    JavscriptのアグリゲーションがONになっているとうまくTinyBrowserは動作しません。

使用条件

TinyBrowserはセキュリティのためにサイトにログインした認証ユーザでないと使用することができません。

インストール

  1. まず、TinyBrowserモジュールの最新版をDrupal.orgのプロジェクトページよりダウンロードします。
    TinyBrowserモジュール
    http://drupal.org/project/tinybrowser

    ダウンロードした最新版のアーカイブを通常のモジュールと同様にsites/all/modulesディレクトリにて展開します。sites/modules/all/tinybrowserというディレクトリが作成されます。尚、TinyBrowserモジュールはTinyBrowserプラグインの本体も含んでいますので、別途ダウンロードする必要はありません。

  2. サイトの設定ファイルsettings.phpで$cookie_domainが有効になっていない場合にはこれを有効にします。settings.phpは通常書き込み不可のパーミッションになっていますので書き込み可にしてから変更をし、再び書き込み不可に戻す必要があります。

  3. 管理セクション>サイトの構築>モジュール ページでTinyBrowserモジュールを有効にします。

  4. 管理セクション>サイトの環境設定>TinyBrowserでモジュールの設定ページに進みます。

    まずここでTinyBrowserを使用するWYSIWYGエディタを指定します。TinyBrowserモジュールはインストールされているモジュールやWYSIWYGエディタを調べて可能な限り自動的にこの選択をおこないますのでもし選択されているものが正しければそのままにしておいてください。
    TinyBrowserは現在TinyMCE、FCKeditorもしくはCKEditorと使用することができます。WYSIWYGエディタを使用せずに、プレインテキストエリアを使用する場合にはNoneを選択してください。

    TinyBrowserを使用するユーザロールとプロファイルの設定をおこないます。インストール直後は管理者のみが最大権限をもった状態でTinyBrowserを使用することができるようになっています。必要に応じて認証ユーザや、他のユーザロール用のプロファイルを作成して割りあてをおこなってください。この設定画面はIMCEモジュールの設定画面に準じていますのでIMCEを使っている場合にはすぐに使いこなせると思います。

    TinyBrowserは一般ファイル、画像ファイル、メディアファイル(Flashやムービーなど)の3つのファイルタイプをサポートしています。画像ファイルの場合にのみ、サムネイルでの一覧表示や、画像のリサイズ、回転をサポートします。それぞれのタイプで使用するディレクトリを指定することができます。

    また、ディレクトリの使用量に制限(Quota)をつけることも可能です。制限がつけられた場合には、そのディレクトリとその下に含まれる全てのファイルやディレクトリの総量がQuotaの指定サイズを超えた場合に、TinyBrowserによるファイルのアップロードはできなくなります。

    あと重要になるのは許可する操作の選択です。アップロード操作とサブフォルダ操作、削除操作などは場合によってはサイトのセキュリティリスクにつながりますので慎重に検討してから決定してください。

インストール・WYSIWYGエディタモジュールの設定

TinyBrowserモジュールをTinyMCE、FCKEditorもしくはCKEditorから使用する場合には、上記のインストールとセットアップに加えてここで説明されている設定をおこなう必要があります。TinyBrowserが対応しているWYSIWYGエディタモジュールとWYSIWYGエディタの組み合わせは現在以下のようになっています。
  1. TinyTinyMCEモジュール + TinyMCE
  2. Wysiwygモジュール + TinyMCE
  3. FCKeditorモジュール + FCKeditor
  4. Wysiwygモジュール + FCKeditor
  5. CKEditorモジュール + CKEditor
  6. Wysiwygモジュール + CKEditor
それぞれのケースで必要となるセットアップが異なりますのでここでは各ケースごとに説明していきます。
  1. TinyTinyMCEモジュール + TinyMCE の場合

    TinyTinyMCEモジュールの設定ページでAdvanced用のTinyMCE.initスクリプトに以下の行を追加(既にある場合は変更)する必要があります。

    file_browser_callback: tinyBrowser

    この行を追加するとこんな感じになります。ちなみにこの行は大文字小文字の区別をしますのでこのままの通り「tinyBrowser」としないとダメです。「tinybrowser」とか「TinyBrowser」ではうまく動作しませんので注意してください。
    1.   tinyMCE.init({
    2.     mode : "exact",
    3.     file_browser_callback: "tinyBrowser",  // これが追加した所
    4.     init_instance_callback: "resizeEditorBox",
    5.     theme: "advanced",
    6.     convert_urls: flase,
    7.     plugins: "safari,pagebreak ....
    8.      :
    9.    theme_advanced_buttons1: "bold,italic,underline ...
    10.       :
    11.   });
    尚、ツールバーのイメージ、メディア、リンクアイコンが有効になっていない場合は使いたいタイプのアイコンを有効にしてください。

  2. Wysiwygモジュール + TinyMCE の場合

    Wysiwygモジュールの設定ページでTinyMCEを割り当てた入力書式を編集します。Button and PluginセクションにTinyBrowserというチェック項目が追加されているはずですので、ここをチェックします。
    尚、ツールバーのイメージ、メディア、リンクアイコンが有効になっていない場合は使いたいタイプのアイコンを有効にしてください。

  3. FCKeditorモジュール + FCKeditor の場合

    この場合はちょっと面倒です。現時点ではこのケースの場合にはFCKeditorモジュールのメインソースfckeditor.moduleを一部修正(パッチをあてる)必要があります。パッチはこのページの一番下の所からダウンロードできます。パッチはFCKeditorモジュールのバージョン6.x-1.4用と6.x-2.1用が用意してあります。

    6.x-1.4用の場合はfckeditor.moduleファイルのみにパッチを適応します。6.x-2.1用の場合にはアーカイブに2つのパッチファイルがありますので、fckeditor.moduleとfckeditor.admin.incのそれぞれにパッチをあててください。パッチをあてたらFCKeditorモジュールの設定ページに行きます。ここで、File browser settingsセクションの使用可能なファイルブラウザのリストにTinyBrowserが追加されているはずですので選択します。尚、このセクションにあるディレクトリ指定はTinyBrowserの場合には使用されませんので注意してください。FCKeditorの場合、管理セクション>ユーザ>権限のページで、アップロードの権限を指定しないとそのままではTinyBrowserでファイルのアップロードはできませんので注意してください。
    尚、ツールバーのイメージ、メディア、リンクアイコンが有効になっていない場合は使いたいタイプのアイコンを有効にしてください。

  4. Wysiwygモジュール + FCKeditor の場合

    Wysiwygモジュールの設定ページでFCKeditorを割り当てた入力書式を編集します。Button and PluginセクションにTinyBrowserというチェック項目が追加されているはずですので、ここをチェックします。FCKeditorの場合、管理セクション>ユーザ>権限のページで、アップロードの権限を指定しないとそのままではTinyBrowserでファイルのアップロードはできませんので注意してください。
    尚、ツールバーのイメージ、メディア、リンクアイコンが有効になっていない場合は使いたいタイプのアイコンを有効にしてください。

  5. CKEditorモジュール + CKEditor の場合

    現在のCKEditorモジュールはTinyBrowserをサポートしていますので最新のCKEditorと一緒に使う場合にはパッチ等は必要ありません。CKEditorモジュールの設定ページに行き、File browser settingsセクションの使用可能なファイルブラウザのリストにTinyBrowserが追加されているはずですので選択します。尚、このセクションにあるディレクトリ指定はTinyBrowserの場合には使用されませんので注意してください。CKEditorの場合、管理セクション>ユーザ>権限のページで、アップロードの権限を指定しないとそのままではTinyBrowserでファイルのアップロードはできませんので注意してください。
    尚、ツールバーのイメージ、メディア、リンクアイコンが有効になっていない場合は使いたいタイプのアイコンを有効にしてください。

  6. Wysiwygモジュール + CKEditor の場合

    Wysiwygモジュールの設定ページでCKEditorを割り当てた入力書式を編集します。Button and PluginセクションにTinyBrowserというチェック項目が追加されているはずですので、ここをチェックします。CKEditorの場合、管理セクション>ユーザ>権限のページで、アップロードの権限を指定しないとそのままではTinyBrowserでファイルのアップロードはできませんので注意してください。
    尚、ツールバーのイメージ、メディア、リンクアイコンが有効になっていない場合は使いたいタイプのアイコンを有効にしてください。

以上がTinyBrowserモジュールのインストールとセットアップの簡単な説明です。設定を保存したら実際に使ってみましょう。使い方については長くなりましたので次のページで紹介します。

関連サイトへのリンク

TinyBrowser
http://www.lunarvis.com/products/tinymcefilebrowserwithupload.php
TinyBrowser Google Group (サポートフォーラム)
http://groups.google.com/group/tinybrowser

TinyMCE
http://tinymce.moxiecode.com
FCKeditor / CKEditor
http://ckeditor.com
TinyTinyMCE module
http://drupal.org/project/tinytinymce
FCKeditor module
http://drupal.org/project/fckeditor
CKEditor module
http://drupal.org/project/ckeditor
Wysiwyg module
http://drupal.org/project/wysiwyg

 

添付サイズ
fckeditor-6.x-1.4.module.patch2.35 KB
fckeditor-6.x-2.1-module-tinybrowser-patch.tar.gz850 byte
まだ投票はありません