サーバー設定不要!とりあえずDrupal8をさわってみる。簡単なブログを作成してみよう。

Drupal8で簡単なブログを作成してみる

WordPressやMovableTypeを使った事のある方は多いと思いますが、まだ、Drupalを利用した事のない方は多いのではないでしょうか?興味はあるけど、英語の情報しかないし…。インストール方法が分からないし…。など実際に触ってみるまでにいくつかハードルがあるかもしれません。まずは、これら挫折の原因になる要素を極力排除してDrupalを体験していただければと思います。

ここでは初心者や、ある程度Drupal7でのサイト構築経験のある方を対象に、Drupal8でブログサイトを作成します。そして、Drupalの基本機能であるコンテンツタイプを作成する方法や、カスタムフィールドを追加する方法について学習します。また、ブログ投稿を分類するためのタクソノミーシステムについて学びます。まずは、触ってみてDrupalがどのようなシステムなのかを体験してみてください。

simplytest.meを利用したDrupalのインストール

Drupal 8をインストールします。ここでは、詳細なインストール方法については省略させていただきますが、テストサイトを簡単に立ち上げるにはsimplytest.meにアクセスし、プロジェクト名フィールドに「Drupal」と入力し、ドロップダウンリストから最新のDrupal 8のバージョンを選択して、「Launch sandbox」をクリックしてください。Drupalのインストールが始まるので、インストーラーの手順に従ってインストールしてください。

simplytest.me で作成したサイトは、お試し用のsandboxですので、24時間で利用できなくなります。

1

「ブログ」コンテンツタイプを作成する

今回インストールした標準インストールプロファイルでは、最初から「記事」コンテンツタイプが利用可能です。このコンテンツタイプには「画像(Image)」と「タグ(Tags)」フィールドが付属しているので、そのままこのコンテンツタイプをブログセクションに使用する事も可能です。

最初から存在するコンテンツタイプ

2

 

「記事」コンテンツタイプに最初から存在するフィールド

3


しかし、コンテンツタイプやフィールドがどのように動作するかを知るためには、実際に独自のコンテンツタイプを作成して、それにフィールドを追加してみるのが一番です。そこで、以下のフィールドを持つ「Blog」コンテンツタイプを作成します。

  • Body
  • 画像
  • タグ
  • カテゴリー

時間を節約するために、記事のコンテンツタイプに既に存在する、「画像」と「タグ」のフィールドを再利用しますが、ブログの投稿を分類するための「カテゴリー」フィールドについては新規に作成する必要があります。

1.画面上部のツールバーの「サイト構築」から「コンテンツタイプ」をクリックし、「コンテンツタイプの追加」をクリックします。

2. 「名前」に「Blog」と入力し、「説明」に「日々のブログで使用」と入力します。

4


3.「説明」の下に、垂直タブのグループが表示されます。ここでは、「掲載オプション」や「表示設定」などのコンテンツタイプに関する設定を変更できます。これらのオプションはいつでも変更することができますので、今のままにしておきます。「保存してフィールドを管理」をクリックします。これでコンテンタイプが作成されました。

5

フィールドの追加

コンテンツタイプを作成すると、新しいフィールドの作成や既存のフィールドの編集ができる「フィールドの管理」ページにリダイレクトされます。

新しいコンテンツタイプの作成した時にはデフォルトで「Body」フィールドが追加されています。コンテンツタイプの用途に応じて、このフィールドを使用したくない場合は適宜、削除してください。

7


前述のように、Blogコンテンツタイプには、Body、画像、タグ、カテゴリの4つのフィールドが必要です。

「Body」フィールドは既にコンテンツタイプ上に存在しますが、「画像」と「タグ」は追加する必要があります。標準のインストールプロファイルでは、これらのフィールドがすでに作成され、「記事(Article)」コンテンツタイプに追加されています。ここでは時間節約のために、これらのフィールドを再利用します。

1. 「フィールドの管理」ページで「フィールドの追加」をクリックします。

13


2.「既存のフィールドを再利用する」ドロップダウンから「画像:field_image」を選択し、「保存して次へ」をクリックします。

15


3.「Blogの画像設定」の画面が表示されます。設定をそのままにして、「設定の保存」をクリックします。

17


4.次に「タグ」フィールドを追加します。「画像」フィールドを追加した時と同様に 「フィールドを追加」をクリックし、「既存のフィールドを再利用する」から「エンティティ・リファレンス:field_tags」を選択し、「保存して次へ」をクリックします。

19


「参照タイプ」フィールドセットで、タグのチェックボックスをオンにし、ボキャブラリの下に「参照先のエンティティが存在しなければ作成する」を選択し、「設定の保存」をクリックします。

21

 

Drupal 8ではエンティティタイプ間でフィールドを共有することはできません。

Drupal 7では、エンティティタイプ間でフィールドを共有できます。例えば、「タグ」ボキャブラリーだけでなく記事コンテンツタイプでもフィールドを使用できます。 Drupal 8では、フィールドはエンティティタイプではなくバンドルタイプ間でのみ共有できます。したがって、「記事」コンテンツタイプに「画像」フィールドを作成した場合は、他のコンテンツタイプとのみ共有できます。ボキャブラリーやユーザーなどのエンティティとは共有できません。

エンティティとフィールドの技術的な説明については、以下のリンクを参照してください。

https://drupalwatchdog.com/blog/2015/3/entity-storage-drupal-8-way

フォームの表示設定

ウィジェットの設定をしていないことにお気づきかもしれません。 Drupal 7では、フィールドを作成するときにウィジェットも選択しました。 Drupal 8では、「フォームディスプレイの管理」ページから別にウィジェットを管理します。

ウィジェットとは?

ウィジェットは、フィールドにデータを入力するためのフォーム要素です。テキストフィールド、選択ボックス、チェックボックスはすべてウィジェットです。ドロップダウンから選択して別のウィジェットを選択することができます。また、各フィールドの順番を上下にドラッグして並べ替えることもできます。

23


1.「フォームディスプレイの管理」ページで、「タイトル」の下に、「画像」と「タグ」フィールドを移動し、「保存」をクリックします。

25


この時点で、「Blog」コンテンツタイプには、「Body」、「画像」、および「タグ」フィールドが存在します。「カテゴリー」フィールドのみが不足しています。そのため、「カテゴリー」フィールド作成する前に、ボキャブラリーとして「カテゴリー」を作成する必要があります。

カテゴリボキャブラリの作成

1. 「サイト構築」から「タクソノミー」をクリックし、「ボキャブラリーを追加」をクリックします。

27


2.「名前」に「カテゴリー」、「システム内部名称」に「category」を入力し、説明として「ブログ投稿を分類するために使用する」を入力して、「保存」をクリックします。

29


3.「カテゴリー」ボキャブラリーにタームを追加する画面に移動します。「タームの追加」をクリックします。

31

「タームを追加」画面の「名前」フィールドに追加する「ターム」を入力して、「保存」ボタンをクリックします。ここでは、「Drupal」、「Joomla」、「Wopdpress」というタームを作成しました。

33


「カテゴリー」ボキャブラリーのページを確認すると以下の通りに、3つの「ターム」がボキャブラリーに登録されました。

35


ボキャブラリ作成後、「フィールドの管理」ページに戻り、カテゴリフィールドを作成しましょう。

カテゴリフィールドの作成

1. 「サイト構築」から「コンテンツタイプ」に移動して、「Blog」の「フィールドの管理」をクリックします。

37


次に「フィールドの追加」をクリックします。
 

39


2. 「新しいフィールドの追加」ドロップダウンから、「タクソノミーターム」を選択します。「ラベル」に「カテゴリー」、「システム内部名称」に「category」を入力し、「保存して次へ」をクリックします。
 

41


3. フィールド設定ページで、「値の許容範囲」を1に制限します。これは、Blogを投稿した際に1つのカテゴリのみを選択できるようにする設定です。次に 「フィールド設定を保存」をクリックします。

43


4.「Blog のカテゴリー設定」画面の「参照タイプ」セクションで、「存在するボキャブラリ」に「カテゴリー」を選択し、「設定の保存」をクリックします。

45

カテゴリウィジェットを設定する

「Blog」コンテンツタイプに「カテゴリー」フィールドが追加されました。「カテゴリー」フィールドについても他のフィールドのようにウィジェットを設定しましょう。

1. 「フォームディスプレイの管理」タブをクリックし、フィールドを移動させて以下のようにフィールドを並び替えます。「カテゴリー」フィールドのウィジェットを「選択リスト」に変更して、下にスクロールし「保存」をクリックします。
 

47

 

ブログの表示設定

これまで、フィールドの作成とウィジェットの設定を行ってきました。次に、ブログの表示を設定します。 「ディスプレイの管理」ページはDrupal8とDrupal7で違いはありません。

1. 「表示管理」タブをクリックしてします。

2.「表示管理」の画面でフィールドを以下の通りに並び替えます。

49


フィールドの順序を変更したら、ページの下部にある「保存」をクリックします。これで、「Blog」コンテンツタイプの設定が完了しました。

ブログを投稿してみる

次に、「コンテンツ」に移動し、「コンテンツを追加」から「Blog」をクリックします。フォームに記入し、「保存して公開」をクリックします。

5153


このようにブログが投稿されました。

55

 

まとめ

サイト構築の方法は、Drupal 7さほど変わりません。そのため、新しい概念を学ぶ必要はありません。コンテンツタイプとフィールドを管理するためUIはDrupal8ではより合理化されていて、使いやすくなっています。

この記事に対するANNAIのコメント

この記事ではコンテンツタイプを作成し、カスタムフィールドを追加するという、Drupalの基本的な使い方を説明しています。他にはブロック、Views、モジュールの活用、多言語機能などDrupalには様々な機能があります。これらの機能を組み合わせると、かなり複雑なサイトを作り上げることが可能です。

以下のサイトはDrupal8の基本的な機能を利用して作成されたデモサイトです。このサイトは一切のコードを書かずに作られています。

unnai


このサイトの作り方は、2017年1月20日に発売予定のDrupal 8 スタートブック―作りながら学ぶWebサイト構築(Think IT Books)で詳細に解説されています。Drupalに興味のある方はぜひ、この本を片手にDrupalに挑戦してみてください。

ANNAIは国内初のDrupal8の解説書を発売します。先行予約受付中!

初めてDrupalを学ぶ方に必見の一冊。コードを一切書かずにDrupal8によるサイトの作り方が学べます。
2017年1月20日発売。AMAZONの購入ページはこちらです。

Drupal 8 スタートブック―作りながら学ぶWebサイト構築(Think IT Books)

Drupal 8 スタートブック―作りながら学ぶWebサイト構築

本書は、オープンソースのCMS(コンテンツマネジメントシステム)であるDrupal(ドゥルーパル)の最新バージョンDrupal 8の解説書です。 これからCMSを触ってみたいと思っている方やWordPress等の他のCMSでの開発経験のある方などを対象に、Drupal 8の標準機能を使ってできる簡単なサイト制作を通して、Drupalの機能やアーキテクチャーについて学びます。

Drupalは国内ではまだ他のCMSのほどの知名度はありませんが、海外では大企業や政府機関といった大規模なサイトを中心に広く使われています。 Drupalは極めて高い拡張性や柔軟性を持ち、様々な事ができる反面、初心者にはどこから手を付けていけば良いのか分かりにくいという側面もあります。
本書では初めてDrupalを使う初心者がつまづく可能性のある部分を極力排除しながら、インストールからサイト完成まで、一切のコードを書かずにGUI操作のみでDrupalの標準機能を一通り使った簡単なサイト制作を行います。