GASってWebページも作れるんですね!
オレオレツールを作りました
今まで、ブログで使っている写真はすべてGoogle Photosにアップした写真を某外部ツールを使って貼り付けていました。ただ、そのツールのサポートが終了したので、代替ツールを作ってみました。
Google Photos自体には、もともとアップした写真をシェアする機能があって、こんな感じで短縮URLを取得してシェアできます。ただ、このURLを開くと、画像に直接アクセスできるわけではなく、余計なUIが含まれたページに遷移してしまいます。そこで、GASを使って、ターゲットの写真のURLを取得しつつ、ブログで使いやすいように、Markdown記法とHTML記法に変換して表示するアプリを作りました。
これです
GASへの直リンクです・・・。
https://script.google.com/macros/s/AKfycbybqEiIEQBipudtc7o_pmVoJVDyTImGsaVH1U-okgPRbixxLY8/exec
⇒下記のリンクをご参照ください。
やっていることは、
こういう感じ。クソコードを最後に貼っていますのでご査収ください。CORSの関係上、めんどくさいのでGASでやってますが、どうにかしてGitHub Pagesでも実装したい…。
使い方
Google Photosで任意の写真へのリンクを取得して、先程のツールに食わせます。オプションとして、画像サイズ・代替テキスト・画像タイトルを指定できます。
変換ボタンを押すと、画像への直リンクアドレスと、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>
ご覧の通り、フロントエンドエンジニアリングがさっぱりなので、ご了承ください・・・。だれかオシャレなデザインにしてください頼む。