Rail4でGoogle Place APIを利用した位置情報検索サービスの作成
キーワードで位置情報を検索して検索結果の任意の情報をDBへ保存、そして、DBへ保存した位置情報をGoogle Mapsで表示するアプリケーションを作ってみます。
キーワードから位置情報を検索するのに、Google Places APIのRuby用のラッパーライブラリであるmarceldegraaf/google_placesをRails4アプリケーションにインストールします。
DBへ保存した位置情報をGoogle Mapsで表示させるのに、gmaps4railsをRails4アプリケーションにインストールします。
また、作成したアプリケーションはherokuにpushしますのでRailsのデータベースドライバとしてPostgreSQLを選択します。
PostgreSQLの準備
PostgreSQLインストール
データベースユーザ作成
PostgreSQLにpostgres
ユーザで接続します。
1
|
|
create user
SQLを実行して、データベースユーザとしてgoogle_place_sample
をDB作成権限を付与して作成します。
1
|
|
Railsプロジェクト作成
Railsプロジェクト作成
新しいRailsプロジェクトを作成します。
1 2 3 |
|
therubyracer
Gemfile
のJavascriptエンジンであるtherubyracer
の設定行をアンコメントします。
1 2 |
|
therubyracer
ライブラリをインストールします。
1
|
|
PostgreSQLデータベース接続設定
PostgreSQLデータベース接続情報に接続データベースユーザの情報を追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
Bootstrap3インストール
Gemライブラリのインストール
Gemfile
に追記します。
1 2 3 4 5 6 7 8 |
|
Gemライブラリをインストールします。
1
|
|
bootstrap-sassを使用する準備
今回はSass
というプリプロセッサに対応したbootstrap3
をインストールしているのですが、CSSの//= require
行はSassでは文法として使用できない>ので注意が必要です。そして、Sass拡張子のファイルやその他のスタイルシートであっても、Bootstrapからmixinsや変数を利用できないので//= require
>行は利用できないということです。
本家GiHubのREADMEに従い、app/assets/stylesheets/application.css
は削除します。
1
|
|
app/assets/stylesheets/application.css.scss
を新規作成します。
1 2 |
|
app/assets/javascripts/application.js
にBootstrap関連のJavascriptsライブラリをrequireします。
1
|
|
app/views/layouts/application.html.erb
のhead
タグにbootstrap関連のスタイルシートをincludeする設定とメディアクエリーを使用するためのviewport設定を追記します。
1 2 |
|
ナビゲーションメニュー
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
Jumbotron(ジャンボトロン)
app/assets/stylesheets/theme-style.css.scss
を作成し、スタイルを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
app/assets/stylesheets/application.css.scss
に作成したtheme-style.css.scss
を読む込むように設定します。
1
|
|
次にJumbotron(ジャンボトロン)を表示するためのコードを記述します。
1 2 3 4 5 6 7 8 9 10 |
|
Railsのフラッシュメッセージ表示
コントローラ内でModelの保存や削除の成功/失敗などのメッセージを変数に格納された場合にはJumbotron(ジャンボトロン)の上部にします。
1 2 3 4 5 6 7 8 9 |
|
google_placesライブラリでキーワードから位置情報を取得する
https://github.com/marceldegraaf/google_placesをインストールすることで、東京 焼き肉
とか沖縄 しまぶた屋
などのキーワードで検索して位置情報などを取得することができるようになります。
Gemライブラリのインストール
Gemfile
に追記します。
1 2 3 |
|
Gemライブラリをインストールします。
1
|
|
コントローラとビューの生成
今回はscaffold
で生成しません。
rails g controller
コマンドを使用してコントローラとビューを生成します。
アクション名 | 役割 | ビューの生成 |
---|---|---|
index | 検索フォームと登録済み位置情報テーブル | |
list | Google place API検索結果の表示 | |
show | 当該レコードの位置情報を表示 | |
create | 当該位置情報をDBへ保存 | |
destroy | 当該位置情報をDBから削除 |
1
|
|
app/controllers/place_controller.rb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
|
app/views/place/index.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
|
app/views/place/list.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
|
app/views/place/show.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
モデルの生成とDBマイグレーション
位置情報を保存するためのplace
モデルを生成します。
1
|
|
DBを作成、マイグレーションを実行します。
1 2 |
|
ルーティング設定
1 2 3 4 5 6 7 8 9 10 |
|
ここまでのサンプルアプリケーション
google_placeライブラリを使った位置情報検索サンプルアプリケーション
gmaps4railsライブラリでDBに保存した位置情報からマップを作成する
ここまでの作業でキーワード検索でリストアップされた施設の位置情報をDBへ保存することが出来ました。
ここで保存している位置情報とは施設名
、住所
、経度
、緯度
です。
経度
と緯度
の情報があればGoogle Maps
上にマークを表示させることが出来ます。
apneadiving/Google-Maps-for-Rails (gmaps4rails)ライブラリを利用することで簡単にDBに保存された経度
、緯度
を使用してGoogle Mapsを利用できます。
Gemライブラリのインストール
1 2 3 4 |
|
Gemライブラリをインストールします。
1
|
|
gmaps4railsライブラリの使用準備
app/views/layouts/application.html.erb
のhead
タグにGoogle Maps関連のライブラリを読み込む設定を追記します。
1 2 |
|
app/assets/javascripts/application.js
にGoogle Maps関連のJavascriptsライブラリをrequireします。
1 2 |
|
underscore/underscore.jsをapp/assets/javascripts/underscore.js
として作成します。
Google Mapsをレスポンシブで表示するスタイルシート
app/assets/stylesheets/gmap4rails.css.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
app/assets/stylesheets/gmap4rails.css.scss
をimportします。
1
|
|
showアクションでMapを表示する
app/controllers/place_controller.rb
1 2 3 4 5 6 7 |
|
app/views/place/show.html.erb
先述したapp/views/place/show.html.erb
の</table>
タグと<button type="button" class="btn pull-right btn-lg btn-default">
タグの間に以下コードを追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
無事、Google Mapsが表示されました!
ここまでのサンプルアプリケーション
CentOS6でPostgreSQLインストール
Rails4でBootstrap3を使う(ついでにherokuへpush)で書いたエントリーからPostgreSQL
インストール手順を抜き出しただけのエントリーです。
PostgreSQLの準備
PostgreSQLインストール
PostgreSQLの公式yumレポジトリからインストールします。
1 2 |
|
PostgreSQLインストール直後のデータベースディレクトリである/var/lib/pgsql/9.3/data
を削除してデータベースを初期化(initdb
)し、postgresql-9.3サービス
を起動します。ついでに、自動起動も設定します。
1 2 3 4 |
|
PostgreSQLの認証方式をPeerからTrustへ変更
https://www.postgresql.jp/document/9.3/html/auth-methods.html
PostgreSQLではデフォルトの認証方式としてPeer認証
が設定されています。Peer認証とは、カーネルからクライアント上のシステムユーザ名を取得し、PostgreSQLデータベースユーザと同一である場合のみ接続が許可される仕組みです。PostgreSQLでは、デフォルトではpostgres
データベースユーザしか存在しないため、UnixユーザもPostgreSQLをパッケージインストールすると作成されているpostgres
である必要があります(su - postgres
しないとダメということ)。
Peer認証
だとUnixのスーパーユーザであるroot
であってもpostgresデータベースユーザへの接続は許可されません。
1 2 3 4 5 |
|
今回は、サーバに接続できる全Unixユーザから全データベースユーザへの接続が許可されるTrust認証
に変更します。
Peer認証
からTrust認証
への変更は/var/lib/pgsql/9.3/data/pg_hba.conf
を修正します。
1 2 |
|
設定ファイルを修正したのでpostgresql-9.3
サービスを再起動します。
1
|
|
Railsアプリケーション用のデータベースユーザを作成
PostgreSQL 9.3ではCREATE USERはCREATE ROLEの別名になりました。 唯一の違いは、CREATE USERという名前でコマンドが呼び出されると、デフォルトでLOGINになり、CREATE ROLEという名前でコマンドが呼び出されると、デフォルトでNOLOGINとなる点です。
https://www.postgresql.jp/document/9.3/html/sql-createuser.html
PostgreSQLのスーパーユーザであるpostgres
データベースユーザで接続します。
1
|
|
今回作成するRailsアプリケーションのプロジェクト名と同一のbootstrap3_sample
というデータベースユーザを作成し、データベース作成権限とログイン権限を持つように設定します。
1
|
|
上記SQLは以下コマンドと同じ効果があります
1
|
|
createuser
コマンドはpostgresql93(末尾の数字はバージョン番号なので適宜目置換を!)
RPMパッケージに付属しているPostgreSQLのデータベースユーザ(正確にはロール)を作成するためのコマンドです。SQLでのユーザ作成とは異なり、コマンドでパスワード文字列を指定することは出来ず、-Pオプション
によってパスワード文字列を指定するプロンプトが表示されます。
データベースユーザのパスワードがシステムカタログ上に保存される際に暗号化するかどうかはENCRYPTED/UNENCRYPTED
で明示するか、そうでない場合は、/var/lib/pgsql/9.3/data/postgresql.conf
のpassword_encryption
設定パラメータに依ります。password_encryption
設定パラメータがonの場合に暗号化が有効(default: on)です。
先述した通り、create user
SQLはログイン権限オプション(login)を明示しなくても有効となりますし、createuser
コマンドでもログイン権限オプション(–login)がデフォルトで有効なので、ここでは指定していません。この辺りのSQLやコマンドの挙動はPostgreSQLバージョンにも依ると思うので自信の無い場合はログイン権限オプションを明示した方がいいかもしれません。
Rails4でBootstrap3を使う(ついでにherokuへpush)
今まではRailsアプリケーションのデザインを独学でCSS書いたりjQueryプラグイン入れたりしてたのですが、今更ながらboootstrapを利用しようと思い始めました。
Ruby on RailsでBootstrap3をインストールする手順を纏めておきます。
今回はRailsアプリケーションのプロジェクト名としてbootstrap3_sample
という文字を使用することにします。
また、ここで使用しているRailsバージョンはRails 4.1.6
です。
1 2 3 |
|
作成したアプリケーションはherokuにpushしますのでRailsのデータベースドライバとしてPostgreSQL
を選択します。それに併せてPostgreSQLのインストールや設定についても自分への備忘録として残しておきます。
Bootstrapを使用するまで
PostgreSQLの準備
PostgreSQLインストール
PostgreSQLの公式yumレポジトリからインストールします。
1 2 |
|
PostgreSQLインストール直後のデータベースディレクトリである/var/lib/pgsql/9.3/data
を削除してデータベースを初期化(initdb
)し、postgresql-9.3サービス
を起動します。ついでに、自動起動も設定します。
1 2 3 4 |
|
PostgreSQLの認証方式をPeerからTrustへ変更
https://www.postgresql.jp/document/9.3/html/auth-methods.html
PostgreSQLではデフォルトの認証方式としてPeer認証
が設定されています。Peer認証とは、カーネルからクライアント上のシステムユーザ名を取得し、PostgreSQLデータベースユーザと同一である場合のみ接続が許可される仕組みです。PostgreSQLでは、デフォルトではpostgres
データベースユーザしか存在しないため、UnixユーザもPostgreSQLをパッケージインストールすると作成されているpostgres
である必要があります(su - postgres
しないとダメということ)。
Peer認証
だとUnixのスーパーユーザであるroot
であってもpostgresデータベースユーザへの接続は許可されません。
1 2 3 4 5 |
|
今回は、サーバに接続できる全Unixユーザから全データベースユーザへの接続が許可されるTrust認証
に変更します。
Peer認証
からTrust認証
への変更は/var/lib/pgsql/9.3/data/pg_hba.conf
を修正します。
1 2 |
|
設定ファイルを修正したのでpostgresql-9.3
サービスを再起動します。
1
|
|
Railsアプリケーション用のデータベースユーザを作成
PostgreSQL 9.3ではCREATE USERはCREATE ROLEの別名になりました。 唯一の違いは、CREATE USERという名前でコマンドが呼び出されると、デフォルトでLOGINになり、CREATE ROLEという名前でコマンドが呼び出されると、デフォルトでNOLOGINとなる点です。
https://www.postgresql.jp/document/9.3/html/sql-createuser.html
PostgreSQLのスーパーユーザであるpostgres
データベースユーザで接続します。
1
|
|
今回作成するRailsアプリケーションのプロジェクト名と同一のbootstrap3_sample
というデータベースユーザを作成し、データベース作成権限とログイン権限を持つように設定します。
1
|
|
上記SQLは以下コマンドと同じ効果があります
1
|
|
createuser
コマンドはpostgresql93(末尾の数字はバージョン番号なので適宜目置換を!)
RPMパッケージに付属しているPostgreSQLのデータベースユーザ(正確にはロール)を作成するためのコマンドです。SQLでのユーザ作成とは異なり、コマンドでパスワード文字列を指定することは出来ず、-Pオプション
によってパスワード文字列を指定するプロンプトが表示されます。
データベースユーザのパスワードがシステムカタログ上に保存される際に暗号化するかどうかはENCRYPTED/UNENCRYPTED
で明示するか、そうでない場合は、/var/lib/pgsql/9.3/data/postgresql.conf
のpassword_encryption
設定パラメータに依ります。password_encryption
設定パラメータがonの場合に暗号化が有効(default: on)です。
先述した通り、create user
SQLはログイン権限オプション(login)を明示しなくても有効となりますし、createuser
コマンドでもログイン権限オプション(–login)がデフォルトで有効なので、ここでは指定していません。この辺りのSQLやコマンドの挙動はPostgreSQLバージョンにも依ると思うので自信の無い場合はログイン権限オプションを明示した方がいいかもしれません。
Railsプロジェクトの作成
新しいRailsプロジェクトを作成します。
1 2 3 |
|
データベース接続情報を設定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
Gemライブラリのインストール
Rails4でBootstrap3をインストールする簡単な方法はGemライブラリ
を使用することです。
今回はTwitter社公式のbootstrap-sassを使用します。
比較はしていませんが、anjlab-bootstrap-railsなどもあり、anjlab/anjlab-widgetsが使えることなどが特徴のようです。こちらのGemはbootstrap-sassとの併用は推奨されていないようです。
Gemfile
に追記します。therubyracer
はアンコメントすれば有効になります。
1 2 3 4 5 6 7 8 9 10 11 |
|
Railsプロジェクト作成時のGemfile
と比較するとこのようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
Gemライブラリをインストールします。
1
|
|
bootstrap-sassを使用する準備
今回はSass
というプリプロセッサに対応したbootstrap3
をインストールしているのですが、CSSの//= require
行はSassでは文法として使用できないので注意が必要です。そして、Sass拡張子のファイルやその他のスタイルシートであっても、Bootstrapからmixinsや変数を利用できないので//= require
行は利用できないということです。
本家GiHubのREADMEに従い、app/assets/stylesheets/application.css
は削除します。
1
|
|
app/assets/stylesheets/application.css.scss
を新規作成します。
1 2 |
|
app/assets/javascripts/application.js
にBootstrap関連のJavascriptsライブラリをrequireします。
1
|
|
app/views/layouts/application.html.erb
のhead
タグにbootstrap関連のスタイルシートをincludeする設定とメディアクエリーを使用するためのviewport設定を追記します。
1 2 |
|
scaffoldで骨組みを生成
scaffold
を実行します。
1 2 3 |
|
root_pathの設定
scaffoldで生成されたentriesリソースのindexをroot_path
に設定します。
1
|
|
ここでブレイク
この段階でrails server
コマンドを実行してWEBrickを起動すると以下のような画面が表示されます。
- http://< サーバIP >:3000
ここからBootstrapを使っていきます
ナビゲーションメニュー
body
タグの上部にナビゲーションメニューを設置してみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
Jumbotron(ジャンボトロン)
Jumbotron(ジャンボトロン)
と呼ばれるページトップなどに表示する見出しユニットをbody
タグの上部、ナビゲーションメニューの下あたりに設置してみます。
まず、app/assets/stylesheets/theme-style.css.scss
を作成し、スタイルを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
app/assets/stylesheets/application.css.scss
に作成したtheme-style.css.scss
を読む込むように設定します。
1
|
|
次にJumbotron(ジャンボトロン)を表示するためのコードを記述します。
1 2 3 4 5 6 7 8 9 10 |
|
Railsのフラッシュメッセージ表示
後述するapp/views/entries/show.html.erb
に<%= notice %>
というフラッシュメッセージを表示するコードがscaffoldによって自動生成されているのですが、Bootstrap3のAlertsコンポーネント
を使って見栄えを良くすると同時に、先述したJumbotron(ジャンボトロン)の上部に表示するためにapp/views/layouts/application.html.erb
に移動しlます。
1 2 3 4 5 6 7 8 9 |
|
entriesリソースのビューファイルを修正
scaffoldで生成したビューファイルに色々とBootstrap3のスタイルを適用していきます。
app/views/entries/index.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
app/views/entries/show.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
app/views/entries/new.html.erb
1 2 3 4 5 6 7 8 9 10 |
|
app/views/entries/edit.html.erb
1 2 3 4 5 6 7 8 9 10 |
|
app/views/entries/_form.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
herokuにpushしてみる
https://devcenter.heroku.com/articles/getting-started-with-rails4
Herokuを使う準備
production環境でのアセットコンパイルを有効にする
config/environments/production.rb
を修正してproduction環境でのassets
を有効にします。
以下の設定パラメータを設定します。
1 2 3 4 |
|
修正後のconfig/environments/production.rb
のdiff情報です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
gitレポジトリを作成
herokuに対するアプリケーションのデプロイ方法はgit push
を行うことなので、ローカル環境でgitレポジトリを作成します。
1 2 3 4 |
|
herokuにアカウントを登録
heroku toolbelt インストール
heroku toolbeltとは、heroku appsの作成や管理を行うためのHerokuクライアントで、実体はherokuコマンドファイル
です。
herokuコマンド
をインストールする方法は、OSプラットフォームにより3パターンあります。
- Mac OSX、またはWindowsではパッケージが提供されていますのでパッケージをダウンロードしてインストールします。
- Debian/Ubuntuにもdeb形式のパッケージが公開されていますが、こちらは直接ダウンロードするのではなくインストールスクリプトを利用します。
- Debian/Ubuntu以外のUnix/Linuxではxzファイルフォーマットで圧縮されたtarボールで配布されています。こちらもインストールスクリプトを利用します。
今回はCentOS6
なので3番目のインストールスクリプトを利用します。https://toolbelt.heroku.com/standaloneの内容に沿ってインストールします。
注意点としては、インストールスクリプトの実行はsudo
権限を持つユーザである必要があります(中でsudoを実行しているため)。
1
|
|
これで/usr/local/heroku/bin
以下にherokuコマンド
がインストールされるので、$PATH
環境変数に/usr/local/heroku/bin
へのパスを設定しておきます。
1
|
|
heroku toolbelt を使ってherokuへログイン
heroku
コマンドラインツールを使ってログインします。先ほど作成したherokuアカウント
のメールアドレスとパスワードを入力し、Authentication successful.
と表示されればログイン成功です。また、該当Unixユーザでのログインが初めての場合は公開鍵認証に関する設定を行う場合があります。
1
|
|
heroku appsを作成
今回はbuf-material-bootstrap3-sample
という名前のアプリケーションをheroku上に作成します。
1
|
|
コマンドの結果が以下のように表示されます。
URLがhttp://buf-material-bootstrap3-sample.herokuapp.com/で、heroku上に作成されるgitレポジトリのURLがgit@heroku.com:buf-material-bootstrap3-sample.git となりました。
1 2 3 |
|
heroku appsにアプリケーションをデプロイ & DBマイグレーション
herokuへのアプリケーションデプロイはなんとgit push heroku master
1発なのです!
DBマイグレーションをお忘れなく。
1 2 |
|
これで http://buf-material-bootstrap3-sample.herokuapp.com/ にアクセスすると先ほどローカル環境で見ていたアプリケーション画面が表示されました。
OctopressにGoogle AdSenseを導入する
Google AdSenseとは
広告収入を稼ぐためのアフィリエイトサービスと言えばいいのでしょうか。
詳細は、Google AdSenseについてwikipediaから転記します。
### http://ja.wikipedia.org/wiki/Google_AdSense から転記
Google AdSense(グーグルアドセンス)はGoogleの提供している検索連動型およびコンテンツ連動型広告の広告配信サービスの総称である。
AdSenseは、Googleが広告ネットワークに対して提供する配信サービスの総称であり、その形態は多岐にわたる。
コンテンツ向けAdSenseは所有するWebサイト(ブログでも可)にGoogle AdSenseの広告コードを貼り付けると広告が表示され、その広告がクリックされると報酬が得られる仕組みである。Google AdSenseのシステムが自動的にサイトの内容を解析し、そのサイトにあったコンテンツ連動型広告を配信するシステムである[1]。例えば、ゴルフ関連のサイトなら、自動的にゴルフの広告が表示されるよう設計されている(サイトの内容によっては、それと関連する適切な広告がなく、まったく分野の異なる広告が表示されることもある)。Googleでの検索履歴から広告が表示されることもある[2]。 日本では2003年12月一般向けに募集を開始[3]したことでブロガーなどに広まり急速にシェアを広げた。
その他、ウェブページ内に検索の機能を提供し、検索キーワードに関連する広告を表示する検索向けAdSense、RSSフィードの記事内にAdSense広告を自動的に表示するフィード向けAdSense[4]などがある。
ということで、Google AdSenseを使用してOctopressサイト内に広告を表示してみようと思います。
Google AdSense側の設定
所有サイトのURLを追加する(任意)
所有サイトとしてサイトのURLを登録しておくことでサイト固有の広告ブロック ルールを作成するなど、サイトに関連する操作を行うことができるようになるようです。具体的には、特定広告主URLや広告ネットワーク、特定カテゴリに関わる広告を表示させたくない場合等に非表示設定をおこなうことが可能です。
Google AdSenseへGoogleアカウントにてログインし、アカウント > サイト管理の順にページを移動します。
下の画像のようなテキスト入力フォームがあるので、広告を表示させたいサイトのトップURLを入力し、サイトを追加します。
広告ユニットを作成し、コードを取得する
Google AdSenseにおける広告は広告タイプ(テキスト広告とディスプレイ広告、テキスト広告のみ、ディスプレイ広告のみ)や広告サイズ(468x60、160x600、レスポンシブ、など)を定義した広告ユニットが広告の生成単位となり、広告コードもこの広告ユニット単位で生成されます。
サイドバー向けの広告ユニットを作成します。
[広告の設定] > [コンテンツ] > [広告ユニット]までページを進め、+新しい広告ユニットをクリックします。
名前は、あとで広告ユニットを特定しやすいように一意の名前と説明を入力するといいでしょう。
今回はbuf-material_aside_336x280
とします。
広告サイズは最初に表示されている推奨から選ぶと無難かもしれません。これら推奨の広告サイズはGoogle AdSense側で広告の掲載効果があったとされる広告サイズのようです。今回は336x280 レクタングル (大)
を選択します。
また、モバイルで効果的な広告サイズにはモバイルのアイコン()が表示されます。
広告サイズに関しては、プレビュー
を選択することでポップアップで実際の大きさを確認できますので参考に出来ますね。
広告タイプは、テキスト広告とディスプレイ広告
、テキスト広告のみ
、ディスプレイ広告のみ
の3つから選択します。今回は推奨されているテキスト広告とディスプレイ広告
を選択します。
保存してコードを取得
を選択し、コードを取得します。
Octopress側の設定
今回は、広告をサイドバーに表示してみようと思います。
Octopressではサイドバーのコンテンツはセクションごとにsource/_includes/custom/asides/
ディレクトリ以下にHTMLファイルを用意し、_config.yml
内のdefault_asides:
に表示させたいファイル名をリストで持つことになっています。
サイドバーに表示するHTMLの準備
source/_includes/custom/asides/google_adsense_336x280.html
として作成します。この時、Octopress側で1つのセクションであることを定義するために一番外枠として<section>と</section>
で括るようにします。
1 2 3 4 5 6 7 8 9 10 11 |
|
_config.yml の設定
_config.yml
のdefault_asides:
にgoogle_adsense_336x280.html
を追記します。この広告はサイドバーの最上段に表示させたいので、default_asides:
リストの1番上に記述します。
1 2 3 4 5 6 |
|
静的ファイルの再生成とデプロイ
静的ファイルを再生成します。
1 2 3 4 |
|
GitHub Pages
へデプロイします。
1
|
|
確認
GitHub Pages
へアクセスした際に表示されるHTMLコードを確認し、<aside>
タグ内に以下のscriptコードが組み込まれていれば設定できています。
1 2 3 4 5 6 7 8 9 10 11 |
|
OctopressにGoogle Analyticsを導入する
Google Analytics
Google AnalyticsはGoogleが提供するアクセス解析ツールです。
サイトページ内にトラッキングコードと呼ばれるJavaScript コードを埋め込み、訪問者がサイトへアクセスした際の閲覧情報がGoogle Analyticsサーバへ送信される仕組みです。Webサーバのアクセスログ等を解析する等とは違い、開発者はこのトラッキングコードを埋め込むだけでアクセス解析ツールを利用できるという手軽さと、様々なアクセス情報を取得・閲覧できることが特徴です。
Octopressの場合、このトラッキングコードの大枠のコードがテーマのテンプレートHTMLファイルとして用意されているケースがあります。このような場合には_config.yml
のgoogle_analytics_tracking_id:
という箇所にトラッキング IDを記述するだけです。
トラッキング IDとはUA-000000-01
のような文字列で、データの送信先となるアカウントやプロパティを Google アナリティクス側で特定するためのIDです。
トラッキングIDの取得
先述したトラッキング IDを取得します。
Google AnalyticsからGoogleアカウントでログインし、アナリティクス設定 > 管理 > 新しいアカウント
の順にアクセスし、サイト情報を登録してトラッキングIDを取得します。
取得したトラッキングIDを設定
Octopressでは既にGoogle Analytics用のテンプレートHTMLが用意されているテーマもあり、デフォルトのClassicや先日変更したoctostrap3でも同様です。
### Octopress Themesに組み込まれているGoogle Analyticsテンプレート
octopress
└── .themes
├── octostrap3
| └── source
| └── _includes
| └── google_analytics.html
|
└── classic
└── source
└── _includes
└── google_analytics.html
従って、設定は_config.yml
のgoogle_analytics_tracking_id:
の項に先ほど取得したトラッキングIDを記述して静的ファイルを再生成するだけでいいようです。
1
|
|
静的ファイルの再生成とデプロイ
静的ファイルを再生成します。
1 2 3 4 |
|
GitHub Pages
へデプロイします。
1
|
|
確認
GitHub Pages
へアクセスした際に表示されるHTMLコードを確認し、HEADタグ内に以下のscriptコードが組み込まれていれば設定できています。
1 2 3 4 5 6 7 8 9 10 |
|
Google Analyticsのアクセス解析結果が表示させるまで24時間程度かかるので表示されるのを待ちましょう。
Octopressのテーマをclassicからoctostrap3に変更してみる
デフォルトテーマ
Octopressではデザインテーマをinstall
タスクにてインストールします。デフォルトでインストールされるテーマはclassicです。
installタスクの動作を理解する
Octopressでテーマを適用するinstall
タスクの動作を見てみようと思います。
下記コードはOctopressのRakefile
に記述されたinstall
タスクです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
コードを見ても分かる通り、installタスクで実行していることは以下の6つの事だけで、とてもシンプルな動作です。#{theme}
はデフォルトではclassicが代入される変数です(上記コードの6行目)。
source
ディレクトリを作成.themes/#{theme}/source
ディレクトリ以下のファイルやディレクトリを再帰的にsource
ディレクトリにコピーsass
ディレクトリを作成.themes/#{theme}/sass
ディレクトリ以下のファイルやディレクトリを再帰的にsass
ディレクトリにコピーsource/_posts
ディレクトリを作成public
ディレクトリを作成
テーマのインストール
テーマのインストールに必要な作業は以下の3つだけです。
.themes
ディレクトリ以下にインストールしたいテーマをプロジェクトごとコピーする.themes/octostrap3/
のようになる
- installタスクをインストールしたいテーマを明示して実行する
rake 'install[octostrap3]'
のようになる
generate
タスクを実行して静的ファイルを生成する
octostrap3テーマをインストールする
今回はOctostrap3をテーマとしてインストールしてみます。
octostrap3プロジェクトを.themes
ディレクトリ以下にcloneしてきます。
1
|
|
.themes
ディレクトリ以下はこのようなディレクトリ構成になるはずです。
### octostrap3テーマをローカル環境にcloneした状態
octopress
└── .themes/
├── classic
└── octostrap3
Octopressのinstallタスクをテーマを指定して実行
1
|
|
Octopressのgenerateタスクを実行して静的コンテンツを生成
1
|
|
これでサイトのデザインテーマをoctostrap3
に変更できました!
と思ったらサイドサイドメニューのoctopress-tagcloud プラグインで生成されているulタグのデザインがoctostrap3に合っていない...
これはoctopress-tagcloudプラグインをインストールした際に置いたテンプレートファイルの書き方を修正することで対応できます。
octopress-tagcloud プラグイン向けのHTMLテンプレートファイルを修正
プラグインを利用してコンテンツを生成している場合、source/_includes/custom/asides
ディレクトリ以下にコンテンツ生成用のHTMLテンプレートファイルを配置していると思います。
今回、デザインテンプレートをclassic
からoctostrap3
に変更したので、追加したテンプレートファイルのdiv
などのブロック構成、class
やid
などのデザインに関わるコードもoctostrap3
のデザインに合う様に修正しようと思います。
ちょうど、octostrap3のブログページにCategory List Asideという記事でサイドメニューにカテゴリーリストを追加するためのテンプレートコードが掲載されていましたのでそのまま利用させて頂きます。
修正対象ファイル
以下のディレクトリツリーにある2つのHTMLファイルを修正します。
### octostrap3導入にあたって修正するテンプレートファイルのパス
octopress
└── source/
└── _includes
└── custom
└── asides
├── category_list.html
└── tag_cloud.html
修正
source/_includes/custom/asides/category_list.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
source/_includes/custom/asides/tag_cloud.html
1 2 3 4 5 6 |
|
簡単でした!
Octopressでカテゴリーリストとタグクラウドをサイドメニューに追加する
デフォルトのサイドメニュー
Octopressをインストールした直後は、サイドメニューはRecent Posts
のみです。
そこでOctopress向けに公開されているプラグインを使ってサイドメニューにカテゴリーリストとタグクラウドを実装します。
プラグイン
jekyllには、特定コンテンツをHTMLとして生成してあなたのサイトに表示させるためのプラグインという仕組みを持っています。そして同時に、多くのプラグインが作成・公開されています。
imathis/octopressはjekyllのためのフレームワークであり、静的コンテンツ生成にはjekyllを使用しているため、もちろんプラグインを導入することが可能です。
tokkonopapa/octopress-tagcloud プラグインのインストール
tokkonopapa/octopress-tagcloudのソースコードをcloneして、jekyllプラグインインストール作法に準じてファイルを配布します。
1 2 3 |
|
jekyllの設定ファイル_config.yml
にtokkonopapa/octopress-tagcloud プラグインで生成する静的ファイルをサイドメニューのコンテンツとして使用するための設定を記述します。
Octopressの_config.yml
にdefault_asides:
から始まる行があります。default_asides:
はサイドメニューに表示するHTMLファイルを配列で記述していきます。
1 2 3 4 5 |
|
静的ファイルを生成してWebサーバを起動します。
1 2 3 4 |
|
これでサイドメニューに以下画像のようなカテゴリーリストとタグクラウドが表示されたはずです。
簡単でした!
OctopressのコンテンツデータをGitHub Pagesへdeployしようとしたらrejectedで失敗する件
OctopressをGitHub pagesでホスティングさせているのですが、GitHubレポジトリへのdeployタスクがrejected
となって失敗してしまうことがあります。
1 2 3 4 5 6 7 8 9 10 11 |
|
暫定対処
他にも解決方法があるかもしれませんので暫定と思っています。
OctopressのRakefile
に記述されているdeployタスク内で実行されているpushタスクをforceオプションで実行します。
git push
コマンドのremoteレポジトリ名の頭に+
を付加することでforceオプションと同じ効果を付加できるようです。
1 2 3 4 5 6 7 8 9 10 11 |
|
Octopress + GitHub Pages = Simple Blog
いきなりですが、ブログを開設したいと思いました。
VimやMarkdownの勉強も兼ねることができるので、Octopress + GitHub Pagesで書いてみることにします。
Octopress
Octopressとは、mojombo/jekyllという静的ファイルジェネレータのためのフレームワークです。
jekyllがMarkdownでの記事作成に対応しているのでエンジニアの方で利用されている方が多いようです。
- HTML5,レスポンシブデザイン対応
- デフォルトのテンプレートデザインで既にレスポンシブデザイン対応
- Compass,Sassを用いたデザイン
- 記事の新規作成やローカルレビューなどの操作はrakeタスクに纏まっていてシンプル
- ローカルで作成した記事を反映させる方法は、
Github pages
やRsync
を利用Github pages
の場合はgithubへpushして更新
-
POW
,WEBrick
,thin
などのRackサーバをサポート - カラースキームとしてsolarizedを採用することで美しいシンタックスハイライトを実現
- Markdownで記事を作成可能
GitHub Pages
GitHub Pagesとは、username.github.io
というレポジトリに静的コンテンツを置くことでWebサイトとして公開できるものです。
WebサイトのデフォルトURLはレポジトリ名と同じhttp://username.github.io
となります。
ちなみに、username
は自分のGitHubアカウント名に置き換えてください。
GitHub PagesとしてWebページを作成することでコンテンツをGit管理にできるほか、GitHubレポジトリに置けることでバックアップとしての意味合いも果たします。
そして、GitHub Pagesでは静的ファイルジェネレータのmojombo/jekyllを使ったブログ作成が可能なので、Octopressもインストール可能なのです。
Octopressをローカル環境にインストール
今回の最終目標はGitHub PagesでOctopressのエントリー記事を表示させることですが、記事作成などの主な操作はローカル環境で行う必要があります(GitHubレポジトリの内容を直接操作することはできない)。ローカル環境で記事作成などの操作を行った後にGitHubへPushする
ことでGitHub Pagesに反映させるのです。
Octopressのソースコードをgit clone
でローカル環境に持ってきます。
ローカル環境側のRubyバージョンが1.9.3
以上の必要があるので、rbenvやrvmなどでインストールしておきます。
1 2 |
|
gemモジュール群をインストールします。私の環境では、Could not find a JavaScript runtime
エラーが発生するのを防ぐために、therubyracerプラグインも一緒にインストールします。
Gemfile
に追記します。
1 2 |
|
Gemfile
に記述されているGemモジュール、および依存関係のあるGemモジュールをインストールします。
1
|
|
rake install
コマンドを実行してOctopress初期セットアップとしてデフォルトテーマ用のファイルをJekyllの静的コンテンツ生成パスにコピーします。
rakeタスク実行時の標準出力をそのまま記載しているのでmkdir
やcp
はrakeタスク内で実行済みです。
1 2 3 4 5 6 7 8 |
|
この段階で初期ページの表示確認は可能なはずですのでrake preview
コマンドを実行して、ローカル環境でWebページを公開します。
rake preview
コマンドを実行することでRakefile内のpreviewタスクを実行します。previewタスクではjekyll build --watch
コマンドを実行して静的コンテンツをジェネレートしつつ、以降の変更を監視し続けます。変更を検知すると再ジェネレートを自動実行してくれます。そしてrackup
コマンドを実行し、TCPポート4000番でWEBrickサーバを起動します。
ここでもrake preview
タスクの実行時の標準出力を(_config.ymlパス以外は)そのまま記載します。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
ブラウザでhttp://localhost:4000
(localhostの部分はローカル環境のIPアドレスに置き換えてください)にアクセスすると以下のような初期ページが確認できます。
Octopressで指定可能なrakeタスク
Octopressをインストールする際にrake install
コマンドやrake preview
コマンドを実行しましたが、rakeコマンドの後ろに指定したサブコマンドはRakefileに定義されたタスクに対応しています。
指定可能なrakeタスクはrake -T
コマンドで確認できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
記事を投稿する
新しい記事を投稿するためにはrake new_post[title]
コマンドを実行します。title
部分は任意のタイトル文字を記述します。英字以外だとうまく認識できないケースが考えられるので、ここでは英字で指定します。
1
|
|
rake new_post[test_post]
コマンドでsource/_posts/yyyy-mm-dd-test-post.markdown
というファイルが作成されます。
1
|
|
テストのために本文を1行だけ追記しました。
1 2 3 4 5 6 7 8 9 |
|
静的ページを生成します。
1
|
|
サーバを立ち上げます。
1
|
|
ブラウザでhttp://localhost:4000
(localhostの部分はローカル環境のIPアドレスに置き換えてください)にアクセスします。
OctopressをGithub Pagesで表示させる
今までローカル環境で編集してきたOctopressコードを新規作成した記事と共にGitHubにpushします。
GitHubレポジトリ作成
GitHubの新規レポジトリ作成ページにアクセスします。
Repository name
にusername.github.io
(usernameは自分のGitHubアカウント名)を指定し、Create repository
ボタンをクリックします。
ローカル環境にてgitレポジトリの作成
OctopressでGitHub Pagesを利用する場合のgitレポジトリ作成にはsetup_github_pages
という専用のrakeタスクが用意されています。
rake setup_github_pages
コマンドを作成したレポジトリのURLと共に実行します。
- レポジトリのURL例
git@github.com:your_username/your_username.github.io.git
https://github.com/your_username/your_username.github.io
1
|
|
GitHub Pagesへ反映
Octopressで記事などをGitHubへpushする時にはdeploy
タスクを利用します。
1
|
|
GitHubにpush後10分程度待つと、http://username.github.io
で先ほどまでローカル環境で表示できていたOctopressページを表示させることに成功しました。
ソースをBitbucketで管理
rake deploy
コマンドでは、GitHub上に作成されたレポジトリのmasterブランチにmojombo/jekyllの静的コンテンツのみがpushされます。そしてGemfile
,Rakefile
,sassディレクトリ
,sourceディレクトリ
がレポジトリ管理になっていません。
Deploying to Github Pagesでは、同一レポジトリにsourceブランチ
を作成してソースをcommit、pushするように説明していますが、ソースは公開する必要はないのでBitbucketで管理します。
Bitbucketに新規レポジトリを作成
Bitbucketの新規レポジトリ作成ページにアクセスします。
https://bitbucket.org/repo/create
今回はoctopress
という名前のレポジトリ`を作成しています。
ソースをコミット
Gemfile
,Rakefile
,sassディレクトリ
,sourceディレクトリ
などをレポジトリにコミットします。
1 2 |
|
Bitbucketに作成したレポジトリへpush
1 2 |
|
まとめ
Octopressのインストール
- https://github.com/imathis/octopress からソースコードをclone
-
rake install
を実行して初期セットアップ -
rake new_post['blog_title']
で新規記事を投稿 -
rake generate
で静的ページを生成 -
rake preview
でlocalhostの4000番ポートでWebサーバを起動
GtiHub PagesでOctopressで生成した静的ページを表示
- https://github.com/new で新規レポジトリを作成
Repository name
はusername.github.io(usernameは自分のGitHubアカウント名)
-
rake setup_github_pages
でGitHub pagesを利用するための初期セットアップ -
rake deploy
でGitHubレポジトリへpush
Bitbucketでソースコード管理
- https://bitbucket.org/repo/create で新規レポジトリを作成
-
git add -A
とgit commit
でソースコードをコミット -
git remote add
でBitbucketレポジトリをremote先として追加 -
git push
でBitbucketレポジトリにpush