「OfficeJS Snippet Explorerを使って新しいOffice アドインを体験する」で紹介していますが、新しくなったJavaScript API(Word v2 JavaScript API / Excel v2 JavaScript API)ではコードの書き方もシンプルになり、できることもかなり増えました。
今回はWordAPIで新たに追加されたRangeオブジェクトのinsertInlinePictureFromBase64メソッドを使って、ローカルに保存された画像ファイルをWord文書に挿入するコードを紹介します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Sample</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script>
Office.initialize = function(reason){
$(document).ready(function(){
if(Office.context.requirements.isSetSupported("WordApi", 1.2)){
$("#iptImg").change(insertPicture);
}else{
console.log("This code requires Word 2016 or greater.");
}
});
};
function insertPicture(){
if(!this.files.length){return;}
var file = this.files[0];
var fr = new FileReader();
fr.onload = function(event){
var base64 = event.target.result.split(",")[1];
Word.run(function(ctx){
var rng = ctx.document.getSelection();
rng.insertInlinePictureFromBase64(base64, "Start");
return ctx.sync().then(function(){
console.log("done.");
});
}).catch(function(error){
console.log("Error: " + error);
if(error instanceof OfficeExtension.Error){
console.log("Debug info: " + JSON.stringify(error.debugInfo));
}
});
}
fr.readAsDataURL(file);
}
</script>
</head>
<body>
<p><input id="btnTest" type="button" value="Test"></p>
<p><input id="iptImg" type="file"></p>
<p><textarea id="result"></textarea></p>
</body>
</html>
上記コードを実行すると、下図のようにinput type=”file”(iptImg)で選択した画像ファイルがWord文書の選択位置に挿入されます。
上記コードでやっていることは、File APIでローカル画像ファイルをbase64文字列として取得、取得した文字列をinsertInlinePictureFromBase64メソッドに渡して文書に挿入するという、非常にシンプルなものです。
VBAで同じことをやろうと思ったら、
Public Sub Sample()
With Application.FileDialog(msoFileDialogFilePicker)
If .Show Then Selection.InlineShapes.AddPicture .SelectedItems(1)
End With
End Sub
上記のようにほんの数行で出来てしまう事なので、これでもまだ冗長に思うかもしれませんが、以前のOffice アドインに比べたら大きな進歩です。
日々進化しているOffice アドイン、興味がある方は是非お試しください。
参考Webページ
- Deep Dive into Office Word Add-ins
- https://github.com/OfficeDev/TrainingContent/blob/master/O3652/O3652-2%20Deep%20Dive%20in%20Office%20Word%20Add-ins/Lab.md
- Deep Dive into Office Excel Add-ins
- http://dev.office.com/hands-on-labs/1544
- Word アドインのプログラミングの概要
- https://msdn.microsoft.com/ja-jp/library/mt616486.aspx
- Office のホストと API の要件を指定する
- https://msdn.microsoft.com/ja-jp/library/dn535871.aspx
- Office アドインの要件セット
- https://msdn.microsoft.com/ja-jp/library/mt590206.aspx
- Range オブジェクト (JavaScript API for Word)
- https://msdn.microsoft.com/ja-jp/library/mt616492.aspx
この記事へのコメントはありません。