画像を暗くしていくのがミソ。はじめは0から255の明度にしたけど、次は0から216、次は0から183まで...といったように、暗めの範囲を使うようにしていく。最後にこれらの明度をすべて足し合わせた画像をつくればできあがり。単純に足せば明度は255を振り切ってしまうので、明度を足し合わせた結果をさらに0から255の範囲にとどまるように調整することが必要だけど。スクリプトは下のよう(要PIL)。動作の調整には、size変数に最終的に作りたい画像サイズ(縦横同じ)、ampd変数に明度の減衰率をセットする程度。noiseをPILでつくったTweet広告を非表示にする2013-12-02JavaScriptの実用例(5)ドキュメントの内容を変化させるようなJavaScriptは、ページの最後の方で実行させたほうがよいという話までしました。管理上、JavaScriptはすべてページの冒頭に記しておきたいという要求もあるはずです。JavaScriptをHTML文書のそこらへんにバラバラと書いてあると、あとで困ることも多くなりがちですから。いえ、ページの冒頭で、まだ表示もされていない要素のinnerHTMLを操作しようとしてもうまくいかないわけですから、どうしたらよいでしょう。いうときは、スクリプトが実行されるタイミングを指定しておけばよいです。具体的には、ページがすべてロードされ終わったら、その時点ではじめて一連の命令を実行してくれるように予約しておけばいいというわけです。下のような書き方をします。do_something;</script>functionは、一連の命令を「関数」という名前のものに仕立てて、あとでまとめて実行できる形にするためのものです。このfunction文そのものを実行(実行っていう言葉はここでは不正確なんですけど)している時点では、何も起こりません。いう関数を別に呼び出したときに、はじめてこの関数の内容が実行されます。window.onloadは、ページを全部ロードし終わったときに何かをさせたいときの書き方です。ここでは、「(今は何もしないけど)ページを全部ロードし終わったときにはdo_something関数を実行してね、ということを表現しています。いう書き方のスクリプトなら、ページの冒頭に書いておいても大丈夫です。(実際のサンプル)window.onloadのような仕組みを使って、「何かが起こった時に、何かをする」という動作をさせることを、「イベント駆動」といいます。今のサンプルのようなのは、ページのロードが終わったというイベントに反応して何かをした、と言い直せます。他にもWebブラウザ上で起こるイベントはいろいろあって、マウスボタンが押されたとき、要素の上にマウスカーソルが乗った時、キーボードが押されたとき、単に時間がたった時、と、様々なタイミングで「イベント」が起こっていて、それに反応するプログラムを書けるようになっています。このwindow.onloadという書き方は、それなりに実用的に使えますが、ひとつ弱点があり、人によっては他の方法を好んで使うかもしれません。弱点というのは、window.onloadには関数をひとつしかセットできないとう点です。下のような書き方をしたときに問題になります。do_another_something;</script>このままだと、do_another_somethingだけが実行対象となり、その前に書いたdo_something関数は実行予約からは外れてしまいます。自分ひとりがJavaScriptを書くのなら、このふたつの仕事をさらに別の関数としてまとめてしまってそれを指定すればいいですし、別に大きな問題にはなりません。big_handler;</script>ですが、すでに誰かが書いたJavaScriptをそのページでは使用済で、さらに別の動作を付け足そうとしているときは、すでにどんなイベントに仕事が割り当て済みなものか、簡単に把握ができません。window.onloadイベントを気ままに書き換えてしまうと、すでに実現していたある機能が消えてしまうこともあるでしょう。window.onloadを使うのは、実は少し旧式のやりかたなのです。addEventListenerというものを使えば上のような問題も起こさずにさらにスマートな書き方ができるのですが、某IEとの互換性について少し余計なことを考慮しなければなりませんし、この場ではこれ以上書きません。いうことで、JavaScriptを実用的に使うひとつの例として、ページ内容の一部をHTML直書きでなくJavaScriptに任せることについて、何回かに分けてざっと書きました。10:15JavaScriptの実用例(5)Tweet広告を非表示にする2013-11-13JavaScriptの実用例(4)JavaScriptで、document.writeを使ってページ内にコンテンツを追加することは、そこそこ便利ですが、気になることもあります。今まで、JavaScriptはページとは別に外部スクリプトとして使うのがいいということを示してきましたが、これのロードに時間がかかるときは、少し困ったことになります。ページの途中に外部スクリプトのロード(読み込み)が指示されていて、その外部スクリプトを実際にWebサーバーから取得するのに5秒くらい時間がかかるとすると、その間、ページ表示が途中で止まります。遅いWebサーバーを準備することもできませんから簡単にデモで示すことはできませんが、これを読んでいるかたも、割と経験はあるんじゃないでしょうか。典型的には、いくつかアフィリエイトや広告の外部コンテンツを埋め込んでいるようなサイトによくあります。広告って、たくさんのサイトに表示させる必要があるものですから、広告を配信するWebサーバーはすごく高い負荷に対応しなきゃいけないんだと思います。対応しきれなくて、サイトの表示全体が遅くなってしまう原因になっているんでしょう。document.writeのように「今表示しようとしている場所」にHTMLを書き出すのじゃなくて、ほぼ全部のHTMLが表示され終わったあとで、決まった場所にあらためてHTML(の一部)を放り込むようなことができれば、上の原因からくる遅さは解消できます。広告などの表示には相変わらず時間がかかったとしても、メインのコンテンツが早く表示できるのならそっちのほうがいいですね。別に広告でなくても、そもそも負荷の高いWebサイトで外部スクリプトの提供も重くなりがち、というときも同様です。それには、innerHTMLというものを使います。これはHTMLの構成要素ごとに持っているプロパティのようなもので、あとで値を設定しなおすと、実際の表示内容にも影響を与えることができるんです。こんなHTMLがあるとしましょう。id="add1"></div><h1>なんとかかんとかのページです!</h1><p>なんとかかんとか・・・</p><script>//上まで表示させてから、ここで何かする</script></body></html>スクリプトが実行されるタイミングでは、もうひととおりのコンテンツは表示されています。このタイミングでdivタグの中(今はからっぽ)に何か内容を放り込みたいな、というときに、下のように書きます。<script>//上まですでに表示されている。here!</td></tr></table>';</script>(実際のサンプル)上の例ではJavaScriptは外部化していませんが、実際のサンプルでは外部化しました。動作内容は変わりません。内容を放り込んでおくために置いておくタグは、divにすることが多いです。なんの飾りもないブロック要素ですから、表示上のクセがなくていいのでしょう。そのタグにはid要素を定義しておくのがふつうです。ここではadd1という名前にしましたが、なんでもいいです。そのタグが表す要素(DOMっていうんですが、別に知らなくてもいいです)を、document.getElementByIdっていう書き方で取得することができます。ここでは、aっていう変数がid="add1"に該当する要素を指し示すようにしました。あとは、a.innerHTMLっていうプロパティが、中身のHTMLを操作するための手掛かりです。好きなHTMLを文字列として突っ込めば、即座にその内容が実際の画面にも反映されます。今回の例では決まったHTMLを設定しただけですが、この内容が、今までに見たことがある、カレンダーに反応して内容の変わるものだったり、占いみたいなものだったりしても、要領は同じです。この手のスクリプトは、ページの最終部近くで実行させる必要があります。ページの最初で実行したら、まだその後の内容が表示されていないのですから、「idがadd1の何か」がまだ存在していないことになって、期待した動作になりませんからね。ここらへんに注意すると、ページの内容をスクリプトで操作するという仕事が、割と安定してできるようになるでしょう。11:09JavaScriptの実用例(4)Tweet広告を非表示にする2013-11-01JavaScriptで目次を自動生成するFAQコーナーみたいなコンテンツを作っていて、内容は整備されてきたけど、目次も作らなきゃ、というときの話。FAQの一問ずつは、h2タグで見出し、pタグで内容、といった感じだったとする。