2014年3月22日 19:00

javaScriptでmeta内のproperty属性から画像を取得する方法

JavaScript 第6版

閲覧ページなどのメタ画像を取得

1つ前の記事、「「あみあみ」A8.netブックマークレット修正版【javaScriptの練習】」にて、使ったjavaScriptでmeta画像を取得する方法をメモしておきます。

<script>
(function() {
  function productImg() {
    var pi = document.getElementsByTagName('meta');
    for(i=0;i<pi.length;i++){
      if(pi[i].getAttribute("property")=="og:image"){
        return pi[i].getAttribute("content");
      }
    }
    return "";
  }
  var metas = productImg();
  console.log(metas);
})();
</script>

やろうとしたことは「商品ページに設定してあるメタ画像から商品画像のURLを取得する」というもの。

以下のページが参考になりました。

掲示板/JavaScript質問板[過去ログ]/一覧/META情報の取得について - TAG index Webサイト
戻り値で関数から値を返す(return文) - 関数 - JavaScript入門
greasemonkey - How do I get the information from a meta tag with javascript? - Stack Overflow

スポンサードリンク

meta情報の取得

初心者なのでちゃんと理解してるわけではないのですが、一応解説。

<script>
(function() {
 // こっからメインのスクリプト
  function productImg() {
  // 変数"pi"を定義。ウェブページ内の"meta"
    var pi = document.getElementsByTagName('meta');
    // "meta"の中から"property"が"og:image"になってるものを探す。
    for(i=0;i<pi.length;i++){
      if(pi[i].getAttribute("property")=="og:image"){
    //"og:image"が見つかったら"content"情報をpiに代入する。
        return pi[i].getAttribute("content");
      }
    }
  // 関数"productImg()"に結果を代入する
    return "";
  }
 // 変数"metas"は"productImg()"と同じっていう定義をする。
  var metas = productImg();
 // "console.log"で"metas"がちゃんと取得されてるか確認!
  console.log(metas);
})();
</script>

というわけで、上記の通りかと思います。変数"metas"を作ってるのは、このコード以下の処理で使うためです。"property"を"name"にして、"og:image"を"description"に変えれば、該当ページの簡易説明とか取得できます。

絶版後記

なんか他の時にも応用できそうなのでメモしておきました。

  • 【タグ】
プログラミングカテゴリの他の記事はこちら。
JavaScriptカテゴリの他の記事はこちら。

スポンサードリンク

news

新作同人誌! MEMORIE(あまんちゅ!イラスト本)の通販 → メロンブックス

イラスト・漫画など活動報告 → イラスト・漫画仕事および同人活動の記録| 絶版あかみる