社内の開発サーバにSSLを導入したい

モールと連携する際に最近ではAPIを使って行うのがスタンダードになってきましたが、テスト環境であってもロールバックURLにSSLを求められることがたまにあります。社内の開発サーバにわざわざ有料のSSLを適用するのは少々もったいないので最近話題になっているフリーのSSL「Let’s Encrypt（レッツエンクリプト）」を社内の開発サーバに適用したのでその手順を記録しておきます。

環境（弊社の開発サーバ）

• アパッチです
• DDDNSでドメインを付与しています
• ポート80と443を開けています
• ベーシック認証をしていません

やりかた

1.依存パッケージをYUMでインストールしておきます

# yum install -y httpd mod_ssl git openssl

2.任意のフォルダに移動します

# cd /opt

3.GITでファイルをクローンします

# git clone https://github.com/letsencrypt/letsencrypt

4.移動します

# cd letsencrypt

5.ヘルプファイルの確認

# ./certbot-auto --help

6.それでは鍵を発行します

# ./certbot-auto certonly --non-interactive --agree-tos --webroot -w /var/www/html -d [sample.com] --email [sample@sample.com]

オプション	説明
certonly と –webroot	ウェブサーバを停止することなく SSL/TLS 証明書を発行したい場合には、Webroot プラグインを使用します
-w	Webサーバのドキュメントルートディレクトリ（ウェブサーバで公開するコンテンツが入っているディレクトリ）を指定します、/var/www/htmlから変更している場合は適宜変更してください
-d	ドメイン名です、DDDNSサービスなどで設定しているドメインを指定します
–email	期限が切れそうになったら告知したいメールアドレスを指定します

7.成功しているか確認

# cd /etc/letsencrypt/live/

指定したドメイン[sample.com]のフォルダが出来ていたら成功です。

超簡単ですね（感動）！

中にはpemファイルが入っているので興味があったら見てみましょう。

8.SSLを設定します

# vi /etc/httpd/conf.d/ssl.conf

の中を次のように書き換えます

ServerName [sample.com]:443
SSLCertificateFile /etc/letsencrypt/live/[sample.com]/cert.pem
SSLCertificateKeyFile /etc/letsencrypt/live/[sample.com]/privkey.pem
SSLCertificateChainFile /etc/letsencrypt/live/[sample.com]/chain.pem

9.再起動

service httpd restart

DDDNSのドメインでSSLに接続できると思います

無料！無料！ワッショイ！嬉しいですねー

10.自動更新

Let’s Encryptは3か月で有効期限が切れてしまうので最後にCRONで定期更新するようにしておきましょう

#crontab -e
50 3 * * * /opt/letsencrypt/certbot-auto renew --post-hook "/usr/sbin/apachectl graceful"

方法１：アダプター設定の変更から変更する

１．「コントロールパネル」＞「ネットワークと共有センター」＞「アダプターの設定の変更」を選択してネットワーク接続を選ぶ

２．「Alt」キーを押してファイルメニューを表示、「詳細設定」＞「詳細設定」を開く

３．「アダプタ」および「バインド」から優先したい接続方法（今回の場合有線LAN）を選択し、上矢印をクリックしてリストの一番上へ移動。OKをクリックして設定完了

「詳しくは、LifeHaker参照」

http://www.lifehacker.jp/2013/05/130508force_cable_connection.html

上記の方法で解決することがあるようですが、私は解決しませんでした。

方法２：コマンドラインでMet値を変更する

「複数のネットワーク接続が可能な場合、Windowsはメトリック値（ネットワーク間の距離を表す指標）が最も低いものを自動選択する」とのことなので、

netshでWifiのメトリック値を大きいものに変更してしまいましょう。（設定は自己責任でお願いします）

１．windows8のアプリ一覧から「コマンドプロンプト」を探して「右クリック＋管理者として実行」を押す。

２．「netsh interface ipv4 show interface」でインターフェイスの一覧を出す

３．Wi-FiのIdxを見る（私の場合は３）、Metが5なので一番大きい60にしたいと思います

４.「netsh interface ipv4 set interface 3 met=60」でメトリック値を変更、確認

５．再起動して確認。

私はここまでして、やっと優先＆無線の同時接続時に有線接続が優先されるようになりました。

設定は自己責任で！

百害あって一利なしの「CapsLock」

「突然入力が全部大文字になった」「突然日本語入力が出来なくなった」。はい、こういったトラブルの原因になっているのが大体「CapsLock」キー、全然使わないのにも関わらず、キーボードの押しやすいゴールデンポジションに鎮座しているため不用意に押してしまいこういったトラブルをおこします。そんな厄介者「CapsLock」キーを無効にするソフトウェアなども出回っていますがこんな奴のためにソフトをインストールするなんてもったいない！レジストリを変更して無効にしてやりましょう。

レジストリを変更の際の注意

対象はwindows7です。あとはレジストリ系のノウハウではお約束の忠告ですが、レジストリの変更は危険を伴うため実行は自己責任ニンニンでお願いしますね。

レジストリ操作ファイルを作る

分かる人は「regedit」でやってもらっても構わないですが、手軽なので以下の方法をご提案します。

1.メモ帳を開く

メモ帳を開いて下さい

2.以下をコピペ

Windows Registry Editor Version 5.00
 
[HKEY_LOCAL_MACHINESYSTEMCurrentControlSetControlKeyboard Layout]
"Scancode Map"=hex:00,00,00,00,00,00,00,00,02,00,00,00,00,00,3a,00,00,00,00,00

3.名前をつけて保存

ファイルの種類を「すべてのファイル」にして「CapsLockOFF.reg」という名前で保存します。

「.reg」という拡張子にするのがミソです。

成功するとこんなアイコンになります。

4.ダブルクリック

出来たアイコンをダブルクリックすれば完了です。

再起動して「CapsLock」が無効になっていることを確認しましょう。

無事成功したあとは「CapsLockOFF.reg」は削除してもらって構いません。

マウスがボタンに重なったら音を出す

今までWEBページで音を出すのはマナー的にご法度でしたが、

申し込みボタンに音を付加することでクリック率が高くなるというデータもあり

WEBの技術屋の常識とお客様の認識は異なってきているのかもしれません

最近はHTML5で手軽に実装できるようにもなったので使ってみるのも手かもしれません。

但し、今までどおり音が鳴る旨の注意文はあったほうがいいのかなとも思います。。

今回作るボタンはこんなぼたん（※音がなりますので注意）

マウスオーバーすると音が鳴るボタン

まず効果音を用意する

マウスオーバーしたら「チャリ～ン」となるようにするため効果音を用意します

今回私が使わせてもらったのはTAM music Factoryさん

http://www.tam-music.com/index.html

マウスオーバーの効果音ですから、大体1秒位のファイルがいいでしょう

TAM music Factoryさんからお好きなwavファイルをダウンロードさせてもらいます

音声ファイルを３種類に変換する

なるべく多くのブラウザで音声を再生できるように音声ファイルを３種類に変換します

今回「WAV」ファイルが手に入ったので、あとは「MP3」「OGG」ファイルに変換しましょう

変換は以下のサイトがお手軽です

http://media.io/ja/

ページに音声ファイルを仕込む

まずはページに音声ファイルを仕込みます

変換した３種類のファイルをHTML5の「audio」タグで埋め込んで下さい

 
<audio id="overSound" preload="auto">
	<source src="sound.mp3" type="audio/mp3">
	<source src="sound.ogg" type="audio/ogg">
	<source src="sound.wav" type="audio/wav">
	<p>※お使いのブラウザはHTML5のaudio要素をサポートしていないので音は鳴りません。</p>
</audio>
 

Javascriptを書く

Jqueryを読み込んだ後に以下のように記述します。

HTML5のaudioは一旦playをすると終了するまで音が鳴らない仕様になっています

これではマウスオーバーを連続で行った場合に、現在再生されている音が終了するまで

次の音が鳴らなくなってしまいますので「currentTime」で開始時間をリセットしてやります。

 
$(function(){
 
	//音を鳴らす
	$('.appButton').mouseover(function(){
 
		document.getElementById("overSound").currentTime = 0;
		document.getElementById("overSound").play();
 
	});
 
 
});
 
 

最後にボタンを配置します

以下のとおりボタンを配置します

 
<img src="button.jpg" class="appButton">
 

これにてマウスオーバーすると音が鳴るボタンの完成です

マウスオーバーすると音が鳴るボタン