<h3>今日のタスクバーさん</h3>
<p>/taskvar/log</p>
<p><a href="http://f.hatena.ne.jp/secondlife/20090608140337"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/s/secondlife/20090608/20090608140337.png" alt="f:id:secondlife:20090608140337p:image" title="f:id:secondlife:20090608140337p:image"></a></p>

今日のタスクバーさん/taskvar/logf:id:secondlife:20090608140337p:image

今日のタスクバーさん

<h3>document.write の中に埋め込んだ script タグ</h3>
<p>document.write の中に埋め込んだ script タグの挙動が google chrome で気になったことがあるので調べてみた。↓こういうやつね。</p>
<pre><code>document.write('');
</code></pre>
<h4>全般</h4>
<p>document.write(スクリプトタグ) と、document.write(code) が、同一の script タグ内部に記述されている場合、document.write(code)が優先される。別の script タグの場合は、最初の script タグの document.write の処理がすべて終わった後に、次の script タグが実行される。つまり、document.write が記述された script タグ内部では、外部 script のロードはブロックしない。</p>
<pre><code>document.write('&#x3C;script type="text/javascript" charset="utf-8" src="/xxx">'); // 次に処理される
document.write('my code'); // こっちが最初に実行される


document.write('my code2'); // 最後に実行される
</code></pre>
<h4>google chrome 2.0.172.30 / Firefox 3.5 beta4 / Win Safari 4 Beta / IE 6,8</h4>
<p>同一の script タグ内部での document.write の script タグ書き込みによる処理は、並列で http の取得を行う。たぶん 1 ドメインあたり4並列ぐらいな感じ。別のドメインに分けると、さらに並列度が増す。</p>
<p>また、このときの http の並列取得は、順番に行われるわけでない(最初のコネクションが並列なら、順番にする意味ないしね)。eval 的な JS の実行処理はきちんと順番に行われる。</p>
<h4>Firefox 3.0.10</h4>
<p>直列で http の取得処理を行うので、他のブラウザに比べ遅さが顕著。ただ、実際に同一タグ内での document.write による script タグ書き込みはあまり使われていない気がするので、遅いと感じる場面に遭遇することがあまりなさそうな気もする。</p>
<h4>解らなかった</h4>
<p>巨大な HTML / 様々な画像等をロードしているページなんかの場合、途中で document.write での script タグ書き込みがある場合、Google Chrome では document.write がブロックしないことがよくあった。速度向上のため、なにかを指標にして、document.write が非同期でよさそうなら非同期にしていたりするのかぁ…。</p>
<p>以下サンプルに使ったスクリプト(役に立たないとは思う)</p>
<ul>
<li><a href="http://gist.github.com/124632">http://gist.github.com/124632</a></li>
</ul>

document.write の中に埋め込んだ script タグdocument.write の中に埋め込んだ script タグの挙動が google chrome で気になったことがあるので調べてみた。↓こういうやつね。document.write('');全般document.write(スクリプトタグ) と、document.write(code) が、同一の script タグ内部に記述されている場合、document.write(code)が優先される。別の script タグの場合は、最初の script タグの document.write の処理がすべて終わった後に、次の script タグが実行される。つまり、document.write が記述された script タグ内部では、外部 script のロードはブロックしない。document.write(''); /

document.write の中に埋め込んだ script タグdocument.write の中に埋め込んだ script タグの挙動が google chrome で気になったことがあるので調べてみた。↓こういうやつね。document.write('');全般document.write(スクリプトタグ) と、document.write(code) が、同一の script タグ内部に記述されている場合、document.write(code)が優先される。別の script タグの場合は、最初の script タグの document.write の処理がすべて終わった後に、次の script タグが実行される。つまり、document.write が記述された script タグ内部では、外部 script のロードはブロックしない。document.write(''); // 次に処理される
document.write('my code'); // こっちが最初に実行される


document.write('my code2'); // 最後に実行されるgoogle chrome 2.0.172.30 / Firefox 3.5 beta4 / Win Safari 4 Beta / IE 6,8同一の script タグ内部での document.write の script タグ書き込みによる処理は、並列で http の取得を行う。たぶん 1 ドメインあたり4並列ぐらいな感じ。別のドメインに分けると、さらに並列度が増す。また、このときの http の並列取得は、順番に行われるわけでない(最初のコネクションが並列なら、順番にする意味ないしね)。eval 的な JS の実行処理はきちんと順番に行われる。Firefox 3.0.10直列で http の取得処理を行うので、他のブラウザに比べ遅さが顕著。ただ、実際に同一タグ内での document.write による script タグ書き込みはあまり使われていない気がするので、遅いと感じる場面に遭遇することがあまりなさそうな気もする。解らなかった巨大な HTML / 様々な画像等をロードしているページなんかの場合、途中で document.write での script タグ書き込みがある場合、Google Chrome では document.write がブロックしないことがよくあった。速度向上のため、なにかを指標にして、document.write が非同期でよさそうなら非同期にしていたりするのかぁ…。以下サンプルに使ったスクリプト(役に立たないとは思う)http://gist.github.com/124632

document.write の中に埋め込んだ script タグ

<ul>
<li><a href="http://16x16.hatelabo.jp/">http://16x16.hatelabo.jp/</a></li>
</ul>
<p>先日、はてラボで 16x16 という、16x16 サイズに特化したアイコンエディタをリリースしました。</p>
<p>favicon や小さなアイコンなど、Web 上では小型サイズのドットアイコンは使いやすいので、いろいろな場所で使われていますね。16x16 サイズのアイコンを書くのに、16/32/64 サイズの同時プレビューが欲しかったり、即座に色の明度調整を行いたかったのですが、手軽に使えるツールが無かったため、Flash でサクッと作ってみました。</p>
<p>と云うわけで、はてなのユーザアイコンとも相性がいい 16x16 サイズのアイコンを、みんな描いてみましょう！絵心が無くてもなんとなーく描くだけでそれっぽいのが作れると思うので、軽いチュートリアルを作ってみました。</p>
<h4>その1 ざっくりと形を決める</h4>
<p>適当に形を決めましょう。初心者なら線対称な図形を描くのが楽ちんです。■●▲の組み合わせなんかでさくっと。今回は■を描いてみました。<br>
<img src="http://img.f.hatena.ne.jp/images/fotolife/s/secondlife/20090615/20090615191630.png?1245061171" alt=""></p>
<h4>その2 アイデンティティとなるものを描く</h4>
<p>ただの図形だと味気ないので、アイデンティティとなるものを描きます。今回は顔っぽく仕上げるために目と口をかいてみました。■●▲なんかを描くだけでもいいと思います。シンプルなアイコンっぽくなってきましたね。<br>
<img src="http://img.f.hatena.ne.jp/images/fotolife/s/secondlife/20090615/20090615191631.png?1245061153" alt=""></p>
<h4>その3 色をつける</h4>
<p>今まではモノトーン(シンプルなアイコンならモノトーンや黒白+一色が良いです)で来ましたが、ここでビビットな色でアクセントをつけてみます。ピンクと青＋灰色はなんか好きです。</p>
<p><img src="http://img.f.hatena.ne.jp/images/fotolife/s/secondlife/20090615/20090615191632.png?1245061140" alt=""></p>
<h4>その4 陰影をつける</h4>
<p>このままでは平らな感じなので、陰影をつけてみましょう。顔の灰色を選択 (CTRL でスポイト) し、カーソルキーの↑↓を押すと、色はそのままに明度を変更できるため、簡単にハイライトや陰影をつけるための色を選べます。<br>
左上から光が当たったら、というのを想定して左上のラインを明るい灰色、右下のラインを暗い灰色で塗ります。<br>
<img src="http://img.f.hatena.ne.jp/images/fotolife/s/secondlife/20090615/20090615191633.png?1245061116" alt=""></p>
<h4>その5 もの足りないので何か付け足す</h4>
<p>その4で完成！でも良いのですが、なにかもの足りないので付け足してみましょう。具体的には頭に耳を、口によだれを付け足してみました。この辺は描いてなんか違う→UNDOの繰り返しです。</p>
<p><img src="http://img.f.hatena.ne.jp/images/fotolife/s/secondlife/20090615/20090615191634.png?1245061081" alt=""></p>
<p>ちなみに q キーを押すと IE 以外のブラウザで履歴(いままで描いてきた履歴)を表示することができます。たとえば、今回のチュートリアルで作ったアイコンの履歴は下な感じです。その5でいろいろと試行錯誤してるのが解りますね。</p>
<p><img src="http://img.f.hatena.ne.jp/images/fotolife/s/secondlife/20090615/20090615191629.png?1245061056" alt=""></p>
<h4>完成したらアップロードしよう！</h4>
<p>アイコンが完成したら、保存して自分のはてなプロフィールアイコンとしてアップロードしてみましょう。 <a href="http://www.hatena.ne.jp/">http://www.hatena.ne.jp/</a> にアクセスし、右上のユーザアイコンの画像の鉛筆アイコンをクリックします。</p>
<p><img src="http://img.f.hatena.ne.jp/images/fotolife/s/secondlife/20090615/20090615185230.png" alt=""></p>
<p>その後、次のページでアップロードすれば完了です！</p>
<p><img src="http://img.f.hatena.ne.jp/images/fotolife/s/secondlife/20090615/20090615191635.png?1245061188" alt=""></p>
<p>こんな感じに、16x16 サイズでプロフィールアイコンを描くと、大きいアイコン(64x64)の方も、いい感じのドット絵になりますね。というわけで、みなさん是非これを機会に、プロフィールアイコンや favicon などを描いてみてはいかがでしょうか。</p>

http://16x16.hatelabo.jp/先日、はてラボで 16x16 という、16x16 サイズに特化したアイコンエディタをリリースしました。favicon や小さなアイコンなど、Web 上では小型サイズのドットアイコンは使いやすいので、いろいろな場所で使われていますね。16x16 サイズのアイコンを書くのに、16/32/64 サイズの同時プレビューが欲しかったり、即座に色の明度調整を行いたかったのですが、手軽に使えるツールが無かったため、Flash でサクッと作ってみました。と云うわけで、はてなのユーザアイコンとも相性がいい 16x16 サイズのアイコンを、みんな描いてみましょう！絵心が無くてもなんとなーく描くだけでそれっぽいのが作れると思うので、軽いチュートリアルを作ってみました。その1 ざっくりと形を決める適当に形を決めましょう。初心者なら線対称な図形を描くのが楽ちんです。

http://16x16.hatelabo.jp/先日、はてラボで 16x16 という、16x16 サイズに特化したアイコンエディタをリリースしました。favicon や小さなアイコンなど、Web 上では小型サイズのドットアイコンは使いやすいので、いろいろな場所で使われていますね。16x16 サイズのアイコンを書くのに、16/32/64 サイズの同時プレビューが欲しかったり、即座に色の明度調整を行いたかったのですが、手軽に使えるツールが無かったため、Flash でサクッと作ってみました。と云うわけで、はてなのユーザアイコンとも相性がいい 16x16 サイズのアイコンを、みんな描いてみましょう！絵心が無くてもなんとなーく描くだけでそれっぽいのが作れると思うので、軽いチュートリアルを作ってみました。その1 ざっくりと形を決める適当に形を決めましょう。初心者なら線対称な図形を描くのが楽ちんです。■●▲の組み合わせなんかでさくっと。今回は■を描いてみました。その2 アイデンティティとなるものを描くただの図形だと味気ないので、アイデンティティとなるものを描きます。今回は顔っぽく仕上げるために目と口をかいてみました。■●▲なんかを描くだけでもいいと思います。シンプルなアイコンっぽくなってきましたね。その3 色をつける今まではモノトーン(シンプルなアイコンならモノトーンや黒白+一色が良いです)で来ましたが、ここでビビットな色でアクセントをつけてみます。ピンクと青＋灰色はなんか好きです。その4 陰影をつけるこのままでは平らな感じなので、陰影をつけてみましょう。顔の灰色を選択 (CTRL でスポイト) し、カーソルキーの↑↓を押すと、色はそのままに明度を変更できるため、簡単にハイライトや陰影をつけるための色を選べます。左上から光が当たったら、というのを想定して左上のラインを明るい灰色、右下のラインを暗い灰色で塗ります。その5 もの足りないので何か付け足すその4で完成！でも良いのですが、なにかもの足りないので付け足してみましょう。具体的には頭に耳を、口によだれを付け足してみました。この辺は描いてなんか違う→UNDOの繰り返しです。ちなみに q キーを押すと IE 以外のブラウザで履歴(いままで描いてきた履歴)を表示することができます。たとえば、今回のチュートリアルで作ったアイコンの履歴は下な感じです。その5でいろいろと試行錯誤してるのが解りますね。完成したらアップロードしよう！アイコンが完成したら、保存して自分のはてなプロフィールアイコンとしてアップロードしてみましょう。 http://www.hatena.ne.jp/ にアクセスし、右上のユーザアイコンの画像の鉛筆アイコンをクリックします。その後、次のページでアップロードすれば完了です！こんな感じに、16x16 サイズでプロフィールアイコンを描くと、大きいアイコン(64x64)の方も、いい感じのドット絵になりますね。というわけで、みなさん是非これを機会に、プロフィールアイコンや favicon などを描いてみてはいかがでしょうか。

A Day in the Life

今日のタスクバーさん

今日のタスクバーさん

書いている人

おたよりを送る