トイレのうず

年始から DOM Scripting の勉強

当記事はアフィリエイト広告を掲載しています。

年始からこのサイトの静的ページのリニューアルをしていたのだけれど、途中でつまずいて違うことを始めました。

ある人から依頼のあった JavaScript の関数の作成。 firefox にアドオンの Greasemonkey にて、あるサイトをある条件のときに体裁を変更したいらしい、という要望。ちょうど、 DOM Scripting の勉強を去年からちょびちょびしていたけれど、何か作ってみないと実際どんなふうに使っていいかわからないので二つ返事で OK しました。変更したいサイトの HTML を送ってもらって、それを解析しながらの作業。同じく Firefox のアドオンである Firebug を初めてまともに使ってみましたが、やっぱりこれがあるとすごく便利ですね。

まあ、あるサイトっていうのはぶっちゃけ amazon だったのですが、去年リニューアルしたのにバリバリのテーブルタグレイアウトでびっくりしました。テーブルレイアウトまだまだ現役なんですね。
そして目的の table にアクセスするのが一番大変だったかな。なんせそのテーブルに「 id 」が振られてなかったから。ここで DOM Scripting の登場。目的の table にアクセスして id 振って、そのあとは意外とすんなりいけました。
でも、前職で ExcelVBA とかを下手に覚えちゃったから、 JavaScript の細かい文法を忘れてて、 8 年くらい前のリファレンス本を引っ張り出してきてしまいましたが。

わたしが DOM Scripting の勉強に使っている本は「 Web 標準テキスト (1) DOM Scripting 高機能な Web ページ構築のために」です。いつもサイト作成のときにお世話になっている「 OpenSpace 」の運営者さんの著書です。しかし、この本、「 Web 標準テキスト」と銘打っているだけあって、ぱっと見で、何をどう使うのかが少しわかりづらいです。でも、実務より基本の基本をきっちり説明してくれているので、今後ブラウザがアップデートを重ねても基礎を固めてれば対応できるんじゃないかな、と思いました。まだ、半分くらいしか、きっちりはこなせていませんが、こういった作業をすることで理解が深まるし、まだ手つかずのところも斜め読みするので、いい機会だったと思います。

さて、自サイトのリニューアル(といっても見かけは変わらなくて、 HTML のコーディングのし直し)の続きでもぼちぼちしますか。どうも Google さんに嫌われているみたいだから(笑)
それが終わったら、 WordPress のバージョンアップとテーマのカスタマイズ。まだまだやることはあるので、無職になっても暇をもてあますことはなさそうです。

※追記
わたしが作成した JavaScript の関数が Greasemonkey で動かないというので、わたしも Firefox に Greasemonkey を入れて検証しました。その時、参照したページをメモとして残しておきます。
・ Greasemonkey のインストールの仕方
→ Google Mania : asemonkey 入門 ~よくわかるグリースモンキーの使い方 ~
・ Greasemonkey で利用するユーザー関数の作り方
→ Slow Dance :初めての Greasemonkey の作り方 (Slimtimer Report to Ticket)CommentsAdd Star

今回、動かなかった原因は 3 つ。
ひとつは目的のテーブルの指定がうまくいっていなかったこと。これは amazon のページによっていろいろテーブルの数がいろいろ変化するので、前から数えて何番目と指定していたのを後ろから数えて何番目と変更した。もっといい方法がありそうだけれど、今の力量だとそれが精一杯。
2 つ目は文字コードの問題。調べてみると Greasemonkey で日本語を扱う場合は UTF-8 じゃないと文字化けするみたい。
3 つ目は、わたしの設計ミスで、価格に桁区切りのカンマが入っていたときの処理が抜けていたこと。テスト不足ですね。

下の 2 つは発注側が修正して動くようにしてくれました。

今後の課題としては参考サイトを見ていたら、もっと簡単にテープルのセルにアクセスできるみたいなんでコードを改変して動作を早くしたいです。

関連記事

JavaScript と DOM の覚え書き
Web制作
thumbnail
Google Analytics に検索エンジンを追加+外部ファイル化
Web制作
thumbnail
PHP 勉強中
Web制作
thumbnail
【調査】 Yahoo! ブログ検索にインデックスされている WordPress 共通点は何か?【その 3 】
WordPressWeb制作
thumbnail
Seesaa blog のタグクラウドが Windows IE から見たときに行間が狭くなる件
Web制作
Windows IEの元の表示
【 WordPress 】 Yahoo! ブログ検索からの訪問者が来た!
WordPressWeb制作
thumbnail