Google関連

[Google Apps Script]サイドバーから画像をドキュメントに挿入する(スプレッドシート)

2014/3/24 追記:
文書“の場合の処理も考えてみました。

・[Google Apps Script]サイドバーから画像をドキュメントに挿入する(文書)
//www.ka-net.org/blog/?p=4293

パブリックドメインの画像を検索・ダウンロードできるWebサービス「Pixabay」のAPIを利用して、サイドバー上で入力したキーワードを元にPixabayで検索を行い、ヒットした画像をドキュメントに挿入するスクリプトを考えてみました。

  1. サイドバー上のテキストボックスにキーワードを入力してEnterキーを押します。
  2. GoogleAppsScript_07_01

  3. Pixabayで検索してヒットした画像がサイドバー上に表示されるので、ドキュメントに挿入したい画像をクリックします。
  4. GoogleAppsScript_07_02

  5. 選択しているセルに画像が挿入されます。
  6. GoogleAppsScript_07_03

※ APIを利用するにはユーザー名とAPIキーが必要であるため、事前に http://pixabay.com/ja/accounts/register/ からサインアップして取得する必要があります。

・コード.gs

var ui = SpreadsheetApp.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 sht = SpreadsheetApp.getActiveSheet();
    var cell = sht.getActiveCell();
    sht.insertImage(url, cell.getColumn(), cell.getRow());
}

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

【編集後記】

今回の記事で紹介しているのは、Office 用アプリでいうところの「Bing Image Search」のようなスクリプトです。

最初はOffice 用アプリと同様、HTML側でgetJSONを使ってデータを取得しようとしたのですが、この方法では上手く処理できませんでした。
結局GAS側でUrlFetchApp.fetchでデータを取得し、insertImageで画像を挿入することにしたのですが、今回のようにGAS側とHTML側の処理を上手いこと分ければ、色々と面白いスクリプトが作れそうです。

[Google Apps Script]選択文字列を翻訳する前のページ

田中 亨先生の「なぜ、あなたはVBAをマスターできないのか」を受講(視聴)しました。次のページ

関連記事

  1. 情シス

    [Google Apps Script]メールをemlとして保存する

    今回の記事は「情シスSlack Advent Calendar 201…

  2. Google関連

    QwiklabsでGoogle Cloud Platformを体験しました。

    先日行われたGoogle Cloudのハンズオンセミナー「QWIKLA…

  3. Microsoft Graph

    [Google Apps Script]Office 365 unified APIを使ってメールを…

    久しぶりのGoogle Apps Scriptネタです。今回はGo…

  4. Google関連

    以前のGoogle マップを使う。

    「「新しい Google マップ」正式公開、地図大きく、精緻すぎる3D…

  5. Office関連

    Outlookを使ってGmail送信を行うVBAマクロ

    下記G Suite アップデート ブログにある通り、今年の6月には“安…

コメント

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

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

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

PAGE TOP