こんばんは。
本当は 3 日目ですが、昨日、ホテルの回線が混んでいたので、投稿することができませんでした。
なので、今日のタイトルを 2 日目とさせていただきます。
今日は Internet Explorer 8 (以下 IE8 ) 関連のセッションは 2 つありました。
初日の Chris Wilson のセッションは包括的で、細かいところは省略していたのですが、今日はその省略したところをもう少し補足する形のセッションになっています。
まずは、Jane Kim の 「 Integrating Your Site With IE8 」 で、内容は IE8 の新機能となる Activities と WebSlices についての紹介セッションです。
この 2 つの新機能の背景として、3 つの Motivation を紹介します。
- ユーザーは Web アプリケーションへ移行しようとしている
- Activities は Web 上のどこからでも、あなたの Web サービスと利用者を結び付けます。
- Web コンテンツは、より Personal & Meaningful に
- WebSlices はあなたのサイトのダイナミックな一部分をユーザーに直接使わせることができます。
- Web 開発は、OS 上での開発よりもより簡単に
- Activities と WebSlices は宣言するだけで、クライアント側のコードは必要ありません。
まずは Activities から。（DEMO が入りました。）
（補足）Activities をというのは、今までの IE では、サービスを提供しているサイトにユーザーをナビゲートしてそのサービスを使わせていたり、そのサービスを使わせるために専用のコードをサイト毎に記述していたものを、ユーザーにサービスをアドオンとして登録させて、Web サイトで表示される情報に対して直接サービスを提供させることができる IE のアドオンのひとつのタイプになります。(アドオンとしては、ActiveX コントロールや、サーチプロバイダーに続いて、Activities が 3 番目となります。)
Activities のフォーマットについて (メインコンポーネントの紹介)
- Context : Activities が動作するコンテンツのこと ( Selection, Document, Link など)
- Category : Activities をグループ分けできるようにする
- Preview : 実行結果のサンプルを表示させる Activities の Service Interface のこと (マウスカーソルを載せた時の動作)
- Execute : Web サービスへのナビゲートとデータを送信する Activities の Service Interface のこと (マウスでクリックした時の動作)
ここで、既存のサービスの提供の仕方のフローと、Activities がユーザーに提供するフローの比較をしています。
(このあたりは、Beta セミナーで。)
Activities を提供する本体は、OpenService フォーマットによる XML ファイルになります。この XML ファイルには、サービスの Preview と実行のための URL テンプレートを含んでいます。
フローを箇条書きで書くとこんな感じです。
- ユーザーがサイトにあるコンテンツ (住所の記述や単語とか。。。) を選択します。
- 緑の矢印が出てきて、ユーザーはその選択したコンテンツに対して実行したい Activities (map 表示や翻訳や検索など) の一覧を表示させます。
- この時、IE はユーザーが選択したコンテンツをサービスの Preview と実行のために、Acitivities の XML ファイルに記述されている URL テンプレートに連動させます。
- (ユーザーのマウスカーソルが) 利用したい Activities に重なった時、IE はそれぞれの Activities に設定された URL テンプレートに基づいて HTTP Submission を生成します。
- サービス提供元から結果の HTML が返ってきたら、ブラウザーは Flyout ウィンドウ (と確か言ってた) に表示させます。
Live Map で表示させる Activities が提供している XML ファイルはこんな感じです。
<?xml version="1.0" encoding="utf-8" ?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
<homepageUrl>http://maps.live.com</homepageUrl>
<display>
<name>Map with Live Maps</name>
<icon>http://maps.live.com/favicon.ico</icon>
</display>
<activity category="Map">
<activityAction context="selection">
<execute method="get“ action="http://maps.live.com/default.aspx?where1={selection}" />
<preview method="get" action="http://maps.live.com/geotager.aspx">
<parameter name="b" value="{selection}" />
<parameter name="clean" value="true" />
<parameter name="w" value="320" />
<parameter name="h" value="240" />
<parameter name="format" value="full" />
</preview>
</activityAction>
</activity>
</openServiceDescription>
どうでしょう？なんとなく、どこに何を書けばいいか分かる感じですよね？(具体的な説明は、またセミナーで。。。その前にたぶん MSDN などでもうちょっと詳細なドキュメントが出てくるはずです。)
では、XML は書いたとして、どうやってユーザーにインストールさせるのか？となりますが、その記述方法はこんな例を出していました。
----- (省略: ブラウザが IE8 かどうかを User-Agent String などで判断させておいて。。。) -----
//Activities サービスがすでにインストールされているかどうか？をチェック
window.external.IsServiceInstalled
(‘http://maps.live.com/livemaps.xml’, ‘map’);
//もし false したら、サービスを追加するためのボタンを表示させる
window.external.AddService
(‘http://maps.live.com/liveMaps.xml’) ;
最後に Activities のまとめをして Activities については、これで終わりです。
次に WebSlice についての説明になります。
これもまたいきなり DEMO から入りました。(実際の動きを試したいという方は DEMO で見せていた ebay.com サイトを IE8 で見てください。)
(補足) WebSlice は(どこかで見たようなアドオンだと思われる方は多いかもしれませんが。。。) Web サイトの一部の項目についてお気に入りのような感じで Feed の一部として登録させることができる機能です。その切り取ってお気に入りにいれた部分が更新されたら、更新された内容が表示されます。
実際に、WebSlice を提供するときに、HTML に何を記載すればいいのか？を例を挙げて説明していくと。。。
まずは、単純に WebSlice に登録した時のボタンのタイトルと、Flyout ウィンドウに表示させたい内容の指定をします。
<div class=”hslice” id=”1” >
<p class=”entry-title”>東京の天気</p>
<div class=”entry-content”>
<img src=”whether_pic_hare.jpg”>
<p>現在の気温: 15℃</p>
</div>
</div>
class は必ず "hslice" を指定します。"entry-title" には、WebSlice で切り取った時、Favorite バーに表示させるボタンのタイトルになります。そして、Flyout ウィンドウに表示させたい内容を "entry-content" 内に記述させるという手順です。
これも追って Beta セミナーで紹介したいと思います。
(RSS Feeds に似てますが) Web 提供者がページの中のコンテンツを Subscribe-able にするために。。。
- WebSlice format
- WebSlice フォーマットは、Feeds に似てます。その中でデータフォーマットとして、feed を提供する hAtom Microformats に注目してチャレンジしてみました。(この WebSlice という機能を提供するのに、適したものとして hAtom Microformat を使って実装することにチャレンジしてみた、という感じです。)
- hAtom のプロパティを使うのと、Subscribing のために下記のようにプロパティを追加しました。
- hAtom のプロパティ
- entry-title : feed アイテムのタイトル名
- entry-content : feed アイテムの内容
- hSlice のために追加したプロパティ
- ttl : optional. time-to-live の値
- feedurl : optional. アップデートを得るための Path
- endtime – optional. アイテムがアップデートを続けるまでの終了日(時間)
- Client processing
- Windows Feeds (RSS) プラットフォームとして、Feeds と WebSlice をサポートすることになります。
- これも、図がないとうまく説明しづらいのですが、、、クライアントから見た扱いは Feed と WebSlice は同じで、Feed Parser にデータが持ち込まれるまでのプロセスが、feed の場合は feed (XML) をダウンロードして Feed Parser 行き、WebSlice は WebSlice の記述がある HTML をダウンロードして Atom Feed (XML) にコンバートしてから Feed Parse に行きます。
- ダウンロードしたコンテンツは、ローカルに保存されて、FeedAPI 経由でアクセスすることが可能です。
- Network management
- Feed のダウンロードエンジンはデフォルトでは1日1回 Update を確認します。(IE のオプションの Content タブの Feed の設定画面で変更可能：最小単位は 15分毎)
- time-to-live の設定
<div>Updates every <span class=”ttl”>60</span>min</div>
- Update を異なるソースから得るための指定
<a rel=”feedurl” href=”www.XXXX.com/feed.xml”>Subscribe</a>
- Privacy & auth
- Feed はユーザーとアプリケーションに対して Web データを提供できます。
- プライベート データは認証を通じて得ることができます。Feed プラットフォームの認証サポートは次になります。
- Persistent cookie based auth : Cookie が Expire したら、再度認証が必要になる
- Http based auth (SSL 経由のベーシック認証とダイジェスト認証)
- NTLM (企業における利用シナリオを想定して。。。です。)
- Recommended use
- 住み分けについて： Feeds は新しいアイテムを表示 (Promoting) するのに便利。WebSlice は刻々と変化する状態を Web ページの切抜きで表現できる一つのアイデアとして提供します。(Feeds に Preview 機能がついた感じかな？)
最後にまとめを行って終了です。
Activities と WebSlice については、HandsOnLab でエンジニアに質問しながらいろいろ試してみました。この HandsOn も公開されるんじゃないかな？と思います。
本当は、もっと図などを入れて説明したいところですが、申し訳ありません。。。(まとめるので精一杯でした。。。)
本日もうひとつあった IE8 のセッション 「Advanced Cross-Browser Layout with IE8」 については、別途 Post します。
五寳