JavaScriptのDOMのメゾットやプロパティが確認できるサイト

たんなるURLです。
AJAXやらなんやらJavaScriptでコーディングしていて
DOMの扱いに困ったことありませんか？
JavaScript関連はHOW　TOやTips的な書籍は多いのですが
メゾットやプロパティの検索できる辞書的な書籍がないのが玉に傷です。

そんなあなたにお勧めのサイト
http://www.w3schools.com/htmldom/default.asp

DOMのメゾットやプロパティが簡単に確認できます。
そして良くまとまっているのです。
英語ですがプログラムでおなじみの単語ばかりなのでほとんどの人には
問題はないでしょう

Googleガジェット 【ホームページのコンテンツのディレクトリ 】の掲載基準予測

Google パーソナライズドホームページ(iGoogle)のガジェット、公式の検索ディレクトリ
【ホームページのコンテンツのディレクトリ】
http://www.google.co.jp/ig/directory?hl=ja&root=/ig&dpos=top

の掲載順序の決定やなんかを非公式に予測してみました。
ちなみに自分が仕事/プライベートで作ったガジェットの掲載を継続的に観察したので
ある程度あたっている自信あり。

ちなみに公式には

このディレクトリのコンテンツの多くは、Google ではなく、他社または Google のユーザーによって開発されたものです。 Google は、その性能、品質、またはコンテンツとは関わりがなく、それを保証するものではありません。 Google が、このディレクトリへの登録を有料化したり、より有利な掲載順位の見返りとして支払いを受け入れたりすることはありません。

となっています。
実際上位に表示されるようになったガジェットに対して対価を払っていないのでこれは信用に値します。


◆[A]検索ワードにHITするようになる
http://www.google.co.jp/webmasters/add.html
↑このページで申請したがジェットは一定時間後検索にヒットするようになります。

◆[B]新着に掲載される
http://www.google.co.jp/ig/directory?hl=ja&root=/ig&dpos=top&num=24&cat=new
[A]で登録されたガジェットに一定数以上のユーザーがつく
(一定数以上のユーザーが自分のパーソナライズド　ホームページ[iGoogle]でガジェットを使用する)
と新着に掲載されるようになります。
登録順ではなく、一定の基準に達した順番のようです。
さらに多くのユーザーが使用するようになり人気に表示されるようになると新着から消えます。

◆[C]人気に掲載される
http://www.google.co.jp/ig/directory?hl=ja&root=/ig&dpos=top&num=24&cat=all
多くのユーザーがガジェットを使用するようになると人気に掲載されるようになります。
ユーザーが増えれば増えるほど若いページに表示されるようになります。
必然的に深いページにまず掲載され徐々に浅いページに移行することが多いでしょう

◆[D]ニュース、コミュニケーションetc...のカテゴリーに掲載される
http://www.google.co.jp/ig/directory?hl=ja&root=/ig&dpos=top&num=24&cat=news
これらのページはgoogleの審査が入ったガジェットが掲載されます。
ガジェット作成者が掲載カテゴリを選ぶことはできません。
私自身も生活カテゴリーに掲載したかったガジェットがツールに掲載された経験があります。
人気のあるガジェットから審査されるようです。

◆[E]人気に表示される②
http://www.google.co.jp/ig/directory?hl=ja&root=/ig&dpos=top&num=24&cat=all
それほど人気のないガジェットでも人気に掲載される裏道があるようです。
[D]と同じようにgoogleの審査で掲載されます。
深いページにもまったく存在しなかったガジェットがある突然１～２ページ目に表示されたら
このパターンで掲載されたと思ってよいでしょう。
自分のガジェットがそのおかげで下がれば悔しい思いをしますが取り上げられればハッピー
人間とはかくも勝手な生き物です。


注：これらの予測は私の勝手かつ非公式な予測です。
　　Googleにこの内容について質問したりしないでください。

おまけ
◆Googleのサーバーは複数ある
当然ちゃ、当然の事ですね、膨大なアクセス数をさばくには多くのサーバーが必要です。
でも普段それを感じることはめったにありません。
検索結果が変らないようにデータの同期が取られているからです。

しかし、ガジェット用のデータはどうやら同期が遅いようです。
一日の間で古いデータ(掲載順)を表示するサーバーに当たったり
新しいデータ(掲載順)を表示するサーバーに当たったりします。
個人的な感覚では同期には２－３日かかるようです。

掲載順を頻繁にチェックしているとgoogleのサーバーが複数あることが実感できます。

◆昔は英語の方が有利だったかも
古くから掲載されているガジェットには日本向けでも英語の説明や表題のついたガジェットが多いようです。
新しいガジェットにはそんなことはないので、昔は米国スタッフが審査していて今は
日本スタッフが審査しているのかもしれません。
…日本語版が公開される前に作られたガジェットという線も有力です。

JavaScriptで最大サイズ以上の画像を縮小して表示する

TinyMCEの拡張プラグインで画像を縮小表示しているものがあったので
画像のサイズをいじれるのだと確信…イロイロといじってみました。

テストケースとして既定の最大サイズを超える画像を最大サイズに縮小します。
今回既定値は横幅250pixとしました。
たくさん失敗しましたが同じような失敗をした人のために失敗ケースも載せています。

とりあえず適当な感じで

<IMG src="image.jpg" align="left"  name="face_image"><br />
<script language="javascript">
    if(document.face_image.width > 250){
        document.face_image.width = 250;
    }
</script>

DOMベースだと

<IMG src="image.jpg" align="left"  id="face_image"><br />
<script language="javascript">
    var img = document.getElementById("face_image");
    if(img.getAttribute("width") > 250){
            img.setAttribute("width",250);
    }
</script>

こんなんでも簡単なHTMLでは動くッちゃー動きましたが
実際に運用しているページに適応してみるとIEで動きません(>_<)

IEは画像のオブジェクトが画像ロード前にも取得できるようです…
コノ場合、widthが0となるのでうまく動いてくれないという感じ
body の onloadで処理しても同じです。

ということで img　の onloadで処理

<IMG src="image.jpg" align="left"  name="face_image" onload="if(document.face_image.width > 250){document.face_image.width = 250;}">

今度はうまくいきました…とおもったら【戻るボタン】や同じ画像が使われている
ページ同士のリンクでまたまたうまく縮小されません(Ｔ_Ｔ）
キャッシュの画像を表示した場合onloadが働かない(loadしてないもんね)ということでしょう

ということで onload　と img タグ直下の script 記述併記を試してみます。
…失敗orz

思い出しました、JavaScriptの開発はコレ(ブラウザ差異…主にIEの独自拡張と気まぐれ)がイヤなんです。
だだっこＩＥなんてfirefoxに駆逐されればいいのにと本気でつぶやいてみましたが
それを待っているわけにもいかないのでアプローチの変更

画像をあらかじめロードしてwidthを指定

<IMG align="left"  name="face_image" ><br />
<script language="javascript">
    if(true){
        var img = new Image();
        img.src = "image.jpg";
        document.face_image.src = img.src;
        if(img.width > 250){
            document.face_${text.text_id}.width=250;
        }
    }
</script>

今度こそIEで安定したみたいです。
…FireFoxで不安定に(T_T)
firefoxでは表示していないimageオブジェクトにサイズはない模様

<IMG src="image.jpg" align="left"  name="face_image" onload="if(document.face_image.width > 250 ){document.face_image.width = 250;}" ><br />
<script language="javascript">
    if(true){
        var img = new Image();
        img.src = "image.jpg";      
        if(img.width > 250){
            document.face_image.width=250;
        }
    }
</script>

2007/09/19　下記サンプルコードにVelocityてんぷれーとのタグが残っていたため上記に修正。うまくいかなかった人ゴメンなさい

<IMG src="image.jpg" align="left"  name="face_image" onload="if(document.face_${text.text_id}.width > 250 ){document.face_${text.text_id}.width = 250;}" ><br />
<script language="javascript">
    if(true){
        var img = new Image();
        img.src = "image.jpg";       
        if(img.width > 250){
            document.face_${text.text_id}.width=250;
        }
    }
</script>

クロスブラウザ開発は難しいですね…
ようやく安定(？)です。

なおwidthと共にheightも指定するのが一般的ですが私の知る限り
JavaScriptで画像サイズを片方だけ変更した場合は縦横の比率を保ったまま
もう片方の値も自動的に変更されます。
(現状のIEとfirefoxはそうです)

アイコン付天気予報Googleガジェット全国カバー

アイコン付天気予報Googleガジェットの地域を追加していたある日のこと
…地味な作業だな、単調だな、決まった仕事をするマシーンみたいだ。
………！？
こんなん機械にやらせりゃいいやん、

『決まった入力に対し決まった処理をするのは
機械(プログラム)にやらせるのが効率的です。』

というみずからのありふれた営業文句を思い出し、自分がプログラマーであることも思い出し
はっとしました(＝_＝;
早速RSSの抽出、ガジェットの作成を自動化したプログラムを作成
起動…全ての作業1時間ほどで全国カバーをついに達成しました。

リクエストを下さった皆様お待たせさまです。
全地域対応しました！！
http://bellks-tec.cocolog-nifty.com/blog/2006/11/google_7cd7.html
http://bellks.com/google/
どうぞご利用くださいませ(^-^)/

おまけにコレまで地域別だったガジェットを編集(設定)で地域を選択できる
全国版を作成しました。
設定で各地の天気が確認できるため出張や旅行ガ多い方にたいへん便利です！！
あわせてご利用ください。

週間天気予報(アイコン付き全国対応)


今までの地域別も特定の地域を並べて表示したときの視認性など全国版より優れている
用法もあったりしますのでお好みに応じてご使用ください。

TinyMCE は multipart/form-data でデータ送信ができない

題名以上の内容はありませんデフォルト状態のTinyMCEを
使用した場合multipart/form-dataのフォームがほぼ機能しなくなります。
パケットモニッタしたわけではないので正確な事はわかりませんが
action で指定されたURLにからのデータをPOSTで送信するだけです。
同フォーム内のデータ(input タグ等)はTinyMCEに関係ないデータも含めて全て無効化されます。

なお悪いことにこの状態は該当formでTinyMCEを使用していなくても
Scriptを同ページにロードしただけ･･･具体的には
<script language="javascript" type="text/javascript" src="/ajax/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
のようなタグがヘッダーにあるだけで起こります。

オンラインHTMLエディタにはファイルアップローダもつけたいところですが
そのような機能は別のページにつける必要がありそうです。

TinyMCE Language Package 日本語Shift_JIS

AjaxのHTMLエディタ　ライブラリ　BLOGに使えそう
http://tinymce.moxiecode.com

日本語で使いたいときは Language Packageを同じフォルダに展開する
http://tinymce.moxiecode.com/language.php

とっても便利なのだが困ったことにJIS(ISO-2022-JP)になっている…
そんなんめったに使わないし、それだけのためにJISに
文字コードを直すのもなんだかなぁ…ということでShift_JISに変換
ついでに自分で使うところのみ日本語表記を若干追加したりしてみた。
LGPLライセンスなので一応公開

Shift_JIS版Language Package

Googleガジェット開発 TIPS

Googleガジェットは主にJavaScriptで開発することができます。
JavaScriptやAjaxに精通した人ならすぐに開発をはじめることができます。

詳しくはこのページを読んでください。
http://www.google.com/apis/gadgets/guide1.html
たいへんこのドキュメントが良くできているので加筆するようなことは特にないのですが
肝心な開発環境がページの最後のほうにあったりするので、
こんな順番ではじめてみたらどうか？という提案的記事＋英語ダメな方のための日本語ヒントです。

◆Gadget Scratch Padを使う

http://www.google.com/apis/gadgets/guide1.html#Scratchpad
のGadget Scratch Padを使います。
使い方はこんな感じ

それでは
http://www.google.com/apis/gadgets/guide1.html　
にあるサンプルコードを実際に入力したり編集したりしてみてください。
もちろんどんなことをしているかドキュメントも読みながら…
まあこういう文章は関連する技術に通じた人なら英語でもそんなに難しくないはずです。

◇サンプルコードがある場所
http://www.google.com/apis/gadgets/guide1.html#Writing_mods
http://www.google.com/apis/gadgets/guide1.html#Content

◆外部データとの連携

慣れてきたら外部データとの連携を考えてみましょう。
http://www.google.com/apis/gadgets/guide2.html#Proxy
通常JavaScriptでは表示しているページと同じドメインからしかXMLを取得できなかったりします。
そのため同ドメイン上にゲートウェイを用意したり、JSONに変換するプロキシを
どこかに用意しなければならないのですが、そのあたりはGoogleが面倒見てくれちゃうので楽チンです。

◇テキストデータとの連携　http://www.google.com/apis/gadgets/guide2.html#Fetch_text
◇XMLとの連携　http://www.google.com/apis/gadgets/guide2.html#Fetch_XML
◇RSSやATOMとの連携　http://www.google.com/apis/gadgets/guide2.html#Fetch_JSON

◆WEBページでガジェットを使う

宣伝や実用で自分のWEBページでガジェットを使いたい場合は以下のURLで
そのためのタグを取得することができます。
http://gmodules.com/ig/creator?synd=open&url=【あなたのガジェットのURL】

詳しい情報はこのページで確認してください。
http://www.google.com/apis/gadgets/synd.html#Testing