JavaScript：かっこいいフローティングウィンドウ

仕事で、JavaScriptを使ってかっこいいフローティングウィンドウを出さないといけなくなったので（どんな要求やねん！というツッコミはまたの機会でお願いします）、調べたら一発目で大変かっちょいいのがありました。

via 【jQuery】美しく自由度も高いフローティングウィンドウ mb.containersPlus

紹介だけじゃなく、日本語化したデモも用意してくださっているので、それを参考にさせてもらいました。
特にコンテナの内部に表示させるHTMLファイルは「UTF-8じゃないと文字化けするよ」っていう情報には助けてもらいました。ありがたや～ありがたや～。

ちなみに、「フローティングウィンドウから親ウィンドウの値を操作するにはいったいどうしたら・・・！」と小1時間ほど罠にハマっていたことは秘密です。
（お分かりかと思いますが、このフローティングウィンドウは別に子ウィンドウじゃないので、わざわざ「親」にアクセスする必要なんてない…）

明日、現場で実装してみるのが楽しみだぜっ

FireFoxでは document.all が使えないことを今さら知りました

会社のWEBページを触っていて、機能として「簡易見積もりシミュレーション」（製品の欲しい機能にチェックしたら見積もり金額が表示される簡単なもの）をJavaScriptで書いていた。

ChromeとIEで動作確認して、最後にFireFox（ボクは何だか知らないけどFireFoxがあまり好きじゃない）で動作確認したら、動かない。
何度「見積もる」というボタンを押しても「0円」のまま。
これは非常にマズイ。お客さんに「だって0円って書いてるじゃないか、これ、0円でくれよ！」って言われることウケアイ。

というわけでFirebugsで見たら「document.all is undefined」とか言われてる。

「いやいや、未定義も何も、こっちで勝手に定義したらあかんやろ！」とニヤニヤしながら（今となっては恥ずかしい思い満開）意気込んでググると、「document.all」ってIEの仕様（実装）なんですね…。W3C標準じゃなかったんだ・・・と今頃知って、愕然としてしまいました。
（過去にめっちゃ使ってる）

で、getElementByIdとかgetElementByTagNameを使えよ！ということだったんで、きちんとタグ（要素）にidを振って、 document.getElementById("num").value とかで値をとったりできるようになり、無事に「0円見積もり」という爆弾を修正することができました。

しかし、もう何年も前から常識だったようで、「技術への～」とかブログタイトルにしているのが恥ずかしくなりました。今から隠れますのでしばらく探さないでください。

RSSの内容をJavaScriptで表示する

あけましておめでとうございます。
すっかり更新が滞っておりますが、今年はもうちょっと技術ネタを書けるように頑張ります。

さて、今さらですが会社から発信する情報を、毎回ゴリゴリとHTMLで書くのはもうイヤだ！と思いまして、というか以前から思ってまして、ようやくRSSフィード化＆ページにも自動表示！対応を行いました。

フィードの作成には「RSSエディタ Headline-Editor Lite版」（無償）を使いました。
（既に有名なソフトなようですが、確かにシンプルで使いやすいエディタです）

これで作ったRSSをWEBサーバに配置したら、後はそれを読み込んで表示するJavaScriptを書くだけ。

ちょこっとWEBで調べて、今回はGoogle先生のAPIを利用させてもらうことにしました。

Google AJAX Feed API を使ってJavaScriptでサイトにRSSフィードを表示する方法
を参考に（というかパクって）、何とか完成。

WEBサーバに配置したXMLがなかなか反映されないのは、キャッシュのせい？
などと、ちょっと不明な点もありますが、これでアップデートする度に「あっちのページもこっちのページも同じように修正しなければ」という不毛な作業がグンと減りそうです。