アフィリエイター向けWebサービス「2chまとめアンテナメーカー」をリリースしました。
2chまとめアンテナメーカー - アンテナサイト作成ツール
http://antena-maker.nekotool.com/
概要
２chまとめアンテナサイトを自動で生成してくれるWebサービスをリリースしました。
アカウント登録をすると、以下のようなURLであなたのアンテナサイトが作成されます。
http://antena-maker.nekotool.com/［あなたのユーザーID］
例：
http://antena-maker.nekotool.com/antena
上記ページに飛ぶと、ヘッダーに、広告（i-mobile 及び nend 提供広告）が表示されています。
これは、ユーザが自由に設定できる部分です。
アンテナページでは、ヘッダー部分にあなたの広告HTMLを自由に設定することができるのです。
これは、以下で紹介するガジェットのリンク先であるフィードページのヘッダー広告も、同様です。
ガジェット
また、発行されるガジェット埋め込みコードを、自身のサイトやブログに貼付けることによって、２chまとめの最新記事のフィードページへのリンクが、バナー形式またはリスト形式で表示されます。
バナー形式サンプル：
リスト形式サンプル：
※表示する記事数は変更可能です。
目的
ブログやサイトの離脱率の高い場所、具体的にはブログ記事フッター部分などに、上記ガジェットを配置することにより、離脱で失われるであろう広告収入の機会を少しだけ延長し、アフィリエイト収入を増やします。
広告自由設定
現在はヘッダー部分に、 iframe によって広告を埋め込んでいます。
現在、サンプルページでは、 i-mobile, nend の２種類の広告を表示しています（nendはスマートフォンのみ）。
実装について
Rails3 + React + jQuery で作成しました。
広告コードのクロスサイトスクリプティング対策
ユーザが広告コードを設定できる部分があるわけですから、クロスサイトスクリプティングの危険性があります。
ユーザアカウントごとにサブドメインを設定するか、あるいは広告部分のコードは別ドメインのページをiframeで読み込むようにするか、悩みました。
結果、後者を選択しました。
別ドメインiframe読み込みを選んだ理由は、運営側の広告（今はまだ入れていないですが、いつかどこかに入れようと考えています）を入れる際に、サブドメインが乱立していると、 i-mobile や nend 等、広告プロバイダ側の審査に通らないのではないかと考えたためです。
iframe内のコンテンツの高さを、親ページから取得する方法
上述の通り、 iframe でユーザによる広告スクリプトを実行させて広告を表示する場合、親ページ側から、iframe内のコンテンツの高さを正確に、取得し、iframeのheightとして指定する必要があります（widthは常に100%にしています）。
しかしながら、広告コードというものは、あらかじめサイズの確定したものではなく、例えばスマホでは四角形画像広告はスマホブラウザの幅全体を利用するように画像サイズを拡大したり、あるいはユーザーエージェントに準拠し、表示されたりされなかったりもします。
特に、「スマホの場合にのみ表示する広告」を挿入した場合、タブレットの場合はどうなるのか、未対応のtouchデバイスのユーザーエージェントではどうなるのか、といった問題があります。
そこで、親ページは、iframeコンテンツの高さを、取得する必要があります。
しかしながら、iframeの親と子が same domain でない場合は、データのやり取りができません。
今回、セキュリティ上の事情から、親ページのドメインと、iframe内ドメインは、別となっています。
ではどうすればいいのか。
window.postMessage という、安全にクロスドメイン通信を可能にするためのAPIを利用しました。
iframe内で、広告画像・スクリプトが読み込まれてコンテンツのheightが変更されると、iframe内から window.postMessage(新しい高さ) を呼びます。
iframeを内包する親ページ側で、この高さの情報を、 window.addEventListener('message', function (e){}); を通じて受け取ます。
これにより、「iframe内の広告コンテンツを読み込んだあとに、ドメインを越境して親ウィンドウにコンテンツ高さを渡す」を実現しています。
なお、複数広告を掲載した場合、遅延が発生して高さが変動する可能性もあるため、一度高さをpostした後も、しばらくは、コンテンツ高さを監視し、必要であれば再postするコードを、iframe内に記入しています。
記事閲覧履歴機能
最新記事ガジェットが、サイトやブログに常に表示される場合、せっかくですから、閲覧者の人々には、当該アンテナに愛着（？）を持ってもらいたく思い、閲覧履歴機能を付けました。訪問者を、ステートレスな揮発的主体ではなく、ステートフルな持続的主体として機能せしめるための小さなきっかけとして、導入しました。
アンテナサイトから何らかの記事にアクセスした場合、次回アクセス以降、ヘッダーの右上の部分に「マイリスト」なるリンクが表示されます。
このマイリストページでは、最近見た記事が履歴として保存されています。
一定期間または一定数を過ぎると、削除されていきますが、「あれ？こないだ見たあの記事ってどこいったっけ？」と思ったときも、この閲覧履歴を通して、見た記事を発見できるようになっています。
所感
一週間で実装させるつもりだったのですが、スマートフォンでiframeが正常に表示されなかったり、いろいろな問題が発生し、結局、２週間半ほどかかってしまいました。
最低限の機能は完成させることができたと思います。
今年になって２つめのWebサービスです。
- １つめは 読書メモアプリ「ヨミメモ」
- ２つめが今回の 「２chまとめアンテナメーカー」
今年は、あと１つくらいは何か趣味プログラミングで作りたいと思っています。
Let's Begin !
2chまとめアンテナメーカー
http://antena-maker.nekotool.com/
