グラビカ学習帳～新宿のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

MTAppjQuery を使って、MTの記事編集画面からコンテンツデータとの関連付けをできるようにしたときのメモです。

【注】MTAppjQuery、Data API（json）ともに知識が浅く、参考にできる情報も少なかったためやや強引な実装になっているかと思います。それでもできないよりはマシという方向けになります。

●やりたいこと
・MTの記事編集画面から、コンテンツデータの一覧を開いて関連付けする。
・一覧ではラベルやID以外に、特定のコンテンツフィールドも表示する。（これに詰まっていた）

●実装手順
（1） 関連付けたコンテンツデータの情報を保存するためのカスタムフィールドを作成する。（種類はテキスト）

（2）MTAppjQuery の user.js に以下のように記述。

(function($){

// ID:1のブログに適用
if( mtappVars.blog_id == 1 ){

// 記事編集画面のみ
if (mtappVars.screen_id === 'edit-entry') {
        
    // コンテンツデータを選択するボタン
    $('#customfield_**カスタムフィールドのベースネーム**').MTAppListing({
        url: 'https://xxxxxxxxxxxxx/mt/mt-data-api.cgi/v6/sites/1/contentTypes/2/data', // DataAPIのパスを入れる。「/1/」はブログID、「/2/」はコンテンツタイプID
        data: {
            fields: 'id,label,data',
            limit: 9999999
        },
        dialogTitle: 'コンテンツデータを選択',
        jsontable: {
            header: {
                id: 'ID',
                field_A: 'フィールドA',
                label: 'テーマタイトル'
            },
            headerOrder: ['id', 'field_A', 'label'],
            itemsRootKey: 'items',
            listingCheckboxType: 'radio',
            listingTargetKey: 'id',
            listingTargetEscape: false,
        },
        // json読み込み完了時に実行
        cbAjaxDoneFilterJSONTable: function(cb, $dialog, response) {
            // fieldMap: 出力キー名 : 項目名
            const fieldMap = {
                field_A: 'フィールドA' // ここでコンテンツフィールドの項目名と、それを扱うためのキー名を設定する。
            };
            response.items = flattenContentTypeItems(response.items || [], fieldMap);
            return response;
        }
    });

    // jsonを整形する関数
    // コンテンツタイプのフィールドデータはすべて"data"に格納されているので、そのままでは MTAppListing で使用できない。
    // 出力キー名を使用して呼び出せるように整形する。
    function flattenContentTypeItems(items, fieldMap) {
        return items.map(function(item){
        // fieldMap に従って item に新しいキーを作る
        Object.keys(fieldMap).forEach(function(key){
            const labelName = fieldMap[key];
            const field = item.data.find(f => f.label === labelName);
            item[key] = field ? field.data : '';
        });
        return item;
        });
    }

}
}
})(jQuery);

ポイントとしては、
・.MTAppListing() では呼び出した JSONファイルから header: {}内で指定したデータを扱うが、コンテンツデータは各フィールドのデータがすべて"data"内に格納されていてそのままでは使用できない（おそらく）
・そのため、呼び出したJSONを一旦加工して、任意のキーで呼び出せるようにする
・そのキーを header: {}内で使用する
という感じです。

サーバー移行などでMTを別サーバーに移す場合、「サイトのエクスポート」「サイトのインポート」を使うことで画像を含むブログデータを丸ごと別のMT上に移行することができます。（旧『バックアップと復元』）

とくに移行先がMTクラウドの場合はデータベースをダンプして移行する方法がとれないため、上記のサイトエクスポート・インポートに頼るしかない場面もあると思います。

なのですが、移植するサイトのファイルサイズが大きいとそれなりに失敗します。

一応ファイルを分割したり、サーバー上のimportフォルダに直接アップしてからサイトインポートする方法もあるのですが、サイズが大きいとそれも失敗してしまうことがあります。
（ファイルサイズ以外の原因があった可能性もありますが・・）

そんなときの対策として、
ファイルサイズの大部分を占める画像をなくした状態でインポート・エクスポートするという方法を試してみました。

といってもそんな大げさなことではなく、

1. ブログで使用している画像をFTPソフトですべてダウンロード
2. サーバー上の画像フォルダをリネームするなどして、ブログ内の画像をリンク切れの状態に
3. その状態でサイトをエクスポート → インポート
4. 移行後のサーバーに1でダウンロードした画像をFTPアップ

です。
リンク切れしているのでエクスポート時には画像が含まれず、ファイルサイズをかなり小さくすることができます。 リンク情報自体は残っているので画像を手動アップすれば普通にリンクされます。

まだ一度しか試していませんが、そのままではエクスポート・インポートできなかったブログを上記の方法で無事移行することができました。
もし移行がうまくいかない方は試してみると良いかもしれません。

使用Ver：MT6.2

以前「MT：ファイルの初期アップロード先を設定する」という記事で、MTで画像等のファイルをアップロードするときのデフォルト階層の設定方法を書きました。

MT6.2からは設定画面から簡単に行えるようになりましたので、改めて記事にしようと思います。

といってもやり方は本当に簡単で、ウェブサイトもしくはブログの

「設定」＞「全般」

のアップロードの項目からアップロード先を入力するだけです。
MTのテンプレートファイルをいじらなくて済むので管理的にもありがたいですし、下記のような便利な設定もあったりします。

・ブログ毎に設定できる
・ユーザーが変更できないように設定できる


MT6.2ではこの他にもアップロード関連の機能が強化されているので、
画像を多様する最近のサイトでも使いやすくなったな～という印象。

・マルチアップロード対応
・イメージエディタを搭載
・日本語ファイル名の自動変換をサポート


（今までほしかった機能たち笑）

上記が書かれているリリースノートはこちらです。
Movable Type 6.2 リリースノート

・・なのですが、かなり初歩的なことで躓いていました。

参考サイトの通りにJSを読み込み、データを引っ張ってくる記述をしているはずなのですが、表示されない。
注意点や記述を一から見なおしてもとくに問題ないはず・・と大分困っていたのですが、
注意点にあった

・他のドメインに置かれたファイルからは読み込めない

が妙に気になり（もちろん同じサーバーに置いてはいますが）
良く確認したところ・・

●JSに記述しているURL
http://hoge.gravity-works.jp/

●ブラウザで開いているURL
http://www.hoge.gravity-works.jp/


ドメイン間違ってるし！

なんか、たびたび引っかかります、これ。。
MTは初期設定のままだと公開パスに「www」が付いているので、
サブドメインを使うときなどは気をつけようというオチでした。

MTタグで出力されるデータを任意の文字で分割することができるプラグインです。
GoogleMap用に入力しておいた、経度と緯度をカンマで繋いだデータを
再利用する際に利用させていただきました。

■SplitModifier 0.1.1
http://gabs.cc/blog/bun/topic20110301-1610.php


■使い方

1. ダウンロードし、「MTディレクトリ/plugins/」にアップ。


2. 分割したいMTタグに、splitモディファイアとsetvarモディファイアを追加。
　 splitモディファイアには分割する際に区切りとなる文字、
　 setvarモディファイアには分割後のデータ数を格納する変数名を入れます。

　 <$mt:GoogleMap$>
　 　　↓
　 <$mt:GoogleMap split="," setvar="cnt"$>


3. 分割されたデータは「var_n」という変数に格納されます。
　 1つ目のデータは<$mt:GetVar name="var_1" $>、
　 2つ目のデータは<$mt:GetVar name="var_2" $>とすることで取得できます。


今回のように、登録してあるデータを想定外の用途に使用しなければならないことは意外に多い気がするので、これからもお世話になりそうです。