innerHTMLを変更する時は描画ルールとタイミングを考慮しないとはみ出る

<input style="width:100%">なエレメントをinnerHTMLで作成する場合、inputの中身を書き換えるタイミングに注意しないとinputのwidthを100%にしているのに親要素の幅を無視してレイアウトを狂わせてしまう場合があります。

レイアウトが崩れる例と崩れない例のサンプルを作成しました。

iframeからlocationをgetしたい場合はidが必須でframesから辿る

タイトルの内容を覚えられればそれでOKなのですが、私はどうやら覚えられないらしく、必要になるたびに過去のサンプルを確認しているアリサマなのでiframeをコントロールする時に使うメソッドもまとめておくことにしました。

間隔調整式setIntervalを作成しました

昨日の記事ではsetIntervalの間隔がわりとアバウトで、しかもズレが累積されていくということをご紹介しました。
ズレを考慮して次回までの間隔を自動的に調整するタイプのsetIntervalを作成しました。

setIntervalの精度は間隔の長さに比例する

精度はあまり良くないということは聞いたことがありましたが、実際にどういう感じなのか知らなかったのでサンプルを作って動作確認しました。

結論としては間隔が短いほど精度が悪化していきます。

あと、定期的に実行するfunctionが処理に要する時間に応じて精度が落ちていく、というか次の実行までの間隔が伸びていくので、setIntervalを実行した瞬間から計算して「このタイミングで何回目の処理が行われる」の時刻からどんどん遅れていくことになります。

getChildsで作成したオブジェクトからクローンを作成する関数

昨日公開したgetChildsが返すオブジェクトは「<div>メイン</div>」を「obj.divメイン」のように参照することができるようにするものでした。

必要に応じて複数回クローンを作成するようなモデルエレメントに対してgetChildsを実行した場合、getChildsの機能によってiTやvalueなどが変化するため、一度getChildsで処理したエレメントやその複製をgetChildsに渡すと、意図した参照用プロパティが得られないという問題がありました。

上記の問題は、本日公開するgetCloneという独自関数で解決できます。

idやname属性を使わずにエレメントを取得する関数

「<button id=btn作成>作成</button>」のような書き方が冗長だと感じていました。
「<button>作成</button>」を含むエレメントを渡すと「obj.btn作成」という形式でエレメントに参照できるようにする独自関数を作成しました。

二つの変数に入っているエレメントが同じものを参照しているか判定する

「同じ」と判定する基準としては
１．outerHTMLの値が一致する
２．document.bodyからのDOMツリー内ポジションが一致する
３．タグ名が一致する
などなど色々あり、どういう意味で「同じ」ものが必要かによって判定基準を変える必要があります。

この記事で扱うのは「変数Aから参照しているエレメントにinsertBeforeすると変数Bから参照しているエレメント側でも子要素が増える」という意味での「同じ」エレメントかどうかを判定する基準を用いた判定用関数です。

inputエレメントのtype属性はinsertBefore後は変更不可

常識かもしれないけどたまに忘れます。
しかもエラーメッセージも（いつものことですが）エラーの原因とは微妙に噛み合っていないので経験がないと分からない内容ですし。
備忘録としてメモ

カレンダーを表示するhta

指定した日時を含む月のカレンダーを表示するhtaを作成しました。

任意の日付の部分のみ任意の関数を適用したり、数か月にまたがる表示もできます。

コンストラクタ別クローン作成用関数

String, Number, Boolean, Date, RegExp, Functionなどを引数として与えるとそのクローンを返すという関数を作成しました。

複数のプロパティの値をまとめて変更する独自関数

obj.A = obj.B = obj.C = 1とか、そういうことではなく、例えばdivエレメントのinnerText、style.borderStyle、style.borderWidth…など複数のプロパティに対して個別の値を入れたい場合、この記事のソースを利用すると便利です。

ScriptControlでVBScriptのカプセル化

グローバル領域に影響しない形でVBScriptが利用できることが分かったので、VBScriptでしか利用できない機能をまとめてみました。

※昨日の「JScriptからデストラクタを利用する」もこれで利用できるようにしようとしましたが、ScriptControllを使用した場合はVBScriptとJScriptを跨ぐとClass_Terminateが実行されませんでした。。。

グローバル領域を汚さずにvbscriptを併用する

scriptタグを2つ用意して、それぞれのlanguageをvbscript、jscriptとするやり方だと相互にアクセスするものはグローバル領域に宣言しなければいけない…と思っていましたが、ScriptControlというコンポーネントを利用すれば、グローバル領域を綺麗に保ったままにできるようです。

ソースは以下

JScriptからVBScript経由でデストラクタ利用

ただしVBScriptで「obj = Nothing」を実行した瞬間にobjに入っていたものが解放される…という感じのことはJScriptからは無理でした。
JScriptからは、スクリプト終了時にClass_Terminateを自動実行させることが限界のようです。

色々試して悪あがきして上記の結論に至ったソースは以下。

VBScriptではClass_Terminateが利用できる。。

でも私の大好きなJScriptでは利用できないようです。悲しい。MSからエコヒイキされているVBScriptが羨ましくてたまらない。

Class_Terminateとは、クラスが解放される時に発生するイベントです。
以下のソースを実行すると、二つのExcelが起動して、VBScriptから起動された方のExcelだけが、スクリプト終了時にQuitされます。

Excel用WSFファイルを作成する時に使うサンプル

wshやhtaからExcelをコントロールする際、Excel側で使えるメソッドや定数の値を調べるために「マクロの記録」を使っていますが、利用頻度が高いメソッドや定数を毎回調べるのはムダなので、よく使うものはまとめてみることにしました。

HTAで「少々お待ちください。。」を表示する

できれば待ち時間を作りたくはないけれども、処理の規模が大きくてどうしても待ち時間が生じてしまう場合は「すみませんが、現在全力で処理中ですので少々お時間ください」的な表示を出したい場合があります。

そのような表示を出すサンプルを作成しました。

HTA画面上にドロップされたフォルダの中身をリストアップする

拡張子がwsfのファイルなら、処理させたいフォルダやファイルをwsfファイルのアイコン上にドラッグ＆ドロップすれば、ドロップしたアイテムを引数として与えた状態でwsfファイルを起動できます。

しかしhtaではそれが出来ません。（レジストリを変更すればできますが、できれば触りたくないですし）

次善の策として、HTA画面上にiframeを配置して、そこにドロップされたフォルダのPathを取得してフォルダ内アイテムをリストアップするサンプルを作成しました。

iframeのonreadystatechangeを使う方法

用途・目的

iframeのonreadystatechangeメソッドはxmlHttpRequestなどでよく使われるので用法に関する情報は多数あるけれども、iframeエレメントの参照方法を気を付けないといけない点の説明が併記されていない場合も多いです。
……過去に何度も利用しているので知ってはいたけど正しいやり方を忘れていてハマったので教訓として残しておきます。

スマホの画面を照明替わりにして好みの色で光らせる

真っ暗な寝室に入る時に適度な照明が欲しくて、カメラ撮影用のフラッシュでは明るすぎるので画面を照明替わりにできないか試してみることにしました。

HTAからPowerShellの機能を利用するサンプル

フォルダ選択ダイアログを表示したくて、できればデフォルト値も設定できるメソッドを利用したいと思いました。その要求にマッチするものがPowerShellで利用できることが分かったので、思い通りに使えるようにするついでにPowerShellをHTAから利用するためのサンプルを作りました。

htaのscript内部で複数行文字列を扱う

ブラウザによってはECMAScript6の恩恵を受けてシンプルな書き方をすることもできますが、HTAでは今のところ利用できないので、以下の方法をよく利用してます。