年始からこのサイトの静的ページのリニューアルをしていたのだけれど、途中でつまずいて違うことを始めました。
ある人から依頼のあった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つは発注側が修正して動くようにしてくれました。
今後の課題としては参考サイトを見ていたら、もっと簡単にテープルのセルにアクセスできるみたいなんでコードを改変して動作を早くしたいです。
最近のコメント
2012/2/6 22:53
2012/2/6 17:14
2012/2/5 6:07
2012/2/3 22:03
2012/2/3 2:11
2012/1/27 14:11
2012/1/26 3:30
2012/1/16 22:40
2012/1/26 3:10
2012/1/15 17:20