mottox2

2019-03-05に更新

自分のGitHubから読み取る挫折の歴史 in 2018

この記事は、「Crieitアドベントカレンダー」9日目の記事です。遅刻ごめんなさい。

Crieitはプログラマー・クリエイターのためのサイトなので、自分のクリエイターになろうとして失敗した記録をGitHubから引っ張り上げました。

2018/1

sketch-naming-lint (deprecated)

Sketchの命名ルールなどをまとめたGuidelineをつくりましたという記事を見て作ろうとしたもの。
sketchは内部でJSON形式でデータを保持しています。npmで配布されているsketch2jsonを使うことで簡単にJSONデータを取り出せます。
おそらく命名ルールのLinterを作ろうとしたのでしょう。

Sketchをチームで使うことがほとんどなかったのでモチベーションが足りず開発が停滞しました。
kvendrik/sketchlintという上位互換なリポジトリを発見してアーカイブしました。

ghsay

Google Homeに喋らせるためのCLIです。

npx ghsay 喋らせたいこと

を実行するとGoogle Homeに喋らせることができます。ただ使い所がデプロイ完了タイミングぐらいしか見つけられずモチベーションが落ちていきました。
あとはGoogle Homeの検知周りを他ライブラリに頼りすぎていてデバッグが面倒になったんだと思います。

2018/3

ease

/で区切ると自動でカテゴリを振り分けてくれるesa.ioライクなTODOアプリです。
一番ちゃんと作ったやつだと思います。

https://ease.netlify.com

ショートカットキー周りの実装したhttps://t.co/g6Oqqldy6e pic.twitter.com/Coix88mvVh
— もっと@九州初上陸 (@mottox2) April 3, 2018

TypeScript + ReactなTODOアプリです。当時PWA Desktopの話が飛び出していてなにか作りたいと思い、TypeScriptの練習がてら作りました。
データはIndexedDB、Desktopに特化するためのキーボードショートカットなどにも対応した本格的なアプリです。
しばらくは使っていたのですが、データ同期機能がないと本格的な使用には絶えず開発が停止されました。
FirebaseをDBにして作り直してもいい気がします。

Netlifyと出会ったのもこのアプリケーション開発がきっかけです。 これがなかったらNetlify芸人になってなかったと思うとやってよかったという気持ちになれます。

2018/4

mini-scrape

JSでスクレイピングするときにいい感じのインターフェースでスクレイピングのコードを書きたいと思って作りました。
メンテはあまりしてないけど、たまに使ってます。 結構便利です。

使用例はこちら。

import scrape from 'mini-scrape'
const url = 'https://github.com/mottox2/mini-scrape'

scrape(url).then(window => {
  console.log('title: ', window.document.title)
  console.log('h1: ', window.document.querySelector('h1').textContent.replace(/\n/g, ''))
})

gatsby-source-esa

Roppongijs #2用に作ったGatsbyプラグインです。確かイベント前日にLT枠が繰り上がってきたのでネタづくりのために作られたライブラリです。
確かGatsby触って2日目の出来事だったと思います。Gatsbyの良さに感動したんだと思います。
今もこのブログのためにメンテし続けています。

2018/5

website

カックさんのブログメンティーに申し込んで、翌日の午前に立ち上げた当サイトのリポジトリです。前述のgatsby-source-esaがあったからこそ立ち上がったものです。
まだちゃんとメンテし続けています。日本で生きているGatsbyのコード例としてPublicにしています。

これが今のアウトプットの源になっているので、一番自分に影響を与えたリポジトリな気がします。

2018/6

shinka (deprecated)

フレームレスで便利なYouTubeクライアント（予定）でした。
この頃からYouTubeのゲーム実況にハマっていた記憶があります。
Electron+Reactで作ってたのですが、ビルドプロセスとかに納得感がなくモチベーションが落ちていったパターンだったと記憶しています。
ボイラープレートで使えそうなのがelectron-react-boilerplate/electron-react-boilerplateぐらいしかないのですが、FlowとReduxがデフォルトで入っていてだいぶやる気を削がれました。
DXの重要性がはっきりとわかりますね。

json-sketchapp (deprecated)

Roppongijs #4ように作ったJSONのDSL的なものをSketchファイルに変換するネタライブラリです。
JSONでDSLを書く意味が（自分ですら）わからないので一発芸で終わりました。
「yoga（ReactNative）のレイアウトエンジンを使うと簡単にレイアウトを表現できますよ」という教訓が残りました。
仕事でPowerPointを出力するアプリケーションの面倒を見ているので、いつかyogaベースに変更できたらいいなと思っています。

2018/7

gas-kintai

Slackで「kintai start」「kintai end」を入力すると自動でスプレッドシードに記入されるSlackアプリケーションをGASで作りました。
お手伝いしている会社の勤怠管理がスプレッドシードに記入する形で面倒だったので作りました。（月末にSlackから頑張って転機する作業で消耗していました）

このブログでも紹介しているGoogle Apps ScriptのCLIであるclaspで作っています。Reduxを参考にactionsを実行するような設計を取り入れようとして失敗しています。

これを作って以来コミット時間が増えました。まだ使っています。 そこそこ便利です。

slack-esa-preview

Slackにはられたesa.ioのリンクを展開してくれるSlack Appです。
esa.ioはプライベートで使っていると、URLのみでリンクを踏まないと内容がわからないのでSlack Appの練習がてら作りました。
Netlify FunctionsでSlackのEventを受けて、関数内でesa.ioのAPIを叩きデータを取得、Slackに内容を返す処理を書きました。まだ使ってます。
Netlify Functions処女作らしいです。ソースはTwitter。

投稿されたesaのタイトルを取得してSlackに投稿する処理も出来た。Netlify Functions入門から3時間でこれが出来たのは奇跡。 pic.twitter.com/VitDJVNqea
— もっと@九州初上陸 (@mottox2) July 22, 2018

esa-node

esa.ioのNodeクライアントです。
上記のslack-esa-previewを作っている過程でいい感じのesaクライアントが欲しくて作りました。既出のクライアントはあったのですが最終更新が数年前で、TypeScriptの型を提供していいものを作ってやろうという気持ちで作りました。

TypeScriptでhttps://t.co/TXTmXrRsCgのnodeクライアント書いた。便利。 pic.twitter.com/0EW6dLkdc7
— もっと@九州初上陸 (@mottox2) July 26, 2018

この開発で、型を提供するパッケージの作り方を学びました。
slack-esa-previewの中で生き続けています。

2018/8

webgrapher (deprecated)

Webサイトのスクリーンショットをいい感じにとって管理するアプリケーション（予定）でした。
技術書典でスクリーンショットをいっぱい取るから、いい感じに管理できたらいいなという気持ちで作りました。

ghqui (deprecated)

ローカルのGitリポジトリを効率よく管理できるghqというツールのGUI（予定）でした。
開発を長く続けているとローカルで管理しているリポジトリが増えてどんどん重くなるので、GUIを作ってキャッシュやインクリメンタルサーチを実装したら楽になりそうというモチベーションではじめました。
インクリメンタルサーチはWebWorkerとか使うと面白そうだなとか思っていましたが、そこに行き着く前にやめました。確かElectron周りでだるくなってやめた気がします。

miyaokaさんがQiitaに投稿した「ghq + pecoが重くなったら」内で触れられている手法を使えばghqの重さは回避できることがわかったので、作る理由は消え去りました。

2018/10

b.mottox2.com (private)

技術書典で配布した本のダウンロードサイトです。Gatsby on Netlifyで動いています。
Netlifyは有料プランを使うとBasic認証がかけられます。本サイトはNetlify Functionsでパスワード認証を作ってフロントエンドと連携してダウンロードリンクを表示するようにしました。
ダウンロードカードや本とデザインを揃えたのがこだわりポイントです。

スクリーンショット 2018-12-10 1.20.49.png (280.3 kB)