アイキャッチ画像: デスクの上でパソコンを使用している

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

スタジオ・ウミでも実際にやってる新着情報機能の作り方をご紹介します。
前編の内容から続けて行いますので前編をご覧になっていない方はこちらへどうぞ。前編はこちら

さて、仕様部分に関しては前回のまま行くとしまして、早速Viewsモジュールを使って一覧ページ作成の作業をしていきます!いぇい!
ちなみに前回の記事からViews7.x-3.7から7.x-3.8へのセキュリティアップデートがありましたが新着情報の一覧を作成するのに変わっている箇所はないので特に問題はないです。

新着情報記事の一覧ページとブロックをViewsで作成する

ホーム » 管理 » サイト構築 » 表示 にアクセス!
パス > http://webサイトのアドレス/#overlay=admin/structure/views
> http://webサイトのアドレス/admin/structure/views

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

ビューを追加ページで以下の項目を設定します。

  • 最初のところ
    • ビューの名前 : 新着情報
    • システム内部名称 : news
  • 1個目のブロック
    • 表示 : コンテンツ
    • type : 新着情報
    • 並び順 : 新しい順
  • 2個目のブロック
    • ページを作成する : ✓ チェック
    • ページのタイトル : 新着情報記事一覧
    • パス : news
    • 表示形式 :
      • フォーマットされていないリスト
      • フィールド
    • 表示件数 : 10
    • ページャーを使用する : ✓ チェック
  • 3個目のブロック
    • Create a block : ✓ チェック (なんでここだけ英語なん・・・)
    • ブロックのタイトル : 新着情報記事一覧
    • 表示形式 :
      • フォーマットされていないリスト
      • フィールド
    • ページ毎の件数 : 5

ちなみにシステム内部名称はコンテンツ作成時のシステム内部名称と同じような感じで入力できるんですが、1個目のブロックのところで色々触ってたら消えちゃいました・・・これってバグですかね?
まあでも半角英数字と_のみを使ってちゃんとした名前をつけておいたら問題ないです。
全部設定できたら「Continue & Edit」をクリックします。

3カラムレイアウトの設定画面が出てきました。
主にさわっていくのは左と真ん中のカラムだけです。Viewsに詳しくなってきたら右側の「高度」ってでてるところも見ていくといいかと思います。でもこの辺使えなくても大体問題ないよ!
投稿日のフィールドが欲しいので左のカラムの「フィールド」って書いてある部分の右の「追加」をクリックします。
追加の右側をクリックするとまた別の設定メニューが出てくるので注意してくださいね。

フィールドの一覧が出てきたので投稿日フィールドを探し出します。いっぱいあるので上の検索を使ったりフィルターをかけたりして探すのも良いですね。
お目当ての投稿日フィールドを見つけたので左にチェックを入れて「Apply(all displays)」をクリックします。

そうするとフィールド本体の設定画面が出てくるので設定しちゃいます。
今回はデフォルトで付いてくるラベルのチェックを外して日付の書式を選択します。
ちなみに日付の書式はカスタマイズできますので良ければこちらの記事を参考に設定してみてください。

次は、タイトルフィールドと投稿日フィールドの並び替えをします。記事の一覧だったら普通は投稿日の方が上にきますのでね。
さっきクリックした「追加」の右の台形マークをクリックします。すると「並び替え」という項目が出てくるので「並び替え」クリックします。

並び替えできるリスト画面が出ますので投稿日の左の十字アイコンをタイトルの上にドラッグ&ドラッグして、「Apply(all displays)」をクリックします。

そしたらViewsの基本画面に戻りますのでフィールド部分を見てみます。タイトルと投稿日の順番が変わってますね!
順番が変わったのを確認したら右上の「保存」をクリックします。

そして最初に設定したパスのページにアクセスしてみましょう!この記事と同じように設定を進めていたら下のパスのような感じでアクセスできるはずです。 > http://webサイトのアドレス/news

これで新着情報の一覧ページが作成されました。ちなみに最初に並び順を新しい順に、表示件数を10件に指定し、ページャーを使用するにチェックを入れているのでここの新着情報記事が10件を超えるとページャーが表示され、古い記事ほど下の方に&次のページに表示されるようになっていきます。

一覧ページができあがったので次はブロックの設定をしちゃいましょう!

ブロックの設定

さっきの新着情報一覧ページと一緒にブロックが作られているので(Viewsさんがうまいこと調整してくれてます)あとはブロックの位置調整やらなんやらをしてあげるだけでOKです。
ホーム » 管理 » サイト構築にアクセスします。
パス > http://webサイトのアドレス/#overlay=admin/structure/block
> http://webサイトのアドレス/admin/structure/block

下の方の無効のところを見てみると「View: 新着情報: Block」ってのが追加されているはずです。
このブロックをとりあえず第1サイドバー部分の一番上に持ってっちゃいましょう。例によってドラッグ&ドロップで移動できます。
「ブロックの保存」をクリックしたらー・・・

「View: 新着情報: Block」の右側にある「設定」をクリックします。新着情報ページ以外に表示されるように設定します。

下の方の「ページ」項目内の「特定ページでのブロック表示」を設定します。「以下を除く全てのページ」が選択されていることを確認したら、下のテキストエリアに新着情報一覧ページのパスである「news」を入力します。
タイトルは設定してもしなくてもどっちでもいいです。そして、「ブロックの保存」をクリック!

試しにトップページに行ってみてください。サイドバーの一番上に新着情報一覧ブロックが表示されているかと思います。
そして新着情報ページにアクセスするとブロックは表示されていないはずです。ぜひご自分の目で確かめてください。

あとがき

いかがでしたでしょうか?他のCMSなら一覧の表示を行うのにPHPのテンプレートを書いたりしないといけないと思いますがDrupalならViewsモジュールを導入するだけで色んな一覧表示設定が管理画面だけでできちゃいます。
今回は「Drupalで新着情報機能を作ろう!」といった趣旨でViewsモジュールの使い方を簡単に説明しましたがViewsモジュールは本が1冊出ちゃうくらい色んなことができるモジュールです。でもその割には最初はすっごくとっつきにくい。なので今後ももっとViewsモジュールを使った何かをこのブログ上でお伝えしていければなーと思いますζ*'ヮ')ζ


共に働く新しい仲間を
募集しています

スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート&フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎!ぜひお気軽にご連絡ください。