VCCWにphpMyAdminとwordmoveを載っけたVCCW-pwを作った

sshpassを入れ忘れていたので追加しました。
sudo yum install -y sshpass でsshpassがインストールできます。


さよならVVV

最近までVVVというWordPressをローカルで構築するものをカスタマイズして使っていたんですが、VVVのカスタマイズがあまりにも面倒くさくて、かつバグりやすいのでChefの勉強がてらVCCWに出戻りしました 。

VCCW is god

そしたらVCCWはまごうことなき神でした。僕の記憶に無いだけかもしれませんが、前まではWindowsで動かなかったり、Vagrantfile内でここまでできなかった気がしたので。これからWordPressを開発するのであれば離れられない気がします。プラグイン最初にインストールする設定が便利。

んで、VCCWをフォークし、個人的に欲しかったものをプラスしたVCCW-pwを作りました。

VCCW-pw

https://github.com/tanshio/vccw

おもむろにgit cloneしてディレクトリを移動しvagrant upすれば動きます。

VCCWにphpMyAdminを追加し、rubyのバージョンを上げ、wordmoveを入れただけです。
phpMyAdminはなんだかんだで便利。
wordmoveはページ追加などの更新作業の時にローカルに環境ごと取り込めるので便利。wordmoveのFTPだとバグりやすいのでlftpはインストールしてません。SSHを推奨。

以下のcookbookを使わせていただきました。

https://github.com/fnichol/chef-rbenv
https://github.com/fnichol/chef-ruby_build

あと、おまけでbrowsersyncを入れてあるのですが、プロキシのせいなのかロードに5秒ぐらいかかる。こういうものなのかな。

Chef便利

Chefは2年ぐらい前に触れてからアレルギー的な感じで拒否反応を起こしてましたが、触れざるを得ない事情で触れて勉強してみたらそんなに難しく感じませんでした。
自宅サーバーを構築したことある人だったらすぐ慣れそうな気がします。templateが便利すぎて唖然。多分Vagrantのおかげで簡単に思えたようにも思える。

まとめ

ぶっちゃけWordPressはいろいろあれな感じに思えてはいるのですけど、Web制作を生業とするとこれからも長い間離れようがない気がしてるので、できるだけサクサク環境を構築できるものを使って、さっさと終わらせたいもんです。
gitでデータベースも管理できたらそれだけでも楽なんですが\(^o^)/
(versionpressとrevisrに期待を込めて)

簡単にPhotoshopでポリゴンスタイルっぽい画像を作る方法

ポリゴンスタイルとは

2014年に絶賛流行中のデザイン。フラットデザインとの相性が良く、メインやポイントとして使ってあげるといい感じのデザインに見えやすくなります。ローポリとかとも言われてます。

ポリゴンスタイルの作り方

イラレの場合、パスをたくさん作っていい感じに着色していくことになるのですが、非常に大変。その分自分のイメージに合ったものが作成できます。
Dmesh、TRIGRAFFなどの無料ポリゴンアプリでもできるのですが、ここではPhotoshopを使ってやってみることにします。

水晶を使いまくる

元画像


福島に行った時に撮ったお城です。iPhoneで撮影。

フィルター→ピクセレート→水晶を選択します。

水晶の大きさを決めます。

なんかポリゴンっぽい画像が出来ました。
上の画像は元画像を複製し、それぞれのレイヤーに水晶の大きさをでかいもの、小さいものとかけ、透明度で調整しただけのものです。主張がでかい。

元画像を一番下のレイヤーに配置し、小さな水晶をかけたもの。これなら背景とかに使えそうな気がします。なんとなく水彩とかクレヨンで描いたっぽくみえなくもない。

彩度を調整するとノスタルジーな感じになる気がします。

おまけ DMeshで作成した画像

iPhoneの無料アプリ、TRIGRAFFで作った画像。パリっとしててこれぞローポリって感じですね。メイン向き。

おわりに

モザイクでいろいろやるよりも僕はこっちのほうがなんとなく味があるように見えるので好きです。
正統なポリゴンスタイルではないので、メインで使う場合にはパス描いたりツール使って作成することになると思いますが、背景で若干主張したいぐらいなら水晶やPhotoShopの機能でも5分もかからず作成できるのでお試しあれ。

IEではposition:fixedかかったものは直でtransitionかけてあげる必要がある

bodyかhtmlに直接transitionかけてアニメーションさせることもあると思うのですが、IEではposition:fixedかけてあるものは除外されるようで困りました。

環境は、IE10、11です。

IEでposition:fixedかかったものが無視されるデモ

demo

直接かけてあげたデモ

demo2

動画デモ

さすがのIEくん過ぎてもう僕は何を信じていいのかわからなくなりました。

ページ遷移でフェードかけるだけのJavaScript作った

絶賛脱jQueryで墓穴を掘っている感ある今日このごろです。
いつまで続くのか分からない感ありますが、脱jQueryで作ったものをちまちま公開したいと思います。脱jQueryのせいで夏休みがなくなってる感あるので誰か使ってあげて下さい。

ページ遷移でフェードかけるだけのJavaScript

動作環境
transition使ってるためIE10以上(8以上にするかもしれませんがいつものようにしないと思います)

demo

オプション項目

一応内部アンカーは除外、クラスと属性も除外できるようにしてあります。
サイズは普通で4kb、minify版で2.4kbです

IEではなぜかposition:fixedかかってるものはフェードかからないため指定してあげる必要があります。面倒くさいですね。

たまに画面がちらつくのですが、多分データが重くないとちらつくみたい。その場合は直opacityかければと思ったんですけど、それでもちらついたりする場合があります。100%できるやり方があるのを知ってる方は教えて下さい。
なにか問題などあったらコメント下さい。コードは適当なのでパブリックドメインでかまいません。

ぶっちゃけページ遷移でエフェクトかけるのはおすすめしません。pjaxでもたまにちらついて中身見えたりするサイトもあるので難しいのかも。

作ってみて改めて思うのはjQuery is 神

WordPressの機能を使いつつLPを作る上でハマったこと

最近ランディングページ専門業者みたいになってるわたくしなのですが、先日WordPressの機能(Contactform7)を使いながらレスポンシブLPを作ったら壮大にハマったのでメモしておきます。

通常はHTMLファイルに偽装したPHPファイルに上記のコードを読み込むことでWPの機能が使えるようになります。

プラグインとの競合

通常、LPとWordPressで組まれたサイトの場合、CSS・JSは違うものを使うと思います。

上のコードを入れればWPのスタイル、JSを除去できるのですが、ハマりました。

既存サイトがPCサイト向けのデザインの場合、スマホのために無理やりレスポンシブにするのではなく、Multi Device Switcherというプラグインを用いて別テーマで出力しています。こいつでハマりました。
なぜかPCでもスマホでもフッターにスタイルとJSが埋め込みされてしまいました。

Multi Device Switcherの除外設定

参考:特定のURL、固定ページのみ「theme」を切り替える

上記設定で、フッターにスタイルおよびJSが埋め込みされなくなります。多分上記解決コードがなかったら諦めてCGIフォーム使ってたと思います。

テーマ切り替えスイッチを使用している場合は表示されてしまうので、display:noneで非表示にしときましょう。

表示されていてもステータスコードは404という謎

普通LP作ったら広告出稿すると思うんですが、ブラウザでは表示されているのにステータスコードが404でした。そのため広告が不承認になってしまいてんやわんやでした。

URLはドメイン/lpのような感じでした。

解決策

index.htmlをつけたら大丈夫だった。

URLがドメイン/lpのような感じだったので、おそらくWordPress側でデータが無いため404を返していたのだと思います。index.htmlはURL上すっきりしないのであまり好みじゃないのですが、そんなことも行ってられないのでこれで対応しました。
これによりちゃんと広告が承認されました。

まとめ

WPの機能におんぶにだっこでもいいのですが、それにより伴う時間のロスもそれなりに発生します。主にプラグインですが。。。
このエントリが誰かのためになることを祈ります。(多分未来の自分)

JSON.parseとJSON.stringifyでらくらく配列のディープコピー

現在午前4時なのですが、仙台ではセミが鳴いています。皆さん今日も元気にpushしておりますか。

pushといえば最近ではgitですが、JavaScriptの配列のコピーなどでも使いますよね。
concatでもいいんですが、あいつは多次元配列でも容赦無いのでここでは華麗にスルーします。
ゲームを作っていたのですが、その時に配列のコピーで悩んだことがあったのでメモしておきます。

参照でハマる

下記のようなオブジェクトがあったとした時に、

オブジェクト内の配列をまるごとコピーして、更にキーを配列の最初に取り付けたいというわがままコードを作成していたのですが、まんまと参照という罠に引掛かって2度めのアクション時に壮大にバグりました。

アイスの種類の左側にiceやchipiceというカテゴリーをつけたかったのですが、参照だったため2度目以降はice,iceとかダブるという素晴らしいコードになってしまいました。
一番簡単なのはオブジェクトに書き足すということなのですが、負けたくなかったため頑張りました。

ケース1 pushとかしまくる

配列を走査して、配列かどうかを確認しpushとかしまくる。配列の値が長いかつ面白く無いので却下

ケース2 JSON.parseとJSON.stringifyで完結

JSON.parse(JSON.stringify(配列やらオブジェクトやら))

もともとJSONだったのを埋め込みたいがためにオブジェクトにしたためてんてこまいだったけど、JSONでパースしてしまえばオブジェクトでも配列でもなんでもかんでもディープコピーできるので楽。

コード

まとめ

Firefox

Chrome

Chromeでは、なぜかJSON.parseしたやつだと、配列をいじるかなにかしないとインスペクタでバグってるような感じになる。しかしながらちゃんと配列として格納されているのでインスペクタがおかしいんだと思います。

IE7以下の呪われしブラウザ以外は動くので配列やオブジェクトをコピーしたい場合には楽だと思います。
全然関係ないですけどライブラリを用いないでゲームを作ると自分のスキルの物足りなさを実感できるのでオススメ。

SpookyJSでadwordsとスポンサードサーチとYDNのレポートをダウンロード

GoogleもYahooも広告配信レポートを現在APIでダウンロードすることができません。Google AdwordsではAPIで簡易的にレポートを作成できますが、インプレッションシェアなどの指標を指定することが出来ず、中途半端です。

メールで作られたよと報告はされるのですが、どうせなら送ってほしいものですよね。

というわけで全部ダウンロードするスクリプトを書いたのですが、私のMac Book Airちゃんがぶっ壊れてタイムマシーンで2週間前に戻ってしまい、危機感を覚えたのでここにメモしておきます。作業途中的な感じですが、わたくしの記憶力が普通の人間と同じぐらいであれば1週間後には出来上がっていると思います。

ダウンロードスクリプト

使い方

要node.js、casperjs、spookyjs(package.jsonをあとで置いておきます)

最初の行のIDとかPassを自分のに変えて下さい。

まとめ

いまのところスポンサードサーチしか動きません。UTF-8のCSVなのでExcelでそのまま開くことが出来ません。

id属性はjsでグローバル変数化されるけどIEではそうもいかないっぽい

最近のブラウザでは、HTMLのid属性が勝手にjavascriptのグローバル変数になってしまいます。
hiddenのinput要素に、jsでvalueを設定しようとして、ケアレスミスで変数名を間違った時にIEの挙動がおかしいなあと思って調べてみました。

サンプルコード

HTML

JS

んで、上記の場合はモダンブラウザで動いてしまったので、IE系列で動かず四苦八苦しました。ちゃんと変数名を確認するべきだった・・・\(^o^)/

モダンブラウザのキャプチャ(FF29)

(Chromeもキャプチャしたやつもあったんだけど、間違ってIEキャプチャしたやつで上書きしてしまい消失しました)

IE11のキャプチャ

閉じタグがないものはグローバル変数化されないのかな?とも思って、imgタグにid=imageを振ってみて試してみたら、普通にimage.srcで画像のURLが取得できた。
どうやらIEではinputなどの要素はグローバル変数化されないみたいで、そのルールが良くわからない。

まとめ

idは勝手にグローバル変数化されるので、本当に必要な物以外はできるだけclassでコーディングしたいなと思いました。(小並感)
ぶっちゃけグローバル変数にするメリットが思いつかないんですが、なにかあるんですかね。

参考:HTML内でIDをつけた要素はJavaScriptのグローバル変数に格納される

Google AnalyticsでIPやCookieを判別できるようにする「PHPAnalyticsIP」を作った

2014年12月5日に動かなかったプログラムを修正しました。
タイプミスによりうまく動かなかったものを修正しました。

2014年7月21日に設定を変更しました。
セッションごとにcookieが変更されてしまうものを修正しました。

Google Analyticsといえば、多分世界で一番使われている解析ツール。
最高に便利なのですが、これがあればもっといいのになあと思う機能の一つに生ログがあります。残念ながらAnalyticsには1人1人を追跡する機能がないです。大体のサイトでコンバージョンとなる、フォームから送られてくるデータと照らし合わせ、特定する場合に、カスタムセグメント地獄に陥りやすく手間になります。
Analyticsはグループ化したデータを見るのに最適ですが、1人1人のデータを見るのには工夫が必要となります。

IPとCookieをAnalyticsで見られるようにしよう

IPとCookieをAnalyticsで見られるようにするサイトとして、AnalyticsIPさんがあります。しかしながら、クロスドメインとなってしまうため、Safari(Win・Mac・iPhone・Ipad)と一部アンドロイド端末(多分)でIPでは判別できてもCookieで判別することが出来ません。
スマホが普及してますし、かつスマホの場合IPがコロコロ変わりやがるのでCookieが取得できないのはどうしたものか。。。というわけで作りました。

PHPAnalyticsIP

https://github.com/tanshio/phpAnalyticsIPzip

機能

オリジナルであるAnalyticsIPさんのメソッド名を拝借させていただきました。PHP版とJS版の2パターンあります。

setAnalytics.getIP()

→ex. XXX.XXX.XXX.XXX
IPアドレスを返します。
JS版では対応していません。

setAnalytics.getCookie()

→MD5 hash
ハッシュ化してユニーク化しているつもりのものを返します。
JS版ではランダムな文字列2つくっつけてユニーク化しているつもりです。

setAnalytics.getAccessTime()

→ex. 2014/05/28 12:04:42
ページを開いた時間を返します。

なんかバグとかあったらコメント下さい。


ファイル

色んなパターンに備えた結果ファイルが多いです。用途によってどれか一つをお使い下さい。

PHP版

  • analytics.php
  • analytics.min.php(minify)
  • analytics.tag.php(タグマネージャー用)
  • analytics.tag.min.php(タグマネージャー用minify)

オプション
PHP版では、なんでもいいのでパラメーターを渡すとセキュアなクッキーを発行します。

独自SSLを使用している場合のみ有効。フォームだけ共有SSLなどではCookieで特定することができなくなります。

JS版

JSではIPが取得できません。PHPを使えない、IPが取得できなくても良い場合や、アクセス時間がブラウザの時刻でもまあいいかという人はこちらをどうぞ。

  • analytics_cookie.js
  • analytics_cookie.min.js(minify)
  • analytics_cookie.tag.js(タグマネージャー用)
  • analytics_cookie.tag.min.js(タグマネージャー用minify)

設定

Analytics(ユニバーサルアナリティクス)の設定

Analyticsの設定からカスタムディメンションを選び、下記のように3つ追加します。インデックス番号が重要となります。

カスタムディメンション

3つとも名前だけ違うのみで設定は同じです。
カスタムディメンションの設定

Google Tag Managerの設定

Google Tag Managerを使用している場合、データレイヤー変数を3つ追加する、イベントの追加、カスタムディメンションの設定、ルールの変更をしなくてはなりません。難しい用語ばかりですが下記の通り設定すればうまくいくはずです。使用していない場合は飛ばして下さい。

データレイヤー変数の追加

Google Tag Managerでは何でもかんでもマクロというもので管理しています。このマクロに、データレイヤー変数を3つ追加します。

上記のような画面(なんでもいいのでマクロをクリックして、マクロをコピーするのが楽です)で上のような感じで

  • setIP
  • setCookie
  • setAccessTime

3つ作成して下さい。名前は固定です。

イベントの追加

先ほどのマクロの追加と同じように、マクロのタイプをカスタムイベントに設定してマクロ名をsetAnalytics_eventとして追加します。

カスタムディメンションの設定

Google Tag Managerのタグの設定メニューから、詳細設定→カスタムディメンションで設定します。
Analyticsで設定したカスタムディメンションのインデックス番号に合わせて、どれがIPでどれがCookie、どれがアクセス時間として設定するのか各自設定して下さい。

ルールの変更

Google Tag Managerではルールを設定することにより、どういった条件でタグを発火させるのかを設定することが出来ます。

ここではさきほど設定した、setAnalytics_eventというイベントが発動した瞬間にAnalyticsを呼び出す設定にしています。

以上でGoogle Tag Managerの設定は終わりです。


コードの埋め込み場所

ファイルをHTMLの指定した場所に埋め込んで下さい。

ユニバーサルアナリティクスの場合

Analyticsのタグの前において下さい。できればAnalyticsで発行されたタグをの前に置き、ファイルを直下に埋め込むとAnalyticsにデータが送信されます。

IPアドレスのインデックス番号が1Cookieが2アクセス時間が3の場合は下記のとおりです。

Google Tag Managerの場合

Google Tag Managerで発行されたタグの下に置いて下さい。公開設定を行っていればトラッキングされているはずです。

まとめ

うまくトラッキングされていればセカンダリディメンションに表示されます。あとはカスタムレポートなどで色々見ることが出来ます。

何が便利って、APIで絞ることにより1人1人のデータが簡単に取得できることです。

コンバージョンを集計するフォームにhiddenでCookieの値を入れることにより、上記のようにGmailに届いたらスプレッドシートに自動的に入力されているなんてことも可能です。フォームの値もスプレッドシートに入れることも頑張ればできます。これについては今後書くかも。

取得率は現在99.9%なので今流行のビッグデータとしても使えるかもしれませんね!!それではより良い解析ライフを〜\(^o^)/

SpookyJSで楽々テスト&スクレイピング

最近はスマホとかマルチデバイスに対応するのが当たり前になってきて、javascriptやデザインのテストが面倒になってきました。全ページのブレークポイントに合わせたキャプチャを取りたい、ログイン→いろんな操作をした後のキャプチャを取りたいなどなど。そこで便利なのがSpookyJSです。

私はデータを分析するときなど、スクレイピングして情報収集する場合がほとんどです。通常であればrubyのnokogiriなどでスクレイピングするのですが、ajaxを使っているサイトの場合は非常に面倒くさいです。そこ便利なのがでSpookyJSです。

ステマみたいな感じで始まりましたが、結構便利でしたので共有したいと思います。

SpookyJSとはなんぞや

SpookyJSは、テストやブラウザ操作などで有名なPhantomJS、CasperJSの機能をnode.jsで一部使えるようにしたパッケージです。CasperJSのeachなどグルグル回せる機能、cickeLabelという指定されたテキストをクリックする機能など、結構便利な機能が使えなくなってます。しかしながらそれはjsカバーしちゃえば良い話。

SpookyJSのインストール

ここではMac環境での動作を想定しています。(恐らくWindowsでも動くとは思いますが、検証していません。)

最初にPhantomJSとCasperJSをインストールしましょう。

インストールが終わったら、SpookyJSをインストールしましょう。インストールしたいディレクトリに移動し、

でインストールは完了です。

SpookyJSの使い方

大体はcasperjsのリファレンスを見ればどうにか理解できるはず。

大体使うメソッドは決められているので大雑把に説明します。

利用例

ここでは、サイトをキャプチャし、2秒毎にタイトルを1つずつログ出力します。

コード

spookyオブジェクトを作り、後はその中に上から下に沿って実行されていくイメージです。
上のコードは
start→then
で終わっていますが、
start→then→then→then
などロード後、処理後につなぎ合わせて実行することができます。

waitを使うことで、処理を指定秒遅延させることができます。
上のコードはループ内でwaitしているためthis.waitとなっていますが、spooky.wait(function(){処理})で
start→then→wait→thenのようにつなぎ合わせることができます。処理的にはsetTimeoutみたいな感じ。

evaluateを使用すれば、ヘッドレスブラウザでjavascriptを動作させることが可能になります。evaluateは値を返せるので、変数で格納し利用することが可能です。また、引数を扱う場合は以下のようにすることで引数として値を渡すことができます。

captureでその画面をキャプチャすることができます。

emitで関数を使用する

通常、ログを出力する際にはconsole.log()で出力すると思うのですが、Spookyオブジェクト内では動かない模様。

SpookyJSのサンプルからの引用ですが、spooky.on()で関数を作り、emit()で呼び出す処理が必要になります。

おわりに

ajaxサイトのテストなどでかなり便利。APIがないためログインしてcsvを持ってこないといけないようなサイトだと、SpookyJSでダウンロードまで自動化できるので便利です。これについては次回の記事でまとめると思います。(多分)

参考サイト:casperJSでwebスクレイピング