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

記事リストを分割することができる便利なPageButeプラグイン。
「1ページにつき10件」というように分割する記事数を指定できるのですが、
＜mt:If＞などを使って一部の記事を出力しないようにすると掲載数が指定通りになりません。

これは各ページ10件ずつに分割された後、If文によって一部の記事が非表示になるため、
たとえば3件非表示になったページは7件しか出力されません。

●対策
出力したい記事のみを配列に格納しておいて、＜mt:Loop＞を使って出力します。
そのloopをPageButeで分割します。
（※実はPageButeは＜mt:Entries＞以外も分割できます！）

●MTテンプレート

<!-- 配列の準備 -->
<$mt:SetVar name="entryArray" value=""$>
<mt:Entries>
<!-- 条件に一致した記事のみ配列に格納 -->
<mt:If tag="entrybody" ne="">
<mt:SetVarBlock name="entryArray" function="push">
    <!-- ここで出力時の形にしておく -->
    <h3><$mt:EntryTitle$></h3>
    <p><$mt:EntryBody$></p>
</mt:SetVarBlock>
</mt:If>
</mt:Entries>

<ul>
<mt:PageContents count="5">

    <!-- 配列に格納されたものをLoopで出力 -->
    <mt:Loop name="entryArray">		
        <li>
        <$mt:Var name="__value__"$>
        </li>
    <$mt:PageSeparator$>
    </mt:Loop>

</mt:PageContents>
</ul>

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」が付いているので、
サブドメインを使うときなどは気をつけようというオチでした。