JQ Engineer Blog

画像の中心を正方形にトリミングするJavascript

2015-08-06T19:05:24+09:00

正確にはトリミングしたように見せるスクリプトです。必要となった要件は以下の通り。

横長、縦長画像に対応させる
- 横長の場合は、左右は中心位置を取り、上下は目一杯表示する
- 縦長の場合は、その逆
指定のclassを付けるだけで動く
- 複数の画面で動かす予定があったため、発火条件を単純にする

まず、htmlの準備をします。

要点としては、トリミングしたいimgを囲うdivを用意することのみです。正方形にする画像は.trimImgが付いているものです。次に、css。

.photo {
  position:relative;
  overflow: hidden;
}

.photo img{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

imgはposition:absoluteにして、親要素をposition:relativeにすることで様々な場所で使いやすくかと思います。 imgがposition:absoluteなのは、中心位置を取るためです。最後にjsです。

$(function(){
  function GetImageSize(){
    $('.trimImg').load(function(){
      target = $(this);
      parentwidth = target.parent().width();
      parentheight = target.parent().height();
      target.parent().css("height",parentwidth);
      targetwidth = target.width();
      targetheight = target.height();
      if(targetheight < targetwidth){
        targetleft = -(targetwidth/targetheight*parentwidth-parentwidth)/2;
        target.css({
          height: parentwidth,
          width: "auto",
          left: targetleft
        });
      } else if(targetheight > targetwidth){
        targettop = -(targetheight/targetwidth*parentheight-parentheight)/2;
        target.css({
          height: "auto",
          width: parentheight,
          top: targettop
        });
      } else {
        target.addClass('img-responsive');
      }
      });
  }
  GetImageSize();
});

流れとしては、

htmlで指定した.trimImgを取得
画像自体と親要素の高さ、幅を取得
画像の高さと幅を比較して、横長か縦長か画像の形を判別
画像の形に合わせて、中心位置を計算
画像にスタイルを当てる

といったことをしています。また、高さと幅が同じ場合には別のクラスを付けています。（bootstrapのものそのままです）

最初の部分で.load()を使い、画像読み込みが完了するのを待たせることで高さや幅の取得ミスを防止しているのが、ほんの少しの工夫です。

以上

行動ログ解析基盤の構築

2015-07-30T11:50:23+09:00

行動ログ解析基盤とは

「行動ログ解析基盤」を「自分たちが行った施策の結果を簡単に見ることができる基盤、ツール」と定義

代表的な行動ログ取得手法

Google Analytics
- ページ全体のアクセス解析
- コホート分析が可能
Mixpanel
- GAの行動->イベントに特化したサービスである特定のイベントを解析するのに便利
- コホート分析が可能
サーバーのアクセスログ/DBのSQLをダンプ
- fluentdでログを加工、Hadoop(Hive)やTreasure Dataに保存して解析
- 要件に合わせてなんでも可能だが、基盤構築が必要

分析したいこと(コホート分析)

一般的に言われているコホート分析は、サービスを使っている人のユーザ属性を定義し、その割合を表示します。
５つの属性に分けてサービスについてどのような意識で接しているのかを定義します。
- Acquisition(潜在的ユーザ）
- Activation（何らかのポジティブな動作を行った）
- Retention（戻ってきた）
- Revenue（価値ある行動を生んだ）
- Referral（それを他人に広めた）
以下の様なグラフが欲しい
- 5つの属性の行動が時系列でどう変化したのかを把握すること
- 縦軸は%である必要はない

ASCII.jp：Googleアナリティクスで手軽にできる「コホート分析」とは｜Google アナリティクスで実践！コホート分析

「身の回り」データからの発想(1)～コホート分析で読めない未来を読め｜三谷流構造的やわらか発想法｜ダイヤモンド・オンライン

コホート分析とは - Hive Color

実現方法

GAにおけるコホート分析の利用

GAのコホート分析を駆使すると、自社ホームページに訪れたユーザーの定着率を計測することができるため、リピーター獲得施策を考えるうえで非常に有用です。
さらに、指標として収益や目標の完了数を設定すれば、何度接触した人が、どのタイミングで購入に至っているのか・どれくらいの収益に貢献しているのかを見ることが出来ます。
縦軸が訪問ユーザー数を表し、横軸が訪問したユーザーの再訪率を表しています。
上のようなコホート分析の図を一発で出すことはできない

Googleアナリティクスのコホート分析を使って分析してみました。│株式会社イー･エージェンシー

Mixpanelにおけるコホート分析の利用

基本的にGAのコホート分析と同様の機能
同様に、上のようなコホート分析の図を一発で出すことはできない

行動ログ基盤の自作

Mixpanelの活用

Mixpanelは、ユーザーの行動をイベントとしてトラッキングすることができる
コホート分析の対象となるイベントをサーバーサイドに埋め込むことで行動ログを簡単に習得できる
優れた分析機能があらかじめ用意されている
Mixpanelは、API経由で、ログを取得できるため、上図のようなコホート分析のグラフを描画する実装をすれば、表示可能

最強のグロースハックツール “Mixpanel” 導入レポート | グロースハック | つみきブログ

解析嫌いなあなたを震わす！簡単&便利なMixpanelを使おう！ | cherry-pick BLOG

Rubyでmixpanelのイベントをtrackしたり、データをexportする術 - kitak.blog

doorkeeper/event_tracker

Mixpanel Analytics with Ruby :: Envy

自作

ahoyというイベントトラッキングのためのgemがあるので、これを活用することも可能
この場合は、アプリケーションのDBにイベントを保存していくことになる
Mixpanelが提供するような分析機能も自作しないといけないが、APIとの連携部分の構築は不要なのが、メリット

Rails - Ahoy でらくらくイベントトラッキング - Qiita

Refs.

行動ログ解析基盤の作り方 - Hive Color

Happy Elements Labs: fluentdとMongoDBでユーザー行動を見える化

Markdownの書き方

2015-07-30T11:19:58+09:00

見出し

# h1
## h2
### h3
#### h4
##### h5
###### h6

文字装飾

*イタリック*
**重要**
~~取り消し線~~

水平線

*** 水平線

コード記述

ソース：`一部コードにする場合`
プレビュー：一部コードにする場合

ソース：全体をコードにする場合
``` ソースコードをここに書く ```

プレビュー：

ソースコードをここに書く

リンク

[テキスト](URL)

画像

![代替テキスト](画像のURL)

例えば
![JQロゴ](http://www.j-q.co.jp/images/jq_logo.png)
このようになる

参考サイト

Markdown記法サンプル集

Nexus 6が届いた！

2015-07-30T11:04:36+09:00

発注から2日後、届きました。

ReactとRailsの関係性とサンプルアプリケーションのまとめ

2015-07-30T09:47:25+09:00

RailsのフロントエンドのJSフレームワーク(ライブラリ)として最近話題のReactJSを採用することを考える
その際、ReactとRailsとの関係性にいくつかのパターンがありえるので、そのパターンを紹介したいと思います
ポイントは、どこまでReactとRailsを密接に関係させるか
大きくは、次の3つのパターンに分けられます
- 1.RailsのViewの中にReactを埋め込む方法
- 2.Railsプロジェクトの中にReactのフロントエンドアプリを埋め込む方法
- 3.Rails APIとReactのフロントエンドアプリを別々にする方法
以下では、少し詳しくこれらのパターンを見ていきます
どれが良いとかいうのは、それぞれのPros&Consがあるので、一概には言えないと思いますが、そのプロジェクトのニーズに合わせて適切な選択をしていくんだと思います
他にもこういうパターンがあるとか、間違ってるとかあれば、ぜひご指摘お願いいたします

1.RailsのViewの中にReactを埋め込む方法

react-railsというgemが公開されているので、これを使うのが良い
react-railsがやっていることは主に次の通り
- asset-pipelineの中で.js.jsxを変換してくれる
- Viewの中で、react_componentヘルパーを用いて、Reactのコンポーネントをレンダリングしてくれる
- prerender: trueオプションを付ければ、サーバーサイドレンダリングも実行可能(1-2参照)
この場合、Railsのasset_pipelineを用いて、ReactのJS(JSX)ファイルも一緒にコンパイルされる
- さらに、sprockets-coffee-reactを使えば、CoffeeScriptを使ってReactを書くなんてこともできる

reactjs/react-rails · GitHub

1-1.React -> Rails

RailsでレンダリングしたViewの中で、Reactが実行される
ReactからのAjaxリクエストによって、Railsから取得したjsonを用いて、Virtual DOMを組み立てる
普通に考えるとこれがもっともシンプルに記述できると思います

sample app

bigardone/rails_and_react · GitHub

1-2.Rails -> React : サーバーサイドレンダリング

RailsでレンダリングするViewの中に、jsonを埋め込んで、サーバーサイドでJSを実行して初期表示をすることが可能
いわゆるサーバーサイドレンダリングというやつで、これを使えば、初期のロード時間を短縮し、SEOにも対応できます

sample app

bensmithett/sample-react-rails-app · GitHub

1-3. Rails + React + Flux

react-railsをベースにしているが、Railsプロジェクト内にFluxアーキテクチャを取り入れた例
このサンプルでは、Flux実装にaltを採用
asset管理は、rails-assetsを利用

sample app

zhubert/react-flux-rails-demo

goatslacker/alt

2.Railsプロジェクトの中にReactのフロントエンドアプリを埋め込む方法

2-1. Rails + React

Railsのasset-pipelineの仕組みを使わずに、フロントエンドアプリケーションを構築
- 当然react-railsは、使わない
- Reactのassetsは、webpackなどを使ってコンパイル
ただし、Railsプロジェクト内にclientディレクトリなどを切って管理される
アプリケーションとしては、分離されているものの、プロジェクトとしては1つに収めることができるので、3.よりも多少開発はしやすいか
npmモジュールを使ったり、ES6で記述できたりするので便利だけど、フロントエンドの開発環境をセットアップするのが大変
そして、フロントエンド、サーバーサイド両方のサーバーを起動する必要がある