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エンジニア一旦終了！
次は画面遷移図に行こう

webサイトと業務用システムのDFL(ディレクトリマップ)の違い

webサイトのDFLを作る場合は、階層、パスに加えて、title、diescription、H1がディレクトリマップに必ず入りますね。古い人(語弊があってすみません..)が作ると、そこにkeywordが入ります。
keywordなんてseo的に全く意味ないのにな～　とか思いながら、コツコツと重要ワードを拾っていくわけです。

一方で、業務用システム
こちらはtitle、descriptionなどseo要素は全く重視されません。そのため、DFLにtitle、descriptionは入りません。一方、必須は機能要素。う～ん、なるほど。

いずれにしても骨の折れる作業ですな～

laravelのロギング

ログの設定ファイルは config/logging.php
なるほど、設定ファイル系はconfig配下にありますな。

syslog, slackなどにログ出力ができる。syslogってなんだ？

'channels' => [
        'stack' => [
            'driver' => 'stack',
            'channels' => ['single'],
        ],

        'single' => [
            'driver' => 'single',
            'path' => storage_path('logs/laravel.log'),
            'level' => 'debug',
        ],

        'daily' => [
            'driver' => 'daily',
            'path' => storage_path('logs/laravel.log'),
            'level' => 'debug',
            'days' => 7,
        ],

        'slack' => [
            'driver' => 'slack',
            'url' => env('LOG_SLACK_WEBHOOK_URL'),
            'username' => 'Laravel Log',
            'emoji' => ':boom:',
            'level' => 'critical',
        ],

        'stderr' => [
            'driver' => 'monolog',
            'handler' => StreamHandler::class,
            'with' => [
                'stream' => 'php://stderr',
            ],
        ],

        'syslog' => [
            'driver' => 'syslog',
            'level' => 'debug',
        ],

        'errorlog' => [
            'driver' => 'errorlog',
            'level' => 'debug',
        ],
    ],

Syslog は、ログメッセージをIPネットワーク上で転送するための標準規格である。” Syslog” という用語は、その通信プロトコルを指すだけでなく、Syslog メッセージを送信するアプリケーションやライブラリに対しても使われる

とりあえず、slackに通知したいですね。あああああああ、全然追いつかねーな。むしろ離されている感が強い。。

エラー時に表示するページのカスタマイズ

/app/Exceptions/Handler.phpを編集する

Handler.phpの最下部

public function render($request, Exception $exception)
    {
        return parent::render($request, $exception);
    }

以下に変える。$e->getStatusCodeで判定する。
view(‘errors.403’)が上手くいかない

public function render($request, Exception $e){
        if($this->isHttpException($e)){
            if($e->getStatusCode() == 403){
                return response()->view('errors.403');
            }

            if($e->getStatusCode() == 404){
                return response()->view('errors.404');
            }
            return response()->view('errors.500')

        }

        return parent::render($request, $e);
    }

laravel5.2だからか。そりゃそうだ。

public function report(Exception $e)でレポートメールの送信もできるっぽい。。