So-net無料ブログ作成

ウィジェットのリサイズ Part 5 [Dashboardウィジェット]

さて、だらだらと続けていますが、こちらの記事のソースの理解を続けます。

まずは「mouseMove」関数から。大体はこちらの記事で見てしまっているんですが、一つだけ見ていなかった下記の関数呼び出し。

document.getElementById("resize").style.top = (y-12);


document.getElementById("resize")」までで「resize」と言うIDを持つ要素を取得している様ですね。これは、今、作成しているウィジェットでは、ここで追加したリサイズ用のグラフィックになるはずです。

その要素の「style.top」と言う要素に値を設定しています。「style」は「要素内のstyle属性に相当するオブジェクトを返す」との事。「top」は「要素のトップマージンの端と子要素の上端の距離」だそうです。要するに作成中のウィジェットで考えるとリサイズマークのアイコンのトップ位置を指定すると言う事ですかね。ここ「12」と言う固定値を引き算していますが、自分で使ってるアイコンのサイズに変更する必要がありますね。

最後は「mouseUp」関数について。目新しいのは下記の呼び出しです。

document.removeEventListener("mousemove", mouseMove, true);
document.removeEventListener("mouseup", mouseUp, true);


これは、こちらの記事で取り上げた「addEventListener」などの逆バージョンですね。マウスのボタンが離されたので、「mouseDown」以外のイベントリスナーを解除と言う感じですかね。


以上で大体コードは理解できた気がします。

*

OpenOffice.orgが動いているからJavaが入っているはず、と言うのは私の認識違いだった様です。全ての機能を動かす訳ではない場合、特にJavaは必要ないとの事独自にインストールを試みている方もおられます。

また、gccに関しては、開発に必要な全ての要素がそろっている訳ではない様です。


連想配列(と言うのかどうかは知らない)の生成 [JavaScript]

記事公開の順番が前後してしまいました。前回の記事は、こちらの記事で出てきた下記の代入式が何を表しているのかを調べた今日の記事の後に公開する予定でした・・。前回の記事の冒頭は意味が分からないですね。

ちなみに、見ているのは、ここのJavascriptのソースの式です。

growboxInset = {x:(window.innerWidth - event.x), y:(window.innerHeight - event.y)};


ここ以下のこの変数を参照している箇所では、次の様になっています。

var x = event.x + growboxInset.x;
var y = event.y + growboxInset.y;


これより、「{}」は構造体(クラス?ハッシュ?)を生成するものと予想しています。構造体と言う概念がJavascriptにあるのかどうか知りませんが・・。

で、ここの説明によると「配列」に当たるようです。文字列をインデックスにできる配列(「連想配列」と言うんですかね?)ですね。そして、インデックスが文字列の場合は、括弧の代わりにピリオドでアクセスできるとのこと。「myArray["name"]」と「myArray.name」は同じものを指すようです。

そのオブジェクトの生成は下記の通り、インラインでもできるとのことです。冒頭に出た例と同じ書き方ですね。

myObject = { name: "Apple Inc.", city: "Cupertino" }


こちらは文末にセミコロンがありませんが、これは任意なんですかね?中括弧になってるんで、そこには必要がないと言うことなんでしょうか・・?まあ、私が書くときは、念のため、入れておくことにしておきます。


と言うことで、予想とはちょっとずれていましたが、冒頭の式は連想配列のオブジェクトの定義でした。

と言う記事を前回の記事の前に公開する予定でした。

*

関係ありませんが、こちらの端末、gccは入ってるみたいです。

0921_netwalker_gcc_exist.png
コンパイラは入ってるらしいです


Javaのコンパイラは入ってないみたいですけどね。OpenOffice.orgが動いているので、Java自体(JRE)は入っていると思いますが・・。

0921_netwalker_java_not_exist.png
Javaにもパスが通ってないんですかね・・



ウィジェットのリサイズ Part 4 [Dashboardウィジェット]

さて、遅々として進んでませんが、最近、気になる物が出てきたので、とっとと片付けたくなってきました。

さて、こちらの記事のソースに戻ります。下の式が何をしているのか、前回の記事でわかりましたので、その意味を見て行きたいと思います。

growboxInset = {x:(window.innerWidth - event.x), y:(window.innerHeight - event.y)};


まず、「window.innerWidth」。名前からわかりそうですが、こちらによると、ウィンドウとかフレームとかの幅をピクセル単位で表している様です。スクロールバーがあればそれも含むとの事。Dashboradウィジェットの場合は、ウィジェット本体の横幅になるんですかね。そこから「event.x」を引いていますが、「event.x」って何?何となく、mousedownが発生した時のマウスの位置だとは思うんですが、基点が良くわかりません。で、調べてみましたが、eventの説明のところに「event.x」の説明がありません・・・。ちなみに、こことかここによると、マウスのX座標である事はまあいいのですが、どうも微妙に基点が違う様な気がします。他のページでは、ブラウザ毎にまちまちな感じだと示唆している様な気もしますね・・。Dashboardと言うか、Safariの仕様がどうなのかが見つけられないんですが、ソースから推測する事にします・・。

さて、ソースを見直しますが、まず「mouseDown」関数では上でも引用した通り、次の通りに利用されています。が、この式だけでは何の事かわかりませんね。

growboxInset = {x:(window.innerWidth - event.x), y:(window.innerHeight - event.y)};


で、「mouseMove」関数の中でgrowboxInsetと一緒に下記の通りに利用されています。

var x = event.x + growboxInset.x;
var y = event.y + growboxInset.y;

document.getElementById("resize").style.top = (y-12);
window.resizeTo(x,y);


「window.resizeTo」関数の仕様を見つけられないのですが、関数名とここの解説から、おそらく指定したサイズにウィンドウをリサイズするのが役目でしょう。つまり、ここで定義されている「x」はリサイズ後のウィンドウの横幅になりますね。つまり、「event.x + growboxInset.x」がリサイズ後の横幅ですね。「growboxInset.x」は元のウィンドウの横幅からmousedownが発生した時のマウスの座標を示しています。と言う事で、「event.x」の基点がどこかはともかく、マウスの移動量を元のウィンドウの横幅に加えた物が新しいウィンドウの横幅になっていると言う事で、「event.x」の基点がどこなんかは良くわかりませんね・・・。ま、ええか。

「growboxInset」は元のウィンドウにマウスの初期位置を仕込んだ物と理解しておきます。

それはさておき、「mouseDown」関数は続いて、下記を実行しています。

event.stopPropagation();
event.preventDefault();


event.stopPropagation」はこのイベントの伝搬を止めるとの事。JavaScriptのイベントの配信の仕組みが良くわかっていないのですが、これをやっておかないと、この要素の親(もしくは子)の要素にさらにイベントが配信されると言う事ですかね。ま、それは追々わかって来るでしょう。

で、「event.preventDefault」は「イベントがキャンセル可能である場合キャンセルし、規定のアクションを発生させない」らしいです。なるほど。こちらにある入力フィールドで小文字以外をはじくと言うサンプルが分かりやすいですかね。既存の部品に対して、機能を拡張したいときに使うイメージでしょうか。ただ、今見ているリサイズの例では不要な気もしますが、どうなんでしょう?


とりあえず、「mouseDown」関数については以上です。


【参考】
WebKit DOM Reference - Mac OS X Reference Library
Gecko DOM Reference - mozilla <delevoper center/>
JavaScriptリファレンス
イベントオブジェクトまとめ - Archiva
マウスの座標を取得する - Ajaxを勉強しよう
ウィンドウの大きさを変更する - Knave Web講座

ウィジェットのリサイズ Part 3 [Dashboardウィジェット]

前回の推測が正しいのかどうかも良くわかっていない状況ですが、気にはしつつも先に進んでいくことにします。

まず、以前参照したこちらの記事に載っているサンプルコードの中身を見ておきます。

気になるのは、いきなりグローバル変数(growboxInset)が宣言されています。何となく思ったんですが、JavaScript って、HTMLファイルを一つのスコープの範囲の様に考えればいいんですかね? その範囲内でスコープが設定されているのか?

ま、それは置いておいて、まず「mouseDown()」関数の中を見ていきます。気になったのは、下記の点。

  • 引数の「event」とそのメソッドについて
  • オブジェクト「document」とそのメソッドについて
  • オブジェクト「window」とそのメソッドについて


ちなみにオブジェクトって自分で定義できるんですね。クラスと言う形は取らない様ですが、直にオブジェクトを定義していける様です。HTMLのイベントとこのオブジェクトのメソッドを結びつければいいのかと思いましたが、それだとメンバ変数はクラス変数の様な扱いになりそうですね・・。と思ったら、継承もできる様なので、それで部品毎に微妙な違いを記述することができますか・・。

と、脱線しましたが、上記の疑問について調べていきたいと思います。アップルのドキュメントでは、余り細かいことが書いていない様なので、検索したところ、オブジェクトの階層構造をまとめてくれているページがありました。ここの「window」と「document」についてはわかるかな〜と思いましたが、サンプルコードで利用しているメソッドが書かれていません。ウィジェット用にJavaScriptが拡張されてるんでしょうか・・?

仕方が無いので、再びアップルのドキュメントで「WebKit DOM Programming Topics」を読んでいましたら、Using the Document Object Model From JavaScriptと言うトピックでMozillaの「Gecko DOM Reference」と言う文書を参照していました。ちらちら〜っと見た感じ、ここの「window」と「document」と「event」の説明でいけそうです。

まずは、「mouseDown」で最初に実行されている「document.addEventListener」について。サンプルでは、次の様に呼ばれています。

document.addEventListener("mousemove", mouseMove, true); document.addEventListener("mouseup", mouseUp, true);


さて、説明を見ようと思ったら、「Adds an event listener to the document.」との説明以外何もないです・・。ま、名前からしてそれは想像つくんですけどね・・と言う感じです。仕方がないので他を探してみると「element.addEventListener」の説明がありました。引数も同じ様なので、おそらく機能も同じだと思われます。ここでは、「mousemove」と「mouseup」と言うイベントに対し、イベントのハンドラ関数を定義しているみたいですね。最後の「true」が設定されているところは「useCapture」と言うパラメータの様ですが、説明を読んでもいまいち良くわかりません。ほっときます。

それはさておき、「mousedown」が起きた時点で、その後のマウスのイベントを取得するためのハンドラを定義しています。わざわざ動的にハンドラを定義しているので、逆に「mouseup」が起きたら削除するのかなと思ったら、やっぱりしていました。「mouseUp」関数の中です。

document.removeEventListener("mousemove", mouseMove, true); document.removeEventListener("mouseup", mouseUp, true);


ちなみに、マウス関連のイベントはこちらで定義されている様です。

clickmousedownとmouseupが同じ位置で行われた場合に発生する。シーケンスとしては、mousedown→mouseup→clickと言う感じ。複数回同じ位置でクリックが発生した場合は、detailと言う要素が発生毎にインクリメントされるとのこと。
mousedownポインティングデバイスのボタンが押下された時に発生。
mouseupポインティングデバイスのボタンが離されたときに発生。
mouseoverポインティングデバイスが要素上に来たときに発生。
mousemoveポインティングデバイスが要素上を動いているときに発生。
mouseoutポインティングデバイスが要素上から出て行ったときに発生。


「mouseDown」関数に戻ります。次は、冒頭に定義されていた「growboxInset」と言う変数に何かを代入しています。

growboxInset = {x:(window.innerWidth - event.x), y:(window.innerHeight - event.y)};


・・・式の意味が分かりません。growboxInsetを参照している箇所を見てみると、「{}」で構造体を示し、各要素「x」と「y」に「window.innerWidth - event.x」と「window.innerHeight - event.y」を設定しているのでは?と思われます。


ん〜、ちょっと長くなってきたので、次回へつづく。


【参考】
JavaScript入門 - 初心者のためのホームページ作り
Gecko DOM Reference
WebKit DOM Programming Topics
Document Object Model (DOM) Level 2 Events Specification Version 1.0


ブログを作る(無料) powered by So-netブログ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。