tanaka's Programming Memo

プログラミングについてのメモ。

Phaserをサンドボックスで試す(1)Phaserの概要とサンドボックスの操作

phaser.io

次へ

PCとスマホのいずれでも動作するゲームが作れるHTML5ゲームフレームワークPhaserを試します。Phaserの公式サイトにあるチュートリアル Making your first Phaser game で紹介されている記事を参考にして、Webブラウザー上でPhaserを簡単に試すことができる Phaser サンドボックスで実装してみます。

Phaserとは

デスクトップやモバイルで動くHTML5ゲームを作るためのフレームワーク(=枠組み)です。ゲームを動かすフレームワークのことをゲームエンジンといいます。ゲームエンジンの最有力なものの一つにUnityがあります。とても使いやすい上に、高度なゲームが作れる優秀なゲームエンジンなのですが、機能が充実しているために相応の性能のPCが必要になります。そのようなPCを持っていない人向けによさそうなのがPhaserです。

Phaserを選んだのは以下のポイントが決め手でした。

  • HTML5で動くので、最新のWebブラウザーが動く環境であれば性能の低いPCでも動かすことができる
  • JavaScriptやTypeScriptといった実務ですぐに役立つ言語が使える
  • 物理シミュレーションをする物理エンジンを持っているので、移動や当たり判定などをUnityと同じように考えて実装できる
  • 初期化のための儀式のようなプログラムはPhaserが裏で処理してくれるので、プログラマーは自分のコードに集中することができる
  • Phaserサンドボックスですぐに試せる

Phaserで学んだ考え方の多くはUnityに応用できます。手元にある古いPCや、1万円程度で入手できる安価な中古PCでまずはPhaserを学習しておいて、Unityが動くPCを手に入れたらUnityに進む、という展望です。

HTML5とは、Webブラウザーの核となるHTML(Hypertext Markup Language)言語のバージョン5のことです。Webブラウザー上で実行できるスクリプト言語であるJavaScriptで制御することで、高度なアプリをWebブラウザー上で動かすことができます。HTML5は共通仕様なので、最新のWebブラウザーがインストールされている環境であれば、Windows, Mac, Linux, Android, iOSなどに関わらず、同じプログラムを実行することができるので、近年重要となっている技術です。

Phaserのサンドボックス

Phaserの公式ページにあるサンドボックスを使うと、Webブラウザー上ですぐに試すことができます。いくつかのテンプレートが用意されているので、真っ新な状態から始めなくて済みます。また、コード補完が効くので入力が簡単にできます。

Phaser - Sandbox - Online Phaser Code Editorを右クリックして、新しいタブで開きましょう。下にスクロールさせると[QuickStart Templates]という項目があります。

f:id:am1tanaka:20170409230902p:plain

  • BLANKETY BLANK
    • 何もない状態から開始
  • SINGLE SPRITE
    • スプライトを1つ表した状態から開始
  • BARE BONES PLATFORMER
    • プレイヤーと地面を表示して、物理エンジンの一つであるArcade Physicsを実装した状態から開始

以上の3種類からはじめの状態を選べます。下に書いてある[Click here]をクリックすると、マウスやタップでビットマップにペイントできる[ART ATTACK]、キーボードで操作できる宇宙船の表示と弾を発射できる[SHOOT-EM-UP]、ドロップゾーンにドラッグ&ドロップできるスプライトを表示する[DRAG AND DROP]が追加で表示されます。

今回は、[SINGLE SPRITE]で開始したいので、[SINGLE SPRITE]を右クリックして、[新しいタブで開く]を選んでください。以下のようなページが表示されます。

f:id:am1tanaka:20170409231522p:plain

Phaserサンドボックスの使い方

サンドボックスのページを開くと、[preload][create][update][render][PLAY][Help]というタブが並び、その下に選択されているタブに応じたものが表示されます。Phaserがゲームを動かす流れは、以下のようになっています。

f:id:am1tanaka:20170415223947p:plain

ゲームに必要な画像や音声を読み込んだり(preload)、ゲームに登場させるものを生成したり(create)、プレイヤーの操作に応じて主人公を動かしたり、敵を動かしたり(update)、Phaserが自動的に描画しない内容を描画したり(render)、そのような処理はそれぞれのタブに書いてきます。

preloadタブ

preloadタブには、プログラムを動かす際の準備の処理を書きます。最初は以下のようなコードが書かれています。

function preload() {

    game.load.baseURL = 'http://examples.phaser.io/assets/';
    game.load.crossOrigin = 'anonymous';

    game.load.image('phaser', 'sprites/phaser-dude.png');

}

function preload() {は、準備の処理を書きますよ、という宣言です。最後の}との間に準備の処理コードを書きます。準備するためのコードが3行すでに書かれています(3, 4, 6行目)。3行目は http://examples.phaser.io/assets/ をベースURLに指定しています。例えばここを、自分の画像をアップロードしたURLに変更すれば、自分で用意したリソースを読み込ませることができます。

http://examples.phaser.io/assets/ を右クリックして、[新しいタブで開く]を選ぶと以下のようなページが開きます。

f:id:am1tanaka:20170409232801p:plain

このページには様々なリソースが用意されています。フォルダー名をクリックしていくと中身を見ることができます。sprites>phaser-dude.pngとクリックすると、今回読み込もうとしているキャラクターの画像が表示されます。

phaser-dude.png

ここにある素材は、開発時には自由に利用することが可能です。ただし、ユーザーが投稿した素材が含まれていて、中にはライセンス的にNGと思われるものも含まれています。公開する作品に利用するのは注意しましょう。

4行目は、異なるドメインから取得したデータへのアクセス方法を指定しています。ユーザー認証などは利用しないので、anonymous (匿名)にしています。

6行目は、画像を読み込んでいます。 http://examples.phaser.io/assets/sprites/phaser-dude.png から読み込んだ画像を、phaserという名前で読み込んでいます。

以上が準備処理です。

createタブ

createタブは、Phaserの環境が生成される時に実行する処理を書く場所です。最初は以下のようなコードが書かれています。

function create() {

    var sprite = game.add.sprite(0, 0, 'phaser');

}

function create() {は、Phaserの環境が生成される時に実行する処理を書きますよ、という宣言です。最後の}との間に生成時の処理コードを書きます。1行だけコードが書かれています。

varというのは、データの入れ物である変数を宣言するものです。その後ろに書かれているspriteというのが変数の名前になります。=に続けてgame.add.sprite(0, 0, 'phaser');というコードがあります。ここでの=は、数学的なイコールではありません。代入を表しています。右辺を処理して、その結果を左辺の変数に代入するという意味です。

game.add.sprite(0, 0, 'phaser');

上記を英単語の意味で読んでいくと、「ゲーム(game)に」「追加(add)する」「スプライト(sprite)を」となります。スプライトとは、ゲームで動かすキャラクターなどの画像の呼び方です。つまり、キャラクターの画像をゲームに追加するコードだと予想できます。これはメソッド呼び出しというもので、Phaserが提供しているメソッドを呼び出して様々な処理を実現していきます。()内にはパラメーターが並んでいます。'phaser'preloadで読み込んだ画像の名前ですので、読み込んだ画像を指定していることが予想できます。では最初の0, 0,はなんでしょう。これはあとで確認します。

updateタブ

updateタブは、画面を1回描画する度に実行される更新処理を書く場所で、Phaserで最も重要なコードがここに書かれることになります。

function update() {

}

上記のようなコードが書かれています。function update() {は、更新処理を書きますよ、という宣言です。最後の}との間に更新の処理コードを書きますが、ここには何も書かれていません。つまり、実行中には何もしません。

renderタブ

renderタブは、自分で画面を描画するためのコードを書く場所です。

function render() {

}

上記のようなコードが書かれています。function render() {は、描画処理を書きますよ、という宣言です。最後の}との間に描画の処理コードを書きますが、ここには何も書かれていません。つまり、現状では自分では何も書かないということになります。

PLAYタブ

PLAYタブは、プログラムの実行結果を確認するためのタブです。クリックして切り替えると、以下のような画面が表示されます。

f:id:am1tanaka:20170409235358p:plain

これが現在のプログラムを実行した結果です。preloadタブで読み込んだPhaserの公式キャラクターであるdude君が、createタブでゲーム画面に追加されて表示されました。

デフォルトでは、画面サイズが800x600ピクセルに設定されています。スペックの低いPCだと、高さが収まらないことがありますので、ちょっと小さくしておきましょう。

Game Size欄が見当たらない時は、ページを下にスクロールさせて表示します。600x450に変更して、[update]ボタンを押してください。

f:id:am1tanaka:20170415231914p:plain

ゲームの画面サイズが少し小さくなります。

Helpタブ

Helpタブに切り替える(1)と、Phaserのヘルプが表示されます。検索ボックス(2)に調べたいPhaserの命令を入力して、知りたいことを調べることができます。

f:id:am1tanaka:20170410001708p:plain

上記は、game.add.image を検索した例です。見たい命令をクリックすると(3)、解説が表示されます。Phaserは英語圏ゲームエンジンなので英語の解説ですが、単語を調べればある程度意味が把握できると思います。また、Google Chromeを利用すると、画面を右クリックして[日本語に翻訳]を選択すると和訳できます。

f:id:am1tanaka:20170410001834p:plain

機械翻訳なので怪しい日本語ですが、単語の意味は分かるので助けになるでしょう。

日本語が怪しいので、英語のまま作業を進めます。日本語に翻訳していたら、[F5]キーを押して再読み込みして翻訳を戻してください。

プログラムを予想する

PLAYタブに切り替えて、動きを観察します。

キーを押しても、マウスで画面をクリックしても何も起きません。updateタブに何も書いていないのでこれは当然ですね。

renderタブに何も書いていないのにキャラクターが表示されたのは何故でしょう?Phaserは、スプライトを画面に追加すると、追加した画像と座標に自動的に表示する機能を持っています。座標と画像が分かっているのだから、わざわざプログラマーが描画する必要はありません。そのような処理はPhaserが自動的に処理してくれるのです。Unityなどのゲームエンジンでもこのような思想は共通です。

renderタブは、線や図形などを直接描画したい時に利用するもので、Phaserが持っている機能で画面を構築する場合は必ずしも使う必要はありません。

コードを変更してみよう

createタブに切り替えてください(1)。

謎が一つ残っていました。3行目の0, 0,の意味です。以下の(2)のように、最初の0100に書き換えてください。書き換えたら、PLAYタブに切り替えて実行結果を見てみましょう。

f:id:am1tanaka:20170410000709p:plain

dude君が先ほどより右に表示されました。

f:id:am1tanaka:20170410000850p:plain

createタブに切り替えて、今度は100, 100,にしてみましょう。

f:id:am1tanaka:20170410001148p:plain

PLAYタブに切り替えると、dude君が下に表示されるようになりました。

f:id:am1tanaka:20170410001232p:plain

以上から、game.add.image()メソッドのパラメーターの意味が予想できたことでしょう。

ここまでのまとめ

  • Phaserの公式ページのサンドボックスの構成と使い方が分かりました
  • 画像や音の素材が用意されていて、すぐに利用することができました
  • 英単語を読んだり、パラメーターを変更して実行結果を見ることで、プログラムの内容を予想することができました

プログラムを学ぶ時には「観察」「予想」「変更」「確認」を自分自身で行うことが大切です。解説を理解しようとするのではなく、解説をヒントにして自ら予想をして、本当にそういう意味かが分かるようにコードを変更してみて、実行結果が予想と一致するかを確認する作業を通して、本質を自分で発見していきましょう。

Phaserサンドボックスの操作が分かりましたので、チュートリアル Making your first Phaser game の開発に進みます。開いているサンドボックスを利用しますので、そのままにして次に進んでください。

ここまで実装したサンドボックスは、以下から確認できます。

(1)のサンドボックス

次から、ゲームの開発を開始します。

次へ

参考URL

はてなブログのプログラムコードに行番号を表示する(2017/4/15修正)

プログラムコードに行番号を表示したかったので、はてなブログのカスタマイズの勉強がてら作成してみました。

出来上がりは以下のような感じ。

let hello = "Hello!";
console.log(hello+"行番号!");

ブログデザインのカスタマイズで、フッターにJavaScriptを追加と、奇数行の背景色が変わるようにCSSを設定しました。

(2017/4/15 フリープランのスマホレイアウトだとフッターにJavaScriptが設定できず、行数指定がおかしくなるので// 数字:の書式を追加)

以下、手順です。

手順

はてなにログインしたら、(1)アカウントをクリック > (2)ブログを選択 > (3)デザインをクリックします。

f:id:am1tanaka:20170407230957p:plain

デザイン設定画面に切り替わるので、(1)設定アイコン > (2)フッタ > (3)その下のコードをクリックします。

f:id:am1tanaka:20170407231206p:plain

「HTML を記述できます」の欄に、以下のコードを入力します。

<script>
let codes = document.getElementsByClassName('code');
[].forEach.call(codes, function(elem, key, val){
    // クラスに lang が含まれていない場合は何もしない
    if (!/lang/.test(elem.className)) {
        return;
    }

    let line_num = 1;

    // 行で分割
    let lines = elem.innerHTML.split("\n");
    let texts = elem.textContent.split("\n");

    // 最終行が空の時は削除
    if (lines[lines.length-1].length === 0) {
        lines.pop();
    }

    // 最初の1行目にコメント後の数字:か、数字:があれば、先頭の行番号にする(2017/4/15修正)
    if ((texts.length > 0) && (/(^|\/\/|\/\*) *[0-9]+:/.test(texts[0].trim()))) {
        line_num = texts[0].trim().replace(/:/, "").replace(/(\/\/|\/\*)/, "")-0;
        lines.shift();
    }

    let modi = "<ol start='"+line_num+"'>";

    lines.forEach(function(elem) {
        modi += "<li class='code-list'>"+elem+"</li>";
    });
    modi += "</ol>";
    elem.innerHTML = modi;
});
</script>

コードの奇数行用のCSSを設定します。(1)デザインCSSをクリックしたら、(2)下のコード部分をクリックして開きます。

f:id:am1tanaka:20170407231839p:plain

以下のCSSを追加します。

.code-list:nth-child(2n+1) {
    background-color: #eee;
}

最後に、保存をクリックします。

f:id:am1tanaka:20170407232124p:plain

以上です。

やっていること

JavaScriptで、codeクラスの要素を列挙します。列挙した要素のうち、langというクラス名を含んでいたら、全体をolタグで囲んで、各行をliタグで囲みます。liタグにはcode-listクラスを設定しているので、CSS.code-list:nth-child(2n+1)に背景色を指定して、奇数行に色をつけています。

クラス名にlangが含まれていないのは、言語指定をしていないブロックです。自分の場合、コマンドラインの指示などは言語指定をしておらず、その場合は行番号を表示したくなかったので、このようなコードを追加しました。

また、コードブロックの最初に// 10:などのように、//+<数字>+:の行を書いておくと、その数字から行番号が始まるようにしました。

    // 10:
    // 10から開始

上記のようなコードを、言語指定付きで書くと以下のようになります。

    // 10:
    // 10から開始

参考URL

Valet を使って mac に Laravel5.4 の環境をインストール

laravel.com

公式ドキュメントを参考に、mac で簡単に Laravel の動作環境を構築できる Valet をインストールします。Laravel 5.4 を対象にしています。

前提条件

  • macOS であること
  • Homebrew が事前にインストールされていること
  • Apache や Nginx などがポート 80 を利用していないこと

ポート80 が大丈夫か確認

Web ブラウザー127.0.0.1:80 にアクセスして、以下のようにアクセスできなければ大丈夫です。 f:id:am1tanaka:20170323231227p:plain

何かページが表示されていたら、一時的に停止するか、起動を停止してください。

一時的に停止する(Apache の場合)

sudo apachtctl stop

自動起動を停止する

インストール

準備が整ったら、必要なものをインストールします。

以下で、Homebrew を更新します

brew update

PHP7.1以上をインストールします。まず php -v で、インストールされているかと、バージョンを確認します。以下のようであれば 7.1.2 で条件を満たしているのでインストールは不要です。 f:id:am1tanaka:20170323232305p:plain

ものが見つからなかったり、バージョンが古い場合は、以下で単純にインストールするか、こちらの記事を参考にバージョンを選べるようなインストールをしてください。

brew install homebrew/php/php71

Valet を以下でグローバルにインストールします。

composer global require laravel/valet

~/.composer/vendor/bin ディレクトリーに PATH を通す必要があります。以下で確認してください。

echo $PATH

以下のように、/User/ユーザー名/.composer/vendor/bin というパスが含まれていれば valet のインストールに進んでください。

f:id:am1tanaka:20170323233556p:plain

見当たらない場合は、以下で起動テキストエディターで開きます。

open -e ~/.bash_profile

開いたファイルの最後に以下の1行を追加します。

export PATH=$PATH:$HOME/.composer/vendor/bin

[Ctrl]+[S]キーを押して保存したら、開いたエディターは閉じます。

Valetのインストール

以下で、Valet と DnsMasq をインストールして、 Valet の daemon自動起動に設定します。

valet install

パスワードを要求されたら、ユーザーのパスワードを入力してください。

インストールが完了したら、自動的にサービスが起動します。以下をターミナルで実行してください。インストールが成功していたら、 127.0.0.1 が返答をします。

png foobar.dev

f:id:am1tanaka:20170323235249p:plain

確認できたら、[control]+[C]キーを押して ping を停止してください。

Valetの自動起動の停止

Valet は一度インストールすれば、mac を起動した時に自動的に起動するので、 valet startvalet install は不要です。

他の HTTPサーバーをデフォルトで使いたいなどで、Valet の自動起動を停止したい場合は、以下を実行してください。

valet uninstall

なお、一時的に valet を開始したい場合は、 valet start 、停止したい時は valet stop を実行します。

ドメインを変更するには

インストールしたまま利用すると、Valet はローカル環境で .dev ドメインでプロジェクトにアクセスできるようにします。これを変更するには valet domain tld-name コマンドを使います。

例えば valet domain app を実行すると、*.dev ではなく、 *.app でアクセスできるようになります。

データベース

MySQL などのデータベースを起動したら、 mysql -u 127.0.0.1 とすれば root として接続できます。既存のデータベースにも、既存のユーザー名とパスワードを使えばログインできます。

サイトを提供する

Valet のインストールが完了したら、 Laravel サイトを動かす parklink の2つのコマンドが提供されます。

parkコマンド

Valet でサイトを管理したい場合は、そのためのディレクトリーを作成して、 Laravel のプロジェクトをそのディレクトリー内で作成します。

  • Valet 用のディレクトリーを作成していなければ、作成して、その中に移動します
mkdir ~/Sites && cd ~/Sites
  • このディレクトリーを Valet で管理するために以下を実行します
valet park
  • Laravel のプロジェトを作成します
laravel new blog

以上で、Laravel のプロジェクトの作成が完了したら、Web ブラウザーhttp://blog.dev を開くと、作成した Laravel プロジェクトを表示できます

これ以降、 Laravel のプロジェクトを “parked” したディレクトリー(今回の例では ~/Sites ディレクトリー)に作成すれば、 http://プロジェクトディレクトリー名.dev でアクセスできます。

おまけ

ここまでで問題なければ Laravel の開発に進めます。最後に、単一のプロジェクトのホスト方法、プロジェクトを共有する方法、その他の Valet のコマンドについて、公式サイトに書いてあった内容をまとめておきます。

linkコマンド

link コマンドも Laravel サイトを表示できるようにするものです。このコマンドは、ディレクトリー全体をサービスするのではなく、一つのサイトをサービスしたい時に使います。

  • ターミナルでプロジェクトフォルダーに cd コマンドで移動したら、 valet link app-name を実行します。Valet は ~/.valet/Sites にシンボリックリンクを作成して、現在の作業用ディレクトリーとして記録します
  • link コマンドを実行したら、 http://app-name.dev でプロジェクトページを表示できます

リンクされた全てのディレクトリーを確認したい場合は、 valet links を実行します。valet unlink app-name を実行すれば、リンクを解除できます。

valet link を使うと、同じプロジェクトを別のサブドメインで提供することができます。サブドメインや別のドメインをプロジェクトに設定したい場合は、プロジェクトフォルダーから valet link subdomain.app-name を実行します。

TLS によるサイトの安全化

デフォルトでは、 Valet は HTTP でサイトを表示します。これを TLS で暗号化された HTTP/2 で表示したい場合は、 secure コマンドを使います。例えば、 laravel.dev ドメインであれば以下のようにします。

valet secure laravel

元の HTTP による安全ではないサイトに戻したい場合は、 unsecure コマンドを使います。例示したものを戻すには以下を実行します。

valet unsecure laravel

サイトの共有

Valet をインストールすれば、追加のインストールなどを必要とせず、ローカルのサイトを外部に公開することができます。

サイトを共有するには、ターミナルでサイトのディレクトリーに移動して、 valet share コマンドを実行します。アクセスするための URL がクリップボードに設定されるので、 Web ブラウザーのアドレスバーにペーストすれば、公開された状態を確認できます。

公開を停止するには、[control]+[C]キーを押します。

valet share は現在、 valet secure コマンドを使った安全設定に対応していません。

その他の Valet コマンド

コマンド 説明
valet forget “park"されたディレクトリーでこのコマンドを実行すると、そのディレクトリーを"park"されたディレクトリーから外します
valet paths “park"された全てのパスを表示します
valet restart Valet daemon を再起動します
valet start Valet daemon を開始します
valet stop Valet daemon を停止します
valet uninstall Valet daemon の登録をアンインストールします

mac にインストールした apache の自動起動を停止する

mac に自分でインストールした apache自動起動を開始、停止する方法のメモです。

自動起動を停止

以下で、起動の設定を確認します。

ls /Library/LaunchDaemons

列挙される中から httpd の文字が入っているファイルを探します。例えば homebrew.mxcl.httpd24.plist というのがあった場合、以下で自動起動を停止します。

sudo launchctl unload -w /Library/LaunchDaemons/homebrew.mxcl.httpd24.plist

自動起動を開始

停止した自動起動を開始するには、停止した時の設定名を、 load フラグで実行します。

sudo launchctl load -w /Library/LaunchDaemons/homebrew.mxcl.httpd24.plist

以上です。

参考URL

MySQLでMEDIUMBLOB型のデータをMEDIUMTEXT型で取り出したい時

MySQLで、MEDIUMBLOB型のフィールドに文字列を入れていた場合、そのままでは日本語などは化けてしまいます。MySQL側で型変換することで解決しました。

例えば、MySQLの文字エンコードEUC-JP だった場合は、以下のようにして型変換して取り出します。

SELECT CONVERT(column USING ujis) FROM table;

PHPから操作する際、PHP文字コードUTF-8 だったとしても、上記の文字コードMySQL文字コードにしてください。MySQLUTF-8 だった場合は、 ujis ではなく、 utf8 にします。

PHP7.1以降と、MySQL5.5以降の組み合わせであれば、MySQLからPHPへの文字エンコードの変換は、 PDO の初期化時に、PHP 側の文字エンコードを指定しておけば、自動的に変換してくれます。

参考URL

macの OS をバージョンアップした時にやること(自分用メモ)

mac の OS をバージョンアップすると、Apache などの設定が初期化されてローカルの環境が気づかないうちに動かなくなったりするので、自分向けのメモ。

目次

Xcode の確認とバージョンアップ

  • Launchpad から Xcode を起動
  • 更新したり、許可する必要があれば行う
  • 問題がなければ、Xcode を終了
  • 端末を起動して、以下を実行
xcode-select --install

Homebrewのアップデート

  • 端末で、以下を実行
brew update
brew update
brew upgrade
  • 以下を実行して、「Your system is ready to brew.」を表示されれば完了。
brew doctor

上記で、警告が表示される場合、何らかの対応方法が書かれていることが多いので、それを実施して、再度 brew doctor を実行して、なるべく警告を減らします。

MySQLのセキュリティ設定

  • 以下を実行
mysql_secure_installation
  • rootのパスワードを入力
  • 以下は、テスト用で簡単なパスワードも許可しておきたいので no
VALIDATE PASSWORD PLUGIN can be used to test passwords
and improve security. It checks the strength of password
and allows the users to set only those passwords which are
secure enough. Would you like to setup VALIDATE PASSWORD plugin?

Press y|Y for Yes, any other key for No: 
  • パスワードの変更は不要なので no
Using existing password for root.
Change the password for root ? ((Press y|Y for Yes, any other key for No) : n
  • 何か使っていると面倒なので no
Remove anonymous users? (Press y|Y for Yes, any other key for No) : n
  • リモートアクセスは不要なので y
Disallow root login remotely? (Press y|Y for Yes, any other key for No) : y
  • テスト用のデータベースは不要なので y
Remove test database and access to it? (Press y|Y for Yes, any other key for No) : y
  • 特権テーブルをすぐにリロードしておくので y
Reload privilege tables now? (Press y|Y for Yes, any other key for No) : y

以上で、 mysql -u root -p として、パスワードを入力すると、MySQLへの接続ができるようになります。起動すると、自動的にサービスは起動します(自分の設定が最初からそうなっていたからかも)

古いバージョンの削除

いらないバージョンが出たら削除できます。mysql は最新版以外不要になったら、以下で古いものを削除できます。

brew cleanup mysql

文字コードの設定(2017/2/27追加)

目的としている MySQL のデータベースと、文字コードの設定が異なる場合は修正しないと文字化けを起こします。まずは、正しい設定を確認しておきます。 MySQL に接続して、以下の SQL を実行します。

use 確認したいデータベース;
show variables like '%character%';

以下のような結果が表示されたとします。

f:id:am1tanaka:20170227200929p:plain

データベースごとの文字コードの設定方法がよくわからなかったので、 PHP のプログラム側で設定することにします。データベースに接続するコードで、以下のように exec コマンドで、各設定をします。

    $db = new PDO('mysql:host=<データベースのホストアドレス>;dbname=<データベース名> , <ユーザー>, <パスワード>');
    $db->exec("SET character_set_client=utf8");
    $db->exec("SET character_set_connection=utf8");
    $db->exec("SET character_set_database=ujis");
    $db->exec("SET character_set_results=utf8");
    $db->exec("SET character_set_server=ujis");
    $db->exec("SET character_set_system=utf8");      

以上で文字コードが設定されるので、文字化けを防げます。

MySQLの起動と停止

MySQLのサービスの開始と停止は、 brew から呼び出すと動きます(mysql.server start はやり方が悪かったからか、エラーになったので、以下で良いかと)。

brew services start mysql
brew services stop mysql

Apache の設定

以下のブログの設定を参考に、現状に合わせて作業します。

$ sudo apachectl stop
$ sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 2>/dev/null
$ brew install httpd24 --with-privileged-ports --with-http2
  • インストールが完了したら、インストール先のパスが表示されるので、記録しておく。以下の場合、[/usr/local/Cellar/httpd24/2.4.25]フォルダー f:id:am1tanaka:20170223190012p:plain
  • 以下を実行する。[2.4.25]の部分は、実際のバージョンに読み換える
$ sudo cp -v /usr/local/Cellar/httpd24/2.4.25/homebrew.mxcl.httpd24.plist /Library/LaunchDaemons
$ sudo chown -v root:wheel /Library/LaunchDaemons/homebrew.mxcl.httpd24.plist
$ sudo chmod -v 644 /Library/LaunchDaemons/homebrew.mxcl.httpd24.plist
$ sudo launchctl load /Library/LaunchDaemons/homebrew.mxcl.httpd24.plist

以上で、Apache自動起動が設定されます。すでに起動しているので、 http://localhost にアクセスすれば、[It Works!]の表示を確認できます。

以下を実行しておくと、エラーを監視できます。

$ tail -f /usr/local/var/log/apache2/error_log

apache自動起動を解除する(2017/3/23追記)

valet などを利用するためにポート80を開けたいなど、 apache自動起動を無効にしたい場合は、以下を実行します。

$ sudo launchctl unload -w /Library/LaunchDaemons/homebrew.mxcl.httpd24.plist

設定の変更

  • 設定ファイルの場所は、以下で確認できる
$ /usr/local/Cellar/httpd24/2.4.25/bin/httpd -V

f:id:am1tanaka:20170223183237p:plain

  • ビルド時の設定が表示されて、[-D SERVER_CONFIG_FILE=]の後ろに、設定ファイルへのパスが表示されます。画像の例では[/private/etc/apache2/httpd.conf]が該当するパス。今回のインストールでは[/usr/local/etc/apache2/2.4/httpd.conf]になる
  • テキストエディターで httpd.conf を開く
$ open -e /usr/local/etc/apache2/2.4/httpd.conf
  • DocumentRoot の設定を探して、設定したいフォルダーに書き換える(ダブルクォーテーションは消した方が良いらしいので、消しておく)
DocumentRoot /Library/WebServer/Documents
<Directory /Library/WebServer/Documents>
  • Directory タグ内の [AllowOverride]設定を以下のように[All]に書き換える
    AllowOverride All
  • [mod_rewrite.so]を利用できるようにするために、同モジュールを読み込む行を探して、行頭の # を以下のように削除
LoadModule rewrite_module libexec/mod_rewrite.so
  • ユーザーとグループを daemon から自分のものに変更する。[User daemon]という行を探して、以下のように修正(<自分のユーザーアカウント名>は実際のアカウント名に書き換える。staff はそのままで良い。現在の設定を確認したいときは、 id -p で確認する)
User 自分のユーザーアカウント名
Group staff
  • 以下の行を探して、行頭の # を削除
LoadModule socache_shmcb_module libexec/mod_socache_shmcb.so
...
LoadModule ssl_module libexec/mod_ssl.so
...
Include /usr/local/etc/apache2/2.4/extra/httpd-ssl.conf
...
Include /usr/local/etc/apache2/2.4/extra/httpd-vhosts.conf
  • 上書き保存したら、次は以下を開く
$ open -e /usr/local/etc/apache2/2.4/extra/httpd-vhosts.conf
  • 以下を追加
<VirtualHost *:443>
    DocumentRoot "/Library/WebServer/Documents"
    ServerName localhost
    SSLEngine on
    SSLCertificateFile "/usr/local/etc/apache2/2.4/server.crt"
    SSLCertificateKeyFile "/usr/local/etc/apache2/2.4/server.key"
</VirtualHost>
  • SSLの設定を開く
$ open -e /usr/local/etc/apache2/2.4/extra/httpd-ssl.conf
  • 以下の設定を探して、修正
#   General setup for the virtual host
DocumentRoot "/Library/WebServer/Documents"
ServerName localhost:443
ServerAdmin admin@example.com
  • 上書き保存する。認証用のファイルを作成する
$ cd /usr/local/etc/apache2/2.4
$ openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout server.key -out server.crt
$ sudo apachectl configtest
  • Syntax OK と表示されなかった場合、ここまで手順を再確認する。表示されたら、以下で apache を再起動する
$ sudo apachectl -k restart

以上で、設定完了です。 http://localhost などは普通に開けるはずです。

https://localhost を開こうとすると、警告が表示されます。詳細をクリックしたり、エラー内容をクリックして、動作を許可してください。

mac にプライベート認証局を設置する場合は、以下の記事を参照してください。

PHP のインストール

PHPを複数バージョンインストールします。以下、 PHP5.6 と PHP7.1 をインストールする例です。

$ brew install php71 --with-httpd24
$ brew install --build-from-source php71-imagick
$ brew unlink php71
$ brew install php56 --with-httpd24
$ brew install --build-from-source php56-imagick

エラーが発生したら、 unlink をする必要があるかもしれません。エラーメッセージを読んで、指示の通りにコマンドを実行してから、再度インストールしてください。また、インストール済みの時は、念のため、 reinstall しておきます。

PHPの設定ファイルの場所は以下の場所です。

/usr/local/etc/php/5.6/php.ini
/usr/local/etc/php/7.1/php.ini

以下で、設定ファイルを開いて、 date.timezone を東京に設定します。

$ open -e /usr/local/etc/php/5.6/php.ini
  • date.timezone を検索して、設定がなければ以下のように追記
date.timezone = "Asia/Tokyo"
  • 上書き保存
  • 以上を、インストールした全てのPHPの設定ファイルに行う

ApachからPHPを利用する設定

httpd.conf に PHP の設定をします。httpd.conf を開いていたら、設定が変更されているので、一度閉じてから、以下で再起動します。

$ open -e /usr/local/etc/apache2/2.4/httpd.conf
  • LoadModule で php を読み込んでいる以下の行を削除します。
LoadModule php7_module        /usr/local/Cellar/php71/7.1.2_13/libexec/apache2/libphp7.so
LoadModule php5_module        /usr/local/Cellar/php56/5.6.29_5/libexec/apache2/libphp5.so
  • 削除した行の代わりに、以下の設定を追加
# Brew PHP LoadModule for `sphp` switcher
LoadModule php5_module /usr/local/lib/libphp5.so
#LoadModule php7_module /usr/local/lib/libphp7.so
  • ディレクトリ設定を書き換える。まずは以下のブロックを探す
<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>
  • 以下に書き換える
<IfModule dir_module>
    DirectoryIndex index.php index.html
</IfModule>

<FilesMatch .php$>
    SetHandler application/x-httpd-php
</FilesMatch>

PHPバージョンスイッチスクリプトを設定

PHPのバージョンを切り替えるためのスクリプト sphp をインストールします。

$ curl -L https://gist.github.com/w00fz/142b6b19750ea6979137b963df959d11/raw > /usr/local/bin/sphp
$ chmod +x /usr/local/bin/sphp

切り替えを試して見ます。PHP7.1を設定してみます。

$ sphp 71

以上で、切り替え割ります。切り替わったら、自動的に apache が再起動するので、アクセスすればバージョンが切り替わっていることが確認できます。

次に、以下で PHP5.6 に切り替えます。

$ sphp 56

以上で、環境の復活作業は完了です。


PHPの切り替え後、 Apache が停止した場合

sphp でバージョンを切り替えた時に、phpの設定がコメントアウトされないことがありました。以下で対処します。

  • 設定ファイルを開く
open -e /usr/local/etc/apache2/2.4/httpd.conf
  • php を検索して、以下のブロックを探し、片方の設定の前に # を追加して無効にする。以下は、 php5.x の方を有効にする例
# Brew PHP LoadModule for `sphp` switcher
LoadModule php5_module /usr/local/lib/libphp5.so
#LoadModule php7_module /usr/local/lib/libphp7.so
  • 設定を変更して保存したら、以下で apache を起動する
sudo apachectl start

brew upgrade時の警告

最初に brew upgrade をした時の、主要なアプリの警告です。

MySQL

==> /usr/local/Cellar/mysql/5.7.17/bin/mysqld --initialize-insecure --user=<ユーザー名>
Last 15 lines from /Users/yutanaka/Library/Logs/Homebrew/mysql/post_install.01.mysqld:
2017-02-25 01:08:47 +0900

/usr/local/Cellar/mysql/5.7.17/bin/mysqld
--initialize-insecure
--user=<ユーザー名>
--basedir=/usr/local/Cellar/mysql/5.7.17
--datadir=/usr/local/var/mysql
--tmpdir=/tmp

2017-02-24T16:08:47.181867Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).
2017-02-24T16:08:47.188144Z 0 [ERROR] --initialize specified but the data directory has files in it. Aborting.
2017-02-24T16:08:47.188199Z 0 [ERROR] Aborting

Warning: The post-install step did not complete successfully
You can try again using `brew postinstall mysql`
==> Caveats
We've installed your MySQL database without a root password. To secure it run:
    mysql_secure_installation

To connect run:
    mysql -uroot

To have launchd start mysql now and restart at login:
  brew services start mysql
Or, if you don't want/need a background service you can just run:
  mysql.server start
==> Summary
🍺  /usr/local/Cellar/mysql/5.7.17: 321 files, 234.4M

nginx

brew services start nginxでサービスをスタートできるという表示。

php56-imagick

==> Pouring php56-imagick-3.4.3_1.sierra.bottle.tar.gz
==> Caveats
To finish installing imagick for PHP 5.6:
  * /usr/local/etc/php/5.6/conf.d/ext-imagick.ini was created,
    do not forget to remove it upon extension removal.
  * Validate installation via one of the following methods:
  *
  * Using PHP from a webserver:
  * - Restart your webserver.
  * - Write a PHP page that calls "phpinfo();"
  * - Load it in a browser and look for the info on the imagick module.
  * - If you see it, you have been successful!
  *
  * Using PHP from the command line:
  * - Run `php -i "(command-line 'phpinfo()')"`
  * - Look for the info on the imagick module.
  * - If you see it, you have been successful!
==> Summary
🍺  /usr/local/Cellar/php56-imagick/3.4.3_1: 3 files, 321.7K

php-xdebug

==> Caveats
To finish installing xdebug for PHP 5.6:
  * /usr/local/etc/php/5.6/conf.d/ext-xdebug.ini was created,
    do not forget to remove it upon extension removal.
  * Validate installation via one of the following methods:
  *
  * Using PHP from a webserver:
  * - Restart your webserver.
  * - Write a PHP page that calls "phpinfo();"
  * - Load it in a browser and look for the info on the xdebug module.
  * - If you see it, you have been successful!
  *
  * Using PHP from the command line:
  * - Run `php -i "(command-line 'phpinfo()')"`
  * - Look for the info on the xdebug module.
  * - If you see it, you have been successful!
==> Summary
🍺  /usr/local/Cellar/php56-xdebug/2.5.0: 3 files, 194K

参考URL

さくらインターネットのメーリングリストのパスワードエラー

さくらインターネットメーリングリストの管理者操作をしようと、操作メールを送信しても、パスワードが違うと言われて操作ができませんでした。

原因は、niftyのメールアドレスからの操作だったようで、さくらインターネットレンタルサーバーで作成したメールからは操作できました。

勿論、操作しようとしたニフティのメールアドレスは、メーリングリストの管理者用メールアドレスとして登録していました。

エンコードとかその辺のようですが、とりあえずニフティからは操作しない方がよさそうということで。