Google関連

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

GoogleAppsScript_08_01

[Google Apps Script]サイドバーから画像をドキュメントに挿入する(スプレッドシート)」のコードとの違いは画像挿入部分だけでその他はほとんど同じです。

関連記事

  1. Google関連

    [Google Apps Script]Webアプリケーションを作成する。

    Google Apps Scriptではスプレッドシートや文書上で動く…

  2. Office アドイン

    [Office用アプリ]Google ドライブでアプリを公開する方法

    今回は先日登壇した第一回 Apps for Office 勉強会の中で…

  3. Google関連

    [Google Apps Script]選択文字列を翻訳する

    Google Apps Scriptでドキュメント上で選択している…

  4. Google関連

    [Google Apps Script]OAuth認証(2.0)が必要なWeb APIを利用する。

    前回の記事ではGoogle Apps Scriptを使ってWebアプリ…

  5. リボン関連

    Google TTSで文字列を読み上げるExcelアドイン

    前回の記事で書いたGoogle TTSで文字列を読み上げるマクロ(言語…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Time limit is exhausted. Please reload CAPTCHA.

アーカイブ

おすすめ記事

RapidSSL_SEAL-90x50
  1. Google関連

    [Google Apps Script]選択文字列を翻訳する
  2. 人気記事

    2014年3月の人気記事
  3. リボン関連

    [リボン・カスタマイズ]checkBox要素のチェック状態を動的に設定する。
  4. その他

    mougの過去ログ検索サイト「mougle」を開設しました。
  5. Office関連

    [Excel Services ECMAScript]セルにデータを入力する。
PAGE TOP