そんな今日この頃の技術ネタ

本家側に書くほどでもない小ネタ用

Chrome拡張機能を作ってみる その2. UIを作成する、設定を保存する

前回に引き続きChrome拡張機能を作ってみる話。

blue1st-tech.hateblo.jp

今回はHTMLでUIを構成したり、設定を保存したりしてみる。

「ページのタイトルとURLを事前に指定したフォーマットでクリップボードに保存する」というお題で作ってみた。

github.com


今回は以下のファイルで構成している。

  • 定義ファイルmanifest.json
  • 設定画面options.htmlとそこから呼ぶoptions.js
  • ポップアップ画面popup.htmlとそこから呼ぶpopup.js
  • 共通で使用するsetting.js
  • icon.png
続きを読む

Chrome拡張機能を作ってみる その1. HTMLを改変する

ざっくりChrome拡張機能(Chrome Extension)の作り方を学んでみた。

学ぶにも相応にモチベーションは必要ということで、 ある程度実用的かつ拡張機能らしさがある例題として「ログインページのパスワードフォームの文字列を平文で表示する」機能を作成してみることにした。

具体的には閲覧しているページのHTMLの<input type="password">要素を<input type="text">に置換すれば良い。

この動作を拡張機能で実装してみる。



拡張機能の作成の概要

拡張機能は大雑把には、以下の要素により作成できる。

  • 名称やアイコン、後述する実態ファイルの構成なんかを定義するmanifest.json
  • 機能の実体となるJavascript
  • UIを構成するHTMLとそれに付随するCSS、Javascript

今回の機能では以下のファイルを作成した。

  • manifest.json
  • constantscript.js
  • background.js
  • icon.png

github.com

続きを読む

Google Compute Engineを使ってみる

職場が変わると色々見えてくるものが変わるもんで、 2016年も末となって今更ながらにクラウドのサービスの凄み有り難みを体感している今日この頃。

そろそろサーバサイドエンジニアの職能として、 インフラエンジニアが用意してくれる箱をいじるだけでなく、 自身でもどういうものなのかある程度は把握する必要があるなと思うところ。

そんなサービスの一つが、Googleのインフラ上で仮想マシンを立てるIaaSであるところのGoogle Compute Engine。

幸いにして$300分のクレジットで2ヶ月間体験できるとのことなので、試しに使い始めてみるところまでやってみた。

続きを読む

Airbnb版Redash(?)なSupersetをひとまずDockerで立ち上げてみる

Web上でSQLを記述・保存できて気軽にデータの可視化できるスグレモノRedash。

blue1st-tech.hateblo.jp

Redashはシンプルながらも十分な機能があるのだが、 一方で使い込んでくるともう少しグラフに表現力があれば・・・とか、 ダッシュボードの配置がもっと柔軟なら・・・とか思ったりする場面もある。

そこで代替になりそうなのがAirbnb版RedashとでもいうべきSuperset。

github.com

(以前のまだ「Caravel」という名前だった頃から試してみようとは思いつつ時間を取れないでいたら、 いつの間にか名前が変わってた。)

今回はひとまずDockerで導入を行ってみた。

続きを読む

もうちょっと真面目にInfluxDBの使い方を調べてみる

以前にデータを可視化する手段の一つとしてInfluxDB+Grafanaについて調べていたけれど、 その時は導入してデータ投入して動いた段階で満足してしまっていた。

blue1st-tech.hateblo.jp

そうこうしている間にバージョンは1.0を回り、ちょうど使いたい案件もあったので、 改めてもう少し真面目に使い方を調べてみた。


そもそも時系列データベースなるものは何ものなのか

もちろん時系列データが扱いやすいらしいことは名前から明らかだけど、 具体的にどう便利なのかという部分を正直なところ理解していなかった。

どこまで時系列データベース一般の話かは分からないが、 InfluxDBを実際に使ってみて「ああなるほど、こりゃ便利だ」と思ったのが

  • スキーマレスなので要素の増減に柔軟に対応できる
  • 時系で変化するデータを集計するのに便利な機能が揃っている
  • 古いデータを自動で削除して容量を削減できる
  • 時間ごとの処理を定義できる

あたりだろうか。

続きを読む

TogelackをDockerで導入してみた

イケてる感じのIT企業で絶賛大流行のSlack。

(残念ながら前職ではもろもろの都合で導入できなかったし、次の職場も今のところ違うツールらしいんだけど・・・)

かくいう僕も、Slackはコミュニケーションツールというよりは個人用のタイムラインとして活用してたりする。

blue1st.hateblo.jp

  • Bitcoinの値動き通知
  • ゴミ出しの曜日の通知
  • サーバの監視アラート
  • 重いスクリプトの完了通知

...etc

あらゆるものを一箇所にまとめられるし、スマホからも確認できるから便利なのだ。


そんな感じでテック系な使い方を挙げてみたけど、もっと単純にスマホからもPCからもアクセスできることを活かして、 例えば技術ネタだったり本や映画の感想だったりの思いついた短文をひょいひょい上げるメモとしても重宝していたりする。

で、そういった使い方をしていると欲求として出てくるのが、 発言を必要なものだけ取り出して並べ替えたりしたいという欲求。

つまりはSlack版のTogetterが欲しい!

APIもあるし自作しようか・・・と考えていたが、そういえばそういうのを既に作ったようなニュースを見かけたこと思い出し、 ググって出てきたのがTogelack。

github.com

qiita.com

qiita.com


Herokuに一発デプロイする手段も用意されているっぽいけど、極めて個人的な代物ということで自宅サーバに入れることにした。

かねてより自宅サーバに関しては出来る限りDockerで導入しようという方針なので、今回もDockerで環境構築することにした。

続きを読む

Re:dashのcohortを使う

ここんとこお馴染みのRe:dashネタ。

blue1st-tech.hateblo.jp

Re:dashには様々な表現方法が用意されていて、 その中には継続率なんかの示すのに便利なコホートもあるんだけど、 ググってもどういうクエリ投げれば良いのかという話が意外と引っかからないし、 デモページも色々いじられてしまったようでそれらしきものが見当たらない。

そんなわけで試行錯誤したりコード読んだりしてみてたんだけど、 結局は

  • 対象日を示すdate
  • 全体の数を示すtotal
  • 対象日からN日後を示すday_number
  • N日後の数を示すvalue

というカラムを設ければ良いようだ。

f:id:blue1st:20160907013805p:plain

f:id:blue1st:20160907013858p:plain


ありがちな新規ユーザの継続率みたいな事例に合わせて表現すると、

  • dateに登録日
  • totalに登録日の新規登録者数
  • day_numberに観測日-登録日の日数
  • valueに観測日に再訪した登録者数

をそれぞれ当てはめれば良い感じ。

うちの場合はRedisに日毎の新規登録とその日のアクセスのsetをそれぞれ保持していて、 毎日バッチでそれらを規定日数分ループで遡って算定した値をレコードとしてインサートしていって使おうかなという所存。