メイン

2008年05月24日

関連を視覚化するJavascript用ライブラリ 『MooWheel』

MooWheel』は、関連のあるもの線で結んで視覚化的に表示するためのJavascript用ライブラリです。


1.関連を下のような配列で定義します。

  var data = [['Joe B', 'Ryan K', 'Charlie C'],
    ['Ryan K', 'Charlie C'],
    ['Charlie C', 'Ryan K', 'Joe B'],
    ['Robert Z', 'Joe B', 'Charlie C']];

  "Joe B"は、"Ryan K"、 "Charlie C"と関連(関係)がある。
  "Ryan K"は、"Charlie C"と関連がある。
  "Charlie C"は、・・・といった感じで関連を定義します。


2.視覚化した結果を表示する「canvas」をHTMLの中に追加します。

  <canvas width="400" height="400" id="canvasObj"></canvas>


3.視覚化するためのオブジェクトを生成します。

  var wheel = new MooWheel(data, $('canvasObj'));


線の起点にのマウスを載せると、関連のあるラインがハイライト表示されます。


p.s.

実際に試していないのですが、いろいろなところで使えそうなのでご紹介しちゃいました。

2007年10月03日

「Ext 2.0 Alpha1」 & 「Adobe AIR Beta2」 リリース

○「Ext 2.0 - Alpha Release」

  Ajaxフレームワーク。
  
  Ext 2.0 Samples


○「Adobe AIR Beta2」

  Beta2とBeta1では、アプリケーション記述ファイルのフォーマットが変更されているようです。

  違いは「RIA実行環境「Adobe AIR」のβ第2版がリリース」が参考になります。

  Sample Applications


2007年09月24日

「MAsh」でコマンド入力の履歴をつかえるようにしました

「MA3 participant session」に参加して、頂いた意見のなかに「MAsh(仮)」で「コマンド入力の履歴を使いたい」というものがありました。

さっそく、履歴参照機能を付け加えてみました。
上下キーで履歴をたどることができます。

シェル部分の実装には、「JavaScript Shell」が非常に参考になりますね。


p.s.
tabキーによる補完も若干使えます。若干というのは、パイプでコマンドをつなぐときには、最初のコマンドだけということです。

できるだけ早く、パイプの後でも利用できるように修正したいと思います。

2007年09月20日

「jQuery UI」リリース

javascriptでプログラミングをするとき、便利なライブラリーのひとつとして「jQuery」を利用しています。

HTTP通信やXMLの操作を記述するには、なかなか使い勝手がいいと思います。
XPathによる操作が充実してくれるとさらに助かります。

また、これまでjQueryでは、UIに関する部分が弱かったように思われます。
事実、私の場合は、UIを作るとき、「YUI」や「Ext」を利用しています。


そんななか、「jQuery UI」がリリースされました。

オフィシャルサイトでは、いくつかのデモを体験することができます。

jQuery、高品質なウィジェットライブラリ「jQuery UI」を発表」によれば、まだまだ開発中のプロダクトで、採用はしばらく様子を見た方がいいだろうとのこと。


個人的には、データを視覚するグラフの動作にすごく興味があります。

あとで詳しく見てみたいと思います。

2007年07月28日

(メモ) HTMLのid属性の頭文字はアルファベットではじめる

HTMLのタグにつけるid属性は、アルファベット[A-Za-z]で始めなければなりません。

動的に生成するタグにユニークなid生成するには、

  var id = new Date().getTime();

とすると簡単に生成できます。
これだけだと数字で始まってしまうので、うまく動作しません。
上記のようにして、しばらくの間、はまってしまいました(TT)。


正しく動作させるには、下のようにアルファベットから始まるようにする必要があります。

  var id = "id" + new Date().getTime();

意外と気づかないものでした。
気をつけたいですね。

2007年07月17日

(資料) JavaScriptでCUI

ウェブアプリケーションでCUIを実現したいとおもって調査してみました。

JavaScriptで実現しているものがいくつかあったので、資料としてまとめておきます。

JavaScript Shell

CommandPrompt

Implement a Browser Command Line with JavaScript

  日本語に翻訳されたものが、「JavaScriptでブラウザコマンドラインを実装する」で紹介されています。


ほかにも、こんなのあるよってのがあったら紹介いただけると助かります。
よろしくお願いします。

2007年06月10日

クリックだけで検索できるようになりました

なんとか、クリックのみでホテル検索できるようになりました。

こんなかんじです。

まだまだ、作りこまないといけないところがありますね。


はまった点の攻略法などを紹介したいのですが、相変わらず時間のマネージメントが下手なようです(^^;。

別の機会に改めて紹介したいと思います。

それでは、おやすみなさい。



[F1カナダグランプリ結果 (速報)]

1位:ルイス・ハミルトン 初優勝おめでとうございます
2位:ニック・ハイドフェルド
3位:アレクサンダー・ブルツ

6位:佐藤琢磨 入賞おめでとうございます

2007年06月07日

「Yahoo! UI Library:DataTable」をつかってみる

Yahoo! UI Libraty」には、「Calendar」のほかにも面白いものがたくさんあります。

今日は、「DataTable」を使ってみました。

「DataTable」を使うと、テーブルの列データでソートしたり、行の幅を調整したりできるテーブルを作ることができるみたいです。

そんな、「DataTable」のベーシックな使い方を紹介したいと思います。

続きを読む "「Yahoo! UI Library:DataTable」をつかってみる" »

2007年06月06日

日付の入力に「Yahoo! UI Library:Calendar」をつかってみる

開発中のサービスで、日付を入力する必要があります。

日付を入力する方法として、次のようなものが考えられます。

  ○キーボードから入力する
   問題点:日付の入力フォーマットが間違っていると、サービスがうまく動かない。

  ○プルダウンメニューから入力する
   問題点:プルダウンメニューにリストが長くなると、選ぶのが面倒?
   
  ○カレンダーからGUI入力する
   問題点:1から実装するのは大変。


個人的に、やってみたいのは「カレンダーからGUI入力する」です。
また、ユーザからみても、マウスひとつで直感的に日付を選べるのはうれしいはず。

ということで、今回は「カレンダーからGUI入力する」を採用することにしました。


とはいえ、実装するのは大変そうなので、「Yahoo! UI Library」を利用することにしました。


以下では、簡単な使い方を紹介します。

続きを読む "日付の入力に「Yahoo! UI Library:Calendar」をつかってみる" »

2007年06月04日

「楽天トラベルAPI 」+ 「Google Maps API」でホテル検索サービス開発 2回戦開始

以前、「住所を入力して近場のホテルを探すサービスを開発チュ!」というエントリーで宣言?したように、
Google Maps API」と「楽天トラベル情報API」をつかって、ホテルを検索するサービスを開発中です。


しばらく、手をつけていなかったのと、以前のものでは使えない機能があったので、今回、一から出直すことにしました。


続きを読む "「楽天トラベルAPI 」+ 「Google Maps API」でホテル検索サービス開発 2回戦開始" »

2007年06月01日

Feed Search Service (FSS) バグフィックス&キーボードショートカット導入

Feed Search Service (FSS)を更新しました。

Mashupedia::Feed Search Serviceの画像


○バグフィックスを行いました。

  検索結果のエントリーへリンクURLが取得できていないというバグを修正しました。
  かなり大きなバグでした。申し訳ございませんでした。

続きを読む "Feed Search Service (FSS) バグフィックス&キーボードショートカット導入" »

2007年05月31日

JavaScriptでキーボードショートカットを簡単に実現するライブラリ 「shortcuts.js」

ひさびさにプログラミングねたです。

あなたは、マウス派、それともキーボード派ですか?

多くの検索結果をみるとき、次へクリックするのがめんどくさいと感じる方は、間違いなくキーボード派です。私もキーボード派です。

キーボード派の人間は、できるだけキーボードから手を離すことなく、また、少ないキータッチでPC操作したいと考えていると思います。そのため、よく利用する機能は、キーボードショートカットに登録して利用していたりすると思います。


キーボードショートカットは、なれると作業効率をぐ~んとあげることができますよね。
どんなアプリケーションでも、ショートカットが利用できる便利です。

そこで、今日は、JavaScriptで簡単にキーボードショートカットを実装できるライブラリ「shortcuts.js」を紹介します。

続きを読む "JavaScriptでキーボードショートカットを簡単に実現するライブラリ 「shortcuts.js」" »

2007年05月06日

「JavaScriptのevent処理」では、eventオブジェクトに目的の情報が含まれるのかどうかに注意しよう

JavaScriptでイベント処理を行うときは、イベントごとにイベントを処理するための関数(イベントハンドラ)を設定します。

このとき、注意しなけばならないことがあります。
それは、取得したイベントのなかに、イベントを処理する情報がすべて含まれているかといことです。


例を挙げます。

keydownイベントが発生したときに、マウスの位置を表示したいとします。

この場合は、keydownイベントだけをつかって、目標を達成することができませんでした。

続きを読む "「JavaScriptのevent処理」では、eventオブジェクトに目的の情報が含まれるのかどうかに注意しよう" »

2007年05月05日

JavaScriptの「this」を制覇せよ

JavaScriptでクラス(風)な実装をしていると、クラス変数の扱いに戸惑うことがあります。

クラス変数を参照するときには、
  
  this.クラス変数名

とするとおもいます。

突然ですが、ここで問題です。

この「this」っていったいどのオブジェクトを参照しているのでしょうか?

続きを読む "JavaScriptの「this」を制覇せよ" »

2007年05月02日

JavaScriptのリファクタリングにはまる(><)

Feed Search Searviceのソースコードをリファクタリングしようと思い立ってしまった(笑)。

グローバルなスコープをもつ変数と関数を、なんとかクラスのなかに押し込めたい。

リファクタリング開始。

いろんなところで、”まったく動かない -> 一部動く -> まったく動かない” といったループがはじまる。

続きを読む "JavaScriptのリファクタリングにはまる(><)" »

2007年04月26日

インクリメンタルサーチ、サービス開始まで秒読み? 経過報告

数行のスクリプトをコピーするだけで、インクリメンタル検索サービスを導入できるところまでこぎつけました。


はまった点
  ○google.load()
    googleのライブラリをロードする関数です。
    この関数も、意識しないで使えるように、ライブラリのセットアップ関数の中に
    押し込めたかったのですが、うまくいきませんでした。

    google.load()関数は、<head>タグの中に、読み込むライブラリを追加する操作を
    行っているだけなのですが、直接<head>タグ内に記述しないと
    うまく動いてくれませんでした。

  ○google.setOnLoadCallback()
    onloadイベントが発生したときに、「イベントを処理するための関数を登録する」関数です。
    登録する関数に引数を与えたかったのですが、引数を与えるとうまく動いてくれませんでした。

続きを読む "インクリメンタルサーチ、サービス開始まで秒読み? 経過報告" »

2007年04月25日

ライブラリはできた、次は提供方法を整備する

ブログのFeedを好きなタイミングでインクリメンタルサーチできるライブラリがほぼ完成しました。

以前のライブラリとの違いは、以下の2点です。

  ○エントリのタイトルを表示するフォントの大きさを小さめに変更しました
  ○検索ウインドウをドラッグできるように変更しました

ドラッグできるようにするために必要な部分のコードを紹介しておきます。

続きを読む "ライブラリはできた、次は提供方法を整備する" »

2007年04月24日

いつもちかくに検索ウインドウを!

引き続きインクリメンタルサーチねたです。

今日は、検索ウインドウを常にカーソルのある位置の近くに表示するようにしました。
個人的に時間がだいぶおしているので(^^;、やり方と参考サイトを紹介させていただきます。

やり方は、マウス(カーソル)が移動したら、その移動位置を取得して、取得した位置の近くに検索ウインドウの位置を移動させるというものです。

  (1)カーソルの位置を取得する
    (参考)「JavaScript Cursor Position

  (2)onmousemoveイベントを取得する
    (参考)「マウスカーソルについてくるイメージ

続きを読む "いつもちかくに検索ウインドウを!" »

2007年04月23日

仮説思考でGo! 「インクリメンタルサーチで検索効率をあげる方法を提案する」

思ったときに思ったタイミングで検索できたら便利ですよね。

  検索エンジンで目的のサイトにたどり着んたんだけど、そこのサイトをみていたら
  他にもわからないことが出てきてしまった。
  でも、このサイトのどこかに、その答えがありそうなんだけど・・・

といった経験をしたことはないでしょうか?

私の場合は、いままでは、改めて検索エンジンで検索していました。検索用に新しくタブやウインドウを開いて検索するのは、手間だし、すぐそこに答えがあるかもしれないのにです。


そこで、次のような仮説を立ててみました。

(仮説1)
目的のサイトがみつかっていて、サイト内で新たな検索したい場合は、インクリメンタルサーチによる検索方法のほうが効率がよくなるのではないだろうか。

続きを読む "仮説思考でGo! 「インクリメンタルサーチで検索効率をあげる方法を提案する」" »

2007年04月16日

「Spry Effects API」で開閉するウィンドウをつくる

「Spry」フレームワークをつかって、開閉するウィンドウをつくってみました。

開閉するだけならデモのソースをコピーするだけでできます。
今日は、少しだけ背伸びをして、ブログのフィードを表示することに挑戦しました。

このフィード表示アプリケーションの動作は、次のとおりです。
初めて表示された時には、開閉するウィンドウがすべて閉じており、記事のタイトルのみ表示されています。
記事のタイトルをクッリクすると、ウィンドウが開いて記事の内容(atomなのでほとんど何もないですが)が表示されます。


では、コードを紹介します。

続きを読む "「Spry Effects API」で開閉するウィンドウをつくる" »

2007年04月13日

「spry:detailregion」をつかってデータを共有する 

前回紹介した「「Spry」フレームワークをつかって、XMLからテーブルをつくる」の続編です。


今回は、リストで選んだホテルの外観画像を表示できるようにコードを追加しました。

spry:detailregion」の機能を使うと、
「spry:region」で作成したリストで選ばれたホテルのデータのみを
spry:detailregion」が指定された場所で共有することができます。


ソースコートを紹介します。以前のものとほとんど変わりませんが、
  <!-- regionで選ばれたデータを共有する -->
以下に注目してください。


続きを読む "「spry:detailregion」をつかってデータを共有する " »

2007年04月12日

「Spry」フレームワークをつかって、XMLからテーブルをつくる

今日は、「Spry」であそんでみました。

「Spry」は、Adobe社が提供しているAjax用フレームワークです。

こちらで、デモをみることができます。


「Spry」の「dataset」クラスと「dynamic resion」機構を使うと、XML形式のデータをつかって、動的なコンテンツを簡単に生成することができます。


今回は、「楽天トラベル情報API + Google Maps API」の記事で作成した「marker.xml」ファイルから、ホテルのリストをつくってみました。


サンプルコードを紹介します。

続きを読む "「Spry」フレームワークをつかって、XMLからテーブルをつくる" »

2007年04月08日

「Dojo」でXMLの読み込みと操作を行う

Dojo
ウェブアプリケーションを作成していると、ファイルやCGIによる出力をJavaScriptで読み込む必要がある場合が結構あったりします。

そんなときは、「XMLHTTPRequest」を利用するのですが、ブラウザによって、関数名が違っていたり、実装が異なっているという問題があります。



これまでは、どんなブラウザでも動くアプリケーションを作成しようとすると、対象とするブラウザの数だけ、ファイルを読み込み用のコーディングしなければなりませんでした。

最近は、多くのJavaScriptライブラリで、このブラウザによる実装の違いを吸収する関数が提供されるようになってきました。


今回は、JavaScriptライブラリのひとつである「Dojo」を利用して、
  
  (1)XML形式のファイルを読み込む
  (2)XMLの要素を表示する

方法を紹介したいと思います。


続きを読む "「Dojo」でXMLの読み込みと操作を行う" »

2007年04月07日

『JSEclipse』のインストールと設定

JSEcripse

以前、「JavaScript開発用Eclipseプラグイン「JSEclipse」」で紹介した、Eclipse用のJavascriptエディタプラグイン『JSEclipse』をインストールしてみました。

インストール後に、どうやって『JSEclipse』を適用するのか、迷ってしまいました。

ここでは、インストール方法とJavaScriptファイルのエディタとして『JSEclipse』を利用するための設定を紹介します。


続きを読む "『JSEclipse』のインストールと設定" »

2007年03月04日

Ajaxデモのショーケース 「MiniAjax.com」

MiniAjax.com」は、AjaxスクリプトやDHTMLのサンプルやデモが紹介されたページが数多く紹介されています。

Webデベロッパの新・御用達サイト - MiniAjax.comへようこそ!」(MYCOMジャーナル)という記事で知りました。


MiniAjax.com」を訪れてみると、関心するような、びっくりするようなデモが盛りだくさん。


あれも試してみたいし、これも試してみないと、目移りしてしまいます。そんななかで、簡単にできそうな「AJAX Fisheye List Widget - Demo」を試してみることにしました。

続きを読む "Ajaxデモのショーケース 「MiniAjax.com」" »

2007年02月19日

開発は計画的に! (インクリメンタルサーチにリンクがついたよ)

ハイライト表示+インクリメンタルサーチ (Firefox only版)」をちょっこ修正。


サイトを開いたときから、データが表示されるようにしました。
またリンクが有効になりました。

ただ、字が並んでいるだけなので見づらいです。スタイルシートでも使って、きれいにレイアウトしたいです。

そう考えて、しばらく後、、、

RSSのタイトルを検索する -> ヒットしたエントリーをXMLのまま抜き出す -> xsltでレイアウト

がいいんじゃないかなぁと思って、一時停止。

続きを読む "開発は計画的に! (インクリメンタルサーチにリンクがついたよ)" »

2007年02月17日

ハイライト表示+インクリメンタルサーチ (Firefox only版)

試行錯誤の末、なんとか動くものが完成しました。

山あり、山ありの険しい道のりでした(TT)。


以前、「検索データをファイルから読み込んでインクリメンタルサーチ (Firefox only版) 」したコードはは、IEでも動くことを確認しました。

しかし、今回は、正真正銘の「Firefox only」版です(笑)。
理由は、DOMの操作にXPathを利用しているのですが、今回使ったXPathを利用するための関数が、IEでサポートされていないためです。

(参考)
  「Introduction to using XPath in JavaScript


続きを読む "ハイライト表示+インクリメンタルサーチ (Firefox only版)" »

2007年02月16日

XPathでRSSデータにアクセスする (JavaScript編)

検索データをファイルから読み込んでインクリメンタルサーチ (Firefox only版)」で読み込んでいるデータは、このブログのRSSです。


RSSのデータを簡単に利用できるように、JavaScriptでRSSを扱う「MyDOM」クラスを作ってみました。
「MyDOM」クラスを利用すると、MyDOM.getTitles()で、エントリーのタイトルを一括で取得することができます。


「MyDOM」クラスの内部では、RSSから情報を取得するために「XPath」を利用しました。

以下に、ソースコードを示します。

続きを読む "XPathでRSSデータにアクセスする (JavaScript編)" »

2007年02月14日

検索データをファイルから読み込んでインクリメンタルサーチ (Firefox only版) 

インクリメンタルサーチが面白いので、いろいろ試行錯誤してます。


まず、検索キーワードの部分をハイライト表示にする方法をいくつか調査しました。

「よし、これでいこう!」という方法を決定して、いざ取り組んでみると、別のところではまってしまいました(TT)

はまっているコードを紹介します(笑)。

Firefoxだと動くけど、IEだと動かないというコードです。
Firefox2とIE7で動作検証を行っています。


続きを読む "検索データをファイルから読み込んでインクリメンタルサーチ (Firefox only版) " »

2007年02月12日

インクリメンタルサーチに挑戦

検索フォームにキーワードを入れるとリアルタイムで、検索結果の表示が変更されるAjaxアプリケーションをご存知でしょうか?


文章があまりうまくないので、「JavaScript でインクリメンタル grep 検索」で紹介されているgrepアプリケーションを試してみてください。

いかかでしょうか?検索結果がリアルタイムで変化していくと思います。
おもしろい(w。


この検索方法を「インクリメンタルサーチ」と呼びます。


インクリメンタルサーチを使うと、キーワードを試行錯誤しながら検索するという作業において、ストレスが緩和されると思います。


どうやって実現されているのかを知るためにスクリプトを組んでみました。といっても、「JavaScript でインクリメンタル grep 検索」で紹介されているものそのままなんですが・・・


以下にコードと、実行例を示します。

続きを読む "インクリメンタルサーチに挑戦" »

2007年02月11日

形態素解析をお手軽に!

「形態素解析」?あまり聞きなれない言葉だとおもいます。


非常に簡単にいえば、

  「ある文章をコンピュータをつかって品詞分解すること

ということができでしょうか。
よりよい表現をご存知の方がいらっしゃいましたらご教授ください。

より詳しい説明をご覧になりたいかたは、「形態素解析」(wikipedia)を参照してください。


ウェブサイトやブログに掲載されている文章は、コンピュータが理解することができません。
「形態素解析」は、コンピュータが文章を理解するためのひとつの手段として利用することができます。


まず、「形態素解析」により、文章を意味のある最小単位(品詞)に分解します。
次に、分解された品詞の出現順序や出現頻度などをコンピュータで調べて、その結果から文章の意味を推測しよういうことです。

続きを読む "形態素解析をお手軽に!" »

2007年02月10日

「Lightbox」を利用して画像を"かっこよく"表示する

ウェブ上で、画像を"かっこよく"表示する方法を紹介します。

サムネイル画像をクッリクすると、オリジナル画像がページ全体に開きます。
実際の動作は、こちら
で確認してください。


このような、表示方法を簡単に可能にしてくれるのが、ライブラリの「Lightbox」です。


以下で、導入に仕方と利用方法について説明します。


続きを読む "「Lightbox」を利用して画像を"かっこよく"表示する" »

2007年02月09日

「dp.SyntaxHighlighter」でウェブ上でもコードを見やすく表示する

ソースコードを書くにあたって、「自動でインデント」をつけてくれたり、「予約キーワードをハイライト表示」してくれるエディタの機能は、コードを読む上で非常に助けになります。


これらの機能を、ウェブ上でも簡単に実現するためのライブラリをみつけましたので紹介します。

dp.SyntaxHighlighter」です。


エディタのコードをコピーしてブログのエントリーや、HTML内に貼り付けただけでは、インデントさえ満足につけることができません。


私自身、このブログでも何回かソースコードを表示させたことがあります。
毎度毎度、「半角を全角スペース置き換えてインデントを実現」という作業を繰り返していました(笑)


今回は、「dp.SyntaxHighlighter」をつかって、ウェブ上のソースコードを見やすく表示してみたいと思います。

続きを読む "「dp.SyntaxHighlighter」でウェブ上でもコードを見やすく表示する" »

2007年02月05日

「Simple API」と「Prototype Window」で見えるブックマークを作ろう!(第1回)

あるサイトをのぞいていて、「面白いなぁ:とか「あとで役に立ちそうだなぁ」とか思い、次から次へとブックマークに登録していませんか?

「振り分け」や「コメント付け」も後回しにして「参考」とか「tmp」とかいう万能ディレクトリをつくって、どんどん登録してしまっていませんか?

かくゆう私は、やってます(^^;


こうなると、あとで、「あのサイトが役立ちそうだなぁ」と思って、ブックマークをみたときに、
膨大な量のページがひとつのディレクトリ内にあって目的のサイトを探すのも大変です。


そこで、こんなブックマークがあったらいいなぁと思うものをデザインしてみようと思いました。

続きを読む "「Simple API」と「Prototype Window」で見えるブックマークを作ろう!(第1回)" »

2007年02月03日

「XMLHttpRequest」をつかってJavaScriptで通信する?

JavaScriptで他のサーバと通信してデータを取得する方法を調査していました。

「JavaScript 通信」というキーワードで検索して、「Ajaxを勉強しよう」というサイトを発見しました。「XMLHttpRequest」クラスをつかって、HTTPで通信する方法について、非常に詳しく紹介されています。


とりあえず、まねしてコーディングしてみました。
ソースコードを示します。

続きを読む "「XMLHttpRequest」をつかってJavaScriptで通信する?" »

2007年01月31日

「FireBug」でJavaScript実行時の属性値を追跡する

JavaScriptで開発をしていると、
動いているのやら、いないのやら、よくわからない状況に陥って、途方にくれてしまうことがありました。


ついさっきのコーディングでも、そんなワナに簡単に引っかかってしまうへっぽこプログラマーな私。
でも、「FireBug」のデバッグ機能に一筋の光明を見出しました。

というのが昨日までの話。今日は、「FireBug」で実際のデバッグしてみました。

続きを読む "「FireBug」でJavaScript実行時の属性値を追跡する" »

2007年01月30日

Webページ開発に「FireBug」

JavaScriptで、ちょこちょこ開発をはじめました。


いろいろなサンプルコードを手打ちで、試しているのですが、

JavaScriptを書いて、HTMLを書いて、HTMLファイルにアクセス・・・
何も起こりません?

といったことが多々おこります(TT)。


エラーも表示してくれません。

だれかー Help Me !

続きを読む "Webページ開発に「FireBug」" »

2007年01月27日

「Snap Preview Anywhere」を導入してリンク先のサムネイルを表示しよう

以前、「「Link Tumbnail」で行き先確認」」というエントリーで同様のサービスを紹介しました。


同様のサービスとして「Snap Preview Anywhere」を紹介したいと思います。


実際に利用して、
Snap Preview Anywhere

Link Tumbnail
のサービスの違いを比較してみたいと思います。


続きを読む "「Snap Preview Anywhere」を導入してリンク先のサムネイルを表示しよう" »

2007年01月17日

「Link Tumbnail」で行き先確認

Link Thumbnail」は、リンクにカーソルをあわせたときに、リンク先のサムネイル画像を表示してくれるライブラリです。

「LinkThmbnail」は、javaScriptとCSSで構成されています。


リンク先に移動する前に、これから移動するホームページを
サムネイル画像で確認できれば安心というわけです。


サムネイル画像の取得は、以下のサイトのサムネイルサービスを利用しているようです。

  「websnapr
  「Alexa
  「girafa


それでは、利用方法を説明します。


続きを読む "「Link Tumbnail」で行き先確認" »

2007年01月13日

「ECS」+「Timeline」で発売日リストをつくってみました

Amazonの「ECS」から商品リストを取得して、商品を発売日順に「Timeline」で表示してみました。


作業内容は、以下のとおりです。

(A)「ECS」から商品リストを取得する
(B)「ECS」から取得した商品リストのXMLフォーマットを「Timeline」で利用するXMLフォーマットに変換する
(C)「Timeline」で商品リストを表示する


今回の作業(A)(C)についての詳しい説明は、次の記事を参照してください。
Amazon E-Commerce Service(ECS) Ruby編
「Timeline」 - スケジュール管理、年表作成だっておてのもの

(B)についても、コードを見ていただくのが早いと思いますので、以下にコードを示します。


続きを読む "「ECS」+「Timeline」で発売日リストをつくってみました" »

2007年01月11日

「Timeline」 - スケジュール管理、年表作成だっておてのもの

MITの「Smile」プロジェクトが提供する「Timeline」ライブラリを利用して、スケジュール表や年表など(以下ではまとめて年表と呼ぶ)をつくる方法を紹介します。


「Smile」はJavaScriptで書かれています。
オープンソースなので、ソースコードを読んでAjaxの勉強もできそうです。


「Smile」を利用して、年表を作るために、以下の3つのファイルを
準備します。

(A)「sample.html」: 年表を表示するためのHTML形式のファイル
(B)「sample.js」: 年表を出力するためのJavaScriptを記述したファイル
(C)「sample.xml」: 年表に表示するイベントを記述したxml形式のファイル


それぞれの、コードを以下に示します。


続きを読む "「Timeline」 - スケジュール管理、年表作成だっておてのもの" »

2007年01月09日

「PlotKit」でグラフを描こう

PlotKit」を利用してグラフを描く方法を紹介します。

「PlotKit」はJavaScriptでグラフを書くためのライブラリです。


「PlotKit」を利用するためには、「MochiKit」というJavaScriptのライブラリが必要なります。


インストール方法と簡単なサンプルを示したいと思います。

続きを読む "「PlotKit」でグラフを描こう" »

2006年04月11日

JavaScript入門

寝る前ぎりぎりになって、JavaScriptの勉強。

WDVLの解説が、まとまっていて分かりやすかった。短い時間で、JavaScriptの感じをつかむことができたと思う。これからも、リファレンスとして利用させてもらうことにしよう。


なんでいまごろになってと思う方もいるでしょうが、laszloのコードを書くためです。以前、サンプルのソースコードを参考に、いろいろいじっていました。出来上がったコードは、汚くて、見づらい。そこで、もっかい基本からやり直そうというわけです。