文章を解析して自動でGoogle Mapにアイコンを追加してくれるJavaScript「addmap.js」

0

analyse_text
addmap.jsはコンテンツの中の文章を自動解析して地名を見つけるとGoogle Map上にピンを表示してくれるスクリプトです。

使い方

使い方は非常に簡単で、JavaScriptを読み込んだ後にGoogle MapのAPIキーを指定するだけになります。

<script src="http://github.com/codepo8/geotoys/raw/master/addmap.js"></script>
</script>
addmap.config.mapkey = 'YOUR_API_KEY';
addmap.analyse('content');
</script>

日本語もOK!?

auto_add_map
ためしに日本語を設定してみた所、問題なく動作しました。ただし「日本語のみ」ではうまく動作しなかったため英語が含まれている必要があるようです。

アイデアが面白いので,使い方によっては良いかもしれません。

ブラウザ上でCSSを編集できるjQueryプラグイン「Brosho Plugin」

1

demos-usejquery-com
Brosho Pluginはサイト上でCSSの設定を変更して、一瞬で変更内容を確認できるjQueryのプラグインです。
Firebugのような機能をイメージしてもらうとわかりやすいかと思います。エディタとブラウザを交互に表示する必要が無くなるので、コーディングする際に便利かもしれません。

サイトにはデモがあるので動きを確認する事ができます。

broshoplugin

画面の文字にマウスオーバーすると赤い枠線が表示され、クリックすると画面下部のフォームでCSSを編集する事が可能です。

こういったプラグインで開発がスピードアップできると良いですね。
自社CMSに組み込んで使ってもおもしろそうです。

FirefoxでJavaScriptをデバッグできるアドオン「Venkman」

0

venkman
VenkmanはFirefoxのために作られたJavaScriptのデバッガです。
ブレークポイント管理、コールスタック監視、変数/オブジェクト監視などができるため開発者にとっては強力なツールになりそうです。

ダウンロードはMozilla addonsからダウンロード可能です。

使い方

javascript_debugger

使い方ですが、まずはデバッガを起動します。
[ツール] > [JavaScript Debugger] を選択して起動します 。

ウインドウ右下にあるコンソールからコマンドを実行します。

コマンドは以下のような形式になります。

/break [デバッグしたいファイル名] [行番号]

例)
/break jQeuery 10

このコマンドではJavaScriptを指定位置で停止させる事ができ、変数の内容などを取得する事が可能になっています。

Mozillaのサイトにて詳しい使い方も載っているのであわせてご覧下さいい。

ただ、Firefox1.5と2.0で使用する場合にはバグがあるそうです。
一度アドオンのウインドウを閉じた後に再度開けないとの事。これはFirefox側の問題だそうです。

JavaScriptの制作に関わっている方は、導入してみてはいかがでしょうか。

コンテンツスライダーを簡単に作れるjQueryのプラグイン「SlideDeck」

0

slidedeck
SlideDeckはコンテンツスライダーを作る事ができるjQueryのプラグインです。
一つのページに情報を詰め込むとどうしても見づらくなってしまうため、注目してもらいたいコンテンツを精査するためにもこういったコンテンツは良いかもしれません。
※画像は公式サイトより
※執筆時のバージョンは1.0.5a Lite

Basecampというプロジェクト管理システムの説明をしているデモがあるので、実際の動作する様子を見てみてください。

詳しい使い方は以下

スライダー表示できるjQueryのプラグイン「MopSlider」

0

mopslider
MopSliderはスライダーを作成する事ができるjQueryのプラグインです。
画像は公式サイトより

以下のサイトに実際の動作サンプルがあるので、まずはご覧ください。

クロスブラウザにも対応しているようで、 Safari4, Firefox3, Opera9, IE6, IE7, IE8 and Google Chromeで動作するようです。
詳しい使い方も載っていますので、公式サイトを確認してみてください。

ギャラリー表示やポートフォリオなど、使い方によっては変わった見せ方ができるかもしれません。
新しい表現を探している方、いかがでしょうか。

イメージギャラリーを作成する超軽量のjQueryプラグイン「bxGallery」

0

bxGallery
bxGalleryはサムネイル付きのイメージギャラリーを作成するためのjQueryプラグインです。

htmlでリストを作成し、パラメータを指定してあげるだけで動作するようです。
オプションでは、サムネイルの不透明度やサムネイルの位置(上下左右)などが指定できるようです。

詳しくは以下

iPod風ドリルダウンメニューを作成する事ができるjQueryプラグイン「iPod-style drilldown」

0

ukn_bor
iPod-style drilldownはiPodのメニューのようなドリルダウンしていくメニューを簡単に作れるjQuery用のプラグインです。

このプラグインを使用すると、階層データをたどって目的のデータを取得する動作がかなり快適になります。
複雑にネストされた階層構造をプルダウンメニューひとつでたどっていけるため、実装するとかなりのユーザビリティー向上につながるのではないでしょうか。

IEをcss3に対応させる事ができるJavaScript「ie-css3.js」

0

qs2_bor
ie-css3.jsはInternet Explorerでcss3を使用可能にするライブラリです。
インラインのCSSには対応していないようですので、<link>タグを使用して外部cssにする必要があります。

詳しくは以下

HTML5用のjavascriptフレームワーク「SproutCore」

0

qs2_bor
SproutCoreはHTML5で使用できるJavaScriptのフレームワークです。
HTML5に対応するアプリケーションを作成する際に気になるのが、クロスブラウザ対応です。

HTML5自体はまだまだ実案件では難しいと思いますが、
こういったフレームワークを使用することで開発に時間をかけないようにすることができるのではないでしょうか。

このフレームワークの特徴として、ボタンやチェックボックスなどのUI部品を提供してくれているようです。

dc3_bor
サイトにはデモが設置してあるので、どんな事ができるかチェックして見てはいかがでしょうか。

javascriptでグラフを描画できるライブラリ「Bluff」

0

index
Bluffは画像を一切使用せずにHTMLでグラフを作成する事ができるライブラリです。

以下のようなコードでグラフがかけるようです。

  

  

テーマを変更する事で簡単に外観を変更できるようです。
テーマの変更方法は以下のコードを挿入するだけのようです。

<script>
g.theme_keynote();
g.theme_37signals();
g.theme_rails_keynote();
g.theme_odeo();
g.theme_pastel();
g.theme_greyscale();
</script>