jsonブログ

久しぶりにJavascriptのコーディングをしました。

webデザインの話ですが、リアルでの私の知人の方は、おそらく興味ないあるいは意味不明な記事になると思います。

今回の記事の材となるのは、このページです。
ソースコードはこちらです。(テキストエンコーディングはutf-8)

私はExcelのデータをブログ様式にする疑似ブログシステムを作り、学校HPにて導入していますが、他にトピックスはjson形式で疑似ブログシステムを組んでいます。

トピックスは基本、作成に私しかかかわらないので、直接json形式のテキストデータを編集できますし、データ容量がコンパクトになるからです。


すでにブログ様式に仕立ててあったので、今日は何をしたかというと、見た目的にはほんとうにちょっとの変更です。
月の表示を日本語表記にしたのと、年度ごとのjsonデータの切り替えのバグフィックス。
それとソースコードの整理です。

ちなみにトピックスのjsonデータは
	{
		title:"タイトル",
		day:"日付",
		photo:"画像",
		morephoto:"(今後の拡張用で未使用)",
		download:"ダウンロードファイル提供がある場合はurl",
		description:"記事本文",
		category:"投稿主体",
		PageTitle:"実質のカテゴリ",
		uri:"詳細ページのurl(実質未使用)"
	}
を1記事分として記述しています。


アーカイブリストの月表記の日本語化
jsonデータは、トップページにも読み込ませています。
カレンダー風にデザインしたので、記事作成の月は「見た目がいい」というだけの理由で、小学校HPにもかかわらず英語表記にしていました。
それゆえ、8月17日ならば、jsonには「AUG.17」と記述してあります。

アーカイブリストの生成には、dayの始めの3文字分を抽出し、リスト項目の配列に格納。
indexOfを利用し、同じものが既に格納されているかをチェックし、新しいものを順次登録するようにしてあります。

リストにする際、例えばAUGを抽出したら「8月」に変換して登録すればいいだけに思えますが、実はこのリストにはイベントが設定されており、クリックしたリスト項目の文字列と同一の記事をdayの中からソートするようにしてあったので、表記を「8月」にしてしまうと「AUG」の記事を抽出できなくなってしまいます。
8月をクリックしたらまた今度はAUGに変換して・・・というのはあまりにスマートでないので、それは避けたかったのです。
そこで、クリックしたリスト項目の文字列でなくて、クリックしたリスト項目のID属性でソートするようにしました。
<li id="AUG">8月</li>
みたいな感じですね。
リスト生成の際に、idにはそのままdayの3文字を代入し、テキストには変換したものを代入するようにしました。

	var n = tagName[i].substring(0,3);
	whatMonth(n);
	check = a.indexOf(m);
	if(check < 0){
		a[i] = m;
		gList += "<li><a href='#' id='m" + n + "'>" + a[i] +"</a></li>";
	}
tagNameとしてあるのは、リスト生成機能をアーカイブリストとカテゴリリスト併用しているからです。この場合のtagNameはdayです。(実際はdayを一度、配列daysに格納してあるのでdaysですが)
whatMonth(n)の中身はスイッチ文があります。AUGなら8月というやつです。
変数mに入れられて戻ってきます。
a.indexOf(m)で、配列にすでに8月が登録されているかを調べています。
次のif文で、登録されていない場合は登録するようにしています。
idにはAUGを(エラーが起きないよう、便宜上頭に文字を一つつけています)、
リスト項目となるテキストには8月が入ります。


年度データの切り替え
これまでは、年度ごとに新しくデータを流し込む雛形となるhtmlファイルを設けていましたが、年度のリストをクリックしたら、その年度に対応するjsonデータを呼び出し、再表示させるようにしました。
これは以前に実装してあったのですが、実はバグがあったことが判明。
切り替えた後も、切り替える前のデータが残ってしまうというもの。
配列を初期化していなかったために起きていました。
ちょっと煩雑ですが、配列を初期化するよう記述しました。

	titles.length = 0;
みたいな感じ。
titlesは、タイトルを格納した配列です。
この記述で配列を初期化できることは、今日知りました。


ソースコードの整理
私がwebクリエイターとして、素人であるゆえなのですが、
実際これだけのJavascriptをコーディングできるだけでも、我ながらたいしたものだと思うレベルです。
コードをシンプルにしていくのは、永遠の課題です^^

疑似ブログの仕組みを簡単に説明すると
初期表示では、まず記事数が10に満たない場合は全て表示する。そうでなければ最新のものから10個を表示するようにしています。
リストをクリックした場合は、それに対応した記事を抽出して表示するようになっています。
for文でぐるぐるするのはいいのですが、1記事分を生成するコードをどうしたら1つにまとめられるかずっと分かりませんでした。
今回は、「今年度の記事を全て表示する」という機能をつけようかと思い、その機能のためにまた同様のコードを書くのは煩雑だったので再挑戦したのでした。

		for (i=0; i<titles.length; i++){
			generateArticle(i);
			resultData += article;
		}
のように記述することで、1記事分の生成する機能へ渡して記事データを戻せることが理解できました。めでたしめでたし。
これは普段使っているAjax × Excel × Blogにも適用できると思います。
わーい。



あきらかな自己満足記事ですが、所詮ブログなのでご容赦ください。
そんなロジックよりもコンテンツを充実させろというおしかりもいただきそうですが、
サーバーサイドスクリプトを使えない横浜市では、HP1回ごとの更新の手間を極力小さくすると同時にユーザビリティを確保するのは死活問題なのです。。。


JUGEMテーマ:WEB作成のテクニック 
0

    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック

    小学生発!Pray for Japan

    search this site.

    profile

    selected entries

    categories

    archives

    recent comment

    recent trackback

    Twitter

    ブクログ

    links

    recommend

    others

    mobile

    qrcode