ボタン追加したら別の画面に遷移しちゃう

現象

既存の画面に新しくボタンを追加して、ajaxでサーバーからデータを取得する機能を作ろうと思った。
サーバー再度完成して、画面にボタンをつけた。

<button id="hoge">ゲット！</button>

押してみたらclickイベント発火したあと別の画面に飛ばされた。
ドはまりした

原因と結論

①body全体？がフォームタグで囲まれてた。→actionのURLにpostしてた。
②buttonタグにtype指定してなかった →タイプ指定しないとsubmitの動きする！

原因分かるまでにやったこと

1. なんかclickイベント上書きされてる？

js長すぎて読み切れなかったからこれをずっと疑ってた。
・どんなイベントが設定されているか一目で分かる·Visual Event MOONGIFT を参考にVisual Eventでイベント見たり
・chromeの開発者ツールでconsole.trace()したり
・同じく開発者ツールでステップ実行したり
したけどわからなくてブラウザのjs切っても同じ現象だった→違う

2. てことはformの動きっぽい？

→html読んだら<form></form>に囲まれてた！！！

3. でもなんでbuttonなのにsubmitされるの？

<input type="button" ...><!-- に変更してみた→現象起きなくなった -->
<input type="submit" ...><!-- に変更してみた→現象起きた -->
<button id="hoge">ゲット！</button><!-- に戻してみた→現象起きた -->

buttonをググってみる→ <BUTTON>－HTMLタグリファレンス

type属性ではsubmit（送信ボタン）、reset（リセットボタン）、button（汎用的に使える押しボタン）のいずれかを指定してください。 初期値はtype="submit"で、送信ボタンを作成します。

まじかー！うろ覚えでtype指定しないといけないの忘れてた

学び

• ブラウザのjsを切ればjsのせいかどうか切り分けできる
• <button>にはtype指定がいる
• chromeの開発者ツールでPreseve logにチェックを入れると画面遷移してもコンソールログ残るの便利

VersionControl_SVNでコミットログのファイル名も取得する

コミットメッセージとかは取得できるんだけど、verbose(-v)付けてもファイル名取れなくてめっちゃハマった！！！
結果から言うと、fetchmodeによってはverboseつけてもファイル名返してもらえないっぽい。
↓のテストコード実行してみて、VERSIONCONTROL_SVN_FETCHMODE_DEFAULT,VERSIONCONTROL_SVN_FETCHMODE_XML,VERSIONCONTROL_SVN_FETCHMODE_RAW,VERSIONCONTROL_SVN_FETCHMODE_ALLはファイル名くれるってわかったけどお前らStringやないかーい！！！

<?php
// 各fetchmodeの戻り値を確認する
require_once 'VersionControl/SVN.php';
require_once 'PEAR/ErrorStack.php';

$svnstack = &PEAR_ErrorStack::singleton('VersionControl_SVN');

$mode = array(
    'VERSIONCONTROL_SVN_FETCHMODE_DEFAULT' => 0,
    'VERSIONCONTROL_SVN_FETCHMODE_ASSOC' => 1,
    'VERSIONCONTROL_SVN_FETCHMODE_OBJECT' => 2,
    'VERSIONCONTROL_SVN_FETCHMODE_XML' => 3,
    'VERSIONCONTROL_SVN_FETCHMODE_RAW' => 4,
    'VERSIONCONTROL_SVN_FETCHMODE_ALL' => 5,
    'VERSIONCONTROL_SVN_FETCHMODE_ARRAY' => 6
);

foreach($mode as $fetchmodeName => $fetchmode){
    test($fetchmodeName,$fetchmode);
    echo "<p> - - - </p>";
}

function test($fetchmodeName,$fetchmode){
    echo "<p>" .$fetchmodeName ."</p>";
    $svn = VersionControl_SVN::factory('log', array('fetchmode' => $fetchmode));
    $switchs = array(
        'config-dir' => '/hoge/.subversion',
        'username' => 'svnusername',
        'password' => 'svnpassword',
        'verbose' => true,
        'r' => "111"
    );
    $args = array('svn+ssh://repositorypath');
    echo "<pre>";
    var_dump($svn->run($args, $switchs));
    echo "</pre>";
}

TestRailでUI Scriptsを設定する

背景

Case Fieldsの項目に、入力必須にしたいけど過去のケースには入力されていない項目があった。
Edit FieldsのConfigure OptionのOptionに入力必須にするオプションがあったけど、過去に作ったケースも入力必須になって編集が面倒になるので使えなかった。
警告のオプションもあればよかったんだけど…。
なのでUI Scriptsで対応することにした。

UI Scriptsを作る

右上のAdministrationタブを開く
Customizationsをクリック 一番下のUI ScriptのHello worldをクリック

見てわかる通り、js(jQuery)とcssを入力出来る。

あとは説明を見て入力すればよし。
UI Scripts: Introduction [TestRail Documentation]

includesがよくわからなかったけど、UI Scriptを実行するページを選べるらしい。
今回はケースのEditページで実行したかったので^cases/editにしたら大丈夫っぽかった。

あとは実際のケースのEditページで開発者ツールを開いて、id調べたりしながらjsとcss書く。
This UI script is activeにチェック入れてSave UI Scriptボタンを押せば保存される。
実行時のエラーは通知されないので、実行されなかったりしたら開発者ツールのConsole確認する。
※Saveしたら他のアカウントでもスクリプトが実行されるようになるので注意

今回は、Case Fieldsの特定の項目が入力されていなければ背景に色付けるだけの簡単なスクリプト書いて終わり。
出来ればアラートにしたかったけどあとでやる！

ちょこちょこ開発

Laravelで作って遊んでるときにやってる手順をメモっておく

1. view
   • hoge.htmlでとりあえずの見た目を作る
   • hoge.htmlをapp\resources\viewsの中にhoge.blade.phpという名前で入れる
   • routes\web.phpにRoute::get('uri',function(){return view('hoge');});を追加する
   • php artisan serveでサーバー起動して確認する
2. controller
   • php artisan make::controller HogeControllerコマンドで作る
   • とりあえずshowメソッドを作ってview('hoge');を返す
   • routes\web.phpをRoute::get('uri',HogeController@show);に書き換える
   • php artisan serveでサーバー起動して確認する
   • デバッグはLogger($nanika);するとstorage\logs\laravel.logに書かれるよ
   • メソッド追加したらとりあえずshow();に追加してLogger()しながら書く

Laravelのお勉強5

p140 バリデータを作成する

例えば、バリデーションエラーがあったときフォームにリダイレクトではなく、別の処理をしたい。フォーム以外の値をチェックしたいときに自分でバリデータを用意する。
コントローラのvaridateメソッドを呼び出さずにValidatorクラスのインスタンスを作成して処理することでカスタマイズできる。
基本的にvalidator::make()に連想配列と検証ルール(とエラーメッセージ)を渡せばバリデーションできる。

コントローラにuse文を追加し、バリデータインスタンスを作成する。
別のページにリダイレクトするときはredirect()->withErrors($validator)->withInput();のようにすればエラーと入力値を返せる。 フォームのバリデーションをする場合は$request->all()を、クエリをバリデーションするときは$request->query()を渡す。

<?php
use Validator;

...

$validator = Validator::make(検証する配列,検証ルールの配列);
if( $validator->fails()){
    // エラー処理
}

バリデーションルールを段階的に設定したい(例えば、整数で入力してください→10以上で入力してください等)ときは$validator->sometimes(検証する項目,検証ルール,クロージャ);が用意されている。
クロージャで真偽値を返すと、falseの場合にsometimesの検証ルールが追加される。

Laravelのお勉強４

p134 フォームリクエスト

一般的なバリデーションはコントローラ内に書かれるが、バリデーションはビジネスロジックとは切り離したい。
そこでRequestクラスを継承したFormRequestクラスでバリデーションを行う。

作成はartisanコマンドで。
php artisan make:request クラス名 実行すると/Http/Requests/にファイルが作られる。

作成されたクラスにはauthorize()とrules()メソッドがある。
authorize()ではパスをチェックして利用するパス以外から利用できないようにしたりする。
rulesにはバリデーションの検証ルールを設定する。

利用するにはcontrollerにuse文を追加し、postメソッドの引数をpost(フォームリクエストクラス $request)のように書き換える。

バリデーションエラーのメッセージを書き換えるには
フォームリクエストクラスにmessages()メソッドを追加し、項目名.検証ルール名 => 'メッセージ'のように配列を返すようにする。

Laravelのお勉強3

p120 バリデーション

Controllerクラスに組み込まれているValidateRequestsというトレイト(メンバーをまとめてクラスに追加するためのもの)に用意されている機能です。
基本的にはコントローラクラスにあるメソッドとして考えて構いません。

バリデーション 5.4 Laravelの下の方にバリデーションルールの一覧がある。

controllerのメソッド内で$this->validate(リクエスト,バリデーション設定の配列);を記述すると、
バリデーションエラーがあったらもとのフォームに戻してくれる

<?php
public function post(Request $request)
{
    $validate_lure = [
        'inputの名前' => 'バリデーションルール|バリデーションルール２個め'
    ];

    $this->validate($request, $validate_lure);
    return view(ビュー);
}

テンプレート側では$errorsにバリデーションのエラーメッセージを受け取れる。
$errors->all()をforeachすれば一括で、$errors('inputの名前')で個別にエラーメッセージを取り出せる。
$errors('inputの名前')も配列になっているので、$errors->get('inputの名前')で個別のエラーメッセージ全部取り出せる。
また、old('inputの名前')で前画面で入力した値を受け取れる。