milieu-san / prot_works Goto Github PK
View Code? Open in Web Editor NEWプロット(シナリオの骨組み)管理アプリ
Home Page: https://prot-works.herokuapp.com/
プロット(シナリオの骨組み)管理アプリ
Home Page: https://prot-works.herokuapp.com/
ユーザーにとってつかいやすいエディターに調整する
エディターの
・フォントサイズ変更
・フォームサイズ変更
・ダークテーマの追加
を実行する。
より使いやすく、入れ替え機能をつける
デフォルト=>月間のお気に入り数
->日間、年間、トータル、お気に入り
=>メジャーなジャンル、メディアごとに表示できる
何らかの形で本文をローカルに保存させる。
(+α何らかの形でプロットのエクスポート、インポート機能を作る)
エディター、プレビュー両方にたいして、
本文中に付箋を貼り付け、物語上の意図、伏線などを補足できる付箋機能を実装する。
色ごとに使い分け、
ノードの本文も参照できるようにする。
本文やタイトルのあいまい検索を実装
・基本的なCRUD
・プライベートプロットは作者以外には存在を認知されない
・作者以外はプロットを編集削除できない
ユーザーが参照できる公式情報を発信できる機能を追加する
・公式へのお問い合わせ
・機能更新の報告
・各種情報発信
・使い方ヘルプ
検索、投稿時に
普遍的に広く使われるジャンルやメディアを選択式で表示
多く使われているそれらをサーバーサイドで集計して表示
入力中にメジャー、よく使われているものを予測変換で表示
バリデーションに引っかかった時、
他の操作を誤って行った時、
エラーを出した時、
(+α 削除した時)
編集中の本文が破棄されるような事故を防ぐような構造にする
表題の通り、
あくまで個人制作アプリのため、migrationファイルは不要
また、テーブル構成を明確にするため、anotateも導入する
ツリーと本文の左右対比
フォントの大きさ
ツイッターのフォローやお気に入りのように
スターは両方
ハートは与えたもの
グッドも与えたもの
すでに使われているニックネームを赤く表示する。
ついでに特定の記号を許容する
あいまい、評価多い順、投稿順
マイページ、プロフィール共に表示する。
エディターのcreate rename delete menu
のボタンをサイドバー OR ドラッカブルにする。
-背景
ユーザーの編集しやすい環境の整備
・user profile edit 時、iconのプレビュー jquery
・sign_up時、nick_nameの有効判定 jquery
・sign_up時、nick_name 説明
・user profile show 持っている全てのハートスターグッドの数を表示する
・評価の高いレビューで並び替え。
・ローカルでファイル保存したい
(自動セーブ欲しい。もしくはセーブしないと動けないようにするとか。確認を挟むとか。
ノードのパラグラフやフォントの読みやすさ、機能を追求する。
マークダウン が反映されるとか。
箇条書きがボタン一つでできるとか)
・routingのnestをmoduleする。contorllerもネスト
・controllerで共通のメソッドはまとめて継承する
・nodeの自動保存。ローカル保存
・各機能セキュリティー
プロットのバージョン管理を行えるようにする。
・同じプロットを複製
・バージョンの任意設定
・一覧表示
・(編集履歴、編集箇所の保存)
-作成背景
1 結末まで公開したくない場合、任意の範囲まで記述したコピーを作り公開。ネタバレの心配なくレビューをもらう
2 別パターンを記述したい場合、プロットを複製して編集前の状態を別のプロットで保存する
3 (レビューを受けて編集した箇所を明示する)
具体的な使い方を初回ログイン時に一通り説明する。
チュートリアルは選択可
主な流れ
ノードの編集方法
レビューの際の注意点
評価の仕方
初めて機能を使う時にそれぞれの機能ごとに表示させるのが最適か?
管理ユーザーを設定し、
ユーザーのブロック機能や危険ユーザーの行動を制限する機能を追加する
Node.model
カラムはスプレッドシート参照
Node.controller
・一つのプロットを親に持つ。
・そのプロット以外のノードは絶対に取得しない。
・他人のプロットのノードはshowしか行えない。
・プライベートプロットのノードは絶対に取得できない。
・showのajaxはあらゆる編集を行えない
・全ての編集は親のプロットを変更できない。
・新しくノードを作成した場合、まずルートノードを作る。
・編集ページにナビバーを表示しない。
・編集ページはURLにIDを表示しない
アップロードした画像を保存する前に、円形の枠でのプレビューを表示する。
+α(画像のどの部分を切り出すかユーザーが変更できるようにする)
twitterログインの環境変数をcricleCIにセット。
iconカラムがnotnullなので、通常のファイル削除では実装不能
プロットワークスのトップページやアバウトページをわかりやすく、魅力的に伝える
トップページにスクリーンショットを追加する。
簡単にプロットのノードを複製し、別のプロットでも管理できるようにする。
・ノードの選択、コピー、ペースト
-実装案
-> 普通の編集機能とは別に、ノードの選択状態を作る
-> 選択状態は、クリックするとjstreeのselect_nodeが起きるようにする(選択したノードの子ノードもまとめて選択される機能も別で用意)
-> 配列でjsonで作成したオブジェクトが格納されるのでなんらかの形で保存(rails側でPGに保存?)参照、取り出しを行う。
ノードの本文情報の参照をjsonに依存しない形で実装するべき。
(現状、フォームにその都度jsonから値を取り出しているため、保存中に変更されるとバグが起こる)
解決策
1 入力イベント中は他の処理を一切禁止する
->一番手取り早いし楽。確実
2 入力イベントで発生したクエリのidプロパティをリクエストごとに固定させる
->今後の拡張性が最も高く、ユーザーの自由度も向上する
表題の通り、
テストデータの冪等性を担保し、拡張性、可読性を向上させる
webpackを使用してフロント(js.css)部分をすべて切り分ける。
その際にvueを導入する。
ツイッター、グーグルアカウントでのOAuth認証を実装。
twitter developer アカウントの作成
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.