MOONGIFT: � JavaScriptだけのダイナミックなグラフライブラリ「ProtoChart」:オープンソースを毎日紹介
※ 画像は公式サイトデモより 最近は簡単に使えるグラフライブラリが増えてきた。Flashのものは見た目が奇麗で、画像出力のものも見やすさではひけを取らない。だがこうしたグラフは一度表示したが最後、リロードしないと変化しないものが多かった。 パイチャート そうではない、もっとダイナミックに変化するグラフを描きたい場合はこれを使ってみよう。 今回紹介するオープンソース・ソフトウェアはProtoChart、JavaScriptだけで描くグラフライブラリだ。 ProtoChartはCanvasを使って、JavaScriptのみでグラフを生成している。Canvasは本来、IE6には対応していないが、外部ライブラリを読み込むことで描画できるようにしている。これにより対応ブラウザはIE6/7、Firefox2/3、Safariとなっている。またSafariに対応しているとあって、iPhone/iPod
Prototypeベースのグラフ描画用JSライブラリ「ProtoChart」:phpspot開発日誌
ProtoChart: Prototype Canvas = Pretty Charts :: Deensoft We finally have a bit stable version of our new charting library. Prototypeベースのグラフ描画用JSライブラリ「ProtoChart」 線グラフ 棒グラフ 円グラフ 曲線グラフ などが作成可能です。 関連エントリ JavaScriptで小さくて可愛いグラフを作れる「jQuery Sparklines」 フリーのグラフスクリプト１０個
prototype.jsを用いたフォントサイズ変更スクリプト
Posted by: Hirotaka Ogawa @ January 11, 2007 02:57 PM | Movable Typeを触っている時間がとれないのですが、新年に入ってからちょっとばかしテンプレートとスタイルシートを変更して、ほぼ一カラム、ほぼfont-size: 100%で表示されるようにしました。要はレイアウトとか考えるのを最小限に留めようと思ったわけです。不得手なデザインをこれ以上考える必要がないという私個人の精神衛生上の利点に加え、読者の目にも優しくなりました。 結論: でかフォントは人を健康にします。 それだけだとなんなので、prototype.js (Prototype JavaScript Framework: Class-style OO, Ajax, and more)を使ってフォントサイズ変更スクリプト(クッキー保存機能付き)を実現してみました。これまで
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
<script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&pid=877160106″></script><noscript><a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&pid=877160106″ target=”_blank” ><img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&pid
The Backyard - JavaScriptのおもしろさ
JavaScript（ECMAScript）は、他のプログラミング言語の決まりに慣れ親しんでいると、非常に奇妙な存在です。一見すると、CやJavaから型宣言を省いただけの単純なプログラミング言語に見えます。しかし、prototype.jsやjQueryのような優れたライブラリのソースを眺めると、それが単なる勘違いに過ぎないことに気づくでしょう。 ここでは、prototype.jsのソースファイルを読むのに必要となるJavaScriptの文法のうち、特に重要な3点を説明します。これらは、JavaScriptでプログラムを記述するのに重要な役割を持つ反面、単にHTMLにアクセントを付ける程度の利用方法では出現しません。したがって、ここで説明するJavaScriptの「濃い」部分を知らなければ、prototype.jsのソースファイルを眺めても何が記述されているのか理解することはできないでしょう
【ハウツー】ゼロからはじめるFrogJS - CSS不要の画像表示ライブラリ (1) FrogJSとは? | パソコン | マイコミジャーナル
FrogJSはAjax(非同期通信処理)を利用して画像を表示するライブラリです。FrogJSはLightbox JSと同様にprototype.jsライブラリとscript.aculo.usライブラリを利用しています。FrogJSはLightboxなど他の画像表示ライブラリと比べて非常にシンプルな作りになっているのが特徴で、Lightbox同様にCSSなどのスクリプトを全く記述することなく使用できます。 FrogJSの実行結果例 関連ファイルを入手する FrogJSはこのURLにあるページからダウンロードすることができます。 FrogJSのサイト。「Download the FrogJS v1.1」と書かれた文字をクリックするとダウンロードが行われます 「FrogJS v1.1」のリンク文字をクリックしてFrogJS.zipをダウンロードする ダウンロードされたファイルはZIP形式になって
Prototype系ライブラリ サンプルプログラム
このページはAjaxライブラリの1つであるPrototypeライブラリ系のライブラリの各種サンプルコードを掲載しています。 ミスや間違い、リンクエラーなどがありましたらopenspc@alpha.ocn.ne.jpまでお願いします。 一般的なJavaScriptに関するサンプルに関しては以下のサイトを参照してください。 JavaScript例文辞典 JavaScript例文辞典（新） Last update : 2008/7/23 PM 3:53 2008 Copyright 古籏一浩(KaZuhiro FuRuhata) ■Accordion ライブラリを読み込む アコーディオンを表示する アコーディオンを縦に表示する（横にスライドし展開表示する） 展開速度を指定する 展開処理するためのイベントを指定する 最初に表示するパネルを指定する ■DatePicker ライブラリを読み込む カレ
Prototype.js1.5→1.6への移行を容易にしてくれる「Deprecation.js」:phpspot開発日誌
Prototype.js1.5→1.6への移行を容易にしてくれる「Deprecation.js」 2008年02月15日- Prototype JavaScript framework: Deprecation.js: easing the 1.5 → 1.6 transition If you’ve put off the task of upgrading your old code to Prototype 1.6, now you’re out of excuses. Prototype.js1.5→1.6への移行を容易にしてくれる「Deprecation.js」。 利用手順は以下 <script src="prototype.js" /> で読みこむPrototype.js のバージョンを1.5→1.6へ <script src="deprecation.js" />でdepre
JavaScriptのonbeforeunloadをPrototype.jsで使う:phpspot開発日誌
cl.pocari.org - prototype.js の Event.observe を使った onbeforeunload について JavaScript のイベントに、Windows が閉じられる直前に起こる onbeforeunload があります。 JavaScriptのonbeforeunloadをPrototype.jsで使う。 ページを移動しようとすると、ダイアログが表示され、移動するかどうか聞いてくる、という画面を見たことがあると思いますが、これは onbeforeunload イベントによるものらしいです。 WEBサイトでは、間違ってリンクをクリックしてしまって、誤って別のページに移動してしまい、編集中の内容が消えてしまったりすることがあります。 利用者側としては、移動する前に確認してほしい、という思いが生まれると思いますが、onbeforeunload で移動前に確
超便利で使えるprototype.jsベースJavaScriptウィジェットライブラリまとめサイト「Script.aculo.us Samplr」:phpspot開発日誌
超便利で使えるprototype.jsベースJavaScriptウィジェットライブラリまとめサイト「Script.aculo.us Samplr」 2007年09月04日- Script.aculo.us Samplr Script.aculo.us is a cool library for effects. 超便利で使えるprototype.jsベースJavaScriptウィジェットライブラリまとめサイト「Script.aculo.us Samplr」。 script.aculo.usを駆使した使えそうなウィジェットが多数公開されています。 Cash Register - 料金表示をアニメーション表示 Div Swap - DIV 部分をスライド風に切り替え iPhoto Resize - スライダーで写真リサイズ News Ticker - ニュースティッカー Select box
ありそうでなかったPrototype.jsベースの日付入力補助ライブラリ「DatePicker」:phpspot開発日誌
ありそうでなかったPrototype.jsベースの日付入力補助ライブラリ「DatePicker」 2007年09月03日- Eulerian Technologies - DatePicker using Prototype and Scriptaculous You'll find here the code and instructions for a datepicker widget using Prototype and Scriptaculous librairies. ありそうでなかったPrototype.jsベース(script.aculo.us使用)の日付入力補助ライブラリ「DatePicker」。 次のような日付入力補助機能を実装できるようです。 YUIなんかには普通にありましたが、Prototype.js ベースははじめてではないでしょうか？ 実装コードも次のように非
prototype.jsを読み解く：第1回 Prototypeライブラリ（1〜197行目）｜gihyo.jp
他のライブラリや、自分のコードと共存させるときは、これらの名前と衝突しないように気をつける必要があります。同じ名前を使ってしまうと、コードがロードされた順番によって挙動が変わる、というようなわかりにくい問題が発生してしまう場合が出てきます。 オブジェクト、クラスの使われ方 ライブラリ内では、上記の名前空間は大きく分けて以下のような使われ形をしています。 その下に別のオブジェクトを入れるための親名前空間として使う Class.create()を使って Prototypeライブラリ風のクラスとして定義する Object.extend()を使って他のクラス、オブジェクトから継承されることを前提とする関数を集める コードを簡潔に記述する為に短い名前の関数として使う 特に、Object.extend()を使って継承を実現している箇所が多く、最終的にどのオブジェクト・クラスにどのメソッドが定義されてい
prototype.jsでMacOSXのDock風ＵＩを作るJavaScriptライブラリ:phpspot開発日誌
Position Absolute : Prototype Fisheye : Another gear in the machine. The idea behind a fisheye control is a strip of icons, being vertical or horizontally laid out that reacts to the user's mouse as it approaches the icon. This control was made popular by Mac OSX "Dock". prototype.jsでMacOSXのDock風ＵＩを作るJavaScriptライブラリ。 カーソルを合わせるとアイコンが拡大されるあのＵＩをprototype.jsで実装したい場合に使えます。 その他、Dock風ＵＩ実装のライブラリを以下に。 一味違う
prototype.jsベースの伸縮するアコーディオンＵＩ実装ライブラリ「Accordion v1.0」:phpspot開発日誌
prototype.jsベースの伸縮するアコーディオンＵＩ実装ライブラリ「Accordion v1.0」 2007年07月17日- Accordion v1.0 Demo You need to include accordion.js but it requires prototype.js and effects.js prototype.jsベースの伸縮するアコーディオンＵＩ実装ライブラリ「Accordion v1.0」。 prototype.jsとscript.aculo.usのeffect.jsをベースに、mootoolsで作れるようなアコーディオン風ＵＩを実装できるようです。 なかなかカッコいいＵＩなので、prototype.jsユーザに嬉しいライブラリですね。
prototype.js で element にメソッドを追加する方法
prototype.js で element にメソッドを追加する方法 2007-07-06-1: [JavaScript] prototype.js 1.5 から $ メソッドが改良されて $('foo').show(); のように書けるようになりました． prototype.js のソースを読んでいくと Element.Methods に好きなメソッドを追加できそうなのでやってみました． Element.Methods.warning = function(element) { $(element).style.color = '#f00'; return element; }; Element.addMethods(); // addMethods しないと追加されない！ 上記は，指定された element を赤色にして警告するものです (いい例が思いつかない……)． 以下のようにし
Don't use the Prototype 1.5.1 !! (hPod)
The Prototype 1.5.1 makes Safari crash. 最近リリースされた prototype.js のバージョン 1.5.1 は、うちの Safari （ Safari 1.3.2 ）をクラッシュさせる。 困った。機能が使えないということはさておいて、 Prototype はとてもポピュラーなライブラリだから、あちこちのサイトで利用されているだろう。つまり、あちこちのサイトで、うちのブラウザがクラッシュしてしまうことに、なるだろうから。 それを発見したのは、 Prototype を拡張するほかのライブラリを試してみた時だった。とてもよいライブラリだったのでぜひ使いたかったのだけれども、どうしてもクラッシュする。がっかりした。 でもやっぱり使いたいほうが勝って、せめてどこが悪いのかその場所だけでも突きとめて、作者に「 Safari を見捨てないで」と言う願いをこめた
QuickTime動画、PDF等もLightBox風表示するJavaScriptライブラリ「lightWindow」:phpspot開発日誌
QuickTime動画、PDF等もLightBox風表示するJavaScriptライブラリ「lightWindow」 2007年04月19日- lightWindow Demo After researching every single modal window, lightbox, slimbox, etc out there nothing fit the bill. QuickTime動画、PDF等もLightBox風表示するJavaScriptライブラリ「lightWindow」。 画像、IFRAMEだけではなく、QuickTimeムービーやSWFファイル、PDFなどもLightBox風表示してしまうライブラリ。 次のようにLightBox風表示できます。 ( QuickTime ムービーを LightBox 風表示 ) ( PDFドキュメントを LightBox 風表示 ) 使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透明感のあるデザインをJavaScriptで実装する（glassbox.js） - youmos
http://youmos.com/news/reflector
Prototype.jsを使った垂直文字スクロールウィジェット:phpspot開発日誌