JQ Engineer Blog

Pain is temporary. It may last a minute, or an hour, or a day, or a year, but eventually it will subside and something else will take its place. If I quit, however, it lasts forever.

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

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

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

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

1
2
3
4
5

<body>
  <div class="photo">
      <img class="trimImg" src="xxx.jpg">
  </div>
</body>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.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です。

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

$(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();
});

流れとしては、

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

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

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

以上

行動ログ解析基盤の構築

行動ログ解析基盤とは

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

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

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

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

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

cohort_606_365.png (606×365)

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の書き方

見出し

1
2
3
4
5
6

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

文字装飾

1
2
3

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

水平線

1

*** 水平線

リスト

1

- リスト項目

コード記述

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

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

プレビュー：

1

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

リンク

1

[テキスト](URL)

画像

1

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

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

参考サイト

Markdown記法 サンプル集

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

  • 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で記述できたりするので便利だけど、フロントエンドの開発環境をセットアップするのが大変
  • そして、フロントエンド、サーバーサイド両方のサーバーを起動する必要がある

sample app

justin808/react-webpack-rails-tutorial · GitHub

3.Rails APIとReactのフロントエンドアプリを別々にする方法

  • RailsはAPIに徹し、jsonを返すだけにとどめる
  • Reactで、ルーティングやViewのレンダリングを担当する
  • この場合、Reactは、Fluxアーキテクチャと共に用いるのが良いと思う
  • サーバーサイドレンダリングを考えないなら、フロントとサーバーを明確に分離できる
  • 完全に別のプロジェクトとして動ける反面、開発のオーバーヘッドは高くなる(2.同様別サーバー立てて開発したり。)
  • APIベースのアプリケーション全般に言えるが、別途以下の事を考慮する必要がでてくる
    • API認証(Tokenベース/Cookieベース)
    • CORS

sample app

FancyPixel/small-frontend · GitHub

React + Flux backed by Rails API - Part 1 | Fancy Pixel

React + Flux backed by Rails API - Part 2 | Fancy Pixel

React + Flux backed by Rails API - Part 3 | Fancy Pixel

Refs.

  • この素晴らしい記事を読んだらそれでおしまいなのですが、サンプルアプリとセットで整理してみたいと思い、記事にしました。
  • 他にも、react + railsのサンプルアプリがあれば、ぜひご紹介ください。

3 ways to integrate Ruby on Rails + React + Flux | Open Minded Innovations

react-rails // Speaker Deck

React and Rails