ゲーム攻略からプログラミングまで、その時に思いついたことをだらだらと書き連ねていきます。

【Javascript】プラグインまたちょっくら触ってみた

2014.08.22 14:26 | コメント(0) | 技術

program.jpg
おいすー♪

さつきさんでございます。

今回もプラグインをごにょごにょ改造してみました。

今回は主に最新記事をいじってみました。
あと少し応用して最新コメントも変えてみました。

今回はあんまり汎用的に作ってないので「こんなことしたよ」程度の説明ですw

どんなのがいいかな

あんまりこんな形は見ないんですけど、デフォルトの最新記事は個人的に日にちがわかりにくいように思います。
また、せっかくカテゴリを設定して投稿してるのに、カテゴリ情報が表示されないのももったいないなあとw

で、ざっくり考えたのがこんな感じ。
  • カテゴリを表示を表示する
  • カテゴリごとに記事を表示する
  • カテゴリ内の記事は投稿日時(降順)にする
  • 新しい記事に「New」をつける
こんなもんかなー。
最新記事に「New」は面白いかもしれない♪
できるといいなー♪


れっつ改造!

さて、おおまかな方針が決まったところでゴリゴリ書いていくわけですが、
今回はいくつか問題がありました。
  1. <!--recent-->ループではカテゴリが取れない
  2. ループで渡ってくる順番が投稿日時の降順
  3. 記事タイトルの【】が邪魔
さて、困ったw

<!--recent-->ループではカテゴリが取れない

デフォルトの「最新記事」プラグインでは<!--recent-->変数を使用してます。
使用可能な変数を確認してもカテゴリ名を取得できそうな項目はなし・・・。
(個人的には記事が特定できてるんだからカテゴリ名を引っ張れてもいいと思うんだけどなあ)
他に何とかしてカテゴリ名が取れないか確認していると、

ありました。

<!--topentry-->

この中だと、<%topentry_category>という変数で記事のカテゴリが引っ張ってこれます。

わーい!

ループで渡ってくる順番が投稿日時の降順

これは実装上少し困った部分です。
どういうことかというと、以下のような場合の作成順序を想定します。

最新記事が3つ。
こんな感じ
投稿日時タイトルカテゴリ
2014/8/22 15:00:00〇〇〇〇AAAA
2014/8/21 13:00:00××××BBBB
2014/8/20 20:00:00△△△△AAAA

これを順に処理していくと・・・
AAAA

 08/20 △△△△
 08/22 ○○○○

BBBB
 08/21 ××××

いや、希望はこうしたいw
AAAA

 08/22 ○○○○
 08/20 △△△△

BBBB
 08/21 ××××
細かい部分ですが、古い日付が下に行くのはなんか気持ち悪いw
で、実装コードはこんな感じ。
<script type="text/javascrpt">

<%!--topentry--<
var category = '<%topentry_category>';
var target = $('.recent_category[title="' + title + '"]'); // カテゴリのタイトルで対象を特定します。
var categories = $('.recent_category'); //カテゴリのリストを取得します。
var node_set = false; //記事リンクをセットするかどうかのフラグを管理します。初期値はfalse(セットしない)。
$.each(categories, function(idx, c) {
var title = c.getAttribute('title');
if ( node_set ) {
var t = $('.recent_entry[title="' + title + '"]');
t.before(entry) //entryは省略しましたが、記事リンク本体だと思ってください。
}
if ( title == target ) { node_set = true }
})
if ( node_set ) { $('#recent-entries').append(entry) }
<%!--/topentry-->
</script>
やってる事は、
対象のカテゴリの直後にあるカテゴリ要素の直前に記事リンクを挿入
ですw


08/20 △△△△「・・・?」

AAAA
 08/22 ○○○○

BBBB
 08/21 ××××

この子がやってきたときにどこにくっついてほしいか指示してあげてます。
この子のカテゴリ名は「AAAA」です。
その下に「BBBB」という名のカテゴリ要素が既にいるので、
その子の直前に入ってねという指示を出すと・・・
AAAA

 08/22 ○○○○
 08/20 △△△△

BBBB
 08/21 ××××
無事、目的の場所に入ってくれました♪

記事タイトルの【】が邪魔

これは完全に私だけの問題なんですがw
もともと記事タイトルの頭に大体なんのことについて書いた記事なのかわかるようにしようと始めたのがきっかけだったのですが・・・。
特に自分の中でもルールが明確になってるわけでもなし、カテゴリと整合性がとれているわけでもなしでフリーダム無法地帯になってますwww

最新記事欄にこの【】を表示すると、カテゴリと被って結構醜いw
ということで最新記事へ表示する時だけ取っ払っちゃおうということにしました。
今回はこんな形で実装してみましたよ♪

文字列から特定の文字を抜出し、削除する方法
<script type="text/javascript">

var original_text = '【test】AAAAAAAAAAAAAA';
var text = original_text.replace(/【.*】/, '');
</script>
正規表現を使ってあげたら簡単ですねー♪


New」マークの表示設定

最後に「New」マークについて。
これは悩んだんですが、とりあえず以下の仕様で動かしてみます。
  • 一番最新の記事のみに表示する
  • 投稿日時から24時間のみ表示する
以上の条件をすべて満たす記事にのみ、「New」マークが表示されます。
2番目の時間指定については、たとえば私が更新をサボった時に1年も前の記事に「New」が付くのもなんだかなあと思って実装しましたw


今回はかなりさっぱり書きましたw
たぶん真剣に見てる人はあんまりいないと思われるのでw
また、私のサイトに合わせた改造なので、汎用性が確保できてないのも理由です。

触り出すと結構面白いですよ♪
興味を持った方はぜひぜひ♪
技術の記事

コメント

まだコメントがありません...(´・ω・`)