2019-11-17

CakePHP3で自己結合を行う方法

PHP CakePHP

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

今回は、postsテーブルを自己結合してみます。ネットを探しても、自分の意図にあった記事がなかったので書いてみることにしました。以下はpostsテーブルの中身。

postsテーブル

create table posts(
id int primary key auto_increment,
post text not null,
quote_id int,
created datetime,
modified datetime,
foreign key fk_quote_id(quote_id) references on posts(id);
)charset=utf8mb4;

やりたいことは、postsテーブルのquote_idに値がある場合に、そのquote_idと同じidのデータを1対1の自己結合したいと思います。

まずは、/src/Model/Table/PostsTable.php内のinitializeメソッド内に、以下のコードを書きます。

<?php
  $this->hasOne('QuotePosts', [
    'className' => 'Posts',
    'foreignKey' => 'id',
    'bindingKey' => 'quote_id',
    'joinType' => 'INNER'
  ]);
?>

今度は、コントローラやモデルで、データを読み込む場合、

<?php
  $query = $this->Posts->find()->where(['Posts.quote_id IS NOT' => NULL]);
  $query->contain(['QuotePosts']);
?>

もし、データが取得できれば、quote_post内にデータが入っています。
実は、INNER JOINの場合は、内部結合の仕様により、上記のwhere句の条件を記述しなくても、NULLじゃない値しか取得できません。例えば、Postsで取得した際に、quote_idがNULLの場合は、取得せずに、NULLじゃない場合は取得したければ、上記のhasOneメソッドのjoinTypeをINNERからLEFTにします。

もし、selectメソッドを利用して、Posts,QuotePostsそれぞれで取得したい、カラムを制限したければ、コントローラー内などのフィールド部分に以下のように書いておく。

<?php

  private $posts_columns = [
    "Posts.id", "Posts.post", "Posts.quote_id"
  ];

  private $quoteposts_columns = [
    "QuotePosts.id", "QuotePosts.post", "QuotePosts.quote_id"
  ];

?>

そして、使用する際には、

<?php
  $query = $this->Posts->find()->select($this->posts_columns);
  $query->contain(['QuotePosts' => function($q){
     return $q->select($this->quoteposts_columns);
  }]);
?>

のように使用する。

■参考リンク
https://book.cakephp.org/3/ja/orm/associations.html

2019-11-16

JavaScriptのスクロール関連の関数

JavaScript

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

現在のY軸のスクロール量を取得する

window.pageYOffset

Y軸のスクロール量の最大値

window.scrollMaxY

文書のY軸の高さを求める

window.innerHeight + window.scrollMaxY

ブラウザ画面内のY軸の高さを取得する

window.innerHeight

ブラウザ自体のY軸の高さ
※window.innerHeightとwindow.outerHeightはなぜか同じ値を返す

window.outerHeight

■参考リンク
window.scrollMaxY - Web API | MDN
JavaScriptでスクロール量を取得する方法
 Window.outerHeight - Web API | MDN
JavaScriptでスクロール量を取得する - Qiita

2019-11-09

JavaScriptでファイルの名前とタイプとサイズを調べる

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

ファイルを選んだ時点で、console.logに、ファイル名、ファイルサイズ、ファイルタイプが表示されます。

<script>
  let uploadFile = document.getElementById("uploadFile");
  uploadFile.addEventListener('change',function(e){
    console.log("絶対パス付きのファイル名:",e.target.value);
    console.log("ファイル名:",e.target.files[0].name);
    console.log("ファイルサイズ:",e.target.files[0].size);
    console.log("ファイルタイプ:",e.target.files[0].type);
  },false);
</script>
<body>
  <input type="file" id="uploadFile" />
</body>

2019-11-09

PHPでファイルのMIMEタイプとサイズを調べる

PHP

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

<?php

$filename = "test.mp4";
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime_type = finfo_file($finfo, realpath($filename));
echo "MIMEタイプ:".$mime_type."<br />";
finfo_close($finfo);
echo "ファイルサイズ:".filesize(realpath($filename));

?>

■参考リンク
https://www.php.net/manual/ja/function.filesize.php
https://www.php.net/manual/ja/function.finfo-open.php
【PHP】アップロードされたファイルの種類をどうやって確認するの？ - Qiita
マジックナンバーまとめ - Qiita

2019-10-29

CSSのz-indexでコンテンツをオーバーレイをする

CSS HTML jQuery JavaScript

開発環境は、Windows10 Pro(64bit) + Firefox 69.0.3(64bit)。

例えば、ボタンをクリックして、モーダルを表示させるときなど、ウィンドウ以外の背景部分のコンテンツの上に、分かりやすくするために、透過した色の背景をオーバーレイして、クリックできないようにしたりするものです。(ただし、クリックすると、モーダル自体が消えてコンテンツをクリックできるようになる)

これを実現するためには、CSSのz-indexを用います。z-indexは、指定した要素のCSSのpositionがstatic以外でないと使用できませんので、static以外のpositionを選ばないといけません。

以下のコードでは、ボタンをクリックすると、ボタン以外の背景は薄暗くなります。もう一度、ボタンをクリックすると、元に戻ります。薄暗くなった状態で、「アラートを表示します」と書かれたボタンをクリックしても機能しないと思います。「オーバーレイする」と書かれたボタンが薄暗くならないのは、オーバーレイした値よりも、z-indexの値が大きいからです。

オーバーレイの背景に使用したい要素(今回の場合は、以下のコードでは、.overlay部分)は、positionをfixedにすると、スクロールしても画面全体を覆いますが、positionをabsoluteにしてしまった場合、今見えている画面全体しか覆いませんので注意が必要です。
そして、背景よりも、上に表示したい要素は、positionをrelativeにしましょう。

■CSS部分

#content_block{
  width:150px;
  height:150px;
  z-index:50;
  position:relative;
}

.overlay{
  width:100%;
  height:100%;
  background-color:rgba(0, 0, 0, 0.4);
  z-index:10;
  position:fixed;
}

■JavaScript(jQuery部分)

$(function(){
  $(document).on('click', '#alert_btn', function(e){
    alert("アラートを表示しました");
  });

  $(document).on('click','#overlay_btn',function(e){
    $('#overlay_parts').toggleClass('overlay');
  });
});

■HTML部分

<html>
<body>
  <div id="overlay_parts"></div>
  <div id="content_block">
  <button id="overlay_btn">オーバーレイする</button>
  </div>
  いろいろなコンテンツがここに入っていく。
<button id="alert_btn">アラートを表示します</button>
</body>
</html>

■参考リンク
z-index－スタイルシートリファレンス

2019-10-23

Canvasタグ内に画像を表示する

HTML

開発環境は、Windows10 Pro(64bit) + Firefox 69.0.3(64bit)。

<canvas id="canvas" width="500" height="500" style="border:solid 1px #000;">
</canvas>

2019-10-22

Gitコマンド一覧

Git

直近のコミットメッセージの修正

git commit --amend -m "新しいメッセージ"

■ブランチ関連

# 新しくブランチの追加

git branch ブランチ名

# ブランチの一覧の表示

git branch

# 追跡リモートブランチも含めたブランチの一覧表示

git branch -a

# 特定のブランチへ移動する

git checkout ブランチ名

# ブランチをマージする

git merge ブランチ名

# ブランチを削除する

git branch -d ブランチ名

# ブランチを作成し、同時に、そのブランチに切り替える

git checkout -b ブランチ名

■未コミットのファイルを一時退避する(スタッシュ)

割り込みの仕事が入ってきた時に、今やっている作業を、一時的に、
横に置いておくことができる(コミットではない)機能。
割り込みの仕事が終わったら、再び復元できる。

git stash save

メッセージをつけたい場合

git stash save "メッセージ"

スタッシュの一覧表示

git stash list

退避した作業に戻る

git stash apply stash@{0}

スタッシュのリストから、特定のスタッシュを消す

git stash drop stash@{0}

退避先から戻す＋スタッシュのリストから消す

git stash pop stash@{0}

退避した作業をスタッシュのリストからすべて消す

git stash clear

■コミットにタグをつける

git tag タグ名

# メッセージをつける

viが開いてメッセージ入力ができる

git tag -a タグ名

# 任意のコミットにタグをつける

git tag タグ名 コミットID

■.gitignore

#特定ファイルを無視する

test.txt

#.rbという拡張子のファイルすべてを無視する

*.rb

#特定のファイルを無視しない

!test.rb

#特定のディレクトリ以下を無視

tmp/

#ルートディレクトリにある特定のディレクトリを無視

/log/

#コメント

# commet

■detached HEAD状態になった場合

HEADは通常、現在のブランチを指しているが、直接、コミットを指してしまうこと。
やることは、
1.detached HEAD状態でコミットしない
2.detached HEAD状態になったら、新規ブランチを作成する

■参考リンク
git コマンド branchの作り方 - Qiita
1. ブランチを作成する｜サルでもわかるGit入門【プロジェクト管理ツールBacklog】
git checkout でブランチ切り替え。仕様とオプションまとめ | WWWクリエイターズ
 git commit --amendでコミットメッセージを修正 - Qiita
【git stash】コミットはせずに変更を退避したいとき - Qiita
【Git】コミットにタグをつける - mzgkworks

k01ken’s b10g

He110 W0r1d!