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

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

ただいまの
回答率

87.37%

Javascript: サイト内にURLを貼ったときに埋め込み表示できるようにしたい。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,042

score 87

実現したいこと

イメージ説明
上記のようにURLを入力するとサイトのmeta情報が表示されるようにしたい。

<a href="https://www.google.com/" target="_blank">google</a> 


自社のサイトに載せたいサイトのURLはa hrefを使用すれば使えることは知っているのですが、はてなブログのようなサイトのメタ情報を表示させることが出来なくて困っています。
おそらくjavascriptでやっていることは見当がつくのですが、どのようにして実現しているのかをアドバイスを頂けたら幸いです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • FiroProchainezo

    2019/08/09 14:13

    やりたいことがよくわからないのですが、画像のサイトはどこかにあるのですか?

    キャンセル

回答 2

checkベストアンサー

+3

非同期でPHPなどを実行し、URLからHTMLを取得し、適宜meta情報を取得しているのではないでしょうか。
(JavaScriptだけではそこまで取れなかったと思う)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/09 14:17

    なるほど。
    サーバーサイド側でスクレイピングをし、取得したデータを反映させればいいんですね。
    ご教示いただきありがとうございました。

    キャンセル

  • 2019/08/09 14:21

    ただ、スクレイピングは是非の検討が求められる技術です(私はどちらかというと非の方です)。
    個人で勝手に情報を引っ張ってくるのが良いかというのは十二分に検討の余地があります。

    キャンセル

  • 2019/08/09 14:25

    スクレイピングを使用しない方法はあるのでしょうか?

    キャンセル

  • 2019/08/09 14:29

    descriptionから引っ張ってきていると思われるので、指定URLのHTML解析は必須でしょうね。

    キャンセル

+2

この前同じようなものを作ったので、 ご参考になればと思います。

JavaScriptはCORSの制限があるため、 フロント側からajaxなどで他サイトの情報を通常取得することはできません。

m.ts10806さんの仰るようにPHPなどのサーバーサイドで取得する必要があります。
賛否が分かれるのはやはりスクレイピングによる負荷と画像その他の著作権になると思いますが、 通常のtitleやdescriptionといったタグは検索エンジンに表示される都合上公開している情報であるものの、 ogpタグに関してはSNS等の拡散/紹介を期待して公開しているものです。

このogpタグを利用することに関して、 著作権の侵害になるかどうかというのは、 弁護士ドットコムなどでは侵害にはなりにくいという回答を見られますが、 具体的な判例も少ないですし、 SNSの拡散は許諾していてもブログ等に許諾しているつもりはなかった、 なんていうこともありそうですから、 ogpタグの利用にしても一応事前に許諾を取ったほうが無難だと思います(リンクの数が多いというときは弁護士と相談してからogpを利用する必要がありそうです)。

手順としては、
許諾を取る ⇢ PHPなどでHTMLを取得 ⇢ ogpの情報を利用してブログカードを作る
ということになりますね。

PHPでogpタグを取得するのは phpQuery が簡単でした。
毎度スクレイピングする負荷を考慮するなら、 適当なファイルにogpの情報を保存したりなど工夫は色々できると思いますが、 こういったことも許諾を取ってからが無難ですね。
画像のリンクなどはロケットニュースとニコニコ動画などの例も参考になると思います。

法律周りの問題をクリアできれば、 ブログカードを作る事自体は難しくないです。
ベストアンサーはもうついているようですが、 たまたま見かけたので回答しました(^^)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る