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点が必要なようです。

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

関連記事

  1. Office関連

    住所から郵便番号を取得するVBAマクロ

    「住所から郵便番号 VBA」といったキーワード検索でのアクセスがあった…

  2. Office関連

    Word 2013のアクセス キー一覧[PDF]

    前回の記事でWord 2013のアクセス キーをまとめたものを公開しま…

  3. Office関連

    PHPWordを使ってPHPからWordファイルを出力してみる。

    最近オトカドールやルミティアジュエルやらの記事ばかり書いていますが、今…

  4. アイコン一覧

    Office 365アイコン(imageMso)一覧(T)

    Office 365のデスクトップ版Officeアプリケーション(Wo…

  5. Office関連

    Excelを使わずにCSVからExcelファイルに変換するPowerShellコード

    CSVファイルからExcelファイルに変換する処理を自動化したい、Ex…

  6. Office関連

    PDFのしおり数を取得するVBAマクロ

    「VBA Acrobat しおり数」といったキーワード検索でのアクセス…

コメント

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

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP