ホーム > Expression Web > Expression Web 4 用の使える、プロっぽく見えるアドインを作成する

Expression Web 4 用の使える、プロっぽく見えるアドインを作成する

Mike Calvo[著], わにちゃん@ExpressionTech.jp[訳・編集]
2010年6月22日 from Expression Web team blog

はじめに

Expression Web は その製品の機能を簡単に拡張して 開発者を HTML、JavaScript および CSSのようなWebテクノロジーを精通させることができます。そのうちの一つの役に立つアドインとして、その製品発売時にあなたのWebページにBingマップを挿入する機能をデモで紹介したとおりです。このブログ記事では、我々のコミュニティサイトにおいて無料で利用できる、そのアドインの詳細について説明します。

アドインのクイックリファレンス

Bingマップアドインをダウンロードしたあと、Expression Webにそのアドインをインストールする必要があります。Bingマップアドインをインストールするには、[ツール]>[アドイン]を選択し、[インストール]ボタンをクリックして、画面に表示されている説明に従います。Bingマップアドインをインストールしたら、[挿入]メニューに[Bingマップ]が表示され、それを選択することによって、[Bingマップの挿入]ダイアログボックスが表示されます。

menu

dialog

そのダイアログにはBingマップを拡大・縮小できる機能が含まれています。さらに、ある場所を地図の真ん中にでき、周辺にプッシュピンを作ることもできます。いったん希望の位置、ズーム、および表示モードを選択してからそのHTMLとJavaScriptを追加するために[挿入]ボタンをクリックすることによって、インタラクティブな地図が表示されます。

Bingマップ アドインダイアログはExpression Webアプリケーションと同じ配色が使用されることに気づいてください。あなたのアドインを同じように見せるための方法を少し紹介します。

あなたの地図が動作していることを確認するためには、F12キーを押して現在のページをブラウザでプレビューします。そのブラウザでは[Bingマップの挿入]ダイアログにて設定された同じ場所、ズーム、表示方法で表示されます。その地図ではさらに、訪問者があなたのページをその地図の周りを動かしたりするコントロールも提供されています。

preview

我々がこのアドインをどのようにして作ったのかさっそく見てみましょう。

アドインの定義

Expression Web アドインは addin.xmlという名前のXMLファイルであるマニフェストファイルが必要です。このファイルはそのアプリケーション機能を説明するいくつかの方法と同様にそのアドインについての基本的な説明を提供します。ここにBingマップを挿入するための addin.xmlファイルがあります。

<addin>
    <name>Insert Bing Map</name>
    <author>Microsoft Expression Web Team</author>
    <description>This addin allows you to easily add a Bing Map into your web page.</description>
<guid>854a1305-d441-45f3-8d01-73ed23e9158b</guid>
    <homepage>https://expression.microsoft.com/en-us/cc136529.aspx</homepage>
<minversion>4.0</minversion>
<version>1.0</version>
    <command id="InsertMap" onclick="xweb.application.showModalDialog('addin:index.html','Insert Bing Map','dialogWidth:660; dialogHeight:480; scroll:off')" filetype="HTML-DOM">
        <menuitem parent="MENU_INsert" label="_Bing Map..." />
    </command> 
</addin>

その addin.xml ファイルはルートラベルで単一の<addin>要素が必修です。最低限、<name>要素も含めなければいけません。オプション説明要素として、author, description, guid, homepage, minversion そして version があり、それらは ユーザーに アドインの管理 ダイアログボックスで識別する手助けとなります。

例として、ここに[アドインの管理]ダイアログボックスに表示される 「Bingマップの挿入」アドインを挙げます。

addins-dialog

コマンド

あなたのアドイン用にExpression Webにメニューアイテムやツールバーボタンを追加するには、<command>要素をマニフェストファイルに使用します。

Bing マップアドイン用にExpression Webへ追加したコマンドを見てみましょう。一見、そのマニフェストファイルのこの部分は複雑に見えるかもしれませんが、それを分析してみると、きわめてシンプルであることがわかるでしょう。

 <command id="InsertMap" onclick="xweb.application.showModalDialog('addin:index.html','Insert Bing Map','dialogWidth:660; dialogHeight:480; scroll:off')" filetype="HTML-DOM">
     <menuitem parent="MENU_INsert" label="_Bing Map..." />
</command> 

それぞれのメニューコマンドは、Expression Webにそのコマンドを識別するための単一の id 属性を必要とする command 要素により定義されています。あなたのコマンドが単一であることを確実にさせるには、あなたのコマンドが行うことが識別できる一つのidを使ってみます。たとえば、Bingマップアドインでは、我々はそのidを "InsertMap"として使用しました。

次に、あなたのコマンドが実行されるときに何が起きるかを定義する必要があります。それが onclick 属性 でどこに来るかということです。onclick Javascript イベントハンドラーのように、ユーザーがツールバーボタンもしくはメニューアイテムを選択したときに実行されるJavaScriptコードを定義する onclick 属性を使用します。

新しいダイアログを起動するための例として、これを実装するためには、Expression Web API 関数、xweb.application.showModalDialog を使用しています。この関数は3つのパラメータを取得します:

  1. ダイアログへのUIを提供する一つのHTMLページ
  2. ダイアログのタイトル
  3. ダイアログオプションを含むストリング(サイズやスクロールのようなもの)

この例でのそのHTMLページは、“addin:index.html” として指定するように書き留めます。これはExpression Webがあなたのaddin.xmlファイルへ関連づけるように示すものです。よってこのケースでは、そのaddin.xml ファイルと同じディレクトリに index.htmlを呼び出す必要があります。我々はすぐにこのファイルのいくつかのものを見るつもりです。

command要素の最後の属性は filetype です。それは、HTML、ASPや PHPファイルといった、とある HTML DOMを持つファイルだけを利用可能とするアドインコマンドをExpression Webに伝えるものです。これは、ユーザーがCSSやJSファイルといったほかのタイプのファイルを編集中に我々のコマンドを非表示にさせます。あなたのアドインに同様の制限がないなら、あなたはこの属性を省略できます。

command 要素内にあるのは そのアドインのコマンドを引き起こすための新しいメニューアイテムを追加するようにExpression Webに伝える menuitem 要素です。そのmenuitem要素は、あなたがメニュー項目のためのラベルと同様に、あなたのコマンドが現れるべきであるメニューを指定するのに必要とします。我々のこの例において、そのラベル属性が"_Bing Map..."の値がつけられていることに注目してください。そのアンダースコア文字("_")はExpression Webにその 'B' の文字をホットキーに割り当てるように伝えるためのオプションです。

ダイアログUIの定義

我々がxweb.application.showModalDialog 関数リファレンスを用いてどのようにしてindex.htmlファイルを使ってダイアログUIを作ったかみてみましょう。いいニュースとしてほとんどのこのファイルは単なる標準Webテクノロジーを使っているため、とてもありふれているように見るべきであることです。私はハイパーリンク、ボタン、そしてテキストフィールドといった基本的なHTMLのようなことにフォーカスしませんが、Expression Webアドインを開発するための独自のこのファイルでの事柄についてハイライトしましょう。

JavaScript と CSS

Bingマップアドインのindex.htmlは、このアドインに開発したカスタムJavaScript だけでなくjQueryのような標準のJavaScriptライブラリへの参照を含んでいます。これらの参照の提案として、jQueryのようなパワフルなJavaScriptライブラリ、そして、あなたのアドインを書く手助けになるためのカスタムJavaScriptを用いることができます。

そのindex.htmlファイルはなにかふつうのHTMLでCSSを使うのと同様に働かせるいくつかのスタイルシートも参照します。以下のCSS参照の特別なノートを取得してください:

<link type="text/css" href="css/expression.css" rel="stylesheet" />

この expression.css ファイルは、Expression Webの配色と一致した標準の配色を定義しています。あなたのアドインがプロフェッショナルな印象を与えるために、その中に定義されたスタイルのクラスと同様にこのCSSファイルを使うようにします。そのBingマップアドインからのこのCSSファイルのそのバージョンをあなたのアドインで使うことができます。

マークアップとスクリプトの挿入

そのマップを挿入するためにそのアドインが何をしているのか理解するために、アドインのjsフォルダ内の prepare.js ファイルを見てみましょう。このファイルは[Bingマップの挿入]ダイアログボックスの[挿入]ボタンのビヘイビアを定義する、handleInsertButton をコールする関数が含まれています。この関数は、そのボタンに触れたとき、および、押したときにどうなるのかを定義するためのjQuery JavaScriptフレームワークのヘビーユーズが行われます。

この関数は少しだけ実行されるので、それをいくつか分析してみましょう。

$("insert").click(function (event) {
 xweb.document.appendScriptReference("https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2", "javascript");
xweb.document.appendScriptReference("https://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js", "javascript");

これら2行のコードはそのBingマップが現在のページにどのようにしてJavaScriptリファレンスを追加するかを表現しています。これら両方の例では、我々は xweb.document.appendScriptReference を呼び出すAPI関数を使ってスクリプトリソースをリモートするようにポイントしています。実際に、我々は我々のアドインにその機能をビルドするためにjQueryを使っているだけではなく、我々のページにマップ機能をビルドするためにそれを用いています。このアプローチを使用することによって、APIは一度より多くの同じリソースの参照の追加からあなたを保護するでしょう。

handleInsertButton 関数の次の興味深いプロパティは、我々のHTMLマークアップ内の地図での適切な家の場所を指定するExpression Web APIが使われる xwebdocument.selection です。これは、Expression Web での現在のドキュメント内での現在のカーソルの場所や選択にアクセスした情報を与えます。

そのコードは、DIV要素の中に現在のカーソル位置か選択が適切なIDと共にあるかを決定するのにこのプロパティを使用します。もしそうであれば、あのエレメントを使うでしょう。さもなければ、アドインはIDで新しいDIVを加えます。このコードが、Expression Web特有のAPIを使用している間、現在のドキュメントのDOMを扱うのは通常のHTML形式のページとしてDOMを扱うのと非常に似ていることに注意してください。

if (xweb.document.selection.GetHtmlElement().tagName == "div" &&
 	xweb.document.selection.GetHtmlElement().id != null) {
 theMapDiv = xweb.document.selection.GetHtmlElement().id;}
 else {
 //Create a div for the map
 theMapDiv = "theMap";
 xweb.document.selection.append("<div id=\"" + the MapDiv + "\" style=\"position: relative\"></div>"); }

その関数のリマインダーは、この関数は、Expression Web で編集されたドキュメントの HEAD 要素に追加したJavaScriptコードを生成する 標準のJavaScriptであることです。最後に、挿入への onclick 関数ハンドラーの最後に向かって、以下のコードを見ます:

xweb.document.getElementByTagName("head")[0].innerHTML += newmapJavaScript;
 	// Close the dialog after insertion
 	xweb.application.endDialog(false);
 });

繰り返し、我々はそのHEAD要素を示すように編集されたページのDOMに充てる xweb.document APIを使用し、このノードのinnerHTMLの特性にhtmlを追加するDOM-標準的アプローチを使用しています。最後に、そのダイアログを閉じる必要があります。これを行うには、xweb.appliation.endDialog 関数を使用します。この関数への独立変数は、ダイアログを表示したxweb.application.showModalDialogへのオリジナルの呼び出しに返されるものです。この場合はそれは未使用になります。

キーの扱い

アクセシビリティをサポートするのみならず、プロのアプリケーションの最終的な仕上げを加えるために、キーボード相互作用に成功するようにあなたのアドインの反応を確認することが重要です。 挿入するBingマップアドインはこれをどうするかのいくつかの例を示しています。

ホットキー

どのようにBingマップの挿入ダイアログにある挿入(Insert)ボタンの「I」にアンダーラインをつけるか注目してください。これはそのボタンにAlt+Iというホットキーが割り当てられていることを意味します。この機能性は我々のアドインによって追加される必要があります。これをどのように行うか理解するには、prepare.js の setupKeys 関数をチェックしてください。特に、以下のコードに注目してください。

function setupKeys() {
 $("body").keyup(function (event) {
 // Alt + I - insert button
 if (event.altKey && event.keyCode == 73) {
 $("#insert").click();
 }
 event.preventDefault();
 });

これは、ダイアログのページのボディーにおけるkeyupイベントにイベントハンドラを割り当てるのにjQueryを使用します。Alt-Iが検出されたとき、クリックイベントが手動で[挿入]ボタンに送られます。

タブオーダー

もう一つのまだ微妙な、重要な キー関数は入力フィールドの選択を循環するタブの使用です。タブは次の論理的な入力フィールドを選択すべきです。シフトのタブには、以前の論理的な入力フィールドを選択している間にです。Bingマップの挿入ダイアログにおいて、我々はフィールドの論理的な順序を選択しました:

  1. [場所]のテキストボックス (id ‘txtWhere’)
  2. 詳細情報リンク (id ‘hp’)
  3. [挿入]ボタン (id ‘insert’)
  4. [閉じる]ボタン (id ‘close’)

これにアシストするために、我々はイベント、前のコントロールIDおよび次のコントロールIDを取得する handleTab を呼び出す関数を追加しました。この関数は、TabまたはShift+Tabがそれぞれ押されたとき、次または前のコントロールへフォーカスを送るためのjQueryセレクタを使用します。

function handleTab(event, prev, next) {
 if (event.keyCode !=9)
 return;
 var control = event.shiftKey ? $(prev) : $(next);
 control.focus();
 event.preventDefault(); }

我々のタブの機能性における記述は setupKeys 関数に以下のコードを加えるのと同じくらい簡単です。

// make sure tab and ctrl tab work properly
$("#txtWhere").keydown(function (e) { handleTab(e, '#close', '#hp'); }); 
$("#hp").keydown(function (e) { handleTab(e, '#txtWhere', '#insert');}); 
$("#insert").keydown(function (e) { handleTab(e, '#hp', '#close');}); 
$("#close").keydown(function (e) { handleTab(e, '#insert', '#txtWhere');});
}

まとめ

私はBingマップ挿入アドインの概要が役に立つことがわかると願っています。そのアドインをダウンロードしてそれを使ってみるとわかると思います。Expression Webの素晴らしい拡張機能であるだけでなく、いかにしてプロっぽいアドインを作るかという素晴らしい例です。

記事ソース元:Expression Web team blog > Create useful, professional-Looking add-ins for Expression Web 4

関連記事

コメント

▲このページのトップへ