先日書いた記事で、OneNote OnlineでOffice アドインが使えるようになったことを紹介しましたが、今回はアドインから画像やHTML、テーブルを挿入してみたいと思います。
マニフェストファイル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <? 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 > </ DefaultSettings > < Permissions >ReadWriteDocument</ Permissions > </ OfficeApp > |
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 | <!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <meta http-equiv= "X-UA-Compatible" content= "IE=Edge" > <title>Sample</title> <script> Office.initialize = function (reason){} $( function (){ //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要素挿入 return context.sync(); }) . catch ( function (error){ console.log( "Error:" + JSON.stringify(error)); }); }); }); //画像挿入 $( "#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)); }); }); }); //テーブル挿入 $( "#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 アドインの開発に興味がある方は、そちらを是非ご参照ください。
この記事へのコメントはありません。