peinan / coeic-fe Goto Github PK

再生機能

• 開いたら1コマ目が中心、2コマ目が右側に小さく出る。
• 自動で再生開始
• 現在のコマの再生が終わったら、現在のコマは左側へ、次のコマが右側から出てきて、再生開始。
• 最後のコマの再生が終わったら、停止する。
• １コマに対して複数wavがある場合の対応

その他

• 戻るボタンの実装（処理中画面からの遷移の場合は処理中画面に戻る、それ以外はアップロード画面へ）

router-linkをクリックしないと、computedの状態変化を検知できない...

• masterはプルリク必須
• developはforce push禁止
• slackへの通知
• 他あれば

APIもDBストレージサーバー側で用意することになったので削除する。

migrations/
models/
seeders/
src/api/
src/migrations/
database.sqlite

package.jsonからも下記削除

    "mysql2": "^1.3.6",
    "sequelize": "^4.3.2",
    "sqlite3": "^3.1.8",
    "sequelize-cli": "^2.7.0",

クロスドメイン対策

• GET
• POST（実装したけどテストまだ）

繋げれるようになったのから順次つなげていく。

• POST: /uploadedImg
• GET: /uploadedImg
• GET: /processedImg/:id
• GET: /voice/:id

• 仕様
  • 社内IPならアクセスを許可する
  • 社外IPならベーシック認証をかける
• 検証
  • 社内Wi-Fi環境（CN, GN）でアクセスできるかテスト
  • 社外環境でベーシック認証かかってるかテスト
  • うまくいかないところがある場合は、発表直前にprodの認証を解除するissueを立てる

社内IP

211.14.8.0 /24
211.14.26.0 /23
211.14.28.0 /23
203.141.54.0 /24
103.2.244.0 /22

• 使えそうなやつ
  • クライアントのip取得
    https://stackoverflow.com/questions/10849687/express-js-how-to-get-remote-client-address
  • range_check：ipアドレスが範囲内に入ってるか
    https://www.npmjs.com/package/range_check
  • routingの前に実行
    https://stackoverflow.com/questions/20175806/before-and-after-hooks-for-a-request-in-express-to-be-executed-before-any-req-a

■prodの認証を解除する方法
server.jsから下記を削除

const basicAuth = require('basic-auth-connect');

...略...

// prodではbasic認証 TODO 発表前に解除する
if (process.env.NODE_ENV === 'production') {
  app.use(basicAuth('coeic', 'hackday14'));
}

PVとかわかったら楽しそう

画像アップロード機能を実装する。

• feサーバ上にアップロードできるようにする。
• ストレージ上にアップロードできるようにする。

【参考】
jQuery.ajax()でファイルをアップロードする方法
http://www.koikikukan.com/archives/2014/09/30-013333.php
vuejs でFormData つかってファイルアップロード
http://uedatakeshi.hatenablog.com/entry/2017/06/02/143931
expressでアップロードされたファイルを受け取る
https://tyfkda.github.io/blog/2016/03/01/nodejs-web-server.html

src/router/index.js に下記追加し、NotFound.vueを実装すればいけるはず。

import NotFound from '@/components/NotFound';

mode: 'history',
routes: [
  { path: '*', component: NotFound }
]

参考
https://router.vuejs.org/ja/essentials/history-mode.html

こっちにする
https://stackoverflow.com/questions/36999461/how-to-install-only-devdependencies-using-npm

https://github.com/peinan/coeic-fe/blob/master/src/components/Hello.vue

• 再生をクリックすると再生画面に遷移させる。

下記コマンドで切り替えれる

$ heroku config:set AUTH=IP

クリックでもアップロードウインドウが立ち上がるようにする。

• コンポーネント導入、使い方把握
• 実装

• とりあえず再生できた
• ページ遷移したら止める

vueでコンポーネントを分割するための設計をする。