Couloir.org: Resizing, Fading Slideshow Demo (November 28, 2005)
About this Slideshow » This photo slideshow is a demonstration of Flash-like behavior implemented solely in Javascript, HTML, and CSS. The code is offered as-is — Couloir.org offers no technical support. However, you are permitted to use it on your own project so long as you do so according to the rules outlined in the Creative Commons 'Attribution-ShareAlike 2.0' License and the license terms con
ABAの日誌
せっかく最近ECMAScript触っているので、前にヨタで言っていた、Google Maps APIでスクランブルフォーメーション(id:ABA:20050711#p1)をやってみようと思って、挫折。やっぱきつい。まあもともとこんな使い方をするためのものじゃないから、当たり前といえば当たり前。 一応途中まであがいた跡がこれ。ビットマップはゲーム製作技術板/シューティングゲーム製作技術総合スレの素材を利用させてもらっている。 Google Maps APIシューティング挫折版(http://www.asahi-net.or.jp/~cs8k-cyu/javascript/gma_shmup_test/) 重すぎる。フレームレートもばたつきすぎ。やっぱりスプライトをマップ上のマーカーで代用するのに無理がありすぎた。 単に挫折だけだともったいないので、作っている最中に分かったことを適当に書いてお
Javascript のみによるイメージ拡大鏡 | 秋元@サイボウズラボ・プログラマー・ブログ
ハンガリーから美しい Javascript の佳品。イメージの部分拡大するルーペ機能を、Javascript だけで実現している。 カーソルの上下で拡大率を変えられるし、左右ではルーペの大きさも変えられる。すばらしい。自分のページに組み込むのも簡単だ。 写真は フォト蔵 から まさと さんによる CC by による公開。ルーペで養老の滝のフォントを探求しよう。 追記: 2006-03-02 BubbleShare という写真共有サイトで、この効果を使った拡大鏡がついた (via TechCrunch) この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘いただければ幸いです。最新の状況を調べて新しい記事を書く
既読リンクを隠すブックマークレット
いまだにかとユーとか見てる人がたくさんいるみたいなので 既読のリンクを隠すブックマークレットを作ってみました。 IE用 : 既読隠す Firefox/Opera用 : 既読隠す フレーム対応とかは誰か暇な人がやってくれると助かります。 ---- すでに表示されているHTMLにCSSルールを追加する方法は JavaScriptでプレビューつきCSSエディタ http://tokyoenvious.xrea.jp/b/javascript/css_editor_2.html を参考にしました。
最速インターフェース研究会 :: 全てのWeb開発者必見：fluxiom
fluxiomである。 http://www.fluxiom.com/ fluxiomはRuby on Railsで作られた、ソーシャルとタギングを備えたオンラインファイラーというようなものらしい。まだサービス開始していないが、デモムービーが公開されている。 fluxiomを開発している会社はscript.aculo.usの開発元ということであるので、 当然「Rails + prototype.js + script.aculo.us」で作られている、ということになるのだろう。 と思ってみたら、開発者のBlogに追記されていた。「Ruby on Railsで作られていて、Flashは一切使っていない」ということである。 http://mir.aculo.us/articles/2005/11/24/fluxiom script.aculo.usは「web2.0 JavaScript」だそう
prototype.js v1.5.0 の使い方
それは何？ prototype.js は Sam Stephenson によって書かれた JavaScript ライブラリです。 この熟考の上記述された標準に準拠したコードは、Web 2.0 において特徴となるリッチでインタラクティブなウェブページを制作する際の重荷を、あなたの肩から取り去ってくれるでしょう。 もしこのライブラリを使ったことがあるなら、充実したドキュメントがこのライブラリの売りではないことに気がついたはずです。 私は他の開発者と同様に、ソースコードを読み、試行錯誤しながら prototype.js を理解しました。 自分が学んでいる間にメモを取り、それを他の人たちと共有することは価値があるのでは、と考えたのです。 加えて、このライブラリによって提供されているオブジェクト、クラス、関数、拡張機能についての 非公式リファレンス も提供しています。 ここで提供する例とリファレンス
はてな記法ワープロ
*はてな記法JavaScript はてな記法ワープロは JavaScript ならではの利点を生かしたダイナミックなワープロです。 試しに色々入力してみてください。即座に出力画面が反映されます((Windows 版 IE6 および Firefox 1.0 でのみ確認しています))。 はてな記法の変換は <a href="http://search.cpan.org/dist/Text-Hatena/">Text::Hatena</a> を JavaScript に移植した "text-hatena.js" を活用しています。 **変更履歴 |*2005/12/1|ソース機能追加 (HTMLソースを表示できます)| |*2005/11/21|はてな記法ワープロ完成| |*2005/11/13|text-hatena.js 移植開始|
text-hatena.js 公開 [tech.nitoyon.com]
本家 Text::Hatena で HTML::Parser を用いている部分は実装できていません。 URL の自動リンクや HTML のエスケープなどは実装できていません。 Cookie を利用するようなサイトに text-hatena.js を利用するのはお勧めできません。 ライセンスは Text::Hatena と同等とします。 技術的なアレコレ Perl と JavaScript って意外と似てるよね、というところから出発しました。特に、Text::Hatena のソースコードはそのまま JavaScript に置き換えられるぐらいに洗練されたコードです。例えば、Hatena.pm の一部に次のようなソースがあるのですが sub parse { my $self = shift; my $text = shift or return; $self->{context} = Text
![text-hatena.js 公開 [tech.nitoyon.com]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0152b5a283748a3bce479101d22b9b4c157d2c27/height=288;version=1;width=512/https%3A%2F%2Ftech.nitoyon.com%2Fapple-touch-icon-114x114.png){kind=icon}
Google Mapsでレーシング / 走っているように見える仕組み [tech.nitoyon.com]
Google Mapsで鈴鹿サーキット試走 で使っているテクニックを紹介します。 ゲームのソースを見てみてください。なんと、JavaScript 部分は70行ほどです。かなり少ないですよね。たった、70行でゲームを作れてしまうのは、これから説明するような単純な方法で実装しているからなんです。 実は動いていない車 ゲームをプレイしているといかにもドライブしているような感覚になりますが、実は車は回転するだけで、車の表示位置は変わっていません。動いているのは背景の地図だけなのです。 車の表示位置は動いていないのに、走っている感覚になるんですね。こういう表現って、8ビットゲーム機時代にはよくありました。たとえば、スーパーマリオでも、マリオが全速力で走っているときは、マリオの画面中の表示位置は変わらないまま、背景が動いているだけでした。 では、車はどうやって回転させているのでしょう。 バッファリング
テキストによるプログレスバーを実現するライブラリ ProgressText.js
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
最速インターフェース研究会 :: キー割り当て用ライブラリを作った
依頼を受けて作ってみた。 http://la.ma.la/roll.html http://la.ma.la/js/hotkey.js j,kでスクロールできる。 使いまわしがきくように他のライブラリに依存も影響もしないように作ってあります。Bloglinesのj,kでスクロールみたいなのを作りやすいようにするのが目的。ただsafariとかは何かかなり違うらしいので、そこらへんは良く知らない。あとOperaはデフォルトでワンキーショートカットが割り当てられてたりするので動くとは限らない。 全体に対してキーイベントを設定すると、フォームの入力ができなくなるっていう問題があるのでイベントの発生元がinput|textareaの場合は処理しないようにしてある。 追加したコードはこんな感じ。 var kb = new HotKey; kb.add(["j","2","down"], functio
JavaScript::Bookmarklet Blog: 消す！
消す！ 消す！ このBookmarkletを使用すると、ページ内の見たくないエレメント要素部分を選択的に消すことができます。 このBookmarkletを起動後、ページ内の画像やテキストやテキストフィールドにマウスを重ねるとその部分がグレーの選択状態になりますので、クリックすると選択部分が画面から消えてなくなります。 スクロールせずに読んだものから消していく、という読み方ができるので便利かもしれません。 WindowsのIE6とFirefox 0.8、そしてOperaで動作確認しました。 投稿者 bookmarklet : 2004年05月18日 17:02 | トラックバック 初めまして，naoKといいます。 以前から"あー便利そうなものがいっぱいあるなー"と読ませて頂いておりましたが，今回trackbackさせてもらいました。 このscript，うちのopera7.50(en)で利用さ
こせきの日記
Mozillaで実装されているselectionStart/selectionEndをIEでも使えるようにする、Selection.jsを公開しました。 IEのTextRangeオブジェクトは、 range.textを書き換えると選択範囲末尾の改行が消えてしまう。 選択範囲の前後のコンテクストを見て処理を行うのが難しい。 のような使いにくい点があります。 これは、HTMLの書き換えでは問題にならないかもしれませんが、テキストエリア内の文字列を書き換える場合にやっかいな問題を引き起こします*1。 一方、MozillaのselectionStart/selectionEndは、textarea.valueに対する文字列操作として実装できるため、余計な心配が要りません。 というわけで、クロスブラウザなselectionStart/selectionEndを実現するSelection.jsを作成し
はてなマップの prototype.js による Object.prototype 汚染の弊害
以前からprototype.jsでObject.prototypeが汚染されてしまうのは問題になっていた。詳しくはノゾキ日記やアルファニート2.0の人がまとめている。先日はてなマップが正常に動かなくなったときいて、そういやはてマってprototype.jsつかってるからそのせいじゃないかな、と思って昼間検証したところ(有休バンザイ！)ドンピシャだった。 で、Rails追っかけやprototype.js追っかけの人は知ってると思うんだけど、最近のprototype.js(prototype.js 1.4.0_preからかな？)ではこのObject.prototype汚染がマズイと思ったのか、Object.prototype拡張がなくなった。そのため、継承は以前では ExtendKlass.prototype = (new Klass).extend({}); と書かれていたのが、 Exten
最速インターフェース研究会 :: 実践JavaScriptリファクタリング、その2
連載すんの？ リファクタリングとか嘘で実は実践ビルトインオブジェクトハックなんだけど。 例題 配列 a = [3,5,4,2,1] から一番小さな値と、一番大きな値を取り出すにはどうすればいいか。 多分昔はこんな風に書いてたと思うんですよ。 a = [3,5,4,2,1]; for(i=0;i<a.length;i++){ if(i == 0){ min = a[0]; max = a[0]; } if(min > a[i]){min = a[i]} if(max < a[i]){max = a[i]} } 模範解答として、後先考えないやり方を提示しておく。 a = [3,5,4,2,1]; min = a.sort().shift();// 1 max = a.sort().pop(); // 5 短い。ただし、これをやるとaの内容は並べ替えられて最初と最後の要素が取り除かれる。 a /
最速インターフェース研究会 :: 実践JavaScriptリファクタリング
同じ事をやるにも、いろんな書き方があるわけでいかにして短くてわかりやすいコードを書くかというノウハウを紹介します。 例として"abcde"を80回繰り返した文字列を作るとして実際に自分のコーディングスタイルがどんな風に変化していったのか、という。 短くなるのは確かなんだけどわかりやすいかというと、人によるかもしれない。 グローバル関数を定義2年前なら、多分こういう具合だった。 //ふつうに関数として定義する function x(str,num){ var tmp = ""; for(var i=0;i<num;i++){ tmp += str; } return tmp; } x("abcde",80) Stringのメソッドとして定義1年前だとこんな感じ。 //Stringのメソッドとして定義する String.prototype.x = function(num){ var tmp
ブラウザ上でお絵かき: Days on the Moon
「Ajax を使った手書き文字認識」を見て。ここでは線を描くのに絶対配置の span 要素を大量生成しているけど、最近のブラウザってベクター描画エンジン付きのものが多いわけで。WinIE 5 以降の VML 、Opera 8 ・ Firefox 1.5 以降の SVG 、Safari 1.3 ・ Firefox 1.5 以降の canvas 要素といった具合に。 ということで各ブラウザでベクター描画エンジンが使えればそれを使い、なければ絶対配置の HTML 要素を大量生成することで、ブラウザ上でお絵かきできるというものを作ってみた。元に戻す / やり直すこともできる。線を描くだけで塗りつぶしはできないが。 その線を描くために作ったのが DrawingCanvas クラス。以下のようにすることで三角形が描ける。実際の描画部分には SVG Tiny 、HTML Canvas 、CSS Posi
rico.jsによる「もっと読む」機能の実装 - higepon blog
id:higepon:20050914:1126689576の続き。 Effect::Sizeを使う場合、隠れた部分の height が事前に分からないと厳しいと書いたところ。 http://synklab.net/blog/?itemid=74の中の人からトラックバックが来ました。 この問題を、非常にスマートに解決しています。 ポイントは var entries = document.getElementsByClassName(className); for (var i = 0; i < entries.length; i++) { var e = entries[i]; showing[e.id] = false; saveHeight[e.id] = e.offsetHeight; e.style.visibility = 'visible'; e.style.overflow
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://collisions.dotimpac.to/study/javascript/JavascriptAnyWhere.html
moo.fx