かつてからやってみたかったnode moduleの公開をついに果たせたので記念に発表してみたいと思う。
作成過程においては下記記事がとても参考になりました。
これからモジュールを開発して公開したいという方は1を、generator/iteratorの理解を深めたい方は2を読むことをおすすめします。
..さて、今回タイプライター風のエフェクトを与えるシンプルなライブラリを書いた。
サンプルgif
コードはこちら
他にもgeneratorの仕組みも理解したいと思っていたところだったので、generatorを使ったモジュールが仕上がった（ので、使うにはいくつかのloader, pluginなどが必要になる。）
できること
このライブラリでは以下のことができる。
- タイピング中のような効果付きで一文字ずつ表示する
- 編集中のワードには編集中っぽい効果をつけるべく、classを与えられる
- githubにあげたstyleを使えば最初からそれっぽい感じになっている。と思う。
- 複数行OK
- ワードの区切りを好きな文字で指定できる
- タイピングのスピードを好きに調整できる
先行事例と開発経緯
npmにて「typewrite」で検索しヒットしたものを眺めてみたが、これが一番近かった。
yobacca/typewrite:
A flexible typewriter simulator written in plain Javascript, well tested using Mocha, Chai, Karma and Istanbul.
https://github.com/yobacca/typewrite
一方で、こちらは日本語ならではの編集中のエフェクトがなく(欧米なので当たり前)、それをかつてブログで実装した際に個人的満足度が高かったために、今回ライブラリとして作成・切り出すことにした。
以下は個人的なメモなので、TODOまで飛ばしていただいて問題ありません
努力した点
見た目では日本語ならではの編集中の背景・下線と、入力中の右サイド明滅バーに大分力を割いた感がある。
コードの中身としてはgeneratorの仕組みを理解するのに若干手こずったが、ある程度なれることが出来た。
また、node moduleの適切な開発フローが完全に手探りで、知見ある方に相談してみたい。
終わりにかえて今後のTODO
- サンプルコードとして最低限のものをまとめておきたい
- generatorの良い書き方がまだまだわかっていないので、ガシガシリファクタしたい。
- 多分依存関係のあるライブラリの提示の仕方を間違っているのでこれは早めに調査・対応したい
-
jsでのテスト経験が殆どと言っていいほどないので、これを題材に色々試してみたい。
- 今やるならどのテストフレームワークが良いのかなどコメント・アドバイスいただけるととっても嬉しいです。
- 広められるようテスト・コードの洗練を継続したい。
以上!