「[Google Apps Script]サイドバーから画像をドキュメントに挿入する(スプレッドシート)」では、スプレッドシート上に画像を挿入するスクリプトを紹介しましたが、今回は文書の場合の処理を考えてみます。
・コード.gs
var ui = DocumentApp.getUi();
var html = HtmlService.createHtmlOutputFromFile('Pixabay').setTitle('Pixabayから画像を挿入').setWidth(300);
function onOpen(e){
ui.showSidebar(html);
}
function searchPixabayPhoto(txt){
var content = '';
var user = ''; //Pixabayのユーザー名をここに入力
var key = ''; //PixabayのAPIキーをここに入力
var url = 'http://pixabay.com/api/?username=' + user + '&key=' + key + '&lang=ja&image_type=all&orientation=all&order=popular&search_term=' + encodeURIComponent(txt);
var res = UrlFetchApp.fetch(url);
var data = JSON.parse(res.getContentText());
if(parseFloat(data.totalHits) < 1){
content = '<h3>写真が見つかりませんでした。</h3>';
}else{
content = '<ol>';
data.hits.forEach(function(item){
content += '<li><img src="' + item.previewURL + '" alt="' + item.webformatURL + '" title="クリックすると画像を挿入します。"><ul><li><a href="' + item.pageURL + '" target="_blank" title="クリックすると写真のページを開きます。">PageURL</a></li></ul></li>';
});
content += '</ol>';
}
html.append(content);
ui.showSidebar(html); //サイドバー再描画
}
function insertPixabayPhoto(url){
var dat = UrlFetchApp.fetch(url);
DocumentApp.getActiveDocument().getBody().insertImage(0, dat.getBlob());
}
・Pixabay.html
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<style>
#main{padding:20px;}
img:hover{cursor:pointer;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$("#q").keypress(function(e){
switch(e.which){
case 13: //Enterキー入力時の処理
google.script.run.searchPixabayPhoto($(this).val());
break;
}
});
$("img").click(function(){
google.script.run.insertPixabayPhoto($(this).attr("alt"));
});
});
</script>
</head>
<body>
<div id="main">
<input id="q" type="text" title="キーワード入力後Enterキーを押してください。">
</div>
</body>
</html>
「[Google Apps Script]サイドバーから画像をドキュメントに挿入する(スプレッドシート)」のコードとの違いは画像挿入部分だけでその他はほとんど同じです。
この記事へのコメントはありません。