2023-10-22

映画館でテイラー・スウィフト THE ERAS TOURを観てきたよ

日記

映画館でテイラー・スウィフト THE ERAS TOURを観てきたので、良かった曲のメモ。しっかりした感想はここにはない。

towapictures.co.jp

自分はテイラー・スウィフトのファンではなくて、好きな雰囲気の曲をつまみ食いしているだけだけど、知らない曲も演出が良くて楽しかった。上映日が限られているうえに上映時間が三時間のため、映画館によっては夜遅くに終わるのでそこはちょっとしんどいな〜と思った。

Tolerate It

テーブルを使った演出本当に良かった… 映画館で見てほしい。

... Ready for it?

場面転換して始まる、蛇モチーフの衣装とCGが良かった。 youtu.be

Look What You Made Me Do

ダンサーとコーラスの人たちもかわいい〜〜 youtu.be

Blank Space

光るゴルフクラブ可愛かった〜〜。最初、ライトセーバーを出したのかと思った。

youtu.be

Bad Blood

ダンサーたちが横に並んでまっすぐに歩いてくるところウワーーーッカッコイイ〜となった。MVも好き。

youtu.be

Lavende haze

これを観るために行った。 youtu.be

Karma

最後に来ると思っていなくてびっくりしたし、好きな曲なのですごく良かった・・・・アクロバット！(語彙力がない)

youtu.be

2023-05-28

無印の店舗受け取りを利用して、テーブルと椅子を買った

日記

これまでずっと畳の部屋で低いテーブルで仕事をするか、畳にPC直置きで仕事をしていたところ、最近肩こりと顎関節症がひどくなってしまったのでついにテーブルと椅子を買うことに。

注文したテーブルと椅子は、次の2点。

近場の店舗で実物は確認せず、以下の基準でちょうどいいものを探しました。

幅120センチくらいのテーブル(=これまで使っていたテーブルより広くキーボードとトラックボールとトラックパッドを置いても余裕がある)
テーブルは足が折り畳める
同じ店で購入できる椅子で、テーブルに合うであろう高さの椅子

IKEAと無印が候補に挙がったものの、IKEAはテーブルは足を折り畳めないものしかなく、かつ自分の家が配達範囲になく家族の家に送ることになるため諦めました。気合で仙台まで行くこともできるが、一泊しないと帰りがきついということで、無印でテーブルと椅子を購入しました。

無印オンライストアを利用した購入から店舗受け取りまでのステップはおおよそ以下のとおり。

商品ページの「受取手段」にある「受け取り可能店舗を見る」から受取可能な店舗を確認
カートに商品を入れる
受け取り方法を店舗受け取りにして、商品を受け取りたい店舗を指定
支払い方法の指定
注文完了
受取店舗に商品が到着した旨のメールが届く
受け取り店舗へ行き、注文者の名前と注文番号を伝える
商品の受け渡し

火曜日にオンライストアで注文、その週の金曜日には店舗に到着したので、日曜日に家族と二人で取りに行ってきました。

店舗ではお申し付けカウンターで店員さんに店舗受け取りであることを伝え、名前と注文番号から注文票(伝票？)を確認してもらい、倉庫から台車で商品を持ってきてもらいました。持ってきてもらったまでは良かった。想定以上に商品の箱が大きく、家族と二人で「やべえぞこれは・・・車に載らないかもしれない」と話しながら、駐車場まで台車で商品を運ぶ。

家族の車はトヨタのヤリスで、途中から自分の車であるピクシスエポック(ダイハツのミライースのOEM)に載せ替えて運ぶつもりで来ていたので、ヤリスに載らなかったらおしまい・・・・。

赤帽さんを召喚するか、家族が運転できる別の家族の車を持ってくるか話しながら、ヤリスの後部座席を倒したらテーブルがギリギリ載ったのでセーフ。テーブルの上に椅子を載せてヤリスへの積み込みは完了。台車をお店に返却して、自分の車へ。

次は、少し先に停めた自分のピクシスエポックに載せ替え。助手席を一番前に出したら、テーブルがなんとか入ったので椅子をその上に置いて載せ替えて完了。ピクシスエポックの運転席に座って、後ろをみたときに後ろの窓から後ろの景色がちゃんと見えたので、積み込んだ荷物の高さもオッケー。(後ろの窓が見えづらくなったら椅子は家族に預ける予定だった)

ピクシスエポックに載せ替えが終わったところ。写真:ピクシスエポックの中、運転席と助手席の間から積み込んだテーブルと椅子の箱が見える。写真:ピクシスエポックの後ろの窓から積み込んだ椅子の箱が見える。

自分の家に着いて荷下ろし。家族2人でなんとかテーブルと椅子を玄関まで運ぶ。引き取りに行ったときにいた家族は男性で、ひとりで椅子とテーブルを持ち上げていたものの今度は女2人でやっとだったので、女性1人で今回買った椅子とテーブルを運搬もしくはセットするのはおすすめしません。

あと、玄関の空間の7割が平置きしたテーブルで埋まったので狭い玄関の場合は壁に立て掛けるか、広い部屋に置くと良いと思います。

開封と椅子の組み立て、部屋へのセットは1人でやりましたが、これも女性1人でやるのはおすすめしません。たしかテーブルは1人で作業するなって書いてあったと思う…。

部屋に机と椅子を置いたところ。写真:部屋の広縁に置かれたテーブル。テーブルの下には半分に折りたたまれた水色のカーペットがある。写真:部屋の広縁に置かれたテーブルと椅子。机の上にはモニターやPC、本などが置かれている。

机の上に何を置くかや、コードの配線はまだ決まっていないのでこれから整えられたら良いな。

2023-02-26

フィットボクシング2をはじめた

日記

全体的な感想

最初はリズムがとれなくて「ああ〜だめかも…」と思っていたが、二回、三回とやっていくうちにリズムが取れて少しずつ出来るようになったので、一回やってダメだと思わずに続けるのが良さそう。

リングフィットも持っているが、

ストーリーがあって、クリアしないとという義務感とサボったことへの罪悪感
色々な運動が組み合わさっていて苦手なものをやるのがすこしきつかった
家がボロくて一部の運動をやるのに床の痛みを進めてしまわないか不安があった
リングコンと足にコントローラーをつけるという準備が面倒だった

ので長く続かなかった。

フィットボクシング2は、上半身を中心に動かすので最悪座ったままでもできる気がするし、なによりもスイッチを付けてソフトを選んだらすぐプレイできて楽。そして好きな曲が入っていたのでちょっとうれしい！

最近肩こりに悩んでいる家族に勧めたら買っていたので、通話しながらわいわいやりたい。

肩こりと歯の噛み締めがよくなった

ガチガチになっていた肩が、一回やっただけで良くなったので本当にびっくりした。歯の噛み締めもよくなった。最近は仕事のストレスから歯の噛み締めが悪化していて、朝起きたときにご飯を口に運ぶのが難しいと思うほどだった。フィットボクシングをはじめてから肩こり同様、歯の噛み締めも良くなった。 (歯の噛み締めについては良くなったとはいえ、癖になっているので歯科医院に相談しようと思っている。)

手指の震えが改善した

感情やアルコールなどは関係なく、左手が震えるときがある。手を広げたり、キーボードの上で手を浮かせているときに左手の手全体もしくは指(とくに中指)が震える。これもフィットボクシング2を初めて、ふと気づいたら震えが小さくなっていたので、わーい！と喜んでいる。(手指の震えでいままで困ったこともなかったので、放置していた…。こちらも一応病院にいって相談しようと思う)

フィットボクシング2、運動苦手な自分でも楽しんで出来る運動なので続けたい。

2022-10-30

Macのターミナルなどの設定覚書(2022年10月30日時点)

ツール日記

MacBook Airを買ったので備忘録。
PCの初期設定と必要なブラウザのインストールが終わったあと、ターミナルをStarshipで見やすくしてNode.jsが使えるところまでの設定の手順を残しておく。
私のPC作業環境については前に書いた記事を参考にしてください。

手順

各種インストールの前にXcodeをインストールし、homebrewを使って各種インストール。
ターミナル用のフォントはnerdfontsから気に入ったフォント、VSCodeにはCicaをインストールする。
GitとStarship、Voltaなどをhomebrew経由でインストールする。(GitはMac標準のものからパスを通すことで切り替える)
ターミナルのプロファイルを設定する。デザインは"Homebrew"。
フォントは"Code New Roman Nerd Font"で文字サイズは14を設定。
テキストの"テキストをアンチエイリアス処理"にチェックを入れておく。

大雑把だがターミナルで打つコマンドは下の通り。

// Xcodeのインストール
xcode-select --install

// Homebrewのインストール
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

// Gitのインストール
brew install git

// ./zshrcの編集 iでインサートモードで編集してGitのパスを通す。下にある.zshrcの内容を追記
vi ~/.zshrc

// シェルの再起動
exec $SHELL -l

// Starshipのインストール
brew install starship

// Starship設定ファイルの作成
mkdir -p ~/.config && touch ~/.config/starship.toml

// VS Codeのインストール
brew install visual-studio-code --cask

.zshrcに追記する内容

# Gitのパス
export PATH=/usr/local/bin/git:$PATH

# Starshipのパス
eval "$(starship init zsh)"

starship.tomlの内容

[directory]
#ディレクトリ表示
truncation_length = 10
truncate_to_repo = false

[git_status]
conflicted = "💥"
ahead = "🏎💨"
behind = "😰"
diverged = "😵"
untracked = "🌚‍"
stashed = "📦"
modified = "📝"
staged = '🔦'
renamed = "🏷"
deleted = "🗑"

[[battery.display]]
#バッテリーを表示するタイミング
threshold = 100
style = "bold blue"

[battery]
full_symbol = "🥳"
charging_symbol = "🔌"
discharging_symbol = "🫠"

[time]
disabled = false
use_12hr = true

参考サイトへのリンク

2022-09-19

フォームを作るときに参考にした記事・サイト(2022年9月)

学びアクセシビリティ日記

フォームを作るときに参考にしたサイト・記事の覚書き。送信ロジック(action属性に入る部分)はサービスを利用したので割愛。

どんなフォームを作りたかったか

autocompleteで氏名や住所の自動入力が(できるだけ)適切に行われる。
ラベルや説明文と入力欄・選択項目がきちんと紐づく(クリックなどの動作だけでなくスクリーンリーダーでも)

フォームの基本

autocomplete(ブラウザでの入力補完について)

ややこしい､フォームで使える住所系autocomplete属性の一覧と解説｜フロントの人の雑多メモ

エラー表示について

余談

使ったフォームサービスについての感想など。フォームサービスのバリデーションを利用したところ、必須項目(required)でのエラーも入力文字のバリデーションエラーもひとつのエラーになる仕様で、エラー文に両方の可能性を示すような内容を書くしかないのか…と困惑した。

加えて、requiredをつけるとフォームサービスのrequiredと干渉してエラー表示がおかしくなるようだった。あとはname属性がサービスでの表示項目になるのはどうなのかな…と。

実装しているときに調べたら日本語でname属性書くのだめとはなっていないような気がしたけど…(文字化けしないかな…)

次回、自分でフォームサービスを選定するときは今回気になった項目について気をつけたいし、あるのであればアクセシビリティに配慮されたフォームサービスを使ってみたい。

アクセシビリティ対応を謳ったフォームサービスがあるかどうか私は聞いたことがないけど、どうなんでしょう。 HubSpot等、海外サービスだと法律との兼ね合いできっちりしてるのかな……時間があるときに確認してみたい。

あとはデザインや設計との兼ね合いについてももう少し考えたい。項目もだけど、確認画面どうするかとか。

2022-08-13

Day.jsを使って日付をフォーマット

学び

Next.jsでDay.jsを使って日付フォーマットをしたので覚書き。

日付変換のコンポーネントを作成して、「2022-07-26T11:34:00.000Z」を「2022/07/26」に変換。

import dayjs from 'dayjs';

// 日付のフォーマット
export default function ConvertData({ convertDate }) {
  const publishedAt = dayjs(convertDate).format('YYYY/MM/DD');
  return (
    <time dateTime={convertDate}>
      {publishedAt}
    </time>
  );
}

記事詳細(e.g [id].jsなど)など使いたいところでコンポーネントで日付(publishedAt)を渡す

…
<ConvertData convertDate={publishedAt}></ConvertData>
…

エビスコムさんのNext.jsの本で使われていたdate-fnsも気になる。こちらは、tsが使われているようでモダンなライブラリ？なのかもしれない。

2022-05-14

最近使って便利だったJavaScript関連のもの

学び日記ツール

libphonenumber-js

catamphetamine.github.io

これは前回の記事にも書いたが、電話番号のバリデーションができてとても便利。
最近無効な携帯電話を調べたときに、このライブラリのサイトでバリデーション試してみたらきちんと「無効な電話番号」として値が返却されていたのでさすが～!と思った。
電話番号関連は正規表現で頑張るよりこのライブラリに任せたほうがいい。

GSAP

greensock.com

自分のサイトにスクロールアニメーションをつけるために使ったけど、楽しいし楽。要素を取得するところからとても楽だし、変更するプロパティの指定も簡単。
もっと複雑なアニメーション書けるようになりたい・・・。

MutationObserver

developer.mozilla.org

DOMに変更が加えられたことを監視するJSのAPI。
ライブラリ的なものが返す結果に対してﾓﾆｮﾓﾆｮするために使った。
これがなかったら打つ手がなくて困っていただろうし、考えた人に感謝しかない。

Intersection Observer(交差オブザーバー)

developer.mozilla.org

要素の交差を監視するJSのAPI。
スクロール時の要素の位置変更などに使った。これを使って自分のサイトに目次つけたい。

2022-05-07

電話番号の解析・検証やフォーマットができるlibphonenumber-js

学びツール

libphonenumber-js

libphonenumber-js はGoogleの libphonenumber を元に、その機能をJavaScriptで使えるようにしたライブラリ。
電話番号の解析・検証やフォーマットができる。
説明を読んでいて、.getType()で携帯電話やフリーダイヤルなど電話番号の種類を判定できるところなどいろいろ機能があって便利だし面白い。

試してみたが…

試すときにCDNしか使えない環境でimportが出来ず、そのうえ参考にした記事でバージョンが古いことに気づかず試してに少しつまずいた…。(バージョンが古ためか、目的としていた電話番号の検証がうまく動かなかった。)
最終的にUsing libphonenumber for International Phone Numbers という記事を参考にして動かせた。

*追記
libphonenumberのjsライブラリは私が使ったものの他にもあるようなので要注意。

2022-02-03

innerHTMLよりもinsertAdjacentHTMLのほうが動作が早いらしい

学び日記

insertAdjacentHTML() は、第二引数で指定するテキストを HTML または XML としてパースし、その結果であるノードを DOM ツリー内の指定された位置（第一引数で指定）に挿入します。これは挿入先の要素を再度パースするものではないため、既存の要素や要素内部の破壊を伴いません。余分なシリアル化のステップを回避できる分、 innerHTML への代入による直接的な操作よりもはるかに高速な動作となります。

引用元 developer.mozilla.org

タイトルと上の引用のとおり、insertAdjacentHTMLは高速に動作するらしい。今後JSでHTMLを要素に追加したいときはこちらを使いたい。

JSで要素を追加するのを勉強がてらjsFiddleに書いたので、ここにメモ。

https://jsfiddle.net/meeech1202/nm87L346/28/

これに近いことができなくて力不足を感じたので反省……
JSつよくなりたい。

2021-11-25

DuckDuckGoを使ってみた

日記学び SEO

f:id:nishirohatoo:20211125221632p:plain

TwitterでDuckDuckGoという検索エンジンを見かけたので使ってみた。アイコンの緑の蝶ネクタイをつけたアヒルがかわいい。

duckduckgo.com

DuckDuckGoは、インターネット検索エンジンである。利用者のプライバシーの保護と利用履歴等を記録保存しないことを運営方針としている。VivaldiやTor Browserの標準検索エンジンにも採用されている。また、DuckDuckGoは検索結果のパーソナライズを行わないため「フィルターバブル」に陥らない。

出典：DuckDuckGo - Wikipedia

「React」で試しに検索してみたら、Google検索とは似ているが異なる結果が表示された。
Googleで手に入れたい情報が見つからずに行き詰まったときに、もう一度検索する手段として良いかも。
「はてな」で検索するとこのブログでも使っている「はてな」が一番上に出てくる。

検索結果の表示はリッチスニペットも表示されるので、GoogleもDuckDuckGoも検索結果の表示デザインは似たデザインだなーと思った。
(当り前だが、ユーザビリティを考えると検索窓や検索結果画面はどれも似たデザインであることがGoodになるね)

DuckDuckGoのSEO対策

Bingのウェブマスターツールを使うことで、DuckDuckGoもSEO対策できるらしい。 annex.931women.com

SEOについてはよく使うGoogleに注目しすぎて、その他の検索エンジンのことを忘れがちだと反省・・・。

自分が使っていないだけ、知らないだけでGoogle以外の検索エンジンを使っている人がいる。
検索エンジンはYahoo!もBingも持っている。

SEO対策はGoogleだけが対象ではないことを肝に銘じよう。

インターネットメモ帳

ウェブ制作と趣味のメモ帳

映画館でテイラー・スウィフト THE ERAS TOURを観てきたよ

Tolerate It

... Ready for it?

Look What You Made Me Do

Blank Space

Bad Blood

Lavende haze

Anti-Hero

Karma

無印の店舗受け取りを利用して、テーブルと椅子を買った

フィットボクシング2をはじめた

全体的な感想

肩こりと歯の噛み締めがよくなった

手指の震えが改善した

Macのターミナルなどの設定覚書(2022年10月30日時点)

手順

.zshrcに追記する内容

starship.tomlの内容

参考サイトへのリンク

フォームを作るときに参考にした記事・サイト(2022年9月)

どんなフォームを作りたかったか

フォームの基本

autocomplete(ブラウザでの入力補完について)

エラー表示について

アクセシビリティについて

余談

Day.jsを使って日付をフォーマット

最近使って便利だったJavaScript関連のもの

libphonenumber-js

GSAP

MutationObserver

Intersection Observer(交差オブザーバー)

電話番号の解析・検証やフォーマットができるlibphonenumber-js

libphonenumber-js

試してみたが…

innerHTMLよりもinsertAdjacentHTMLのほうが動作が早いらしい

DuckDuckGoを使ってみた

DuckDuckGoのSEO対策