@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

トップ > javascript

ページによってGoogle Adsenseの数が異なる場合

javascript

ページによってGoogle Adsenseの数が違う場合ってありますよね。

例えば、はてなブログでは一覧ページと個別ページでは貼れる場所が異なるので、当然数も違うことがあります。もちろん、その場その場で呼び出しのコードを書けば良いのですが、一箇所でまとめたいなと思いまして、やってみました。

ページによってGoogle Adsenseの数が異なる場合

 

<ins class="adsbygoogle"></ins>の数を数えて、その分繰り返すだけで簡単です。はてなブログであれば、デザインのフッターの箇所に書いて上げれば良いと思います。

 

 

Google AdSense 成功の法則 57

Google AdSense 成功の法則 57

 

画面が一番下までスクロールされたら処理をする

javascript jQuery

気がついたら3月もなかばでしたね。2月は一度もブログを書いてなかったことになるけど、気にしないよ。
さて、タイムライン系の画面でよくある画面が一番下までスクロールされたら次のページを読み込む的なものってあるよね。jQueryでさっくり書いてみたので、忘れた頃にまた見なおすことにするよ。プラグインにして使いまわすのが良いんだろうけどね。
本題とは別だけど、フッターに操作や重要な情報がある場合にこの下の方までスクロールしたら次をロードする仕組みを入れるとたどり着けなくなってイラッとするから用法には注意するべきだと思うね。特にモバイルの場合とかは。

$(function() {
    $(window).scroll(function(ev) {
        var $window = $(ev.currentTarget),
            height = $window.height(),
            scrollTop = $window.scrollTop(),
            documentHeight = $(document).height();
        if (documentHeight === height + scrollTop) {
            // 一番下だよ
            alert('一番下だよ');
        }
    });
});

という訳で、一番下まできたらロードする処理を呼べば解決。一番下までじゃない場合（例えばフッターまで行かずにロードしたい）には、if文を多少変更すれば良いはずです。だたし、スクロール中に何度もロード処理が呼ばれないように気をつけてください。フラグなどでロード中であるか判定する必要はありそうだね。

パララックスやってみた 2。

javascript

前回は普通にやってみました。今回はスクロールすると、一部分が切り替わるサンプルです。
とは言え、切り替わるだけだと面白くないので、Ajaxで切り替わる部分のテンプレートを取得することにしました。全然難しくないですね。
テンプレートファイルを配列で定義して、順番にAjaxで取ってきて、差し替えるだけです。

こんな感じ。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>パララックス</title>
    <style type="text/css">
body {
  width: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100%;
  height: 100%;
}
#box {
  position: fixed;
  top: 40px;
  left: 60%;
  width: 20%;
  height: 200px;
  background-color: #ccc;
  color: #333;
}
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="box">BOX</div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript">
(function() {
    $(function() {
        var w = window.innerWidth,
            h = window.innerHeight,
            index = -1,
            files = [
                'template/1.html',
                'template/2.html',
                'template/3.html'
            ];
        $(document.body).css('height', 4 * h);
        $(window).scroll(parallax);
        
        function parallax() {
            var value = $(window).scrollTop(),
                i = Math.floor(value / h);
            if (index != i) {
                index = i;
                if (files[i]) {
                    $.get(files[i], function(html) {
                        $('#box').html(html);
                    });
                }
            }
        }
        parallax();
    });
})();
    </script>
  </body>
</html>

パララックスやってみた。

javascript

なんとなくパララックスをやってみたかったので、やってみました。
基本的には、windowのスクロールイベントを拾ってwindowのScrollTopを判断して処理をするだけですので、簡単です。難しいのは表現方法を考えたりすることではないでしょうかね。
jQueryを使えば簡単です。
$(window).scroll(function() { /* ここに処理を書く */ });
$(window).scrollTop()で取得した値を元に判定する。

サンプルはこちら。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>パララックス</title>
    <style type="text/css">
body {
  width: 100%;
  height: 4096px;
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100%;
  height: 100%;
}
#message {
  position: fixed;
  top: 10px;
  left: 10px;
}
#box {
  position: fixed;
  top: 40px;
  left: 10px;
  width: 60px;
  height: 60px;
}
    </style>
  </head>
  <body>
    <div id="message"></div>
    <div id="wrapper">
      <div id="box">BOX</div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript">
(function() {
    $(function() {
        var width = window.innerWidth,
            height = window.innerHeight;
        $(document.body).css('height', 4 * height);
        $(window).scroll(parallax);
        
        function parallax() {
            var value = $(window).scrollTop();
            $('#message').text(value);
            if (value <= height) {
                $('#wrapper').css('background-color', '#ccc');
                $('#box').css('left', 10 + value * width / height);
            } else if (value <= height * 2) {
                $('#wrapper').css('background-color', '#999');
                $('#box').css('left', 10 + (value - height) * width / height);
            } else if (value <=  height * 3) {
                $('#wrapper').css('background-color', '#666');
                $('#box').css('left', 10 + (value - height * 2) * width / height);
            }
        }
        parallax();
    });
})();
    </script>
  </body>
</html>

Backbone.jsガイドブック

book javascript backbone

を読みました。

Backbone.jsガイドブック

Backbone.jsガイドブック

前半はBackboneの概要について述べられており、1章はBackboneの基礎で、アーキテクチャの説明です。2章はBackboneのModel、Collection、View、Router、History、Backbone.syncについての説明です。3章はBackboneのリポジトリに含まれているサンプルアプリケーションについての解説が行われています。
後半はBackboneに限らずそれなりの規模のアプリケーション開発に必要な事項について述べられており、4章はRequireJSを使ったモジュール管理の説明でBackboneとの組み合わせの説明です。5章はユニットテストについてで、QUnitとJasmineを取り上げられており、Sinon.jsについても取り上げられています。6章はGruntを用いた、モジュール管理、テストなどの自動化について説明されています。
最後に7章は、これまでの内容を使って電話帳のアプリを作っていく流れを紹介しています。面白いのは、PC用とモバイル用のものを作っていくところで、モバイル用では、jQueryMobileを利用しています。jQueryMobileとBackboneとでは、カバーする領域が重なっているところがあるので、その折り合いをつけていくのが非常に興味深くて面白いところでした。BackboneとjQueryMobileとで開発を考えている場合には非常に参考になっておもしろいかと思います。

目次

  • 1章 Backboneの基礎
  • 2章 Backboneオブジェクト
  • 3章 サンプルアプリケーション「Todos」
  • 4章 JavaScriptにおけるモジュール管理
  • 5章 アプリケーションのテスト
  • 6章 タスクの自動化
  • 7章 Backboneアプリケーションの開発
  • 付録
    • A Underscore.jsリファレンス
    • B Backbone.js リファレンス
    • C jQuery.Deferred
    • D RailsでBackboneを使う