160日以上書き続けられた作業記録を支える技術

2018-12-19T10:10:08+09:00

こちらはCrieitで開催されている「アドベントカレンダー」19日目の記事です。

昨日はnaichiさんの長期化する個人サービス開発でモチベーションを維持する方法〜unityroomができるまで〜でした！

unityroom開発中に触れた未経験な技術多すぎですね。。。妥協せずに完成させたの本当にすごい。。。

はじめに

どうも。ぽりんです。

今年の5月から作業過程のログを記録していく、作業記録を書き続けていて早くも現在160日を突破しようとしています。

Porin Room

今回縁あってCrietのアドベントカレンダーを書こう！となったのですが、せっかくだからこの作業記録のことについて書こうかなと思い、こうして筆を走らせています。

アドベントカレンダーなんて自分みたいなペーには書く機会がないと思っていたのですが、人生何があるかわからないものですねえ🍵

さて、最初は拙かった作業記録も、160日以上書き続けてきたらノウハウが溜まってくるものです。

というわけで160日かけて蓄積していった「作業記録を支える技術」を書いていこうと思いまする🐤

※ 注 Mac使いなのでかなりMacに偏っています。ご注意ください。

作業記録を取り始めたきっかけ

まず、作業記録の紹介として、記録を録り始めたきっかけを書こうと思います。

作業過程がわからないと困ることが多すぎた

「あれ、あのとき参考にした記事ってどれだっけ？」
「数ヶ月前に導入した〇〇（or環境構築した〇〇でも可）、導入手順は記憶のかなたで下手にいじれない...」
「はて、なんでこういう風にやろうと思ったんだっけ？」

こういうことってありませんか？

そして、ググり直すなどして、「なんで前調べたことにまた時間かけてるんだろ」と悲しみに暮れる。はたまた、もういいやなんとかなるやろ！と既存の環境をいじってよくわからないことになる。

はい、数ヶ月前のわたしです。

わたしは変に記録厨なところがあり、「おっ！」となったことや作業メモをツイートすることも多かったのですが、まあ抜け漏れはあるわけで、「ぐぬぬ...！」と歯ぎしりをしていました。

ちょうどそんな頃

ちょうどそんな頃、晴れてニートになったこともあり（？？？）、一念発起して「ぼくがおもうさいきょうの作業記録」を作り出すべく立ち上がりました。

さらに、普段Slackなどで仲良くしていただいているういろうさんがなんと一年以上毎日ブログを書いていたのに刺激され、「わたしも更新を続けてみよう...！」と決意をみなぎらせました。

ういろうさんのブログ

こうして生まれたのが、タイトルに「〇〇日目」と入っている作業記録たちなのです。（ういろうさんの完全なるパクリ）

嗚呼、全ての情報が集約されているというのは、なんと素晴らしいのでしょう（記録厨）

作業記録を支える技術

前置きはこれくらいにして、本題である「作業記録を支える技術」を紹介していきますね。

ちなみに、ニート時代に始めたこともあり全て無料で使用できます。

（「技術」とかカッコいい感じに言ってるけどそんな大したものでもなかったらどうしよ...）

エディタ

Scrapbox

作業記録はScrapboxというWebサービスを使って書いています。

わたしは記録厨な割にはものすごいめんどくさがりで、たいていのブログサービスやメモサービスでは続けられません。

過去Evernoteやnote、Onenoteなどの素晴らしいサービス達がわたしのめんどくさがりの前に砕け散ってゆきました。

そんなめんどくさがりぽりんを拾ってくださったのがこちらのScrapbox。

Scrapboxは人に見せるものとしてはデメリットも色々あるのですが、メモ用としては本当に素晴らしいです。ああ愛おしい。

しかも、なんと個人で使用する分にはどんな使いまくっても無料という優れものです。

この記事でも機能などを説明しますが、一旦使ってみないとわからない気がするのでぜひ触ってみてくださいね！（けっして回し者ではありません。）

以下わたしがScrapboxを愛用している理由上位3位を書いていきます。

1. 書きやすさがぱない

もうこれ。本当にこれに尽きます。

これが他のサービスとの一番の違いなので、堂々たる1位にノミネートしました。

自分用のメモなので、見た目は最低限見れるものならいいのです。自分で書いたから見返しやすいし。

noteとか他のマークダウンブログではなぜか書けないのがScrapboxだとスイスイ書けるので本当に不思議。
実はこの記事も、Scrapboxでささっと書いてから清書しています。

独自記法なので慣れるまでがちょっと大変ですが、スニペットなど用意すれば関係ないですし、慣れたらやみつきになります。

具体的に書きやすくて好きな機能は以下
* 編集画面という概念がなく、書いたら即反映される
* 箇条書きが鬼書きやすい。Tabキー押せばどんどん箇条書きできる
* 箇条書きというのは徒然なるままに文章を書くときにもっとも書きやすいと思っている
* 独自記法ではあるが、見出しからテーブル、引用文、コードがささっと書ける
* コピペやドラッグ&ドロップで画像や動画を貼り付けられ、Gyazoのリンクが発行されるので使いまわせる
* Scrapbox内の他のページを参照するのが「ページ内リンク」という機能でものすごく簡単。やりようによって同じページの該当部分に飛ぶこともできる

書いたら即反映の様子

2. 全文検索できる

これも本当に本当に大事。
作業記録の目的に一番貢献するものです。

「あれってなんだっけ？」とか検索したら、参照した記事やらそのときのメモやらがすぐ見つかります。

検索窓でキーワードを検索すると、そのキーワードを含むページがずらっと並ぶ↓

3. カスタマイズできる

CSSやJavascriptを独自に追加するが可能なので、より自分の好みの見た目にしてある程度読みやすさを上げられます。

Scrapboxのカスタマイズ（＝自分の作業記録をより良いものにしたいという執念）でわたしのCSS知識は育ったと言っても過言ではありません。

吹き出しを作ったり

見出しをいい感じに装飾したり

テキストを強調したり

コードブロックの背景や文字色好みのものに変えるのも思いのまま！

Scrapboxのページ内にカスタマイズ用のCSSを書けば反映されるようになっています（参考までに、わたしが使ってるカスタマイズ用のCSSはこちら：settings - Porin's Room）

わたしの涙ぐましい努力が垣間見られるので、ぜひScrapboxのデフォルトと見比べて欲しいです。

※ 自分用なので自分のPCとスマホで正常に表示されて満足してるくらいしかレスポンシブ対応してない＆JSはかつてのわたしにとって未知の世界すぎていじっていないです

その他

詳しい使い方などはこちらにありますので興味がある方はどうぞ。
Scrapbox ヘルプ

文章編集

Dash

ドキュメント検索ツールなのですが、わたしはスニペット機能のみを愛用しています。

これがないと作業記録は書けないくらいにヘビロテしてます。

作業記録で毎回使うテンプレ部分は全部Dashのスニペットに登録してホットキーで呼び出しています。

登録したホットキーを押すと検索窓にフォーカスされた状態でDashのウィンドウが呼び出されEnterを押すだけで、それまで書いていたエディタ上に貼り付けられます。

ホットキーで呼び出し→スニペットを検索→貼り付けの流れ

※ Dashのスニペットの使い方についてはこの記事をかなり参考にしました
Dashのスニペット機能をちゃんと使う - Qiita

Clipy

クリップボード拡張ツール。

クリップボードの履歴を参照して、何個も前にクリップボードに登録したものを貼り付けられます。

これもDash同様、呼び出し用のキーを登録できるので、PC上のいつでもどこでも呼び出すことができます。

実は作業記録の目次を作るのにわりと非効率なことをしているので、複数の項目を一気にコピーして呼び出すのに重宝してたりします。

LICEcap

Cockos Incorporated | LICEcap

PC画面の動きを録画してGIFアニメを簡単に作れます。

Unityで作ったゲーム画面の動きを記録するときにスクショだとわかりにくいので最近よく使います。

この記事にちょいちょい載っているGIFアニメも、LICEcapで録りました。

Chrome拡張：Copy Url Title to clipboard

Copy Url Title to clipboard

閲覧してるサイトのリンクをいろんな形式でクリップボードに貼れるChrome拡張。

Scrapboxのリンク記法にちょうどいい感じでタイトル+URLをコピペできます。

また、作業記録とは関係ないけれどマークダウン用のリンクもコピペできるのも地味に重宝してます。

Macのスクショ用ショートカットCommand + Shift + 4

クリップボードに欲しい範囲のスクショを登録できるショートカット。

Command + Shift + 4で該当範囲を撮ったらすぐにScrapbox上でCommand+Cで貼り付けられるのでヘビロテです。

Macのキーバインド

これを使いこなせるようになると、常にホームポジションで爆速タイピングできます。

これを使う前と後では、タイピングスピードが全く違います。

よく使うキーバインド

キー	機能
Ctrl + F	1文字右にカーソルを動かす
Ctrl + B	1文字左にカーソルを動かす
Ctrl + P	1行上にカーソルを動かす
Ctrl + N	1行下にカーソルを動かす
Ctrl + A	行の先頭にカーソルを動かす
Ctrl + E	行の末尾にカーソルを動かす
Ctrl + H	1文字前を削除する
Ctrl + K	カーソルの位置から行の末尾までをカットする
Ctrl + Y	Ctrl + Kでカットしたものを貼り付ける
	以下文字の編集中にのみ有効なもの
Ctrl + K	文字の編集中に押すと全角カナ変換する
Ctrl + ;	文字の編集中に押すと半角カナ変換する