Drupalカスタムフィールド作成モジュール Paragraph(パラグラフ)の実力と利用方法
阿部 正幸今回の記事では Paragraphs モジュール の、あまり知られていない使い方について説明したいと思います。
パラグラフモジュールとは、「複数のフィールドのセットをひとつのフィールドの値として持つことができる」モジュールです。
フィールドの構造を「入れ子」にする必要がある場合に重宝するモジュールで、D7時代は、Field Collection モジュール、現在では ECK モジュールも同様に使用されることがあります。
しかし!
パラグラフモジュールの実力は、それだけではありません。
ご存知の方もいらっしゃるかと思いますが、パラグラフモジュールには「多彩なレイアウトパターンでの自由入力を可能にする」という、他にはない、とても強力な、優れた機能があるのです!
と、言いますか、元々は、その目的で作られたモジュールです。なぜなら、Paragraphs モジュールのページにはこのように書いてあります。
Instead of putting all their content in one WYSIWYG body field including images and videos, end-users can now choose on-the-fly between pre-defined Paragraph Types independent from one another.
画像や動画などを含むすべてのコンテンツを WYSIWYG でひとつの body フィールドに配置する代わりに、編集者はあらかじめ定義されたパラグラフタイプの中から、その場で適当なものを選択して配置していくことが可能です。
つまり、WYSIWYG の代わりとして使える、コンテンツの編集補助ツールのようなものだということですね。編集担当者がパラグラフを知ってしまえば、WYSIWYG でさえ面倒なツールになってしまうのです。
Paragraphsの利用例
Paragraphsモジュールの具体的な利用例をみてみましょう。
パラグラフで、あらかじめ以下のようなパラグラフタイプを作っておきます。
- h2タイトル
- h3タイトル
- h4タイトル
- 文章
- 画像
- 画像+文章(左画像回り込み)
- 画像+文章(右画像回り込み)
- 動画
- テーブル
- 3カラム表示
- ......
コンテンツタイプ設定
次にコンテンツタイプの設定で、body フィールドの代わりに、field_paragraphs というフィールドを作って追加します。フィールドタイプは(Entity reference revisions = パラグラフ)です。
フィールドの設定で、有効にするパラグラフタイプに、上記のうち使いたいものをすべて選択しておきます。(ここがミソ!ここで選択したものが、実際に入力するときにその場で選択できるようになります)
コンテンツの入力画面です。body の代わりにパラグラフの部品を追加していきます。
h2タイトルや文章、画像、動画、テーブルなどを、必要に応じて追加していきます。
「文章」+「h2タイトル」+「文章」と追加して入力したところです。入力したあとで部品の順番を変更することもできます。
こちらは「画像+文章(左画像回り込み)」の入力画面。パラグラフタイプのほうであらかじめ、画像フィールドと文章のフィールドを追加したものを作っておきます。表示の際は画像が左にフロートするよう、CSS で調整しておきます。
このように、入力に必要な部品をあらかじめ登録しておき、入力の際に必要なものを任意の順番で追加していくことができます。WYSIWYG よりも断然使いやすいですね!
おわりに
以上、パラグラフモジュールの本来の使い方について見てきましたが、いかがだったでしょうか。
もし、入力操作の煩わしさを改善したいクライアントがいたら、パラグラフを提案してみてはいかがでしょう?(隠れたニーズはたくさんありそうですね!)
パラグラフへの入力内容は、検索にもヒットしますし、多言語にも対応しているので、活躍の幅の広いモジュールだと思います。
少し長くなってきたので、多言語対応の方法については、また別の記事にてご紹介します。
他言語対応の記事
Drupal8 Paragraph(パラグラフ)モジュールの多言語対応方法
阿部 正幸/ 代表取締役
Drupal歴15年、ウェブマーケティング、インフラ構築、AP開発が守備範囲です。
キャッチボール、筋トレ、日本酒、ウイスキーが好きです。天気の良い日に、誰かキャッチボールして、立呑に付き合ってください。
好きなDrupalモジュールはIMCEです。
最新の関連記事
-
Drupal SimplytestでDrupalのテストサイトを一時的に作成する方法
モチヤスタッフ- サイトビルダー
- サイトビルディング
- Drupal Tips
- ローカル環境
- 初心者向け
-
Drupal Drupalが使えるレンタルサーバー一覧とDrupalのインストール方法
モチヤスタッフ- サーバー
- Drupalとは
- Drupal Tips
- サバコン
-
Drupal Drupalが使いにくいと言われる理由
モチヤスタッフ- Drupalとは
- Drupal Tips
- システム開発
- 初心者向け
-
Drupal Drupal 10の動作環境|対応ブラウザからComposerやDrushのバージョンまで紹介
モチヤスタッフ- Drupal Tips