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

2018-12-10T01:25:01+09:00

この記事は、「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でパスワード認証を作ってフロントエンドと連携してダウンロードリンクを表示するようにしました。
ダウンロードカードや本とデザインを揃えたのがこだわりポイントです。

pixela-node

「PixelaのNode.jsクライアントライブラリをつくった」で取り上げたPixelaのNodeクライアントです。
TypeScriptで型を出しているのがポイントです。esa-nodeで学んだことが生きたライブラリです。

自分も習慣化アプリケーションを作ろうと考えていたところ、習慣化がうまくなってしまって作るモチベーションが落ちてしまうという学びを得ました。

pixeland (deprecated)

上記のPixelaのGUI（予定）。途中で習慣化がうまくなってきてモチベーションが消失しました。

2018/11

next-cms

リポジトリだけ作った。日本でHeadless CMSを流行らせたいという気持ちだけある。手段は未定。

shotoku

carloで立ち上げるChrome中にReactアプリケーションを載せたやつ。
Reactのコンポーネント内からcarloにシェルコマンドを送信して、実行結果をReactに表示してなにかをやろうとしていた形跡がある。
アドベントカレンダーネタにしようとしたけど諦めた気がする。

2018/12

SSRecord

GAS中でSpreadSheetを便利にするORMなライブラリです。開発中です。
GASで一番しんどいのがSpreadSheetをデータソースとして扱う部分だと思っていて、ORMがあったらいいなと思ってので作り始めました。
自分はGASをTypeScriptで書いているので、型にも対応しています。
一応findAll, findなどのデータ取得系はざっくり書いてあって、追加系や更新系をどうしようか迷っている段階です。

仕事で書いているGASアプリケーションには既に導入されており、コードが40%減、保守性も高くなるという結果が出ています。

実用に堪えるようになったらブログで紹介したいと思っています。

まとめ

全体的に技術主導型で「途中で飽きる」ことを繰り返しているので2019年はちゃんと作りきりたいです。

GUIは長丁場になるのでつらそう。ライブラリは飽きる前に形になるという特徴もありそうですね。

少なくとも技術力やアウトプットの向上にはつながっているので、趣味プロジェクトはいいと思います。

「Deploy to Netlify」ボタンの設置方法

2018-08-01T03:55:32+09:00

自分のブログから転載です。

「Deploy to Netlify」ボタンを設置するためにDeploy to Netlify Buttonを読んでざっくりまとめつつ補足を加えました。

「Deploy to Netlify」ボタンはNetlifyに簡単にリポジトリの内容をデプロイできるボタンのこと
挙動としては指定されたGitHubリポジトリと同じものが自分のリポジトリとして作成されて、そのリポジトリがNetlify連携された状態になる。（ForkではなくCopy）

ステップ	スクショ
GitHubと連携する画面。
GitHubのRepository nameを決める
連携が完了。すぐデプロイされます。

ボタンの設置

```html:ボタン設置のHTML例

- `https://www.netlify.com/img/deploy/button.svg`がボタンの見た目のSVG
- `https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-statuskit`のようにGitHubのURLをrepositoryパラメータに乗せたリンクを踏むことでデプロイ設定ページに遷移する

## テンプレートの設定
- Netlifyはリポジトリごとに`netlify.toml`という設定ファイルを持っていて挙動をコントロールすることができる。[参考: netlify.toml Reference](https://www.netlify.com/docs/netlify-toml-reference/)

```netlify.toml
[template.environment]
  SECRET_TOKEN = "change me for your secret token"
  CUSTOM_LOGO = "set the url to your custom logo here"

[template.environment]セクションに項目を追加するとデプロイ時に、環境変数のテキストフィールドが現れる。
Repository nameを入力するステップにフィールドが追加される

WordPressのREST APIで記事を取得する(WordPress4.7以降)

2018-05-31T23:09:12+09:00

薄めの記事だけど初投稿。

Crieitの今後の展望 - Crieitより

Wordpressからの自動インポート

WordPress4.7以降ならREST APIがあるので記事をインポートできる

Docs

https://yourdomain.com/wp-json/wp/v2/posts?_embed のエンドポイントが一番叩くのが楽で、_embedパラメータをつけるとcategoryやtag, authorの情報も一緒に取得することができる。

ドキュメントを見るのが一番早い。

もし自分のサービスから叩くとしたら、Pluginを作るよりWordPressを4.7以降にしてもらってURLを入力してもらうのが一番早そう

mottox2の投稿 - Crieit