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

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

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

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

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

▽最新の回答へ

1 ● ぽけっとしすてむ
●100ポイント

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

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


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

2 ● a-kuma3
●100ポイント ベストアンサー

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:こちらについては、もう回答がついているので割愛


wsappさんのコメント
ご回答ありがとうございます。 詳細な回答ありがとうございます。 とても分かりやすいです。 ただ、教えていただいたことを自分のWebサイトに表示させることはできるのですが、JavaScript数行で不特定のクライアントに配布し、そのクライアントで表示する方法が解らずにいます。 ぽけっとしすてむさんにも返答しましたが、JavaScriptでできることを理解していないのだと思います。 どなたか、お手すきの時にザックリした手順だけでも教えていただければ幸いです。

a-kuma3さんのコメント
>> ただ、教えていただいたことを自分のWebサイトに表示させることはできるのですが、JavaScript数行で不特定のクライアントに配布し、そのクライアントで表示する方法が解らずにいます。 << これは、質問にある >> 1.当サイトが提供するあるコードを、不特定のWebサイトに埋め込んでもらいます。 << の、「提供するあるコード」の書き方が分からない、ということですよね、きっと。 この類のは、こんな感じで作ります(手順というか、考え方)。 1. フレームの中に表示する広告ページを作る(ぽけっとシステムさんが書いたサンプルのように) 2. フレームを作って 1. の広告ページを表示する javascript を作る(コードは後述) 3. 2. のコードをひとつの .js ファイルに書いて、Web で参照できるようにする 4. 3. のスクリプトを読み込むコードを第三者に提供する 2. のコードはこんな感じです。 >|javascript| (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. で公開するコードは以下のようになります。 >|html| <script src="http://wsapp.jp/js/ads.js"></script> ||< 3. の URL を持った script タグです。 これを、第三者のページの適当なところに貼ってもらう感じになります。 「配布」という感じではなく、http を通してスクリプトファイルをそれぞれのページで読みこんでもらう、というイメージです。

wsappさんのコメント
なるほど! 考え方、ばっちり理解できました!(^^)! ありがとうございます。 >> 「提供するあるコード」の書き方が分からない、ということですよね、きっと << はい、その通りです。 細かいところまで具体的にありがとうございます!

3 ● ラフティング
●50ポイント

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


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

●質問をもっと探す●



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