Feel Physics Backyard

HoloLensの出張授業をする会社で、教材を開発しています

Googleフォトの写真や動画をWebページに埋め込むには(追記あり)

f:id:weed_7777:20160608190857j:plain

2017年1月14日現在、Googleフォトの写真や動画をWebページに埋め込むことはできません。しかし、Googleドライブを経由すれば簡単に埋め込むことができます。しかしこのインターフェースは…

追記(2017年5月21日)

Googleフォトのアドレスの形式が変わっていたので、それに対応させました。形式がコロコロ変わると大変困るのですが…

追記(2017年1月17日)

NEMOTOさんからアドバイスをいただき、Googleフォトのページから画像のアドレスを取得してブログに貼り付けることができないか試してみました。結論は、可能でした。以下の写真はGoogleフォト上の写真をimgタグでダイレクトに表示しています。

<img src="https://lh3.googleusercontent.com/j1w67gOkqt-9ZhXD3g0Ibm4W--KVtrxnq9emiV3AziGMwo67_JLMnbeHvdkFyju0YmlT2-BKkpA2efgexcM-5DH0FQmf2XsbZYZE" />

この写真のアドレスを取得するには、

  1. Googleフォトで写真を開き
  2. 右上隅の詳細アイコン(縦に・が3つならんでいる)をクリック
  3. ダウンロード
  4. ブラウザのダウンロード履歴を調べて、写真のアドレスを見つける

f:id:weed_7777:20170117170321p:plain

可能は可能なのですが、だいぶマニアックでGoogle側が想定していない方法だと思います。できればGoogleが提供している方法で埋め込んだ方が安心できる気がします。

追記(2017年1月1日)

アイコンの位置が少し変わっていたので修正しました。

アドレスを限定公開

Googleドライブを開いて、左側の一覧から「Googleフォト」を選びます:

f:id:weed_7777:20160608184700p:plain

共有したい写真や動画をクリックします:

f:id:weed_7777:20160608184524p:plain

右上の方にある「共有」ボタンを押します:

f:id:weed_7777:20160608185021p:plain

すると、アドレスを知っている人ならログインしなくてもこの動画にアクセスできるようになります。

プレビュー

次に、右上の方にある目の形をした「プレビュー」ボタンを押します:

f:id:weed_7777:20160608185213p:plain

ウィンドウ全体にプレビューが表示されます。次に右上の「ポップアウト」ボタンを押します:

ポップアウト(2017年1月1日)

f:id:weed_7777:20170101080617p:plain

ポップアウト(以前)

f:id:weed_7777:20160608185526p:plain

新しいタブが開いて全体に動画が表示されます。

詳細ボタン(2017年1月1日)

ここをクリックすると、「埋め込み」という項目が現れます。

f:id:weed_7777:20170101080654p:plain

詳細ボタン(以前)

上の縦に3つ「・」が並んでいるボタンを押します:

f:id:weed_7777:20160608185833p:plain

すると「アイテムを埋め込む」ここですか、はあ:

f:id:weed_7777:20160608185951p:plain

埋め込みコード

埋め込みコードが表示されます:

f:id:weed_7777:20160608190159p:plain

しかしね、Googleくん、君はどうしてこんなインターフェースにしたんだ?おかしいだろ、絶対

😡 😡 😡

おわりに

というわけで、Googleフォトの写真や動画をWebページに埋め込む方法を説明しました。

この記事は参考になりましたでしょうか?もしそうでしたら、以下のツイートに「いいね」して下さい。コメントをリプライしていただいてもOKです。今後の記事を書く参考にさせていただきます。よろしくお願いします😌

お疲れさまでした。