ビューワー
本棚のウェブアプリが欲しくて、まぁこんなのを作ってある。
作品のviewer部分は操作しないと分かりづらいのでスクショは撮らない。よく考えたら18禁なだったのでモザイク。
dmmは同人を電子で買うと、サークルによってはjpg, pdfでもダウンロードできるようになっている。上の画像はそれ。
要件的には
- 本一覧の表示
- 本をお気に入りできる
- 履歴を表示
- 著者、サークル、タグが設定できる
- 本情報を編集できる
- 本のページを見開きで表示
- モバイルでも操作可
とかとか。そもそもこれを最初に作ったのは4年くらい前か。
sinatraで第一弾を作って満足してたんだが、段々ファイルが増えてきてもうsinatraの領分では無いのでは?
という気がして、railsの勉強がてら作りなおそうというのが第二弾。
その後、色々勘所が分かってきて、勉強の試行錯誤の後とかかなりゴミが溜まっていて、
今の知識ならもっとキレイに作れる！という気持ちで作ったのが第三弾。
その後転職して、railsを業務で使えて、テストもかけるようになったし、
第三弾までは見た目が非常に悪かったのを今ならキレイに書ける！という気持ちで作り直したのが第四弾(現行)。
実際、第四弾は1週間くらいでテスト含めて実用できるレベルまで作れた。
その後もチョコチョコ修正を加えてより便利になっている。
でまぁ最近、komifloというのが出てきて、俺が作ってるやつやんけと思い使ってた。
どうにもビューワーがゴミで、俺の作ってるやつで不満点を解消させてやろうという決意をした。何が駄目かと言うと、
- 作品ごとに読み込み
- シコってる時に「THE END」と出てくる謎仕様
- 複数作品を一気に読めない
- シリーズものはとか、間に余計なものは要らない
- 先頭のページに戻るのがだるい
- 作者の作品一覧からだと並び替えが出来ない
- シリーズ物が3->2->1という順番でしか連続で表示できない
- 星マーク(お気に入り)とハートマーク(Like)の違いが意味不明
で、自分のviewerで改善策を実装してみた。
スクショ...は分かり辛いのでやめた
OnTheGoとかネタみたいなModelを作ったが、プレイリストを作って作品を全部連結させてるだけ。
実際全部の表示には時間かかるが、その日その日のオカズはたかだか10作品程度しかないはず(1作品20ページとして200枚の画像、1ページ2MBと考えても大したことない量)で、lazyloadしているから特に待ち時間は発生しないし、重くても一度読み込んでしまえばどうでも良い問題。
シリーズ物は間に「THE END」みたいなエロゲの中出し外出し選択肢みたいな余計なものは無く、スムーズにシコれる。
更に、ループ機能をつけているので、4作品目の最後のページが右にあって1作品目の最初のページが左にある状態が作れるので便利。作品ごとの並び替えは当然できる。
一つ問題があって、プレイリストを表示後に、別タブで別作品をプレイリストに追加したり、プレイリストの並び順を変えると、
プレイリストを表示しているタブで再読込みする必要があり、大量の画像をまた読み込むハメになって辛かったので、
imgタグを全部最新のものとreplaceする機能もつけた。画像は既にブラウザが持ってるので差分だけ引っ張ってくれる。次の日にシコるときにはプレイリストを削除する運用。
komifloのビューワも良いところはあって、
- 見た目が素敵
- その作品の一覧がサムネで見れて移動できる
- その雑誌の作品一覧が一覧で表示できて移動できる
この辺は真似したくて、いい加減ピュアなjs,css(sass)の小手先だけだと辛いので、
せっかくなのでviewerを独立させてAngularDartで作りたい。
作品のviewer部分は操作しないと分かりづらいのでスクショは撮らない。よく考えたら18禁なだったのでモザイク。
dmmは同人を電子で買うと、サークルによってはjpg, pdfでもダウンロードできるようになっている。上の画像はそれ。
要件的には
- 本一覧の表示
- 本をお気に入りできる
- 履歴を表示
- 著者、サークル、タグが設定できる
- 本情報を編集できる
- 本のページを見開きで表示
- モバイルでも操作可
とかとか。そもそもこれを最初に作ったのは4年くらい前か。
sinatraで第一弾を作って満足してたんだが、段々ファイルが増えてきてもうsinatraの領分では無いのでは?
という気がして、railsの勉強がてら作りなおそうというのが第二弾。
その後、色々勘所が分かってきて、勉強の試行錯誤の後とかかなりゴミが溜まっていて、
今の知識ならもっとキレイに作れる！という気持ちで作ったのが第三弾。
その後転職して、railsを業務で使えて、テストもかけるようになったし、
第三弾までは見た目が非常に悪かったのを今ならキレイに書ける！という気持ちで作り直したのが第四弾(現行)。
実際、第四弾は1週間くらいでテスト含めて実用できるレベルまで作れた。
その後もチョコチョコ修正を加えてより便利になっている。
でまぁ最近、komifloというのが出てきて、俺が作ってるやつやんけと思い使ってた。
どうにもビューワーがゴミで、俺の作ってるやつで不満点を解消させてやろうという決意をした。何が駄目かと言うと、
- 作品ごとに読み込み
- シコってる時に「THE END」と出てくる謎仕様
- 複数作品を一気に読めない
- シリーズものはとか、間に余計なものは要らない
- 先頭のページに戻るのがだるい
- 作者の作品一覧からだと並び替えが出来ない
- シリーズ物が3->2->1という順番でしか連続で表示できない
- 星マーク(お気に入り)とハートマーク(Like)の違いが意味不明
で、自分のviewerで改善策を実装してみた。
スクショ...は分かり辛いのでやめた
OnTheGoとかネタみたいなModelを作ったが、プレイリストを作って作品を全部連結させてるだけ。
実際全部の表示には時間かかるが、その日その日のオカズはたかだか10作品程度しかないはず(1作品20ページとして200枚の画像、1ページ2MBと考えても大したことない量)で、lazyloadしているから特に待ち時間は発生しないし、重くても一度読み込んでしまえばどうでも良い問題。
シリーズ物は間に「THE END」みたいなエロゲの中出し外出し選択肢みたいな余計なものは無く、スムーズにシコれる。
更に、ループ機能をつけているので、4作品目の最後のページが右にあって1作品目の最初のページが左にある状態が作れるので便利。作品ごとの並び替えは当然できる。
一つ問題があって、プレイリストを表示後に、別タブで別作品をプレイリストに追加したり、プレイリストの並び順を変えると、
プレイリストを表示しているタブで再読込みする必要があり、大量の画像をまた読み込むハメになって辛かったので、
imgタグを全部最新のものとreplaceする機能もつけた。画像は既にブラウザが持ってるので差分だけ引っ張ってくれる。次の日にシコるときにはプレイリストを削除する運用。
komifloのビューワも良いところはあって、
- 見た目が素敵
- その作品の一覧がサムネで見れて移動できる
- その雑誌の作品一覧が一覧で表示できて移動できる
この辺は真似したくて、いい加減ピュアなjs,css(sass)の小手先だけだと辛いので、
せっかくなのでviewerを独立させてAngularDartで作りたい。
