PHPでURLを正確に分解するparse_url()を使おう

URLを分解するparse_urlを使おう

<?php
$url = 'http://example.com/index.html#top?a=10&b=10';
$result = parse_url($url);
print_r($result);

こうするとこうなる

Array
(
[scheme] => http
[host] => example.com
[path] => /index.html
[fragment] => top?a=10&b=10
)

これだけ正確に分解されるので、SSLがどうのこうのではなく、URLで識別したいとき、パスで識別したいとき、パラメータだけを見たいときなどより細かくURLを分析したい時はこの関数を通してから処理をすると良い。

Google Chromeのデベロッパーツールを下ではなく右側に表示する

f:id:hoge:20150329180705p:plain

いつからこの機能が有効になっているのか私は知らないが、右側に表示することができるようになっていた。ただちょっとコツがいるので書いておく。

f:id:hoge:20150329181023p:plain

まずここのボタンでウィンドウの表示位置を切り替えることができるんだけど、この表示ではウィンドウが切り離されるだけでちっとも右側には表示されない。

f:id:hoge:20150329181147p:plain

このようにして左クリックして長押しすると他の選択肢が表示されて右側に移動させるか、別ウィンドウにするかを選べるというわけ。わかりにくいよなー。

Gitで要らないゴミファイルを.global_ignoreでまとめて除外する

Gitの.gitignoreで毎度設定するのが面倒なゴミファイルを除外するにはグローバル設定がオヌヌメ。.global_ignoreをどっかに作って以下のようにして読みこむだけ。ちなみにファイル名は自由で好きな名前つけてファイル名のところ変更すればいい。

git config --global core.excludesfile ~/.global_ignore

私のおすすめだがdotfilesに入れておいて、setupシェルかなんかでまとめてやるのが吉だと思うぜ。こうやってdotfilesというディレクトリを作ってな

mkdir ~/dotfiles
vi ~/dotfiles/.global_ignore

こういう記述をsetup.shみたいなシェルに突っ込んで

ln -s ~/dotfiles/.global_ignore ~/.global_ignore
git config --global core.excludesfile ~/.global_ignore

最後にこうする

sh setup.sh

もうちょっと色々必要だとは思うけど、これをGithubなどに入れておいて、新しい環境などではgit cloneして持ってきてシェル実行するだけで環境を自動設定できるって感じ。 私のdotfilesはここにまとめているので興味あるやつは見るがいい。

github.com

FirefoxのFirebugのショートカットをカスタマイズする

FirefoxFirebugのショートカットはカスタマイズできる

f:id:hoge:20150319225129p:plain

見てみたらこれくらいの項目が設定できることが分かった

  • コンソールをクリア
  • FIrebugを無効化
  • 文字サイズを小さく
  • 新規ウィンドウでFirebugを開く
  • コマンドラインにフォーカス
  • FIrebug検索にフォーカス
  • ロケーションにフォーカス
  • ウォッチエディタにフォーカス
  • ヘルプを開く
  • 文字サイズを大きく
  • 左のFirebugパネルに切り替え
  • 戻る
  • 進む
  • 次のオブジェクトへ
  • 標準の文字サイズ
  • 前のFirebugタブ
  • 前のオブジェクトへ
  • コマンドを繰り返し
  • COokieをすべて削除
  • 右のFirebugパネルに切り替え
  • …でブレークを切り替え
  • FIrebugを開く
  • 調査を切り替え
  • プロファイル中を切り替え
  • クイック情報ボックスを切り替え

git rebaseでCould not execute editorと言われたら

現在のブランチをmasterにrebaseしようとしたらエディタを実行できませんでしたとか言われた

$ git rebase -i master
Could not execute editor

.gitconfigを開く

vi ~/.gitconfig

好きなエディターを指定してやる

[core]
editor = /usr/bin/vim

これでいけるようになった

IntelliJでCSS書く時に出現するカラーピッカーが便利

f:id:hoge:20150318225149p:plain

IntelliJCSS書いてて気づいたんだが、background-colorの横に小さく色が出てるんだよな。今日なんとなくこれをクリックしたらカラーピッカーが出現してかなり便利だった。

f:id:hoge:20150318225251p:plain

デザインから起こさずに直接コードからファイル作るような場面で適当な色を作る時にかなり便利だから使ってない人は使ってみたらいいんじゃないか

JavaScriptでtextareaのinnerHTMLとvalueの取得結果の違い

textareaはinnerHTMLにデフォルト値を入れると、DomElementのinnerHTMLでは常にこの値が取得されるようになっており、valueからは取得できる値は現在入力されているものとなるという違いがあるっぽい。なにはともあれ書いてみようぜ。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example - textarea</title>
</head>
<body>
<textarea>こんにちは</textarea>
<input type="button" value="実行">
<script src="test.js"></script>
</body>
</html>

JavaScriptはこんな感じで実行ボタン押す度に検証してみる

var textarea = document.getElementsByTagName('textarea')[0];
document.getElementsByTagName('input')[0].addEventListener('click', function() {
console.log('innerHTML = ' + textarea.innerHTML);
console.log('value = ' + textarea.value);
}, false);

まず表示した直後に実行

innerHTML = こんにちは
value = こんにちは

何かいれて実行して結果の変化を確認

innerHTML = こんにちは
value = こんばんわ

検証用ファイルはGithubあげとくぜ

github.com

JavaScriptのinsertBeforeを使ってinsertAfterを実現

jQueryにあるinsertAfterは自分で自作できる。JavaScriptではinsertBefore()があるが、これは親から子の特定のノードを指定し、その直下にelementを追加する仕組みとなっているので、単純に追加したい子の次のノードであるnextSiblingを指定してやればいいだけ。

var before = document.createElement('div');
before.innerHTML = 'insertBefore';
var after = document.createElement('div');
after.innerHTML = 'insertAfter';
var element = document.getElementById('target');
element.parentNode.insertBefore(before, element);
element.parentNode.insertBefore(after, element.nextSibling);

HTMLをこんな感じで書く

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example - insertAfter</title>
</head>
<body>
<p id="target">Target</p>
<script src="test.js"></script>
</body>
</html>

HTMLファイルを開けばこの通り

f:id:hoge:20150318224049p:plain

例ではnextSiblingでnullが返っているが、nullの場合は最後に追加されるような仕様になっている。このコードまるごとGithubに乗っけといたので動かしたい人は見たってや