[Google Apps Script]サイドバーから画像をドキュメントに挿入する(文書)

ホーム
Google関連
[Google Apps Script]サイドバーから画像をドキュメントに挿入する(文書)

2014.03.24

[Google Apps Script]サイドバーから画像をドキュメントに挿入する(文書)

「[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>