Office関連

Excel Services JavaScript APIを試してみました(1)

前回の記事で紹介した「ExcelMashup.com」、このサイトによるとSkyDrive上にアップしたExcelファイルをJavaScript(Excel Services JavaScript API)で弄ることができるとのこと。

ExcelMashup.comに書かれた手順に沿って、早速試してみました。

Get started creating your first mash-up」によると、

1. SkyDriveにサインアップ

2. ワークブックを埋め込む(埋め込み用のJavaScriptコードを取得する)
3. Excel Services JavaScript Libraryを使ってマッシュアップ作成

といった流れのようです。
手順1.については問題無し。2.についても、以前に書いた記事「Excel Web Appのブック埋め込みを試してみました。」の手順通りにコードを取得しました(ただし今回は「埋め込みコード」ではなく「JavaScript」コードの方を使用)。

早速取得したコードをブログに貼り付けてみます。

<div id="myExcelDiv" style="width: 402px; height: 346px"></div>
<script type="text/javascript" src="http://r.office.microsoft.com/r/rlidExcelWLJS?v=1&kip=1"></script>
<script type="text/javascript">
	/*
	 * This code uses the Microsoft Office Excel Javascript object model to programmatically insert the
	 * Excel Web App into a div with id=myExcelDiv. The full API is documented at
	 * http://msdn.microsoft.com/en-us/library/hh315812.aspx. There you can find out how to programmatically get
	 * values from your Excel file and how to use the rest of the object model. 
	 */

	// Use this file token to reference Test02.xlsx in Excel's APIs
	var fileToken = "SD92A165759188B352!260/-7880906317294423214/t=0&s=0&v=!ADQMUMOaugnlAio";

	// run the Excel load handler on page load
	if (window.attachEvent) {
		window.attachEvent("onload", loadEwaOnPageLoad);
	} else {
		window.addEventListener("DOMContentLoaded", loadEwaOnPageLoad, false);
	}

	function loadEwaOnPageLoad() {
		var props = {
			uiOptions: {
				showGridlines: false,
				showRowColumnHeaders: false,
				selectedCell: "'Sheet1'!A1"
			},
			interactivityOptions: { }
		};

		Ewa.EwaControl.loadEwaAsync(fileToken, "myExcelDiv", props, onEwaLoaded);
	}

	function onEwaLoaded(result) {
		/*
		 * Add code here to interact with the embedded Excel web app.
		 * Find out more at http://msdn.microsoft.com/en-us/library/hh315812.aspx.
		 */
	}
</script>

「選択したファイルが見つかりませんでした。ファイルの名前と場所が正しいことを確認してください。」

「ファイルの名前が変更されていないこと、移動または削除されていないことを確認してください。」

あれ?何故か上手くいかないようです。
原因を考えてみたところ思い当たるのが一点、ファイルの共有設定をしていませんでした。
早速SkyDriveでファイルの共有設定(共有メニューから公開用リンクの取得)をしてみます。

これで共有設定が終わり、ファイルが公開されるようになりました。
改めてコードを貼り付けなおしてみます。

ところが再び、

「選択したファイルが見つかりませんでした。ファイルの名前と場所が正しいことを確認してください。」

「ファイルの名前が変更されていないこと、移動または削除されていないことを確認してください。」

上手くいきません。

Excel Web Appの画面自体は表示されているのでJavaScriptが動いていない、ということは無さそうです。
となるとコード自体に問題があるわけですが、怪しいのは「fileToken」。
このfileTokenでファイル指定をしているのは間違い有りません。

var fileToken = "SD92A165759188B352!260/-7880906317294423214/t=0&s=0&v=!ADQMUMOaugnlAio";

特に気になるのがGETパラメータのようなこの部分、「t=0&s=0&v=!ADQMUMOaugnlAio」。
試しに削ってみました。

<div id="myExcelDiv" style="width: 402px; height: 346px"></div>
<script type="text/javascript" src="http://r.office.microsoft.com/r/rlidExcelWLJS?v=1&kip=1"></script>
<script type="text/javascript">
	/*
	 * This code uses the Microsoft Office Excel Javascript object model to programmatically insert the
	 * Excel Web App into a div with id=myExcelDiv. The full API is documented at
	 * http://msdn.microsoft.com/en-us/library/hh315812.aspx. There you can find out how to programmatically get
	 * values from your Excel file and how to use the rest of the object model. 
	 */

	// Use this file token to reference Test02.xlsx in Excel's APIs
	var fileToken = "SD92A165759188B352!260/-7880906317294423214/";

	// run the Excel load handler on page load
	if (window.attachEvent) {
		window.attachEvent("onload", loadEwaOnPageLoad);
	} else {
		window.addEventListener("DOMContentLoaded", loadEwaOnPageLoad, false);
	}

	function loadEwaOnPageLoad() {
		var props = {
			uiOptions: {
				showGridlines: false,
				showRowColumnHeaders: false,
				selectedCell: "'Sheet1'!A1"
			},
			interactivityOptions: { }
		};

		Ewa.EwaControl.loadEwaAsync(fileToken, "myExcelDiv", props, onEwaLoaded);
	}

	function onEwaLoaded(result) {
		/*
		 * Add code here to interact with the embedded Excel web app.
		 * Find out more at http://msdn.microsoft.com/en-us/library/hh315812.aspx.
		 */
	}
</script>

上記コードを貼り付けると、ようやく目的のワークブックが表示されました。


対処法としてこれで合っているのかどうかは分かりませんが、とりあえず私の環境(WordPress)では、

・共有設定でファイルを公開する
・fileTokenのGETパラメータ(?)部分を削る

この2点が必要なようです。

ここまで来るのに大分時間が掛かりましたが、これでようやく次に進めます。

Excel Mashupでリッチでインタラクティブなアプリケーションを!前のページ

Excel Services JavaScript APIを試してみました(2)次のページ

関連記事

  1. Office アドイン

    OfficeJS Snippet Explorerを使って新しいOffice アドインを体験する。

    前回の記事と打って変わって元のOffice アドインの記事に戻ります(…

  2. Office関連

    オデッセイ コミュニケーションズ主催のWord活用無料セミナーに参加しました。

    Club Microsoft会員限定、オデッセイ コミュニケーションズ…

  3. Office関連

    Slackのカスタム絵文字を一括作成するVBAマクロ

    在宅勤務で使うビジネスチャットサービスとして注目されている「Slack…

  4. Office関連

    YouTube動画挿入アドイン for PowerPoint

    前回の記事でPowerPoint 2013でYouTubeの動画が挿入…

  5. Office アドイン

    Office用アプリ(apps for Office)の概要と開発方法

    当ブログでもカテゴリー:JavaScript API for Offi…

  6. Office関連

    クイックアクセスツールバーから履歴を表示するWordテンプレート

    Word MVPの新田さんのブログで「【Word 2013】クイックア…

コメント

  1. この記事へのコメントはありません。

Time limit is exhausted. Please reload CAPTCHA.

Translate

Chinese (Simplified)Chinese (Traditional)EnglishFrenchGermanJapaneseKoreanRussianSpanish

最近の記事

アーカイブ

PAGE TOP