読者です 読者をやめる 読者になる 読者になる

はてなブログカスタマイズメモ

はてなブログのカスタマイズ、書き方などのメモ、チートシートです。

アプリ広告バナーをランダム表示するスクリプトを作ってみました

 Zucksアフィリエイトなど、アプリの広告をサイトに掲載するときに使用するためのスクリプトです。

 設定した内容からランダムでひとつ選んで表示するだけの簡単なものではありますが。

内容

 特定の形式で書いたリストからランダムで選択したバナーを、指定したタグに入れます。

 例えば

var list = [
  // アプリ1
  {
    'iphone': 'iPhone向けバナー1', 
    'android': 'Android向けバナー1', 
  }, 
  {
    'iphone': 'iPhone向けバナー2', 
    'android': 'Android向けバナー2', 
  }, 
  // デフォルト表示
  {
    'default': 'PC向けバナー'
  }

というリストを書いた場合。iPhoneで開くと「iPhone向けバナー1」と「iPhone向けバナー2」が、それぞれ1/2の確率で表示されます。 Androidの場合は「Android向けバナー1」または「Android向けバナー2」となります。

 iPhone/iPad/iPod touchでもAndroidでもない場合は、「PC向けバナー」になります。

 単純に、リストの中でiPhoneまたはそれ以外の表示内容を指定していて、そこからランダムで選択されたものが表示されるというものです。  キーに「priority」として数を入力すると、その項目の出現率がpriority分上昇します。(ただその数値分水増ししているだけです)

  {
    'priority': 3
    'iphone': 'iPhone向けバナー3', 
    'android': 'Android向けバナー3', 
  }, 

 これで3倍!

設置方法

 内容は単純なのですが設置が少しややこいかもしれない。

 4つに分けたそれぞれのコードは別々のところにあっても大丈夫ですが、ここでは例として「デザイン > カスタマイズ > 記事 > 記事上」に全て書くことにします。

スクリプトの設置

 メインとなるスクリプトを記載します。

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script lang="text/javascript">
<!-- Version 1.0.1 Copyright http://http://hatebu-memo.scriptlife.jp// -->
function show_banner(banner_id, list) {
    // OSの判定
    // OSによってバナーを変える
    os_key = 'default'
    if (navigator.userAgent.indexOf('iPhone')>0
        || navigator.userAgent.indexOf('iPad')>0
        || navigator.userAgent.indexOf('iPod touch')>0){
        // iPhone
        os_key = 'iphone'
    } else if ( navigator.userAgent.indexOf('Android')>0 ) {
        // Android
        os_key = 'android'
    }
    
    // 表示するバナーをランダムで設定
    // priorityが設定されていたら、そのぶんだけ確率を上げる
    index_list = [];
    for (var i=0; i<list.length; i++) {
        // 対応するバナーがない、文字列が空の場合は無視
        if ( false == (os_key in list[i]) ) { continue; }
        if ( list[i][os_key] == false ) { continue; }
        
        if ( 'priority' in list[i] ) {
            priority = list[i]['priority'];
        } else {
            priority = 1;
        }
        for(j=0; j<priority; j++) { index_list.push(i); }
    }
    
    idx = index_list[ Math.floor( Math.random() * index_list.length ) ];

    $('#'+banner_id).html(list[idx][os_key])
}
</script>

(jqueryは他で読み込んでいれば外してしまってもかまいません)

バナーを表示させるための要素を設置

 バナーを表示させるための要素を、表示したい場所に設置します。

 そのときに、「id='xxx'」という形でIDをつけてください。

 例としてdivタグを使います。

<div id='banner-sample'>
</div>

 また、バナーの表示する位置、大きさの調整などはこのdivタグで行うとよいです。

 例えば表示幅を300pxにしたい場合は、

<div id='banner-sample' style='width: 300px'>
</div>

などとします。

表示するバナーのリストを作成

 バナーリストを作ります。

 JavaScriptの配列に、特定の要素をキーにして列挙していきます。

<script lang="text/javascript">
var list = [
  // デフォルト
  {
    'default': 'PC向けバナー'
  }, 
  // アプリ1
  {
    'iphone': 'iPhone向けバナー1', 
    'android': 'Android向けバナー1', 
  }, 
  {
    'iphone': 'iPhone向けバナー2', 
    'android': 'Android向けバナー2', 
  }, 
  {
    'priority': 3
    'iphone': 'iPhone向けバナー3', 
    'android': 'Android向けバナー3', 
  }, 
];
</script>

「iphone」がiPhone/iPad/iPod touch向け、「Android」がAndroid向け、「default」がその他になります。

「priority」は少し特殊で、そこに指定した数字だけ、他のバナーより出現率が○倍に増えます。

  • 「default」に設定する広告のポイント

 「default」では主にPCのときに表示されることになると思うので、それに合わせたものがいいと思います。

 AdSenseが無難かなあ。

 それでAdSenseを貼り付けるときに、コードが長くなってしまうので、こちらのコードを使っていったん文字列にしてから入れるとわかりやすいかと思います。

uxlayman.hatenablog.com

var adsenseCode = (function () {/*

<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ -->

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

var list = [
  // デフォルト
  {
    'default': adsenseCode
  }, 
  ...

みたいな感じで。

 また、AdSenseが表示されたときに、その広告の上に「スポンサーリンク」などが出ていないといけないので、そこも注意点です。

 差し込むコードの中に一緒に入れてしまうか、表示領域の上に用意しておくかはお好みで。(うちは表示領域の上に「スポンサーリンク」と書いてしまってます)

表示を行う

 最後に表示です。

<script lang="text/javascript">
$(function() {
  show_banner('banner-sample', list);
});
</script>

というようにshow_bannerファンクションを呼び出して下さい。

これで記事のページ上に、バナー広告が出ていると思います。

このスクリプトを作成した目的

 アプリのほうのバナーなどもちょっと設置してみるかなあと思ってZucksというASPを見ていたのですが、ちょっと個人的に困ったのでそれを解決したかった。

 解決したかったことは2つ。

  • iPhoneとAndroidの広告が別になっていた

 まずこれ。うちのブログはiPhoneユーザーもAndroidユーザーも訪れてくれるんですが、Zucksから提供されていたURLはiTunesストアやGooglePlayストアに直接リンクされておりましたので、それぞれに合わせたURLを出したいなと。

  • 標準機能ではランダム表示ができなかった

 次にこれ。一度設置したら手動で貼り替えるまで、同じ広告が出続けることになってしまう。

 Smart-Cなどはランダム表示のスクリプトを用意してくれていたみたいだったのですが…PHPだったのでサーバーが必要でちょっと断念。なくはないけど…

 という、この二点を解決しようと思ったときにJavaScriptでそこそこ簡単に書けないかなあと思って作りました。

 もし何かのお役に立てれば幸いです。

改良のポイント

 単純にランダムで要素を入れているだけなので、別にバナーローテーションだけじゃなく使えるかも知れません。

 また、JavaScriptで動かしておりますのでサーバーなどを別途用意する必要はないのですが、いかんせんリストが長くなったりすると面倒なので、別サーバーから読み込む形にしてもよいかもしれません。

 そうすると、リストの更新などがそちらのデータを修正することで行えるようになります。

 最終的にshow_bannerにIDとリストを渡してやればよいので、リストの作り方や表示用のタグのレイアウトなんかは各自調整するところかも。

免責事項ならびに利用、改造について

 このスクリプトを使用したことで被った損害・損失に対しては、一切の責任を負いかねます。自己責任でご利用下さい。

 著作権は放棄しませんが改造、転載等は許可します。

 ただし、改造、転載など、本サイト外で配布されたスクリプトについては、私には責任の無いものとします。

修正履歴

  • 2016/9/3 1.0.1 公開 iPad/iPod touch対応、その他デバイス(主にPC向け)対応
  • 2016/9/3 1.0 公開

(Proのみ) はてなブログでAMP対応してみた結果、一時的に下がったもののすぐ戻りましたという話

 まずはこちらのグラフをご覧下さい。これはうちのAdSense全体の16日から22日のグラフです(数字は割愛)

f:id:kagerou_ts:20160823223212p:plain

AMP適用したのが15日です。その後16日は上向いたものの、やはり下がっています。

下降するのは一時的?

 ですがその後、2日くらい下降した状態なのが続いた後でまた上向きになり、現在は変わらない状態になっています。

 まとめてると1日後に半分くらいになって、2日後くらいから元に戻った、というところでしょうか。

 …というか、そもそもAMPで下がるぶん=AdSenseが表示されないぶん、というはずなので、全体の数値に影響がでること自体がおかしいといえばそうです。

 はてなブログ以外のブログもあって、そちらはなにも変更していないのに引っ張られるかのようなタイミング。

 クリック率も結構きまぐれなところはあるし、これくらいは誤差の範囲だったのかなあ…って気もしますけど。

 ただ、この何故か全体的に下がるという現象は以前にAMPを適用してみたときにも発生しており、そのときは下がったところでビビって戻してしまったのですが2度目ではあるので偶然…なんだろうか、という感じでもあります。

 そして、増減でいればその後に上昇しているというのも、事実としてはあります。

 最適化か何かが動いていたということなんだろうか…

AMPでのアクセスはどれくらい?

 はてなブログでは、AMPページで読まれた場合はどうもURLの後に「amp=1」という引数を付けてアクセスが来るようです。

 なのでアナリティクスの検索バーのところにamp=1といれてやって集計した結果、うちだとPVは261、全体の2.23%程度でした。

 うーん、それも一つの記事が<b192PVとか占めているわけで…データとしては微妙ですね

 ただ、URLだけの話なら以前からあったんじゃないかって思って7月とかを同じように検索してみたのですがamp=1は見当たらず。

 サイト単位で何かしらの判別をしているのかもしれません。

PV数にプラスになった?

 …というと、うちのデータとしては、「可もなく不可もなく」という感じです。

 ただ今のところマイナスにはなっていないので、ひとまずこのままオンにしていってみようかと思います。

 AMP自体は悪いものではないですし、まあいいんじゃないかなーみたいなところで。


 AMPをオンにした直後に下がってびっくりした後、またその影響はなかったように戻ってきたので、同じような現象が出た人が居た場合にもうちょっとだけ様子を見てみるといいかもしれないですよ、ということで。

(Proのみ) はてなブログでAMP対応する

 AMPというページ表示の高速化について

s-supporter.hatenablog.jp

 という記事を見かけまして、ちょっと試してみようと思いました。

AMPとは

 Accelerated Mobile Pages (AMP) とは、文字通りモバイル向けの高速ページ表示のプロジェクトです。

https://www.ampproject.org/ja/docs/get_started/about-amp.htmlwww.ampproject.org

 発表されたのは去年(2015年)10月みたいなのですがGoogleが進めているプロジェクトであり、だから検索結果などにいち早く取り込まれていっているわけですね。

Official Google Blog: Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web

はてなブログでAMP配信する設定

 はてなブログでは、記事をAMPで配信することが設定ひとつでできます。

help.hatenablog.com

 ただしまずProである必要があります。

 それで、「設定 > 詳細設定 > AMP」の設定をチェックすると、記事がAMPで配信されるようになります。

f:id:kagerou_ts:20160815195958p:plain

 AMPで配信された結果は、記事のURLの後ろに「?amp=1」とつけることで確認できます。

 たとえばこの記事であれば、次のようなURLになります。

http://hatebu-memo.scriptlife.jp/entry/2016/08/15/204823?amp=1

その効果は?

 上の記事にもあったように、Google検索では結果的に強くなるところがあるようなので、検索からのアクセスアップは見込めるかもしれません。

s-supporter.hatenablog.jp

 実際に、AMPが有効に働いたのではというお話も。

www.yutorism.jp

ポケモンgoで検索した時の、検索トップに表示されていたようです。この『トップニュース』という表示枠は、AMPに対応している記事の中から、その瞬間にバズっている記事が表示されるようです。

諸刃の剣

 しかしですね…このAMPをはてなブログで設定すると、以下のような制約があります。

AMPを利用する際の注意点

はてなブログにおいてAMPを利用する際には、次のような制約があります。

・はてなブログのデザインテーマは反映されません
・デザイン設定でカスタマイズできるサイドバーモジュールや、HTMLの自由記述(記事上下、ヘッタ、フッタなど)は配信されません
・記事中のstyle属性など、スタイル関連のHTMLは反映されません
・記事中のJavaScriptは反映されません(このため広告などが表示されないことがあります)
 (HTTPSでなく)HTTPで配信されている画像は表示されません(はてなフォトライフやInstagramなどはHTTPSに対応しています)
・AMPではページ上部にあるiframeの表示に制約があるため、例えば記事の先頭にブログカードを配置したときには表示されません
・はてなカウンターには対応していません(AMPで表示されてもカウントされません)

(はてなブログ ヘルプより)

 またJavaScriptが動作しないため、JavaScriptを使用してレイアウトしているものなどの動作に支障が出ます。

 うちのブログで具体的にどういうことになったかというとAdSenseが消えました。全て。

 あとCSSが読み込まれなくてヨメレバが無残。

 AdSenseはフッタに指定していたので、

デザイン設定でカスタマイズできるサイドバーモジュールや、HTMLの自由記述(記事上下、ヘッタ、フッタなど)は配信されません

によって排除された感じです。コードが読み込まれていてもAMPでは動作しなかったでしょうけれどね…

 他にもJavaScriptで表示させている広告系、カスタマイズしているものなども動かないかもしれないのでそういう意味ではマイナスに作用するかもしれません。

AMP対応の広告を表示するには

 AMPページでもAdSenseなど、広告を表示する方法は用意されているようです。

www.iscle.com

 しかしAMP用に設定しなくてはいけないみたいで…現在のはてなブログでは実質無理ですね…
(記事ひとつひとつにHTMLで設定していけばあるいは、と思いますが現実的ではない。そのうちAMP向けヘッダ/フッタが実装されることでしょう)




 といいますかぶっちゃけ、前に一度設定してみたことはあったんですが翌日クリック数が半減しててびびって戻したことはあるんですよね…

 もともとそんなに多くなかったから、たまたまかもしれないですけどね…

 それでまあ、もともと試してみるか程度の軽い気持ちだったんで正式対応後でいいかと思って戻していたのですが、Google先生の推し方が思ったよりも強いならもう少しちゃんと試してみるか…と思った感じです。

 どのみちそっちをGoogle先生が推してくるなら、否応なしに選択することになりますしね。グーメン。



















 あとこれまためっさ余談かつ僕の感想レベルの話になりますけど。

ただ、広告収入に限って言えば、クリック報酬型の広告が表示されないのならキャッシュポイント、コンバージョンポイントが違う広告(アフィリエイト)やサービスを提供すればよいのでは?とも私は考えますが。

 について思うところとして商売としては変化に対応していくのが正しい。

 でも、うちみたいな「何か書いたついでに広告」タイプだと、「広告のための記事を書く」「収入を諦めるか」の二択にしろという意味にも聞こえるのですよね。

 それだったらまあ、中途半端なところは覚悟の上でいけるところまで現状維持でもって気持ちにもなりますよ。

 これは別に私のような半分以上趣味運営を対象にした話ではないと承知しつつも、ちょっともやっとしたので書き殴っておきます。

 こういった、収益モデルに合わせたコンテンツづくりというのは商売としては正しいのですが、当然その収益モデルにコンテンツの内容が合う/合わないというものもありまして。流行の収益モデルに適合することのできなかったコンテンツが縮小されていくのは運命ではありますが。ただ悲しみながら見送るしかない。

 現実的にはこんな二択ではなく、はてなブログが正式対応してamp-adが普通に使えるようになれば何も問題ありませんはずなのでそのリリースを待つ感じですが。ですよね?

(2016/11/06追記)

www.kokoro-fire.com

 ということで、どんどんampは広がっているようですね…

 自分のところを確認してみても、確かに地味にある。11月ぶんで測ると、全体に対して14%ほど…

 ちゃんと対応考えていかないといけない頃合いですね。やはり。

(2016/11/26追記)

hatebu-memo.scriptlife.jp

 AMP対応AdSenseを設置してみました。

Markdownでテーブルを表現する方法

 データなどを纏めていると必要になってくるのがテーブルの表記。

Markdownでの簡易表記

簡単なテーブル構成であれば、Markdownの表記がわかりやすい。

これは簡単で、「|」で区切るだけ。

最初の一行が見出し、次が行の属性、そこから先にテーブルに並べたい内容になります。

|見出し1|見出し2|見出し3|
|-------|-------|-------|
|内容1-1|内容1-2|内容1-3|
|内容2-1|内容2-2|内容2-3|
見出し1 見出し2 見出し3
内容1-1 内容1-2 内容1-3
内容2-1 内容2-2 内容2-3

これが基本形。
二行目の「-」はいくつでもいいので、適当に見栄えを整えるとよいです。

センタリングなどをしたいときは、

|見出し1|見出し2|見出し3|
|:------|:-----:|------:|
|左寄せ|センタリング|右寄せ|
見出し1 見出し2 見出し3
左寄せ センタリング 右寄せ

というように、二行目に「:」を入れて指定します。

複雑なテーブル構成

これ以上の複雑な構成、例えばカラムの結合などをして表示したいとなったらHTMLを直接書いてしまったほうが早い。

<table>
<tr>
  <th>見出し1</th>
  <th>見出し2</th>
  <th>見出し3</th>
</tr>
<tr>
  <td>内容1-1</td>
  <td>内容1-2</td>
  <td>内容1-3</td>
</tr>
<tr>
  <td colspan=2>内容2-1</td>
  <td>内容2-3</td>
</tr>
</table>
見出し1 見出し2 見出し3
内容1-1 内容1-2 内容1-3
内容2-1 内容2-3

みたいに。

Markdownでの数学記号の書き方

 Markdownで使える数学記号についてまとめていくページ。

 とりあえず作って追記していこうかと思います。

 基本的にははてなでの書き方というより、texの記法を使っている感じです。

分数

[tex:{\frac{分子}{分母}}]

1/2を表現したいときは、

[tex:{\frac{1}{2}}]

とすると{\frac{1}{2}}となります。

根号 (ルート)

いわゆるルートというやつ。

[tex:{\sqrt{数字}}]

√2としたいときは、

[tex:{\sqrt{2}}]

とすると{\sqrt{2}}となります。

累乗

aをn乗するときは、

[tex:a\^n]

と書く。

a^n

はてなブログでは普通にa^nとすると、anという階乗表記になるようです。

ただこれがtex表記に混ざると、逆にtex表記が無効化されてしまうみたいなのでエスケープしています。

例えば{60 = 2^2 \times 3 \times 5}という式を書きたいときに、

[tex:{60 = 2^2 \times 3 \times 5}]

とすると [tex:{60 = 22 \times 3 \times 5}] となってしまいました。

絶対値

 絶対値はそのまま、|を入れてやればよいです。

[tex:|a|]

とすれば、 |a| になります。

 これは分数でも有効。

[tex:|{\frac{1}{2}}|]

とすると、 |{\frac{1}{2}}| になります。

[tex:{\frac{|1|}{|2|}}]

というように分子、分母に指定してやると、 {\frac{|1|}{|2|}} となります。

参考リンクなど

TeXでの数式の書き方

http://izumi-math.jp/sanae/report/suusiki/suusiki.htm

Markdown記法 チートシート - Qiita

独自ドメイン設定が、何度も「ドメインの設定状況:エラー」となってしまう場合の対処法

 さっそくの投稿は、このブログを設定していたときのことです…

ブログの作成ができない

 本ブログははてなブログでのカスタマイズなどについて残していくつもりだったので、名前もシンプルに「はてなブログカスタマイズ」というふうにしました。

 それでそのままブログを作成しようとしたら、

f:id:kagerou_ts:20160807221104p:plain  

使用できない文字が含まれています。英数字で始まり、ハイフンと英数字が続く必要があります。

 ええー…?

 要件は満たしているはずですが、おそらく「hatenablog」がまずかった。

 たぶん、公式と紛らわしくなるような文字は禁止されているのでしょう。(そう言ってくれればいいのに…)

独自ドメインの設定もできない

 それでブログのURLはとりあえずクリアして、独自ドメインのほうはそのまま作って設定をしてみると、

f:id:kagerou_ts:20160807221406p:plain

ドメイン名が正しくありません

 こちらもチェックされているみたいでした…

ドメインの設定には時間が必要

 仕方ないので適当に縮めてみたのですが、これは設定できても独自ドメインが有効になっていないよう。

 確認してみると、

f:id:kagerou_ts:20160807221501p:plain

ドメインの設定状況: エラー

 とだけなっていて、結局有効になっていない…

 「ドメイン設定をチェック」してみると、そのときは「有効」になるんだけどその後やっぱりエラーになってしまう。

 それでどうしたかといいますと、さらに1時間くらい経った後、「ドメイン設定をチェック」をしてみたら無事に反映されました。

 DNSの設定が完了していなくてレコードが見つからない場合は、「エラー レコードが見つかりません」という表示になるのですが、どうやらそのメッセージではなくなっても、時間が必要な場合があるようです。

プライバシーポリシー、広告について

当サイトに掲載されている広告について

 当サイトでは、第三者配信の広告サービス(Googleアドセンス)を利用しています。
 このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報 『Cookie』(氏名、住所、メール アドレス、電話番号は含まれません) を使用することがあります。
 またGoogleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、こちらをクリックしてください。

 

当サイトが使用しているアクセス解析ツールについて

 当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。
 このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。
 このトラフィックデータは匿名で収集されており、個人を特定するものではありません。
 この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。
この規約に関して、詳しくはこちら、またはこちらをクリックしてください。

 

 

 

変更履歴

2016/8/7 初出掲載