Vimmersページのリデザイン案。

[hail2u]

カラフルなブロックで普通に並べるような形で一から作り直した。ローカルのJekyllで確認済み。

• フォントをLatoに
• ソーシャルアイコンはSVGに
• jQuery使わないので削除
• 全部同じ高さなのでmasonryを削除
• DISQUSいらなそうなので削除
• Facebookのいいねライブラリも不要そうなので削除

未実装の点:

• APIを使ってGitHubのアイコンを読みに行く
• short_nameの表示
• descriptionの表示
• SVGのフォールバック

確認したブラウザ:

• Chrome 34
• Firefox 29
• Internet Explorer 11
• Mobile Safari 7

うまく見えないであろうと思われるブラウザ:

• Internet Explorer 8以下
• Android 2.3以下

スクリーンショット:

[supermomonga]

+1 (〃l _ l)b☆

[heavenshell]

👍

[koron]

きになったこと

• どっかで preview できませんか?
• 表示順序ってどう決まってます? もとはランダムで先頭がBramになるようにしてたハズ。添付画像を見る限りだと固定にみえる
• ランダムならシャッフル機能が欲しい
• 未実装項目についてどうするつもりか? すぐにやるなら待ってからmergeしたい
• カードの高さを低くできませんか? /PCで見た時に、もっとたくさんごちゃっと表示して、沢山の人が関わっている感を出したい。

[koron]

あと、使わなくなったJSやCSSがあれば、ファイルを消しちゃって欲しいところ。

[koron]

あ～ 既存の vimmers を書き換えるのではなく
vimmers2 として追加する形だったら即mergeで良いです。

[koron]

全部同じ高さなのでmasonryを削除

masonry を使ってた動機には高さの問題だけではなく、アニメーションもあります。
ウィンドウ幅を変えた時やシャッフル時のごちゃっと感。
もし置き換えるならこの「ごちゃっと感」と「たくさんの人が関わってる感」は維持したいです。

vimmers2 として新規に追加するならこれらは無くても良いです。

[hail2u]

• プレビュー: http://hail2u.net/pub/test/559.html
• 順序は完全シャッフルなので、Bram先頭になるようにします
• 未実装項目について
  • SVGのフォールバック(とCSSの調整)はやります
  • short_nameとdescriptionはあまり実装するつもりはないですが、必要なら工夫して入れてみます
  • 全ロードしてる関係上、GitHub APIの消費が激しくGitHubを見に行くのなら今のVimmersページのようにランダムで一定の数を表示とシャッフル、全部表示の切り替えが必要そうです

カードのサイズは小さくするのは難しいというか、ごちゃっとしてて見づらいなーというのを改善したい感じで作り始めたので、これを小さくするとコンセプトがずれてしまいます。書いてなくてすみません。

アニメーションについては、デフォルトでシャッフルしての全表示になっていること、ウィンドウ幅の切り替えはやる人がごく限られていることから削除しました。

vimmers2として同じようなページを出すのは良くないと思うので、暇な時にもうちょっと色々やってみます。

[mattn]

個人的にはそろそろトップもデザイン変えたい感じ

On 5/11/14, MURAOKA Taro notifications@github.com wrote:

全部同じ高さなのでmasonryを削除

masonry を使ってた動機には高さの問題だけではなく、アニメーションもあります。
ウィンドウ幅を変えた時やシャッフル時のごちゃっと感。
もし置き換えるならこの「ごちゃっと感」と「たくさんの人が関わってる感」は維持したいです。

vimmers2 として新規に追加するならこれらは無くても良いです。

---

Reply to this email directly or view it on GitHub:
#128 (comment)

• Yasuhiro Matsumoto

[supermomonga]

全ロードしてる関係上、GitHub APIの消費が激しくGitHubを見に行くのなら今のVimmersページのようにランダムで一定の数を表示とシャッフル、全部表示の切り替えが必要そうです

現状、APIで取得したデータのキャッシュはさせてないんでしたっけ？

[hail2u]

https://github.com/vim-jp/vim-jp.github.com/blob/8264850738570cb9672faf0a4e844de1ce77baa9/assets/javascripts/import-vimmers.js#L99-L101

JSONPで逐一読みに行っていて、キャッシュしている様子はないですね。アクセスしたユーザーのAPI制限の消費なので、あまり良いとは思えないです。

[supermomonga]

あ、 github pages だからキャッシュさせようがないんですね…

[mattn]

heroku 経由なので heroku で一定時間キャッシュなら可能。

On 5/11/14, Kyo Nagashima notifications@github.com wrote:

https://github.com/vim-jp/vim-jp.github.com/blob/8264850738570cb9672faf0a4e844de1ce77baa9/assets/javascripts/import-vimmers.js#L99-L101

JSONPで逐一読みに行っていて、キャッシュしている様子はないですね。アクセスしたユーザーのAPI制限の消費なので、あまり良いとは思えないです。

---

Reply to this email directly or view it on GitHub:
#128 (comment)

• Yasuhiro Matsumoto

[hail2u]

vimmers.jsonはHeroku経由ですけど、GitHubのアイコン読み込みは、動的にGitHub APIのJSONPを直接呼んでるような気がします。

[koron]

ごちゃっとしてて見づらいなーというのを改善したい感じで作り始めたので、これを小さくするとコンセプトがずれてしまいます。

なおのこと vimmers2 にしたほうが良いでしょう。
vimmers のコンセプトが「ごちゃっと感」にあるわけですから。

vimmers2として同じようなページを出すのは良くないと思う

私はそうは思いませんよ。

Vimmers2 を見てみよう! (旧版)

みたいなリンクに変えるのはありだと考えています。

[koron]

個人的にはそろそろトップもデザイン変えたい感じ

それはそれで Issue 建てましょ…てかあった気もするけど。

[koron]

現状と今後の方針のまとめ

• 現状認識
• 現在の vimmers と現状の提案の 新vimmers はコンセプトが決定的に異なる
• そのため今のままでのマージはありえない(同じURLでコンセプトが異なるコンテンツを運用するのは好ましくない)
• 今後の方針
• 現在のURLで運用したいのであれば、新vimmers のコンセプトを現在のものに歩み寄せるか、もしくは「一から」ではなく現在のものを新コンセプトに歩み寄せる形で修正をやり直す必要がある
• vimmers2 のようにURLを変えての運用でよければ、現状の新vimmers のコンセプトは変えずに即マージ可(関連するリンクは随時書き換える)

[koron]

関連するリンクは随時書き換える

これはPRに含まれてると嬉しいw

[hail2u]

なるほど、僕がコンセプトをちゃんと理解してなかったことに問題がありそうなので、この形でなら別URLに変えた方が良いですね。

元のを復活させた上で、vimmers2/に移動させ、リンクを書き換えます。リンクは_layout/default.htmlのだけで良いんですかね？

[koron]

リンクは _layout/default.html のだけで良いんですかね？

私が把握している限りではそうです。
ですが、もし良ければ旧 vimmers のページに、
新ページへのリンクを追加してくれると嬉しいです。

[koron]

新ページへのリンク

このリンク「Vimmersがよりオシャレになりました!」みたいな文言とかどうだろ?w

[hail2u]

vimmersとvimmers2の相互にリンクを追加しておきます。

このリンク「Vimmersがよりオシャレになりました!」みたいな文言とかどうだろ?w

自分でオシャレって書くのは抵抗がありますｗ

追加する形のコミットログになるように、PRは作り直したほうが良さそうな気がしますが、どうでしょうか？

[koron]

追加する形のコミットログになるように、PRは作り直したほうが良さそうな気がしますが、どうでしょうか？

面倒でなければ、お願いします!

自分でオシャレって書くのは抵抗がありますｗ

事実だし、私は良いと思いますよw
もっと良い単語があればそれでも良いですよ…「モダン」とか?

[hail2u]

#129 でPR出しました。