『DOM Scripting 標準ガイドブック』を読んだ - blog.8-p.info
まえに人におすすめされて少しだけ借りて読んだ DOM Scripting: Web Design with JavaScript and the Document Object Model という本があって、それの日本語訳の『DOM Scripting 標準ガイドブック』が売っていたので買って読んだ。初版が2007年6月なので、最近出た本じゃないです。 文法まわりは微妙 2章の JavaScript の文法に対する記述はあんまりうなづけないところがある。変数名が snake_case なのは趣味の問題だけどたぶん lowerCamelCase のほうが多数派。 配列を var beatles = Array("ジョン", "ポール", "ジョージ", "リンゴ"); とするほうが [] より「良い」(p.33) とも思えないし、連想配列がほしいときに {} じゃなくて var lennon
inputlog - yuga.js 0.7.0 - 優雅なWeb制作のためのJavaScript
コメントでいただいたリクエストやちょっとした不具合を修正したyuga.jsの0.7.0を公開します。0.6.3からの差分は以下の通りです。 ロールオーバー：処理最適化（前回のバージョン比150%ぐらいの速度アップ） セルフリンク、ロールオーバー：2重に_on, _crがつかないように調整 自動thickbox：urlに?が含まれていた場合は自動でthickboxにならなくした。 外部リンク：アイコン追加機能を付加（デフォルト無効） 外部リンク：自分のドメインから指定されている場合外部リンクとして扱わないよう修正（主にMovable Type対策） するするスクロール：対象のidがなければa要素のname属性で探すよう修正 するするスクロール：スクロール後にURLを本来のリンク後のものに書き換えるよう修正 内部処理：url解析時、ついでにGETパラメータを扱いやすくした yuga.js 0.
IE6でabbr要素を使えるようにする - mayokara note
元ネタはie7-js。JavaScriptを無効にしていると機能しません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ie6-abbr-fix</title> <!--[if lt IE 7
onkeypress、乱用禁止！ - 研究室
JavaScript、Ajax、HTML5(API)、Ruby…Web及び関連技術の実験&情報公開&制作物紹介。 Webサイト構築やブログのカスタマイズをするにあたり、参考になるサイトを見ていると、よくこんな記述を見かけます。 onclick 属性を設定した場合は onkeypress 属性を同時に設定することがアクセシビリティ上好ましいとされています。 それがなぜそうであるのか、分かってやっていれば良いのですが、「?とされています」とだけ紹介してきちんと検証していない人、けっこういます。 そもそもこの設定は、アクセシビリティよりもユーザビリティに関する提案です。 しかも。「へーそうなのかー」と何も考えずにそれに倣って設定すると、却ってユーザビリティを悪くします！ コメント(4) oscar | 2007年4月30日 11:25 なるほど、全然知りませんでした?? 最近ちょっとだけ、Val
外部の JS を読み込むための JS (CSS でいう import.css) | ヨモツネット
概要 この CSS の import.css のように、外部の JavaScript を HTML に読み込むことができます。読み込むときのパスは相対パス、サイトルートからのパス、フルパスなど、何でも大丈夫です。 複数のライブラリなどを XHTML に読み込む際、XHTML の head 要素内が script 要素だらけになるのを防ぐことが出来ます。 動作確認用のDEMO ダウンロード 使い方 jsloader.js 内の conf で設定の変更が行えます。 jsloader.js のソース内の conf = { thisName : "jsloader.js",//このJSのファイル名 loadJS : ["読み込むJSへのパス1","読み込むJSへのパス2","読み込むJSへのパス3","読み込むJSへのパス4"]//JS達のパス。相対で指定したい場合はこのJSからみたパス }
App Store登録もOK！JavaScriptで作るiPhoneアプリ
Webアプリケーションは、傾きセンサやGPSからの情報取得やバイブレータ動作などのOSの機能の利用に制限があります。また、オフラインでの動作ができません。 開発の容易さは、若干主観めいてしまいますが、コンパイルが必要でメモリ管理も必要なネイティブアプリに比べて、Webブラウザでリロードするだけで最新のコードをテストできて、基本的にメモリ管理も不要なWebアプリケーションに軍配が上がります。 ネイティブアプリケーションの最大のメリットは、「App Storeでの配布ができる」ことで、多くのユーザーが集まるApp Storeでアプリケーションを配布でき、さらには課金もできてしまう点です。 ローカルWebアプリという第3の選択肢 前段の機能比較表に「ローカルWebアプリケーション」という項目があります。これは、Safariでオンライン中に所得したHTML、CSS、画像データなどを保存して、オフラ
テーブルからグラフを描画するJavaScriptライブラリ「Bluff 」-JavaScript Library Archive
テーブルからグラフを描画するJavaScriptライブラリ「Bluff 」 Check Tweet 配布元：Beautiful graphs in JavaScript ライセンス：MIT license Bluffはテーブルからグラフを描画することが出来るJavaScriptライブラリです。 使い方 配布元よりダウンロードしたjs-class.js、bluff-min.js、excanvas.jsをhead要素などで読み込みます。 excanvas.jsはGoogleより公開されているIEで canvas 要素を利用する為のライブラリです。 次にグラフの元となるtable要素を作成します。 <script type="text/javascript" src="js-class.js"></script> <script type="text/javascript" src="bluff
[JS]複数のdiv要素を省スペースに表示するスクリプト -Virtual Pagination
Dynamic Driveから、複数のdiv要素をページネーションを使って、省スペースに表示するスクリプトを紹介します。 Virtual Pagination デモでは、5通りのページネーションを使用して、複数のdiv要素を省スペースに表示させています。 ページネーションには、前後の送り、先頭・最後尾、数字、タイトルに対応しており、現在位置も表示できます。 スクリプトのオフ時には、div要素がそのまま配置されるため、情報の閲覧に差し支えはないと思います。 スクリプトはjQueryやPrototypeなどの他のスクリプトを必要せず、単独で動作します。 対応ブラウザは、IE5+, Fx1+, Op7+となっており、Safari 3.2.1(win)でも動作しました。
高木浩光＠自宅の日記 - 新はてなブックマークの登録ブックマークレットは使ってはいけない
はてなブックマーク（以下「はてブ」）がリニューアルされ、ブラウザからブックマークレットでブックマーク登録（以下「ブクマ登録」）しようとすると、図1の画面が現れるようになった。「こちらから再設定をお願いします」と指示されているが、この指示に従ってはいけない。ここで提供されている新型ブックマークレットは使ってはいけない。（この指示には従わなくてもブクマ登録はできる。） 新型ブックマークレットを使用すると図2の画面となる。ブクマ登録しようとしているWebサイト（通常、はてな以外のサイト）上に、はてブの画面のウィンドウが現れている。これは、Ajaxと共に近年よく使われるようになった「ページ内JavaScriptウィンドウ」である。（ポップアップウィンドウとは違い、ウィンドウをドラッグしてもブラウザの外に出すことはできず、あくまでも表示中のページ上のコンテンツであることがわかる。）
Web Directions East 2008 カンファレンスレポート（前編） | クリエイティブ・タブロイド withD（ウィズ・ディー）
11月7日（金）〜9日（日） に開催され、豪華なゲストが注目されたWeb Directions East 2008。レポート前編では、カンファレアンス前半の模様をお届け。世界中から、ウェブの最前線で活躍する一線級の人たちが東京に集る、注目のイベントとなった「Web Directions East 2008」。初日のカンファレンスデイとなった11月7日、会場のベルサール西新宿には多くの来場者が集る盛況ぶりでした。オープニングでは、WWWの生みの親であるTim Berners-Leeもビデオレターで登場するなど、これまでの日本のセミナーやイベントでは類を見ない、豪華な顔ぶれによる贅沢なイベントとなりました。 withDもメディア協賛としてサポートした本イベントのカンファレンスデイを前後編の2回にわたってレポートしますが、前編は連載「一歩先のWeb標準」を担当しております、ゆうがお送りいたします
新規でサイトを作るのに使えそうなの一式。Ver 3
随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL（zip：40kb） Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlにGoogleカスタムサーチ用に使えるソースを記入。 Ja
ハタさんのブログ(復刻版) : javascriptを初めて学ぶ人についてのおさらい。その１
僕にも教える人ができた(? というか人にモノを教える立場)になったので、とりあえず、最近はもっぱらjavascriptを教えています。 もともとCやJavaなどについてはある程度の知識がある人なので、それを少しjs的な意味で、関数言語的な教えをやっている最中のメモ 変数って何ですか？変数って値もしくは式そのものに利便的な名前をつけているものです 次のhogeとfooは値をいれる箱ではなく、値そのものに別名(もしくは分かりやすい名称)を割り当てているだけに過ぎませんよ。 var hoge = 1; var foo = [1, 2, 3]; alert(hoge + 1); // 2 alert(foo[0]); // 1 alert(1 + 1); // 2 alert([1, 2, 3][0]); // 1 つまり、関数自体を変数に代入する事ができます。(functionとは特別な呼び名
MJL ― MITSUE-LINKS JavaScript Library | 制作／開発 | ミツエーリンクス
概要 MJL (MITSUE-LINKS JavaScript Library)は、ミツエーリンクスで標準利用されるJavaScriptライブラリです。 MJLは弊社内における業務効率を改善するために、統一された設計思想、利便性の向上を念頭においた上で設計・開発されました。 MJLは他のJavaScriptライブラリ群とは異なる設計思想により、独特の特徴を持ちながらも他のライブラリと補完しあえるものを目指しました。 MJLはコピーレフトライセンスであるGNU GPLに基づく自由ソフトウェア（フリーソフトウェア）です。弊社は GNU GPLに則り、本ページにてMJLの全ソースコードを公開します。 ライセンス MJLはGNU GPL Version 3（参考邦訳）のもとに提供されます。 詳細はMJL本体ファイル内のライセンス告知をご覧ください。 ダウンロード MJL本体（圧縮版） mjl.js
jQueryのみでLightboxっぽいものを実現する方法 - F.Ko-Jiの「一秒後は未来」
梅酒.inのトップページにある「梅酒がウリな飲食店」というコーナーにある画像をクリックすると、Lightboxっぽく情報を表示するようにしています。 ↑ こんな感じ。 Lightbox効果を実現するライブラリは検索すれば色々と見つかると思いますが、ここではライブラリはjQueryのみとして、どのようにLightboxを実現したかを説明します。 処理のおおまかな流れは以下の通りです。 select要素を隠す (IE対策) ページ全体に半透明の黒いレイヤーを表示する 表示領域の中央に目的のコンテンツを表示する 1. select要素を隠す IE6ではselect要素にz-indexが定義されていないため、レイヤーのz-indexをどれだけ大きくしても、IE6ではselect要素がレイヤーの下に隠れることはありません。そのため、ページ上にあるselect要素を隠す必要があります。 jQueryで
ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル:phpspot開発日誌
Using jQuery for Background Image Animations - Snook.ca ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル。 デモページ デモページを見ればわかりますが、カーソルをあわせると滑らかに背景がアニメーションされます。 アニメーションの仕方がなかなか良くて、左→右や、上→下のように方向を指定できます。 当然ですが、Flashを使わなくてもJSでこうしたことが出来て、今までありそうでしたが、そんなに多く見かけることがなかったテクニックではないでしょうか。 覚えておくとふとしたときに使えそうです。
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
ソニー、BRAVIAの「アプリキャスト」開発ツールを公開
ソニーは、液晶テレビ「BRAVIA」の画面右側部に表示し、テレビ画面を邪魔せずにインターネット上の最新情報を楽しめる「アプリキャスト」用の開発ツール「個人向けソフトウェア」を17日の15時から公開する。 これまで法人向けにソフトウェア開発ツール(SDK)を提供し、BRAVIA上で約35のアプリキャストを展開している。今回のSDK公開により、個人開発者のユニークな発想に基づくアプリの開発を期待しているという。 アプリキャストはJavascriptとXMLを利用したウィジェットで、テレビでの閲覧に最適化して仕様が定められている。今回のSDKには、アプリキャスト用エミュレータと、開発ガイド、仕様書、サンプルアプリなど、以下の内容が含まれている。対応OSはWindows XP/Vista。 「アプリキャスト」エミュレータ 「アプリキャスト」開発ガイド AppliCast JavaScript AP
ソニーグループ、FlashやめてAjaxでリニューアル
画像がダイナミックに切り替わり、マウスオーバーに合わせてナビゲーションバーが変化する――そんな“動きのあるサイト”を作るのに、あなたなら今、何を使うだろうか？ 4～5年前ならほぼ間違いなく「Flashで決まり！」だったかもしれないが、2005年以降、Ajax/JavaScriptを使うサイトが増えている。最近では手軽に実装できるライブラリの充実とともに、ますますその傾向にあるようだ。 9月9日にリニューアルされたソニーグループのコーポレートサイト（www.sony.co.jp）もその一つ。旧サイトに比べてトップページのレイアウト領域が広くなり、文字も大きく、スッキリとしたナビゲーションバー……と、注目したいところはいろいろあるが、最初に目を奪われるのは中央にある大きなメインビジュアル部分のはずだ。実はここにJavaScriptが使われている。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://javascript.zudolab.net/ja/
アヨハタブログ | YSlowの件
