　寝太郎の江戸風呂。ね！

2024
04
20

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/04/20 (Sat.)

2011
12
14

ブックマークレット整形フォーム

ブックマークレット(Bookmarklet)用のスクリプトは、URIスキームに適合するよう１行書きにするとともに特定の文字をURIエンコードする必要があります。
そこで、改行文字(\n)を取り除き、半角スペースを"%20"に置き換えるフォームを作りました。

←Push！

2011/12/14 (Wed.) Trackback() Comment(0) JavaScript

2011
12
13

ソースコードを表示するCSSルール。

このブログでは、恥をかえりみずよくソースコードを晒していますが、これまでは、次のような手間をかけていました。

特殊文字のエスケープ（<>&など）
改行（BR要素の追加）または　PRE要素への放り込み

コードを変換する際に間違えたり、ミスしないものの変換ツールを使ったりと、それなりに煩雑でした。しかし、もっと簡単に表示する方法がありました。

スタイルシートで、見せたいSCRIPT要素やSTYLE要素を表示してしまえばよいのです。通常、これらの要素の "display" CSSプロパティは、"None"に設定されていますが、これを "block" にすれば、ページに表示されます。そして、"white-space" CSSプロパティを "pre" にすれば、整形テキストとして改行されます。このままだと、横にはみ出すときもあるので、"overflow" CSSプロパティを "scroll"にします。あとは、背景色や文字色や枠線のスタイルを整えればよいでしょう。

この考えを元に作ったのが次の CSSルールです。 class属性に "showScript" というクラス名（className)を持たせれば、それがSCRIPT要素やSTYLE要素であっても見えるようになります。

ソースコードを表示するCSSルール（Visible Script CSS Rule）

上記の記述自体、STYLE要素のclass属性に "showScript" を持たせて表示させています。便利！

2011/12/13 (Tue.) Trackback() Comment(0) etc.

2011
07
05

ブログに Google+1 ボタン　をつけてみた。

Google 検索結果の横に「+1」が表示される。Googleにログインしている状態で、「Google +1 ボタン」をクリックすると、自分の「おすすめ」としてGoogleに登録される。何をマークしたかは、自分のプロフィールページの「+1」で確認できる。オンラインブックマークみたいなものだなと思った。

そして最近、Google からメッセージが届いた。「Google +1 ボタン」をあなたのページにつけるといいことがあるかもしれないよというような趣旨。試しに、このブログのテンプレートのHTMLをいじって、次のコードを埋め込んでみた。

HEAD要素内

<!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ja'}
</script>

コンテンツトップ部分

<!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください -->
<g:plusone></g:plusone>

記事を登録するなら、記事ページを表示すべし。

ご覧のとおり。コンテント部分の左上に「Google +1 ボタン」が表示された。このボタンをクリックすると、表示中のページのURLが、登録される。したがって、トップページで押せば、トップページが登録される。お気に入りの記事を登録したいなら、その記事ページを表示してから「+1」ボタンを押す必要がある。

ターゲットURLを指定するには？

次のようにhref属性にターゲットURLを指定すれば、できるらしい。

<g:plusone href="ターゲットURL"></g:plusone>

2011/07/05 (Tue.) Trackback() Comment(0) etc.

2011
07
04

Googleドキュメントのスプレッドシートからグラフを作る。

前回の「GoogleドキュメントのスプレッドシートのデータをWEBページに表示する。」では、Google Spreadsheets のデータを Googele Visualization API を用いて、WEBページのテーブルを作成する方法を説明しました。そして、公開されている URL を指定することにより、テーブルにするサイト「Google Spreadsheet Visualization Table」を紹介しました。

今回は、Google Spreadsheets のデータを Googele Visualization API を用いて取得し、さらにグラフにするページを紹介します。

「Google Spreadsheet Chart」

公開されているスレッドシートの URL を入力すると、スプレッドシートのデータをグラフにするとともに、データをテーブル形式でページに表示します。

Googleドキュメントのスプレッドシートのデータを取得して、グラフにする方法

「Google Spreadsheet Chart」では、入力した URL のスプレッドシートのデータを表示しますが、以下の説明では簡略化して、固定した１つのシートのみを対象とします。また、グラフの種類も１種類とします。なお、Google Spreadsheets のデータを取得するまでは、前回の「Googleドキュメントのスプレッドシートのデータを取得して、WEBページに表示する方法」とほぼ同じです。

スプレッドシートの URL の確認

公開設定したスプレッドシートの URLは次のようなフォーマットになっています。

https://spreadsheets.google.com/spreadsheet/ccc?key=スプレッドシートのID&hl=言語

jsapi.js のロード

データをテーブルとして表示するところで、Google Visualization API の table パッケージを利用します。そのパッケージをロードするためには、前提として Google Data API の Google AJAX API loader をサーバーから取り込んでおく必要があります。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

パッケージのロード

Google AJAX API loader を取り込んだら、JavaScript クライアントライブラリをロードします。テーブルの作成には、Googele Visualization モジュールの table パッケージが必要です。また、標準的なグラフを利用するには　corechart パッケージも必要です。

google.load("visualization", "1", {'packages':['table','corechart']});

モジュールのロード完了後の初期化処理

モジュールのロードが完了した際に行う処理を記述します。これは　　　　　　google.setOnLoadCallback メソッドでイベント登録します。下記の例では、init という変数を与えていますが、この部分に直接、匿名関数を当てることもできます。

init=function(){
//初期化処理
}
google.setOnLoadCallback(init);

初期化処理の内容

google.visualization.Query のインスタンスを生成します。データソースを Google スプレッドシートの公開URL とし、send メソッドを実行すれば、Google スプレッドシートのデータ取得後、コールバック関数が実行されます。次の例では、コールバック関数は handleResponse です。

init=function(){
    var sourceSheet=GoogleスプレッドシートのURL;
    var query = new google.visualization.Query(sourceSheet);
    query.send(handleResponse);
}

コールバック関数の内容

次の例では、Google スプレッドシートからのレスポンスを仮引数 response で受けています。そして、id属性が'res'である要素にテーブルを、id属性が'res'である要素に縦棒グラフを表示します。

var handleResponse=function(response){
  var div  =document.getElementById('res');
  var chart=document.getElementById('chart');
  if(response.isError()) {
    div.innerHTML = response.getDetailedMessage();
    return;
  }
  var data = response.getDataTable();
  var divTable  = new google.visualization.Table(div);
  divTable.draw(data);
  var divChart =  new google.visualization.ColumnChart(chart);
  divChart.draw(data);
}

レスポンスにエラーがあった場合には、エラーメッセージを表示し、正常な場合には、テーブルとグラフを表示します。

レスポンスの getDataTable メソッドで、Google Visualization の基本であるデータテーブルの形に Google スプレッドシートのデータが格納されます。

テーブルを表示する要素を指定して、google.visualization.Table のインスタンスを生成します。この google.visualization.Table の draw メソッドでデータテーブルを指定すると、指定した要素の中にデータテーブルのデータがテーブル形式で表示されます。

グラフを表示する要素を指定して、google.visualization.ColumnChart のインスタンスを生成します。この google.visualization.ColumnChart の draw メソッドでデータテーブルを指定すると、指定した要素の中にデータテーブルのデータがグラフで表示されます。

グラフの種類

上記では、縦棒グラフ(ColumnChart)を採用しましたが、他の種類のグラフを利用することもできます。その場合、次の場所の記述を変更します。

var divChart =  new google.visualization.ColumnChart(chart);

グラフの種類の主なものは次のとおり

AreaChart　　　　 面グラフ
BarChart 　　　　 横棒グラフ
CandlestickChart　蝋燭グラフ
Gauge 　　　　　　ゲージ
GeoChart　　　　　地域図
LineChart　　　　 折れ線グラフ
PieChart　　　　　円グラフ
ScatterChart　　　散布図
TreeMap　　　　　 階層図

2011/07/04 (Mon.) Trackback() Comment(0) Google Spreadsheets

2011
06
24

Googleドキュメントのスプレッドシートのデータを表示する。

公開設定されているGoogleドキュメントのスプレッドシートは、URL さえわかれば、誰でも閲覧することができます。また、Googele Visualization API を利用すれば、自分のページにデータを取り込むこともできます。

そこで、Google Spreadsheets の URL を指定して、データを表示するページを作成しました。

「Google Spreadsheet Visualization Table」

公開されているスレッドシートの URL を入力すると、スプレッドシートのデータがテーブル形式でページに表示されます。

Googleドキュメントのスプレッドシートのデータを取得して、WEBページに表示する方法

「Google Spreadsheet Visualization Table」では、入力した URL のスプレッドシートのデータを表示しますが、以下の説明では簡略化して、固定した１つのシートのみを対象とします。