TOP > スポンサー広告 > スポンサーサイト> ブログいぢり(カスタマイズ) > FC2ブログに関連記事の表示をする(関連エントリー) 2

スポンサーサイト

--.--.--(--:--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  

この記事の写真を大きなサイズ(原寸)で全部見る。
スポンサー広告 | トラックバック(-) | コメント(-) | [EDIT]

FC2ブログに関連記事の表示をする(関連エントリー) 2

2009.04.17(21:00)

全3回にわたる、「その1」でひととおり、「関連記事」の表示には成功した。 しかしながら、その1-3において提示した「現在の記事(エントリー)と、RSS内の広告はのぞきたい」というのが、できない。あと一息なだけなのにぃぃ。

ついカッとなって、google.feeds.FeedControlのイミテーションを作った、今では反省している。
(「ついカッとなって~」というWEB慣用句を使いたかっただけ。最近は見ないけど定着せず流行で終わったのかな。)

今回の内容は、ある程度javascriptが読める人向けのカスタマイズになります。 また、その1の記事内容の知識(?)を前提として書き進めます。


FeedControlが出力したものに対して動的に変更がかけられないのなら、 自分で任意に出力したるわ。っということで、出力ロジックを作成しました。 google.feeds.FeedControlを使わず、google.feeds.FeedでFeedControlのような出力をした、 というただそれだけ。 あ、描画モードはDRAW_MODE_TABBEDにのみ対応。DRAW_MODE_LINEARを指定しても駄目っす。

google.feeds.FeedでFeedControl

出力結果構成

元の出力結果は以下。

1-1.1
<DIV class=gfc-control>
    <DIV class=gfc-tabsArea>
        <DIV class=" gfc-tabHeader gfc-tabhActive">[フィードタイトル名]/*タグ:選択状態*/</DIV>
        <DIV class=" gfc-tabHeader gfc-tabhInactive">[フィードタイトル名]/*タグ:非選択状態*/</DIV>
        /*:(以降追加したaddFeedの分繰り返し)*/
    </DIV>
    <DIV class=gfc-resultsbox-visible>
        /*ひとつめのエントリ一覧*/
        <DIV class="gfc-resultsRoot gfc-tabData gfc-tabdActive">    /*エントリ一覧:表示状態*/
            /*▼ライン&タイトル*/
            <DIV class=gfc-resultsHeader>
                <DIV class=gfc-title>[フィードタイトル名/*display:none*/]</DIV>
            </DIV>
            /*▲ライン&タイトル*/  /*▼エントリリスト*/
            <DIV class=gfc-results>
                /*▼行内容*/
                <DIV class=gfc-result>
                    <DIV class=gf-result>
                        <DIV class=gf-title>
                            <A class=gf-title href="[リンク先]" target=[設定:setLinkTarget/*未設定時は_self*/]>[エントリタイトル]</A>
                        </DIV>
                        <DIV class=gf-author>by&nbsp;[エントリ筆者]</DIV>
                        <DIV class=gf-spacer>-</DIV>
                        <DIV class=gf-relativePublishedDate>[エントリ日時/*ex:2分前*/]</DIV>
                        <DIV class=gf-snippet>[エントリ概要]</DIV>
                    </DIV>
                </DIV>
                /*▲行内容*/
                /*:(【行内容】繰り返し)*/
            </DIV>
            /*▲エントリリスト*/
        </DIV>
        /*ふたつめのエントリ一覧*/
        <DIV class="gfc-resultsRoot gfc-tabData gfc-tabdInactive">  /*エントリ一覧:非表示状態*/
            /*(【ライン&タイトル】と同じ)*/
            /*(【エントリリスト】と同じ)*/
        </DIV>
        /*:(以降追加したaddFeedの分【エントリ一覧】繰り返し)*/
    </DIV>
</DIV>
→別画面で開く(javascript)

上記太字になっている部分を除いた状態が、FeedControlのイミテーション出力結果となります。 FedControlのイミテーション出力結果も一応以下に。

1-1.2
<DIV class=gfc-control>
    <DIV class=gfc-tabsArea>
        <DIV class="gfc-tabHeader gfc-tabhActive">[フィードタイトル名]/*タグ:選択状態*/</DIV>
        <DIV class="gfc-tabHeader gfc-tabhInactive">[フィードタイトル名]/*タグ:非選択状態*/</DIV>
        /*:(以降追加したaddFeedの分繰り返し)*/
    </DIV>
    /*ひとつめのエントリ一覧*/
    <DIV class="gfc-resultsRoot gfc-tabData gfc-tabdActive">    /*エントリ一覧:表示状態*/
        /*▼ライン*/
        <DIV class=gfc-resultsHeader>
            <DIV class=gfc-title></DIV>
        </DIV>
        /*▲ライン*/    /*▼エントリリスト*/
        <DIV class=gfc-results>
            /*▼行内容*/
            <DIV class=gfc-result>
                <A class=gf-title href="[リンク先]" target=[設定:setLinkTarget/*未設定時は_self*/]>[エントリタイトル]</A>
                </DIV>
            /*▲行内容*/
            /*:(【行内容】繰り返し)*/
        </DIV>
        /*▲エントリリスト*/
    </DIV>
    /*ふたつめのエントリ一覧*/
    <DIV class="gfc-resultsRoot gfc-tabData gfc-tabdInactive">  /*エントリ一覧:非表示状態*/
        <DIV class=gfc-resultsHeader>
            <DIV class=gfc-title></DIV>
        </DIV>
        /*(【ライン】と同じ)*/
        /*(【エントリリスト】と同じ)*/
    </DIV>
    /*:(以降追加したaddFeedの分【エントリ一覧】繰り返し)*/
</DIV>
→別画面で開く(javascript)

アクティブタブの部分は、もともとDRAW_MODE_LINEARの場合に表示されるものなので、 (DRAW_MODE_TABBED時はスタイルにて非表示となっている。)出力時点ではぶいちゃいました。
DIV要素が空なんて美しくない!という人は、この後の公開Script側を変更してください。 太字になっている、「概要」とか、著者名とかが必要なかたも、公開javascript(イミテーションクラス)側の 修正になるので、そういう人にはめんどうかも?

google.feeds.FeedControlからの移行

google.feeds.FeedControlの時の変更箇所は2点。

ひとつは、FeedControlクラスを使用している箇所を、今回のイミテーションクラスに変更します。

2-1.1
[変更前]
    var feedControl = new google.feeds.FeedControl();

[変更後]
    var imif = new imit_Feed();
    var feedControl = new imif.FeedControl();

二つ目の変更箇所は、イミテーションクラス本体の記述になります。

google.setOnLoadCallback(feeds_init);の記述より前に、この後公開するjavascriptを貼り付けます。 直接貼り付けもしくは、外部ファイルにして貼り付けてください。 なお、外部ファイル化する場合は、上記の関数が実行されるより前にロードされている必要があるので、できるだけページ読みこみの上部に記載してください。

スタイルに関しては、移行前と共通で使用できるはず。(1-1にて太字になっている要素へのスタイル設定は除く。) 万一、google側の仕様変更に伴いdefault.cssに変更があってうまく表示されない、 という場合は、「FC2ブログに関連記事の表示をする(関連エントリー) 1の2」で説明しているdefaultのCSSと各自カスタムしたCSSをマージして必要部分を適用させてください。

イミテーションクラス

関数などの名前がかぶっても被害が最小になるようにクラス構造になってます(クラスはそういう為に使うんじゃないと叱られそうですが。)。素人丸出しの作りだけど、そこらへんはいぢめないでね。動作の後半のほうが力尽き感があったりとかは、「しかたないなぁ、こいつぅ」とやさしい目で見守って改造してください。

3-1.1
var imit_Feed = function() {
    var _acttive_cn ={h:" gfc-tabhActive",d:" gfc-tabdActive"};
    var _inact_cn ={h:" gfc-tabhInactive",d:" gfc-tabdInactive"};
    var _linktgt = "_self";

    var Feed = function(url,tabname) {
        this.tabname = tabname;
        this.url = url;
        this.feed = new google.feeds.Feed(url);
        this.setNumEntries = function(num){  this.feed.setNumEntries(num);}
        this.load = function(fnc){  this.feed.load(fnc);}
    }

    this.FeedControl = function() {
        this.feeds=new Array;
        this.addFeed= function(url,tabname){  
            var feed = new Feed(url,tabname);
            this.feeds.push(feed);
        }
        this.setNumEntries = function(num){  
            for(i = 0; i < this.feeds.length; ++i){
                this.feeds[i].setNumEntries(num);
            }
        }
        this.setLinkTarget =function(linkTarget){_linktgt=linkTarget;}
        this.draw = function(targetObj,opt_options){/*opt_optionsは入り口だけ。機能せず。*/
            var mainBox;
            mainBox = CreateEl("div","gfc-control");
            var tabbox = CreateEl("div","gfc-tabsArea");
            mainBox.appendChild(tabbox);

            var switchValue={on:0,off:1};
            var switch_cn =[_acttive_cn,_inact_cn];
            var idxSwitch = switchValue.on;

            for(var i in this.feeds){
                if(i!=0) idxSwitch = switchValue.off;
                var h,d,ln;   /*hedder(tab),data,line,*/
                h=CreateEl("div","gfc-tabHeader");
                h.className =h.className + switch_cn[idxSwitch].h;
                h.appendChild(document.createTextNode(this.feeds[i].tabname));
                d=CreateEl("div","gfc-resultsRoot");
                d.className =d.className+" gfc-tabData";
                d.className =d.className + switch_cn[idxSwitch].d;
                ln=CreateEl("div","gfc-resultsHeader");
                ln.appendChild(CreateEl("div","gfc-title"));
                d.appendChild(ln);

                tabbox.appendChild(h);
                mainBox.appendChild(d);
                (function(x,y,z){h.onclick=function(){tabclick(x,y,z);};})(targetObj,h,d);
                (function(x,y){x.load(function(result){getResult(result,y);});})(this.feeds[i],d);

            }
            removeChild(targetObj);
            targetObj.appendChild(mainBox);
        }
    }

    function CreateEl(t,c){
        var x=document.createElement(t);
        x.className=c;
        return(x);
    }

    function removeChild(obj){
       if(document.getElementById && document.body.removeChild){
          var len = obj.childNodes.length;
          for(var i=0; ifunction pageAddr(){
        var href = location.href.toLowerCase();
        var ank = location.hash.toLowerCase();
        var se = location.search.toLowerCase();
        var tmp;
        tmp = href.replace(ank,"");
        tmp = tmp.replace(se,"");
        return tmp;
    }
    function dispLink(entry){
        a_href=entry.link.toLowerCase();
        if(entry.link){
        if(a_href == pageAddr()){
            return false;
        }else if(a_href.indexOf("overture.com",0)>=0){
            return false;
        }
        }else{return false;}
        return true;
    }
    function getResult(result,d) {
        if (!result.error) {
            var u,l,a;
            u =CreateEl("div","gfc-results");
            for (var i = 0; i < result.feed.entries.length; i++) {
                var entry = result.feed.entries[i];
                if (dispLink(entry)){
                    l=CreateEl("div","gfc-result");
                    a=CreateEl("a","gf-title");
                    a.href=entry.link;
                    a.target=_linktgt;
                    a.appendChild(document.createTextNode(entry.title));
                    l.appendChild(a);
                    u.appendChild(l);
                }
            }
            if(l) d.appendChild(u);
        }
    }
    function tabclick(t,h,d){
        var objects = t.getElementsByTagName("div");
        for(var i in objects){
            var m_obj = objects[i];
            if(m_obj.className)   {
            var m_clsN= m_obj.className;
                if(m_clsN.indexOf("gfc-tabHeader",0)>=0){
                    if(h==m_obj){
                        m_obj.className = m_clsN.replace(_inact_cn.h,_acttive_cn.h);
                    }else{
                        m_obj.className = m_clsN.replace(_acttive_cn.h,_inact_cn.h);
                    }
                }else if(m_clsN.indexOf("gfc-resultsRoot",0)>=0){
                    if(d==m_obj){
                        m_obj.className = m_clsN.replace(_inact_cn.d,_acttive_cn.d);
                    }else{
                        m_obj.className = m_clsN.replace(_acttive_cn.d,_inact_cn.d);
                    }
                }
            }
        }
    }
} 
→別画面で開く(javascript)

なにぶん出力工程が丸見えなので、タブに読み込み中のインジケータつけるなり、出力部分にクラスを追加して カスタマイズするなりご自由にどうぞ。

「現在の記事の判定」と「広告の判定」は、FC2ブログに関連記事の表示をする(関連エントリー) 1の3に記載しているのと同じです。注意点もありますので参照ください。
あのときFC2変数を避けたのは、外部ファイル化に備えてでした。必要であれば、本クラスにプロパティ追加して受け渡しをするか、このクラスに直に書き込みしてく3ださい。(FC2変数はテンプレート内か、プラグイン内にのみ有効です。)

もっといいの作ったしぃ、とかレスポンス改善したゼ、とかあれば教えてくださいませ。 未検証環境において、いけました!とか駄目でした、とか上記ソースに不具合(特にクロージャの使い方)とかありましたら 同様にご連絡いただけると助かります。

別サイトにて本ソース紹介においては、春うららかな1日をつぶしたので(この一連の記事書くほうが時間かかっとる;)、本記事の紹介など何か報われると私の心が癒されます。

さぁ、もってけ泥棒!返品不可♪


-検証環境-
OS:XP(SP3)
ブラウザ:IE6,IE7,FireFox3.0
(OS:Vista 7 ブラウザ:Operaやルナとかちょろめとか求む検証者)

(お断り:FC2ならびにGoogle AJAX Feed APIも仕様変更の可能性があります。)


~広告に関して~
今回RSSを利用して関連記事表示するなかで、広告削除を行っていますが、RSS本体から広告を消すわけではありません。 RSSは各ユーザがリーダを通してみるものであることを前提にしていると思います。
(補:[公式マニュアル[RSS] ブログのRSS>「RSS」は何に使うもの?]で「RSSリーダーに登録しておけば、そのページの更新を、RSSリーダーが定期的に取得してくるようになるため」と説明していることから)

(この部分はRSS配信元が挿入している広告ですよ、ともうちょっと読み手にわかるよう工夫していただけると助かるんだけどな。)

あからさまに誤誘引を狙ってるかのような表示になっちゃってるし、自ブログ内でRSSの広告を削除することは問題ないと判断しました。利用においては再度各個人にて判断ください。

  

この記事の写真を大きなサイズ(原寸)で全部見る。
子猫子猫子猫[猫カフェ:ねこの部屋あまえんぼう] | | 見返り美人


◆新着・関連記事
Loading...(Javascript)
コメント
コメントの投稿












管理者にだけ表示を許可する
トラックバック
トラックバックURL:
http://cat2neko2cafe2.blog102.fc2.com/tb.php/103-1ff81da8

[PR]
エコキッチンさんのランキングベスト3にはいるシリコンカップカバー。 猫ぱんちさんでみてすっごい気になってました。お値段も、手ごろ。

【シリコンカバー】MOM Kitchen(マムキッチン) シリコン製カップカバー

雑貨屋さんが好きなので、ここのサイトは楽しい。 私の勘所をよく知っていらっしゃる(違)欲しいのいっぱい出てくる。 料理しないくせにキッチン用品欲しい~。プレゼントにも最適な商品がいっぱいです。
[エコキッチン]


子猫子猫子猫[猫カフェ:ねこの部屋あまえんぼう] | | 見返り美人
プロフィール
双葉そら

Author:双葉そら

ひとつきに一度は猫かふぇに行かなければ、猫欠乏症及びもっふもふ禁断症状に陥ります。

猫カフェにいる人々をみてるのも楽しかったりします。

普段はSE関連のお仕事。
WEBやデザイン系は苦手です。
配色って何?おいしいの?

本サイトにて、癒しと、猫カフェの認知&"布教"の一端を担えれば最高です。

肉球礼賛 ビバ肉球


カテゴリ
最近の記事
猫喫茶
ねこかふぇリンク。

*猫カフェ情報猫カフェ一覧(自内)


肉球 マウスパッド 【ねこきゅう マウスパッド】 [マウスパッド にくきゅう 猫 ネコ]肉球 マウスパッド
 ぷにっぷにっ!

*猫カフェブログ(自内)


当サイトへのリンクはご自由に。
「猫とカフェオレ、ときどき仕事」バナー

お気に入り

*猫カフェブログ(自内)
店舗ブログではなく、一般の人の猫カフェブログを集めてみました。

*ネコキャバではない。
東京の猫カフェ【ねこのみせ】ブログ。店内の徒然にとどまらず、開店の原点エピソードや、経営者視点からの猫カフェ動向の感想だったり読み応えあり。(→移転前)

*関西 猫 カフェめぐりの日々
→更新終了。いままで素敵な写真で楽しませてくださりありがとうございました!!
主に関西圏猫カフェのにゃんこ写真が盛りだくさん。 やさしい表情のにゃんこから、アクロバティックな姿まで生き生きした写真は必見。

*赤ソマ狂の詩
旧題「coco壱!」。飼い猫coco(ソマリ)ちゃんのブログ。ブリーダさんの頃から見てるので 個人的に愛着が強いのですが、ソマリ好きさんも是非。
赤ソマ狂の詩バナー

*這いつくばって猫に近づけ
猫写真家、荻窪氏が書く猫の撮影といろんなデジカメのレビュー。

*【実録】隠れ?ヲタギャルの日常【4コマ】
イラストレータさんの4コマブログ。わからないネタもあるかもしれませんが、 猫漫画は秀逸。
「08冬コミ参加おめでとうございます」 ←この意味が分かる人なら猫ネタ以外でも全部面白いとおもいます。
【実録】隠れ?ヲタギャルの日常【4コマ】バナー

*ミシュニャン
タイトルは、レストランガイドミシュランをもじったもの。世界をまたにかけた猫探訪録。

*猫の肉球が素材-ダ・ジ・ポン
猫モチーフのフリー素材。めっさかわいくて、全部散りばめたい衝動に駆られます。

[tag cloud]
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。