質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

953閲覧

go templateで動的に生成したページの最初の画像を取得しOGPに設定したい

sodneter

総合スコア11

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/07/24 08:51

編集2019/07/24 08:58

前提・実現したいこと

go templateを用いて動的に生成したHTMLの中の最初に表示される画像を取得しOGPに設定したいと考えています。
動的に生成されるHTML内のコードには、目的達成のためのidやclassなどを入れられないという前提です。

該当のソースコード

html

1<html> 2<head> 3 <meta charset="UTF-8"> 4 5 <!--OGP設定--> 6 <meta property="og:image" content="ここに入れたい" /> 7 8 <title>hoge</title> 9</head> 10 11<body> 12 <!-- この部分に動的に生成されたHTMLが挿入される --> 13 <!-- 最初に現れる画像を上部のmetaタグ内に入れたい --> 14</body> 15</html>

試したこと

何らか試そうと色々と調べてみたのですが、そもそも何を試すべきかも分かっていない状況です。
知恵をお貸しいただけると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nobonobo

2019/07/25 04:54

HTMLの生成は何を使っていますか?(例: Go標準のhtml/template)
sodneter

2019/07/25 07:12

ご質問ありがとうございます。 Go標準のhtml/templateを使用しております。
nobonobo

2019/07/25 08:36 編集

具体例のコードがほしいです。 生成コンテンツをどのようなデータとしてtemplateに渡して最終のHTMLを生成しているか最小のサンプルを書いてみてください。(og:imageのところは現状のままでいいです)
nobonobo

2019/07/26 00:40

以下の2段階のフローがあるはずなんですが、 1. なんらかのデータから動的コンテンツの内容を確定 2. HTML全体を生成 基本は1.の元となるデータから画像URLを取り出すことが可能なデータ構造を設計しておいて、コンテンツの確定時とHTMLのテンプレートレンダリング時の双方にURLを渡すのが理想です。 1.より手前には触れられない、変えられない事情があるのであれば、1.と2.の間で確定コンテンツを解析する方法があります。そこで最初に見つかった画像URLを全体HTMLのテンプレートへのパラメータとして渡します。 どちらの方法もコンテンツに画像がなかった場合のデフォルト画像を用意しておいてコンテンツ内に画像URLがなかった場合などにデフォルト画像URLを使うようにすると良いかもしれません。
sodneter

2019/07/26 09:41

ありがとうございます! >1.と2.の間で確定コンテンツを解析する方法があります。そこで最初に見つかった画像URLを全体HTMLのテンプレートへのパラメータとして渡します。 こちらにヒントを得て実装できました。 大変助かりました。ありがとうございました。
guest

回答2

0

ベストアンサー

より具体的な回答例を示しておきます。

https://play.golang.org/p/zY1YPo4CddV

go

1package main 2 3import ( 4 "bytes" 5 "html/template" 6 "io" 7 "os" 8 9 "golang.org/x/net/html" 10) 11 12const DefaultOGImageURL = "/assets/default.jpg" 13const layout = `<html> 14<head> 15 <meta charset="UTF-8"> 16 17 <!--OGP設定--> 18 <meta property="og:image" content="{{.OGImageURL}}" /> 19 20 <title>hoge</title> 21</head> 22 23<body> 24 <!-- この部分に動的に生成されたHTMLが挿入される --> 25 <!-- 最初に現れる画像を上部のmetaタグ内に入れたい --> 26 {{.Contents}} 27</body> 28</html> 29` 30 31var layoutTemplate = template.Must(template.New("").Parse(layout)) 32 33func getFirstImageURL(contents string) string { 34 // ここでcontentsから最初の画像リンクを取得して見つかったらそれを返す 35 tokenizer := html.NewTokenizer(bytes.NewBufferString(contents)) 36 for { 37 t := tokenizer.Next() 38 if t == html.ErrorToken { 39 break 40 } 41 switch t { 42 case html.SelfClosingTagToken: 43 b, hasAttr := tokenizer.TagName() 44 if string(b) == "img" && hasAttr { 45 for { 46 key, value, more := tokenizer.TagAttr() 47 if string(key) == "src" { 48 return string(value) 49 } 50 if !more { 51 break 52 } 53 } 54 } 55 } 56 } 57 return DefaultOGImageURL 58} 59 60func renderHTML(w io.Writer, contents string) { 61 layoutTemplate.Execute(w, map[string]interface{}{ 62 "OGImageURL": getFirstImageURL(contents), 63 "Contents": template.HTML(contents), 64 }) 65} 66 67func main() { 68 renderHTML(os.Stdout, `<img src="/screenshot.jpg"/>`) 69}

投稿2019/07/29 02:34

編集2019/07/29 02:41
nobonobo

総合スコア3367

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

  1. なんらかのデータから動的コンテンツの内容を確定
  2. HTML全体を生成

基本は1.の元となるデータから画像URLを取り出すことが可能なデータ構造を設計しておいて、コンテンツの確定時とHTMLのテンプレートレンダリング時の双方にURLを渡すのが理想です。

1.より手前には触れられない、変えられない事情があるのであれば、1.と2.の間で確定コンテンツを解析する方法があります。そこで最初に見つかった画像URLを全体HTMLのテンプレートへのパラメータとして渡します。

投稿2019/07/26 09:41

sodneter

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問