iPad用サイトを見る

アニメーション
アニメーションはCSS3アニメーションを使用しました。jQueryのanimateメソッドではスムーズに動かない場合があります。Flashムービーのような連続的なアニメーションを実行させるためにaddCommand – jQuery Pluginを使い、コールバック時にCSSのクラスを切り替えるようにしています。（addCommand.jsのプロパティーアニメーションは先述のjQueryのanimateメソッドを使用しているため今回は殆ど使っていません。）

メディアクエリー
端末の回転に対応させるため縦・横それぞれのCSSファイルを用意しました。縦と横でレイアウト、アニメーション（主に位置情報）が違う場合は設定をかき分ける必要があります。今回はjavascriptで端末の回転を判定していません。

まとめ
jQuery MobileやSencha touchなどフレームワークが出てきていますが、見た目のデザインありきでそれをページとして扱いたい場合などはiScroll 4はお手軽で結構いいなと思いました。もちろん案件次第ですが。

APKダウンロード
SimpleLightSetting v1.0

とりあえず野良公開します。
検証はGalaxyS2で行いました。
・Android OS1.6から使えるかと思います。
・明るさの自動設定は明るさ（環境光）のセンサーが付いている端末のみ使用できます。

• The Widget Workflow document: A description of the workflow from WDF to uploading to the Exchange.
• Developer’s Guide to the WDF: A detailed explanation of the WDF format.

widget packager 翻訳
翻訳の誤り等はコメントいただけるとありがたいです。
Have a good Dreamweaver life!

Vistaパソコンに添付されているOfficeスイートOutlook2007ですが、このメーラ
で受信されたHTML（文字を装飾しているメール）本文はかなり体裁が崩れ、見る
も哀れな状態になります。
これは、Outlook2007から、IEのHTML表示の体裁を整えるエンジンを使用せず、
Office内のWordの表示を利用しているからです。 WordはHTML形式の文書をむ
ちゃくちゃにすることで有名です。これはOutlook2007の根本的な設計にかかる
ため、今後パッチが当てられたり修正されることはなさそうです。どうしても
HTMLメールをきれいに表示させたい場合、Outlook2007を使わないほうが無難で
しょう。
http://www.terra-system.jp/win/2007/05/vistaoutlook2007html.html

いろいろ調べたところ条件付コメントでいけるみたいです。
全部画像のHTMLメールなら
＜!–[if gte mso 10]>
＜style>
body{ font-size:1px;}
＜/style>
＜![endif]–>
でOK。
各エレメントにスタイルを指定したいなら
こちらのエントリが参考になります。
メールクライアントごとのCSSサポート状況の解説とチートシート | コリス
なお使えるHTMLタグも制限されるようなので普段業務でDreamweaverを使っていれば
Download details: 2007 Office System Tool: Outlook HTML and CSS Validator
からWordMailSupportMacromedia.msiをイントールするとターゲットブラウザチェックでWord2007が選べるようになります。

ポート80が塞がってるというのが問題っぽいけど、IISはこないだ無効にしたばっかりだし、いったい他に何が？？？
と首を傾げつつ、とりあえず
netstat -abn
で調べてみる。すると一行目に、
0.0.0.0:80[Skype.exe]

どうもSkypeは80番ポートを使いたがるようだ。
問題はこのへんなのか。
なんにせよスタートアップで起きるSkypeががっつり80を塞いでしまうのでは、
Apacheには勝ち目がない。
解決策はスカイプの設定で。

こんなとこにデフォルトでチェック入れとかないでくださいよほんと…

1. クラスAccordionPanelがついているdivタグにidをつける
2. SpryDOMUtils.jsにリンクさせる
3. Spry.$$(“.AccordionPanel”).addEventListener(“mouseover”, function(){sampleAccordion.openPanel(this.id); return false;});の1文を加える

以上で、クリックでしか開閉できなかったものをマウスオーバーで開くようになります。
実動サンプル

ソース：
[html]

Spry Accordion

var sampleAccordion = new Spry.Widget.Accordion(“sampleAccordion”);
//セレクタファンクションaddEventListenerでマウスオーバーしたらid名のパネルを開く命令
Spry.$$(“.AccordionPanel”).addEventListener(“mouseover”, function(){sampleAccordion.openPanel(this.id); return false;});

[/html]

[/html]
Spry ではセレクタをあらわす時、下のように’$$’を使います。
Spry.$$(“the CSS selector”).utilfunction;
表記法を使ってクラスbodyText全てにクラスnewClassを追加します。
Spry.$$(“.bodyText”).addClassName(“newClass”);
もしくはこのようにspanタグ全てにクラスnewClassを追加できます。
Spry.$$(“span”).addClassName(“newClass”);

1. ページにjsファイルとリンクするようタグを入れます。
   [js]

   [/js]

2. functionブロックを書きます。
   [js]

   function myFunction(){
   }

   [/js]

3. エレメント選択用のコードを書きます。下はtableタグ内のpタグにクラスmyClassを追加します。
   [js]

   function myFunction(){
   Spry.$$(“table p”).addClassName(“myClass”);
   }

   [/js]

4. 動作させるためにonclickなどのイベントを入れます。
   [html]Click Me[/html]

1. エレメントセレクタとページをリンクさせます。
   [html]

   …

   …
   …

   …
   [/html]

2. myFunctions.jsというブランクのページを作り保存します。
3. ブランクのページに下のfunctionを追加します。
   [js]
   function myFunction(){
   }
   [/js]
4. エレメントセレクタ部分のコードを追加します。
   [js]
   function myFunction(){
   Spry.$$(“.Accordion”).forEach(function(n) { window[n.id] = new Spry.Widget.Accordion(n); });
   }
   [/js]
   このコードはクラスAccordionのあるタグすべてにfunction(n) { window[n.id] = new Spry.Widget.Accordion(n);を実行していることになります。その結果idがAccordion1,Accordion2のものがアコーディオンウィジェットになります。ウィジェットの名前もそれぞれAccordion1,Accordion2です。
   ウィジェットの開閉を設定したいならid名を指定してonclick=”Accordion2.open();”にすればよいです。
5. 次にページがロードされた後すぐに実行されないためにリスナーを追加すべきなので下のようにします。マークアップがコンストラクタスクリプトが起こる前に必要になるのでこれは重要です。なぜなら一般的なSpryのページではマークアップのロード後にfunctionを呼ぶからです。
   [js]
   function myFunction(){
   Spry.$$(“.Accordion”).forEach(function(n) { window[n.id] = new Spry.Widget.Accordion(n); });
   }
   Spry.Utils.addLoadListener(myFunction);
   [/js]
6. 最後にmyFunctions.jsをページにリンクします。
   [html]

   [/html]