tkhrsskの日記

技術ネタなど

SIerスキル

めちゃわかるツイート。

ちょっと大きめな開発に関わることが多いので、ものすごく欲しい能力だし後輩たちにも身につけてほしい。 特に各人の認識の言語化。めちゃむずい。

Python開発環境

Python開発のきほんをおさえたい

(WIP)

ディレクトリ構成

qiita.com

VSCode

linterやformatterのベストプラティクスを探す(WIP) flake8でチェックして、autopep8でフォーマットするのが無難っぽい。

VSCodeのPython開発環境でpylintの代わりにflake8を導入し自動整形を設定する - Qiita

Pythonプログラムの静的解析 - Qiita

テストコード

$ pip install pytest pytest-mock pytest-cov

これでpytestコマンドが通るようになる。 環境上通っていない場合は、 python3 -m pytest でもOK。

よく困る現在時刻のMock化は下記を参考にする。

pytest でも datetime.datetime.now() を mock したい! - Qiita

monkeypatchによるmockの使い方は下記が参考になる。

thinkami.hatenablog.com

テレワーク環境整備

モニター

  • LG ゲーミング モニター 34WP65G-B
  • BESTEK PC モニター アーム BTSS01BK
  • VESA規格変換プレート NB-VS7510H

コスパのいい平面のウルトラワイド(2560X1080)のディスプレイ。 VESA規格のアームつけるのにアダプタが必要。アームは取り付け前に中央の可動部を緩めておかないと後から傾きを調整できない。

OnScreen Control というソフトがめちゃくちゃ便利。作業用には横並びでの3分割がおすすめ。

symsymblog.com

https://www.lg.com/jp/support/software-firmware?csSalesCode=43UD79-B.AJL

切り替え機

自宅Macと仕事Win、仕事MacそれぞれのPCを使うので、切り替え機も一通り用意。

  • GANA HDMI切替器 4Kx2K HDMI分配器/セレクター 3入力1出力 HDMI-SWITCH-BLA-FBA
  • Rocketek USB 3.0 切替器 4入力4出力 PC4台用 RT-HC406-JP

USB切り替え機は商品説明とちょっとだけ違うところがあって、出力用の1ポートが電源供給用のポートになっていた。USB接続のヘッドセットを安定的に繋げられるので結果良し。

ヘッドセット

SennheiserのUSB接続のものを。 Bluetoothイヤホンは接続不安定。やっぱ有線は安定している。

Webカメラ

ZZCP B08NHJYJD8 ノートPCは畳んで立てかけるので、外付けWebカメラが必要。ライト付きの適当なものを選んだ。

その他

  • 1homefurnit 机上台 木製モニター台 B0759CPNRZ
  • ノートパソコン スタンド 縦置き VAYDEER B07MFSK7ZB
  • Anker PowerExpand+ 7-in-1 USB-C PD イーサネット ハブ
  • MOCOBO シリコン ケーブルホルダー B086QJZ4FL
  • デスクヒーター Leadfar LY-03B

MacBookProを買った時にするセットアップ

まだ買ってないけど、MacBookPro買い換えたいと思っているので、買い換えた時のセットアップしたいことをメモする。

Windows 10

なんだかんだゲームするときにWindows欲しいので、下記記事を参考に。

MacBook AirにWindows10をインストール - tkhrsskの日記

VisualStudioCode

tkhrssk.hatenablog.com

このとき書いてないけど、 code コマンドで開けるようにするのは必須。

あと、PlantUML環境(localサーバ)とSpringBoot環境はセットアップしておきたい。

入れておくソフト

Game

環境設定

実操作

brew install git
brew install tig
brew install iproute2mac
brew install htop
brew install zsh-completions
brew install colordiff
brew install nodebrew
mkdir -p ~/.nodebrew/src
nodebrew install-binary latest
nodebrew use v15.2.1
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
. ~/.zprofile
ln -s /usr/local/share/git-core/contrib/diff-highlight/diff-highlight /usr/local/bin
git config --global diff.compactionHeuristic true
git config --global pager.log 'diff-highlight | less'
git config --global pager.show 'diff-highlight | less'
git config --global pager.diff 'diff-highlight | less'

日本語ファイル対応

git config --global core.quotepath false

zsh補完

mkdir -p ~/.zsh/completion
curl -L https://raw.githubusercontent.com/docker/cli/master/contrib/completion/zsh/_docker > ~/.zsh/completion/_docker 

蓋を閉じてもスリープさせない(本当に必要なら)

sudo pmset -a disablesleep 1

MacBookシリーズで蓋を閉じてもスリープにさせない方法 | INFORNOGRAPHY

Java8... Dockerで良かったかも。

brew tap AdoptOpenJDK/openjdk
brew install --cask adoptopenjdk8

複数バージョンインストール時の切替方法

export JAVA_HOME=`/usr/libexec/java_home -v "1.8"`
PATH=${JAVA_HOME}/bin:${PATH}

2021/1/16 追記 いつの間にか、brew cask install adoptopenjdk8が使えなくなって、--caskになっていた。

HTML5 canvasの直線にマウスが触れたかどうかを判定するjavascript

週末プログラミング。 canvas内で描画した線にマウスが触れたかどうかを判定するコード。 円や長方形に触れたかどうかのjavascriptサンプルはstackoverflowでそれなりにヒットするけど、直線は見つからなかったので書いてみた。

デモページ(触れたかどうかはコンソールに出力)
コード
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
    <h1>Canvas</h1>
    <div class="wrapper">
        <canvas id="drawArea" width="300" height="300" style="background-color:#ecc;">Canvas not supported</canvas>
    </div>
    <p>直線にヒットしたかを判定する javascript サンプルプログラム</p>
    <p>判定方法は下記URLの計算式を参考にしました。</p>
    <a href="http://www.iot-kyoto.com/satoh/2016/01/16/hittest-001/">http://www.iot-kyoto.com/satoh/2016/01/16/hittest-001/</a>
</body>
<script>
    var lines = [
        { x1: 10, y1: 20, x2: 120, y2: 180, width: 2, style: "#c00"},
        { x1: 110, y1: 230, x2: 220, y2: 180, width: 6, style: "#000" },
        { x1: 210, y1: 5, x2: 170, y2: 10, width: 3, style: "#080" },
        { x1: 20, y1: 205, x2: 280, y2: 10, width: 10, style: "#00c" }
    ]
    function setup() {
        for (var i = 0; i < lines.length; i++) {
            line = lines[i];
            var angle = Math.atan2(line.y2 - line.y1, line.x2 - line.x1);
            line.sn = Math.sin(angle);
            line.cs = Math.cos(angle);
        }
    }
    function drawCanvas() {
        setup();
        var canvas = document.getElementById('drawArea');
        var context = canvas.getContext('2d');
        for (var i = 0; i < lines.length; i++) {
            line = lines[i];
            drawLine(context, line.x1, line.y1, line.x2, line.y2, line.width, line.style);
        }
        canvas.onmousemove = function (e) {
            var r = canvas.getBoundingClientRect();
            var x = e.clientX - r.left;
            var y = e.clientY - r.top;
            hover = false;
            for (var i = 0; i < lines.length; i++) {
                line = lines[i];
                hover = isHit(x, y, line.x1, line.y1, line.x2, line.y2, line.width, line.sn, line.cs);
                if (hover) {
                    console.log("Hit:" + i + "番目の線にヒットしました", x, y);
                    break;
                }
            }
        }
    }
    function isHit(px, py, x1, y1, x2, y2, h, sn, cs) {
        // Ref: http://www.iot-kyoto.com/satoh/2016/01/16/hittest-001/
        var ret = false;
        var xm1 = x1 - px;
        var ym1 = y1 - py;
        var xm2 = x2 - px;
        var ym2 = y2 - py;
        var xr1 = xm1 * cs + ym1 * sn;
        var yr1 = -xm1 * sn + ym1 * cs;
        var xr2 = xm2 * cs + ym2 * sn;
        var yr2 = -xm2 * sn + ym2 * cs;
        var sx = xr1;
        var sy = yr1 - h/2;
        var dx = xr2 - xr1;
        var dy = h;
        if (sx > 0 || sy > 0 || sx + dx < 0 || sy + dy <= 0) {
            ret = false;
        } else {
            ret = true;
        }
        return ret;
    }
    function drawLine(context, ax, ay, bx, by, w, s) {
        context.lineWidth = w;
        context.strokeStyle = s;
        context.beginPath();
        context.moveTo(ax, ay);
        context.lineTo(bx, by);
        context.stroke();
    }
    window.onload = () => {
        drawCanvas();
    };
</script>

</html>

2020/9/22 幅の判定が誤っていたため修正。