napo0703/wakaruland

ここは、心の中のリアクションがわかる世界——

wakaruland's Issues

Gyazo画像の利用

• わかるらんどで画像を用意する必要は無いのでは?
• 「わかる」などのGyazo画像のURLだけデフォルトとして用意しておけば良いような
• ユーザは個人的に使うものを追加できるようにする

ボタンが多い

どれがなんだかわからんど

リサイズしたときの並び替え

ウィンドウをリサイズするとグリッドサイズを計算しなおす

投稿画面とグリッド画面をひとつにする

ふだんはグリッド画面を見ながら時々投稿する場合、グリッド画面から投稿できると楽だと思う。
ページ内遷移でもいい。

.gitignoreがおかしい

.jsでsrc/.jsが除外されてる

長方形のリアクション画像をセル内に収まるようにする

現在の実装は正方形画像を表示することしか想定していない。
自分で追加したスタンプ画像とかはoverflow: hidden;してはみ出る部分を表示しないようにしてたけど、長方形画像はサイズを確認して長辺を100%にするようにする。

babel導入

ES6で書こう

URL仕様検討

• http://wakaru.land/masui でmasuiの表示/入力
• http://wakaru.land/masui,napo でmasuiとnapoの表示

ぐらいでどぉ?

リアクションの表示時間を変えられるようにする

現在は30秒間表示してるが、一覧から選んでリアクションするときに表示時間を選べるようにする。
とりあえず、

• クリック -> 30秒
• 長押し -> 30分
• 超長押し -> 消えない

で実装してみる。
表示時間は検討する。

汎用通知システムにする

個人の一時的な感情 (e.g. 「わかる!」) だけでなく、個人の状況 (e.g. 「会議中」) やシステムの状況 (e.g. 「トイレが空いてる」「メール来てる」) なども同じように扱えるようにするとすごく汎用になって嬉しいかも

デフォルトで用意するアイコン検討

研究会とかで使ってみて使用率の高いものを調べる。

改行キーで画像追加

画像URLを入力した後、リターンを押すと追加してほしい

一覧の表示を考える

• 画像は正方形
• 名前（Twitterアカウント）とアイコンは常に表示

リアクション文字に色をつける

思いつき。
そもそもいるのか検討。

グリッド表示を起動したとき、現在投稿されてる画像を表示する

初期画面しか出ないみたいなので

顔アイコン表示

• TwitterやFacebookに登録されてる顔アイコンは表示したい
• 「わかる!」などのアイコン表示してないときは顔アイコンを薄く大きく表示しておくとよいかも

wakaru.land 取得

高いけど...

setInterval() => setTimeout()

setTimeout(func,30000) にするべきでは

長押し時にドラッグするとバグる

デルタの明るさが反映されていない

投稿画面の設計

こんな程度でどうか?

• 単独表示を行わない
• リアクションメニューをなくす
• 画像を足したり削除したり簡単にできるようにする
  • URLを入力して「+」を押すと追加される
  • 「-」を押すと現在選択中のものが削除される

スクロールしなくてもボタンと画像が全部表示されるように

グリッド画面にウインドウを小さくてしたとき画像とボタンが全部表示されるようにしてほしい

スタンプの削除

Gyazo URLの拡張子省略

表示時間の設定をノンリニアにする

段階的に20秒ずつ増やすのではなく、指数的に連続的に増やす方がいいのでは。

Twitter認証の導入

現在の仕様だと、例えば私が@masuiで発言することができてしまう。（悪く言うとなりすましができる）
特に害は無いのですが、本当にその人がリアクションしたという証明のためにも認証を導入すべきだと思います。
TwitterのIDとアイコンをユーザ一覧の表示に使ってますし、Twitterの外部アプリ認証がいいのではないかと思うのですがいかがでしょう？
本人確認に使うだけで、もちろん勝手にツイートさせたりするわけじゃないです。

要素の重なり順序がおかしい？

FireFoxで投稿画面が動きません。
Safari,Chromeでも動かなくなる時があります。
ボタンや画像は表示されているけどクリックできない/ドラッグで選択できないので、クリックイベント等が下のレイヤに伝播してないからだと推測しています。
z-indexとかだと思うのですが…

リファクタリング

自分ですら読むのがつらくなってきた。
コードレビューや開発環境の見直しなどアドバイスあったらお願いいたします:bow:

画面の再設計

• 投稿画面とグリッド画面はトグルにする
• URL追加テキストボックスは、追加ダイヤログで出す (ふだんは表示しない)
• 画像を黒枠つきで表示するのをやめる
• グリッド画面のアカウント追加/削除は不要ではないか
• 時間指定バーはクリックしてるときだけ表示すればよい

みんなのリアクションを一覧表示する

PC版の右側か別ページでグリッド状に並べたい。
最終的には、

• masuilab.wakaruland.com で masulab グループの人のリアクションを一覧表示する
• masuilab.wakaruland.com/napo にアクセスしたら napo という名前で masuilab グループの人たちにリアクションできる

というふうにしたい。

Web Speech API

PC版はブラウザで喋らせてもいいのでは

• https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API
• https://www.audero.it/demo/speech-synthesis-api-demo.html

クリックした画像がトップにくるよう並び替える

• 一番トップのものが左上に大きく表示されるようにする
• その上で時間バーを表示する

サービス名を変える

これだけじゃ全然わかるらんどじゃない

画像削除するとき確認ダイアログをつける

うっかりクリックして削除しないように

スマートフォンで長押しの認識ができてない

こうなってしまう

ローカルで動かせない

時間経過の表示と巻き戻し

• グリッド画面で、値や画像がどう変わったかをsparklinesで表示する
• 時刻スライダを使って昔の表示が見られるようにする

グリッド画面と投稿画面の移動

• グリッド画面をクリックすると投稿画面に移動
• 投稿画面にグリッド画面へのリンクを用意 ... は無理か

リストを引数で指定

http://wakaruland.com/masui,napo,shokai
みたいな感じ?

テキストのスタンプ化改善

• フォントを太くする
  • ブラウザによって見え方が違ってる
• 全体的に下にずれてるのを直す
  • フォントサイズと位置の調整
• 絵文字をスタンプにする
  • 4バイト文字1文字が2文字として認識されてるっぽい

しばらくリアクションしなかったら一覧からリアクションを消す

30分前の「神」とか残ってるとよくわからんど

入力デバイスを作る

リアクションは平仮名でもいいのでは

ローマ字ではなく。

人間が読みやすいし、音声出力もさせやすい
ロシア人はロシア語でリアクション登録できる

わかるらんどAPI

自動で画像を投稿できるようにするするAPIが欲しい

リアクションのアイコンを動的に生成する

今は16種類の960px正方形画像を用意してるだけ。
LINEスタンプ的に使えるように予め用意しておくものにプラスして6文字くらいまでのアイコンをテキストボックスに入力した文字から作れるようにする。

欲しいスタンプリスト

はい開示

画像クリックしたらすぐその画像を表示する

mousupしてはじめて表示されるのは変だ

READMEの概要

もっと心に響く「概要」をお願いします

表示時間の指定方法

• 色だとわかりにくい
• アナログに指定できてもよいのでは? (e.g. 長押し時間×10秒間表示する)

文字のフォントサイズ

Last OPEN その他の文字サイズが固定なのでスマホで綺麗に見えない