なぜ気づいたかと言うと、スターをつけたりラベルをつけたりできるプルダウンメニューの中に、見慣れないものがあったからです。

「メールの自動振り分け設定」っていうやつです。

これが自分みたいなものぐさにはかなり便利。

とかく「振り分けしたい！」と思ってから振り分け設定完了するまでの流れがスムーズです。

1. メールを開いて「あー、ラベルつけて振り分けしたいな」と思って


2. プルダウンメニュから「メールの自動振り分け設定」を選んだら、すでに条件が入力されていて


3. それをちょっと好みに変更したら、「フィルタのテスト」をすればすぐに結果が確認できて、フィルタがうまくかかってないことに気づかないで、あれ、おかしいなと悩むことも無く


4. そしてそのまま受信フォルダ内の再振り分けまで行うことができる

あっという間にできてしまうので、逆にこんどはラベリングとフィルタリングの管理が心配になってきます。

動画はこちら。
真ん中の「動画をスタート」ボタンを押してくだされ。

そもそもメールソフトで

　　・振り分け結果のプレビュー機能
　　・振り分け条件の自動挿入

の2点ができるのって、他にないのではと思います。後者だけだったらBecky!はできますけれど。

…

ちなみに、その他に色々と機能は追加されているのですが、自分はそれほど使わなさそうです。

ラベルに色をつけられるのは便利だなー、と思いますが、Gmail上でのメールの分類が１メール＝1ラベルの一階層振り分けで事足りている自分としては、視覚的に赤とか黄色とかついていてもあんまり意味が無いというか。

一つのメールにいろんなラベルをつける人にとっては、2階層構造を視覚化するのに便利なんじゃないかと思います。

【関連リンク】
高速化した新版Gmailが日本語対応

日本語ユーザーのGmailがバージョンアップ。新機能をチェックしよう

OutLook Expressでのメール振り分けのインターフェイスとフロー

Thunderbirdでのメール振り分けのインターフェイスとフロー

これは…確かに量販店行ってもほぼ全てVistaですもんね。仕方ないのかも。
そんな状況でWeb系の仕事は中々頭が痛い状況です。

以前に記事でside by sideでInternetExplorer6とInternetExplorer7を共存させる方法の記事を書きました。
http://www.7korobi8oki.com/mt/archives/000094.html

ただ、これ実際やってみると、標準のブラウザ設定周りや、あるいはIEのエンジンを使ったSleipnirみたいなブラウザからIEを呼び出す場合で、どうにも妙な挙動を示すことが多く、正直使うのが怖かったです。

それでいろいろ検索していたら、このマイクロソフト発の方法がどうやら今は一番安定してるみたいですね。

普段はIE6を使いつつ、VirtualPC2007をインストールして、その中でXPをブートして、IE7を使うという方法。
どうやらMicrosoftもおすすめしているようで、今年2007年12月7日までの期限付きですが、ライセンス不要のXPとIE7のセットを無償配布していました。

該当のIEBlogの記事はこちら。
■IE6 and IE7 VPC Refresh Available
http://blogs.msdn.com/ie/archive/2007/08/20/ie6-and-ie7-vpc-refresh-available.aspx

なんかいたれりつくせりなので、とりあえず入れてみました。

ツールって言っても、ラジオボタンをポチポチと選んでいくと動的にそのページで読み込んでいるCSSファイルが変わるっていういだけの単純なシロモノです。

要は
　　：大きい文字サイズ　　　　：標準の文字サイズ
みたいなものを細かく組み合わせた奴です。

要はサイトのテンプレートをお客さんに選んでもらう時に、掛け算すると100種類以上になるテンプレートの中から（100種類以上のCSSがあるわけじゃなくて、CSSの組み合わせで100種類以上になる）、サムネイルだけで一つ選んでもらうのは、なかなかしんどいかなと思ったので作ったプレビューツールです。

JavaScriptでちょこちょこと作っていたら、仕組みとしてはなんとかなったのですが、どうもブラウザで問題が。

こないだ初めて、Yahoo!のFlash広告を作りました。メガバナーっていう 728×90px のFlashバナーでした。
ひとまず普通にあのサイズで作れば良いのかなと思って気軽にはじめたら、どうも色々と制約があるみたいで、結構難儀しました。

まず、入稿するデータは三種類。
　　・スーパーバナーMega（Flash）
　　・スーパーバナーMega（ミドルFlash）
　　・スーパーバナーMega（代替イメージ）

それぞれを、視聴者の閲覧環境によって切り替えるようです。
具体的には、Flashの1フレーム目のバイト数と、閲覧者の回線速度を比較して三つのうちどれを出すか決めているようです。
　

実際は現場現場ケースバイケースで、どこまで無条件に切り捨てるかの閾値は変わってくると思いますが、なんとなく頭のスミにおいておくと、いいかもですな。

特に忙しかったり失敗した後だったりで、自分を閉じてしまってるときには意識的にこの辺を思い出すようにするとバランスが取り戻せるのでは、と。

1. 前にもやったことあるんだけどさー。
2. 絶対うまくいかんって。
3. ポニーはいかが？（分からん…）
4. 尻みたいに下らないな。
5. そんなことしたら首になるかもよ？
6. 我々はそのアイディアにはついていかないと思うよ？（笑）
7. 予算が出ないんじゃないかなぁ。
8. 別にそんなに興味深いことじゃないね。
9. そんな時間はないなぁ。
10. 上の奴等は絶対ゴーサイン出さないと思うよ。
11. なんか良く分からないな。
12. いや、でもそういう決まりだし。
13. 聖杯探すくらい大変だと思うよ。
14. ちょっと興奮してるんじゃない？
15. 十分な予算はもらえないと思うよ。
16. それはうちの仕事じゃないよ。
17. 何を言い出すんだ？正気？
18. ここには脳みそを持ったやつはいないのかい？
19. それはニーズと合わないから。
20. [無反応]

そのほかにもコメント欄には色々あげられてます。例えば

「うん、それは確かによさそうだね。でも僕たちはずっとこの方法でやってきたんだ、だからこれからもそうするよ。」

「君がそれをやりたいんだったら、君の時間を使って準備とかをしてね。勤務時間中にやらないでね？」

アイディアを気楽に書き込めるようなホワイトボードを社内に置いとくのもいいかもですね。余裕が無いときにはスルーしちゃっても、余裕ができてそれを見て考え直したら、おやこれよさそう、なんてこともよくありますし。

該当のエントリーはこちら。
Actual Browser Sizes (final) - Baekdal.com

もともとは、JavaScriptで単純に得られる画像解像度をあてにしてWebサイトの横幅を決定するのはどうよ？というところから始まったものです。

実際には最大化してるかどうか分からないし、ツールバーやエクステンションバーもあるし、お気に入り出してるかとか、と。

結論としては以下のようになっています。
　

でも、やっぱ紅茶でほっと一息つかないといやだ！という方々のためにTips。
紅茶から80％のカフェインを抜く方法。簡単。

元記事はCut 80% of the caffeine from your tea - Lifehackerから。

特に自分はPandoraがお気に入りで、家でも会社でも使っています。
Pandoraは、これを書いた後にも、アーティストの略歴などが見られるBackStageなどの機能が追加されたりとさらに便利になっています。

何となく手持ちの曲に飽きてきて新しいものを探したい、という人手まだ使ったことが無い方は是非。お勧めです。

ところでこのPandoraを使っていて、以前から自分も欲しいと思っていたのがスタンドアローンのアプリケーションです。Last.fmでは、Last.fm Playerがあるのですが、Pandoraはブラウザで見るしかないです。

なので、間違って閉じちゃったり（これが悔しい…）妙にスペースを取ってしまったりで、ちょっと不便でした。

そんなんで探っていたら、LifeHackerの方に、なんとスタンドアローンのアプリの紹介が。

該当記事は「Technophilia: 15 ways to get more out of Pandora - Lifehacker」です。

アプリの紹介と言うわけではなく、Tips集なのですが、二つ紹介されています。

実際はお気に入りが表示されていたり、ブラウザを必ずしも最大化していなかったりで、中々JavaScriptで取得したスクリーンサイズは基準になりませんよね。

その辺りを調査した記事がありました。
11月くらいにはより多くのデータで再分析のレポートをあげてもらえるそうで、大期待です。

Bakal.com::Actual Browser Sizes - Preview

　LifeHacker :: Flickr maps photos

以前にauのDUOLOG（だったかな？）で
位置情報つきで写メールをアップするサービスがありましたね。

Flickr maps photos の使い方は、以下のチュートリアルムービーを見てもらえば分かりやすいと思います。日本は細かい地図が無いので、きっちり撮影場所を指定できないのがちょっと悲しい。

・写真を地図に配置する：
　http://www.flickr.com/help/screencasts/vol1
・写真を検索する：
　http://www.flickr.com/help/screencasts/vol2

使い方としては、自分でタグを追加するのではなく、地図にドラッグすれば勝手に地図上の位置を示す"Geotag"がついてくれるみたいなので、楽でよいですねっ。
それにインターフェイスも分かりやすい。

flickrの開発者ブログによると（該当記事：Great shot - where'd you take that?）

If you already have geotagged photos on Flickr (from using a 3rd party tool), you can import them into the new system from a new page under "Your Account". We'll also be releasing new API methods for developers soon so they can continue to innovate on tools for location-based photo fun.

なので、今までの地図情報設定ツールでgeotagをつけたものも、インポートできるとか。また、そのうちAPIも作るらしいですよ。

　
ちょっと前に、軽くフライングしてたみたいですね（笑）
http://www.flickr.com/photos/jmanners/206613837/
Flickr working on geotagging functionality?
　
日本人もこれから使うかな？そもそも日本のFlickr人口ってどのくらいなんだろう。
自分も決して頻繁に使ってるとは言いがたいですし。
もっぱMixiというか。
　

【関連記事】
GeoTagが入力可能になったFlickr（Going My Way）
地図情報の整備が急務だわな（ながら族）

Panographies: Panoramas on Steroids

手法というか手段というか、その辺りは別段難しいことは無くて写真をひたすら重ねていくだけなのですが、

透明度やレイヤー合成の仕方、色味なんかをうまくやると、透明水彩で精密に書いたような美しいものができあがります。

もちろん、それ以外にもテイストは色々あるとは思いますが、ひとまずこの一枚にやられました。
http://static.flickr.com/42/123097045_be2fa07ce4_o.jpg

これをじーっとみながら、なんで広角にするとゆがむんだろうなんていう、おい自分本当にデザイナーかよっていういツッコミを受けそうなことを考えていたんですけれども、

これは、世界地図を作ると歪んじゃうのと同じ理由ってことでOKでしょうか…。
地球が円柱形とかだったら歪まないのかな。

それはともかく、Flickrでも「Panography」というタグがありますので、こっちでも色々みられますよ。
http://www.flickr.com/groups/panography/pool/

個人的にはこの辺が好きです。一枚作ってみようかな。
http://www.flickr.com/photos/tiaguito6/210834823/in/pool-panography/

というわけで作ってみたけど、想像をはるかに超えてむずかしい… orz
こりゃたくさん作って精進しないと。

1. Read technical books（技術書を読もう）
2. Read online tutorials（オンライン上のチュートリアルを読もう）
3. Hang out with geeks（技術に詳しい知り合いと付き合おう）
4. Subscribe to technical magazines（技術関係の雑誌を講読しよう）
5. Take classes（あるなら、授業をとろう）
6. Create your own web site（自分のWebサイトを作ろう）
7. Build your own PC（自作PCを組んでみよう）
8. Embrace a variety of software（色んなソフトを試してみよう）
9. Learn to program（プログラミングを勉強しよう）
10. Marry a geek（もうギークと結婚しちゃえばいいじゃん）

If you aren’t a geek yourself, then do what you can to recruit one into your family.

最後の落とし方が好き…。

でも音楽でも、一番上手くなる早道は、楽器が上手い相方と付き合うって言いますし？
あながち。

しかし、ギークって日本語でどう訳するのが、一番ズレが少ないんでしょうね。

英辞郎だとこんな感じ。

【1-名-1】 変人｛へんじん｝、奇人｛きじん｝、変態｛へんたい｝、異常者｛いじょうしゃ｝、ろくでなし、ばか、あほ、間抜け、ださい男、酔っぱらい、飲んだくれ◆【類】nerd / dweeb / goober
【1-名-2】 がり勉野郎、賢いが社交性に欠ける人
【1-名-3】 〈俗〉コンピュータおたく◆日本語の「おたく」同様、かつて否定的ニュアンスがあった。現在（2003年）では通例、褒め言葉、ないし肯定的な自己描写◆【同】computer geek
【1-名-4】 〈俗〉（コンピュータやネットに関する）上級者｛じょうきゅう しゃ｝、ベテラン、ヘビーユーザー
【1-名-5】 〈俗〉マニア

英語圏では、すでに肯定的な言葉になってるんですね。日本だとオタクは蔑称てきだし、なんていえばいいんだろう。
　
「コンピュータに詳しい人」とかじゃなくて単語で…うぅん、思いつかない。

Couldn't create FileInfo because Insertion test failed on SQL error Can't open file: 'mt_fileinfo.MYI'. (errno: 145)

特にMovableTypeのシステムには手を入れてないので、なんでー。
検索してみると、どうもデータベースが壊れているらしい。
sixapartのフォーラムだとこれみたい。
http://forums.sixapart.com/lofiversion/index.php/t50345.html

CHECK TABLE mt_fileinfo REPAIR TABLE mt_fileinfo

らすぃ。
とりあえずphpMyAdminから言われたとおりにやってみたら、無事直った。

PHPは全然ワカメなので、とりあえず備忘録。

MySQL が何度もクラッシュする場合に行うこと
http://dev.mysql.com/doc/refman/4.1/ja/crashing.html

CHECK TABLEについて
http://dev.mysql.com/doc/refman/4.1/ja/check-table.html

REPAIR TABLEについて
http://dev.mysql.com/doc/refman/4.1/ja/repair-table.html

壊れてるって言うと、ものすごくビビるんですが、これは簡単に直るのね…。

それが、Swift: a web browser for Windowsです。現在α版0.2を使用することが出来ます。
　※アプリケーションは以下の場所からもダウンロードできます。
　　http://www.pcwelt.de/index.cfm?pid=298&pk=53539&dl=25116&p=2

AppleがWindows用Safariを出したことによる影響

作者もどうしようかな、と悩んでいるようです。ブログにて現在の近況が分かります。
　　→http://people.zimmy.ca/~uchuujin/

今後のSwiftの発展としては、このままフェードアウトするのではなくWebKitを使用したまま、本家のSafariにはない色々な機能を追加していく方向で開発を続けていくという方向とのことです。
また、Safariとは違ってオープンソースなので開発しやすいですよ、というアナウンスもしていました。

今後の発展に期待ということですね。

そもそもの背景

事の発端は、AppleがSafariを初めとしたソフトのフレームワークであるWebKitをオープンソースとして公開したことからはじまりました。

それが、The WebKit Open Source Projectとのこと。

なぜ公開に踏み切ったかと言うと、こういった背景があったようです。

アップル、新プロジェクトを立ち上げ--オープンソース開発者との関係修復へ CNET Japan

Safariがベースとして選んだレンダリングエンジンは、KDEのKHTMLでした。

KHTML は C++ で書かれており、LGPL に基いて提供される。HTML 4.01、CSS レベル1およびレベル2、DOMレベル1およびレベル2、レベル3の一部、ECMAScript をサポートする。

特に CSS に関しては Acid2 テストをクリアする程の実装が施されている。

という中々凄いエンジンです。オープンソース。

しかし、AppleがKHTMLを使ってSafariを開発しているわりに、全然フィードバックがないということで、他のオープンソース開発者から顰蹙を買っており、関係が悪化していたとのこと。

なので、この状況を打開するために、AppleがWebkitをオープンソースとして公開した、という流れのようです。

で、WebKitって何。

元々、MacOSX用に、Webkitを使ったソフトはたくさんありました。
　＃WebKit:Applications using WebKit - OpenDarwin

いわゆるアプリケーションフレームワークですか。
その中でWebKitは、Webページのレンダリングや、アプリケーションのインタフェース部分。
Macだと、このサイトが非常に参考になるかと。
「はじめてのブラウザのつくり方」

WebKitはWindowsでビルドして使えるようです。
また、JavaScriptCore/WebCore についても上手くやればコンパイルできるとのこと。こちらがその説明です。英語。
WebKit:Building On Windows - OpenDarwin

その結果アルファ版までこぎつけたのが、Swiftということのようです（まだ良く分かってない…）

現状のSwift

ダウンロードして使ってみると分かりますが、とりあえず日本語も表示できないし、なんやかんや出来ないわけですが、ブラウザとしては動いております。すでに手元からMacを失ってしまったので比較はできないのですが、何かおもろいことになって行けばいいなぁと思っています（そんな終わり方かい…）

そもそもWinで動くようにコンパイルできるものなのですな…しかし。
あー、プログラムのお勉強をしないと…って一年で何回言ってるんだ。

関連記事

ドラッグ＆ドロップをテストされてます。
Swift - Like Apple's Safari? | Diaspar Journal

おっ、ミツエーリンクさんでもやってますね。Safari for Windows? - The Web Standards Project
の翻訳です。
Windows向けSafari？ | Web標準Blog | ミツエーリンクス

こちらでも使ってみた方が。
朝顔日記 - Webkit を使った Swift という名のブラウザ

はてなの方をみると、「tikeda::Diary - 角丸ライブラリ」が人気です。やっている内容は、「Flexible box with custom corners and borders | 456 Berea Street」と同じなのですが、色々サンプルのバリエーションを用意していたりPSD込みだったりで、親切でよさげです。

さて、前のエントリーでも指摘されましたが、CSSだけだとどうしてもマークアップ的に汚くなってしまうという欠点があります。
マークアップを重視するなら、どうせ見た目の問題なんだし、JavaScriptとCSSでやってしまってもいいですよね。

その思想で作られたNifty Cornersというテクニックがあります。これについては、検索していただければ、相当数の解説記事が浮かび上がってくると思いますので割愛…。

今回は、なんていうかそれがバージョンアップしてNifty Corners Cube として公開されたという内容です。

とは言っても、前回のバージョンを使ってないので何がどうなったのかあまり分かってないのですが…。仕様やサンプルは以下の本家のページを見てもらえれば、一番良いと思います。

【本家はこちら】■Nifty Corners Cube - freedom to round

なんていうか、ぶっちゃけこちらの方の記事に刺激されて、もうちょっと掘り下げネタです（笑）
戯れ言日記 - 角丸ライブラリかぁ

コードを簡単に読んでみる。

とりあえず、このサイトのblockquote全てに、角丸を設定してみた。
ちょっと躓いたのですが、なんか、上手く行かなかった人は、niftycube.js内で、別のCSSをリンクさせてるところを、絶対パスで書くと上手く行くかも。

var niftyOk=(document.getElementById && document.createElement && Array.prototype.push);

二つのメソッドと、後Arrayオブジェクトがpushメソッドを使える環境なら"NiftyOK!"

var niftyCss=false;

String.prototype.find=function(what){
return(this.indexOf(what)>=0 ? true : false);
}

Stringオブジェクトそのものに、findというメソッドを追加してます。
自分の中に、引数の文字列があったら、trueを返すという。

var oldonload=window.onload;

oldonloadというオブジェクトに、window.onloadイベントハンドラを複製

if(typeof(NiftyLoad)!='function') NiftyLoad=function(){};

NiftyLoad関数がなければ、作成。

if(typeof(oldonload)=='function')
window.onload=function(){oldonload();AddCss();NiftyLoad()};
else window.onload=function(){AddCss();NiftyLoad()};

oldonloadイベントハンドラに関数が
→セットがされていれば、window.onloadイベントハンドラに、oldonload、AddCss、NiftyLoad関数をセット。
→セットされてなければ、window.onloadイベントハンドラに、AddCss、NiftyLoad関数をセット。

function AddCss(){
niftyCss=true;
var l=CreateEl("link");
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
l.setAttribute("href","niftyCorners.css");
l.setAttribute("media","screen");
document.getElementsByTagName("head")[0].appendChild(l);
}

■AddCss関数について。（外部CSSを読み込んでくる関数）

niftyCssにTrueをセット。多分、起動フラグ。
niftyCorners.cssというCssファイルをJavascript経由で読み込ませる。
　※JSファイル置いてみたけど、上手く行かなかった方は、
　　ここのCSSのパスを絶対パスにするといいかもです。

function Nifty(selector,options){
if(niftyOk==false) return;
if(niftyCss==false) AddCss();
var i,v=selector.split(","),h=0;
if(options==null) options="";
if(options.find("fixed-height"))
h=getElementsBySelector(v[0])[0].offsetHeight;
for(i=0;i<v.length;i++)
Rounded(v[i],options);
if(options.find("height")) SameHeight(selector,h);
}

■Nifty関数（セレクタとオプションが引数）

基本的にNifty()→Rounded()→AddTop() , AddBottom() と関数が連携して、丸くするみたいです。
こいつがスタート地点です。HTMLでヘッダ部分に書いてあげる関数です。

冒頭でniftyOkじゃなければ、ここで終わり。非対応ブラウザへの配慮。
niftyCssがfalse、つまりAddCss関数が実行されてなければ、実行。

引数として与えられたセレクタ（selector）をカンマ区切りで配列vに入れて、ついでに変数iとhを作る。
optionsがnullなら、空にしておく。
optionsの中に"fixed-height"があったら、後で出てくる"getElementsBySelector"関数（これ、めっさ便利ですな）とoffsetHeightプロパティを使って、対象のエレメントに設定されてる高さを維持する。

そして、後述する"Rounded関数"に対象のエレメントとオプションを渡す。
もし、optionsの中に'height'という文字列が合ったら、対象のエレメントを全て同じ高さにする"SameHeight"関数を動かす。

function Rounded(selector,options){
var i,top="",bottom="",v=new Array();
if(options!=""){
options=options.replace("left","tl bl");
options=options.replace("right","tr br");
options=options.replace("top","tr tl");
options=options.replace("bottom","br bl");
options=options.replace("transparent","alias");
if(options.find("tl")){
top="both";
if(!options.find("tr")) top="left";
}
else if(options.find("tr")) top="right";
if(options.find("bl")){
bottom="both";
if(!options.find("br")) bottom="left";
}
else if(options.find("br")) bottom="right";
}
if(top=="" && bottom=="" && !options.find("none")){top="both";bottom="both";}
v=getElementsBySelector(selector);
for(i=0;i<v.length;i++){
FixIE(v[i]);
if(top!="") AddTop(v[i],top,options);
if(bottom!="") AddBottom(v[i],bottom,options);
} }

■Rounded関数（対象のエレメントと、オプションを引数に。）

まず、ここは元ドキュメントのoptionパラメータのとこを見てもらうと、すぐあれだと思うのですが、

となってます。

まず、最終的にはtlとtrとblとbrの組み合わせになるように、optionsの値を置換。

関数の中で宣言してるtopとbottomに、"left"とか"right"とかの値が入っていきます。
ここが丸くなるのね。

そして、対象のエレメントと、丸くする部分と、元のoptionsの値を、FixIE関数を通した後に、AddTop関数とAddBottom関数を動かして、実際に丸くさせていきます。

function AddTop(el,side,options){
var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color;
d.style.marginLeft="-"+getPadding(el,"Left")+"px";
d.style.marginRight="-"+getPadding(el,"Right")+"px";
if(options.find("alias") || (color=getBk(el))=="transparent"){
color="transparent";bk="transparent"; border=getParentBk(el);btype="t";
}
else{
bk=getParentBk(el); border=Mix(color,bk);
}
d.style.background=bk;
d.className="niftycorners";
p=getPadding(el,"Top");
if(options.find("small")){
d.style.marginBottom=(p-2)+"px";
btype+="s"; lim=2;
}
else if(options.find("big")){
d.style.marginBottom=(p-10)+"px";
btype+="b"; lim=8;
}
else d.style.marginBottom=(p-5)+"px";
for(i=1;i<=lim;i++)
d.appendChild(CreateStrip(i,side,color,border,btype));
el.style.paddingTop="0";
el.insertBefore(d,el.firstChild);
}

■AddTop関数（対象エレメント , 丸くする部分 , オプション　が引数）

そろそろ、実際に丸くするところみたいですー。
一気に変数を宣言。CreateElっていうのは、後で出てきますが、CreateElementのことでした。
d,lim,border,p,i,btype,bk,colorと、たくさんの変数がっ。

それぞれ、後に出てくるgetParentBk関数とかMix関数で、対象のオブジェクトにあったプロパティを、CreateElで作ったbエレメントに与えていきます。getPaddingなんていう関数、最初からあったんですね、全然知らんかったです。使えるのかな。

なんか、おっかけていくのがだんだんしんどくなってきました。こまいです。

【参照サイト】G の索引 (共通 DOM API)

AddBottom関数はほぼ同じだから省略で…。

後、色々サブルーチン的なのも省略で…。

最後に一つだけ。
便利な getElementsBySelector関数が一番最後にあります。

ゴリゴリと、力技でセレクタを分解して、エレメントのリストにしています。
これ、他でも便利に使えそう…。