タグ「JavaScript」が付けられているもの

オリジナル404ページ公開 - 研究室

誰得なwエラーページを作りました。
404ページを初め、いくつかのエラーページをこのオリジナルのモノに変更しました。

見て戴ければ分かる通り、JavaScriptがONなら、QRコードが表示されます。
また403および404ページでは、エラーの内容に従ってQRコードも変化します。
是非、JavaScriptをONにした上で、存在しないページやインデックスの存在しないパスにアクセスして、携帯等のQRコードリーダーで内容をチェックしてください。
いや、本当はちゃんと存在するページにアクセスして欲しいんですけどね。

以下、技術情報(興味のない方は読み飛ばしOK)です。

動的にCSSを追加 append_css.js - 研究室

なんか探せばどこかにありそうなツールですが、仕事用に作ったものを一般公開してみます。

WebページにCSSを追加するJavaScriptです。
ポイントは、外部CSSファイルではなく、要素への直接適用でもなく、CSSをテキストで指定する、という点。

使用例

appendCSS(
    ".debug { display:block !important; }" +
    "#dest1 { color: #ef0000; font-weight: bold; }"
);

デモページ

http://www.antimon2.atnifty.com/works/append_css/
(リロードするたびに表示が変わります)

Rubyでちょっと込み入った変数の初期化 - 研究室

JavaScriptだと、1つの変数にちょっと込み入った処理の結果を初期値として定義するとき、わざわざ他のローカル変数や別の関数を導入してスコープを汚したくないときとかに↓

var a = function (x, y) {  
    :(x、yを利用した複雑な処理)  
    return XXX;  // こんな形で最終処理結果を返す  
}(b, c);

みたいに、無名関数(JavaScriptの世界ではこれをクロージャと呼ぶこともある)を定義してその場で実行する、ってよくあります(あると思います)(ありますよね?)。

Rubyで同じようなこと出来ないかな? と思ったときに、こうすれば出来るじゃん、っていう方法を見つけたのですが↓、

a = proc {|x, y|  
   :(x、yを利用した複雑な処理)  
  XXX  # こんな形で最終処理結果を返す  
}.call(b, c)

これって一般的? よく使われる方法? あとこう言った場合に、もっとスマートな方法って何かあるでしょうか?

教えて、えらい人(or Ruby識者)。

JavaScript-XPathのMooTools用プラグインを作成 - 研究室

Prototype.js で XPath を手軽に扱うためのプラグイン XPath for Prototype というものが公開されています。
作者の amachang さんのブログ の、プラグイン公開を紹介する記事に、「他のライブラリのプラグインに関して」という見出しでこんなことが……。

もし
誰か書いてくれる人がいればとてもありがたいなあ。。。とか思っています。
いませんよねいませんよね><?

面白そうなので、書いちゃいました(^-^)
XPath for Prototype の MooTools 版、名付けて「XPath for MooTools」(まんま)。

2008/06/12 ver.0.2 にバージョンアップ】

非対応ブラウザでMooToolsを完全に無効にする方法 - 研究室

いきなり後ろ向きなエントリーでちょっと恐縮なのです(汗)

趣味の範囲を超えて『仕事』でMooToolsを使用していると、ブラウザの対応範囲の問題というモノには常に悩まされます。
具体的には、一番困るのが「古いブラウザにも対応して欲しい」というモノ。
それはなんとか説得できたとして、次に来るのが「じゃあ、せめて非対応ブラウザでエラーが出ないようにして欲しい」。

そこで、非対応ブラウザでエラーが出ないようにするMooToolsの微カスタマイズをお教えします。
と言っても、元のソースもロジックも触らず、ちょっとだけ書き加えるだけです。

Ajaxライブラリ MooTools の紹介 - 研究室

今、仕事の合間に色々なAjax/JavaScriptライブラリを触っています。
そんな中で、個人的に注目したのが、『MooTools』。
エフェクト系のライブラリに分類されがちですが、DOM操作やリモート操作(XMLHttpRequestを使用したサーバとのやりとり)、Safariを初めとするメジャーなモダンブラウザへの対応(クロスブラウザ対応)など、コアな部分もしっかりしており、Prototype.js(+Script.aculo.us)の代替としても充分かそれ以上のモノを備えています。

主な特徴を挙げるとすれば、以下の通り:

  • 軽量・高速
  • Safariを筆頭に、IE6,7、FirefoxOpera等でテスト済み
  • $()関数、$$()関数等、prototype.jsとの互換性があり、移行が容易
  • オブジェクト指向で、記述が直感的
  • デモが豊富、ドキュメントも充実、できること・やりたいことがすぐ分かる!

以下に、一番人気と歌われるAjax基本ライブラリ Prototype.js との比較をしてみます。

onkeypressをお行儀良くする追加スクリプト - 研究室

前エントリー(【提案】onkeypressの正しい併用の仕方!)からの続きです。
ご用とお急ぎでない方は、前エントリーからお読みいただくと、今回このスクリプトを提供する経緯がお分かりになると思います。

onclickとonkeypressの両イベント属性を併用している場合に、onkeypressの挙動をお行儀よく修正する追加スクリプトを提供します。
このスクリプトは、前エントリーで分類した、以下のパターンに対して有効に作用するモノです:

  1. onclick と onkeypress が同時に指定され、その内容が同じの場合

またその時に、そのような箇所を以下のように修正します:

  1. onkeypressイベントハンドラにフィルターをかける

【提案】onkeypressの正しい併用の仕方! - 研究室

前エントリー(onkeypress、乱用禁止!)からの続きです。
お暇なら、前エントリーからお読みください。

onkeypress イベント属性の正しい指定の仕方を提案します。
主に『onclickと同時にonkeypressイベント属性を指定する場合の正しい指定の仕方』という視点での提案です。
ざっくりとまとめると、対処法としては以下の3パターンがあります。

  1. onkeypressは使わない!(onkeypressの指定を削除する)
  2. onkeypressイベントハンドラにフィルターをかける
  3. その他(個別の対応が必要)

【2007/05/02】追記。

onkeypress、乱用禁止! - 研究室

Webサイト構築やブログのカスタマイズをするにあたり、参考になるサイトを見ていると、よくこんな記述を見かけます。

onclick 属性を設定した場合は onkeypress 属性を同時に設定することがアクセシビリティ上好ましいとされています。

それがなぜそうであるのか、分かってやっていれば良いのですが、「?とされています」とだけ紹介してきちんと検証していない人、けっこういます。
そもそもこの設定は、アクセシビリティよりもユーザビリティに関する提案です。
しかも。「へーそうなのかー」と何も考えずにそれに倣って設定すると、却ってユーザビリティを悪くします!

ブログ

研究室
書斎

タグクラウド

最近のブログ記事

Ruby東海第15回勉強会
研究室ブログ上
【覚書】[Ruby]続・トップレベルに定義したメソッドと同名のメソッドをクラスで定義した場合
研究室ブログ上
第39回FLOSS桜山勉強会
研究室ブログ上