うまくいかないことは、面白い

絶妙な物理空間

うまくいくってなんだろう

自分の思った通りになることだろうか

しかし、我々の居る物理空間というのは、本当に絶妙で
何か思いついて行動を起こすと
僕の肌感覚で4割「思った通り」になり、6割「なんじゃこりゃ」になる

「なんじゃこりゃ」は、今までの経験では測れない未知の部分で
つまり、脳は「うまくいかなかった」と翻訳する事象が起こる

ようになっている

のではないか。
いい感じで「なんじゃこりゃ」を混ぜてきやがる

映画「インターステーラー」の

本棚のシーンのように
誰かが（未来の自分？未来の関係者？）
唯一アクセスする手段である「重力」を使って、何かを伝えようとしているように

（本棚のシーンの解説は、この動画がとてもわかりやすかった↓)

世界はじっとしていない、うまくいかないことLOVE

端がない今も広がり続ける紙があったとして、その紙はじっとしていなくてどんどん複雑な形に広がり続けていて、
その紙を自分の決めた色で塗りつぶそうとしても、塗っているはなから紙が広がって、形もかわっていくので
その紙をビシッと思い通りに塗りつぶすことは永遠にできないのです

じゃあ思い通りにならんから、意味ないとか失敗やった

と脳は処理したがる
脳は基本、安全、安心思考やから、生まれてから今日までの経験のなかで、未知のものには挑まんといてほしい、基本、冒険や挑戦など危ないことはやめてほしい、たのむから危険にさらさんでじっとしておいてほしい、と「はい無理ーーー、おとなしくじっとしてようね」と判定したがる

脳に従うのも、選択肢

しかし、それはインターステラーの本棚のように
何かが「そのうまくいかん経験」を通じて、思いもよらんことを学習させようとしとるんとちゃうやろか
それによって、できなかったことができるようになる道を教えようとしてるんとちゃうやろか
と、
脳の制御の及ばない、好奇心に身を委ねるのも選択肢

脳 vs 好奇心

脳はうまくいくことを好み
好奇心はうまくいかないことを好む

というのが、僕自身の観察結果なのです

日常の細かい場面で、脳 vs 好奇心の対決を高頻度で課したらどうなるか
それが面白くてたまらない

それが、「多動な人」な人の内側なのでしょう

はははははははは

今日のうまくいかないこと

jamzIpWEBでsatoのブログは先に作ってはじめていたけど、このマコトノトコノマは作ってなくて
Astroコンポーネントはsatoブログのものを使って、スタイリングだけ変えて、あんまりテストもせずに（仕事ではありえんが）えいやっと始めたら

iOSのsafariでSNSシェアのリンクボタンが表示されないよーーー
ってことに昨日きづきましたーー

PCのChromeでレスポンシブモードではひょうじされるのにぃーーーー

さぁ　今日もやってきました！楽しい楽しい「うまくいかないこと」

よっしゃ
まずは現場に急行！「事件は会議室じゃない！現場で起きているんだぁー」

最近WEBサイトはページ単位の粒度ではなくて、ページの再利用可能な部品単位で開発するのが主流なのです
その単位を「コンポーネント」と呼ぶのです
このSNSシェアボタンのコンポーネント
つくったなぁー、あんまり何も考えず、ぱっとさっとつくったなーぐらいの
愛情薄めのコンポーネントでした
スマン、愛情==検証 をかけるべきでした
なんでも後からわかる

ということで
何が問題なんだー SnsShare.astro君よ

---
import 'line-awesome/dist/line-awesome/css/line-awesome.min.css';
const { url } = Astro;
const { title } = Astro.props;

const pageUrl = encodeURIComponent(url.href);
const pageTitle = encodeURIComponent(title);
---

<div class="share-buttons">
	<div class="share-buttons">
		<a
			href={`https://twitter.com/intent/tweet?url=${pageUrl}&text=${pageTitle}`}
			target="_blank"
			rel="noopener noreferrer"
			aria-label="Twitterでシェア"
			class="share-button twitter"
		>
			<i class="lab la-twitter"></i> Twitter
		</a>
		<a
			href={`https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`}
			target="_blank"
			rel="noopener noreferrer"
			aria-label="Facebookでシェア"
			class="share-button facebook"
		>
			<i class="lab la-facebook-f"></i> Facebook
		</a>
		<a
			href={`https://social-plugins.line.me/lineit/share?url=${pageUrl}`}
			target="_blank"
			rel="noopener noreferrer"
			aria-label="LINEでシェア"
			class="share-button line"
		>
			<i class="lab la-line"></i> LINE
		</a>
		<a
			href={`https://b.hatena.ne.jp/entry/panel/?url=${pageUrl}`}
			target="_blank"
			rel="noopener noreferrer"
			aria-label="はてなブックマークでシェア"
			class="share-button hatena"
		>
			<i class="lab la-hatena"></i> はてブ
		</a>
	</div>
</div>

<style lang="scss">
	.share-buttons {
		width: 100%;
		margin-top: 0.4rem;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.share-button {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 0.5rem;
		border-radius: 5px;
		font-size: 0.9rem;
		text-decoration: none;
		width: calc(50% - 0.25rem);
		color: #fff;
		transition: background 0.3s;

		@include g.responsive(sm) {
			width: calc(25% - 0.5rem);
		}

		i {
			font-size: 1.2rem;
		}
	}

	.share-button.twitter {
		background: #1da1f2;
		&:hover {
			background: darken(#1da1f2, 10%);
		}
	}

	.share-button.facebook {
		background: #1877f2;
		&:hover {
			background: darken(#1877f2, 10%);
		}
	}

	.share-button.line {
		background: #00c300;
		&:hover {
			background: darken(#00c300, 10%);
		}
	}

	.share-button.hatena {
		background: #00a4de;
		&:hover {
			background: darken(#00a4de, 10%);
		}
	}
</style>

さーーーー
やるぞーーーー
（続く）