Laravelにfont-awesomeを組み込む

デフォルトで使えたと思ったら勘違いだった模様なので、Sass版を組み込みます。

• Font Awesome, the iconic font and CSS toolkit を開く
• [Download]を押して、パッケージをダウンロード
• とりあえず[No thanks, just download Font Awesome]の方を押す
• zipファイルのダウンロードが完了したら、展開する
• 展開したフォルダー内の font-awesome-x.x.x フォルダーを、Laravelプロジェクトの resources/assets/sass フォルダー内にコピー
• font-awesome-x.x.xフォルダー内にある fonts フォルダーをコピーして、 publicフォルダー内に貼り付ける
• gulpfile.js をエディターで開く
• elixirのmix.sass(・・・)の部分を以下に書き換えて、font-awesomeのscssを対象に加える(font-awesome-4.7.0 を利用するときの例。バージョンに応じて書き換えるか、フォルダー名からバージョンを外してください)

    mix.sass(['app.scss', 'font-awesome-4.7.0/scss/font-awesome.scss'])

• ターミナルで gulp でコンパイルする

以上で、 font-awesome のアイコンが利用できるようになります。

参考URL

• Font Awesome, the iconic font and CSS toolkit

VirtualBoxとUbuntuのセットアップ

VirtualBoxをWindowsにインストールして、Ubuntu16.04をOSとして利用する手順です。

VirtualBoxのインストール

管理者でログインして、まずはVirtualBoxをインストールします。

• Oracle VM VirtualBox をブラウザーで開く
• [Download VirtualBox 5.1] をクリック(5.1は、2017/1/8時点のバージョン)
• [VirtualBox 5.x.x platform packages.] にある [Windows hosts]をクリック
• 実行ファイルのダウンロードが始まるので、実行するか、保存してから実行する
• インストールウィンドウが表示されるので、設定はそのままでインストールを開始する([Next]>[Next]>[Next]>[Yes]>[Install])
• 途中で、Windowsセキュリティが何度か表示されるので、[インストール]を選択
• [Finish]を押して、VirtualBoxを起動する

以上で、プラットフォームパッケージがインストールされて、VirtualBoxが起動します。続けて、追加パックもインストールします。

• Downloads – Oracle VM VirtualBox のページに戻る
• [VirtualBox 5.x.x Oracle VM VirtualBox Extension Pack]の右の[All supported platforms]をクリックして保存する
• VirtualBoxの[ファイル]メニューから[環境設定]を選択
• [機能拡張]をクリックして、右の水色の四角に、黄色の三角のアイコンをクリック
• デスクトップの[VirtualBox]フォルダーを開いて、[Oracle_VM_VirtualBox_Extension_Pack-5.1.12-112440.vbox-extpack]をクリックして、[開く]を押す
• 「VirtualBox機能拡張パッケージをインストールします。」というウィンドウが表示されるので、[インストール]を押す
• ライセンスを最後までスクロールさせて[同意します]を押す
• 変更を許可するかを質問されたら、[はい]で進める
• 完了したら[OK]を押す

以上で、VirtualBoxのインストールは完了です。

ここから先は、実際に Ubuntu をするユーザーに切り替えてから、作業をしてください。

vboxファイルがある場合のUbuntuのインストール

予めインストール済みのvboxファイルがある場合は、それをコピーしてVirtualBoxに読み込ませるだけで利用できるようになります。

vboxファイルがない場合はこちら。

• インストールする vbox ファイルが入っているフォルダーを指示された場所からコピーする
• マイドキュメントのフォルダー内に、コピーしたフォルダーを貼り付ける
• VirtualBoxを起動する
• [仮想マシン]メニューから[追加]を選択
• コピーしたマイドキュメント内のフォルダーを開いて、 [Ubuntu.vbox] などの vbox ファイルを選択

以上で完了です。仮想PCを起動して、指示されたIDとパスワードでログインしてください。

ユーザー名やコンピューター名とパスワードを変更する

そのままだと、みんな同じ名前やパスワードになるので、以下で変更します。

• Ubuntuが起動したら、左下の歯車マークをクリック
• [システム]の[ユーザーアカウント]をクリック
• ウィンドウの右側のユーザー名をクリックして選択
• コンピューターの名前に変更する
• パスワード欄の右の「●●●●●」をクリックして選択
• コンピューターにログインする時のパスワードとPC名を続けて入力

ターミナルを表示

基本的にはコマンド入力で操作したいので、ターミナルの起動方法です。

• 画面左上の[コンピューターを検索]アイコンをクリック
• [コンピューターを検索]欄に[ter]と入力する
• [端末]が表示されるのでクリック

以上で、コマンドプロンプトが表示されるので、各種操作をします。

テキストファイルの操作

linuxでは標準の vi エディターを端末から使うこともできますが、慣れない場合は gedit を利用するとよいでしょう。

• コンピュータを検索]アイコンをクリック
• [text]を入力
• [テキストエディター]が見つかるので、クリック

これでテキストエディターが起動します。普通のメモ帳のように使えます。

CUIとGUIの切り替え

UbuntuでCUI/GUIログインの切り替え方法 - 日常 にありました。

• [Ctrl]+[Alt]+[F1]キーでCUIに切り替え
• [Alt]+[F7]キーでGUIに切り替え

上記のCUIだと、日本語が化けるので、端末から操作したほうがよいでしょう。

シャットダウン

右上の小さい歯車マークをクリックして、シャットダウンを選択します。

あるいは、端末から以下を実行します。

sudo shutdown -h now

一分ほど待つとUbuntuのウィンドウが閉じます。その後、VirtualBoxマネージャーを閉じます。

再起動

端末で以下を実行します。

sudo shutdown -r now

Ubuntuをダウンロードしてインストール

vboxがない場合は、自分で必要なファイルをダウンロードして、VirtualBoxにインストールします。

管理者で作業をしていたら、ここでアカウントを切り替えて、利用するユーザーに変更します。

OS には Linux のディストリビューションの一つである Ubuntu をインストールします。情報が集めやすいディストリビューションです。

仮想ハードディスクイメージのダウンロード | Ubuntu Japanese Team を参考に、VirtualBoxに、Ubuntuの日本語パッケージをインストールします。

• Ubuntu Desktop 日本語 Remixのダウンロード | Ubuntu Japanese TeamをWebブラウザーで開く
• 一番新しい LTS の ISOイメージをダウンロードする。2017/1/8時点では、 [ubuntu-ja-16.04-desktop-amd64.iso]（ISOイメージ）

ファイルが大きいので、ダウンロードが完了するまで10分以上かかる場合があります。しばらく待ちます。

ダウンロードが完了したら、以下でファイルが壊れていないかを確認できます。ファイルが壊れていなければこの手順は飛ばしても構いません。

• スタートメニューを開いて、[プログラムとファイルの検索]に[cmd]と入力して、検索されるコマンドプロンプトを起動
• コマンドプロンプトに以下を入力すると、 MD5のメッセージダイジェストが表示される(以下は、ubuntu-ja-16.04 の例。新しいものが出てたら、ファイル名を差し替えること)

certutil -hashfile %USERPROFILE%\downloads\ubuntu-ja-16.04-desktop-amd64.iso MD5

• 文字列が表示されるまで、十秒ほど待つ
• ダウンロードしたリンクの右に書いてある md5sum: の右の文字列と、前の手順で表示したメッセージダイジェストが同じであれば、ファイルが壊れていないことが確認できる

続いて、VirtualBox に Ubuntu をインストールします。

• VirtualBoxを起動
• [新規]ボタンを押す
• 名前に[Ubuntu]を入力する。タイプとバージョンはそれぞれ[Linux]、[Ubuntu(64-bit)]が選択されるので[次へ]
  • バージョンに[Ubuntu(64-bit)]が見つからない場合、BIOSで CPU の Virtualization Technology を Enable にする必要があります。動作させるPCを再起動して、メーカーロゴが表示されているときに指示に従ったキーを押してBIOS設定を起動してください。PCごとに設定方法は異なるので、PCに応じた情報を検索してください
• メモリーサイズは必要なサイズ(1024MB)で[次へ](メインメモリに余裕があるなら2048程度にしてもよいでしょう)
• ハードディスクは、[仮想ハードディスクを作成する]を選択して[作成]を押す
• VDIのまま[次へ]を選択
• 物理ハードディスクにあるストレージは[可変サイズ]にして[次へ]
• ファイルの場所はそのままで、サイズは[16GB]にして[作成]を押す

以上で完了です。作成した Ubuntu を選択して、[起動]を押して、OSのインストールを行います。

• VirtualBoxで、設定した Ubuntu を選択して[起動]を押す
• [起動ハードディスクを選択]が表示されるので、コンボボックスの右のフォルダーアイコンを押して、先ほどダウンロードした[ubuntu-ja-16.04-desktop-amd64.iso]を選択して、[起動]ボタンを押す
• 画面上に表示される[キーボードの自動キャプチャー・・・]のウィンドウは、右端の閉じるボタンを押して閉じてよい

起動が終わるまで待ちます。起動したら以下でインストールします。

• [Ubuntuをインストール]をクリック
• [インストール中にアップデートをダウンロードする]にチェックを入れて、[続ける]を押す
• [ディスクを削除してUbuntuをインストール]を選択して、[インストール]を押す
• ディスクに書き込むかの質問が表示されたら[はい]で先に進める
• どこに住んでいますか？]は、[Tokyo]のまま[続ける]を押す
• [キーボードレイアウト]では日本語が選ばれているはずなので、そのまま[続ける]を押す
• 以下を設定
  • あなたの名前にPCの名前を入力
  • コンピューターの名前は、自動的に入力されたものをそのまま利用
  • ユーザーの名前とパスワードには、ログイン時のものを設定する
  • 自動的にログインするにチェック
• 以上できたら、[続ける]を押す

インストールが始まるので完了するまで待ちます。完了したら、[今すぐ再起動]を押して待ちます。

動きが止まった場合は、[仮想マシン]メニューから[リセット]を選んで、もう一度起動しなおします。

以上で[Ubuntuデスクトップ]が表示されて、左にメニューが並べばインストール完了です。

32bitしかない場合

PCを再起動して、BIOS設定を表示。以下を設定します。

• Advanced > CPU Configuration > Intel(R) VirtualizationTechnology > [Enabled]

上記は一例で、メーカーや機種によってメニューの内容は異なります。[CPU]と[Virtualization]のキーワードでそれらしい設定を見つけて設定してください。

設定後は、[Save]などで保存をしてから、[Restart]などを選択してください。

今後

このあと、Hexo、Heroku、TensorFlowなどを使えるようにしていく予定です。

参考URL

• Oracle VM VirtualBox
• Homepage | Ubuntu Japanese Team

Python3でpaizaの問題を解く時によく使う文法

プログラマーの転職や新卒を支援するサービス paiza で、スキルチェックをする時によく使う文法です。

pythonは普段は全く触っておらず初心者ですが、とにかく普段触っていないので忘れちゃうので。

(2017/1/9 配列の初期化とBoolean値を追加)

基本

変数定義

定義せず、いきなり使って大丈夫です。

a = 1
b = "こんにちは"

四則演算記号

• 足し算 +
• 引き算 -
• 掛け算 *
• 割り算 /
• 剰余 %

省略記号

インクリメント(++)とデクリメント(--)はありません。以下の省略記法が使えます。

a += 1
a -= 10
a *= 2
a /= 3
a %= 2

コメント

# から行末までコメントです。

# 行末までコメント

''' から ''' までの間は複数行でコメントにできます。

'''
複数行
コメント
'''

Boolean値

Booleanは、 True と False

出力関連

変数などを出力

print(data)

数値を文字列化

print("1+1は"+str(2)+"です")

• 出力例

1+1は2です

改行しないで出力

print()は通常、最後に改行を自動的に挿入します。コンマに続けてend=""とすると、単語の後につける文字を制御できます。""として空文字にすることで改行しなくなります。

print("改行", end="")
print("なし", end="")

• 出力例

改行なし

入力関連

1行入力

input()

スペース区切りの文字列を配列に分解する

• 入力例

0 1 2 3 4 5

• コード

datas = input().split(' ')
print(datas)

• 出力例

['0', '1', '2', '3', '4', '5']

文字列を数値に変換

int(文字列)

前述のdatasの例に以下を加えると、最初と2番目の要素を足します。

print(int(datas[0])+int(datas[1]))

繰り返し文

回数での繰り返し(for)

回数繰り返しはrange()を使って以下のようにします。

• コード例

for i in range(10):
    print(str(i)+",", end="")

• 出力例

0,1,2,3,4,5,6,7,8,9,

データでの繰り返し

inの後ろに配列を指定すれば、要素を１つずつ取り出して、それを制御変数に代入しながらループするので便利です(foreach)。

構文は以下の通りです。

for 制御変数 in 配列:
    繰り返しブロック

• コード例

datas = ["こんにちは", "今日は", "よい天気です。"]

for data in datas:
    print(data)

• 出力例

こんにちは
今日は
よい天気です。

条件での繰り返し(while)

構文は以下の通りです。

while 繰り返し条件:
    繰り返しブロック

• コード例

sum = 1

while sum<10:
    print(sum, end=", ")
    sum+=sum

• 出力例

1, 2, 4, 8, 

if文

基本文法は以下の通りです。elifやelseは省略できます。

if 条件式1:
    条件式1が成立した時の処理ブロック
elif 条件式2:
    ここまでの条件が不成立で、かつ、条件式2が成立した時の処理ブロック
elif 条件式3:
    ここまでの条件が不成立で、かつ、条件式3が成立した時の処理ブロック
else:
    ここまでのすべての条件が不成立だった時の処理ブロック

配列

定義の定義

• コード例

a = []
b = [0, 1, 2, 3]
c = [[0,1], [2,3], [4,5]]
print(a)
print(b)
print(c)

• 出力例

[]
[0, 1, 2, 3]
[[0, 1], [2, 3], [4, 5]]

配列の最後に要素を追加する

a = []
a.append(1)
a.append(2)
print(str(a[0])+","+str(a[1]))

• 出力例

1,2

配列から要素を削除

pop()で最後尾の要素を削除、pop(インデックス)で指定のインデックスの要素を配列から削除します。pop()は、削除した要素を返します。

• コード例

a = [0, 1, 2, 3]

# 最初の状態を表示
print(a)

# 最後の要素を取り出して削除
print(a.pop())
print(a)

# 最初([0])の要素を取り出して削除
print(a.pop(0))
print(a)

• 出力例

[0, 1, 2, 3]
3
[0, 1, 2]
0
[1, 2]

連想配列

通常の配列は、通し番号になるので、 a["name"]="ぼく" のような代入はできません。その場合は、以下のようにします。

• コード例

a = {"name": "ぼく", "sex": "男"}
print(a["name"])
print(a["sex"])

• 出力例

ぼく
男

JavaScriptとは"の有無が異なるので注意です。

以下のように、配列と組み合わせることができます。

• コード例

a = []
a.append({"name": "ぼく", "sex": "男"})
a.append({"name": "わたし", "sex": "女"})

print(a[0]["name"]+":"+a[0]["sex"])
print(a[1]["name"]+":"+a[1]["sex"])

• 出力例

ぼく:男
わたし:女

指定の値で埋めた1次元配列を定義

基本文法は以下の通りです。

array = [埋めたい値]*行数

• コード例

datas = [1]*10
print(datas)

• 出力例

[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

指定の値で埋めた2次元配列を定義

基本文法は以下の通りです。

array = [[埋めたい値]* 列数 for 制御変数 in range(行数)]

• コード例

datas = [[10] * 3 for i in range(5)]
print(datas)

• 出力例

[[10, 10, 10], [10, 10, 10], [10, 10, 10], [10, 10, 10], [10, 10, 10]]

関数

以下、基本文法です。returnは省略できます。

関数定義は、利用する前に書きます。

def 関数名(引数リスト):
    関数の処理
    return 戻り値

• コード例

def add(a, b):
    return a+b

print(add(1,2))

• 出力例

3

paizaのスキルチェックのコツ

スキルチェックの難点は、入力例が一通りしか用意されていない点です。それが成功しただけでは不安があります。自分でもテストデータを用意して、結果が正しくなるかをチェックしたいところです。

そのためには、最初に入力を全て済ませてから、処理を開始するような構造にするのがよいです。そうしておくことで、入力と処理の間に、テスト用のデータを代入することで、簡単にテストを実施することができるようになります。

# 入力ブロック
count = int(input().rstrip())
inputs = []
for i in range(count):
    inputs.append(input())

# テストデータを設定
count = 5
inputs = ["3", "4", "1", "5", "10"]


# 処理
sum = 0
for data in inputs:
    sum += int(data)

# 出力
print(sum)

このようにしておくことで、「テストデータを設定」の場所に、自分のテストデータを差し込んで、結果を確かめることができます(paiza.ioを使う方が楽かもですが)

iPhoneでUnityの実機テストをする

Xcode7から、無料でiPhoneやiPadの実機上でテスト動作をさせることができるようになっていました。以下、最初に動かした時にやったことのメモです。

開発環境

• mac book air + macOS 10.1
• Unity5.5
• Xcode8.2.1
• iPhoneSEと付属のUSBケーブル

macのXcodeでiPhoneの実機動作を確認

まずは、Xcodeだけで実機で動くことを確認します。以下を参考にしました。
誰でも無料でiPhoneの実機を使ってiOSアプリ開発する方法 - Qiita

• Xcodeを起動
• [File]メニューから[New]>[Project]を選択
• 画面上から、[iOS] > [Single View Application] を選択して[OK]を押す
• 以下を設定
  • [Product Name]には[JikkiTest]など
  • [Team] は Apple ID でログインしたのち、どれでも良いのでチームを選択
  • [Next]を押す
• プロジェクトフォルダーを作成したいフォルダーを選択して、Gitは不要なので、[Source Control]のチェックは外して、[Create]を押す

iPhoneをUSBで接続します。

• iPhoneをUSBでmacに接続。実機やXcodeで許可を求められたら、許可する
• Xcodeの左上の再生ボタンや停止ボタンの右にあるプロジェクト名の右の[iPhone7 Plus]などのシミュレーターが指定されている場所をクリックして、一番上の実機を選択
• Development Targetを、実機のiOSのもの以下にする
• GeneralパネルのSigning欄において、Apple IDでログイン
• プロジェクトのGeneralのSigningのTeamが選択されていなかったら、どれでも良いので選択する。これで、プロファイルなどが生成される
• タイトルバーに[Processing symbol files]が表示されていたら、作業が完了するまで待つ
• 実行してビルド
• キーチェーンの許可が指示されたら、「常に許可」などで許可する

最初はエラーが発生するので、以下でアプリの動作を許可します。

• iPhoneの[設定]を開く
• [一般]>[プロファイルとデバイス管理]を選択
• [デベロッパAPP]でAppleIDでログインしたメールアドレスを選択
• [<メールアドレス>を信頼]を押す
• [信頼]を押す

iPhoneのロックを解除した状態で、Xcodeで実行します。以上で、アプリがインストールされて、実機でプログラムを動かせます。

ここで作成したのは、何もないアプリなので、真っ白な画面のアプリが起動すれば成功です。

Unityでビルド

以下を参考にしました。
[Unity] アプリをiPhone実機上でテストする | Unity 3DCG

• Unityでプロジェクトを起動
• [File]メニューから>[BuildSettings]を選択
• [iOS]を選択して、[Switch Platform]を押す
• [Player Settings]を押す
• [Inspector]ビューで必要な項目を設定。最低限、Other SettingsのIdentificationのBundle Identifierを設定する
• [Build & Run]でビルド
• 指定した名前でフォルダーが作成されて、その中にXcodeのプロジェクトが生成される
• Xcodeでプロジェクトが開く
• プロジェクト(Unity-iPhone)をクリックして、設定を開く
• Signing 欄で、 Teamをクリックして、一覧から何か選ぶ(Personal Teamなど)。ログインしていなかったら、ログインする
• 実行ボタンを押す(警告はひとまず無視。未使用変数などは、あとでUnityに戻って消しておく)

一度、設定が終わったら、次からはUnityで[Build & Run]で、Xcodeへの読み込みとビルド、実機へのアップロードまでやってくれます。

参考URL

• 誰でも無料でiPhoneの実機を使ってiOSアプリ開発する方法 - Qiita
• [Unity] アプリをiPhone実機上でテストする | Unity 3DCG

Vue 2.1.7 にしたら webpack でエラーが発生した

Vueを2.1.7にバージョンアップしたら、以下のようなエラーが発生しました。

Error: ./resources/assets/js/components/Modal.vue
Module build failed: Error: 

Vue packages version mismatch:

- vue@2.1.7
- vue-template-compiler@2.1.6

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

vue-template-compiler のバージョンが不一致とのことです。 vue-loader の Ver10.0 以上を利用している場合は、 vue-template-compiler をアップデート。 vue-loader の Ver10.0 未満や vueify を使っている場合は、それらを再インストールして、 vue-template-compiler を最新版にするようにとのこと。

自分の環境では多分何も利用してなさそうだったので、単純に vue-template-compiler を以下でプロジェクトにインストールして解決しました。

npm install --save-dev vue-template-compiler

laravel-elixir-vue-2 あたりがバージョンアップしたら npm update だけで問題は発生しなくなるかもしれませんが、とりあえず現場での対処法でした。

GitHub Pagesがより簡単になった(2016/12/9)

github.com

丁度、学校で扱い始めたGitHub Pagesが便利になったと発表があったので上記を意訳。

GitHub Pagesが簡単になった：はじめの1,2,3

WebサイトやソフトウェアのドキュメントをGitHub Pagesで公開する手順が以下の3手に減りました。

1. リポジトリを作成(あるいは、既存のリポジトリに移動)
2. 他のファイルと同様に、Webインターフェースなどでマークダウンのファイルをコミット
3. リポジトリのSettingsメニューから、GitHub Pagesを有効にする

これでWebサイトができます。 アカウント名.github.io/リポジトリ名 で、Webブラウザーからアクセスできます。公開のための手順が簡単になるとともに、GitHub上にあるマークダウンのファイルをWebページで表示できるようになりました。

1. 全てのマークダウンファイルが、GitHub Pagesにより描画されるようになった。これにより、 YAML front matter(ファイルの上部に---で仕切って書くメタデータ)をファイルごとに追加する手間がなくなる
2. index.md(あるいはindex.html)がトップにない場合は、README.mdを自動的にインデックスファイルとして利用するので、GitHub Pagesに見に行った時にページが非表示になる心配がなくなった
3. サイトのconfig内でテーマを指定しなかった場合(あるいは、configファイルがない場合)、GitHub上にあるマークダウンファイルに最小限のデフォルトテーマを摘要する
4. 与えられたファイルがlayoutを指定していない場合、そのコンテクストに基づいたものを設定する。例えば、自動的に page レイアウトを取得するか、page レイアウトが存在しない場合は、 default レイアウトが適用される
5. ページタイトルが明示されていない場合で、ファイルが H1やH2、H3ではじまる場合、そのタイトルをページのタイトルとして、Webブラウザーのタブのような場所に表示する

これらの改良により、最初(であろうが100個目であろうが)のWebサイトを数クリックで簡単に公開できるようになります。また、ソフトウェアプロジェクトであれば、docsフォルダーなどにマークダウンファイルを追加すればいいのです。勿論、デフォルトテーマを独自のレイアウトやスタイルで上書きすることで、見た目や使い勝手をカスタマイズすることは引き続き可能です。

この変更により、既存のサイト構築に影響を及ぼすべきではありませんが、Jekyllユーザーに対して2つの問題(gotchas)を起こすかも知れません。

1. 全てのページを反復処理するような場合、vendorの依存関係のREADMEなどがページに含まれる可能性がある。これらはconfigファイルのexcludeディレクティブで除外できる
2. ページのレイアウトやタイトルを指定しなかった場合で、それらを設定する予定がない場合(スタイルが設定されていないコンテントを提供したい場合など)、レイアウトやタイトルには明示的に null を指定する必要がある

何らかの理由で今回の機能が不要な場合は、 .nojekyll ファイルをサイトのルートディレクトリに追加することで無効にできます。

GitHub Pagesのビルドプロセスは、確認やカスタマイズができます。今回の機能はオープンソースのJekyllプラグインである Jekyll Optional Front Matter 、 Jekyll README Index 、 Jekyll Default Layout そして Jekyll Titles from Headings によって実装されています。

これらの変更は、多くの既存のサイトの構築には影響を与えないでしょう。これらの機能を安全に使い始めることができます。疑問があれば GitHub に連絡してください。

Laravel5.3とVue.jsを組み合わせたページをCodeceptionでテストする

LaravelのPHPのみのページのテストは、CodeceptionのFunctionalテストで問題なく動きますが、Vue.jsを利用したようなJavaScriptを使ったページは、Functionalテストでは完全にテストできないようです。そのような場合は、実際のWebブラウザー上でテストするAcceptanceテストを利用します。

Seleniumを利用したり、テスト環境を利用する方法で手間取ったので、動作に必要だった項目をまとめます。

目次

PhpBrowserのテストの欠点

03-AcceptanceTests - Codeception - Documentationによると、以下のような欠点があります。

• you can click only on links with valid urls or form submit buttons
  • クリックできるのは、有効なURLやフォームのSubmitボタンのみ
• you can’t fill fields that are not inside a form
  • フォーム内のフィールドに入力することができない
• you can’t work with JavaScript interactions: modal windows, datepickers, etc.
  • モーダルウィンドウやdate pickerをはじめとするJavaScriptの動作が利用できない

Vue.jsはJavaScriptですので、PhpBrowserによるテストはできません。WebDriverを使う必要があるということです。

CodeceptionとWebDriverの動作環境は別

Codeceptionのテストコードもサービスのサーバ側のPHPプログラムも同じPHPプログラムですが、Acceptanceテストではテストコードとサーバ側プログラムは動作環境が別になります。そのため、以下の2点に注意が必要です。

• .env.testingファイルは、CodeceptionとWebDriverの双方に読み込ませる設定が必要
• Acceptanceテストコードから、LaravelやSentinelのヘルパー関数を使ってWeb側のアプリの情報を読み取ることはできない

Functionalテストでは、テストと実行環境が同じなので上記のいずれも問題が起きません。Acceptanceテストでの注意点です。

.envと.env.testingの読み分け

Codeception用の設定

Acceptanceテスト用の設定は以下のようにします。Chromeでテストする例です。

• tests/acceptance.suite.yml をエディターで開く
• 以下の内容にする

class_name: AcceptanceTester
modules:
    enabled:
        - WebDriver:
            url: http://localhost:8000
            browser: chrome
        - Laravel5:
            environment_file: .env.testing
            part: ORM
            cleanup: false
        - \Helper\Acceptance

以上で、Acceptanceテストを実行すると、Chromeが起動して、 http://localhost:8000 をベースのURLとしてテストが始まります。テストコードからLaravelのfacadeやヘルパー関数が呼び出せます。

Webブラウザー側の設定

acceptance.suite.yml の設定は、Codeceptionで動作するテスト用のものであり、Webブラウザー側とは別です。Webブラウザー側でも .env.testing を読み込ませるには、以下でサービスを起動します。

php artisan serve --env=testing

--env=tesging オプションにより、 .env.testing を環境ファイルとして読み込むようになります(Configuration - Laravel - The PHP Framework For Web Artisans)。

以上で、テスト環境と実行環境のどちらも .env.testing を読み込むようになります。

データベースの初期化

Acceptanceテストでは、トランザクションがテスト側から管理できないため、テスト中に登録したデータの削除ができません(Codeception for Laravel)。そこで、実行前に tests/acceptance/TestCest.php などの _before メソッドで以下を実行して、データベースを初期化すると良いでしょう。

    public function _before(AcceptanceTester $I)
    {
        // データベースを削除
        Artisan::call('migrate:refresh');
    }

テスト時に必要な準備

テストを実行するには、以下を準備しておく必要があります。

• Selenium Standalone Server のjarファイルをダウンロードして起動(PhatomJSでも良いようだが、うまく動かなかったのでSeleniumを利用)
  • http://www.seleniumhq.org/download/ から、最新の Selenium Standalone Server をダウンロード
  • 以下で起動(3.0.1の部分は、実際にダウンロードしたバージョン番号に置き換える)

java -jar selenium-server-standalone-3.0.1.jar

• サービスを起動

php artisan serve --env=testing

• データベースサーバーを起動。mysqlの場合は以下

sudo mysqld_safe

以上が完了したら、以下でテストを実行できる。

composer exec codecept run

Codeceptionで利用できるメソッド

WebDriverのものが利用できます。

WebDriver - Codeception - Documentation

特に、以下のものが有用です。

• waitForText()
  • テキストが表示されるのを待つ
• waitForElementVisible()
  • 要素が表示されるのを待つ
• acceptPopup()
  • ポップアップのOKなどを押す
• cancelPopup()
  • ポップアップをキャンセルする
• seeInPopup()
  • ポップアップに指定の文字が表示されているかを確認
• typeInPopup()
  • ポップアップに文字を入力

まとめ

• JavaScriptのテストには、WebDriverを使ったAcceptanceテストが必要
• 環境の設定は、Codeception用のものと、Webブラウザー用のものをそれぞれやる必要がある
• データベースはリセットされないので、必要に応じて自分でクリアする
• Acceptanceテストには、SeleniumかPhantomJSが必要(PhantomJSで日本語をチェックするには環境設定が必要かもしれない。Seleniumの方が簡単に動く)

おおよそ、以上で動くと思います。

参考URL

• CodeceptionでLaravelのテストをするときの設定
  • Codeception for Laravel
• Acceptanceテストで利用できる機能
  • WebDriver - Codeception - Documentation