人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

youtube APIを使って検索ワードでページに動画を埋め込んでみたのですが(javascript)、youtube API keyがソースにそのまま入っていて丸見えなので、ちょっと気になります。これを見えないようにすることはできるのでしょうか。
ソースにそのまま書き込まないで、外部ファイル?にAPI KEYを書いておいて、そこを呼び出す?そのようなことはできるのでしょうか。
↓の質問の追加になります。
http://q.hatena.ne.jp/1493278858

●質問者: kajironpu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

ソースにそのまま書き込まないで、外部ファイル?に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" のように英語で指定するとか。
日本語なら大丈夫かというと、そうでもなくて "馬" とか "任天堂" とかだと結構な確率でエラーになりました。


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

a-kuma3さんのコメント
>> 動画がランダムで12個表示されてしまうので、これを1個だけ表示にしたいのですがウィジェットコードは動画12個と決まっているので、それを1個にする方法としてはifremeの表示サイズをうまく1個分サイズにするとか? << iframe で周りを見せなくするのでも良いのなら、CSS で見えなくするのでも良いかな、とか思いました。 コードは、回答に追記しました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ