【ハウツー】ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示 (1) ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示 | パソコン | マイコミジャーナル
ThickBox 3とは? ThickBox 3はAjax(非同期通信処理)を利用して画像を表示するライブラリです。同じようなライブラリとしてはLightbox)が有名ですが、Lightboxはprototype.jsライブラリを利用しているのに対し、ThickBox 3はjQueryライブラリを利用しています。ThickBox 3の画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもできます。また、画像だけでなくHTMLファイルなども表示させることができるので、いろいろ応用できそうです。Lightboxと比べてもThickBoxの方がプログラムサイズがコンパクトなことも魅力です。 ThickBox 3の大きな特長としてスクリプト(プログラム)を記述しなくてよいという点があります。つまり、全くプログラムが分からない人手も気軽に使うことができます。ThickBo
DojoがGoogle Gearsに対応 - Dojo Offline 0.9 beta SDK | エンタープライズ | マイコミジャーナル
The Dojo Foundationは6日(米国時間)、Dojo Offlineの最新版となる「Dojo Offline 0.9 beta SDK」を公開した。Dojo Offlineはオフラインモードに対応したWebアプリケーションを開発するためのツールキット。Googleから公開されているGoogle Gearsをベースとして動作するように変更されている。 この新しいDojo Offlineを使うことでGoogle Gearsとの連帯が容易になるほか、Google GearsよりもハイレベルなAPIの提供、機能の拡張、開発効率の向上などが実現されている。主な新機能は次のとおり。 Webページの簡単な組み込み、ネットワークフィードバックの提供、メッセージの同期、オフラインインストラクションなど多くの機能を提供するオフラインウィジェットの導入 オフライン時にアクションをストアし、ネットワ
Javascriptでdiffる ( with 形態素解析 ) (nakatani @ cybozu labs)
Javascript で diff というのはいくつか試された例はあるようですが、まだこれといった決定打は出ていない様子です。 実は diff は見た目ほど軽い処理ではないので、Javascript にやらせるのはこれが結構大変…… diff の計算量は、おおざっぱに言うと比較対象の要素数の二乗に比例し（実際にはそれより小さくすることができるのですが、まあ話のイメージとして）、かつメモリを大量に消費するので、バッチ的な処理に最適化されていない Javascript にはどうしても荷が重いものとなってしまいます。 比較対象の要素数を減らせば当然計算量は減りますが、行単位で比較してもあまり嬉しくない（わざわざ Javascript で処理するということは自然文が対象と思って良いでしょう）。最小の文字単位だとギブアップ。 ということは形態素解析で分かち書きして、単語単位で diff するのが J
【ハウツー】ゼロからはじめるLightbox 2.0 - 簡単にWebで写真アルバム機能を (1) Lightbox 2.0とは？ | パソコン | マイコミジャーナル
Lightbox 2.0とは？ Lightbox 2.0はAjaxを利用して画像を表示するライブラリです。画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもできます。 Lightbox 2.0の大きな特長としてスクリプト(プログラム)を記述しなくてよいという点があります。つまり、全くプログラムが分からない人手も気軽に使う事ができます。Lightbox 2.0ではHTMLの<a>タグのrel属性にlightboxの文字を記述するだけでできてしまうという手軽さです。また、JavaScriptのコードが実行できるブログであればLightbox 2.0を利用することができます。 Lightbox 2.0は作者であるLokesh Dhakar氏のサイトからダウンロードすることができます(*1)。 「Lightbox2のダウンロードサイト」 「Lightbox v2.0
【ハウツー】ゼロからはじめるGlider - Gliderではじめるスライドショー (1) Gliderとは? | パソコン | マイコミジャーナル
Gliderとは? Gliderはスライド表示を行うためだけのシンプルなライブラリです。ただ動作がユニークで、コンテンツ次第ではなかなかユニークな印象を与えられる機能を備えています。下の図はGliderを使った画面の移り変わりです。左から右へと流れるようにコンテンツを表示させることができます。コンテンツにアクセントを付けたいような場合などに有用なライブラリとなります。 Gliderサンプルの実行。左から 右へと流れるようにスライドする Gliderはprototype.jsライブラリとscript.aculo.usライブラリを利用して作成されています。シンプルなライブラリなので単純にスライド表示を行うだけであればスクリプトを数行記述するだけで動作します。GliderはこのURLにあるページからダウンロードすることができます。 project page to download or chec
【ハウツー】ゼロからはじめるreflection - ブログではじめる逆さ富士!? (1) reflectionとは? | パソコン | マイコミジャーナル
reflectionとは? reflectionは画像の下側に反射効果を施すだけのシンプルなライブラリです。ただ、使い方のアイデアによっては、面白いこともできます。下の図は、富士山のJPEG画像を読み込んだけのものと、reflection.jsを使って「逆さ富士」を表現したものです。実は「逆さ富士」の方の画像ファイルは、上向きの富士山の画像ファイル1枚だけです。富士山を「逆さ」にしているのが、本稿で解説するreflection.jsというライブラリが果たしている役割ということになります。 reflection.jsを使ったページ reflection.jsを使わないページ reflectionは他のライブラリを使用しませんが、動作するブラウザは多少限定されます。<canvas>タグが利用できるブラウザかInternet Explorerでないとreflectionは動作しません。ただ、表示
ブログでも使える画像をポラロイド風にさせるJavaScript『Instant.js』
↑上のような画像群を、JavaScriptスクリプトで制御して このようにポラロイド写真風に表示させる事が出来る代物。 このブログでも試してみたけどとりあえず導入できるようで、画像の編集などあまりしないようなブログの方にはいいかもしれない。 写真の加工が素敵 このように色々と加工が可能です。 instant.jsのダウンロードは以下サイトで。 http://www.netzgesta.de/instant/ このライブラリを使用するページのmetaタグ部の下に <script type="text/javascript" src="instant.js"></script> という感じでJavaScriptを呼び出し、指定されたclassをイメージ画像につけたします。 上のロゴの加工サンプルは以下に <img class="instant itiltright" style="positi
Glossy.js (now with IE 6/7 support)
Initialisation class "glossy" vary the radius by adding iradius followed by the desired radius in percent of half of the smaller picture dimension: Corner radius class "iradius25" - min=20 max=50 default=25 vary the shadow by adding noshadow: Noshadow class "noshadow" - default=false vary the background by adding ibgcolor followed by the desired color as hex: Background color class "ibgcolor" - mi
javascriptを理解するためのたった2つの大切なこと
9割ぐらいはハッシュ何がハッシュなのかjavascriptで存在するほとんどのオブジェクトの実体はハッシュだよ。 var arr = [0,1,2,3]; とかをみると配列(人によってはリスト)に見えると思う。でも実際は違うんだ。 これは var has = {0:0,1:1,2:2,3:3}; と基本的には等価なんだ。ただちょっと束縛されているメソッド(インターフェイス)が違うだけ。 ためしに arr[4] = 4; arr['x'] = 'string'; arr[-1] = -1; としてみよう。 Firebugで確認してみると[0, 1, 2, undefined, 4]というような値がかえってくるよ。 でもarr[-1]やarr['x']の値は保存されてないのかな？そんなことはないちゃんとアクセスできるんだ。 それどころかarr.xで'string'がかえってくるんだ。 別の例を
PrototypeがSafariでのクラッシュバグを修正 - アップグレードを強く推奨 | エンタープライズ | マイコミジャーナル
Tobie Langel氏は19日(米国時間)、Prototypeの最新版となる「Prototype 1.5.1.1」を公開した。PrototypeはJavaScriptで実装された軽量なAjaxフレームワーク。代表的なAjaxフレームワークの1つに数えられ、現在人気があるフレームワークの中にはPrototypeで実現されたテクニックを取り込んでいるものも少なくない。 1.5.1.1はバグフィックスリリース。Safari 2.0.xおよび1.3で閲覧した場合に発生するクラッシュ問題を解決するもの。同氏はPrototype 1.5.1を使っているすべてのユーザに対して同1.5.1.1へのアップグレードを強く薦めている。 修正される以前のPrototypeには、Safariの正規表現エンジンにおける処理に問題があり、scriptタグを含んだHTMLの要素の更新処理や、組み込みのセキュリティチェ
Interface.jsで簡単スムーススクロール - Emotional Web
This domain may be for sale!
MacOSXデザインのウィンドウをWEBで表現するAjax導入方法*ホームページを作る人のネタ帳
今回はMacのウィンドウをあなたのサイトに導入してみよう。 prototype.jsを使ったウィンドウを作るためのJavaScript。 まず必要なファイルや導入方法は以下に書いてある。 http://prototype-window.xilinus.com/ ところが、英語が苦手な人なら間違いなく導入を敬遠してしまうのではないかと思うほど、ダウンロードしたファイルがわかりにくい。 ダウンロードしてみると色々なサンプル、デモがありますが、今回はそこからさらにわかりやすいように分解してみようかと思います。 サンプルを見る 著者で発行されているAjaxファイルの中にあるサンプルで、わかりやすいものをまず使ってみましょう。ためしに私のサーバーでアップしてみました。 サンプルデモ 個人的に、ウィンドウの位置をクッキーで覚えさせているところがすごいポイント高いと思っています。 背景黒のボタンがOSX
画像に簡単にポラロイド風エフェクトをかけられるJavaScriptライブラリ「Instant.js」:phpspot開発日誌
FlashとAjaxを使った使いやすいファイルアップロードライブラリ「FancyUpl... 次の記事 ≫：16x16ピクセルの芸術的favicon集 Instant.js Instant.js 1.0 allows you to add an instant picture effect (including tilt) to images on your webpages. 画像に簡単にポラロイド風エフェクトをかけられるJavaScriptライブラリ「Instant.js」 次のように、画像をポラロイド風にすることが出来ます。使い方も簡単で、画像の class 属性に定められたclass名を付けるだけ。 使い方は、まず、<script type="text/javascript" src="instant.js"></script> でinstant.js を読み込んで、 画像にcl
Flash と Ajax を使った使いやすいファイルアップロードライブラリ「 FancyUpload 」
digitarald FancyUpload Swf meets Ajax for beautiful uploads. The release of the long awaited MooTools upload widget thats allows queued multiple-file upload including progress bars. FlashとAjaxを使った使いやすいファイルアップロードライブラリ「FancyUpload」。 FancyUpload を使えば、インタラクティブで複数ファイルのアップロードも簡単な、次のようなアップローダーが作れます。 「Browse Files」ボタンでファイルを選ぶと、右側のペインに アップロード予定のファイルとして追加されます。 「Start Upload」ボタンによってファイルのアップロードを開始します。 アップロードの
Web Browser Javascript Benchmark « Celtic Kane Online
How does your favorite browser’s Javascript engine speed compare to other popular browsers? The speed of your browser’s Javascript is becoming more and more important because of Web 2.0’s reliance on Ajax and complex Javascript libraries. I have written a benchmark test, which you can run on your machine at home, to compare the newest versions of Internet Explorer, Opera, Safari, and Firefox. How
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://youmos.com/news/accordion_js
http://youmos.com/news/jcarousel_lite
cyano: なぜCSSは先でJavaScriptは後に読み込ませることが推奨されるのか
http://youmos.com/news/import_js
textareaをたった一行のコードで拡張してくれる『WMD-editor』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
