gulp

ログイン画面から順番に作っていきたいと思いますが、まずgulpからでしょうか。
vagrantを起動します。

[vagrant@localhost ~]$ node -v
v0.10.48
[vagrant@localhost ~]$ npm -v
1.3.6
[vagrant@localhost ~]$ gulp -v
-bash: gulp: コマンドが見つかりません

node.js, npmはインストール済みのようです。

npm http GET https://registry.npmjs.org/gulp
npm http GET https://registry.npmjs.org/gulp
npm http GET https://registry.npmjs.org/gulp
npm ERR! Error: CERT_UNTRUSTED
npm ERR! at SecurePair. (tls.js:1430:32)
npm ERR! at SecurePair.emit (events.js:92:17)
npm ERR! at SecurePair.maybeInitFinished (tls.js:1029:10)
npm ERR! at CleartextStream.read [as _read] (tls.js:521:13)
npm ERR! at CleartextStream.Readable.read (_stream_readable.js:341:10)
npm ERR! at EncryptedStream.write [as _write] (tls.js:418:25)
npm ERR! at doWrite (_stream_writable.js:226:10)
npm ERR! at writeOrBuffer (_stream_writable.js:216:5)
npm ERR! at EncryptedStream.Writable.write (_stream_writable.js:183:11)
npm ERR! at write (_stream_readable.js:602:24)
npm ERR! If you need help, you may report this log at:
npm ERR!
npm ERR! or email it to:
npm ERR!

npm ERR! System Linux 2.6.32-754.3.5.el6.x86_64
npm ERR! command “node” “/usr/bin/npm” “install” “gulp” “-g”
npm ERR! cwd /home/vagrant/local/front
npm ERR! node -v v0.10.48
npm ERR! npm -v 1.3.6
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/vagrant/local/front/npm-debug.log
npm ERR! not ok code 0

うおおおおおおおおおおおおおおおお、
なんかERR!が出まくってる。。。。。。。。。。。。

frontの環境整備

– gulp
–フロントエンド周りのタスク自動化
https://gulpjs.com/
– sass
https://sass-lang.com/
– javascript lint
http://www.javascriptlint.com/
– css lint
http://csslint.net/
– vue 1.0.28
https://jp.vuejs.org/index.html
– jquery
https://jquery.com/
– remodal
https://github.com/vodkabears/Remodal
– tinymce
https://www.tiny.cloud/
– datepicker
https://jqueryui.com/datepicker/
– animocons
https://tympanus.net/Development/Animocons/
– fontawsome
https://fontawesome.com/

管理画面WF

確かにこれはめんどい

さあ、19P WFが出来たので、次は、アイコンとPSDをデザイナーにつくってもらい、フロントのコーディングですね。
gulp, vue.js、font-awsome, datepicker、JQueryなどを使っていきたいと思いますが、まずはデザインからですな。早くLaravelまで行きたいですね。

WF、画面設計書を作っていこう

ひたすらWFを書きまる仕事ってありますよね。22時に退社できればまあ早い方、20時退社は早すぎみたいな。。
それだけ需要があるってことでしょう。
さて、WFですが、DFL、画面フローで作成した画面をすべて作っていきます。30枚くらい？
Cacooなど色々ツールはありますが、今回はPPTで作成します。

mobileだけならsketchやXDでも良いかもしれません。

WFのフレームを作っていきます。

おお、そこそこそれっぽいですねwww
まあ、テンプレートはこれでよしとしましょーか。
サービス名は何にしましょうかね？
フォントはメイリオで作っていきます。　

guiflowで画面遷移図

[ログイン]
id, password
==>トップ

[トップ]
お知らせ
--
アカウント一覧
==>アカウント一覧
プロフィール詳細
==>プロフィール詳細
アカウント新規登録
==>アカウント新規登録

[プロフィール詳細]
id, role, 

[アカウント一覧]
アカウント一覧
--
プロフィール登録
パスワード

あら、ちょっとわかってきたw 横に伸びるのがめんどくさいなw

とりあえずguiflowが終わったので、トンマナとワイヤーの作成に入ります。トンマナはワイヤーを1枚作って作成、残りのワイヤーは、画面設計書と同時並行で作成していきます。
トンマナを作るのは、一番使われるページか。

guidでtopから2画面に飛ぶとき

1画面から2画面に飛ぶとき、どう書けばいいんだ？

[アカウント一覧]
アカウント登録

[hoge]
hogehoge

[プロフィール詳細]
id, role, 

[login]
id, password
==>top

[top]
トップ
==>プロフィール詳細
==>アカウント一覧

github issuesを見てみる
https://github.com/hirokidaichi/guiflow/issues?q=is%3Aopen+is%3Aissue

おいおい、何も記載がないぞ。

guidflowを使おう

業務フローの作成が終わったので、画面遷移図をつくります。
Excelだとつまらないので、guiflowというjsで作られたツールを使ってみたいと思います。

https://github.com/hirokidaichi/guiflow

railsの参考になったらしい。
https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows

jsでinputされた値を読み込んで、if value == [] {}でdisplayしているのかな？

draw.ioで業務フローをつくっていこう

ざっくりDFLができたので、業務フロー作成に着手する

DFL -> 業務フロー -> 画面遷移図 -> トンマナ・デザイン基本方針 -> モックアップ -> WF・画面設計図 -> ビジュアルデザイン -> フロントコーディング　-> 基本設計 -> 詳細設計　-> laravelコーディング　と行きたい。

OK!　Excelエンジニア一旦終了！
次は画面遷移図に行こう