GitHubでコードリーディングを快適にするChrome拡張を作った
作ったもの
GitHubでのコードリーディングを快適にするChrome拡張です。
以下の機能があります。
作った動機
ネストが深くなっているようなコードでは1行が長くなりすぎて、表示領域に収まらない場合があります。
そのようなコードをレビューする際に、スクロールで右に左に行ったり来たりするのが非常にストレスでした。
また、ファイルのインデントを修正された場合に大量のdiffの中から本質的なコードの変更を探すのが困難であることも悩みのたねでした。
w=1 のクエリを付与することでスペースのみの変更行を無視してくれる機能が提供されているのですが、あのオプションなんだっけ？と忘れてしまうことが度々あります。
（ w=1 のオプションは公式のUIにて切り替え可能として欲しいところ）
導入
こちらより追加してください。
github-adjuster - Chrome ウェブストア
使い方
< >をクリックすると100px広がります><をクリックすると100px狭まりますw=1をクリックするとスペースのみの変更行のdiffが無視されます
リンク
問題がありましたらIssue, PullRequestを頂けると嬉しいです。 github.com
< 意味はないけどゴールデン
なかなか覚えられないUnixコマンドの入力を補助してくれるwebアプリケーションを作った
成果物
Unix Command Generator
http://command.hogesuke.net/
Unixコマンドの引数やオプションの入力を補助するWebアプリケーションです。
説明を読みながらコマンドの組み立てが可能な動的なリファレンスを目指して作っています。
まだ少量しかコマンドを用意できておらず実用的でないですが、これから少しずつ充実させていく予定です。
機能
- 引数/オプションの入力
- 入力内容のコピー
- コピー履歴の参照
基本、マウスでポチポチとオプションを選び、引数を入力し、それをコピーする、というだけのアプリです。
コピーの履歴をLocalStorageに保存しているので、過去に入力したものを使いまわせるという点で便利かもしれない。
※ ここで入力した内容はどこにも送信されません
作った動機
コマンドの引数、オプションを覚えられず、いつもリファレンスを見ながらフムフムといった感じで入力しているのですが、リファレンスとコンソールを行ったり来たりするのが煩わしく面倒であるため、リファレンス読みながら入力できるものがあったらいいのではという気持ちで作りました。
技術スタック
- Angular2
- TypeScript
そろそろAngular2を触っておこうと思い試してみました。
Angular1とは似ても似つかず多少うろたえましたが、Controllerが廃止されコンポーネント指向となったことにより現代的な実装が可能になったように思います。 ただ相変わらず覚えることは多く、公式の日本語ドキュメントもないので英語が苦手な自分には少々敷居の高さを感じました。
TypeScriptについてはいままでちゃんと取り組んでいなかったこともあり、型のありがたさをちゃんと認識していませんでしたが「あ、型ええやん」という具合で一気に虜になりました。 安心安全で心に負荷をかけずにクリーンな心持ちでコーディングに向き合えるのは、とても気持ちが良かったです。
VueとTypeScriptを組み合わせるとVueの手触りがかなり変わってしまう（自分調べ）ので、TypeScriptを使うためにAngular2という選択もありかなという気持ちです。
リポジトリ
PullRequest歓迎しています。
GitHubのREADMEによく使われる英単語を集計して効率的にドキュメントを読むのに必要な英語力をつける
はずだったんですが、失敗しました。
はじまり
READMEを読みながらライブラリの使い方を探っていたりすると、意味を知らない英単語に出くわすことがある。
プログラミングに集中するためにも英語はスラスラ読みたい。とくにREADMEぐらいは。
それには英語の学習が必要なんだけど、READMEでよく使われている英単語を調べてそれを上から順に覚えると効率が良いのではと考えました。
作ったもの
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拡張つくった
動機
一週間ぐらい前にGitHubのヘッダーの色が黒くなりましたね。
見た目はキリッとして好きなんですが、もともとヘッダが黒かったGitHubEnterprise(GHE)と見分けづらくなりました。
職場ではGitHubとGHEを併用しており、一瞬で見分けることができないのが少々ストレスであったため、自由にヘッダの色を変更できるChrome拡張を作成しました。
導入
こちらより追加してください。
使い方
- ヘッダー右端のアバターをクリック
- リスト一番下の
Header colorをクリック
- 好きな色を選択
- 選択後、右上の
Xで閉じる
おわり
アイコンのoctocatちゃん、タコウインナーみたいになってしまいました。
よかったらご利用ください。
< バイバイ!
Amazonの包装を本のカバーに使うといい感じだった
本をカバンに入れて持ち運んでいると、フチがつぶれたりページが折り曲がったりと悲惨な状態になるのが悩みでしたが、試しにAmazonの包装をカバーにしてみたところすこぶる調子が良くなりました。
包装の中のプチプチが本を守ってくれて、かなり長期間ハードに持ち運んでも痛まずいい感じです。
電子工作は案外お金がかかる。何にどれぐらい費用がかかったか計算してみました。
下の記事にてRaspberry Pi Zero の2台構成で目覚まし時計を作成したことを書きました。
この記事のなかで「電子工作はお金がかかる」ということを感想として挙げています。
今回は、実際に何にどれぐらいのお金がかかったのかまとめてみました。
これから電子工作を始めてみようという方の参考になれば幸いです。
Raspberry Pi本体 + 周辺機器
Raspberry Pi Zeroは500円と破格の安さではあるのですが、動作に必要なものを買い揃えると結構なお値段となります。
また、まだ日本での入手は困難であるため、イギリスからの配送となり送料もかさむのが痛いところです。
| 部品 | 商品リンク | 金額 | 数量 |
|---|---|---|---|
| Raspberry Pi Zero + Adaptors | Raspberry Pi Zero - Max 1 Pi Zero Per Customer! - Pimoroni | ¥1,500（送料込み） | 1 |
| Raspberry Pi Zero + Complete Starter Kit | Raspberry Pi Zero - Max 1 Pi Zero Per Customer! - Pimoroni | ¥3,600（送料込み） | 1 |
| Pi ケース | Raspberry Pi Zero用アクリルプロテクトケース透明・ブラック・青（ケースのみ） (クリア・透明) | ¥599 | 1 |
| 電源アダプター | Raspberry Pi2（ラズベリーパイ2）用 1ポート USB 電源アダプター 5V/2A | ¥1,460 | 1 |
| USBケーブル | Amazonベーシック USB2.0ケーブル 3.0m Aオス-マイクロBオス L3UGV3 | ¥571 | 1 |
| USBハブ | iBUFFALO USB2.0ハブ 5ポートタイプ バスパワー電源 ブラック 【PlayStation4,PS4 動作確認済】BSH5U03BK | ¥1,500 | 2 |
| wifiドングル | BUFFALO 11n対応 11g/b 無線LAN子機 親機-子機デュアルモード対応モデル WLI-UC-GNM2 | ¥819 | 2 |
| SDカード | microSDHC 32GB Toshiba 東芝 UHS-I 超高速48MB/s エコパッケージ [並行輸入品] | ¥1,380 | 2 |
| カードリーダライタ | Transcend USB 3.0 Super Speed カードリーダー (SD/SDHC UHS-I/SDXC UHS-I/microSDXC UHS-I 対応) ブラック 2年保証 TS-RDF5K | ¥1,199 | 1 |
合計 ¥16,327
道具
どれも安めの道具を選んで購入しましたが、ひととおり揃えるとけっこうな金額になってしまいました。
しかし、道具は今後も使っていけることを考えれば、初期費用としてある程度かかってしまうのは仕方がないとは思います。
| 道具 | 商品リンク | 金額 | 数量 |
|---|---|---|---|
| はんだこて | 白光(HAKKO) はんだごて ハッコーDASH B型こて先付セット FX650-84 | ¥1,454 | 1 |
| はんだこて台 | goot はんだこて台 ST-11 | ¥656 | 1 |
| アナログテスタ | 三和電気計器 アナログマルチテスタ 多機能型 SH-88TR SH-88TR | ¥5,181 | 1 |
| ワイヤストリッパー | goot ワイヤーストリッパー YS-3 | ¥1,658 | 1 |
| ニッパー | 高儀 GISUKE ホビーニッパー 125mm GHN-125 | ¥440 | 1 |
| Pカッター | オルファ(OLFA) PカッターL型 205B | ¥517 | 1 |
| カッターマット | プラス カッティングマット 両面 A4 230×320mm 48-573 グリーン | ¥573 | 1 |
合計 ¥10,476
電子工作部品
部品ひとつひとつを見るとどれも安いのですが、やはりこれも案外かさみます。
| 部品 | 商品リンク | 金額 | 数量 |
|---|---|---|---|
| はんだ | ハッコーヘクスゾール SN60 0.8mm 20g | ¥390 | 1 |
| はんだ吸取線 | goot はんだ吸取り線 CP-3015 | ¥173 | 1 |
| スズメッキ線 | スズメッキ線（０．６ｍｍ １０ｍ）: パーツ一般 秋月電子通商 電子部品 ネット通販 | ¥210 | 1 |
| 耐熱電子ワイヤー | 耐熱電子ワイヤー ２ｍ×７色 外径１．２２ｍｍ（ＵＬ３２６５ ＡＷＧ２４）: パーツ一般 秋月電子通商 電子部品 ネット通販 | ¥480 | 1 |
| ジャンパーワイヤー | Aukru 3本セット ブレッドボード・ジャンパーワイヤー ジャンパー線 / ケーブル オス-オス/ オス-メス/ メス-メス Arduino Raspberry pi 用 | ¥999 | 1 |
| ブレッドボード | SODIAL(R) はんだブレッドボード 400ネクタイ | ¥178 | 2 |
| ユニバーサル基板 | 両面スルーホールガラスコンポジット・ユニバーサル基板 Ｂタイプ めっき仕上げ ９５ｘ７２ｍｍ 日本製: パーツ一般 秋月電子通商 電子部品 ネット通販 | ¥200 | 1 |
| 半固定ボリューム | 半固定ボリューム １０ＫΩ ［１０３］ （１０個入）: パーツ一般 秋月電子通商 電子部品 ネット通販 | ¥200 | 1 |
| LCDディスプレイ | ３．３Ｖ動作ＬＣＤキャラクタディスプレイモジュール １６×２行 バックライト付白抜き: ディスプレイ関連 秋月電子通商 電子部品 ネット通販 | ¥800 | 1 |
| タッチセンサ | AT42QT1010 静電容量式タッチセンサ | ¥992 | 1 |
| サーボモーター | デジタル・マイクロサーボ SG90 (1個) | ¥432 | 1 |
| L字ピンソケット | Raspberry Pi用 L字ピンソケット2×13（26P） - スイッチサイエンス | ¥97 | 1 |
| Dash Button | アリエール Dash Button | ¥500 | 1 |
合計 ¥5,829
その他工作材料
こちらは電子工作とは直接関係ありませんが、サーボモーターを照明スイッチ部に固定するために必要となった材料です。
| 材料 | 商品リンク | 金額 | 数量 |
|---|---|---|---|
| プラスチック板 | サンデーPET 300mm x 400mm x 2mm | ¥680 | 1 |
| プラスチック板 | サンデーPET 300mm x 400mm x 1mm | ¥442 | 1 |
| カット | カット、穴あけ加工費 | ¥1,890 | 1 |
| 接着剤 | アクリサンデー アクリル樹脂用接着剤 30ml 13100 | ¥650 | 1 |
| 接着剤 | セメダイン 超多用途 接着剤 スーパーX クリア P20ml AX-038 | ¥325 | 1 |
| テープ | スリーエム スコッチ(R)透明梱包用テープ 3131PN /1-2859-01 | ¥186 | 1 |
合計 ¥4,173
総合計 ¥36,805
思っていたよりも浪費していて驚きました…。新型PS4が余裕で買えてしまいますね。
電子工作で使える通販サイト
秋月電子通商
やはり一番お世話になるのは秋月電子通商でしょう。品揃えが群を抜いています。
難点としては送料が500円と少々高いところでしょうか。購入忘れがないかよくチェックすることをおすすめします。
スイッチサイエンス
こちらもお世話になったサイトです。
送料が最小150円と安いのに加え、一定金額を超えると送料無料となります。
包装の箱もかわいらしくて素敵です。
amazon
プライムに入っている方であれば送料が無料であるのが魅力。
ただ、品揃えは上記サイトに比べると圧倒的に少ないです。Amazonにあったらラッキーぐらいの感じでとりあえず検索してみていました。
おわりに
まさかこんなにお金がかかったとは思いませんでした。
しかも今回は送料を含めていないので、実際の所もっとかかっていることになります。おそろしい。
次はもうちょっとお金のかからないように意識して工作したいと思います。
