Git Product home page Git Product logo

coeic-fe's Introduction

coeic-fe

coεicのフロントエンドのコード。本番環境は下記。

https://coeic.herokuapp.com/

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# serve in production mode
npm run start

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

POST APIを試せるコマンド

# 画像アップロード
curl -w '\n' 'http://localhost:8080/api/uploaded-img' -XPOST

DB migration

  • 予め、 npm i -g sequelize-cli を実行してCLIをインストールおくこと。
# 新たに「hoge」という名前のモデルを作成。fuga_1, fuga_2というカラムを持つ。
sequelize model:create --name hoge --underscored --attributes fuga_1:string,fuga_2:boolean
# マイグレーション(環境構築時や、定義変更時は実行すること!)
sequelize db:migrate --env development|production
  • テーブル定義を変更する時
    • migrationファイルを作成するのかな?(試してない)
    • 場合によっては sequelize model:create をやり直した方が早い?
      • その場合は --force optionを付与する。
      sequelize model:create --force --name hoge --underscored --attributes fuga_1:string,fuga_2:boolean

herokuへのdeploy

  • 下記コマンドでmasterブランチのコードをデプロイできる。
  • 川原以外が実施する時はherokuのアクセス権限を付与すればよい?
git push heroku master

認証方法の変更

# IP認証(社内アクセスのみ許可する場合)
heroku config:set AUTH=IP
# BASIC認証
heroku config:set AUTH=BASIC

サンプル画像

いい感じで読み上げてくれるマンガ画像を sample_comics に置いてます。

coeic-fe's People

Contributors

chimof avatar peinan avatar shun91 avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

coeic-fe's Issues

GA導入

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

API・DB関連ファイル削除

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",

アクセス制限

  • 仕様
    • 社内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

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

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

......

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

APIと繋ぐ

クロスドメイン対策

  • GET
  • POST(実装したけどテストまだ)

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

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

削除

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

  • 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

【再生画面】機能実装

再生機能

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

その他

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.