
> _あー今年の始めくらいから個人開発で使っている Railway、ここ数ヶ月の進化のスピード速くて最高 of 最高になっている。素晴らしい。一瞬 fly\.io 乗り換えがチラついたけどこのまま行こう_
> https://twitter.com/Meijin_garden/status/1520386026480746496

というツイートを見かけて、railway.app というサービスを知った。

いわゆる PaaS というかんじで、ぽちぽち設定していけば

- 計算資源の確保
- ログやヘルスチェックなどの面倒を見る
- メトリクス
- CD
- secrets の管理
- 開発環境との統合
- preview url の発行

などなどをいいかんじにやってくれるというもの。

実際 tutorial 的なものを触ってみたけど、便利。
典型的なユースケースは GitHub の repository を連携するだけで 0 configurations でデプロイまでやってくれる。
たとえば、「これは Next.js のプロジェクトです」ということをわざわざ明示する必要は基本的にない。
同様に、root directory に Dockerfile があったら、それをつかってデプロイするんだな、と解釈してよしなにしてくれる。

あとなんか railway.app が公式に提供しているスターターテンプレートみたいなものもあって、それもわりと種類が豊富でおもしろい。
https://railway.app/starters

cli ツールも提供していて、 `railway run npm run foo` などとやると Railway 上の環境変数をもってきた状態で `npm run foo` を実行する、みたいなこともできる。

環境の分離もうまくできていて、Project ごとに複数の環境をもてるようになっている。
Project には複数のサービスが含まれるので、それらのサービスごとまるっと複製した別環境をつくる、みたいなことが簡単にできる。

あんまり最近の Heroku をつかっていないので、ぶっちゃけ Heroku となにがちがうんだっけ...？というところはよくわかっていないのだけど、ちょっと試しにつかってみた感じ便利だったので、なんかしら hosting してみようかなという気になっている。

このブログはいまは Cloudflare Pages で静的ファイル配信だけやっているけど、railway.app ならもうちょっと動的なものも扱えるので、なんかネタがあったらやってみてもいいかもしれない。

#### 余談

Cloudflare Pages をさわったときにも同じことを思ったけど、最近の PaaS などの進化はすごくて、ぱっとサービスなりページなりを公開するときの体験のよさに毎度驚いてしまう。

典型的なユースケースではほぼ設定不要で `git push` したらデプロイしてくれるようになっている。さらにその「典型的なユースケース」の中に Dockerfile が含まれていると、もうだいたいなんでもあり、みたいな状態になって、自前でデプロイスクリプトとか書かない世界になっているんだなぁと改めておもった。

Cloud Run みたいな Docker ベースのやつでも相当楽な世界になった気がしていたけど、それでも Cloud Build + GCR + Cloud Run、をがちゃがちゃつなぐ、みたいなのは必要なわけで、Dockerfile だけ書けばいいよ、というのとは入り安さの観点だけみると一線あるよなーと思う。


railway.app というサービスを知った


むかしからやってみたいと思いつつ、なかなか腰が重くて行動にうつせていなかった個人ブログ作成をついにやってみました！

Web フロントエンドにほとんどふれてこないまま今日まできてしまったので、どこかしら個人ででもフロントエンドっぽいことを多少なりやりたい・題材としてブログとかやってみたいなと常々おもっていました。
ただ根本的な問題としてブログを継続的に書けるタイプでもないので、作ってしまったはいいもののすでに持て余す未来がみえていますが、逆に場所があることで書くモチベーションがうまれるみたいなのも期待しています。

なんで急にやるきになったのかというと、完全にたまたまで、[Deno](https://deno.land/) を触ってみたい → [Aleph.js](https://alephjs.org/) なる [Next.js](https://nextjs.org/) inspired な SSG/SSR フレームワークがあるらしい → 触ってみるか → はまる → Next.js ではどうなってるんだろう？ → 気付いたら Next.js でブログつくってた、という経緯です。
Deno + Aleph.js は(まだまだ発展途上とはいえ)なかなか体験もよく、これはこれでもうちょっと触って記事にしたい & 結局 Next.js にした理由はいくつかあるのでなにかしら貢献できたら楽しそうだなと思っていたりします。

## 技術

Markdown でかいた記事を、 Next.js で SSG して [Cloudflare Pages](https://pages.cloudflare.com/) でホスティングしています。
スタイルは自分でかくのは苦手意識がすごかったので、 [Chakra UI](https://chakra-ui.com/) を採用しました。

最低限のスタイルは整えたつもりで、 Syntax Hightlight もきくし、スマートフォンのような端末でみてもそれなりに見れる感じにはなっているのではないかと思います。

```typescript
type Props = {
  tag: string;
};

export const TagLink: React.VFC<Props> = (props) => {
  const { tag } = props;
  return (
    <Link href={`/tags/${tag}`} padding="0">
      <Tag colorScheme="blue" variant="outline" padding="1" size="sm">
        <TagLabel>{tag}</TagLabel>
      </Tag>
    </Link>
  );
};
```

[remark](https://github.com/remarkjs/remark) で Markdown → HTML -> rehype -> React Component をやっています。一回 HTML を介する意味がない気がするのですが、試行錯誤のなりゆきでこうなってしまって特にまだ害もないのでこのままにしています。
Highlight は [Prism](https://prismjs.com/) です。

React Component にしているのは、コンテンツ部分も Chakra UI や `next/link` をつかうようにするためです。
Chakra UI は書き心地やメンダルモデルが Flutter とかにちかい感じでかけるのでだいぶ書きやすかったです。(僕が HTML & CSS 素人すぎるだけかもしれないです。なれているひとはこのテンションで HTML/CSS を書いてるんですかね)

RSS もむりやり対応しました。 https://blog.agatan.dev/feed.xml
`/pages/index.tsx` の `getStaticProps` で `/public/feed.xml` にファイルを書き出すという技をきめているのですが、ただしいやりかたなんでしょうか...

せっかくなので Google Analytics も導入してみました。
Next.js はそういう [サンプル](https://github.com/vercel/next.js/tree/master/examples/with-google-analytics) まで用意されていてすごいですね。

og も一応最低限は設定しました。

このブログは記事もソースコードも https://github.com/agatan/blog で管理しています。
なので各記事の最下部に GitHub 上の該当ファイルへのリンクを置いてみました。
なにか間違いを見つけたら PR ください。

ホスティングは最初は GitHub Pages にしようとおもったのですが、Netlify も Vercel も Cloudflare Pages もさわったことがなかったので、なにかしら新しいものに触れたくなり、ユースケース的にもぴったりだった Cloudflare Pages にのせることにしました。
デプロイまわりの設定がぽちぽちやるだけで一瞬で完了し、カスタムドメインをあてるのも異常に簡単で驚きました。

## 移行

記事がないとスタイルもよくわからないし、過去に書いてきたものもいくらかは集約させるかーと思い、Qiita/はてなブログ/Medium から内容をもってきました。
Qiita/はてなブログからの移行は Deno でちょちょっとスクリプトを書いておこないました。こういうのには便利ですね。

- [Qiita から記事を export する Deno スクリプト](https://gist.github.com/agatan/ce03732e03d3cae3a7e70b2ac62a0164)
- [はてなブログから export した MT ファイルを Markdown に変換する Deno スクリプト](https://gist.github.com/agatan/dd306e967c953739f41718ea44638c16)

はてなの方は HTML だったので結局このあと Python で HTML → Markdown を(多少変換を加えつつ)おこなうスクリプトをかきました。
Deno でやろうとおもったのですが、HTML → Markdown のよさそうなライブラリが見当らず、自分でかくほど労力をかけたくもなかったので。

いまのところ人生でいちばん書いているのは Python らしく、ぶっちゃけこういう書き捨てスクリプトは Python で書くのがいちばん速いです。
(Python の標準ライブラリが便利なのもわかっているし、良い言語だとはおもうのですが、個人的な好みとしては静的型検査がある言語がすきなので、書き捨て用の良い言語を探していたりします。Deno をさわりまくっているのもその一環です。このへんも雑談として記事にしたい。)

というわけでブログを作ったという話でした。
つづくかはわかりませんが、転職して(終盤はコロナで前職もリモートでしたが)リモートベースになったのもあって技術的なトピックについてグダグダと話す機会がへっているので、知見未満の雑談っぽい内容をかいてみるのもよいかなーとおもっています。


個人ブログをつくりました


### 追記 (2021.07.14)

[Obsidian](https://obsidian.md/) に移行しました。
追記ここまで。

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Dropbox">Dropbox</a> Paper と <a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Keep を併用してメモとかを取っていた．
長期的な記録とか人に見せうるもの，長めの文章は <a class="keyword" href="http://d.hatena.ne.jp/keyword/Dropbox">Dropbox</a> Paper に，
一時的なメモとかリマインダ的なものは Keep に，
と使い分けていた．</p>

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Dropbox">Dropbox</a> Paper すごく好きだったんだけど，</p>

<ul>
<li>なんか重い気がする</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/WYSIWYG">WYSIWYG</a> なので <a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> で書いているつもりでもちょこちょこ変なことが起きる

<ul>
<li>バッククオートをおした時の挙動とか</li>
</ul>
</li>
<li>ブラウザでしか開けない</li>
</ul>

<p>というのが使いにくく感じてしまった．
基本的にグループで使うものだと思うので，僕は使わない機能がいっぱいあるなぁという感じもした．</p>

<p>Keep は Keep で好きだし，使い分ければそんなに嫌なこともなかったので続投したい．
その上で，長期的に残しておきたいメモやノートを書くサービスを探してみた．</p>

<h1>ほしい要件</h1>

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> で書ける</li>
<li>端末間同期</li>
<li>画像を D&amp;D で貼れる &amp; 保存できる</li>
<li>グループ分け．<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リを切るくらいの機能で十分</li>
<li>Archive</li>
<li>検索</li>
<li>ブラウザ以外のアプリケーションとして閲覧できる

<ul>
<li>別に Electron でもなんでも良いけど，ブラウザとは独立したアプリケーションとして動いて欲しい</li>
</ul>
</li>
<li>mobile app</li>
<li>細かい一時的なメモを取るのは keep.<a class="keyword" href="http://d.hatena.ne.jp/keyword/google">google</a>.com でやる</li>
<li>ToDo もいらない</li>
</ul>

<h1>比較</h1>

<h2><a href="https://dropbox.com/paper">Dropbox Paper</a></h2>

<h3>Pros</h3>

<ul>
<li>サービスの大きさ・信頼性</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> + <a class="keyword" href="http://d.hatena.ne.jp/keyword/WYSIWYG">WYSIWYG</a> なエディタであること</li>
<li>人にパッと見せられるくらいキレイにメモがとれる</li>
<li>presentation mode（個人で使ってたらあんまりいらないかも）</li>
</ul>

<h3>Cons</h3>

<ul>
<li>重い...</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/WYSIWYG">WYSIWYG</a> であること</li>
<li>ブラウザでしか開けない</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> で書いているのに <a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> として export すると微妙に modify されている...</li>
</ul>

<h2><a href="https://keep.google.com/">Google Keep</a></h2>

<h3>Pros</h3>

<ul>
<li>さくさく</li>
<li>シンプル</li>
<li>リマインダとの連携とか</li>
</ul>

<h3>Cons</h3>

<ul>
<li>長期的に残しておきたいドキュメントとかノートを書くためのものではない</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> で書けない</li>
</ul>

<h2><a href="https://evernote.com/">evernote</a></h2>

<p>お金は払う前提で考える</p>

<h3>Pros</h3>

<ul>
<li>圧倒的コミュニティ．連携の広さとか tips が転がりまくっている．</li>
<li>web clip とかちょっとした pdf や画像をポンポンぶち込んでおける</li>
<li>短いメモみたいなものも躊躇なくいれておけそう</li>
</ul>

<h3>Cons</h3>

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> が使えない問題がでかい</li>
<li>長めの文章を書く感じじゃなさそう</li>
<li>機能が多すぎてごちゃつきそうというイメージもある</li>
</ul>

<h2><a href="https://boostnote.io/">Boostnote</a></h2>

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/OSS">OSS</a> になっているエディタで，<a class="keyword" href="http://d.hatena.ne.jp/keyword/dropbox">dropbox</a> みたいな外部<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%E9%A5%A6%A5%C9">クラウド</a>ストレージを使って同期をはかるやつ．</p>

<h3>Pros</h3>

<ul>
<li>UI</li>
<li>要件はほぼ満たしている</li>
<li>外部ストレージを使っているので，サービス停止のリスクは外部ストレージに依存する

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/dropbox">dropbox</a> / <a class="keyword" href="http://d.hatena.ne.jp/keyword/google%20drive">google drive</a> / one drive とか代替も結構あるのでサービス停止を気にする必要がなさそう</li>
</ul>
</li>
</ul>

<h3>Cons</h3>

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Dropbox">Dropbox</a> などのストレージを圧迫する</li>
<li>Boostnote 独自のフォーマット（フォーマットとしては cson だけど）で保存されるので，別に外部ストレージにそのまま md が吐かれるとかではない

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> として export はできる</li>
</ul>
</li>
</ul>

<h2><a href="https://www.inkdrop.info/">Inkdrop</a></h2>

<h3>Pros</h3>

<ul>
<li>UI</li>
<li>要件は満たしている</li>
<li>status と tag 機能は便利そう．</li>
<li>一番普通に整理が出来る構造になっている気がする</li>
<li>Data <a class="keyword" href="http://d.hatena.ne.jp/keyword/Access">Access</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> が使える</li>
</ul>

<h3>Cons</h3>

<ul>
<li>個人開発なのでサービス停止がこわい

<ul>
<li>とはいえ <a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> なので移行は容易い</li>
</ul>
</li>
</ul>

<h1>結論</h1>

<p>要件を満たしているといえるのは Inkdrop と Boostnote くらいだろうか．
Boostnote よりも Inkdrop のほうが first impression では好みだった．
とりあえず 60 日 free なので Inkdrop を使ってみる．
今この文章も Inkdrop 上で書いている．普通に <a class="keyword" href="http://d.hatena.ne.jp/keyword/markdown">markdown</a> を書けばいいのでまあ書くのは楽．</p>

---

---


↗ agatan blog ↗

#雑談

railway.app というサービスを知った

個人ブログをつくりました

個人のメモ・ノートを保存するサービス選び