ほんじゃら堂

めんどくさい仕事をラクにする作業自動化レシピ集

お絵かきおもちゃ「Etch-A-Sketch」があまりにも懐かしかったので操作感を再現するためにWeb版を作った

f:id:piro_suke:20170603233743p:plain

小さい頃に気に入って遊んでたあのお絵かきおもちゃ、

なんだったかな、

と思って検索したら「Etch-A-Sketch」という製品だった。

Ohio Art Classic Etch A Sketch Magic Screen

Ohio Art Classic Etch A Sketch Magic Screen

懐かしい。

左右のダイアルをまわすと、上下左右にポインタが動いて線が描かれる。

くるくるダイアルを回してポインタを一生懸命動かして絵を描いていくわけだ。

両方のダイアルを同時に回すことで斜めの線を描いたりもできるのだけど、

それが結構難しくて、ふにゃふにゃした線になる。

絵を消したい時は、裏向けてシャカシャカ振ると消える。

最終的には直線を組み合わせた角ばった絵になっちゃうのだけど、

それがまた独特で楽しかった。

続きを読む

いちいちExcelを開くのがつらいのでCSVファイルのカラムを揃えて見やすく出力してくれるスクリプトをつくる

f:id:piro_suke:20170531231836j:plain

仕事でCSVファイルのやりとりをすることが多い。

CSVファイルというのは、Excelで開くと見やすいのだけど、

普通にテキストエディタやCUI環境で開くと結構見づらい。

そして、Linuxで作業してる時なんかにいちいちファイルを

ダウンロードしてExcelを開くのはとてもつらい。

そこで、

CUI環境でもExcelで開いた時のように縦の並びが整形された形で

閲覧できるスクリプトを書いてみた。

続きを読む

デザイナーとプログラマのわがままに応えて、テンプレートエンジンから生成されたHTMLファイルを元の部品ファイルに分割するツールを作る

f:id:piro_suke:20170529005556j:plain

Webアプリを開発する際、

最近の多くのテンプレートエンジンはHTMLをレイアウトや部品に分割して作成し、

それをextendしたりincludeしたりして1つのHTMLとして出力できるようになっている。

部品化することで、ヘッダーとかメニューとかフッターとか、

複数のページで共通して表示する要素を変更する際に、

1箇所だけ変更すれば済むようになるわけだ。

しかし部品化することで発生するデメリットもあって、

Webアプリとして実行してみないと完成版のHTMLが確認できない、

外部のデザイナーさんとデザインをやりとりしづらい、

といった問題が発生する。

続きを読む

Web Speech Synthesis APIを使って、正月のかるた読み上げ無間地獄タスクを自動化する

f:id:piro_suke:20170104012805j:plain

正月休み、帰省した実家で娘たちがかるた遊びにハマり、

ほぼ毎日祖母やいとこと遊んでいた。

楽しそうだし、瞬発力やら記憶力やらが鍛えられそうで大変良い。

大変良いのだけど、

かるた遊びの困ったところは、プレイヤー以外に読み手が必要だというところで、

その際はだいたい近くでダラダラしている人間(私)が呼ばれて参加させられる。

最初はこちらも娘達に相手をしてもらえるのが嬉しいので喜んで参加するのだけど、

毎回同じ内容を読み上げるので、何回かやっているとげんなりしてくる。

しかしダラダラしている手前、断るのも難しい。

そこで、「繰り返し作業は自動化や!」と

「テキスト読み上げ」でググったら出てきたWeb Speech Synthesis API を使って、

かるた自動読み上げツールを作ってみた。

続きを読む

Node.jsで非同期処理を不特定回数繰り返す方法をYouTubeのお気に入りタイトル一覧を取得するスクリプトを作りながら考える

f:id:piro_suke:20161212004436j:plain

YouTubeでお気に入りに入れた動画のタイトルを一覧化して見たくなったので、

YouTube Data API経由でデータを取得して表示するNode.jsスクリプトを作ってみた。

APIへのアクセス自体はサクッとできたのだけど、

複数ページデータを非同期で取得するフローのコントロールで苦労した。

Node.jsスクリプトを書く時は毎回このフローコントロールでつまづくのだけど、

慣れの問題なのだろうか。

今回はcaolan/asyncライブラリのおかげで何とか解決できた感じ。

async - Documentation

作成したスクリプトの内容を紹介しつつ、

非同期処理を不特定回数実行する際のパターンについて考えてみよう。

続きを読む

jQueryUIのsortableウィジェットを使ってアイテムの並び順を管理するUIを作成する方法

f:id:piro_suke:20161207003918j:plain

例えば商品のランキングを手動で管理する場合、

商品データに並び順のようなものをつけてその順序で表示すると思うのだけど、

並び順を設定するUIをどのように作るのが良いか。

近いうちに作る機会がありそうなので、考えてみる。

ReactやVue.jsを使う機会はなさそうなので、jQueryベースで。

続きを読む

PostgreSQLのJSONB型カラム内のキーにユニーク制約をつけてUPSERTする方法

f:id:piro_suke:20161204023310j:plain

Node.jsとPostgreSQLを使ってるなら、

もうデータは全部JSON形式で管理した方が楽なんじゃないの、

ということでPostgreSQLのJSON型カラムについて色々調べている。

JSON/JSONB型カラムの基本的な使い方についてはちょっと前に書いた。

blog.honjala.net

今回はJSONB型カラムに一意制約をつけたり、

それを利用してUPSERT処理を行う方法について調べたことを書く。

続きを読む