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

うらぶろぐ

自分で参照するためだけのブログ。本家はこちら

本家ブログをGoogle Analyticsに登録するまでの方法

記事が一定数溜まってきたので、収益化に興味が湧いてきた。

することとしては、
googleアドセンスの登録。
www.google.co.jp

下準備

はてなブログProにアップデート

独自ドメインを利用可能になる。

独自ドメインを用意する

ドメイン名とは?
ドメイン名ってなに? | ドメイン名関連情報 | JPRS

ドメイン名をどう決めれば良いのかは、下記サイトが参考になった。
ドメイン名の決め方

ドメイン名を取得後は、はてなブログ独自ドメインを設定する。

自分はお名前.comでドメイン名を取得したので、下記サイトがとても参考になった。
www.mutant-tetsu.com
というか他に書き足す内容はほとんどなかった。一応はてな公式のドキュメントはこちら。
はてなブログを独自ドメインで利用する - はてなブログ ヘルプ

下準備が完了したら

オンライン ビジネス - ウェブサイトの収益化 | Google AdSense – Googleからログイン、またはアカウントを作成し画面の指示に従って登録をするだけ。

申請した結果

1回目は審査に落ちましたw記事数なんかは30記事くらいはあったし、一ヶ月くらい続けていたから大丈夫だと思っていたのに。。
メッセージは下記の通り。

サイトのナビゲーションが困難: お申し込みのウェブサイトを審査いたしましたが、サイトのナビゲーションが困難です。ナビゲーションの問題には、リダイレクト、ログインが必要またはアクセスが制限されたページ、無効なリンク、ポップアップの過剰な使用、電話アプリケーション、作成中または立ち上げ前のページなどが含まれます。

原因はサイトのナビゲーション。レイアウトがデフォルトのままだったからかな?他に初期のレイアウトで落ちた方っています?
以下、対策として行ったこと。

レイアウトの変更

具体的にはサイドバーがあるレイアウトにして画面遷移を意識したこと
テーマをインストールしてちょこっとCCSをいじりました。

ブログタイトルの変更

デフォルトの○○'s blogだと手抜き感が出ていたか?

プロフィール欄の充実

googleからしてもどんな人が記事を書いているのかわかった方が信用できるようなので簡単に追記。

一次審査の合格

で、再度申請してから丸1日後AdSenseにアクセスしたらアカウントが作られていました。(googleから何の連絡もなし)

自分のブログページのHTML で タグの直後に指定されたコードを貼り付ける、とのこと。
はてなブログ
設定 > 詳細設定タブ > 検索エンジン最適化 の「headに要素を追加」にコードを貼り付ける。
choromeのデベロッパーツールから確認して、タグ内にコードがあることを確認できた。

コードを貼り付けたことを申請するチェックボックスをチェックしたらまた審査開始w
最大3日って。。

1/1にコードを貼り付けたことを申請してから一週間後、何も音沙汰がない。。。
関係ないと思うけど、Google Analyticsのマイページに通知されていた3つのことを試しました。

Google Tag Assistant Recordingsのインストール

Google Tag Assistant Recordings
画面の指示に従うと、Chrome拡張機能に追加される。

目標設定の追加

当面の目標はPVを増やすことだけど、、適当に登録してみる。
1.目標設定
 テンプレート>ユーザーのロイヤリティ>お気に入りに追加
2.目標の説明
 ページビュー数
3.目標の詳細
 5pv超え
googleアナリティクスの登録

アナリティクスと Search Console をリンク

Search Consoleはこちらから。
web-tan.forum.impressrd.jp
このページが参考になりました。
自分のブログのurlを追加して「プロパティを追加」を押下。
サイトの所有権を確認する画面が表示されたので
自分は「HTML タグ」を選択した。
はてなブログの設定>詳細設定>解析ツール Google Search Console(旧 Google ウェブマスター ツール)欄にcontent="..." の ... にある英数字をコピーして貼り付ける。

うまく行けば自分のサイト
http://www.chitana.me/ の所有権が確認されました。と表示される。

審査状況

1/9現在、まだ審査中。。。

CakePHP3をUbuntu16.04にインストールする

諸事情によりUbuntuから開発を行うことに。

下準備

下記の環境が用意されていること(Cookbookより)

  • HTTPサーバー。例: Apachemod_rewrite が推奨されますが、必須ではありません。
  • PHP 5.5.9 以上 (PHP 7 も含む)
  • PHP mbstring 拡張
  • PHP intl 拡張

サポートされているデータベースエンジン

拡張モジュールが入っているか確認

php -m

余談だが、php -i はphpinfo の実行結果を表示してくれる。違いがわからなかったのでφ(..)メモメモ
それぞれ下記のコマンドで確認できる。

$ php -m | grep mbstring
$ php -m | grep intl

自分の環境でPHP intl 拡張がないためインストールする

$ sudo apt-get install php-intl
Composerのインストール

公式サイトみたら以前あったコマンドが消えていた。。。
$ curl -sS https://getcomposer.org/installer | php
$ sudo mv composer.phar /usr/local/bin/composer

$ php composer create-project --prefer-dist cakephp/app app_name

apache2の設定

AllowOverrideをNoneからAllに変更

/etc/apache2/apache2.conf
<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

mod_rewriteを有効にする

sudo a2enmod rewrite
sudo service apache2 restart

DBの設定は後で書くとして、
http://localhost/app_nameにアクセスしても404 notfoundだった。

結果だけ書くと、/var/www/html以下にapp_nameを置けば良い。

ここでapacheのDocumentRootの概念を知らなかったので少し詰まった。
UbuntuでApache2のドキュメントルートをユーザーディレクトリに変更する。 in Koonzの毎日作りかけブログ
参考に試したけど結局だめだったやり方。
のパスを書き換えたら403でアクセス拒否された。
000-default.confを変えたらアクセスはできたけどエラーが表示された。





参考にさせていただいたサイト
CakePHP3.xの詳細インストール手順 | jMatsuzaki

バックエンドとフロントエンド

文字通り、バックエンドはユーザから見えない部分、フロントエンドはブラウザから見えるような要素のこと。

ショッピングサイトでいうと、
フロント→ブラウザから閲覧できる部分。商品の一覧はカートの中身など、サイトのデザインも含む
バック→Webサーバ、デーバベースサーバの部分など

サーバサイドのDBやシステム設計を行うのはバックエンドエンジニアでフロントの人はあまりかかわらないそう。
両方担当するのが普通かと思っていました。
今さら聞けない!? 「フロントエンド」と「バックエンド」 - ITips(アイティップス)|転職@type

Leafletについて知っていること

Leafletとは
Web地図のためのJavascriptライブラリのひとつ。 他のライブラリとしてはOpenLayersなどがある。

Leaflet は広く使われているWeb地図のためのJavaScriptライブラリである。 2011年に最初にリリースされた[2]。 モバイルとデスクトップのプラットフォームのほとんどに対応し、HTML5とCSS3に対応している。 OpenLayersGoogle Maps API(英語版)とともに最も人気のあるJavaScript地図ライブラリの一つであり、FourSquarePinterestFlickrなどの有名なサイトで使われている。
Leafletを使うと、GISの知識のない開発者でも容易にタイルベースのWeb地図を表示できる。またGeoJSONから地物データを読み込んでスタイリングしたり、インタラクティブなレイヤーを作ることができる(クリックするとポップアップが表示されるマーカーなど)。

Leaflet - Wikipedia

で、OSMとは

OpenStreetMap(OSM)は、道路地図などの地理情報データを誰でも利用できるよう、フリーの地理情報データを作成することを目的としたプロジェクトです。
誰でも自由に参加して、誰でも自由に編集でき、誰でも自由に利用する事が出来ます。

LeafletやOpenLayersなどのJavaScriptライブラリを利用してウェブサイト上で表示させることができる。


地図上にマーカーを表示したり、パス(経路)を描画したり、検索ボックスをおいたりできるのはLeafletのようなライブラリが実現する。
自作地図: leafletで使えるおすすめプラグインまとめ - Qiita

タイルとは

地図タイルは通常256×256ピクセルの画像です。
画面に特定のエリアを表示する。新しい領域を表示するときはJavascriptのライブラリがタイルのダウンロードを行う。

移動やズームの機能、地図の新しい領域をユーザーが表示させる必要があるときに新しいタイルのダウンロードを要求する機能は、 Javascript の地図ライブラリによって実現されます(スリッピーマップ)。

JA:タイル - OpenStreetMap Wiki

jsの型取得する方法

自分用メモ
JSONに触ってarray じゃなく Object型ということを知ったw

qiita.com

OpenStreetMapを使うのに役立ちそうなサイト

マーカー・バルーン表示してる記事
Leaflet – OSMにgeoJSONでマーカーをつけたりできる便利なJavaScriptライブラリ | アンギス

大河内教授の憂鬱: OpenStreetMapでバルーン表示してみた

leafletというライブラリ
ぬるぬる動く!Web地図クライアント「Leaflet」を使おう! – GUNMA GIS GEEK


いずれPythonで実装する予定なので参考になりそう
python + OpenStreetMapで地図にデータをプロットする - Qiita

jQueryとajaxについて復習

ajaxを触ろうとしたら使い方を思い出せなかったので、復習のために書いておきます。

jQueryとは

簡単に言うと、javascriptを扱いやすくするためのライブラリ。

公式サイト:http://jquery.com/
使用する場合は公式サイトからダウンロードするか、コードに埋め込む。
処理対象の要素の部分をセレクタと呼ぶ。複数指定も可能。

ボタンをクリックすると文字列の色を変えてから消す処理。
hoge1.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>hoge</title>
</head>
<body>
    <p>てすてす</p>
    <button>色変わって消える</button>
    <script src="http://code.jquery.com/jquery-3.2.1.js"></script>

    <script>
        $('button').click(function() {
          //$(document).ready(function() { ←の短縮形
          $(function() {
           // pの部分がセレクタ
            $('p').css('color', 'blue').hide('slow');
          });
        });

    </script>
</body>
</html>

ajaxとは

Asynchronous JavaScript + XML の略
(読み方はえいすんくろなす?)JavaScript を使ってサーバーと通信しつつ、ページを書き換えることができる技術。これにより、ページ全体の読み込みを行わなくても部分的に画面を更新することができる。また、Asynchronousとある通り「非同期」で処理の完了を待たずに次の処理を行う。

ajaxで使うメソッドもjQueryの公式サイトから参照できる。
jQuery API Documentation

下記はajaxのget()を使ってテキストボックスに入力した文字列とその長さを返す処理。
jQuery.get() | jQuery API Documentation

hoge2.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>hoge</title>
</head>
<body>
    <p>てすてす</p>
    <p>
        <input type="text" name="name" id="name">
        <input type="button" id="btn" value="ボタン">
    </p>
    <div id="result"></div>
    <script src="http://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
        $(function() {
            $('#btn').click(function() {
                
                $.get('ajaxtest.php', {
                    name: $('#name').val()
                }, function(data) {
                    $('#result').html('msg:' + data.msg + '& len:' + data.length);
                });

            });
        });
    </script>
</body>
</html>

ajaxtest.php

<?php

$rtn = array(
    "msg" => htmlspecialchars($_GET['name'], ENT_QUOTES, "utf-8"),
    "length" => strlen($_GET['name'])
);

// json形式で返す
header('Content-Type: application/json; charset=utf-8');
echo json_encode($rtn);

参考にさせていただいたサイト
jQueryを使ってみよう。(基本編 セレクタ1) | 1:n – DETELU Blog

実用的なajaxの使い方
jQuery $.ajaxでJSON・JSONP読み込みに使用する主なオプション | iwb.jp