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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2017/05/09 13:07:22
  • 終了:2017/05/11 14:42:19

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4596ベストアンサー獲得回数19352017/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 キーを利用されないために、制限がかけられます。

HTTP リファラーを詐称する方法も無くはないのですが、もろに見えているよりはずいぶんマシだと思います。




追記です。

動画がランダムで12個表示されてしまうので、これを1個だけ表示にしたいのですがウィジェットコードは動画12個と決まっているので、それを1個にする方法としてはifremeの表示サイズをうまく1個分サイズにするとか?

iframe で周りを見せなくするのでも良いのなら、CSS で見えなくするのでも良いかな、とか思いました。

こんな感じ。

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

<!-- TrendTube のブログパーツを表示する領域 -->
<div id="trendtube-wrapper">
<!-- TrendTube のブログパーツ -->
<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" のように英語で指定するとか。
日本語なら大丈夫かというと、そうでもなくて "馬" とか "任天堂" とかだと結構な確率でエラーになりました。

id:kajironpu

a-kuma3さん、ありがとうございました。
おかげさまでなんとかAPIキーを引っ張ってくることが出来ました。
APIの回数に制限があるので、できれば直接見えないほうが望ましいかと考えた次第です。でもドメインで制限できるということを知ってこれも追加でやっておけば大丈夫ですね。
ただ、先ほど自分で何度も試していたらすぐ制限MAXになってしまい動画が表示されなくなってしまいました。。。別の方法も模索していまして
ちなみに、https://trendtube.wdeco.jp/
こちらのサイトでは任意のワードで動画を引っ張ってくることが出来ます。
しかも、ウィジェットコードがブログに埋め込めるのでとても良さそうなのですが、動画がランダムで12個表示されてしまうので、これを1個だけ表示にしたいのですがウィジェットコードは動画12個と決まっているので、それを1個にする方法としてはifremeの表示サイズをうまく1個分サイズにするとか?
何か工夫すればできるものなのでしょうか?

2017/05/10 13:37:08
id:a-kuma3

動画がランダムで12個表示されてしまうので、これを1個だけ表示にしたいのですがウィジェットコードは動画12個と決まっているので、それを1個にする方法としてはifremeの表示サイズをうまく1個分サイズにするとか?

iframe で周りを見せなくするのでも良いのなら、CSS で見えなくするのでも良いかな、とか思いました。
コードは、回答に追記しました。

2017/05/10 16:23:58

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません