読者です 読者をやめる 読者になる 読者になる

HRR Co., Ltd.

技術的な記録を残していくことを目的としています。そのうち関係ないことを書き出しそう。

Cygwinにapache2をインストール(2016年11月版)

はじめに

タイトルのとおりですが…
XAMPPではなく、Apache2をCygwinに入れて、http://localhost/でアクセスできるところまでやりました。
その手順を公開します。
※今回Windowsのサービスへの登録は行っていません!

手順

Apache2のインストール

まず、インストールから。
入れているapt-cygにより、コマンドは多少違いますが…
searchall or find すれば、見つかるはずなのでそれをinstallします。

$ apt-cyg searchall apache2
$ apt-cyg install apache2

ちなみに、各ファイルの場所はこんな感じです。

ファイルの種類 場所
exeファイル /usr/sbin/httpd.exe
設定ファイル /etc/httpd/conf/httpd.conf
デフォルトのDocumentRoot /srv/www/htdocs
デフォルトのエラーログ /var/log/httpd/error_log
デフォルトのアクセスログ /var/log/httpd/access_log

この時点でやっておくべき最低限の設定は、サーバー名の変更でしょうか。
localhostでアクセスできるようにしておきます。

#
# ServerName gives the name and port that the server uses to identify itself.
# This can often be determined automatically, but we recommend you specify
# it explicitly to prevent problems during startup.
#
# If your host doesn't have a registered DNS name, enter its IP address here.
#
#ServerName www.example.com:80
ServerName localhost:80

Cygwinならでは、cygserverの起動

cygserverとは?

↓公式サイトに正確な情報が記載されています(英語)。
Cygserver

cygwin*.dll ではまかなえない機能を、Windowsの機能を用いて提供するプログラムらしいです。
apache2を起動するには、cygserverの機能が必要ということですね。
(浅い解説ですみません…時間の都合で先に進みます…)

cygserverデーモンを起動するには、まずは設定が必要になります。

設定ファイルを作成する

cygserver-configスクリプトを実行します。
パスが通ってない場合は "/usr/bin/cygserver-config" で。

また、途中で "Do you want to install cygserver as service?" と聞かれるので、今回は "no" で進めます。
(私の用途が、Windowsのサービスに登録するほどではないので)

$ cygserver-config
Generating /etc/cygserver.conf file

Warning: The following function requires administrator privileges!

Do you want to install cygserver as service?
(Say "no" if it's already installed as service) (yes/no) no

Further configuration options are available by editing the configuration
file /etc/cygserver.conf.  Please read the inline information in that
file carefully. The best option for the start is to just leave it alone.

Basic Cygserver configuration finished. Have fun!

"Have fun!" と言われたら、いざcygserverを起動してみましょう。

cygserverを起動する

バックグラウンドで起動します。

$ /usr/sbin/cygserver &
$ cygserver: Initialization complete.  Waiting for requests.

プロセスが立ち上がっているのを確認できたら、成功です。

$ ps | grep cygserver

Apacheの起動

下記コマンドを実行してみます。
エラーログ (/var/log/httpd/error_log) を "tail -f" しておくのをオススメします。

$ /usr/sbin/httpd -k start

私の場合は、下記エラーが表示されました。

AH01177: Failed to lookup provider 'shm' for 'slotmem': is mod_slotmem_shm loaded??
AH00020: Configuration Failed, exiting

"is mod_slotmem_shm loaded??" って言われたので、httpd.conf を編集します。
↓ここのコメントアウトを解除しました。

vi /etc/httpd/conf/httpd.conf
...
#LoadModule slotmem_shm_module modules/mod_slotmem_shm.so
LoadModule slotmem_shm_module modules/mod_slotmem_shm.so

そして、改めてApacheを起動してみると…
http://localhost/ に "It works!" が表示されました。
よかった…。

最後に

cygserverの存在は知らなかったので、いい勉強になりました。

Apacheのコマンドはヘルプを見るといろいろ載っています。
停止や再起動は↓こんな感じです。

$ /usr/sbin/httpd -h
 
$ /usr/sbin/httpd -k start
$ /usr/sbin/httpd -k stop
$ /usr/sbin/httpd -k restart

以上でした!

CSSでアイコンを作成してみた(その1)

はじめに

アイコンがほしい。作りたい。
自力で画像やSVGにてアイコンを作成できればいいのですが、私にIllustratorInkscapeのスキルはございません…。

そういえば、世間ではCSSでアイコンを作成している方がいらっしゃいます。

当初は仕組みを全然理解していませんでしたが、調べて作成するところまでやってみました。
もし使いたい方がいれば、ご自由にコピペしていってください。

こんな感じです

f:id:hrroct:20161111162954p:plain

ソースコード

下記の内容をhtmlファイルとして保存して、ブラウザで開いてみてください。
Google ChromeFirefox、IE11の最新版で確認は済んでおります。

  1. "font-size"をいじると大きさが変えられます。
  2. 色を変えるには「#c0c0c0」を差し替えてください。
<html>
    <head>
        <style type="text/css">
        <!--
.icon-building {
    display: inline-block;
    vertical-align: middle;
    font-size: 50px;
    width: 1.0em;
    height: 1.3em;
    border: 0.1em solid #c0c0c0;
    border-radius: 0.1em;
    margin: 0 0.2em;
    background:
        /* 上段窓、左から */
        linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.1em 0.1em / 0.2em 0.2em no-repeat,
        linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.4em 0.1em / 0.2em 0.2em no-repeat,
        linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.7em 0.1em / 0.2em 0.2em no-repeat,
        /* 中段窓、左から */
        linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.1em 0.4em / 0.2em 0.2em no-repeat,
        linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.4em 0.4em / 0.2em 0.2em no-repeat,
        linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.7em 0.4em / 0.2em 0.2em no-repeat,
        /* 下段窓、左から */
        linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.1em 0.7em / 0.2em 0.2em no-repeat,
        linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.4em 0.7em / 0.2em 0.2em no-repeat,
        linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.7em 0.7em / 0.2em 0.2em no-repeat,
        /* 入り口 */
        linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.3em 1.0em / 0.4em 0.3em no-repeat;
}
        //-->
        </style>
    </head>
    <body>
        <span class="icon-building"></span>
    </body>
</html>

ポイント

ここでの肝は"backgroup"と"linear-gradient"でしょう。
linear-gradientを使いつつもグラデーションせず、複数の四角形を位置をずらして作成しております。

background - CSS | MDN

linear-gradient - CSS | MDN

"linear-gradient"行を細かく説明すると、こんな感じです。

linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.1em 0.1em / 0.2em 0.2em no-repeat
                ---------------------------  -----------   ----------- ---------
                 |                            |             |           |
                 `- 上から下に向かって、同じ色でグラデーション(塗りつぶしと同義)。
                                              |             |           |
                                              `- 開始位置。"background-position"。
                                                            |           |
                                                            `- サイズ。"background-size"。
                                                                        |
                                                                        `- 繰り返し描画。"background-repeat"。

"to bottom"はデフォルト値なので、なくてもよいですが説明のためにつけています。

他にも…

こんなものも作れます。

f:id:hrroct:20161115165626p:plain

<html>
    <head>
        <style type="text/css">
        <!--
.icon-battery {
    display: inline-block;
    vertical-align: middle;
    font-size: 50px;
    width: 1.7em;
    height: 1.2em;
    margin: 0 0.2em;
    background:
        /* 電池本体(上の横線から時計回りに並べました) */
        linear-gradient(#c0c0c0, #c0c0c0) 0.0em 0.0em / 1.4em 0.1em no-repeat,
        linear-gradient(#c0c0c0, #c0c0c0) 1.4em 0.0em / 0.1em 0.2em no-repeat,
        linear-gradient(#c0c0c0, #c0c0c0) 1.4em 0.2em / 0.3em 0.1em no-repeat,
        linear-gradient(#c0c0c0, #c0c0c0) 1.6em 0.2em / 0.1em 0.5em no-repeat,
        linear-gradient(#c0c0c0, #c0c0c0) 1.4em 0.7em / 0.3em 0.1em no-repeat,
        linear-gradient(#c0c0c0, #c0c0c0) 1.4em 0.8em / 0.1em 0.2em no-repeat,
        linear-gradient(#c0c0c0, #c0c0c0) 0.0em 0.9em / 1.4em 0.1em no-repeat,
        linear-gradient(#c0c0c0, #c0c0c0) 0.0em 0.0em / 0.1em 0.9em no-repeat,

        /* 電池残量 */
        linear-gradient(#c0c0c0, #c0c0c0) 0.2em 0.2em / 0.3em 0.6em no-repeat,
        linear-gradient(#c0c0c0, #c0c0c0) 0.6em 0.2em / 0.3em 0.6em no-repeat,
        linear-gradient(#c0c0c0, #c0c0c0) 1.0em 0.2em / 0.3em 0.6em no-repeat;
}
        //-->
        </style>
    </head>
    <body>
        <span class="icon-battery"></span>
    </body>
</html>

最後に

ご覧の通り、比較的単純なアイコンであれば、わりと簡単に作れます。
※手間はかかりますけど…

より複雑なアイコンを作成しようとすると、疑似要素を使用する必要が出てくると思いますが…
それはまたの機会に。
(私のプロフィールアイコンは、この疑似要素を使用して作成してみました)

デザイナーさんでなくとも、こういったアイコンが自力で作成できるのはいいですね!
画像と違って、拡大してもきれいに見えるのもポイントが高いです。

以上でした。

MySQL Workbenchが停止したときの対処法

どんな現象?

MySQL Workbenchが突如、落ちることがあります。
しかも、一度落ちたら立ち上がらない。
しかも、結構頻発します。

「アプリケーションが応答していません」
みたいなダイアログが出て、固まってしまうんですね。

ちなみに原因はわかっておりません…

【2017/02/20 追記】
動かなくなったときの設定ファイルとの差分を見てみましたが、それでもわからず…。

でも対処法はわかる

「%APPDATA%\MySQL\Workbench」ここにある「wb_options.xml」このファイル。
このファイルを消すだけで、起動するようになります。

しかし…
設定した内容がどうも消えてしまうようなんですよね。
再設定にいつも困るので、それもメモをしておきます。

【2017/02/20 追記】
最近は接続が成功した後に、「wb_options.xml」をリネームして同じフォルダに入れております。
で、動かなくなったらこれと入れ替える。

最低限やっておきたい設定

SQLは大文字派

f:id:hrroct:20161101145723p:plain

WorkbenchにはSQLの入力補助機能がありますが、小文字なんですよね…
大文字で入力したい私は、チェックを外します。

MyISAMなのにオートコミット?

f:id:hrroct:20161101145724p:plain

Workbenchはデフォルトでオートコミット機能がONになっています。
なんて危険な…!
というわけで、私はオートコミット機能をOFFにしています(チェックを外します)。
データを反映させるときは、COMMITを忘れずに。

タブよりスペース派

f:id:hrroct:20161101145722p:plain

タブキーを入力時に、タブではなくスペースを入力したい人は、チェックを入れましょう。
私は入れたい派です。

最後に…

Workbenchが落ちないのが一番なんですがね…
しばらくこれでしのごうと思います。

2016年版!apt-cyg を入れよう

はじめに

Cygwinを導入しているのなら、apt-cygを入れると便利です。
apt-cygはCygwinのパッケージマネージャーです。

Cygwinのexeファイルを実行することで、インストールもできますけど…
毎回あれを使うのも大変ですし。

注意事項

ちなみに、公式からfolkされたいろんな種類のapt-cygがあるようです。
使用できるオプションも違いがあります。
今回は公式のものをひとつだけ載せておきます。

公式サイトはこちら。MITライセンスです。
github.com

導入方法

公式サイトにあるとおりですが…私は"/bin"を"/usr/local/bin"にしました。
適当な作業ディレクトリにて、下記を実行します。

lynx -source rawgit.com/transcode-open/apt-cyg/master/apt-cyg > apt-cyg
install apt-cyg /usr/local/bin

参考

別の種類のapt-cygについては、こちらがかなり詳しいので、見てみることをおすすめします。
seesaawiki.jp

以上でした!

Cygwinにwatchコマンドを入れたい

結論からいうと、これ↓で使えるようになります。

$ apt-cyg install procps

"watch"を直接指定してもダメみたいです。
findしてみた結果が↓こちら。

$ apt-cyg find watch
Cache directory is /setup
Mirror is http://**********
Updating setup.ini
signature verified: setup.bz2.sig
signature verified: setup.ini.sig
Updated setup.ini

Searching for installed packages matching watch:

Searching for installable packages matching watch:
xfce4-mailwatch-plugin
xfce4-mailwatch-plugin-debuginfo

ちなみに、apt-cygを使用するにはこちらをどうぞ。
hrroct.hatenablog.com

単なる覚え書きでした。

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 55 18:17 .
drwxr-xr-x+ 1 **** ****     0 55 18:17 ..
-rw-r--r--  1 **** ****   248 55 18:17 .gitignore
drwxr-xr-x+ 1 **** ****     0 55 18:17 app
drwxr-xr-x+ 1 **** ****     0 55 18:17 bin
-rw-r--r--  1 **** ****  2599 55 18:17 composer.json
-rw-r--r--  1 **** **** 70459 55 18:17 composer.lock
-rw-r--r--  1 **** ****  1065 55 18:17 LICENSE
-rw-r--r--  1 **** ****   973 55 18:17 phpunit.xml.dist
-rw-r--r--  1 **** ****  2285 55 18:17 README.md
drwxr-xr-x+ 1 **** ****     0 55 18:17 src
drwxr-xr-x+ 1 **** ****     0 55 18:17 tests
drwxr-xr-x+ 1 **** ****     0 55 18:19 var
drwxr-xr-x+ 1 **** ****     0 55 18:17 vendor
drwxr-xr-x+ 1 **** ****     0 55 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/

f:id:hrroct:20160505190113p:plain

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


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

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

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


以上でした。