技術ネタ

はじめに 概要 WindowsのWSL2でVisual Studio Codeを開いて日本語入力していると、 文字が二重で入力されたり違う場所に入力されたりする問題が頻繁に発生していました。 今回はこの問題を解決方法を軽く調査してみます。 原因かも？ 原因は特定できていませんが、Geminiに聞いたところ、Visual Studio Codeの場合、 Vimの拡張機能（Vimのキーバインドを使用するやつ）を入れていると入力が不安定になるかもとのことです。 ちゃんと調べられていないのですが、 たしかにVimの拡張機能が原因で不具合が起きることが前にもあったので、 ひとまずVimの拡張機能まわりで対処方法を調べてみます。 開発環境 Windows 11 WSL2 / Ubuntu 24.04 Visual Studio Code 1.106.3 発生している問題 WSL2から開いたVisual Studio Codeで日本語入力時に文字が二重で入力されたり違う場所に入力されたりする。 特に漢字の変換時におかしくなる気がするが、うまく再現しないのでよく分かっていない。 解決方法1 ひとまずVimの拡張機能を無効にしてみる方法があります。 Visual Studio Codeでは拡張機能をアンインストールしなくても無効にできるので、 とりあえず無効にしてみてから日本語入力が安定するか確認してみるとよさそうです。 ちなみに私の環境ではVimの拡張機能を無効にしたら普通に日本語入力が安定している気がします。 解決方法2 Vimの拡張機能が有効になっている状態で、settings.jsonに下記を追加します。 "vim.autoSwitchInputMethod.enable": false この設定でVimのモード切替時に自動で日本語入力と英数字入力の切り替る機能をオフにできます。 どうやら入力の不安定さはWindowsとUbuntuの連携がうまく取れていないことが原因になっている可能性があるっぽいです。 今回の入力モードの自動切り替えのような便利機能が現在の状態を監視する時にOS間でうまく同期が取れずに入力が不安定になるみたいな感じです。 私の環境だとこの設定を行って今のところ安定して入力できています。 とはいえ不具合をうまく再現できていないので本当に効果があったのかイマイチ分からない状態ではあります。 おわりに 長い間困っていた問題について調べてみました。 なぜか今は調子がよくて日本語を安定して入力できてしまっているので、 問題が解決したのかどうかよく分からず意味のない記事になってしまった気もしますが、 とりあえず記録として残しておきます。 そもそもOS側かVisual Studio Code側かVimの拡張機能側のアップデートで修正された可能性もあります。 どちらにせよ日本語入力が安定していれば良いかと思います。 それでは、また。

はじめに 自分で作った楽曲に動画を付けたかったので、 TouchDesignerを使って曲の音声に合わせた動画を作成してみます。 TouchDesignerは映像やデジタルアート作品を作成できるソフトウェアです。 インストール 下記リンクが公式サイトで、ここからインストールできます。 TouchDesignerの公式サイト 環境 私はWindows 11 Homeで試しました。 TouchDesignerの使い方 Touch Designerでは音声や映像などに関するノード（オペレータ）の入出力を繋いで作品を作っていきます。 実際のTouchDesignerでノードを繋いでいる様子が下図です。 TouchDesignerの画面 ノード（オペレータ）の種類 TouchDesignerの画面上でTABキーを押すとノード（オペレータ）の選択ウィンドウが表示されます。 ノード（オペレータ）のウィンドウ ノード（オペレータ）の種類は下記です。 COMP(Component Operators)：コンポーネントとして扱うためのものなど TOP(Texture Operators)：画像や映像など（2D） CHOP(Channel Operators)：音声など SOP(Surface Operators)：立体など（3D） DAT(Data Operators)：テキストなど MAT(Material Operators)：3Dオブジェクトのマテリアルなど 曲の音声に合わせた動画を作成する 自分で作った楽曲の音声に合わせた動画を作成してみます。 下記のYouTubeの動画を参考にさせていただきました。 ありがとうございます。 参考動画 音声ファイルを入力していい感じの波形にする まず対象の曲の音声ファイルを入力して波形を作ります。 CHOPのAudio File Inノードを使用して音声ファイルを取得します。 さらにこのノードをAudio Spectrumノードに繋いで周波数ごとに分けた波形を生成します。 しかしこのままだとサンプル数が多いので、 Resampleノードに繋いでサンプル数を減らします（今回は5に設定）。 また作業中に音を聴けたほうが便利なのでAudio Device Outノードにも繋いでPCから音声が流れるようにしています。 音声ファイルを入力 周波数ごとに取り出して出力する 次に周波数ごとに波形を取り出して出力できるようにします。 CHOPのTrimノードを使って各周波数のサンプルごとにチャンネルを分けます。 今回はサンプル数を5に設定してチャンネルを5つを分けます。 それをMathノードに繋いでチャンネルを統合します。 lagノードに繋ぐと変化が緩やかになります（なくても大丈夫です）。 最後にnullノードに繋いで出力します（nullノードで出力するのが慣習らしいです）。 周波数ごとに取り出す 3Dオブジェクトを作成して波形を反映させる 5つのチャンネルをそれぞれ5つの3Dオブジェクトに対応させます。 CHOPのnullを5つのSOPのBoxノードに繋ぎます。 それぞれのBoxノードのsizeのy軸方向に「op(’null1’)[‘chan1’]」と入力してnullの出力をそれぞれのチャンネルに対応させます。 x軸方向とz軸方向のsizeは適当に決めます。 また位置も被らないようにそれぞれ適当にずらしておきます。 次にBoxノードをMaterialノードに繋いで色を設定します。 色はMATのConstantノードで設定できます。今回は白色に設定しています。 ...

はじめに 作曲にチャレンジしてみようと思ってオープンソースの音楽作成ソフトであるSonic Piを触ってみました。 作曲の知識はあまりないのですが、プログラミングで作曲できるということで興味があって始めてみようと思い立ちました。 インストール 下記リンクが公式サイトで、ここからインストールできます。 Sonic Piの公式サイト 環境 私はWindows 11 Homeで試しました。 Sonic Piの準備 Sonic Piを開くと画面の左上に下図のようにコードを書くエリアがあります。 ここにコードを書いて「run」ボタンを押すと曲が再生されます。 「rec」ボタンを押すと録音して音声ファイルとして曲を保存できます。 コードエリア また、画面下にチュートリアルを表示できるので、コードの書き方はそこで確認できます。 チュートリアル ちなみに、公式サイトにもチュートリアルページがあります。 Sonic Piのチュートリアルページ Sonic Piで音を出してみる それではさっそく音を出してみます。 playで単音が出せます。sleepを入れると指定した時間だけその音が出続けます。 たとえば下記のようにコードを書くとCの音（ド）が1秒間出ます。 音を出す 簡単に音を出すことができてとても嬉しいです。 Sonic Piで作曲してみる それではチュートリアルを参考にしながら簡単な曲を作成してみます。 下記のようにコードを書きました。 use_bpm 68.0 # BPM指定 # ドラム in_thread do # threadを分けて音を出す loop do sample :bd_haus # サンプル音源を指定 sleep 0.5 end end # ピアノ in_thread do sleep 4.0 # 4秒後に開始する use_synth :piano # ピアノを指定 4.times do # メロディのブロックを4回繰り返す # メロディのブロック：ここから 3.times do play 72 sleep 0.25 play 76 sleep 0.25 play 79 sleep 0.5 end play 79 sleep 0.125 play 76 sleep 0.125 play 72 sleep 0.25 play 76 sleep 0.25 play 72 sleep 0.25 # メロディのブロック：ここまで end # 最後の音 play 72 sleep 4.0 end 解説 基本的にはチュートリアルを読めば知りたいことはすべて知ることができますが、簡単に解説もしておきます。 ...

トラブル概要 Visual Studio Codeに拡張機能「GitHub Copilot」をインストールしたが、 GitHubのアカウントにサインインできずに使用できない。 GitHubにサインインしようとするとブラウザが開いてサインインの処理は行われるが、 Visual Studio Code上ではすぐにサインアウトの状態になってしまう。 その後も無限ループでずっとサインインできない。 Visual Studio CodeですでにGitHubにサインインしている状態だと、 GitHub Copilotのサインインで不具合が発生している可能性がありそうです。 環境 Windows 11 Home（WSL2） Visual Studio Code 1.103.0 解決方法 一度GitHubからサインアウトを行ってからサインインを行うと、 正常にGitHub Copilotを使用できました。 サインアウトはVisual Studio Codeの左下にあるアイコンマークをクリックして、自分のGitHubアカウント「username(GitHub)」を選択し、サインアウトをクリックします。 サインアウト 以上です。

はじめに 概要 Unityで作成したブラウザゲーム（Webアプリ）をレンタルサーバで動かす方法をまとめます。 開発環境 Windows 11 Unity 6（6000.0.39f1） Unityのインストール まずはUnityをインストールします。 下記の公式サイトからUnityやUnityプロジェクトを管理してくれるUnity Hubをインストールして、 アカウントを作成&ログインした後にUnity 6をインストールします。 Unity公式サイト Unityでブラウザゲーム（Webアプリ）を作成 Unityプロジェクトを作成して、ブラウザゲーム（Webアプリ）を作成してください。 Unityの使い方を説明しようとすると長くなってしまうので、ここでは割愛します。 Unityはユーザ数が非常に多くて検索すれば使い方の情報がたくさん出てきます。 ひとつ忘れがちなこととして、 UIを表示するためのCanvasでは下記の設定をしておくとよいです。 Render Mode: Screen Space - Camera UI Scale Mode: Scale With Screen Size UnityプロジェクトをGit管理 Git管理の話は必須ではないので必要ない方は飛ばしてOKです。 ただ、UnityプロジェクトもGitで管理しておくと便利です。 たとえばGitHubでリポジトリを作成する時は、 .gitignoreはUnityを選択します。 また、Windowsの場合はGitHub Desktopというアプリを使うとGit管理がやりやすいです。 .gitignoreに関してですが、 デフォルトのままだと30000個くらいのファイルがGit管理の対象になってしまうため、 個人的には下記を.gitignoreに追加するとよいかと思います。 Library Logs Packages ProjectSettings Temp UserSettings *TextMesh Pro* とりあえずAssetsフォルダをGit管理できるとよさそうです。 ブラウザゲーム（Webアプリ）をビルド 肝心のビルド方法です。 まずはEdit -> Project Settingsで下記の設定を行います。 PlayerのCompany NameとProduct Nameを記載 Publishing SettingsのCompression Formatを「Gzip」に変更 Compression FormatはBrotilのほうが優れているようですが、 私のレンタルサーバ環境ではうまく動きませんでした。 また、Decompression FallbackをONにすると、 サーバ環境をいじらずに圧縮関連のトラブルを回避できるという情報が散見されますが、 私の環境ではうまく動きませんでした。 ...

概要 Bashのechoコマンドで-nをオプションとして解釈せずに文字列としてそのまま出力する方法を試したので紹介します。 問題点 下記のようにコマンドを実行すると-nはオプションとして解釈されて、 結果としては何も出力されません。 $ echo "-n" # 何も出力されない Bashでは--をつけると「これ以降はオプションではない」ことを意味するらしいですが、 どうやらechoではこれは使えないようです。 $ echo -- "-n" -- -n 解決策 たとえば-nの前に半角スペースを入れて" -n"とすると文字列として解釈されます。 $ echo " -n" -n しかしこれだと当然のことながら半角スペースも一緒に出力されてしまうので、 同じ要領で\0-nにするとよさそうです。 \0はNULLのエスケープ文字です。 また、エスケープ文字を解釈するために-eをつけます。 $ echo -e "\0-n" -n 注意点として実行環境によっては\0の挙動が変わるかもしれません。 以上です。

問題内容 ノートPCでUbuntu 24.04 LTSが動作している状態で電源を抜いてバッテリー駆動にすると画面が暗くなる。 再び電源を接続しても画面は明るくならない。 解決方法 Ubuntu 24.04 LTSの電源モードの設定で、デフォルトでは「バランス」になっているが、「パフォーマンス」に変更する。 メモ 画面の明るさの設定をいろいろいじっていたが、単純に電源オプションの問題だった。

はじめに HTMLのvideoタグで貼った動画のサムネイルがSafariで表示されない問題を解決します。 Safariでサムネイルが表示されない問題 Chromeだと動画のサムネイルは表示されるのですが、Safariだと表示されませんでした。 サムネイルを表示するための設定方法 動画ファイルのパスを指定するときに、開始地点の秒数も指定するとSafariでもサムネイルが表示されるようになりました。 下記のようにt=0.1と指定すると開始時間を0.1に設定できます。 src="sample.mp4#t=0.1" おわりに HTML上で貼った動画のサムネイルをSafariでも表示できるようになりました。

はじめに WSL2上のUbuntuでVimを使用する際に矩形選択ができなかったので設定を変更しました。 環境 Windows 11 WSL2/Ubuntu 22.04 LTS 矩形選択ができない問題 VimではCtrl+Vで矩形選択できますが、WSL2だとCtrl+Vはデフォルトで「貼り付け」に割り当てられています。 そのため、設定の変更が必要です。 設定方法 WSL2の設定を開いて（Ctrl+,で開けます）、 下記画像のように「操作」のタブから「貼り付け」の設定を変更します。 デフォルトだと「Ctrl+V」に設定されているので、 「Ctrl+Shift+V」に変更します。 設定変更 おわりに Vimで矩形選択するための設定方法を紹介しました。

はじめに ページにお知らせ用の画像のスライドショーを設置したくて、HTMLとCSSを書いてみました。 サンプルのコードをメモとして残しておきます。 HTMLとCSSのサンプル HTMLとCSSのサンプルはこんな感じです。 実際のお知らせの表示はページの最下部にあります。 HTML スライドショーに配置する画像を設定します。 <div class="slide"> <img src="https://yusukekato.jp/images/news/SOJ_news_20240503_2.jpg"> <img src="https://yusukekato.jp/images/news/SOJ_news_20230503_2.jpg"> </div> CSS スライドショー全体を10秒に設定し、それぞれの画像は5秒ごとに切り替わります。 アニメーションは永久的に動き続けます。 @keyframesでアニメーションのタイミングと位置を設定しています。 .slide { position: relative; overflow: hidden; width: 480px; height: 270px; padding: 0.5rem 1.0rem; margin-top: 0.5rem; margin-bottom: 0.5rem; margin-left: auto; margin-right: auto; background: #fff; border: 1px solid #AAA; } .slide img { display: block; position: absolute; margin-left: auto; margin-right: auto; width: inherit; height: inherit; left: 100%; animation: slide-anime 10s linear infinite; } .slide img:nth-of-type(1) {animation-delay: 0s;} .slide img:nth-of-type(2) {animation-delay: 5s;} @keyframes slide-anime { 0% {left: 100%;} 4% {left: 3%;} 46% {left: 3%;} 50% {left: -100%;} 100% {left: -100%;} } おわりに JavaScriptを実装しなくてもアニメーションができるのはありがたいですね。 もっとオシャレに動かせるように頑張ります。 それでは、また。