light log

学んだこととか

google-analytics-rails gem使ってみた

google-analytics-rails gemを使ってみた。

bgarret/google-analytics-rails

上記公式ページには

Fast Google Analytics setup for Rails 3.

と書かれてて、ソースも長らく更新されてないようなので、Rails4でも同様に使えるのか疑問だった。なのでソースを読んでみた。

結果、Railsのバージョンを限定するような部分は見当たらない、と思う。(いまいち自信が持てないけど)

以下使い方。

ほぼこの記事のまま。

Gemfileに追加して、

gem 'google-analytics-rails'

インストール。

$ bundle install

config/environments/production.rbに以下を追加。 トラックIDは自分のものに適宜変更する。

GA.tracker = "UA-xxxxxx-x"

最後にapp/views/layout/application.html.erbのheadタグ内に以下を追加。

    <%= analytics_init if Rails.env.production? %>

以上

Turbolinksとソーシャルボタンについての続き

昨日の続き。

yamacent.hatenablog.com

昨日こう書いた。

選択肢はいくつかある。

  • Turbolinksをオフにする
  • 対策をあほになって調べないままコピペする
  • 対策をちゃんと調べながらコピペする
  • ソーシャルボタン設置をやめる

引き続き少し実験してみたけど、結論として、Twitterは設置、Facebookは諦めることにした。

昨日も載せたリンク先を参考に、Facebookのいいねボタンについていくつか実験してみたけど動かなかった。 いいねボタンのためにあんまり深堀りするのもあまり本意でないので、この辺でいったん諦める。 将来的に行けそうな知識とスキルになったら再チャレンジするかも。

Twitterについては昨日載せたコードをちょっと改良した。

var init = function () {
    ...
    reload_social()
}

var reload_social = function () {
    $.getScript('http://platform.twitter.com/widgets.js')
}

$(document).ready(init)
$(document).on('page:change', init)

要は、ごちゃごちゃと書いてたところが$.getScript一行で済んだ。

ひとまずこれで行く。

Turbolinksとソーシャルボタンでハマった(未解決)

作ってるサイトにTwitterのツイートボタンとFacebookのいいねボタンを設定してみた。 公式ページのコード片をコピーするだけで、初回のページ描画ではうまく動作するようになったが、 ページ遷移すると動作しない。

例のごとくTurbolinksが原因のようす。

Turbolinksはもうほんますぐハマる。やれやれ。

経緯

Twitter/Facebookともに、貼り付けるコードはHTMLとJSを含む。 JS部分ではどちらも、scriptタグをheadに追加しているだけのようだった。 なので要はそれをページ遷移のたびに呼び出せばいいのだろうと思った。

ということで$(document).on('page:change', init)として、init関数内で上記の動作をさせてみた。 公式からコピペしたコード(ミニファイされてる)を読みやすく整形した感じ。

これでTwitterは動いた。Facebookは動かない。

以下個別に書く。

Twitter

書いたコードはこんな感じ。reload_social関数を上で書いたinit関数で呼び出している。

var reload_social = function () {
    reload_script_tag('twitter-wjs', 'http://platform.twitter.com/widgets.js')
    reload_script_tag('facebook-jssdk',
        '//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.3')
}

var reload_script_tag = function (id, src) {
    var old = document.getElementById(id)
    if (old && old.parentNode) { old.parentNode.removeChild(old) }
    var js = document.createElement('script')
    js.id = id
    js.src = src
    var fjs = document.getElementsByTagName('script')[0]
    fjs.parentNode.insertBefore(js, fjs)
}

これで一応動いているように見えるものの、本当にこれでいいのかイマイチ確信がない。

Turbolinks Compatibility with Twitterに記載されているように、 ちゃんとした対策みたいなものも存在するようだけど、上のコードで済むならこれでいいような気もする。

要は、上のコードでいいならそれが一番楽だけど、イマイチ確信が持てない。 じゃあちゃんとした対策をコピペすればいいじゃないかと思うけど、内容を理解せずにコピペするのは嫌。 でもツイートボタンだけのために色々と細々としたことを調べるのは面倒だ、という葛藤。

Facebook

いくつか記事を読んだ。

どれも基本的に同じような感じで、APP_IDとか出てきちゃってる。 いいねボタンを設置するためだけにアプリのIDを取得して設定しないといけないのか。。不便。

そもそもTwitterではいけた上の方法で動作しない理由がよくわからない。 初回の描画はうまくいく。初回と二回目以降の違いはなんだろう。

まとめ

選択肢はいくつかある。

  • Turbolinksをオフにする
  • 対策をあほになって調べないままコピペする
  • 対策をちゃんと調べながらコピペする
  • ソーシャルボタン設置をやめる

Turbolinksオフは今のところ考えてない。 ボタンの設置中止は正直アリなんじゃないかという気はする。設置したところでなんなの?って感じだし。Facebookはもうほぼ中止かなー。 でもちょっと悔しい。

まあ寝て明日どうするか考えよう。

追記

続き書いた。

yamacent.hatenablog.com

digコマンドの使い方

手抜き記事。が続いている。由々しい。

WWDCを結局ほとんど全部見てしまった。Apple Musicが楽しみなこと以外は特に興奮する発表はなかったんだけど。 あ、でも新しいiOSのメモアプリとiPadのキーボードとマルチタスクは使ってみたい感じだったな。 あとspotlightが超優秀になってそうだったけど、siriといっしょでどうせ優秀なのは英語だけなんでしょ、的な疑念がある。

それはいい。

今日はDNS

さくらのVPSドメインの設定をしていて、DNSについて意外とよくわかっていない部分が多いなーと感じた。 一応ネットワークスペシャリストなんだけどなw

復習がてら、手元にあったマスタリングTCP/IPの入門編の該当部分をさくっと読んで、いくつか記事を読んで設定した。

で、DNSについてまとめるにはちょっと知識(と根気)が不足しているので、設定の過程で使ったdigコマンドの使い方を軽くまとめておく。たぶんここまでの前置きよりも短い本編になる…

digコマンドとは

DNSサーバーの動作を確認するコマンド。

機能的にはnslookupと共通項が多いものの、BIND 9以降はnslookupが非推奨になっており、将来のリリースでは廃止される可能性があります。nslookupよりも詳細な情報を確認できるdigを利用するようにしましょう。

ネットワーク管理の基本Tips:DNSサーバーが正常に動作しているかどうか確認するには? digコマンド - @IT

とのこと。

使い方

単純に調べる場合、書式は以下の通り。

dig @DNSサーバ 調べたいドメイン

これで指定したドメインIPアドレスを返してくれる。

@DNSサーバを省略するとマシンのデフォルト設定のサーバにリクエストする。

これでさくらのDNSサーバを@部分に指定して、ドメインがうまく設定されているか確認しながら進めることができた。

Webフォント(Google Fonts)を使ってみた

手抜き記事。

Google Fontsを使ってみたのでメモ。

フォントを選ぶ

Google Fontsに行って、目当てのフォントを選ぶ。

CSSを読み込む

  1. Add this code to your website:

というところのスニペットをコピーしてHTMLに貼り付ける。

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

CSSでフォントを指定する

  1. Integrate the fonts into your CSS:

というところのスニペットをコピーしてCSSに貼り付ける。

h1 {
  font-family: 'Lobster', cursive;
}

完成!

まとめ

簡単に使えてページの見た目が変わって楽しい。

参考

Web Fontの使い方とGoogle Fontsのオススメフォント 10選 | OXY NOTES

MySQLの文字コードをutf8mb4にする

前にherokuで同じことをやった。

yamacent.hatenablog.com

今度はmy.cnfとかをいじりつつ手元のMySQLに対して、文字コードをutf8mb4に設定する。絵文字を格納するために必要。

環境

$ mysql --version
mysql  Ver 14.14 Distrib 5.6.25, for Linux (x86_64) using  EditLine wrapper
$ cat /etc/redhat-release 
CentOS release 6.6 (Final)

現在の文字コードの確認

mysql> show variables like '%char%';
+--------------------------+----------------------------+
| Variable_name            | Value                      |
+--------------------------+----------------------------+
| character_set_client     | utf8                       |
| character_set_connection | utf8                       |
| character_set_database   | latin1                     |
| character_set_filesystem | binary                     |
| character_set_results    | utf8                       |
| character_set_server     | latin1                     |
| character_set_system     | utf8                       |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+
8 rows in set (0.00 sec)

使用可能な文字コードの確認

mysql> show character set;
+----------+-----------------------------+---------------------+--------+
| Charset  | Description                 | Default collation   | Maxlen |
+----------+-----------------------------+---------------------+--------+
| big5     | Big5 Traditional Chinese    | big5_chinese_ci     |      2 |
| dec8     | DEC West European           | dec8_swedish_ci     |      1 |
| cp850    | DOS West European           | cp850_general_ci    |      1 |
| hp8      | HP West European            | hp8_english_ci      |      1 |
| koi8r    | KOI8-R Relcom Russian       | koi8r_general_ci    |      1 |
| latin1   | cp1252 West European        | latin1_swedish_ci   |      1 |
| latin2   | ISO 8859-2 Central European | latin2_general_ci   |      1 |
| swe7     | 7bit Swedish                | swe7_swedish_ci     |      1 |
| ascii    | US ASCII                    | ascii_general_ci    |      1 |
| ujis     | EUC-JP Japanese             | ujis_japanese_ci    |      3 |
| sjis     | Shift-JIS Japanese          | sjis_japanese_ci    |      2 |
| hebrew   | ISO 8859-8 Hebrew           | hebrew_general_ci   |      1 |
| tis620   | TIS620 Thai                 | tis620_thai_ci      |      1 |
| euckr    | EUC-KR Korean               | euckr_korean_ci     |      2 |
| koi8u    | KOI8-U Ukrainian            | koi8u_general_ci    |      1 |
| gb2312   | GB2312 Simplified Chinese   | gb2312_chinese_ci   |      2 |
| greek    | ISO 8859-7 Greek            | greek_general_ci    |      1 |
| cp1250   | Windows Central European    | cp1250_general_ci   |      1 |
| gbk      | GBK Simplified Chinese      | gbk_chinese_ci      |      2 |
| latin5   | ISO 8859-9 Turkish          | latin5_turkish_ci   |      1 |
| armscii8 | ARMSCII-8 Armenian          | armscii8_general_ci |      1 |
| utf8     | UTF-8 Unicode               | utf8_general_ci     |      3 |
| ucs2     | UCS-2 Unicode               | ucs2_general_ci     |      2 |
| cp866    | DOS Russian                 | cp866_general_ci    |      1 |
| keybcs2  | DOS Kamenicky Czech-Slovak  | keybcs2_general_ci  |      1 |
| macce    | Mac Central European        | macce_general_ci    |      1 |
| macroman | Mac West European           | macroman_general_ci |      1 |
| cp852    | DOS Central European        | cp852_general_ci    |      1 |
| latin7   | ISO 8859-13 Baltic          | latin7_general_ci   |      1 |
| utf8mb4  | UTF-8 Unicode               | utf8mb4_general_ci  |      4 |
| cp1251   | Windows Cyrillic            | cp1251_general_ci   |      1 |
| utf16    | UTF-16 Unicode              | utf16_general_ci    |      4 |
| utf16le  | UTF-16LE Unicode            | utf16le_general_ci  |      4 |
| cp1256   | Windows Arabic              | cp1256_general_ci   |      1 |
| cp1257   | Windows Baltic              | cp1257_general_ci   |      1 |
| utf32    | UTF-32 Unicode              | utf32_general_ci    |      4 |
| binary   | Binary pseudo charset       | binary              |      1 |
| geostd8  | GEOSTD8 Georgian            | geostd8_general_ci  |      1 |
| cp932    | SJIS for Windows Japanese   | cp932_japanese_ci   |      2 |
| eucjpms  | UJIS for Windows Japanese   | eucjpms_japanese_ci |      3 |
+----------+-----------------------------+---------------------+--------+
40 rows in set (0.01 sec)

基本の設定をする

MySQLのサーバ側とクライアント側の文字コードを設定する必要がある。両者で同じものを設定しておけば文字化けの心配がない。

サーバ側の設定

/etc/my.cnfに以下を追加する。

[mysqld]
character-set-server=utf8mb4

クライアント側の設定

/etc/my.cnfに以下を追加する。

[client]
default-character-set=utf8mb4

以上の設定が終わったらサーバを再起動する。

確認。

mysql> show variables like '%char%';
+--------------------------+----------------------------+
| Variable_name            | Value                      |
+--------------------------+----------------------------+
| character_set_client     | utf8mb4                    |
| character_set_connection | utf8mb4                    |
| character_set_database   | utf8mb4                    |
| character_set_filesystem | binary                     |
| character_set_results    | utf8mb4                    |
| character_set_server     | utf8mb4                    |
| character_set_system     | utf8                       |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+
8 rows in set (0.00 sec)

変わった。

参考

データベースの文字コードを設定する

データベースごとに文字コードが設定されているので、すでに他の文字コードで作成したものがあれば以下のように変更する。

mysql> alter database databasename default character set utf8mb4;
Query OK, 1 row affected (0.00 sec)

mysql> show create database databasename;
+--------------------+--------------------------------------------------------------------------------+
| Database           | Create Database                                                                |
+--------------------+--------------------------------------------------------------------------------+
| databasename | CREATE DATABASE `databasename` /*!40100 DEFAULT CHARACTER SET utf8mb4 */ |
+--------------------+--------------------------------------------------------------------------------+
1 row in set (0.00 sec)

変わった。

参考

テーブルとカラムの文字コードを設定する

Heroku用に設定した時にマイグレーションファイルでutf8mb4を指定していたのでこれは既にOK。

やり方は上記リンク参照。

  • 「alter table テーブル名 default character set utf8mb4;」でテーブルの文字コードを変更
  • 「alter table テーブル名 modify カラム名 ... character set utf8mb4 ...」でカラムの文字コードを変更

database.ymlの文字コードを設定する(Railsの場合)

以下のようにencodingをutf8mb4に変える。

default: &default
  adapter: mysql2
  encoding: utf8mb4
  ...

まとめ

これでいけた。

理想はもう少しちゃんと公式ドキュメントとか読んで体系的に理解して設定したいところ。時間あればやろう。

MySQL :: MySQL 5.6 リファレンスマニュアル :: 10.1 文字セットのサポート

シェル変数やりなおし

入門UNIXシェルプログラミング―シェルの基礎から学ぶUNIXの世界

入門UNIXシェルプログラミング―シェルの基礎から学ぶUNIXの世界

昨日に引き続き、積ん読してた『入門UNIXシェルプログラミング』を読んだのでメモ。

今日はシェル変数。

基本から。

=の前後にスペースを入れてはいけない

最初のころやりがち。

$ FOO=foo
$ FOO = foo # NG
-bash: FOO: command not found

変数名の大文字と小文字は区別される

$FOO$Fooは別の変数として扱われる。変数名はすべて大文字とするのが慣例。

$ FOO=upper
$ Foo=lower
$ echo $FOO $Foo
upper lower

変数名に使用できる文字は英数字とアンダースコア

ただし、先頭に数字は不可。

$ BAR_012=bar
$ 012_BAR=bar # NG
-bash: 012_BAR=bar: command not found
$ _012BAR=bar # OK

$で変数の値を参照する

変数名として使える文字を後ろに続けるときは波括弧が必須。

$ FOO=foo
$ echo $FOO
foo
$ echo $FOOBAR    # $FOOBAR という変数として解釈される

$ echo ${FOO}BAR  # 波括弧をつけるとOK
fooBAR
$ echo ${FOO}/BAR # この場合どっちでもいい
foo/BAR
$ echo $FOO/BAR
foo/BAR

クォートの中の変数

ダブルクォートは変数展開する。シングルクォートはしない。

$ echo "$FOO"
foo
$ echo '$FOO'
$FOO

変数の初期設定(=)

こんなの初めて知った。

${VAR:=value}とすると、$VARが未定義の場合または定義済みで値がヌルの場合のみvalueを設定する。

${VAR=value}のようにコロンを省略すると、$VALUEが未定義の場合のみvalueを設定する。

NULL=
HAS_VALUE="initial value"

echo ${UNDEFINED:="new value"}
echo $UNDEFINED
echo ${NULL:="new value"}
echo $NULL
echo ${HAS_VALUE:="new value"}
echo $HAS_VALUE

echo ============================

unset UNDEFINED
NULL=
HAS_VALUE="initial value"

echo ${UNDEFINED="new value"}
echo $UNDEFINED
echo ${NULL="new value"}
echo $NULL
echo ${HAS_VALUE="new value"}
echo $HAS_VALUE

# => new value
# => new value
# => new value
# => new value
# => initial value
# => initial value
# => ============================
# => new value
# => new value
# => 
# => 
# => initial value
# => initial value

変数の初期設定(-)

変数が未定義やヌルの場合に、指定した値を返すが、変数の値は書き換えない。コロンの有無による差異は=と同じ。

NULL=
HAS_VALUE="initial value"

echo ${UNDEFINED:-"new value"}
echo $UNDEFINED
echo ${NULL:-"new value"}
echo $NULL
echo ${HAS_VALUE:-"new value"}
echo $HAS_VALUE

echo ============================

unset UNDEFINED
NULL=
HAS_VALUE="initial value"

echo ${UNDEFINED-"new value"}
echo $UNDEFINED
echo ${NULL-"new value"}
echo $NULL
echo ${HAS_VALUE-"new value"}
echo $HAS_VALUE

# => new value
# => 
# => new value
# => 
# => initial value
# => initial value
# => ============================
# => new value
# => 
# => 
# => 
# => initial value
# => initial value

変数の初期設定(?)

変数が未定義やヌルの場合に、指定したメッセージを表示してシェルスクリプトの処理を終了する。メッセージを省略するとデフォルトの値が使われる。

$ NULL=
$ echo ${NULL:?"NULL is null"}
-bash: NULL: NULL is null
$ echo ${NULL?"NULL is null"}

$ echo ${NULL:?}
-bash: NULL: parameter null or not set

変数の初期設定(+)

-の逆で、変数が未定義やヌル 以外の 場合に、指定した値を返すが、変数の値は書き換えない。

NULL=
HAS_VALUE="initial value"

echo ${UNDEFINED:+"new value"}
echo $UNDEFINED
echo ${NULL:+"new value"}
echo $NULL
echo ${HAS_VALUE:+"new value"}
echo $HAS_VALUE

echo ============================

unset UNDEFINED
NULL=
HAS_VALUE="initial value"

echo ${UNDEFINED+"new value"}
echo $UNDEFINED
echo ${NULL+"new value"}
echo $NULL
echo ${HAS_VALUE+"new value"}
echo $HAS_VALUE

# => 
# => 
# => 
# => 
# => new value
# => initial value
# => ============================
# => 
# => 
# => new value
# => 
# => new value
# => initial value

引数まわり

  • $0: コマンド自身
  • $1$9: 1番目〜9番目の引数(位置パラメタ)
  • $#: 引数の数
  • $*: 引数全体
  • $@: 引数全体

$*$@の違いは、ダブルクォートで囲んで展開した場合に、引数全体を一つのダブルクォートで囲むか、個々をダブルクォートで囲むか。

10番目以降の引数を参照したければ、shiftを使う。

echo $0 $1 $2 $3 $4 $5 $6 $7 $8 $9

echo $#
echo $@
echo $*

shift
echo $0 $1 $2 $3 $4 $5 $6 $7 $8 $9

shift 2
echo $0 $1 $2 $3 $4 $5 $6 $7 $8 $9

# $ sh foo.sh a b c d e f g h i j k l m n
# => foo.sh a b c d e f g h i
# => 14
# => a b c d e f g h i j k l m n
# => a b c d e f g h i j k l m n
# => foo.sh b c d e f g h i j
# => foo.sh d e f g h i j k l

$?

コマンドの終了ステータス。

$ mkdir
usage: mkdir [-pv] [-m mode] directory ...
$ echo $?
64
$ mkdir foo
$ echo $?
0

$$

現在のコマンドのプロセスID。

$!

バックグラウンドで実行しているコマンドのプロセスID。

$ sleep 10 &
[1] 65079
$ echo $!
65079
$ wait $!
[1]+  Done                    sleep 10

$-

シェル起動時のフラグ。

最後に

「変数の初期設定」のところは可読性悪いし、if文使った方がいいよねって本にも書いてある。