Visio Web Access Web パーツの Visio Web 図面のカスタマイズ
最終更新日: 2013年12月3日
適用対象: SharePoint Server 2010
この記事の内容
Visio Web Access Web パーツのプログラミングの概要
Web パーツ ページの作成
Web パーツ ページに Visio Web Access Web パーツを追加する
Web パーツ ページにコンテンツ エディター Web パーツを追加する
Visio Services ECMAScript API
Visio Services ECMAScript API のオブジェクト
SharePoint 2010 SDK のサンプル
Visio Services in Microsoft SharePoint Server 2010 を使用すると、Microsoft SharePoint Server 2010 ページの Visio Web Access Web パーツのインスタンスでホストされる Microsoft Visio 2010 ドキュメントを、プログラミングにより読み込み、表示、あるいは操作できます。
この記事では、SharePoint Server 2010 Web パーツ ページに Visio Web Access Web パーツを追加する方法、Web パーツで Visio Web 図面を表示する方法、Visio ServicesJavaScript API を使用してプログラミングによりその図面で作業する方法について説明します。
Visio Web Access Web パーツのプログラミングの概要
ソリューションの SharePoint Server 2010 Web パーツ ページで、プログラミングにより Visio Web 図面を操作する前に、Visio Web Access Web パーツを追加し、vdw ファイルとして発行された Visio 図面をその Web パーツで開き、ECMAScript (JavaScript、JScript) コードを含むページにコンテンツ エディター Web パーツを追加する必要があります。
この手順では、ユーザーが SharePoint Server 2010 でページ デザイナーとして適切な管理権限を持っていると想定しています。
Visio Web Access Web パーツのプログラミングを開始するには
Visio で、表示する図面を作成して、それを .vdw ファイルとして SharePoint ドキュメント ライブラリに保存します。
Web 図面で作業するために使用するコードを含む JavaScript (.js) ファイルを作成し、それを .vdw ファイルと同じドキュメント ライブラリに保存します。
図面を表示し、コードを含めるための SharePoint Server 2010 Web パーツ ページを作成します。
ページに Visio Web Access Web パーツを追加し、Web パーツで Web 図面を表示します。
ページにコンテンツ エディター Web パーツを追加し、以前に作成した JavaScript ファイルにそれをリンクします。
ブラウザーでページを更新します。
以下のセクションでは、これらのいくつかの手順についてさらに詳しく説明します。.vdw ファイルとして Visio 図面を発行することについては、Visio ヘルプに情報があります。JavaScript ファイルは、Microsoft Visual Studio 2010、また任意のその他のテキストあるいはコード エディターで作成することができます。
注意
JavaScript のコード作成のための一般的なガイドラインについては、この記事で扱う範囲外ですが、多くの書籍とオンライン記事に情報があります。
Web パーツ ページの作成
.vdw ファイルとして Visio 図面を発行し、ドキュメント ライブラリにそれを保存し、JavaScript (.js) ファイルを作成して、同じライブラリにそれを保存した後で、次の手順は、Web パーツ ページを作成することになります。
Web パーツ ページを作成するには
図面を投稿する SharePoint サイトの、[サイトの操作] メニューで、[その他のオプション] をクリックします。
[ページとサイト] の、[Web パーツ ページ] をクリックします。
新しい Web パーツ ページの、[名前] ボックスで、ページのためのファイル名を入力します。
レイアウト テンプレートと、ページ ファイルを保存する場所を選択して、次に [作成] をクリックします。
Web パーツ ページに Visio Web Access Web パーツを追加する
SharePoint Server 2010 の Web パーツ ページの Web 図面をプログラムで操作するには、その前に、作成した Web パーツ ページに Visio Web Access Web パーツを追加し, .vdw ファイルとして発行された Visio 図面をその Web パーツで開く必要があります。
Visio Web Access Web パーツを Web パーツ ページに追加するには
SharePoint Server 2010 Web パーツ ページの Server リボンで、[ページの編集] をクリックします。
Web パーツを配置するゾーンで、[Web パーツの追加] をクリックします。
[カテゴリ] ボックスの一覧で、[ビジネス データ] をクリックします。
[Visio Web Access] をクリックし、[追加] をクリックします。
[Web パーツ メニュー] の横にある矢印をクリックし、[Web パーツの編集] をクリックします。
開く Web 図面 (.vdw ファイル) の URL を入力し、[OK] をクリックします。
Web パーツ ページにコンテンツ エディター Web パーツを追加する
コンテンツ エディター Web パーツ サーバーには、2 つの目的があります。つまり、JavaScript のコードを保持することと、Visio Web Access Web パーツ内の .vdw ファイルをリアルタイムで操作できる表示とコントロール インターフェイスを提供することです。
コンテンツ エディター Web パーツを Web パーツ ページに追加するには
ページがまだ編集モードでない場合は、SharePoint Server 2010 Web パーツ ページの Server リボンで [ページの編集] をクリックします。
コンテンツ エディター Web パーツを配置するゾーンで、[Web パーツの追加] をクリックします。
[カテゴリ] ボックスの一覧で、[メディアおよびコンテンツ] をクリックします。
[Web パーツ] ボックスの一覧で、[コンテンツ エディター] をクリックし、[追加] をクリックします。
[コンテンツ エディター Web パーツ メニュー] の横にある矢印をクリックし、[Web パーツの編集] をクリックします。
開く .js ファイルの URL を入力し、[OK] をクリックします。
リボンで [編集の終了] をクリックします。
Visio Services ECMAScript API
Visio Services の JavaScript オブジェクト モデルは, .vdw ファイルとして Visio Web Access Web パーツに表示された Visio 図面に、プログラムによりアクセスできるようにします。Visio ServicesJavaScript オブジェクト モデルを使用して、図形データ、ハイパーリンク、および図形境界ボックス座標にアクセスすることができます。また特定の図ページを対象とするマッシュアップを作成し、図形を選択してハイライトし、図にマークアップ オーバーレイを挿入し、マウス イベントに対応し、ビューポートのパンおよびズームのプロパティを変更できます。(マッシュアップとは、複数のソースからの機能あるいはデータを、単一の統合されたサービス、アプリケーション、あるいはメディアに結合できるようにするアプリケーションです。)
多くの JavaScript API と同様に、Visio Services ECMAScript API はイベン トベースです。Visio Web Access Web パーツをプログラムするには、図で発生したイベントに対応する関数を呼び出すハンドラーを作成します。
Visio Services ECMAScript API のオブジェクト
Visio ServicesJavaScript API には、4 つのオブジェクトとそれぞれのメンバーのみが含まれます。
さらに、Visio ServicesJavaScript API には 4 つの列挙体が含まれます。
VwaControl オブジェクト
VwaControl オブジェクトは、Visio Web Access Web パーツのインスタンスを示しています。VwaControl オブジェクトのメソッドを使用することにより、Web パーツについての情報と、Web パーツでレンダリングされた Visio 図面についての情報にアクセスすることができます。さらに、これらのメソッドを使用して、Web パーツで Visio ドキュメントを開く、表示されているアクティブなページの取得と設定、イベント ハンドラーの追加と削除、カスタム メッセージを表示あるいは非表示にするなど、さまざまなアクションを実行することができます。
JavaScript コードで、ASP.NET AJAX Sys.Application クラスの load イベントにハンドラーを添付することによって VwaControl オブジェクトへの参照を取得することができます。そのハンドラーを実装する関数で、オブジェクトをホストする Visio Web Access Web パーツの HTML 識別子 (ID) をそのオブジェクトに渡して初期化することができます。Web パーツをホストする HTML ページのソース コードを確認し、class="VisioWebAccess" という語句を検索することによって、その ID を取得することができます。ID は "WebPartWPQ#" という形式です。# は、Web パーツの識別番号を示しています。以下のコード例でその方法を説明します。ここでは、ユーザーが、Web パーツ ID が WebPartWPQ3 であることを既に知っており, .vdw ファイルとして発行された Visio 図面を Web パーツで開いたと想定しています。
Sys.Application.add_load(onApplicationLoad)
var webPartElementID = "WebPartWPQ3";
var vwaControl;
function onApplicationLoad() {
try{
vwaControl= new Vwa.VwaControl(webPartElementID)
vwaControl.addHandler("diagramcomplete", onDiagramComplete);
}
catch(err){
}
}
VwaControl オブジェクトのインスタンスへの参照を取得したとき、Visio Web Access Web パーツ内の発行済みの Visio .vdw ファイルに基づいて、その openDiagram メソッドを使用して、新しい図を開くことができます。しかし、openDiagram メソッドを呼び出した後では、VwaControl の同じインスタンス、あるいは Vwa 名前空間のその他のどのオブジェクトも指定することができません。これは、openDiagram メソッドが、サーバー上で図を開いてすぐにそれを返す、非同期操作だからです。さらに、非同期操作は、現在の VwaControl オブジェクトを無効にします。詳細については、「Vwa.VwaControl.openDiagram Method」を参照してください。
openDiagram の呼び出しを扱う最良の方法は、Visio Web Access Web パーツが Visio 図面の読み込みを完了したときに発生する Vwa.diagramcomplete Event のためのハンドラーを作成して、そのイベント ハンドラーにユーザーのコードを含めることです。diagramcomplete イベントのためのイベント ハンドラーを追加するために Vwa.VwaControl.addHandler Method を使用することができます。ベスト プラクティスは、このコントロールへのユーザー アクションによって発生したイベントに対応するこれらのイベント ハンドラーを作成することにより、VwaControl オブジェクトをプログラムすることです。VwaControl オブジェクトによって公開されるその他のイベントには、ユーザーのマウス操作に対応する Vwa.shapemouseenter Event、Vwa.shapemouseleave Event、および Vwa.shapeselectionchanged Event、そして SharePoint Server 2010 が返すエラーに対応できるようにする Vwa.diagramerror Event が含まれます。
diagramcomplete イベントのためのハンドラーで、Page オブジェクト、Shape オブジェクト、および ShapeCollection コレクションを含め、API によって公開されたその他のオブジェクトへの参照を取得することができます。同じハンドラーで、以下のコード例に示すように、その他のイベントのためのハンドラーを作成することができます。
function onDiagramComplete() {
try {
vwaPage = vwaControl.getActivePage();
vwaShapes = vwaPage.getShapes();
vwaShape = vwaShapes.getItemAtIndex(0);
vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged);
}
catch(err) {
}
}
このコード例では、以下のプログラミング作業を行う方法について説明します。
Vwa.VwaControl.getActivePage Method を使用して、アクティブなページを表す Page オブジェクトのインスタンスへの参照を取得する方法。
Page オブジェクトの Vwa.Page.getShapes Method を使用して、アクティブなページ上の図形のコレクションを表す ShapeCollection コレクションのインスタンスを取得する方法。
そのコレクションの Vwa.ShapeCollection.getItemAtIndex Method を使用して、アクティブなページ上の図形のコレクション内の 1 番目の図形のインスタンスを取得する方法。
shapeselectionchanged イベントのハンドラーを追加する方法。
Web パーツに表示される図面についての詳細を取得するために、VwaControl オブジェクトのいくつかのメソッドを使用することができます。たとえば、図が含まれるすべてのページの名前を取得するために Vwa.VwaControl.getAllPageIds Method を使用することができます。また Vwa.VwaControl.getDiagramUrl Method を使用して Web パーツに現在表示されている図の URL を取得することができます。そして Vwa.VwaControl.getDisplayMode Method を使用して、現在の Web 図面ページがラスター テクノロジと Microsoft Silverlight テクノロジのどちらで表示されているか判断できます。また Vwa.VwaControl.getVersion Method を使用して Web パーツのバージョンを取得することができます。
Vwa.VwaControl.removeHandler Method により追加したイベント ハンドラーを削除し、Vwa.VwaControl.clearHandlers Method によりすべてのハンドラーを削除できます。カスタム HTML エラー メッセージ ページの表示と非表示を切り替えるには、Vwa.VwaControl.displayCustomMessage Method と Vwa.VwaControl.hideCustomMessage Method を使用します。また Vwa.VwaControl.setActivePage Method を使用して、Web パーツに現在表示されているページを変更し、Vwa.VwaControl.refreshDiagram Method を使用して、現在の Web 図面ページをサーバーからデータによって更新することができます。
Page オブジェクト
Page オブジェクトは Visio Web Access Web パーツのレンダリング領域で現在表示されているアクティブな Web 図面ページを示しています。Page オブジェクトのメソッドを使用して、図形の ID、図形の位置、および図形の周りの境界ボックスのサイズなどの、図形についての情報にアクセスし、ページ上で図形を選択することができます。また、表示されているページのズーム レベルと位置の取得および設定をすることができます。
Page オブジェクトのメソッドには、以下が含まれます。
前のコード例で示した getShapes メソッドに加えて、Vwa.Page.getSelectedShape Method、Vwa.Page.setSelectedShape Method、Vwa.Page.centerViewOnShape Method、および Vwa.Page.isShapeInView Method を使用して、ページ上の図形の情報にアクセスするか、操作をすることができます。
Vwa.Page.getZoom Method を使用するとページのズーム レベルを取得でき、Vwa.Page.setZoom Method を使用するとページのズーム レベルを設定できます。
Vwa.Page.getPosition Method を使用すると表示されているページの位置を取得でき、Vwa.Page.setPosition Method を使用すると表示されているページの位置を設定できます。
Vwa.Page.getId Method は現在表示されているページの ID を取得し、Vwa.Page.getSize Method はレンダリングされたページの高さと幅を取得します。
ShapeCollection オブジェクト
ShapeCollection オブジェクトは Visio Web Access Web パーツのレンダリング領域に現在表示されている Web 図面の、アクティブなページ上での図形オブジェクトのコレクションを示しています。
ShapeCollection オブジェクトのメソッドには、以下が含まれます。
アクティブなページ上での図形の数を返す Vwa.ShapeCollection.getCount Method。
Visio 図形名 (Vwa.ShapeCollection.getItemByName Method)、Web 図面図形 ID (Vwa.ShapeCollection.getItemById Method)、Visio 固有 ID (Vwa.ShapeCollection.getItemByGuid Method)、コレクション内のインデックス位置 (Vwa.ShapeCollection.getItemAtIndex Method) によってコレクション内の固有の図形を取得できるようにする 4 つのメソッド。
Shape オブジェクト
Shape オブジェクトは、アクティブな Web 図面ページ上での単一の図形を示しています。Shape オブジェクトのメソッドは、アクティブなページ上で特定の図形の情報を取得し、その図形の情報を処理できるようにします。
図形情報を提供するメソッドには、Visio の図形の名前を返す Vwa.Shape.getName Method、Web 図面内の図形の ID を返す Vwa.Shape.getId Method、Visio の図形の GUID を返す Vwa.Shape.getGuid Method、図形に関連するハイパーリンクの配列を返す Vwa.Shape.getHyperlinks Method、図形の境界ボックスの位置、高さ、および幅を返す Vwa.Shape.getBounds Method、そして図形に関連する図形データ アイテムの配列を返す Vwa.Shape.getShapeData Method があります。
図形を操作するメソッドには、図形のハイライトを追加あるいは削除する Vwa.Shape.addHighlight Method と Vwa.Shape.removeHighlight Method、そして視覚的図形オーバーレイを追加あるいは削除する Vwa.Shape.addOverlay Method、Vwa.Shape.addPredefinedOverlay Method、および Vwa.Shape.removeOverlay Method があります。
SharePoint 2010 SDK のサンプル
SharePoint 2010 SDK のダウンロード ファイル (SharePoint 2010 Reference: Software Development Kit (英語)) に付属する次の 3 つのサンプル JavaScript ファイルは、Visio Web Access Web パーツのプログラミングに関するベスト プラクティスを示しています。これらの Web パーツは、ユーザーの Web パーツ ページで使用できます。サンプルごとにその使用方法を説明するトピックが、SDK に用意されています。また、各サンプル ファイルには詳細な説明がコメントとして含まれています。これらのサンプルが付属する SharePoint 2010 SDK をダウンロードするには、「SharePoint 2010 Reference: Software Development Kit (英語)」を参照してください。SDK をインストールした後で、サンプルはパス C:\Program Files (x86)\Microsoft SDKs\SharePoint Server 2010\Samples\Visio Services 下に圧縮 (.zip) ファイルとして配置されます。
注釈サンプル ("Annotations")
注釈サンプルは、Web 図面ページに注釈を付けるために、図形オーバーレイを使用する方法と図形ハイライトを使用する方法を示しています。サンプル コードは、コンテンツ エディター Web パーツに 4 つのリスト コントロールを追加し、注釈用の描画パラメーターをそこから選択できるようにします。また、選択したパラメーターを送信して注釈を描画するボタンも追加します。
カスタム エラー メッセージ サンプル ("Custom Error Messages")
カスタム エラー メッセージ サンプルは、Visio Web Access Web パーツを使用して独自の HTML エラー メッセージを表示または非表示にする方法を示しています。このサンプルは、エラー メッセージのタイトルと本文を入力するために使用される 2 つのテキスト ボックスと、エラー メッセージの表示と非表示を行う 2 つのボタンから構成されるユーザー インターフェイスをコード サンプルに提供します。
マウス相互作用サンプル ("Mouse Interaction")
マウス相互作用サンプルは、Visio Web Access の各種のマウス関連イベント用にイベント ハンドラーを宣言する方法と、イベントの発生時にそれらを処理する方法を示しています。このサンプルは、コンテンツ エディター Web パーツで図形の入力、図形の消去、または選択されている図形の変更などのマウス操作が行われると、通知を表示します。