技術関連

システム全体構成

• Express(TypeScript) + Nuxt.js(Vue.js): フロントとサーバーサイドをあえて一緒にしてNuxt.jsをテンプレートエンジンとして使用
• ECS + Fargate + ECR + DynamoDB + CloudFront + Amazon ElastiCache + CodePipeline: 全部AWS内で完結かつスケーラブルになるように構成

フロントエンド

ツリー作成部分

上記のTree構造を作成する部分は完全自作。map, filter, reduce, sortの魔界になっておりここが一番苦労しました。

テキストエディタ部分

nhn/tui.editor を使用。

エディタ選定の理由として自分がcontenteditableのエディタの入力体験があまり好きじゃないためそれ以外で選定。一番入力が好みのエディタを選びました。

ただスマホ対応が微妙らしく、リバースエンジニアリングのコスト感や1からエディタ開発するコストを考えスマホ対応は断念。挑戦はしてみたが中途半端なもの出すぐらいならと思い非対応に振り切りました。

トップページのロゴアニメーション

AfterEffectでロゴアニメーション作ってもらってairbnb/lottie-webでwebに描画。

サーバーサイド

開発環境

Express(+ Nuxt.js)はそのままでRedisとDynamoDB、DynamoDBLocalはDocker内に構築。DynamoDBのクエリ叩くラッパーみたいなの自作してそこが死にそうだった。あとから知り合いに聞くとawslabs/dynamodb-data-mapper-js使うと良かったらしい。無念。リプレースする機会があれば導入したいです。

ちょっとこだわったところ

SSRもしつつルーティングの速さ

Nuxt.jsのasyncDataでなんでもかんでもAPI叩くとページ遷移がクソ遅くて体験が最悪なのでSSRのときはasyncDataでExpressからチョクでデータとってきてブラウザルーティングの場合はmountedでAPI叩くようにしてる。そのmountedのためにわざわざAPI生やしたり生やさなかったりした。

virtual-scrollerの自作

動画

leafが増えるとDOMのノード数が1500個以上になってしまうので画面で見えない部分は削除するなどしました。ライブラリもあったんですけど使い勝手が悪く自分で自作したほうがよくね？ってなりました。現在はleafの作れる上限は50ですが数百個作られてもブラウザ重くなりにくいと思います。

テンキーで移動 + Enterでエディタ開く + ESCで保存&閉じる

動画

リリースログ

• 2019/8/26: v1リリース

開発スケジュール

開発リソースを別アプリにさくため、ほそぼそとした保守はするが大きな機能追加などは来年度以降の予定。