最近ブログの記事のネタがないので6月の月報で書いたAboutページの移行の進捗報告を書いていこうと思います。

もう寝る時間なので雑に書いていきます。

動機


まず雑に動機を書きます。

  • 本サイト(yoshinorin.net)はブログ部分にフォーカスしたい
    • サブディレクトリ(about)以下に複数のコンテンツを突っ込みすぎてる
    • このサイトでやることはシンプルに、それ以外の実験的なものとかゴリゴリ動かすようなの(写真とか)は別で管理したい
  • i18n対応したい
  • React試してみたい

技術選定


下記の技術でやることにしました。

最初はDocusaurs v2を待とうかと思ったのですが、i18nがローカルで完結するのか不明(Docusaurus v1はCrowdinというSaaSを利用してi18n対応する必要がある)だったのと、そもそもいつv2がでるのか不明などの理由で諦めました。

Vue系のものを(Nuxt.jsやVuePress)選択しなかった理由は、だいたい下記のような理由です。

  • プライベート(このサイトで一部使ってる)&仕事で使う(ので別のものを試してみたい)
  • Reactの方が堅めのイメージがある
  • Vueはいろんな思想がReactの後追いの気がする (素人のイメージです)
  • Vue系のデフォルトのテーマがあんまり好みじゃない
    • ので、スタイル等をドラスティックに弄ることになるのがわかっている

インフラはAWSで完結させることにしました。これはデプロイフローを組むのがめんどくさいというのが一つです。もう一つは、現在のサイト(yoshinorin.net)はインフラ的な部分も含めて管理したいという動機でVPS上のnginxから配信していますが、今回のものはサブサイトなので自前で配信しなくてもよいという判断です。

また、私は一からデザインとかできるわけではない(いちおうSassとかは全くできないわけではないので時間かけたらそれなりのものはできるとは思いますが)のでnext-siteをベースにして不要なコードをそぎ落として構築することにしました。

進捗


肝心の進捗ですが、作成中のものをabout.yoshinorin.netで公開しています。

英語 <-> 日本語の切り替えも動いたり動かなかったりするなど、怪しいのですが、いちおうi18n実装できるというのがわかりました。挙動が怪しいのはそのうちなおせると思います。IEは完全にダメですが…

触ってみた雑な感想


包み隠さず正直に書くと下記のような感じです。

  • デフォルトでi18nが使えると思っていた
  • インラインCSS対応のため(?)なのか<style jsx>とかいう謎のライブラリが使用されている
    • ちょっとこういうのどうなんすか…CSSはCSSで完結させたらいいんじゃないかと思うんですけどね
  • mdxとかいうMarkdown内にJSX書くことができるライブラリ使ってる
    • ちょっとこうい(ry…
  • コードが結構重複してたり、特に前述の<style jsx>のあたり冗長で…
  • 未経験からReactエンジニア()
    • 雰囲気でいじくりまわした結果、まあ、なんか動いた。理屈はわからん。雰囲気だ雰囲気

フルスタックフレームワークでi18n対応するくらいのノリで対応できるのかと思ってたらそうでもなかったので、正直ちょっとめんどくさいというか、まぁ、そうすね…そうすね…

あとは完全に雰囲気でいじって動いてしまったので、このまま行ってしまうと何も実りがなく、どこかで時間とってせめてReactのチュートリアルくらいはやらないといけないなと思った。まあ、こう書くとやらないんですけどね。

残りタスク


残りこれくらいはやる予定

  • pushからデプロイまで自動化
  • 翻訳周りのInitialPropsとかなんかそういう系のやつの修正
  • アバター表示
  • 残りの部分の翻訳
  • 分量の多いコンテンツを別ページにする
  • モバイルのレイアウト修正
  • 各種リンクの修正
  • フッター作成
  • 連絡先の表示

う~ん、とりあえず第一弾でこれくらいにしたいですね。写真とかヘビーなやつは時間かけて移行したいです。

おわり。