Ecolife情報 > 家庭の省エネ診断

家庭の省エネ診断(JavaScript版)開発状況

 家庭の省エネ診断(JavaScript版)では、JavaScriptでコーディングがされており、インターネット上でもローカルサイトでも動かすことができるようになっています。

 一般の家庭などでは、常にインターネットにつながっているパソコンばかりではない(我が家はダイアルアップです)と思われ、インターネットに接続しなくても動くことは考えておくべきです。特にプラットフォームとして、ブラウザは必ず入っていますので、インストール作業なしで動くというのもうれしいものです。

 JavaScriptはHTMLファイルに入れ込むことができますので、うまく組み込むことで配布が1ファイルだけで済むというのもいいところです。更新しても、単純にファイルをダウンロードをするだけで実行できます。

 MacやLinuxでも動きますよ。もっともLinuxは家庭で使う人は、まだ少ないと思いますが。

家庭の省エネ診断JavaScript版

JavaScriptでのローカルソフト開発メモ

IEのJavaScript警告

 IEでJavaScript(JScript)が記述されたファイルをローカル環境で開くときにはとりあえず尋ねられます。最初の記述でこの解除の仕方を記述しておき、JavaScriptのwindow.onload で消すようにします。

ページ移動(らしく見せる)

 <DIV display=none></DIV>で区切ってページを作り、順番に表示させているだけです。実際に何十ページにもわたっていても、以外とスピーディーに各ページを表示してくれます。

 要するにJavaScriptで実装されたタブ移動みたいなものです。開発当時はあまり整備されていなかったので使いませんでしたが、jQueryを活用したソースなどを利用すると 、もっと簡単に実装できるかもしれません。

IEのinnerHTML問題

 JavaScriptを使うときには基本かもしれませんが、IEではinnerHTMLが使えませんので、outerHTMLでタグ自体から書き換える方法をとります。(以下はprototype.js利用。jQueryの場合には素直にDOM関数使いましょう)

// html:書き込みをする内容
if (isMSIE) {
    // IEの場合
    $("writeDiv").outerHTML = '<div id=writeDiv><select name=writeSelect id=writeSelect >'
           + html
           + '</select></div>';
} else {
    // IE以外の場合
    $("writeDiv").innerHTML = "<select name=writeSelect id=writeSelect >"
           + html
           + "</select>";
}

ファイルの書き込み

 これは、TiddlyWiki?さんの記述を活用しています。IEは

ActiveXObject("Scripting.FileSystemObject")

でできるのですが、FireFox?系は

Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile)

をつかっています。最近はこれも厳しいかな。

 ファイルのダウンロード

 2012年ころからはだいぶHTML5が普及してきて、ファイルを作成するという考え方ではなく、ブラウザ画面からファイルをダウンロードするという考えで、結果的にファイルを作成することができます。アプリとしてファイルを保存するという概念ではないので、ダイアログなど表現に混乱するかもしれません。

 やはりHTML5アプリとして動かすためには、現在のところ、Electronなどnode.jsを含めたシステムとして構築することになりそうです。まあ、html5ができていれば、スマホアプリはCordovaでいけるので、なかなかいい時代になりました。


  編集 凍結 差分 添付 複製 名前変更   新規   最終更新のRSS
Last-modified: 2017-09-19 (火) 14:59:01 (29d), by 有限会社ひのでやエコライフ研究所