【令和4年版】スマホで読みやすいやる夫スレまとめサイトを作った
お久しぶりです。ikazameです。2年ぶりのブログ更新です。
新元号令和にもうなんの違和感もなくなり、新型コロナウイルスもすっかり日常に溶け込んだ昨今、皆さんいかがお過ごしでしょうか？自分は就職して今は元気いっぱいサラリーマンやってます。
最近になって、やる夫スレをスマホでうまいこと読むアイディアをまた思いついたので、それを実装し、まとめサイトとして公開しました。前に作ったやる夫空間とはまた読み方が異なる実装を取っています。今日はそんなサイト「やる夫の縦読み」の紹介をさせていただきます。
作ったサイト
こちらが新サイト、やる夫の縦読みです。PCから見る限りはよくあるWordPress製のやる夫スレまとめサイトです。が、スマホから見るとまとめ記事表示の挙動がPCで見たときと大きく異なります。 百聞は一見にしかずということで、スマホでまとめ記事を表示したときの挙動をGIFアニメーションでご覧ください、スマホ向けというのが分かりやすいと思います。
やる夫の縦読みの大きな特徴は以下のとおりです。
AAもセリフも画面幅に収まる
スマホでなにか文書を読む時、重要視されるのは「縦のスクロールのみで文書が読めること」です。PC用の横幅が広いサイトや、PDFドキュメント、既存のPC向け前提のやる夫スレまとめサイトなどはスマホで表示すると横スクロールが発生し、内容全体を読むのに縦横両方のスクロールをする必要があります。
これでも全然読めると感じるか、読みにくいと感じるかは人それぞれかもしれません。が、現実にスマホの普及以降たいていのWebサイトはPC用以外にスマホ用サイズのデザインを用意するようになりましたし、電子書籍リーダーもPDF表示のみにとどまらず画面サイズに合わせて組版してくれる機能がつくようになっています。
既存のやる夫スレまとめサイトは（知る限り）拙作のやる夫空間以外に横スクロールせずに内容をすべて読めるサービスは存在していませんでした。どうしてやる夫スレでスマホの画面幅に合わせて縦読みで読むサービスが今まで存在しなかったか（何が技術的に難しかったのか）の説明は過去記事の「機械学習を用いたAAとセリフの自動分割 - ikazameのブログ」に詳しく書いてあります。
「やる夫の縦読み」でも、３年前にこのブログで発表した、縦読み実現のためのアンサーである「条件付き確率場によるAAセリフ分離」の技術を用いて、AA領域のみを縮小表示しセリフは元のサイズで表示することで、縦スクロールのみでやる夫スレを読めるようになっています。
セリフが本来の位置を尊重して表示される
以前公開したやる夫空間では、セリフはすべてAAの下側に表示される仕様になっていました。
[比較画像]
ほとんどのセリフがAAの右側に表示されるような古い時代のやる夫スレであれば、下側にセリフが移動しても違和感はありません。しかし、AA同士の掛け合いや、AAの左側に台詞があるときなどには、AAとセリフを大きく分離すると文脈を損なってしまいます。 上の画像の例でも、やらない夫にセリフには吹き出しが存在していますが、セリフを下側に移動すると吹き出しの意味がよく分からなくってしまいます。 やる夫空間ではAAとセリフを引き離してしまうことによって生じる問題を解決することができず、まとめを諦めたスレがいくつもありました。
やる夫の縦読みではこの問題を解決すべく、AAの表示に対してセリフが本来あった位置を計算し、その場所にセリフが表示されるようになっています。（本来こういった仕様をやる夫空間のときにも作るべきでしたが、そうしたほうがいいということに全く気づけていませんでした。コロンブスの卵というかなんというか）
この仕様のおかげで画面の狭いスマホでもPC表示と遜色ない表示を実現することができます。
なお画面幅に合わせて自動的にセリフに改行が入ってしまうため、オリジナル（PC表示）と比較して、セリフは縦方向に増えてしまいます。各セリフの元の位置を尊重しつつ、セリフが縦に増えることを許容すると、セリフ同士が重なって読めなくなってしまうため、セリフはスクロール量に合わせて順番に表示・非表示が切り替えられるようになっています。
やる夫の縦読みの今後
ここまで色々書きましたが、おそらく皆さん興味があるのは「サイトの更新が続くかどうか」だと思います。どれだけ読みやすい環境を提供しても中身が無いと意味ないですし。前に公開したやる夫空間は完全にエターにしてしまったので。
やる夫の縦読み自体は、最初「彼らは友達が皆無スレをスマホで読みたい」というのを原動力につくりました。皆無スレのまとめはもうできてるので、こっから先どうしようかな〜という感じです。
とりあえず、年内は１日１記事更新できるような状態を続けたいなと思っています。ここに書いておくことで、もう逃げられないようにしておきます。
技術的な話
backendはwordpress、frontendはwordpressに乗っけたReact、あとやる夫スレの認識に自作のLSTM-CRFモデルを使っています。この辺の話もまたどっかでしたいと思います。
終わりに
というわけで新・スマホ向けやる夫サイト「やる夫の縦読み」をつくりましたという記事でした。
読んでみてご意見／ご感想あればこの記事でも縦読みのコメント欄でもいいので是非書き込みお願いします。フィードバックもらえるととても喜びます。
-
ちなみにこのGIFで表示しているのは「薔薇水晶は極道の妻(おんな)になるようです」です。マジで面白いので読んだことなかったら読んでみてください。薔薇水晶は極道の妻(おんな)になるようです-記事一覧 | やる夫の縦読み↩
