開発ブログ

ページメニュー

<< オシャレマスターのブログパーツ | main | Mashup Awards 4(マッシュアップアワード4)での反省点 >>

カレンダー

<< December 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>

  • 特定のIDを取得するブックマークレット
  • ブログの新着やランキングなど、ユーザのブログへのリンクが沢山あるページから、ユーザのIDだけ抜き取るブックマークレットを作ってみました。

    ブックマークレットって何ですか、という方のために、簡単に説明。
    通常、ブラウザのブックマークには「http」から始まるアドレスが登録されているのですが、ここにJavascriptの処理を記載することでその処理を実行するという技術です。登録の仕方は、はてなブックマークレットのページが詳しいので、そちらを参照ください。

    さて、ページにあるアドレスから特定の語句を抜き取る方法ですが、以下のように実装します。尚、今回はアメーバブログを例に書いていますが、他のサービスでも同様に考えてよいと思います。
    var n=0;var t=new Array()
    for(var i=0;i<document.links.length;i++){
    u=document.links[i].href;
    ar=u.split("/");
    if(c(ar[3])){
    t[n]=ar[3];n++
    }
    }
    document.write(t.join("<br />"));
    void(0);
    ソースコードを見やすくするために、適時改行をいれて書いてみます。最後のvoid(0)は、決まり文句みたいなもので、これを入れ忘れるとページ遷移がおきてしまうので、必ず記述して下さい。

    document.links.lengthが本文にあるリンクの数で、損際する分をforループで繰り返し、そのリンクのアドレスであるdocument.links[i].hrefを「/」で分割します。分割した値は配列に格納されます。例えば、「http://ameba.jp/nakano-neko」というアドレスを分割した場合は、以下のようになります。

    配列0番目→http:
    配列1番目→
    配列2番目→ameba.jp
    配列3番目→nakano-neko

    3番目を取得すれば、ユーザーIDがわかるわけです。

    アドレスによっては「http://nakano-neko.ameba.jp/」
    というケースもあります。この場合は、まず「/」で分割して2番目を取得、さらに取得した値を「.」で分割して、0番目を取得すればOK。この処理を配列tn番目に入れておきます。ループが終わったら、配列tjoinを使って改行コードで結合して、「document.write」で画面に表示させます。

    但し、このままだと全てのリンクに対して処理しようとしてしまいますので、アメーバブログの場合だと、プロフィールページの「http://profile.ameba.jp/ユーザID」、もしくはブログページの「http://ameblo.jp/ユーザID」だけを対象にするために、更に以下の処理を記述します。

    アドレスを分割する前に、そのアドレスが上記の条件を満たすかどうかを確認します。つまり、アドレスに「http://profile.ameba.jp/」「http://ameblo.jp/」を含むかどうか、という条件を追加すればいいというわけです。いろいろな方法がありますが、今回はindexOfという関数を使っています。これは、文字列変数.indexOf("指定文字")と記述すると、「文字列変数」の中に指定文字が含まれてなければ「-1」を、含まれていた場合は最初に登場する位置を返す、というもの。なので、アドレスの中に「http://profile.ameba.jp/」を含んでいない、という条件なら、以下のように記述します。
    if(u.indexOf("http://profile.ameba.jp/")==-1)){
    処理
    }
    今回は「含んでいない」ではないので、条件式は「==」(等しい)ではなく「!=」(等しくない)とします。
    また、条件は2つあり、AかBかどちらかを満たしていればよいというOR条件なので、2つの条件を||で繋ぎます。因みに、両方を満たしていればというAND条件であれば&&となります。

    以上を踏まえて、先ほどの「/」で分割する処理の前に以下のように条件を追加してみます。ちょっと見辛いけどご容赦を。
    if((u.indexOf("http://profile.ameba.jp/")!=-1) || (u.indexOf("http://ameblo.jp/")!=-1)){
    ar=u.split("/");
    if(c(ar[3])){
    t[n]=ar[3];n++
    }
    }
    配列tに入れて結合しなくても、文字列変数を用意してIDを連結し、最後に「document.write」で表示する手でもいいと思います。

    ところで、分割結果を配列にいれたのは、重複分を外す処理を入れたかったからです。上記の処理で、配列tに値を入れる前に関数cを実行し、その関数が「重複はない」という場合だけ、配列tに入れるような処理にします。
    t[n]=ar[3];n++
    の箇所が下記のようになります。
    if(c(ar[3])){
    t[n]=ar[3];n++
    }
    関数cは配列tをループさせ、配列tの中に渡された値と同一のものがあれば「false」、なければ「true」を返すようにしました。
    function c(s){
    rtn=true;
    for(var i=0;i<t.length;i++){
    if(s==t[i]){
    rtn=false;break
    }
    }
    return rtn;
    }
    配列tを用いず、文字列で結合して「indexOf」を使って確認する、というのもアリですね。

    最初に、戻り値用変数rtnを「true」に定義します。次にforループで、配列tの最大値である「t.length」までループさせます。ループ内では、渡された値である変数sと配列ti番目を比較して、同じであれば戻り値用変数rtnを「false」にしてループを抜けるように、break処理を記述します。重複がなければ、戻り値用変数rtnは最初に定義したように「true」のまま処理されます。

    以上をまとめて、もう一度ソースを掲載します。
    var t=new Array();var n=0;
    for(var i=0;i<document.links.length;i++){
    u=document.links[i].href;
    if((u.indexOf("http://profile.ameba.jp/")!=-1) || (u.indexOf("http://ameblo.jp/")!=-1)){
    ar=u.split("/");
    if(c(ar[3])){
    t[n]=ar[3];n++
    }
    }
    }
    document.write(t.join("<br />"));
    void(0);
    function c(s){
    rtn=true;
    for(var i=0;i<t.length;i++){
    if(s==t[i]){
    rtn=false;break
    }
    }
    return rtn;
    }
    最後に、ブックマークレット化のために上記のソースを一行にまとめます。「秀丸エディタ」などの高機能テキストエディタで、改行コードの「¥n」を「」(何もない文字)で置換するという処理をすれば早いです。

    最終的なソースはこちら。
    var t=new Array();n=0;for(var i=0;i<document.links.length;i++){u=document.links[i].href;if((u.indexOf("http://profile.ameba.jp/")!=-1) || (u.indexOf("http://ameblo.jp/")!=-1)){ar=u.split("/");if(c(ar[3])){t[n]=ar[3];n++}}}document.write(t.join("<br />"));void(0);function c(s){rtn=true;for(var i=0;i<t.length;i++){if(s==t[i]){rtn=false;break}}return rtn;}
    配布するときは、HTMLの「a」タグのhref属性に、Javascript:上記のソースコード、のようにすればOK。以下に記述例を掲載しておきます。
    <a href="Javascript:var t=new Array();n=0;for(var i=0;i<document.links.length;i++){u=document.links[i].href;if((u.indexOf("http://profile.ameba.jp/")!=-1) || (u.indexOf("http://ameblo.jp/")!=-1)){ar=u.split("/");if(c(ar[3])){t[n]=ar[3];n++}}}document.write(t.join("<br />"));void(0);function c(s){rtn=true;for(var i=0;i<t.length;i++){if(s==t[i]){rtn=false;break}}return rtn;}">ブックマークレットを追加するにはこちら</a>

    できたブックマークレットはこちらから登録して使うことができます。

    長くなりましたが、アメーバブログに限らずいろいろなサイトで利用できるように、ソースの解説をしながら書いてみました。業者の行う自動化はやりすぎだと思いますが、必要な情報を効果的に収集するのは、作業の効率化をはかる上で必要なことだと思います。こういった技術の利用は個人の裁量にお任せしますが、自分だけが幸せになるような使い方は、絶対に避けてくださいね

| 開発関連 | 12:22 | comments(0) | trackbacks(0) |


コメント

コメントする

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

http://blog.24th.jp/trackback/973509