という話

技術ブログにしたい

Chromeで画像に-webkit-filterを適用した時のバグのような挙動

Chromeのバージョン45.0.2454.85の話です。
スマホ版では確認出来なかったのでPC用のChromeのバグだと思います。

原因

以下の様なCSSをかけて画像を少し明るめに表示してました。

img {
  -webkit-filter: brightness(1.05);
}

この状態でスクロールをしていくと、したの方の画像が真っ白になって表示されなくなります。
また上に戻るとさっきまで表示されていた画像も表示されなくなります。


ためしにmeryさんのページに上記のCSSを当て込んでスクロールした状態です
f:id:ichiy:20150915185007j:plain

驚きの白さです。
表示されてる画像もあるのですが、どういう基準で表示されたりされなかったりするのかまでは分かりませんでした。

解決方法

見つけられませんでした。
Chromeのアップデートを待つしか無さそうです。

LINE DEVELOPER_DAY 2015に行ったが桁違い過ぎて参考にならなかった #linedevday

f:id:ichiy:20150428202550j:plain

LINE DEVELOPER DAY_2015 Tokyo
こちらのイベントに幸運にも抽選で当たったので参加させて頂きました。

LINEのデベロッパー達が遭遇してきた問題への対処などが聞けるって書いてあったので、これから俺も通る道なのかな!と奮って参加したわけですが完全に場違いでした。


togetter.com
ここにまとめられてますが、本当に桁違いです。はい。

先月のPVが2000万行って(∩´∀`)∩ワーイとか思ってたんですが、マヂで雑魚すぎて参考になりません。
PVではなくメッセージの数なんで単純比較は出来ないですが、1日100億ですよ?10倍だぞ10倍!

Redisの話になって、「よっしゃ!やっと分かる話来る!」とか思ったんですが、
30クラスター、38TBメモリーって・・・。そりゃ・・・お前・・・。


上記以外の講演も清聴させて頂きましたが、全体的にこんな感じのスケールばっかでした。
参考になる部分もありましたが、HBaseもHadoopも使ったことない雑魚が来るべき場所ではなかったと感じています。
他の方に当たったほうがよっぽど有益だったかも。。。


会場に来ていたこういうトッププレイヤーの方たちが頑張った経験をOSSとかブログとかで発表してくれて、そういうのを見て俺みたいなのが参考に出来る部分を参考にさせて頂くというピラミッド構造何だと思います。
ユダヤ人の格言にも「知識は水に似ている。高いところから低いところへ流れる。」というのがありますが、本当その通りで、こういうトッププレイヤーのおこぼれに預かることでしか生きていけないのだなぁと再確認しました。


卑屈になってしまいましたが、イベント自体は素晴らしかったです。
無料でおみやげを頂いたりコーヒー飲み放題だったり、ランチを頂いたり。(そこじゃない)
f:id:ichiy:20150428202603j:plain
LINEさんありがとうございました!


LINEの規模には遠く及ばないですが、雑魚は雑魚なりに頑張っていこうと思います!

PHPでEC2が使ってるIPアドレス帯を取得する

EC2の東京リージョンが使ってるIPを取得する必要があった時のメモ。


https://ip-ranges.amazonaws.com/ip-ranges.json
上記のURLでAWSが使ってるIPアドレス帯を取得できる。

$json = file_get_contents('https://ip-ranges.amazonaws.com/ip-ranges.json');
var_dump($json);

こんな感じで取得すると

string(41372) "{
  "syncToken": "1429628708",
  "createDate": "2015-04-21-15-07-01",
  "prefixes": [
    {
      "ip_prefix": "23.20.0.0/14",
      "region": "us-east-1",
      "service": "AMAZON"
    },
    {
      "ip_prefix": "27.0.0.0/22",
      "region": "ap-northeast-1",
      "service": "AMAZON"
    },
    {
      "ip_prefix": "43.250.192.0/24",
      "region": "ap-southeast-1",
      "service": "AMAZON"
    },
......


こんな感じでいっぱい出てくる。
ただこれは海外とかも含めAWS全体のサービスで使ってるIPなので、東京リージョンのEC2だけ抜き出します

$json = file_get_contents('https://ip-ranges.amazonaws.com/ip-ranges.json');
$json = json_decode($json, true);
$ec2_ips = array();
foreach ($json['prefixes'] as $line)
{
  if ('EC2' === $line['service'] && 'ap-northeast-1' === $line['region'])
  {
    $ec2_ips[] = $line['ip_prefix'];
  }
}
var_dump($ec2_ips);

これを実行すると

array(17) {
  [0]=>
  string(14) "46.51.224.0/19"
  [1]=>
  string(12) "52.68.0.0/15"
  [2]=>
  string(12) "54.64.0.0/15"
  [3]=>
  string(12) "54.92.0.0/17"
  [4]=>
  string(12) "54.95.0.0/16"
  [5]=>
  string(13) "54.150.0.0/16"
  [6]=>
  string(13) "54.168.0.0/16"
  [7]=>
  string(13) "54.178.0.0/16"
  [8]=>
  string(13) "54.199.0.0/16"
  [9]=>
  string(13) "54.238.0.0/16"
  [10]=>
  string(13) "54.248.0.0/15"
  [11]=>
  string(13) "54.250.0.0/16"
  [12]=>
  string(12) "103.4.8.0/21"
  [13]=>
  string(15) "175.41.192.0/18"
  [14]=>
  string(14) "176.32.64.0/19"
  [15]=>
  string(13) "176.34.0.0/19"
  [16]=>
  string(14) "176.34.32.0/19"
}

東京リージョンのEC2のIP帯だけ取れました!
あとは保存するなりなんなり

ある要素が画面内に入ったらGoogleAnalyticsにイベントを送信する

同僚から聞きましたが、今の広告業界では1インプレッションは画面内に表示された回数らしいです。
PV=インプレッションの時代は終わってたんですね。。

そんな感じで動作するものを実装しなくてはいけなくなったのでメモ。


いつも通りjQuery使います。
宗教でDOMの直接操作を禁止されてる方には申し訳ないですがここで終わりです。


jquery.inview

要素が画面内にあったときにイベントを発生させてくれるjqueryプラグインです。

使い方とかは以下の記事が大変詳しく、参考になりました。




この記事でほぼ終わってるんですが、ハマるポイントがありました。
このプラグインでは画面内に入った時も出た時もイベントが発生しますし、画面内に既に入ってる状態でも更にイベントが発生したりします。

$('target_dom').on('inview', function(e, isInView, visiblePartX, visiblePartY)
{
  // GoogleAnalyticsに通知する処理
  ga('send', 'event', {'eventCategory':'category', 'eventAction':'action', 'eventLabel': 'event'});
});

例えばこんな書き方をして、上からスクロールしていった場合
1. 要素の上辺が画面内に入った時
2. 要素全てが画面内に入った時
3. 要素の上辺が画面外に出た時
4. 要素の下辺が画面外に出た時

という感じで4つイベントが発生する可能性があります。

今回は
・画面内に要素が入ったら1カウントし、画面外に出るまでカウントしない
・画面外に出てから再度画面内に入った場合は再度カウントする
という仕様にしたいので以下のようにします。

inviewFlag = false; // 画面内に入ってるかどうかのフラグ
$('target_dom').on('inview', function(e, isInView, visiblePartX, visiblePartY)
{
  if (isInView)
  {
    if (!inviewFlag)
    {
      // GoogleAnalyticsに通知する処理
      ga('send', 'event', {'eventCategory':'category', 'eventAction':'action', 'eventLabel': 'event'});
    }
    inviewFlag = true;
  }
  else
  {
    inviewFlag = false;
  }
});


これで画面内に入ったらGoogleAnalyticsに通知できます。

GoogleAnalyticsでイベントをトラッキングする場合は以下のURLを参考に設定します。
analytics.js のフィールドに関するリファレンス - Google アナリティクス — Google Developers

僕はイベントが発生したページとか、DOMを取得したいので以下のようにしてます。

ga('send', 'event', {'eventCategory':'category', 'eventAction':location.href, 'eventLabel': e.target.id || e.target.className});


これでインプレッションを出せるようになりました。

リダイレクトするときにfile descriptor out of range: Permission denied

crontabにタスク書いたのに実行されなかったときのメモ。
エラー内容をコピペしてググっても全く出てこないので。

PHPで作ったタスクに

*/5 * * * /usr/bin/php test.php 12345>>/var/log/test.log 2>>/var/log/test_error.log

みたいな感じでcrontabに書いたんですが全く実行されませんでした。


ログとか確認しても何も出ないので何でかなーと思ってたんですが、これをこのままコピペして貼り付けたらエラーが出ました

$ /usr/bin/php test.php 12345>>/var/log/test.log 2>>/var/log/test_error.log
file descriptor out of range: Permission denied

直訳すると範囲外の数字です的なエラーですね。

原因

標準ストリームのファイル記述子として認識された。
標準出力は1、標準エラー出力は2みたいな感じで12345もストリームと認識されたんだと思います。

解決法

引数とリダイレクトの間にスペースを入れる。

$ /usr/bin/php test.php 12345>>/var/log/test.log 2>>/var/log/test_error.log

これを

$ /usr/bin/php test.php 12345 >>/var/log/test.log 2>>/var/log/test_error.log

こうする。わかりづらいですね。
もしくは文字列とする

$ /usr/bin/php test.php "12345">>/var/log/test.log 2>>/var/log/test_error.log


文字列の場合はストリームのファイル記述子とは認識されませんでした。