2021年度 入部
あんどう
418 I'm a teapot
<BLINK>👀</BLINK>
この人が書いた記事
Vercel「人数分の料金を払え」←これを突破する。
内容を見る
作るものwsl --shutdown をGUIで叩く。GUIの方がめんどいわという人はこの記事の対象ではない。 例えばDocker DesktopやIDEを終了しても、WSLがかなりメモリを食っていたとする。 ポチッとな！ パソコンルームでブラクラを作っていた頃を彷彿とさせるプロンプトが出る。 はいを押すと立ち上がってるディストロが全部落ちる。ついでにRAM使用率も表示する。数字丸めるの忘れた。 そもそも作業中はコマンドを普通に叩くだろうから、なにか作業中にポチッとなすることは想定していない。これからゲームする時とかに使え。 VSCode設定変更PowerShell拡張機能を入れる。 "terminal.integrated.env.windows": { "PSExecutionPolicyPreference": "RemoteSigned" }settings.json に上記を追記し、自作スクリプトを実行可能にする。 Add-Type -Assembly System.Windows.Forms $result = [System.Windows.Forms.MessageBox]::Show("WSL全部終了する?","確認","YesNo","Question","Button2") If($result -eq "Yes"){ wsl.exe --shutdown # https://shellgeek.com/powershell-get-memory-usage/ $CompObject = Get-WmiObject -Class WIN32_OperatingSystem $Memory = ((($CompObject.TotalVisibleMemorySize - $CompObject.FreePhysicalMemory)*100)/ $CompObject.TotalVisibleMemorySize) [void][System.Windows.Forms.MessageBox]::Show("現在のRAM使用率: " + $Memory + "%", "WSLを終了しました") } exit 0 VSCodeで上記のスクリプトを書き、適当な場所に保存する。 ただ、MessageBoxはShift-JISしか日本語を受け付けないっぽいので、エンコードを変えて保存し直す必要があると思う。 UTF-8で保存して日本語を出せる方法を誰か教えてくれ～ ショートカット作成 ショートカットを作成。分かりやすい名前を付ける。 ショートカットを無理やり追加本当は上記ファイルをスタートメニューにぶちこみたいんだが、右クリックメニューにないしD&Dもできない。 仕方ないので `%AppData%\Microsoft\Windows\Start Menu\Programs にショートカットを放り込む。 放り込んだショートカットのプロパティを開く。 powershell -ExecutionPolicy RemoteSigned -File "ps1ファイルのパス"ただ単にps1ファイルへのショートカットになっているので、先頭にpowershellを追記し、あとポリシーを変える。 あとは検索すれば出てくるはずなので、スタートメニューにピン留めする。 参考RAM取得する部分https://shellgeek.com/powershell-get-memory-usage/ メッセージボックスhttps://acoustic-groove2.hatenablog.com/entry/2018/01/29/233637 実行ポリシーhttps://zenn.dev/nekocodex/articles/eb3403961ad9b966ff6e
RAMちゃん「〽ああ〜〜 男の人って〜〜〜 いくつも〜〜〜 RAMを持って〜いるのね〜〜〜」 →持ってねえよ！ だが無駄にPCが複数ある！！！ DockerのRAM消費をケチるため、PCを2台使って分担する。 --- 概要以下、2台のPCと3種類のターミナルが登場する。WSLマシンホスト: WSLを動かすWindowsゲスト: WSLのLinuxメインPC: 任意のPC。IDEやブラウザはここで動かす WSL用マシンのIPを固定ルータをいじって、WSLのマシンのIPを固定する。 Buffaloだったら「詳細設定→LAN→DHCPリース」から設定できる。 以下、このIPは 固定したIP とするが、流石にスクリプトにハードコーディングはしない。 WSL用マシンの準備 (WSLホスト側)前提として以下を済ませる。Windows Terminalを入れておくストアはめんどいのでGitHubから背景写真とかいじれて楽しいよWSL2の有効化Docker Desktopのインストール俺、これ知らなくてUbuntuにDocker入れちゃったそもそもDocker Desktopのインストーラが全部やってくれるので、WSL側で何かすることはないHyper-VではなくWSL2バックエンドを選択することなおRDP(リモートデスクトップ)やOpenSSHサーバーは不要。まあ画面がしょぼいとかの理由で、RDPがあればベターだが、Proライセンスいるんよな。 wsl.exe -l -v してWSL1だった場合、以下のようにアップグレードする wsl.exe --set-version ディストロ 2 wsl.exe --set-default-version 2 あと不確実性排除のためにディストロ固定する。お使いのディストロに合わせて適宜調整すること。wsl --set-default ディストロ スクリプトを書く (WSLゲスト側)以下、ホストのexe叩くだけなので、任意のディストロで動くはず。 ポートフォワード設定sudo vi /bin/port_forward.sh ユーザ関係ないのでbinに置いたが、適宜変えてくれ！ベターな場所があるはず #!/bin/bash # ポート開放の自動化 # Usage: ログオン時にやれ！ # ゲストのIP IP=$(ip route | grep 'eth0 proto' | cut -d ' ' -f9) function forward() { PORT=$1 # 2つめのポート指定なければ同じポートを使う PORT2=${2:-$PORT} # まず削除 netsh.exe interface portproxy delete v4tov4 listenaddress=0.0.0.0 listenport=$PORT2 netsh.exe interface portproxy add v4tov4 connectaddress=$IP connectport=$PORT listenaddress=0.0.0.0 listenport=$PORT2 } forward 22 2222 # SSHは2222に転送 # 以下はLaravel Sail用なので適宜変更 forward 3306 # mysql forward 6379 # redis forward 7700 # meilisearch forward 8025 # mailhog forward 8000 # web # 自動起動 sc.exe config iphlpsvc start=auto sc.exe start iphlpsvc sudo service restart ssh 上記のスクリプトを書く。以下のことをしているホストのipconfig.exe を叩いてIPを取る。先程固定したが念の為。ゲストのIPを取る。netsh.exe でポートフォワードを設定する。ドキュメントはこちらforward関数に2つ目の引数を渡したら、VMとホストで違うポートを使う(22 → 2222)渡されなかったら単に同じポートを使う。SSHサービス毎回再起動。しないとゲストのIPが変わってreset by peer と怒られる 状況確認netsh.exe interface portproxy show v4tov4 ipv4 をリッスンする: ipv4 に接続する: Address Port Address Port --------------- ---------- --------------- ---------- 0.0.0.0 2222 WSLのIP 22 # 後略 こんな感じになるはず。この場合 2222 番ポートにSSHすればWSLに入れる。 削除netsh.exe interface portproxy delete v4tov4 listenport=ポート なんか間違えたときはこれで削除。 SSH使えるようにする (WSLホスト側 2)次に、ログオン時にポート開放するタスク設定と、ファイアウォール。 タスクスケジューラタスクスケジューラで以下のタスクを定義する。名前は「WSLポートフォワード」など「ユーザーがログオンしているときのみ」「最上位の特権で実行」トリガーはログオン + 1分遅延を入れるさもないと、何故か実行時にパラメータ不足で失敗する wsl -u root --exec /bin/port_forward.sh操作は上記のコマンド。 多分これでいいはず。 ファイアウォールcontrol firewall.cpl ファイアウォールを開ける。「詳細設定」→「受信の規則」から新しいルールを追加し、ポートTCP2222,3306 という風に必要なポートを開ける。 リモート開発 (WSLゲスト側2)あとは、リモート開発をする。 開けたポートを使うようなコンテナを動かしていく。 cd 任意の開発用ディレクトリ curl -s https://laravel.build/laravel-sandbox | bash 面倒なので一発で立ち上がるやつ。これをやらかすと laravel-sandbox にLaravel一式がクローンされ、勝手にdocker-compose.ymlに書いてあるコンテナのビルドや、.envのコピーまで始めてくれる。一式というと、PHPもComposerもDBもここでビルドするので、割と時間がかかる。 cd laravel-sandbox sed -i 's/APP_URL=http:\/\/localhost/APP_URL=http:\/\/localhost\nAPP_PORT=8000/' .env ./vendor/bin/sail up80番になっているので APP_PORT=8000 に変えて起動。 メインPCvi ~/.ssh/config Host wsl HostName WSLマシンのIP Port 2222 User WSLのユーザ名 ssh wsl これでWSLに入って開発できるはず。VSCodeやJetBrainsのSSH機能も使える。 SSHだけじゃなく、8000番台とかも開放したのでWebアプリの動作確認もできる。 PhpStormがRAM4GB要求してくるJetBrains系IDEはみんなこうなのか試してないが、PhpStormは4GM要求してきた。 俺のWSLマシンのRAMが4GBしかなく、フルにWSLに割り振る必要が出てきた。wsl --exec vi /mnt/c/Users/ユーザー/.wslconfig [wsl2] memory=4GB wsl --shutdown まあ実際は4GB割り振れないんだが、誤魔化せる ▲passwordはpasswordではない（多分翻訳ミス） 参考https://qiita.com/yabeenico/items/15532c703974dc40a7f5 ポートフォワード部分https://zenn.dev/d_hori/articles/128f8976a48b52 ホストのIPhttps://learn.microsoft.com/ja-jp/windows/wsl/wsl-config .wslconfig
Chromeのプロフィール選択で、Windowsならデスクトップショートカットを作るボタンがあるんですけど、Macにはないので自作します。 時々プロフィール選べない問題 皆さんChromeで「前回開いていたページを開く」にしていますか？賛否あると思うんですが、基本的にはこれが一番便利だと思います。 もちろんこの場合、学校用プロフィールを作っておかないと事故ります。 つまり、「前回開いていたページを開く」人は、「起動時に（プロフィール選択を）表示する」にチェックを入れないとやばいです。 しかしですね、Macだけかもしれませんが、Chromeがプロフィール選択画面をすっ飛ばす謎の現象が多々発生するんですよ。 講義室で開く用のショートカットを作る ということで、「最初から学校用のプロフィールが開くショートカット」を作ります。 https://superuser.com/questions/377186/how-do-i-start-chrome-using-a-specified-user-profile Super UserのLinuxオタクによると、Application Supportにプロフィールがおいてあるらしいですよ。それで--profile-directory を付ければいいらしいです。 デフォルトの写真を確認$ qlmanage -p ~/Library/Application\ Support/Google/Chrome/Default/Google\ Profile\ Picture.pngまずDefault のプロフィール写真を見ましょう。ほとんどの場合、個人用Googleアカウントの写真が出るはずです。この写真が学校用だったら次の手順は飛ばしてください。 余談ですがqlmanageで立ち上がるプレビューは「プレビュー.app」ではないのでcontrol+Cで死にます。ちょっと確認したいときはこっちを使いましょう。(参考) $ PROFILE_NAME=$(ls ~/Library/Application\ Support/Google/Chrome | grep ^Profile | head -n 1) $ echo $PROFILE_NAME # Profile 1複数のプロフィールを作ると、Application SupportにProfile nというディレクトリができます。Default以外は学校用プロフィールしか作ってない場合、Profile 1 が学校用になるはずです。 $ cat <<EOT > ~/Desktop/学校用Chrome.sh #!/bin/bash open -b com.google.Chrome -n --args --profile-directory="$PROFILE_NAME" EOT $ chmod +x ~/Desktop/学校用Chrome.shスクリプトを作ります。エディタ宗教戦争に「エディタを使わない」という手段で抵抗。あとmacでしか使わないからbashでいいでしょ別に。 -b でappファイルの名前でなくバンドル識別子を使います。こっちのほうが確実。あと-n でアプリを無理やり増やします。これを付けないとすでに起動してるときに動作しない。(参考) はいこれで学校用ショートカットができました。 ターミナル.appの挙動について 「正常に終了したら閉じる」を選んどけば、勝手にexit; が入って閉じられるようです。 Raycast使った場合https://www.raycast.com/ MacならRaycast使いましょ Script Commandsという機能を使います。公式のリポジトリをクローンして、_enabled_commands に以下のスクリプトを入れて下さい。#!/bin/bash # Required parameters: # @raycast.schemaVersion 1 # @raycast.title 学校のメアド (Chrome) # @raycast.mode silent # Optional parameters: # @raycast.icon 🏫 # Documentation: # @raycast.author temasaguru /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --profile-directory="<さっき調べたプロファイルフォルダの名前>"Raycastを開いて、「学校のメアド (Chrome)」を選ぶだけで学校のプロファイルが起動します。かんたん！
岡山大学工学部の新ホームページには、表示上の欠陥があります。 情報・電気・数理データサイエンス系とかいう欲張りで長すぎる名前が、「令和3年度〜新生工学部Webサイト」と被ってしまっています。 この現象は、画面の横幅が412px を下回った時に起こります。画像で記述されたロゴがどちらも透過画像であるため、文字が読みづらくなります。 本来は、HPを作成した岡山大学自然系研究科等事務部総務課に連絡すべきですし、今からしようと思いますが、成績が悪くて連絡しづらい夏季休業期間中ということで無理やり修正します。 修正する上での気を付けたことJavaScriptは使わない見た目の問題を後付けスクリプトでいじることはできるだけ避けたい行為です。 疑似要素を活用する既存の要素のプロパティ変更には限界があります。 例えば今回の場合、ロゴがpng画像なので、文字列を改行させるわけにはいきません。 そこで、before/after擬似要素を追加して、「令和3年度〜新生工学部Webサイト」を無理やり書き込みます。 Stylusを入れようStylusのダウンロード Google Chrome拡張の「Stylus」を入れます。Firefoxにも対応していますが、リンクは割愛します。 CSS:root { --sublogo_width: 35vw; --header_height: 37px; } #header .inr #logo { position: relative; } #header .inr #logo a { z-index: 4; } /* 本来のサブロゴは消す */ #header .inr .sp_subLOGO { display: none; } h1#logo::after { position: absolute; top: 0; display: none; height: var(--header_height); content: '令和3年度～新生工学部Webサイト'; align-items: center; justify-content: flex-end; right: 60px; width: var(--sublogo_width); font-size: 1rem; text-align: right; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; z-index: 3; } @media screen and (min-width: 310px) and (max-width: 1000px) { h1#logo::after { display: flex; } } sublogo_width の35vw は完全に適当に決めているので、ベターな値があるかもしれません。 結果 疑似要素に「令和3年度〜新生工学部Webサイト」を書いているため、その横幅に応じて改行がされます。 スマホの横幅だといい感じに改行されて、メインロゴと被りません。なお、あまりに狭い場合はメディアクエリでサブロゴを隠します。 align-items: center; のおかげでいい感じに中央寄せできています。数年前にはできなかった選択肢。ありがとうflexbox！
