先日書いた記事で、OneNote OnlineでOffice アドインが使えるようになったことを紹介しましたが、今回はアドインから画像やHTML、テーブルを挿入してみたいと思います。
マニフェストファイル
<?xml version="1.0" encoding="utf-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp">
<Id>c6212ba7-fffa-45fa-8520-13220959af43</Id>
<Version>1.0</Version>
<ProviderName>kinuasa</ProviderName>
<DefaultLocale>ja-JP</DefaultLocale>
<DisplayName DefaultValue="Sample OneNote Add-in" />
<Description DefaultValue="OneNote用のOffice アドインです。" />
<Hosts>
<Host Name="Notebook" />
</Hosts>
<DefaultSettings>
<SourceLocation DefaultValue="https://your-server/index.html" />
</DefaultSettings>
<Permissions>ReadWriteDocument</Permissions>
</OfficeApp>
index.html
<!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.3.min.js"></script>
<!-- <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script> -->
<script src="https://richapiaddin.azurewebsites.net/App/Office/Office.js"></script>
<script>
Office.initialize = function(reason){}
$(function(){
//HTML挿入
//http://dev.office.com/reference/add-ins/onenote/outline#appendhtmlhtml-string
//http://dev.office.com/docs/add-ins/onenote/onenote-add-ins-page-content#supported-html
$("#btnAppendHtml").click(function(){
OneNote.run(function(context){
var page = context.application.getActivePage();
var outline = page.addOutline(10, 100, "");
return context.sync()
.then(function(){
//img要素挿入
outline.appendHtml('<img src="https://www.ka-net.org/images/logo.jpg" />');
return context.sync();
})
.catch(function(error){
console.log("Error:" + JSON.stringify(error));
});
});
});
//画像挿入
//http://dev.office.com/reference/add-ins/onenote/outline#appendimagebase64encodedimage-string-width-double-height-double
$("#btnAppendImage").click(function(){
OneNote.run(function(context){
var page = context.application.getActivePage();
var outline = page.addOutline(10, 100, "");
return context.sync()
.then(function(){
outline.appendImage(getImageAsBase64());
return context.sync();
})
.catch(function(error){
console.log("Error:" + JSON.stringify(error));
});
});
});
//テーブル挿入
//http://dev.office.com/reference/add-ins/onenote/outline#appendtablerowcount-number-columncount-number-values-string
$("#btnAppendTable").click(function(){
OneNote.run(function(context){
var page = context.application.getActivePage();
var outline = page.addOutline(10, 100, "");
return context.sync()
.then(function(){
//境界非表示
outline.appendTable(2, 2, [["あいうえお", "かきくけこ"], ["さしすせそ", "たちつてと"]]).hideBorder();
return context.sync();
})
.catch(function(error){
console.log("Error:" + JSON.stringify(error));
});
});
});
});
//PNG画像をBase64文字列として取得
function getImageAsBase64(){
var ret = "iVBORw0KGgoAAAANSUhEUgAAAPoAAABQCAYAAAAwa2i1AAAAAXNSR0IArs4c6QAAAARnQU1BAACx";
ret += "jwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAABW3SURBVHhe7Z1dkBXFFYB989HKg+WD5RMPlkX5";
ret += "wgMP+mBpVYqYVDQpUiaSECshatBKjD/EgCYR3fxJYmJiJImJkASiSRBSJBEkFioKpkAQFGRh+TG4";
ret += "/LiIK6sLKmhnvotn6enbM9M90zN372531S1dbt+enp75+pw+5/TpM1QscQTiCIz5EThjzN9hvME4";
ret += "AnEEVAQ9vgRxBMbBCETQx8FDjrcYRyCCHt+BOALjYAQi6OPgIcdbjCPQMdAH3nxPrdv6lvr3usPq";
ret += "jysOqF/87TX1vT/sUd/4+U71xbu3tT43/GyHuvN3u9XPHt3XqrP8ucPquS2Dqn/gePc9uZtuUuqM";
ret += "ZLj1T/fdRexxl45Ao6AD6J+fOKi+9cud6uM3b670uX5ebwv+vteGu2PoXUF/6KH2CcGcIFz+pp1Y";
ret += "4gh8NAK1gw6IC/59QH3lh9srgZ03MSD9H1zWr7btfWf0PtgI+uh9NuOgZ7WBjvSeu2BvbXBngX/r";
ret += "A32jU8pH0McBTqP3FoOD/sbR99WvlrymptxSTTWvqtr/6M+vdm4tv2tXOfWbyaDDqvszzzyjzj77";
ret += "bNXT06OOH2/OFnJTcu9nJEsS/htL+BEIBvq773/QWjN/ZvZLjUvxrEnhk7dtaan0Q8Mnwo9cXotl";
ret += "QWftffRoumUb+KtXp+vYrldyjQ7cs2bNakF35plnJvPOQ+rEifrHrwzo8+bNU9OmTVMDAwPNPt8u";
ret += "vFoQ0PfsP6a+3PPKqAHcBP+q725VL+4cau7xlAV9+vT2PjYMunRgw4YN6qyzzmoBP2HCBMXfVcrq";
ret += "ZHKirSofJh0KE49MRrS3YMGCKl0bF7+tDDousk/fvsUZ8m/+Yqc6dOS93M9Tmwad2zOh/ufaN9T8";
ret += "ZfvVp2al+8RSAldeI6Us6I8/PmpApyNI96uuumoEzirSMxToSO8pU6aMaBxr1qxp5JF2+0UqgY6r";
ret += "zHctfduvk/VrQdnc97Z3u/Tjxvt2jrR8ePB9Ne8v+9Qnbk0Dj7/+xMkPirpQ7/fbtrWv4c85B1E1";
ret += "qkCXzixatGgE9jlz5tQyNi6qO1CLljFp0qSosns8iVKgDx8/qXr++GopGOsEnQnCLPsPv6vuXpi2";
ret += "/mOZH3y7/nVn5nO444520LPW1A2p7rrEtfV706ZN6oorrqhtvZ4HOprFzJkzRyab+++/v7Z+eLDT";
ret += "VVW9QQdyotd8JbnUrwv02+fvzh34Xf3HFMsG6Qd+fTwEjZf+fpVYudKgI81NI5x0LDE4tUXUbdmS";
ret += "7nYAY1wR6HWPUxboK1asSNkK9uzZU3dXxmT73qCXleR1gw7IeeXkBx+qr/4oHbRDhF7javwNN7SD";
ret += "++ijp7q+apVSqMa6Cm/zvwO2XkY56BdffHElI5yrAW+XOS5jEtlyN+UFepk1uSn5P/+9ra21c95n";
ret += "zm93e2kMP170v9Tdv/VOu1r+j2cPW9skjr6xkvio26TzZZeduvyRI0qdd96p7xMrt2IdT4mgO08S";
ret += "EfTsN9kZdKzrNnX9c3dubTN45an1QMxaOu/z2DMDzqBjbGMdLmXvgeMti/sDj/WrI0OngH/72ElF";
ret += "P7P6tWxNA35YHWSJVUeF37HDDjTSnYLLzYxtN9X8Dkr0pUuXqokTJ6rdu/OXTi6TKRZ1LPviw8fw";
ret += "12TQjksfu7WOE+j4ybNcaEhm3FmuUviaH2wPKtEBWi93PrRnBGiAX/D4wRb0eZMPrrcXeo1AldBP";
ret += "9Morsw1wQK3DrEeHJWpv4a63DoI+d+7cFpjTbTEAjmMIzEBNgA5tVXHjOV5y3FUrBJ2It7xgGEAH";
ret += "IgAG+K//dEcuVNQvKq7utSu+89KI1KbNY+9+oG7+ZZ+zNqDDP/WOl+szzs2fbw+JTVxE6vnn08Y5";
ret += "1HddYpuGO8A3iyfoQEmY69q1a0daKmuM60+MiwLoNlluFD3gj74HcCzo8vtLLrlE9fX1Of46VvMZ";
ret += "gULQCWvNk4Y66Gtfeqt17SfWH1FXz91m/R1rdCzveZ+iyUL686eVh6z3SsDNl+7xj9S79y/ptb7P";
ret += "QGbW9Yld11V5GjyU3J+ptmPMqwj65MmTW5Jz/fr1lUGngTsSdyHtzZgxw2nIUNGJpRfAXY1ttnpx";
ret += "Xe405PnJIXE/FcWuAzpraqzaennvxIdq8apDCqmrTxShJDprbtbeWYXr/275fi/pjgrPMiVYwZru";
ret += "sndc6si6XDpgM96hHVQEXYDZu3dvENBZn0ubeWv1zZs3q6lTpzob11wmgAi629uaK9HZhVbkL88C";
ret += "FwhR5c3INMDnN6j6tI30Fq2Av1G9Xdb7TC5SmGSAWoxv8u/3/724/+b9kdEmSLH5v4ugR5XX/cQ2";
ret += "ld/c0EJnPVR3wBBjl36fZVV3aQNpTrtId70MDg62NsawVBBwdUleBlS5B9or8/sgz7fLGskEnf3k";
ret += "LltNiTozC6qzqO4YxHRVHJWaInCL+i3AofYXrdGZJJDYUsR1xrX+8K8DLUmP9d2cZIomLfm+0gYY";
ret += "tnYm8eGFktxce8skgGtNyuWXt7eDOl9Boq9KtAYAuRLjoFaqgr5u3bqRCeSoZmOQCYBrEr4K9KzN";
ret += "BfoyoEbQ/WeZTNBdk0bokW64uYhQ04ECejaxyCaTEKAzGUjBAMe6X7/mZ+e83BYc4wo59chVV7rc";
ret += "e287nIB/7bXpf8eohqpuAo+6TiGCztQAbIY46hIpZ9bNCKllayeQYS0PCTptnX/++a22iY2XwgSA";
ret += "ke3pp59Oha1G0Eu/YaV+aAWd9E+uYAA60hU3lg6z+K2JRkO1RnLTZlXQ0Q5MewBGQFkKuPa7qB5x";
ret += "A6UKUW0EwQAeEMtLbwa+CLRYqiVQRndR2Yx4LAdsBXXeEXQkOZAtX768EuhIVST01VdfPdIOFnTa";
ret += "vhxNpKC4rL9d6pTRCIr6Nha/t4JOjrciEOR7wNUhQ11m59iTL7w50sYjT77emgyoWxX0/26z+7uB";
ret += "ny2qpnR3vQ+zHhlqSheCYBIpllpvZ4HORQimSTaMtKQ4hclC4NcBznJfmX54fvPww23dR6W2GeKo";
ret += "6Ku6i/pMeKsU3GsEz8i+8bzxc4HYpU4E3e0ttYJeJpEjhi9Zl/P/FPFpI+lR31HjmQheeXW41Brd";
ret += "3BCD2m6W9duHnCepvEmAAKGgcfB5oJs3gbQ1JXSelHTZ4abBjIptlhCgu71yp2pF1d1ntKrXbQMd";
ret += "I5yvFGRNTHy5njACmHWDGBFrFGBFnSc+nev4GONe3nM6yyv2ACz4LBl0Nxt70n37n1U/aLScK+hZ";
ret += "0tyWlEKevy0eXtb62jsihjFzfV5GopNbDlh1ie7zOkbQfUaret020MtuXJGNJWKMAzjUaVxsAhJr";
ret += "aXaZIdVlPe8K+vcf3pu6W90lx0TD8uDx548Eg5w+k6QiWHEF3eZSu/DC/G4goU0NwLKTi7h0DGN6";
ret += "oIw07CvRWeNH0IO9HbU31AZ6lcMVNu4YUvtef3fErcWaGfVaVHr+y9+6f9sFdCYG2pXCBFI21NVH";
ret += "2n/hrq3hHoAL6KztbW43LYIt1SGk/8KFdleeZ0JH4Bcpy4Rw+LA97dbQ0JDq7e1VFyaTD/UvvfTS";
ret += "UmPksv52qRPX6G7DnwKdY5J8QDDrin8bXzbfIWkJYtFVeiQ8aj7fuaruWUE5GPzKhLr63OPLu9qz";
ret += "1rgNrVGrCHTb7jakdJKRtVV88tAlIa6+hYSL5yQJMFzg0uugCZQpvtfJqh9Bdxv9FOhZW1F9wEBC";
ret += "61LcVOmRzqjvEuRSJNFR8bHiZxUJtfXpo0/dYFtY80DXXXK6Cq5vcCEIpSiyTr4vmRud7C2EqF5w";
ret += "wQWZwBPhxvfUq5IZNq7R3QANVSsFOllSfSCw1QVM1GxdimNE01V6Ujqhfl97b2+hMY7QVr2wFjdD";
ret += "XbOSSlS9F36PqzFIyQIdyNkMYkJsbnChE1nRdOZvs1T9IDcSG+nGEUiBXrRTzRUccYOJYU6CZrCQ";
ret += "Sxus31nT50l01Hvdoi6Th+wz5zs+sgxw7Z9PvWA72vIkui0u3qYS2/amm5DbNr1045sZ+xx0BFKg";
ret += "Y2X2gSCvLpIXmKUOQCPVJWIOOHG/mbHtrO8lwwwTBt/Lx4x+ow094WOovuvtzP5NoE0uRWt0HXbJ";
ret += "IWc+alu+OUBPItQSXVolunTQlyM2NnZGIAU655PXAUs3t8nxzEFKEehcBNjjqSNBhjs2kh6BFOhV";
ret += "0jgLzH9bPVB4EkvRSS1lvjdzt4eaXDjOKZY4At0+AinQOWe8KiD6zrImB0cPoKl6D+bvm7yPeK04";
ret += "AnWMQAp0AkSqQhJBr+MxxTbjCFQbgRTo7MOuCjqhqhjemv645pnzvT+SRsYSR6DbRyAFOmmUfEEY";
ret += "6/W/9pPt3f6MY//jCKSTQ3JqyVgH1/f+vv1g8emv4+49IqkkLr0kQk5dc41S99yj1Isvtg+DSy47";
ret += "W52SYbXj7jl43HAtATO679zHgm7bX553L3Ua4OQeggXMeDyUUV/Vlp3Wlv0mgj5qHmUK9OXPVQ+B";
ret += "1SWmGb4a+q6b2MH2+38GCoENffOdbI/sNWZEXlYwj2t8flG9rGOlOzkOXXTtFOjPbRkMqrrbMsSG";
ret += "HJusQyJ81fO8+kueej1kl8dGWzaobfAXwevzfQS90ruTAr1Mdpk8SEg+UVdhU0xIoLPaCpplpq7B";
ret += "aLpdznPXISXxhS1BpQ/IRXUj6JWeclviCUI+QwFEXHtdhbj5UP3MagfXWtC8cXUNRpPt2lJLkzo6";
ret += "gt7kU/C+VhvoPhlgXUDzNbC53kGoJJB59xANcZan4ZiIsvXLaIxzfZ1rr9cGuk9OdxfQ2aFWR9F3";
ret += "xrn0o0wdbBaxGCNgHv/MHnnPtFWdHFNSUVfJdWfrO2muJZHGeUmyELL1jLZiTfccIuZdwMrKw151";
ret += "ICRdVRmAXX7zydu2KI6MjkUbAdvprpLNpm7VPeuUGs8HVAfocpqs5NF71NhmfFMyRj6ps1zy4nve";
ret += "tv001QeX9Qdb/5L9pY5S1241mQTYshuLMQK202GTI5daZZyCfiTJ9cehkeTb40w5JDp/8+9SRi3o";
ret += "JER0kXouderypYfM3267j9Ub34ycmyNgHvr4sY8ptfMjz0qHQCevvI+0LFs3S8rOSpJ36kdcSdrs";
ret += "yziWy7PIhNCYRKd/tz7QFwT2unzpkqnGZbLxrfPlnleitd18SW2HPuISE7eXDXTPF71M9U6CLimy";
ret += "zZNpZXnAgZY+pSOghzLK1eFLJ0+cL7w+9aMRzvJ6JgcoWrPQFoHukueuyIfumNW2jvV3FqicY4ea";
ret += "zkdX06U+p+FMmzZNUU/65apNNCrR6TAHDfoAYqtbhy+ddNFV+5X1ew6wiMUyArbTYFwk+hgFHenL";
ret += "WnwHh24UlFEPOpFyWJ+rQhXal87RTlX7lPX7YAc2FD39bvo+b/09DiW6nDGfZ2QrcyZdR1R3eQ9D";
ret += "WOBD+9LJS1cH6NHSnjH7mEY4XdX2BV0PZdXb0d1n5sQyilR3VHHOr8Popp9XZ6rlXQf60PAJRYLE";
ret += "KmCF9qU/8Fg495/cF8cko8HEYoyALeR1HIOe9X5knTxT1VhY9sgrs5/WgBmz0os7h9SUWzaXhj20";
ret += "L50jmKtMPLbf/mfDab9nhF0bgenT84+C8pXoRYY32/eOEv3hZAcdwLF2JlqtyTImQGfAqhzXFNqX";
ret += "zlFOIUEPduxSk29WE9cqkuajzBi3cePGWnzqLgc5ljlLTqR9KKmd90o4SXRpoOxJLqF96XK2egjY";
ret += "yZMXd6hlvCL33ZeW5raz37Ikuqy5G7S6cxdYuDkI0tWV5VLPBJ2/XX6HcY3y7LPPqosuuqjNDZcH";
ret += "Or8N6WbzAh0gygTShPSlc8BiCMBp4ys/3K6Gj59sQjZ27zUWLToNu+2MOF/QazTGNTXIvqCvWrWq";
ret += "NTEQLadveBHQiZWXwvcSbXdWkpdv9+4wR4J5gU5nBt8+oYgc84EtpC/9lVeHva6d1U8MjNH45ojG";
ret += "pk1KXX99/rZTMw4+S6J3EHSOhUay1qEqF6nu4joTKc/I64Y6gCZWfsqUKa1JYcKECWpgYMDxARVX";
ret += "8wadJt84+r4isMQH9lC+9CdfeNPrurY+Iskj5MUvR1uNvP3l5j51MaCZqnsHQRfYXANdfEaoCHQk";
ret += "9cSJE9WKFStGmtVBnzRpUivKjnZmzpzZgj5kKQU6HUCN90kPHcqXvnjVoUqgsyaP6nrJVygP9GRz";
ret += "RypElqwzp8RWvtXexQrvaHXX70pXr2WNDWyoz8DEltKsfeN9fX3J4bRTM9fIw8PDSabrC5Qe426C";
ret += "Pj3xViCV84qAfkOSg0+8Baj5dZTSoEtnlq0ZcHK9hfKl3/fX8rnnsa5Hw1uF1ygPdNMNJ5K7AdAB";
ret += "FgPc5MmT1SH2zCfFBjr/joqMRAcsXY3WR0UPhMlS87kW7UgxQT8/CRk2N7tQl+UDATf9ySYh3RjH";
ret += "xEAbIQ1w+j1VBp3GSKBIfjUfVb7JugTDRD95BcDlp3mgm7HwcghDA6CvS/bEAwl7wk939bRl3LSa";
ret += "Ay8bTg4cyE7lLWo+bdo2rYgU3sthFknRQSd6jr/13Wust+fMmdP6d9bhtKmDzt+iuvvuenN5skFA";
ret += "50Ks28mxViWwpg74CWuN63GXV8GhThboyYvdtrONupQG1uiS4UWX0FkSPesugR+t4B5OnUkKWoKA";
ret += "Z9tbPn/+/Ba0omrroMv2Vb4TwEWL6OnpGVkymO41NshIPdbpIVNSBQNdBnDP/mNqNJzhhrEwblBx";
ret += "gNenShbo69enQdcka92gAwNSF9CQ7C4S3XbLoq7rk4UAa1Opgfjcc89VjzzySJtEX7ZsWas/SHu2";
ret += "q/L/TBobNmxIXdrmR9eXDRjo9u3b5/OEMusGB12uRNhsiNNZfaU8rr+4nzzIu9HeSBboiXRLSXTW";
ret += "61LKSPSFC9Pt5RjjFiV+flHbdQnoK9FFQpvrdgEVSZvn086yujNZoLLbrOhZATNMWCLZUfNDlNpA";
ret += "l84BHfvaWSf7Qutan620qOikf4rGthCvRUYbWaCbmWH15Ig+oGcd65QBOmthkeamEUsHHYgHBwet";
ret += "N8W/9/b2jqjpJuisnZHcS5cuTcHK7w4ePNj67cqVK0fW6Nddd13LIo/FPcvYR0ck1xwThM3ghyTH";
ret += "aGezD5R5wrWDLp0CQIx2uOS+cFe13XBMABj/sAkwkcRsrWUefYnf2EC3RcuRdqqMRDc1A3G94bqz";
ret += "FKQkgOOfBnqzyBrbJVxV6ixZsqRwYLCou7Rpgi5ag/nbUNFveR1vDHSzE6yfcc3h8gLY2b/ZrTgl";
ret += "Rt8SC8ycT87RxdThwEPOQmPCiJK78H0MX8EGOnDiSpM4+Bkz0tf1kejLl9t97tgAShSkIv5wpGse";
ret += "mEhs3GUsA1wKbjPCU5HcfG688UY1e/ZstXjx4pZ0R8oj7c1CGmi9H7RhpoZ2uX6ZOh0DvUxn4286";
ret += "PAJ57jXCNROXVWIRKw+6adRLAEzM2h2+6bFx+Qj62HiO8S7iCOSOQAQ9viBxBMbBCETQx8FDjrcY";
ret += "R+D/JDbWUBz6Y3oAAAAASUVORK5CYII=";
return ret;
}
</script>
</head>
<body>
<h4>OneNote-Add-in Sample</h4>
<p>
<input id="btnAppendHtml" type="button" value="appendHtml">
<input id="btnAppendImage" type="button" value="appendImage">
<input id="btnAppendTable" type="button" value="appendTable">
</p>
</body>
</html>
実行画面
Outlineオブジェクトの「appendHtml」「appendImage」「appendTable」メソッドを使いましたが、パラメーターとサンプルコートがリファレンスに載っているので、それを見れば使い方がわかります。
これらのメソッドを呼び出すにあたり、まずはOneNoteのオブジェクト構造を把握する必要があるのですが、「OneNote JavaScript API programming overview (Preview)」にある図を見ると一発で分かります。
シンプルな構成ですね！
各オブジェクトの説明はリファレンスに記載されているので、OneNote用Office アドインの開発に興味がある方は、そちらを是非ご参照ください。
この記事へのコメントはありません。