
簡単にローカルで Web サーバーを立てる3つの方法(Node/Python/VSCode)
Web 開発をしている際に html ファイルや JavaScript をローカル環境の Web サーバとして公開しブラウザから確認してみたいと思ったことはあると思います。 Apache や nginx をインストールしてもよいのですが、簡 ...

Redshift の Table および View の所有者(owner)の確認方法と変更方法
Redshift のテーブルやビューの所有者を調べる方法がわからないRedshift のテーブルやビューの所有者を変更する方法がわからない この記事では AWS Redshift のカタログテーブルを用いたテーブルやビューの所有者の確認方法 ...

Windows Terminal やコマンドプロンプトのカーソル点滅を止める方法
Windows Terminalやコマンドプロンプト、Powershellなどのターミナル操作をしている際に、カーソル(ポインタ)をカスタマイズする際に、形状については以下のような選択肢があり簡単にカスタマイズすることができます。 アンダー ...

create-react-appへのTailwind CSSの設定方法と簡単な拡張方法
とりあえずReactにTailwind CSSを導入したいcyan、greenなどの色の追加方法がわからない CSSフレームワークといえば、BootstrapやMATERIAL-UIなどが有名ですが、誰が作っても同じようなデザインになること ...

ReactからGoogleapis の Youtube Data APIを呼び出す方法 ~Search APIを呼び出して動画の検索ページと再生ページを作成する~
React から外部のAPIを呼び出すサンプルを作成してみました。 外部APIの題材としてYoutubeのData APIのSearchを利用し、動画の検索ページと再生ページも作成していきます。 システム構成 今回はAPI部分を中心に説明し ...

「grub >」が表示されて起動しない時の簡単な修復方法
WindowsとLinuxのデュアルブート環境で突然「grub >」が表示され起動しなくなったUSBメモリにLinuxをインストールすると本体側のLinuxで「grub >」が表示され起動しなくなった デュアルブート環境を構築したり、USB ...

Google ドライブ のデフォルトの同期フォルダ名「Google ドライブ」を変更する方法
Googleドライブを初期設定でインストールしたら「c:\Users\Google ドライブ」になってしまった2つ目のアカウントを追加すると「Google ドライブ (xxxxx@gmail.com)」というメールアドレスのフォルダ名にって ...

Linux Mint MATE 20.1 の xkeysnal で Windows の AutoHotKey と同じ設定をする
Linux Mint を利用しているときに、Windows で利用している AutoHotKey で行っていたように、カーソルキー移動や Backspace キーをホームポジションを崩さすに操作したくなってきました。 Linux で Aut ...

VSCode の 拡張機能(Markdown Preview Enhanced)で目次の自動生成と CSS で見た目をカスタマイズする
Markdown ファイルへの目次の自動生成やプレビュー時のデザインを CSS で整えるために Visual Studio Code の「Markdown Preview Enhanced」拡張機能を利用してみました。 Markdown P ...

Linux Mint MATE 20.1 でサーバ構築 #3 Docker/kubernetes(kubeadm)
今回は、Linux Mint MATE 20.1 に Docker と Kubernetes クラスタを構築する手順をまとめました。 最初に構築しようとした際に ...

Linux Mint MATE 20.1 でサーバ構築 #2 ssh/xrdp リモートデスクトップ
今回は、Windows10 から Linux Mint MATE 20.1 への ssh での接続やデスクトップを操作するために xrdp を利用して Windows のリモートデスクトップ機能で接続できるようにします。 Linux Min ...

Linux Mint MATE 20.1 でサーバ構築 #1 インストール/サスペンド防止
手元にある 古いノートパソコン(Lenovo ideapad 120S)があるのですが、 Windows10 で利用するにはスペック的に厳しいので、動作の軽いLinux Mint MATE 20.1 をインストールしてみようと考えたのですが ...

Windows10 のキーボードをAutoHotKeyでカスタマイズ ~ カーソルキーを 無変換キー+HJKL(Vim風) で操作する 他 ~
ホームポジションを崩さずにタイピングしたい 長年、Windows でキーボードのカスタマイズは CapsLock キーを Ctrl キーに置き換えるのみでした。 しかし、カーソルキーを操作するとホームポジションが崩れることがストレスに感じる ...

Windows10 の GitBash で docker/telnet/python/mysql が実行できない場合は winpty で実行 (the input device is not a TTY. If you are using mintty, try prefixing the command with ‘winpty’)
GitBash で実行するとエラーになったり無反応だったりする Windwos で bash を利用している際に、GitBash が便利で利用してるのですが、うまく動作しないことがあります。 例えば、docker、telnet、python ...

Windows Terminal のインストールとおすすめカスタマイズ方法
Windows Terminal とは Windows Terminal は Microsoft から 2020 年にリリースされた新しいターミナルソフトです。 Windows は標準でコマンドプロンプト、Powershell、WSL など ...

WSL2からVSCodeが起動しない場合の対処方法 (Command ‘code’ not found, but can be installed with: sudo snap install code)
WSL2のターミナル(Ubuntuなど)からVSCode (Visual Studio Code)を起動しようとすると、エラーとなる場合があります。 原因と対処方法についてまとめました。 WSL2でcodeコマンドを実行すると発生するエ ...

gitコマンド checkoutとswitchの違い ~これからはswitchを使おう~
git switchコマンドとは git switchコマンドはブランチの切り替えを専用に行うコマンドでバージョン2.23でリリースされました。 git switchコマンドがリリースされるまではgit のブランチの切り替えにはchecko ...

javascriptのwindow.matchMediaでreactのカスタムフック(useMediaQuery)を作成してレスポンシブ対応
Webページをレスポンシブ対応する場合に、cssの@media クエリを利用する以外にjavascriptのwindows.matchMedia()を利用する方法があります。 javascriptのwindow.matchMedia()の使 ...

reactのデザインをmaterial-ui + styled components (CSS in JS)を組み合わせて利用する
react のデザインで styled components (CSS in JS)で行う場合、「全てのスタイルを1から作成するのは嫌だ」というときに、material-uiと組み合わせて利用することで省エネでデザインすることができます。 ...

Windows 10 Home(WSL2)にUbuntu(18.04 | 20.04)をインストールする手順まとめ
Windows 10 Home上のWSL2でUbuntu(18.04 | 20.04)をインストールする手順についてまとめました。 Windows 10 HomeにWSL2を設定する Ubuntu18.04をインストールする前に、WSL2を ...