今回は、JavaScriptのプログラムを読んでみる事（解読編）を記事にしてみます。
前回の記事では、プログラムを理解するにあたって他人のプログラムを理解する意味について説明しました。
そこで、今回は他人が書いたプログラムをベースに理解を深めていきたいと思います。
扱うソースは？
今回は、下記のブログでソースを公開している方のソースを扱います。
こちらでは、シーサーブログにはないカテゴリーのツリー化をJavascriptを用いて公開しています。しかし、新デザインシステムに移行後、ソースが対応しておらず、コピペをしても機能しません。
そこで、ここではJavascriptの勉強を兼ねて、解読していきたいと思います。
いざ解読！
初心者が解読していく過程を記述していきます。
※ただし、ここでは個人的になんとなく理解していく過程を説明するものですので、プログラム慣れしている方、別の方法で理解されている方は、無意味なものかもしれません。
パート１
<SCRIPT language=”JavaScript”> <!–
//////////////////////////////////////////////////////////////////////////////////
tree(“カテゴリ”,”右or左”); //←自分のブログのカテゴリ名
//////////////////////////////////////////////////////////////////////////////////
function tree(title,position)
{
var category=new Array();
var subcategory=new Array();
category[0]=null; subcategory[0]=null;
if(position==”左”){
position=”links-left”;
}else if(position==”右”){
position=”links”;
}else{
return;
}
|
カテゴリ、サブカテゴリを分けるために配列を作っています。
右なのか左なのかでPositionを決めているようです。このPositionについて調べてみたところ、旧シーサーブログデザインでは意味があるのであって、新デザインでは意味がないようです。
パート2
| var tmp=document.getElementById(position).getElementsByTagName(‘div’);
for(var i=0;i<tmp.length;i++){
if(tmp[i].innerHTML==title) break;
}
if(i==tmp.length) return;
var target=tmp[i+1];
var tmp2=target.getElementsByTagName(‘a’);
for(var j=0;j<tmp2.length;j++){
var link=tmp2[j].innerHTML;
if(tmp2[j].innerHTML.indexOf(“＞”)==-1){
category[j+1]=”<a href=”+tmp2[j].getAttribute(‘href’)+”>”+ link+”</a>”;
subcategory[j+1]=null;
}else{
category[j+1]=link.substring(0,link.indexOf(“＞”));
subcategory[j+1]=”<a href=”+tmp2[j].getAttribute(‘href’)+”>”
+link.substring(link.indexOf(“＞”)+1,link.length)+”</a>”;
}
} |
document.getElementById()で<div>タグ以下のデータを取得してカテゴリータイトルを抽出、<a>以下のデータを取得してカテゴリーリストのデータを作成している様子がわかります。
ただし、新デザインではID要素が変更されており、この部分がうまく機能していない事がわかります。
パート3
| category[j+1]=null; subcategory[j+1]=null;
//出力
var tmpHTML=”<br>”;
for(i=1;i<(category.length-1);i++){
if(subcategory[i]==null){
tmpHTML+=(“◆ “+category[i]+”<br><br>”);
}else{
if(category[i]!=category[i-1]) tmpHTML+=(“◆ “+category[i]+”<br>”);
if(category[i]==category[i+1]){
tmpHTML+=(“├”+subcategory[i]+”<br>”);
}else{
tmpHTML+=(“└”+subcategory[i]+”<br><br>”);
}
}
}
target.innerHTML=tmpHTML;
}
// –>
</SCRIPT>
|
先ほど加工したカテゴリーのリストをHTMLの文にする作業をして、最終的にブログのカテゴリーリストにセットしている処理のように見えます。
最後に
構文部分で細かく書くと読みづらくなるので、if,forといった構文基礎知識部分についての説明はカットしました。
とりあえず、いきなりプログラムを書く前に、何か参考になるソースをまず読んで流れを把握してみてはいかがでしょうか？
