livedoor
Javascriptを使ったLivedoorブログの改造
- Date :
- 2008年10月31日
- Category :
- Computer
なんかこのブログの細かいところがちょっと変わったなって思う方いません?
リンクを踏んだら同じページに飛んで
そこからリンク先に飛ぶだとか，動画の表示とか．．
実はこれらはJavascriptを使ってやってます．
変更したところは以下の点です．
1．ブログ記事のリンクをすべてスクリプトで置換
2．ブログ外部へのリンクは一旦リダイレクトページに飛ばしてから外部ページにジャンプ
3．画像の表示をテンプレ化
4．ニコニコ動画の表示もIframeタグは使わずテンプレ化
5．ボカロの発売されてるCDをランダムに表示するボックスを追加
まず1なんですけど
ブログの記事に<span id="置換ID">a href="URL"<リンク名></a> </span>で書き込んでおくと
リンク名
URL
に置換されます．
また，着うたページへのリンクは
携帯電話向けのリンクを貼っておくと指定されたIDを元にPC向けのニコニコ市場へのリンクを作成して置換してくれます．
なんでこういうことするのかというと以下の理由があります．
A．タイトルの下にリンクURLが書かれるといったリンクのテンプレが作れる．
B．モバイルとPCのページの区別が可能になる．
livedoorブログにはモバイルとPC向けに同じ内容の記事を載せてしまうという欠点があります．
明らかにPC向けのリンクなのにモバイルでもそのリンクを表示してしまうと意味がありません．逆もしかりです．
モバイルだと確実にスクリプトが実行されませんから，記事の内容が置換されず元のリンクが表示されます．
最初にモバイル向けのリンクを貼っておきスクリプトでPC向けのリンクに置換させるようにするとモバイルにはモバイル向けリンク，PCにはPC向けリンクを表示されるようになり，この問題が解決できるというわけです．
以下のスクリプトを書いておくとページ読み込み時に指定されたIDを持つspanタグで囲まれた部分を関数名で定義した形に置き換えてくれるようになります．
window.onload = function(){
var elements=document.getElementsByTagName("span");
for (var i=0; i
if (elements[i].id == "ＩＤ") { elements[i].innerHTML = 関数名(elements[i]); }
．
．
．
}
}
そして各関数は以下のように読み込んだ要素の内容を判別し新しい内容に書き直して値を返していることがわかります．
function hogehoge(e) {
var uri = e.firstChild.getAttribute("href");
var title = e.firstChild.innerHTML;
var targettitle = title;
var targetlink = "http://mathru.net/redirect/?t="+encodeURL(title)+"&to="+encodeURL(uri);
return (targettitle+'<br /><a href="'+targetlink+'" target="_blank">'+uri+'</a>');
}
次に2についてですが
なぜ一旦リダイレクトページに飛ばす必要があるのかということです．
答えをまず言うとアクセス解析をするためです．
僕はアクセス解析プログラムとして以下のGoogle Analyticsを使っています．
Google Analytics
この解析プログラムの凄いところはリンク元のURLなどの外部からやってきたユーザのデータだけではなく
ユーザが内部でどのページを見てどのページで見るのをやめたかなんていうユーザの内部動向が事細かにわかります．
ですが，当然データ収集スクリプトを貼っているページでないとデータが収集されませんですので，内部でのユーザの動向はわかるのですが，どのリンクをクリックして外部ページに出て行ったのかということがわかりません．(恐らくこのユーザの内部動向は参照URLを元に解析されたものでしょうからスクリプトを設置していない外部サイトは当然集計の対象にならないのです)
そこでリダイレクトページの登場というわけです．
このリダイレクトページにデータ収集スクリプトを貼っておくことで，ユーザがどのリンクをクリックしてこのリダイレクトページに飛んできたのかがわかります．
そのため，ユーザが何処から来てそして何処へ行くのかという情報がすべてわかってしまうわけです．
そして解析したデータを元にユーザの需要に合ったサイトを作っていくというわけです．
とはいえ，このサイトに来てくれる方はほとんどノーリファラ(つまり外部のページからのリンクを辿ってきたわけじゃなく，お気に入りとかURLの直接入力とか)でしたからあまり意味はなかったんですが，，，
最後に345についてです
これもほとんど1で述べた理由と被ってしまいますが5のランダムにボカロCDを表示するってのはいろいろ発展性がありそうなネタですね．
基本Javascriptでなんでもできますから面白いネタがあったら随時更新していこうと思います．
リンクを踏んだら同じページに飛んで
そこからリンク先に飛ぶだとか，動画の表示とか．．
実はこれらはJavascriptを使ってやってます．
変更したところは以下の点です．
1．ブログ記事のリンクをすべてスクリプトで置換
2．ブログ外部へのリンクは一旦リダイレクトページに飛ばしてから外部ページにジャンプ
3．画像の表示をテンプレ化
4．ニコニコ動画の表示もIframeタグは使わずテンプレ化
5．ボカロの発売されてるCDをランダムに表示するボックスを追加
まず1なんですけど
ブログの記事に<span id="置換ID">a href="URL"<リンク名></a> </span>で書き込んでおくと
リンク名
URL
に置換されます．
また，着うたページへのリンクは
携帯電話向けのリンクを貼っておくと指定されたIDを元にPC向けのニコニコ市場へのリンクを作成して置換してくれます．
なんでこういうことするのかというと以下の理由があります．
A．タイトルの下にリンクURLが書かれるといったリンクのテンプレが作れる．
B．モバイルとPCのページの区別が可能になる．
livedoorブログにはモバイルとPC向けに同じ内容の記事を載せてしまうという欠点があります．
明らかにPC向けのリンクなのにモバイルでもそのリンクを表示してしまうと意味がありません．逆もしかりです．
モバイルだと確実にスクリプトが実行されませんから，記事の内容が置換されず元のリンクが表示されます．
最初にモバイル向けのリンクを貼っておきスクリプトでPC向けのリンクに置換させるようにするとモバイルにはモバイル向けリンク，PCにはPC向けリンクを表示されるようになり，この問題が解決できるというわけです．
以下のスクリプトを書いておくとページ読み込み時に指定されたIDを持つspanタグで囲まれた部分を関数名で定義した形に置き換えてくれるようになります．
window.onload = function(){
var elements=document.getElementsByTagName("span");
for (var i=0; i
．
．
．
}
}
そして各関数は以下のように読み込んだ要素の内容を判別し新しい内容に書き直して値を返していることがわかります．
function hogehoge(e) {
var uri = e.firstChild.getAttribute("href");
var title = e.firstChild.innerHTML;
var targettitle = title;
var targetlink = "http://mathru.net/redirect/?t="+encodeURL(title)+"&to="+encodeURL(uri);
return (targettitle+'<br /><a href="'+targetlink+'" target="_blank">'+uri+'</a>');
}
次に2についてですが
なぜ一旦リダイレクトページに飛ばす必要があるのかということです．
答えをまず言うとアクセス解析をするためです．
僕はアクセス解析プログラムとして以下のGoogle Analyticsを使っています．
Google Analytics
この解析プログラムの凄いところはリンク元のURLなどの外部からやってきたユーザのデータだけではなく
ユーザが内部でどのページを見てどのページで見るのをやめたかなんていうユーザの内部動向が事細かにわかります．
ですが，当然データ収集スクリプトを貼っているページでないとデータが収集されませんですので，内部でのユーザの動向はわかるのですが，どのリンクをクリックして外部ページに出て行ったのかということがわかりません．(恐らくこのユーザの内部動向は参照URLを元に解析されたものでしょうからスクリプトを設置していない外部サイトは当然集計の対象にならないのです)
そこでリダイレクトページの登場というわけです．
このリダイレクトページにデータ収集スクリプトを貼っておくことで，ユーザがどのリンクをクリックしてこのリダイレクトページに飛んできたのかがわかります．
そのため，ユーザが何処から来てそして何処へ行くのかという情報がすべてわかってしまうわけです．
そして解析したデータを元にユーザの需要に合ったサイトを作っていくというわけです．
とはいえ，このサイトに来てくれる方はほとんどノーリファラ(つまり外部のページからのリンクを辿ってきたわけじゃなく，お気に入りとかURLの直接入力とか)でしたからあまり意味はなかったんですが，，，
最後に345についてです
これもほとんど1で述べた理由と被ってしまいますが5のランダムにボカロCDを表示するってのはいろいろ発展性がありそうなネタですね．
基本Javascriptでなんでもできますから面白いネタがあったら随時更新していこうと思います．
