Twitterで、過去のホームタイムラインを見るためのツール「パースタイムライン」を公開しました🥳
pastimeline.com
日時を指定すると、その1時間のうちにフォロー中の方々が発言したtweetたちを、時系列で並べて見ることができます。
操作すればすぐにおわかり頂けると思いますが、このツールはTwitterの検索機能にそのような機能があるのを利用しているだけです。ところが、この検索機能をこの目的で使うためには日付時刻などの検索条件を正確に入力する必要があり、使いづらいものです。この操作性を改善するのがこのツールの趣旨、ということになります。
機能やら利用規約やら何やらは上記のサイトに書かれている情報を見て頂くのが良いのでここでは解説しませんが、サイト内に書いていない話をここに書いておきたいと思います。
技術的にはどんな感じ？
React + TypeScript という構成です。ビルドしたものをAWSのS3に置いて、CloudFrontから配信しています。単純ですね！（たぶん）
個人的には、宗教上の理由でReactをこれまで一回も使ったことが無かったどころか一秒たりとも学習していなかった*1のですが、いろいろ（後述）あってReactを使うことになった、という状況です。
TypeScriptに関しては、何回か書いたりはしていましたが、書いたものを一般公開するのは初めてのことです。とても気持ちよくコードを書くことができました。私は静的型推しの人間なので発言には偏りがあると考えられますが、動的型の言語で頑張って沢山のテスト書くよりも、静的型の言語で最低限のテストだけを書いている方がずっと品質は高いよね、って思います。
どれくらいの期間で作ったの？
3/19(金)に開発することを決意して脳内で設計を進め、create-react-app pastimeline --template typescript として初期のコードを用意したのが3/21(日)の夜で、3/23(火)の夜に公開となりました。2週間ほど前に片手間でReactを学習し始めた人間でももう公開できるアプリが作れちゃったというのは、とても良くできたフレームワークである証の一つだと思います。
開発し始めてからは片手間ではなくてかなり本気で作って*2いました。
どんなチームで作ったの？
ひとりです。
自分一人でメシを食う分には困っていない経済状況ですが、人を雇ったり外注したりするほどお金が沢山ある訳ではありませんので😅
なぜ作ったの？
作った理由は3つあります。
1つ目は、Reactを学習する必要に迫られたから、というものです。仕事の一部でReactで作られたものを引き継ぐことになり、さすがに完全無知のまま時間課金の仕事を受けるのは申し訳なさすぎる、と思って慌ててReactの学習を始めたのが3/13(土)のことでした。片手間での学習だったので三目並べのチュートリアルをやり切るのに4日かかったりしてちょっと焦ったりしたのは今では良い思い出です。
2つ目は、自分の会社の製品が欲しかったから、というものです。自分の会社は受託開発の会社なので製品なんか無くても良いとも言えてしまうのですが、会社の看板になるものは何か欲しいよね？という気持ちは無いわけではないです。この小さなツールが看板になるかと言うと、それはまた別の問題ということで😇
3つ目は、自分はこの機能のツールが大好きだから、というものです。公開はしていないのですが、2016年に、過去のタイムラインを遡って見るための自分専用のTwitterクライアントを開発して、それをずっと運用してきたほどに、この機能が大好きです。
このアイコンは何？
絵を短期間で描くのは無理だな、と思ったので頭文字をそのまま置きました。フォントは Monaco です。
UIデザイン的には、どんな感じ？
配色の意味では、「過去」というキーワードから、いわゆるセピア系統の色を想起したので、このような配色としました。色覚方面のアクセシビリティの検証はできてないです、ごめんなさい🙇♀️（他の観点でもアクセシビリティ対応は弱いです🙇♀️🙇♂️） もうちょっと彩度を落とした方が良いかなーなどと考えております。
レイアウトの意味では、Bootstrapのお世話になってます。
工程の意味では、脳内に描いたワイヤーフレームがあって、それをHTML/CSS（実態は .tsx）に落とし込む、という方式でやりました。やっぱりこれが一番ですね！
将来の展望は？
こんなことをやりたいなーーって思ってます。
- 多言語対応、まずは英語から。
- 別実装の提供 : 2016年から運用していた自分専用のTwitterクライアントも、諸問題を解決してから提供するつもりです（有償になる予定）。
- ダークモード対応
などなど
さいごに
みんな使ってね🤗
