k01ken’s b10g

He110 W0r1d!

CakePHP3で、外部キーを規約による指定とは別にしたい場合

開発環境は、WIndows10 Pro(64bit) + PHP 7.2.12 + CakePHP 3.7.9。※事前に、手動で外部キーとして指定したいカラムには、外部キーを貼っておくこと。例えば、1対多の関係の場合は、それぞれのModelのTableのinitializeメソッド内に、UsersTable.php $this->…

TypeScriptを使ってみる

開発環境は、Windows 10 Pro(64bit)。node.jsを事前にインストールしていることが前提条件です。TypeScriptは、JavaScriptを静的型付けとオブジェクト指向で書けるようなスクリプトで、最終的にJavaScriptに変換して使います。1.以下のコマンドを入力して、…

ESLintを使ってJavaScriptのコードをチェックする

開発環境は、Windows 10 Pro(64bit)。node.jsを事前にインストールしていることが前提条件です。ESLintは、JavaScriptのための静的検証ツールです。1.ディレクトリを作成し、カレントディレクトリを移動する cd c:\ && mkdir eslint_test && cd eslint_test2…

Mochaを使ってJavaScriptのテストコードを書いて検証してみる

開発環境は、Windows 10 Pro(64bit)。node.jsを事前にインストールしていることが前提条件です。Mocha Mocha - the fun, simple, flexible JavaScript test framework1.テスト用のディレクトリを作成するため、コマンドプロンプト上で以下のコマンドを入力。…

CakePHP3でログイン時のチェックボックスの有無によってクッキーの寿命を変更する

開発環境は、Windows 10 Pro(64bit) + PHP 7.2.12 + CakePHP 3.7.9。今回の記事はCakePHP3のAuthComponentを使用した前提で作っていきます。 以下のチュートリアルに基づいて、作っておいてください。 https://book.cakephp.org/3/ja/tutorials-and-examples…

CakePHP3で/config/app.phpのデータを読み書きをする

開発環境は、Windows 10 Pro(64bit) + PHP 7.2.12 + CakePHP 3.7.9。/config/app.php内の設定内容(設定内容を連想配列としてreturnで返している。今回はSessionというキーで値を読み込んでみます。Sessionの欄をコントローラなどで取得したい場合、コントロ…

CakePHP3で自己結合を行う方法

開発環境は、Windows 10 Pro(64bit) + PHP 7.2.12 + CakePHP 3.7.9。今回は、postsテーブルを自己結合してみます。ネットを探しても、自分の意図にあった記事がなかったので書いてみることにしました。以下はpostsテーブルの中身。 postsテーブル create tab…

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

開発環境は、Windows10 Pro(64bit) 。 現在のY軸のスクロール量を取得する window.pageYOffset Y軸のスクロール量の最大値 window.scrollMaxY 文書のY軸の高さを求める window.innerHeight + window.scrollMaxY ブラウザ画面内のY軸の高さを取得する window.…

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

開発環境は、Windows10 Pro(64bit) 。ファイルを選んだ時点で、console.logに、ファイル名、ファイルサイズ、ファイルタイプが表示されます。 <script> let uploadFile = document.getElementById("uploadFile"); uploadFile.addEventListener('change',function(e){…

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

PHP

開発環境は、Windows10 Pro(64bit) + PHP 7.2.12。 "; finfo_close($finfo); echo "ファイルサイズ:".filesize(realpath($filename)); ?> ■参考リンク https://www.php.net…

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

開発環境は、Windows10 Pro(64bit) + Firefox 69.0.3(64bit)。例えば、ボタンをクリックして、モーダルを表示させるときなど、ウィンドウ以外の背景部分のコンテンツの上に、分かりやすくするために、透過した色の背景をオーバーレイして、クリックできない…

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

開発環境は、Windows10 Pro(64bit) + Firefox 69.0.3(64bit)。 <canvas id="canvas" width="500" height="500" style="border:solid 1px #000;"> </canvas> ■関連リンク canvasに画像を表示する - Qiita canvasにローカル画像を表示 - Qiita

Gitコマンド一覧

Git

直近のコミットメッセージの修正 git commit --amend -m "新しいメッセージ" ■ブランチ関連 # 新しくブランチの追加 git branch ブランチ名 # ブランチの一覧の表示 git branch # 追跡リモートブランチも含めたブランチの一覧表示 git branch -a # 特定のブ…

BANDICAMを使ってみる

環境は、Windows10 Pro(64bit)。ゲーム実況がしてみたくなって、キャプチャーソフトを探していたところ、Bandicamをおすすめしていたので、無料版(ロゴつき、10分の制限)を試しに使ってみることにしました。 ■まずはインストール 公式サイトへアクセス www.b…

CakePHP3でformatResults()を用いて後処理をする

開発環境は、Windows 10 Pro(64bit) + PHP 7.2.12 + CakePHP 3.7.9。findメソッドを用いて、containなどで関連もつなげて作り終わったクエリーに対して、formatResults()を用います。今回は、受け取った値に応じて、違う値を、新たに生成したカラムに入れた…

TwitterのDM部分みたいに下にメッセージをどんどん追加する

TwitterのDM部分は、スクロールが最初から一番下に位置していて、一番上に持っていくと、無限スクロールによって、古いDMが読み込まれるような構造です。最初に投稿した段階で、メッセージは一番下に来るようにするには、positionをabsoluteにしなくてはいけ…

inline-blockの要素を右寄せする方法

CSS

幅をwidthで最初から指定せずに、文字列の長さに応じて動的に変更したい場合は、 display:inline-block; を追加すればいいんですが、これだと、 margin-left:auto; margin-right:0px; のような形で右寄せすることができません。今回はその解決メモです。 解…

PHPでis_numericを使用する際に注意点

PHP

開発環境は、Windows10 Pro(64bit) + PHP 7.2.12。is_numericだと、文字列化された数値はtrue扱い。 逆に、文字列などをintval、(int)した場合、0が返り、is_numericではtrue扱いになる。 だから、数値の文字列は変換しないでそのまま渡した方が良い。 以下…

JavaScriptでオブジェクトのコピーをする際の注意点

開発環境は、Windows10 64bit(Pro) + Firefox 69.0(64bit)。書くのが楽だからといってオブジェクトを直接入れてしまった場合、obj_aの値を書き換えると、obj_bの値も変わってしまう。これは、シャローコピーと言って、単に参照を渡しているだけだから、そう…

Reactで詰まったポイントの解決メモ

開発環境は、Windows10 64bit(Pro) + react@16.8.6。 ■ライフサイクルメソッドについて ・stateが変更されるたびに、componentWillUpdate,componentDidUpdateメソッドがそれぞれ呼び出される。 ■componentWillMountを使用すると、querySelectorAllでは、まだ…

Reactで親コンポーネントから子コンポーネントへstateを渡す

親コンポーネントのstateの状態に応じて、子コンポーネントの状態を切り替えたいと思います。 今回はサンプルプログラムとして、clickボタンを押すたびに、ONとOFFの表示が交互に切り替わるプログラムを書いてみたいと思います。親コンポーネントのstateの状…

JavaScriptで何番目のclass属性でイベントが発生したのかインデックスを取得する

開発環境は、Windows 10 Pro(64bit)。例えば、いいねボタンなどの複数のclass属性(今回はlike_btn)がある中で実際にクリックしたボタンのみを、色づけしたい、あるいは色づけを解除したい場合、jQueryのindexメソッドのようなものを、生のJavaScriptで行うに…

ReactでFontAwesomeを使う

開発環境は、Windows 10 Pro(64bit) + npm 6.4.1。www.npmjs.com

ReactでBootstrapを使う

開発環境は、Windows 10 Pro(64bit) + npm 6.4.1。https://react-bootstrap.github.io/ npm install react-bootstrap bootstraphtmlファイルのheadタグ部分に、

CakePHP3でReactを利用する

開発環境は、Windows 10 Pro(64bit) + CakePHP 3.7.8。qiita.com ここの記事を参考にして、CakePHPのルートディレクトリにて、 必要なモジュールをインストールしたが、bundle.jsを作成する段階でエラーが発生した。そこで、エラーメッセージに書いてある通…

ffmpegを利用する

開発環境は、Windows10 Pro(64bit)。動画から一部のフレームのサムネイル画像を作成したくて、ffmpegを利用してみることにしました。1.公式サイトへアクセスする https://www.ffmpeg.org/2.左サイドバーのDownloadと書かれたリンクをクリック 3.Get the pack…

Windows10でAnacondaを使ってみる

開発環境は、Windows 10 Pro(64bit)。1.公式サイトへアクセスする Anaconda https://www.anaconda.com/ 2.右上のDownloadボタンをクリック 3.Downloadボタンをクリック 4.Windowsアイコンをクリックし、Python 3.7 versionのDownloadボタンをクリック。イン…

Windows10にてAndroid Studioを使ってみる

開発環境は、Windows 10 Pro(64bit)。1.公式サイトへアクセスし、DOWNLOAD ANDROID STUDIOボタンをクリック 2.I have read and agree~にチェックボックスを入れて、 DOWNLOAD ANDROID STUDIO~ボタンをクリック 3.ダウンロードしたファイルを実行する4.Next…

Windows 10でSourcetreeを使う

開発環境は、Windows 10 Pro(64bit)。GUIで、Gitが使用できるSourcetreeをインストールする手順のメモ。1.公式サイトへアクセスする https://ja.atlassian.com/software/sourcetree2.Windows向けダウンロードボタンをクリック 3.Atlassian Softwareライセン…

Windows 10でcurlを使う

開発環境は、Windows 10 Pro(64bit)。curlはLinuxやMacでは最初からインストールされていますが、Windowsにはないので、Windowsでcurlを使いたい場合は、chocolateyというものを使います。 The package manager for Windows https://chocolatey.org/ 1.公式…