コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

常設ディスプレイに計測系ダッシュボードを表示するときに便利なChromeプラグイン『Revolver - Tabs』

よくGoogleAnalytics等のダッシュボード表示系コンテンツをディスプレイとかで表示することがあると思うんですが、そういうときに役立つプラグインをご紹介

DL先

Revolver - Tabs

使い方

このツール自体は「GoogleChromeで複数タブを開いているときに一定秒数でタブを切り替えていく」 というものなのですがそこに「タブが変わる度にリロードをする」という機能がついているので「1タブだけ開いていれば指定ページを定期的にリロードする」ということを実現できる

クリックすると有効化して、一定期間でリロードが走るようになる。

緑色の状態がリロード有効状態

f:id:shinkufencer:20181004234944p:plain

赤色だとされない

f:id:shinkufencer:20181004235024p:plain

時間の間隔などはオプションから設定できる

f:id:shinkufencer:20181004235051p:plain

ここをチェック入れてセーブすれば、タブ読み込みごとにリロードする

f:id:shinkufencer:20181005150733p:plain

参考リンク

ActiveRecordにはそれまでのorderを無視して上書きするreorderというメソッドがある

一体どういう意図でつくったのかわからないが見つけたのでメモがてら。打ち消しの記述なんて危険しか孕んでないから、おそらくコレは見かけたら駆除したほうがいい系のメソッドだとは思っている。

環境

rails (5.2.0)

例えば普通にorderすると以下のようにクエリが吐き出される

User.order(:id)
#  User Load (0.6ms)  SELECT `users`.* FROM `users` ORDER BY `users`.`id` ASC

複数指定すると以下のように重ねてORDER BYをかける

User.order(:id).order(:updated_at)
#  User Load (5.2ms)  SELECT `users`.* FROM `users` ORDER BY `users`.`id` ASC, `users`.`updated_at` ASC

ここをreorderに返ると以下のようになり打ち消される

User.order(:id).reorder(:updated_at)
#  User Load (2.7ms)  SELECT `users`.* FROM `users` ORDER BY `users`.`updated_at` ASC

reorderは重ねて使っても最後しか採用されない

User.order(:id).reorder(:updated_at).reorder(:created_at)
#  User Load (0.7ms)  SELECT `users`.* FROM `users` ORDER BY `users`.`created_at` ASC

参考リンク

画像をアップロードできる機能におけるImageMagickの危険性を考えてみる

画像変換系SaaSを使うか否か、を考えたときのただの雑記です。

今回考える機能

ざっくりとした要件

『ユーザーが任意でアップロードした画像を保存したい』

という要件があるとする。

考えなければいけないこと

仕様面

  • 画像ファイルの形式は何を許可するか
  • 画像ファイルの最大サイズはどうするか
  • 画像ファイルを受け取ったあとに加工する必要があるか

セキュリティ面

  • Exchangeable image file formatをどうするか
  • 悪意のあるファイルをどう受け取らないようにするか
  • 悪意にあるファイルを受け取ったときにどうすればいいか

この場合にImageMagickを使うPros/Cons

Pros

  • 自前で敷設できるので、オンプレでもクラウドでも置ける
  • 豊富な関連ライブラリ
  • 導入事例が多い

Cons

  • パッチが多いので、お守りを強く気にする必要がある
  • 対応する画像が多いがゆえに脆弱性報告が多く、真に対応が必要なものを特定しづらい
  • 悪意のあるコードが入った画像に変換を掛けることもあるため、実Webアプリケーションと同居させるのは怖く、利用アプリケーションとは切り離したサーバにImageMagickを置く必要がある

参考サイト

Rubyの呼び方がいろいろある演算子たち

=> をハッシュロケットと呼ばれることを知り調べてみた系トリビア

ここで紹介する記号達の名称はオフィシャル系では見かけたことがないのであくまでもネットを漂う情報のひとつ。

元ネタ

JuanitoFatas/what-do-you-call-this-in-ruby: Solving the second hard problem in Computer Science.

=>

日本語圏ではハッシュロケットやロケットハッシュと呼ばれる事が多い、JavaScriptの文脈を受け継いでかファットアローと呼ばれることもある様子

->

ダッシュロケットと呼ばれることが多そう、ラムダリテラルなんて呼び方もあった。

<=>

宇宙船演算子、スペースシップ演算子、UFO演算子と呼ばれる。まぁ確かに見える。

~>

Gemのバージョン比較の文脈から「pessimistic (comparison) operator (悲観的バージョン演算子)」と呼ばれる事が多い様子

関連リンク

PV、Session、UUの考え方を整理してみる

PV、Session、UU。どれもサイトに訪れた数を表す指標であり、大概のツールは実装されている。しかしながらいざ自分で作ると考えたときにどういう違いがあるのかがあまりまとまってないのでまとめてみた系雑記です。

PV,Session,UUとは

どれも期間に対してどれくらいの数があったかの指標となっており、「一週間のUU数」というような使われ方をする。

そもそもの基本概念は下記サイトにわかりやすくまとまっている

UU、PV、セッションの違いを解説! | Growth Hack Journal

こちらのサイトの表現になぞらえて書くと

  • PV数とは「閲覧されたページ数」
  • UU数とは期間内に訪れた「ユーザ数」
  • セッション数とは「訪問回数」

というような形になる。

PVの計測

基本的な考え方

PVは閲覧されたページ数なので、単純なサイトの場合は「ページを表示した数」で表現することができる。

ページを表示した数を指標を取る方法はいろいろある。参考例としては以下のようなやり方がある。

  1. 対象ページへのWebサーバ(Apache,nginx)上でのアクセスログの数
  2. WebアプリケーションのHTMLレンダリングを行った回数
  3. JavaScriptのページ読み込み完了のトリガーを契機に1カウントとして記録

自明な話ではあるが、GoogleAnalyticsなどはJavaScriptを使う形でPVを計測している。

PV数をカウントする際の注意点

SPA

SPA(Single Page Application)の場合は従来のページアクセスと異なり、JS内でページが遷移してしまうので、上記であげたAやBのやり方だとユーザがページを切り替えているにもかかわらず1PVとなってしまう。

その場合、Cの手法を使い、SPAとしてページが移動した場合は異なるPVとしてカウントするという考えのもと計測する必要がある。

こちらに関しては扱うWebサイトによって考え方が変わるのでサービス関係者で定義をしっかりと行う必要がある。

動的追加読み込み

スマホでのリスト表示のコンテンツの場合、追加で読み込むことがままある(Infinit Scrollと呼称している事が多い)

これもSPAと同様に同一のページではあるが、従来のページネーションが存在するページで考えた場合、2ページ目、3ページ目動くものではあるので、その分をPVとしてカウントするほうがページネーションがあるサイトと比べたときに自然になるケースがある。

これもサービスの性質やポリシーによって分かれる部分なので、これらもしっかりと定義を行う必要がある。

Session数の計測

基本的な考え方

ユーザが一定時間そのサービスに連続して触れていた時間をセッションと考える。引用となるが以下の1文が説明としてシンプル

アクセス解析において、セッションとはWebサイトにアクセスして行う一連の行動を示す。「訪問」「ビジット」と同義。 - セッション とは 意味/解説/説明 【session】 | Web担当者Forum

PVよりもより大きな塊で考えるのでこの考え方になる。

Sessionの捉え方

では「一連の行動」をどうやって定義するかが結構考えたによってはまちまちになる。一番有名なのはGoogleAnalyticsの例で同一サービス内のページから30分以上の経過、もしくは日をまたぐ、もしくはキャンペーンという異なるコンテキストに行ったときにセッションが途切れる

概ねWebサイトだとこの考え方を主軸にしていることが多く、同一のドメインで回遊し続けている間は何をしても1セッションとするが、サイト閲覧を離れて30分後にまた回遊を開始したら別のセッションとなる。

Sessionの技術的なアプローチ

ステートフルなページを実現する際に昔から用いられているのはCookieである。そのため、同一の人が同じページを回遊しているというチェックもCookieでやるのが技術的には一般的だと思われる。

近年だとLocalStorageやログインのやり方などもあるのでいろいろなアプローチの方法があるが、どのブラウザでもあるのはCookieなので、Cookieを使い、同一Cookieを持つ人がどういう時間の流れで動いているかで計測するのが一般的かと思われる

Session数をカウントする際の注意点

Session数は1セッションをどう考えるかによって大きく数値に乖離がでる。たとえば1時間回遊ごとに1セッションなどの概念を持ち出したらカウント数がかなり変わる。

デファクトスタンダードとしてGoogleAnalyticsの考え方があるのでそこに則る形が多いが、独自でやる場合はその点を明確に示さないと、多くの人に示す数値としては比較しづらく、使いづらいのではないかと思う。

UU数の計測

基本的な考え方

UUは文字通りに設定された期間内に訪れたユニークユーザの数なので、ユニークな数をカウントすればいいのだが、何を持ってユニークとするかがサイトの作りによって異なる。

UUの捉え方、技術的アプローチ

ログインユーザ

一番単純なのはログインを必ず求められるサイトなどが簡単で、ユーザごとに一意となるユニークなキー(IDやメールアドレスなど)を持っているのでログインを行ったユーザのID数をカウントすればそれがUUとして考えることができる。

そのため、RDBにログインした時間を記録したり、ログイン処理をしたIDとログイン時間を記録しておけば、週間や月間のUU数を出すことができる。

ブラウザのCookie

ログイン機構を持たない場合はどう考えるか、ここでもCookieを使う。

新しくページを訪問した人に重複しないユニークなCookie文字列を与えて、アクセスログとしてその文字列をロギングすれば、ある程度のユニークなアクセス数は検証することができる。

UU数をカウントする際の注意点

ユーザーIDなどがわかれば、その期間に動いたIDの数をカウントすればいいし、実際の人間の数と剥離なく言葉通り、UniqueなUserとしてカウントすることができる(複数アカウント持てるサービスだと別ですが…)

ただしCookieのカウントの場合、ちょっと話がかわる。

一昔前はWindowsIEしかない、かつCookieを気軽に消すことがない時代だったので、1ブラウザ=1人という考え方もできたが、最近はブラウザも複数、一人の人がスマホとパソコンという時代になってきたので、それも言いづらくなってきたので、この手法を取る場合はUUではなくUB(UniqueBrowser)という考えかたをする場合もある。

関連ページ

『Rejectcon 2018』に行ってきたよメモ

Rejectcon 2018(builderscon tokyo 2018 番外編)]に行ってきたのでメモ

各発表の感想

※資料スライドは見つけたら貼ります。


その「s」を付けるために ─ はてなブログHTTPS化の軌跡

感想

  • builderscon2018でもあった、HTTPS化の裏話。どちらかというとこちらは全体的な至るまでの歴史の話。
  • https化したいけど、埋め込み側が対応してなくて…は各種メディアサイトも味わってるのでその思い出が出てきた
  • 個々の開発環境でもhttpsを実現させる方法はやっぱりそうなんだという感じだった。
  • Twitterネームにアンダースコアが入るとMarkdown殺しだなとこの感想書きながら感じた。

関連リンク


デザインシステムを導入してUIに秩序を取り戻す

感想

  • デザインシステムという言葉を初めて知る
  • ReactNatvieだとWebもスマホネイティブも共通した世界観にやりやすいというのはなるほどな…と思わされた
  • ただ、クロスプラットフォームあるあるのViewは涙ぐましい努力によって成り立つというのは変わらずな感じで…

関連リンク


Rails + Vue.jsでUIリニューアルしてみた

スライドリンクは見つけたら貼ります。

感想

  • FatになってしまったViewやゴリゴリに作られたjqueryに立ち向かっていった話
  • Vue.jsのほうが習得コストも低いので確かに採用するよなーとは思った。
  • フロントエンドって無秩序になりやすいので、ある程度ルールを敷設するの大事だよな、って思った。

関連リンク


新しい技術書出版サービスの作り方

※多分スライドリンクなし

感想

  • PEAKS(ピークス) のCTOにできるまでの経緯がまとめられた話、まさかCoreAudio本の作者の人だとは知らなかった…。
  • Serviceをつくるときの考え方のツールの使いこなし方がすごいというか、こういうのって本にまとめられてたりするんだろうかと思ってしまった。
  • 知らなかったを知るという今年のbuildersconにめちゃくちゃ入る話だった
  • 技術書典のブームや、ピアソンショック、電子書籍の勃興とかもあるし、欲しい時に欲しいものが見れて、手に入る時代とか来ればいいなって感じ(小並感)

関連リンク


DAO を目指す Ethereum 技術者コミュニティ「Hi-Ether」の挑戦

スライドリンクは公開されたら貼ります

感想

  • Ethereumとそれを扱うコミュニティの話
  • ブロックチェーン技術は投資商品としての話しか出てこないのと、トークンをどういう扱いかたをすると固い承認情報としての価値が出せるのかとかがのが一般的なのかがイマイチ見えてこないので勉強不足感…なにか機会があればしらべたい
  • ぜんぜん本筋とは関係ないけど、イーサリウムなのかイーサイリアムなのか

関連リンク


フロントエンドエンジニアが考えるべき事は沢山ある

感想

  • ユーザの体験向上、JavaScriptライブラリとの向き合い方、アクセシビリティ、どれも大事な問題だが、なかなかサービスの売上向上につながりにくいし、これがプラスに転じることもないので難しい話。
  • これらの考えるべきことは最初から頭に入れておいてやる/やらないをチョイスすべきだよなぁという気持ち。

関連リンク


入社から二ヶ月経ってわかった SmartHR 開発のつらいところ

多分スライド公開されない

感想

  • 今年の確定申告は2枚から3枚になる、気をつけろ!という強いメッセージを感じるスポンサーセッションでした。

関連リンク


Rails+ReactなSPAサイトでのSEO

感想

  • RailsにSPA+SSRの知見の塊のような話、やっぱりhypernova一択になるんだな…
  • どうやって「ダメだった」を積み重ねた結果、今に至ったのかを説明してくれたのはすごいよかった
  • Googleの覚えめでたい状態にするにはスピード大事だなっていう感じ
  • ブラウザ固有の昨日を抽象化するの結構難儀なので割と設計しっかりしないと破綻しそうだなと思った
  • E2Eテストはもうちょっと聞いてみたかった…

関連リンク


Wantedly機械学習プロダクト開発を支える機械学習基盤

感想

  • 機械学習への取り組み方と体制の話
  • Wantedlyさんは事例聞く度エンジニアたちが改善してきたんだなという印象を受ける
  • やっぱりデータが中央集権できてるの強いな、って再認識した

関連リンク


FiNCにおけるFault Isolationの取り組み

speakerdeck.com

感想

  • マイクロサービスを組み合わせる上で障害の度合いをいかにして少なく保つようにしているかという話
  • マイクロサービス系は用語はわかるが、実際使ったことないとかだったので実例ベースで話が聞けて参考になった。
  • テクノロジーに本腰いれて取り組んで行くんだな…という印象

関連リンク


エンジニアが起業し自社サービスを立ち上げるまで、そしてその後

あるエンジニアが「Kibela」というサービスを考え、リリースするまでのフローを全部教える では語られなかった裏話

感想

  • 多分スライドが上がらないであろう泥臭い話
  • 会社を続けていくには金が必要だということを当たり前ながらも思い知らされる
  • PEAKSさんの話も含めて会社を続けていくにはやっぱり縁も重要だなという実感

関連リンク


The Five F'ing Questions You Should Answer In Your Proposals

感想

  • カンファレンス運営の経験値の長いanovaさんからのありがたいプロポーザルの書き方ガイド
  • 「タイトルと最初の段落に話したいことがまとめられないのは、自分で言いたいことがまとめれていない」というのはすごい納得感というか、すべてに通ずることだなと思った。

関連リンク


全体を通しての感想

  • FiNCさんの会場がとにかくかっこいい+スライドみやすいでプレゼンするには超絶いい環境だなと思いました。
  • 三者三様に面白い話しだったのですが、中でも割とおおきくサービスを舵切りする人たち(ROLLCAKE,bit journey)の話が聞けたのが結構貴重な体験だったと思う
  • Railsの知見も結構拾えたので、ちょっと活かしていきたいなー…SSRとか辛くてやれないと思うけど…

GooglePlayへの遷移を実現したいときのURIの書き方2種

普段遣いしているとわかるけど、そうではないとわからない系のメモ

やりたいこと

リンクを押すとGooglePlayに遷移する!みたいな奴

書き方例

普通のURL

https://play.google.com/store/apps/details?id={{アプリのパッケージ名}}

で指定できる、ダンジョンメーカーの場合は com.GameCoaster.DungeonMaker がパッケージ名なので以下のようになる。

https://play.google.com/store/apps/details?id=com.GameCoaster.DungeonMaker

このURIの場合はブラウザで閲覧できる半面、Intentの性質上ストアアプリを開くか通常のブラウザを開くかを聞かれてしまうことがある

特殊URI market

完全にPlayのアプリを開いて欲しい場合はこちらを指定すると良い

market://details?id={{パッケージ名}}

またダンジョンメーカーを例に出すと以下。

market://details?id=com.GameCoaster.DungeonMaker

こちらにすると、Playストアのアプリで開くURIになるので、ブラウザの選択を確認されることがない。ただし、iOSなどAndroid以外のものでこのリンクが作られてしまうと遷移されないので注意。

考え方

広く多くの人が見る画面のリンクであれは https:// はじまりのもの、Android専用ページのリンクであれば market:// のものがよいかと思います。

関連リンク