　寝太郎の江戸風呂。ね！

2024
04
25

[PR]

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

2024/04/25 (Thu.)

2011
01
29

「トピックパス」とは、トピックがツリー状の上下関係を持っている場合に、現在表示されているトピックに至る経路を示すものです。パンくずリスト（breadcrumb list）という方が馴染み深いが、ここで紹介する「トピックパス」のナビゲーションは、1つの文書の中のトピックのみを対象とするので、あえて一般的なイメージの強い呼び方を避けました。

パンくずリスト（breadcrumb list）は、ウェブサイト内におけるウェブページの位置ををハイパーリンクで示すので、SEO（検索エンジン対策）に有効とされています。SEO（検索エンジン対策）のことを考えれば、検索エンジンが読み取りにくい JavaScript でパンくずリスト（breadcrumb list）を作成するのは適当ではないでしょう。

しかし、すべてのウェブページが他人に見てもらうことを目的としているわけではありません。中には、自分のためだけのメモ、身内だけのリファレンスを目的としているものもあります。今回、紹介する「トピックパス」は、そのような閉鎖的なページを作成する時に便利なツールだと思っています。

サンプルファイルをアップロードしましたので、イメージは、そちらで掴んで下さい。
■　topicPath,html

この「topicPath,html」は、ウェブページをアイフォン/ iphone 風に表示するツールである　"iUI"
のスクリプトとCSSに影響を受けて作成しています。

次回以降、「topicPath,html」の基本的な考え方やベースとなるスクリプトに説明したいと思います。

2011/01/29 (Sat.) Trackback() Comment(0) JavaScript

2011
01
19

JSONPでレスポンスが返らない場合の処理

JSONPで、データの要求をした場合、コールバック関数が実行されます。また、リクエストに不備があった場合には、エラーコードが返って来ることが多いでしょう。しかしながら、何のレスポンスもない場合があります。このような場合に、何らかの処理をする必要があるときは、どうしたらよいでしょう。

便法としては、setTimeout関数を利用する方法があります。すなわち、サーバーにリクエストを送ると同時に、何秒かに実行される関数を指定するのです。その関数の中で、レスポンスが返って来ない場合の処理を記述するのです。レスポンスが返って来たか来ないかは、フラグを設定しておいて、コールバック関数の中でフラグを変更すれば、把握することができます。

サンプル

「Callback OK」ボタンを押すと、コールバック関数が実行されます。「No Callback」ボタンを押すと、実在しないURLを呼び出します。したがって、リクエストは返ってきません。

[つづきはこちら]

2011/01/19 (Wed.) Trackback() Comment(0) JSONP

2011
01
12

東京23区を色分けした地図を作る。

今回は、Yahoo! JAPAN Web Services の地図APIのJavaScriptマップを利用します。この中の白地図レイヤー(blankmap)を用いると行政区域ごとの色分けが可能です。

記事「都道府県を色分けした地図を作る。」では、Google Chart Tools/Image Charts(aka Chart API) の Map Chart を用いて、各都道府県の色分けを行いました。現時点では、それより細かいレベルの地域を色分けすることは、Google の Map Chart ではできませんでした。

一方、Yahoo! JAPAN JavaScriptマップでは、広域の色分けはできません。白地図レイヤー(blank_map)が適用できるのは、縮尺レベル(zoom lebel)の11～20の範囲です。日本列島の主要部分を地図に表示する場合には、"5"か"6"の縮尺レベル(zoom lebel)が必要なので、都道府県の色分けはできません。逆に狭い地域の色分けは得意です。

今回は、縮尺レベル(zoom lebel)"11"で、東京23区を色分けしましょう。

ソースコード

[つづきはこちら]

2011/01/12 (Wed.) Trackback() Comment(0) Yahoo! Web Services

2011
01
05

星の度数グラフ：スターチャート　★★★

評価ポイントを表現するのに、星マーク「★」の数で表示することがあります。これをJavaScriptで実現しましょう。スターチャート(star chart)とでも呼べばいいのでしょうか。Google Visualization でいえば、Stuff Chart に似たものですが、WEB検索で簡単に見つからなかったので、自作することにしました。

仕組みは簡単です。引数で受け取った数字の数だけ、「★」を生成して、指定された要素に追加するというものです。

小数点部分については、「★」の大きさを縮小させて表現することにしました。

インプットボックスに数字を入れて、ボタンを押すと、そのだけ星マーク「★」が表示されます。

Rank:★★★

ソースコード


neta.starchart=function(r,c){
 c.innerHTML='';
 var n=Math.floor(r);
 var m=Math.floor(Math.sqrt((r-n)*10000))
 for(var i=0;i<n;i++){
  var s=document.createElement('span');
  s.innerHTML='★';
  c.appendChild(s);
 }
 if(m){
  var s=document.createElement('span');
  s.innerHTML='★';
  s.style.fontSize=m+'%';
  c.appendChild(s);
 }
}
neta.addListener(function(){
 document.getElementById('btn110105').onclick=function(){
  var v=document.getElementById('inp110105').value-0;
  neta.starchart(v,document.getElementById('c110105'))
 }
});

2011/01/05 (Wed.) Trackback() Comment(0) JavaScript

2010
12
20

サッカーフォーメーション図 Twitter版

Twitter/ツイッターに投稿すると、サッカーフォーメーション図が作成されるサービスが登場しました。詳細は、「サッカーフォーメーション図 on twVisual」をご覧下さい。

これは Tweet/ツイートする時に決められたフォーマットで投稿すると、それをtwVisualのサイトで、サッカーフォーメーション図として見られるというものです。

イメージ・サンプル

それが見られるURLをTweet/ツイートに埋め込んでおけば、フォロワーにも見てもらえます。サポーター同士で盛り上れるツールになるのではないでしょうか。

このブログで紹介した「サッカーのフォーメーション図作成ツール。」は、作成したフォーメーション図をコピペして、ブログに貼り付けて利用するものでした。この「サッカーフォーメーション図 Twitter版」は、それよりも進んでいます。直ちに公開できるというメリットがあるのです。Twitter/ツイッターをコミュニケーション・ツールとして利用すると同時に、データソースとしても利用しています。Twitter/ツイッター利用の一つのあり方を示しているのではないでしょうか。このような発想を発展させれば、よりTwitter/ツイッターが面白くなることでしょう。

2010/12/20 (Mon.) Trackback() Comment(0) twitterAPI