新しいタブがお好みの背景画像のMarkdownメモになるGoogleChrome拡張を作っている
実は最初のバージョンを公開してからけっこうたつんだけど、つい最近いろいろとアップデートしてみたので、ちゃんとお知らせしようと思います。こういうやつ。
概要
- Cmd+NとかでChromeの新しいタブを開いたときに表示されるページを置きかえるやつ
- Markdownで書ける。GFMだからタスクリスト記法も対応してる
- 簡易的な入力補完もつけた
- どっからか（e.g. Flickr, 500px）の画像を参照するのではなく自分でローカルファイルを選択
- 美麗な画像 = お気に入りの画像とは限らないので
- 画像にフィルタかけたり、文字色の設定とかできる
詳しくは紹介ページを作ったのでそちらを御参照頂きたい。
作った理由
同じような新しいタブページにメモできるようなやついろいろにインスパイアされたのは間違いない。というか既存のものが気に食わないから作るに至った。
というのも有名どころとかって確かにカッコ良くて綺麗な画像をランダムで表示してくれたりするんだけど、概要でも書いたようにそれが自分のお気に入りかというとそうじゃないんだよね。
で、僕には世界を旅行してフラフラしてる間にとった自分にとってかけがえのなく、そして誰にでも胸を張って見せれるような綺麗でお気に入りで思い入れのこもった写真がある。例えば既存の綺麗が画像が表示されるやつでマチュピチュとか表示されるでしょ、そうすると「おー、行ったなぁ」ってなる。なるんだけど写ってるは自分の写真じゃない、そこが納得行かなかった。
もちろん僕だけじゃなくて、風景写真とかじゃなくて例えばアニメやゲームの画像が良いよ、とかって人も居るだろうと思った。そういうのが、自分の好きな背景にしたかった理由。
あとはちょっとササっとメモ取るときに、エディタとは違う場所にメモとりたいときとかあって。Markdownで書けたら簡単になんでもイケるし。
ここに来てアップデートと紹介した理由
アップデートも紹介も前からしたいなーと思いつつ後回しにしてた。つい最近'Markdown New tab'っていうGoogle Chrome拡張が少しバズったりしてたので「おいおい、同じようなの僕もけっこう前に作ったじゃん！」ってなんか憤慨した。
そっから今までやりたいなーと思ってたらローカル画像をキャッシュして使ったり（それまではURLを入れてそこから取得してた）、入力補完を入れたり。ちょいちょいアップデートした。
以前PentazeminというElectronアプリも作ったんだけど、そのときに紹介ページをつけただけでグっと見てもらえる、使ってもらえる率が上がったので、今回も作った。それが上で紹介してるやつ。
このPentazeminもアップデートはそのうちしたい。かなりのポテンシャルあるし。
まあそんなわけでアップデートして紹介ページも整えました。
技術的な話
作ろう！ と発起したきっかけのひとつに、あれ、SPAの技術ってChrome拡張でも活きるんじゃね？ と思ったことが大きい。
で、実際に使ってのはVue.js。大枠部分は本当楽しく気楽につくれていて幸せ。
ちょっと苦労したのは入力補完。というのもやってる実装は
1. 特定のキーの時にイベント発火
2. その中で現在のキャレット位置を特定
3. キャレットの位置を利用して全文を行ごとにわけて現在の行を特定
4. 現在の行が補完すべき状況だったら、補完する文字をキャレットの部分に挿入
5. キャレットの位置を挿入した文字数だけズラす
という流れ。もしかしたらもっと良い実装があるかも。とにかくこのキャレットと入力文字の周りがけっこうやっかい。発火タイミングはKeyupなのかKeydownなのか、対象がReturnキーだったので改行が入ったり入らなかったりして。結局Keydown時にイベントをpreventで奪って、補完しないときは改行を、補完するときは補完文字と改行を挿入するようにしてる。
リリースに関しては、「webpro/release-it: CLI release tool for Git repos and npm packages.」を使ってみてる。なかなか良い。でもまだ最後の方でコケてしまうのが解消できなくて悩んでる。とはいえ、ビルド、自動でパッケージのバージョン表記を更新、タグ付けてPush、あたりまでできてるので実用には耐えれている。
本当はそのあとReleaseに上げて、それをフックにしてChrome拡張配布用のAPI叩いて自動リリース、までやらせたいんだけど……
ちなみに紹介ページはPentazemin時につかったNuxt.jsを改変してシュシュっと作った。といっても一日半かかってしまったけど。まあこれはアイコンや紹介画像、ロゴっぽいやつとか画像制作に時間かかってるのもあるから仕方ない。ただこの画像と説明があるとないとで全然違うので、サボらない。
余談
とまあここまですでに余談だけど、さらに余談。
自分がプライベートで作るものはよっぽど日本特化じゃないかぎり英語ファーストで作ってる。これは、僕が世界をいろいろ見た結果の感覚として、日本は貶すファーストの減点法で評価したがるし、欧米圏はわりと褒めるファーストの加点法で評価したがる傾向だと思ってるから。
趣味でやってるレベルのもので叩かれて無駄に精神力は削られたくないし、褒められるほうが嬉しくてモチベーションアップにつながるから。
わざわざツライ環境で戦うことを選ぶほど僕はマゾじゃない。
あとは寄付を募りたくて悩んでる。基本的に趣味プロダクトはフリーで提供していきたいと思ってるんだけどやっぱりサポートはあったほうがいい。今はPaypal.meだったりKyashだったり個人間送金が昔より手軽になって良い。でも、法的にどうなのか良くわからないので躊躇してる。
ソフトウェア販売（但し払わなくても使える）という形式にするとか、ギフト券とか、ウィッシュリストとかいろいろ方法はあるんだろうけど、それも本当に法的セーフなのはどれなのか、とかよくわからない。
お金により発生するモチベーションと評価は欲しい。
自分が欲しいと思うものを作ってるだけなので当たりまえなんだけど、それなりに使い勝手の良い拡張だと思うので、もし良ければ入れみて試していただけると嬉しい。Chrome拡張なら削除も簡単だし、Vivaldiでも使えてるよ。