リキッドデザイン問題は max-width と IE6 用 expression で解決 - eclucifer blog
Date 2009-01-15 19:06 Category blog / Web 関連 Tags blog / CSS / JavaScript / push!! / tips / Web 関連 / Webデザイン / Web制作 / 考え方 Navigation Link Newer Older 使用中の Firefox アドオンまとめ Comments / Trackbacks Comment Form Name URL Add Your Comment Trackback URL http://eclucifer.net/blog/web/2009011501.html/trackback/
高木浩光＠自宅の日記 - 新はてなブックマークの登録ブックマークレットは使ってはいけない
はてなブックマーク（以下「はてブ」）がリニューアルされ、ブラウザからブックマークレットでブックマーク登録（以下「ブクマ登録」）しようとすると、図1の画面が現れるようになった。「こちらから再設定をお願いします」と指示されているが、この指示に従ってはいけない。ここで提供されている新型ブックマークレットは使ってはいけない。（この指示には従わなくてもブクマ登録はできる。） 新型ブックマークレットを使用すると図2の画面となる。ブクマ登録しようとしているWebサイト（通常、はてな以外のサイト）上に、はてブの画面のウィンドウが現れている。これは、Ajaxと共に近年よく使われるようになった「ページ内JavaScriptウィンドウ」である。（ポップアップウィンドウとは違い、ウィンドウをドラッグしてもブラウザの外に出すことはできず、あくまでも表示中のページ上のコンテンツであることがわかる。）
文字をJavaScriptで画像のようにレンダリングする·typeface.js MOONGIFT
Webサイトを見ていると、文字を画像に置き換えたサイトを見ることがある。思い描いている見せ方をそのまま表示させたいときなど、デザインを重視するサイトでよく見られる工夫だ。しかし問題はそのメンテナンス性の悪さだろう。 奇麗に文字が表示されるようになる それに適切に説明文を入れておかないと文字読み上げブラウザなどでは何も情報が得られなくなってしまう。そうした煩雑さから解放されるライブラリがこれだ。 今回紹介するオープンソース・ソフトウェアはtypeface.js、文字をSVG画像に変換するJavaScriptライブラリだ。 typeface.jsは指定した文字をそのままcanvasタグを使ったSVG画像に変換する。CSSを使って文字装飾を行うことができ、太字/イタリック/色変更を変更できる。他にもfont-stretch（横幅）、文字間隔、行の高さなどを指定することが可能だ。 選択すると文字全
ワリオランドシェイクみたいに HTML が崩壊するブックマークレット（とそのソースコード） - てっく煮ブログ
as, box2dワリオランドシェイクと YouTube のコラボプロモーション が面白かったので、似たようなものを作ってみました。次の文字列をコピーしてアドレスバーに突っ込むと、HTML が崩壊します。javascript:(function(){var d=document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://tech.nitoyon.com/meltdown/meltdown.js?"+(new Date()).getTime(); d.body.appendChild(s)})();崩壊するのは画像だけなので、画像があるページで試してみてください。このブログだとこんな具合。画像はドラッグすることも可能です。あまり画像が多いと重くなりすぎるのでご注意を。仕組みFlash と JavaSc
具体例で説明するデザインパターン - てっく煮ブログ
JavaScriptデザインパターンってなんだかたいそうなものに考えられがちだけど、実は、そこかしこのライブラリや仕様に取り込まれていることが多い。「デザインパターン分からん」とか「で、どうやって使うのよ」と悶々としている人には、「どういうところで使わているのか」を知っておけばイメージも沸きやすいし、意外にたいしたことないんだな、ということが分かるんじゃないだろうか。そこで、JavaScript やその周辺の技術で、デザインパターンがどのように使われているかを紹介してみることにする。ここでは、GoF本の順番に沿って、以下の11個のパターンを取り上げる。生成に関するパターン Factory MethodAbstract FactoryBuilderPrototypeSingleton構造に関するパターン AdapterComposite振る舞いに関するパターン Chain Of Respon
もう一度、ちゃんとJSON入門 - 檜山正幸のキマイラ飼育記 (はてなBlog)
僕自身も僕の周辺もJSONをよく使います。でも、細かい点でけっこうミスをやらかしています(苦笑)。このエントリーで、JSONを使う上で注意すべきこと／間違いやすい点をすべて列挙します。 内容 兼チェックリスト： 仕様原典さえ読めば完璧（のはずだが） 数値の前にゼロを付けてはいけない 16進数表記も禁止だよ 数値の前にプラスを付けてはいけない 小数点からはじまる数値はダメ 用語法が違うよ：プロパティとメンバー メンバー名には常に文字列を使う 空文字列""もメンバー名に使える 配列要素はキッチリと並べよう 文字列を囲むには二重引用符だけ 文字列内のエスケープが微妙に違う 仕様にないエスケープは構文エラー undefinedもNaNもありません ラッパーオブジェクトは使わないのが吉 型システムとtypeofに関する注意 最後に 仕様原典さえ読めば完璧（のはずだが） JSONは、小さくて簡単な仕様
JavaScript読み込みブロック回避でページ表示を高速化する方法 | エンタープライズ | マイコミジャーナル
スクリプトが読み込まれるまで画像の読み込みがブロックされている - 同ブログより抜粋 WebページパフォーマンスツールであるYSlowの主要開発者でありYahoo! Exceptional Performanceの開発者であるStoyan Stefanov氏がNon-blocking JavaScript Downloadsというタイトルで、ページの読み込み速度を向上させるテクニックを簡潔にまとめている。これはブロックが発生するJavaScriptの読み込みを並列化することでページの読み込み時間を短縮しようというもの。Webページの読み込み高速化に効果的な手法なのでWebデベロッパは一度目を通しておきたい。 JavaScriptの読み込み中はほかの読み込み処理がブロックされる。これをDOM経由で動的にロードするように書き換えてやれば並列して読み込まれるようになる。Non-blocking
重い画像を順番に読み込むjavascript「Lazy Load Plugin for jQuery」
twitter facebook hatena google pocket ブロードバンドが浸透しているとはいえ、画像を多く使用するとページが重くなり、表示速度が遅くなります。 また解像度を高くしたり、画像サイズを大きくしても重くなります。 Lazy Load Plugin for jQueryはディスプレイ範囲の画像のみを順番に表示するためページの読み込む時間を短縮できます。 sponsors 使用方法 Lazy Load Plugin for jQueryからjquery.lazyload.jsをjQueryからjquery.js、jQuery Dimensions Pluginからjquery.dimensions.jsをダウンロードします。 <script type="text/javascript" src="http://yourdomain/jquery.js"></scri
document.lazy_writer
特定のscript中に含まれるdocument.writeを上書きして、遅延描画にすることができます。 document.writeを使う広告配信スクリプトや、ブログパーツなどの挙動を置き換えることが出来ます。 外部サーバーから読み込むスクリプトをページ最後部に記述することでページレンダリングを妨げなくなります。 このページはこんな感じになってます。 var adsense_url = 'http://pagead2.googlesyndication.com/pagead/show_ads.js'; document.lazy_writer(adsense_url, function(str){ var id = "adsense_" + this.script_count; document.getElementById(id).innerHTML = str; }, {delay :
第30回 JavaScriptの動作を軽くするための工夫：ITpro
今回はJavaScriptとWebページの表示・操作の体感速度について考えてみます。というのは，JavaScriptのせいでWebページの表示や操作などの速度が遅くなっている，と感じることがあるからです。 現在のWebサイトでは，JavaScriptを使って使い勝手を向上することは，ごく当たり前に行われています。例えば，動的にページを書き換えたり，ページ遷移を行わずにサーバーと通信を行ってデータを取得したりと，JavaScriptを使うことで，Webサイトをより便利に，より使いやすくすることができます。 Ajaxという言葉がはやってから，もう2年以上がたつんですよね。何年か前，JavaScriptはじゃまで，セキュリティを低下させる不要なものだと見なされていた頃がありました。しかしそれから一変して，「JavaScriptをがんがん使ってもいい」という空気になったことで，Webサイトを作成す
jsmap - JavaScriptによる都道府県入力補助
Q - なぜ、全国地図にしないのですか? 4つほど理由があります。 ポップアップが場所をとりすぎるから 現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。 キーボード操作時の押下回数を減らすため jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。 多言語対応のため 日本は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。 認知的限界のため これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。 ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。 Q - 地図はもっと詳細化/単純化しないのですか? 詳細
本気でやるなら a 要素を避けて input 要素を使うべき - A Better Project＠はてなダイアリー（インポート版）
同日 17:15 頃追記：はてブコメントで input 要素は form 要素外でも使えるとの指摘を北村（id:kits）さんからいただいたので、訂正。参考：http://www.w3.org/TR/html401/sgml/dtd.html#inline そろそろ本気で学びませんか？ | Think IT（シンクイット）で、href="javascript:void(0)" には誰も突っ込まないのかと思っていたら、重くなる原因でもなければバージョンが変わるのはライブラリだけではない - id:HolyGrailとid:HoryGrailの区別がつかない日記で以下のような発言が。 aタグにonClick書いてる時点でなにか違うことをやっている気がしなくもない。 もともとこういうのは超苦肉の策で始めたものだ。 ボタンが嫌だ！リンクにしたいっていうご要望をうけいれるところから始まった。 これで
本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記
第1回 そろそろ本気で学びませんか？ | Think IT これ、今この記事書いてる時点で650以上ものブクマがされているんだけれども、あまり内容がよろしくない。 というのも、解説はとても丁寧ですごくよい内容なのだけど、サンプルコードの書き方がどうも古くさい。 onclick属性とか、今時のフロントエンドエンジニアはそんな書き方はしない（と思う）。 なぜonclickをあまり推奨しないのか やっぱり、エンジニアとデザイナーorマークアッパーとの分業の点でHTMLの属性にスクリプトを書いちゃうのはあんまりよろしくない。 たとえばの話だけど関数の名前を変えたかったり、だとか、HTMLを変更したり、っていうときにミスが起こりやすくなってしまう。 これは分業していなくてもどちらにしろ発生してしまうことだと思う。 他にも前に書いたのだけど、aタグとかでonclickしちゃうとhrefにreturn
JavaScriptを使って描画するCanvasとは？
Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。これまで、動的に図を表示させる方法としては、Flashが代表的な選択肢でした。しかし、Canvasを使うことで、テキストエディタさえあれば、誰でも無料で動的に図を描くアプリケーションを作ることができるようになるのです。 手前みそで恐縮ですが、図1は筆者がCanvasを使って作った棒グラフを描くJavaScriptライブラリのキャプチャ画像です。Canvasを使うことで、簡単な図だけではなく、かなり凝ったデザインも扱うことができることがおわかりいただけると思います。 しかし、Canvasは決してFlashの代替技術ではありません。まずは、Canvasの特徴を簡単にまとめてみましょう。Canvasの特徴としては、「JavaScriptを使って描画する」「文字は描けない」「アニメーション機能がない」の3つがあり
なぜみんなlightboxを使うの？
なぜみんなlightboxを使うのだろうか。 あれ、迷惑なだけだと思うのだ。 文章と比較しながら画像を見ることが出来ないし、視覚的には別ページっぽく見えるのに、ブラウザの戻るボタンを押すと前のページに移動してしまう。 Flashが叩かれていたときによく言われていたことをそのまま繰り返しているじゃないか。 lightboxって、何がいいの？ 何も便利になっていない。
はてなブログ | 無料ブログを作成しよう
来年も作りたい！ふきのとう料理を満喫した 2024年春の記録 春は自炊が楽しい季節 1年の中で最も自炊が楽しい季節は春だと思う。スーパーの棚にやわらかな色合いの野菜が並ぶと自然とこころが弾む。 中でもときめくのは山菜だ。早いと2月下旬ごろから並び始めるそれは、タラの芽、ふきのとうと続き、桜の頃にはうるい、ウド、こ…
[JS]軽量で、簡単に設置できるLightbox風のスクリプト -iBox
iBoxは、画像・動画・インラインコンテンツ・ドキュメント・フォームなどをLightbox風のエフェクトで表示するスクリプトです。 iBox v2 iBox - Lightweight inline popup Lightbox風のスクリプトは多数ありますが、その多くはjQueryやPrototypeなどのライブラリと一緒に設置しないと動作しなかったりしますが、このiBoxは単独で実装することができます。 また、容量も18.5KBと他の多くのスクリプトと比べ軽く、Packerを使用すると7KBになります。 iBoxの実装方法は、「ibox.js」と「ibox.css」を外部ファイルとして指定し、下記のコードを記述します。 titleは、キャプションとして表示されます。 画像 <textarea name="code" class="html" cols="60" rows="5"> <a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/01/table.html
window.close()で確認ダイアログを出さないで閉じる。 - Windows Script Programming
[JS]角丸を簡単な記述で実装するスクリプト -Roundcorners Canvas | コリス