LoginSignup
1
1

More than 5 years have passed since last update.

Movable TypeとJSONを使い記事を2週間のみ表示させる方法

Last updated at Posted at 2014-11-26

前回、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", 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をつかって〜・・や日付の値つかって〜・・って処理は得意じゃない分、現場で必要になるな思いました。(正規表現は特に必要)

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1