デザインの 基 礎 ( 英 文 資 料 を 読 みながら) Drupal のデザインをやさしく 学 ぶ 勉 強 会 第 1 回 開 催 日 2015 年 7 月 14 日 ( 火 ) 18:30-20:45
目 次 I. はじめに... 3 II. 復 習 デザインの 作 り 方 管 理... 3 デザインテンプレートの 基 本 テンプレートファイルの 簡 単 な 実 習 テンプレートのまとめ III. ベーステーマでサブテーマを 使 ってみよう... 14 Omega の 場 合 Adaptivethmes の 場 合 IV. デザイン 勉 強 用 の 環 境... 18 V. Acquia Dev Desktop 2 Beta 2014 年 版... 19 Acquia DevDesktop のインストール 英 語 環 境 から 日 本 語 へ VI. Theming Drupal 6 and 7... 35 How the Drupal theme system works Working with CSS Working with JavaScript and jquery Advanced theming Core templates and suggestions Drupal User Profiles with CiviCRM Contact Fields Overriding themable output Tools, best practices and conventions Upgrading a theme to a new version More theming resources and guides Theme HowTos Theme snippets Core themes Contributed themes VII. クレジット 謝 辞 ライセンス... 49 クレジット 謝 辞 1
ライセンス 2
はじめに Drupal で Web デザインを 開 発 する 方 法 を 基 礎 から 学 ぶ 勉 強 会 です Drupal7から 始 めて Drupal8がリリースされた 段 階 から Drupal8 も 学 びます また オリジナルのデザインテ ンプレートを 作 るほかに 良 く 使 われている Drupal のベーステーマ Omage Zen Adaptivethmes Bootstrap なども 学 びます 復 習 デザインの 作 り 方 管 理 Drupal 7 のデザインテーマの 技 術 情 報 ( 英 文 )は https://www.drupal.org/theme-guide/6-7 Drupal 7 のテーマとデザイン 開 発 の 技 術 情 報 ( 英 文 ) https://www.drupal.org/theming 簡 単 に 説 明 します デザインテンプレートの 基 本 Drupal をインストールしたディレクトリで テーマが 入 っている /sites/all/themes にテーマーテンプレート が 入 っています 以 下 の 説 明 は blossm, newlook, zen というテンプレートが 入 っています Newlook というテ ンプレートの 基 本 情 報 ファイルとして newlook.info があります 必 ず テーマ 名.info というファイルを 作 成 します そのファイルの 中 出 name は 必 ずテンプレートごとに 異 なる 名 前 で 記 入 します Drupal が 起 動 す るときにテンプレートの 種 類 をこの 名 前 で 認 識 します 3
管 理 画 面 -> テーマ で 作 成 した newlook.info が 認 識 されていることを 確 認 します 4
そのテンプレートをデフォルトに 設 定 します トップページを 表 示 させると CSS が 適 用 になっていない 状 態 です CSS を 適 用 させるために 先 程 の newlook.info ファイルに CSS ファイルのパスを 記 入 して 保 存 します そのパス と 同 じ 状 態 で /sites/all/themes/newlook/css 以 下 に CSS ファイルを 保 存 します 5
デバックしてみると CSS が 読 み 込 まれていることを 確 認 できます この CSS ファイルの 読 み 込 みは 管 理 画 面 -> 環 境 設 定 -> パフォーマンス 帯 域 幅 最 適 化 で CSS と JavaScript を 設 定 できます 6
日 本 語 の 管 理 画 面 7
Newlook.info ファイルに 表 示 ブロック(ブロックリージョン)を 定 義 します まったく 別 のデザインテンプレート(Gratis)のブロックリージョン サンプルとして Newlook.info ファイルに 設 定 したブロックリーション 名 は 管 理 画 面 -> サイト 構 築 -> ブロック で 表 示 させたいブロック 名 として 取 り 扱 うことができます 8
デザインテンプレートファイルの 継 承 関 係 ベーステーマ サブテーマの 関 係 Drupal 7 のデザインテンプレートと 使 われるファイルの 概 要 英 文 ですが 各 ファイルの 概 要 は https://www.drupal.org/node/171194 に 説 明 があります 9
テンプレートファイルの 簡 単 な 実 習 Drupal7のコアに 入 っているテンプレート user-profile.tpl.php ファイルを 使 って 実 習 します /modules/user/user-profile.tpl.php User-profile.tpl.php ファイルの 内 容 10
その user-profile.tpl.php ファイルをテンプレートファイルにコピーします 11
その user-profile.tpl.php ファイルに H1 タグで 文 字 を 追 加 します 実 際 に user-profile.tpl.php ファイルに HELLO THERE!! こんにちは!! という 文 字 を 追 加 して 管 理 画 面 で ようこそ さん をクリックして ユーザプロファイルをみると 以 下 のようになります ユーザ 情 報 に 写 真 をアップしていない 場 合 は 写 真 は 表 示 され ません Drupal7 のコアに 入 っているユーザプロファイルのテンプレートを 使 って 今 使 っているデフォルトテンプレートに だけ 修 正 したユーザプロファイルを 表 示 させる 設 定 を 実 習 しました Drupal7 では テンプレートファイルの 名 前 で 読 み 込 みするルールが 定 義 されています 詳 細 は https://www.drupal.org/node/1089656 12
テンプレートファイルで 使 用 するマシン 名 は 各 コンテンツタイプのノードの 定 義 になります 13
管 理 画 面 -> サイト 構 築 ->コンテンツタイプ テンプレートのまとめ テーマファイルに SQL を 記 入 することはしません 最 良 の 使 い 方 として 画 像 などのサイズ 変 更 はサーバ 側 ( 管 理 画 面 -> 環 境 設 定 -> 画 像 スタイル)で 設 定 しま す CSS では 設 定 しないようにします ベーステーマでサブテーマを 使 ってみよう Omega の 場 合 ダウンロード https://www.drupal.org/project/omega Version 7.x-5.0-alpha1 14
インストール 後 管 理 画 面 -> テーマ で fluxtheme を 選 択 します Fluxtheme はベーステーマ Omega のサブテーマです サンプルとして 使 います ただし このサブテーマの 内 容 は Omega のバージョンアップなど で 最 新 版 に 更 新 されますので このサブテーマをもとに 自 分 のテーマを 作 成 します Omega は Drupal の 管 理 コ マンド Drush コマンドで 管 理 する 方 法 がメインです Drush omega-export revert で 新 しいサブテーマを 作 成 します 参 考 まで Omega4 のテーマ 作 成 http://friendlymachine.net/posts/getting-started-omega-4 Drush コマンドが 使 えない 場 合 は https://www.drupal.org/node/2132039 にて 手 順 を 確 認 します サブテーマを 新 規 作 成 できない 場 合 でも テストは 可 能 です インストール 後 管 理 画 面 -> テーマ fluxtheme を 選 択 左 の Layout メニューで Enable Layouts extension をチェック ON にする いくつかのレイアウトパターンを 選 択 開 発 時 に 必 用 であればデバックモードにする 左 の Development メニューで Enable Development extension をチェック ON にする その 下 の 項 目 も 必 要 な 機 能 はチェック ON にします Layout 15
Development 新 しい CSS は テンプレートの CSS を 編 集 するか css_injector モジュールなどを 使 って 設 定 します CSS_injector モジュール https://www.drupal.org/project/css_injector 管 理 画 面 -> 環 境 設 定 -> 開 発 css_injector 16
Adaptivethmes の 場 合 サブテーマを 活 用 Enable Additional Features Custom CSS 17
CSS の 定 義 デザイン 勉 強 用 の 環 境 Acquia Dev Desktop2 のダウンロード インストール https://www.acquia.com/downloads 次 の 章 でインストール 作 業 を 確 認 します 18
Acquia Dev Desktop 2 Beta 2014 年 版 Drupal スタック 環 境 Acquia DevDeskTop 2 Beta を 使 ってみましょう PHP のバージョンを 選 べたり 既 存 Drupal サイトのバックアップデータをインポートできます 豊 富 な 機 能 が 追 加 になりました Acquia DevDesktop のインストール Beta 版 のダウンロード: https://www.acquia.com/downloads 英 文 のマニュアル https://docs.acquia.com/dev-desktop2 Windows でのインストール Next をクリック 19
XMail server は Windows の PC でメールを 送 信 できるようにする SMTP プログラムです 実 行 できる 状 態 で Next へ 内 容 を 確 認 して Next へ 20
ライセンス OK として Next 任 意 のインストール 先 を 指 定 して Next 21
ポートは 問 題 なければデフォルトで Next 内 容 確 認 後 Next 22
Next でインストール 開 始 インストールで 上 記 の 警 告 が 表 示 された 場 合 アクセルを 許 可 する をクリック 23
DevDesktop のインストール 完 了 です Finish をクリック Drupal をインストールします 一 番 上 の Start from scratch,.. を 選 択 し 24
標 準 の Drupal 7.30 をインストールします Install をクリック PHP は 最 新 版 を 選 択 して Finish をクリック Drupal のインストールが 始 まります 25
Local site のリンクをクリック Standard を 選 択 して Save and continue 26
そのまま Save and continue をクリック 27
メールアドレス ユーザ 名 などを 記 入 Japan を 選 択 して Save and continue 英 語 版 の Drupal 7 がインストールできました サイトの 管 理 画 面 で 英 語 から 日 本 語 に 変 更 します 英 語 環 境 から 日 本 語 へ ここからの 文 章 は Drupal 7 のバージョンが 古 いですが 7.30 に 合 わせて 下 さい 管 理 画 面 標 準 のコアモジュールでは 多 言 語 で 使 用 する Locale モジュールは 組 み 込 まれていますが 有 効 にな っていないので 有 効 にします 管 理 画 面 -> modules -> Core にある Locale をチェックし Save configuration をクリックします 28
英 語 の 他 に 日 本 語 も 使 えるように 設 定 します 管 理 画 面 -> Configuration -> REGIONAL AND LANGUAGE の Language 上 記 の Add language をクリック 29
Language name で Japanese を 選 択 し Add language をクリック Show row weights をクリックして 言 語 の 優 先 順 位 とデフォルトを 設 定 します Japanese をデフ ォルト Weight を0 English を1にすることで 最 初 の 優 先 順 位 に 設 定 します Save configuration をクリック 30
次 に 日 本 語 ファイルのダウンロードとインポートを 行 います 管 理 画 面 -> Configuration -> REGIONAL AND LANGUAGE の Translate interface Translate interface が 表 示 されたら IMPORT のタグを 選 択 して 上 部 文 章 中 の Drupal translation page をクリックして http://localize.drupal.org/translate へ 移 行 します 31
このサイトで Japanese を 選 択 します 32
バージョンは 最 新 のバージョンを 選 択 して 下 さい たとえば Drupal core 7.23 Download を 選 択 します ファイル 名 drupal-7.23.ja.po です 管 理 画 面 に 戻 り Translate interface の IMPORT タグでダウンロードした(drupal- 7.23.ja.po)Language file をインポートします 参 照 ボタンをクリックし ファイルを 選 択 後 デ フォルトの 設 定 で Import をクリック 33
インポートが 終 了 すると 日 本 語 が 表 示 されます 34
Theming Drupal 6 and 7 Drupal の Web デザインを 作 る 基 本 Drupal 6 と7を 中 心 に 説 明 https://www.drupal.org/theme-guide/6-7 35
How the Drupal theme system works 36
Working with CSS Working with JavaScript and jquery 37
38
Advanced theming 39
Core templates and suggestions 40
Drupal User Profiles with CiviCRM Contact Fields Overriding themable output 41
Tools, best practices and conventions 42
Upgrading a theme to a new version More theming resources and guides 43
Theme HowTos 44
45
Theme snippets 46
Core themes 47
Contributed themes 48
クレジット 謝 辞 ライセンス クレジット このマニュアル 作 者 は Gennai3 株 式 会 社 の 程 田 和 義 です お 問 合 せ 電 子 メール hodota@gennai3.co.jp 電 話 044-220-1588 謝 辞 本 マニュアル 作 成 は 主 に 以 下 のサイトを 参 考 にしました 心 より 感 謝 いたします 出 典 : https://drupal.org ライセンス Drupal は Dries Buytaert による 登 録 商 標 です その 他 本 マニュアルで 使 われている 製 品 および 名 称 については それぞれの 所 有 者 の 商 標 または 登 録 商 標 です 49