12-09.net
>> TOPへ戻る

12-09.net :三十路の会社員が日々の仕事と家庭と趣味と子育てに追われまくるブログ



Archive for the ‘Javascript’ tag

Google AJAX Feed APIの実装メモ

no comment


久しぶりにエセWebデザイナーモード。


スパイス屋のサイトオフィシャルブログの最新記事を自動で表示させたくて、RSS Feedをautomaticに引っ張ってくるjqueryプラグインを探したりしてたのですが、Webに転がってるものの多くは、ドメインを超えて引っ張ってこれなかったり、フィードの種類やバージョンに制限があったりと意外に使いにくく、汎用性や手軽さ等々鑑みて、Google AJAX Feed APIを利用するのが良かろうという結論になり。


最終的には、Javascriptを自分で組み立てる必要に迫られてしまい、大して手軽ではなかったのですが、何とかやり終えたのでメモを残しておきます。


ちなみに、全然Javascriptの説明にはなっていません。(ぼくがど素人なため・・・)


—–
【MY要件】

・他ドメインのブログ最新記事を、サイト内の一部エリアに表示させたい。
・表示は自動更新。
・件数は新着順に5件。
・内容は「エントリタイトル+リンクURL(タイトルをリンクに)」
・見た目が自在にCSSで調整できるように。




【Google AJAX Feed API 実装メモ】

  1. こちらのページからGoogle APIのAPI keyを取得。

  2. こちらのサイトを参考に、外部JSファイルを作成。

    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
    
    google.load("feeds", "1");
     
          function initialize() {
    		var feed = new google.feeds.Feed("フィードURL");
    		feed.setNumEntries(5);
    		feed.load(dispfeed);
     
    		function dispfeed(result){
    		if (!result.error) {
    		var container = document.getElementById("feed");
    		var htmlstr = "";
    		for (var i = 0; i < result.feed.entries.length; i++) {
    		var entry = result.feed.entries[i];
     
    		htmlstr += '<div class="任意のCSSクラス">'
    		htmlstr += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a>';
    		htmlstr += "</div>"
    		}
     
    		container.innerHTML = htmlstr;
    		}else{
    		alert(result.error.code + ":" + result.error.message);
     
              }
            }
          }
    google.setOnLoadCallback(initialize);



  3. HTMLファイルのヘッダに、下記を記述してJS呼び出し。「API Keyを入力」の箇所には、1で取得したkeyをコピペ。
    ※この場合は「blogfeed.js」という外部JSファイル名。

    1
    2
    
    <script type="text/javascript" src="http://www.google.com/jsapi?key=API Keyを入力"></script>
    <script src="js/blogfeed.js" type="text/javascript"></script>




  4. フィードを表示させたいHTML内の場所に下記を記述。

    1
    
    <div id="feed"></div>



  5. CSSでフィード表示箇所の見た目を調整。

  6. 以上。


    以下、スクリプトの意味。


    下記が「前置き」みたいなもんです。
    ・「google.feeds.Feed」の後ろに、対象とするフィードのURLを指定。
    ・「feed.setNumEntries」で新着何件を引っ張ってくるか指定。
    ・「feed.load(dispfeed);」は実際の表示を指定。(このママでOK)

    1
    2
    3
    4
    5
    6
    
    google.load("feeds", "1");
     
          function initialize() {
    		var feed = new google.feeds.Feed("フィードURL");
    		feed.setNumEntries(5);
    		feed.load(dispfeed);



    この辺りは、表示の概要を記述している箇所だと思います。

    1
    2
    3
    4
    5
    6
    
    		function dispfeed(result){
    		if (!result.error) {
    		var container = document.getElementById("feed");
    		var htmlstr = "";
    		for (var i = 0; i < result.feed.entries.length; i++) {
    		var entry = result.feed.entries[i];



    ここで当該箇所の見た目をinnerHTMLで指定。
    見た目はCSSを適当に記述して指定。

    1
    2
    3
    4
    
    		htmlstr += '<div class="任意のCSSクラス">'
    		htmlstr += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a>';
    		htmlstr += "</div>"
    		}



    この辺りではinnerHTMLの定義付けとエラー処理を記述。

    1
    2
    3
    
    		container.innerHTML = htmlstr;
    		}else{
    		alert(result.error.code + ":" + result.error.message);



    ここは、閉じタグと、あとは「敬具」みたいなもんですな。

    1
    2
    3
    4
    
              }
            }
          }
    google.setOnLoadCallback(initialize);



    我ながらどんな説明だ、と思いつつ、これ以上分からないので仕方ないのです。


    で、なんでわざわざ書いているかと言うと、Google AJAX Feed APIのデフォルトコードや、様々な参考サイト見ても、自分のサイト要件にぴったり合致した記述が見つからなかったんですよね。
    なので、色々調べて試した結果としての「自分の要件にぴったり合致した記述」を、メモしておきたいなと思いました。
    というか、メモしとかないと次見た時に完全に忘れちゃう・・・


    以上、完全に自分用のエントリでした。


    そうそう、完成したパーツですが、下記赤枠内のような形で割と綺麗に収まりました。良かった。







    なんか間違ったことしてたら、コメント欄にてご指摘下さいませ。。。




このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

Written by poissonvolant

8月 23rd, 2011 at 10:34 pm

>> コメントをどうぞ

Posted in ナレッジ

Tagged with , ,

Trackback URL:

jQuery・スライドショー

no comment

色々悩んだスパイス屋さんのキービジュアルですが、最終的に下記のjQueryプラグインに落ち着きました。

jQuery Slideshow Explained


設置方法はたいして難しくないです。

カスタマイズも、htmlとcssを見れば大体分かります。
全体のサイズ変更、padding調整、タブメニューのサイズと画像の変更、くらい。

割とサクサク動くし、悪くないんじゃないでしょうか。

ソースダウンロードから実装完了までの作業時間は、2-30分程度。

キービジュアルに簡単に動きをつけたい人、お勧めですよん。



このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

Written by poissonvolant

11月 16th, 2010 at 1:31 am

>> コメントをどうぞ

Posted in ナレッジ

Tagged with , ,

Trackback URL:

【備忘録】SWFObjectを使ってFLASHを読み込む方法

no comment

やんごとなき理由で、FLASHが表示できないプラットフォームにて代替画像を表示する必要に迫られました。

色々調べてみると、SWFObjectというJavascriptを使えば実現できる模様。
しかも代替画像の表示だけでなく、コードが驚くほどシンプルでスマート。
これはいい。

SWFObject /Google Code


備忘録代わりの本エントリですが、わざわざ詳しく語る必要もないくらいメジャーな方法らしく、説明しているサイトも山のようにあります。
が、マニュアルを訳しつつ解説してくれているこのサイトが一番分かりやすかったです。

一応方法を記述しておきます。主に自分のために。

◆<head>内に下記を記述。

1
<script type="text/javascript" src="swfobject.js"></script>


上記でJavascriptを呼び出して、そのすぐ下に、下記のFLASH呼び出しスクリプトを書くだけ。

1
2
3
4
5
6
7
<script type="text/javascript">
var flashvars = {};
var params = {wmode: "opaque"};
var attributes = {};
swfobject.embedSWF("ファイル名.swf", "呼び出したい部分のid", "width", "height",
"9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>


複数のFLASHを設置したい場合は、「swfobject.embedSWF」以下の部分をFLASHの数だけ記述すればOK。
「9.0.0」は再生に必要なFLASHプレイヤーのバージョンです。
widthとheghtには「px」は不要。
「var params = {wmode: “opaque”};」は、プルダウンメニューと同居する時に下に潜らせないためのおまじない。

プルダウンがない場合には、ソースはもっとシンプルになります。
呼び出しのスクリプトと合わせても、

1
2
3
4
5
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("ファイル名.swf", "呼び出したい部分のid", "width", "height",
"9.0.0","expressInstall.swf");
</script>


となります。なんてスマート。

ここまで<head>。


次に<body>内のFLASHを設置したい場所に、

1
2
3
<div id="Javascript内に対応したid">
<p>代替画像のパス</p>
</div>


以上。

うーん、スマート。



このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

Written by poissonvolant

11月 4th, 2010 at 10:47 pm

>> コメントをどうぞ

Posted in ナレッジ

Tagged with , , ,

Trackback URL: