こんにちは、先日 CMS Night というイベントで登壇させていただいたのですが、写真と今の髪型が違いすぎて「写真はイメージです」と補足された大野です!

今ご覧になっている Umi->d のサイトを Drupal 8 にて構築したのですが、今回は Drupal 7 にどっぷり浸かっている私が Drupal 7 と比べて Drupal 8 で良くなったと感じた 7 つのポイントを紹介したいと思います。今回はバックエンドをほぼ作らずに構築することができたので、主にフロントエンドと管理面についての感想となります。

1. CKEditor 4 のインライン編集がすごい

Drupal 8 では CKEditor 4 と Quick Edit モジュールがコアに取り込まれてインライン編集機能がサポートされました。

インライン編集機能とはコンテンツの内容を見たままにページを遷移することなく編集することができる機能です。実際の動きをみていただいた方がどんなものか想像しやすいと思いますので、以下の動画を御覧ください。

実は Drupal 7 でも Quick Edit できるモジュールがあるのですが、私の環境では上手く動かすことができませんでした。

インライン編集の機能は CKEditor demo のページで実際にを触ってみることもできますので試してみてください。

2. 同じ内容のブロックを複数設置可能に

Drupal 7 まではブロックを複製することができなかったので、ブロックを使いまわしたい場合は Multi block モジュールや Panels モジュールを使うなどの方法しかありませんでしたが、 Drupal 8 ではブロックをインスタンス化(?)していくつも複製することがコアでできるようになっています。同じ内容のメニューを使いまわしたいときなどに便利ですね。

3. ブロックがエンティティ化されてフィールドを追加し放題に

かなり昔から議論されてきたことだと思いますが「ブロック」がとうとうエンティティ化されました。エンティティになったことで、ブロックに対してノードと同じように様々なカスタムフィールドを設定することができます。

例えば Drupal 7 でバナー用のブロックを設置した際に、ブロック自体に画像の添付ができないので管理がちょっと面倒でしたよね。そんなことがブロックに画像フィールドを追加するだけで対応することができます。その他にもブロックに対してコメントフォームを追加するなどエンティティならでは機能が使えるようになりますので汎用性が一段と増しています。

ブロックのフィールド管理画面

4. システムがメディア管理するようになった

Drupal がメディアの管理を一元管理してくれるようになりました。 Drupal 7 まではコンテンツ内で使用する画像などのメディアファイルは、別途作成したカスタムフィールで添付するなり、 IMCE などのメディア管理ソフトを組み合わせなければなりませんでしたが、 Drupal 8 ではコンテンツ内で使用する画像をシステムが自動的に管理してくれるようになりました。

少し例を見てみましょう。Drupal に内蔵された CKEditor を使って画像を添付し、コンテンツ内に埋め込んでみます。

CKEditor で画像を入れた時

コンテンツの管理画面にファイルと言うタブが増えているのでそれを見てみましょう。

ファイルの管理画面

利用場所の 1 place のリンクをクリックしてみると使用しているコンテンツが一目瞭然です。

ファイルの使用先が一覧で分かる

これはどういう仕組なのかと言うと付属の Wisywig エディタで画像を挿入した際に、 img タグの data 属性に UUID と呼ばれる一意の ID が自動的に付与され、 コンテンツの保存時に Drupal 8 はどこでその画像を使用しているかを記録するようになっているようです。

Wisywig エディタで挿入した画像の img タグは以下の様なフォーマットになります。

<img alt="Drupal 8 logo" data-entity-type="file" data-entity-uuid="d67126db-0982-4302-9700-b463c1efebb0" src="/sites/default/files/inline-images/drupal%208%20logo%20inline%20CMYK%2072.png">

また、Drupal はこの UUID で使用しているメディアファイルが無くなると、自動的にファイルの状態を「永続的」から「一時的」に変更します。「一時的」と判断されたファイルはある一定の期間が過ぎると自動的に削除されるので、画像を使いまわす場合は UUID は削除せずに丸ごとコピーする必要があることに注意してください。

5. Views を筆頭に Drupal 7 でメジャーなモジュールがコアに取り込まれた

Drupal 8 の目玉の一つとして、コアに Views モジュールが統合されたことがあげられます。単純に統合されただけではなく、細かい機能追加がされていますのでそれらについてはまたの機会にご紹介したいと思います。

Views については弊社のブログのコンテンツの一覧ページをお手軽に作成できる Views モジュールをご覧ください。

その他にも Drupal 7 ではメジャーなモジュールが Drupal 8 のコアに取り込まれています。

6. HTML 5 でレスポンシブウェブデザインに標準対応

標準で HTML 5 のエレメントが使えるようになり HTML をより構造的に書くことができます。input エレメントのタイプ属性に datenumeric が使え、 Drupal の Form API でもそれらをサポートしていますので、ユーザーはより便利に情報を入力することができるようになりました。

また、管理用テーマの Seven が一新されました。 Drupal 7 時代の Seven ではドロップダウンメニューの矢印の一部が壊れていたりしたのですが、そんな不具合もすっかり治ってます。管理ページもレスポンシブウェブデザインにも対応していますので、タブレットやスマートフォンからも管理がしやすくなっています。

新管理テーマ

7. テンプレートエンジンに Twig を採用

テーマのレンダリングエンジンが Twig になりました。 phptemaplte エンジンに慣れていると一見とっつきにくいのですが、可読性が高いので覚えてしまえば開発効率が上がりそうです。Twig については弊社のDrupal Twig コーディングスタンダード 日本語訳でも紹介しているのでご覧ください。

Drupal 8 で実際に開発してみて思ったこと

Symfony と言う PHP フレームワークが利用されるようになり Drupal 8 からはオブジェクト指向のプログラミング形態になりました。正直に言って今まで Drupal 7 のような関数型プログラミングにしか慣れていない方(私もそうです)にとってはラーニングコストがとても高いと感じました。今まで気軽に使えていた API が周りくどい手続きをしなければ使えなかったり、廃止された関数も多数あります。そして英語での情報量もとても少ない状況で、今回の制作で私が受けた印象は「調べるのがすごい大変」です。また、メジャーなモジュールも殆どがまだ Drupal 8 には対応していない状況なので、実際に業務として使うのはあと2年以上は掛かるんじゃないかなと予測しています。

一方で Symfony が採用されたことで PHP のフレームワークやオブジェクト指向プログラミングになれたエンジニアには参入の敷居が低くなり、開発もしやすくなったんじゃないでしょうか。また、前述しましたが Drupal 8 では Views を筆頭に Drupal 7 で主要なモジュールの殆どが本体のコアに取り込まれたので、ますますインストール直後からすぐに開発ができるようになりました。一般的な機能であれば管理 UI から殆ど実装できてしまうのが Drupal の特徴の一つですが、それがさらに進んでフロントエンドだけ開発すればいいようになる時代もそんなに遠くない気がします。

おそらく来年には Drupal 8 の正式版がリリースされると思いますが今から待ち遠しいです!


共に働く新しい仲間を
募集しています

スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート&フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎!ぜひお気軽にご連絡ください。