2010年9月アーカイブ

ご無沙汰です。

暑かった夏もようやく終わってくれたようで、ここ数日はクーラーをつけづに仕事をしています。

先週から仕事仲間と一緒にサイト制作＆一部WordPressの組み込み＋携帯サイトの
導入作業をしています。
今日は『サイトトップページにWPの記事一覧を表示する』の一つの方法メモ。

★今回は「Aｶﾃｺﾞﾘｰ」「Bｶﾃｺﾞﾘｰ」の記事をそれぞれ独立して構築したかったのでWPは2つ設置。
　Ver3.0からMTのようなマルチブログ化も可能になりましたが、
　今回は『Aｶﾃｺﾞﾘｰ』だけの検索フォームが必須項目だったので、ちょっとアナログな方法で
　こうちくすることに・・・しました！

逆に『Bｶﾃｺﾞﾘｰ』のみすべての記事をWebサイトのトップページに表示したかったので、
今回は「RSSを表示させる」方法をとることにしました。

仕掛けは「Google Ajax Feed API」を利用すること。
今回はこちらで紹介している方法を参考にさせてもらいました。

jQueryでRSSを取得しリストで表示

＜HTML＞

//head内にjQueryを
<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
//body内にリスト表示させる場所を作ってあげる
<div id="list-01">
<!-- ここにフィードの内容が表示される -->
</div>


＜JavaScript＞

$(function(){
        //RSSが同じドメインにある場合

        $.ajax({
            //同じドメインにあるXMLファイルのある場所を指定してあげる
            url: 'rss.xml',
            //非同期通信
            async: true,
            //通信結果をキャッシュしない
            cache: false,
            dataType: "xml",
            success: function(xml){
                $(xml).find('item').each(function(i){
                    if (i == 10) {
                        return false;
                    }
                    var title = $(this).find('title').text();
                    var url = $(this).find('link').text();
                    var date = $(this).find('pubDate').text();
                    //月表示を数字表示に変換する
                    date = dateChanger(date);
                    //idがlist-01の箇所にリストで書き出す
                    $('#list-01').append('<li>' + date + '<a href="' + url + '">' + title + '<\/a><\/li>');
                });
                //idがlist-01にあるliをolで括る
                $('#list-01 li').wrapAll('<ol><\/ol>');
            },
            //エラー表示
            error: function(xml){
                $('#list-01').append('<p>Feedの読み込みに失敗しちゃいました。<\/p>');
            }
        });
        //月表示を数字表示に変換する
        var dateChanger = function(str){
            var mydate = new Date(str);
            yy = mydate.getFullYear();
            mm = mydate.getMonth() + 1;
            dd = mydate.getDate();
            if (mm < 10) { mm = "0" + mm; }
            if (dd < 10) { dd = "0" + dd; }
            datestr = yy + "年" + mm + "月" + dd + "日";
            return datestr;
        };
});

これを実際にトップページで読み込ませて設置。
今回は日付の表示はいらないので（タイトルだけでOK）
日付に関する表示はCUTしました。

今回は『同じドメイン内にRSSが設置されていることが前提』の方法です。

違うドメインからのRSSを引っ張ってくるやり方はまた別で。

あ、いつの間にか9月に突入しています。

今年の夏は、猛暑・猛暑のなか、お陰様でお仕事を頂き
バタバタと過ごしていました。
夏休みもとれぬまま・・・だったので、
9月末には久しぶりに日本脱出！旅行に行く予定です♪
（またお休みのご報告などは後日ということで）

というわけで、この暑い夏、マシンが暴走してしまい
一度初期化する羽目になったGORIが、
「またこんなことになったら困るなぁ！」とメモするサイト。

■Webサイトのサイズを測るルーラー　Desktop Ruler

デザイナーさん、クリエイターさんの好みによって
いろいろつかっていると思いますが、
わたしはこれが一番気に入っています。

「Desktop Ruler」はAdobe AIRで作ったデスクトップ定規ツールです。
ベースとなる定規の上にもう一段小型の定規が重なっていて、
座標を簡単に調べることができます。
もちろん 定規の伸縮や縦横回転も簡単。

Adobe AIR で作られているので、インストール時には
Adobe AIRがPCにはいっていることが必須になります。