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

⇒下記のリンクをご参照ください。

https://bit.ly/3dYB5Yd relativelayout.hatenablog.com

やっていることは、

短縮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>