‘HTML5’ タグのついている投稿

HTML内でIDな要素はグローバルに参照できる!

 プログラム
 公開日:2015年5月3日

 先日、とあるJavaScriptなソースを眺めていた所、
変数宣言もなくHTML内のIDな要素を参照しているのを発見しました。
HTMLを見てみると確かに同じ名前のIDな要素が見つかりましたが、
var hoge = document.getElementById('hoge'); とかやって
参照するものだとばかり思っていたので、
なんじゃこれはと気になった次第です。

 調べてみた所、
HTML内でIDをつけた要素はJavaScriptのグローバル変数に格納される
という記事を見つけました。
いやぁ~、いまの今まで全然知りませんでした。
HTML5の仕様の一つになっているようです。

 ただ、ブラウザによって実装は異なるようです。
先の記事を引用すると、

Chromeはwindowのプロトタイプで、
Firefoxはwindowのプロトタイプのプロトタイプで、
ie11(とie9)はwindowそのもののプロパティに出てきますね。

となっており、同じグローバルでも違いがあるようです。

 さらに興味深いことに、
グローバル参照と getElementById() とで速度を比較した方がいました。
こちらによると getElementById() の方が速いという結果になりました。
jsPerfで試せるようになっていたので、
実際にやってみたら確かにそのようになりました。
私の環境では5倍くらいの差が出ていました。

 結論としては、

特定の要素にname属性をつけた場合も同じようにアクセスできたり、
windowオブジェクトがもともと持ってるプロパティ名は上書きできないとか色々ありました。

とあるように、環境によって副作用がありそうなのと、
速度的にもメリットがなさそうなので、
素直に getElementById() を使うのが良い
ということになりそうですね。
今までのやり方を変えなくていいんです(^_^;)

 

電力使用状況なブログパーツ(4)

 プログラム,
 公開日:2014年11月6日 / 更新日:2016年7月26日

Yahooの「電力使用状況API」終了に伴い、2016年9月30日以降は本ブログパーツもサービス終了となります。

★2016年7月26日追記。
こちらに告知が出ていました。
・東北電力:2016年3月31日に更新停止。
・中部電力:2016年6月30日に更新停止。
・2016年9月30日(金)を以って「電力使用状況API」を終了。
道理で更新されない訳だ(^_^;)
ということで使用できるのは10月迄となります。
ご了承ください。

★2016年4月20日追記。
一部の電力会社について、
データの更新状況が変わったようです。
理由はよく分かりません。
とりあえず対処してみましたが、
更新が停滞している場合はその旨を表示するようにしました。

★2014年12月18日追記。
自分のサイトでは動いているのですが、
他サイトで導入した場合におかしくなっていたようです。
改善してみました。失礼しました。

★2014年11月25日追記。
備忘のためのメモ。
callbackを指定してJSONP形式を要求しているはずなのに、
なぜかMIMEが”application/javascript”ではなく
“application/json”になることがあるので、
自前のPHP経由に変更しました。ちょっとナゾ・・・。

以前に、
電力使用状況&電気予報なブログパーツというのを作りましたが、
YAHOOの「電気予報API」のサービスは
2014年10月31日をもって終了となりました。

東日本大震災に関連する情報を提供する目的で、
期間限定で公開されていたAPIだったので、
一定の役目は終えたというところなのでしょう。

ブログパーツで使っているもう一つのAPIに
電力使用状況API」があるのですが、
連休を挟んだここ1週間ほど更新が止まっていたので、
これも終了なのか!?
と思ってたら更新されるようになりました(^_^;)
もしかしたら休日は更新を休止してるのかな?

ということで、
電気予報な情報の表示を無くして、
電力使用状況だけのバージョンに作り変えました。
サイズがよりコンパクトになりました。

Yahooの電力使用状況APIを使用していますので、
Yahooのクレジット表記が必要となっています。ご了承ください。

ブログパーツの埋め込みスクリプトは以下の通りです。
無料でご利用いただけます。

北海道電力。

東北電力。

東京電力。

中部電力。

関西電力。

九州電力。

うちみく!

 つぶやき, トピック, , ,
 公開日:2014年7月1日

「うちみく!ウチのミクさんが話を聞いてくれるようです」

実際に試した感じがこちらで紹介されています。

HTML5 Japan Cup」の応募作品の一つです。
8月31日までの期間限定公開だそうです。

私はチームのメンバーではありませんが、
プラグインの形でソースを提供させてもらっています。
それにしても、いつまにかこんなものを作っていたとは(^_^;)

神社★参詣なブログパーツ

 プログラム, ,
 公開日:2014年2月11日 / 更新日:2015年7月13日

★2015年7月13日追記
動作エラーが起きていました。
やり方を変えてどうにか動くようにしました。
サーバー側で何か設定が変わった?
セキュリティ関係?
残念ながら情報不足で原因不明です。
う~む・・・(;´Д`)

パワースポットとしても注目されている神社。
神社★参詣なブログパーツを作ってみました。

Wikipedia「神社一覧」から
ランダムに選んだ著名な神社を参詣する感じになっています。

こちらのテンプレートにしたがって、
名称、画像、祭神、神体、例祭などの情報を表示します。
Wikipediaの該当ページへのリンクや、
位置情報があればグーグルマップへのリンクが付きます。

ということで、
作ったブログパーツはこのページの右側に貼り付けてあります。
鳥居をクリックすると実行します。

ちなみに、
おみくじはこちらから引けるようです(^_^)

ブログパーツとして使うには、
以下のスクリプトをコピペなどして埋め込んでください。

電力使用状況&電気予報なブログパーツ(3)

 プログラム, ,
 公開日:2014年1月4日 / 更新日:2014年11月1日

★2014年11月6日追記
電力使用状況の表示に限定したバージョンを作りました。
こちらからどうぞ。

★2014年11月1日追記
YAHOOの「電気予報API」のサービスは
2014年10月31日をもって終了となりました。

以前作成したFlash版に加えて、
あらためてHTML5版を作ってみました。
Flashのこのバージョンあたりから
なぜかレイアウトが微妙に崩れてしまい、
前々からそれとなく気にはしていたのですが、
なんか長いこと放って置いたままになってしまいました。
節電の旬である夏を迎える前に対処しておきたかった所ですが、
なんとなく今頃になってHTML5でやってみた次第です。
ということでFlash版はもうあのままで放っておきます(^_^;)

CSSによる垂直方向のセンタリングが
思いのほか面倒くさかったり、
レイアウトの微妙な調整でなんか手間取って、
時間が掛かってしまいましたが、
ActionScript3で作ったのと比べると、
JavaScriptのソースはかなり短くなった感じです。
視覚表現がCSSでまとめてやれるのが大きいですね。

見た目も機能もFlash版とほぼ同じですが、
いくつか異なる部分があるので一応書いておきます。

  • Flash版では今後24時間の最低と最高の予報使用率を表示していましたが、その後に供給力が更新されたりすることがあるのでやや先走った感がありました。HTML5版では12時間としました。ただし変更可能です。後述します。
  • Flash版でのゲージ表示は、各電力会社ごとに想定した年間ピーク時がMAX長となるように調整していましたが、作者以外には分かりにくいので(^_^;)、その時刻での使用率100%がMAX長となるように統一しました。
  • 外部サイトへの2つのリンクが結局同じページに行き着くので、一つに減らしました(確か以前は異なるページだったはずだけど・・・)

Yahooの電力使用状況API電気予報APIを使用していますので、
Yahooのクレジット表記が必要となっています。ご了承ください。
なお、
情報が更新されるタイミングとかについてはAPIのページを参照してください。

ブログパーツの埋め込みスクリプトは以下の通りです。
無料でご利用いただけます。

北海道電力。

東北電力。

東京電力。

中部電力。

関西電力。

九州電力。

例として、東京電力の24時間予報。
以下のように &hours=24 と付記してください。
他の電力会社でも同様です。?area=AAA&houres=HH という風に。
数値は任意ですが、大きいと実用的でない感じです。