守破離でいこう!!: 2008/02

2008/02/29

Google Chart API を使ってみる

しばらく前に、Google Chart API が公開されたのですが、後れ馳せながら使ってみました。

Google Chart APIは、Google Static Maps APIと同じようにグラフを画像（PNGフォーマット）で返してくれるAPIです。（Google Chart APIが先ですが・・）

Google Chart API - Hello World
http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=400x200&chl=Hello|World

Google Chart API のURLは、次の形式になっていて、parameters部分は以下のようになっています。※グラフの種類によって違ってきます。

http://chart.apis.google.com/chart?parameters

chs: グラフのサイズ; e.g. 400x250; ※最大値は1000x1000
chd: グラフのデータ; e.g. s:helloWorld; ※データをエンコードした文字列を設定します
cht: グラフの種類; e.g. lc
chxt: 軸ラベルの表示; e.g. x,y
chxl: 軸ラベル; e.g. 0:|Mar|Apr|May|June|July|1:||50+Kb

上記の例だと、このようなグラフになります。

http://chart.apis.google.com/chart?chs=400x250&chd=s:helloWorld&cht=lc&chxt=x,y&chxl=0:|Mar|Apr|May|June|July|1:||50+Kb

表示できるグラフの種類は、円・棒・折れ線グラフはもちろん、面グラフや散布図といったものまで表示でき、大概のグラフは表示できそうです。

これまでグラフを貼り付けるのに、Excelで作成したものを貼り付けたり、Flashでやっていたものが、簡単に貼り付けられるようになったのは素晴らしいと思います。ただ、今のところ（2008/02/29現在）、ラベルに日本語はうまく表示できないようなのがちょっと残念。

なお、利用にあたっては、ユーザあたり50,000リクエスト/日（query limit of 50,000 queries per user per day）という制限があります。

2008/02/28

Google Static Maps APIを使ってみる

先日、より簡単にGoogleマップを表示できるようになる、Google Static Maps APIが公開されました。

特定の地図をimageデータ（GIFフォーマット）として返してくれるようで、いろいろと使い道があるのではないでしょうか。（特にモバイル）

というわけで、さっそく使ってみました。

River Stone Inc.

携帯で表示(240x270)
QRコード
http://www.r-stone.net/blogs/ishikawa/google_static_maps_api_mobile.html

使い方は非常に簡単で、Static Map Wizardで手軽に作成できます。

Google Static Maps API のURLは、次の形式になっていて、parameters部分は以下のようになっています。

http://maps.google.com/staticmap?parameters

center（必須）: マップの中央の座標; e.g. 40.714728,-73.998672
zoom（必須）: ズームレベル; e.g. 17
size（必須）: 画像のサイズ; e.g. 500x400; ※最大値は512x512
maptype（オプション）: roadmap（デフォルト）:通常のマップ; mobile:表示文字等が簡略化されたモバイル用
markers（オプション）: マーカーの位置,色,文字; ※"|"で区切ることで複数マーカーが可能; {latitude},{longitude},{color}{alpha-character}; e.g. 40.702147,-74.015794,blues|40.711614,-74.012318,greeng
key（必須）: APIキー; Google Maps APIと同じ

なお、利用にあたって、1ユーザ(1IPアドレス)当たり、表示は1日1,000種類の画像までという制限（※原文によると「1000 unique (different) image requests per viewer per day」）があるので要注意です。

2008/02/24

ブラウザだけでRuby on Rails - Heroku -

以前、TechCrunchの記事でHerokuを知って、すぐにベータテスタとして登録したのですが、先日アカウント登録のメールが届いたのでさっそく使ってみました。

Herokuとは、ブラウザの中だけで、Railsのアプリケーションを開発できるサービスです。また、作成したアプリは、Amazon EC2上で簡単にホストすることもできるようです。

気になるRailsのバージョンは「2.0.2」になるようです。また、データベースはPostgresなようです。

ほんとうに簡単に開発からデプロイまでできるので、ちょっとしたアプリを作るにはもってこいですね。
それに、後に公開されるプレミアム版では、サブドメインではなく、独自ドメインも使用可能になるようですので、要注目です。

2008/02/10

クールに画像をズームする[FancyZoom]

クールに画像をズームできるFancyZoomというJavascriptによるスクリプトを発見したのでメモです。

画像をかっこよくズームするのに、Lightboxをはじめ、多数のスクリプトがありますが、久しぶりにビビっときたので使ってみました。

使い方は簡単で、

サイトよりZipファイルをダウンロードします

FancyZoom.jsの冒頭の以下の部分を適当に置き換えます

var zoomImagesURI = '/images-global/zoom/';

Webサイトにファイルをアップロードします。

HTMLの<head>セクションに次の行を加えます。

<script src="/path/to/FancyZoom.js" type="text/javascript"></script>

<script src="/path/to/FancyZoomHTML.js" type="text/javascript"></script>

※/path/to/部分は適当に置き換えます

<body>タグにonload="setupZoom()"を加えます

あとは、次のように画像がリンク先になっているものを検出し自動でやってくれます。

<a href="image.jpg"><img src="image-thumbnail.jpg" /></a> will zoom up image.jpg when clicked.

ちなみに、ズームしたくないものがある場合は、以下のようにrel="nozoom"を指定します。

<a href="image.jpg" rel="nozoom"><img src="image-thumbnail.jpg" /></a> will zoom up image.jpg when clicked.

また、aタグのtitle属性を指定することで、ズームウィンドウにキャプションを設定することもできます。

<a href="image.jpg" rel="nozoom" title="will zoom up image.jpg when clicked."><img src="image-thumbnail.jpg" /></a> will zoom up image.jpg when clicked.

2008/02/04

Bloggerでのラベル一覧表示スクリプトを修正しました

以前、[再] Bloggerのクラシックテンプレート(FTP公開)でもラベル一覧を表示したいを紹介したのですが、BloggerのAPIでエラーが発生してしまい、動作しなくなってしまったので修正しました。

具体的には、

http://www.blogger.com/feeds/UserID/blogs/BlogID?alt=json-in-script&callback=listLabels

とリクエストしても、次のエラーが表示されます。

The 'callback' parameter is only supported on feeds.

この現象は、どうやらBloggerAPIの問題として投稿されているようです。

Public Metafeed Callback Error - Blogger Data API | Google グループ

 Issue 341 - gdata-issues - Google Code

[再] Bloggerのクラシックテンプレート(FTP公開)でもラベル一覧を表示したいでは、アップデートとしてユーザのブログ一覧から絞り込む方法を紹介しましたが、Google グループのコメントにもあるように、callbackパラメータを省略した場合にデフォルトで設定される gdata.io.handleScriptLoaded を自身で定義することでも対応できます。

var gdata = function() {}
gdata.io = function() {}
gdata.io.handleScriptLoaded = function(root) {
 var baseURL = '/blogs/ishikawa/labels/';
 var baseHeading = "ラベル";
 var isFTP = true;
 var llDiv = document.getElementById('labelList');
 var h2 = document.createElement('h2');
 h2.className = 'sidebar-title';
 var h2t = document.createTextNode(baseHeading);
 h2.appendChild(h2t);
 llDiv.appendChild(h2);
 var ul = document.createElement('ul');
 ul.id = 'label-list';
 var regBlogId = new RegExp(/blog-(\d+)/);
 var labelSort = new Array();
 var entry = root.entry;
 for (var p in entry.category) {
  var category = entry.category[p];
  labelSort[labelSort.length] = category.term;
 }
 labelSort.sort();
 for (var r=0; r < labelSort.length; r++){
  var li = document.createElement('li');
  var a = document.createElement('a');
  var label = new String(labelSort[r]);
  var l = encodeURIComponent(label);
  if (isFTP) {
   if (label.indexOf('Blogger') >= 0) {
  l = l.replace(/%/g, '=');
   } else if (encodeURIComponent(label.replace(/[!-~\s]/g, '')).indexOf('%', 0) >= 0) {
  l = Base64.encode(new String(label));
  l = l.replace(/\//g, "__");
   }
  }
  a.href = baseURL + l +'.html';
  a.innerHTML = label + ' ';
  li.appendChild(a);
  ul.appendChild(li);
  abnk = document.createTextNode(' ');
  ul.appendChild(abnk);
 }
 llDiv.appendChild(ul);
}
</script>
<script type="text/javascript" src="http://www.blogger.com/feeds/08755644619888194912/blogs/1303966254927872449?alt=json-in-script" ></script>

しばらくは、様子を見る必要がありそうです。

登録: 投稿 (Atom)

守破離でいこう!!

ページ