Google フォトの直リンクの取得ツール 　スクリプトとHTML カイゼンした

私のBlogは、写真を沢山貼り付けているスタイルなのですが、Google Photosにアップして直リンク取得しています。
以下のWEBサービスでも　Google Photosにアップしている写真の直リンクを取得できます
BYTENBIT
CTRLQ.org
フォトエンベッドメーカー
でも、ちょっと生成速度や使い勝手が気になって、以前Androidのメモとか　さんで　自前で　Google Scriptを使用して直リンクをを抽出する　プログラムを作られてました
これは　素晴らしい！　と　プログラムを改変させていただき必要最小限版にして使用してきました

やり方としてはPhoto
１．Googleフォトを開いて、貼り付けたい写真を開きます

Photo
２．開いた写真の右上の共有ボタンを押します

Photo
３．開いたダイアログの下のリンクを作成をクリックして

Photo
４．　リンクを作成　そして　そのアドレスをクリップボードにコピーします

Photo
５．先ほどのツールを開いて、ペーストして　Convert　ボタンを押して、直リンクを取得します

で、私はこれで得た直リンクアドレスに　いくつかHTMLの命令とかパラメーターとかをMacの　mi というエディターのマクロで一括で前後に取り付けて、WordPressに貼っているのですが、このパラメーター取り付けも、この変換ツールで同時に行って手番を減らそう！　という課題を形成　(^^ゞ

ついでに画像の外枠としてドロップシャドーもサイズを調整可能なように付加しました　(^^)

Photo
CSS部分に分けて書くのがどうも苦手で、body内に書いてしまいました　(^^ゞ はずかし・・・

改良版！！

Photo

エジプトの写真を固定で貼って、透過とかGoogle のフォントとか色々使って、ちょっとかっこよくなりました　コードもそのまま使えるし　やったぁ～　＼(^o^)／　って感じ　３日かかった・・

ご入用でしたら、以下のURLから使用可能です　（*^_^*）

Generate embed code for any picture on Google Photos

以下　備忘録として　実施した事を書いておきます

■主にコードを書き足した事　（備忘録）

１．HTMLを書出すスクリプトに、画像横幅の width とか、Border を変数から引用して書き足した。

    function setHtmlResult(result){
       var htmlResult = "<img src=\"" + result + "\" alt=\"" + document.getElementsByName("Alt")[0].value + "\" border=\"" + document.getElementsByName("border")[0].value + "\" style=\"" + "box-shadow: " + document.getElementsByName("h-offset")[0].value + "px "  + document.getElementsByName("v-offset")[0].value + "px " + document.getElementsByName("blur")[0].value + "px\"" + " width=\"" + document.getElementsByName("width")[0].value + "\" >";
       document.getElementsByName("ResultHtml")[0].value = htmlResult;
    }

2. フォントを細めの　Google Fontの　Gruppo　を使うようにした

＆lt；link rel=”preconnect” href=”https://fonts.googleapis.com”＆gt；＆lt；link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin＆gt；＆lt；link href=”https://fonts.googleapis.com/css2?family=Gruppo&display=swap” rel=”stylesheet”＆gt；

Google フォントへのリンク　と

CSSの各エントリーへの　font-family: Gruppo;
Gruppo　の指定

Photo

３．背景画像の設定　ノーリピート　リピートしない部分のブラック指定

body {
background-color: Black;
background-image:url(‘https://lh3.googleusercontent.com/1S8OgZ-pl5TVJQvbAPdVe6v2XRlBw2I1F1Y8IzS27xcD0Clu0u7Ydh86cV_tHraWmJuQf9zcOYGc5HsDYlpHLaojNq43pBlp3yfzvUx4ZPhaSWh54BPK7pMy2lGFtyb9Zjz_c8nnSC0=s0’); background-size: cover; background-repeat: no-repeat; font-family: Gruppo; line-height:1.1;
｝

４．入力欄の透過、横幅などの指定は　各行のStyle=で指定しちゃいました　(^^ゞ

<font color="darkgray">  Picture Size　"</font>"<input class="textlines3" type="number" name="Size" style="background-color: transparent; width:100px; color:darkgray;border-style: solid; border-color: gray; padding: 4px 4px;" value="0">
    }

５．出力されたHTMLコードをクリップボードにコピーするスクリプト追加

■クリップボードにコピーするスクリプト

function copyToClipboard()
{ var copyTarget = document.getElementById(“copyTarget”); copyTarget.select(); document.execCommand(“Copy”); }

■クリップボードにコピーするボタン

<input type=”button” name=”copyTarget” value=”Copy HTML” onclick=”copyToClipboard()”>

■クリップボードにコピーするターゲットの指定

<textarea id=”copyTarget”name=”ResultHtml” Style=”background-color: transparent;color:silver;border-style: solid; border-color: gray;” readonly></textarea>

なんかちょっと論理が おかしい気もするけど、動いているのでヨシとする　(^^;)

６．Google Photos の短縮URLを入力する欄の半透明化 透過度 50%

<input class=”textlines2″ type=”text” Style=”background-color: rgba(255, 255, 255, 0.5) ;border-style: solid; border-color: gray;” name=”Url”>

こんな感じ　(^^ゞ

コメント