Views

ウミメンバーが選ぶ個人的に好きなDrupalモジュール BEST3!

こんにちは、ウミの森山です。

実は先日、ウミで働いているメンバーたちに「個人的に好きなDrupalモジュール BEST3」についてアンケートをとってみました。日々Drupalに親しみDrupalと格闘している(?)ドゥルーパリストたちが選ぶモジュールは一体どんなものなのか興味が湧きませんか?(私だけだったらすみません..)本日はそのアンケート結果をご紹介してみたいと思います。

今回は、各モジュールの簡単なご説明の他、選出理由を書いたコメントも一緒にご紹介しています。「Drupal開発会社のおすすめモジュールを聞いてみたい」という方や「どんなモジュールがあるのかサラッと情報を仕入れておきたい」という方に、メンバーの生の声とともにお楽しみいただければ幸いです。

※今回の記事はあくまでウミメンバーの個人的な感想を紹介している記事となります。一般的に人気のあるモジュールについては、大野が以前にご紹介した「Drupal 8 定番モジュールランキング トップ20【2017年9月更新】」をご参照いただければと思います。

それでは早速いってみましょう!

第1位: Viewsモジュール

堂々の第1位は「Views」です! この結果は薄々予想されていた方も多いのではないでしょうか?

Viewsモジュールは、Webサイトでよく見かける「新着情報」や「ニュース」の表示にも欠かせないDrupalの定番モジュール。データベースからコンテンツを取り出して、リスト表示やテーブル表示、一覧ページやブロックの作成などなど、ここに書ききれないくらい様々なことを、なんとGUI操作だけで行なうことができてしまうスーパーモジュールです。そういえば私が入社して初めて覚えたモジュールもViewsでした。

Drupal7ではコントリビュートモジュールという位置づけでしたが、Drupal8からはコアモジュールに仲間入りを果たしたことからも、そのお役立ち度が伺えますね。

Viewsモジュールを選んだメンバーの声を以下にご紹介しておきます。

  • 「ありとあらゆるコンテンツを管理画面上から、好きなフォーマットで、ダイナミックに表示できるから。」 
  • 「設定のみで、ページや画面の埋め込むブロックを簡単に作成出来る」
  • 「お知らせやブログなど配信するコンテンツに非常に便利なよろず屋って感じです。」
  • 「こんなことまでできるのかといつも驚かされる万能選手。ビューズなしにDrupalは語れない超絶便利なモジュール。」

第2位: Develモジュール

そして注目の第2位は、「Devel」モジュールでした!私自身はあまり触れる機会の少ないモジュールですが、開発者用に様々なデバッグ用の機能を提供してくれるモジュールで、エンジニアの皆さんにとっては必要不可欠な存在のモジュールだそうです。

Develモジュールを選んだメンバーの声はこちら。

  • 「デバッグ用モジュール!これがないとやっていけないと思います。。」 
  • 「カスタムモジュール開発時にデバッグ機能を提供してくれるので、困った時にデバッグして効率的に開発をすすめられるので」 

どのコメントもエンジニアさんのコメントですが、一つめのコメントは特にその依存度が伺えますね!文末の「。。」にはどのような想いが込められているのでしょうか(笑)

第3位

第3位は得票数が割れる結果となりましたので、以下にモジュールについての簡単な説明と選んだメンバーのコメントとともに順にご紹介しておきます。

Webformモジュール

Webformモジュールは、Drupalでフォームとアンケートを作成するためのモジュールです。ユーザーがフォームに入力した結果を任意のメールアドレス宛に通知することができ、Excelまたは他のスプレッドシート等に結果をエクスポートすることも可能です。また、簡単な統計レビューを提供することもでき、機能を拡張するための広範なAPIも備えています。

  • 「完成度が高く、他のCMSでもこれほどの機能を持ったお問い合わせフォームは見たことがない」

Paragraphsモジュール

Paragraphsモジュールはコンテンツ作成のための新しいソリューションを提供するモジュールです。 パラグラフモジュールを利用することで、予め定義した独立した段落タイプを用意・選択いただけるようになるため、WYSIWYGのボディフィールドに画像や動画を含むすべてのコンテンツを突っ込むということはなくなり、更新担当者さんにとってより分かりやすく使いやすい管理画面を提供することができます。段落タイプは、単純なテキストブロックや画像から、複雑なスライドショーまで、様々な要素を扱うことができます。

  • 「フィールドとエンティティを紐付けることができてデータ構造の可能性が特段に高まったから。上手く利用すると、HTMLがわからなくても見栄えを保った素敵な管理画面を作れるから」

REST UIモジュール

REST UIモジュールは、GUIよりREST APIの設定を行うためのモジュールです。 弊社小林が「RESTful Web Services と REST UIで始めるDrupal8 REST API入門」というブログを書いていますので、こちらもよろしければご参照ください。

  • 「管理画面上からRESTの設定ができて便利です。」

Videoモジュール

ビデオモジュールは、任意の形式で動画をアップロードし再生することができるモジュールです。動画のサムネイルを自動作成したり、Amazon S3のようなクラウドファイルシステムからビデオをコピーして配信することもできます。

  • 「動画埋め込みを勝手にやってくれるので、、」

Metatagモジュール

メタタグモジュールは、SEO(検索エンジン最適化)に有効とされる「メタタグ」を管理画面から簡単に設定できるようにするためのモジュールです。ソーシャルネットワーク上で共有するときのコンテンツの表示方法を制御できるメタタグ(FacebookのOpen Graph Protocol、TwitterのTwitter Cards)もサポートしています。

  • 「簡単に各ページにmetaタグを設定でき、SEOを気にされているお客様に喜んでいただけるので」

Blockモジュール

ブロックとは、ウェブページの特定の領域にレンダリングされるコンテンツのボックスのことで、それらブロックを制御するためのモジュールです。Drupalサイトを構築する時には必要不可欠な存在ですのでコアモジュールとしてDrupal本体に組み込まれています。

  • 「配置したいコンテンツや表示先のページを自由に選択でき、非常に使い勝手が良い。」

Taxonomyモジュール

こちらもコアモジュールです。キーワードをカテゴリやタグ、あるいはメタデータとして使用し、コンテンツ同士を関連付けたり、分類することができます。Drupalでは、これらの用語(Terms)は「ボキャブラリー」内に集められており、Taxonomyモジュールでは、それらのボキャブラリーを作成、管理、適用することができます。

  • 「簡単にカテゴリやタグなどが設定できて、検索やお知らせなどの利用に非常に便利。お客様側で簡単に設定いただけるのも良い。」

Multiupload Filefield WidgetモジュールMultiupload Imagefield Widgetモジュール

Drupal7用のモジュールで、画像(またはファイル)をアップロードするときに複数画像を一度にまとめて選択できる複数選択機能を提供するためのモジュールです。ちなみにDrupal8ではこの機能がコアに取り込まれたので標準で複数のファイルがアップロードできるようになっています。

  • 「何気に便利でよく使ってました。地味だけど、Drupal7サイトを更新する際にこのモジュールが入ってないと、不便でがっかりしてしまう。」

Konami Codeモジュール

多くのコナミのゲームに登場するチートコード「コナミコマンド」をDrupalサイトに設定することのできるモジュールです!ユーザーがWebサイト上で特定のコードを入力すると、画面からDrupaliconが降ってきたり(!)Webサイトが崩れ始めたり(笑)などおもしろいアクションを呼び起こすことができる遊び心溢れるモジュールです。残念ながらDrupal8には対応していないようです。

  • 「おもしろい。実際のプロジェクトで使うことは多分一生ないだろうけど、こっそり使ってみたくなります(笑)。(お客様のサイトにこっそり仕込むようなことは決してございませんのでご安心ください。)」

最後に

以上です。コアモジュールもコントリビュートモジュールも含めた様々な回答が上がりましたがいかがでしたでしょうか?約26,000ものモジュールがあるといわれるDrupalだけに、私たちのような小さなチームでも非常にバラエティーに富んだ回答結果となりました。

今回はウミメンバーから見た人気モジュールをご紹介いたしましたが、今後も開発者目線とはまた違った角度からDrupalについてご紹介していければと思います。

コメントを追加

プレーンテキスト

  • HTMLタグは利用できません。
  • 行と段落は自動的に折り返されます。
  • ウェブページのアドレスとメールアドレスは自動的にリンクに変換されます。

同窓生専用 SNS サイトを Drupal で構築 (準備編)

こんにちは。プログラマーの山中です。

やはり今季は暖冬でしたね! 滋賀の南東部に位置する我が家の畑の端に植わっている梅の木が例年より早く花を咲かせました。(アイキャッチ画像は山中家の梅です)まだ少し肌寒いですが、春の兆しが見られて気分が上がりますね(`・ω・´) (この記事を執筆した翌日の3月1日に雪が降りましたけれども・・・)

さて、 前回の記事 では SNS サイト構築のためのディストリビューションである Drupal Commons を紹介しました。 Drupal Commons はインストールが完了した時点で SNS の主要な機能を構築することができる便利なディストリビューションですが、 実際に SNS サイトを構築するにはテーマを決めて、その機能が必要かどうか見極める必要があります。 不要な機能はサーバの無駄遣いですし、何より利用者にとって利用価値がなければ存在する意味がありません。

Drupal では ディストリビューションを使わなくても十分 SNS を構築することができますので、この記事では最初から SNS の機能がひととおり入っている Drupal Commons は使用せず、 Drupal のコアのモジュールとコントリビュートモジュールを使用して実装します。

今回は「母校の同窓用SNSサイトの構築」にテーマを絞り、以下の流れで機能開発を行う想定で、この記事では開発準備(モジュールの選定)までご紹介できればと思います。

  • テーマの決定
  • 機能の選定
  • モジュールの選定 ← 今回の記事はここまで
  • 各モジュールの設定・機能開発
  • テーマ開発

まずは必要な機能の選定を行いましょう。

SNS に必要な機能の選定

まずはアイディアを出して、そこからどんな機能が必要なのかを見定めましょう。

今回の SNS サイトのテーマは「母校の同窓生専用SNS」なので、同窓生同士のコミュニケーションの場が必要です。 そこで、以下の機能が必要だと考えました。

  • ユーザー関連の機能
    • ユーザーの登録 / 編集 / 削除
    • ユーザー入力項目(名前 / 写真 / 卒業年度 / 学科 / 部活 / サークル / 学部 / 学科)
    • 友達登録機能 / ユーザーグループ機能
    • プライベートメッセージ
    • Facebook / mixi から登録情報をインポートすることができる
    • メールで招待された人だけユーザー登録できる機能(過去の mixi を参考)
  • コミュニティ機能(グループ機能)
    • 部活別 / サークル別
    • 委員会別
    • 学部別 / 学科別
    • 卒業年度別
    • 自由コミュニティ(公開/非公開の選択が可能)
  • 投稿機能
    • 日記
    • イベント作成・出欠管理機能 (Twipla や Facebook のイベントを参考)
    • フォーラム / 掲示板
    • タイムライン機能とタイムラインへの投稿 (Twitter や Facebook のタイムラインを参考)
    • 各投稿機能に対するコメントの投稿

たくさんのアイディアが出ましたが最初から多くの機能をリリースすると SNSの運用が うまくできず、失敗するかもしれません。 Drupal は後から機能の追加を行うことができます。失敗した時のリスクを最小限に抑えるため、ここでは最初の機能は必要最低限のものを実装することにします。 更に機能を絞った結果、以下の機能を実装することに決まりました。

  • ユーザー関連の機能
    • ユーザーの登録 / 編集 / 削除
    • ユーザー入力項目(名前 / 写真 / 卒業年度 / 部活・サークル / 学部・学科)
  • 投稿機能
    • イベント作成・出欠管理機能
    • フォーラム( 掲示板 )

アイディア画像

機能の選定が完了したので次は機能を実装するためのモジュールを探しましょう。

SNS に必要な機能を実装するためのモジュールの決定

前のセクションで絞り込んだ機能ごとにモジュールを決めていきます。

以下のモジュールを使って実装します。

モジュール名機械名実装できる機能
ユーザー関連の機能
Field UIfield_uiユーザーやコンテンツ(ノード)の入力フィールドの管理画面を表示する
Optionsoptions卒業年度の入力に使用
ドロップダウン / ラジオボタン / チェックボタン
を使用することができる
Taxonomytaxonomy部活・サークル や 学部・学科の入力に使用
一般的にカテゴリ分けやブログのタグなどに使用される
投稿機能: イベント作成・出欠管理機能
Flagflagイベント参加/不参加のボタンに使用
サイト上のお気に入りやブックマークなどの機能でよく使われるモジュール
Flag actionsflag_actionsイベント参加/不参加の切り替えとボタンクリック時に送信されるメールの設定を行う。
Datedateイベントの日付を設定する日付フィールドを作成するために使用
Date Popupdate_popupDate で用意したフィールドのウィジェットに pop up 形式で表示されるカレンダーから日付を入力することができるウィジェットを追加
Viewsviews参加者/不参加者一覧を確認するために使用
コンテンツを一覧表示するためによく利用される
Views UIviews_ui管理画面から Views の設定を行うためのモジュール
BlockblockViews で作成する参加者/不参加者一覧はブロックとして生成するので必要
(Drupal コアのモジュール)
Date APIdate_apiDate モジュールに必要
Display SuitedsViews で作成した参加者/不参加者一覧ブロックを横ならびに表示するために使用
通称 DS
Display Suite UIds_ui管理画面から DS の設定を行うためのモジュール
投稿機能: フォーラム
Forumforumフォーラム機能が使用できる
  • ※ その他 Field, Field SQL storag, Node, Text, User などのモジュールが必要ですが、 これらのモジュールは Drupal の中核となる System モジュールで必須のモジュール群ですので一覧からははずしています。
  • ※ また、リストには入っていませんが日本語化のために Locale, Localization update(l10_update) がインストールされています。

ひとまずこれで準備が整いましたね。 以上、同窓用SNSサイトの構築の準備編でした。

次の記事では機能開発を行います(/・ω・)/

コメントを追加

プレーンテキスト

  • HTMLタグは利用できません。
  • 行と段落は自動的に折り返されます。
  • ウェブページのアドレスとメールアドレスは自動的にリンクに変換されます。

Drupal 7 Views 小ネタ集 Part 1

アイキャッチ画像 Umi->d

この記事は Drupal Advent Calendar 2015 15日目の記事です。

こんにちは。プログラマーの山中です。

今回は Views 関連の小さなネタを集めた記事となっております。

Drupal を使い始めたばかりの方対象としておりますので、Drupal の Views をある程度使用した経験のある方にとってはご存知の知識ばかりかもしれませんが、よろしければお付き合いいただけますと幸いです。

環境・前提条件

この記事では以下のような環境で構築した Drupal を使用しています。

  • Mac OSX Yosemite + Apache 2.4 + MySQL

また、以下のような前提条件で進めています。

  • この記事での 「ビュー」 は 「 Views で出力されたコンテンツ 」を指します。
  • Views モジュールを表記する際には英語の「 Views 」を使用します。
  • Drupal を通常インストールした状態です 。
  • l10n_update モジュールで日本語化済みです。
  • あらかじめ article のコンテンツタイプのコンテンツを数十件ほど投稿しています。
  • 特記がない限り ビューは ページ , コンテンツタイプ: article , 表示件数: 20件 , その他デフォルトの状態 の設定で作成したビューを使用しています。
  • ブラウザは Google Chrome 使用しています。

さて、早速1つめのネタから紹介していきましょう。

1. フォーマット: テーブル

Views には初期状態で計 5つ のフォーマットが用意されています。 (リスト、グリッド、ジャンプメニュー、テーブル、フォーマットされていないリスト( <div> を中心としたフォーマット ) )

その中でも テーブル は環境設定で設定できる項目が多いうえ、 CSSでスタイル調整しなくてもある程度見栄えが良いなど優秀なフォーマットです。 (CSSでのスタイル調整が前提のビューの場合は フォーマットされていないリスト が便利です。)

環境設定の中でも特に私が便利だと思う3つの設定項目を紹介しましょう。

  1. ビュー上でクリックで並び替えできる
  2. コンテンツが一切ない列は隠すことができる
  3. 縦に長いテーブルのヘッダーを固定して表示することができる「 Sticky.js 」 が使える

表示項目が 投稿日, タイトル, 画像, タグ, 編集リンク のビューのテーブルの環境設定で以下のような設定を行います。

  • 投稿日フィールド
    • 並び替え可能: チェックを入れる
    • デフォルトの並び順: Ascending(昇順)
    • デフォルトの並び順: チェックを入れる
  • タイトルフィールド
    • 並び替え可能: チェックを入れる
  • タグフィールド
    • 空の列を隠す: チェックを入れる
  • Drupalスタイルの「固定」テーブルヘッダーを有効化 (Javascript): チェックを入れる

フォーマット:テーブルの環境設定

「適用」ボタンをクリックしてビューの保存ボタンを押して、ビューを実際に見てみると以下のスクリーンショットのようなビューが表示されるはずです。 並び替えや sticky.js の動作は実際に設定して確認してみてください。

フォーマット:テーブルのビュー

2. ビューのSQL文を出力

View 全体の環境設定ページで設定を行うとビューの編集ページのプレビュー画面で SQL クエリを表示することができます。SQL の勉強にもってこいです!

設定方法についてはまず以下のページに移動します。

ホーム » 管理 » サイト構築 » ビュー » 環境設定
パス: admin/structure/views/settings

ライブプレビューの設定 のセクションの SQLクエリーを表示 にチェックを入れて保存します。設定はこれだけ。

Views でSQL文を表示する設定

あとは作成済のビューの編集ページに移動して、下の方にある「プレビューの更新」ボタンをクリックするとSQLクエリが表示されます。 以下のスクリーンショットでは 1.フォーマット: テーブル の設定のビューのSQL文を表示しています。

SQLを表示

3. ビューのインポート/エクスポート機能

開発時のサーバと本番サイト用のサーバが切り分けられていることってよくあることですよね。 開発サーバで作成したビューを本番サイトに反映するとき、もう一度同じビューの設定をマウスで行うのは面倒です。 そこでビューのエクスポート機能とインポート機能を使用すると便利ですよ! ではエクスポートから紹介していきます。

エクスポート

エクスポート画面へは ① 管理画面のビューの一覧ページ (パス: admin/structure/views)か、 ② ビューの編集画面 から移動することができます。

① 管理画面のビューの一覧ページ ② ビューの編集画面

エクスポート画面にはPHPのコードがテキストフィールドに表示されますが、 インポートに使用したい場合は何も考えずにそのままテキストエリア内をコピーすればOKです。

エクスポート

インポート

インポート画面は管理画面のビューの一覧ページの上部にリンクがあるのでそこから移動します。

エクスポート

ビューのコードを貼り付けてください のテキストエリアにエクスポート画面からコピーしたコードを貼り付けます。

新しくビューを作成する場合はこのまま「インポート」ボタンをクリックすれば良いのですが、 既存のビューを上書きしたい場合は必ず 「 Replace an existing view if one exists with the same name 」の項目にチェックを入れて から「インポート」ボタンをクリックしてください。

インポート

するとビューの編集画面に移動しますので、一通り設定を確認して問題がなければ「保存」ボタンをクリックしてインポートは完了です。 既存のビューを上書きすることができるというのは良い点なのですが、「保存」ボタンを押してしまうともとのビューには戻せませんのでご注意ください。

最後に

小ネタ集と言っておきながら思いの外記事が長くなってしまったので3つまでしか紹介できませんでした。 まだまだネタはありますのでこれからも継続してご紹介していければと思います。

コメントを追加

プレーンテキスト

  • HTMLタグは利用できません。
  • 行と段落は自動的に折り返されます。
  • ウェブページのアドレスとメールアドレスは自動的にリンクに変換されます。

Drupal と Google Maps で作るかんたん地図アプリ

本日は「 Drupal と Google Maps で作るかんたん地図アプリ」と題しまして、 Drupal (ドルーパル)を使ってちょっとした地図アプリを作る方法をご紹介してみたいと思います。

Drupal に馴染みのない方には Drupal を使えば安定した地図アプリがスムーズに作れることを実感していただけるかと思いますし、 Drupal 開発をはじめて間もないという方には定番モジュール Views を使った一覧マップの作り方の参考にしていただけるかと思います。

Drupal の大きな特徴のひとつは、いわゆる「 DRY の原則」「車輪の再開発の防止」の風土がコミュニティ全体で守られていることです。 「地図情報を扱いたい」「 Google Maps 上で一覧表示したい」というようなよくある要件については、コーディングを行わずに実現できてしまうことが少なくありません。

Drupal は一般には「 CMS 」(コンテンツマネジメントシステム)というグループに分類されますが、 Web アプリケーションフレームワーク的な機能を豊富に備えています。 海外では「 CMF 」(コンテンツマネジメントフレームワーク)と呼ばれることもあり、かなり独自のポジショニングをしているソフトウェアです。

想定読者

今回は Drupal の利用を検討中の Web 担当者の方、コーディングなしで地図アプリを作ってみたいという方を対象にしています。

今回作るもの

今回の成果物を先にあげておきたいと思います。 次の画像で表されるイメージのような機能を作ります。

Drupal と Google Maps で地図アプリを作る方法 08

必要なもの

今回は以下の環境が整っている前提で始めていきます。

Drupal の動かし方などがあまりよくわからないぞという方には以下のカテゴリの記事などがご参考になるかと思います。

作り方

では実際に作っていきたいと思います。 大まかなステップは次のとおりとなります。

  1. Drupal サイトをセットアップ
  2. 必要なモジュールをインストール
  3. 地図情報を持つコンテンツタイプを作成
  4. 詳細ページの表示方法を設定
  5. 一覧ページを作成

以下順に見ていきましょう。

1. Drupal サイトをセットアップ

いわずもがなですが、まずは Drupal をセットアップします。 XAMP/MAMP や VirtualBox を使うのがかんたんかもしれません。 このあたりの作業にあまり馴染みのない方は以下の記事などをご参考にしてみてください。

2. 必要なモジュールをインストール

これから作成する地図アプリに必要なモジュールをインストールします。 Drupal の地理情報/地図情報を扱うモジュールは数多くありますが、今回は比較的かんたんに利用できる以下のモジュールを使うことにしましょう。

「依存するモジュールがないよ!」と怒られる場合はそれらもあわせてインストールしてください。 Views などの定番モジュールがあわせて必要になるかと思います。 このあたりは Drush を使うととてもスムーズです。

すべてインストールが完了したら次のステップへと進みましょう。

3. 地図情報を持つコンテンツタイプを作成

まずはモデルとなる地図情報を持つコンテンツタイプを作成しましょう。 Drupal の管理画面から「構造 -> コンテンツタイプ」へと進み、コンテンツタイプを新規作成します。

Drupal と Google Maps で地図アプリを作る方法 01

コンテンツタイプ新規作成ページのパスはこちらです。

  • /admin/structure/types/add

今回は「 Shop 」という名前のコンテンツタイプにします。

Drupal と Google Maps で地図アプリを作る方法 02

デフォルトのタイトルとボディに追加する形で 2 つのフィールドを追加しましょう。

  1. 住所
  2. 緯度経度

Drupal と Google Maps で地図アプリを作る方法 03

住所: 利用者が住所を入力する場所になります。フィールドタイプに「 Text 」を選んでください。その後の設定はデフォルトのままで保存しましょう。「 Text processing 」は「 Plain text 」にしておきましょう。

緯度経度: 住所フィールドの内容から緯度経度を自動計算して格納する場所です。ユーザーには見せずに裏側で格納するためのものとなります。こちらはフィールドタイプに「 Geolocation 」を選んでください。さらにウィジェットタイプは「 Geocode from another field 」を選んで、その後の設定は「 Geocode from field 」には上で作成した「住所」を、「 Geocoder 」には「 Google Geocoder 」を入れてください。

Drupal と Google Maps で地図アプリを作る方法 04

以上でコンテンツタイプの作成はひとまず完了です。 これで CRUD に必要なモデルと画面ができました。

続いて個別ページの表示方法をカスタマイズしましょう。

4. 詳細ページの表示方法を設定

管理画面の詳細ページの表示方法の設定ページを開きます。 上で「 Shop 」という名前のコンテンツにした場合、このページのパスは次のとおりになるはずです。

  • /admin/structure/types/manage/shop/display

こちらの画面で先ほど作成した 2 つのフィールドの設定を行います。

  1. 住所
  2. 緯度経度

住所: フォーマットを「 Google Map from one-line address 」に変更します。こちらの設定により住所情報が Google Maps 上のピンで表示されるようになります。今回は割愛しますが、詳細の設定もできますのでお好みに応じて右側のナットアイコンをクリックして設定を行ってください。

緯度経度: フォーマットを「非表示」に変更します。

詳細は次の画像のイメージを参考にしてください。

Drupal と Google Maps で地図アプリを作る方法 05

これでおおよその設定ができました。 ここまで来たらひとつサンプルコンテンツを作成してみましょう。

私はスタジオ・ウミを登録してみました。 以下のようなページが表示されるようになればここでの設定は完了です。

Drupal と Google Maps で地図アプリを作る方法 06

ここまで来たら一応地図連携のアプリはできますが、最後の仕上げに一覧ページも作成してみましょう。

5. 一覧ページを作成

今回一覧の地図を作るには Drupal の定番モジュールである Views とその拡張モジュールを使います。 拡張モジュールについてはステップ 2 でインストール済なのでそのまま進めていきましょう。

同じ管理画面より Views の view 作成画面を開きます。 view 作成画面は Views 本体だけでなく Views UI というサブモジュールを有効にする必要があります。 モジュールの管理ページから Views UI を有効化してください。

  • /admin/modules

無事有効化できたら view の作成画面を開きます。 パスは次のとおりです。

  • /admin/structure/views/add

こちらの画面で以下のとおりに入力して保存してください。

  • View name: shop list
  • Show Content of type Shop sorted by Newest first
  • Create a page: チェックオン
  • Path: http://ドメイン/shop
  • display format: Map (Google API, via IPGV&M)

Drupal と Google Maps で地図アプリを作る方法 07

その他の部分はデフォルトあるいは自動入力される内容のままで OK です。 いったん保存したら編集画面を開きましょう。

FIELD の部分に以下の 3 つを追加してください。

  • 緯度経度フィールド: lat: 緯度
  • 緯度経度フィールド: lon: 経度
  • 住所フィールド: 住所

画面上で実際に選択する際には上の名前そのままで出てくるわけではないため、適宜読み替えていただければと思います。

つづいて FORMAT のところで「 Map (Google API, via IPGV&M) 」が正しくセットされていることを確認したらその横の「 Settings 」をクリックして以下のとおりに設定しましょう。

  • Name of latitude field in Views query: Content: 緯度経度
  • Name of longitude field in Views query: Content: 緯度経度

ここには同名の「緯度経度」というものが 2 つあり少し紛らわしいのですが、上の「 lat 」「 lon 」の区別があるため FORMAT 上の並びを参考にどちらか正しそうなものを選択する必要があります。 上の順序で FORMAT を並べている場合は「緯度」が上に来るようになっているので「 lat 」の方には 2 つある上の方を、「 lon 」は下の方を選択しましょう。

ここまでひととおり完了したら「 Save 」をクリックして view を保存します。

設定が問題なく行えている場合は、コンテンツを追加したら自動的に地図上での一覧が生成されるはずです。 サンプルを実際に追加して動作確認してみましょう。

パスは上の「 Path 」のところで設定したとおり /shop になるはずです。

私の環境では次のような一覧が表示されるようになりました。

Drupal と Google Maps で地図アプリを作る方法 08

さらに設定や調整を少し加えれば、次のようなページにすることができます。

Drupal と Google Maps で地図アプリを作る方法 09

Drupal と Google Maps で地図アプリを作る方法 10

以上です。 いかがだったでしょうか?

今回は Drupal と Google Maps で地図アプリを作る方法についてご紹介しました。 Drupal のコアといくつかのコントリビュートモジュールを使うことで、コーディングを行わず管理画面での設定だけで地図情報を扱うモデルの CRUD 一式の機能と詳細画面、一覧画面を作ることができました。

実際の開発では他にも気にすべきことがたくさんありますが、地図アプリの核となる部分はこのような感じで比較的かんたんに作成できるということが感じ取っていただけたのではないかと思います。

コメントを追加

プレーンテキスト

  • HTMLタグは利用できません。
  • 行と段落は自動的に折り返されます。
  • ウェブページのアドレスとメールアドレスは自動的にリンクに変換されます。

Drupal 7 開発者が Drupal 8 で便利になったなと感じた 7 つのこと

こんにちは、先日 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 の正式版がリリースされると思いますが今から待ち遠しいです!

コメントを追加

プレーンテキスト

  • HTMLタグは利用できません。
  • 行と段落は自動的に折り返されます。
  • ウェブページのアドレスとメールアドレスは自動的にリンクに変換されます。

【後編】CSSもJSも不要!DrupalのViewsで作るイメージギャラリーの作成方法

こんにちは。山中です。

今回は以前こちらに書かせていただいた「 Drupal の Views を使ったイメージギャラリーの作成チュートリアル」の後半をお届けしたいと思います。

今回の作業を進める上での前提となる環境やモジュールについては前編に記述しております。 前編をまだご覧になっていない場合はまずはそちらからご覧ください。

イメージギャラリーの作成 後編

この記事ではイメージギャラリー作成に必要な 4 つのステップのうち 3 と 4 の部分についてご説明します。

  1. イメージギャラリー用のコンテンツタイプを作成
  2. イメージギャラリーのコンテンツを作成
  3. 画像スタイルを作成
  4. 新しいViewsページを作成

ここでいう「画像スタイル」というものが何なのかといった説明は今回は割愛させていただきますが、そちらについてはまた別の記事でご説明していますのでよろしければご覧ください。

画像スタイルを作成

このステップではイメージギャラリーの一覧に表示される「サムネイル」画像のための画像スタイルを作成します。 Drupal がデフォルトで用意している Thumbnail (100x100) を使ってもよいのですが、このスタイルを使うと画像が無理やり 100x100 内のサイズに押し込められてしまい見栄えがイマイチとなってしまいます。 今回は見栄えを重視しサムネイル用の画像スタイルを新たに作成することにします。

以下のページにアクセスします。

管理 » 環境設定 » メディア
(パス: admin/config/media/image-styles)

スタイルの追加 」をクリックします。

画像スタイル

画像スタイルの名前を入力する画面が出てくるので、画像スタイルの 名前 と システム内部名称 を入力し、「 新しいスタイルを作成 」をクリックします。

画像スタイルの追加

つづいて画像スタイルのプレビュー・編集画面に移ったら効果(エフェクト)の項目を追加します。 今回は元画像がどのようなサイズの場合でも固定サイズの画像を作成することにしましょう。 拡縮とトリミング を選択し、「 追加 」をクリックします。

画像スタイルプレビュー

今回は画像のサイズは正方形で固定します。このあたりはお好みのサイズで作成しても良いでしょう。

この記事では Drupal コアの bartik テーマを使用する想定で、メインコンテンツに画像が横に 4 つきれいに並ぶように、サイズは 幅 150px 高さ 150px と設定しました。

画像スタイルはあとで変更することもできますのでひとまず適当に設定して Views で作成したページを実際に見て後で微調整するというかたちも良いかと思います。

入力が完了したら「 エフェクトの追加 」をクリックします。

画像スタイル 拡縮とトリミング エフェクトの編集

画像エフェクトは正常に適用されました 」とメッセージが表示されたら完了です。

画像スタイル

この記事では拡縮とトリミングのエフェクトのみ追加しましたが、お好みで他のエフェクトを加えるとよいでしょう。

画像スタイルの作成は以上です。次はいよいよViewsの設定を行います。

新しいViewsページを作成

以上で作成した画像スタイルを使ってイメージギャラリーを生成するViewsを作成します。

以下のページにアクセスします。

管理 » サイト構築 » ビュー
(パス: admin/structure/views)
※ 古い翻訳の場合、「ビュー」は「表示」と表示されている場合もあります。

ビューを追加 」をクリックします。

ビューを追加する

ここからViewsページ作成のための基本設定を行います。 イメージギャラリーの場合以下の項目の設定が必須となります。

  • 名前
  • システム内部名称
  • 表示 [ コンテンツ ] of type [ Image gallery ]
  • ページを作成する
    • パス

キャプチャでは以下のように設定しています。

  • ビューの名前: ギャラリー
  • システム内部名称: gallery
  • 表示 [ コンテンツ ] of type [ Image gallery ] 並び順 [ 新しい順 ]
  • ページを作成する: チェックオン
    • ページのタイトル: ギャラリー
    • パス: [ gallery ]
    • 表示形式: [ グリッド ] の [ フィールド ]
    • 表示件数: 20
    • ページャーを使用する: チェックオン

ページのタイトル、パス、表示件数はお好みで自由に設定するとよいでしょう。

基本設定が完了したら「 Continue & edit 」をクリックします。

ビューの基本設定

ビューの設定画面が開いたらビューのフィールドにギャラリー用の画像フィールドを追加します。

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

ビューの設定画面

コンテンツタイプを作成したときにつけた名前(この記事の場合は「ギャラリー画像」)で検索フィールドに入力するか、 フィルター で コンテンツ を選択することで表示されている項目をある程度絞りこむことができます。 キャプチャでは フィルター で コンテンツ を選択して絞り込んでいます。

ギャラリー用に作成した画像フィールドを探してチェックを入れ「 Apply(all displays) 」をクリックします。

ビューのフィールド追加時の検索画面

フィールドの設定画面が表示されたら、フォーマッターを Colorbox に変更します。 するとColorboxを使って表示する際の設定項目が自動的に表示されますので、以下の項目を設定してください。

  • フォーマッター: Colorbox
  • Content image style: 先ほどのセクションで作成した画像スタイルに変更
  • Gallery (image grouping): Per page gallery

ちなみに設定項目を簡単に説明しますと以下のようになります。

  • Content image style: ギャラリー一覧ページのサムネイルとなる部分の画像スタイルの設定
  • Colorbox image style: クリックして大きく出てくる部分の画像スタイルの設定
  • Gallery (image grouping): colorbox のグループ設定
    • Per post gallery: 投稿(ノード)ごとにグループ分け
    • Per page gallery: ギャラリーの1ページページごとにグループ分け
    • Per field in post gallery: 投稿(ノード)ごと、かつフィールドごとにグループ分け
    • Per field in page gallery: ギャラリーの1ページページごと、かつフィールドごとにグループ分け
    • カスタム: 自分の好きな文字列でグループ化できます。トークンは使えません。
    • No gallery: グループ化なし

その他必要であれば変更・設定し、「 Apply (all displays) 」をクリックします。

ビュー ギャラリー画像の追加

デフォルトで用意されていたタイトルは不要なので削除しましょう。

フィールドセクションの コンテンツ: タイトル(タイトル) をクリックし、表示されたタイトルフィールドの設定画面の「 削除 」をクリックしてタイトルフィールドを削除します。

タイトルは削除します

タイトルは削除します

以下のキャプチャ図のようにフィールドが コンテンツ: ギャラリー画像 だけになったら右上の「 保存 」をクリックします。

ビュー 設定画面 保存ボタンをクリックしてね

ビュー ギャラリー を保存しました。 とメッセージが出れば制作ステップが完了です。

ビューの基本設定

早速作成したギャラリーを確認してみましょう!

Views で作成したギャラリーページを確認する

私の環境では以下のようになりました。 一覧のサムネイル画像をクリックすると Colorbox モジュールによって大きく表示されるかと思います。

結果1

結果2

いかがだったでしょうか。 今回は2つの記事に渡ってDrupalのViewsとColorboxで作成するイメージギャラリーの作成方法をご紹介いたしました。

画像ばかりで思いのほか縦に長い記事となってしまいました。 ここまでお付き合いいただいたみなさま、ありがとうございました。

今回は CSS のコードは書きませんでしたが、テーマ内の CSS を編集すれば細かな部分を自分好みにカスタマイズすることも可能です。 ただし Drupal のコアテーマやコントリビュートテーマの編集は厳禁ですので、 CSS を書く場合はオリジナルのテーマを作成してその中でスタイル調整を行うようにしてくださいね。

スタイル調整を自分でゼロから行いたい場合はビューの基本設定の 表示形式(フォーマット) の部分を HTML listフォーマットされていないリスト に変えていただくとスタイル調整しやすいかと思います。 ぜひお試しください。

コメントを追加

プレーンテキスト

  • HTMLタグは利用できません。
  • 行と段落は自動的に折り返されます。
  • ウェブページのアドレスとメールアドレスは自動的にリンクに変換されます。

【前編】CSSもJSも不要!DrupalのViewsで作るイメージギャラリーの作成方法

こんにちは。プログラマーの山中です。

今回はコードを一切書かずに Views モジュールと Colorbox モジュールでイメージギャラリーを作成する方法を前後編に分けてご紹介いたします。

今回の開発の前提条件

要件

  • サムネイル画像を一覧表示しクリックすると大きな画像がオーバーレイで表示されるイメージギャラリーページ
  • 管理者側は1ノードにつき1画像で投稿する形にする

完成イメージは以下のリンク先にあるようなギャラリーページです(いずれも弊社で過去にお作りしたものです)。

作業環境

  • Drupal の管理画面は日本語化が済んでいる

使用モジュール

今回利用する寄与モジュールは以下のとおりです。

パッケージ 名前 バージョン
Chaos tool suite Chaos tools (ctools) 7.x-1.7
Other Colorbox (colorbox) 7.x-2.8
Other Libraries (libraries) 7.x-2.2
Views Views (views) 7.x-3.11
Views Views UI (views_ui / Views 内包) 7.x-3.11

いずれもダウンロードし有効化された状態からスタートします。

使用ライブラリ

以下のパス構造となるように、 jquery.colorbox-min.js ファイルをダウンロードして設置してください。

sites/all/libraries/colorbox/jquery.colorbox-min.js

Colorbox モジュールが有効化されていて Drush コマンドが使える環境であれば以下のコマンドでダウンロードすることができます。

$ drush colorbox-plugin

Colorboxモジュールを有効化した後に上記コマンドを入力しても「そのコマンドが見つからなかった」というようなエラーメッセージが出力される場合は事前に drush cc drush コマンドを実行するとよいでしょう。

$ drush cc drush
$ drush colorbox-plugin

正しく設置すると次の図のような構成になります。

Colorboxライブラリのディレクトリ

ここまでの環境が整ったら作成を開始していきましょう!

イメージギャラリーの作成

おおまかな手順は以下の4ステップとなります。

  1. イメージギャラリー用のコンテンツタイプを作成
  2. イメージギャラリーのコンテンツを作成
  3. 画像スタイルを作成
  4. 新しいViewsページを作成

今回は 1 と 2 について解説していきます。 3 と 4 については後編でご説明いたします。

イメージギャラリー専用のコンテンツタイプを作成する

まずは以下のページにアクセスします。

管理 » サイト構築 » コンテンツタイプ
(パス: admin/structure/types)

名前を「 image gallery 」などと適当に入力して「 保存しフィールドを追加 」をクリックします。 名前とシステム内部名称が入力されていればOKです(システム内部名称は名前の入力と同時に自動で入力され、自分で編集することも可能です)。

今回は以下のように設定しました。

  • 名前: image gallery
  • システム内部名称: image_gallery
  • 説明: (なし)
  • 掲載オプション
    • 掲載: チェックオン
    • フロントページへ掲載: チェックオフ
  • 表示設定
    • 作成者と日付情報を表示。 : チェックオフ
  • コメントの設定
    • 新しいコンテンツ作成時のデフォルトのコメント設定: 非表示

コンテンツタイプの作成画面

つづいて画像のためのフィールドを作成します。

フィールドタイプ で「画像」を選択しましょう。 その他の項目は適当に設定してください。

今回は以下のように設定しました。

  • ラベル: ギャラリー画像
  • システム内部名称: gallery
  • フィールドタイプ: 画像
  • ウィジェット: 画像 (フィールドタイプを設定すると自動的に選択されます)

設定ができたら「 保存 」をクリックします。

コンテンツタイプのフィールド管理画面

フィールドの設定という画面が出てきたら「 フィールド設定を保存 」をクリックします。

フィールドの設定画面

つづいて開くフィールドの編集のための画面では「 要求されるフィールド 」にチェックを入れてください。その他の部分は適当に設定してください。

今回は以下のように設定しました。

  • 要求されるフィールド: チェックオン
  • ファイルディレクトリー: gallery

設定ができたら「 設定の保存 」をクリックします。

フィールドの編集画面

ギャラリー画像 設定を保存しました。」 とメッセージが表示されたら完了です。

フィールドが保存されたメッセージ

Body フィールドは削除してもしなくてもどちらでもかまいませんが、そのままだと実際にギャラリー画像を投稿する際に少し邪魔になるのでついでなのでここで削除してしまいましょう。

削除 」をクリックします。

フィールドの削除

「 フィールド Body は、コンテンツタイプ Image gallery から削除されました。 」とメッセージが表示されたら完了です。

フィールドを削除した際のメッセージ

コンテンツタイプの作成は以上です。つづいて、作成したコンテンツタイプの実際のコンテンツを作成していきます。

イメージギャラリーのコンテンツを作成

以下のページにアクセスします。

コンテンツ » コンテンツの追加 » Image galleryの作成
(パス: node/add/image-gallery)
※ add/ より後のパスはコンテンツタイプ作成時に入力した システム内部名称 となります。

「タイトル」を適当に入力し「ギャラリー画像」のところにイメージギャラリーに追加したい画像をアップロードします。 このとき「掲載オプション」の「掲載」にチェックが入っていることを確認してください。

画像のアップロードが完了したら「保存」をクリックします。

コンテンツの追加

Image gallery *** が作成されました。 というメッセージが表示されたらコンテンツの追加は完了です。

コンテンツ追加時のメッセージ

ここで追加したコンテンツがイメージギャラリーのひとつの画像となりますので、異なる画像を使っていくつかのコンテンツを作成してみてください。後ほどギャラリーページになったとき、画像がある程度あった方が見栄えがよくなります。

ここまででイメージギャラリーに使用するデータの準備が整いました。

つづいて、ギャラリーに表示する画像のフォーマットを決めるための「画像スタイルの作成」と実際のギャラリーページを作るための「新しい Views ページの作成」を行えばギャラリーページが完成します。 この後のステップについては後編でご紹介いたします。

コメントを追加

プレーンテキスト

  • HTMLタグは利用できません。
  • 行と段落は自動的に折り返されます。
  • ウェブページのアドレスとメールアドレスは自動的にリンクに変換されます。

コンテンツの一覧ページをお手軽に作成できる Views モジュール

アイキャッチ画像 Umi->d

今回は Drupal (ドルーパル)の「 Views 」というモジュールをご紹介できればと思います。

Views 公式ページ キャプチャ

以下本記事の目次です。

  • Views モジュールとは
  • Views モジュールでできること
  • Views モジュールの使い方
  • 終わりに

Views モジュールとは

Views モジュールとは、「 コンテンツの一覧ページをお手軽に作成できる機能 」を提供するモジュールです。 Views は Drupal 7 の数あるコントリビュートモジュールの中で最もよく使われている Drupal の一番人気のモジュール です( Drupal 8 ではコアに取り込まれました)。 これひとつでホームページ制作のバックエンド、開発プラットフォームとして Drupal を選ぶ理由になる「 Drupal の目玉機能」とも言える非常に強力なモジュールです。

開発者の方向けにことばを変えていうと「 SQL を管理画面でかんたんに作成できるモジュール 」というようなイメージでしょうか。 どのテーブルからどのような条件でどのカラムを抜き出すのか。どのテーブルとどのテーブルをくっつけるのか。 制限はありますが、かんたんにいうとそういったことが管理画面上でできてしまう驚異のモジュール、それが Drupal の Views です。

「コンテンツの一覧の作成」と聞くと一見ピンと来ませんが、 「コンテンツの一覧の作成」というのは Web の世界のあらゆる場所(さらにいうならシステムの世界のあらゆる場所)で使われている非常に定番の機能 です。 たとえばブログサイトの場合、トップページに最近の記事一覧があり、アーカイブページを見ると投稿月やラベルで絞り込んだ記事一覧が表示される場合が多いかと思います。 ブログのサイドバー上に使用されているタグの一覧が表示されることもあるでしょうか。 もう少し大きな「店舗サイト」の場合なんかだと、トップページの上部にはメッセージをひと目で伝えるスライドショーがあり、下の方には日付と見出しだけの小さなお知らせ一覧が表示されているのをご覧になることが多いかと思います。 他店舗展開をしているようなお店の場合は、お店の詳細ページとあわせて一覧ページが用意されていることも多いでしょう。 SNS サイトでは自分がフォローしているユーザの一覧ページが用意されていることがよくあります。

ここにあげた「記事一覧」「ラベルの一覧」「スライドショー」「お知らせ一覧」「お店の一覧」「ユーザの一覧」、これらはすべて「コンテンツの一覧」ということができます。

コンテンツの一覧を生成する、表示するというのはホームページ上でよく行われる定番の処理なので、「どうせなら管理画面からできるようにしてしまおう!」というのが Views のはじまりにあった考え方のようです。

余談ですが、このあたりのアイデアは多くのプログラマが一度は思いつくところかと思いますが、その実現に必要な仕事のことを考えるとなかなか実際に「作ってみよう!」とはならないのがふつうです。 そういう事を平然とやってのけるスーパープログラマにシビれたり憧れたりできるのが、質の高いコントリビュートモジュールの豊富な Drupal 開発のいいところのひとつです。

Views モジュールでできること

Views モジュールは上でご説明したとおり基本的には「コンテンツの一覧」を作成するためのモジュールです。 コンテンツというのは単にページのことだけを指すのではなく、ユーザやノード(コンテンツ)、コメント、タグなど Drupal 内のほぼあらゆるタイプのアイテムのことを指します。

具体的な例としては、弊社のこのサイトのブログ一覧、 Drupal 記事一覧、関連記事一覧などは Views で生成されています。

Drupal Views サンプル 1

Drupal Views サンプル 2

さらに拡張モジュールを使ったりすると、応用として テーブル形式での表示ページャ、フィルタ、ソート、検索、ドラッグ&ドロップでの並べ替え機能 なども実現することができます。さらにさらに、画像を持っているコンテンツの場合は スライドショー 、地理情報を持っているコンテンツの場合は Google マップ上での場所の表示 、日時情報を持っているデータの場合は カレンダー上での表示 などもできたりします。

これらを実際に応用すると、次のようなことが(場合によってはノンプログラミングに!)実現可能となります。

  • コーポレートサイト: フロントページのスライドショー
  • 店舗や医院のサイト: お店の予定表(予約表)
  • 店舗や不動産取り扱い店のサイト: お店や物件の地図表示
  • あらゆる企業: CRM 風のお客様検索/管理

Views ひとつでこんなことができると聞くと一見冗談のようにも思えますが、本当に実現可能です。 私も Views の強力な機能をはじめて知ったときはとても驚いて「世の中にこんなもの作った人たちがいるんだ・・・しかもオープンソースで」と呆れたのを覚えています。

ただし、他のソフトと同じで Views も機能が豊富な分それを使いこなすのにはそれ相応の学習コストがかかります。 「ホームページ構築ははじめて」という方が「 Drupal の Views だったらいろんなことがノンプログラミングにできるらしい」というお話を聞いていきなり Views に取りかかるととても苦労するかと思いますので、そのあたりはぜひご注意ください。 英語圏では Views の説明だけで 1 冊の本になっているぐらいですので、プログラミングよりは敷居が低いとはいえ、それなりに奥の深く難しいものです。 Views に取り組むとしても、まずは Drupal のことをきちんと勉強して、 Drupal のさまざまなコンセプトや使い方に慣れ親しんだ後に Views に取りかかる、というのがおすすめです。

Views モジュールの使い方

Views の使い方はほかのところでもよく紹介されていますが、ここでは最初の一歩、 Views モジュールのインストールの方法だけご紹介しておきたいと思います。 Views の使い方についてはまた機会を見て別の記事でご紹介します。

インストール

Views モジュールのインストールには、他のモジュールと同様いくつかの方法があります。 あまり Drupal に慣れていない方がやる場合はファイルをダウンロードして配置する、という方法がわかりやすいかと思いますのでその方法をご紹介したいと思います。

  1. Drupal をセットアップ
  2. Views のファイル一式をダウンロード
  3. Views のファイル一式を所定の場所に設置
  4. Drupal 管理画面から Views を有効化
  5. 新しい View を作成

1. Drupal をセットアップ

Views は Drupal がないと動かないのでまずは Drupal をセットアップしましょう。

2. Views のファイル一式をダウンロード

Views のページ から Views のファイル一式をダウンロードします。 Drupal は異なるメジャーバージョン間での互換性は基本的にないので、 Drupal のバージョンにあったファイルをダウンロードしましょう。

.tar.gz 形式と .zip 形式がありますが、どちらを使っても展開(解凍)する中身は同じです。

3. Views のファイル一式を所定の場所に設置

Views のファイル一式をダウンロードしたら、それらを所定の位置に設置します。 Drupal 7 の場合は (Drupal のルートディレクトリ)/sites/all/modules という場所に上記のファイルを展開したら出てくる views というディレクトリをまるごと置きます。

4. Drupal 管理画面から Views を有効化

ステップ 3 まで進めたら、 Drupal が自動的に Views モジュールを認識してくれるようになります。 認識してくれるようになったら、あとは使うために必要なのはそれを「有効化」するということです。

ブラウザを立ち上げ、 Drupal の管理画面に管理者としてログインし /admin/modules というパスにアクセスしましょう。 こちらはたとえば Drupal サイトが https://www.example.com に入っている場合は https://www.example.com/admin/modules という URL に相当します。

ここにモジュール一覧が表示されるので、その中から「 Views 」「 Views UI 」という行を探し出し、両方とも有効化させましょう。

5. 新しい View を作成

ステップ 4 まで進んだら Views の導入は完了!です。 あとは Views を使って好きなように一覧を作成してみましょう(ちなみに Views で作成する一覧のことを「 view 」と呼びます)。

Views 実践編として次のような記事もございますので、興味のある方はご参考になさってみてください。

終わりに

以上です。いかがだったでしょうか?

今回は Drupal の目玉機能ともいえる 代表的モジュール Views をご紹介しました。 Views には多くの拡張モジュールがあり、それらを使うと思いもしなかったものが管理画面からの設定だけで作成できたりもします。

学習コストは低くはありませんが、 Drupal と長く付き合っていくのであればある程度使えるようになっておくのがよいかと思います。 View についてはひとつの記事だけでは伝えきれないものがたくさんあるので、またときをおいて Views ネタをいろいろご紹介していきます。

コメントを追加

プレーンテキスト

  • HTMLタグは利用できません。
  • 行と段落は自動的に折り返されます。
  • ウェブページのアドレスとメールアドレスは自動的にリンクに変換されます。

Drupal 7 の定番人気モジュールトップ 20

アイキャッチ画像 Umi->d

本日は「 Drupal 7 の定番人気モジュールトップ 20」と題しまして、 Drupal 7 (ドルーパル7)で世界的に最もよく使われている定番モジュールのご紹介ができればと思います。

Drupal モジュール プロジェクトページ

はじめに

本題に入る前に、イメージしている読者層と Drupal の基本的な概念を押さえておきたいと思います。

対象読者

本記事の対象読者は「 Drupal の利用をはじめて間もない方」です。 現役の Drupal のテーマ作成者や開発者の方にはすでに知っている情報がほとんどになってしまうかと思います。

Drupal の 2 つの概念ーー「テーマ」と「モジュール」

Drupal は豊富な基本機能を備えた CMS ですが、ビジネス目的で使う場合には何らかの「拡張」を行って使うスタイルが基本です。

Drupal で「拡張」というときに、方法は大きく 2 つあります。 ひとつが「テーマ」( theme )、もうひとつが「モジュール」( module )と呼ばれるものです。 テーマというのは、サイトのデザイン面、見た目の部分を扱うもので、主に HTML のテンプレート、 CSS 、ロゴやファビコンなどを切り替えるのに使うものです。 モジュールというのは、サイトの機能面、動作の部分を扱うもので、 Drupal に新たな機能を追加したり特定の処理をはさみこんだりするために使います。

テーマもモジュールも、大きく次の 3 つに分類することができます。

  1. コア
  2. コントリビュート
  3. カスタム

1 のコアというのは Drupal 本体に同梱される形で配布されている標準添付のもの、 2 のコントリビュートは世界の Drupal コミュニティによって開発され無償で配布されているものです。 3 のカスタムというのは各制作会社 / 開発会社が独自に作るもののことです。 ちなみに 2 番目のコントリビュートモジュールは寄与モジュールと呼ばれたりもします。

このあたりの説明はカスタムモジュール作成入門のページにも書いていますので興味のある方はそちらもご覧になってみてください。

・・・ではここからが本題です。

Drupal の定番の人気モジュールについて

ということでモジュールは「コア」「コントリビュート」「カスタム」の 3 タイプに分けられるのですが、「人気」というときに対象となるのは 2 つめの「コントリビュートモジュール」です。 コアモジュールは選ぶ選ばないにかかわらず Drupal のコアに同梱されてきますし、カスタムモジュールの方は一般に配布されるものではありません。 ですので、人気をはかる際に対象となるのは自然コントリビュートモジュールだけとなります。

本当にトップの人気コントリビュートモジュールとなると世界中のサイトで数万、数十万サイトという単位で広く使われています。

定番人気モジュールのチェック方法

Drupal の定番人気のモジュールがどれなのかというのは実は Drupal.org の Module project というページを見れば誰でも確認することができます。

対応している Drupal のバージョンやモジュールのカテゴリーによって絞り込みを行うこともできますので、ここをチェックするだけで、どういうモジュールがあるのか、どういうモジュールが人気を得ているのか、どういうモジュールが最近リリースされたのかといった情報をチェックすることができます。

たとえば、最もたくさんインストールされている Drupal 7 対応のモジュール最近新たなリリースのあった Drupal 7 対応のモジュールといった切り口でチェックできますので興味のある方はぜひ実際のページをのぞいてみてください。

定番人気モジュールトップ 20

ここからは、 Drupal の定番人気となっているモジュールを上から順に 20 個ご紹介できればと思います。

ご紹介するのは、記事執筆時点( 2014 年 09 月)における「インストールされているサイトの数」が多い順から 20 個です。 見る時期が変わるとランキングも少し変わってくるかと思います。

全体的に長いので、ひとつひとつの説明は短めに、なるべくわかりやすく、ということを心がけてみました。 1 番目から順番にどうぞ。

1. Views

Views モジュールは端的に言うと「一覧ページ」「一覧パーツ」を作るためのモジュールです。

コンテンツやユーザー、タグなどを任意の基準で絞り込み、任意の順序で、任意の項目を表示する機能を備えたモジュールです。 たとえば、一般的な企業ホームページではトップに「お知らせ」や「ブログ」などが一覧で表示されたりしますが、 Views はそのようなパーツを管理画面からかんたんに作れる機能を提供します。

Views は長年 Drupal を代表するたいへん人気の高いモジュールで、 Drupal 8 ではコアモジュール化され Drupal 本体に同梱される形になります。

2. Chaos tool suite (ctools)

Chaos tool suite 通称 ctools モジュールは多くの便利機能をパッケージとして詰め込んだモジュールです。 開発者向けの数多くの API を提供してくれます。

ctools 単体で何かをするということはありませんが、数多くのモジュールが ctools を利用しているため結果として数多くのサイトでインストールされているモジュールです。

3. Token

Token モジュールは他のテキストに変換されるキーワード群を提供するモジュールです。

キーワードにはさまざまなものがあり、たとえば、 %site-name でそのサイトのサイト名を、%user-name で対象となるユーザのユーザ ID をといった形でさまざまなテキストを利用することができます。 管理画面上からプログラミングにおける「変数」が使えるようなイメージです。

4. Pathauto

Pathauto モジュールは コンテンツやユーザの内容から URL (パス)を自動生成するためのモジュールです。

Drupal にはコンテンツ( Drupal 用語でいうと「ノード」)などの URL を自由に設定できる Path というコアモジュールがあります。 Pathauto はその名のとおり( Path + Auto ) Path による URL 設定を自動化してくれるというものです。 Token モジュールが提供するキーワード(トークン)を使うこともできます。

5. Libraries API

Libraries API モジュールは外部ライブラリを取り扱うための開発者向けモジュールです。

Ckeditor などの外部ツールを Drupal に取り込むのに便利な API を提供してくれます。 こちらもこのモジュール単体で何かに使うというよりは、他のモジュールで利用できる汎用機能を提供するためのモジュールです。

6. Administration menu

Administration menu モジュールはデフォルトとは異なる管理者用メニューを提供するモジュールです。

Drupal にはデフォルトの管理画面もありますが、こちらはそれとは構成や見た目の異なる半透明の管理者メニューを提供してくれます。

7. Entity API

Entity API モジュールはコンテンツやユーザーのデータのプログラム上での取り扱いをかんたんにしてくれる開発者向けモジュールです。

Drupal にはエンティティ( entity )という、一言では説明の難しい Drupal ならではのすばらしいコンセプトがあるのですが、このモジュールを使えばそのエンティティがよりかんたん・便利に扱えるようになります。 開発者向けなので、こちらも単体で使うというよりは他のモジュールから利用する汎用機能を提供するタイプのモジュールです。

8. Date

Date モジュールは日時データをコンテンツやユーザーにくっつけられる機能を提供するモジュールです。

正確にいうと「コンテンツやユーザーにくっつける」というところは Date モジュールの機能ではありませんが、最初はとにかく「日時データが扱いやすくなる」という認識で大きな問題はないのではないでしょうか。

9. Webform

Webform モジュールはオンラインフォームを管理画面から自由に作れるモジュールです。

Drupal には標準的な問い合わせフォームがコアに同梱されていますが、 Webform を使うと標準とは異なる凝った入力フォームなんかも素早く作成することができます。

Drupal は CMS でありながら、開発用のプラットフォーム、いわゆる「ウェブフレームワーク」としての色合いも強い独特なツールですが、この Webform のような機能なんかは他のウェブフレームワークではなかなか対抗の難しい目玉機能だと思います。

10. IMCE

IMCE モジュールは画像その他のファイルを Drupal サイト上で管理できる画面を提供するモジュールです。

ファイルブラウザのようなインタフェースで、画像のプレビューやリサイズなどのちょっとした処理、ファイルの一覧表示などの機能を提供してくれます。

ここからは 11 位から 20 位のモジュールです。 解説もひとことずつ手短にいきたいと思います。

11. Wysiwyg

Wysiwyg モジュールはいわゆる WYSIWYG (ウィジウィグ)ーー Word のように HTML テキストを編集できる機能を提供するモジュールです。

HTML がわからない方でも、スタイルや構造に工夫を加えたコンテンツをかんたんに投稿することができます。

12. Google Analytics

Google Analytics モジュールはその名のとおりGoogle Analytics を導入するためのモジュールです。

本来 Google Analytics を利用するときはページの HTML 内に script タグを貼り付ける必要がありますが、こちらのモジュールを使うと管理画面からかんたんに Analytics 用の設定を行うことができます。

13. jQuery Update

jQuery Update モジュールはjQuery の新しいバージョンを利用できるようにしてくれるモジュールです。

Drupal 7 のコアには jQuery の 1.4 が同梱されています。 もっと新しいバージョンの jQuery を使いたい場合にはこちらの jQuery Update を使うとかんたんに新しいバージョンの jQuery をし始めることができます。

14. CKEditor - WYSIWYG HTML editor

CKEditor モジュールはCKEditor という WYSIWYG ツールを Drupal で利用するためのモジュールです。

「 WYSIWYG 」(ウィジウィグ)の意味については 11 番目の Wysiwyg と同じです。 Wysiwyg が複数のエディタをサポートしているのに対し、こちらの CKEditor は CKEditor 専用となっています。

15. Link

Link モジュールはURL データをコンテンツやユーザーにくっつけられる機能を提供するモジュールです。

正確にいうと、 Date モジュールと同じく「くっつける」という部分は Link モジュールが担っているわけではありませんが、このモジュールを使えば「参考記事」や「関連ページ」などがコンテンツにくっつけられるというようなイメージです。

16. Backup and Migrate

Backup and Migrate はDrupal サイトのバックアップや環境間のデータ移行のためのモジュールです。

バックアップ先やスケジュールなどを細かく設定することができます。

17. Rules

Rules モジュールは「自動化」処理がかんたんに設定できるモジュールです。

「 Drupal 内で○○が起こったときに××という処理をする」といった条件と処理を管理画面から設定することができます。

18. Views Slideshow

Views Slideshow モジュールはコンテンツのスライドショーを手軽に作成できるモジュールです。

Views モジュールで一覧表示できるさまざまなもの(コンテンツやユーザ)に対してスライドショーを作成することができます。

19. CAPTCHA

CAPTCHA モジュールはボットによるスパムを防止するための CAPTCHA 機能をフォームに追加するためのモジュールです。

20. XML sitemap

XML sitemap モジュールはSEO に有効な XML 形式のサイトマップを生成するためのモジュールです。

おわりに

以上です。 いかがだったでしょうか?

Drupal 7 の人気モジュールのランキングを 1 位から 20 位までご紹介してみました。

最後は少し駆け足でしたが、 Drupal のコントリビュートモジュールとしてどのようなものが揃っているのかというのがおおづかみに把握していただけたのではないかと思います。 Drupal が CMS としてどういうサイトでよく使われているのかという部分もなんとなく把握できるのではないでしょうか。

コントリビュートモジュールだけでなく、自分で作るオリジナルの Drupal モジュールにも興味のある方はこちらに記事なんかもご覧になってみてください。

最後に少し宣伝を。 スタジオ・ウミでは Drupal 7 のカスタムモジュール開発のご依頼をお受けしています。 Drupal サイトに機能を追加したい、既存の機能を見直したい、とお考えの方はぜひお気軽にお問い合わせいただければと思います。

コメントを追加

プレーンテキスト

  • HTMLタグは利用できません。
  • 行と段落は自動的に折り返されます。
  • ウェブページのアドレスとメールアドレスは自動的にリンクに変換されます。

DrupalのViewsでたった10分で画像スライドショーを作成する方法

アイキャッチ画像 Umi->d

こんにちは。
今年の滋賀県は梅雨らしい雨があまり降っていないので稲の成長に不安を覚えているプログラマーの山中です。
出勤時に自分の家の田んぼの横を通り過ぎると、苗は青々と順調に育っているように見えるのですがやっぱり不安です。みずかがみ(滋賀県で推進しているお米です。近江米!)ちゃんと育ってくれるといいなあ・・・

さて、今回の記事ではViewsでスライドショーを作っていきます。
スタイルシートでの調整を除けば管理画面だけでできるのでjavascriptにはノータッチで作れます。
ということは覚えちゃえば誰でも簡単に作れちゃうってことです!

まずは必要なものから紹介していきますね。 英語が読める方はこちらのチュートリアルをどうぞー!

必須条件

この記事では以下のモジュールがインストールされ、ライブラリが導入済みであることを前提としています。

モジュール

ライブラリ

  • jquery.cycle 直接ダウンロードはこちらから
    ダウンロードしたファイルの名前がjquery.cycle.all.jsならjquery.cycle.all.min.jsに変更しておきます。

ライブラリの入れ方

  1. librariesフォルダがなければsites/allの中に作ります。
  2. librariesフォルダの中にjquery.cycleフォルダを作ります。
  3. jquery.cycle.all.min.jsをjquery.cycleフォルダに入れます。

ライブラリのパス構造と入れ方
↓jsのライブラリファイルまでのパスはこうなるはずっ。

sites/all/libraries/jquery.cycle/jquery.cycle.all.min.js

画像スライドショーを作成していく

さて!作っていきましょー!
ちなみに今回表示させる箇所はbartikテーマの「主な」リージョン(翻訳前の英語だと「Featured」)に配置します。
配置させるリージョンの画像
スライドショーの画像の幅をリージョンに合わせたいのでついでにここで幅を測っておきます。こんな時のChromeさんのインスペクターは超優秀ですね!幅は960pxでした。

専用のコンテンツタイプを作成する

この記事あたりを参考に作ってください。

作成したコンテンツタイプに画像フィールドを追加する

普通に設定して保存します。最大幅などは画像スタイルで指定したものを使いますのでここでは指定しません。
こちらも大体はこの記事にかかれていますので参考にしてください。

スライド用のノードコンテンツを作成する

記事やページを作成するのと同じようにコンテンツを追加します。Drupalの仕様上タイトルは絶対書かないといけないので(タイトルを無効にするモジュールもありますが・・・)、適当なタイトルの入力とスライド用画像の添付をしておきます。
画像は1ノードにつき1枚にしてください。

画像スタイルを設定する

「拡縮とトリミング」のエフェクトでさっき測った幅960x適当な高さ300を指定しておきます。画像スタイルについてはまた今度記事にさせていただきますね。
画像スタイルの設定

Viewsでビューを作成する(スライドショーブロックを作成する)

ビューの名前やらシステム内部名称などを入力し、ページを作成するのチェックをはずします。
代わりにCreate a blockにチェックを入れ、タイトルを好きにつけて表示形式をslideshowのフィールドにします。
ページ毎の表示件数は0にしておくとコンテンツタイプがslideshowのコンテンツが全部表示されます。ので、0に設定しておきます。
各項目が設定できたらContinue & editをクリックして次へ進みます!
Viewsのビューを作成

フィールドやフィルターの設定

画像コンテンツを追加します。
フィールドの右にある追加をクリックしまして、
フィールドの追加
スライドショー用に作った画像フィールドを選択します。
スライドショー用画像フィールドの追加
ラベルをはずして画像のスタイルにさっき作成した画像スタイルを設定します。ついでにわかりやすくするために管理画面用のタイトルを入力して保存。
スライドショー用画像フィールドの設定

コンテンツ:タイトルの部分は必要ないので削除しちゃいましょう。
タイトルを削除

ここまできたら右上の保存ボタンをクリックしてビュー全体を保存します。
シンプルな画像だけのスライドショーならこれだけで完成です。
早速「主な」リージョンに配置して確認しましょう☆

補足:スライドショーの動きを変える

ビュー全体の設定画面のフォーマットがSlideshowになっている横の環境設定をクリックします。
その中のCYCLE OPTIONSの効果の選択ボックスからスライドショーの動きを変更できます。
スライドショー!

スライドショーをリージョンに配置する

ホーム » 管理 » サイト構築 » ブロック でViewsで作成したスライドショーを配置して一番下にある保存ボタンをクリックします。
ブロックの設定
保存できたらトップページへ戻って確認しましょう!

どうでしょう、できてますか?私はこんな感じになりました!
スライドショー!
(画像はぱくたそさんから)

最後に動かない時のトラブルシューティングのヒントを置いておきます。

スライドショーが動かないときの対処法(ヒント)

  • キャッシュをクリアする
  • パスや名前は合っているか確認する
    sites/all/libraries/jquery.cycle/jquery.cycle.all.min.js
  • スライドショー用の画像(ノード)が1つ以上投稿されていることを確認する

コメントを追加

プレーンテキスト

  • HTMLタグは利用できません。
  • 行と段落は自動的に折り返されます。
  • ウェブページのアドレスとメールアドレスは自動的にリンクに変換されます。