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\]」を指定することになります。
これであらかた説明がつくはず…。

以上でした。

Caps LockキーをCtrlキーに

※2019年3月29日においても、本件は有効でした。
※2023年12月1日においても、本件は有効でした。
　2006年のソフトウェアが今も使えるってすごいですね…。

目的

私は大体のキーボードにて左手小指のひとつ外にあるであろう、Caps LockキーをCtrlとして使用しています。
しかし、手持ちのPCをWindows 8.1からWindows 10にアップデートとしたところ、また元に戻っていたので再設定です。

何が便利？

やはりホームポジションから指を動かさずに、Ctrlキーを使えるということが大きいです。
英数字入力とローマ字入力の切り替えを「Ctrl+Space」でやっている私は、特にCaps Lockは使用しないので潰してます。

手段

いろんなやり方があるとは思いますが、私はこれを使用しています。
technet.microsoft.com

これ、マイクロソフトが公開している「無償のWindowsトラブルシューティングツール」郡のひとつになります。
マイクロソフト純正なら、安心だろうと思い、使用しています。

余談ですが、他にもこのツール群には便利なものがあります。
見ているだけでも面白いです。

仮想デスクトップのソフトもあります。
なぜ今まで標準装備しなかったのか(笑)。

導入の仕方

上に紹介したリンクに実は書いてあります。

Ctrl2cap をインストールするには、Ctrl2cap のファイルを解凍したディレクトリから "ctrl2cap /install" というコマンドを実行します。アンインストールするには、「ctrl2cap /uninstall」と入力します。

つまり、コマンドプロンプトを使うことになります。
その他、注意事項として…

1. 再起動する必要があります。
2. 管理者権限で実行する必要があります。

ここらへんに気をつければ導入は簡単です。

具体的に

管理者権限で実行するには、コマンドプロンプトを右クリックで「管理者権限で実行する」を選ぶのが早いかと思います。
コマンドプロンプトのexeファイルはこちらにあります。

C:\Windows\System32\cmd.exe

そして、ctrl2cap.exeがあるディレクトリに移動して、上記コマンドを実行します。

Microsoft Windows [Version 10.0.10240]
(c) 2015 Microsoft Corporation. All rights reserved.

C:\WINDOWS\system32>cd C:\Users\ユーザー名\Desktop\Ctrl2Cap

C:\Users\ユーザー名\Desktop\Ctrl2Cap>
C:\Users\ユーザー名\Desktop\Ctrl2Cap>ctrl2cap /install

Ctrl2cap Installation Applet
Copyright (C) 1999-2006 Mark Russinovich
Sysinternals - www.sysinternals.com

Ctrl2cap successfully installed. You must reboot for it to take effect.


C:\Users\ユーザー名\Desktop\Ctrl2Cap>
C:\Users\ユーザー名\Desktop\Ctrl2Cap>

管理者権限がない場合、ここで怒られました。
成功したら再起動してくれ、と言われるので、再起動したら完了です。

以上でした。