だいぶ昔に作ったwebサービスのSQLを見直したら5倍以上速くなった

f:id:hogesuke_1:20170703013401p:plain

http://nicotune.net/

お気に入りのニコニコ動画投稿者の新着動画を表示してくれるサービス

チューニングした

最近はNetflixにうつつを抜かして、ニコニコ動画を観なくなっていましたがPUBGプレイ動画にハマってしまいニコ厨化しつつあります。

新着動画の確認にはけっこう昔に作ったwebサービスのNicotuneを使っていましたが、表示のあまりの遅さがストレスだったのでチューニングを行いました。

チューニング結果

  • 前) 初期表示 約15秒
  • 後) 初期表示 約3秒

DBにindexを貼っていなかった（！）のでindexを貼った上で、実行に10秒近くかかっていたスロークエリを修正しました。 10秒かかっていたものが数十ミリ秒に改善され、なんとか使用に耐えられるものになりました。

SQLのパフォーマンスチューニングは成果が目に見えるうえ、劇的な効果を得られるので楽しいですね。

GitHubでコードリーディングを快適にするChrome拡張を作った

f:id:hogesuke_1:20170528163451p:plain

作ったもの

chrome.google.com

GitHubでのコードリーディングを快適にするChrome拡張です。

以下の機能があります。

  • githubのコード表示領域の幅を調整できる機能
  • githubのdiff表示においてスペースのみの変更行を表示しないようにする機能（w=1のクエリを付与）

作った動機

ネストが深くなっているようなコードでは1行が長くなりすぎて、表示領域に収まらない場合があります。
そのようなコードをレビューする際に、スクロールで右に左に行ったり来たりするのが非常にストレスでした。

また、ファイルのインデントを修正された場合に大量のdiffの中から本質的なコードの変更を探すのが困難であることも悩みのたねでした。

w=1 のクエリを付与することでスペースのみの変更行を無視してくれる機能が提供されているのですが、あのオプションなんだっけ？と忘れてしまうことが度々あります。
（ w=1 のオプションは公式のUIにて切り替え可能として欲しいところ）

導入

こちらより追加してください。

github-adjuster - Chrome ウェブストア

使い方

f:id:hogesuke_1:20170528213419p:plain

  • < > をクリックすると100px広がります
  • >< をクリックすると100px狭まります
  • w=1 をクリックするとスペースのみの変更行のdiffが無視されます

リンク

問題がありましたらIssue, PullRequestを頂けると嬉しいです。 github.com

f:id:hogesuke_1:20170528164024p:plain < 意味はないけどゴールデン

なかなか覚えられないUnixコマンドの入力を補助してくれるwebアプリケーションを作った

f:id:hogesuke_1:20170524054012p:plain

Unix Command Generator

成果物

Unix Command Generator
http://command.hogesuke.net/

Unixコマンドの引数やオプションの入力を補助するWebアプリケーションです。
説明を読みながらコマンドの組み立てが可能な動的なリファレンスを目指して作っています。

まだ少量しかコマンドを用意できておらず実用的でないですが、これから少しずつ充実させていく予定です。

機能

  • 引数/オプションの入力
  • 入力内容のコピー
  • コピー履歴の参照

基本、マウスでポチポチとオプションを選び、引数を入力し、それをコピーする、というだけのアプリです。

コピーの履歴をLocalStorageに保存しているので、過去に入力したものを使いまわせるという点で便利かもしれない。

※ ここで入力した内容はどこにも送信されません

作った動機

コマンドの引数、オプションを覚えられず、いつもリファレンスを見ながらフムフムといった感じで入力しているのですが、リファレンスとコンソールを行ったり来たりするのが煩わしく面倒であるため、リファレンス読みながら入力できるものがあったらいいのではという気持ちで作りました。

技術スタック

  • Angular2
  • TypeScript

そろそろAngular2を触っておこうと思い試してみました。

Angular1とは似ても似つかず多少うろたえましたが、Controllerが廃止されコンポーネント指向となったことにより現代的な実装が可能になったように思います。 ただ相変わらず覚えることは多く、公式の日本語ドキュメントもないので英語が苦手な自分には少々敷居の高さを感じました。

TypeScriptについてはいままでちゃんと取り組んでいなかったこともあり、型のありがたさをちゃんと認識していませんでしたが「あ、型ええやん」という具合で一気に虜になりました。 安心安全で心に負荷をかけずにクリーンな心持ちでコーディングに向き合えるのは、とても気持ちが良かったです。

VueとTypeScriptを組み合わせるとVueの手触りがかなり変わってしまう（自分調べ）ので、TypeScriptを使うためにAngular2という選択もありかなという気持ちです。

リポジトリ

PullRequest歓迎しています。

github.com

GitHubのREADMEによく使われる英単語を集計して効率的にドキュメントを読むのに必要な英語力をつける

はずだったんですが、失敗しました。

はじまり

READMEを読みながらライブラリの使い方を探っていたりすると、意味を知らない英単語に出くわすことがある。
プログラミングに集中するためにも英語はスラスラ読みたい。とくにREADMEぐらいは。

それには英語の学習が必要なんだけど、READMEでよく使われている英単語を調べてそれを上から順に覚えると効率が良いのではと考えました。

作ったもの

github.com

GitHubスター数ランキングの上位N件のリポジトリからREADMEをもってきて、そこで使われている英単語の出現回数を集計してくれるプログラムです。

結果

上位1000リポジトリのREADMEを集計した全結果をGistに貼りました。

スター数ランキングトップ1000リポジトリのREADME頻出英単語 · GitHub

また、結果の雰囲気を見てもらうため頻出英単語トップ20を以下に貼ります。

# 英単語 出現数
1 the 49458
2 to 33463
3 and 27561
4 a 27336
5 for 20314
6 of 18335
7 in 16349
8 is 15101
9 you 13960
10 with 10987
11 on 8299
12 that 7871
13 or 7870
14 your 7669
15 this 7649
16 can 7348
17 it 6998
18 be 6865
19 if 6810
20 an 5943

見てもらうと分かる通り、上位は中学英語で習うような単語やオープンソースのプロダクト名などが占めています。
（あとうまく抽出できていないノイズのようなワード）

頻出する英単語は、さすがにこれは分かるなーというものが多く、当初思い描いたいたような上から順に覚えればハッピーみたいな目論見は外れました。
全体で6万件ちかくある結果の中から自分が知らない単語を探しだして学習するぐらいであれば、ふつうに英単語帳で勉強したほうがよさそうです。

本当はREADME固有の英単語出現傾向みたいなものが分かるかと期待していたんですが、雑な集計方法ではそれもうまく読み取れませんでした。

ただ、gulpよりwebpackのほうが出現回数が多いことや、オープンソースプロダクトとして出現する回数が最も多いのはReact（プロダクトを指して使われていない場合もありそうなので確かではないけど）だということが分かったのは「へぇー」といった感じでした。
英単語というよりもトレンドを把握するツールとして使ったほうが有用かもしれません。

おわりに

ふつうに市販の単語帳で勉強します 😭

Chrome拡張のcssで画像のパスを指定するときの注意点

Chrome拡張のcssで背景画像を指定するような場合に、普通の書き方だと画像を読み込むことができません。

NG

#hoge {
  background: url(img/hoge.png);
}

OK

以下のように chrome-extension://__MSG_@@extension_id__/ を先頭に付与します。

#hoge {
  background: url(chrome-extension://__MSG_@@extension_id__/img/hoge.png);
}

また、 manifest.json に以下のような記述も加えて画像の読み込みを許可してください。

"web_accessible_resources": [
  "img/hoge.png"
]

GitHubのヘッダーを好きな色に変更できるChrome拡張つくった

f:id:hogesuke_1:20170218173020p:plain

動機

一週間ぐらい前にGitHubのヘッダーの色が黒くなりましたね。

見た目はキリッとして好きなんですが、もともとヘッダが黒かったGitHubEnterprise(GHE)と見分けづらくなりました。

職場ではGitHubとGHEを併用しており、一瞬で見分けることができないのが少々ストレスであったため、自由にヘッダの色を変更できるChrome拡張を作成しました。

導入

こちらより追加してください。

chrome.google.com

使い方

  • ヘッダー右端のアバターをクリック
  • リスト一番下の Header color をクリック

f:id:hogesuke_1:20170218180202p:plain

  • 好きな色を選択
  • 選択後、右上の X で閉じる

f:id:hogesuke_1:20170218180835p:plain

おわり

アイコンのoctocatちゃん、タコウインナーみたいになってしまいました。
よかったらご利用ください。

chrome.google.com

github.com

f:id:hogesuke_1:20170218180504p:plain < バイバイ!

Amazonの包装を本のカバーに使うといい感じだった

f:id:hogesuke_1:20170121024610j:plain

本をカバンに入れて持ち運んでいると、フチがつぶれたりページが折り曲がったりと悲惨な状態になるのが悩みでしたが、試しにAmazonの包装をカバーにしてみたところすこぶる調子が良くなりました。

包装の中のプチプチが本を守ってくれて、かなり長期間ハードに持ち運んでも痛まずいい感じです。