水色（仮） – 私的メモと日常

2024年10月2日2024年10月2日

Website へ YouTube Video 埋め込み。レスポンシブ、幅100%、自動再生、ミュート、ループ再生、縦横比維持 / Embed YouTube Video, Responsive, 100% width, autoplay, mute, loop playback, keep aspect ratio, Aspect Ratio: 56.25

/*
 * YouTube Video 埋め込み
 * レスポンシブ、幅100%、自動再生、ミュート、ループ再生、縦横比維持
 * Embed YouTube Video
 * Responsive, 100% width, autoplay, mute, loop playback, maintain aspect ratio
 * Aspect Ratio: 56.25
 * 9 / 16 * 100 = 56.25%
 */
<style type="text/css">
.responsive-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.responsive-video > iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
</style>
<div class="responsive-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/XXXXXXXX?si=YYYYYYYY&mute=1&autoplay=1&loop=1&playlist=XXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>

* YouTube Video 埋め込み

* レスポンシブ、幅100%、自動再生、ミュート、ループ再生、縦横比維持

* Embed YouTube Video

* Responsive, 100% width, autoplay, mute, loop playback, maintain aspect ratio

* Aspect Ratio: 56.25

* 9 / 16 * 100 = 56.25%

.responsive-video {

position: relative;

width: 100%;

padding-top: 56.25%;

}

.responsive-video > iframe {

position: absolute;

top: 0;

right: 0;

width: 100% !important;

height: 100% !important;

}

</style>

久しぶりにやろうと思ったら、すっかり忘れていて困った。

2024年8月16日2024年8月16日

ウインドウズ10/11のフォトが動かないので直す

ウインドウズのフォトが動かん

これで何度目だ？メモを残そう…

ひとまず
マイクロソフトストアを開いて
検索 Photo で探して、更新してみる
が、
はい、駄目でした。

普通にアンインストールできなかったので
ここを参考に
– https://dollars.jp/photo/

Windows の検索窓に “PowerShell” と入力して管理者として実行
黒い画面が現れるので、下記を入力
大文字小文字は区別しない模様

Get-AppxPackage Microsoft.Windows.Photos | Remove-AppxPackage

マイクロソフトストアを開いて
検索 Photo で探して、インストール

2024年6月26日2024年6月26日

display: flex レイアウト内で br を有効にする方法 / How to enable br in a display: flex layout

/* 
display: flex
flex-direction: row / arrange child elements horizontally
br should be effective / br は効いて欲しい
*/
br {
    flex-shrink: 0; // not necessary
    width: 100vw;
    content: ""; // google-chrome
}

display: flex

flex-direction: row / arrange child elements horizontally

br should be effective / br は効いて欲しい

br {

flex-shrink: 0; // not necessary

width: 100vw;

content: ""; // google-chrome

}

現状これで上手く動作している…

2024年6月25日2024年7月2日

Welcart Shop で Kuroneko Web Collect Dialog を画面中央に表示する再び

jQuery UI Dialog で表示しているので、dialogfocus と observer を使って画面の中央に移動。できれば CSS のみで済ませたいです。

(function () {

    // Display the Kuroneko Web Collect Dialog in the center of the screen on Welcart Shop
    jQuery("body").bind("dialogfocus", function (e) {
        const resizeable = e.target;
        const observer = new MutationObserver(() => {
            const d = jQuery('#kuroneko_web-dialog');
            d.css({ left: 0 }); // 正しい幅を取得するために一旦左端に移動
            d.css({
                left: (jQuery(window).width() - d.outerWidth(true)) / 2 + "px",
                top: (jQuery(window).height() - d.height()) / 2 + jQuery(window).scrollTop() + "px"
            });
        });
        observer.observe(resizeable, {
            attriblutes: true,
            childList: true,
            subtree: true,
        });
    });

})();

(function () {

// Display the Kuroneko Web Collect Dialog in the center of the screen on Welcart Shop

jQuery("body").bind("dialogfocus", function (e) {

const resizeable = e.target;

const observer = new MutationObserver(() => {

const d = jQuery('#kuroneko_web-dialog');

d.css({ left: 0 }); // 正しい幅を取得するために一旦左端に移動

d.css({

left: (jQuery(window).width() - d.outerWidth(true)) / 2 + "px",

top: (jQuery(window).height() - d.height()) / 2 + jQuery(window).scrollTop() + "px"

});

observer.observe(resizeable, {

attriblutes: true,

childList: true,

subtree: true,

});

})();

#kuroneko_web-dialog
	border: 4px solid transparent
	background-color: transparent
	max-width: 100%
	.ui-dialog-titlebar
		padding: 6px 1% 5px 1%
		text-align: center
		height: auto !important
		background-color: #fff
		border-top: 1px solid #333
		border-left: 1px solid #333
		border-right: 1px solid #333
		border-top-left-radius: 4px
		border-top-right-radius: 4px
		background-color: aliceblue
	.ui-dialog-titlebar-close
		display: none
#kuroneko_web-token-dialog
	background-color: #fff
	border-left: 1px solid #333
	border-bottom: 1px solid #333
	border-right: 1px solid #333
	border-bottom-right-radius: 4px
	border-bottom-left-radius: 4px
.ui-widget-overlay
	background-color: #c6c6c6
.ui-dialog
	box-shadow: none

#kuroneko_web-dialog

border: 4px solid transparent

background-color: transparent

max-width: 100%

.ui-dialog-titlebar

padding: 6px 1% 5px 1%

text-align: center

height: auto !important

background-color: #fff

border-top: 1px solid #333

border-left: 1px solid #333

border-right: 1px solid #333

border-top-left-radius: 4px

border-top-right-radius: 4px

background-color: aliceblue

.ui-dialog-titlebar-close

display: none

#kuroneko_web-token-dialog

background-color: #fff

border-left: 1px solid #333

border-bottom: 1px solid #333

border-right: 1px solid #333

border-bottom-right-radius: 4px

border-bottom-left-radius: 4px

.ui-widget-overlay

background-color: #c6c6c6

.ui-dialog

box-shadow: none

さらに下記を適用することでモバイル端末でも見やすく表示：

見た目の良いレスポンシブなテーブルを作成 / Creating visually appealing responsive tables

2024年6月1日2024年6月1日

ローカル repository に Github のアカウントを設定する、複数のアカウント設定に対応した方法 / How to set up a Github account in a local repository, with multiple accounts

注意: 予め現在の状態を壊さないようバックアップをしてください。

グローバル設定を止めて、リポジトリー内のローカル設定ファイルに設定を行う

{YOUR-ACCOUNT-1} 用の鍵を生成

$ cd ~/.ssh
$ ssh-keygen -t ed25519 -C "{YOUR-EMAIL@example.com}" -f id_rsa_github-{YOUR-ACCOUNT-1}

1 2	$ cd ~/.ssh $ ssh-keygen -t ed25519 -C "{YOUR-EMAIL@example.com}" -f id_rsa_github-{YOUR-ACCOUNT-1}

github に公開鍵を登録

$ code id_rsa_github-{YOUR-ACCOUNT-1}.pub

1	$ code id_rsa_github-{YOUR-ACCOUNT-1}.pub

Settings > SSH and GPG keys > New SSH key

~/.ssh/config の設定

$ code config

1	$ code config

# {YOUR-ACCOUNT-1}@github.com の為 のSSH設定を追加
# $ ssh -T github.com_{YOUR-ACCOUNT-1}
Host github.com_{YOUR-ACCOUNT-1}
    HostName github.com
    # User {YOUR-ACCOUNT-1}
    User git
    IdentityFile ~/.ssh/id_rsa_github-{YOUR-ACCOUNT-1}

# {YOUR-ACCOUNT-1}@github.com の為のSSH設定を追加

# $ ssh -T github.com_{YOUR-ACCOUNT-1}

Host github.com_{YOUR-ACCOUNT-1}

HostName github.com

# User {YOUR-ACCOUNT-1}

User git

IdentityFile ~/.ssh/id_rsa_github-{YOUR-ACCOUNT-1}

接続試験

$ ssh -T github.com_{YOUR-ACCOUNT-1}
Hi {YOUR-ACCOUNT-1}! You've successfully authenticated, but GitHub does not provide shell access.

1 2	$ ssh -T github.com_{YOUR-ACCOUNT-1} Hi {YOUR-ACCOUNT-1}! You've successfully authenticated, but GitHub does not provide shell access.

github のリポジトリーをクローン

クローン先: ~/work/src

$ mkdir -p ~/work
$ cd ~/work/
$ git clone git@github.com:{YOUR-ACCOUNT-1}/{YOUR-REPOSITORY} ./src

$ mkdir -p ~/work

$ cd ~/work/

$ git clone git@github.com:{YOUR-ACCOUNT-1}/{YOUR-REPOSITORY} ./src

リモートアドレスを登録

~/.ssh/config の設定に基づいて登録

$ cd src
$ git remote set-url origin git@github.com_{YOUR-ACCOUNT-1}:{YOUR-ACCOUNT-1}/{YOUR-REPOSITORY}.git

1 2	$ cd src $ git remote set-url origin git@github.com_{YOUR-ACCOUNT-1}:{YOUR-ACCOUNT-1}/{YOUR-REPOSITORY}.git

ユーザー名とメールアドレスを設定

グローバル設定は使わないので削除するか名前を変えておく

$ trash ~/.gitconfig

1	$ trash ~/.gitconfig

--local で設定する

$ git config --local user.email "{YOUR-EMAIL@example.com}"
$ git config --local user.name "{YOUR NAME}"

1 2	$ git config --local user.email "{YOUR-EMAIL@example.com}" $ git config --local user.name "{YOUR NAME}"

設定結果は下記のようになる

$ cat .git/config
[core]
repositoryformatversion = 0
filemode = true
bare = false
logallrefupdates = true
[remote "origin"]
url = git@github.com_{YOUR-ACCOUNT-1}:{YOUR-ACCOUNT-1}/{YOUR-REPOSITORY}.git
fetch = +refs/heads/*:refs/remotes/origin/*
[branch "main"]
remote = origin
merge = refs/heads/main
[user]
email = {YOUR-EMAIL@example.com}
name = {YOUR NAME}

$ cat .git/config

[core]

repositoryformatversion = 0

filemode = true

bare = false

logallrefupdates = true

[remote "origin"]

url = git@github.com_{YOUR-ACCOUNT-1}:{YOUR-ACCOUNT-1}/{YOUR-REPOSITORY}.git

fetch = +refs/heads/*:refs/remotes/origin/*

[branch "main"]

remote = origin

merge = refs/heads/main

[user]

email = {YOUR-EMAIL@example.com}

name = {YOUR NAME}

See:

https://qiita.com/mogumogusityau/items/4ad9445cfca82ec09a02
https://qiita.com/manzoku_bukuro/items/c6fc9cbc069fe4a1b776

—