本ドキュメントははてなブックマークコメントをその場で表示するライブラリについての解説です。主にはてなスタッフがその作成と更新を行っています。

perlのWeb::Scraperみたいな記述で、ページの中からデータを取り出すwebscraper.jsという小さなjavascriptのライブラリを書きました。 ブックマークレット データを取り出したいページでブックマークレットでwebscraper.jsを読み込んでFirebugコンソールで使います。 ブックマークレット webscraper コードwebscraper.js つかいかた Web::ScraperのSYNOPSISで例としてあげられているebayでapple ipod nanoを検索した結果からデータを取り出すときは 検索結果ページで上のブックマークレットを呼び出してFirebugコンソールで取り出す部分を記述します。 こんなかんじ。 SYNOPSISのperlのコードで変数$ebay_auctionに一度代入されている部分をそのままインラインで書き直すと my $e
Features Interactive: Features such as Hints, Mouse Tracking, Mouse Events, Key Tracking and Events, Zooming, Scrolling, and Crosshairs raise interactivity and user experience in web charting to a new level. Axis Scaling: There's no need to determine your data range before hand. EJSChart will calculate and scale automatically to fit whatever data it is presented with. Auto Zooming, Scrolling: Too
JavaScriptライブラリExtを使った伸縮するクールメニュー実装ライブラリ「Ext.Accordion」 2007年06月20日- Ext.Accordion Widget Example by Saki This page is about the InfoPanel and Accordion javascript classes and its purpose is to allow the potential users to get the feel-and-touch of the user interface they provide. It contains also step by step instructions on how to integrate the Accordion to a web page. JavaScriptライブラリExtを使った伸縮する
valid.tjp.hu - tjpzoom.js 2.0 - JavaScript / CSS / DOM image magnifier As you may have realized, this is a tool that brings images closer. This is the new version of my script, tjpzoom. 画像カーソル位置をズームインできるライブラリ「tjpzoom.js」。 次のように、カーソル位置の画像をズームできます。 知っておけば、ウォーリーを探せ風の簡単なゲームを作ったり、サイトのキャンペーンとしての面白い1要素として使えそう。 設置方法は簡単で、まず、次のようにスクリプトを読み込みます。 <script type="text/javascript" src="http://valid.tjp.hu/zoom2/tj
A javascript animation experiment What's this all about? (AKA, "Holy pointless lightshow, Batman!") Fireworks.js is a bit of Javascript that creates starburst-type explosions in a web document; in short, it's a fireworks effect someone could theoretically use on their site. And come on, who doesn't want something like that? As far as appropriateness is concerned, this effect could be compared to t
C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」 2007年03月26日- google-code-prettify - Google Code A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page. C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ「google-code-prettify」。 具体的な対応言語は、Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, Ruby, PHP, Awk, Perl のよ
[2006/10/31] php-jsonはPHPのソースツリーに取り込まれ、PHP5.2.0からデフォルトで組み込まれるようになります。 Web2.0の盛り上がりに連れてますます盛り上がっているAJAXですが、非同期通信でやりとりされるデータフォーマットとしては、 XML形式 JSON(JavaScript Object Notation)形式 があります。以前AJAXのサンプルを作ったときはデータはXML形式でしたが、(今更ですが)今回はJSONを色々試してみます。 PHPでJSONを扱う場合、現時点で以下の二つのモジュールがよく知られています。いずれも配列・連想配列などをJSON形式へ変換する機能を提供しています。 PEAR::Services_JSON php-json 今回はこれらのインストール手順のまとめと簡単な動作サンプルの作成、前回の郵便番号検索をそれぞれのJSONに焼き直
XML.ObjTree クラスは、Perl 用の XML::TreePP モジュールの JavaScript 版です。 XML ファイルと JavaScript オブジェクト(連想配列)間の相互変換を行います。 prototype.js または JSAN の HTTP.Request クラスと併用することで、 JKL.ParseXML の 後継 としても利用できます。 ECMA-357 の普及を待たずに、 ECMAScript for XML (E4X) 風のXMLのオブジェクト利用が可能になります。 Intel Mac 版の Safari で、 DOMParser オブジェクトの async プロパティが read-only となる点にも対応しています。 IE で(サーバ上でなく)ローカルのXMLファイルを開きやすくなりました。(2006/08/14) オンラインDEMO DEMO(お試
これはオブジェクト指向JavaScriptライブラリ PrototypeのEffectのサンプルです。付属のサンプルにちょっと手を加えてちょっ と日本語訳したものです。 Effect.Fade() & Effect.Appear() 呼び出し方法 new Effect.Appear(element) new Effect.Fade(element) コード例 onclick="new Effect.Appear('appear')" onclick="new Effect.Fade('appear')"
完全にphotoshopと同様の機能 以下にサンプル。 サンプルデモ どうみても使い慣れたピッカーにしか見えない。 すごいのがドラッグとか色々できて、スムーズに色も変化していく点。 実物と比較しても違いがほとんどありません。 対応ブラウザも多数 この作者のエントリから、対応ブラウザが公開されていました。 ・IE5.5 ・IE6 ・IE7 ・firefox2 ・Opera 9 ・Safari 2 幅広いカバー率です。 でも、1つだけ問題。 一応ダウンロードしてローカルで確認したところきちんと動きましたが、またもや私のレンタルしているサーバーにアップしても動かないと言う症状が現れました。 ただ、使える人も多数いるようなので、ご紹介だけはしておきますね。 皆さんも一応使うときはご確認を。 ダウンロードは以下ページの以下の画像を参照してください。 PhotoShop-like JavaScript
YUI: Mouse Gestures JavaScriptを使ってページにマウスジェスチャ機能を実装するサンプルが公開されています。 基本ライブラリにはYahoo UI Libraryを使用しています。 画面上の灰色部分を左クリックしながらマウスジェスチャを行うことでアクションを起こすサンプルになっています。 コードは次のようになっています。 最初に、マウスの向きと関数名を関連付けた連想配列を定義して、YAHOO.widget.Gestures.init に渡しています。 後は関連付けた関数の中身を定義するだけという実装の容易さとなっています。 <script type="text/javascript"> var config = { 'left': test1, 'right': test2, 'up': test3, 'down': test4, 'upleft': test5,
This is a fun effect I built for Chowhound that does one better for mouseovers. The problem with most menu systems is that they’re really touchy whether you’re too fast or slow with the mouse. The trick is to use a timeout with the effect, so it will wait a fraction of a second to pop-up, and a fraction of a second to go away…just enough to make the effect feel solid and not finicky. I won’t take
追記 [20061103]: ライブラリ非依存なバージョンも書いてみました。id:reinyannyan:20061103:p1 でご覧下さい。 最近自分で書いた JS プログラムが驚くほど重かったので、どこに原因があるか調べたいと思いました。 その方法として、怪しいと思う箇所に (あるいは思わない箇所にも) 手作業でタイマーを仕掛けて、部分部分の実行時間を計測するのも手だと思うんですが、クラスのどのメソッドでどのくらい時間が掛かっているのかが自動的に分かる、というのが理想的かなと思いました。 (以下、prototype.js 的な (OO 的な) コーディングを対象とした話になります) まず思いついたのは、プロファイルしたいクラス (function オブジェクト) を受け取って、メソッドを動的に書き換えるという方法です: for (var m in klass.prototype) {
※ 画像は公式サイトデモより これはクール! 思わず使い道を考えてしまった。Mac OSXではダイアログがウィンドウの上部から出てくる。あの表示が何となく好きという人も多いだろう。あれを実現するJavaScriptがこれだ。 今回紹介するオープンソース・ソフトウェアはModalBox、ウェブベースのポップアップ&ウィザードだ。 簡単に言えば、ウィンドウの上から出てくるポップアップだ。表示していた画面はグレーアウトするので、そのダイアログだけに集中できる。Ajaxを使うことも、使わないこともできる。簡易的なものであれば使わずに手軽に利用できそうだ。 そして、ウィザード形式に操作を進めることもできる。例えば問い合わせフォームや、アンケート、友人へのメール等わざわざ画面を切り替えて操作するには及ばないようなものに使えそうだ。 表示のされ方がかなり格好よく、使い道も多そうだ。prototype.j
« ← → » Control.Tabs is fully programmable, so in the example above the links are programmed to change which tab is active, and an event handler is registered to change the select box (and visa versa). The tabs can also be trigged via hovering, and need not even look like tabs. The example below use images instead of divs, and the "hover" option. See the API section for more details. View source o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く