WSLにTensorFlowをインストール

まずは必要なソフトウェアをインストールしていきます

pyenv

pyenvはpythonのバージョンを管理してくれたりするツールです、2系とか3系とかも簡単に切り替えられたりします。

以下のコマンドでpyenvをインストール

git clone https://github.com/yyuu/pyenv ~/.pyenv

以下のコマンドを実行してパスを通します

echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bashrc
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(pyenv init -)"' >> ~/.bashrc
source ~/.bashrc

バージョンが表示されれば成功！

pyenv --version

anaconda

Anacondaはザックリ言うとPythonとかそれに関連するソフトを一発でインストールして環境構築などメンドクサイことを全部やってくれるソフトです。

こういうソフトを「ディストリビューション」と言ったりします。

以下からパッケージの一覧を表示

pyenv install --list

anaconda3-5.3.1をインストールしましょう

pyenv install anaconda3-5.3.1

anaconda3-5.3.1であれば成功

pyenv versions

anacondaを使うように修正

pyenv global anaconda3-5.3.1
pyenv rehash

仮想環境を作成

仮想環境を生成

conda create -n keras

仮想環境に入る、プロンプトの先頭に「(keras)」と表示されれば成功！

source $PYENV_ROOT/versions/anaconda3-5.3.1/bin/activate keras

Jupyter Notebook

Jupyter Notebookはプログラムの履歴を記録することができます

データ解析などでは必須級のソフトです

conda install jupyter
ipython kernel install --user

TensorFlow with Keras

TensorFlowをインストール

KerasはTensorFlowをインストールすれば一緒にインストールされます

conda install tensorflow

それでは使ってみよう

jupyter notebook

PHPでpuppeteerを動かせるPuPHPeteer

https://github.com/nesk/puphpeteer

プログラムに関してはこちら、詳細に関しては説明しているサイトがたくさんあるので割愛

以下のようなエラーになる

Fatal error: Uncaught NeskRialtoExceptionsNodeFatalException: Failed to launch chrome! 
[FATAL:zygote_host_impl_linux.cc(116)] No usable sandbox! Update your kernel or see 

https://chromium.googlesource.com/chromium/src/+/master/docs/linux_suid_sandbox_development.md

for more information on developing with the SUID sandbox. If you want to live dangerously and need an immediate workaround, you can try using --no-sandbox. 

サンドボックスを切ればエラーは解消されます

$browser = $puppeteer->launch();

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

$browser = $puppeteer->launch([ 'args' => ['--no-sandbox', '--disable-setuid-sandbox']]);

ベーシック認証をパスしたい

$user = '[ベーシック認証のユーザー]';
$pass = '[ベーシック認証のパスワード]';
$page = $browser->newPage();
$page->setExtraHTTPHeaders(array(
	'Authorization' => 'Basic '.base64_encode($user.':'.$pass),
));
$page->goto('[ベーシック認証のページ]');

ページのbodyを取得したい

$pagebody = $page->evaluate(JsFunction::createWithBody("return document.body.innerHTML;"));

windows10上のUBUNTUでgoogle chromeをプログラム制御してみる

Windows 10 バージョン1709（Windows 10 Fall Creators Update、ビルド16299）以降Windows10でLinuxを実行することができるWSL（Windows Subsystem for Linux）が利用できるようになり、WindowsでもXAMPPやHyper-Vを使わずにPHPが編集・プレビュー可能になりました！開発者にとっては嬉しいニュースですね。WSLの立ち位置としてはXAMPPよりLINUXに近く、Hyper-Vよりメモリ効率がよいといった所が長所になるでしょうか。

このWSL機能を使ってgoogle chrome（正確にはヘッドレスクローム）をプログラム制御するまでの手順を記録しておきます。ヘッドレスブラウザの利点としては最近増えて来たJavaScriptを多用したようなサイトのスクレイピングが出来るようになったりします。curlではできなかったことが出来るようになりますね。

JavaScriptパッケージマネージャー「Yarn」をインストール

# curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
# echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
# sudo apt-get update && sudo apt-get install yarn

「Node.js」をインストール

# curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
# sudo apt-get install -y nodejs

ヘッドレスクロームを走らせるフォルダを制作

# cd /mnt/c/html
# mkdir less
# cd less

yarnでヘッドレスクロームを設置

# yarn init
# yarn add chromeless

簡単なテストプログラムを書いてみます

# vi example.js

const { Chromeless } = require('chromeless')
 
async function run() {
  const chromeless = new Chromeless()
 
  await chromeless
    .setUserAgent('Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.63 Safari/537.36')
    .goto('https://www.yahoo.co.jp/')
    .type('hello','#srchtxt')
    .click('#srchbtn')
 
    const screenshot = await chromeless.screenshot({filePath:'/mnt/c/html/hello.png'})
    console.log(screenshot)
}
 
run().catch(console.error.bind(console))

起動するとgoogleChromeがひとりでに動き出します

ログインしたりスクリーンショットをとったりスクレイピングしたり

いろいろなことが出来ますよ

# node hello.js

windows10のWSL Apache2のmod_rewriteを有効にするやり方

.htaccessを設定してもURLの書き換えが出来ない場合モッズリライトが有効になっていない可能性があります（2018/05/24時点では有効ではありませんでした）

mod_rewrite.soモジュールが有効か確認

$ apache2ctl -M

コンパイル時に読み込まれたモジュールは (static)と表示され

apache実行時に読み込んだもの（DSO：Dynamic Shared Object）は(shared)と表示されます

有効ではないですね

Loaded Modules:
 core_module (static)
 so_module (static)
 watchdog_module (static)
 http_module (static)
 log_config_module (static)
 logio_module (static)
 version_module (static)
 unixd_module (static)
 access_compat_module (shared)
 alias_module (shared)
 auth_basic_module (shared)
 authn_core_module (shared)
 authn_file_module (shared)
 authz_core_module (shared)
 authz_host_module (shared)
 authz_user_module (shared)
 autoindex_module (shared)
 deflate_module (shared)
 dir_module (shared)
 env_module (shared)
 filter_module (shared)
 mime_module (shared)
 mpm_prefork_module (shared)
 negotiation_module (shared)
 php7_module (shared)
 setenvif_module (shared)
 status_module (shared)

a2enmodコマンドを使ってmod_rewrite.soモジュールを有効化します

$ sudo /usr/sbin/a2enmod rewrite

a2enmodはモジュールを有効化、逆にa2dismodで無効化します

apache2の設定ファイルを修正してhtaccessを有効にします

$ sudo vi /etc/apache2/apache2.conf

<Directory /var/www/>
        Options Indexes FollowSymLinks
        #AllowOverride None
        AllowOverride All
        Require all granted
</Directory>

apacheの再起動

$ sudo service apache2 restart

windows10標準機能でPHPをプレビューしよう

Windows 10 バージョン1709（Windows 10 Fall Creators Update、ビルド16299）以降Windows10でLinuxを実行することができるWSL（Windows Subsystem for Linux）が利用できるようになり、WindowsでもXAMPPやHyper-Vを使わずにPHPが編集・プレビュー可能になりました！開発者にとっては嬉しいニュースですね。WSLの立ち位置としてはXAMPPよりLINUXに近く、Hyper-Vよりメモリ効率がよいといった所が長所になるでしょうか。

該当の機能を使ってUBUNTU（Ubuntu 16.04.3 LTS）をインストールし

Cドライブ直下のPHPを表示するまでの記録です

WSL（Windows Subsystem for Linux）を有効にして

UBUNTUをインストールするまでは説明しているサイトが沢山あると思うのでググってください

UBUNTUにapacheとPHPを導入する

#まずはインストールに使うapt-getを最新にしておきます

sudo apt-get update

#Apache2をインストールします

sudo apt-get install apache2 -y

#PHPをインストールします

sudo apt-get install php php-mysql libapache2-mod-php php-gd php-mbstring php-pear php-imap php-xml php-pgsql php-mcrypt -y

ドキュメントルートをCドライブ直下に

apache2の設定ファイル「/etc/apache2/apache2.conf」を編集し

DocumentRootを「/mnt/c/」に変更するやりかただと

「403 Forbidden Permission denied」となりうまく表示できなかったため

シンボリックリンクを設定するやり方で実現します

#Cドライブ直下にフォルダ制作

windowsのエクスプローラでCドライブ直下にhtmlフォルダを新規製作します

#WEBのドキュメントルートフォルダを削除します(細心の注意をrm -rfの意味が分からない人は調べてから実行してください)

sudo rm -rf /var/www/html

#Cドライブ直下をドキュメントルートに変更

cd /var/www

sudo ln -s /mnt/c/html

#phpファイルを制作

vi /mnt/c/html/index.php

<?php
    phpinfo();
?>

#Apache2を起動します

sudo service apache2 start

#確認

ブラウザを起動しURLに「localhost」と入れてPHPの情報が出てきたら成功です

インデックスとレコード数と挿入速度の関係

インデックスとインサートの速度の関係

MYSQLの検索が遅い場合はインデックスを張ることで速くなります

しかし、教科書にはやたらとインデックスを張るなと出てきます

理由としては

(1)インサートが遅くなるから

(2)余分なディスクを使うから

２に関しては今のご時世気にすることは少なくなってきたかと思いますが

それでは、実際にMYSQLにインデックスをはってインサートすると

速度はどのように変化していくのか検証してみました。

検証環境

OS:CentOS6.7 64bit
ソフトウェア: MySQL
ソフトウェアバージョン: 5.1.73 - Source distribution
CPU：ATOM

１．フルテキストインデックスを最大数まで張った場合

インデックスの種類	型	数
インデックス	INT	1
フルテキストインデックス	TEXT	63

マシンのパワーにもよると思いますが、80万行目あたりから急激に遅くなって120万行目あたりから１インサートに0.7秒かかっています。

２．インデックスを最大数まで張った場合

インデックスの種類	型	数
インデックス	INT	1
インデックス	VARCHAR(255)	63

マシンのパワーにもよると思いますが、100万行目あたりから急激に遅くなっています、やはりフルテキストインデックスよりかは通常のインデックスのほうが若干遅くなりにくいようですね。

３．インデックスを張らない場合

インデックスの種類	型	数
インデックス	INT	1

当たり前っちゃ当たり前かもしれませんが、インデックスを張らなければレコード数が増えても特に速度の変化はありませんでした。

まとめ

JOINしてたり、複数のインサートが走ったりと設計にもよると思いますが、

大体80万行くらいに収まるようなアプリケーションであれば気にせずインデックスを張っちゃってもいいのかもしれません。

しかし、それをこえると急激に重くなって一レコード0.7秒と時間がめちゃくちゃかかるようになるので

いろいろと試行錯誤しないといけないってことですな

社内の開発サーバに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」でメトリック値を変更、確認

５．再起動して確認。

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

設定は自己責任で！

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

今まで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">
 

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

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