前回、Movable Typeでカスタムフィールドで表示するNew画像を2週間のみ表示させる方法という記事をあげたのですが、追加要望が発生したためカスタマイズを試みました。
検証や実装イメージを二日間くらい考えた結果、今日ひらめき実装したらできたので忘れないためメモになります。
要件
- ブログ記事を静的で管理しているページに記事一覧へ表示
- 14日後には、自動的に非表示
- 静的側で記事をスライダー表示(今回は割愛)
- 入力したテキスト文字が枠から飛び出ないように、文字制限処理(今回は割愛)
バージョン
- MTバージョン:5.02
- jQueryバージョン:1.4系(静的ページで管理している部分)
実装の洗い出し
- MT記事をjsonで書き出し
- jsonを静的側に呼び出し
- 公開日の値を拾い、14日で自動的に消えるようにjavascript・jQueryで制御
- jsonの値を使い、自作またはプラグインでスライダー処理を実装
- 文字制限処理(MTでもよかった気がするけど、javascript・jQuery制御)
JSON
このコードでも大丈夫ですが、ダブルクォーテーションなどが入ったりしてJSONが壊れてしまう可能性があるためto_jsonを使用するように変更致しました。
MTのブログ内にJSONを記述通常通りMTEntriesを使い、jsonを生成MTEntryDateで値(formatは下記コードのようにします)
[
<mt:Entries>{
"title": "<$mt:EntryTitle$>",
"date": "<$mt:EntryDate format="%Y年%m月%d日 %H時%M分%S秒"$>"
}<MTIf name="__last__"><MTElse>,</MTElse></MTIf></mt:Entries>
]
下記に変更
- エスケープ処理などをMT側で制御してくれる
<mt:SetVar name="entries" function="undef" />
<mt:Entries>
<mt:SetVar name="e" function="undef" />
<mt:SetHashVar name="e">
<mt:EntryTitle setvar="title">
<$mt:EntryDate format="%Y年%m月%d日 %H時%M分%S秒" setvar="date"$>
</mt:SetHashVar>
<mt:EntryID setvar="id" />
<mt:SetVar name="entries" key="$id" value="$e" />
</mt:Entries>
<mt:Var name="entries" to_json="1" />
javascript・jQuery
- getJSONで該当のパス名を記述(index.json部分)
- 変数currentDateで現在の日を取得
- ループパスの中に入っている部分は、一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版を参考
- 変数itemHTMLでは、パース用のHTMLとして変数へ
$.getJSON("index.json", function(index){
var currentDate = new Date();
for(var i in index){
var pass = 336;
var newmarkAttr = index[i].date;
newmarkAttr = newmarkAttr.replace(/年|月|日|時|分/g,':');
newmarkAttr = newmarkAttr.replace(/\s|秒.*/g,'');
var time = newmarkAttr.split(":");
var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
var now = (currentDate.getTime() - entryDate.getTime())/(60*60*1000);
now = Math.ceil(now);
var itemHTML = '<div class="box"><ul><li>' + index[i].title + '</li></ul>' + '<p>' + index[i].date + '<p>' + '<div>';
if(now <= pass){
$("#output").append(itemHTML);
}
}
});
取り急ぎのメモになります。
こういったJSONをつかって〜・・や日付の値つかって〜・・って処理は得意じゃない分、現場で必要になるな思いました。(正規表現は特に必要)