スポンサーリンク

File Entity Browserのインストールと実際に使ってみた感想を記載します。
composerで管理しているdrupalサイトの例で説明します。
※composer requireコマンドはdrush8でのdrush dl モジュール名と解釈してください。インストールと表記しているのはプロジェクトへのインストールといういみあいでdrupalシステムからすればダウンロードといえます。
※パッケージ名はdrupal/モジュール名であり、モジュール名はプロジェクトサイトのURIの最後の部分です。「URIがhttps://www.drupal.org/project/file_browser」ならモジュール名は「file_browser」です。

File Entity Browserのインストール

要件になっているモジュールが必要です。
composerを使えばコマンド1行で要件になっているモジュールなどすべてプロジェクトへインストールしてくれます。
今回の例なら以下になります。

$ composer require drupal/file_browser
Using version ^1.1 for drupal/file_browser
./composer.json has been updated
> DrupalProjectcomposerScriptHandler::checkComposerVersion
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 6 installs, 0 updates, 0 removals
  - Installing drupal/embed (1.0.0): Loading from cache
  - Installing drupal/entity_embed (1.0.0-beta2): Loading from cache
  - Installing drupal/entity_browser (1.5.0): Loading from cache
  - Installing drupal/dropzonejs (2.0.0-alpha3): Loading from cache
  - Installing drupal/file_browser (1.1.0): Loading from cache
drupal/dropzonejs suggests installing enyo/dropzone (Required to user drupal/dropzonejs. Dropzone is an easy to use drag'n'drop library.)
Writing lock file
Generating autoload files
> DrupalProjectcomposerScriptHandler::createRequiredFiles

※この段階ではまだdrupalでは使えません。モジュール一覧にdisableとして表示されるだけです。
※有効にするにはdrush en モジュール名を実行するか管理画面から「/admin/modules」にアクセスして有効にする必要があります。

しかし、弊害としてcomposer remove をするとrequireしたときにダウンロードしたすべてを一括削除します。

$ composer remove drupal/file_browser
> DrupalProjectcomposerScriptHandler::checkComposerVersion
Dependency "drupal/core" is also a root requirement, but is not explicitly whitelisted. Ignoring.
Dependency "drupal/core" is also a root requirement, but is not explicitly whitelisted. Ignoring.
Dependency "drupal/core" is also a root requirement, but is not explicitly whitelisted. Ignoring.
Dependency "drupal/core" is also a root requirement, but is not explicitly whitelisted. Ignoring.
Dependency "drupal/core" is also a root requirement, but is not explicitly whitelisted. Ignoring.
Dependency "drupal/core" is also a root requirement, but is not explicitly whitelisted. Ignoring.
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 0 installs, 0 updates, 6 removals
  - Removing drupal/file_browser (1.1.0)
Deleting web/modules/contrib/file_browser - deleted
  - Removing drupal/entity_embed (1.0.0-beta2)
Deleting web/modules/contrib/entity_embed - deleted
  - Removing drupal/entity_browser (1.5.0)
Deleting web/modules/contrib/entity_browser - deleted
  - Removing drupal/embed (1.0.0)
Deleting web/modules/contrib/embed - deleted
  - Removing drupal/dropzonejs (2.0.0-alpha3)
Deleting web/modules/contrib/dropzonejs - deleted
Writing lock file
Generating autoload files
> DrupalProjectcomposerScriptHandler::createRequiredFiles

これはcomposer.jsonのrequire行をよく見れば納得できます。

composer require drupal/file_browserに対して、「"drupal/file_browser": "^1.1"」が1行追加されています。
composer remove drupal/file_browserに対して、「"drupal/file_browser": "^1.1"」が1行削除されるのでrequireが記述してないモジュールは削除されるのは当然です。

少し複雑な例では、Entity Browserだけ別途2.xをダウンロードし、そのあと、File Entity Browserをダウンロードするとどうなるか?
composer.jsonのrequireには以下2行が追加されます。

  • "drupal/entity_browser":"^2.0"
  • "drupal/file_browser":"^1.1"

その後、Entity Browserを削除するためにcomposer remove drupal/entity_browserを実行するとどうなるでしょう。

$ composer remove drupal/entity_browser
drupal/entity_browser is not required in your composer.json and has not been removed
> DrupalProjectcomposerScriptHandler::checkComposerVersion
Dependency "drupal/core" is also a root requirement, but is not explicitly whitelisted. Ignoring.
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 0 installs, 1 update, 0 removals
  - Updating drupal/entity_browser (2.0.0-alpha3 => 1.5.0): Downloading (100%)
Writing lock file
Generating autoload files
> DrupalProjectcomposerScriptHandler::createRequiredFiles

composer.jsonの"drupal/entity_browser":"^2.0"行が削除されますが、"drupal/file_browser":"^1.1"が残っているので、この要件にあう1.5.0にアップグレードされ、結果、削除ではなくバージョンダウンとなります。
このことを理解していれば、一括で削除されないようにするにはcomposer.jsonのrequire行にモジュール1つにつき1行記載すればよいことがわかります。

少し脱線しましたが・・・

今回はEntity Browserモジュールはあえて2.0を使いたいのとEntity Embedモジュールはほかのモジュールの要件にもなりそうなのでこの2つはわけてインストールしました。

Entity Browserモジュールのインストール

8.x-2.x branch information

8.x-2.x is a branch with support for the core media entity. You should only update to this version if you are using core version. If you are still using contrib version of Media entity keep using 8.x-1.x versions. If you are not using Media entity at all it should make any difference.

コアのmedia entityとはコアのMediaのことです。
contribのMedia Entityを使う場合は、Entityモジュールも必要になると思います。
コアのMediaを使うため2.0系をダウンロードするようにしました。

$ composer require drupal/entity_browser:^2.0
./composer.json has been updated
> DrupalProjectcomposerScriptHandler::checkComposerVersion
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing drupal/entity_browser (2.0.0-alpha3): Downloading (100%)
Writing lock file
Generating autoload files
> DrupalProjectcomposerScriptHandler::createRequiredFiles

Entity Embedモジュールのインストール

Entity Embedモジュールの要件にEmbedモジュールがありますので、これが一緒にインストールされます。

$ composer require drupal/entity_embed
Using version ^1.0@beta for drupal/entity_embed
./composer.json has been updated
> DrupalProjectcomposerScriptHandler::checkComposerVersion
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 2 installs, 0 updates, 0 removals
  - Installing drupal/embed (1.0.0): Loading from cache
  - Installing drupal/entity_embed (1.0.0-beta2): Loading from cache
Writing lock file
Generating autoload files
> DrupalProjectcomposerScriptHandler::createRequiredFiles

File Entity Browserモジュールのインストール

その他のモジュールは一括でインストールします。

$ composer require drupal/file_browser
Using version ^1.1 for drupal/file_browser
./composer.json has been updated
> DrupalProjectcomposerScriptHandler::checkComposerVersion
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 3 installs, 0 updates, 0 removals
  - Installing drupal/dropzonejs (2.0.0-alpha3): Loading from cache
  - Installing drupal/file_browser (1.1.0): Loading from cache
drupal/dropzonejs suggests installing enyo/dropzone (Required to user drupal/dropzonejs. Dropzone is an easy to use drag'n'drop library.)
Writing lock file
Generating autoload files
> DrupalProjectcomposerScriptHandler::createRequiredFiles

プラグインライブラリのインストール

dropzonjsモジュールの要件になっているプラグインライブラリを別途インストールしないといけません。
また、プロジェクトサイトをみると「desandro/imagesloaded」と「desandro/masonry」が必要です。

librariesモジュールをインストールしてあるので、これらのライブラリをcomposerを使ってlibraries以下にインストールしたいわけですが、そのままではうまくできません。

そもそもcomposerでインストールされたモジュールはどこに配置されているかはcomposer.jsonのextraブロックのinstaller-pathsを参照します。

以下は、drupalプロジェクトをOption Aの方法でインストールをした場合です。

    "extra": {
        "installer-paths": {
            "web/core": ["type:drupal-core"],
            "web/libraries/{$name}": ["type:drupal-library"],
            "web/modules/contrib/{$name}": ["type:drupal-module"],
            "web/profiles/contrib/{$name}": ["type:drupal-profile"],
            "web/themes/contrib/{$name}": ["type:drupal-theme"],
            "drush/Commands/{$name}": ["type:drupal-drush"]
        }
    }

typeで区別するようなので、librariesに配置したい場合は「type:drupal-library」を使います。
記述はrepositoriesにしました。

    "repositories": [
        {
            "type": "composer",
            "url": "https://packages.drupal.org/8"
        } ,
        {
            "type": "package",
            "package": {
                "name": "jackmoore/colorbox",
                "version": "1.6.4",
                "type": "drupal-library",
                "dist": {
                    "url": "https://github.com/jackmoore/colorbox/archive/1.6.4.zip",
                    "type": "zip"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "twbs/bootstrap",
                "version": "4.1.1",
                "type": "drupal-library",
                "dist": {
                    "url": "https://github.com/twbs/bootstrap/archive/v4.1.1.zip",
                    "type": "zip"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "leymannx/image_first_formatter",
                "version": "1.1",
                "type": "drupal-module",
                "source": {
                    "url": "https://github.com/leymannx/image_first_formatter.git",
                    "type": "git",
                    "reference": "tags/8.x-1.1"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "ckeditor/codesnippet",
                "version": "4.8.0",
                "type": "drupal-library",
                "dist": {
                    "url": "https://download.ckeditor.com/codesnippet/releases/codesnippet_4.8.0.zip",
                    "type": "zip"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "desandro/masonry",
                "version": "4.2.1",
                "type": "drupal-library",
                "dist": {
                    "url": "https://github.com/desandro/masonry/archive/master.zip",
                    "type": "zip"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "desandro/imagesloaded",
                "version": "4.1.4",
                "type": "drupal-library",
                "dist": {
                    "url": "https://github.com/desandro/imagesloaded/archive/master.zip",
                    "type": "zip"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "enyo/dropzone",
                "version": "5.4.0",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/enyo/dropzone",
                    "type": "git",
                    "reference": "origin/master"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "dinbror/blazy",
                "version": "1.8.2",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/dinbror/blazy",
                    "type": "git",
                    "reference": "origin/master"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "fengyuanchen/cropper",
                "version": "4.0.0",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/fengyuanchen/cropper",
                    "type": "git",
                    "reference": "origin/master"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "kenwheeler/slick",
                "version": "1.9.0",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/kenwheeler/slick",
                    "type": "git",
                    "reference": "origin/master"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "exif-js/exif-js",
                "version": "2.3.0",
                "type": "drupal-library",
                "source": {
                    "url": "https://github.com/exif-js/exif-js",
                    "type": "git",
                    "reference": "origin/master"
                }
            }
        }
    ],

今回のライブラリ以外も記述しています。
これが正解かどうかは不明ですが、プロジェクトサイトにあるexample composer.json fileを参考にして、問題なく配置できました。

「enyo/dropzonjs」、「desandro/imagesloaded」、「desandro/masonry」をインストールしました。

$ composer require enyo/dropzone desandro/imagesloaded desandro/masonry
Using version ^5.4 for enyo/dropzone
Using version ^4.1 for desandro/imagesloaded
Using version ^4.2 for desandro/masonry
./composer.json has been updated
> DrupalProjectcomposerScriptHandler::checkComposerVersion
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 3 installs, 0 updates, 0 removals
  - Installing enyo/dropzone (5.4.0): Cloning origin/master
  - Installing desandro/imagesloaded (4.1.4): Loading from cache
  - Installing desandro/masonry (4.2.1): Loading from cache
Writing lock file
Generating autoload files
> DrupalProjectcomposerScriptHandler::createRequiredFiles

$ ls web/libraries/
dropzone  imagesloaded  masonry

librariesディレクトリが作成され、すべてインストールされました。

Chaos tool Suiteモジュールのインストール

他の要件ですでにctoolsモジュールがインストールされていればよいですが、まだの場合はインストールしておきます。

$ composer require drupal/ctools
Using version ^3.0 for drupal/ctools
./composer.json has been updated
> DrupalProjectcomposerScriptHandler::checkComposerVersion
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing drupal/ctools (3.0.0): Downloading (100%)
Writing lock file
Generating autoload files
> DrupalProjectcomposerScriptHandler::createRequiredFiles

$ drush en ctools
 [ok] ctools の翻訳を確認しました。
 [ok] ctools の翻訳をダウンロードしました。
 [ok] ctoolsに翻訳をインポートしました。
 [notice] Translations imported: 6 added, 45 updated, 0 removed.
 [notice] Message: 1 個の翻訳ファイルをインポートしました。/6/
個の翻訳を追加し、/45/ 個の翻訳を更新、/0/
個の翻訳を削除しました。

Array   Array   Array
  [success] Successfully enabled: ctools

コアのMediaを有効化

media_typeが存在しない内部エラーが発生していろいろできなくなってしまうので、コアのMediaを有効にしました。

2018/06/26 14:27:17 [error] 7058#7058: *3382 FastCGI sent in stderr: "PHP message: Uncaught PHP Exception DrupalComponentPluginExceptionPluginNotFoundException: "The "media_type" entity type does not exist." 

モジュールの有効化

$ drush en file_browser
The following module(s) will be enabled: file_browser, entity_browser, entity_embed, embed, dropzonejs, dropzonejs_eb_widget

 Do you want to continue? (yes/no) [yes]:
 > yes

 [ok] dropzonejs の翻訳を確認しました。
 [ok] entity_browser の翻訳を確認しました。
 [ok] embed の翻訳を確認しました。
 [ok] entity_embed の翻訳を確認しました。
 [ok] file_browser の翻訳を確認しました。
 [ok] dropzonejs の翻訳をダウンロードしました。
 [ok] dropzonejsに翻訳をインポートしました。
 [ok] entity_browser の翻訳をダウンロードしました。
 [ok] entity_browserに翻訳をインポートしました。
 [ok] embed の翻訳をダウンロードしました。
 [ok] embedに翻訳をインポートしました。
 [ok] entity_embed の翻訳をダウンロードしました。
 [ok] entity_embedに翻訳をインポートしました。
 [ok] file_browser の翻訳をダウンロードしました。
 [ok] file_browserに翻訳をインポートしました。
 [notice] Translations imported: 7 added, 61 updated, 0 removed.
 [notice] Message: 5 個の翻訳ファイルをインポートしました。/7/
個の翻訳を追加し、/61/ 個の翻訳を更新、/0/
個の翻訳を削除しました。

 [success] Successfully enabled: file_browser, entity_browser, entity_embed, embed, dropzonejs, dropzonejs_eb_widget

権限の付与

ログインユーザがdrupal管理者であれば特に必要ありませんが、それ以外のユーザで操作するのであれば、権限の付与が必要です。
通常は、モジュールを有効にした際に権限を付与する必要があるかも的なメッセージが表示されるはずですが、今回はなぜか表示されていません。
dropzonejsとEntity Browserに権限の付与が必要です。
drupalではデフォルトで「管理者」、「認証済みユーザ」、「匿名ユーザ」の3種類の役割が用意されています。
※コアをアップグレードした場合は前バージョンの役割が重複で追加されていると思います。
インストール時に設定したサイトメンテナンスアカウントのユーザは管理者の役割になります。
この役割の単位で権限を付与します。
役割は自由に追加削除できます。

権限が付与されていない場合でも管理メニューに表示されますが、メニュー選択したあとに遷移する画面がサイトのフロントページになります。
該当メニューの専用ページへのアクセス権限が付与されていないためフロントページに飛ばされています。

権限が正しく付与できていれば、これ以降の設定作業が可能になります。

File Entity Browserの設定

Enity Browserの設定

「/admin/config/content/entity_browser」にアクセスすると2つの設定がすでにあります。
これらは、ローカルデバイスからサーバへファイルをアップロードし選択するもしくはサーバ上にあるファイルを選択するためのUIを提供します。
事前に2種類の設定が用意されていますので、通常はこのままで問題ありません。

/admin/config/content/entity_browser

General Information

(/admin/config/content/entity_browser/browser_files)

/admin/config/content/entity_browser/browser_files

表示

(/admin/config/content/entity_browser/browser_files/display)

/admin/config/content/entity_browser/browser_files/display

Widget selector

(/admin/config/content/entity_browserbrowser_files/widget_selector)

/admin/config/content/entity_browserbrowser_files/widget_selector

Widget

(/admin/config/content/entity_browserbrowser_files/widgets)

/admin/config/content/entity_browserbrowser_files/widgets

Upload locationを変更すればアップロード先を変更できます。

Embed buttons

次は、「/admin/config/content/embed」にアクセスするとボタンとEntity Browserの設定の組み合わせを変更できます。

/admin/config/content/embed

Edit Embed button

(/admin/config/content/embed/button/manage/file_browser)

/admin/config/content/embed/button/manage/file_browser

テキストフォーマットとエディタ

「/admin/config/content/formats」にアクセスすると入力フィルターとエディタの設定およびエディタのツールバーへのボタンの変更などができます。

/admin/config/content/formats

フルHTMLの場合

(/admin/config/content/formats/manage/full_html)

ツールバーにfile_browserボタンの追加

/admin/config/content/formats/manage/full_html

「Display embedded entities」フィルターの有効化と処理順序の変更

フィルターの有効化と処理順序の変更

ベーシックHTMLの場合

(/admin/config/content/formats/manage/basic_html)

ツールバーにfile_browserボタンの追加

「使用できるHTMLタグ」に以下のタグを追加

「Display embedded entities」フィルターの有効化と処理順序の変更

/admin/config/content/formats/manage/basic_html

以上でデモにあるとおりのFile Entity Browserが使用できます。

考察

フロントページに各ノードのTitle、画像(1枚のみ)、本文(概略)を表示したい場合、File Entity Browserを使った埋め込み方法では、field_imageは使用していませんので、フロントページを表示しているViewsを少し変更しただけでは画像を表示できません。
また、field_imageのフィールド設定でEntity_Browserを選択した場合は、本文への画像の埋め込みができません。

従来通りのinsertモジュールによりfield_imageを使用するかFile Entity Browserを使用するなら画像を表示できるようにする仕組みを設計しなければなりません。
コンテンツリストのタブの横にFilesが表示されます。
これはViewsのFilesまたはFile Entity Filesで生成したリストですが、このfile_usageにあるように、ファイルリストからノードに関連付けが可能です。
この逆ができればよいので、なんとかなりそうだと思うわけです。

基本設計

必要なのは次の3つになります。

  1. ノードのタイトル
  2. ノードの本文に埋め込まれた画像
  3. ノードの本文(概略)

ノードのタイトル

ノードタイトルは、node_field_dataのtitleになります。
nodeテーブルのEntity IDとnode_field_dataのnidが一致するtitleを取得できれば可能です。

例)ノードのEntity ID=2のタイトルを検索

$ drush sqlc
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Welcome to the MariaDB monitor.  Commands end with ; or g.
Your MariaDB connection id is 6644
Server version: 10.2.14-MariaDB-log MariaDB Server

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or 'h' for help. Type 'c' to clear the current input statement.

MariaDB [drupal8]> SELECT title FROM `node_field_data` WHERE `nid` = 2;
+-------+
| title |
+-------+
| test2 |
+-------+
1 row in set (0.00 sec)

ノードの本文に埋め込まれた画像

ノードにあるfile_imageが空なため他から取得しなければなりません。
file_usageにあるTypeがEntity Type、IDがそのEntity TypeのID番号であることから、TypeがnodeかつID番号によってnodeのEntity ID(nid)とマッチングができるかと思います。
このnodeのEntity IDによりfile_usageを検索しTypeがnodeでかつID番号が一致するfileがこのノードで使用されているファイルとなります。
そのファイルIDを使って、file_manageから必要なデータが取得できます。
この際、表示する画像は1枚なのでファイルIDは1つで十分です。
また、すべてのノードで画像が使われているわけではありませんので、検索結果がない場合の処理も必要です。

例)Entity ID2のノードに使用されているファイルのfidを検索

MariaDB [drupal8]> SELECT fid FROM `file_usage` WHERE `type` LIKE 'node' AND `id` LIKE '2';
+-----+
| fid |
+-----+
|   7 |
|   9 |
+-----+
2 rows in set (0.00 sec)

MariaDB [drupal8]>

例)file_managedからfid=7のuriを検索

MariaDB [drupal8]> SELECT uri FROM `file_managed` WHERE `fid` = 7;
+-----------------------+
| uri                   |
+-----------------------+
| public://shot_014.jpg |
+-----------------------+
1 row in set (0.00 sec)

ノードの本文(概略)

ノードの本文はnode_bodyテーブルのbody_valueです。

例)ノードのEntity ID=2のbode_valueを検索

MariaDB [drupal8]> SELECT body_value FROM `node__body` WHERE `entity_id` = 2;
+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| body_value                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| <p>test2</p>

<drupal-entity data-embed-button="file_browser" data-entity-embed-display="image:image" data-entity-embed-display-settings="{&quot;image_style&quot;:&quot;large&quot;,&quot;image_link&quot;:&quot;&quot;}" data-entity-type="file" data-entity-uuid="50c910a8-6ab9-4087-b572-1bec0d8a41dc"></drupal-entity>

<p><img alt="test4" data-entity-type="file" data-entity-uuid="0e07f94c-13b1-4ebc-8e3d-8d0a36a4e5e6" src="/sites/default/files/inline-images/shot_017.jpg" /></p>

<p>&nbsp;</p>
 |
+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
1 row in set (0.00 sec)

以上、データベースを検索すればそれぞれ値は取得できます。
しかし、データベースの値をそのままでは使えないのが現実です。
このようにデータベースから直接値を取得すると加工しなければならない手間があります。

長くなったので続きは別の記事にします。
 

2018.7.11追記

現バージョンでは、記事ごとの画像フィールドにファイル情報が保存されないので、不便さを感じ、使用を中止しました。

スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事