HTML上の添付ファイル取得とダウンロードをJSでやる

JavaScriptで添付ファイルを拾うのと、ファイルを落とす処理のサンプルコード

<html>
<head>
  <meta charset='utf-8'>
  <title>js file up/dl example</title>
  <script>
    window.onload = () => {
      const fr = new FileReader();
      const el = document.getElementById("test");

      fr.onload = (ev) => {
        const dl = document.createElement('a');
        dl.setAttribute('href', ev.target.result);
        dl.setAttribute('download', el.files[0].name);
        dl.style.display = 'none';
        document.body.appendChild(dl);
        dl.click();
        document.body.removeChild(dl);
      };

      el.onchange = () => {
        fr.readAsDataURL(el.files[0]);
      };
    };
  </script>
</head>
<body>
  <input type="file" id="test"></input>
</body>
</html>

Windows + nginxでPHPを動作させる

確認環境

Env Ver
Windows 10 pro
PHP 8.0.2 NTS Visual C++ 2019 x64
nginx 1.19.8

手順

  1. nginx.confを開きFastCGI server listening on 127.0.0.1:9000辺りに次の設定をする
    location ~ \.php$ {
        root           html;
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  C:/nginx/html/$fastcgi_script_name;
        include        fastcgi_params;
    }
    
  2. 設定したフォルダに.phpファイルを配置
  3. nginxを起動
  4. php-cgi.exe -b 127.0.0.1:9000
  5. .phpファイルにアクセス

サービス化する

  • winswを使うとできるらしい

MSYS2でのzshのread -qエラー対策

MSYS2のzshで.zshを叩いたときに次のエラーが出るときの対策

./test.zsh: 2 行: read: -q: 無効なオプションです
read: 使用法: read [-ers] [-a array] [-d delim] [-i text] [-n nchars] [-N nchars] [-p prompt] [-t timeout] [-u fd] [name ...]

動かないシェルスクリプトのサンプル

  • 但しこれは動く
    • echo "yes or no (y/N): "; if read -q; then; echo hello; else echo abort; fi
echo 'yes or no (y/N): '
if read -q; then
  echo y
else
  echo n
fi

解決方法

  • 次のようにshebangを入れてやる
    • 多分shが呼ばれているのだと思う
#!/bin/zsh

echo 'yes or no (y/N): '
if read -q; then
  echo y
else
  echo n
fi

nginxのリバースプロキシでBasic認証を通す

  1. 次のコマンドでBase64エンコードしたIDPWを吐く
    1. echo -n 'username:password' | base64
  2. nginxの設定ファイルを以下のように設定し、 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXを暗号化したIDPWに置き換える
location /foo/ {
    # プロキシが使うHTTPヘッダ
    proxy_set_header Authorization "Basic XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
    # プロキシするURL
    proxy_pass   https://example.com/;
}

Gitでリポジトリ管理されているファイルをローカルで無視する

いくつか方法があるが、正直どれも使わないに越したことはない。しかし業務上の様々なしがらみなどでやむを得ず使うハメになることがある

ローカルで無視しておきたいがリモートで変更があったときには検知したいケース

リモートの変更まで無視してしまうと事故の元なので一番オススメ
git update-index --[no-]skip-worktreeを使う

  • .envのような個々人の環境によって異なるものがリポジトリ管理対象になっているときに使える
  • ブランチの切り替え時のコンフリクト対策としてはスクリプトを組んでおくと楽

ブランチ切り替え時のテクニック

  • ブランチで--skip-worktreeとなっている対象の変更を隠す
# --skip-worktreeの一括解除
git ls-files -v | grep ^S | sed -r 's/^S.(.+)$/\1/g' | xargs git update-index --no-skip-worktree
# 出てきた変更を全てスタッシュに入れる
git stash push -q -m stash_skiptree
  • 前項で隠した変更を再現して、--skip-worktreeし直す
# stashから戻す
git stash pop -q
# この時点での差分に対し--skip-worktree
git diff --name-only HEAD | xargs git update-index --skip-worktree

常に無視しておきたいケース

リモート側で重大な変更があったときにローカルで検知できないので事故りやすい
git update-index --[no-]assume-unchangedを使う
使ったことないので存在だけ記述して終わり

リポジトリの管理下にないファイルを常に無視するケース

--[no-]skip-worktreeも--[no-]assume-unchangedも使えないときにユースケースが存在するやつ

  • .git/info/excludeに無視対象のパスを記述することで無視できる
  • 自分のローカルにだけこっそり存在するdocker-compose.override.yamlみたいなのを無視するときに使える