タグ: Movable Type

トップページ > サイト作成 > CMS > Movable Type の管理画面でアセット一覧にファイルパスを表示する方法

Movable Type の管理画面でアセット一覧にファイルパスを表示する方法

[初回公開] 2021年12月05日

Movable Type には画像を管理画面からアップロードして管理する「アセット」の機能があるが、アップロードした後は一覧にファイル名しか表示されないため、同名のファイル名が多いと見分けがつかなく不便なため、アセット一覧にファイルパスを表示する方法を紹介する。

1. Movable Type のアセットとは

Movable Type のアセットとは、画像など電子データを管理画面からアップロードする機能である。
管理画面からファイルをアップロードすることでウェブページや記事を作成する際に本文中に簡単に画像の埋め込みや、PDF など電子データのダウンロードリンクを設置することができる。

Movable Type で画像などファイルをアップロードするアセットの画面は上図のようになっており、アップロードしたいフォルダを選択した上でアップロードしたファイルをブラウザ内にドラッグするだけで自動的にアップロードされる。
同じフォルダ内に同じファイル名のデータがある場合は、別名にしてアップロードするか、上書きするかを選択することができる。

2. アセット一覧が不便な点

アセットの一覧が不便な点もあり、アップロードした後のファイルは下図のように一覧で確認することができるがファイル名しか表示されないため、どのフォルダにアップロードされたファイルかが判別できない点である。

また、ウェブページまたは記事作成時のファイル添付時の画面も下図のようになっており、アセット一覧と類似しているようにファイル名しか表示されていない。

アセットに表示される内容は管理画面の設定等で変更することができないため、管理画面のプログラムを直接カスタマイズすることでファイル名に加えて設置されているファイルパスも表示されるようにする。

3. アップロードしたファイルにパスがあるか確認する方法

Movable Type の管理画面にファイルパスを表示させるためにはアップロードしたファイルのパスがデータベースに保存されているかをまず確認する。
Movable Type の各種データは利用しているデータベース（MySQL）に保存されており、その中にアセットを管理しているテーブル「mt_asset」があるのが確認できる。

mysql> show tables;
+--------------------+
| Tables_in_mt7      |
+--------------------+
| mt_accesstoken     |
| mt_asset           |　←アセットを管理しているテーブル
| mt_asset_meta      |
| mt_association     |
| mt_author          |
（略）
+--------------------+
57 rows in set (0.00 sec)

次にテーブル「mt_asset」を参照すると、下記のようにファイル名に加えて、各ファイルが設置されているファイルパスも保存されているのがわかる。

mysql> select asset_id, asset_file_name, asset_file_path, asset_label from mt_asset;
+----------+-----------------------+--------------------------------+-----------------------+
| asset_id | asset_file_name       | asset_file_path                | asset_label           |
+----------+-----------------------+--------------------------------+-----------------------+
|        1 | icn_sns.png           | %r/img/icn_sns.png             | icn_sns.png           |
|        2 | 01_mail_attension.jpg | %r/about/01_mail_attension.jpg | 01_mail_attension.jpg |
|        3 | 03_excel.jpg          | %r/about/03_excel.jpg          | 03_excel.jpg          |
|        4 | 01_hokkaido.png       | %r/01_hokkaido.png             | 01_hokkaido.png       |
|        5 | 02_aomori.png         | %r/02_aomori.png               | 02_aomori.png         |
|        6 | favicon.ico           | %r/favicon.ico                 | favicon.ico           |
|        8 | 01.jpg                | %r/01.jpg                      | 01.jpg                |
+----------+-----------------------+--------------------------------+-----------------------+
7 rows in set (0.00 sec)

以上より、データベースにはアセット一覧の画面に表示させたいファイルパスのデータがあるため、管理画面のテンプレートをカスタマイズしてファイル名ではなくファイルパスを表示するように変更する。

4. アセット一覧にファイルパスを表示する方法

アセット一覧にファイルパスを表示する方法は、管理画面のテンプレートをテキストエディタなどで編集し、再度サーバにアップロードする。
アセット一覧は管理画面の左メニューにある「アセット -> 一覧」の他に、ウェブページまたは記事を作成する画面よりファイル添付を行う際に表示されるアセット一覧の 2 箇所を修正する必要がある。

4-1. アセット一覧のテンプレートを編集する

管理画面の左メニューにある「アセット -> 一覧」にファイルパスを表示させるためには、下記の場所にある「Asset.pm」を変更する。

# vi /var/www/cgi-bin/{MT の設置ディレクトリ}/lib/MTAsset.pm

<span class="title ml-4 mr-2"><a href="$edit_link" style="vertical-align: top; line-height: normal;">$label</a></span>$userpic_sticker
　↓
<span class="title ml-4 mr-2"><a href="$edit_link" style="vertical-align: top; line-height: normal;">$file_path</a></span>$userpic_sticker

<span class="title"><a href="$edit_link" style="vertical-align: top; line-height: normal;">$label</a></span>
　↓
<span class="title"><a href="$edit_link" style="vertical-align: top; line-height: normal;">$file_path</a></span>

4-2. ウェブページまたは記事にファイルを挿入するテンプレートを編集する

ウェブページまたは記事を作成する画面よりファイル添付を行う際に表示されるアセット一覧にファイルパスを表示させるためには、下記の場所にある「async_asset_list.tmpl」を変更する。

# vi /var/www/cgi-bin/{MT の設置ディレクトリ}/tmpl/cms/include/async_asset_list.tmpl

<$mt:var name="label" escape="html"$>
　↓
<$mt:var name="file_path" escape="html"$>

4-3.アセット一覧にファイルパスが表示される様子

アセット一覧のテンプレートをカスタマイズした後の画面が下図となり、ファイル名に加えてサーバの場所を示すファイルパスも同時に表示されているのが確認できる。

また、ウェブページまたは記事にファイル添付する画面にもファイルパスが表示されているのが確認できる。

関連記事