<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

2019-10-18

BANDICAMを使ってみる

キャプチャ

環境は、Windows10 Pro(64bit)。

ゲーム実況がしてみたくなって、キャプチャーソフトを探していたところ、Bandicamをおすすめしていたので、無料版(ロゴつき、10分の制限)を試しに使ってみることにしました。

■まずはインストール

公式サイトへアクセス
www.bandicam.jp

ダウンロード(無料)をクリック
f:id:k01ken:20191018123838p:plain

Bandicam ダウンロード無料版をクリック
f:id:k01ken:20191018124210p:plain

ダウンロードしたbdcamsetup.exeをクリック

日本語を選択し、OKをクリック
f:id:k01ken:20191018123609p:plain

次へをクリック
f:id:k01ken:20191018123634p:plain

同意するをクリック
f:id:k01ken:20191018123642p:plain

次へをクリック
f:id:k01ken:20191018123650p:plain

インストールをクリック
f:id:k01ken:20191018123658p:plain

完了をクリック
f:id:k01ken:20191018123707p:plain

■実際に使ってみる

試しに、すでにパソコン内にインストールしているCandy Crush Friendsで、
キャプチャを行ってみます。

BANDICAMを起動

Candy Crush Friendsを起動

指定した領域をクリック
f:id:k01ken:20191018125044p:plain

キャプチャしたい領域を囲う
f:id:k01ken:20191018125157p:plain

キャプチャ画面上部のRECボタンをクリック。クリックすると、赤い枠が出現します。

キャプチャ中に停止ボタンをクリックすると、自動的に動画ファイルが生成されています。
ただ、完成された動画は、実際にプレイした画面よりも、映像が粗いです。

k01ken’s b10g

He110 W0r1d!

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

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