youtube APIを使って検索ワードでページに動画を埋め込んでみたのですが(javascript)、youtube API keyがソースにそのまま入っていて丸見えなので、ちょっと気になります。これを見えないようにすることはできるのでしょうか。

ソースにそのまま書き込まないで、外部ファイル？にAPI KEYを書いておいて、そこを呼び出す？そのようなことはできるのでしょうか。
↓の質問の追加になります。
http://q.hatena.ne.jp/1493278858

ログインして回答する

ベストアンサー

a-kuma32017/05/09 16:19:03
ソースにそのまま書き込まないで、外部ファイル？にAPI KEYを書いておいて、そこを呼び出す？そのようなことはできるのでしょうか。
どちらかというと、この質問の続きですよね。

jQuery を使うなら、$.getJSON を使うことで、該当のページ以外のところから値を持ってくることができます。

例えば、以下のような JSON 形式のファイルを YouTube API を使う HTML と同じ階層の info.json というファイルに書いておきます。
```
{"apikey": "【APIキー】"}
```
で、API キーを使う側はこんな感じ。
```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
    var url = "info.json";
    $.getJSON(url, function(info) {
        var apikey = info.apikey;       // info.json に書いてある API KEY
        var video_id = "WTLQQPBPL1U";
        var url = "https://www.googleapis.com/youtube/v3/videos?id=" + video_id + "&key=" + apikey + "&part=statistics";
        $.getJSON(url, function(data) {
            // viewCount を取り出し
            var count = data.items[0].statistics.viewCount;

            // HTML に出力
            $("#count").text(count);
        });
    });
});
</script>

<div id="count"></div>
```
外側の $.getJSON で、info.json を読み込んで、そこから API キーを取得します。
API キーを取得した後は、前の回答と同じ処理です。

いきなり見えちゃうという気持ち悪さは軽減できるのですが、ソースを見れば info.json に API キーが書いてあるのはまる分かりですし、仮に暗号化したとしても、ブラウザの開発用機能を使って www.googleapis.com へアクセスしている URL を調べれば、API キーはやっぱりばれてしまいます。

他の人に API キーを利用されないために、制限がかけられます。
- 承認の認証情報を取得する | YouTube Data API (v3) | Google Developers の「APIキー」の「詳細はこちら」
- 知っておきたい！YouTube APIの始め方 | D2Cスマイルの 4番目
HTTP リファラーを詐称する方法も無くはないのですが、もろに見えているよりはずいぶんマシだと思います。

追記です。
動画がランダムで１２個表示されてしまうので、これを１個だけ表示にしたいのですがウィジェットコードは動画１２個と決まっているので、それを１個にする方法としてはifremeの表示サイズをうまく１個分サイズにするとか？
iframe で周りを見せなくするのでも良いのなら、CSS で見えなくするのでも良いかな、とか思いました。

こんな感じ。
```
<style>
#trendtube-wrapper {
    display: none;      /* 最初は見えなくしておく */
    width: 320px;       /* 幅を指定してみた */
}
</style>


<div id="trendtube-wrapper">

<script src="https://trendtube.wdeco.jp/api/type2/?thumb=block&query=鎧" charset="utf-8" ></script>
</div>

<script>
window.onload = function() {
    // 12 個の動画を表示する領域
    var boxes = document.querySelectorAll("#trendtube-wrapper .youtube-box");

    // ランダムにひとつだけ表示するものを選ぶ
    var n_display = Math.floor(Math.random() * boxes.length);

    // それ以外は見えなくする
    Array.prototype.forEach.call(boxes, function(e, i) {
        if (i != n_display) {
            e.style.display = 'none';
        }
    });

    // 見えなくしておいた TrendTube のブログパーツを表示する領域を見えるようにする
    var wrapper = document.querySelector("#trendtube-wrapper");
    wrapper.style.display = 'initial';
};
</script>
```
12個表示される動画のうち、乱数でひとつだけ表示するものを決めて、それ以外は CSS で非表示にしています。

「iframe で周りを見せなくするのでも良いのなら」と書いたのは、動画表示には直接に関係なさそうなリクエストをドカドカ投げるので、ちょっと重たいかなという気がするためです。

あと、先ほどのコードを試している際に気がついたのですが、12個の動画のうち、ひとつでも動画のタイトルにシングルクォートが入っていると、スクリプトエラーになってしまいます。
例えば、キーワードを "soccer" のように英語で指定するとか。
日本語なら大丈夫かというと、そうでもなくて "馬" とか "任天堂" とかだと結構な確率でエラーになりました。
スター
- 2件のコメントを見る
- javelover 2017/05/10 13:37:08
  
  a-kuma3さん、ありがとうございました。
  おかげさまでなんとかAPIキーを引っ張ってくることが出来ました。
  APIの回数に制限があるので、できれば直接見えないほうが望ましいかと考えた次第です。でもドメインで制限できるということを知ってこれも追加でやっておけば大丈夫ですね。
  ただ、先ほど自分で何度も試していたらすぐ制限MAXになってしまい動画が表示されなくなってしまいました。。。別の方法も模索していまして
  ちなみに、https://trendtube.wdeco.jp/
  こちらのサイトでは任意のワードで動画を引っ張ってくることが出来ます。
  しかも、ウィジェットコードがブログに埋め込めるのでとても良さそうなのですが、動画がランダムで１２個表示されてしまうので、これを１個だけ表示にしたいのですがウィジェットコードは動画１２個と決まっているので、それを１個にする方法としてはifremeの表示サイズをうまく１個分サイズにするとか？
  何か工夫すればできるものなのでしょうか？
  
  スター
- a-kuma3 2017/05/10 16:23:58
  
  動画がランダムで１２個表示されてしまうので、これを１個だけ表示にしたいのですがウィジェットコードは動画１２個と決まっているので、それを１個にする方法としてはifremeの表示サイズをうまく１個分サイズにするとか？
  iframe で周りを見せなくするのでも良いのなら、CSS で見えなくするのでも良いかな、とか思いました。
  コードは、回答に追記しました。
  
  スター