PWA製のAAビューワを作ったよ - 1515385408

1：sage：2018/01/08(月) 13:23:28 ID:6q2DoJnI: 年末年始を使ってPWA製のAAビューワを作りました。
感想等聞かせてもらえれば・・・
ttps://aahub.org/

機能
・やる夫スレ用MLT収集所のまとめzipの内容のビューワです。
・ディレクトリ、ファイルの検索ができます
・AAを画像に変換できます。色の変更も可
・閲覧履歴があります（50件まで）
・タグ編集はできるがタグ検索はまだできません(DB製作中・・・)
・「ホーム画面に追加」ができます（スマホのみ）
2：普通の名無しさん：2018/01/08(月) 13:25:29 ID:6q2DoJnI: すいません。
sageの仕方を間違えるミスを犯しました。
3：普通の名無しさん：2018/01/08(月) 13:47:32 ID:6q2DoJnI: 改めて、
スマホでもAAを問題なく見たかったため作成しました。
ツリー表示等はAAMZ Viewer様を参考にしました。
使ってるフレームワーク(Ionic)の仕様上、AndroidとiPhoneでサイトの見た目が変わります。

検索はスマホの機種が古いと重たく感じるかもしれません。
あと、サイトのサイズが大きめ(約10Mb)なので3Gだったりすると初回読み込みに時間がかかるかも・・・
4：普通の名無しさん：2018/01/08(月) 14:02:52 ID:uREWtB2E: ワンクリックでAAのコピーはできないのでしょうか
5：普通の名無しさん：2018/01/08(月) 14:09:21 ID:6q2DoJnI: 以下の手順でクリップボードにコピーできると思います。

◯手順
・各アスキーアートの右側にあるオレンジ色のボタンを押す
　↓
・「コピーする」を押す

参考画像
ttps://i.imgur.com/RzhBiWB.png
6：普通の名無しさん：2018/01/08(月) 14:16:16 ID:uREWtB2E: 回答ありがとうございます。
つまりワンクリックでは出来ない、というのがこちらの認識です
7：普通の名無しさん：2018/01/08(月) 14:27:23 ID:6q2DoJnI: なるほど、たしかにワンクリックじゃなかったですね・・・

ちょっと「コピーする」ボタンをメニューから外出しするのも考えてみます。
例えばこんな感じで
ttps://i.imgur.com/S7J3n3J.png
8：普通の名無しさん：2018/01/08(月) 14:41:10 ID:uREWtB2E: Windows7 のFirefoxで見ました。表示が早いのがいい。文字サイズ下げてもすぐに描画されるし。
やる夫スレの制作者の立場で言うと、複数タブ開いて覚えておいてくれるのと、
ブックマークができればまずは充分かな、と。

iPhone SEの標準ブラウザでも見てみました。サクサク動きますね。画像変換もできてます。良いと思う

ただ、>>1さんが何をしたいのか目標を明確にして次何をするか決めるのが良いと思います。
どういう使用シーンを想定しているのでしょうか？　たとえばツイッターにAAを画像変換して投稿して、
コミュニケーションに使ってほしいとか、そういうイメージがあった方がいいですね
9：普通の名無しさん：2018/01/08(月) 14:41:59 ID:uREWtB2E: 以上です。ご参考までに。では失礼します
10：普通の名無しさん：2018/01/08(月) 14:56:56 ID:6q2DoJnI: >>9
感想ありがとうございます！

最初はスマホ対応のやる夫スレエディタ＆ビューワを作りたかったんですが、色々ハマりまして・・・。
まずは、AAの扱いに慣れようと思い本ビューワを作成したという経緯です

AAビューワとしての今後の展望は、以下を考えていました
・簡単なAA編集機能
・他サービス(Twitter、LINE等)でもズレない対応（画像化以外でも）

最終目標はスマホでやる夫スレ作成＆閲覧なのでやる夫スレ作者さんにとって使いやすい方向に
変更していければと思います
11：普通の名無しさん：2018/01/08(月) 18:33:55 ID:9tZbSdxo: あまり機械には詳しくないのですが、これはタブレット端末でも使えるものでしょうか？
12：普通の名無しさん：2018/01/08(月) 18:45:51 ID:6q2DoJnI: >>11
基本はWebサイトなので普通に使えると思います。
ひょっとしたら表示崩れをおこしたりスクロールがしづらかったりするかもしれませんが・・・
13：普通の名無しさん：2018/01/11(木) 12:41:29 ID:ILu6tGSc: ちょっと変更のお知らせ。

とりあえずコピペと画像変換のボタンを追加しました
参考：ttps://i.imgur.com/spljBt5.png

タグ＆タグ編集は飾りなので一旦消しました。一様メニューからタグ編集へ飛べるようにしています。

今週末に、コピペ履歴とブックマークを実装してみたい。
タブ表示は検索バーとの兼ね合いをもうちょっと考えてから取り組んでみます。
14：1：2018/01/11(木) 15:43:43 ID:c7DrEFpU: >>13
変更されてないよ！って場合は、おそらく前回表示時のキャッシュが残ってると思います。
1日ぐらいで変更反映されると思う。もしくはシークレットタブで見てもらえれば・・・。
15：普通の名無しさん：2018/01/12(金) 06:58:32 ID:a15iVwSU: なかなかいいと思う。
16：普通の名無しさん：2018/01/12(金) 11:59:37 ID:a7pySSPg: >>15
ありがとうございます！

あと、スクロールバーを表示するように変更しました。
AAの数が多いときスクロールできないのが不便だったので・・・。
17：1：2018/01/13(土) 18:39:53 ID:sjuB/wBo: 本日、サイトを更新してコピペ履歴とブックマークを追加しました
来週末あたりにタグ検索かタブ表示を追加したい
18：普通の名無しさん：2018/01/18(木) 18:11:47 ID:rko5FpNY: スマホからでも開けるんだ！すごーい！
19：1：2018/01/19(金) 02:17:29 ID:u6OUGY7U: >>18
わーい！
　　　　　ハ　/ヽ
.　　　　　〃}: V:.|ヽヽ
.　　　　 ∥ﾐ|: :|: |,､,, ',',
　　　　 {{ミ」: :!: {__< }:}ﾄ､
. 　　　 /: ＿^: :^＿: : : : V
　　　　 ,' : :从: : : :从: : :Y: :V
　　　　 {: : { ∩ﾄ､:{∩}: :ｲ: : :|
.　　　　乂:ゝ∪ 　 ∪'ｲﾉ : ﾊ!
　　　　 V､:ゝ｡_ﾏﾌイ从ﾊ'
　　　ｧ― ､/:l_仝_.|-|　　　 ,ｨ''~ﾊ
　　　ヽノ`～,廴/､,,_人＿∠_: : :ﾉ
　　　　 ┌―''"o爻 o ﾟ o :ｏ〈イ
　　　　 <〇 °O 　O　o〇<
　　　　　　ゝ､〇_:_:◯､､彡´
.　　　　　　 |: : |　 |: : |
.　　　　　　辷ｿ　辷ｿ
20：1：2018/01/21(日) 20:32:38 ID:LvimuJHw: ちょっと変更のお知らせ。
　　　 ∧＿∧
　　　（　´_ゝ`）
　　／　　　＼
　　/　　　/￣￣￣￣/
＿_(__ﾆつ/　 FMV　 /＿＿＿＿
　　　＼/＿＿＿＿/

タブ表示に対応しました。

以下が大まかな変更内容です。
・ブックマーク、閲覧履歴はサイドバーに表示
・コピペ履歴はタブとして表示
・検索バーはリストの一番上に。あまり使われていないようですが・・・。
・フォントサイズ、カラーの変更は常に右上に表示するようにしました。
※変更されてないよ！って方はキャッシュを削除してもらえれば・・・。

2月には以下の変更をする予定です。
・開いたタブバーはブラウザを閉じても消えないようにする
・ちょっとした編集機能
21：普通の名無しさん：2018/01/21(日) 20:46:47 ID:817.fPcY: 更新お疲れ様です
フォルダごとブックマーク出来るようになると実用性増すかも
22：1：2018/01/21(日) 21:18:31 ID:LvimuJHw: >>21
ありがとうございます！
なるほど、フォルダのブックマーク良さそうですね・・・
　　　 ∧＿∧
　　　（　´д`）
　　／　　　＼
　　/　　　/￣￣￣￣/
＿_(__ﾆつ/　 FMV　 /＿＿＿＿
　　　＼/＿＿＿＿/

今のブックマークの仕組みを流用すれば割りとすぐできるかも・・・。
明日あたりにひっそり追加しておこうと思います。
23：普通の名無しさん：2018/01/21(日) 22:53:02 ID:817.fPcY: おお、要望言ってみるものですね…！お返事ありがたいです。
macユーザーとしてはウィンドウズ並のMLT管理ソフトの環境が羨ましかったので
こういったブラウザ形式のMLTビューワの選択肢が増えることは嬉しいことだったり。軽くて使いやすいので重宝させてもらいます。
24：1：2018/01/22(月) 00:22:33 ID:VzHZARBI: やっぱり、リアクションがあると普通に嬉しいですね

　　　　＋　　　　・　＊
　*　　　・　　+　　　・
　　+　　　　　　*　　+
　（（（⌒j　・　　　
　・　/　∧＿∧ 　
　　（　（　´_ゝ`）　
　　　＼　　　　＼　　　
　 *　.｜　　/￣￣￣￣/　
　＿_｜　　/　 FMV　 / ＿＿＿＿
　　　　＼/＿＿＿＿/　

それに、私もmacユーザーなのでAA環境の乏しさはよくわかります。

今は、開発環境の関係もあってmacファーストで開発。その後Windowsで動作確認って感じです。
実はChrome一部動作が重くなっちゃうMLTもあるのですがsafariだとサクサク動いたりします。
25：普通の名無しさん：2018/01/22(月) 16:11:51 ID:oy6aUQJ.: Macユーザー向けの制作環境整えるって方向性良いね👍
26：1：2018/01/22(月) 19:43:25 ID:VzHZARBI: >>25
MacだとAA関連は動かないソフト多いですからね・・・。
なるべくMac向けのAA製作環境を増やしていきたいです。

そして変更のお知らせ。
　　　 ∧＿∧ 　
　　　（　´_ゝ`）
　　／　　　＼　　　
　　/　　　/￣￣￣￣/
＿_(__ﾆつ/　 FMV　 / ＿＿＿＿
　　　＼/＿＿＿＿/

フォルダのブックマークをできるようにしました。
あと、ホーム画面にバージョン表記を追加しました。

今回のバージョンは『v0.1.0』です。

あと、たまに読み込みの関係で表示がバグるっぽいです。
その時は更新するか、URLを入れなおすかしてもらえれば・・・。
ttp://aahub.org
27：普通の名無しさん：2018/01/22(月) 23:34:24 ID:yV5s.o7M: お疲れ様。使いやすくていいね
28：1：2018/01/23(火) 00:34:12 ID:n8kAlKsw: >>27
使いやすいと言ってもらえると幸いです。
特に今回、タブ表示周りに苦心したので・・・。
　　　　　　_
　　　　　　_||
　　　　　(⊂|
　　　　　/ /
　　　　 / /
　　　 ./ /　　　　
　　　/ /＿∧ 　
　　/ / *´_ゝ`）　
　　|　　　　＼　　　　
　　|　　 /￣￣￣￣/　
_＿|＿__/　 FMV　 / ＿＿＿＿
　　＼ /＿＿＿＿/　

あと、サーバー側もちょっと修正入れてMLT配信時
圧縮して配信するように変更しました。

いわゆるgzip圧縮です。もっと早くやっておくべきでした・・・

今までの半分くらいサイズになるので表示も少し早くなるはず・・・。
29：普通の名無しさん：2018/01/23(火) 23:19:35 ID:QN2OSop.: ttps://i.imgur.com/PFVF08j.png
スマホ横にしても見やすくていいね
まだ知名度低いけど今後とも期待してるよー