とらすのブログ

avatar

Webクライアントを作っています

2021-12-15

こんにちは!しみらー a.k.a とらすです。いつものごとくブログをさぼってましたが、Misskey Advent Calenderの枠があいていたので、今作っているMisskey Webクライアントの話を書くことにしました。
アドカレから来た人、このブログは駄物なのであんまり漁らないでね

・お約束

この記事は、Misskey Advent Calender 15日目の記事です。


TL;DR

みていってね!
https://github.com/sym-dev/at-Dusk

まえがき

私はMisskeyとフロントエンドが好きなので、Misskeyにコントリビュートしようと思いましたが、Vueが読めなかったのでクライアントを作ることにしました。
MisskeyがVueならこっちはReactや!ということで、Reactで開発してます。一般的にReactはVueより難しいみたいなのをたまに見ますが、真偽は不明です(Vueが読めないので)

とはいえMisskeyは機能も多く、実際に動くアプリケーションも作ったことがなかったので、まずはお試しとして昨年にMysskeyを作りました。(リポジトリ)
この子はJavaScriptで書かれているため、データのチェックが甘く実行時エラーで落ちたり、名前がMisskeyと見分けがつきにくいなどの致命的な部分がありますが、これが本命のクライアントを作るにあたりとても良い知見になりました。:tiken:

at Dusk.

アプリ名はat Dusk.という名前になりました。由来はMisskey v11のコードネームがdaybreak(夜明け)だったので、日没の英語から探してこれになりました。
ちなみにGoogleでat Duskと検索するとお住まいの地域の日没時間が表示されます。(最悪のググラビティ)

mysskeyでの開発時は文法エラー・実行時エラーと格闘しながらの開発でしたが、at DuskではTypescriptを採用したことにより、実行時エラーが格段に減り、型エラー(new!)・文法エラーとの格闘だけで済むようになりました。
結局のところエラー格闘は変わらないのでは?という疑問があるかもしれませんが、型エラー・文法エラーはエディタ上で確認できるのに対し、実行時エラーは実行されて初めてエラーが起こり、なおかつそれを見逃してしまえば利用者にもそのエラーが起こりうる等の違いがあります。これによりアプリケーションの品質が向上します。

状態管理

フロントエンドといってもサーバーとやり取りするようなアプリケーションではサーバーから送られてきたデータはどっかに置いておく必要があります。
mysskeyでは全てのデータはReactのContextに保存していましたが、データの種類でコンテキストを分けるとおもしろコードのようになってました。
at Duskでは、Reactでのメジャーな状態管理ライブラリReduxのいい感じ™スターターキットRedux toolkitを使って管理しています。Contextを全廃したわけではなく、そんな状態書き換えないなってところはContextを使ってたりします。

MFM

Misskeyクライアント開発での鬼門といえばMisskey独自の装飾構文のMFMですが、at Duskでは多くの構文に対応しています。(sparkleはcanvasでやってるらしいからめんどくさくてやってない、rotateは最近追加されたから実装してないけど対応は簡単そう)
しかしながら、ネストした際の挙動が本家と異なるようで、MFMアート部などの凝ったMFMだと想定しない動きになることがけっこうあります。かなしいね

ほかにもいろいろ使ってるけど並べても面白くないので割愛します

作例

せっかくなのでいまの時点で出来てる画面の作例を乗せておきます。といってもできてる部分が全然ないんですけども...

TL

メインのタイムラインはこんな感じです TL上部に投稿フォームを表示するオプションがあります🎉(自分が使うので)

sutaba

投稿のメディアは、一般的な固定レイアウトではなく、コンテンツに応じて変わるタイプの表示にしています

多岐にわたる

縦が小さいと効率的に表示出来てお得(Twitter Web的な)

emoji1

emoji2

絵文字ピッカーはmysskeyでは対応していなかったUnicode絵文字も検索可能になりました

syuilo1

syuilo2

syuilo3

syuilo4

at Duskは現時点で4種類のテーマがありますが、もうちょっと増やすかもしれません

おまとめ

じつは考えていたより進捗はよろしくないんですけど、12月中には初回リリースしたいな~とは思っています もう中旬ってマジ?終わりだ
ちまちま開発は継続していくので、暇な人は応援してくれ~!暇じゃない人はがんばれ

P.S.

鳥ではなんも言ってないけど、オリキャラ欲しいな~って思ったので最近オリキャラを模索しています。
外見はだいたい決まったけど、名前とか服装とかは決まってないのでどうすっかな~としています
いろいろ忙しくて絵をする時間が取れん!鳥も最近なんもツイートしてないしな...

インターネット引退、引退ネット