MTAppjQuery P7

MTAppAssetFields

テキスト欄を PowerCMS/MT のアセット選択ダイアログで扱えるフィールドにし、選択アセットの情報（id/ファイル名/URL/サムネ）を JSON 保存する jQuery プラグイン。P7 最適化版。

テキスト入力欄（input / textarea）を、PowerCMS／MT 標準のアセット選択ダイアログで扱えるフィールドにする jQuery プラグインです。「画像を選択」リンクからダイアログを開いてアセットを選び、選択したアセットの情報（id・ファイル名・URL・サムネイル）を JSON でフィールドに保存します。画像はプレビュー（サムネイル）を表示します。

構文

$(selector).MTAppAssetFields(options, words);

$.fn プラグイン（$(selector).MTAppAssetFields(...)）です。対象要素（this）を返すのでチェーンできます。

パラメータ

options {Object} — 省略可。以下のプロパティを持ちます。

プロパティ	型	既定値	説明
`assetType`	string	`image`	対象アセット種別。`image` / `file` / `audio`
`assetTypeLabel`	string	`''`	選択／削除リンクに表示するラベル。空なら種別の既定ラベル（画像／ファイル／オーディオ）
`edit`	boolean	`false`	`true` でダイアログ内での画像編集を許可
`noConvert`	boolean	`false`	`true` で保存時の `<form>`→JSON 変換を無効化
`canMulti`	boolean	`false`	`true` で一度に複数ファイルをアップロード可能
`debug`	boolean	`false`	`true` で元のフィールドを隠さず表示

words {Object} — 省略可。表示文言の L10N 上書き（image / file / audio / select / remove）。

戻り値

{jQuery} — 対象要素（チェーン可能）。

保存される値

選択したアセットの情報を表す JSON 文字列が保存されます。基本形は {"id":"…","filename":"…","url":"…"} です。画像で、かつ Data API（mtappVars.DataAPI）が利用できる環境では、サムネイル URL を取得して "thumbnail":"…" を追記します（PowerCMS 7 のアセット選択ダイアログ自体はサムネイル URL を返さないため、Data API が無い環境では thumbnail は付きません）。

Data API でサムネイルを取得するには、プラグイン設定「DataAPI SDK を利用」を有効にし、get_thumbnail エンドポイントを持つ Data API v2 以降を選択してください（v1 には get_thumbnail が無いため thumbnail は付かず、url（元画像）で表示されます）。
「DataAPI SDK を利用」を有効にすると、本プラグインは現在ログイン中の管理画面ユーザーで Data API のアクセストークンを自動発行して mtappVars.DataAPI に渡します（再ログイン不要・パスワードの保存なし）。トークンはブラウザのクッキーで再利用されます。

thumbnail が無くても、画像プレビューは url（元画像）を使って表示されるため画像は必ず表示されます。

アセットを選択した直後に、ダイアログが返す <form mt:asset-id="…">…</form> を convert でこの JSON へ正規化します（保存（フォーム送信）時にも未変換のものをまとめて変換します）。

使用例

// 画像アセット選択フィールド
$('#customfield_photo').MTAppAssetFields({ assetType: 'image' });

// ファイル選択・ラベル変更
$('#customfield_doc').MTAppAssetFields({ assetType: 'file', assetTypeLabel: '資料' });

user.js での記述例

user.js（「デザイン → user.js を編集」）に書く場合は、mtappVars.screen_id で画面を判定して呼び出します。

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $('#customfield_photo').MTAppAssetFields({ assetType: 'image' });
    }
})(jQuery);

生成される HTML

元のフィールドは隠され（debug: true のときは表示のまま）、直後にコンテナ（MTAppAssetFields-container）が挿入され、その中にプレビュー（customfield_preview）と操作リンク（選択・削除）が入ります。再描画時はこのコンテナの中身だけを入れ替えます（MTAppRemoveVal が後からフィールドを div.mtapp-remove-val で包んでも、再描画でプレビューが重複しないようにするための安定したコンテナです）。

<input type="text" id="customfield_mtappassetfields_…" style="display:none">
<div class="MTAppAssetFields-container">
    <div id="customfield_mtappassetfields_…_preview" class="customfield_preview MTAppAssetFields">
        <a href="…" target="_blank"><img src="…画像 URL（サムネがあればサムネ）…" alt=""></a>
    </div>
    <div class="actions-bar MTAppAssetFields">
        <div class="actions-bar-inner pkg actions">
            <a href="…?__mode=list_asset&…&asset_select=1" class="mtapp-open-dialog">画像を選択</a>
            <a href="#" id="customfield_mtappassetfields_…_remove_asset">画像を削除</a>
        </div>
    </div>
</div>

補足

ダイアログは PowerCMS／MT ネイティブの .mtDialog() で開きます。アセットを選ぶと、選択確定時に呼ばれるグローバルコールバック insertCustomFieldAsset(html, id) がフィールドへ値を入れます。本メソッドを適用したフィールドでは、入った値を convert で JSON へ正規化し refreshHTML でプレビューを再描画するため、選択直後から（保存後の再表示と同じ経路で）画像が表示されます。
この insertCustomFieldAsset は PowerCMS 7 に標準では存在しないため、本メソッドがモダンな実装（getElementById / classList）で window にグローバル定義します（旧 MT の getByID / TC / log には依存しません）。
プレビューの URL・ファイル名・サムネイルは要素の属性／テキストとして安全に設定するため、値に引用符やタグ文字列が含まれても HTML として解釈されません（HTML インジェクションを起こしません）。
画像プレビューはサムネイル（あれば）／無ければ元画像 URL を表示します（CSS で最大幅 240px に制限）。保存値にサムネイルが無く Data API（mtappVars.DataAPI）の get_thumbnail（v2 以降）が使える場合は、サムネイル URL を取得して表示を差し替え、保存値へ追記します。SDK 未読込や v1（getThumbnail 無し）の場合は url 表示のままで、エラーにはなりません。
フォーム送信時、no-convert クラスが付いていないフィールドの <form> をまとめて JSON へ変換します（noConvert: true で除外）。
記事／ページ編集画面のカスタムフィールド向けです。完全な動作確認には、対象ブログにアセット（画像など）が必要です。

構文

パラメータ

戻り値

保存される値

使用例

user.js での記述例

生成される HTML

補足

関連