なかなか覚えられない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の包装をカバーにしてみたところすこぶる調子が良くなりました。

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

電子工作は案外お金がかかる。何にどれぐらい費用がかかったか計算してみました。

下の記事にてRaspberry Pi Zero の2台構成で目覚まし時計を作成したことを書きました。

hogesuke.hateblo.jp

この記事のなかで「電子工作はお金がかかる」ということを感想として挙げています。

今回は、実際に何にどれぐらいのお金がかかったのかまとめてみました。
これから電子工作を始めてみようという方の参考になれば幸いです。

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 CAPTCHA

プライムに入っている方であれば送料が無料であるのが魅力。

ただ、品揃えは上記サイトに比べると圧倒的に少ないです。Amazonにあったらラッキーぐらいの感じでとりあえず検索してみていました。

おわりに

まさかこんなにお金がかかったとは思いませんでした。
しかも今回は送料を含めていないので、実際の所もっとかかっていることになります。おそろしい。
次はもうちょっとお金のかからないように意識して工作したいと思います。

5時起きを支える技術 - Raspberry Piで作る二度寝を防止する目覚まし時計

この記事は「さくらインターネット（その２） Advent Calendar 2016」の19日目の記事です。

f:id:hogesuke_1:20161218210010j:plain

7時始業

さくらインターネットでは今年の10月より新たに「さぶりこ」という勤怠に関する制度が始まりました。
さぶりこについては横田さんのAdvent Calendarの記事で詳しく紹介されています。

自分の会社が「勝手に定時の30分早く帰って良い」となったら、どうなったか？ - P2P today ダブルスラッシュ

自分はこの制度の中の「さぶりこフレックス」を使用し、ここ3ヶ月ほど就業時間を7時〜16時にしています。
7時始業とすることで満員電車を避けることができ、非常に快適な生活を送れています。

問題

しかし、ひとつ問題を挙げるとすれば、起きる時間も早くする必要があるということです。布団が恋しいこの季節に5時に起きるのは少々つらいときもあります。

この問題をどうにかできないかと考え、Raspberry Piを使って解決を試みることにしました。

作ったもの

今回「二度寝を防止する目覚まし時計」を作成しました。

普通の目覚まし時計では、アラームを止めて即刻布団に引き返せてしまいます。 これでは、二度寝も避けられません。なんとかして布団に戻れない状況を作る必要があります。

そこで、アラームを止めるために計算問題を解く必要のある目覚まし時計としました。 計算問題を解くうちに目が覚め、二度寝したい欲も和らぐだろうという狙いです。

また、さらに目を覚ましやすい環境を作るため、起床時に照明が自動的にオンとなるように照明コントローラーも作成し、目覚まし時計と協調動作するようにしています。

概要

f:id:hogesuke_1:20161219010251p:plain

Raspberry Pi Zeroを2台用いて実装しています。
1台は目覚まし時計、もう1台は照明をオン/オフするコントローラーです。

セットした時間の5分前にWebsocketを通じて照明がオンにされます。
そして時間がくるとアラームが鳴り、計算問題を解くことを要求します。

かといって、ずっとアラームが鳴りっぱなしというのも近所迷惑ですので、タッチセンサに触れている間はアラームを停止する仕組みとなっています。

また、起床時以外にはDash Buttonで照明を操作できるようにしています。 これは、今回作った照明コントローラーを取り付けたところ、手動でのスイッチ操作が困難になってしまったためです。完全に設計ミス。

実物

f:id:hogesuke_1:20161218210010j:plain f:id:hogesuke_1:20161218234317j:plain

実際に動かした様子

www.youtube.com 目覚まし時計を実際に動かした様子です。実際に運用する際には3桁の計算ぐらいが解く時間的に良いかもしれません。

www.youtube.com Dash Buttonを使って照明をオン/オフした様子です。サーボモーターでスイッチのオン/オフを切り替えています。
Dash Buttonの仕様で1回pushした後、しばらく次のpushを受け付けなくなる(10秒ほど)ようでちょっと困る場合もありそうです。

配線

hiramine.comさんの情報を参考にユニバーサル基板にハンダ付けしています。

LCD (Liquid Crystal Display) に文字列を表示する（WebIOPi 利用）

f:id:hogesuke_1:20161218210308j:plain

最初、メッキ線で全部配線しようと始めたものの、クロスできないことに気付いて途中からビニール線に切り替えました。完全に行き当たりばったりといった感じ。

電子工作の感想

今回初めて電子工作で機能を持ったものを作成しました。
そのなかで感じたことを簡単に挙げてみます。

お金がかかる

めっちゃお金がかかります。Piから始り、wifiドングル、ACアダプタ、センサ、LCD、その他各種パーツ、道具、あらゆるものにお金がかかります。
パーツ1個だけ見ると安く見えますが、それらを組み合わせひとつの機能するものを作ろうとすると結構な金額になります。
今回作ったものもすべて合計すると諭吉さんが2枚ほど飛んでいるような気がします…。

■追記

何にどれくらいのお金がかかったか下の記事にまとめました。

電子工作は案外お金がかかる。何にどれぐらい費用がかかったか計算してみました。 - 無理しない感じ

時間がかかる

ソフトウェアの世界とは異なり、パーツや道具を手に入れるのに時間がかかります。npm install で欲しいものをすぐに取得できる世界観ではありません。
これは結構じれったくて、作りたい熱があるときに「あっ、あれ足りないじゃん！」みたいなことになると萎えます。
なので、パーツを買うときには入念に足りないものがないか確認した方がいいです。送料もかかるしね。

学ぶのが大変

知識があまりにも乏しいのに加え、どこから学べばいいかの道筋を示す情報も少ないように感じました。
「センサをつなげて動かしてみた」というところから次へ進むステップが見出しづらく、やりたいことを実現するために何をどうやって学べばいいのかなーと今も手探り状態です。

終わりに

今回はローカルネットワークにしか繋がっていないのでIoTって呼ぶことができないのですが、次はインターネットに繋いでIoTと呼べるものを作ってみたいです。

ソースコード

GitHub - hogesuke/alarm-clock: 電子工作でつくる目覚まし時計
GitHub - hogesuke/light-controller: サーボモーターで照明をオンオフするコントローラー
GitHub - hogesuke/light-dash-button: 照明をdash-buttonで制御

クレジット

アラーム音には Music is VFR さんのものを利用させて頂きました。

参考

LCD (Liquid Crystal Display) に文字列を表示する（WebIOPi 利用）
Raspberry Pi でUSBスピーカーを動かす - それマグで！
サーボモーター（SG-90）を試す - Raspberry Pi 備忘録 / Mbedもあるよ！
GitHub - hortinstein/node-dash-button: A small module to emit events when an Amazon Dash Button is pressed