最速インターフェース研究会 :: [Ajax] location.hashを使ったセッション復元
最近になってようやくJavaScript関係、動的ロードを使ったテクニック等について 話せる相手ができまして、、なかなか充実しています。 Gmail、GoogleMapsのような画面遷移なしの高速なナビゲーションが注目されています。 サイトが特定のタスクに対して特化している場合、JavaScriptを使ったインターフェースの最適化が非常に有用であるのは間違いありません。 ブラウザ上で動作するリッチクライアントとしてはFlashが圧倒的に有名ですが、Flashは、ブックマーク、ブラウザの戻る進む機能、文字の拡大縮小、などのブラウザが本来備えている機能が使えないため、ユーザビリティ研究者の間では嫌われ者です。 http://d.hatena.ne.jp/nazoking/20050226 というわけで、AjaxがFlashのような使い方をされないような実装例を考えてみたいと思います。 一つは、
Latest topics JavaScript 1.7のyield文ってなんじゃらほ - outsider reflex
Latest topics > JavaScript 1.7のyield文ってなんじゃらほ 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « mod_estraierでの履歴全文検索（ミラー） Main 年金の追納 » JavaScript 1.7のyield文ってなんじゃらほ - Aug 07, 2006 JavaScript 1.7 の yield が凄すぎる件についてを見てもyieldってそもそも何なのかちいとも分かっとらんかったのでそこから調べてみた。 yieldはreturnの仲間？ そもそもこのyield文というのは、JavaScriptと同じくスクリプト言語のPythonから持ち込まれた仕組みらしい。ジェネレータとは何ぞやで読める例を
JavaScriptファイルに引数を渡す
前回のエントリで触れたscript要素のsrc属性に指定したJavaScriptファイルに引数を渡す方法。ネタ元はscript.aculo.usで、script.aculo.usでは読み込むライブラリを指定するために使っている模様。引数が指定できるというのは夢が拡がる(った)。 asamashi.jsでは以下のようなコードで引数に指定したASINコードを取得している。 $A(document.getElementsByTagName("script")).findAll(function(s) { return (s.src && s.src.match(/asamashi\.js(\#.*)?$/)) }).each(function(s) { asin = s.src.replace(/http:\/\/hail2u\.net\/pub\/test\/056_asamashi\.js\
簡単な記述でアサマシ
アサマシするにははてなダイアリーのisbn/asin記法が最強。比較的環境を選ばずに、ああいったソラでも打てるフォーマットでアサマシできれば良さそうだなというわけで作ってみた。面倒かなとか思ったけど、助言が多かったので結構簡単だった。 結果として、複数のアサマシも可能だとかそんな感じのサンプルが出来上がった。アクション！ 具体的には、アサマシHTMLコードを挿入したい場所に、 <script type="text/javascript" src="http://example.com/asamashi.js#{ASINコード}"></script> こんな感じできれば良いかなというイメージで考え始めた。 script要素のsrc属性に記述されたJavaScriptファイルのURLに引数を付けて実現している。引数の取得の方法はscript.aculo.usの動的ロードの仕組みから。scrip
Collection & Copy - 複数行の文字列
複数行の文字列 JavaScript Javascript Boot Camp Tutorial \を行端に置くことで、文字列を複数行に分けて記述できることを知った。 IE、Forefox、Operaで確認をした。 alert("<html>\ <body>\ <div>\ </div>\ </body>\ </html>"); 文字列リテラル (String Literals) ECMA Scriptの仕様を読んでも難しく、このことが記述されているのか否か判断ができない。 『JavaScript』の文字列リテラルの項を読み直してみたが記述は見当たらず、これまで色々なコードを読んだが利用されている例に会わなかった。 追記 2006/8/7 nanto_viさんから、詳細な情報をコメントで頂きました。 こちらへ転載させていただきます。 いつも、いつも、本当にありがとうございます。 nanto
あるＳＥのつぶやき: Ajaxライブラリまとめ
Ajax/JavaScriptライブラリをまとめておきます。（順不同） | 基本 | 統合 | 表示系 | GUI部品 | イメージ | PGM連携 | ブラウザ | Flash | その他 | | 部品集 | リンク | 編集履歴 | ・基本ライブラリ ・・・Ajax開発のベースになるもの ↑TOP prototype.js 超メジャーなAjaxライブラリ prototype.js の開発者向けメモ prototype.jsリファレンス prototype.jsリファレンス(JavaScriptist) prototype.js逆引きサンプル集 Prototype 1.5.0 Cheat Sheet Prototype 1.5 PDF － API/サンプル/解説 Prototype.js Documentation － まとめサイト Prototype 1.6.0へのアップグレード実例紹
ツンデレ・幼なじみ・メイド・妹のボイスが入った「∞(むげん)プチプチ ぷち萌え」 - GIGAZINE
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン123.0.6312.58(Linux)／123.0.6312.59(Windows、Mac)がリリースされました。CSSやWeb APIに様々な機能が追加されており、従来よりさらにウェブコンテンツの表現力が豊かになっています。 Chrome Releases: Stable Channel Update for Desktop New in Chrome 123: light-dark function, Service Worker Routing API, and more! - YouTube ◆CSS関数light-dark() CSSの色関数として、新たにlight-dark()が追加されます。この関数は引数として2つの色を指定することができ、下記の状況に応じていずれか一方を返します。 ・ウェブ開発者が明色
関数、toString/toSource - FAX
関数、toString/toSource JavaScript 以下のコードで確認。 <html> <body><pre id="code"></pre></body> <script> var func = function(){var a=10;var b=20;/*COMMENT*/if(a=10){b=30}return b;} var code = document.getElementById("code"); code.innerHTML += func.toString() + "\n" code.innerHTML += func.toSource() + "\n" </script> </html> Firefoxでの表示例。 function () { var a = 10; var b = 20; if (a = 10) { b = 30; } return b
JSONScriptRequest
動的にscript要素を追加してやることによってクロス・ドメインのJavaScriptファイルを読み込むというテクニック。Firefoxの場合は動的に追加するscript要素のonload属性で読み込んだJavaScriptファイルを処理するfunctionを指定してやれば問題ない。しかし、これをクロス・ブラウザで実現するには違ったアプローチが必要になる。そのひとつがJSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScriptで取り上げられているJSONScriptRequest。XmlHttpRequestと比較するとかなり機能が限定されたものだけど、扱いが手軽で限定された環境ではなかなか威力を発揮するっぽい。 JSONScriptRequestはどうやらJSONPと呼ばれている、JSONデータをc
アプリを丸ごと作るために使える Ajax のフレームワークはなんだろう - ma2’s diary
最近 prototype.js + script.aculo.us や jQuery を使って Ajax なプログラミングを体験してみた。この2つは「JavaScript プログラミングを楽にするためのライブラリ」って感じで，アプリを丸ごと作るには不足。少なくとも充実したコンポーネント（と管理機構）は欲しい。ざっくり眺める感じで調べたところ，次の3つが候補になった。 Google Web Toolkit Java で書いてから JavaScript に「コンパイル」する変わり種。しかし Java で記述した状態でブラウザでテストできる。Eclipse や JUnit が使えるのも大きな魅力。Ajax のサーバ側がサーブレットなのがいまいち。 Yahoo UI Library 天下の Yahoo さん提供。コンポーネントが多くてうれしい（ウィンドウ/ダイアログ/メニューなど）。namespa
秋元@サイボウズラボ・プログラマー・ブログ: Google Web Toolkit の評価結果
秋元@サイボウズラボ・プログラマー・ブログ 週3日出社となりました。残りの日はasiajinとかnarabete.comで個人で活動しています / mail: MY-SIRNAME@gmail.com (姓@gmail.com) « ボウズマン動画 | メイン | 2006年8月のブログ界レポート by Technorati CEO » 2006年08月07日 Google Web Toolkit の評価結果 サイボウズ本社開発部の公開している技術サイト CYDN で、Google Web Toolkit (GWT)の試用記が公開されている。 Java だけで(Javascript を書かずに)、マルチプラットフォーム対応の Ajax ページが作成できる GWT 。他のサーバサイド言語でも同様の試みはあるが、サーバサイド側の言語知識だけで Ajax 対応のアプリケーションが作成できるのは、
Enjoy×Study - ブラウザのスクロールバーで隠れている領域を含むサイズを取得する方法。
昨日のエントリに引き続き、今度はスクロールバーで隠れている領域を含むサイズを取得するためのプロパティをまとめてみました。 Enjoy×Study - ブラウザの表示領域のサイズを取得する方法。 調査したのは、下記のプロパティです。 window.innerWidth window.innerHeight document.body.scrollWidth document.body.scrollHeight document.body.offsetWidth document.body.offsetHeight document.body.clientWidth document.body.clientHeight document.documentElement.scrollWidth document.documentElement.scrollHeight document.docu
ちょっとしたメモ - application/jsonがRFC4627に
3月末にアナウンスされていたJSON仕様のRFCが、RFC 4627 The application/json Media Type for JavaScript Object Notation (JSON)として公開された。メディアタイプは表題の通りapplication/jsonで、標準ファイル拡張子は.jsonとなっている（拡張子の話は前回書き忘れた）。一部のミス修正以外は最終I-Dとほぼ同じ内容でRFCとなった。 XMLHttpRequestでの処理にはメディアタイプはあまり関係ないが、ブラウザで直接ファイルを開こうとするとapplication/jsonの場合はダウンロードが始まってしまう（Opera9では「XMLの解析に失敗しました」となる…？？）。実用には支障ないものの、手軽にデータを確認できないのは残念なところ。.jsonにapplication/jsonをマッピングするか
Javascriptの質問です。 ブラウザで実際に表示されたHTMLで、特定の要素の【画面表示上の絶対位置】を取得したいのです。…
Javascriptの質問です。 ブラウザで実際に表示されたHTMLで、特定の要素の【画面表示上の絶対位置】を取得したいのです。それらの要素はCSSなどで絶対位置指定されてはいません。例えば下記のようなHTML、 <html> <body> <table> <tr> <th>test</th> </tr> <tr> <td> <img id=”target” src=”***”> </td> </tr> </table> </body> </html> この時の ID=”target” の絶対位置(top/left)を取得したいのです。clientTop/Leftなどを試してみたのですが0が返ってきました。IE6.xx/Firefoxで可能かどうか教えて下さい。
ブラウザの表示領域のサイズを取得する方法。 - Enjoy*Study
ブラウザの表示領域を取得するに当たって、「ブラウザの種類」×「表示モード(標準/互換)」によって参照するプロパティが変わってきます。 IE、FireFox、Opera、Safariにて、表示モード毎に参照すべきプロパティをまとめてみました。(Safariについては2007/05/20に追記) 調査したのは、下記のプロパティです。 window.innerWidth window.innerHeight document.body.scrollWidth document.body.scrollHeight document.body.offsetWidth document.body.offsetHeight document.body.clientWidth document.body.clientHeight document.documentElement.scrollWidth d
[北海道] _ JavaScript(ジャバスクリプト), DHTML(ダイナミックHTML), CSS(カスケーディングスタイルシート)その他、いろいろなサンプル集
N4 (Netscape 4.xx) の場合、スタイル指定を含んでいるページの描画が正常に行われない、描画処理に時間が掛かる、リロード（再読み込み）しないと画面が表示されない、などの症状が現れることがあります。 このようなときは、N4のメニューバーから [ 編集 ] - [ 設定 ] を選択し、設定画面の [ 詳細 ] から、「スタイルシートを有効にする(S)」 のチェックを外してみてください 。 Opera 7.20 をご利用の場合、マウスのセンターホイールによる「onscroll」イベントを検出しない場合があるようです。このため、スクロールしても付いてくるレイヤー（エレベーター）などのオンスクロールイベントによる制御を行っているサンプルにおいて、画面右側のスクロールバーをドラッグした場合には正常に動作するにも関わらず、マウスのホイール操作では動作しない不具合が生じることがあります。暫
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
現在選択している文字列を取得 - 技術メモ帳
Efficient data transfer through zero copy
GIGAZINE - SunがAJAXのリソースを集めたサイトを開設
prototype.jsを利用したドラッグできるWebカスタムコントロール：CodeZine