Laravel 5 のデバッグ出力
Laravel 5 でデバッグ出力する３つのやり方についてまとめる。
ログファイルに書きだす
２通りの書き方がある。
ヘルパー関数 logger(), info()
<?php Route::get('/', function() { $message = ['a' => 1, 'b' => 2, 'c' => 3]; logger($message); info($message); // logger()->notice($message, $context); // logger()->warning($message, $context); // logger()->error($message, $context); // logger()->critical($message, $context); // logger()->alert($message, $context); // logger()->emergency($message, $context); return 'OK'; });
storage/logs/laravel.log に書き出される。
[2015-07-31 13:40:35] local.DEBUG: array ( 'a' => 1, 'b' => 2, 'c' => 3, ) [2015-07-31 13:40:35] local.INFO: array ( 'a' => 1, 'b' => 2, 'c' => 3, )
配列ライクは var_export() で、 Jsonable なクラスインスタンスは JSON 文字列に内部で見やすく整形してくれる。なので、何も考えずに引数に渡してよい。
Log ファサード
<?php namespace App\Http\Controllers; use Log; // ... class MyController extends Controller { public function index() { $message = ['a' => 1, 'b' => 2, 'c' => 3]; Log::debug($message); Log::info($message); // Log::notice($message, $context); // Log::warning($message, $context); // Log::error($message, $context); // Log::critical($message, $context); // Log::alert($message, $context); // Log::emergency($message, $context); return 'OK'; } }
ヘルパー関数と Log ファサードのやってることはまったく同じ。ただ、 Log ファサードはファイルの先頭で use Log; しないといけなかったり、 use Log; できない php ファイルがある？のでヘルパー関数の logger() のほうが便利。グローバル関数は最強だな。
ブラウザに表示する var_export()
<?php Route::get('/', function() { $message = ['a' => 1, 'b' => 2, 'c' => 3]; echo '<pre>' . var_export($message, true) . '</pre>'; return 'OK'; });
Laravel と関係ない PHP おなじみのやり方。一応説明すると var_export() で見やすく整形して pre タグで改行を可視化している。
ブラウザにリッチに表示する dd()
<?php Route::get('/', function() { $message = view(); dd($message); return 'OK'; });
dump and die の略。上述の２つと違ってクラスインスタンスとか複雑なものも表示できる。 die と名のつく通りアプリケーションの実行を停止する（ OK が表示されてないよね）。なんかすごい。
まとめ
logger($message, $context);
ログファイルに書きだすので残る。
echo '<pre>' . var_export($message, true) . '</pre>';
ブラウザに表示する。
dd($message);
ブラウザにリッチに表示する。クラスインスタンスとか複雑なものも表示できる。アプリケーションの実行を停止する。
以上です。それでは Laravel のよきデバッグライフを。
CoffeeScript と Phaser でゲームつくったよ！
ゲーム インビジゴースト - 見えざる敵の居所を探り、迎え撃て！
ソース hakomo/InvisibleGhost · GitHub
遊んでみてね。
ゲームフレームワーク Phaser を使っていて思ったことを書きたい。
Atom を設定した
Atom の正式版公開当初にさわって以来ごぶさただったのですが、最近話題をちらちら見るのでさわってみたらよかったので設定した。
Atom は主に CoffeeScript, Stylus, Slim, Markdown, メモを書くのに使うと思う。たまに Python, Ruby も。 Sublime からの乗り換え。
エディタはできるだけカスタマイズしないでデフォルトで使いたい人。
Settings
Settings で一般設定を、Packages でパッケージごとの設定が GUI でできる。
んで下記が GUI が出力したテキスト形式の設定。 CSON って言うらしい。 JSON の CoffeeScript 版だそうな、はじめて知った。まあ JSON から徹底的にタイプ量減らしましたみたいな。
GUI じゃないと無理って人も、テキストベースで管理したいって人も配慮しているこのかんじ好きよ。
それで私の Setting がこちら。
"*":
welcome:
showOnStartup: false
editor:
tabLength: 4
fontSize: 18
lineHeight: 1.25
scrollPastEnd: true
fontFamily: "'Consolas' 'Meiryo'"
invisibles: {}
softWrap: true
whitespace:
ignoreWhitespaceOnCurrentLine: false
"bracket-matcher":
autocompleteBrackets: false
"autocomplete-plus": {}
core: {}
順番に見ていく。
tabLength: 4
どんな言語でもインデントはスペース４つ。らくちん。
fontSize: 18
lineHeight: 1.25
テキトーに自分の Sublime の設定に似せた。
scrollPastEnd: true
最下行以降もスクロールできるので最下行付近も画面中央で見れる。
fontFamily: "'Consolas' 'Meiryo'"
Windows だとおされな Atom の中で ＭＳ ゴシック さんがぶいぶいしちゃうのでなんとかする。
CSS の font-family プロパティに英字フォント、日本語フォントの順に指定すると英字は英字フォント、日本語は日本語フォントで表示されるというテクがある。そこで好みの等幅英字フォント、好みの日本語フォントの順にクォーテーションで囲んで指定する。この場合、（ CSS font-family なら）囲まなくても動くと思うんだけど囲まないとなぜか動かない。
エディタのカスタマイズってエディタ固有の知識が多すぎて闇が深いなあと思っていたので、ブラウザベースの Atom なら闇を晴らしてくれるかと少し期待してみたけどだめだったよ。。。
softWrap: true
折り返す。
whitespace: ignoreWhitespaceOnCurrentLine: false
デフォルトでは保存時に行末のスペースを削除してくれるんだけどカーソル行のスペースは削除しない。おそらく、保存してから入力しようと思ったらスペースが削除されてスペースを打ち直すっていうのをなくす配慮だろうけど、行末にスペースを残しかねないので無効。
"bracket-matcher": autocompleteBrackets: false
( を入力したら ) を補完する。あらゆるエディタ・ IDE についてるけど邪魔だと思ったことこそあれ、便利だと思ったことはない。無効。
Your Keymap
ショートカットキーを変えられます。デフォルトが使いやすいのであまり変えていません。
'.platform-win32 atom-text-editor, .platform-linux atom-text-editor':
'f4': 'find-and-replace:replace-next'
'shift-f4': 'find-and-replace:replace-all'
置換を F4 に割り当てています。これは置換する、これはしない、これはする・・・とスッスッスーとやりたい。 F3 のスキップとあわせてできるようになります。 ctrl-enter で replace-all できるのですが、エディタ外の特殊なキーバインドのせいで ctrl-enter が押せないので割り当てています。
Your Stylesheet
Atom はブラウザベースなので外観を Stylesheet で記述する。ようするに、タグやクラス名とセレクターで要素を限定し、 CSS プロパティで色などを指定する。んで Atom は CSS の代替 LESS で記述する。いやあ Stylus 使いにはつらいぜ。
それで私の Stylesheet がこちら。
.tree-view {
font-family: Meiryo;
}
atom-text-editor.is-focused::shadow .cursors .cursor {
opacity: 1;
}
atom-text-editor::shadow .lines .line.cursor-line {
background-color: transparent;
}
順番に見ていく。
上述の記述だけでは ＭＳ ゴシック を根絶やすには不完全だったようで Tree View からこんにちは。
Tree View は等幅でなくてよいので Meiryo のみ指定。
.tree-view {
font-family: Meiryo;
}
それでもまだ Markdown Preview でこんにちはするし、他にもこんにちはするかもしれない。あとで直そう。。。
atom-text-editor.is-focused::shadow .cursors .cursor {
opacity: 1;
}
カーソルの点滅をなくす。
Blinking Cursor - Atom Discussion
URL 先を参考に改変。
atom-text-editor::shadow .lines .line.cursor-line {
background-color: transparent;
}
カーソル行のハイライトをなくす。
Where is the active line background color? - Atom Discussion
URL 先をコピペ。
カーソルの点滅とかカーソル行のハイライトって、カーソルを見失ったときに探しやすくするためですよね。カーソルが見つかっているのであれば、入力行に色がついて見づらいだけやし、周辺視野でチッカチッカする害悪だと思うんですよ。なので消します。
見失ったときは上キー押して下キー押せばカーソルが動いてすぐ見つかるので十分です。
Packages
あとから入れたパッケージ。設定も一通り見たがすべてデフォルト。
autocomplete-plus
デフォルトだと ctrl-space しないと補完候補がポップアップしないが、キー入力と同時にポップアップする。
autocomplete-snippets
補完候補にスニペットを含める。
japanese-wrap
日本語の折り返しを修正する。 Core Settings の Soft Wrap を有効にする必要がある。
language-slim
HTML の代替 Slim のシンタックスハイライトなど。
これとほぼ同じダウンロード数のパッケージに ruby-slim があったが ruby まわりでエラーを吐いた。 Slim のコンパイルは Node.js + gulp.js でやっていて Atom ではやらないので language-slim を採用した。
sort-lines
CSS のプロパティのような順番が（ほぼ）何でもよいときに、わかりやすい順番を考える時間が無駄なので無思考にソートする用。
Stylus
CSS の代替 Stylus のシンタックスハイライトなど。セレクター行で改行してもインデントしないのが Sublime に比べて使いづらい。
カスタマイズする上で役に立ちそうなもの
ctrl-,
Settings をすばやく開く。
alt-ctrl-i
Google Chrome でおなじみ Developer Tools を開く。
ctrl-shift-p
Command Palette を開く。すべてのコマンドを検索・実行できる。
ctrl-.
Keybinding Resolver を開く。開いた状態でキーを押すと、実行されたコマンドとコンテキストが表示される。
Command Palette と Keybinding Resolver を使うとショートカットキーの設定がはかどるかもしれない。
Menu -> Packages -> Timecop -> Show
起動にかかった時間が表示される。重いパッケージを無効化するときなどに。
Packages の各言語には Setting ボタンがないがクリックすると設定できる。戻る欲しい。
以上です。おつかれさまでした。
npm メモ
npm のコマンドを目的別にまとめています。 npm は gulp にしか使っていません。
コマンドにはエイリアスがたくさんあるので使いやすいものを選びましょう。
npm のコマンドについて調べる
npm-index
パッケージを探す
npm
install
プロジェクトにパッケージをインストール
$ npm install --save-dev package-name
パッケージをインストールし、 package.json に書き出します。 package.json を使うことで同じ環境構築が次から楽になります。
--save-dev を指定すると開発するときに依存するパッケージとして書き出します。替わりに --save を指定すると公開するときに依存するパッケージとして書き出します。例えばソースの圧縮のような開発するときにしか使わないものには --save-dev 、サーバサイドで使うものには --save を指定します。
複数の package-name をスペース区切りで指定してインストールすることもできます。
グローパルにパッケージをインストール
$ npm install -g package-name
-g を指定するとグローバル、何も指定しないとプロジェクトという意味になります。使い分けは、端末から直接コマンドを叩くときはグローバル、プロジェクト内の js から使うときはプロジェクトです。
プロジェクトが依存するパッケージをインストール
$ npm install
package.json 内のパッケージをすべてインストールします。 git clone の直後などに実行します。
ls
プロジェクトにインストールされている一覧
$ npm ls --depth=0
直接インストールした一覧が表示されます。--depth=0 を指定しないと、直接インストールしたパッケージが依存する大量のパッケージが表示されてしまいます。
グローバルにインストールされている一覧
$ npm ls --depth=0 -g
uninstall
プロジェクトからパッケージをアンインストール
$ npm uninstall --save-dev package-name
グローバルからパッケージをアンインストール
$ npm uninstall -g package-name
update
プロジェクトのパッケージをアップデート
$ npm install -g npm-check-updates
パッケージをアップデートしても package.json はアップデートされないようです。そのためコマンドをインストールします。
$ npm update
$ npm-check-updates -u
上記の２行のコマンドを実行すればパッケージと package.json がアップデートされます。一行目はいらないかもしれません。
グローバルのパッケージをアップデート
$ npm update -g
completion, config
$ npm completion
補完が効くようです。 Windows では動かないので試していません。
$ npm config ...
npm の設定が変更できます。デフォルトで使っています。
Fit Win の新しいバージョンを公開しました！
ここでは技術的なことを書きます。 Fit Win の詳細は下記 URL をご覧ください。
Fit Win - ウィンドウを移動・サイズ変更するフリーソフト
開発言語は C#/Slim(HTML5)/Stylus(CSS3)/CoffeeScript(JavaScript) です。ただ本ソフトは Web アプリではありませんし通信もしません。デスクトップアプリなのです。C# のフォーム上に WebBrowser をのっけてその上で HTML5 アプリを動作させています。なぜそんなまわりくどいことをしたのかというと本ソフトがドラッグ＆ドロップを多用したり、複雑な描画を行うリッチ GUI アプリだからです。実際 C# のみで書いた過去のバージョンに比べて、本バージョンのコード行数は３分の２に減っています！適切な言語選択の重要性を痛感しましたね。（ XAML 使えよってツッコミが入りそうですが使ったことないんですよね。 CSS 並の表現力と jQuery 並の DOM 操作力はあるんでしょうか？）
IE12 で HTML5 たくさん実装されないかなー、でもって Windows 7 にもインストールできないかなー。技術的なことって何書いたらいいのかわからないのでコメントいただければ書くやもです。
最後に本ソフトの開発環境である HTML5/CSS3/JavaScript on C# WebBrowser のメリット・デメリットです。
メリット
- デスクトップアプリなのに HTML5/CSS3/JavaScript を使ったリッチ GUI アプリを作れる
- JavaScript でセキュリティ上不可能なことができる
デメリット
- 一般的ではなく、情報が少ない
- C# から JavaScript の関数を呼んだり、 JavaScript から C# のメソッドを呼んだりと見通しが悪い
- WebBrowser のデフォルトの挙動（ショートカットやコンテキストメニュー）の部分的な無効化がバッドノウハウのかたまりになってしまった
マウスカーソルには２つの意味がある
状態を表すマウスカーソル
PC がフリーズしているときの待ちアイコンや、ペイントソフトの鉛筆や消しゴムアイコンのことです。これらのアイコンは PC やソフトの状態に応じて変化し、ユーザがマウスアクションするとどのような効果が起こるのかユーザに伝えます。そのためこれらを適切に設定するとわかりやすくなります。
要素を表すマウスカーソル
マウスポインタがボタンやリンクの上にあると手のアイコンに、テキストエリアの上にあるとキャレットアイコンになります。このような周りと異なるインターフェースを持つ要素の上のマウスカーソルのことです。これらはマウスポインタを要素の上に移動して初めてアイコンがわかります。つまり適当にマウスを振り回してたまたまホバーしたり、リンクの上にたしかに乗っているかを確認するぐらいでしか役に立ちません。
