iPhone/iPadでダブルタップをJavaScriptで実装する
iPhone/iPadのJavaScriptでは「onclick≒タップ」なのに「ondblclick≠ダブルタップ」となるのでダブルタップを利用したい場合は独自に実装しなくてはいけない。
iPhone/iPadでPCと同じJavaScriptのイベントを実装する
PC向けに作ったサイトをiPhoneやiPadでも利用できるようにする際に注意しなくてはいけないのがJavaScriptのイベントです。
Re:マークアップ・エンジニアのJavaScript入門 - 配列を理解する
ネタ元:マークアップ・エンジニアのJavaScript入門 - 配列を理解する
「JS_practice.zip」の中に,「www.html」というHTMLが入っています。このHTMLの文中,全「p」要素の中の,「www」「WWW」「ウェブ」というテキストだけに,jQueryを使ってcssで背景色を付けてください
jQueryは使って良いようなので、以下のような方法のほうがjQueryっぽいかなと思います。
alphafilter.jsが透過pngのロールオーバーに対応
IE6用の透過pngライブラリ「alphafilter.js」が透過pngのロールオーバーに対応しました。
8のjQueryのすごいTIPS
原文:8 awesome JQuery tips and tricks
微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。
jQueryでアコーディオンを設定する際の注意
アコーディオンを設定する際に動作がカクカクすることがあります。
jQueryを良くする25のTIPS
ネタ元:Improve your jQuery - 25 excellent tips
ちょっと多いですが、かなり良いTIPSがまとまっています。
IE6で閲覧すると。のanalog.js
ネタ元:IE6で閲覧すると。
という訳でIE6で見ると最新バージョンにアップデートするように促すJavaScriptライブラリを作ってみました。
jQueryのコードを良くする5つのTIPS
5 Tips for Better jQuery CodeでjQueryのコードを良くする5つのTIPSが紹介されています。
[リクリ]第14回 htmlの制御 jQueryによるJavaScript入門
リクリでブログ書きました。HTMLの制御を行う方法を解説しています。
第14回 htmlの制御 jQueryによるJavaScript入門
次回は、HTMLの挿入についての予定。
[リクリ]第13回 textによるテキストの制御 jQueryによるJavaScript入門
リクリでブログを書きました。(久々かも)
第13回 textによるテキストの制御- jQueryによるJavaScript入門
textメソッドの使い方について解説しています。次回はhtmlメソッドの予定。
[リクリ]第11回 attrによる属性値の制御 jQueryによるJavaScript入門
リクリに寄稿しています。
第11回 attrによる属性値の制御 jQueryによるJavaScript入門
attrメソッドの使い方について解説しています。
次回はcssメソッドによるcssプロパティの取得を予定してます。
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。
そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。
第10回 hoverとEffectの応用 - jQueryによるJavaScript入門
Re:Creator's Kansai(リクリ)に寄稿しています。
第10回 hoverとEffectの応用 - jQueryによるJavaScript入門
hoverとEffectを利用して簡単なツールチップを作成しています。
次回はattrを利用した属性値の制御の予定。
第9回 hover - jQueryによるJavaScript入門
Re:Creator's Kansaiに寄稿しています。
第8回 click時の$関数の第2引数 - jQueryによるJavaScript入門
第9回 hover - jQueryによるJavaScript入門
少しづつではありますが利用するメソッドのバリエーションを増やしていますので、jQueryらしい記述に近づいていっています。
[Re:Creator's Kansai]第7回 Effectの制御2 - jQueryによるJavaScript入門
Re:Creator's Kansaiに寄稿しています。
第7回 Effectの制御2 - jQueryによるJavaScript入門
showメソッドやhideメソッド以外のエフェクト用のメソッド、slideDownメソッドやslideUpメソッド、slideToggleメソッド、fadeInメソッド、fadeOutメソッド、fadeToメソッドなどについて解説しています。
[Re:Creator's Kansai]第6回 Effectの制御 - jQueryによるJavaScript入門
Re:Creator's Kansaiに寄稿しています。
第6回 Effectの制御 - jQueryによるJavaScript入門
showメソッド、hideメソッドを利用したjQueryでのeffectの扱い方になります。
[Re:Creator's Party Kansai]第5回 toggleクリックの制御 - jQueryによるJavaScript入門
Re:Creator's Kansaiブログに何件か寄稿しています。
第4回 classの制御 - jQueryによるJavaScript入門
第5回 toggleクリックの制御 - jQueryによるJavaScript入門
番外編 -書籍紹介- jQueryによるJavaScript入門
1つ1つは小さいTIPSですので、ぜひ抑えていただけたらと思います。
JSONとJSONP
ネタ元:JSONについての勉強メモ:外部URLから呼び出せない。どうやったら・・・
JSONやJSONPを利用したJavaScriptでのデータをの取り扱い方です。
[Re:Creator's Party Kansai]第3回 CSSとクリックの応用 - jQueryによるJavaScript入門
Re:Creator's Kansaiブログに寄稿しています。
第3回 CSSとクリックの応用 - jQueryによるJavaScript入門
CSSの操作とクリックの制御だけでタブパネルを実装するという実践的な内容になっています。
プログラミングのコードとしては一考の余地がありますが、目的を実装する為のシンプルなアプローチとして参考にしていただけたらと。
[Re:Creator's Party Kansai]クリックの操作 - jQueryによるJavaScript入門
Re:Creator's Kansaiブログに寄稿しています。
第2回 クリックの操作 - jQueryによるJavaScript入門
jQueryでclickイベントを利用したCSSの変更について解説しています。
[Re:Creator's Party Kansai]第1回 CSSの操作 - jQueryによるJavaScript入門
火曜日ということでRe:Creator's Kansaiブログに寄稿しています。
第1回 CSSの操作 - jQueryによるJavaScript入門
jQueryを利用したCSS操作について解説しています。
[Re:Creator's Party Kansai]第0.5回JavaScriptの記述場所 - jQueryによるJavaScript入門
Re:Creator's Kansaiブログに寄稿しています。
第0.5回JavaScriptの記述場所 - jQueryによるJavaScript入門
JavaScriptの記述場所、script要素の挙動、jQueryファイルの読み込み方、Google AJAX Libraries APIの利用方法などについて解説しています。
[Re:Creator's Kansai]第0回 jQueryによるJavaScript入門
火曜日ということでRe:Creator's Kansaiブログに寄稿しています。
ブログ論と交互に連載していけたらなぁと考えています。
サイト内にウィンドウを開く「Prototype Window 」
Prototype Windowはウェブサイト内にウィンドウを開く為のJavaScript ライブラリになります。
本気にonclick
今onclickが熱いらしい。本気でJavaScriptを学びたい人は下記のサイトをご覧ください。
jQueryを使ったサンプルコード
色々書こうかと思ったらでぃべろっぱーず・さいどさんにほとんど書かれてる。。。
ですので、2サンプルほど
jQuery版のLightBox「ThickBox」
ThickBoxはLightBoxのjQuery版とも言えるJavaScriptライブラリで、画像をクリックするこのにより拡大画像を表示させることが可能です。
複数のjsライブラリを利用する際にonloadを書き換える方法
複数のJavaScriptライブラリを利用していて、正常に動作しないや、どちらか一方しか動作しないなどの状況に陥ることがあります。
非常に美しいcoverflowスライドギャラリー『ImageFlow』

ImageFlowはPHPとJavaScriptで作られている非常に美しいcoverflowスライドギャラリーです。
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。
このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。
ただし完全にIE7と同じような形にするのではなく、より近い形ということです。
ブックマーク数付きリンクが簡単に作れるブックマークレット
ネタ元:ブックマーク数をタグ化して簡単にブログで使えるブックマークレット
便利そうだったので自分用に作ってみました。
画像に光沢を与えるjsライブラリ『Glossy.js』
配布元:glossy.js
ライセンス:Netzgestade Software License Agreement. /Commercial Software Licenses
(商用利用不可.個人利用は無料で可能)
Glossy.jsは画像に光沢を与えることができるjavascriptライブラリです。
パスワードを表示するブックマークレット
ネタ元:アスタリスクで隠されたパスワードを確認する方法
非常に便利だったので自分用に改造してみました。
footerをウィンドウ下部に固定する『footerFixed.js』
footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。
DOM 読み込み完了時に関数を実行する domready.js
配布元:METAREAL
ライセンス:MIT-style license.
domready.jsはDOM 読み込み完了のタイミングで、任意の関数を実行できるようにする JavaScript ライブラリになります。
アコーディオン形式で内容を表示できるAccordion v2.0
配布元:Accordion v2.0
ライセンス:MIT License
Accordion v2.0はアコーディオン形式でWebサイトの内容を表示するためのJavaScriptライブラリになります。
JavaScript Library Archiveオープンのお知らせ
本ブログで紹介したjsライブラリをまとめたサイトJavaScript Library Archiveをオープンしました。
CSS Nite in Osaka vol.7終了
CSS Nite in Osaka vol.7が終了しました。
私は『jsライブラリで実装効率的なWeb制作』という内容でお話しました。
ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js
Dynamiclayout.jsはウィンドウサイズに合わせて読み込むCSSファイルを変更できるJavaScriptライブラリになります。
ページ内に様々なwindowを表示するControl.Modal
Control.ModalはLightBoxのようなウィンドウをページ内に表示するJavaScriptライブラリになります。
プログラムのコードを配色する「google-code-prettify」
google-code-prettifyはプログラムのコードに色を付けるJavaScriptライブラリになります。
LightBox風にコンテンツを表示するModalbox
ModalboxはLightBox風にコンテンツを表示するjavascriptライブラリになります。
min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript
minmax.jsはIE6以下でmin-width,max-width, min-height , max-heightのプロパティを利用可能にするjsライブラリになります。
IEでposition:fixedを再現するFixed positioning
Fixed positioningはIEで固定配置つまり、position:fixedが利用可能になるjsライブラリです。
table sortingのバグとか直してみた
先日紹介したtable sortingについて、たつをさんよりバグの指摘を受けました。
テーブルをソートできるようにするjsライブラリ-table sorting
table sortingはテーブルをソートできるようにするjsライブラリです。
画像に鏡面効果を与えるreflection.js
reulection.jsは画像に鏡面効果を与えるjsライブラリになります。
半角カナを全角カナに変換するjsライブラリ
半角カナを全角カナに変換するjsライブラリ『convertKana.js』を作成しました。
ロールオーバーを簡単に実装する-Image Rollover Code-
Image Rollover Codeはロールーオーバーを簡単に実装する為のjsライブラリです。
文字サイズの変更を取得するJavaScript
heightLine.jsで使用しているのですが、文字サイズの変更を取得するJavaScript。
Re:href="#" onclick の悪習
<a href="#" onclick="...">検索</a>
なんて書き方やめようぜ!というお話
ブロックレベル要素の高さを揃えるheightLine.js
Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。
ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。
クロスフェードを実装する為のCrossfader
WWW WATCHさんでクロスフェードを実装する為のCrossfaderが紹介されていたので使ってみました。
jsライブラリで実装する効率的なWeb制作(Web標準の日々)
7/15に東京で行われたWeb標準の日々で公演を行いました。
ページ内リンクをスマートにするsmoothScroll.js
ページ内リンクをスムーズに行うjsライブラリ、smoothScroll.jsを作成したので公開します。
displayプロパティを初期値に戻す為のJavaScript
table要素やtr要素などはブラウザ毎にdisplayプロパティが異なる為、何かいい方法はないかといろいろ試行錯誤していたら面白い事を発見しました。
alphafilter.jsライブラリがバージョンアップしました。
IE6で透過pngを扱う為のライブラリalphafilter.jsのバージョンアップを行ったので報告しておきます。
リンク先のlivedoorクリップ数を表示するブックマークレット
リンク先のはてなブックマーク数を表示するブックマークレットのついでに、リンク先のlivedoorクリップ数を表示するブックマークレットを作ってみました。
リンク先のはてなブックマーク数を表示するブックマークレット
リンク先のはてなブックマーク数を表示するブックマークレットを作ってみました。
ie以外でもクリップボードが使えるsetClipboard.js
IE以外のブラウザでもクリップボードにコピーが簡単にできるjavascriptライブラリを作成しました。
script.aculo.usでHTML Slidyを改造
CSS Nite in Osaka 2007 春の陣 前夜祭のプレゼンで使ったスライドですがscript.aculo.usを使って改造しています。
改造方法をちょっとだけ紹介します。
一番簡単な画像置換の方法-imageReplace.js-
画像置換は設置がややこしく。
デメリット・メリットの切り分けが困難です。
そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。
アルファ画像を扱うalphafilter.jsライブラリ
IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。
そこで、IE6で透過pngを扱うjsライブラリを作ってみました。
javascriptで文字にドロップシャドウをつける方法
SiMPLE*SiMPLEさんのエントリー、CSSだけで文字にドロップシャドウをつける方法(あまり良くない方法)について。
発想自体がすごく素敵。
コメントで指摘されているアクセシビリティ、SEO等の問題はJavaScriptでやっちゃったら解決できるんじゃないかと思うので早速作ってみる。
るんだったら画像使った早いかもしれないですね。
Lightboxを使い画像を拡大表示する。
Lightboxは、画像をクリックすると拡大画像を表示するJavaScriptライブラリーです。
prototype.jsを使ってみる 3-getElementById()の省略
Domスクリプトを記述する際に頻繁に出現する『getElementById()』
エレメント(要素)を取得するときに使用しますが、なれるまで結構スペルミスをしてしまいがちです。
ユーザビリティを考慮したtarget windowの開き方
以前書いた【XHTML+CSSに足りない5つのコト】と言うエントリーの中でa要素のtarget="_blank"の必要性を書いた所、「それはユーザーの自由である。製作者側でコントロールする問題ではない」とのご意見を多数いただきました。
prototype.jsを使ってみる 2-Event.observe
今回はEvent.observeを使ってイベントを追加する方法です。
角丸javascriptライブラリ『curvyCorners』を使ってみる
角丸javascriptライブラリ『curvyCorners』を使ってみました。
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ
wg:Bubble Tooltipsで紹介されている吹き出し方式のツールチップテキスト作成JavaScriptライブラリBubbleTooltips.jsですけど結構面白いです。
javascriptを読み込みと同時に実行する方法
javascriptを読み込みと同時に実行する方法
javascriptとcssで角丸を表現する方法
webサイト作成の際に手間になってくる角丸での表現ですが
画像を使わずにCSSのみで表現する方法があります。
try 〜 catch
例外が発生したときにそれを捕まえて処理することができます。
window.onloadについて
window.onloadは一ページで一度しか使用できません。
空欄チェック
javascript入力フォームなどにある空欄チェックです。



西畑一馬(


