gvim(+kaoriya) + WSL

ちょっと躓いたので、備忘録。

gvim(+Kaoriya)で特に何も設定しないと、シェルは cmd.exe が使われますよね。8.1から:terminalが使えるようになったので、とりあえず %USERPROFILE%\_gvimrc に以下の記述をつけてシェルをWSLのbashにしました・・・。

set shell=C:\WINDOWS\System32\bash.exe

一瞬だけ自己満に浸ってしまいましたが・・・コマンドラインモードで次を実行すると・・・

:r !date

テンポラリファイルがオープンできない旨のエラーが出て撃沈。

困ったときのグーグル先生で検索するも探し方が悪いのか解決できない。基本に立ち戻り、vimのヘルプを参照(^^; ( :help options )

shell を変更する場合は、shellcmdflag,shellquote,shellxquote等も変更してね・・・ということらしい。
はじめからこちらを見てれば問題なかった・・・。
ヘルプのとおりに以下のように設定すると、問題なくでけた！

set shell=C:\WINDOWS\System32\bash.exe
set shellcmdflag=-c
set shellquote=\"
set shellxescape=
set shellxquote=

※修正：shellxquoteを空にすると perl のファイルを開く時に ftplugin/perl.vim で標準入力待ちになって帰ってこなくなったので、よくわからないけど引用符をいれたらなんか治った・・・よくわからん。まぁいいや。
※修正の修正：shellxquoteを設定したら今度は !command が動かなくなった・・・ということで戻す・・・。該当ファイル(ftplugin/perl.vim)を見たら perlpath = system('perl -e "join ....");の部分で perlpath を設定しているみたいなので、仕方ないので _gvimrc に let g:perlpath = “ほにゃららら” とかでお茶を濁して切り抜けた。

紆余曲折がありましたが・・・:terminal のおかげで、なかなかスマートに事を為しとげることができ、いとをかし。。。

スクリプトをせっせと書きつつ、コード片をスクリプトに流し込み、動作確認、CTRL-W N で端末ノーマルモードに移行しコピって、スクリプトにペーストとかもうキーボードから手を放さず全部できちゃう！

今までのようにコンソール画面をマウスでチマチマ選択しながらコピペ・・・とかもうおさらばさ！もうWindowsはダサいとか言わせないぜ！・・・・とかいいつつ、使ってるツール、環境は全部Linux由来なんだけど・・・(^^;;; WSLのおかげで、gvimの端末からフツーのWindowsアプリも起動できるし、いうことなし。＼(^o^)／。

ただ、一点惜しむらくは、:term command とすると、当然環境変数PATHからcommandを探そうとします。これを WSL の中で行わせるには、:term bash -c command とかやらないと無理っぽい。この “bash -c “っていうのはイチイチ打つのはメンドイ。しかし、初心者のおいらにはこれまた解決方法が分からず、一向に初心者からなかなか抜け出せないな・・・。

:continue
つづきは part2で

NET::ERR_CERT_COMMON_NAME_INVALID なんだこれ？

備忘録。あしらからず。

WSLのおかげでもうほとんどLinuxな仮想マシンは要らなくなったのでホントにラクチン。まぁ、業務上必要なのでまだまだ HyperVにはお世話にならんといけませんが・・・。

で、WSL-UbuntuにSSL通信(HTTPS)させようと、ひさしぶりにopensslコマンドとか使う。なにげにopensslは万能コマンドすね。乱数からダイジェストから暗号化まで全部できちゃう！(^^; で、まぁ、お約束どおりCA.pl -newcaとかで認証局を作って、認証局の証明書をWindowsの証明書マネージャで「信頼されたルート証明機関」にインポート後、openssl.cnfいじって、あとはお決まりのCSR作って、さっき作った認証局で署名して、そのサーバー証明書(CN=localhost)をapache2に食わせて、https://localhost/ にアクセスしたんすよ。

結果、撃沈。昔はこれでいけたんです！ IE11だと問題ないし。

最新のChrome/FireFox/Edge ぜんぶダメ。chromeだとNET::ERR_CERT_COMMON_NAME_INVALIDとかいう謎のエラーが出る。。。いやいや、証明書のプロパティを見るとちゃんと CN=localhostってなってるし・・・。

で、このエラーをそのままググると、最近のブラウザはCNは無視するみたいで・・・って、よくわからんが、最近は、CNの一致ではなく、SANを見てるんだとか・・・。理屈はともかく、理由が分かればあとは証明書の作り方を変えればオケ。

とりあえず、CSR(署名要求)まではお約束通り。
※openssl.cnfの設定はググればよろし。ただ、CA向け用とサーバー向け用とファイルを分けて使い分けるのが間違いがなくてよろしかと。
デフォルトのopenssl.cnfをCA用として修正し、サーバー証明書作成時に使う設定は openssl-server.cnfと別ファイルにして使ってます。

#1.認証局作成
$ cd /usr/lib/ssl/misc
$ ./CA.pl -newca

# Windowsの証明書マネージャで「信頼されたルート証明機関」にインポートとするため der に変換。
# でも cacert.pem を直接インポートしたら普通にできたので、↓要らないかも。
$ cd demoCA
$ openssl x509 -in cacert.pem -inform pem -out cacert.der -outform der

#2.サーバーキー作成
$ cd /etc/ssl
$ mkdir server; cd server
$ openssl genrsa -out localhost.pem -aes256 2048
$ openssl rsa -in localhost.pem -out localhost.key

#3.署名要求作成
$ openssl req -new -config ../openssl-server.cnf -key localhost.pem -out localhost.csr

そして・・・CSR(署名要求)を認証局に署名してもらうときに、下記の内容のテキストファイルを用意して、-extfile オプションをつけて食わせるといいようです。理屈はどうでもいい。まずは手順さえ覚えて、あとから調べればいいんです。逃げ。

subjectAltName=DNS:localhost

複数の場合はカンマで区切れば行けそう？

subjectAltName=DNS:localhost,IP:127.0.0.1

このファイルを署名するときに食わせる。

$ echo "subjectAltName=DNS:localhost" > localhost.san
$ openssl ca  -config ../openssl-server.cnf -in localhost.csr -out localhost.crt -extfile localhost.san

そして、できた localhost.keyとlocalhost.crt の二つを /etc/apache2/sites-available/default-ssl.conf の SSLCertificateFile とSSLCertificateKeyFile に記述。そして起動する。

$ a2enmod ssl
$ a2ensite default-ssl
$ service apache2 start

そして、1.で作ったcacert.der をデスクトップにコピーして右クリック⇒証明書のインストールで「信頼されたルート証明機関」へストア。

ってなわけで？めでたく、最新のブラウザでも https://localhost/ で緑色の鍵マーク付きで表示された。

iOS版chromeで・・・

備忘録

iPhoneでサイト見るときは、主にchrome使ってます。
iOS10(だったっけ？)から <meta name=”viewport”>に user-scalable=no とか、maximum-scale=1 とか設定されてても、mobile safariではピンチアウトで拡大できるようになったと思うんですが、iOS版chromeだと拡大できませんでした・・・。なんか設定あるのかなーーーー。
小さい字が見づらい時があるので、拡大できないのは不便・・・その時はURLをsafariにコピペして safariで開いて見るんですが・・・メンドクサイ・・・。

いちいちメンドクサイので、ブックマークレット作って登録しておく。

ブックマークレット本体

(function()
  {
    var col=document.getElementsByTagName('meta');
    for(var k in col)
    {
      var name = col[k].getAttribute('name');
      if(name && name.match(/viewport/i))
      {
        var content = col[k].getAttribute('content'); 
        col[k].setAttribute('content',content.replace(/,?user-scalable=\w+/g,'').replace(/,?maximum-scale=[\w\.]/g,''));
        break;
      }
    }
  }
)();

要は、metaタグのviewportから、user-scalable,maximum-scaleを削除するだけ。

で登録用にミニファイしたのは、

javascript:(function(){var col=document.getElementsByTagName('meta');for(var k in col){var name=col[k].getAttribute('name');if(name && name.match(/viewport/i)){var content=col[k].getAttribute('content');col[k].setAttribute('content',content.replace(/,?user-scalable=\w+/g,'').replace(/,?maximum-scale=[\w\.]/g,''));break;}}})();

登録用

PHPでのExcel吐き出しCSVファイルの処理

何度となくハマったPHPでのCSV処理・・・もういやだ。
最初は、fgetcsv で setlocaleし忘れでハマり、改行を含むセルでSplFileObjectを知り、SJIS-WIN でハマり・・・もういやだ。

もうCSVで涙目になるのは嫌なので、一個クラスを作る。

要はCP932エンコードされたCSVファイル用の SplFileObject が欲しい！ってことなんですけどね。
マルチバイト用のSplFileObject、mb_SplFileObjectみたいなもの標準で入れてくんないのかな・・・。

ってなわけで？、
SplFileObjectから派生したクラスを定義。ついでに、read / readAll / each メソッドを追加。これは自己満。
コンストラクタでCP932なCSVファイルを引き受けて、UTF-8に変換した作業用ファイルを作成して、デストラクタで消去。
はじめは file_get_contentsで一気に変換しようかと思ったが、巨大サイズのファイルを渡されるとmemory_limitに引っかかるので・・・(^^;
/usr/bin/nkf とか /usr/bin/iconv とかに丸投げしようかと思ったけど、Windows環境だとメンドーだし。

とりあえず、 jQuery のeachみたいな感じのものが欲しかったので・・・

クラス作るほどのものじゃないんだけどなー・・・・

開発環境見直し for WORDPRESS on WSL

2017/12/21 追記：
bashを終了すると、立ち上げたデーモン全部落ちてしまいますが、Windows10の次のなんちゃら UPDATE で、bashを終了してもデーモンが生き残るようになるとのこと。朗報ですな。うんうん(^▽^)/ っていうか、僕的に、もうWindows要らね、って・・・。 Apple iTunesと Adobe Creative Cloud が linux 対応してくれたらももうWindows使うの終わりかもｗ

2017/11/09 追記：
LAN内の他のPCからアクセスするには、コントロールパネル ≫ Windows Defender ファイヤーウォールの新規受信規則で、ポート80番を開けないといけません。

ちょっと前に今の仕事の開発環境を新しくしたのですが、Windows 10 Fall Creators Update(以下、FCU)で、Windows Subsystem for Linux(WSL)がベータ版から正式版に変わったんで、また見直し。見直しというか、Wordpress用。

HyperVを使った前のやつは、こっち、でCIFSマウントしているディレクトリへのアクセスがたまにエラー？で読み取れなくなるぐらいで、特に不自由もなかったんですが、WSLの記事をググると、思いの他進化しているので、WORDPRESSでのお手軽サイト構築用の環境として整備することにした。

Windows10 FCU からは、限定的ですが、ネットワークフォルダをマウントすることができて、WSLはかなり実用的な開発ツールセットになってきています。しぶしぶMac使っている人（そんな奴いるのか？）は、やっと大好きな(笑) 使い慣れたWindowsでウェブ系のお仕事ができます！(￣▽￣)

BoWそのものは、マイクロソフトストアからインストールできるので、もう説明要らないでしょう。Windows10 FCUから開発者モードにする必要もなくなったし。

手順を記録しとこう、という備忘録です。特にこれといって新しいことが書かれているわけではなく、グーグル先生に聞いた内容を自分用にまとめたものなので、あまり参考にはなりません。あしからず。

＞＞以下の手順を全自動で行うシェルスクリプト

■ パッケージのインストール
apt コマンドで、必要なパッケージをインストールしていきます。sudo するのがかったるいので、全部 root で作業します。
の、前に・・・、まず、/etc/apt/source.list の中のリポジトリを日本のものに差し替えるのが定石だそうですので、変更してからにします。
また、mysql-serverをインストールする最中に、root パスワードを入力するように促されるので適当に。

sudo su -

sed -i.orig -e 's%http://archive.ubuntu.com/ubuntu/%http://ftp.jaist.ac.jp/pub/Linux/ubuntu/%g' /etc/apt/sources.list
apt update
apt -y upgrade

apt -y install apache2 apache2-doc mysql-server mysql-client
apt -y install php php-mbstring php-mysql php-sqlite3 php-gd php-mcrypt libapache2-mod-php

php の方は、必要なモジュールを別途 apt でインストールする必要があります。・・・その辺はまぁ適当に。

■ Apache2 設定
まず、そのまま “service apache2 start” とかやると、ワーニングがでます。まぁ、無視すりゃいいんですが、気になるので・・・。
/etc/apache2/apache2.conf を開いて下記2行を追記します。

AcceptFilter http none
AcceptFilter https none

あと、開発するファイル等が入った、ドライブなり、フォルダなりを apacheから見えるようにしないといけません。
windows.confは、僕の環境では、下記のような感じ

#
# /etc/apache2/sites-available/windows.conf
#
&lt;Directory "/mnt/d/devel"&gt;
AllowOverride All
Options All
Require all granted
&lt;/Directory&gt;
Alias /devel /mnt/d/devel

で、有効化します。

a2ensite windows

php.iniの修正も若干必要ですかね。デフォルトで2MBしかアップロードできませんし、開発環境なんで、memory_limitは無制限にしたい。
ってなわけで、/etc/php/7.0/apache2/php.ini で、以下の項目を修正

date.timezone
memory_limit
post_max_size
upload_max_filesize

それと、まぁ、ほとんど使わないと思いますが・・・DocumentRootが /var/www/html で設定されているのですが、これのオーナーとグループを自分のユーザーにしときましょう。いちいち sudo してコピーするのメンドクサイでしょう。ついでにホームディレクトリにリンクを作っときましょう。

#一度 root を exit して・・・
exit
#myuserは自分のアカウントで置き換える
sudo chown -R myuser:myuser /var/www/html
ln -s /var/www/html ~/wwwroot
# root に戻る
sudo su -

■ MySQL 設定
次、mysql。apacheと同じく、”service mysql start” とかやると、僕の環境ではワーニングが出ます。これも無視すればいいんでしょうけど・・・。
mysqlユーザーのホームディレクトリを作ってやります。すでにあればやる必要なし。

mkdir /home/mysql
chown mysql:mysql /home/mysql
usermod -d /home/mysql mysql

mysql の文字コードを UTF8にしときます。
/etc/mysql/my.cnf を開いて、下記を追記

[client]
default-character-set = utf8

[mysql]
default-character-set = utf8

[mysqld]
character-set-server = utf8

ここで、一旦 mysql を起動して、mysqlクライアントからユーザー、データベースを作っちゃいましょう。

service mysql start
mysql -u root -p

ここから mysql シェル

まずユーザー(wpuser)を作成。パスワードは適当に 0000 とか。
> CREATE USER wpuser IDENTIFIED BY '0000';

WORDPRESS用のデータベースを作っときます。
> CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8;

作ったユーザーに、データベースの権限を全許可します。
> GRANT all privileges ON wordpress.* TO wpuser

> quit

あと、phpMyAdmin は必須っすね。aptコマンドでインストールしてもいいんですが、最新のものをマニュアルで入れときます。

#一旦rootを抜けて、一気に片付けましょう。
exit
cd /var/www/html
wget -O - https://files.phpmyadmin.net/phpMyAdmin/4.7.5/phpMyAdmin-4.7.5-all-languages.tar.gz | tar xvzf -
mv phpMyAdmin-4.7.5-all-languages phpMyAdmin
cd phpMyAdmin
cat config.inc.sample.php | sed -r 's/^(\$cfg\['\''blowfish_secret'\''\]) *= *'\''.*'\''/\1 = '\''32_moji_no_randamu_na_ei_suuji_x'\''/g' > config.inc.php

WSLではサービスとして動かすことができないので、bash を終わらせるとapache,mysqlのデーモンが全部落ちます。まぁバックグラウンドで走らせてしまうと、Windows Serverの顔が立たない(^^;ので致し方ありません。
bashを立ち上げるたびに、

sudo sh -c 'service mysql start; service apache2 start'

とかやる必要があります。まぁこれは、alias 一個作っとけばいいだけなんすけどね。

WORDPRESSでのサイト構築ではもう十分な感じ。でも WSLのubuntuで docker が動いたらこんなメンドクサイことしないで済むのになぁ・・・。いずれ対応してくれることを祈る。

実際にはシェルスクリプトにすることで、インストールしてコマンド一発で、LAMP環境をセットアップできるようしています。
そのスクリプトは、こっち。

Life is Real.

Write only memories

備忘録 – 私的記録

gvim(+kaoriya) + WSL

NET::ERR_CERT_COMMON_NAME_INVALID なんだこれ？

iOS版chromeで・・・

PHPでのExcel吐き出しCSVファイルの処理

開発環境見直し for WORDPRESS on WSL