【Windows】ノートPCのディスプレイの色合いなどを変更する方法

　3か月ぐらい前にDellのノートPCを購入して使っているのですが、購入当初から「なんかディスプレイの色合いがおかしい」と感じていました。

　具体的には全体的に黄色っぽいというか常にブルーライトカットされたような画面になっており、今までのディスプレイとは全く違う色合いでした。

　そういうものだと納得して使っていましたがずっと気になっていたので変更する方法がないかと調べたところ、ディスプレイの色合いを自分で設定できることがわかったのでその備忘録になります。

　基本的には参考資料に挙げているページ様の通りなので、より詳しい説明はそちらを参照してください。

　では、始めます。

１：「ディスプレイの調整」を開く
　最初にコントロールパネルを開きます。

　コントロールパネルを開いたら右上にある表示方法を「大きいアイコン」に変更して「色の管理」をクリックします。

　色の管理を開いたら「詳細設定」タブを開き、「ディスプレイの調整」ボタンをクリックします。

　これで「ディスプレイの調整」画面を開くことができます。

２：色合いを調整する
　ディスプレイの調整画面を開いたら「次へ」をクリックします。

　画面が切り替わるので「次へ」をクリックします。

　次の画面でも「次へ」をクリックします。

　ガンマの調整画面になりますが、今回はガンマの調整はしないのでそのままで「次へ」をクリックします。

　明るさとコントラストは今回変更しないので、「明るさおよびコントラストの調整をスキップする」をクリックします。

　カラーバランスの調整方法の画面になるので「次へ」をクリックします。

　以下の画面でRGBそれぞれのバーを任意に調節してディスプレイの色合いを変更します。

　自分の場合は「すべてのバーを一番左の0にしてから十字キーの＞を以下の回数分押下」して調節しました。

• 赤：27
• 緑：25
• 青：35

　個体差もあると思いますし自分のディスプレイでも完璧という訳ではないですが、おおよそ「青＞赤＞緑」の順番になるぐらいで調節すると良いかと思います。

　調節ができたら「次へ」をクリックします。

　以下の画面で「前の調整」ボタンと「現在の調整」ボタンをそれぞれ押下することで色合いの変更具合を確認することができます。

　今回はテキストについては確認しないので「テキストが正しく表示されるよう～」のチェックは外して「完了」ボタンをクリックします。

　これでディスプレイの色合い調整は完了です。

　以上がノートPCのディスプレイの色合いなどを変更する方法になります。

　明らかに色が変だという事象に初めて遭遇した上にノートPCということでどうやって調節するのかわかりませんでしたが、何もしてないときよりはかなり自然な色に近づきました。

　そもそもディスプレイの色味がおかしくなければこんなことせずに済んだというのはありますが、同じような症状で悩んでいる方の参考になれば幸いです。

・参考資料

• 【Windows】ノートPC画面の色合い・明るさを調整する方法 | アトテク

【python】pythonを使ってランダムな文字列を作成する

　令和という時代になっても、時折「添付のzipファイルにパスワードをかけて送れ」という古の儀式が発生します。

　その度にいい感じのパスワードを考えたりするのが面倒だったので、面倒なことはpythonにやらせろという諺に従って適当に調べて書いてみた備忘録になります。

　では、始めます。

・ランダムな文字列を作成するソースコード
　結論から言うと以下のソースコードでできます。

・createRandomString.py

#
# ランダムな文字列を作成する
#
import sys
import random
import string


# 引数の桁数だけランダムな文字列を作成する関数
def create_random_string(n):
    # string.ascii_letters:アルファベット(小文字・大文字含む)
    # string.digits:数字
    # string.punctuation:ASCII 文字の記号
    return ''.join(random.choices(string.ascii_letters + string.digits + string.punctuation, k=n))


if __name__ == "__main__":
    args = sys.argv

    if len(args) == 2 and str(args[1]).isdigit():
        print(create_random_string(int(args[1])))
    else:
        print("引数に桁数の数字を設定して実行してください。")

　使い方としては、上記ファイル実行時に引数に桁数の数字を入力した状態で実行すると、その桁数のランダムな文字列を返してくれます。

　以上がpythonを使ってランダムな文字列を作成するソースコードになります。

　確率的にアルファベットだけになったり、同じ記号や文字が繰り返し出現したりなどはありますが、その場合は一文字ずつチェックするような処理を入れたりすると良いかと思います。
　またそれぐらいであればわざわざチェック処理を入れなくても良さげな文字列が出るまで繰り返し実行する方が楽そうです。

　そもそも古の儀式自体がもう…というのはありますが…。

・参考資料

• Pythonを使ってランダムな文字列を生成 - Qiita
• Pythonで文字の種類別に文字列を作成・取得 | novonovo
• Pythonで文字列が数字か英字か英数字か判定・確認 | note.nkmk.me

【Bitbucket】Bitbucketで静的ページを公開する方法

　htmlとjavascriptとcssだけでちょっとした静的ページを作ってそれを公開したい場合があるかと思います。そのためにわざわざサーバを契約したりするのは面倒なので何か簡単に公開する方法はないかと調べていたら、BitbucketというGitのクラウドサービスのとある機能を使えばGitのリモートリポジトリにpushするだけで公開したり、更新したりできることがわかりました。

　なので今回はタイトルにある通り「Bitbucketで静的ページを公開する方法」になります。

　では、始めます。

０：注意点
　今回のBitbucketでの静的ページの公開は「公開範囲を一切設定できない」ため、プライベートにしたり特定のアカウントのみに公開ということができません。常に誰でも公開ページにアクセスできる状態になります。またプロジェクトやワークスペース、リモートリポジトリをプライベートに設定しても公開ページを右クリックしてソースを見ることなどは普通にできるので、公にしたくないようなものはこの方法を取らないようにしてください。

１：Bitbucketのアカウントを作成する
　まず最初にBitbucketのアカウントを作成する必要があります。ちなみにBitbucketは少人数であれば無料で使うことができます。

　以下の公式ページにアクセスしてアカウントを作成します。

• チーム向け Atlassian Bitbucket Git コード管理ツール | Atlassian

　ページ中央にある「無料で入手する」をクリックします。

　すると以下のような画面が表示されるので、すでにあるGoogleなどのアカウントをそのまま紐づけるか、メールアドレスなどから新規で作成します。

　あとは画面の指示に従っていけば認証メールが届くので、そのメールの指示通りにしてログインできればアカウントが作成できています。

　詳しくは参考資料にも挙げている以下のページ様を参照してください。

• Bitbucketのアカウント登録～リポジトリ作成 – オフィス エッグファースト

２：Bitbucketに公開用のワークスペースを作成する
　アカウントが作成できたので、実際に静的ページを公開する準備をしていきます。静的ページを公開するにはまずは公開用のワークスペースを作成する必要があります。

　Bitbucketにログインすると以下のような画面になっていると思います。

　画面の左下の丸いアイコンをクリックして「All workspace」をクリックします。

　ワークスペースの一覧画面が表示されるので右上にある「Create workspace」をクリックします。

　ワークスペースの作成画面になるので、ワークスペース名を入力して「Create」ボタンをクリックします(※ワークスペース名は公開時のURLに含まれる文字列になるため注意して命名してください)。

　ちなみにすでに使われているワークスペース名だと以下のようにエラーとなるので、頑張って使われていないワークスペース名を探して入力してください。

　正常にワークスペースが作成できると、以下のように空のワークスペースが作成されます。

　空のワークスペースが作成できたら、次はプロジェクトを作成します。

３：プロジェクトを作成する
　空のワークスペースの画面左側にあるメニューから「プロジェクト」を選択してプロジェクト画面を表示し「プロジェクト作成」をクリックします。

　各種項目を入力して「プロジェクト作成」をクリックします。

　先ほどのワークスペースにプロジェクトが作成されます。

４：リモートリポジトリを作成する
　公開するソースをpushするためのリモートリポジトリを作成していきます。

「リポジトリの作成」をクリックします。

　各種情報を入力して「リポジトリの作成」をクリックします。この時のリポジトリ名には必ず「{ワークスペース名}.bitbucket.io」に設定してください。またこの時のリポジトリ名が公開時のURLになるので注意して命名してください。

　リポジトリが作成できると以下のような画面になります。

　このままでは.gitignoreとREADME.mdしかない中身のないリポジトリなので、ここに公開するソースを追加でpushします。

５：リモートリポジトリに公開するソースコードをpushする
　ここまでで公開する手順は終わっているのであとは普通に静的ページのソースコードをリモートブランチにpushするだけです。

　リポジトリ画面の右上にある「クローンの作成」をクリックします。

　gitのクローンコマンドが表示されるのでコピーしてローカルで実行し、クローンします。ちなみに右上のプルダウンからHTTPSでのクローンもできます。

　クローンできたら公開用ページとして「index.html」を新規に作成します。今回はテストなので以下のようにただ「web-test-hello」という文字列を表示させるだけにしています。

・index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Cache-Control" content="no-cache">
  <title>web-test-hello</title>
</head>
<body>
web-test-hello
</body>
</html>

　あとは普通のGitリポジトリを扱うのと同じようにリモートリポジトリにpushします。

　ちゃんとリモートリポジトリにpushできていることを確認します。

　これでindex.htmlが公開されている状態になりました。

６：実際に公開できているかを確認する
　４で公開URLが「{ワークスペース名}.bitbucket.io」になっていると記述しました。なのでそのURLにアクセスして確認してみます。

　今回ワークスペース名は「web-test-hello」としているのでURLは以下のようになります。

• https://web-test-hello.bitbucket.io

　実際にこのURLにアクセスしてみると、以下のようにindex.htmlの内容が表示されていることが確認できます。

　以上がBitbucketで静的ページを公開する方法です。

　若干手順が多いですが、基本的に一度設定してしまえばあとはGitのリモートリポジトリにpushするだけで更新ができるのでかなり楽だと思います。ちょっとしたhtmlとjavascriptで作ったようなページであればこの方法で公開するのが一番手っ取り早くてメンテもしやすいのかな、など思ったりもします。

　ただ冒頭にも書きましたが、この静的ページは基本的にフルオープンになるのでそこは注意して使うようにしてください。

　また似たような機能がGithubにもあるようですが、そっちは試してないのでいつか試してみたいですね。

おまけ
　かなり前に作ったものをこのBitbucketの静的ページとして公開しました。ソースコードも見直して書き直したりしてるので遊ぶ人は遊んでみてください。

• おなかに◯◯がいますジェネレーター

・参考資料

• Bitbucketのアカウント登録～リポジトリ作成 – オフィス エッグファースト
• Bitbucketで静的ウェブサイトを公開する - Qiita
• bitbucket で、github pages のように静的ページを公開してみる | かきノート

【python】png形式の画像をBase64に変換する

　ブラウザで画像を扱う場合、直接ローカル画像ファイルを扱おうとするとブラウザ側のセキュリティで色々怒られることが多いです。

　その場合元画像よりデータ量は多くなりますが、Base64という文字列データとして扱えばとりあえずはこの問題は解決できます。

　なので、今回はタイトルにある通りpythonでpng形式の画像をBase64に変換する方法の記事になります。

　では、始めます。

１：pythonでpng形式の画像をBase64に変換する
　以下の方法で変換できます。

import base64

file_data = open("/path/image.png", "rb").read()
b64_data = base64.b64encode(file_data).decode('utf-8')

　少し解説すると「open("/path/image.png", "rb").read()」の部分でパスで指定したファイルの中身を読んでいます。
　その結果を「base64.b64encode(open(file_data).decode('utf-8')」でBase64のUTF-8形式に変換しています。

２：サンプル
　変換方法がわかったので実際にサンプルを動かしてみます。

・pngToBase64.py

# -*- coding:utf-8 -*-
import glob
import base64
import os

IMG_FOLDER_PATH = "./img/*"
SAVE_FILE_PATH  = "./img_b64.js"

# メイン関数
def main():
    # ソートしたファイルリストを取得
    images = sorted(glob.glob(IMG_FOLDER_PATH))

    f = open(SAVE_FILE_PATH, 'w')

    for fpath in images:
        # 拡張子なしのファイル名を取得
        filename = os.path.splitext(os.path.basename(fpath))[0]
        print(filename)
        
        # ファイルにbase64の内容を書き込む
        f.write("const " + filename + "_B64 = \"data:image/png;base64,")
        file_data = open(fpath, "rb").read()
        b64_data = base64.b64encode(file_data).decode('utf-8')
        f.write(b64_data)
        f.write("\";\n")

    f.close()
    print("--- end ---")


if __name__ == '__main__':
    main()

　上記の内容をコピペして「pngToBase64.py」として保存をし、同じ階層に「img」フォルダを作成してその中に変換したいpng画像を入れてください。ちなみにimgフォルダ内に複数画像入れても大丈夫です。

　その状態でpngToBase64.pyを実行すると「img_b64.js」というjsファイルが作成され、その中にconstの定数としてbase64の画像文字列が書き込まれています。

　以上がpythonでpng形式の画像をBase64に変換する方法になります。

　正直サーバを立ててAPIを使って画像を取得するというのが最も良い方法だとは思いますが、サーバを立てるのが面倒だったりどうしてもブラウザ上の機能だけで完結させたいという場合には割と有な方法だとは思います。そもそもWebに詳しくないのでこの辺りの方法論がわかってないですが…。

　今回の記事で作成したものを一応公開しておきます。

• imageToBase64_python.zip - Google ドライブ

・参考資料

• 【Python】画像ファイルをbase64エンコードしてimg要素で表示する - Qiita
• Pythonでパス文字列からファイル名・フォルダ名・拡張子を取得、結合 | note.nkmk.me

【Windows】PCがWindows11に対応しているかをチェックする

　先日Windows11が発表されました。

• 新しい Windows 11 OS へのアップグレード | Microsoft

　Windows10が最後のWindowsだと言っていた気がするのですが、これからは次のWindows11に移行していくことになります。

　今回は今使っているPCがWindows11に移行しても大丈夫かのチェックをするアプリの導入と実際に動かしてみたときの備忘録になります。

　では、始めます。

１：チェックアプリのダウンロードとインストール
　MicrosoftからWindows11に対応しているかどうかのチェックアプリが公開されているので、まずはそれをインストールします。

　以下のURLを開きます。

• 新しい Windows 11 OS へのアップグレード | Microsoft (チェックアプリ)

　開いてしばらく待つと画面上部に以下のような表示が出てくるので「アプリをダウンロード」をクリックしてインストーラをダウンロードします。

　ダウンロードしたインストーラをダブルクリックして起動させます。

　インストーラが立ち上がるので「使用許諾契約書に同意します」にチェックを入れて「インストール」ボタンをクリックします。

　しばらく待つとインストールが完了するので「完了」ボタンをクリックします。すぐ起動させたい場合やデスクトップにショートカットを作成したい場合は各自でチェックを入れてください。

　これでインストールは完了です。

２：アプリでWindows11に対応しているかチェックする
　では実際にWindows11が使えるかどうかをチェックしていきます。

　インストールしたアプリを起動させると以下のような画面が表示されるので「今すぐチェック」をクリックします。

　するとチェック結果が以下のように表示されます。自分のPCはWindows11に対応しているみたいでした。

　以上がPCがWindows11に対応しているかをチェックする方法です。

　Windows11が気になっている人はすでにやっているかと思いますが、ぱっとチェックアプリのURLが見つからなかったので記事にした次第です。

・参考資料

• 新しい Windows 11 OS へのアップグレード | Microsoft
• 新しい Windows 11 OS へのアップグレード | Microsoft (チェックアプリ)

【Windows】DellのノートPCのFキーを通常のF1～F12キーとして設定する方法

　2年ほど前に購入したノートPCがWindows Updateに失敗したりブルースクリーンが時々出るようになったので、最近DellのノートPCに買い換えました。

　ノートPCなのでキーの配置的にデフォルトのFキーには音量調節機能などが割り振られており、通常のFキーとして使うには「fn」キーを押した状態で各Fキーを押す必要があります。

　デフォルトのFキーとして使いたい時の方が多いので、今回は通常のFキーをデフォルトにするように設定する方法の備忘録になります。

　では、始めます。

・Fキーを通常のF1～F12キーとして設定する
　設定方法は簡単です。以下の方法でできます。

• 「fn」キーと「esc」キーを同時押し

　これでfnキーのロックがかかり、デフォルトでfnキーが押された状態になります。F1～F12キーを単独で押してもfnキーが押された状態なので、通常のFキーの動作になるというわけです。

　以上がDellのノートPCのFキーを通常のF1～F12キーとして設定する方法です。
　これはfnキーのロック機能があるPC限定の機能なのですが、多くのノートPCにはこの機能がついているようなので多くはこのパターンで設定できるはずです。

　簡単ですが、ほとんど使わない機能で忘れてしまうと思ったので一応記事として残しておいた次第です。

　そもそもデフォルトで通常のFキーにしておいてほしいですね…。

・参考資料

• DellノートPCのF1～F12の設定を変更して通常のFキーとして使う方法 | Tanweb.net
• ファンクションキーを切り替えて機能を反転させる方法【Lenovo 】【Windows 10】 | カラバリ

【VSCode】Visual Studio CodeでDraw.ioを使う

　システムをチームで開発していく時、情報を整理するためにクラス図などを作成する場合があるかと思います。

　今回はそのクラス図など図形を作成するのに便利なDraw.ioがVisual Studio Codeの拡張機能として使えることがわかったので、その導入方法の備忘録になります。

　では、始めます。

１：そもそもDraw.ioとは
　Draw.ioとは、ログインなどすることなくブラウザ上でクラス図などの図形を作成できるサービスのことです。

　現在は「diagrams.net」という名前に変わっていますが中身は同じで、以下のページにアクセスして「start」をクリックすると、ブラウザ上で図形を作成、編集できます。

• Diagram Software and Flowchart Maker

　作成した図形をpng画像としてローカルに保存できますし、xmlファイルとしてダウンロードしておくと再度そのxmlファイルをアップロードすると前の状態から編集を続けることもできます。

　このように便利なDraw.ioがVisual Studio Codeの拡張機能として使えるようになっています。

２：Visual Studio CodeにDraw.ioをインストールする
　では実際に拡張機能としてDraw.ioをVisual Studio Codeにインストールしていきます。

　Visual Studio Codeを開き、拡張機能のアイコンをクリックしてマーケットプレイスを開き、検索欄に「draw.io」と入力して出てきた「Draw.io Integration」の「インストール」ボタンをクリックします。

　クリックしてインストールが終わると以下のような画面が開きます。「無効にする」と「アンインストール」のボタン表示になっていればインストール完了です。

　インストールが終わったら、念のためVisual Studio Codeを再起動させます。

　これでVisual Studio CodeでDraw.ioが使えるようになりました。

３：Visual Studio CodeでDraw.ioを使ってみる
　では実際にDraw.ioを使ってみます。

　Visual Studio Codeを開いたら、メニューの「ファイル」→「新規ファイル」を選択して新規ファイルを作成します。

　以下のように空のファイルが作成されるので、このファイルを開いた状態で「Ctrl + S」キーでファイルを保存します。

　保存ファイル名は拡張子の種類を「拡張子なし」に、ファイルの拡張子を「.drawio」にして保存します。

　拡張子「.drawio」のファイルが読み込まれると、以下のように図形のエディタ画面が表示されます。

　あとはエディタを使って図形を書いていくことができます。

　png画像などに書き出したい場合は、図形エディタ画面にある「ファイル」→「Export」を選択します。

　すると上部に保存ファイル形式のプルダウンが出てくるので、保存したい形式を選択してクリックします。ここではpngにしました。

　実際に書き出したpng画像は以下になります。白黒が反転しているのは、Visual Studio Codeをダークモードで使っているからだと思います。

　これで大体の使い方がわかったと思います。

４：.drawioファイルの中身と編集
　拡張子.drawioファイルの中身を見てみると、xmlファイルになっていることがわかります。

　つまりテキストデータに従って図形が描写されているため、直接ファイルの中身を書き換えたりgitなどで管理がしやすい形式になっています。

　図形エディタで編集していくのも良いですが、xmlファイルを直接いじった方が速い場合もあるのでVisual Studio Codeで図形エディタとxmlの両方同時に編集する手順も説明しておきます。

　まずは普通に.drawioファイルを開きます。

　開いたらVisual Studio Code画面の右上にある「エディターを右に分割」ボタンをクリックします。

　左右で同じファイルが開きます。

　どちらか一方のファイル名タグ部分を右クリックして「エディターを再度開くアプリケーションの選択」をクリックします。

　Text Editorで開くかDraw.ioで開くか選択できるので、「Text Editor」の方を選択します。

　すると以下のように片方だけxmlファイルで表示されます。

　ちなみに両方とも同じファイルを編集しているので、片方を修正するとリアルタイムでもう片方も修正されます。

　なのでどちらでも好きな方法で同時に修正することができます。

　以上がVisual Studio CodeでDraw.ioを使う方法になります。

　Draw.io自体は時々使っていたのですが、Visual Studio Codeの拡張機能として使えるようになったのでオフラインでも図形を編集できるので便利です。
　ただまだWeb上で使えるものと完全互換というわけではないようですので、不満がある場合はWeb上の「diagrams.net」を使用するのが良いかと思います。

・参考資料

• VSCodeでDraw.ioが使えるようになったらしい！ - Qiita
• Draw.io Integration - Visual Studio Marketplace