IEでexcanvasでiGoogle

Canvas機能を使いかったので
IEではexcanvasを使用しました。

ローカルではうまいこと
描画されていたんだけれども
iGoogle ガジェットに載せてみたら
描画がおかしくなりました。

なんでだろうって思っていたら
異なるマシンでのIEは
ちゃんと描画されました。

結局原因が分からず
urlを変えてみたら
確認した数台のマシンでのIEで
問題なく描画されるようになりました。

Googleのサーバーによって
ちゃんと描画されたり
されなくなったりするのかな?
その位しか原因が思い浮かびませんでした。
わかりません。。

 

aaoh.sora

“aaoh.sora”は
“aaoh.kaze”を利用してガジェットを作成するにための
マルチGadgetフレームワークです。

ライブラリのソースは
とりあえずWindows サイドバーガジェットでの
電卓ガジェットをダウンロードしていただき
 http://gallery.live.com/liveItemDetail.aspx?li=6b73dedf-1461-46b5-bd04-8d1fea6db165
拡張子をgadgetからzipに変更して
解凍してもらうと
libディレクトリがそれに該当します。
詳細はこちらを見ていただくと幸いです。

内容は下記のようになっています。

################
ガジェットプラットフォーム
################

対応ガジェットプラットフォームは
“aaoh.kaze”に準じて下記なります。

 Windows サイドバーガジェット
 Opera ウィジェット
 Mac OS X Dashboard ウィジェット
 Adobe AIR
 iGoogle ガジェット
 Google デスクトップ ガジェット
 Yahoo!ウィジェット

################
ファイル構成
################

“lib”ディレクトリ直下にはJavaScript、
“lib/css”ディレクトリにはスタイルシート、
“lib/images”、”lib/sub-images”ディレクトリには
画像ファイルを置いています。

スタイルシートは通常用、IE用、モバイル用の
3種類に分かれています。

画像ファイルは基本的に
通常時、オンマウス、オーバーマウスの画像を
1画像にまとめており
スタイルシートにて画像の位置をずらして
表示を行っています。
その画像を”lib/images”に置いています。

スタイルシートにて画像の位置を変更できない
ガジェットプラットフォーム用に
画像を分割したものを
“lib/sub-images”に置いています。

ファイル構成は下記となっています。

 lib/aaoh.sora.js
 lib/aaoh.sora.t.png
 lib/aaoh.sora-core.js
 lib/aaoh.sora-ex.js
 lib/css/aaoh.sora.style.css
 lib/css/aaoh.sora.style_ie6.css
 lib/css/aaoh.sora.style-mobile.css
 lib/css/aaoh.sora-ex.style.css
 lib/css/aaoh.sora-ex.style_ie6.css
 lib/css/aaoh.sora-ex.style-mobile.css
 lib/images/aaoh.sora-ex.img-update-load.png
 lib/images/aaoh.sora-ex.img-update-none.png
 lib/images/aaoh.sora-ex.img-update-upd.png
 lib/images/aaoh.sora.img-close.png
 lib/images/aaoh.sora.img-loading.png
 lib/images/aaoh.sora.img-max.png
 lib/images/aaoh.sora.img-option.png
 lib/images/aaoh.sora.img-tab-act.png
 lib/images/aaoh.sora.img-tab-inact.png
 lib/sub-images/aaoh.sora.img-close_down.png
 lib/sub-images/aaoh.sora.img-close_over.png
 lib/sub-images/aaoh.sora.img-close_up.png
 lib/sub-images/aaoh.sora.img-max_down.png
 lib/sub-images/aaoh.sora.img-max_over.png
 lib/sub-images/aaoh.sora.img-max_up.png
 lib/sub-images/aaoh.sora.img-option_down.png
 lib/sub-images/aaoh.sora.img-option_over.png
 lib/sub-images/aaoh.sora.img-option_up.png
 lib/sub-images/aaoh.sora.img-tab-act_down.png
 lib/sub-images/aaoh.sora.img-tab-act_over.png
 lib/sub-images/aaoh.sora.img-tab-act_up.png
 lib/sub-images/aaoh.sora.img-tab-inact_down.png
 lib/sub-images/aaoh.sora.img-tab-inact_over.png
 lib/sub-images/aaoh.sora.img-tab-inact_up.png

################
パッケージ構成
################

パッケージ構成、機能は下記となっています。

 aaoh.sora
  マルチGadgetフレームワークルートパッケージ

 aaoh.sora.Control
  コントローラ機能

 aaoh.sora.Model
  モデル

 aaoh.sora.Main
  メイン画面機能

 aaoh.sora.Option
  オプション画面機能

 aaoh.sora.ControlEx
  拡張コントローラ機能

 aaoh.sora.ModelEx
  拡張モデル

 aaoh.sora.MainEx
  拡張メイン画面機能

 aaoh.sora.OptionEx
  拡張オプション画面機能

 aaoh.sora.App
  アプリケーション機能

################
使い方
################

各ガジェットにて最初に”lib/aaoh.kaze.js”を読込んで下さい。
その後、JavaScriptとして”lib/aaoh.sora.js”を読込んで下さい。

メイン画面では”aaoh.sora.MainEx”を継承したパッケージに
オプション画面には”aaoh.sora.OptionEx”を継承したパッケージに
処理を記述することにより
ガジェットプラットフォームに依存しない為
同一ファイルにて管理することができます。

スタイルシートには”lib/css/aaoh.sora-ex.style.css”を
インポートしたものを使用してください。

Windows サイドバーガジェット、Opera ウィジェット、
Mac OS X Dashboard ウィジェット、Adobe AIR、
iGoogle ガジェットでは
“lib/aaoh.sora.js”を読込むことにより
その他の必要なJavaScriptライブラリも読込まれます。

Google デスクトップ ガジェット、Yahoo!ウィジェットでは
自動で読み込まれないので
“lib/aaoh.kaze-core.js”、”lib/aaoh.kaze-ex.js”も
読込むようにしてください。

 

aaoh.kaze

“aaoh.kaze”は
各ガジェットプラットフォームでの拡張機能を
一元的にまとめたマルチGadgetライブラリです。

ライブラリのソースは
とりあえずWindows サイドバーガジェットでの
電卓ガジェットをダウンロードしていただき
 http://gallery.live.com/liveItemDetail.aspx?li=6b73dedf-1461-46b5-bd04-8d1fea6db165
拡張子をgadgetからzipに変更して
解凍してもらうと
libディレクトリがそれに該当します。
詳細はこちらを見ていただくと幸いです。

内容は下記のようになっています。

################
ガジェットプラットフォーム
################

対応ガジェットプラットフォームは下記となっています。

 Windows サイドバーガジェット
 Opera ウィジェット
 Mac OS X Dashboard ウィジェット
 Adobe AIR
 iGoogle ガジェット
 Google デスクトップ ガジェット
 Yahoo!ウィジェット

################
ファイル構成
################

“lib”ディレクトリ配下には
ライブラリとして必要なファイルを置いてあり
“libexec”ディレクトリには
ガジェットプラットフォームで固有に必要な
ファイルを置いてあります。

ajaxライブラリとしてminiajax.js、
jsonライブラリとしてjson2.jsを
使用しています。

iGoogle ガジェットでのIE6での透過PNG対応として
iepngfix.jsを使用しています。

Adobe AIRではAIRAliases.js、AIRLocalizer.jsを
読込むようにしてください。

ファイル構成は下記となっています。

 lib/aaoh.kaze.js
 lib/aaoh.kaze-core.js
 lib/json2.js
 lib/miniajax.js
 libexec/AIRAliases.js
 libexec/AIRLocalizer.js
 libexec/iepngfix.js

################
パッケージ構成
################

パッケージ構成、機能は下記となっています。

 aaoh.kaze
  マルチGadgetライブラリルートパッケージ

 aaoh.kaze.Type
  ガジェットプラットフォーム判定

 aaoh.kaze.Gadget
  ガジェット特有機能

 aaoh.kaze.Element
  DOMエレメント操作機能

 aaoh.kaze.Ajax
  Ajax機能

 aaoh.kaze.JSON
  JSON機能

 aaoh.kaze.Storage
  データの読み書込み機能

 aaoh.kaze.Clipboard
  クリップボードへの操作機能

 aaoh.kaze.Sound
  音の再生機能

 aaoh.kaze.Timer
  タイマー機能

 aaoh.kaze.Locale
  ローカライズされた各言語でのメッセージ取得

################
使い方
################

各ガジェットにて”lib/aaoh.kaze.js”を読込んで下さい。
“aaoh.kaze”の機能を使うことにより
ガジェットプラットフォームに依存しない為
同一のJavaScriptファイルにて管理することができます。

Windows サイドバーガジェット、Opera ウィジェット、
Mac OS X Dashboard ウィジェット、Adobe AIR、
iGoogle ガジェットでは
“lib/aaoh.kaze.js”を読込むことにより
その他の必要なライブラリも読込まれます。

Google デスクトップ ガジェット、Yahoo!ウィジェットでは
自動で読み込まれないので
“lib/aaoh.kaze-core.js”、”lib/json2.js”、”lib/miniajax.js”も
読込むようにしてください。

ローカライズされたメッセージファイルを
各ガジェット毎に用意して下さい。

Opera ウィジェット、Mac OS X Dashboard ウィジェット、
Yahoo!ウィジェットでは
Ajax機能を利用する際に
マニフェストファイルに通信許可の設定が必要です。

################
制限事項
################

ガジェットプラットフォームによっては
該当する拡張機能が提供されていない為
利用できない機能があります。

Opera ウィジェット、Mac OS X Dashboard ウィジェットでは
“aaoh.kaze.Clipboard”機能が使えません。

Opera ウィジェット、Mac OS X Dashboard ウィジェット、
iGoogle ガジェットでは”aaoh.kaze.Sound”機能が使えません。

 

Multi Gadget Library

マルチガジェットライブラリ
“aaoh.kaze”、”aaoh.sora”を作成しました。

“aaoh.kaze”は
各ガジェットプラットフォームでの拡張機能を
一元的にまとめたマルチGadgetライブラリです。

“aaoh.sora”は
“aaoh.kaze”を利用してガジェットを作成するにための
マルチGadgetフレームワークです。

これらのライブラリを使用して
ガジェットも作成しました。

ライブラリを作成するのは一苦労しましたが
各ガジェットプラットフォーム毎に
個別にガジェットを作る必要はなくなり
楽になりました。

そしてガジェット制作実例
 http://www.aaoh.co.jp/products/gadget.html
で紹介している
下記のガジェットにて使用しています。

 電卓
 タイマー
 月齢
 見出しニュース[Yahoo!JAPAN版]
 検索ボックス
 目覚し時計

ライブラリのソースは
とりあえず
Windows サイドバーガジェットでの
電卓ガジェットをダウンロードしていただき
 http://gallery.live.com/liveItemDetail.aspx?li=6b73dedf-1461-46b5-bd04-8d1fea6db165
拡張子をgadgetからzipに変更して
解凍してもらうと
libディレクトリがそれに該当します。
詳細はこちらを見てください。

目覚し時計ガジェット作成しました

目覚し時計ガジェットを作成しました。
もちろん全てのガジェットプラットフォームにおいてです。

画面イメージは下記より見てください。
http://www.aaoh.co.jp/products/gadget.html#aclock

ガジェット配布先に新規登録依頼を
行ったので
近日中に随時追加されていくと思います。

ガジェットイメージ一新

今まで作成しました下記のガジェットの
イメージを一新しました。
 電卓
 タイマー
 月齢
 見出しニュース[Yahoo!JAPAN版]
 検索ボックス

どんなイメージになったのかは
下記を参照してください。
http://www.aaoh.co.jp/products/gadget.html

もちろん全てのガジェットプラットフォームにおいてです。

ガジェット配布先に更新依頼を
行ったので
近日中に随時更新されていくと思います。