k01ken’s b10g

He110 W0r1d!

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
・公式ドキュメント(英語)なのに、ここには専用メソッドがなぜかありませんでした。

CakePHP3で画像をアップロードする際に一時ファイルなどの情報の場所

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

画像などをアップロードしても、CakePHPでは、規約により$_FILESを使うことができない。その対策として、代替の方法を書いておきます。

<?php
// 主にコントローラ内にてPOSTメソッドを受け取ったら
$img = $this->request->getData("fileのname属性名");
echo $img['size']; // ファイルサイズ
echo $img['type']; // ファイルの形式
echo $img['tmp_name']; // 一時ファイルの絶対パス
echo $img['name']; // 画像のファイル名
echo $img['error']; // エラーメッセージ
?>

で、name,tmp_name,size,error,typeが連想配列の形式で取得できる。

画像を複数枚アップロードしたい場合

formタグ内にて、

<input type="file" name="file[0]">
<input type="file" name="file[1]">
<input type="file" name="file[2]">

みたいに指定して、
アクション側では、

<?php

for($i = 0; $i < 3; $i++){
  $img = $this->request->getData("file")[$i];
}

?>

という風にする。連番にした方が、アクション側はfor文を使って、少ないコードでかけるので便利。


参考リンク
CakePHP画像をアップロードする - Qiita
・ここに書いてあることじゃ、情報が古いのかできず、自分で方法を見つけました。

PHPのImagickで縦横比を自動的に計算してサムネイル画像を作成する

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

横幅を指定するだけで自動的に高さも計算して、サムネイルを作ってくれるプログラムが見つからなかったので自分で書いた。

PHPでは、幅の数値を割るときに、floatに型変換しなくても、float型の値として小数点以下も表示してくれる。Pythonとは違うようだ。

ImagicKで画像を読み込むためには絶対パスで指定しないとエラーになる。
サムネイル画像はPHPのプログラムと同じディレクトリに入れている。

<?php

$Image = 'test.jpg';
$thumbImage = 'thumb_test.jpg';
$im = new Imagick(realpath($Image));

$width =  $im->getImageWidth();
$height = $im->getImageHeight();

// 仮に横幅を400と指定
$thumb_width = 400;

// 元の画像の横幅がリサイズしたい画像の横幅より大きければ
if($width > $thumb_width){
  $comparison = $width / $thumb_width;
  $thumb_height = $height / $comparison;
  $im->thumbnailImage($thumb_width, $thumb_height,true,true);
  $im->writeImage(__DIR__."\\".$saveImagePath);
}

?>


参考リンク
PHPでImageMagickを使ってサムネイル画像を作成する | Unskilled?
PHP: Imagick::thumbnailImage - Manual
PHP: realpath - Manual

PHPの関数の引数への値渡しと参照渡し

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

関数の引数への値渡しの場合、関数内部で引数の値を変えても、元の変数に影響はないが、参照渡しの場合、関数内部で引数の値を変えると、元の変数も変更される。

参照渡しの場合は、関数内の引数の前に&(アンパサンド)をつける。

<?php
function value($a){
	$a = "modified";
}

function reference(&$a){
	$a = "modified";
}

$a = "test";
value($a);
echo $a."<br>";
reference($a);
echo $a;
?>

実行結果
f:id:k01ken:20181219210404p:plain


参考リンク
PHP: 関数の引数 - Manual

CakePHP3のクエリービルダーで詰まったところ

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

SQL文を直接書く時は簡単なんですけど、それをクエリービルダーをやる場合に、詰まってしまったポイントを書いておきます。


■クエリービルダーでselect句を使う際のカラム名について
クエリービルダーでitemsテーブルから情報を取得する際に、

<?php
$this->Items->find()
?>

と書くと、生成されるSQL文では、select句にて、各カラムの名前を、『頭文字が大文字のテーブル名__カラム名』というエイリアスにas句を使って自動的に変更しています。
例えば、itemsテーブルに、priceというカラムがあれば、『Items__price』という名前に自動的に変更しています。

そして、テンプレート側で取得結果を表示する場合は、
1.カラム名が頭文字が大文字のテーブル名__カラム名
 (例: Items__price
2.カラム名
 (例: price
のどちらかに、as句で変更していると、foreachなどでレコード1つ分を取得した際に、$item->カラム名(例えば、$item->price)のやり方で問題なく読み込んで表示しますが、それ以外の場合は、その名称で、指定しないといけませんので、ちょっと面倒。

select文でのカラム名の変更の方法は、itemsテーブルにて、Items__priceカラムをpriceカラムに変更したければ、

<?php
$this->Items->find()->select(['price' => 'Items__price']);
?>

とするだけで良いです。


■タイトル、記事内容、タグの中に特定のキーワードがあれば、結果として返す場合のクエリービルダーの例
SQL関数であるconcatでタイトルと記事内容とタグを結合したものを、LIKE句を使って、検索することにします。

<?php

$query = $this->Articles->find();
$concat = $query->func()->concat(['title' => 'identifier', 'article' => 'identifier','article_tag' => 'identifier']);
$subquery = $query->select(['combine_string' => $concat])->select($this->Articles);

$q = $this->Articles->select(['id' => 'Articles__id', 'title' => 'Articles__title', 'article' => 'Articles__article', 'article_tag' => 'Articles__article_tag'])->from(["result" => $subquery])->where(['AND' => [['result.combine_string LIKE' => '%キーワード1%'], ['result.combine_string LIKE' => '%キーワード2%']])->order(['result.id' => 'DESC']);

$this->set('result', $this->paginate($q));
?>

参考リンク
CONCAT:文字列を結合する
CakePHP3.x ORMでFrom句に仮想テーブルを追加する方法 - Qiita
クエリービルダー - 3.7