CakePHP3でプラグイン(FriendsOfCake/bootstrap-ui)を用いてBootstrapを使う

開発環境は、Windows 10 Pro(64bit) + PHP 7.2.12 + CakePHP 3.6.14。

1.composer.jsonを開いて、requireの中に以下を追加

"friendsofcake/bootstrap-ui": "^1.4",

2.コマンドプロンプトからcomposer updateでプラグインをインストール

3.config/bootstrap.php内に、

Plugin::load('BootstrapUI');

を追加する

4.src/View/AppView.phpを開いて、
上部に、

use BootstrapUI\View\UIView;

を追加し、

class AppView extends View

を

class AppView extends UIView

に変更する。

5.src/Application.php内のbootstrap()メソッド内に、

$this->addPlugin('BootstrapUI');

を追加する。

参考サイト
GitHub - FriendsOfCake/bootstrap-ui: CakePHP3: Transparently use Bootstrap
・公式ページ(英語)。使い方も書いている。

Windows10にてロリポップへGit BashのSSLでアクセスする

開発環境はWindows10 Pro(64bit)。

ローカル環境から本番環境へアップロードするだけじゃなくて、本番環境上にて、プログラムを直接インストールしてみたいと思いやってみました。

1.Git Bashを起動する

2.以下の形式通りにコマンドを入力する

ssh アカウント@サーバー -p 接続ポート

3.入力して、しばらくしてから、パスワードの入力を求められるので、パスワードをコピーして、Ctrl+Shiftキーを押しながら、insertキーを押してから、Enterキーを押す。ただ、ペーストしても、画面上には何も表示されないので注意。失敗して、Permission denied, please try again.と表示されても、何回か繰り返すと、成功する。

4.試しに、php -vやruby -vと入力すると、バージョン情報が表示されると思います。

参考リンク
スタンダードプランのLolipopにパスワード認証でSSH接続(Git Bash/Windows） | 勉強とガジェット

Sass(SCSS)を使ってみる

開発環境は、Windows 10 Pro(64bit) + node v10.15.0。

Sass(SCSS)はCSSをより短い入力で書いて、そのままではきちんと動作しないので、変換して、CSSファイルを作成する仕組みです。

すでにnode.js(npm)をインストールしている前提で書いています。

以下の公式サイトの指示通りにやってみたいと思います。
Sass: Syntactically Awesome Style Sheets

1.npmにてsassをインストールする

npm install -g sass

2.テスト用にディレクトリを作成します

cd c:\
mkdir sass
cd sass

3.試しに何か書いてみます。下記のファイルをtest.scssとして保存します。

$color: #000000;

.test{
  color: $color;
}

4.次にカレントディレクトリを先ほど作成したsassディレクトリにして、以下のコマンドを入力して変換します。

sass test.scss test.css

そうすると、同じディレクトリ内に、test.cssとtest.css.mapが作成されていて、test.cssの中身を見ると、

.test {
  color: #000000;
}

/*# sourceMappingURL=test.css.map */

ときちんと変換されていることが分かります。
後は、このCSSファイルを使いたいところに用いるだけです。

PHPUnitを使う

開発環境はWindows 10 Pro(64bit) + PHP 7.2.12。

PHPでテストを行うパッケージであるPHPUnitを利用してみたいと思います。

1.カレントディレクトリをxampp内のhtdocsディレクトリへ移動し、そこで、phpunitというディレクトリを作成して、カレントディレクトリをphpunitへ移動

2.composerでphpunitをインストールするための以下のコマンドを入力

composer require phpunit/phpunit

もし、インストールに成功していたら、以下のコマンドでバージョンが表示されるはずです。

vendor\bin\phpunit --version

3.次に動作を確かめるプログラムを書きます。

<?php
function sum_function($value1, $value2, $value3){
  return $value1 + $value2 + $value3;
}
?>

上記のプログラムをsum-function.phpで保存します。

4.次に動作をチェックするプログラムを書きます

<?php
require 'vendor/autoload.php';
include './sum-function.php';
use PHPUnit\Framework\TestCase;

class SumFunctionTest extends TestCase{
	public function test_one(){
		$value1 = 100;
		$value2 = 200;
		$value3 = 300;
		$result = sum_function($value1,$value2,$value3);
		$this->assertEquals(600,$result);
	}
}
?>

5.以下のコマンドを入力してPHPUnitを実行して動作を確かめます

vendor\bin\phpunit SumFunctionTest.php

Bootstrap4の使い方まとめ

事前に、タグの直前に、scriptタグで、jquery.js　popper.js、bootstrap.jsの順番に読み込めるようにして、その後に自分独自のJavaScriptが読み込まれるようにする。

Modal

■クリックした時にモーダルを表示する
任意のボタンをクリックした時に、モーダルが出現するようにします。Modalの一番外側であるid属性のexampleModalを利用して、
■JavaScript側

$(function(){
  $(document).on('click','#btn',function(){
    $('#exampleModal').modal('show');
  });
});

■HTML側

<button id="btn">モーダルの表示</button>

<!-- ModalのコードをHTMLに書いておく -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Modalのコードがここに入る -->
</div>

●BootstrapのModalで用意されているイベント
show.bs.modal - 表示しようとするとすぐに発生するイベント
shown.bs.modal - 表示完了したタイミングで発生するイベント
hide.bs.modal - 消そうとするとすぐに発生するイベント
hidden.bs.modal - 消去完了したタイミングで発生するイベント

参考リンク
Modal · Bootstrap

Carousel

・カルーセルをスライドさせたときに発生するイベントがBootstrapには組み込まれていて、それを利用して、いろんな値を取得することができます。例えば、fromは、現在、表示しているスライドの番号、toは、クリックした先のスライドの番号をそれぞれ取得します。

$('#carouselExampleIndicators').on('slide.bs.carousel',function(e){
  console.log('現在の番号:' + e.from + ' 次の番号:' + e.to);
});

参考リンク
Carousel · Bootstrap

Tooltip

■自分独自のJavaScript側(仮に、main.js)

$(function(){
  $('[data-toggle="tooltip"]').tooltip();
});

■HTML側

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>

Tooltip on bottomというテキストにマウスホバーすると、title属性の値である、Tooltip on bottomが表示される。

参考リンク
Tooltips · Bootstrap

Firefoxにて音声プレーヤーが再生されない問題を解決する

TBSラジオのサイトの音声プレーヤーで何度プレーヤーを再生しても、再生されないので、それを再生する方法を調べた。

1.privacy.resistFingerprinting.block_mozAddonManager(なければ、privacy.resistFingerprinting)をtrueにする
2.extensions.webextensions.restrictedDomainsをダブルクリックし、末尾に、,をつけた後に、
www.spiral-pf.comのドメインを追加
するとうまく再生できた。
結果として音声プレーヤーが黒ではなく、黄色になった。

CakePHP3のバリデーションでフィールドの値がユニークなものかチェックする

開発環境は、Windows 10 Pro(64bit) + PHP 7.2.12 + CakePHP 3.6.13。

Railsだと簡単にバリデーションできるんですが、CakePHPには、なぜか公式のドキュメントには専用メソッドが書いていなくて、ネットを検索したらありました。

モデルのTable内にて、

<?php
$validator->add('カラム名', [['unique' => 'validateUnique', 'provider' => 'table', 'message' => 'すでに使われています']]);
?>

参考リンク
validation - Validating fields as unique in cakephp 3.0 - Stack Overflow
・このサイトにありました。
CakePHP - cakephp3 isUnique バリデーションの記述方法｜teratail
バリデーション - 3.7
Class Cake\Validation\Validator | CakePHP 3.7
・公式ドキュメント(英語)なのに、ここには専用メソッドがなぜかありませんでした。