12-09.net
>> TOPへ戻る

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



Archive for the ‘google’ 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:

ウェブ学会まとめ

no comment

昨日行われたWeb学会に行ってきました。
せっかくなので、超ざっくりレポなど。

Webサイトによると、

【第一回ウェブ学会シンポジウム】
開催日時:2009年12月7日(月)9:45~18:10
場所 :東京大学 本郷キャンパス 安田講堂
主催:ウェブ学会準備委員会
「本シンポジウムは、学術に軸足をおいた相互交流の機会を提供し、世界に影響を与えるウェブ研究・ウェブビジネスを継続的に生み出す場となることを目的とします。」

とのこと。
業界挙げて情報交流を行って、みんなで盛り上げていきましょう、という意図がそこかしこから読み取れます。うん、まあ良いことです。


会自体は、

  • セッション1:ウェブとコラボレーション
  • セッション2:ウェブと政治
  • セッション3:ウェブと科学
の3部構成になっていて、各セッションの頭に基調講演が入る、という流れです。

ぼくが現地に着いたのは、会が始まって1時間程すぎたところで、すでにセッション1の最終発表者である野口 祐子(国立情報学研究所 准教授、弁護士) さんの公演途中でした。
以下、各発表者と雑感を書き散らします。(めちゃくちゃ長くなったので、本ブログTOPページから来られた方は、↓↓の”Read the rest of this entry »”リンクをクリックして続きを読んで下さい)


Read the rest of this entry »


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

Written by poissonvolant

12月 10th, 2009 at 2:50 am

>> コメントをどうぞ

Posted in つぶやき,レビュー

Tagged with , ,

Trackback URL:

GoogleのIME 「Google日本語入力」を使ってみた

no comment

最近OSを作ってたりするGoogleから、本日、日本語入力アプリケーションがリリースされました。


早速インストールしてみたのですが、これがなかなか良さげです。
とにかく動作がキビキビしているのが最高。さらに、space keyを押さずともキーボードの入力に応じてリアルタイムでsuggestされる変換候補、など、少なくともWindows標準のMS-IMEよりは百倍イケてる感じです。

  • 【ステキ変換】
    「きのう」「きょう」「おととい」→「2009/12/02」「2009/12/03」「2009/12/01」

  • 【とほほsuggest】
    「つくって」→「つくってたんけんシリーズ」
    「使ってみた」→「使ってみたいイキでイナセな江戸ことば」
    「やれば」→「ヤレばできる」
    「いいじゃん」→「いいじゃんネット」
    「おもえば」→「思えば遠くへ来たもんだ」
    「ああい」→「ああ言えばこう言う」
    「はーい」→「ハーイあっこです」

上記のように、一部のsuggest機能はなかなか脱力感溢れるものとなっておりますが、Google Japan Blog

Google 日本語入力は桁違いの語彙力を持っています。Web から機械的・自動的に辞書を生成することで、人手ではカバーしきれないような、新語、専門用語、芸能人の名前などを網羅的に収録しています。高い変換精度を実現するために、Web 上の大量のデータから統計的言語モデルを構築し、変換エンジンを構成しています。現在の Web のありのままを反映したインプットメソッドと言えます (この辞書および統計的言語モデルの作成は Google の大規模分散処理システム MapReduce を用いて、数千台規模の計算機クラスタを使って行っています)。さらに、強力なサジェスト機能によりこれらの大量の単語を少ないキー数で入力することが出来ます。


とある通り、膨大なWebインデックスデータと語句統計ナレッジによって自動生成→学習していくってことでしょうから、これは期待大と言って良いでしょう。(と書いてる傍から学習始めてやがる・・・)

何より、本当に軽快に動きます。
この快適さにやられて、テスト導入から10分も経たないうちにMyPCのデフォルトIEMに決定です。
Google Japanもなかなかやるじゃん。


ところで、最近ATOK使ってないけど、ATOKと比べてどうなんだろうか。


【関連Clip】
グーグル、日本語入力ソフトのベータ版を公開(CNET)
Google、高い変換精度と圧倒的な辞書を実現した日本語入力ソフト「Google 日本語入力」を公開(GIGAZINE)
Google日本語入力、気に入った!(IDEA*IDEA)
MS-IMEで登録した単語をGoogle日本語入力に引き継ぐ方法(IDEA*IDEA)
Googleが日本語入力ソフトウェアをリリース!(GIZMODO Japan)
「Google 日本語入力」はATOKやMS-IMEを超えることはできるのか、実際に使って実用に耐えるかどうか試してみた(GIGAZINE)


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

Written by poissonvolant

12月 3rd, 2009 at 11:39 am

>> コメントをどうぞ

Posted in ナレッジ,レビュー

Tagged with

Trackback URL:

( ゚∀゚)彡 おっぱい!おっぱい!

no comment

このエントリには、以前「台湾の女性ニュースキャスターの露出がすごい」的なネタを書いていたのですが、Google様より、

アダルト/テキストによる描写: Google のプログラム ポリシーに記載されているとおり、AdSense サイト運営者様がアダルトまたは成人向けコンテンツを含むページに Google 広告を掲載することは許可しておりません。これには、テキストでの性描写も含まれます。このポリシーの詳細については、ヘルプセンターの次の URL をご覧ください。

対処法: 72 時間以内に必要な修正をすべて行ってください。

上記の時間内に違反が修正された場合、広告配信に影響が及ぶことはありません。修正が行われない場合や、審査中に他のポリシー違反が見つかった場合は、サイトへの広告配信が停止されます。


との警告が届いたので、削除しました。

しかし、どう見たらウチのサイトがアダルトコンテンツやってるように見えるんだ?
まったくもって、殿様商売を超えた王様商売だよなあ・・・


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

Written by poissonvolant

5月 13th, 2008 at 7:34 pm

>> コメントをどうぞ

Posted in クリップ

Tagged with , ,

Trackback URL:

遂にGoogleが海の中まで到達しようとしてるみたいです

no comment


Google Earthで地上を把握し、Google MarsGoogle Moonで他の惑星を掌握し、Google Skyで偉大なる大宇宙までも整理しようとするgoogleが、遂に海の中までさらけ出そうとしているようです。

一民間企業がどうしてここまでできるのか、ちょっとぼくの理解の範疇を超えてます・・・

ところで、日常に役立つGoogleの地域系サービスと言えば何と言ってもGoogleマップ。
使い方をちょっと覚えれば、更に便利になるって知ってましたか?
以下Googleマップの便利Tipsまとめ。


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

Written by poissonvolant

5月 1st, 2008 at 11:56 am

>> コメントをどうぞ

Posted in クリップ

Tagged with , ,

Trackback URL: