105
58

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

様々な日本語文章を、目線移動無く早く読めるオープンソースツール(Svelte Shield)を公開しました

Last updated at Posted at 2020-09-11

TL;DR

11213.gif

概要

tdual さんのツイートを見て、目線移動無く文を読むと早く読めるということを知り、開発に至りました。
日々読んでいる記事や論文など、今より早く読めると QoL が上がるため、ワクワク感を持って取り組みました。

利用モジュール

形態素解析

形態素解析には kuromoji.js を使いました。多くの文章でより良い結果が得られて使いやすかったです。(結構前に作られたツールなのに凄い・・)
区切りの良いところで表示するために if 文を多用して力業で解決しています。感じ良く表示されるという曖昧な答えの中で、コーディングするのはだいぶ苦労しました。

ビューライブラリ

ビューライブラリには Svelte を採用しました。非常にサクサク開発出来て、書いていてとても楽しかったです。コーディングにおいて楽しさは正義。本当に素晴らしいライブラリだと思います。

UIデザイン

UIデザインにはニューモーフィズムを採用しました。 Nuemorphism UI をベースに利用し、不足分は Neumorphism.io で補いました。最初に出会ったときにコレだ!っと思っていて、何かで形にしたいと考えていました。出来上がってからも見栄えには非常に満足です。
ただ、 Nuemorphism UI 自体の css が 500kb 近くあってそれなりに重いこと、モーダルを実装するためだけに bootstrap, jquery, popper.js の依存が必要になったことで、もう少し軽量なライブラリがあったら良かったなと思いました。余裕が出来たら実装してみたいです。

その他ツール

他には自作のモック作成ツール am-mocktimes を利用したり、ユニットテストには ava を利用したりしています。利用モジュールの一覧は package.json よりご覧ください。自分はどれも便利だと感じています。

使ってみて

文章によっては一部表示が長くなったり、逆に短すぎたりすることもありますが、10記事ほど試し読みした感じでは、恩恵を十分に受けれているように感じました。これからも色々記事を読んでみて、気になったところは微調整していこうと思います。

何か要望などありましたら issue から連絡貰えると出来る限り対応しようと思います。

ブラウザ上で同じことができるツールがあったらコメントで教えていただけると幸いです。(自分のググり力では見つけることが出来ませんでした)

ソースコード

105
58
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
105
58

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?