Drupal のコア要素を知る～構築を支える道具立て～

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Drupalのコア要素を知る
～構築と運用を支える道具立て～
白根健司（しらねけんじ）
(株)シナジークエスト
CMSMix Sapporo
2016年2月27日

趣旨
Drupal でよく耳にする・・・
• 大規模事例多数（特に海外）
• エンタープライズ指向！
• コンテンツ管理 "フレームワーク"（=CMF not CMS）
・・・本日そういう話はちょっと置いといて、
• Drupal のサイト構築...

自己紹介
• 白根健司（しらねけんじ）
– 妻１人、子供２人
– 老眼進行中
– ポンコツ中年
– Drupal 使用歴９年くらい
• Drupal 4.6 の頃から少しずつ…
– 「Drupal さっぽろ」事務局＆雑用係
• 月例の Dr...

内容
• 全体構造
• フィールドとエンティティ
– ノード、コメント、タクソノミー、ユーザー、ファイル
• Views モジュール（=クエリビルダ）
• ブロックシステムとテーマ
• contributed モジュールの利用
– 例）Feed...

全体像
Drupal ってどんな CMS ？

Drupal の紹介
• Drupal（ドゥルーパル）とは
– PHP で記述されたオープンソース Web コンテンツ管理ソフトウェア
• GPLv2 ライセンス
• CMS Web サイトの 4.9%（全 Web サイトの 2.2%）が Dr...

国内のコミュニティ
• 定期的な Meetup
– Drupal Cafe
• https://www.facebook.com/DrupalCafe
– Drupal さっぽろ
• http://drupalsapporo.net/
• 質問...

Drupal のレイヤー構造
1. データ（エンティティ）
– システムの基礎となるデータ
2. モジュール
– 個々の機能を提供するプログラム
3. 出力コンテンツ
– ページ：URLが割り当てられる
– ブロック：ページ内の区画に出力
4....

モジュール＝ building block
• Drupal の機能を拡張するソフトウェア（プログラム）
• 次の３つに分類される：
– Core モジュール
• Drupal 本体に含まれる標準機能モジュール
• 追加コンポーネントのダウン...

フィールドとエンティティ
システム上で統合的に永続化データを扱うための共通概念

エンティティとタイプ
• エンティティとは？
– Drupal のデータベースに保管される構造化データを一般化したもの
• コア標準の管理 UI でフィールド設計を定義できる
• エンティティタイプ
– エンティティはその用途・目的に応じたタ...

バンドル（bundle）
• バンドル
– エンティティタイプにフィールドを関連付けた実装のこと
– 標準の UI でフィールド設計の定義や編集ができる
ページ
Body フィールド
・・・
ノード
エンティティ
タイプ
バンドル

フィールド
• フィールドとは
– 再利用可能なデータ断片
– データの用途・目的に応じたタイプ（型）を持つ
– ウィジェットを持つ
• 値の編集機能を提供する
• 値の表示機能を提供する

ページ
Body フィールド
・・・
ノード
エンティティ
ブログ記事
本文フィールド
写真フィールド
・・・
カテゴリ
用語名
用語説明
・・・
ターム
タグ
用語名
・・・
エンティティタイプ
バンドル

ノードからエンティティへ：flexinode、CCK、field
最初から現在のような構造だったわけではありません。
• flexinode モジュール
– https://www.drupal.org/project/flexinode
– ...

多様なフィールド拡張モジュール
さまざまなフィールドのモジュールが提供されている：
– 数値、選択肢、一般のファイル、画像ファイル（コア）
• 画像は「画像スタイル」として種々の変換処理を定義することもできる
– リンク
• サイト内/外の...

参照による関連の定義
• エンティティ参照フィールドで関連を定義できる
– 多重度（１対１、１対多）も指定できる
– 例）ノードからタクソノミータームを参照
• 特定のノードコンテンツが参照先のタームに分類されることを表す
– 多重度 > 1 ...

エンティティの活用事例：Drupal Commerce
• Drupal 7 ベースの EC サイト構築モジュール
– 商品、注文、顧客、注文明細などの EC エンティティを提供
– 各エンティティは Drupal 共通のフィールド UI でカ...

サンプル例：「お気に入り動画」ノードタイプ
• お気に入りの動画を保存するノードのタイプ
– Video Embed Field モジュールを利用して・・・
• https://www.drupal.org/project/video_emb...

Views モジュール
UI でデータの問合せを定義できるクエリビルダ

View と Views モジュール
• データベース用語の "View"
– ビュー（View）表
• ひとつ以上のテーブルから任意のデータを選択＆カスタマイズして表したもの
• 一度定義すれば、同じ条件に基づく結果を簡単に取得できる
• 何...

クエリ（問合せ）の構成要素
SQL 疑似コード例）
SELECT TITLE // 列 → フィールド
FROM BLOG // 表 → エンティティ
WHERE PUBLISH=TRUE // 抽出条件
ORDER BY POSTDATE; ...

Views モジュールの UI
取得するフィールド
（SELECT）
選択条件（WHERE）
並べ替え条件（ORDER
BY）

その他の設定オプション
• ディスプレイ
– Views の出力先を指定する（ブロック、ページ、フィード、・・・）
• フォーマット
– 出力の形式を指定する
• HTML List (ul)、グリッド、テーブル、フォーマットされていないリスト...

テーマとブロックシステム
テンプレート内の区画（リージョン）にコンテンツを配置する仕組み

Drupal のレイヤー構造
1. データ（エンティティ）
– システムの基礎となるデータ
2. モジュール
– 個々の機能を提供するプログラム
3. 出力コンテンツ
– ページ：URLが割り当てられる
– ブロック：ページ内の区画に出力
4....

テーマとテーマエンジン
• テーマとは？
– サイトの外観を定義する、テンプレート、スタイルシート、スクリプト等を
まとめたソフトウェアパッケージのこと
– Drupal サイトに導入できる種々のテーマが開発・公開されている
• テーマエン...

テーマの例
• コアに付属するテーマ
– Bartik
• Drupal 7 インストール後の初期デフォルトテーマ
– Garland
• Drupal 5 のコア標準テーマ、Color モジュール対応、fixed/fluid 切替対応
– ...

Drupal サイトのテーマを管理する
1. デフォルトテーマの設定
2. 管理用テーマの設定
3. テーマのグローバル設定
– ロゴ
– サイト名とスローガン
– ショートカットアイコン（ファビコン）
– ユーザーのアイコン（アバター）
– ...

1. デフォルトテーマの設定
• デフォルトテーマの設定
– 有効にするだけでなくデフォルトテーマにすることで通常表示されるテーマを指定する
• デフォルトテーマとは、一般のサイト訪問者に表示されるテーマ（フロントエンドテーマ）のこと
デフ...

2. 管理用テーマの設定
• 管理用テーマ
– サイトの管理に関するパス（URL）に適用されるテーマ
• /admin 配下のパスを持つページ
– コンテンツ編集用のページに適用することもできる
– デフォルトテーマの設定ページの一番下にある ...

3. テーマのグローバル設定 (1)
• 全テーマ共通の環境設定
– インストール済みの全テーマに適用されるデフォルト設定を指定できる
• パス： admin/appearance/settings
• 個別のテーマの設定で再定義できる

3. テーマのグローバル設定 (3)
設定項目説明
メインメニュー
セカンダリーメニュー
このチェックボックスをオンにすると、テンプレートファイル page.tpl.php で
使用する変数 $main_menu と $secondary_...

4. カスタムテーマ設定
• テーマやモジュールによって提供されるテーマ設定
– 特定のテーマやモジュールによって提供されるテーマ設定もある
• 例）Garland テーマの [コンテンツの幅] 設定
– 固定幅か可変幅（フルード）かを指定する

5. テーマの追加インストール
• テーマのインストール場所：
– themes フォルダ
• コアのテーマのインストール場所
• サイト固有のカスタムテーマはここにインストールしないこと
– インストールするとコアの更新で削除されたり上書きさ...

Drupal 7 テーマを構成するファイル (1)
出典（図）https://drupal.org/node/171194
リージョン
コンテンツの出力先となる
ページ内の区画領域のこと

Drupal 7 テーマを構成するファイル (2)
• .info ファイル（必須）
– テーマのメタデータ、スタイルシート、JSファイル、リージョン等を定義
– .info ファイルの名前がテーマの内部名を定義する
• テンプレート（.tpl...

リージョンについて
• リージョンとは？
– コンテンツの出力先となる、ページ内の区画領域のこと
• テンプレート内の該当する位置にコンテンツ出力コードを埋め込んで実装する
– HTML マークアップの高レベルの構造定義に用いられる
• リージ...

コアのデフォルトリージョン (1)
• Drupal コアが定義するリージョン
– プログラムから利用できる9つのデフォルトリージョンが用意されている
• .info ファイルの書式で記述すると次のようになる：
• regions[] の記...

コアのデフォルトリージョン (2)
page_top
page_bottom
footer
header
sidebar_secondsidebar_first
highlighted
content
help

コアのデフォルトリージョン (3)
• 主要リージョンの解説
– page_top、page_bottom
• サイトが正常に動作するために必要な必須リージョン
• ブロック設定の UI には表示されない非表示リージョン（後述）
– high...

（参考）html.tpl.php の内容
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd...

リージョンへのコンテンツ割り当て
• ブロックリージョン
– テンプレート内に設けられる、コンテンツの出力先となる区画
• .info における定義構文
– 内部名：処理系が使用する識別名
– 表示名：ブロックの管理 UI に表示される表示名...

サブテーマ
• サブテーマとは
– 既存のテーマを継承して作成するカスタマイズ版テーマのこと
• 詳細はこちら ⇒ https://drupal.org/node/225125
• サブテーマを作るには
– 新しいテーマを作る
• sites/...

テーマを利用した出力のカスタマイズについて
• ほとんどそのまま使えるが、一部どうしても変更したい・・・
– という場合にどうするか？

テーマ関数について
• テーマ関数とは？
– モジュールが提供する、オーバーライド可能なコンテンツ生成用の関数
• モジュール内の各部から必要に応じて呼び出されるマークアップ生成処理
– 目的：
• テーマ側でカスタマイズ可能な HTML マー...

テーマ関数のオーバーライド
• テーマ関数をオーバーライドする手順
1. 目的のテーマ関数をソースやドキュメントで探して
オリジナルのソースを見つけ出す
2. 入手したソースをテーマの template.php に貼り付ける
3. テーマ関数名...

サンプル：サブテーマの作成例
• 例）Bootstrap テーマ
– Bootstrap を利用したテーマの作成用に用意されたベーステーマ
• https://www.drupal.org/project/bootstrap
– サブテーマを作...

サンプル：テーマ関数のオーバーライド例
• 要求
– 動画コンテンツタイプの作成者欄にユーザー名が表示される。
– これを先にユーザーに追加した「ハンドル名」フィールド」に変えたい・・・
• 対応方法
– ノードの作成者欄のユーザー名出力の...

contributed モジュールによる
システム機能の実装
さまざまな機能を提供するモジュールの活用

拡張/contributed モジュール
• コア API に基づいて作られるアドオン機能
• コアにない機能を追加する
• コアの動作を再定義する
• さまざまな機能を組み込める
膨大な数の資産があります

例）Panels モジュール
• ページ内のレイアウトを自在に定義
• コンテキストに応じてレイアウトを変更

例）Context モジュール
• 前後関係に基づく条件に
応じてサイトの要素を
多様に変化させる

例）Rules モジュール
• イベント、条件、アクションを定義
• サイト上で発生するイベントに基づき
さまざまなサイト挙動を実現する

例）Feeds モジュール
• フィードを読み込んでサイトの
データベースに取り込む
– https://www.drupal.org/project/feeds

サンプル：Feeds を使ってみる
• YouTube のフィードを読み込んでみる
– 動画フィードのURL：
• https://www.youtube.com/feeds/videos.xml?channel_id=[チャンネルID]
• ...

フィードの内容
<feed xmlns:yt="http://www.youtube.com/xml/schemas/2015" xmlns:media="http://search.yahoo.com/mr
ss/"xmlns="http:/...

パーサーの設定
entry 要素の下の・・・
id 要素は GUID (一意識別ID）にマップ
title 要素はタイトルにマップ
link 要素の href 属性は
動画フィールドの URL にマップ
media:group/media:de...

Drupal 8 について

最新の Drupal リリース
• 2015年11月にリリースされた Drupal の最新版
– https://www.drupal.org/8
• 特徴
– インプレース編集
– 構成情報をコンテンツデータベースと分離
– 多言語機能の強化...

REST と "Headless Drupal"
• REST (REpresentational State Transfer)
– HTTP をそのまま利用したリソース公開手法
• URL でリソースを識別する
• HTTP メソッドで処理...

HTTP メソッド
メソッド
HTTP
説明
1.0 1.1
GET ◎ ◎ URIで指定したリソースを取得する。
HEAD ◎ ◎ GET と同じだがヘッダーのみを取得する。
POST ○ ○ クライアントから名前と値のペアの集合としてデータ...

Drupal 7 の REST 実装
• Services モジュール
– https://www.drupal.org/project/services
• Services Views モジュール
– https://www.drupal....

REST in Drupal 8 Core
• RESTful Web Services (rest)
– エンティティやその他のリソースを RESTful API で公開する
• Serialization (serialization)
–...

Drupal 8 サイトの REST 構成管理
• Drupal 8 の構成管理
– Configuration Management in Core
• 種々の構成設定を .yml ファイルとしてインポート/エクスポートできる
• [環境設定...

REST UI モジュール
• REST の構成管理 UI を提供する (not Core)
– https://www.drupal.org/project/restui
– [環境設定] > [ウェブサービス] > [REST]
• できる...

REST リソースの設定

HTTP メソッド・データ形式・認証
• HTTP メソッド
– GET：リソースの取得
– POST：リソースの新規追加
– DELETE：リソースの削除
– PATCH：リソースの更新
• データ形式
– HAL-JSON（Hyper Ap...

各メソッドのリクエスト仕様
• 参照
– JavaScript and Drupal 8 RESTful Web Services
• https://www.drupal.org/node/2405657
• 例）
– Retrieve（取得...

注意点：CSRF対策と権限設定
• CSRF 対策
– POST/PATCH/DELETE では X-CSRF-Token ヘッダが必要
• X-CSRF-Token：CSRF 攻撃を防ぐために必要
– 下記のパスから得られるトークンをリクエス...

認証について
• 匿名アクセスでない場合は認証への対応が必要
• 例）Basic 認証の場合
– Authorization リクエストヘッダーが必要
– 値は次のとおり：
• 先頭に "Basic "
• 続けて「<ユーザー名＞:＜パスワー...

コンテンツ一覧を REST で取得するには
• Views の "REST export" ディスプレイ
– フォーマットに "Serializer" を指定
– フィールドの環境設定のエイリアス
• JSON の key 値をカスタマイズでき...

AngularJS と組み合わせたサンプル
Drupal 8 Restful servivce
endpoint
endpoint
endpoint
endpoint
JSON
GET
PUT
POST
DELETE

まとめ
• Drupal のデータ管理
– 構造データをエンティティとして一般化
• コンテンツに限らない種々の構造化データを統一された API で扱える
• Views = クエリビルダ
– コーディング不要で高度なデータクエリを UI で対...

ありがとうございました
• 興味をお持ちいただけたらぜひ使ってみてください
• 勉強会もやっていますのでお気軽に遊びに来てください
– http://drupalsapporo.net/

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

AngularJS入門 by Kenji Shirane 5410 views

View on Slideshare

1 of 77 Ad

View on Slideshare

1 of 77 Ad