Firefoxだけbeforeunloadの挙動が違う…

はじめに

一般的に、離脱防止の目的で使用されるであろう、beforeunloadイベント。
タブを閉じたり、ブラウザの「戻る」操作をしたときにダイアログが表示されるため、嫌われモノとなるアレです。

developer.mozilla.org

嫌われモノとわかっていても、実装しなければならないこともある。
これはしょうがない…。

さて。

テスト時にようやく気づいたのですが、Firefoxだけ異なる挙動をするようです。
（テスト時のバージョンは47.0です）
ちなみに、メッセージの内容がダイアログに表示されない云々…という話ではありません。

何が違うのか？

ダイアログが表示されない場合があります。
ページが表示されて、何も操作をせずにページを移動しようとする/閉じようとすると、ダイアログが表示されません。

どこでもいいので、クリックしてから閉じると表示されます。
マウスホイールくるくるでも、表示されます。
（実際スクロールしなくてもOK）
何かしらの操作をすることが、トリガーになっているようです。

調べてみた

どこかにこれに関する情報はないものか？と思ったらこちらにありました。

www.fxsitecompat.com

Firefox44から、こういう動作なのですね。
結構前じゃないか…。
全然知りませんでした。

Cygwinを使ってSymfony 3 を導入してみる

はじめに

今回、新しいWebサイトを構築するにあたって、Symfony 3を使ってみたいと思ったのがきっかけです。
環境はWindows 10にCygwin上でSymfonyのプロジェクトを作成するところまでやりたいと思います。

流れ

まずはSymfony 3のダウンロード…なんですが

ダウンロードページはこちら
Download Symfony Framework and Components

とうとうsymfonyのインストーラーが用意されたのですね。
しかし私はなぜかインストーラーが使えなかったので、

If you can't use the installer try instead the Symfony installation based on Composer.

の指示に従って、Composerを使うことに。
のっけから普通の道から外れていますが…がんばって進めます。

Composerのダウンロード

URLはこちらになります。
Installing and Configuring Symfony (The Symfony Book)

ということで、まずはComposerを入れなければいけません。
うーん、前提が多い…。
Installing Composer (The Symfony CookBook)

$ curl -sS https://getcomposer.org/installer | php
All settings correct for using Composer
Downloading 1.0.3...

Composer successfully installed to: /home/****/work/project/composer.phar
Use it: php composer.phar

成功した場合にはこのように表示されますが、PHPに必要なオプションが存在しないと失敗します。
根気よくTry and Errorしましょう。

Cygwinなら、インストーラーから探してインストールするのが楽かと思います。
PHPのソースコードからリコンパイルしてももちろんOKです。

$ mv composer.phar /usr/local/bin/composer

Composerを移動して、準備完了です。

ようやくSymfonyのプロジェクト作成

いざ、Symfonyのプロジェクトを作成するコマンドを叩きます。

$ composer create-project symfony/framework-standard-edition my_project_name

何かが足りない場合には、やはり失敗します。
成功するまでやはり懲りずにTry and Errorしましょう。
私の場合は、ctype_digit関数がないと言われてFatal Errorが発生していました。
関数の有無はこんな感じ↓で調べるとよいです。

$ php -r "echo (function_exists('ctype_digit'))? 'true'.PHP_EOL : 'false'.PHP_EOL;"

存在する関数名ならtrueが、存在しない関数ならfalseを返します。

それとPHPのデフォルトタイムゾーンの設定がされていないぞと怒られました。
php.iniにて設定をしておきましょう。

$ cat /etc/php5/php.ini | grep date.timezone
; http://php.net/date.timezone
;date.timezone =
date.timezone = "Asia/Tokyo"

途中でデータベースとメーラーの設定について聞かれます。
決まっていなければ、このままEnterを押して続行して問題ありません。

database_host (127.0.0.1):
database_port (null):
database_name (symfony):
database_user (root):
database_password (null):
mailer_transport (smtp):
mailer_host (127.0.0.1):
mailer_user (null):
mailer_password (null):
secret (ThisTokenIsNotSoSecretChangeIt):

my_project_nameの中身はこんな感じになっています。

$ ls -al
合計 109
drwxr-xr-x+ 1 **** ****     0 5月   5 18:17 .
drwxr-xr-x+ 1 **** ****     0 5月   5 18:17 ..
-rw-r--r--  1 **** ****   248 5月   5 18:17 .gitignore
drwxr-xr-x+ 1 **** ****     0 5月   5 18:17 app
drwxr-xr-x+ 1 **** ****     0 5月   5 18:17 bin
-rw-r--r--  1 **** ****  2599 5月   5 18:17 composer.json
-rw-r--r--  1 **** **** 70459 5月   5 18:17 composer.lock
-rw-r--r--  1 **** ****  1065 5月   5 18:17 LICENSE
-rw-r--r--  1 **** ****   973 5月   5 18:17 phpunit.xml.dist
-rw-r--r--  1 **** ****  2285 5月   5 18:17 README.md
drwxr-xr-x+ 1 **** ****     0 5月   5 18:17 src
drwxr-xr-x+ 1 **** ****     0 5月   5 18:17 tests
drwxr-xr-x+ 1 **** ****     0 5月   5 18:19 var
drwxr-xr-x+ 1 **** ****     0 5月   5 18:17 vendor
drwxr-xr-x+ 1 **** ****     0 5月   5 18:17 web

$ php bin/console --version
Symfony version 3.0.5 - app/dev/debug

バージョンは何も指定しないと、3.0.5になるようですね。
(2016年5月5日現在)

最後に動作確認を

PHPのビルトインサーバーを立ち上げて、繋いでみるのが一番楽だと思います。

$ bin/console server:run

上記のコマンドを実行して、ブラウザから↓にアクセスします。
http://127.0.0.1:8000/

正常に動いていれば、こんな↑ページにアクセスできると思います。

私の場合、ここでFatal Errorが出まして…直接ファイルを修正して突破しました。

$ vi my_project_name/var/cache/dev/classes.php

5863行目の } を ; にしました。
PHPをよく知らない人は、いじらないほうが無難かも…。

以上でした。

2016年5月版！手軽に開発環境作成、Windows10にXAMPPをインストール！

はじめに

お手軽にWebサイト開発をするなら、やはりオールインワンのXAMPPは便利です。
ということで、インストールしてみることに。
※この作業は2016年5月に行っています！情報はすぐに古くなりますから…。

手順紹介

まずはWindows向けのインストーラーをダウンロードします。
108MBもありました…。

www.apachefriends.org

ダウンロードしたら、インストーラーを実行します。
そうすると、何やら英語のメッセージがいくつか出ました。

1つ目は、ウイルス対策ソフトが動いていると表示されるメッセージのようです。
動きが遅くなるか、ソフトのインストールに影響があるかもしれません、といった感じです(ざっくり訳)。

私の場合は最終的に問題なかったので、構わず続けます。

もう1つは、WindowsのUAC(User Account Control、ユーザーアカウント制御？)機能により、XAMPPの機能が制限されちゃうよ、というお話です(ざっくり訳)。
避ける方法としては、

1. インストール先を"C\Program Files (x86)"にしない
2. UACを無効にする

があるそうですが、私は1で回避。
Cドライブ直下にインストールしました。

ここから先は、いわゆる普通のインストーラーの手順になります。

この画面では、インストールしたいものを選択します。
私の場合は、ApacheとMySQLとPHPだけあればよかったので、それだけにしました。
最悪必要になったときに、あとからインストールすればよいでしょう。

インストールする場所は、上でも書きましたが、Cドライブ直下にします。

ここではBitnami？という、WordPressなんかを入れられるフリーのインストーラーの紹介をされますが、要らないのでチェックを外しました。

これで準備は完了。Nextをクリックすれば…。

インストールが始まります。

ここでWindowsから注意が入りました。
Apacheを入れたことで、他のPCからのアクセスを受け入れることが可能になります。
例えば、他のPCやスマホからXAMPPを入れたPC上に作成したWebサイトを見れるようになります。

他からはアクセスさせたくない、単に自分のPC内で完結したあくまで開発環境を作りたいんだ、という人はチェックを外しましょう。
私の場合は、家庭内LANにだけ公開するWebサイトを作成したかったので、上にだけチェックを入れています。

知識に自身がない方は、下にチェックを入れることはオススメできません。

これで完成です。
チェックを入れてFinishを押せば、コントロールパネルが開きます。
動作確認の意味で、Apacheを起動してみるとよいと思います。

起動後に下記URLを開いて、エラーにならなければOKでしょう。
http://localhost/

ちなみに、ここにアクセスしています。
C:\xampp\htdocs\index.php

最後に

Webサイトを作成する上では、やはりLinux系OSのマシンや仮想環境を用意したいところですが…。
簡単に環境を準備するには、やはりXAMPPが一番だと思いました。

長くなりましたが、以上でした。

Chosenプラグインの使い方（基礎編）

はじめに

あまり日本語の情報がないので、まとめようと思いました。
マニュアルにないことを意識して書きます。
今回は基礎編ということで、割と浅い内容です。

その後、基礎編2を書きました。
hrroct.hatenablog.com

発展編も書きました。
hrroct.hatenablog.com

Chosenプラグインとは

Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes

「長くて扱いづらいセレクトボックスを使いやすいものにします」(勝手な意訳)
とあるように、selectタグのUIを変化させるものです。
リンク先にサンプルがたくさんあるので、実際にいじってみるのが早いです。

使い方

サンプルはこちら↓
Edit fiddle - JSFiddle

下記サイトを使って実際に書いてみました。
便利なサイトがあるものですね。

1. Create a new fiddle - JSFiddle
2. chosen - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

各ライブラリのバージョンですが、

jQuery 3.1.1
Chosen 1.6.2

を使います（装飾にbootstrapも少々）。
値をセットしたり、選択肢を変えた後には必ず更新イベントを実行するのがポイントでしょうか。

ベース

<select id="target">
  <option></option>
  <option value="1">1st Option</option>
  <option value="2">2nd Option</option>
  ...

選択された値を取得する

var value = $('#target').val();
var text  = $('#target option:selected').text()

値をセットする

// Chosenのバージョンが低い場合は'liszt:updated'で
$('#target').val(5).trigger('chosen:updated');

値をクリアする

// Chosenのバージョンが低い場合は'liszt:updated'で
$('#target').val('').trigger('chosen:updated');

選択肢を追加する

これの応用で、減らしたり、選択肢の全とっかえも可能です。

// Chosenのバージョンが低い場合は'liszt:updated'で
var newOption = $('<option>').attr('value', 15).text('15th Option');
$('#target').append(newOption).trigger('chosen:updated');

有効化、無効化

// Chosenのバージョンが低い場合は'liszt:updated'で
// 無効化
$('#target').prop('disabled', true).trigger('chosen:updated');
// 有効化
$('#target').prop('disabled', false).trigger('chosen:updated');

基礎編は以上です。
また思い出したら、追記するかもしれません。

BashのPS1についての忘備録

はじめに…

異なるPC、サーバーに設定しようと思うたびに、その書式や設定の仕方を忘れるのがプロンプトの表示設定。
その仕組み、書き方を残しておこうと思います。

PS1="\[\033[1;34m\][\$(date +%Y%H%M)][\u@\h:\w]$\[\033[0m\] "

こういうやつですね。
私は時間が空くと読めなくなります(笑)。

最初にばらしてしまうと、私は↓のように設定しています。

PS1="\[\033[0;34m\]\u\[\033[0;36m\]@\h\[\033[0;37m\]:\w$\[\033[0m\] "

「userName@serverName:~/work/$ 」
こんな感じで表示されます。

参照元

ここを見れば書いてあるのですが…。
でも長いので探しづらいですし、英語ですしね…。

www.gnu.org

ちなみにPS1とは？

「The primary prompt string.」です。まんまですね。

ちなみに、PS1があるということは、PS2もあります。
こちらは「The secondary prompt string.」で、要は\(バックスラッシュ)で改行した場合の2行目移行のプロンプトの表示文字列の指定になります。
デフォルトは「>」です、と聞くとピンと来やすいのではないでしょうか。

記法について

表示する項目

上記リンクのここに書いてありますが…
「6.9 Controlling the Prompt」
いくつか抜粋すると、こんな感じです。

\d	The date, in "Weekday Month Date" format (e.g., "Tue May 26").
\h	The hostname, up to the first ‘.’.
\H	The hostname.
\n	A newline.
\t	The time, in 24-hour HH:MM:SS format.
\T	The time, in 12-hour HH:MM:SS format.
\u	The username of the current user.
\w	The current working directory, with $HOME abbreviated with a tilde (uses the $PROMPT_DIRTRIM variable).
\W	The basename of $PWD, with $HOME abbreviated with a tilde.
\[	Begin a sequence of non-printing characters. This could be used to embed a terminal control sequence into the prompt.
\]	End a sequence of non-printing characters.

下2つはピンと来ないかもしれませんけど、装飾で必要になります。

これを見ると、[\u@\h:\w]ここらへんの意味がわかります。
「[」「]」「@」「:」のようにそのまま書いてあるものはそのまま表示されます。

一方で、[\$(date +%Y%H%M)]のようにコマンドの実行も可能になります。

装飾

色及び装飾(太字、アンダーライン)はまとめて指定します。
これは上記リンクのマニュアルにはなかったかも？

Color	Regular	Bold	Underline	Background
■Black	0;30m	1;30m	4;30m	40m
■Red	0;31m	1;31m	4;31m	41m
■Green	0;32m	1;32m	4;32m	42m
■Yellow	0;33m	1;33m	4;33m	43m
■Blue	0;34m	1;34m	4;34m	44m
■Purple	0;35m	1;35m	4;35m	45m
■Cyan	0;36m	1;36m	4;36m	46m
■White	0;37m	1;37m	4;37m	47m

Text Reset

0m

引用元:
Bash/プロンプトのカスタマイズ - ArchWiki

上記カラーコードを、「\[\e[」(または「\[\033[」)と「m\]」で挟む必要があります。
記号ばかりでわかりづらい…。

この前後に付いている「\[」「\]」は、カラーコードが実際には表示されないものになるので付けています。
こうすることで、カーソルの位置をbashに示していることになります。

装飾のキャンセルは「\[\033[0m\]」を指定することになります。
これであらかた説明がつくはず…。

以上でした。