Craft CMS のファイル管理について理解しよう

これは Craft CMS Advent Calendar 2016 8日目の記事です。

先程、Craft CMS 2.6.2954 アップデータが配布された旨のアナウンスがありました。
管理画面のフッタにある アップデートを確認する をクリックし、移動先のページにある アップデート ボタンを押して適用しておきましょう。

MAMP にインストールした Craft CMS はワンクリックでアップデートできることを確認していますが、エラーになる場合は公式リファレンスを参考にパーミッションを調整するか、最新版 Zip ファイルに含まれる craft/app/ を FTP で上書きしてください。

Updating | Documentation | Craft CMS:
https://craftcms.com/docs/updating

さて、Craft CMS でファイルを扱う場合、下記の手順を踏む必要があります。

  1. ファイル管理の設定画面で アセット・ソース を作成
  2. ファイル管理 フィールドに紐づけ
  3. エントリの フィールドレイアウト に追加
  4. エントリでファイルを選択
  5. テンプレートの調整

テンプレートについては後日ご紹介する予定のため、今回はファイル管理に関する設定方法を見ていきましょう。

ファイル管理を設定してみよう

以前セットアップしたデモサイトに、新しいアセット・ソースを追加します。

設定画面

グローバルナビゲーションから 設定 に移動し、ファイル管理 アイコンをクリックします。

ファイル管理の設定一覧

ファイル管理の一覧に移動したら、メインカラム下段にある 新しいアセット・ソース ボタンをクリックします。

MAMP 内に保存先のディレクトリを作成する

ここでは、前回作成した ブログ セクション向けの画像を管理しようと思います。
あらかじめ、保存先のディレクトリ /Applications/MAMP/htdocs/public/blog/images を作成しておきましょう。

新しいアセットを作る

アセットの作成画面では、以下の内容を入力します。

ラベル
名前ブログ画像
ハンドルassetBlogImages
タイプローカルのフォルダ(※Pro のみ選択可)
ファイルシステムのパス/Applications/MAMP/htdocs/public/blog/images
ソース内のアセットには一般向け URL が含まれますON(緑色)
URLhttp://localhost/blog/images

ここで指定する ハンドル も、混同しないよう判りやすい名称にしておきます。
ファイルシステムのパス は、サーバルートからの絶対パスになる点だけ、注意しましょう。

新しいエントリを作る

次に フィールドの配置 タブをクリック後、必要な入力項目を コンテンツ に追加して、保存します。
ここでは alt 属性で利用する想定とし SHORT DESCRIPTION フィールドをセットしています。(※Happy Lager で追加されるフィールドのため英語表記ですが、実制作時は日本語表記にできます。)

フィールドを作成してみよう

続けて アセット・ソース と紐づいた ファイル管理 フィールドを作成してみます。

設定画面

グローバルナビゲーションから 設定 に移動し、フィールド アイコンをクリックします。

フィールドの一覧

画面右上にある 新規フィールド ボタンをクリックします。

フィールドのレイアウト編集

それぞれ、以下の内容で入力します。

ラベル
グループGeneral
※ここで選択した項目ごとに、フィールドレイアウトの表示がグルーピングされます
名前ブログ画像
ハンドルfieldBlogImage
説明(空欄)
※入力画面の説明文になります。
フィールドタイプファイル管理
アップロードを単一フォルダに限定しますか?OFF
ソースブログ画像
全て のチェックを外すと、任意のソースを選択できるようになります。
既定のアップロードロケーションブログ画像
※編集画面で直接ドラッグ&ドロップされたファイルのアップロード先を指定します。通常は ソース の選択内容を基準とおけばよいでしょう。
許可されるファイルの種類を制限しますか?ON
※ここでは 画像 のみ許可する形で設定します。
リミット3
※追加できるアセットの数をここで制限できます。
モードを見る。リスト
※入力画面で選択済みのアイテムの見た目を調整します。
選択ラベル(空欄)
※入力画面のボタンラベルを アセットを追加する 以外にする場合に利用します。

アップロードを単一フォルダに限定しますか? を ON にすると ソース 欄は非表示になります。

複数ソースを選択した場合の例

今回の ブログ画像 のような使い方であれば単一フォルダに限定しても問題ありませんが、複数のソースをセットしておくとアセット選択のポップアップでソースを切り替えられるようになるため、使いどころによっては便利です。

ブログ入力タイプの編集

あとは、ブログ 入力タイプのフィールドレイアウトに ブログ画像 を追加して

エントリの編集画面

ブログ に属するエントリを編集してみましょう。

このとき、入力欄の ブログ画像 には最大3点の画像ファイルを追加(その場にドラッグ&ドロップでも可)でき、セット済みの項目は並び替えできることも確認してみてください。

ファイルの一括登録について

初期データの登録などでファイルを一括登録する場合は、ファイルのインデックスをアップデートすると効率的です。

ファイルのインデックスをアップデートする

  1. アセット・ソースで指定した ファイルシステムのパス に画像などを FTP アップロード
  2. グローバルナビゲーションから 設定 に移動
  3. ファイルのインデックスをアップデートする アイコンをクリックし、チェックボックスを調整後に Go! ボタンをクリック

インデックスが終了すると ファイル管理 から追加したアセットを参照できるようになります。

まとめ

ここでは、ファイル管理の設定方法についてまとめてみました。
エントリのセクションや用途に応じた分類ができるなど、Craft CMS の使い勝手の良さを感じていただけましたか?

次回は、フィールドの設定方法について解説しようと思います。