仕事をする中で、おもわぬ経験や関係ないと思っていた学びが意外と役に立っているということが、どなたにでもあると思います。

社会人になったら、使わないと思っていた勉強などが、意外と仕事の中で意識していることなどは、よくあるのではないでしょうか？

学生時代、バリバリの文系だった私が、なぜ量子力学に関する思考実験を知ったのか、もう忘れてしまいましたが、この「シュレーディンガーの猫」と言う思考実験は、仕事をする中でよく思い出すことの一つです。

シュレーディンガーの猫とは？

シュレーディンガーの猫とは、オーストラリアの物理学者エルヴィン・シュレーディンガーが発表した思考実験です。量子力学の分野での実験だそうですが、私は、一切、量子力学の知識がないので、その点については、よく理解していません。

しかし実験内容は、単純で、密閉された箱の中に50％の確率で毒ガスの発生する装置と猫を入れ、箱を閉じます。一時間経過時点での箱の中身をどう表すかと言うものです。（歴史の中の実験なので、動物愛護的な観点はひとまず置いておきます）

シュレーディンガーの研究結果

シュレーディンガーは。この状態を猫が生きた状態と死んだ状態が重なり合って50%ずつ存在すると表現しました。そして、箱を開いた時に事象として確定するというものです。

なぜ仕事に役に立つか？

仕事の中では、わからない先のことを予測しながら、動くことがよくあります。そんな時に、陥りがちなのが、思い込みや決めつけです。「たぶん大丈夫だろう」「前もこうだから今回も同じだろう」と考えてしまい、ほとんど意識せずに、他の可能性を排除して、結論を導いてしまいます。しかしこれは、非常に危険なことです。決めつけた結果と違う結果が出たときに、想定していなかった対処を迫られるためです。

「シュレーディンガーの猫」の思考実験による可能性の存在と言う考え方は、イメージをしやすく可能性を「存在している」と考えることで、起こりうる事象として認識することが容易になります。

シュレーディンガーは、今、現実に起きている事象として可能性を50％ずつ存在させたわけですが、未来や未確認の事実に対して、可能性を按分して、存在させることで、書く可能性を認知しやすくなります。

実際の例

例えば、契約を結ぶ機会などがあるかと思います。その場合、契約書をそのまま読んでしまうと、何のための規定かなど気が付くことが難しくなります。契約書は、だいたい「この場合」→「こうします」と言うような書かれ方をしている場合が多いですが、「この場合」とは、可能性の一つであり、他の可能性も検討する必要があります。

シュレーディンガーの猫で言えば、「猫が生きていた場合」と言うことですが、一度箱を閉じた状態まで戻り、その箱の中に想定しうる可能性を存在させていくことが、必要です。「箱を閉じる」など、イメージしやすい形で、契約書を読むことで、他の可能性を想定しやすくなります。

要は安全運転と同じ

これまで、シュレーディンガーの猫を仕事に生かす方法を検討してきましたが、この使い方は、みなさん教習所で習う「かもしれない運転」と同じですね。「人が出てくるかもしれない」「車が急に止まるかもしれない」要は、いろんな可能性を考慮しろと言うことです。

教習所で学んだことが、仕事に生きると普通は考えませんが、実際は、いろいろな場面で学んだことを応用して生きているのだと思います。

いろいろな経験を仕事に生かす

いろいろな経験や考え方を仕事に紐づけていくことで、仕事を楽しく感じる瞬間が多くなるのではないかと考えています。仕事のために、何かを学ぶのも大事ですが、今まで学んだことを仕事に生かすことも大事です。ある程度の年齢の方であれば、そういった資産を多く持っているはずです。

「仕事」と「学び」の視点を変えて仕事に楽しみが増えるといいですね！

こんにちは、窪田です。

最近、作業中に流すBGMはどんなものが良いのかなと思うことがありました。

歌詞のある曲だと作業に集中できていない時間があるような気がしますし、かといって何も流さないでいると何か音楽を流したいという気分になってしまうと感じていました。

そこで、今回は音楽と集中力の関係性について調べてみました。

目次

1. 調べた結果
2. 集中力が低下してしまう原因とその対策
3. 音楽を流しながら作業する際のメリット
4. 作業中に流す音楽をカスタマイズできるおすすめのサイト
5. まとめ

調べた結果

音楽と集中力の関係性を調べた結果、諸説ありましたが基本的には、音楽を聴くことは集中力の低下を招くという認識が一般的なようです。

ただ、無音の状態も良くないそうで、静かすぎると小さな音に敏感になってしまうため、集中しにくくなってしまうという研究結果もありました。

作業中に音楽を流すことには、デメリットもメリットもあるみたいです。

集中力が低下してしまう原因とその対策

音楽を流すことで集中力が低下してしまう原因は、音楽を聴くという行為に脳のリソースを使ってしまうためだそうです。

特にイヤホンやヘッドホンで音楽を聴いている状態や歌詞のある音楽を聴いている状態は、音楽を聴くことに多くのリソースが使われてしまうため、集中力に悪影響を与えてしまいます。

そのため、集中力とうまく付き合うためには、環境音や自然音、歌のないインスト曲などをスピーカーから流すのが良いそうです。

音楽を流しながら作業する際のメリット

音楽を流すことのメリットの1つ目は、周りの雑音が気にならなくなることです。

周りの人の話し声や時計の針の音など、静かだと気になってしまうような音をかき消すことで、気が散るのを防いでくれます。

2つ目は、音楽を流すことが作業を行う際のスイッチになることです。

作業中に音楽をかけることで、音楽を流す ＝ 作業を行う というルーティンが作られ、家にいても作業と休憩のメリハリがつくようになります。

作業中に流す音楽をカスタマイズできるおすすめのサイト

作業中に流すBGMを探していたところ、自分好みのBGMを流せるおすすめのサイトを見つけました。
「lofi.co」というサイトです。

このサイトでは、雨音や街中を走行する自動車のノイズ、キーボードの打鍵音などの環境音と、ジャズやチルアウトなどのゆったりとした曲を流せます。

画像右側の赤枠の部分で、流す音の選択とそれぞれの音量の調節ができます。

lofi.coは環境音とインスト曲を流すことができるので、作業する際に丁度良いと思います。

有料プランもあるようですが、無料で使用できるので、ぜひ使ってみてください！

まとめ

音楽と集中力の関係性について調べてみましたが、音楽を流すことは集中力の低下を招くという見解が多かったです。

ただ、悪い面ばかりではないようで環境音や自然音、インスト曲を流す場合であれば、周りの雑音が気にならなくなったり、作業を行う際のスイッチになったりと、工夫次第では集中しやすい環境を作ることができるそうです。

BGMを工夫すると、より集中できる環境が手に入るかもしれないという話でした。

WordPressのブロックエディタでダイナミックブロックを作成する機会があったので、
自分の知識の整理も込めて、簡単にまとめてみました。

今回は、投稿IDを入力すると、入力したIDのタイトル、サムネイル、リンクを取得して、
表示するものを作成したいと思います。
※プラグインのタイトルやアイコンの設定などは、割愛します（デフォルトのまま）。

ファイルの生成

WordPressが公式にサポートする @wordpress/create-blockを使用して環境構築します。
簡単なコマンドで作成に必要なファイルを自動で生成してくれます。

プラグインのディレクトリ（wp-content/plugins）に移動します。

$ cd xxx/wp-content/plugins

create-blockを実行します。

$ npx @wordpress/create-block sample-dynamic-block

※「sample-dynamic-block」は、作成するプラグインのディレクトリ名になるので、任意のものにしてください

実行が完了すると、以下のような構成が作成されます。

sample-dynamic-block/
│
├── build/
│   ├── index.asset.php
│   ├── index.css
│   ├── index.js
│   └── style-index.css
│
├── node_modules/
│
├── src/
│   ├── edit.js
│   ├── editor.scss
│   ├── index.js
│   ├── save.js
│   └── style.scss
│
├── sample-dynamic-block
│
├── package-lock.json
│
├── pakage.json
│
└── readme.txt

生成されたファイルにより、WordPress管理画面のプラグイン一覧ページに表示がされます。
sample-dynamic-blockと設定したので、「sample-dynamic-block」が追加されています。
有効化します。

開発

作成したプラグインフォルダに移動して、開発モードを実行します。

$ cd sample-dynamic-block

$ npm start //本番用はnpm run build を実行

save.js

通常、フロント表示はsave関数（src/save.js）に定義をしますが、ダイナミックブロックの場合、
PHPで定義する必要があります。

そのため、save関数はnullを返すようにします。
これによりブロックのレンダリングにPHPが使用されるようになります。

src/save.js


export default function save() {
  //PHPでレンダリングするため save 関数は nullを返すようにする
  return null;
}

sample-dynamic-block.php

ブロックをPHPでレンダリングするには、register_block_type関数の第2パラメーターの配列に render_callback を追記します。

sample-dynamic-block.php


register_block_type( __DIR__ . '/build', array(
		//レンダリング用のコールバック関数を設定
		'render_callback' => 'sample_dynamic_block_render'
));

さらに、attributes に入力された値（投稿ID）を保存するための属性を定義します。

sample-dynamic-block.php


register_block_type( __DIR__ . '/build', array(
	//レンダリング用のコールバック関数を設定
	'render_callback' => 'sample_dynamic_block_render',
	//入力された値（投稿ID）を保存するための属性を追記
	'attributes' => [
		'postID' => [
			'type' => 'number',
			'default' => 0
		]
	]
));

render_callbackに指定したコールバック関数を定義します。
保存された投稿IDからその投稿のタイトル、サムネイル、リンクを取得し、出力します。

保存された属性にアクセスするには$attrを使用します。
postIDのアクセスは、$attr['postID']になります。

なお、render_callbackの関数は、WordPressの関数が使用できます。

sample-dynamic-block.php


function sample_dynamic_block_render($attr, $content) {
	if($attr['postID'] > 0) {
		$selectPost = get_post($attr['postID'] );

		if($selectPost) {
			$thumbID = get_post_thumbnail_id($selectPost->ID);

			if($thumbID > 0) {
				$thumbUrl = wp_get_attachment_image_src($thumbID, 'full')[0];
			}

			$title = $selectPost->post_title;
			$link = get_permalink($selectPost->ID);

			ob_start();
			?>
			<div>
				<img src="<?php $thumbUrl; ?>">
				<a href="<?php $link; ?>"><?php $title; ?></a>
			</div>
			<?php
			$output = ob_get_contents();
			ob_end_clean();

			return $output;
		}
	}
}

edit.js

編集画面を作成します。
投稿IDを入力するコンポーネントの呼び出しと、
sample-dynamic-block.phpで設定したattributesにprops経由で取得し、設定します。

//TextControlコンポーネントをインポート
import { TextControl } from '@wordpress/components';

export default function Edit(props) {
	//sample-dynamic-block.phpのattributesにprops経由でアクセスして変数に分割代入
	const {attributes: {postID}, setAttributes, className} = props;

	return (
		<div className={className} { ...useBlockProps() }>
			<div>sample dynamic block</div>
			<TextControl
				label="投稿IDを入力" //ラベルの表記を設定
				type='number' //inputタグのtypeを設定
				value={postID} //保存されている属性（投稿ID）を表示
				//入力された値を属性に登録する
				onChange={(newID) => settAttributes({postID: parseInt(newID)})}
			/>
		</div>
	);
}

確認

投稿の新規作成から作成したカスタムブロックを選択して、投稿IDを入力してください。
※CSSはデフォルトのままです。

プレビューもしくは、保存をして実際のページを確認します。
サムネイルとタイトルが表示され、リンクも設定されています。

出力内容をさらにカスタマイズし、CSSで整えるとこのようなこともできます。

まとめ

今回作成したダイナミックカスタムブロックは、色々と考慮する点はありますが、
投稿IDからタイトルとサムネイルを表示し、リンクを設定することができました。

今回の基本的な内容を知っていれば、色々と応用できるかと思いますので、
ぜひ、参考にして頂ければと思います。

次回は、もう少し使いやすくするために、編集画面でも出力内容が確認できるプレビュー機能を実装できたらと思います。