Drupal で学校向けサイトを作ってみよう

Drupal をやさしく学ぶ勉強会

TB University デザインテンプレートでの設定サンプル(改訂版)

開催日 2014 年 11 月 19 日(水) 18:30-20:45

1

目 次

I. はじめに .................................................................................... 3

Drupalコアのパッチがリリース

デジタルマーケティング資料

次回の勉強会

参考資料

なんでも質問コーナー

II. 今月のモジュール Organic groups .............................................. 5

モジュールのインスト－ル

OG の設定

III. 学校サイトを作ってみよう！ ........................................................ 14

デザインテーマのインストール

デザインテンプレートの構成

必要となる Drupal と拡張モジュール

IV. サイトの構成 ............................................................................ 16

イメージスタイルの作成

タクソノミーのボキャブラリーとターム作成

コンテンツタイプの修正と作成

ページの作成

スライドショーのブロックでの領域（リュージョン）設定

Views でスライドショーの定義

パネルファーストカラム 1 の設定

パネルセカンドカラム 1 の設定

メインコンテンツ

サイドバーファーストのリュージョンの設定

サイドバーセカンドのリュージョンの設定

パネルサードカラム 1 の設定

メニューバーリュージョンの設定

パネルフォースカラム１の設定

パネルフォースカラム２の設定

パネルフォースカラム 3 の設定

パネルフィフスカラム 1－６の設定

2

フッターの設定

Views モジュールで Frontpage view の修正

問合せページの設定

V. クレジット、謝辞、ライセンス ..................................................... 43

クレジット

謝辞

ライセンス

3

はじめに

Drupal コアのパッチがリリース

11 月 7 日 Drupal core 7.33 https://www.drupal.org/drupal-7.33-release-notes

セキュリティフィックスはありませんが、念のために最新にしましょう。

11 月 12 日 Drupal 8.0.0-beta3 https://www.drupal.org/node/2373889

Drupal 8 の Beta3 です。

デジタルマーケティング資料

日経 MJ 「米不動産サイト、地価履歴も提供」 「日本酒、アプリがお薦め」

次回の勉強会

1２月 1８日(木)18：30 から 久松町区民館 2 階 5 号室 「ショッピングサイトを作ってみよう！」

Commerce Kickstart モジュール https://www.drupal.org/project/commerce_kickstart

デモサイト http://skytouch.jp/ デモアカウント

4

Commerce Kickstart の 30 分体験サイト http://simplytest.me/

さまざまバージョンの Drupal のコア、拡張モジュール、ディストリビューションを体験できます。

参考資料

自分の PC で Drupal を体験できる環境として、Acquia Dev Desktop 2 および Bitnami が良く使われています。今

回は Acquia DevDesktop 2 について、簡単にご紹介します。

新しくなったDrupal スタック環境、Acquia DevDeskTop 2 Beta を使ってみましょう。PHPのバージョン、Drupal

のバージョンやディストリビューションなどが選択でき、さらに、既存Drupalサイトのバックアップデータをインポ

ートできます。豊富な機能が追加になりました。

Acquia DevDesktopのインストール

Beta 版のダウンロード： https://www.acquia.com/downloads

5

Mac 版と Windows 版があり、インストール方法などは以前の勉強会資料（以下の URL）で確認して下さい。

http://cmslabo.org/techinfo のページに掲載されている「Acquia Dev Desktop 2 Beta で Drupal 7 を使う方

法」です。

http://cmslabo.org/sites/default/files/doc/workshop/2014/drupal_workshop_2014_0828_acquia_dev_des

ktop_beta2.pdf

なんでも質問コーナー

今月のモジュール Organic groups

ユーザ管理の OG(Organic groups)モジュールを紹介します。ダウンロード https://www.drupal.org/project/og

OG7 動画 やチュートリアル（英語）

The Drupalcon CPH session

Brusseles Drupal developers

OG7 tutorials by bjlewis2

Drupalcon London

Drupalcamp Spain - Sevilla

OG 7.x-1.x 14+ movies by NodeOne's Johan Falk

6

モジュールのインスト－ル

モジュールのインストールは 管理画面－＞モジュール－＞

「新しいモジュールをインスト－ル」をクリックし、モジュールのページの「Recommended releases」の中から

「Download」で tar.gz ファイルの URL(http://ftp.drupal.org/files/projects/og-7.x-2.7.tar.gz) をコピーし

「新しいモジュールをインスト－ル」をクリックした後のページに貼付、インストールします。

その後、たとえば、「Enable newly added modules」をクリックし、

モジュールを有効にチェックし、保存することで有効になります。

ただし、Organic groups UI では Views_bulk_operations モジュールが必要となりますので、同様にインストール

します。 https://www.drupal.org/project/Views_bulk_operations

7

Cmslabo.org/user でサイトにログインして環境を確認してみましょう！

OG の設定

OG field settings

8

OG permissions overview

グループのコンテンツタイプ作成

9

グループのフィールドの管理

10

サイトエディタークループの登録

グループメンバーの管理

11

メンバーの追加

グループメンバーの編集

12

メンバー office7 のユーザープロファイルでも設定できます。

OG roles overview

13

OG settings

OG context の設定

14

OG membership type

学校サイトを作ってみよう！

Drupal 7 で学校や教育関連事業向けのサイトを作る場合のサンプルとして、Drupal での設定や定義について、学び

ます。デザインのテンプレートとしては、Themebrain 社の TB University というデザインテンプレートをもとにし

ています。USD 89$(約 10,502 円 118yen/$)

デモサイト： http://demo.themebrain.com/#university

構築ガイド： http://www.themebrain.com/guide/Drupal-guide-for-tb-university-theme

スクリーンショット

15

このデザインテンプレートはさまざま教育関連事業で使える汎用デザインとして開発されており、さまざまな機能や

要素が組み込まれております。今日の勉強会では、時間の制限があり、サイト構築のコンセプトとデモサイトで内容

紹介がメインとなります。少しでも、Drupal でサイト構築する際に参考になればと思います。なお、自分で作って

みて、わからないこと、トラブルなどご質問は、本資料の作者（最後のページを参照）までお問合せ下さい。サポー

ト致します。

デザインテーマのインストール

サンプルの TB University デザインテンプレートを使う場合は、Themebrain 社のサイトから購入しインストールし

ます。デザインテーマだけと Drupal や設定済のデモデータが組み込まれているデモパッケージの 2 種類がありま

す。

デザインテンプレートの構成

サンプルデータと設定プロファイルが入っているファイルとデザインのみのファイルがあります。

16

必要となる Drupal と拡張モジュール

Drupal 7 最新版 （必要となるコアモジュール Blog, Statics, PHP Filter, Poll

拡張モジュール： インストール後に実行します。下記のモジュールはデザインテンプレートのすべての機能を使う

場合です。

サイトの構成

17

イメージスタイルの作成

管理画面－＞環境設定－＞メディア 画像スタイル

「スタイルの追加」をクリック

Features と入力します。もし日本語の場合は、右側のシステム内部名称「編集」をクリックして、英数字でシステ

ム内部名称を設定します。

効果のところで、「拡縮とトリミング」を追加します。幅 219、高さ 88 を追加します。

以下のような画像スタイルになります。

18

同様に、追加で以下のイメージスタイルも定義します。ただし、勉強用に使用しないコンテンツタイプやブロック表

示などで使うイメージタイプは作成しなくても OK です。必要になった段階で、作成できます。

19

タクソノミーのボキャブラリーとターム作成

管理画面－＞サイト構築－＞タクソノミー

「ボキャブラリーの追加」をクリック

名前 Categories 説明 All Categories を記入し保存します。

Categories の「タームの追加」をクリック

最初の Demo Articles を名前だけ記入します。その他の情報は必要なたびに記入します。

続けて、Education Blog、Features、News、Student Profile を登録します。以下のようになります。

20

同様の手順で、Gender というボキャブラリーを作成し、そのタームに、Male Female を追加します。

コンテンツタイプの修正と作成

Article コンテンツタイプの修正

必須モジュール YouTube Field モジュール https://www.drupal.org/project/youtube

モジュールのインストールは 管理画面－＞モジュール－＞

「新しいモジュールをインスト－ル」をクリックし、モジュールのページの「Recommended releases」の中から

「Download」で tar.gz ファイルの URL をコピーし

21

「新しいモジュールをインスト－ル」をクリックした後のページに貼付、インストールします。

その後、たとえば、「Enable newly added modules」をクリックし、

モジュールを有効にチェックし、保存することで有効になります。

モジュールの設定画面がある場合は、YouTube モジュールの場合、

22

管理画面－＞環境設定－＞メディア YouTube settings

で設定を管理します。

これで YouTube モジュールが有効になりました。

前章のイメージスタイルの作成で Slideshow と Articles のイメージスタイルが必要となりますので、前章の手順で

作成します。

その後、Article のコンテンツタイプにスライドショーのフィールドを追加します。

23

管理画面－＞サイト構築－＞コンテンツタイプ

Article の「フィールドの管理」をクリックし、Slideshow Image のフィールドを追加します。

フィールドの設定はデフォルト設定です。

ラベルの設定は、例えば、Slideshow Image と入力します。

24

File directory(保存されるディレクトリ)を設定します。 例えば、field/slideshow

「Alt フィールド有効にする」にチェックし、「画像スタイルのプレビュー」で slideshow を選択します。

前章のタクソノミーで作成したターム Category フィールドを追加します。

「フィールドの設定」では「ボキャブラリー」として Category を選択します。

「ARTICLE 設定」の「デフォルト値」では Demo Articles を選択します。

25

Category のフィールドを保存し、次に Videos フィールドを新規追加し、フィールドタイプは YouTube video、ウ

ィジェットは YouTube で作成します。

「フィールドの設定」、「Article 設定」およびその他はデフォルトのままでフィールドを保存します。ただし、フィ

ールド保存後、「表示管理」のタブを選択し、Videos の右端にあるギアアイコンをクリックし編集します。

たとえば、Custom サイズで以下のように設定します。ラベルも非表示です。

Image の画像のスタイルは「Articles」に設定します。Tags と Category のラベルは「インライン」に設定、

Slideshow Image のフォーマットは「非表示」に設定します。フィールドの順番は、「行のウェイトを表示する」

をクリックしてウェイトを調整するか、マウスで「フィールド」のプラスアイコンをドラッグして順番を以下のよう

に変更します。

26

以上で Article のコンテンツタイプの修正が完了です。

Basic ページタイプの修正

Article のコンテンツタイプと同様に、以下の URL のページを参考に Basic のコンテンツタイプを修正します。

http://www.themebrain.com/guide/how-build-tb-university/4-modify-and-create-content-types/42-

modify-basic-page-type

Image の既存フィールドを追加設定します。

Blog エントリータイプの修正

以下の URL のページを参考に Blog のコンテンツタイプを修正します。

http://www.themebrain.com/guide/how-build-tb-university/4-modify-and-create-content-types/43-

modify-blog-entry-type

Tags、Image、Category(ターム参照)の既存フィールドを追加設定します。Image の表示フォーマットなどを修正

します。

Webform のタイプを修正

以下の URL のページを参考に Webform のコンテンツタイプを修正します。

27

http://www.themebrain.com/guide/how-build-tb-university/4-modify-and-create-content-types/44-

modify-webform-type

Webform コンテンツタイプの「表示設定」は表示しない、「コメント設定」はクローズドで設定します。

Course のコンテンツタイプの新規作成

以下の URL のページを参考に Course のコンテンツタイプを新規作成します。

http://www.themebrain.com/guide/how-build-tb-university/4-modify-and-create-content-types/45-

create-course-content-type

新規に Course のコンテンツタイプを作成します。Course Image というフィールドを新規追加します。

Description というフィールドを、フィールドタイプ「長い文章と概要」、Rows で 10 を設定し新規作成します。

Programme information というフィールドを、フィールドタイプ「長い文章と概要」で新規作成します。

Date for study というフィールドを、フィールドタイプ「長い文章と概要」、Rows で 10 を設定し新規作成しま

す。

Contact for further というフィールドを、フィールドタイプ「長い文章と概要」、Rows で 10 を設定し新規作成し

ます。

What you study というフィールドを、フィールドタイプ「長い文章と概要」、Rows で 10 を設定し新規作成しま

す。

表示管理でウェイトを調整します。

Professor のコンテンツタイプを新規作成

前章のイメージスタイルの作成で Professor、Professor_thumb のイメージスタイルが必要となりますので、前章

の手順で作成します。

以下の URL のページを参考に Professor のコンテンツタイプを新規作成します。

28

http://www.themebrain.com/guide/how-build-tb-university/4-modify-and-create-content-types/46-

create-professor-content-type

新規に Professor のコンテンツタイプを作成します。Job Title というテキストのフィールドを新規追加します。

Professor Image というフィールドを、フィールドタイプ「画像」で新規作成します。

Description というフィールドを、フィールドタイプ「長い文章」で新規作成します。

Social というフィールドを、フィールドタイプ「長い文章」で新規作成します。

「表示管理」で Professor Image とその他のフィールドの設定を修正します。

Event のコンテンツタイプを新規作成

Entity Reference モジュールが必要になります。

https://www.drupal.org/project/entityreference

以下の URL のページを参考に Event のコンテンツタイプを新規作成します。

http://www.themebrain.com/guide/how-build-tb-university/4-modify-and-create-content-types/46-

create-professor-content-type

新規に Event のコンテンツタイプを作成します。

フィールドタイプが「長い文章」で Time というフィールドを新規作成します。

フィールドタイプが「長い文章」で Location というフィールドを新規作成します。

フィールドタイプが「Entity Reference」、ウィジェットを「選択リスト」で Speaker というフィールドを新規作

成します。Entity selection で Professor を選択します。

「表示管理」で表示フォーマットや行順などを設定します。

Student Profile のコンテンツタイプを新規作成

以下の URL のページを参考に Student Profile のコンテンツタイプを新規作成します。

29

http://www.themebrain.com/guide/how-build-tb-university/4-modify-and-create-content-types/48-

create-student-profile-content

新規に Student Profile のコンテンツタイプを作成します。コメント設定はオープンに設定します。

フィールドタイプが「テキスト」で Dept というフィールドを新規作成します。フィールド設定は、「Maximum

length」を 100 で設定します。

フィールドタイプが「画像」で Student Image というフィールドを新規作成します。

フィールドタイプが「整数」で Age というフィールドを新規作成します。

既存のフィールドタイプ「field_social」で Social というフィールドを作成します。テキスト処理で「フィルターさ

れたテキスト(ユーザーがテキストフォーマットを選択)」を選択します。

既存のフィールドタイプ「ターム参照 field_gendar」で Gendar というフィールドを作成します。

「表示管理」で表示フォーマットや行順などを設定します.

ページの作成

Students ページの作成

Views モジュールと Views UI モジュールのインストール

https://www.drupal.org/project/views

以下の URL を参照して、Student ページを作成します。

http://www.themebrain.com/guide/how-build-tb-university/5-create-pages/51-students-page

Event ページの作成

以下の URL を参照して、Event ページを作成します。

http://www.themebrain.com/guide/how-build-tb-university/5-create-pages/52-event-page

30

Course ページの作成

以下の URL を参照して、Course ページを作成します。

http://www.themebrain.com/guide/how-build-tb-university/5-create-pages/53-course-page

Video ページの作成

以下の URL を参照して、Video ページを作成します。

http://www.themebrain.com/guide/how-build-tb-university/5-create-pages/54-video-page

スライドショーのブロックでの領域（リュージョン）設定

以下の URL を参照して、スライドショーのリュージョンを作成します。

http://www.themebrain.com/guide/how-build-tb-university/slideshow-region

もしくは、Views のスライドショーでコンテンツタイプと連動 (今までの勉強会での Views スライドショー設定を参

照して下さい)する設定をします。ただし、CSS 設定や詳細は TB-University 用とは設定が違います。

2014 年 8 月 28 日の Drupal 勉強会テキストから抜粋しました。

31

Views でスライドショーの定義

管理画面 －＞ サイト構築 －＞ Views －＞ Add new view

Add new view でページではなく、ブロックを作成します。Display format は Slideshow , fields を選択します。

Item per page は任意の数字で。

Continue & edit をクリックします。 主に、 以下の FIELDS とフォーマットを設定します。

32

FIELDS の追加をクリックし、コンテンツ：Slideshow Image を選択し追加します。

以下のように設定、Create a label を外し、以下のように設定します。

FIELDS でコンテンツ：Nid を追加します。

以下のような設定にします

33

フォーマットの環境設定をクリック

ボトム Widgets で Pager をチェックし。Page fields にコンテンツ: Nid をクリック

34

コンテンツタイプ Article のスライドショーイメージだけにする場合は、FILTER CRITERIA でコンテンツ

Slideshow Image の title を選択し、デフォルトで保存します。

FILTER CRITERIA で Article のコンテンツだけの表示になります。

Views を保存します。

スライドショーブロックを定義

管理画面 －＞ サイト構築 －＞ ブロック View：Slideshow ブロックを表示させたいブロックに指定しま

し。 例えば、Bartik デザインテンプレートの場合は、「主な」という場所に設置します。

「主な」の設定をクリックして、「以下のページのみ」で<front>と記入し、トップページにだけスライドショーを

設定させます。

35

指定したブロックにスライドショーが表示されます。ただし、Bartik デザインテンプレートの場合、スライドショー

の画面が大きすぎるので、サイズを変更します。

管理画面 －＞ 環境設定 －＞ 画像スタイル －＞ Slideshow 編集

「拡縮とトリミング 1200x600」の編集をクリックし、半分の 600x300 に設定します。更新スタイルをクリック

し、再度、トップページを表示させると以下のようになります。

36

パネルファーストカラム 1 の設定

Menu attributes モジュールを追加インストールします。https://www.drupal.org/project/Menu_attributes

以下の URL を参照して、Department List メニューを作成します。

http://www.themebrain.com/guide/how-build-tb-university/panel-first-column-1

パネルセカンドカラム 1 の設定

Views モジュールで Feature ビューを作成し、ブロックに設定します。詳細は以下の URL を参照します。

http://www.themebrain.com/guide/how-build-tb-university/panel-second-column-1-region

37

メインコンテンツ

この設定に関する説明ページは見つかりませんでした。

サイドバーファーストのリュージョンの設定

38

以下の URL を参照して、Professor を作成します。

http://www.themebrain.com/guide/how-build-tb-university/sidebar-first-region

サイドバーセカンドのリュージョンの設定

Quicktabs ブロックの作成

Quick Tabs モジュールの追加インストール https://www.drupal.org/project/quicktabs

以下の URL を参照して、Quick tab を設定します。

http://www.themebrain.com/guide/how-build-tb-university/9-siderbar-second-region/91-quicktabs-block

他のブロックの作成

TagCloud モジュールの追加インストール https://www.drupal.org/project/tagclouds

Calendar モジュールの追加インストール https://www.drupal.org/project/calendar

Custome search モジュールの追加インストール https://www.drupal.org/project/custom_search

39

以下の URL を参照して、他のブロックを設定します。

http://www.themebrain.com/guide/how-build-tb-university/9-siderbar-second-region/92-other-blocks

パネルサードカラム 1 の設定

jCarousel モジュールを追加インストールします。

https://www.drupal.org/project/jcarousel

Colorbox モジュールを追加インストールします。

https://www.drupal.org/project/colorbox

以下の URL を参照して、Featured Students を作成します。

http://www.themebrain.com/guide/how-build-tb-university/panel-third-column-1-region

メニューバーリュージョンの設定

Superfish モジュールを追加インストール https://www.drupal.org/project/superfish

以下の URL を参照して、メニューを作成します。

http://www.themebrain.com/guide/how-build-tb-university/menu-bar-region

40

パネルフォースカラム１の設定

Newsletter モジュールを追加インストール https://www.drupal.org/node/1212302

以下の URL を参照して、Newsletter のカラムを作成します。

http://www.themebrain.com/guide/how-build-tb-university/panel-fourth-column-1

パネルフォースカラム２の設定

以下の URL を参照して、Contact us のカラムを作成します。

http://www.themebrain.com/guide/how-build-tb-university/panel-fourth-column-2

パネルフォースカラム 3 の設定

41

以下の URL を参照して、Connect with us のカラムを作成します。

http://www.themebrain.com/guide/how-build-tb-university/15-panel-fourth-column-3-0

パネルフィフスカラム 1－６の設定

すみません、このカラムの設定に関する説明ページが見つかりません。

フッターの設定

すみません、フッターの設定に関する説明ページが見つかりません。

Views モジュールで Frontpage view の修正

以下の URL を参照して、Views の Frontpage ビューを修正します。

http://www.themebrain.com/guide/how-build-tb-university/modify-frontpage-view

問合せページの設定

42

Webform モジュールを追加インストール https://www.drupal.org/project/webform

Drupal 7 のコアにある PHP Filter モジュールを有効にします。

以下の URL を参照して、Contact us ページを作成します。

http://www.themebrain.com/guide/how-build-tb-university/contact-us-page

43

クレジット、謝辞、ライセンス

クレジット

このマニュアル作者は、Gennai3株式会社の程田和義です。

問合せ 電子メール: hodota@gennai3.co.jp 電話: 044-220-1588 FAX: 044-272-9523

謝辞

本マニュアル作成は、Themebrain社のサイトおよび Drupal.orgサイトを参考にしました。心より感謝い

たします。

出典： http://themebrain.com https://Drupal.org

ライセンス

Drupal は Dries Buytaert による登録商標です。その他本マニュアルで使われている製

品および名称については、それぞれの所有者の商標または登録商標です。