ver5.0 へのアイデア

[amutake]

ver5.0に向けて

2015年終わりから2016年はじめくらいに完成させたい。ver4.1でも安定して動いているのでそんなに急いでいない。

ちなみに今までのバージョン履歴はこんなかんじ

• ver1.0
  • ~2010 (案内人まで。現在 old.satsukita-andon.com として残っているもの)
  • HTML 直打ち
  • 無料レンサバ (分散)
• ver2.0
  • 2010 (甲乙人共有時代。サーバ容量1GB制限で消えるまで。この頃までは旧URL)
  • ホームページビルダー
  • 無料レンサバ
• ver3.0
  • 2011 (甲乙人の中の人が1人に。satsukita-andon.com を取得)
  • HTML 直打ち
  • Dreamweaver でテンプレート作ってやってた
  • 有料レンサバ (ロリポップ)
• ver3.1
  • 2011~2013
  • PHP + MySQL
  • 初めてクラスのページを自動生成に
  • 有料レンサバ (チカッパ)
• ver4.0-pre
  • 2013 (リリースはしていない)
  • Haskell/Yesod
• ver4.0
  • 2013
  • Scala/Play
  • アカウントを作り、すべてサイト上で更新可能に
  • VPS (さくら → お名前)
• ver4.1
  • 2014
  • ver4.0 に git を使った編集履歴機能、Elasticsearch を使った全文検索などを追加

今後は semver でちゃんとバージョンをつけてタグうったりしていきたい。 次のバージョンを v1.0 としてもいいかも。

アーキテクチャ

今回もモダンな Web アーキテクチャの実験台にする。

• プログラミング言語および WAF の選定
  1. (型)安全性
  2. パフォーマンス
  3. 開発のしやすさ
  4. 勉強したい言語
• データベースの選定
  • ハイパフォーマンス
• クライアントサイド
  • bower などを使う
  • リアクティブ？
  • AltJS の選定

    機能

• https
• 全文検索
• 記事を完全に Git ベースに
• Web API 提供
  • OAuth2
• Markdown エディタ
• チャット
• Android/iOSアプリ

  デザイン

より洗練させる。

ユーザーはほとんどスマホなので、スマホでも見やすくする。

開発方法

コンポーネントごとに徐々に変えていける感じだとモチベーションを保てる。

[amutake]

現時点 (2014/11/21) では、

言語

• 言語: Scala
  • メリット: Java の資産のお陰でいろいろそろってる。パフォーマンスもけっこう良い。型の表現力けっこうある。既存のコードを使えるので、一部だけ置き換えるとかできる。
  • デメリット: 既にある程度は使える。コンパイル遅い。起動遅い。なんかいろいろでかいイメージ。あとコンパイル遅い。
• WAF: akka-http (フレームワークではないけど)
  • apray.io が deprecated になって akka-http になるらしいので。

もしくは、

• 言語: Rust
  • メリット: 覚えたい。パフォーマンスいい。そこそこ型の表現力があって安全っぽい。
  • デメリット: いろいろライブラリとかなさそうなのでなかったら自分で作るくらいじゃないといけない。
• WAF: わからない (iron とか？)

DB

未定。パフォーマンス重視。分散は、マシンを1ノードしか使わない気がするのでなくてOK？

NewSQL とか？

クライアントサイド

flow + React でやってみたい。パッケージマネージャは bower、ビルドは Gulp

[amutake]

http://techlife.cookpad.com/entry/2014/09/24/092223 みたいに Elasticsearch の more like thid 機能を使って、似た行灯を見つけたりとか。

[amutake]

Rust けっこう難しいので、Scala でもいいかもしれない。

[amutake]

各クラスの資料 (SketchUp や動画など) は Howto ではなくギャラリーのクラスページに載せる。(クラスページは写真だけではなくなる)

行灯の点数も載せたい

[amutake]

frontend

デザイン

参考にしたいサイト

• http://ryokan-umitomori.com/
  • 雰囲気いい
  • 画像をタイルにするとこ参考にできそう

mobile friendly

• ユーザのほとんどはスマホから
• https://developers.google.com/web/fundamentals/

Framework

mizchi/arda を使ってみたい

CSS Framework

• Twitter Bootstrap
  • jQuery
  • 普通すぎ
• pure
  • no js
  • メトロっぽい
  • テーブルがあんま好きじゃない
  • 個別に読み込めるらしい (Grid だけとか)
• skeleton
  • no js
  • 全体的にいいけど、足りないかもしれない
• materialize
  • jQuery
  • でかい
  • material design
• react-bootstrap
  • twitter bootstrap が React のコンポーネントになってる
  • props どんなのあるかドキュメントにないのでわからない
• material-ui
  • マテリアルデザインのが React のコンポーネントになってる
  • Grid とかないので他のを使わないといけない

Gallery / LightBox

fresco いいけど、重いので変えたい。あとぶっ壊れそうなので jQuery 依存にあんまりしたくない

• featherlight
  • jQuery
  • iframe にも使える
  • width で固定。縦に長い場合はスクロールしないといけない。
• Fluidbox
  • jQuery
• http://codepen.io/nakome/pen/euFiI
• http://codepen.io/anon/pen/xbRwKg
• http://codepen.io/yashrg/pen/lkFws
• http://codepen.io/stursby/pen/freda

これらを参考にしながら React コンポーネントを自作しても良さそう

ビルド

Webpack (+ Gulp)

管理画面

管理画面は通常画面とは違い管理画面っぽくする。管理画面っぽいほうが操作性上がりそうなのと特別感ある。

Isomorphic

にする

[amutake]

機能要件

• 検索機能の拡充
  • 検索エンジンを使う
  • クラスだけではなく、記事の検索も可能に。
  • 行灯題名・紹介文も
• チャット
  • 質問版の廃止
• クラスに対して複数の賞を設定可能に
• クラス固有の資料はクラスページへ
  • タイトルや紹介文など
  • 講評
  • 写真
  • SketchUp や PDF など
  • 動画 (YouTube)
  • 点数
  • 記録・感想
• Android / iOS アプリ
  • 写真、記事閲覧
  • チャット
• アカウント機能
  • アイコン
  • 権限を柔軟に設定可能に
  • 自分のクラスは初回のみ設定可能
• 記事のレベルを明示
  • 初心者向け、上級者向けとか
  • 現状は1個しかタグ付けられないけど、2個以上つけられるとかでもいいかもしれない
• 更新をTwitterで知らせるかどうかのチェックボックス的なの
  • すべての更新は Slack へ。チェックボックスにつけたものは Twitter も。
• アカウント凍結
  • いきなりBANする前に凍結を挟む
  • この人の記事は一時的に見れなくなる
• アカウントを持っている人用の記事
  • test.satsukita-andon.com, github.com/amutake/satsukita-andon.com/wiki にあるような記事を、管理画面に入れる人しか見れないところに書けるようにする
• 記事の下書き・一時的に非公開に

要検討

• チャット
  • ログイン必須にする？偽れないようにしたい
  • アカウントを招待制ではなくする？
  • もしかして IRC とかでいい？難しい？
• Howtoをもっとスケーラブルに
  • 昔の記事とかほとんど見られない
  • これから記事が多くなってきたら、もっとわからなくなる
  • 検索使えばまあ
  • いいねとか使って人気度順に表示したりとか
• クラスページもスケーラブルに
  • 講評が長いと写真までのスクロールが長い
  • 写真が多いと時間がかかる。Twitter みたいに動的ロードとかにしたほうがいい。
• Google Drive みたいに、各記事・資料に対して owner, editors をつけられるようにする
  • owner: User, editors: All or List[User]
  • owner は作成者だけでいい？
  • クラスアカウント・共用アカウントの廃止
• アカウント招待制の廃止
• 記事の一時保存
• 「新しい回を作る」ページ
  • 一気に「タイトル」「読み」「紹介文」を作成できる
  • Google Form みたいに、+ ボタンがあってそれを押すと1年1組、1年2組...と増えていく感じ

[amutake]

Server side

言語

以下のライブラリがあるもの

• websocket
  • チャット用
• Twitter
• Git
  • 最悪 git コマンドを直接叩いてパーズすればいい
  • だいたいの言語はある https://github.com/libgit2/libgit2#language-bindings

[amutake]

organization にしてリポジトリを分割するようにしてもいい。 バージョンが上がるので特にリポジトリの移行もしなくてよさそう。 バージョンも0.1から始めてもいいかも。

[amutake]

Authentication

OAuth は当分なし。特にアプリケーションがどんどん作られるわけでもないし、暇になったらやってもいい程度。 JWT を使ったアクセストークンだけで十分。

1. sign in
   1. client - credential (username, password) -> server
   2. server - access token (jwt) -> client
   3. client saves the access token into cookie
2. API call
   1. client - call with access token -> server
   2. verify and extract the access token
   3. if (the access token is valid && not expired) then { return resources with refreshed access token } else { 403 or restricted resources }

思ったけどいちいち refresh したトークンを返すなら有効期限が設定されていないのと同じなので意味ない

[amutake]

Development Flow

1. API server
   1. access_token filter
   2. API documents
2. API client library written in JS
3. replace client
   • the same design
4. update design

[amutake]

https://github.com/satsukita-andon

[amutake]

権限

• [ ] アカウント凍結・解除
• [ ] アカウント強制削除
• [ ] 記事作成・編集 (すべて or 編集者 or 不可)
• [ ] アカウント権限変更
• [ ] クラス作成・削除
• [ ] 回作成・削除

メモ

• 画像のアップロード・削除・トップ画像の変更
  • 基本どのクラスにもアップロード可能
  • 自分が上げた画像は削除可能
  • 自分のクラスの画像はすべて削除可能
  • 自分のクラスだけトップ画像の変更可能
  • 管理人はすべて可能
  • image: none, normal, all?