色を当てる Wordle、Colorfle を作った。

サマリ

wordle派生で、色のカラーコードを当てるゲームをつくった。

mazamachi.github.io Colorfle

↓を見て分かる通り、上に表示される四角のカラーコードを当てるゲームです。

Colorfle プレイ画面

各カラーコードを入力後、自分が入力したカラーコードがどんな色なのか分かるため、色を近づけていけば正解できるはず。なので意外と難易度は低い？

---

以下、実装に至るまでの気持ちの変遷と、実際に作ってからの気持ち。

経緯

Wordle およびその派生ゲームを毎日TLで見るようになって、世界的ブームすげーという気分になっていた。
なんか作りたいなという気分はあるものの、アイディアの壁と実装の壁があるので時間的に何も作れる状況にない、と自分に言い訳していた。

その折、id:motemen さんの漢字ル作成エントリを見て、OSSをforkすればあとはロジックだけ書けば良いのかとなって実装の壁が崩壊してしまった。

さらに、Worldleという、答え（地図）がもう表示されててあとは当てるだけという、元の Wordle とはだいぶ乖離したが面白いゲームを見て、これありなら何でもアリじゃんとなってアイディアの壁もだいぶ低まってしまった。

なので、「なんか見て当てるのが面白そうないろんな種類があるもの」ないかなーと思って当たりを見回してみた。
そこで気付いたんだけど、世界には色があった。
アイディアの壁も崩壊した。

実装パート

最初は単に単語のリストを色のリスト（000000-FFFFFF）にするだけだから、2秒で終わるだろうと思っていた。 が、やってみたところ、HTMLのカラーコードで表現できる色は（透明度除いて）256*256*256=16,121,856 種類もあるんで、単純な配列に持たせるだけだと重すぎて無理じゃんとなった。
世界の彩りの豊さを舐めていた自分に恥いるばかりである*1。
そこで、「入力された文字列がカラーコードとして正しいか判定する関数」と「n番目の色を取得する関数」を実装することとなった。

さらに、元の実装だと日付から取得されるnの幅が小さすぎて全然ランダムにならず、ほぼ毎日緑が続くことになってしまっていた。なので、ある程度均等にばらつかせるためにシード付き乱数を実装することとなった。 まあググってコピペしただけだが、なんか学びになって良かった。

あとはなんか自分がやっててつまんなかったんで、ちょっとでも楽しくなるように色々調整して終わり。

github pages による公開でややハマったけど、公式ドキュメント読んだらどうにかなった*2。

これでもトータル5時間もかからず一通り終わったんで、OSSによる開発の高速道路化はすごい。

余談

実はフォーク元には high contrast mode というものがある。 おそらく色覚多様性をサポートするために入れられたものだろうと思う。 今回のこのゲームでそのモードをオンにしても、本質的にターゲットの色が見やすくなるわけではないので、申し訳ないが誤解を与えないようその機能は消してある。

一方で、色覚多様性を持つ人がこのゲームをやったらどんな感じになるのかもやや気になったので、やってみた*3。 結果がこちら。

Colorfle 色変えプレイ画面

僕の視点では色によるヒントが乏しくて近づいてるのかわからず、ヒット・アンド・ブローやNumerOnのような純粋なパズルゲームとなった感があった。

今回のアイディアの発端は、世界に色があることに気づいたからだったわけだけど、これって自明じゃないんだなあと改めて認識するに至った。

また、こういう非 inclusive なゲームを作ってしまうのが良いのか、みたいな話もありそうで難しい。 とりあえず普段作ってるプロダクトくらいはちゃんと inclusive にしていきたいですな。

総じて

しゅっと実装するだけだろうと思っていたが、実際は実装の過程でもその後遊んでみても、色々学びや気付きがあって良かった。

「最近は実装方法イメージできたら満足しちゃうんよな～」と甘えたことを言っていたら殴ってくれた同僚に感謝。

今後も思いついたものを気ままに実装していきたい。

実装はこちら。 github.com

唐突の we are hiring

アクセシビリティ有識者とお話したい！ github.com herp.careers

*1:しかもこれでもHTMLで表現できる幅にすぎない……世界は豊かだなあ

*2:package.json の homepage が参照されるというの、かなり非直感的でむずい。

*3:Google Chrome にデフォルトでこの機能あるの、大変えらい。What's New In DevTools (Chrome 83) - Chrome Developers

ブラウザ拡張の開発をTypeScriptで爆速で始めるやつ作ったので紹介

先日、動画に突然「熱盛」を表示するとかいうクソChrome拡張を作って公開しました。

動画を再生しているとたまに熱盛と表示されてしまうchrome extension作ったから見てhttps://t.co/KGdPKFvjuP pic.twitter.com/ocyqJWSBBe

— まざっち (@mazamachi) 2017年8月29日

めっちゃバズって結構インストールしていただけました。うれしい。 やっぱりこういうのは鮮度が大事で、思いついてから公開までを数日にとどめたいところですね。

とはいえ、Chrome拡張機能をシュッと作るためには

• Chrome拡張の作法に則った設定ファイルの作成 （manifest.jsonなど）
• ES6/TypeScript や Less/Scss などのトランスパイル自動化
• 開発版とリリース版の分離

などなど、設定事項が多くてかなり面倒です。

この記事は、 Yeoman を使ってコマンド一発でChrome拡張の雛形を作成する方法の紹介と、そのためのツールをTypeScriptに対応したバージョンを作ったよというお話です。 さっさと試したいって人は chrome-extension-kickstart-typescript を見てください。

Yeoman + Chrome extension kickstart

アプリケーションを作成するために設定が色々必要だという問題は、他の多くのフロントエンドアプリでも共通しています。

この問題を解決するために、Yeoman というプロジェクトがあります。 Yeoman が提唱する “Yeoman workflow” では npm + build system (Gulp/Grunt) + Scaffolding Tool (yo) という3つの要素を用いることで、アプリの雛形をコマンド一発で作成することができます。

$ rails new みたいなものですね。

yo では npm 上に公開されている generator を利用でき、その中にはChrome拡張のためのものもいくつかあります。 特にポピュラーなものは、公式の chrome-extension とchrome-extension-kickstartです（名前がまぎらわしい）。 ただし、後者の方が更新も頻繁であり機能も豊富なので、そちらを使うのが良いかと思います。

Chrome extension kickstart + TypeScript

Chrome extension kickstart では、ES2015をJavascriptに変換してくれるのですが、TypeScriptには対応していません。 ただ、chrome extension は結構 TypeScript との相性が良いので、ぜひとも TypeScript を使いたいところです。
（参考: TypeScript での Chrome 拡張機能開発 Tips - Qiita）

今までは、Chrome extension kickstart で雛形を作成し、「generator-chrome-extension-kickstartをtypescriptで使えるようにする - Qiita」を参考にしながらTypeScript用に設定を変更するというステップを踏んでいました。 しかし、そもそもTypeScriptに対応した雛形を作れるべきですよね。

そこで chrome-extension-kickstart をforkして chrome-extension-kickstart-typescriptというものを作成しました。 2017/09/02現在、npmで公開しているのでインストールして使うことができます
（ES2015の雛形との両立ができるようなら本家の方にPRを送るつもりなので、いつか元の方にマージしてもらえてるかもしれません）。

以下で簡単に使い方を紹介するのでぜひ使ってみてください。

使い方

ほぼREADMEに書いてありますが一応書いておきます。

1. $ npm install -g yo generator-chrome-extension-kickstart-typescript
2. mkdir my-new-chrome-extension && cd $_
3. yo chrome-extension-kickstart-typescript (--skip-install)
--skip-install をつけると自動で npm install が走らないので、yarnとか使いたい人は付けると良いかと思います。

3の yo コマンドを実行すると、いくつか質問が出てくるのでそれに答えればChrome拡張の基本設定は完了です。

設定事項は順に以下のとおりです（公式ドキュメントへのリンクを張ってあります）。

1. Chrome拡張の名前
2. Chrome拡張の説明
3. 使う UI Action (Browser Action or Page Action or 特になし)
4. Chromeのデフォルトページを書き換えるか？ Override Pages
5. その他の機能を追加するか？
   1. No
   2. Options Page
   3. Devtools Page
   4. Content Scripts
   5. Omnibox
6. manifest.json に追加する permissions

自分がどのような拡張機能を作りたいのかによって設定も変わってくるので、各設定事項については公式ドキュメントを読むとよいかと思います。 日本語の情報としては、Chrome拡張の開発方法まとめ　その1：概念編 - Qiita がとても分かりやすいです。

以上の設定を追えると、雛形が作成されます。 READMEも作成されているので、あとはREADMEを読めば分かるかと思います。 ES2015版の chrome-extension-kickstart とほとんど同じなので、node.jsのモジュールを使ってChrome拡張機能を作る - Qiita が分かりやすいです。

「たまに熱盛が出てしまうextension」はコードをmazamachi/atsumori_chrome_extension - Github で公開しているので、よろしければ参考にしてください。

所感

• TypeScript 使わないと JS を読み書きできない体になってしまった。
• 初めて npm に公開したけど $ npm publish としたら一瞬で公開されたのでややびびった。
• このあいだ誕生日だったので何か買っていただけるとうれしい → ほしいものリスト

Kindle Unlimitedの技術書一通り見たので良さそうな本をコメント付きでまとめた

TL;DR

Kindle Unlimitedのコンピュータ・ITカテゴリの2826冊を一通り見たので良さそうな本を http://www.amazon.co.jp/registry/wishlist/9K6RC0XIUX58 にまとめた。結局19冊になった。
ちょっと出遅れたので、差別化のために本記事では説明とか個人の感想多めでお送りしてます。

前置き

Kindle Unlimited ついに始まりましたね。
最近Kindle PaperWhiteを買ったばかりなので嬉しいところですが、 院試が終わるまではとりあえず保留です。
漫画がもっと多いと思ってたらそうでもないみたいなので、 そのうち来るであろう「Kindle Unlimitedで読むべき漫画100選」 みたいな記事を待って判断することにします。

漫画まとめについては誰か詳しい人にお任せして、 僕はプログラミングとか関連の良さそうな本を探してみました。
KindleUnlimitedのコンピュータ・ITカテゴリの全部の本（Amazon.co.jp: コンピュータ・IT - Kindle本: Kindleストア ）のタイトルと表紙だけ見てみて、 まあまあ欲しいなと思える本をほしい物リストに突っ込んでいった感じです。
完全に自分のためにメモ取りつつ見ていましたが、 自分と同レベルの人の役には立つかなあと思い、 記事にしておきます。
読んだわけではないので、その点には注意してください。

といっても 読むべき技術書についてはその人の技術レベルに大きく左右されるので、 一応先に僕の技術レベルを自己評価しておくと、

• rubyが好きで、普通の言語で普通の事なら書ける(関数型とかはすごいH本読んだくらいしか経験なし)
• railsとかandroidアプリづくりはまあ普通のことならできる。
• 競プロとかは興味あるけど始める度に挫折してる。
• プログラミングは好きだけどエンジニアとしてやっていけるかは不安

という、まあ初心者〜中級者の中級者寄りって感じでしょうか。
あの有名なグラフで言うと下がり始めって感じですかね。*1

*2

このレベルを念頭にして僕のメモや思いも読んで戴けると、paizaさんの プログラミング初心者向け！Kindle Unlimitedで読み放題な技術系の書籍26冊と4シリーズ - paiza開発日誌とは差別化出来るのではないかという感じです。
もちろん、paizaさんの紹介している冊数のほうが多いですし、言語等の分野も広いので、こちらもご参照ください。

以下のものについてはアフィリンク？とかいうものを貼っていない（貼り方を知らない）ので、お気軽にクリックしてください。
(Kindle Unlimitedの商品クリックが収益になるかは知りませんが)

自分用のメモも兼ねてるのでこっからは丁寧語やめます。恐縮です。

本題

技術全般

全般。

エンジニアのためのGitの教科​書［上級編］ Git内部の仕組みを理解する

エンジニアのためのGitの教科書［上級編］ Git内部の仕組みを理解する

昔授業でgitのソースをいじってプルリク送った時、自分はgitについて何も知らないと思ったため。
また、add commit push merge などの基本操作はできても、ちょっと応用的な操作はあまり知らないものが多いため選出。

Gitの仕組みを理解して使いこなせば、必ず同期と差がつく――新人エンジニアや初級者が学ぶべき点とは？：CodeZine（コードジン） で紹介されていたので知っていた。
本当はこの基礎編である Amazon.co.jp： エンジニアのためのGitの教科書 実践で使える！バージョン管理とチーム開発手法 eBook: 株式会社リクルートテクノロジーズ, 株式会社リクルートマーケティングパートナーズ, 河村聖悟, 太田智彬, 増田佳太, 山田直樹, 葛原佑伍, 大島雅人, 相野谷直樹: Kindleストア が欲しい気もするが、Unlimited入りはしなかった模様。残念。

Webエンジニアが知っておきた​いインフラの基本

Webエンジニアが知っておきたいインフラの基本 ~インフラの設計から構成、監視、チューニングまで~

インフラ知っておきたいため選出。

学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンスで紹介されていたので知っていた。 ななめ読みで良いらしいので、Kindle Unlimited に向いてそう。こういう本が増えてほしい。

SQL ゼロからはじめるデータベース​操作

CD付 SQL ゼロからはじめるデータベース操作 (プログラミング学習シリーズ)

ORマッパに頼りまくってた自分を反省し、SQLの勉強したいので。

DB/SQLに関しては名著がたくさんあるのは知っているので、 実際にはこれを読むことはないかもしれない。
でもレビューが良かったので試し読みはすると思う。
試し読みが出来る本が増えるのは嬉しい。

コンピュータグラフィックス [改訂新版]

コンピュータグラフィックス [改訂新版]

これと同じシリーズの ディジタル画像処理 [改訂新版] が学科の教科書になってたので、これも網羅的で良いのではないかと期待。
このシリーズは他にも入門CGデザイン-CG制作の基礎というものもあるらしい。

……だが、教科書だった『ディジタル画像処理』は正直なところ学部の教科書としては広く浅すぎたので、この本もあまり期待できないかもしれない。評価は高いけど……

（カテゴリが倫理学・道徳とか自己啓発になってるのは何なんだろう……）

実践的な本

超高レイヤなところ。この辺は結構がっしりしているし、実戦で使っていきながら覚える必要があるので、Unlimitedでさくっと読むのには向いてないのかもしれない。

Docker実践ガイド

Docker実践ガイド

Docker使いたいから。
昔無料セールやってた時にプログラマのためのDocker教科書 インフラの基礎知識&コードによる環境構築の自動化 : 阿佐 志保, 山田 祥寛 : 本 : Amazonを買ったので、僕はこっちで良いのだけれど、まあ一応記録しておく。
KubernetesについてはDocker教科書にはなかった気もする。

Game Programming Patterns ソフトウェア開発の問題解決メニュー impress top gear

Game Programming Patterns ソフトウェア開発の問題解決メニュー (impress top gear)

ゲームプログラミングはあまりやったことがないけれど、近々やることになるかもしれないので。何より評価が高い。
内容としてはゲームプログラミングでのデザインパターンの本らしい。

アジャイルな見積りと計画づくり ～価値あるソフトウェアを育てる概念と技法～

アジャイルな見積りと計画づくり ~価値あるソフトウェアを育てる概念と技法~

ぼく「あじゃいるってなんやねん」

アジャイルサムライとかの有名な本に比べてどうかは知らないです。ごめんなさい。何も分かりません。生きててごめんなさい。
書いてから気づいたんですが、 id:hitode909 さんがKindle Unlimitedでよさそうなソフトウェア関係の本 - hitode909の日記で紹介していらっしゃったので多分いい本。ごめんなさい。id:hitode909 さんが紹介していらっしゃる本は多分他のも良い本です。ただ、自分にはまだ難しそうという気持ちで一杯です。

プログラミングコンテスト関連

何故かマイナビのこのシリーズがやたら豊作だった。有名な本だらけ。 多分この辺の本のメインターゲットは学生だろうから、安く読めるのはとても助かる。
ただし、よく指摘されている通り、アルゴリズムの教科書ではないので、きちんと学問的なバックグラウンドのあるアルゴリズム・イントロダクションとかの鈍器をちゃんと読んだほうが良いはず（ぼくはよんだことないです）。証明とかも楽しそうだし。参考まで。

プログラミングコンテストチャレンジブック [第2版]　～問題解決のアルゴリズム活用力とコーディングテクニックを鍛える～

プログラミングコンテストチャレンジブック [第2版]　?問題解決のアルゴリズム活用力とコーディングテクニックを鍛える?

いわゆる蟻本。競プロの入門書としてめっちゃ良いらしい。
ちなみに僕も一応持ってるけど1章で挫折したので、そろそろ再開したい。

プログラミングコンテスト攻略の​ための

プログラミングコンテスト攻略のためのアルゴリズムとデータ構造

アルゴリズムとデータ構造

1/30 発売！「プログラミングコンテスト攻略のためのアルゴリズムとデータ構造」 - iwiwiの日記 によると、蟻本よりも前段階の本らしい。AOJと連携してるってのはとても良さそう。 内容も競プロに限らない、基礎的で網羅的な内容になってるらしくて良さそう。

友人の id:Tak_Yaz と、AOJでアルゴリズムの勉強を一緒にしようという話を前にしたけれど、彼だけが真面目に進めているようなので僕もまじめに始めたいところ。

オンラインジャッジではじめるC​/C++プログラミング入門

オンラインジャッジではじめるC/C++プログラミング入門

先述の id:iwiwi さん曰く、『プログラミングコンテスト攻略の​ためのアルゴリズムとデータ構造』の前著らしい。競プロにはまってC++を勉強したくなったらこれかなあ。

セキュリティコンテストチャレン​ジブック CTFで学ぼう！情報を守るた​めの戦い方

セキュリティコンテストチャレンジブック -CTFで学ぼう! 情報を守るための戦い方-

CTFの有名な入門書。とても良い。僕は友達のを借りてSECCONにお試しで出たくらいだけど、とてもためになったと思う。何よりCTFは楽しい。むずいけど。

世界で闘うプログラミング力を鍛える150問 トップIT企業のプログラマになるための本

世界で闘うプログラミング力を鍛える150問　トップIT企業のプログラマになるための本

wantedlyのインターンしてる時に、突然リードエンジニアの方（特定可能ですね）にgoogleの入社試験（めっちゃ特定可能ですね）風のものをしていただいた際、死ぬほどテンパったという苦い経験があるため、コーディング面接の問題には興味があるので選出。

あと、某企業（これは特定しないでください）のインターンの面接に行ったら英語のコーディング面接で、これもかなりテンパったので。
こっちの面接はよくある競プロの問題とかawakiaさんからの問題よりは簡単だったけど、最初は簡単なコードを提示し、そのあとで面接官と議論しながらコードを改善していくというプロセスはコーディング面接特有な感じもしたし、何より楽しかった。

友人とかと出し合いながらやっとくと就活対策になるのかもしれない。

世界で闘うプロダクトマネジャーになるための本 トップIT企業のPMとして就職する方法

世界で闘うプロダクトマネジャーになるための本 ~トップIT企業のPMとして就職する方法~

競プロではないけど。僕は世界で戦いたいので。

内容はキャリアプランに関する本らしい。院試前の今、人生で一番キャリア選択に悩んでいるので多分これは読むと思う。

もう一度言いますが、僕は世界で戦いたいので外資系のIT企業とかでインターンとかアルバイトとかしたいです！！何かそういったお話あればご連絡お待ちしております！！！
以上宣伝でした。

特定技術

特定の技術関連の本。僕の興味範囲に偏ってます。

改訂3版 基礎 Ruby on Rails 基礎シリーズ

改訂3版基礎 Ruby on Rails (KS IMPRESS KISO SERIES)

たしか前バイト先でオススメされた。RESTとかについての解説が詳しいと伺った気がする。

基礎シリーズは他にも 基礎pythonとかもあるようなので、参考まで。

Android実践プログラミング 現場で生まれた設計パターン

Android実践プログラミング 現場で生まれた設計パターン

android好きなので。 androidのベストプラクティスではfuturice/android-best-practices: Do's and Don'ts for Android development, by Futurice developersが有名だが、TechBoosterなのでこれも信用が置けそう。一通りは読んでおくべき氣がする。

今回はあまり調べていないが、TechBooster以外にも良い同人サークルはたくさんあるはずなので、そういうところの本が読めたら良いなと思う。

UNIXの絵本 UNIXが楽しくわかる9つの扉

UNIXの絵本

「hogeの絵本」シリーズはかなりのものがあるみたい。とても良い。
僕が買うなら多分UNIXの絵本かなあということで登録。

絵本シリーズはアンク社の一覧から探すのが良さそう。
Amazon.co.jp: 株式会社アンク: Kindleストア

その他

読み物とか

ゲーム界のトップに立った天才プログラマー 岩田聡の原点: 高校同期生26人の証言

ゲーム界のトップに立った天才プログラマー　岩田聡の原点: 高校同期生26人の証言

超読みたい。

魔法の世紀

魔法の世紀

落合先生の話題の本。僕も研究分野はHCIなので、読まなきゃいけない感じがする。

こんな最近の本も入ってるんだなあと言った感想。

すべてがＦになる THE PERFECT INSIDER S&M

すべてがFになる (講談社文庫)

コンピュータ・ITじゃないけど、そういう内容らしいし一度読んでみたくて……

感想

出版社によっては結構良い本があるなあと感じた。 19冊もあれば数ヶ月は持ちそうだし、そもそも一冊数千円するものがほとんどなので、読み放題1000円弱/月はかなりお得感ある。

ただ、Kindleで本を探す度に思うが、Amazonは自分が読みたいと思う本がとても見つけづらい。結局いつも全部見てから選ぶ事になっているので、もっと詳細で正確なカテゴリ分けがほしい。
今のところ、おすすめ順もレビュー順も上の方はあまり信頼出来ない（自己評価なんじゃないかと思う）ので、結構したの方まで見ていかないと上に挙げたような有名な本は出てこない。
逆に、下に行き過ぎると個人出版地獄(*3)が待っているので、なかなか難しい。 全部見た感じ、おすすめ順だと概ね20ページ目以降はほぼ地獄と言って良さそうです。
どうにかしてスクリーニングできないものかな……。

Kindle Unlimitedにはさっと読み捨てるのに向いてる本、向いてない本が明らかにあるので、今後どうなるかは見守っていく必要がありそう。
出版者に同利益が入るのか知らないけど、同人サークルとかの良い本がもっと入手しやすくなってサークルの方にも収益が入ると良いなと思った。

最初にも書きましたが、まとめは http://www.amazon.co.jp/registry/wishlist/9K6RC0XIUX58 （ほしい物リスト）にあります。僕はまだUnlimited登録してないので、(書籍版を)買ってくださるととてもありがたいです(^o^)(^o^)
ちなみに本当に欲しいもののリストは http://www.amazon.co.jp/registry/wishlist/2QVK1V1EB7XIN にまとまっているので、買ってくれると死ぬほど嬉しいです。
ちなみにですが、僕の誕生日は8/17です。再来週です。近いですね。8/17。パイナ(817)ップルの日と覚えてください。よろしくお願いいたします。

注

*1 このグラフの中でどこら辺かという自己評価、結構有用な気がするので就活とかで使って欲しい

*2 Figure 1 - The three stages of expertise. より改変

*3 個人出版が悪いというわけではないですが、Numbersの使い方を超細かく分けて300円で売ってる本とか、

タイトルも著者名も表紙も謎すぎて怪しすぎる本とか

を見てしまうとなかなか地獄感ありますね……

東京大学eeic3年後期実験「大規模ソフトウェアを手探る」2015年度まとめ

この記事はeeicアドベントカレンダーの2日目の記事です。
と言っても、eeicアドベントカレンダーは12/2に突発的に始めたので、これが最初の記事になります。

目次