Ubuntu16.04 日本語入力設定

1.im-configで入力切替

$ im-config -n fcitx

2.画面右上のキーボードアイコン で「再起動」を選択
3.同じくキーボードアイコンから「設定」を選択
4.設定画面にて下記順に並び替え
・キーボード-日本語
・Mozc

【Larabel】migration reset時に外部キー制約エラーが発生

php artisan migrate:refresh

=>
[PDOException]
  SQLSTATE[23000]: Integrity constraint violation: 1217 Cannot delete or update a parent row: a foreign ke
  y constraint fails


外部キー制約が原因でドロップできないエラー。
対策としては一時的に外部キー制約を無効にする。

public function down(){
    DB::statement('SET FOREIGN_KEY_CHECKS = 0');
    Schema::drop('books');
    DB::statement('SET FOREIGN_KEY_CHECKS = 1');
}

【Larabel】assetの読み込みを追加

Larabelではassetはデフォルトでpublic直下を参照しているため
js,cssファイルに関してはpublic直下にディレクトリを切ると良い。

$ tree public
public
├── css // 追加
├── favicon.ico
├── index.php
├── javascript // 追加
├── robots.txt
└── web.config

今回は即時実行関数をテストとして実行する

// public/javascript/index.js|
(function(){
  console.log('load js file!!');
})();

asset(file_path)で対象のファイルを指定

// resources/views/books/index.blade.php
@extends('layout')

@section('content')

  {!! link_to('books/create', '新規作成') !!}

  @foreach($books as $book)
    <book>
       <a href="{{ url('books', $book->id) }}">
        {{ $book->title }}
       </a>
    </book>
  @endforeach
  <script src="{{ asset('/javascript/index.js') }}"></script>
@endsection

/books にアクセスしウェブコンソールに load js file!! が出力されていることを確認

【Larabel】FormHelperの生成

今回は下記のコード中の削除リンク部分をFormHelperとしてパーツ化する。

// resources/views/books/show.blade.php
@extends('layout')

@section('content')
  {{$book->title}}

{!! Form::open(['method' => 'delete', 'url' => ['books', $book->id]]) !!}      
  <input type='submit' value='削除'>
{!! Form::close() !!}

@endsection

Helper用のクラスを生成

// app/Http/helper.php
<?php

class Helper {

  /**
   * DELETE Action
   * @param $url
   * @return Form
   */
  public static function delete_form($url, $label = '削除'){
    $form = Form::open(['method' => 'DELETE', 'url' => $url]);
    $form .= Form::submit($label);
    $form .= Form::close();

    return $form;
  }
}

composer.jsonを編集し、作成したHelper.classがオートロードされるようにする。

// composer.json
"autoload": {
        "classmap": [
            "database"
        ],
        "psr-4": {
            "App\\": "app/"
        },
        "files": ["app/Http/helper.php"]

composerの設定を反映

$ composer dump-autoload


実装したHelperを利用してリファクタリング

// resources/views/books/index.blade.php
extends('layout')

@section('content')
  {{$book->title}}

{!! Helper::delete_form(['books', $book->id]) !!} 

【Laravel】DB接続設定

MySQLをインストール

brew install mysql

インストール後、ログインして新規にDBを生成。

mysql -u root -p

-- 新規DB生成
CREATE DATABASE TEST_DB;

今回は面倒なのでユーザーはrootを使う。
ユーザーを作りたい方は以下を....

-- ユーザーを生成し、データベースの操作権限を付与
CREATE USER 'acount_name'@'localhost' IDENTIFIED BY HOGEHOGE;
GRANT ALL PRIVILEGES ON TEST_DB.* TO 'acount_name'@'localhost';

config/database.phpを編集。

...
'mysql' => [
            'driver' => 'mysql',
            'host' => env('DB_HOST', 'localhost'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'TEST_DB'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', 'HOGEHOGE'),
            'charset' => 'utf8',
            'collation' => 'utf8_unicode_ci',
            'prefix' => '',
            'strict' => false,
            'engine' => null,
        ],


.envの設定が優先されるので.envファイルも編集。

...
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=TEST_DB
DB_USERNAME=root
DB_PASSWORD=HPGEHOGE

これでDB接続が可能となる。

【JQuery】IE8対応 テーブルヘッダ固定スクリプト

$.fn.fixedTable = function(){
  var $table = $(this),
      $thead = $table.find('thead'),
      $tbody = $table.find('tbody');

  //元テーブル横幅保存用
  var thead_cell_widthes = [];

  var $clone_table = $table.clone();
  $clone_table.find('tbody').remove();

  $clone_table.hide();

  /**
   * 元テーブルの横幅を複製テーブルに設定
   */
  var resize = function(){

    $clone_table.css({width: $table.width()});

    //元テーブルの各セルの横幅を記録
    thead_cell_widthes = [];

    $thead.find('tr > th').each(function(i, item){
      thead_cell_widthes.push($(item).width());
    });

    $clone_table.find('thead > tr > th').each(function(i, th){
      $(th).css({ width: thead_cell_widthes[i] });
    });
  }

  resize();

  $(window).scroll(function(){
    if($(this).scrollTop() < ($thead).height()){
      $clone_table.css({display: 'none'})
    }else{
      $clone_table.show();
    }
  });

  //リサイズされた際に複製テーブル幅を再調整
  $(window).resize(function(){{
    resize();
  }});

  $('body').append($clone_table);
  
  $clone_table.css({
    position: 'fixed',
    'z-index':  1,
    top: 0,
    left: 0,
    'margin-top': 0,
    display: 'none'
  })
}

解説
theadのみ複製する方法もありましたが
%でセル幅が固定されている場合、複製したtheadのセル幅が微妙にズレる現象が発生したため
tableそのものを複製することで解決しています。(現象はIE8で確認)

...仕事とはいえサポート切れたブラウザ対応は辛いです。

【JavaScript】Array loop処理

Arrayオブジェクトのループ処理の種類をよく忘れるのでメモ


一つでも条件を満たすか判定

['10','20','30'].some(function(value){
  return value.match(/^1/);
})
//⇒true


全ての条件を満たすかを判定

['10','20','30'].every(function(value){
  return value.match(/0/);
})
//⇒true


左から順番に処理をした結果を返す

['10','20','30'].reduce(function(before, after){
  return before+after;
})
//⇒102030


右から順番に処理をした結果を返す

['10','20','30'].reduceRight(function(before, after){
  return before+after;
})
//⇒302010


指定の処理を行い、結果を新規配列で返す

var result = ['10','20','30'].map(function(value){
  return (+value)+1
})
//⇒result [11, 21, 31]


条件を満たしたもののみ抽出し、新規配列を返す

var result = ['10','20','30'].filter(function(value){
  return (+value) >= 20;
});


言わずもがな...

['10','20','30'].forEach(function(value, index){
  console.log(index+": "+value);
})
//⇒ 0: 10
//⇒ 1: 20
//⇒ 2: 30