id:wsapp
ポイントあり250ptベストアンサーあり
ウェブ制作

Googleアドセンスのフレーム右上にiマークがついていますが、どのような技術でしょうか？


例えば、
１．当サイトが提供するあるコードを、不特定のWebサイトに埋め込んでもらいます。
２．フレーム内に当サイトが提供する画像が表示され、それの右上にiマークを表示する。
３．右上のiマークは当サイトのポリシーにリンクされる。
４．画像やiマークの形は、当サイトが自由に変更できる。

このようなことを叶えたいのですが、具体的な例が示されたサイト、もしくは具体的なコードを紹介ください。
JavaScriptをなんか工夫するんだろうな～･･･くらいは想像つくのですが。

回答の条件
  • 1人1回まで
  • 登録：
  • 終了：2015/04/23 11:54:26
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.2

回答回数4973ベストアンサー獲得回数2154

ポイント100pt

Google AdSense のフレームは、http://googleads.g.doubleclick.net/pagead/ads?client=... というような感じの URL になっていますが、その中身のほとんどは javascript で作られています。

広告の主体の画像とは別に、右上の (i) マークは HTML としてはざっくりと以下のような構造になってます。

<div>   <!-- マークの位置を決めている -->
    <div>
        <a href="...">  <!-- マークをクリックしたときの飛び先 -->
            <svg>       <!-- (i) のマークをグラフィックで書いている -->
                ...
            </svg>
        </a>
    </div>
</div>

(i) マークはてっきり画像かと思ってましたが、SVG というグラフィックを描く技術で作られています。
マークなどを描いている http://pagead2.googlesyndication.com/pagead/js/r20150416/r20110914/abg.js からマークを書いている部分だけを抜粋したのが以下のコードです。

var Yc=function(a){
        var c=document.createElementNS("http://www.w3.org/2000/svg","svg"),
            b=document.createElementNS("http://www.w3.org/2000/svg","circle"),
            d=document.createElementNS("http://www.w3.org/2000/svg","circle"),
            e=document.createElementNS("http://www.w3.org/2000/svg","line");
        c.setAttribute("stroke","#00aecd");
        c.setAttribute("fill","#00aecd");
        c.setAttribute("x",a);
        c.setAttribute("y","0px");
        b.setAttribute("cx","7.5px");   // 外側の円
        b.setAttribute("cy","7.5px");
        b.setAttribute("r","5.5px");
        b.setAttribute("fill", "none");
        b.setAttribute("stroke-width","1.1px");
        d.setAttribute("cx","7.5px");   // i の上にある点
        d.setAttribute("cy","4.75px");
        d.setAttribute("r","1px");
        d.setAttribute("stroke","none");
        e.setAttribute("x1","7.5px");   // i の下の棒
        e.setAttribute("x2","7.5px");
        e.setAttribute("y1","6.5px");
        e.setAttribute("y2","11px");
        e.setAttribute("fill","none");
        e.setAttribute("stroke-width","1.75px");
        c.appendChild(b);
        c.appendChild(d);
        c.appendChild(e);
        return c
    };



話がちょっと細かすぎるので、もうちょっと大まかな話も書いておきます。

広告枠の中身がほぼ javascript で作られているのは、性能をギリギリまで追求した結果だと思います。
Google は昔から細かいところまで性能のチューニングをしています。
例えば、昔の Google Maps では吹き出しやピンなどの画像は、それぞれに用意されてるのではなくて、一枚の画像に押し込まれていて、それを CSS で切り出して表示していました。
画像のアクセスが一回で済むので、ちょっとでも速くなる、というテクニックです。

(i) マークも、javascript で組むことで処理をクライアント（パソコン）側に持っていけるので、サーバの負荷が少なくて済む、ということになります。

それほど細かいところにこだわらないのであれば、サーバ側で PHP などを使ってレイアウトは HTML のレベルで書いてしまった方が簡単です（*1）。
サーバ側で処理をする分、多少はサーバに負荷はかかりますが、ほんのちょっとだけです。
よほどたくさんのアクセスが無ければ、サーバ側のスペックを上げることで対応できます。

　

*1：こちらについては、もう回答がついているので割愛

他1件のコメントを見る
id:a-kuma3

ただ、教えていただいたことを自分のWebサイトに表示させることはできるのですが、JavaScript数行で不特定のクライアントに配布し、そのクライアントで表示する方法が解らずにいます。

これは、質問にある

１．当サイトが提供するあるコードを、不特定のWebサイトに埋め込んでもらいます。

の、「提供するあるコード」の書き方が分からない、ということですよね、きっと。


この類のは、こんな感じで作ります（手順というか、考え方）。

1. フレームの中に表示する広告ページを作る（ぽけっとシステムさんが書いたサンプルのように）
2. フレームを作って 1. の広告ページを表示する javascript を作る（コードは後述）
3. 2. のコードをひとつの .js ファイルに書いて、Web で参照できるようにする
4. 3. のスクリプトを読み込むコードを第三者に提供する

2. のコードはこんな感じです。

(function() {
    var u = "http://...";	// 広告ページの URL
    document.write("<iframe src='" + u + "'></iframe>");
})();

広告ページの URL を持った iframe のタグを document.write で書き出すだけです。
実際にはサイズや位置の調整などがあるので、クラスの指定とかもやります。

3. では、上記の 4行のコードを、ひとつの .js ファイルに書いて公開します。
例えば、http://wsapp.jp/js/ads.js という URL でアクセスできるようにします。

4. で公開するコードは以下のようになります。

<script src="http://wsapp.jp/js/ads.js"></script>

3. の URL を持った script タグです。
これを、第三者のページの適当なところに貼ってもらう感じになります。


「配布」という感じではなく、http を通してスクリプトファイルをそれぞれのページで読みこんでもらう、というイメージです。

2015/04/23 11:21:48
id:wsapp

なるほど！
考え方、ばっちり理解できました!(^^)!
ありがとうございます。

「提供するあるコード」の書き方が分からない、ということですよね、きっと

はい、その通りです。
細かいところまで具体的にありがとうございます！

2015/04/23 11:47:18

その他の回答（2件）

id:psne No.1

回答回数605ベストアンサー獲得回数334

ポイント100pt

ざっくりと作ると、このような形になります。(一例)
http://jsfiddle.net/psne/zqLao2fr/
jQueryを使用すると、もっと簡単に作ることができます。

Javascriptを利用せず、CSSで表示をさせる事も可能です。
こちらは、「CSS ドロップダウンメニュー」などで検索をすると似たような物が出てきます。

id:wsapp

ご回答ありがとうございます。
また、わざわざサンプルを作っていただきありがとうございます。
初歩的な質問だと思うのですが、これらのコードで作成した結果を、JavaScript数行でクライアントに表示する方法がイメージできません＞＜
JavaScriptで、できることを理解していないのだと思います。
どなたか、時間が空いたときに大まかな手順だけでも教えていただければ幸いです。

2015/04/23 11:01:49
id:a-kuma3 No.2

回答回数4973ベストアンサー獲得回数2154ここでベストアンサー

ポイント100pt

Google AdSense のフレームは、http://googleads.g.doubleclick.net/pagead/ads?client=... というような感じの URL になっていますが、その中身のほとんどは javascript で作られています。

広告の主体の画像とは別に、右上の (i) マークは HTML としてはざっくりと以下のような構造になってます。

<div>   <!-- マークの位置を決めている -->
    <div>
        <a href="...">  <!-- マークをクリックしたときの飛び先 -->
            <svg>       <!-- (i) のマークをグラフィックで書いている -->
                ...
            </svg>
        </a>
    </div>
</div>

(i) マークはてっきり画像かと思ってましたが、SVG というグラフィックを描く技術で作られています。
マークなどを描いている http://pagead2.googlesyndication.com/pagead/js/r20150416/r20110914/abg.js からマークを書いている部分だけを抜粋したのが以下のコードです。

var Yc=function(a){
        var c=document.createElementNS("http://www.w3.org/2000/svg","svg"),
            b=document.createElementNS("http://www.w3.org/2000/svg","circle"),
            d=document.createElementNS("http://www.w3.org/2000/svg","circle"),
            e=document.createElementNS("http://www.w3.org/2000/svg","line");
        c.setAttribute("stroke","#00aecd");
        c.setAttribute("fill","#00aecd");
        c.setAttribute("x",a);
        c.setAttribute("y","0px");
        b.setAttribute("cx","7.5px");   // 外側の円
        b.setAttribute("cy","7.5px");
        b.setAttribute("r","5.5px");
        b.setAttribute("fill", "none");
        b.setAttribute("stroke-width","1.1px");
        d.setAttribute("cx","7.5px");   // i の上にある点
        d.setAttribute("cy","4.75px");
        d.setAttribute("r","1px");
        d.setAttribute("stroke","none");
        e.setAttribute("x1","7.5px");   // i の下の棒
        e.setAttribute("x2","7.5px");
        e.setAttribute("y1","6.5px");
        e.setAttribute("y2","11px");
        e.setAttribute("fill","none");
        e.setAttribute("stroke-width","1.75px");
        c.appendChild(b);
        c.appendChild(d);
        c.appendChild(e);
        return c
    };



話がちょっと細かすぎるので、もうちょっと大まかな話も書いておきます。

広告枠の中身がほぼ javascript で作られているのは、性能をギリギリまで追求した結果だと思います。
Google は昔から細かいところまで性能のチューニングをしています。
例えば、昔の Google Maps では吹き出しやピンなどの画像は、それぞれに用意されてるのではなくて、一枚の画像に押し込まれていて、それを CSS で切り出して表示していました。
画像のアクセスが一回で済むので、ちょっとでも速くなる、というテクニックです。

(i) マークも、javascript で組むことで処理をクライアント（パソコン）側に持っていけるので、サーバの負荷が少なくて済む、ということになります。

それほど細かいところにこだわらないのであれば、サーバ側で PHP などを使ってレイアウトは HTML のレベルで書いてしまった方が簡単です（*1）。
サーバ側で処理をする分、多少はサーバに負荷はかかりますが、ほんのちょっとだけです。
よほどたくさんのアクセスが無ければ、サーバ側のスペックを上げることで対応できます。

　

*1：こちらについては、もう回答がついているので割愛

他1件のコメントを見る
id:a-kuma3

ただ、教えていただいたことを自分のWebサイトに表示させることはできるのですが、JavaScript数行で不特定のクライアントに配布し、そのクライアントで表示する方法が解らずにいます。

これは、質問にある

１．当サイトが提供するあるコードを、不特定のWebサイトに埋め込んでもらいます。

の、「提供するあるコード」の書き方が分からない、ということですよね、きっと。


この類のは、こんな感じで作ります（手順というか、考え方）。

1. フレームの中に表示する広告ページを作る（ぽけっとシステムさんが書いたサンプルのように）
2. フレームを作って 1. の広告ページを表示する javascript を作る（コードは後述）
3. 2. のコードをひとつの .js ファイルに書いて、Web で参照できるようにする
4. 3. のスクリプトを読み込むコードを第三者に提供する

2. のコードはこんな感じです。

(function() {
    var u = "http://...";	// 広告ページの URL
    document.write("<iframe src='" + u + "'></iframe>");
})();

広告ページの URL を持った iframe のタグを document.write で書き出すだけです。
実際にはサイズや位置の調整などがあるので、クラスの指定とかもやります。

3. では、上記の 4行のコードを、ひとつの .js ファイルに書いて公開します。
例えば、http://wsapp.jp/js/ads.js という URL でアクセスできるようにします。

4. で公開するコードは以下のようになります。

<script src="http://wsapp.jp/js/ads.js"></script>

3. の URL を持った script タグです。
これを、第三者のページの適当なところに貼ってもらう感じになります。


「配布」という感じではなく、http を通してスクリプトファイルをそれぞれのページで読みこんでもらう、というイメージです。

2015/04/23 11:21:48
id:wsapp

なるほど！
考え方、ばっちり理解できました!(^^)!
ありがとうございます。

「提供するあるコード」の書き方が分からない、ということですよね、きっと

はい、その通りです。
細かいところまで具体的にありがとうございます！

2015/04/23 11:47:18
id:rafting No.3

回答回数2652ベストアンサー獲得回数176

ポイント50pt

Flashで作るという手もあります。
ｈttp://www.riko-rh.expressweb.jp/flash/Flash_trial005_001.htm

id:wsapp

こんにちは。
ご回答ありがとうございます。
他の方にも返答いたしましたが、JavaScript数行で不特定のクライアントに配布し、そのクライアントにFlashで作った結果を表示する方法が解らずにいます。

2015/04/23 11:03:09

コメント（0件)

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

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

トラックバック

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

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

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ