Androidのメモとか

ポキオの日記です。今日も遅延してない。

Google Photosにアップした写真を簡単にブログに貼り付けるためのツールをGoogle Apps Scriptで書いた

スポンサードリンク

GASってWebページも作れるんですね!

Google Apps Script Google Photo

オレオレツールを作りました

今まで、ブログで使っている写真はすべてGoogle Photosにアップした写真を某外部ツールを使って貼り付けていました。ただ、そのツールのサポートが終了したので、代替ツールを作ってみました。

Google Apps Script Google Photo

Google Photos自体には、もともとアップした写真をシェアする機能があって、こんな感じで短縮URLを取得してシェアできます。ただ、このURLを開くと、画像に直接アクセスできるわけではなく、余計なUIが含まれたページに遷移してしまいます。そこで、GASを使って、ターゲットの写真のURLを取得しつつ、ブログで使いやすいように、Markdown記法とHTML記法に変換して表示するアプリを作りました。

これです

GASへの直リンクです・・・。

https://script.google.com/macros/s/AKfycbybqEiIEQBipudtc7o_pmVoJVDyTImGsaVH1U-okgPRbixxLY8/exec

やっていることは、

短縮URLにアクセス→HTMLからog:imageを取得して整形→Markdown記法とHTML記法に変換

こういう感じ。クソコードを最後に貼っていますのでご査収ください。CORSの関係上、めんどくさいのでGASでやってますが、どうにかしてGitHub Pagesでも実装したい…。

使い方

Google Apps Script Google Photo

Google Photosで任意の写真へのリンクを取得して、先程のツールに食わせます。オプションとして、画像サイズ・代替テキスト・画像タイトルを指定できます。

Google Apps Script Google Photo

変換ボタンを押すと、画像への直リンクアドレスと、Markdown記法の文字列、HTML記法の文字列を取得できます。Google Photos以外のアドレスを指定しちゃダメです。どうなるかわかりません(笑)

クソコードはこちら

GS部分。

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("index");
}

function getOgImage(url) {
  var html = UrlFetchApp.fetch(url).getContentText();
  var ogImage = html.match(/<meta property="og:image".*?>/g)[0].match(/http.*?=/g)[0].replace("=","");
  return ogImage;
}

HTML部分。

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <script>
        function convert() {
           google.script.run
           .withSuccessHandler( onSuccess )
           .withFailureHandler( onFailure )
           .getOgImage(document.getElementsByName("Url")[0].value);
        }
        
        function onSuccess(address){
           var result = address;
           
           if(document.getElementsByName("Size")[0].value){
              result += "=s" + document.getElementsByName("Size")[0].value;
           }else{
              result += "=s0";
           }
           
           setAddressResult(result);
           setMarkdownResult(result);
           setHtmlResult(result);
        }
        
        function onFailure(){
           document.getElementsByName("Result")[0].value = "failed";
        }
        
        function setAddressResult(result){
           document.getElementsByName("Result")[0].value = result;
        }
        
        function setMarkdownResult(result){
           var markdownResult = "![" + document.getElementsByName("Alt")[0].value + "](" + result + " \"" + document.getElementsByName("Title")[0].value + "\")";
           document.getElementsByName("ResultMarkdown")[0].value = markdownResult;
        }
        
        function setHtmlResult(result){
           var htmlResult = "<img src=\"" + result + "\" alt=\"" + document.getElementsByName("Alt")[0].value + "\" title=\"" + document.getElementsByName("Title")[0].value + "\">";
           document.getElementsByName("ResultHtml")[0].value = htmlResult;
        }
    </script>
    <style>
        h2 {
            border-bottom: solid 2px black;
            font-family: sans-serif;
        }

        h3 {
            font-family: sans-serif;
        }

        input[type="text"],
        input[type="number"],
        textarea {
            padding: 0.8em;
            outline: none;
            border: 1px solid #DDD;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            font-size: 16px;
            width: 95%;
            font-family: sans-serif;
        }

        textarea {
            width: 95%;
            font-family: sans-serif;
        }

        input[type="button"],
        input[type="reset"],
        button {
            border-radius: 0;
            background: -moz-linear-gradient(top, #FFF 0%, #EEE);
            background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
            border: 1px solid #DDD;
            color: #111;
            padding: 10px 30px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            font-family: sans-serif;
        }

        button:hover {
            background: -moz-linear-gradient(top, #EFEFEF 0%, #EEE);
            background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#EEE));
            font-family: sans-serif;
        }
    </style>
</head>

<body>
    <form name="Form">
        <h2>変換したいURLを入力してください</h2>
        <h3>URL</h3>
        <input type="text" name="Url">
        <h3>サイズ(オプション)</h3>
        <input type="number" name="Size">
        <h3>代替テキスト(オプション)</h3>
        <input type="text" name="Alt">
        <h3>画像タイトル(オプション)</h3>
        <input type="text" name="Title">
        <br/>
        <center>
            <input type="button" name="Convert" value="変換" onclick="convert()">
            <input type="reset" name="Reset" value="リセット">
        </center>
        <br/>
        <h2>結果</h2>
        <h3>アドレス</h3>
        <textarea name="Result" readonly></textarea>
        <h3>Markdown</h3>
        <textarea name="ResultMarkdown" readonly></textarea>
        <h3>HTML</h3>
        <textarea name="ResultHtml" readonly></textarea>
    </form>
</body>

</html>

ご覧の通り、フロントエンドエンジニアリングがさっぱりなので、ご了承ください・・・。だれかオシャレなデザインにしてください頼む。

「Androidのメモとか」は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

このブログは個人的なメモ書きであったり、考えを書く場所であります。執筆者の所属する団体や企業のコメントや意向とは無関係であります。また、このブログは必ずしも正しいことが書かれているとは限らず、誤字脱字や意図せず誤った情報を載せる場合がありえます。それが原因で読者が不利益を被ったとしても、執筆者はいかなる責任も負いません。ありがとうございます。