WEBブラウザーに表示されている画面を直接編集する方法 - sanonosa システム管理コラム集「インフラエンジニアの教科書」シリーズや「クラウドエンジニアの教科書」などの著者。現在(株)ハートビーツ勤務。LINE社元創業メンバー。K-POP/韓国語/お酒/サイゼリヤワイン好き。
jQuery時代に生きるクロスブラウザ対応の知恵 8選 : tech.kayac.com - KAYAC engineers' blog
Auto Copyが移植されたらchromeへの移行を検討します。agoです。 jQueryを使用するようになってクロスブラウザを意識することは少なくなりましたが、それでもjQueryではカバーしきれない差異はそれなりにあります。 そこでjQueryを使っていてもはまる可能性の高いクロスブラウザのtipsをご紹介したいと思います。 1 Objectリテラル内の末尾カンマ { 'key' : 'val', } 上記のコードはIE6でエラーが出ます。 o = { ‘key’ : ‘val’, }; この動作はjavascriptの仕様からするとIE6の動作が正しく、本来であれば末尾のカンマは記述できません。 これは他言語でJSONを扱う場合でもエラーになるので注意してください。 また、Arrayの場合、Fxは上記と同じく要素が存在しないものと認識しますが、IE6は未定義値が定義されていると解釈
一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集
Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h3>Contest Details</h3> <div class="imagery""> <img src="imagery.png" width="205" height="400" alt="Imagery" /> </div> <p>...the introductory paragraph...</p> <ol> <li>...various bullet points went here...</li> </ol> </textar
JavaScriptで画像のリンク切れをチェックする方法:phpspot開発日誌
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log JavaScriptで画像のサイズ(幅,高さ)をとる方法があって詳しく紹介されていて分かりやすいです。 ここで、画像のリンク切れをチェックする方法が書かれていなかったので書いてみます。 var img = new Image(); var url = '//phpspot.org/blog/img/notfound.jpg'; // あえて存在しない画像を指定 img.onload = function() { alert('width='+img.width+' , height='+img.height); }; img.onerror = function() { alert(url+' is dead'); }; img.src = url; 赤文字の部分を記述しておけば、エラー時に
[JS]リキッドレイアウト上のカラムの幅や数を自動調整するスクリプト -Smart Columns
表示されたブラウザの幅に合わせて、ぴったりになるようにカラムの幅や数を自動調整するスクリプトをSoh Tanakaから紹介します。
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
Webページを速く見せるための5つのちょっとした工夫（1/3） - ＠IT
株式会社ライブドア マークアップエンジニア 浜 俊太朗 2009/4/30 ページ表示高速化をサーバの設定だけに任せていませんか？ HTMLやCSS、JavaScriptの書き方でも速くできます（編集部） 連載第1回の「Webサイトを“速く”表示させる7つの計測ポイント」では、YSlowを使って速度に関する問題を調査しました。 今回は、CSS・JavaScript・HTMLの工夫で速度を改善する下記5つの方法を紹介します。中にはYSlowの指摘に含まれないものもありますが、併せてチェックしていきましょう。 CSSはソースコードの上部に記述する JavaScriptはソースコードの下部に記述する CSSとJavaScriptを書く順番 JavaScriptを圧縮して読み込みを速くする 読み込みが遅いブログパーツには要注意 【1】CSSはソースコードの上部に記述する 連載第1回では、「CSSは
javascript libraryを作るときに便利な3つのfunction : tech.kayac.com - KAYAC engineers' blog
社内で唯一（？）の8 tab派。agoです。 suzunari.js、sisso.jsと、最近いくつかJSのライブラリを公開する機会があったので、そのとき使ったライブラリを作るときに便利なコードを紹介したいと思います。 1 script tagからのパラメータ読み込み 外部からの指定によりライブラリ内の動作が変わる場合、script tagから値を指定できると設定のための記述要素を減らすことができます。 （ファイル名を静的に指定している理由に関しては「最後のscript tagの取得方法」をご覧ください） <script type="text/javascript"http://example.com/path/script_file_name.js#param1=value1¶m2=value2"></script> var param = (function (file_nam
はじめての mixi アプリ - IT戦記
IE ではたぶん動きません。 友達一覧取得 <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="simple mixi Appli"> <Require feature="opensocial-0.8"/> </ModulePrefs> <Content type="html"> <
[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
JavaScript の不思議な面白さ - 第二回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 前回の記事「JavaScript の不思議な面白さ」はお楽しみいただけたでしょうか？ 一例として正攻法で突入していった例については賛否両論あるようです。確かに結果としてできたプログラムは見た目にも美しくなく、目を覆いたくなるばかりでした。 今回は解答編として JavaScript ならではといえる "奇妙な" 例をひとつお見せしたいと思います。ヒントは前回もちらっとお話させていただいたものです。 コード改善に向かって その前に前回の問題はなんだったのかをプログラマ視点で見ていきます。 コードが美しくないと感じるのはなぜでしょうか？ 改善するならどうすればよいのでしょうか？ ひとつの方法は "隠す" ことです。関数化・クラス化・ライ
Firebugで作るGreasemonkeyスクリプト〜入門と実践(From Kanasan.JS) | Blog.37to.net
最終更新日 Wed, 29 Apr 2009 01:29:41 +0900 最後のコメント Sun, 25 Jan 2015 19:08:17 +0900 最後のトラックバック Wed, 11 Mar 2009 15:49:00 +0900 ブックマーク 遅くなりましたが、先日に開催された、Kanasan.JS Greasemonkey チュートリアル読書会のレポートです。 せっかくなので、読書会の内容を元にGreasemonkeyスクリプト作成の「入門」「実践」「Tips」の3本立てでまとめてみたいと思います。 今回の開催はKanasan.JSの主催をkanasanから引き継いで、初めての開催ということもあり、とても緊張しました。 途中までは無難に進んでいたのですが、後半は段取り不足が出てきた感じでした。参加者の方々にはご迷惑をお掛けしました。 Greasemonkey チュートリアル読
javascript - ソースを見せてかつ動かすための３つのtips : 404 Blog Not Found
2009年02月24日04:30 カテゴリLightweight LanguagesTips javascript - ソースを見せてかつ動かすための３つのtips livedoor Blogを私が愛用しつづけている理由のひとつが、JavaScriptを受け付けること。 おかげでかなりのentriesが溜まりましたが、それだけにで実行用のソースと表示用のソースを用意するのが人一倍おっくうに感じられます。そんなわけで、どうやれば怠慢をもっと発揮できるかをまとめてみました。 0. DOMにIDをふらずにデモる こんな感じのデモがあったとしましょう。「404 Blog Not Found:javascript - Array#sortがオレquicksortより遅い!?」にあるものを書き直したものです。 # of Items: よくあるのは、inputタグやpreタグにIDをふって、docume
JavaScript でのブラウザ判別 - 「仕様の盲点」ではなく、「プロパティの有無」を使う方がマシ - 2009年2月 - Blog - EOF
IE6, IE7 で tabindex 属性を JavaScript 側から設定する時の注意 これは完全にバグといえる仕様なのだが、IE6 と IE7 では JavaScript（IE だから本来は JScript）側から setAttribute などを使って tabindex 属性を設定してやる時、属性名を "tabIndex" にしてやらないと認識しないことを知った（"I" がキャメルケースになっている）。WAI-ARIA（2008-08-06版 WD 邦訳）絡みで色々といじっていた時に発見。因みに IE8 RC1 では修正されている。 次の JavaScript コード断片は、IE で tabindex 属性を設定する時の方法を説明したものである。 // ターゲット要素 var elem = document.getElementById("test"); elem.setAttr
JavaScriptによるブラウザ判別の実際 - os0x.blog
1 行でブラウザ判別を行うスクリプト (IE 用の日本語紹介記事、Firefox、Safari 用の日本語紹介記事) を発端に、SpiderMonkey の判別とブラウザ判別: Days on the Moon や JavaScript でのブラウザ判別 - 「仕様の盲点」ではなく、「プロパティの有無」を使う方がマシ - 2009年2月 - Blog - EOFなどの記事があがっています。 ここでは少し実際的なケースごとにサンプルコードを紹介していきたいと思います。(サンプルコードは適当に書いているので、不正確な箇所があるかもしれません。ご了承ください。間違い等ご指摘いただけると助かります。) なお、これらは汎用的なJavaScriptライブラリを使っていれば意識しなくても良いケースがほとんどです。 分岐する必要がないケース 分岐する必要がないなら、ケースとしてあげる必要はないと思われるか
[JS]Firefox 2/3, Safariも判別する1行のスクリプト | コリス
昨日紹介した「わずか「12文字」でIEを判別するスクリプト」に続いて、Firefox 2/3, Safariを判別する1行のスクリプトをThe Spannerから紹介します。
GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
JavaScriptでかんたんAIRアプリに挑戦 - ぼくはまちちゃん！
こんにちは！ みなさんガジェットつくってますか！ なんだか最近、色々な種類があるみたいですね！ Yahooナントカとか、Googleガジェットとか、Adobe AIRとか、シルバーナントカとか、あとWindowsサイドバーだとか…。 こういうガジェット的な、ちょっとしたデスクトップ用のツールって、 どうやってつくるのかなーなんて思って、ちょっと調べてみました！ そしたら意外と簡単だった…！ これならぼくにも作れそう！！ ってことで、ちょっとメモしておきますね！ どれにしようかな…！ つくるのが簡単なこと WinでもMacでも動いてほしい 使う人がインストールしやすそうなのがいい こんな感じで考えていくと… 最終的に、Googleガジェット か AIRなのかなー、ってことになりました！ でも実際ぼくはGoogleガジェットなんて使ったことないし…！ (なんとなくGoogleデスクトップとかも
ロケーションバーアニメーション - IT戦記
ブラウザのアドレスバーに動くアスキーアートを組み込む | 秋元@サイボウズラボ・プログラマー・ブログ こうですか＞＜わかりません＞＜ あー。メイリオだとちょうどいいけど MSゴシック だとずれるなー。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]わずか「12文字」でIEを判別するスクリプト | コリス