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

【Javascript】FC2のプラグインを改造してみよー

2014.08.04 21:36 | コメント(0) | 技術

program.jpg
→更新記事を書きました。
ちまちまと時間を見つけては改造してたプラグインがひと段落しましたw

さっちんですねー。


今回は、左側に出してる基本プラグイン「月別アーカイブ」をいじくってみました。
before

 

after

default.png

 

short.png

長い・・・。
これがこの先ずんずん長くなっていくと思うとちょっとムズッとしたので、
少しスリムにしてみました。

今回はDOM操作を駆使してJavascriptで実装してみましたよー♪

現行コードの確認


まず、今の状態のソースコードを確認します。
<ul id="archive">

<!--archive-->
<li &align>
<a href="<%archive_link>" title="<%archive_year>/<%archive_month>">
<%archive_year>/<%archive_month> (<%archive_count>)</a>
</li>
<!--/archive-->
</ul>

わー。しんぷる。
こっからわかることを簡単にまとめると、
  • リスト形式で出力
  • なんか対のコメントアウトがある
  • リンクと思しきものが動的に生成されてる

まーHTMLのタグの形式は割とどーでもいいかな。
それよりも一番気になったのがこの2つ。
<!--archive-->

~略~
<!--/archive-->
と、
<%~>
答えはこちら
ふむふむ、この記述はアーカイブ(月別の記事数)の一覧を表示するらしい。
<%~>
は、月別の変数みたいだねー。
詳しい使い方は、さっきのヘルプページを見てくださいw
んし、じゃー作り変えていこうかな!


完成図を考える


作る前に、どんなものが作りたいか考えてみます。
ざっくり方向性を決めないと作ってる最中に「あれ?何作ってんだっけ?」ってなりますからねw
私の今回の一番の目標はスリム化なので、まず毎月1行ずつ増えていく現状のデザインは無いです。
で、今回のざっくりプランはこんな感じ。
  • 年別の中カテゴリを設置する
  • 月は2ケタ表示(01~12)で表示する
  • 月は半年を1段として、2段表示とする
  • アーカイブ表示が歯抜けにならないように、記事を書いていない月についても表示する
  • 年間の記事数を取得し、表示する

これだけできればとりあえず満足かなー。
tableタグを使用した理由はCSSの調整が楽だからw
まあ月別の表だから間違いではないでしょー。

組み込む


さて、実際に組んでいきます。、
実際に作成したソースコードにコメントを入れてみました。

ソースコードを見る

はい。このとおりです(大雑把)
まあちょっと読める人が見たら、すぐわかると思うんですが、
無駄な記述が多い
プログラムする際によく言われることですが、「DRY(Don't Read Yourself)に作れ!」
これは同じコードをうんちゃらうんちゃら何箇所にも書くと冗長的になって可読性が下がるし、変更を加えるときにたくさんの箇所を触らないといけなくなって保守性が下がる。
つまり、どうするかというと、同じコードはまとめてしまいましょうということですね。
Javascriptの場合、function(){}で関数を定義してやって、必要な部分で呼び出すとすごく楽ですよ。
じゃあなんでオマエはやってないの?

答えは簡単。

FC2が関数を作らせてくれないから(´;ω;`)

なんでなんだよーう・・・。
なんで直書きしか許してくれないんだよーう・・・。
XSS(Cross Site Scripting)エラーが出てたけど、直書きスクリプトが動く時点で同じじゃないかー(´;ω;`)

ココなんでこんなことしてんの?
とか、これはどういう処理なの?
とかあればご意見くださいね(*´∀`)

ちなみに、私が作成したコレは自由に使ってくださって構いません。
こんなんを使いたがる人がいるとは考えにくいけど・・・w

コメントアウトを取ったコードを公開しておきますねー。
(長いからまた畳んでおきます。)

ソースコードを見る

ちなみに当ててるCSSはこちらー。
これもご自由に変更くださーい。
/* Archives Plug-in */

table#archive {
padding: auto 2px;
width: 90%;
margin: auto;
text-align: center;
}

table#archive th {
padding-top: 10px;
font-size: 110%;
}

table#archive td a {
font-weight: bold;
color: #9f7349;
}

table#archive td.inactive {
color: #828282;
}


と、まあ今回は大半の方には興味のないJavascriptのお話でしたー。
DOM操作楽しい(・∀・)
技術の記事

コメント

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