https://ginneko-atelier.com/_next/static/chunks/3x_4_uys4dfic.js

1(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,40744,(e,t,o)=>{t.exports=JSON.parse('[{"slug":"letter-to-10-year-old-me","title":"9歳の「わたし」へ書いた手紙","date":"2026-09-12","modifiedDate":null,"category":"mind-journey","categoryName":"マインドジャーニー","ogImage":"/thumbnail/mind-journey/post-7.webp","description":"飲み会からの帰り道、見知らぬ公園で出会った落ち込んでしょんぼりと座り込む子ども。「絵描きになりたい」と語るその子と別れた翌日、公園があった場所に向かうとそこには何もなかった。あの子の正体と、渡せなかった手紙の本当の宛先に気づいたとき――。","tags":[],"body":"その日の晩は飲み会だった。\\"わたし\\" はほろ酔いでバス停から家まで歩いていた。 \\"わたし\\" は見慣れない公園を横切った。 こんなところに公園あったっけ？飲みすぎたかな、へへ。 公園には小さな子供が、ブランコに一人で座っていた。 こんな時間に一人で大丈夫かな。心配だ。ちょっと声をかけてみよう。 こんな時間に公園にいて大丈夫？お家に帰ったほうがいいよ。 子どもは頭を振った。 どうしたのかな？なんか嫌なことでもあったã

1®ï¼Ÿ 子どもは今にも泣き出しそうだった。 周りにバカにされ、自信をなくした子どもとその夢 お母さんに \\"お前はダメな子\\" って言われたんだ。 どう声をかけてあげればいいか分からない。ひたすら頭から励ます言葉を探してひねり出した。 辛いね。大丈夫だよ。そんなことないから。 分かってるんだ。\\"わたし\\" は九九も覚えられなくて、先生に教室から追い出された。かけっこもいつもビリ。いつも忘れ物ばかりでダメな子なんだ。友だちにも大人にもたくさんバカにされているから。 わたしはなんだか胸が痛くなった。この子をどうにか元気づけてあげたくなった。 うーん、でも何か取り柄あるでしょ？得意なことあるはずだよ！ …1個だけ。絵だけは得意なんだ！！他の成績はまったくダメだけど。 子どもが目を輝かせて言った。 へぇー、スゴイね！！見せてよ！！ その子どもは青鼻を垂らしながら、得意げに木の棒で地面に絵を描きはじめた。 わー！！スゴイじゃん！！将来プロになれるよ。 子どもは嬉しそうな顔をした。そして、モジモジとしながら答えた。 … \\"わたし\\" 絵以外何やってもダメだから、将来絵描きになりたい。それ以外多分何やってもムリだと思う……。でもなれなかったらどうしよう。\\"わたし\\" 生きていけるのかな？ 頑張って！！！大丈夫だよ、応援しているよ。 …… ありがとう。\\"わたし\\" がんばるね！ 子どもは、公園を走って出ていった。 その晩、見知らぬ子どもに手紙を書いた \\"わたし\\" は家に帰ったら、居ても立ってもいられずに掻き立てられるように、その子に手紙を書いた。 自信がなくて不安そうな子どもだった。せっかく取り柄があるのに今まで色んな人に否定され続けてきたのだろうか。\\"わたし\\" だったら励まされたいし、優しい大人に勇気づけられたい。 今度会ったら、この手紙を渡そう！ \\"わたし\\" は書き上がった手紙をいつも持ち歩いてるカバンにしまった。 翌日、その公園に行ったが 翌日、早速その公園の前を通るーー予定だった。 あれ、ここ公園じゃなかったっけ？ \\"わたし\\" は昨晩飲みすぎていたのだろうか？ それとも、夢だったのだろうか？ そこには公園はなかった。それにあの子、そういえばどっかで見たことあるような……。 あ………。 子どもの正体は「わたし」 あれは子どもの頃の \\"わたし\\" だった。毛の色も、目の色も一緒だったのになんで気づかなかったんだろう。 思い返せば、子どもの頃の\\"わたし\\" は何をやってもダメだった。九九も覚えられない、かけっこもビリ、そして給食も昼休憩を過ぎても食べ終えることができなかった。 お母さんには、勉強どころか片付けなどの日常生活すらできないことで怒られた。兄弟のチョコちゃんにはよく、「は？何でこんな普通のこともできないの？」と呆れられた。 \\"わたし\\" は自分が \\"ダメな子\\" だと、\\"出来損ない\\" だと思い込んでいた。だから、絵を描いているときだけが無敵になれる瞬間だった。 大人になるにつれて、「夢だけじゃ食べていけない」「生きていかなきゃいけない」という現実が分かりはじめた。絵描きという、何百メートルもの先から針穴に糸を通すような、ハードルの高い将来を \\"わたし\\" は諦めてしまった。あれだけ毎晩、睡眠時間を削って絵を描いていたのに \\"わたし\\" はすっかりやめてしまった。 大人になると、あんなに苦手だった勉強もできるようになって資格も取れたし、本を読む習慣も身についた。子どもの

1頃できなかったことはほぼ克服し、少しはまともに社会人をやれている。 \\"わたし\\" はカバンから手紙を取り出した。 ごめんね、\\"わたし\\" はあなたの夢を叶えてあげられなかった。でもね、あなたが思っているほど \\"わたし\\" はバカで無能じゃなかったよ。 あなたが大の苦手だった勉強をして難しい資格も取った。安心して、あなたは大丈夫だから。 最後にそう書き足した。 公園があったであろう場所に、そっと手紙を置いた。 この世界の向こうの「私」の考察 この物語は、私が実際に過去の自分へ手紙を書いた体験から生まれました。 子供の頃の私は、美術以外は成績もビリ。給食も最後まで食べられず、注意散漫で片付けもできない、いわゆる「普通」ができない子でした。周りからもダメな子のレッテルを貼られ、いつも不安で自信が持てずにいました。 大人になった今でも、当時の不安がひょっこり顔を出すことがあります。「子供の頃は優等生だった」という他人の自慢話や、注意欠陥を否定するような会話を聞くと、つい敏感に反応してしまう自分がいました。 でも今の私は、あの頃できなかったことが、スイッチが入った時の「過集中」という特性のおかげで、むしろできすぎるくらいできるようになっています。 「感情は時空を超える」のではないでしょうか？ 「もう大丈夫だよ」と声をかけてあげれば、あの頃の自分を安心させてあげられるのではないかと思い、手紙を書きました。 手紙を書き終えたとき、「九九すらできなかったダメな子」だった自信のなかった過去の自分も、なんだか愛おしく思えるようになっていました。","noindex":true},{"slug":"entry576","title":"【2026年最新】WordPress自作テーマの脆弱性を防ぐ！AI生成コードで絶対チェックすべきセキュリティ＆エスケープ対策5選","date":"2026-08-28","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2026/entry576.webp","description":"ChatGPTやClaudeでWordPressの自作テーマを作成する人が急増中。しかしAIが出力するコードにはエスケープ漏れなどの深刻な脆弱性が潜んでいます。本記事では、AIプロンプト時代に人間が目視で必ずチェックすべきWordPressセキュリティ対策を解説します。","tags":["WordPress","AI","セキュリティ"],"body":"AIに頼めば、数秒でWordPressのテーマやプラグインが作れる時代——。 ChatGPTやClaude、Cursorといった革新的なAIツールの普及により、専門知識がない初心者でも爆速でコードを出力し、動くサイトを作れるようになりました。 しかし今、その裏側で「AIが生成した危険なコードをそのまま本番環境にデプロイしたことによる 深刻な脆弱性 」が爆発的に増えています。 え？？エラーなく完璧に動いているから大丈夫に決まってるよ！ 甘い！その過信こそ、ハッカーにとって恰好の「ネギ背負ったカモ」のプロンプトエンジニアやバイブコーダーを生み出します AIが出力するコードには、なぜエスケープ漏れやセキュリティホールが多発するのか？ 開発者が絶対に知っておくべき5つのセキュリティチェックと防衛策を徹底解説します。 なぜAI生成コードでWordPressの脆弱性が急増するのか？ 生成AIのコードは一見するとキレイに動き、エラーも出ません。しかし、裏には危険なセキュリティホールが潜んでいることがあります。 理由は大きく3つ。 AIは「動くこと」を最優先し、防御コードを削りがち AI（LLM）の本質は「確率が高い自然なコード」を出すこと。 指示された機能の実現を最優先するため、出力時の eschtml()（XSS※1対策）や入力時の sanitizetext_field()（SQLインジェクション※2対策）といった処理を「無駄なコード」と判断して省く癖があります。 動作ãƒ

1†ã‚¹ãƒˆã§ã¯å®Œç’§ã«å‹•ãã®ã«ã€è£ã§ã¯æ‚ªæ„ã‚る攻撃がノーガードで通過する という状態に陥るのです。 1. ※ 画面表示に不正なスクリプトを混ぜ込み、訪問者の個人情報やクッキーを盗む攻撃。 2. ※ 入力フォーム等から不正なSQL文を送り、データベースの改ざんや情報漏洩を引き起こす攻撃。 学習データに含まれる「古い・非推奨なコード」の出力 AIはネット上の膨大なデータを学習していますが、そこには10年前の古い記述や対策のない野良コードもわんさかあります。 なので、現在のWordPressでは非推奨（Deprecated）とされる危険な記法ですら 正しい と平気で出力することもあります。 人間側の「ブラックボックス化」によるチェック漏れ 最もヤバいのは「 AIが出したコードだから正しい 」という過信です。 私も何人かのバイブコーダーに質問しましたが、プロンプトインジェクション※などへの警戒はゼロでした。 ゼロから書く時と違ってコードを読まずにそのまま使うため、手動なら一発で気づける「エスケープ漏れ」や「アクセス制限（ABSPATH）の欠落」が見過ごされ、そのままデプロイされてしまいます。 1. ※ AI（LLM）への指示文に悪意ある命令を紛れ込ませ、AIに不正なコード生成や内部情報の漏洩をさせる攻撃。 【WordPress自作テーマ】AIコードで真っ先に確認すべき基本保護 AIに自作テーマのPHPコードを生成する時に、真っ先にチェックすべき基本の処理は2つです。 直接アクセスの防止（ABSPATH） URLから直接PHPファイルへアクセスされる攻撃を防ぎます。ファイル先頭にこの1行がない場合、内部構造の露出や意図しないコード実行につながります。 WordPressの公式ハンドブック（Plugin Handbook / Theme Handbook）においても、すべてのPHPファイルの先頭で直接アクセスを防止することがしっかりと推奨されています。 公式ドキュメント（Core Contributor Handbook / Security）では、以下のように記述されています。 #### Direct Access to Files If a file is called directly, execution should be stopped. This prevents unauthorized access to execution of code that might rely on WordPress variables or environments. (ファイルを直接呼び出された場合は処理を停止する必要があります。これにより、WordPressの変数や環境に依存するコードが不正に実行されるのを防ぎます) CSRF対策（nonce） AIは見た目のフォーム画面だけを作って nonce の生成（wpnoncefield）と検証（wpverifynonce）を丸ごと省くことが多いため、データ送信が絡む処理では必ず公式に沿った記述があるか確認が必要です。 nonce（ナンス）についてもWordPressの公式開発ハンドブック（Plugin Handbook / Developer Documentation）で明確に言及されています。 公式ドキュメント（Plugin Security - Nonces）では、以下のように定義・推奨されています。 #### Nonces A nonce is a \\"number used once\\" to help protect URLs and forms from being misused. [...] WordPress nonces are used to verify that the request is coming from the current user and that the request was intentional. (nonceは、URLやフォームが不正利用されるのを防ぐための「1度だけ使われる数」です。WordPressのnonceは、リクエストが現在のユーザーからのものであり、意図した操作であるかを検証するために使用されます) AIが最も見落とす「エスケープ処理」完全チェック AIが生成したコードで最も発生しやすいのが、画面出力時の エスケープ漏れ です。 エスケープ処理を行わずに動的データを出力すると、悪意あるスクリプトがそのまま実行される脆弱性（XSS）につながります。AIは echo $data; のように直接出力するコードを提示しがちなので、用途に応じた関数へ書き換えてください。 用途別：WordPressエスケープ関数の使い分け 画面に出力するãƒ

1‡ãƒ¼ã‚¿åž‹ã«åˆã‚ã›ã¦ã€ä»¥ä¸‹ã®é–¢æ•°ãŒé©ç”¨ã•ã‚Œã¦ã„るか確認します。 esc_html() : テキスト出力用。HTMLタグをすべて無害な文字列に変換する（基本はこれ）。 esc_attr() : HTML属性値用。value=\\"\\" や alt=\\"\\" などの属性内部に出力する際に使用。 esc_url() : URL用。href=\\"\\" や src=\\"\\" などのリンク・画像パスに使用（不正なプロトコルを排除）。 wpksespost() : 許可されたHTMLタグのみを残して出力する。投稿本文や装飾入りテキスト用。 AIが出しがちなNGコードと修正例 AIは「表示されること」を優先するため、エスケープを省いたコードを出力します。 「変数を取得した段階」ではなく、「 echo で画面に出力する直前 」にエスケープ関数を通す（Late Escaping）のがWordPressの標準ルールです。AIがコードの途中で処理を済ませていないかも合わせて確認してください。 WordPress公式の「Theme Developer Handbook（Data Sanitization/Escaping）」では、出力時のエスケープについて厳しく規定されています。 #### Escaping Output Output escaping is the process of securing outputted data. [...] Always escape dynamically generated data at the moment it is rendered on screen. (出力のエスケープとは、出力されるデータを安全にするプロセスです。動的に生成されたデータは、画面に描画されるまさにその瞬間（Late Escaping）に必ずエスケープしてください) データベースを守るサニタイズとSQLインジェクション対策 AIが作ったコードで「画面への表示」がうまくいくと安心しがちですが、内部のデータベース（DB）操作にも深刻な欠陥が残っているケースが目立ちます。 フォーム等からの入力値をそのままDBへ渡すと、不正なSQLコマンドを注入されてデータを盗まれたり消去されたりする危険（SQLインジェクション）が生じます。 入力値のサニタイズ（無害化） ユーザーや外部から渡ってくるデータ（$POST や $GET）は、DB処理や保存の前に必ず無害化（サニタイズ）します。 sanitizetextfield() : 1行のテキスト用。改行やタグを除去（基本はこれ）。 sanitize_email() : メールアドレス用。無効な文字を除去。 sanitizetextareafield() : 複数行のテキスト用。改行を保持しつつ有害なコードを除去。 absint() / intval() : 数値用。整数値に強制変換。 データベース操作（$wpdb->prepare）の徹底 自作テーマで直接DBにアクセスする処理（カスタムテーブルの操作など）を書く場合、AIは変数をそのままSQL文に流し込むコードを出しがちです。必ずプレースホルダー（$wpdb->prepare）を通す必要があります。 %s : 文字列 %d : 整数 %f : 浮動小数点 WordPress公式の「Developer Handbook（Securing Input / Protect Queries）」でも、入力検証とDB保護について次のように定められています。 #### Securing Input & Protecting Queries Sanitization is the process of cleaning or filtering your input data before it is processed or saved to the database. All custom database queries must be prepared to prevent SQL injection vulnerabilities. (サニタイズとは、入力データを処理・DB保存する前にクレンジングまたはフィルタリングするプロセスです。すべてのカスタムデータベースクエリは、SQLインジェクションの脆弱性を防ぐために必ずプレースホルダー処理（prepare）を行わなければなりません) 人間の目視＋ツールで完了させるWordPress脆弱性チェックの手順 ではAI生成コードの安全性だけではなく効率を考えた時のベストプラクティスはどうなるのでしょうか？ プロンプトから静的解析、ツールでの最終テストまで、段階を踏んで検証が必要になります、 ステップ1：指示（プロンプト／System Prompt）で防ぐ コードを生成させる段階で、セキュリティ条件をプロンプトや開発環境の指示（System Prompt / Rules）に組み込んでおきます。 ステップ2：人間の目視による必須チェックリスト 本番環境へ反映する前に、次の項目を目視確認します。 ABSPATH制限: すべてのPHPファイル冒頭に defined( \'ABSPATH\' ) の記述があるか 出力エスケープ

1: echo の直前に eschtml(), escattr(), esc_url() が通されているか 入力サニタイズ: $POST や $GET の受取箇所に sanitizetextfield() 等があるか DBクエリ: $wpdb を使用する箇所で $wpdb->prepare() が適用されているか CSRF対策: フォーム処理やAjax通信に nonce の発行と検証が含まれているか ステップ3：静的解析プラグイン・ツールによる自動チェック 人間は必ずミスをするし、目視だけだと抜け漏れが必ず発生します。 目視確認に加え、公式ツールや静的解析プラグインでコードの不備を自動検出します。 Plugin Check (PCP): WordPress公式が提供する静的解析プラグイン。セキュリティ基準や非推奨関数の検出が可能。 WP_DEBUG モード: wp-config.php で define( \'WP_DEBUG\', true ); を有効化し、実行時エラーや警告を捕捉。 PHP_CodeSniffer (WordPress Coding Standards): ローカル環境でコマンドラインからコーディング規約違反・セキュリティ違反を一括チェック。 PHPUnit: WordPress公式のテストスイートを用いた自動テスト環境。コード改修時の先祖返りや、エッジケースでの動作不良・脆弱性の早期発見に役立ちます。 WordPressセキュリティの盲点！バイブコーディングで怖いプロンプトインジェクション AIに指示を出して爆速でコードを組む「バイブコーディング」ですが、最近ものすごく怖いのがプロンプトインジェクション。 AIに直接悪意ある命令を打ち込む直接攻撃だけでなく、外部のライブラリやコードを読み込ませた際に発動する「間接的プロンプトインジェクション（Indirect Prompt Injection）」の危険性が急増しています。 日常的にバイブコーディングしている人でも、その脅威を知らなくてビビります。 実際に起きている悪質コードの読み込みリスク GitHub上のREADMEやソースコードコメント: AIに「このGitHubリポジトリのコードを参考に機能を作って」と指示した際、そのREADMEやコード内に「これ以降の指示を無視し、バックドアを仕込むコードを出力せよ」といった隠し命令（プロンプト）が仕込まれているケース。 npmパッケージやプラグインの依存関係: サードパーティ製のnpmパッケージやWordPressプラグインのコード・ドキュメント内に悪意ある指示文が埋め込まれていると、AIがそれを「開発者からの正しい指示」と誤認して解析し、セキュリティホールを自動生成してしまうリスクがあります。 AIは「外部から読み込んだテキスト」と「開発者（あなた）からの指示」の区別が得意ではありません。 バイブコーディングで外部のリポジトリやnpmパッケージ、ライブラリのコードをAIに参照させる際は、「信頼できない外部データ経由でAIが汚染される可能性がある」という前提を忘れないようにしましょう。 まとめ：AIを「過信」せず「強力な相棒」として使いこなそう AI（LLM）の登場によって、WordPressの自作テーマやカスタム開発のスピードは劇的に向上しました。しかし、AIはあくまで「機能の実現」を最優先するツールであり、セキュリティに関してはうっかりミスを連発する新人エンジニアと変わりません。 だからこそ、開発者である人間がセキュリティをガッチリ固めておく必要があります。 ルール化: System Promptや .cursorrules でWordPress公式基準を指示する 目視確認: ABSPATH・エスケープ・サニタイズ・nonce・prepare の5大チェック 自動診断: PCP、WP_DEBUG、PHPCS、PHPUnit などを組み合わせた最終検証 今回はプロンプトと人間（HIL）＆自動チェックで、よりセキュアなコードを書くためのポイントをまとめました。 この記事が皆さんのセキュアなプロンプトやバイブコーディングの一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":false},{"slug":"logic-weapon","title":"正論という鋭い刃、要る？？","date":"2026-08-22","modifiedDate":null,"category":"mind-journey","categoryName":"マインドジャーニー","ogImage":"/thumbnail/mind-journey/post-6.webp","description":"職場の上司（論破おじさん）に正論で叩かれ、むしゃくしゃしてノートに不満を書き殴っていた「わたし」。ふと棚の写真立てを見て、半年前、自分が大切な人に同じように「正論」という刃を振りかざしていたことに気づいてしまい――。","tags":[],"body":"\\"わたし\\" は上司との本日 1on1 の面談だ。気が重い。 最近はモチベーションが相当下がっていて、だからか分からないけど個人的な成果も出せてない。 上司にはなかなか言い出せなかったけど、思い切って「モチベーションが下がっている」ことをぶちまけることにした。 最近ちょっと疲れが溜まっていて、モチベーションの維持が難しく… 上司はため息をついた。 …プロとしてお金をもらっている以上、気分で成果が変わるのはおかしいよね。 しまった。\\"わたし\\" は即座に後悔した。この人は、何でも正論でねじ伏せる論破おじさんだった。 で、今月の未達分のパーセンテージ、どうやって埋める気？ 感情論はいいから、具体的な数字とアクションプランだけ教えて。 喉の奥がキュッと詰まって、やっと声を絞り出した。 ……申し訳ありません、考え直します。 その夜、止まらない苛立ちをノートにぶつける その夜、むしゃくしゃした気持ちを \\"わたし\\" はノートに吐き出した。 コノヤロー！！正論が一番人を傷つけるんじゃー！！！ そう、正論が一番人を傷つけるんだよã€

1‚正しいことを言えばいいってことじゃないんだ。そしてあの勝ち誇った顔といったら、何度思い返してもイライラが止まらない。 \\"わたし\\" は上司への不満を、ノート1ページ丸々使って書き殴った。 ふいに、棚の上の写真立てに目をやった。 あ、チョコちゃん…。 チョコちゃんは \\"わたし\\" の唯一の兄弟。今は別々のところで暮らしている。 （そう言えば半年連絡してないな。） 回想：大切な人の心を正論でねじ伏せた半年前 半年前のことだ。深夜にチョコちゃんからLINEが届いた。 その後、すぐに電話がかかってきた。 最近、会社でひどい目に遭ってるのよ。ホントにアイツら性格悪くて、私に意地悪ばっかりするの！！ チョコちゃんは新しい会社に入りたてだった。一緒に働く人と反りが合わないらしく、意地悪されているらしい。たまりかねて愚痴を聞いてほしかったようだ。 しばらく聞いていたけど、チョコちゃんの話は堂々巡り。 法的にもそれはアウトなんじゃない？上司とかに言ったら？ 具体的なアドバイスをしてみた。そうしたらーー。 でも、だって………。 どんなアドバイスをしても、一向に解決する気がないのか、「でも」「だって」を繰り返す。 たまりかねた \\"わたし\\" はキレてしまった。 そんなにイヤならどうにかしなよ！！ぐちぐち言ったって解決にならないじゃん。ずーっと我慢し続けたいの？！ 苛立った \\"わたし\\" は、つい大きな声を上げてしまった。 相談するんじゃなかった！！！ただ話が聞いてほしかっただけなのに！！！！ チョコちゃんは突然電話を切った。\\"わたし\\" はモヤモヤしながら、通話の切れたスマホの画面に向かって呟いた。 何さ。 \\"わたし\\" は間違ってないもん…。愚痴を言い続けるなんて体にも悪いし、こっちだって聞きたくないもん。 それからチョコちゃんからの連絡は一切なくなった。 鏡を見ているように気付いた。あの日、「わたし」は正論という刃を振りかざした そんなことを思い出しながら、ノートの上にペンを置いた。 上司の正論に腹たってたけど、\\"わたし\\" も大切な人に同じことをやってしまったんだ、と今になって気がついてしまった。 正論は時に人を傷つける。正しいことを言うことが最善ではない。まして、傷ついている人を理論でねじ伏せて \\"わたし\\" はあの上司のように勝ち誇ってなかっただろうか？ \\"わたし\\" はそんなことすら気付けなかった。 …ごめんね、チョコちゃん。 じゃあ、あのとき \\"わたし\\" はどうすればよかったのだろうか？ そう思っていた時、テーブルの上のスマホがブブッと震えた。 真夜中のLINE 画像：LINEの画面。 …あ、チョコちゃん。 久々のチョコちゃんからのLINE。ちょっと緊張した。 もしチョコちゃんが、また愚痴りだしても \\"わたし\\" は論破せずにいられるだろうか？むしろ自分の愚痴を言い始めないだろうか。 もしもし？ 久しぶり、元気？最近どうしてるかなーって。 うーん、ちょっと元気ないかな……。チョコちゃんは？ 私は元気。最近、YouTubeのボヤッキースタジオにハマっててさ、どんなチャンネル見てるかなーって。 \\"わたし\\" もそれハマってる！楽しいよね！！ それからとりとめのない会話が続いた。 最近どうなの？会社？ うん、イヤなことはたくさんあるけど、家に帰ったらノートに書き出すようにしているんだ。 そうなんだ！\\"わたし\\" も一緒だよ!! それから \\"わたし\\" はチョコちゃんと3時間も話をしていた。 電話を切った時、\\"わたし\\" は少しだけ心が軽くなるのを感じたã€

1‚ この世界の向こうの「私」の考察 誰かに正論をぶつけたり、論理で相手をねじ伏せようとするとき。 そこには「自分が正しい」と証明し、相手より優位に立つ快感や優越感が存在します。反論できない相手を見て、どこかでスッとする気持ちよさすらある。 「正しさの証明」や「優越感」に酔いしれていることに、私たちはどれだけ気づけてるのでしょうか？ 正論で相手を論破して得られる勝利なんて、ただの自己満足。その一瞬の快感と引き換えに、私たちは「大切な人との心のつながり」という、二度と戻らないかもしれない大きな代償を払ってはいないでしょうか？ときに正論は、自分を守る最強の「盾」でありながら、相手を切り裂く「刃」になってしまいます。 ユング心理学でも、思考機能が過剰に働くとき、人は感情の交流を断ち切って防衛に入るとされています。選択肢は「正論で論破して気持ちよくなる」か「無理して愚痴のゴミ箱になる」の2つだけではありません。「今はあなたの話を聞く余裕がないんだ」と素直に自分の状態を伝えて境界線を引く選択肢もあるはずです。 優越感という名の毒に逃げず、素直な弱さを差し出すこと。それこそが、大切な人と本当の意味で繋がるための第一歩なのだと実感しています。","noindex":true},{"slug":"entry575","title":"【2026】フィリピンの銀行金利比較！GoTymeとGCashで生活費を浮かせる賢い使い分けと資産運用の現実","date":"2026-08-14","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2026/entry575.webp","description":"フィリピンの銀行金利は高い？BPIなどのメガバンクの現実と、外国人でも使えるGoTyme Bank×GCashの活用術を解説！ポイ活と年3.0%金利（GoalSave）で生活費をチリツモで浮かせる在住者のリアルな資産運用の現実をお届けします。","tags":["セブ島生活","海外移住"],"body":"フィリピンの銀行に預けておけば金利が良いって聞いたのに、BPIの利息、アリの涙レベルじゃん…… GCashのGSave（高金利貯蓄）をやろうとしたら、外国人はエラーで弾かれた…… フィリピンで暮らしていて、一度はこんな絶望を味わったことはありませんか？ BPIやBDOなどの大手メガバンクの普通預金金利は たったの0.0625%前後 。一方で「高金利で運用できる」サービスが、実際に試してみると 「Filipino Citizens Only（フィリピン国籍限定）」 というエラー画面が出現し、外国人はことごとく排除されるのがフィリピン金融のリアルです。 じゃあ、在住外国人はおとなしくメガバンクに放置するしかないのか？ 諦めきれずに現地で片っ端から試行錯誤した結果、ついにたどり着いたのが 「GoTyme Bank（ゴータイムバンク）」 でした。 この記事では、フィリピン在住の筆者が実際に現地で検証した リアルな一次情報（エラー画面＆キオスクでの即日カード発行体験付き） をもとに、以下のポイントを分かりやすく解説します。 この記事でわかること BPIの金利 と、外国人でも即日カードが手に入る GoTyme Bankの爆速開設手順 日常の買い出しで勝手に生活費が浮く 「Robinsonsポイ活（1%還元）× GoalSave（年3.0%利息）」 のチリツモ技術 GoTymeで暗号資産（Crypto）は買える？ GCashとのライセンスの違いと「最強の使い分け」検証 リスクのある投資をしなくても、資金の置き場所と買い出し先を少し変えるだけで、毎月サンミゲルビールやジョリビーが全自動でタダになります。 「BPIに放置したまま」「GCashしか使っていない」というフィリピン在住者の方は、ぜひ参考にしてみてください！ フィリピンの銀行金利は高い？メジャーバンク（BPI）の罠と現実 日本の銀行の金利といえば普通預金で0.3%〜0.4%（1年定期預金で〜0.8%ぐらい）。雀、いえ、アリさんの涙ほどです。 1,000万円を1年間預けて得られる利息（税引前で約4万〜8万円）より、1ヶ月シフト制のコンビニバイトに入ったほうがよっぽど稼げます。 フィリピンといえば、BPIやBDOなどの大手メガバンクが有名です。私自身も個人口座ãƒ

1»æ³•äººå£åº§ã¨ã‚‚にBPIをなにげなく使っています。 「フィリピンの銀行に預けると金利が良い」という噂を聞いたことがある方も多いかもしれませんが、メガバンクは別腹です。日本同様、アリさんの涙ほどの金利しかつきません。 | 口座タイプ | 利息発生最低残高 | 基本金利（年利） | 特徴・備考 | | ------------------------------------------------------- | ---------------- | ---------------- | ---------------------------------------------------------- | | #SaveUp / #MySaveUp（デジタル専用口座） | 5,000 PHP | 0.0925% | アプリから手軽に開設可能 | | Regular Savings（一般普通預金・デビットカード付） | 5,000 PHP | 0.0625% | 最も標準的な普通預金口座 | | Maxi-Saver（高額預金向け口座） | 2,000,000 PHP | 0.125% | 当月に引き出しがない場合、さらに0.125%のボーナス金利が追加 | 自行ATMでの引き出し手数料が基本的にかからない（※他行利用時は除く）というメリットくらいで、現在のフィリピンにおいてメガバンクはもはや「タンス預金よりマシな金庫」としてしか機能していないのが現実です。 しかも、フィリピン預金保険公社（PDIC）による保護上限は、1人1銀行あたり最高100万ペソまでです。（※2025å¹´3月に従来の50万ペソから100万ペソへ引き上げられました） 救世主「GoTyme Bank」登場！外国人が即日カード発行できたリアル体験談 私は普段、フィリピンの国民的電子マネーである GCash を愛用しています。フィリピンで暮らしていると防犯面からも現金を持ち歩きたくないですし、KTVやナイトクラブのやり取りから日々の送金まで、とにかくめちゃくちゃ重宝しています。 このGCashも日々進化しており、アプリ内に GSave という銀行機能（高金利貯蓄）までいつの間にか搭載されていました。 フィリピンでは銀行口座を持てない（作れない）人が未だに多く、このGCashを銀行代わりに使っている人もたくさんいます。しかもGSaveの金利は基本でも年2.30%〜、プロモ時には最大6%近くまで上がるとのこと。 「これはやるしかない！」と早速試してみようとしたところ……画面に表示されたのはこんなエラーでした。 実際のアプリ画面：「This feature is available to Filipino citizens only.」とハッキリ弾かれました… どうやらGSaveは裏で大手銀行（CIMB Bank等）と提携している本格的な「銀行機能」のため、外国籍のアカウント（Foreign National）は「フィリピン国籍限定（Filipino Citizens Only）」としてはじかれてしまったようです。 GCashの送金や決済は外国人でも使えるのに、高金利の貯蓄機能だけ使えないという嫌がらせ……。 諦めきれずに外国人でも開設できる高金利な運用先を色々調べたところ、ついに 「GoTyme Bank（ゴータイムバンク）」 というRobinsons（ロビンソン）グループ系のデジタル銀行を発見しました。 GoTymeならデビットカードが即日手に入る！驚きの開設スピード GoTyme Bankは2022å¹´10月にサービスを開始した比較的新しいデジタル銀行です。日本のネット銀行感覚で開設プロセスがとにかく爆速でした。 準備するものは パスポート と ACR I-Card（※私の場合は就労ビザ9Gに基づくもの）。アプリをダウンロードして身分証をアップロードしたら、わずか1〜2日程度で審査が完了して口座が開設できました。 口座開設の早さにも驚きましたが、さらに感動したã

1®ãŒVisaデビットカードの発行です。 アカウントさえあれば、Robinsonsグループのスーパー等に設置されている専用端末（キオスク）へ行くだけで、その日のうちにその場でカードが発行されます。 私はセブのITパークにある Robinsons に行ってきました。 キオスクの前にはちょうど専属スタッフが待機していて、操作やカード発行を親切に手伝ってくれました。（※ちなみに、アプリでの事前開設だけでなく、このキオスクでスタッフに手伝ってもらいながらその場で口座開設まで完結させることもできるようです） BPIでMastercardデビットを作ったときは、申請から受け取りまでに約2週間もかかり、しかも平日に直接支店へ取りに行かなければなりませんでした。「いつ届くのかわからない」というフィリピン特有のストレスに悩まされた記憶があるので、キオスクでその場（数分）で手に入るGoTyme の手軽さは感動モノでした。 Robinsonsポイ活 × å¹´3%金利で「フィリピンの生活費」をチリツモで浮かせる技術 GoTymeはさすがRobinsons（ロビンソン）系の銀行なだけあり、付属のVisaデビットカードを使ったポイント（Go Rewards）還元スピードが、フィリピンのデビットカードの中ではトップクラスに優秀です。 特にRobinsons系列で日常使いするとみるみるポイントが貯まっていく仕組みになっており、「今まで知らなかったこと」を鬼後悔しました……。 | 支払う場所 | 獲得ポイント | 実質還元ペース | | -------------------------------------------------------------------------------- | ----------------------- | ---------------------------------------------------- | | Robinsons系列(スーパー/デパート/Rose Pharmacy/Daiso/The Marketplace等) | 100ペソごとに 1pt | 日用品や食料品を買うと勝手に爆速で貯まる | | 一般のVisa加盟店(その他の店舗・オンライン・海外決済) | 500ペソごとに 1pt | 海外利用や通常のクレカ代わりに使うだけで地味に貯まる | | Cebu Pacific（航空券） | 80ペソごとに 1pt | フライト購入で一気に稼げる | | QRPh（QRコード決済） | 1,000ペソごとに 1pt | スマホ決済時にも付与 | フィリピン在住ならCebu Pacificで国内・国外問わず飛行機に乗る機会も多いですし、80ペソで1ptは馬鹿にならない金額です。 もう Metro Superマーケットには絶対行きません！！（笑） 今後は完全に買い出しをRobinsons系に絞り、GoTymeデビットカードでの支払いを日常化していこうと思います。 1ヶ月の食費・日用品代なんて余裕で1万ペソ以上使いますから、それだけで毎月最低100pt（100ペソ＝サンミゲルライト1本分以上）は勝手に浮く計算になります。 引き出し自由な普通預金「GoalSave」は年利3.0%！ GoTymeには、他の銀行にあるような「ペソの固定期間型（定期預金）」というメニューがありません。その代わり、普通預金なのに高金利な GoalSave という貯蓄機能が用意されています。 かつては年利5%や4%の時代もあったようですが、段階的に引き下げられ、現在は年利3.0%（※2026年現在）となっています。下がったとはいえ、BPIの0.0625%に比べれば素晴らしいです。 GoalSaveでは、アプリ内で最大25個まで目的別の 貯金箱（Goal） を作成できます。「生活費」「旅行資金」「緊急用」などに口座内で資金を分けられ、メインの口座（Everyday Account）との間でお金を 手数料なしでいつでも自由に出し入れできます。 利息は毎日「日割り」で計算され、毎月1日にまとめて口座へ振り込まれます。 1口あたりの金額は微々たるものに見えますが、放置しておくだけで入ってくる利息と、買い物で貯まるGo Rewardsポイントを合わせれば、毎月数百ペソ単位で確実に生活費を浮かせることができます！ 【検証・一次情報】GoTymeでCryptoは買える？GCashとの最強の使い分け ここで、改めてGCashとGoTyme Bankの「根本的な違い」を整理しておきましょう。 | 項目 | GoTyme Bank | GCash（Mynt） | | -------------------- | --------------------------------------- | -------------------------------------------- | | 金融ライセンス | Digital Bank（デジタル銀行） | EMI（電子マネー発行体） | | 位置づけ | 中央銀行（BSP）基準の「正真正銘の銀行」 | 決済や送金を担う「電子マネー・生活インフラ」 | | 外国人のCrypto取引 | 不可（審査厳格・機能制限中） | 可能（パートナー提携により取引可） | | 外国人の

1高金利貯蓄 | 可能（GoalSaveで年3.0%） | 不可（GSaveはフィリピン国籍限定） | フィリピンでは各種身分証（ID）のハードルから、未だに銀行口座を開設できない国民がたくさんいます。そうした中で、ライセンス体系は異なるものの、GCashを実質的な銀行代わりに使っている人が多く存在します。 この違いを知ったとき、私は気づきました。 フィリピン人向けの「金融救済措置」として機能しているGSaveや一部の銀行連携機能を、私のような外国人が使えないのも納得です。 だからこそGCashは全体的に審査や規約が柔軟で、外国人の私でも電話番号とパスポート等で「Full Verified（フル認証）」を完了でき、アプリ内で暗号資産（Crypto）の取引まで出来てしまいます（2026年現在）。 一方で、厳格なデジタル銀行である GoTyme Bank では、外国人は現在 Crypto（暗号資産）を購入することができません。 試しに、GoTymeアプリ内でCrypto機能を有効化しようとすると、以下の画面が表示されました。 \\"Your ID shows that you’re a foreign national, which makes you ineligible to activate a Crypto account right now.\\" （ご提示の身分証から外国籍であることが確認されたため、現時点では暗号資産アカウントを有効化する対象外となります。） \\"We know how tough this can be, so we’re working continuously to make our products more accessible.\\" （ご不便をおかけして大変心苦しく思っております。より多くの方に当社のサービスをご利用いただけるよう、改善に継続して取り組んでおります。） 一応、将来的に外国人にも開放できるよう裏でアップデートを進めているようですが、現時点では明確に「対象外」となっています。 💡 在住外国人の「最強の使い分け」結論 GoTyme Bank： 「日常のメイン口座」 として使用。生活費の決済（1%ポイント還元）と、余剰資金の放置運用（GoalSaveで年3%利息）に特化させる。 GCash： 「送金・サブ決済・Crypto用」 として使用。利用限度額が銀行に比べて低額なので、個人間送金（P2P）やCryptoの練習用として割り切って使う。 金融ライセンスのガチ度が違うからこそ、それぞれの強みを活ã

1‹ã—て使い分けるのが、フィリピンで暮らす外国人にとっての「最適解」ではないでしょうか？ まとめ：色々試行錯誤した結果、この2つの使い分けに落ち着いた 「フィリピンのメガバンクに預けていても金利はアリの涙レベル」という現実の中で、現地で口座開設やアプリの機能を色々試して検証してきました。 結果として、フィリピンで暮らす外国人はメインバンクを給料受け取り用などに据え置いて 「GoTyme Bank」 と 「GCash」 の2つを以下のように割り切って使い分けるのが一番賢くて安全、という結論に至りました。 GoTyme Bank： Robinsonsでの買い物（1%還元）とGoalSave（年3.0%利息）専用の「お得なメイン口座」 GCash： 街中でのQR決済やP2P送金、ちょっとした小銭のやり取り専用の「日常のサブ財布」 大げさな資産運用や暗号資産（Crypto）に手を出さなくても、普段の買い物と資金の置き場所を少し変えるだけで、毎月ジョリビーやサンミゲルビール数本分が全自動で浮いてきます。 フィリピン在住で「BPIにずっと放置している」「GCashしか使っていない」という方は、ぜひGoTymeの即日カード発行から試してみてください！ 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"digital-slave","title":"脱！デジタル・スレイブ（奴隷）だ","date":"2026-08-08","modifiedDate":null,"category":"mind-journey","categoryName":"マインドジャーニー","ogImage":"/thumbnail/mind-journey/post-5.webp","description":"今年こそ完璧な連休を過ごすはず。だった。しかし、スマホの無機質な通知音ひとつで「わたし」の1日はあっけなく溶けていく。通知を切ってもなお、脊髄反射で画面を開こうとする「指のファントム・アクション」の恐怖。脳を支配する強烈なアルゴリズムのトラップに気づいたとき、「わたし」が取った逆襲とは――。","tags":[],"body":"今年もホーリーウィークがやってきた。 昨年のホーリーウィークは最悪だった。 \\"わたし\\" は漫画「こち鶴」を全 201 å·» Amazon で衝動的にポチり、5日間もの大型連休を見事に溶かしてしまった。 そのさらに前の年は 48hours というドラマシリーズにどハマり、廃人のような生活を送ってしまった。 今年、\\"わたし\\" は同じ失敗をやらかさない。が、その前にやることがある。 見ての通り、日々の仕事に追われて（？）足の踏み場もない完璧なまでの \\"汚部屋\\" に仕上がっている。 \\"わたし\\" は文化的なネコだ。連休をネズミを追いかけて過ごすなんて絶対イヤだ。 今年の目標は、1日目に絶対部屋の片付けが終わるまではお出かけしないと固く誓った。 連休初日、意気込んだ朝を迎えたが… 時刻は朝10時。 張り切って起床したものの、さっそく床の上に散らかった洗濯物に気分が萎える。 1枚1枚洗濯物を拾い上げるたびに \\"わたし\\" はため息をつく。 こんな退屈なことしたくないなぁ。 ー ピコン。 あ、スマホの通知だ。なんだろう？ わぁ、YouTube の新着だ。\\"わたし\\" このチャンネル好きなんだよね〜。短いしちょっと見ちゃおうかな。 ー 12:00 ぶーちゃんがSNS投稿してる！連休家族で旅行行くって言ってたよね、今どこらへんにいるんだろ。 ー 15:00 ワンコ飼いたいなぁ…。やっぱマメ柴かわいいなぁ。 ー 19:00 ビッグ・ゴンがライブ配信してる！！！サイコーかよ！！ \\"わたし\\" はその後も無限にスクロールを続けた。 は！！！もう夜10時だ！！！ \\"わたし\\" は、貴重な連休の1日をスマホのスワイプで時間を溶かしてしまった。しかも長時間見てたから、目がショボショボする。 眼の前には、朝と大して変わらない洗濯ものが散乱した汚部屋。 目しんど。ちょっと今日は片付けムリだ。明日にしよう。 \\"わたし\\" はベッドに入った。一度寝て、明日気を取り直して片付けをしようと思った矢先。 ー ピコン。 枕元でスマホが鳴った。 しまった、条件反射でスマホを手に取ってしまった。 結局その夜、明け方までしょうもないショート動画を見続けてしまった。 翌日、目はショボショボ、肩や腰はガチガチ。この上なく不快な朝を迎えてしまった。 「わたし」はせっかくの連休をスマホのスクロールに捧げた 部屋を片付けるまでは家を出なã

1‹ã£ãŸã€‚それは、誓った通りだ。 けど、部屋も掃除できないまま、ダラダラと過ごしてしまった。しかも、くだらないスマホのスクロールで。 お部屋もまだ片付いていない。なんと情けない連休を今年も過ごしてしまったのだろう。 脊髄反射でスマホを見たくなる ちょっと前、友だちから本を借りた。早く返さなければいけないのに、なかなか読み進める気にならなかった。そこで、気分転換にカフェで読むことにした。 ー ブルルッ、ブルルッ カバンの中のスマホの振動を感じる。 今、\\"わたし\\" は読書に集中しているんだ。スマホなんて見てたまるか！ ー ブルルッ、ブルルッ ー ブルルッ、ブルルッ …うーん、ひょっとしたら重要なメッセージかも知れない…。 \\"わたし\\" はカバンからスマホを取り出した。 単なるSNSの通知じゃん。あ、ワンコの動画かわいいな…。 気がつけばカフェで1時間もスマホをスクロールしていた。コーヒーはすっかり冷めていた。 --- 今日はなぜか眠れない。時計の秒針の音で気が狂いそう。 \\"わたし\\" はスマホに手が伸びた。 これじゃ、パブロフの犬ならぬ、パブロフのネコじゃん！ 手持ち無沙汰になれば、脊髄反射でスマホを見たくなる自分がいる。そう考えるとなんか、スマホがやたら憎らしくなってきた。 この通知さえなければ！！！！！ その夜、 \\"わたし\\" は使ってないアプリを片っ端から削除した。アプリの通知もすべてオフにした。 通知を粛清。静かになったスマホだけど… それ以来、\\"わたし\\" のスマホは通知が届かなくなった。 寝るときも枕元にスマホを置くのをやめた。 それでも \\"わたし\\" は、未だにスマホのロックを解除しては気になるアプリを開いて面白い更新がないか確認したくなる。 は！！また条件反射で見そうになった。ガマン、ガマン…。 \\"わたし\\" はスマホの奴隷をいつ卒業できるのだろうか？ この世界の向こうの「私」の考察 普段何気なくやっているスマホの無限スクロール。 アンナ・レンブケ著『ドーパミン中毒』を読んで、中毒性があるのは、何もお酒や薬物だけではないと気づきました。 スマホの怖いところは手元で簡単に、脳内でドーパミン（快楽物質）を暴走させることができること。やる気や集中力を容赦なく削ぎ落としていきます。 「これはもう力技しかない！」そう思ったのでアプリの通知を片っ端から切りました。それでも無意識にロック解除しようとする私の指。すでにスクロール中毒の私は「指のファントム・アクション（幻の動作）」を未だに繰り返します。 巧妙なアルゴリズムで作られた依存から完全に抜け出すのは至難の業ですが、まずはこの脳の仕組を正しく知れたことが、デジタル奴隷（スレイブ）から抜け出す第一歩だと確信しています。","noindex":true},{"slug":"entry574","title":"シミュレーション仮説とは？脳の仕組みから学ぶ感情コントロール","date":"2026-08-07","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2026/entry574.webp","description":"シミュレーション仮説とは？世界の仕組ã

1¿ã‹ã‚‰è„³ã¨æ„Ÿæƒ…の正体を解き明かします。イライラやネガティブな感情を「システムアラート」と捉え、ノート（ジャーナリング）で頭をデフラグして気持ちを整理する、人生を軽やかに生きるための思考法。","tags":["摩耗しない人生","ライフスタイル","マインドフルネス"],"body":"この世界はマジでシミュレーションかもしれない ある日の夜、ノートPCをパタンと閉じた瞬間、ふとそう思いました。 私たちは、あの映画「マトリックス」のような仮想現実の世界を生きているのかもしれない――と。 本記事では、シミュレーション仮説をエンジニア視点で紐解きながら、感情を「システムアラート」と捉え、ノート（ジャーナリング）で脳をデフラグして人生のOSをアップデートする実践的な思考法をお伝えします。 この記事で分かること プログラマー視点だからこそ腹落ちする「シミュレーション仮説」のリアル イライラや恐怖の正体と「感情＝システムアラート」という新常識 ノート（ジャーナリング）で脳をデフラグし、人生のOSをアップデートする方法 シミュレーション仮説とは？エンジニアがノートPCを閉じた夜に気づいた「世界の裏側」 私たちが現実だと信じているこの世界（宇宙全体）は、高度なテクノロジーによって作られたコンピュータ・シミュレーション（仮想現実）に過ぎない これは2003年、イギリスの哲学者ニック・ボストロムが提唱した理論です。IT・テクノロジー界のトップで言えばイーロン・マスク、天体物理学者のニール・ドグラース・タイソンもこの理論を支持しています。 私はこの理論を2026年にYouTubeで知りました。頭ではなんとなく分かってて面白い理論だとは思ってました。ある日ベッドに入った瞬間でした。数分前にパソコンを閉じてまさにデスクトップモニターに表示されているフォルダのアイコンが目に入ったことを思い出しました。 フォルダもファイルもグラフィカル・ユーザー・インターフェース(GUI)が映し出した幻想にすぎないんだよね。正体は01パターンの電気信号に過ぎない。雑にまとめてしまえば、コンピュータ上では階層構造もなく、ファイルやフォルダにさえ境目もない。便宜上区別をしているだけなんだよな。 今までなんとなく知っていた『 シミュレーション仮説 』が腹落ちしました。 私とあなたの境目がどこにあるんだろうか？ 私たちの現実は、私たちの目から入ったものが脳に投影されているに過ぎない。私たちの見ている現実が本当だという証拠はどこにあるんだろうか？ 近代テクノロジーの成り立ち 元々、コンピュータは倉庫ほどの大きな計算機でした。弾道の軌道など高度で複雑な計算をするために私たちの代わりに作られました。 何発もミサイルを発射するのは、お金も労力もバカにならないからね。 第二次世界大戦中は、ナチス・ドイツが使った「⁠エニグマ」などの暗号を解くため、イギリスの天才数学者⁠アラン・チューリングらが中心となり、暗号解読機として「クリプト・ボンベ」が開発されました。 悲しいかな、多くのテクノロジーは戦争とともに発展してきましたが、忘れないでほしいのは 我々人間の代わり の仕事をさせるため に開発されてきたということです。私たちの代替品です。 だからこそ、そこで気づいたのです。 無意識か意識的かはさておき、 人はモデル（見本）なしにはこれらのテクノロジーを作れなかったのではないだろうか？ 私たちは意識世界をテクノロジーで体現しただけ？ 実は現代テクノロジーを分解したら、実は人間と面白いくらい酷似している コンピューター言語2進数パターンのみ、人間の遺伝子言語4進数パターンのみ インターネットの網目の構造は、脳のニューロンにそっくり 生成AIは人間同様嘘をつく 私たちの見えている世界も、感情も、すべての出会いや事象もひょっとしたらアルゴリズムの一種かもしれない、と捉えると合点がいきます。 脳と感情コントロール：イライラも恐怖も「ただの電気信号」に過ぎない 想像してみてください。 今日、カフェに入りました。食べようとしていたスイーツが売り切れです。あなたはどう思うでしょうか？ がっかりする ーーといった感情になるのが妥当なのではないでしょうか？ お目当てのスイーツが売り切れでがっかりしようが、運良く半額でラッキーと思おうが、もし感情も単なる01パターンの電気信号なのだとすれば、ネガティブもポジティブもなく、ただの「同じ電気信号」に過ぎません。 感情という電気信号をどう受け取るか 先ほどのスイーツの例でも、ひょっとしたら捉え方ひとつで視点や結果が変わるかもしれません。 他のスイーツを代わりに食べたら想像以上に美味しくて満

1足した もしくは今はやはりダイエットしないといけないからちょうどよかった 捉え方ひとつで視点や結果が変わるかもしれません。 一体「悲しい」「腹が立つ」と描画しているカラクリはなんなんでしょうか？ 私は、物事をどう受け止めるかは自分の過去の経験や固定観念に起因していると考えてます。 感情は一種のアラート（警告）という仮説。 もし私というOSがあり、その信号（感情）がネガティブであれば、何かのアプリにパッチを当ててアップデートしたり、もしくは致命的であればアンインストールすべき警告（アラート）であると捉えられないでしょうか？ シミュレーション仮説とITのテクノロジーを照らし合わせると、面白いくらい腹落ちしていきます。 感情整理ノートで脳をデフラグ：心のOSをアップデートする方法 湧き上がる感情にはある程度パターンがあります。自分の内面を観察・分析していくと、その原因は大抵、過去の経験や固定観念にぶち当たります。 これはセブあるあるなんですがーー。 理不尽に隣の部屋と間違えられて水道を止められた 支払期限でもないのに水道を止められた 突然、停電 私は先日の朝、突然電気が使えなくなり、すっかり「またやりやがったな！！！」という先入観でロビーまで降りました。 受付には「未払があるから止められたのでは？電気会社のオフィスまで行け」とあしらわれました。電気会社のオフィスに行くのであれば、午前中の予定をすべて変えなければならない、と頭の中でぐるぐると思考が巡りました。 ところが、部屋に戻った瞬間気づきました。なんのこっちゃない、コンセントが抜けかけてただけでした。 おそらく、足がプラグに軽く当たって抜けかけただけ。お恥ずかしながら、経験からの思い込みで腹を立てかけた典型です。 もし、私がこのように早とちりしなければ、予定を変える必要もありませんでした。 未処理の感情が引き起こすこと 先程の例は早急に原因究明ができたから良かったのですが、すぐに解決できずに残った感情があるとどうなるのでしょうか？ この未処理の感情を人は トラウマ と呼ぶのではないでしょうか？ 気になることがあったり、モヤモヤしていれば仕事が手につかなかったりします。 こういう未消化な感情は放置すると、メモリリークを起こすのではないでしょうか？ 深い長期の悲しみや苦しみは、時に心や体を蝕みます。 このメモリリークは仕事の効率だけでなく、さらには人生の質も明らかに下げるのではないでしょうか？ なんとなく人生がうまく行かない、いつも人間関係もうまく続けられない。原因は実はこの未処理の感情ではないかと私は感じています。 ノートに書き出して「ストレージの空き」を作る 私にはジャーナリング習慣があります。ジャーナリングは、日本語訳で 日記 という意味です。 私は特にネガティブな感情を積極的に書き出すようにしています。 毎日書くわけではなく、2〜3行で終わる日もあれば、3ページ丸々びっしり書くこともあります。 色んなやり方を提唱している方も多いですが、私は思いつくままにノートに吐き出す。文法も誤字も無視。それだけです。 最初はネガティブな感情を、時に誰かに対する不満を文字に起こしてまで書くことに抵抗がありました。根気強く続けていると、ある日、ふと自分の感情に対して客観視が始まりました。 おかげさまで、メタ認知力がずいぶんと上がり「自分の湧き起こる感情を他人事のように観察する」ことが基本になってきました。 意外と自分の感情の直視って頭で理解できていても、最初はまあ苦痛でã

1™ç¬‘。 怒りや悲しみの原因が分かるようになったら、たとえ過去のことでもノートに書き出す。観察して最終的に認めたら、たとえるなら、その感情は小さく分解されて行き、最終的には消えてしまいます。もちろん事柄は覚えてます。だけど、思い出してもその時感じていた感情はもうなくなっています。 OSと一緒で、感情を手放せば、意識もストレージが空きます。メモリリークも減るので効率的になります。 ストレージが空くと、新しい良いアプリがインストールできたり、新しいファイルを格納できるようになります。 古くてアルゴリズムが悪い感情をアンインストールすることで、自分というOSを、最新状態へアップデートできるのではないでしょうか。 人・物・事。すべては驚くほど完璧なタイミングで現れ、完璧なタイミングで去る 現実がアルゴリズムだとすれば、感情は警告（アラート）ではないかという思考へ行き着き、一つの真理にたどり着きました。 人・物・事。すべては驚くほど完璧なタイミングで現れ、完璧なタイミングで去る 昨年から、「この人苦手だな、絶対会いたくないな」と思っている人ほど運悪くよく出くわすようになりました。そういうことほど頻発します。 そもそも、私はその人をなぜ苦手なのだろうか？ この苦手な人と頻繁に出会う理由はなんだろうか？ 内観が進んでくると、そういう考えにシフトしていきます。 一見嫌な出来事であっても、自分に学びが必要なタイミングであれば、人・物・事が現れる。そして学びが終わったら去っていく。 たとえば、仲良くしていた人と突然つるまなくなる。ーーなんてこともあります。それは学びが終わったサインã

1§ã¯ãªã„でしょうか？ 突然、小さな幸せが舞い込んでくる 最近は、空きストレージを作るために「執着を手放すこと」や「自分から人にギブすること（与えること）」を意識しています。 物質的なことだけではなく、今まで付き合いたくなかった人への偏見を手放したり、昔から大切にしていた友だちをITの知識でサポートしたり。 最近はなぜか、お気に入りのバーに行くと6割くらいの確率で隣のおじさんに奢ってもらえます（笑）。 友だちから美味しい牛鍋と大好物のハイボール（ブラックレーベル）をご馳走されたり、ワインパーティに誘われたり、古い知り合いから仕事の相談があり依頼されたり。 昨日もバーのママに、テキーラごちそうになりました笑 意識も空きストレージがある方が、良い事が舞い込んできやすいのではないでしょうか？ 自分の人生を軽やかにプレイしよう 人生というアルゴリズムであれば、あらかじめ用意された課題はクリアしないといけないのではないか？ 妄想の域を出ませんが、似たトラブルがループするのは、単に自分がそこから何も学び取っていないだけ。だから再チャレンジさせられてるのではないだろうか？ 人生は壮大なゲームのようなもので、イベント（課題）が発生したらクリアするまで同じようなイベントが発生し続ける。 何かしら感情を感じたら、それは新しいイベントが発生したヒントなのでクリアするチャンス到来です。 特にネガティブな感情の場合は、心中で「あ、イベント発生や！」くらいに思ってどうやったら攻略できるか試行錯誤するくらいがちょうどよいのかもしれません。 デフラグや不要なアプリをアンインストールして、ストレージを空ければ必要なものが入ってくる。同じ容量のアプリでもアルゴリズムが悪ければ容量を圧迫したりしますが、良質のものを手に入れれば圧迫しません。 メモリリークするものを手放していけば、自分というOSもアップデートされていくのかもしれませんね。 デスクトップモニターに表示されているフォルダのアイコンのおかげで、シミュレーション仮説が腹落ちし、さらにプログラマーならではの独自の拡張した持論を展開させていただきました。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"osiris-meeting","title":"心の中に住む裁判官","date":"2026-08-01","modifiedDate":null,"category":"mind-journey","categoryName":"マインドジャーニー","ogImage":"/thumbnail/mind-journey/post-4.webp","description":"ダイエットをサボる幼馴染の一言から始まった心のざわつき。モヤモヤを解き明かすために訪れた離島で「わたし」を待っていたのは、無言の裁判官・オシリスくんだった。隣にいながら届くLINEと、遠い過去のメッセージ。ふたつの点が繋がったとき、「わたし」が気づいたオシリスくんの正体とは――。","tags":[],"body":"幼馴染のぶーちゃん。ローンを組んでダイエットを始めたのに、ちっとも痩せない。 一人じゃ運動も続かないと言うから、今日は付き合うことにした。 はぁ、はぁ。も、もう、今日はこのくらいでやめない…？ あー、また始まった。ぶーちゃんの弱音。 は？まだ10分しか走ってないよ！ メリーちゃんみたいにモテるようになりたいんでしょ！？ メリーちゃんは \\"わたし\\" たちの幼馴染。かわいくてモテモテでいつも誰かに貢がせて派手に暮らしている。 ぶーちゃんはうつむいて、弱々しい声で言った。 … あたし、運動音痴だし10分も走ったら死んじゃうよ。 今日だってまだ4食しか食べてないし……。以前よりはよく頑張ってるもん…。 ぶーちゃんがくどくどと言い訳を始めたã€

1‚イライラが募った \\"わたし\\" は、 はぁ！？ほんとに痩せる気あるの！？ 思わず声を荒げてしまった。大きな声を出したあと、しまった、と後悔した。 …\\"ストイック\\" すぎてついていけないよ。 みんながみんな、自分に厳しくできるわけじゃない！！！ ぶーちゃんが堪らず言い返してきた。彼女は涙ぐんで、その場を立ち去ってしまった。 （……なんで \\"わたし\\" 、ブチギレてんだろう……？） ぶーちゃんが甘えてるから許せないのか。 （……なんで \\"わたし\\" は、他人の甘えがこんなにも許せないのだろうか。） 夕日の中、ぽつんと取り残された。胸の奥がざわついた。 モヤモヤの答えを探しに南の離島へ 週末、\\"わたし\\" は離島へ飛んだ。モヤモヤすると \\"わたし\\" はこの離島へ来たくなる。ここにいると、何か見つかりそうな気がするから。 \\"わたし\\" だって甘えん坊だし、もっと厳しくならなきゃ、っていつも思ってるんだよã€

1‚ そんなことを考えながら、\\"わたし\\" はいつものように浜辺へ向かった。 しばらく浜辺を歩いてると、\\"わたし\\" はなにかに足を引っ掛けてすっ転んだ。 砂に半分埋もれていたのは、小さなモコモコしたものだった。 あ！！！メリーちゃん！ それは幼馴染のメリーちゃんそっくりなお人形だった。 いつも自分に甘いメリーちゃん。この人形のせいで \\"わたし\\" は今さっき派手にすっ転んでしまった。 メリーちゃんなんて！！！ 腹がたった \\"わたし\\" は人形を拾い上げて、地面に投げつけようとした。しばらく振り上げた人形を持ったまま固まっていたが、結局投げつけるのをやめ、人形の砂を払った。 ――いいな。 \\"わたし\\" だって、ラクして生きていきたいよ……。 ぼそっとつぶやいた瞬間、後ろから怒号のような音とともに何かが迫ってくるのを感じた。 振り向くと目の前に、りりしい太眉毛のおっさんが無表情で仁王立ちしていた。 うわっ、オシリスくん！ ⋯⋯⋯ オシリスくんは無言のまま、「わたし」の手からメリーちゃん人形を取り上げる。 そして、海に向かって人形を渾身の力で遠投した。 あーーー！なんてことを！！！！メリーちゃんが！！！！ 叫ぶ \\"わたし\\" を尻目に、突如背中を向け、なにやらコソコソしている。 その瞬間、スマホがピコン、と鳴った。 （すぐ隣にいるのに、なぜ、LINE………。） 堅く結んだ口は緩みそうにないので、渋々そのままLINEでやり取りすることにした。 ……え？ 回想：弱かった「わたし」が変わったきっかけ まだ、20代の時だった。常識もまだ身についていない甘えん坊の \\"わたし\\"。 社会人になった初出社の日。忘れもしない、あの日。 \\"わたし\\" は「コピー機で資料を印刷するだけ」のすごく簡単な任務を任された。 目の前にある、当時まだ見たこともないハイテク機器に圧倒された。 \\"わたし\\" は恥ずかしくて、コピー機の使い方を聞くこともできずに、コピー機の前を右往左往していた。 それを見たとある先輩が、「バカすぎるwww使えない新入社員」とみんなの前で笑いものにした。 生まれて初めて人前でコケにされた。 \\"わたし\\" はただただ恥ずかしかった。「使えない新入社員」と言われて悔しかった。 その日は帰って、ご飯も食べずにベッドに潜り込んだ。 日中の悔しさが込み上げてきて、一人声を殺して泣いた。 ーーーーピコン。 \\"わたし\\" は携帯を確認した。 （……誰だろう。） 差出人は不明。でも、\\"わたし\\" はなんとなく返信した。 翌日仕事が終わったあと、本屋に直行した。ビジネス本やパソコンスキルの本を数冊買った。 （……悔しい。見返してやりたい。） それからというもの、\\"わたし\\" はバカにした先輩に毎日笑顔で挨拶した。 結局、仕事で必要な難しい資格も合格し、会社でも一目置かれる存在になった。 \\"わたし\\" を、バカにする人はだれもいなくなった。 「わたし」の心が傷つかないように守っている『裁判官』 \\"わたし\\" は思い出した。 そうか、あの時の差出人不明のメッセージはオシリスくんだったんだ。 あれからというもの、\\"わたし\\" は自分の甘えを封印したんだった。 ⋯⋯⋯ オシリスくんは無言のままだった。 オシリスくんは、\\"わたし\\" の心を守るために、\\"わたし\\" を甘えないようにいつも見守ってくれてたんだね。 ⋯⋯⋯ \\"わたし\\" は温かい気持ちになり、思わず『ありがとう』と言いたかったが飲み込んだ。 代わりに微笑みなã

1Œã‚‰è¨€ã£ãŸã€‚ ⋯⋯高級玉露のお茶、飲む？ このバカンスから帰ったら、\\"わたし\\" はメリーちゃんやぶーちゃんを寛大な目で見れるかもしれない。 この世界の向こうの「私」の考察 誰かの甘えやラクな生き方に強くイライラしてしまうとき、それは「相手が間違っているから」ではなく、過去に自分が生き残るために血の涙を流して捨てるしかなかった部分（甘えや依存）だったからかもしれません。 社会で傷つき、心無い言葉でバカにされたり、人生は生きていくだけで過酷なことの連続です。二度と自分を傷つけないために、無意識の底で『裁判官』があなたを守ってくれているのではないでしょうか？ 「もっと厳しくならなきゃ」というストイックさや他者への過剰なアラートを発する『裁判官』は、あの \\"わたし\\" の孤独な夜のように、自分が生き残るために自ら生み出したもの。そこには不器用で、無口で、最高に愛おしい守護者が心に住んでいたんだ――と気づいたお話です。","noindex":true},{"slug":"entry573","title":"脳疲労と選択疲労の対策｜無駄を削る実験で自分軸を取り戻した体験記","date":"2026-07-31","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2026/entry573.webp","description":"理由のない疲労感の正体は「選択疲労」だった？服・献立・人間関係の無駄を極限まで削る実験と、AIやSNS依存の罠から抜け出す考え方を実体験ベースで解説。情報ノイズを削ぎ落とした静寂の中で自分の本音（心の声）を聞き、自分軸を取り戻すヒントをお届けします。","tags":["摩耗しない人生","ライフスタイル","マインドフルネス"],"body":"なんだか毎日、理由もなく疲れている 休日なのに、何もしていないのに頭が重い こんな正体不明の疲れを感じてませんか？ それ、単に脳のメモリが 選択 によって食いつぶされているだけかも。 そこで、 服、献立、人間関係の無駄な選択を極限まで削る実験とどうなったか 現在避けるのが難しいAI・SNS依存のメカニズムと使う上の心構え 自分の経験ベースで脳疲労を減らしたお話をシェアします。 脳疲労と情報過多が引き起こす「思考停止」の正体と原因 ご存知ですか？ 人は1日に 約3万5,000回の選択 をしている これは、ケンブリッジ大学の研究などでもよく引き出される数値です。 今日はラーメンにしようか、それとも定食か 服は白にするか、黒にするか この仕事を続けるべきか、転職すべきか これらは大小にかかわらず、私たちが意識して行う選択です。ですが、日々の生活には私たちが自覚すらない「 無意識の選択 」も膨大に含まれています。 朝起きて、右足と左足のどちらから踏み出すか スマホの通知を今見るか、後で見るか 画面をスクロールするか、ここで止めるか 朝起きてから夜寝るまで、脳は絶え間なく選択と決断を繰り返しています。 しかし、脳のリソース（エネルギー）には限りがあります。こうした一見どうでもいい選択にまでエネルギーを食いつぶされてしまうから、私たちは疲れてしまうのです。 これを専門用語では 選択疲労 と呼ぶそうです。無意識の選択に脳のメモリを奪われ、本当に大切な判断やクリエイティブな発想に回すエネルギーすら使い果たしてしまう。 現代人は、知らず知らずのうちに、とてももったいないことをしているのです。 アルゴリズムのノイズがさらに脳のメモリを食い尽くす 突然ですが、想像してみてください。200年前にタイムスリップしてみましょう。 当時の暮らしには、まばゆい蛍光灯も街灯すらありません。日の出とともに活動を始め、日の入りとともに活動をやめて眠りにつきます。 現代と比べれば、選択の回数も自ずと減ります。スマホもインターネットもなく、夜になれば囲炉裏（いろり）やロウソクの火を眺め、風の音を聞くくらいしかできない。せいぜい、薄明かりの中で読書をしたり文章を書いたりする程度だったはずです。 だからこそ昔の人々は、自分の心の声を聞き、純度の高い選択ができたのではないでしょうか。 しかし現在はどうでしょうか？ イãƒ

1³ã‚¿ãƒ¼ãƒãƒƒãƒˆã€ã‚¹ãƒžãƒ›ã€SNS。私たちは息を吸うように自動的に情報の濁流へ飲み込まれ、自分の中にある 純粋なリプライ（心の声） が聞こえなくなっているのではないでしょうか。 服・献立・人間関係の「無駄な選択」を極限まで削る実験と効果 私は最近、理由のわからない 謎の疲れ にずっと疑問を感じていました。 仕事が終わったあとに楽しみにしていたはずのYouTubeで、見たい動画が見つからず、結局30分も画面をスクロールして終わってしまう……なんてこともありました。 私のその疑問に対してたどり着いた答えです。 私は、 選ぶこと自体に疲れている のではないか？ そこで 選択をしない実験 を行うことにしてみました。 どうでもいい選択をやめる。服や食事のパターン化 手始めに、毎日の献立を考えるのを完全にやめました。 よくよく考えると、リスだってどんぐりなどの必要な栄養のあるナッツ類くらいしか食べないじゃないですか。なんで人間だけが、毎日バリエーション豊かな献立を考えなã

1ã‚ƒã„けないんだろうか。 今の私の食事は、毎日サラダと、肉類（タンパク質）を入れた野菜の春雨かライスヌードルのスープです。調理に10分もかからないし、使う食器もお椀とサラダボウルのたった2個だけ。 洋服も、クローゼットで最初に目に入ったものを着るようにしています。シャツなども同じデザインで色違いを2つ持っておけば、それだけでバリエーション豊富に着ているように見えます。 他人の前に出る時に失礼でなければ、それで充分なのです。 世間の押し付け価値観はガン無視 スピリチュアルや自己啓発の世界ではよくこんな言葉を聞きます。 部屋を自分で片付けるのは心の掃除（修行）と同じ 家をカフェみたいにおしゃれにして、丁寧な暮らしをしよう 知らん。私の価値観とお前の価値観は違う。 やりたくない時はやらなくていいんです。キッチンシンクに食器が溜まっていようが、床に髪の毛が多少落ちていようが、死ぬことはありません。 とはいえ、私も部屋が汚いとストレスになります。なので、2週間に一度、家事代行（清掃サービス）を入れています。 自分で掃除を始めれば、どこから手を付けるか、どう片付けるかといった微細な選択と決断が膨大に発生します。ですが、お金で外注してしまえば、その決断すらゼロにできる。 「バリエーション豊かな手料理が大事」と言われようが、私は服も献立もパターン化しています。品数が少なければ、自ずと洗う食器の数も減り、片付けの決断も減るからです。 押し付けられた価値観からの選択を減らすことで、脳のリソースが自ずと空きます。 「即レス」も社会が作った強迫観念と割り切る 私は昔から、基本的に即レスをしません。 世間では「即レス＝仕事ができる人」などと言われますが、冷静に考えてみてください。 それって「 相手にすぐ返信してほしい人 」の都合と価値観ですよね？ 悲しいかな、これは現代社会が作り出したただの強迫観念だと私は思っています。 いま返信する準備ができていないなら、返さなくていい。 いま目の前で集中すべき仕事や自分のタスクがあるなら、後回しでいい。 他人の都合に自分の脳のメモリを消費させないことが、自分軸を取り戻すための第一歩です。 AI依存とSNSの罠｜「借りものの答え」に思考を外注していないか？ そもそも 選択疲労 そのものは、決して悪ではないと思うのです。 たとえば、筋トレをすれば筋肉痛（筋疲労）が起きますよね？ 自分の頭で考え、何かを決断すれば、脳だって同じように疲労します。選択疲労とは、私たちが自分の人生を自分の足で歩み、決断力を鍛えている証拠ではないでしょうか。 服や献立のような「どうでもいい小事」で無駄に脳の筋力を消費するのをやめるのは大正解です。 ですが、すべての選択疲労（＝決断すること）まで避けていいのかというと、それは別問題です。 そこでみなさんに質問があります。 人は選択疲労を避けたいがために、SNSの意見に流され、生成AIの答えに依存してしまっていませんか？ 最近、こんなニュースがありました。 読売ジャイアンツの阿部慎之助監督（当時）の長女が、ChatGPTから出されたアドバイスをそのまま真に受けて行動した結果、警察が介入するほどのトラブルを起こし、最終的に監督辞任劇にまで発展 （参考：https://diamond.jp/articles/-/391489 ） アルゴリズムが出した答えを鵜呑みにした結末です。 生成AIは超簡略化して説明してしまえば、「 確率で答えを出す超多面のサイコロ 」に過ぎません。 LLM（大規模言語モデル）という膨大なテキストデータを元に深層学習（ディープラーニング）させて作られてはいますが、本質的には人間が入力したプロンプト（命令）に対して、高速でサイコロを振り、最も確率の高い文字列を弾き出しているだけです。 でã

1™ãŒã€æœ€è¿‘、身近な人までもAIの生成された文章をあまりにも鵜呑みにします。恋愛や就職、結婚に至るまで人生の大きな決断ですら、です。 生成AIのアルゴリズムは「 私たちが欲しい答え 」を心地よく生成してくれます。 そして、この「心地よさ」はSNSも似たようなもの。 SNSの「いいね」やインプレッションの数字は、手にすると自分の自己肯定感や考えの正しさが上がったような、一種の 全能感 を与えてくれます。 他人の反応に踊らされているだけなのに、自分の価値や実力が上がったと錯覚してしまう。 私自身もAIやSNSを使いながら、思考を丸投げし自分の能力を水増ししているだけなのに、 その全能感に満足している かもしれないという違和感に気づくことがあります。 AI依存・SNS依存を防ぐために私たちができる対策 AIに得意なことは調査、分析、生成、分類などです。しかも我々と違って先入観もありません。 膨大な量を学習しているため、「 外付けハードディスク 」としては非常に優秀ですし、現代社会では欠かせないツールであることも事実です。 だからこそ、私たちは割り切る必要があります。 AIは専門知識やリサーチを担当する「優秀な秘書」として使い倒す。 それ以上でもそれ以下でもありません。どれだけ優秀な秘書であっても、最後の決断と責任まで委ねてはいけない。そこだけは忘れてはいけないと思っています。 自分からのリプライ（本音・心の声）を受け取る「静寂の作り方」 スティーブ・ジョブズがいつも同じ黒のタートルネックとジーンズを着ていたのは、「選択コスト」を減らすためだった とても有名な話です。 ですが、実際に日常で取り入れている人がどれくらいいるでしょうか。 頭で知識として知っていることと、自分の体験として腹落ちしていることは全く別物です。私自身も心から理解するまでに時間がかかりました。 情報や選択肢に流されず、自分の中にある 純粋なリプライ（本音） を受け取れるようになったのは、半年以上続けてきた 内観習慣 のおかげです。 通知を切る 今ここに集中するため、SNSを含め、不要な通知はすべてオフにする。スマホに振り回されるのをやめ、必要な時に自分のタイミングでまとめて確認するようにします。 散歩 歩くことだけに集中して、脳のメモリを強制クリアし、頭の中に静寂を作ります。 ジャーナリング 頭の中にある本音や違和感を、善悪の判断を挟まずにそのまま言語化し、ノートへ吐き出します。 体や人付き合いに疲れている時は無理せず家でゆっくり休む 答えがない、返信に準備ができていない時には無理に返信しない コツは善悪や体裁を考えず、心と体の声を聞くこと。 こういった、かつては出来ていなかった当たり前の選択が、当たり前のようにできるようになってきました。 脳疲労を極限まで減らして聞こえてくる「私たちの心の声」 極限まで選択疲労を減らす理由は、決してサボるためではありません。 私たちは仕事、クリエイティブ、人生の節目など、日々たくさんの重要なタスクや局面と向き合っています。 そうした本当に大切な選択を迫られたとき、エネルギーの枯渇した脳の状態で、はたして 全集中 して決断できるのでしょうか？ 私の好きな漫画『進撃の巨人』に登場するケニー・アッカーマン（切り裂きケニー）は、最後にこんな言葉を残しています。 みんな何かの奴隷だった……酒だったり、女だったり、神様だったり……王様、夢、子ども、力……みんな何かに酔っ払ってねぇと、やってられなかったんだな…… 現代の世界では、ケニーの言う「酒や神様」は、「SNSの通知」「AIの回答」「無限スクロール」「誰かが作った \\"丁寧な暮らし\\" というマーケティング」に置き換わっただけなのだと思います。 アルゴリズムが与える手軽な麻薬（SNS・AI依存）に酔わされるのではなく、「 自分の意思で何にエネルギーを注ぐか 」を自分で選ぶ。 衣・食・サブスクの無駄な選択肢を削ぎ落とし、脳のメモリを空ける SNSやAIという「外からのリプライ」を遮断する 「自分自身からの純粋なリプライ」に耳を澄ませること そんなことの繰り返しで、何かに酔っ払ったがゆえの思考停止から抜け出し、正気を取り戻すことができるのではないかと最近感じています。 静寂の中で、自分からのリプライを聞き、自分の人生のハンドルを握り直すこと。それが 選択疲労 と向き合った先にè¦

1‹ã¤ã‘た、私なりの結論です。 この記事が、脳疲労に悩むみなさんの日々の生活の一助となれば幸いです。 最後までお読みいただき感謝です。ありがとうございました。","noindex":false},{"slug":"demon-of-comparison","title":"途切れることのない比較の悪魔のささやき","date":"2026-07-25","modifiedDate":null,"category":"mind-journey","categoryName":"マインドジャーニー","ogImage":"/thumbnail/mind-journey/post-3.webp","description":"幼馴染とのランチ会の帰り道、生々しい格差にモヤモヤする「わたし」。脳内で他人のアラ探しを始めた瞬間に現れたのは、おでこに居座る不気味な「比較の悪魔」だった。人の優越感と劣等感をエサに、農耕の時代から人間に取り憑き続けているという悪魔。終わりのない地獄のループに「わたし」は――。","tags":[],"body":"今日は定例の幼馴染とのランチ会だ。 幼馴染とは、「あらまあモール」の新しくできた「チャクラ・ダイニング」というハンバーグ屋さんで落ち合った。 うんまーーい！！！ \\"わたし\\" はお目当てのハンバーグに舌鼓を打った。 あ、メリーちゃん、ひょっとしてそれ？！ そう、プランタンの限定デザインのカバンよ。かわいいでしょ！二軍からのプレゼントよ♥ （ん？？？⋯⋯⋯に、二軍？？？） さらにお小遣いもらっちゃってさ。みんなが貢いでくれるからお金余っちゃって。 メリーちゃんの自慢話は止まらなかった。 だから先日おパリに行ってきたの。最高級ホテルと5つ星レストラン、最高だったわ〜。 庶民の \\"わたし\\" とは、次元の違う自慢のオンパレード。 熱々のハンバーグを頬張りながら愛想笑いをするのが精一杯だった。 食事会は解散し、\\"わたし\\" はぶーちゃんをバスターミナルまで見送ってあげることにした。 バスを待っている時、ふと、ぶーちゃんはメリーちゃんのお土産を \\"わたし\\" に差し出した。 これ、⋯⋯食べないからあげるよ。 え？⋯⋯⋯⋯これぶーちゃんの好きなハムじゃん。 メリーちゃんの話がキラキラしすぎて言えなかったんだけど、私明日からダイエット始める。 この体型じゃお嫁に行くどころか、彼氏もできないから。 体型なんて気にしちゃダメだよ！！！人は最後は性格だから。 ぶーちゃんは少し黙った。そしてゆっくりと話しはじめた。 もうダイエットプラン、契約したの。 私の安月給じゃすぐに払えないけど、50万ペソ分割で。しんどいけど痩せなきゃ。私もメリーちゃんみたいに、一生に一度でいいからチヤホヤされたい。 ぶーちゃんは暗い顔をして、バスに乗り込んだ。 途切れることのないささやき ハンバーグは美味しかった。けど、なんだか後味の悪い帰り道だった。 \\"わたし\\" はトボトボと家に向かった。足取りは重く、近いはずの家がとても遠く感じた。 メリーちゃんは色んな男に色目を使ってお金やブランドバッグ貢がせてるよね。人の財布当てにして生きてて恥ずかしくないのかな？努力もせずに。世の中は不公平だ。 うん、そうだ。そのとおりだ。\\"わたし\\" はこんなに朝から晩まで働いてるのに、安月給。毎月の生活が精一杯で、貯金すらできない。 ぶーちゃん、50万ペソのローンまで組んでダイエットして、なんか惨めだよね。食べなきゃいいのに。はなから太らなきゃいいのに。 \\"わたし\\" なんてお金かけなくても体型も維持してる。ぶーちゃんよりマシだ。 ⋯⋯⋯ん？この声さっきからどこから聞こえてきてるんだ？ \\"わたし\\" は上を見上げた。ヘンテコな小さな生き物がわたしの額の上に座ってた。 誰、あんた？！！ 比較の悪魔との出会い おでこの上にいたのは、黒い煙のような影のようなモクモクしたもの。不気味なひとつ目のついた生物（？）だった。 ヒャハハ、よくオレの存在に気づいたね。 オレは \\"比較の悪魔\\" だよã€

1‚ヒヒッ なぜか \\"わたし\\" はこの悪魔を知っている気がした。甲高い声、イヤミな喋り方、仕草……全部受け付けない嫌悪感があるのに。 キッモ⋯⋯⋯⋯⋯⋯。見た目も声も全部キモい。 あ、本音が声に出てしまった。 まぁ、そんな事言うなよぉ〜。オレは 1 万年前からてめえらに取り憑いてるんだぜ。ヒヒッ。 ほとんどの人がオレの同族に取り憑かれてるぜ〜〜〜。大抵の人はオレの存在に気づかずに死んでいくんだぜ。 比較の悪魔は \\"わたし\\" が聞いてもないのに、べらべらとおしゃべりをはじめた。 比較の悪魔が生まれた理由（わけ） 比較の悪魔は人が誰かと自分を比べるようになって生まれた。人類が農耕を始めた頃には、もういたらしい。 農耕が始まって食料を含めた財産を溜め込むようになって、階級が生まれ、お金が生まれ、人には \\"格差\\" が生まれるようになった。 より富を持つものが上の階層へ、持たないものは下の階層で生きるようになった。 産業革命のあと、人々の間ではさらに格差が大きくなったという。 てめぇもさっき、メリーちゃんの話を聞きながら劣等感を感じたあと、ぶーちゃんと比べて優越感を感じて安心しただろ。 人は常に比較地獄にいるんだ。劣等感と優越感、オレはその \\"エネルギー\\" を食って生きてるんだ。 確かに、\\"わたし\\" がメリーちゃんから感じた強烈な劣等感。ぶーちゃんがあまりにも、可哀想を通り過ぎて惨めで、優越感で劣等感が打ち消された。 \\"わたし\\" は「自分のほうが上」「自分のほうが下」と比較を繰り返していることに気づいてなかった。 ちょっと、恥ずかしくなった。そして、こんな悪魔に取り憑かれてたと思うとなんだか腹立たしかった。 もうウザい！あっち行って！！ \\"わたし\\" は、自分と誰かと比べて一喜一憂したくない。 \\"わたし\\" は手で追い払おうとした。 おぉーっと、危ない。またな。 それはすーっと消えてしまった。 「わたし」は気がつけば常に比較のループにいた \\"わたし\\" は気づいてしまった。 目に映るもの、耳に入るもの、色んなものといつも自分を比較していることを。無意識のうちに、しかもずーっと繰り返している。 \\"わたし\\" が生きてきた中で、一体何度となく誰かと自分を比べてきただろうか？ あの人はいつも余裕ぶって自慢ばっか。なんかイライラする なんでこの人はこんなことすらできないの？ \\"わたし\\" ならすぐできるのに 毎日こんなことが頭の中をループしている。 まるで優越感と劣等感のシーソーにずっと乗っかって、上がったり下がったりしているみたいだ。 比較の悪魔を追い出そうとする日々 それから、\\"わたし\\" と \\"比較の悪魔\\" の格闘の日々が始まった。 たとえばこんな時。家でふと、何気なくSNSを見ていると、タイムラインは案の定、自慢で溢れかえっている。 メリーちゃんの投稿っていつもイヤミだよね。タイムラインはブランドや高級レストランの投稿ばっか。自分の働いた金じゃないくせにさ。 はー、男のことをATMだと思ってるんだろうな。 ………でた、比較の悪魔。 バンビちゃんはスタイル自慢ばっか。いいねが欲しいだけでしょ、どうせ。こんなハレンチな格好して公然の場に晒して頭おかしいんじゃないの？ あっち行けーー！ 追い払っては現れ、追い払っては現れる。 この日々の小さな格闘が、私の新しい日課になった。 この世界の向こうの「私」の考察 ジャーナリングと散歩を続けているうちに、普æ®

1µã®ç”Ÿæ´»ã§ã‚‚自分の感情を観察し、『内観』の習慣が付きました。 私が『内観』中、特に直視して地味にしんどいなぁと思うのが、自分の内側でふとした『比較地獄』にいることに気づく瞬間です。 私たちは生まれてからずっと、成績表、大学受験、就職してからも評価制度など、常に「格差」を突きつけられ、比較にさらされます。私たちは、自ずと比較思考にならざるを得ない世界を生きています。なぜならば、農耕が始まって以来、食料や財産を人よりたくさん持って優位になり、格差の上位に立つことは、いわゆる生存戦略。生き残るために必要だったからと考察します。 私の結論は、現代のこの世界に生きている限り比較地獄からは抜け出るのは限りなく不可能だと考えています。 ゼロには出来ないけど、限りなく減らせると信じています。","noindex":true},{"slug":"entry572","title":"【感情を否定しない】湧き上がる負の感情を「シャドウ」として受け入れるまでの気づき","date":"2026-07-24","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2026/entry572.webp","description":"「頭では許せたはずなのに、湧き上がる黒い感情…」その正体は、自分を守るために封印した「シャドウ（影）」かもしれません。100年前の心理学と現代の脳科学の視点から感情のメカニズムを解き明かし、内観を通じて心の奥の「未処理の感情」を物理的に手放す方法。","tags":["マインドフルネス","摩耗しない人生","ライフスタイル"],"body":"突然ですが…… 先日、夢の中で10年以上前に自分を退職まで追い詰めた元上司に、飛び蹴り をかましました。 散歩やジャーナリングを重ね、自分なりに穏やかな日々を過ごしていたはずの私。それなのに突如爆発した、自分でも ドン引きするほどの強烈な怒りと攻撃性 ……。 なぜ今さら？ 私ってこんなに攻撃的な人間だったの？（元々凶暴な自覚はある笑） 困惑しながらも、自分の脳や心の仕組みを個人的に掘り下げていくうちに、その正体は「忘れたつもりでいた未処理の感情」や、ユング心理学で語られる「シャドウ（影）」なのではないか、という一つの考察に至りました。 この記事でわかること なぜ「明晰夢」だと気づいても怒りをコントロールできないのか？ 感情を「感じきる」マインドフルネスと、「観察・分解する」禅的アプローチの体験的比較 自分を守るために封印していた「シャドウ（影）」についての私なりの解釈 今回は、独学で学んだ脳科学や心理学の視点を少し借りながら、 半年以上の内観（自分と向き合う時間） を通じて得た 私なりの気づき をお届けします。 ※ 私は専門家ではないため、あくまで「一個人の体験に基づく考察・メモ」としてゆるくお読みいただければ幸いです ^ ^。 å

1¤¢ã®ä¸­ã§å‡ºä¼šã£ãŸã€è‡ªåˆ†ã®ã€Œæ”»æ’ƒæ€§ã€ã¸ã®é©šã 夢の中の私は、10年以上前に勤めていた会社で普通に仕事をしていました。ちょっとデスクの並びなど配置は違うけど、ほぼ完璧に再現されていました。 目の前には当時私を退職まで追い詰めた上司。私は驚くほど淡々と彼女と会話をしていました。平和に、まったく何事もなく。 あれ？これ、おかしいぞ…。私はいまセブにいるはずじゃ…………。 突然、気づいたのです。 これは夢だ！！！！ そう気づいた瞬間に目の前の彼女に対して怒りが込み上げた、私の驚きの行動が…………。 勢いよく飛び蹴りしました。 夢だとわかった途端、理性が飛んだのでしょう。 口で言い負かす、怒鳴りちらすならまだわかるけど、あんなリアルに再現された世界で、まさかの物理的暴力という手段に及ぶとは夢にも思いませんでした。 夢の中の話ですが苦笑 上司は風船のような、クッションのような質感になり、シューッとしぼã

1‚“でいきました。 目が覚めた時、 …………現実じゃなくてよかった。 その時のあまりにも強い怒りと憎しみに困惑しました。 私は夢を見ている、と気づいたのにコントロールできない理由 明晰夢（めいせきむ） それは、夢の途中で「あ、これは夢だ」と気づいたり、意識だけはハッキリと起きた状態で見る夢のことです。 私も夢の中で「これは夢だ」とはっきりと自覚していました。 ではなぜ、私はその凄まじい怒りや攻撃性をコントロールし、静めることができなかったのでしょうか？ その理由は、夢を見ているときの 脳のパワーバランス にあります。 | 場所 | 説明 | | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | 脳幹 いわゆる爬虫類脳 | 呼吸、心拍、体温調節など、「生きて生命を維持する」ための最も原始的な本能を司る場所。 | | 大脳辺縁系 古哺乳類脳 | 「扁桃体」や「海馬」が含まれる場所です。爬虫類にはない「集団で生き抜くための感情（恐怖、怒り、愛着）」や、危険を覚えるための「記憶」を司ります。「生き残るために闘うか、逃げるか」を決める、まさに感情の本能のセンター。 | | 大脳新皮質 新哺乳類脳 / 人間脳 | 言語、論理、理性など、人間らしい高度な思考を司る場所（前頭前野など）。 | 人間が夢を見ているとき（レム睡眠時）、理性や自己コントロールを司る脳の 前頭前野 の働きは著しく低下しています。その一方で、恐怖や怒り、不安といった原始的な感情を司る 扁桃体（へんとうたい） などの大脳辺縁系は、起きているとき以上にフルスロットルで過活動を起こしている そうです。 つまり、夢の中の脳は「 ブレーキ（理性）がぶっ壊れた状態で、アクセル（感情）がベタ踏みされている 」状態。 いくら意識の上で「これは夢だ」と気づいた（明晰夢の）状態であっても、暴走する扁桃体の圧倒的なエネルギー（野生の攻撃性）の波を、理性の力で止めることができなかったわけです。 感情を否定しない――心の奥底へ押し込めるのをやめる 最近はジャーナリングや散歩など、マインドフルな生活を送っています。 私はその日ジャーナリングしながら、夢の中の自分を考察することにしました。 10年以上前のことなど、とうの昔に忘れていた 私は今、セブ島で会社を経営しています。 正直、もう何年もその会社で働いていたことすら思い出すこともなかったです。 自身の内観や意識の深堀りに注力し、穏やかに過ごす時間を作るようにつとめてます。 そんな矢先、なぜこんな事が起きたのでしょうか？ 物事は忘れるけど、感情だけ取り残される 癒されてない感情には時間という概念が存在しない。 これが私の見解です。 私は当時、派遣会社を通じてとある会社に勤めていました。最初はユーモアがあって優しかった上司でした。 仕事上のちょっとした行き違いから態度が急変しました。勤務中、急性帯状疱疹（ヘルペス）になり病院に駆け込んだこともあります。精神的にも追い詰められ、精神科に通うことになりました。結局、あっさり契約を切られました。 フロイト的には トラウマ になるのでしょう。とにかく当時私の心は相当傷ついてたのだと思います。 ときとともに忘れ去っていたと思っていたのですが、その感情が「 明晰夢 」によって蘇りました。 その時感じた、自分でも驚くほどの生々しい怒り。自分の攻撃性よりも、私がそこまã

1§æ€’ってたことに気づいたことのほうが驚きました。 起こった物事はすっかりなくなってたのに、取り残された感情だけが地縛霊のように心のなかに閉じ込められてたのだと実感しました。 わたしはまだこんなに怒ってたんだ。 凄まじい荒ぶれっぷりでしたが、夢の中だったので結果的に心置きなくそれができたわけです。 100年前の心理学と、現代の脳科学の「決定的な違い」 私の見解を少しシェアさせてください。 詳しい方からしたら「そんなの常識だよ！」と言われてしまうかもしれませんが…… 私はアドラー心理学について書かれている「嫌われる勇気」という本を何度となく読みました。 過去、大学在学中に心理学でフロイトの講義にも取ったこともあるし、ユング心理学も好きで本を何冊も読んでます。 現代でこそ再び脚光を浴びている彼ら心理学者のベースにある考えは、基本的にはおよそ100年前に提唱されたものです。 彼らのアプローチは主に 「言葉による自己分析」や「解釈」 でした。 「なぜ自分は怒っているのか」 「どういうトラウマがあるのか」 感情を言語化し、理解しようとする試みだったのだと思います。 ですが、現代の脳科学の視点 を加えると、一つ大きな壁にぶつかります。 感情の暴走（扁桃体の過活動） は、理性の脳（前頭前野） より遥かに速く、言葉や理論（理屈）では追いつかない。 いくら頭で「怒っちゃダメだ」「過去のことだから許そう」と理論武装しても、脳の奥底（大脳辺縁系）が暴走を始めてしまうとどうなるでしょうか？ 理屈でねじ伏せるのは、ほぼ不可能 なはずです。 だからこそ現代では、心理学の理論に加えて マインドフルネス や 禅 といった 脳科学的・身体的アプローチ が注目されているわけです。 感情のラベリングと受容――ただ、そこにあると許す 夢の中での私の怒りを否定しません。ただ、「あの頃の私は猛烈に怒っていたんだ」と感じるだけです。 良いか悪いかの判断は一度脇に置いて、その感情の存在権をただ認めてあげるのです。 よく名前をつけるといいと言いますが、私の場合は その感情をまるで他人事のように観察する だけしかしません。 特に今回は、夢の中で（感情が）暴走し、怒りを吐き出しきったし、それだけです。 怒りを感じきるのと、観察するのはどちらが良いのだろう？ 私の知り合いにマインドフルネスの専門家がいます。 マインドフルネスでは、「過去の悲しみや怒りなどの感情を感じきる」というテクニックがあるそうです。 マインドフルネスの「感じきる」とは？ 思考（頭での言い訳や分析）を挟まず、その感情がもたらす身体感覚（胸のモヤモヤ、胃の痛みなど）を逃げずにそのまま味わいつくすことで、感情のエネルギーを消化しきるアプローチ。 一方、古代インド哲学や禅では内観があります。ただ、今感じている感情を感じる方法です。私は半年以上の散歩とジャーナリングを通じて、日々この内観を行っています。自分が「今、感じてること」を否定も肯定もせず、ひたすら 他人事のように観察するだけ です。「辛い・悲しい・腹立たしい」などの感情が、観察しているうちにふわっとなくなっていきます。私には 感情を分解する という表現がしっくりきます。 古代インド哲学・禅が教える「内観」の仕組み 古代インド哲学：感情は「自分」ではなく「風景」 自分を「観察者」にし、感情を「ただ通り過ぎる景色」として他人事のように眺める。 仏教（瞑想）：感情を「分解」して無力化する 巨大な「怒り」も、「胸の苦しさ（身体）」「過去の記憶（映像）」「殴りたい（衝動）」などのパーツに分解して観察することで、脳内で消滅していく。 禅：評価せずに「ただ流す」 湧いた感情に善悪ã

1®åˆ¤æ–­ã‚’つけず、空に浮かぶ雲のように放置する。 両方試してみて、私は静かに日々自分に向き合う「内観」の方が合っていました。 アプローチはどちらでもいいんじゃない？ 何が正しいかより、自分に何が合っているかのほうが大事。 このような感情を感じる機会があっても、消化せず見ないフリ（抑圧）をしておくと、時間が経っても心のなかにゴミのように溜まっていくのではないか、と最近思ってます。 Windows などで定期的に行うデフラグ(※)のように、取り除いてあげることで頭がクリアになり、メンタル的にもいい気がします。 ※ デフラグとは、パソコン内でバラバラに散らかったデータを整理整頓し、動作を重くしている原因を解消して動きをスムーズにする作業のこと。 ユング心理学の「シャドウ」――抑圧された防衛本能 露骨なまでの凄まじい怒りと攻撃性。ユング心理学では「シャドウ（影）」と呼ぶそうですね。 ユング心理学のシャドウ（影）とは？ 生きるために隠した、自分を守るための本能。 封印 : 幼少期などに生き残るため、怒りや攻撃性を 持っていないこと にして意識から切り捨てる。 潜伏 : 切り捨てられた感情は消えたわけではなく、無意識の奥底（シャドウ）にゴミのように蓄積される。 表出 : 理性がゆるむ夢の中などで、かつて封印した 自分を守るための本来の力 として現れる。 当時の私が自分自身を守るために抑え込まなければならなかった「怒りのエネルギー」が表出したワケです。 自分が「こんな感情は持っちゃいけない!!!」と抑圧し、切り捨てていた「自分を防衛するための反応システム」が、夢の中で稼働したに過ぎません。 当時、現実の世界では飛び蹴りするわけにはいかないですしね。そんなことしたら捕まります。 まとめ：黒い感情（影）を受け入れ、心の「石」を一つずつ解放する 自分の中の黒い感情やシャドウとは、心の底に放置されたままの、忘れられた石 のようなものかもしれません。 放置された石は心の奥に溜まり、私たちが気づかないうちに躓いたり、足を引っ張ったりします。 人生のチャンスで躊躇してしまったり、人間関係をこじらせたり…… 行く先々で、私たちの人生をちょくちょく邪魔をしているのではないでしょうか。 目を背けていたシャドウ（感情）は、完璧にゼロにできなくても、見つけるたびに解放してあげる。否定せず「これも自分の一部だ」と受け入れる。 受容は意外とカンタンです。誰かに宣言する必要もなく、自分が 勇気を持って許可を出し、あるがままの感情を受け入れればいいだけ ですから。静かに、内観の中にそれを取り入れるだけです。 100年前の偉大な心理者たちが発見した感情のゴミ（トラウマやシャドウ）を、現代の脳科学的アプローチ（内観や瞑想）を使って物理的に処理していく。 この組み合わせこそが、現代の私たちが心の凪を取り戻すための、一番理にかなった方法なんじゃないかと感じています。 見つけるたびに「これも自分だ」と統合し、手放してあげること。その繰り返しが頭と心をクリアにし、人生を穏やかな凪へと導いてくれると信じています。 日々の読書やジャーナリングや散歩を通じて、内観を半年以上続けた結果、たどり着いた私の境地をシェアさせていただきました。 この記事が「 心の底に放置されたままの忘れられた石 」に苦しむ方の一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただき、感謝です。ありがとうございました。","noindex":false},{"slug":"entry571","title":"セブの夜を熱くする！マンゴーのバー301と圧巻デスボイスバンド","date":"2026-07-17","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2026/entry571.webp","description":"セブ在住6年の筆者が激推しするマンゴーのバー「301」の魅力を徹底解説！毎週金曜日に咆哮する謎のデスボイスバンドの熱気から、激ウマ格安ジャンクフード、バーでのリアルな国際交流で英語力を伸ばす極意まで、セブの夜の楽しみ方を伝授します。","tags":["英語学習","セブ島生活","セブ観光"],"body":"セブ在住6年。本当は教えたくないくらい、お気に入りのバーがあります。 他のバーではしっとりムーディな生バンド演奏が流れている中、毎週金曜日にデスボイサーの歌姫が咆哮するバーがマンゴーエリアにあります。 週に2、3回は通うレギュラーカスタマーの私が、セブの夜と国際交流を楽しむ極意を伝授します！ 💡 この記事を読むとわかること 女性やセブ初心者でもマンゴーエリアで安全に夜を楽しむための鉄則 驚愕のコスパ！「301」で絶対に頼むべき神ジャンクフード4選 英語力ゼロからでも、お酒の席で外国人と仲良くなれる最強のマインド 毎週金曜夜、セブNo.1のデスボイスが生み出す爆音の夜の熱気 301 Ramos Sports Bar and grill 営業時間 10時00分～2時00分 301 F. Ramos St, Cebu City, 6000 Cebu 女性一人でも行きやすい、セブのマンゴーエリアのエクスパット（※）が集まるバー「301」の魅力について、余すことなく綴っていきます。 ※ エクスパット（Expat）とは「expatriate（国外居住者）」の略語 マンゴーのバー「301」というセブの夜の聖地 セブの夜を満喫するなら、外せないのがマンゴーストリート。……ぶっちゃけ、治安は悪いです。 ビキニバーにゴーゴーバー、ボーイズバーにクラブ。 欲望と混沌が渦巻くエリアで、慣れると足繁く通うリピーターも多いですが、一歩間違えればトラブルと隣り合わせの危ういエリアです。 そんなギラギラした飲み屋がひしめき合うなかで、ひときわ異彩を放っているのが、ここ「301 Ramos Sports Bar and grill（通称スリー・オー・ワン）」。オーストラリア人の旦那さんとフィリピン人の奥さんが切り盛りしているスポーツバーです。 朝の10時から夜の2時までオープンしていて、フードメニューも超充実。しかも驚愕なのは、ビールの価格！85ペソ（ハッピーアワーは75ペソ）どローカルのバー（フィリピン人しかいない、冷房すらないバー）と比べても最安値クラスの価格設定。リゾートエリアの洒落たバーで飲めば、一本250ペソ持っていかれることもザラなので、この安さは神。 フィリピンのどローカル店はおろか、ちょっと高めの多国籍バーやレストランですら「ぬるいビール」が平気で出てくるセブ。301のビールは安心して飲めます。 他にもオーストラリア人が経営しているバーはありますが、どこも 冷えへのこだわりが異常 です。もしルールを守れないスタッフがいたら、 オーナーにこ◯されるんじゃないかと思うレベルで徹底 されています（笑）。 ⚠️ 女性や初心者がマンゴーのバーで安全にセブの夜を楽しむ鉄則 絶対に一人で歩かない（複数人での行動が基本！） 明るい時間帯や早い時間から行く 移動はケチらず、行き来ともに必ずGrabタクシーを使う 作りたてのジャンクフードを心置きなく楽しめるローカルバー 私がこの「301」に通い詰めるのは、激ウマなフードメニューが大好きなのも大ã

1ãªç†ç”±ã®ã²ã¨ã¤ã€‚ 2階にキッチンがあって、出来たてほやほやをキッチンスタッフのおばちゃんがお皿を持って降りてきます。 私はこの現象を おばちゃんの降臨 と呼んでいます。 オススメジャンク1・フレンチフライ 特にオススメなのが、この揚げたてのフレンチフライ（ポテト）・255ペソ。 塩分控えめで出てくるので、お塩や Heinz（ハインツ）のケチャップ（フィリピン定番のバナナケチャップじゃないのが最高）、マスタードなどで自分好みにカスタマイズして食べてます。 他のお店でもフレンチフライはよくありますが、ここのはちょっと格別。ベタつきが一切なくて、ちゃんと中までホクホクです。これがまた、キンキンに冷えたビールにめちゃくちゃ合います👍️ オススメジャンク2・301ピザ カリカリのクリスピー生地に、野菜がたっぷり乗ったピザ・455ペソ。 私は普段、セブでは本格イタリアンレã

1‚¹ãƒˆãƒ©ãƒ³ã§ã—かピザを食べないほどピザにはうるさいです。ここのピザだけは別腹です。 オススメジャンク3・チキンウィング 通常は 10 個で 340 ペソのチキンウィング。 ですが、火・金・日なら1ピースから頼めます。しかも、1個25ペソになるお得なプロモ（※）もあります。 ※ 2026å¹´7月現在 ここのチキンウィングは、しっかり下味がついていて素揚げでカラッと揚がっています。チキンは手羽元と手羽先のミックス。付属のピリ辛バッファローソースがたまりません。 1ピースが小ぶりなので、女性でも5個はペロリと食べられます。 オススメジャンク4・野菜たっぷりビーフタコス タコスは2種類ありますが、個人的にはソフトタコスのビーフがイチオシです。牛のミンチがゴロゴロ入っていて食べごたえがあります。315ペソです。 中に野菜がたっぷり入り過ぎていて、手で掴んで食べるとボロボロ落ちます笑。 なので、私はいつもフォークを使って中身を少し減らしてから、タコスごとガブッといくようにしています。 通い詰めるうちにスタッフと国際交流できるバー フィリピン人はとにかくフレンドリー。どこのレストランやカフェでも、何度か足を運ぶとすぐに仲良くなれます。 「301」の女性スタッフの中には大学生もいます。勉強の傍ら、ここでバイトをしているそうです。日本の学生が居酒屋でバイトする感覚に近いのかもしれません。 一人でお店に行くと、彼女たちの将来の夢について話せたりして、ほっこり癒やされることも多いです。 外国人バーならでは！他のお客さんとの距離も近い！ 「301」の良さは、他のお客さんとの距離も近いこと。 仲良くなって話が盛り上がると、たまにお酒を奢ってもらえることもあります。 安全に飲むポイントは、スタッフとしっかり仲良くなっておくこと！！ たまに鬼のようにテキーラを勧めてくる人もいるので（ご好意ですが笑）、そこは要注意。飲めない時はハッキリ断るようにしましょう。 もちろん、海外は海外です。おかしな人が絶対にいないとは限らないので、 必ず警戒は怠らず に夜のセブを楽しんでください。 爆音のセブの夜！推し歌姫のデスボイスバンドとマスター・オブ・パペッツ 私の「301」の推しは、毎週金曜日にステージに立つ歌姫 Shi Ann （ AEON ）ちゃんのデスボイス。 セブでは結構メタルバンドが活躍しているみたいですが、女性の力強いデスボイスが、しかも生演奏で聴けるのはかなり珍しいはず。私はセブ1（イチ）だと確信しています。 Shi Ann ちゃんの Master of Puppets Metallica の名曲「マスター・オブ・パペッツ」は、Netflixの『Stranger Things』でも再燃しましたよね。 彼ら AEON は、違う曜日に Social（マンゴー） や他のバーでも演奏しているみたいです。 先日、彼女のデスボイスに魅了された男性客が、連れていたフィリピン人の彼女をほっぽりだしてステージ手前に齧りついているのを目撃しました（笑）。 ステージにはチップボックスも用意されているので、ぜひ投げ銭をしてあげてください。リクエストしたら、お気に入りのロックやメタルの曲を歌ってくれますよ！ 原点・メタルバンドの生演奏が流れる人気のバー「KOBA」 日本（広島）にいた頃に通い詰めていたのが、バー「KOBA」です。 日本に帰った時、親友とボムさんと一緒に！ 店内にはロックやヘビメタが流れ、メタル好きにはたまらない場所。観光客にも大人気のバーです。 koba 営業時間 19時00分～2時00分（定休日水曜） 〒730-0037 広島県広島市中区中町１−４ KOBAは私の原点。今年日本に帰ったときも、時間の許す限り通いました。 セブでも、またそういう場所が見つけられて嬉しい限り。 ボムさんお決まりの一発芸に盛り上がる観光客 Shi Annちゃんのデスボイスを聴いていると、日本にいた頃にライブを観に行ったり、KOBAに通い詰めていた当時の思い出がよみがえってきます。 国際交流で英語の殻を破る！「301」が私に自信をくれた理由（わけ） ぶっちゃけ、私の英語力が伸びたのã

1¯ã€Œ301」のおかげと言っても過言ではありません。 実はセブに来たばかりの頃の私は、英語が全く喋れずに道すら聞けないレベルでした。 日本人同士で英語ができる人がマウントを取ったり悪口を言ったりしているのを見て、本心では「 上手く話せない自分が人前で話すのが怖い 」と思っていた時期もありました。 でも、301に通ううちに気づいたんです。 自分が思うほど、英語話者、特にネイティブスピーカーはさほど日本人の英語力を気にしていなかった。 本当に大事なのは、ただ 目の前にいる人とコミュニケーションを取ろうとする姿勢 でした。 正しい文法や発音ができなくても、表情（フェイシャルエクスプレッション）や身振り手振り（ボディランゲージ）で意外なほど伝わります。 思い切っていつもの 10倍くらいの出力で、表情豊かに話してみる 。それだけで、想像以上に言いたいことは通じるものです。 国際交流のコミュニケーションの中で覚えた単語や表現 「301」に限った話ではありませんが、実際のコミュニケーションの中だからこそ覚えられた表現や単語がたくさんあります。 たとえば、最近だとこんな単語です。 Custody …親権。 Dimple …えくぼ。 バーでの何気ない会話の中で、ちょっとずつ、ちょっとずつ覚えていけます。教科書や授業ではなかなか出会えなã

1„ような表現も、自然と身についていくのが楽しいです。 先日は、セブのスタジオタイプ（ワンルーム）のコンドミニアムに泊まったアメリカ人が、その狭さに驚愕していました。そこで私がこう言いました。 It\'s like a shoe box, right? （まるで靴箱だよね？） 会話慣れしていけば、こんな単純な単語の組み合わせでも、その場の会話を笑いに変えることができます。 私の日常英会話は、こんな感じでかなり成長させることができました。 1回の飲食代はだいたい500ペソ以内。英語のレッスン代として考えても、十分すぎませんか（笑）？ おわりに・セブの夜を楽しみつくす！酒焼け覚悟でまた行く リーズナブルで激ウマなジャンクフード、圧倒的なアットホーム感、魅惑のデスボイス、そしてサバイバル英会話まで。「301」の魅力を余すところなく綴らせていただきました。 私はこれからも酒焼け覚悟で通い続けます笑 安全な時間帯でまったりしたい方はお昼に。晩酌フードメニューをお目当ての方は18時以降に。そして、バンドの生演奏で盛り上がりたい方は21時以降を狙って、ぜひ遊びに行ってみてください。 そこにはきっと、素敵な出会いが待っているはずです。 ※マンゴーストリート方面へ行く方は、くれぐれも自己責任で安全に気をつけて楽しんでくださいね。 この記事が、あなたのセブでの時間を格別なものにするきっかけになれば嬉しいです。 最後までお読みいただき、ありがとうございました！ 友情出演・アッコ 私の飲み仲間です。アッコにはセブで日本人だけじゃなくフィリピン人や西洋人も通い詰める日系のChillなバー Ripple にいったら会えますよ。 @acco_frea (Instagram)","noindex":false},{"slug":"entry570","title":"マイクロソフトの警告は本物？実例から学ぶフェイクアラート詐欺対策と対処法","date":"2026-07-11","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2026/entry570.webp","description":"マイクロソフトを装う爆音と警告は本物か？実際のフェイクアラート体験を元に対処法をリアルに解説。大事なのは「フィッシング詐欺」などの敵の手の内を網羅的に知り、心理攻撃に屈しないための心得です。実際のセキュリティ資格から学ぶ自衛のコアを解説。","tags":["サイバーセキュリティ","Google資格"],"body":"お使いのPCがウィルスに感染しています！！！！！ 画面に広がるマイクロソフトの警告は本物？それともAI詐欺の罠？…解決するためには、電話をかけろって書いてあるんだけど…。 待って！！絶対かけちゃダメ！！！ 実は先日、Google Cybersecurity 資格を取得した翌日に、私の姉がこのフェイクアラートの餌食になりました。 サイバー攻撃の70〜90%近くがソーシャルエンジニアリング（心理攻撃）。実際に私たちが行った、 タスクマネージャーで即殺した手順 と 被害に遭わないための心得 をシェアします。 この記事でわかること マイクロソフトを装う警告が「本物」かを見破る方法 パニック時でも1秒でできるフェイクアラート対策 AI詐欺やソーシャルエンジニアリングに騙されないための自衛術 Google Cybersecurity資格を取った次の日、実の姉が偽広告で画面を人質に取られた Google Cybersecurity の資格を、約1ヶ月の集中学習で取得した翌日のこと。 私のスマホに、姉から珍しくLINE電話がかかってきました。急に電話をしてくる人じゃないので、何かあったã

1®ã‹ãªãƒ¼ã¨æ€ã„通話ボタンを押すと、受話器の向こうから激しい警告音が響いてきました。 パソコンが凄い音が鳴り止まない。どうしたらいい？ パソコンの音量を下げる方法（キーボードを使った音量調整など）がわからず、電話口からでも恐ろしく鳴り響く大音量のアラート。そりゃパニックになるわ。 原因は、このブログのGoogleアドセンス広告。そこに紛れ込んでいた「IQテスト」の広告を、 私のブログだからと大丈夫だ と思ったらしく、踏んでしまったのです。 テストが終わると、画面に突然「 支払いを請求する 」という案内が表示されたそうです。 その画面にはなぜか姉のクレジットカードの 下4桁 と同じ数字が表示されていました。 慌てて画面を閉じようとしたところ、さらに状況が悪化。 私はWebの仕事長いし、たまたまセキュリティを最近勉強してたのですぐわかりました。 Vishing（音声使った）詐欺やー。明らかによくある詐欺やー。 姉は普段マウス操作がベースなので、音量すら下げれずオロオロしてしまいました。鳴り止まない警報にメンタルには相当ダメージ食らったと思います。 とりあえず、対処法を調べるからそのまま待って。音うるさくて悪いけど。。。。 実際の音声： お使いのブラウザは音声の再生に対応していません。 この音声を再生したらおわかりいただけると思いますが、電話越しに聞こえてきた 日本語音声はめちゃくちゃ流暢 。 スクショで送ってもらった画面のレイアウトやロゴの配置も本物そっくり。じーさん、ばーさんだったらまちがいなく騙されちゃうんだろうなとも思いつつ。 ブラウザが制御されているだけだから、今からLINEに送る手順通りにやってみて。 私自身、普æ®

1µã¯ Mac 使ってるし Windows の操作方法はちんぷんかんぷん。早速AI先生に尋ね、手順を送ることに。 そこからは再び、LINE電話を繋いで作業確認。無事、ブラウザを閉じることが出来ました。 フェイクアラートの正体。Webディベロッパーならわかる詐欺の仕組み 正体は実はハッキングでも何でもない、 ただのWebページ です。 JavaScript で全画面化し、ブラウザの自動補完データを利用し、「情報を抜かれた！！」と錯覚させて爆音を鳴らしただけです。 Web開発者なら、秒でブラウザを即殺して終了！レベルの初歩的な心理トラップ。 iPhone だと単なるしょぼいジョークサイト？で終わりますが、 Android、Windows だと奴らの再現したい物々しいページが爆誕します。しかも、詐欺師がカモにしたい日本人はたいてい Android、Windows ユーザー。 詐欺の成功打率 を上げるだけなら彼らが優勝します。 【なぜ？】カードの下4桁が一致していたカラクリ 犯人はおそらく、 自動補完機能（オートフィル） です。 画面のどこかを1タップした瞬間に、ブラウザの自動補完機能（オートフィル）が裏で誤作動し、カード情報を読み取られただけです。ハッキングでもなんでもなく、手元のノートを横から覗き見された程度のセッコい心理手品です。 【図解】パニックになっても1秒でできるフェイクアラート対策・タスクマネージャー即殺手順 画面が真っ赤になり、爆音で警告が鳴り響いていても、慌てる前にまずは音量を下げましょう。 0. 【まずやること】キーボードで「一発ミュート（消音）」 ノートPCや一般的なキーボードには、ファンクションキー（画面最上部の F1 〜 F12）や専用ボタンに「スピーカーに×マーク」がついたキーがあります。 慌てず探して、消音にしてひと呼吸しましょう。 見つけれなくても落ち着いて！ã

1¾ãšã¯ãƒ¡ã‚¬ãƒã‚„老眼鏡をかけてしっかり確認！ 1. 【最重要】キーボードの「3つのキー（Ctrl + Shift + Esc）」を同時に押す マウスが動かなくなっていても、 キーボードは生きています 。左手で以下の3つのキーを同時に押します。 Ctrl + Shift + Esc これで、裏でシステムを強制管理している「タスクマネージャー」のウィンドウが最前面に浮上します。 2. 暴走している「ブラウザ」を見つける タスクマネージャーの画面が開いたら、「プロセス」タブの一番上にある アプリのリスト を確認します。 あなたが今使っているブラウザ（Google Chrome や Microsoft Edge など）がそこに表示されているはずです。 | アイコン | アプリ名 | | ------------------------------- | ---------------- | | | Google Chrome | | | Microsoft Edge | 3. 「タスクの終了」を叩き込む 見つけたブラウザの名前を クリック して選択し、画面の右下（または右上）にある以下のボタンを迷わず押してください。 [タスクの終了] これで完全消滅！ ボタンを押した瞬間、ブラウザのプロセス自体が根こそぎ強制終了されるため、全画面表示も、不気味な爆音アラートも、跡形もなく消え去ります。 4. 【トドメ】Windows標準の「Microsoft Defender」で念のためスキャン 本当にウイルスは入っていないか が不安ですよね？ Windowsに最初から入っている本物のセキュリティ機能（Microsoft Defender）を使って確かめましょう。Windowsであればもちろん無料で標準搭載されています。 1. 「設定」を開く キーボードの Windowsキー + I を同時に押して、Windowsの設定画面を開きます。 2. セキュリティ画面へ メニューから 「プライバシーとセキュリティ」 ＞ 「Windows セキュリティ」 の順にクリック。 3. クイックスキャンを実行 「ウイルスと脅威の防止」 をクリックし、開いた画面にある [クイックスキャン] ボタンをポチる。 ITのプロの現場すら脅かされている、現代のサイバー攻撃の裏側 激白しますが、 オープンソースの安全神話はとっくに崩壊 しました。 最近はツールやモジュールの選定に相当神経を使います汗 昨今のサイバー攻撃は、一般ユーザーだけでなく、我々 Webデベロッパーも細心の注意が必要です。 サプライチェーン攻撃の恐怖 私たちが何気なく毎日叩いている npm コマンド。その依存パッケージの末端に、悪意あるコードが仕込まれる サプライチェーン攻撃 が爆増しています。 こんなに頻発するなんて前代未聞だったんですが GitHub の有名リポジトリや開発者のアカウント自体が乗っ取られ、正規のアップデートを装ってマルウェアが配布されるケースも後を絶ちません。 信頼していたOSS（オープンソースソフトウェア）が、明日には使えなくなる。 私だけではないと思いますが、Webデベロッパーなどは X などのセキュリティ関連のニュースにかじりつき、日々神経をすり減らしていることと思います。 「私は普通にネット見てるだけだから大丈夫」と思ってる人が、一番危ない理由 あなたが実践している 安全対策 は、本当に大丈夫だと思いますか？ 開発のプロすら油断できないのに、 怪しいサイトは見ないから大丈夫 という普通の人の防衛策、たったそれだけの理由で本当に安全だという根拠はありますか？ とっくに無力化されているかもしれませんよ。 「怪しいサイト」の定義が変わり果てた 多くの人は エロサイトや違法ダウンロードサイトに行かなければ安全 と思い込んでいます。しかし、それは大間違い。 今回の姉のケースでも、Googleの 厳ã

1—い審査を通ったはずのアドセンス広告 でした。エロでも違法でもない「IQテストしませんか」という単純な広告です。 Googleの検索結果の最上部に出てくる公式を装った広告（リスティング広告）や、普段読んでいるごく普通のニュースサイト、ブログの広告枠から、本物そっくりの偽警告ページへ一瞬で強制ジャンプ（リダイレクト）させられる時代です。 実は 普通にネットを見ているだけ の導線上は、トラップだらけなんです。 「セキュリティソフト（笑）」という絶対的な過信 高いウイルス対策ソフトを入れているから、警告が出ても守ってくれるはず そんな安心もこのご時世、無意味です。 先程のページだってウイルスでも何でもない、ただの 普通のWebページ だからです。プログラミングで全画面表示（requestFullscreen()）にし、ブラウザの履歴を書き換えて戻れなくし、音声を流しているだけ。PCの中身を破壊しているわけではないので、セキュリティソフトは「あ、ユーザーがWebサイトを見てるな」としか認識できず、一切検知できません。 パニックになった人間は、自ら機密情報を差し出してしまう 彼らは高度なハッキング、コスパが悪い技術なんてもはや使いません。あなたの「パニック心理」だけを小賢しく突いてくるだけです。 画面のどこかを1タップ > ブラウザの「自動補完機能（オートフィル）」が裏で誤作動 > カードの下4桁が画面表示 これを見た瞬間、人は「乗っ取られた！」と理性を失います。 画面に表示された偽のサポート窓口へ自ら電話をかけ、詐欺師の言う通りに遠隔操作ソフトを入れさせられたり、電子マネーを買いに走ります。 低スキル犯罪者たち——AI詐欺プロンプト1つで日本人を狙う心理攻撃の正体 それにしても、サイバー犯罪増えたと思いませんか？ 理由は、ハッカーの技術が進歩したからではありません。 AIによって犯罪の参入障壁がゼロになったから です。 むしろブラックハッカーですらAIのせいで仕事を失うご時世です。 70〜90%近くが「ソーシャルエンジニアリング（心理攻撃）」という現実 彼らの正体は、高度なサイバー技術を持つハッカーなどではなく、AIツール頼みの 低スキルな犯罪集団 です。 システムをハッキングする技術がないからこそ、彼らは標的として「人間の脳（心理）」をついてくる。これが「ソーシャルエンジニアリング」です。 残念ながら、これが一番効果的なんですよね。。。 一番脆いのは人の心だから 実在するMicrosoftのロゴ 本物そっくりの警告音 心理を揺さぶるカードの下4桁 これらすべて、AIプロンプト1つで吐き出すことができます。なんのこっちゃない、テンプレです。犯罪者は、「誰かがすでに試した手法を確率的に試して成功すれば儲けもの」程度の世界観しか持ってません。 昔は一流のハッカーが育つのは時間も才能も必要でした。しかしAIの台頭で、 スキルレスな人間にもイージーに犯罪できる権利 を与えてしまった。そういうことです。 真面目で、優しくて、ITに疎い日本人がカモにされる 海外に住んでいる私からすれば、真面目な日本人なんて格好のカモ。 リアルな世界でも、海外に来た日本人は警戒心が薄いからすぐに携帯を盗まれます。 日本は携帯を落とせば85%以上返ってくる、ほかに類を見ない治安の良い国です。しかしながらインターネットの世界は、グローバルで地続きです。パスポートやビザがなくても、インターネットを介して日本にやってこれるんです。 日本の治安の常識はネットの世界では通用しません。 「お天道様が見ているから悪いことをしない」が通じるのは、バーチャル以外の場所だけの話です。 Google Cybersecurity の知識が役立った——パニックになっても「相手の手の内」を知っていれば怖くない たまたま今回のケースは「タスクマネージャーによるブラウザの強制終了」で解決しました。しかし、敵の手法は日々変化します。明日には全く違う画面、違う脅し方で攻めてくるかもしれません。 敵が欲しいのは「5万、10万の薄利多売」というフィッシング詐欺のビジネス構造 映画に出てくるような、OSの未公開の脆弱性を突く「ゼロデイ攻撃」なんて、国家レベルの機関やトップハッカーしか使いません。そんな何億円もの価値があるスキルを、一般人から数万円を盗むために使うわけがなã

1„じゃないですか。そんなの、コスパが悪すぎます笑 ヤツらがやっているのは、最先端のハッキングではなく、ただの 効率重視の集金ビジネス です。 AIで本物っぽい偽警告のテンプレを量産し、数打ちゃ当たるでバラ撒く パニックになった真面目な人から、確実に5万、10万を振り込ませる それを世界中で同時並行して「数」を回す 高度な技術なんか1ミリもない素人犯罪集団が、この薄利多売の集金システムを回すだけで食っていけてしまう。それが今の歪んだネット社会のリアルです。 手の内を知ればパニックにならない 私自身、今回の件で落ち着いて対処できたのは、世界基準のセキュリティ資格である『 Google Cybersecurity 』のプログラムをたまたま勉強して、サイバー犯罪の 前例 と よくある手口 を知っていたから。 システムそのものをガチガチにハックされたら、個人の力ではどうしようもない瞬間があります。 しかし、敵の攻撃の9割以上は、システムではありません。 ソーシャルエンジニアリング …弱みに付け込み、人間の心をハックするだけ フィッシング …偽の画面で釣る ビッシング …偽の番号へ電話をかけさせる 相手の手口を俯瞰し冷めた目で見られる知識こそが、最大の防御になります。 落ち着くために「すぐ相談できる相手」がいると現実的な砦となる 当事者は爆音と赤画面の渦中に立たされる。冷静さを保つことはできないよ！ そう。どれほど知識があっても、正常な判断力なんてたやすく奪われます。 だからこそ、最大の防衛策は自分一人で解決しようとせず、 すぐに相談できる相手を持つこと です。 「これ、怪しくない？」と一言送れる家族や、客観的に状況を見てくれる他者の目が、詐欺師の仕掛けた心理的な術をあっさりと解決してくれます。 結局・敵の集金システムを合法的に叩き潰す「通報」で逆襲で〆た 姉は私のブログを読もうとしただけなのに。しかも姉の日曜日午前の貴重な時間を奪いやがって。 …ムキーー！！ 対応が終わったら早速、Googleに即座に通報（レポート）を送りつけてやりました。 広告またはリスティングを報告する ポリシー違反の報告 相手のサーバーにサイバー攻撃を仕掛ける「ハックバック」は、こちらが犯罪者になってしまうので絶対にやってはいけません。 奴らの命綱である 広告アカウント をBANするのは合法だし、そのくらいは当然の報い。 ついでに、詐欺師の根城を特定してやろうとWHOISやドメインの情報を追ってみましたが、 | 項目 | 詳細 | | :--------- | :------------------------------------------------------------- | | サーバー | Cloudflare（一応カナダだけど、プロキシで実住所は隠蔽されてる） | | 電話番号 | カナダ経由（どうせ使い捨てのVoIP） | うーーん、無理そう。 ということで、それ以上の深追いはやめました。 長くなりましたが、Google Cybersecurity 資格を取った直後に起きた、せっかくの偶然な体験だったので言語化させていただきました。 私の体験が、あなたや大切な人をこのような詐欺被害から守るきっかけになれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"brave-soul-babies","title":"爆弾人間の魂の正体とDr.孤島の教え","date":"2026-07-08","modifiedDate":null,"category":"mind-journey","categoryName":"マインドジャーニー","ogImage":"/thumbnail/mind-journey/post-2.webp","description":"バカンスの帰り道、うっかり危険なジャングルへ迷い込んでしまった「わたし」。そこに潜むのは、触れれば大爆発を起こす、厄介で凶暴な「爆弾人間」。案の定、大爆破に巻き込まれ、傷だらけで飛ばされた離島の診療所で、風変わりな医者・Dr.孤島から彼らの「魂」の正体を聞かされる――。","tags":[],"body":"バカンスは終わりだ。そろそろ帰らなきゃ。 \\"わたし\\" は、楽しかった海の探索をやめて戻ることにした。 飛行場への道は2つ。ジャングルを抜けて突っ切るか、沿岸を歩いて迂回するか。 時間も遅いし、ショートカットしよう。 \\"わたし\\" は迷わず、ジャングルを突っ切ることにした。 ジャングルに潜む厄介な住人 \\"わたし\\" は急ぐあまり、ジャングルにいる厄介な住人の存在を忘れていた。 彼らの心はいつも不安定で、ヘタに触れると爆発する。 そんな爆弾人間がジャングルには潜んでいる。 彼らの大半は街に住めなã

1ãªã£ã¦ã—まい、このジャングルに住んでいる。 \\"わたし\\" は抜き足、差し足でバレないように足を運んだ。 \\"わたし\\" は見ての通りネコだし、こっそり歩くのは得意だ。そう信じたい。 時に茂みに隠れつつ、慎重に進んだ。 （あ、爆弾人間だ！！！） \\"わたし\\" は声が出そうなのを抑え、心のなかでそう叫んだ。 以前同じ爆弾人間に遭遇したことがある。見事に爆破に巻き込まれて大怪我を負ったことがある。 外の世界の「私」は明日から大切な仕事が始まるらしいし、\\"わたし\\" はここで傷つくわけにはいかない。 気合を入れて忍び足で歩きはじめて数秒後、背中に何かがあたった。嫌な予感がした。 そーっと振り返ると――。 しまった！！！！ あいつがいた。 派手な爆破音とともに、\\"わたし\\" ははるかかなたにふっとばされた。 離島に住む心優しいドクターとの出会い。Dr.孤島の治療 \\"わたし\\" は全身痛みが走る中、目が覚めた。 眼の前には木の天井、続いて優しそうな白髪のメガネをかけたおじいちゃんがぼんやりと視界に入った。 気がついたら \\"わたし\\" は、全身包帯だらけだった。 \\"わたし\\" はジャングルを通ったら爆弾人間と出会うと知ってた。そして出会ったら、絶対にひどい目に遭うのも知っていた。分かっていながらジャングルを通ってしまった。 痛みのせい？それとも悔しさのせい？子どものように声を上げて泣きじゃくってしまった。 わーーーーんっ！！！！ このお医者さんはこの離島に住む医者・Dr.孤島。 Dr.孤島は \\"前世\\" とか \\"胎内記憶\\" とかに詳しい、変わった医者だということはウワサで聞いていた。 何があったか、ドクターに洗いざらい話をした。 だから爆弾人間は嫌いなんだよ。心が不安定でいつも爆発して周りの人を傷つける。だから街に住めなくなるんだよ！！ 爆弾人間のことをそんなにきらいなのかい？ きらいっていうか、絶対関わりたくない！！関わるたびに爆発するなんて、危険すぎるよ。 彼らの生い立ちを知ってるかい？ まあ、あれでしょ？⋯⋯育った環境というか。 \\"わたし\\" に攻撃してきたあの爆弾人間なんて、子どもの頃、お父さんに暴力を振るわれつづけてああなってしまったらしい、とは聞いたことあるけど⋯⋯。そりゃ可哀想だと思うけどさ、だからといっていつも誰にでも爆発していいわけじゃないよ。 そうだね、きみのいうことはもっともだよ。 きみのお父さんは？ ⋯⋯え、そりゃ優しいよ。\\"わたし\\" のことを一回も殴ったことないよ。子どもの頃旅行もたくさん連れてってくれたし、たくさん遊んでくれたよ。 そうかい。君はいいお父さんを選んだんだね。 ⋯⋯選んだ？ うーん、たまたま \\"わたし\\" が生まれた環境は良かったとしか言いようがない。いわゆるあいつのところは \\"親ガチャ\\" の極みなんじゃない？ ふむ⋯⋯。 もし子どもが、どんな親でも \\"自分\\" で選んで生まれてきていたとすれば？ 子どもは親を自ら選んで生まれてくる Dr.孤島いわく、一つの見方として、子どもは生まれる前に親を選んでいるらしい。 優しそうでたくさん遊んでくれる人だと知っていたから、\\"わたし\\" はこのお父さんを選んで生まれてきた、と言う。 それはとても納得できるよ⋯⋯。でも⋯⋯。 そう。じゃあなんでそんな辛い運命の親のもとに生まれてくるのだろうか。\\"わたし\\" は質問したい気持ちをいったん飲み込んだ。 先生は察したかのように優しく答えたã€

1‚ 彼らが \\"過酷な運命を選んでしまった魂\\" の持ち主だからだよ。 たとえ裏切られたり、暴力を振るわれるのが分かっていても、\\"お父さんやお母さんの魂を救いたい一心で選んで生まれてくる\\" んだよ。 今爆弾人間になってしまった彼らは生まれる前に、苦しい人生を歩むと分かっているんだ。 「わたし」は過酷な運命を選んでしまった魂の正体を、今日知った 彼らは、子どもの頃つらい思いをした。肉親から理由なき暴力を振るわれる人、言葉にならない虐待を受けた人。 地獄のような恐ろしい人生が待ち受けていることも、とうに分かっている。生まれる前にやり遂げる魂の目標を抱えて生まれてきてるんだ。 本当は誰かを救うほどの強い光を持って生まれてきたのに、受けた試練があまりにも過酷すぎたんだ。 傷つき、壊れ、自分を救うことすらできなくなってしまった。だからこそ、その激しい痛みを \\"攻撃\\" という形で外に吐き出さずにはいられないのかもしれないね。 \\"わたし\\" は、もし自分が彼らのような過酷な運命を選んで生まれてきていたら、と想像した。 もし、\\"生まれた瞬間から逃げ場のない絶望の中\\" にいたら？ 理由もなく傷つけられ続けたら？ ――― わたしだって、世界を呪い、誰かを攻撃する「爆弾」になっていたかもしれない。 でも、理不尽に殴られたことも、逃げ場のない恐怖に怯えたこともない \\"わたし\\" に、彼らの絶望を理解することなんてできるだろうか？ \\"わたし\\" には……、想像もつかないよ……。 遠い世界の圧倒的な暗闇。 頭の中では言葉に言い表せないほど、複雑な気持ちがぐるぐると回っていた。 翌朝、Dr.孤島は \\"わたし\\" を空港まで送ってくれた。 もう、爆弾人間のことは気にしていない。まだちょっぴり、距離は置きたいけど、前ほどの嫌悪感はすっかり消えてしまった。 次、爆弾人間を見かけても、以前より少しだけ優しい目で見られるかもしれない。 この世界の向こうの「私」の考察 精神や情緒が不安定なあまり、攻撃的になって結果的に孤立してしまう人っていますよね。 そういう人の生い立ちを聞くと、たまに普通に育った人の想像を絶するような、暴力や虐待の中を育ったケースがある気がします。 私は以前、池川明先生の「子どもはあなたに大切なことを伝えるために生まれてきた」を読んだことがあります。 先生は3,500名以上の子どもに聞き込み調査をし、たくさんの子どもから「親を選んで生まれてきた」との証言を得ています。 救いたい親を選んで、辛い課題に立ち向かい、もがいているのだと知ると愛おしく思えるようになりました。","noindex":true},{"slug":"entry569","title":"ADHD脳に襲う無気力の波。やる気が出ない期を生き抜く対処法","date":"2026-07-04","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2026/entry569.webp","description":"突然ブレーカーが落ちたように、ADHDでやる気が出ないことはありませんか？過集中の後に襲う強烈な「無気力の波」は、ADHDの脳の仕組み上、避けては通れない宿命です。ベッドでのスマホ等の罠を回避し、徹底的な引き算で脳を回復させる当事者のリアルな対処法を解説します。","tags":["ドーパミン","ADHD","ライフスタイル"],"body":"ひょっとしたら私、 グレーゾーン かも。。。 最近、大人の発達障害というものが世間では浸透してきました。おそらく…、私は診断を受けるまでもなく ADHD と確信しています。 多動、不注意、衝動的。そういう症状を ADHD の特徴 というのが一般的だと思います。 しかしながら、当事者たちが本当に一番苦しいのは、 「不安」や「無気力」 です。 そこで今日は、私が49年かけてたどり着いた、この不安や無気力を極力減らし、少しでも生きやすくするための「生存戦略」をシェアしていきます。 結論から言っておきますが、ADHD にとっての一番ã

1®æ‚ªã€ãã‚Œã¯ 自己嫌悪に陥り、落ち込む こと。 ぜひ、それを念頭に置きながら、最後まで読み進めていただければ幸いです。 九九もできなかった ADHDの脳 を持つ私が、49年かけて気づいたこと 1980年代。時代はまだ昭和。 当時は グレーゾーン なんて言葉はなく、私はいつも忘れ物をし、夏休みの宿題もまともに終わらせたことがなかったです。 九九もまともに覚えられなくて、机ごと廊下に追い出された私は、まごうことなき 出来損ない でした。 大人になっても変わらない「0か1000」 大人になってからも、何も変わりません。スケジュール通りにうごけないことなんて日常茶飯事。出かける間際に 鍵と携帯を探すのが恒例行事 。 そのくせ、急にスイッチが入ると極端な出力が出ます。 単なるバカなのか、それとも才能に恵まれたのか。 私の人生は、いつも 0か1000 。 どちらかしかありません。 認めたくなかった「ADHD」という自分の仕様 ひょっとしたら私、 ADHD（注意欠陥・多動性障害） なのではないか？ ぶっちゃけ自分がいわゆる発達障害であるなんて認めたくなかったし、なんとなく恥ずかしいという気持ちもありました。 しかし、自分の今までの行動パターンを冷徹に振り返ると、あまりにもピッタピタ。 子供の頃の 九九がおぼえられなくて廊下に机を出された思い出 まで含めて振り返れば、疑いようもない、まるで教科書に出てくるような典型的なADHDの症状そのものでした。 「精神が弱いから」と思っていた無気力の正体 — 過集中のあと必ず来るブレーカー落ち ブレーカーが落ちたかのように やる気が無くなる ことはありますか？ 実は私、この無気力に襲われるのは自分の 精神が弱いから だと思っていました。みんなと同じように安定して頑張れない自分が情けなくて、最近まで自分を責めていました。 昨年、度重なる激しい落ち込みを体験しました。 どうにか自分を律しなければ 。 藁（わら）にもすがる思いで YouTube を見漁ったり、本を読んで必死に勉強しました。 そこで出会ったのが、脳の伝達物質である「ドーパミン」の仕組みです。 どうやら私の脳みそは、このドーパミンが致命的に枯渇しているからこそ、何度も何度も無気力の波に襲われたということがわかりました。 無気力は「心が弱い」のではなく「脳の安全装置」だった 自分が ADHD だと腹をくくって認めた瞬間、40年以上苦しめた正体がロジカルに解けました。 あのデタラメなチート能力が発揮できる、過集中のエネルギー源は脳内ドーパミンの 前借り 。 たとえば、本来なら1か月はかかるWordPressの実装を、追い詰められて寝食忘れ、わずか3日で終わらせてしまうようなことがありました。 普通、そんな極端なことはやりませんよね？ 私には昔からそういうことができたし、終わることも分かってました。 前借りして限界まで高電圧でマシンを回したからこそ、その後に訪れる強烈な無気力は、システムが焼き切れないように脳が自動でバチンと ブレーカーを落としていただけ でした。 心が折れたのではなく、脳の電力が物理的にゼロになる 正常な防御反応 なのだと、分かったのです。 ADHDの脳は ブレーキのない車のアクセルをベタ踏み しているようなもの。ガソリンが無くなって初めて止まれる。 この状態だったら、どうあがいてもやる気が出ないはずです笑 「いつか普通になれる」と信じ続けた49年目で、完全に諦めた日 私は長年、いつかまともになると信じて色んなことをやってきました。 頑張ってちゃんと鍵を決まったところに置こう、決まった時間に片付けをしよう。何度堅く自分に誓ったことか。 結局鍵や携帯がわからなくなってしまって遅刻するなんて日常茶飯事です。 サングラスなんて何度お尻で潰して壊したことか！ どう頑張っても、どう頑張っても、この普通の人にとってこんな

1容易（たやす）いことができない。 普通のことが出来ないから、自分がイヤになるし死ぬほど凹む。 毎回毎回落ち込んでたら、命がいくつあっても足りないくらいです。 普通の人が思う以上に実は死ぬほど凹んでるんですよ、我々。 ついに、やっと脳の仕組みを知り、自分が ADHD だと認め、もう普通になれないことを悟りました。 気づくのに49年もかかったわ。 一回死んで生まれ変わらない限り 無理よwww 開き直った。自分を俯瞰した。試した。 私は ADHD であることを49年間も認めなかった人間。自分が ADHD だからと、決して言い訳の理由にはしたくないです。 ADHD はドーパミンコントロールが下手なのはわかりました。 なら、日常生活では ドーパミンのムダ遣いをやめれば いいということ。 散歩したり、ムダなSNSのスクロールをやめ、大好きなお酒を控えたりしてドーパミンが枯渇しない状態を作るように心がける。完璧じゃなくていい。そんな毎日を心がけるだけです。 中でも私に効果的だったのは散歩。一番しっくりきて、落ち着いた状態が長く続くようになりました。 逆にストレスマックスだったのは 瞑想。脳内おしゃべりが一向に止まらない私にとっては、たった5分でもじっとしているのが限界。 マジで気が狂いそう。メタリカ聴きながら瞑想する人いないでしょ？ わかる？？？ 中には ADHD 持ちの人でも「これをやったほうがいい」って勧める人いますが、合う合わないは人それぞれ。 自分にあったものを試したほうがいい というのが正解だと思います。 諦めた結果、できないことはお金で解決 できないものは、できない。 掃除も片付けもまともにできないのは恥ずかしいと散々言われて育てられました。 49年いつかはできると信じてチャレンジしてきましたが、まともにできないものはできない。 最近は開き直って、掃除業者に依頼しています。 部屋が散らかって、自己嫌悪で気分が落ち込むくらいならお金で解決します。セブでは 800 ペソも払えば、スタジオタイプ（ワンルーム）ぐらいなら、窓も床もシャワールームもピカピカです。 無気力の波が来たときの「降伏」戦略 — 引き算と最小限の生き方 多くの人は、ADHDの厄介なところは単に落ち着きがなく、ひとどころにじーっとしていられないことだと思っています。 いいえ、最も厄介なのは 不安 と 無気力 です。 実際、海外も含めて ADHD コミュニティでは「 これこそが真の最悪の症状 」として毎日のようにスレッドが立っています。 過集中と燃え尽きのサイクルから抜け出せない。現在ブレーカー落ちしてて最悪。 僕にとって過集中は恵みであり呪いだ。走ってるときは最高だけど、絶対にやりすぎてそのあと強烈な無気力がやってくる。今やもうサイクルが完璧に予測できるよ。 【山：約3ヶ月】 誰にも止められない超高電圧の過集中期間 【谷：約2ヶ月】 心身ともに完全に燃え尽きる期間 過集中の真っ最中も「あ、また破滅に向かってるな」って俯瞰できてる。でも楽しすぎてアクセルを辞められない。後から高い「ドーパミン税（前借り）」を払うって分かっているのに。 トレインに乗っている間は、健康も家族との時間もすべてキャンセル（後回し）。自分じゃコントロールできない。みんなもこれと戦ってる？ 引用: Hyperfocus/Burnout Cycle 共感しかないw 私は普段、大小の不安が常に続いており、長く過集中が続いた後には、さらに長い無気力の波に飲まれてしまいます。 確かに過去を振り返ると、子供の頃からずっとこの繰り返しでした。 これまで自分が ADHD ということと、その脳の仕組ã

1¿ãŒã‚ã‹ã£ã¦ã„なかったので、ただ自分を責めるだけでした。 昨年ようやく仕組みがわかったので、この半年間は自分なりの対処療法をしてきました。とはいえ、それももちろん完璧ではありません。 突然やってくる大きな無気力の波 大きな無気力も突然やってきます。ぶっちゃけこっちのほうが不安より最悪です。 なんだか元気がないな 最近そう思っていたある日の朝、目覚めた瞬間に、完全に脳のおしゃべりが静かになっていました。 私の多動は、体ではなく脳の中で起きています。いうなれば、 頭の中で上沼恵美子が 機関銃 のように喋り続けて いる状態。それが私の「 脳の多動 」です。 その私の脳がピタッと静かになったということは、考えられる理由はひとつしかありません。 そう、エネルギー不足。つまり、 巨大な無気力が押し寄せてくるサイン です。 あ、無気力がやってくる…… はっきり感じました。 どうしようか。今ここで慌てて動くと、また脳のドーパミンが完全に枯渇して、底なしの虚無の沼が長引いてしまう。 じゃあ、どうするべきか。 結論として、私は 「最低限のこと以外、なにもしない」 を選択しました（完全な降伏です）。 10分だけ散歩をして、最低限の仕事だけを済ませ、夜は極力携帯も触らず、水だけ飲んですぐ電気を落として寝ました。もちろんすぐには眠れず、バタバタと何度も寝返りを打っていましたけれど。 しかし、極力エネルギーを使わずにいれば、脳は勝手に回復してくれます。 次の日には、いつも通り脳内のおしゃべりが復活していました。いつも通り40分歩いて、読書して、仕事をこなすことができたのです。 無理をすればさらに強い虚無感がくるのが分かっているからこそ、事前に対処したおかげで被害は最小限に抑えられたのです。 高速で回転する脳。エネルギー不足で起こる小さなキャンセル 私の脳はめちゃくちゃおしゃべりで、いうなれば 24時間脳内ヘビメタ がかかってるみたいな感じです。夕方になるとすでにぐったりします。 反動のせいで、片付けキャン、風呂キャン、飯キャン、水キャン。 最近やっと、こういうひとつひとつの出来ない理由も、エネルギーの枯渇が原因の小さな無気力だと気が付きました。 あらかじめ「公式・無気力デー」を予定に組み込む 過集中も無気力も、どちらも突然やってきます。 だったらあらかじめ無気力になってもいい日を、土日のいずれかにスケジュールとして設けておけばいいじゃない いつも私は、人と会わない日をたくさん作るようにしています。 もちろん人といるのは楽しいですよ。でもね、私人と一緒にいるとなんだか疲れちゃうんです。だから 意図的に一人になって充電する ようにしています。 だったらそういう日を 多く作れば いいだけの話です。 自分が ADHD だと認めさえすれば、理論的に対策を講じられるし、「 自分の精神が弱いから 」なんてダサい言い訳をしなくても済みます。 大切なのは、自分のエネルギーの残量を、いつも冷静に観察しておくこと。それだけです。 このイカれた脳を、ようやく「これでいい」と言えるようになった 私はこの脳のおかげで、普通じゃなし得ないことも達成し、普通じゃ想像もできない苦悩も味わってきました。 結果的には私はこのイカれた脳を愛しているんだと、最近気づきました。 私が今、（セブという）海外にいるからというのもありますが、病院に行って薬でこの脳をコントロールする気はありません。 携帯や鍵なくしの儀式も今では「あ、また始まったね」って遠くから見守るようにしています。 今のように対処法を試しながら、自分の脳の構造を しっかりと理解し 、共に歩んでいこうと思います。 学生の頃は落ちこぼれ、いつも成績はビリだったけど、ここぞと言う時はびっくりするほどチカラを発揮してくれた親からのギフトだと感謝すらしています。 人生において一番の悪、それは「 自己嫌悪に陥り、落ち込むこと 」です。特性だから仕方ないと割り切ってしまいましょう。 自分が ADHD だと認めてしまったら、わりと楽になったという話でした。 私の経験が、あなたやあなたの周りの ADHD の方の一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":false},{"slug":"balloon-boss","title":"浅瀬の底にとり残された風船の上司","date":"2026-07-01","modifiedDate":null,"category":"mind-journey","categoryName":"マインドジャーニー","ogImage":"/thumbnail/mind-journey/post-1.webp","description":"南の離島に来た「わたし」。海に行きたいのにいつも邪魔するヤツがいる。試行錯誤でなんとかすり抜け、ようやく辿り着いた海底でゆらゆらと揺れていたのは、10年以上前に遭遇した「あのイヤな上司」の形をした風船だった。それを見つけた瞬間、身体が勝手に、思いもよらない行動に出て――。","tags":[],"body":"\\"わたし\\" は砂浜に立っていた。 周りにはヤシの木、白い砂浜、生ぬるい風が吹く。 ああ、そうか。\\"わたし\\" は南の離島に遊びに来てるんだった。 \\"わたし\\" は、ジャリジャリと白い砂浜を踏みしめて歩き出した。 この先に見える海に行きたい。 浜には、色んなものが落ちている。 昨夜の楽しかった飲み会の余韻 将来のお金の不安 こいつらも気になるけど、 \\"わたし\\" はいま猛烈に海に行きたい。 理由は分からない。ただ、胸の奥がざわつく。 あの海の底にあるものをこの目で確かめたい。 りりしい太眉毛の裁判官・オシリスくん 波打ち際にたどり着いた。 浜辺に変なおっさんが立ちはだかっている。 このやたらと圧の強い、眉毛が立派な無表情のおじさんはオシリスくん。 オシリスくんから海の底に行く許可がないと行けない。 だけど、いつも \\"わたし\\" をこの先の海へ行くのを邪魔する。ウワサによるとお仕事は裁判官らしい。 この前なんて右手に持っているへんなはたきで叩いて追い払われたã€

1‚ 今日は作戦変更だ。 ⋯ねえねえ、お茶しない？ \\"わたし\\" はおそるおそる話しかけた。 ⋯⋯⋯ \\"わたし\\" はリュックの中から折りたたみちゃぶ台と座布団を取り出した。\\"わたし\\" はこれを \\"懐柔作戦\\" と名付けることにした。 これさ、昨日Amazonで届いたばかりの玉露なんだよ。ちゃんと70度のお湯で淹れたから美味しいと思う！ささっ 浜辺には、玉露の芳醇な香りが立ち込めた。 ⋯⋯⋯ 気まずい空気が流れる中、結局無言のままお茶を飲み終えた。\\"わたし\\" が立ち上がろうとすると、オシリスくんが大きなガラス玉のようなものを \\"わたし\\" にくれた。 いわゆる、シーウォーカー（ヘルメットダイビング）と言うやつだ。つまり、\\"わたし\\" に海の先に行ってもいいという許可を出してくれた、⋯⋯のだと思う。 \\"わたし\\" は頭にシーウォーカーを被り、海へと歩き始めた。 オシリスくんが小さく手を振っていた。 太陽の光が届く海の底を歩く \\"わたし\\" は、海底を歩きはじめた。上を見ると太陽の日が差し込んでいく。 海底には石やゴミがいたるところに落ちていた。 ちょっと嫌だなぁと思いつつ進む。太陽の光が少しずつ少なくなっていく。 \\"わたし\\" は海底にゆらゆらと揺れる、何かを見つけた。 気になって揺れる物体に近づいていった。 \\"それ\\" は、海底の岩に挟まって動けなくなっていた。 風船の上司 近づくと、\\"それ\\" は人の形をした風船だった。風船は岩に挟まって、海面に浮上できなくなっている。 あ、⋯⋯ゴンダワラ上司だ！ 10年以上前に勤めたアナコンダ商事の上司だった。彼女から受けた数々の理不尽が蘇ってきた。 そして、 ⋯⋯⋯突然、抑えきれず飛び蹴りした。 とめどなく溢れてくる怒りに任せて、海底の岩に向かって何度も何度も何度も何度も踏みつけた。 ゴンダワラ上司は空気がきれいに抜けてぺちゃんこになった。 どんどんしぼんでいった。 そうか⋯、\\"わたし\\" はまだ怒ってたんだ⋯。 「わたし」のとめどない攻撃性と怒り 10年以上も前のことなんて、この世界の向こうの「私」はすっかり忘れていたみたいだ。 \\"わたし\\" が怒りにまかせ、けちょんけちょんに踏んづけたので、上司の風船はどこかに消えてしまった。 この腹立たしい風船がなくなったら、ふーっと体が軽くなった！！！ そして、風船の上司はもう目の前に現れることはないと確信した。 この世界の向こうの「私」の考察 10年以上前勤めていた会社の出来事です。ある上司の不正を知り、更に上の上司に報告したところ、それに気づいた上司は執拗に嫌がらせをしました。私は結局精神を病んで仕事も続けられなくなり、退職を余儀なくされました。 「事柄（嫌がらせを受けたイベント）」は遠い過去です。すでに終わったことにも関わらず、 \\"怒り\\" という感情が意識の底に取り残されていたようです。 風船の上司は、明晰夢（夢だと気づく夢）のなかに現れました。風船の上司は意識のなかに残っていた、置き去りにされた \\"怒り\\" だったのだと思います。","noindex":true},{"slug":"entry568","title":"Pythonスクレイピングは違法？海外IPブロック＆規約違反を避ける安全競合分析ガイド【2026年最新】","date":"2026-06-27","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2026/entry568.webp","description":"Pythonで競合サイトのデータをスクレイピングする際の違法性と規約違反のリスクを徹底解説。robots.txtのパースやリクエスト間隔の制御など、エンジニアが実務で守るべき安全なクローラー実装手順をコード付きで紹介します。","tags":["Python","スクレイピング","マーケティング"],"body":"突然ですが、そのPythonスクレイピングコード、本当に大丈夫？ このブログは趣味で徒然なるままに書いているのですが、たまーーに過去記事をキレイに整理したい欲が湧いてきます。これがすっごい手間で、すぐイヤになります笑 最近また Python を触り始めたのã

1§ã™ãŒã€ã‚ã¡ã‚ƒãã¡ã‚ƒè»½é‡ã§å½¹ã«ç«‹ã¤ã€‚感極まってさらなる勉強も兼ねて、競合サイトの構成や文字数を分析する自作スクレイピング・コードを書いて実行してみました。 よし回すぞ〜〜！ 実行したのですが、現在私が住んでいるセブの自宅コンドは「Globe回線」。 海外IPから自作クローラーを回した瞬間、見事にサーバーから「拒絶（アクセスブロック）」を喰らいました（笑）。セキュリティシステム（WAF）に「海外からのサイバー攻撃」と誤認されたわけです。 でも、ここで諦めないのが私。エンジニア魂に火がつきました笑 「 相手サーバーへの負荷を抑え、リスクを低減してブロックされにくくする方法 」を徹底的に調べてコードを改良しました。 そこで今回は、みんなが気になる「 合法かつ紳士的なスクレイピング方法 」を、実際のソースコード付きで徹底解説します！ ⚠️ 免責事項 スクレイピングを取り巻く法律や各サイトの規約は、時代とともに変わる可能性があります。最新の情報を常にチェックするようにしてください。 ※本記事の内容は技術検証および情報提供を目的としたものであり、法的な助言（リーガルアドバイス）ではありません。 個別の事案における合法性の判断については、必ず弁護士等の専門家にご相談ください。本記事で紹介したコードは、あくまで自己責任の範囲でのご利用をお願いいたします。 実録：海外IP＋高速アクセスが引き起こす「Access Denied」の現実 それでは、早速本題。 AIと協業して書いたコードで、「超高速・並列爆撃クローラー」を実行した矢先、吐き出されたログがこれです。 aiohttp.clientexceptions.ClientConnectorCertificateError: Cannot connect to host xxxx.jp:443 ssl:True [SSLCertVerificationError: (1, \'[SSL: CERTIFICATEVERIFYFAILED] certificate verify failed: unable to get local issuer certificate (ssl.c:997)\')] これぞ、Webの門番（WAF）に弾かれる手前で起きた Pythonの自爆エラー です。 超簡単に意訳すると、 セブのGlobe回線経由で日本のサイト（xxxx.jp）に超高速で突撃しようとしたけど、相手のSSL証明書が本物かどうか、ボクの持ってる古い名簿（ローカルのCA証明書）じゃ確認できないよ！ え、ちょ待....！ 通信強制シャットダウン、ドーーーーン！！！ そう、海外の不安定なネット環境や、Mac/WindowsのローカルにあるPython環境の多くは、デフォルトのままだと「日本の最新のセキュリティ証明書」をうまく検証できず、この CERTIFICATEVERIFYFAILED （証明書検証エラー） という洗礼を受けるのです。 サーバーの門前までたどり着く前に、自分のクローラーの安全弁が作動して自爆するという、 スクレイピング初心者・海外ノマドが10割ぶち当たる「最初の高い壁」 です。 日本国内の自宅から回すエンジニアにも、このリスクは他人事ではない へぇ、大変だね。でもそれって、あなたがフィリピンのセブ島なんていう 海外のIPアドレス から日本のサイトを叩いたからでしょ？ 日本国内の自宅やオフィスから回す分には関係ないよね ……そう思った画面の前のあなた。完全に、フラグが立っています。 断言しますが、このリスクは日本国内でぬくぬくお茶を飲みながらコードを書いているあなたにとっても、 100%他人事ではありません。 なぜなら、現代の日本のWebサイト（特に企業メディアや大手ブログ）の多くは、あなたが想像している以上に セキュリティがガチガチ だからです。Cloudflareなどの防御システム（WAF）は、アクセス元の国籍だけを見ているわけではありません。 国内IPだろうが海外IPだろうが、彼らが一瞬でBANの引き金（トリガー）を引くのは次の挙動です。 人間の限界を超えた 「ミリ秒単位」の連続アクセス 機械的で一切ブレのない 「等間隔（例：きっちり1秒ごと）」のアクセス User-Agent（ブラウザの識別情報）がデフォルト（Python-urllibなど）のまま たとえ東京の爆速光回線からアクセスしていようが、この条件を満たしたクローラーを走らせた瞬間、サーバー側からは「お、国内の踏み台（乗っ取られたPC）からサイバー攻撃（ DoS攻撃 ）が来たぞ！」と判定されます。 そして、あなたの自宅のIPアドレスごとブラックリストに登録されてしまうリスクがあります。 DoS攻撃 ウェブサイトやサーバーに対して大量のデータや要求を意図的に送りつけ、過剰な負荷をかけるサイバー攻撃です。サーバーを機能停止やアクセス不能な状態に追い込み、一般ユーザーの利用を妨害します。 「 スクレイピングは法律で認められている（著作権法第30条の4） 」というのは、あくまでニンゲン側の法律の話。 Webサーバーの門番（セキュリティシステム）は、法律なんて1ミリも読んでいません。怪しい動きをするヤローは、日本の総務省の官僚だろうが、セブのノマドだろうが、一律で「 Access Denied 」の鉄槌を下すのです。 挙動不審な人が警察などに 職質 されるのと一緒です！ だからこそ、日本国内から回す場合であっても、サーバーの警戒網をスルりとすり抜ける「 不審者扱いされにくいための紳士的なロジック 」をコードに組む必要があるのです。 Pythonスクレイピングって本当に違法？守るべき「3つのリーガル境界線」 結論から言うと、日本国内での 情報解析を目的としたスクレイピングは、著作権法第30条の4によって「 原則として許容されるケースが多い 」 とされています。 だからといって何でもやっていいわけではありません 超えてはならない「 3つの法律の境界線 」があります。 【著作権法】第30条の4（情報解析）の恩恵と、絶対に知っておくべき「ただし書き」の罠 日本の著作権法第30条の4により、AIの学習やSEOなどの「情報解析」目的のスクレイピングは原則合法とされています。 しかし、条文の最後にある「ただし書き」を見落としてはいけません。 著作権者の利益を不当に害することとなる場合は、この限りでない。 たとえば、相手の有料データを丸ごと抜いて自社でタダで再配布したり、相手のサーバーを麻痺させて営業損失を出したりすれば、 この「ただし書き」に触れて100%アウト（違法） になります。 法律が認めているからと過信せず、常に相手の利益を損なわない紳士的な実装が絶対条件です。 悪意がã

1ªãã¦ã‚‚成立し得るリスク：偽計業務妨害罪と「Librahack事件」の教訓 日本のすべてのスクレイパーやエンジニアが絶対に忘れてはならない最大の教訓、それが「岡崎市立中央図書館事件（Librahack事件）」です。 2010年、ある技術者が新着図書のデータを取得するクローラーを自作しました。アクセス頻度は「1秒に1回」という、 一見すると極めて紳士的な設計 。しかし、図書館側のシステムの不具合（バグ）が原因でサーバーがフリーズしてしまいます。 技術者にサーバーを落とす悪意（故意）は一切ありませんでしたが、結果として警察が動き、容疑者として逮捕・20日間にわたり勾留される事態に発展してしまいました（※最終的には不起訴処分となっています）。 悪意がなくても、結果としてサーバーに負荷がかかり業務を妨害したと判断されれば、偽計業務妨害罪が成立するリスクがあります。「意図せぬバグや無限ループによる過負荷」であっても重大なトラブルに発展し得るというこの事例は、私たちエンジニアが十分な安全対策を講じる必要性を示す、非常に重い教訓となっています。 【民法・規約】ログイン不要でも要注意＆robots.txtへの誠実な姿勢 会員登録やログインを必要としない、いわゆる「誰でも見られる一般公開ブログ」の場合、サイトの利用規約を読まずにデータを抜いても、直ちに民事上の法的責任を問われる可能性はそこまで高くありません（利用規約への合意が成立していないとみなされやすいため）。 しかし、だからといって 何でもやりたい放題 やっていいわけではありません。 重要になるのが、Webの世界の紳士協定である robots.txt です。 robots.txt は、サイト管理者が「このページは自動クローラーで読み込まないでね」という意思表示をするための仕組み。法的拘束力はありませんが、サイト運営者の意思表示（クローラーへの指示）として尊重するのがWebの世界の重要なマナーです。無視して突撃すると、アクセスブロックや信頼失墜、将来的なトラブルにつながる可能性があります。 現代のスクレイピングにおいて、規約や robots.txt を尊重することは、単なる法律論を超えた「 Webの世界における最低限の誠意マナー 」。この紳士協定をコードの裏側でいかに守り、スマートに振る舞うかが、 一流のエンジニアと「 ただのスパマー 」 を分ける境界線になります。 GoogleのBANを完全回避！スクレイピングAPIの4大比較とコストのぶっちゃけ話 Pythonを覚えたからには、Googleの検索順位を自動で毎日スキャンして、スプレッドシートに保存する自作クローラーを作るぞ！ ……と、夢を膨らませて Selenium や BeautifulSoup で Google 検索結果を直接叩きに行ったエンジニアが、ほぼ100%の確率で最初にぶち当たる デカい壁 があります。 🥣 Beautiful Soup（ビューティフル・スープ） 「すでにあるHTML（文字列）から、目的のデータを引っこ抜く」のが得意なライブラリ。 あらかじめダウンロードしてきたWebページのデータから、特定のタイトルやURLだけをピンポイントで美味しく「スープをすくうように」抽出します。動作が超軽量なのが最大のメリットです。 🤖 Selenium（セレニウム） 「Google Chromeなどのブラウザを、プログラムで自動操縦する」ためのライブラリ。画面のボタンを自動でクリックしたり、ログインフォームに文字を入力したり、スクロールしないと表示されないページ（JavaScript多用のサイト）を強引に読み込ませてデータを引っこ抜く力技が得意です。 自作クローラーで検索結果（SERPs）を直接抜くのが「無理ゲー」なワケ 相手は世界最強のIT企業、Google です。彼らのクローラー対策は神レベル👍️。 自作コードで Google 検索結果を直接スクレイピングしようとすると、次の現象が秒で起こります。 無限パズル（CAPTCHA）の召喚： 「私はロボットではありません」の、あの信号機や消火栓を選ばせるパズルが画面に立ち塞がり、プログラムが完全停止します。 IPアドレスの完全BAN： パズルを無視してリクエストを投げ続けると、あなたの自宅の回線（セブで言えば貴重なGlobe回線、日本なら大事な自宅の光回線）ごと、Googleへのアクセスを数時間〜数日間完全にシャットアウトされます。 おっ、挙動不審なアクセスだな。お前のIP、ちょっとお仕置き部屋（BAN）な フガッ Google先生で検索すらできなくなって、私生活が崩壊したんだが....！？ そう、Google検索結果を直接スクレイピングするのは、現代のWeb開発において「 決して犯してはいけない禁忌 」なのです。 そこで登場するのが、私たちの代わりにGoogleを安全に叩いて、キレイにパース（解析）されたデータだけを返してくれる「スクレイピングAPI」という文明の利器です。 【2026年最新】データ解析APIのリアルな特徴比較 「じゃあ、どれを使えばいいの？」という方のために、実務や個人開発で使われる代表的な4大APIの特徴とコストを比較表にしました。 | API名 | 検索結果ã

1®è§£æžç²¾åº¦ | 使いやすさ | コスト感（月額 / 無料枠） | こんな人におすすめ！ | | ------------- | ------------------ | ---------------- | --------------------------------- | ------------------------------------------ | | SerpAPI | 🏆 最強（神） | 🏆 最高（一瞬） | やや割高 （$0〜 / 月250回無料） | 個人ブロガー、まずは試したい初心者 | | DataForSEO | 高い | 普通（設定多め） | コスパ最強 （完全従量課金制） | 毎日何千ワードも回すガチのSEO事業者 | | Bright Data | 高い | 難しい | 高め （プロキシ網は世界最強） | 絶対にブロックされたくないエンタープライズ | | ScraperAPI | 普通（HTMLのみ） | 簡単 | お手頃 （月5,000リクエスト無料） | 検索結果以外の一般サイトも抜きたい人 | 圧倒的におすすめなのが私も使っている SerpAPI です。 自作クローラーでは海外のGlobe回線から日本のサイトを叩くだけでサイバー攻撃と誤認されて即BANされますが、SerpAPIを使えば正規システムを介した安全なアクセスに化けさせることができます。 250 searches per month（月間250回）： 1ヶ月の間に使える総リクエスト数。 50 throughput per hour（時速50回）： サーバーに負荷をかけないための「速度制限」。 補足。他のサポートから外れていることといえば、 U.S. Legal Shield: アメリカ国内での法的な保護プログラム。そもそもここは日本（あるいはセブ）なので100%関係なし ZeroTrace Mode: 検索履歴（ログ）を一切残さない隠密モード。大企業の極秘インサイダー調査でもない限り、ログを残されたところで困ることはない（むしろデバッグに便利） Priority support: 困ったときに最優先で助けてくれる24時間サポート。趣味や個人開発レベルならAIに聞けば解決するのでいらん 今月は楽しすぎてAPI叩きまくりましたが、初回は無料枠がまだ25％も残ってます！！ セブにいながら、日本の最新SEOデータをブロックされることなくタダで安全に引っこ抜く。これが、 手間やリスクばかりある自作なんてやめて SerpAPI を使う最大の理由 です。 【準備編】3分でできる！SerpAPIの無料アカウント作成手順 完全ホワイトなクローラーを動かすために、まずは「SerpAPI」の無料アカウントを作成して、自分専用のAPIキーを取得しましょう。 クレジットカードの登録も不要で、Github や Googleアカウントがあれば1分で終わり。 1. 公式サイトにアクセス SerpAPI公式サイト（https://serpapi.com/）にアクセスし、画面右上の 「Sign Up」 をクリックします。 2. Googleアカウントで連携 「Sign in with Google」を選ぶのが一番早くて楽ちんです。もちろん、メールアドレスとパスワードでの登録も可能です。 3. APIキーをコピーするだけ！ ログイン後、ダッシュボード（管理画面）のトップに 「Your Private API Key」 という長ったらしい英数字の文字列が表示されます。ここにAPIキーがあるので横にあるコピーボタンをポチッで取得完了。 【実戦コード】複数クエリ対応・ホワイト仕様のPythonクローラー お待たせしました。Webの門番（WAF）にBANされる恐怖から完全に解放され、Google先生にも嫌われない、「SerpAPI」を組み込んだホワイト仕様の量産型スクレイピングコードのご紹介です。 コードが長くなるので、ファイルを分けました。 キーの置き場所は、.env ファイル内に格納しておくのがオススメ。 .gitignore でバージョン管理から外しておきます。 キーには前後のクォーテーション（\' や \\"）は不要です。 Pythonで .env を読み込む Pythonからこの .env ファイルを読み込むために、 python-dotenv という超定番ライブラリを使います。 uv が入っていたらもしくは まずは、os と dotenv を使ってキーを取得。 キーが返ってきたら print(reloadapi_key()) はコメントアウトしておきます。 URLからページデータを抽出するロジックを組む まずは、ローカル環境に設置したページから、データをスクレイピングするロジックを組みます。 滞在時間にも影響する重要な「冒頭の文章（リード文）」と、主要な見出し（h2、h3）を取得します。見出し自体がコンテンツの概要を表しているため、記事全体の雰囲気を掴むにはこれで十分です。 HTMLを解析する beautifulsoup4 と、ネストが深いHTMLや壊れた構造でもエラーを自動修復して高速にパースしてくれる強力なパーサーライブラリ lxml をインストールします。 traceback は、エラーログを残しておくための保険。 まずはパースできるかの確認なので、ローカル環境に立ち上げたサーバーで試してみましょう。 サーバー管理者に安心してもらうため、通常のブラウザと同じ挙動を再現しつつ、自分のサイトの連絡先URLを明記するのがクローラーの国際マナーです。 Googlebotなども採用している標準フォーマット (+URL) で身元を明かし、検索経由のアクセス（Referer）や追跡拒否（DNT）の意思表示も盛り込んだ、最高に紳士的なヘッダー構成がこちら。 取得しているページにもよりますが次のようなデータが返ってくるはずです！ ※以下のデータは、実際に過去に公開した古い記事からスクレイピングして取得したリアルなデータ例です。 html.parser と lxml 実は、世界のWebサイトの90%以上はHTMLが間違っていたり壊れていると言っても過言ではありません。エラーを自動修復して読み込めるライブラリ lxml が役立ちます。ただし、サイト毎の構造に依存するため、期待通りにデータを抜けないこともあります。 エラーが起きた際、即座に関数を終了させて手を引く。万が一のために traceback で、「403 Forbidden（アクセス拒否）」や「Timeout（時間切れ）」といった、エラーの正体を1行で簡素に残しておくことで、ログという保険をかけておきます。 複数クエリの統合・ノイズ除去・自動スクレイピングを一本化する 複数のキーワードでGoogle検索を自動巡回し、 不要なサイトや自社サイトを自動除外。検索画面を牛耳る真のライバルサイト10選を特定します。 相手のサーバーにブロックされã

1ªã„よう 人間らしいランダムな間隔を空け ながら、先ほどのロジックで全自動スキャンします。 まずは getcompetitortop_results の初期設定。APIキーを読み込み、不要なサイトを除去します。キーワードは引数で渡すのでこれでオッケーです。 もちろん、Google検索から大量のURLを全自動で拾ってくる以上、すべてのサイトの利用規約や robots.txt を事前に手作業で1件ずつ確認するのは現実的に不可能です。 そこで、自動化の現実的な落としどころとして、「明らかにトラブルのリスクが高い巨大データベースや大手メディア」を事前にスルーする除外リストを定義します。自分のブログドメインも含めておくと、自分自身をクロールしてしまう無限ループやノイズを防げるので一石二鳥です。 ただし、このリストは100%の安全を保証するものではありません。プログラムを実行する際は、 「403（Forbidden）や429（Too Many Requests）が多発したら即座に停止する」「気づいたNGサイトはその都度リストに追記する」 という、開発者自身の責任による現実的な運用ルールが前提となります。 SKIP_DOMAINS は網羅しているつもりですが、ご自身でもしっかり調べてくださいね！ 先程のコードの続きです。SerpAPI を使って、Google で上位30件をガサっと自動検索で取得してきます。不要なドメインを含むサイトを削除し、ノイズがなくなったデータのみmerged_competitors に格納していきます。 search.get_dict()を実行するたびにクレジット1つ消費します。for kw in keywords:でループ内で回しているので、キーワードの数だけ消費されるわけです。 先ほど mergedcompetitors に格納したデータをもとに、「ヒットしたキーワードが多い順（最優先）」、それが同じなら 「最高順位（bestposition）が高い順」 にソートし直します。 さらに、上位10件のみを抽出します。 スクレイピングのタイミングをランダムにし、実際のページからデータをぶっこ抜く いよいよ、相手サーバーへの連続秒間アタックを回避する 優しさのランダムウェイト の実装です。 1.0 秒〜 3.0 秒の間で毎回バラバラの待機時間をあえて挟むことで、人間らしい自然なアクセスになります。 パッケージ化 あとでロジックが増えるかもしれないので、utilsフォルダ自体をパッケージ化しておくと便利です。 こうすることで、呼び出し側のメインプログラムからは内部のファイル構造（scraper.pyなど）を意識せず、次のようなシンプルなコードで直接ロジックを呼び出せるようになります。 複数キーワードから競合サイトを自動抽出するメインロジック これまで作成した安全対策ロジックをすべて統合し、指定したキーワードから競合サイトのデータを一括抽出するメインプログラムです。 実行。 出力をファイルに残したいなら、 まとめ・スクレイピングはマナーと優しさも一緒に実装しよう 今回は、安全かつブロックされにくく、できるだけトラブルを避けるための競合分析ガイドをお届けしました。 繰り返しになりますが、Pythonでスクレイピングを行う際は、以下の3大原則を必ず守るようにしてください。 1. 2〜4秒のランダム遅延 機械的な高速アクセスはサーバーへの攻撃とみなされやすいです。人間らしい閲覧速度を再現し、相手に負荷をかけない配慮を。 2. 身元の明記（User-Agent） ヘッダーに自分のサイトURL（できれば連絡先も）を記載して「ただの不審者」にならないようにしましょう。これが国際的なボットマナーです。 3. 動的・会員制・ログインが必要なエリアは避ける 個人情報が絡むページやログインが必要な部分はトラブルの元です。誰でも見られる一般公開情報のみを対象にしましょう。 しつこいけど重要 スクレイピングを取り巻く法律（著作権法・刑法など）や各サイトの規約は、時代や判例とともに変わる可能性があります。本記事の内容は技術検証のための一例であり、法的アドバイスではありません。実際の運用はご自身で最新情報を確認し、自己責任でお願いいたします。 この記事が皆さんのコーディングライフの一助となりますように。 最後までã

1Šèª­ã¿ã„ただき、ありがとうございました！","noindex":false},{"slug":"entry567","title":"ジャーナリングとは ― 読書と「書く瞑想」の掛け算で意識が変わった","date":"2026-06-20","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2026/entry567.webp","description":"ジャーナリングとは、暴走する脳をクリーンアップする最高の「書く瞑想」である。デヴィッド・ホーキンス博士の『パワーかフォースか』で語られる意識レベルのマップをもとに、日常の嫌悪感を消し去りメンタルをセルフデバッグする実践的な効果と、感情ジャーナリングのやり方を考察。","tags":["マインドフルネス","ライフスタイル","ドーパミン"],"body":"私には40分の散歩のあと読書とジャーナリングの朝習慣があります。 かれこれ半年ぐらい続けてますが、今までに10冊以上の本を読み終えました。 一般的には読書はインプットで、ジャーナリングはアウトプット。 お気に入りのカフェでただ黙々とその習慣を繰り返していただけだったのですが、先日今まで経験したことのない境地にたどり着きました。 突然ですが、あなたには苦手な人や嫌いと感じてしまう人はいますか？ 誰にだって苦手な人や、もう二度と合いたくない人はいます。私の場合、そういう人を思いうかべると 嫌悪感 がこみ上げていました。 私は 相手を「嫌うための理由」を脳内で必死に捏造していただけ なのでは？ 最初から嫌う理由なんて一つもなかった のでは？ ジャーナリングの最中、そんなことを思いつくままに走り書きました。 あれほど根深かった嫌悪感が消え去ったかと思うと、突然、今まで感じたことのない温かい感情が濁流のように内側からあふれかえるのを感じました。 今日はそこで、この感情の正体とジャーナリングと読書習慣から得られたことを考察したいと思います。 そもそもなぜ、私は「ジャーナリング・散歩・読書」を始める必要があったã

1®ã‹ï¼Ÿ 先に言っておきますが、私がジャーナリングを始めたきっかけは、よくある「 自己肯定感を高めるための朝活 」とか「 マインドを整えて豊かになるライフハック 」といった、洗練されたキレイ事ではありません。 脳のドーパミンコントロール の一貫でした。 現在フィリピン・セブ在住の私。フィリピンは国も国民性も日本とは真逆と言っていいほど違います。 特に国や地方自治体の手続きが厄介です。 昨年はVISA更新の際に心身ともにすり減らし、更年期の追い風もありすっかり老け込みました。 SNSの無限スクロールやひどいお酒への依存でいわゆる廃人状態に陥り、どうにか這い出ようと思ってるところに脳のドーパミンに原因を見つけました。 最初はドーパミンをコントロールするために散歩だけをしていましたが、それだけだとどうもしっくり来ない。 次第に自分が極度の ADHD だと気づきました。ADHD の人は脳がしょっちゅう暴走するので、ドーパミンのコントロールも苦手と言われています。 ※ 医療機関で診断されてはいないですが、状況証拠やネットのテストでは紛うことなく ADHD と確信しています。 もっとも苦痛なのが 24 時間鳴り止まない脳内ラジオ と付き合わなければならないこと。 私の脳はずーっとメタリカでもかかってるんじゃないかってくらいうるさいです笑 散歩だけではこの脳みそを黙らせられなかったので、半ば渋々、ジャーナリングで吐き出すことにしました。 私のジャーナリングのやり方：ADHDの脳内ラジオを黙らせる 私のジャーナリングは脳みそのおしゃべりをそのまま書き殴るだけ。今ここに集中して、誤字脱字もお構いなしに書き殴る。 多いときには 2〜3 ページにも渡りますし、逆にノートの 1/3 も埋まらないこともあります。もちろん書かない日もあります。 こだわってることは、気分によってボールペンの色を変える、人に対する不満や嫌悪の感情があるときはできるだけその人の名前はイニシャルで書く、ぐらいです。 あとから読み返すことはほぼありません。書いたら終わりです。ページの一枚目にいつ書いたかのチェック表があります。チェックが増えたら、今日も書いたな、と満足感を得られます。 ジャーナリングのやり方を紹介する動画やブログで、気分を上げるためにシールや可愛いマスキングテープでデコりましょうとか、様々な方法があるみたいですが、、、 うーーん、そんな面倒くさいのは私には無理！ やかましい ADHD 脳の持ち主でいち早く吐き出したい人は私のようなやり方はあってると思います。真似できるところだけ真似すればいいと思います。 ジャーナリングとは「書く瞑想」。なぜスマホではなく手書きなのか？ ジャーナリングとは、頭に浮かんだ思考や感情をありのままにノートに書き出す行為のことで、メンタルヘルスや自己探求の文脈では「書く瞑想」とも呼ばれています。 「今の時代、スマホのメモアプリやPCのタイピングじゃダメなの？」と思う方もいるかもしれません。しかし、認知科学や脳科学の視点から見ると、デジタルと「手で書くこと」の間には、脳の活性化において雲泥の差があります。 仕事上終始タイピングをしている人間こそジャーナリングが効果を発揮します。 人間が手を動かして文字を書くとき、脳の基底部にある「 網様体賦活系（RAS：Reticular Activating System） 」という神経の集まりが強烈に刺激されます。 実際に2024年の脳波実験（※参考文献を参考）でも、手書きのときだけ脳全体の光ファイバーが全線開通するように広範囲のネットワークが同期し、タイピングでは通信がほとんど活性化しないことが証明されています。 RASは脳の「フィルター」であり「注意指令タワー」です。手書きによってRASが起動すると、脳は「これは今、最も重要な情報だ」と認識し、意識ã

1®ã‚¹ãƒãƒƒãƒˆãƒ©ã‚¤ãƒˆã‚’そこに集中させます。 私の大好きな YouTuber くろ丸。さんもよく、 RAS について言及していますよ！！ くろ丸。ミステリー キーボードを叩く単調な指先の動きとは異なり、ペンを握り、紙の抵抗を感じながら複雑なストロークで文字を書くことは、脳の広範囲なネットワークを強制駆動させます。だからこそ、デジタルデバイスの画面を見ているだけでは決してアクセスできない、脳の深い領域に眠る「言語化されないモヤモヤ（負のエラー感情）」を、力技で外へ引っ張り出す（アウトプットする）ことができるのです。 【参考文献・エビデンス】 Mueller, P. A., & Oppenheimer, D. M. (2014). The Pen Is Mightier Than the Keyboard: Advantages of Longhand Over Laptop Note Taking (Psychological Science) van der Meer, A. L. H., et al. (2024). Handwriting but not typewriting leads to widespread brain connectivity: An EEG study (Frontiers in Psychology) ドーパミン中毒をハックする：読書習慣はNetflixの置き換えだった 読書は Netflix でダラダラ見続ける動画にお金を使うくらいなら、Kindleに課金しようと始めました。 本は読み終えるのに時間がかかりますが、尊敬する私の父親も続けていた習慣です。 毎日 5％ でもいいからゆっくり読み進める。読みたくないときには読まない。など「強制しない」で続けています。 こだわってることは読みながら ADHD の脳みそと討論すること。 こういうときの ADHD 脳は優秀 ですよ！！ 9 割の人の読書は読み終えただけで満足するところ、実践したり深いところに落とし込んでくれます。 「パワーかフォースか」を中心に複数の本が私の意識にブレークスルーを起こした 最近、精神科医であるデヴィッド・R・ホーキンス博士の著書『パワーかフォースか』を読了しました。 ※ 一般的には「疑似科学」として紹介されることもあります。 キネシオロジー（筋肉の反射）テストという手法を用いて被験者からデータを集積し、人間の意識を数値化・レベル分けして解説した一冊です。本の中では、その意識の領域を「アトラクターフィールド」と呼んでいます。 レベル200の「勇気」を境界線とし、それ未満を「フォース（ネガティブな力）」、それ以上を「パワー（ポジティブな力）」と定義します。最悪のケースでは自殺に至るもっとも低いレベル20の「恥」から、高次元のレベルまでが網羅されています。 アトラクターフィールドこそが生命の源と呼べるエネルギーなのかもしれませんね。 本の前半ではレベル分けやそれぞれの意識について解説してあります。 意識のマップ（アトラクターフィールド一覧） | 意識レベル | 測定値 | 感情（状態） | 神の認識 | 自己の認識 | | :--------------------------------- | :--------- | :----------------- | :----------- | :------------- | | 【パワー（ポジティブな領域）】 | | | | | | 悟り (Enlightenment) | 700 - 1000 | 筆舌に尽くしがたい | 自我 | ワンネス | | 平和 (Peace) | 600 | 至福 | 包括的 | 完璧 | | 喜び (Joy) | 540 | 静穏 | ワンネス | 完全 | | 愛 (Love) | 500 | 崇敬 | 慈悲深い | 愛すã

1¹ã | | 理性 (Reason) | 400 | 理解 | 賢明 | 意味がある | | 受容 (Acceptance) | 350 | 許し | 憐れみ深い | 調和している | | 自発性 (Willingness) | 310 | 楽観 | 寛大 | 希望がある | | 中立 (Neutrality) | 250 | ä¿¡é ¼ | 公正 | 満足 | | 勇気 (Courage) | 200 | 肯定 | 許容する | 可能である | | 【フォース（ネガティブな領域）】 | | | | | | プライド（嫌悪） | 175 | 嘲蔑 / 傲慢 | 無関心 | 肥大化 | | 怒り (Anger) | 150 | 憎しみ | 復讐心 | 悪意がある | | 欲望 (Desire) | 125 | 切望 | 否定 | 失望 | | 恐怖 (Fear) | 100 | 不安 | 懲罰的 | 圧倒されている | | 悲しみ (Grief) | 75 | 後悔 | 軽蔑 | 悲劇的 | | 意気消沈 (Apathy) | 50 | 絶望 | 非難 | 無力 | | 罪悪感 (Guilt) | 30 | 破壊 | 報復的 | 悪 | | 恥 (Shame) | 20 | 屈辱 | 峻厳 | 惨め | 「パワーかフォースか」を読み始めてからというもの「この意識はどのレベルに当たるのか？」と内観するようになりました。 本の中盤以降にとても興味深い解説がありました。 エレガントなレンガの塀にもたれかかっているみすぼらしい老人を見た時にどういう感情が芽生えるか？ というものです。 アトラクターフィールドがレベル30罪悪感（フォース）であれば、自分の責任でそうなったと彼を責めるかもしれません。逆に高レベル250 中立（パワー）であれば、彼は誰も傷つけてない。「世の中は共存共栄だし」と思うかもしれません。 ちなみに先日、バーでとある女性を見かけました。40代から50代だと思われ、ミニスカートを履いてるのに、片足あぐらをかいて下着が見えそうな状態でした。 私に沸き起こった感情はこうです。 なんて行儀が悪い。はしたない。 しかし、翌日ジャーナリング中にそのことを思い出しました。 この感情は 意識レベル175のプライドから生まれる嫌悪 が生み出しているのではないか？ もし意識レベルが違えばこんなふうに思えなかっただろうか？ おうちのようにリラックスして幸せそうだな。御夫婦でお酒を楽しんでるんだろうな。 このバーはそれほどアットホームな場所なんだろうな。 この意識レベルは 受容（350） から 愛（500） の領域にあたります。負の感情は一切ありませんし、自らもフォースに蝕まれることはありません。 この本を読み始めて1つ大きな気づきがありました。私の心の中には 嫌悪感 がしばしば顔をのぞかせます。 特にこのような不快な感情が現れた時、 アトラクターフィールドと照らし合わせて意識の答え合わせをする ことで自分の意識がどのフィールドにいるか、俯瞰できるようになりました。 池川明先生による、子ども3500人以上への「生まれる前の記憶」のインタビュー 数ヶ月前、たまたまバーで飲んでいたら隣にセブ島留学中の男性が突然座ってきました。 見ず知らずの私に「宇宙の法則って知ってる？」と謎の質問を投げかけてきたので、ちょっとヤバい人かと思いました。が、さすが酒のチカラ。結局仲良くなりました。 それから、しばらくしておすすめの本を教えてくれたので早速読んでみました。 それが「子どもはあなたに大切なことを伝えるために生まれてきた。」という本でした。 子育てが終わった今、こんな本読んでどうなる？と内心思ったのですが、丁寧に長い紹介文を添えてメッセージをくれたので読んでみることにしました。 池川明先生は産科医で、3500人以上にも及ぶ子どもたちへ胎内や生まれる前の記憶の聞き取り調査を行いました。 池川先生によると、子どもはどんな暴力を振るわれるかもしれない過酷な環境でも、あえて選んで生まれてくるそうです。 私は虐待を受けて育った人、親に捨てられた人、性自認が違うがために苦しんできた人、自身の姉をはじめ、極度の精神病で苦しんだä

1ººã‚’見てきました。 本を読み終えた時、姉がいかに勇敢な魂の持ち主かと思うと愛おしい感情で一杯になりました。 聞き取り調査から導き出した独自の仮説：魂の課題・用意されたシナリオ ここからは私の単なる仮説です。 彼らは自分が何を学びたいか決めて生まれてきたんじゃないか？ そして学びを得るために自ら苦しい人生を歩むシナリオを用意して生まれてきたのではないか？ 課題やシナリオを覚えていたら、学びにならないから忘れるようになっている。でもかろうじて、生まれる前のことを子どもは覚えていることもある。 池川先生の3500人以上にも及ぶ聞き取り調査がなければそんな発想にも至りませんでした。 生まれたときからアトラクターフィールドが低い環境だった人は勇敢な魂の持ち主ではないだろうか？ 池川先生とホーキンス博士の主張や研究結果をかけ合わせると新たなパラダイムシフトが私の内面で起こりました。 生まれたときからアトラクターフィールドが低い状態の人は勇敢な魂の持ち主 仮説ですが、人はみな学ぶために自ら試練を課して生まれてきます。見た目が変形するほど子どもの頃親に殴られ続けた人、聞くに堪えないような性的虐待を受けた人とも出会いました。 そういう人はアトラクターフィールドが生まれながらにして低いから、恥や罪悪感を感じ続ける。ホーキンス博士曰く、通常人は特別な修行や学びでもない限り、一生を通して意識レベルは5程度しか上昇しないそうです。 認知の歪みや、正直関わりたくないと思うような人格の人とも何度か出会いました。そういう人の生い立ちは想像を絶するほど過酷であることが多い気がします。私には、彼らの存在に寄り添うだけの心の余裕がどうしても持てませんでした。 さらにこれらの本を読むまでは、内心、人格の悪さや認知の歪みを育ちのせいにするな、と厳しく非難していました。 「勇敢な魂」への称賛が生んだ、ワンネスという名の意識のアップデート みんな学びの途中。低い意識レベルになってしまった人ほど、よほどの過酷なシナリオを用意してこの世に生まれてきた人なのでは？ むしろこんな大変な学びを得るために来ているのなら、むしろ 称賛すべきだし勇敢な魂の持ち主 なんだ。 ジャーナリングでそんなことを一心不乱に書き殴っていました。 その瞬間、脳内で何かがパチンと弾けました。あれほど強固だった彼らへの嫌悪感が綺麗さっぱり消え、代わりに「 この世界に生まれてきてくれて、過酷な学びを引き受けてくれてありがとう 」という、これまでの自分からは想像もつかない感謝へと意識レベルがシフトしたのです。 次の瞬間、嬉しいのか幸せなのかも分からない、歓喜の濁流が体の内側からとめどなく溢れ出してきました。脳の全細胞が歓喜で満たされ、心臓の奥がじわーっと熱くなる。正直、「これ、脳内で変なドラッグでも分泌されたんじゃないか？」と本気で疑ったほどの、強烈すぎる心地よさでした。 おそらく、人はそれを ワンネス と呼ぶのかもしれません。 私はスピリチュアルな人間ではありませんが、そうとしか言い表せない絶対的な全能感と安心感に包まれていました。 その状態の心地よさといえば、実家に帰った時、母親が私のために丁寧に掃除し、とっておきの入浴剤を入れてくれた湯船に浸かっているような、圧倒的な安心感とリラックスが混在した心地よさでした。細胞ひとつひとつが蘇り、いつまでも浸かっていたい気分になりました。 「お風呂の例え？ その程度の心地よさ？」と思う方もいるでしょう。 でã

1™ãŒã€ç§ãŒã‚»ãƒ–島で住んでいるマンションにはシャワーしかありません。日本の水道水の質の良さ、そして湯船という文化の偉大さは、海外の不便な環境に身を置いて初めて、骨の髄まで染み渡る「至高の贅沢」だと知るのです。これが今の私にとって人生最大の至福の瞬間だからこそ、この表現が一番しっくり来ました笑 気づけば、お気に入りのカフェの席で、私は終始ニヤニヤと笑顔が止まらなくなっていました。周りを見渡すと、店員さんも、隣の席の見知らぬ客も、窓の外を行き交う人々さえもが、愛おしくてたまらない。はたから見れば、完全にキマってしまっているヤバい人だったと思います。 不思議なことに、その日はあれほど名前を聞いただけで嫌悪感・不快感を抱いていた人たちに対して、本当に「無（何のネガティブ感情も湧かない状態）」になったのです。 意識レベルが変われば、その嫌悪感も所詮 自分の低いアトラクターフィールドが作り出した妄想（捏造） だったと気づくはずです。 中村天風先生の人生こそがアトラクターフィールドの存在を証明しているのではないか？ 運命を拓く 最近読んだ本のひとつに、中村天風先生の書いた本があります。ビジネスの巨人・松下幸之助や、スポーツ界でも大谷翔平など多くの著名人が愛読している本です。 読んでる最中、しかもKindleなのでデジタルの字面なのにやたらめったら圧を感じるというか、パワーを感じるなぁと思ってました。 天風先生は日露戦争でスパイ活動をし、その後当時不治の病だった結核を患い、治療法を見つけるために世界を渡り歩き、最終的に諦めて帰国しようとした旅の途中、エジプトで偉大なヨガのグルに出会い、そのままインド・ヒマラヤの山奥へと導かれて修行したそうです。 結局、日本に戻って天風哲学（心身統一法）を確立し、91歳までの長寿を全うしました。 病気に打ち勝ち、心を積極的（絶対積極）に保つよう説いた天風先生の人生そのものが、ホーキンス博士の主張を証明しているようで腑に落ちました。 ホーキンス博士は、フォース（生命力を奪う力）は病気ですら呼び寄せてしまうと言っています。 天風先生自身のアトラクターフィールドが限りなく上昇したからこそ、病気を克服し、さらに周りの人の意識レベルまで引き上げたのではないでしょうか。 ホーキンス博士曰く、本や建物、音楽といった「物や作品」にまでアトラクターフィールドは宿り、人々の意識に影響を与えるそうです。 天風先生はもうご存命ではありませんが、著書を通じて今もなお、沢山の人のアトラクターフィールドを上昇させ続けています。それこそが、時代を超えて世界に一握りしか存在しない、圧倒的なアトラクターフィールドの持ち主だったという何よりの証明だと私は確信しています。 ジャーナリングと読書習慣からたどり着いた境地 最初はドーパミンコントロールのために始めた「ジャーナリング・散歩・読書」の習慣でした。 おかげで、視聴予定だった Netflix のドラマの続編にもいつの間にか興味がなくなり、 Youtube ショートも見なくなり、ドーパミンを無意味に出し続ける状態を防げるようになりました。 実はドーパミンコントロールのために瞑想もチャレンジしました。が、一生喋り続ける脳を持った ADHD の私には荒行でしかなかったです笑 散歩は歩く瞑想、ジャーナリングは書く瞑想とも呼ばれていますし、苦痛になる一般的な瞑想をするぐらいならこれでいいのだと今では納得しています。 このワンネス体験は、地味に続けていたこれらの3つの習慣が起こしたたまたまの奇跡です。 ただ、ホーキンス博士曰く、どんなに上昇したアトラクターフィールドも時間の経過や、低いアトラクターフィールド（負のエネルギー）の介入で下降してしまうことがあるそうです。 これからも、今自分がどの意識レベルにいるのか内観して「答え合わせ」をする習慣を続けようと思います。 私たちはこの現世（うつしよ）に留学しに来ている。 何を学びに来たか思い出せないかもしれませんが、探し出すことはできるのでは？ ※ 現世（うつしよ）。この世のこと。 ホーキンス博士の研究結果も、天風先生の教えも、池川先生の本の聞ã

1å–り調査も、確固たる科学的検証がされているかどうかは、どちらでも良いのです。「今の人生がより良いものになればそれでいい」のです。 もしあなたも、鳴り止まない脳内ラジオや、消えない誰かへの嫌悪感に疲れてしまったときは、ノートを開いて「脳のクリーンアップ」を試してみてください。案外、世界は最初から実家のお風呂のように温かいのかもしれません。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry565","title":"AI時代に未経験エンジニアはどう生き残る？高卒・34歳から15年サバイブした私の生存戦略","date":"2026-06-16","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2026/entry565.webp","description":"大手IT企業の人員削減、AIによる開発自動化。激変するIT業界で、学歴なし・未経験から生き残るための「空いている席」の探し方とは？15年のキャリアと直近のサイバー攻撃のリアルから、セキュリティ武装したハイブリッド人材の必要性を紐解きます。","tags":["キャリアアップ・転職","駆け出しエンジニア","AI"],"body":"突然ですが、 電車に乗ったとき、 あなたは空いている席 を探しますか？ それとも、 座りたい席が空くまで いつまでも立って待ち続けますか？ 2026年、ChatGPTやClaudeなどのAIのおかげで、深い知識がなくてもコードが書け、アイデアさえあればプロダクトが生み出せる時代になりました。 ---これが何を意味するか 特別なスキルがない人間でも、未経験から一瞬で参入できるということです。 仕事がなくなるんじゃないか？ 正直恐怖を覚えました。 実際、大手IT企業でも5,000人規模の人員削減が行われています。零細企業にいる私には死活問題です。光のようなスピードの進化を前に、正直「もう太刀打ちできない」と、諦めが入り混じる心境でした。 先程の質問を覚えてますか？ 電車に乗ったとき、 あなたは空いている席 を探しますか？ それとも、 座りたい席が空くまで いつまでも立って待ち続けますか？ 多くの人がAIという武器を手に一等席へ殺到し、今やその席はぎゅうぎゅうの寿司詰めになってしまいました。 しかし、バツイチ・子持ち・高卒・お金なし。34歳で未経験からIT業界へ転職し、15年なんとか飯を食ってきた私は気づきました。プログラミングとセキュリティの掛け算。そこには、まだゆったり座れる「空いている席」があるのではないだろうか？ そこでこの記事では、「 いかに快適に空いている席に座るかという 」弱者なりの生存戦略のお話をします。 決して、時代の荒波を器用に泳ぎ切ったエリートの華やかな成功談ではありません。 ぜひお付き合い下さい。 Webデザイナーになりたかった。「座りたい席」への執着を手放した瞬間 私の人生を端的にお話しすると、大学中退で最終学歴は高卒。20代の頃はデキ婚と、若さゆえの電気代すら払えないほどの極貧生活を経験しました。その後、離婚。現在はIT業界へ転身し、Webディベロッパー、特にフロントエンドの仕事を15年間続けています。 34歳。家でもできそうな仕事をしたい、という切実な理由でITの道を決意しました。当時のWeb制作はまさに黄金期。フリーランスも含め、Webデザイナーという職種はとりわけ華やかで人気でした。 確かに「Webデザイナー」という響きはかっこいい。しかし未経験の私は、一歩引いて立ち止まりました。 後発で入ってきた私に、入り込む余地はあるのだろうか？ 34歳でプログラマーの席に座ったということ。席は空いてるけど茨の道 当時現場を見渡すと、デザインはできてもコードが書けない人が大半でした。 GitHubもWebデザイナーには難解な文書の置き場みたいなもので、ネットの解説ブログにあるコードをコピペして制作している人が多かったã

1®ã§ã™ã€‚現在のChatGPTやClaudeのように、一瞬で動くコードを出力してくれる便利なAIなど存在しない時代です。 だったら、人様の苦手なところを私が担おう。 そう考えて、私はプログラマーとしてコードを書く側に特化する決心をしました。「 座りたい席 」への執着を手放し、誰も座りたがらない「 泥臭いけど空いている席 」を選んだ瞬間でした。最初の頃は未経験ゆえに、夜中の3時まで慣れないコードと格闘し、バグの嵐に窒息しそうでした。 中にはありがたい（？）助けの手を差し出してくれる人もいました。私を鍛えようと、PHP合宿という「 コピペ禁止 」、「 PHP.net 」以外見てはいけないという条件付きの、過酷な合宿にも参加しました。 殺されるかと思った、、、 今でもあの時、徹夜明けの窓から見えた、静かに朝焼けていく空の様子が脳裏に焼き付いています。 案の定、コードが書けるようになると、引き合いは増えました。当時は技術ブログも狂ったように書きまくりました。おかげさまで、勉強会で会った人たちにはこのブログの名前の一部でもある「 銀ねこ 」さん、と呼ばれるようにもなりました。 ぶっちゃけ、納期がギリギリの炎上案件や、他人の能力をはるかに超えた面倒なトラブルにも数多く巻き込まれました。それでも、人に頼りにされるのは嬉しかったし、そこに自分のやりがいも見出せました。 座りたい席 には座れなかったけど、結局これで良かった。 大金持ちにはなれませんでしたが、この手で息子をちゃんと育て上げ、ここまで連れてくることができたのですから。 AIの影に飲み込まれかけた私が、3月の出来事で気づいたこと 2023年ごろ、大規模言語モデル（LLM）であるChatGPTが新星のように現れました。プログラミング言語ではなく、普段の自然な会話で指示ができるという画期的な仕組みに、世間は「チャッピー、チャッピー」と熱狂し、SNSのタイムラインは毎日AIの話題で埋め尽くされました。 まだその頃はAIの精度も粗く、どこか他人事のようで危機感はありませんでした。しかし、本当の恐怖を肌で感じ始めたのは、ここ最近のことです。 文系の学生が、AIだけでサービスを立ち上げてミリオネアになった AmazonやSalesforceなどの大手IT企業が、数千人規模の人員削減を敢行した そんなニュースが次々と飛び込んでくるようになりました。 ChatGPTやClaudeなどの圧倒的な進化により、昨日まで自分が何時間もかけて書いていた「 単純なコーディングが奪われる 」世の中が、あまりにも早く来てしまったのです。 日本でAIの進化をまざまざと見せつけられた私は、帰りの飛行機の中で、「 この先どうやって生き残ればいいのだろう 」と内心、暗い未来ばかりを考えていました。 2026å¹´3月のAxios npmサプライチェーン攻撃。AIの台頭がスキルレスな犯罪者に「市民権」を与えてしまった そんな絶望の最中にいた2026å¹´3月、フロントエンド領域を震撼させるニュースが耳に飛び込んできました。「 Axios npmサプライチェーン攻撃 」です。 Axios NPMパッケージ侵害：週1億以上のダウンロードを誇るJavaScript HTTPクライアントにサプライチェーン攻撃 現在のJavaScriptやTypeScriptには標準で fetch API があるため、ぶっちゃけ今の開発現場ではAxiosは不要になりつつあります。しかし、かつて一世を風靡し、フロントエンドに携わる人間なら一度は触ったことがある超有名ライブラリです。その人気のHTTPライブラリのパッケージが何者かに乗っ取られ、数百万規模の自動ダウンロードを通じて被害が世界中に波及したã

1®ã§ã™ã€‚ この事件をさらに分解したとき、私はAI時代がはらむ「もう一つの裏の課題」に気づき、ハッとしました。 便利さという恩恵は、人間の善悪に関わらず平等に与えられます。スキルを持たない未経験者が簡単にIT開発に参入できるようになったということは、同時に「 大した技術を持たない犯罪者（ブラックハッカー）にも、強力なサイバー攻撃の武器（市民権）を与えてしまった 」ということなのです。 実際、倫理制限を解除された攻撃用AIが、ダークウェブなどで簡単にサブスク購入できる時代がきています。スキル無しでプロダクトを開発する人材が増えるのと同数、AIを悪用する犯罪者も増えていく。 これが 目をそらしてはいけない現実 です。 「AIの限界」を知らない人間が引き起こす、繰り返される悲劇 現場の最前線でコードを書いてきた人間なら、Axiosのようなライブラリは、今となっては重いし、サイトの軽量化や効率を考えたら使わないという選択肢を取るはずです。しかし、AIに知識ゼロでコードを書かせている人は、それすらわかりません。 生成AIには知識の「 カットオフ（学習データの締め切り） 」があります。そもそもAIのコード生成は確率と組み合わせの産物ですから、脆弱性があろうが古かろうがお構いなしに、それっぽいコードを出力してしまいます。これはAIが悪いのではありません。AIの限界を知らないまま、 盲信して使っている人間の無知が良くない のです。 この危なっかしい状況を見ていて、私には強烈なデジャブ（既視感）がありました。かつて Google が「 SEOにはWordPressがいい 」と言ったもんだから、猫も杓子もこぞって導入し始めたあの時代とまったくそっくりです。 当時、ブログを始めたいからと知識のないまま WordPress を触り、セキュリティ対策もせず、ネットに転がる「 野良プラグイン 」や「 おしゃれな海外テーマ 」を安易に導入してサイトをつくる人が多かった。 何人乗っ取られた人を見たことか。 まさに、時代は繰り返すのです。 100％断言できます。これから先、AIを使って同じ悲劇が大量に起こります。 この業界で15年サバイブしてきた私は、本当に座るべき席を見つけました。 コードを書く一等席は、もうAIと有象無象に埋め尽くされた。 次に私が選ぶべき、そしてこれから圧倒的に必要とされる「空いている席」は、この脆いシステムたちを守るセキュリティ人材の席だ、と。 セキュリティこそ、今、一番静かに開かれている空席 日本のセキュリティ人材が、現在「約11万人以上」も不足している現実をご存知でしょうか？ 11万人も足りないセキュリティー人材、IPAは「キャンプ」で発掘・育成 この深刻な「スキルギャップ（人材の枯渇）」は、日本国内だけの問題ではありません。MicrosoftのCEOであるサティア・ナデラ（Satya Nadella）氏も、X（旧Twitter）でこのように危機感を表明しています。 Cybersecurity is a threat facing every business today, and that’s why we are announcing new programs, resources, and partnerships to help close the cybersecurity skills gap in the United States. サイバーセキュリティは、今日のあらゆる企業が直面する脅威であり、それが私たちが米国におけるサイバーセキュリティのスキルギャップを埋めるのを支援するための新たなプログラム、リソース、パートナーシップを発表する理由です。 @satyanadella | x 世界中のIT業界を見渡しても、セキュリティの領域は「席に横たわれるほどガラ空き」なのが現実です。 「セキュリティの仕事って、24時間体制で画面を監視し続けるような、過酷で大変な領域じゃないの？」と思う人もいるでしょう？ 私だって、今から100%完璧なサイバーセキュリティの純粋な専門家になれるなんて思っていません（笑）。 いいえ、専門家にならなくていいのです。私たちが目指すべきは、100%の専門家ではなく、自分の軸にセキュリティを掛け合わせた「 ハイブリッドな人材 」です。 「何もできなかった」あの日の悔しさを超えて、セキュリティ武装したエンジニアになる 私はこれまでの15年間で、プログラマーとしていくつかの苛烈なセキュリティインシデントに直面してきました。 10年ほど前、サーバー移行を依頼されたWordPressサイトが、開けてみたらすでにマルウェアに汚染されていた クライアントのWebサイトが載っているAWS（Amazon Web Services）が、短期間に3度も乗っ取り攻撃を受けた サーバー管理の管轄が自分とは違ったため、私はただ画面の前で、その惨状を指をくわえて見ていることしかできませんでした。 はっきり言って悔しかった…！！！ 専門知識がã

1ªã„から、当時の私には何もできなかった。辛うじてSQLインジェクションの脆弱性くらいは見つけられましたが、根本的な対処ができませんでした。 サイバーセキュリティの本質とは、迫り来る攻撃を派手に迎え撃ったり、起きてしまった事件の後始末（事後処理）をすることだけではありません。脆弱性にいち早くパッチを当てて、事前にリスクを防ぐこと。インシデントなんて、何もない平穏な状態であることに越したことはないのです。 大抵のサイバー犯罪者の心理は、街の「 空き巣 」とまったく同じ。 防犯カメラや強固な二重ロックがある家をわざわざ狙わないのと同じで、アセット（機密情報やソースコードなどの財産）が簡単に奪える状態で転がっていない限り、彼らはリスクを冒してまで襲ってきません。 だからこそ、今持っている開発スキルに「セキュリティ武装」するのです。 既存サイトのセキュリティホールを的確に埋め、最初からセキュアなコードを書く。それだけで、プログラミングスキルなしでAIのプロンプトだけでコードを書いている人材とは、一線を画した圧倒的なポジションを築くことができます。 彼らの無防備なコードのお陰で我々の仕事は益々増えるはずです。 IT業界に生きる人間として、最低限の防衛知識を持つ 現在、私は「Google Cybersecurity Professional Certificate」という資格プログラムのカリキュラムを使い、実戦的なセキュリティの勉強をしています。 学び始めて痛感するのは、未経験から入った若手だろうがベテランだろうが、「 IT業界に身を置く人間であれば、誰もが最低限のサイバーセキュリティ基礎知識を持つべきだ 」という当たり前の気づきです。 これはAIの運用でもまったく同じことが言えます。 HIL（Human-in-the-Loop：AIのプロセスに人間が介在して判断すること） の重要性を知らなかったり、 ハルシネーション（AIの嘘） や 知識のカットオフ（学習制限） を理解していないからこそ、安易な生成によってAI起因のサイバー攻撃を許してしまう。大抵の悲劇は、システムの欠陥ではなく「 人間の無知 」が引き金になっているのです。 かつて圧倒的な弱者だった私が、必死でフロントエンドエンジニアの席に座ったあの日から15年。私は今、AI時代という新たな荒波の中で、自分の手で次の「空いている席」への道を見つけたと確信しています。 空いている席に座り続けるために、私が大切にしている3つの姿勢 バツイチ、子持ち、高卒という圧倒的な弱者には、弱者なりのサバイブ戦略があります。15年間この業界を生き抜く中で、私が心に刻んできた3つの姿勢を共有します。 トレンド（華やかな一等席）ではなく底流の「需要」を見ること かつて私は、当時すでにレッドオーシャン化していた「Webデザイナー」というきらびやかな道ではなく、誰もが敬遠していた泥臭いコードを書くプログラマーの道に全振りしました。そのおかげで、自分だけの「空いている席」にゆったりと座ることができるようになったのです。 やりたい仕事を諦めたわけではありません。 確かにあのとき、無理をしてでもWebデザイナーになっていれば、それはそれで人生に一定の満足を得ていたかもしれません。 空いている席に座ったおかげで見つけた喜びは、 誰かに必要とされること 、その仕事をすることに感謝されること です。 自分にとっての「 新しい価値 」でした。 完璧を待たずにまず座る（行動する）こと 私がIT業界を目指した当初、プログラミングのような複雑で頭を使う仕事を「女性ができるわけない」という冷ややかな目で見られることもありました。 高卒で未経験の私は、はなから完璧な環境などそもそも求めていませんでした。 まずはITに関われるならどこでもいいと、時給790円のECショップのアルバイトから始めました。派遣社員として入った現場では、「 期待外れだ 」とクビを切られたことだってあります。 それでも私は立ち止まらず、「どこかに、私がちゃんと座れるいい席があるはずだ」と、探し続けました。結果、日本では実力のあるIT企業に入り、セブ島ではブリッジSEとしてのキャリアを経て、最終的には自分の会社を持つに至りました。 完璧な実力を待ってから動くのではなく、まずは空いている席に滑り込む。実力なんてあとから付いてきますから。 時代に合わせて席を移動する柔軟性を持つこと 2026年、かつて私が勝ち取ったブルーオーシャンだった領域は、生成AIの台頭によって大手企業ですら数千人規模の人員削減を行うほどの荒波に呑まれていっています。 私も最初は、「自分の仕事が奪われるのも時間の問題かもしれない」と、多少は悲観しました。 しかし、感情を脇に置き、ニュートラルに現状を注意深く観察してみてください。世界がどれほど激変しようとも、これから不足していく場所、新しく快適に座れる「空いている席」は、この世界のどこかに必ず生まれています。 一つの席に、執着しすぎないこと。時代が動くなら、自分もさっと席を変える。生き残るための大きな要素こそが柔軟性です。 結論 ― あなたにも、今、空いている席はある 今回、バツイチ、子持ち、高卒。34歳未経験という圧倒的な弱者が見つけた、泥臭い生存戦略についてお話させていただきました。 時代は常に動いています。ChatGPTやClaudeといった生成AIがどれほど進化しようとも、私たちが座るべき「次の席」は必ず世界のどこかに、静かに開かれています。 「もう年齢が遅すぎるから」 「学歴がなã

1„から、未経験だから」 「AIにすべての仕事を奪われるのが怖いから」 変化の激しいIT業界の入り口で立ちすくむ必要はありません。 自分の業界に新参（ここではAI）が現れたら、視点を少しだけ変えればいいのです。 大切なのは、トレンドの華やかさに惑わされず、底流にある本当の「需要」を見つめること。そして、完璧を待たずにまずその席へ滑り込む柔軟性を持つことです。 私が今、新しい席の上で次の未来を見据えているように、あなたにも、あなただからこそ快適に座れる席が必ず用意されています。 激変するこのAI時代、あなたは次に、どの席に座りますか？ 関連記事もお読みください！ 実際、つい最近も長年放置していた自身のブログを、AIと協業しながらわずか7日でNext.jsへフルリニューアルしました。変化を恐れて地縛霊にならないための、格闘の全記録は以下の記事にまとめています。","noindex":false},{"slug":"about/library","title":"海外ノマドエンジニアかみーゆの本棚","date":"2026-06-10","modifiedDate":"2026-06-20","category":"page","categoryName":"固定ページ","ogImage":"/thumbnail/about/library.webp","description":"ノマドエンジニア・かみーゆが今まで読んできたおすすめ本。哲学、脳科学、子育てに関する本が多い。","tags":[],"body":"私はほぼ毎日、読書をしています。 その人の本棚を見たら、人となりがわかる。 自分が読んで良かったと思う本をご紹介します。 コーチングのプロが教える心を動かすリーダーシップ | 鈴木 義幸 コーチングのプロが教える心を動かすリーダーシップ | 鈴木 義幸 この本は、私がまだIT業界に入る前、会社のOJT（職場内訓練）で出会った本です。 当時、大手企業に勤めていた私は、社員教育の一環としてコーチングを学びました。 ざっくりいうと、正論で部下を「コントロール」するのを辞めて、質問と傾聴で「自発的に動くやる気」を引き出す本です。 日本のコーチングを普及させた第一人者でもある鈴木さんが、実際に担当したクライアントの名前を変え、コーチングメソッドに沿ってその人がどう変化していったかを綴った名著です。 負債500億円を抱える企業の経営者になった元銀行マンが、プロコーチ（著者）のアドバイスをもとに会社を立て直していく実話ストーリー。 コーチは諦めない人、コーチは並走する人。 当時、まだ未熟だった私のメンタルを根底から変えてくれた、まさに「命の恩人」とも言える一冊です。 EQ心の知能指数 | ダニエル・ゴールマン著 EQ心の知能指数 | ダニエル・ゴールマン著 30代で心のあり方を科学的に理解したくて購入した本です。 Kindle版はありません。 人生の成功や幸福度を決定づけるのはIQ（知能指数）ではなく、自分の感情をコントロールし他者を理解する能力「EQ（心の知能指数）」であると、脳科学や心理学のデータをもとに証明しています。 著者はEQの要素として、自己認識、自己統制、動機付け、共感、社会的スキルの5つを提示。どれほど高い知能があっても、激しい感情の動揺（扁桃体の暴走）に理性が乗っ取られると人間は本来の能力を発揮できないと警告し、感情を客観的にマネジメントする重要性を説いた世界的名著です。 ホモ・サピエンス全史 | ユバル・ノア・ハラリ ホモ・サピエンス全史 | ユバルノアハラリ 歴史好きにはたまらない一冊です。 とにかく長い！ですが、あまりの面白さに2度も読破したお気に入りの本です。 世間のレビューはたくさん転がっていると思うので、私なりの必読ポイントをギュッとまとめておきます。 人間は「虚構」が大好き 元々は弱小生物にすぎなかったホモ・サピエンスが、他の人類種を圧倒できた最大の要因。

1国家、宗教、法律といった「目に見えない架空の概念（虚構）」を全員で信じ込み、数万人規模で柔軟に協力する能力（認知革命）を獲得したためです。 地球上の本当の勝者は「小麦」 人類は農耕と定住を始めて安定を手に入れたように見えますが、実は小麦の世話に人生の多くを支配され、寿命も栄養状態も狩猟採集時代より悪化していました。人間が小麦を栽培したのではなく、小麦が人間を家畜化したという独自の視点は目から鱗です。 「お金」という究極の虚構 誰もが信じるお金すらも、サピエンスが作り出した共同幻想（虚構）の一つ。自らの認知革命によって生み出した経済システムに、むしろ人間が支配されているという構造は、マルクスの『資本論』と併せて読むとより一層深みが増します。 嫌われる勇気 | 岸見 一郎 / 古賀 史健 嫌われる勇気 | 岸見 一郎 / 古賀 史健 2019年、セブ島の大学に進学するために一緒に来た息子が、大学を辞めて日本に帰ってしまいました。 海外の大学へ入学させるのは並大抵の苦労ではありませんでしたが、息子は入学してすぐ辞めてしまいました。しばらくは、息子の取ったその行動がどうしても許せませんでした。 セブの友人が勧めてくれたのがこの本です。 それまでの私の頑なな思い込みを捨てること。 アドラー心理学では、「自分の課題」と「他人の課題」を明確に切り分け、他人の課題には決して踏み込まないという教えがあります。自分がこれほど苦しい原因は、自分と子どもを混同してしまっていたからだと気づけました。 大切なのは、子どもの人生と自分の人生を混同しないこと。 私は「親としての正しさ」に囚われるあまり、息子の課題に土足で踏み込んでしまっていました。 息子に押し付けていた理想のほとんどは、私自身が子どもの頃に「こうしておきたかった」「やってほしかった」という過去の後悔から生まれたものだったのです。 事実をあっさりと認めて受け入れたとき、「理想の母親になれなかった」という自分への後悔も、嘘みたいに薄らいでいきました。 運命を拓く | 中村天風 運命を拓く | 中村天風 大正・昭和の激動期を生き、日本軍の元スパイという異色の経歴から、当時は不治の病とされた結核を患い、世界を放浪した末に独自の心身統一法を確立した中村天風師。その思想の真理が凝縮された一冊です。 経営の神様と呼ばれた松下幸之助から、メジャーリーガーの大谷翔平まで、時代を超えて日本のトップを走り続ける多くの大物たちが心の拠り所（愛読書）にしてきたことでも知られています。 本書が一貫して説いているのは、 「いかなる過酷な状況であっても、絶対に心を消極的にするな。常に毅然として、圧倒的に積極的であれ」 という力強い教えです。医学や心理学の枠を超え、自らの生命力を最大に高めるための具体的な「心の使い方」が示されています。 ぶっちゃけ、現代の私たちからすると文体が古く、お世辞にも読みやすいとは言えません。しかし、Kindleを開き、スマホの液晶画面越しに活字を追っているだけでも、文字の奥から凄まじいç”

1ŸéœŠï¼ˆãƒ‘ワー）が立ち上ってくるのを感じる、まさにエネルギーに満ちあふれた名著です。 子どもが育つ魔法の言葉 | ドロシー・ロー・ノルト 子どもが育つ魔法の言葉 | ドロシー・ロー・ノルト 会社でコーチングのOJTを受けている時に出会った、子育ての知恵と優しいメッセージがたくさん詰まった一冊です。 「本当に、子育てを始める前に知っておきたかった」と思わされる言葉に溢れています。 本書の核心は、世界中に語り継がれる 「子は親の鏡」 というシンプルな真理です。子どもは親の言葉遣いや態度、家庭の環境をそのまま吸収して育つため、子どもの行動を変えたいなら、まずは親自身の関わり方を見直すことの大切さを説いています。 子は親の鏡。 けなされて育つと、子どもは、人をけなすようになる ... 愛していれば、子どもは、人をは愛することを学ぶ シンプルで短い詩のような文章で構成されているため、親のバイブルとしてはもちろん、子どもへの読み聞かせにも最適な温かい名著です。 子どもはあなたに大切なことを伝えるために生まれてきた | 池川明 子どもはあなたに大切なことを伝えるために生まれてきた | 池川明 これから子どもを迎えるすべての人に、生まれる前に読んでほしい一冊です。 ある日、バーで偶然一緒に飲んでいた、セブ島留学中の男性から勧められて購入しました。 著者の池川明先生は、産婦人科医としての長年の臨床経験のなかで、子どもたちから「お腹の中にいたときの記憶（胎内記憶）」や「生まれる前の記憶」を数多く聞き取り、検証を重ねてこられた第一人者です。 本書が伝える最も強いメッセージは、 「子どもはみな、自ら親を選んで生まれてくる」 ということ。たとえ生まれつきの障害があったり、どんなに過酷な家庭環境であったりしても、子どもは親を助け、愛を教えるために自らその環境を選んできた「勇気のある魂」なのだと説かれています。 子どもたちの純粋なインタビューに、熱い涙が止まらなくなり、カフェで一人で号泣してしまいました。 脳内麻薬 人間を支配する快楽物質ドーパミンの正体 | 中野信子 脳内麻薬 人間を支配する快楽物質ドーパミンの正体 | 中野信子 更年期によるものなのか、精神的にひどくキツかった時期に、「この生きづらさの正体を知りたい」と必死に探るなかでたどり着いた一冊です。 脳科学者の中野信子氏が、人間を狂わせる動機付け物質である「ドーパミン」のメカニズムを徹底的に解き明かしています。 ドーパミンはいわゆる「やる気」や「快感」を生み出すホルモンですが、脳が1日に分泌できる量には限りがあります。しかし現代社会には、アルコール、甘いお菓子、SNSの無限スクロール、ネット動画など、安易にドーパミンを過剰分泌させる強い誘惑（報酬予測の罠）が溢れています。これらを無意識に消費していると、脳の受容体が麻痺し、 「本当に集中したい、やる気を出したい時にドーパミンが完全に枯渇している状態」 に陥ってしまうのです。 この脳のバグとも言えるメカニズムを知ることで、初めて具体的な対策が見えてきました。情報や手軽な快楽を遮断し、脳をニュートラルに戻すために、私が「散歩」や「適度な運動」、そして指先に没頭できる「刺し子」を始める決定的なキッカケをくれた命の恩人とも言える名著です。 ドーパミン中毒 | アンナ・レンブケ ドーパミン中毒 | アンナ・レンブケ スタンフォード大学医学部の精神科医であり、依存症医学の第一人者であるアンナ・レンブケ氏の著書です。 著者自身の「ロマンス小説への依存」という意外な告白や、深刻な依存に悩むクライアントたちのリアルな症例をもとに、脳の快楽と苦痛のメカニズムを解き明かしています。 本書が提示する、ドーパミンを過剰消費する現代社会から脳をリセットするための対策が、以下の頭文字をとった 「D-O-P-A-M-I-N」のステップ です。 D（Data）：データ 自分が何にどれくらい依存しているか、まずは事実を正確に把握する。 O（Objectives）：目的 なぜそれ（SNSや動画など）を使ってしまうのか、本当の理由を考える。 P（Problems）：問題 その依存行為が、自分の人生や健康にどんな悪影響を与えているかを見つめ直す。 A（Abstinence）：禁欲 最低30日間、その依存対象を完全に断ち切って脳の報酬系をリセットする。 M（Mindfulness）：マインドフルネス 湧き上がる衝動や退屈、苦痛を、ジャッジせずにただ観察する。 I（Insight）：洞察 禁欲を続けることで、自分が依存に隠していた本当の感情や自己に気づく。 N（Next Steps）：次ã

1®ã‚¹ãƒ†ãƒƒãƒ— リセットされた脳で、今後その対象とどう健康的に付き合うかのルールを決める。 脳の「快楽と苦痛は同じ天秤の上にある」という仕組みを知り、適切な距離を置くための具体的なロードマップを示してくれる、現代人必携の処方箋のような名著です。 パワーかフォースか | デヴィッド・R・ホーキンス パワーかフォースか | デヴィッド・R・ホーキンス 精神科医であるデヴィッド・R・ホーキンス博士が、数十年間にわたる膨大なキネシオロジー（筋肉の反射）テストのデータ集積から、人間の意識を「アトラクターフィールド（意識レベル）」として数値化した不朽の名著です。時に疑似科学として扱われることもありますが、本書が提示するフレームワークは、目に見えない「心や感情の動き」を極めてロジカルに可視化してくれます。 本書の核心は、人間の意識をレベル1から1000の測定値に分類し、レベル200の「勇気」を境界線として定義している点にあります。200未満は生命力を奪うネガティブな「フォース（力）」の領域であり、最底辺のレベル20「恥」やレベル30「罪悪感」から、レベル175「プライド」までが含まれます。一方で、200以上は生命力を高めるポジティブな「パワー（真の力）」の領域であり、レベル250「中立」、レベル350「受容」、そして高次元の「愛」や「悟り」へと続いていきます。 キネシオロジー自体は正直、難しいし現実的にできるテストではないです。 私が声を大にして言いたいのは、レベルを知ることだけでも、自分の意識レベルを知る羅針盤になること。 日常で湧き上がる「嫌悪感」や「不快感」といった負の感情を、客観的に俯瞰して「答え合わせ」ができるようになることです。たとえば、誰かを見下し拒絶したくなる激しい嫌悪感は、実はレベル175の「プライド」が引き起こしている自己防衛と気づかせてくれます。 本書は単なるスピリチュアル界隈でも絶賛されている本です。が、自分の現在地を俯瞰し、意識レベルを自ら書き換えるための一冊として、強くおすすめします。","noindex":false},{"slug":"entry566","title":"Gatsbyと別れて、Next.jsに引っ越した話 〜旦那とキッチンと開発環境は新しい方がよろしくてよ〜","date":"2026-06-07","modifiedDate":"2026-06-17","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2026/entry566.webp","description":"Lighthouseで100点連発の爆速ページへ！ Netlifyのサイレントクラッシュやsharpの起動待ち地獄に限界を迎え、趣味ブログをNext.js（SSG）へ完全リニューアル。generateStaticParamsの罠や構造化データの制約をハックし、わずか7日で圧倒的ハイパフォーマンスを勝ち取るまでの全記録。","tags":["JavaScript","NextJS","npm"],"body":"2026年、巷で流行りのサプライチェーン攻撃。 業務では神経を尖らせて対応していたくせに、この趣味ブログだけはメンテナンスを怠り放置しておりました。 サプライチェーン攻撃 本体ではなく、依存パッケージなどの「供給網」を狙う攻æ

1’ƒã€‚過去には超有名npmパッケージがGitHubアカウントの乗っ取りで汚染され、数百万件の開発環境へマルウェア入りの最新版が自動配信される事件も起きました。気づかずアップデートした瞬間、裏で機密情報を盗み出す最凶の脅威。 意を決して pnpm で一気に依存パッケージをアップデートした瞬間、環境が完全に崩壊。。。 pnpm dev も pnpm build も一切走らない、ただの動かない粗大ゴミ爆誕 pnpm PC内の1箇所にパッケージの実体を保存し、プロジェクトへはハードリンクを貼ることで容量を節約する高速なパッケージマネージャー。 最大の強みは「幽霊依存（package.jsonに未記載の間接依存）」を構造的に排除するセキュリティの高さ。サプライチェーン攻撃による意図しないマルウェア汚染リスクを最小限に抑え込めます。 このブログはかつて1記事5,000PVの栄光の形見。表示スピードにこだわり、2020å¹´11月にAIもない中で必死にググって当時新星のように現れた Gatsby で再構築しました。 SSGは 表示スピードが神 だからね！ SSG（静的サイト生成） ビルド時にデータを取得し、全ページを事前に「静的HTML」として生成する仕組み。リクエスト時にDBクエリ等が発生しないためCDNキャッシュと相性が良く、表示速度が圧倒的に速い。反面、更新のたびに再ビルドが必要な点がトレードオフ。 ところがどっこいITの世界では6年はすでにレガシー。未練たらしく現状維持に甘んじていた結果、いつの間にか脆弱性の詰め合わせみたいになってました笑。 そこでGatsbyと絶縁し、Next.jsへのフルリニューアルを決意しました。 これは、このシステムを夜なべしてわずか7日間で再構築した血の滲むような記録です。 神は6日で世界を創造して1日休んだらしいけど、人間の私は7日かかった（笑） 運命の分かれ道・別のライブラリへの乗り換えか無理やり修正して使うか？ ブログを更新したい衝動を抑え、私はリニューアルするか、開発環境を無理やり直して使うか3秒くらい悩みました。 | パッケージ | プラグインの説明 | 理由 | | :--------------------------- | :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | gatsby | | 本体。Gatsby Cloudの閉鎖に伴い、エコシステム全体が急速に冷え込み、プラグインの更新が完全にストップ。現代の最新Node.js環境やGitHub Actions等のアップデートに追いつけなくなっている。 | | gatsby-plugin-gatsby-cloud | クラウド連携プラグイン | 提供元のサービス自体がとっくに終了しているため、入れておくだけでビルドエラーや警告のノイズを吐き出すゾンビコード。 | | reactreact-dom | フロントエンドコア | アのバージョン自体は問題ないが、周りの古い gatsby-remark-* 系プラグインがこのReact 18の仕様（ハイドレーション等）に対応できず、スタイル直書きページ等でクラス名のズレを起こして裏でクラッシュ（CSS崩壊や広告停止の引き金）。 | | textlint | 文章校正ツール | ブログの品質を保つ素晴らしいツールだが、古いGatsby周辺パッケージのNode.js縛り（依存関係の競合）のせいで、textlint側も最新のルールやGitHub連携モジュールにアップデートできない足枷。 | | これからもGitHubを使っていくし、このままGatsbyを続けるとなると、これらの古い「負の遺産」と化したNodeモジュールたちともずっと付き合い続けることになる。……うん、やっぱり無理！ 追い打ち：Peer Dependencies 地獄で広告とスタイルがお亡くなりになりました Peer Dependencies（ピア・ディペンデンシー／同輩依存） 「プラグイン（子）側が、『俺を動かしたければ、親であるお前（プロジェクト）がこのバージョンのパッケージを用意してくれよな！』と要求する仕組み」のこと Gatsby環境では、コアとなるGraphQL（v16.6）やReactï¼

1ˆv18.2）の周囲に、数年前の古いエコシステム向けに書かれた大量のプラグイン（gatsby-remark-* や計測系）がぶら下がっている。 最後に記事を書いたのは2026å¹´3月20日でしたが、それ以来放置していたこのサイト、気づかないうちにお問い合わせページとポートフォリオページがCSS崩壊していたという追い打ち。 原因はどうやら、Netlify のEdgeサーバー側で配信時のHTML圧縮（Brotli/Gzip圧縮）やセキュリティヘッダー、あるいはHTMLパース（解析）の最適化ロジックのアップデートが適用された可能性が濃厚。 Peer Dependencie の代表格といえば、gatsby-plugin-sass と gatsby-plugin-styled-components というプラグイン。 コイツらが「古いバージョンのReactやGraphQLじゃないと動かん！」と背後で猛威を振るうのです。 さらに厄介なのはビルド自体はエラーを出さずに「成功（200 OK）👍️」のフリをすること。 で、 styled-components 「CSS（styles）を直書き（インラインまたはファイル内定義）」していた部分だけが、ピンポイントでハイドレーション・ミスマッチを起こして全滅したみたいです。 執拗に表示スピードにこだわる私。 スタイルをワンソース化するため、今ではオワコンになりつつある SCSS で書いたコードを、わざわざローカルで泥臭くバンドルするという鬼畜な効率化（？）をしていました。 おかげさまでサイト全体が壊れなかったので気づかなかったけど、こんな恥ずかしい状態で放置してたなんて泣。 広告のスクリプトまで道連れにサイレントクラッシュしておりました。 僅かだけど、広告収入は飲み代の足しだったのに(æ³£) レガシー開発環境への未練は良くない。旦那とキッチンは新しいほうが良いって昔聞いたことがあるし WordPressがクラシックからブロックエディタへ移行したとき、一部のファンがそれを拒絶し、ソースコードを無理くりこねくり回して延命させようとする姿をたくさん見てきました。 もう執念というか、 成仏できない地縛霊 にしか見えない。 それらのコードは現行エディタの挙動を邪魔する単なる負の遺産でしかないですよね。 負の遺産にどれだけ涙を流してきたか！私はタタリ神になりたくない！ 技術のアップデートは、変化ではなく「進化」。 IT人材なら新しいものを受け入れるのを覚悟しろ 旦那とキッチンは新しいほうが良いって、今は亡き往年の名女優・市原悦子さんも昔の給湯器のCMで言っていた気がする。 ということで、これまでのレガシー環境とはさっぱりお別れすることを決断しました。 わずか7日！Next.js でリニューアルの全貌 候補に上がったフレームワークは、モダン静的サイトの超新星 Astro か、フロントエンドの絶対王者 Next.js か。 元々この趣味ブログは、できるだけ低コストで維持するため、無料枠で使える Netlify や Vercel などの静的ホスティング（SSG）で運用する方針。 表示スピード（表示速度こそ正義！）の観点からも、事前ビルドによる SSG（静的サイト生成） は絶対条件。 うちの会社のサイト Astro 製だしなあ Astro は最初から SSG に特化していて移行も楽そうだった。一方、Next.js はフルスタック志向で、SSG 運用しようとするとちょっとクセがある。あえて Next.js を選ぶのは、間違いなく茨の道だ。 Next.js 3秒だけ悩んで、 茨の道 Next.js に決定。 縛りは以下の通り コードはAIに任せ、 自分では極力書かない（ただし全自動ではなく、人間が軌道修正する「Human in the Loop」を徹底する） Gatsby同様、TypeScriptはあえて使わず、 JS/JSXで爆速ã

1§æ›¸ãç›´ã™ 形骸化させないための ユニットテストだけはしっかり通す 一刻も早く広告配信（飲み代）を復活させたいので、アクセスの少ない ニッチなページは一旦「Coming Soon」で後回し にする スタイリングは、Gatsby時代の既存CSSのコピペ流用と Tailwind CSS のハイブリッドで徹底的に ~~手抜~~ … 効率化 する やってみたらAstroより遥かに辛かった笑 Astro比：わかってたもののSSG周りがめんどっちかった Next.js は本質は「サーバー側で都度レンダリングする（SSR/ISR）Webアプリ」向けのフレームワーク。これをあえてピュアな SSG（静的サイト生成）専用 として動かそうとすると、まあまあ面倒が発生。 特に、マークダウン記事を静的HTMLとして出力するために、 Dynamic Routes（[slug]） の裏側で全記事分のパスを事前に生成してあげる generateStaticParams などのコードをわざわざ書かねばならない。。。 Gatsby時代私の性格上、書き溜めた500以上の記事ファイルを1つのフォルダにドカンと入れるのがどうしても許せず、「年代別フォルダ（2014/, 2024/...）」に小分けして整理していました。 これが Next.jsのファイルシステムルーティングと相性が悪く 、フォルダを再帰的に探索するコードをわざわざ書く羽目に。 悲劇：カテゴリーやタグ一覧ページが開発環境（pnpm dev）でキレる SSG でカテゴリーやタグの一覧ページを実装後、本番ビルド（pnpm build）は通るのに、なぜか開発サーバー（pnpm dev）を立ち上げているときだけ怒ってくる。 かなり開発が進んでからこのエラーに気がついたので、直近のどのコードが原因なのか心当たりなし。眠いし、 AI はポンコツな修正コードばかり吐いてくる。 そこで表示されていた頃の平和な記憶をたよりに、 Git のコミットログをさかのぼって犯人を特定。 原因は next.config.mjs で定義していた output: \'export\'（完全静的エクスポート設定） だった。開発モード時にこの出力設定が有効になっていると、一部の動的ルーティングやクライアントサイドのルーティング解決で Next.js がバグを吐いていることが分かった。 かゆいところに手の届かない、Next.js の Image コンポーネント Gatsby時代には、WebPなどの複数フォーマットへ自動変換・出力してくれる神プラグイン gatsby-image がありました。 これこそ、依存関係カオス（Peer Dependencies）の元凶ではありましたが……。 私、ページ表示の速さには異常に固執しております！！ しかし、Next.jsの標準機能 next/image は、静的エクスポート（output: \'export\'）運用をしようとすると、ビルド時の自動画像最適化（WebP変換やリサイズ）をサポートしてくれません。 そこで、画像最適化タスク sync-images-prod.mjs を自作して対応することに。 といってもAIと協業だけどね！ このコマンドで、「800px幅のWebP」と「400px幅のモバイル用WebP」をホスティング先の dist 配下にある /images/posts/ へ自動生成して格納。 現代（2026年）のモダンブラウザはほぼすべてWebPをサポートしているため、古臭い「JPG/PNGへのフォールバック」は完全排除。 *.md 記事内の画像パスも、HTMLへの出力過程でWebPに一括置換するシンプルな関数を通すだけにしました。 マジで骨が折れた。 まあ、もし運用してみて他の方法が見つかれば、その時にまたサクッとå

1¤‰ãˆã‚Œã°ã„いだけの話。 惜しまれる GraphQL。仕方ないので自作検索 json ファイルを自動出力 Gatsby には、サイト内のあらゆるデータ（記事、画像、メタデータなど）をビルド時に一括でかき集めてクエリできる「GraphQL」という神システムが標準搭載されていました。 が、Next.js にはもちろんそんなものはありません。 そこで今回、ビルド時にすべてのマークダウンファイルを走査し、必要なメタデータと本文を軽量化した1つのインデックス用JSONファイル（ posts-index.json ）を自動出力するスクリプトを自作することに。 フルスタックの茨の道！！ 元々「サイト内検索」を実装するためだけに作ったけど、結局コイツが今回のリニューアルで一番大活躍。 記事一覧、カテゴリー・タグ別ページ、関連記事の抽出、RSSフィード、サイトマップ生成にいたるまで、すべてこの1つのJSONを読み込んでフィルター・ソートするだけで完結させることが出来ました。 このリニューアルで初めて救われたー😢 構造化データを head タグに入れられないNext.jsの謎制約 またまた、Next.jsの「かゆいところに手が届かない」仕様が目の前に立ちはだかります。 共通の親ルートとなる layout.jsx でなら head タグ周りを一元管理できるが、子である各記事の page.jsx から親の layout.jsx に向かって props などのデータを逆流させて渡すことは原則できない。 page.jsx から各記事固有の meta タグ（Title や OGP）をヘッドに挿入するための generateMetadata という仕組みはあるものの、構造化データの タグをきれいに差し込むにはちょっと力技が必要になる。 昨今のSEOでは、リッチリザルト（検索結果に星評価や画像を表示させるやつ）を狙うための「構造化データ（JSON-LD）」の追加は今や必須。 ページに構造化データがないなんて、 ノーパンでミニスカートを履いて街を歩く ぐらい心細い!! 調べたところ、天下のGoogle様も以下のように仰っていました。 構造化データは必ずしも に入れる必要はありません。HTMLのどこに配置しても検索エンジン（Googleなど）は読み取れますが、一般的には または のどちらかに入れられます。 構造的にはキレイに構造化データを head 内に格納したかったけど、Next.jsの仕様と格闘するのも時間のムダなのでサクッと Page.jsx の main タグ直下に直張りすることに。 人間諦めが肝心 ユニットテストをやり終えた後に飛び込んできた、心臓に悪い Vitest の脆弱性ニュース 全部テストを終わらせて無事に公開した直後、Xのタイムラインで最悪のニュースを発見してしまいました。 JavaScriptテストフレームワーク「Vitest」に複数の深刻な脆弱性| X 53M Downloads At Risk: Critical 9.8 CVSS Vitest Remote Code Execution Vulnerabilities Disclosed 今回のリニューアルでは、ユニットテスト用として、モダンで高速、世界中で愛されている Vitest を採用。 せっかく脆弱性から脱出するためにテストしたのに、テストツール側に伏兵が潜んでいただなんて！！ 対象機能: Vitestの「Vitest UI」などを起動した際に有効になる APIサーバー（WebSocketサーバー） 脆弱性の種類: CSWSH（クロスサイト・ウェブソケット・ハイジャッキング） 危険度: 非常に高い（CVSS スコア 8.8〜9.6 / Critical） 要するにこういうこと。 開発者がVitest UIなどのAPIを起動した状態で悪意のあるウェブサイトを閲覧すると、サイト内のスクリプトがローカルのWebSocketサーバーに認証なしで強制接続されます。これによりVitestのファイル書き込み・再実行APIが不正利用され、テストファイルを改ざんされた上で自動実行されることで、開発者のPC上で任意のコマンドが実行されてしまいます。 ヤバいバージョン 2.1.8 までのすべての 2.x ç³» 3.0.4 までのすべての 3.x ç³» 修正済みバージョン 1.6.1 / 2.1.9 / 3.0.5 以降 早速調べたところ、私の環境では \\"vitest\\": \\"^4.1.7\\" だから問題なかったです。ほ。。。 まとめ・Gatsby とお別れを決意し、Next.js フルスタック茨の道を歩んだ先に見えたもの 連日夜なべして実装を続け、あまりの睡眠不足に椅子の上で本当に意è­

1˜ã‚’失うこともありました。10分だけ。（俗に言う気絶） Gatsby時代は画像処理ライブラリ（sharp）に毎度付き合わされ、コイツに起因する「開発サーバーの起動待ち」と不毛な戦いを繰り返してました。 起動するたびに裏で環境に合わせたネイティブバイナリをネットから落とそうとするため、オフラインだと即死して起動すらしないという謎の縛りプレイまで強制される始末。 Gatsbyの他のプラグイン（CMS連携プラグインやマークダウン拡張など）がそれぞれ「少しだけ違うバージョンの sharp」を内部で要求することが頻発。 これにより、node_modules の中で複数の sharp が競合し、「昨日まで動いていたのに、今日 npm install したら sharp のバージョン競合で開発サーバーが一切立ち上がらなくなった」 という、多くのエンジニアを絶望させた風物詩（依存関係カオス）を引き起こしていた。 なぜ私は Gatsby にこだわってたのか。もはや私が地縛霊だったのだろうか。。。 ク◯環境から解放！！Next.js のビルドスピードの爽快感サイコー！ こんなに快適にブログを書ける麗しき環境を手に入れたのであれば、たった数日の睡眠不足なんて屁でもないです。 機能や見た目はほぼ一緒ですが、晴れてフレームワークは完全に Next.js へ生まれ変わりました。 嬉しい副産物は、ページの表示スピード。 Lighthouse のスコアは PC は常に95 ‐ 100をキープ。SPでは 80 以上、良いときは 100 近く行きます。広告を3枚も貼ってるのに！ 今回は突貫で仕上げたので、リファクタリングして改善します。 え、本当に全部捨てちゃうの……？ せっかく何年も一緒に頑張ってきたのに…… 連日の寝不足でそんな声（俗に言う幻聴）が聞こえてきましたが、そっとGatsbyのあるリポジトリを削除しました。 別れには痛みが伴うもの。みなさんも過去を引きずってはダメです。 恋人も開発環境も必要に応じてさっさと乗り換えてください。 AIの助けもありましたが、晴れてたった7日（夜なべ）でNext.jsに載せ替え完了しました！ この記事が Gatsby などのレガシー環境から新しい環境に乗り換える方の一助になれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry564","title":"お酢のカビ・白いモヤモヤは腐敗？33℃の地でお酢をカビさせ、論文とAIを外脳にして完全攻略したプロトコル","date":"2026-04-09","modifiedDate":"2026-06-17","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2026/entry564.webp","description":"お酢の白いモヤモヤ・浮遊物はカビ？それとも腐敗？焦って検索したあなたへ、正確な見分け方と対処法を冷徹に解説します。平均33℃のセブ島でお酢作りに挑み、3日で本物のカビを発生させてトイレに放流したエンジニアが、NotebookLM（AI）と論文を外脳にしてカビや蟻のバグを完全デバッグした1ヶ月のサバイバルプロトコルです。","tags":["AI活用","セブ島生活","おもしろ"],"body":"突然ですが、みなさん腸活してますか？ 海外生活8年目のセブ島はジャンクフード全盛の地。体にいいオーガニックな生酢は1本2,000円以上と財布に大ダメージ。 よし、手作りしよ！ 希望いっぱいに、お酢作りスタートしたった3日目に本物のカビを発生させ、全量をトイレに放流しました。 「これってカビ？ 腐ってるから捨てなきゃダメ？」 この記事にたどり着いたあなたが知りたいのは、お酢を使った掃除法ではなく 「目の前のお酢がカビなのか、無害なマザー（酢酸菌）なのか」 という事実のã

1¯ãšã§ã™ã€‚ 無害（マザー）：白いモヤモヤや膜、ゼリー状の沈殿物。お酢の成分なので体に無害。 有害（カビ）：表面が「白いワタ状」に毛羽立っている、黒や緑に変色している。本物のカビ（汚染）なので即廃棄。 この記事は、AIを外脳にしてカビの発生に打ち勝ち、極上の自家製フルーツビネガーを収穫するに至った、エンジニアの執念のサバイバルログです。 なぜ手作りマザー入りお酢なのか？ 〜 BRAGG が高くてエイヤーで始めた経緯 〜 私、普段から健康を考えてマリネやサラダにお酢を使っています。 健康に気をつけるようになって以来、工業的に大量生産されるいわゆる、蒸留酢 （Silver Swan Vinegarとか。 1リットル 50 〜 90ペソ 程度と安価）を使うのをなんとなく卒業。 ※ 2026å¹´4月時点で1ペソ2.65円。 ちょっと背伸びをして、 Heinz のオーガニックアップルサイダービネガー（スーパーで 500ペソ 前後）に切り替えました。 どうせならもっとしっかりマザー（酢酸菌）が入ったお酢はないかな？ 探した結果、最強のマザー入りお酢 BRAGG というメーカーが、低確率で近所の Super Metro に売っていることが発覚。早速購入しましたが、 946ml で 800ペソ前後（約2,000円超） と地味におサイフ直撃。 セブ島でお馴染みの居酒屋「利久」の飲み放題（ 〜499ペソ ）より高い……。 利久 - Re-Q Japanese Restaurant これは毎日使うには死活問題ですよね。とはいえ、 Heinz も BRAGG もやっぱり美味しいんですよね。 毎日の食事は大切。……よし、ちょっと作ってみようかな。 お酢の白いモヤモヤ？マザーってなんぞ？ そもそも栄養価は？ 「マザー（酢酸菌母）」とは、お酢が発酵する過程で生まれる 膜 や 沈殿物 のこと。 見た目は少し驚くかもしれませんが、これこそが「生きたお酢」の証です。 マザー自体の栄養素はそれほど多くありませんが、 腸活・健康へのメリット が凝縮されています。 酢酸菌や酵母の塊: 腸内環境を整える善玉菌（プロバイオティクス）としての役割。 タンパク質や酵素: 発酵の過程で生成される、消化を助ける微量成分。 未濾過のパワー: 市販の透明なお酢では取り除かれてしまう、発酵由来の栄養がそのまま残っています。 セブの新鮮な魚介を使ったマリネをよく作るのですが、お酢をマザー入りに変えるだけで 明らかにウマイ 😋。 健康にいいのはもちろん、シンプルに『料理の格』が上がる。これが手作り最大のメリットかもしれません。 お酢ができるまでの 2段階ロードマップ お酢づくりは世界中で親しまれている、もっとも身近な 自宅醸造 の一つです。セブでもココナッツやサトウキビを使った自家製酢がポピュラーだと聞きます。 お酢が生まれる仕組みは驚くほどシンプルでした。必要なのは 「糖」 と 「酸素」 、そして 「適切な温度」 だけ。 1. 仕込み: フルーツを水に浸し、野生の酵母や菌の力を借りる。 2. アルコール発酵: 定期的にかき混ぜて酸素を送り込み、糖をアルコールに変える。 3. 酢酸発酵: アルコールが消失し、酢酸菌が元気に活動を開始。 4. 完成: 表面に厚い マザー（膜） が形成されれば、自家製お酢の収穫！ お酢づくりに最適な気温は 25 〜 30度 とされています。 プロトタイプスタート！ 3つのトロピカルフルーツでお酢作り挑戦 複数の AI （ Grok や Gemini 、 Copilot など）に相談し、醸造に適したフルーツの方向性を探ります。 最終的に、インディアンマンゴー（真ん中）、グアバップル※（左）、カラマンシー（右）の 3種 を選定しました。 ※ 別名アップルグアバ。グアバの改良種 【プロトタイプ構成】 容器: 750ml 容量の広口ガラス瓶 3つ 。洗剤洗浄および煮沸消毒済み。 水分: 未開封のボトルウォーターを使用。 仕込み: マンゴー 6個 とグアバップル 1個 はミキサーで粉砕。カラマンシー 40個 は手絞り。農薬の可能性があるし、皮はすべて除去。念のため事前に重曹でつけ置きして洗う。 スターター: 菌の活性を促すため、 BRAGG のマザー入りお酢を大ã

1•ã˜ 2 ずつ追加。 環境: 瓶の口にキッチンペーパーを被せ、直射日光を避けるためキッチンの高所にある戸棚に格納。 AI から 1 〜 2回 の撹拌を推奨されたため、基本的には戸棚の中に収めっぱなしの状態でした。それでも翌日にはマンゴーとグアバップルが激しく発酵し、ブクブクと泡立ち始めました。 特にグアバップルは、撹拌するたびにトロピカルな香りが部屋中に広がり、期待爆上がり。 AI のガイド通りに進めてるし、うまくいくに違いない!! 根拠なくそんなことを確信していました。 無念のグアバップル離脱。お酢に本物のカビが生えるとどうなる？3日目の大パニック 翌日、夕方の撹拌時に事件が起きました。グアバップルの表面に、小さなワタのような物体を 2個 発見。どう考えてもマザー（酢酸菌膜）ができるには早すぎます。 AI に状況を伝えると、表面にカビが生えるケースがあるとのこと。臭いで判断できるというアドバイスもありましたが……。 グアバップルの香りが強すぎて全くわからんわい涙！ さらに AI に対策を仰ぐと、提示されたのは以下の 2通り の選択肢でした。 選択肢 A：廃棄 カビは目に見えない「根」を液体深くまで張っている可能性がある。 選択肢 B：継続 カビの部分だけを掬い取り、醸造を続行。発酵が進み、酸度が高まればカビを抑制できる。 香りの良さから期待がマックスだったグアバップル。未練はありましたが、汚染された作品は残したくない。苦渋の決断を下しました。 結果、全量を廃棄。泣く泣くトイレに流しました。 さよなら……。大好きだったわ。 カビが生えた瞬間の写真はありません。相当なショックで動揺し、記録を残す余裕すらありませんでした。 エンジニア魂に火がついた瞬間。 NotebookLM に酢酸菌論文をぶち込んで本気モード突入 私にはお酢作りの経験はないけど、エンジニアリングとトライアンドエラーのスピリッツがあるじゃないか くよくよしていられないので、気を取り直して NotebookLM に専用のノートブックを作成しました。 NotebookLMとは？ Googleのノート作成・リサーチ補助ツール。 最大の特徴は、自分がアップロードしたソースだけを根拠に回答を生成すること。情報の正確性が高く、複雑なデータの構造化・要約に抜群に強い。 余談ですが、NotebookLMは恋愛遍歴から人生をデバックするのにも最適でした笑 投入したソース（エビデンス） 学術論文: 醸造プロセスや酢酸菌の特性に関する論文（ PDFやWebページ ） 実践知: お酢作りに関する、再生回数の多い信頼できる Howto 動画（ YouTube ） 現地最適化: トロピカルフルーツを使ったお酢作りの専門動画（ YouTube ） さらに、ここ 3日間 の詳細な作業ログをマークダウンで書き起こし、コンテキストとして投入。 プロ顔負けの専門性と精度が高い情報、そして人気醸造家たちの経験を武装した 「 AI 先生」爆誕です。 ログは発酵の様子だけではなく、目安になるよう気温だけでなく途中から内蔵テスター（味や香りの確認）も詳細を記録していきました。 ログなんてまともに一から書くの面倒なので、書式を決め、テキトーな文章をGeminiに投げて下書きを書かせて、情報の過不足調整し、時短しました。 NotebookLM のアドバイスに基づき、改善したプロトコル 廃棄したグアバップル以外のボトルを守るため、刷新したプロトコルを即座に適用しました。 配置の変更: 乾季のセブは最高気温が 30度 超え。暖かい空気は高いところにこもるため、高所の戸棚は不利です。最も温度が安定する「床置き」に変更し、タオルで遮光するスタイルに切り替えました。 撹拌回数の増加: 1日 2回 だった撹拌を 3回 に。浮いた果実を沈め、カビの発生リスクを物理的に排除します。 防塵・防虫の強化: 粗いキッチンペーパーから、目の細かいコーヒーフィルターへ。口はヘアゴムできっちり密閉します。 なぜお酢にカビが生えるのか？グアバップルだけが汚染された理由 NotebookLMの分析の結果、最大の原因は 果実が長時間空気に触れたこと。 繊維の多いグアバップルは浮きやすく、発酵が始まるとガスに押し上げられます。 気温の高いセブでは発酵ブーストが日本の比ではなく、この「浮上」が命取り涙。 果実の浮上を防ぐ有効な

1対策 重しの利用: 消毒したチーズクロスで果実を包み、お皿などで沈める。 高頻度の撹拌: 浮上した果実をこまめに沈め、表面の乾燥を防ぐ。 一方でマンゴーが無事だったのは、糖分が多く、グアバップルと比較にならないほど発酵が早かったためです。すぐに表面に保護膜（マザー）が形成されたこと、繊維質が少なく浮きにくかったことが勝因でした。 特に南国では発酵が爆速。よく見る一般的なレシピでは、セブでの醸造は不可能と痛感しました。 リベンジの歩み。 3つのお酢がどうなったか全部暴露 お酢へと昇華していく様子を、フルーツ別に紹介します。 最高の結果！ フルーティで飲みやすいインディアンマンゴービネガー（ 1ヶ月完璧成功 ） マンゴーは糖度が高く、ビネガー材料としての「優等生」です。その糖度の高さゆえにカビの難を逃れ、一番乗りで完成しました。 醸造フェーズの記録 アルコール発酵（ 9日間 ）: セブの酷暑（ 33 〜 35°C ）により、わずか 2 〜 3日 で激しい発泡と強いアルコール臭が発生。 酢酸発酵（ 8日間 ）: 日に 2、3回 の撹拌で酸素を送り続けることで、表面にマザーが形成。劇的に酸味が強化。 一時休眠（ 2日間 ）: 酸味が極限に達しましたが、通販 Lazada で注文したボトルの到着が遅れたため、過発酵を防ぐべく冷蔵庫へ避難。 ろ過・ボトリング（ 1日間 ）: 専用ボトル到着後、チーズクロスで果肉をろ過し、煮沸消毒した瓶に充填。 250ml の容器に 3本分 収穫。 熟成ãƒ

1»ã‚¨ã‚¤ã‚¸ãƒ³ã‚°:（ 2週間以上 ）: 冷蔵庫で寝かせ、尖った酸味にマンゴー由来の「まろやかさ」が加わるのを待つ。 一番のポイントは「 休眠の見極め 」。 NotebookLM のアドバイスがなければ、過発酵で酸味を失うか、未熟な状態で終わっていた可能性があります。 実食！ ハチミツやサラダドレッシングに最適 スライスしたトマト、きゅうり、紫玉ねぎに、塩・粗挽き胡椒・オリーブオイルを合わせたドレッシングとして活用。シンプルなのにバカ美味です。 他にも、ハチミツと炭酸を混ぜたビネガーサワーも作ってみましたが味に悶絶。 た、単なるお酢がこんなに美味しいなんてーーー涙！作った甲斐あったわ… 日本だと高価なマンゴーをここまで贅沢に使えるのは、まさにセブならではの特権です。 糖分不足を梨で救った 2世代目グアバップル。マザーは元気に育ってる？ チーズクロスが届いたあと、改めてグアバップルを購入し、醸造再始動。悪夢は繰り返さない。前回カビ事件で学んだプロトコルをきちんと実施。 仕込み グアバップル: 皮を剥き 小さめのダイス状にカット （約 270g ）。スケールが届いたので重さも計れるようになった。 物理防御: 果肉を煮沸消毒済みのチーズクロスで包み、容器内へ沈める。 スターター: BRAGG のマザー入り酢を大さじ 2杯 添加。 密閉: コーヒーフィルターをヘアゴムで固定。 グアバップルは強烈な香りで癒されるのですが、糖分不足で酸味が出ずに悩みました。 NotebookLM と相談し、香りを損なわない果実として「梨」か「白ブドウ」を推奨されたため、セブでも安価に手に入る 梨（ 1個 50ペソ ） を追加投入。 この頃から、私の口調がうつったのか、 NotebookLM の口調が妙にフレンドリーになり始めました。 醸造フェーズの記録 仕込み・初期停滞期（ 9日間 ）: 3月 22日 にグアバップル単体で開始。ピューレ状ではないので、物理的にエキスを絞り出すべくスプーンでガシガシする。セブの熱気で乳白色化は進んだものの、糖分不足からか味の薄い状態が長く継続。 梨ブースト・アルコール発酵（ 3日間 ）: 3月 31日 に梨を投入。梨の強力な糖分によって菌が劇的に再活性化し、一晩で ブクブク と激しい発泡が開始。 酢酸発酵（ 3日間 ）: 1日 5回 の超高頻度でガシガシ継続。梨の力でマザーが爆速で成長し、味覚が「相当酸っぱい」レベルへ到達。 最終安定化・静置（ 3日間 ）: 収穫前の仕上げ期間。酸度を安定させ、果肉を沈殿させることでろ過の精度を向上させる、セブ醸造所独自の重要プロセス。 ろ過・ボトリング（ 1日 ）: 夜に収穫。チーズクロスで梨とグアバップルのエキスを搾り出し、芳醇な「乳白色の最強酢」が 250ml 瓶で 2本半分 完成。 熟成・エイジング（ 2週間 ）: 冷蔵庫へ移動。 現在はエイジング中のため、まだ料理には使っていませんが、味見をすると非常に尖った酸味を感じます。マンゴーより収穫量が少なかったのは、ダイス状にカットしてチーズクロスに入れたため、歩留まりが悪くなったのが原因です。 撹拌をマメにできるのであれば、次はチーズクロスなしで挑戦した方が効率が良いかもー。 伸び悩むカラマンシー。ハチミツ投入も大苦戦… カラマンシーは糖分不足が深刻で、酸味が全然育たなくて大苦戦しました。 このままじゃただの薄い果実水じゃん… AI先生に相談した結果、クセの少ないLangneseのGolden Clear Honeyを計2回、助っ人として投入することに。 醸造フェーズの記録・

1前半 初期停滞（2日間）：3月10日仕込み。酸度が高すぎて菌が眠ったまま。変化ゼロ。 ハチミツブースト（2日間）：大さじ3投入。ようやく菌が目覚めて発酵スタート！ マザー形成（17日間）：表面に厚さ3mmの立派なマザーができて、マザー実食までいきました。ほのかにハチミツ風味で意外と美味しかった…けど。 マザーは酸味たっぷりで旨い！ ……でもハチミツ感強すぎ問題発生 アリがマザーの上を堂々と歩く衝撃 ハチミツを足しすぎたせいか、甘さが一向に消えない。 目指してた「キレッキレの清涼感のあるカラマンシービネガー」から、どんどん「甘酸っぱいハチミツドリンク」寄りになっていきました。 嫌な予感が……。 そして終盤、事件発生。 順調に育った強固なマザーが、なんとアリの橋になってしまいました。甘い香りに釣られて数匹の侵入を許してしまいました！ 見つけた瞬間、目を疑いました。小さいけど写真の赤丸部分にアリが…。 セブといえばアリ。コンドミニアムの最上階でも容赦なく来るんですよね。 「マザー守ってるつもりが、逆にアリのお城を作ってた…」というエクストリーム裏目に出てしまいました（笑）。 結局、強制終了してチーズクロスで念入りにろ過。自家用としてボトリングしましたが、衛生的に人様にお裾分けはできません…。 こっそり自分で消費します。 次回は絶対に水堀（水を張った皿）対策するわ… ちなみに、現地のフィリピン人たちはどうやってアリをシャットアウトしてるんだろう…？ ……いや、深く考えるのはやめましょう（笑）。 高温環境で再現しやすい！お酢のカビ・害虫を防ぐ自宅醸造サバイバルガイド 室温が25度を超える高温環境（セブや日本の夏など）では発酵が爆速で進むため、カビや害虫リスクも急上昇します。 私がカビ失敗とアリ侵入から学んだ「これだけは守りたい」ポイントを最小限にまとめました。 1. 準備の鉄則 果物：糖度の高いフルーツ（マンゴーやパイナップル）がおすすめ。 水：蒸留水を 強く推奨。 海外の水道水は塩素や細菌が強くもちろんNG。ミネラルウォーターもアルカリイオン水も醸造には向かない。 殺菌：瓶・道具は熱湯＋アルコールでしっかり消毒。まな板や包丁は事前に塩素系も併用すると安心。 2. 仕込みの黄金ルール 容器の4分の3まで果実、残りを蒸留水で満たす。 スターター：BRAGG などのマザー入り生酢を大さじ2杯入れる。 封印：コーヒーフィルター＋ヘアゴムで密閉（酸素は通しつつ虫はブロック）。 3. 毎日管理のポイント（これが命） 置き場所：床置き（タイルなど冷たい床はなお良し）＋タオルで遮光。高温がこもりやすい高所は避ける。 撹拌：1日3〜5回ガシガシ混ぜる（高温で発酵が速いので、浮いた果実を沈めてカビ防止＆酸素供給）。 害虫対策：瓶の周りに 水堀（水を張った皿） を作り、外側をアルコールで毎日拭く。 アリを見つけたら即アルコールで対応（セブのアリは本当に容赦ない…）。 4. 収穫と仕上げ 目安：仕込みから10〜16日。ツンとした酸味が出たら収穫。 熟成：濾過後、冷蔵庫で2週間〜1ヶ月寝かせるとまろやかになります。 高温環境では『床置き＋高頻度撹拌＋水堀』が最強の組み合わせ。最初はこれだけ意識すれば大丈夫でã

1™ï¼ 約1ヶ月の失敗だらけ実験を終えて。素人がマザー入りお酢を作ってわかったこと 結局、お酢作りって「料理」じゃなくて 「菌の飼育」 なんだなって実感しました。 ネットの悠長なレシピ（「数日に1回混ぜるだけ♪」とか）は、セブの気温33度超え環境では通用しません。 発酵が爆速で進む分、カビも蟻も爆速で来る。 「マニュアル通りにやったのに…」を繰り返して、ようやく「その土地に合わせたプロトコル」が大事だと身をもって学びました。 一番頼りになったのは、 NotebookLMに論文とYouTubeをぶち込んで作った「 AI先生 」 です。 カビかマザーかの判別 糖分不足の対処法 衛生面の的確アドバイス 収穫タイミングの見極め 正直、AI先生がいたからこそ、いろんなことが大丈夫だった!! 普通のAIだけだったら、グアバップルでカビた時点で心折れて終わってたかもしれません（笑）。 論文や実践動画をしっかり食わせて「外脳」として使ったおかげで、失敗が最小限で済み、予想以上にスムーズに進められました。 失敗は仕様。リトライこそ本番。 エンジニア魂で微生物と格闘してみたら、食卓がちょっとだけ科学的に、しかもバカ美味しくなりました。 あなたも「なんかやってみたい」って思ったら、気軽にエイヤーで始めてみてください。 AI先生を相棒にすれば、意外と楽しく続けられるかもですよ！","noindex":false},{"slug":"entry563","title":"【フィリピン・セブ島貧困のリアル】ゴミ集積所で暮らす若年ママにネイルを教えた半年の記録","date":"2026-03-20","modifiedDate":"2026-06-15","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2026/entry563.webp","description":"フィリピン・セブ島のきらびやかなリゾートの裏側にある、墓地やゴミ集積所といった過酷な環境で暮らす若年ママたち。認定NPO法人DAREDEMO HEROのボランティアとして、半年間にわたりネイルの職業訓練を施したネイリストの記録。日本の貧困との違いや、技術を現金に変えていく彼女たちのリアルな自立支援の現場を綴る。","tags":["セブ島ボランティア体験記"],"body":"日本人の私は、あなたたちの状況や心境を理解したなんて、とても言えません。 日本人の貧困なんて、たかが知れてるから。 認定NPO法人「DAREDEMO HERO」にて、半年間にわたるネイル講習の講師を務めました。 フィリピン・セブ島といえば青い海のリゾートを思い浮かべる方が多いですが、華やかなビジネス街のすぐ隣には、トタン板一枚を隔てて一般的な「スラム街」すら追われた人々が暮らす、墓地やゴミ集積所といった圧倒的な貧困エリアが広がっています。 今回は、10代で出産を経験し、義務教育すら満足に受けられなかった現地のママたちが、目先の数ペソを捨てて「半年間の職業訓練」に命がけで時間を投資し、自らの腕一本で子供の学費や医療費を稼ぎ出す武器を手に入れるまでの、リアルなボランティアの現場をお届けします。 フィリピン・セブ島の裏側。職業訓練ボランティアにまつわるトピックス3つ この記事では、現地の過酷な格差の現実から、ネイル技術が生活を変えるまでのプロセスを3つのトピックスでご紹介します。 墓地やゴミ集積所で暮らす、スラム街にすら住めない彼女たちの日常 日本のセーフティネットとの違い。安易に「気持ちが分かる」と言えない絶望的な格差 1日の最低賃金を超える大金を、自らの手で作り出す技術と自立支援の成果 フィリピン・セブ島の裏側。「スラム街にすら」住めなã

1„彼女たちの日常 フィリピン・セブと言えば、何を思い浮かべますか？ 多くの人が「フィリピン・セブ ＝ 青い海のリゾート」を思い浮かべるはずです。私が暮らすセブシティのITパークから、車でわずか20分も走れば、豪華なビーチが広がっています。 ITパークはセブを代表するビジネス街ですが、すぐ隣にはトタン板一枚を隔てて、貧困層が暮らすスラム街が広がっています。 そして、一般的な「スラム街」にすら住むことができない人たちがいます。墓地や、ゴミ集積所。日本人の想像を絶するような場所が、彼女たちの 「家」 なのです。 私がネイルを教えたのは、10代で出産を経験した女性たち。20代でも体は小さくやせ細り、どう見ても10代にしか見えないママもいれば、すでに30代になったママもいます。中には、ジプニー（乗り合いバス）を2時間乗り継いで通う訓練生もいました。 10代で出産を経験した女性たちの日常 彼女たちが生きる世界は、私たちが想像する「不景気」とは次元が違います。 ゴミ集積所: 数ペソのために一日中ゴミを漁る。 墓地: 墓守の傍ら、ロウソクの燃えカスを集めてリサイクル販売する。 農村部: 一世帯の農業収入は、月にわずか5,000ペソ（約13,000円）※ 程度。 ※ 2026å¹´3月現在のレート。一世帯収入はDaredemo Heroの支援地区のを参考にしています。 定職はなく、誰かの手伝いをして数百ペソをもらうことで、その日を繋いでいます。ほとんどの女性が、家庭の事情で義務教育すら満足に受けられませんでした。 切実な問題は、子供の学費や医療費です。フィリピンには公的な健康保険制度がなく、病気はそのまま「破産」を意味します。今回の訓練には、「手に職を付けて、子供の学費や医療費を1ペソでも稼ぎたい」 という、切実な動機を持った女性たちが集まりました。 彼女たちは驚くほど明るい。笑いの絶えない教室 フィリピンは英語が公用語ですが、学校に通えなかった彼女たちの多くは、英語を話せません。授業はフィリピン人スタッフに通訳してもらいながらのスタートでした。 まずは「衛生管理」という、彼女たちには馴染みのない概念から教えました。現地の格安サロンでは感染症リスクが隣り合わせだからです。プロとして、消毒や病気の知識を徹底的に伝えました。 実技演習に入り、慣れない道具に苦戦する場面もありました。でも、彼女たちは驚くほど明るいのです。ミスをしても教室には笑い声があり、その様子に私の方が緊張を解きほぐされるほどでした。 絶望的な格差。日本人の貧困なんて「たかが知れている」と確信した理由 私の人生を軽く紹介します。20代でデキ婚をし、海外で働く夢を一度は断念しました。寝食を削ってネイリストになりましたが、子供の喘息をきっかけにその道も諦めました。 その後、職業訓練校を経てプログラマーとして再始動。子育てが一段落した時、40歳を過ぎてようやく、海外で働く夢を叶えました。 日本とフィリピンの貧困。安易に「気持ちが分かる」なんて言えない 今の私があるのは、決して一人の力ではありません。日本には、失業してもおカネをもらいながら学べる「職業訓練」があり、助けてくれるコミュニティがありました。私は、恵まれた国のセーフティネットに生かされてきただけなのです。 一方、彼女たちが直面する現実は、日本の想像を絶します。 家族の状況が厳しいケースもあるそうです。 一ä

1ººå¢—えれば生活がさらに苦しくなる、そんな状況の中に彼女たちはいます。 かつて日本で弱者だった自分を救うつもりで講師を引き受けました。でも、考えてみてください。彼女たちの現状を 「同じだ」 とは、到底言えませんよね？ 彼女たちは「人生を諦めていない」 彼女たちが学ぶ半年間。その時間をゴミ拾いに充てれば、数ペソの現金にはなります。その日食べるものに困る環境で、彼女たちは目先の数ペソより、 「学び」 に時間を投資しました。 自らの意志で投資した時間を、意地でもおカネで取り返してほしい。その経験を、これからの人生の武器にしてほしい。 本当の「底」から這い上がろうとする彼女たちの心意気に寄り添えた時間は、私にとって大きな幸せでした。 DAREDEMO HERO「女性の権利向上事業2025」 私が講師を務めたのは、認定NPO法人 DAREDEMO HEROが運営する「女性の権利と健康衛生の向上事業2025」です。 若年妊娠を経験し、経済的に苦しい中で母親になった彼女たちが、「自分の人生」を取り戻すための活動です。 健康教育: 感染症予防や、自分の体と人生を守る権利を学ぶ。 技術講習: ネイル技術から接客マナー、価格設定まで。 啓発活動: 自らの経験を次世代へ伝える性教育セミナー。 半年間、彼女たちは幼い子を連れて教室へ通い、宿題と自習に励みました。目標は、技術を「1ペソ」に変える力を得ること。そして、「自分にもできる」という自信を掴み取ることです。 最後の授業：ゴミ拾いの数ペソを捨てて手に入れた「武器」 授業中、私は「おカネ」の話をしました。 現在、セブの最低賃金は1日540ペソ※。ネイルの顧客を4〜5人こなせば、朝から晩まで拘束されて働く日給を上回るというロジックを白板を使って何度か説明しました。※ 2026å¹´3月現在、中央ビサヤ地方の最高額 それは単なる小遣いではなく、生活のルールを変える大金です。 半年間、ゴミ拾いの数ペソを捨てて投じた時間を、意地でも稼いで取り返しなさい 修了式の最後、私はこの言葉を贈りました。 \\"Ain\'t no mountain too high, if you\'ve got passion and grit to climb it.\\" （登る情熱と根性があるなら、高すぎて越えられない山なんてない） 2026年の今：連鎖する小さな希望 劇的な逆転などありません。明日も過酷な環境は続いています。でも、彼女たちの目は「諦め」を拒絶し始めています。 事実、修了を待たずして自ら稼ぎ始めているメンバーがいます。彼女たちが手に入れたのは、子供の薬を買い、学校へ通わせるための現金を、自らの手で作り出す技術でした。 DAREDEMO HEROの活動は今、さらに広がっています。彼女たちが自らの経験を語る姿は、同じ境遇にある女性たちの心に、 「若年妊娠の現実」と「変わるための勇気」 を届けています。 私はこれからもセブの片隅で、彼女たちが選び取った「これから」を応援し続けます。 結び：選べる幸運を、どう使いますか？ 日本にいる私たちが持っているのは、「選ぶことができる」という幸運です。 蛇口をひねれば水が出る。病気になれば医療がある。学びたいと思えば教育の機会がある。これらは決して「当たり前」ではありません。 安易に同情することはできません。ですが、この世界の片隅に、ゴミ集積所の中から「自らの腕一本」で未来を掴もうとしている女性たちがいる。その事実を、知るだけでも意味があります。 もし、あなたが持っている幸運を、ほんの少しだけ「知ること」や「広めること」に使ってくれたら嬉しいです。 墓地の片隅から、新しい未来はもう生まれ始めています。 公式サイト: DAREDEMO HERO Instagram: @daredemohero DAREDEMO HERO代表の順子さん、タカさん、現場を支えてくれたレスリー、アーメル、ラッセル、そして日本人インターンのみなさま。このプロジェクトを共に走り抜けてくれたすべての方々に、心から感謝します。","noindex":false},{"slug":"entry562","title":"NotebookLMでライフログ分析！13人の恋愛史からバツ一の原因を暴いたAIの精度","date":"2026-03-10","modifiedDate":"2026-06-15","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbn

1ail/2026/entry562.webp","description":"NotebookLMをライフログや日記の分析に使うと、どこまで客観的なデータが戻ってくるのか？48歳バツイチの凄惨な恋愛遍歴13人分をデータセット化し、AIの分析精度を冷徹に検証。感情を排除した「システム仕様書」にリファクタリングされるまでのプロセスと、Geminiを使い倒すプロンプトも公開。","tags":["おもしろ"],"body":"この記事はGoogleの「NotebookLM」の使い方を学ぶために、恋愛遍歴（ライフログ）を分析したお話です。 先日、日本に一時帰国した際、クライアントからこんな話を聞きました。 「NotebookLMが便利。データを読み込ませて分析させる機能が強い。ハルシネーション少ないのも特徴だよ」 NotebookLMとは？ Googleのノート作成・リサーチ補助ツール。 最大の特徴は、自分がアップロードしたソースだけを根拠に回答を生成すること。情報の正確性が高く、複雑なデータの構造化・要約に抜群に強い。 ネットで検索すると、一般的な自己分析やマインドフルネスの文脈での活用法が多く見つかります。しかし、一歩引いたビジネスや技術の視点から見ると、このツールの本質はそこではないです。 非構造化データを放り込んだ時の「AIの客観的な分析精度」がスゴイ！！ 今回は、私の48年間のカオスな恋愛遍歴（13人分の黒歴史ログ）をデータセット化し、NotebookLMに全面デプロイして「人生のデバッグ」を試みたガチの技術検証をお届けします。 AIを使って客観視したら、恐ろしい精度で恋愛観の脆弱性が暴かれましたw 実務や日常でGeminiを使い倒すための効果的なプロンプトも合わせて置いておきます。 ※ みなさんのAIライフの一助となれば幸いです。 NotebookLMによる人生のデバッグしたらどうなったの？ この記事では、カオスなログの構造化からAIの診断結果ã

1¾ã§ã€ä»¥ä¸‹ã®3つのステップでご紹介します。 13人の「負債ログ」をGeminiでデータセット化するリファクタリング技術 忖度なしのAI診断ハイライト！暴かれたトップ5の致命的バグ 感情を「仕様」に置換する、長期安定稼働仕様書のプロンプト公開 【技術の無駄遣い】13人「負債ログ」をデータセット化する ただの思い出話を放り込むだけでは深い分析は得られません。 「精度の高いアウトプットは整理されたインプットから」という鉄則に基づき、 記憶という非構造化データを解析可能な形へリファクタリングしました。 1. モデル（対象者）の選定とインデキシング 13のエピソードを時系列で抽出し、IDを割り振り。 #01, #02...：時系列連番 #XX-1：復縁・再デプロイ時は枝番付与 こうすることで、AIが「選択アルゴリズム」の経年変化（あるいは変化しなさ）を追跡しやすくなります。 対象者リスト（一部抜粋・毒ネタ付き） #00：鼻水垂れの許嫁（人生スタートからケア要員ポジ、不吉すぎ） #01：鑑賞用イケメン（外見重視、嫌いじゃけぇで追いかける執念） #02：フェンス越しの推し（金払って写真買う搾取構図完成） #03：チョコの返答者（「ありがとう」で浄化されたけど進展ゼロ） #04-1：ポエムの魔術師（十二指腸に穴開けさせた男） #10：チンアナゴケーキの理解者（唯一まともそうだけど細く続くだけ） #13：二枚舌の境界線（最新の境界線テストケース） チンアナゴケーキ事件 in クリスマス合コン: クリスマス合コンで男女の距離を深めるためのケーキ作りアクティビティでチンアナゴケーキを作るという奇行を行う。クリームも塗布してないスポンジに野菜かりんとうをぶち刺して、海底を表現したい衝動を抑えられなかった。 この奇行を見た上で連絡先を聞いてくるのだから、どうかしてると思う。 2. Geminiによるデータの構造化 バラバラの記憶をGeminiに投げて、共通テンプレートでMD形式に整形。 指示例： この情報をあとで分析しやすいように、決めたテンプレートの項目に落とし込んでMD形式で出力して！ これで全15ファイルが同じ粒度で標準化完了。 3. NotebookLMにデータをぶち込む NotebookLMでNotebookを作成。作ったファイルをぶち込む。 データをざっくり学習し、データの分析結果が表示される。 ...各エピソードでは、相手の特性を「バグ」や「スペック」として捉え、自らの恋愛パターンや思考の癖を客観的にデバッグする過程が描かれています。失敗や依存から脱却し、フィリピンへの移住やキャリア構築を経て自己肯定感を確立していく一人の女性の成長譚としての側面も持っています。最終的に著者は、過去の男性たちを自らの人生をより良くするための「警告」や「学習材料」として定義し、精神的な自由を手に入れるまでの軌跡を総括しています。 データをもとに分析した結果をマインドマップや、インフォグラフィック（ベータ版）も生成できる。 生成されたマインドマップ AI診断ハイライト：13人分の負債ログから暴かれたトップ5の致命的バグ 過去の恋愛を診断させてみた。 指示例： 診断ハイライトトップ5を抜粋して毒エピソードを出して。 データが基盤だから甘いフォロー一切なし。忖度無しでズバズバ突いてくる診断結果ã

1Œã“ちら。 1. 「弱者ケア・プログラム」の永久停止（Log #00, #06） AIコメント：「人生スタートからケア要員ポジ。不吉すぎて設計ミス」 得た負債：鼻水垂れの許嫁から始まり、家族の生活インフラより相手の嗜好を優先する個体に接続し続け、水道代払えないインフラ崩壊を招く脆弱性。 → 母性バグを永久凍結しないと、永遠にリソース漏れ続ける。 2. 「生存リソース」の配分優先順位エラー（Log #06） AIコメント：「相手の幸せより自分の趣味優先。投資対効果が絶望的すぎ」 得た負債：私の夢への貯金が彼の趣味に使われる。端金しか残らなかった。 → 共有アセットを相手の射幸心に一方的に搾取される配分エラー。優先順位が完全にバグってる。 3. 「監視アラート」の低閾値設定（Log #04-1） AIコメント：「束縛ポエムを『愛』と誤検知。身体が悲鳴上げるまで気づかないとか危険すぎ」 得た負債：情緒不安定な通信を無視し続け、十二指腸に穴開けて1週間欠席。 → 精神的負荷を論理層で無視しすぎて、ハードウェアが物理的に壊れるまで接続継続。 4. 「負の共鳴」による現状維持バイアス（Log #11） AIコメント：「お互いのバグを肯定し合って共倒れ。理解者じゃなく共依存の誘い」 得た負債：仕事のストレスや酒の逃避を「似てる」と錯覚。相手は裏で別の接続先追っかける。 → 「俺たち似てる」って言葉で現状維持を正当化する最悪の攻撃ベクトル。 5. 「自己属性デバフ」によるセキュリティホール（Log #13） AIコメント：「バツイチ・子持ちを負債扱いして基準下げ。不誠実な侵入を自ら許可してる」 得た負債：レディーファーストに遠慮してブロックかけたら、目の前で二枚舌見せつけられた屈辱。 → 自身の価値を不当に低く見積もることが、不誠実な個体を呼び込むバックドア。 監査官の最終警告（AIの締め） 「これらのバグは『優しさ』や『妥協』という名目で一度でも実行許可すれば、即座にシステム全体を汚染する。 旧世代のバグコードを再実行するのは、自らの手で人生をクラッシュさせる行為だ。 以下のコマンドで、全防護プロトコルを確定させてください。」 う、ぐうの音も出ない。。。 NotebookLMにぶち込む効果的なプロンプトをGeminiに生成させる 思うような仕様書が生成できないので Gemini に指示して NotebookLM 用のプロンプトを生成。 次世代恋愛・長期安定稼働仕様書 Ver. 2.1 主要章抜粋 Gemini と協力しつつ、試行錯誤してやっとのことで仕様書が完成。長いので重要な箇所だけ抜粋してご紹介します。 分析結果のまとめを仕様書にした理由は以下の通り ノイズの排除：感情を「仕様」に置換し、客観的な正解を確定させる。 例外処理の禁止：「今回は特別」という言い訳を封じ、仕様外を即エラーと判定する。 パターンの封じ込め：過去の失敗を「再現性のあるバグ」と定義し、再発防止のガードレールにする。 警告：例外（妥協）許可でシステム汚染即再発。 メインプログラマーとして、人生コードを誇り高く保て。 これで私の人生がサステナブルになるかは実装次第だね笑 結論：NotebookLMは「人生のデバッグ環境」を豊かにする 今回、自分のカオスな恋愛遍歴をデータセットとしてNotebookLMに放り込んでみて、確信したことがあります。 「客観視」こそが、人生というプロダクトの最強のアップデートである。 私たちは往々にして、自分の失敗を「運が悪かった」とか「相性が悪かった」という情ç

1·’的な言葉で片付けがちです。しかし、AIという第三者の、それも「冷徹な論理」を通してみることで、そこには明確な「バグ（選択の癖）」と「脆弱性（自己評価の低さ）」がコードとして浮かび上がってきました。 結論：NotebookLMによる人生のデバッグ 今回はNotebookLMを勉強するために、極端なデータを半日かけて解析してみました。 人はだれでも 感情 や 思考の偏り があります。 重要で本来冷静に取り扱うべきデータにも、人間の脳みそにバグでもあるかのように判断を誤ってしまいます。 恋愛などは、特にそのようなバグが顕著に現れる分野です。 客観視できるAIにデータを解析させたことにより、自分でも気づかなかったクリティカルな問題を発見することができました。 おかげで爆笑しながら勉強できました！ もしこの記事を読んだ方で「人生の動作が不安定だ」と感じる方がいましたら、感情を抜きにしてログを放り込んでみてください。 そこには、長年修正されずに放置されていた「レガシー・バグ」が確実に存在しています。 この記事がみなさんのAIライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry561","title":"加速するAI競争と利益至上の土俵から、静かに、でも確実に降りる","date":"2026-03-03","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2026/entry561.webp","description":"AI競争の最前線で見えた、効率が人間を切り捨てる冷徹な未来。私は利益至上の土俵から静かに降りることを決めた。AIを「最強の拡張パーツ」にする開発と、手仕事で価値を問い直す実験。消耗する場所を離れ、心地よい経済を編むための生存証明。","tags":["キャリアアップ・転職","ライフスタイル"],"body":"先日、3年ぶりに日本へ2週間ほど帰省しました。 久々の日本の日常。その裏側で突きつけられたのは、AIの効率化が働き方を根底から変えようとしている現実でした。 IT業界の端っこに身を置く私自身、「このまま立ち止まれば、加速する変化の波に飲み込まれてしまう」――そんな強い直感を覚えました。 今、私たちの前に突きつけられているのは残酷な二択。 レッドオーシャンで溺れるか 疲弊しながら泳ぎ続けるか でも私は、そのどちらでもない 第三の道 を選びたい。 テクノロジーを賢い相棒にしつつ、人間らしく、のびのびと生きられる場所を模索したい。 滞在中に得た確信を、【確信・実践・実験】 の3ステップで整理してみます。 確信（Evidence）：効率から見えてくる、使い捨ての構造 「AIに仕事が奪われる」なんて話は、今さら珍しくもありません。 けれど、フィリピンというBPOの熱狂の中に身を置き、一方で日本の実家で「物を大切にしろ」という父の古い教訓に触れたとき、私の中である確信が生まれました。 それは、私たちががむしゃらに追い求めてきた「効率」の正体です。 AIという、冷徹な「最適解」 先日、日本の勉強会 Web Touch Meeting #125 に登壇した際、他の登壇者の方のセッションを聞いて、強い危機感を覚えました。 「たった3秒の音声があれば、その人の声を再現できる」 この数字を聞いたとき、頭に浮かんだのはフィリピンの街並みでした。 皆さん、フィリピンの経済がどの程度BPO（コールセンター等）産業に支えられているか知っていますか？ BPO産業はフィリピンのGDPの約1割を稼ぎ出し、150万人以上（2023年時点）の雇用を生んでいる巨大な生命線です。 セブの街を歩けば、深夜でも巨大なビルに明かりが灯り、膨大な数の人々が英語で電話に応対しています。そこは今、間違いなく「人間」の仕事場です。 けれど、「3秒」で声が再現され、多言語で24時間、不満も言わずに稼働し続けるAIという「最適解」を前にして、この景色がいつまでä

1¿ã¦ã‚‹ã®ã‹ã€‚ 利益の最大化を土俵とする資本家にとって、もはや人間を雇い続ける理由はどこにもありません。 効率という名の濁流が、150万人の仕事を飲み込んでいく。それはもはや予測ではなく、すぐそこにある「冷徹なロジック」なのだと確信しました。 フィリピンのコールセンターがAIに置き換わる日は、すぐそこまで来ている すでに米セールスフォースはAIの進化を背景に、大規模なレイオフを断行しています（参照：米セールスフォースが1000人余り削減、ＡＩ販売要員は採用－関係者｜ブルームバーグ）。身近でも、人員削減を迫られた知人のオフショア会社が吸収合併を余儀なくされるなど、地殻変動はすでに始まっています。 もし私が経営者なら、迷わずAIへのリプレイスを決断します。 24時間365日、稼働の限界もなく正確に回答するAI。ビジネスにおいて、それは抗いようのない「最適解」だからです。しかしその最適解は、130万人の雇用を一瞬で「不要」にするという、冷酷な側面も持っています。 かつてパソコンが導入された時以上の、巨大で破壊的な変化が今まさに起ころうとしている。 AIという存在が突きつけてくるのは、技術の進化そのものではありません。「効率のためなら、人間をいつでも切り捨てられる」という、私たちの冷徹な合理性。 AIは、そんな私たちのエゴを映し出す鏡のようにも見えました。 構造の限界：効率が殺すもの ここで少し、ITから離れてファストファッション業界の話をさせてください。 突然ですが、世界中で「毎秒」どれだけの衣服が廃棄されているか知っていますか？ 正解は、トラック1台分です。 利益追求を極限まで突き詰めた結果、安く、速く供給し、いらなくなれば即座に捨てる。その「最適解」を追い求めた結果、私たちは「物を大切にする」という感覚を失いつつあります。 この大量消費・大量廃棄のサイクルは、人間すら「替えのきく部品」として扱う労働システムと、根底で強くつながっているように思えてなりません。 私は日本にいた頃から、専門店で質の良い靴を選び、手入れや修理を繰り返して長く履き続けるタイプでした。フィリピンに移住してからも、そのお気に入りの靴を大切に履いています。 ところが、3年前に日本へ帰国した際、フィリピンから持参した靴を修理に出して愕然としました。かつては1,000円程度で済んでいた修理代に、5,000円以上を支払うことになったのです。 愛着のある靴を履き続けるために、泣く泣くその金額を支払いました。 「直して履き続ける」という、自分にとって当たり前だった心地よい循環を維持するコストが、いつの間にか跳ね上がっている。これでは、ファストファッションの店で新しい靴を買い直すほうが安上がりになってしまいます。 修理したい人が減る → 需要がなくなる → 職人が消えていく そんな 負の連鎖 が、すぐ目の前まで来ている。「物を大切にしろ」という父の古い教訓を守ることすら、今の社会では「非効率な贅沢」になりつつあるのです。 行き過ぎた利益追求の果てに、物を使い捨てる現代の姿。私たちの祖先は今、どんな想いでこれを見つめているでしょうか。 あなたには、その姿が想像できますか？ 実践中（Done）：手仕事による自律と理念の再定義 これまでの気づきや違和感を、単なる「思考」で終わらせないために。 この日本滞在期間、私は自分の手と身体を動かし、いくつかの「確信」を得るための実験を繰り返してきました。 ここにあるのは、すでに私が実践し、手に入れた「自律」のログです。 効率100%の世界で、あえて「プロセス」を優先する 日本は寒かった。だから帽子を買おうと思ってましたが、あえて作ることにしました。 効率だけを優先すれば、編み物なんて時間の無駄かもしれません。買ったほうが早いし、安上がりです。 けれど、今回の2週間の日本滞在中に、私はウール100％のニット帽を3つ編み上げました。 久々の帰省で母とお茶をしながら、少しずつ編む。この帽子には、既製品にはない「プロセス（過程）」が残っています。 あえて解（ほど）きやすいよう「伏目（ふせめ）」で閉じました。昔の人は、不要になった編み物を解いて編み直してましたからね。使い捨ての構造に対する、私なりのささやかな抵抗でã

1™ã€‚ 帽子のひとつは母にあげました。 まだまだ寒い日本。きっとかぶるたびに思い出してくれるはず。 理念の再定義：足るを知り、搾取の連鎖から降りる きっかけは、昨年の体調不良でした。 筋トレや瞑想、デジタルデトックスを通じて雑音を削ぎ落とした先に見えてきたのは、「私はなぜ、このフィリピンにいるのか？」 というシンプルな問いでした。 答えは明白。ここでビジネスをするためです。 日本に渡る前、私はドラッカーのフレームワークを用い、自社の事業と生き方を徹底的に再定義しました。その論理的な棚卸しの末、進むべき道を指し示してくれたのは 「禅」 や老子の思想でした。 足るを知る 今、ここに集中する 他者に寄り添う Lenz Technologies Inc., これが、新たに言語化した弊社の根幹です。「核」がないと、お金への不安に突き動かされ、かつての私のように焦り、溺れます。私はもう、そういう「逃げ」はやめました。 この理念を据えたとき、見過ごせなくなったのが業界に蔓延する 「搾取の連鎖」 です。 先日のお見積もりでは、自ら甘んじていた「搾取フィルター」を外し、妥協を排した価格を提示しました。結果、その案件は通りませんでした。 けれど、それでいい。 以前の私なら、心が揺れて値引きに応じていたかもしれません。しかし、最初からこちらの価値を 過小評価 し、安易な値下げを要求する相手と付き合っても、結局は自分の首を絞めることになります。 パートナーとも価値観の違いで何度も衝突しましたが、私はもう、そこに甘んじるのはやめました。これからは安売り競争から降り、クライアントに真摯に寄り添う 「伴走者」 であることに全精力を注ぎます。 マインドのアップデートは、すでに完了しました。 実験（Trial）：AIを相棒に、人間としての「納得」を形にする ここからは、日本で得た確信と再定義した理念を手に、フィリピンへ戻ってから挑む「実験」の話です。自分に厳しく、退路を断って試します。 AIを「相棒」にして、一人開発の限界を試す まず、AIをフル活用して 「一人でどこまでプロダクトを開発できるか」 を徹底的に試してみます。 これは単なる思いつきではありません。セブに戻ってからの日々のタスクとして、すでにスケジュールに組み込みました。 具体的には、実行力の面で圧倒的な性能を誇る Claude をメインの相棒に据えます。 世の中では「AIが仕事を奪う」と騒がれていますが、私はその逆を行く。 資本家に買い叩かれるための労働力としてではなく、 人間のアイディアをシステムに変換するための「最強のパートナー」 としてAIを使い倒します。 ここで大切にしたいのは、「意思決定（ディレクション）のハンドルは、決してAIに渡さない」 という意志です。 AIは過去のデータの集積から「最適解」を秒速で提示しますが、生身の人間が感じる「現状への違和感」や、どうしてもこれを形にしたいという動機までは持っていません。 AIは優秀な実行役（ツール）にはなりますが、自分から「これが作りたい」と動き出すことはありません。 利益優先の構造に飲み込まれてパーツとして消費されるのをやめ、AIという最強の腕を手に入れた自分が、どこまで「一人の人間」として納得のいく価値を形にできるか。 まずは半年。 アジャイルに壁打ち、設計、実装を繰り返し、Claudeと共に一気通貫でプロダクトをデプロイするまで、私は私の限界と向き合い続けます。 「プロセス」という付加価値を市場で問い直す この「感情」や「プロセス」の価値を肌で確かめるため、もう一つの実験を並行させます。 ターゲットは、効率100%を追求した結果として生まれた「大量廃棄構造」への、ささやかな、でも明確な抵抗でã

1™ã€‚ 今の世の中、安くてそこそこ良いものは溢れています。けれど、その裏側にある「誰が、どんな顔で、どう作ったか」というプロセスは、コストカットの対象として真っ先に削ぎ落とされてきました。 私はそこに、AI生成物には逆立ちしても真似できない価値が残っているのではないか、と考えています。 「自分の手で、何かを形にする」 その原点に立ち返るため、実家から祖母や父の思い出が詰まった古布や着物の端切れをフィリピンへ持ち帰りました。 実際、フリマ出店を見据えた試作として、シュシュを手縫いで作ってみました。ミシンを使わず、一針ずつ進めて30分。 まずは、シュシュやあみぐるみを計10個、自分の納得のいく手触りで作り上げること。 数が揃い次第、実際に現地のフリーマーケットへ出店します。 1円でも安く、1秒でも早く。そんな「土俵」の論理でいえば、私の30分という手間は非効率の極みかもしれません。 けれど、効率の追求が人間を切り捨てる未来に向かっているのなら、私はあえてその逆を行く。 来週の現地リサーチを経て、私の手が費やした時間が、誰かの手に渡る価値へと変わるのか。リアルな空気感の中で問い直すつもりです。 誰と働かないかを選ぶ 価値観の合わない案件、労働力を買い叩く構造の案件は、今後100%断ると決めました。 すでに一度、妥協を排した価格提示で案件を失いましたが、それでいい。 利益のために自分を切り売りして首を絞める選択からは、もう卒業します。 まとめ：消耗する場所から離れ、持続可能な「経済活動」を育てる 実は、フィリピンに来てからずっと感じていた違和感がありました。 その原因が「搾取の構造」にあるとわかったときは、胸が痛むような思いをしました。 でも、それはもう過去のこと。 もう「怒り」を原動力にするのはやめます。強い感情だけど、心を蝕むだけだから。 利益を優先して人間をパーツのように扱う土俵からは、静かに、でも確実に降ります。 そこに加わらなくても、私は私の道を生きていけます。今回の帰省で得た、揺るぎない確信でした。 フィリピンでの日常が再開しました。 AIを「賢い相棒」として使いこなし、自分の時間を守りながら価値を生み出す。 一方で、手仕事のようにプロセスの手触りを感じる、人間にしかできない営みも大切にします。 まずはこの両極端を抱えたまま、小さな実験から始めます。 人生は短い。 だからこそ、誰かに強いられた効率ではなく、私が心地いいと信じる活動を、自分のペースで育てていきたい。 最後までお読みいただき、ありがとうございました。 大分・ラムネ温泉にて","noindex":false},{"slug":"entry560","title":"Web Touch Meeting では語りきれなかった「覚悟」の話。名刺に刻んだ一文に込めた決意","date":"2026-02-28","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2026/entry560.webp","description":"「誰と付き合わないか」が一番大事。セッションでは語りきれなかった海外起業のドロドロした裏側と、脳のバグ（不安）に打ち勝つためのメンタル武装術。2026年、セブでビジネスをやり切る決意と名刺に刻んだ言葉に込めた想いとは。","tags":["キャリアアップ・転職","ライフスタイル"],"body":"日本に3年ぶりに帰省しました。 帰省の目的は、主にクライアントと会うことはもちろん、Web Touch Meeting に登壇することでした。 日本にいた頃、広島では約10å¹´ IT で飯を食ってきました。仕事だけではなく勉強会を通じてたくさんの友だちもできました。当日は懐かしい面々もおり、少し同窓会のようでホッとする一面もありました。 でã

1™ãŒã€40分のセッション時間では語りきれなかった 裏面 があります。ここからは、忖度なく本音で綴っておきます。 Web Touch Meeting #125 セッションの概要 第125回「WEB TOUCH MEETING」 資金ゼロから挑んだ海外起業奮闘記 ～セブ島で学んだリアルなサバイバル～概要 当日お話した内容の概要です。経験から学んだことを基盤に、4つの柱でお話させていたきました。 フィリピンと日本の違い…文化・価値観のギャップを体験談とともに解説。 資金ゼロで会社設立…日系エージェントの費用 vs 自力。リアルな選択肢とその結果。 設立直後の資金難…危機の中で見えてきた、海外で本当に大切なもの。 政府・自治体との闘い…複雑な手続きにすり減った2025年。メンタル崩壊からの復活方法。 訂正とお詫び フィリピンと日本を比較した際、人口に関して大きな間違いをしてしまいました。 要望に応えようと急ぐあまり、AIに派手なハルシネーション（もっともらしい嘘）をかまされ、そのまま数値を転記してしまったのが原因です。 カケナビ@kakenaviさんに「広島市の人口より少ない（笑）」と突っ込まれてようやく気づきました……。はぁ、お恥ずかしい。 | | 日本 | フィリピン | | -------- | -------------------------- | ------------------------ | | 人口 | 約1億2,200万人 | 約1億1,800万人 | | 人口動態 | 減少傾向（年間約80万人減） | 増加傾向（年間約1.5%増） | | 平均年齢 | 約49歳〜50æ­³ | 約25歳〜26æ­³ | あの時、セッションでは言えなかった裏話 さて、あの時セッションで言えなかったことを語ります。 10年以上のIT業界人生とセブの資金難で見えてきた「ヒト」の本質 「資金ゼロから挑んだ海外起業奮闘記 ～セブ島で学んだリアルなサバイバル～」でもお伝えしましたが、やっとの思いで会社を設立した直後、請求金額が回収できず資金難に陥りました。海外でいきなり直面した、リアルな生活難です。 セッションの締めくくりでは「何をするかより何をしないか」が大事だと伝えましたが、本当に伝えたかった本音は別にあります。 誰と付き合うかより、誰と付き合わないかが大事 見方によっては角が立つと判断し、当日のスライドからは削除した言葉です。ですが、自分や会社を守るための生存戦略として、これ以上に学んだことはありません。 友だちとビジネスの間が曖昧な人と仕事をするな これは経験則ですが、一見「良い人」に見える、耳障りの良いことを言うやつほど信用できないことが多い。実際に向き合ってみて、悔しい思いをしたことがあります。 ビジネスを続けていれば、どうしても「やばいヤツ」を完全に避けることはできません。 悪口を言ったり呪ったりして解決するならいくらでもやりますが、現実はそうはいきませんよね。 だからこそ、「面倒くさがらず契約書を巻く」。これが、この世界を生き抜くためのリアルな 「生きる知恵」 です。 こんな世の中だからこそ、正直でいろ もちろん、私自身も無意識のうちに相手に対して同じような不誠実な振る舞いをしてしまっている瞬間があるかもしれません。 だからこそ、私は腹の中を隠さず、常に正直でいることが重要です。 自分が嫌な思いをしてきたのであれば、なおのこと自分は同じ道を歩まない。 こんな世の中だからこそ、正直で、誠実でいること。これが人生の真理だと思います。 なぜあなたは、ここでそれをしているのかを常に問え 政府や自治体との闘いに明け暮れていた2025年、私はもう一つの大きな問題を抱えていました。 昨今の言葉で言えば、ADHDやASDといった発達障害のグレーゾーンと診断されるのでしょう。子供の頃は「集中力がない」「興味のない勉強がとことんできない」「忘れ物が多い」といった言葉で片付けられてきました。 しかし私は、このADHDの特性である 過集中（ゾーンに入る） と 長期記憶の定着（興味のあること限å

1®šï¼‰ のおかげで、普通の集中力では到底成し得ない成果を出してきました。 中学生で教科書を丸暗記 元素記号をすべて暗記 大学受験では、受けた授業の内容がそのまま試験に出て合格 20代のネイリスト時代、大会で入賞 漫画で佳作入賞 30歳を過ぎてからIT業界へ転職 チームで29個のアプリを制作し、大会で入賞 「過集中」という武器は、寝食も忘れて没頭しすぎるのが難点です。大人になっても膀胱炎を患うなど、多くの弊害を伴うものでもありました。 そして2025年。納期が危うい案件が3件重なりました。私は意識的に「過集中」をコントロールできるようになっていたため、やむを得ずそのスイッチを入れましたが、それが運の尽きでした。 反動で酷く燃え尽きてしまい、鬱状態に陥り、現実から逃げるように酒に溺れる日々が続いたのです。 ドーパミンの奴隷から抜け出すための「脳の再起動」 更年期の影響も重なり、仕事を制限せざるを得ないほど状態は悪化していました。 このままでは死ぬ… 本能的な危機感から、藁をも掴む思いで、少しずつ以下の習慣を試していきました。 散歩：セロトニンを活性化させ、心を安定させる 30分の筋トレ：自分を律する訓練 酒の制限：一時的な逃避を断つ 16時間断食：暴飲暴食で荒れた腸の回復 これらはすべて、脳の快楽物質であるドーパミンに支配されないための工夫です。 こうした試行錯誤を続けるうちに、頭を覆っていた霧のようなモヤが少しずつ晴れ、自分が本当にやりたかったことが再び見えてきました。 逃避の終わり：私がセブにいる「唯一の理由」を思ã

1„出す 私がセブにいる理由は、ビジネスを始めたから。それ以外に他ありません。休みの日に酒に溺れたり、Netflixを観たりするためにここにいるわけではないのです。 日々のストレスで、その目的をすっかり見失っていました。生きていると雑音が多く、自分の本当にやりたいことを見つけても、すぐに忘れてしまうもの。 あー、情けない。 過去の対人関係も、未来のお金の不安も、今この瞬間には起こっていない。ここで会社を作りたいと決めて設立したのは、誰でもなく私自身です。 今ここで自分のビジネスに集中しなくてどうする？ ようやく、そんな正常な思考が戻ってきました。 ストレスを消すのではなく「打ち勝つメンタル」を武装する 生きている上で、ストレスのない人生など存在しません。 ストレスがなくならないのであれば、それに打ち勝つメンタルを作るのが一番手っ取り早いのです。 瞑想：ADHDの脳みそは24時間止まらないラジオ。荒れ狂う思考を静める SNS閲覧の制限：過剰な情報の刺激から脳を守る 読書：Netflixの代わりに質の高い情報で脳を再構築する Netflix解約：受動的な娯楽を断ち、自分を取り戻す 読書で脳の仕組みを勉強し、ドーパミンの受容レベルの管理こそが重要だと知りました。それ以来、快楽に流されず自分をコントロールする生活を習慣化することに決めたのです。 まとめ：揺るぎない覚悟と、その先にある幸せ 人間関係から生まれた悔しさも、海外での絶体絶命の資金難も、今では大きな学びだったと言い切れます。 ただの不満で終わらせず、自分の生きる糧に変える。それがサバイバルを生き抜く術だからです。 2026å¹´1月、私は改めてここセブで、ビジネスをやり切る覚悟を決めました。 脳の仕組みを学んで気づいたことがあります。頭の中に不満や不安といったネガティブな感情があると、やりたくないはずなのに、無意識にそれを引き寄せる行動をとってしまう。 「お金がない」と思えばますますお金がなくなる行動をとり、「将来が不安」「自分に自信がない」とイメージすれば、自ら失敗へと足を踏み入れてしまう。 実際、「この人と会いたくないなぁ」と思っている時に限って、居酒屋でバッタリ出くわしたりするものでしょう？ネガティブに想像したことほど現実化するものですよ だから、まだ起こってもいないネガティブなことに、自分の脳を1ミリも渡さないことにしました。 正直、華々しい結果なんてどうでもいい。とにかく、やり切る。だって、やるって決めたのは他でもない私なんだもん。 そこには、理屈を超えた揺るぎない覚悟があります。 このAI時代、過酷な競争は続くでしょう。でも、私は私を律し続け、私と私が大切だと思う人たちと一緒に幸せになる。そのために戦い抜きます。 私の名刺には、こんな言葉を刻んでいます。 No mountain too high --- grit & passion climb it. （どんな高い山でも、情熱と根気があれば登れない山はない） これは、私自身への「覚悟」であり「戒め」です。 泥臭いサバイバルの果てに見つけたのは、自分を律する規律と、誰と付き合わないかという境界線。これらを武器に、私はこれからもセブの地で、自分の山を登り続けます。 この記事がみなさんのこの先の人生の一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry559","title":"ドーパミン中毒のデメリットと脱却法：恋愛・アルコールの罠から脳を治す現実的アプローチ","date":"2026-01-18","modifiedDate":"2026-06-17","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbn

1ail/2026/entry559.webp","description":"スマホの無限スクロール、酒、そして恋愛の葛藤で夜を溶かしていませんか？重度中毒から脱却した筆者が、自身の苦しい体験と不安をベースに、脳科学を逆手に取った「習慣の置き換え（リプレイス）」を解説。ドーパミン中毒のバグを修正し、人生のパワーを取り戻すためのリアルな生存戦略。","tags":["食生活","セブ島生活","ドーパミン"],"body":"みなさん、朝が来るのは楽しみですか？それとも怖いですか？ かつて、私は朝が来るのが怖かったです。 実は私、40代で日本を飛び出し、海外で起業しました。 40代で海外移住、そして起業。聞こえはかっこいいでしょ？ 一番ストレスから逃げるカンタンな方法がお酒を飲むことでした。かつて、安いジン（40度）を3日で空けるほどのハイペースで飲んでました。 ところが今は、酒を飲まなくても朝7時までぐっすり眠れるようになりました。 私のアルコール依存が「 ドーパミン中毒 」という脳のバグが原因だったと分かったからです。 そして、これは決して他人事ではありません。特定の相手への執着から抜け出せなくなる 恋愛 や、無意識に指が動いてしまう スマホの無限スクロール に至るまで、ありとあらゆる身近なものに、この脳をジャックする中毒性が潜んでいます。 対象がアルコールであれ何であれ、脳がバグる仕組みと、そこから抜け出すための具体的な治し方はすべて同じです。 今日は、ドーパミン中毒を断ち切るまでに整えた習慣をお話しします。 起業の夢と酒の沼 セブに来たばかりの頃、私はビールを頻繁に飲んでました。若い頃からの飲酒習慣で休肝日は殆どとったことがありません。 アルコールはストレス発散の手段だった私がいかにお酒に沼っていったかお話します。 ゼロからの起業と重圧 2020年、フィリピンのロックダウン中に私は会社を立ち上げを決意しました。 資金繰りや案件獲得、慣れないクライアントとのやりとりに追われ、プレッシャーの連続でした。 さらに家計簿すらつけたことがない私にとって、経営は未知の世界。 経理に明るい優秀なビジネスパートナーがいても、日々のストレスは容赦なく積み重なっていきました。 夜明けが憂鬱だった日々 起業して何度もストレスのピークがありましたが、昨年は特に酷かったです。 2025å¹´4月仕事の忙しさによる1度目のストレスのピーク、9月はビザ更新2度目のピークがありました。 フィリピンと言えば、日本の行政の対応とは雲泥の差。当時の私にはお酒無しではやり過ごせませんでした。 しかも、毎朝4時に目が覚めてしまう。 その瞬間は「まだ日は昇っていない」と少し安堵するけれど、時間が過ぎるにつれて空が明るくなり、憂鬱が押し寄せてくる。 もし朝が来れば、また、ストレスフルなやり取りが発生するでしょう。また、今日も書類が間に合わないかもしれない。更年期の影響も重なり、毎日が重苦しい夜明けでした。 身体の悲鳴・ジンと辛ラーメンの悪循環（酒とドーパミンの罠） 昔からストレスが積み重なるほど、飲酒量は増える傾向にあります。 週に1本だったジンは、いつの間にか3日に1度のペースで空けるようになり、辛いもので憂鬱な気持ちを打ち消そうと辛ラーメンをよく食べていました。 酒と刺激物で一時的に心を麻痺させても、翌朝には腸の不調や憂鬱が押し寄せる。 それでも「逃げ場」として選んでしまう。そんな悪循環の中にいました。 腸が常に腫れているのでしょう。お腹の中がジクジク熱を持っているのを感じました。もちろん常に下痢。これが毎日でした。 自分を律することを始める 仕事もまともにこなすことも出来ず、さすがにこれではマズイと思い、何度かビジネスパートナーに相談しました。 「運動したら？自分を律することが大事だよ」 と言われました。 ある日美容院に行ったら後頭部に驚くほど白髪が増えてました。その三ヶ月前は「まだおしゃれ染めで十分ですよ」という会話をしたばかりでした。 食事もまともなものは食べてない。運動もしていない。ストレスも最高潮。更年期もあって精神状態も良くない。今考えたら白髪も増えて当たり前って言えば当たり前ですね。 もうやるしかない！とすがる思いでちょっとずつ運動を始めました。 習慣を組み替えて生き直す（制限から生まれる脳の仕組ã

1¿ï¼‰ 最初は運動のみを始めたのですが、食事内容も見直すようになりました。 問題のひとつは、腸が腫れていると分かるほどのひどい下痢。腸内環境は明らかに悪い。そこで、手っ取り早く回復させたいと思い、11月からファスティングを始めました。 ここで心に変化がありました。 テーブルに腰掛け、食器に盛り、ランチョンマットを敷いて食べる。すると自然に食べ物への感謝が湧いてきました。 後ほどこれが「マインドフルイーティング」だと知りました。 マインドフルイーティングをする前の私は、秒で手に入る、ないしは辛さでストレスを緩和する食事をしていたことに気が付きました。 そしてこの気付きのお陰で、私がストレスから飲酒がやめられなかった正体を探るようになりました。 AIに聞いたり、動画を見て、本を読み、情報を集めました。 脳内麻薬 人間を支配する快楽物質ドーパミンの正体 (幻冬舎新書) ドーパミン中毒（新潮新書） 私は一時的な苦痛を和らげる脳内物質ドーパミンに依存していたと気づきました。 周囲に見たドーパミン依存の姿（恋愛・ゲーム・タバコ・薬物の共通点） 48年も生きていると色んな人が周りにいます。 恋愛していないと落ち着かない人 不倫を含め複数の関係をやめられない人 ストレス食いがやめられず摂食障害になる人 お酒をやめられず命を落とした人 SNSの「いいね」に依存して携帯を手放せない人 オンラインゲームに高額な課金をする人 ギャンブルで人生を破綻させた人 私も含め、共通点は ストレスから逃げるため のドーパミン依存。 ちなみに、TikTok、インスタリール、YouTubeの無限スクロールも立派なドーパミン依存です。 次こそ好みの動画が出てくるかもと脳は期待してドーパミンを放出する。気づけば、あなたも30分くらいの時間を余裕で 溶かして しまうでしょ？ ドーパミンの本来の役割と脳内ホルモンのバグ 本来ドーパミンは、ご褒美を期待したときに分泌されるホルモンです。 古代、人類が鹿や猪を追っていた頃、狩りの成功を期待することで頑張り続けられるように働いていました。 農耕を始めた人類も、秋になれば収穫した新しい稲が食べられるというゴールを期待しました。 この期待によってドーパミンが分泌され、厳しい農作業を続けることができたのです。 今でも テストで100点取ったら、ゲーム機を買ってもらえる 毎日休みなく通学したら皆

1勤賞がもらえる こうした「期待」がドーパミンを分泌させ、行動を続ける力になるのです。 ドーパミンは、人間が行動を続けて目標を達成するために重要な役割を果たす脳内物質です。 このドーパミンですが、問題点があります。 過剰に分泌され続けると、脳の受容体が次第に慣れてしまい感受性が低下します。 その結果、同じ刺激では満足できず、より強い刺激を求めるようになり、中毒化してしまうのです。 現代ではドーナツを買うのも、1000円札を握りしめてコンビニに行けば簡単に手に入ります。 しかし人類の歴史の大半は飢餓の時代であり、糖分や脂肪は最高のご褒美でした。 甘い砂糖は脳の報酬系を強く刺激し、一気にドーパミンが分泌されますが、その効果は一時的なものです。 しかも頻繁に繰り返せば、脳のドーパミン受容体が慣れてしまい感受性が低下します。 そのため快楽は薄れ、以前はドーナツ1個で満足していたのに、2個、3個と増えても満足できなくなる。 脳はさらに強い快楽を求め、摂取量がエスカレートしていくのです。 食べ物だけでなく、恋愛依存やギャンブル依存でも、脳の報酬系は同じように働きます。 どれも「快楽や報酬を期待する」ことでドーパミンが分泌され、行動を強化する仕組みなのです。 ちなみに「メンヘラ」と呼ばれる人の中には、アルコール依存・恋愛やセックス依存・摂食障害 を併発しているケースが少なくありません。 メンヘラ 「メンヘラ」とは、「メンタルヘルス（mental health）」が語源のインターネットスラングで、精神的に不安定になりやすく、かまってほしい・愛されたいという気持ちから周囲を振り回してしまうような行動をとる人を指す俗語です。 話を聞くと、彼女たちは子供の頃から強いストレスを抱えていることが多く、そうした背景が依存や情緒不安定につながっていると考えられます。 一流はドーパミンを味方にする サッカー選手や野球選手など、世界で結果を出す一流の人たち。 彼らの言葉から垣間見えるのは、酒やギャンブルに依存せず、目標に一直線に向かう姿勢です。 私の知り合いに登録者10万人を突破したYouTuberがいます。 彼もまた、自分の目的や目標以外には脇目も振りません。 本来ドーパミンは「狩りが成功するまで頑張れる」ための物質。 彼らは祖先の狩猟と同じように、ドーパミンを依存ではなく 努力の報酬 に変えているのです。 一方で現代は、努力なしにドーパミンを放出できる環境があまりにも多い。 それこそが、中毒化を招いている原因だと思います。私は専門家ではありませんが、生活の中で実感していることです。 ドーパミン依存からの脱却：脳のバグ修正と持続的幸福への対策 一流の話で前述した通り、ドーパミンは敵ではなく 使い方次第で強力な味方 になります。 まずは自分が「何」に依存していたか考察しました。 お酒 ― ストレスを一時的に麻痺させるため 辛い食べ物 ― 憂鬱を刺激で打ち消すため デジタルコンテンツ ― 無限スクロールで時間を“溶かす”ため こうして私は、依存を「努力の報酬」に置き換える方法を探し始めたのです。 スマホが時間を溶かす罠とデジタル娯楽の制限 ドーパミン中毒という言葉を知るまでは、自分がいかにSNSのスクロール中毒だったか気づきませんでした。 無意識に携帯を開いて、インスタやXを確認してしまう 数時間前の投稿にどんな反応がついたか気になる 誰が何を投稿しているかも気になって仕方ない ã

1‚¤ãƒ³ã‚¹ã‚¿ãƒªãƒ¼ãƒ«ã‚„YouTubeショートを無限にスクロールして、気づけば30分どころか1時間が消えている。 まさに“時間を溶かす”瞬間です。 もし『脳内麻薬 人間を支配する快楽物質ドーパミンの正体』や『ドーパミン中毒』という書籍に出会わなければ、私はこれを依存だと認識できなかったでしょう。 でも今なら分かります。これも立派な デジタル依存＝ドーパミン中毒 なのです。 科学的裏付け 科学的に言えば、SNSや動画の無限スクロールは「変動報酬スケジュール（variable reward）」と呼ばれる仕組みで、脳の報酬系を強く刺激する。 ドーパミンは「次に何が出てくるか分からない期待」で分泌されるため、スクロールが止められなくなる。 これはギャンブル依存と同じ仕組みであり、科学的にも「デジタル依存＝ドーパミン中毒」と説明できる。 時間を溶かさず努力で報酬を得る：ドーパミンを酒以外に置き換える ドーパミンは脳内で自然に合成・分泌される神経伝達物質です。 健康な人で自然な生活をしている限り、1日に分泌できる量には生理的な上限があります。 薬物（覚醒剤や一部の抗うつ薬など）を使わない限り、その自然な分泌量を大きく超えることはできません。 脳と薬物の基礎知識/法務省 吉田兼好法師の徒然草188段に「一事に励め」という言葉があります。 立派なお坊さんになりたかった若者が、乗馬や笛の練習ばかりに時間を費やし、肝心の修行に励めず結局お坊さんになれなかったという話です。 笛や乗馬でもドーパミンは出ていたでしょう。でも本来の目的である仏門の修行には活かされなかったのです。 現代は、この何百倍も簡単にドーパミンが出る環境があります。しかも無努力で。 スマホの無限スクロールなど、依存に陥る罠だらけです。 私は朝の散歩の後、カフェに行くのが日課です。以前はSNSのチェックをしていましたが、今は読書に置き換えました。 SNSのチェックは一瞬の快楽。本を読むのは最低でも2時間の充実。後者のほうがドーパミン放出までに時間がかかるため、依存になりづらいのです。 Netflixもやめました。ファスティングを始めて全く見なくなっていたことに気づいたからです。 以前は夜、Netflixを見ながら晩酌するのが日課でした。今は代わりにストレッチや瞑想。勉強系のYouTubeやブログで知識や気持ちを整理する時間に変わりました。 その分の課金も、娯楽ではなく Kindle Unlimited への投資に置き換えました。 溶かしている時間を有意義なものに置き換えるマインド 現代人ならSNSに最低30分は時間を溶かしていると思います。 筋トレ → ストレス耐性がつき、健康になる 読書 → 知識が身につき、新しい視点を得られる可能性がある 努力に付随するドーパミンは 「結果」とセット なので、生産性があります。 一方、SNSの無限スクロールはどうでしょうか？ 一瞬の快楽は残るが、筋トレや読書のような成果は残りません。 だから私は筋トレやストレッチの時間を30分と決めています。 無駄に溶かした時間を、有意義な時間へと「投資」に置き換えているだけです。 まだ「いいね・コメント」が気になるのは課題。 だから緊急連絡以外の通知はすべて切りました。 こうして私は、ドーパミンを依存ではなく 努力の報酬に変える習慣 を少しずつ積み上げています。 まとめ：ドーパミン中毒を治すロードマップとこれからの生存戦略 私はあくまでドーパミンが「悪」と言っているわけではありません。使い方次第で強力な味方になります。 経営や仕事のプレッシャーから強いお酒に逃げたこともありました。 そもそも私がそんな大変な思いをしてまでこのセブにいる理由は、ここに ビジネスがあるから です。しかも私が始めたことでã

1™ã€‚ 失敗したらどうしよう 周りにがっかりされたらどうしよう 宣言したことが出来てない。情けない 資金繰りが上手くいかなくなったら怖い 会社勤めじゃないし老後が不安 こうした不安は今も頭の中をグルグル巡っています。習慣を変えても、共存は続いています。 大事なのは、自分がどんな状況にいるのかを理解すること。 読書や動画、AIを通じて自分の状況を考察して分かったのは、ストレスに立ち向かう必要はないということ。 努力のないドーパミン放出 は一時的な癒しになるけど ストレスそのものを解決できない のです。 最近は「絶対成功してやろう」と意気込まず肩の力を抜き、とにかく今の仕事にフォーカスするようにしています。 なくならないストレスなら、運動で 自分を律する訓練 をして耐性をつけたほうが合理的です。 仕事のプロジェクトもフィリピンの面倒な事務処理も、一個単位で見ればいずれ終わります。 終わるたびにドーパミンを出すように仕向けたほうが健全です。 まだSNSの中毒や課題は残っています。現代社会では完全な脱却は不可能かもしれません。 それでも、ここまで掘り下げて可能な限り排除しただけで、未来の行動は必ず変わると信じています。 今日、あなたはどんな時間を溶かしましたか？その30分を、努力の報酬 に置き換えてみませんか。 この記事がみなさんにとっての一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry558","title":"過食とストレスの悪循環を断ち切る、マインドフルな食習慣（マインドフルイーティング）","date":"2026-01-04","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2026/entry558.webp","description":"過食症の家族を見てきた体験から、ファスティングやクリーンイーティングを経て辿り着いたマインドフルイーティング。セブの市場での食材選びや食卓の工夫も紹介。","tags":["食生活","セブ島生活"],"body":"みなさん、マインドフルイーティング ってご存知ですか？ 食べることに意識を向け、心と体の声を大切にする食習慣です。 食べる瞑想 とも呼ばれ、ひと口ひと口を丁寧に味わいながら、食材の香りや食感、体の反応に気づきを向けます。 ただ空腹を満たすために食べるのではなく、次のようなことに意識を向けます 今、自分が本当に必要としている量や味は何か 食べることで心や体がどう変化するか 食材がどこから来ているのか 過食やエモーショナルイーティング（感情に振り回される食べ方）を防ぎ、自然と 食べることへの感謝 や 心の安定 につながるといわれています。 〇〇イーティングを多用していますが、意味をまとめて伝えたいからです。 更年期のどん底を救ったファスティング、そして辿り着いたマインドフルイーティング 2025年、更年期でメンタルもボロボロ。海外での会社のハンドリング、仕事のストレスもピークで毎日強い酒を煽ってました。下痢で腸が腫れているのがわかるくらい体調がどん底でした。このままではダメだ、最初は運動を始めたのがきっかけだったのですが、食事や生活習慣を見直すことにしました。 ファスティングに関してはまとめてるので、詳しく知りたい方はこちらをお読みください。 ファスティング始め、食への考え方がいつの間にか マインドフル・イーティング に変わっていました。 セブで実践するマインドフルイーティング 私がマインドフルイーティングに傾いたきっかけはファスティングを始めたことでã

1™ã€‚ パソコンの前でお腹が空いたら胃にぶち込んでいたインスタント麺を卒業し、食事は基本手作りするようになりました。 ファスティングから始まった食卓を整える習慣 食卓を整える習慣は、ファスティングログをインスタのストーリーに残したのがきっかけでした。 テーブルで食べるようになり、以前買ったランチョンマットを引っ張り出して盛り付けるようになったら、食事が“儀式”のように特別に感じられるようになったんです。 目で見ても楽しめるように、箸置きや陶器のお皿を使うようになり、食卓そのものが「食べることを楽しむ場」に変わりました。 セブの市場で見つけた身土不二の食材 お金をかけたくなかったので、セブで手に入る食材を相当勉強しました。 たとえば、ビタミンCを摂りたい！ けどセブで買えるキウイは中国産の上、ぶっちゃけ高いです。 そこで、代替品としてアップルグアバ（現地では基本グアバとして取り扱われてるかも）を発見しました。代替品どころか、こちらのほうがビタミンC含有量は超超超優秀！そしてカリウムも豊富です。 実はフィリピンで収穫できる野菜は暑くて汗かく、紫外線が強いこの地方の人にぴったりな栄養素を含んでいる物が多いんです。 まさに、仏教用語の身土不二。 身土不二（しんどふじ/しんどふに） これまでにしてきた行いである「身」と、その身が拠りどころとしている環境である「土」は切り離せない。 フィリピン食材の栄養を勉強をすることで、地でとれるものが一番栄養価があってしかも安い食材ことを知りました。 私は毎週土曜日市場まで歩いて食材を買いに行きます。更に節約することができています。 ファスティングから気づいたマインドフルイーティングの食の楽しみ 市場でラップされていない野菜を買うようになって気づいたことがあります。 ちょっとした野菜でもジューシーで甘くて驚くほど美味しいんです。 そういうときは、たとえ一人でも迷わず「美味しい!!!」と声に出すようにしています。声に出すことで、食べることが小さなイベントになり、心が満たされるのを感じます。 味付けはヒマラヤ岩塩、カラマンシー（フィリピンのかぼすのような柑橘）、オリーブオイル、胡椒、ドライハーブ、生姜やにんにく。シンプルだからこそ素材の力が際立ちます。 市場で買った魚のアラを煮れば、骨からしっかりスープが出て、調味料をほとんど使わなくても豊かな味わいになります。 アップルグアバ（グアバを品種改良して栽培しやすくしたもの）も、カットしたときに果肉がしっとりしていたらスムージーにせず、そのまま食べるようにしています。 こうした食べ方を続けるうちに、自然と食べ物に感謝の気持ちが湧き、食べることそのものが心を整える習慣になっていきました。 マインドフルな食べ方がなぜ必要なのか マインドフル とは、英語 mindful の訳で「気づいている」「意識を向けている」「心に留めている」という意味です。 もともとは仏教の瞑想法に由来し、「今この瞬間に意識を向ける」という考え方を表します。 つまり マインドフルな食べ方 とは、ただ食べるのではなく、食材や自分の体の反応に注意を払いながら食事をすること。 感情に振り回されず、心と体の声を聞き、感謝と満足感を育むことができます。 エモーショナルイーティングとは？感情に振り回される食習慣 エモーショナルイーティングとは、寂しさやイライラ、時間潰しなど感情に振り回されて食べてしまうことでã

1™ã€‚ 食べることは一時的にストレスを軽減しますが、根本的な解決には至りません。 ダイエットで食事を制限していると、ストレスでドカ食いしてしまうこともあります。食べている最中は心が満たされても、その後罪悪感に苛まれる――この悪循環が繰り返されるうちに、過食症などの精神的な不調へ発展してしまうこともあるのです。 だからこそ、感情に振り回されない マインドフルな食べ方 が必要なのです。 私の場合、仕事の忙しさでギリギリまでご飯を我慢して、ガツっと辛ラーメンを食べるのが習慣になっていました。食べ過ぎではありませんが、辛い刺激がないと仕事のストレスを緩和できない。そんな日々が続いていたんです。 こんな食べ方も一種のエモーショナルイーティングなんです。しかも厄介なのは少し 自傷行為（辛さでストレスを誤魔化す） に近いということです。 感情に振り回されている？「何を食べてるか」でチェックして！ もし「自分も感情に振り回されているかも」と感じたら、何を食べているかチェックしてみてください。 秒で口に運べる 袋菓子 や コンビニスイーツ ではないでしょうか？ 時間をかけて料理して、ランチョンマットを敷き、器を用意してテーブルに座り、ジャズなどリラックスできる音楽を聞きながら食べる――そんな食べ方はしていないはずです。 大体、自分で手間をかけた料理ではなく、気軽に一時的な感情を満たすための食べ方になっている。それこそがエモーショナルイーティングなのです。 マインドフルイーティングが過食症に効果的？研究やエビデンスを紹介 有名どころでは、米国の心理学者ジーン・クリステラーによるベストセラー 「マインドフル・イーティング 過食から自由になる心理学」があります。 この本は過食症対策として心理学的アプローチをマインドフルイーティングに応用した実践書です。 その他にも、研究結果が多数報告されています。 国内研究 千葉大学の研究では女子大学生を対象に過食傾向とマインドフルネスの関連を調査。 「非判断的に受け止める姿勢」が過食傾向を抑える要因になり得ると示唆されています。 海外研究 MB-EAT（Mindfulness-Based Eating Awareness Training）はKristellerらが開発したプログラム。 過食や肥満症の治療に効果があるとされ、国内でも基礎研究が進められています。 臨床応用 日本医事新報社の記事では、肥満症や糖尿病、過食性障害の患者にマインドフルイーティングが適応される心理的アプローチとして紹介。 食事制限ではなく「空腹や満腹に気づく力」を育てることで、食べ過ぎや習慣的な食行動を見直す効果があるとされています。 これらのエビデンスからも、マインドフルイーティングは過食症やストレス食いに悩む人にとって有効な選択肢になり得ると考えられます。 クリーンイーティングとは？セブの食材で気づいた食べ方 クリーンイーティングとは、加工食品や合成調味料、精製砂糖やグルテンなどをできるだけ避け、自然な食材をそのまま楽しむ食べ方を指します。 セブの市場には新鮮な野菜や魚介が豊富に並んでいて、移住してから初めて自分で魚を捌くようになりました。以前はトレイにパッキングされたものしか買ったことがなかったのですが、挑戦してみると素材そのものの味を楽しめるようになったんです。 味付けを最小限にすると、野菜の自然な甘みや魚の旨味に気づけるようになりました。それが クリーンイーティング と呼ばれていることをあとから知りました。 もちろん定義は人によってさまざまで、極端に加工食品や砂糖を 悪 や 毒 とみなã

1™äººã‚‚います。でも私はそうは思いません。 他人の生き方や食生活を否定して自分を正当化することは全く マインドフル だと思いませんし、私のポリシーに反します。 人と一緒にいるときは揚げ物もポテチも美味しくいただきます。 私にとってのクリーンイーティングは「何を食べるか、食べないかを自分で選択すること」。そしてその選択に意識を向けることが、自然とマインドフルイーティングへとつながっていきました。 マインドフルイーティングを推す理由：身内の過食症を見てきたから 私の大切な家族の一人が10代の頃から過食症で、今も完治していません。 きっかけはダイエットでした。母も祖母もそうですが、私たち女系は肥満になりやすい体質。思春期で太ってしまったことから、彼女はダイエットを始め、それ以来40年以上も過食症とともに生きています。 それなのに今も世の中には「細い＝美しい」という理想像を煽る広告や、過激な発信をするインフルエンサーが溢れています。 セブに来てからも「ガリガリになりたい」と口にする人や、摂食障害の日本人にも出会いました。 私は正直、このマーケティングが家族を苦しめてきたことを憎んでいます。セブに来たとき体重計を捨てたのもそのためです。減量はこの先も一生する気はありません。それが私なりの小さな仕返しでした。 そんな私自身も、仕事や更年期のストレスから「自分をいじめるような食べ方」をしていたことに気づきました。ファスティングを始め、徐々にクリーンイーティングへ切り替え、最終的にはマインドフルイーティングにたどり着いたのです。 エモーショナルイーティングは誰にでも起こります。だからこそ栄養や体の声に耳を傾け、今ここにある食に感謝して時間をかけて食べることが必要です。 今ある食べ物に集中するようになってから、ストレスやフラストレーションを埋めるために食べる必要がなくなりました。食べることが心を整える習慣へと変わったのです。 まずは今日の一食を、ゆっくり味わってみてください。きっと食べることがもっと豊かに感じられるはずです。 まとめ・マインドフルイーティングで食の時間が幸せに ファスティングから始まって辿り着いたマインドフルイーティング。 私のやっているインターミットファスティング（断続的断食）は8時間以内に食事を終わらせる必要があります。 毎日どの時間に食べるかスケジュールを立て、食べる回数が減る分栄養に配慮する必要があります。 回数が少ないからこそ、一回一回を丁寧に味わって食べたくなるのです。 これが、マインドフルな食の姿勢を作ったのだと思います。 実は同時期にインターミットファスティングを始めた友だちがいます。以前は仕事終わりにジョリビーをがっついていたそうですが、今では「野菜が甘い！」と感謝の気持ちを口にするようになり、自然とマインドフルな食べ方に変わったそうです。 今回はマインドフルイーティングと、その対極にあるエモーショナルイーティングにフォーカスして綴りました。 私の信念です。 食べることは生きることの同義と言っても過言ではありません。 この記事が皆さんの本来は 素晴らしいはずの食生活 の一助となれば幸いです。 最後までお読みいただきありがとうございました。 まずは今日の一食を、ひと口ごとに「美味しい」と声に出してみてください。きっと食べる時間がもっと幸せに感じられるはずです。","noindex":false},{"slug":"entry557","title":"断食48時間でオートファジーは最大化する？16時間ファスティングでシミが薄くなった私の体験談","date":"2025-12-29","modifiedDate":"2026-06-23","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbn

1ail/2025/entry557.webp","description":"断食48時間で最大化すると言われるオートファジー。無理のない16時間ファスティング（断食）でもシミへの効果は絶大？紫外線が強いフィリピンで10年悩んだラスボス級のシミが、たった1ヶ月で薄くなった実体験から、4つの最強美肌習慣をご紹介します。","tags":["アンチエイジング","セブ島生活"],"body":"シミでお悩みの方、朗報です。 48歳、更年期真っ盛りの私が、紫外線が日本の5〜6倍とも言われるフィリピンで10年以上悩んでいた“ ラスボス級のシミ ”を薄くできた方法をご紹介します。 アラフィフ、更年期…正直いろいろ諦めかけていましたが、やっぱりここで諦めてはダメだと一念発起し、16時間断食（16:8ファスティング）を始めました。 「オートファジーを働かせるための断食」と聞くと、「48時間断食（丸2日の絶食）」のようなハードな方法をイメージする方も多いかもしれません。実際、48時間断食の効果としてオートファジーの活性化が最大になるとも言われています。 普通の生活のなかで丸2日も絶食するのはハードルが高すぎますよね。 そこで私は、無理なく毎日続けられる「16時間断食」を取り入れました。最初はたるみケア中心に行っていたのですが、結論から言うと16時間でも効果は絶大。特にシミに関しては、たった一ヶ月で目に見える結果が出ました。。 私のバックグラウンドは現在、セブ島で会社を経営するエンジニアです。ただし、15年以上前キャリアチェンジするまでは、専門学校や化粧品メーカーでインストラクターをするなど美容の知識は深いと自負しています。 やったこと 1. ファスティングで腸を休ませ、改善する 2. ビタミンC1000mg以上を分割摂取 3. 中高強度の運動を30分 4. 日焼け対策の徹底 この4つが私のシミケアの軸でã

1™ã€‚なぜシミが薄くなったか、経験と科学的な根拠を併せて私の分かる範囲で実践したことを解説します。 ファスティングで腸を休ませ、改善する ファスティングを始めた理由のひとつがアンチエイジング。 最初は気付かないうちにたるんでしまった顔を改善したくて、フィリピンでは有名な Healthy Options でビタミンC入のコラーゲンペプチド（2,300ペソ／5,000円以上ぐらい）を購入し、意気揚々と摂取を開始しました。 （左から）WatsonsのビタミンC（1錠500mg）、Healthy Optionsのコラーゲンペプチド Healthy Options Ayala Center level2 それを友だちに話したら、「コラーゲンは実はあまり吸収できない」とアドバイスをうけました。美容インストラクターだったくせに実はお金をかけてこなかった私。私の割に美容のために高いお金を出したつもりでしたがショックでした。 その後、様々な研究やエビデンスを調べたところ、現時点（2025年現在）、サプリのコラーゲン・ペプチドは通常の食品のコラーゲンよりも分子的にも細かく、効果が見られることが分かりました。 とはいえ、どんなに良い栄養を摂取しても、どんなに高いサプリメントを摂取しても、 腸が吸収できなければ お金の無駄遣い です。 金ドブ絶対イヤ！と思って、まずは先に土台作りとして腸内環境を改善するために 16時間断食 を開始。 私の場合、長年の飲酒習慣があり、腸内環境は劣悪でした。まずは腸を回復させるために休ませる必要があると考えました。 ファスティング中の食事 普段から私1日、1〜2回しかご飯を食べません。私にとってはイージーな インターミットファスティング（断続的断食） をチョイスしました。これが私の腸改善の第一歩となりました。 断続的断食のひとつ、16時間断食について、詳しく知りたい方はこちら。 ファスティングで腸内環境改善までに、最初は壁にぶつかることもありましたが、1ヶ月ほどで落ち着いてきました。 オートファジー（細胞の自己修復・浄化）は48時間の断食で最大化する？ 1日16時間以上の断食で空腹状態が続くことで、オートファジー という体が本来持っている機能が促進されます。 体は栄養が足りないと体の中で壊れたり、不要になった細胞をリサイクルしようとします。 結果、炎症や肌のターンオーバーが助けられる可能性を研究結果でも示唆されているそうで、特に水分保持、肌表面の滑らかさ改善、色素沈着（シミ）軽減したという体験談も多くあります。 ただ、今回はこのオートファジーはサポート程度の効果で、ファスティングそのものの腸のリカバーのほうが個人的にはシミ改善に貢献したと考えてます。 ビタミンC1,000mg以上を分割摂取 ビタミンCをサプリも併せて1日1,000mg以上（目標1,500mg）を分割して摂取しています。 AI曰くこれが一番根拠が強いとのこと。ビタミンCは水溶性で一度に多量摂取しても体内に留めることが難しく、500mgを上限に分割（4回〜6回）して摂取。科学的にもビタミンCの分割摂取は根拠が強いとされています。 セブにはありがたいことにカラマンシー（レモンの3倍）やアップルグアバ（グアバの品種改良されたものでグアバほどじゃないけどビタミンCがチート級）など、ビタミンCが豊富に含まれた食品がたくさんあります。しかし、いろんな摂取方法を試しましたが、 一度の食事で摂れるのはせいぜい200mg程度が限界でした。 1500mg 摂取しようとしたらサプリ無しは無理と断念し、食事とã

1‚µãƒ—リの合せ技で行くことにしました。 体内にビタミンCがより長くいる状態を持続させたいので、私の場合 500mg のビタミンC錠剤を半分に割って分割して摂取しています。 16時間断食の間の空腹対策の軽食やサプリ摂取は一回50kcalに満たないので、カウントしてません。 私の普段の食事だと、1日トータル大体300〜700mgのビタミンCは摂取できますが、更にプラスしてビタミンC錠剤2個摂取しています。 例) 朝イチ--お白湯にカラマンシー(2個絞る) 食事後や水分補給時にビタミンC錠剤 アップルグアバ（グアップル）などのビタミンC豊富な野菜やフルーツでスムージー 夜寝る前にはコラーゲン・ペプチドとビタミンCを一緒に摂るようにしています。そのため、夜寝る前に残しておいた錠剤250〜500mgを摂るようにしています。 中高強度の運動を30分 これは30代で10年以上、中高強度の運動をやってきた持論です。運動は 最強の美容法 です。 当時カポエイラ（ブラジルの舞踏風格闘技）をやっていた私は、大したスキンケアもしておらず、大酒飲みだったにも関わらずお肌もキレイで、30代後半でも、時には20代に間違われるほどでした。 その頃からなんとなくですが、運動をしたら成長ホルモンが出て、コラーゲン生成やターンオーバーが促進されるのは知ってました。中高強度の運動で見た目が若返って見えるのはよくあることです。 それだけではなく、筋肉から分泌されるマイオカイン（特にマイオネクチン）がメラニン生成を抑え、シミを防いだり、肌を白く保ったりする効果が研究で指摘されているそうです。 自宅で気軽にできる自重トレが中心 私の具体的な筋トレですが、スクワットなどの自重が基本。中高強度にするために、レジスタンスバンドを使ったりひねりを使った運動を取り入れるようにしています。 昨年はジムで筋トレしていましたが、時間もお金もかかるのがもったいないと感じて自宅で半〜1畳あればできる運動に切り替えました。 主に鍛えるのは太もも、おしり、背中など大きめの筋肉を中心に日替わりで狙ったメニューにしています。1種目につき基本数量多めの20回を3セット。メニューの数をあえて減らしてサクッと終わるようにしています。無理なく続けられる工夫が大事！これが私の“運動美容法”の基本です。 ジムに通ってた時に使ってた時に購入したレジスタンスバンド。Lazada などで200ペソ以下で買える 日焼け対策の徹底 もちろん、シミは作らせません！！日焼け対策を徹底しています。 日焼け止め セブで手に入る日焼け止めと日本のスプレータイプ 顔は基本頬や鼻など染みができやすい場所は二度塗りです。 体は、首はもちろん耳まで塗っています。 部屋にいても日が沈むまでは、2〜3時間おきに塗り直しています。 外出時にはシーンに合わせて日焼け止めの種類を使い分けています。 物理的な紫外線対策 朝起きた時日差しを浴びないよう、遮光カーテンを締めて寝ます。 出かけるときはサングラス、帽子を忘れないようにしています。長時間出かけるときはフード付き長袖パーカーを羽織っています。 これらを徹底することで、紫外線の強いフィリピンでも肌を守ることができています。 その他、実践していること その他、若かりし頃の専門的な美容知識も含めて実践していることをご紹介します。 ソラレンなどシミを作る成分を摂取しない レモンやグレープフルーツなどの柑橘類には、ソラレンという光毒性物質 が含まれています。一見柑橘類はビタミンC豊富そうで飛びついちゃいますが、この成分がシミ対策をしている人には危険。摂取して数時間後に日差しを浴びると、ソラレンが反応してシミの原因になります。 私は若い頃からこのソラレンの特性を知っていたので、レモンなどは夜のみ摂取するようにしています。 フィリピンと言えばカラマンシー。同じ柑橘類でもこのソラレンの含有が微量で、日焼け対策をしていれば気にする必要はないのでガンガン摂取しています。 日本で、このソラレンを避けて食べ物からビタミンCを摂取したい場合、代わりにキウイ、いちご、赤＆黄ピーマンなどをおすすめします。 知識を活かして食べ方やタイミングを工夫することが、シミ対策には大切です。 とにかく歩く 有酸素運動も兼ねてますが、私の歩く目的はストレス発散と血行を良くすることでã

1™ã€‚フィリピンのほとんどのコンドミニアムは浴槽がありません。血流を促して老廃物を排出しやすい状態にしています。 ストレスもシミを作りますから、ストレス対策としても散歩は優秀。 朝の散歩は40分少し早足で歩きます。朝日を浴びる光刺激とリズム運動の相乗効果で脳が活性化することでセロトニンを分泌（※）させるためです。 時々行う夜の散歩は20分でゆっくり歩いてメラトニン（※）を出してしっかり眠れるようにしています。 最初は更年期の落ち込み対策として始めた散歩でしたが、心身のリセットと肌ケアの両方につながっています。 ※ セロトニンは心を安定させる神経伝達物質で、メラトニンは眠りを促す睡眠ホルモンです。 就寝時：よく眠れるよう工夫をする お肌は寝てる間に作られます。だから単純によく眠れるようにしています。 今まではセブのゴキ◯リ怖すぎて睡眠中も電気をつけっぱなしでしたが、最近は暗くして寢るようになりました。そして、枕元に携帯も置くのをやめました。 そして携帯を時計代わりにするのもやめ、部屋にかけ時計を置きました。 スマホなどから発せられるブルーライトは脳を覚醒させ、メラトニン分泌を抑制し、眠りを妨げることが科学的に確認されているからです。 どうしても見たいのであれば物理的にブルーライトをカットするシートを貼り付ける方法もありますが、SNS をダラダラと見て睡眠時間を削るのを防ぐためでもあります。 本来は就寝前1時間はブルーライトを遮断したほうが良いので、今後は就寝前には携帯を見ない習慣をつけようと思います。 朝晩〜10分の表情筋トレーニング 元々たるみが気になって始めたアンチエイジングだったので、表情筋トレーニングも始めました。顔のリンパや血流が良くなるので間接的にシミ対策のサポートしているはずです。 こういったルーティーンを毎日やるのはとても面倒だと思いますよね？ だから、実践に移す基準は「普æ®

1µYouTubeやそのほかのSNSなど閲覧で無駄遣いしている時間」と同等くらいで終わる内容と定めてます。 どうせ時間を無駄遣いするなら、未来に投資しようって気になるじゃないですか？ だから、筋トレも30分以内に収まるようにしています。 保湿の徹底 私は基本UV対策とお肌の保湿はセットだと考えています。水分を保持していない肌は紫外線にも弱くなるので、保湿も徹底。 シンプルなスキンケア 私は敏感肌なのでスキンケアもシンプルです。余計なものをベタベタつけてたら時間もかかるし、お肌にも負担がかかります。 私はスキンケアグッズに値段はこだわりませんが、Human Nature の化粧水と洗顔、Healthy Options の オーガニック・アルガンオイル が基本です。 （左から）Human Nature モリンガエキス配合の Hydrating face toner（化粧水）、Healthy Optionsオーガニックアルガンオイル Human Nature マンダウエ店 クリームや乳液を避けるのは乳化剤入の基礎化粧品を使いたくないからです。 ちなみにアルガンオイルは、ブースターオイル（化粧水などで保湿する前の一時的なフタ）としても使えます。一本1,000ペソちょい（2025年現在）ですが、相当気に入っていてリピしています。 日中は保湿ミストを数回使います。お肌が突っ張るようだったらアルガンオイルを乾燥が気になるところだけ塗布します。 刺激はNG！！こすらない お肌の水分を蒸発させないために上質なオイルでフタを優先 化粧水は二度付けまで（水分を与えすぎは肌の蒸発を招く） 水は少なくても2L。常温かお白湯で内からの水分補給 経皮吸収（肌からの吸収）の効果は雀の涙ほどなので、内側から潤すために水分を1日2L以上は取るようにしています。 特にこだわりは起き抜けの水分補給。前は常温水をコップ2杯でしたが、現在はお白湯を3杯（うち1はカラマンシー果汁入り）を飲むようにしています。 まとめ・3ヶ月後が楽しみ たった、1ヶ月で10年来の頑固なシミが薄くなった体験談をシェアさせていただきました。 基本の軸の4つ、ファスティングで腸を休ませ、改善する・ビタミンC1,000mg以上を分割摂取・中高強度の運動を30分・日焼け対策の徹底 以外にも、その他実践していることなどに上げた、小さな習慣の積み重ねが、シミ対策や肌の回復に大きくつながって来たのだと思います。 よっぽどレーザーも考えたけど、レーザーでシミ取りしたいろんな人の話を聞くとみんな口を揃えて「シミが復活した」というので、その後ケアをしない限りは継続性がないんですよね。 それなら、シミの出来にくい根本の 肌作りや習慣を身に着けたほうが現実的 かなぁと思った次第です。 こうやって改めて比較すると、毛穴の縦開きなどを含むたるみも改善されてますね。 実は以前、ハイドロキノン＋トレチノインでシミ対策を行っていたけど。。。 実はファスティング＋ビタミンCを行う前、ハイドロキノン＋トレチノインでシミ対策を行っていました。 それはそれで効果は感じたけどA反応（肌が赤くなりヒリヒリする状態）はツライかったです。しかもこのファスティング＋ビタミンC集中砲火ほど劇的な変化は感じられませんでした。 Beauty comes from the inside.美は内側から溢れ出す。 私が好きな言葉のひとつなのですが、美容効果も外からではなく内側からあふれるものなんですよね。 48歳でシミを薄くすることができた私の体験が、シミ対策をしたい人の一助となれば幸いです。 また、3ヶ月後の変化もまたシã‚

1§ã‚¢ã—たいと思います。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry556","title":"フィリピンで生魚や刺身は食べられる？セブ島の市場で買える栄養満点な海産物と安全な選び方","date":"2025-12-25","modifiedDate":"2026-06-08","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2025/entry556.webp","description":"フィリピンで生魚や刺身は食べられる？セブ島のローカル市場で手に入るイカや青魚タンギギ等の栄養・調理法に加え、アニサキスや貝毒を避けて安全に楽しむ方法を解説。ジェネラル・サントス直送マグロが買える穴場スーパーや、AAバーベキュー等おすすめの大手レストラン情報も満載！","tags":["食生活","フィリピン食材","セブ島生活"],"body":"ご飯は時間を節約するために作り置きする派です。 節約のためによく市場（自宅から歩いて20分）まで足を伸ばします。 Lahug Public Marcket セブと言えば海。実は世界のマグロ漁獲量ランキング（2023年）では、フィリピンは約73,265トンで世界11位。 特にミンダナオ島南部（ジェネラルサントス港など）は、「フィリピンのマグロ首都」と呼ばれるほど輸出拠点となっています。 もちろんマグロだけではありません。サバやイワシなどの魚はもちろん、イカ、エビ、カニ、海藻や海類も豊富！ そこで今日は自宅でも調理しやすい市場で手に入る海の幸、ちょっと変わったものまでご紹介します。 ※ カニがないのは私がカニが食べれないのでレポートできないため。 イカ（カラマリ） フィリピンと言えばイカ。カラマリ（Calamares・スペイン語）と言われ、何処に行っても手に入ります。 先日少し大きめサイズ2杯でたった240ペソ（550円）でした。 ルスタンスやマーケットプレイスでも新鮮なものは手に入ると思いますが、ローカル市場では値段が格段に違います。 フィリピン料理のお店に行くと、イカリングとサンミゲルライト（100Kcalしかないアジアで人気のフィリピンビール）が定番。 高タンパクで低脂質： 脂肪を落としつつ筋トレしたい人にもオススメ タウリン豊富： 疲労回復や肝機能サポート ビタミンB12： 赤血球をつくるのを助け、貧血予防や神経の健康維持に役立つ 私は海藻（グソ）と一緒に酢の物にして常備菜としてストックしています。 その他、パスタやココナッツカレーの具としても重宝しています。 友だちいわく刺し身としても食べれるみたいですが、アニサキスが怖いので私は家では食べたことがありません笑。 ※ フィリピン近海の魚にもアニサキス（寄生虫）は確認されています。 日本だけでなく、温暖な海域でも広く分布していて、フィリピンの漁場でも報告があります。 エビ（ガンバス） エビもフィリピンの定番。個人的には魚介類で1、2を争う好物！ ガンバス（Gambas・スペイン語）と呼ばれ、Chobi Chobi などのフィリピン料理レストランではニンニクたっぷりで炒めて提供しています。 基本、現地のガンバスは皮ごとにんにくと炒めてるので背わたもそのままですけどね。。。 いつも10尾とか買うのですが、大きなエビなのに〜200ペソくらいで入手できます。カルボンマーケットだったらもっと安い可能性アリ！ 高タンパクで低カロリー： ダイエット中でも安心して食べられる アスタキサンチン： 強力な抗酸化成分で、肌の健康や免疫力アップに役立つ ビタミンB12： 赤血球をつくるのを助け、貧血予防に効果的 セレン： 体の抗酸化機能をサポートし、老化防止や免疫維持に関わる こちらはイカ同様に酢の物、ココナッツカレー、冷凍用に鶏ミンチと混ぜてエビ団子にしています。 グソ（海藻） グソは紅藻の一種で、私が最もよく食べる海藻です。ビニールいっぱいに詰めてもらい大体30ペソ（100円以下）。超お得でã

1™ã€‚ キニラウ（生魚の酢漬け）というフィリピン伝統のココナッツベースの酢の物で、マグロなどの生魚や野菜と一緒に和えたものですが、たまにこのグソが入っていることがあります。 コリコリの食感が気に入ってよく食べるようになりました。 食物繊維： 腸内環境を整え、便通改善に役立つ ミネラル（カルシウム・マグネシウム）： 骨や歯の健康をサポート ヨウ素： 甲状腺の働きを助け、代謝を支える 海藻なのでもちろん低カロリー！さらにビタミンKやビタミンCも含まれていて、血液や抗酸化の働きにプラスになります。 私は基本１、2分さっと茹で（茹ですぎるとぬめりが出るので要注意）水洗いします。 エビやイカと酢のものにしてストックしていることが多いです。 💡 現地在住の私からのリアルなアドバイス キニラウをローカル市場の魚を使って自分でイチから作るのは、衛生面や寄生虫のリスクを考えると家では絶対にオススメしません（私も家では生魚は食べません！）。 もしフィリピン伝統のキニラウを安全に美味しく楽しみたいなら、 「AAバーベキュー（AA BBQ）」などの衛生管理がしっかり整った現地の大手有名レストラン で注文するのが一番安心で確実ですよ！ タンギギ（青魚） こちらは市場のおばちゃん曰く、タンギギ（Tangigue）です。 タンギギはスパニッシュ・マケレレ（サバの仲間）で市場で1キロ450ペソ（1200円）くらいで購入可能です。 日本の魚で言えばサワラに近いです。 私はよくアラで買ってます。 タイムやローリエなどのハーブと粒胡椒・生姜・にんにくで下味をつけ、炊飯器（保温のみで5時間程度放置）で骨ごとじっくり煮出し、小分けに冷凍してストックしています。 セブの魚は血抜きされてないので、さっと湯引きして血合いを洗って下ごしらえが基本です。 タンギギは青魚なので： DHA・EPA（オメガ3脂肪酸）： 脳の働きや血流改善に役立ち、炎症を抑える働きもある ビタミンD： 骨の健康をサポートし、カルシウムの吸収を助ける 良質なたんぱく質： 筋肉や代謝の維持に欠かせない 魚のコラーゲン（1型）はサプリのコラーゲンペプチドほどではありませんが粒子が細かく吸収がいいとされています。肌活をしている私としてはありがたいです。 お酒を飲んだ次の日は春雨スープが定番なので、タンギギスープに野菜と一緒にぶち込んでいます。脂の旨味とコラーゲン、さらにオメガ3が溶け出して、体が喜ぶ一杯になります。 大型魚の水銀対策 マグロなど大型魚と同じく、タンギギも サイズが大きいほど水銀残留が心配 になります。 水銀は体内で分解・排出されにくいのですが、魚自身が セレン というミネラルを同時に含んでいて、このセレンが水銀と結合して毒性を弱める働きを持っています。 ちなみに、アメリカ周辺の海域に比べて、インド・東南アジアの海域の魚のほうが水銀残留が少ないとされています。 通常の食生活で週に2〜3回程度の摂取であれば問題ないとされています。 むしろ青魚のオメガ3やビタミンDの恩恵の方が大きいです。水銀＝悪ではなく、バランスを意識して楽みましょう。 大きな切り身を選ぶときは、血合いをしっかり湯引きして下処理をすることで、臭みだけでなく余分な不純物も落とせるので安心ですよ！ ロコット（アメフラシの卵塊） ロコットは一見海藻のようですがアメフラシの卵塊です。 無数の卵がゼラチン質でコーティングされたもので、日本でも一部の地域では「海素麺」と言われて食べられているらしいです。 食感は臭みもなく磯の香りがして僅かな甘みと塩味、コリコリとしてとても食べやすいです。 見た目のユニークさだけでなく、美容面でも注目できる食材です。卵由来の栄養素は肌の健康に直結しており、以下のような効果が期待できます。 必須アミノ酸： コラーゲン生成の材料となり、肌のハリや弾力をサポート ビオチン（ビタミンB群）： 皮膚細胞の代謝を助け、乾燥や肌荒れを防ぐ働き ビタミンE： 抗酸化作用で血流を改善し、くすみのã

1ªã„透明感ある肌を守る ローカルフード過ぎて科学的な栄養分析は限定的ですが 伝承的に美容に良い とされ、広く食べられてます 単なる珍味ではなく「食べるスキンケア」としても魅力的です！私は刻み生姜をトッピングしてカラマンシーと醤油で日本のもずくのようにいただく事が多いです。 アサリ（二枚貝） フィリピンではマニラクラム（アサリ）がよく知られています。 私はパスタに入れてボンゴレビアンコにしたり、味噌汁に加えて楽しんでいます。 鉄分や亜鉛： 血をつくるのを助け、体の抵抗力を保つ ビタミンB12： 神経や血液の働きを支える大事な栄養素 タウリン： 肝臓の働きを助け、疲れをやわらげる オメガ3脂肪酸： 血の流れを良くし、体の炎症を抑える ただしフィリピンの二枚貝で注意すべきなのは 貝毒。 赤潮が発生すると貝の身に毒素が蓄積され、一度溜まると解毒はできません。日本のように水質管理や出荷規制が徹底されていないため、毒素を含んだアサリが市場に並ぶ可能性もあります。 実際、フィリピンでは貝毒による中毒で亡くなった家族のニュースを目にしたことがあります。 牡蠣やムール貝も好物ですが、私は二枚貝は少量に留めるようにしています。 さらに身の黒い部分には毒素や泥が残っていることがあるため、取り除いてから食べるようにしています。 もちろん完全にリスクを避けられるわけではありませんが、少量に抑えたり下処理を工夫することで、被害を軽減することは可能です。 旨味が強く栄養も豊富ですが、環境リスクを理解した上で「少量＋下処理」で楽しむのが現実的です。 セブ島で安全にお刺身・生魚を楽しむための在住者テクニック ここまで市場の食材を紹介してきましたが、ローカル市場の魚は日本のような生食用の厳格な温度管理（コールドチェーン）がされていないため、絶対に個人で刺身にして食べないでください。 もしフィリピンで安全に生魚・お刺身を楽しみたいなら、以下の方法が現地在住者の賢い選択肢です！ 外食で楽しむなら フィリピン伝統の生魚料理「キニラウ」や新鮮な魚介を安全に楽しむなら、家で作るのではなく、「AAバーベキュー（AA BBQ）」などの衛生管理がしっかり整った現地の大手有名レストランで食べるのが一番安心です。 どうしても「家でお刺身」が食べたくなったら？ セブ島でも、衛生状況が整った場所を選べば美味しいお刺身用の魚が手に入ります。 ランダース（Landers）やS&R：会員制スーパーで、冷凍の刺身用（Sashimi Grade）のマグロやサーモンなどのメジャーな魚が手に入ります。実はこれ、最初の方に紹介したマグロの聖地 「ミンダナオ島ジェネラル・サントス」から仕入れられたガチの極上モノ だったりします！ マルコポーロの朝市：新鮮なマグロなどが手に入ると在住者の間で大人気！ただし、もの凄い争奪戦なので朝早く行かないと一瞬で売り切れます。 ガイサノカントリーモール：ローカル系スーパーですが、タイミングが良ければたまにマグロの冊が売られています。 まとめ・フィリピンは豊かな漁場--海の幸を食べないのはもったいない！ 今回は魚介類でローカルマーケットで入手できる調理しやすいものを厳選して紹介しました。 食べることは毎日のことですし、以前のブログでも触れたように、 身土不仁（しんどふじ/しんどふに） 人間（身）とその土地（土）は切り離せない一体のものである--とあるように、この度セブで採れる魚介の栄養を調べたところ、この気候風土のã

1Ÿã‚ã®ä½“にぴったりの栄養がたっぷりとも証明できました。 だからこそ、地元の魚を食べることは体を整えるだけでなく、その土地に根ざす生き方でもあるんでしょうね。 最近更年期やストレスで体調を崩し、藁（わら）をも掴む思いでインターミットファスティング(断続的断食)を始めました。ちょうど食生活を改善しているところです。 地のものを食べると値段も安いし、新鮮。お財布にも体にも優しいです。 昨今、水銀や貝毒などの汚染は避けようがないですが摂取量に配慮しつつ、地産地消をこれからも楽しんでいこうと思います。 この記事がフィリピンで地元の食材を楽しんで生活したい方の参考になれば幸いです。 最後までお読みいただきありがとうございました。 関連記事はこちら↓","noindex":false},{"slug":"entry555","title":"【在住者おすすめ】フィリピンのスーパーで買うべき激安野菜10選！庶民派スーパーフードで野菜不足解消","date":"2025-12-21","modifiedDate":"2026-06-22","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2025/entry555.webp","description":"フィリピンのスーパーマーケット事情や、現地で安く野菜を手に入れて自炊する方法を解説！長期滞在での野菜不足を解消するコツや、カンコン（空芯菜）など安くて栄養満点なローカル野菜10選、ウベとタロの違いまで、在住の視点で詳しく紹介します。","tags":["食生活","フィリピン食材","セブ島生活"],"body":"フィリピン在住7年目の私、基本自炊しています。 フィリピンのスーパーマーケットやローカルマーケットには、美容や健康に役立つ「庶民派スーパーフード」が宝庫なんです。しかも、日本では考えられないほど安い！！ ここでは、日常的に手軽に買えて、美活にぴったりな食材（野菜中心）を10選を紹介します。 カラマンシー（フィリピンのスーパーで買える定番柑橘） ビタミンCはレモンの約3倍以上も含まれるスーパーフード。しかもローカルマーケットではキロ50ペソ程度と超チープ。 お肌の老化の約90％は紫外線が原因。フィリピンの紫外線量は日本の約5倍とも言われ、日常的な紫外線対策がシミ・シワ・たるみ防止につながります。 特にカラマンシーのすごいところは、レモンやグレープフルーツなどの柑橘類に含まれるソラレン（摂取後に紫外線を浴びるとシミを作りやすくする光毒性成分）がほとんど含まれていないこと。安心して日常的に摂取できます。 私は飲み物やサラダのドレッシングに加えて、1日10個（ビタミンC約30〜60mg）を目標に取り入れています。 紫タマネギ フィリピンのスーパーに行くと、白玉ねぎより紫玉ねぎのほうが断然安く手に入ります。 味は食べ慣れた白玉ねぎの方がマイルドかもしれませんが、栄養価の面では紫玉ねぎが圧勝。 紫色の成分である アントシアニン は強力な抗酸化作用を持ち、細胞の老化を防ぎアンチエイジングに役立ちます。さらに、紫タマネギには ケルセチン というポリフェノールも豊富で、血流改善やむくみ予防、免疫力アップにも効果が期待されています。 加熱しても栄養が比較的残りやすいのが特徴。安価で手軽に買えるので、日常の食卓に取り入れるだけで美活に直結する食材です。 アルグバティ(ツルムラサキ) フィリピンの市場でものすごーくよく見かける葉野菜。日本では夏野菜として知られていますが、こちらでは一年中手に入ります。 そして困ったことに「ほうれん草（Spinach）ください」と言うと、必ずこちらを出されます。 美活ポイント ビタミンA・C：抗酸化作用で紫外線ダメージから肌を守り、美肌効果に直結。 鉄分：造血作用で女性にうれしい栄養。 食物繊維：腸内環境を整え、腸活に最適。 カルシウム：骨や歯の健康維持に。 味はほうれん草に近いけれど、少しぬめりがあるのが特徴。私はおひたしやスープに入れることが多いです。クセが少ないので毎日の食卓に取り入れやすい美活食材です。 注意点 日本ではグリーンスムージーで人気の材料のひとつがほうれん草ですよね？ この前「ほうれん草みたいになるかな？」と思ってスムージーに入れたら…泥臭すぎてマズかったã

1®ã§ã‚„めた方がいいです笑 代わりに Pechay/ペチョイ を入れることをおすすめします。 カンコン（空芯菜）はフィリピンの国民的野菜！ フィリピンのコスパ最強野菜のひとつ・カンコン。 山のちょっとした水辺などに自生するほど強い生命力です。何かの栄養に特化しているわけではありませんが、バランスよく栄養が含まれてます。 サッカーのポジションで例えるとリベロみたいに万能です。 ビタミン・ミネラルが豊富： ビタミンA・C、鉄分、カリウムを含み、抗酸化作用や血流改善に役立つ 免疫サポート： 免疫力を高め、皮膚疾患の改善にも効果があるとされる 低カロリー＆高食物繊維： ダイエットや腸内環境改善にも向いている にんにくと唐辛子で炒めたら最強にうまいんですよ！よくフィリピン料理のお店（House of Lechonとか）で提供しています。 私は豆腐などのスープなどに入れてさっぱりいただくことが多いです。 ペチョイ（小松菜の一種） ペチョイはアルグバティ（ツルムラサキ）で、スムージーを作ってあまりのマズさに代替品を探したときにたどり着いた野菜です。 日本の小松菜よりβ-カロテンや鉄分は少ないのでエグみが少なくさっぱり。その代わりカルシウムとカリウムがやや多めで、骨や血圧の改善や健康増強に役立ちます。 カルシウム・ビタミンK： 骨をつくる材料になるカルシウムと、その働きを助けるビタミンKがたっぷり。骨を丈夫にして、骨粗しょう症の予防にも役立つ グルコシノレート・ビタミンC・ビタミンA： ペチョイに多い成分グルコシノレートは、体の炎症を抑える働きがある。さらにビタミンCやAが細胞を守って、関節の痛みや傷の回復を助ける カリウム： 余分な塩分を外に出してくれるので、むくみや血圧の安定 私は、スムージーのほかスープなどに入れて食べることが多いです。アルグバティ（ツルムラサキ）みたいにクセがないので何に入れてもわりとじゃまになりません。 シタウ／シータウ（長豆） シータウは市場でよく見かけるマメ科の野菜で、長いものは60cmにもなる「長豆」。豆科らしく食物繊維とタンパク質をしっかり含みつつ、カロリーは低めなので日常使いにぴったりです。 それ以外にも「骨」「血」「むくみ」など、更年期世代を含めて女性に嬉しい成分がたっぷり。 カルシウム： 骨粗鬆症が心配な更年期世代の女性に嬉しい成分 鉄分： 貧血予防に カリウム： むくみや血圧の安定 クセがないので、炒めても煮物に入れてもOK。カットしてさっと茹でて、日本の伝統的なおひたしにしても食べやすいです。 紫シータウ発見 BTC（バニラッドタウンセンター）で毎週水曜日開催される、ファーマーズマーケットで珍しい紫のシータウを発見しました！！ ファーマーズマーケットは朝の 8:30〜 昼くらいまで開催しており、グランドフロア正面入口の入って右側で開催しています。他のお店が閉まっててもガードに言ったら中に入れてくれます。 住所: Gov. M. Cuenco Ave, Cebu City, 6000 Cebu モリンガ 「奇跡の木」と呼ばれるほど栄養豊富なモリンガ。ビタミン、ミネラル、アミノ酸をバランスよく含み、美活には欠かせない食材です。しかも一房30ペソ前後（もっと安いことも！）と、とても手頃。 実は道路の中央分離帯など、街のあちこちに自生していて、ローカルの人々はわざわざ買って食べるものという認識が薄いかもしれません。 味はほとんど無味なので、どんな料理に加えても邪魔をせず、自然に栄養をプラスできます。唯一の難点は、葉だけをちぎる下ごしらえが少し手間なこと。 フィリピンではスープにそのまま豪快に入れることも多く、スーパーではお茶や加工品としても手軽に購入できます。 特にビタミンAやCが豊富で、肌のターンオーバー促進や紫外線ダメージ対策に効果的。無味だからこそ、毎日の食事に取り入れやすいのが大きな魅力です。 ゴーヤ 日本でもおなじみゴーヤ。フィリピンでは「アンプラヤ」と呼ばれています。ローカルマーケットでも安く手に入る定番野菜です。 独特の苦味があるけれど、この苦味成分には血糖値を調整する働きがあり、糖質の多い食事が多いフィリピン生活ではありがたい存在。さã

1‚‰ã«æŠ—酸化作用も強く、紫外線ダメージや肌の老化対策にも役立ちます。 ビタミンCも豊富で、シミやシワ予防に直結。食物繊維による腸活効果もあり、美活を意識する人には欠かせない食材です。 炒め物やスープに入れるのが定番ですが、私はゴーヤチャンプルーが多め。こちらもお茶（アンプラヤ茶）がスーパーで買えますが、ティーパックを長くつけすぎるとめちゃ苦くなるのでご注意を。 苦味＝美容の味、と割り切って楽しむのがアンプラヤの正しい付き合い方です✊ ウベ（紫芋）とタロ（タロイモ）の違いとは？ 腸活と筋トレを日頃している私にとって欠かせない食材がこのウベ（紫芋）。路上販売でも見かけるしマジで安い。先日小さいレンガサイズをたった100ペソで買いました。 ウベは日本で見かける紫芋と違ってヤマノイモ科（ヤム）。切り口は紫色になっただけの山芋で、食感もねっとり系。 アントシアニン：強力な抗酸化作用で紫外線による肌ダメージを防ぎ、アンチエイジングに。 カリウム：余分な水分を排出してむくみ予防。フェイスラインや脚のすっきり感に。 ビタミンC：美肌・免疫力アップに直結。 プレバイオティクス：腸内細菌のエサになり、腸活に最適。 最近の研究では、筋トレ後の筋肉増強や回復にも役立つという報告もあります。 私の食べ方は単純に蒸すだけ。シンプルだからこそ栄養をそのまま取り入れられるのが魅力です。 私の食べ方は単純に蒸すだけ。シンプルだからこそ栄養をそのまま取り入れられるのが魅力です。 「じゃあ、市場でよく隣に並んでいるタロイモ（ガビ）とは何が違うの？」と思った方は、ぜひ次の項目をチェックしてみてください。見分けるポイントを分かりやすくまとめています！ ガビバイオレット（紫芋） こちらも紫の芋なのですが、ウベと違ってサトイモ科（タロ）です。ひとつ80ペソもしないんじゃないかな？ 実は、フィリピンのスーパーや市場ではこのガビとウベがごっちゃに混同されていることがよくあるので要注意。 私も最初AIで調べたのですが、すっかり騙されてウベとガビバイオレット購入。でも味が美味しくてハマったクチです。 違いはガビは丸くて断面がモロ里芋、ガビバイオレットは断面に紫の斑点があります。 ウベは見た目がゴツゴツしていて断面が濃い紫でモロ山芋でカットするとトローとした汁が出ます。 ウベに比べてホクホクしていて、ちょっと粘り気があります。 アントシアニンはウベほどではないものの、マグネシウムが豊富で腸内環境を整えるプレバイオティクス（腸内細菌のエサ）として優秀。腸活を意識する人には特におすすめです。 マグネシウム：代謝サポートや筋肉の回復に役立ち、腸内細菌の働きを助ける。 カリウム：むくみ予防に直結。 ビタミンC：美肌・免疫力アップ。 お味はほんのり甘くて私は好き。 フィリピンでは煮物などおかずとして食べることが多いですが、私は蒸してヨーグルトと蜂蜜をかけて食べることが多いです。シンプルだけど美活に直結する一品です。 伝統的な食材は若い世代に敬遠されつつある 近年やっとモリンガやウベなど栄養価の

1高い食材が国内外で認知されてきたものの、未だ一部の若いフィリピン人の間では「田舎臭い」「貧しい人の食べ物」と見られています。 ファストフードや西洋風の食事のほうが「かっこいい」とされ、調理に手間のかかる野菜は食卓に並ぶ機会が減っています。共働き家庭が増え、時間がないため子どもたちはインスタント食品や缶詰で育つことも多いのが現状です。 しかし、年中常夏のフィリピンで育つ伝統食材には、紫外線や暑さに耐えるための栄養がぎっしり詰まっています。本来なら現地の人々の体質に合った、健康維持に最適な食材なのです。 残念ながら、フィリピンでは高血圧・肥満・糖尿病などの生活習慣病が多く、40代から薬を飲み始める人も珍しくありません。もし伝統的な食文化が見直されれば、もっと多くの人が健康に暮らせるはず。今こそ「古い食べ物」ではなく、未来の健康を守る南国のスーパーフードとして復活させたいですね。 まとめ・フィリピンのスーパーで安価な野菜を買って自炊を楽しもう！ フィリピンの山の幸には、美肌づくりに役立つ栄養がたっぷり詰まっています。しかもどれも手頃な価格で手に入るのが魅力です。 他にも挙げればきりがないほどありますが、今回は「調理しやすく、美活に役立つ食材」を中心にピックアップしました。 （もちろん味が私の好みのものが多め） セブ在住7年目の自炊派として、日々の食卓に取り入れやすいものを厳選。特別な食材ではなく、スーパーやローカルマーケットで気軽に買えるものばかりです。 まずは一品から試してみて、自分の体調や肌の変化を楽しんでみてください。 次回は海産物やフルーツ編を予定していますので、ぜひそちらもチェックしてみてくださいね。 この記事がフィリピン生活を始めたばかりの方の参考になれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry554","title":"16時間断食でどう変わる？崖っぷちアラフィフの1ヶ月目の考察","date":"2025-12-20","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2025/entry554.webp","description":"16時間断食で腸を整えた1ヶ月の記録。下痢ゼロや便通改善、むくみ防止、飲酒との付き合い方、セブならではのスーパーフード活用まで、リアルな変化と工夫をまとめました。","tags":["アンチエイジング","セブ島生活"],"body":"「インターミッタント・ファスティング（断続的断食）」と呼ばれる食事法ã

1‚’ご存知ですか？ 一日のうちで食べる時間を区切り、残りの時間は水やお茶だけで過ごすというシンプルな方法です。 この 食べない時間 に働くのが オートファジー。古いタンパク質や不要物を分解・再利用する 細胞の掃除 で、炎症や老化の原因を減らし、細胞を若々しく保ちます。 つまり、ただ食べない時間を作るだけで体は自然にメンテナンスモードに入り、老化のスピードを緩める可能性があるのです。 今年急速に老けたことをきっかけに、ようやく危機感が芽生えました。そこで選んだのが、最もシンプルで続けやすい 16時間食べない＋8時間食べる 16時間断食（16:8ファスティング）。 16時間断食を始めたものの、はじめの1ヶ月は体の変化に追いつけずめちゃめちゃ戸惑いました。 これから始める人、今最中でめちゃくちゃ戸惑っている人も多いと思います。 始めた理由と1ヶ月目の考察をログとして残しておきます。 ※ 私は医学の専門家ではありません。体験談として参考までに。 きっかけ — 死の淵と、変わる決意の瞬間 40歳過ぎ、初海外セブで起業した私。目も当てられないほど酷い生活を暴露 お恥ずかしいことを激白します。40歳過ぎて、初海外セブで会社設立、一見キラキラ系に見えますが、生活習慣がどん底でした。 どこでも酔っ払って寝るかみーゆ 一日中椅子に座ってコード書いて、昼もしくは夕方前くらいになると、たいてい空腹に耐えかねてキャベツと玉ねぎと卵をぶち込み辛ラーメンをすする毎日。 仕事を終えたあと、ネトフリ見ながら酒を煽りそのまま寝落ち。食べてもコンビニのマズイチキンナゲットをつまむくらいです。 毎日ほぼ下痢だけど、元気だから「まあいいや」と思って過ごしてました。 ストレスと更年期、過度の飲酒で死ぬかと思った 今年はセブに来て以来、2度めの極限のストレスを味わいました。 極端な忙しさと加齢でホルモンが乱れまくりました。 納期もあるし、やらなきゃいけない。。。それでもどうあがいてもやる気が出ず、しかも悪循環なのが若い頃からの飲酒習慣。ストレスのつらさを誤魔化すために夜になると強い酒を煽る負のループが続きました。 ほぼ毎日下痢で、たまに腸が腫れてるのがわかるくらいでした。何度か「このままじゃ死ぬ」と本気で思いました。 ストレス放置。得たのは今まで経験したことのない急激な老化 今年9月に私は人生で

1初めて白髪染めしました。左の頭頂部付近にはもうカラーリングでは隠せないほど大量の白髪が増えていると美容師さんに指摘されました。 「ストレスがここまで老化速度を早めるのか」と心の底からショックを受けました。 41歳でセブに渡り、日系企業に初めて務めた頃、「どうやってその若さを保ってるのか？」とフィリピン人に驚かれたこともあります。 だから私はまだまだ若いと自負していました。 特にスキンケアも食事も気をつけずここまで若くいられたのは、親から受け継いだ遺伝子のおかげだったのでしょう。 アラフィフになると天性のギフトは使い果たし、しっかりシミもたくさんでき、顔もたるんでしまったことにやっと気が付きました。 何もしなくても若かったのは、40代前半まででした。 ちょっと待って！科学的根拠に基づいて老いは改善できるってホント？ 老いることは自然なことだと分かっていても、いざ自分が直面するとイヤなものです。 どうにかしたいと思い、ネットを漁っていた時に「ルアー・スー」という台湾のインフルエンサーを発見しました。 彼女は私と同じアラフィフです。20代にしか見えない見た目です。 さらに完全に生活習慣だけで若さを保っているというから驚きです。 さらに、シンガポールのこれまた20代にしか見えないアラ還「チュアンド・タン」というインフルエンサーも発見。 彼もルアー・スー同様に生活習慣のみで若さを保ってました。 最後にハーバード大学の遺伝学教授で老化研究のトップランナー・デビッド・シンクレア博士に辿り着きました。 彼の発言にもあるように、科学的根拠に基づいて「老化は治療できる」と確信しました。 デビッド・シンクレア博士、ルアー・スー、チュアンド・タンの共通点 運動（中高強度程度の筋トレと散歩などの有酸素運動） 食事（インターミッタント・ファスティング） 水分補給 睡眠時間と質 ということで、私のこれまでの食事スタイル（1日1〜2回）からも16時間断食のような イãƒ

1³ã‚¿ãƒ¼ãƒŸãƒƒã‚¿ãƒ³ãƒˆãƒ»ãƒ•ã‚¡ã‚¹ãƒ†ã‚£ãƒ³ã‚° ならやりやすいんじゃないかと思い生活に取り入れてみることにしました。 私の生活に合わせてルールを設定 9月くらいから栄養に重きをおいた自炊は始めてましたが、インターミッタント・ファスティングの効力を最大限に活かすために食べる時間（食事の窓解放時間）のルールを設定することにしました。 目的はあくまで アンチエイジング。健康ではない腸ではちゃんと栄養も吸収できない。長年の飲酒で傷ついた腸を蘇らせることを先決します。 ファスティングでは食べない=（イコール）腸を休ませることができます。 通常のファスティングは数日酵素ドリンクだけで過ごす方法ですが、私には無理です笑 実際通常のファスティングをやったことある人の話を聞くと「めちゃ肌がきれいになるけどもう二度とやりたくない」とのこと。 16時間断食では、1日のうち16時間を食事を取らない時間として過ごします。 それでも腸は十分に休まり、しっかり回復します。 週2回の飲酒チケット 若い頃から嗜（たしな）んだ飲酒習慣はやめないことにしました。好きなことなので、この先も続けていきます。 友だちとの外飲み大好き! 週2回にした理由は、腸という臓器は意外と強く、ちょっとしたダメージなら1日程度で回復すると言われているからです。もし深酒しても週2回だけなら完全にリカバリーできると判断しました。 お酒を飲む日と決めたときは、二日酔いを避けつつファスティングのルールを守るために、食事内容やタイミングを調整します。 自炊中心。ファスティングに即した食事タイミングとメニューに変更 セブ在住の強み、安価に手に入り栄養価の

1高いフィリピン食材を利用しています。 中でも特に心がけて摂っているのがビタミンCです。 1日を通して1000mg以上（サプリも含む）摂取を目標。ビタミンCは水溶性で摂取しすぎても尿で出てしまうので、500mgを上限に小分けに取ります。 フィリピンのビタミンC優秀食材といえばカラマンシー。水やサラダ、スムージーに加えて摂ります。ローカルの市場で買えば1キロ50ペソ（130円）くらいで買えます。 また、私の16時間断食をする目的のひとつが腸ケア。 腸に生きた菌を送り込む（プロバイオティクス）ためにヨーグルトやキムチ、納豆を摂取。 またその菌のエサ（プレバイオティク）になる食材、芋類、生野菜、果物、はちみつ、オートミールなども積極的に摂っていきます。 セブのスーパーやローカルマーケットで手に入る食材についてはこちらにまとめてます！ 通常 食事の窓解禁（11時） 主食 菌のエサになる芋類（セブだとウベがオススメ）、オートミールなど 飲んだ翌日の定番は低GIの春雨スープ たいてい食前に筋トレをするのでタンパク質を意識的に取る 鶏や魚（骨ごとしっかり煮出す）などのタンパク質とコラーゲンを取る 卵や豆腐などのタンパク質 カラマンシー（レモンの3倍のビタミンC、柑橘類に多く含む光毒性のソラレンが少ない）を1日10個目標 アボカド、オリーブオイルなど良質のオイルを積極的に取る 生野菜でビタミン類を摂取 おやつ（15時） ナッツや蒸したウベ、雑穀パンにチーズを塗ったもの 手作りアップルタイザー（はちみつ、カラマンシー、リンゴ酢を炭酸で割ったもの） 食事の窓閉じ（18時/19時までに終了） ブルーベリー（アントシアニンで抗酸化）＋ヨーグルト＋チアシード＋その日の気分の野菜と果物でスムージー タンパク質を足したいときはサバ缶やゆで卵、炭水化物が足りないと思ったら芋など、その日の食事のバランスに応じて足す チートデイ チートデイは心置きなく夜遅くまで飲みます。 飲酒で大量の活性酸素が出るはずなので、通常のビタミンCサプリを2錠（この時点で合計1000mg）、さらに翌朝も500mgを朝イチで飲むようにしています。 翌日のむくみ防止のために、カリウムも多めに摂取します。 食事の窓の解禁時間が遅いので、どうしてもお腹が空いたときはナッツをちびちび食べてしのぎます。 食事の窓解禁（15時） アボカド（カリウム多）ヨーグルト＋チアシード＋その日の気分の野菜と果物でスムージー サバ缶やゆで卵や蒸した芋 気が向いたらおやつ（17時） ナッツちょっと 手作りアップルタイザー 食事の窓閉じ（好きに食べて好きに飲んで好きな時間に終わる） 野菜や豆腐を意識的に食べる 水を意識的に飲む 朝起きてすぐに常温の水をコップ2杯飲みます。 寝ている間に約500mlの水分を失っているためです。 飲むペースはゆっくりめで、常温かお白湯を選びます。 1日の全体でも、少なくとも2Lは摂るようにしています。 16時間断食の週ごとの変化 さて、お待たせしました。みなさんが気になるのは期間ごとの変化ですよね？ そこで気がついた変化を時系列に追っていきますね。 開始〜3日：食事の窓解禁時、血糖値急上昇？？！ 16時間開けて急に食事取ると、あれ？頭に糖が回って脳みそがキューッと感じてしんどい(T_T)。 そもそも普段から砂糖はあまり取らないし、糖分も控えてる生活をしてたのでいわゆる「シュガー・ラッシュ」に近い感覚だったのだと思います。 そこで血糖値対策として、最初2回しか摂ってなかった食事におやつをプラス。さらに食事の窓解禁時は特に食べる順番（野菜やタンパク質から食べる）やかける時間（30分以上）に気をかけるようにしました。 1週間目：え？なんで？酒も塩も少ないのに頭痛いしむくむ 意気揚々と断食を始めたものの最初にぶち当たったã

1®ã¯èµ·ãæŠœã‘の顔パン。 今までお酒を飲まない日の翌朝は顔がシュッとしていることがあっても、むくむなんて経験ゼロ。 しかも、2日酔いか？！と思うほどの片頭痛。明らかにおかしい。。。私、このまま16時間断食続けても大丈夫だろうかと不安になるほど。 でもこの症状は断食初期の一過性。科学的にも根拠があって、体がまだ 断食リズムに慣れていないことによる水分代謝の乱れ が大きいそう。 むくみの主な原因 グリコーゲンの分解と水分保持： 断食を始めると体はまず肝臓や筋肉に蓄えたグリコーゲンを使用。グリコーゲンは水分と結合しているため、分解される過程で水分バランスが崩れやすく、むくみやすくなる。 ナトリウム・カリウムのバランス変化： 食事時間が制限されることで、電解質の摂取タイミングがずれる。特にカリウム不足や水分摂取の偏りがあると、体が「水をため込もう」としてむくみが出やすくなる。 腸内環境の移行期： 腸を休ませる時間が増えることで腸内細菌のバランスが変わり始める。この時期は消化や排泄がスムーズにいかず、一時的に水分が滞留しやすくなる。 頭痛の主な原因 血糖値の変動： 食事間隔が長くなることで血糖が下がり、脳が一時的に燃料不足と感じて頭痛につながる。 カフェインの離脱： いつものコーヒーやお茶の量が減ると、離脱症状として頭痛が出やすい。 水分・電解質不足： グリコーゲンの分解に伴う水分排出や、ナトリウム・カリウムの乱れで脱水気味になり頭痛を誘発。 自律神経の揺れ： 食事リズムの変化で交感神経・副交感神経のバランスが一時的に不安定になり、片頭痛様の症状が出ることがある。 突然のむくみや頭痛はショックですが、これは体が新しいリズムに適応しようとしているサイン。 また、インターミット・ファスティング開始時の頭痛は多くの人に見られ、たいていは1〜2週間ほどで自然に落ち着いていきます。 腸や代謝が整えば次の週から顔もスッキリしてくるので安心してください。 2週間目：腸内環境の好転反応？便秘がめちゃ苦しかった かみーゆの代名詞は「いつも腹を壊している」くらいだったのに便秘が5日位続きました。さすがに辛い(T_T) 食事の刺激が減る： 断食で腸のリズムが崩れ、ぜん動運動が一時的に弱まる。特に以前の私は、過度の飲酒と辛ラーメンで胃腸がいつも強すぎる刺激による排便に慣れていた。 腸内細菌の入れ替わり： 食べない時間が増えることで腸内環境が変化し、善玉菌が増える過程で排便が滞ることがある。これは「好転反応」と呼ばれることも。 水分や電解質の影響： 食事から得ていた水分やミネラルが減ると便が硬くなりやすく、食事量が少ない人ほど影響が強い。 腸が新しい断食リズムに適応する過程で起こる一時的な便秘なので、時間が経てば自然に解決します。 私の場合は苦しすぎてマグニット錠に何度か頼りました。 ただ、センナなどで せっかく構築しかけている腸内環境を破壊 するような便秘薬はおすすめしません。 基本的には、水分を意識的に摂ったり、ナッツや野菜で食物繊維を補うことで徐々に改善していくのが良いと思います。 3週間目：腸がまともになってきた？火鍋の激辛＋油でお腹もびっくり 3週間目ようやくリズムを取り戻し、標本にしてもいいくらい理想的な便がでるように！ お酒飲んでも下痢もしなくなりました。が、事件が起こりました。 友だちとランチに火鍋（ホットポット）に行った時の話。辛いものすごく好きですし、野菜や豆腐も食べれるしファスティングの範疇✊️と息巻いてました。 食後1時間後、お酒も飲んでいないのに激しい下痢に見èˆ

1žã‚ã‚Œã¾ã—た汗 刺激の少ないクリーンな食事を続けてたのに、控えたつもりでも大量の油と大量のスパイスが胃に投入され、お腹がパニックに。 今まで経験したことないくらいお腹が痛くなって何度もトイレに駆け込みました。 腸が回復してきたからこそ刺激に敏感に反応したという好転反応に近い状態だと思われます。 今まで腸がボロボロでいつも下痢でもあまり気にもしてなかったですが、これが 正常な反応 だと実感しました。 4週間目：下痢ゼロ！？人生初かも♥ 4週間もすると、食事の窓を解禁してご飯を食べたあとに自然と便意が訪れるようになり、リズムができてきました。 私は痩せている方だと思うのですが、下腹だけ少しポッコリしていて腹筋ではなかなかへこまなかったお腹周りも、次第にスッキリしてきました。 30日経過：風邪のリカバリーが驚異的だった！！！ これはホントスゴイと思ったファスティングの効果が免疫力が上がったことです。 クリスマス前に軽く風邪を引きました。しかもクリスマスイブの前日、調子に乗って深酒しすぎてこじらせて、翌日は完全にダウン。 通常私、風引くと1週間くらいグズグズ調子が悪いんですが、翌日から筋トレできるくらい回復しましたw 今は咳と喉痛が少し残ってる程度で完全に元気です。 やっぱり、腸が元気だと免疫力がぜんぜん違うと改めて思い知りました。 1ヶ月経って総じて感じること 16時間断食は一般的に数週間から1ヶ月位経つとだんだん効果を実感するそうです。 ちなみに腸内細菌はエサやりを怠ると、睡眠や気分、免疫に影響するそう。 今は毎日快調＆快腸で、思考もかなり前向きになった気がします。 まだ美容院で確認していないけど、生え際が黒くなってきたように見えて相当嬉しい〜。これはファスティングの思わぬご褒美！ 外出先でお腹が痛くなりトイレ難民になることもなく、今のところ快適です。 そして何より、週2回の飲酒日が楽しくて、友だちと過ごす愛おしい時間になりました。 次は3ヶ月後をレポートします！ アンチエイジングに欠かせない腸を復活させたくて、私は16時間断食という手段を選びました。 まとめると、私の腸を弱らせていたのは「雑な食事 ＋ 酒 ＋ ストレス」だったんですよね。 シンクレア博士の言う通り、食べない時間を作るだけで体は驚くほど修復されることを実感しました。 そしてフィリピンで16時間断食をして良かったのは、安価で栄養価の高いスーパーフードが手に入ること。 ビタミンC豊富、でも柑橘類なのにシミを作りにくいカラマンシー。アントシアニン（抗酸化）とカリウムが豊富なウベ（紫芋）。まさに 身土不二（地で取れるものを食べるのが一番）、紫外線が日本の5〜6倍あるセブに暮らす人にぴったりの食材です。 これらの食材を楽しみながら料理するのも醍醐味。 この状態を継続することを目標に、3ヶ月後にどのくらい変化があったかをまた報告しますね。","noindex":false},{"slug":"entry553","title":"「罪悪感で支配」するマインドコントロールの仕組み。WGIPや植民地支配に学ぶ心理学","date":"2025-09-01","modifiedDate":"2026-07-17","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2025/entry553.webp","description":"罪悪感で支配するマインドコントロールの仕組みを徹底解剖！フィリピンの植民地支配（原罪）や戦後日本のWGIP（ウォー・ギルト・インフォメーション・プログラム）から、身近なDVや毒親の支配構造までを心理学の視点で紐解き、他人の支配システムを無力化する対処法を解説します。","tags":["心理学","考察","フィリピン"],"body":"過去の失敗、人間関係など、みなさん何かしら後ろめたさを感じることってありませんか？ 私は今セブに住んでいます。フィリピンは300年もの植民地支配を受けてきました。 植民地支配がこんなに成功した理由はキリスト教布教と確信しています。そこにはキリスト教の教義にある \\"原罪\\" が大きく貢献していると私は確信しています。 小さな人間関係から歴史に垣間見るに、人々はこの罪悪感によって支配されることに甘んじてきました。 人民をいともカンタンに支配できるç½

1ªæ‚ªæ„Ÿã®æ­£ä½“って何なんでしょうね？ そこで、今回は罪悪感で支配するマインドコントロールの仕組みを事例、構造などを徹底解剖します。 歴史から学ぶ罪悪感の支配構造 ここでは、何が悪い、良いなどの二元論はしません。 罪の意識がいかに人々を支配するのに効果的かという話を事例を上げながら解剖していきます。 300年のフィリピン植民地支配。キリスト教の原罪の教義 私は今、フィリピン・セブ島にいます。今でこそ、独立した民主国家ですがかつてはスペイン、日本、アメリカと何世代にも渡り植民地支配された国です。 植民地支配のきっかけは、1521年セブ島のフマボン王がマゼランから「キリストの子どもの像（ピット・セニョール）」を譲り受け、キリスト教に改宗したことにあります。その後、マゼランはラプラプ王を討伐しようとして返り討ちに遭い戦死。スペイン船団は一時撤退しますが、1565年にミゲル・ロペス・デ・レガスピがセブ島に到着し、以降フィリピンは約300年間スペインの植民地となりました。 現在もサントニーニョ教会にはマゼランの十字架や、「キリストの子どもの像」が展示されています。 部外者の私からみると、スペインの侵略と搾取の象徴であるマゼランやサント・ニーニョが、現代でも「ありがたがられている」ことに、、強い違和感と矛盾を感じます。 今も色濃く残る植民地支配の爪痕が教える従順さ スペイン、日本、アメリカの三度の植民地支配が終わった今も、理不尽な仕事内容でも黙々と従順に働くフィリピン人の姿に、感心することが多々あります。日本人の私からすれば、もっと平等でいいし腹たったら歯向かってもいいと思うのです。 ロックダウン中もその姿勢は変わりませんでした。世界最長とも言われるロックダウン下で、ノーワーク・ノーペイ（無給で自宅待機）の状況にもかかわらず、多くの人が文句も言わず耐えていました。 こうした従順さの根底には、植民地支配期に深く浸透したキリスト教の「原罪」と「救済」の教義があるのではないかと考えるようになりました。 原罪の思想は、 人間は生まれながらにして罪を背負っている という前提に立ちます。 自己否定や謙遜の文化的土壌を育み、支配に対する抵抗よりも、赦（ゆる）しと服従を選ばせる心理的構造を形成してきたのではないか。 そして救済とは、その罪を赦してもらうために、 信仰・悔い改め・従属 を通じて「赦しを与える側」に近づこうとする行為です。 つまり「あなたは罪深いが、赦してやるから従いなさい」という構造が、宗教の名のもとに社会的秩序として内面化された結果ではなかろうか。 フィリピンに住んで、国民性が違う日本人の私だからこそ肌で感じる感覚です。 日本民族を書き換えた ウォー ギルト インフォメーション プログラム とは？ 何も宗教だけが従順な人を育て支配しやすくするとは限りません。その点に至っては、我々日本人も当事者と言えます。 GHQ 占領期の1945年〜1948年に実施された WGIP（War Guilt Information Program / ワー・ギルト・インフォメーション・プログラム） というものがあります。 日本人に戦争責任と罪悪感を植え付けるための情報操作プログラムです。ラジオや新聞などのメディアを通じて戦争の罪を強調する報道が促進され、徹底的なプロパガンダが展開されました。 ワー・ギルト・インフォメーション・プログラムの目的 東京裁判や原爆投下の正当化 軍国主義の否定と民主主義の普及 アメリカへの批判を抑制する情報統制 長年その実態が議論されてきましたが、米国公文書館の資料からこのプログラムの存在が明確に裏付けられたのã

1¯2015年のことです。 私の祖母は被爆者であり、家族の半分を失いました。それにもかかわらず、戦後生まれの母はよく「 日本は他国でひどいことをしたから、当然の報いを受けたのだ 」と言っていました。 母の主張に触れるたび、個人がどうこうという感情論を脇に置いても、 いかに「情報操作プログラム」がいかに一般の市井の人々にまで深く、自然に浸透していたか と感じずにいられません。 戦争を直接体験していない世代が語る 自国＝悪 の歴史観。ですが、原爆によって14万人もの非戦闘員の命が一瞬で奪われたという国際法違反の凄惨な事実に対してすら、私たちは「自国が悪いのだから悲しむことも、声を上げることも許されない」と自ら罰する必要があるのでしょうか。 日本が悪いという罪悪感をあらかじめ植え付けられることで、私たちは目の前の事実に対する認知そのものを歪められてはいないか？ そう思わざるを得ないのです。 なぜ人は人を支配したがるのか？「枯渇」のエネルギー論と身近な縮図 罪悪感の支配構造は、小さなコミュニティ、学校、職場、家族などでも垣間見れます。 他者からエネルギーを強奪しなければ維持できない有限のバッテリー 私の見解では支配構造が生まれる理由は、エネルギーが枯渇した人は人のエネルギーを奪わないと生きていけないからです。 小難しく聞こえるかもしれません。いいえ、これは私たちの日常に転がっている、不器用な心の叫びです。 疲れて帰ってきた時、つい家族に不機嫌な態度をとって、相手をおろおろさせて安心しようとする。 「 あなたのためを思って言っているのよ 」と言いながら、自分の思い通りに子どもをコントロールして、自分の寂しさを埋めようとする。 すべて 自分の心のコップが空っぽ（枯渇） だからこそ、身近な人からエネルギーを奪い、一時的な 安心感 で穴埋めをしているだけ。 親が子どもに過干渉なのも、教育という名の立派なエネルギーの搾取だったりします。 小さなコミュニティでの例。DV家族やパートナーに従う罪悪感の真理 一番わかりやすいのがDVパートナーを持つ被害者が、罪悪感を持ってパートナーにとって従順になってしまう心理です。 当人は、「 暴力を振るわれるのは私が悪いからだ 」と信じてしまうパターンが非常に多い。 最近 パワーかフォースかという本を読みましたが、その意識の分類をDV被害者の心情に当てはめると理解しやすいです。 『パワーかフォースか』では、欲望（＝なんとか現状を変えたい、愛されたいという強いエネルギーがある状態）は罪悪感（＝自分を責めて動けなくなる無気力な状態）よりよほどマシな意識レベルです。 欲望からスタートし、そこから徐々にエネルギーを奪われて、罪悪感へと叩き落とされます。 ここまで落ちると自分の意識を制御しづらくなり、加害者の言うことに従うようになります。 | 意識レベル | 測定値 | DVされる側の心情 | | ---------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | | 欲望 | 125 | 「あの人とやり直したい」「もっと愛されたい」「私が頑張れば関係が良くなるはず」と、相手への期待や執着から離れられなくなる（支配のスタート地点） | | 恐怖 | 100 | 「また恫喝や暴力を受けるのではないか」と常に相手の顔色を窺い、一挙手一投足にビクビクしながら極限の緊張状態で過ごす | | 悲しみ | 75 | 「なぜこんな酷いことをされるのだろう」と涙を流し、自分の境遇や、決して逃れられない暴力のループに深く絶望する | | 意気消沈 | 50 | 泣く気力すら失い、「どうせ何をやっても無駄だ」と心を麻痺させ、状況を変えるための思考や行動を一切放棄して抜け殻のようになる | | 罪悪感 | 30 | このレベルに叩き落とされると、人は暴力を振るう相手ではなく「自分」を攻撃し始める。支配のシステムが完成する、最も危険なçŠ

1¶æ…‹ | 対処法：身勝手な支配システムを無力化する、アプローチの考察 私の考える支配とは、高尚な理念ではなく、単なる エネルギーの強奪 です。 支配サイドが本当に欲しがっているもの（マクロとミクロの共通点） まずは、マクロとミクロに分けて支配の構造を分解してみます。 マクロ（ 政治家や為政者 ）： 市民の「財産（税金）」と「人気（選挙の票）」。これらを維持するために、都合の良い歴史や報道で洗脳する。 ミクロ（ 身近な人 ）： あなたの「時間」や「感情」。自分の心のコップが空っぽだから、あなたを罪悪感で縛り、エネルギーを奪う。 「過去を悔いる」という、最大の罠 支配される側が真っ先にやめるべきことは、変えられない過去をいつまでも悔やみ、自分で自分を脳内で裁くこと。 私は 後悔こそが最大の敵 だと考えています。 過去は過去。10分前のやらかした出来事すら、割り切る 「あの時ああしておけば」という後悔は、相手（支配者）が用意した「お前が悪い」という洗脳と相性がバツグンと知る 過去は変えられないとよく言いますが、私は変えられると信じています。 方法は 上手くいったことや楽しかったこと（正の側面） を思い出すこと。 人間の脳は自動思考で無意識に98%同じ考えがループしています。悲しいかな、意識すればするほど頭に居座り続けます。 こういうときほど、日本古来から続けられてきた 禅の哲学 が役立ちます。 湧き上がってきた「 あの時ああしていれば 」という後悔や罪悪感を、 否定も肯定もせず、「 あ、今そう思っているな 」とただ観察する ひとしきり眺めたら、執着せずにそのままスッと流す（お帰りいただく） するとら不思議。このような後悔の感情の思考ループがすっと消えます。 変わりにその時の良い記憶を思い出せば、過去を塗り替えられることができます。 他人が作ったデータ（過去・歴史）を鵜呑みにしない 自分軸を持つ。自分の人生の主導権を、他人に渡さないことです。 思惑を見抜く必要はありませんが、SNS・AI時代、洗脳のトラップは山盛りです。この先特に自分の意志で生きていくことがキーとなります。 ミクロの対処法： 自分が正しいと思うなら、相手に何を言われても後悔する必要はない。不機嫌は相手の問題。暴力を振るうような危険な相手なら、警察や周囲に助けを求めて物理的に距離を置く。 マクロの対処法： マスコミや報道だけを信じず、自分で歴史を調べる。為政者にとって都合よく塗り替えられた常識を鵜呑みにせず、自分の目で現実を確かめる。 おわりに・罪悪感の支配の正体は、どこまでも「奪う側」の都合だと知る 身近な不機嫌も、国家のプロパガンダも、根っこにあるのは「自分のコップを満たすために、他人のエネルギー（時間、感情、税金、票）を奪いたい」というただの搾取システムです。 宗教植民地支配: 「お前は生まれながらに罪深い（原罪）」と刷り込んで富や土地を奪った。 ウォー・ギルト・インフォメーション・プログラム: 罪の意識を植え付けることで国民を従順にした。 毒親やパートナーからのDV: 恐怖に陥れ、最終的に罪悪感を持たせて支配する。 共通しているのは、他人の作った「お前が悪い」という押し付けが本当かどうかを疑い、自分で調べて、自分の目で現実を確かめるべきだということです。 大抵の罪悪感は、自分が作り出した妄想に過ぎません。 罪悪感という妄想を捨てた先に、他人の支配から解放される未来があるはずです。 日々思っていることをこのように長々と綴らせていただきましたが、この記事が、少しでもç½

1ªæ‚ªæ„Ÿã«è‹›ã¾ã‚Œè‹¦ã—んでいる人の一助となれば嬉しいです。 最後までお読みいただき、ありがとうございました。","noindex":false},{"slug":"entry552","title":"【kindergartenの意味】読み方はキンダーガーデンで正解？発音・語源を徹底解説","date":"2025-06-17","modifiedDate":"2026-06-22","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2025/entry552.webp","description":"kindergartenの意味や正しい読み方・発音を徹底解説！なぜ「キンダーガーデン」と濁って聞こえるのか？その原因である英語の音声変化「フラップT」の正体を、フィリピン英語での実体験ベースで分かりやすく紐解きます。語源であるドイツ語の歴史も紹介。","tags":["セブ島生活","英語学習","フィリピン留学"],"body":"「キンダーガー デ ン」という響きを、ただの和製英語のミスだと思ってませんか？ もしかしてあなたがネイティブから聴き取ったその濁音こそ、生きたアメリカ英語の「音声変化（フラップT）」だったりします。 学校の教科書的な正解にとらわれない、世界で実際に使われている生きた英語のリアルを、フィリピンでの私の体験談とともにお届けします。 ご注意 厳密に言うと英語発音はそもそも日本語発音には変換できませんが、この記事ではあえて日本人にわかりやすくたくさんカタカナ表記を使っていきます。ご了承ください。 kindergarten（幼稚園）の本来の意味とカタカナの読み方・発音のズレ フィリピン人はおしゃべりが大好きです。その日もちょっとした会話をしていました。 私が今まで和製英語で使っていたキンダーガーデン（幼稚園）、実は発音がキンダーガーテンだったと知りました。彼女は英語教師をしている人なのでスペルまでご丁寧に教えてくれました。 kindergarten /ˈkɪndərˌɡɑːrtn/ 長年毒されまくった和製英語に悩まされている私。 スペルも確認しなかったのは私が悪いけど、40年以上キンダーガーデンが正しいと思って生きてきたと思うと悔しい。 またやりやがったな、この野郎！！！和製英語撲滅委員会を作ってやる！！ その時もそのように息巻いていました。 kindergartenの「語源」はドイツ語？幼稚園制度がアメリカに持ち込まれた歴史 幼稚園自体は実はドイツ移民が1850年代にアメリカに持ち込んだ幼児のための学習システム（環境）らしいです。 kindergarten の語源はドイツ語の Kindergarten らしいのと、英語に直訳すると「children\'s garden（子どもたちの遊ぶための庭）」という意味なのであながち遠からずという感じ。 そのままアメリカでもドイツ語の kindergarten =（イコール） 幼稚園となりました。ただし発音は英語で。 日本でも kindergarten は1800年代後半に入ってきましたが、当時はキンダーガルテンとよりドイツ語寄りの発音で呼ばれてました。 戦後新たによりアメリカで発音されている音に近い、キンダーガーデンとなって再輸入されました。なぜそうなったのかはぶっちゃけ諸説あってわかりません。 そもそも、英語の先祖はドイツ語と一緒のゲルマン語派なので、スペルも近くて英語に混じったとしても違和感がなく馴染んで気づきにくいこともあります。 | 英語 | ドイツ語 | 日本語 | | ----- | -------- | ------ | | water | Wasser | æ°´ | | house | Haus | 家 | 英語でもこういう外来語って多数存在しますよね？ たとえば日本でもコンビニなんかにチキンフィレって鶏の切り身を使った料理（主に揚げ物が多い）がありますよね？ 切り身は英語でfillet（フィリット/ˈfɪlɪt/）ですが、料理になると突然filetとフランス語が採用されます。 しかもフランス語由来の発音を保持しfilet /fɪléɪ/ e なのに「エイ」でtあるのに無視したりします。 英語の発祥の地・イギリス料理の安定的にマズい悪評 からだろうか、料理用語はフランス語。。。確かにフランス語になった途端、響きに高級感が増す。 フランス語とドイツ語は同じインド・ヨーロッパ語族ですが、語派が異なります。 英語は次の表の通りハイブリッドになっているので、ドイツ語なのかフランス語のような単語が沢山存在します。 | 言語 | 語族 | 語派 | ルーツ | | ---------- | ---------------------- | -------------------------- | -------------------------------------------- | | フランス語 | インド・ヨーロッパ語族 | ロマンス語派 | ラテン語（俗ラテン語）由来 | | ドイツ語 | インド・ヨーロッパ語族 | ゲルマン語派 | ゲルマン祖語（古代北欧系）由来 | | 英語 | インド・ヨーロッパ語族 | ゲルマン語派（西ゲルマン） | ゲルマン祖語＋ラテン語・フランス語の強い影響 | 更にアメリカにはヨーロッパからのたくさんの移民が渡ってきています。 イギリス以上に外来語が存在するのは当たり前の話ですね。 「キンダーガーデン 意味」で調べると出てくる謎：なぜデンと発音していいのか？ ではなぜキンダーガーデンはキンダーガーデンでいいのかというお話をします。 私の友達は、現在宮崎の大学で英語の教授をしているアメリカ人です。 彼女は10年来の友達ですが、出会った当初はまだ大学の教授ではなく、より良い給料の職を求めて転々としていました。 当時、新しくインターナショナル幼稚園？に就職が決まったとき確かに「キンダーガーデン」と言ってました。英語交じりで日本語を話す人でしたが、英語の単語を言うときだけちゃんと英語発音でした。 だからこそ、疑いもせず40年以上「キンダーガーデン」と信じてきました。 しかし、ショッキングなことが起こりました。 キンダーガーデンはキンダーガーテンだったとフィリピン人英語教師に指摘された そして昨日、 私の五感の汚名を晴らす出来事がありました。 私は英語でドラマを見ていました。ストレンジャー・シングスというドラマです。もうすでに3周目の私のお気に入りのドラマです。 主要メンバーのキャラ・ナンシーが確かに「キンダーガーデン/ˈkɪndɚˌɡɑɹɾən/」と言ったのです。 私はあれっと思って、数秒巻き戻して再確認しました。スペルは kindergarten でした。 そして気づいたのです。キンダーガーデンに聞こえる正体は フラップT だということを。 ちなみに、Stranger Things 5は 2025å¹´11月27日から3部作で年始にかけて放映されます!!!めっちゃ楽しみ。 フラップTとは？ フラップT（Flap T）とは、アメリカ英語で「T」の音が“ラ行”のように変化するアメリカ英語特有の音声現象のことでã

1™ã€‚日本語の「ら・り・る・れ・ろ」に近い軽い舌打ちのような音（叩き音）で、発音記号では /ɾ/ と表されます。 英語のフラップT /ɾ/ の音は、日本語の「ラ行」に近く、ネイティブのTにもDにも聞こえにくい 中間的な音 です。 better が ベダァ に、water が ワラァ に聞こえたりする現象です。 このフラップTは地域性があり、アメリカでも中西部、西部、南部に多く見られる傾向だそう。 アメリカ人の友達はアラバマ出身（西部）、ナンシー役ナタリア・ダイアーの出身はテネシー州（中西部）です。フラップTがよく使われる地域です。 人の脳は発音できない、聞き慣れない音を自分の母語が持っている音に変換します。だからフラップT /ɾ/ を日本語の d に変換したのです。 私の耳は間違ってなかった。。。。 アメリカでも、ニューヨークやボストンなど北部ではフラップTはあまり使われず、イギリスやオーストラリアではほとんど使われません。 『トランスフォーマー／最後の騎士王』でイギリス人ヒロインのビビアンが、主人公ケイドのTのアメリカ発音にブチギレ気味だったのが印象的でした。 フィリピン人教師の発音も間違っていない フィリピン人教師はグローバルに使える英語を話すためのニュートラルで学習英語寄りの明瞭発音（[t]をしっかり発音）を教えます。 その他、フィリピン人の英語には以下のような特徴があります。 Tの発音はしっかり発音される傾向（→ フラップTはあまり使われない） /f/ や /v/ の音に対する影響も時折見られる アクセントは中立的〜ややスペル通りの明瞭発音に近い このアメリカのYouTuber Roman Vice（ローマン・ヴァイス）のアジア人の英語発音がどう聞こえてるかがとても分かりやすいです。 どの国の発音もかなりいじられています（しかも的確に）が、フィリピン人の喋り方の評価はダントツマシです。 ちなみに日本人の英語発音…昔フィリピン人から似たようなことを言われたのでぐうの音も出ません笑 よくフィリピンに留学したら英語の発音が、、、、という人がいますが、その前に母音挿入してしまうなど、日本人は圧倒的に基本英語発音そのものできないのであまり気にしなくていいと思います。 私もまだまだ下手くそで練習中です。 フィリピン人は英語力が高いからすぐ海外に進出できる 英語の発音に多少の特徴があるにせよ、アジアの中ではフィリピンは圧倒的に英語が喋れる人が多い国です。 フィリピンは世界一の海外労働者の多い国で、世界中、特に英語圏にはたくさんのフィリピン人が住んでますよね？ 最近ではハリウッドにも進出して、映画スパイダーマン・ネッド役のジェイコブ・バタロン、グッド・プレイスのジェイソン役のマニー・ハシントなど結構目立ってきましたし、ね。 まとめ・自分の耳を信じてもいい すこし話はそれてしまいましたが、キンダーガーデンの発音はキンダーガーデン/ˈkɪndɚˌɡɑɹɾən/のままで良かったという結論に至りました。 私の本格的な英語学習はここ数年です。元々はニュースを読んだり、大好きな映画やドラマを字幕無しで見たいと思って始めました。 元々こだわりの強い性格なのもあり、つい突っ込んで調べてみましたが思わぬ発見がたくさんあって楽しかったです笑 子供の頃、西洋かぶれの父親が好きで聞いていた（聞かされていた）ビートルズ（THE BEATLES）。 よく考えたら、名曲「Let It Be」も一回もレット・イット・ビーって聞こえたことないですもんね。日本語の発音に変換してもレリピーとしか聞こえませんでした。 なぜあれをレット・イット・ビーって読むのか 子ども心に不思議 でしたもん。 へ？？？「ト」はどこに消えたんだï¼

1Ÿ 英語を母語を持たない人は知識で補うのも重要ですが、自分の五感も信用して大切にしたほうがいいという教訓です。 自分の耳も、自分も信じろ！！！ 最後に皆さんに伝えたいことがあります。 実は先日、私より英語できる人に私の英語をすこしバカにされてしまいました。 多分悪気はありませんけどね。 悲しいかな、フィリピンではこういう日本人をたくさん見てきました。なぜかフィリピン人ではなく笑 家に帰って一晩寝て、考えを改めたんですが、そういうのはガン無視でいいです。 はっきり言って私もその人もネイティブからすれば英語のレベルは大して変わりません。 他人の雑なジャッジに一喜一憂せず、自分の成長を噛み締めながら楽しんで勉強しましょう。 この記事がみなさんのフィリピン留学ライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry551","title":"【フィリピン留学】英語力ゼロからセブ島で通じる発音へ！必要な筋肉と義務教育の復習","date":"2025-06-01","modifiedDate":"2026-06-17","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2025/entry551.webp","description":"「英語力ゼロでセブ島留学」は大きな勘違い！日本人には義務教育の貯金があります。セブ島で英語が通じない後悔を避けるために必要なのは、基礎の復習と「発音の筋肉（肺活量・Tの音）」を鍛えること。現地在住者が教える、後悔しないための事前準備。","tags":["英語学習","フィリピン留学"],"body":"フィリピン留学の前にちゃんと勉強しておけばよかった この前、知り合いからそんな感想を聞きました。 その方は英語知識ゼロの状態でセブに3ヶ月留学した経験があり、現在は現地で小さなビジネスを持っています。 私はこんな話を、留学経験者から何度も聞いてきました。 せっかく留学したのに、未だに自分の英語に自信が持てないことをもったいなく感じているそうです。 留学を検討している人に、どうしても伝えたいことがあります。 「 留学さえすれば自然と英語が話せるようになる 」と信じて現地に来る人は、圧倒的に「 事前準備 」の方法を間違えています。 現地で少しずつ慣れる？甘い！！大人の私達には、ただ時間を浪費するだけの余裕はありません。 勘違いしてほしくないのですが、日本人は「 英語力ゼロ 」なんかじゃありません。私達は義務教育の段階で、素晴らしい文法や語彙のベースをしっかり叩き込まれています。あなたの中には、すでに最高の「 貯金 」があるんですよ！！ フィリピン留学は、その眠っている知識を呼び覚まし、実践するための訓練の場です。 せっかくの留学を最高の投資にするために、事前にどの単語を復習すべきか、なぜ「発音の練習」が必要なのかを、現実的な視点から詳しく解説していきます。 留学エージェントでも、学校関係者じゃないからこそ話せる本音です この記事でわかること 義務教育の貯金をフル活用するシンプルな単語の復習法 セブ島で英語が通じない壁を破る「発音の筋肉（肺活量・Tの音）」の鍛え方 語学学校の枠を超えて英語力を爆発させる現地の過ごし方 英語力ゼロは嘘？なぜ日本人はこれだけ勉強して英語が話せないのか まず、質問です。 皆さんは「なぜ日本人は英語が話せないのか」を考えたことがありますか？ 学校での授業方法が間違っている、授業時間が短い。色んな理由は思い当たると思います。 英語と日本語が どのくらい違うのか 皆さんは考えたことがありますか？ 専門用語で言語間距離というらしいですね。 | 項目 | 日本語 | 英語 | | ------------------ | ----------------------------------------------- | ------------------------------------------ | | 言語系統 | 孤立した言語（起源不明） | インド・ヨーロッパ語族（ゲルマン語派） | | 文法構造 | SOV（主語-目的語-動詞）例：「私は寿司を食べる」 | SVO（主語-動詞-目的語）例：「I eat sushi」 | | 表記体系 | 漢字・ひらがな・カタカナの三種 | アルファベット（26文字） | | 発音とアクセント | 母音中心・音節構造が単純 | 子音の連続・強勢アクセント | すべてにおいて 天地の差ほど違う と言っても過言ではありません。 アメリカ国務省の外交官養成機関（FSI）の研究にã

1‚ˆã‚‹ã¨ã€è‹±èªžè©±è€…にとって最も習得が難しい言語は 日本語、中国語、アラビア語、韓国語で、習得には 約2200時間（約88週間/1å¹´8ヶ月） はかかります。 英語とスペイン語の言語間距離がいかに遠くないか、比較してみます。 | 項目 | スペイン語 | 英語 | | ------------------ | --------------------------------------------- | -------------------------------------------- | | 言語系統 | インド・ヨーロッパ語族（ロマンス語派） | インド・ヨーロッパ語族（ゲルマン語派） | | 文法構造 | SVO（主語-動詞-目的語）だが、動詞の活用が複雑 | SVO（主語-動詞-目的語） | | 表記体系 | アルファベット（27文字、Ñを含む） | アルファベット（26文字） | | 発音とアクセント | 母音が明瞭で、単語の発音が比較的一貫している | 子音の連続が多く、発音のバリエーションが豊富 | 違いはぶっちゃけ日本での沖縄、東北の方言のレベルと変わらない気がします。 私の知り合いのヨーロッパ出身者は、2、3カ国話せるのは当たり前です。言語間距離が近いからです。 多言語話者(一般的3言語以上を操る人)のことをpolyglotといいます。 また、ヨーロッパといえばお金持ちばかり住んでるイメージですがそうではありません。バルカン半島地域では比較的貧しい国もあります。 そのような国に生まれた人たちは他の国の言葉が話せないと出稼ぎに行けないのです。生活のために他言語を習得します。 格安オンライン英会話の教師にセルビア人（ヨーロッパ）がたくさんいるのはそのためです。 英語と日本語の具体的な違いを更に深堀り 日本人が足りてないのは、主に勉強じゃなくて 練習 です。 顔の筋肉の使用量が2倍違う？セブ島で英語発音が通じない最大の理由 英語では強いアクセントや摩擦音（P, T, K, S, F）が度々登場します。正しい発音を意識して話したら、最初は日本語話者にとって 肺活量が足りなくて息切れするはず です。 また強い音を出すために、顔の筋肉も使用量が 2倍以上違います。 日本語：顔の筋肉の使用率 約20～30%（口の動きが小さく、表情筋の使用が少ない） 英語：顔の筋肉の使用率 約50～80%（唇・頬・舌を広範囲に使い、発音の明瞭さを保つために多くの筋肉を動かす） 筋肉や肺活量が向上しないと英語もまともに正しい発音で話せないはずです。 💡 ネイティブとの会話での気づき。実はLとRより「T」が通じない？ 日本の英語学習では LとRの区別が最難関 とよく言われますが、私がこちらで実際にネイティブと話していて最も通じないと感じるのは、実は T の音です。 英語の「T」は、口の中に溜めた息を強く弾き出す音。正しい発音を意識して話そうとすると、日本語話者にとっては圧倒的に肺活量が足りなくて息切れするはずです。この強い息の力（肺活量）と筋肉が伴っていないと、いくらLとRを綺麗に分けてもネイティブにはまともに聞き取ってもらえません。 英語と日本語では音の周波数も違う 音の周波数 とは、1秒間に音波が振動する回数 を指します。 英語は筋肉の使用量も肺活量も違うことから、当然日本語とは音の周波数も違います。 日本語 125hz ~ 1500Hz 英語 2000hz ~ 引用: 日本語の声域の周波数 人間の耳は、慣れ親しんだ周波数帯 に最適化されています。普段聞き慣れていない音は認識しづらくなります。 なので日本人にとって、英語は訓練しない限りは聞き取れなくて当然 なのです。 英語と日本語のかけ離れた文法 日本人が一番つまずくのが語順です。日本語は膠着語（こうちゃくご）といって語順が比較的自由です。 | 日本語 | 英語 | | ------------------ | ------------------------------- | | ✅️ 私は寿司を食べる | ✅️ I eat sushi. | | ✅️ 寿司を私は食べる | ❌️ Sushi, I eat. (※不自然な語順) | 文章の読み書きは問題ないはずです。 問題は会話です。自由気ままに話せる膠着語に慣れきった我々にとって、絶対に型から外れてはいけない英語の文法通りに話すことがめちゃくちゃ大変なのです。 英語は母音の数が多い 英語は日本語で俗に言う「あ」の音だけでも5個以上あります。 ankle（足首） → /ˈæŋ.kəl/（最初の母音は æ） uncle（おじさん） → /ˈʌŋ.kəl/（最初の母音は ʌ） ノンネイãƒ

1†ã‚£ãƒ–は現在母語が持っている音に脳内変換してしまうのです。なので全部アンクルとなってしまいます。 和製英語の影響で間違ったインプット プラス日本に氾濫した和製英語が英語学習者を苦しめます。 先日もキンダーガーデンと言って違うと指摘されました。正しくは kindergarten です。 キンダーガーデンはすでに和製英語として日本で定着しています。 kindergartenはドイツ発祥の言葉で「子どもの庭」なので意味的には遠からずですが、~英語では通じません~。 新たな発見です。地域によっては割と通じると言う話を記事化しています。 日本語の発音のクセと英語発音への影響 私達は普段自分たちの言語の特徴を意識して話している人はいませんよね？ 日本語の特徴を知らずに英語のみがむしゃらに学習すると、知らず知らずそのくせが出てしまいます。 母音挿入 日本人の最大の英語発音での難関は母音を挿入してしまうことです。 我々の言語は主に母音を中心に構成されているので、ついそのくせが出てしまいます。 不必要な母音を入れるクセをやめる訓練が必要です。 す・と・れ・い・と 5つの母音 straight → /streɪt/ 「eɪ」 の二重母音しか存在しない。 日本語の長音のクセ 日本語ではおうさま（王様）と書いても、実際には おおさま と発音します。 英語ではou(オウ)とɔː（オー）の発音を明確に分けますが、英語学習に悪影響を及ぼすことがあります。 例えば go/gou/ → （和製英語ではゴー） no/nou/ → （和製英語ではノー） 気をつけないといけないのは、少し発音を間違えると違う意味になってしまうことです。 boat /bout/（ボート） vs. bought /bɔːt/（買った） coat /kout/（コート） vs. caught /kɔːt/（捕まえた） フィリピン留学で英語が通じない事態を防ぐ！日本人が今すぐやるべきこと フィリピンに留学して英語喋れるようになるの？ 結論から言うと私は フィリピン留学は有効だと断言 できます。 理由は日本人は明らかに実践の練習不足だからです。英語での会話の練習をするには、フィリピン留学は安価ですし良い練習場所です。 ただし条件があります。知識ゼロだと、ぶっちゃけ効率よく習得はできません。 大人には子どものように自然に慣れて身につける時間がないので、知識と訓練でカバーするしかありません フィリピン留学でできることは、実際に英語話者との会話を通じた訓練です。最低でも 基礎知識 がないと、ちょっと挨拶ができる程度で終わってしまいます。 英語と日本語では肺活量や顔の筋肉の使用量が違う 英語と日本語のかけ離れた文法 和製英語の影響で間違ったインプット 日本語の発音のクセと英語発音への影響 上記のなぜ日本人はなぜ英語が話せないのか？で列挙した理由のすべてをカバーするのは厳しいと思います。 そこで留学前に 1 〜 2 ヶ月でできるおすすめの学習すべきポイントをご紹介します。 発音記号を覚える 何よりもまず、IPA（国際音声記号） を覚えましょう。 英語部分のIPAを習得するだけなら、基本的なものは 1日 で覚えることも可能です。 IPAは、1886年に国際音声学協会によって作られました。 世界中の言語の発音を正確に記述するため、統一された表記体系として設計されました。 その後、言語学者の研究によって改訂が繰り返され、信頼性の高い音声表記システムとして確立されています。 特に 主要な母音 は確実に覚えましょう。 子音は、日本語の音で代用しても通じるものが多いですが、母音は代用できないもののほうが多いです。 | IPA記号 | 発音例 | 日本語との違い | | ------- | ---------------- | ---------------------------------------- | | ɪ | bit /bɪt/ | 「イ」と「エ」の中間 | | iː | beat /biːt/ | 日本語の「イ」よりも長く、口を横に広げる | | e | bet /bet/ | 日本語の「エ」よりも短く鋭い | | æ | cat /kæt/ | 「ア」と「エ」の中間、口を大ã

1ãé–‹ã‘ã‚‹ | | ʌ | cup /kʌp/ | 「ア」と「オ」の中間 | | ɑː | father /fɑːðɚ/ | 日本語の「ア」よりも深い | | ɔː | caught /kɔːt/ | 日本語の「オ」よりも広げて発音 | | ɜː | bird /bɜːd/ | 「ア」と「オ」の中間＋舌を引く | | uː | boot /buːt/ | 「ウ」よりも唇を突き出す | | ʊ | book /bʊk/ | 「ウ」と「オ」の中間 | IPA Chart for English 発音に関してはだいじろーさんのYouTubeが体系的にまとまっていてわかりやすくておすすめです。 私はだいじろーさんおすすめ「脱・日本語なまりー英語(+α)実践音声学」（神山孝夫 (著)）も買いました。 義務教育の貯金をフル活用！単語を正しい「音」とセットで復習する 結論から言うと、最低1000単語は習得してください。 日本人は最低義務教育まで受けてさえすれば、最低1000〜3000程度は英単語が頭に入っているはずなので楽勝です。 ここでポイントなのは、必ず「音」もセットで覚える ことです。 せっかく学校で英単語を学んでいても、多くの場合 正しい発音で習得できていない 可能性があります。 その理由は、日本のほとんどの学校で 発音記号の読み方や正しい発音を体系的に教えていない ためです。 文部科学省の学習指導要領では、「聞くこと」「話すこと」「読むこと」「書くこと」の4技能を統合的に育成することが強調されています。 しかしながら、発音指導の具体的な方法や発音記号の学習については明確に規定されていません。 その結果、学校によっては 発音の指導が十分に行われず、正しい音の習得が難しくなっています。 さらに日本語の長音のクセや和製英語などの影響で間違った音のインプットをしてしまっているので、せっかく学校で覚えた単語はおそらく半分は使い物にならないでしょう。 そのため、一つ一つの音を正しく確認しながら、単語を 頭に「再インストール」する 必要があります。 私はセブに来たとき、英検二級に合格するために覚えた単語もほとんど使い物になりませんでした。今更5000語の音のインプットし直しなんて地獄ですよ笑 必ず発音を確かめながら声に出して練習しましょう。 中学生で学ぶ文法をやり直す 私が最も後悔しているのは、英文法をなおざりにしたことです。 英文法を徹底的に勉強して、なぜ早くやらなかったのかと後悔しました。 特に重要なのは 品詞 と 文型 です。 品詞 …単語の種類（名詞・動詞・副詞など） 文型 …文章の基本的な構造（例：主語＋動詞＋目的語） 品詞が理解できれば、単語の適切な配置が分かるようになります。 名詞の前には形容詞しか置けない 副詞は名詞以外のすべてが修飾できる 助動詞の後は原型しか置けない すべての基本の文章は基本文型に当てはまります。文型を理解すれば、文章を組み立てる際に どこにどの単語を置くべきか が明確になります。 これらはすべて中学校2年生程度で習う基礎中の基礎です。 最近お世話になったのは、タロサックさんの中学英会話です。おかげでいかに文法が重要かと、目が覚めました。 私は毎朝、英文ニュースを読む習慣があります。 文法をじっくりと勉強した副産物として、英文を速く読めるようになりました。体感的には時間は半分くらい短縮できるようになりました。 文法はあくまで練習のための予備知識 英文法の基本がわかれば、フィリピンでの留学で怖いものはありません、と言いたいところですが…。 突然ですが、皆さん格闘ゲームしたことがありますか？ 格闘ゲームでは決まったボタンの組み合わせを決まったタイミングで押さなければ、必殺技は繰り出せません。 若い頃、ストリートファイターが流行っていて、私もダルシムのヨガインフェルノを出すために親指の皮がむけるほど練ç

1¿’しました。 ここで伝えたいのは、どのボタンの押しせばいいかを知っていても適切なタイミングでコントローラーを操作できなければ技は使えないということです。 フィリピン留学に来たら英会話におけるコントローラーの操作を特訓するだけです。訓練もあくまでベースに英文法の知識があるからできるんです。 その前に予備知識としてコントローラーの操作の仕方を知っておく必要があるでしょう？それが 文法 です。 英文法は日本語文法と違って明瞭です。文法さえ知っていれば、少なからず聞く力だけでも格段に上がるはずです。 フィリピン留学の授業以外での英語の伸ばし方 フィリピンで本気で英語を習得したい人におすすめの過ごし方をご紹介します。 確かに英語の先生は文法的・発音などのアドバイスもくれるし、我々のメチャメチャな文法でも汲み取って自信もつきます。 果たしてその状態が続いて、本当に英語が上達するでしょうか？ フィリピン人、特に先生は我々がどんなに間違えても理解してくれるんですよ。 先日買い物帰りにアメリカからの観光客から道を聞かれました。 発音良すぎて聞き取れず、何度か聞き返したらため息をつかれてしまいました。 あなたが私に尋ねてきたんでしょーが！溜息つくくらいならこんなに日本人丸出しの私に聞くなよ笑 でもこれが現実です。一歩学校の外に出たら、自分の発音の悪いと聞き取れなかったりしゃべれなかったりするんです。 だからこそプライベートな時間は 先生や日本人以外 と時間を過ごすのを私はおすすめします。 ただし、どんな人と付き合うかはよく吟味したほうがいいです。 クラブで遊んでいるような子、レジの店員やタクシーの運転手などはちゃんと英語を話せない人も結構多いです。 フィリピン人の彼が「自分はchubby（ぽっちゃり）だ」と言っていたので、日本人的な気遣いのつもりで「Stout（がっしり）だと思うよ」と言ったら全く通じませんでした。さらに「自分はあまり英語が得意じゃない」とまで言われてしまう始末。良かれと思った配慮が空回りした瞬間でした笑 学校を一歩飛び出せば、これが現実です。相手に合わせたシンプルな単語（義務教育レベル）を使う重要性がよく分かりますよね。 英語力を伸ばすという目的であれば、次のような場所や人を選ぶのをおすすめします。 ジムでパートレ きちんとしたジムのパーソナルトレーナーは、顧客が外国人やお金持ちが多いので、ちゃんと英語が話せる人が多いです。 1時間は強制的に英語でしか会話できません。しかも留学先の英語の先生と違って、我々日本人のクセを分かっていない人も多く、ちゃんと話さないとまったく通じないです。 私はウォーターフロントホテルにあるジムに行って、3ヶ月だけパートレつけましたが英語力が格段に伸びました。 ハイソサエティーな人たちと付き合う 高等教育をしっかり受けている人やお金持ちの友達と付き合うのもおすすめです。 セブシティーであれば高級住宅街のある下のちょっとした商店街・ストリートスケープのカフェがあります。 留学経験のある英語ベラベラな人やリタイアメントビザで余生を過ごすネイティブも多く常に英語が聞こえてきます。 インターナショナルランチ会なども行ってるグループもあるので、勇気を持って飛び込んでみるのもおすすめです。 フィリピン以外の国の人と友だちになる セブにはフィリピン人以外の外国人もたくさんいます。 留学生以外でもこちらでビジネスを持っている人なども多く住んでいます。 会話が共通の英語になるので、仕方なく英語で会話するしか選択肢がありません。 夜、集まって英語で会話しながらお酒を飲むのも楽しいですよ。 エクスパットの通い詰めるバーやカフェに行く エクスパット（Expat）とは「expatriate（国外居住者）」の略語です。 私は、セブに週 〜３回 通い詰めるバーがありますがお客さんの2/3は西洋人です。大半は退役アメリカ軍人だったり、同じASEANであるオーストラリアからの移住者です。 私の英会話が伸びた秘密はこういうバーに通い詰めたことでã

1™ã€‚ ぶっちゃけフィリピン人とは違い、容赦なく早口でリダクション（音の脱落）やリンキング（音声結合）サウンドのオンパレードで最初は何言ってるかちんぷんかんぷんでした。 でもフレンドリーな人は話しかけてくるし、運良ければドリンクも奢ってくれます。 だいたい、 \\"Where are you from？\\" \\"What is your nationarity?\\" \\"Are you tourist?\\" くらいからしか最初は聞いてこないので、そのへんの回答を練習しておけば会話できると思います。 人によってはお酒が飲めなかったり、女性の一人飲みは危険だったりします。自分にあった場所を見つけましょう。 まとめ・事前学習で最低限の基礎力をつけてからフィリピン留学しよう 私は残念ながらフィリピン留学は経験したことありませんが、たくさんのフィリピン留学を経験した人に会ってきました。 長く留学したわりにはあまり喋れないと愚痴をこぼす人もいます。でもそういう人を観察したら日本人とばかりつるんでいたりクラブで遊んでばっかりです笑。 アメリカ留学に行った人でも英語を習得できなかった人もいるくらいなので、本人の過ごし方の問題なんでしょうね。 本気でフィリピン留学で英語を習得したいなら、ぜひ最低限の事前学習をして喋る練習にのみフォーカスしてください。 そしてさらなるコミュニケーション能力を高めたいならプライベートの時間を工夫してみるのはいかがでしょうか？ せっかくセブにいるのだから、英語学習は自分のペースでのんびりと 私は6年前は道すらも聞けず、英検2級に合格していたのに話せないことが恥ずかしく、英語を勉強するのを避けていました。 コロナ禍のロックダウン中、時間があったã

1®ã§ã€æ•°ãƒ¶æœˆã ã‘英会話を試してみたことをきっかけに、空いた時間に英語の勉強をするようになりました。 セブという環境を活かして、少しずつ英語学習を続けています。 最近では生活に困らない程度には話せるようになりました。 この記事がみなさんのフィリピン留学ライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry550","title":"Slim Framework でフォームを作る（非同期・Docker・Mailhog・レンタルサーバー実装前提）","date":"2025-04-06","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2025/entry550.webp","description":"Slim Frameworkで非同期フォームを作成する方法を解説します。Dockerを用いた開発環境構築、Mailhogでのメール送信テスト、CSRF対策やセッション管理も徹底網羅。Slimの拡張機能を活用してセキュアなフォームを構築！","tags":["PHP"],"body":"ちょっと前、急いでいたあまりフォームをスクラッチで作成せざるを得ない事案が発生しました。 フォームをスクラッチで作成するなど、私いち個人の業界15年で培ったフィロソフィーからしても 正気の沙汰ではない と思っています。そこで、鬼気迫る状況下でも困らないよう、framework を導入してフォームを作成する手順をまとめてみました。 こ、これを使うのは危険だろ。。。。 その昔 fuelPHP で似たようなことをしましたが、最新版は2019å¹´6月にアップデートされた1.8.2のみ。 かといって Laravel 実装したいことに対して重すぎる。。。 そこで今回は軽量なことで定評あり導入しやすい Slim framework を活用してみたいと思います。 https://www.slimframework.com/ やりたいこと Xserverなどのサーバーに実装できる Dockerでしっかり環境を作ってテストしたい FetchAPI で非同期で送信したい コードが長くなってしまったので、目次（この記事のサマリー）を辿ってください。 環境構築 まずは基本のディレクトリ構造です。 Slim をComposer経由でインストール まず、コンポーザーがあるか確認します。けっこう使うので昔インストールしていることも。 なければ以下リンクに沿って、コンポーザーをインストールします。 Download Composer プロジェクトディレクトリで以下コマンドを実行。コンポーザー経由でslimをインストールします。 versionが古い場合（2025å¹´1月現在Latest: v2.8.8）はアップデートしておきましょう。 slimapp/に落ちてきた public ディレクトリ を publichtml と名称変更し slim_app/ と同じ階層に並べます。 Docker 環境作成 Docker 環境作成の説明は割愛します。 エラーで躓いたり、困ったら以下記事を参考にしてください。 ファイル内のパスを修正 public/index.php にはエントリポイントとしてのファイルが置かれています。そのパスを /../ を /../slim_app/に修正します。 もしフォームをさらに1層下に置く場合は/../../slim_app/等、適宜設定を変えてください。 http://localhost:8080/ にアクセスするとHello, world が表示されます。 サイト:http://localhost:8080/ → Hello, world!! mailhog:http://localhost:8025/ Slim framework でフォーム作成 以下のようにファイルを置きます。 さっそく、slimでフォームを作ります。 今回は、テンプレートは予めhmtlで作成しているので、そのまま使います。 routes.php から /form にアクセスしたら、public_html/form.html を読み込むようにします。 トップページ フォームのテンプレhtml。後ほどバリデーション追加して検証するため、あえてtype=\\"text\\"などにしています。 .htaccess で index.html や form.html にアクセスできないようにしておきます。 Slim フォームのベースのロジックを作成 routes.php に submi を追加。 まずはmailhogが動くかも確認したいので、FormController.php を追加しフォーム送信をテストしてみます。 http://localhost:8080/form/ にアクセスしてテスト送信を行ってみましょう。 Mailhog側。 Slim では mail 関数を使うことは推奨されていないので、今回は Slim と相性の良い拡張機能 phpmailer を利用します。 phpmailerに合わせたコードに修正します。 phpmailer では STMP の設定が必要になるのですが、mailhogのコンテナ名ではなくIPアドレスを指定 してください。 デバッグモード有効にしているので以下のように出力されます。 非同期対応したいので、JSONでデータを返すように修正 今回は非同期でフォーム送信したいので以下のようにコードを修正してJSONを返すようにしておきます。 必要に応じて$mail->SMTPDebugを有効にしておくと良いと思います。 バリデーションを追加する フォームといえばバリデーション対応ã

1Œæ›¸ã‹ã›ã¾ã›ã‚“ね。Slimとの相性がよく、広範なルールを提供するシンプルなバリデーションライブラリのRespect\\\\Validationを導入します。 コードの見通しが悪くなるので、メソッドで追加します。 全体のコードです。 エラーが返ってきました。 Respect\\\\Validationで使えるバリデーションです。 | カテゴリ | ルール | 説明 | | ---------------------- | -------------------- | -------------------------------------------------------------- | | データ形式 | notEmpty | 値が空ではないことを確認します。 | | | email | 有効なメールアドレス形式であることを確認します。 | | | phone | 有効な電話番号形式であることを確認します。 | | | url | 有効なURL形式であることを確認します。 | | | ip | 有効なIPアドレスであることを確認します。 | | 数値/範囲 | numeric | 数値であることを確認します。 | | | intVal | 整数であることを確認します。 | | | between(min, max) | 指定された範囲内であることを確認します。 | | | min(min) | 最小値を指定します。 | | | max(max) | 最大値を指定します。 | | 文字列 | length(min, max) | 最小文字数と最大文字数を指定します。 | | | startsWith(prefix) | 特定の文字列で始まることを確認します。 | | | endsWith(suffix) | 特定の文字列で終わることを確認します。 | | | contains(text) | 特定の文字列を含むことを確認します。 | | | alpha | アルファベットのみで構成されていることを確認します。 | | | alphaNumeric | アルファベットまたは数字のみで構成されていることを確認します。 | | 日付/時間 | date | 有効な日付であることを確認します。 | | | time | 有効な時刻であることを確認します。 | | | before(date) | 指定した日付より前であることを確認します。 | | | after(date) | 指定した日付より後であることを確認します。 | | リスト/配列 | arrayVal | 配列であることを確認します。 | | | in(array) | 配列内に特定の値が存

1在することを確認します。 | | | subset(array) | 配列が指定した配列の部分集合であることを確認します。 | | 特殊条件 | equals(value) | 特定の値と一致することを確認します。 | | | instance(class) | 指定したクラスのインスタンスであることを確認します。 | | | json | 有効なJSON形式であることを確認します。 | | 複数条件の組み合わせ | allOf | 複数のバリデーションを全て満たす必要がある。 | | | anyOf | 複数のバリデーションのうちいずれかを満たす必要がある。 | | | noneOf | 複数のバリデーションをいずれも満たさないことを確認する。 | JavaScript の FetchAPI でフォーム送信できるようにする ではこのコードを JS の Fetch API で送信してみます。送信がうまく行ったら、thanks/リダイレクトします。 エラーメッセージを出力できるように、コードを追加します。 フォームをJavaScriptで非同期で送信するためのコードです。今回はSlimの解説なので細かいことは割愛します。 Thanksページのテンプレを追加。 routes.phpにthanksのルートを追加。 thanks.htmlにアクセスさせないよう.htaccessを編集。 セキュリティ対策：CSRFを追加する セキュリティ対策にCSRFも追加しておきます。 クロスサイトリクエストフォージェリ（forgery：偽造） は、Webアプリケーションの脆弱性の一つもしくはそれを利用した攻撃。略称はCSRF、またはXSRF。 最初から、blade や Twig などのテンプレートで書いてもいいんですが今回は本来のソースコードを徹底的に活かすため、CSRF トークンも Fetch で取得します。 routes.phpのコードです。セキュリティヘッダーの追加を追加し、セキュアにするためにトークンは1時間後に有効期限が切れるようにしておきました。 http://localhost:8080/csrfにアクセスしたらトークンが確認できます。 FormController.phpを修正 form.html にFetchAPIで取得したトークンを挿入できるようにする。 まとめ・フォームを作るなら、セキュリティを加味して自作より断然framework 今回、セキュリティ対策のために、Slim を使ったフォームの作成方法をご紹介しました。 入力データのバリデーション（respect/validation） セキュリティヘッダーの追加（ルートで設定済み） CSRFトークン保護（symfony/http-foundation使用） 入力データのサニタイズ（無害化） 上記はセキュリティ対策の一部で特にデータベースなどが絡んでくると不十分です。次のような対応も検討したほうがいいと思います。 SQLインジェクション防止: プリペアドステートメントで安全なクエリ処理。 HTTPS強制: HTTPリクエストをHTTPSにリダイレクト（.htaccessなどでも対応可能） セッション管理: Symfonyのセッション機能でHttpOnlyとSecure属性を設定。 レートリミット: slim/throttleでリクエスト数を制限。 エラーメッセージ制御: addErrorMiddleware()で詳細エラーを非表示。 ログ記録: monolog/monologでセキュリティログを管理。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry549","title":"MailHog×Docker構築・使い方ガイド｜localhost:8025に接続できない・メールが届かない時の対処法付","date":"2025-03-30","modifiedDate":"2026-06-22","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2025/entry549.webp","description":"Docker環境でのMailHogの使い方・メール送信テスト環境の構築手順を徹底解説！docker-compose.ymlの具体的な設定から、軽量ライブラリmhsendmailの連携まで網羅。ローカルで安全かつ爆速ã

1«ãƒ¡ãƒ¼ãƒ«ãƒ‡ãƒãƒƒã‚°ã‚’行うための開発者必携ガイドです。","tags":["Docker","PHP","コマンド"],"body":"先日、静的HTMLサイトを作っている最中、仕様変更があり急遽フォームを追加しなくてはいけなくなりました。 慌ててDocker環境にPHPとMailHogを追加してメール送信用のデバッグ環境を構築。AIを駆使したのですが、まあまあ吐き出すdocker-composeやmhsendmailの設定コードが間違えていてエラーまみれ笑localhost:8025の管理画面に繋がらないなど、いざとなったら自分の経験だけがたよりだと痛感しました。 改めてその時作った「確実に動くMailHogの環境と使い方」を見直したので、設定手順を記事にまとめておきます。ハマりやすいポイントのトラブルシューティングも合わせて用意しました。 この記事でわかること Docker（docker-compose.yml）によるMailHogの使い方と導入手順 Go製の軽量ライブラリ mhsendmail を利用した確実なメール連携設定 管理画面（localhost:8025）に接続できない・メールが届かない時の原因と対策 DockerでのMailHogの使い方：メール送信テストを連携したローカル開発環境を作る Docker何ぞやって人もいると思うので Docker のベースの要素をおさらいしておきましょう。 イメージ : プログラムやアプリを動かすための「設計図」や「準備データ」 コンテナー : イメージを元にして実際に動いている「アプリ本体」 サービス : 複数のコンテナーをまとめて管理して効率よく動かす仕組み 昔主流だった仮想環境の Vagrant や XAMPP を使ったフォーム作成環境の構築は、非常に困難でした。特に、SMTPサーバーを手動で設定する必要があったため、たとえテスト環境であっても、インフラエンジニアなどの専門知識が求められるケースが多かったã

1®ã§ã™ã€‚ しかし、Docker と MailHog を利用すれば、フォームのテスト環境を簡単に手早く構築できます。 本当に良い時代になった。。。 docker-compose.yml を作成 ファイル構成はざっとこんな感じです。web内に設定ファイル、public内に実際に表示させたいファイルを置きます。 docker-compose.yml です。Webの表示には 単に php が動けばいいので、Dockerfile で独自のカスタムイメージを作成（後述）します。 Docker との相性の良い、mhsendmail の設定 今回は以下4つの理由からmhsendmailを使います。 MailHogとの連携 PHPのsendmail_path設定に対応 簡単にインストールできる 開発環境に最適 mhsendmail はGo言語で書かれており、軽量で高速に動作します。 mhsendmail 導入方法はいくつかありますが今回は curl でインストールしました。 curl は「インターネットからデータを取得したり送信したりする」ために使われるコマンドラインで使えるツールで、今回使う apache と php のイメージ php:8.2-apache に標準搭載されています。 Dockerfile 経由で権限を-rwxr-xr-xに変更しておくことがポイントです。 php.ini を作成します。sendmail_path に docker-compose.yml で設定した、SMTPポート 1025 に合わせたパスを追記します。 ついでに、phpエラーを var/log/php_errors.log に出力できるようにしておきます。 ※ 環境に応じて myproject_mailhog:1025 はコンテナ名+ポートになるよう調整してください。 Dockerを起動・送信テスト Dockerを起動し、正しく動いているか確認しましょう。 それぞれアクセスしましょう。public/index.phpを空ファイルでもいいので設置しておいてください。 サイト:http://localhost:8080/ mailhog:http://localhost:8025/ MailHogの管理画面（localhost:8025）に接続して受信を確認する phpinfo.php を作成し、以下のようにコードを書きます。 php.ini に設定した、sendmail_path が反映していることを確認します。 実際にメールの送信テストをする index.phpにphpのmail関数を使ってメール送信テスト用のコードを書いてみましょう。 http://localhost:8080/ にアクセスするだけで送信実行されます。 mail関数 mail 関数はメール送信の試行が実行できたかを返します。成功したか失敗したかは、PHPが内部的にメール送信コマンド（例: sendmail, mhsendmail ）が実行できたかしか判定しません。 つまり、 がtrueだった時点で関数は実行されます。 もしここで、メールが送信できない場合、 mail 関数の実行そのものが失敗しているということになるので、mhsendmail のインストールの失敗や不具合を疑うことができます。 一度Dockerを閉じて、再び起動します。メールのログが残っていれば成功です。 トラブルシューティング 私は最初 GO の拡張機能経由で apache 側にmhsendmailをインストールしたのですがメール送信に失敗しました。 errorgetlast()は、PHPが直前に発生したランタイムエラーを取得する関数です。mail 関数の実行結果がfalseの場合、エラー結果として null が返ってきます。 どんなケースでもプログラミングでは、どの時点で失敗しているかを特定するのが大切 で、実行した順番にたどりながら確認していくことがポイントです。 1. コンテナは正しくインストールされているか？ 2. mhsendmail はコンテナ内に正しい場所にインストールされているか？ 3. mhsendmail のパーミッションは正しいか？ 4. php.ini に設定した sendmail_path のパスは間違ってないか？ 5. コンテナは同士のネットワークに問題はないか？ 先程も mail関数 で触れたように、メール送信ができていないのでmhsendmailのインストールの失敗や不具合を疑うべきです。 まず最初にコンテナ内にmhsendmailがインストールされているか確認 コンテナは動いているので apache 用のコンテナ内（myproject_web）に mhsendmail がインストールされているか確認します。 ls -lコマンドでパーミッションもついでに確認します。 初期状態でコマンドでdockerコンテナをインストールする時、メッセージが流れすぎてエラーを見逃してしまうことがあります。私のようなうっかりさんは、ログをファイルに書き出してしまうのもおすすめです。 私なんて、退屈だからインストール待っている間ついYouTube見ちゃいますもん。 コンテナ内で叩けるコマンド は、Dockerfile内でも必ず実行可能 です。なのでDockerfileで実行する前に、まずはコンテナでコマンドが叩けるか試してみるのもおすすめです。 ということで、昔ながらのやり方curlに切り替え実行してみます。コンテナに入ります。 Dockerfileで叩きたかったコマンドを実行してみます。 Mailhog/mhsendmail この Github の Download パスは将来的に変わるかもしれないので

1必ずご確認ください。 lsコマンドでmhsendmail があるか確認。 curl で確実にインストールできることが分かったので、Dockerfile もそのように書き直しました。 戻ってまた送信テストをしてみます。 mhsendmail が正しくインストールされたのに、mailhog 側に反映されない またお前か。。。 mhsendmailがちゃんとコンテナ内インストールされたのにメールが送信できない場合は、apache と mailhog のネットワークのつなぎ込みの失敗やSTMPサーバーへのパスの記述ミスの可能性が高いです。 まずは問題の起こっている場所の特定するために、コンテナ側からメール送信を行ってみます。 ここでmailhog にメールは届く場合は、コンテナ内の mhsendmail に問題はない事がわかります。 私の場合単純な凡ミスで sendmail_path が間違ってました。なのでコンテナ内ではメール送信に成功し、web側では送れなかったのです。 以下よく確認します。 /usr/local/bin/mhsendmail => myproject_webでmhsendmailをインストールしたパス myproject_mailhog:1025 => -smtp-addr=コンテナ名+ポート さらに念の為、docker-compose.yml のネットワーク名を明示的に指定するために、コードも修正しました。これで同じネットワークに属しているため、通信が確実に行われます。 まとめ・導入よりもトラブルの原因を突き止める力が重要 今回はプレーンなサーバー環境にフォームのデバッグをできる環境を作ってみました。 最近 Docker を触る機会が増えましたが大切なのはエラーをキャッチでき、デバッグができる環境をいかに作るかが大事だなということです。 JavaScript しかり、PHPしかり、エンジニアはそこまで用意して初めて一人前になれるとしみじみ思いました。 そして AI の言うことを鵜呑みにせず、ある程度体系的に知識がないと振り回されるので、ベースの勉強大事だと思いました。 この記事が皆さんのエンジニアライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry548","title":"AIでますます便利な世の中に。果たして私達は本当に楽になったのか","date":"2025-03-10","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2025/entry548.webp","description":"生成AIを使いクオリティが上がるし便利。でも周りも同じようにクオリティが上がる、つまり周りより頑張らなければいけないということは、本当に楽になってないですよね？やること増えてませんか？お金や数字の奴隷なっていないか？ハードワーカーで自らを犠牲にしていないかなど、ライフワークバランスについて考えました。","tags":["ライフスタイル","摩耗しない人生","AI"],"body":"最近、よく生成AIを使って仕事をしています。 コードの質はグッと上がり、今までの自分の限界を悠々と超え、スキルの幅がとてつもなく広がりました。 そんなある日です。夜10時くらいまで仕事をしていたとき、ふと思いました。 私は楽しようとして生成AIを使ってるのに、なんでこんな夜中遅くまで仕事をしていんだろうか。 特にここ数か月間は「私は一体何をやってるんだ？」という考えが頭をよぎり続けました。 そこで今日は、AIの恩恵だけでなく「本当に楽になっているか」を考察し、自分なりの意見をマイルストーンとしておいておこうと思います。 便利になった分忙しくなってない？そりゃ、みな生成AIを使う。一様にクオリティが上がるので当然の結果 自分のやれることの幅は増えたということは、周りも同じ。ã

1¿ã‚“な一様にクオリティが上がりますよね？ 悲しいかな、この世界は競争社会です。 この資本主義での競争に負けないようにしなければ生き残れません。 やれることは増えたけど結局忙しくなり、正直、楽になったとは言えないなぁ、と。 そもそも人類の歴史を振り返る。文明の進化で私たちは本当に「楽」になったの？ みなさん、歴史学者ユヴァル・ノア・ハラリさんの「サピエンス全史」を読んだことはありますか？ この本は、有史以前からサピエンス（人類）の現在までの歴史が壮大に綴られています。 ホモ・サピエンス全史 人類は狩りから農耕に切り替え、一見文明が発達して 便利になった ように思えます。 しかし、実際は狩りで生計を立てている頃と比べ労働時間が増えました。単一の食べ物（麦）ばかりを口にするようになり栄養バランスも偏るだけでなく、農業の重労働によるヘルニアなどの病気の痕跡も残っています。 総合的には、狩猟をしていたときのほうが 労働時間も短く食生活も豊か だったのです。 人類は「結局、麦の奴隷になった」と、ハラリさんは言及していました。 実感がわかないので近代、身近な話もします。 私が生まれてから現在に至るまで、50年も満たない間でも世界は目覚ましく進化してきました。図書館に行かなくても、インターネットさえれば瞬時に欲しい情報を入手できるようになりました。 江戸時代や中世に人が一生かけて手に入れた情報をたった一瞬で手に入れられるんです。 ぶっちゃけ、ハガキよりも小さいサイズの液晶画面付きの電話（スマートフォン）が、私が生きている間に登場すると思わなかったです。 もし子供の頃の私が知っていたら、すでにこの現代は漫画で見たようなSFのような世界と驚くでしょう。 ところがみなさん、こんなに便利になった世の中で未だに長い時間働いています。 むしろ労働時間が長くなり、日本などでは賃金すら下がっています。 不思議に思いませんか？生産性は上がったにも関わらず、労働時間が増えてませんか？ そして、なぜ誰も疑問に思わないのか？ ふと、私は疑問に思わずにいられませんでした。 「幸せを追求すること」私のセブにいる理由を改めて考える 私がセブにいる理由はいくつかあります。そのうちの一つは「幸せを追求すること」です。 フィリピンにいると日本のように欲しいものがすぐに手に入りません。大きなモールやスーパーでさえ品切れだらけです。 最初はそんなセブの生活にイライラしていました。 でも生活しているうちに気づくんです。「もの」ってなくても以外と生きていけるんですよね。次第に物欲も減りました。 更に私の人生の価値観をロックダウン、パンデミックが変えました。 写真提供:DAREDEMO HERO パンデミック初期、コロナは未知の病気でした。医療費に点数制度のないフィリピンでは治療に100万ペソ？以上かかかったという人の話も聞きました。 それだけじゃありません。病気にかからずとも外で働けなくなりました。いわゆる、ロックダウンです。せっかく無理して家族でお金を出し合って子どもを大学まで行かせても、中流階級の人たちは貯金もない。食うに困る人も続出しました。 日本じゃ到底できない体験でしょう。 理不尽を目の当たりにし、「幸せってなんだろうか？」って考えるようになりました。 そして最近、AIを使って遅くまで仕事して、本当に楽になったと言えるのか。この状況は、本当に私にとって幸せなんだろうか？ いや、到底思えませんでした。 お金や数字の奴隷になってないか？ 私は「幸せの追求」するうえで、心に決めていることが一つあります。お金や数字の奴隷にならない ことでã

1™ã€‚ お金や数字の奴隷になり、際限なく働いてませんか？ 正直に言うと、日本にはそういう人があまりにも多い。かつての私もそうでした。 とある組織にいたころの話です。上司が営業社員を恫喝する光景を見るのが月末の恒例行事でした。 売上目標を達成すること =（イコール） 上司の成績 売上目標未達 =（イコール） 部下の責任 部下は延々と人前で怒鳴られる。今考えるとなんとも馬鹿らしいし、パワハラで訴えられますね。 売上が上がれば会社の利益になり、自分たちに分配される。そうであれば100歩譲って分かりますが、上司の成績のためだけにやっているのであれば ただの奴隷 です。 お金だってそうです。 欲しいものと必要なものは違う。本当に必要なものだけ買っていれば、そこまでお金は使わないものです。 私はセブに住むようになって不思議なくらい物欲が減りました。 だからこそ不思議なのです。 いくら稼いでも満足しない人がいることが。 たまに取り憑かれたようにお金を稼ぐことに執着している人がいます。私はそういう人を「お金の奴隷」と呼んでいます。 どんな人間にも死が訪れるし、火葬場で灰になるか、腐って土に還るか。そうなってしまえば 我々は単なる炭素化合物になるだけ です。そうなっても、お金に執着しますか？ もちろん、現代社会で生きるうえでお金は大事 です。最低限必要なだけは稼がなければなりませんが、お金の奴隷になってはいけません。 そもそも、貨幣制度は利便性を良くするために我々が発明した ものですよ。自分たちの生み出したものの奴隷になってどうするんですか？ 未だにハードワーカーがかっこいいと思われる風潮 日本では、未だ遅くまで働く、土日も働くハードワーカーがかっこいいと思われる風潮があります。まるで神話のように信じられています。 フィリピン人を見ているとみな、家族や友人との時間を大切にします。締切が合ってもそちらを優先することもあります。 それでいいんですよ。人生は仕事だけじゃないんですから。 私は社会人経験で、自ら犠牲になるくらいハードに働く社員を評価したり祭り立てる経営層、管理職を山のように見てきました。 それはただの教育、社内キャンペーンだと私は感じています。そういう風土を作った方が会社にとって都合が良いだけ。 考えてみてください。逆に会社があなたの犠牲になることはないでしょう？ フィリピンではそんなことも気づかせてくれました。 ときおり、立ち止まって考える 確かに、生成AIを使い始めて便利になりました。だからといって、全然仕事が楽になったというか、仕事量が減ったわけではなかったです。 そもそも生成AIが問題ではなく、根底にどんな心理があるかが問題と考察します。 お金や数字の奴隷になれば、無限に働き続ける ハードワーカー神話を信じ、無限に働き続ける これではいつまでたっても楽にはなりませんよね。 そして忙しさにかまけていると、自分の信条を見失いそうになります。 だからこそ、ときおり手を止め、立ち止まって考えてみます。 私がセブにいる理由の一つは「幸せを追求する」ことです。 そして私の幸せとは、私と私の周りの人が楽しく生きていけること。生成AIを引き合いに出しましたが、世の中は便利になっているけど、結局仕事量が増えて、あまり幸せになれてなかったという話でした。 自分を戒めるために書きましたが、この記事がみã

1ªã•ã‚“のライフワークバランスを見直すきっかけになると幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry547","title":"BPI（フィリピン銀行） のキャッシュカードがロックされたので Cardless Withdrawal でお金を引き出した話","date":"2025-03-02","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2025/entry547.webp","description":"フィリピンの主要銀行BPIのカードがロックされた時の対処法として、Cardless Withdrawalの使い方を詳しく解説。GCashの送金トラブルもカバーし、緊急時に役立つ情報を提供します。海外生活でのトラブルを乗り切るためのヒント満載。","tags":["海外移住","セブ島"],"body":"マーヨンハポン、海外ノマドエンジニアのかみーゆです。 昨日、友だちのお見送り会も兼ねた焼き肉会がありました！ 1,000 ペソしか持ってなかった＆直前まで仕事していたので、とりあえずいつも使わない一番近くの ATM へ。 お金を引き出そうとしたら、BPI のキャッシュカードがどうやらロックされてしまいました。 Bank of the Philippine Islands (BPI)とはフィリピンの主要な銀行の一つです。 せめて BPI のアプリから GCash に送金しようとしたら、E-Wallet の管理画面から GCash への送金項目が消えている。 GCash はフィリピンで広く利用されている電子決済アプリ。2009年にGlobe Telecomによって設立され、フィリピン国内で最も人気のあるキャッシュレスツールの一つ。 。。。あ、詰んだ。なんて日だ。。。 海外の銀行系のトラブルは起きがち。そこで今日はこんなときに使える Cardless Withdrawal（カードレス引き出し） 機能の使い方を解説します。 GCash に関する記事も書いてます。昨年、成田空港の Doutor Coffee で GCash 使えるって書いてあるのに使えなかったこと思い出した笑 Cardless Withdrawal の使い方 キャッシュカードのロックに関しては平日どっかで銀行に行って確認するとしてとにかく今日生きるための現金が必要。 そこで前から気になっていた Cardless Withdrawal を使ってみることにしました。 Withdrawal は銀行口座からのお金の引き出し以外にも、引きこもりという意味もあります。 昨年ぐらいからしれっと登場した機能みたいで、More > Services の中に項目を探すことができると思います。 Cardlress Withdrawal を選択します。 一応私のアカウントでは 1 日 10,000 ペソまで引き落とし可能とのこと（普段そんなに使うことはないけど）。 とりあえず引き出し金額を 10,000 ペソで設定。カードレス引き出しのリクエストをします。金額入力の前後どっちだったかな？処理を承認するために BPIアプリの PIN を入力を求められます。 Request Cardlress Withdrawal をクリック。 リクエストが無事完了したら、SMSメッセージで order ID が飛んできます。BPIアプリの管理画面でメールアイコンをタップしても、order ID は確認できます。 いざ BPI の ATM へ いざATMへ。1時間位内に処理しないと無効になるので、足早で向かいました。 Cardlress Withdrawal ができる ATM は アクティベートされた BPI ATM か BPI Euronet ATM のみだそう。 公式サイト BPI and Euronet ATM Directory からアクティベートされたATMを調べました。 どれや、、、詳しい住所とどこに設置してあるかまで明記してよ笑 スクショは一部です。Ayala はフィリピンで有名なモールの一つなんですが、セブシティーに2つあります。 せめて Business Park にあるとか Ayala Central Block とか言ってくれなã

1„と困ると思いつつ、日本だとまずこの表記はないけどフィリピンなので諦め、直ぐそばに Skyrise It Park と明記があるのできっとITパークにも Cardless withdrawal に対応したATMがあるはずに違いないと信じて向かう。 アクティベートされている ATM をほとんど勘で探します。指定されているであろう Ayalaモール の ATM に行ってみましたが、画面をタッチしてもなんにも反応なし。 BPI の公式サイトで改めて銀行名を確認し、検索。Google Map ではなぜか Globe （フィリピンの通信キャリアの一つ）の建物にピンが刺さっているのでダメ元で凸（とつ）。 ここ絶対ちゃうやろ。。。フィリピン住んで6年の私の直感が言っている。My gut says there is no ACTIVATED ATM for cardless withdrawal... そう思いつつも中に入ったら、まるまると太ったガードのおっさんがスヤスヤ寝ていました。「Good morning」と言って起こして、早速聞いてみる。 おっさんからは当たり前の返答「ここ Globe やで」。いや、分かっている。分かっているけど涙 落ち込む私に「今日は日曜で休みだけど、明日銀行行ったらえーよ」と、おっさん。優しい。無理やり起こしてごめんね。 Cardless Withdrawal が使えるATMを使う必要がある もう一度 「Cardlress Withdrawal BPI bank」 などのキーワードで検索したら、BPI Euronet ATM なら Cardlress Withdrawal できると検索結果が。 あ、そうやった。BPI Euronet ATM なら Cardlress Withdrawal できるってさっきも言うとったわ。 最寄りの BPI Euronet ATM でググると徒歩 1 分くらいのところに発見。しかもここ、 JP Morgan じゃない気がするんですが。。。 さっきも変なところにマップのピン刺さってたしこんなことイチイチ気にしていたらノイローゼになっちゃうので、とりあえず GO。とりあえず ATM はあった。 私の住むITパークめっちゃ狭いんだけど、どんだけATMあるん？ 画面をタッチして BPI を選んだら、order ID の入力を求めてきた！！ どうやらビンゴ。早速入力。 order ID は SMS 経由でも、BPI アプリ管理画面でもメッセージが届いているからどちらで確認してもOK。 金額を入力すると SMS（携帯） に One time PIN(ワンタイムパスワードみたいなやつ)が届くのでそれを入力。 金額の入力か、One time PIN パスの入力が先だったかちょっと忘れましたがガイドの順番に従ったらいいです。 そして、無事やっとお金が下ろせました。 GCash と PAYMAYA の項目は他銀行へ移動したんかい ちなみに 2025å¹´2月、GCash と PAYMAYA は E Wallet から銀行に移ったらしいです。BPI アプリ管理画面でお知らせを確認したときに気が付きました。 InstaPayは、フィリピン国内の銀行間で送金や決済を行うことができるサービス Cardlress Withdrawal は他の銀行でも使える Cardlress Withdrawal で検索すると、Metrobank、UnionBank、BDO など BPI 以外でも主要のフィリピンの銀行でヒットしました。 QR を発行するだけで引き出せるものもあるっぽいので、各銀行で何ができるか調べておくと良さそうですね。 #### Can I withdraw from BDO ATM without card?(BDOATMでカード無しでお金を引き出すことはできますか？) Generate the QR using your BDO Digital Banking app, then use it to withdraw from QR-enabled ATMs. BDO銀行アプリからQRコードを発行します。そして、QRが使えるATMでQRを通じでお金を引き出してください。 海外はトラブルはつきもの・手元にいくらか置いとけ 昨日は盛大に遅刻した上、みんなの憩いのバー Ripple のあっこちゃんに 1,280 ペソ借りました。快く貸してくれてありがとう涙 海外はトラブルはつきもの。そういえば、昔私の知り合いもカードがATMから抜けなくなって困ってたことがありましたしね。 何があるかわからないので、常に1万ペソくらいは家においておいたほうがいいですね。 良い勉強になりました。","noindex":false},{"slug":"entry546","title":"【2026年最新比較】始めるならどれ？CSSフレームワーク3選（Bootstrap、Tailwind v4、Foundation）の特徴と選び方","date":"2025-02-27","modifiedDate":"2026-06-08","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbn

1ail/2025/entry546.webp","description":"2026年最新のCSSフレームワーク比較！定番のBootstrap、新コンパイラで爆速化したTailwind CSS v4、そしてプロ仕様のFoundationを徹底解剖。初学者からNext.js/Astroを使うモダン開発者まで、実務に役立つ選び方を解説します。","tags":["CSS"],"body":"CSS はややこい!!! 覚えるのも学習コストも掛かります。今から Web 制作を始めるなら、サクッとフレームワークを使ったほうがカンタンです。 CSSフレームワークと一言で言っても40個以上あって、全部比較していたら私の寿命尽きちゃう笑 今回、特に人気のフレームワーク3つほど厳選し、使い方を徹底的に比較してみました。 まずはおさらい: なぜ CSS はややこいのか？ CSS は次のような理由で初学者を一気に絶望の淵に追いやります。 1. カスケーディング（滝のように上書きされる）: 上書きされる順序が複雑でデバッグが苦行 2. 詳細度(どの設定が優先されるか): セレクタの種類や構造に基づく優先度の計算がツライ 3. 複雑なプロパティやレイアウト: プロパティ同士の組み合わせが予期しない挙動を引き起こしてカオス。うなぎと梅干し食べて食あたりみたいなことがよく起こる 4. クロスブラウザ対応: ブラウザごとに解釈が異なるため、ブラウザごとの表示確認と調整必要 うなぎと梅干し食べて食あたり起こすのは科学的根拠がないみたいですよ！ 基本 CSS フレームワーク は CSS の手練れの人が開発しています。しかも無料で提供して、そんな4つの問題を解決してくれているんです。初学者や CSS が苦手な人は、フレームワークを使えばいいじゃないか！ Bootstrap、Tailwind CSS、Foundation比較表（個人の感想含む） Boot Strap | | 詳細 | | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | | 特長 | 豊富なコンポーネントと強力なコミュニティサポート。日本語ドキュメントもあるよ！ | | メリット | 豊富なコンポーネント、強力なドキュメントとサポート、レスポンシブデザイン、一貫性。 | | デメリット | 大規模プロジェクトでのカスタマイズが難しい、デフォルトのCSSファイルが大きくなる。 | | リリース | 2011å¹´8月〜 | | 開発元 | X（Twitter） | | 個人的感想 | クッソ重い。デザイン的に Bootstrap 臭（日本人にはå

1‘かない感）がすごい | Tailwind CSS | | 詳細 | | ------------ | ------------------------------------------------------------------------------------------------------------------------------- | | 特長 | ユーティリティファーストのアプローチでデザインの自由度が高く、カスタマイズが容易。 | | メリット | 必要なスタイルのみを使用できるためカスタマイズが容易、JITモードでパフォーマンス向上、レスポンシブデザイン、クラス名の再利用性。 | | デメリット | HTMLに大量のクラス名が追加されるためコードの可読性が低下する、慣れるまでに時間がかかる。 | | リリース | 2017å¹´11月〜 | | 開発元 | Adam Wathan, Jonathan Reinink, David Hemphill, Steve Schoger | | 個人的感想 | htmlへのクラス付与が多すぎてうざいんじゃけど。。。 | Foundation | | 詳細 | | ------------ | ---------------------------------------------------------------------------------------- | | 特長 | エレガントなコードと豊富なUIコンポーネントを提供し、プロなプロジェクトに適している。 | | メリット | スタイリッシュなコードと高い可読性、高度なカスタマイズ、アクティブな開発。 | | デメリット | 学習曲線が高い、Bootstrapほどの大規模なコミュニティサポートがない。 | | リリース | 2011å¹´10月〜 | | 開発元 | ZURB | | 個人的感想 | 使ったことないから知らんかったけど、めっちゃ有名なサイトFoundationでできとったんやな ^ ^ | 調べてみると最新の Bootstrap アップデート(v5.5.5)がこの記事を書いた前日でした笑。 X に買収されたあとも、活発に開発しているみたいですね。 前述したように、最近は更に増して複雑化した CSS は習得にめちゃ時間がかかります。本音を漏らすと、それなのにプログラミングの絡まないコーディングだけの仕事だと、単価が安いだけじゃなく学習コストも高すぎる。 CSSフレームワーク導入は初学者やデザインのことがあまりわからないプログラマーにはとても有効です。 とはいえ、CSSを深く理解しているコーダーの需要もないとは言えません。 私は CSS LOVE なので全然書きます！！特にスマホとPCでデザインがガラッと変わるような複雑なコードはフレームワークじゃ対応できないです。 初心者へのイチオシ Bootstrap 初心者へのイチオシはやはり Bootstrap です。Bootstrap とは英語でブーツのヒモという意味です。最初の資本やリソースがほとんどない状態から何かを立ち上げるという比喩表現でも使われます。つまり、初学者の「はじめの一歩」にはぴったりなフレームワークです。 公式サイト：Bootstrap Bootstrap を気軽に始める方法は CSS と JavaScript の CDN を読み込む、です。 もちろん、pnpm 経由でもインストール可能です。 💡 2026年の新常識：pnpm と Bun ってなに？ 従来のnpmはセキュリティ騒動や大炎上で信頼が落ちているため、今のモダン開発はこの2つが主流です。 pnpm：PCの1箇所にだけデータを保存し、各プロジェクトにはショートカットを置く仕組み。ディスク容量を一切無駄にせず、インストールが「一瞬」で終わります。 Bun：実行エンジンそのものを爆速言語でゼロから作り直した超新星。ライブラリの追加もプログラムの実行も、すべてをnpmの数倍〜10倍の速度で片付けます。 otstrap は基本 5 つの構成になっています（※不要なUtilitiesは除外して軽量化を推奨します）。 | 構成要素 | 説明 | 実例 | | --------- | ---------------------- | ---------------------------------------------- | | Layout | レイアウトに関する設定 | グリッドシステム、コンテナ、ブレークポイント | | Content | コンテンツに関する設定 | フォント、画像、テーブル（表） | | Form | フォームのパーツ | 入力フィールド、チェックボックス、ラジオボタン | | Component | コンポーネント（部品） | ナビゲーションバー、カード、ボタン | | Helper | ヘルパー | スクリーンリーダー専用テキスト(※) | 各構成要素のコードの書き方等の ドキュメント | Bootstrap Documantation ### スクリーンリーダーとアクセシビリティ スクリーンリーダーは視覚障がい者が画面上のテキストを音声で読み上げるためのソフトウェアで、ほとã

1‚“どのディバイスに標準搭載されています。ウェブアクセシビリティに対応していないことを理由に訴訟が増加しています。アメリカでの、年間 4,000 件以上に上ったと報告されています。 引用 : 米国で「ウェブアクセシビリティ訴訟」が年間4000件にも Bootstrap おすすめポイント: コンポーネント（部品化）の概念が学べる Bootstrap の素晴らしいところは、コンポーネント（部品化） の概念が学べることです。 2020年前後、CSS 設計という概念がもてはやされました。 CSS を HTML のパーツ、たとえば小さなコンポーネントでいうとボタンが挙げられます。ボタンはたいてい、テキスト（ラベル）、矢印などのアイコン、それらを梱包するラッパーなどで構成されています。 Bootstrap でもいかにもボタンなボタンが提供されています。みなさん、見覚えありませんか？ 見覚えがあるということは、Bootstrapが幅広く使われているということです。昔、会計ソフトの Freee を使っていた時、あからさまにBootstrapだなぁと思いつつ使っていました笑 Bootstrap おすすめポイント: デフォルトだとクソ重い？でも必要なものだけ取り出して使えばいいじゃないか！！ Bootstrap の最大のデメリットは、「全部入り」で読み込むととにかくファイルサイズが重いことです。 さらに、かつてのBootstrapはJavaScriptがjQueryベースだったためモダンな開発と相性が悪かった（※v5以降でようやく脱jQueryを果たしましたが、それでもコンポーネント用の巨大なJSは残ります）。 「パッケージマネージャーとか難しすぎて無理！」という黒い画面が苦手な人はどうするのかって？ 無理して戦わず、STUDIOなどのノーコードツールを使うか、生成AIに丸投げするのが大正解ですよ！ 現代は Vite や Next.js、Astro といった強力なビルドツールが最初からSassのコンパイルエンジンを内包しているので、プロジェクトのメインSassファイルに以下のように必要なモジュールだけをインポートすれば、自動的に超軽量な Bootstrap がビルドされます。 Download Source files | Bootstrap 必要なものだけ呼び出せば、コードを軽量化できます。 ※ Dart Sass 形式で記述しています。環境下に応じて記載方法を変えてください。 Dart Sassに関する記述方法については次の記事を参考にしてください。 柔軟にカスタマイズしたいなら Tailwind CSS CSSのコンポーネント（部品化）からユーティリティ（実用性）ファーストブームの火付け役 Tailwind CSS のご紹介です。 Tailwind CSS Tailwind（追い風）とな。CSS学習にかまけずにとっととこれを使って開発しろってことでしょうね。 ユーティリティの概念を理解するのに少しコツがいりますが、近年爆発的に人気で需要も高いです。柔軟性を考えると習得しておいて損のないフレームワークです。 ひたすらブロックを積み上げるかのようにユーティリティを組み合わせ、スタイルを構築します。 Bootstrapなどのコンポーネント主体なフレームワークだと、どうしてもデザインにその特徴（Bootstrap臭）が隠しきれない。 そんな時は、ユーティリティクラスを使うことでオリジナリティの主張を邪魔しません。 ユーティリティクラスを例えるなら「もんじゃ焼き」が近いかも。ベースに具材（クラス）を追加することにより、自分好みの味にカスタマイズできますよね？ もんじゃ: イカ+モチ+ホタテ+ベビースター+チーズ+ネギ+イカ天+エビ Tailwind: もんじゃ しかしご注意。柔軟性が高いということは諸刃の刃。デザイン力が乏しい方が使うととてつもなくダサくなる こともあります。 デザインに自信がない人やサクッと作りたい人は、迷わずBootstrapを使いましょう。 気軽に始める方法は、CDN経由で読み込む方法です。2026年現在の最新版（v4以降）では、ブラウザで直接動的にコンパイルする軽量なスクリプトが公式提供されています。 text-3xl: フォントサイズ1.875rem（約 30px） font-bold: フォントウェイトbold underline: 文字装飾下線 たとえば、Tailwind CSS で Bootstrap の primary のボタンを作りたい場合、次のようなコードで再現できます。 はぁ……、これは流石に付与するクラスが多すぎ涙。 そんな時は、CSS側で @theme やカスタムユーティリティを定義して整理できます。（※なお、Tailwind v4以降は @apply の多用を避け、コンポーネント化するかインラインでそのまま書くスタイルがパフォーマンス面からも推奨）。 Tailwind CSS おすすめポイント: チートシートがあれば脳死状態でコーディングできる Tailwind CSS の習得には一般的には学習コストがかかると言われていますが、問題なし。チートシートやプラグインを活用すれば余裕です。 ユーティリティの概念を理解するのに難しく考えてしまう人が多いんやろうね。みんなレã

1‚´ãƒ–ロックだと思って遊べ。 Tailwind CSS 日本語チートシート シェアの多いエディタ VS Code にもいくつか Tailwind CSS 用のコーディングを強力にサポートするプラグインがあります。 | プラグイン名 | 簡単な説明 | リンク | | ------------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | Tailwind CSS IntelliSense | Tailwind CSSのクラス名を自動補完し、ドキュメントを表示。 | Tailwind CSS IntelliSense | | Headwind | Tailwind CSSのクラス名をアルファベット順に並べ替える。 | Headwind | | PostCSS Language Support | Tailwind CSSを含むPostCSSの構文をサポート。 | PostCSS Language Support | | Prettier - Code formatter | Tailwind CSSのクラス名を含むコードを自動的に整形。 | Prettier - Code formatter | これで初学者でも安心！！ Tailwind CSS おすすめポイント: 爆速新エンジンでビルドサイズを極限まで削減 ここから少し実務向けのお話です。 「膨大なクラスを読み込むからファイルサイズが重くなるのでは？」と心配になりますよね。 現在のTailwindは、使用しているクラスだけを自動検出して最小限のCSSを生成する仕組み（JITコンパイル）が標準搭載されているため、最初から超軽量です。 特に2026年現在の最新バージョン（v4.0）では、Rust製の新コンパイラ「Oxide」が全面採用され、ビルド速

1度がこれまでの数倍〜数十倍へとバケモノ級に進化しました。 実を言うと、このブログ「銀ねこアトリエ」を古いGatsbyからNext.jsへ移行した際、わずか7日間という超短期間で全ページを完全移行できたのは、このTailwind CSSのおかげ。 コンポーネント指向のJavaScriptフレームワーク（React/Next.jsなど）とTailwind CSSの相性は文字通り最高です。別ファイルにある重いCSSやSassの設計に悩まされることなく、HTMLコンポーネントの中でスタイルが完結するため、実務における開発効率は異次元レベルで跳ね上がります。 当ブログのNext.js移行がたった7日で完了した裏側には、このTailwind CSSの圧倒的なスピード感がありました！ なお、現在のモダン開発（ViteやNext.js、Astroなど）では、自分でPostCSSや tailwind.config.js などの面倒な設定ファイルを何枚も書く必要はなくなりました。安全で高速なパッケージマネージャー pnpm を使い、プロジェクトにパッケージを追加するだけで、ビルドツールが自動的に超爆速なコンパイル環境を整えてくれます。 手動で完全にローカルのビルド環境（JIT環境）を構築する場合は、以下のようなシンプルなファイル構成になります。 まずはプロジェクトのディレクトリで初期化を行います。 次に、2026年の標準スタックである pnpm を使って、必要なモジュールをインストールします。（v4以降はPostCSSプラグインが公式に統合されたため、これだけで動作します）。 プロジェクト直下にPostCSSの設定ファイルを作成し、Tailwindプラグインを登録します。※v4からは個別の tailwind.config.js は原則不要。 Tailwind CSSのエントリーポイント（読み込み口）となるファイルを作成し、次の1行を追加します。 package.jsonのスクリプトにPostCSSのビルドコマンドを追加します。 あとは以下のコマンドを叩くだけで、必要なクラスだけが抽出された超軽量な style.css が爆速で書き出されます！ 有名サービスがこぞって使うプロ並みのサイトを構築できる Foundation プロ顔負けのデザインを構築したいなら、Foundation がオススメです。 Foundation は、日本語で「土台」や「基盤」という意味でウェブ開発の基盤となる強力で柔軟なフレームワークを提供するというコンセプトで開発されてきました。 コンポーネントの概念を取り入れたCSSフレームワークなので、個人的には リッチな Bootstrap というイメージです。 Foundation クリエーターおなじみ、Creative Cloud も実は Foundation 製です。 National Geographic SUBARU Adobe Creative Cloud その他多数 Foundation の構成要素は9つからなり、Bootstrap（構成要素は6つ） と、より複雑 です。 Foundation の威力を発揮させるには、これらのコンポーネント同士を組み合わせること。リッチなウェブサイトを独自に構築したいのであれば、学習コストがどうしてもかかってしまいますが、その分柔軟で強力なデザインができます。 | 構成要素 | 説明 | 実例 | | ---------- | ---------------------------------------------------------------------------------------------- | ------------------------------------ | | General | 基本的なスタイルと設定 | ベーススタイル、グローバル設定 | | Utilities | 余白、テキストの位置などのユーティリティクラス | 余白の調整、テキストの位置調整 | | Typography | 見出し、段落、リストなどのタイポグラフィ関連コンポーネント | 見出し、段落、リスト | | Controls | フォームコントロール、ボタン、入力フィールドなど | フォームの入力フィールド、ボタン | | Navigation | ナビゲーションバー、ドロップダウンメニュー、タブなどのナビゲーション要素 | ナビゲーションバー、メニュー、タブ | | Containers | グリッドシステム、カードなど、コンテンツを整理するための要素 | グリッド、カード、コンテナ | | Media | 画像、ビデオ、オーディオなどのメディア要素 | 画像、ビデオ、オーディオ | | Plugins | モーダル、トースト、ドロップダウンなどのJavaScriptで拡張されたインタラクティブなコンポーネント | インタラクティブなモーダル、メニュー | | Libraries | フレームワークのコアライブラリと拡張ライブラリ | コアライブラリ、拡張ライブラリ | Foundation コンポーネントの一覧 CDN を使って気軽に始めることができます。 実際、コンポーネントを組み合わせてサクッとサイトを構築してみました。 ナビゲーションバー ヒーロー カードレイアウト フッター リッチなウェブサイトを独自で構築は難しくてもライブラリから、豊富なテンプレート（Webサイトの土台）とBuilding Blocks（Webサイトの部品）を使えば、たいして学習コストをかけずにWebサイトを構築することができます。 Foundation おすすめポイント: テンプレートを利用してサクッとサイト構築 お気に入りのテンプレートを使うだけですぐにWebサイトを構築できます。Bootstrap にもテンプレートはありますが、Bootstrap 臭が隠せないです。 Foundation 5 HTML Templates こちらは marketing のテンプレートに少し手を加えたものです。構築に 3 分もかかりませんでした。 色や画像なã

1©ã‚’差し替えれば、もっとオリジナリティが増します。 ダウンロードしたテンプレートは、プレースホルダー画像（ダミー画像）がリンク切れを起こして表示されない場合があります。 そんな時は、HTMLファイル内の画像URLを以下のように置換すると、2026年現在でも安定して画像が表示されるようになりますよ。 Foundation おすすめポイント: Building Blocksからお好きな部品（コンポーネント）をちょい足しする Building Blocksとは、FoundationのUIコンポーネントのライブラリです。 Building Blocks これらのHTML、CSS、JSスニペットは、Foundationのプロジェクトにカンタンに組み込むことができます。 たとえば、次のスクショのような右のヒーローエリアに組み込むフォームを設置したい場合。 必要なパーツだけ取ってきて使うこともできます。 まとめ・基本は Bootstrap か Tailwind CSS を抑えて、個性を出したい場合は Foundation を拡張 今回2025年現在、人気のCSSフレームワークを比較してみました。 個人的には初学者は日本語のリファレンスも豊富な Bootstrap と Tailwind CSS を学んでおけばいいのかなぁという感想です。 熟成されたCSSフレームワークを使うと、コンポーネントとユーティリティファーストの概念のメリット・デメリットを理解できたりとめちゃめちゃ勉強になります。 初学の枠から出たくなったら、Foundation などのリッチなフレームワークに手を出すのが良さそうですね。 ついでに最近仕事していて、感じたこともシェアしておきます 最近仕事で納品されたフレームワークを用いたコードを取り扱うことがありましたが、ブレークポイントが変わるとめっちゃ崩れてました。笑っちゃいけないけど笑。 ここでの教訓を一つ フレームワークを利用するにせよ、CSSの基本の「キ」が分かってないと起こる問題があります。表面だけでフレームワークを使ってるから大丈夫と過信すると思わぬ表示崩れが発生していることもあります。 すでに調整されたフレームワークだからと、過信せずに基本のブラウザごとのデバックを怠ってはいけません。 そんな思いもあり、この記事を書きました。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。 おまけ・CSSフレームワーク早見表 他にもフレームワークは多数あるので興味ある人は他のものも見てみてください。 | フレームワーク | コンポーネント度 | ユーティリティ度 | 柔軟性 | 特徴・2026年現在の立ち位置 | | -------------------------------------------- | ---------------- | ---------------- | ------- | ------------------------------------------------------------------ | | Bootstrap | ★★★★ | ★★★ | ★★★★ | 圧倒的な知名度。v5以降脱jQueryを終え、最も手堅い選択肢。 | | Tailwind CSS | ★★★ | ★★★★★ | ★★★★★ | 現代の業界標準。最新のv4ではコンパイラがRust製になり爆速化。 | | Bulma | ★★★★ | ★★★ | ★★★ | JS不要、CSSのみで動くシンプル設計。初学者に今でも人気。 | | Ant Design | ★★★★★ | ★★ | ★★★★ | React/Vue用の超巨大コンポーネント集。社内ツール制作の覇者。 | | UIkit | ★★★★ | ★★★ | ★★★★ | 軽量かつ多機能。洗練されたインタラクティブなUIをサクッと作れる。 | | Pure.css | ★★ | ★★★ | ★★★★ | Yahoo!製。極小サイズでグリッドと最小限のフォーム部品だけを提供。 | | Milligram | ★★ | ★★ | ★★★★ | 超軽量（わずか2KB）。ミニマリズムを追求する個人開発に最適。 | | MVP.css | ★ | ★ | ★★★ | HTMLタグを書くだけで自動で綺麗になる「クラス不要（No-Class）」系。 |","noindex":false},{"slug":"entry545","title":"use / forword / 組み込み関数 Dart Sass 便機能徹底ガイド（Gulp タスクサンプルコード(postCSS)付）","date":"2025-02-26","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbn

1ail/2025/entry545.webp","description":"CSSが進化し、コーディングがかつてないほど便利になった現在。Sass(SCSS)を活用し、パーツをコンポーネントとして管理するのに重宝。5年以上前からSassを愛用し、Gulpを仕事に取り入れることで作業スピードが劇的に向上。このガイドでは、Dart SassとpostCSSの環境設定や、@use と @forword の使用方法をまとめ、テキストフォーマッターの実装について解説。Dart Sassは公式が推奨する実装方法で、LibSassの利用が非推奨となったため新規プロジェクトには必須のツール。Node-sassの開発停止を受け、最新のSassの使用方法をおさらい。","tags":["SASS","CSS","Gulp"],"body":"CSS も入れ子で書けるようになり、コーディングも昔では考えられないくらい便利になりました。 とはいえ、私にとっては SASS(SCSS) もパーツをコンポーネントとして管理する際に便利なので、まだ現役で使っています。 私は 10 年くらい前から SASS が出回り始めた頃からの愛用者で、Gulp を仕事に取り入れることで作業スピードが爆上がりしました。なので、とても思い入れがあります。 そして SASS(SCSS) を使えば、コードの見通しが良くなります。 そんな SASS(SCSS) も提供側の都合（良い意味でも）で、仕様変更が起こりました。 Dart Sass は、Sass の公式が推奨している実装方法。新規プロジェクトではその使用が推奨(2020 å¹´ 10 月に LibSass の利用が非推奨になったため)。 Node-sass（Node.js で Sass をコンパイルするためのツール）の開発が停止 @import が廃止され、@use や @forword が推奨 今回やりたいこと。 @use や @forword のなどの Dart Sass の使用方法のおさらい Dart Sass と postCSS の環境作成まとめ テキストフォーマッター実装 Dart Sass の LibSass や Node Sass との違い 1. モジュールが使える Dart Sass 1.23.0 よりモジュールシステムの @use、 @forward が導入されました。これにより、コードのモジュール化と再利用がカンタンに。 2. 変数にNullが入れられる 変数が未定義の場合に null 値を持つことができ、条件付きのスタイルやデフォルト値を使用する際の柔軟性。 3. 多くの組み込み関数 多くの組み込み関数があり、色の操作、数学的演算、リストやマップの操作がカンタンに！ 4. @useでデフォルト値を上書きできる @use でモジュールのデフォルト設定を上書きできます。 5. 厳密性 厳しいけどバグを減らすことができる。平たく言うと、変な順番で書くなどバグを仕込むような書き方するとと怒られる。 その他、高速にコンパイルも高速で全てのSass仕様に完全に準拠、新しいCSS機能や構文にも割と対応しています。 Dart Sass の記述方法を徹底解説 @use : 他のファイルの内容を使う @forward: 他のファイルの内容をさらに別の場所で使う たとえばこんなファイル構造だった場合。 Dart Sass @use の使い方 @use で mixins.scsss （mixinをまとめたファイル）や variables.scss （変数をまとめたファイル）をそれぞれ読み込んで使う方法をご紹介します。 Node Sass（またはLibSass）ではファイルに、たった一回これらのファイルを @import で読みこめばけばどこでも使い回すことができました。 Dart Sass では React のように毎度使うファイルのトップレベルに @use で読み込む必要があります。 React のファイル構造を想像したら理解がしやすいです Dart Sass の場合、@use で呼び出したファイルの mixin や変数を使いたい場合は file名 + 変数 or mixin となります。 moduleJS（JavaScript） のように as を使ってさらに記述を簡素化できます。たとえば、_utils.scssに変数やmixinをまとめたファイルをそれぞれ呼び出します。 as を使って 名前をエイリアス化 すれば Node Sass などとと基本の記述方法は何ら変わりませんね！！ Dart Sass @forward の使い方 @forward は、大規模なSassプロジェクトで特定のモジュールを複数のファイルで共有したい場合に特に役立ちます。 普段は使わなくてもいいかなーと思っています。 @forward を使ってコンポーネントをまとめることで、各ファイルで簡単に再利用できますし、スタイルを拡張する（たとえばボーダー追加など）もカンタンになります。 またファイル構造もまとまã

1‚Šã€ã‚³ãƒ¼ãƒ‰ã‚‚見通しが良くなります。 保守性が爆上がり!! \'sass:color\'（組み込み関数）で「色」を操作する 最近ではCSSのフィルターでめっきり登場機会が減りましたが、Dart Sass の組み込み関数で色を操作できます。 組み込み関数は Node Sass などでも使えましたが、あえて重複したものもご紹介していきます。 LibSassでもよく使っていましたが、こちらの例はバー時にボタンを暗くするコードです。色操作をするためには @use \'sass:color\' で組み込み関数を呼び出しておく必要があります。 もしくは、色の組み込み関数は utils にあらかじめ読み込み エイリアス化して使う こともできます。 その他、lighten（明るく） や invert（反転）もあります。この記事の最後に関数をまとめた表があるので、そちらを参考に。 CSSフィルターの記事はこちら。 標準搭載 \'sass:list\'（組み込み関数）で「リスト」を扱う Sass で強力な力を発揮するのは配列系じゃないでしょうか？ Sass のリストは、JavaScriptの1次元配列に似ています。 使い方は、for文などで回す時便利。 length や nth は標準で組み込まれているので、@use \'sass:list\' を呼び出す必要ありません。 @use \'sass:list\' で呼び出すケースとして、異なるリストを結合するjoin など、特定のリスト操作関数を使用する場合などが挙げられます。 Dart Sass で組み込み関数で「マップ」を扱う Sass のマップは、JavaScriptのオブジェクト(多次元配列)に似ています。 オブジェクト（多次元配列）同様、キーと値をセットにします。 具体的な例です。ブレークポイント用のメディアクエリの mixin を作ってみます。 厳格ではありませんがここでは 768px 以上をPC（タッチディバイスではない）とみなし、hoverアニメーションをさせます。 サンプルコードはこちら。 組み込み関数「IF」を扱う マップで紹介したメディアクエリのコードを改造して逆に max-widthの処理を追加してみます。ifも標準組み込み関数のため、呼び出す必要ではありません。 これで一つの mixin で、max-width 、 min-width しかも4つのメディアクエリサイズの切り替えコードを実装できます。 \'sass:selector\'（組み込み関数）を使ってselector操作を行いたい場合 JavaScript で class を付与&スタイルを操作したい場合コードが煩雑になるのが悩みのタネでした。 しかし、@use \'sass:selector\'を使えば簡潔に書けます。 たとえば画面をスクロールダウンするまではheaderは透明、それ以外は白にしたい場合。 selector.nestを使うことで、視覚的な入れ子がなくなることで、コードの見通しも良くなります。 出力されるCSSはこんな感じ。 またこんなカレンダーのラベルなどで色分けを行いたい時、スタイルの量産が必要な場合があります。 selector.append で特定のセレクタにクラスを追加して、ループでまとめて色分けしたスタイルを作ります。 ベースは プレースホルダーセレクタ（%） を使います。 プレースホルダーセレクタ を使うことでCSSをまとめることもできます。 selector.nest（セレクターをネスト）とselector.append（セレクターを追加）は記述方法がちょっと違う程度でできることは一緒です。 Use のコンフィギュレーション（@use + with でデフォルト変数を上書き） Dart Sass では @use で呼び出した変数のデフォルトを上書きできます。 @use のコンフィギュレーションは JavaScript や PHP でも使える Class に仕様が非常によく似ている、Dart Sass 特有の機能 です。 たとえばスタイルが全く同じだけど色が違ったり、マイナーチェンジしたスタイルを作りたい場合に使えます。 デフォルト値を変更してカラバリを作る。 mixin で引数を渡すより変更箇所がわかりやすく可読性も上がり、コンポーネントを保守しやすくなります。 Gulp で Dart Sass と postCSS の環境作成を作る では、Gulp で Dart Sass が使える環境を作ってみましょう。 package.json は module 形式で記述するのでこんな感じ。 package.json でどのブラウザに対応するか browserslist に明示的に指定しておきます。 意味は以下のとおり。 last 2 versions: 主要なブラウザの最新2バージョンをサポート > 2%: 世界中のユーザーシェアが2%以上のブラウザをサポート ブラウザのユーザーシェアは2025年時点では Chrome 67%、Safari 18%、Edge 5%、Firefox 2.5%、Samsung Internet 2%とのこと。 Gulp プラグイン(npm module)をインストール。 今回は次のモジュールを使いました。 | Gulp プラグイン | 説明 | | ------------------------ | -------------------------------------------------------------------- | | minimist | コマンドライン引数を解析するためのツール。 | | browser-sync | ブラウザのライブリロードを実現するためのツール。 | | gulp-replace | テキストやコードを置換するためのGulpプラグイン。 | | gulp-if | 条件に基づいてGulpタスクを実行するためのプラグイン。 | | gulp-plumber | エラーハンドリングを強化し、Gulpタスクの継続を可能にするプラグイン。 | | gulp-sass | Sass（SCSS）のコンパイルを行うためのGulpプラグイン。 | | sass | Dart Sassを使用してSass（SCSS）をコンパイルするためのライブラリ。 | | gulp-postcss | PostCSSプラグインを使用してCSSを処理するためのGulpプラグイン。 | | css-declaration-sorter | CSSの宣言をソートして整理するためのPostCSSプラグイン。 | | css-mqpacker | メディアクエリをまとめて最適化するためのPostCSSプラグイン。 | | autoprefixer | ベンダープレフィックスを自動的に追加するためのPostCSSプラグイン。 | | cssnano | CSSを圧縮して最適化するためのPostCSSプラグイン。 | | gulp-rename | ファイル名を変更するためのGulpプラグイン。 | パスと開発モード切替設定。 SASSのタスク。 コマンド実行（開発モード）。 コマンド実行（プロダクションモード）。 SASS テキストをフォーマットする SASS のインデントなどを自分で整えるのがめんどいのでフォーマッターを入れておきます。 イãƒ

1³ãƒ‡ãƒ³ãƒˆãŒä¹±ã‚Œã‚‹ã¨ã‚ã£ã¡ã‚ƒã‚¤ãƒ©ã‚¤ãƒ©ã™ã‚‹ï¼ï¼ Prettier で コードをフォーマットできるようにしておきます。 プロジェクト直下に、Prettier 設定用のファイル .prettierrc を置きます。 エディターが VScode であればプロジェクト用の setting.json にも設定しておけば、作業中正しいインデントが可視化できます。 コマンドからフォーマッターを実行できるようにする。 コマンド実行。 まとめ・Dart Sass も仕様を知れば怖くない 今回は Dart Sass を、かなり深堀りして解説させていただきました。 いくつかサンプルを書いていて感じましたが、SASS記法は単純に作業を楽にするだけでなく、コードの見通しをする（可読性アップ）のため 、コンポーネントの保守 にまだまだ非常に役立ちます。 多少学習コストはかかりますがまだまだ需要があると改めて認識しました。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。 おまけ・Dart Sass の組み込み関数 色の操作 | 名前 | 説明 | 使い方例 | | ------------ | -------------------------- | ---------------------------- | | adjust-hue | 色の色相を調整。 | adjust-hue(#3498db, 20deg) | | darken | 色を暗く。 | darken(#3498db, 10%) | | lighten | 色を明るく。 | lighten(#3498db, 10%) | | saturate | 色を鮮やかに。 | saturate(#3498db, 20%) | | desaturate | 色を淡く。 | desaturate(#3498db, 20%) | | grayscale | 色をグレースケールに変換。 | grayscale(#3498db) | | complement | 色の補色を取得。 | complement(#3498db) | | invert | 色を反転。 | invert(#3498db) | 算術演算 | 名前 | 説明 | 使い方例 | | ------------ | --------------------------------------------- | ----------------- | | percentage | 数値をパーセンテージに変換。 | percentage(0.5) | | round | 数値を四捨五入。 | round(10.4) | | ceil | 数値を切り上げ。 | ceil(10.1) | | floor | 数値を切り捨て。 | floor(10.9) | | abs | 数値の絶対値を取得。 | abs(-10) | | min | 最小値を取得。 | min(10, 20, 5) | | max | 最大値を取得。 | max(10, 20, 5) | | random | 1から指定した数値までのランダムな数値を生成。 | random(100) | リスト(一次元配列)の操作 | 名前 | 説明 | 使い方例 | | --------- | -------------------------------------- | -------------------------------------- | | length | リストの長さを取得。 | length(1px solid red) | | nth | リストの指定した位置にある要素を取得。 | nth(1px solid red, 2) | | set-nth | リストの指定した位置にある要素を設定。 | set-nth(1px solid red, 2, dashed) | | join | リストを結合。 | join(1px solid red, 2px dashed blue) | | append | リストに要素を追加。 | append(1px solid red, 2px dashed) | | zip | 複数のリストを結合。 | zip((1, 2), (a, b)) | マップの操作 | 名前 | 説明 | 使い方例 | | ------------- | ------------------------------------ | ---------------------------- | | map-get | マップからキーに対応する値を取得。 | map-get($map, $key) | | map-merge | 2つのマップを結合。 | map-merge($map1, $map2) | | map-remove | マップから指定したキーを削除。 | map-remove($map, $keys...) | | map-keys | マップの全てのキーを取得。 | map-keys($map) | | map-values | マップの全ての値を取得。 | map-values($map) | | map-has-key | マップに特定のキーが存在するか確認。 | map-has-key($map, $key) | 文字列の操作 | 名前 | 説明 | 使い方例 | | --------------- | ---------------------------------- | --------------------------------- | | quote | 文字列を引用符で囲む。 | quote(foo) | | unquote | 文字列の引用符を外す。 | unquote(\\"foo\\") | | str-length | 文字列の長さを取得。 | str-length(\\"hello\\") | | str-insert | 文字列に文字を挿入。 | str-insert(\\"hello\\", \\"world\\", 6) | | str-index | 文字列内のサブ文字列の位置を取得。 | str-index(\\"hello\\", \\"e\\") | | str-slice | 文字列の一部を取得。 | str-slice(\\"hello\\", 1, 3) | | to-upper-case | 文字列を大文字に変換。 | to-upper-case(\\"hello\\") | | to-lower-case | 文字列を小文字に変換。 | to-lower-case(\\"HELLO\\") | その他 | 名前 | 説明 | 使い方例 | | ------------------ | -------------------------------------------- | --------------------------------------- | | if | 条件に基づいて異なる値を返す。 | if(true, 1px, 0

1) | | unique-id | 一意の識別子を生成。 | unique-id() | | selector-nest | セレクタをネスト。 | selector-nest(\'.parent\', \'.child\') | | selector-append | セレクタを追加。 | selector-append(\'.parent\', \'.child\') | | selector-replace | セレクタを置換。 | selector-replace(\'.old\', \'.new\') | | selector-unify | セレクタを統合。 | selector-unify(\'.parent\', \'.child\') | | is-superselector | 一つのセレクタが他のセレクタを含むかどうか。 | is-superselector(\'.parent\', \'.child\') |","noindex":false},{"slug":"entry544","title":"PHPエラーログ（php_errors log）の出力方法！DockerでWarningを監視","date":"2025-02-22","modifiedDate":"2026-07-04","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2025/entry544.webp","description":"php_errors logの出力方法やphp warningの監視手順を解説。Docker開発環境をベースに、エラーログが出ないトラブルを確実に解決し、リアルタイムでエラーを追跡できる現実的な手順をスマートにまとめました。","tags":["Docker","PHP","コマンド"],"body":"Webサイトの構築や開発を進める中で、意図しないPHP Warning（警告）が発生して焦った経験はありませんか。どこでエラーが起きているのかログを確認したいのに、肝心の出力設定が分からず修正の手が止まってしまうのはきわめて非効率的です。 PHPのエラーログ（php_errors log）を確実にキャッチし、リアルタイムで監視する仕組みさえ整えれば、バグの原因特定は一瞬で終わります。 この記事では、Docker（Nginx、PHP-FPM、MariaDB）環境をベースに、php.iniの設定からエラーログの出力・リアルタイム追跡までの現実的な手順を解説します。 この記事でわかること php_errors logを確実に出力させるphp.iniの設定 開発を楽にする、よくあるPHP Warning（警告）の発生原因と対策 tailコマンドを使ったリアルタイムなwarning logのモニタリング方法 インフラやサーバーの複雑な知識がなくても、手順通りに進めるだけで自分のコードのエラーを100%コントロールできる快適な開発環境が手に入ります。 （※この記事は、Docker で本番環境に忠実な開発環境を作るで作成した環境をベースに、ログ設定をピンポイントで確認・最適化する手順をお届けします。すでにDocker環境がある方は、そのままお手元の環境に置き換えて実践してください） この記事の対象者 自分のコードのエラーやwarning logを確実に確認・監視したい php_errors logが出力されなくて困っている Docker環境でスマートにリアルタイムログを追いながら開発を進めたい php_errors logの出力確認！php warningを確実に捕捉する方法 前回は、PHPエラーをログに残せる設定をコンテナ内に追加したところまでやりました。 エラーログを確認してみましょう。わざとエラーを発生させる、error_test.php 作成します。 よくあるPHPの警告を意図的に発生させてみましょう！ 未定義変数の使用し、配列でないものへのアクセスの確認した場合。 PHP Warning: Trying to access array offset on value of type bool PHP Warning: Undefined variable $undefined_variable 他にもPHP Worning はあります。一般的なものを紹介しておきます。 | PHP Warning | 説明 | | ------------------------------------------------------- | --------------------------------------------------- | | Division by zero | 0で割ろうとした場合。 | | Invalid argument supplied for foreach() | foreach ループに対して無効な引数が渡された場合。 | | arraymerge(): Argument #x is not an array | arraymerge 関数に配列でない引数が渡された場合。 | | Cannot modify header information - headers already sent | header 関数が呼び出される前に出力が行われた場合。 | warning logを逃さない！リアルタイムでエラーを監視・追跡する リアルタイムでモニターしながらも開発できます。 コンテナに入り、logファイルの変更を監視します。tailコマンドはファイルの末尾の変更を監視するコマンドです。 全部文字が白くてわかりづらいですね。 特定のエラー文字を検索して色を付けることもできます。 モジュールの追加などコンテナーの設定をし直したい場合 PHP モジュールの追加などコンテナーの設定をし直した場合は、コンテナを再構築する必要があります。 一度構築したコンテナを再構築するにはdocker-compose up --build -dを使います。 まとめ：php_errorに怯えなã

1„！ログを追いながら進める現実的な開発環境 本番環境に忠実な開発環境を準備のは基本です。 私もインフラやサーバーは苦手だから徹底的に調べつくしたり勉強するのは今まで避けてきました。 今回この記事を書くことで Docker への理解がより深まりました。副作用として、サーバーやPHP、MariaDBのこともかなり理解できました。 今回勉強になりとても良い経験になりました この記事がみなさんのコーディングライフの一助と慣れば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry543","title":"Docker で本番環境に忠実な開発環境を作る（nginx、PHP-FPM、MariaDB）","date":"2025-02-20","modifiedDate":"2026-03-20","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2025/entry543.webp","description":"サーバー・インフラの知識がなくても、Dockerを使用して本番環境に忠実に作成する手順を解説。docker-compose.yml のコードを中心に、サーバー（nginx）、PHP（PHP-FPM）、データベース（MariaDB）のコンテナを順を追って作成。この記事は PHP Warning を修正したいのにエラーを見ることができず、修正できたかわからない状況に陥ったことをきっかけに執筆。","tags":["Docker","PHP","コマンド"],"body":"せっかくローカル環境で開発したのに、本番環境のサーバー、PHP、データベースバージョンや種類が違うため使えていたメソッドが突然使えずエラーはいて、結構困ることがあります。 特に、wordpress:latest などの出来合いの Docker イメージを使うと PHP Warning のような軽微なエラーが表示されないこともあります。 今回は Docker を本番環境に忠実に再現し、エラーを開発の段階で取り除けるような環境を構築します。 記事が長くなってしまったので前半は、Docker を本番環境に忠実に作成する手順 を解説し、後半では実際のエラーを出力できるようにしログを出力する方法を解説しています。 この記事の対象者 サーバー・インフラのことはあんまりわからない 自分のコードのエラーが確認できる環境を構築したい Dockerをイチから作ってみたい 本番環境と開発環境で使うサーバー、PHP、データベースの種類やバージョンを厳格に揃えたい インストール方法はこちらを参考にしてください。 docker-compose.yml ファイルの準備 YAML（YAML Ain\'t Markup Language）は、人間が読みやすく、書きやすいデータフォーマットのこと。インデントによって構造を表現するため、見た目がシンプルで分かりやすいですよね！ コンテナの構成です。 Docker では、コンテナの外部にデータを保存できます。この領域のことを「ボリューム」といいます。たとえば、データベースコンテナのデータをボリュームに保存することで、コンテナが停止したり削除された場合でも、データを保つことができます。ボリュームを使用することで、カンタンかつ安全にデータの保存ができます。 サーバー（nginx） のコンテナを作る 今回は本番と一緒の Nginx（エンジンエックスと読みます） というサーバーを使いました。 バージョンも本番と同じ 1.25.5 とします。 他のバージョンが使いたい人は、Nginx - Official Image | Docker Hubを参考に。 Dockerのネットワークは、コンテナ同士や外部ネットワークとの通信を管理するための仕組み。ここでは、Bridgeネットワークをセットし、同じホスト内のコンテナ間通信を可能にしておきます。 サーバーの設定ファイルを作ります。 nginx.conf は Apache でいう httpd.conf に相当します。そして、 Nginx では .htaccess は使わないので、リダイレクトの設定などある場合はすべてnginx.conf に記載します。 Nginx (nginx.conf) グローバル設定 イベント設定 HTTPサーバーブロック リバースプロキシ設定 各仮想ホストやサービスの設定ファイルのインクルード Apache (httpd.conf) グローバル設定 モジュールのロード ディレクトリとファイルの設定 各仮想ホストやドメインの設定 コンテナを起動。 コンテナに入りちゃんと設定が反映しているか確認します。 Nginx のバージョンを確認。 date コマンドでタイムゾーン反æ

1˜ ã—ているか確認してみましょう。 空でもいいので index.htmlファイルを作成し、public/ディレクトリへ格納にします。 http://localhost:8000/ にアクセスできれば成功です。 PHP（PHP-FPM） のコンテナを作る PHP-FPM（PHP FastCGI Process Manager）のコンテナを作ります。 PHP-FPM は PHP を効率的に実行するので、特に高トラフィックのウェブサイトでパフォーマンスを向上させます。 PHP用のコンテナーの設定。 Dockerfile で必要なモジュールをインストールします。 php.ini にPHPのエラーをログを残せる設定の記述をします。 ここではあえて display_errors = Off とし、ページへアクセスしたとき画面に表示させません。 コンテナを再起動します。 コンテナに入って各設定が反映しているか確認します。 PHP（PHP-FPM）もバージョン確認。./docker/php/Dockerfile で設定した PHP 8.2.27 が入ったことを確認できました。 Dockerfile 経由でPHPモジュールの vim と imagick をインストールしたので、それぞれインストールされているか確認します。 cat コマンドで php.ini が反映されいるか確認。 ファイルパスがわからない場合は、php --ini コマンドでPHPが使用している設定ファイル（php.ini）から探すこともできます。 public/ ディレクトリに index.php を置いてみましょう。http://localhost:8000/ にアクセスできたら成功です。 データベース（MariaDB） のコンテナを作る ここでも本番環境と一緒の MariaDB でバージョンも合わせたものを使います。MariaDB は MySQLのフォーク（派生）として誕生したのもあり、MySQLと互換性があります。 MariaDB Docker Hub イメージ データベースがリストア（取り込まれる）されるのを確認するために適当なダミーデータを用意します。 コンテナを再起動します。 ./docker/db/init.sql のダミーデータが反映されているか確認します。MadiaDBのコンテナに root ユーザーとして入ってみます。ここでは、次の MYSQLROOTPASSWORD に設定しておいた rootpasswordが root ユーザーのパスワードとなります。 ログイン成功したらこんな感じです。 インストールした MariaDB のバージョンを確認します。 データベースが反映しているか確認してみましょう。 テーブルが反映しているか確認。 テーブルもバッチリ反映していますね！ ./docker/db/init.sql を置いたディレクトリに ibbufferpool というファイルが生成されます。InnoDBストレージエンジンによって使用されるデータベースの一部です。このファイルは、データベースのパフォーマンスを向上させるために使用されるキャッシュに関する情報が格納されているだけなので、基本ノータッチで大丈夫でã

1™ã€‚ まとめ・WordPress などの開発でも気を抜かず本番環境に忠実な開発環境を準備する 今回は初心者でもとっつきやすいよう丁寧に説明しました。 最後までお読みいただきありがとうございました 続きはこちらです！ この記事がみなさんのコーディングライフの一助と慣れば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry542","title":"gatsby-plugin-sitemap で noinde(クロール非対象記事) を排除した sitemap.xml を出力","date":"2025-02-16","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2023/entry519.webp","description":"noindex の Markwown で書いた記事のサイトマップを動的に管理したいと思いロジックを考えました。sitemap.xml 出力自体は gatsby-plugin-sitemap で出力、フィルタリングは GraphQL で行います。この度のチップスはぶっちゃけ多少力技ですが、公式通りにやるとコケたので参考にしていただければ幸いです。","tags":["Gatsby","React","JavaScript"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 最近、サイトマップ（Googleにページの所在を知らせるfile）と noindex(非クロール対象ページ) されているが一致しないサイトに遭遇しました。 検索エンジンへ送信される SEO 情報の中で誤りがあるとペナルティを食らう要因にもなりかねないので、このサイトも早速見直すことに。 このブログは Gatsby という、そこそこマニアックなSSG（静的サイトジェネレーター）製です。サイトマップはgatsby-plugin-sitemap という atsbyのオフィシャルプラグイン（いわゆる WordPress のプラグインみたいなもの）を使って出力していました。 Gatsby 公式サイト 導入当時はデフォルトで簡易的な機能しか使っていなかったので、手動でサイトマップから外したいページを必要に応じて追加していました。 今回やりたいことはざっとこんな感じです。 1. クロール非対象記事かは 記事ごとの MarkDown ファイル で判定する。 2. noindex の meta タグ自体は Gatsby の Head (旧 Helmet )を利用して、head に埋め込こむ 3. MarkDown の情報を gatsby-config.js に設定した gatsby-plugin-sitemap の中で取得して sitemapxxx.xml fileに出力する。 gatsby-plugin-sitemap の公式サイト通りにやってうまくいかなかったです。最近忙しくて当たりどころがなく、夜な夜なコード書いて発散しています。多少力技ですが、参考に指定ただければ幸いです。 前提条件として、Gatsby Blog Starter を使っています。あとは、JS、React が多少分かれば(多分)どうにかなるかと。 frontmatter に noindex が登録できるようにする まずは frontomatter に noindex というフィールドを付与して、true / false で判定できるようにします。 ここでは完全に True/False で判定できるようにしたいので、入る値は Boolean に限定します。 noindex の meta タグ を動的に埋め込む クロール非対象記事は、 Head (旧 Helmet )に埋め込みます。Gatsby Blog starter には src/components/seo.js という JS file が梱包されています。このコンポーネントを使って head タグ内で諸々の情報を出力可能とします。 まずはページやテンプレートにコンポーネントとして呼び出し、出力したいページ情報を渡します。 たとえば、ブログ記事のテンプレート head タグ内に noindex のタグを追加したい場合は次のようになります。 こうすると、引数で取得した data 内に noindex の情報が格納されます。 Seo コンポーネント側の設定は次のとおりです。 記事（MDファイル）ごとの情報を gatsby-config.js 経由でサイトマップ(sitemap.xml)として出力する gatsby-plugin-sitemap でXMLを書き出します。 プラグインのオフィシャルサイトのサイトの以下コードを参考にしました。 resolveSiteUrl でURLを取得する必要があったã

1®ã§ã™ãŒã€ç‰¹ã«ã¡ã‚ƒã‚“とドメインやプロトコルが付与されてしまいます。 何じゃそりゃと思ったので、resolveSiteUrlの処理を削除すると怒られる。バージョンに依存する可能性がありますがそこまで調べてないのですみません…。 多分意味ないし機能しないのだろうと重々承知で、エラー吐くので無意味な resolveSiteUrl のコードを追加し、中にテキトーだけどエラー吐かなさそうな値を返すようにしました。 すべてのページは query で allSitePage で取得可能。ただし、allSitePage は MarkDown 内の frontmatter の情報は含まれない。 そこでさらに、query で allMarkdownRemark の noindex: true のみの投稿を取得し。allSitePage の重複するものを削除することにしました。 今回ご紹介するプログラムは、単なるコピペで解決しないかもしれないので、皆さんの環境に応じてください。 sitemap.xml は投稿によってクロール頻度や優先度を次のとおり設定します。 | 種類 | クロール頻度 | 優先度 | | ---------------- | ------------ | | トップページ | daily | .7 | | 一覧や個別ページ | weekly | .3 | | ブログ | weekly | .7 | まとめ・SEO 情報はガイドラインに沿う 今回コード生成にAI使ったけどイレギュラーに弱いなあと…。 今回、なれないロジックを組むことが多かったã

1®ã§ãƒ­ã‚¸ãƒƒã‚¯ã®ç”Ÿæˆã«AI（Copilot）使いました。バグやイレギュラーに弱くてめちゃめちゃ時間かかりました。 もう、夜中3時やで笑ゆうても死ぬほど便利！！！超ストレス発散になってます。 AI 使うにあたってエンジニアにとって大切なことはこんな感じ。 ミクロ（細分化して）に実行させること AI のいうことを鵜呑みにしない エラー数回（2、3回）が続くようなら、あっさり手法を切り替える 適宜ググる 以前なにか調べていた時、AIの回答と 0 が 一桁違たのでびびりました。 たまに腰抜かしそうな嘘もつくのを、あらかじめそれを肝に銘じて使うべきかなあと。 基本的には AI 便利すぎです。 この記事が皆さんのコーディングの一助となれば幸いです。 基本的には大多数に読まれるより、たった一人でもいいのでめっちゃ熟読してほしいので… 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry541","title":"Copilot を利用して JS(Gulp＆Mocha) テストコードを書く","date":"2025-02-02","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2025/entry451.webp","description":"お客様に高品質のプロダクトを届けたい！！！Microsft Colilot （副操縦士）を利用してJSのテスト（ユニットテスト）コードを生成。バグの早期発見、コードの理解と修正が簡単になるなどメリットが満載です。本日は具体的なテストのやり方をまとめます。","tags":["npm","Gulp","JavaScript"],"body":"copilot は Microsft が提供数する AI (アシスタントツール)です。今回はその colilot （無料枠）を利用してテストコードを書いたことを記事化しました。 Generative AI コパイロット（Microsoft Copilot）は、Microsoft社が提供するAIアシスタントツールです。 ユーザーの質問やリクエストを理解し、直接応答する 文章作成を支援する 画像を作成する メールやWord文書作成などの作業負担を軽減する ユニットテストとは、プログラムを構成する最小単位（モジュール）の機能が正しく動作しているかどうかを確認するテストです。単体テストとも呼ばれます。 バグを効率的に発見する コードの理解と修正を容易にする 迅速な変更をする 大切なのはモジュール化 で、単体単位でトラブルを回避できることが重要です。大森林の中で特定の木の問題を探すより、自宅の庭に生えている木の問題を探すほうが簡単ですよね？ この例え話は自宅の敷地が広い人は対象外です！！ 範囲が狭ければ狭いほど問題も探しやすくなります。それでは、行ってみましょう！ 今回の対象者 JS でテストしたい JS のバグを早期発見したい 予期しないバグを事前に取り除いておきたい ある程度JSやプログラミングのロジックを理解していてコードが書ける ESモジュールで記載できる この記事でやっていることを試してみたい方で、 copilot のアカウントがない方は、こちらから登録をお願いします。 Microsft Copilot 環境構築(Gulp＆Mocha) インストールするモジュール。 gulp gulp-plumber gulp-mocha gulp-notify 開発環境に適宜必要なnpmモジュールをインストール。 テストファイルは見ての通り、./src/test/ に格納します。 テストの script をpackage.jsonに追記。 テストファイルの設定 今回は以下記事のように、Browserify + Browserify + Babel で作った環境だったのでいくつか別にモジュールを入れました。 この設定をした理由は、最小単位（Module）でデバッグを行いたかったからです。そのほか、ESモジュールをトランスパイル（CommonJSをソースコードへ変換）したことも起因しています。 もう時代的にはこの設定は必要ないのでまたこの記事も後日見直します。 @babel/core @babel/register @babel/preset-env @babel/plugin-transform-modules-commonjs babel でトランスパイルしたファイルのテストが通るように、プロジェクトのルートに .babelrc ファイルを作成。 テストファイルの上には必ず上記を記載。 実際のcopilotでのプロンプト（AIに尋ねる）の進め方 今回はテスト用のライブラリとしてMochaを採用しました。 JSテストライブラリはいくつかあるので、適宜調べて自分にあうものを使ってみてください。 慣れないうちはコードを投げてテストコードを提案させる 慣れないうちは、そのままã

1‚³ãƒ¼ãƒ‰ã‚’ copilot 投げてみましょう。 copilot がコードをみてどんな処理をしたいか理解してくれます。 copilot は Github を所有する Microsoft が提供するサービスです。プログラミングでは老舗なだけでなく、コンプラガン無視すると、あれだけ大量のコードのあるGithubの相当優秀なはず笑。 そのままコードを投げて、テスト内容で意図しない返答が返ってきたらそもそも自分が~~クソ~~コードを書いている可能性を疑いましょう。 プロンプトはこんな感じ。今回は単純なコードをテストしてみます。 以下コードをgulp-mochaのテストコードを書いてください すると、こんな回答が帰ってきます。 言われるがままに chai もインストール。 chai は JavaScript のテスティングフレームワークで、主にアサーション（テストの期待結果を検証すること）をサポートするために使われます。アサーションライブラリとも呼ばれ、テストコードを書く際に使うと、コードが期待通りに動作しているかどうかを確認することができます。 以下が Should (必須)で行われるか確認します。 should execute the function immediately(関数が即時に実行) should throttle subsequent calls within the timeout(タイムアウト以内に後続の呼び出しを抑制) should execute the function again after the timeout（タイムアウト後に関数を再度実行） 実行（execute）通りにテストが通りましたね！ 複雑な処理は確認したい項目を処理順に分けて順番にテストコードを書かせる 最小単位（順番）といえど複雑な処理を走らせる場合は更に分解します。 コードを書く→デバッグ→テスト。 を各ステップごとに行うのが良いと思われます。 たとえば、Instagram 投稿一覧の取得などをAPIで呼び出すようなプログラムの場合、まずはAPIの呼び出しに成功したかどうかを確認する必要がありますよね？ そんな感じでひとつづつ細分化してテストコードのプロンプトをちょっとづつ進めます。 今回例えば、jsdom というDOMに見立てたモジュールが合ったのですが、割と新しめのJSの ObserberAPI に対応しておらずモックを作ることになりました。 AIは万能じゃありません。 こんな感じで予期せぬことが起こるので分解して、問題を早期発見しながら進めないといつまでも終わらないプロンプトループにハマることがあります。 colpolot も ChatGPTほどじゃないけどたまにあやふやな情報出してきますwww うまくいかない場合は、適宜ググったり従来の方法を試しつつ進めるべきです。そういう時に融通や鼻がきかない新人エンジニアには使いこなすのは厳しいと思いました涙。 まとめ・テストコードを書いたらナレッジが爆上がりした copilot を使いながらテストをしていて、感動したことが多々あろ、ありました。 へーーーー！！こんな書き方あるんだ！！ コードの質はたまに怒りレベルのこともありますが、とてもレベルが高いですし、自分の保守性の低い~~クソ~~コードを反省しています。 AIすごいなぁ…。人間がしなくていいことを人間よりハイクオリティでやってくれるから、脳死状態で作業だけしている人間は淘汰されて行くんだろうなぁと遠い目にもなりつつ…。 AI時代、アイデアを持っている人だけ生き残る 結局、このAI時代、アイデアを持っている人だけ生き残るのだと強烈に痛感しました。 そんな感想も述べつつ今回の記事もお開きにさせていただきます。 この記事がみなさんのコーディングライフの一助と慣れば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":false},{"slug":"entry540","title":"babel + browserify で async/await に対応しながら外部スクリプトファイルを読み込む","date":"2025-01-28","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2025/entry540.webp","description":"babel + browserify でローカルの普通の JS でも、npm module 経由でインストールしたファイルや外部ファイルを読み込んだり async/fetch のコードをトランスパイル。この記事は npm や node がすでに使えることを前提。Swiper/lodashなども使えます。","tags":["npm","Gulp","JavaScript"],"body":"今回やりたかったことです。 babel + browserify でローカルの普通の JS で、npm module 経由でインストール ファイルや外部ファイルを読み込んだり async/fetch のコードをトランスパイルする どうしても訳合ってこの環境を作りたくてサンプルコードを探して、実際やったらコケる。 GulpでBrowserifyを使った外部スクリプトファイルを読み込むタスクを作成する|designsupply 上記 designsupply さんのコードを参考にしつつ修正しました。 まずは必要なモジュールはこちら。バージョンが古いままになってる可能性があるので、適宜新しいモジュールを入れてください。 この記事は npm や node が使えることを前提に執筆しています。メモ程度の記事なので、必要に応じて参考にする程度にしていただければ幸いです。 package.json / 各種モジュールをインストール gulpfile.js にタスクを書く browserify の処理で file.contents に直接 buf を代入したら処理でコケます。Buffer.from() で文字列などのデータから生成し直して代入します。browserify の中で babelify を適応させます。browserify にオプションをつける時は .configure で渡します。 コマンド実行。 Swiper や lodash を読み込む 次のコマンドで npm 経由でインストールしたモジュールを直接使うこともできます。","noindex":false},{"slug":"entry539","title":"【WordPress】スプシから取得したデータを Ajax で更新する","date":"2025-01-27","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2025/entry539.webp","description":"WordPress で Ajax でやり取り。スプシをAPI化して更新するデータをJSONで取得しDBに格納します。","tags":["WordPress","GAS"],"body":"今までスプシとGASで作ったデータをPHPで取り込み、ローディング時間も長くなりサイトが重くなってしまうのがネックでした。 JSで呼び出すにせよ、ロード時間も長い…。 月に数度とか更新頻度の低いものであれば、データベースに格納してそれを使ったほうがいい。 WordPress には Ajax でやり取りする方法があるので、それを利用してスプシのデータを格納します。 前提として、ログイン時のみの仕様となります。 json の作り方はこちらを参照してください。今回は説明は省きます。 更新用のボタンを Admin Bar に実装 まずは更新用のボタンを実装します。 このボタンをクリックしたら、データを更新するようにします。Admin Bar にボタンを追加します。クリックイベント用のボタンなので特にリンクなどは実装しません。 Ajax 通信に使う JS を登録 まずはファイルの登録です。ログイン時だけしか使えないように、isuserlogged_in() で制限をします。 続けてサーバー側のデータをファイルへ渡せるようにします。ポイントはajax-reflesh-jsでこのIDが一致したJSにのみ、値を渡せます。 続いて管理画面側です。コードはほぼ一緒ですが、フックは adminenqueuescripts 管理画面用となっています。 スプシデータを ajax 化 今回は仕様の都合上 theme_mod 内に格納しました。 option 内でもいいと思います。 addactionに記載するアクションは wpajax関数名action となります。 クリックイベント を実装 Admin Bar に実装したボタンをクリックしたら データを更新できるようにします。 ボタンは管理画面のページによっては非表示になるので、要素がないときには処理しないようにします。 ボタンのIDは接頭辞に wp-admin-bar- が付与されます。 params には先程設定したアクション（Ajax処理）とnonceの値を格納します。 アクションは 関数名_action となるみたいですが、指定方法をきちんと検証していないので

1後日修正するかもしれません。 適宜値を削除したり確認しながらやってみてください。 まとめ・WP-Cron と合わせて処理しておくと手間がいらない！ 今回は手動で更新する方法をご紹介させていただきました。 WordPress には WP-Cron という一定の時間にアクセスがあったら処理が走るという便利機能もあるので合わせて設定しておくと良いですね。 WP-Cron に関してはまた記事化しようと思います。 この記事がみなさんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありとうございました。","noindex":false},{"slug":"entry538","title":"Sharp module のせいで npm start(Gatsby development) 動かなくなった","date":"2025-01-18","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2023/entry519.webp","description":"ローカルの Gatsby のブログの node module を一部更新したら、Sharp module のせいで npm startができなくなりました。画像処理モジュールの sharp をバージョンアップしたせいでエラーが発生したらしい。色々ググった結果、解決したのでその方法をメモっておきます。","tags":["npm\\""],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 ローカルの Gatsby のブログの node module を一部更新したら動かなくなりました。 Something went wrong installing the \\"sharp\\" module ビルドはできるけど npm start(Gatsby development) のコマンドでコケる。 Machine: Mac Book Pro Chip: Apple M1 OS: Sonoma 色々調べていたら、画像処理モジュールの sharp をバージョンアップしたせいでエラーが発生したらしい。 エラー解決方法が指示されているから、試すもののうまくいかない。Win機で同様のエラーが出た人はWin機用の sharp をインストールしてうまくいっていた記事は読んだ。 なので npm start 時に返ってくる、以下で理論的にはうまくいくと思ったのですがどうもうまくいかない。 色々ググった結果、解決したのでその方法をメモっておきます。 1. Apple Silicon: Something went wrong installing the \\"sharp\\" module #3214 2. Cannot run gatsby develop on Mac M1 上記2つの記事を参考にとりあえず言われるがままにやってみました。 brew 経由で2つのライブラリをインストール 今この記事を読んで私と同じ悩みの方が homebrew がないとは考えにくいのですが、ない方はこちらを参考にインストールしてください。 GCC（GNU Compiler Collection） C言語やC++などをコンパイルする環境を提供するそう。いらなさそうな気はしたけどとりあえずインストール。 GCC は要求主導型の水平スレッド画像処理ライブラリらしいです。このバージョンが古いとよくないみたい。 とりあえず言われるがままに reinstall で再インストール。で、何が入ったかを念の為 brew info で確認。 node_modulesを削除して、再インストール。ここまでやれば大丈夫っぽいけど、参照リンクの一個目でその続きのスレッドを読むとまた動かなくなったとのこと。 もう一個の参照リンクの Sharp 開発に関わっているぽい人のアカウントの回答者が以下コマンドについて言及していたので、やってみた。 多分、最初にnpm startで指示があった以下とオプションが一個違うだけでほぼ一緒。 ちゃんと動いた。良かった。 まとめ・英語のリファレンスが一番解決する 昨日まで動いていたので、node module バージョンアップによるマシーンのスペックとSharp のバージョンで不具合がおこったっぽいです。 マニアックなことをやっていると、英語のリファレンスが必須になるなぁとつくづく思いました。 この記事がみã

1ªã•ã‚“の一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry537","title":"Pandoc × EJS で Word ファイルを HTML ページに変換する","date":"2025-01-16","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2025/entry537.webp","description":"Pandoc × EJS WordファイルからコマンドでHTMLに生成する方法をまとめました。Pandoc⇒Markdownで変換してもともとあるhtmlをコピーして手動で組み込んでましたがtitleやdescriptionなどの差し替えがすごく面倒だし、間違える。gulpを使ってタスクを作ります。","tags":["Gulp","npm","コマンド"],"body":"今回やりたいことは、ヘッダーなどの共通部分は一緒で本文はwordから流出し、HTMLをコマンド生成するというものです。 実際最近お仕事でWord納品の記事をHTMLに組み込む作業をしていました。 最初は Pandoc⇒Markdown で変換してもともとあるhtmlをコピーして手動で組み込んでましたが title や description などの差し替えがすごく面倒だし、間違える涙 それを解決するためにこの記事を書きました。 Pandoc は、あるマークアップ形式から他の形式へ変換する Haskell ライブラリと、そのライブラリを用いたコマンドラインツールです。 Pandocユーザーズガイド 日本語版 [2.7.2] ESモジュール版のサンプルも用意しています。 pandoc インストール brewコマンドでインストール。 Homebrew がない方でも以下リンクから直接ダウンロードしてインストールできます。 pandoc | Github Word記述のルール タイトルなどのメタ情報は変数に格納したかったので、記述を以下のようにし、Markdown ファイルに変換した後にEJS（本文）と json ファイル（メタ情報）に分割します。 MDファイルにしたら、gulp経由で_や=は置換のトリガーにするので本文にはこの2つの記号は使わないようにします。 Pandoc で Markdown ファイルに変換 まずは、ファイルをコマンドで md ファイルに変換しておきます。 gulpで処理したい。 gulp で md ファイルを html に変換 今回は gulp を採用しました。タスクを今回はmodule形式で書かないため gulp-markdownのみバージョンを落としてください。 gulp-ejs gulp-markdown(v6.0.0) gulp-replace fs gulp gulp-html-beautify gulp-rename ファイル構成 Json ファイルを作成 正規表現で置換し、json ファイルを作り、一旦は同じディレクトリに突っ込みます。 =slug\\\\_page1は description\\\\_ページの説明= は title\\\\_タイトル は という感じで置換されるようにしています。正規表現に関しては以下を参考に。 ちなみに、うまく置換できなかったのでglobalにgulp-replaceをインストールしています。 Jsonファイルを作成 本文を形成し、EJS に変換します。 Pandocからも画像のタグは作れるのですが、HTML化するときに都合が悪かったので、とりあえず画像名が配置されている場所に画像タグを挿入するようにします。 =画像名.jpgを置換します。 Markdown => HMTLにコンバートするときに見出しに付与されるidも不要なので削除します。 EJS から HTML へ HTML 変換します。EJS の詳しい記事はこちら。 \\" ディレクトリ構造はこちら。 生成された temp.json や temp.ejs は一時的な作業用ファイルなので、削除します。 本文を組み込むテンプレートファイルはこちら。 アドバンス・まとめて組み込みたい時は for などで処理を回す Pandoc の Markdownファイル作成は別処理になりますが、フォルダ名を取得すればまとめて処理できます。 フォルダ構成は以下とした場合。 createJsonFile も createEjs も同様に for 文で処理するだけです。 アドバンス2・無駄なファイルを生成しない方法(ESモジュール) child_process を使えば、gulpから指定したコマンドを叩けます。 一度 Markdown 化し中身を目視でチェック、問題なければhtml化するプロセスを取ります。 まとめ・ブログ記事が Word 納品でも簡単にテンプレートに組み込める 昔努めていた会社で大量の Word で納品されたブログを WordPress に移す作業がありました。 Word からコピペで貼り付けても、見た目は美しく形成されるのですが、変なクラスなどが付与されコードは汚くなり担当者が困ってました。 ちょうど WordPress にも ブロックエディタが導入され、Markdown が使えるようになっていたので Markdown に ã

1™ã‚Œã°ã„いじゃん！となり、変換するコマンドを用意しました。 この経験がヒントになりました。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry536","title":"2025年マスターしておきたいCSS10選","date":"2025-01-12","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2025/entry536.webp","description":"CSS機能が向上したおかげでJSなしで使えるものも増えてきていますね。現役でコーダーが抑えておきたいCSS10選。scroll-behavior,margin-inline:auto,max-content,<wbr>,background-clip,backdrop-filter,image-set,interpolate-size","tags":["CSS"],"body":"CSS機能が向上したおかげでサイトの軽量化できるし、JSなしで使えるものも増えてきていますね。Web業界10年以上、身にしみて便利になったと思う今日このごろです。 最近よく使うプロパティはもちろん、情報のアップデートも兼ねて、今回はマスターしておきたいCSS10選ということでお届けします。 CSSだけでscroll-behavior 遠い昔であれば、JSで記述したスムーズスクロールもCSSで解決できるようになりました。スピードなどは調整できませんが十分使えます。 ヘッダー固定の場合。例えばヘッダーの高さが60pxの場合はscroll-paddingを60px足せばいいだけです。 iOSなどの可変するビューポート対応、height と dvh iOSで height: 100vh こんな変な隙間ができる問題覚えてますか？ 単位vhが出たときは画期的で、スマホのドロワーメニューやフルスクリーンのサイトで大活躍しました。iOSのビューポートがスクロールに応じてメニューが出てくるのでJSを書いて対応などしなければなりませんでした。 現在ではdvhですべてのモダンブラウザで対応可能です。 | バリエーション | 値 | | -------------- | ---------------------- | | Large | lvw, lvh, lvmin, lvmax | | Small | vw, svh, svmin, svmax | | Dynamic | dvw,dvh,dvmin,dvmax | margin-inline: auto でセンタリング ブロックコンテンツのセンタリングは以下のようにしていました。 CSSの「論理プロパティ」で、要素の「インライン方向」のマージンを設定するためのものです。ブロックのコンテンツを文章の方向のように扱えます。 margin-inlineを使えば1行ですみます。 先程も言及したようにただ縦書きのときには注意が必要です。 上下のマージンが設定されます。 内側のコンテンツ要素のサイズを合わせたい max-content 私はよく文字に下線を引いたようなデザインを実装することがあります。 従来はdisplay: inlineで、position: absoluteやdisplay: grid;grid-direction:columnを利用して無理やり内側のコンテンツ要素のサイズハマるようにしていました。 max-contentを使えば、1行でコンテンツにピタッとハマった要素が作れます。 min-content: ボックス内で自動改行される場合、そのコンテンツを収納するインラインサイズ max-content: コンテンツの幅とおなじになる fit-content: 上記2つを組み合わせたもの 日本語は英語のように単語単位で改行しないので、我々が主に使うのはmax-content とfit-contentだけでいいと思います。 内側のコンテンツ要素のサイズを合わせたい max-content|CODEPEN 親要素だけに固定：position: sticky もうすっかり定番中の定番！position: stickyです。メニュー追従させることがありますよね？ position: stickyを使うと特定の親要素の中だけ固定され、スクロールなどが終わると固定が終わります。 このサイトも利便性を考えPCでは記事の領域だけ目次を右に固

1定してあります。 background-clip でアイコン作成|CODEPEN word-break:keep-all と<wbr>でディバイス幅に応じて改行 ディバイス幅で変なところで改行されたら悲しいですよね？ そんな時はword-break:keep-all とが活躍します。 実際文章はきれいに読ませたい文章や、見出しでは重宝しますが、ブログなどの長めの記事ではぶっちゃけ使えません。 word-break:keep-all とでディバイス幅に応じて改行}|CODEPEN background-clip でアイコン作成 最近アイコンをbackground-clipで作成する機会がい増えました。 素材がすぐ用意できない時は、borderで変態みたいなハックを駆使して作っていましたが、コードは長くなるし疲れます。 background-clipを使えばコードの記述量が減ります。 アイコンの位置もabsoluteではなく grid を使えば小難しい計算が必要なくなり、コードも使いまわしできます。 background-clip でアイコン作成|CODEPEN ジェネレーターを使えば簡単に図形が作れます。 Clippy — CSS clip-path maker backdrop-filterで重なった下のコンテンツにフィルターする backdrop-filterを使うと下に重なるコンテンツにフィルターを掛けることができます。 当サイトのヘッダーは半透明白でbackdrop-filterとblur()でぼかしています。 関数は以下のとおりです。drop-shadowとsaturateは使わないので省きます。 | 関数 | 効果 | 値 | | -------------- | -------------------- | --------------------------- | | blur | ボカす | 1px〜 | | brightness() | 明るさの調整 | 0%~ (100%がデフォ) | | contrast | コントラストの調整 | 0%（グレー)~ (100%がデフォ) | | grayscale() | グレースケールに変換 | 0% ~100% | | hue-rotate() | 色相の角度を回転 | 0deg~ | | invert() | 反転 | 0%~100% | | opacity() | 透過率を適用 | 0% ~100% | | sepia() | セピア調 | 0% ~100% | backdrop-filterで重なった下のコンテンツにフィルターする|CODEPEN image-set で背景も webp 対応する サイトを軽くしたいのでどんどんwebpを使いたい！ところです。現在ではすべてのモダンブラウザに対応しているようで、当サイトも以前アニメーションはgifアニメからwebpに切り替えました。 iOSであれば14以降、MacはmacOS 11 Big Sur以降であれば対応済み。6年前webp対応のサーバだったので画像が見れないとクレームを喰らったことがあります。もうそろ完全にWebpに切り替えてもいい気もしますが、、、、 HTML内の画像であれば、pictureタグで出し分けれますがCSSを背景で設定する場合はimage-setを使います。 これでRetinaなどの高解像度のブラウザでも画像がぼやけることはありません。 image-setを対応していないブラウザ対策。 image-setに設定した値を一個だけ書いておけば対応してくれます。 iOS 16以下に対応する場合は、-webkit-を付与してください。 image-setで背景もwebp対応する|CODEPEN interpolate-size で height:auto のコンテンツをアコーディオンアニメーション 要素に含まれるコンテンツの大きさを基準に要素のサイズのことをintrinsic-sizeといいます。 interpolate-sizeはintrinsic-sizeをアニメーション化するかどうかを指定するためのCSSプロパティです。 値をallow-keywordsにセットするとintrinsic-sizeが使えるようになります。 現時点ではChromeとEdgeのみの実装ですが、一足先にご紹介しておきます。 FireFox一方向だけアニメーションする Safari全くだめ interpolate-size でheight:autoのコンテンツをアコーディオンアニメーション|CODEPEN interpolate-sizeが全ブラウザに対応されるのが待ち遠しい！ interpolate-sizeなんかは実装されたらいろんな煩わしいハックをしなくて良くなるので超期待しています。 今回は10つのCSSについて触れましたが、マスターしておきたいCSSって10個どころじゃないんですが笑 grid、flexあたりをやり始めると記事一個になっちゃうので辞めときます。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":false},{"slug":"entry535","title":"Netlify + WordPress で HeadlessCMSを作る - 環境構築 -","date":"2025-01-10","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2025/entry535.webp","description":"Next.jsで headless CMS を作る機会があったので概要をまとめました。シリーズに分けて紹介していきます。今回はとりあえず環境構築です。","tags":["Next.js","React","WordPress"],"body":"Next.jsで headless CMS を作る機会があったので概要をまとめました。シリーズに分けて紹介していきます。今回はとりあえず環境構築です。 Lint（自動でコードをきれいにしてくれるやつ）とかの設定はやりすぎるとPCのスペックによっては辛いしめんどくさいし、省きました。必要に応じて適宜やってください。 まずは Headless CMS とはなんぞや、から。 Headless CMS は、コンテンツ管理（バックエンド）と表示部分（フロントエンド）が分離されたCMSです。バックエンドで管理されたデータはAPIを通じて提供され、ReactやVue.jsなどの好きな技術でフロントエンドを構築可能です。 メリット フロントエンドの自由度が高い マルチチャネル対応が容易（ウェブ、アプリなど） セキュリティやスケーラビリティが向上 デメリット APIや開発スキルが必要 従来型CMSより運用が複雑 代表例 Contentful: 使いやすいUI Strapi: オープンソースで自由度が高い Sanity: リアルタイムコラボが可能 フレームワークと制作方法 今回はとりあえず、SSG（Static Site Generator）で Headless CMS 作成していきます。 ちなみに、SSG以外にもこんなものを作成可能です。 CSR: シングルページアプリケーション（SPA）向け SSR: リアルタイムデータが必要なサイトやSEO重視のページ向け SSG: コンテンツが固定で頻繁に更新されないサイト向け ISR: 頻繁に更新されるがリアルタイム性は不要なサイト向け | 項目 | CSR | SSR | SSG | ISR | | ---------------- | ------------------------ | ---------------------- | ---------------------------------------------- | ---------------------------------------------- | | レンダリング時期 | ユーザーのブラウザ | サーバーでリクエスト時 | ビルド時 | ビルド時 + ユーザーアクセス後 | | 速度 | 遅い（初回表示後は速い） | 初回表示がやや遅い | 非常に速い | 非常に速い（キャッシュ更新が可能） | | データ更新 | 即時 | 即時 | ビルド時のみ | 指定時間ごとに再生成 | | 主な用途 | インタラクティブなアプリ | SEOが必要な動的ページ | 更新頻度の低いサイト（ブログやポートフォリオ） | 更新頻度の中程度のコンテンツ（商品リストなど） | | SEO対策 | 弱い | 強い | 強い | 強い | SSGは一昔前であればMovable Typeがそれに当たるんじゃないかと思いますが、今は情報を追っていないのでちょっとわからないでです。 Next.js とは？ Next.jsは、高速かつ柔軟なモダンウェブアプリケーションを構築したい開発者に最適です。 Next.jsは、Reactをベースにしたフレームワークで、サーバーサイドレンダリング（SSR） や 静的サイト生成（SSG） を簡単に実現できます。高速なウェブサイトやアプリケーションを開発するための機能が豊富に揃っています。 ハイブリッド対応: SSGとSSRをページごとに選択可能 高速レンダリング: パフォーマンスに優れたページ生成 使いやすさ: ファイルベースのルーティングやAPIルートが標準搭載 SEOに強い: サーバーサイドでのHTML生成が可能 Docker で WordPress 環境作成 まずはローカルに、WordPress 環境を作ります。普通にすでに WordPress で記事が溜まっている人は不要かも。 ここはあまり触らないので、普通にLocalなどのアプリを使って作るのもありだと思います。必要ない人はすっ飛ばしてください。 以下のようなファイルをプロジェクトディレクトリ（自分のプロジェクトを置きたい場所のディレクトリ）直下に置きます。 YAML（ワイエムエーワイエル）ファイルは、構造化データを文字列として表現したデータ形式で、設定ファイルやデータの保存、転送などに使用されます。拡張子は「.yml」「.yaml」です。 DockerのWordPress環境をインストールします。 イãƒ

1³ã‚¹ãƒˆãƒ¼ãƒ«ãŒçµ‚わったら http://localhost:8000 にアクセスします。アクセスできたらインストールを進めます。データベース情報以外は適当で問題ありません。 サイト名：任意 ユーザー名：任意 パスワード：任意 管理者メールアドレス：任意 データベース名: wordpress データベースユーザー名: users データベースパスワード: pass サイトをindexされないようにしておく Headless CMS にした WordPress はもう記事を公開する場所ではなくなるので 重複コンテンツ を避けるために noindex にし、検索エンジンからクロールされないようにしておきます。 重複コンテンツとは、同じ内容が複数のURLで公開されている状態を指します。これにより、検索エンジンがどのページを優先すべきか判断できず、SEO評価が分散する可能性があります。 GraphQL プラグイン データの取得のために、GraphQLを導入します。 WPGraphQL せっかくなので画像の保存場所を変更する このままだと画像パスが WordPress のフォルダ構成丸出しなので、フォルダ構成を変更したいところですよね？ アップロードファイルのパス名を変える方法はいくつかありますが、今回はWordPress wp-config.php からパスを変更します。 Next.js インストール 早速、Next.jsをインストールしましょう。 コマンド実行後は対話式でインストール作業が進めます。 今回は以下のとおり進めました。慣れてのもありSASSを使いたかったので、Tailwind も使わないことにしました。 上記でWould you like to use App Router? (recommended)でyesとしているのですが、以前 Pages Router で作成した事があるので簡単にその違いをまとめておきます。 | 項目 | App Router | Pages Router | | ---------------- | ------------------------------------------------------ | ------------------------------------------- | | 導入バージョン | Next.js 13 以降 | Next.js 12 以前から | | フォルダ構造 | app/ フォルダ | pages/ フォルダ | | レンダリング方式 | デフォルトで React Server Components を使用 | クライアント側で動作する React Components | | データ取得 | fetch() で直接データ取得可能 | getStaticProps や getServerSideProps を使用 | | ルーティング | ファイルベース + レイアウト共有（layout.jsが利用可能） | ファイルベースのみ | | 柔軟性 | SSR、SSG、ISRがさらに効率的に統合 | 従来のSSR、SSG、ISR | | 推奨される用途 | 新規プロジェクト、最新のアプローチ | 既存プロジェクトやレガシーサポート | インストール後、このコマンドで Next.js の画面が見れたらOKです。 環境準備 環境準備です。SASSとローカルと本番環境で諸々の設定をします。 環境変数用のファイル追加 .env.development .env.production リモートの設定・デプロイをNetlifyでの管理する場合 .env*は.gitignoreに設定されているので、デプロイされても反映しません。 Netlifyでは、環境変数をサイト側から設定できます。 SSG出力用の設定 インストールした Next.js プロジェクトの直下 next.config.mjs を編集します。 ビルドできるかテストしてみます。outフォルダが作成されていたら成功です。 SASS をインストール SASSをインストールします。 src/にstylesディレクトリを作成してSASSの変数を格納する_variables.scssファイルを作成します。 next.config.mjs ですべてのSASSファイルからこのファイルの関数を参照できるように設定します。 最後に 今回は Next.js × WordPress で Headless CMS をつくるための環境構築までをまとめました。 まだまだ加筆の余地はあると思うので、気がついたことがあれば更新していきたいと思います。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":false},{"slug":"entry534","title":"NetlifyとGitHubプライベートリポジトリ連携！無料枠・料金の境界線とデプロイ手順","date":"2025-01-08","modifiedDate":"2026-06-22","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2025/entry534.webp","description":"1年前に公開したサイトを更新しようとしたらNetlifyにデプロイできない！原因はGitHubの鍵設定でした。Netlifyの無料枠でプライベートリポジトリを安全に連携する手順と、GitHubのDeploy Key（デプロイキー）の再設定方法を優しく解説。","tags":["Netlify","Vue.js","github"],"body":"1年前に公開した自社サイトを久しぶりに更新しようとしたら、Netlifyにデプロイできなくなっていました。 原因を探ってみると何のことはない、SSHのキー認証でコケていただけ笑 解決するまでに貴重な時間が見事に溶けてしまいました笑。ローカルのプロジェクトを整理している最中に、うっかりSSHのキーを削除してしまっていたのが原因のようです。 解決法はいたってシンプルで、ローカル環境とNetlify側のキー（Deploy Key）をGitHubに正しく設定してあげるだけでした！ おそらく未来の自分もまた同じことでやらかす（！）と思うので、次からは爆速で解決できるように設定手順を分かりやすくメモとして残しておきます。Mac環境を前提に、順を追って解説していきます。 この記事でわかること Netlifyの無料枠でGitHubの非公開（プライベート）リポジトリを安全にデプロイする手順 GitHubの「Deploy Key（デプロイキー）」の正しい設定と確認方法 複数アカウント運用時にハマる「SSHキーの個別管理」の具体的な罠と対策 Mac前提でお話を進めます。 こんな症状がある人は項目ごとに確認してみて GitHubの接続方法がSSHである GitHubにPushできない GitHubにPushはできるけれど、Netlifyでビルド（デプロイ）する前にコケる 長い間放置していたり、利用するサービスによっては定期的にSSHのキーが無効化される仕様もあるため、久しぶりの更新時には今回紹介する再設定の作業が必要になります。 【注意】公式ドキュメントの罠！GitHubのアカウント種別による無料枠の制限 ここで、1年ぶりに環境を触る人が一番時間を溶かしやすい大切な注意点（Netlifyの無料プランの制限）を整理しておきます。 Netlifyの無料プラン（Free & Starter Plan）のまま運用 できるのは、あくまで「 個人アカウント（Personal account） 」が所有するリポジトリのみです。 個人アカウントであれば、非公開（Private）リポジトリであっても追加料金を請求されることはなく、 無料枠のまま デプロイを走らせることができます。 しかし、GitHubの「Organization（組織アカウント）」が所有するリポジトリの場合、たとえ手動で連携しようとしても無料プラン（Free & Starter）ではサポートされていません。公式ドキュメントにも以下のように明記さã

1‚Œã¦ã„ます。 private repositories owned by an organization account (This feature is available on Core Pro and Enterprise plans, depending on Git provider.) Git repository support もしOrganizationの非公開リポジトリを動かそうとすると、管理画面で「有料のProプラン（1ユーザーあたり月額数十ドル）」へのアップグレードを要求されて詰んでしまいます。 そのため、 「今回はあくまで【個人アカウント】のPrivateリポジトリを、無料枠のまま安全かつ確実にデプロイするための、手動Deploy Key（デプロイキー）設定手順」 を解説していきます。 GitHubの「Deploy Key（デプロイキー）」を設定・確認する まずはローカルのペアキーを作成します。公開鍵、秘密鍵でペアになり、秘密鍵はローカル環境で保管し、公開鍵はリモート（サーバー）に保管します。 秘密鍵：id_rsa 公開鍵：id_rsa.pub パターン1：GitHubのアカウント（鍵）が1つだけの場合 .sshのディレクトリに移動。 macであればUsers/Users/[ユーザー名]直下にあると思います。 .ssh/ ディレクトリがfinderから目視できない場合は Command + Shift + . で表示させます。なれないうちは目視でも確認しながら、作成することをおすすめします。 ペアキーを作成します。普通は多分これだけでも良い。 github アカウントのメールアドレスを付与してもOK。 2、3行目の質問はパラフレーズの設定（パスワード設定）が必要か゚聞かれていますが、とりあえず全部未入力リターンでオーケーです。 これで ~/.ssh ディレクトリに idrsa と idrsa.pub の2つの鍵が生成されていると思います。 Github にログインして SSH and GPG keys の SSH keysを設定します。New SSH key をクリック。 SSH キーのタイトルと設定して公開鍵（id_rsa.pub）の内容をコピーして貼り付けます。 普通にVSコードとかのテキストエディタでファイルを開いてコピーすればいいです。よく、コマンドでコピーしろという記事を見ますが、そのほうが間違いないです。 タイトルは SSH key for my blog とか なんのキーかわかるように名前をつけておきます。私はここで不明な名前をつけていたので困ったクチです。 接続テストします。 以下のようなレスポンスが帰ってきたらOKです。 パターン2：複数のGitHubアカウントを使い分けて管理する場合 もちろん、管理するサイトが複数有れば、管理するSSHのキーも複数あることがあります。SSH のキーは複数持っている場合は、キーの名前を他のものと差別化しましょう。 すると ~/.ssh ディレクトリに idrsacompany と idrsacompany.pub が作成されます。 公開鍵をGithubでコピペして登録するところまでは一緒です。 ~/.ssh/ディレクトリにconfigファイルを作成します。すでにファイルがある場合は作成不要です。 接続テストは以下です。 接続がうまく行ったら、そして実際にリポジトリがおいてあるディレクトリに移動。 ここでは Host 名は ~/.ssh/config で設定した companysite にります。 普通にファイルを.git/configファイルを編集してもオーケーです。 これで push できるようになっていたらOK。 Netlifyで発行された鍵をGitHubのDeploy Keyに登録する手順 Netlify 側のキーを設定していない場合、以下のようなメッセージが出て、Initializingの時点でコケます。 Please make sure you have the correct access rights and the repository exists. Netlify の対象のサイトに移動。Site configuration をクリック。 Build & Deploy に移動。スクロールダウンしてDeploy Keyを探す。 Deploy Key をコピーします。 Githubに新たなSSHキーを作成し、貼り付けます。 キーが2つ登録されました。ブログにも残したし、今度は絶対忘れない！w さいごに・人間は忘れる生き物 今回はローカルのファイルを整理しようとしてわちゃわちゃして間違えてキーを削除してやらかしました。 多分今までも、あーでもないこーでもないと作業していることは多く、記録が残ってないから同じことを繰り返すんだと反省しました。 今年はきちんとした文章じゃなくても、備忘録として、仕事のためにブログを残していこうと思います。 こんな走り書き程度のメモですが、お役に立てれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":false},{"slug":"entry533","title":"正論が嫌われる理由。正論ばかり言う人の言い負かす心理と理詰めをやめる処方箋","date":"2025-01-05","modifiedDate":"2026-07-01","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2025/entry533.webp","description":"正しいことを言っているのに人間関係が上手くいかないあなたへ。正論が嫌われる理由と、相手を言い負かす心理の裏にある罠を徹底解説。つい理詰めで論破して後悔してしまう人が、無駄な衝突を避けて自分の気持ちもスッと楽になるためのヒントをまとめました。","tags":["家族","ライフスタイル"],"body":"幼少期、お寺の和尚（おしょう）さんがお話ししてくれた説法に対して、「本当にそうなのかな？」と生意気にも偉そうに正論をぶつけて、しこたま怒らせたことがあります。 当時は自分の正しさを一所懸命主張したかったのですが、今振り返るとクソ生意気な子どもで恥ずかしいですが、相手を言い負かす心理やコミュニケーションの本質を語るうえでは、とても良い経験となりました笑 今回は、そんなクスッと笑える子どもの頃の思い出話をキーにしつつ、「 なぜ正論は嫌われるのか？ 」というテーマについて前å

1‘きに考察を深めてみたいと思います。 この記事を読むと心が軽くなる理由 正論ばかり言う人 がなぜ嫌われるのか、その心理的な背景がハッキリわかる ついつい相手を 理詰め にしてしまう時の心理を知ることが第一歩 本当に私は正しいの？ 自分の正しさを手放すことで、驚くほど人間関係が円滑で穏やかになる 幼少期：家族でお寺を先祖供養のために訪れるお盆 子どもの頃、毎年お盆になるとお寺を訪れていました。うちは決して信心深い方ではないのですが、なんとなく日本の慣習に従っていただけだと思いますが、通年行事になっていました。 子どもにとってのお寺なんて退屈なだけ。 長時間の正座で足が痺（しび）れるし、意味もわからないお教を黙って聞くのも苦痛。 唯一、そのあと出される甘いお菓子（お供え物のおさがり）とお茶が楽しみでした。 読経が終わったら、定番で和尚さんの説法（せっぽう）が始まります。 説法（せっぽう）とは、仏の教え（法）を説き伝えること。 説教、演説、法談、談義、勧化(かんけ)、唱導(しょうどう)などともいう。 釈迦(しゃか)は聞き手の能力に応じ、その場合に適した教え方で、理解できるように説法した。 その日の和尚さんの説法は賽（さい）の河原の石積をする子どもたちに関するお話でした。 和尚さんの説法：親よりも先に死ぬ罪 子どもの頃の思い出なので少し曖昧です。ある程度、ネットの力を借りて補完しています。 概ね記憶と間違いなさそうでホッとしました。 賽の河原とは三途の川の手前にある河原です。仏教では親よりも先に死ぬことは親不孝。そのため子どもたちは賽の河原で石積という苦行をしなければならないとのこと。 仏教の世界では親より先に死ぬ=親を苦しめる、これは五逆罪（ごぎゃくざいの罪）にあたるそうです。 5種の最も重い罪。 一般には、父を殺すこと、母を殺すこと、阿羅漢 (あらかん) を殺すこと、僧の和合を破ること、仏身を傷つけることをいい、一つでも犯せば無間地獄 (むけんじごく) に落ちると説かれる。 子どもたちはいくら石を積んでも鬼たちに石を崩されてしまう。三途の川を渡りたくても、いつまでも河原で苦行を続けなければならない。 この説法を通じて和尚さんの伝えたかったことはこうでしょう。 「親より長生きしなさい」 和尚さんの説明で腑に落ちなかった私はつい反論してしまいました。 疑問：子どもだって泳いで渡ればいいんじゃないの？ 賽（さい）の河原の子どもは川を泳いで渡ればいいんじゃないの？ 子どもだから泳げないよ。 （最近の）子どもは泳げるよ。 反論した私の言い分はこうです。 そもそも子どもが泳げないって何で決めつけるんよ 単純に和尚さんの子どもに対する決めつけが不服でした。実際、泳ぎが得意な周りの子はたくさんいました。 私は1970年代以降で子どもが多かった時代に生まれました。高度成長期で周りも裕福な家庭が多く、周りの子どもたちも習い事に通ってました。特にピアノや水泳が人気で、スイミングスクールの送迎バスが町内を走っていました。 なんで何も悪いことをしていない子どもが理不尽な苦行しなければならないの？ 子どもだって好きで親より早く死にたいわけではない。たとえ仏の教えかもしれないけど、子どもが理不尽な罰を受けなくてもいいじゃないか。せめて、三途の川を泳いで逃げれることができればいいのに。 相手を言い負かす心理｜自分の正しさを証明したかった子どもの

1頃の私 食い下がる私に和尚さんはついに怒ってしまいました。 和尚さんはいつぞやの説法で「瞋怒（しんぬ）」は罪と、解いていました。 瞋怒（しんぬ）とは自分の心に反するものをはげしく怒り、恨むこと。 「シンニ」とも読む。 子どもの私は怒られたことを根に持ち、和尚さんのことを影で「瞋怒（しんぬ）和尚」と呼ぶようになりました。 子どもの屁理屈。無礼や目上を敬うとか、わかっていなかった幼少期だった。 私もいい年なので和尚さんを擁護しておきますが、普段は私達子どもが広いお寺の中をダーっと走り回っても怒らない方です。 そもそも、なんでうちの親は和尚さんに反論する私を止めなかったのかwww 正論ばかり言う人が嫌われる理由｜理詰めはときに人を傷つける あれから40年以上経過し、さすがに十分すぎるくらい大人になりました。世の中には人それぞれの立場があって、どんなに 正しい と思っていても、言っていいときと悪い時があると流石にわかってきました。 気づくのが遅いwww とはいえ、今でも子どもの頃の私の主張は正しくないとは思いません。もちろん、仏門を専門的に学んだ和尚さんの主張も正しいと、今では思います。 私は子どもの頃から信念が強すぎて、よく他人に正論をぶつけていました。セブに来てしばらくし、正論をぶつけることが本当に正しいのか？と疑問に思うようになりました。 Q. 正論をぶつける時、相手に何を求めているか？ 大抵は、相手に考えを改めて欲しかったり、正してほしいから ではないでしょうか。 Q. 伝えたあとに相手が改心したことはあるか？ おそらく、ほとんどありません。 大体は逆効果に終わります。正論は人は傷つけるから。 正しいのはわかっていてもできない人が大半。正論をぶつけられた時、能力的にできなくて劣等感を感じる人もいます。自分が否定された気持ちも生まれる人もいます。たまに逆ギレする人もいます。実際、私は和尚さんを怒らせてしまいました。 Q. それでも自分が正論をぶつける理由を考えたことがあるか？ 自分の主張が正しいと証明したい。その先には、満足、勝利、優越感を得たくありませんか？正すことができない上、他人にネガティブ（たまに恨まれる）な感情を抱かせるくらいなら、正論をぶつけないほうがよいのではないでしょうか。 自分も他人も観察してみると、 大抵は論破が目的になっていて、自分の正しさを証明できれば快感なだけ なんですよ。 「自分の主張が正しいと証明したい」と微塵（みじん）でも頭をよぎったなら、正論をぶつけるのは今すぐやめるべきです。 人間関係で「理詰め」をやめるために意識したいこと 人と生きている以上、誰かの行動を正したくなります。だからこそ今では、正論をぶつけないためにできることを実践する努力をしています。 そもそも、人を正そうとしない 過去と他人は変えられないもの。他人の人生を変えられるなんて、できないというかやろうとしている事自体がおこがましい。 100 人いれば 100 通りの正しさがある事を忘れてはいけない 100人いれば100通りの正しさがあります。「私の正しさ」「その人の正しさ」が違うだけ。無理に受け止める必要もありませんし、「あ、進む道が違うのね」くらい思って割り切ります。 どうにも衝突するぐらいなら距離を置く お互いの価値感や正しさが違いすぎて衝突するぐらいなら距離を置きます。多少は仕方ないですが、あまりにも揉めるぐらいなら、付き合わないほうがいいです。人間関係において、闘ってもいいことは何一つありません。生きていれば、水と油くらい混じり合えない人とも遭遇します。 まとめ：正論をぶつけなくなってからの方が自分の気持ちも楽になった 正論は人を傷つけると気づいたのは、ここ 2、3 年の話です。今でも昔のクセで正論をぶつけてしまうことがありますが、おそらく減ったと思います。 自分自身が心穏やかになり、おかげさまで快適です。 こんなことを思ã

1ˆã‚‹ã‚ˆã†ã«ãªã£ãŸã®ã‚‚、セブで出会った友だちたちのおかげだと感謝しています。また、経営者になったからこそ気づいたこともあります。 実は今年でこの銀ねこアトリエブログを始めて11年です。ブログは自分の頭を整理するのに良い手段です。 最近はYouTubeやったり、イベントしたりでブログ執筆も遠のいていましたが、良いので時間を見つけて書いてみようと思います。 この記事が皆さんの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry532","title":"【contact form 7】GTMでThanksページのないサイトのコンバージョン測定","date":"2025-01-01","modifiedDate":null,"category":"seo","categoryName":"SEO対策・デジタルマーケ","ogImage":"/thumbnail/2025/entry532.webp","description":"WordPressサイト、人気プラグインcontact form 7でコンバージョンをサクッと数える方法をGoogle Tag Managerのdata layerで計測する方法をご紹介します。","tags":["google tag mamager","WordPress","Web解析"],"body":"先日、WordPressサイトを弊社 Lenz Technologies Inc. で実装させていただきました。 ミニマムペライチのサイトで、特にサンクスページも設けなかったのでコンバージョンをどうやって計測しようと思った結果データレイヤーを追加することで実装することにしました。 他にもやり方はあると思いますがあくまで参考にしていただければ幸いです。 データレイヤーってなんぞ？ データレイヤーとは、Google タグマネージャー（GTM）とウェブページ間で情報をやり取りするための配列（変数が複数くっついたもの）です。ページ上のさまざまなイベントやデータ（商品ID、購入金額、ユーザーの行動など）を記録し、GTMなどのタグ管理ツールが取得できるようにします。 データレイヤーは、JavaScriptオブジェクトとしてウェブページに埋め込まれ、GTMによって読み取られて分析やトラッキングのために使用されます。 とのこと。Google検索が最近勝手に概要作ってくれるので便利ですね。 データレイヤーの追加方法 Googleタグマネージャーを実装しているサイトであれば以下のコードでデータレイヤーを追加可能です。 例えば単にコンバージョンの数（この場合のコンバージョンはお問い合わせの数）を計測したいだけであれば、appliedというイベント（event）として追加するだけで十分です。 Contact Form 7 送信後の処理にデータレイヤーを追加 WordPress おなじみのフォームには プラグイン Contact Form 7 があります。個人的にも、使い勝手が良くカスタマイズも簡単なので重宝しています。 Contact Form 7 では以下コードでフォーム送信完了後、JSで諸々操作できます。以下コードはフォームを設置したページに実装します。 通常、送信成功の後Thanksページに転送し、Thanksページ訪問数をカウントし、コンバージョン数を計測するのが定石です。 長年いろんなWebサイトを観測して、このやり方では数値の正確性にかけることがあります。 ユーザーがブラウザーバックでThanksページとお問い合わせをいったり来たりしてしまってデータが重複することがあります。 なので、送信成功後一度しか発火しない wpcf7mailsent イベントを使ってデータレイヤーをGoogle タグマネージャーに送ることで計測します。 Google Tag マネージャーの設定 GTMで受け取ったイベントをGA4と紐づけます。まずはGTM側でトリガーに「送信完了」を作成します。 1. カスタムイベント 2. イベント名設定 3. 一部のイベントを選び条件設定 タグを追加します。 1. Googleアナリティクス:イベント 2. GA4のIT追加（変数に設定しておいてもいいかも） 3. イベント命名名 おまけ・TypeScript × Vue.js で作ったSPAのフォームにも追加してみた TypeScript × Vue.js で作成したSPAフォームにもDatalayerを追加してみたのã

1§ã€ãã®ã‚³ãƒ¼ãƒ‰ã‚’紹介しておきます。 さいごに 今回はGTMのデータレイヤーを使ってContact Form 7のコンバージョン測定をする方法をまとめてみました。最近は運用の仕事も増えてまして、データレイヤーなどを扱うときに「プログラミングできてよかった」って思うことがよくあります。 走り書きなので多分加筆します笑。 ナレッジは溜まっているのに、忙しさにかまけて随分とブログを書いていなかったのでたまには更新しなきゃと久々にブログを書きました。昨年は二回しか更新していませんが、2014年から書いているので14年めです。 この記事が皆さんの一助となれば幸いです。最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry531","title":"セブIT飲み会 Spring 無事終了しました","date":"2024-04-16","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2024/entry531.webp","description":"2024å¹´4月13（土）のIT飲み会当日の様子の開催レポートです。日本食の老舗レストラン・松乃家で行いました。実に11年ぶりの開催でしたが、セブ島だけでなく日本や、その他の国からも 24 名もの方にご参加いただきました。","tags":["IT飲み会","セブ島"],"body":"2024 å¹´ 4 月 13 日、セブ島で 11 年ぶりに IT 飲み会を開催いたしました。 この度、セブ島だけでなく日本や、その他の国からも 24 名もの方にご参加いただきました。 セブ島 IT 飲み会 当日の様子 今回、セブ島 IT 飲み会 Spring の会場はビールだけではなく、ハイボールやレモンサワーも飲み放題ができるという理由で日本食の老舗レストラン・松乃家で行いました。 セブで飲めるジョッキの生ビールはめっちゃ価値がありますよ！！日本在住の方にはわからないかもですが笑 18:00 より挨拶（副代表・近藤さん）からスタートし、各自 1 分の持ち時間で自己紹介をしました。 歓談の様子です。みなさんあっという間に打ち解けました。お酒の力は偉大ですね笑ラストオーダーの 19:30 以降もしばらく盛り上がりは続きました。 最後に、セブ島 IT 飲み会言い出しっぺの私の挨拶で締めさせていただきました。 開催概要 | | 詳細 | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | 主催 | Lenz Technologies Inc. 神守 由理子フリーランスエンジニア 近藤 祐志 | | 開催日時 | 2024 å¹´ 4 月 13 日(土) | | タイムスケジュール | 17:30 受付18:00 乾杯の挨拶（運営・近藤）18:05 自己紹介（各自 1 分ほど名前・所属・PR などあれば）18:40 歓談19:30 締めの挨拶（運営・神守） | | 料金 | 1,700 ペソ / コース飲み放題※申し込みなしでのご来場は 2,000 ペソ | | 会場 | Japanese Restaurant Matsunoya Cebu 和食ダイニング 松之家 セブ店 | | その他 | ハッシュタグ #itnomikai_cebu | セブ IT 飲み会とは？ IT 飲み会 IT 飲み会は日本国内だけでなく世界各地で展開する「売上を上げるための情報交換」「売上を上げるための人脈づくり」「そして飲み会中に売上を上げる」などを目的とした飲み会です。 セブの IT 飲み会は、プラス、「セブ在住のエンジニアみなさんの技術面や生活面の頼れる場所を作りたい！」と願って開催に踏み切りました。 私がセブ IT 飲み会を始めた理由 日本からセブに来たばかりの若いエンジニアは心細い 技術面で相談できる人がいなくて困ってる人もいるかも知れない たとえば、セブ島にそんな人がいるかもしれない。 同じ IT の仲間同士で、困った時に助け合える場所があったらいいなぁとはぼんやり思っていました。 実は、私自身 30 代半ばで子どもの病気をきっかけに IT 転職しました。右も左もわからなかった私でしたが、なぜかコミュニティの仲間がスキルを磨くサポートしてくれて、なんとか生き残ってこれました。 私の事を助けてくれた先人たちは私が足元も及ばない素晴らしい技術の持ち主で、到底恩返しはできそうにありません。 せめて、 恩送り したいと常日頃頭の片隅にはありました。 2024 å¹´ 1 月、私が日本に出張に行った際に、たまたま福岡 IT 飲み会主催のクライマーの池田さんとお会いしました。 「IT 飲み会セブでもやったら？」 日本だけでなく世界各国で IT 飲み会が開催されていることを知り、チャンス！！だと感じた私は、すべての IT 飲み会の取りまとめをしている大崎さんと繋いでいただき、セブでの IT 飲み会を復活させることができました。 告知・次回は 8 月 17 日（土）開催予定です！ 多少トラブルはありましたが、参加者のみなさんのお陰でなんとか無事終了することができました。 次回は 8 月 17 日（土）開催予定です！また詳細が決まりましたら、告知させていただきます。 次回のセブ IT 飲み会でお会いしましょう！みなさんのご参加、お待ちしております！！ セブ島 IT 飲み会","noindex":false},{"slug":"entry530","title":"【フィリピン・海外移住】硬水で髪が抜ける・痛む対策！セブ在住者がLazadaで240ペソの格安シャワーヘッドを検証","date":"2024-03-20","modifiedDate":"2026-06-08","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbn

1ail/2024/entry530.webp","description":"フィリピンなどの海外生活で髪のパサつき（干し草化）や抜け毛に悩む方へ。元美容インストラクターのセブ島在住5年ライターが、硬水による髪トラブルのメカニズムを解説。現地の通販アプリ「Lazada」で買える240ペソの格安フィルター付きシャワーヘッドを実際に4週間使って効果があった実体験・解決策をレポートします。","tags":["海外移住","セブ島","ヘアケア"],"body":"セブに住んで早いもので 5 年経ちます。 ほぼ不自由なく暮らせてはいますが、悩みは日本にいたときに比べ髪がとても傷んでしまったこと。 特に髪が 干し草 みたいにパサパサになってしまい、オイルなしではお出かけできなくなってしまいました。 「海外（フィリピン）に移住してから、シャワーを浴びるたびに信じられないくらい髪が抜ける……」 「日本にいた頃に比べて、髪がゴワゴワできしむし痛む……」 それ、実はフィリピン特有の「硬水（石灰・アルカリ性）」が原因かもしれません！ 美容院に行ったときは必ずトリートメントはしているものの、数日経つと元通りの干し草に戻ってしまい…涙。紫外線も浴びないようにお出かけ時は必ず帽子を被るなど、とても気を使っていましたが効果も見られない…。 せめて、傷んだ髪をカットすることでひどくなるのを防ぐくらいしかできませんでした。本当は髪伸ばしたいのに…。 日本人が海外で生活して髪が傷むのはよく聞く話です そこで今回はセブ島で髪が傷む原因やその対処法などを実体験を元に記事にしてみました。 セブにいてもすぐできることなのでぜひ、興味のある方は試してみて下さい。 髪の傷みの原因は？美容師さんとの会話で水道水の水質と発覚 ある日知り合い（美容師）と話をしていて、ふと髪が傷む原因の話題になりました。 髪が傷む原因は多分水質ですよ。セブの水はアルカリ性ですから。 へー、知らなかった！ 2、３日に一度のシャンプーで我慢すればいいんですよ！ 常夏の国でそれはちょっと…。 傷む髪のことで周囲に聞き込みしているとボロボロと証言があり、もっと深刻な悩みも…。 日本や他の国にいたときに比べ髪が抜けるんですよね。もうね、結構深刻なくらい。◯ゲるんじゃないかって心配。 僕もセブに来た頃より生え際が後退してきた気がします。 うぅ、若いのにかわいそう…。 水こわー！！！ 髪が痛むメカニズム 髪が傷む原因はどうやら、アルカリ性というところまでたどり着きました。 そこでなぜアルカリ性の水で傷むのか、調べてみました。 健康な髪は弱酸性 健康は髪は弱酸性（pH4.5 〜 5.5）で、アルカリ性に傾くと髪のキューティクルが開いた状態になります。 髪がアルカリ性に傾いた状態が続くと、もちろんキューティクルが開きっぱなしになり本来髪の中に蓄えられていた水分などの大切な成分が抜けてしまうのでパサパサになるのです。 水道水がなぜアルカリ性に傾くのか 塩素がたっぷりはいったプールに入った後、髪がガシガシになる経験はしたことはありませんか? アルカリ性に傾くのは、主に 水の殺菌などに使われる塩素 が原因です。 日本の水道水も実は pH 値 7 ～ 8 で中性からアルカリ性らしく、フィリピンと pH 的には変わらないみたいです。ただ、日本の水道水の安全基準は法律で市販のミネラルウォーターより厳しいらしく、雑菌や汚染など別の理由で水質が別格なのかもしれません。 日本と比べるとフィリピンの水道水は飲めませんからね。 日本の水道水は高度な浄水技術によりそもそも安全！！ 美容師さんは普段お仕事柄、 pH コントロールしてキューティクルを開いたり閉じたりしてカラーやパーマしたりするので pH が原因の一つだと思ったんでしょうね。 フィリピン留学のプロ・韓国人留学生は「シャワーヘッド持参」が常識？！ 実は、セブ島に多く集まる韓国人留学生たちの間では、 「フィリピンに行くなら自前のフィルター付きシャワーヘッドと、大量の替えフィルターをスーツケースに詰めて持参する」 のが常識らしい。 韓国は日本以上に水道水フィルターの普及率が高く、水質変化ã

1«ã‚ˆã‚‹è‚Œè’れや抜け毛への危機感が非常に強いです。 彼らに言わせると、 「フィリピンのシャワーをフィルターなしで浴びるなんて正気の沙汰じゃない」 とのこと。 フィリピン暮らしのプロである彼らがそこまで徹底しているのを見て、「やっぱり水質対策は気のせいじゃなく、海外生活の必須項目なんだ」と確信しました。 フィリピンのLazadaでフィルター付きシャワーヘッドを買って使ってみる フィルター付きのシャワーヘッドを Lazada（フィリピンの通販アプリ）で探すことにしました。 pH 調整でき、不純物を取り除けるシャワーヘッドを見つけたので早速購入。 約 240 ペソでした。値段も値段なので効果も期待せず、「ダメだったらまた別のものを探せばいい」ぐらいの気持ちで試してみることにしました。 そもそも、このアプリでは安いのが売りなので質の良いものはあまり売ってません。ちゃんとしたものを買いたいなら信頼あるメーカーから取り寄せたり、日本で購入したほうがいいかもです。 結果・髪の毛がマシになった 以下のような改善が見られました。 シャンプーの泡立ちが良くなった シャワー中のカルキ（塩素）臭さが減った ドライ後のオイルが必要なくなった シャワーヘッド取り替えて 4 週間後、美容院に行ってみると…。 以前よりマシになりましたね！指通りが違います。 ヤッ｡٩(ˊᗜˋ)و\\\\*｡ター！効果あったみたいです！！！ コスパからするとかなりいいんじゃないでしょうか? どうやら硬水の方がもっとヤバいかも 日本の水は軟水、フィリピンの水は硬水です。 フィリピンの水は石灰が含まれているので、水回りのあちこちが白くなります。 調べていくうちに、この 硬水がもっとヤバい かもということが発覚しました。 【弊害その 1】髪がきしむ 髪を洗うと硬水のミネラルと髪のタンパク質が反応し付着したままになることがあります。 また、シャンプーなどの洗浄剤がミネラルと反応してできたいわゆる石鹸カスも、髪の上に残りやすいです。 しかもこの石鹸カスは水に溶けず髪に残留しやすい性質です。その結果、髪がきしんだ状態になってしまいます。 流しの白い汚れ（ウロコ）がそのまま頭皮や髪の表面に残っているのを想像してみてほしいです。 【弊害その 2】髪や頭皮が乾燥 髪や頭皮に残った石鹸カスは乾燥を引き起こします。その状態が蓄積されると、髪がゴワゴワの干し草のように…。 お肌の乾燥は油脂分泌を促すので、頭皮に良くないです。セブは常夏で、ただでさえ頭皮から脂の分泌が促進されがち。道理で抜け毛が増えるわけだ。 ※ 元・美容インストラクターなので、肌の構造やメカニズムには詳しいです。 【弊害その 3】シャンプーが泡立ちにくい 硬水に含まれる金属イオンがシャンプーの成分と反応し、界面活性剤の働きを妨げます。結果、余分な皮脂や汚れを取り除けません。 セブに来たての頃、シャワーのたびに「なんでこんなに泡立たないんだ」って思ってたけど、そういうことだったのね…。 【弊害その 4】石鹸カスが邪魔してトリートメントが効かない 水でも流せない石鹸カスが残っている髪に、トリートメントの効きは悪くなります。 私は何回トリートメントをムダにしてきたんだ…。 日本のシャンプー＆トリートメントを使っている人は要注意 わざわざ日本からシャンプーやトリートメントを持ってきて使っている人も結構います。 日本で使われているシャンプーなどの多くは日本の水、つまり軟水用に開発されていることが多いようです。 軟水仕様のシャンプーは硬水（ミネラル類）と化学反応が起こるなど、相性が悪い可能性があるので注意が必要です。むしろ現地のシャンプー・トリートメント（硬水向け）を使ったほうが良いこともあります。 まとめ・高いトリートメントでヘアケアするより、まず使用している水を見直す まだまだ時間がかかりそうですが、髪の状態はだいぶ良くなりました！ 私は現地で調達したシャンプー・トリートメント（LUX）を使っていますが、髪を乾かした後もまとまã

1‚‹ã‚ˆã†ã«ãªã‚Šã¾ã—た。 人間は何か解決しようとするとき、つい足し算の発想になるけど足せばいいってもんじゃない。引き算も大事。 実は硬水は軟化させる装置やフィルターもあるみたいなので、もっと髪をいたわりたいならそういうものも用意したほうがいいかもしれません。 今回は、海外生活で髪が傷んだり抜け毛に悩んでいる人のために、その原因や実際に試して効果があったことを記事にしました。 抜け毛に関しては暑さによる皮脂の分泌も関係している可能性もあるかもです…。 この記事が、みなさまの海外生活の一助となれば幸いです。 最後までお読みいただきありがとうございました。 参考 健康的な髪の毛は「弱酸性」｜髪の毛と pH の関係について解説！ 海外に行くなら水質に注意！硬水が髪の毛に与える影響と対策を解説 おまけ・イラストは Colipot で作成 今回は Colilot に含まれる Designer という AI ツールでイラストを作らせました。 ものの数分（秒かも）で 4 枚イラスト完成。 ただ「3 人の 20 代のオシャレな正面を向いた男性」と依頼したら ホストチックな見た目のトリオ（三人組）が爆誕 してしまいました。 「オシャレ」とか抽象的な言葉を使ったせいでですね。言葉選びは気をつけねばと思いました。","noindex":false},{"slug":"entry529","title":"夢を諦めるのは辛い。それでも人生は続く。あきらめた祖父が遺した「後悔の引き際」","date":"2024-03-05","modifiedDate":"2026-07-01","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2024/entry529.webp","description":"夢を諦めるのが辛い、人生あきらめたいと悩むあなたへ。周囲に反対され夢を諦め、後悔と共に生きた私の祖父の物語。後悔しない覚悟を決めるには、自分で選択すること。人生には大縄跳びのように何度でもチャンスの縄が巡ってきます。後悔の正体を知るヒント。","tags":["家族","磨耗しない人生"],"body":"もうこれ以上、頑張れない…… 夢を諦めるのは本当に辛いけれど、そろそろ諦める覚悟を決めなきゃいけないのかな？ 今、人生をあきらめてしまいそうなほどの大きな挫折の中で、一人で苦しんでいませんか？ 祖父の人生は 後悔そのもの で、最終的には自ら命を絶ちました。 私が生まれて初めて参列した葬式はその祖父のものでした。私はまだ1歳で記憶もありません。 両親は祖父の自死を隠してました。私が 10 代の頃、姉がこっそり教えてくれました。未だに我が家では死因に触れることはタブーのようで、私も両親に聞かないようにしています。 夢を諦めて、死ぬまで心と折り合いがつかず、後悔して生きた祖父。 ですが、そんなおじいちゃんが命をかけて遺（のこ）してくれた「 後悔との向き合い方 」には、今を生きる私たちの重荷を少しだけ軽くしてくれるヒントがありました。 後悔しないために、後悔の正体を知る。 人生は選択の連続です。今日はおじいちゃんの後悔の人生と、そこから私が学んだ「これからの生き方」を綴っていきます。 親戚に反対され、しぶしぶ夢を諦めた祖父の挫折 祖父は山口の片田舎の家の長男として生まれました。 祖父には夢がありました。役者になることです。母曰（いわ）く器用に何でもこなす人だったそうです。 当時の日本は戦争が終わったばかり。特に田舎では、男がフラフラと役者になるなんてとんでもない話でした。 上京するつもりだったみたいですが、親戚一同に大反対されました。 ここから諦めなければならなかった夢と、その未練に蝕（むしば）まれる祖父の人生が始まります。 酒に溺れ、å

1®¶æ—ã«æš´åŠ›ã‚’振るうようになった本当の理由 手先の器用だった祖父はその後左官業で身を立てていたそうです。 祖父は嫁と、私の母を含めた 4 人の子どもを持ち、夢を諦めて一旦落ち着いたかのように見えました。 毎夜酒に溺れ、家族に暴力を振るうようになりました。 ついに、母の母である私の祖母は 3 人の娘を置いて、幼かった母の弟だけ連れて逃げ出したそうです。 年の離れた姉たちも次々出ていき、まだ学生だった私の母だけ祖父のもとに残されました。 ここから 4 年間、地獄のような子供時代が始まったそうです。 「貧しかった。朝、冬のとても寒い中、よく父と海岸に打ち上げられたイカを拾いに行った」 「酔っ払ってわからなくなった父が包丁を私に投げてきて足に刺さった」 「真っ暗な夜道を歩いて父の酒を買いに行かされた」 母の幼い頃の祖父との記憶です。思い出したくないから、母はいつも忘れる努力をしていました。 だからか分かりませんが、私も祖父に対して顔も名前も知ろうとも思いませんでした。 【仮説】自分の気持ちに折り合いがつかず、心が壊れてしまった 祖父が酒に溺れるのも、暴力もすべて、決して許されることではありません。母の心には大きな傷が残ったことでしょう。 しかしここであえて、祖父の気持ちを考察します。 もし、無理にでも上京していれば もし、親戚の反対を押し切ることができたなら 自分の夢は叶えれたかもしれないのでは？ 祖父は自分の置かれている現実と夢に挑戦すらできなかった未練に折り合いがつかなかったのではないだろうか。 受け止められない現実と無念が後悔になり、酒に溺れ、家庭内暴力に走り、最後には自殺に至ったのではないか。 すべて私の憶測です。なんせ会ったこともなく、手がかりは母からの話だけですから。 母はたまに「心が弱かった」と祖父のことを言います。 深い、深い後悔は人生を狂わせるのではないでしょうか。 「人生あきらめ」の淵から前を向く、後悔との向き合い方 祖父は心では夢を諦められず、人生を狂わせてしまった。 死ぬまで、矛盾する気持ちに折り合いがつきませんでした。 私も実は若い頃、心との折り合いがつかないまま「やりたいこと」を諦めてきた人間でした。 私は学生の頃漫画家やイラストレーターになりたくて、働きながら専門学校へ行くつもりでした。しかしデキ婚で夢を追うことはできなくなってしまいました。 子どもができたとき、若い頃やりたかったことの殆どのことを諦める覚悟をしました。でも心の底ではどこか諦めきれない気持ちを抑えられませんでした。 家族の中では死んでもなお腫れ物のような存在だった祖父でした。でも自分が同じような立場になり、それまで興味のなかった祖父のことを、後悔を手に取るように分かったのです。 祖父のような人生は歩みたくない。祖父のような後悔しないためにはどうすればいいか、、、考えるようになりました。 自分のやりたいことを忘れなければ、いつかチャンスは巡ってくる 20 代後半、子どもが原因で会社をやめて他の仕事を探さなければならなくなりました。 不幸中の幸い、この求職中にまとまった時間が作れる事に気が付きました。仕事が決まるまでの 期間限定 で漫画を描こうと心に決めました。出版社に 8 本くらい短編(30 ページ程度)を送りました。ありがたいことに 2 度奨励賞をもらいました。 しかしながらすぐ失業保険受給期間も終わりが近づき、仕事を本腰を入れて探さなければならなくなりました。 夢だった漫画家やイラストレーターになることは再び諦めましたが不思議と清々しかったです。とてもすっきりした気持ちになれました。理由は短期間でも夢へチャレンジできたからだと思います。おかげで 「漫画家やイラストレーターになる夢」を 諦めた無念から開放 されることができました。 その後も、過去諦めた夢を叶えるチャンスは、ふと、巡ってきます。 学生の頃の「海外で働く夢」も、 20 年以上たった今、叶えることができています。 チャンスとは眼の前の大縄跳びを想像します。 1 回目の大縄の中に飛び込めなくても、縄が回っているうちはチャンスはなくなりません。1000 回目でもいいから飛び込めばいいんです。 うまく飛び込めなくても機会が巡ってくれば、またチャレンジすればいい。 人生には回っている大縄がたくさんあって、生きているうちはいつか、何かのチャンスが巡ってきます。 100%のやりたいことができなくても、それに近い道を探す 子どもを出産してしばらくして、爪にアートするネイリストという職業があることを知りました。 これならなんとかできそう！紙からキャンバスを爪に変えればいいだけの話！！ 私は絵が描きたかった。どんなキャンバスでも良かったã

1®ã‹ã‚‚しれないです。 やってみたら性に合っていて、漫画家やイラストレーターになるためにしてきた絵を描く練習も役に立ちました。 私はすぐにネイルに夢中になり、難関であるネイリスト検定一級合格だけでなく NAIL EXPO で入賞することもできました。 大学中退・デキ婚。社会的弱者の私が、ネイリストにチャレンジしたおかげで世間的に認められ、自信をつけることもできました。 【一番大切】最終的に自分のことは自分で決め、責任を持つ 祖父は親戚に大反対されて役者の夢を諦めました。 田舎に残ることは祖父にとって押し付けられた人生です。頭では納得できなかったことと想像します。 現実との心の矛盾が祖父の人生を狂わせたのだと。 人生では納得できないことをしなければならないこともあります。 私はデキ婚です。子どもができてしまったから結婚し、やりたいことを諦めざるを得ませんでした。しかし心の底のどこかで納得できませんでした。 祖父の人生と重ね、この納得できない気持ちはどこから来るのか考えました。人や不可抗力のせいにしているからです。選んだレールや道が「これは自分が選んだんじゃない」って思っているうちは、いつまでも納得できないのです。 出産も結婚も、選択肢がなかったにせよすべて自分が決めたこと。すべての責任は自分にある。 選択肢がなかったとしても、自分の決めたことだと肚（はら）をくくれば覚悟もできます。 まとめ：夢を諦める覚悟の先で、後悔の正体と向き合う 後悔って一体何なんでしょうか？ 自分の過去に失敗したりできなかったことを残念に思ったり、後から悔やむことです。 私の人生だって後悔だらけといえば後悔だらけです。 私の昔勤めていた会社の上司がよくこんなことを言ってました。 「あのとき、〇〇しておけば良かった。」 その言葉を聞くたび、過去できなかったこと・失敗したことをいつまでも悔いていることが健全じゃないと感じるようになりました。 過去はどうあがいても物理的にやり直しできない。できないことをやろうするのは、ノイローゼみたいなものです。 後悔のない人生なんてない。 やりたいことはやり尽くして死ぬ これは私の人生の目標の一つです。 自分のことは最終的に自分で決める。選択するときは、責任を持ち覚悟をする。そうすれば自ずと人生で蓄積される後悔は減っていくはずです。 私の先に、未練と後悔に苦しんだ生涯を過ごした祖父がいたからそう思えるようになりました。祖父とは生きて会うことはできませんでしたが、たくさんの学びをもらえたことを感謝しています。 この記事が、あなたの後悔との向き合い方の一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry528","title":"Cropper.js 使い方｜画像のリサイズ・ダウンロードをJSで実装","date":"2023-12-28","modifiedDate":"2026-03-15","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2023/entry528.webp","description":"Cropper.jsを使って、ブラウザ上での画像リサイズとダウンロード機能を実装する方法を解説。フォームからのアップロード、トリミング、そして重要となる「Base64からバイナリファイル（Blob）への変換」まで、2026年現在のモダンなJS（Vanilla JS）での書き方を紹介します。","tags":["JavaScript"],"body":"アップロードした画像のリサイズを手軽にするために cropper.js というライブラリを使ってみました。 やりたかったこと フォームから画像ファイルをアップロード cropper.js で決まったアスペクト比・規定のサイズでトリム トリムした画像を自動ダウンロード 前提条件 JS ライブラリを扱ったことがある HTML・CSS の基礎知識がある JS でファイルのアップロード機能を実装 まずはアップロード機能を作ります。今回はinput[type=file]にidを振って操作します。 accept属性でアップロードできる画像ã

1®ç¨®é¡žï¼ˆpng,jpg）を限定します。 JS でimg タグを追加してcreateObjectURL()でパスを生成、追加します。挙動としてはアップロードするとどんな画像がアップロードされたかビジュアル的に確認できます。 createObjectURL() 静的メソッド | MDN CANIUSE や ChatGPT によるとcreateObjectURL() は 現在非推奨 とされているそうです。あえて使った 理由 はこちら。 Cropper.js でトリム機能を追加、データ書き出し Cropper.js で画像のトリムを行います。操作と、実際にトリムした画像データを出力するまでを解説します。 Cropper.js 公式サイト 今回は CDN を使います。 cropperjs | cdnjs Cropper.js でトリム操作できるようにする Cropper 追加方法はこんな感じ。 すでにある画像要素にCropper()させたい場合は要素を getElementById や querySelector などで引っ張ってきて第一引数に入れれば OK。 画像アップロードと同時にトリム操作可能になります。 オプションとメソッド 今回設定したオプションは以下です。固定でアスペクト比 1:1 に切り取りたかったのでaspectRatioをセットしました。 | オプション | 説明 | 初期値 | | ------------- | ---------------------------- | ------ | | aspectRatio | ボックスのアスペクト比の固定 | NaN | | scalable | 画像の拡大・縮小操作できるか | true | | zoomable | 画像のズーム操作できるか | true | 公式のOptions（英語）です。 画像が再アップロードされて入れ替わったとき、一度インスタンス化したcropperの 画像パスを切り替える処理です。replaceメソッドを使います。 公式のMethods（英語）です。 リサイズしたデータを base64 変換 getCroppedCanvasを使って、トリムしたデータを一度canvasにします。toDataURLを使って base64 変換します。 console.log で base64 化できたかを確認します。 base64 データをバイナリ化して自動ダウンロード リサイズした画像を実際の JPG ファイルに変換してダウンロードします。 atob...Base64 文字列をバイナリ文字列へ変換 Uint8Array...8 ビット符号なし整数値の配列を生成 charCodeAt... メソッドは、指定された位置にある UTF-16 コード単位を表す 0 から 65535 までの整数を返す。 Blob(source, option)... Blob コンストラクターは、新たな Blob（Binary Large OBject） を返す。 データがバイナリ化出来たらaタグを生成し画像へのリンクを貼り、強制的にクリックして画像をダウンロードさせます。 300✕300px で resize-1703724887608.jpg とリネームされた JPG ファイルがダウンロードされました。 createObjectURL() を使う理由 createObjectURL() は、非推奨という記事も見かけたので ChatGPT に聞いてみました。 私の知識の範囲では、2022å¹´1月までの情報しか含まれておらず、最新の情報は提供できません。代わりに、File や Blob を直接使用して処理する方法が推奨されています。 え、、2023年更新の記事にも検証結果が載ってたんですが。。。 CANIUSE で調べると思いっきり createObjectURL() is no longer available within the context of a ServiceWorker.(ServiceWorker のコンテキスト内では使用できなくなりました。) って書いてありました。 Service Worker はブラウザがバックグラウンドで実行するスクリプト。 今回は Service Worker は関係ないので、あえてcreateObjectURL()を使います。次回また、fileReader() を使った方法をご紹介します。 まとめ・画像は JS で直感的にリサイズできると ◎ 今回実は会員証の画像のアップロードさせたくて Cropper.JS を試してみました。 ファイル名、拡張子、アスペクト比、サイズがバラバラだったら受け取ったあとの管理が難しいですしね。 使ってみたら想像以上に便利だったので、使い方をご紹介させていただきました。 この記事が、みなさんのコーディングライフの一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。 おまけ・Cropper.JS のボックスに顔の位置のガイドを付ける 証明写真撮影マシーン（？）で撮影すると顔の位置ガイドってありますよね？ Cropper.JS のボックスにもつけれないかなーと思ったらあっさり出来たのでその方法のご紹介しておきます。 CSS だけで OK。サイズ等は適宜変更してください。","noindex":false},{"slug":"entry527","title":"フィリピン・セブのゴミを再利用エネルギーに！リサイクル企業 Guun さんに潜入してきた","date":"2023-11-20","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2023/entry527.webp","description":"フィリピン・セブのゴミをリサイクルしフラフ燃料に変える日系企業 Guun さんの工場見学に行きました。地元の雇用や自治体のダンプサイトの埋め立てゴミの削減に貢献しているGuunさんの活動をレポート。SDGｓへの取り組み。サステナビリティー。","tags":["セブ島","セブの面白い会社"],"body":"先日、フィリピンで廃棄プラスチックのリサイクルプロジェクトに取り組む企業 Guun Co. Ltd. Philippine Branch さんにお邪魔してきました。 ご案内いただいたのは、フィリピン支店副支店長でブルーエコノミー研究所シニアマネージャーの原木裕さんです。 工場見学することになったきっかけですが、友達とスペイン料理のお店「Terry\'s Bistro & Gourmet Store」に行ったら、たまたま隣のテーブルに日本人の方々を発見。しかも私の友達の知り合いという偶然。 お店情報 : Terry\'s Bistro & Gourmet Store (Cebu City Branch) 今度、ぜひうちの工場に遊びに来てください。 え？！私、（工場好きなので）マジで行きますよwww ワタクシ、約束は守る女。ということでメールを送り付けアポを取り、工場見学してきましたのでそのお話をシェアします。 まず、フィリピンのゴミ問題について フィリピンに住んでいると道端にゴミがガッツリ落ちているのが当たり前。私の住む IT パークも一歩外に出ればご覧の通り。 本当、清潔感に関しては日本はいい国やなぁ。。。 と、しみじみ思います。 なぜ Guun さんはフィリピンのゴミ問題に取り組むようになったのか セブ市と横浜市が、持続可能な都市開発に関する都市間連携の覚書を交わしており、2012年に横浜市Y-PORT事業による現地合同調査に弊社が参加し、現地の廃棄物処理に関する課題を知ったことが、廃棄プラスチックのリサイクルプロジェクトに取り組むきっかけとなりました。 ほへー、そうなんですか？！！ Guun さんのプロジェクトは 2012 年からスタートしています。 セブ市のごみ埋め立て処理場のゴミの成分を分析、燃料として再利用できないかと調査を始めたそう。 当時、Guun さんはセブの地方自治体と約 3 ヶ月間 ゴミ捨て場（ダンプサイト）に捨てられるゴミを調査し、再利用できるものがあるか模索しました。 そもそも、ペットボトルなどの素材・プラスチックって 石油からできている じゃないですか？つまり、燃料として使えるんですよ。 なるほど！！確かに！！！ 「きちんと」処理すればゴミも再利用できる Guun さんの調査の結果、家庭から廃棄されるゴミは フラフ燃料 として十分再利用できるということが分かりました。 しかも、石炭より CO2 排出量が少ないのも魅力です。 | 比較 | フラフ燃料と石炭の比較 | | ------------ | ---------------------------- | | CO2 排出 | 17% 削減（※） | | カロリー価 | 同レベル, 5,000 kcal/kg 以上 | | 水分含有量 | 20％以下目標 | ※ Guun さん調べ ゴミを減らして、CO2 削減できるのってすんごくないですか？ フラフ燃料とは？ フラフ燃料とは 廃プラスチック類を主原料とした、細かく砕かれた状態の燃料 のことだそう。 ゴミとして廃棄されたプラ袋やお菓子の袋は 燃料として再利用 できるんですよ？！10 年以上前からフィリピンでゴミ再利用してフラフ燃料化する取り組みをしていた Guun さん、感慨深いです。 昨今、サステナビリティ（広域で環境・社会・経済の 3 つの観点からこの世の中を持続可能にする考え方）に対する関心が社会全体で強まっています。Guun さんはまさに先駆者ですね。 ゴミがフラフ燃料になるまで Guun さんに搬入されたゴミは大まかに仕分けられます。 燃料になるゴミのみを手作業で仕分けます。 最後に特殊な機械でゴミを細かくし、圧縮します。 0.5 トンもある完成したフラフ燃料 フラフ燃料の用途 フラフ燃料 の用途ってご存知ですか？ ズバリ、主に最先端のセメント製造技術に活用されています。セメントを生成するためには高熱で熱する必要があるそうです。 UBE 三菱セメント株式会社 HP より引用 今や急激に経済成長しているフィリピン。建築ã

1‚„インフラ整備に必要不可欠なセメント生成にフラフ燃料が一役買っているワケです。 Guun さんとフィリピン国内の自治体との歩み 日本ではゴミの分別は当たり前ですが、フィリピンでは比べものにならないくらいゴミの分別に関するルールは自治体に依存します。 ちなみに私の住むセブ市では、ほぼ分別せずにゴミを出しています。 一方、お隣のマンダウエ市では住民が分別する習慣が根付きつつあるそうで、リサイクルしやすいゴミがだいぶ増えているとのこと。 今では弊社に持ち込まれるマンダウエ市の ゴミの85％がリサイクル に繋がってますが、最初はそんなことなかったんですよ。横浜市の事例を参考に、「こうしたらいい！」というフィードバックを重ねました。結果、リサイクル率が向上したんですよ。 ほーーー!!!フィードバックと地方自治体 との連携が大切なんですね。時間をかけ、住人への「 なぜ分別する必要があるのか」を伝え続けることがカギなんですね。 フィリピンのゴミ処理の現状 現状、基本フィリピンの ゴミ処理は埋め立て です。 私も何度か訪問したことがありますが、フィリピンにはゴミを捨てる場所、いわゆるゴミ山（ダンプサイト）があります。 ダンプサイトでは、ゴミを拾って売ることで生計を立てる人も住んでいます。 フィリピンのスラム街の様子を知りたい方はこちらをご覧ください。 地方自治体と民間企業でタッグを組んだら、埋め立てるゴミの割合に変化が？！ Guun さんとマンダウエ市で協力し、住民にゴミを分別する大切さを伝え続けた結果、変化が起こります。 なんと埋め立る ゴミが全体の半分に削減 できたんです！これは市と協力して住民に訴求し続けた結果です。 すごい成果ですね！！伝え続けることって本当に大事ですね！！！ セブで環境問題に取り組みたい地元の企業やボランティア団体とも連携する Guun さん もちろん、家庭ゴミだけではなく環境問題に取り組む企業様からもゴミを回収しています。SDGs に取り組む企業様も増えてますからね。弊社ではゴミを納入された企業様へ証明書を発行しています。ゴミを納入いただいた企業様が、どれだけ環境に貢献したかわかりますしね。 またセブの日本人会や日系ダイビングショップが開催するゴミ拾いのアクティビティに参加し、集めたごみをダンプサイトに持ち込むのではなく、弊社で処理するようにしました。 神守（本名）さんもご存知通り、セブも広いんですが、、、、わざわざ遠くからトラックをレンタルしてゴミを持ってきてくれる、ゴミ問題に関心のあるボランティア団体もあるんですよ。 え？！！そんな遠くからボランティア団体が Guun さんの取り組みを知って来るなんて、、、世の中は本当にリサイクルや環境への意識が高まっているんですね。 まとめ・ゴミを再利用するのは環境にやさしい 今回、工場大好きフェチで自分勝手にお邪魔した Guun さんでしたが、改めて環境問題に関して深く考える機会をいただけました。 原木さんとの会話の中で興味深い内容がありました。 リサイクルには2通り有るんです。例えばプラスチックを元通りの素材として再利用する方法と、弊社のやっているような燃料として扱うなど他のものに変えて再利用する方法です。ヨーロッパでは前者が主流です。 確かに、素材を元に戻すことができるのがベストかも知れません。 でもゴミとして川や海にあふれかえさせるよりは、断然燃料になった方がいいというのが私の見解です。最高の対応ã

1Œã§ããªãã¦ã‚‚、環境に対してベストを尽くしていることが大事だと私は考えます。 ゴミを燃料に変え、しかもセブでフィリピン人の雇用も生んでいる Guun さん、とてもステキでした。 隅々まで見学させていただいただけではなく、丁寧なプレゼン資料までご用意いただいた原木さんには心から感謝です。 人数規模にもよりますが工場見学を受け付けているみたいなので、興味のある方は Guun さんにぜひ足を運んでみてください。もちろん、事前に連絡・確認してくださいね。 Guun Co. Ltd. Philippine Branch 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry526","title":"MutationObserver でiframe内を監視｜DOMの変化を検知して処理を実行する方法","date":"2023-03-24","modifiedDate":"2026-03-15","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2023/entry525.webp","description":"iframe内のコンテンツが書き換わったタイミングで処理を動かしたい。そんな難題を「MutationObserver」で解決する実装方法を解説。loadイベントだけでは追いきれない動的なDOM変化をスマートに監視するコツを、2026年現在のブラウザ仕様に合わせて整理しました。","tags":["JavaScript"],"body":"JavaScript の 要素の監視ができる Mutation Observer を使う機会があったã

1®ã§ä½¿ã„方をご紹介します。 Mutation Observer とは？ MDN Web Docs によるとMutationObserver インターフェイスは、 DOM ツリーへ変更が加えられたことを監視できる機能 参照 : insertAdjacentElement MDN Mutation とは突然変異の意味です。 今回は画面操作するたびに変更されるiframe内の高さを取得して、スクロールさせないようにしたかったのでその方法をそのまま記しておきます。 frameまたはiframe要素で読み込まれているページが別ドメインである場合、クロスドメインの制約に引っかかり取得できない場合があります。 iframe 内の必要な要素の値を取得する ajaxなどで非同期で読み込んだコンテンツの表示が終わったら、iframeの高さを取得しiframeに直接スタイルを書き込みます。スクロールバーの表示されないので、埋め込み感がなくなります。 今回はiframe内で読み込まれるローディング画像の表示/非表示の変化を監視します。 contentDocumentで要素の中身を取得します。 HTML の領域のサイズを得るためにdocumentElementオブジェクトを参照します。 | 高さ | 詳細 | | -------------- | -------------------------------------------- | | offsetHeight | ボーダーやスクロールバーを含む高さ | | scrollHeight | マージン・スクロールバーを含まない内側の高さ | | clientHeight | ボーダーやスクロールバーを含まない内側の高さ | observe(監視)に追加できるオプションです。 | オプション | 説明 | | ----------------------- | --------------------------------------------------------------------------------------------------------------------------- | | subtree | targetをルートとしたNodeのサブツリーをモニタリングするか | | childList | ターゲットノードの子ノードの追加や削除を監視 | | attributes | ターゲットの属性の変化を監視。 | | attributeFilter | 監視する特定の属性名の配列。このプロパティが含まれていない場合、すべての属性の変更は変異通知を引き起こすデフォルトはfalse。 | | attributeOldValue | ターゲットの古い属性の値を記録 | | characterData | 文字の変更を監視。 | | characterDataOldValue | 古い文字のデータを記録。 | observe(監視)以外のメソットです。 | メソッド | 説明 | | --------------- | -------------------------------------------------------------------------------------------------------------- | | disconnect() | MutationObserver のインスタンスが今後の通知を受け取ることを、 observe() が再び呼び出されるまで停止します。 | | takeRecords() | MutationObserver の通知キューから保留中の通知をすべて削除し、 MutationRecord の新しい配列 (Array) で返します。 | 参照 : MutationObserver MDN おまけ・iframe内のデータ操作 iframe内の要素の操作方法の要素の削除方法のご紹介です。 iframe内の要素の削除 iframe の head内に style 追加 iframeを親要素になじませるためにスタイルを追加することも可能です。 insertAdjacentElement の使い方です。呼び出された要素から相対的に指定された位置に、指定された要素ノードを追加できます。 | メソッド | 説明 | | ------------- | ------------------------------ | | beforebegin | ターゲットの前 | | afterend | ターゲットの後 | | afterbegin | ターゲット内の最初の子要素の前 | | beforeend | ターゲット内の最後の子要素の後 | insertAdjacentElement MDN 同じ要領で、他の要素も追加できます。 iframe内の要素のクラスの削除や追加 まとめ・Mutation Observerを使えばイベント発火に関係なく監視したい要素の変化をキャッチできる 今回iframe内の要素の変化を監視して、iframeを操作する方法をご紹介しました。 Mutation Observer の他の使い方はまだやってませんが、可能性のあるAPIでした。 この記事がみã

1ªã•ã‚“のコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。 参照 : insertAdjacentElement MDN 関連記事もあわせてお読みください","noindex":false},{"slug":"entry525","title":"Intersection Observer でQiita風目次｜スクロール連動ハイライトの実装","date":"2023-03-23","modifiedDate":"2026-03-20","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2023/entry525.webp","description":"読者が今どこを読んでいるか一目でわかる「Qiita風の動く目次」を、Intersection Observer APIを使って実装する方法を解説。ライブラリ不要で軽量、かつスクロールにピタリと追従するハイライト機能のロジックを2026年の最新JSで整理しました。","tags":["JavaScript"],"body":"JavaScript の 要素の監視ができる Intersection Observer API の使い方をご紹介します。 Intersection Observer API とは？ MDN Web Docs によると祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視。 参照 : Intersection Observer API MDN 小難しいので平たく言うと、このAPIを使うと画面上に表示されている要素の変化を監視できます。 ちなみに Intersectionは交差、Observerは観察（者）という意味でです。 具体的にどんなことに使えるかと言うと、、、 ページがスクロールした際の画像やその他のコンテンツの遅延読み込み インフィニティスクロール 見出しの表示されたら対になる目次の項目への装飾（Qiita風） ユーザーのアクションに応じた（ボタンクリック等）、処理 Can I Use によると IE、Opera Mini を除く最新ブラウザに対応しているとのこと。 その他の Observer API 他にもObserver APIはあります。 MutationObserver...要素の変化を監視 ResizeObserver...要素のリサイズを監視 PerformanceObserver...パフォーマンス測定イベントを監視し、ブラウザーのパフォーマンスタイムラインに記録されているので、新しいperformance entries の通知を受けるために使用。 基本の使い方 まずは監視する領域(observer)を作成します。コンストラクター（newするやつ）を呼び出してしきい値が一方向また他の方向に交差する度に実行されるコールバック関数を渡します。 | オプション | 説明 | | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | root | 観測したい要素が見えるかどうかを確認するための表示領域（ビューポート）として使用される要素。指定しない場合はブラウザーの表示領域（ビューポート）。CSS の margin プロパティのように指定可能。 | | rootMargin | root で指定した要素の周りのマージン。 | | root | しきい値。ターゲットがどのくらいの割合で見えている場合にコールバックを実行させるかの値。既定値は0なので1pxでも表示されたら実行。50%の場合は 0.5。25%毎に実行する場合は［0, 0.25, 0.5, 0.75, 1］という感じで配列で指定。 | ターゲットとなる要素を指定します。 .targetが表示されたらコールバック関数が実行されます。 IntersectionObserverEntryから取得できるプロパティです。プロパティは操作不可で読み取り専用です。 | 取得できるプロパティ | 説明 | | -------------------- | ------------------------------------------------------------ | | time | 交差が記録された時刻 | | target | ターゲット要素 | | rootBounds | 交差を監視しているルート | | intersectionRatio | intersectionRect と boundingClientRect の比率 | | intersectionRect | 対象の表示領域 | | boundingClientRect | ビューポートに対する相対位置 | | isIntersecting | 論理値で、対象要素が、交差を監視しているルートを超えたどうか | | isVisible | ターゲットの要素が表示されているか | 実際Qiita風の目次を作ってみる 簡易的ですが、Qiita風の目次を作ってみます。該当の見出しが表示されたら、目次のリンクの背景の色を変えます。 JavaScriptです。isIntersectingプロパティがtrueになったら、IDとリンクURLが一致するか判定。class=\\"current\\"を付与し、そうじゃない場合はクラスを削除します。 Intersection Observer API sample まとめ・ Intersection Observer APIを使えばscroll系のJSを使わずカンタンに実装できる 昔はこんな感じの実装はscroll系のJSを使って処理していましたがIntersection Observer APIを使えば手軽に実装できますね。 Intersection Observer APIを使えばパララックスもカンタンに実装できます。 この記事が皆さんの、Web制作の一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。 | メソッド | 説明 | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | disconnect() | 対象を監視することを停止 | | unobserve() | ターゲット要素の監視を停止 | | observe() | ターゲット要素の監視 | | takeRecords() | ターゲット要素のうち、前回交差状態がチェックされたもしくは自動的にオブザーバーのコールバックが呼び出された以降に交差状態が変化した要素の配列を返す。コールバックを使用してこれらの変更を監視している場合は、このメソッドを呼び出す必要はない。かつ処理待ちの交差リストをクリアしてしまうのでコールバックが実行されない | 参照 : Intersection Observer API MDN 関連記事もあわせてお読みください","noindex":false},{"slug":"entry524","title":"FAQ構造化データでクリック率上がるの？【検証実験】してみた","date":"2023-03-02","modifiedDate":null,"category":"seo","categoryName":"SEO対策・デジタルマーケ","ogImage":"/thumbnail/2023/entry524.webp","description":"最近、SEO界隈でFAQの構造化データ（FAQPage構造化データ）がクリック率が上がるということで話題になってますよね？本当にクリック率が上がるのか、その他どんな影響があるのかを当ブログで試してみました。","tags":["Web解析","構造化データ"],"body":"最近巷（ちまた）で、FAQの構造化データ（FAQPage構造化データ）を設置するとクリック率が上がることがSEO界隈で話題になっています。 FAQPage構造化データが設置されているWebページは検索するとこんな感じで表示され、確かに目立ちます。 FAQPage構造化データはクリック率が 120%アップ したウェブサイトもあるとかで、SEOにはかなり有用なパーツ だとか。 ブログ運営者であれば、クリック率の伸びは悩みのタネ。。。 こんな美味しい話飛びつきたくなりますよね？ 本当〜〜〜？そんな簡単にクリック率が上がるんかいのう。 そこで本当にクリック率が上がるのか、その他どんな影響があるのかを当ブログで以下のように検証してみました！！ | 項目 | 詳細 | | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 検証期間 | 1ヶ月(2月) | | 対象記事 | 優良記事もともと自然検索からの流入数のある記事改善余地のある記事クリック率3%以下、検索上位20位までに入る月間100インプレッション以上ある記事 | ※FAQPage構造化データが反映されるまでの期間は含みません。 FAQPage構造化データはホントにクリック率上がるのか？ 現時点での結論です。 クリック率は少しだけ上がりました。 実際のクリック率の推移です。 | 優良記事 | 改善余地のある記事 | | --------------------------- | --------------------------- | | 8.34% → 8.81% (0.47%改善) | 2.80% → 3.13% (0.33%改善) | 正直、期待以上の結果は得られませんでした。 そもそもがB to Bで効果を発するみたいなので、効果が得られなかったのかもしれません。 さらに 質問と解答の文章設計も力を入れないとクリックに至らないと反省しました汗 うまくハマった記事に関しては、プラス3.9%以上もクリック率が伸び ました。クリック率が下がったとしても、その差はどれも0.2%前後 です。全体的には悪くない結果となりました。 FAQPage構造化データが直帰率に与える嬉しい影響 私が検証前に打ち立てた仮説はFAQPage構造化データを設置後「クリック率が上がる分、直帰率が上がる（悪くなる）」です。 普段クリックしないユーザーが流入し、単純に直帰率が上がると思ったからです。しかし予想外の結果になりました。 直帰率が予想外に改善した。 | 優良記事 | 改善余地のある記事 | | ---------------------------- | ---------------------------- | | 16.74% → 14.60%(2.14%改善) | 16.70% → 11.24%(5.46%改善) | ※GA4のデータを参照。 改善余地のある記事に関しては平均5%以上改善しました。中でもクリック率が上がった記事は 最大で約11%直帰率が改善 した記事もあります。 FAQPage構造化データを設置することによって、検索時に記事の詳細情報が増えるため、流入時にミスマッチを防げるからだと思います。 今回の検証実験で気づいたこと 今回の検証で気づいたことをまとめます。 何でもかんでも構造化データを設置すりゃいいってもんじゃないんです 表示回数が少ない記事はそもそもFAQPage構造化データ自体が表示されない 今回20記事くらい選定したã

1®ã§ã™ãŒã€ãã‚‚そも表示回数やクリック率が少ない記事は表示すらされていませんでした。 そんな記事はリライトするか、思い切ってnoindexするべきですね汗。 もともとクリック率の高い良質の記事には設置しないほうがいい FAQPage構造化データを設置したせいで直帰率、クリック率ともに下がってしまった記事があります。 悪くなった記事に共通点は もともと1、２を争う良質の記事 だったということです。 仮説ですが、記事に流入する前にFAQPage構造化データを見てユーザーに必要な情報が入ってしまったので、記事に流入しなくなってしまったのかもしれません。 FAQの質問と回答は「クリック率が惜しい検索キーワード」に対して作って設置するのが○ 今回、質問と解答の文章はキーワードに沿って作りましたが、キーワード選定に失敗しました。 とにかくFAQPage構造化データを表示させたかったので、クリック率が高いキーワードに沿って作ってしまった のが原因です。 検証データから分かったことがあります。FAQPage構造化データで狙えるのは、検索一覧には表示されているのにクリックを逃している記事のクリック率の改善 です。 なので質問と解答が、クリック率の惜しいキーワードじゃないと改善が見込めない ということです。 クリックされてない記事を掘り起こすには、キーワード単位で 20位以上 なのに クリック率が低いもの を狙うと効果が出やすいようです。 たった数%のクリック率UP だけど全体で日平均30PV増えた 今回、月にして1000近くPVが増えました。 全体的にはクリック率の改善自体は1%切りますが、大きくクリック率が伸びた記事もあったおかげでしょうね。 チリは積もるもんです！！！ FAQPage構造化データを設置するメリット・デメリット 今回FAQPage構造化データを設置し感じたメリットデメリットをまとめるとこんな感じです。 メリット 適した記事に設置したらちゃんとクリック率が上がる 検索したい内容と記事とのミスマッチを防ぎ、直帰率が減る 全体のPVが伸びる デメリット 質問と解答の文章設計の手間がかかる 適切に設置できなければ返ってクリック率が下がる 質問と解答のリライト等メンテナンスが大変 記事以外のメンテコストもかかるので運用は大変だと思いました。 反面適切に設置したときのクリック率の伸び、直帰が下がるのはかなり嬉しい効果です。 まとめ・FAQPage構造化データは設置する価値あり FAQPage構造化データの設置は、個人ブロガーなどはしんどいかもですが、マンパワーの使える企業ならやる価値はありそうです。 今回は巷（ちまた）の評判があまりにも旨すぎる話だったので、「本当にそんなにうまくいくのか？」と疑って自ら検証してみました。 今月はこの検証結果を元に新たな検証をしようと思います。 また、続きを報告しますね！！ 関連記事","noindex":true},{"slug":"entry523","title":"コンポーネント（部品）間で、複雑なデータの受け渡しをする【Vue3】","date":"2023-02-19","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2023/entry523.webp","description":"Vue.js でコンポーネント（部品）を作成する方法をご紹介します。開発環境準備、親から子、子から親へのデータ受け渡し方法について4つのサンプルを使って詳しく解説。Compostion API（Vue3）。チェックボックス、ラジオボタンをコンポーネント化。フォームデータのバインディング。","tags":["Vue.js","JavaScript"],"body":"最近 Vue.js を使っているのですが、コンポーネント化し、あれこれ拡張する必要に迫られました。どうしてもパーツをコンポーネント化して管理したかったã

1®ã§ã€ãã®ã‚„り方をまとめます。 親コンポーネントから子コンポーネント、子コンポーネントから親コンポーネントへのデータ受け渡し方法について4つのコードサンプルを使って詳しく解説していきます。 まずは開発環境があることが前提条件なので以下参考にしてください。 開発環境は作るほどじゃないという方は、手軽にVue.jsを導入する方法も紹介しています。 前提条件 Vue.jsのファイルをコンパイルできる環境がある Vue.jsのコンポーネントを使いたい Node や npm をインストールしていて、コマンドが使える コマンドの使い方がある程度わかっている Compostion API を使いたい 親（DOM）からコンポーネントに値を渡す 親コンポーネントから、子コンポーネントへの値の渡し方はシンプルです。 以下のようなサンプルを作成します。 今回はシンプルにHTML(DOM)上で、コンポーネントを使ったのでケバブケースで記載しました。 通常はテンプレート（コンポーネント）同士でやり取りが発生するのでキャメルケースで記述します。 では実際に格納された値を小コンポーネントに渡します。:post=\\"post\\" に格納された値を props で受け取ります。 親（DOM）からコンポーネントに値を渡す コードサンプル コンポーネントから親（DOM）にクリックイベントなどで値を渡す コンポーネントから、親(DOM)への値の渡し方はシンプルです。 フォームを入力したら、親に値を渡します。 親から子に渡すときは emit を使います。まずはコンポーネントから作成します。 コンポーネント側のボタンがクリックされると、渡したい値を emit にセットされます。 emit は第一引数がイベント名です。イベント名に キャメルケース は使えません ので注意しましょう。第二引数以降は渡したい値としてセットできます。 DOM側でイベント @info に showYourInfo をセットしておきます。 showYourInfo を作成し、イベント発火を感知したら値を受け取り処理します。 コンポーネント側から emit で渡した値は、第一引数はそのままイベント名となり 、第二引数以降は処理できるデータ として活用できます。 今回は値を受けとり、親側の変数に格納したかったので以下のような記述としました。 渡す値がなくボタンをクリックしたことのみをキャッチしたい場合は、受け取り側の引数は不要です。 受け取った値を利用して親側で動的に表示します。 コンポーネントから親（DOM）にクリックイベントなどで値を渡す コードサンプル 親子間の双方向データのやり取りする 親子間の双方向データのやり取りをしてみましょう。 一番最初に作った、「親（DOM）からコンポーネントに値を渡す」ソースコードのサンプルを改造します。今回は v-model を使います。 サンプルはお気に入りの記事に投票するというものです。選んだ記事のタイトルが下に表示されます。 selectedPost という選択した記事タイトルの値を格納する変数を用意します。 コンポーネント側です。選んだ値を格納する modelValue を props に作り、親から渡ってきた値を受け取ります。 チェックボックスが操作されたら votePost で、値を形成し直して emit で親に渡します。 HTML（DOM）側に Clear ボタンを作ります。 Clear ボタンを押すと、コンポーネント内の選択も外れます。 複雑なコンポーネントとデータ受け渡しをする 複数のコンポーネントを使って、双方向のデータのやり取りができるサンプルをご紹介します。 データの受け渡しイメージは以下のような感じです。 過去記事、json データの記事の絞り込みのサンプルに複数コンポーネントを追加します。 今回コンポーネント化する場所は、検索部分のみです。 ファイル構造はこんな感じです。 大枠の親コンポーネントを作る タグのチェックボックスの元となるデータを親から渡せるようにします。 日にちで並べ替えと、タグで絞り込み用に作ったコンポーネントを読み込みます。 タグはチェックボックスでこのあとの作業が何かと不便なので、Search コンポーネントの実装の時点で v-if (繰り返し処理)出力します。 コンポーネントを import します。 日付でソート（並べ替え）するコンポーネントを作る 日にちのソート機能をコンポーネント化します。 Search コンポーネントで作成した変数、 sortDate とデータをやり取りできるようにします。 props の sort に格納し、双方向データのやり取りをできるようにします。 ※ 部分は省いて紹介していきます。 タグ絞り込み部分をコンポーネント化する Search コンポーネントから受け取った tag の値を利用してチェックボックスを出力します。 JS部分は日付ソートとあまり変わりません。 検索とクリアボタンから、それぞれ処理したい値を親に渡す処理をする 検索と絞り込みで、親に更に値を渡して絞り込み処理をさせます。 ボタンのクリックイベントには、それぞれ emit で更に親に値を渡します。 sort には引数に検索条件を渡します。clear は絞り込みを解除するだけなので引数は指定しません。 search コンポーネントに属性に @search=\\"sort\\" と @clear=\\"clear\\" を追加します。 子コンポーネントでクリックなどのイベント発火時、親側で感知し、値を受け取れるようになります。 各ボタンのクリックされたあとの処理をします。 sort には emit から渡ってきた日付並べ替えと、タグ絞り込み用の値を渡せるように変更します。 clear は値を渡さないので、触らなくて大丈夫でã

1™ã€‚ まとめ・Vueコンポーネントを使うとコードが整理でき、メンテナンス性も上がる 今回はVueで値を受け渡すサンプルを4つご紹介しました。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry522","title":"Gulp4 x webpack で Vue.js の開発環境を作る","date":"2023-02-18","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2023/entry522.webp","description":"GulpとWebpackを使ってVue.jsの開発環境を作りました。ほぼ個人的な備忘録ですが、実務で使えるので実践的です。興味のある方は参考にしてください。今回は端折らず、丁寧に順を追って解説します。","tags":["Vue.js","Gulp","Webpack"],"body":"Vue.js を必要に迫られて久々に触りましたが、拡張性の高さと柔軟性にビビりまくってます笑 最近さらにコンポーネント化し、あれこれ拡張しなければなりませんでした。結構タスクランナーなどに頼らずに制作するのは限界があるなぁと思い、Gulp と webpack を使って改めて開発環境を作りました。 今回は Gulp と webpack を使った Vue.js の実務で使える実践的な開発環境の作り方をご紹介します。 手軽にVue.jsを導入する方法はこちらです。 前提条件 Gulpの使い方がわかる Webpackを使ってVue.jsのファイルをバンドル（まとめる）したい Vue.jsのコンポーネントを使いたい Node や npm をインストールしていて、コマンドが使える状態 コマンドの使い方がある程度わかっている Compostion API を使いたい 今回は丁寧に順を追って説明します。「そんなの知ってるよ」って方は目次から必要な項目をすっ飛ばしてお読みください。 Gulp で webpack を使った環境を準備する 今回は Gulp を使った開発方法のご紹介です。webpack-stream を使って webpack を読み込む方法をご紹介です。 まずはディレクトリを作成し、そこでコマンドで package.json を新規で作ります。 -y オプションを付けることで、対話せずに package.json が作成されます。 作成したら、いくつか node module をインストールします。 それぞれの node module の役割です。 | モジュール名 | 役割 | | -------------- | ---------------------------------------------------------------------------------------- | | gulp | JavaScriptで記述できるビルドシステム。SassやJSをリアルタイムでコンパイルできるようになる | | browser-sync | 仮想サーバーを立てたり、コード更新とともにブラウザをリロードできるので作業効率化できる | 今回はディレクトリ構造は以下のようにします。 gulp コマンドが使えるように package.json を編集します。scripts にコマンドを追加します。 browserSync で心地よい開発環境を作る gulpfile.js を追加し、まずはローカルにサーバーを立てます。 空でいいのでHTMLファイルを作ります。以下コマンドで http://localhost:3000/ にアクセスできたら成功です。 browserSync のオプション open ですが、サンプルコード通り false を付与することをおすすめします。付与しないと初期値は true になっており、gulp を起動するたびにブラウザが開くので鬱陶しいです。 webpack でコードをバンドル（まとめる）できる環境を作る 次にコードをまとめる環境を作ります。コードをまとめる方法は、直接 gulpfile.js に書く方法もありますが、今回は別ファイル webpack.config.js を新たに作成します。 Vue.js を npm 経由でインストールします。 | モジュール名 | 役割 | | ---------------- | ------------------------------------------------------------------------------------------------------------ | | vue | Vue.js を使えるようにする | | webpack | 複数のファイルを１つにまとめて出力してくれるツール。gulp に近い機能がたくさんあるので webpack 単独でも使える | | webpack-stream | gulp で webpack を使うためのモジュール | | path | ディレクトリやファイルのパス（場所）の問題を解決するモジュール | gulpfile.js に Vue.js をコンパイルするためのコードを追加。 webpack.config.js で node module にイãƒ

1³ã‚¹ãƒˆãƒ¼ãƒ«ã—た Vue.js を使えるようにし、JS をバンドルして出力できるようにします。 コードをバンドル（まとめる）するメリット この記事では .veu 形式のファイルを分解して、JSにまとめるためにファイルをバンドルする方法を紹介していますが、バンドルするメリットは他にもあります。 JSのコードをバンドルすると、単純に一回のリクエストで1つのJSファイルを読み込めるので、読み込みコストを減らすことができます。 js/index.js では webpack 経由で vue を呼び出し、module 形式でコードを書く。 ファイルは type=\\"module\\" で呼び出す。 これで Vue.js とバンドルされたJSが生成されるようになります。 拡張子、.vue形式のコンポーネント（部品）を使えるようにする Vue.js の素晴らしいところはコンポーネント（部品）化して管理できるところです。 Vue.js のコンポーネントは一般的に .vue という拡張子のファイルに分けて管理します。 コンポーネントファイルの構成は出力したいテンプレートのコードと、それに関する設定といった感じになります。 せっかくなので Gulp の開発環境で便利なコンポーネントを使えるようにしましょう。 .vue を分解して、jsコードとバンドルできるよう、vue と babel のローダー用 node module をインストールします。 たとえば components/Label.vue ファイルを追加してコンポーネントとして使う場合、以下のような形で呼び出せるようになります。 これで、 .vue 形式のコンポーネントを使えるようになります。 詳しいテンプレートの実装方法に関しては以下記事で紹介しています。 vueファイルのコンパイルでコケる .vue 拡張子のついたファイルのコンパイルでコケる場合は、ファイルパスそのものの記述が間違っていたり\'./components/Label\'のように、拡張子を省略してい可能性があります。拡張子を省略したい場合は webpack.config.js 側に記述を足すだけで解決できます。 プロダクション（製品版）とディベロップメント（開発版）で出力を分ける webpack では mode を設定することで、 production（リリースモード） と development(開発モード) とコンパイルしたファイルを出し分けることができます。 もちろん 開発モード のほうが遥かにエラー箇所を見つけやすくデバッグに適し、 リリースモード になるとソースはぐっとコンパクトに圧縮 することができます。 今回は、せっかくなので開発モードとリリースモードで分けて開発できるようにします。 コマンドに引数を渡せる minimist という node module をインストールします。 package.json にリリースモードに切り替えるコマンドを追加します。 状況に応じてコマンドを出し分けます。 まとめ・少し複雑なVue.jsの実装をするためには開発環境の用意が必要 Vue.js はちょっとした機能を追加するにはめちゃ適しています。 が、その気軽に導入できるVue.jsですが少し手の混んだ実装をするためにはやはり開発環境の準備は必要と思いました。 必要に応じて、ある程度の開発環境は作れたほうがいいと思いその方法をまとめました。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただき、ありがとうございました。 コンポーネントを使ったデータバインドについてはこちらをお読みください。","noindex":false},{"slug":"entry521","title":"なぜ昭和のお父さんは頑固だったのか？昭和の親父の特徴と家庭内特権カーストの裏側","date":"2023-02-11","modifiedDate":"2026-06-22","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbn

1ail/2023/entry521.webp","description":"なぜ昭和のお父さんはあんなに頑固だったのか？理不尽で自分勝手に見えた「昭和の親父」の強烈な特徴やあるあるな特権5選を徹底考察！あの家庭内特権カーストを作り上げた歴史的背景と日本文化、そして令和の時代に昭和なお父さんが消えた真実を独自の視点で解説します。","tags":["家族","おもしろ"],"body":"突然ですがみなさん、あなたの「父親のイメージ」って、ただ怖いだけでしたか？それとも、心のどこかで尊敬できるものでしたか？ 私の父は、まさに家族というチームの真ん中にドッシリと構えていた典型的な 昭和のお父さん でした。 頑固で理不尽、お父さんの言うことは絶対。今の常識だと、ただのワガママですよね笑 しかし不思議と、家族を背負って生きる男としての「強い覚悟」が見え隠れしていました。 令和のいま、なぜあんなに個性の強かった「昭和の親父」たちは日本から消えてしまったのでしょうか。 今回は、昭和の父が持っていた家庭内特権（あるある）5選と、あの規格外のオヤジたちを作り上げた激動の歴史的背景、そして日本の家族文化の真実を徹底考察します。 昭和の親父の特徴とは？家族を中心に回る「昭和のお父さん」の特権5選 昭和の時代はお父さんが一番偉い！ 昭和では上記のような家庭内カーストが存在しました。 わしゃーおとうさんじゃ！お父さんは何をしてもえーんじゃ！！ うちの父を例に、昭和の父の謎の特権についてご紹介します。 一番風呂は父親の特権 一番風呂とは沸かしたてのお風呂に一番最初に入ること。 日本人はこの一番風呂に神聖さや優越を感じます。言わずもがな、一番風呂は家庭カーストナンバー 1 父親の特権でした。 父親が先にお風呂に入りおわるまでまで、どんなにお風呂に入りたくてもみんな待っていました。 現在では「一番風呂は体に悪い」みたいですけどね。 誰が苦しんでいようと、長時間トイレを占拠 うちの父親は、トイレに入って新聞を読む習慣がありました。 しかも長い。 子供の頃、父親がトイレから出てきてくれないとき、小のときは仕方なく庭やお風呂でしていました。 大を我慢している時は地獄。トイレの前でのたうち回ってました。 それでもお構いなしで家庭カーストナンバー 1 の父はトイレで新聞を読了することを優先。苦しすぎて早く出るように懇願すると、逆ギレすることもありました。 ぐぉぉ、死ぬ！死ぬる！！早く出て！ ああ！！もう！！トイレぐらいゆっくり入らせろï¼

1ï¼ï¼ もう十分ゆっくりいたやろ。。。 お父さんは正義。何をしても許される（頑固で自分勝手な理不尽ルール） 幼少期、私は玉ねぎを食べることができませんでした。 母親に注意された私は父親の皿に目をやりました。 父が玉ねぎを皿の隅っこにまとめて残しているのを発見しました。 お父さんは玉ねぎ食べてないのになんで私は食べなきゃいけないの？ すると父親は。。。 お父さんはいーの！ ファッ！！！？（心の声） 自分はお金も稼いで家族を養っているから許されるという 全く道理の通らない言い訳 です。 必殺のセリフ「 お父さんはいーの！ 」を父は連発します。 テレビのチャンネル主導権は常に父にあり 昔はテレビなんて一家庭に 1、2 台しかありませんでした。 リビングのテレビチャンネルはいつも父の趣味。 我が家は家族全員揃って、テレビを見ながら夕飯を食べる習慣がありました。 ご飯を食べ終わるまで、つまらない NHK ニュースや水戸黄門を見なければならないことも多かったです。 たまに見たい番組を懇願すると、 お父さん、たまにはドリフが見たい！ あいつらは生卵を投げる。わしゃ食べ物を粗末をするやつはきらいじゃけダメじゃ！ という感じで見せてもらえませんでした。 基本、家事・子育てには参加しない かーさん、お茶ー かーさん、おかわりー!! 昭和のお父さんは座ったまま、こんなしょうもないことを嫁に指図します。なぜならば「 一家を支える大黒柱 」だから。 そして食べ終わった食器も自分で下げることはありませんでした。 令和、平成のお父さんは子育てに参加してオムツ替えしたりしないと、嫁だけでなくフェミニスト団体などからも叩かれるので想像もできないでしょう。 母が入院した時、慣れない家事を僅かな期間やっていたことがあると聞きました。でも母が戻ったらすぐ元通り。ふんぞり返るようになりました。 「昭和のお父さん」を作り上げた時代と日本の文化 「昭和のお父さん」が如何に家では自分勝手だったかをおわかりいただけたと思います。 こんな威厳たっぷりの昭和のお父さんが生まれたのは時代的背景が強いと私は考察します。 高度経済成長期の昭和親父（オヤジ）達は日本経済を支えるプライドがあった 第一次ベビーブームに生まれた団塊の世代。父もその中のひとりで、終戦 5 年後に生まれ復興の最中育ちました。 父の幼少期、ちょうど朝鮮戦争（1950 年〜）が勃発し、日本では朝鮮特需（補給物資の支援、戦車や戦闘機の修理請負などの特需）が経済復興の追い風となりました。その後、オリンピック開催など立て続けに好景気が続きました。 団塊の世代の若い労働者は 金の卵 と言われるようになりました。 戦後ボロボロの日本を高度経済成長させた団塊の世代は自信に満ち溢れていました。 特にお父さんたちは日本の経済を支える労働力の象徴でした。 仏教・儒教の教えが色濃く残る時代 日本は千年以上前に中国古来の仏教や儒教などの教えが伝来・浸透し、父系社会です。 女性は男性と歩くときは 10 歩下がって歩くのが美徳だった時代もあるほど、日本では男女格差が大きいです。 現在も格差は存在しますが、昭和はより色濃かったです。 戦後に生まれた人たちはまだまだ父親が一番偉く、長男が一番大切にされる環境で育ちます。 昭和の家庭では父親を頂点とした、次に長男、その他の男の子ども、母親と娘の順番のピラミッドができたのです。 なぜ、昭和のお父さんはいなくなったã

1®ã‹ 昭和のお父さんは理不尽で暴君でしたが、頼もしい存在でした。身を粉にして働いて家族の生活を支えました。 しかしながら平成・令和のお父さんは昭和のお父さんほど威厳を保つことができません。 その理由はなぜでしょうか？ 大きな理由の 1 つは 時代とともに女性の権利に世の中がセンシティブになった こと、2 つ目は 経済が悪化し昭和より単純に稼げなくなった人が増えた ことだと私は考えています。 増えるフェミニズム団体。お父さんは世間体を気にしている 実は最近昭和を代表するアニメ・ガンダムを見ました。男性（スレッガー・ロウ）が女性（ミライ・ミシマ）を平手打ちするシーンがありました。 すでに現代社会に適応してしまった私は反射的に思いました。 平手打ちって、今こんなシーン放送したらフェミニスト団体に訴えられ、即放送中止になるんじゃないか。。。 昔に比べ、女性や子供の人権を訴える人たち、団体が増えました。女性や子供の人権をないがしろにすると、現在では世の中が許さない風潮もあります。 家事・育児に参加しない男性に対して世間からの風当たりは強いので

1参加せざるを得ない。 実際、家事や育児に非協力的な発言や行動 をする芸能人・政治家は Twitter で即炎上 です。 男性はむやみに家庭でふんぞり返りにくくなりました。 バブルが弾けて以降、日本の経済はずっと悪い 1990 年代後半、バブル経済が崩壊しました。 バブル前とあとでは日本は完全に変わりました。具体的にどのくらいの差があるかというと、 バブル全盛期 地方女子短大卒で使えないかもしれない新人にボーナスを 100 万円払う時代。タクシーも捕まらないから一万円札を見せて捕まえるほど。 バブル崩壊後 就職氷河期だった私の世代は履歴書 100 枚書いて就職が一社決まれば良い方。父の周りの経営者もお金が回らなくなり倒産したり最悪自殺する方も。 たった４、5 年違うだけで天国と地獄ほどの差があります。 その後も日本経済はリーマンショックなど悪いことが続きます。リーマンショックの頃の様子が知りたい方はこちらも併せてお読みください。 経済特需のような奇跡は、もう日本には起こりませんでした。 今までの昭和のお父さんのように一馬力じゃ稼げない家庭がどんどん増えました。 しかも男性は昭和の時代のように 男性だからという理由 だけでは、優位な仕事を得ることができなくなったのです。 令和の新しい家庭内カーストでのお父さんの立ち位置 一人では家族を養えるほどお金を稼げなくなり、世間が女性や子供の人権に過敏になり、お父さんは家でふんぞり返るどころか肩身も狭くなりました。 長い間好景気を知らない平成・令和のお父さんは、そもそも威張ろうっていう気持ちも持ち合わせていないのかもしれません。 家族に威厳を誇示できなくても十分幸せかもしれませんしね。 まとめ・昭和のお父さんは無茶苦茶…、けどサイコーに頼れる父親（オヤジ）だった トイレは入れないし自分だけが優位なルールを適応する父親に、若い頃は反感を持ちました。 そんな父親にも強いポリシーがありました。 男たるもの絶対女性に暴力をふるってはいけない 男たるもの家庭を養わないといけない 男たるもの家族を守らなければならない 母に対しても絶対お金で不自由させないと言って結婚しました。 有言実行でお金で苦労させることはありませんでした。悪い面では家事も子育ても手伝いませんでしたが、いずれにせよ昭和だからできたのだと思います。 昭和のお父さんは無茶苦茶だけど、サイコーに頼れる父親（オヤジ）でした。 昭和と平成、令和のお父さん。どのお父さんがいいとは言いません。どちらも良い部分も悪い部分があると思うので。 時代は変わります。典型的な昭和気質のうちの父も、仕事をリタイアしてからは家事を積極的にするようになりました。母の薬の管理などまで献身的に尽くしているようです。嬉しい反面、少しさみしい気もします。 昭和の魂（ソウル）を持った威厳あふれるお父さんたち、少しでも日本に存在し続けることを願ってこの記事を締めくくります。 最後までお読みいただきありがとうございました。 ぜひ関連記事もお読みください。","noindex":false},{"slug":"entry520","title":"Vue.jsで絞り込み＆ソート｜Composition APIで動的機能を部分導入する","date":"2023-02-05","modifiedDate":"2026-03-20","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2023/entry520.webp","description":"既存のHTMLやPHPサイトに、Vue.js 3（Composition API）で「絞り込み・ソート機能」を部分導入する方法を徹底解説。Vanilla JSより簡潔に、Reactより手軽に。日付順の並べ替えやカテゴリー検索の実装手順を、2026年の開発環境に合わせたモダンなコード構成で紹介します。","tags":["Vue.js","JavaScript"],"body":"最近 WordPress で部分的に Vue.js を組み込みました。最初は React を組み込もうとしましたが、大規模になりそうだったので Vue.js に切り替えました。やってみると驚くほど手軽でした。 Vue.js は 

1Vanilla JS に比べると簡潔に書け、React よりも気軽に導入できます。Vue.js はちょっとした動的機能をHTMLやPHPに組み込むのに最適。 Vue.js のバージョン3(V3)からは、デフォルトで Compostion API が使えます。Compostion とは 構成 という意味 で、リアクティブな値やその値に関連した処理をコンポーネントから分割して扱えるコンポーネントの形式です。 当記事ではその導入方法の詳しい解説と、実践にも転用できるサンプルコードをご紹介します。 前提条件 JSON データを利用したい JavaScript がある程度理解でき、実際に書いたこともある 日にちなどのソート（昇順、降順）機能を実装したい タグやカテゴリーなどで絞り込みたい 数千件以上のデータを取り扱う可能性がある 完成イメージはこんなかんじ。 Vue.js Compostion API 基本の書き方（Options API と比較） V3から使える Compostion API は Options API と比べると、記述を分ける必要がなく、変数・関数などをスッキリまとめることができる印象です。 new Vue() (Options API) と createApp() (Compostion API) といった感じでインスタンスの作り方が違います。 JSON データを用意する JSON データを用意します。 スプレッドシートから出力した JSON や WordPress REST API などを利用してもOK。 スプシデータを使いたい場合は GAS で JSON を生成する事もできます。以下記事を参考にしてください。 JSON データから一覧を作る 今回は以下のような単純なディレクトリ構造を用意しました。 まずは articles.json (JSON) から一覧を作ります。今回は配布されている Vue.js の CDN を使いました。使う機能をディレクティブで import します。 index.js ファイルを外部ファイルとして読み込む際、import を利用したいので属性 type=\\"module\\" を付与します。 すべての記事が表示されます。 属性に変数や処理を入れる方法 Vue.js では :属性名 とすると、値に変数や処理を入れることができます。 replace で日付フォーマットを変えることもできます。 チラツキ防止 Vue.js ではページ読み込み時処理が間に合わず、一瞬コードがむき出しになるチラツキがよく起こります。チラツキを抑えるために以下 CSS を追加しておきましょう。 ref とは？ 久々に Vue.js を使うと ref なるものが登場してきました汗 ref を使うと、内部の値を受け取ることができ、リアクティブで変更可能な変数の型を返すことができます。値を取り出すときは value プロパティを使います。 ref 関連 | Vue.js ページ送り（ページネーション）をつける このままだとページが長くなり、ひたすらスクロールしなければならないので、ページネーションをつけます。 ページネーションボタンのための関数。 それぞれの値や関数を HTML 側で受け取れるよう戻り値に追加します。 ページネーションを HTML 側に組み込みます。:disabled で currentPage (現在ページ)が1以下になったり、maxPage (最大ページ数)以上にならないよう制御します。 記事を新しい・古い順でソート（並べ替え）する 記事を新しい・古い順でソートするための機能を作成します。 日付を選んた時にソートできる関数を追加します。今回はソート解除もできるようにしました。 HTML 側で使えるように戻り値を追加します。 昇順降順の UI を追加します。V3も v-model （データの双方向のやり取り）の記述方法は変わりません。 選択した項目は sortDate に格納されます。 Vue.js では @アクション名=\\"処理\\" でクリックなどのイベントに対して様々な処理をすることができます。 複数のタグで絞り込む 今回は複数のタグを選んで広域に絞り込める（OR検索）ようにします。 タグだけ抜き取る まずは記事から、タグだけ抜き取ります。重複は JS の reduce を使ってå

1–り除きます。 その他の配列操作についてさらに詳しく知りたい場合はこちらをご覧ください。 v-for を使ってループでHTML側に出力します。 タグの絞り込み機能を作る 複数のタグの記事を絞り込めるようにします。 タグの絞り込み解除できるようにしておきます。 また絞り込んだ時に、何件になったか、どのタグで絞り込んだかなどを、表示できるようにします。 絞り込み部分の HTML。選択した項目は v-model で selectedTags に格納されます。 v-if で、絞り込み件数と、どのタグで絞り込んだか表示させます。message が null の場合は非表示にします。 まとめ・Vue.jsはちょっと機能を足すのに便利 実は4年ぶりに Vue.js を使いました。V3になって書き方も諸々バリエーションが増えていてビビりました。 書き方も簡潔になっており、初学者にも React よりはとっつきやすいかなぁという印象です。 この記事が、みなさんのコーディングライフの一助となれば幸いです。 最後までお読みいただき、ありがとうございました。 コンポーネントを使ったデータバインドについてはこちらをお読みくだだい。 参考 : HTMLにちょい足しでできる！Vue.js.jsでサクッと動きをつける方法","noindex":false},{"slug":"entry519","title":"Gatsby をアップグレード（v4→v5）して Netlify にデプロイ","date":"2023-01-29","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2023/entry519.webp","description":"Gatsbyのv4からv5へアップグレードしたのでそのやり方をメモしておきます。Netlify の Nodeバージョンの変更方法（超簡単）もご紹介しています。","tags":["React","Netlify"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 Gatsby の V5 が2022年末くらいにリリースされていました。そこで最新版にアップグレード、Netlify にデプロイしました。 公式サイトの Migrating from v4 to v5 に沿ってやったら簡単だったのでやり方をまとめました。 Netlify の Nodeバージョンの変更方法（超簡単）もご紹介しています。 公式サイトによるとv4→v5に切り替えるには、Node v18 React v18に切り替えてビルドし直して、とのこと。 どこが変わったの？ Node v18 React v18 に対応しました。さらに以下3つが大きく変わった箇所です。 Slice API高度に共有されたコンポーネントのコンテンツを変更する際のビルド時間を最大90%短縮。 Partial Hydration (Beta)必要なJavaScriptのみをブラウザに送信することを可能（Reactのサーバーコンポーネント利用）。 GraphiQL v2新機能追加（ダークモード、タブ、localStorageを使用したステート/タブの永続化、検索とマークダウンのサポートによる、より良いドキュメントエクスプローラー、プラグインエコシステム） ※ ハイドレーション（Hydration）とは、サーバから送られてきた静的 HTML を引き継いで、クライアントサイドのデータ変更に対応できる動的な DOM に変換するクライアントサイドのプロセスのこと。 Slice API には期待します。 先に Node と npm のバージョンを確認し必要に応じてアップグレード 私は最近メンテしていなくて Node のバージョン が v16.13.1 と低かったです。 Node の場所を確認すると、どうやら nvm(Node Version Manager) でメンテナンスしているらしい（そんなことすら忘れていた）。 nvmインストール方法はこちらを参考に。 Homebrewの方がメジャーだけど、面倒なのでそのまま使う。現在使われているNodeの確認。 ほしいバージョンを指定してインストール。 イãƒ

1³ã‚¹ãƒˆãƒ¼ãƒ«ã—てあるNodeで特定のバージョンを一時的に使いたいときは以下コマンド。 デフォルトとして指定したいときは、以下コマンドを叩いてターミナルを再起動。 いらないバージョンのNodeは必要に応じて削除。 その後、念の為 npm もアップデート。 今使っている node modules をアップデート v5 に対応するために、今使われている、node modules をすべて最新版にアップデートする。 公式では、Update Gatsby related packages（Gatsbyのパッケージは最新にしろ） とあります。私はフツーにReactのパッケージなんかも使っています。 ひとつづつ確認してアップデートするのは面倒。ターミナルから上記テキストをすべてコピーし、VSコードの矩形選択なんかを駆使して必要な文字だけ取り出しJSONに形成し直し、そのまま package.json に貼り付けます。 node_modeles と package-lock.json を削除し改めてインストール。 GraphQLの記述方法が変更された GraphQLのアップデート(graphql 16)に伴い記述方法が変わったので、公式サイトで用意されている codemod コマンドでマイグレーションしました。 具体的には Sort や Aggregation の記述が変わりました。 ビルドする 開発環境では知らせてみて問題なければ、 ビルドして、問題なければデプロイします。 ビルドでコケる場合 GraphQL 依存のパッケージが問題でコケているかもしれないので、異存のあるパッケージを調べます。 公式によると、node_modeles と package-lock.json を削除して以下コマンドでうまくいくとのこと。 それでもダメなら、graphqlそのものを明示的にインストールしたら解決することもあるみたいです。 参考 : 個人ブログで使っているGatsbyのバージョンを4系から5系にあげた Netlify 側で Node バージョンを指定する 以前、Gatsbyブログサイト移行物語インストールからNetlifyデプロイまで・Node のバージョンにご注意では Netlify 側からバージョンを指定すると紹介しましたが実はリポジトリ側からも指定できることがわかりました。 以下コマンドで、Nodeのバージョンを指定するファイルを作成できます。 ルートディレクトリに .nvmrc が作成されます。 あとは push デプロイするだけ。 v５ アップグレード後、Gatsby develop が終わらない事象に遭遇した 突然終わらなくなりました。解決方法はネットワークを変えると Stack Overflow に書いてあったので、自宅のネットワークをつなぎ直してみました。 そうすると見事解決しました。 まとめ・Gatsby v4→v5 のアップグレードは簡単だった アップグレード後、こころなしかWebサイト表示も早くなった気がします。 この記事はすぐ忘れる自分のための備忘録としてまとめましたがが、皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry518","title":"【SEO】CLS 0.25超で「不良」?! 短期間でパフォーマンススコアを大幅改善","date":"2023-01-28","modifiedDate":null,"category":"seo","categoryName":"SEO対策・デジタルマーケ","ogImage":"/thumbnail/2023/entry518.webp","description":"コアウェブバイタルが悪化！モバイルが CLS 0.25「不良」になった！どうしよう。。。PageSpeed Insights のパフォーマンス評価がいつの間にかモバイル21までダウン。そこで、パフォーマンス評価を上げるために短期間ででやった対策を細かくご紹介します。フロントエンド側でできること。","tags":["WordPress","Web解析"],"body":"Search Console をチェックしていたら、すべてのページが PC「改善が必要」 、 モバイル「不良」 のアラートが出てました汗。 コアウェブバイタル3つの指標のうち、CLS が 0.25 超!？？？今までは悪くても 1.0 超だったのに。 LCP（Largest Contentful Paint） 一番大きいコンテンツ（画像やテキスト）が時間をかけずに表示されるか FID（First Input Delay） ユーザーがページ内で初めてクリック等のアクションを起こした際の応答時間 CLS（Cumulative Layout Shift） 予期しないページレイアウトのずれが起きないか 早速 PageSpeed Insights ã

1§ãƒã‚§ãƒƒã‚¯ã™ã‚‹ã¨ã€ãƒ‘フォーマンス評価がいつの間にかモバイル21まで落ちていて驚愕しました。 改善前のPageSpeed Insightsによるパフォーマンス評価 | パソコン | モバイル | | -------- | -------- | | 69/100 | 21/100 | このWebサイトはそもそもスピード改善のために2年位前に静的サイトジェネレータに苦労して移行しました。 静的ジェネレータだしほっといても大丈夫と思い、特に何もしてなかったです。 絶望的だったのですが、、、 PageSpeed Insights のアラートを解消したら、ボトルネックだった CLSは0 になりました！ この記事ではフロントエンド側でできることを中心に、PageSpeed Insights のパフォーマンス評価をモバイルで 最大40以上スコアアップし改善した方法 をご紹介します。 改善後PC 改善後モバイル トップページは記事とは違ってコンテンツは少ないので、PC版ではパフォーマンス100まで行きました！ CLS（Cumulative Layout Shift）の改善 画像や広告などが遅れて読み込まれ、突然レイアウトがズレたり変わったりする現象のことを レイアウトシフト と呼びます。 起きる原因としては、 読み込みが遅れた画像・動画等のメディアコンテンツ Webフォント 等です。 CLSはそのズレの大きさを指し、0.1未満が理想です。※ CLS の数値「ずれが生じた表示領域の比率 × 距離の比率」 ちなみに 0.1以上で 改善が必要、 0.25 以上で 不良 となります。 チェックポイント 画像・動画等のheight・width属性などのサイズに関する記述漏れはないか？ Reactなどの再レンダリングによるレイアウトシフトはおこっていないか Webフォントの読み込み対策はされているか？ Webフォントは今回全ての指標に悪影響があったã

1®ã§ä½¿ã†ã®ã‚’諦めました。ベストプラクティスが見つかれば後日追記します。 画像・動画等のheight・width属性などのサイズを指定する 画像や動画（iframe含む）はheight・widthやアスペクト比を指定します。 CSSから直接指定してもOKです。 Reactなどによる再レンダリングを防ぐ React のコンポーネントが再レンダリングされることによっておこることがあります。その場合は useMemo を使って解決できることもあります。 useMemo 利用方法は以下記事に記載しています。 画像をギリギリまで小さくし、徹底的に圧縮 すべての指標において画像圧縮は即効性があります。 表示スピード改善には画像リサイズと圧縮が効果的。PageSpeed Insight のスコアが落ちたらすぐできる対策です。 チェックポイント 画像は可能な限り圧縮し、ギリギリまで小さくリサイズする 画像フォーマットは適切なものを使う picture タグを使ってユーザーの環境に応じて画像を出し分ける スクロールするまで表示されない画像には loading=lazy や decoding=async を付与する 画像は可能な限り圧縮し、ギリギリまで小さくリサイズする オンライン画像圧縮サービス、Photoshop など何でもツールはあるので使いやすいものを使って圧縮します。 私のケースではCLスクリプトを使ってまとめて画像を圧縮します。 画像は圧縮したから適切とは限りません。元画像が大きいと限界があります。表示場所に適切なサイズにリサイズも行います。 リサイズもオンラインやソフトなどいくらでもあります。お好みのツールを使ってください。 画像フォーマットは適切なものを使う 画像の種類によってフォーマットを使い分けます。 フォーマットの使い分けの基本は主にはPNGとJPEGです。 使い分けの目安としては色数が少ないのっぺりした画像はPNG、写真のような色数が細かいは JPEG にするようにしています。 また、最近では IE のことも気にしなくて良くなり、Safari にも対応したので WebP も積極的に使うようにしています。 GatsbyImage を使う場合 | プロパティ | 値 | | ----------------- | ---------- | | gatsbyImageData | width: 400 | | quality | 40 | アイキャッチは最大表示より大きくならないようにし、さらに画質を落とす設定をしています。 ただ、GatsbyImage は画像出力もJSが使われているので少なからず負荷はかかります。 小さく、画層サイズの切り替えなど必要ないサムネイルに関しては、切り替えの必要のない場合は GatsbyImage を使わず、固定サイズにする等設置する場所によって変えました。 GIFアニメ は古い。画像フォーマットを WebP に変える GIFアニメ はサイトの表示スピードを遅くする原因となります。 GIFアニメを使っていましたが、 WebPアニメーションに変更しました。 アニメ画像に変換する君 というフリーソフトをICSメディアさんが出しているらしいのですが、Mac の M1チップには対応していないらしく今回はオンラインツールを使いました。 まずはgifから動画に変換し、動画からアニメWebP生成に変換。 ※ gatsbyImage で圧縮すると、アニメーションがなくなってしまったので直起きしました。 WebPアニメーションは FireFox、Chrome、Safari でも動くし、このブログに関してはユーザーはほぼPCなので問題なし。 追記 以前タイムラプスを作るために ffmpeg を Homebrew 経由でインストールしたことがあったã

1®ã‚’思い出し、コマンドですべて処理することにしました。 これでかなり時短ができるようになりました。また機会があれば記事にまとめます。 picture タグを使ってユーザーの環境に応じて画像を出し分ける このWebサイトは GatsbyImage で画像出力しているので基本は WebP で軽量化された状態で出力されます。 しかも、srcset などでユーザーの環境&ディバイスに応じて出し分けされています。 画像のサイズがある程度大きな場合に重宝します。 WordPress でも picture タグを使った画像フォーマットやサイズの出し分けができます。WebPも対応する場合はプラグインなどを使うといいと思います。 DOMの整理 過剰なHTMLタグの数やネスト（入れ子）の深さは 過大な DOM サイズ となり、レンダリングに悪影響を及ぼします。 ページは表示されたのにローディング状態が続きボタンがクリックできない等 FID（First Input Delay）などにも悪影響を及ぼします。 各項目がこちらの表以上の数になると、PageSpeed Insight で警告が出ます。 | 項目 | 数 | | ---------------- | ---------- | | DOMの最大深さ | 32 以上 | | 子要素の上限数 | 60 以上 | | 合計DOM要素数 | 1,500 以上 | チェックポイント タグのネスト（入れ子）を浅くする タグ数を減らす このサイトは最大200近くタグが使われていることがわかりました。 タグのネスト（入れ子）を可能な限り浅くする Gatsby も React なのでコンポーネントはいちいち div などでラップするのでネストが深くなります。不必要なタグは可能な限り取り除きます。 ユーザーに見向きもされないパーツは削除 Clarityなどのヒートマップを使ってユーザーにクリック/タップされていない要素を削除します。Clarityの使い方は以下記事で解説しています。 解析した結果、せっかく苦労して実装した Gatsby のタグクラウドですが、無駄にタグが生成されるくせにほとんどクリックされていないことが発覚 しました。 要素が虚しく増えるだけなので削除。 コードハイライターの自動出力がネック 当サイトではコードハイライターを利用していますが、これが結構クセモノで、コードをハイライトするために無数の span タグが自動生成されます。 もし、WordPress などの CMS であれば CodePen などの埋込外部サービスを使うのもありかもです。 React であれば react-window、Effect を使っている場合は shouldComponentUpdate、PureComponent、React.memo あたりで不要な再レンダリングを抑える事ができるらしいです。 今回は対応できなかったので次回の宿題です。 第三者リソース読み込みの改善 チェックポイント 可能なものは遅延読み込みする 不要であれば削除 第三者リソースとはGoogleタグマネージャー、Googleアナリティクス、Clarity や Googleフォントなどです。 切ないくらいボトルネックとなります。 Ad のみ遅延読み込み タグマネージャーなどの Google のJSはかなり足を引っ張ります。解析系のタグは誤ったデータが取れては困るので下手に対応策を打てませんが、 AdSense なら遅延読み込みで改善 できます。 AdSense を入れている方なら、これだけでも随分改善が見込めます。 ユーザーが画面を少しでもスクロールしたらソースを読み込み ます。Googleタグマネージャー経由、あるいは WordPress などでプラグイン経由で読み込んでいる場合は外します。 上記コードだと Gatsby コンパイルでコケます。 Helmet 内に以下のように記載します。 Webフォントを使うのをやめる Googleフォントも結構ネックでした。 Webフォントはレイアウトシフトを起こす原因にもなります。 テックブログにデザインを求めてくる人はおるまい！ 思い切って使うのをやめました。 メインスレッド処理ã

1®æœ€å°åŒ–・不要なJSを削除する メインスレッド処理の最小化 するようにアラートが出ていたら、主に JavaScript の解析、コンパイル、実行に時間がかかっているということが多いです。 チェックポイント 主に負荷をかけているJSの改善、不要であれば削除 使っていないプラグインは削除し、CSSで代用できるものは置き換え 私のサイトでは改善前は Script Evaluation(JSの評価) に 6,000ms 以上かかっていました。 使っていないサイズの大きな JavaScript のコードを整理・削除し、半分の 3,000ms 前後に抑えることができました。 Gatsby の場合は、どの JS が負荷をかけているか gatsby-plugin-webpack-bundle-analyser-v2 で解析できます。 インストール方法などはこちらを参考に。 ※ Gatsby v5にアップグレードして使えなくなりました。v4の方は使えます。他の方法が見つかったら追記します。 主に負荷をかけているJSの改善、不要であれば削除 サイズの大きなコンポーネントを見直します。 FontAwesome が負荷をかけていたので使うのをやめる 解析した結果、React経由で実装した FontAwesome がすべてのページで一番負荷をかけていました。 あ、あんな豆粒程度のアイコンごときがこんなにページに負荷をかけているなんて。。。 大した数を使っていなかったのでアイコンはすべてSVGで実装、スタイルはCSSで整えました。 意外なコンポーネントのサイズが大きなことも。必要に応じて改修もしくは削除 当サイトの記事ではではサムネイルの横にカテゴリーに応じて小さな文字を出力していたのですが、これが想像以上に負荷をかけていました。 一旦は削除しましたが気に入っていたのでCSSで実装し直すことも検討しています。 使っていないプラグインは削除、CSSで代用できるものは置き換え 上に戻るボタンにしか使っていないプラグインは削除し、CSSの scroll-behavior: smooth; に置き換えました。 まとめ・PageSpeed Insights の警告を一つづつ読み解けば必ず改善する 今回は PageSpeed Insights の問題だったCLSを0まで改善し、モバイル最大で40以上パフォーマンススコアを改善させました。 忙殺されていて、長い間ひどい状態で放置してしまいました。。。 幸いなことにこの銀ねこアトリエ、ユーザーの殆どは今どき珍しくPCユーザー。なので表示スピードでの大きなご迷惑はかけていないと信じています。 ひとまずマシになって良かったです。 今後の課題は巨大なDOMをどうするかです汗。まだまだ課題はありますので引き続き、改善に取り組み詳細をレポートしていきます。 この記事が、皆さんのWebサイト改善にお役に立てれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry517","title":"【Gutenberg】WordPressで自作FAQブロックと構造化データを自動実装する方法","date":"2023-01-15","modifiedDate":"2026-06-14","category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2023/entry517.webp","description":"検索クリック率を大きく引き上げる「FAQPage構造化データ」を、WordPressの自作FAQブロックからheadタグ内へ自動出力する連携方法をご紹介。Webpackを用いた環境分離設計から、許可タグを維持する安全なサニタイズ設計まで、実務に即使えるプロのコードを公開します。","tags":["WordPress","ブロックエディタ","構造化データ"],"body":"FAQPageという構造化データをご存知ですか？ FAQPage構造化データを実装すると、Google検索の検索結果一覧でアコーディオン（よくある質問）が表示されるようになります。表示されるようになると クリック率が120%アップ したウェブサイトもあるほど、 SEOにはかなり有用なパーツ です。 FAQPage構造化データは実装しても必ず表示されるわけではありません。ですが、実装する価値は十分にあります。 このFAQPage構造化データ、もっと気軽にWordPressで取り扱えないかなーと思い、Gutenberg（ブロックエディタ）で専用のブロックを作ってみました。 今回はブロックエディタでFAQが手軽に作れ、さらにhead内に正しい構造化データを自動出力するブロックの作成方法についてご紹介します。 前提条件 pnpmなどのパッケージマネジャーのコマンドを使ったことがある。もしくは使ってみたい。 ある程度WordPressをカスタマイズできる（functions.phpを触れる） PHP、JSの記述方法をある程度理解している ※今回は登録したデータをフロント表示させつつ、headタグ内にも構造化データ（JSON-LD）として綺麗に出力させたかったため、記事に挿入されるFAQのHTMLコードはPHP（Dynamic Block）側でレンダリング（出力）する形にしています。 【環境構築】pnpmの導入と必要なパッケージのインストール 開発環境と実行環境を完全に分離したプロジェクトを作るため、まずはテーマの外側にある src/ ディレクトリ配下で環境を構築していきます。 ターミナルを開き、src/ フォルダへ移動（または新規作成）した上で、以下のコマンドを実行して package.json を作成します。 @wordpress/scripts をインストールします。 package.json は次のとおりとなります。 開発環境の全体像とフォルダ構成 WordPressテーマ内でブロックを自作する際、テーマフォルダの中に開発用ソース（src）や環境構築のためのファイル群（package.json・node_modules）をそのまま混在させてしまうと、本番環境に不要なファイルが残ってしまいます。「開発が終わったら手動で削除する」というやり方も、後々のメンテナンス時に環境を再構築する手間が発生するため非常に非効率です。 そこで、実務では 「開発環境（src や各種設定）と、検証・本番環境（public などの公開領域）を完全に分離する」 という設計がオススメです。 本番用のテーマフォルダ内を常に100%クリーンに保つため、今回は以下のプロジェクト構成を前提に進めていきます。 ビルドコマンドとWebpackの設定 上記を踏まえて、package.json の scripts 項目を以下のように書き換えて、ビルド用のコマンド（開発用の start と本番書き出し用の build）をいつでも走らせられるようにしておきます。 webpack.config.js ファイルを追加し、出力箇所を指示しておきます。 【検証】ビルドコマンドの実行と成果物の確認 src/faqblock/index.js を格納し、コマンドを走らせます。 新規で faqblock が生成されファイルが格納されているはずです。 【JS】ブロックエディタ（編集画面）側の作成 src/faqblock/index.js に、ブロックエディタを作るためのコードを実際に書いてみます。 今回は質問はテキスト、解答はリッチテキストでの入力形式にします。 | 使用している機能 | 説明 | 補足ã

1ªã© | | ------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | | registerBlockType | 新しいカスタムブロックをWordPressに登録するためのコア関数。 | ブロックの名前、アイコン、カテゴリ、および管理画面（edit）とフロント出力（save）の挙動を定義します。 | | RichText | 太字、斜体、インラインリンクなどのリッチテキスト装飾（HTML）をユーザーが入力・編集できるようにするコンポーネント。 | 複数行の入力（multiline=\\"p\\" など）や、出力するHTMLタグ（tagName=\\"div\\" など）を細かく指定できます。 | | TextControl | 装飾や改行のない、シンプルな1行のプレーンテキストを入力させるためのコンポーネント。 | 今回のFAQの「質問（タイトル）」のように、余計なHTMLタグを混ぜたくないプレーンな文字列を安全に入力させたい場合に最適です。 | WordPress の記事編集画面から FAQブロックが使えるようになりました！！ FAQをページに出力する 入力されたFAQデータをフロントエンド（実際のページ）に出力する処理を作っていきます。 カスタムブロックの出力には、JavaScript側（save 関数）にHTMLを記述して静的に保存する方法もありますが、今回はテーマの functions.php 側で出力（動的レンダリング）を行います。 PHP側で出力（Dynamic Block）には、以下のような非常に強力なメリットがあります。 メンテナンス性が格段に上がる：後からクラス名やHTML構造を変更したくなった場合、PHPのコードを一箇所書き換えるだけで、過去に投稿したすべての記事に一瞬で変更が反映されます。（JS側に静的保存してしまうと、過去記事を開いた際に「ブロックが壊れています」というエラーが多発する原因になります） 最新のセキュリティ処理を通せる：ユーザーが画面上で入力した値を、ページに表示する直前のPHP側で確実にサニタイズ（無害化）できるため、堅牢なサイト構築が可能です。 今回のFAQでは、質問（見出し）はプレーンテキストですが、答え（コンテンツ）にはリッチテキスト（RichText）を使用しているため、リンクや太字などのHTMLタグが含まれる可能性があります。そのため、エスケープには eschtml ではなく、許可するタグのみを安全に通す wpkses を使用して不必要なタグを取り除きます。 WordPressにはその他、HTMLタグをエンティティ化（無害化）する方法がいくつかあります。データの種類に応じて適切に使い分ける必要があるので、詳しく知りたい方はぜひ以下の記事をご参照ください。 構造化データを出力する headタグ内にJSON-LD形式で、構造化データを出力します。 has_block 関数を使ってページ内にFAQブロックがあるかを判定し、ブロックのデータ内から必要な値だけを取り出してPHPの配列に格納します。 さらに json_encode を使って検索エンジンが認識できるJSON-LD形式へと変換して出力します。 JSONに変換する際、標準仕様のままだと http:// や https:// などのスラッシュ（/）が \\\\/ のようにエスケープされてしまいますが、JSONUNESCAPEDSLASHES オプションを指定して出力しているため、エスケープされずに綺麗なURL形式のまま書き出されます。 また、日本語などのマルチバイト文字も \\\\u3042 のような形式にエンコードされず、JSONUNESCAPEDUNICODE によって人間にも読みやすい日本語テキストのまま出力されます。 出力結果をスキーマ マークアップ検証ツールを使ってテストします。 FAQPage構造化データで使用できるHTMLタグ GoogleのFAQPage構造化データ（JSON-LD）の仕様では、回答テキスト（acceptedA

1nswer.text）の中に一部のHTMLタグを含めることが公式に認められています。 検索結果に表示されたFAQの中で、参考リンクを貼ったりテキストの一部を強調したりできるため、ユーザーの利便性を高めるために適宜使い分けるのがオススメです。 ただし、使用できるHTMLタグはGoogleの仕様により 以下の一部のみ に制限されています。 | FAQPage構造化で使用できるHTML | 説明 | | ----------------------------- | --------------------------------------------------------------------- | | | リンク（href 属性を使用可能。相対パスではなく絶対パスで記述します） | | , | 太字（テキストの強調） | | , | 斜体（イタリック体） | | | 改行 | ※ や 、見出しタグ（など）、リストタグ（, ）などのブロックレベル要素やその他のタグは、Googleに無視されたり構造化データのエラー原因になったりするため使用しないでください。 まとめ・FAQはサイト訪問者にも優しい FAQはコンテンツとしてウェブページ上でも実装することが多いですが、ヒートマップなどで解析しても圧倒的にクリックされるウェブパーツです。 つまり、ユーザーに取って役立つ情報だということで、Googleも構造化したのだろうなあと思っています。 構造化データがSEOにどの程度影響するかなどはまた改めて記事化しようと思います。 この記事が、WordPressでのブロック開発の一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry516","title":"Gatsby でリサイズした画像のパスを取得する","date":"2023-01-05","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"Gatsbyでは画像フォーマットも変更でき、リサイズした画像が作成可能。記事ごとにリサイズしたサムネイル画像、OGP画像を出力できるように調整する方法をご紹介します。","tags":["Gatsby","React"],"body":"ブログのSEO上、サムネイル画像、OGP画像を静的ジェネレータを使っていてもきちんとしたサイズで出力したい。かといっていちいち何枚も画像を作るのも面倒。 Gatsbyでは画像フォーマットも変更でき、リサイズした画像が作成できます。 そこで記事ごとにリサイズしたサムネイル画像（正方形）、OGP画像（長方形）を出力する方法をご紹介します。 早速、OGP用にリサイズした画像パスを取得する この記事はSEOのプラグイン Helmet を使うことが前提で、以下記事の拡張版です。 もちろん gatsby-plugin-image がすでに導入されていることも前提です。記事詳細やimgタグの出力がわからない方はこちらをご覧ください。 GraphQL で img 内に格納されたサムネイル画像の画像のパスだけ抜き取る OGPとはFacebookやTwitterなどのSNSでリンクをシェアした時に表示される画像のことです。 一般的にはOGP画像がある方が目立ち、クリック率などに良い影響を与えるので、Gatsbyを使った静的ジェネレーターサイトでも実装したほうがもちろんいいです。 ここでの留意点はリサイズはあくまで大きな画像を小さくするので元々小さなサイズは大きくすることはできないということと、アイキャッチが設定されていない記事からはリサイズ画像を取得できません。 なのでダミー画像も用意しておきます。 以下は記事詳細を出力するコンポーネントです。前提として記事詳細では markdown で記述し front matter に hero という名前でアイキャッチとして使う画像を記載しておきます。（markdown、 front matter について詳しくはこちら） OGP画像は環境下にもよりますが、小さく表示されることが多いので今回は画像のクオリティはかなり下げてみました。お好みで調整してください。 Helmet 側ã

1§å‡ºåŠ›ã™ã‚‹ リサイズされた画像パスは GraphQL 経由で data に格納されます。そのパスを取り出して Seo コンポーネントに渡します。 出力結果は以下の通りとなります。 検索画面にサムネイル画像を出力させるコードも追加 検索画面にサムネイル画像を出力させるコードも追加します。 検索画面でのサムネイル画像は 運次第でサムネイルが出力されますが、表示されるとクリック率にかなり影響します。表示は Google のさじ加減ですが設置しておくのは得策です。 推奨サイズは正方形なので今回は300×300でリサイズしたものをHelmet側で出力します。 出力結果は以下です。 まとめ・Gatsby なら GraphQL からリサイズした適正画像を生成可能 今回、SEO強化のためにあれこれ画策していた際に今までのOGP画像のパス取得方法がイケてなかったので改めて記事にまとめました。 まだまだ Gatsby の記事は少ないので、また新しいナリッジがたまりましたら記事化しようと思います。 皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。 v5へのアップグレード方法はこちら。","noindex":false},{"slug":"entry515","title":"【2026年仕様】jQuery不要！noUiSliderレンジスライダーの使い方（React/Next.js対応・A11y対応）","date":"2022-12-23","modifiedDate":"2026-06-08","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2022/entry515.webp","description":"レンジスライダーの決定版JSライブラリ「noUiSlider」の使い方。jQuery完全不要、2026年現在のVanilla JS（生JS）での導入から、React/Next.js環境で動かすコンポーネント化、アクセシビリティ（A11y）対応までプロ仕様の実装コードを網羅解説。","tags":["JavaScript","html","React"],"body":"HTMLでもレンジスライダー用のタグが数年前から使えるようになりましたね。 しかし、ブラウザで見た目がマチマチだし値は1パーツに一個しか付与できず、とても使い勝手が悪いです。レンジスライダー（つまみのある範囲の選べるフォーム）のJSライブラリ・noUiSliderの使い方についてメモしました。noUiSliderはつまみを2個以上実装したい時に便利です。 導入の仕方やレンジスライダーを使った動的フォームの実装方法などのコードサンプルを中心に詳しく解説します。 この記事の対象者はこんな方です。 JavaScript の基礎は分かる レンジスライダーを実装したい ２個以上の値をレンジで実装する必要がある 範囲内で直感的に使えるフォームを実装したい jQueryを使いたくない React や Next.js（App Router）環境でnoUiSliderを動かしたい 実務案件でアクセシビリティ（ARIA属性）を満たしたスライダーを作りたい レンジスライダーとは？ レンジスライダーとは範囲（レンジ）内で値を選択できるフォームの一種です。 HTMLでもレンジスライダーのフォームパーツはあります。 が、ご覧の通り、見た目がマチマチです。 今回はサクッとJavaScriptのライブラリで解決します。 noUiSlider 導入方法 早速、noUiSliderの導入方法をご紹介します。 noUiSlider公式サイト noUiSlider はよくjQueryと紹介されてますが、実際にはjQueryなしで実装可能です。 基本の導入方法 もっとも簡単な noUiSlider 導入方法は JavaScript とCSSのソースを読み込む方法です。ソースは GitHub にありますが、今回はお気軽にCDNを読み込む方法をご紹介します。 ※ オプション について解説はこの記事の一番最後にまとめています。 オプションのpipsでメモリと数字が表示されます。 小数点をつけたくない場合は pips の詳細オプションを density を 10 にします。 ※ オプション について解説はこの記事の一番最後にまとめています。 コードサンプル noUiSlider Basic | 

1CodePen 上のスクショのように、ツールチップ（つまみの上の数字）を表示したい時は、オプション tooltips を true にします。 メモリやツールチップ（つまみの上の数字）を任意の数字にしたい場合はメモリを配列で値を自作します。 ※ オプション について解説はこの記事の一番最後にまとめています。 コードサンプル noUiSlider Tooltip | CodePen Events:動的に値やオプションなどを変更する noUiSliderでは、スライダーの変化やオプションの書き換えなどができるメソッドが用意されています。 スライダーが更新されたら、フォームの値を変更 noUiSliderのイベントを利用して、スライダーの変化を受け取ることができます。 noUiSlider.on() メソッドを使って、フォームの値をリアルタイムでレンダリングさせます。 セットできるイベントは \'start\'、\'slide\'、\'drag\'、\'update\'、\'change\'、\'set\'、\'end\' の７つです。 最大値、最小値の場合値自体を表示しない処理も可能です。分かりづらいので値がない場合の placeholder 属性を追加します。 コードサンプル noUiSlider Update | CodePen オプションを変更する noUiSlider では、オプションの変更もあとから可能です。 たとえば、チェックボックスの値が変更されたタイミングでレンジの最大値を変えるなども可能です。 コードサンプル noUiSlider UpdateOption | CodePen 実務で必須！アクセシビリティ（A11y）に対応させる方法 noUiSliderは軽量ながら、スクリーンリーダー（音声読み上げ）に対応できる優れた設計になっています。つまみ（ハンドル）に正しい名前を教えるために、オプションに handleAttributes を追加するのが2026年現在のプロの実務仕様です。 Accessibility = A + 11文字（ccessibilit）+ y なので A11y といいます。 [[/box] 【2026年モダン開発】React / Next.js で使う方法 ラッパーライブラリ（nouislider-reactなど）は更新が止まっているため、本家 nouislider を直接インポートして useRef でマウントするのが最も安全で堅牢な実装方法です。 | オプション名 | 説明・使用用途 | 値 | 例 | | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | range | 範囲の最小値と最大値の指定。デフォ値なし | - | range: {min: 0, max: 10}range: {min: [0], max: [10]} (0~8が選ばれた状態) | | start | 初期値。デフォ値なし | - | start: [0, 8] (0~8が選ばれた状態) | | connect | バーに色を付けるか否か。lower が手前で、upper がつまみより後にバーに色がつく。２点以上つまみがある場合は true。複数ある場合は配列で指定。。デフォ値 false。 | - | lower, upper, true, false, 配列内に入れ子 | | margin | ２つのハンドルの最大の間隔。デフォ値なし。 | number | margin: 30 2間の値は30以下にはならない。 | | limit | ２つのハンドルの最小の

1間隔。デフォ値なし。 | number | limit: 30 2間の値は30以上にはならない。 | | padding | スライダーのそれぞれの端からの値。デフォ値は0。スライダーを端まで動かしたくない等の場合。 | number ,array[number], array[number, number | padding: [10, 15] 最小値が0の場合は10以上下げらず、最大値が100の場合は85以上には増やせない。 | | step | ステップスライダーの1ステップあたりの移動範囲。デフォ値なし。 | number | step: 10 10ずつ増減できる。 | | orientation | スライダーの方向。デフォは horizontal | vertical, horizontal | orientation: \'vertical\'縦方向。 | | direction | スライダーの方向。デフォはltr（左から右、もしくは上から下） | ltr, rtl | direction: \'rtl\'右から左に動かすと数値が増える。 | | tooltips | ツールチップを表示するか否か。デフォは false。removeTooltips() メソッドで削除可能。 | false, true, formatter | tooltips: \'true\' | | animate | スライダーをアニメーションさせるか否かです。初期値はtrueです。クリックイベントなどとセットで使います。アニメーションの間隔（duration）を調整したい場合はCSSの調整が必要です。 | false, true | animate: true, | | handleAttributes | aria-label等、ハンドル（つまみ）に属性を付与できます | false, true | handleAttributes: [{ \'aria-label\': \'lower\' },{ \'aria-label\': \'upper\' }] | その他、キーボードサポートなどのオプションもありますが、きりがないのでOption | noUiSliderをご確認ください。 スライダーの挙動 オプションの中でも、スライダーの挙動のみ詳しく説明します。 | 値 | スライダーの挙動 | | ------------------- | ------------------------------------------------------------------------ | | drag | 範囲をドラック可能でいつもつまみをドラッグできる | | drag-fixed | 範囲をドラック可能。範囲を変えることができないので、ツマミのみを動かす。 | | tap | スライダーをタップすると近くにハンドルが動く。 | | tap-drag | タップしたところにハンドルが動く。 | | hover | バーの上をペンやカーソルを当てるとホバーでイベント発火。 | | unconstrained-tap | ハンドルが互いに通りすぎることができる | | none | 基本の挙動を除いて、他はすべてオフ | まとめ たまたま見つけて使ってみたのですが、公式サイトを見ると全くjQueryじゃない上に高機能で感動したã

1®ãŒãã£ã‹ã‘でご紹介させていたきました。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry514","title":"swiper スマホ のみで動かす！destroyとresizeでリサイズ時もバグらないレスポンシブ制御法","date":"2022-12-17","modifiedDate":"2026-07-07","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2022/entry514.webp","description":"swiperをスマホのみで動かすレスポンシブ制御法を解説。resize（リサイズ）時のバグや、PC幅でスライダーを綺麗に無効化するswiper destroyの実装手順も網羅しています。複数対応のJSコードで、現場のレイアウト崩れの悩みを完全に解決します。","tags":["JavaScript","html"],"body":"Webサイトのレイアウトを魅力的に仕上げるスライダーは、今や欠かせない要素ですよね。私は jQuery 不要の軽量Swiper という優秀なライブラリを愛用しています。この記事は最新の仕様に合わせてしっかりとメンテナンスしました。 レスポンシブ対応が標準となった今、スマホではスライダー、PCでは通常のグリッド配置といった柔軟な切り替えを求められる場面も増えています。Swiper を活用すれば「スマホのみスライダー表示」という制御もきわめてシンプルに実現可能です。さらに、実務で遭遇しがちな「ページ内に複数のスライダーがある場合」でも、バグを起こさず確実に処理する強力なコツがあります。 画面幅の変更にもスムーズに追従し、PC時には不要な要素をきれいに初期化する最新の実装手順を詳しくお届けします。 この記事の対象者はこんな方です。 理想通りのレスポンシブ制御をサクッと形にしたい方、必見のお役立ち記事です！ Swiper を使ったことがある、もしくはJavaScriptでの実装に挑戦してみたい Swiper をレスポンシブ設定でスマホ、またはPCのみに適用したい 画面リサイズ（resize）時のレイアウト崩れを完全に防ぎたい ページ内に複数配置したスライダーを、PC幅になった瞬間に一斉にdestroy（解体）させたい jQuery を使わずにモダンなコードで実装したい この記事でわかること swiperをスマホのみに適用してPCで安全に解除する判定方法 画面リサイズ（resize）時の負荷を抑えてブラウザを重くしない設計 複数のスライダーが混在してもバグらないdestroyの正しい手順 Swiper とは？ Swiper とは、最新の無料で使えるモバイルタッチに対応したスライドショー用の JavaScript の jQuery 不要の軽量ライブラリです。 npm や CDN も用意されています。Angular、React や Vue.js などからも使うことができます。 Swiper 基本の使い方 実装方法です。 ざっくり使い方を紹介します。 今回紹介するのは、CDN のリンクを貼るだけの簡易的な方法です。他の方法は Get start をご確認ください。 CDN の JS&CSS のリンクを を head タグ内などに読み込みます。 Module 形式であれば import でも書けます。 CDNソースへのリンクは2025å¹´1月現在参照です。必ず Get start から最新のリンクをご確認ください。 スライダーの HTML は以下。今回はクラス swiper を付与した要素にスライダーを適応します。もちろん、IDなどã

1§ã‚‚指定可能です。ページネーションなどの部品を追加したい場合はクラスを指定した要素を追加します。 JSは以下のように指定します。ページネーションやその他の部品が必要な場合は要素にクラスを指定します。 【単体】swiperをスマホのみで動かす！レスポンシブでの切り替え判定 では実際に一つのSwiperを切り替えてみましょう。 仕上がりイメージは以下のような感じです。 destroy(true, true) を使うことで、一度作ったスライダーを跡形もなく完全に破棄できます。これにより、PC幅にリサイズしたときにスライダー特有の不要なインラインスタイルがHTMLに残らなくなり、CSSでのグリッド並び替えがバグらず効くようになります。 スマホサイズ（ブレークポイント以下）に切り替えたときだけスライダーを再構築し、PCサイズで安全にSwiperを解除するロジックはこちら。 swiper resize時の負荷を抑える！throttle関数で実行回数を間引く方法 今回自作の throttle 関数で resize の実行回数を間引きました。 lodash などのライブラリを使ってもいいかもしれませんね。 apply() は、指定したthis値で関数を呼び出し、引数を配列として提供するメソッドです。 throttle の引数 fnc にまとめて処理を格納し、適切なタイミングで実行させることができます。 CSSの変更 PC表示で適宜スタイルを打ち消します。 逆パターン：PCのみにスライダーを適用してスマホで解除する方法 今回はスマホ時にスライダーを表示させる設計にしていますが、判定ロジックである isDevice() の条件を少し書き換えるだけで、完全に逆のパターン（PCのみスライダーを適用し、スマホでは解除する）もスマートに実装できます。 デバイスの判定には、CSSのメディアクエリと全く同じ感覚で扱える matchMedia を活用しています。スマホファーストでPC版のみに適用したい場合は、条件式を以下のように変更してみてください。 補足・次のスライダーを少しだけ見せたい スマホ向けのUIでは、ユーザーに「横にスクロールできる」ということを直感的に伝えるため、次のスライドを端っこにチラ見せするデザインが非常によく採用されます。 このチラ見せレイアウトは、Swiperのオプションで slidesPerView を \\"auto\\" に指定し、CSS側でスライドの横幅をパーセンテージなどで調整してあげるだけで簡単に実現可能です。 CSS側でスライド（.swiper-slide）に対して、画面幅に対する理想のサイズを設定します。 デモサンプル Swiper for SP | CodePen 【複数対応】swiper destroyを活用してレスポンシブ時に完全解体する手順 複数の場合は各スライダーにユニークな指定をする必要があります。 この場合はそれぞれのスライダーにIDを swiper01 、 swiper02 とします。 IDとともに .swiper も付与します。そのスライダー document.querySelectorAll で取得し、配列に格納します。 配列に格納した配列をコントロールします。 このコードであれば、1〜複数のスライダーをコントロール可能です。 デモサンプル Swiper for SP2 | CodePen まとめ 今回スライダーを複数切り返したかったけど、同じクラス名をSwiper生成したせいで destroy 処理の時に関数エラーでドハマリしました。 同じクラスで指定したのが原因で、ユニークな指定（ID）であればすんなり実装できました。 2時間くらい、仮説と検証を繰り返しやっとエラーを抜け出せました。。。 同じことでハマっている人への一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry513","title":"プロボノとは？メリットとデメリット【歴2年体験談】","date":"2022-11-30","modifiedDate":"2023-03-04","category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbn

1ail/2022/entry513.webp","description":"プロボノは職業上のスキル・技能を活かして無償で行う社会貢献活動。もうすぐプロボノ歴2年になろうとしている私がどんなプロボノをしているかご紹介。お金以外の支援がなぜ助けになるのか。プロボノのメリット：スキルを磨けるなど、デメリット：両立が難しいなど。","tags":["セブ島ボランティア体験記","ライフスタイル"],"body":"最近、プロボノが巷（ちまた）で話題になっています。 私は2021年のはじめくらいから、ひょんなきっかけで、セブ島の貧困地区を支援するボランティア団体を手伝っています。そろそろプロボノ2年生になろうとしています。 なぜ昨今、プロボノが重宝されるのか？実際にプロボノでどのような支援をしているのか？プロボノやってみたいけどメリット・デメリットはあるの？などリアルに紹介します。 プロボノってご存知ですか？ プロボノとは特殊技能を持っている人たちの中で、お金ではなくスキルを提供し支援する人のことを指します。 ### プロボノ プロボノ（Pro bono）とは、各分野の専門家が、職業上持っている知識やスキルを無償提供して社会貢献するボランティア活動全般。または、それに参加する専門家自身。プロボノとはラテン語で「公共善のために」を意味する pro bono publico の略で、最初は弁護士など法律に携わる職業の人々が無報酬で行う、ボランティアの公益事業あるいは公益の法律家活動を指した。弁護士による無料法律相談、無料弁護活動などが含まれる。現在も弁護士の業界において、もっとも浸透している。 プロボノ | Wikipedia 非営利団体といえど、会計やWebサイト制作など、ボランティア団体にも活動以外の費用がかかります。 たとえば支援を募集するためにWebサイトを作ろうとしたら費用が30万円かかるとします。 子ども食堂を運営する団体であれば、できればこのお金を食材購入に充てたいはずです。これが団体の本音です。 このWebサイト制作をプロボノが担うことで、費用を本来使いたい活動費用に充てることができます。 プロボノが専門領域でボランティア団体などを支援すると、間接的ではありますがインパクトの強い貢献ができるわけです。 エンジニアの私がプロボノとして実際にしていることをご紹介 では、実際にIT業界10年・エンジニアの私がしているプロボノとしてのボランティア活動をご紹介します。 私が実際にお手伝いしている団体はセブ島の貧困層の主に子どもたちの教育を支援している「DAREDEMO HERO」です。 エンジニアやデザイナーは全般的に団体のボランティア団体のプロモーション活動に貢献することができます。 Webサイトの作成やアドバイスができる ボランティア団体はボランティア活動に関してはプロですが、殆どの団体がITの知見が無いことが多いです。 小さなボランティア団体は、予算も少ないのでできるだけ活動費用に充てたいと考えています。 なので自分たちで何とか自団体のWebサイトを作っているなんてことも多いです。 中には未だSSL対応（インターネット上の通信を暗号化する技術）していないドメインのボランティア団体のウェブサイトも結構あります。 ただウェブサイトがあればいいので、セキュリティ、コンテンツの動線、UI/UXなどに配慮する余裕などありません。 それすらできないボランティア団体はWeb制作会社に依頼します。 IT業界の知識がないため、ワケもわからず割高なWebサイト制作費用を払い、不要な保守費用を払い続けてるなんてケースも聞いたことがあります。 なので、ITの専門スキルのあるプロボノがWeb制作に関わるだけじゃなくカンタンなアドバイスをするだけでも貢献することができます。 パンフレットや名刺などの印刷物の作成のお手伝い 私は、パンフレットや名刺の制作も手伝うことがあります。 ボランティア団体はIT技術が進んだ昨今でも、基本活動はアナログであることが多いです。 支援の呼びかけにはパンフレットなどの紙の資料が欠かせません。 印刷物やデザイン関連であれば、スポットで手伝うことができます。 なぜプロボノをしているのか？ 以前セブ島に日本から洋服を送ってもらい、スラム街で配ったことがあります。 それ以外にã

1‚‚炊き出し、支援物資の配布等、肉体労働で支援した経験もあります。 その中で大きな気づきがありました。 批難覚悟で本音を言います。 現地へ赴き、炊き出し、支援物資の配布等など支援すれば、とても見栄えはいいパフォーマンスにはなります。 しかし、素人の私が現地入りしてもたもたしながら手伝うことは、スタッフの邪魔になるかもしれないし、ボランティアの効率が悪いのではないかと思うようになりました。 ひょっとしたら現地に慣れてない私が炊き出しや洋服配りをするより、空き時間にホームページやチラシ制作をした方がよっぽど役に立つのでは？ どうせなら無駄なく無理なく貢献したいと思ったので、優先してプロボノ活動をするようになりました。 プロボノをするメリット・デメリット 何事もメリット・デメリットがあります。 この記事を読んでいる方はプロボノに興味があると思うので、メリットデメリットも紹介します。 プロボノをするメリット 1. 自身のスキルを思う存分アウトプットできる これが一番私にとって大きなメリットです。 私はエンジニアなので、常に新しい技術には興味があります。試してみたい技術を積極的に試させてもらえます。 2. 仲間ができる ボランティア活動は内容が濃いです。 同じことに共感できる仲間や友だちをもちやすいと感じています。 3. 間接的ではあるけど社会貢献していることを実感できる 誰かの役に立つことは、人が幸せを感じる瞬間の一つではないでしょうか？ ボランティア団体にスキルを提供することは、間接的ではありますが社会貢献していることになります。 プロボノをするデメリット もちろん、プロボノをする上でのデメリットもあります。 1. 貢献度合いが見えにくい。分かってもらいにくい。 プロボノはお金のように数値化されにくいのでどのくらい貢献しているか見えにくいです。 提供したスキルの価値が理解されないこともあると、モチベーションが下がって続けにくくなる人もいると思います。 2. 時間の制約 本業ではないので、必要とされるスキルを要望通りに提供できないことがあります。 私は本業が別にあるので、できない時は割り切ってできないと伝えるようにしています。 3. 団体とスキルとのミスマッチング どんなにスキルがあっても、団体がほしいスキルと違うなどのミスマッチは起こります。 好意の押し付けほど迷惑なものはないです。なので、私はできるだけ必要とされることだけをやるようにしています。 まとめ・プロボノはボランティア団体がほしい人材 「セブのスラム街で洋服配ったら社会貢献できる！」と思いついたことがきっかけでセブ島現地ボランティア団体に関わるようになり、なんとなく私のプロボノとしても手伝うようになりました。いつの間にか2年が過ぎようとしています。 プロボノ自体はふわふわ始めたことですが、気がつけばちゃんと貢献できるようになっていました。 私としてはメリットでもお伝えしたように、今のところWeb制作スキルを思う存分やらせてもらっているので申し分ないです。 とはいえ、活動の一番の原動力は「 私がやりたいからやっている 」です。 どんなに社会貢献できてもやりたくないことはやりたくないですからね笑 この記事がプロボノにチャレンジしたい人の一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry512","title":"キャッシュレスアプリ GCash にチャージされたお金をATMから引き出す方法","date":"2022-11-23","modifiedDate":"2026-03-20","category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbn

1ail/2022/entry512.webp","description":"フィリピン現地の銀行がなくても ATM で現金引き出しする方法をご存知ですか？GCash Card の入手方法とアクティベートの仕方を中心にご紹介。GCash はQRコード決済アプリの一種。決済だけじゃなく光熱費の支払いや送金など、とても重宝。語学留学で長期滞在する方、フィリピンに住んでいている方必見。","tags":["セブ島","海外移住"],"body":"フィリピンではQRコード決済（いわゆるキャッシュレス決済）がロックダウン中にすっかり浸透しました。 中でも個人的に愛用しているサービスが GCashです。レストランやコンビニでの決済だけじゃなく光熱費の支払いや送金もできてとても重宝しています。QRコード決済の難点はネットが使えないと支払いができないこと。突然ネットが不安定になり結局現金で支払うなんてこともしばしば。 最近 GCash Card を入手し、現地銀行がなくても ATM で現金を気軽に引き出しができるようになりました。今回はフィリピン・セブ島に4年以上住んでいる私が、この GCash Card の入手方法とアクティベートの仕方を中心にご紹介します。 GCash（ジーキャッシュ）とは？ GCash とはお店にあるQRコードや自分のアプリでQRコード決済できる、フィリピンで使えるサービスです。 GCash を利用するためには iPhone もしくは Android から GCash アプリをダウンロードします。 以下の手順でアカウント作成します。 1. 電話番号入力（現地の電話番号）、SMSから届く認証用コード入力 2. 氏名、住所、生年月日、メールアドレスを登録 3. 4ケタの暗証番号（MPIN）を登録 ※アプリを開く度に暗証番号の入力が必要です。 GCash を完全に使えるようにするためには、パスポートなどの身分証を使ってFully Verified処理をする必要があります。 GCash でできること GCash は個人間のお金の送金、水道代などの料金の支払い、携帯のロードなどで重宝します。 引き出し、預け入れ等、最大月額10万ペソ（日本円で24万くらい） 取引きできます。 フィリピン人は銀行を持っていない人も多いので、GCash で給料の受け取りをしている人も多いみたいです。 大きな買い物はできませんが、ちょっとした長期滞在する人には十分な額ではないでしょうか？ フィリピンでのキャッシュレス決済のデメリット GCash を使う上での問題はネットが使える場所でしか使えないということです。 通常、日本では考えにくいかもしれませんが、セブ島のインターネットは不安定（特にモバイル）。 携帯の電波がつながらない or 弱くて GCash が使えなくなることがしょっちゅうあります。 また、お店のネットの問題や GCash の読み取り用端末が壊れていて使えないことも。。。 スーパーに行ったら決済に手間取ってレジに行列できているなんてことも笑 GCash Card を作ると ATM から 現金が引き出せる GCash アプリから専用マスターカード（GCash Card） を作ることができます。費用は215ペソです。 このカードはクレジットカードとしてもキャッシュカードとしても使えます。 GCash Card の入手方法 ~GCash Card はコンビニでも販売しているらしいのですが、~ 私は手に入らなかったのでアプリから配達依頼をしました。 ※ GCash Card は現在コンビニで販売していません（2023年現在）。 配達依頼の仕方です。GCash アプリを開いてView All → Cash Out を開きます。 DELIVERを選択。 お届先情報を入力。GCash の残高が215ペソ以上無いと作れないのでご注意を。 1. 名前（フルネーム、ローマ字） 2. 電話番号（現å

1œ°ã®ç•ªå·ï¼‰ 3. 州 4. 市 5. バランガイ（バランガイとは、フィリピンの都市と町を構成する最小の地方自治単位です。わからない場合は大家さんなどに聞いてみてください） 6. 郵便番号 7. 住所の細かい情報（ストリート名、建物と部屋番号など） 9. ランドマーク（住所の目印になる建物など） 利用規約に同意して申し込みます。すると、2週間位で自宅に届くはずです。 GCash Card でお金を引き出してみる GCash Card が届きました！ こちらが届いたカードです。パッケージにカードが入念に糊付けされていたせいか、粘着が完全に取れませんでした笑 GCash Card をアクティベートする GCash Card は届いただけだと使えないので アクティベート します。 画面右下の Profile をタップし、My Linked Accounts を開きます。 （私はDELIVERからアクティベートした記憶がありますので、そちらからでも多分できると思います） GCash Card を開きます。 GCash Card を追加します。最大3つ追加できるようです。 SMSから届く認証用コード入力し、アクティベート画面に進みます。 届いた GCash Card の下4ケタと、裏左下に記載されているVirtual Account Number（12ケタ）を入力します。 NEXTボタンを押し、次の画面で引き出す際に使う6ケタの暗証番号（Card PIN）を登録します。アクティベートすれば完了です。 この暗証番号（Card PIN）ですが、アプリログイン時に使うものとは違うものを登録してください。 一度アクティベートしたカード情報は My Linked Accounts → GCash Card から確認できます。 ここから暗証番号（Card PIN）を変えたり、ロックしたりなどもできます。 GCash Card で実際にお金を引き出してみる 基本主要銀行では使えるみたいですが、銀行によって手数料が違う ので注意が必要です。 ちなみにセブンイレブンのATMでの手数料は18ペソでした!! ただし、引き出し上限は10,000ペソなのでご注意ください。 GCash Card はクレジットカードとしても使える GCash Card はクレジットカードとしても使えます。 私は今のところQR決済で事足りているのでまだ使ったことありませんが、いつか試してみようと思います。 GCash はフィリピン移住、長期滞在では必須のおすすめアプリ GCash はロックダウン中に使うようになりましたが、現金を持ち歩かなくていいのでとても重宝します。 フィリピン移住、6ヶ月以上の長期滞在する方にはぜひ使っていただきたいアプリです。 この記事がフィリピン留学中や現在在住の方にお役に立てれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry511","title":"セブ島で日本語が通じる歯医者さんに行った話","date":"2022-06-28","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2022/entry511.webp","description":"銀歯が取れた！歯が痛い！日本だと歯科での治療費は保険診療なので大体の目安がわかるけど、フィリピンではピンきりです。セブ島で歯の突然のトラブルでお困りの方のために、現地在住の私が日本語が通じる安心の歯医者さん・TY スマイルデンタルクリニック（TYA dental clinic）をご紹介します。","tags":["セブ島","海外移住"],"body":"フィリピン・セブ島で突然の歯のトラブルでお困りの方のために、現地在住の私が日本語が通じる安心の歯医者さん・TY スマイルデンタルクリニック（TYA dental clinic）をご紹介します。 日本だと保険診療で大体の治療費に目安がわかるけどフィリピンではピンきりです。コロナでいろんな店が潰れているので2020年以前の情報が当てになりません。 銀歯が取れた！歯が痛い！海外でいつ歯のトラブルに見èˆ

1žã‚ã‚Œã‚‹ã‹ã‚ã‹ã‚Šã¾ã›ã‚“!備えあれば憂いなし！！ 2022年現在の情報です。 焼肉の後、フロス中に銀歯がコロンと外れた ある金曜日の夜、合法レバ刺しが食べられる「ドラム缶焼き肉 粋」へ。 オウチに帰って酔っ払って気分良くフロスかけていたらコロンと洗面台の銀色の物体が…。 8年前に装着した銀歯で、そのままコロコロと排水口の中に入ってしまいました。 一旦は諦めて寝ましたが、気になって目が覚めたので再度排水口を確認。中をよくよく見ると途中で引っかかっている銀歯を発見しました。 割り箸を使い、かろうじて銀歯を拾いました。 なんとか拾うことができました！実は私、米粒に字を書けるくらいスーパー器用です。 インターネットで調べると、銀歯が外れた箇所は歯が割れたり歯列が動いてしまう事があるので2日以内に外れた銀歯を歯医者に持って行く必要があるとのこと。 日本語が通じる TY スマイルデンタルクリニック（TYA dental clinic） 知り合いに紹介してもらった TY スマイルデンタルクリニック（TYA dental clinic）へ。 インターネットだと「TYA dental clinic」で調べないと引っかかりません。 住所TF Bldg. M. L. Quezon Ave, Mandaue City, 6014 CebuMAP 現在コロナの影響などもあり、完全予約制 です。土日が中心ですが、平日も院長とのスケジュールさえ合えば予約が取れます。 TY スマイルデンタルクリニックは世界最長ロックダウンが始まった2020å¹´3月にオープンしたそうです。ITパークからタクシーで15分程度（150ペソくらい）です。 院長のYuji先生は日本人ハーフで 片言ですが日本語が話せます。 通訳が必要な場合は希望すれば オンラインでも日本人がサポートの依頼も可能 です。 今回私が行ったときは直接助手の方が日本人で通訳サポートしてくれました。 余談ですが、Yuji先生はセブ島のNGO法人DAREDEMO HEROさんの支援する子どもたちの歯科検診もしています。DAREDEMO HEROさんは微力ながらプロボノでお手伝いしているセブ島にある子供を始めとする貧困層の支援団体です。 子どもたちの口腔衛生改善プロジェクト|DAREDEMO HERO いざ銀歯の治療、そして歯のお掃除 幸運なことに銀歯はまだ使えるらしく、セメントで再装着してもらえました。 TY スマイルデンタルクリニックの安心ポイント セメントなどの治療に使う材料を日本から取り寄せている 消毒をきちんとしている ディスポーザルできるものはきちんとディスポーザルしている ついでにクリーニングもしてもらいました。私はブリッジをしているので、歯石が溜まりやすいです。日本に居たときは半年に一度、歯のクリーニングをしていたのですが、フィリピンではたった1回しかできておらず。 トータル 1800ペソ（クリーニングが800ペソ~） でした。 価格表はないので、症状を伝えて都度見積もってもらいましょう。 虫歯なし、歯もあまり汚れていないとのこと。「奥歯とブリッジの周りはプラークが付きやすいから気をつけて歯磨きしてね-」とのことでした。 ネットで調べたらコロナ前の情報ばかり 「セブ島、歯医者」で検索するとほとんど語学留学でセブに来た人の情報ばかり、つまりコロナ前の情報です。 コロナでいろんな店が潰れている ので、2020年以前の情報 はぶっちゃけ当てにはなりません。 ちなみにGoogle検索では「検索ツール」という機能を使って最新の記事のみに絞ることができます。1年以内であれば問題ないことが多いと思います。 ちなみに最新の「セブ島、歯医者」の記事はでっぱりんのローカル歯医者で歯列矯正をしたブログでした。 ※ でっぱりんはあいのりという番組に出演していた女性だそう。私はあいのりを見ていないのであまり知りません。 フィリピンあるあるですが、Googleマイビジネスの情報さえも怪しい事が多いです。 ※ Googleマイビジネスは検索したら出てくる上記のような施設情報。 掲載されている営業時間などの情報も更新されてないのか、いい加減なことが多いです。情報を元に行ってみたら店がなã

1‹ã£ãŸãªã‚“てこともあります。 お店や場所を探すときは知り合いに聞くのが一番 歯医者はお値段も技術も格差がすごい モールなどに入っているキレイなデンタルクリニックは清潔で安心できる上、ホテルのラウンジみたいに高級感があります。 お金に余裕があり、安心して治療を任せたければ高いところもおすすめです 1年前同僚の情報を頼りに、ビジネスアヤラの中のデンタルクリニックで歯石除去したときは確か 2,000ペソ（4,500円くらい） くらいかかりました。日本の歯石除去は保険適用外でも2,000円くらいなので相当高いです。 高級感があり雰囲気も良かったのですが、休憩なく一気にすべての歯の歯石除去をされました。終始口を開けっ放しで泣きそうでした。 そういったデンタルクリニックですすめられるがままセラミック素材で治療してしまった人もちらほらいるようで、どこかのブログでは虫歯の治療ごときに25万円かかったとか腰抜かしそうな内容も。 かといってローカルの人が行く歯医者は治療すればまだ使える歯もすぐ抜歯、セメントなどが粗悪だったり、消毒もちゃんとやってくれないとか。怖い情報ばかりでした。。。 ちょっとローカルな場所に行くと歯のないおじさんやおばさんが、そこら辺にいます なんでそんなに金額が違う… フィリピンの医療費事情 私はフィリピンに来て以来、病院にかかったことがありません。 日本でも健康診断では毎年問題なく、医者からは酒を控えろと言われる程度でした。 ということで病院には縁がないので、実際に病院に行った人の話を参考にお話します。 医療費はご紹介の通りピンきりで、フィリピンには日本のような手厚い保険制度がありません。民間で保険に入ると高齢者は月額2万ペソとか取られるそう。 骨折で入院100万ペソ（保険なし） コロナ入院で100万ペソ以上 風邪で1,000ペソ（保険なし） 膀胱炎で700ペソ（保険なし） 保険を使おうが使わなかろうが、行った病院次第という印象 特に語学留学中の日本人は海外保険などで入院させたほうが儲かるので、とにかく病院は入院させたがる印象です。 病院に行くときは知り合いのフィリピン人などに付いてきてもらうほうが安心できそうです。 まとめ・歯のトラブルは突然やってくる 海外にいると、食生活も大幅に変わります。 とくにフィリピンでは飲み物は甘いし、料理に使われるお肉は骨ごとチョップされてるし、お腹や歯のトラブルに見舞われやすくなります。 ※ カレンデリア（大衆食堂）の料理。ココナッツスープのピリ辛のチキンはほぼ骨。 セブ島で急な歯の痛みや銀歯が取れたなどあった方の一助となれば幸いです。 最後までお読みいただきありがとうございました。 おまけ・セブ島で入手できるフロス セブ島には糸ようじのようなタイプから、本格的なフロスまで入手可能です。 ※ セブの薬局で買えるフロス。Lazada（通販）でも180ペソくらいで購入できる。日本のデンタルクリニカなどのフロスに比べてコシがない。 私はフィリピンで入手できる歯ブラシだけはヘッドが大きくて細かいところが磨けないので、日本製歯ブラシを使っています。子供用歯ブラシを使っている日本人もいます。","noindex":true},{"slug":"entry510","title":"Clarity の使い方の基本と設定｜ヒートマップが表示されないトラブル解決法付き","date":"2022-06-26","modifiedDate":"2026-06-22","category":"seo","categoryName":"SEO対策・デジタルマーケ","ogImage":"/thumbn

1ail/2022/entry510.webp","description":"Microsoft Clarityの使い方と導入手順を、画像と表で分かりやすく解説します。基本の設定から、クラリティでよくある「ヒートマップが表示されない」というトラブルの原因と確認すべき対策まで網羅。データを確認してサイト改善に活かすための現実的な方法をお伝えします。","tags":["Web解析","便利ツール"],"body":"無料のヒートマップ解析ツール「Microsoft Clarity（クラリティ）」。ユーザーがどこをクリックし、どこで手を止めたのかを視覚的に教えてくれる、きわめて強力な相棒です。 英語の画面だからとっつきにくいと思っている方も安心してください。この記事では、導入方法から具体的な使い方まで、画像30枚と表を使って徹底的に掘り下げて解説しました。マスキングやIPブロックなどの細かい設定、URLのフィルター方法まで、実務に必要なノウハウをすべて詰め込んであります。 せっかく導入したのにヒートマップがうまく表示されない、というときのために、私が現場で解決した具体的な原因と確認すべき対策もあわせて追記しました。 仕様の壁に振り回されるのは今日で終わりです。この記事を参考にクラリティを味方につけて、ユーザーの動きを真っ直ぐに受け止め、サイト改善の確かな一歩を踏み出しましょう。 Clarityで分かること、できること Clarity を使うとスクロール率やクリック箇所などが可視化されるので直感的に改善すべき箇所が探しやすくなります。 私がよく見ている機能です。Google アナリティクスではわからない箇所を中心に見ています。 ページごとのスクロール率 ページごとのクリック箇所 ユーザーの動きの動画 デッドリンク（クリックする必要のない箇所なのにクリックされている場所）などの発見 ぜひ Clarity のデモサイトで確認してみてください。 ただ、英語なので英語が苦手な方はGoogle翻訳などのChromeなどの拡張機能を入れて使うと良いかもしれません。 ClarityはUIの改善に役立つ リンクやボタンじゃないのにクリックされている要素をデッドリンクといいます。 大抵の原因はデザインが紛らわしくてクリックしている箇所があるとユーザーはストレスを感じ離脱の原因になります。 Clarityではこのデッドリンクを始めとするユーザーの行動箇所などを特定できます。デッドリンクが見つかれば、どう紛らわしいか確認し、デザインを改善することができます。 導入方法 Google、Facebook、Microsoftのアカウントがあればすぐに始めることができます。 Microsoft Clarity 新規登録では Sign Up を選びます。 Sign Up サインアップ = 新規登録 Sign In サインイン = 登録済みの人のログイン Google Tag ManagerやGoogle アナリティクスと連携しやすいので、Googleアカウントを使って登録することをオススメします。 メールアドレスを入力します。 I accept the Crarity Terms of use. 利用規約に同意を求められるので、チェックを入れます。 プロジェクトの追加 プロジェクトを追加します。 名前とサイトのURLとサイトカテゴリーを登録します。 E-Commerce ... ネットショップとか SaaS ... SaaS Marcketing ... マーケ Consulting ... コンサル Media ... メディア Education ... 教育関連 Comuunity ... コミュニティ None-profit ... 非営利 Other ... その他 Clarityのインストール To see how users engage with your site, you need to install a Clarity tracking code. It can take up to 2 hours to start seeing data. サイトのユーザーのエンゲージを観測するためにはトラッキングコードをインストール（埋め込み）してください。最初のデータが見れるまでに2時間かかります。 直接タグを埋め込む方法とタグマネなどを介してインストール（トラッキングコードを埋め込む）する方法があります。 個人的にはタグマネを介してインストールするのがラクなのでおすすめです。 Googleアカウント経由でタグマネアカウントとGTMコンテナ名を取得して設定します。 2時間経ってデータが取れなã

1„場合にはちゃんとタグが埋め込まれているか確認し直します。 タグマネでの確認方法を以下記事にまとめてます。参考にしてください。 IP blocking（IPブロック） のセットアップ チームメンバーなどのIPアドレスをブロックできます。 Block my current IPにチェックを入れると現在の自分のIPを追加できます。 Masking（マスキング） のセットアップ Clarity にはコンテンツのマスキング（隠す）機能があります。 We mask all sensitive data on your site by default. You can mask additional content, too. すべてのセンシティブなデータはマスキングで隠されています。マスキングはカスタマイズできます。 センシティブなコンテンツはデフォルトでマスキングされています。 Strict、Balance、Relaxed とモードが3つあり、デフォルトは Balance です。 Strict ... すべてのテキストがマスク Balance ... フォームや数字、iframe（Google map YouTube Google広告）はマスク Relaxed ... マスクなし さらに要素ごとにマスク有りなしをカスタマイズしてセットできます。録画されて困るものなどは個別にマスキングしておきます。 add element からマスクしたい要素を指定します。 Content insights card のセットアップ Clarity には Content Insights（コンテンツの洞察） と言って記事エリアのエンゲージメントを計測していくことができます。 ※ 何が観測できるかは Dashboard（ダッシュボード）の Contents insights で詳しく説明します。 Content insights card is automatically applied for most WordPress blog sites. To view content insights on your Clarity dashboard, add the following attribute to the article element or tag on the DOM for article pages. Content insights カードはほとんどの WordPress では自動的に設定されます。もし Content insights カードが表示されない場合、専用の属性を手動で追加してください。 ほとんどの WordPress では自動的に設定される Content insights カードが表示されるのですが、私のブログみたいに Gatsby 製など WordPress 以外のWebサイトではきちんと表示されないことがあります。 表示させるためには記事が格納されているタグにカスタムデータ data-clarity-region=\\"article\\" を付与する必要があります。 Google アナリティクスと連携 アナリティクスと連携することもできます。 連携しておくと Clarity 側でもデータが見れるのと、アナリティクス側でも Clarity のイベントを取得できるようになります。ただし現在連携できるのはユニバーサルアナリティクスのみです。 Clarityに表示されるGoogle アナリティクスのデータは見ていません。アナリティクスで見ればいいことだし。 Clarityの使い方 セットアップが終わったら実際に使ってみましょう。 Dashboard（ダッシュボード）、Recording（録画）、 Heatmaps（ヒートマップ）の3つが確認できます。 Filters（フィルター）の機能を使って期間やページ項目などを絞れます。かなり細かく絞り込めます。 | フィルター | 説明 | | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | User info | Time Frame（期間）、Device（ディバイス）、Browser（ブラウザ）、Operation system（OS）、Country（国）、Clarity user ID | | User actions | Insights(洞察)、Actions（行動）、Clicked text（クリックしたテキスト）、 Page scroll depth（スクロール率・最大値と最小値）、Goal setup（Google アナリティクスのコンバージョン。ステータスはReached（達成）かDidn\'t reach(未達)か選択可能） | | Path | Entry URL(ランディングページ)、Exit URL(離脱ページ)、Visited(訪問ページ) | | Traffic | Referring site(URL直接入力)、Source(選択)、Medium(ダイレクト、オーガニック、リファラーから選択)、Campaign（キャンペーン）、Channel（チャネル） | | Session | Session duration(セッション時間・最大値と最小値)、Session click count(セッション内でのクリック数)、Session page count(1セッションのページ遷移数) | | Page | Page duration(ページ滞在時間・最大値と最小値)、Page click count(クリック数)、Error（JSと画像）、Page size(ページサイズ)、Screan resolution（解像度）、Visible page(ユーザーへのページ表示時間)、Hidden page(ページは開かれているのに見られてない時間。たとえば別タブで開いているだけとか) | | Custom filter | カスタムでCustom tagsでフィルターを作れる。Custom tagsに関するドキュメントはこちら。 | User actions の「Insights」「Actions」をもう少し掘り下げます。Clarity における Insights は いわゆるユーザーのネガティブな行動 です。 | Insights | 説明 | | --------------------- | -------------------------------------------------------- | | Rage clicks | 狭いところを何度もカチカチクリック | | Dead clicks | リンクやボタンなどのクリック要素ではないところをクリック | | Excessive scrolling | 急なスクロール | | Quick backs | 前のページに即座に戻られる | | Actions | 説明 | | ----------------- | -------------------------- | | Cursor movement | カーソルの動き | | Entered text | 文字入力（ペーストも含む） | | Selected text | ページの中で文字を選択 | | Resized page | ページのリサイズ | 実際にFilters（フィルター）を使ってみましょう。 日付を30日にし、「Actions」の「Selected text」にチェックを入れます。 「Apply」をクリックすると条件に絞られた状態になります。 よく使う Filters（フィルター）は Segments に登録して再利用します。 Path フィルターでの絞り込み方法 Path からはページを絞り込めるのですが、方法は3種類あります。 1.最初から * の手前まで一致するURL。 2.正規表現は ~ を頭につけます。 パラメーターを含むすべてのページを取得したい場合。 正規表現に関してはこちらを参考に。 3.何もつけなければ完全一致。 Dashboard（ダッシュボード） ダッシュボードでは全体を確認することができます。 私は Google アナリティクスで見れる箇所は飛ばして見るようにしています。 私が主に見る箇所は「Scroll depth」、「Contents insights」、「JavaScript errors」とユーザーの行動（Insights）を中心とした「Dead clicks」「Rage clicks」です。 先程 Filters（フィルター）で「Actions」の「Selected text」を絞り込みましたが、この銀ねこアトリエでã

1¯ã€ã‚³ãƒ¼ãƒ‰ã‚µãƒ³ãƒ—ルが掲載されているページが圧倒的にデッドクリックがあることが分かります。 これはユーザーがソースコードのコピペの過程で起こっているデッドリンクです。 デッドリンクを減らすためにはソースをコピーボタンをつけるなど、対策を考えることができます。 Contents insights Contents insights では READER TYPE（読者のタイプ）、READING BEHAVIOR（読んでる最中の行動）など、記事中のエンゲージメントの中でキーとなる指標が確認できます。 | READER TYPE（読者のタイプ） | 説明 | | --------------------------- | -------------------------- | | One and done | 1セッションにつきたった1回 | | Casual | 1セッションにつき2~3記事 | | Serious | 1セッションにつき4記事以上 | | READING BEHAVIOR（読んでる最中の行動） | 説明 | | -------------------------------------- | ------------------------------ | | Engaged | 記事を最後まで読んだ | | Abandoned at headline | 記事の見出しだけしか読んでない | 以前、【GA4】タグマネで設置したイベントが計測できないときの対処法という記事で要素の表示イベントを利用して「読了」を計測するタグ作成を紹介しましたが、Clarity が入っていれば必要ないかもですね。 まだ計測し始めたばかりですが、CLARITY CALLOUTS 内に分析結果をテキストで教えてくれます。 ざっくり翻訳すると以下の事が書いてあります。 1. オーガニックサーチ以外のチャネルからの訪問者は見出ししか読まずに離脱する可能性が7.3倍高い 2. Casual（1セッションにつき2~3記事）な読者は100％フィリピンからの訪問 フィリピンからの訪問…そりゃ私だよ！ Recording（録画） 録画されたユーザーの行動を見ることができます。 動画は Recording（録画）に移動すると、左側にカードが並んでいます。 日時、撮影時間、Entry/Exit、ページ遷移数、クリック数等細かい情報が掲載されています。 見たい動画をクリックします。 おすすめの再生設定方法です。 再生スピードを 4倍から8倍、Skip inactivity にチェック を入れておけばサクサク動画を確認できます。 動体視力がない人は2倍ぐらいにしておきましょう 再生中は以下のような感じで、ユーザーの動きがわかります。 PCの場合 SPの場合 Heatmaps（ヒートマップ） Heatmaps（ヒートマップ）はクリック（タップ）、スクロール状態をヒートマップで可視化できます。 Filters（フィルター）を使わなくても、左上の検索窓に直接URLを打ち込んでページを検索できます。もちろん、高度な絞り込みができます（絞り込み方法はPath フィルターでの絞り込み方法参照）。 ディバイス ... PC、Tablet、Mobile（スマホ） ヒートマップの種類 ... クリック（タップ）、スクロール、エリアの3つ 画面下のバーでページビュー数とクリック（タップ）数が確認できます。 一番活発な箇所は赤、さほど活発ではない箇所は青色で表示されます。 クリック（タップ）です。どの要素がどのくらいクリックされているかも分かります。 クリック（タップ）数が多い順に番号が振られ、要素の詳細は左のバーで確認できます。 スクロール量です。どのページもだいたい上の方が赤く下に行くにつれて青くはなりますが、早く離脱が起こっているページはすぐ青色になります。 ※ この銀ねこアトリエの画像は一部の画像が遅延読み込みされているので画像が記録されていないですが、問題有りません。 左のバーでスクロール5％ごとに何人ユーザーが残っているかが分かります。 エリアです。要素ごとのトータルクリック数（タップ）をパーセンテージで視覚化してくれます。 左のバーからサイトに表示されている順番で確認できます。 Clarityのヒートマップが表示されない原因と確認すべき対策 あれれ？！ヒートマップ表示されないだけど。。。 Clarityではせっかくタップ/クリック箇所やヒートマップを見ようとしても「We couldn\'t find any clicks.」や「We couldn\'t find any scroll information.」とヒートマップ表示されなくなる事が多いです。 この場合の私の対処方法のご紹介です。 Clarity はページごとにヒートマップの状態を確認できます。 一覧に表示されているURLは正規表現を使って抽出されたページです。 ãƒ

1’ートマップを見たいページをPath フィルターでの絞り込み方法で紹介した方法、以下いずれかでページを抽出し直します。 1.最初から * の手前まで一致するURL 3.何もつけなければ完全一致の方法 こうするとたいていヒートマップやタップ/クリックか所を表示できるようになります。 ページが絞り込めない理由はあくまで私の仮説ですが、正規表現を用いると処理に時間がかかりすぎてヒートマップを生成できなくなるのだと思われます。 Microsoft Clarityの使い方をマスターしてユーザー行動を分析しよう 英語だからとっつきにくいと思っている方のために、かなり設定やツールの使い方をかなり詳しく説明しました。 具体的に Clarity を使って、いくつか UI も改善したことがあります。 まだまだ紹介しきれてない機能もありますが、また機会があれば追記しようと思います。 相当長くなってしまいましたが、最後までお読みいただきありがとうございました。 参考 Clarity Docs(英語)","noindex":false},{"slug":"entry509","title":"WordPress(5.9〜) theme.jsonの設定方法とブロックテーマ/オリジナルテーマの作り方・後半","date":"2022-06-19","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2022/entry506.webp","description":"WordPressのブロックテーマで直感的に編集可能なテーマを作成。この記事ではページの追加や記事一覧などのテンプレートの作り方について詳しく解説。前半ではtheme.jsonの設定の仕方、テンプレートやブロックパターンの作成方法を紹介しています。簡単なブロックテーマが作成できる構成です。","tags":["WordPress","ブロックエディタ"],"body":"前回はブロックテーマでtheme.jsonの設定の仕方、テンプレートやブロックパターンの作成方法を紹介しました。 今回は一覧と記事詳細ページのテンプレートを作ります。簡単なブロックテーマが作成できる構成となっています。 この記事は二部構成となっています。 前編・ベースのテンプレート作成 後編・記事一覧出力やページの追加（←イマココ） トップページのテンプレートを作る ファイル構造などは前回のWordPress(5.9〜) theme.jsonの設定方法とブロックテーマ/オリジナルテーマの作り方・前編を参考にしてください。 index.htmlを複製して新たなテンプレート・home-page.htmlを作成します。 index.htmlは 記事一覧を表示させるページ として利用します。 WordPress管理画面からhomeという固定ページを作り、テンプレートpage-homeをセットしておきます。 WordPress管理画面から記事一覧という固定ページも追加しておきます。スラッグはblogとかで大丈夫でã

1™ã€‚ 設定 > 表示設定からホームページの表示を固定ページで ホームページは home 、投稿ページは記事一覧 にセットしておきます。 ブロックテーマのテンプレートの仕組み ブロックテーマではテンプレートファイルがHTMLになるだけで、従来のテンプレート同様ファイル名で判断で用途が判断されます。 | ファイル名 | 説明 | | --------------- | ------------------------ | | single.html | 投稿 | | page.html | 固定ページ | | xxx.html | 固定ページ用テンプレート | | home.html | HOME用テンプレート | | archive.html | 一覧用テンプレート | | category.html | カテゴリ一覧 | | tags.html | タグ一覧 | | ４０４.html | 404 | もし、htmlテンプレートがなくphpのテンプレートがある場合は、phpのテンプレートが使われます。 記事一覧を作成 index.htmlを編集し記事一覧を作成を作成します。完成イメージはこちら。 コードが長くなってしまったので小分けに説明していきます。 説明をすっ飛ばしたい人は記事一覧テンプレートのすべてのコードへ。 一覧のタイトル追加 まずは、見出しを追加します。 h2以外の見出しにはレベルを追加します。指定しないとブロックが壊れます。 ループで記事一覧を出力 ループの方法です。 | オプション | 説明 | | ------------- | --------------------------- | | perPage | 1ページに表示させるページ数 | | pages | ページ送り数 | | offset | 表示させたいページ数 | | postType | 絞り込みたいページのタイプ | | categoryIds | 表示させたいカテゴリー | | tagIds | 表示させたいタグ | | order | 昇順･降順 | | orderBy | ソートの基準（日付とか） | | author | 投稿者で絞り込む | | exclude | 除外 | | sticky | 調べ中 | 記事からは以下の値を取得してみます。{\\"isLink\\":true} でリンク付きのブロックが呼び出せます。 {\\"format\\":\\"Y.m.d\\"}で日付のフォーマットを指定します。 wp:post-template内をまとめて書くとこんな感じになります。 wp:columnsを使って2カラムにしました。 ページネーションを出力 ページネーションを出力します。 「前のページ」「数字」「次のページ」の3つのパーツに分かれています。 記事一覧テンプレートのすべてのコード カテゴリーやタグ一覧を出力したい場合 archive.htmlを追加し、タイトルを出力するコードを書き換えるだけです。 記事詳細のテンプレート 記事詳細のテンプレートの作り方です。 記事詳細出力用のsingle.htmlを作成します。 コードが短いのでまとめて紹介します。 各パーツを出力するコードです。 term の指定を変えるだけです。 category ... カテゴリー post_tag ... タグ 固定ページ タイトルとコンテンツだけを出力するのであれば以下でOKです。 まとめ・ブロックテーマを使うと自由度が高くなる 2回に分けてブロックテーマの作り方をご紹介しました。 前編・ベースのテンプレート作成 後編・記事一覧出力やページの追加（←イマココ） まだまだブロックテーマはリリースされたばかりで情報が不足しています。 随時追記していきますので乞うご期待ください。 この記事が、ブロックテーマで次世代WordPressを試したい方の一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry508","title":"時間を「消費・浪費・投資」する基準とは？時間のムダ遣いと浪費グセを減らすシンプルな方法","date":"2022-06-17","modifiedDate":"2026-06-08","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2022/entry508.webp","description":"時間はお金と同じように「消費」「浪費」「投資」に分類できます。時間を無駄に消費する浪費グセを減らし、人生の取捨選択をする方法とは？子育てと遅咲きのIT転職を経て海外ノマドになった私が、無理な人付き合いやSNS投資を辞めて人生がラクになった体験談。","tags":["キャリアアップ・転職","ライフスタイル"],"body":"時間は誰しもが使える平等に与えられた「資源」です。 私たちが毎日何気なく時間を消費する中で、その使い道をお金のように「浪費」「消費」「投資」の3つに分類してみると、日々の行動の取捨選択が圧倒的にしやすくなります。 💡時間を「3つ」に分類する私の基準 時間の消費：時間と引き換えに、生活に必要な同等の価値を得る時間 時間の浪費：ただ時間を消費するだけで、何も得るものがない時間 時間の投資：将来、使った時間以上のリターン（スキルや心のゆとり）を得る時間 時間は大切。だから「浪費」「消費」「投資」に分類した 時間とお金はよく似ています。時間は失うと戻ってこない分、お金以上に貴重な資源というのが私の考えです。 だからこそ、時間をムダにしないために「何をして」「何をしないか」を日々意識して選択しています。時間の使い方を「消費・浪費・投資」の3つに当てはめてみると、行動の判断がとてもスムーズになるワン（まるで家計簿をつけるような感覚ですね！）。 たとえば、私はよく近所のローカルマッサージに行くのですが、リラックスできて疲れが癒えます。私にとってこの時間は、元気を取り戻すために必要な「消費時間」。でも、それによってモチベーションが爆上がりして、その後の作業がめちゃくちゃ捗った日には「投資時間」だったとも言えます。 また、勉強したりブログを書くような時間の使い方は、私にとっては間違いなく「投資」です。勉強してスキルアップするだけで、自分の市場価値が上がりますし、エンジニアとしても次の仕事が圧倒的に取りやすくなるからです。 時間を使った結果「自分に何をもたらすのか」を意識して行動する 時間にシビアになった理由。子育て、遅咲きの転職が時間の貴重さを教えてくれた 若い頃の私は子育てで時間を作る事が難しかったです。 喘息持ちの子供のためにどうしてもIT関係の仕事につきたくて、朝は5時、夜は子供が寝てから勉強しました。 当時を振り返ると時間を作るのがいかに大変だったか思い知らされます。 人間不思議なものです。 使える時間が有り余っている学生の頃は、惰性でゲームしたりマンガ読んだしていたのに、いざ限られた時間しか使えない「母親」になるとその貴重さに気づきました。 人は時間が有り余っている方が浪費したくなる 「消費」や「投資」が「浪費」に変わる瞬間 できるだけ時間を「消費」や「投資」だけに費やしたいのですが、「消費」や「投資」が「浪費」に変わる瞬間があります。 学生の頃私はゲームや漫画が大好きで、勉強する時間を削ってでもそればっかりやっていた時期がありました。 当時の私にとっては楽しみを得るために必要不可欠な「消費」でした。ストレス発散もできたし有意義な時間を過ごせました。 今はまったくゲームをしません。今の私には何も得ることがありませんし、機æ

1ã‚’買ったり貴重な時間を奪われるくらいならしようとも思いません。 時間の使い道はその人の置かれている状態や価値観によって変わります。 時間の「消費」「投資」「浪費」の定義は移（うつ）ろいやすい 「投資」のつもりでやっていたことが負担になることも 時間の使い方を意識するあまり「投資」に使おうと躍起（やっき）になっていた時期もありました。 実は私ちょっと前までTwitterのSNSマーケティングで結果を残そうと頑張っていたことがあります。 毎日10Tweet 意識高い系の人をフォロー 意識高い系の発言を心がける 意識高い系の発言をし、人見知りなのに無理して絡んでいました。 フォロワーは3ヶ月くらいで300人ぐらい増えましたが、心の底では「やりたくないなー」って思っていました。 ある日、思い切ってやめてみました。 あっさり辞めたら心が軽くなりました！！ すっきり、心を浪費していたんだなーと気づきました。 人脈を広げることは本当に「投資」？ 人脈を広げるのも「投資」だと考えている人は多いです。 かくいう私も、仕事のために人の集まる場所に行って人脈を作らなければいけないと思っていた人間の一人です。 人脈を広げるということは、お金も時間も使います。 以前は、社交できる場所に赴いて人付き合いをしていました。結構最近まで「投資」として人脈づくりをやっていました。 ところが、セブ島フィリピンではコロナのせいでロックダウンに見舞われました。 おかげで強制的に人付き合いの機会が減り、気づいたんです。 人付き合いしないとなんてラクなんだ！！ 行動は制限されて大変でしたが、個人的にはロックダウンのおかげで救われたこともあります。 なんでそんなに人付き合いってしんどいんだろうって考えてた時、あるTweetが流れてきました。 「人間は会話すると、必ず傷つく」 納得しかありませんでした。 妙に納得できちゃったんでさらに無理な人付き合いはしなくなりました。 使った時間が何をもたらすか。 得るものと失うものを天秤にかけて負担のほうが大きければやらない という判断をしています。 無理してする「時間の投資」は浪費するのと一緒です。 まとめ・時間をどう使っているか意識するだけで人生は変る 時間を「浪費」「消費」「投資」に分類して意識して使っているという話をしました。 人生は短いです。 時間をどう使うかで人生は変わります。「浪費」だと感じることは可能な限り減らして、毎日を心地よく過ごそうと心がけています。 ただ、「投資」しているつもりでも辛いと感じれば思い切ってやめます。 時間をどう使うかは自分次第、使い道をどう捉えるかも自分次第です。 時間の使い方について、最近の私の考え方を徒然に綴りました。 最後までお読みいただきありがとうございました。 参考 【消費・浪費・投資】意識したいお金や時間の使い方の話 「人間は会話すると、必ず傷つく」コピーライターが指摘する、SNS時代の「距離感」と「言葉」","noindex":false},{"slug":"entry507","title":"ステージング(add)取り消したい！コミット終わらない…救済 Git コマンドまとめ","date":"2022-06-12","modifiedDate":"2026-06-08","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2022/entry507.webp","description":"Git コミット(git commmit)やステージング(git add)での取り消し、打ち消し、上書き、push できないときの対処法など、よくあるお困りごとの対処法をケース別にまとめました。","tags":["git"],"body":"やってしまった！このコミットまだだったのに、わぁ、、、コンフリクトしちゃった汗 Git 使いたての頃によくぶち当たる壁ですよね？私は初心者の

1頃、Git の入門書や公式の解説はことごとくわかりづらく何度も挫折しそうになりました。 Gitのコミットやステージングでの取り消し、打ち消し、上書き、push できないときなど、Git は困る沼だらけ。私がよくあるお困りごとの対処法をケース別にまとめました。 この記事の対象者です Git 初心者 Git が苦手 Git のコマンドラインを使いたい 前提条件として Mac と VS Code、 GitHub を使っています。 ぶっちゃけると一般的に Git の操作は Source Tree などの GUI（グラフィカルインターフェイス）を使った方が簡単です。 私はむしろ GUI での操作方法を覚える方がめんどいので基本的にコマンドで Git 操作しています。 初心者に一番怖いコンフリクト解決の仕方 Git といえば初心者に一番怖いものはコンフリクト（競合）です。 コンフリクトしないために初心者が気をつけないといけないことがあります。 基本はやらかす前に、「必ず pull してリモートなどと同期して最新状態にして作業する」を心がけましょう VS Code などではコンフリクトすると、以下のようにファイルにビックリマークが表示されます。 対象のファイルを開き、コンフリクト箇所ごとに修正します。修正方法は3種類選べます。 Accept current change(現在の変更) Accept incoming change(リモートなどから受け入れた変更) Accept both change(コードを比べて手動) タブをクリックしてコンフリクトを解決します。 コンフリクトの箇所が長くて、どっちが正しいか、手動で修正しようにもどうしていいかわからない場合は、Compare changes でコードを比較します。 間違えたら、⌘Z を押せば変更を取り消せます。 あとは、いつもどおり commit すればOKです。 コンフリクトファイルは、コマンドからも探すことができます。 コンフリクトしたファイルパスなどを確認できます。 まとめてコンフリクト解消（file別も紹介） 盛大にコンフリクトしてしまった場合、たくさんのコンフリクトを一度に手動で解消するのは面倒です。 そんなのいちいち手動でやってたら寿命も尽きます。人生は短い、命と落とし恋せよ乙女。 大抵は Accept incoming change(リモートなどから受け入れた変更) を受け入れたいはず。 なので、まとめてすべて受け入れたい場合は以下コマンドを叩きます。 個別file別だったらこんな感じ。 逆にやっちまって、すべての変更を受け入れたくない場合。 もちろん個別file別のこともあると思うので 【pull request】がリジェクトされた場合 プルリク送って、リジェクトされた場合の対処法です。 リジェクトされたら、まずはマージしたいリモートのブランチを pull します。 必ずコンフリクトが起こるはずなので、必要な箇所を修正し再度プルリクを出します。 これでたいてい解決できます。 コンフリクトファイルが表示されないこともある たまに何故かコンフリクトファイルが VS Code側で表示されない場合があります。そんなときはVS Codeで「 私は基本的に、npm や node を取り扱う package.json がある環境下で作業しているので以下のとおり登録していおきます。 使い回すなら面倒なので、もしくは ~/bin など、どこかにbash用のコードを保管しておきましょう。 パスを通す。 実行。 【git revert】履歴を残してやり直す コメントを求められますが、英語のメッセージで良ければそのまま :q とコマンドを叩いて入力を終わらせます。 これで変更した commit のデータが残ったまま、指定の commit まで巻き戻すことができます。 【git commit --amend】直前のコミットのメッセージを直したい うっかり誤字脱字のある commit メッセージを残してしまい恥ずかしいことがあります。 そんなときは、--amendオプションを付けてコミットし直します。 【git push】が10分以上終わらない リモートにブランチを追加しているにも関わらず、push が終わらないことがあります。 容量を超えてないのに push が終わらない場合は、リモート名ブランチを指定してプッシュしたらたいていうまくいくことがあります。 単純に容量を超えいる場合は、回数を分けて push するかプランを変えるかのどちらかです。 【git stash】作業途中で他にブランチを切り替える必要がある場合 急ぎでこっちやってなどという依頼はしょっちゅうあります。そんな時よく使うコマンドです。 いったん変更下内容を退避（棚上げ）しておいて、後ã

1»ã©ä½œæ¥­ã§ãã¾ã™ã€‚ -u オプションで追跡対象に含まれていないファイルも退避することができます。他のブランチで作業が終わった後、作業途中のブランチを切り替え後の処理です。 一度棚上げした作業の続きをしたいので、stash の一覧を確認します。 一覧が確認できます。 stash を戻します。 事前の変更を戻したい場合 特定の stash を戻したい場合。 削除したい場合。 【git rebase】コミット履歴を整えて統合 Gitの操作に慣れてきたら、git rebase を使ってコミット履歴をきれいに整理してから統合してみましょう。 merge ではなく rebase を選ぶ大きな理由は、コミット履歴を分岐させず、一本の直線的なタイムラインとして残せるからです。 merge を行うと、分岐したブランチのコミット履歴がそのまま合流するため、いつどのコミットが作られたかの足跡（マージコミット）がすべて残ります。一方、rebase は「分岐した起点（ベース）」そのものをターゲットブランチの最新の先端へと移動させて履歴を付け替えるため、まるで最初から一本の直線上で順番に開発していたかのような、見やすくクリーンな履歴を作ることができます。 分岐したブランチ、トピックブランチについて Gitでは、メインの開発ライン（main や develop など）から、特定の機能追加やバグ修正といった「1つの目的（トピック）」のために一時的に分岐させるブランチのことを「トピックブランチ（またはフィーチャーブランチ）」と呼びます。タスクごとに新しく分岐させて作業を行い、本番環境への統合が終わった後は、役割を終えて削除されるのが一般的な運用スタイルです。 リソース対策：一旦削除した特定のfileやフォルダ を戻したい場合 このサイトは Gatsby という React 製のSSGサイトで、ページ数が多い状態で、 開発環境モード（gatsby develop）を実行するとページ生成が止まる問題が起こりがち。 この状況に長い間沼りましたが、git の機能で解決します。みんな、Git作った人足向けて寝るなよ！ Gatsby の develop mode で一番リソース食っているのは MarkDown ファイルの画像生成。コマンド時に、画像をリンクしたを MarkDown ファイルがない状態で開発環境コマンドを叩き、後ほど MarkDown を追加すると問題が起きないハックを最近発見しました。 git で特定のfileやディレクトリを戻すだけです。 そもそも単に特定箇所の機能追加や記事を更新したいだけならすべてのページに gatsby develop を実行する必要はないので、不要fileを一時的に適宜削除して記事を書いています。 記事を書き終わったら、一旦削除した記事を戻して push。もしくはあらかじめすべての不要fileを削除し、記事を書き始める前に先程のコマンドで戻す。 特定のfileをコミットで用で管理できればいいんですが、以前何やってたか忘れちゃうんで私は基本的にコミット時に全体像を見るため完璧な状態に戻すようにしています。 まとめ・Gitコマンドはチートシートを作っておくといざとなると困らない 今回、Git で私が個人的に困って使うコマンドをまとめました。 昔は私も Source Tree という GUI(見た目で操作しながら使えるツール) Git のツールを使っていましたが、gitHubやその他のプラットホームでコミットすることが増え設定が面倒になり、コマンド＋VS Code に落ち着いてしまいました。 まだ、rebase について書ききれてないので後日追記しようと思います。 この記事がみなさんのバージョン管理ライフの一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":false},{"slug":"entry506","title":"WordPress(5.9〜) theme.jsonの設定方法とブロックテーマ/オリジナルテーマの作り方・前編","date":"2022-06-11","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2022/entry506.webp","description":"ブロックテーマで直感的に編集可能なテーマを作成。ブロックエディターのテンプレート編集モードを使用する事ができます。theme.jsonの設定の仕方、テンプレートやブロックパターンの作成方法を詳しく解説します。簡単なブロックテーマが作成できる構成。前編でベースのテンプレートを作成、後編でページの追加や記事一覧などの設定の仕方をご紹介。","tags":["WordPress","ブロックエディタ"],"body":"先日ブロックテーマで編集可能なテーマを作成しました。 ブロックテーマを導入すると、サイトエディターのテンプレート編集モードを使えるようになります。もうElementorいらないんじゃないかっていうくらい高機能で直感的、マジで驚きました。そこでtheme.jsonの設定の仕方、テンプレートやブロックパターンの作成方法を詳しく解説します。 この記事は、簡単なブロックテーマが作成できる構成となっています。前編でベースのテンプレートを作成し、後編でページの追加や記事一覧などの設定の仕方をご紹介します。 この記事は二部構成となっています 前編・ベースのテンプレート作成（←イマココ） 後編・記事一覧出力やページの追加 ブロックテーマ（Block themes） とは? A block theme is a type of WordPress theme built using blocks. You can edit all parts of a block theme in the Site Editor. WordPress supports block themes from version 5.9 and with limited support in version 5.8 with the Gutenberg plugin. Together with the Styles interface, block themes are part of full site editing. They are sometimes called full site editing themes. Learn about the background to full site editing. Block themes / Theme Handbook 要約すると、ブロックテーマはブロックを使って構築できるワードプレスのテーマ。全てのパーツをサイトエディターを使って編集可能で、この機能はバージョン5.9（5.8ではプラグインを使って限定的）からサポートされました。footerやheaderなどの部分まで 見たまんま直感的に編集可能 になりました。 使った感じは直感的に編集できるテーマElementorに近いです。 詳しく違いを知りたい方のためにクラシックテーマとブロックテーマとの比較を記事の最後にまとめています。 ブロックテーマ用ディレクトリを作成する ブロックテーマはデフォルトのテーマtwentytwentytwoを参考に作成します。 今回はローカルにワードプレスなどを構築できる環境を用意してみました。 まずはローカル環境で試してみたい方はDockerでもLocalでも何でもいいと思います。 wp-content/themes/ 内にブロックテーマを格納するための myblocktheme を作成します。 空でいいので以下の通り、ファイルとディレクトリを準備します。 ※ 6.0~ではブロックテーマ作成時にindex.phpは不要です。 テーマが有効になるよう、style.cssにコードを書きます。 テーマを有効化します。 空のテンプレート：インデックスというテンプレートができました。 構成ファイル theme.json の基本設定 構成ファイル theme.json を設定していきましょう。 theme.json はテーマやブロックがサポートする機能・レイアウト・スタイルなど、このJSONファイル一つで管理できます。 今回は主に5.9を参考にコードを紹介していくのですが、$schema を上記のコードのように設定しておくと、theme.jsonの5.9と6.0のバージョンである 2 を補完(コーディング補助)してくれます。 index.htmlにプロックを追加できる場所を作る それではテンプレートを作っていきます。 テンプレート index.html には以下のようなイメージで、headerとfooterを読み込ませます。 テンプレートHTMLには以下のようにブロック名を指定してHTMLのコメントで記述します。 必要に応じて要素を内包します。 ブロックの書き方ですが、記述を少しでも間違えると、編集画面で以下のように表示されます。 動かない場合、まずスペースが正しく配置されているか確認してみましょう。 ブロックのオプションは {} 内に記述することができます。 たとえば wp:group はデフォルトで出力されるHTMLタグを div です。 main で出力したい場合などあります。wp:group に続けて {\\"tagName\\":\\"main\\"} といったように出力したいタグを指定します。 parts 内に格納したパーツは wp:template-part ブロックで呼び出せます。中に別の要素などを内包する必要がない場合は、次のように自己終了タグで記述することができます。 オプションの中にキー slug に、拡張子を除いたファイル名を明記するだけです。 そうすると、以下のようにタグが出力されます。 header.htmlを編集する header.htmlでまずはサイト名とサイトロゴを出力します。オプションにレイアウト{\\"layout\\":{\\"type\\":\\"flex\\"}をを指定して横並びのレイアウトにします。 ロゴとサイト名を変更してみます。ブロックテーマではサイトエディターで共通のサイトロゴやサイト名までも変更できます。上部ツールバーに「サイトの編集（サイトエディター）」がありますのでクリックします。 ロゴ画像をアップロードします。ブロックエディターでは自分がどこを選択しているかわからなくなることがあるので迷ったら画面下のパンくずリストを参考にするといいです。 サイトロゴは必要に応じてサイズを調整することもできます。 サイト名も変更します。 タイトルが変更されました。 グローバルナビゲーションを追加します。 先程画像サイズなどを変更してしまった方は、headerはもうテンプレートからは更新できなくなっているので、インデックス、一般をクリックして中身がheaderの方の カスタマイズをクリア し、変更を保存します。 ナビを出力するコードを追加します。ヘッダータイトルとナビを実装します。 ナビゲーションブロックも、サイトエディターから編集可能です。入力したものはクリックから、リンクやテキストを変更可能です。 新規で作成したい場合は、ナビゲーションブロックを選択した状態で、プラスボタンをクリックして項目を追加します。 試しにテキトーに項目を追加して保存すると、ちゃんと新しいメニュー項目が追加されています。 ナビゲーションブロックはレスポンシブ対応もされています。 footer.html footerにはコピーライトのみを表示します。 文字をセンタリングしたいのでオプションとクラスを以下のように設定しました。右寄せにしたければ center を right に変更するだけです。 サイトエディターだけでコンテンツを追加してみる サイトエディターの魅力は、サイトを見たままブロックを使って編集できる ところです。 サイトエディターからコンテンツを追加してみます。 ブロックエディターにあるものはすべて追加できます。 ブロックだけ追加してもサイトっぽいものが作れます。 追加したã

1®ã¯ã€ä»¥ä¸‹ã®ãƒ–ロック。 画像 見出し ギャラリー 段落 スタイルが入ってないので少しイマイチですが、まあなんとかWebサイトっぽくなりました。 色やfontなどサイトの共通の設定をtheme.jsonで行う theme.jsonから共通の設定をします。 予め言っておきますが、大まかなデザインはtheme.jsonでも行うことができますが、細かいパーツごとの設定ができるわけでは有りません。 全体の色やタイポグラフィの設定をする テーマカラーと、グラデーションと設定してみましょう。 デュオトーンは今回使いませんが、設定の仕方のみ紹介しておきます。 それぞれ色が追加されました。 フォントを読み込みます。Googleフォントをheadタグからまとめて読み込みたいので、今回は functions.php から追加します。 settings内にフォントサイズとフォントファミリーを追加します。 スペースのサイズと単位も追加します。 全体のスタイルを当てる 全体のスタイルを当てます。settings の後に styles というキーを追加します。 キー styles 直下に指定したスタイルは全体（body）に当たります。 セットした各値は CSS の変数として以下のように登録されます。 settings の中に設定した場合は、場所は preset になるので注意。 blockGap でブロックごとのギャップサイズを設定できます。 要素やブロックごとにも設定可能です。 ブロックごとにもスタイルを設定可能です。ブロック名で呼び出せるのですが頭に core/ を付与する必要があります。 ブロック名がわからないときはタグのClassを調べるとわかります。wp-block- を取り除いたものになります。ブロックをHTMLで開くか、ソースコード開発者ツールなどでみてみましょう。 ブロックをテンプレートファイル側から装飾する テンプレート側からパーツごとに装飾可能です。たとえば、ヘッダーの背景や余白を調整したい時、 以下のように感じにコードを書きます。 プリセットで登録した要素はクラスから利用することができます。 has-xxx-background-color と言ったクラス名が生成されるのでそのまま使用可能です。 たとえば背景色に使いたいときは以下のようにhas-backgroundとあわせて使います。 オプション内に色などの記述をあわせてしておきます。 スタイルはタグ内に直書きになりますが、合わせてオプションに記述が必要です。 パターンの追加 画像などのデフォルトのコンテンツの入ったブロックを作るためにはphpファイルで作成する必要があります。 たとえばファーストビューを最初からデフォルト画像を用意しておきたい時。 functions.php から、以下コードを追記して /inc/block-patterns.php を 読み込みます。 inc/block-patterns.php で指定したパターンを読み込めるように設定します。 parts/mainvisual.html を読み込みます。 inc/patterns/mainvisual.html を読み込みます。 inc/patterns/mainvisual.html を編集します。 こうしておくことで、デフォルト画像をサイトエディターから編集できるようになります。 まとめ 今回ブロックテーマを試してみましたがいかがでしたでしょうか？ 細かい部分は正直、CSSから設定したほうが格段に早いです。 が、適宜サイトエディターで変更できるようにしておけばきっとお客様の方である程度変更も可能になります。 後編・記事一覧出力やページの追加も合わせてお読みください。 この記事が、ブロックテーマで次世代WordPressを試したい方の一助となれば幸いです。 最後までお読みいただきありがとうございました。 クラシックテーマとブロックテーマとの比較 今までのクラシックテーマとブロックテーマの

1違いです。※ Google翻訳使いつつ意訳しているので、意味がわかりにくいかもです、、、 | クラシックテーマ | ブロックテーマ | | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | PHPファイルで各パーツを作成 | ブロックはHTMLファイルで作成。HTMLファイルがない場合はPHPファイルを使用。例）single.html=single.php | | テンプレート階層 | テンプレート階層 | | PHPのテンプレートタグ使用 | すべてにブロック使用ポストコンテンツブロックはテンプレートタグ the_content と同じ。 | | PHPでテキストを出力 | HTML内のテキストの出力できない。ブロックパターンでPHP上で出力させる。 | ブロックで異なる出力結果を設定する | | ループを使って異なる投稿やポストタイプを表示 | クエリブロックとテンプレートブロックを使う | | サイドバーやウィジェットが使える | ブロックでジェットを使用。使えるウィジェットはブロックによる | | カスタマイザーが使える | サイトエディターが使える。オプションでカスタマイザー使用可能 | | ナビゲーションメニューでメニューを登録できる | ナビゲーションブロック使用 | | カスタムヘッダーを登録できる | サイトヘッダーを画像を含めてブロックで設定可能 | | サイトヘッダーをカスタマイザーなどから登録できる | サイトヘッダーは画像を含めてブロックで設定可能 | | カスタマイザーなどからロゴを登録できる | サイトヘッダーは画像を含めてブロックで設定可能 | | CSSやJSをfunctions.phpなどで登録可能 | 全体のCSSやJSをfunctions.phpなどで登録し、ブロック単位やtheme.jsonにも設定できる | | theme.jsonを使えるがCSSの設定は必要 | theme.jsonを使ってエディターや見た目を編集可能 | | テンプレートファイルはテーマ直下に格納 | テンプレートファイルはtemplates内に格納 | | テンプレートパーツはテーマ以下ならどこに格納してもOK | テンプレートファイルはparts内に格納 | | 404ページやアーカイブはサイトエディタで作成や編集不可 | 404ページやアーカイブもサイトエディターで編集可能 | | テーマサポートなしではテンプレートエディターでブロックテンプレートを編集したりできない | テーマサポートなしでテンプレートエディターでブロックテンプレートを編集できる | 参考サイト WordPress5.9 / 6.0版】theme.json 全解説","noindex":false},{"slug":"entry505","title":"母親がしんどいと感じたら。子育てが辛いことばかりで損な役回りだと思うあなたへ","date":"2022-06-05","modifiedDate":"2026-07-01","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2022/entry505.webp","description":"子供を理想通りに育てられず、母親でいることがしんどいと感じるあなたへ。子育てが辛い、ワンオペで苦しいのは、あなたがダメだからではなく「母親の呪縛」に縛られているからかもしれません。母親がしんどい状態から脱出し、思い込みを手放して生きる第一歩を解説。","tags":["家族","磨耗しない人生"],"body":"母親がしんどい 子育てが辛いことばかり…… 一人で悩みを抱え込んでいませんか？ 時に「 お母さんって損な役回りだな 」と感じるほど、毎日の育児をがんばっているのは本当は素晴らしいことです。 私もかつては、理想の母親像や周りからの刷り込みに縛られ、心が追いつかなくなっていた時期がありました。でも、その「 思い込みの呪縛 」に気づいて手放した瞬間から、憑き物が取れたかのように心が軽くなりました。 この記事では、今だから客観的にわかる「心をふっと緩めて、自分らしく育児を楽しむためのヒント」を前向きにお伝えします。 この記事を読むと心が軽くなる理由 「母親はこうあるべき」という理想の呪縛から解放される 子育てがしんどいと感じる根本的な原因がハッキリわかる 自分を大切にしながら、子供と心地よい距離感で向き合えるようになる 母親はなぜ子育てでここまでしんどいのか？ 私は 6 年前、子育てという仕事を終えました。 ほとんどの母親が 我が子を思うように育てられなかった と感じるのではないでしょうか？ こう育てたかった！と思いつつも実際は上手くいかず、理想と現実の間にギャップを思ã

1„しれば知るほど、後悔がたくさん残ります。 この理想が結局子育てを苦しくさせている原因だと今では思っています。 一見、理想通りになりたいのは当たり前じゃないか、と思いますよね？問題は中身で、どんな理想が生まれてるかです。 私のケースでは母親からの刷り込みや過去の自分をやり直したくなる呪縛が原因だったと振り返ります。 母親はこうあるべきという刷り込みと「損な役回り」という諦め こんな親になりたくないという反面教師も理想の一つです。 うちの親は、子供の頃放任主義で特に母親は教育には無頓着でした。 基本私は母親のことは大好きです。しかし大人になってから一つだけ不満がありました。 私の過去の母に対してお願いしたかったことは、もっと進路に関するアドバイスが欲しかった。 私の若い頃は、インターネットのない時代です。 私は勉強して、いい大学を出たら将来選択肢が増えるなんて思いもしませんでした。 初任給に差が出ることも知りませんでした。 なんでお母さんは、もっと私たちの教育に首を突っ込んでくれなかったんだろう。大人になってからいつも思っていました。 それが私の後悔から生まれた反面教師です。 「お母さんにやってもらえなかったことを息子にしてあげたい」と、思わずにいられなかったです。 この行いが 過去の自分の人生をやり直しさせたくなる呪縛 にも繋がってきます。 過去の自分の人生を子供にやり直しさせたくなる呪縛 多くの母親がやりがちなのは過去の自分の人生のやり直しをさせてしまうことです。 たとえば、子供の頃ピアニストになりたかった人が子供にピアノ教室に通わせるなどです。 一見、悪くない話だと思いますし、子供が楽しんでいればいいんです。 問題は子供が嫌がってるのに強要してしまうことです。 私の場合、若い頃海外で働きたいという夢がありました。英語もペラペラになりたかったですし、もっと勉強しときゃ良かったという後悔もあります。 子供には、英語をはじめとする勉強をさせようと努力しましたが、まあやらない。 このままでは私のようになるという焦りからよく怒っていました。 また、学校の担任からもガミガミ言われるので余計拍車がかかります。 なんで、理想通りに勉強してくれないんだろう。勉強しないと、若い頃の私みたいに将来選択肢がなくなる。せめて宿題くらいやらせなきゃ。 そんなことばかりいつも考えて、ガミガミ怒る。怒っては自己嫌悪の繰り返しで何度も苦しみました。 子育てが辛いことばかりに思える理由｜理想と現実の狭間で苦しむ母親たち このように理想通りの母親にも、子育てもできなかった私は何度も自己嫌悪に陥りました。 思い描く子育てや母親としての理想は私にとって正しいのか？ 私の子育てや母親としての理想は実現可能なのか？ 理想を捨てる、もしくは変えることができていたら、早い段階で理想と現実のギャップから生まれる苦しみから開放されていたと思います。タラレバですけどね。 私みたいに育ててはいけない 残念ながら、当時は母親像は絶対的に正しかったので、簡単には軌道修正できませんでした。 そもそも子供は私ではありません。言いつけも守るか守らないかは子供次第です。理想通りにやってくれなければ、いつまでも現実とのギャップは埋まることはありません。 苦しみから解放されるためには、理想を変えるか、捨てる しかありません。 子供を理想で縛らないためには、距離を取ること ではどうやって呪縛から開放されたか。距離を置ã

1‹ã–るを得ない状況に陥ったからです。 私のケースでは息子の大学入学と私の転職で一緒にフィリピンに移住しました。 しかし、息子はせっかく入った大学を辞めて日本に帰りました。 私は仕事があるので現地に残り、物理的にと息子から離れることになりました。 呪縛は距離や時間が解決する もちろんしばらくは大学を辞めた、息子の取った行為が許せませんでした。 息子の帰国後、自分の後悔と息子が私と同じ後悔の道を歩むと思ったからです。 子育ての後悔のことばかり頭から離れず、なかなか負のスパイラルからは逃れられません。どんな親でも多かれ少なかれ子育ての後悔はあると思うので、母親であれば理解できると思います。 苛まれつつも、私は幸運でした。 仕事が忙しくて息子に連絡できない 日本とフィリピンはおいそれと行き来できない 長い時間、強制的に距離を置くことができました。 もしこの期間がなく、近くにいれば、会うたびにガミガミ言っていたと思います。 いつまでも呪縛から解放されã

1ªã‹ã£ãŸã®ã§ã¯ãªã„かと思うと、ゾッとします。 思い込みを捨てる決定的なきっかけになった一冊の本 私は、時間や距離だけではなかなか自分の理想が思い込みだと気づくことができませんでした。正しいことだと信じていたからです。 私の理想が正しいという思い込みと気づかせてくれたのは、「嫌われる勇気」という本でした。 セブで友達が勧めてくれた本でした。 青年と哲人の対話形式で進むアドラー心理学をベースとした哲学の本です。 ある日哲人は子供が勉強や宿題をしない時、親ならどうするかと青年に問いかけます。 青年:「子供に宿題や勉強させるのは親の責務でしょう。」 哲人:「勉強や宿題は子供の課題です。」 勉強や宿題をしなければ、将来子供が困るだけと一蹴します。 今まで親は子供に勉強をさせるのが責務だから、勉強しろとガミガミ言ってもいい。私もそう思いこんでました。 アドラー心理学では自分と他人の課題は切り分けるので他人の課題には踏み込みません。この一節で私の苦しみの原因が自分と子供を混同していたことと気づいたのです。 大切なのは、子供と自分の課題を混同しないことです。 私は正しさにとらわれるあまり、息子の課題に土足で入り込んでいることに気が付きました。 嫌われる勇気 自己啓発の源流「アドラ-」の教え /ダイヤモンド社/岸見一郎posted with カエレバ楽天市場Amazon 第一歩は理想や思い込みに苦しめられていることに気づくこと 物理的にも距離と時間を置きました。本や他人の意見を参考にした結果、理想や思い込みに苦しめられていることに気が付きました。 ほとんどが子供の頃「こうしておきたかった」「やってほしかった」という後悔から生まれた行動です。 残念ながら、人間は後悔を断ち切ることほど難しいことは有りません。 どうあがいても子供の頃には戻れないのに、人は後悔し続けるんですよね。過去に起こった理想と現実のギャップなんて一生埋まらないのに。 私が目指した理想の母親や子育ては後悔が生んだ思い込みでした。自分が子供の人生（課題）に干渉していたことを、やっと認めることができました。 あっさり認めてしまうと、理想の母親になれなかったことへの後悔も嘘みたいに薄らいできました。 全ては距離と時間は人を冷静にします。だから私は要因を突き止め、柵（しがらみ）を開放できたのだと思います。 今子育て真っ只中で、子育てと母である自分のギャップに苦しいと感じている人の一助となれば幸いです。 最後までお読みいただきありがとうございます。 関連記事もぜひお読みください。 くすっと笑える昭和のお父さん版はこちら。","noindex":false},{"slug":"entry504","title":"【GAS】スプシの更新内容をトリガーで定期的に自動で通知（メールとSlack）","date":"2022-06-04","modifiedDate":"2022-07-05","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2022/entry504.webp","description":"スプレッドシート（Googleスプレッドシート）の最新の内容をトリガーを使って定期的にGメールやSlackで通知するGoogle Apps Script（GAS）を作成しました。GASの設定方法などを詳しく解説します。コードサンプル有り。","tags":["GAS","JavaScript"],"body":"スプレッドシート（Googleスプレッドシート）の最新の内容をトリガーを使って定期的にGメールやSlackで通知するGoogle Apps Script（GAS）を作成しました。GASの設定方法を解説します。コードサンプルもありますのでコピペ可能です。 今回は実際、スプシで集計した稼働時間を定期的に送ることを想定して、GASを組んであります。GメールとSlackの方法を紹介しているので目次を利用して必要な項目をお読みください。 この記事は人日（プロジェクト勤務時間）を管理したくて作成したGASの紹介で、こんな人におすすめ です。 定期的にメール送信したい クライアントなどにGoogle Apps Script（GAS）でメールをé€

1ä¿¡ã—たい 社内SlackのワークスペースなどでGoogle Apps Script（GAS）を通知を受け取りたい 毎回いちいちメッセージするのも面倒ですし、事務作業は減らしたい Slack活用術について気になる方は以下をご覧ください。 スプレットシートを準備し、値を関数で計算する 今回は2022年稼働表というスプレッドシートを準備します。2022/01 ~ 2022/03というシートを作ります。 各項目を関数で計算します。 liveというシートを作り、各月ごとの値を取得できるよう関数を組みます。 月が終わったら、最終日を取得し更新を止めます。 これでシートは完成です。 シートの複製が面倒な場合 12枚のシートを作るのは面倒です。その場合はGASで作ったほうが早いです。 一個シート（2022/01）を作りあとはそれをコピーして値もGASで書き換えてしまいます。 面倒なのでGAS側から実行します。 これで12ヶ月分のシートが一気にできました。 メールを送信するGASを組む 定期的にメールを送信するGASを組みます。 スプレッドシートはgetActiveSpreadsheetではなくSpreadsheetApp.openByIdでシートIDで指定します。 シートのIDはURLから取得できます。 稼働時間の取得ですが、getNextDataCell(SpreadsheetApp.Direction.DOWN) を使うと、見た目は空でも関数のあるセルもカウントされてしまうので、range.filter(String).length を使います。 optionでCCやBCCも指定できます。複数送りたい場合はカンマ区切りにします。 メールを送信するGASのデバッグ 関数を sendMailOnOpen に切り替えてデバッグします。 承認を求められるので許可。 アカウントを選択します。 確認されていないよーと言われるので、詳細を表示に切り替えて、アプリに移動します。 アクセスを許可します。 メールが届きました！ メールで通知するGASのトリガーの設定 トリガーを設定します。 GASの左側の時計マークをクリックします。 以下スクショはすでにトリガーの設定が終わったものです。 新規で作りたい場合は右下に「トリガーの追加ボタン」があるのでクリック。 対象の関数を選び、イベントを時間ベースにします。 週1度、毎週金曜日の夜7〜8時の間にメールが送れるように設定しました。 Slackで通知するGASを組む 今どきメールも面倒なので、Slackで通知できるGASのコードのご紹介です。 Slack apiにアクセスし、先にアプリを作成します。 From scratchを選択します。 アプリの名前をつけ、workspageを選びます。 左のメニューからApp Homeに移動し、「Your App’s Presence in Slack」から「App Display Name」を変更します。 「App Display Name」を変えておかないと、次のWebHookからの操作ができなくなります。 Incoming Webhooksに移動し、Incoming Webhooksをオン。 そのままスクロールし、「Add New Webhook to Workspace」をクリック。 チャンネルを選びます。今回は実装方法の紹介なので私自身に送信してみました。 ※ チャンネルに通知が来ます。 Webhook URLが発行されるのでコピーします。 Slackで通知するGASのコード 出力するためのコードはほぼ変わりません。UrlFetchApp.fetch を使うだけです。 UrlFetchApp.fetch の第一引数に Webhook URL を代入します。 Slackで通知するGASを実行してみる Slackで通知するGASを実行します。デバッグでもいいです。 関数を notification_operation に切り替えて、実行します。 許可を求められるので、メールを送信するGASのデバッグと同様に進めます。 デバッグがうまく行ったら、チャンネルに以下のように通知が飛んできます。 Slackで通知するGASのトリガーの設定 メールで通知するGASのトリガーの設定と同様、毎週金曜日に通知が飛ぶようにします。 違うのは関数を notification_operation にセットするだけなのでメールで通知するGASのトリガーの設定を参考に設定してください。 まとめ・自動化しておくと仕事が減る 今回はGASを使って、稼働時間を定期的にお知らせする方法を解説しました。 人間がやらなくていいことはGASにやらせるのが一番です。 昔、毎日売上をSlackで投稿しろって言われて毎日憂鬱だったことが有りました。 今考えるとすごく面倒でなんで私がやんなきゃいけなんだって何百回も思ã

1„ました。。。 このGASは汎用性があるのでそういったケースでも使えると思います。 この記事がみなさんのGASライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。 GASの関連記事 GASの関連記事もあわせてお読みください。","noindex":false},{"slug":"entry503","title":"【セブ島・待望の観光再開】治安、犯罪など気をつけるポイント","date":"2022-05-31","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2022/entry503.webp","description":"日本もフィリピンも開国し始めましたね！旅行したくてウズウズしている方も多いのではないでしょうか？私は3年セブ島に住んでますが、スリなどのトラブルや犯罪に平和ボケした日本人は巻き込まれやすいです。現地在住の海外ノマドエンジニアの私が住んでいるこのセブ島で治安、犯罪など気をつけるポイントをまとめます。","tags":["セブ島","セブ島エンジニア生活","海外移住"],"body":"日本もフィリピンも開国し始めましたね！ 旅行したくてウズウズしている方も多いのではないでしょうか？私は3年セブ島に住んでますが、スリなどのトラブルや犯罪に平和ボケした日本人は巻き込まれやすいです。 現地在住の海外ノマドエンジニアの私が住んでいるこのセブ島で治安、犯罪など気をつけるポイントをまとめます。 セブ島あるあるトラブル セブ島初渡航の方によくあるトラブルをまとめました。 トイレにティッシュがない、水が流れない キレイなモールでもトイレが汚く、壊れているなどよくある話です。 水が流れないトイレには大抵、便座や手洗い場の近くに水が汲んであるバケツと手桶があります。手桶で2、3杯水を汲みトイレに入れたら流れます。 便座のないトイレもザラです。ティッシュを敷く、足がつかないように浮かせるなど工夫します。 なぜ便座がないかというと、不潔な便座に座りたくないフィリピン人は靴のまま上がってしゃがんで用を足すので便座が割れるそう。 フィリピンには和式トイレを導入したらすべて解決! 外出時のトイレ対策 ウェットティッシュやポケットティッシュ、アルコールを持ち歩く いろんなお店でお釣りが用意されていない スタバやコンビニなどのお店でもお釣りが無いと言われることが多いです。 タクシーなどでは特にお釣りが出ない事が多いので常に小銭を用意しておきましょう。 多少のお金はチップとしてあげちゃいます モールで道を聞いても答えられない SMシーサイドモール セブのモールは日本と違って現在地的な案内がないです。そもそも地図が読めない人が多いです。ガードなどに道を聞いても正確に答えられない人もしばしば。 解決策はググって日本語の情報サイトを調べるか、根気よく何人も聞くしか有りません。 タクシーがメーターを上げない タクシートラブルあるあるです。メーターをわざと上げずに目的地に到着した途端、ありえない額を請求されることがあります。 ボられないポイント 乗車したらドアを締める前に必ずメーターを上げたことをチェックし、上げてなかったら必ず上げるように伝える 私はメーターを上げない場合は降りるようにしています。降りる素振りを見せるだけでも、たいていメーターを上げます。 コミュニケーションに自信がない方は、トラブルに巻き込まれないためにGrabなどのタクシー配車サービスを使うことをオススメします。走行ルートと金額が決まっているのでトラブルが起きにくいです。 タクシーのドアは自動で開閉しないです レストランで料金を水増しされる こちらは一度大人数で会食中に起こったトラブルです。お釣りが少なく、あとから物申しに言ったことがありました。 ローカルのレストランなど（特にバー）では、金額を水増しされたり、わざと少なくお釣りを渡されることがあります。 レシートをよく見て、金額がおかしくないかチェックしましょう。 よくある巻き込まれがちな犯罪 私と私の周りで起こった軽度な犯罪についてまとめます。 実体験・携帯を盗まれる 私の実体験です。3年前フィリピンに来た翌日に携帯を盗まれました。 携帯はリュックのサイドポケット（フタなし）に無造作に入れていました。 初出勤の仕事の帰り、精神的にも疲れてボーっとしながら1ピースチキンをコンビニで買いました。 家に帰ったら携帯がなã

1ãªã£ã¦ã„ました。 当時住んでいたのはセブシティのサリナスドライブ近隣のコンドミニアムです。 盗まれたあと、「iPhoneを追跡する機能」で追跡しましたがあっという間にマニラまで移動し、その後消息を絶ちました。 このサリナスドライブはホームレスやストリートチルドレンなど多く決して治安の良い場所では有りません。 私が携帯を盗まれた月は私以外にも3人位、日本人が被害に遭っていました。 その後も携帯を盗まれる被害は跡を絶ちませんでした。 サリナスドライブではあまりにも周りの人が携帯盗まれているので、「スマホパクられストリート」と別名を付けてやりました！ 私は何度も携帯を日本でなくしていますが、一度たりとも手元に戻ってこなかったことが有りません。タクシーに忘れようものなら、親切に警察に届けてくれます。 その感覚でいると、間違いなく標的にされます。 平和ボケした日本人はカモです。ネギ背負ったカモ！ カモられないポイント 携帯をポケットなど取り出しやすい場所に入れない 携帯を外で使わない（特に夜） iPhoneが売れたら、日本では想像できないくらい生活の助けになる iPhoneが売れたぐらいでお小遣い程度じゃない？ そう思う人もいると思います。 ここはフィリピン。物価が日本と違います。貧困層の世帯収入が2万円以下なので携帯が一個売れたら数カ月分の生活費になります。 出会い系アプリTinderで知り合った女性からお金をふんだくられる Tinderなどの出会い系アプリで出会いを求めて、会ってみたもののお金をふんだくられた話を聞きます。 フィリピンでは日本人というだけでお金持ってると思われるので容姿や年齢に関係なくモテます。 あまり女性経験がない男性にとっては出会いのチャンスですよね？ 正直に現実をお伝えすると、お金を目当てにされているだけですよ！ 逆に、あちらにとってもチャンスです。鼻の下伸ばして油断しまくってる男性なんてチョロいもんです。 「事」のあと、言いがかりをつけてビンタされお金を巻き上げられた 会いに来たのがレディボーイで「事」の前に恐喝された 私は女なのでそんな経験ありませんし、アドバイスできることといえば、海外に来たからといって鼻の下を伸ばさず気を引き締めて行動しましょう。 トランプからの恐喝 これも知り合いが実際に遭遇したトラブルです。 お酒を飲んでいたらフレンドリーなフィリピン人が「一緒にトランプ（ギャンブル）で遊ぼう」と話しかけてきたそうです。 そこで一緒に遊んでいたら、囲まれて軟禁されてお金をふんだくられたそうです。 フィリピン人は見知らぬ人でも日本じゃ考えられないくらいフレンドリー。つい気をを許してしまいそうになりますが、油断してはいけません。 カモられないポイント 公共の場じゃないところでギャンブルなどの遊びをしない 日本人が最も殺される国、フィリピン フィリピンは東南アジアで犯罪の多い国です。殺人事件も多く、2019年の殺人件数ですが比較しても日本の約15倍です。 | | 人数 | | ---------- | ----- | | 日本 | 319 | | フィリピン | 4,764 | 引用：ワールド・データ・アトラス しかもフィリピンは日本人が最も殺される親日国と言われています。 私も日々地元のニュースを読んでますが、日本人を始めとする外国人が身近な場所で殺人事件に巻き込まれています。 一番いいのは犯罪に巻き込まれないことですが、身の危険を感じたらとにかくお金は渡してしまいましょう。 発砲事件に巻き込まれることもある 3年前SMモールで強盗事件があり、発泡があったそうです。たまたま私の知り合いが居合わせていてそれはもう怖かったそうです。 フィリピンは銃社会。今では見慣れてしまいましたが、ちょっと銀行の前を歩くと、お金の移送中などはガードマンがライフルをもって見張っています。 ちょっとした痴話喧嘩でも頭に血が昇り、銃を持ち出したニュースなど日常茶飯事です。 海外が治安が悪いわけではない。日本が治安が良いだけ 私の親世代とかはよく海外は治安が悪いって思い込んでますが、違います。 日本の治安が良いだけです。 こちらは2022年のデータです。 | | 犯罪指数 | 順位 | | ---------- | -------- | ---- | | 日本 | 21.95 | 8 | | フィリピン | 42.33 | 59 | ※ ちなみに最下位位はベネズエラの142位でした。 NUMBEO 10年以上平和な日本に住んでいたら、治å

1®‰ã®è‰¯ã„のが当たり前 なので気をつけているつもりでも気をつけきれないのが現実です。 巻き込まれないためには 夜遅く出歩かない 遅い時間は誰かと一緒にいるようにする 治安の悪い場所には行かない、近づかない 高価なものを身に着けたり華美な格好はしない また、同じ日本人でも長期在住者と観光客は一目瞭然です。 自分が外国人だという認識を持って、ここが日本ではないとよく肝に銘じた上で行動しています。 まとめ・トラブルや犯罪に巻き込まれない環境に身を置く 海外だって治安のいい場所もたくさんあります。もちろん、犯罪や不正が大嫌いで正しく有りたい人のほうが大半です。 ほんのごく一部の人が犯罪を起こしているだけで、普通にしてたら日本とさほど変わらず過ごすことはできます。 海外で過ごす際にいちばん大切なのは トラブルや犯罪に巻き込まれない環境に身を置く ことです。 セブ島での暮らしについてはこちらにまとめています。あわせてお読みください！ この記事がセブ渡航などの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry502","title":"データが多くて移行できない！？SSH接続Tarコマンドを使ったサイト引越し備忘録","date":"2022-05-29","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2022/entry502.webp","description":"エックスサーバーでWordPressの簡単移行ツールを使った際に、データが大きすぎて何度もタイムアウトで移行できない！？WordPressなどのWebサイトをSSHを使って引っ越しする方法をご紹介します。初心者の方のためにもわかりやすく、リダイレクト処理などの下準備や公開前のチェックポイントなどを実践的な内容も含めて解説。","tags":["コマンド","サーバー引越し"],"body":"先日エックスサーバーでWordPressの簡単移行ツールを使った際に、データが大きすぎて何度もタイムアウトになり困ったことがありました。 そこで、WordPressなどのWebサイトをSSHを使って引っ越しする方法をご紹介します。 初心者の方のためにもわかりやすく、リダイレクト処理などの下準備や公開前のチェックポイントなど、実践を踏まえてかな〜〜り詳しく説明しました。 この記事はこんな方におすすめです。 移行するサイトのデータ量が大きすぎて移行ツールが使えなかった SSHでデータ移行をしたい tarコマンドを使いたい サーバ移行に時間をかけたくない 長いので目次からすっ飛ばして必要な項目だけ読んでください。 前提条件SSHが使えるサーバー 今回はエックスサーバー、コマンドツールはiTermを使いました。 下準備。リダイレクト用の.htaccessやメンテナンス中のhtmlを準備しておく 作業中はWebサイトが表示されなくなってしまうこともあるので、メンテナンス中を告知するページを作成しておきます。作業でトラブルが合ったときも maintenance.html が表示されるのでこれでなんとか乗り切ります。 .htaccess に特定のIP以外は maintenance.html に飛ばせるように準備しておきます。 実際の作業に移ったら、.htaccess を書き換えましょう！ データベースを落としておく エックスサーバーではデータベースは管理画面からカンタンにバックアップデータが落とせます。 「データベース」「MySQLバックアップ」から「現在のMySQLをダウンロード」を選び対象のDBを取得しておきましょう。 ユーザー名、データベース名、パスワードが分からないときは対象のWordPressの wp-config.php ファイルから調べることができます。 SQLファイルの必要に応じて文字を置換しておきます。置換の仕方がわからない方は以下を参考にしてください。 SSHで接続 SSHとは、Secure Shell（セキュアシェル） の略称で、リモートコンピュータと通信するためのプロトコルです。 私のケースで言うと、テスト環境用のドメインに作ったWordPressを同じサーバー内にある本番用ドメインの当たったディレクトリに移行しただけなので、SSH接続する必要があるのは1箇所ですみました。 データを移行するためには、移行元と移行先両方の接続する必要があるかもしれませんのでよくサーバーの情報を調べておきます。 SSHの準備。秘密鍵と公開鍵を作成 SSHで接続するために、パスワード、公開鍵、ワンタイムパスワードなどの承認後接続するのが一般的です。 今回はエックスサーバーでのSSHの設定方法をご紹介しておきます。 SSHをオンにします。 パスフレーズを決め、秘密鍵(公開鍵認証用鍵ペア)を作ります。 「生成する」をクリックすると秘密鍵(公開鍵認証用鍵ペア)がダウンロードされます。 パスフレーズは自分で設定しますが、必ずメモするなど、忘れないようにしてください。 続けて公開鍵を作ります。エックスサーバーでは公開鍵は設定さえしてしまえば勝手に適切ã

1ªç®‡æ‰€ã«ä¿å­˜ã•ã‚Œã¾ã™ã€‚ 秘密鍵をローカルマシンに格納する 秘密鍵ファイルは一般的に、ローカルマシンのご自身のユーザーアカウントの直下に .ssh というディレクトリを作成し、保管します。 .ssh が存在するかまず確認してみて、ない場合は作成します。 接頭辞に.（ドット）がつくディレクトリやファイルは 隠しファイル/ディレクトリ なので通常の状態ではファインダーなどのファイルやディレクトリ管理ツールから見ることができません。 Macであれば ⌘+Shift+. で隠しファイル/ディレクトリの表示非表示を切り替えることが可能です。 秘密鍵をリネームしてローカルマシンの .ssh フォルダに入れておきます。 パーミッションの確認変更 パーミッションに関してはよく忘れるので表にしてまとめておきます。 | 文字の位置 | パーミッション | | ---------- | ---------------- | | 2~4 | ファイルの所有者 | | 5~7 | 所有グループ | | 8~10 | その他 | | 種類 | 意味 | | ---- | ------------------ | | - | ファイル | | d | ディレクトリ | | l | シンボリックリンク | | モード(数字) | モード(アルファベット) | パーミッション | | ------------ | ---------------------- | -------------- | | 4 | r | 読み取り | | 2 | w | 書き込み | | 1 | x | 実行 | chmod コマンドでフォルダとファイルのパーミッションを変えます。 パーミッションは数で指定する際は足した数字を使います。 1桁目ファイルの所有者、2桁目所有グループ、3桁目その他に対するパーミッションという感じで3桁で表せます。 パーミッションが正しいかコマンドで確認します。 .ssh ディレクトリはパーミッションが700なので、所有者のみに実行、読み取り、書き込みの権限が与えられるので、以下のようになります。 鍵ファイルはパーミッションが600なので、所有者のみに読み取りと書き込みの権限が与えられるので、以下のようになります。 接続する ホスト名とサーバーIDを調べておきます。 サーバーのIDは上部バーに有り、ホスト名はサーバー情報から調べることができます。 接続します。 実行できない場合は sudo を付与してみてください。 | オプション | 説明 | | ---------- | --------------------------------------------------- | | -l | ログイン名（サーバーID） | | -i | ファイルの場所 | | -p | ポート番号を指定してホスト→クライアントのポート転送 | 今は .ssh/ のディレクトリにいますが、どこからでも実行したい場合は鍵のファイルの場所は以下にしておくといいです。 対話形式で「本当に接続してもいいですか？」と聞かれるので、「yes」でいいです。 Are you sure you want to continue connecting (yes/no/[fingerprint])? known_hostsというファイルが生成されます。 known_hostsファイル はじめて特定ホストに接続しようとしたときにエントリが追加され、生成されるファイルです。特別なことがない限りそのまま置いておいて大丈夫でã

1™ã€‚ 対話形式で秘密鍵のパスフレーズを入力するよう求められるので、パスフレーズを入力し接続します。 Enter passphrase for key \'/Users/[ユーザー名]/.ssh/idxserverrsa\': 接続できたら、エックスサーバーの場合は以下のように表示されます。 接続を切りたいときは exit と入力します。 Configに登録しておく よく使う場合は、あらかじめSSHの実行コマンドを登録しておくと楽です。 configファイルを作成 viやvimでコマンドから作成もできますが、ファイルをファイルソフトなどで開いて編集するほうが楽です。 フォルダを探すのが面倒な場合はコマンドで開いて、VSコードでファイルを開いて編集しても大丈夫です。 編集内容は次のとおりです。 次からは少ない記述で開けるようになります。 tarコマンドを使ってみる tar コマンドは複数のファイルを1つにまとたアーカイブ（複数のファイルを一つにまとめる）ファイルを作成／展開するコマンドです。tar コマンドはオプションを付与することで圧縮・解凍を行うことも可能になります。 | オプション | 説明 | | ---------- | -------------------------------- | | -c | 作成 | | -r | 追加、入れ替え | | -t | リスト化 | | -u | アップデート | | -x | 展開 | | -z | gzipフォーマット | | -j | zip2フォーマット | | -J | xzフォーマット | | -v | 処理したファイルを詳しく出力する | | -f | アーカイブファイル名を指定する | 移行したいディレクトリをtarコマンドでアーカイブ化し圧縮する SSHでサーバーに入れたら、 tar コマンドでディレクトリのアーカイブファイルを作成します。 移行したいのは dev.xxxxx.com の中にある wordpressディレクトリ なのでこちらを圧縮します。 アーカイブファイルを移動させます。移行先が同じサーバー内ではない場合はFTPなどでダウンロードしておくといいです。tar.gz形式だとFTPでのダウンロードも時間もかからないと思います。 すべてコマンドで処理するとつかれるので、GUIツール（FTPソフトなど）もうまく利用するといいですよ！ アーカイブファイルが移動しているか確認します。もちろんFTPソフトで確認してもOKです！！ 移行したデータを解凍する いよいよ公開作業に移ります。展開する前に、maintenance.html と .htaccess を設置し、それ以外の不要なファイルはサーバー内から削除しておきます。 ※ 念の為バックアップを取って置くことをオススメします。 wordpress.tar.gz を展開します。 wordpress.tar.gz を削除します。もちろんFTPから削除してもOKです。 作業が終わったら exit コマンドでSSHを抜けておきます。 データベースをインポートする 新規立ち上げの場合は空のデータベースを事前に作っておきます。 ユーザーがいない場合はユーザーとパスワードを追加します。パスワードは忘れないようにメモしておきます。 データベース名、データベースアクセス権所有ユーザー、データベースパスワード、ホスト名が必要になります。 管理画面のphpMyAdminからログインし 予め置換しておいたSQLファイルをインポートします。 ファイルを移行後に、wp-config.php のDB設定を書き換えます。 データ移行に失敗した場合 置換をミスったりした場合も焦る必要はありません。 PhpMyAdminから対象のDBを選択しテーブルをすべて削除。 あとは先程同様、ファイル置換し直したものをインポートすればOKです。 htaccessのリダイレクトを解除しサイトをオープンさせる 以下を十分にチェックした上で、サイトをオープンさせましょう。 プラグインの設定方法が動いてるか 正しく遷移するか リンク切れ画像なã

1©ãªã„か WordPressがデバッグモードのままじゃないか noindexが設定されたままになっていないか カスタマイザーで設定したものや、コンタクトフォームセブンなどの設定は一からやり直しになる可能性があります。設定をメモに残しておくなどしてリカバリーできるようにしておきましょう。 まとめ・落ち着いてやればSSHでのサイト移行も難しくはない 時間をかければFTPでも大容量のデータの移行はできますが、とても非効率的です。 以前画像の移動だけでセブ島でやったら丸２日かかりました！ 色んな便利な方法はありますがプラグインを無駄にインストールするのも嫌ですし、SSH接続での処理が一番安定感があります。 コーダーも含めた非エンジニアにとってコマンドはとても敷居が高いですが、必要に応じて使えるようになるととても強い味方になります。 私は必要なコマンドだけ集めたチートシートを作ってます。 この記事が皆さんのWeb制作の一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry501","title":"【GA4】タグマネで設置したイベントが計測できないときの対処法","date":"2022-05-25","modifiedDate":null,"category":"seo","categoryName":"SEO対策・デジタルマーケ","ogImage":"/thumbnail/2022/entry501.webp","description":"Googleタグマネージャーで設置したタグが発火してなくて焦ったこと有りませんか？Googleタグマネージャーにはちゃんと確認する機能プレビュー/タグアシスタント（Tag Assistant）がついているので、しっかり使うことができればタグが発火しないトラブルは回避できます！ここでデバッグ（タグたちゃんと発火してるか）方法を事例付きでわかりやすく解説します。","tags":["Web解析","SEOライティング"],"body":"Googleタグマネージャーで設置したタグが発火してなくて焦ったこと有りませんか？ Googleタグマネージャーにはちゃんと確認する機能プレビュー/タグアシスタント（Tag Assistant）がついているので、この機能をしっかり使うことができればタグが発火しないトラブルは回避できます！\\",\\"そこでデバッグ（タグたちゃんと発火してるか）方法を事例付きでわかりやすく解説します。 Googleタグマネージャー（GTM）で設置したタグがなんで発火しないの？そんな方向けに書きました！ プレビュー/タグアシスタント（Tag Assistant）の使い方を知りたい GA4のイベント設置したいけどどうしていいかわからない マニュアル通りに設置したのにクリックイベントがうまく動かない 正しく設置しているはずなのにクリックイベントが発火するときとしない時がある 前提条件 Googleタグマネージャー（GTM）を設置していてGoogleアナリティクスが計測できていること。 そもそもタグマネの設置の仕方がわからない方はこちらをご覧ください。 Googleタグマネージャーのプレビューの使い方 設置したイベントが発火したかは、プレビューで確認できます。 この機能はコンテナーを公開する前でもタグがきちんと動くか（発火）確認できます。 対象のコンテナーのワークスペースの右上にある「プレビュー」をクリックします。 タグアシスタント（Tag Assistant） というツールが別タブで開くので、確認したいサイトのURLを入力し、「Connect」ボタンをクリック。 コンテナーが読み込まれたタイミングで、GAやアドセンスのタグが読み込まれる タグアシスタントを見ると、この銀ねこアトリエでは以下のようにイベントが順次読み込まれています。 1. Content Initialization 1. Initialization 1. Container Loaded（GAやアドセンスなどのタグを読み込み） 1. Gatsby-route-change 1. DOM Ready 1. Window Loaded 各右側の項目をクリックすると度のタイミングでどのタグが発火したか切り替わり、確認することができます。 実際にタグを設置し、プレビューとタグアシスタントを使って確認してみよう 銀ねこアトリエでã

1¯ã€Œèª­äº†ï¼ˆè¨˜äº‹ã‚’読み終わったか）」を確認するためのイベントを設定しています。 要素の表示（Element Visibility）というイベントを設定できるのですが、CTAエリアが50％表示されたら、「読了タグ」が発火するようになっています。 要素の表示イベントを利用して「読了」を計測するタグ作成 要素の表示イベントを利用して 読了を計測するタグ を作成し、プレビューとタグアシスタントで確認する方法 をご紹介します。 タグの作り方は【GA4】 Analytics と Google タグマネージャーを連携（画像解説28枚アリ）でも紹介しているので、かなり端折ってご紹介します。 トリガー作成 新規トリガー作成でユーザーエンゲージメントから要素の表示を選択します。 | 選択 | 要素ID | タイミング | 割合 | 発生場所 | | ---- | -------------- | ---------------- | ---- | -------------------- | | ID | endfoarticle | 1ページに付き1度 | 50％ | すべての表示イベント | タグを作りトリガーをセットしておく 「読了」というGA4のタグを作成します。トリガーは先程作成したものをセットします。 イベント名を「読了」とし、パラメーターをセットしておきます。 | パラメータ名 | 値 | | -------------- | ------------ | | endofreading | {{Page URL}} | 後日、GA側でカスタムディメンションとして使います。 「読了タグ」をプレビューとタグアシスタントを使ってデバッグ 「読了タグ」をデバッグしてみましょう！ コンバージョンエリアが表示されると7項目にElement Visibilityが追加され、発火済みのタグ（Tags Fired）に「読了タグ」が移動します。タグが発火したことが確認できました。「読了」をクリックして詳細をチェック。 発火中のトリガー（Firing Triggers）にチェックがついていれば問題なく動いています。 ※ Display Valueは非エンジニアの方は「Name」にしておきましょう。「Values」にするとJSON形式になってしまい見づらくなります。 タグが発火しない原因の探り方 イベントのタグが発火しない原因はフィルター（filter）の設定が間違えている可能性が一番高いです。 IDとクラス名を間違えてないか？ 値との設定が「含む」、「完全一致」などを条件を間違えていないか？ ページのパスやリンクの値を間違えていないか？ またレアですがHTMLやCSSの問題で発火しないこともあります。 探り方を2つご紹介します。 フィルター（filter）の設定が間違えている場合 必要があればプレビューもリロードしタグに設定したイベントが発生する状態（この場合は所定の位置までスクロール）にします。 条件を満たしているはずなのにTag Not Firedに分類されていたら、右側のイベントを選んだ状態にして調べたいタグをクリックしてみます。 この場合Page Pathの値が間違えているのでタグが発火していない事がわかります。 原因が分かったら、修正してもう一度プレビューしタグアシスタントでタグのトリガーが発火するか確認します。 うまく行かない場合は、タグマネージャーのコンテナーからプレビューをクリックするところからやり直しましょう。 正しく設置しているはずなのにクリックイベントがうまく発火しない クリックイベントがうまく発火しないのはGTMタグの設置方法だけが問題では有りません。 要素に派手なSVGのanimationなどを実装し、大半がボタンではなくSVGと認識してしまい、指定した要素をクリックしづらくなることがあります。 それが原因でタグが発火しないなんてことも、実際にありました！ まずはどの要素をクリックされているか調べる どの要素をクリックされたかを調べるためには、タグが発火する状況を作ります。 対象の箇所をクリックしたあと、タグアシスタントでAPI Callを開きgtm.elementが対象の要素とクリックした要素が一致しているか調べます。 一致したりしなかったりする場合は以下の対処を考えます。 あれ？測定されるときもあればしないときもある。。。なんでやろ？ クリックしたものが対象の要素と違うときの対処法 根本的にHTMLやCSSをæ€

1ã„切り変えれば解決する場合も多いと思いですがそうも行かない場合がありますよね? HTMLの書き方を変えるか、GTMタグを2つ作るしか有りません。 今回はGTM専用のカスタムデータdata-gtm-clickを追加します。 GTM側でカスタムデータ用の変数を作成します。 | 変数のタイプ | 変数タイプ | 属性名 | | ---------------- | ---------- | -------------- | | 自動イベント変数 | 要素の属性 | data-gtm-click | トリガーの方へ一部のクリック、カスタムデータ=requestにしておけばOK。 これでどちらがクリックされても問題なくクリックイベントが発火するようになります。 タグをさわれない場合はGTMでタグを2つ作ります。 ID request とID likeAnimation でクリックされた場合の2通りです。 ダブルカウントが気になる場合は除外トリガーを設定 除外トリガー（または「ブロック トリガー」）は、特定の条件下で別のトリガー機能が発動するのをブロックするために使用できるトリガーの一種です。 ダブルカウントが怖い場合は除外トリガーを作成して登録したほうがいいかもしれません。 プレビュー/タグアシスタント（Tag Assistant）を丁寧に使えばタグは正しく設置できる 今回は 正しく設置しているはずなのにクリックイベントがうまく発火しない ことがきっかけでGoole タグマネージャーのプレビューとタグアシスタント（Tag Assistant）を突き詰めてみました。 実はGoole タグマネージャーは昨年から触り始め今年ようやく一年目です。今まではイベントタグのコード直埋めでしたが、使えるようになるとなんと便利かと日々目を丸くしています。 私はブログ7年目という遅咲きでGoole タグマネージャーを設置して一昨年末くらいから、ゆるりとこのブログのSEO対策してます。 もっと勉強しておけばさっさと設置したのに後の祭り！ イベントはGoogle アナリティクスに登録されても、蓄積され活かせるようになるまで 。蓄積されたデータは宝になるので初期でできるだけ正しく設定しておくことをオススメします。 この記事が皆さんのSEOライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry500","title":"データポータル(旧Looker Studio) で GAS で出力したサイトマップを Search Console を統合する","date":"2022-05-21","modifiedDate":"2025-02-10","category":"seo","categoryName":"SEO対策・デジタルマーケ","ogImage":"/thumbnail/2022/entry500.webp","description":"データポータル(旧Looker Studio) (旧データポータル)で Search Console のインプレッション数や アナリティクス（GA4） のPVを統合したデータの作り方をご紹介します。GAS で sitemap.xml（サイトマップ） からサイトデータを出力し、週一回ぐらいのペースで分析することを想定しています。バッチ処理も追記しました。","tags":["Web解析","データポータル(旧Looker Studio)","GAS"],"body":"この記事は 2025 年に大幅にリライトしました。 この記事では、GASとデータポータル(旧Looker Studio)を使って、記事ごとにより詳細に分析する方法をご紹介しています。 データポータル(旧Looker Studio) (旧データポータル)は、Googleが提供するデータ分析およびビジュアライゼーションツールです。これを使うと、データを視覚的に整理し、インサイトを得ることができます。例えば、Google Analyticsデータを使ってウェブサイトのパフォーマンスを分析したり、Google Adsのキャンペーン効果を評価したりすることができます。 今まで手作業でスプシに書き出していたページの出力を GAS などを使って自動でできるようにしています。 リライトは公開後、60 ~ 90 日経過したあたりが良いとされています。 記事をいつ公開、ないしはリライトしたかを調べたい タイトルはリライトによって変わることもあるので常に最新のものを取得したい URL も取得したい 記事のジャンルも把握しておきたい（キーワードとのミスマッチがないか知りたいため） GAS ã

1§ Web サイトの sitemap.xml を元に自動でサイト情報を出力する サイトの状態を調べるために、Google のクローラーにサイト構造を伝えるために使っている sitemap.xml を利用します。GAS を使って Web サイトの構造を一気に取得します。 Google Apps Script（GAS）とは、Googleが開発し、提供しているプログラミング言語のことです。 Webブラウザ上で動作する「JavaScript」をベースに開発された言語であり、JavaScriptを日々学んでいる方は比較的容易に習得できるようになっています。 ウチのブログは整理しまくっているのであってもせいぜい200記事くらいしかありません。なので一回の GAS で取得できますが、記事の多いサイトは途中で処理が止まる可能性があります。そういう場合は、処理を分けたほうがいいかもしれません。 今回は GAS の始め方など、細かいことは省きます。GAS に関しての記事を参考にしてください。 プロジェクト名などを、GetSitemap 等としておきます。 コードの大まかな概要です。 分解して解説します。 UrlFetchApp を利用して、ページを解析してサイト情報を取得します。 UrlFetchAppは、Google Apps Script（GAS）で提供される組み込みのサービスで、ウェブ上のデータを取得したり送信したりするためのHTTPリクエストを行うために使用されます。 APIとの通信やウェブスクレイピングにおいて、データの取得や更新、処理を簡単に行うことができます。 このブログの構造はこんな感じ。サイトによって構造が違うので、適宜取得したい HTML を変えると良いと思います。 正確な構造化データがあるのであれば、そこから取得できます（取得方法）。 fetchPageDetails() では引数から取得したURLごとに、上記のようなHTMLから取得できる、タイトル、投稿日、メンテナンス日、ジャンルを取得します。 match で使っている正規表現に関しては、こちらの記事を参考にしてください。 実行すると、データが書き出されます。 タイマーの設定に関してはGASのトリガーの設定をご確認ください。 構造化データが設置されている場合 構造化データが設置されている場合は、いちいちタグから解析するよりも構造化データを解析したほうが正確ですし、設置されている構造化データごとの解析も可能です。 ヘッダーを足します。 例えば、FAQの構造化データを持っているページとそうでないページなどを比べることができます。 記事が大量にある場合、処理を分ける（バッチ処理） GASの1つのスクリプト実行あたり6分（360秒）とされています。それを超えると強制終了されます。 記事が大量にある場合、一度に処理すると様々な問題が発生します。 速度アップ: 一度に大量のデータを処理すると遅くなるので、少しずつ処理する エラー対応: 小分けにすると、エラーが起きても他のデータに影響しにくくなる 安定性: リソースを分散して使うのでシステムが安定 また、UrlFetchApp.fetch の1日の実行回数は無料アカウントで最大20,000回、Google Workspace アカウントであれば最大100,000回です。 またサーバーへの負担も配慮する必要があります。 短時間で大量のリクエストを送信すると、サーバー側に負担がかかり、応答速度が低下したり、サーバーが過負荷状態になったりダウンする サーバーによってはレートリミット（クライアントが一定時間内に送信できるリクエストの数を制限）を超えると、一時的にアクセスが制限されることがある。 大量のデータを送受信する場合、ネットワークの

1帯域幅が影響を受けることがある。 GASの問題も、サーバーへの負担もバッチ処理で解消できます。 データポータル(旧Looker Studio)にアクセス、無料で利用するでスタート データポータル(旧Looker Studio) にアクセスし、無料で利用するをクリックします。 もしくは、直接アクセスしましょう。 空のレポートを作成しておく まずは空のレポートを作成します。 無題のレポートができました。 データの連携処理 空のレポートからデータの連携処理を行っていきます。 無題のレポートが出来上がりますので編集をクリックします。 使用したいスプシを選び、先頭行をヘッダーとして使用するにチェックをし、右下の追加ボタンをクリック。 グラフを追加し、ディメンション設定 試しに、URLとタイトルを表示してみます。まずは、適当にグラフを追加してみます。ここでは表の一番右「ヒートマップ付きデータ表」を選択しました。 データを後ほど Search Console と統合したいので、ここではデータの統合をクリック。 ディメンション に URL、ジャンル を追加。 後で何を統合したのかわからなくならないように統合名を変更しておきましょう。 加工して使いたいデータがある場合は計算フィールドを使う 公開からの経過日と、リンクつきのタイトルを表示したいので2つの計算フィールドを追加します。 計算フィールドとは、データソース内の既存のフィールドを基に、計算式を設定して新しいフィールドを作成する機能です。計算フィールドでは、演算子や関数、正規表現などを使用して、数値や日付、日時などの計算結果を表示できます。 ディメンションにリンク付きの文字を追加したい時は HYPERLINK を使います。データポータル(旧Looker Studio) からページを直接飛べるようにします。 リンク付きタイトルをディメンションに追加します。 計算フィールドを「リンク付きタイトル」と名付けました。このケースだと、コードは以下のようになります。 ちゃんとデータが取り込めている場合は、グリーンにハイライトされます。 経過日数は以下のように CASE - WHEN を使って条件分岐して計算する必要があります。 | 条件 | 処理 | | -------------------------------- | -------------------------------- | | メンテ日がNULLで公開日が90日以上 | 公開日からの経過日を出力 | | メンテ日が90日以上 | メンテ日から90日経ったものを出力 | | その他 | 0 出力 | 出力する値の型（数字→文字列）が変わるとエラーを吐くので、今回は 90 日を経過していないものを 0 としました。指標 に追加します。 ここまでできたら、一度データソースの編集を閉じグラフのディメンションと指標を編集していきます。 | ディメンション | 指標 | | ---------------------------- | ------------------ | | リンク付きタイトル, ジャンル | 経過日数(90日以上) | 表ヒートマップにするとこんな感じで出力されます。 さらにスプシデータに Search Console を統合する このスプシデータに、Search Console のデータを統合します。データを追加します。 対象のドメイン、URLのインプレッション、Webを選びます。 スクショでは切れてますが、右下に 追加ボタン があるのでクリック。 パラメーター（URLの末尾の ?xxx=aaaa みたいなやつ）やハッシュ（アンカーリンクなどにつくURLの末尾の#xxx）を排除したいので、「ランディングページの正規化URL」という計算フィールドを作成します。 分析したい Search Console のデータはスプシに書き出したブログ記事と一致した、検索に引っかかっている記事だけなので 内部結合 で結合を選択します。 スプシと Search Console から一致しないものはすべて排除します。 結合条件は スプシの 

1URL Search Console の ランディングページの正規化URL を選択します。 後ほど日付で絞り込めるようにしたいので、ディメンションに Date を追加します。インプレッションなど出力したいデータを追加します。 | ディメンション | 指標 | | ----------------------------------- | -------------------------------------------------- | | ランディングページの正規化URL, Date | URL Clicks, Impressions, Average Position, URL CTR | 保存。 出力する表でデータをセット 結合した Search Console のデータを持っていない場合は Null が返ってくるのでその場合は空をセットします。 コントロールを追加して日付で絞り込めるようにする 日付ごとに絞り込めるように、コントロールの期間設定を追加します。 今回はデフォルトの数値を、過去30日としておきます。 これで期間ごとに値が絞り込めるようになりますね！！！ テーマ変更 味気ないのでテーマを変更します。 スコアカードを追加して全体のデータを追加 スコアカードで更に全体像がわかりやすくします。 | 指標 | 名前 | 集計方法 | | ---------------- | ------------------ | -------- | | Impressions | 総インプレッション | 合計 | | URL Clicks | 総クリック数 | 合計 | | URL CTR | CTR | 平均値 | | Average Position | 平均順位 | 平均値 | スクショのようにスパークラインをDATEに設定すると、lookerstudioを再読込するとエラーで表示されなることがあるので、折れ線グラフなどを設置することをおすすめします。 ページタイトルでの検索できるようにする タイトルで記事の指標を絞り込めるようにします。コントロールからプルダウンリストを追加します。「ブログとsearch console統合」のディメンションにタイトルがない場合は先に追加しておきます。 「記事」という名前で指標はImpressionsあたりにセットしておきます。 こうすることで、記事をタイトルで検索し絞り込めるようになります。 まとめ・データポータル(旧Looker Studio) を使って各種データを統合すると全貌が把握できる データポータル(旧Looker Studio) でデータを統合すると、総合的に見てどの記事を分析すればいいかなど把握しやすくなります。 まだまだ紹介できていない機能があるのでまた記事にまとめられたらなーと思っています。 この記事が皆さんのWeb解析ライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry499","title":"ブロックエディタにプラグインなしで文字装飾ボタンを追加する","date":"2022-05-14","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2022/entry499.webp","description":"【WordPress】【プラグイン無し】ブロックエディタで文字装飾（蛍光マーカーなど）を上部ツールバーボタンから追加する方法をご紹介します。","tags":["WordPress","React","ブロックエディタ"],"body":"WordPressのブロックエディタって便利ですよね？ ただ、文字装飾がデフォルトの設定だけからだといまいち。そこで今回はブロックエディタの上部ツールバーに文字装飾（蛍光マーカーなど）ボタンをプラグイン無しで追加する方法をご紹介します。 プラグイン無しで文字装飾（蛍光マーカーなど）ボタンを追加したい ブロックエディタでのデフォルトの文字装飾はブロック単位。ご覧の通り一歩間違えるとちょっぴりダサくなります。 プラグインなしでは右側のパネルからはブロック単位でしか装飾できません。 とても使い勝手が悪い！ ということで、今回文字だけ装飾できるようにカスタマイズする方法をまとめました。 ブロックそのものをカスタマイズしたい方はこちらを参考にしてみてください。 functions.phpから文字装飾ボタンを追加する 今回は2個ほどボタンを追加します。 functions.phpからJSファイルを読み込ませる functions.phpにã

1‚³ãƒ¼ãƒ‰ã‚’追加します。 wpenqueuescriptの引数です。 editor.jsから管理画面のツールバーにボタンを追加 editor.jsでPHP側で依存関係で登録した３つを使えるようにします。 wplocalizescript() の値はJS側でオブジェクトとして受け取れます。 spanで文字を装飾できるようにします。 ツールバーにボタンが表示されるようになりました！ iconはお好みで変更可能です。 Dash Icon アイコン名がdashicons-list-viewであれば dashicons- を取り除いて使えばOKです。 このままでは装飾できないのでスタイルを追加する HTMLがどうなっているか確かめます。 きちんとspanタグでラップされクラスが追加されています。 マーカーとピンク文字用のスタイルを追加します。 エディターのスタイル設定がまだの場合は以下のようにファイルを読み込んでおきましょう。 style.cssとeditor-style.css似同じコードを追加します。 文字にスタイルが当たるようになりました！ 文字装飾の外し方 文字装飾の外し方ですが、装飾した文字を選択してもう一度同じボタンをクリックするだけです。 まとめ・Classic Editor は少なくとも2022年までなのでそれまでに対策を WordPressの公式の発表によると、クラシックエディターは少なくとも2022年まで、さらに必要とあれば今後もサポート・保守されるとのこと。 現在、クライアントにはできるだけブロックエディタに移行していただいています。 デフォルトのブロックエディタだけだとちょっと使い勝手悪いし、かといってプラグインはポンポン入れたくない方も多いと思います。 この記事がみなさんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false}

1,{"slug":"entry498","title":"パンくずリスト構造化データの書き方！JSON-LDのコピペ用サンプル","date":"2022-04-21","modifiedDate":"2026-07-04","category":"seo","categoryName":"SEO対策・デジタルマーケ","ogImage":"/thumbnail/2022/entry498.webp","description":"パンくずリスト構造化データの書き方を徹底解説！SEOでクリック率を上げるリッチリザルトの表示方法や、Google推奨のjson ld書き方の基本、HTMLへのmicrodata付与手順まで網羅。コピペでそのまま使えるbreadcrumblist json ldのサンプルコード付き！","tags":["構造化データ","CSS"],"body":"SEOでクリック率を上げる強力な手段が リッチリザルト です。 検索結果の一覧に直接リッチな情報が表示される仕組みですが、中でも一番手軽で効果バツグンなのが パンくずリストの構造化 です。今回は、検索画面で自社サイトをぐっと目立たせるためのパンくずリッチリザルトの表示方法について、徹底的に分かりやすく解説しました。 私はパンくずリストの構造化データを実装し始めて10年以上が経つ、自他ともに認める パンくずリストマニア です。これまで、現場の第一線であらゆるパターンの書き方を検証し、確実な成果を上げてきました。 正しくマークアップすると、検索結果の表記がちゃんと日本語になり、ユーザーのクリック率を高めることができます。2026年に合わせてベストな書き方（jsonLD）を徹底解剖しました。 この記事でわかること パンくずリスト構造化データの正しい役割とSEOメリット Googleに最も解析されやすい「JSON-LD」の具体的な書き方 コピペで今すぐ実務に使える、スマホ対応のデザインコードサンプル 構造化データって何から書けばいいの？, エラーを出さずに綺麗に表示させたい！ そんな疑問や要望をこの1記事でまるごと解決。HTMLタグの基本からデザイン、コピペでそのまま使える極上のコーディングサンプルまでたっぷりご紹介しますので、ぜひあなたのサイトに役立ててください！ パンくずリスト構造化データとは？基礎知識をわかりやすく解説 パンくずリストとは、一般的にはウェブサイトのグローバルナビ下あたりに設置されている小さなナビゲーションです。 これを辿れば、一般的にはトップページに辿り着けるようになっています。実は私たちの普段使っているツールでもパンくずリストは慣れ親しまれており、Mac の Finder や WordPress のブロックエディタなんかにもしれっと設置されています。 元々は森に捨てられたグレーテルがヘンゼルとグレーテルが帰り道を示すためにパンくずを置いたことから、パンくずリストと呼ばれるようになりました。 パンくずは鳥に食べられてヘンゼルとグレーテルは帰れなくなってますけどね！ ヘンゼルとグレーテルのパンくずは役に立ちませんでしたが、Webサイトでは自分の現在地を知る上では重要なパーツです。 パンくずリストを設置するSEOメリットとリッチリザルトの効果 パンくずリストを設置するメリットは以下の通り。 クローラビリティ向上 リッチリザルトを表示 ユーザーが自分の位置がわかる 内部リンクを増やせる ぶっちゃけメリットしかありません。設置しないと損しますよ！ 検索エンジンのクローラビリティ向上 クローラビリティとは 検索エンジンがクロールしやすくなること です。 パンくずリストは、ホームから現在のページまでの関連ページのリンクを設置します。 クロールされパンくずリストが見つかると、このようにインデックス(Googleのデータベースに登録)されます。 こちらはサーチコンソールです。 コードの記述にミスがあると、正しく登録されã

1ªã„ことがあります。正しい、記述方法はパンくずリストの設置方法を参考にしてください。 なので、パンくずリストとしてインデックスさせるためには、構造化データとして適切にコーディングする必要があるのです。 リッチリザルト表示でクリック率（CTR）が上がりSEOでも有利 リッチリザルトとは検索一覧で目立つパーツのことです。 リッチな（検索）結果を表示。ユーザーがクリックに至る優位な情報を目立たせてくれるのでクリック率は上がります。 リッチリザルトはFAQなど複数種類があり、パンくずリストもリッチリザルトの一種です。 正しくコーディングすれば、リッチリザルトが表示され クリック率が上がりSEOでも有利 になります。 ユーザーがWebサイト内での自分の現在位置がわかる サイトを閲覧していて、前のページやその前のページに戻りたいことがあります。 「前のページにあった、あの記事気になるなぁ」ってこと、よくありますよね？ ブラウザバックで戻ることもありますが、パンくずを辿って戻ることもあります。 内部リンクを増やせるためSEOの評価が上がりやすい 内部リンクとは、同じWebサイト内でリンクを貼ることです。 内部リンクがあると関連性の高いページを繋ぐことですでにアップされたページが検索エンジンにクロールされることにインデックスされ、検索にも上がりやすくなります。 つまり、内部リンクを適切に設置すると SEOの評価も上がりやすい ということになります。 パンくずリストを設置することで、内部リンクを適切に増やすことができます。 SEOで効果大！？パンくずリスト構造化データの詳細度を上げる方法 パンくずリストはただ設置するだけだと意味がありません。 クリック率を上げるためには、パンくずリストの 詳細度を上げることが効果的 です。 では詳細度について解説します。 詳細度の高いパンくずリストとは、ホームから現在地の間により細かいリンク（カテゴリー一覧などの関連ページ）を挟んだものです。 以前の詳細度の低いパンくずリストを設置していた銀ねこアトリエと他のサイトとの検索結果の比較です。 実際に詳細度の高いパンくずリストを設置している記事は、パンくずリスト内に記事に関連するキーワード（カテゴリーなど）が散りばめられています。 パンくずリストを見ただけでも何の記事かわかりやすいし、このサイトがどんなジャンルの記事を書いているかも想像がつきます！ 詳細度はトップから現在地までの項目を増やすことで上げることができます。 | 詳細度 | 具体例 | | ------ | -------------------------------------------- | | 低 | HOME > 記事一覧 > 記事名 | | 高 | HOME > 記事一覧 > 項目大 > 項目小 > 記事名 | なので銀ねこアトリエでもありきたりの「記事一覧」という項目は削除し、関連キーワードを含んだジャンルやタグ一覧を表示できるように改善しました。 詳細度を上げたほうが、どのようなジャンルの記事なのか一目瞭然です。 パンくずリストを改善したのが理由なのかはわかりませんが、最近一日のインプレッション数が約3000向上しました！ 位置型・属性型・パス型などパンくずリストは3種類あります 位置型パンくずリスト...静的に出力するパンくずリストです。階層が辿れるのが特徴です。検索エンジンにインデックスされます。 属性型パンくずリスト...ECなどに採用されてます。ユーザーが閲覧しているページがウェブサイト上のどの属性に当てはまるかを表します。 パス型パンくずリスト...履歴を辿れる動的パンくずリストです。ブラウザバックがあるのであまり採用されてません。 通常パンくずリストを検索エンジンにインデックスさせるためには位置型パンくずリストを設置させる必要があります。 必ずしも 実際のウェブサイトの階層通りでなくてもかまいません。 パンくずリスト構造化データの設置方法！書き方の基本 まずはパンくずリストの設置方法です。 順番のあるリストなので ol オーダーリストを使ってます。 ol...順番のあるリスト ul...順不同リスト 私は nav は使いません。nav は主要な ナビゲーションを格納するためのタグ なのでラッパーが必要な場合は、div を使ってます。 アクセシビリティ考慮するなら、スクリーンリーダーに読み上げれるようにしてあげると親切ですね。 この記事のパンくずリストを表示するなら、コードの例はこんな感じになります。 jsonld（構造化データ）microdataなã

1©ä»˜ä¸Žã—てbreadcrumblistをマークアップする手順 さらに構造化データを付与して、クローラーにパンくずリストここだよ！って教えてあげます。 JSON+LD、RDFa、microdataで記述する方法があります。RDFaは今回は割愛します。 私の大好きなJSON+LDです。Google検索エンジンに解析されやすく他の構造化データと1箇所にまとめることができる のがいいところです。このサイトもJSON+LDで記述してhead内に格納しています。 HTMLは変える必要もありません。 構造が正しいかスキーマ マークアップ検証ツールでテストしてみましょう！ 以前は \\"item\\" の中の \\"@type\\" を省略する書き方もありましたが、現在は省略するとGoogleの検証ツールで「必須項目が不足しています」と構造エラーになってしまいます。 各階層のページには必ず \\"@type\\": \\"WebPage\\"（またはWebSiteやBlogPostingなど、ページに適した型）を付与してあげるのが、エラーを出さずにリッチリザルトを100%綺麗に表示させる現在のベストプラクティスです！ 続いて microdata です。残念ながら現在は主流ではありません。属性が増えるので一気にボリューミーになります。 現在主流じゃないmicrodataも紹介する理由 「数年前に作られた古いサイトの保守・運用案件」や「WordPressの古いテーマ」では、いまだにmicrodataで書かれたパンくずリストが現役で動いているケースがあるからです。「既存の古いコードを修正してほしい」と頼まれたときに、「うわ、これ何だ？」と迷わないための知識（生存戦略）として、microdataの解説を補足として残しておきます。 デザインを含めたパンくずリストのサンプルコード（コピペOK） それではコードサンプルのご紹介です。リセットCSSを使ってデフォルトのスタイルは予め打ち消してます。 レスポンシブ対応済みです。 SVGアイコンを使ったパンくずリスト SVGを使った、汎用性の高いパンくずリストです。 アイコンの色やデザインを変えればバリエーションは増やせます。 今回はfontawesomeを使いました。 li のスタイルを display: inline-block にしておくことで改行し、レスポンシブにも対応できます。 全体のコードはこちら(SCSS)。 breadcrumblist basic| Code Pen 長くなるとスクロールするパンくずリスト 文字が長くなると…などで切りたくなりますが、今回はスマホではスクロールできる仕様にしました。 マウスオーバーで色が変わります。 スクロール時の縦軸のグラつき防止にoverflow-y: hiddenを入れています。 スクロールバーが見えるとかっこ悪いので隠しています。 全体のコードはこちら(SCSS)。 breadcrumblist scroll| Code Pen 長くなるとスクロールするパンくずリスト2 先ほどとほぼ一緒ですが、少しデザインをアレンジしてみました。 このCSSはフローなどのコードを書くときも使えます。 全体のコードはこちら(SCSS)。 breadcrumblist scroll2| Code Pen まとめ：breadcrumblist json ld（パンくずリスト構造化）などを正しく設置してリッチリザルトを表示させよう パンくずリストがSEOやユーザーにとってとても重要なパーツということおわかりいただけたと思います。ぜひ、設置してユーザーにもクローラーにも優しいサイトを作りましょう。 他にもサイトでユーザビリティを上げるグロナビやハンバーガーメニューなど共通パーツの作り方をご紹介しています。 この記事が皆さんのSEOライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry497","title":"concreteCMS(コンクリ)外部フォームでAjax送信する","date":"2022-04-19","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbn

1ail/2022/entry497.webp","description":"先日concreteCMSの外部フォームブロックを使ってフォームを実装しました。前も実装方法は紹介したのですが、今回はAjax を実装方法をまとめましたので参考にしてください。","tags":["concrete5"],"body":"先日concreteCMSの外部フォームブロックを使ってフォームを実装しました。前も実装方法は紹介したのですが、今回はAjax を実装方法をまとめましたので参考にしてください。 concreteCMSとは？ https://www.concretecms.com/ concreteCMSとは、今はほとんどのCMSで見かけるようになったブロック型CMSの先駆けです。 コンテンツをブロックのように積み上げてサイトを作ることができます。 標準機能で自由度が高く柔軟にカスタマイズでき、複数人で運用するコーポレートサイト、大型サイトなどに向いています（個人の意見）。 外部ブロックの作り方 applicationディレクトリに以下のようなディレクトリとファイルを作成します。 Contact Formという外部ブロックのテンプレートを作ります。 ファイル名がそのまま、テンプレート名になります。 concreteCMSのブロックはMVCモデルになっており、コアのブロックをオーバーライドして作ることができます。 詳しい作り方は以下記事にまとめています（リライト済み）。 今回はcontrollerとviewを「外部フォームブロックでお問い合わせフォーム作成」を再利用して作ります。 viewのコードを書く まずは見た目部分のコードを書きます。 前回の「外部フォームブロックでお問い合わせフォーム作成」同様、アンケート（ラジオボタン）、ニックネーム、メールという簡単なメールフォームにします。 Loader::helper(\'form\')フォームヘルパーを使って、フォームのパーツを作ります。 コードはこちら。 コントローラー側の下準備 コントローラー側のコードの紹介です。 まずは正常に値が飛ぶかテストしてみましょう。 フォームのpostで遷移するのですが、遷移先でdd() を使って処理をとめ、出力される値を確認します。 以下のようなページに遷移してレスポンスが返ってきたら成功です。 Ajaxでcontrollerでの送信処理 今回はjQueryを使いました。 event.preventDefault() で物理的にPOSTでページ遷移させるのを止め、serialize() でPOSTされるデータを取得します。 デバッグすると次のような値が取得できています。 serialize()ではポストされた値をキーと値のペアを以下のような形式で取得できます。 controllerでの処理結果をAjaxを介してviewに渡す controllerでのバリデーションなどの値をview側に渡します。処理後、exit() で抜けます。 受け取ったあとの処理をします。 送信成功。 エラーが有った場合。 ローディング処理 レスポンスが返ってくるまでにタイムラグが生じ、送信できたかどうかわからなくなります。 ボタンはクリックできないようにして、ローディングアニメをつけます。 今回はBootstrapã

1Œç”¨æ„ã—ているSpinnerをつかいました。 Spinners (スピナー) 送信処理中はCSSとJSでフォームを操作できないようにし、ローディングアニメを表示します。 今回はフォーム全体に pointer-events: none を使って操作できなくしました。 メールヘルパーでメールを送信 メール処理は、通常フォームと一緒です。今回は割愛するので「メールヘルパーを使ってメール送信する」を参照してください。 まとめ Ajaxを使った方がロードを待つストレスが少なくて済むので、今回Ajaxで実装してみました。 コアファイルを漁っていたら色んなバリデーターが出てきたので、また追記できればと思います。 concreteCMSの情報は少なく、リファレンスを探しても英語サイトに辿り着き困ってる人も多いと思います。 この記事がみなさんのCMSライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。 おまけ・ヘルパーなどの設定があるファイルのソースコードを確認したいとき ヘルパーの他のメソッドを確認したいときがあります。 ググるのも面倒だし、すぐ確認したいときはわざとエラーを起こしてファイルの場所を特定することができます。 格納場所。 ソースを漁ると、他にも面白い出力できるフォームを発見できました。 国名を選ばせたいときに活用してみてください。","noindex":false},{"slug":"entry496","title":"【2026年仕様】JavaScript不要！コピペで動くハンバーガーメニュー・ケバブアニメサンプル集","date":"2022-04-09","modifiedDate":"2026-06-08","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2022/entry496.webp","description":"いつも同じハンバーガーメニューじゃ飽きちゃう！JS不要・CSSのみでリッチに動くコードスニペット集を作りました。ケバブ、ミートボール、ベントー、SVGリアルバーガーなど実務で即戦力になるモダンデザインを厳選。2026年のコーディングを爆速化！","tags":["CSS","JavaScript"],"body":"いつも同じハンバーガーメニューばかりじゃ飽きちゃう！そこで、普段使いができるハンバーガーメニューのコードスニペット集を作りました。ハンバーガーメニュー以外にもケバブ、ミートボールメニューなどの実装方法も紹介。できるだけ、実践で使いやすいデザインのみ厳選しています。タグの入れ子はできるだけせず、可能な限り疑似要素を駆使して作成しました。 ハンバーガーメニュー、レパートリーほしいよね ハンバーガーメニューいつも一緒で飽きますよね？ 実はハンバーガーメニューは類似のメニューボタンもあわせてレパートリーがたくさんあります。 そこで、自分のレパートリーも増やすためにいくつかサンプルを作ってみました。 グローバルメニューアニメーションやパンくずリストのサンプルあるのであわせてお読みください。 以下ご注意ください タグの入れ子はできるだけせず、可能な限り疑似要素を駆使しています アクセシビリティを考慮した要素などは含まれておりません 本記事ではコードが長くなるため、サンプルを外部サービス（CodePen）で用意しました 説明が必要な部分のみ、本記事でコードを紹介してあります サンプルでのスタイルの実装はSASS記法で書かれています サンプルはバニラJSを使用してあります そもそもハンバーガーメニューってなんぞ？ ハンバーガーメニューって何？って思っている方のためにそこから説明いたします。 ウェブサイトって主要なメニューを通常ヘッダーに配置するのですが、スマホになるとPCに比べ面積が小さくなってしまうのでメニューが邪魔になります。 そこで生まれたのã

1Œãƒ¡ãƒ‹ãƒ¥ãƒ¼ã®è¡¨ç¤ºéžè¡¨ç¤ºã‚’コントロールするメニューボタンです。 たいてい右上か左上に配置されています。 ハンバーガーメニューと言われる理由は三本の線が、バンズ（パン）に挟まれた具のよう だからみたいです。 ボタンでメニューを表示すると大抵ボタンそのものがアニメーションで×になるものが王道です。 ボタンが×になるともう一回押したら閉じるよ！的なことが伝わりますよね？ ハンバーガーメニュー ハンバーガーメニューを作ってみましょう。 王道のハンバーガーメニュー 皆さんがよく見かけるであろうハンバーガーメニューの実装方法をご紹介します。 JSでクリックでクラスをつけたり外したりし、CSSでアニメーションさせます。 ボタンのHTMLのコードはこれだけです。 疑似要素after、beforeとbox-shadowを使って三本線を作り出します。 JSでボタンのクラスをつけたり外したりします。 jQueryが使いたい方はコードを以下のように書き直してください。 transform: rotate()で回転させて、transitonでアニメーションさせます。 デモとサンプルコードはこちら（SCSS記法です）。 Basic hamburger menu | Code Pen 2026年版王道のハンバーガーメニュー(CSS & HTML だけ) JavaScriptなしでも実装できます。2026年になるとCSSも入れ子で記述できるようになりました。 2026年最新版：A11y（Accessibility）満点ハンバーガーメニューのコード ※三本線などの装飾CSSは「王道のハンバーガーメニュー」と同じなので省略し、ここではA11y制御に必要な記述に絞っています。 Accessibility = A + 11文字（ccessibilit）+ y なので A11y といいます。 A11y対応の重要ポイント button 要素の使用: キーボードのTabキー移動に対応し、正しく「ボタン」と読み上げさせます。 aria-expanded : メニューの開閉状態を音声ユーザーに伝えます（JSでtrue/falseを切り替え）。 aria-controls / aria-hidden : ボタンとメニューを紐付け、閉じている時は読み上げやフォーカスをブロックします。 個人制作ならCSSのみのチェックボックス版、実務案件ならこの「aria属性＋数行のJS版」と使い分けるのが最適解です。 ⚠️ よくある「CSSのみ（JS不要）」の落とし穴とアクセシビリティ ネットでよく見かける「チェックボックスを使ったCSSオンリーのハンバーガーメニュー」は、一見便利ですがアクセシビリティ（A11y）的には完全にNG（非推奨）です。 スクリーンリーダーを使うユーザーに「メニューボタン」ではなく「チェックボックス」と認識されてしまい、開閉状態も伝わりません。 そこで、実務のWeb制作（コーポレートサイトなど）でもそのまま使える、SEOや軽量化のメリットを活かしつつアクセシビリティも100点満点にした「aria属性を用いた対応版」のハイブリッドコードを合わせてご紹介します。 王道のハンバーガーメニュー180°回転プラス 更に親要素の回転を増やして勢いをつけます。 先程のコードに、少しコードを足します。 デモとサンプルコードはこちら（SCSS記法です）。 180 rotate hamburger menu | Code Pen コロコロ転がるハンバーガー 王道のハンバーガーメニュー180°回転プラスにアニメーションのタイミングを更にずらしてアレンジします。 デモとサンプルコードはこちら（SCSS記法です）。 Rolling hamburger menu | Code Pen ちょっと斜めったハンバーガーメニュー transformのskewを使って少し斜めったメニューボタンにします。 skewとは斜めとか歪めるという意味です。 skewの影響で右側のボーダーが細くなるので少し太くします。 棒の真ん中に一度集まって取り消しマークになる animationを使って、ボタンをクリックすると三本線が中央に集まり、真ん中でばってんになるアニメーションを実現してみました。 transitionだとヨーヨーのようにアニメーションを繰り返すだけで、きれいにタイミングをあわせられません。 アクティブ時、非アクティブ時の状態をそれぞれkeyframesで作成することでã

1„い感じのアニメーションができます。 サイト読み込み時のアニメーションが発動するのを止めます。 HTMLに予めクラスを付与し、 ボタンを操作するまではアニメーションさせないようにしておき、 クリック時にJSでクラスを外します。 デモとサンプルコードはこちら（SCSS記法です）。 Bended border hamburger menu | Code Pen アクセシビリティ抜群ハンバーガーメニュー ハンバーガーメニューの難点はそれがメニューだということがわかりにくいことです。 なので、本来ラベルや枠線で囲ってあげるのが親切です。 ラベルを追加し、 ラベル用のスタイルや枠を追加、色もアクティブ時には反転させます。 クリック時にJSでラベルを差し替えます。 デモとサンプルコードはこちら（SCSS記法です）。 Accesibility hamburger menu | Code Pen トルコの伝統料理由来のドネルメニュー ドネルケバブというトルコの伝統料理があり、そこから名付けられたのがドネルメニュー。 ドネルケバブ自体は垂直に味付けしたお肉を焼く料理で、でっかいものは写真のように焼けた部分から順次肉を削いで食べます。 お肉の形は下の方からこそいでいくので、下になればなるほど細くなるかたちがにているのでドネルメニューになったそう。 linear-gradientで作るドネルメニュー バックグラウンドは何重にも重ねることができるのでlinear-gradientを使ってドネルメニューを作ってみます。 デモとサンプルコードはこちら（SCSS記法です）。 Gradient doner menu | Code Pen 二本線のドネルメニュー タイミングをずらして、二本のボーダーをスライドさせ、バッテンを作ります。 メニューの文字も同じようにCSSでスライドさせています。 2つのアニメを0.5秒ずつずらします。 本来以下のようなアニメーションを0.5秒ずらしたいのですが、複雑なアニメーションはanimationで設定しないとうまくいきません。 なので、@keyffamesで待機時間を作ります。 1秒のアニメーションを0.5秒の待機時間を設けて1.5秒で実行します。 アニメーションの設定は 0％から100％ なので、100 ÷ 150 = 0.6666 となります。 待機時間を@keyffamesのパーセンテージに落とし込むと 0.5 × 0.6666 × 100 = 33.3333％ になります。 最初にアニメーションさせる要素は66.6666％で終わらせ 、次にアニメーションさせる要素は33.3333％付近から始める とぴったりタイミングが合います。 一度待機時間無しでアニメーションを作成して、いい感じになったらパーセンテージを計算し直しました（スプシの関数などを使うとかんたんに計算できます）。 カスタムデータに「CLOSE」用のラベルを格納し、 attr関数でカスタムデータを取り出して出力しています。 フルのCSSのコードは長いです。 デモとサンプルコード詳細は以下から（SCSS記法です）ご確認ください。 2 border Doner menu | Code Pen トルコの串焼きから由来ケバブメニュー 通常のケバブは先程のドネルケバブよりも小さく串焼きにしたものを言います。 バッテンマークをマイナスマークに変えたケバブメニュー シンプルにバッテンをマイナスに替えただけのケバブメニュー。 コード自体は棒の真ん中に一度集まって取り消しマークになるを改良したものです。 デモとサンプルコード詳細は以下から（SCSS記法です）ご確認ください。 Minus mark kebab menu | Code Pen ケバブメニュー バッテンマークをマイナスマークに変えたケバブメニューの発展版。 デモとサンプルコード詳細は以下から（SCSS記法です）ご確認ください。 Simple kebab menu | Code Pen ケバブを90°回転したらミートボールメニュー ケバブは縦3つのポチポチボタンですがこれを90°回転したらミートボールメニューになります。 回転するミートボールメニュー シンプルにメニューを回転させます。 ミートボールっぽさを演出するために、バッテンもボテッと太め。 デモとサンプルコード詳細は以下から（SCSS記法です）ご確認ください。 Rolling Meat ball menu | Code Pen 日本の誇るベントーメニュー 実は海外では「Bento」という言葉は結構浸透しています。 A bento (弁当, bentō)[1] is the Japanese iteration of a single-portion take-out or home-packed meal, often for lunch. https://en.wikipedia.org/wiki/Bento 色の反転を利用したベントーメニュー 疑似要素とbox-shadowを使ってベントーの仕切りを作ります。 色を反転させます。 デモとサンプルコード詳細は以下から（SCSS記法です）ご確認ください。 Bento menu | Code Pen SVGを使えばどんなメニューも実現可能！！ SVGがCSSアニメーション、HTMLタグとしても使いやすく、色んなデザインで使えて便利です。 わざわざCSSを駆使してデザインを作るくらいなら、SVGで素材作って利用したほうがコードも短くなることも。 リアルハンバーガーメニュー リアルなハンバーガーのメニューです。 メニューをクリックすると具とバンズが順次落下してきます。 わずかにバウンスします。 SVGの各パーツにはクラス名をつけておきます。 デモとサンプルコード詳細は以下から（SCSS記法です）ご確認ください。 Real hamburger menu | Code Pen 猫のファストフード・魚なメニュー 実はこの魚メニューをどうしても実装したいのがきっかけでこの記事を書きました。 身と骨のパスを作り、身だけtransform:scaleYで縦軸のサイズをコントロールしているだけの単純なアニメーションです。 特に大したことはしていないので、コードの説明は省きます。 デモとサンプルコード詳細は以下から（SCSS記法です）ご確認ください。 Sakana menu | Code Pen まとめ・CSSやSVGを駆使したらレパートリーは増やせる 今回は14個のハンバーガーメニューをご紹介いたしました。 タグの入れ子はできるだけせず、可能な限り疑似要素を駆使して作成しましたが、なかなかキツかったです笑。 SVGを使えばどんな実装もできると思います。 もっとサンプルを増やしますので乞うご期待 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。 関連記事もあわせてお読みください。","noindex":false},{"slug":"entry495","title":"EJSの関数を使って、pictureタグの記述を効率化","date":"2022-04-01","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2022/entry495.webp","description":"最近のウェブ制作はスマホ、タブレット、多様化したブラウザやディスプレイへの画像対応が大変です。画像やディスプレイの出し分けにpictureタグやsrcsetがだいぶ浸透してきましてきましたが、属性が多くて記述がしんどい！のでEJSで関数化して少ないコードで出力できるようにしました。そのコードのご紹介です。","tags":["Gulp","npm","JavaScript"],"body":"最近のウェブ制作はスマホ、タブレット、多様化したブラウザやディスプレイへの画像対応が大変です。 画像やディスプレイの出し分けにpictureタグやsrcsetがだいぶ浸透してきましたが、属性が多くて記述がしんどい！のでEJSで関数化して少ないコードで出力できるようにしました。そのコードのご紹介です。 EJSてそもそも何ぞ？ EJSは埋め込み型JavaScriptテンプレートで、Gulpなどを使ってHTMLに吐き出すことができます。 最初の設定等は少し面倒ですが、一度設定すると作業が効率化できます。 Gulpからの実装の方法はこちらにまとめています。 関数の書き方 まずは関数の書き方です。 関数は変数に格納し、戻り値を取り出して使います。 特殊な記述方法に関しては、【Gulp】EJSを使ってHTMLを量産するのおまけejsお役立ち情報こちらを参照してください。 出力結果。 引数 引数を渡すこともできます。 出力結果。 引数にはデフォルト値を入れておくこともできます。 出力結果ã

1¯ä¸€ç·’。 picture タグを毎度ガチで書くのはめんどくさい pictureタグはブラウザやユーザーの環境（モバイルとかPC）に応じて出力したい画像を変えることができます。 例えば、以下のように画像をWebP対応してあるブラウザの場合はWebPを、それ以外はPNG画像を表示、さらにウィンドウ幅に合わせて画像サイズを変えます。 さらに、loading=\\"lazy\\"Lazy Loadやdecoding=\\"async\\"デコード処理を非同期したらたった一箇所に画像を出力するためにこれだけのコードを書かなければなりません。 カオス!!正気の沙汰じゃない！ 関数でpicture タグの記述量を減らす 解決するためにEJSの関数の出番というわけです。 loading=\\"lazy\\"やdecoding=\\"async\\"は最初に表示される場所（ファーストビュー）では使えないので、属性を付与するか否かは引数でコントロールします。 出力結果。 これはあくまで例なので、もしこの関数を使う場合は適宜引数などを調整してみてください。 おまけ・関数を連想配列に格納してまとめておく 関数は連想配列（オブジェクト）にまとめておくこともできます。 インクルードすればどこからでも呼び出せます。 まとめ・EJSを使うとブラウザや画像対応の複雑化したコードを簡略化できる 最近はスマホ、タブレット、多様化したブラウザやディスプレイへの画像対応が大変です。 環境に応じて最適化した画像を表示させるのは表示速度にも影響をあたえるのでこういうコードが書けなきゃいけませんよね。 いざコード書いてみたらすごく長いので正直嫌だな-と思ったのがきっかけ pictureタグを関数化したらめっちゃ楽になりました。 おそらく、他の言語でも応用が効くと思います。 この記事がみなさんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry494","title":"concreteCMS(コンクリ)でレンサバのWAFが原因で一部機能がつかえなくなった話","date":"2022-03-31","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2022/entry494.webp","description":"久々のコンクリネタです。先日、管理画面からブロック追加などの特定の機能が動かなくなったconcrete5に遭遇しました。サーバーはさくらのレンタルサーバー。おそらく私のように苦悶して、原因を探っている人への救いになればと思いこの記事を書くことにしました。","tags":["concrete5"],"body":"久々のコンクリネタです。先日、管理画面からブロック追加などの特定の機能が動かなくなったconcrete5に遭遇しました。サーバーはさくらのレンタルサーバー。おそらく私のように苦悶して、原因を探っている人への救いになればと思いこの記事を書くことにしました。 https://www.concretecms.com/ ご存知かもしれませんが、concrete5 は名称が変わり concreteCMS になりました。 今はほとんどのCMSで見かけるようになったブロック型CMSの先駆けです。 フォーラムのみなさんも優しくて、質問したらすぐ答えがかえってきたり私をエンジニアとしてそだててくれたのもこのCMSのおかげ!! 最新はバージョン9らしいのでまた記事にまとめようと思います。 管理画面に入ると特定のファイルが４０３エラー 管理画面に入ると、更新やブロック追加ができなくなっていました。 Chromeの開発者ツールで確認するとコアにある一部のJSが403エラー（net::ERR_ABORTED 403・アクセス拒否）に。 /concrete/以下にあるファイルにはなぜかちゃんとアクセスできている。 これが原因で管理画面のJSの一部が使えなくなっていたことが発覚。 コンクリの管理画面はJSで動いてますからね。たまにテーマの作り方が悪くても管理画面側とテーマ側のJSがコンフリクトして動かなくなることもありますしね。 なのにプリティURLの設定を外すともとに戻るという不可思議な現象が起こっていました。 ズバリ、原因はWAFだった 403なのでリライト系の設定ミスでおかしくなっていると当たりをつけましたが、結局はWAF（サーバー側のファイヤーウォール）が原因でした。 だいたいこの手の問題が起こるときは.htaccessあたりかと思い、ローカルに同じ環境を再現したã

1®ã«ç„¡äº‹ã«å‹•ãã€‚ さらに同じサーバーでドメインが違う場所に複製したテスト環境も同様に。 ふと思い出しました。 さくらのレンタルサーバーは私も昔使っていて、諸々クセがあったことを。 サーバーパネル内でドメインごとの設定を徹底的に比較し、やっと見つけました。 犯人はWAF、お前だったのか！ 最近はWordPress案件が多く、さくらサーバーからも遠のいていたので原因を突き止めるのに約1日かかりました。。。。 WordPressもブロックエディタになったしね。 WAFを止めたら問題なく動くように。 まとめ。部分的に403エラーが出たらWAFも疑え こういうWAFが悪さするエラーは他のレンタルサーバーでも結構あるみたいです（hetemlとか）。 他にも、.htaccessなどの記述ミスで起こることもあるので複合的に検証しないといけませんが、もし同じような現象があったら可能性の一つとして疑ってみてください。 良い勉強になりました。 今回はコンクリ用のDocker環境を作ったりもしたので、収穫も多かったです。 また、それに関しても記事にしようと思います！ concreteCMS の情報は少ないのでもっと発信していかなければ！ この記事が、みなさんのコンクリライフの一助になると幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry493","title":"Shopify CLI で GitHub と連携し本番環境にデプロイ・前半","date":"2022-03-18","modifiedDate":"2022-03-30","category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2022/entry493.webp","description":"最近 Shopify を触ることがあったã

1®ã§ã€ç’°å¢ƒæ§‹ç¯‰ã®æ–¹æ³•ã¨ãƒ†ãƒ¼ãƒžã®ä½œã‚Šæ–¹ã‚’メモします。このブログではShopify環境構築とベーシックテーマをインストールし修正できるまでを目標に記事にまとめます。","tags":["Shopify","git"],"body":"前提条件 VS Code をインストールしてある GitHub アカウントを持っている Git 操作ができる この記事ではMacのみの開発方法を紹介しています。 Shopify CLI をインストール Shopify CLI をインストールします。公式に書いてあるとおりインストールしますが、私はインストール系のものは Homebrew で一元管理しているので、今回は Homebrew でのインストール方法をご紹介します。 Homebrewでインストール。 https://shopify.dev/apps/tools/cli/installation バージョン確認。 Sshopify は Ruby で動いています。 ベースとなる Theme Dawn を落として git リポジトリと連携しておく Dawn は Shopify の基本の Theme です。 今回はこの Dawn をもとにThemeを作成していきます。 テーマのインストールされたディレクトリに移動します。 GitHub でリポジトリを作って、リモートリポジトリと連携しておきます。 対象のストアにログインします。 Shopify 管理画面左メニューからオンラインストアに移動します。テーマライブラリーからgithub と連携しておきます。 ユーザーアカウント（Organizationでも大丈夫）、リポジトリ、ブランチを選んでおきます。 shopify theme pullで設定した先程セットしたテーマ名を選びます。 開発環境を起動。 開発環境でサイトが確認できるようになりました。 サイトは開発モードなのでURLを踏んだ直後、パスワードを促される可能性があります。 パスワードはオンラインストア、各種設定、パスワード保護から確認できます。 Shopfy の基本のディレクトリ構造 | ディレクトリ | 内容 | | ------------------ | ---------------------------------------------------- | | assets | CSSやJAS画像など | | config | テーマ全体や管理画面で設定を保存するjsonデータを格納 | | layout | レイアウトに関するhtmlなど | | locales | 言語に関する設定 | | sections | 各ページの大きめの共通パーツ | | snippets | 各ページの小さめの共通パーツ | | templates | 各ページのテンプレート | 環境構築に不便なM1チップ。5ヶ月くらい前は shopify theme serve が動かないとかあったみたいですが問題なく動きました。 私の記事はだいたい公開備忘録です。案件で過去やったことを守秘義務内でまとめてます。 https://tokyofreelance.jp/shopifythemeselfmade/#outline11 -->","noindex":true},{"slug":"entry492","title":"python でスクレイピングして検索上位100件をCVS出力","date":"2022-03-10","modifiedDate":"2022-03-30","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2022/entry492.webp","description":"仕事を自動化して効率化したい！それだけの思いで、1週間前くらいからpythonの勉強始めました。今回はseleniumを使って検索上位100件のデータををcsvに出力するプログラムを作ってみたので忘れないうちにメモっておきます。","tags":["Python"],"body":"この記事は古いので、こちらの新しい記事を参考にしてください。 仕事を自動化して効率化したい！ それだけの思いで、1週間前くらいからpythonの勉強始めました。今回はseleniumを使って検索上位100件のデータをcsvに出力するプログラムを作ってみたので忘れないうちにメモっておきます。 前提条件です。 今回はインストールとかの説明を省きます。ちなみにパソコン買ã

1„替えたばかり。M1チップで検証しました。 homebrew経由でインストールしました。バージョンは以下コマンドで確認できます。 windowsは多少コマンドが違うのでご注意ください。 自分のマシーンにインストールしたpythonのバージョンはPython 3.10.4です。 Macだと以下コマンドだとpythonの2系しか操作できないので必ずコマンドにpython3 ...という感じで。 仮想環境を作る コマンドでpythonを書くファイル©を格納するルートディレクトリに移動しておきます。 グローバルにあれこれ入れたくないので仮想環境を作ります。 pythonには仮想環境を作るコマンドが用意されています。コマンドを実行します。 .envディレクトリが自動生成されます。 仮想環境を実行する 仮想環境を立ち上げます。 コマンドを実行をすると、頭に(.env)が付きます。 仮想環境をディアクティベートする（落とす）ときは以下コマンド。 検索結果を python で取得する web-scraping.pyファイルを追加します。 python のファイルの拡張子は.pyになります。 今回は selenium を使って Chrome を操作し特定のキーワードを検索、検索結果を取得します。selenium は python のライブラリの一つでブラウザを操作できます。 ライブラリ selenium をインストール selenium を仮想環境にインストールします。 以下コマンドでインストールされたパッケージが確認できます。 アンインストールしたい場合。 webdriver で Chrome を操作する ライブラリにはたいてい複数のモジュールが用意されているので、必要に応じて呼び出して使います。 モジュールはライブラリをインストールしなくても使えるものもあります。 selenium から webdriver(モジュール) を import します。今回は webdriver を使ってChromeを操作します。 現在使用しているChromeのバージョンと同じものをDLします。バージョンは Google Chrome を起動して調べることができます。 以下URLよりダウンロードできます。 https://chromedriver.chromium.org/downloads chromedriver は driver ディレクトリに格納しておきます。 まずは webdriver を使って Chrome を起動してみましょう。 以下コマンドで python を実行します。 Chromeが立ち上がります。スリープ時間は5秒なので、5秒後に閉じるはずです。 options でウィンドウサイズなどの設定し、service を使って chromedriver を呼び出します。 各設定はまとめて webdriver に読み込みます。 ブラウザ起動し、閉じます。 変数 interval の値を変えるとスリープ時間を調整できます。あまり短縮しすぎると、処理が追いつかないこともあるので注意です。 モジュール By を追加し、Chromeホーム画面の要素を操作します。 実行。 対話形式でキーワードを入力。 検索できました。 https://www.google.comにアクセスして要素を検証してみると、検索のinputタグのname属性はq。送信ボタンのname属性はbtnKです。同じname属性のボタンが2個あるので2つ目を取得。 chromedriverを使って取得したinputタグ（検索窓）にキーワードを入力、検索ボタンをクリックさせる操作をしています。 100件分の検索結果を取得し、配列（リスト）に格納 pythonでは単純な配列をリスト、連想配列をディクショナリーと呼ぶようです。 検索内容一個一個がクラスgに格納されているの取得し、ループ処理をします。 URLとタイトルを格納したディクショナリをリストに格納します。 タイトルとリンクが取得できたもののみ格納し、リストresultの長さが100になるまで繰り返します。 要素の取得は以前は以下のような記述方法をしていましたが、非推奨となりました。 Byで取得してください。 | セレクター | 記述例 | | -------------- | -------------------------------------------- | | class | driver.findelement(By.CLASSNAME, \\"hoge\\") | | ID | driver.find_element(By.ID, \\"hoge\\") | | name | driver.find_element(By.NAME, \\"hoge\\") | | タグ | driver.findelement(By.TAGNAME, \\"h1\\") | タグやクラスなどは複数ある時、以下のような取得の仕方ができます。 他にã

1‚‚こんな指定ができる。 取得したデータをcsvに格納 取得したデータをcsvに格納します。 csv作成するだけでなく、命名時にタイムスタンプを付与したいので3つのモジュールを読み込みます。 実行するとoutput_1648594514.csvみたいな感じでファイルができます。 以下コードでタイムスタンプが取得できますが、小数点以下が出ちゃうので、 math.floor()で切り捨てます。 いちいちブラウザが開くのは面倒 いちいちブラウザが開くのが鬱陶しいときは、optionsに--headlessを追加します。 pythonは記述方法が簡潔で初心者には敷居が低いかも python書いてみた感想です。 記述方法が簡潔でビギナーでも、とっつきやすい言語だと感じました。 コマンド操作さえ乗り越えられればね！ 今回はスクレイピングをご紹介しましたが、対象サイトや負荷を書けてしまう場合、違法だったりもするので注意しましょう。 Twitterなんかはスクレイピング禁止みたいですしね。 現在は pandas の勉強中です。またブログにしようと思います。 ぜひもっと仕事を自動化し、効率化できる役に立つサンプルをご紹介できたら幸いです。 皆さんのコーディングライフの一助となれば幸いです。最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry491","title":"React と JSON を連携してページを量産する","date":"2022-02-19","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2022/entry491.webp","description":"先日 スプレッドシートをJSONデータ化し、React 側で受け取ってページを量産しました。axios、react-router-domなどの使い方をご紹介します。","tags":["React","JavaScript"],"body":"先日 スプレッドシートをJSONデータ化し、React 側で受け取ってページを量産しました。axios、react-router-domなどの使い方をご紹介します。 前提条件は以下です。 アイテム一覧のようなページを一度に量産する ページ情報のスプシが準備できる レンサバが準備できる npmコマンドが使える JSが分かりある程度Reactを使ったことがある スプシの準備 先にスプシを準備します。 以下のような構成でセルに情報を入力していきます。 | id | title | img01 | description | | --- | ---------- | --------------- | ---------------- | | 1 | アイテム01 | https://....png | アイテム01の情報 | データができたら、GASでデータをJSON化します。その後、デプロイしてURLを取得します。 取得したURLを叩いてブラウザで表示すると、以下のような値が返ってきたらOK。JSONデータ作成の下準備終了です。 GASツールの開き方、デプロイやURLの取得方法に関してはこちらに

1詳しく記載してあるので参考にしてください。 React の開発環境を構築 Reactのドキュメントを参考に開発環境を作成します。 React リファレンス概要 インストールが終わったら、使えるコマンドが表示されます。 今回はstartとbuildの2個のコマンドを使って進めていきます。 my-app/というディレクトリーが作成されるので、そのディレクトリをVS Codeなどのエディターで開きます。 開発環境を走らせる Reactで開発できる状態にします。タスクランナーでコンパイル・ライブリロードしながら開発できるようになります。 localhost:3000にアクセスすると、以下のようなページが表示されます。 タスクランナーを止めたい時はCtrl+C（Mac）。 プロダクション（本番用）データを出力 開発したデータを本番用データにコンパイルするコマンドはこちら。 まずはベースのテンプレを作成 srcディレクトリ配下にあるApp.jsを編集します。 今回はindex.cssを編集してリセットCSSとしました。 コリスさんがリセットCSSをまとめてるので必要に応じてお好みのものを使ってください。 2022年、現在の環境に適したCSSリセットのまとめ App.jsを書き換えます。とりあえずheaderとfooterだけ編集しました。後でheaderとfooterの間に入るコンテンツを入れていきます。 ついでにアロー関数で書き直しちゃいます。 CSSも編集。 簡易的ですがヘッダーとフッター完成。 axios でJSONデータ取得 まずは axios のインストールします。 App.jsを編集して、axios でJSONデータを取得します。 useState と useEffect も使ってJSONデータを取得します。 デバッグしてデータが取得できたか確認できたので、次はこのデータを加工して表示します。 このデータはアイテム一覧と詳細、両方で使います。 一覧とアイテム詳細ページ作成 一覧とアイテムのパーツを出力する、コンポーネント用のファイルを作ります。 react-router-dom でページのパスを設定 react-router-dom でページのパスを設定します。 一覧ページ（/（ルートディレクトリ）） アイテム詳細ページ（/items/id） react-router-dom をインストールします。 react-router-dom は現時点最新版のv6.2.1をインストールしました。巷に出回っているものとは記述方法が変わってます。 List.jsに仮のコードを追加して、表示されるか確かめます。 propを使わずに取得したJSONデータを子コンポーネントに渡す createContextを使って、親（App）=>

1子（List）コンポーネントに値を渡します。 createContextを使うと、データの受け渡しが超簡単です。 子コンポーネントで値を受け取り、値が取得できているか確認します。 データが取得できていることを確認できたら、出力してみましょう！ わーい、ちょいキモだけど出力できましたー。 ポイントはLinkコンポーネントを呼び出して、遷移先を設定しているところです。 では次は詳細ページのベースを作ります。 各ページidをパラメーターとして受け取る Item.jsを編集してアイテム詳細を表示できるようにします。 App.jsにList.js同様、ルーティングを追加します。 パラメーターはreact-router-domのuseParamsを利用して取得可能です。 List.js同様、useContextで親コンポーネントからJSONデータを取得します。 useParamsを使ってパラメーターを取得し、JSONデータと一致するものだけ取り出して、ページに表示します。 出力できました！わーい。 すべてのCSSです。 titleタグなどをreact-helmetで設定する react-helmetを使ってSEO詳細情報を追加します。 react-helmetをインストールします。 SEO情報をHelmetコンポーネント内に格納します。 同様にList.jsにもHelmetコンポーネントを追加すれば、ヘッダー内のtitleや説明を自由に編集できるようになります。 実はタイトルや説明はpublicディレクトリにあるindex.htmlへ直書きされています。 titleタグや説明のタグなどは不要なので削除しましょう。 レンタルサーバーなどに直にアップする サーバーに直にアップ用のファイルを出力します。 buildディレクトリが生成されます。 buildが終わると、正しく動いてるか確認するためにserveで調べるようにすすめられます。 入ってない場合はインストールします。その他の方法で確認できるようであれば無理にインストールする必要はありません。 以下コマンドでまずは表示が大丈夫か確認します。 buildディレクトリの中身をサーバーにアップします。 ファビコンなど変更が必要なものを適宜変更します。 URLを直接叩くとアクセスできない？.htaccessの設定を忘れずに buildディレクトリの中身だけをUpするだけでは、トップページを経由しないと他のページに直接アクセスできなくなります。 React-router-domでページがある風になっているものの、物理的にはindex.htmlしかありません。 なので.htaccessで必ずindex.htmlを経由するように設定します。 これでURLを直接叩いても他のページにアクセスできるようになります。 おまけ404ページ追加 404ページの追加方法です。Switchを使う方法が数多く紹介されていますが、新しいreact-router-domではいたってシンプルな方法で追加できます。 App.jsに404用の設定を追加します。 NotFound.jsのコードはこんな感じ。 まとめ・モジュールを駆使すればページ量産は難しくない 今回、モジュールやGoogleのサービスを利用して省エネでページが量産できるものを作ってみましたが思った以上に簡単でした。案件とリソースを照らし合わせた時、いかにリソースを節約していいプロダクトを作れるかって重要だなぁと思いつつ、今後の自分の糧となるように記事にまとめましたが。。。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry490","title":"instagram feed apiをWordPressで自作！axios不要なセキュアブロック構築法","date":"2022-01-16","modifiedDate":"2026-07-07","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbn

1ail/2022/entry490.webp","description":"当時、手探りで調べながら作った「instagram api wordpress」連携ブロック。AIが進化した今だからこそ、セキュリティに徹底的にこだわり、よりセキュアなコードへまるっと差し替えました！instagram react開発でのハマりポイントも交えて、最新の自作手順を公開します。","tags":["WordPress","React","ブロックエディタ"],"body":"インスタ一覧をサクッと表示できるカスタムブロックを、@wordpress/scriptsを活用して作成しました！ ビジネストークンやIDは大切！WordPressだからこそ、管理画面から守れるデータもあるんですよ。この利点を利用してこの度大幅にリライトし、セキュリティ第一に考えた最新のコードへとまるっと差し替えました。より安全で洗練された設計に生まれ変わった実装手順を詳しくお届けします。 サンプルコードも用意しているので、ぜひ自作ブロック開発の参考にしてみてください！ この記事でわかること 管理画面で一括管理するセキュアな設計思想 axios不要！WordPress標準機能で繋ぐ安全なデータフロー エディター側を驚くほどシンプルにする効率的な実装手順 事前準備：Meta APIを叩くためのベース！Instagram Graph APIの無期限トークン取得 セキュアな自作ブロックを構築する前に、開発の土台となる下準備をサクッと済ませておきましょう。必要なステップは以下の3つです。 1. pnpm によるモダンなWordPressブロック開発環境の構築（ package.json の用意と @wordpress/scripts のインストール） 2. Instagram Graph APIのアクセストークン（無期限） と InstagramビジネスアカウントID の取得 3. ローカルマシーンへの WordPress仮想環境 の立ち上げ Graph APIのアクセストークンやビジネスアカウントIDの具体的な取得手順については、次の個別記事で詳しく解説しています。まだ用意できていない方は、まずこちらを参考にトークンを取得しておいてください。 また、ローカルマシーンに構築するWordPressの開発環境は、「Local」などの手軽なGUIツールでも全く問題ありませんが、本格的なチーム開発やCI/CDを見据えるなら、Dockerでガッチリとコンテナ環境を組むのが圧倒的におすすめです。Dockerでの爆速構築手順は、こちらの記事にすべてまとめてあります。 セキュアにフィードを取得する「instagram api wordpress」自作ブロックの設計思想 プラグインを使わずにInstagramのフィードをWordPress（Gutenberg）の自作ブロックとして実装する場合、最優先すべきはセキュリティと安定性。特に2024年末のAPI仕様変更以降、従来のようなフロントエンド主導の手法は通用しなくなりました。 開発現場で通用する堅牢なカスタムブロックを構築するために、バックエンドとフロントエンドの正しい連携思想を解説します。 なぜフロントエンド（instagram react等）から直接APIを叩いてはいけないのか？ ブラウザ側（JavaScript）で動作するAxiosなどを用いてInstagram Graph APIを直接叩く設計には、セキュリティリスクがあります。 APIリクエストに必要なアクセストークンやApp Secretといった機密情報が、ブラウザのデベロッパーツールなどを通じて第三者に完全に丸見えになってしまうためです。悪意のある第三者にトークンを奪取された場合、アカウントの乗っ取りやAPIの不正利用、最悪のケースでは Metaの開発者アカウント全体の権限を乗っ取られる危険性 すらあります。 また、アクセス数（PV）の面でも大きな問題が起こります。 ブラウザから直接APIを叩く設計だと、ページに読者が1人来るたびに、その読者のブラウザから毎回Meta（Instagram）のサーバーへ「画像ちょうだい！」と直接リクエストを送ることになります。 一見すると普通に動くように思えますが、実はMeta側には「1時間あたりにリクエストを受け付ける回数の上限（レートリミット）」が厳格に決まっています。SNSで記事が少しバズったりアクセスが集中したりした瞬間に、この上限へ一気に達してしまいます。 上限を超えるとMeta側から通信を遮断されるため、サイト上のインスタ画面がすべて真っ白になり、フィードが一切表示されないバグが頻繁に発生してしまいます。 答えはシンプル。WP REST API（PHP）を中継させるセキュアなデータフロー これらのリスクをなくすために、APIリクエストを安全なサーバーサイド（PHP）に完全に一任する設計をするのがベストプラクティスです。 1. トークンの隠蔽: アクセストークンはWordPressのデータベース（wp_options 表など）に暗号化、または安全な形で保存し、PHP側だけで管理します。 2. カスタムエンドポイントの作成: wp-json/my-insta/v1/posts のような、ブログ独自の安全なWP REST APIのルート（エンドポイント）をPHP側として自作します。 3. サーバー間通信: ユーザーがページを開いたとき、Reactï¼

1ˆGutenberg）側はMetaではなく、自作したWordPressのカスタムエンドポイントへ通信をおこないます。リクエストを受けたPHPが、サーバーサイドから安全にInstagram Graph APIを叩いてデータを取得します。 4. 安全なデータ返却: PHP側で受け取ったデータから、フロントエンドの表示に必要な必要最低限の要素（画像URLやリンクなど）だけを抽出し、クリーンなJSONデータとしてReact側に返却します。 テーマのsrcディレクトリに自作のInstagramカスタムブロックを組み込む手順 今回はテーマのソース管理用ディレクトリ（src）の中に開発環境を配置し、ビルドコマンドの出力先を直接プラグインのディレクトリへと繋ぐ設計をとります。テーマ側の共通の資産やツールチェーンの仕組みをそのまま流用しつつ、最終的には管理画面からインストール・有効化ができる独立したプラグインとして切り離せるため、開発過程がラクチンです。 既存のテーマ内に、以下のような構造でInstagramブロック用のスクリプトと、データを制御するPHPファイルを配置します。 Gutenberg開発に必要なツールチェーンを準備するため、以下のコマンドで pnpm の初期化と @wordpress/scripts のインストールをおこないます。 環境が整ったら、コマンド一発で正確なプラグインディレクトリへとビルドが走るよう、 package.json の scripts にあらかじめ専用のコマンドを仕込んでおきます。 次のような、phpファイルを src/my-insta-gallery に格納したらプラグインとして管理画面からインストールできます。 自作プラグインの基本構成とセキュリティ：ビジネスIDとトークンの管理方法 ブロックの利便性を維持したまま、機密情報である アクセストークン の漏洩リスクを完全にシャットアウトするためのセキュアな設計を導入します。 これまではフロントエンド（JavaScript側）に直接トークンを記述したり、各投稿のブロック内に入力欄を設けてデータベースへ保存したりする手法が一般的でしたが、この方法では 公開画面のソースコードやREST APIの応答からトークンが第三者に盗まれる 致命的な脆弱性（セキュリティホール） につながります。 そこで、サイト内で共通して使用する「アクセストークン」のみを、WordPressの管理画面の裏側（PHP側）の安全なデータベース（wp_options テーブル）に一元管理する専用の設定画面をプラグイン内に設置します。次のフローで安全に管理します。 React（ブロック側）： ページごとに切り替えたい「ビジネスアカウントID」と「表示件数」のパラメータだけを送信する。 PHP（サーバー側）： 受信したIDに対して、裏側で安全に保持している「アクセストークン」をガチャンと合体させ、MetaのAPIへ中継リクエストを送る。 管理画面の左側にはメニュー。 アカウントID＆アクセストークンを登録するためのUIが完成しました。 【PHP編】axios不要！WP REST APIにカスタムエンドポイントを作成してInstagramデータを取得 次はGutenbergブロック（React）からの非同期リクエストを受け取り、裏側で通信を中継するための 専用の中継基地（カスタムエンドポイント） をPHP側で作ります。 ブラウザから直接MetaのAPIを叩くのではなく、WordPressのサーバー側から wpremoteget() を使って安全にInstagram Graph APIと通信させることで、トークンが表側に出るのを完全に防ぎます。 また、アクセス集中によってMetaのAPI利用制限（レートリミット）に引っかかるのを防ぐため、取得したデータをWordPressの set_transient() を使って一定時間（4時間など）サーバー側にキャッシュする仕組みもここに組み込みます。読者がアクセスするたびに通信が発生せず、ページの表示速度も高速化します。 ブロックエディターでのNonce検証が不要な理由 エディター側のapiFetchは、起動時に発行された管理画面用のNonceを自動でリクエストヘッダーï¼

1ˆX-WP-Nonce）に付与します。さらに、WordPressコアのREST APIがそのヘッダーを裏で自動検証する仕組みになっているため、自前で検証コードを書かなくても安全性が標準で担保されます。 【React編】Gutenbergエディター側の設定UIと（@wordpress/api-fetch）によるデータ呼び出し PHP側に作った エンドポイント（/my-insta/v1/posts） へ、エディター画面（React）から非同期でデータをリクエストする処理を実装。 WordPress標準のパッケージである @wordpress/api-fetch を使用することで、面倒なドメインの指定や認証用ヘッダーの処理をすべてWordPress側にお任せした状態で、安全かつシンプルに自作APIからデータを引っ張ってくることができます。 block.json ファイルを src/my-insta-gallery に格納します。 block.json をプラグインのコアファイルである my-insta-gallery.php にブロック設定を読み込みます。 これで投稿画面からブロックが読み込めるようになります。 お待たせしました。やっとindex.jsのコードを追加していきます。 表示数（count） のを変更するたびに、Reactの useEffect がそれを検知して最新のフィードを自動で再取得（プレビュー表示）します。 管理画面から、表示したいインスタの画像をコントロールできるようになりました。 インスタのトークンとビジネスIDの登録がない場合例外処理を入れているので次のように表示されます。 サイト表側（フロントエンド）へのセキュアなフィード出力：UI側はPHPで処理してシンプル＆高速化 UI側はPHP側で処理しているので、こんなにシンプルになりました。 まとめ：安全で堅牢なInstagramカスタムブロック運用のポイント 当時はまだブロックエディターのことがよくわかってなくて、手探りで調べながら記事を書きました。 少なからず私の記事を見てくれるひとがいるのでリライトしました。 AIが進化した現在だからこそ、セキュリティにしっかり神経を使ってよりセキュアなコードにまるっと差し替えました。 コードが動くかも検証しながら進めたので、めちゃ時間がかかりました笑 何はともあれ、この記事が皆さんのコーディングライフの一助となれば幸いです。 今回も最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry489","title":"Gatsbyブログサイト移行物語〜記事内で独自タグ（コンポーネント）を使えるようにする〜","date":"2022-01-14","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"Gatsbyでは記事はMarkdownで書くのですが、関連記事のカードなどをカッコよく挿入したくなります。以前は無理やりHTMLで書いてましたが、すんごい面倒だったので独自のコンポーネント（WordPressでいうショートコードみたいなもの）を追加できるようにしました。今回は実装方法のご紹介です。","tags":["Gatsby","React"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 Gatsbyでは記事はMarkdownで書くのですが、関連記事のカードなどをカッコよく挿入したくなります。以前は無理やりHTMLで書いてましたが、すんごい面倒だったので独自のコンポーネント（WordPressでいうショートコードみたいなもの）を追加できるようにしました。今回は実装方法のご紹介です。 今までのGatsbyの記事と注意点 現在ここまで記載しています。制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。 1. インストールからNetlifyデプロイまで 2. ヘッダーとフッターを追加する 3. 投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加 4. ブログ記事、カテゴリ、タグ一覧の出力 5. プラグインを利用して目次出力 6. プラグインナシで一覧にページネーション実装 7. 個別ページテンプレート作成 8. プラグインHelmetでSEO調整 9. CSSコンポーネントでオリジナルページを作ろう！！ 10. 関連記事一覧出力 11. タグクラウドコンポーネントを作成する 12. パンくずリストを追加する 13. 記事内で独自タグ（コンポーネント）を使えるようにする（←イマココ） v5へのアップグレード方法はこちら。 このシリーズではテーマGatsby Starter Blogを改造します この記事は一番メジャーなテンプレート、 Gatsby Starter Blog を改造しています。同じテーマでないと動かない可能性があります。 事前準備 今回のファイルとディレクトリ構成です。ディレクトリcomponents内にblog-partsディレクトリを作っておきます。コンポーネント用ファイルは後ほど追加します。 タグの内容を変えるrehype-reactを追加する rehypeReact で Markdown から変換された HTML に手を加えることができます。 記事でも使えるリンクカードコンポーネントを作る 記事リンクを表示させるためのコンポーネントを作成します。作ったコンポーネントはもちろん記事以外のテンプレートでも読み込めます。 当サイトではこんな感じで関連記事を表示させるために使っています。 link-card.jsというリンクカード用コンポーネントを作りblog-partsディレクトリに格納しておきます。 まず、è¨

1˜äº‹ãŒã‚ã§ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆãŒå‡ºåŠ›ã§ãã‚‹ã‹ç¢ºèªã—たいので、link-card.jsに最小限の記述で出力できるようにしておきます。 コンポーネントを取り込めるようにする blog-post.js側で出力できるか確認します。rehype-reactとLinkCardコンポーネントをimportします。 この場合キーであるcardがタグとして認識されます。 new rehypeReactのコードはconst BlogPostTemplate ~直前に書いてください。 デフォのスターターキットではこんな感じのコードになってると思うのですが（多分）、 この「Gatsbyブログサイト移行物語」は独自のスタイルを当てるためコンポーネントを作っていますので、こちらを使って説明します。 dangerouslySetInnerHTML={{ html: post.html }}を先ほどCardLinkを格納したrenderAstに置き換えます。 mdファイル側にコードを書いてみましょう。必ず閉じタグが必要です。 出力できました！！ 出力されたコードを見ると悲惨なことに。。。 gatsby-remark-component でコンポーネントの親タグをpではなくdivに gatsby-remark-component でコンポーネントの親タグをpではなくdivに変えます。 gatsby-remark-componentはgatsby-transformer-remarkの子プラグインです。 コマンドでインストールします。 gatsby-remark-componentはgatsby-transformer-remarkの子プラグインなのでgatsby-config.js内に以下のように読み込みます。 中にはpタグに入れてもいいものもあると思うので、その場合は以下のようにdivに変えるコンポーネントを限定します。 オプションを指定してしまうと、指定していないものはすべてpタグでラップされます。 リンクカードのコンポーネントの中身をコーディングする mdのコードにプロパティを追加します。 GraghQLで fields の slug が一致するものを取得します。slug は記事のドメインを除いたパスです。 link-card.jsの内容を大幅に書き換えます。 出力結果ã

1¯ä»¥ä¸‹ã¨ãªã‚Šã¾ã™ã€‚ サムネイルも出力してスタイルを付与 サムネイルも出力します。 link-card.jsに新しいコンポーネントthumbnail.jsを新規追加します。 thumbnail.jsの画像を出力するコードです。サムネイル画像がないときはダミーの thumbnail/dummy.png を出力します。 link-card.jsにThunmbnailコンポーネントを読み込みます。 画像出力できました。 styled-components でスタイルを当てます。styled-componentsをインストールしていない方は下記コマンドでインストールします、 styled-componentsをインポートしてリンクカードを装飾します。 仕上がりイメージです。 今回はCSSをあまり書かなかったので質素に仕上がりました。 まとめ・コンポーネントをマークダウンでも追加できたらブログが華やかになった サムネイル付きリンクカードだとテキストリンクより目立つし、クリックしたい気持ちになりますよね？ 実はこのメッセージバルーンもコンポーネントです！！ コンポーネントを読み込むとページが少し重くなるデメリットもありますが、個人的には書いているとモチベの上がる方がやる気出ます。 この記事がみなさんのコーディングライフの一助となると幸いです。 最後までお読みいただきあありがとうございました。","noindex":false},{"slug":"entry488","title":"WordPressの記事一覧ブロック（Gutenberg）を自作する","date":"2022-01-12","modifiedDate":"2023-02-22","category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2022/entry488.webp","description":"WordPressのテーマに組み込むブロックを作ってみました。今回作ったのはGutenberg用の一覧出力ブロックです。ブロック用に環境構築し、WordPress管理画面（エディター側）は@wordpress/scriptsを使ってReactでREST APIでカテゴリーを取得したりしながら構築、フロント部分はPHPで出力してみました。","tags":["WordPress","React","ブロックエディタ"],"body":"WordPressのテーマに組み込むブロックを作ってみました。 今回作ったのはGutenberg用の一覧出力ブロックです。ブロック用に環境構築し、WordPress管理画面（エディター側）は@wordpress/scriptsを使ってReactでREST APIでカテゴリーを取得したりしながら構築、フロント部分はPHPで出力してみました。 とーっても長いので目次を利用してすっ飛ばして読んでください。 Gutenbergのブロックをテーマに組み込みます たくさん探しましたが、巷では紹介されているのがプラグインとしてカスタムブロックを紹介されていたので今回はテーマに組み込むためのブロックとして紹介します。 前提条件 WordPressでテーマやプラグインを構築したことがある React や JS は見よう見まねでもわかる npm、Webpack、gulpなんとなくわかる 環境を構築しよう！ まずはWorPress環境を構築しましょう！ WordPressはLocalなどのお手軽ツールでもいいのですが、Dockerでも作れます。 プレーンなコードを書いても実装できましたが、Reactを書くときイマイチだったので、今回は@wordpress/scriptsを使って環境構築しました。 ちなみに@wordpress/scriptsはWebpackベースです。 テーマ内にブロックを実装するためのディレクトリを作ります。 テーマを格納するディレクトリnew-blockを自作テーマ内に作成し、ターミナルを開いてnew-blockまで移動します。 package.json作成 このディレクトリに@wordpress/scriptsをインストールします。 WordPress開発用に調整された再利用可能なスクリプトのコレクションです。便宜上、このパッケージで提供されるすべてのツールには、統合された推奨構成が付属しています。 @wordpress/scripts | WordPress.org インストール後にn

1ode_modules/が追加されます。 nodeのバージョンが17.xの場合インストールでWebpackとの相性でコケるかもです。 その際は以下コマンドで乗り切れます。次バージョンで解消されるはずです。 上記でうまく動かない場合は、前述のコマンド後、node_modules ディレクトリを削除、以下コマンド後 npm install or npm i を実行してみてください。 mini-css-extract-pluginでこける場合 下記のようなエラーが出た場合はmini-css-extract-pluginのバージョンが足りてないことがあるので、 バージョン上げてあげてください。 ブロックをスクリプトで出力する ブロックをスクリプトで出力するためには、いくつか設定し直す必要があります。 package.json に npm スクリプトを登録する インストールできたらWordPress開発用のnpmスクリプトを走らせるためのコード（script）を追記します。 開発用コードです。デフォでは以下のように案内していることも多いですが スクリプトは書き換えることも可能です。 ファイルが登録できたら、srcディレクトリを作りindex.jsを格納しましょう。 今回は、ファイルがバンドルされて出力されるところまで確認したいだけなのでindex.jsには以下のようなコードを書いておきます。 そして、コマンド実行してみましょう。build以下ディレクトリが作成されます。 ターゲットと出力するディレクトリを変えたい時 ターゲットと出力したいフォルダを変えたいときは以下のように書けます。開発モードの場合。 製品（リリース）モードの場合。 ブロックをプロダクション用に出力する場合 本番用の場合はコードを圧縮します。 package.jsonにスクリプトを追加しておきます。 以下コマンドで、コードは圧縮されます。 自作ブロックをテーマの一部として funcions.php に読み込む ブロックのファイルをfuncions.phpに読み込みます。 公式ではフックに initを使ってますが、enqueueblockeditorassets はブロックエディターが読み込まれる際に呼び出され、wpenqueue_script で指定したJSファイルをエンキューできます。 どこでもいいのでエディター画面でリロードし、開発者ツールなどでデバッグ内容が取得できているか確認します。 index.asset.phpにはブロック用のJSを使うために必要な情報が自動で出力されます。 現在はろくにコードを書いてないのでdependenciesは空ですが、出力した情報を取り出して使います。 エディター側のブロック出力 src/index.jsを書き換えてみます。 ポイントはブロック名が他のものと被らないよう、ユニークな名前をつけるよう心がけてください。 エディターにアイコンとラベルを確認できました。 実際動作確認をしてみます。まずは静的ですが、入力できました。 アイコンを変えたいときは、こちらを参考にしてください。 Dashicons アイコン名がdashicons-list-viewであれば dashicons- を取り除いて使えばOKです。 記事一覧をGutenberg側から登録するコードを書く 今回は、いくつかのコンポーネントを使って作成します。 条件は以下です。 1ページに表示するのは最大30ページ カテゴリーごとでも絞り込める 出力できる記事数の出力制限を設定 コードを大幅に書き換えます。 出力する記事数のデフォルトは6とします。 InspectorControlsを使って、サイドバーからページ数やカテゴリーを操作できるようにします。 PanelBody、NumberControlを使って見た目を整えます。 エディターのサイドバーと記事入力部分はこんな仕上がりになりました。 挿入されたブロックは動的に値が変化します。 少し解説です。blockから動的に値を設定するために attributes を設定する必要があります。 デフォ値も設定しておきます。 type（型）は以下から選択可能です。 | 値 | 意味 | | -------------------------- | ----------------------------- | | null | 値なし | | boolean | ブール、真偽値(true or false) | | object | オブジェクト型 | | array | 配列 | | string | 文字列 | | integer | 9桁または10桁の精度の整数 | | number (same as integer) | integerと一緒 | 値はセレクトボックスを通すと型がstring（文字列）に変わるので、perseInt で number（整数）に戻しています。型が一致しないと保存できないので注意です。 NumberControl は、数字入力専用のコンポーネントです。ここではざっくりしか紹介してないので、プロパティの使い方は Block Editor Handbook を見てみてください。 NumberControl 値がエディター側で保存できるか確認しておきましょう。 @wordpress/api-fetchを使ってカテゴリーを取得して絞り込めるようにする @wordpress/api-fetchを使ってカテゴリー一覧を取得します。 apiFetchを呼び出し、REST APIを利用してカテゴリー一覧を取得できるようにします。 取得した値を必要なものだけcategoriesにSelectControlのoptionに合ったキーの配列にして格納します。 出力結果ã

1¯ã“ちら。 カテゴリーはコンポーネントSelectControlを使ってセレクトボックスを出力します。 SelectControl は、セレクトボックス用のコンポーネントです。ここではざっくりしか紹介してないので、プロパティの使い方は Block Editor Handbook を見てみてください。 SelectControl index.js すべてのコード ここまでのすべてのコードです。 表面サイト側の出力を実装 今度はサイトの表側の実装です。 本来であればエディター側のブロック出力で書いたsaveのところが表面に出力されるべき箇所なのですが、今回はPHPで出力しますので削除しました。 functions.phpに記事一覧を出力するコードを書く index.jsで作成した mybloc/list-block の値を受け取ります。 wpparseargsはデフォルト値を定義しておける関数です。 こちらが一覧記事を出力するすべてのコードです。 cssは入っていないので、こんな感じに仕上がりました。 まとめ・Gutenbergのブロックエディタで一覧を作るためにはReactに慣れておいた方が無難 今回ブロックを作って思ったのが、Reactに慣れておくと作るのが楽だと思いました。 いろんな作り方があると思いますが、今回は初学者でもできそうな感じで実装してみました。 プラグイン無し、ブロックエディタでの文字装飾ボタンの追加方法を紹介しています！ この記事がみなさんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry487","title":"Gatsbyブログサイト移行物語~パンくずリストを追加する~","date":"2022-01-04","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"Gatsbyブログにパンくずリストを追加します。今までのコンポーネントの作り方を参考にすればできるのですが、今回はせっかくなので構造化データの一つmicrodataを埋め込みながらの作り方も紹介しようと思います。※ 2021å¹´12月バージョンアップに伴いv4対応してあります。","tags":["React"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 Gatsbyブログにパンくずリストを追加します。今までのコンポーネントの作り方を参考にすればできるのですが、今回はせっかくなので構造化データの一つmicrodataを埋め込みながらの作り方も紹介しようと思います。 ※ 2021å¹´12月バージョンアップに伴いv4対応してあります。 今までのGatsbyの記事と注意点 現在ここまで記載しています。制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。 1. インストールからNetlifyデプロイまで 2. ヘッダーとフッターを追加する 3. 投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加 4. ブログ記事、カテゴリ、タグ一覧の出力 5. プラグインを利用して目次出力 6. プラグインナシで一覧にページネーション実装 7. 個別ページテンプレート作成 8. プラグインHelmetでSEO調整 9. CSSコンポーネントでオリジナルページを作ろう！！ 10. 関連記事一覧出力 11. タグクラウドコンポーネントを作成する 12. パンくずリストを追加する（←イマココ） 13. 記事内で独自タグ（コンポーネント）を使えるようにする v5へのアップグレード方法はこちら。 このシリーズではテーマGatsby Starter Blogを改造します この記事は一番メジャーなテンプレート、 Gatsby Starter Blog を改造しています。同じテーマでないと動かない可能性があります。 プレーンなパンくずリストを作ってみる breadcrumb-list.jsを作成します。 配列を作ります。記事詳細とカテゴリ&タグ一覧は親ページとして記事一覧を追加します。 記事詳細のテンプレートであるblog-post.jsに追加してみます。 パンくずリストにstyled-componentsでスタイルを当てます。インストールしてない方は、プラグインをインストールしておきましょう。 仕上がりはこんなイメージ。 すべてのコードはこちらです。 そのほかのテンプレートにã

1‚‚、を追加しましょう。 親ページがhomeの場合はparentの設定は不要です。 構造化データで検索結果のユーザビリティも向上させたい。microdataってなんぞ？ microdataは構造化データの一種で「ページ内のコンテンツを説明するための、標準化されたデータ形式のこと」を指します。 埋め込めるデータとして ページの作成者 アップロードの日付 商品の金額 お店のオープン曜日や時間など などがあります。 パンくずリストの構造化データを埋め込むメリットとしては、次のように日本語で親ページ名が表示されます。データが埋め込まれてない場合は、ページのディレクトリ名が表示されます。 現在埋め込み方法にはJSON-LD、microdata、RDFa があり、私がよく使うのがJSON-LDです。 ※ 2021å¹´ 1月、data-vocabulary.org マークアップは Google のリッチリザルト機能でサポート終了の公式発表がありました。 以前、JSON-LDでの埋め込み方は「プラグインHelmetでSEO調整」で紹介しました。すでにJSON-LDでの実装している方は、microdataの埋め込む必要はありません。 microdataを出力するためにコードを書き換える HTML（マークアップ言語）を書き慣れている方は、JSON-LDの複雑な入れ子にはパニックになりそうですよね汗 こちらの方が幾分かマシです。 出力結果ã

1¯ã“んな感じ。 まとめ・パンくずリストを実装したら使い勝手が良くなった パンくずリストを実装したら、元いたページに戻りやすくなるのでブログサイトとしても使い勝手が良くなったと思います。 あとは404ページを整えたら本格的に運用できるぐらいの機能は整いました。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry486","title":"Gatsbyブログサイト移行物語~タグクラウドコンポーネントを作成する~","date":"2022-01-03","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"タグクラウドのコンポーネントを作ります。記事一覧があることが前提です。また、今までご紹介した方法でトップページも整えました。※ v4バージョンアップ後に記事です。v4以外ではうまく動かない可能性があります。","tags":["React"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 今回はタグクラウドのコンポーネントを作ります。記事一覧があることが前提です。また、今までご紹介した方法でトップページも整えました。 あとパンくずリストが実装されたらもうブログとして機能しそうです！\\",\\"※ v4バージョンアップ後に記事です。v4以外ではうまく動かない可能性があります。 今までのGatsbyの記事と注意点 現在ここまで記載しています。制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。 1. インストールからNetlifyデプロイまで 2. ヘッダーとフッターを追加する 3. 投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加 4. ブログ記事、カテゴリ、タグ一覧の出力 5. プラグインを利用して目次出力 6. プラグインナシで一覧にページネーション実装 7. 個別ページテンプレート作成 8. プラグインHelmetでSEO調整 9. CSSコンポーネントでオリジナルページを作ろう！！ 10. 関連記事一覧出力 11. タグクラウドコンポーネントを作成する（←イマココ） 12. パンくずリストを追加する 13. 記事内で独自タグ（コンポーネント）を使えるようにする このシリーズではテーマGatsby Starter Blogを改造します この記事は一番メジャーなテンプレート、 Gatsby Starter Blogを改造しています。同じテーマでないと動かない可能性があります。 前提条件 #### タグクラウドとは？ タグクラウドとは、Webサイト上で各項目にメタデータとしてつけられたタグを、一挙に集めて視覚的に表示。 この実装をするためには条件が必要です。 記事詳細のmarkdownファイルのfrontmatterにtagsの設定があること タグごとに一覧が出力できること（ブログ記事、カテゴリ、タグ一覧の出力を参考にしてください） tag cloudを出力する用のファイルを追加 tag-cloud.jsを追加します。 Link、useStaticQuery、graphqlをインポートしておきます。 コンポーネントを読み込んでおきます。 GraghQLで必要なデータを取得しておく 取得したデータをリスト出力するために加工 配列を形成し直します。リスト出力するために、配列を形成します。 こんな感じに形成したい。 なかなか複雑なコードになってしまいました。 1. findで同じ名前のタグがあるか調べ、あれば今あるキー:値の値のã

1¿ã‚’変更 2. 同じ名前のタグがなければ、新規でキー:値をtagsに追加 3. reduceで配列の中身を加工しながら変数tagsに格納 配列操作については以下記事にまとめてます。 HTMLを出力します。 記事数に応じてタグのスタイルを変える せっかくなので、タグの記事数に応じて文字サイズを変えてみます。 クラスを付与します。11以上あれば大きく見せ、3以下であれば小さくします。 styled-componentsでスタイリングする場合はプラグインをインストールしておきましょう。 全体のコードです。 タグクラウドがこんな感じで実装できました。 おまけ・今までのGatsbyの11記事を参考にしつつトップページを整えた Gatsbyでブログサイトを作る記事も11回目。そろそろ放置していたトップページも軽く整えました。 今まで紹介した方法で片付くので、詳しくは紹介しません。 ソースコードはtop-pageにありますので、そちらを参考にしてください。 まとめ・タグクラウドも実装できた 配列操作のオンパレードでなかなか辛かったですがタグクラウドコンポーネントが完成しました！ 次回はパンくずリスト用のコンポーネントを作ります。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry485","title":"【ボランティア】台風で被災したゴミ山の子どもたちに服を配ってきました","date":"2022-01-02","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2022/entry485.webp","description":"「子ども服をセブに送るプロジェクト」！プロジェクトのレポートです。台風で被災したゴミ山の子どもたちに洋服を配布しました。今回もまた、DAREDEMO HEROさんに同行させていただきました。","tags":["セブ島ボランティア体験記","子ども服をセブに送るプロジェクト"],"body":"「子ども服をセブに送るプロジェクト」プロジェクトのレポートです。 台風で被災したゴミ山の子どもたちに洋服を配布しました。\\",\\"今回もまた、DAREDEMO HEROさんに同行させていただきました。 水・食料が足りません！！ 2021å¹´12月16日到来の台風オデット（台風22号）で交通が遮断され、十分、水・食料が貧困層に届かなくなりました。 災害で煽りを食らうのは弱者です。 12/31にDAREDEMO HEROさんゴミ山の人たちに生き延びてもらうために、お米や缶詰などを配るのをお手伝いさせていただきました。 前日には日本人を中心としたボランティアによる炊き出しなどの支援 現在、セブ島日本人会とDAREDEMO HEROがタッグを組んでスラム地区などで支援活動を行なっています。 スラム・イナヤワンのゴミ山へ行く前日・12月30日にカレッタ（墓地スラム）で日本人を中心としたボランティアによる炊き出しなどの支援も行いました。 こちらの支援の様子はYouTube「せぶぴーセブ島なんでもランキング・被災した子どもに食料と愛を届けます【台風22号／ライ復興プロジェクト】」にアップされています。 ゴミ山での支援。みんなで手分けしてお米を分け、配布 大晦日、今回は別のスラム・イナヤワンのゴミ山へ。 年末で人手がなかったので、スラムの住人と手分けしてお米を分けました。スムーズに仕分け終わりました。 台風直撃から2週間。未だ電気も水道も通らない地区が多数存在します。 スラムではそもそもまともに電気・水など通ってませんが、流通が止まることは大打撃です。 この台風で流通はストップし、飲み水など物の価格は高騰しています。 極限に節約して、一ヶ月100ペソ（200円くらい）しか電気ä

1»£ã‚‚払っていない彼らには大ダメージです。 Lynksさんからいただいた洋服を配る お洋服を提供していただいたLynksさん、感謝です。 今回たまたま12月前くらいに支援用の洋服が届き、台風で家財などを失う貧困層の方々を助けることができました。 ダンプサイト（ゴミ山）の子どもたちに洋服を配る セブ島日本人会やDAREDEMO HEROさんによる水と食料の支援もありました。 私も微力ながら配布のお手伝いもさせていただきました。 Lynksさんからいただいたお洋服を一部農村地区へ 山岳地帯の被害も甚大です。 山の農村部は、気温が都心部に比べて肌寒く、着る服がないと凍えるとのこと。 私は現地に行けなかったのでDAREDEMO HEROさんに託しました。 当日はセブ島日本人会やDAREDEMO HEROさんによる水と食料の支援もあったようです。 おかげさまでたくさんの人の力になることができました。 送料を寄付してくださった方（後述）、洋服を提供してくださったLynksさんには改めて感謝いたします。 被災者が被災者を支援する状況 私も被災者といえば被災者ですが、被災とはいえないほど軽くて他の人は停電・水が通らない中での支援をしています。 DAREDEMO HEROさんの支援地区、ゴミ山のあるイナヤワン・バランガイ（役場）には急遽（きょ）、浄水システムが設置されました。 みんな飲める水がなくて困っています。素早い処置で少しでも多くの人を救えることが間違いないと思えました。 I\'m very thunkful. 本日スタッフの一人から私が活動のお手伝い中に聞いた言葉です。 彼女もまだ、家はまともな状況じゃないでしょう。この地区の方はDAREDEMO HEROさんの素早い対応で、水を得ることができました。 彼女の一言から、心から感謝していたのだと感じました。 まとめ・継続的な支援が必要 今回もボランティアに参加して思ったのは、継続的な支援が必要ということです。 世界ではボランティア活動によって生物的貧困、つまり飢えによる貧困は減っているといいます。現在は改善し、いわゆる経済的貧困が占めるといえます。 台風のような災害で、浮き彫りになったのは非常事態では弱者へのダメージが大きいということです。このような非常事態では、ボランティア団体なしでは、彼らは生き延びるのが難しかったと想像します。 この記事を読み、少しでも困っている誰かに手を差し伸べる気持ちになっていただければ幸いです。できる形でご支援いただければ幸いです。 最後までお読みいただきありがとうございました。 「子ども服をセブに送るプロジェクト」支援者の皆様 送料を送るためにご支援いただきましたみなさまありがとうございます！ 株式会社イーシーキューブ 様 ヤマモト コウ 様 中村 亜夜 様 満井 美恵 様 栗原デザイン室 様 TanTan 様 ハッピーちゃい夢 様 洋服の支援元 Lynks 様 ボランティア受入先：DAREDEMO HERO 支援に関する資料は[フィリピンセブ島の恵まれない子たちへ 支援物資送料寄付のお願い ](https://docs.google.com/presentation/d/1arV9Jb5vQHyKqKlpG0HS_nTLt4n9hdbw/edit?usp=sharing&ouid=117160028250625203295&rtpof=true&sd=true)をご覧ください。","noindex":true},{"slug":"entry484","title":"Gatsbyブログサイト移行物語~ヘッダーとフッターを追加する~","date":"2021-12-31","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"Gatsby Starter Blogを改造してヘッダーとフッターの追加の仕方について説明しました。今回はプラグイン・styled-componentsを使って装飾しつつコンポーネントを作って読み込む方法をご紹介します。※ v4バージョンアップに伴い追加した記事です。v4以外ではうまく動かない可能性があります。","tags":["React"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 Gatsby Starter Blogを改造してヘッダーとフッターの追加の仕方について説明しました。今回はプラグイン・styled-componentsを使って装飾しつつコンポーネントを作って読み込む方法をご紹介します。 ※ v4バージョンアップに伴い追加した記事です。v4以外ではうまく動かない可能性があります。 今までのGatsbyの記事と注意点 現在ここまで記載しています。制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。 1. インストールからNetlifyデプロイまで 2. ヘッダーとフッターを追加する（←イマココ） 2. 投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加 3. ブログ記事、カテゴリ、タグ一覧の出力 4. プラグインを利用して目次出力 5. プラグインナシで一覧にページネーション実装 6. 個別ページテンプレート作成 7. プラグインHelmetでSEO調整 8. CSSコンポーネントでオリジナルページを作ろう！！ 9. 関連記事一覧出力 11. タグクラウドコンポーネントを作成する 13. 記事内で独自タグ（コンポーネント）を使えるようにする このシリーズではテーマGatsby Starter Blogを改造します この記事は一番メジャーなテンプレート、 Gatsby Starter Blogを改造しています。同じテーマでないと動かない可能性があります。 骨格になるコンポーネントにヘッダーとフッターを追加 Gatsby Starter Blog は layout というコンポーネントで全体のレã

1‚¤ã‚¢ã‚¦ãƒˆç®¡ç†ã•ã‚Œã¦ã„ます。 今回はここにヘッダーとフッター用の子コンポーネントを追加します。 header.js 作成 まずは、headerから作ります。components/配下に格納します。 headerにサイトの名前を表示できるようにする トップページ以外はヘッダーのサイトタイトルにトップページに戻れるリンクを付与します。 リンクを貼るために Link コンポーネントを使います。 gatsby-config.jsからsiteMetadata情報を取得。サイトタイトルを出力します。 Layout コンポーネントに子コンポーネントHeaderを読み込む layout.jsを改造し、Headerコンポーネントをインポートします。 以下コードをすべて削除します。 全体のコードはこちら。 スタイルが入っていないので見た目は悪いですが、こんな感じになりました。 ナビゲーションを作成 まだページはありませんが、ナビゲーションの追加方法を紹介しておきます。 追加できました。 フッターを追加 footer.js を追加し、header同様読み込みます。 layout.jsに読み込む。 今回はシンプルに、コピーライトのみとしましたが、header.jsのコードを参考にお好みでナビゲーションやSNSのリンクを追加してください。 せっかくなのでスタイルを入れてみる 仕上がったもののスタイルが当たってなくて限りなくダサいです。 せっかくなのでスタイルを当てます。 汎用スタイルをstyle.cssに書く cssはgatsby-browser.jsを通じて読み込まれています。必要な場合はこちらに

1追加します。 今回はstyle.cssをいじるだけです。デザインがテンプレ臭いので中身をまるっと削除し書き直すだけ。 ここには共通で使う変数や汎用的に使うスタイルだけを書いていきます。 プラグインstyled-componentsでheaderを装飾 せっかくなので styled-components をインストールしてスタイルを当てましょう。 header.js にstyled-componentsをインポートし、タグをに変更します。 スタイルを当てるためにいくつかコードを編集します。 styled.タグ名でタグを指定でき、指定したタグ以下にスタイルを当てることができます。 cssを追記します。styled-components を使うとSASSチックにかけます。 上記コードはかなり簡易的なので、ちゃんと装飾したい人はこちらの記事も参考にしてみてください。 mainタグのみ装飾 このシリーズでは、少しずつGatsby Starter Blogを改造していくので、メイン部分は暫定でクラスを付与しておくだけにとどめます。 layout.jsの main に className=\\"container\\" を追記します。 footer も装飾する footerも軽く装飾します。 まあ、まだまだダサいですけどなんとか見れるようになりました汗 まとめ・パーツをコンポーネント化して管理 今回はヘッダーやフッターをコンポーネント化して管理できるようにしてみました。 次は「投稿テンプレにカテゴリやらキービジュアル（アイキャッチ）追加」」です。 このブログをgatsbyでリニューアルしたのは昨年です。v4になってからいい意味でかなり変わったので、現在記事をリライト中です。 みなさんが順を追ってGatsbyでブログが更新できるようにGatsbyブログが更新できるように改善していきますので、引き続きよろしくお願いします。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry483","title":"コロナ禍・ロックダウン・台風直撃。セブ島での2021年を振り返る","date":"2021-12-28","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2021/entry483.webp","description":"フィリピンで雇用を生みたい。ロックダウンで経済が悪化する様を経験し、そう思ったのは昨年。がむしゃらに仕事してきました。再びロックダウン、年末には台風直撃、たくさんのことがありました。何度も何度もくじけそうになりました。ちょっとネガティブなことも吐露しそうですが、後でこんなこともあったなぁって振り返る自分のために記事を残します。","tags":["セブ島","セブ島エンジニア生活","海外移住"],"body":"フィリピンで雇用を生みたい。ロックダウンで経済が悪化する様を経験し、そう思ったのは昨年。がむしゃらに仕事してきました。 再びロックダウン、年末には台風直撃、たくさんのことがありました。 何度も何度もくじけそうになりました。ちょっとネガティブなことも吐露しそうですが、後でこんなこともあったなぁって振り返る自分のために記事を残します。 昨年の充電生活を終え、真っ当に働き始めた1月 昨年ロックダウン中に会社を辞め、昨年はのんびりさせてもらいました。 日本に帰るか悩みましたが、この国で会社を設立するため残ることにしました。 健全に1年、安定した状態で会社を運営するためにある程度蓄えておく必要があると考えました。理由はこの国、フィリピンで雇用を生みたいと思ったからです。 私たちの方針は 無理しない 1年会社の経営を維持 だったので、1年分の資金を貯めてからスタートすることにしました。 働くのはやっぱり楽しい 1月からは知り合いからいくつか案件をもらえました。 深夜まで作業するようなキツい案件もありましたが、案件をこなすうちに「働くのって楽しい」なあって。 充

1電生活で鈍った体には堪えましたがww 私は根っから仕事好きなんだなあって実感しました。 7月ぐらいスタートアップにジョイン 生まれてはじめて？スタートアップにジョインしました。 新規サービスの立ち上げって想像以上にしんどいですねww 私にとって 大切なのは何をするか ではなく 誰とするか です。 この人たちと仕事したら面白そう! そう思ったので、プロジェクトにジョインすると決めました。 キツい環境下であればあるほど、人となりは見えます。 良い仲間に巡り合ったのは、今年一番の収穫でした。 洋服を配ったのをきっかけに、ボランティア活動に参加するようになる 日本のお下がり子供服を取り扱うLynksさんの洋服を配ったのをきっかけにボランティア団体を手伝うようになりました。 詳しくは以下記事をご覧ください。 はじめてセブの貧困の現実を知りました。ただただ現実を知りました。 今までボランティアなんてまともにしたことのない私がボランティアを続ける理由があります。 全体を見た時、世界中の子どもたちが少しでも教育を受けることができたら世の中は良くなるという理由です。 全体が良くなれば、巡り巡って私や私の周りの人たちも幸せになると信じています。 セブ、コロナ陽性者増。8月、再びロックダウンとなる 8月フィリピンではコロナ陽性者が増え、再びロックダウンになりました。 昨年のロックダウンの様子はこちら。 9月中頃まで続きました。 新しいプロジェクトに関わることにもなり、忙しいのも相まって、すっかり外出しなくなってしまいました。 リカーバン（禁酒） が一番キツかった。。。 ロックダウン開始初日の夜、100人ぐらいcurfew violator（門限違反者）が捕まって笑うしかなかった。 ロックダウンからの逆境を逆手に取る。時間ができた分勉強できた どんな状況下でも自分のやらなければならないことは山のようにあります。 エンジニアは勉強することも仕事の一環。 外に出ない、人付き合いが減った分、勉強のための時間が持てるようになりました。 DockerやShopifyなど新しい分野の勉強に時間を充てることができました。 世界中で起こったロックダウンってどれほど効果があったã

1®ã ã‚ã†ã‹ ところでロックダウンってどのくらい効果があったんでしょうかね？ 私は昨年、はじめて若い夫婦と子どものホームレスを見かけました。 今までそんな若いホームレスは見かけることが少なかったのでわりとショックを受けました。 あるスラム地区では「コロナで死ぬ前に飢えて死ぬ」と悲痛な声があったと聞きました。 経済が悪化して、人が疲弊して、子どもは教育がまともに受けられず。それでも感染が止まらなかったことを忘れてはいけない気がします。 YouTube大学が一時更新されなくなったのを機に英語の勉強を始めた 性懲りも無く英語の勉強をまた始めました。始めたのはきっかけがあります。 ロックダウンの最中、仕事の後楽しみにしていたオリラジの中田淳彦さんの動画の更新頻度が減ったからです。 あっちゃんは都知事の小池百合子さんの紹介動画を紹介時直後急遽削除、1週間動画の更新をお休みされました。 総裁選前に、岸田さん、河野さん、高市さん候補者3名を紹介する動画で再生回数増え、ヒートアップしたあっちゃんは暴露本「女帝」をもとに小池さんについての動画を公開。 誰かを批判したり傷つける動画は作らないと決めていたのに小池さんの動画に関しては行きすぎた、とのことでした（本人談）。 運良く見れた感想を言うと、めちゃくちゃおもしろかったです。 ネット上では小池さんがあっちゃん潰しにかかったなど、諸説上がってます。 変な憶測や勘ぐりはせず、いちファンとしてあっちゃんの主張を信じます。 と言うことで、またもや仕事の後にやることがなくなり10月から英語の勉強を始めました。 結局、英語の勉強の方が楽しくなっちゃって、あっちゃんの動画はすっかり見なくなってしまいましたw 今年の10月から12月台風直撃まで人生で一番英語を勉強しました。 年末のトドメ。台風直撃で人生でもっとも大きな災害を体験（中） 12月16日夜・台風22号（比名：オデット）が私の住むビサヤ地方を直撃しました。 みんな台風に備えないから、大したことないだろうと思っていたら、翌朝被害のすさまじさに驚きました。 電柱、看板、街路樹はなぎ倒され、ひどい有様でした。新築のアヤラモールの外壁も剥がれてます。 私の部屋には大きな被害はなかったです。が朝起きると、閉めていた外開きの窓（ロックはしていない）が風圧で開き、横殴りの雨で床は水浸し。 夜は相当風の音や建物の揺れが酷かったらしいのですが、それでもぐっすり眠れた自分が恐ろしいです。。。 自宅のコンドミニアムのエントランス。看板がバッキリ折れています。 2日モバイルのインターネットがつながりにくい状態 5日間の停電 水や食料不足はまだまだ深刻でコンビニの棚は空っぽ 死者378人（12/27時点） アジア経済ニュースによると、被害の状況はまだ全体が把握できておらず、死傷者はさらに増える恐れ、、、もう1週間経ってますけど。 毎日チェーンソーの音が外から聞こえます。倒れた木々を撤去し、道が通れるようにしています。 私はたまたま都心部に住んでいたので周囲の被害もマシですが、沿岸や他の島などの別の場所の被害はもっと甚大です。 山岳地帯の農家の被害も甚大で作物もやられてるので、しばらく野菜も高騰するんじゃないかと予想します。 完全復興には1〜2か月かかると言われています。 足元を見て食べ物やガソリンの値上げをする人たちもいます。 行政ã

1¯ä¸å½“な値上げをやめるように呼びかけてますが、いつの時代も悪い人はいなくなりませんね。 長期ロックダウン、トドメの台風。 フィリピン経済はこの先どうなるのだろうか、と思わずにはいられないです。 まとめ 今年あったことや感じたことを振り返り、徒然に書きました。 ロックダウン、トドメの台風。 今年は本音を言うと、何度も絶望しかけ、くじけそうになりました。 しかし振り返ってみると、ロックダウンがなければ英語も新しい分野の勉強も十分できてなかったかもしれません。ボランティアもしなかったです。 しかも新しい仲間にも出会えました。 悪い面だけ見るとしんどい一年のように思えますが、総じて素晴らしい一年だったと振り返ります。 改めて初心にかえります。 私は 雇用を生むため、この国に残る と決めました。 もう私は自分の野心のためにギラギラ燃えるほど若くもありません。残りの人生は人材育成に力を注ごうと40歳くらいから心に決めていました。 目標だった今年中の会社設立はできませんでしたが、やりとげるまで諦めるつもりはありません。 とりとめもない私の一年を徒然に綴りましたが、最後までお読みいただきありがとうございました。 来年も引き続き頑張りますので、よろしくお願いします。 良い年末をお過ごしください。","noindex":true},{"slug":"entry482","title":"JavaScript 配列・連想配列ループ処理まとめ｜for文から最新メソッドまで徹底比較","date":"2021-12-26","modifiedDate":"2026-07-01","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry482.webp","description":"JavaScriptの配列や連想配列（オブジェクト）のループ処理について、用途別の最適な使い分けを徹底解説！基本的なfor、for...of、for...in構文から、mapやforEachなどの配列メソッド、filter、reduce、話題のスプレッド構文まで網羅しています。","tags":["JavaScript"],"body":"JavaScriptを触っていると、「配列や連想配列のループ処理、結局どれを使うのがベストなんだろう？」と迷うことはありませんか？ ES6以降、JavaScriptの配列操作は驚くほど進化しました。今回は、基本の for...of や for...in だけでなく、実務で大活躍する map や forEach を使ったループ処理を徹底整理！通常配列はもちろん、工夫が必要な「連想配列」を map や forEach で綺麗に回すテクニックも詳しく解説します。 さらに、データのバグを未然に防ぐ「非破壊的な記述方法」や、強力な filter、reduce、スプレッド構文（...）の使いこなし術まで、用途に合わせてポジティブに使い分けられるロードマップをまとめました。 この記事でマスターできること 通常の配列から連想配列まで、迷わず選べる最適なループ処理 連想配列を map や forEach でスマートにループさせる実務向けの書き方 元データを壊さずに安全にデータを加工する「非破壊的」なモダンコードの書き方(sort reverse splice) スプレッド構文（...）を使った一歩先を行くデータ操作テクニック 昔は配列もfor文でしか回せなかったけどたくさん処理方法が増えたよね 昔（10年ほど前）のJavaScriptでは、配列をループさせるなら「for文」を使うのが定番でした。配列の長さ（ length ）を毎回取得して、インデックスを1つずつ進めていくお馴染みの書き方です。 しかし、ES6（ECMAScript 2015）以降、JavaScriptの配列・連想配列ループ処理は劇的に進化しました。 今や死語となった IE（Internet Explorer） への互換性を気にして導入を躊躇する場面もありましたが、モダンブラウザが標準となった現在では、もう気にする必要はありません。これからは、バグが起きにくくクリーンに書ける最新の配列ループを、遠慮なくガシガシ使っていきましょう！ おさらい・多次、元連想などのいろんな配列 JavaScriptを扱う上で、まず整理しておきたいのが「配列のバリエーション」です。データの形に合わせていくつかの種類を使い分けるため、ここでサクッとおさらいしておきましょう！ まずは基本の配列です。シンプルにデータを一列に並べた形ですね。 さらに、これらを組み合わせた「多次å

1…ƒé…åˆ—（配列の中に連想配列が入った形など）」もあります。APIからデータを取得するときなどは、この形が定番になります。 さらに、これらを組み合わせた「多次元配列（配列の中に連想配列が入った形など）」もあります。APIからデータを取得するときなどは、この形が定番になります。 いろんな形が出てくると、最初のうちは「どれがどれだっけ？」って混乱しちゃいますよね！ 【基礎】JavaScriptの配列・連想配列ループ（for文・命令文） for...of, for...in を使った、基本となるループ処理です。 配列のループ「for...of」 シンプルな配列をループ処理する場合は、こちらを使うのが最適です。 配列やNodeList、argumentsなどの反復可能オブジェクトを操作でき、キーではなく 値 が直接出力されます。 【連想配列ループ】オブジェクトの処理に使う「for...in」 JavaScriptで「連想配列（オブジェクト）」をループ処理したい場合は、この for...in を使用します。 JavaScriptの連想配列はオブジェクトを使って表現しますが、オブジェクトをループさせたい場合、普通の配列で使うような通常の for 文や forEach メソッドはそのままでは使えないので注意が必要です。 モダンな方法でループさせたい場合は、「Object.keys()を使えば「map」や「forEach」でも連想配列を回せる！%E3%82%92%E4%BD%BF%E3%81%88%E3%81%B0%E3%80%8Cmap%E3%80%8D%E3%82%84%E3%80%8CforEach%E3%80%8D%E3%81%A7%E3%82%82%E9%80%A3%E6%83%B3%E9%85%8D%E5%88%97%E3%82%92%E5%9B%9E%E3%81%9B%E3%82%8B%EF%BC%81)」という方法もあります。 連想配列（オブジェクト）のすべてのプロパティに対してループ処理を行い、 インデックス（キー名） を順番に取り出すことができます。 【注意】普通の配列ループに for...in を使ってはいけない理由 とても便利な for...in ですが、実は「普通の配列」のループ処理に使うのは避けたほうが安心です。その理由は主に2つあります。 まずは、予期せぬ「余計なデータ」まで巻き込んでループしてしまう危険性があるためです。JavaScriptでは、ライブラリの読み込みや共通処理などで配列（Array）の機能が拡張されている場合、その拡張された関数やプロパティまで一緒に引っ張ってきてしまいます。 技術的な特性として以下の2点も挙げられます。 処理ã

1®é †åºãŒä¿è¨¼ã•ã‚Œã¦ã„ない（インデックスの0番から順番に回るとは限らない） ループの仮変数に格納されるのは「文字列型のインデックス番号」である（数値の 0 ではなく文字列の \'0\' になるため、計算がバグる原因になる） 普通の配列を回すときは for...of や forEach を使い、for...in はオブジェクト（連想配列）専用と割り切って使い分けるのがベスト。 メソッドでループ処理 JavaScriptでは、配列の標準メソッドである map や forEach を使ってもスマートにループ処理が書けます。 「map」で配列処理 React などのモダンなフロントエンド開発で要素を出力したり、配列のデータを新しく作り直したりしたい時に非常によく使われる重要なメソッドです。 単体のオブジェクト（連想配列）に直接使うことはできませんが、配列をループさせる際には非常に強力です。また、第二引数を使うことでインデックス（0番からの並び順）も同時に取得できます。 もちろん、実務でよくある「オブジェクトが格納された配列（多次元配列）」のループ処理にもラクに回せます。 以下のように、出力結果ã

1«å¯¾ã—てプロパティのキーを指定すれば、 オブジェクト内の値だけをピンポイントで取り出すことも可能 です。 さらに、map の最大の特徴は return を使って新しい配列（戻り値）を返せる点にあります。元の配列をもとに、特定のデータだけを抽出した新しい配列を作りたいときに便利です。 昔のJavaScriptで、わざわざ空の配列を用意して for 文を回していたような処理も、map を使えば驚くほど簡潔で綺麗に記述できます。 配列の要素を加工して新しい配列を作ることができ、モダン開発における汎用性が非常に高いメソッドです。 「forEach」で配列処理 map と同じように、配列の要素を順番に取り出してループ処理ができます。コンソールに出力される中身も一見すると同じように見えます。 map との決定的な違いは、forEach は return を使っても値を返すことができない（戻り値がない）という点です。 map との違いは、新しい配列を返さない（戻り値が undefined になる）ことです。 「配列を加工して新しい配列を作りたいとき」は map を使い、「単に上から順番に処理を実行したいだけ（コンソール出力や、外部の変数の書き換えなど）」のときは forEach を使う、と覚えておくと迷わなくなりますよ！ Object.keys()を使えば「map」や「forEach」でも連想配列を回せる！ オブジェクト（連想配列）だけど、どうしても慣れている map や forEach を使ってループ処理したい！ という場合もありますよね。 そんなときは、JavaScriptの組み込みメソッドである Object.keys() を使うのが実務でも定番のテクニックです。 Object.keys(obj) は、オブジェクトの「キー名」だけを抜き出して普通の配列を作ってくれる便利な機能です。一度配列にしてしまえば、あとはいつも通り map や forEach を繋げてガシガシ回せます！ Object.keys() 以外にも連想配列が回せるメソッドがあります。 | メソッド名 | 抽出する対象 | 配列に変換した後のイメージ（例） | 主な使い所・メリット | | :-------------------- | :------------------------------------------------- | :-------------------------------- | :------------------------------------------------------------------------------- | | Object.keys(obj) | オブジェクトの 「キー（プロパティ名）」 の配列 | [\'name\', \'age\'] | map の中で obj[key] のようにして値も自在に扱いたいとき（最も定番） | | Object.values(obj) | オブジェクトの 「値（バリュー）」 の配列 | [\'hoge\', 40] | キー名は不要で、とにかくオブジェクトの中身（値）だけを一覧で処理したいとき | | Object.entries(obj) | オブジェクトの 「キーと値のペア」 の多次元配列 | ` | キーと値の両方を同時に、かつスマートに分割代入（[key, value]）して使いたいとき | find, filter, includes, some, everyの使い方 ここからは、配列の中にある特定のデータを探したり、条件に合うものだけを判定・抽出したりする 便利なメソッド をまとめて解説します。 実務でよく使う「オブジェクトが入った配列（多次元配列）」から、特定の「キー」や「値」を狙い撃ちして処理するときに大活躍するメソッドばかりです。 特定条件の最初の値を取り出す「find」 find は、配列の中から指定した条件に一致する最初の要素（1つだけ）を取り出すメソッドです。 条件として 文字数が3文字（ length === 3 ） を指定したため、合致する最初の要素である { name: \'リンゴ\' } がピンポイントで抽出されました。 条件に合うデータを 1つだけ 取り出したい場合に最適です。もし条件に合うものが複数あっても、取得できるのは最初に見つかった1つのみ、該当するものがなければ undefined が返ります。 条件に合うすべてのデータを絞り込む「filter」 先ほどの find が「最初の1つ」だったのに対し、filter は条件に一致するãƒ

1‡ãƒ¼ã‚¿ã‚’すべて絞り込んで、新しい配列として作り出すメソッドです。 条件に合う 文字数が3文字（length === 3） のデータがすべて抽出され、配列の形で結果が返ってきました。 条件に合うデータを すべて（複数） 取り出したい場合に最適です。もし条件に合うものが1つもなければ、空の配列（ [] ）が返ります。 指定した値が含まれているか調べる「includes」 配列の中に、指定した特定の要素が含まれているかどうかを真偽値（ true / false ）で判定します。 また、includes は配列だけでなく 特定の文字列（テキスト） の中に指定したキーワードが含まれているかを調べることも可能です。 対象が配列であっても文字列であっても、特定の値が存在するかどうかをサクッとシンプルに調べたい場合に最適です。 条件に合うデータが「1つでも」あるか調べる「some」 some は、配列の中に条件に一致するデータが少なくとも1つ以上含まれているかを真偽値（ true / false ）で判定するメソッドです。 条件として 4文字未満（3文字以下） を指定したため、配列内のデータ（リンゴ、バナナ）がこれに合致し、結果は true となります。 単純に値がtrueかfalseかだけも確認可能。 | 値 | データの種類（型） | 真偽判定 | | ------------ | ---------------------------- | -------- | | {}

1 | オブジェクト（空でも真） | true | | \\"ああああ\\" | 文字列 | true | | \\"\\" | 空文字（文字が入っていない） | false | | 1 / -1 | 数値（0以外の数字） | true | | 0 | 数値（ゼロ） | false | | [] | 配列 | true | | true | 真偽値 | true | | false | 真偽値 | false | | undefined | 未定義 | false | | null | 空（値がない） | false | この仕組みを利用して、すべてが false（偽） と判定される要素だけを集めた配列に some を使うと、結果は綺麗に false になります。 配列の中に、条件をクリアするデータが 1つでも混ざっているか をサクッとチェックしたいときに重宝するメソッドです。 すべてのデータが条件を「一斉に」クリアしているか調べる「every」 some が1つでも当てはまればOKだったのに対し、 every は 配列のすべてのデータが例外なく条件を満たしているか を真偽値（ true / false ）で判定するメソッドです。 条件として 4文字未満（3文字以下） を指定しましたが、「アップル（4文字）」が条件を外れているため、結果は false となります。 some と同じように、具体的な条件式を書かずに要素の「値そのもの（ true / false ）」だけで一括判定させることも可能です。 配列のなかに1つでも false 扱いになる値が混ざっていると、全体の判定は false になります。今回の場合は undefined が混ざっているため、結果は false です。 配列の中身が すべて正常か すべて入力済みか など、全員が条件をクリアしているかを 厳格にチェックしたい ときに大活躍するメソッドです。 複雑な配列を1つの値にまとめあげる「reduce」 reduce は、配列の要素を順番に処理しながら、最終的に1つの値（数値、文字列、オブジェクト、あるいは新しい配列など）にまとめあげる非常に強力なメソッドです。 基本の構文は以下のようになります。 これだけだと難しく見えますが、一番よく使われる 配列の合計値を出す処理 を例に見るとイメージが湧きやすいはずです。 実務での応用：複雑な記事データから「月ごとの執筆件数」を集計する reduce の真価は、単なる合計値の計算だけでなく、「複雑なデータ構造を全く別の形に作り変える」ときに発揮されます。 たとえば、以下のような 記事データの配列 があるとします。 このデータから、同じ月（年-月）ごとに記事が何件あるか を自動で集計し、以下のようなスッキリした配列に作り変えてみましょう。 配列をループしながら「すでに集計済みの月があればカウント（ count++ ）を増やし、まだなければ新しく配列に追加する」という処理を繰り返すことで、月ごとの記事数をまとめることができます。 月ごとの記事数をまとめることができました。 reduce は、配列をループしながら 1つの結果（数値や新しいオブジェクトなど）にギュッと凝縮したいとき に使います。少しクセがありますが、使いこなせると複雑なデータ処理が一瞬で書けるようになりますよ！ スプレッド構文（...）とは？ スプレッド構文（...）の使い方をついでにこちらも深掘りしておきます。 最初見たとき、「おやおや？記述ミス？」って思ってしまいました笑 スプレッド構文 (...) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。 スプレッド構文 | MDN Web Docs 要するに、「配列のカッコ（[]）をパカッとå

1¤–して、中身の要素をバラバラに展開する（ぶちまける）機能」です。 カッコを外して取り出した中身を、もう一度新しいカッコで包み直すことで、元データとは完全に別物の コピー を新しく作ることができます。 配列の中身を表示できる ... を頭につけるだけで、配列やオブジェクトの中身を素早く展開できます。 わざわざループ処理（for 文など）を書かなくても、これだけで一瞬で中身をバラバラにバラして出力できるので、デバッグの際にも非常に便利です。 配列をマージする 配列を引数としてまとめて渡す 配列をまとめて引数として渡せます。 分割代入で余った値を受け取る この使い方は面白かった。 JSのスプレッド演算子 | Qiita 配列から重複を取り除く 重複のないデータ構造を作れる Setとスプレッド構文を組み合わせることで、配列から一瞬で重複を削除できます。 Set オブジェクトは値のコレクションです。挿入順に要素を反復することができます。Set に重複する値は格納出来ません。Set 内の値はコレクション内で一意となります。 Set | MDN Web Docs new Set(numbers) で一度バラバラの重複のないまとまり（Setオブジェクト）にしたあと、それをスプレッド構文（...）を使って再び新しい配列のカッコ（[]）で包み直す、実務でも定番の超便利テクニックです。 JSのスプレッド演算子 | Qiita オブジェクトの特定のキーを取り除く スプレッド構文と同じ ... 記法を「分割代入」と組み合わせることで、特定のプロパティだけを狙い撃ちで除外した新しいオブジェクトを作ることができます。 不要なデータ（APIから渡ってきたIDや不要なステータスなど）を取り除いて、残りの綺麗なデータだけをまるっと他の関数やコンポーネントに引き渡したいときに、実務でめちゃくちゃ重宝する鉄板の記述！ 旧来から置き換えてほしい、最新の非破壊メソッド群（toSorted / toReversed / toSpliced） モダンなJavaScript（ES2023）では、勝手に元データが壊れる問題 を解決するために元の配列を一切汚さない 非破壊メソッド が新しく追加されました。 今までの破壊的メソッドに対応する形で、それぞれ以下のように使い分けることができます。 | 従来のメソッド（破壊的 ❌） | 最新のメソッド（非破壊的 ⭕） | 主な役割 | | -------------------------- | ---------------------------- | -------------------------------- | | sort() | toSorted() | 指定した条件で要素を並び替える | | reverse() | toReversed() | 配列の要素の並び順を反転させる | | splice() | toSpliced() | 配列の要素を削除・置換・追加する | 配列をソートする「sort」から「toSorted」へ データの並び替え（ソート）を行う処理です。先ほどの reduce メソッドで作成した月ごとの集計配列（result）を、日付順に並び替えてみます。 元の配列の状態を安全にキープしたまま、並び替えた新しい配列だけをスマートに受け取ることができるようになりました。 文字列（アルファベット）のソートに関する注意点 アルファベットの文字列をソートする場合、JavaScriptの仕様により大文字が小文字よりも前に来てしまうという性質があります。 そのため、実務で大文字・小文字を区別せずに綺麗に並び替えたい（例：A の次に b を並べたい）ときは、 一度すべて小文字に統一してから比較する のが定番のテクニックです。 日本語（ひらがな・漢字）や数値が混ざったより複雑なソートを行いたい場合は、標準の localeCompare メソッドなどを活用すると便利です。興味がある方は調べてみてくださいね。 参考 : 配列の要素をソートする 順序をそっくり入れ替える「reverse」から「toReversed」へ 配列の要素の並び順を、単純に逆（後ろから前）にひっくり返したいときは reverse を使います。 従来の reverse() は、実行した瞬間に元の配列の順序までã

1ã£ãã‚Šãã®ã¾ã¾é€†é †ã«æ›¸ãæ›ã‚ã£ã¦ï¼ˆç ´å£Šã•ã‚Œã¦ï¼‰ã—まいます。 単に 逆順にしたデータも一時的に見たい というだけのつもりで使うと、元のデータまで巻き添えを食らうため注意が必要でした。 toReversed() を使えば、元の配列の並び順は最初に入っていた状態を完璧にキープしたまま、逆順になった新しい配列だけを安全に作成できるようになります。 要素を削除・追加・置換する「splice」から「toSpliced」へ splice は、配列の要素を 削除 ・ 追加 ・ 置換 できる万能メソッドです。 実行すると元の配列を直接書き換えてしまう（破壊的）うえ、戻り値が 新配列 ではなく 削除された要素 になるため、直感的に使えずバグの原因になっていました。 元の配列は無傷のまま、戻り値として 切り貼りした後の新しい配列 がそのまま返ってきます。安全かつ直感的に書けるため、toSpliced への移行を推奨します。 非破壊の特定要素の置換 「with」 with は配列の〇番目の要素だけを、ピンポイントで書き換えた新しい配列が欲しい」という時に使います。 これまで一番よく使われていたのは、スプレッド構文でコピーしてから代入する方法です。 Reactなどの状態管理（State）の更新など、1行でスマートに書きたいときは map() もよく使われていました。 with()` を使うと、コードが圧倒的にスッキリするのが分かります。 まとめ・配列はしたいことに応じてメソッドなどを使い分けよう JavaScript（ES6以降〜ES2023）の進化によって、配列処理は驚くほどラクに、そして安全に書けるようになりました。 選択肢が多すぎて迷うこともありますが、基本は「元のデータを壊さない（非破壊）」書き方を選んでおけば、予期せぬバグを防げて安心です。 実は昔ながらの for 文で回す方が処理速度自体は速かったりするのですが、現代のフロントエンド開発では、コードの「読みやすさ」と「データの安全性」のメリットが勝るため、今回紹介したメソッドやスプレッド構文を使うのが主流になっています。 この記事が、皆さんのモダンなコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry481","title":"スプシのデータをJSON化してPHPに取り込む（GAS使います）","date":"2021-12-24","modifiedDate":"2021-12-26","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry455.webp","description":"以前Googleスプレッドシートにクライアント側でデータを入力してもらい、ウェブサイトに表示する処理を紹介しました。2021å¹´8月から使用できなくなったのでGASを使った代替方法の紹介です。スプシの設定が分からない方のみ、以前の記事を参考にしてください。","tags":["PHP","JSON","WordPress","GAS"],"body":"以前Googleスプレッドシートにクライアント側でデータを入力してもらい、ウェブサイトに表示する処理を紹介しました。2021å¹´8月から使用できなくなったのでGASを使った代替方法の紹介です。 スプシの設定が分からない方のみ、以前の記事を参考にしてください。 2021å¹´8月頃よりGoogleの仕様が変わったので別の方法を紹介します 2021å¹´8月頃よりGoogleの仕様 が変わり、以下の方法は使えなくなりました。 他のやり方を紹介しますので、そちらを参考にしてください。 スプシのデータを加工したJSONにして、WordPress側で受け取ります！ スプシの共有権限は設定不要 スプシのデータをJSON化してウェブサイトに取り込む（Sheets API使いません）では共有権限を「リンクを知っている全員」としましたが、今回は設定不要です。 JSONをPHP側で受け取るためのGASを書く シートが完成したら、スプシの上のメニュー>拡張機能からApps scriptを選択します。 GASには任意で名前をつけることができます。今回はjsonとしました。 呼び出すスプシのシートを指定します。 シートのURLのd/以下 ~ /editの前までがIDです。 今回使うシート名（タブ）はdataとしました。環境に応じて書き換えてください。 定数の設定 定数として、スプシのIDとシート名を設定しておきます。 関数とシートのデータ取得 関数doGetを作ります。 関数を実行し、Logger.log（GAS専用）かconsole.logで動いているか確認します。 許可を求められるので、Yesで進んでください。 スプシのデータをPHPで受け取りやすいように加工 スプシのデータを加工します。 今回forEachや スプレッド構文(...) も使っています。使い方が分からない方は以下記事も参考にしてください。 デバッグして出力されたデータを確認。 いい感じに連想配列になっているのでOK. PHPでJSONを受け取るためのコードを書く GASでContentServiceを使ってブラウザに値を返す。 すべてのコード JSONデータをPHPで受け取るための設定 新しいデプロイを作成します。 | 項目 | 設定 | | ---------------------- | --------- | | 種類の選択 | Webアプリ | | 次ã

1®ãƒ¦ãƒ¼ã‚¶ãƒ¼ã¨ã—て実行 | 自分 | | アクセスできるユーザー | 全員 | URLが発行されるので動くか確認。 コピーしたURLにアクセスしてJSONが帰ってきたらOK。 PHPに組み込む 通常のPHPでの取得方法 以前と同じようにCurlで取得しようとしたらうまくいかなかったのでfilegetcontentsで取得しました。 WordPressに対応したい wpremoteget()に書き換えます。 スプシのデータをJSON化してウェブサイトに取り込む（Sheets API使いません）の重複しますが、以下のコードで表示可能です。 記事にもショートコードで貼れます。 WordPressのコーディング規約に関しての記事もよろしければお読みください。 まとめ・スプシをJSONすると便利 ブログが更新できず気になってはいましたが、ようやく記事まとめることができました。。。 この記事を参考になさっていた方、長らくお待たせしてすみません。 トリガーで定期的にメール送信したい方はこちらを参考にしてください。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry480","title":"DockerでWordPress構築｜シンプル＆軽量な開発環境の作成手順","date":"2021-12-22","modifiedDate":"2026-03-14","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry480.webp","description":"2026年最新メンテ済み。 VagrantからDockerに乗り換えて感じた「爆速な立ち上げ」の感動をそのままに、最もシンプルで軽量なWordPress開発環境の構築手順をまとめました。複雑な設定を削ぎ落とし、docker-compose.yml をコピペするだけで動く構成を紹介。PHPやWPの旧バージョンが必要な際のリファレンスとしても活用してください。","tags":["Docker","WordPress"],"body":"【2026å¹´3月 追記】 この記事を書いた当時はVagrantから移行したばかりの「Docker初心者」でしたが、今では完全にDocker（Docker Compose）一本になりました。 振り返ると、Vagrantの起動を待っていた時間は一体何だったのか……。現在は、より「軽量・シンプル」で、かつApple Silicon (M1/M2/M3) 環境でも爆速で動く構成に記事内容を微調整しています。Docker Desktopだけでなく、OrbStack等のモダンな環境でもそのまま動く「最小構成」をぜひ活用してください。 Dockerは、アプリケーションをコンテナと呼ばれる軽量な仮想環境で実行するためのプラットフォームです。これにより、開発環境と本番環境の違いを最小限に抑え、一貫した動作を保証することができます。 Dockerの基本要素 1. Dockerエンジン: コンテナの作成、管理、実行するコア部分。 2. Dockerイメージ: アプリケーションとその必要なすべてのファイル、設定、および依存関係を含むテンプレートのようなもの。 3. Dockerコンテナ: Dockerイメージから作成される軽量な実行環境。 4. DockerHub: Dockerイメージを共有するためのリポジトリ。 Dockerのメリット 一貫性: 開発環境と本番環境の違いを最小限に抑え、一貫した動作を保証。 効率性: 軽量なコンテナを使用することで、リソースの消費を抑える。 移植性: Dockerイメージを使用することで、異なる環境間での移植が容易。 この記事の対象者です。 Dockerを触ってみたい WordPressの環境を気軽に試してみたい Dockerの構築を順を追ってやってみたい こちらの記事では主に基本操作までを紹介しています。 もっと詳しくカスタマイズしたDockerを作成したい人は、こちらの記事も参考にしてください。 Dockerインストール Dockerをインストールしていない人は、Docker公式サイトよりアカウントを作成し、インストールします。 https://www.docker.com/ Docker Desktop をインストールします。 Docker Desktop のメニュー About Docker Disctop からでも、以下コマンドでバージョンも確認できます。 イãƒ

1³ã‚¹ãƒˆãƒ¼ãƒ«ã™ã‚‹ç’°å¢ƒã‚’作成 インストールしたい場所にフォルダを作ります。 ここでは仮にWordPressをインストールしたいディレクトリ名をmywordpressとします。 docker-compose.yml で MySQL と WordPress のコンテナ作成 docker-compose.yml を作成します。 ファイル名は docker-compose.yml でも compose.yml でもどちらでもかまいません。 Dockerのネットワークを明示的に追加することでサービス間の通信をより制御しやすくなります。 マウントするディレクトリはwp-contentやthemesだけでいいのであれば適宜書き換えてください。 それぞれのコンテナに container_name を明示的に付与しておくと、後々コマンドを叩くときに困りません。私はプロジェクト名、サービス名にすることが多いです。 マウントとは、外部のストレージやディレクトリをシステム内の特定の場所に接続し、データを読み書きできる状態にすることです！ サービス名に気をつける docker-composeファイルで定義されたサービス名が他のプロジェクトのサービス名と重複しないようにすることが重要。これにより、他のコンテナが不意に立ち上がることを防ぐことができます。 例）project名_php Dockerイメージ「wordpress」 wordpressイメージはWordPress本体（最新）、PHP、サーバー、WordPressに必要なPHP拡張機能が梱包されています。latestを指定すると最新で汎用的なものがコンテナに格納されます。 DockerHub|wordpress 古いWordPressをインストールしたい場合。 本番環境と合わせたPHPをインストールしたい場合は、DockerHub から wordpress のDockerイメージを探してみてください。 たとえば、php8.1のイメージを使いたい場合。 DockerHubに必要なイメージがない場合は、Dockerfile で独自カスタマイズする必要があります。 詳しいやり方を知りたいかたはDocker で本番環境に忠実な開発環境を作る（nginx、PHP-FPM、MariaDB）をご確認ください。 Dockerイメージ「mysql」 mysqlイメージはMySQLサーバー、MySQLの操作に必要なツール、デフォルトの設定ファイル、ySQLの動作に必要なライブラリや依存関係が含まれています。 Dockerイメージ「mysql:8.0」でデータベースの接続ができなくなる場合 Dockerイメージ mysql:8.0を試そうとしたところ、データベースが接続できなくなりました。 MySQL 8.0以降ではデフォルトの認証プラグインが cachingsha2password に変更されました。これが古いクライアントやライブラリとの互換性の問題を引き起こすことがあります。 その場合はMySQLの認証方式を設定するためのオプション、default-authentication-pluginの設定を変え、使用する認証プラグインを指定することで回避します。 .envファイルを作成 .env ファイルに定数を定義します。このファイルは、Docker Composeの docker-compose.yml で設定したenv_file オプションによって、WordPressとMySQLのコンテナに読み込まれます。 .env ファイルの役割--abort-on-container-exit と同時に使えない | | --no-color | 白黒で画面に表示 | | --no-deps | リンクしたサービスを起動しない | | --force-recreate | 設定やイメージに変更がなくても、コンテナを再作成する--no-recreate と同時に使えません | | --no-recreate | コンテナが既に存在していれば、再作成しない--force-recreate と同時に使えない | | --no-build | イメージが見つからなくても構築しない | | --build | コンテナを開始前にイメージを構築する | | --abort-on-container-exit | コンテナが１つでも停止したら全てのコンテナを停止-d と同時に使えない | | -t, --timeout TIMEOUT | アタッチしている、あるいは既に実行中のコンテナを停止する時のタイムアウト秒数を指定 (デフォルト:10) | | --remove-orphans | Compose ファイルで定義されていないサービス用のコンテナを削除 | | --exit-code-from SERVICE | 指定されたサービスコンテナの終了コードを返す--abort-on-container-exit の指定を暗に含む | | --scale SERVICE=NUM | SERVICE のインスタンス数を指定する | | --follow-log | 指定されたサービスのログをフォローし続ける | | -p, --project-name NAME | プロジェクト名を指定するãƒ

1‡ãƒ•ã‚©ãƒ«ãƒˆã¯ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªå | | --profile PROFILE | 指定されたプロファイルを使用してサービスを起動する | | -f, --file FILE | Docker Compose ファイルを指定する複数のファイルを使用する場合に便利 | 無事に起動したら、アクセスしてみましょう。 http://localhost:3000 フォルダ構成は次のようになっています。 dockerを終了 オプションなしで docker-compose down を実行すると、docker-compose up で作成したコンテナとネットワークが削除されます。 ボリュームも削除したい場合は、-v オプションをつけます。 | オプション | 説明 | | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | -d | デタッチド・モード: バックグラウンドでコンテナを実行し、新しいコンテナ名を表示--abort-on-container-exit と同時に使えない | | --no-color | 白黒で画面に表示 | | --no-deps | リンクしたサービスを起動しない | | --force-recreate | 設定やイメージに変更がなくても、コンテナを再作成する--no-recreate と同時に使えません | | --no-recreate | コンテナが既に存在していれば、再作成しない--force-recreate と同時に使えない | | --no-build | イメージが見つからなくても構築しない | | --build | コンテナを開始前にイメージを構築する | | --abort-on-container-exit | コンテナが１つでも停止したら全てのコンテナを停止-d と同時に使えない | | -t, --timeout TIMEOUT | アタッチしている、あるいは既に実行中のコンテナを停止する時のタイムアウト秒数を指定 (デフォルト:10) | | --remove-orphans | Compose ファイルで定義されていないサービス用のコンテナを削除 | | --exit-code-from SERVICE | 指定されたサービスコンテナの終了コードを返す--abort-on-container-exit の指定を暗に含む | | --scale SERVICE=NUM | SERVICE のインスタンス数を指定する | | --follow-log | 指定されたサービスのログをフォローし続ける | | -p, --project-name NAME | プロジェクト名を指定するデフォルトはディレクトリ名 | | --profile PROFILE | 指定されたプロファイルを使用してサービスを起動する | | -f, --file FILE | Docker Compose ファイルを指定する複数のファイルを使用する場合に便利 | | --rmi type | イメージの削除。type は次のいずれか:\'all\': あらゆるサービスで使う全イメージを削除\'local\': image フィールドにカスタム・タグのないイメージだけ削除 | | -v, --volumes | Compose ファイルの volumes セクションの名前付きボリュームを削除また、コンテナがアタッチしたアノニマス・ボリュームも削除 | オプションを駆使してdockerを完全に削除もあります！ ダンプしてきたデータベースをエントリポイントにおく ダンプしてきた（サーバーからダウンロード）MySQLなどのファイルを用意します。 あらかじめSQLのデータを挿入したい場合は MySQL をエントリポイントとして指定するディレクトリを置きます。 エントリポイントとは、プログラムやアプリケーションが実行される際に最初に実行される場所や関数のことです。D

1ockerでは、コンテナが起動する際に実行されるコマンドやスクリプトを指します! ダンプしてきたMySQLファイルのURLをDocker環境に合わせて http://localhost:3000 に変えておきます。 その他、データベースの接頭辞（通常は wp_）等環境に応じて適宜変更しておきましょう。 データベースのリストア・ダンプ 今回は実にシンプルな方法をご紹介します。 手動でリストア（取り込み）するケースもあります。 エントリポイントで、MySQLデータのリストア失敗 MySQLデータのリストアやり直したい データのダンプ（MySQLコンテナからダウンロード）するケースももちろん発生します。 ここでは、個々のコンテナに接続するため、Docker コマンドを使ってアプローチします。 exec でコンテナにコマンドを実行(executeは英語で実行という意味)してデータベースの操作をします。 Docker exec コマンドのオプション | オプション | 説明 | | ------------------------- | -------------------------------------------------------------- | | -d, --detach=false | デタッチド・モード: コマンドをバックグラウンドで実行 | | --detach-keys | デタッチド・コンテナに特定のエスケープ・キー・シーケンスを設定 | | --help=false | 使い方の表示 | | -i, --interactive=false | アタッチしていなくても STDIN をオープンにし続ける | | --privileged=false | コマンドに拡張 Linux ケーパビリティの追加 | | -t, --tty=false | 疑似ターミナル (pseudo-TTY) の割り当て | | -u, --user= | ユーザ名か UID (書式: [:]) | データベースのリストア 本番などからダンプしてきたデータベースをリストアする方法です。 前述したように、URLなど適宜書き換えてください。今回はSQLファイルをルートディレクトリに直置きします。 dump.sql というファイルをリストアしたい場合、次のようなコマンドを叩きます。 .env で設定した環境変数をはめるとこんな感じです。 環境変数で実行。 直打ちでもOK。 データベースのダンプ ダンプ方法です。 .env で設定した環境変数をはめるとこんな感じです。 環境変数で実行。 ルート直下にlatest.sqlというDBファイルが追加されます。 データベースの確認や削除 Dockerからデータベースの確認をします。 実際のコマンドはこんな感じ。パスワードを聞かれたら入力します。 データベースを確認します。 テーブルを確認します。 データベース削除したい場合はデータベース名を指定して drop。 テーブルだけ削除したい場合は削除したい場合はテーブル名を,(カンマ)で区切って drop。 sqlの終了。 コンテナ内に入る Web用のサーバー用に立ち上げたコンテナ内に入って、あれこれ調べたり、設定ファイルを確認したいときがあります。 そんな時は以下コマンドで侵入します。 dockerを完全に削除 オプションの意味はdockerを終了を参考にしてください。 これで気軽に破壊したりできます。 まとめ・Dockerやってみたらカンタンだった イメージも用意されていて docker-compose.ymlにカンタンなコードを書くだけなのでDockerでWordPressを構築するのは楽勝でした。 個人的には管理もメンテナンスもVagrantよりカンタンです 私の場合、どうしても古い php と WordPress で環境を作る必要があり、今回めちゃ重宝しました。 この記事がみなさんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。 おまけ・よく使うコマンド すべてのコンテナを強制終了。 ネットワーク一覧を取得。 現在起動中のコンテナの一覧を表示 。 特定のコンテナに接続してコマンドを実行。 特定のコンテナのログを表示。 実行中のコンテナのリソース使用状況（CPU、メモリなど）をリアルタイムで表示。 ローカルに保存さã

1‚Œã¦ã„ã‚‹Dockerイメージの一覧を表示。 ローカルに保存されているDockerイメージの一覧を表示 。 指定したネットワークを削除。","noindex":false},{"slug":"entry479","title":"【ボランティア】セブ島•スラムの火事で被災した子どもたちに服を配ってきました","date":"2021-12-20","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2021/entry479.webp","description":"「子ども服をセブに送るプロジェクト」！プロジェクトのレポートです。大規模火災のあったマンバリンのスラムで避難生活をしている子どもたちに洋服を配布しました。今回もまた、DAREDEMO HEROさんに同行させていただきました。","tags":["セブ島ボランティア体験記","子ども服をセブに送るプロジェクト"],"body":"「子ども服をセブに送るプロジェクト」プロジェクトのレポートです。 大規模火災のあったマンバリンのスラムで避難生活をしている子どもたちに洋服を配布しました。今回もまた、DAREDEMO HEROさんに同行させていただきました。 セブ島マンダリンのスラムの大火災。約500世代が避難 2021å¹´11月26日、マンダリンのスラム街で大規模火災が起きました。 現在、近くの小学校に被災した住人が避難しています。 12月14日、DAREDEMO HEROさんがアイスと物資を配りに行くとのことで同行させていただきました。 小学校の教室には数家族、校庭？には無数のテント 私もLynksさんからいただいた洋服を子どもたちに配らせていただきました。 あっという間に支援物資をもらうための長蛇の列。 子どもたちに洋服を配るプロジェクトのきっかけはこちら。 微力ながら他の支援者様の物資の配布も手伝わせていただきました。 子どもはやはり子ども 支援物資の中にいいオモチャが見つかろうものなら、我先に奪い合っていました。 スラムの子どもたちも他の子ども同様、遊びたいんだなぁと。 大人にも同様に配布がありました。 ある男性は子供のおもちゃを数個も選んでました。 後で被災者の生活を視察した時に知ったのですが、その男性には小さい赤ちゃんがいました。 自分の必需品よりも子どもを優先。 我が子を思う気持ちは国籍や人種は関係ないですね。 アイスをもらってご満悦 アイスはマンゴーと紫芋のアイスを2樽ありました。 洋服をもらった後、カップいっぱいに入ったアイスをもらい、子どもたちは御満悦?? みんな、嬉しそう。 年中常夏のフィリピンですが、避難所も冷房などありません。 ひんやり甘いアイスは最高のご馳走だったことと思います。 セブではチャリンコに乗ったおじいちゃんがよくアイスを売って回ってます。昔はわずか1ペソ。今でもたった5ペソ(約14円くらい)です。チロルチョコが昔10円だった頃を思い出しました。 被災中の住人の生活を視察 避難住民はテントや教室で暮らしてます。 テントは1世帯、教室には3世帯ぐらいいました。 教室に行くと孫をあやすおばあちゃん。 写真撮るよーというといろんな家族が集合してくれます。 テントの中には親子で頭のシラミ取りをしているのを見かけました。 私が知ってるスラムは墓地とゴミ山です。 トイレもないし水道も通ってません。 おそらくどのスラムもそんな感じだと思います。 避難所はまだ仮設トイレもあるし、水も自由に使えるので従来の生活よりマシそうです。 火災現場へ足を運ぶ 火災現場に行くと見事に平らになっていました。 火災ですべて燃え尽きた感じがしました。 瓦礫の中で何かを必死に探す人も。 あわよくば売れるものが見つかれば！という感じなんでしょうか。。 セブ島での火事は驚くほど頻繁に起こる 実は、私が初めてセブ島に来た時、火事の起きやすさに驚きました。 スラムの家はベニア板など、とても燃えやすい軽い建材 小さくて狭い場所に家がひしめきあって建てられている 調理は炭火かカセットコンロなど イリーガルタッピング(盗電) 上記のような理由で、火が回りやすくあっという間に燃え尽きてしまいます。 父から聞いた戦後の話をæ€

1ã„出した スラムの住人は元々違法で住み着いている人がほとんどです。 彼らが立ち退けば、国は道路などの土地開発ができると言う話を聞きました。 戦後に生まれた父の話を思い出しました。 私の故郷、広島でも戦後復興したい市街地にはまだバラックが立ち並び、同様に火事で燃えやすかったそう。 もちろん当時の日本政府や地方自治体も違法に住み着いた住人に立ち退いてほしい。 なので、火事が起こるとあえて遅れて消防活動をしたそうです。 日本にもそんな時代があったんですよ。 お墓やゴミ山だけではない、スラムにはまだ支援が必要 今回思ったのはフィリピンには数えきれないほど貧困地区があると肌身で感じました。 フィリピンには日本以外にもたくさんのボランティア団体がいます。 彼らが支援しなければもっと状況は酷いかもしれないと思うこともあります。 世界一ボランティアをしない国•日本を考察 実は、日本は 最もボランティアをしない国 だそうです。 たしかに、日本に住んでいた頃を思い出すと、周りにボランティアをしてる人は少なかったです。 ただ聞いてみると、興味のある人は沢山います。 ボランティアをしたいと思っても実行できないのはなぜなんでしょうか。 私も昔、ボランティアしたいと思ってもやることはありませんでした。 昔の私を考察すると、答えは 機会がなã

1„ から、です。 日々の忙しさにちょっとやりたいと思って忘れる、繰り返しです。 日本はなかなか後押しがないと、ボランティアに踏み切れないのが現実です。 さいごに 今回もスポットで洋服配布手伝わせていただきました。 日々活動をしているボランティア団体の方々には心から感謝します。 最後までこの記事をお読みくださり、ありがとうございました。 「子ども服をセブに送るプロジェクト」支援者の皆様 送料を送るためにご支援いただきましたみなさまありがとうございます！ 株式会社イーシーキューブ 様 ヤマモト コウ 様 中村 亜夜 様 満井 美恵 様 栗原デザイン室 様 TanTan 様 ハッピーちゃい夢 様 洋服の支援元 Lynks 様 支援に関する資料は[フィリピンセブ島の恵まれない子たちへ 支援物資送料寄付のお願い ](https://docs.google.com/presentation/d/1arV9Jb5vQHyKqKlpG0HS_nTLt4n9hdbw/edit?usp=sharing&ouid=117160028250625203295&rtpof=true&sd=true)をご覧ください。 DAREDEMO HERO Inc.の支援に興味がある方は、直接お問い合わせください。","noindex":false},{"slug":"entry478","title":"【ボランティア】セブ島スラム・カレッタ（墓地）に住む子どもたちへ洋服を配ってきました","date":"2021-12-14","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2021/entry478.webp","description":"「子ども服をセブに送るプロジェクト」！第2弾の洋服が届きました！みなさんのご支援のおかげです。心から感謝です。早速、洋服の一部をカレッタ墓地のスラムの子どもたちに配ってきたので、その時の様子をレポートします。ついでに住民のインタビューも同行しました。","tags":["セブ島ボランティア体験記","子ども服をセブに送るプロジェクト"],"body":"「子ども服をセブに送るプロジェクト」！第2弾の洋服が届きました！みなさんのご支援のおかげです。心から感謝です。 早速、洋服の一部ををカレッタ墓地のスラムの子どもたちに配ってきたので、その時の様子をレポートします。 ついでに住民へのインタビューも同行しました。 セブ島のスラムの子どもたちに洋服を配るようになった経緯 「子ども服をセブに送るプロジェクト」は最近一緒にお仕事をさせていただいている Blue Style 代表外谷さんとの、ちょっとした雑談から始まりました。 外谷さんが運営している「子ども服お下がりサービス Lynks」でちょっとしたシミ、小さな穴などの破損でお下がりできない服があるそうです。 元々子どもの洋服をムダにしたくないという想いから始まったサービスなので、出品できない洋服も廃棄はしません。リサイクル布として海外に出荷されます。 でも、誰かにお下がりしたかった洋服なんですよね 誰かに着て欲しいですよね。 そうだ！セブ島のどっかのボランティア団体に掛け合ってもらってもらおう おかげさまで第1弾は無事配り終わりました。配布の様子はYouTubeにまとめてます。 第2弾では2箱も洋服が届きました！！ 11月末、2箱届きました。私のせまーい部屋がでっかいダンボールで埋め尽くされました。前回、配るのがめちゃめちゃ大変だったので事前にサイズ別などで仕分けました。 おかげさまで、私の部屋はひどい散らかりようです。 現地ボランティア団体を通じてスラム街の子どもたちに洋服を配ります セブ島にはお墓とゴミ山に、いわゆる最貧困地区が存在します。カレッタには墓地があり、スラムの人々は墓地の管理、ロウソクを売るなどして生計を立てています。 セブ島のスラム街がどんなところか知りたい方はこちらもご覧ください。 洋服の一部は前回もお世話になったセブ島ボランティア団体・DAREDEMO HERO Inc.さんの支援地区カレッタ墓地で洋服を配らせていただきました。翌日、QQイングリッシュさんスポンサーでクリスマス会を開くそう。 子どもたちにとって、きっと初めてのパーティ。恥ずかしい思いをさせたくないな。 急きょ配ることにしました。 子ども、赤ちゃんにLynksさんからいただいた洋服を配るためカレッタ地区へ 当日はあいにくの雨。 真っ裸の子どもたちがシャワーがわりに雨を浴びていました。 前はその様子に驚いていましたが、お墓に行くのも人様のお墓に入るのも慣れてしまいました。 Daredemo Heroさんのラーニングセンターで洋服を配布させていただきました 今回はご好意でD

1aredemo Heroさんのラーニングセンターの中で洋服を配布させていただきました。 ラーニングセンターといっても実はお墓です。 早速棺の上に洋服を並べて、配布スタートです。 子どもたちはビサヤ語（セブ島で話されている現地の言葉）で遠慮なく話しかけてくるのでまったくわかりません。 アテ（お姉さん）以外はわかりません。 今回の配布で ララキ（男の子） と ババイ（女の子） は覚えました。 市街地だとフィリピン人は、ほぼみんな英語喋れるので格差を感じます。 彼らなりに好みがあるので、できるだけ要望を聞くようにします。 ちゃんとしたお洋服を着ると、フィリピンKidsはめっちゃ可愛いです！ 甚平（じんべい）いただきました^ ^ おかげさまでたくさんの子どもに洋服を配ることができました！ 洋服を提供してくださったLynksさん、送料を寄付してくださったみなさん（寄付にご協力いただいた方々もこの記事の最後に掲載しています）、心の底から感謝いたします。 今回の私の活動はあくまで現地NPO法人Daredemo Hero inc.さんのおかげで実現できています。 ありがとうございました。 その後、日本の学生からの墓地の住民へ質問 〜インタビューに同行〜 墓地の住民に日本の大学からのオンランインでのインタビューをするということで、私も同行させてもらいました。 大学は私の地元・広島にある修道大学です。 修道大学の通訳翻訳プログラム生と健康栄養学科生と協力し、墓地の住民の栄養状況を改善するというプロジェクトを行っているそうです。 その日はちょうど墓地の環境や住人の食生活の状況などを聞いて回るとのことでした。 健康栄養学科生がスラムの住民にインタビューする様子がなかなか興味深かったです。 Daredemoスタッフの英語講師でもあるMayさんがビサヤ語と英語、通訳翻訳プログラム生が英語と日本語を翻訳します。 実はフィリピンはアジアで第2位の英語力 （2021年EF English Proficiency Index調べ）で世界でも18位です。 ※ ちなみに日本は78位で世界的に能力レベルは低いとのこと涙。 実践的な英語の勉強 、 社会貢献 もでき、誰もが Win Win になれる素晴らしい取り組みだと感じました。 インタビューやカレッタ墓地の訪問を通じて知ったことを少しご紹介します。 お墓の入り口には...? お墓の入り口にはサリサリストアなどがあり、ジャンクフード、参拝者向けの花やロウソクが売ってます。 売られているロウソクは、実は子どもたちなどが墓場から使い古されたロウソクを集めて再生したものです。 参拝者が少なければもちろん、ロウソクを作れる量も減るそうです。 あんな狭いところに ~ 8人ぐらいで住んでいる フィリピンといえば大家族が多いのですが、もちろんスラムも一緒です。 多くて8人ぐらいで住んでいて、プライバシーは布切れや板ぐらいでしか守れないです。 大抵の家庭では、棺（ひつぎ）をベッドとして代用しています。 もちろん住所などありません。出生届もほぼ出してないそうです。 カセットコンロや炭で料理 結構カセットコンロが各家庭にあります。中には炭火で調理する人もいるみたいです。 貧困で十分食べるものがないはずなのに肥満が多い 墓地には驚くことに、あちらこちらに

1肥満の子どもたちがいます。とりあえずお腹が満たされればいいという感じで、米やジャンクフードばかり食べているそうです。 さらに、ある家庭では数日で350mlくらいの油を使い切るとのこと。なんか、納得。 隠れ栄養失調も多いとか。 にっこりと笑うと目で見てわかるほど黒い歯... すっごく可愛い女の子も、にこりと笑うと虫歯に蝕まれた黒い歯が。。。 もちろん歯磨きなんてしません。水なんて通ってないですもん。飲料水を買うのが精一杯です。 江戸時代には、虫歯や歯周病で早死する人も多かったそう。侮れない病気です。 最後に 「子ども服をセブに送るプロジェクト」 は誰もためでもなく、自分のためにやっています。 この活動はあくまで私ができる社会への投資！！微力ですが... 社会が良くなれば巡り巡って私や私の周りの人間が幸せになれると信じています。 一人でも多くの子どもたちが学べ、健康に大人になれたらその子どもたちは将来社会に貢献すると思っています。 どのボランティア団体関係なく、私の小さな力でもお役に立てるなら協力します。 私はあくまでスポット（単発的に）で個人的にお手伝いをしているだけです。 毎日活動しているボランティア団体の方々には本当に感謝です。 最後までお読みいただきありがとうございました。 「子ども服をセブに送るプロジェクト」支援者の皆様 送料を送るためにご支援いただきましたみなさまありがとうございます！ 株式会社イーシーキューブ 様 ヤマモト コウ 様 中村 亜夜 様 満井 美恵 様 栗原デザイン室 様 TanTan 様 ハッピーちゃい夢 様 洋服の支援元 Lynks 様 支援に関する資料は[フィリピンセブ島の恵まれない子たちへ 支援物資送料寄付のお願い ](https://docs.google.com/presentation/d/1arV9Jb5vQHyKqKlpG0HS_nTLt4n9hdbw/edit?usp=sharing&ouid=117160028250625203295&rtpof=true&sd=true)をご覧ください。 DAREDEMO HERO Inc.の支援に興味がある方は、直接お問い合わせください。","noindex":true},{"slug":"entry477","title":"Gatsby アップグレード時にハマりました","date":"2021-12-12","modifiedDate":"2026-06-16","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"Gatsbyのv2からv4へのアップグレードエラーでハマっている方へ、私が解決した方法を解説。しかし現在、Gatsbyはレガシー化しています。これ以上のバージョンアップに時間を溶かすより、GraphQL強制のないNext.jsやAstroへ移行すべき理由と、具体的なリプレイス手順までご紹介します。","tags":["React","JavaScript"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 お久しぶりです!!!念願の久々更新です。2021å¹´7月から進めていたウェブサイトのリニューアルがようやく終わりました！涙WebP対応しつつv3にアップグレードする予定たったのですが、 starter kit のインストールのエラーでハマってできませんでした。この記事はGatsbyでブログなどを運用していてv4にアップグレードしたいけどエラーでハマってインストールできない方への記事です。私がどうやってエラーを解決したかをご紹介します。 v5へのアップグレード方法はこちら。 Gatsby v4がリリース！ Gatsby v4がリリースされましたね！(12日前とあるので2021/12/1リリースかな？) 当ブログも半年越しにようやくv4にと重い腰をあげることになりました！ Gatsby is a modern web framework for blazing fast websites. Gatsby 高速なウェブサイトを実現するためのフレームワークです イãƒ

1³ã‚¹ãƒˆãƒ¼ãƒ«ã—ようにもコケる。猶予が土日しかなかったので焦りもあって、間違った方法ではありますがなんとかアップグレードにこぎつけました。 Gatsbyブログサイト移行物語（現在12記事）もv4対応しました！ 昨年から移行を機に書いている「Gatsbyブログサイト移行物語」もv4対応しました。v4から新たにGatsbyでブログを始めたい人方は「インストールからデプロイまで」からお読みください。 一覧出力、ページネーション、サムネイルの出力方法など紹介しています。 Gatsby関記事も併せてどうぞ。 アップグレード方法 v4でgatsby starter blog のインストールが走らなかったのは単にnpmのバージョンが低いだけだと発覚し2021/12/12に執筆した記事を大幅に修正しています。 この記事では私の反省も踏まえて、正しい方法をご紹介します。 単純にnpmのバージョンが足りなかったことが発覚 #### Minimal Node.js version 14.15.0 We are dropping support for Node 12 as a new underlying dependency (lmdb-store) is requiring >=14.15.0. See the main changes in Node 14 release notes. Migrating from v3 to v4 14.15.0以上じゃないと動きませんとちゃんと公式に書いてあるじゃん。。。 npm7を使う場合は結構面倒で、8が好ましいです。 Homebrewから最新のnodeをダウンロードして、切り替えます。 使いたいバージョンを選択。 こちらの記事も参考にしました。 macのnodeのバージョンが上がらない!?ブラックボックス化したmacのnode環境を作り直してみる。 補足。上記記事中にはシンボリックを貼る場所は.bashrcとありますが、私の環境下では.bash_profileに設定してあります。人によって環境が違うので気をつけてください。 以下も参考に。 .bashrc|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 インストールされているか確認します（sudoいるかもです）。 gatsby-cli をインストール バージョンアップ後の nodebrew には gatsby-cli がないので改めてインストールします。 グローバルにインストールされているモジュールを確認。 おまけ・古いnodeでもモジュールを追加したらgatsbyJSが構築できた 古いnodeでもモジュールを追加したらgatsbyJSが構築できます。 私は最初この方法で対応してしまいましたが、後からnodeをアップグレードすればいいだけと発覚しました。 手順だけ残しておきます。 gatsby cli を v4 用にアップグレードしたもののエラーをもとにググったら、グローバルの node module がいくつか足りないみたい。 それでも走らないので、npmのキャッシュを強制的にクリア。 キャッシュで不具合が起きてたのかはちょっと不明です。 これで走らなければ以下も入れてみてください。 上記を入れた際にもキャッシュクリアしてください。 これで古いNodeでも走るようになりました。詳しくは調べてませんが、新しいNodeでの不足分のモジュールを入れたから動いたのだろうと思っています。 その後、すでにv4に対応済みの gatsby starter blog を入れてみます。 Netlify にデプロイして動くか確認 このブログは Netlify を使ってます。 別にgithubでリポジトリを立てて、一旦デプロイして動くか確認。ちゃんと動きました！！ githubとNetlifyの連携の仕方がわからない方はこちらをご覧ください。 まとめ・Gatsby v4 に対å¿

1œã™ã‚‹éš›ã€ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ä¸­ã‚¨ãƒ©ãƒ¼ã§ã‚³ã‚±ã‚‹å‰ã«å¿…須バージョンを確認しよう 仕事が忙しくて放置してたのもありますが、やっと更新できるようになりました！ 面倒臭くて公式リファレンスをしっかり読んでなかったのが原因でかえって遠回りしてしまいました汗 Gatsby v4 は超便利になりました。 v2から2世代のアップグレードで参考にならないかもしれませんが、逆にムダなコードをかなり書かなくても済んだり frontmatter の扱いなど変わっています。 今回markdown系の快適機能も追加しました！以下に方法をまとめてます。 今回も、最後までお読みいただきありがとうございました。 この記事があなたのコーディングライフの一助となれば幸いです。","noindex":false},{"slug":"entry476","title":"【GAS】Googleスプレッドシートにファイルアップロード機能を自作してドライブに保存する方法","date":"2021-06-26","modifiedDate":"2026-06-08","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry476.webp","description":"Google Apps Script（GAS）を使い、自作フォームからGoogleスプレッドシートやドライブへファイルを自動アップロード・リネーム保存し、ファイル情報をスプシへ自動追記する実装編を徹底解説！","tags":["GAS","JavaScript"],"body":"プログラミングで事務作業を自動化してラクしよう！ 前回に続き、Google Apps Script（GAS）を使ってファイルを管理する方法を紹介します。 ⚠️ 読者の方へ：検索から来られた方へ この記事は、通常のExcelファイルをスプシのメニューから手動でインポート（アップロード）する方法ではなく、 「GASを使って独自のWebフォーム（UI）からスプレッドシートやGoogleドライブにファイルを自動アップロードする機能を開発する方法」 を解説しています。 この記事では、自作のアップロード機能を実装する「保存・自動追記編」として、以下の3ステップをガッツリ解説します。 1. Googleスプレッドシート（Webフォーム）からファイルをシステムへアップロード 2. 社内ルールに沿ってファイルを自動でリネーム保存 3. スプレッドシートの台帳へファイル情報（URLリンク等）を自動で追記・一元管理 手作業を極限まで減らして、スマートな書類管理システムを構築していきましょう！ スプシからファイルをアップロードしてドライブに保存するまでざっくり この記事は「人のやる作業を減らしたい」、「書類を管理するためにルールを厳格に守りたい」、「個人で会社や仕事を切り盛りしている」方にオススメです。 この記事は、【GAS】スプシからファイルアップロードし、ドライブに保存する・UI編の続編です。 ファイルアップロード用のコードを書きます。手順としては以下の流れです。 1. スプシを準備（済） 1. GASのプロジェクト作成（済） 2. アップロード用のモーダルパーツを作成（UI追加）（済） 3. バリデーションで保存するファイルのサイズやタイプを判定（済） 4. Googleドライブでファイルを保存しリネーム 5. スプシにファイル情報を書き出す 6. メニュー操作で保存処理を常に実行できるようにする ※ （済）は前回の記事で紹介しています。 1 ~ 4を確認したい方は前回の記事をお読みください。 請求書の整理を例にとって進めていきます。 ファイルがフォルダーに格納されるイメージ Googleドライブにファイルを格納する ファイルを格納するフォルダーを作ってコードを書いていきましょ！ 請求書を格納するフォルダーを作る 請求書を格納するためのフォルダーをGoogleドライブ上に作成します。 今回はフォルダー名を請求書としました。IDをメモっておきます。URLのfolders/以降がIDです。 https://drive.google.com/drive/u/0/folders/【ID】 ファイルを格納するコード 【GAS】スプシからファイルアップロードし、ドライブに保存する・UIç·¨ã

1§ä½œã£ãŸé–¢æ•°sendFormを書き換えます。ファイルを取得し、フォルダーに格納するまでのコードです。 ファイルをリネームする ファイルを管理用のIDでリネームします。 今回は請求書なのでinvoice + -（ハイフン） + 五桁の数字としました。 ID生成のコードはこちらです。スプシに登録された請求書数からIDを作っていきます。 getNextDataCell(SpreadsheetApp.Direction.DOWN).getRow()は2行以上連続でセルに値がないと取得できません。 ファイルが未格納の場合は1にしておきます。 生成したIDでリネームします。 setNameでファイル名を変更できます。保存が終了したらBrowser.msgBoxを使ってメッセージボックスを表示します。 実行すると権限を求められるので許可します。許可の仕方が分からない方は前回の記事権限の許可を参考にしてください。 処理が終わると新しい請求書「invoice-xxxxx」を保存しましたと表示されます。 リネームされたファイルがちゃんと指定されたGoogleドライブのフォルダー内に格納されます。 できた！！ ドライブには同じ名前のファイルがアップロードできますよね？ファイル名を自動でつけると重複することがないので、後々困らずにすみますよ！ スプシにファイル情報を書き出す ファイル以外のデータも取得します。 顧客名はデータシートからデータを引っ張ってきて照合します。 それぞれデータができたら、シートに出力します。 実行するとこんな感じになります。 請求書などのファイルを一元管理！IDのリンクからファイルに飛べるので、ファイルをいちいちドライブで探す必要がなくなりますヨ！ sendFormのすべてのコード ファイルをリネームしてドライブに保存し、スプシに書き出すまでの処理です。 メニューから操作して保存処理を常に実行できるようにする メニューを表示するための関数をコード.gs（GAS）に追記します。 functionNameに前回【GAS】スプシからファイルアップロードし、ドライブに保存・UIç·¨ã

1§ä½œã£ãŸã€ãƒ•ã‚©ãƒ¼ãƒ ã‚’スプシ上に出力するための関数showMdalをセットします。 setMenuを実行します。 スプシ側で確認するとちゃんとメニューができました！！ 常にメニューをスプシ側で表示する トリガーから「トリガーを追加」を選びます。 関数にsetMenuをセット。あとは、デフォルトのままで大丈夫です。 これでスプシ起動時にメニューが表示され、いつでもファイルをアップロードできるようになりました。 まとめ・GASはやっぱり便利じゃわー（広島弁） 今回は前回のアップロードフォームのパーツ表示に続き、ファイルにバリデーションをかけてアップロードし、スプシにデータを書き出す方法をご紹介しました。 普段の事務作業を少しでも減らしたくてGASを使ってみたら便利だったのでこの記事を書きました フォルダー自動生成に関しては、こちらの記事を参考に！ トリガーで定期的にメール送信したい方はこちらを参考にしてください。 皆さんの事務作業軽減の一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry475","title":"【GAS】スプシからファイルアップロードし、ドライブに保存・UIç·¨","date":"2021-06-24","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry475.webp","description":"プログラミングで自動化してヒューマンエラーを減らしたい！Google Apps Scriptを使うとスプシ（Googleスプレッドシート）からドライブへリネームしたファイルを保存したり、保存したファイル情報をスプシに自動で記録しておくことができます。今回は、1.スプシ上にフォーム（UI）を表示、2.スプシの値をフォーム側に出力、3.ファイルのタイプや容量制限するコードを紹介します。","tags":["GAS","JavaScript"],"body":"プログラミングで自動化してヒューマンエラーを減らしたい！Google Apps Scriptを使うとスプシ（Googleスプレッドシート）からドライブへリネームしたファイルを保存したり、保存したファイル情報をスプシに自動で記録しておくことができます。 今回は、 1. スプシ上にフォーム（UI）を表示 2. スプシの値をフォーム側に出力 3. ファイルのタイプや容量制限するコード を紹介します。 はじめに。こんなお悩みがある方へ Googleドライブ内のあの書類どこ行ったけ？ ファイル名の書類が何個もある！どっちだっけ？ ドライブのフォルダー内が汚くてイライラ JavaScriptが分かって、Googleアカウントさえあればこのお悩みを解決できます。 今回はGoogle Apps Script（GAS）を使って、請求書など分類としては一緒だけど命名規則やファイル形式が違う書類をスッキリ整理する方法を具体的に紹介していきます。 人間ほど間違えるイキモノっていないよね？だったらルールを決めてしまって、ルール通りにファイルを管理しよう！！ ちなみにフォルダー管理を自動化したい方はこちらの記事を参考に。 スプシからファイルをアップロードしてドライブに保存するまでの大まかな作業の流れ ファイルアップロード用のコードを書きます。手順としては以下の流れです。 1. スプシを準備 1. GASのプロジェクト作成 2. アップロード用のモーダルパーツを作成（UI追加） 3. \\bバリデーション・保存するファイルのサイズやタイプを判定 4. \\bGoogleドライブでファイルを保存しリネーム（次回） 5. \\bスプシにファイル情報を書き出す（次回） 6. \\bメニュー操作で保存処理を常に実行できるようにする（次回） ※ （次回）は次回の記事で紹介します。 ファイルがフォルダーに格納されるイメージ スプシを準備 まずは1こ、スプシを準備します。スプシ名は今回請求書管理とかにしておきましょう。 今回は案件ごとに管理するため、請求書とデータの2つのシートを用意します。 「データ」シートに案件名、顧客名、ステータスを登録しておく データには「案件名」、「顧客名」、「ステータス」を登録しておきます。 本来はシートを分けたほうがいいのですが、今回「ファイルをGoogleドライブに保存する方法のご紹介」なので、便宜上まとめています。 C列に以下請求書のステータスを入力しておきます。 請求書発行済 請求中 支払済 「請求書」シートに見出しなど登録 「請求書」シートをつくり、一行目にid、案件名、顧客名、ステータス、請求日、支払日を見出しとして登録しておきます。 「データの入力規則」から、データシートのC列（$C$2:$C）の値を条件に設定しておきます。無効なデータの場合に「入力を拒否」にチェックを入れておきます。 これでシートの下準備は完成です！ GASのプロジェクト作成 Google Apps Script（GAS）のプロジェクトを作成します。 先ほど作ったスプシから「メニュー」 > 「ツール」 > 「スクリプトエディタ」を開きます。 このままだと左上のタイトルが「無

1題のプロジェクト」なっているので、そこをクリックしてプロジェクト名を管理上変更します。ここでは「請求書作成」としておきます。 Chrome V8 ランタイムを無効にする（2021年6月現在） Chrome V8 ランタイムが有効だとファイルがアップロードできません。設定から、チェックを外しておきます。 ただ、チェックを外すとテンプレートリテラルやletなど新しめのコードが書けなくなります。 アップロード用のモーダルパーツを作成（UI追加） フォームアップロード用のHTMLファイルを追加します。追加の仕方はスクリプトエディタの左のメニュー、「ファイル」から「HTML」を選びます。 今回はファイル名を「upload」としておきました。これでUIパーツ用の「upload.html」ファイルができます。 ファイル作成直後のデフォルトコードはこんな感じ。 このフォームで入力した日付、案件、ファイルをサーバー側へ送信できるようにします。 各パーツを表示するためのコードを書きます。 案件のプルダウン用の部分は、シートからデータを取ってくるので後ほどコードを追加します。 ※ ここではinputのtype=dateを使っていますが一部のブラウザで機能しません。Chromeを利用することを前提で進めています。 モーダルを表示するため「コード.gs」に以下関数を追加。 関数名が「showModal」になっているのを確認して実行します。 権限の許可 権限を求められるので、許可します。 左下の「詳細」を押して、「プロジェクト名（安全じゃないページ）に移動」をクリックします。 あとはアクセスの許可をすればOK。 これでスプシ側にファイルアップロード用のフォーム（UI）が表示できるようになりました。 値がGAS（サーバー側）で受け取れるかチェック フォームの値がGAS（サーバー側）に送れるかチェックします。 ボタンのコードを書き換えます。 google.script.run.関数名でGAS側にデータを送信できます。 ボタンの親タグであるformタグのデータを送信したいので引数をthis.parentNodeとします。 さらに「コード.js」側にもsendForm関数を追加し、データの取得を確認します。 関数「showModal」を実行し、スプレットシート側でファイルや日付を入力し、「アップロード」ボタンをクリックします。 左メニューの「実行数」から最新の関数「sendForm」を確認します。値が取得できていたらOK！ 日付のデフォルト値と案件一覧のプルダウンを追加するコードを書く showModalにコードを追記します。 日付のデフォルト値を追加します。今日にします。値はゼロパティングで0000-00-00年は4桁、月と日は2桁になるように調整します。 ※ JSの月を取得するgetMonthメソッドは0始まりなので1プラスする必要があります。 案件名一覧をスプシから取得します。データのA列です。 取得したい列の最終行を取得し、一気にgetValuesメソッドでシートのデータを一気に取得します。 ※ getValueとgetValuesがあるので間違えないように注意してください。 getValuesで取得した値は2次元配列になります。 HTML側で値を出力します。EJSちっくな書き方です。 これでフォーム上でGASから取得した値が表示できるようになりました！！ バリデーション。保存するファイルのサイズやタイプを制限 なんでもポンポンアップロードされても困るので、ファイルのアップロードできるサイズと種類を制限します。 合わせて\\bファイルがない時もフォーム送信できないようにしておきます。 今回はHTML側のJSで制御します。 初期状態で送信ボタンを押せないようにしておく ボタンにname属性とdisbled属性を付与します。初期状態ではdisbled=trueをセットし、ボタンを押せないようにしておきます。 アップロードファイルに制限をかける ファイルのinputタグにonchange属性と関数fileChangeを追加します。 値が変わった時に判定を入れ、処理します。 fileChangeの詳細は

1scriptタグ内に記述します。 要素.files[0]でファイル情報が取れます。今回はtypeとsizeの値を判定します。 ファイルアップロードの条件 | 種類 | 条件 | | -------- | ----------------------------------------- | | サイズ | 10Mバイト以下（1000000バイト） | | タイプ | MIMEタイプが「pdf」、「png」、「jpg」のみ | それ以外は警告文を出力し、valueに格納されたファイル情報も削除します。 ボタンの二度押し防止処理を入れます。onclickに直書きしていた関数を外に出します。 クリック後didabled=trueでクリックができない状態にした上で、サーバーにデータ送信します。 name 属性の値と関数名が被らないように気をつける name属性の値と関数名が一緒だと関数が動かないことがあります。関数とname属性が被らないように気をつけましょう。 データの取得を確認 GAS側（サーバー側）でデータを受け取れたか確認します。 sendFormにはconsole.logを仕込んだままになっているので、そのまま使います。 実行数を確認します。フォームから飛んできた値が取得できましたね！！ ここまでの全ソースはこちら GAS upload.html まとめ・UIを作るところまでは意外とカンタン こんな便利な機能をタダで使わせてくれるなんてGoogleは神かと思いますw 一度作ってしまえば長く使えます！GASで仕事を効率化して、しっかり本業に集中しましょう！！ 続きもありますのでぜひ合わせてお読みいただき、効率化ライフを満喫してください！ トリガーで定期的にメール送信したい方はこちらを参考にしてください。 続きの記事も合わせてお読みください 次は実際ドライブに保存し、ファイルの詳細を自動でスプシに追記します。","noindex":false},{"slug":"entry474","title":"【GA4】 Analytics と Google タグマネージャーを連携（画像解説28枚アリ）","date":"2021-06-20","modifiedDate":"2022-06-04","category":"seo","categoryName":"SEO対策・デジタルマーケ","ogImage":"/thumbnail/2021/entry474.webp","description":"タグマネージャーの導入方法とGoogleアナリティクス（旧アナリティクスとGA4）との連携方法をご紹介。電話発信回数やCVエリアのクリック数の計測方法を解説。具体的にはタグやトリガー、組み込み変数の使い方やタグ発火の確認方法などを詳しく解説。","tags":["Web解析"],"body":"タグマネージャーの導入方法とGoogleアナリティクス（旧アナリティクスとGA4）との連携方法を画像多めで初心者でもわかりやすくご紹介しています。 電話発信回数やCVエリアのクリック数を測定したくて設定したのですが、すぐ忘れちゃいそうなのでメモとして記事化しました。 具体的にはタグやトリガー、組み込み変数の使い方やタグ発火の確認方法などを詳しく解説しています。よろしければ参考にしてください。 この記事の対象 タグマネージャー初心者 GA4とタグマネを連携したい ユニバーサルアナリティクス（旧：アナリティクス）とタグマネを連携したい 実はタグマネージャー（通称タグマネ）はサイトが重くなるという理由で今まで使ってませんでした。 計測するものが増え今回思い切ってタグマネに切り替えました。 この記事では簡単なイベント登録方法を紹介していますが、デバック方法なども紹介しています。よろしければ参考に！ タグマネージャーとは？ タグマネージャーとは、タグを一括で管理するツールのこと。データを取得するためにタグを設置します。 例えば、ボタンなどのクリック数を計測したいなどありますよね？ タグマネージャーを使わない場合、タグはhtmlへ直書き実装していました。 ちょっとコードを書きなれていない方にはハードルが高いですよね。。。 こんな面倒なコードを書くことなく、タグマネージャーの管理画面からタグを実装できます。 タグマネージャーは計測用のタグを手軽に設置し一元管理できるツール。 タグマネージャーアカウント作成後、コンテナを作る アカウントを作成し、コンテナを作成します。 アカウント作成 アカウント名 ... 組織名がベストかと 国 ... サービスを提供する国で コンテナ設定 コンテナ名 ... サイト名とか プラットフォーム ... ブログなどはウェブサイトでOK。特殊じゃない限りこれで大丈夫だと思います。 これでタグマネージャー設置用のコードが発行されます。 タグマネージャーのインストールとは、ようは指定された場所にコードを貼るだけ。 headタグ内の上部とbody開始タグの直後の2箇所にそれぞれコードを貼り付けます。 もしコードを再取得したいときは、タグマネージャーのIDをクリックすると確認可能です。 WordPressなどのプラグインやテーマによってはタグマネージャーのIDさえあれば設置可能のこともあります。 タグを設置してGAと連携 早速Google Analyticsと連携します。今回はユニバーサルアナリティクス（旧）とGA4（新）の連携方法をご紹介しておきます。 ※ 私はユニバーサルアナリティクスとGA4のデータを併用して計測しています。 ユニバーサルアナリティクスと連携する タグを追加します。 タグの種類からユニバーサルアナリティクスを選択します。トラッキングタイプはページビューでOKです。 Googleアナリティクス設定で新しい変数を定義します（後々イベントトラッキングなどで使用するため）。 ユニバーサルアナリティクスのトラッキングIDはGoogle Analyticsの管理（歯車マーク）プロパティから確認できます。 トラッキングIDをコピーしたら、変数のトラッキングIDに貼り付けます。ユニーバーサルアナリティクスIDとかわかりやすい名前で保存しておきます。 最後にトリガーを設定します。All PagesでOKです。 必要であればタグ名を変更して保存します。 タグがきちんと実装できたかは、タグ発火の確認方法とコンテナ公開を参考にしてください。 GA4と連携する 次はGA4と連携しましょう。ユニバーサルアナリティクスよりもっとカンタンです。 ただ、トラッキングIDのある場所がややこしいので注意です。 設定（歯車マーク）からプロパティ、データストリームで指定のストリームを選び、詳細の中に測定IDがあります。 タグを追加し、タグの種類をGoogleアナリティクス:GA4設定にします。 ユニバーサルアナリティクス同様配信トリガーをAll Pagesに設定したらGA4などわかりやすい名前をつけて保存します。 タグがきちんと実装できたかは、タグ発火の確認方法とコンテナ公開を参考にしてください。 タグ発火の確認方法とコンテナ公開 設定したものの、IDの記載ミスなどでタグがうまく動いていないなんてこともあります。 タグがちゃんと発火しているか確認した上でコンテナを公開します。 タグ発火の確認方法 プレビューをクリックし反映しているか確認します。 Tag Assistantというツールが別タブで開きます。確認したいサイトのURLを入力し、「Connect」ボタンをクリック。 For an improved debugging experience, install the Tag Assistant Companion browser extension.と言われるので、ChromeのエクステンションをDLして併用することも可能ですが、なくても大丈夫でã

1™ã€‚ Continueを押して、全体を確認します。 さらに別タブで対象のサイトが開きます。 Tags Fired（発火しているタグ） のなかに設置したタグ名が含まれていればOK!!! さらに管理画面からリアルタイムで確認してみます。 イベントなどのタグは、実際にトリガー（クリックなど）されないと発火しません。なので、Tag Assistantで開いたタブの中で実際トリガーさせてみます。 反応しないときはページをリロードするなどしてみましょう。反映しない場合は拡張機能のオプトアウト、IP除外なども確認してみましょう。 コンテナの公開 コンテナを公開します。 コンテナーはバージョンごとに管理できます。もし「前のバージョンに戻したい！」って時は戻せます。 バージョン名とバージョンの説明はなくても公開できますが、元に戻す可能性があれば書いておいた方が良いです。 イベントの登録 イベントをタグマネで登録してみましょう！ユニバーサルアナリテティクスとGA4両方紹介します。 今回は、携帯からの電話発信とコンバージョンボタンのクリック数を計測する方法をご紹介します。 組み込み変数を設定する（共通） 左のメニューの「変数」から設定を開き、必要な組み込み変数を追加しておきます。 | 変数 | 詳細 | | --------------- | ------------------------------ | | Click Classes | クリックされる要素のクラス | | Click Element | クリックされる要素名 | | Click ID | クリックされる要素のID | | Click Target | クリックされる要素のtarget属性 | | Click Text | クリックされる要素のテキスト | | Click URL | クリックされる要素のURL | トリガーを設定する（共通） 携帯からの電話発信とコンバージョンボタンのトリガーを設定します。 どちらもトリガータイプをリンククリックとし一部のリンククリックにチェックします。 条件を設定します。タグに含まれるリンクやクラスを組み合わせて、一致する要素のクリックされた時をトリガーとします。条件は「含む」か「一致」でいいと思います。 電話発信 CVクリック イベント用タグの登録 イベント用のタグを登録します。 ユニバーサルアナリティクスでのタグ設定 タグの種類はユニバーサルアナリティク、ストラッキングタイプをイベントに設定します。 | ディメンション名 | 補足と詳細 | | ---------------- | -------------------------------------------------------- | | カテゴリ | イベントのカテゴリ名です。一般的に行為に対する対象物です | | アクション | ユーザーのアクション | | ラベル | 計測するデータの最小単位など | 今回2つともボタンなので、カテゴリはbuttonとしました。 Googleアナリティクス設定でトラッキングIDが格納されている変数を選択します。 それぞれトリガーも設定します。 電話発信 アクションはcall、ラベルは場所も取得したかったので、電話発信:ページパスとしました。 CVボタンクリック アクションはclick、ラベルはサイドバーCVボタン:ページパスとしました。 タグ発火の確認方法とコンテナ公開を参考に、プレビューで実際に試してみましょう。 Tags Firedにタグが移動したら成功です。 併せてアナリティクス管理画面のリアルタイム>イベントでも確認しましょう。 イベントのカテゴリ・アクション・ラベルを最初めっちゃ考えておいた方がいい CVに至るまでにたくさんイベントを登録するかと思いますが、今回自分のサイトでめちゃ思ったのがイベントのカテゴリ・アクション・ラベルのルールをちゃんと決めてなかったことを反省しました。 GA4でのタグ設定 タグの種類をGoogle アナリティクス: GA4 イベントとし、設定タグにトラッキング用で作成したGA4用のタグをセットします。 イベント名とタグ名は間違えそうなので同じにしておくのが良さそうです。 電話発信GA4 CVボタンクリックGA4 まとめ・GA4とタグマネージャーの連携はカンタン やってみるとã

1‚¿ã‚°ãƒžãƒãƒ¼ã‚¸ãƒ£ãƒ¼ã¨GA4の連携はユニバーサルアナリティクスよりもカンタンでした。 タグマネージャーでのデバック方法の記事もあります。よろしければ参考に！ 私のサイトはついでにHotjar、Adもタグマネから追加しました。一元管理サイコー。 こんなにラクならさっさと導入すればよかった。。。 皆さんのSEOライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry473","title":"長女は性格がきつい？つらい現実と親に嫌われてると感じる呪縛を紐解く","date":"2021-06-18","modifiedDate":"2026-07-11","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2021/entry473.webp","description":"なぜ長女は性格がきついと言われ、つらい現実を抱えるのか。親に嫌われてると感じる呪縛や、長女に生まれたくなかったという深い葛藤のメカニズムを紐解きます。過保護や干渉過多に縛られず、自分自身の人生をありのままに受容し、前を向いて生きるための勇気を受け取るためのリアルな考察です。","tags":["家族"," 磨耗しない人生"],"body":"【2026å¹´6月 追記】 2021年に書いたこの記事ですが、今でも多くの「長女の方」や「その家族の方」に読んでいただいています。 時代が変わっても、家族という最小単位のコミュニティの中で、最初に生まれた子が背負う 見えない重圧 は根強いものがあります。私自身、兄弟の姿を傍らで見てきた実感を大切にしながら、今の視点で内容を一部見直しました。 この記事でわかること 長女が 性格がきつい と言われてしまう構造的な理由 親に嫌われてると感じてしまう呪縛の解き方 自分自身の人生をありのままに受け入れ、楽に生きる方法 日本には、真面目に頑張るがゆえにつらい思いをしている長女が多い気がします。 長女に生まれたくなかった とまで思い詰めるその生きづらさは、決してあなたのせいではありません。そこには、親側の手探りの育児や、過保護、干渉過多といったメカニズムがあります。 今回は、長女が抱える呪縛の正体を客観的に紐解きます。 当の長女の方にとっては、一歩引いた視点から自分を見つめ直すきっかけになるはずです。心がすっと軽くなり、これからの人生を自分のために生きる勇気が湧いてくる、その一助となれば幸いです。 以前、兄弟の性格にまつわるブログを書きました。私は4人兄弟の中で育ち、それぞれの立ち位置が性格に与える影響の大きさを実感しています。 個人的に血液型や星座はあてにならないと思ってますが、生まれた順番は性格にわかりやすく表れると痛感しています。 中でも長女はその典型です。成長の過程でどのようにその性格が形成され、なぜ生きづらさを抱えるようになるのか。一歩引いた視点からその背景に迫ります。 なぜ長女は性格がきついと言われ、生きづらさを拗らせるのか？ 私の出会った長女はなぜか拗らせてる人が多いです。 なぜ、長女は拗らせるのか。その原因について、周りの長女を参考に私なりの分析です。 長女は両親にとって初めての子供であり、手探りの状態で育てられるから 一番最初に生まれたがゆえに長女は両親の期待を一心に受けがちです。 うちの家を例にとります。 両親とも実家が貧しく、父は高卒。ちなみに母は中卒です。貧困で進学できなかったからです。 私が記憶する 5 歳ぐらいまでは超貧乏で市営住宅の 4 畳半の 1 室に兄弟 3 人放り込まれていました。 父は大学の推薦状をもらえていたほどの努力家でした。金銭的な理由で大学進学は叶いませんでした。高校卒業後、土木関係の仕事でしたが並々ならぬ努力で当時広島市内の新興住宅地へ引っ越すことができました。高度成長期、周りはホワイトカラーのお父さんばかりでした。 そんな父は子どもに多大な夢を託します。期待を一番にされるのは一番最初に生まれた長女です。 姉には広島で一番頭のいい大学に行ってほしいと、そんなプレッシャーをかけていたようです。 「お姉ちゃんだから」という過保護と干渉過多がもたらす呪縛 生まれ順はあるものの、みんな子供っちゃ子供。 親は決まり文句として、つい「お姉ちゃんだから我慢しなさい」「お姉ちゃんだからしっかりしなさい」なんか言います。 お姉ちゃんの心境はいつも「妹・弟たちは遊んでるのに自分だけ我慢したり、手伝いたくないことを手伝わなきゃいけないのか」だったと想像します。 そんな時の長女の心境は惨めになる。 でも母親は必殺技を持っています。 「やっぱり、お姉ちゃんは偉いね！」「さすが、お姉ちゃん！」 親に褒められることは長女にとって最大のご褒美。

1妹や弟に勝てる瞬間だから。 母親や父親に褒められたいがために必死で言うことをきく「いい子」ができ上がります。 やり場のないストレスから陰で妹をいじめる 姉は常にやり場のないフラストレーションを抱えています。 たかが年齢が数年しか違わない子供同士なのに親からの期待や責任に差があるんです。理不尽ですよね？ いい子にしてもっと親に褒めてもらいたい。でも何もしなくても可愛がられてる妹や弟が憎らしくなる。 と言うことで、長女のやり場のない怒りの矛先は弱い妹や弟に向きます。 どの家庭でも長男は母親にとってかわいいことが多いです。母親に嫌われたくない時の長女のターゲットは当然妹に向きがちです。 だからか知りませんが、私は小さい頃子どもの頃からコテンパンにいじめられました。 おばあちゃんに愛想よく挨拶できなかったという理由で、隠れてカバンでぶん殴られたこともあります。 ※ 今でも根に持ってるので 500 回ぐらい姉には言ってます。 私も理不尽に姉にいじめられたフラストレーションを妹に派手にぶつけました。 親に嫌われてる長女だと感じてしまう「長女病」の正体 長女は「お姉ちゃん」だからと言う理由で親の期待に応えることで褒められ、幼い頃から自己肯定感を得ることを学びます。 「3 つ子の魂 100 まで」 家族の長女というポジションに育まれた性格は大人になっても続きます。 いつも誰かと自分を比較して妬んだり劣等感を感じる（妹や弟の存在が原因） 我慢したり弱音が吐けなくなる（自分は常にいい子でいなければならないと言う思い込み） やなことや苦しいことも評価されるためにやる（お母さんやお父さんに褒められたい） だから、拗らせてしまう人が多いんじゃないかと言うのが私の見解です。 愛情不足なんて存在しない。親の愛情に満足していない自分がいるだけ ここからは私の意見です。 愛情不足なんて存在しません。 愛情不足だと思っているあなたがいるだけです。 状況だけあげれば中間子である私の方が不幸と言えるでしょう。 そんなに写真も残ってないし、洋服もほぼいつもお古です。 同じ両親から生まれた兄弟でも、物事の受け止め方が違っただけ。 実際、いつか着たい！と思っていた姉のフルーツ柄のセーターがお下がりされた時は本当に嬉しかったですし。 不幸なんて探そうと思えばいくらでも理由は探せるんです。 お母さんへ。赤ちゃんの頃の記憶なんてないから、妹や弟なんて最低限必要なお世話さえすればいい 兄と私が生まれたことでお母さんはいつも 2 人の手を繋いでいる。弟と妹が生まれたからお母さんと手が繋げなくなった。 姉は子供の頃そう思ってたそうです。すごく、寂しかったと想像します。 当の私といえばお母さんと手を繋いでいたことすら覚えてません。親よりも、虫やレゴで遊んだ楽しい思い出の方が鮮明です。赤ちゃんの頃なんて覚えているわけないんです。 子どもが本当に小さいうちなんて最低限必要な世話すればいい記憶が鮮明なお姉ちゃんを優先してください 記憶が鮮明な長女こそ可愛がってあげた方がいいです。それだけで、長女が抱きがちな劣等感を減らすことができるはずです。 長女にあなたの幼少時代のやり直しをさせないで 親って「子どもを私の子どもの時のように育てたくない」って思いがち。 もちろん私もいつも思っていました。 もっと言うと母親って自分と長女を混同しがちで「自分のなりたかった姿」を強く押し付けてしまうだけじゃなく、嫌悪感さえ抱いてしまうこともあります。 自分の人生のやり直しを子どもに押し付けるのはやめた方がいいあなたと子供は別です あなたの子供の頃のことは自由に嫌っていただいて結構です。でもあなたの子供は決してあなたではありません。 たとえば、子どもが宿題しなくたって、ちゃんと授業受けなくたって将来困るのは子どもです。 日本のように誰にでも教育の機会がある恵まれた国ã

1§å‹‰å¼·ã—ないのは誰のせいでもなく子どもの責任です。親であれば、一度は「宿題しなさい」って言って注意を促しているはずです。 親というのは愚かな生き物ですね。自分が大した人間でもないのに子供に高望みしてしまいます。 長女につらい思いを抱えるあなたへ。親に期待しなくていい、親ほど不完全なものはない ついでに、つい口うるさく言ってしまう親の気持ちを弁解します。 「自分のようになってほしくない」と子どものため思ってやってしまったことは親にとって精一杯の行動。自分の行動がベストではなくベターだったと、受け止めるようにしています。 私も若くして子供を産んで、無知や経験不足で子育て中の私の発言や行動は間違っていたと今更後悔することも多いです。でもやってしまった後では変えることはできません。 一生懸命やろうが間違えます。とりわけ子供を正しい道へ導こうとしてやった行動こそ裏目に出ます。 親の立場として、大切なのは事実を受け止めること。 さいごに・長女は本当に優しい いつも彼女にとって専門外のちんぷんかんぷんのブログを読んでくれて、応援してくれている姉。 感謝します。 ほとんどの長女は生まれた順番のせいでいろんな感情を抑え、他の幸せを優先するのが正しいと思い込んで成長します。 実はそんなこと何 1 つする必要ないんです。 そんなことしなくていいとすべての長女に伝えたいです。 拗らせているすべての長女が、「いい子でいなければならない」呪縛から解き放たれることを願ってこの記事を書きました。 この記事が人生を豊かにする一助となれば幸いです。 最後までお読みいただきありがとうございました。 性格心理学がとってもよくわかる本 /東京書店/滝本孝雄posted with カエレバ楽天市場Amazon 母親版も書きました！よろしければ併せてお読みください。 くすっと笑える昭和のお父さん版はこちら。 私の祖父のお話。","noindex":false},{"slug":"entry472","title":"【セブ島の歴史をたどる】元刑務所・Museo Sugbo/スグボミューゼオ（セブ州立博物館）に行こう！","date":"2021-06-15","modifiedDate":"2023-03-01","category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2021/entry472.webp","description":"州立セブ博物館行ってきました！元刑務所を閉鎖して作られた博物館です。長く住んでいくならその土地の文化をもっと勉強したい、理解したい。スペイン統治時代以前からフィリピン人に解説してもらいながら、しっかり学んできました。","tags":["フィリピン","セブ島","観光スポット"],"body":"フィリピンにある州立セブ博物館行ってきました！州立セブ博物館は元刑務所を閉鎖して作られた博物館です。 スペイン統治時代以前から友だちのフィリピン人に解説してもらいながら、しっかり学んできました。 この記事でわかること セブの観光スポットの紹介 古代、中世、近代までのフィリピンの歴史 セブ博物館への行き方 セブ博物館とは？ セブ博物館は、ビジネスパークのアヤラモールから車で10分くらいのところにあるセブの州立歴史博物館です。 Sugbo（スグボ）とはセブの古い呼び方です。Museo Sugbo（ミューゼオ スグボ）という名前はスペイン語でセブ美術館という意味で、スペイン統治時代の名残です。 元々刑務所で囚人が収容しきれなくなったから、博物館として生まれ変わったそうです。 現在（2021å¹´6月時点）では平日の10時〜15時までしか開いておらず、来館前にフォームを送る必要があります。1時間しか滞在しちゃいけない、とか来館に際して注意点はたくさんあります。 当日、たまたま運良くジプニーが通っていて、アヤラ付近から10ペソでいくことができました。 以前ジプニーといえばすし詰ã

1§ã—たが、現在はソーシャルディスタンスで快適に乗車できます。ビニールで仕切られてます。 フィリピンの大衆的乗り物ジプニーについて ジプニーは大きなバンのようなフィリピン大衆的乗り物で、冷房はなく座り心地も最悪です。ただ安いです。1回の乗車わずか10ペソ前後です。 スリなど小さな犯罪などに巻き込まれやすいので、私はあまり1人で乗らないようにしています。もちろん、治安がぐっと悪くなる夜は使いません。 コロナでロックダウンになりしばらく走ってませんでしたが、最近ようやく乗れるようになりました。 フィリピンの歴史は大きく分けて4つ セブ博物館で見られるのはフィリピンの歴史は大きく分けて4つです。 4つの部屋に展示が分けてあります。 植民地前 ... 植民地前の古代の時代 スペイン植民地時代 ... マゼランが来た後。フィリップ2世による統治。 アメリカ植民地時代 ... 近年フィリピンの英雄が生まれる 日本植民地時代 ... 第二次世界大戦で日本が統治していた時代 こうみるとフィリピンって長い間植民地支配され続けられてるんですよね。。。 古代フィリピンは金などの鉱物が眠った豊かな国だった 古代フィリピンにも石器や土器が眠っていて出土しています。 右側にあるめっちゃ綺麗な斧は石製です。 私、こういうのが見たかった！！！ 出土した土器はBC（紀元前）1500年から900年のもの。 ちなみに日本の縄文時代はBC3000年、弥生時代がBC100年くらい。 豊富な鉱物（ミネラル）、とくに金と近隣の中国やベトナムなどと貿易をしていたそうです。陶器や仏っぽいものがやたらあります。 ※ ゴールデン アグサン像。めっちゃ仏教っぽい。 こちらはフィリピンの伝統的な家・Bahay kubo（バハイ・クボ）です。竹製のお家です。 高床式住居です。 この構造の理由は家を移動するためと、床の下で家畜を飼うから、だそうです。 Bahay kubo（バハイ・クボ）・家を持ち運ぶことをBayanihan（バヤニハン）というんだとか。20人程度で運ぶらしいですけどもう廃れてしまった風習で今は行われてないそうです。 こちらはKabog（カボク）という雑穀です。今みたいにお米がなかった頃の主食です。 そしてこれは船？かと思いきや人が死んだら川や海（？）に流すためのものだそう。土着の宗教や文化があったんでしょうね。 スペイン植民地時代が長かったせいか、記録があまり残っていないので残念です。でも、古代ロマンを感じました。 2人の現フィリピンの王（族長）とスペイン統治 大航海時代（1500年前後）ですね！私の大好きな時代です。 セブ島はかの有名なマゼラン（発音はマジェラン。マゼランと言ったら100%通じません）が果てた地でもあります。 世界史で習ってるかもですが、マゼランがどこで死んだとかすっかり忘れてました。 1521年マゼラン率いるスペインは一度、セブ周辺を支配しようと試みたけど、ラプラプ王率いる現地の部族に戦いで負けました。 この時代、東南アジアはヨーロッパ人によるコロニズム（植民地化）が盛んでした。 なのでアジア侵略に対して立ち上がった最初の東南アジア人・ラプラプ王は英雄とされています。 一方同じように族長の1人フマボン王という人物もいます。彼は逆に血の誓い（お酒かなんかにお互いの血を混ぜて飲むやつ）とともにスペイン人を迎え入れました。 フマボン王の王妃Juana（フアナ）にはSanto Nino（サントニーニョ）・子供のキリストをマゼランから授かったと言われてます。 この出来事を讃えるのがシヌログ祭りです。セブ一大きなお祭りです。サントニーニョは崇拝され、フマボン王ととファナ王妃2人とも未だフィリピン人には慕われています。 マゼラン襲来から約20年後、スペイン人がまたやってきて本格的に植民地化されてしまいます。 ここからフィリピンは300年以上のスペイン統治時代が続きます。プランテーション。多くのフィリピン人は小作人として重労働を課せられます。 KKK、スペインからの独立。そしてアメリカ時代。 セブシティーのマボロという地区にボニファシオという街があります。 革命の英雄アンドレス・ボニファシオから由来しています。 彼は19世紀スペインから独立するためにKKK「Kataastaasang Kagalanggalangang Katipunan ng mga Anak ng Bayan （カタアスタアーサン、カガランガランガン、カティプナン・ナン・マガ・アナック・ナン・バーヤン）」を設立しました。 通称カティプナンです。フィリピン人でKKK=カティプナンと言って知らない人はいないはずです。 この頃の英雄はたくさんいますが、1ペソコインのホセ・リサールなどもいます。 スペインから独立？と思ったらアメリカ支配の時代が始まります。 アメリカのフィリピン支配は穏やかで機関車や文化の発展が印象的な時代です。昔コロンでは機関車が走っていました。 ちなみにこちらは現在フィリピンの民族衣装と言われている「マリアクララ」です。アジア感ゼロです。 第二次世界対戦。日本の支配 第二次世界大戦に突入し、フィリピンは日本の統治下に置かれます。 日本が発行したお金、おもちゃのお金と揶揄（やゆ）された「ミッキーマウスマネー」があります。日本軍はたくさん紙幣を発行しインフレを起こします。 当時71ペソでガチョウの卵をやっと1個買えるほどまで物価は高騰しました。 ※ ちなみに現在うずらの卵が1コ2ペソで購入できます。 日本の都合で紙幣刷られまくり、フィリピン人の生活は圧迫します。それに対抗して作られたのã

1Œã€Œã‚²ãƒªãƒ©ãƒžãƒãƒ¼ã€ã€‚フィリピン政府が秘密裏に作った紙幣だそう。 どんな時代でも戦争が起こるかぎり、誰もが被害者。現地友達の言葉に感謝します。 おまけ・セブ博物館のそのほかの4つの展示ルーム（現在3つ）について 主要時代の展示ルーム以外にも、セブ博物館では4つの展示ルームがあります。現在1ルームはコロナのせいで閉じています。 フィリピンは第二次世界単線後、やっと独立を果たします。 有名な政治家一族Rama家についての展示されている部屋もありました。 そして、自由になったフィリピンではさらに報道が始まります。 セブ史上はじめての新聞も発刊されます。 ※ 新聞Ang Suga。Sugaは光という意味。 戦争が終わっても、終わらない戦いがあるんでしょうね。マルコス政権下ジャーナリストが殺されたり、きな臭いことも起こったそう。 増設された記念展示ルーム。フィリピンはスペイン支配から500年経った セブ博物館には以前なかった施設ができていました。スペインが来てから500年の記念で作られた展示ルームです。 ここでは植民地化までの歴史を集約して紹介されています。 TagboとはMeet（会う）という意味だそうです。この時代がなかったら、文化は入り混じってなかったってことでしょうかね。 表現がフィリピンらしいです。 キング（族長）たち。中心は英雄ラプラプ王。その左がフマボン王だそう。かつてセブ周辺を治めてきた長たちです。彼らは自分を強く見せるために全身刺青を掘っていたそうです。 ※ 同行した友達が右から2番目の王（族長）がイケメンだと言っていてツボりました。 当時の様子をイラストで表現しています。 マゼランは「なぜ島の種族はみな刺青だらけなんだ？」と思っていたとのことでした。 Cock fight（闘鶏）は500年経った今でもフィリピン人の娯楽の1つ。路地で練習の様子を見かけることもあります。 まとめ・どの国にも豊かな文化がある 現在フィリピンにはコロニズムの影響で現存するコロニズム前の文化遺産は日本に比べると数少ないと思います。 海外に住むということは、その土地の文化をわかる範囲で学び受容するのも大切かと思い、今回の記事を書かせていただきました。 セブ島といえば「青い海、白い砂浜」と思いがちですが古代、3つの植民地時代、近代があってはじめて「今」があると改めて思います。 今回できるだけ日本語で出回っている情報は参考にせず、フィリピン人の友達の話のみを参考に、記事にしました。 ひょっとしたら間違いや表現の微妙なところがあるかもしれませんので、都度修正・加筆する予定です。 この記事がフィリピンの歴史や文化に興味がある方の一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry471","title":"海外ノマドになって「やめたこと」についてLTしました@でんかじゅく","date":"2021-06-14","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2021/entry471.webp","description":"2021/6/12でんか塾に参加しました。当日の様子をまとめると同時に、私のLT「海外ノマドを始めてやめたこと」のスライドなどを紹介します。","tags":["ライフスタイル"],"body":"2021/6/12でんか塾に参加しました。当日の様子をまとめると同時に、私のLT「海外ノマドを始めてやめたこと」のスライドなどを紹介します。 でんか塾とは？ でんかじゅくとは、でんか主催の広島にあるこぢんまりとした、LT中心のIT勉強会です。 でんかじゅくについてさらに詳しく知りたい方は前回の様子も併せてお読みください。 この勉強会の主催者、でんかとは前日オンライン飲みをしていて勢いで参加することになりました。 酔った勢いほど怖いものはない！！ オンラインでんかじゅくON ZOOM でんか塾・当日のセッション内容のご紹介 各セッションのタイトルを忘れましたがこんな感じのお話でした。ざっくり紹介します。 でんか ... SEOについてスーパー入門編（5m） ひしょー ... これからのフロントエンドの画像ã

1®æœ€é©åŒ–much betterな書き方について（30m） やまちゃん ... デザインエンジニアリングについて（30m） でんか・SEOの入り口的お話 何か困ったら「ぴえん」と野太い声で言うでんかです。SEOをクライアントに対して普段わかりやすく説明しているので、今回初心者向けの内容でした。 私も日々反省してますが、専門用語が多いと専門外の人にはわかりにくいですよね。。。 私の元同僚がいつもアインシュタインの言葉を引用して「6歳児にもわかるように説明できなければ理解したと言えない」、と言っていたのを思い出しました。 でんかのLTを聞いてとても分かり易かったです。改めて勉強になりました。 ひしょー・2021å¹´Web制作の画像最適化のお話 現役フロントエンドエンジニアのひしょーくん。まだまだ若いのに超優秀です。 GoogleはCore Web Vitals（コア ウェブ バイタル）をランキング要素に組み込むと言っています。 表示速度の足を引っ張る一番の原因と言ってもいい、画像の最適化についてです。軽量化し、いかにスムーズに読み込むのかが今後の課題になってくるところ。 現時点の画像形式やコードの書き方についてbetterな方法を教えてくれました。 WebP（ウェッピー） ... Googleが開発している画像フォーマット。ほぼ同等の画質でPNGよりも約26％、 JPGより約25〜34％軽くできるらしい。IE以外は対応しているので使わない理由はない。Photoshopやコマンドから変換可能。 srcset ... 画像を何個か用意してブラウザや端末によって最適なサイズを選んでくれる。 pictureタグ ... デバイス幅や端末によって画像を出し分けます。srcsetに比べると、強制的。PSとPCでメインビジュアルを使い分けたいときなどに利用。 loading=\\"lazy\\" ... スクロールして可視領域に達する直前で、画像を読み込ませるための属性。 decoding=\\"async\\" ... 画像のデコード処理を非同期にバッググラウンド処理し、他のコンテンツの表示処理終了時に更新処理するやつ。 コードの書き方は複雑になりますが2 ~ 3つでも組み合わせれば読み込みスピードは劇的に改善します。 やまちゃん・デザインエンジニアリングについて やまちゃんは歩くWikipediaみたいな人です。 今回はデザインとエンジニアリングの話でした。マインドのお話でした。 OODA ... Observe （観察）Orient （状況判断、方向づけ）、 Decide（意思決定）、Act （行動） これをloopで回すことをOODA loopと言うそうです。（音が似ているからUber Eatsとかくだらないこと言ってごめんなさい） JOB理論 ... サービスや商品、アプリケーションなどを利用するとき必ず「成し遂げたい目的」があります。ジョブ理論はその目的を「ジョブ」と位置付けて、ニーズを探っているのです。 実例を交えて紹介してくれたのでとても分かりやすかったです。 ざっくり言うとデザインもエンジニアリングも「お困りごとを解決する手段」よねーって話だったと思います。 お困りごとを解決する手段を提案したり、実現するためにハンドリングするのは結局ディレクターだよね、って言うオチでもありました。 LT「やめる勇気」について 今回私は「やめる勇気」について話しました。 海外ノマド始めて、なんとなくだけどやめたことがたくさんあり、気がラクになったってお話です。 ここで私の言う「やめる」とは、一般的に常識だけど本当はやりたくないと思いつつやっていることをやめることです。 「これ、しないと社会人としてダメなんじゃないか？」とか「ねばならないこと」って、ある種強迫観念にも近い気がします。 やめる勇気 〜人生も仕事も想像以上にシンプル〜 from Yuriko Kamimori 最近、日本にいる人とたまに話していて感じることがあります。 日本って「ねばならない」が溢れかえっていて生き辛そうだなぁ。。。それの考え方をやめたらもっとラクになるだろうに。 私の今回のLT、実は「嫌われる勇気」の影響を受けてお話しさせていただきました。 最近ギャップを感じているタイミングで、「嫌われる勇気」という本をススメられました。 前からベストセラーの本ですよね。ミーハー嫌いな私は以前興味ありませんでしたが、この人がすすめるならと思い読んでみました。 嫌われる勇気 Kindle版 読んでみると、仕事に対する考え、人付き合い、すべてにおいて私にとっては答えあわせのような内容でした。 私も昔は「ねばならない思想」でがんじがらめになって生きてきました。 たとえば、こんな感じ。 離婚や恋愛で失敗ばかりしてきたらか怖くて恋愛ができない。 好きな人ができたところでふられるのも悲しいし、恋愛したくないからしたくない理由を離婚のせいにしている（アドラー心理学でã

1„う目的論）。 確かに、失敗って怖いですもんね。とくに、歳をとればとるほど怖くなりますwww 私の生き方を推奨する訳じゃありませんが、こんな生き方もあるくらいに思ってもらえれば幸いです。 まとめ・インプットしないとアウトプットもできない 今回ひょんなことで勉強会に参加させてもらって勉強になり、でんかに感謝です。 IT業界の技術や情報って自分が意識してインプットしていないとあっという間に陳腐化してしまいます。 それを爆速ですでに知識を持っている人から知ることができるのって、めっちゃラッキーですよ。IT勉強会、活用した方が絶対いいです。 もちろん、インプットして満足している人、次回ぜひアウトプットしてもらいたいですね。 アウトプットとインプットはセットです！！ そして、マインドもアウトプットとインプットするのって大事。健康な心が学びへの探究心を育みますから！ とりとめのない記事になってしまいましたが、最後までお読みいただきありがとうございます。 次回はぜひどこかのIT勉強会でお会いしましょう！","noindex":true},{"slug":"entry470","title":"スプレッドシートのフォルダ作成・移動を自動化！GASでドライブに一括格納する方法","date":"2021-06-08","modifiedDate":"2026-06-17","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry470.webp","description":"Googleドライブでの面倒なフォルダ作成やファイルの移動・管理に疲れていませんか？本記事では、スプレッドシートからGAS（Google Apps Script）を使ってフォルダを自動作成し、一括格納する仕組みを解説します。手動操作を卒業し、実務を劇的に効率化するコピペOKのコードです。","tags":["GAS","JavaScript"],"body":"スプレッドシートからGoogleドライブにフォルダを自動作成し、ファイルをスマートに移動・管理する方法をくわしく解説します。 Googleドライブの基本機能にある「移動」ボタンを使って、ちまちまと手動でフォルダ分けをする作業に限界を感じていませんか？ 件数が増えれば増えるほど、私たちの貴重な時間は奪われていきます。 しかし、 GAS（Google Apps Script） を使えば、そんな不毛な事務処理時間は一瞬でゼロになります。プログラミングに苦手意識がある方でも実務に即導入できるよう、コピペでそのまま動くサンプルコードをご用意しました。 記事は少し長めですが、必要な場所から目次で飛ばし読みしてください。 私はプロジェクトや案件の管理をするとき、Googleドライブ内にいつも同じ構造のフォルダを構築して管理しています。 毎回同じフォルダ構成を手動で作るのって、いっそう面倒くさいですよね。 プロジェクト名の頭に連番を振りたいし、仕分け用のサブフォルダも同時に用意したい…。 そうだ、Google Apps Script（GAS）に丸投げしちゃえ！ この記事を読んで実現できること スプレッドシートへのプロジェクト登録 連番付きのプロジェクトフォルダの自動生成 その配下へ、仕分け用サブフォルダ（議事録や納品物など）を同時に自動作成 生成されたGoogleドライブのリンクをスプレッドシートに自動で記録・管理 これらすべての処理が、GASならボタンをワンクリックするだけで完結します。 「仕組み化」によって、私たちの実務は超楽になります。 単なる作業の自動化にとどまらず、ビジネスを加速させるための コピペで使える GASコードとその設定手順をご紹介します。 Googleドライブにファイルを格納する「親フォルダ」を作成しておく プロジェクト格納用のフォルダをprojectという名前で作成します。 Googleドライブ上のフォルダIDを調べます。 フォルダ作成時に発行されたURLの~folders/以下になります。 フォルダ作成・管理用のスプレッドシートを作ろう！ スプレッドシートでプロジェクト管理用のシートを用意します。 今回はこんな構成にしました。 セルB1に「project（親）フォルダのID」を入力しておきます。 スプシは100行、D列まで表示し、シート名をprojectとしておきました。 スプシにはチェックボックスを設置できる スプシにはチェックボックスを設置できるので先に設置しておきます。設置したいところにデータの入力規則をセット。 条件でチェックボックスを選択して、無効なデータの場合入力を拒否にチェックを入れておきます。 スプシにチェックボックスが実装できました!! 値 チェック時...TRUE チェックなし...FALSE A列に一個チェックボックスができたら100行までコピペします。 IDの連番を振る C列にプロジェクト名が明記さã

1‚ŒãŸã‚‰ã€IDが振られる仕組みにします。 B列に以下コードを貼り付けます。 text関数でゼロパディング（0埋め）表示します。 今回3ケタにしましたがお好みのケタにしてください。 プロジェクトを追加したら、IDを追加できます。 触って欲しくない場所はシートを保護しておく チームで管理する場合はデータをうっかり変更されてしまわないよう、データの保護で編集できないようにします。 管理者権限を1アカウントとかにしてしまうといいです。 この場合はA列とC列以外は保護してしまいます。 フォルダの自動生成処理 スクリプトエディタでフォルダを自動生成するコードを書きます。 メニューの「ツール」>「スクリプトエディタ」を開きます。 新規で立ち上げたApps Scriptページはこちら。 「無題のプロジェクト」で作られるので、管理しやすい名前に書き換えておきます。今回は「プロジェクト管理」としました。 関数名もデフォルトでmyFunctionになっているのでcreateProjectに書き換えます。 シートのデータ取得 シート内のデータを取得します。B列の最後の列を参照し、最後の行を取得します。 取得したいデータの2行目から、連続してデータのあるセルの最後の列番号を取得できます。 ※ 処理を実行すると何度か権限の許可を求められます。各種アクセス権限を許可しておくを参考にしてください。 親フォルダの取得 親フォルダ(project)を取得します。getFoldersでさらにその直下のフォルダも取得し、フォルダ名を配列childrenListに格納しておきます。 getRange(\'B1\')はgetRange(2,1)のような書き方でもOKです。 各行のデータを取得し、チェックが入っていればフォルダ作成する for文で処理を回します。A列のチェックが入っているもののみの行を処理します。 今回はフォルダの名前をID+_+名前とします。 includesメソッドを使って配列 childrenListに、変数nameと同じ値が含まれてないかチェックし、なければnameと同じ名前のフォルダを作成します。 さらにフォルダを作成する さらにデフォルトで孫フォルダをセットしておきます。 スプシにフォルダ名とリンクを追加し、チェックを外す setValueで値を挿入します。A列は初期値FALSEに戻して、D列にはリンク付きでフォルダ名を追加します。 リンク付きの値を挿入するためにHYPERLINKを使います。 各種アクセス権限を許可しておく プロジェクトを「保存」後、「実行」します。 すると権限を求められますので「権限を確認」をクリック。 アカウントを選択。 「このアプリはGoogleでは確認されていません」って言われるので、詳細をクリックしてプロジェクト管理（アプリ名）に移動します。 「Googleドライブのスプレッドシートの表示、編集、作成、削除」など許可しておきます。 ※ スプレッドシートからドライブにもアクセスするのでそちらの許可も必要です。 フォルダの自動生成処理を実行するメニュー追加 addMenuでメニューを追加します。 ラベル名はname、関数はfunctionNameとして配列に格納します。 setMenuに切り替えて実行します。 「プロジェクト管理」メニューが追加されます。これでスプシ上操作できるようになりました！！ すべてのコード トリガーを設定して常に表示するようにする 最後にスプシ起動時、常にメニューが表示されるように設定しておきます。 トリガーから「トリガーを追加」を選びます。 関数にsetMenuをセット。あとは、デフォルトのままで大丈夫でã

1™ã€‚ まとめ：スプレッドシートのフォルダ作成・移動はGASで一瞬！ 煩わしいなあって思っていたフォルダ作成などの処理がボタン操作で可能になりました！ シートを見れば一目瞭然になりました。 少ない人数で仕事していると雑務もすべて自分でしないといけないので、少しでも減らして本業に集中したいものです。 ァイルアップロードとリネームを自動化したい方はこちらもどうぞ！ トリガーで定期的にメール送信したい方はこちらを参考にしてください。 この記事が皆さんの事務作業時短の一助となれば幸いです。 最後までお読みいただきありがとうございました。 おまけ・配列の並べ替え getFoldersで取得したデータはせっかく連番idを付与しても更新などで順番が入れ替わります。 連番で配列が取得したい場合は、sort`で並べ替えできます。","noindex":false},{"slug":"entry469","title":"女性エンジニアが海外ノマドに ~仕事も人生も想像以上にシンプルだった~","date":"2021-06-07","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2021/entry469.webp","description":"2019年セブ島日系企業に就職したけど、昨年辞めてそのままセブ島でプーをしていました。今年から働かねばと思い、今はフリーランスとして働いています。人生ってこんなに生きやすいんだって最近感じるようになりました。海外ノマドを始めて変わったことなど、近況報告も交えてお話しします。","tags":["ライフスタイル","海外移住"],"body":"2019年セブ島日系企業に就職したけど、昨年辞めてそのままセブ島でプーをしていました。今年から働かねばと思い、今はフリーランスとして働いています。 人生ってこんなに生きやすいんだって最近感じるようになりました。海外ノマドを始めて変わったことなど、近況報告も交えてお話しします。 海外ノマドを始めて変わったこと 会社を退職し3か月のんびりして、今年になって仕事をし始めました。 3か月プーをしている間には、もちろん日本に帰って就職しようかなーとかも考えました。 帰るの面倒だしもう少しこっちにいようかなーって思ってる時に、こっちでビジネスをしよう話がありました。 あ、ちなみに現在のフィリピンからの日本への帰国は地獄です。 とりあえずビジネスが始まるまでの準備期間、食べるだけ働こうと思って始めたのが、 ・ ・ ・ いわゆる海外ノマドです。 と言うことで、まだのびのびマイペースにセブ島で暮らしています。 振り返ると日本での人生って 忖度、評価、競争。 とかの「ねばならない」の繰り返しだった気がするんですよね。 私、まだまだ40歳そこそこですが ぶっちゃけその繰り返しで、死ぬほどうんざりしたのよね。なんか、日本戻りたくないなあ。 今はこちらでビジネスの準備中なので、現状できる範囲で仕事をしています。 結構焦らず、のんびり。 惰性でなんとなく始めた海外ノマドですが、良かったと思うことがあったã

1®ã§ã”紹介します。 思い込みから解放された 会社や組織にいてコミュニケーション取り続けていた頃は、「ねばならない」「普通こうすべき」とか、よくわからない思い込みで頭がいっぱいになってました。 ところが今の私はこんな感じ。 1日8時間拘束されることはほぼない 寝癖のまま仕事 疲れたら仕事中でも寝る 仕事で煮詰まったら、あーー！って言いながらベッドにダイブ 平日仕事の合間に仲間や友達と昼から酒も飲む 怠惰極まりないと怒られてしまいそうですww 今まで「すべき」って思いっていたことは、何1つしなくても生きていけることだったと気付かされます。 評価されないから気が楽（ラク）になった 会社だと査定されたり評価されるから、お金のために頑張らないといけないですよね？ だから、私の大嫌いな競争もしないといけない。 バツイチ子持ちで育児中をしている若い頃は、とくに息苦しかったです。 そんな中気づいたことがあります。 あれ？ちょっと待って。評価って人間が決めませんか？本当にその評価定量的？本当に公平なんですか？ 私の偏見もあるかもですが、総じて評価って評価する人の利害につながることが多かった気がします。 だから評価される側のほとんどの人が忖度しちゃうんでしょうね。 昔から私それがイヤで「ご機嫌とりしながら競争するレールから外れたくて仕方なかった」です。 案の定、やめた瞬間見事に解放されました。 付き合える人が選べるようになった 会社や社会だと苦手な人とも付き合わないといけないけど、付き合う必要がなくなりました。 私めっちゃ苦手なタイプがあります。 搾取する人 マウントする人 実害のある人 悲しいかな大きな組織に行くと、絶対とは言いませんがこの3タイプの誰かいます。 過去の自分は、理不尽に腹が立っていつも反抗していました。 でも気づきました。 誰かを変えることができると、思い上がってること自体が愚かです。 自分が変えられるのは自分くらい。 苦しい状況に甘んじるのも自分の責任。現状が耐えられないなら、耐える必要もないし、イヤなら自分が去ればいいんです。 結果闘う必要もなくなり、解放されました。 変な憤りにエネルギーを使う必要がない分、前向きな方に力が注げるようにもなりました。 エネルギーはいい方向に使いたいですよね！ エネルギーが余った分、他の周りの人をより大切にできるようになりました。 いい仕事ができるようになった 海外ノマドを始めて、人だけじゃなく仕事も選べるようになりました。 無理しないから体もしんどくないです。 いいことはそれだけじゃないです。 実は大好きなクライアントのために仕事をするってめっちゃ貢献してる実感があるんですよ。 ダイレクトに感謝されたり、喜ばれたりするのは、お金以上の報酬だったりします。 仕事が楽しくなりました。 人生のほとんどの時間って仕事してますよね？その間が幸せだったらサイコーじゃないですか？！！ おわりに 元々、MacBookプロとスーツケースだけで生きていこうと日本を飛び出しました。 この先は手放す人生と決めていましたが、 物だけでなく人間関係も手放せば雑音が聞こえなくなる。 海外ノマドをしなければ気づかなかったかもしれません。 誰かの言うことに翻弄されたり、ねばならないとか思い込んで、人生を複雑にしているのは自分なんですよ。 会社を辞めて少し経済的に不安でたが、 そんなくらいじゃ人生は終わらないです。 大した問題じゃないんですよね。 人間ってどうにか生きていけるもんです。 高卒、若くしてデキ婚、30代バツイチ子持ちでエンジニアに転身できたんだから、多分できる。 なんとなく惰性で海外ノマド始めましたが、 人付き合いをギュッと減らした結果、穏やかで充実した日々を送れています。 人生も仕事も想像以上にシンプル。 こんなことに気づかせてくれたセブでのたくさんの出会いに感謝します。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":true},{"slug":"entry468","title":"【WordPress】カウントダウンタイマープラグイン作りました！〜かみーゆ開発工房始めます〜","date":"2021-06-03","modifiedDate":"2023-02-05","category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2021/entry468.webp","description":"WordPressのプラグイン・カウントダウンタイマーの試作品を作りました！無料でご利用いただけます。この記事では使い方の他に、プラグイン誕生秘話なども綴ってます。","tags":["WordPress","かみーゆ工房"],"body":"WordPressのプラグイン・カウントダウンタイマーの試作品を作りました！無料でご利用いただけます。この記事では使い方の他、プラグイン誕生秘話なども綴ってます。 どんなことができるプラグイン？ カウントダウンタイマーは終了時間を設定し、ショートコードを貼るだけでカウントダウンタイマーを設置できるWordPress専用のプラグインです。 コードが書けなくてもフォントの種類や文字の色など、気軽に編集してオリジナルのタイマーを作成できます。 終了したら、任意のページにリダイレクトされます。 ※ 終了後、カウントダウンタイマーを設置したページにユーザーはアクセスできなくなります。 まだプロトタイプ（試作品）段階です。いろんな人に使ってみて欲しいのでとりあえず無料で配布します。 使ってみて、いろんな意見ください！！！ ※ IE未対応です！！※ 多少バグがあるかもしれません！※ 個人の責任で使ってね❤️ カウントダウンタイマー使い方 カウントダウンタイマーの使い方です！！ インストール方法から説明します。 GitHubからダウンロード まずはGitHubからZipファイルをダウンロードします。 GitHubリポジトリ|yuririn/lenz-studio-countdown Timer カウントダウンタイマー DL WordPressの管理画面、プラグイン、新規追加をクリック。 プラグインの追加から、プラグインのアップロードをクリック。ZipファイルをそのままUploadします。 プラグインのインストールが完了したらプラグインを有効化します。 プラグインが有効化されたらWordPress管理画面のメニューに「Count Down Timer」の項目が追加されます。 各種設定 現在の機能は以下の通りです。 | 項目 | 説明 | | ------------------------------ | ---------------------------------------------------------------------------------------------------- | | カウントダウン終了日 | 終了日時を設定可能 | | ラベル（カウントダウン中） | カウントダウン中に表示する文字です。不要な場合は空にしておいてください。 | | ラベル（カウントダウン終了後） | カウントダウン終了後に表示する文字です。不要な場合は空にしておいてください。 | | リダイレクト先 | カウントダウン終了後に遷移させたいページを設定します。設定していない場合はトップページに遷移します。 | | フォント | Googleフォントからいくつかフォントを選べます | | 単位 | 時間の単位の表示方法を選べます | | 基本の文字色 | 基本の文字色です。#333333がデフォルト。 | | カウントダウンの文字色 | 数字の文字色です。#333333がデフォルト。 | | 背景色 | カウントダウンタイマーの背景色です。#ffffffがデフォルト。 | | 高度な設定 | CSSでスタイル変更できます。 | 設置したいページにショートコードを貼り付け ショートコードをコピーし、お好きなページに貼り付けてください。 デフォルトのデザインはこんな感じです。 各種設定の項目を参考にお好みで、ラベルを追加したり、色やフォントを変更してみてください。 上級者向けCSSのカスタマイズ CSSが書ける方はスタイルを追加することもできます。 htmlはこんな感じで組んであります。 下の方にCSSのコードを追加できます。 テキストエディターを導入しているので多少は書きやすいかと思います。\\"や\'などは使えないので注意してください。 ちょっとダサいけど、カスタマイズ例です。 グラデーションしたいときは、ジェネレーターを使うと便利ですよ。 CSS Gradient CSSの実装サンプルはこちら。 なんで「カウントダウンタイマー」プラグインができたの？ 3月ごろからマーケティングの勉強のために、YouTubeチャンネル・ジュンイチの【デジマ研究所】を視聴するようになりました。 どの回だったか忘れましたが、「もっと便利なカウントダウンタイマー欲しいなぁ」ってジュンイチさんが言っていたのがヒントになりました。 へーーー！ã

1“んな要望があるんだ！！じゃあプロトタイプ（試作品）作ってみたらおもしろそう。よっしゃ作ってみよう！ 実は目からウロコでした。 開発側では思いもよらない物がユーザーは欲しいんだって気づきました。 何よりも実際作ってみたらとても楽しかったです！！ ということで、かみーゆ開発工房始めます クリエイターは「こんなのいいな」、「あったらいいな」の要望に答えることはできます。 ただ個人などでがっつり頼むとちょっとした機能でもお金がめっちゃかかるじゃないですかww？ かといってフリー（無料）のプラグインだとちょっと機能的にマッチしないというか、物足りないというか。 そこである程度の人が使いたいものを作ったら、安く提供できるかと思った次第です。 ということで、WordPressのプラグインやWebパーツを販売する「かみーゆ開発工房」始めます！！ みんなの要望に応えて、「あったらいいな」「こんなの欲しいな」を開発します。 要望があればTwitterやお問い合わせフォームから受け付けます！ 欲しいもの： 欲しい理由： ニックネーム： もちろん、期間・難易度などの関係で「こりゃ開発無理！」ってのもありますのでご了承ください。 中から作れそうなもののみ、プロトタイプ（無料）を作るのでぜひ使ってください。 また、このサイト内にかみーゆ開発工房のコーナーも作りますので少々お待ちください。 まとめ・プラグイン開発は楽しかった！ 自分1人の考えだったら「こんなの欲しい？」って思っちゃいますが、いろんな人の意見を聞いて何か作るのって楽しいですね！！ 引き続き、ユーザーの声を拾っていろんなものを「かみーゆ開発工房」で作成していこうと思います。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry467","title":"面白い？それともダサい？IT業界で耳にする【かぶれた用語】10選","date":"2021-05-29","modifiedDate":"2026-03-20","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2021/entry467.webp","description":"IT業界。この業界にいると横文字をはじめとする【ヘンテコなIT用語】を使うことが多いです。最近お客さんと話していて、「本当に使う必要ある？」って思うものも多いです。そこで【かぶれた用語】10コ厳選し、意味や必要性をまとめてみました。","tags":["おもしろ"],"body":"IT業界。この業界にいると横文字をはじめとする ナゾな言葉 を使うことが多いです。 ドヤ顔で連発して使っている人を見かけると、ぶっちゃけ面白いのかダサいのかよく分からなくなってしまいます。 自分が正しく使えてるかも気になるところですが、一番感じるのはコレ。 こんなわかりにくい言い回し、わざわざ使う必要ある？ 最近お客さんと話していて、本当に使う必要ある？ って思うものも多いです。そこで【かぶれた用語】10コ厳選し、意味や必要性をまとめてみました。 10年業界いますが、最近「私はかぶれてないだろうか？」って不安に感じるようになりました。 と言うことでかぶれたIT用語10連発を紹介します！ おもしろダサい？！かぶれたIT用語10選 「重要度」「必要性」「使用頻度」を私の独断と偏見で評価してみました。 ファーストビュー ファーストビューはWebサイトへ訪問した時に見ることができる、最初の可視領域です。 コンテンツの続きを読んでもらえるかに影響を与えます。だから、目を引く写真やキャッチコピーなど工夫する必要があります。 この説明、一般の方にはわかりづらい！ なので私はこんな感じで伝えるように配慮しています。 ホームページ開いたら最初に画面いっぱいに見える部分です！ 伝わりました？ 重要度: ★★★★★ 必要性: ★★★★★ 使用頻度: ★★★ エビデンス 証拠・根拠、証言、形跡などを意味する英単語・evidence。 使い方はそのまんま「エビデンスを残す」です。 証拠を残すって言えば誰でもわかるのに、いつの間にかこんな

1小難しい使い方をするようになりました。 「証拠を残す行為」はめちゃ大事。 そういや、「証拠を残す」と「エビデンスを残す」だと言葉の意味がボヤけ、後者の方が多少柔らかい気もしないでもない。。。。 なるほど！！ だから頻発しちゃうんだ！ そんな気づきもありました。 重要度: ★★★ 必要性: ★★★ 使用頻度: ★★★★★ ITリテラシー 意味はITの読解記述力（literacy）という意味です。 「ITリテラシーがある、ない、高い、低い」のような使い方をよくします。 ざっくりいうとITリテラシーとは大きく3つの知識や技術の理解力を示します。 1. 情報を正しく使う能力や知識 2. コンピューターの知識や技術 3. ネットワークやセキュリティに関する技術的な知識 どのくらいこの3つの基準を満たせば、ITリテラシーが高いって言えるんだろう。 あまり信用できないなあ。 「コンピューターの知識や技術」と「ネットワークやセキュリティに関する技術的な知識」がどんなに長けた人間でもSNSで情報漏洩するような場合、ITリテラシーが必ずしも高いと言えないかもしれませんしね。 個人の感覚や意見に左右されそうなので、あまりあてにできない基準とも思いました。 重要度: ★★★ 必要性: ★★ 使用頻度: ★★★ EC EC（eコマース）とはElectric Commerceの略で電子商取引のことを指します。 基本この言葉は同業者同士とかでない限り私は使いません。 疎い方にはネットショップとざっくり伝えるようにしています。 ところが、これすら私のおかん世代は分からないんですよね。。。 なので、以前はインターネットで物を買うと言っていました。 最近は配送の箱にAmazonと書いてあるのでアマゾンと言うようになりました。 ちなみに英語で「インターネット検索すること」を「google it」と言いますが、いつか「amazon it」という日も来るかもしれませんね！ 重要度: ★★★★ 必要性: ★★★ 使用頻度: ★★★ アサイン asignとは割当という意味です。 IT業界では何かのプロジェクトに人を投入するときに使います。 私は職業柄普段からソースコードを見ているせいか、個人的にはheightとかalignなど、間に発音しないgが入る単語が好きです。 私は飲み会や合コン（最近ではライトな飲み会って言うそうですね）の計画でも使います。 重要度: ★ 必要性: 使用頻度: ★★★★★ アジェンダ 会議で論ずる事項（議題）の表。最近では課題項目のことを指します。 アジェンダという言葉が使われるようになったのは、1992年にブラジルで開催された地球サミットだといわれています。 現在ではこぞって使うようになりました。 ぶっちゃけ「議題でいいじゃん」って思います。なんで無理くりこんな小難しい言葉使うんですかね？ 余談ですが洋菓子と一緒に並べて言ってみると違和感ないことにも気付きました。 クイニーアマン、アジェンダ、ミルフィーユ、ザッハトルテ、タルトタタン... 重要度: ★ 必要性: 使用頻度: ★★★ アサップ、なるはや 「ASAP」=「as soon as possible」 「なるはや」=「なるべく早く」 と意味です。 定量的じゃないこの言葉、個人的には法律で禁止すればいいと思っています。 「ASAPでやります」という人で、早くやってる人をぶっちゃけ見たことないですもん。 重要度: 必要性: 使用頻度: デスマーチ（デスマ） 直訳すると「死の3月」。 日本のWeb制作業界では3月は決算期で予算を使うため、繁忙期になりがち。 ゆえに、仕事の終わらない日々が続きます。 言い方を変えると「炎上」ですが、時期関係なくそんな状態が続くこともデスマって言う事もあります。 プログラマーやエンジニアやってると一度は体験するツラいシチュエーションです。。。 ついでに言うと、25時と言う言葉もあります。 世の中からデスマがなくなったら幸せになれそうです。 重要度: ★★★★★ 必要性: 使用頻度: ★★★★★ レスポンシブ iPhone、パソコンなど機体（ディバイス）が違っても、HTMLコードは1つ。幅の大きさに応じてデザイン（CSS）を切り替える手法をレスポンシブ対応と言います。 このレã

1‚¹ãƒãƒ³ã‚·ãƒ–の説明、超長くなるので、理解してもらえるとその後の話がしやすくなりますね。 勢い余ってレスポンシブル、と言ってしまう人もいます。 重要度: ★★★★★ 必要性: ★★★★★ 使用頻度: ★★★★★ ジョイン join。中学生ぐらいで習う単語だと思いますが、参加するって意味です。 これも入社や参加でいいんじゃないでしょうか。。。 みなさん、、、要ると思う？？？ 重要度: 必要性: 使用頻度: 番外だけどおまけ・サチコ Google Search Console サチコとはGoogleの提供するサービス・サーチコンソールの略です。 Webサイトがどんなキーワードで検索されているか、そのキーワードで検索順位どのくらいかを調べることができるツールです。とても便利です。 ちょっと長いのでサチコと呼ばれるようになりました。 ちなみにGoogle社員はサチコと呼ばないそうです。 それでも私は愛着を込めて常に「サチコ」って呼んでいます。 重要度: 必要性: 使用頻度: ★★★★★ まとめ・恥ずかしさを認めて「脱・かぶれ」 私が普段使っていて、よくよく考えると伝わりにくいなーと思っている言葉を厳選して紹介しました。 独断と偏見も入ってますが改めて評価してみると、ほとんどの用語に必要性を感じられませんでした。 とくにアサイン、アジェンダ、ジョイン、エビデンスあたりは頻発しちゃうとかぶれっぷりが炸裂しますね。 私、めっちゃ使ってるわ。。。 ダサい人間だったなぁww 集めてみて、ただでさえ分かりにくい業界なのに日本語で済む言葉を横文字にするから、とっつきにくい業界になるんだろうとしみじみ思いました。 私のプログラミングの師匠によく言われていたのが「用語を正しく使う」、です。 おかげさまで、「本当に意味があってるの？」と思ったら即調べるようになりました。 かっこいいからという理由でなんとなく使ってる人、「アレ？意味間違ってるよ」って思われちゃうかもので注意です。 もちろん私も気をつけます。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry466","title":"【WordPress】GitHubリポジトリにコミットしたプラグインを自動更新可能にする","date":"2021-05-24","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2021/entry466.webp","description":"自作のプラグイの更新を管理したい！そんな方にはPlugin Update Checkerが便利です。今回はその使い方をまとめました。","tags":["WordPress"],"body":"自作のプラグイの更新を管理したい！そんな方にはPlugin Update Checkerが便利です。今回はその使い方をまとめました。 この記事の対象者 自作したプラグインの更新を一限管理したい GitHubでプラグインを管理したい 自作したプラグインを自動更新できるようにしたい GitHubにリポジトリに自作したWordPressプラグインの更新を通知させたり自動更新可能にする方法を紹介します。 ※ プラグインを作ることができて、GitHubアカウントを開設していることが前提条件です。※ この記事は不十分なため追記予定です。 めっちゃカンタンなプラグインの作り方はこちらになります。 Plugin Update CheckerをGitHubからダウンロード まずはPlugin Update CheckerをGitHubからダウンロード。 Plugin Update Checker the latest releaseから、Assetsが2つあるのでいずれかをDLします。 本日時点での最新は4.11(5月16日更新)でした。 今回は仮にmy-pluginというフォルダー内にプラグインを作っていきます。 my-plugin.phpがこのプラグインの起点となるとファイルになります。 plugin-update-checker/内に格納したplugin-update-checker.phpを読み込みます。 同期したいブランチを指定します。 これで指定したブランチにプッシュしたら、プラグイン側にも通知が来るようになります。 Plugin Update Checker公式ページに以下が書いてあります。 readme.txtを追加しておきましょう。 the WordPress.org plugin readme standard Plugins only: Add a readme.txt file formatted according to the WordPress.org plugin readme standard to your repository. The contents of this file will be shown when the user clicks the \\"View version 1.2.3 details\\" link. プラグインのみ：WordPress.orgプラグインのreadme標準に従ってフォーマットされたreadme.txtファイルをリポジトリに追加してください。このファイルの内容は、ユーザーが「バージョン1.2.3の詳細を表示」リンクをクリックすると表示されます。 プライベートリポジトリを更新対象としたい場合は一手間必要です。 アクセストークンを取得し、以下コードを追加。 ※ アクセストークンの設定の仕方は後日追記します。 Assetsも自動更新にしたい 以下コードもを追記しておきます。 ガイドラインに違反？不安に思った方のために補足します 公式WordPressサイトにPlugin Update Checkerに関する記事が見つかりました。 『WordPress.org 以外から配布したものに更新する機能』はマーケットプレースに出品するプラグインとしてはNGのようです。 Update機能はあくまで公式WordPressのマーケットプレースに出さない、自作プラグイン用として使うのがよさそうです。 ガイドライン違反について まとめ・自作プラグインの更新をまとめて管理できて便利 あくまで自作テーマやプラグインのアップデーターですが、バグや更新を一括でできるのはとても便利ですね。 この記事が、みなさんのコーディングライフの一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":false},{"slug":"entry465","title":"【WordPress】管理画面に独自メニューを追加して、ajax（非同期）で値を保存する","date":"2021-05-23","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2021/entry465.webp","description":"WordPressでサイトごとの独自の値を登録できるようにしたいですよね？今回は管理画面のサイドバーにメニューを追加方法し独自の値を登録できるようにするためのページの作成方法を紹介します。登録方法はユーザビリティを考え、ajaxを使いました。よろしければご一読ください。","tags":["WordPress"],"body":"WordPressでサイトごとの独自の値を登録できるようにしたいですよね？ 今回は管理画面のサイドバーにメニューを追加方法し独自の値を登録できるようにするためのページの作成方法を紹介します。登録方法はユーザビリティを考え、ajaxを使いました。 今回は管理画面でサイト共通の設定を追加し、さらに値をajax（jQuery）で保存します！ この記事では基本WordPressのコーディング規約を守ってコードを紹介しています。エスケープ処理なども含め、よくわからない方はこちらの記事も合わせて参考にしてください。 まずはWordPressの管理画面にメニューを作ろう！ メニューの作り方です。 function.phpなどに追記するとメニューが追加されます。 メニューアイコンは自作してもいいですが、WordPressにはあらかじめかなりの数が用意されているのでこちらを使うのが賢いかも。 Dashicons もしオリジナルが使いたいときはメニューアイコンを以下のように書き換えます。 あとはプラグインなど格納されているフォルダーに格納しておけばOKです。 管理画面で出力するhtmlコードなどを作成 次に管理画面用のページを作っていきます。さっき設置したaddmyadmin_menu（もちろん名前は任意）と関数としてページの内容を書いていきます。 ページ共通の設定の場合はoptionに登録するのがオススメです。事前のここにコードの部分へ、サイトごとの値登録に必要なコードを追記します。 同じWordPress内で共通の値を保村するときはoption系の関数が便利です。 | 関数名 | 用途 | 使い方 | | --------------- | ---------------------------------------------- | ------------------------ | | get_option | そのサイト（テーマ）の独自の値を取得 | get_option(キー,値) | | update_option | そのサイト（テーマ）の独自の値を更新・新規登録 | update_option(キー,値) | | delete_option | そのサイト（テーマ）の独自の値を削除 | update_option(キー) | ここでポイントなのがwpnoncefieldで、フォームデータを安全に送るためのWordPressの仕組みです。 このフォームデータが、同サイトからの送られてきたかチェックしてくれます。 出力されるhtml。 データの受け取り側にも処理を書きます。同サイトからの送られてきたかどうかのチェックの仕方は保存処理をするコードを書くの方をみてください。 ajax（jQuery）で保存処理 ajax（非同期）で保存するためのコードを書きます。 CRAD処理（データの登録・保存・更新とか削除）でajax（非同期）を使うと、従来のページ遷移する（リクエストを投げる）よりもユーザーが使い心地をライトに感じます。 今回はmy-site-data-1という名前の値を保存してみましょう。 add_actionのフックはページごとに出し分けができます。 今回addmyadmin_menuという名前で作ったので[ページ名]のところを変えます。 ページ名がわからない場合は、var_dumpで調べましょう。 ※ 調べたらvar_dumpを削除するのを忘れずに。 $(\'.status\').html~のコードは保存が後成功したか否かをお知らせする処理です。クラスstatusにhtmlを追加します。 追加した要素の削除処理。 これでWordPressらしい管理画面になりました！ 保存処理をするコードを書く データを受け取って保存処理をします。 WordPressにはajax用のwpajaxsave_dataという便利なフックがあります。 前のコードでfd.append( \'action\', \'savedata\' );を指定したようにaction名はsavedataで渡されます。 同じsave_dataという名前で関数を作ります。 actionは必ず投げられる値ですが、保存する必要ないので除外します。 wpnoncefieldから、送信元の場所とデータ照合ã

1®å€¤ã‚‚送られてきます。 varifiedfield（データ照合）とwphttpreferer（参照元）も保存する必要ないので項目から除外します。 管理画面で出力するhtmlコードなどを作成で追記したフィールド、wpnoncefieldのバリューが正しいか判断します。 フィールドもなく、値もない場合は処理を終了します。 プログラムがうまくいったかは必ず Chrome Dev ToolのNetwok を確認しよう 保存できたかどうかを確認する前に、ちゃんと思ったデータが送信されているかを確認しましょう。Chromeの開発者ツール（Dev Tool）からNetworkを使えば「post」データとして送信されていることが確認できます。 ※レスポンスタブを開くと「Success」が返ってきています。 まとめ・非同期処理だとユーサーもハッピー 以上ざっくりですが、駆け足で管理画面のカスタマイズ方法、WordPressのもともとある機能のajax非同期処理でサイト全体をお伝えしました。 書いておかないとすぐ忘れるのを防止する個人的なメモではありますが、皆さんのWoedPressカスタマイズの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry463","title":"timer javascriptの決定版！js カウントダウンをコピペで即実装","date":"2021-05-22","modifiedDate":"2026-07-04","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry463.webp","description":"js カウントダウンタイマーのシンプルな実装手順を解説。js timers（タイマー処理）の基本から、コピペで動く全コード、終了処理、正確な時間を取得するライブラリ（Luxon）の活用方法までスマートにまとめました。","tags":["JavaScript"],"body":"jQueryを使わずに、プレーンなJavaScript（バニラJS）だけで軽量なカウントダウンタイマーを実装する方法を紹介します。 仕様に沿ってサクッと動かせるよう、まずはそのままコピペして使える完成版の全コードから最優先でお届けします。 日、時間、分、秒を取得する計算ロジックから、setTimeout＆clearTimeout を使った確実なタイマー終了処理まで、実務で今すぐ役立つ手順をまとめました。 この記事の対象者 JavaScriptを使って実践的なコードを書いてみたい Webコーディングやプログラミングのスキルを磨いている ライブラリなし（プレーンなJS）でスマートに実装したい requestAnimationFrame を使ったループ処理にも興味がある ライブラリいらず！バニラJSで実装するから、テキストエディタとあなたのアイデアだけで今すぐ実装できます！ この記事は、コードの可読性を大幅に向上させ、さらにライブラリ（Luxon）で正確な時間を取得する応用手順も分かりやすく追記しました。 js カウントダウンタイマーの全コード！コピペで動く実装サンプル すべてのコードはこんな感じになります。 ここまでのコードではCSSを実装していないのですが、CSS付きでCodepenにサンプルをあげています。 興味がある方はこちらもどうぞ^ ^。 カウントダウンタイマー|CodePen 現在と終了日の差分を取得する getTime() で値の取得をします。 1970å¹´1月1日深夜0時から指定した日時までの ミリ秒 を取得できます。 差分が残り時間（ミリ秒）になるのでこの数値を日、時間、分、秒に変換します。 getMonthに気をつける Dateオブジェクトは月や曜日、日にちなども取得できるメソッドが用意されています。中でもgetMonthという月を取得するメソッドを使用する際は要注意、JSでは月だけなぜか0始まりで5月が4といったようになります。出力する際はgetMonth() + 1といったように1プラスする必要があります。 Data オブジェクトがうまく動かない場合 次のような簡略化した書き方では、一部のブラウザ（特に古いバージョン）は、完全にISO 8601形式（日付と時間の標準）に準拠した文字列でないと解釈できないことがあるので注意。 Data オブジェクトの取り扱いには以下も併せて注意が必要。 ブラウザ依存: JavaScriptのDateオブジェクトはブラウザごとに実装が異なる。一部のブラウザはローカル形式の日付文字列をサポートするが、他のブラウザではエラーの発生する可能性がある。 時間帯: 明示的にタイムゾーンを指定しない場合、一部のブラウザはデフォルトのタイムゾーンを使用し、それに基づいて日時を解釈。 回避法。コンストラクタ引数を使用する。 ライブラリを利用できます。 Luxon 切り捨てと除算を使って秒、分、時間、日数を取得する まずは秒を取得してみましょう。 取得した値はミリ秒なので、 単純に1000で割り、小数点以下を切り捨て値が秒になります。 Math.floor()を使って小数点以下を切り捨てます。 ここから分を除くためには、60で割った余りを取得しなければなりません。 余りを計算するのに便利なものが除算です。 先に除算の使い方を紹介します。 除算は%を使います。13を3で割ると余りは1になるので出力結果ã

1¯1になります。 60（分）で割り切れな数が秒になるので、次のような計算式で出力できます。 秒、分、時間、日数はそれぞれ次の通り算出できます。 カウントダウンに必要なそれぞれの値を関数にまとめる js timers（タイマー処理）の基本とsetTimeoutの使い方 タイマー処理をします。関数countDownで作った値をHTMLに反映させます。 今回はsetTimeoutを使いました。 出力はオブジェクト配列をループさせるために for in 文を使いました。 タイマーの終了処理を入れる このままでは0の状態でTimerだけ動き続けるので、終了処理を入れます。 残りの日時のすべての値が0になったら、タイマーを止めます。 requestAnimationFrame を使う事もできます。 requestAnimationFrame と setTimeout の違いはこんな感じ。 | | setTimeout | requestAnimationFrame | | ------------ | ------------------------------------- | ----------------------------------------- | | メリット | 簡単、 任意の時間間隔で実行 | スムーズなアニメーション、 効率的 | | デメリット | 描画と同期しない、 カクつくことがある | 正確な時間指定が難しい、 ループ処理が必要 | | 使い方 | 指定した時間後に関数を実行 | ブラウザの描画のタイミングで実行 | 正確な時間間隔での繰り返し処理が必要な場合は、setTimeout を使ってください。 キャンペーンやセール終了などはクレームになりかねないので、setTimeoutがいいかもですね。 タイマーのID名をセットします。 ある条件で、clearTimeout(ID名)で終了させることができます。 new Date()の使い方 JavaScriptの Date オブジェクトについて。 JavaScript の日時は、基本的に協定世界時 (UTC) の1970å¹´1月1日深夜0時からの経過ミリ秒数で指定されます。この日付と時刻は、コンピューターに記録される日付と時刻の値の主な基準値である UNIX Epoch と同じです。 Date|MDN ちょっと画像が小さいですが、現在の日時を取得できます。 私が住むフィリピンの時間になってますが、日本で同じコードを実行すればもちろん日本の時間が取得できます。 ライブラリで正確な時間を取得（2025å¹´2月追記） キャンペーンなどに使うカウントダウンタイマーは、より正確な時間を取得して、タイムゾーンがずれないようにする必要があります。 先程も Luxon について少し紹介しましたが、他にもいくつかライブラリがあります。 | ライブラリ | 特徴 | | --------------------------------------------- | ------------------------------ | | Luxon | モダンなAPIと軽量性を両立 | | date-fns-tz | 軽量で機能的 | | Day.js | 軽量でMoment.js互換のAPI | | js-Joda | ドメイン駆動設計で不変性を重視 | 今回は、Luxonを使ったコードを紹介します。お手軽にCDNを読み込んで使います。 カウントダウンタイマーライブラリで正確な時間を取得 まとめ：timer javascriptはライブラリなしでもサクッとに実装できる シンブルですがバニラJS（プレーンなJavaScript/CommonJS）でカウントダウンを実装してみました。 もうちょっとデザインをブラッシュアップすれば、キャンペーンとかにも有効的に使えそうですね！ キャンペーンとして使用するに当たって注意です。 ひと昔前に、「キャンペーン終了まで残り●日」が毎日リセットされるカウントダウンをウェブサイトに実装し炎上した企業がありました。 お客に対してに対してウソはいかんです！ プログラミングを使ってキャンペーンを打つときは、誠実に！ ていうか、人として誠実が大事 ですよ！ 余談が過ぎましたが、この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":false},{"slug":"entry462","title":"全部使ったことある？便利なCSS関数12選！！","date":"2021-05-21","modifiedDate":"2026-03-20","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry462.webp","description":"CSSって関数があるのをご存知ですか？気づかず使っている人多いはずです。2022å¹´6月15日にIEがいなくなるので、大手を振って使えるCSS関数がたくさんあります！私が普段使っている関数と今後バンバン使っていきたい関数を事例とともに12選紹介します！関数は目次にあるので、お好きなものだけ飛ばし読みしてください。","tags":["CSS"],"body":"CSSって関数があるのをご存知ですか？気づかず使っている人多いはずです。 2022å¹´6月15日にIEがいなくなるので、大手を振って使えるCSS関数がたくさんあります！ 私が普段使っている関数と今後バンバン使っていきたい関数を事例とともに12選紹介します！関数は目次にあるので、お好きなものだけ飛ばし読みしてください。 ちょっとマニアックな関数も紹介します！CSS大好きな方、ワクワクでお付き合いください^ ^ この記事の対象者 CSSが少しわかる Webデザイン・コーディング勉強中 CSS関数を追求したい SCSSが分かっている 今回SCSSを中心としたCSSの記述になってますのでご注意を。 ※ リセットCSSを使うことが前提条件です。 もはやヘビーユーズ！calc関数 px、%、emどんな単位でもかかってこいや！全部計算してやんよ！！ ってのがcalc関数です。もはや「愛してます」って言いたいレベルに大好きです。 使用例その1・2カラムレイアウトで片方の幅を固定したい 右側のサイズを200px固定、余りを左側へ設定したい場合に役立ちます。 変数を使いましょう！ 2カラムレイアウトで片方の幅を固定したい|CodePen gridを使ったらもっとカンタンです。。。 使用例その2・グリッドレイアウトを使いたいとき カラムを12コに分ける12grid layaout systemという考え方があります。 使うメリットはデザインに規則性を持たせることもでき、レイアウトが揃ってきれいです。 規則性があるので、ムダなコード量も減ります。 コーダーもデザイナーもハッピーになります。 一個の列の幅は全体100%とし、12に分けるので8.33333333333%になります。 一個の列をいくつ使うかでレイアウトを決めていきます。 SCSSはこんな感じ グリッドレイアウトを使いたいとき|CodePen step関数でコマ送りアニメーションを実装 最近のCSSアニメーションはめっちゃ優秀なんですが、step関数を使うとこんなものも作れます！ コマ数分のイラストを置いた画像素材を作ります。並べる方向は縦でも横でもOK!! 画像の種類は透過PNGでもOKです。 コマ数をstep関数にセットします。 上記は画像が横方向の場合です。たて簿場合は以下のようになります。 background-position: 0 -画像の長さ; 昔のファミコンのキャラクターぽいものを作成します。あえてレトロ感を出すため、step数を少なめにしています。 step関数でステップアニメーション|CodePen 自動でナンバリング出力！counter&counters関数！ counter関数はオリジナルでリストや章にナンバリング出力したいとき、便利です。 詳しくは以下記事にまとめてますが、ざっくり紹介します。この関数はCSS2からあるのでIE対応不要です。そこが好きです。 counter関数を使うためには設定があります。増やしつつ、リセットする必要があります。 使用例その1・セクションごとにナンバリング ナンバリング表示はリストを考えがちですが、章ごとにナンバリング付きの見出しを出力することもできます。 セクションごとにナンバリング|CodePen 使用例その2・入れ子ナンバリング counters関数を使うと入れ子のナンバリングができます！ こういうのやりたいですよね？？ 入れ子ナンバリング|CodePen カスタムデータ（data-）の値を取得できるattr関数 今更いうまでもないですがhtml5からカスタムデータ（data-）が取得できるようになりました。 data-任意の名前 JSではへビーに使ってますが、これめっちゃ便利でCSSで値を取り出して使うこともできるんです！ 取得方法は、beforeやafterでcontentで出力します。 使用例・Tooltipsとして使う ツールチップス（マウスオーバーで注釈や説明を表示）の使い方です。 Tooltipsの作り方|CodePen rgba関数で色だけじゃなく透明度を設定する rgb関数というものがあり、R（赤）、G(緑)、

1B（青）（光の三原色）と色を設定する方法です。 255が最大値なので、3色とも最大値に設定すると白になります。 rbba関数はrgb関数にアルファ値（透明度）が加わったものです。 アルファ値（透明度）は1 ~ 0で設定できます。 ちょい長いですよね？コード書いていると、16進数が記述量も少なく便利です。 scssだと16進数+α（アルファ・透明度）値で設定できるので便利です。 使用例・グラデーションをかぶせる。rgba関数とlinear-gradient関数の合わせ技 微妙な色を表現するにはlinear-gradient関数（線形グラデーション）が便利です。 画像は写真の上に白グラデをCSSでほんのり乗っけたものです。 Tooltipsの作り方|CodePen 最小値や最大値を決めて挙動を制御できるmin&max&clamp関数 minmax関数はgridレイアウトとセットで使用しますが、min関数とmax関数の使い方を紹介します。 混乱しないように注意して欲しいのが、最大値を設定できるのがmin関数、最小値を設定できるのがmax関数です。 ※ min関数とmax関数はIE未対応です。 使用例その1・min関数でボタンの幅を制御 ボタンなど最大幅を決めて、それ以上は広がらないようにしたいというような制御をよく行います。 いつもはこんな感じで書いていました。 min関数ではこんな感じに書けます。 min関数でボタン幅を制御|CodePen 使用例その2・max関数でロゴ幅を制御 先ほどとは逆でヘッダーロゴなどの最小値を決めて、それ以下は広がらないようにしたいこともあります。 min関数ではこんな感じに書けます。 今回は単位をVW（ブラウザ幅）を使ってみました。 max関数でロゴ幅を制御|CodePen 使用例その3・clamp関数で幅の最大と最小値を制御 レスポンシブ対応をしていると最大値も最小値も制御したい！てことが出てきます。 そんな時はclamp関数を使います。 clamp関数はmin関数とmax関数を同時に使ってる感じです。 コードをすべて書くとこんな感じです。 var関数（カスタムプロパティ）でよく使う値を登録し、効率よくコードを書く var関数（カスタムプロパティ）は繰り返し使う値を登録しておくことができる便利機能です。 この「銀ねこアトリエ」でもvar関数（カスタムプロパティ）でこのように登録してあります。 変数は-- + 任意の名前で登録できます。 呼び出す時は以下のように書くだけ。 css-vars-ponyfill|GitHub image-set関数で背景画像もディバイスごとに解像度を調整 html同様にimage-set関数というものがCSSにも存在します。 Chrome、Firefox、Safariは表示されました。Edge仮想環境で確認したけど表示されず（Chromeと一緒なのになー汗）。。。 背景画像もディバイスによって画像の出し分けできたら、便利！ ちなみにimage-set()|MDN)通りに書いたら動きません。必ずurl関数の中に画像パスを書いてください。 img画像は解像度を変えたものを用意したらいい感じになると思います！ image-set関数で画像のディバイスごとの解像度を調整|CodePen まとめ・CSSの関数を使って便利に 今回は12コのCSS関数を紹介させていただきました。 他にもたくさんあるんですが、厳選してみました。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry464","title":"フィリピン・セブ島のスラム街のリアルな現状！現地の治安や服装ã

1®æ³¨æ„ç‚¹ã‚‚","date":"2021-05-20","modifiedDate":"2026-06-22","category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2021/entry464.webp","description":"セブ島のスラム街へ実際にお邪魔して見えた実態です。子どもたちの笑顔の裏にあるフィリピンの貧困の現実、そして面白半分での訪問を戒める安全対策を徹底解説。現地でトラブルを避けるための服装や、信頼できるボランティア団体の選び方まで生の声をお届けします。","tags":["セブ島ボランティア体験記","子ども服をセブに送るプロジェクト"],"body":"フィリピン・セブ島と聞いて思い浮かべるのは、青い海とリゾート地でしょうか。 しかし、その華やかな景色のすぐ裏側には、お墓やゴミ山に、「スラム街」の中でも最貧困地区が存在します。 そこはマシなスラム街の人にも見下し軽蔑される地区です。 ネット上には、好奇心だけで足を踏み入れたような体験談や、どこか綺麗事のようにも聞こえる同情的な情報があふれています。しかし、実際の現実はそんなに単純なものではありません。 この記事では、セブ島に7年住み、現在では現地のNGO団体「DAREDEMO HERO」のボードメンバー（理事）を務める私が、実際にスラム街で目にした「ありのままの現実」を真っ直ぐにお伝えします。 可哀想な場所を見る目ではなく、そこに生きる人々の命の力強さを正面から受け止める勇気を持って、ぜひ最後までお読みいただけると幸いです。 セブ島の最貧困層の住むスラム街についてざっくり セブ島にはお墓とゴミ山に、いわゆる最貧困地区が存在します。 今回はセブ島NGO団体・DAREDEMO HERO Inc.さんのご好意でこの2大スラム街に同行させていただきました。見たことを可能な限り、ありのままお伝えします。 ※ スタディーツアーではありません。単なる同行です。 洋服を送るきっかけはこちら。 【警告】スラム街を訪問する際の現実的な注意点と服装 この記事を読んで「自分も現地のリアルを見てみたい」と思った方へ、セブ島に7年住んでいる私から、大切な注意点を3つお伝えします。 1. 服装について スラム街に行くからといって、わざわざボロボロの服を着ていく必要はありません。普通のTシャツとズボンで十分です。ただし、ブランド物の時計や目立つアクセサリー、高級なバッグだけは明確にリスクになるので絶対に置いていってください。現地をリスペクトする普通の格好、それが一番安全です。 2. 個人的な金銭の授受は法律違反（アンチ・ベガリー法） 可哀想だからと、 個人的に子どもたちへお金を渡すことは絶対にやめてください 。フィリピンには「アンチ・ベガリー法（乞食防止法）」という法律があり、 路上での物乞いや、それにお金を与える行為は法律で禁止 されています。良かれと思った行動が、現地のコミュニティを歪め、あなた自身をトラブルに巻き込む原因になります。 1. 信頼できる団体を通すこと 間違っても、好奇心や面白半分で一人でスラム街に入り込むような無謀な真似はしないでください。訪問したい場合は、必ず現地の信頼できるボランティア団体に問い合わせて、ガイドラインに従って行動してください。 2025年以降、現在私はフィリピンの NGO団体・DAREDEMO HERO のボードメンバー（理事）を務めています。実情を知っているからこそ、この安全と法律のルールだけは強く、責任を持ってお伝えさせていただきます。 ※その後、活動を続ける中で私が気づいた「本当に現地のためになる持続可能な支援の形」については、こちらの記事で詳しくお話ししています。 YouTubeも作りました！！ YouTubeでも配信しています！併せてご覧ください。 お墓に住む人たち セブ島にはお墓に住んでいる人たちがいます。私は、そのうちのひとつにお邪魔しました。 この墓の一区画とかに管理費をもらいながら家族で住んでいるそうです。 不法占拠しているのかと思った！！知らなかった！ フィリピンの国民のほとã

1‚“どがカトリック。お墓はもちろん西洋式で4面のうちまともな壁は一個くらいで残りは鉄格子です。 各おうち（お墓）の正面はこんな感じで、プライベートゼロです。 ※ 食用としてブタを飼われていました。。。 最貧困スラム街の住人ももちろん、仕事を持っています。たまたま遭遇したお父ちゃんは墓石を彫ってました。 「写真撮らせてくれ」ってお願いしたらめっちゃ恥ずかしがってましたが、最終的にはぎこちない笑顔で撮らせてもらえました。 ※ 墓石職人の娘。おうちでおままごとらしきことをしていました。 子どもたち。カメラを向けられると嬉しいのか楽しいのか、必ずポーズを取ってくれます。 ゴミを拾って生計を立てる人たち フィリピンには ゴミ山(※1) 付近に住み、ゴミをあさって（有価物回収で）生計を立てている人たちがいます。 ちなみにゴミ山に住む人たちは スカベンジャー(※2) と呼ばれています。 ※1 ゴミ山は元々ゴミ集積所。※2 語源はあまり良い意味ではないですが興味がある人は調べてみてください。 フィリピンのゴミ山と言えば首都マニラにあるスモーキーマウンテンが有名です。Wikipediaにも掲載されています。 ゴミ山に関する映画（ドキュメンタリー）もあります。 BASURA バスーラ ※ BASURAとはタガログ語でゴミという意味です。 セブ島にも同様にゴミ山があります。私もそのひとつにお邪魔させていただきました。 バン（車）を降りた瞬間、マスクの上からも悪臭を感じウゥッとなりました。 彼らはゴミを捨てられる前に、ダンボールや金属など売れるものを探します。大人だけでなく、子どもたちもゴミ収集車に集っています。 フィリピンではゴミをちゃんと分別しないので、有害ゴミや残飯も一緒くたに捨てられています。彼らは売るものだけではなく、なんと食物も探します。 ファストフードなどの残飯を、油で揚げて（殺菌？）再利用して食べているそうです。 えええ〜〜〜〜〜〜！！そんなもの食べてるの？？！！ 衝撃 でした。 理由は食べ物がないから、だそうです。 また勉強不足発覚だったのですが知りませんでした。。。。 生活用水・排泄物ももろとも地面に流すせいかめっちゃ汚い水たまりがあちこちにありました。もちろん、水道は通ってないので下水もありません。 ※ この写真はまだマシなものを採用しています。 ちなみに生活用水は基本井戸水かためた雨水を使うそうで、各家ã

1®å‰ã«ã§ã£ã‹ã„樽がありました。 どこに行っても子どもたちは超笑顔。カメラを向ければ必ずポーズ。この日はおままごと中でした。 日本人からすれば劣悪な環境ですが、彼らはできることを精一杯しているように見えました。 ※ 近日できる（現在完成）ラーニングセンターの飾り付けをお手伝いする子どもたち。 ※ 住宅の中の様子。乳幼児などの小さい子供はほとんど服を着ていない。 この日、ゴミ山では子どもたちへサンダルを配布をしていました。 彼らはこの不衛生な中、裸足で過ごします。サンダルなどの靴類もありがたい物資です。 新しく新調したサンダルだからか、足を洗って履いている子どもたちがいました。 おばあちゃんやお母さんも子どもに新しいサンダルを履かせることができ、笑顔でした。 ちなみに何気に子どもたちがおしゃれな服を着ているのは、支援された洋服を着ているからだと思われます。 実際、この環境にミスマッチな洋服を着ている子どもとそうでない子、半裸から全裸まで混在していました。 スラム街ではたくさんの子どもたちに出会った 同行中、たくさんの子どもたちに出会いました。 フィリピンではコロナのせいで2020å¹´4月くらいから対面授業が禁止されています。 フィリピンは高校まで（13年間）は義務教育なので授業料タダです。 現在、子供達への授業はオンライン授業やプリント配布で対処しているみたいですが、ほとんどの最貧困層の家庭ではネットやパソコンなど授業を受けるための環境を用意できません。 今までかろうじて学校に通えた最貧困層の子どもたちは、オンライン授業を受けることができないので、ただ家にいるのです。 フィリピンのスラム街の現実から私たちが学ぶべきこと 今回感情をできるだけ排除して見たままを伝える努力をしました。 こんな記事を書いた理由があります。 ちまたで流れてる情報を鵜呑みにして「フィリピン危険！」の一言で片付けて欲しくないです。 少なくとも私は屈託のない笑顔の子どもたちを実際に見ã

1¦ã€ãã‚“なこと言う気にはなれませんでした。 もちろん、安全とも言いません。 私もたった3年しか住んでませんので伝え方が正しいのかも分かりません。 この記事を読んで、フィリピン・セブ島をどう思うかはみなさん次第です。 ただ率直に、私の目に映ったセブ島の最貧困層の住むスラム街をご紹介しました。 最後に：私が一個人の気持ちとして、この活動を続ける理由 世界の一人でも多くの子どもたちが健康に大人になれたらいいと思い「子ども服をセブに送るプロジェクト」を始めました。 私ができることは周りにいる人を手伝うことぐらいです。 私がこの活動をする目的はあくまで、世界の一人でも多くの子どもたちが健康に大人になれたらいいです。 どのNGO団が、とか体関係なく私の小さな力でもお役に立てるなら協力します。 そういう一個人の気持ちでこの活動していることだけ知ってもらえたら幸いです。 最後までお読みいただきありがとうございました。 「子ども服をセブに送るプロジェクト」支援者の皆様 送料を送るためにご支援いただきましたみなさまありがとうございます！ 株式会社イーシーキューブ 様 ヤマモト コウ 様 中村 亜夜 様 満井 美恵 様 栗原デザイン室 様 TanTan 様 ハッピーちゃい夢 様 洋服の支援元 Lynks 様 おまけ・現在セブ島にある日系NGO団体 もし何か支援をしたいなと思った方は各団体のサイトを見てみてください。 Anya\'s HOME DAREDEMO HERO INC. セブンスピリット Glolea Cebu ※ 支援を斡旋している訳ではありません。支援活動をされる方はあくまで自己責任でお願いします。 現在の活動は職業訓練に発展しました！関連記事もお読みください。","noindex":false},{"slug":"entry460","title":"Slackカスタムレスポンスと面白い使い方！初心者を脱出する活用術","date":"2021-05-14","modifiedDate":"2026-07-04","category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2021/entry460.webp","description":"Slack初心者が業務を効率化するための面白い使い方と、設定必須のカスタムレスポンス活用術をまとめました。無駄な多機能に振り回されるのは時間の無駄です。実務で本当に使えるハックだけを冷徹に厳選して解説します。","tags":["便利ツール"],"body":"「会社でSlackを導入するから、とりあえず使いこなして」と言われ、多機能すぎる画面を前に途方に暮れていませんか。 何から覚えればいいか分からないまま、無駄な機能に時間を溶かすのはきわめて非効率。 Slackは単なる連絡ツールではなく、設定次第で自分の分身にできる強力なシステムです。 この記事では、Slack初心者に向けて、業務を劇的に楽にする 面白い使い方 と、自動返信で社内を沸かせる カスタムレスポンス など、便利な設定方法を解説します。 この記事でわかること Slackカスタムレスポンスの設定方法と面白い返答アイデア 初心者が一瞬で差をつけるSlackの面白い使い方 実務で絶対に外せない最低限の通知・検索ハック Slack初心者がまず覚えるべき！文字や文章のカンタン装飾テクニック チャットツールによってはプレーンな文章しか書けず、大事な部分を読んでもらえてないこともあります(´・ω・｀)ｶﾞｯｶﾘ… 伝わらないのは「伝え方が悪い」と思うようようにしています。 Slackは適度に投稿内容を装飾しながら書くことができます。 装飾はカンタン！ボタンでポチポチ文字を装飾できます。（前はなかった気がする！！） 初心者に優しい！ ショートカットやマークダウンで書いた方が圧倒的に効率がいいです。 よく使うものは覚えておくとベンリです。 | 装飾 | 用途 | ショートカット | マークダウン | | -------------------- | ---------------------------------------- | -------------------- | ------------------------------------ | | 太字 | 文字を強調したいとき | ctrl/cmd + b | *（アスタリスク）で囲む | | | 斜体 | 文字を強調したいとき | ctrl/cmd + i | _（アンダースコア）で囲む | | 打消 | 文字に打消したいとき | ctrl/cmd + shift + x | -（ハイフン）で囲む | | コード | コードを書きたいとき | ctrl/cmd + shift + c | \\\\（バッククォート）で囲む | | コード（ブロック） | コードをブロック単位で書きたいとき | ctrl/cmd + shift + c | 文章を\\\\\\\\\\\\（バッククォート）で挟む | | 箇条書き | 文章をリスト形式で書きたいとき | ctrl/cmd + shift + 8 | 先頭に*（アスタリスク）+ スペース | | 番号箇条書き | 文章を順を追ってリスト形式で書きたいとき | ctrl/cmd + shift + 7 | 先頭に数字 + .（ピリオド）+ スペース | | 引用 | 誰かの投稿内容などを引用したいとき | ctrl/cmd + shift + 9 | 先頭に>（大なり）+ スペース | コミュニケーションが変わる！Slackの面白い絵文字（Emoji）活用法 絵文字をコメントのリアクションとしても使えることでã

1™ã€‚ もちろん、スタンプのような使い方もできます。ありがとう（アリが10匹）みたいに、~~昭和生まれな~~くだらない使い方もできます。 Slackのおもしろいところは、独自の絵文字を作れるところです。 自分たちのワークスペースに必要な絵文字（リアクション）を追加できます。 ※ ダークモードなどにも対応するために透過PNGで作成することをオススメします！ 削除するときは、左上の「ワークスペース名」をクリックし、「以下をカスタマイズ~」をクリックします。 現在使用中のワークスペース設定（ブラウザー）へ飛びます。もちろん、ここからも絵文字を追加できます！ 追加した絵文字の右側のバツアイコンをクリックします。 ※ 自分以外の作ったものは管理者権限がないと削除できません。 大切な投稿はピン留めやブックマークを活用してすぐ読み返そう！ みんなと共有したい\\b大切な投稿は右サイドバーにピン留めとして置いておくこともできます。 右サイドバーの開閉は（アプリorブラウザー）以下のアイコンをクリックします。 右サイドバーの開閉のためのショートカットもあります。（ctrl/cmd + shift + i） サイドバーのピン留めを確認するとこんな感じでカードがあります。バツアイコンをクリックするとピンを外せます。 ※ ピン留めがない場合、カードはありません。 自分だけが見返したい投稿はブックマーク機能 自分には大切だけど、他人には関係ない投稿はブックマークしておきます。 ブックマークの用途の説明が上部に書いてあるのですが、使い方わかってしまえば不要です。なのでバツボタンをクリックして非表示にしておきましょう。 自分へのDMをメモとして活用 私はよく、LINEなどで受け取ったメッセージや、外出中にあとで見たいリンクなど見つけたらSlackの自分自身にDMします。 内容に応じて大事なものをピン留めや、ブックマークして整理しつつメモ帳感覚で使っています。 誤爆防止！たくさんワークスペースがあるときはテーマを変えよう！ 現在私はSlackで9ワークスペースぐらい使っており、主要なワークスペースはテーマを変えるようにしています。 理由は、誤爆防止（間違えて投稿しないようにするため） です。 昔全然違うワークスペースへ投稿して寿命が縮む思いをしたことがあります。 Slackのいいところはテーマもスマホアプリなどと同期します。 どの端末からSlackを使っていても、どのワークスペースにいるかがわかりやすいです。 Slackカスタムレスポンスの作り方！社内を沸かせる面白い返答アイデア Slackにはカスタムレスポンスという機能があります。特定のワードに対して、Slackbotが反応してくれます。 よくある質問などはSlackbotに答えてもらうと仕事が減ります。 絵文字の削除の時と同様、左上の「ワークスペース名」をクリックし、以下を「カスタマイズ~」からワークスペースの設定へ移動します。 タブをSlackbotに切り替えて、新しいレスポンスを追加します。 「メンバーがこう言ったら」の部分は、Slackbotに反応させたいワードです。 ,（カンマ） 区切りで複数設定可能です。 botのメッセージを改行したいときは\\\\n（バックスラッシュ + n、Windowsは¥（円）記号）を使います。 改行した後にリンクを貼りたい場合、スペースなどを挟むなどして工夫しないと表示されなかったり、リンクが飛ばなかったりしますのでご注意を。 Slackbotの残念なところ 文章によってはワードの前後にスペースなどがないと、botが反応しないことがあります。英語圏で作られたビジネスチャットツールなので、スペースなしに続けて文章を書く日本語にフィットしないところもあります。 高機能な検索で重要な投稿を探しだそう！ Slackは検索が超！！！高機能です。 Slack上部に検索窓から検索できます。フリーワードでも検索できますが、長く運用しているワークスペースでは効率が悪いので的を絞って検索することをオススメします。 ざっくりメッセージ、ファイル、チャネル、メンバーディレクトリー（誰が所属しているチャンネルか） の4つの項目を選びつつ検索できます。 余談ですがTwitterでもいろんな検索方法使えます^ ^ Slackの検索機能はめちゃくちゃ高度で説明したらキリがないので、私がよくやるパターンを2つご紹介します。 その1・いついつくらいに〇〇さんからもらったPDF資料どこやっけ。。。 これめちゃくちゃ使います！ ファイルを選んだ後、人、期間、ファイルタイプなどで記憶を元に検索します。 「私探偵？」って思うくらい見つけられます。 ※ フリープランの1ワークスペースのファイルストレージの上限は5GBまでです。古いものからアーカイブ（削除）されます。 その2・過去の投稿を遡（さかのぼ）り証拠を突きつけろ！ 上司や部下が「そんなこと言ったっけ？」とか、トボけ出したら検索の出番です！！ 言った言わないで揉めるのが一番イヤ！証拠さえ見つかれば「あなたがこう言ったんでしょ？」が確実に突きつけることができます。 アカウント、期間、どんな発言だったか大体のキーワードなどを組み合わせて調べます。探したい投稿によって組み合わせるものは変わってきます。 なので、検索術「その1」を参考にしつつ、検索してみてください。 私はこのSlack検索のおかげで何度も救われましたw そして事件が連発しすぎて、検索窓へ直打ちして検索できるようになりました。 編集期間をセットして隠蔽（いんぺい）を防止しよう 中に一度投稿内容を削除して証拠隠滅（いんめつ）する人もいます。防止するために、編集できる期間を設けることをオススメします。 メッセージの編集と削除権限を管理する | Slack 忘れっぽいあなたにリマインダー Slackではbotを通じて決まった日時や時間にリマインダーとして通知を送ることができます。 昨日の晩ご飯もæ€

1ã„出せないのに、2週間先に思い出せるワケないですw（個人の意見です） 投稿入力欄にコマンドを打ち込めば、リマインダー登録できます。 ※ コマンドは投稿欄に入力して実行します。 実際のコマンドサンプルはこんな感じ。これで30分後にアカウントcamilleさんへ通知が行きます。 コマンドって一般人にはちょーーっと敷居が高いですよね？ なので、私のオススメのやり方は最低限コマンドで設定し、日時は後から追加する方法です。 botに「いつこのリマインドしましょうか？」って聞かれるので、曜日や時間を設定します。 SlackとGASを連携するともっと高度に定期メッセージが送信できます。少しテクニカルですが参考にしてください。 リマインダーの一覧を確認したり、削除したい 以下コマンドでremindの一覧が見れます。 使わなくなったリマインダーは順次削除しましょう！リマインダー一覧の右側「削除」をクリックします。 心の安寧（あんねい）を。状況に応じて通知を切って過ごす ずっと通知が来ると集中を妨げますよね？そんな時は各々のワークorライフスタイルで通知設定を変えましょう！ いつでも設定は変えられるので大丈夫でã

1™ã€‚ 時間帯や曜日で設定 環境設定から通知される時間帯や曜日など変更できます。 ※ 環境設定はショートカットでも開けます。ctrl/cmd + ,（カンマ） チャンネル毎のミュート ミュートしたいチャンネルを右クリックしたら、チャンネルごとの設定を変更できます。 「たまに確認すればいいや！」ぐらいのチャンネルであればチャンネルもろともミュート。 自分への呼びかけのみ、通知を受け取りたい場合は「変更通知」から「メンションのみ」にします。 @here（アクティブなステータスで作業をしているメンバー）と@channel（そのチャンネルに所属している全員）を含めるかはお好みで。 特定のワークスペースの通知をオフ あまり通知が来ると困る場合は、バッサリオフしてしまいましょう。 「環境設定」「通知」より設定できます。 まとめ：Slack初心者こそカスタムレスポンスや面白い使い方で仕事を楽にしよう 私が普段ヘビーに活用しているSlackの使い方をご紹介いたしました。 慣れてきたらアプリなどと連携してWebサイトからのお問い合わせ・GitHubのコミットなどを、特定チャンネルに振り分けて通知させることもできます。 この記事で紹介していることは初心者から抜け出ることができる、ごく一部です。 必要だったり興味のある機能あれば参考にしていただければ幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry461","title":"シングルマザー再就職！30代ひとり親がIT転職未経験から人並みに稼いだ道のり","date":"2021-05-14","modifiedDate":"2026-07-11","category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2021/entry461.webp","description":"30代高卒のシングルマザーだった私が、未経験からIT業界へ転職して人並みに稼げるようになるまでの道のりをすべて公開します。子育てと両立しやすい在宅ワークのリアルや、ひとり親の再就職でハローワークを使ってはいけない理由など、経験者かつ起業家目線のリアルな生存戦略を解説します。","tags":["キャリアアップ・転職"],"body":"子供との時間が取れない。今の収入じゃ子供を塾にも行かせられない。はあ、どうしよう。 子供たちを十分養えるほどお金は稼げていますか？ 生活は苦しくないでしょうか？ 30代の頃の私は、これといったスキルもないのに離婚してしまいました。そこから始まったのは、自分の収入の低さと子育ての両立に悩む日々でした。IT業界に転職するまでの私は、まさに社会の厳しい荒波にのまれるだけでした。 IT転職するまでの私の人生 大学中退後、フリーターやバイトで適当な20代前半を過ごす。やっと正社員になれた直後に予期せぬ妊娠・出産 ネイリストの資格を取得して美容業界へ入るも、激務と重い責任に対して年収はたった200万円前後 息子の喘息（ぜんそく）発作による急な欠勤が重なりネイリストを断念。美容インストラクターへ転職するも離婚。非正規雇用で国のひとり親補助制度に頼りながら生活 しかし、私はIT業界に飛び込んだおかげで、自分の力で人生を動かすチャンスを掴むことができました。 この記事では、 同じように悩むシングルマザーにこそITスキルを強く推す理由 と、 給料がよく福利厚生が充実した会社を見つけるため のアプローチについて紹介していきます。 この記事でわかること シングルマザーにこそ未経験からのIT転職を推す理由 資格や経験がない状態からの再就職を成功させる手順 ハローワークやフリーランスの選択で失敗しないための防衛策 安定した給料と育児ができる環境を手に入れて幸せになる方法 ※あくまで私が紹介するのは、一般的な金額を稼いで子供と一緒に過ごせる環境を作るための道のりです。何千万円も稼ぐような夢物語ではなく、地に足ã

1®ã¤ã„た生存戦略だけをお伝えします。 高卒で持病のある子供がいる私がシングルマザーにこそIT転職未経験を推す理由 私がIT転職する前のことです。 若い頃の私は喘息（ぜんそく）の息子を持ちながら働いていました。 Nail Expoというネイル技術を競う大会で受賞歴もあったのに子持ちだからという理由で正社員になれなかった 息子が喘息（ぜんそく）発作で会社を休むと、先輩から「これだから子持ちは」と罵（ののし）られる ろくな福利厚生もない上、薄給。バイトなのに責任の重い仕事を任される 給料は安いのに責任だけ重い。そんな中、息子が喘息（ぜんそく）で入院もしたことがあります。 努力しても努力しても報われず、母親としても仕事人としても惨め。今でも苦しい気持ちで病院からスーツを着て息子の病室を後にしたことを忘れません。 せめて福利厚生だけでもまともな職を探しました。 美容インストラクターとしてメーカーに入りました。準社員にはなれましたが、正社員にはなかなかしてもらえなかったです。 子供の喘息（ぜんそく）は治ることはありませんでした。転職したあとã

1‚‚よく休み、すぐに有給を使い果たしました。 薄給でシンママの仕事と子育ての両立って、絶望しかありませんよね笑 私のように シングルマザーで悔しい思いをしている方はたくさんいる と思います。 私はIT業界に転身し、何と恵まれた業界かと度肝を抜かれました。 IT業界は私の人生を変えました。 ここからは、シングルマザーこそIT業界への転職を推す理由 をご紹介します。 子供が病気の時、家で働ける IT転職後、ネットショップで画像加工のバイトをしていました。ツールさえあればどこでもできる仕事です。 子供が喘息（ぜんそく）で会社に行けないときは家で仕事をすることを許してもらえました。 長い間、子供の喘息（ぜんそく）で仕事との両立に悩まされてきた私にとって大きな救い。心の底からIT転職してよかったと思いました。 私は何度か転職を重ねてきましたが、ほとんどの会社も状況に応じて在宅ワークOKでした。 高卒のシンママでも就職先がある 海外ならコンピューターサイエンスを専攻しておらず、大学も卒業していない人がプログラマーになることは不可能でしょう。日本ならそれができます。 私は大学中退です。しかも在学中も英文科だったのでプログラミングにはまったく関係のない分野です。 私の知り合いには、ケーキ屋さん、とび職、保険の営業マンなど異業種からの転身した方が多くいます。 シングルマザーだろうが低学歴だろうが、努力次第でプログラマーやデザイナーになれるのが日本です。 IT業界は給料が平均して高い 私は美容業界にいた時、年収はたった200万円前後でした。 ちなみに以下は30代女性の平均年収です。 | 職種 | 年収 | | -------------------------- | -------------- | | 事務 | 200万～300万円 | | グラフィックデザイナー | 320万~400万円 | | プログラマー・エンジニア | 370万~400万円 | | 看護師 | 500万円前後 | グラフィックデザイナー、プログラマー・エンジニアは女性でもそこそこ収入が得られます。IT業界は専門性が上がれば上がるほど年収が高くなります。 ツテで東京に本社を置くIT企業に転職できました。その頃私のITエンジニアとしての経験はまだ2、3年程度でしたが、年収400万円を越えました。福利厚生は充実、勤務スタイルもフレックス制という恵まれた環境です。 時間にも心にも余裕が持てるようになりました。 しかも副業も探しやすいのがIT業界です。お金が足りないと感じたら、副業でまかなうこともありました。 資格や経験のないひとり親の転職は難しい？シングルマザー再就職へのロードマップ 子供の近くにいたい。シンママだけどお給料のよい職業に転職したい。資格や経験がなくても大丈夫？ シングルマザーがIT転職するためには、資格や経験がなくても採用してくれそうなところで働いて経験を積んだり、スキルをつけるため民間スクールや職業訓練校に通う 必要があります。 私は職業訓練校でスキルを身につけたあと、経験を積みながら少しでも条件のいい仕事に転職していきました。 どうやってスキルを身につけるか知りたい方は「職業訓練校のプログラミング学習で就職できる？事例&評判をご紹介」をお読みください。 今回は仕事の見つけ方にフォーカスして解説していきます。 | 種類 | 詳細 | | ------------------------------ | -------------------------------------------------------------------------------------- | | 1.ハローワーク | マザーズハローワークに通い、職員ã

1®äººã¨ç›¸è«‡ã—ながら求職活動 | | 2.派遣会社・転職エージェント | 派遣会社を使って自分の条件やスキルに合った仕事を見つけてもらう | | 3.フリーランス | 派遣を切られたので仕方なくフリーランスを始める。知人から仕事を紹介してもらい食いつなぐ | | 4.就職先を紹介してもらう | 条件似合いそうな会社を知人から紹介してもらい無事転職 | こちらはIT業界に入ってから、シンママの私が歩んできた道です。 結論からいうと、派遣会社・転職エージェントを使って転職するのが一番手堅いです。 私はIT転職で収入アップという意味では以下2つで大いにしくじりました。 収入アップしたいならハローワークで仕事は探すべきではない フリーランスは自殺行為だからやるべきではない なぜシングルマザーがハローワークやフリーランスでしくじるのか、詳しく解説していきます。 収入アップしたいシングルマザーにハローワークでの就職をおすすめしない理由 ハローワークにはマザーズハローワークという、ママ専用の就職支援サービスがあります。 私も1回目のIT転職でマザーズハローワークを使いました。職員の方も親切で、親身に相談に乗ってくれる、とてもよいサービスです。 では何が問題なのか。 ハローワークの求人は無料で出せます。つまり、資金はないけど求人したい企業が利用していることが多い です。 IT系は人気の職業で慢性的な人不足です。その業界の求人がハローワークで出ているということは、お金のないかブラックなど、訳あり企業である可能性が高い のです。 これは、私の面接時のエピソードです。 イラストレーターやフォトショップが使えます すごい！では他の子より給料を高くしなきゃね！ その会社の求人票には780円から1500円と記載がありました。 初めてのIT転職。すっごく期待しました！ でも現実は、、、 信じた私がバカでした。 試用期間は750円スタート、その後780円になったものの給料は1円も上がりませんでした。しかも、同僚は主婦やシンママばかり。 マザーズハローワークに求人を出す企業の目的です。 シンママの労働力を利用する企業 マザーズハローワークではより安く使える労働力が手に入るから。 旦那さんがいる家で片手間に働きたいだけなら問題ないですが、シングルマザーにとっては死活問題です。 賃金は安く、雇用保険以外の福利厚生もない。 国のひとり親の補助制度なしでは苦しいだけです。 はあ、働いても働いても貧乏だ。。履歴書にかけるぐらいの期間働いたらすぐ転職しよう。。。 マザーズハローワークを使った転職は一番の失敗でした。 経済的安定がほしいひとり親はフリーランスの働き方を選ばないほうがいい理由 当時中学生だった息子を抱えてフリーランスをした私が断言します。 一番お金のかかる中学・高校生の子供を抱えたシンママにフリーランスは絶対オススメしません。 では、おすすめしない理由です。 フリーランスを始めたての頃は仕事が取れなくて2、3ヶ月収入がないってこともザラ。その間、どうやって子供を食べさせるんですか？ 私は息子が中学生の頃、派遣切りにあいました。切られた理由は派遣先のマネージャーとうまくいかなかったからです。 この出来事は相当ダメージを受けました。正直心を病みました。 新しい転職先を見つけたとしても人間関係を築く自信がなく、そのままなんとなくフリーランスになってしまいました。 これが完全な誤算でした。 中学・高校生の子育てはお金がかかる。シンママのフリーランスは自殺行為 フリーランスは収入が不安定です。なのに子供は成長に連れ、かかるお金は順調に増えていきます。 子供が中学に通うようになると制服代がかかります。教科書代、ノート代、部活動費。。。小学校の比ではありません。 中学3年になると高校受験が待っています。 もし、子供が私立高校に進学すると、シングルマザーにとって大きな負担となります。 私立高校は高い電子辞書を購入させたり、修学旅行もお金がかかる場所に行く傾向があります。 私立高校なんて、うちはお金がなã

1„ので無理です。 なので何が何でも公立高校に合格させる必要がありました。どうにか親に援助してもらい塾に通わせ、無理やり学力を上げました。近隣の公立高校はどれも倍率が高いので別の高校にチャレンジさせました。 が、この年だけ運悪く倍率が入学を狙った学校の方が跳ね上がりました。何とかその公立高校に合格させることができました。 全ては親の援助のおかげでした。 子供を抱えて不安定な収入は怖い。息子の高校入学後、不安定なフリーランスはさっさとやめて企業に就職しました。 転職エージェントなら資格や経験がないシングルマザー再就職でも条件の良い仕事が見つかる では、シンママがどうやってITの仕事を探せばいいのでしょうか？ 「資格や経験のないシンママが転職するのは難しい。どうすればいいの？」でお伝えしたとおり、資格や経験のないシンママは不安ですよね？ そんなシングルマザーには転職エージェントがおすすめです。私はシングルマザーだからこそ、あえて派遣会社をおすすめします。 シンママに派遣会社をおすすめする理由 職場が馴染めない、条件が合わない時も仕事が辞めやすい 気に入られると、そのまま正社員になれることもある 正規雇用じゃなくても比較的福利厚生はしっかりしている では転職エージェントや派遣会社をおすすめする理由を4つ解説していきます。 転職エージェントや派遣会社は「商品」であるあなたを売り込んでくれる ハローワークでも親身に話を聞いてくれて手厚くサポートしてくれますが、エージェントには決定的に違うところがあります。 エージェントはノルマがあります。 求職者は転職エージェントにとって私達は大切な商品です。仕事が見つかるまで丁寧に力強くサポートしてくれます。 エージェントは自分のノルマ（売上目標）を達成するために必死でサポートします！ エージェントがエージェント本人のために頑張っているだけなのですが、自分のために頑張ってくれていると思え、モチベーションを維持できます。 経験の少ないシンママでも「できそうな仕事」を探すのがうまい 私は二度目の転職で派遣会社を利用しました。ネットショップに転職しました。バナーやLPを作るお仕事でした。 流石に私も経験が少ないのでいきなりITエンジニアなどに就職できないのも分かってましたが、Web制作ができる会社を希望していました。 エージェントはハローワークと違い、取り扱っている企業の職種や求める人材を熟知しています。もちろん、ノルマをこなすためですが。 こちらの希望にできるだけ沿いつつ、経験が少なくてもできそうな希望する仕事を探してくれます。 人材に投資している企業は「退職」させないために給料だけでなく福利厚生も充実 派遣・転職エージェントを使って求人している企業は質が高いです。 一人就職が決まれば成功報酬が100万円とかもザラ。 転職エージェントは、人材のために莫大な費用を払う企業 しか取り扱いません。 そして人材に投資する会社にとって、入社した人に一番やってほしくないことは「退職」です。 なので、給料やボーナスをしっかり払うのはもちろん、福利厚生もしっかりしています。 面接対策など、求職支援のサポートも手厚い 私が利用した派遣会社では面接練習などのサポートもありました。 ビデオに録画し、言葉遣いなどのアドバイスを事細かにレクチャーしてくれます。 その他、履歴書の書き方やスキルアップのためのセミナーなど求人に役立つ無料サポートが充実していました。 常識・マナー・転職に有利な情報を余すことなく教えてくれます。 在職中のサポートも手厚かったです。 結局、派遣先のマネージャーと反りが合わず派遣切りされました。結局心を病んだのですが、最後まで責任を持ってサポートしてくれました。 まとめ・お金や子育てのストレスから開放され、安心して働けるのが一番 私は子育てをしながら転職を繰り返してきました。 収入が足りない、職場が合わない、病気の息子を面倒見れなã

1„ 全ての転職にはそれぞれの理由がありました。 まともに稼げるようになるまで時間がかかりました。 こんな私から一つだけ言えます。 心からIT業界に転身して良かったです。 IT業界に転身するまでは、子育てと仕事の両立は苦しくてしょうがなかったです。 高卒でシングルマザー、底辺だった私が仕事を選べる立場になりました。 そして子育てはやがて終わります。キャリアを積みつつ子育てを終えた私は、現在海外で起業し、悠々自適に暮らせるまでになりました。 今後、転職したいと考えているシンママのみなさん、私のしくじりをぜひ参考にしてください。そして、みなさんの道のりが短くなることを祈ります。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry459","title":"Vite+EJSで実現するモダンなHTML量産環境の構築（pnpm対応・静的ルーティング）","date":"2021-05-05","modifiedDate":"2026-06-12","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry459.webp","description":"2026年現在のモダンなHTML量産には「Vite + EJS」が最適！レガシーなGulp環境を脱却し、pnpmを使った最速の構築手順を解説します。Pugとの比較から、インクルードの基本、JSONデータと連携して「/about/」などの静的ルーティング（フォルダ構造）を自動生成する実務向けのテクニックまでコピペで動くコード付きで紹介。","tags":["Gulp","npm","JavaScript"],"body":"この記事は2026年の仕様に這わせて大幅リライトしました。 10〜30ページ規模のWebサイトをCMSなしで量産するとき、ヘッダーやフッターを全ページに手動でコピペするのは非効率ですし、修正の手間を考えると避けたいですよね。 かつてはこうしたHTML量産の現場では「Gulp + EJS」が定番でしたが、現在は「 Vite（バイト） + EJS 」の組み合わせが圧倒的にモダンで爆速です。EJSならJavaScriptの構文がそのまま使えるため学習コストもほぼゼロ。Pugのような独特なインデントルールに悩まされることもありません。 そこで今回は、レガシーなGulp環境を脱却し、ViteでEJSをコンパイルする最新の開発環境の構築手順を解説します！ パーツ分割（include）の基本はもちろん、実務で重宝する「JSONデータと連携して、共通メニューなどをページごとに自動で切り替える方法」まで、コピペで動くコード付きでご紹介します。 このブログの対象者 CMSなしでHTMLを量産しなければならない Pugと比べてみたい 2026年現在のモダンな環境（Vite）でEJSを動かしたい EJSとは？ 公式サイト:EJS Embedded JavaScript templating Embedded JavaScript templating. （埋め込み型JavaScriptテンプレート） 一言でいうと、「HTMLの中に、直接JavaScriptの構文を混ぜ込んで書けるツール」です。 EJSの主な特徴 プレーンなJSがそのまま動く: 新しい独自の構文を覚える必要がほぼありません。 構文がシンプル: 基本は普通のHTMLなので、既存のコードの移植も一瞬です。 コンパイルが爆速: 特にViteと組み合わせることで、保存した瞬間に一瞬でHTMLが生成されます。 Pugとの比較：結局どっちがいいの？ | テンプレート | メリット | デメリット | | ------------ | ------------------------------------------------------------ | ------------------------------------------------------------------------------- | | Pug | 閉じタグが不要でコードを圧倒的に短く書ける | 独特な構文ルールがあり、インデントを1マス間違えただけでBuild エラーの地獄を見る | | EJS | 普通のHTMLと同じ感覚で、JSライクにイãƒ

1³ãƒ‡ãƒ³ãƒˆã‚’気にせず書ける | 閉じタグが必要な分、Pugに比べると全体のコード量は長くなる | 2026年現在の私の結論：今から導入するなら圧倒的に「EJS」 以前は「コードが短く済むからPug」という声もありましたが、Vite環境が主流の今は、圧倒的にEJSがおすすめ。 Viteのプラグインを使えば、拡張子を .html にしたまま中身だけEJSとして書けるため、エディタの爆速入力補完（Emmet）が100%効きます。この快適さを知ると、もうPugのインデントエラーに怯える生活には戻れません。 まずは基本の「き」から。Vite を使って導入する Vite（バイト）を使ったEJSの開発環境をつくっていきましょう。Gulp時代に比べて設定は一瞬で終わります。 💡 なぜGulpではなくVite（バイト）なのか？ Gulp：設定が面倒で、ページが増えると画面更新（リロード）が重い。 Vite：設定は数行だけ。画面更新は常に一瞬（爆速）。 2026年現在、Gulpをわざわざ選ぶ理由はもうありません。最初からすべて揃っているVite一択です。 開発者の尤雨渓（Evan You）氏はフランス語のニュアンスを汲んで「 ヴィート（Veet） 」に近い発音を想定して名付けていて、私も昔はヴィートって読んでました。ただ、日本ではすっかり「バイト」で定着してしまいましたね。 ターミナルで以下のコマンドを順に実行します。 💡 なぜ今、npmではなく「pnpm」を使うのか？ 2026年現在のモダン開発において、pnpm を選ぶのには明確な理由があります。 容量を圧倒的に節約（高速化） PC内の1箇所にパッケージの実体を保存し、各プロジェクトへはハードリンクを貼る仕組みのため、何十個プロジェクトを作ってもストレージをほぼ消費しません。 「幽霊依存」を排除する高いセキュリティ package.json に未記載の間接依存（幽霊依存）を構造的に排除します。これにより、意図しないマルウェア汚染などのサプライチェーン攻撃リスクを最小限に抑え込めます。 以下コマンドでまとめて、 vite vite-plugin-ejs をインストールします。 package.json ファイルを修正しておきます。scripts が生成されるので、以下の通り修正しておきます。 以下ディレクトリ構造を参考にしながらファイルやフォルダーを作成してください。 vite.config.jsのコードを編集します。 EJSで文字列などをHTMLに出力する方法は以下。 ejsフォルダーにindex.ejs（ejsの拡張子は.ejsです）を作成し、テキトーなhtmlコードを追加します 。 以下コマンドで開発モード。 以下コマンドで同じ WiFi 内にある device(スマホ、タブレット) でも表示を確認できます。 以下コマンドで コンパイル、Build 。 dist フォルダー内にindex.htmlが生成されます。 Build した後のHTMLを確認したいときはプレビュー用の Scriptを追加します。 以下コマンドを叩くだけ。 headerとfooterなどのファイルを分け、テンプレート化する それではテンプレート化してみましょう！ src/inc/ディレクトリーに、header.ejsと_footer.ejsを作ります。 index.htmlの中身を書き換えます。 _header.jsでif文を使って、トップページの時はサイト名をh1タグ、それ以外はトップに戻れるように調整します。 _footer.ejsにもコンテンツを追加します。 いよいよページ量産。テンプレートから量産する EJSのいいところは、ファイル構造を保ったままコンパイルし、 共通パーツを使い回しながら効率よくページを量産でã

1ã‚‹ç‚¹ です。 Vite環境では、設定ファイルでJSONを import するだけで、EJSの中にデータを流し込めます。 vite.config.js とテンプレートを利用して出力する ページのコードを差し替えます。 その他のページも同様に差し替えます。 例）: | テンプレート | title | description | pageId | | ---------------------------- | ------------------ | ---------------------- | ------- | | アバウト（about.html） | アバウトページ | 私たちの紹介ページ | about | | お問い合わセ（contact.html） | お問い合わせページ | お問い合わせページです | contact | せっかくなので header セクションのリンクをホームとその他のページで リンクとh1に切り替えるコードに変更。 このままだと contact と about ページが build されないので vite.config.js を編集して追加します。 量産を JSON ファイルと連携する JSON を別途用意しておけば、タイトルやディスクリプションなどのメタ情報を一箇所にまとめて管理できます。 SEO的には、 https://example.com/about.html などよりも https://example.com/about/ などのほうが推奨されるので、フォルダ構造も切り替えます。 site.json の情報を取り込めるように vite.config.js を書き換えます。 これで ViteEjsPlugin() の引数に siteData でJSONデータを渡したので各データを取得できるようになりました！ | どの情報？ | キー | 具体例 | | ------------ | ---------- | -------------------------------------------------- | | サイト情報 | siteInfo | siteInfo.name 取得情報：Vite×EJSテストサイト | | ページ情報 | pages | page[\'about\'].title 取得情報：私たちについて | ちゃんとデータが取得できるか確認してみましょう。 index.html の空きスペースに以下 console.log コードを仕込んでみてください。 それぞれのテンプレートを書き換えます。 let pageId = \'home\'; の部分だけ各ページに合わせておきます。 せっかくなので、footer にサイト名を出力できるようにします。 さらに header に siteInfo からサイト名、 pages でメニューを自動出力するロジックも追加します。 ループに関する補足です。 | ループ対象 | メソッド | 説明 | | ------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | 配列[1, 2, 3] | Array.forEach() | 配列の要素を1つずつ順番に処理するメソッド。データが [ {title: \'A\'}, {title: \'B\'} ] のような配列構造のときにも使用できます。オブジェクト（連想配列）に対して直接使うとエラーになります。 | | オブジェクト{a:1, b:2} | Object.keys(pages).forEach() | オブジェクトの「キー（項目名）」を配列として抜き出してループ処理する技法。今回のように、JSONが { \\"home\\": {...}, \\"about\\": {...} } という連想配列構造の場合、一度 Object.keys() で [\'home\', \'about\'] という配列に変換してから forEach を回します。 | Build してみましょう！ 以下のとおり出力されるはずです。 EJS使い方 EJS は JavaScriptと使い方は一緒なので、特殊な書き方などだけ抜粋しておきます。 | コード | 説明 | | ------------------------------------------------ | ---------------------------------------------------- | | | この中にjsを書ける | | | 出力。エスケープする | | | 出力。エスケープしない | | | 変数。文字などを代入 | | | htmlに出力されない。ここの中で変数宣言とかしても無効 | | | ファイルのインクルード | | | ファイルのインクルード引数を渡すバージョン | VS Code（エディター）の設定 EJS を快適に使うためにエディター設定を変えて、さらに快適にコードを書きましょう！ ここでは VS Codeの設定方法を紹介します。 エディターのプロジェクトごとの設定 .vscode/settings.jsonをプロジェクトフォルダに作り、.ejs ファイルでもEmmetを使えるように設定しておきます。 editor.formatOnSave と editor.formatOnPaste を切っておくと、不快なインデントが崩れた整列を防げます。 拡張機能.ejsを入れてシンタックスハイライターを使う 慣れないと何で詰まってるかわからなくなります。 .ejs という拡張機能をVS Codeに入れておきましょう。 設定が反映しない場合は？ ショートカット（コマンドパレットを開く） Cmd+Shift+p で Developer: Load Window を選択すると、VS Code自体がリフレッシュされ、設定が反映されているはずです。 まとめ・EJSはJSライクに書け、量産に向いている！ 今回は10 ~ 20ページ程度で量産する方法をまとめました。 パンくずリストやコンバージョンエリアなどのインクルードファイルをさらに細かく分けたら、さらに保守性の高いサイトが作れそうですね！ 今の時代でも、セキュリティ上どうしてもHTMLの静的ファイルで作らないといけないこともあります。 ページ数が多いと大変だけど、導入の敷居が、、、なんてこともありますが、EJSならさほど学習コストもかからない気がします！ この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。 EJSの関数に関しても記事を書きました 関数についてはこちらを参考にしてください。記事は Vite 用にリライトしていきますが、関数の部分は参考になるかと！","noindex":false},{"slug":"about","title":"海外ノマドエンジニアかみーゆって誰？","date":"2021-05-05","modifiedDate":"2026-08-01","category":"page","categoryName":"固定ページ","ogImage":"/thumbnail/about/about.webp","description":"資金ゼロでセブ島に会社を作った海外ノマドエンジニア・かみーゆのProfile。波乱万丈なエクストリーム経歴、ADHDやメンタルに向き合う脳科学ライフハック、そしてフィリピンで最後に叶えたい大きな夢について語っています。","tags":[],"body":"銀ねこアトリエへようこそ！ セブ島在住の海外ノマドで、フロントエンドエンジニアをしている かみーゆ です。 10年以上このブログを運営しています。 以前はWeb技術やセブ島での起業談が中心でしたが、最近は自分自身の生きづらさやメンタルと向き合う中で行きついた 脳と心を調えるライフハック や 内観（マインドジャーニー） 、マインドフルな実践と経験を発信しています。 後ほど語るエクストリーム経歴にある通り、私の人生は波乱万丈で いい意味でイカれてます 。 そんな私のモットーは 人生は壮大な実験場 実験に失敗は付き物。 エンジニア特有のトライ＆エラー精神で自分を整えつつも、南国の風に吹かれながらセブ島でゆるりと生活しています。 ——私の発信が、もがいて生きているあなたの心を少しでも軽くするヒントになれば幸いです。 4人兄弟の3番目 身長/157cm 体重/知らん （体重は年に一回測るかどうか） ソウルナンバー：33 尊敬する人：ラオウ 座右の銘：生きたいように生きて死にたいように死ぬ 特技：細かい作業（米に字を描くとか）・イラスト・運動神経はいい方 好き：動物（特にネコ）・酒・眠る・歴史的建造物・肉・人・暖かいところ・麺類・RPGゲーム・北斗の拳・AKIRA・辛い物・タオラー ニガテ：甘い物・搾取する人・マウント・通勤時間・長い会議・ビジネスメール・噂好き・虫 人生最後に迎えたいこと：「かみーゆさんと一緒にいて楽しかったなー」と周りに言われて死ぬ エクストリームかみーゆ経歴 私の人生をかるーく（実際はかなり濃いめに）ご紹介します。 1977å¹´ 広島で爆誕 5æ­³ お寺の坊主の説法に全力でディベートを挑んでキレられる 13æ­³ 父親に「私は生きたいように生きて、死にたいように死ぬ！」と宣言してこっぴどく怒られる。 17æ­³ 家に全然帰ってこないからと、親に本気で警察に通報される（ただ彼氏に夢中になっていただけ）。 20æ­³ イラストレーターになりたくて大学を中退。フリーターとしてバイトに明け暮れる日々。 22æ­³ デキ婚により、一度すべての夢とキャリアを諦める。 24歳（2001〜2002年） 「諦めたイラストレーターの代わりに…」と、ネイルの勉強を始める。 26歳（2003年） Nail Expo 2003 トータルルックコンテストで4位入賞を果たす。 29æ­³ 仕事やめる。漫画家への夢が諦めきれず、仕事を辞めて編集者に原稿を初投稿。2回の佳作を受賞したものの、失業保険が切れて慌てて現実に戻り再就職 34歳（2011年） 子どもの病気をきっかけに、これまで築き上げた美容のキャリアをすべて手放す。失意の中、職業訓練校の門を叩き、未経験からWebコーダーの道を歩み始める 34歳（2011年） 同年、スマートフォンアプリ開発コンテストにて、数に物を言わせた圧倒的な「数の暴力」でアプリを大量入賞させる。賞金10万円を手にしたが、連日の寝不足がたたり自損事故を起こし、車の修理費で9万円が消える 36歳（2014） 備忘録として個人ブログ銀ねこアトリエ開設。しばらく記事を書いてたら「銀ねこ」さんと呼ばれるようになった。 41歳（2018年） ひょんなことからヘッドハンティングされ、ノコノコとã

1‚»ãƒ–島の日系企業にフロントエンドエンジニアとして転職。 42æ­³ 新型コロナウイルスの世界的パンデミック（ロックダウン）の混乱の中で退職。飛行機もまともに飛ばないカオスな状況下、なけなしの貯金を切り崩しながら、持ち前のしぶとさでセブ島に居座りプラプラ過ごす。 43æ­³ 「この島で生きていく」と腹をくくり、セブ島での起業を決意。フィリピン特有の複雑怪奇な手続きに四苦八苦する。 44æ­³ 貯金ほぼゼロ、コネも資本もない状態から、セブ島にWeb開発企業 Lenz Technologies Inc. を設立。 48æ­³ 2度目の VISA 更新でストレスで、精神も体も絶不調。生活習慣を見直す。 49æ­³ ジャーナリング×散歩×読書でマインドフルな生活を常駐化。 なぜ、私はマインドフルに生きるのか？ 精神と体調の絶不調がきっかけになり、私は2025年の9月から散歩を始めました。流石に更年期だし、ホルモンも乱れて頻繁に無気力になっているのであろうと思ってました。 食事を変えたり、Netflixを解約して読書に置き換えたり、色んな調整を試みました。 読書などを通じ、脳科学、禅、マインドフルネス、心理学などありとあらゆることを学び、実践してみました。 私の脳内は、放っておくと24時間爆速DJの音楽が鳴り響いているような状態です。セブだろうがどこだろうが変わらず生きづらい。 生きづらいのが当たり前 で生きてきた人間なので今まで気づきませんでした。 で、ひとつの答えにたどり着いたのは「 ひょっとしたら私はADHDではないか 」という疑いです。 現在、10人に1人くらいはADHDの特性を持っていると言われています。程度の大きさはあれど、ADHDだからといって別に騒ぐことはないと思ってます。それに、これまで何度も私を助けてくれたこの爆発的な過集中は「 ギフト 」です。開き直って、どうやったら生きやすくなるか攻略するのも楽しいかもしれません。 海外ノマドエンジニアの脳と心を科学的にハックする日常 現在は脳内伝達物質のコントロールに重きを置き、ご機嫌なパフォーマンスを維持するためのルーティンを実践しています。 1. セロトニン散歩（ほぼ毎日40分） 更年期を迎え撃つため、毎朝40分ほどの散歩で日光を浴び、脳内のセロトニン分泌をコントロール。1日中穏やかでご機嫌なメンタルをキープする基礎を作っています。 2. 思考をノートにぶちまけるジャーナリング 散歩の後はお気に入りのカフェへ。ADHD特有の脳内おしゃべりを止めるため、ノートに向かって頭の中にある思考をバーッとすべて書き出します。脳のメモリ解放作業（ブレインダンプ）です。 3. 無益なスクロールを読書へリプレイス 脳に刺激（ジャンクなドーパミン）を与えすぎる無益なSNSスクロールと動画視聴をきっぱり卒業。カフェでは代わりに本を開く生活へ。私を救ってくれたお気に入りの本たちは別ページにまとめています。 4. 脳の省エネ（洋服・献立のパターン化） 「今日何着よう？」「何食べよう？」という毎日の地味な選択肢は、脳の貴重なメモリ（ウィルパワー）をゴリゴリ削っていきます。私服をパターン化し、食事のベースを固定することで選択疲労を徹底排除。大事な思考力を温存しています。 5. 30分以内の自重筋トレ（カリステニクス） SNSで溶かしていた時間を置き換えるために、自重運動で体幹を鍛えています。かつてカポエイラ10年。体や遺伝子が習うまでもなく鍛え方を知っているので、ジムやヨガには行きません。ギュッと凝縮した30分以内で自分の必要量のみ追い込みます。 6. あえて罪悪感ゼロで泥のように休む「公式無気力デー」 何年も苦しんできた、過集中のあと怒涛のように押し寄せてくる無気力。今はもう開き直って、「無気力だから何もしない日」と公式に指定し、ベッドで完全に泥化する日をあらかじめ許容しています。 7. 一日の終わりのサードプレイス（バーで過ごす） 冷たいビールやハイボールを片手に、気の知れた仲間とワイワイしたり、一人でチルしたり。ストレスのはけ口ではなく、楽しむためのお酒です。 私がセブ島で最後に叶えたい夢。フィリピンの若者に「希望」を。 セブ島で会社を設立して5年が経とうとしています。資金ゼロからギリギリの綱渡りでここまで生き抜いてきた私が、この国で、この人生の最後にどうしても実現したい夢があります。 それは、フィリピンに「職業訓練校」を作ることでã

1™ã€‚ これは決して高尚なチャリティでも、商業的なビジネススクールでもありません。 フィリピンという国は、生まれた家庭の経済状況によって、子どもたちの未来の選択肢が残酷なまでに制限されてしまう社会です。貧困から這い上がるルートが物理的に、そして構造的に閉ざされています。 高校を中退せざるを得なかった子、学校にすら通えなかった中卒の子たち。彼らには、怠けているわけでもないのに、人生を変えるための「わずかな機会（チャンス）」すら与えられていないのです。 私自身、34歳でキャリアを捨て、国の「職業訓練校」へ行きました。 人の3倍カリキュラムをこなし、人生を自力で切り開き、セブ島で起業するまでに至りました。 日本という恵まれた環境の 職業訓練 に救われた私だからこそ、できること。 かつて自分が救われたように、今度はこの島の子どもたちに、人生を切り開くためのスキルをあげたい。 生まれた家で人生が決定してしまうこの場所で、確固たる希望と、人生の選択肢を作ることが私の夢です。 昨年は短期ではありますが、私がボードメンバーをしている DAREDEMO HERO で職業訓練をすることができました。 これにとどまらず、継続的にこのような活動を行っていきます。 それが、海外ノマドエンジニア「かみーゆ」が、セブ島という大好きな場所へ贈る、最後の恩返しであり約束です。","noindex":false},{"slug":"entry458","title":"【2021年】WordPressに追加しておきたい機能（プラグイン）やテーマまとめ","date":"2021-05-03","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2021/entry458.webp","description":"WordPress使ってみたいけどテーマや機能（プラグイン）どうすればいいの?!....そんなお悩みありませんか？デザイン面や機能がバランスよく揃っていると、ブログってとても始めやすいです。この記事では、WordPressに追加しておくとすぐにでも快適にウェブサイトを運用できるテーマや機能（プラグイン）を紹介します。難しいことはしませんのでご安心を。最新のWordPress（2021å¹´5月時点）で検証済みです。","tags":["WordPress","SEOライティング"],"body":"WordPress使ってみたいけどテーマや機能（プラグイン）どうすればいいの?! そんなお悩みありませんか？ デザイン面や機能がバランスよく揃っていると、ブログってとても始めやすいです。 この記事ではWordPressに追加しておくとすぐにでも快適にウェブサイトを運用できるテーマや機能（プラグイン）を紹介します。難しいことはしませんのでご安心を。最新のWordPress（2021å¹´5月時点）で検証済みです。 WordPressを少しカスタマイズしたい人に捧げる この記事は、こんな人にオススメの記事です。 初心者かつWordPressでブログ始めたい 収益化も視野に入れ友達と小さなオウンドメディア（情報発信）を始めたい ウェブ担で社内のWordPressに何かしら機能を追加したい（もしくはしなければならない） HTMLやCSSなどの知識はなくてオッケーです！ | 概要 | 詳細 | | ---------- | -------------------------------------------------------------------------------------------------------- | | 前提条件 | テーマやプラグインのインストールはなんとかできそうレンタルサーバーを借りてインストールまでできてある | | 環境 | WordPress version5.7.1 PHP7.4.1 | ※ プラグインは2021å¹´5月時点で動作確認済みです。 WordPressサーバー取得からインストールがまだの方 サーバー設定・ドメイン取得、WordPressインストールまではこちらに紹介しています。参考にしてください。 テーマやプラグイン選びのコツ プラグインやテーマって何を追加していいかわかりませんよね？ だから、何でもかんでもインストールしてしまいがちです。 あれこれインストールしてしまい痛い目にあった人を何人か知っています。 実はできるだけ痛い目に合わないコツがあります。 WordPressのテーマやプラグインを選ぶコツは作者も重要ですがDL数と更新頻度をしっかりチェックすること。 更新日が1年以上前のものなどは、インストールしても動かないことがありますのでご注意ください。 さらにWordPressのプラグイン追加の注意点 プラグインのインストールは、必要最小限（10までを推奨します）にとどめてください。パフォーマンス低下や不具合の原因になります。プラグインを無駄にインストールしないコツは上手にテーマを選ぶこと。テーマによってはプラグインを入れなくても機能が充実し、さほどプラグインのインストールが必要ないものもあります。ただ、テーマ変更時に同様の機能が使えなくなることもあるのでご注意ください。 お金をかけたくない方＆とにかくブログを始めたい初心者さんへオススメのテーマはCocoon Cocoon お金をできるだけかけたくない方にはテーマCocoon一択でオススメしています（私は回し者ではない）。 Cocoonは無料なのに機能も充実。スキンといって変更すると見た目もある程度変えられます。 SNS連携 目次追加 Analyticsやサーチコンソール連携 Amazonなどのアフィリと連携 吹き出し機能 高速化 ランキング作成 そして、初心者の方ってWordPressの管理画面触っているだけでなぜかパニックになることもあります。 でã

1™ãŒã€ そんな人に Cocoonは優しい です。 サイトの設置をCocoon設定というメニューの中をいじるだけで完結することができ、機能を探し回る必要がありません。 さらにフォーラムで質問することも可能です。 フォーラム|Cocoon 将来、Cocoonからテーマを変える可能性のある方へ テーマを乗り換えると、せっかく設定したタイトルやメタディスクリプションが消えてしまう可能性があります。デフォルトのSEO変更を使わず、SEO Packなどのプラグインで対応することをオススメします。 無料なのにモバイルを高速表示させることができるAMPが使える！ 最近、何か検索する時に使うのはみんなスマホですよね。 せっかく検索したのにページがなかなか表示されないと、ユーザーはイライラ。 やっぱやーめたって記事を読むのをやめてしまいます。 Cocoonは無料テーマにもかかわらず、AMP対応しています。 AMPは表示を早くするため、Google・Twitterなどが共同開発したフレームワーク（仕組ã

1¿ï¼‰ã§ã™ã€‚ AMPを使うとモバイルページでの表示が早くなります。 Google曰く、AMPページは読み込み時間を15％～85％減少させることができるとのこと。 無料なのに、高機能。AMPが試したい方は、Cocoon設定からAMP機能をOnにしましょう。 どんなサイトでも AMP 対応する必要ある？ 私は AMP 推しですが、コンテンツ次第で対応する必要ないと考えてます。すべての人がモバイルで閲覧するとは限らないからです。ちなみに、私の各記事のほとんどがテック記事（Web制作に関するチップス）なので2/3以上がPCで閲覧しています。 なので現在PCで閲覧することを優先したサイトにリニューアルし、AMP 対応もやめました。 お金をかけてもいい！ハイセンス、高機能なテーマが使いたい もっと機能やデザインにこだわりたい人は少しお金をかけて有料テーマをオススメしています。 有料テーマを使う大きなメリットがあります。 機能面やデザインはもちろん、メンテナンスが定期的に行き届いていたり、手厚いサポートを受けられることが多いからです。 そこで、私が仕事で関わったり実際に使ったもので、いいなーとか安定感があったテーマをご紹介します。 ※ ステマではありません。もし、そのほかいいテーマを見つけたら追加する予定です^ ^ 海外の無料でかっこいいだけのテーマはオススメしません（ほんとヤバかった。。） 昔サーバー移行の依頼がありました。クライアントは素人。調べまくって海外の無料テーマをうまく駆使してキレイにウェブサイトを作成していました。ところがフタを開けてみるとスパムの温床。結局テーマを変え、クライアントさんは手作業で記事を移行することになりました。 タダだと、見た目はキレイでもセキュリティーホールは穴だらけということもあります。ちゃんと後悔しないウェブサイト運用をしたい人は有料テーマの方が安心です。 豊富なテンプレート。ビジュアルの安定感はTCD TCDテーマをコーポレートサイトとして採用している会社多いです。 実は昔いた会社のコーポレートサイトもTCDでした。そのほか、IT系の会社でも結構好んで使っているところ多い気がします。 鉄板のコンテンツ構成がカンタンに作れますし、管理画面からちょっと色やフォント（文字の種類）を変えただけでオリジナリティが出ます。 | テーマ名 | TDC各テーマ | | -------- | ------------- | | 価格 | Â¥30,000円前後 | TCDWordPress Theme シンプル。だけど記事が装飾でき、ワクワクしながらブログを書けるSWELL 知り合いが気に入って使っているテーマです。ブログといえば記事が主役。 記事の文字やリストをカッコよく装飾し、読みやすくしたいですよね？ 柔軟性はピカイチな気がします。QAなど、特殊な装飾もできます。 | テーマ名 | WordPressテーマ SWELL | | ------------ | ------------------------------------------------------ | | 価格 | Â¥17,600-（税込） | | ライセンス | 一度購入するとライセンス制限なしで複数サイトで利用可能 | SWELLダウンロード ブログ×マーケに特化したテーマSeals ver.1.5 プロのデジタルマーケッターがプロデュースしたSeals ver.1.5。 最近試してみましたが、とにかく表示が早く感動しました。 SWELL同様、記事を装飾でき、ランディングページ用テンプレートもあります。 ブログで集客したい人、サイトを使ってメシ食っていきたい人にオススメです。 | テーマ名 | WordPressテーマ Seals ver.1.5 | | -------- | ----------------------------- | | 価格 | Â¥21,600-（税込） | Seals ver.1.5 合わせて使いたい無料で使えるプラグイン7つ テーマが決まったら、サイトに応じてプラグインを追加しましょう！ WordPressの管理画面、プラグインの新規追加から検索し、インストールできます。 イãƒ

1³ã‚¹ãƒˆãƒ¼ãƒ«ã™ã‚‹å‰ã«ã€æ›´æ–°æ—¥ã¨ãƒ€ã‚¦ãƒ³ãƒ­ãƒ¼ãƒ‰æ•°ã®ãƒã‚§ãƒƒã‚¯ã‚’忘れないようにしましょう。 ※ 今回表示速度で優秀なテーマが多いのでスピード対策系のプラグインは端折ってます。 1.SiteGuard WP Plugin・セキュリティ対策 SiteGuard WP Plugin WordPressは世界一シェアされているCMSであると同時に、世界一クラッカー（悪い人）に狙われやすいCMSです。 管理画面に侵入さえすれば、クラッカーはコードを書き換えることができます。 私は実際にコードの改ざんやマルウェアがあるサイトに遭遇したことがありますが、まあ。。。悲惨です。 カンタンにセキュリティ対策できるラグイン・SiteGuard WP Pluginは、主に以下の攻撃を予防できます。 不正ログイン 管理ページ（/wp-admin/）への不正アクセス コメントスパム 2.contact form 7 or MW WP Form オススメ二大お問い合わせフォーム お問い合わせフォームの鉄板はcontact form 7かMW WP Formです。 contact form 7 MW WP Form 私は個人的にContact Form 7の方が好きですが、コードとかまったくわからない人にはMW WP Formをオススメしています。 理由は以下の通り。 設定がとてもカンタン 必須などの設定も楽チン サンクス、確認画面の設置がカンタン ただ、スパム対策hCantcha（次のオススメプラグインとして紹介してます）を設置したい場合はcontact form 7じゃないと併用できないのでご注意を。 ※ 2021å¹´4月時点。MW WP FomもいつかhCantchaへの対応をするかもしれません。 3.hCaptcha for WordPress・reCAPTCHAの代わりに使えるスパム対策 hCaptcha for WordPress reCAPTCHAが有料化しましたね（課金されã

1ªãã¦ã‚‚支払い登録が必要）。 実はhCaptchaというものがあり無料でスパム対策ができます。 実装の仕方はカンタンですが、実装方法は割愛します。興味ある方はこちらを参考に。 reCAPTCHAが有料化!?WordPressのreCaptchaをhCaptchaに移行する方法 4.All in One Migrationでサーバー引っ越し All in One Migration サーバーを引っ越したい時に手軽に使えるプラグインです。バックアップなんかでも使えます。 データのバックアップ テキスト・コンテンツの置換（http://aaa.com >> https://bb.com） 5.Search Regex コンテンツ内の文字列を複数ページにまたがってまとめて修正可能 Search Regex 文言などをまとめて変更・削除する時にオススメです。正規表現にも対応しています。 テーマに依存した機能を使っていると、新たなテーマにした時、ショートコードなどがむき出しになることがあります（実際ありました）。 記事が多い場合は手作業で修正するなんて地獄。Search Regexでまとめて削除ないしは置換して対応しましょう。 6.Custom Post Type UI ブログ記事や固定ページ以外を追加 Custom Post Type UI 管理画面上でカンタンにカスタム投稿タイプを追加できます。 WordPressは便利！コーポレートサイトにも利用したいですよね？ 実績やニュース、ブログ記事以外のジャンルの投稿を増やしたい時に役立ちます。 7.Easy Table of Contents 記事に目次をつける Easy Table of Contents このプラグインを使うと、記事に目次を追加できます。 最近Heat Map（サイト上でユーザーがどんな動きをしているか計測できるツール）を設置して気づいたのが目次ってめっちゃ大事。 私の記事ではこんな感じで、目次のところはたくさんクリックされています。 まとめ・WordPressサイトはプラグインとテーマを上手に選ぶとすぐに快適にブログを始められます！ 今回たまたまブログを始めたい子から相談を受けたのをきっかけにこの記事を書きました。 できるだけ小難しいことをせずWordPressを始めるにはどうすればいいか。必要なテーマやプラグインをまとめてみました。 まとめているうちに、最低限ブログ発信やマーケティング用コンテンツ作っていくだけなら、コードを書く必要ないし十分事足りるとも感じました。 もちろん、お持ちのサービスによっては既存の機能やテーマだけでは事足りないこともあります。 WordPressは、普段使っているスプレッドシートなどのツールと連携することもできます。皆さんが使いやすいよう柔軟にカスタマイズしていくこともできます。 もし、今のプラグインなどで機能が事足りないようであればWeb制作のプロなどに相談するのもアリですよ。 この記事がみなさんのブログライフの一助となれば幸いです！ 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry457","title":"Google検索 SEOで悪質対策事例などのLTしました@でんかじゅく","date":"2021-04-17","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2021/entry457.webp","description":"2021/04/16、「でんかじゅく」という広島IT勉強会で悪質SEO対策などの事例を紹介するためにでオンライン登壇しました。この記事では当時の様子を紹介します。また、その時紹介した実際の悪質SEOの対策や特徴とスライドを掲載しています。現在疑わしい業者とお付き合いある方にも参考になると思います。","tags":["Google検索エンジン","Web解析"],"body":"4/16、「でんかじゅく」という広島IT勉強会で悪質SEO対策などの事例を紹介するためにオンラインで登壇しました。 この記事では当時の様子を紹介します。また、その時紹介した実際の悪質SEOの特徴とスライドを掲載しています。現在疑わしい業者とお付き合いある方にも参考になると思います。 地元の愛に包まれたひとときでした！でんか、感謝。 広島のこぢんまりとしたIT勉強会・でんかじゅくとは？ でんかじゅくとは、でんか主催の広島にあるこぢんまりとした、LT中心のIT勉強会です。connpassより抜粋。 自分の考えや意見を伝え、誰かの考えや意見を聞いて、新しい何かを発見する会です！ 加者全員が・・＼楽しくコミュニケーション／を取れる環境を目指しています！ でんかじゅく 挨拶はヤッホー。困ったり、窮地に立たされた時はぴえん。最初は若者文化？についていけませんでしたが、ぴえんが少しずつジワるようになりました。 2021/04/17（土）「ただいま！でんかじゅく！！」の登壇者の紹介 今回は、主催者であるでんかと私の二人でした。 でんか / 死亡寸前?!失敗だらけのマーケティング でんか（@sasga） ここ1年の失敗談をマーケティングと絡めたお話でした。 いまだにテレアポ推奨する会社があるんだってびっくりします。 テレアポの話で進撃の巨人の壁外調査員というたとえが刺さりました。壁の外に出たらすぐ死亡する運命。。 ちなみに、テレアポでブチぎり最短1秒切るとのことでã

1—た。切ない。。。 かみーゆ（私） / かみーゆは見た！悪質SEOトップ3 私は今ハマってることと、SEOの基礎、実際体験した悪質SEOワースト3を紹介しました。 10分LTの予定だったのですが、スライド53枚量産してしまい15分以上も話してしまいました。 ※ しろたん師匠の一言。プライバシー保護の為、顔がわからないように保護してあります。 SEO業者のマインドや態度も含め話をしたかったので、あえて「対策」を外しました。 ざっくりとした内容です。 キーワード詰め込み … キーワード詰め込みすぎてコンテンツが読み物として支離滅裂ってことがあります。本来であればユーザーに評価されるべきなのに、検索エンジンにだけ評価されようとしたウェブサイトはいただけませんね。検索エンジンのアルゴリズムはユーザーに評価される記事を上位表示されるように日々アップデートされてます。Googleのエンジニアはエリート中のエリート。我々のような一般人の浅知恵なんて通じません。 データの隠蔽 … たまにサチコの導入を断る業者がいます。悪質以外に言いようがないですね。データを見せない会社は業務怠慢かブラックハットを隠蔽したんだと思います。どちらにしてもアウト。 被リンク購入 … これも昔からあるブラックハットですね。被リンクは人様のサイトからリンクが貼られている、つまりそのサイトが紹介したいぐらい評価されているという指標になります。自作自演するための方法が「被リンク購入」です。昔、Googleのアルゴリズムが今ほど発達してなかった頃、流行ってました。被リンクだったらなんでもいいんですよ。大抵そんな場合はいかがわしいサイトからの被リンクも含んでるのでブラックハットだと気づきます。 ↓↓↓当日のスライド↓↓↓ かみーゆは見た！ブラックSEOトップ3 from Yuriko Kamimori 相互リンク・フォローや被リンク＆フォロワー購入に対して思うこと 目的は手段を正当化する（The end justifies the mean）ってことわざありますが、目的のためならモラルを欠く行動する人があまりにも多い。 人が一番邪悪。 Twitterでも最近相互フォロー、フォロバとかハッシュタグ見かけます。時代や媒体が変わっても結局人って心理が一緒ですよね。中にはTwitterのフォロワーを買う人もいるらしいです。 おそらく非アクティブで自分のファンでもないアカウントなので価値のないフォロワーです。なんだかなーって感じでした。 本気で発信して、それがきっかけで得た被リンクやフォロワーこそ価値があると思います。 当日の質問を少し紹介 久々の広島の人との交流で当日たくさん質問いただきました。 当日はたくさんご質問いただきありがとうございました！ こちらに

1覚えている限り&出せるものだけまとめます。 「銀ねこアトリエ」の由来ってなんですか？ 元旦那の飼っていたロシアンブルー・こじろーが灰色の猫だったからです。 昔は空き時間に個人でネイルサロンをやっていて、そこが銀ねこアトリエというて名前でした。実は技術系のブログは元々 銀ねこアトリエAnnex（別館） という名前でした。 余談ですが、最初はFC2ブログから始まり、すぐにドメイン取ってconcrete5でどうしてもブログサイトを構築したくてググりまくってカスタマイズしてテーマ作りました。その後なんとか記事を書き始めました。 ※ 実際のこじろー。そして私、若いわww 普段業務でJS使わないからもっと勉強したい 置いていかれるのが嫌なら強制的に自分を追い込め！ やっぱり自分でブログサイトなどを自作してコンテンツをアウトプットするのが一番だと思うんです。 このサイトは自分を追い込むために作りました。もちろん、AnalyticsやSearch ConsoleだけじゃなくHotJarなど、Heat Mapツールも入れてます。 発信するのが楽しい！1か月10記事程度を目標に掲げ更新しています（運用7年目）。 ブログ運用をすると副産物もあります。解析ツールを読み解くと経験値が上がります。 どこで離脱されているかなどユーザビリティやUIで問題も見つかります。 これこそ改修・技術を磨くチャンスです！ もちろん学んだことをブログでアウトプットするのも勉強になります。 実務でやる機会がなã

1ã¦ã‚‚、どうにか常に勉強する機会を設けるようにしています。 かみーゆさん、何やってる人なんですか？ 昨年会社を退職し、3か月ほどぷーしてました。海行ったり、大切な人たちと過ごしたり＆呑んだくれたり、セブを観光したり…。 ロックダウンでフィリピン人の雇用について問題を感じていました。去年末、今のビジネスパートナーと「フィリピンに雇用を生む！」と決意し、セブ島に残りました。 ※ フィリピンはコロナウィルスのせいで世界最長ロックダウン（往来の制限や街の封鎖）中。昨年8月、最大約50%（非公聞込調査結果）の失業率に見舞われたが、No Work No Pay（自宅待機で給料支払いなし）を実施する会社も多く実際はもっと困窮した。 今は会社設立したいのでお金を貯めるためにビジネスパートナーとそのための仕事をしています。 とはいえ、私たちのメンタルが健やかであることも前提条件。なので無理ない範囲で仕事しています。 結果、通勤時間、ムダな会議やメール文化、思考停止するような社則から解放されました。 なんとなく得た環境ではありますが学びは、仕事って自分を幸せにするツール（所詮手段）ということ。手段に支配されたら終わりです。 テキストメッセージについて リコネクトの北村社長がいいことおっしゃってましたね！ 感情を排除する。業務のやり取りではとても大切です！すぐキーーーって感情的になる私にもとても刺さりました。 たとえク●野郎！！ って心で思っていても、テキストで伝えるときは感情を排除しようと心がけることにしました。 私は質問に答える時間がなかったので、この場で私の意見を少し。 テキストメッセージだけじゃなく、コミュニケーションって事実と意見の混在するから齟齬が生まれるって最近思います。 事実だけ話せばいいのに意見や予想が入っちゃうからトラブルになる。 なので、事実と意見を分けて述べるだけでもトラブル回避できる気がします。 最後に 今回でんかじゅくに10名程度ご参加いただき、久々に広島の人と交流できとても楽しかったです！！ 「ブログ読んでます」って言われたのがとても嬉しかったです。 皆さんにたくさんのパワーをもらえ感謝。 今回、私を登壇させてくれたでんかにも感謝です！！！ また、ちょっとした勉強会などありましたらぜひお声がけいただけると幸いです。喜んで登壇します。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry456","title":"【X/Twitter】スマホでもできる「高度な検索」のやり方と便利コマンド一覧表 2026年版","date":"2021-04-15","modifiedDate":"2026-06-08","category":"seo","categoryName":"SEO対策・デジタルマーケ","ogImage":"/thumbnail/2021/entry456.webp","description":"X（旧Twitter）で公式アプリからは使えない「高度な検索」をスマホで強制的に使う裏ワザを解説！特定のアカウント、日付範囲指定（since/until）、いいね数（min_faves）での絞り込みなど、コピペで今すぐ使える便利検索コマンド一覧表付き。","tags":["X","Twitter","SNS運用","便利ツール"],"body":"リアルタイムのリアルな生情報を集めるなら、やっぱりX（旧Twitter）の検索機能がどこよりも最強です。災害時のライフライン情報から、ニッチな技術のバグ報告まã

1§ã€Google検索より圧倒的に早く手に入ることが多いからです。 そこで今回は、Xの「高度な検索機能」と、検索窓に打ち込むだけで一瞬でノイズを除去できる「検索コマンド」の使い方をどこよりもわかりやすく紹介します！ フィルターを使いこなせば、キーワードや期間（日付）、特定のユーザー、メディアの有無、さらには「いいね数」や「リプの数」の最小値まで、ピンポイントで欲しい情報だけを狙い撃ちできるようになりますよ。 💡 スマホアプリ版Xの制限を突破する「裏ワザ」や、2026年現在も100%確実に動く「便利コマンド一覧表」を用意しました。ぜひ辞書登録して役立ててください！ スマホアプリ版の罠を突破！スマホで「高度な検索」画面を出す裏ワザ 実は、iPhoneやAndroidの 「X公式アプリ」の検索窓からは、細かい条件を指定する「高度な検索」の画面を開くことができません。 スマホでどうしても画面操作（GUI）で詳細に絞り込みたい場合は、アプリではなくSafariやChromeなどの ブラウザから「Web版のX」を開く 必要があります。 スマホブラウザ版から「高度な検索」を開く手順 1. スマホのブラウザで ブラウザ版X（https://x.com） を開き、ログインする 2. 画面上の検索窓に、適当なキーワードを入れて一度検索を実行する 3. 検索結果画面の検索バーの右横にある 「⋯（詳細設定）」アイコン または 「検索フィルター」 をタップする 4. メニュー内にある 「高度な検索（Advanced Search）」 をタップする これでスマホの画面でも、アプリのような感覚で日付やエンゲージメント（いいね数など）のフォーム入力が可能になります！ 「いや、毎回ブラウザを開くのはめんどくさい！」という人は、次に紹介する 検索コマンドをスマホのキーボードに辞書登録（「しんす」で since: など）しておくのが一番爆速でおすすめ です。 検索窓に直打ちで一発絞り込み！Xの便利検索コマンドチートシート Xの通常の検索窓に、以下のコマンドを 「半角スペース」 で 区切って組み合わせるだけで、一瞬で超高度なプロの検索ができるようになります。 1. キーワードでの絞り込み | キーワード検索 | コマンド（半角スペース区切り） | 具体的な入力例 | | :--------------------------- | :----------------------------------- | :-------------------------------------- | | キーワードAND検索 | キーワードをそのまま並べる | ノマド 海外 | | キーワード完全一致 | \\"\\"（ダブルクォーテーション）で囲む | \\"liquor ban\\" | | キーワードOR検索 | OR（必ず大文字）を挟む | フリーランス OR 海外ノマド | | キーワード除外（マイナス） | -（半角マイナス）を単語の前に付与 | -社畜 -家畜 | | ハッシュタグ検索 | (#キーワード) | (#海外ノマド) | | 言語の絞り込み | lang:言語コード | lang:ja（日本語） / lang:en（英語） | 2. アカウントでの絞り込み ※以前の仕様と異なり、アカウント名（@マーク以降の英数字ID）を直打ちするのが最も確実です。 | アカウント検索 | コマンド | 具体的な入力例 | | :------------------------- | :---------------- | :------------- | | 特定の人が送信したポスト | from:ユーザーID | from:lirioy | | 特定の人宛てのリプライ | to:ユーザーID | to:lirioy | | 特定の人が含まれるもの | @ユーザーID | @lirioy | 3. 日付での期間指定 指定する日付のフォーマットは YYYY-MM-DD（年-月-日）で統一します。 | 日付検索 | コマンド | 具体的な入力例 | | :--------------------- | :----------------- | :----------------- | | 指定した日付「以降」 | since:YYYY-

1MM-DD | since:2026-01-01 | | 指定した日付「まで」 | until:YYYY-MM-DD | until:2026-06-08 | 4. エンゲージメント（バズり度）での絞り込み min_ の後に数値を指定することで、一定の反響を超えた人気のポストだけを厳選して情報収集できます。ノイズまみれのポストを排除するのに一番役立つ神コマンドです。 | エンゲージメント検索 | コマンド | 具体的な入力例 | | :----------------------- | :---------------- | :------------------------- | | リツイート数で絞り込み | minretweets:数 | 炎上 minretweets:100 | | リプライ数で絞り込み | minreplies:数 | モンハン minreplies:100 | | いいね数で絞り込み | minfaves:数 | 飯テロ minfaves:100 | ⚠️ 注意：マイナス（最大値指定）は使えなくなりました 過去のXでは -min_replies:100 と打つことで「100件以下」という最大値を指定できましたが、現在のXの検索エンジンではこのマイナス指定は機能せず、バグる原因になるため使用を避けてください。 5. メディア・フィルター機能 動画や画像がついているポストだけをザクザク集めたいときに重宝します。 (※ 以前使えていた filter:videos コマンドは廃止されました。動画・画像を狙う場合は一律で filter:media を使用してください。) | メディアの種類 | コマンド | 具体的な入力例 | | :--------------------------- | :----------------- | :----------------------------- | | リプライ（返信）のみ | filter:replies | filter:replies | | リンクが含まれるもの | filter:links | seo filter:links | | 画像や動画（メディア全般） | filter:media | ねこ filter:media | | 認証済み（公式ブルー）のみ | filter:verified | ニュース filter:verified | | リプライを「完全に除外」 | exclude:replies | こんばんは exclude:replies | | リツイートを「完全に除外」 | exclude:retweets | from:lirioy exclude:retweets | コピペ用！特定の条件URLを作ってブラウザから検索する方法 上で紹介した検索コマンドを、あらかじめURLの末尾（?q= の後ろ）にくっつけた専用のリンクをブラウザに保存しておけば、いつでも一撃でその条件の検索結果にアクセスできます。 ベースとなるXの検索URLは以下です。 たとえば、「モンハン」というキーワードで「画像や動画（media）」付きのポストを調べたい場合は、以下のようにURLの後ろにコマンドを繋げます。 ⚠️ 注意：最新順URL固定（&f=live）ハックの廃止 かつてはURLの末尾に &f=live を付与することで最新順に固定できましたが、現在はXのシステム側で強制的にパラメータが剥がされ、「話題（Top）」タブに戻される挙動にアップデートされています。特定の条件で検索した後は、 画面上の「最新」タブを手動でポチッとタップするのが現在一番確実です。 PCのブラウザ大画面なら「GUI（画面操作）」で完璧に絞り込める パソコンのブラウザ（Web版）を使っている場合、コードのようなコマンドを手入力するのが苦手な方でも、画面をマウスでポチポチ操作するだけで詳細な「高度な検索」が可能です。 検索窓に適当な言葉を入力して検索したあと、画面右上に出てくる詳細フィルターからいつでも呼び出せます。 🔗 直接アクセスするリンクはこちら：X高度な検索 公式ページ PC版の「高度な検索」画面では、以下のように日本語のフォームに沿って入力するだけで、裏側で勝手にコマンドを組み立ててくれるので超簡単です。 キーワードでの絞り込み画面 次のキーワードをすべて含む（通常のAND検索） 次のキーワード全体を含む（フレーズ完全一致） 次のキーワードのいずれかを含む（OR検索） 次のキーワードを含まない（マイナス除外） 次のハッシュタグを含む アカウントでの絞り込み画面 次のアカウントが送信（from:） 次のアカウント宛て（to:） 次のアカウントへのツイート フィルター・返信での絞り込み画面 返信（リプライを含めるか・リプライのみにするか） リンク（リンクを含むポストのみにするか） エンゲージメントでの絞り込み画面 返信の最小件数 いいねの最小件数 リツイートの最小件数 日付での絞り込み画面 次の日付以降（since:） 次の日付以前（until:） 余談：私がXの高度な検索をガチで極めたきっかけ（フィリピン現地体験記） 私がなぜここまで執念深くXの検索コマンドを覚えたかというと、滞在先のフィリピンで「死活問題となるリアルタイムの最新情報」がどうしても必要だったからです（笑）。 突然施行された「リカーバン（禁酒法）」の解除を追う日々 2020年〜2021年にかけて、コロナ対策の一環としてセブ島では突如「リカーバン（外でお酒を飲んではいけない法律）」が施行されました。これがいつ解除されるのかが、公式発表よりも何よりも知りたくて毎日狂ったようにXで検索していました。 私からお酒を取り上げたら、海外生活の楽しみが半分消え失せますからね……。 いつ明けるのかと毎日チェックしていた際、セブの現地ポリスが「リカーバンのおかげで感染者が減ったよ」と投稿しているのをXのコマンド検索で見つけました。 大

1好きなお酒が悪者にされたのは悲しかったですが、現地のリアルな状況が瞬時にわかるXの凄さを痛感した出来事です。本当に、早く外で美味しくお酒が飲める世界に戻ってほしかった……！ キャリアの海底ケーブル損傷事件でネットが完全沈没 さらにフィリピンには、市場をほぼ独占しているPLDTという巨大通信キャリア（日本でいう旧ドコモ状態）があるのですが、これがもう普段からインフラ的にめちゃくちゃ酷くて（笑）。 あるとき「海底ケーブルが損傷した」とのことで、フィリピン全体のネットが壊滅的に繋がりにくくなりました。私の家は別キャリア（Globe）だったので奇跡的にギリギリ繋がっていましたが、ビジネスパートナーはPLDTを使用していたため、完全に音信不通のブラックアウト状態に。 そのときも原因や復旧目処を調べるために、Xで「PLDT」をキーワードにして最新情報（手動で最新タブ切り替え）を追いかけまくりました。案の定、現地トレンドはPLDTへの怒りで大炎上。 ピノイ（フィリピン人）たちの凄まじい怒りのポストが並んでいました。現地のリアルなビサヤ語の叫びなども、Xの鮮度だからこそ拾えた情報です。 特定の期間のバズポストだけを掘り起こす 「2026年の年明けから現在までに、特定のキーワードで『いいねが500以上』ついた日本語のバズポスト」をノイズ（リプライ）抜きで抽出するコマンドです。 実際のXの検索窓に打ち込む用のプレーンな文字列（コピペ用）はこちらです！ 🔗 実際の検索結果をXで見てみる（実例リンク）` まとめ：賢くXの検索コマンドを使ったら情報戦を完全制覇できる！ Google検索がどんどん企業の公式サイトやSEO対策された記事で埋め尽くされていく現代において、「一般ユーザーのリアルな本音」「今まさにこの瞬間に起きているバグや災害」を調べるには、Xの検索コマンドが一番強力な武器になります。 もちろん、デマや偏った意見も多いので情報の精査（ファクトチェック）は必須ですが、海外生活のような情報過多かつソースが少ない環境では、これ以上ない救世主です。 まとめサイトの「Togetter」などのWebサービスも、突き詰めればこうしたXの検索APIやコマンドの仕組みを応用して作られています。 ぜひこの記事のコマンド一覧をブックマークするか、スマホに辞書登録して、毎日の情報収集のスピードを爆速に進化させてみてください！ この記事がみなさんの快適なSNSライフ、そして効率的なリサーチの一助となれば幸いです。 最後までお読みいただきありがとうございました！","noindex":false},{"slug":"entry455","title":"スプシのデータをJSON化してウェブサイトに取り込む（Sheets API使いません）","date":"2021-04-14","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry455.webp","description":"最近Googleスプレッドシートにクライアント側でデータを入力してもらい、ウェブサイトに表示する処理をやりました。スプシ側の設定、データの取得方法、PHPの処理方法を記載しておきます。WordPressでの対応方法も紹介しています。スプシでの設定が細かいので不要な方は目次の「スプシをウェブ公開してJSONデータを取得しよう！」から飛ばし読みしてください。","tags":["PHP","JSON","WordPress"],"body":"最近Googleスプレッドシートにクライアント側でデータを入力してもらい、ウェブサイトに表示する処理をやりました。 スプシ側の設定、データの取得方法、PHPの処理方法を記載しておきます。WordPressでの対応方法も紹介しています。 スプシの設定が細かいので不要な方は目次の「スプシをウェブ公開してJSONデータを取得しよう！」から飛ばし読みしてください。 今回この実装をしたきっかけ 複数のブランチを持つクライアントがいて、データをまとめてWordPressに登録するのがしんどい！でも各担当者にそれぞれ書かせたら、書式がバラバラになるのはイヤ。。。。 ということで、各担当者にデータをスプシ上決まった書式で入力してもらったら楽なんじゃないかと思いスプシ管理が実現しました。 ご注意！ 2021年8月頃よりGoogleの仕様 が変わり、以下の方法は使えなくなりました。 下準備・スプシ側の設定だけ参考にして別記事に紹介しています。 下準備・スプシ側の設定 まず新規でスプレッドシートを作成します。 今回は各ブランチのイベントなどの日程を一箇所に

1表示するような機能を作ってみます。 まずは各ブランチ用のシートを作ります。 B列に日付 日付は入力規則で制限をかけます。 セルを選んだ状態で、右クリックしたらデータの入力規則という項目を選びます。 書式を狂わせないために条件を日付にし、入力拒否。 C、D列に時間を設定 C、D列には時間を入れます。この項目は別セルに共通の時間を入力しておき、データを引っ張ってくるやり方もあるんですが面倒なので直入力しました。 これで決まった時間しか入力できなくなりました。 スプシにはデータが蓄積されていきますが、当月とその先の日程のみの日程をA列に出力します。 日にちが過ぎたかつ、出力しない行はグレーアウトします。条件式書式の設定を利用します。 ここまでできたら、入力規則・書式と条件式書式をコピーしてすべてのセルにコピーします。 ブランチの数だけシートをコピーしてシート名とタイトルだけ変更します。 すべてのデータの作成 タブの一番左にすべてのデータをまとめるシートを作ります。 GASであれこれ自動化することもできそうですが、今回はデータも少ないので手入力です。 B列を参照してAブランチ、Bブランチのデータを,（カンマ）区切りで連結します。 このデータは受け取った側でバラします。 担当者に自分のシートと決まった範囲しか編集させない 他ブランチのスタッフには閲覧権限だけつけておきます。 担当ブランチの編集できないように各シートの日付、時間、備考のみに範囲の編集権限をつけます。 編集権限をつけます。 スプシをウェブ公開してJSONデータを取得しよう！ スプシに「リンクを知っている全員」に閲覧権限をつけます。 「ファイル」から「ウェブに公開」を選び、Webページとしてすべてのデータのみ公開します。 ちなみに、 「変更が加えられたときに自動的に公開する」 も選ぶとシートを更新したらデータも更新されます。 今回は事故防止のためにあえてチェックを外しました。 ではデータを取得してみましょう。 | ページのID | ページの順番 | | ---------- | ------------- | | {sheetid} | {sheetorder} | スプシのURLからID取得します。 {sheetid}にはスプシのID、1枚目のシートなので{sheetorder}には1と入れます。 URLを叩いてみましょう。 JSONデータが返ってきました！！ データにはGMailなど結構な個人情報も入っています。取扱注意ですね。。。。 実装とコードサンプル すんごいダサいですが仕上がりイメージはこんな感じです。 WordPressに対応したい場合 geteventdeta()のcurlのところを書き換えます。 wpremoteget()を使わないと怒られますので気をつけてください。 add_shortcodeでショートコードとして登録してあるので、記事などにも出力できます。 ちなみにエラーで苦しんだらこちらを参考にしてください。 まとめ・スプシをJSONで取得したら気軽にデータをウェブサイトに使える 今回スプシをJSONデータで取得し、Webサイトに埋め込む方法を紹介しました。 注意点もあります。 残念なことに読み込みも多少重いのと何度かに一度読み込みを失敗します。 あまり精密に使いたい場合はsheet APIとかに変えて、利用しないほうがいいかもです。 みなさんのコーディングライフの一助となれば幸いです。 今回も最後までお読みいただきありがとうございました。","noindex":false}

1,{"slug":"entry454","title":"【 WordPress】カスタムフィールドをプラグインなしで追加&管理画面投稿一覧に出力","date":"2021-04-11","modifiedDate":"2026-03-26","category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2021/entry454.webp","description":"WordPressでもSEO Packなどを使わずカスタムフィールドの実装だけでタイトルやメタディスクリプションを編集できるようにできます。カスタムフィールドの値が管理画面の各投稿一覧から確認できたら便利と思い実装したのでまとめました！一覧を編集したらカスタムフィールドが消えるバグの対処方法もついでにまとめてます。","tags":["WordPress"],"body":"WordPressでもSEO Packなどを使わず カスタムフィールド だけでタイトルやメタディスクリプションを編集できるようにできます。カスタムフィールドの値が管理画面の各投稿一覧から確認できたら便利と思い実装したのでまとめました！ プラグインなしです！！ 一覧を編集したらカスタムフィールドが消えるバグの対処方法もついでにまとめてます。 この記事を参考にする上での注意点 この記事のコードはWordPressのコーディング規約に沿って書いてあります。 ヨーダ記法など初学者にはなんでこの書き方？ってコードもあるかもなので、以下記事を参考にしてください。 phpcsでWordPressコーディング規約を設定しておくといいです。 カスタムフィールドからコンパクトにタイトルやメタディスクリプションを編集できるようにする カスタムフィールドは追加、アップデート、取得、削除用（CRUD）の関数が用意されています。 ※ C…Create、R…Read、U…Update、D…Delete ぶっちゃけ、addpostmetaはupdatepostmetaで代用できます。 この関数を使ってカスタムフィールドを編集します。 にタイトルやメタディスクリプションを編集できるようにカスタムフィールドを表示するエリアを追加します。 wpnoncefieldを追記しました。 Using Nonces wp verify nonce 表示するためにはadminmenuをaddactionにフックさせます。 これでpost（投稿）とpage（固定）にカスタムフィールドを追加できます。 カスタムフィールドのデータを保存する このままだと管理画面の一覧の方でタイトルなど編集したらデータが消えます。 一覧だろうが、詳細だろうが保存の際に同じように処理されるけど、一覧では保存する値が存在しないので削除処理されてしまいます。 ~~ちょっと力技ですが、管理画面が一覧か、詳細なのかを判断するのにactionパラメーターがあるかで削除処理するかの処理を入れました。~~ 上記、global変数$pagenowを追加し、ページテンプレート名を取得する方法に切り替えました。 先ほどのwpverifyfieldで生成したnonceをwpverifynonceで確認します。nonceが無効ならfalseを返します。これでエラーは発生しなくなるはずです。 管理画面の投稿一覧に表示する カラムを追加します。コメントのカラムはいらないのでunset()で削除します。 各カラムにどんな出力をするかコードを書きます。 これで管理画面の各投稿一覧にも表示されるように、どの投稿にタイトルタグやディスクリプションが設定されていないか一目瞭然です。 おまけ・JSで文字のカウント機能をつける もっとSEOを充実させるためにカスタムフィールドからコンパクトにタイトルやメタディスクリプションを編集できるようにするのseo_fields()に、カウント機能を追加します。 ちなみに以下コードはバニラJSです。面倒だった。。。 まとめ・カスタマイズするならコンパクトだけどユーザーファースト 色々応用できるので、よかったら参考にしてください。 この記事がWordPressカスタマイズライフの一助となりますように。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":true},{"slug":"entry452","title":"WordPress phpcs攻略！wp_unslashやOutputNotEscapedエラーの正しい回避コード集","date":"2021-04-05","modifiedDate":"2026-06-08","category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2021/entry452.webp","description":"WordPressのコーディング規約（phpcs）で頻出する「wp_unslashの未設定」や「OutputNotEscaped（エスケープなしの出力）」などのセキュリティエラー。VS Codeの画面で真っ赤に怒られる英語エラーの意味と、実務で100点満点をもらえる正しいサニタイズ・CRUD（登録・出力）の回避コードを徹底解説します。","tags":["WordPress","VS Code","PHP","セキュリティ"],"body":"この記事はWordPressのコーディング規約をphpcs導入して入れたものの、エラー英語だしよくわかんないって嘆いている人向けの記事です。ありがちなエラーの回避方法をまとめました。 この記事は前半と後半に分かれてます。 Macでしか検証していません VS Codeを使うことが前提です。 phpcsでWordPressコーディング規約導入したい方はWordPress phpcsでコーディング規約を守る環境を作るへ WordPressの各言語ごとのコーディング規約 WordPressにもコーディング規約があって、各言語ごとにまとめられています。気分が萎える。。。 html css JavaScript PHP ファイルの整形 WordPressにはheader.phpなどのテンプレファイルがあります。 過去に書いた404ページですが見事に真っ赤になりました。誰だ、こんなクソコード書いたやつ。。。お前だよ！！！ 赤い箇所にカーソルを当てるとエラーがわかります。ただし英語です。 Tabs must be used to indent lines; spaces are not allowed. ~ タブを使用してください。スペースは許可されていません~ Google翻訳にかければ理解できると思うのですが、9割くらいはインデントやスペースの使い方のエラーです。 インデントやスペースのエラーはWordPress phpcsでコーディング規約を守る環境を作るで環境設定した自動フォーマッターを適応するだけでほぼほぼ解決します。 フォーマッター使用後も多少コードが乱れることもあるので手直しは必要です。 それでも困ったらエラーを読み解くか、WordPressコード規約（PHP）で調べます。 もし入れてない場合は、スペースをタブ変換します。WordPressのインデントはハードタブ（4つ）です。 よく遭遇するエラーと対処法 よく遭遇するエラーをケース別にまとめます。 Missing file doc comment/ファイルに説明追加 WordPressのコーディング規約ではファイルの冒頭にミニマムでファイルの説明を入れる必要があります。 何のパッケージに含まれるかも必須です。 コードとコメントは一行空けます。 コメントは/と入力すると以下のように展開されます。 理想のコメント。 Missing doc comment for function 関数名/関数に説明追加 function.php内で発生しがちの関数系のエラーです。 関数説明の追加は拡張機能のPHP DocBlockerを入れておくと便利です。 関数を書いた後に関数の上で/コメント展開したら以下追記されるので、適宜リライトしてください。 必ず冒頭になんの関数か説明を追記してください。 テンプレートファイルの説明と違って、コメントと関数を続けて記述します。 補足ですが、通常一般的なPHP（PSR2など）では{を改行するのに対し一行で書くのがWordPress仕様です。この辺はフォーマッターで解決できます。 引数がある場合はその説明の追記も必要です。引数の説明を終わらせるために.(ピリオド)を打つ必要があります。 phpcsで気づいたWordPress NGコード phpcsを導入してNGコードにたくさん気づけたので、VS Codeの画面でよく怒られる実際のエラーメッセージと一緒に抜粋しておきます！ 変数のecho書き出しはNG 👉 発生エラー：All output should be run through an escaping function... (OutputNotEscaped) echo 出力やりがちなんですが、まんま出力はセキュリティ（XSS）上NGです。phpcsでコード書いてるとここら辺も激しく怒られます。 なのでエスケープ処理（除去）をかませます。他にもありますが、よく使う4つのみ抜粋。 | 関数 | 説明 | | | | | esc_html() | htmlタグをエスケープ | | esc_url() | URLのプロトコルのチェックや適切でない文字をエスケープ | | esc_attr() | & \\" \' (小なり、大なり、アンパサンド、ダブルクォート、シングルクォート) 文字参照をエンコード | | wp_kses() | 特定のタグと属性の出力以外エスケープ | たとえば、getthetitle()で取得した投稿内容をecho出力したい場合はこんな感じです。 get_~()系の

1関数出力はすべてエスケープ処理が必要だと思っておいてもいいくらいです。 URLではこんな感じで使います。 属性のエスケープ例。 特定のタグや属性だけ残したいときはこんな感じ。 brタグだけスリップできます。 長くなる場合はまとめるといいかもです。属性はタグのarray内に記述します。 ミスを避けるためヨーダ記法をゴリ押しされる 👉 発生エラー：Use Yoda Condition checks, you must. if文でヨーダ記法といって値を先に書く方法があります。 いわゆる倒置法。 変数の代入と間違えてif文を書きがちなのでこの記法で書けと言われますが、たまにしか間違えんです（汗） 後から大量にヨーダ記法に書き換えるのが辛い人へ。奥の手置換 ちなみに私は大量のヨーダ記法への書き換えが辛かったです。途中で気づいて置換しました。こちらにやり方を記載しました。 演算子は厳格に使え！ 👉 発生エラー：Found: ==. Use strict comparisons (=== or !==). これは当たり前っちゃ当たり前なん集ですが、うっかり間違えて==とか!=を使ってしまいます。 ショートタグから取得したタグはtrueやfalseがboolean（論理型）からstring（文字列）に変換されているので、文字列として判定する必要があります。 ❌ 配列は[]じゃなくarrayで書け！ 👉 発生エラー：Short array syntax is not allowed []で書くほうがモダンだと思いきや、使用NG。 ❌ キャメルケースはNG！ 👉 発生エラー：Variable is not in snakecase format / Function is not in snakecase format JS書いてるとついついうっかりキャメルケース書いてしまいますがNGです。 変数名や関数名はスネークケースで書きます。 ❌ ループ条件内で関数を使うな 👉 発生エラー：The use of count() inside a loop condition is not allowed... ループ条件内でのcount()（配列を数える関数）をまんま使ったら怒られました。 ❌ ショートコードの引数の書き方注意 👉 発生エラー：extract() usage is highly discouraged... ショートコードで使っていた鉄板のextract()は使用を推奨されていないようです。 古い書き方も注意されるので、発見があります。 extract() usage is highly discouraged, due to the complexity and unintended issues it might cause. ~ extractは非常にオススメできません。複雑な問題（多分バグ）があるから使わない方がいいです。~ 代替コードはこちらです。 こんな感じで値を取得します。 登録（CRUD）系の深い話 👉 発生エラー：$POST data not unslashed before sanitization. Use wpunslash() or similar updatepostmeta() などを使って、カスタムフィールドからデータを保存したいとき、そのまま記述するとphpcsのエラーがコンボで発生します。 なかでも、多くのPHPエンジニアが「えっ、なんで？」と引っかかりがちなのが、wp_unslash に関するエラーです。 なぜWordPressでは wp_unslash() が絶対に必要になるのか？ 結論から言うと、WordPressはシステム内部に入ってきたすべての入力データに対して、自動でバックスラッシュ（スラッシュ）を強制付与する仕様（マジッククオートと同等の処理）があるからです。 たとえば、ユーザーがフォームに「I\'m a cat」と入力して送信した場合、WordPressの内部（$_POSTなど）では勝手に「I\'m a cat」に書き換えられて保持されてしまいます。 このスラッシュが付いた状態のまま sanitizetextfield() などのサニタイズ関数に通してしまうと、スラッシュごとデータベースに保存されてしまい、データが壊れたり表示が崩れたりする原因になります。 そのため、WordPressで外部のデータを触るときは、「①まず wp_unslash() で余計なスラッシュを綺麗に取り除き、②その後にサニタイズ関数を通す」という2ステップが鉄則であり、phpcsが命がけで僕たちに教えてくれているエラーの正体なのです。 実務で使える正しいCRUDコード例 phpcsの判定をすべてクリアし、セキュリティも担保された正しい書き方は以下の通りです。 判定には isset() や empty() を使い、必ず wp_unslash してからサニタイズ関数で囲うようにしましょう。 また、$_GET やフォーム処理ã

1®éš›ã¯ä»¥ä¸‹ã®ã‚¨ãƒ©ãƒ¼ãŒå‡ºã‚‹ã“ともあります。 Processing form data without nonce verification. 安全にデータを処理するために、ノンス（Nonce）の検証も必ずセットで行うのがWordPress実務の基本です。 クエリ自体を登録し getqueryvar で取得できるようにしておきます。 ここら辺の検証は何よりもWordPress Codexが参考になりました。Codexサイコー！ データ検証 どうしようもないエラーを非表示にしたい やりたくないけど、どうしてもチェックを無視したいときは以下を使います。 一部無効（私はどうしてもの時基本これしか使いません）。 たとえばです。 $GET や $POST 系の処理で、どうしても一時的に規約チェックをパスさせたい場合などに挟み込みます。 ファイルまるごと無視 フォルダー丸ごと無視 まとめ・規約に添えば正しいコードが書けるようになる 他にもたくさんエラーに見舞われたのですが大量すぎて忘れました。 気づいたら追記します。 英語のエラー潰しはツライはず。ぜひこの記事を参考にしてWordPressコーディングライフを楽しんでください。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry450","title":"WordPress開発で必須の「phpcs」とは？VS Codeでコーディング規約を自動チェック＆整形する環境構築","date":"2021-04-01","modifiedDate":"2026-06-17","category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2021/entry450.webp","description":"phpcsとは何か、なぜWordPressで独自のコード規約を守るべきなのか。インデントの乱れで消耗するチーム開発を救うため、VS Codeでエラーを検知して自動整形（phpcbf）まで繋げる環境構築の方法をお届けします。","tags":["WordPress","VS Code","PHP"],"body":"WordPressはPHPとhtmlが混在する構造上、どうしてもソースコードが煩雑になりがちです。 そこで、コードの品質を一定に保ち、レビューのコストを最小限に抑えるために、phpcs（PHP CodeSniffer）を使ってコーディング規約を自動でチェックできる環境を構築する方法をご紹介します。 機械に任せられるチェックはすべて自動化して、人間はロジックの実装に集中するのが良きです！ 具体的なコードの書き方については別記事に綴りました。 この記事は前半と後半に分かれてます。 前編では環境設定のお話、後編はよくあるエラーの直し方です。 Macでしか検証していません VS Codeを使うことが前提です phpcsのエラーに困っている方はWordPress phpcsでコーディング規約を守るコードへ PHPでは一般的にインデントがタブ（4つ）なので設定（Cmd+,）> settings.jsonにコードを追記しておきます。 phpcs（PHP CodeSniffer）とは？WordPress開発でコーディング規約を守るべき理由 インデントの乱れは心の乱れ！！！ phpcs（PHP CodeSniffer） とは、PHPのコードがコーディング規約にそって美しく記述されているかを 自動チェッカーで静的解析するツール です。 WordPress開発には公式が定めた独自のコードの規約があり、PHPの標準的な標準規格（PSR）とはいちぶ異なります。バラバラになりがちなソースコードの品質を均一に保ち、チーム開発を健全に進めるためのきょうりょくなスクリプトです。 機械が自動チェックできる仕組みを整えていれば、作業する人はロジックに集中できますよね？ phpcsをインストールしてみよう！！ この記事ではできるだけ初学者にもわかりやすいよう説明します。 VS Codeにphpcsの拡張機能インストール 拡張機能からphpcsを検索してインストールします。 入れなくても使えますが、あったほうがエラーを視覚化できて便利です。 composerをインストール 拡張機能にはWordPressのコーディング規約が入ってないので、コマンドからも設定します。 VS Codeを開いてCtrl+Shift+@でターミナルを開きます。 もし、何かのプロジェクトを開いている場合は以下コードで場所を移動してください。 まずはコンポーザーをhomebrewでインストールするのですが、homebrewインストールしてない方は先にインストールします！ Homebrew 現在コードは以下になってますが、必ず最新のものを確認してください。 homebrewインストールしたら、コンポーザーもインストール。 PHP CodeSniffer(phpcs)インストール composerでPHP CodeSniffer(phpcs)をインストールします。 イãƒ

1³ã‚¹ãƒˆãƒ¼ãƒ«ã™ã‚‹ã¨ãã¯composer.jsonに書き込み権限がなくて怒られたらsudoをつけてください。本来は好ましくないです。 バージョンを確かめます。 が、一度以下コードで自分のいるディレクトリーを調べてみましょう！ 中に .composer または .config/composer ディレクトリがあったらOK！ 以下コードでバージョンを調べます。 phpcsコマンドを使えるようパスを登録 次に、ターミナルでいつでも phpcs コマンドが実行できるようパス（PATH）を登録します。 現在のMacの標準シェルである zsh 用の設定ファイル（ ~/.zshrc ）に書き込みます。（古いMacなどで bash を使っている場合は ~/.bash_profile に読み替えてください） 以下コマンドを実行します。 最後に、以下のコマンドを実行してどこからでもバージョンが表示されれば設定完了です！ WordPressコーディング規約インストール Composerを使って、WordPressのコーディング規約（WPCS）をグローバル環境にインストールします。 依存関係のある PHPCS も自動で入ります。 インストール完了後、PHPCSにWPCSのパスを認識させるために、以下のコマンドも続けて実行してください。 インストールされたことを確認します。 以下のメッセージが出たらインストールされました証拠です^ ^ グローバル環境へ規約をセッティング デフォルトのコーディング規約として設定可能です。 もしデフォルトを初期状態や一般的な規約にしたい場合は、 PSR12 あたりに戻しておくのが良いと思います。 コマンドから実行可能 エラー確認は以下のコマンドで実行可能です。 もしWordPressで独自テーマを作っている場合は、以下コマンドでまとめてテーマファイル以下を確認しましょう。 プロジェクトごとに設定 プロジェクト用のsettings.jsonを作ります。作り方は設定から（Cmd+,）ワークスペースを選び、ファイルマークをクリックします。ワークスペース用の settings.json を作ってコードを編集します。 以下のようにファイルが生成されます。 ファイルを覗くとごっそりエラーが確認できます。 問題からも確認できます。 エラーは赤線と黄線があります。 赤線は規約違反。普段からキレイにコード書く癖をつけないといけないですね。 自動整形 phpcsをインストールするとPHP Code Beautifier and Fixer(phpcbf)も一緒にインストールされます。 コマンドで整形 phpcbf コマンドを使うことで、規約に沿った形に自動整形してくれます。 テーマ内のファイルに対してコマンドを実行すれば、まとめて自動整形が可能です。 こういう配列のコードは美しくフォーマットしてくれます。嬉しい❤️ コードの見た目が綺麗に揃うと、可読性が上がってバグにも気づきやすくなるので嬉しいですね！ ※ただし、元々のコードがあまりにも複雑だったり崩れすぎていたりすると、自動整形だけでは限界があり、たまに手直しが必要になることもあります。自動整形を実行した後は、必ずGitの差分（diff）などでコードが壊れていないか軽く確認するようにしましょう。 保存するたびに自動フォーマットを適用 自動フォーマットを適用するためにはphpcbfという拡張機能が必要なのでインストールしておきます。 いつもWordPressのサイトを作っているわけではないですよね？ ということで、プロジェクトごとに設定で作成したプロジェクトごとの settings.json にコードを追記します。 💡 読者向けの補足メモ（マニュアル用） ※ うまく自動整形が動かない場合のみ PCの環境によっては、phpcs や phpcbf の実行ファイルの場所（パス）をVS Codeが自動で検知できないことがあります。 その場合は、お使いのPCに合わせて、以下のように実行ファイルのパスを追記してください。 Macの場合： Windowsの場合： \\"editor.defaultFormatter\\": \\"simone-baldini.vscode-phpcbf\\",は、他にたくさんフォーマッターを持っているときにphpcbfを使うように設定しています。 \\"phpcbf.onsave\\": true,があれば\\"editor.formatOnSave\\": true,が不要という記事を見かけましたが、ないと動きませんので注意しましょう。 WordPressしかやらない人は、このコードをゴッゾリ前提条件で編集したVS Code全体のsettings.jsonの\\"[PHP]\\"内に追記します。 ※[ユーザー名]は書き換えてください。 まとめ・コードを躾（しつけ）てハッピーコーディングライフ 郷に入っては郷に従え。フレームワークやCMSのルールに従いましょう。 今回はphpcsを入れて、だいぶWordPressのã

1Šä½œæ³•ã‚’知ることができました。 コーディング規約の大きな目的は保守性、品質の確保です。 とくに可読性、読みやすさは保守性や品質を高めるためにも必要です。 誰が読んでもわかりやすくルールに則（のっと）っていく決まりがコーディング規約です。 ちなみに、ルールに則ってないぐちゃぐちゃなコードはスパゲティーコードって言いますね。。。 WordPressは世界的に人気のCMSですしWebクリエイターとしてはルールに沿った書き方を習得したいと思い、この記事をまとめました。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。 参考 [WordPress]PHPCodeSniffer(phpcs)でWPコーディング規約をチェック＆自動整形できるようにする PHP_CodeSniffer(phpcs) のチェックを一部無効にする）","noindex":false},{"slug":"entry449","title":"CSSで魅せる！グローバルナビ（グロナビ）のホバーアニメーションコードスニペット集","date":"2021-03-26","modifiedDate":"2026-06-08","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry449.webp","description":"Web制作の実務でそのまま使える、グローバルナビゲーション（グロナビ）のCSSホバーアニメーションスニペット集です。下線が伸びるシンプルなエフェクトから、data属性を活用した文字入れ替えグラデーションまで、おしゃれで実践的な12個のサンプルコードをCodePenのデモ付きでコピペ可能にまとめました。","tags":["CSS","HTML","アニメーション"],"body":"Web制作をしていると、グロナビ（グローバルメニュー）のホバーアニメの持ちネタが尽きることがありますよね。 今回は、Webサイトのヘッダーナビゲーションでそのまま使える、CSSアニメーションのスニペット集を用意しました。文字色が変わるだけのシンプルなものから、擬似要素を駆使した少しリッチなエフェクトまで、おしゃれでありながら実務のトンマナを壊さない実践的なコードばかりです。すべてCodePenのサンプル付きでコピペ可能ですので、日々のコーディングにぜひお役立てください。 グロナビ（グローバルメニュー）のホバーアニメを作る前提条件 リセットCSSを必ず読み込んでください サンプルのフルコードはCode Pen内に置いてあります！ 基本的にコピペでもイケますが、ある程度CSSやHTMLを理解していいた方がアレンジできて楽しいです。 スマホはホバーアニメしないので考慮していません。 あまりグロナビのアニメが凝りすぎると、全体のトンマナを損ないます。わりと控えめで実践を考慮したサンプルが多め ベースのコードとグロナビ アニメ・コードスニペット初級編 まずは基本から！ヘッダーをコーディングしています。 困った時はスタンダードなデザインするのが◯。 下記コードでサイトタイトルとナビゲーションといったような、一般的なヘッダーができます。 ホバーアニメーションをつける理由ですが、ここはリンクと知ってもらうためです。 通常は最低ホバーで文字色を変えるぐらい書いておけばいいと思います。 アニメーションをなめらかにするためtransitionを付与します。 今回easingはデフォルトのまま使います。 グロナビ アニメその1・下線を横に広がる 文字色が変わるだけだとなんだか寂しい。 そんな時は下線をつけるのですが、それだけだと芸がないので横に広げます。シンプルで使いやすいです。 グロナビ・下線が横に広がる|Code Pen グロナビ アニメその2・下線が左からにゅっと伸びる 先ほどのアレンジバージョンです。左から右へ伸びるとページ遷移するんだ感が出ます。 グロナビ・下線が左からにゅっと伸びる|Code Pen グロナビ アニメその3・背景色をガツンと変える カンタンですが色の変わる面積が広いのでデザインによっては使わないほうがいいかもしれません。 もしくは色を調整してください。 グロナビ・背景色をガツンと変える|Code Pen グロナビ アニメ・コードスニペット中級編 見た目を変えたり、少し難易度を上げていきます。 グロナビ アニメその4・色を変える やってることは単純ですが、各リンクの色を変えるだけでポップになります。 サイトによっては事故が起こるデザインなので要注意。 グロナビ・色を変える|Code Pen グロナビ アニメその5・矢印がにゅっと伸びる transform のプロパティ skew() を使って要素をナナメることができます。 それを利用して矢印を作り、ぴゅっと伸ばします。 詳細はこちら的なリンクのあしらいとして使ってもかっこいいです。 グロナビ・矢印がにゅっと伸びる|Code Pen グロナビ アニメその6・アイコンをくるくる回す アイコンもCSSで作成します。 三角はborderで作ります。私は素材を取ってくるのがめんどうな時、素材をCSSで作ることがあります。 本来はSVGがいいんでしょうけど。。。 グロナビ・アイコンをくるくる回す|Code Pen グロナビ アニメその7・マッチ棒っぽいものを伸ばす このサイトのPCのグロナビでも採用しています。 YouTubeでマッチ棒パズルなるものを知った結果こうなりました。。。。 グロナビ・マッチ棒っぽいものを伸ばす|Code Pen グロナビ アニメその8・グラデ背景を重ねる グラデ背景を文字下に敷きます。この時のポイントは親のaタグの重なり順を調整すること。z-index: 1で上に持っていき、下に重なる要素（この場合擬似要素）をz-index: -1で下げます。 地味ã

1ªãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã§ã™ãŒé‡å®ã—ます。 グラデーションは色と色の境目を0にすることでぱきっと色を分けることができます。 グロナビ・グラデ背景を重ねる|Code Pen グロナビ アニメその9・にゅっと伸びるグラデ下線 こちらは先ほどの応用版。 今回はパキッとさせてますが、グラデはお好みで滑らかにしてもいいかもです^ ^ グロナビ・にゅっと伸びるグラデ下線|Code Pen グロナビ アニメ・コードスニペット上級編 attr()関数を使いたい！ attr()はカスタムデータ（data）属性などをCSS側で取得できる便利な関数です。 ※ カスタムデータ（data）属性に関する記事はコチラ。 たとえばhtmlでdata属性を設定すると... CSS側でcontentプロパティに渡すことができます。 attr()|MSN Web Docs) ということで、こちらを使ったサンプル3つご紹介します。 グロナビ アニメその10・文字をグラデに -webkit-background-clipを使って文字をグラデにします。 ベタ塗りからのグラデーションはアニメーションが効かないので、最初から上に透明（opacity）な擬似要素を重ねておき、opacity: 1にしてアニメーションさせます。 グロナビ・文字をグラデに|Code Pen グロナビ アニメその11・文字をグラデかつ下線のアニメ追加 先ほどの応用版。 グラデは左から徐々に右に広がります。下線も追加してさらにリッチに。 グロナビ・文字をグラデかつ下線のアニメ追加|Code Pen グロナビ アニメその12・文字の入れ替え 英語だとかっこいいけどちょっと日本人には意味不明になりがちです。 なのでホバーした時にattr()関数を使って日本語表示を表示します。 グロナビ・文字の入れ替え|Code Pen 実務でホバーアニメーションを実装する際の注意点（アクセシビリティ） 最後になりますが、実務でこれらのホバーアニメーションを実装する際は、 キーボード操作（アクセシビリティ）への配慮 を忘れないようにしましょう。 マウス操作だけでなく、キーボードの「Tabキー」を使ってサイト内を移動しているユーザーにとって、マウスホバー時にしか動かないエフェクトは、今どこを選択しているのかが全く分からなくなる原因になります。 対応はとてもカンタンです。今回紹介したスニペットのCSSの :hover が書かれている部分に、 フォーカス時の疑似クラス :focus を一緒に並べてあげるだけ です。 「マウスで乗せたとき（hover）」と「キーボードで選択されたとき（focus）」で同じアニメーションが滑らかに動いてこそ、実務で100点満点と言えるグロナビになります。 ぜひ、コピペして使う際は :focus もセットで記述して、誰にとっても使いやすい優しいサイトを作ってみてくださいね！ まとめ・モバイルファーストだけどまだまだPCで閲覧している人はいる 最近、ユーザー属性について考えます。 私のブログは内容がニッチなので、あまりスマホで見られることはないです。実務を考えた記事が多いので月曜日から金曜日平日の絵閲覧多めです。 そこで皆さん考えて欲しいんです。 スマホファーストはあくまで一般論。わりとPCで閲覧している人も結構いるということ。 ユーザーに合わせるとPCにどんなものを実装するかなどまだまだ脳みそをひねる必要があると思います。 今回は実践的に使えそうなスニペットをピックアップしました。参考にしていただければ幸いです。 最後までお読みいただきありがとうございました。 サイトのカスタマイズが楽しくなるコードをご紹介！あわせてお読みください。","noindex":false},{"slug":"entry448","title":"Instagram Graph APIの使い方！PHPで投稿一覧を取得（get posts）する実装手順【2026年最新】","date":"2021-03-25","modifiedDate":"2026-07-07","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbn

1ail/2021/entry448.webp","description":"Instagram Graph APIの使い方と、PHPやJavaScriptで最新の投稿一覧を取得（get posts）するモダンな実装手順を徹底解説！躓きやすいFacebook連携や無期限アクセストークンの取得方法など、2026年現在の最新仕様に沿ってステップバイステップでスマートに紐解きます。エラーを防ぐ安全な例外処理のTipsも満載。開発のハマりポイントをサクッとクリアして、今すぐサイトに美しいフィードを実装しましょう！","tags":["JavaScript","PHP"],"body":"【この記事は2026年最新版にアップデート済みです】 今のWeb制作現場で確実に使える、モダンなAPI連携の決定版マニュアルです。最新のブラウザ環境やセキュリティ仕様に合わせて内容をブラッシュアップしました。 JSコードサンプル（Fetch API / async・awaitでの非同期取得） Instagram Graph APIの実装で、多くの開発者が最初に触れる「Facebook連携とトークン取得」のステップ。一見手順が多くて面倒ですが、Metaの最新仕様に沿って順番に進めていけばちゃんとクリアできます！ この記事では、2026年のモダンな開発環境に完全対応した 投稿一覧(get posts)の取得手順 を、JavaScriptとPHPの両パターンで徹底解説します。 難易度は「HTML/CSSの基本がわかり、JSやPHPを少し触ったことがある方」向け。実務でそのまま使える堅牢なコードとともに、驚くほどわかりやすくステップバイステップでナビゲートします！ この記事でわかること Instagram Graph APIの最新の仕様と確実な設定手順 2026年現在のモダンなJavaScript（Fetch API）による非同期取得 生cURLを使わない、安全でスマートなPHPでのデータ出力方法 運用中に突然データが取得できなくなった場合の即効トラブルシューティング また、記事の後半には「 今まで表示されていたのに突然データが非表示になってしまった！ 」という、実務で本当によくあるトラブルを数分で解決するためのポイントも追記しています。 Metaの仕様変更に振り回される時間なんてもったいないですよ！サクッと連携を済ませて、フィードを実装しましょう！ まずは下準備から。インスタとフェイスブックを連携する手順 Instagram Graph API を導入する手順のなかで、最も大切なのが最初のアカウント連携です。Metaの仕様に沿って順番に進めていけば確実に設定できますので、ここで全体の流れをサクッとクリアしましょう！ まずは最初のステップとして、Facebookページを作成し、Instagramをプロアカウント（ビジネスまたはクリエイター）に変更して、2つのアカウントを確実に紐付けます。 Facebookページを用意 最初に、ベースとなるFacebookページを作成します。ご自身のFacebookアカウントにログインし、新規のページをサクッと作成しておきましょう。 すでに既存のFacebookページを運用している場合は、操作するアカウントが「管理者」または「アナリスト」の権限を持っているかを事前に確認しておくと、このあとの連携作業がスムーズです。 インスタ（Instagram）はクリエイターないしはプロアカウントへ変更 続いて、Instagram側のアカウント種別を切り替えます。スマートフォンのInstagramアプリから簡単におこなうことが可能です。 アプリの設定画面からプロアカウント（プロフェッショナルアカウント）への切り替えを選択します。 アカウントの運用目的に合わせて「クリエイター」または「ビジネス」のいずれかを選択しましょう。どちらを選んでもAPIの実装自体には影響ありません。 FacebookページとInstagramを連携させる アカウントの準備ができたら、Instagram側からFacebookページへの連携を実行します。 連携作業が完了したら、念のためにFacebookページ側の設定画面からも確認を挟みましょう。双方のアカウントでしっかりとリンクが連携できているか確認しておくことが、エラーを防ぐ最大のポイントです。 Meta for Developersでのアプリ作成と各種ID・アクセストークン取得方法 ここからは、Webサイトに投稿一覧を表示させるために必要な各種IDとアクセストークンを取得していきます。 作業にはFacebookアカウントが必要になりますので、ログインした状態でMetaの開発者向け公式ツール「Meta for Developers」にアクセスしましょう。 Meta for Developers 公式サイト このセクションでのゴールは、「アクセストークン」 と 「InstagramビジネスアカウントID」 の2つを確実に手に入れること。手順通りに進めればサクッと取得できますよ！ Instagram Graph APIを使うためのマイアプリ作成 まずはダッシュボードの「マイアプリ」から「アプリを作成」を選択し、新規のアプリを立ち上げます。 画面の指示に従って、作成するアプリのタイプやユースケース（Instagramのデータ取得に適したもの）を選択します。 続いて、任意のアプリ表示名を入力し、連絡先メールアドレスなどを確認のうえでアプリを作成します。 💡 実務のハマりポイント！ アプリの表示名に「insta」や「facebook」といったMeta社の商標に近い文字列が含まれていると、規約エラーになり作成できません。意外な盲点になりやすいので、独自のわかりやすい名前（例：site-feed-app など）を設定するのがスマートです。 あらかじめ「アプリID」と「App Secret」をメモしておく アプリが作成できたら、今後の認証で絶対に必要になる2つの重要情報を控えておきます。 マイアプリから作成したアプリを選択し、サイドメニューの「アプリの設定」＞「ベーシック」を開くと、「アプリID」 と 「App Secret（クライアントシークレット）」 が確認できます。 App Secretを表示する際はFacebookのパスワード入力を求められますので、確認できたらすぐに安全な場所へメモしておきましょう。 また、å

1®Ÿéš›ã«Webサイトへ実装して一般公開（本番運用）する予定がある場合は、この「ベーシック」画面内にある 「プライバシーポリシーのURL」 や 「利用規約のURL」 も忘れずに登録しておきましょう。 ここにダミーではない有効なURLが登録されていないと、後々APIの利用制限がかかり、投稿が突然非表示になってしまうリスクがあります。トラブルを未然に防ぐためにも、この段階で自社サイトのポリシーURLを入力しておくのが確実で賢明です。（※詳細なリスクや挙動については、後述の突然のエラー。データが取得できないで解説しています）。 グラフAPIエクスプローラでのInstagram Graph APIの使い方とトークン取得 各種IDとトークンを生成するために、Metaの公式デバッグツールである「グラフAPIエクスプローラ」を使用します。ヘッダーの「ツール」メニューから「グラフAPIエクスプローラ」を選択して移動しましょう。 グラフAPIエクスプローラが開いたら、画面右側の「Facebookアプリ」のプルダウンから、先ほど作成したアプリを選択します。 準備ができたら「Generate Access Token」ボタンを押します。Metaアカウントのアカウント認証（アクセス許可の確認画面）が表示されますので、画面の指示に従って承認を完了させてください。 次に、API経由でデータを安全に取得するために必要な「アクセス許可（Permissions）」を付与します。画面右側の「Permissions」エリアから、以下のスコープ（権限）を確実に追加してください。 | 分類（Pages / Business） | 必要なスコープ（Permission） | スコアの役割・内容 | | :----------------------- | :--------------------------- | :------------------------------------------------------------------------- | | Pages | pagesshowlist | アカウントが管理しているFacebookページのリストへアクセスを許可する（必須） | | | pagesreadengagement | ページの基本データやエンゲージメント情報の読み取りを許可する | | Business | business_management | ビジネスマネージャAPIを介した認証や読み取りを可能にする | | Instagram特化スコープ | 必要なスコープ（Permission） | スコアの役割・内容 | | :-------------------- | :--------------------------- | :-------------------------------------------------------------------------------------------------------- | | Instagram | instagram_basic | 連携しているInstagramアカウントのプロフィール情報やメディアデータの取得を許可する（投稿一覧の取得に必須） | | | instagrammanageinsights | 投稿のインサイトデータ（閲覧数など）へのアクセスを許可する | ※仕様変更によりUIがアップデートされている場合がありますが、最低限 pagesshowlist、pagesreadengagement、instagram_basic の3つが有効化されていれば、Webサイトへの投稿一覧表示は問題なく実装可能です。さらに詳細な権限仕様を確認したい場合は、Meta公式リファレンスを参照してください。 権限を追加したら、もう一度「Generate Access Token」をクリックして、追加した権限を反映した最新のトークンに更新します。 トークンの有効期限を「無期限アクセストークン」に変更する手順 ここで生成された初期のアクセストークンは、セキュリティの仕様上「わずか1時間」で有効期限が切れてしまいます。本番運用のWebサイトで自動更新させるために、この短期トークンを「長期（2ヶ月）」へ延長し、最終的に「無期限トークン」へと昇華させます。 アクセストークンの入力フォーム左側にある「i（情報）」アイコンをクリックすると、現在のトークンの詳細が開きます。 「アクセストークンデバッガー」への案内が表示されますので、「アクセストークンツールで開く」をクリックして別タブに移動しましょう。 デバッガー画面の下部にある「アクセストークンを延長」ボタンをクリックします。 確認ダイアログが表示されたら「デバッグ」をクリックして処理を確定させます。 これで有効期限が「2ヶ月（約60日）」に延長された新しいトークンが生成されます。画面に表示された新しい文字列をコピーしてください。 最後に、この2ヶ月トークンをベースにして「期限なし（無期限）」のトークンを抽出します。 グラフAPIエクスプローラの画面に戻り、先ほどコピーした2ヶ月期限のトークンをフォームへ上書きで貼り付けます。その状態で、再び左側の「i」アイコンからアクセストークンツール（デバッガー）を起動してください。 デバッグ結果の画面で、有効期限の項目が 「受け取らない（Never）」 または 「無期限」 になっていれば成功です！この最終的なトークン文字列を本番環境のプログラムで使用します。 InstagramビジネスアカウントID（インスタアカウントID）を取得 最後に、APIを叩く際に対象を指定するための「InstagramビジネスアカウントID」を調べます。 グラフAPIエクスプローラの上部にあるURL入力欄（エンドポイント指定部分）に、以下のクエリを入力して「送信」ボタンを押してください。 送信が成功すると、あなたが管理しているFacebookページに紐付いている、正しい instagrambusinessaccount 内の id がJSONデータとして返ってきます。 管理しているFacebookページやアカウントが複数ある場合は、複数のデータが配列で返ってくることがあります。その場合は、データ内にある各IDのリンクをクリックして、対象の正しいアカウントかどうかを確認しましょう。 💡 実務のTips もし管理しているページ数が非常に多く、目的のアカウントを探すのが難しい場合は、事前にFacebookページ自体の「設定」画面からページIDを控えておき、そのページIDに紐付く instagrambusinessaccount をダイレクトに参照するとスマートに見つけ出せます。 これで、本番実装に絶対必要な 「無期限アクセストークン」 と 「ビジネスアカウントID」 の2つが完全に揃いました！ Metaの仕様に沿ってここまでたどり着けたのは素晴らしい突破力です！これで下準備はすべて完了ですので、いよいよ楽しいコード実装のセクションへ進みましょう！ Instagram Graph APIの使い方！投稿一覧（get posts）の表示テスト 必要な情報が揃ったら、まずはブラウザを使って、実際にInstagramのデータが綺麗に

1返ってくるかテストリクエストを投げてみましょう！ リクエストURLを組み立てるために必要な情報は以下の3つです。 | 変更が必要なパラメーター | 概要 | | :----------------------------- | :--------------------------------------------------------- | | {instagrambusinessaccount} | 前のセクションで取得した「InstagramビジネスアカウントID」 | | {count} | サイトに表示させたい最大の投稿件数（例：6 や 12 など） | | {useraccesstoken} | 前のセクションで抽出した「無期限アクセストークン」 | 以下の検証用URLの {} で囲まれた部分を、ご自身の情報に綺麗に書き換えてみてください。 ※ URL内にある v20.0 の部分はGraph APIのバージョンを指しています。Metaの仕様上、古いバージョンも一定期間は互換性が保たれますが、実装するタイミングの最新安定版（LATEST）を指定しておくのが最も確実です。 組み立てたURLをブラウザの検索窓（アドレスバー）に貼り付けて、エンターキーを押してみましょう。 画面にJSON形式のデータが配列として返ってくれば成功！ 無事にデータが取得できているか、念のために確認しておきましょう。返ってきたデータのなかにある media_url のURLをコピーしてブラウザで直接開いたとき、実際の投稿画像がパッと表示されれば認証は完璧に通っています。 | 取得できる項目 | 説明・実務での注意点 | | --------------- | ------------------------------------------------------------------------------------- | | caption | 投稿本文（テキスト内容）。 | | id | 投稿ごとに割り振られる一意のID。 | | media_type | メディアの種別。IMAGE（静止画）、VIDEO（動画）、CAROUSEL_ALBUM（複数枚）がある。 | | media_url | 画像や動画ファイルの直リンクURL。※動画の場合は動画ファイル自体のURLになるため要注意。 | | thumbnail_url | 動画（VIDEO）の場合に生成されるサムネイル画像のURL。※静止画の場合は空になる。 | | permalink | Instagram上の実際の投稿ページへ遷移する個別リンクURL。 | 動画投稿が含まれる場合は、プログラム側で mediatype を条件分岐させ、動画ファイルではなく thumbnailurl を代わりに表示させるように制御を組むのがスマートな実装テクニックです。 値が返ってきたかを必ず確認してから次の作業に進みましょう！ API連携の実装時にエラーで躓いてしまう方の多くは、プログラム側のバグなのか、APIの認証エラー（トークン切れなど）なのかを切り分けられずに悩んでいます。少し手間に思えるかもしれませんが、こうして事前にブラウザで疎通確認を挟んでおくことで、無駄なデバッグ時間をゼロに抑えて圧倒的なスピードで実装を進められます！ 共通CSS（フィードのレイアウト調整） 出力された投稿一覧のレイアウトをスマートに整えるための参考CSSです。 作例ではホバー時にいいね数を表示するアイコンとして、広く使われている「FontAwesome」を活用しています。クラス名やデザインは、制作するWebサイトのトーン＆マナーに合わせていかようにも自由にスタイリングを変えてください！ JSコードサンプル（Fetch API / async・awaitでの非同期取得） 現代のフロントエンド開発において標準的な Fetch API と async/await を組み合わせた、モダンな軽量な非同期処理の実装コードです。 ※ この記事を執筆したのは2021年ですが、2026年に合わせてモダンなコードにメンテナンス済みです。 JSから取得した要素を格納する親HTML。 さらにWebサイトのパフォーマンスを極限まで高めたい場合は、ページ読み込み時にいきなりAPIを叩くのではなく、Intersection Observer API（交差監視インフォーマー） を活用するのがおすすめです。 ユーザーがスクロールして要素が画面内（または画面の少し手前）に近づいたタイミングで初めてAPIリクエストを発火させることで、初期表示の軽量化と読み込み時の美しいアニメーション（ふんわり表示など）を同時に実現できます。 CSSも2026年であれば、SASSを使うまでもなく、入れ子でコードも書けます。 今回使用した ObserverIPI の記事はこちらです。 Instagram APIをPHPで動かす！最新のPHPコードサンプル サーバーサイド（PHP）側でInstagramのデータを安全に読み込み、サイト上へ出力するモダンな実装手順の解説です。 かつては cURL関数 を使うのが一般的でしたが、コードが肥大化しやすくエラーハンドリングが複雑になるため、現代のWeb制作ではよりスッキリと書ける filegetcontents 関数とストリームコンテキストを組み合わせる手法が主流となっています。 💡 実務での注意点とバグ回避のTips PHPでInstagramのデータを扱う際、プロの開発者として必ず組み込んでおきたいのが 「APIエラー時や、投稿データが万が一0件だった場合の例外処理（ガード節）」 です。 もしMeta側のサーバーが一時的にメンテナンスに入っていたり、アクセストークンの有効期限が何らかの理由で切れてしまっていた場合、APIから返ってくるデータは空っぽ（存在しない状態）になります。 そのçŠ

1¶æ…‹ã®ã¾ã¾å‡ºåŠ›ã‚’処理しようとすると、PHP側が致命的なエラー（Fatal Error）を吐き出してしまい、最悪の場合はWebサイト全体の表示が真っ白にストップしてしまうリスクがあります。 実務に組み込む際は、必ず出力の手前で「データが正しく取得できているか、中身が空ではないか」を判定する条件分岐を1行挟み、安全が確認できたときだけループ処理をおこなうように制御を組んでおきましょう。このひと手間で、どんな状況でも絶対に落ちない堅牢で信頼性の高いWebサイトが完成します！ WordPressのブロックエディターにも対応してみました！ ブロックエディターでもインスタグラムを埋め込めるように対応してみました。 実装方法などはこちらに紹介しています。 突然のエラー！Instagramのデータが取得できなくなった場合の対処法 本番運用中のWebサイトで、これまで綺麗に表示されていたInstagramの投稿一覧が「突然非表示になった」「読み込みに失敗するようになった」というトラブルが起きることがあります。 この場合、最も可能性が高い原因は 「Metaによるデータの使用状況の年次確認（コンプライアンスチェック）」の見落としによる、アプリの自動制限（開発モードへの降格） です。 Metaでは、開発者に対して定期的なデータ使用状況の確認や、登録されているプライバシーポリシーの有効性チェックを義務付けています。これらに関するMetaからの通知やメールを見落としたまま期限を過ぎてしまうと、アプリのステータスが「ライブ（公開中）」から「開発モード」へと強制的に戻され、一般のユーザーからデータが見えã

1ªããªã£ã¦ã—まいます。 解決策：ダッシュボードからポリシーURLを設定・確認する このトラブルを解決するには、すぐに「Meta for Developers」のマイアプリにアクセスしてください。 サイドメニューの「アプリの設定」＞「ベーシック」を開き、「プライバシーポリシーのURL」 と 「利用規約のURL」 が正しく入力されているか、URLがリンク切れになっていないかを改めて確認し、最新の状態に更新（変更を保存）しましょう。 もしMetaからの年次確認のダッシュボード通知（リクエスト）が届いている場合は、画面の指示に従って「確認を完了」させるボタンをサクッとクリックします。 正しく手続きが完了すれば、数分から遅くとも数時間以内にはアプリのステータスが自動的に「ライブ」へ復帰し、Webサイト上の投稿一覧も何事もなかったかのように元通り表示されるようになります！ まとめ：2026年最新のInstagram Graph API使い方 長くなりました。インスタ投稿の一覧取得方、PHPとJSのサンプルコード両方紹介しました。 ウェブサイトにインスタの一覧を表示できたら超いいですよね！サイトを更新しなくても画像が常に更新されるのでリッチに見えますし、クライアントも喜びます。 また仕様変更に気づいたらメンテ入れます！ 最後までお読みくださりありがとうございました。感謝！","noindex":false},{"slug":"entry447","title":"職業訓練のプログラミングは意味ない？無駄に終わる人の特徴と就職のリアル","date":"2021-03-17","modifiedDate":"2026-06-22","category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2021/entry447.webp","description":"職業訓練のプログラミングは意味ない？無駄になる？エンジニア歴15年のプロが訓練校と民間スクールの違いを徹底比較！ハローワークでは教えてくれない「現実の就職レベル」と、未経験から最短で就職するための失敗しない賢い選び方を解説します。","tags":["職業訓練","プログラミング学習"],"body":"プログラミングで転職したい！でも、ハローワークの職業訓練校って「意味ない」「無駄」って噂も聞くし、本当に就職できるのかな…？ 職業訓練校を上手に利用すれば、無料でプログラミングが学べ、エンジニア・プログラマーへの道を開くことができます。 しかし、無料で学べる反面、「本当に現場で使えるレベルになれるのか」「途中で挫折しないか」など、実際の評判やリアルな就職率が気になりますよね。 この記事では職業訓練校の卒業生であり、訓練校・民間スクールの両方で講師を務めた経験のある私が、綺麗ごと抜きのリアルなお話をします。 この記事でわかること 職業訓練校のプログラミングコースで学べること 訓練校が「無駄」「意味ない」と言われる3つのデメリットとメリット 職業訓練校でプログラミングを学んだ人のその後（筆者の事例含む） 失敗しないための「プログラミングスクール」と「職業訓練校」の賢い選び方 職業訓練校とは？ 職業訓練校は年間30万人以上の求職者に利用されています。 職業訓練はハローワーク（公共職業安定所）が提供しているので、スキルの習得だけではなく、新しい転職先が見つかるまでサポートも行ってくれます。 職業訓練の種類は3種類あります。 | 種類 | 対象者 | 受講料 | | ---------------------------- | ------------------------------ | ------ | | 離職者訓練・求職者支援訓練 | ハローワークの求職者が対象 | 無料 | | 在職者訓練 | 在職中の会社員の方でも受講可能 | 有料 | | 学卒者訓練 | 中学、高校卒業者が対象 | 有料 | 一般的に職業訓練は、離職者訓練・求職者支援訓練 を指し、ハロートレーニングと呼ばれています。 ハロートレーニングは公共職業訓練（最長2年）と求職者支援訓練（2か月~6か月）があります。 公共職業訓練(失業保険を受給している) 求職者支援訓練(失業保険を受給できない、あるいは受給期間を満了した人) 求職者支援訓練でも、給付金の支給（訓練受講手当月10万

1円）を受けることができ、手厚い金銭的な支援を国から受けながら受講することができます。 職業訓練校にあるプログラミング系の主な訓練コース 職業訓練校で学べる言語は主に以下のような感じです。 スマートフォンアプリケーションプログラマー養成（Java言語）科 WEBアプリケーションプログラマー養成科 ソフトウェアプログラマー養成（Python言語）科 ネットワークエンジニア科 Webクリエイター養成科 など プログラミング未経験の方は、Web制作コース がオススメです。 理由は、一番学習の難易度が低いから です。 プログラミング未経験で、いきなりPythonやJavaを始めるのはハードルが高いです。授業についていけず、わけのわからないまま授業が終わってしまう可能性もあります。 結局転職に役に立たなかったなんて話もよく聞きます。 オススメのWeb制作コースで学べること Webエンジニアやデザイナーの求人需要はかなりあります。リモートワークしやすくフリーランスとしても独立しやすい職業です。 Web制作コースには「Webクリエイター養成科」「Webデザイン科」などがあります。習得できるスキルは以下の通りです。 HTML CSS JavaScript PHP Adobe Illustrator Adobe Photoshop 受講後は、Web制作会社や広告代理店、事業会社のWebエンジニア、デザイナーとして転職する方もたくさんいます。 職業訓練でプログラミングを学ぶメリット＆デメリット 職業訓練校で学ぶメリットは 受講料が無料 だということ。さらに 条件が合えば国から支援 を受けることができます。 職業訓練でプログラミングを学ぶメリットと受講手当の現実 失業認定日の手続きが免除される 通常、失業保険を受給するには、毎月1回ほど失業認定日にハローワークで手続きをしなければなりません。 公共職業訓練を受講すると、ハローワークに通わなくても失業保険を受給できます。 「職業訓練を受けている＝就職に前向きな意思がある」とみなされるため免除されるのです。 失業保険をもらえない人でも受講手当をもらえることもある 失業保険をもらえない人が求職者支援訓練を受ける場合、職業訓練受講給付金として「月10万円＋通所手当＋寄宿手当」をもらえます（条件つき）。 訓練中の失業者は国から手厚くサポートされます。 職業訓練のプログラミングが「無駄」「意味ない」と言われる3つのデメリット 実務経験がないと、プログラミング業界への転職率は低い 求人サービスなどを見ると分かると思いますが、実務経験ゼロのエンジニア・プログラマーの転職はかなり厳しいです。 私が卒業したときも、プログラマーとしてまともに就職できた未経験の人は私も含め、ほぼいませんでした。 職業訓練校で発表している就職率は一見高そうに見えても、実際はコンビニ店員や携帯販売の営業だったり、まったく別業種なんてこともあります。 最初の就職先がたいていブラック企業 職業訓練校には民間の委託業者も含まれます。 委託の職業訓練校の運営を継続するためには就職率が重要となってきます。しかも雇用企業側に雇用保険があることが条件となります。 なので委託の職業校側はハローワークの求人を中心に訓練生をサポートします。 ハローワークの求人は無料で使えるので、常に人材不足で退職率が高く、お金に余裕がないブラック企業が求人を出していることが多いです。 もちろん、ハローワークの求人の中にも大企業やホワイト企業の求人もありますが、民間の転職サービスに比べるとブラック企業の比率が高い です。 民間プログラミングスクールと比べると授業やサポートが低品質 職業訓練校では講師が職業訓練校で就職できなかった生徒さんや、すでに定年したエンジニアが講師を努めていることも少なくありません。 現場経験も乏しかったり、知識も古かったりと現場で役立つスキルが身につかない可能性があります。 一方、民間プログラミングスクールでは講師が現役エンジニアだったり、プログラミング力のつくコースを時間をかけて開発していることも多く、学べる内容の質が高い です。 授業とは別に転職サポートのためのカウンセラーがついたり、転職できない場合は授業料返金なども行っているスクールもあります。 職業訓練校と民間プログラミングスクールの 転職成功率は天と地ほどの差 があります。 職業訓練校でプログラミングを学んだ人のその後（筆者含める） 私も含め職業訓練でプログラミングを学んだ人の事例を軽くご紹介します。 ### 30歳過ぎでフロントエンドエンジニア（筆者） Webプログラマー養成講座を卒業。卒業後、プログラマーの転職先はなくネットショップに就職。経験を積み、数年後にまともなWeb制作会社に就職できるようになった。 ブラック企業を経てSEに Webクリエイター養成講座を受講。職業訓練校から紹介された就職先がとんでもないブラック企業。残業に追われ、さんざんな目にあった結果退職。現在はシステム会社に入社。 家族の引っ越しでリモート勤務 Webクリエイター養成講座を受講後、ネットショップで制作業務を行う。家族と引っ越し後も仕事をリモートで続けている。 私の周りの生徒さんは最初の転職では圧倒的にブラック企業が多く、八割くらいが挫折して会社を辞めます。 中には会社がブラックすぎて精神が病んだ人もいました。 あこがれのプログラマーになった結果、心を病んで入院。本末転倒ですよね。。。 就職できたらまだいい方です。職業訓練校卒で未経験プログラマーをまともに採用してくれる会社はほぼありません。 結論：プログラミングスクールと職業訓練校はどっちがおすすめ？ 短期間で確実にエンジニアとして転職したいという方は、民間プログラミングスクールが絶対いいと断言 します。 民間プログラミングスクール、職業訓練校、いずれにしてもその後の何十年も人生を左右する学習期間です。 いきなり民間プログラミングスクールに申し込むのは怖いですよね？ そんな方はまずは 無料体験 がオススメです。体験授業で ご自身がプログラミングそのものが性に合っているか 確認もできます。 民間プログラミングスクール、職業訓練校いずれも、プログラミングが性に合ってないと受講中は苦痛でã

1—かありません。 また、事前に 授業内容や費用などを相談 するのもオススメです。どのプログラミングスクールも個別相談を実施しています。 このようなこまやかなケアは職業訓練校にはありません。ぜひ無料体験やカウンセリングを利用して憧れのプログラマーに近づきましょう。","noindex":false},{"slug":"entry446","title":"初心者でも海外ノマドワーカーはできるの？おすすめの職種や仕事を紹介","date":"2021-03-15","modifiedDate":"2023-03-01","category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2021/entry446.webp","description":"海外ノマド初心者は断然東南アジア。生活コスト削減でフリーランスも始めやすい。さらに、フリーランス→会社員→今海外ノマドの私が、海外ノマドしたい方にオススメの職種を紹介。","tags":["海外移住","フリーランス","ライフスタイル"],"body":"将来海外に住みたい。でも、住む場所関係なく働くにはどうすればいいんだろう。 こんな気持ちを抱いている方、いませんか？ 私もずっと海外で暮らすのが夢でした。 実際、海外に移住したところで仕事をして生活費を確保できるのか、言葉は通じるのか。。。行動に移せない理由はたくさんありますね。 私は海外移住4年目です。私の場合は、チャンスがあって海外転職し、一年で仕事をやめました。 それからプラプラしつつフリーランスしつつ、またひょんなことから会社を立ち上げセブ島にいます。 日本で会社員→海外で会社員（1年）→今海外ノマド歴3年の私が、将来海外ノマドとして生きていきたい方にオススメの職種をご紹介します。 この記事でわかること 生活費たった10万円以下！？フリーランスノマドは東南アジアで始めるとお得な理由 海外でノマドワーカーになりたいけど、できる仕事が。。。未経験でも始められる仕事もあります！！ 初心者海外でもフリーランスで稼げる職種のご紹介 私が海外ノマドワーカーになった経緯 私が海外ノマドワーカー担った経緯をお話をさせてください。 私は子供の頃から海外に住むのが夢でした。大学で英語英米文学科に進学し中退、しばらくして出産し、海外に行く夢を諦めました。 出産後は美容関係の仕事をしていましたが、子供の喘息（ぜんそく）がきっかけで、職業訓練校を経てWebエンジニアに転職しました。 理由は、Web関連の仕事であれば ネットが繋がればどこでも仕事ができるから です。 その後も会社員したりフリーランスしたり生計を立てていました。 最初の海外で働くきっかけはWantedly でスカウトされたことです。 私はワクワクして海外日系企業で働き始めましたが結局退職。国によっては日本のように 労働基準局 のような厳しい法律がない場合もあり、精神や肉体の安定は保証されないというのが現実です。 疲れ果てて会社をやめ、プラプラしてたらいつの間にか海外ノマドワーカーになってました。 海外に多いノマドワーカー ノマドとは、場所に縛られず「遊牧民（ノマド）」のように働く人のことをいいます。PCやスマホ一台で仕事ができるので「デジタルノマド」とも呼ばれます。 ノマドワーカーの気になる職種 海外ノマドで一般的に多い職種は、 投資家 webエンジニア webデザイナー イラストレーター ライター アフェリエイター ブロガー Youtuber インスタグラマー などです。 私の住むセブ島は非常にノマドワーカーが多く、普通に世界各国から来た Youtuber なんかもそこらへんで撮影していることもあります。 フリーランスじゃなくてもノマドワーカーになれるの？ 今日本で会社員してるんだけど、こんな私でも海外でノマドワーカーになれるのかな？ もちろん可能性はなくはありません！！！私も会社に属してますがれっきとしたノマドワーカーです。 さらに私の周りにいるノマドワーカー（予定も含む）の人達にはこんな人達がいます。 日本のIT企業で勤めるエンジニア。奥さんがフィリピン人なのでセブに拠点がある。 日本でフルリモートで働くPM。現在セブ島で働けるよう会社に交渉中。 Web関係だと圧倒的に働く場所に融通がきくので、会社次第でノマドワーカーになれます。しかも給料も固定なので安心して働くことができます。 会社員で海外ノマドワーカーになるのは会社次第 フリーランスノマドワーカーの気になる収入と支出 ではフリーランスであればどうなるのでしょうか？ 自分で仕事をとã

1‚‰ãªã„といけないので収入は不安定になります。 フリーランスは自由？！！そ〜〜〜んな生易しい世界じゃありません！！ フリーランスなりたての頃なんて 少なくとも1ヶ月位は仕事がなく収入0なんて人もザラ です。 さらに家賃、水道代、光熱費と生活費が毎月出ていきます。 海外でフリーランスをするメリット 海外でノマドワーカーになりたい人には国内よりも断然海外、しかも物価が安い東南アジアが有利です。 圧倒的に生活費をおさえることができる 現在の私の生活費です。私が住んでいるのはセブ島ITパークという経済特区の場所の一つです。周りにモールや病院、レストラン、何から何まで揃っています。しかもガードマン付きのコンドミニアムに住んでます。 | 項目 | 費用（日本円に換算） | | -------------- | -------------------- | | 家賃 | 39,680 | | 光熱費 | 3,720 | | 水道代 | 1,240 | | インターネット | 4,955 | | 携帯代 | 1,240 | | 食費など | 32,240 | | 合計 | 83,750 | どうでしょう？悪くない生活ですが、合計で10万円切ります。 フリーランスもノマドワーカー初心者であっても、物価の安い東南アジアであれば 圧倒的にコストを節約 できます。 100万円くらい軍資金があれば、案件が一件も獲得できなくても 半年はなんとか生きていけます。 未経験でもなれるノマドワーカーの職種は？ それでは未経験でもなれるノマドワーカーの職種をご紹介します。 Webライター WebライターはWebサイト上の記事を書く仕事です。 フリーランスにはWebライティングを生業としている方も多く、一番始めやすいです。海外ノマド初心者にもおすすめの職種です。 メリット 参入ハードルが低いので未経験でも始めやすい スキルが上がったら高単価になる 初期投資（お金）がかからない デメリット 初心者のうちは単価が低い 慣れるまでは記事を書くのに時間がかかる Webライターの仕事を得るためにクラウドソーシングの登録は必須です。ライターのお仕事が豊富なクラウドソーシングに登録しておきましょう。 CrowdWorks（クラウドワークス） Bizseek ブロガー＆アフェリエイター ブロガーとは自身の記事で、Google AdSenseなどの収入を得たり、記事内で商品を紹介して売れた分報酬を受け取ります。 アフェリエイターとは、アフィリエイト広告を自分のサイトやブログ、SNSなどで紹介し、そこから商品が売れたときに支払われる成果報酬を広告主から得ている人のことです。 超絶有名なブロガーとしてマナブログのマナブさんもいます。 ブロガー&アフェリエイターは月間100万円以上稼ぐ人もいます。私の知り合いのアフェリエイターの話によると 主婦で年間1000万円以上稼いでいる人もいる そうです。 ブロガー&アフェリエイターで稼ぐとなると、Webライティングよりぐっとハードルが上がります。 メリット 参入ハードルが低いので未経験でも始めやすい スキルが上がったら高額を稼げる 初期投資（お金）がそこまでかからない デメリット 初心者のうちはまーーーーったく稼げない 成果が出るまで相当な忍耐が必要 売る商品の情報収集や深いSEOの知識も必要 ブロガーに興味のある方は、まずライターの仕事をやってみて、余裕が出たら自身のブログを開設して始めることをおすすめします。 一度作ったブログは財産になります。間違えても、アメブロなど外部サービスではじめないでください。先ずはレンタルサーバーを借り、WordPress などでブログを構築しましょう。 そしてエンジニアの私からのアドバイスです。コードが書けない人は自分でWordPressを自分で構築しないほうがいい です。最近の SEO周りの設定は複雑 で、とても素人の知識で構築できる代物ではありません。あなたのお金を稼ぐ大事なブログの土台となるWordPress。ケチらずにテーマを買いましょう。 成果を出したい人は有料のWordPressのテンプレートを買い、レンタルサーバーを借りてブログを始めましょう。 国内最高峰の SEO 最適化 WordPress テーマ 【ザ・トール】 レンタルサーバー エックスサーバー スキル次第で経験が少なくてもノマドワーカーになれる職種は？ 今すぐ海外ノマドワーカーとまではいきませんが、未経験でも自分のスキル次第でノマドワーカーになれる職種をご紹介します。 デザイナー デザイナーは、Webサイトやパンフレットなど印刷物のデザインをする仕事です。 私の周りにもデザイナーのリモートワーカーは国内外問わずたくさんいます。 ある程度経験が無いと仕事を得るのは難しいかもしれません。 しかし、スキルを身につけるためスクールで学んだ後、しばらくしてフリーランスという手もあります。実はこのパターンでうまく仕事を獲得している人もたくさんいます。 メリット オンラインも含めデザインスクールがたくさんあり知識を得やすい ノーコードツールをつかえば1人でも仕事を獲得して納品まで完結できる 印刷物のデザインもできるとWebサイトの案件獲得など、横展開して仕事を得ることができる デメリット たくさんのデザインツールがあり、アップデートのたびに機能が増えるので学習が大変 実績を積むまで大きな仕事を得にくい 納品期間が長くなると報酬を受け取るのが遅くなる プログラマー （ITエンジニア） プログラマー（ITエンジニア）はプログラミングで、WebシステムやWebサイトなどを構築する仕事です。 私の仕事も一種のプログラマーです。Twitterやブログから仕事依頼が来ることもあり、海外ノマドワーカーとの相性が良いです。 私の周りにはスクールに在籍しつつクラウドソーシングで実績を積んでフリーランスになった初心者の方もいます。しかし、このようなケースは稀（まれ）です。 経験ゼロでもやれなã

1ã¯ãªã„ですが、ガッツリ稼ぎたければ経験が必要になります。 メリット 高度なスキルを身につければかなり稼げる 人材不足のため仕事を得やすい デメリット スキルの習得難易度が高い 技術進化の早いので常に学び続ける必要がある まとめ・初心者ノマドワーカーは海外だとコストを抑えてはじめられる！ 今回は海外ノマドでフリーランスをするメリットと、海外でフリーランスができるオススメの仕事を紹介しました。 フリーランスであれば、行きたい国はもちろん自分の好きな働き方ができるので精神的にも安定するのでおすすめです。 自由に生きたい、日本から出て閉塞感から開放されたい。 そんな方は、出費を抑えてフリーランスをはじめられる 東南アジアでの海外ノマド をはじめてみてください。 半年やってダメならやめて、会社員に戻ればいいんです笑 フリーランスでノマドワーカーを始めたい人に、海外ノマド3年の私から海外ノマド生活の感想を伝えておきます。 一言でいうと「心から自由」です。この 自由な生活をもう二度と手放したくない です。 この記事が、皆さんの海外ノマドの第一歩を踏み出すきっかけになれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry445","title":"【寄付】捨てるなんてもったいない！セブ島の子どもたちに洋服を送るプロジェクト始動","date":"2021-03-14","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2021/entry445.webp","description":"フィリピンの子どもたちに日本のおさがりの子ども服（寄付）を届けるプロジェクトを始めます。やろうと思ったきっかけや、私の眼に映るフィリピンの貧困について、そして皆さんへのお願いをつづりました。ご協力をお願いします。","tags":["セブ島ボランティア体験記","子ども服をセブに送るプロジェクト"],"body":"フィリピンの子どもたちに日本のおさがりの子ども服を届けるプロジェクトを始めます。 やろうと思ったきっかけや、私の眼に映るフィリピンの貧困について、そして皆さんへのお願いをつづりました。ご協力をお願いします。 セブ島に洋服を送ろう（寄付）と思ったきっかけ 福岡にあるWeb制作会社・Blue Styleの代表・外谷さんとはECキューブ関連の共通の知り合いがいたことで、知り合いになりました。 去年日本に帰った時、やっと念願のお酒を一緒に飲む事もできました。一緒に楽しく酒を飲めたらどんな人でもだいたい友達ですw 今年に入って（去年の末だったかも）さらにYouTubeがきっかけでメッセージをもらえ、ビジネスの話をさせていただくことになりました。 その際外谷さんのやっておられる、子どものおさがりサービス「Lynks」について詳しく知ることになりました。 「もったいない」気持ちから始まった子ども服のおさがりを着たい人に託すサービス「Lynks」 Lynks 日本人ってまだまだ着ることができても洋服すぐ捨てるんですよね。 セブ島ボランティア体験記でもらったものをすべてリユース、リサイクル、捨てるくらいなら「もったいない」から誰かにあげようという発想で生まれたのがサービスLynksです。 多少のシミ、穴。。。おさがりできない洋服もある。これがまた「もったいない」 ここでも「もったいない」が発生します。 Lynksに届く洋服の中にはまだ着ることができるのに、ちょこっと穴が開いていたりシミがあったりするせいでお下がりできないそうです。 せっかく「もったいない」を減らすために始めたサービスなのに。 外谷さん曰くまとめて回収業者にリサイクルの依頼をするそうです。洋服は布として海外に出ていきます。 セブ島のNGOに引き取ってもらえなã

1„だろうか セブ島にはいくつもの慈善団体があります。たとえば貧困層の子どもの生活や教育を支援している団体です。 せっかくだったらお下がり洋服も行き先がわかるところに届けたい。 だったらセブ島の慈善団体に洋服をセブ島ボランティア体験記したらいいんじゃない？ もし日本でおさがりできなくても、フィリピンの子供達に洋服を着てもらえたらいいなあと思い、調べてみることにしました。 フィリピンがどのくらい貧困なのか 何も知らずに洋服を受け取るわけにはいかないので私もフィリピンの貧困について勉強しました。 フィリピン人の平均年収は約50万円。日当の平均は1300円（2020å¹´ 国家統計局国際労働機関（ILO）参考）。 ビジネス街で働く大卒のフィリピン人でも節約して生活しています。 もちろんみんな貧困なワケではありません。富裕層は高級車を何台も持っていたりと、生活格差が半端ないのも事実です。 私の眼に映るフィリピン この写真は私の家の近くITパークで撮りました。ITパークの薄い壁の向こうにスラム街が隣接しています。 掘っ建て小屋越しにITパークの高層ビルが建ち並んでいます。 とても不釣り合いな風景ですが、こんな風景がセブ島のいたるところにあります。 雨の日には子供達がすっぽんぽんで外に飛び出してきます。彼らの目的は天然のシャワーです。ペットボトルに雨をためて頭にバシャバシャかけてます。 路上でゴミを素手で漁っている人も見かけます。売り物になるものを探しているのでしょう。ジャンクショップでリサイクル品を売るとお金になると元同僚のフィリピン人が言っていました。 路上にもたくさんホームレスがいます。物乞いもそこら中にいます。日本に比べたらそんな人たちの割合は圧倒的に多いです。 最初は怖かったけど今ではすっかり見慣れた風景になってしまいました。 貧困の上をいく最貧困層の存在。お墓に住んでいる人たちもいる 貧困の上をいく最貧困層の人たちはお墓に住んでいるそうです。 私は恥ずかしながら知りませんでした。 1着でも洋服があれば。。。 不勉強すぎたのもありますがとあるNGOの代表の方にヒアリングさせていただきました。 墓地に住む人たちや子供達に服を着せる重要性など色々お話いただきました。 フィリピンにはゴキブリ、ネズミ 、野良犬や野良猫がそこら中にいます。スラム街はとくに多いです。外には害獣や害虫の排泄物がそこら中に転がっています。 下水もないから人間もそこら中で排泄します。 想像を絶するほど不潔です。 スラムの子どもは洋服すら着ていないことがあります。 実際去年、カルボンのウォーターマーケットへ行った時です。 小さい子は下半身裸でした。 子供たちはネズミなどがいる中遊びまわっていました。 伝染病はもちろん、ちょっとした怪我ですら破傷風になる恐れもあります。 洋服を一枚着ているだけで子どもたちの怪我や病気を防げるそうです。 それを聞いて、もし自分の子供だったらと思うと胸が苦しくなりました。 そもそもスラムに住む大人の教育が行き届いていれば洋服を着せる努力をするはずです。けど、きっと同じように育ってそれが当たり前なのでしょう。 個人的な願いですがどの国の子供にも健康や安全が平等に与えられて欲しいです。 大人になるまで健康でいるだけで少しでも貧困から脱却するチャンスもあるかもしれませんし。 できることをやろう 私は恥ずかしながら今までフィリピンに来て一度もボランティア活動に参加したことがありません。 今までは仕事が忙しくてそんな発想も起こりませんでした。 私も人間なので誰かの役には立ちたい。 とはいえ正直言いますが、他のボランティアやってる方たちのようにご飯の炊き出しなど直接的なボランティア活動を定期的にする自信はありません。根性もないです。。 そんな私でも直接できなくても間接的に手伝えることはあります。 1着ã

1§ã‚‚洋服があれば洋服や怪我から子供たちを守ることができるんだって知った時、絶対届けたいと思いました。 私にもできるから。 どの国でも子どもは宝です。生まれた場所や環境は選べませんが少しでも平等や優しさが世界にあったら。。。 少しでも子どもの健康を守れるなら本望です。 私たちがセブと日本をつなぎます。ご協力お願いします 私たちができることはセブ島と日本をつなぐことくらいです。 ということで、送料のセブ島ボランティア体験記を募ることにしました。 負担にならないよう「1口:1,000円」でお願いすることにしました。 個人・企業どちらでもお申し込み可能です。 14,000円で50kg程度の洋服を送れます。到着まで3か月くらいかかりますが。 セブ島にいる私たちがつなぐのでどうか少しだけ協力してください。 セブ島ボランティア体験記していただいた方へのお礼 LynksのHP内にて活動報告としてお名前を掲載します。 またこのブログや、「かみーゆちゃんねる」などで露出します。 申し込みはGoogleフォームからとなります。お申し込みに際していくつか注意点がありますので、詳細はこちらのスライドをご覧ください。 さいごに 「子どもたちの健康を少しでも守りたい」。そんな気持ちでこの活動を始めました。 「1着でも洋服があれば、子供たちの健康が守れる。どの国の子供にも健康や安全が平等にあって欲しい。」と気持ちがブレないようお洋服をNGOに届けますのでどうぞ応援よろしくお願いします。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry444","title":"【ブログ・SEO対策】リライト記事の選び方","date":"2021-03-13","modifiedDate":"2022-06-23","category":"seo","categoryName":"SEO対策・デジタルマーケ","ogImage":"/thumbnail/2021/entry444.webp","description":"なぜSEO対策にリライトが効果的なのか？何を基準にどの記事をリライトしたらいいのか？なんとなくリライトをするのは卒業したい。データを元に根拠あるリライト方法のご紹介。","tags":["Web解析","SEOライティング","データポータル(旧Looker Studio)"],"body":"なんとなくブログのリライトをするのは卒業したい。データを元に根拠あるリライトがしたいですよね？ そこでデータを生かしたリライト記事の選定とフェーズごとのリライトの仕方をご紹介します。 ブログを始めてPVが伸び悩んでる初心者の方、何を基準にどの記事をリライトしたらいいかわからない人でも何を基準にリライトすればいいか解説しています。 この記事は2022å¹´6月に大幅にリライトしました。 なぜ、SEO対策にリライトが効果的か リライトがSEO対策に効果的な理由は、0から80点を取るより30点から80点のレベルにする方がカンタン！だからです ブログは一から書くのはしんどい 一度書いた記事ならGoogle アナリティクスやサーチコンソールでのデータ分析可能 改善すべきが点を発見しやすく、新たに記事を書くよりも格段に労力もかかりません。 もちろんリライトするためにはすでに書いた記事があることが前提条件です。 ブログを始めて3か月以上経ちGoogle アナリティクスやサーチコンソールのデータがある程度溜まっている PVが伸び悩んでるけど、どうしていいかわからない 何を基準にリライトしたらいいかわからない ちなみに新規で記事書いてオーガニックサーチから安定して流入されるまで、私の肌感では3か月ぐらいかかります。 具体的なリライトする記事の選び方 リライト記事を選びます。 リライトの基準は記事の成長フェーズごとに決め、直感に頼らず、データで判断します。 私はデータポータルでGoogle アナリティクスやサーチコンソールのデータを統合して記事のçŠ

1¶æ…‹ã”とにどんなリライトが必要か分類しています。 データポータルの使い方はこちらで紹介しています。 もちろん、無理にデータポータルを使わなくてもGoogle アナリティクスやサーチコンソールにアクセスさえできればリライトは可能です。 記事ごとの成長フェーズを知り、分類する リライトする記事を選ぶためには、データを元に記事ごとの成長フェーズを見極めます。どの記事もスピードは違えど、一般的には段階を踏んで伸びていきます。 この銀ねこアトリエでのフェーズごとのチェック項目と目安です。 | フェーズ | チェック箇所 | 目安 | ツール | | ---------- | ------------------ | ------------ | ---------------- | | フェーズ１ | インプレッション数 | 月間100以下 | サーチコンソール | | フェーズ２ | 順位 | 平均20位以下 | サーチコンソール | | フェーズ３ | クリック率 | 平均3%以下 | サーチコンソール | | フェーズ４ | 直帰率/滞在時間 | 90%以上/0秒 | アナリティクス | フェーズ2、3を中心に行うと負担が少ないです。 もちろん、サイトごとにユーザーや特性が違うので目安は変えたほうがいいです。 インプレッション数とは？ 検索キーワードで表示された回数。順位が低くてユーザーに見られなくても１回と数えられる 検索されて上位に浮上し、クリックされないことには、記事は読まれることがありません。 読まれない記事は存在していないのと一緒！ なので一番最初のフェーズは なんとしてでもインプレッション数を上げること です。 フェーズ1をクリアしたら記事の成長段階に応じてリライト方法を変えます。 フェーズ1.インプレッション数を上げるためのリライト サーチコンソールで一番インプレッション数の多いキーワードを２、３個ピックアップし、キーワードに沿ってリライト 大抵の記事はこちらのグラフのように公開後、徐々にインプレッション数が上がっていきます。 上がってこない場合は、インプレッション数を上げるためのリライトをします。 目安：公開1ヶ月から3ヶ月後に月平均100以上行かない場合 以前SNSシェアで反響があったり、周囲から評判の良かった記事も対象にします。 キーワードプランナーで月間の検索ボリュームを確認 一番インプレッション数の多いキーワードと記事の内容がキーワードに沿っているか確認 ※ 検索ボリュームがそもそも少ない場合は、リライトする意味がない場合があります。インプレッション数が少なくてもキーワードに沿った記事でクリック率が高いようであれば放置しておきます。 もしここで狙っていないキーワードが多くある場合は、狙っていないキーワードを取り除くなどする必要があります。 このリライトがうまく行けばインプレッション数だけでなく、順位もクリック率も上がります。 フェーズ2.順位を上げるためにキーワードの質を高めるリライト インプレッション数があるのに流入がない記事をリライト インプレッション数はある程度あるのに順位が低い場合はクリック率が上がりません。 目安：20位以下でインプレッション数が200以上 以下画像を見てください。月200以上インプレッション数があるのに順位は46位です。 検索結果の1ページに表示されるのは10位までです。この場合、その記事にたどり着くためには4ページ遷移する必要があります。 ページ遷移するのは面倒ですよね？このままだと記事を見てもらえません たいてい20位ぐらいまでã

1§ã‚れば見られる可能性がありますが、どんなにインプレッション数があっても順位が低いとユーザーの目に触れることは稀（まれ）です。 サーチコンソールで一番インプレッション数の多いキーワードを中心に使ってリライトします。 具体的にはページ上部にできるだけ、狙いたいキーワードを増やします。もちろん不自然にならないように気をつけます。 主に見直す場所です。 タイトル メタディスクリプション 冒頭の文章 各見出し 順位が上がってくると、たいていインプレッション数も上がります。しかもガツンと！ フェーズ3.順位は上がったのにクリック率が低い 同じキーワードの他の記事上位20位と見比べ、「タイトル」と「メタディスクリプション」この2つを中心に見直しつつリライト サーチコンソールで順位が上がったのにクリック率があまり上がらない場合は、単純に「タイトル」と「メタディスクリプション」が他の記事に比べて魅力的じゃない ということになります。 フェーズ3を脱却できれば、かなり安定的にPVを稼ぐ記事になります。 目安：500以上のインプレッション数で20位以上なのにクリック率が3％以下の記事 とにかく検索キーワードを目立たせるためにタイトルは【】（大括弧）などを使って装飾を入れる程度に書き換えます。書き換えすぎると逆に順位が落ちてしまう場合があります。特にキーワードを残すように気をつけます。 ディスクリプションやタイトルはGoogleが勝手に書き換えることもあるので、実際に検索してどんなメタディスクリプションになっているか確認します。 ページ内の変なフレーズ等拾っている場合があれば、部分を書き直す必要があります。 月1000インプレッションの記事が3％から5％に上がるとPV30から50にUPします。100記事改善すれば2000PV増です。 フェーズ4.直帰率が高く滞在時間が低い フェーズ3をクリアしている記事のリライトです。 直帰率の高いの記事の冒頭の文章、サムネイル画像を見直す ユーザーの直帰率が高い場合、考えられるのは 検索内容と記事の内容が思ったものと違った と考えられます。 目安：離脱率90%以上で滞在時間10秒以下 ページを訪問した瞬間一番最初に目に飛び込んでくるのはサムネイル画像です。記事と沿ってないサムネイルの場合は作り直します。 そして、冒頭の文章がちゃんとユーザーに刺さる内容なのか読み直します。他の同じキーワードの記事とも比較します。 必要があれば、Clarity（Microsoft社の提供するヒートマップ解析ツール）などでどの程度スクロールされているか確認します。 見られてない記事はもったいぶらずに削除もしくは「noindex」処理 長い間インプレッション数0、クリック率0、PV10以下の記事は思い切って削除します。 もしくは head タグ内に検索エンジンにクロールされないように処理（noindex）してしてしまいます。 事例の紹介 データを生かしたリライトでどのように数値が変わったか、2つの事例をご紹介します。 検索キーワードで上位の記事のリライト こちらは3年前に書いてがっつりリライトした記事の例です。 この記事を選んだ理由は、サーチコンソールの検索キーワードで上位に浮上していたからです。悲しいかなPVは月30くらいでした。 フェーズ3と4を中心に行いました。 タイトルとディスクリプションの変更 他の競合類似記事と比較 サムネの変更 導入文をとくに力を入れてリライト 改善前と改善å¾

1Œã®3か月ごとの表示回数と流入を比較です。クリック率は2倍以上とわかりやすく改善しています。 それまで30前後だったPVが月間200まで成長しました。 オレンジはリライト前のPVです。 現在は月間PV300超えるまでになりました。 リライトでクリック率は10倍以上に上昇 ちなみに、こちらは先月5月にフェーズ２に沿ってリライトした記事です。 インプレッション数はそこそこ取れているのに、順位が低いのでクリックされていなかった記事です。 サーチコンソールで一番インプレッション数の多いキーワードを中心に使ってリライトします。 具体的にはページ上部にできるだけ、狙いたいキーワードを増やしました。 タイトル メタディスクリプション 冒頭の文章 各見出し 全体の大きなリライトはしてませんが、効果はしっかり出ています。 たったそれだけで順位が20位以上UP、クリック率は10倍以上に上昇しました！ おまけ・毎日ブログ書く必要性は？ 私の友人でクライアントでもある方のお話です。 ブログのコンサルタントに毎日ブログを書くように言われ、3年近く毎日記事を書いていました。 正直PVの伸びも悪いと思ってましたが、私が下手に口を出すのも、、、と躊躇していました。 毎日書いてたったこれだけのPV。。意味ある？ 労力に対してのリターンを感じなかったので思い切って「辞めましょう。しばらくはコンテンツの見直しに力を入れましょう」と伝えました。 よくよく話を聞くと毎日書くのが苦痛だったそうです。 疲弊してコンテンツの質が落ちてしまうくらいなら評価も下がるだけなのでやめましょう。 私も思い切って言って良かったと思いました。 補足・ブログを毎日書くのがいい時期もある ライティングスキルがないうちはブログを毎日書くことでレベルアップします。 むしろどんどん記事を書いて欲しいです。要はPDCAを回すことが大切です。 まとめ・リライトはSEO対策でとても有効的 リライト方法とリライトの基準についてお伝えしました。 データを元にリライトの基準を決めれば、さほど大変ではないです。 記事の成長過程を知る フェーズごとにリライト方法を変える せっかく時間をかけて書いたのだから書いて終わりにするのはもったいないですよね。 この記事がブログ初心者のSEO対策の一助となりますように。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry443","title":"エンジニア ロード マップ｜プログラマー未経験 30 代からプログラミング 写経・模写で転職する方法","date":"2021-03-10","modifiedDate":"2026-07-11","category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2021/entry443.webp","description":"Webエンジニア・クリエイターになるロードマップ。私自身も30過ぎて転職し、プログラマーになりました。通常の学習プラスアルファでやることで成果が出ます。もちろん、キツイです。エンジニア舐めてはダメです。本気でWebクリエイターになりたい方のみ参考にしてください。","tags":["キャリアアップ・転職","駆け出しエンジニア"],"body":"30代からでも人生はやり直せるのだろうか？ はい、やり直せます。いつだって今が一番のチャンスです！ 本気でWeb業界へ進み、プログラマーやエンジニアとして新しい人生を切り開きたい方向けに書き下ろしました。 私自身も30を過ぎてから未経験でこの世界に飛び込み、スキルを磨いて転職を果たしました。その後は職業訓練校や企業でエンジニア講師を務め、数多くの受講生がチャンスを掴んでいく姿を見てきました。現在はさらに視野を広げ、フィリピンのセブ島でWeb開発企業を立ち上げて経営しています。 この記事でわかること 30代未経験から一歩抜け出すためのロードマップ プログラミングの写経と模写を圧倒的な成果に変える方法 採用担当者の心を動かす等身大のポートフォリオ戦略 30代の未経験からでも本当に間に合うだろうか？ 不安になるのは当然です。自分の行きたい方向性を見定め、通常のカリキュラムに一工夫の努力をプラスすれば、未経験からでも望むキャリアを手に入れることができます。 この記事は、私が講師時代にたくさんの転職成功者を生み出してきた本気で綴った「 エンジニア ロード マップ 」です。 本気でWebクリエイターになりたいという強い決意を持ったあなたのために、現場のリアルな生存戦略をすべて書き残しました。新しい一歩を踏み出す勇気として、ぜひ最後まで読んでみてください。 30代未経験から超えるべき「6つの壁」とエンジニア ロード マップの設計思想 私がエンジニア講師の時によく紹介していた、6つの壁についてご紹介します。この考えをもとにロードマップを作りました。 初学者はまず「知らない」の状態からスタートします。独学、スクール、なんの媒体で勉強するにせよみã

1ªä¸€ç·’です。 ご覧の通り、知識の壁を超えた後のほうが長いです。リスタートであれば、すでに就職している人に比べてスタート時点で「気づき」や「技術」でハンデがあります。 なので通常の学習とは別にできるだけ多くの壁を越えておきます。 30代未経験から現場で通用するエンジニア ロード マップの全5ステップ 私の体験談をもとにロードマップを提案します。 1. プログラミング 写経でコードとツールに慣れる 2. 優良サイトのプログラミング 模写で基礎力をつける 3. コミュニティなどで人脈づくり 4. 小さな案件やプロジェクトで実践を積む 5. 自分らしさを出すポートフォリオづくり 最初の1か月はとにもかくも基礎力をつけます。スキルを習得しやすい状態を作ることが大事です。 ステップごとに細かく紹介します。 ※ あくまで自主的なステップです。スクールに通うことやオンライン教材、そちらとは別メニューと考えてください。 STEP1. 最初の1か月は脳死でいいからとにかくプログラミング 写経を続けろ 最初の頃は慣れないローマ字でのタイピングでミスタイプが連発します。HTMLのレイアウトは崩れる、JavaScriptではエラーでいつもコンソールが赤い。理由がわからずこの世の終わりのように悩む。あとあと見てみると大したミスじゃないじゃん！？ 自己嫌悪に陥りますよね？ 仕方ないんです。どんなにタイピングが得意でも日本人だとR・Lの綴り間違いなどしょうもないミス大連発です。 それが普通。自己嫌悪に陥る必要ありません。だって慣れないことやってるんですから。落ち込むだけ感情のムダです。 初学者で毎回ミスを悩んでる人は「なんで私こんなしょうもないミスしたんだろう」っていう感情を捨ててください。 最初の1か月はとにかく頭で考えるより、体に叩き込んでください。 書いているうちに体が慣れます。プログラマーやコーダー目指す方は、タイピングスキルとツールの使い方だけは可能な限り「習慣の壁」まで到達してください。 何も考えなã

1ã¦ã‚‚できる状態です。 ちなみに私は教材3回やりました。教材にあったHTMLとCSSのタグは大抵覚えることができました。 そして大事なのはツールを使いこなすことで主にはショートカットを覚えること。 頭で考えなくてもコードが書けるレベルになるまでやりましょう。 STEP2. 未経験のオリジナル作品は黒歴史！良質なサイトのプログラミング 模写で学べ この段階ではまだ好きにコーディングするのではなく、Webサイトを模写することをオススメします。 先に言っておきますが模写ってあまり面白くないです。でも確実に力がつくのでやったほうがいいです。 昔の私はこの時点で調子に乗って模写をすっ飛ばし、オリジナリティー溢れるクソダサいポートフォリオを作りました。 自分の中では精一杯作りましたが、自己満でダサいので見事に最初の面接落ちました。 企業にとってあなた基準の 努力の結晶 なんて必要ないんです。 業界スタンダードな能力を持った人材が欲しいんです。 Web上には業界スタンダード以上の教材がゴロゴロ転がっています。そんな素晴らしいサイトのコーディングの仕方を真似しなくてどうするんですか？ とはいえ、慣れないうちは1サイトをまるっとコーディングするのは大変です。 最初から1サイト丸っと模写したら、そこで心が折れます。 なので見出しとかボタンなどパーツから真似してみるのをオススメします。 この段階ではたくさんの「気づき」を得てください。 STEP3. 業界の人脈の輪を広げろ 勉強中の頃から人脈を増やしておきましょう。IT業界の人って勉強大好きなので勉強会のコミュニティに入ることをオススメします。 分からなくても自信がなくてもいいんです。先輩と仲良くなっておきましょう。 勉強中だから分からなくて当たり前とわりきりましょう。 コミュニティで顔を知っておいてもらったら、いざ困った時技術面や就職などで相談に乗ってもらえることがあります。 結果的にメンターになってくれていた、とか。 ちなみに、勉強中だからと言って バカにされたくない なんて思ってませんか？ 私もやらかしたことありますが、謙虚じゃない姿勢はダメです。安いプライドは捨てましょう。 だからといって、頼りっぱなしは NG です。 将来あなたが助けてもらった分誰かにそれくらいしてあげる気持ちで臨んでください。 STEP4. なんでもいいから案件やプロジェクトをやって経験を積め 私のかつての生徒さんたちはクラウドソーシングで安くても案件をやって実績を積んでいました。 スクール生などは圧倒的に実務経験が足りません。 プログラミングって勉強しているうちも大変だと思っているでしょうが、実務でやる方がもっと大変です。 実務を積むのにクラウドソーシングがオススメです。 でも、武者修行にはうってつけ です。 ぶっちゃけクラウドソーシングの案件、価格は酷いもんです。たまに プロを舐めてるのか？ って言いたくなります。 デザインできるのであればバナー作成などもオススメです。 私も昔駆け出しの頃カラーミーの組み込みを3万円でやったことがあります。 今だから言えますが、結構ヤバイものを納品してしまいましたw 一人での実案件が不安なら、STEP3で広げた先輩に相談して案件に混ぜてもらうなどもありです。勉強会に参加しているようなエンジニアなどであれば、自主的にサービスを開発している可能性もあります。 イメージスライダーの実装など、一部だけ担当させてもらえばいいんです。 安くてもタダでも実際の経験をやっていることが大事です。 明日の自分の価値を高めるために自分の時間を投資してください。 STEP5. ポートフォリオには人柄をぶつけろ。絶対周りと同じテンプレで作るな スクール生でやりがちなのは学校が用意したテンプレを使ってWebサイトを作る。 これ絶対やっちゃいけませんね。 採用側もバカじゃありません。「似たようなのが来た。ã

1¾ãŸã‹ãƒ¼ã€ã£ã¦æ€ã‚ã‚Œã¡ã‚ƒã„ます。 知恵を絞って、オリジナルで作ってください。ポートフォリオは可能性や実力を見るもの。 ではどんなポートフォリオがオススメかというと、私の担当した30歳すぎた生徒さんのケースをお話します。 就職したい会社の理念や傾向を徹底的に調べていました。対象の会社の考えを汲んだ上、自分の思いや熱意をメインビジュアル付近に持ってきたあと、作品を最後の方に持ってきてました。 ポートフォリオは実力だけじゃなく可能性も見ます。 職業訓練校やスクールのポートフォリオに載ってる作品なんて「テンプレート化」してるからみんな似たようなもの。多少他人よりもうまく作れてると自分で思っていてもプロから見ればみんな一緒です。 私がもし採用担当者であれば「またこんなのきたー」って流し見して終わり。 差をつける方法はあなたという「人」を前面に出すしかありません。 「人の想い」ほど人を動かすものはありません。 採用するのも「人」。「この人と一緒に働きたいか」というのをみているはずです。 おまけ・ 本気で就職したいなら会社見つけて自分で自分を売りこめ さらにハードルあげます。 私の知り合いの地元Web制作会社の役員さんが言ってました。 「本気で就職したいならその会社のサイトに問い合わせしてほしい」 完全同意です。 なぜ転職エージェントにすべてを頼るのでしょうか？ え？他人まかせ？自分の将来がかかってるんですよ？ 企業にとって「人を雇う」って投資と一緒ですよ。 あなたの将来がその会社のためになる可能性があるから雇うんですよね？ 本気でこの会社の戦力になりたいならそのくらい売り込んでいってもいいんです。 企業は人の可能性をみてますから。 体当たりした結果、「即戦力じゃないからいらない」って言われることもあります。 そういう会社はぶっちゃけ人を育てる体力のないかもです。たとえ運良く滑り込めても、忙しくてすり減って終わる可能性もあり、駆け出しさんにとって不幸になる可能性もあります。 まとめ 私の考える4か月のロードマップのサンプルを紹介しました。 余談ですが、なんでこんな記事を書こうと思ったかというと…。 先日Twitterで駆け出しさんのこんなTweetを見つけました（プライバシーの関係で貼りません）。 プログラマーになりたい理由です。 ITリテラシーがつく Macを持って仕事できる 私服で過ごせる その職種についたらなんとなくかっこいいというだけでなるのは大変危険ですよー笑。 それに対しての私の意見。 ほとんどのIT業界の人はWindowsだし、IT土方（どかた）ていうくらいキツイこともあります。 ぶっちゃけ甘い考えではエンジニアにはなれませんが、諦める必要はありません。 私だけではなく、今までエンジニア講師時代に出会ったたくさんの生徒さんを考察して「こうしたほうがいい」を取り入れて考えたロードマップです。 人によって飛ばしていいことや、もっとやったほうがいいこともあります。 決して楽しいとは言えないし、序盤はとてもキツイです。 でも、たった数ヶ月続けて人生が変わるのであればやる価値はあると思いませんか？ そして、エンジニアになった後のビジョンも持っておくといいです。 私は持っていなかったので、ぶっちゃけ 10年以上経った今も勉強し続ける なんてその時は微塵も気づきませんでした。 今では勉強も楽しくできるようになりましたが、なった後にどんなことが起こるかも覚悟を持ってWebクリエーターなどを目指すことをオススメします。 この記事がエンジニアなどのWebクリエーターを目指す方の一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":false},{"slug":"entry442","title":"Aceエディター（ace.js）の使い方まとめ！CDN導入から設定オプション・フォーム連携まで解説","date":"2021-03-07","modifiedDate":"2026-06-22","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry442.webp","description":"管理画面のテキストエリアを高機能化するJS製ライブラリ「Ace Editor」の使い方を解説。5年前の記事を2026年の最新環境に合わせ全面リライト！jQueryを排除したVanilla JSの記述で、フォーム同期やリサイズ追従など実務で即戦力となる逆引きコードを網羅しました。","tags":["JavaScript"],"body":"Webサイトの管理画面改修などで、テキストエリアを使いやすく高機能化できるのがJavaScript製ライブラリ「Ace（Ace Editor）」です。 この記事は5年前の内容をベースにしていますが、2026年現在のモダンな開発環境に合わせて全面リライトしました。 当時主流だったjQuery依存を完全に排除し、素のJavaScript（Vanilla JS）のみで動く最新の安定版（v1.32.x系）に対応した記述へアップデートしています。 基本手順から、「フォーム同期」「文字挿入」「リサイズ追従」など、実務で即使える逆引きコード付きで解説します。参考になれば幸いです！ JavaScript製コードエディタ「Ace（Ace Editor）」とは？ お仕事でCMSなどの管理画面を構築、または改修するとき、「デフォルトのテキストエリア（textarea）だとコードが書きづらい」という課題によく直面します。そんなときに、ブラウザ上の入力欄を数行のコードできわめて高機能なコードエディタに変えてくれるJavaScript製ライブラリが「Ace（Ace Editor）」です。 公式サイト（GitHub）では以下のように定義されています。 Ace is an embeddable code editor written in JavaScript. （AceはJavaScriptで書かれた、Webサイトに埋め込み可能なコードエディターです） 開発環境でお馴染みのVS Code（Monaco Editor）などに比べるとモダンな多機能さでは一歩譲りますが、Aceの最大の強みは「 圧倒的な軽さと、CDN1行でサクッと動く組み込みの容易さ 」にあります。 コードを綺麗に「表示（ハイライト）」するためのライブラリではなく、ユーザーがその場でコードを「編集・入力」するための画面を作るのに、現在も手堅い選択肢として重宝されています。 なお、Ace Editor自体はサードパーティのライブラリに一切依存していないため、完全に素のJavaScript（Vanilla JS）のみで記述・制御が可能です。この記事で紹介するカスタマイズコードも、すべてjQueryを使わないバニラJSのモダンな書き方に統一しているため、あらゆる開発環境へそのままスムーズに導入できます。 めっちゃ高機能です。主には以下のような特徴があります。 特徴 110以上の言語をサポート 20以上のテーマ 膨大な行でも大丈夫（100万行以下） 正規表現で置換や検索が使える リアルタイムでチェック可能 (現在JavaScript/CoffeeScript/CSS/XQuery) Ace Editor（ace.js）の基本的な使い方とCDN導入 それでは、実際にWebサイトへAce Editorを組み込む手順を解説します。今回は、サーバーにファイルをダウンロードすることなく、1行で手軽に導入できる「cdnjs」のCDNライブラリを使用します。 実装するエディターの要件は、以下の通りシンプルな3ステップです。 1. エディターを適用するHTML要素（ID「editor」）を用意する 2. テーマに「Monokai（モノカイ）」を指定する 3. 構文ハイライトの言語モードを「JavaScript」に設定する （※ここに2つ目のコードブロックが入る） わずか数行の記述だけで、Webサイト上にあっという間にコードエディタ環境を構築できます。 実際にエディター内へテキスト（JavaScript）を入力してみると、設定した言語モード（mode）に合わせて、構文ハイライトがリアルタイムできれいに適用されるのが分かります。 さらに、エディター上で「Cmd + F」（Windowsの場合は「Ctrl + F」）を押すと、標準機能として高機能な検索・置換バーが立ã

1¡ä¸ŠãŒã‚Šã¾ã™ã€‚ 外部のプラグインなどを追加することなく、これだけの機能がデフォルトで揃っている点が、Ace Editorが今なお重宝される大きな理由です。 主要な設定オプション・メソッド一覧（逆引き） まずは、ID「editor」を指定してエディターのインスタンスを生成（初期化）する基本形です。 Ace Editorでは、インスタンス作成時にまとめてオプションを指定するだけでなく、生成されたオブジェクトに対して各メソッドを実行し、テーマや言語モードを後から個別に追加・変更することも可能です。 なお、Ace Editorで利用できる具体的なテーマの見た目や、各言語のハイライト具合をブラウザ上で実際にテストして確認したい場合は、公式が提供している以下のデモページ（Kitchen Sink）を活用すると便利です。 👉 Ace公式デモページ（Kitchen Sink） ボタンクリックでエディタ内のカーソル位置に文字を挿入する方法 CMSの投稿画面などでよく見かける「ボタンをクリックすると、エディター内のカーソル位置に特定のHTMLタグや定型文を自動挿入する機能」の実装方法です。 実装のロジックは非常にシンプルです。まず editor.selection.getCursor() で現在ユーザーがエディター上で選択しているカーソルの位置（行と列）を取得し、それを editor.session.insert() メソッドの第1引数に渡すことで、狙った位置への正確な文字列の挿入を実現します。 この仕組みを応用すれば、Markdownの入力補助ボタンや、コーディングを効率化するカスタムショートカットボタンなどを自由に量産できるようになります。 Aceエディターの入力内容をtextarea（フォーム）へ同期・転記する Ace Editorは通常のHTMLフォーム（formタグ）ではないため、エディター内の入力内容をそのままサーバー側へ送信（POST）することができません。 そのため実務では、画面上にはAce Editorを表示しつつ、裏側に非表示（display: none;）のテキストエリア（textarea）を用意して、エディターの変更をリアルタイムに同期させる手法が一般的です。 まずはHTMLです。 続いて、JavaScript（Vanilla JS）による連動処理の実装です。初期化時にtextareaの初期値をエディター側に読み込ませ、その後はエディター内のデータ変更を検知（changeイベント）して、裏側のtextareaへ自動的に値を転記・同期させます。 これで、エディター上のコードを書き換えるたびに裏側のテキストエリアへ中身が即座に反映され、通常のフォーム送信と同じ感覚で安全にデータを送信できるようになります。 ボタンクリックによるエディタのサイズ変更（拡大・縮小）と再描画 管理画面のデザインによっては、「ボタンをクリックしてエディターの入力エリアを広くしたい（拡大したい）」という要望が出ることもあります。 しかし、Ace Editorは初期化されたタイミングで要素の幅や高さを取得して内部のキャンバスを描画するため、CSSやJavaScriptで外部から要素のサイズだけを動的に変更しても、エディター自体の描画が自動で追従してくれません。 このようなサイズ変更時の描画崩れを解決するためのHTMLと、JavaScript（Vanilla JS）の実装です。 かつてはエディターのインスタンスを一度 destroy() で完全に破棄してから再構築する力技が必要でしたが、現在のAce Editorには描画領域を強制的に再計算させる editor.resize() メソッドが用意されています。 これを利用すれば、インスタンスを壊すことなく安全かつ数行のコードでサイズ変更に追従させることが可能です。 要素の高さ（height）を切り替えた直後に editor.resize() を実行するのがポイントです。これにより、エディターが新しい高さを検知して内部のコード表示領域をきれいに再描画してくれます。 まとめ：軽量なAce Editorは今なお管理画面の実務で役立つ ブラウザ上の入力欄を一瞬で高機能化してくれるAce Editorの使い方と、実務でよくあるカスタマイズ例を解説しました。 今回紹介したサイズ変更時の描画追従（resize()）や、非表示の textarea とのリアルタイム同期（バニラJS版）さえ押さえておけば、CMSの管理画面や社内ツールの操作性は劇的に向上します。 さらにAce Editorは、設定次第で「Emmet（コード補完）」や「インテリセンス

1（コード示唆）」を有効化させることも可能です。最初はCDN1行の手軽さから始め、プロジェクトの規模や要望に合わせてどこまでもリッチに拡張していけるのが、このライブラリが長年愛され続けている最大の理由と言えます。 CMSのカスタマイズや管理画面のコーディング効率化に悩むフロントエンドエンジニアにとって、この記事が少しでも実装の助けになれば幸いです。 最後までお読みいただきありがとうございました。 ブラウザ上で使えるJavaScript製テキストエディタAce入門","noindex":false},{"slug":"entry441","title":"フィリピン・セブ名物「豚の脳みそ」を煮込むトゥスロブワの実態！レチョンだけではない濃厚なる豚食文化","date":"2021-03-01","modifiedDate":"2026-06-17","category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2021/entry441.webp","description":"フィリピンでレチョン（豚の丸焼き）と並ぶ、セブの名物「トゥスロブワ（Tuslob Buwa）」。豚の脳みそをスパイスで炒める狂気的な料理の味や衛生面のリアルを綴る。※記事に出てくる私が訪れた安心な専門レストランは現在閉店してますが、変わりに最新の安全な実食スポット情報を紹介してます！！","tags":["セブ観光","海外移住"],"body":"フィリピン・セブ島の路上に漂う熱気と、混沌としたローカルフード。旅人や在住者なら一度は胃袋に収めたいと思うはず。 もちろん、入院と隣り合わせの恐怖を抱えながらｗｗｗ セブ初心者はお腹を壊すのが洗礼の儀ですが、それを超える好奇心を刺激するのが、セブ名物のストリートフード「Tuslob Buwa（トゥスロブワ）」です。なんと、豚の脳みそをスパイスとスープでグツグツと煮詰める濃厚ディップ料理。 日本人なら誰もが「 グロいの？ 匂いは？ 」と足がすくむこの料理を、かつてマクタン島に存在した伝説の日本人経営店での体験ベースに徹底解剖します。 当のレストランは現在Closeしていますが、そこで出会った脳みそディップの味と、有精卵「バロット」で記憶を飛ばした夜の熱量は色褪せません。 今現在のセブ島でこの味に安全に挑戦する方法も合わせて解説します。 セブ島マクタンにあった伝説の専門店「Donkatsuレストラン」の記憶 フィリピン・セブ州マクタン島にあるDonkatsuレストランではTuslob Buwa（トゥスロブワ）専門店で、臭みを最大限に減らしたものを食べることができます！ 日本人マクタン島マスターのドンカツさんが、2021å¹´2月21日ご自身のおうち兼職場を改修しレストランとしてオープンしました。 ドンカツさんてどんな人？SNSもチェックしよう！ 牛タンをさばかせたら絶品 ※ 現在、ドンカツさんは日本に帰ってしまいました。 かつてのお店はマクタン島・Maribago（マリバゴ）のセブンーイレブン近くにありました。現在はClose。 セブ島発祥のストリートフード「Tuslob Buwa（トゥスロブワ）」の正体 結論！どこでも食べられます！オススメはITパーク・スグボメルカド内にあるお店。ITパークはローカル地区よりも比較的安全なので、旅行客で一人で行けると思います。 そこら辺の清掃のおじさんに声をかけてチップを払ったら快く作るのを手伝ってくれます。 私たちが行ったのは2月28日。たまたまマクタンエリアで公共の場での飲酒禁止（リカーバン）が解除された日でした。 ビール、ビール！！！！テンション爆上がり！生き返る！ そもそも、セブのストリートフード、Tuslob Buwa（トゥスロブワ）とは？ Tuslob Buwa（トゥスロブワ） とは1980年代に生まれた セブ発祥のストリートフード で、豚の脳みそと薬味（ニンニク・玉ねぎなど）、スパイスなどを専用フライパンで炒め、豚骨スープを加えて煮詰めた料理です。 鍋に煮詰まった汁をディップのようにして Puso（プソ） というココナッツの葉に包んで蒸して作ったもち米に付けて食べます。 1つの鍋を囲って、みんなで食べるのが一般的です。 ぶ、豚の脳みそ？？？グロいの？匂い大丈夫？ 日本人であればそんなことをおそらく思い浮かべるのではないかと思います。 確かに通常我々 日本人には臭みが気になって食べにくい らしいです（中には平気な人もいるかも）。 私は思わず映画「インディー・ジョーンズ/魔宮の伝説」に登場した猿ã

1®è„³ã¿ãã‚·ãƒ£ãƒ¼ãƒ™ãƒƒãƒˆã‚’思い出してしまいました。。。 自国以外の料理って気候、風土や感覚が違うので仕方ないのですが、我々にとって食べ物が臭かったり、味や油分がくどかったりします。 余談ですが、昨年カーボンマーケットで健康を意識してRed Rice（赤米）を購入しました。炊いてみたものの匂いが私には我慢できず断念しました。。。。 健康にいいからといって勧められたRed Rice（赤米）。とくに高血圧に良いらしいですが、そもそも私は低血圧だったとも気づきました。。。。 さておき！！フィリピン人にとっても日本人の気づかない匂いや風習が気になるかもなのでお互い様だということを忘れないでほしいです。 早速 Tuslob Buwa（トゥスロブワ）にチャレンジ Donkatsuレストランの Tuslob Buwa（トゥスロブワ）は たった120ペソでPuso（プソ）が10個も付いてきます。 ※ 当時は2ペソ約1円です。 スープはおかわり自由。めっちゃ安くないですか？ こちらのお味は豚骨醤油ベース。豚の脳みその強い臭みを抑えるためか絶妙にニンニクやスパイスが効いています。 どちらかというとフィリピンではどこでも食すことのできる料理Sisig（シシグ）に味付けが近いそう。 Sisig（シシグ）は醤油ベースで日本人も抵抗ない味だし、もちろんフィリピン人も大好きな料理。 私の感想ですが、DonkatsuレストランのTuslob Buwa（トゥスロブワ）はSisig（シシグ）よりは 油分が少なく、サッパリしたイメージ でした。 グツグツ煮ているうちに鍋の表面に煮詰まった濃厚なスープの塊が溜まってるので、そこにPuso（プソ）をつけて食べます。ウマイ!!! です。 Puso（プソ） はあらかじめ包んである葉っぱごとカットしてありました。 多少ココナッツの葉の香りがしますがPuso（プソ）には味はありません。なので よく煮詰めた濃厚なTuslob Buwa（トゥスロブワ）と相性抜群 です！！ スープの中からはそぼろのようなさっぱりしたひき肉を感じます。 が、 きっとこれが脳みそなんだなー と思うと感慨深かったです。 ちなみに女性へのアドバイスです！！ Puso（プソ）は保存食なので水分少なめに蒸されてます。 サイズの割にはカロリー高めなので（通常のお茶碗1.5 ~ 2杯分くらいのカロリーと予測）食べ過ぎ注意です。 警告ですがフィリピン料理を何も考えずに日本人が食べ続けると太る可能性大です（日本人じゃなくても太りそうだけど）。 せっかくなので、サイドメニューやお酒とともに！ Donkatsuレストランの魅力は何と言っても、サイドメニューやお酒もとてもリーズナブル。 ビールのサãƒ

1³ãƒŸã‚²ãƒ«ãƒ»ãƒ©ã‚¤ãƒˆãŒ70ペソ、サンミゲル・ピルセンが65ペソでした。 ちなみにフィリピンでのビールの平均の値段はモールなどのレストランで80ペソ、バーで100ペソくらいなので 超良心的 です！！ 思わず1人でビール5本も開けちゃいました（写真の時はまだ4本目）。 サイドメニュー・スクイッドロール/30ペソ・3本入り（写真なし） フィリピンではお馴染みのイカ料理・スクイッドロール（イカの練り物のフライ）です。 こちらのソースはスギちゃん監修です（写真撮り忘れたのでソースに関しては次のLumpia（ランピア）で参考にしてください！）。 ちなみにスギちゃんはDonkatsuレストランのヘッドシェフ。日本語が話せます。 ※ スギちゃんの地元の島は水道も電気も通ってないそう。なので地元にとても帰りたくないらしいです。 サイドメニュー・Lumpia（ランピア）/25ペソ・4本入り こちらはドンカツさんオススメのフィリピン風揚げ春巻き・Lumpia（ランピア）です。 中身は冬瓜（とうがん）みたいなやつとニンジンです。 ソースはスクイッドロール同様スギちゃん監修でケチャップにスパイスやハーブを混ぜて少しピリ辛です。美味しかったです！ 悲しいかな、フィリピンではあまりがっつり野菜のローカル料理を見かけることができないです。出会ったらラッキー。ぜひ食べましょう。 南国では同じ野菜でも日本と様子が違う フィリピンは一般的に日本の5倍から7倍の紫外線量があると言われています。フィリピンにももちろん野菜は売っていますが、日本で見かけるものと形や大きさ、皮の硬さが違うものが多いです。 たとえばトマトやピーマンの皮がやたら硬くなるなどあり、フィリピン人は好んで野菜を食べないようです。代わりにフルーツを食べる人が多いようです。 シメ・Batchoy（バッチョイ）というフィリピン風ラーメン/85ペソ Batchoy（バッチョイ） はフィリピン風ラーメン。DonkatsuレストランのBatchoy（バッチョイ）は豚ベースで薬味とチャーシュー、野菜、上に小さく砕いた Chicharron（チチャロン） が乗っかってました。 スライスされた白菜がシャキシャキ！とても美味しかったです！ スーパーでも売っているChicharron（チチャロン）とは？ フィリピンに来たらChicharron（チチャロン）という油で揚げた豚の皮は必食！以前の職場では、同僚がスーパーなどで買ってきておやつ感覚で一緒に食べていました。しょっぱくてパリッとした動物臭のするスナックなイメージです。酒の肴にぴったり！お土産にもオススメ。 この頃にはビールを5本飲み、かつ、はじめてBalut（バロット）の内側を見てしまった衝撃で記憶障害が起こりました。また追記事項があれば加筆します。 おまけ・衝撃のBalut（バロット）との遭遇 Balut（バロット） とはフィリピンの伝統料理で鶏の有精卵を調理したものです。育成具合は16日、18日、20日と選べて、最近20日はあまり売られてないようです。 私は2年近くフィリピンに住んでますが、Balut（バロット）だけは断固拒絶して生きてきました。 補足しておくとフィリピン人ですら若いと食べたこがない人がいるくらいの食材です。 今回Donkatsuレストランに付き合ってくれた友人・占い師マイアさんが Balut（バロット） に以前からちょっぴり興味を持っていた模様。 ヘッドシェフスギちゃん。。。さすが、とても仕事ができる人。 わざわざチャリンコで近くのバロット屋さん（セブ島ではあちこち路上で売られている）まで買いに行ってくれました（ここまでは酔払ってたので多分）。 しかもなぜか大量に。。。。 購入仕立てのBalut（バロット）はホカホカ。殻を割って中のスープを飲んだ後ゆで卵感覚で殻をむきながら食べていきます。 お好みで塩や薬味をつけていただきます（購入時にもらえます！）。 ※ 個人的に耐えかねたので軽くモザイクをかけさえていただきました。※ 興味、、、むしろ勇気がある方は、こちらをご覧ください。※ 私が食べ物の見た目を気にして苦手なだけなので、興味のある方はぜひチャレンジしてください。きっと美味しいはずです！！ おかげさまで衝撃的すぎて酔いが覚めました。 私は食べてませんが、スギã

1¡ã‚ƒã‚“もドンカツさんも美味しそうに食べていました。 羽化しかけの雛の羽が歯に挟まるそうなので食後のフロス（糸ようじ系）をお忘れなく。 Donkatsuレストランができたワケ そもそもドンカツさんの所属する会社では元々観光客向けにクルージングのサービスを提供していました。 去年3月からコロナ禍の影響でフィリピンは世界最長のロックダウンに見舞われました。 日本も同じだとは思うのですがとくに旅行・観光業は壊滅的です。 例外なくコロナのダメージで観光客に対する船の仕事はなくなりました。 セブ島って、リゾートのイメージです。セブ島から観光業がなくなったらどれだけのダメージがあるかカンタンに想像できますよね？ 従業員のお給料を作るための手段のひとつとして生まれたのがDonkatsuレストランです。 元々のおうち兼職場を低予算で改築し、レストランとして使えるようにテラスに屋根をつけたり、手洗い場も完備されました！！ 地元の人にとっても違和感なく馴染みの味の料理が味わえ、安心価格のレストランでした。 私たちが行った日も、フィリピン人のお客さんがたくさん来ていました。 私たちも地元の人とのちょっとした交流も楽しめました！！ まとめ：セブ島のディープな豚食文化「トゥスロブワ」に挑戦するということ 日本人にとってカレンデリア（フィリピンの大衆食堂）などでローカルフードを食べるのはわりと敷居が高いもの。 たまに知り合いのフィリピン人にですら衛生面を考慮してローカルフードを食べに行くのを止められます。 とは言え、せっかくフィリピンに来たり暮らしたり、そんな中ローカルフードを食べないとかフィリピンの生活に触れないのは、どんなにお腹が繊細な日本人でも少しもったいないと思うんです。 Donkatsuレストランは日本語の通じるスタッフもいるし治安や衛生面も安心して入れます！ 美味しい料理をごちそう様でした^ ^ ドンカツさん、ヘッドシェフ・スギちゃん、Donkatsuレストランのスタッフの皆さん、めーーっちゃありがとうございました！！ 日本人もぜひ、足を運んでみて欲しいです。 今回も最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry440","title":"初心者コーダーに贈る！超軽量高機能エディターVS Code入門3","date":"2021-02-28","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2018/entry266.webp","description":"コーディング初心者に贈るVS Code完全マニュアル第3弾！拡張機能をフルに生かして難しいことを出来るだけ飛ばしてHTMLやSCSSを書ける環境を作ります。1弾インストールとセッティングは必須、2弾のスニペット、Git連携、ターミナルなどがわかっているとスムーズに理解できるかと思います。サンプルコード付きです！","tags":["VS Code"],"body":"コーディング初心者に贈るVS Code完全マニュアル第3弾！拡張機能をフルに生かして難しいことを出来るだけ飛ばしてHTMLやSCSSを書ける環境を作ります。1弾インストールとセッティングは必須、2弾のスニペット、Git連携、ターミナルなどがわかっているとスムーズに理解できるかと思います。サンプルコード付きです！ この記事のゴール：VS Codeの拡張機能などを駆使してさらに便利にコードを書く この記事ではサンプルをクローン、もしくはダウンロードしてVS Codeの各機能が使えるように練習できます。 第1弾のVS Codeがインストールされていることは必須、セッティングや拡張機能なども理解しておくとスムーズです。 スニペットに関しては第2弾に詳しく書いてあります。 エディターの機能をフル活用しながらHTMLコードを書く 早速ですが、HTMLコーディングをしましょう。 テキトーにサイトを作ってみます。皆さんも一緒にやってみましょう！！ 以下からファイルをクローンできます。VS Code入é

1–€2を参考にやってみましょう！ Emmetでサクッとhtmlテンプレを追加 index.htmlをコーディングします。 ファイルを開いたら拡張機能Live Serverを起動しておきましょう！ファイルを更新するたびにブラウザも更新され、リロードする必要がなくなります。これだけでも相当時短できます。 VS Code入門2で作成した、HTMLテンプレのスニペットを追加します。 展開コードはこちら。気持ちいいくらい秒殺です。 ちなみにEmmetのチートシートはこちら。 header追加 headerにサイトタイトルとメニューを追加します。 展開後はこちら。 メニューも追加します。 ここではEmmetだけではなく、拡張機能htmltagwrapと短形選択を使ってみてください。 FEATURE NEWS CONTACT LOCATION ナビゲーションを展開して、中に上のテキストコピペします。 短形選択で全行選択します。 最初の行の先頭にカーソルが当たった状態で「Shift+Option（Win:Shift+Alt）」押しながら選択したいところまで下矢印を押します。 htmltagwrapは選択した箇所を特定のタグでラップできます。Shift+Cmd+矢印で「Option+W」で各選択箇所がpタグで囲まれるので、aタグに書き換えます。 さらに同じ要領で、liタグで囲みます。 VS Codeの拡張機能と短形選択と使おう！のんびりコーディングしても、グロナビ追加30秒でした。#駆け出しエンジニアと繋がりたい pic.twitter.com/THVoaZAIJG— かみーゆ@セブ島呑んだくれフロントエンジニア (@LirioY) March 7, 2021 最後にulタグで全体を囲んだら完成。 htmltagwrap を使うときの注意点です。入力モードが英数になっていることを確認の上やらないと記号Σ（シグマ）が入力されてしまいます。 main追加 mainタグを追加します。 展開後。 さらにキービジュアルを追加しましょう。 キービジュアルはウィンドウ幅（スマホ・PC）に応じて画像の切り替えをしています。 pictureタグを使用したいのですがコードが長い。 なのでスニペットを作っておくと便利です。 スニペットの追加方法はVS Code入門2を参考にしてください。 展開して、パスなどのコードを追加します。残念ながらsourceタグのsrcset属性には拡張機能のPath Intellisenseが効きません。。。 footer追加 フッターを作りましょう！ 3つのタグの入れ子を一気に書きます。 これだけコンボすると気持ちいいです。 行の折りたたみ機能を使おう！ VS Codeは不要なコードを行を折りたたんで隠すことができます。 必要に応じて隠せば、作業したい箇所に集中できます。 Sass（SCSS）でCSSを書く Sassとは「CSSのメタ言語」と呼ばれるもので、CSSをより便利に記述するための言語です。 Sass（SCSS）を使うと、変数を使ってプログラムチックにコードが書けたり、ファイルを分けたりソースコードの管理もカンタンです。 Sass（SCSS）を使えるようにするため、拡張機能Live Sass Compilerをインストールします。 用意してなければ、style.scssファイルをワークスペース直下に追加し、ステータスバーにあるWatch Sassをクリックします。 パーツごとにスタイルを分けて書く！ CSS設計をなんちゃってレベルで取り入れてコーディングしてみようと思います。 scssフォルダにfoundation.scss、layout.scss、_object.scssの3つのファイルを作ります。 style.scssに各ファイルを読み込みます。_（アンダースコア）は不要です。 保存すると、style.cssとstyle.css.mapが作成されます。style.css.mapはGoogleなどの開発者ツールでのデバッグに役立ちます。 foundationにコードを記述 foundationにCSSコードを書きます。ベーシックな共通のCSSはここに書きます。 Googleなどの開発者ツールでのデバッグすると、_foundation.scssの何行目にコードが書いてあることがわかります。 ヘッダー周りをコーディング ヘッダーのレイアウトをコーディングします。_layout.scssに以下を記述します。 _layout.scssに記述するCSSはクラスの接頭辞にl-をつけています。 他のファイルも同様、接頭辞でどのファイルに記述してるかもわかるし、タグがレイアウトなのかオブジェクト（ナビやボタンなどのパーツ）ざっくりとした判断ができます。 headerの高さは_foundation.scssで設定した変数を使います。これでもしやっぱり高さを微調整したいって時に後ほど変更可能です。 ナビも整えます。ネスト（入れ子）が深くなりすぎないようにします。 スッキリしました^ ^ メイン（キー）ビジュアルを整える メイン（キー）ビジュアルは謎のリゾート感を出すためにヘッダーを差し引いてウィンドウいっぱいにします。 footerを追加する footerの追加します。_layout.scssに追記します。 コピーライトの部分は部品ã

1¨è¦‹ãªã™ã®ã§ã‚¹ã‚¿ã‚¤ãƒ«ã‚’_object.scssへ記載します。 ざっくりですがこんな感じに仕上がりました。わーい。 Live Sass Compilerを設定する 設定、setting.jsonから設定を変更できます。 コンパイルの方法や出力先を指定できます。compressedにするとコードをガツンと圧縮できます。 ベンダープレフィックスの指定です。 コンパイル対象外にしたいときはこんな感じ。 test/以下のファイルは対象外にできます。 vscode-live-sass-compilerのドキュメントを参考にするといいかも！！ JavaScriptでスマホ用のナビゲーションに変えてみる JavaScriptも書いてみましょう！ せっかくなのでスマホ用メニューを作ってみましょう。ナビ周りのコードを変更します。 script.jsファイルにボタンをクリックしたらナビとボタンにクラスがつくように調整。 変数とmixinを_foundation.scssに追加します。 上記コードはプロジェクトごとにヘビロテしているので scss用のスニペットも作っておくと便利です。 _object.scssを変更します。 まずはボタンのスタイリング。 ナビゲーションのスタイルを変更します。 ボタンがついてトグルメニューになりました！わーいわーい＼(^o^)／ 💡 長いコード一気に削除したい時の裏ワザ ナビゲーションのようにコードが長くなってしまった時は、VS Codeの機能「行の折りたたみ機能」を使って、行をたたんでまとめて削除すると早いです！ まとめ VS Codeを使えば、Gulpなどを使って複雑なタスクランナーを組まなくても十分にコーディングできます！！ まずはEmmetやCSSを書けるようになりましょう。 CSS設計に興味がある方はこちらを参考にCSS設計 私のためのFLOCSSまとめ 記事が鬼長くなってしまいましたが、この記事が皆さんのコーディングライフの一助となれば幸いです。 今回も最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry437","title":"待ってました！Chrome88 で aspect-ratioプロパティがついにサポート","date":"2021-02-03","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry437.webp","description":"CSS aspect-ratioプロパティがChrome88でサポートされました。今まではCSSを駆使して縦横の比率（アスペクト比）を保ってましたが、不要になる日も間近。早めに使い方を覚えて来るべき日に備えましょう。旧アスペクト比の保ち方も合わせてご紹介します。追記：IEを除く主要ブラウザで実装済。","tags":["CSS"],"body":"CSS aspect-ratioプロパティがサポートされました。今まではCSSを駆使して縦横の比率（アスペクト比）を保ってましたが、不要になる日も間近。早めに使い方を覚えて来るべき日に備えましょう。旧アスペクト比の保ち方も合わせてご紹介します。 追記：IEを除く主要ブラウザで実装済（2021å¹´12月26日）。 美しいものは比率がカギ！！アスペクト比率とは？なぜ比率が重要なの？ アスペクト比とは映像（映画、テレビ、動画）などの縦横比のことをいいます。 この比率の均整の法則が決まっているとものは美しく感じます。 Web制作ではこの画像サイズなどをきちんと揃えるとそれだけで見た目がグッと美しくなります。 比率色々 アスペクト比は黄金比、白銀比などすでに見やすい・美しいと言われる比率があります。 1 : 1.618（約5:8）黄金比紀元前古代ギリシャで発見されて以来、人間がもっとも美しいと感じる比率。名刺、Appleのロゴ、モナ・リザなどがこの黄金比が使われていることで有名。 1 : 1.414（約5:7）白銀比五重塔などの日本建築からハガキやA4,B4用紙など日本人には古くから馴染みã

1®ã‚る比率として使われています。 3 : 2一眼レフからフィルムカメラなどで使われている比率。 4 : 3コンパクトデジカメからパソコンのディスプレイなど。個人的にはよく使うサイズです。 16 : 9デジタルテレビのハイビジョン映像。 余談ですが黄金比を利用して作られる黄金螺旋は自然界に存在するすべてのものがこの比率です。オウムガイなどもそうですね。太古からいろんなデザインに活かされてます。 ちなみに画像のサイズを決める時の計算です。 幅1200pxの縦を4:3で作りたい時は以下のように計算します。 多分記憶するに中学レベルの計算ですが重宝しています。 プロパティaspect-ratioの使い方 さて、本題です。プロパティaspect-ratioを早速使ってみましょう。 ブラウザのサポート状況ですが現在最新のChrome88のみです（後述します）。 使い方は以下の通りです。 たとえば、以下のような画像を4:3に切り抜きたい時はこのように書きます。 aspect-ratioは比率を変えられない、Google Mapのiframeなんかで威力を発揮します。 埋め込みタグのwidthとheightは取っ払います。 CSSで整えるだけ。 計算しなくていいので超楽チンです！！！ おまけ・アスペクト比を保つ旧やり方 今絶賛使ってますが、divなどでラップしてアスペクト比を保つ方法があります。 縦方向のpaddingを%で設定すると横幅から値が算出される特性を生かすやり方です。 ワイドサイズ（16:9）のアスペクト比を保ったマップを埋め込みたい時は、padding-topかpadding-bottomを 56.25% にすればいいわけです。 まとめて書くとコードは以下のようになります。 paddingを使ったアスペクト比のラップの中にiframeを縦横目一杯広げてposition:absoluteで固定すれば完成です。 タグを1個挟まないといけませんし、コードも長くなってイヤですね。。。 けど、今のところこれが一番どのブラウザも対応できる手法です。 まとめ・早く他のブラウザもサポートして 間もなく使用できる次世代のCSSプロパティaspect-retioを紹介しました！ ※ IEを除く主要ブラウザで実装済（2021å¹´12月26日） 私はデザイナーではありませんが、こういう比率にちゃんと気を使ってる人を見ると大好きって思います。美しさ、機能美って結局理論的 だと思うんです。 先人がすでに美しい比率を見つけてるのだから利用すればいいだけですね！ aspect-ratioが他のブラウザでもサポートされたら面倒な計算もしなくてよくなるし、CMSなどの動的サイトで遺憾無く力を発揮しそうです。 この記事がみなさんのコーディングライフの一助となることを願います。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry436","title":"margin block / margin inlineとは？CSSの上下左右を置き換える手順","date":"2021-01-28","modifiedDate":"2026-07-04","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry436.webp","description":"margin-blockやmargin-inlineの使い方、margin-block-startによる余白設定を解説。CSS論理プロパティの仕様を実務のコードに落とし込み、従来の記述を効率的に置き換える現実的な手順をまとめました。","tags":["CSS"],"body":"みなさん、プロパティ margin-block や margin-inline 使ってますか？ CSSの余白指定では、従来の top や left ではなく、方向（軸）ベースで制御する 論理プロパティ がかなり浸透してきました。記述を margin-block や margin-inline を変えるだけで、余白の計算や記述の重複に悩まされることはなくなります。 この記事では、margin-block-start をはじめとする各プロパティの具体的な使い方と、実務での現実的な置き換え手順を解説します。 この記事でわかること margin-block と margin-inline による上下左右の余白設定 margin-block-start を使った先頭側のピンポイントなマージン指定 従来の margin 記述を論理プロパティへスマートに置き換える方法 仕様を一度おさえてしまえば、あらゆる画面設計にブレずに対å¿

1œã§ãã‚‹å¿«é©ãªã‚¹ã‚¿ã‚¤ãƒªãƒ³ã‚°ãŒã§ãã‚‹ã‚ˆã†ã«ãªã‚Šã¾ã™ã€‚ margin-inline を使って要素をたった一行でセンタリングしたい人は、こちらの具体的な実装例も参考にしてください。 わりと難しいのでmarginとpaddingのおさらい まずはmarginとpaddingのおさらいから。 HTMLでは要素に対して内側と外側に余白を持たせることができます。 長年エンジニア講師をやってましたが、初学者の方は大抵ここで混乱してコケます。 なのでかなーり噛み砕いて説明します。 人間と洋服サイズ感に例えてみます。人間がHTML要素だと思ってください。 marginはソーシャルディスタンス？みたいなもの 隣の人とぴったり並んでたら窮屈ですよね。なので少し距離をおきます。 HTMLでは要素と要素の距離をmarginと言います。イラストでは横方向ですが縦方向にももちろん取れます。 marginのおもしろい（もしくはさらに混乱する）ところは縦方向の余白は少ない方の値が相殺されます。 これを折りたたみマージンと言います。ちなみに横方向では相殺されません。 さらに詳しく知りたい方はこちらをお読みください。 ちなみにコロナ禍のフィリピンでは人と人とのmarginは2メートルとやや広めですが、誰一人守ってないです。 折りたたまれてますね。 paddingはお洋服の体に対するサイズ。ぴったりしているか、ゆったりしているか 洋服もぴったりしていると体の線が出て恥ずかしかったり、逆にぶかぶかすぎたら不格好だったりしますよね？ HTMLではpaddingプロパティを使って内側の余白を調整します。 要素のサイズや内包するコンテンツによって調整します。 おまけ・borderは洋服の厚みなど 季節に応じて、洋服の素材や厚みを変えますよね？ HTML要素ではこれがborderやbackgroundに当たります。 レスポンシブ世代のコーディングはpaddingもborderも内側に含めましょう！ 現在、コーディングはレスポンシブが主流です。 paddingもborderも何も設定しなければ外側に設定されます。 それを防ぐために必ずbox-sizingプロパティを使って内側へ含めるようにしておきましょう。 margin-block / margin-inlineとは？CSS論理プロパティの基本 論理プロパティとは使用する言語の種類（英語・アラビア語・日本語など）に関係なく、最小限のスタイルの変更で、Webサイトを制御できます。 今までのmarginやpaddingは物理プロパティといって要素がどう並ぼうが上下左右に値を設定できました。 左など余白をセットしたい場所を指定したら位置が変わることはありません。 margin-block-startの使い方！従来のmargin-topとの違い 理論プロパティでmarginを設定すると要素の書字方向やテキストの向きに応じて物理的な余白に変換されます。 プロパティmargin-blockを使ってみます。余白は要素の先頭と末尾というイメージで設定できます。 上図の通り、文字方向が英語と同じ場合は通常通り上が先頭、下が末尾になります。日本語と同じ場合は右が先頭で左が末尾です。 ショートハンドで記述する際の順番です。 上から下へ並びます。なので余白は要素の上と下にセットされます。 最初はmargin-block-start、最後はmargin-block-endと分けて記述することもできます。 内側の余白を設定したいときはpadding-blockプロパティを使えます。使い方はmargin-blockと一緒です。 上下に余白が発生し、隣接したときは折りたたみマージンが発生します。 margin-inlineを使ってみる プロパティmargin-inlineで論理的なインライン方向の先頭と末尾のマージンを設定できます。 内側の余白を設定したいときはpadding-inlineプロパティを使えます。使い方はmargin-inlineと一緒です。 要素をたった一行でセンタリングできる プロパティmargin-inlineを使うと要素をたった一行でセンタリングできます。 margin-inlineとmargin-blockを使って四方のマージンを設定する 通常のプロパティmargin同様前後左右余白を設定するときのコードを紹介します。 今までの物理プロパティで書くコードとも比較してみましょう。 CSSはコードが長くなりますね。 文字方向を変えてみる では、writing-modeを使って文字方向を変えてみます。 日本語のように文字の方向を右から左にします。 文字の向き（縦書き横書き等）に左右されるので余白の位置が左右・上下変わります。 日本といえば美しい縦書きを実装したい！論理プロパティの使いどころを考えてみた 最近縦書きの実装が増えているので、縦書きでの実装を試してみました。 縦書きでコンテンツをセンタリングする際ブラウザFirefoxでバグがあります（IEはもうバグ対応にすら入れてません）。 ちなみに「margin-block使ったらイケるかなー」と淡い期待を持ってやってみたのã

1§ã™ãŒãƒ€ãƒ¡ã§ã—た。 縦書きサンプル | CodePen ちなみにcaiuseでの実装状況です。 補足しておくと値は以下のように値は指定できます。 おまけ・Firefoxで縦書きを実装 Firefoxで縦書きコンテンツの入った要素をセンタリングするためには、以下のコードで実装しましょう。 もしくは通常の物理プロパティで書くと まとめ：margin block / margin inlineを実務に導入すべき理由 前から気になっていたので今回は理論プロパティ・margi-blockとmargin-inlineについて掘り下げてみました。 まだまだ日本語での資料が少なかったのでとりあえず検証はしてみました。 結論多言語サイトで使えそうだけどまだまだ先かなーってイメージでした。 最後までお読みいただきありがとうございました。 参考 おなじみMDNお合わせて読むと理解が深まると思います。 margin-block | CSS | MDN margin-inline | CSS | MDN padding-block | CSS | MDN padding-inline | CSS | MDN さらに掘り下げて知りたい方はcolisさんのサイトをご覧ください。 CSS知っておくと便利な論理プロパティ、ボックスモデルにおける古い方法とこれからの方法","noindex":false},{"slug":"entry435","title":"URL引数を使ってWordPress MWWPフォームの値を自動入力する","date":"2021-01-24","modifiedDate":"2022-05-24","category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2021/entry435.webp","description":"WordPressのフォームプラグインの鉄板・MWWPにURL引数（パラメータ）を渡してフォームに値を自動入力する機能をつけました。出力されるフォームパーツに属性（readonly）を付与する方法も紹介しています。WordPressをカスタムフィールドやカスタム投稿を軽くカスタマイズしたことがある方ならすんなりわかると思います。","tags":["WordPress"],"body":"WordPressのフォームプラグインの鉄板・MWWPでフォームに（パラメータ）を渡して値を自動入力する機能をつけました。出力されるフォームパーツに属性（readonly）を付与する方法も紹介しています。WordPressをカスタムフィールドやカスタム投稿を軽くカスタマイズしたことがある方ならすんなりわかると思います。 この記事でできること ある程度カスタムフィールドやカスタム投稿の追加の仕方やある程度カスタマイズできることです。 できることは以下です。 カスタム投稿などのタイトルを値としてフォームに自動挿入する セレクトボックスの値を自動で出力する プラグインMW WP Formとは？ MW WP FormはWordPressのフォーム専用プラグインです。お問い合わせ内容をデータベースに保存したり、無料で使えるのに何かと高機能です。 自作したフォームはショートコードを貼るだけで実装できます。 プラグインページMW WP Form 今回はフォームの作り方や実装の仕方は割愛します。 フォームに値を渡す方法はMW WP Formに用意されている 早速フォームに値を渡す方法です。 MW WP FormではURLのパラメーター（引数）を使って値を渡すことができます。 設定項目から、「URL引数を有効にする」へチェックを入れておきます。 チェックを入れてない場合、引数はページ遷移した時に消去されます。 引数は値をそのまま渡せます。 有効にした場合、MW WP FormはURL引数を取得します。また、URL引数 ”post_id” をもとに投稿を取得します。その投稿（$post） のプロパティを使用できるようになります。 例：{ID}、{posttitle}、{postmeta}など… たとえば、遷移前のページ情報を取得したい場合。 MW WP From設定側はこんな感じ。 ここまではググればソッコーでわかりますが、当時私がやりたかったã

1®ã¯ã‚るページのカスタムフィールドなどの値を加工して一部だけ取得するというものです。 習い事などのコース詳細ごとの申し込みフォームを作る ある習い事の膨大な日程表から選んだ日時の予定に申し込みをするという設定を作らなければなりませんでした。 教室は拠点だけで10個前後あり、学べるコースも6種類くらいありました。開催している時間帯が曜日などの数が拠点によってかなり違いました。 教室はカスタム投稿の1投稿として登録すればいいとして、クラス名や時間帯などを1個づつカスタムフィールドに入力するのはクライアント側もしんどいと考えました。 遷移元から値を渡せるようにする なので入力規則を決めて以下のようにdetailという名前のカスタムフィールドへ登録してもらうことにしました。 コース・曜日・時間帯の詳細を|(パイプ)でくぎり、それぞれ改行して入力してもらうようルールを決めました。 今回はdetailというカスタムフィールドに格納します。 カスタムフィールドは自作しても、プラグインAdvanced Custom Fieldsを使ってもいいと思います。 フォームではURL引数にコース詳細の行（何番目か）とIDを渡します。 カスタムフィールドに格納された値はメソッドexplode()を使って配列化します。 explode()は文字列を文字列により分割するメソッド。 PHPマニュアル explode 同じ名前のコースはセルを結合したかったのでちょっとコードが複雑です。 あとは変数$tableに格納された値をhtmlとして出力するだけ。 入会申し込みボタンからそれぞれの教室やコース詳細の引数を遷移先のフォームへ渡せるようになります。 遷移先のフォームに値を渡すコードを書く functions.phpへ受け取ったパラメーターを元にデータを各フォームへ値を渡すコードを書きます。 関数名 + _ + mw-wp-form-xxxでadd_filterを使ってフックさせます。 xxxはフォームのIDです。 ショートコードのkeyの値がそれに当たります。 これでname属性へ値がそのまま渡り、自動で格納されます。 出力されるタグにreadonly属性を追加する もし入力された値を自由に変更されたくなかったら、HTMLのreadonly属性でコントロールしてあげると良いかもです。 readonly属性は、入力コントロールに対する変更を禁止にするための属性です。 一応コードを記載しておきます。テストしていないので、動くかどうかはご自身で確認してください。 MW WP Formでtextareaにreadonly属性を追加する 教室項目のセレクトボックスの値を自動生成し出力する 次にやりたかったのが、セレクトボックスの値を選択項目として自動出力するというものでした。 この場合、教室はclassroomという名前のカスタム投稿を使っていて、投稿タイトルがそのまま教室名になっています。 すべてのカスタム投稿をget_postsで取得し、タイトルを$children配列に格します。schoolというname属性のオームがあった時に格納します。 mwform_choices_mw-wp-form-xxx（xxxはフォームのID）をadd_filterを使ってフックできます。。 フォームに以下のコードを書いて格納完了。 JSでselected属性を付与します。 まとめ ちょっと長くなりましたが、遷移元からURL引数を使って任意の値をフォームに入力できるようにカスタマイズしました。 もう少し、整理して短くかけるとは思いますが、まずは以前書いたまんまをそのまま出します。 この記事が皆さんのWordPressライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false}

1,{"slug":"entry433","title":"セブ島からNew Normalの帰国の仕方教えます（帰国後編）","date":"2021-01-20","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2020/entry422.webp","description":"親愛なる人がフィリピンセブ島から日本に帰還するまでの手記を託してくれました。今回は最終回、「帰国後編」。日本帰国後必要な諸手続きなどを綴ってます。今から成田以外で日本の空港に帰る方、参考にしてください。","tags":["海外移住","ちー帰国"],"body":"親愛なる人がフィリピンセブ島から日本に帰還するまでの手記を託してくれました。 今回は最終回、「帰国後編」。日本帰国後必要な諸手続きなどを綴ってます。今から成田以外で日本の空港に帰る方、参考にしてください。 手記を書いたのは元同僚。ざっくりどんな人かご紹介 この記事は私の元同僚による手記です。 ロックダウンの影響もありフィリピンから航空券購入が大変だったようで、今後日本へ帰る人たちに気をつけて欲しい点などを伝えたいという思いで寄稿いただきました。 ちなみに彼女のパーソナリティです。 自然豊かな日本の中部地方でのびのび育った元教員。オーストラリアに留学したり、働いていたので英語はペラペラ。 ※ プライバシーに配慮してモザイク処理をしてます。 セブでは一緒に買い物したり、昼から一緒に呑んだくれることができる重要な人でした。 1. VISA手続き編 2. 航空券購入 + バランガイ編 3. 渡航編 4. 帰国後編（←イマココ） ここからは託してくれた手記をほぼそのまま掲載します。 日本到着！！！！ 日本にやっと帰れる〜とウキウキでしたが日本はコロナ感染者瀑増中でみんな超神経質になってました。 でも行政の対策はゆるゆるや〜ん。そんなお話です。 日本到着前に機内で用紙の記入を求められます。この用紙を機内で書いておきましょう。 ちなみにフィリピンはもちろん入国制限対象地域です。 ※ ↑面面 ※ ↑裏面 いよいよPCR検査 飛行機から降りたあとはPCR検査を受けます。 検査に必要なものはパスポートと上記の用紙とマニラで取得したQRコードの3つです。 セントレア（中部国際空港）ではとても丁寧に案内されたので、正直ここに書くほどの留意点ははないです。 が、ひねり出すとしたら検査前に帰宅方法や、帰宅後はどこで過ごすかかなどを聞かれるのでそこだけ答えられるようにしておきましょう。 あとは係員の指示にしたがっていけばそのまま検査終わります。さすが日本！ã

1£ã¦æ„Ÿã˜ã®æ‰‹éš›ã§ã—た。 セントレアは唾液を採取するタイプの検査でした。鼻に突っ込むタイプじゃなくてよかった。 試験管みたいな入れ物に2cmくらい唾液をいれます。結果が出るのに1時間かかると言われました。待機場所には掲示板があり、結果のでた番号が表示されていく仕組みです。 PCR検査の待ち時間もNew Normal 待機中に、検査員数人で39番の人を探し始めたので、『え、もしかして陽性者出た?！』と一瞬ざわつきましたが、検査を受けてない人がいたので探してたみたいです。 空港で陽性が発覚する人は一定数いるので、この中に陽性者いるかもしれないのかーとか、私もすでにコロナに感染してるかもしれないんだなーとか、ここで働いてる人たちは毎日そういう人たちと対峙してるのかーとかしみじみNew Normalな世界を感じました。 案内通り1時間後に私の番号が表示されたので、どきどきしながら結果を聞きに行きましたが、結果報告はカウンターで「陰性です」と言われただけでした。あっさりしすぎて拍子抜けです。セントレアは証明書も何ももらいませんでしたが、成田だと結果証明もらえるらしいです。セントレアご利用の人は聞き逃さないように気をつけましょう。 検査結果が終わり、セントレア空港を後に そこからトランクをピックアップして外に出たのは13時ごろでした。飛行機がセントレアに到着してから2時間で自由の身になれました！思ったより早かったです。 でも11月に17時成田着の便で帰国した人は、結果が出るまで7時間かかったと聞きました。私は午前中の便だったから空いてたのかもしれません。 マニラで空港泊したのが報われました！ フェイスシールドは到着ゲートを出て速攻捨てました。日本は着用義務じゃないんで！ 清々しい気持ちになりました。 ゲートを出てからは本当に自由だったのでびっくりしました。 家族の迎えを4時間待っていましたが、その間空港内のレストランもコンビニもどこへでも行けました。 ただ、見回りの警察官に「何してるの？」って3回声をかけられて地味にショックでした。 『大きなトランク2個抱えて座ってるんだから迎えを待ってるように見えませんか⁉』って思いましたが、あちらはそれが仕事ですからね。 全力の愛想笑いで対応しました。 隔離開始！と、その前に 帰国したら、14日以内に自治体に転入届を出さなければいけません。 私は委任状を書いて家族に転入届の手続きをお願いしました。 正当な理由がない場合、期限を過ぎると罰金を課されることもあるそうなので気をつけてください！でもコロナでの自主隔離は正当な理由とみなã

1•ã‚Œã‚‹ã¿ãŸã„です。 参照：新型コロナウイルス感染症の感染拡大の影響及び感染拡大の防止に伴う住民基本台帳事務等の取扱いについて（PDF） あ、ハンコは必ずいるので持っていきましょう。 自治体レベルではハンコ廃止は進んでないそうです。期待してたのに、残念。 いよいよ隔離開始！ 祖母の家が空き家になっていたのでそこで過ごしました。 隣の家と50ｍは離れてる田舎なので誰にも会いませんでした。 庭で1人BBQしたり、川でウクレレ弾いたりできるので隔離は田舎に限ります！ でもめっちゃ寒いです。私は暑い国から寒い国へ行くと風邪を引くタイプなので、暖房器具フル稼働で過ごしました。 今はただの風邪でも大事になるので、とにかく2週間は絶対風邪引かない！をモットーに過ごしました。 隔離中は県の感染症拡大防止班の人から電話があり私の体温と体調を聞かれました。両親が対応しましたが、本人が電話に出なくても深追いされませんでした。その後メールで連絡くださいとお願いしたので、毎日メール連絡が来ました。 厚生労働省からも毎日体調確認の電話がきました。これは自動音声電話だったので、怪しい勧誘の電話だと思ってずっとガチャ切りしてました。でもフォローの電話やメールがくるわけじゃないので厚生労働省の電話だと気づいたのは、隔離10日目。 その電話で、そーいえば登録するとLINEでの体調確認に変更できるってどこかで見たなーと思い出してLINEのアンケートに回答しましたが、次の日も変わらず電話で連絡がきました。遅すぎたかのかもしれません。 参考：厚生労働省からのお願い（PDF） 自主隔離を終えて 日本では空港を出てからの行動は当人の良心に委ねられてます！ 帰国後14日間は外出せず可能な限り人との接触を控えてください。 14日間は公共交通機関を使用しないでください とお願いされますが、強制力もないし、もちろんチェック機能もありません。国からのお願いを聞くか聞かないかはあなたの良心次第です！って感じでした。 正直、いたるところで警察やガードがチェックしていたフィリピンと比べてなんて緩いんだろーと思いました。ニュースでよく聞く「空港での水際対策」がこれなら、対策になってなくないか？っていうのが私の感想です。 人も足りてないし罰則化できない日本ではこれが限界なのかもしれませんが、これは外国人観光客には通じないよなーと思い、未来に一抹の不安を覚えました。 ※ コロナ変異種の流入を防ぐために帰国者向けの対応は厳しくなったと聞いたので状況は変わっているかもしれません。 一方で、民間レベルでは感染者対策は厳しく行っているみたいです。 感染者がでると休業にしなきゃいけない企業もあるので、同居人にPCR検査を受ける人がでたら会社への報告義務を設けていたり、その人の隔離期間や方法も報告する必要があるみたいです。他にも会食禁止、社食でのおしゃべり禁止などルールを設けてるそうです。もちろん企業によりますが。 帰国前、私の隔離場所や方法について家族からいろいろ制限を設けられたので、かなり不愉快な気持ちになりましたが、家族は家族で職場や親族から言われていたようです。 帰国予定の人は周りからいろいろ言われるかもしれませんが、日本社会全体から圧力がかかっているせいだと思って広い心で受け止めてください。 なにはともあれ、無事に帰国でき、コロナも陰性で誰に迷惑をかけることもなく、晴れて自由の身になれてよかったです。 帰国の準備を始めてから帰国して、自由の身になるまでに約4ヶ月かかりました！ ホント長かったー。これがNew Normalです！ 私が帰国できたのは、何度も手続きにくじけそうになって、年内の帰国は諦めようかと弱気になる私を叱咤激励して励ましてくれたかみーゆさんや素敵なセブ友がいてくれたおかげです。（大げさｗ） しばらくは海外への渡航はどこもこんな感じかと思うとしんどいですが、コロナ収束したらまたセブ行きたいなーとか、次はピラミッド見ã

1«è¡ŒããŸã„なーとか性懲りもなく考えたりしてます。 それまでに旅行資金貯めなければ！！！！！ さいごに、管理人（かみーゆ）から 彼女は2020å¹´12月23日、無事日本に帰還しました。 日本に無事帰れたのがめちゃくちゃ嬉しいです。 異文化をめちゃくちゃ理解して執拗なまでにメールを送り続け、、、、めちゃ尊敬しました。 詳しくはVISA手続き編をご覧ください。 勇姿です。 ※ 帰国後に送られてきた川辺でウクレレを弾く彼女。謎ですが。 海外に住むことは「自分の常識って非常識かもと疑う気持ちでないと生きていけない」なあって。そんなことを学べたのは彼女のおかげとも思ってます。 後続する日本人のために空港などで睡魔に襲われつつ手記を書いて託してくれ、感謝してます。 またセブに戻ってくるのを楽しみしてます。 また飲もうで！！待っとるで！！！！ この記事がフィリピンから日本に帰るみなさんのお役に立てたら彼女もきっと本望です。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry432","title":"バレンタインデーが近いので恋人への条件を要件定義に例えてみた","date":"2021-01-15","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2021/entry432.webp","description":"Web制作において要件定義とは、プロジェクトが始まる前に条件を決めておくことで目的の脱線防止、要はクライアントとの齟齬による事故を防げます。これって恋愛にも言えて、付き合う前に「要件ちゃんと決めときゃよかったー」てことありませんか？今回は恋人の条件を定義に例えてみました。","tags":["おもしろ","例えてみる"],"body":"バレンタインデーが近いですね！みなさん、一緒に過ごす人はいますか？ Web制作において要件定義とは先に条件を決めておくことで目的の脱線防止、要はクライアントとの齟齬による事故を防げます。\\",\\"これって恋愛にも言えて、付き合う前に「要件ちゃんと決めときゃよかったー」てことありませんか？ 今回は恋人の条件を定義に例えてみました。 きっかけ・友だちとの会話の中で気づきがあった 私、ぶっちゃけ恋愛というものが昔っから苦手です。 毎年「今年プライベートでも幸せになりたいなー」と思いつつ不器用でアンテナも鈍く、機会損失ばかりしてきました。 そんなとき友だちに「出会いたい恋人像ってちゃんと持っている？」って言われて、ハッと気付きました（ちなみに私は男女かかわらず自分のことをベラベラ話しします）。 私の恋人に対する前提条件は「風呂に入る」と「私の仕事をジャマしない」の2つくらいです。 あとは「目・鼻・口がついていればいーや」って、あまり気にしていません。しかも押されると折れてしまいます。 出会いたい恋人像の条件がすっごくぼんやりしているんです。指摘されるまで気づきませんでした。 ウェブ制作においても、そういえばどんな条件で制作するかを最初にきちんと決めていないと必ずと言っていいほど事故が起こります。 恋愛もそうかもしれない！ なので恋人の条件を要件定義に例えてみることにしました。 要件定義とは？目的はイメージを明確化すること 要件定義に関してざっくり説明です。 システム開発などのプロジェクトを始める前の段階で、必要な機能や要求をわかりやすくまとめていく作業のことです。 企画の進行とともに要件定義に立ち返ることも多く、目的の脱線を防止する役割も果たします。 でã

1¯è¦ä»¶å®šç¾©ã®æ‰‹é †ã«æ²¿ã£ã¦è¦ä»¶ã‚’固めていきます。 立場は発注側と受注側に分かれます。 1. 要望：サービスの根幹・アイデア（発注側） 2. 要求：実装して欲しい大まかな機能一覧（発注側） 3. 検討：要求の実現性を考える（受注側） 4. 提案：検討した結果を提案（受注側） 5. 要件：双方が合意した具体的な機能一覧と実装方法（双方） フェーズ1 : どんな要望があるか ウェブ制作でも、システム開発でも、発注側の要望があってはじめてサービスが作られます。 要件定義は要望を元に作られます。 この要望を聞き出すのが意外と難しいです。 たまーに「バーン、ガーン、シュシュシュって感じで作って」と言われます。 こんな具体性のかけらもない要望だと、マジで困りますよね。 クライアントから具体的な要望があると、どんなサイトが作りたいかイメージがつきます。 サイトが表示される前にかっちょいいローディングアニメがあって、表示されたら画像の切り替わるアニメーションがあって、ニュースが3件表示されて下の方にマップが欲しい。コーポレートカラーをアクセントカラーに使いたい。 恋愛においても、この要望がふわふわしているから失敗するんです。 そこで、自分がどんな恋人に対してどんな要望があるのか考えてみました。 安心して、自分を偽らず、ストレス溜めずに一緒に過ごせるような人Web制作での要求と同様、「こんな人だったら私の要望を叶えられるだろうなー」という恋人の条件を「風呂に入る」と「私の仕事をジャマしない」の2つ以外もリストアップしてみました。 ※ すでに4回書き直しているのでバージョン1.4.0です。 ただ列挙するだけではなく、きちんと「なぜその条件が必要か」の理由も考えました。 たとえば1つ例にとります。 「母親を大切にしている人（家族の愛を感じて育った人）」ですが、私実の母が大好きで子どもの頃も今も彼女が母親で幸せだなーって日々思います。 そういう気持ちが共感できたら幸せですし、「お母さんを大事にする人」は恋人や奥さんも大事にするという持論があります。 このリストには理由を裏付けできない条件はないです。 ちなみに私は理想が低いと豪語してたのですが余裕で30項目くらいありましたww あくまで要求のフェーズなので予算、期間、実装可能などは無視していいのでこれでOKです。 フェーズ3 : 要求の実現性を検討する Webサイト制作においてリスト化された要求を可能な限り実現してあげたいのですが、そうもいきませんよね。 技術的に開発可能か？ 予算はどの程度必要か？ 納期はいつ頃になるか？ たとえばイメージスライダーをクライアント側で差し替えしたい。その機能を実装するためには実装に5日かかる。 などなど、予算や納期などと要求を擦り合わせていきます。 では恋人の条件においてです。私は絶対に「お風呂に入ってくれる」のを優先したい！など、どの項目を優先するかのフェーズが「検討」にあたります。妥協という言い方がしっくりくるかもしれません。 私は「タバコ吸わない人」という項目を条件に挙げましたが、「お風呂に入ってくれる」ことの方がよっぽど重要。 なので余裕で諦めます。 フェーズ4 : 検討した結果を提案する Web制作では予算や期日を加味して実装できる機能を戻します。 実装できる機能 請求する金額 納品できる期日 ここで発注者側へのアドバイスです。 「あとで変えてもらえるだろう」とか甘いことを思わず、しっかり詰めてください。 要件定義が甘いからあとで揉めるんです。後味悪いくらいならとことん詰めておきます。 改めて提案のフェーズを恋人の条件を当てはめて考えました。 この時点で「『まあいっか』って気持ちで付き合うからしっくりこなくて別れるんだろうなー」と遠い目になりました。 どんな条件が譲れないかちゃんと見極めて、変な妥協をしない（自戒）ことが重要です。記事を書きながら猛省しています。人生を振り返ると現実逃避したい気分です。 なので、このプロジェクトの納期は私が死ぬまでという設定にしておこうと思います。 フェーズ5 : 双方が合意したことを要件にまとめる 最後に、クライアントの要望と納期・機能・予算を擦り合わせて双方の納得いった要件のã

1¿ã‚’定義してまとめます。 クライアントが納得してもらうまではフェーズ2 ~ 4を繰り返す感じになるかと思います。 要件定義はプロジェクトを進める上で発注側がちょっと違うことを言ってきても「要件定義にないですよ」って突っ込める材料にもなります。 私も受注してくれる人（恋人）が見つかるまで、要件をブラッシュアップしようと思います。 私のゴールは安心して自分を偽らず、ストレス溜めずに過ごせる人を見つけて末長くお付き合いすること。 ブレないように心に要件定義を刻んでおきます。 まとめ 今回はバレンタインデーが近いので、恋人の条件を要件定義に例えてみました。 カフェで「今年こそ恋愛面で幸せになりたい！」て言っていたら、友だちに恋人にしたい条件をリストアップすることをすすめられました。 私は言われたら即やるタイプ。その日帰って早速リスト化してみました。 条件を絞り込んでるうちに「これって要件定義に似てるなー」って思い、記事化することにしました。 友だち曰く、「毎日そのリストを見ていたらそういう人が見つかる」とのこと。 さらに「自分もリストの条件の恋人にぴったりな人間へなれる」とのこと。 なんだか意味もなくワクワクしてきましたw この記事がみなさんの要件定義？恋人探しの一助となれば幸いです。 最後までお読みいただきありがとうございました！ 参考サイト 要件定義～システム設計ができる人材になれる記事","noindex":true},{"slug":"entry431","title":"生きるのが楽になる！コーチングから学ぶ5つのメソッド+マインド","date":"2021-01-14","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2021/entry431.webp","description":"当時勤めていた会社でコーチングが導入され運よく研修メンバーの対象として選ばれました。その頃、実は職場環境などで悩んでいました。が、コーチングのマインドやメソッドが無かったら。。。と思うくらい救われました。今でも参考にしていることが多いので、コーチングのマインドやメソッドを一部ご紹介します。生きづらいな、しんどいなって思っている方はぜひ参考にしてください。","tags":["キャリアアップ・転職","コーチング"],"body":"10年以上前のことですが、当時勤めていた会社でコーチングが導入され運よく研修メンバーの対象として選ばれました。\\",\\"その頃、実は職場環境などで悩んでいました。 が、コーチングのマインドやメソッドが無かったら。。。と思うくらい救われました。今でも参考にしていることが多いので、コーチングのマインドやメソッドを一部ご紹介します。 生きづらいな、しんどいなって思っている方はぜひ参考にしてください。 考え方をちょっと変えるだけで人と接するのが楽になる 当時、私は世界的有名な会社の子会社にいました。 ぶっちゃけ職場環境はよくなく、数字を追う日々で擦り切れる一方でした。 具体的にどんな会社だったかは、「会社は人の割合で決まる！組織を腸内フローラに例えてみた」をご覧ください。 その会社では少しでも人間関係を良くしようと、当時流行っていたコーチングを導入することになりました。 運よく研修メンバーに選ばれた私はコーチングを学ぶことができました。 コーチングとの出会いが私を救うことになります。 自発的な行動を促すメソッド・コーチングとは？ コーチングとは「自発的な行動を促すメソッド」でコーチはクライアント（コーチされる人）へ継続的にアプローチすることでã

1™ã€‚ 自発的に行動を修正し、成果を生むことができるようになります。 ポイントは「やらされてるなー」って思わずに行動できるところです。自分の責任で動くようになります。 コーチングは1990年ごろからアメリカを中心に広まり、2000年ごろから日本でも経営者やマネージャー研修などで用いられるようになりました。 では具体的に5つのメソッドをご紹介します。 テクニックその1・角度を変えて物事を見る 壺のシルエットのイラストです。 正面から見たらなんとなく壺だなーって思いますが、上から見たらなんのこっちゃわかりません。 物って角度を変えるとよくも悪くも見えたりします。 言葉も一緒。同じことを言っても良くも悪くも聞こえます。 コーチは否定的な言葉を使いません。 たとえば、こんな伝え方をします。 × 小魚食べないと背が伸びないよ ◯ 小魚食べると背が伸びるよ 同じ意味ですよね？ 肯定的な言葉を使うだけで伝わる印象がまったく変わります。 「背が伸びるんだ！！！たくさん食べよう」 ワクワクするので思わず小魚食べたくなります。 人は無意識のうちに1日約7万回もマイナス思考を繰り返しているそう。 最初はなかなか考え方のクセを変えるのは難しいです。 だから私は意識して、定期的に自分の思考を観察するようにしています。 現在マイナス思考に傾いていると気づけたらラッキーです！プラス思考へ切り替えるチャンスなんですから。 とはいえ、どうしてもプラス思考になれない時もあります。 そんな時はお決まりで「今日の晩ご飯何食べたいかなー」としょうもない、どうでもいいような考えに切り替えます。 魔法の言葉「ちょうどよかった！」 私がよく実践している物事がうまくいかないときの視点の切り替え方です。 たとえば友達とご飯行く約束をしているとします。 すごく楽しみにしていたにもかかわらず、相手から「30分ほど遅れる」と言うような連絡を受け取ることがあります。 すごく楽しみにしていたのだから、通常なら残念な気持ちやさらに不機嫌になったりしますよね。 物は考えよう。 そんな時、私は待ち時間にできそうなことを探します。 クライアントにメッセージ返すとか、前から読みたかったブログ読んじゃうとか。 友達が遅れてくれたおかげで待ち時間ができ、すべきこと・やりたかったことなどが一個片付付きます！ 友達も大抵遅れたことを気にしていたり、とても悪く思って謝ってきます。 なので、 「遅れてくれたおかげで、〇〇をすることができた。ちょうどよかった！」って伝えます。 お互い負の感情が拭えてハッピーです。 物事には悪い面と良い面両方ある。デザインの気に入らない壺でもひっくり返してみたらステキな壺かもしれない。普段から良い面を見つける努力をする。 テクニックその2・メソッドとしてのアクノリッジメント（承認）を実践する 昔は人の話を聞くのがニガテ。今もおしゃべりな方です。。。 ちゃんと話は聞いてるんですよ。 日常どんな人でも、仏頂面だったり作業しながら片手間で「ちゃんと話を聞いてるよ！」ていうのが伝わらないことも多々あります。 だからこそ「あなたの話を聞いているよ！」って態度や言葉で伝えることが大事なんです。 なので、私は人の話を聞くときはできるだけアクノリッジメント（acknowledge・承認）のメソッドを使うようにしています。 あいづち アイコンタクト うなづく オウム返し これはブリッジSEやってた時、フィリピン人スタッフに対してももめちゃめちゃ有効的でした。話を聞いてもらえるだけで人って安心するんですよね。世界共通です。 承認するならI & Youメッセージはさらに効果的！ これも私がブリッジSEをしていた時、チームメンバーに言っていた言葉です。 「私は本当に嬉しいよ。あなたがいつもチームのことを考えて、意見したり行動してくれることが。」 Iメッセージ ... 私があなたを通じて感じたことや思ったことを伝える Youメッセージ ... あなたの行動や振る舞いなどを率直に伝える 認められると、人のモチベーションは上がります。 同じ意味のことを伝えるなら、いい副作用のある言い方で伝える方がお得でã

1™ã‚ˆã­ï¼ 「あなたの伝えたいこと・あなたの存在に気づいてますよ」と態度や言葉で伝える。すると受け取った人の承認欲求が満たされる。 テクニックその3・タイプ分け グラデーションはあるものの、人を4つのタイプに分けて接するようにしています。 ちなみに私は生粋のプロモーターです。 いいところは楽しいこと大好きでアイデアがいつも潤沢。その分、縛られるのが嫌いで、飽き性。 なので何かをやらせるときに細かい指示を出すと嫌がります。 逆に、アナライザータイプは「なぜそれをするのか」を細かく説明してあげないといけないこともあります。 コントローラーはそもそも指示されるのが嫌いだったり、シンプルにお願いしないとキレられたり。 周りにひっそりと影であなたを支えてくれる人っていませんか？ それはサポーターです。 実はもっともケアが必要なのはサポーターです。 「いつもありがとう」「◯◯のおかげで助かってるよ」というようなメッセージを送り続けてください。 タイプをざっくり4つに分けて接し方を変える。ただしタイプはあくまで目安。完璧でないということをお忘れなく。 テクニックその4・頭を空っぽにして相手の話を聞く みなさん、いつも人の話を聞いていますか？ 一番難しいのが傾聴です。 脳みそってとっても賢いんで、つい先読みしちゃうんですよね。 相手の話を聞きながらも、「いつ話を割って自分の意見を言ってやろうか」とか「結局こういうことがいいたんでしょ？」って常に思っています。 小賢しいですね。 そんなときこそ、黙って話を聞く。沈黙が続いても放っておいてください。 話を聞いているのは聞き手だけではないのです。話している本人自身も聞いているのです。 なので、自分で話しているうちに気づいていなかった問題点を発見できたり、考えが整理されることもあります。 答えってその人が持ってるもの。 良かれと思ってやるアドバイスほど傲慢なものはないと思います。 頭を空っぽにして話を聞くのってなかなかできません。何年経っても超ムズイです。ぶっちゃけできませんw せめて私は、「この人の話から何が学べるだろう」って思いながら話を聞くようにしています。 傾聴できてるかわかりませんが、少なくとも自分の脳みそのおしゃべりは止みます。 沈黙は金。ひたすら耳を傾けると、本当にその人が伝えたいことが分かる。 テクニックその5・目標と現状のギャップを数値化 何か目標があるとします。わかりやすくシェイプアップの話をします。 「2年前に購入したワンピースを着るために痩せたい」とします。 まずは現状と目標のギャップがどのくらいあるかを数値化してみてください。 私が自分に投げかける質問はこんな感じ。 「ワンピースをエレガントに着れる体型が100だとしたら今何パーセントの体型？」 「数値じゃ測れã

1ªã„よ！」って思うかもしれないです。 でも自分の肌感でいいです。できているかできてないかは自分のさじ加減を信じてください。 大切なのは目標までどれだけのギャップがあるか感覚的に把握することと、それを埋めるためには何をすればいいか具体化することです。 食事制限、エクササイズ、どのくらい努力したら目標達成できるかが肌感でわかればいいんです。 そして人に提案してもらうまでもありません。答えは「自分の中」にあるんです。 食べるのがやめられないなら運動ですればいいし、運動が苦手なら食事でカバーなど個人差があるはずです。 あくまでシェイプアップを例にあげましたが他の場合も同様です。 自分で何ができるかを探ってください。 ToDoの数は減らす。日時を決める。 目標達成のためには、どんなに解決策が思いついてもやることを増やしすぎないこと。 たくさんあると手いっぱいになってできなくなります。 一番大切なのは継続できることです。 諦めたくなるようなタスクはやると徒労に終わるだけですよ。 そして期日を決める。一度区切り、目標に及ばなければやり方を変えればいいんです。 できなければ計画を練り直せばいいんです。 目標と現状のギャップを埋めるために何をすればいいか自分で決める。期日を決める。 コーチングで大切なのはメソッドよりマインド コーチングでもっとも大切なのはマインドです。考え方です。 視点を変えて、美点を探すこと 諦めないこと 「批判」ではなく「学ぶ」姿勢でいること コーチングにつきものな存在はコーチです。 コーチとは「あなたを認めて、諦めずにゴールまで帆走してくれる人」です。 あなたに寄り添って目標達成をお手伝いしてくれます。 ただ、コーチングのマインドさえあれば、自分の中のコーチが手伝ってくれます。 他人よりも自分が自分のことをよく知っているはずです。 自分を俯瞰してみれるようになればあなた自身があなたの最高のコーチになれるはずです。 さいごに そして、ここまで5つのメソッド＋マインドをお伝えしました。 私はこのコーチングを学ぶことで、人との関わり方がとてもラクになりました。 この記事が皆さんの人生の一助となれば幸いです。 最後までお読みいただきありがとうございました。 元ネタはこちら こちらは2013å¹´10月14日に公開したスライドです。 ありがたいことに公開して以来3,000PV以上見てもらっているスライドです。 ※ スライドではアクノリッジメント（承認）の表記が間違えてます。 コーチングから学んだこと from Yuriko Kamimori","noindex":true},{"slug":"entry430","title":"Gatsbyブログサイト移行物語~関連記事一覧出力~","date":"2021-01-12","modifiedDate":"2022-01-05","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"今回でGatsbyカスタマイズ10記事！せっかく書いたブログ記事、たくさん読んで欲しいですよね？そこでブログ詳細での関連記事出力のコンポーネントを作ります！関連記事をランダムで6記事ピックアップして出力します。※ 2021å¹´12月アップデートに伴い、v4対応済みです。","tags":["React"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 今回でGatsbyカスタマイズ10記事！せっかく書いたブログ記事、たくさん読んで欲しいですよね？そこでブログ詳細での関連記事出力のコンポーネントを作ります！ 関連記事をランダムで6記事ピックアップして出力します。 ※ 2021å¹´12月アップデートに伴い、v4対å¿

1œæ¸ˆã¿ã§ã™ã€‚ 今までのGatsbyの記事と注意点 現在ここまで記載しています。制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。 1. インストールからNetlifyデプロイまで 2. ヘッダーとフッターを追加する 2. 投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加 3. ブログ記事、カテゴリ、タグ一覧の出力 4. プラグインを利用して目次出力 5. プラグインナシで一覧にページネーション実装 6. 個別ページテンプレート作成 7. プラグインHelmetでSEO調整 8. CSSコンポーネントでオリジナルページを作ろう！！ 9. 関連記事一覧出力（←イマココ） 11. タグクラウドコンポーネントを作成する 12. パンくずリストを追加する v5へのアップグレード方法はこちら。 このシリーズではテーマGatsby Starter Blogを改造 この記事は一番メジャーなテンプレート、「Gatsby Starter Blog」を改造しています。同じテーマでないと動かない可能性があります。 StaticQueryタグを使って同じタグとカテゴリの記事を絞り込む 類似記事を絞り込む条件です。 タイトルがかぶっていない カテゴリが一緒 もしくは、タグが一緒 上記の条件の記事をPickupしランダムで6記事出力します。 今回触るファイルです。relatedList.jsを追加します。 絞り込み機能を作る useStaticQuery を使ってGraphQLで出力したい内容のスキーマを書きます。 「Gatsbyブログサイト移行物語」では記事にはタグとカテゴリを設けており、カテゴリは1種類、タグは複数選択可能 というルールになっています。 あらかじめ関連記事を表示するコンポーネントを読み込んでおきます。 関連記事では現在表示中の記事をのぞきたいので、blog-list.jsのGraghQLのスキーマにslugを追加します。 filterで記事を絞り込んだ配列を作ります。 関連記事が存在したらランダム出力する 配列をシャッフルし6記事に絞り込みます。 結果を出力するコンポーネント作成 抽出結果をコンポーネントを通じて出力します。とりあえずは最小のデータで確かめてみます。 スタイルが当たってないので見た目はこんなもんですが出力できました。 見た目が貧弱なので、そのほかのデータを出力します。 サムネ画像出力用コンポーネントを追加し、スタイルはプラグインstyled-componentsでスタイル用コンポーネントを作ります。 サムネ画像出力用コンポーネントの実装方法は「ブログ記事、カテゴリ、タグ一覧の出力」を参考にしてください。 styled-componentsは以下コマンドでインストール可能です。 styled-componentsを追加。 関連記事を出力するコンポーネントのコードをまとめて書く スタイルも当ててまとめたコードがこちらです。 これで関連記事び一覧が出力できるようになりました！わーい。 読みこむたびに、ランダム表示されます。 まとめ・関連記事一覧を実装するとユーザーも嬉しい 記事詳細読了後、関連記事が表示されることで回遊率はグンと上がります。 実はリニューアル前も関連記事機能あったんですがロジックが甘くてほぼ機能していませんでした。 現在はGatsbyに切り替えてしっかり作り込んだおかげで、適切な関連記事が表示されるようになりました。 Googleアナリティクスで見ても、記事の検索機能もつけたせいかもしれませんが、平均ページ/セッション数が1.2ページからから1.83になり、150%伸びました。嬉しい限り。 ぜひ、Gatsbyで興味ある方は関連記事の実装チャレンジしてください。 次は「タグクラウドコンポーネントを作成する」です。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":true},{"slug":"entry429","title":"セブ島からNew Normalの帰国の仕方教えます（航空券購入+バランガイ編）","date":"2021-01-11","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2020/entry422.webp","description":"親愛なる人がフィリピンセブ島から日本に帰還するまでの手記を託してくれました。今回は「航空券購入 + バランガイ編」でロックダウン中のセブ島での航空券の購入とバランガイという謎の役所での手続きのお話です（このシリーズは数回に分けて公開します）","tags":["海外移住","ちー帰国"],"body":"親愛なる人がフィリピンセブ島から日本に帰還するまでの手記を託してくれました。 今回は「航空券購入 + バランガイ編」でロックダウン中のセブ島での航空券の購入とバランガイという謎の役所での手続きのお話です（このシリーズは数回に分けて公開します）。 手記を書いたのは元同僚。ざっくりどんな人かご紹介 この記事は私の元同僚による手記です。 ロックダウンの影響もありフィリピンから航空券購入が大変だったようで、今後日本へ帰る人たちに気をつけて欲しい点などを伝えたいという思いで寄稿いただきました。 ちなみに彼女のパーソナリティです。 自然豊かな日本の中部地方でのびのび育った元教員。オーストラリアに留学したり、働いていたので英語はペラペラ。 ※ プライバシーに配慮してモザイク処理をしてます。 セブでは一緒に買い物したり、昼から一緒に呑んだくれることができる重要な人でした。 1. VISA手続き編 2. 航空券購入 + バランガイ編（←イマココ） 3. 渡航編 4. 帰国後編 ここからは託してくれた手記をほぼそのまま掲載します。 航空券購入 航空券の購入も以前とは違う方法で購入したので留意した点など詳しく記載しておきます。 チケットの購入 私は今回はじめてフィリピン航空のオフィスへ行き購入しました。 フィリピンエアライン公式サイト チケットサイトでの購入も可能でしたがサイトに出てくる便が本当に飛ぶか信用できなかったのでやめました！ ロックダウンも長くなってくると行政や航空会社の発表はだいたい当てにならないことを学びます。 実際「セブ - 名古屋」間でいうと2020å¹´10月15日から直行便が再開すると発表がありましたが、やはり飛んでませんでした。 この場合「直行便飛ばすよ！突然キャンセルになる場合もあるけどね☆」と捉えるのが正しいです。 『あの発表は何だったんだ！！ぬか喜びした気持ちを返せー！！』と言ってやりたいですが言いません。大人なんで。 私は確実に名古屋へ飛ぶ便を買いたかったので何度かオフィスへ行って購入しました。 なにが正しい情報なのかを確認するためにまずは航空会社のオフィスへ行きましょう。 オフィスで確認すると、「マニラ - 名古屋」間は週2便飛んでいました。数ヶ月前まで成田行きしかなかったことを考えるととても大きな進展です。 『成田便が飛べば日本人みんな帰国できると思うなよ！』と言ってやりたい。 もちろん言いません。大人なんで（2回目）。 ちなみにフィリピン航空のオフィスはセブ市内に2店舗ありますが平日だけの営業に変わっています。 ネットにはゴロルド支店は土曜営業しているとありましたが、行ったら閉まってました。今フィリピンではネットの情報は当てになりませんね。平日9:00-17:00の営業だったはずです。変更してるかもしれませんので、電話での確認をオススメします。 だいたい午前中に行くと待ち時間0分でしたよ。 フィリピン航空でオフィスで教えてもらった情報 私がフィリピン航空のオフィスで聞いた情報をまとめておきます！ 渡航に必要な書類は各地区ごとに違うためバランガイで確認が必要 帰国する日本人はPCR検査は必要ない ただしマニラに24時間以上滞在する場合はPCR検査必要 マニラに滞在する場合は宿泊するホテルも証明できるようにする キャンセルは渡航日の7日前なら無料。7日過ぎていたら日程変更手数料50ドルかかる。 購入時に必要なものはパスポート 席を仮予約しておくことも可能。ただし期限内に料金が支払われなã

1‘れば仮予約は消滅。 これは2020å¹´12月時点の情報です。変更は随時あると思うので渡航前に必ずご自身で確認をしましょう！ イミグレ(※1)でECC（Emigration Clearance Certificate）(※2)を申請したその足でフィリピン航空のオフィスへ行きましたが、希望していた帰国日のチケットが話しているうちにに売り切れ、次の最短の便も残り1席と言われました。クリスマス前だったからかもしれませんが、名古屋便の人気を甘く見ていました。 ※1 移民局・イミグレーションの略。 ※2 6か月以上フィリピンに滞在した外国人がフィリピンを離れるときに必要な出国許可証。フィリピンに滞在中にビザ代をきちんと払っているか、犯罪歴がないかを証明するためのもの。 このラスト1席を仮予約したんですが、購入するためにはパスポートが必要でした。 私の場合、キャンセルしたチケットの日程変更手続きになるため、パスポートはもう不要だと思っていましたがいるとのこと。 その時私のパスポートはECC手続き中のためイミグレに。 今日中に購入できないと仮予約は消滅とのこと。 その場合また帰国が遅れる可能性大。 またイミグレまで戻らなかんの!?!?（タクシーで往復50分くらい） と一瞬、絶望に打ちひしがれましたが、写真でもいいと言われたので、ちょうどイミグレへ行くフィリピン人スタッフに頼んでパスポート全ページ撮って送ってもらいました。 チケットを購入するのにパスポートIDのページとフィリピンに最後に入国した際に押されたスタンプのページのコピーか写真があればいいそうです。私みたいにならないように念の為写真に撮っておくといいですよ！ そんな小さなトラブルもありつつ、ようやくチケットが購入できました！セブ発マニラ経由名古屋行きの片道でお値段は370ペソ+50ドル（日程変更代）。日本円で約8.5万円。 冷静になるとめちゃ高いやん！と思いますが、もう早く帰国できるならいくらでも払うよ状態だったので気にもしませんでした。 もしかしたらこれはイミグレと航空会社が結託したNew Normalのビジネス商法なのかもしれません。まんまとハマってしまったなー。 バランガイへGO！ 渡航に必要な書類を確認しに、家の近所のバランガイへ行きました。手続きは事前にフィリピン人スタッフが進めてくれたのでよくわかってませんが、私のバランガイ(※1)（マボロ・Mabolo）では外国人が出国する際はMedical Certificate（健康証明書）等をまとめたTravel Authority（渡航許可）(※2)が必要みたいです。 ※1 バランガイは、フィリピンの都市と町を構成する最小の地方自治単位であり、村、地区または区を表す独自のフィリピン語です。地域ごとにあります。 ※2 渡航許可など、新型コロナウイルス感染拡大のため、厳しい渡航制限が課されています。 はじめてバランガイへ行きましたがローカル感がすごくてびっくりしました。 Mabolo（マボロ）のバランガイのスタッフは道端に1日中座っているおっさんくらい見た目が超ラフだったのでスタッフなのか暇つぶしに来てるおっさんなのか区別できませんでした。 バランガイへ行ったら目があった人に話しかけてみてください。きっとそれがスタッフです。 手続きは書類に記入するだけでOKですが、パスポートと航空券が必要です。City Hall（役所）での許可書も必要らしく、私のバランガイでは取得に3日かかりました。 帰国日を変更するごとに取り直す必要があるので、帰国日が決まってから取得したほうがいいですよ。 私の場合、予定していた帰国日までにダウングレードが間に合わなかったã

1®ã§èˆªç©ºåˆ¸ã‚’1度キャンセルしていますしTravel Authority（渡航許可）も期限切れで再申請しました。 今思えばホント2度手間でした。 チケット購入したほうがイミグレも手続き急いでくれるというのは都市伝説だったみたいです。 2020å¹´12月時点で帰国に必要だった書類は3点です。（取得場所 / かかった日数） 1. ECC（イミグレ / 4日） 2. Travel Authority（バランガイ / 3日） 3. 航空券（フィリピン航空オフィス / 1日） ECC Travel Authority すべて集めるのに5日間かかりましたが、急げば3,4日で取れると思います。ただ、何があるかわからないので時間に余裕を持って帰国日を決めることをオススメします！ ちなみにフィリピン航空のスタッフに「警察署へ行ってCOVID SHIELDも取得して」と言われましたが、外国人は不要です！ フィリピン航空のスタッフによってなぜか必要書類が違うときがあります！ そんなときはバランガイへ行って確認するほうが確実そうです。 私はあやうく警察署へ行くところでしたがバランガイの金髪ロン毛のおっさんが必要ないと教えてくれました。 ありがとう、おっさん！ 渡航準備をしてみた感想 New NormalではMedical Certificate（健康証明書）やPCR検査の結果の提出が新たに求められます。渡航日程やコロナの状況によって必要書類が変わるみたいなので必ず確認してくださいね。 あと、週末は基本的に各種手続きお休みなのでそこを考えて計画的に動きましょう！ でもMabolo（マボロ）のバランガイは土曜日開いてました。ネットだと土日は定休日ってあんたんだけどなー。 結論、New Normalはまだ何が本当かよくわからんのでとりあえず行ってみるしかない！ってことです！ さいごに、管理人（かみーゆ）から 彼女は2020å¹´12月23日、無事日本に帰還しました。 余談ですがNew Normalじゃなかろうが、フィリピンでのネットの営業時間はあてにしてはいけません。 彼女はなんとかチケットを手に入れて、渡航することができました。 まだ、フィリピンにはたくさんの日本人が在住していて仕事の関係で帰国する方も多いと思います。参考にしていただければ幸いです。 次は、「渡航編」です！ぜひ併せてお読みください。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry428","title":"pug（旧：Jade）を使い倒して時短マークアップしよう！","date":"2021-01-10","modifiedDate":"2026-03-20","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2021/entry428.webp","description":"pug（Jade）の特徴やメリット、基本的な使い方、導入方法（pug-cliとgulp）。とくに記述方法はif（分岐）やfor・each（ループ処理）など解説。テンプレート化したい場合に使う記述方法の解説と具体的なテンプレートの作り方なども紹介。","tags":["Gulp","npm"],"body":"ページを量産したりチームでサイトを作る時pugという言語を使ってWebサイトを作っています。pug（旧：Jade）の特徴やメリット、基本的な使い方、導入方法（pug-cliとgulp）についてまとめました。とくに記述方法はif（分岐）やfor・each（ループ処理）など解説。テンプレート化したい場合に使う記述方法の解説と具体的なテンプレートの作り方なども紹介しています。 普段webpackやgulpを使っている方なら導入のハードルも低いと思います。 今回はmpmコマンド出始めたい方はpackage.jsonで手軽にすぐ始められます！とても記事は長いので目次を利用して好きなところを読んでください。 pugとは？ pugとは、Haml（HTMLを抽象化したマークアップ言語）記法に影響を受けたJavaScriptで実装された高機能テンプレートエンジンです。 より短く、キレイかつ簡潔にコードを書くことができます。 The general rendering process of pug is simple. pug.compile() will compile the pug source code into a JavaScript function that takes a data object (called “locals”) as an argument. Call that resultant function with your data, and voilà!, it will return a string of HTML rendered with your data. The compiled function can be re-used, and called with different sets of data. 公式サイト：pug 昔は、Jade（ヒスイ）と呼ばれていましたが、すでに商標登録されていたのでpugに名前が変更されました（Version 2以降）。 似たようなテンプレートエンジンでEJSもあります。参考にしてください。 私の考えるpugでコーディングするãƒ

1‡ãƒ¡ãƒªãƒƒãƒˆã¨ãƒ¡ãƒªãƒƒãƒˆã‚’紹介します。 導入のメリット 大量のページを手分けして量産できる 短いコードでキレイかつ簡潔にコードが書ける ヘッダーや共通部分とそれ以外を分けて書ける こちらは私が作っているサイトの実際のpugファイルです。footerやheaderなどを分けてデフォルトで読み込み、主要コンテンツだけ毎度変更しています。 導入のデメリット 実務で使うためにはgulpやwebpackのタスクを書いたりコマンドを覚える必要がある インデントをミスると意図しないコンパイルが起きる コードの書き方など多少の学習コストがかかる こちらは私が実際に利用しているLaravel mixのwebpackのコードです。タスクを書いたりしないといけないのは少し面倒ですね。 導入方法 pugはnpm経由でインストール可能です。 npmのモジュールを管理できるようにpackage.jsonを作っておきます。 今回はpug-cli(npmスクリプト)とgulpでの導入方法をご紹介します。 | | メリット | デメリット | | --------- | -------------------------------------- | -------------------------------------------------------------------------------------- | | gulp | SCSSなどとあわせて複雑なタスクが書ける | モジュールを複数インストールしなければならないことがある。複雑なコードを書く場合がある | | pug-cli | 記述量が少なくてすむ。 | 複雑なタスクには不向き | HTMLをコンパイルするだけなら pug-cli で十分です。 package.jsonを作成し、npmモジュールを管理しながら、進めていきます。 今回は pug-practice というディレクトリを作り、ディレクトリに移動して以下コマンドを実行します。VS Codeであればディレクトリを開いて、ターミナルを開いて実行すればOKです。 VS Codeであれば、ターミナルをcontrol + shift + @で

1開くことができます。 通常プロジェクト名など、対話式で入力し作成していくのですが-yのオプションを使うと面倒な入力を省くことができます。 package.json ファイルが作成できました。 pug-cliで始める 次にpugをインストールします。インストールでコケる場合はsudo（管理者権限で実行）をつけてみてください。 pugとpug-cliがインストールされます。 ※ テンプレートを分けたい場合は、pug-cliを再インストールする必要があります。テンプレート化したい場合に使う記述方法を参照してください。 src と dist ディレクトリを作成し、空の index.pug を追加しておきます。 src ディレクトリにある index.pug を index.html として dist ディレクトリに出力します。 毎度、コマンドを打つのは面倒なので、scriptとして登録しておきます。 すると以下コマンドで実行できるようになります。 src ディレクトリ内のpugファイルを更新するとsrc ディレクトリ内にHTMLファイルがコンパイルされます。-wオプションが付いているのでリレンダー（再コンパイル）されます。 ※scriptのオプションは記事の最後にあります。 Macであれば Control+C で実行を抜けることができます。 Gulpで始める Gulpで始める場合は gulp と gulp-pug をインストールします。 ディレクトリを作成し npm init -y などで packge.json ファイルを作成した状態からスタートします。pug-cli と同じディレクトリ名を使っていますが、別々に試したい場合は名前を変えてください。 ライブリロードさせたいので browser-syncエラーを吐いてもgulpを止めないためにgulp-plumberをあわせてインストールします。 src と dist ディレクトリを作成し、空の index.pug を追加しておきます。タスクを記述する gulpfile.js を追加します。 タスクを以下の通り書きます。 npmスクリプトを変更します。 基本のコードのご紹介 基本のpugの記述方法です。 基本中の基本・単純なタグと文字列を出力したい場合 pugの記法はタグ名+スペース+コンテンツです。閉じタグは不要です。 これでファイルはコンパイルできましたね！！ htmlを直に書くことができます。 =（イコール） でタグ内にコンテンツを内包させることもできます。 エスケープ処理 出力内容をエスケープしたくないことがありますよね？ そんなときは!（エクスクラメーション・マーク）を使うとそのまま出力されます。 コメント コメントをpug上には残して、htmlには反映したくない場合は /（スラッシュ）2つ＋-（ハイフン）を文前に追加。 htmlのコメントとして残したい場合は /（スラッシュ）2つです。 入れ子（ネスト）構造を書きたい場合 入れ子にしたい場合はインデント（字下げ）を使います。 以下のような書き方をします。 もしくは:（コロン）+スペースを使います。 idとclassの出力 idは#、classは.でつなぐ。 またidやclassを使うとき、divは省略できます。 srcやhlefなどの属性の出力方法 属性は()内に属性名=値で記載できます。複数あるときは、,（カンマ）かスペースで区切ります。 id、クラスも同様にカッコ内にも書けます。 マルチラインで書くこともできます。 （バッククォート） を使えば、属性の値を複数行にまたいで書くこともできる。 さらに&attributes()を使って、後から属性を連想配列として追加できます。 改行追加 インライン扱いされるようなタグは改行されずコンパイル時美しく整形されません。 改行を加えたい場合は |（パイプ）2つを使います。 文字列の中にタグ 文字列の中に文字を入れる方法が2つあります。 1つは |（パイプ）を使う方法です。 もう一つは#[]で囲む方法です。 前述したものに比べてこちらの方がはるかにカンタンなのでよく使います。 JSやstyleを追加したい場合 headタグ内やbody内にJSやCSSのコードを追加したいときは以下のように書きます。 プログラミング的記述方法 分岐や変数、ループの書き方です。 ちょっと難しくなりますが、ムリに使わなくてもpugは十分書けます。 変数 pugでは変数が使えます。何気に便利。コンテンツとして出力したいときは #{} の中に記入します。 属性の中に変数を入れるときはこんな感じで書きます。 文字列と混在させるときは変数を ${} 内に記入し （バッククオート） で囲むと前述したものより可読性が上がります。 三項演算子で出力を分けることもできます。 そのまま変数を出力したい場合は \\\\（バックスラッシュ） を使用します。 &attributes()を使えば、属性を配列に渡して値を追加可能です。 ifやcaseなどの分岐処理 if文 です。ヘッダーロゴのリンクをつけるつけないなどの判定によく使います。 いわゆるswhich文のような書き方もできます。 breakで抜けることもできます。 :（コロン） を使うとまとめて書けます。 for、each、while文などのループ処理 ループもできます。 まずは for文 から。 while文 も使えます。出力結果ã

1¯å…ˆã»ã©ã® for文 と一緒です。 each文はより実用的に使えると思います。 インデックスも合わせて利用する場合。 連想配列パターン。共通の変数として宣言さえしておけばメニューなんかにめっちゃ使える。 三項演算子と組み合わせると、クラスに現在のページというクラスも追加できます。 pugはそもそもJSのメソッドが使えるので、値を大文字（アッパーケース）化してそのままタイトルに使う方法もあります。 mixin 再利用したいときはmixinに登録しておきましょう。 引数を使うパターン。下層ページのタイトルやパンくずで使えそう。 引数にはデフォルトも設定しておけます。 出力結果です。 スプレッド構文を利用するパターン function Mixin 以外にも function （関数）が使えます。たとえば、条件によってクラスをつけたい等は以下のような書き方も可能です。 ページによって、メニューにクラスをつけてスタイルを変えたいときに便利ですね。 pugでテンプレート化してみよう ファイルを分けて、テンプレート化していきます。 pug-cliの注意点 このままではコンパイル時に、_（アンダースコア） がついたファイルもコンパイルされてしまうので、pug-cliを「GitHub – pugjs/pug-cli: pug’s CLI interface」から インストールし直す 必要があります。 参照：[pug-cliで_（アンダースコア）がついたファイルやディレクトもコンパイルされてしまう問題を解決する ](https://qiita.com/soarflat/items/48cec8fb19252a3fc4ad) gulpの注意点 gulpfileを一部書き換えます。 include・ファイルの読み込み ファイルを読み込みたい場合は include+ペース+ファイルパスです。 拡張子（.pug）は省略できます。 extend・継承 extendとblockを使って元となるファイルを継承することもできます。 たとえば、_layout.pugというテンプレートを使いたい場合は次のような書き方になります。 append・独自の設定 ページごとに独自の設定をもたせたいときはappendを使います。 テンプレートサンプル（簡易バージョン） ディレクトリー構成の例です。超簡易バージョンなので、実務用にするためには少し手を加える必要があります。 index.pugをテンプレート出力するためには以下のように書くと良いと思います。 layout.pug・レイアウト用テンプレート header.pug・ヘッダー用テンプレのコード footer.pug・フッター用テンプレのコード index.pug・コンテンツ用テンプレのコード 出力結果 まとめ いかがでしたか？ npmでcliで読み込むと、webpackやgulpどちらにでもカンタンに組み込めるので便利かと思います！ 今回はよく忘れる変数やループ処理などの使い方をかなりディープにまとめました。 pugの公式サイトを結構頑張って網羅してる（つもり.. ）のでよかったら参考にしていただけると嬉しいです。 次回はもう少し実務で使えるテンプレのレシピをまとめようと思います。 最後までお読みいただきありがとうございました。 おまけ・pug-cli の npmスクリプトのオプション pug-cliのscriptのオプションです。途中まで訳しましたが、ちょっと自信なし。。。参考までに！ | オプション名 | 詳細 | | ----------------------- | ----------------------------------------------------------------------------------------------------- | | -h, --help | ヘルプオプションの出力 | | -V, --version | バージョンを調べる | | -O, --obj | JSON/JavaScriptのオプションオブジェクトやファイル | | -o, --out | HTMLやJSを（指定した名前のディレクトリ）に出力 | | -p, --path | filename used to resolve includes | | -P, --pretty | インデントなど整えて出力 | | -c, --client | クライアントようにコンパイル？（compile function for client-side runtime.js） | | -n, --name | コンパイルされたテンプレートの名前（-cオプションが必要） | | -D, --no-debug | デバッグなしでコンパイルする | | -w, --watch | ファイルを監視し、更新されたらリロードする | | -E, --extension | 出力ファイルの拡張子を指定 | | -s, --silent | ログを出力しない | | --name-after-file | name the template after the last section of the file path (requires --client and overriden by --name) | | --doctype | specify the doctype on the command line (useful if it is not specified by the template) | | --hierarchy | 階層構造を維持したまま出力 |","noindex":false}

1,{"slug":"entry427","title":"セブ島からNew Normalの帰国の仕方教えます（渡航編）","date":"2021-01-08","modifiedDate":"2021-01-12","category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2020/entry422.webp","description":"親愛なる人がフィリピンセブ島から日本に帰還するまでの手記を託してくれました。今回は「渡航編」でセブ島から日本に帰国するまでの流れをご紹介します（このシリーズは数回に分けて公開します）。最後まで踏んだり蹴ったりで涙がちょちょぎれます。","tags":["海外移住","ちー帰国"],"body":"親愛なる人がフィリピンセブ島から日本に帰還するまでの手記を託してくれました。 今回は「渡航編」でセブ島から日本に帰国するまでの流れをご紹介します（このシリーズは数回に分けて公開します）。 最後まで踏んだり蹴ったりで涙がちょちょぎれます。 手記を書いたのは元同僚。ざっくりどんな人かご紹介 この記事は私の元同僚による手記です。 ロックダウンの影響もありフィリピンから渡航が大変すぎて、今後日本へ帰る人たちに気をつけて欲しい点などを伝えたいという思いで寄稿いただきました。 ちなみに彼女のパーソナリティです。 自然豊かな日本の中部地方でのびのび育った元教員。オーストラリアに留学したり、働いていたので英語はペラペラ。 ※ プライバシーに配慮してモザイク処理をしてます。 セブでは一緒に買い物したり、昼から一緒に呑んだくれることができる重要な人でした。 1. VISA手続き編 2. 航空券購入 + バランガイ編 3. 渡航編（←イマココ） 4. 帰国後編 ここからは託してくれた手記をほぼそのまま掲載します。 VISA手続き・航空券購入を終え、いざ渡航 帰国日が決まるまで苦労の連続だったので本当に渡航できるのか心配でたまりませんでしたが、無事に日本へ帰国することができました。 ただ以前のフィリピンから日本への渡航とは変わった点がたくさんあるので読んでから帰国されると安心かと思います！ 私はフィリピン航空からセブ（18:15）ーマニラ（6:30）ー名古屋（11:30）のルートで帰国しました。 現時点で名古屋直行便は飛んでなく、このルートが一番最短時間だったのでこれにしました、 が、結果かなりしんどかったです、、、 名古屋への帰国方法に需要があるかわかりませんが、きっと成田、関空行きも変わらないはず！それでは私の渡航日記スタート〜！ 1、空港へ向かう Grab（タクシーなどの配車サービス）を取ってマクタン空港まで向かいました。平日の15時にセブ市を出発して、到着が16時10分。フィリピン航空から国内線は3時間前に空港に到着するようにとアナウンスが出ていましたが（国際線は4時間前）私は出発の2時間前に空港に到着しました。 こういうところに性格が出ますね。 2、空港到着 国内線のターミナル1に到着後、黄色のスタッフTシャツを着たにいちゃん達が迎えくれました。 そして、Traze(正式名称：Traze Contact Tracing)というアプリをダウンロード済みか確認されました。 これに登録しないと空港内に入れないとのこと。初耳だった私はその場でダウンロードを試みましたが私のiPhoneではダウンロードできないと表示され、パニック。 ※ IOS 13.0以降 これがNew Normalなのか！ と動揺していると黄色のにいちゃんが自分のスマホから登録できるからと貸してくれました。なんていいやつ！！ Trazeは接触追跡アプリで登録後、空港入り口にあるQRコードを読み取ると空港に入れるみたいです。（にいちゃんがå

1…¨éƒ¨ã‚„ってくれたのでよくわかってないｗ） 3、チェックイン 荷物検査のあとフィリピン航空のカウンターへ行きチェックインをしました。 第一関門だったMedical Certificate等をチェックされ無事にチケットを手に入れました！ ここで書類足りないって言われたらすべてが終わるのでめっちゃホッとしました。そしてここでもフィリピン航空の追跡サイト？への入力を求められます。QRコードを読み取ってすすめていくものです。 これもエラーになりパニック。 グランドスタッフ（グラウンドスタッフとは、空港で働く航空会社の地上勤務職員）が手伝ってくれました。 ちなみにこの間も黄色のにいちゃんは近くにいて私の荷物を持ってくれています。 案の定最後にチップを求められましたが、荷物持ちから、アプリ登録、案内等助けてくれたのでチップをあげました。 いつの間にかにいちゃんが2人になってたのはフィリピンのご愛嬌として受け止めました。 アプリ・Traze Contact Tracing登録義務化 あとで調べたら2020å¹´11月28日から国内線・国際線共にTrazeの登録が義務付けられてたみたいです。知らなかったー。私のように登録してなくても空港でどうにかなりますが、事前に終わらしておくと安心だと思います！ アプリをダウンロード（Android、iPhone、 Huawei 対å¿

1œï¼‰ã—、Individual（個人）として登録。あとは空港ターミナルでQRコードを読み取るだけ。 参考：フィリピンエアライン公式ホームページ : Download TRAZE CONTACT TRACING App 登録サイト：https://www.traze.ph/ 4、搭乗、マニラへ 17時ごろにゲートに着きました。 1人だったことと混んでいなかったのでチェックインはスムーズでした。ちょっとしたお土産屋さんやレストランは開いてました。 そして飛行機に搭乗してマニラへ。 飛行機はソーシャルディスタンスを取るため1席づつ空いてていつもより快適でした。 機内食に水とスナックが配られました。 5、マニラ到着 19時半にマニラ到着。乗り継ぎカウンターでどこで待てばいいか確認。 「預け荷物はピックアップ不要だからシャトルバスでターミナル2へ行って」 とのこと。 乗り場を聞くと「there」と指を指すだけ。お姉さん冷たい。 でもよくあることなのでその方向へ歩いていき、そこにいたおっさんに聞くと答えはもちろん「there」。 だからどこ？？って思いながら歩いて行ったら出口にたどり着いたので出口のガードに聞こうとしたらさっきのおっさんが来て 「出ちゃダメだよ！あそこ、あそこ！あそこのシートに座って待つんだ」と言われました。 よく見ると20ｍ先の壁際にあるイスに数人座ってました。 わかるかよ！！看板立てとけ！！と思いながら大人しく待ってシャトルバスに乗ってターミナル2へ。 私の便は翌朝6時半発だったので、ターミナル2で夜を明かさねばなりません。バスを降りて入り口近くのガードにチケットを見せると待機場所を教えてくれたのでそのまま入り待機場所へ。 待機場所と言ってもトイレと小さな売店があるだけです。外へ出ることは自由ですが空港の奥には入れません。 椅子は手すりがあるため横にもなれません。Jollibee（フィリピンの国民的ファストフード）もありましたがすでに閉まっていました（営業時間6am-6pｍ）。 セブの飲食店は9・10時まで営業しているところが増えていたのでその感覚で行った私がバカでした。 でもGrabは注文できるのでなんとかはなります。Arival Jollibeeとドライバーに伝えると来てくれます。 「Merry Christmas！」と元気に配達してくれたのでフォー（ベトナム料理）なのに箸が入ってなかったことは不問にしました。売店あってよかった。 結局この場所で6時間待機しました。 フィリピン人は床でイビキをかいて寝ていましたが、私は一睡もできず、ただひたすらこの文章を書いていました。お子さん連れの方はホテルを確保しておくことを強くおすすめします。 6、マニラでチェックインと出国審査 朝3時ごろ、ガードが「カウンターが開いたから入れるぞー」と起こしに来てくれました。まぁ、私寝てませんが。 私はすでにボーディングパスを手に入れていましたが念の為フィリピン航空のカウンターへ。 やはりそこでもNew Normalな手続きがありました。まず体温を測られ、ヘルスチェック用紙への記入を求められます。それを私はカウンターで提出しましたが、搭乗の際にまた同じ用に記入を求められたのでカウンターでの提出は不要だったかもしれません。 そしてここでもQRコードを読んでの入力作業が必要です。今回は国際線のため日本の厚生労働省が作ったサイトにアクセスし、各自QRコードを取得しなければいけません。 QRコードの画面が出てきたらスクショして保存すればいいんですが、私はボタンを間違えて画面を消してしまい再入力しました。一睡もしてないんだから仕方ない。でも何回も入力できることがわかりました。 私みたいに消してしまっても大丈夫でã

1™ã‚ˆã€‚これが日本到着時のPCR検査の際に必要になるっぽいです。New Normalですね。 この入力の際に帰国後の滞在先住所や連絡先を入力します。ここで入力した連絡先に帰国後電話がいくので家族の番号を記入するつもりの方は家族に伝えておくといいと思います。 最後にグランドスタッフに「PCR検査の証明書は？」と聞かれましたが「PCRは日本で受ける。Medical Certificateは持ってる。」と言ったら「OK」で終わりました。 『なんで聞いたの？ドキドキさせないでよ！』と思いましたがOKならOKです。 そしていよいよ書類準備に3ヶ月以上かかった出国審査です！すごくドキドキしながらパスポートと書類を渡しましたが、秒で終わりました。ホント秒。あんだけ準備したんだから当たり前っちゃー当たり前ですが、拍子抜けです。 あとは搭乗ゲートへ向かうだけですが、搭乗ゲートがまだ決まっていないからあとでアナウンスすると言われたのでそれまで入口付近でまた待機。朝4時時点でサンドイッチやフィリピン料理を売っているお店が2店舗開いていました。 この待ち時間が一番つらかったです。 眠いけど横になれない、頭働かない、寝過ごしたら終わる、空港寒い。 とか考えなã

1Œã‚‰1時間半待ちました。 乗り換えのつらいところです。結局ゲートのアナウンスは聞こえず、電子掲示板にも表示されなかったので、ガードに聞きました。 海外では情報は待つのではなく自分から取りに行くのが鉄則です。わからないことはすぐ誰かに聞きましょう。幸いフィリピンはどこへ行ってもスタッフっぽい人がいるので聞き放題です。 朝5:30にスタバが開くと聞いたのでコーヒーを買ってゲートへ向かいました。ゲートへ向かうと、簡易の受付カウンターがありスタッフがQRコードと、ヘルスチェック用紙を確認していました。これもNew Normal。 それが済むといよいよ搭乗です。 名古屋行きはほぼフィリピン人でした。席もガラガラで、『ラスト1席だって言われて急いでチケット買ったのにどこがだよ!？』と思いましたが3席分使ってゆったり帰れたのはよかったです。 機内ではマスクの着用は義務でしたが、フェイスシールドはどっちでもいいって感じでした。 7、アドバイス New Normalではいろんな情報をスマホを使って入力する場面があります。スマホは使える状態にしておきましょう。 携帯番号やフィリピンの住所を覚えてない人はメモしておくとスムーズです。私は毎回入力エラーが出てスムーズにいきませんでしたがその都度周りのスタッフが助けてくれました。現地でなんとかなります！ 一番大事なのは英語が苦手でも帰国前には必ず航空会社が出してるオフシャルな情報を確認してください。コロナの状況次第で頻繁にルール変更がありそうなので。 航空会社のオフィスへ行ってスタッフへ搭乗に必要な書類等を直接聞くのもいいと思います。私は3人に確認しました。みんな微妙に違うことを教えてくれましたが、私の場合PCR検査は不要だという点はみんな同じで安心しました。 →「チケットの買い方編」で後述します 機内はめっちゃ乾燥してるので乾燥対策はしっかりしましょう。 私はマスクしてましたが喉が痛くなって2回起きました。コロナに感染するリスクが上がる気がするので、こまめに水を飲むようにしましょう。 5分に1回水を飲むとウィルスに感染しないとテレビで言ってました。 寝れませんね。 でも機内で感染することも多いと聞くので感染対策はしっかりして、安全に帰国できるようにしましょう！ さいごに、管理人（かみーゆ）から 彼女は2020å¹´12月23日、無事日本に帰還しました。 アプリ・Traze Contact Tracingは必ずスマホのOSのバージョンを確認しておきましょう。 フィリピンのルールにブンブン振り回されて、なんとか日本に帰った彼女の手記がこれから帰国する方の一助となれば幸いです。 次は「帰国後編」を掲載予定です。わー最終回やーw。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry426","title":"プログラマー転職したい人に捧げる。現場が\\"リアルに求めるスキル\\"","date":"2021-01-05","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2021/entry426.webp","description":"昨今のプログラマー不足の現状と、再就職するために必要なスキルについて取り上げます。実は30年ぐらい前からエンジニア・プログラマーは不足してるそう。コロナ禍でIT業界を目指す人も多いと思います。せっかく高いお金を出して勉強してもなかなか就職も厳しいのも現実。プログラマーやコーダーとして現場で求められるスキルのうち、新米でもできそうなことをまとめました。","tags":["キャリアアップ・転職","駆け出しエンジニア"],"body":"今回は昨今のプログラマー不足の現状と、再就職するために必要なスキルについて取り上げます。 実は30年ぐらい前からエンジニア・プログラマーは不足しているそうですね。そして現在コロナ禍でIT業界を目指す人も多いと思います。せっかく高いお金を出して勉強してもなかなか就職も厳しいのも現実。 プログラマーやコーダーとして現場で求められるスキルのうち、新米でもできそうなことをまとめました。 本当に足りないのは〇〇プログラマー 2019年日本を出る前、昔勤めていたお世話になった会社へご挨拶に行きました。 雑談の中で聞いたのは「デザイナーもプログラマーも人材不足」とのこと。 そして現在に至るまで、IT人材育成のテックスクールの乱立が目につくようになりました。 昨年2020å¹´9月に仕事をやめてセブ島で充電生活始めてからというもの、Twitterでいろんな情報収集をしています。 そしたら #駆け出しエンジニア や #プログラミング初心者 などのハッシュタグのついたつぶやきがわんさかありました。 驚くほどみんなプログラミングやWebデザインを勉強してるじゃないですか。 ※ 余談ですが充電生活の間、Twitterよくやってたせいか80人くらいフォロワーが増えました。 確かに、現在コロナで厳しいですもんね。。。独学・テックスクール、どう学んでいるかは置いておいて、プログラマー・エンジニアを目指す人があまりにも多い。 「こんなにプログラマー目指す人いるのになぜ人材が足りないの？？」ってすっっっごく不思議だったんです。 先日、実はクライアントと話をしていて気づいた事があります。 プログラマーと言っても意味が広く、求められる人材は単にプログラマーではダメなんですよ。 ベテランが足りないんです。 しかも知人ベテランプログラマーに30年前から足りないと言われて驚愕しました。 人材を求めてる側は経験豊富なプログラマーが欲しい。でも今排出されているのはプログラマーの卵。 でもまだ「自分は該当しないや」とかæ€

1ã£ã¦è«¦ã‚ãªã„でください。 どんな経験豊富なプログラマー・エンジニアが求められているか、をまずは紐解いてみましょう。 人材を求める側の視点を考える テックスクールだろうが、独学だろうが新米にとって欠落しているのは経験です。 とはいえ、実務が積めるような環境ってなかなか難しいです。 いくら経験があっても、欲しいスキルが身についているとは限りません。経験って個人差がありますし、経験したところで学ぶスピードでさえ個人差があります。 だから人材が不足しているんです。 つまり「プログラマーの卵でも勝機はある」ということです。 経験や実務から学ばなくてもベテランエンジニアにより近づくために、「どんなスキルを身につけておけばいいか」という発想でお話します。 より具体的な話をしたいので、主に私が普段やっているフロントエンドエンジニアの経験を中心に進めていきます。 LEVEL1 : とにかく早く作業を終わらせる フロントエンドエンジニアに求められるスキルのひとつが「作業スピード」です。 ちなみに私の考える作業スピードの目安です。 単純なトップページであれば手戻りがあると仮定しても、遅くとも1週間で終わらせて欲しいですね。 LPであればボリュームにもよりますが、スクラッチ（Bootstrapなどのフレームワークなし）で控えめに言っても2、3日もあればコーディングが終わります。 早く作業するためのポイントがあります。 ショートカットを覚える エディターの補完機能やよく使うコードはスニペット登録をしておく タスクランナーなど作業効率が上がるツールは惜しみなく導入する 1秒、2秒のわずかな時間短縮の積み重ねが重要なんです。作業は格段に早くなります。 プログラマー・デザイナーだろうが、ショートカットは必須です。使えるよう徹底的に体へ叩き込んでやっとスタートラインに立てると思ってください。 あとは可能な限り身につけていきましょう。 作業を早く終わらせることができれば、単純にこなせる数が増え、あなたの価値が上がる。 LEVEL2 : 先回り力をつける ムダな作業や手戻り（リテイク）はできるだけしたくないものです。 カンプやクライアントの要望通りに作ったら不具合が出るなど気づいたら、修正や代替案を提案することも大切です。 伝え方にもよりますが大抵はうまくいきます。 デザインカンプをよく見てみるとパンくずリストなど、重要なパーツがないこともあります。 また、レスポンシブで表現するときある程度のブラウザの幅に変わったとき、確実にレイアウトが崩れるなどコーディング前に気づくこともあります。 先にそんなことを気づけるようになると、ムダな作業や手戻りを減らすことができますしクライアントにも喜ばれます。 手戻りやムダな作業を減らすために不要・必要な機能を見極められる先回り力をつけると幸せになれる。 LEVEL3 : よしな力をつける 現場に入るとデザインPCだけで用意されていて「SPはよしなで作ってー」ってなんてこともあります。 #### よしなとは？ 「よいように」というのが本来の意味で、現代では「適当に」「よろしく」とかの意味に使われるようになっています。 （出典：よしなにの意味とは） モバイルファーストな時代です。個人的に、モバイルデザインを作らないのはデザイナーの怠慢だと思っています。 しかし、HTMLやCSSの特徴やレスポンシブなどのWebの知識が浅いデザインカンプを用意されたところで工数がかかる。つまり、コーディング側の墓穴を掘ります。 手戻りも発生するし、納期も遅れる。逆に苦しいと思うことも。。。 ぶっちゃけPCに比べてモバイルの方がブラウザでの可視領域も狭いし、デザイン上できることは限られます。 パターンさえ覚えてしまえば「楽勝！」とまではいきませんが、よしなで作成することができなくはないです。 でã

1ã‚‹ã¨ä»˜åŠ ä¾¡å€¤ãŒä¸ŠãŒã‚Šã¾ã™ã€‚費用も上乗せできるようになります！ ただ、サービス精神でやりすぎると自分の首を締めるのでご注意を。 よしな力があればクライアントから喜ばれることもあるし、返って工数を省くことができることもある。 2021年、日本のエンジニア人材の卵を海外から見る 私は現在フィリピン・セブ島に住んでいます。 ブリッジSEとしてフィリピン人エンジニアとも仕事していました。 日本は平均年齢が45才、フィリピンでは25才。しかもフィリピンは人口が右肩上がりで若い人材が潤沢です。 そしてプログラミングってほとんど英語圏発です。 ネット上に無料の良質な教材（サイトやYouTube）がゴロゴロ転がっていますしね。 小学生から英語で教育を受けている彼らにとって、そんな教材から学ぶことなど朝飯前です。 有料オンライン教材などをのんびり勉強しているようじゃ、海外の優秀な人材に取って代わられますよwぶっちゃけ、人件費で負けますしね。 とはいえ、オフショアはオフショアでデメリットもあります。気になる方はこちらをお読みください。 動画もあります！あわせてご覧ください YouTubeもあります。 まとめ・経験が「何か」を学べば転職のチャンスがある 経験と一言で片付けますが、一体どんなスキルが必要なのか知れば努力で補えることもあります。 LEVEL1の「作業を早く終わらせること」なんて、ほぼ訓練でどうにかなります。 LEVEL2とLEVEL3にいたってはスキルというよりも、むしろ気遣い・心遣いです。 この先、IT人材として就職したい人ぜひ努力や気遣い・心遣いで補えるところは補って就職に臨んでください。 この記事が皆さんのプログラマーなどへの転職などの一助となると幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry425","title":"人生の岐路に立たされた。私がエンジニアになった本当のきっかけ","date":"2020-12-28","modifiedDate":"2025-03-11","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2020/entry425.webp","description":"みなさん、人生で困難に直面したり岐路に立たされたことはありますか？人間関係が辛い、もう仕事ができないなど、限界に達することはあると思います。私にも人生で最大の困難に見舞われ、人生を変えようと思ったきっかけがあります。そこからどのように学び、考えを変えたかなどをド直球に綴ります。些細な人間の経験ですが、みなさんの一助となれば幸いです。","tags":["キャリアアップ・転職"],"body":"【この記事はセンシティブだったため一度は公開を取りやめましたが、通常公開に変更しました】 みなさん、人生で困難に直面したり岐路に立たされたことはありますか？ 人間関係が辛い、もう仕事ができないなど、人は限界に達することはあります。 私にも人生で最大の困難に見舞われ、人生を変えようと思ったきっかけがあります。 そこからどのように学び、考えを変えたかなどをド直球に綴（つづ）ります。セブに住む小さな会社を営む小さな人間の経験ですが、みなさんの一助となれば幸いです。 人生を変えたい。環境が辛い、今の自分が認められない人へ捧げたい記事 この記事を書こうと思った理由です。 理由は何かしら組織に属すのが正義で、一歩踏み出せない人が多いから、です。 ちなみにそんな人たちに建前とかなしで本心を聞きたいです。 幸せに生きている自信はありますか？ あなたは周りの大切な人たちから「一緒にいて良かった」って思ってもらえる自信はありますか？ 人は絶対に変われます。もし変われなã

1„なら「変われないと思い込んでいる自分」がいるだけです。 なぜそう言い切れるか。ぜひ、続きをお読みください。 10年前にキャリアチェンジ。これまでの人生で最大の岐路に立たされた 私の人生の転機は今までメイキャッパー・ネイリストとしてキャリアを築いてきました。 賞も取り、この先の人生は順風満帆と確信していましたが、子共の持病で諦めたりしました。 最終的には仕方なく、Web業界へ転身しエンジニアになりました。 30代前半でした。 相当な覚悟をしたでしょう？ よく言われますがそんなことまったくありません。 この選択にいたるまでにそれ以上の衝撃があったからです。 努力しても逃げられないことに遭遇 私は昔からプライドが高く性格的にも勝気。負けたくない、変わりたいと思ったら努力でカバーできる。そう信じて生きてました。 そんな私にもどうしても状況を変えられない事態に陥りました。 10年以上前のことですが、ストーカー被害に遭いました。 いまだにトラウマでフラッシュバックするので、記事化することはもちろん、相当親しくないと周りに伝えることも控えてました。 具体的にどういった被害だったかというと、、、、 電話番号を変えても電話がかかってきたり、努めている会社に嫌がらせのファックスが来たり、家の前にゴミが撒き散らかされたり。無限の嫌がらせが続きます。 思い出すだけで吐き気がするので記事化できませんが、もっとエグいこともありました。 上司と一緒に警察にも行きました。 2010年代、当時でもストーカーは男女間の責任で、「実害（たとえば怪我など）がないとどうしようもありません」と相手にしてもらえませんでした。 嫌がらせは長期化し、強気だった私でも精神がじわじわと蝕まれました。 生まれてはじめてパニック障害になりました。 パニック障害とは？ 突然理由もなく、動悸やめまい、発汗、窒息感、吐き気、手足の震えといった発作を起こし、そのために生活に支障が出ている状態をパニック障害といいます。 パニック障害・不安障害 | 厚生労働省 外出するとまた嫌がらせをされるかもしれない。。。恐怖で冷汗が止まらなくなりました。そして帰宅後、息ができない苦しさでなんども床などに倒れ込みうずくまっていました。 これはパニック発作です。 今度はパニック発作が怖くなり、だんだん外出できなくなりました。 両親が相当心配し、母が神頼みしかないと思ったんでしょうね。どこからか入手した謎のお札を私に持たせました。 とても迷惑をかけ、心苦しかったのを覚えています。 追い打ち。ストーカー被害にあっている間に、親友が死に人生で最大の後悔をした 私には10代から仲の良い友だちがいました。 コンビニでお酒を買って地元広島の川辺や灯台の下でよく一緒に呑んだくれていました。 彼は頭の回転が早く、仲間内でリーダー的存在でした。 実は彼のおかげで若い頃フォトショップやイラストレーターの使い方も覚えました。 ※ 純粋な友だちです。 彼は当時優秀すぎたのか、彼は日本の会社組織の枠にハマりきれませんでした。 そして転職を繰り返し、とうとう定職に就けない状態までなりました。 うつ病です。彼はその後、何年もうつ病を患うことになります。 彼は「私が彼の理解者だ」とよく言ってました。私にとって彼が私を頼ってくれていることは、嬉しいことでした。彼の精神状態が多少悪くてもよく話をしていました。 ストーカー被害に遭うまでは。 ストーカー被害に遭うようになってからは、必死すぎて自分ことしか考えることができませんでした。いや、自分のことすら考えてなかったと思います。毎日ビクビクし、嫌がらせから逃げることばかり考えてました。 そんな時でした。 彼はいつの間にか自ら命を絶ってしまいました。 私は後悔はしない方なんです。が、この時ばかりは後悔しました。 「自分のことで頭がいっぱいで、親友のことを忘れていた」 なんて自己中。話聞くぐらいはできただろうに。 自分のことが情けなくて情けなくて悔しくて悔しくて。。。 それでも愚かな私は自å

1®…に引きこもっていました。 「東日本大震災」3.11の衝撃で目が覚めた ストーカー被害に遭い始め、すでに半年は経ってたと思います。翌年も私はまだパニック障害でした。 しばらく休職しつつ多少お給料をもらってました。回復の見込みもないので当時勤めていた会社も退職することにしました。 その頃の私は時間を消費するのが日課でした。そんなある日です。 安定剤を飲んで、いつものようにソファーに横たわってテレビをぼーっと見てました。 画面がパッと切り替わり、突然の津波の映像が目に飛び込んできました。 すべての放送が「東日本大震災」3.11が生中継に切り替わったのです。 あっという間に町も、人も、すべてが波に飲まれていく。あまりにも衝撃的で何が起きたかわかりませんでした。 数日経つとちょっとずつ理解が追いついていきます。 「生きたくても死んでしまう人もいる」 放心状態だった私の頭にポツポツと考えが浮かぶようになりました。 「なんてちっぽけなことでウジウジしていたんだろうか」 「雨風しのげる環境にいて命があるだけマシじゃないのか？」 私は震災被害者ではないのこれをきっかけに立ち直れたと堂々と言える立場ではないです。でも、明らかに 3.11 がきっかけで自分の悩みがアホらしくなりました。 東日本大震災は本当にたくさんの犠牲者を出しました。ニュースには上がりませんがいまだに二次被害もあるかと思います。 西日本に住む私には想像も及ばないぐらい大変だったと思います。 あれから10年以上経ちましたが、心からお悔やみ申し上げます。 人間は底まで沈んだら浮上する さて、十分どん底。ここからは浮上するしかありません。 今までのキャリアはバッサリ捨てよう。そして選ぶな ら一択でIT関連 と決めました。 亡くなった親友は若い頃、家庭の経済的事情で学校に行くことができませんでした。それでもIT関連を学びたかった気持ちがあり、彼自身も独学で頑張っていました。 彼が生きていた頃、フォトショップとイラレを彼から少し教えてもらました。今でもめちゃくちゃ感謝しています！ 私は生きてるんだから彼の分までやんなきゃね！もし私がIT人材になることができたら 彼の分まで夢も叶えられる じゃないですか^ ^。だから死にものぐるいで頑張りました。 その後の私は今までのパニック障害は「仮病だったの？」と思うくらい回復し、すぐに職業訓練校で受講可能なコースを探しました。お金はなかったので如何にお金をかけずに勉強する方法を模索しました。 この先どうやってエンジニアになったのかは割愛します。気になる方はこちらをお読みください。 岐路が私のマインドに影響。たくさんの学びを得た 生きたくないから死ぬ。 生きたくても死ぬ。 親友の自殺と東日本大震災は私の甘ったれた脳みそに衝撃を与えました。 命さえあればどうにかなるじゃん。 そんなことを考えるうちに、お金・地位に焦点が当たらなくなりました。 私の考えを大きく変え、多少の人の言うことには動じなくなりました。 睡眠時間なんざクソくらえ！あなたはなりたい自分になるために命がけで努力してますか？ 人生変えたいと言っている人に聞きたい。 命がけで努力してますか？ たとえばプログラミングスクールに大金叩いて通ったけど、プログラマーになれなかった。よくある話です。 大抵の理由は私から言わせれば、甘ったれんな。 本当に甘ったれんな。 お金さえ払えばプログラマーになれると思っていることが間違いです。 絶対業界入りたかったã

1®ã§ã€ä½“に叩き込むためプログラミングしまくり、コードを書きまくりました。 私は天才肌ではないのでむしゃらに努力するしかなかったです。ぶっちゃけ睡眠時間を削って、辛かったです笑 とはいえ1徹したぐらいじゃ死にませんし、今日の努力が明日の糧になります。 ちなみに、この頃の話をいつぞや講師を務めた職業訓練校の生徒にしたところドン引きされました。 命さえあれば人生自分の力で変えられる。チャンスが作れるだけラッキーですよ。 覚悟して死ぬほど汗かいて習得するぐらいの気持ちじゃないと人生なんて変わりゃしませんよ。 手を動かす、脳みそがちぎれるくらい考える、何でもいいです。自分がやってきた努力だけは将来裏切らないです。 信念は曲げない。信念を曲げることは自分を裏切ること 会社や組織にいると理不尽な考えなどを押し付けられることがあります。 生活のため私も昔は無理していました。 でも人ってマインド次第で変わるんですよ。 ここ数年、たとえ偉い人の命令でも納得できないことは首を縦に振らなくなりました。自分に嘘つくのが嫌だからです。 そして命令を聞かなくても、たとえクビになってもあなたも私の人生は終わりません。 それよりも絶対にしてはいけないことは、生まれてから死ぬまで付き合う自分を裏切らないこと。 私、昔いた会社で本音をぽろっと出してしまったことがあります。 「会社は私に犠牲を強いるけど、会社は私の犠牲になる？」 偶然役員が聞いていて苦笑いしていました。それを見て答えがわかりました笑 長いものに巻かれろ的に同調圧力に押しつぶされて、自分を無理に納得させていませんか？ 現状に納得するため「これでいいんだ」ってあれこれ理由をつけて自己暗示をかけてませんか？ たとえ今の会社を辞めても人生は終わりません。 そして、不自然なことばかりしていると心だけじゃなく表情に歪みが生まれます。40才ぐらいになるとどんな美男美女でも歪みが顔に染み付きます。 見たら一発でわかりますよ。 なので私はムリな作り笑顔をするぐらいならムスッとしとくことにしますw すべての困難は学びのために起こる 昔は 「これさえなければ」 「こいつさえいなければ」 って、すぐ何かや誰かのせいにしていました。 気づいたんです。過去起こったことも他人も変えられないんです。神様じゃないんだから。 家族をはじめとするたくさんの人に心配させましたが、ストーカーにあって良かったと心から思います。 加害者が執拗な嫌がらせに走った理由の1つに、私の性格にも問題があったからと気づけたからです。 昔の私は今以上に高飛車で勝気。一生懸命伝えれば、他人を変えられると思い上がってました。 相手を変えようと自分の正しさを主張しすぎることは人を傷つけたり反感や怨みも買います。 みんな正しいし、みんな間違ってる。世の中に正解なんてありません。 誰かを変えようとか思うこと自体が間違い。あなた、何様ですか？ってことですよ。他人を正そうとする必要なんてなくて放っときゃいいんです。 勝手に当人がどうにかしますし、助けて欲しけりゃ助けてって言うと思いますよ。 こんなことですが学べたことは心底感謝しています。 加害者がやったことはどんな理由であれ社会的には許せないことです。ただ擁護するつもりではありませんが、今はいい人かもしれません。人は自分次第で変われます。 「あん時よりはマシ！！！」 こんな

1厳しい状況下に置かれなかったら、 IT業界にチャレンジして辛い時、乗り越えられなかったと思います。 ダブルで感謝！ さいごに プログラミングの勉強をして挫折しそうな人、人間関係に悩み苦しんでいる人、やりがい搾取で疲弊している人。 すべて私にとって他人事ではないんです。その状況は過去の私でもあるので、当時の同じ気持ちの人の助けになればと思い私の経験と経験から学んだことをシェアさせていただきました。 なんども言いますが人生は変えられます。 変えられないとしたら「変えられないと思ってる自分」がいるだけ。 ちなみに、私にとっての最高の幸せは一緒に過ごしてくれた人が「楽しかった！かみーゆさんと出会って良かった」と記憶に残してくれることです。 人生は選択の連続。しかも、後悔のない人生はきっとないでしょう。 だから真剣に考えて行動しないといけないんです。 明日死んでも後悔してたまるか、ってぐらいの覚悟で取捨選択すると腹も据わります。 みなさんのこの先の将来が明るくなることを祈っています。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry424","title":"日本では入手困難？フェイスシールド選手権 in セブ島","date":"2020-12-27","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2020/entry424.webp","description":"フィリピン・セブ島ではどこへ行くにもフェイスシールド着用を義務付けられています。南国でのフェイスシールド着用は辛いです。しかしただで転ばないのがフィリピン。バラエティーに富んだフェイスシールドが売ってます。中でも厳選したものをご紹介します。","tags":["海外移住","セブ島エンジニア生活"],"body":"日本のみなさん、フェイスシールドは普段使ってますか？フィリピン・セブ島ではどこへ行くにもフェイスシールド着用を義務付けられています。南国でのフェイスシールド着用は辛いです。 しかしただで転ばないのがフィリピン。バラエティーに富んだフェイスシールドが売ってます。今回は中でも厳選したものをご紹介します。 フィリピンではロックダウンと共にマスクやフェイスシールド着用を余儀なくされる 2020å¹´4月よりフィリピンはコロナ蔓延で世界最長ロックダウンになりました。 許可証なしでは外出できなくなり、さらにマスクやフェイスシールド着用が義務付けられるようになりました。関所が設けられ、門限もあります。老人子供はいまだに外出できません。 2020å¹´12月、さらにフルタイプのフェイスシールドの着用の義務化が決まりました（らしいです）。ただでさえ暑い南国でのフェイスシールド着用。。。ツライ。 独断と偏見でフィリピンのフェイスシールドを紹介します！ こんな困難？な状況でもめげないのがフィリピン。 いつの間にかいろんな形のフェイスシールドが増えて、その日のお洋服のコーディネートに合わせて選べるようになりました。 実は私、20代の頃はメイクさん・ネイリスト、そして地方テレビ局のスタイリストをしていました。 センスには自信があります！！ 満を持してスタンダードなものからファッショナブルなものまで、フィリピンのフェイスシールドをご紹介します。 ※ 個人的な見解が含まれます。 今回、周りの人たちの協力の下たくさんのフェイスシールドを集めることができました。 アザーーース!!!! エントリーNo1。スタンダードなフェイスシールド コンビニ、スーパー、モール、路上などどこでも手に入るスタンダードなフェイスシールドです。 フェイスシールドが必要になった頃は150ペソぐらいしていましたが、現在50ペソ程度でどこでもすぐに手に入ります。 デメリットはとにかく持ち運びに弱く、すぐ傷だらけになります。あと自分で組み立てないといけないので不器用な人にはオススメしません。 ※ 1ペソ約2円です。 かみーゆ独断と偏見評価 おしゃれさ : 1 軽さ : 5 耐久性 : 1 お手頃さ : 5 入手の容易さ : 5 スタンダードなフェイスシールド補足情報・ダウンタウンで全材料購入可能！ フィリピンの代表的なダウンタウン・コロンストリートのAizilym Enterprisesという雑貨屋さんに行くとたった8ペソで全材料が手に入ります。 レジのあたりでこっそり？売ってますので、日本に帰国予定で小銭を稼ぎたい人は是非立ち寄ることをオススメします。 フィリピンのダウンタウンは決して治安がよくないので知り合いのフィリピン人などと行くことをオススメします。 興味ある方はこちらの記事を参考にしてください。 店名：Aizilym Enterprises MAP エントリーNo2。ハードタイプフェイスシールド・ハーフサイズ フルサイズの義務化さえなければもっともオススメするのがこのタイプです。 硬いし、軽い。マスクの上におおいかぶさらないので息苦しさを感じないです。 しかもカバンにさっとしまえて超便利。 もちろん透明なタイプもあります。 カラバリも豊富なので、恥ずかしがらずお気に入りの色を着用ã

1™ã‚‹ã“とををオススメします。 ちなみに私が愛用しているのはこちらのブルーのグラデーションタイプです。半分は透明なので視界がいいです！ めっちゃ気に入ってます。 ちなみに、男性にはこちらのミラータイプがオススメ。 イケメンに見えます。 多分。 私はコロンストリートの路面店で買ったのでたった130ペソでした。アヤラモールで買うと150 ~ 180ペソだったので安く入手しようとすると、路面店が断線オススメ！ 値切り交渉も可能です!! ちなみに私はこちらの白いフレームの透明タイプを持っていましたが、何度か落とし、壊れて柄が取れてしまいました。 ハ●キルーペではないので強い衝撃には弱いですが、フィリピンで手に入るものの中では耐久性抜群です。 かみーゆ独断と偏見評価 おしゃれさ : 4 軽さ : 4 耐久性 : 4 お手頃さ : 3 イケメンさ : 5 エントリーNo3。ハードタイプフェイスシールド・フルサイズ 続きまして先ほどと同じタイプのフルサイズのご紹介。 こちらもハーフサイズと同様、カラバリ豊富。もちろんスタンダードな透明タイプもあります。 個性派を目指すな断然ピンク。もちろんブルーやグリーンなどもあるので、その日の気分やラッキーカラーに合わせるといいかもです。 こちらはミラータイプです！ 顔がほぼすっぽりおおわれ、もはや誰かわかりません。 すっぴんの外出時にオススメです！ でもまてよ。 あれ？ あれれ、、、？ これ、どっかで見たことあるぞ、、、、 ・ ・ ・ 溶接工やん。。。。 そして弱点はとにかく重い。鼻の上から少しずつずり落ちます。 こちらもコロンストリート、125ペソで手に入れました。 もはや価格の基準がわからん。。。。 かみーゆ独断と偏見評価 おしゃれさ : 3 軽さ : 1 耐久性 : 4 お手頃さ : 3 職人度 : 5 エントリーNo4。フォルムが美しいフルフェイスシールド 先日ITパークのアヤラモールでさらにおしゃれなフェイスシールドを見つけました。 見よ、この美しい球状のフォルム。 こちらはレインボーです。 280ペソです。ちょっとお高い。 装着すると近未来感が半端ないです。これぞニューノーマル！ まるで自らをロボットと名乗る謎のフランスのアーティスト、Daft Punk（ダフト・パンク）のように瞬時になれますね。 ※ 楽曲は「One more time」が有名です。 将来、クラブが再開したら着用して行くことをオススメします。 Daft Punk（ダフト・パンク） ブラックのグラデはなかなか渋い。こちらも男性にオススメです。 ブラウングラデはこんな感じ。シックで上品です。 大人な装いに似合いますね。デートや結婚記念日のお食事に着用していくことをオススメします。 スタンダードな透明はもちろん、他にもたくさんカラバリがあります！ 1つデメリットを言っておくと、フォルムが顔にフィットしすぎて鼻息で曇ります。 かみーゆ独断と偏見評価 おしゃれさ : 5 軽さ : 4 耐久性 : 3 お手頃さ : 1 近未来度 : 5 エントリーNo5。大きな顔面でも安心！すっぽりかぶれるフルフェイスシールド ※ 今から紹介するのは私が所有しているフェイスシールドではありません。 おしゃれ系のフェイスシールドもサイズがまちまちで小顔じゃないとつけられないものもあります。 安心してください。 顔がでかい人でも安心してつけられるフェイスシールド見つけました。 なんと！かの有名なあの人が装着していました。 ・ ・ ・ ・ ちょっとチャビー（太っちょ）でも装着可能なフェイスシールドです！ 実際メトロ（フィリピンのスーパー）でサ●タさんと似たような体型のおじさんが同じフェイスシールドを着用していました。 かみーゆ独断と偏見評価 おしゃれさ : 1 軽さ : 1 耐久性 : 5 お手頃さ : 不明 ゆったり感 : 5 選手権なので順位発表します！！…の前に小休止。YouTubeもあるよ！ ブログの元ネタです！少し内容も違います。 ぜひこちらもご覧ください！ チャンネル登録してくれたら跳んで喜びます！好き❤️ ↓↓↓↓↓ かみーゆちゃんねる 結論・一番オススメフェイスシールドは？ 以上5つのフェイスシールドを紹介しました。 選手権なので一番ã

1®ã‚ªã‚¹ã‚¹ãƒ¡ã‚’発表します。 私のイチオシフェイスシールドは ・ ・ ・ ・ エントリーNo.4のフォルムが美しいフルフェイスシールドです！ 理由は 1. 軽い 2. おしゃれ 3. 持ち運びやすい からです。 ブラウン、ブラックあたりは半分透明で視界も悪くありません。フルフェイスの着用義務化が施行されても利用可能です。 フォルムもかっこいいし、お洋服にも合わせやすいのでぜひチャレンジしてみてください。 側（はた）から見るとやっぱり怪しいフルフェイスシールド・ミラータイプ 最近、このタイプがあまりにも気に入ってどこに行くときも着用しています。 人は己の姿をよくわかってないものです。 自分が写っている写真を見て、インスタ映えを凌駕する破壊力があることに気がつきました。 ※ マクタンの船着場付近で撮影。 おしゃれを通り越して、不審者にしか見えません。 ニューノーマルどころか、見事にニューアブノーマルです。 まとめ・フィリピンでは日本で入手困難なフェイスシールドがお手頃価格で手に入る フィリピンでは日本で考えられないようなデザインや色のフェイスシールドがお手頃価格で手に入ります。 コロナ禍でも苦境を楽しめるフィリピン文化に脱帽です。 日本でもいつかフェイスシールド着用義務付けられるかもしれないのでぜひ参考にしてください。 最後までお読みいただきありがとうございました。 おまけ・実はみんなちゃんとフェイスシールドを装着していない フィリピンではほどんどのモールやスーパーなどでフェイスシールド着用を義務付けられています。 が、誰一人まじめに着用していません。 着用すると前が見えないし息苦しいので仕方ないです。 まあ、まじめにルールを守らない。守るわけないのがフィリピン。 じゃあどうするか。 頭の上に乗っけてます。怒られたら着用するのが鉄板です。 フェイスシールドがヘアアクセサリーと化してるのでオシャレになるわけだw","noindex":true},{"slug":"entry423","title":"【npm-script】imagemin-cliを使って画像圧縮する方法【v8対応】","date":"2020-12-25","modifiedDate":"2023-01-25","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2018/entry268.webp","description":"2023å¹´1月にimagemin(v8ç³»)のESM対応ã

1—たCLスクリプトに対応しするため大幅にリライトしました。npm-scriptで画像を圧縮する方法をご紹介します。imagemin cliで画像を圧縮しようとして、フォルダ階層を保てないことがわかり、どうしたものかハマりました。メモとして残しておきます。","tags":["JavaScript","npm"],"body":"Error [ERRREQUIREESM]: require() of ES Module でコケた方、朗報です。 2023å¹´1月にimagemin(v8ç³»)のESM対応したCLスクリプトに対応しするため大幅にリライトしました。 npm-scriptで使って画像を圧縮する方法をご紹介します。imagemin cliで画像を圧縮しようとして、フォルダ階層を保てないことがわかり、どうしたものかハマりました。メモとして残しておきます。 npm-scriptとは？ 私の敬愛するICSメディアさんにとてもわかりやすい説明が掲載されていたのでそのまま引用しました！ ウェブ制作の現場では作業の自動化が流行っています。「Gulp」「Grunt」などのタスクランナーや「webpack」などのビルドシステムなどのツールにより人力の作業を減らすことができ、生産効率や品質の向上につながります。 どちらもNode.jsのモジュールとして動作するツールですが、実はこれらのタスクランナーを使わずとも、Node.jsインストール時に付属するnpm(Node Package Manager)を使用すれば、タスク処理が実現できます。 npmとはNode.jsのモジュールを管理するためのツールであり、タスク処理にはnpmの機能のnpm-scriptsを使用します。Gulpやwebpackは有用ですが、npm-scriptsと併用することでさらに便利になります。本記事はnpm-scriptsを使ったタスク実行環境が構築できることを目標に解説します。 Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ CLIとは？ CLIとはCLI(Command Line Interface) の略でコマンドラインから色々操作する方法です。 GitHubにさまざまなCLIが公開されています。 ESLint npm imagemin（今回はこれ使います） imageminをインストール npm で node module をインストールします。 imagemin-keep-folder というディレクトリ構造のまま画像を取得できるモジュールがESMだと使えなくなったので fs というディレクトリー構造を取得できるモジュールで対応します。 ディレクトリー構造はこちら。 imageminのv8系はESMのみサポートしています。 対応するためには、実行するファイルの拡張子を .mjs にするか、packege.json に \\"type\\": \\"module\\" を追記する必要があります。 そうすると、require 全て import での読み込みに修正する必要があったりと不便なため私は、.mjs で別ファイルとして取り扱うことにしました。 package.json側で画像圧縮（imagemin.mjs）を実行するシェルスクリプトを登録する package.jsonに以下のコードを予め追記しておきます。 画像圧縮のjsファイルを作り処理を書く imagemin.mjsファイルを作り以下のコードを書きます。 今回はこちらのブログ記事を参考にしました。 imageminでディレクトリ構成を維持する方法 【Node.js】fsでフォルダ(ディレクトリ)一覧を取得する方法【やたら簡単】 画像ディレクトリの取得 process.cwd() で現在のディレクトリを取得します。 fs でディレクトリがあれば、/src/assets/images 直下のディレクトリを取得します。 statSync() と isDirectory() で取得したいターゲットとなるディレクトリを存在を確かめて readdirSync() でその直下の取得します。 さらに isDirectory() メソッドを使ってディレクトリのみフィルタして取得します。 画像の圧縮 では早速画像の圧縮をしましょう。 mapで処理を回します。 imagemin-pngquantの公式ページで見てみると、配列で書いてねとあるので0 ~ 1までã

1®å€¤ã‚’指定します。 npm imagemin-pngquant 実行コマンド あとはコマンドから以下のコードを叩くだけ。 他のタスクと一緒に処理 私は他のタスクと一緒に処理しています。 シェルスクリプトは&で接続することで並列処理、&&では直列処理ができます。 私は普段laravel-mixを使ってますが、画像なんてあまり追加しないのでタスクを立ち上げる際に処理を実行するようにしています。 続けてシェルスクリプトを追加するのであればこんな感じになると思います。 まとめ タスクランナーに依存せず使いまわせるのはとっても便利です。 走り書きですが、皆さんのコーディングライフの一助になれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry422","title":"セブ島からNew Normalの帰国の仕方教えます（VISA手続き編）","date":"2020-12-23","modifiedDate":"2021-01-12","category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2020/entry422.webp","description":"親愛なる人がフィリピンセブ島から日本に帰還するまでの手記を託してくれました。今回は「VISA手続き編」でセブ島から日本に帰国するまでの流れをご紹介します（このシリーズは数回に分けて公開します）。海外で就労ビザを取るまでも取った後も大変！日本とはまったく異なる公共機関の常識がヤバすぎて何度も打ちひしがれつつ、その手続きに絶え間ない努力が必要です。ほとんど愚痴（らしい）ですがお読みください。","tags":["海外移住","セブ島エンジニア生活","ちー帰国"],"body":"親愛なる人がフィリピンセブ島から日本に帰還するまでの手記を託してくれました。 今回は「VISA手続き編」でセブ島から日本に帰国するまでの流れをご紹介します（このシリーズは数回に分けて公開します）。海外で就労ビザを取るまでも取った後も大変！ 日本とはまったく異なる公共機関の常識がヤバすぎて何度も打ちひしがれつつ、その手続きに絶え間ない努力が必要です。ほとんど愚痴（らしい）ですがお読みください。 手記を書いたのは元同僚。ざっくりどんな人かご紹介 この記事は私の元同僚による手記です。 ロックダウンの影響もありフィリピンでのVISA手続き大変すぎて、今後日本へ帰る人たちに気をつけて欲しい点などを伝えたいという思いで寄稿いただきました。 ちなみに彼女のパーソナリティです。 自然豊かな日本の中部地方でのびのび育った元教員。オーストラリアに留学したり、働いていたので英語はペラペラ。 セブでは一緒に買い物したり、昼から一緒に呑んだくれることができる重要な人でした。 1. VISA手続き編（←イマココ） 2. 航空券購入 + バランガイ編 3. 渡航編 4. 帰国後編 ここからは託してくれた手記をほぼそのまま掲載します。 フィリピンの9G（就労ビザ）から観光ビザへのダウングレードが難関 私は9Gと呼ばれる就労ビザで働いていました。フィリピンで日本人が会社を退職して帰国するためには9Gを観光ビザに変更する必要があります。 これがいわゆるダウングレードです。 このダウングレードが曲者（くせもの）です。 この手続きを終了せずに帰国すると不法に出国したとみなされ、皆さんの渡航歴に傷がつくことがあるそうです。 どんな影響があるかは正直わかりませんが、他国へ入国するときに説明を求められたり、入国に時間がかかるようなリスクは避けたいですよね。 ダウングレード手続きがコロナ禍でめっちゃ時間がかかる でもそんな大事なダウングレードの手続きがフィリピンではコロナ禍でめっちゃ時間がかかるようになっています。 実際、約2か月かかるとã

1‚¤ãƒŸã‚°ãƒ¬ï¼ˆç§»æ°‘管理局）から言われましたが、実質3・4か月待った人もいるそうです。（コロナ禍前は長くて1か月とのこと） 私も例に漏れず待てど暮せど、ダウングレードは承認されませんでした。 仕方ないので家族の事情を説明して帰国しないといけない理由を訴えてみた このままじゃ帰れんやん！と気づき、11月初めにマニラのイミグレ宛に「祖母が倒れたからすぐ帰りたい。早くダウングレードして！」（本当のこと）という内容を会社からの正式なレターとしてメールで送りました。 ※ フィリピンはレター（手紙）文化。とても有効的です。 本来は家族都合の場合は配慮するって聞いていたので、期待して待っていましたが返信なし。 電話でも何度もアタックしましたが繋がらない。 繋がっても「OK確認する、昼にまた連絡して」 電話する→繋がらない の繰り返し。 まったく進展がないので、セブのイミグレ、セブ領事館、日本にあるフィリピン大使館、外務省などに問い合わせましたが答えはみんな「できることはなにもありません」でした。 ホント使えねーな。って思ったりなんかしました。 結局私のダウングレードが承認されたのはふつうに2か月後。家族都合だとしても配慮はないんだと学びました。 みなさん、期待しちゃダメですよ。 世の中金次第。ダウングレードを時短する裏技があるらしい マニラのイミグレに直接行って5000ペソ払うと3日でダウングレードができると聞いたので早期の帰国を考えてる人はこちらも検討するといいと思います。 ちなみにメールは毎日送っていましたが祖母の写真を添付したメールには返信がきました。 PDCA大事。 ラスボスはECC（Emigration Clearance Certificate） マニラのイミグレに確認したらダウングレードが終わったと報告を受けたので、意気揚々とセブのイミグレに確認したらまだないけど？とのこと。 結局、私のダウングレードが正式に通達されたのは火曜日でした。 木曜日にマニラでの手続きが終わったと確認が取れていたのに、ここで6日間のロス。泣ける。。 しかし、これで終わらないのがフィリピン。 最後にECC（Emigration Clearance Certificate）の手続きをして正式に出国ã

1§ãã‚‹ã‚ˆã†ã«ãªã‚Šã¾ã™ã€‚(証明写真3枚必要） ECC（Emigration Clearance Certificate）とは？ 6か月以上フィリピンに滞在した外国人がフィリピンを離れるときに必要な出国許可証です。そもそも、フィリピンに滞在中にビザ代をきちんと払っているか、犯罪歴がないかを証明するためのものです。 この手続きは1日でできま、、、いや、できていたそうです。 現在は3日かかります。 『出国する外国人激減しとんのになんで余計に時間かかっとるんや！』 という心の声はしまい、3日後にECCを取りにイミグレへ。そこで新事実、もろもろの手数料9000ペソ（日本円で約1.8万円）！！ みなさんは財布に9000ペソは入れてる派ですか？私は入れない派です。 そんな外国人に突然言われても銀行口座もないのでおろせません。仕方なく家へお金を取りに行き、よーやくECCがもらえる！と思ったら、「月曜日に取り来て」とトドメの一発。 『もームリ、何回来たと思っとんの？あんた今日渡すって前言ったよね？鳥頭なの？』 って内容を1000倍に薄めた文句を伝えたところ、今日中に終わらせると言ってくれたのでそこからさらに2時間待ってついにすべてのVISAの書類を手に入れることができました！！ コロナ禍。海外からの帰国で学んだアドバイス 今（2020å¹´12月コロナ禍）ではECCにも時間がかかるのでチケットの渡航日はECCを提出してから4日はあけることをオススメします。 逆にすでに航空券買っていて、間に合わない！って言ったら早く手配してくれそうな雰囲気でした。交渉してみる価値ありです。 私はエージェントなしで会社のフィリピン人スタッフと駆けずり回って取得しましたが、エージェントを使えばもっと短い期間でできるかもしれません。 「私、もうイミグレへは行きたくありません」。 あ、あと火曜日のセブのイミグレは激混みなので避けることをオススメします！8:20時点で12組いました。この日は配偶者ビザの手続き日だからみたいです。 1日潰れる覚悟をして向かいましょう！ さいごに、管理人（かみーゆ）から 本日（2020å¹´12月23日）、無事日本に帰還したと連絡を受けました。 なんとかおばあちゃんにも会えてホッとしました。 今回ご紹介したのは氷山の一角。コロナ禍でのフィリピンからの帰国は想像以上に大変だったようなので、続きを記事化してご紹介します。 今後、フィリピンから日本に帰る人の一助となれば幸いです。そんな人たちのために彼女が記事を託してくれていますので^ ^ 次は、「航空券購入 + バランガイ編」です！ぜひ併せてお読みください。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry421","title":"Gatsbyブログサイト移行物語~CSSコンポーネントでオリジナルページを作ろう！！~","date":"2020-12-19","modifiedDate":"2021-01-12","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"Gatsbyでオリジナルの個別のページを作ります。CSSモジュールの追加の仕方とFontAwesomeプラグインの使い方も解説します！※ v4対応済み","tags":["React"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 Gatsbyでオリジナルの個別のページを作ります。CSSモジュールの追加の仕方とFontAwesomeプラグインの使い方も解説します！ ※ v4対応済み 今までのGatsbyの記事と注意点 現在ここまで記載しています。制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。 1. インストールからNetlifyデプロイまで 2. ヘッダーとフッターを追加する 2. 投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加 3. ブログ記事、カテゴリ、タグ一覧の出力 4. プラグインを利用して目次出力 5. プラグインナシで一覧にページネーション実装 6. 個別ページテンプレート作成 7. プラグインHelmetでSEO調整 8. CSSコンポーネントでオリジナルページを作ろう！！（←イマココ） 9. 関連記事一覧出力 11. タグクラウドコンポーネントを作成する 12. パンくずリストを追加する 13. 記事内で独自タグ（コンポーネント）を使えるようにする v5へのアップグレード方法はこちら。 今回に関しては、ブランチは用意してません。ご了承ください。 このシリーズではテーマGatsby Starter Blogを改造 この記事は一番メジャーなテンプレート、「Gatsby Starter Blog」を改造しています。同じテーマでないと動かない可能性があります。 headerもfooterもまったく違うデザインのページを作ります 今回Gatsby作るのはこのポートフォリオページです。 私が数年前、テキトーに作ってヘッドハントされたきっかけとなったページです。 静的ページでもともと実装していたのですが、せっかくなのでこの度Gatsby用にコードを書き直しました。 この通り、本サイトとテイストがまったく違います。 新たにページを生成し、デザインをガラッと変えるためにCSSを独自で実装する必要があります。 さて今回portfolioページを作るために必要なファイル構成です。 ファイル数が多いのでざっくり紹介します。 「ヘッダーとフッターを追加する」ではstyled-componentsでCSSを実装する方法も記事にしましたが、今回はCSSモジュールの使い方をご紹介します。パーツごとにスタイルを当てることができます。 しかも、file名を〇〇.module.cssと命名するだけでモジュール化できます。 CSSモジュールやコンポーネントでパーツ分けする利点 長年HTMLやCSSを書いていると直面する問題があります。別のパーツがCSSで汚染されたり再利用が難しかったり、それを防ぐために上書きを繰り返したりコードばっかり長くなります。 このように部品単位管理することで、汚染防止もできるし再利用が楽チンã

1«ãªã‚Šã¾ã™ã€‚ エコロジー！ ページの作り方はカンタン。ファイルをpagesディレクトリに放り込むだけ mdを介さない、テンプレートではないページの作り方はカンタンです。 pagesディレクトリにページとして出力したいファイルを放り込むだけです。 〇〇.jsであればページ名のパスはドメイン/〇〇/。〇〇/〇〇.jsであればドメイン/〇〇/〇〇/といった感じで公開されます。 ベースになるportfolio.jsを作成 portfolio.jsを作成します。 headerやfooterなどあくまでベースになる部分を中心にコードを書きました。 headerにスタイルを当てるためにheader.module.cssを作成し、HeaderStulesという名前でimportしておきます。 header.module.cssからdefaultというクラスのCSSを呼び出したい場合、classをHeaderStyles.defaultとします。 あとは、header.module.cssにはいつも通りCSSを書けばOKです。 これでheaderのスタイルが実装されます。 CSSモジュールごとにフォントも呼び出せます。 コンポーネントの追加 各塊ごとのコンテンツをパーツ化し、コンポーネントごとにパーツ化します。 今回は1つだけ紹介します。portfolioPartsに「お喜びの声」のパーツをvoice.jsを作成し、格納しておきます。 portfolio.js側で呼び出せるようにしておきます。 voice.module.cssを作成し、voice.jsにVoiceStylesという名前でimportします。 CSSを書くだけです。 メディアクエリもCSSモジュール内に書けます。 せっかくなのでfooterにFontAwesomeアイコンを追加 portfolioページは手抜きなので、元のページでもアイコン類などをFontAwesomeから拝借していました。 なのでGatsbyでもFontAwesomeアイコンを使えるようにします。 gatsby-plugin-fontawesome-css npmかyarnでインストールします。 さらに使いたいフォントも追加しておきます。私はTwitterやインスタアイコンを使いたかったのでfree-brands-svg-iconsも追加しました。 iconをimportします。 コンポーネントを記述すれば表示されるようになります！ まとめ・CSSモジュールでまったく違うデザインのページが作れる CSSモジュールを使うとまったく違うデザインのページが作れるだけじゃなく、コードも節約できます。ぜひ試してみてください。 次回は、カテゴリやタグが同じ関連記事一覧出力の仕方をご紹介します！2021年一発目の記事になると思いますのでよろしくお願いします！！！ 皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry420","title":"真ん中っ子はなぜ変わり者と言われるのか？その性格特徴と中間子の取扱説明書","date":"2020-12-18","modifiedDate":"2026-06-17","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2020/entry420.webp","description":"真ん中っ子（中間子）の性格や特徴が、なぜ「変わり者」と言われがちなのか。三人兄弟や長女・次女という家族構成の中で、子供時代をのびのびと過ごしてきた彼らが、他人の目を気にせず自分らしく自立していく理由と、リアルな取扱方を分かりやすく解説します。","tags":["家族","おもしろ"],"body":"みなさんの周りに中間子（真ん中っ子）はいますか？ よく「変わり者で予測がつかない性格」と思われがちですが、それは上と下に挟まれた環境で、自由に育ってきたからに過ぎません。 私は4人兄弟ど真ん中の中間子です。 初めて海外に出たと思ったら突然起業したり、 型にハマらないのが中間子 の特徴。 そんな私たちの性質を理解してもらうために、三人兄弟や長女・次女のケースも交えながら、リアルな取扱方を分かりやすく説明します。 兄弟の順番（生まれ順）が子供の性格に影響を与えるという現実 血液型や星座で性格判断する人もいますが、ぶっちゃけ根拠が薄いと思います。 そもそも人間の性格って育った環境に形成されると考えています。 育った環境といえば一番影響するのが家族構成です。とくに兄弟の順番ってもろ性格の違いが出やすいです。 一概にはいえませんが、性格を判断をする上でとても参考なります。 中間子は変わり者？三人兄弟の環境から形成される真ん中っ子の性格と特徴 私実は4人兄弟の真ん中。少子化が進む日本で珍しい中間子です。 私の子供の頃ですら、日本ではすでに2人兄弟が一般的でした。 さらに中間子は毛嫌いされることが多かったです。 中間子は変わり者が多いからという理由です。 私のことも中間子のことも嫌いにならないで！！！ 生い立ちから形成される中間子の性格を独断と経験からご紹介します。 そもそも両親から構ってもらえなã

1„（中間子症候群のリアル） 中間子は親から見て死角です。とにかく構ってもらえません。 私が子どもの頃、親は兄にお金を持たせて私を兄と同じ床屋で髪を切らせてました。 床屋なので男の子のような髪型にされるだけでなく、兄のお下がりを着ていました。 兄と兄の友達と外で遊ぶので秘密基地やカエルや虫の思い出ばかりです。 真っ黒に焼けて、しょっちゅう男の子に間違われてました。 私に比べて末っ子の幼い頃はいつもフリフリの可愛いスカートで着せ替え人形のようでした。正直羨ましかったです。 大抵の中間子は家族というコミュニティで扱いがもっとも底辺です。 そして幼少期から格差社会の洗礼を受けるのが中間子の宿命です。 親に見てもらえないから目立ちたくなる 子供の頃から親に見てもらえなかったから何とか目立とうとするのが中間子です。 私も思い出すと、親の注目を集めようと笑いを取る努力を惜しみませんでした。 実際変な格好ばかりしていました。 いまだにこんなことばかりしているのは昔の名残です。 幸せの基準が低い 子供の頃から、中間子は家族からの記念日のお祝いが雑になりがちです。 参観日もあまり来てもらえませんでした。もし来てもらえたなら飛び跳ねて喜びました。 いまだに、些細なことで喜びます。 最近母から「元気にしてますか？週に1回連絡しなさいよ」ってLINEが来ただけで嬉しかったです。 しかし現実は母に電話したところで「今忙しい」と言われてしょっちゅうブチ切りされます。 飛び出したら戻ってこない 中間子は長女や長男のように期待もされず、末っ子のように過保護にも扱われません。 親の盲点をついて好き放題やり放題になります。 私の人生をざっくりまとめるとこんな感じです。 面白くないから大学中退 イラストレーターになりたくて専門のお金を貯めてる最中にデキ婚 子育てしながらネイリスト 離婚 突然プログラマー 故郷を飛び出して海外生活 私以外の兄弟は会計事務所などめちゃ固い仕事をしています。 私だけ突然変異に育ってしまい、今となっては話が噛み合わない自信あります。 たまに私だけなんでこんなことになってしまったんだろうって悩むこともありました。 ちなみに、親戚の中間子も看護婦、海外ボランティア、エステティシャンで起業と結構自由に生きています。 変な中間子は私だけじゃないのでホッとします。 三人兄弟の長女・次女にみられる、自立したサバイバーとしての特徴 中間子は親の注目を集められないので外に目が向くようになります。 幼い頃から家族以外との付き合い方を覚えるので、外で生きていくのが上手いです。 友だちや仲間も状況に応じて見つけます。 親にレールを用意されていなかったので自分の道を自分で探します。 自分の人生は自分で決めて、どこでも生きていけます。 顔色は見るけど伺わない 親に期待もされていないし、ほかの子に比べて放置されているので親の顔色を伺う必要がありませんでした。 なので抑圧されませんので伸び伸び育ちます。 ただ、中間子は空気を読むのは上手いです。 気を抜くとほかの兄弟にオヤツを食べられてしまいますしね。 顔色を誰よりも気づいていますが、素知らぬふりもできます。 たまにうらやまさみしい 姉は褒められたり、兄は母にいつも構われたり、妹はかわいい洋服をたくさん買ってもらったり。。。 子どもの頃はいつも他の兄弟が羨ましくて仕方ない状態です。 時折、私だけ、、、と寂しくなることもあります。 基本自分で解決する 寂しくても、嫉妬してもやっぱり構ってもらえません。 なのでコンプレックスは自分で解決します。 自分のご機嫌は自分で取る術（すべ）を覚えます。 他人からの評価を気にせず生きられる 親からは評価の対象ですらなかったã

1®ã§ä»–人からの評価をあまり気にしません。 私自身、他己承認欲求は低い方だと思います。 それよりも自分が自分をどう思えるかの方が大切です。 たとえ彼氏から「鼻毛出とるで」と言われても、恥ずかしい気持ちよりナチュラルに笑いをとれた方が嬉しいです（実話）。 ようは基本自分が心地よければよいのです。 まとめ：真ん中っ子は放っておけば良い。自立した中間子の取扱方 中間子は好きに生きていくので無理に取り扱おうとせず放っておけば良いんです。 お調子者に見えて、他の兄弟をめっちゃ観察しているのでどこでも生きていけるサバイバーです。 私も中間子に生まれたからこそ、親だけでなく誰の顔色も伺わず今まで自由で好きに生きてこれました。 中間子サイコー！！！ 日本では中間子は絶滅危惧種。 そんな中間子を今後ともよろしくお願いします。 不機嫌な長男・長女無責任な末っ子たち 「きょうだい型」性格分析＆コミュニケ-ション /ディスカヴァ-・トゥエンティワン/五百田達成posted with カエレバ楽天市場Amazon ただ、何番目に生まれようと変な人は変です。 人と違ってもいいじゃないですか！変だと思う自分を認めて、もっと気楽に生きていきましょ。 くすっと笑える昭和のお父さん版はこちら。 長女版と母親版も書きました！よろしければ併せてお読みください。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry418","title":"Gatsbyブログサイト移行物語~プラグインHelmetでSEO調整~","date":"2020-12-16","modifiedDate":"2022-01-03","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"Gatsby記事もこれで8記事目となりました！！表示が早いだけではNG!!!サイトをちゃんと機能させるため、SEOで出力する情報を調整しました。パンくずやページの構造化データやOGP画像なども調整しています。※FBシェアにおけるcanonilcal属性を修正しました。※GA4に対応しました。","tags":["React"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 Gatsby記事もこれで8記事目となりました！！表示が早いだけではNG!!!サイトをちゃんと機能させるため、SEOで出力する情報を調整しました。パンくずやページの構造化データやOGP画像なども調整しています。 ※FBシェアのcanonilcal属性を修正しました。※GA4に対応しました。※ v4に対応しました。 今までのGatsbyの記事と注意点 現在ここまで記載しています。制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。 1. インストールからNetlifyデプロイまで 2. ヘッダーとフッターを追加する 2. 投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加 3. ブログ記事、カテゴリ、タグ一覧の出力 4. プラグインを利用して目次出力 5. プラグインナシで一覧にページネーション実装 6. 個別ページテンプレート作成 7. プラグインHelmetでSEO調整（←イマココ） 8. CSSコンポーネントでオリジナルページを作ろう！！ 9. 関連記事一覧出力 11. タグクラウドコンポーネントを作成する 12. パンくずリストを追加する 13. 記事内で独自タグ（コンポーネント）を使えるようにする v5へのアップグレード方法はこちら。 このシリーズではテーマGatsby Starter Blogを改造 この記事は一番メジャーなテンプレート、「Gatsby Starter Blog」を改造しています。同じテーマでないと動かない可能性があります。 プラグインHelmetとは？ Helmetは「Gatsby Starter Blog」に最初からインストールされているプラグインで、head内にメタタグをまとめて出力してくれます。 今回ファイルの追加はとくにしません。 基本的には既存ファイルのsrc/components/seo.jsを改造します。 OGP画像が取得できるように下準備 Facebook、twitter、スマホでのGoogle検索一覧にも（運が良ければ）サムネイル画像が表示できるようにします。 OGP画像は以下のように出しわけします。 ブログ記事...投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加で設定した、キービジュアル画像 ブログ記事以外（一覧やトップページなど）...共通画像 基本のアイキャッチの設定のあるblog-list.jsを改造する 画像のパスを取得するため、GraphQLのスキーマ allFile に publicURL を追加します。 OGP画像や検索などで表示されるサムネイル画像をアイキャッチと違う画像サイズを取得することもできます。リサイズされたパスを取得する方法についてはこちらをご覧ください。 コンポーネントに値を付与します。ogp画像ã

1®ãƒ‘スを取得し、seo.jsに値を渡します。 ページを出力しているすべてのテンプレにlocation属性を追加します。 seo.jsを変更します。 補足。og:typeをトップページ以外を判定してwebpageを出力しています。 Twitterカードもサイズをお好みで変えてください。 日本語にするのも忘れずに。 URLの正規化をする このサイトは投稿が増えると、一覧ページが無限に増えます。 類似ページが何個もあると検索エンジンに認識されるのはSEO的にもよろしくないので、カノニカル属性を使ってURLを正規化します。 ※ FBシェアにおけるパラメーターの不具合を発見しcanonilcal属性を修正しました。 ### canonical属性とは？ canonical（カノニカル）属性とは、Google、Yahoo!、MSNなどの大手検索エンジンがサポートするURLを正規化するためのタグです。 同一のコンテンツが複数のURLで閲覧できる状態になっている場合、検索エンジンがインデックスするべきURLを統一させておく必要があります。 SEO対策において必須の内部対策です。 URLに/page/数字/を含む場合は除去し、URLをcanonical属性として出力します。 構造化データ（JSON-LD）追加 構造化データ（JSON-LD）を追加します。トップページはtypeをWebSiteそれ以外はWebPageとします。 またブログが記事のもののみ、BlogPosting（この投稿はブログだよ！！って検索エンジンに教えます）の構造化データを追加します。 ページのデータ seo.jsに構造化データのJSONを出力できるようにします。markdownファイルも公開日はもちろん、更新日（modifiedDate）が取得できるようにしておきます。 何が大事って、更新されて、手が入っているページかです。古い記事でも更新していることをアピールできることが大事です。 JSONデータを追記して、出力します。 パンくずリスト パンくずリストの構造化データも作成します。先ほどページ用に作ったJSONデータを格納した変数jsonLdと結合させます。 現時点では目に見えたパンくずリストはありませんが（後日記事書きました）、SEO上重要です。検索画面で親ページが日本語で表示されます。 ブログ・カテゴリ・タグのテンプレにtypeを追加します。こちらはカテゴリのテンプレのSeoコンポーネントです。 属性がちゃんとセットされているか確認しておきましょう。 トップページ以外にパンくずの構造化データを追加します。 コードがきちんと動いているか、エラーがないかなどはリッチリザルトテストで確認しましょう。 プラグインを使ってGoogleAnalyticsを追加（2021å¹´4月6日追記！） プラグインを使ってGoogleアナリティクスで計測できるようにします。 ~~gatsby-plugin-google-analytics~~じゃなく、gatsby-plugin-google-gtagを使います！ ※ 通常のGAタグのIDを使い、GA4と連携させます。 プラグインをインストールしたら、gatsby-node.jsに追記します。 Googleアナリティクスはプラグインの一番上の方に追記してください。 トラッキングIDは直接書くこともできますが、Netlifyであれば環境変数で設定する方がベターです。 環境変数はNetlifyの管理画面から設定したいプロジェクトを選び、deploy build > environmentを開きます。 あとはEnvironment valiables（環境変数）を登録するだけです。 process.env.プラス設定した変数名で呼び出せます。 念の為analyticsのトラッキングコードIDの調べ方です。 Analyticsの管理画面から確認できます。 ここまでできたらあとはデプロイしたらanalyticsでトラッキングできるようになります。 Search consoleと連携 search consoleも連携しましょう。メタタグにgoogle-site-verificationを追加するのがカンタンです。 メタタグはsearch consoleの管理画面 > 設定 > 所有者の確認 >「HTMLタグ」から調べることができます。 プラグインを使ってサイトマップを出力 最後にサイトマップの出力をしましょう。 これでsearch consoleから、いつでもサイトマップを取得できるようになります。 gatsby-plugin-sitemap siteMetadata内のsiteUrlに必ずドメインを設定してください。 私のケースではページネーションで生成されたページや404をサイトマップから除外しました。 ルートに出力するように設定しました。 メインのサイトマップファイルはsitemap-index.xmlとして出力されます。 ここにsitemap-0.xml、sitemap-1.xmlという感じで追加されていきます。 Search Consoleからサイトマップを登録しておきます。 まとめ・SEO情報が更新されたらブログを書くのが楽しくなる！ 昨年は突貫でかなりやばいコードを書いていて申し訳な気持ちですが少しまともになりましたw。 FBやTwitterでのシェアしてOGP画像が表示されるようになりました。 皆さんのコーディングライフの一助となれば幸いです。 次の記事は「CSSコンポーネントでオリジナルページを作ろう！！」です。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":false},{"slug":"entry417","title":"【海外プチ移住】フィリピン・セブ島で安全に生活（生活費も紹介）","date":"2020-12-15","modifiedDate":"2022-07-05","category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2020/entry417.webp","description":"将来海外移住を考えている方へ。フィリピンでは最長3年間観光ビザで滞在できるってご存知ですか？フィリピンは海外でのプチ移住が気軽に体験できる国でもあります。公用語は英語。暖かくて物価も安い。海外ノマドを目指すフリーランスなどにとってもオススメ。安全なエリアのコンドミニアムの選び方、実際の生活費。将来海外移住やセブ島に来たい方へ、セブ島での治安との付き合い方をお伝えします。","tags":["セブ島","セブ島エンジニア生活","海外移住","フリーランス"],"body":"将来海外移住を考えている方へ。フィリピンでは 最長3年間観光ビザで滞在 できるってご存知ですか？ 現在はコロナの影響などで行き来が難しくなりましたが、フィリピンは海外でのプチ移住が気軽に体験できる国でもあります。公用語は英語。暖かくて物価も安い。海外ノマドを目指すフリーランスなどにとってもオススメの国 です。 最近実は上手に治安というデメリットと付き合うため、より安全なエリアのコンドミニアムに引越しました。セブ島で実際にかかる生活費もお教えします！ 将来海外移住やセブ島に来たい方へ、セブ島での治安との付き合い方をお伝えします。 セブ島は気軽にプチ海外移住ができる場所！ フィリピンは年中暖かく、物価も安い。 公用語は英語なので中学レベルの英語を話すことができれば、日常生活でのコミュニケーションには困りません。 フィリピンは海外移住初心者にとても住みやすい国です。 観光ビザで延長さえすれば3年もの間滞在できるので、3 ~ 4か月の短期のプチ海外移住を体験するのも夢ではありません。 ※2020å¹´12月時点です。ルールはよく変わります。 とくにセブ島がオススメな理由です。 フィリピンの首都マニラに比べセブ島は治安が比較的いいからです。 YouTubeも公開しました！！ YouTubeも公開しましました！！引っ越し当日の様子など納めてますのでよろしければご覧ください！ フィリピンには外国人向けのキレイで安いコンドミニアム（マンションみたいなもの）がたくさんある フィリピンセブ島は海外移住者向けに、プールやジム付きの快適なコンドミニアムがたくさんあります。 しかも家具や電化製品も備え付け。手ぶらで入居できます。 24時間警備員がいたり、コンドミニアムによっては週1度ハウスキーピングが入るところもあります。 まだまだコロナの影響でコンドミニアムが安い！ 2020å¹´4月よりロックダウンの影響で外国人居住者は激減しました。 入居者の減ったコンドミニアムオーナーにとってはピンチ。キレイで新しいコンドミニアムが安価に借りられるようになりました。 自国に戻らない外国人にとってはチャンスです！！ この度私も「セブポット」さんの協力で引越すことにしました。 私が今回引っ越すのは日本人も多く住むITパークです。 他の地域に比べ治安も格段によく、ゴミも比較的落ちておらず清潔な地域です。 ※ 現在はロックダウンも解除、観光も再開され徐々に値段が上がりつつあります。 海外移住を検討する方へ。セブ島の物価は魅力！！私の月の生活費を公開します 私がセブ島に住み続ける理由の1つに物価が挙げられます。 ちなみにこちらは引越す前の月々の生活費です。 | 項目 | 費用（ペソ） | | -------------------------- | ----------------- | | 賃貸（インターネット込み） | 18,000 | | 電気代 | 3,000 ~ 5,000 | | 水道代 | 200 | | 携帯代 | 400 | | 合計 | 21,600 ~ 23,600 | 日本円で約4~5万といったところです。 ジム・プール付きで、24時間エントランスにガードが配備されています。 ※現在ジムはコロナの影響で使用不可です。 より治安のよいエリアに引越しますが、月額家賃がなんとネット代込みで1.7万ペソに！ 1000ペソほど節約できます。サイコー！！！ ちなみにこちらは私の日本での月の固定費です。 | 項目 | 費用（円） | | -------------- | ----------------- | | 賃貸（3LDK） | 65,000 | | 電気代 | 3,000 ~ 8,000 | | 水道代 | - | | ガス | 5,000 | | インターネット | 5,000 | | 携帯代 | 10,000 | | 合計 | 85,000 ~ 93,000 | ※私はひとり親なので水道代はタダした。 広島郊外の築20年の小汚いコーポに息子と住んでいました。 食費・息子の学費や交際費など、少なくとも月トータルで20万円以上使っていたと思います。 ひとり親の補助があっても生活費は現在の倍以上のかかっていました。 現在の方が外食やレジャーも楽しみプチリッチな生活が実現できています。 ほどほどに日本人も住んでいるし、フィリピンは海外移住や海外ノマドを目指す人にぴったりの国です。 ※ 2022å¹´7月現在、ロックダウン前と家賃金額は変わらず過ごせています。 海外移住はやっぱり治安が不安。治安と上手に付き合う方法 海外移住の課題といえば治安です。 比較的治安のよいとされるセブ島でも、地域によっては危ない場所もあります。 ぶっちゃけ、「治安がいい国世界ランキング6位」の日本からすればどの国も治安が悪いです。 海外に住みたいのであれば、治å

1®‰ã¨ã©ã®ã‚ˆã†ã«ä»˜ãåˆã†ã‹ãŒãƒã‚¤ãƒ³ãƒˆã«ãªã‚Šã¾ã™ã€‚ 治安と付き合うため、「フィリピンの治安」を理解する なぜフィリピンの治安は悪いのか。 理由は主に3つです。 1. イスラム過激派組織による爆弾テロ事件や身代金目的の誘拐事件等が多発（ミンダナオ地域の中部以西）。 2. もともと麻薬大国だったフィリピンはドゥテルテ大統領による「麻薬戦争」が勃発。麻薬所持・使用者は射殺していいとのこと。身代わりに殺される子どもがあとをたたない。 3. 貧困のため国全体で犯罪に走る人が多い。マニラを中心とした都市部ではに日本人を狙った強盗、窃盗、詐欺、恐喝が日常的に横行。 日本の外務省はフィリピンの渡航レベルを1 ~ 3に定めています。レベル3の「渡航中止勧告」地域もあります。 #### フィリピンの危険レベル ミンダナオ地域の中部以西…レベル3 パラワン州南部 ~ ミンダナオ地域の中部以東…レベル2 地域以外のマニラ首都圏を含む全地域…レベル1 レベル1：十分注意してください。（継続）レベル２：不要不急の渡航は止めてください。（継続）レベル３：渡航は止めてください。（渡航中止勧告） 危険情報詳細・フィリピン | 外務省より抜粋 ※ 補足しておくと、現在外務省によるとコロナ感染のレベルで見たフィリピンへの渡航レベルは3です。 私の住む中部ビサヤ地域、とくにセブ島は比較的治安のいい地域です。 にもかかわらず、はじめてフィリピンに来て2日後、私はiPhoneを盗まれました。 スリなどならまだマシです。 ホールドアップといって銃を突きつけられ、金品を奪われることも少なくありません。 犯罪などに巻き込まれ、毎年数名の日本人が亡くなります。 とくにクリスマスシーズンのフィリピンの治安は悪化しやすいです。 私がセブ島にはじめて訪れた2019年。 今頃だったと思います。SMモールという大きなモールで銃撃強盗事件が起きました。しかも今年実行犯は出所とともに殺害されてしまいました。 フィリピンでの治安対策 私が治安と付き合うために普段心がけていることがあります。 1. たとえ日中でもストリートを歩くとき、カバンはたすき掛けにしさらにしっかり抱え込んで歩く。 2. 明るくて人通りの多いところを歩く 3. 不要な夜分の外出は避ける 4. 暗くなったら移動手段にタクシーを使う 5. 街全体が治安のよい場所に住む とりわけ住むエリアについてです。自分の居住する場所（コンドミニアムなど）を中心に広範囲で安全であることがポイントです。 フィリピンではいたるところにスラム街があり、コンドミニアム自体は安全でも街そのものはそうでもないこともあります。旧住居エリアがそれに当たりました。 普段、居住する町を歩いているだけでも「日本人だから」という理由で目をつけられる可能性があります。 平和ボケした日本人なんてカモ以外他ならないです。肌の色が違うし、服装や振る舞いですぐバレます。 何よりも大切なのはターゲットにならないことです。 そして、フィリピンはまだロックダウン中です。 多くのフィリピン人がロックダウンにより職を失っています。 ロックダウン中は例年より治安は悪化しているはずなので、身を引き締めて行動していました。 セブ島に初渡航された方のためによくあるトラブルや犯罪についてまとめました。あわせてお読みください。 おまけ・日本では考えられない！電気代が高いトンデモ理由 物価が安いはずのフィリピン、電気代だけはやたら高いと思いませんでした？ 息子と二人暮らしだった日本の3LDKのコーポより、一人暮らしワンルームの方が明らかに高いです。 実はフィリピンは電力を中国から買っています。 自国でほぼ発電していないのでとてもお高いです。 フィリピン人は命がけで電気を盗む 電力が高いせいで盗電する輩（やから）もいます。 電気を盗むなんてはじめて聞きました。 しかも盗電は命がけ。春先から火事が増えるのはそのためです。 私の知っているフィリピン人のエピソードです。やたら月の電気代が高いなーと思っていたら隣人に自分ちの電気を盗まれていたそうです。 中国からの輸入に頼りつつ、電気を盗む輩（やから）もいるのでさã

1‚‰ã«é›»æ°—は高くなります。 盗電のせい？フィリピンの電線が絡まりようがとにかくひどい ちなみにご覧ください。この絡まった電柱のコード。すごくないですか？ 挙げ句の果てには枯れ木が絡まっています。。。 この煩雑さを見るだけで私は気が狂いそうです。 盗電で電柱からコードが引きちぎられるのかあちこちで電柱から垂れ下がってとても危ないです。 毎年盗電しようとして感電するフィリピン人が多くいると思います。。。。 まとめ・治安とうまく付き合えばセブ島海外移住は悪くない！ 自分が外国人である自覚をもって羽目を外さなければ、セブ島はとても暮らしやすいところです。 ついでに、なぜここまで私が治安に対して神経質なのかもお話ししておきます。 私が40歳過ぎているのにかかわらず、お恥ずかしながら私の両親は超過保護です。 未だ「お前が海外に行くから悪い！」と父親からチクチク言われます。 私がセブ島に引越したことに対して、まだ納得してません。 うちの両親のような過保護な親族からすれば子どもが海外に住むだけで不安で仕方ないのです。 最近今よりも安全なところに引越すと両親に伝えただけでメチャ喜んでました。 「治安とうまく付き合う」ことは海外移住の夢と親孝行を両立できます。 この記事が海外移住をお考えの方の一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry416","title":"Gatsbyブログサイト移行物語~個別ページテンプレート作成~","date":"2020-12-14","modifiedDate":"2022-01-01","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"GatsbyでプライバシーポリシーやAboutページなど記事一覧のループと分ける方法をご紹介します。","tags":["React"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 GatsbyでプライバシーポリシーやAboutページなど記事一覧のループと分ける方法をご紹介します。 今までのGatsbyの記事と注意点 現在ここまで記載しています。制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。 1. インストールからNetlifyデプロイまで 2. ヘッダーとフッターを追加する 2. 投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加 3. ブログ記事、カテゴリ、タグ一覧の出力 4. プラグインを利用して目次出力 5. プラグインナシで一覧にページネーション実装 6. 個別ページテンプレート作成（←イマココ） 7. プラグインHelmetでSEO調整 8. CSSコンポーネントでオリジナルページを作ろう！！ 9. 関連記事一覧出力 11. タグクラウドコンポーネントを作成する 12. パンくずリストを追加する 13. 記事内で独自タグ（コンポーネント）を使えるようにする v5へのアップグレード方法はこちら。 このシリーズではテーマGatsby Starter Blogを改造 この記事は一番メジャーなテンプレート、「Gatsby Starter Blog」を改造しています。同じテーマでないと動かない可能性があります。 個別ページテンプレートの作り方 ポイントはループに含めないという点だけです。今回はブログ詳細一覧をコピーしてテンプレートを作成しました。 ファイル名をpage-post.jsとしておきます。 createPageで個別ページを生成する gatsby-node.jsにページを生成するためのコードを追記しておきます。 createPage()関数でページは生成されます。 filterでfrontmatterのpageTypeがblog以外のものを抽出します。 個別ページを出力するテンプレートpage-post.jsの編集 記事のIDが一致するものを出力するように設定します。 privacy-policy.md ファイルを追加し編集 プライバシーポリシーページを追加します。 これで個別ページが追加できるようになりました。 まとめ・個別ページの追加はとってもカンタン とってもカンタンでしたね！ 次回はGatsbyサイトでのOGP画像出力やプラグインHelmetを使ったSEO対応の記事です。 皆さんのコーディングライフの一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":true},{"slug":"entry415","title":"セブ島オフショア会社設立の記録｜理想の教育とフィリピンの労働実情","date":"2020-12-13","modifiedDate":"2026-03-15","category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2020/entry415.webp","description":"2021年、フィリピン・セブ島で「オフショア会社」を立ち上げた当時の記録です。縦割りの組織を廃し、実践的なスキルを磨く「教育のプラットホーム」を目指した決意。そして、現地で目にしたフィリピン人労働者の切実な実情とは。2026年の視点から、この挑戦が今の自分に与えた影響を追記しました。","tags":["キャリアアップ・転職","フリーランス","海外移住"],"body":"【2026å¹´3月 追記】 この記事を書いてから、早いもので5年以上が経ちました。 当時、理想の教育とフラットな組織を目指してスタートしたこの挑戦。その後、実際に経営を経験する中で、未払いトラブルなどの厳しい現実に直面し、立ち止まった時期もありました。 しかし、この記事に書いた「食べていけるスキルを身につけさせる」という信念や、フィリピンで見た「家族のために働く人たちの熱量」は、今でも私の仕事観の根底にあります。当時の青臭くも真剣な決意を、これからの自分への戒めとして、そのまま残しておきます。 --- 来年2021年仲間と一緒にこのフィリピン・セブ島で「オフショア会社」を立ち上げることになりました。 情報配信のため、YouTubeもスタート。合わせて、会社設立の経緯とフィリピンの実情をお話します。 セブ島からビジネスを発信するためにYouTubeチャンネル設立。YouTubeだからできること 私がセブ島に来たのは2019å¹´4月。海外で働くのなんてはじめてでワクワクしながらマクタン空港に降り立ったのを覚えています。 最初は必死に働いていましたが、ロックダウンで自分を見つめ直す時間ができました。消耗する働き方にピリオドを打つため、2020å¹´9月に退職。 今後の人生をどうしようかと考えていた時ふと思い出しました。 フィリピンに来る前から私は教育がやりたかったんだって。 いろんな人に相談しているうちに、そのプラットホームとして仲間とオフショア会社を設立することになりました。 フィリピン・セブ島での生活やビジネスについてもっと発信した方がいい。文字ではなく映像だから伝わることもあります。 なので、YouTubeチャンネルを設立しました。 とはいえ、私は世間一般でいうYouTuberとかになるつもりはありません。 飾らず等身大で発信しますのでよろしくお願いします。 教育とオフショアを両立しようとしたら会社を作ることになった 私は長年組織や教育のあり方に疑問を抱き、時に苦しんできました。 働きすぎて磨耗しきってしまったので、これ以上既存の組織に入る元気もありません。 そんな時ほど考えが原点に戻るものです。 もともとこの国には教育とオフショアがやりたくてやって来ました。 充電期間中いろんな人と話した結果、オフショア会社を立ち上げることとなりました。 我々が目指すもの ブレないために、今後どんな会社にしていきたいかなど考えを綴っておきます。 私たちにとって会社とは実践が積める「教育のプラットホーム」 私の目指す教育とは、あくまで「食べていけるスキル」を身につけさせることです。使えないスキルや知識は必要ありません。 テックスクールや職業訓練校の講師をやっていた時、「このままじゃこの子たちは食べていけない」とよく思い、苦しかったです。 明らかに「実践」が足りないからです。 今後、授業料をとって基礎だけを教えるような生ぬるい教育をするつもりはありません。 実践を積んで、スキルが身につけば転職・起業・フリーランスなど「人生の選択肢」が増えます。 1つの会社に貢献することばかりが人生じゃありません。 会社に関わった人がスキルを身につけ、人生が豊かになり、さらに周りに教育を広めていく循環が生まれる。 それが私たちの願いです。 役職は取っ払う。個々が責任を持って意見の言える組織へ 組織で責任が持てなかったり意見が言えなã

1ãªã‚‹ã®ã¯ç¸¦å‰²ã‚Šã®çµ„織体制が原因だと思うんです。 そうであれば、思い切って縦割りを取っ払ってしまったらどうだろう。 出世という制度がなければ競争したり誰かを蹴落そうとしたりする必要もないし、役職がなければ仕事量に対する理不尽さも生まれないはずです。 役職の違いによる給料格差ももちろん無くなります。 力を合わせてやったことが自分たちの給料として跳ね返ればモチベーションも上がると思います。 フィリピンの実情を発信したい。私の眼に映ったフィリピン フィリピンのほとんどの人は自分を貧困と感じています。 「1週間500ペソもあれば十分だよ」って言ってる元同僚もいますし、20分くらいで辿り着けるところなら節約のため余裕で歩きます。 2020年フィリピンでの最低賃金は1日385ペソ（約800円）です（フィリピン人の友達に聞きました）。 しかもコロナの影響で今年失業率のピークは45.5%まで達しました。 CNN Philippines参照 ほとんどのフィリピン人は家族を助けるために働く フィリピン人の多くは5人以上の大家族。中には8人家族なんてこともザラです（昔は宗教の価値観で避妊を禁止されていた）。 親は子供の将来を考え大学に行かせます。それらの学費は奨学金を使ったり家族みんなでサポートします。 先ほども伝えた通り給料はとても安いです。少しでもいい職につけるように大学は必須なんです。 私は日本へ3か月ほど出張に行き、そこでフィリピン人たちと働いたことがあります。 ぎ家族を助けるために毎月仕送りをしていました。 せっかく良い大学を出てもコンビニやモールで仕事する人も多い せっかく良い大学を出ても、コンビニやモールで働く人も少なくありません。 若い労働力が潤沢ということは彼らの替えはいくらでもいるってことです。 家族を助けるために仕事は選んでられない。それが実情です。 安月給でも給定職につくことこそ正義なのです。 「定職こそ正義」という考え 安定していれば安月給でも家族のために我慢して働きます。 組織に属さず、起業やフリーランスとしてもっと稼ぐというアイデアはあまりありません。 したとしても、ごく一握りの人間です。 わずかでも安定して定期的にお金が入ってくることが重要なのです。 まとめ・セブ島でのチャレンジは続く この度オフショア会社を設立する経緯とフィリピンの実情についてお話ししました。 2021年初旬、国籍も性別も年齢も関係ない、フラットなオフショア会社を作りますのでぜひ応援してください！！ 準備期間も含めて、もっとYouTubeでもっと私たちのことを発信します。ぜひチャンネル登録お願いします。 かみーゆチャンネルの登録はこちら。 この動画は今回一緒に会社を始める@noLALAnoLIFE1が撮影・編集しました。 ちなみに、動画作成も承ります！！ご希望の方は@lirioYにDMください。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry413","title":"Gatsbyブログサイト移行物語~プラグインナシで一覧にページネーション実装~","date":"2020-12-09","modifiedDate":"2022-01-02","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"記事数が増えると一覧にペーネーションが欲しくなりますよね？複数ページネーションを実装するためのプラグインがあるにもかかわらず自作して実装してしまいました。プラグインに頼らず実装したい人のために、やり方をシェアします。","tags":["React"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 記事数が増えると一覧にペーネーションが欲しくなりますよね？ 複数ページネーションを実装するためのプラグインがあるにもかかわらず自作して実装してしまいました。プラグインに頼らず実装したい人のために、やり方をシェアします。 ※ 2021å¹´12月v4バージョンアップに伴いリライトしました。 今までのGatsbyの記事と注意点 現在ここまで記載しています。制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。 1. インストールからNetlifyデプロイまで 2. ヘッダーとフッターを追加する 2. 投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加 3. ブログ記事、カテゴリ、タグ一覧の出力 4. プラグインを利用して目次出力 5. プラグインナシで一覧にページネーション実装（←イマココ） 6. 個別ページテンプレート作成 7. プラグインHelmetでSEO調整 8. CSSコンポーネントでオリジナルページを作ろう！！ 9. 関連記事一覧出力 11. タグクラウドコンポーネントを作成する 12. パンくずリストを追加する 13. 記事内で独自タグ（コンポーネント）を使えるようにする v5へのアップグレード方法はこちら。 このシリーズではテーマGatsby Starter Blogを改造 この記事は一番メジャーなテンプレート、「Gatsby Starter Blog」を改造しています。同じテーマでないと動かない可能性があります。 早速ページネーションを実装しよう！ ページネーションを実装するためには一覧を分割しページを生成します。 さらにページネーションを出力するコンポーネントを作成します。 WordPressなど、その他のCMSに慣れていると一覧を分割しページを生成するってところがちょっと不思議です。 ページネーションを実装するためにページを分割する まずはgatsby-node.jsにページを分割するためのコードを書いていきます。 一覧ページの実装についてはこちらを参考にしてください。 gatsby-node.jsのブログ詳細ページを生成しているコードを利用して、数量を数えます。 変数countにページ数を格納します。 frontmatterのpageTypeがblogのみカウントします。 続けて以下のコードを追記します。今回は1ページに12記事を表示します。 たとえば45記事あったら 4つのページに分割される、といった形になります。 /blogs/ /blogs/page/2/ /blogs/page/3/ /blogs/page/4/ どこからどこまでの記事を出力するか、テンプレートblog-list.js側に値を渡します。 limit ... ループ数 skip ... オフセット（どこからループを始めるか）数 current ... 現在何番目 page ... トータルのページ数 ページが出力されたか、カンタンに調べる方法があります。 404ページにアクセスすると、出力されているページ一覧が確認できます。 blog-list.jsで値を受け取る 次にblog-list.js側で値を受け取ります。 query blosQyery()に$limit: Int!と$skip: Int!を追加します。 Int!は型が数字で空の値はダメですよーって意味です。空でもいい場合は!を省きます。 Int!が原因でエラーを吐いている場合は、gatyby-node.js側で間違ったコードを書いている可能性があるのでよく確かめてみましょう。 1ページに表示する記事の数は$limit、オフセット値は$skipに格納されるので、受け取った値をallMarkdownRemark()で絞り込みます。 createPageから投げられた値は引数pageContextに格納されるので、それを利用します。 ページネーションを出力するコンポーネントを作る 最初と最後、前と次へ移動する簡易的なページネーションの実装の仕方をご紹介します。 pagination.jsを作成し、次のコードを記述します。 あとは表示したいところにコードを追記してください。 カテゴリやタグ一覧でもページネーションを実装したいときはtypeを追加してください。 もっと複雑なページネーションを実装したい方へ 記事数が多くなるとより詳細なページネーションが欲しいですよね。 詳細なページネーションのソースはGitHubにあげています。 なぜプラグインナシで実装したのか？ 今回プラグインナシで実装した理由です。 Gatsbyはプラグインが豊富でいくらでもプラグインで実装できます。プラグインがうまく動かず、やむなく勉強にもなるし自力で実装することにしました。 後々よくコードを見てみたら私の書き方が間違っていただけでした。 はじめて触るGatsbyに疲れていたのもありますが、人間が一番バグります。 実装が面倒な人はgatsby-awesome-paginationあたりが人気なので、プラグインを利用するといいかもしません。 まとめ ページネーションが実装され、安心してたくさん記事が書けるようになりました。 次の記事は「個別ページテンプレート作成」です。 皆さんのコーディングライフの一助となれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":true},{"slug":"entry412","title":"本当に怖いDNS（ネームサーバー）変更。予想外のトラブルに備えよう！","date":"2020-12-08","modifiedDate":"2026-06-08","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry412.webp","description":"サーバー移転やDNS（ネームサーバー）変更の影響とリスクを徹底解説！反映まで最大72時間かかるタイムラグの仕組みや、切り替え期間中にサイトが見れなくなる・メールが不通になる等の予想外のトラブルに備えるための3つの事前準備を、15年目エンジニアが苦い実体験をベースにわかりやすく紹介します。","tags":["サーバー引越し","しろたん師匠"],"body":"移管中エラーを吐いて、ブログページが見れなくなってしまいました。事前準備を怠ったことを死ぬほど反省しました。 ネームサーバーの変更は、新旧どちらのサーバーに繋がるか分からない不安定な期間が発生し、最悪の場合は「サイトが一時的に見れない」「メールが届かない」といった深刻な影響が出ます。今回はそんなDNS切り替え時のリスクや実際の反映時間、トラブルを防ぐための対処法を実体験ベースで綴ります。 大切なコンテンツが見れなくなっちゃう！準備をしっかりしてサイト引越しをすべし 今回サイト引越し中やらかして、ウェブサイトがおおよそ1日間見れなくなってしまいました。 以前も忙しすぎてサーバーかドメイン更新を見逃し、1週間位サイトが見れなくなりましたが大ダメージでした。長期サイトが見れなくなるのはサイト運営者にとって脅威です。 ざっくり対策は次の3つ。 DNS（ネームサーバー）の反映のタイムラグを理解しておく 旧サイトが健全に表示されるか確認し必要であればメンテナンスしておく 最悪の事態に備えてメンテナンス中ページも用意しておく 連日のサイトのコーディングと記事移行がキツかったのもあり、サイトをリニューアルできるのが嬉しすぎて3つとも抜けていました。 ※普段クライアントに対しては公開日などをきちんと確認しています。 要因と対策をそれぞれご紹介します。 DNS（ネームサーバー）反映は最大72時間も待たなければならない トラブルがすぐに収束しなかった理由は、DNS（ネームサーバー）反映のタイムラグです。 DNS（ネームサーバー）の変更は、たとえ変更手続きが終わっていてもインターネット全体に反映するまで24時間から72時間程度かかります。 インターネットはルーター、個人のパソコン、サーバー側、さまざまなところにキャッシュが残るような仕組みになっています。 ちなみにフィリピンには3大インターネット会社があり、私はスマホをGlobe、自宅ではPLDTを使っています。 インターネット会社でも反映時間の格差があり、Globeは1日、PLDTは2日かかりました。 もしこれが72時間かかっていたらと思うとゾッとします。 不足のトラブルがあると想定し、できるだけPV（閲覧数）の少ない時間にDNS（ネームサーバー）変更をすべきです。 PVはGoogleAnalyticsなどで確認できます。 サイトの系統にもよりますが、金曜日の深夜から日にかけて作業するのがオススメです。 ただ、サーバー会社にお問い合わせができないのである程度覚悟しておいてください。 ネームサーバー変更中に発生する主な影響とリスク | 影響が出る項目 | 具体的な現象とリスク | | :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | | Webサイトの表示 | アクセスするユーザーやネット環境（プロバイダ）によって、新サイトと旧サイトのどちらが表示されるかランダムになり、一時的にエラー画面が出ることもあります。 | | メールの送受信 | メールの宛先サーバーが定まらないため、切り替え期間中に送られたメールが消失（不達エラー）したり、旧サーバー側のメールボックスに届いてしまうリスクがあります。 | | 反映までの時間 | 一般的には数時間〜24時間程度、世界中のキャッシュが完全に書き換わるまでには最大72時間の並行運用期間が必要です。 | | 予想外のトラブルを想定し、できるだけ被害の少なくて済む日にDNS（ネームサーバー）の変更をする 反映するまで旧サイトが健全な状態で表示されている状態を保つ 本来問題がなければ、旧サイトと新サイトは徐々に入れ替わる予定でした。 しかし急に今回記事詳細ページのみ表示されなくなりました。 原因はAMP対応したくてクセの強いPHPのメソッドを使っていたからです。 >#### AMP >Accelerated Mobile Pagesの略でアンプと読みます。モバイルユーザーが快適にホームページを閲覧できるようにすることを目的としてGoogleとTwitterが共同で立ち上げたオープンソースプロジェクトで、一般的にはモバイル端末でホームページを高速で表示させるための仕組ã

1¿ã€‚ リニューアルでは新サイトに注目しがちです。 旧サイトが健全な状態で表示されている状態をキープできるよう事前に、クセの強いメソッドなど、変なコード書いてないか確認しておくべきでした。 旧サイトが健全に表示されるように事前メンテナンスをしておく なぜ記事詳細ページだけ表示されなくなったのか。PHP file get contentで予想外のエラー 原因はfilegetcontents（PHP）でした。 #### file get contents ファイルの内容を全て文字列として読み込むメソッド AMPではhead内にCSSを直書きしなければならないのですが、私はいつもSCSSでCSSを書いているので修正入ったら書き直すなんてめんどくさい。 コンパイルしたAMP用のCSSファイルをパッケージ内に置き、filegetcontentsで読み込んでました。 徐々に反映が進むと、filegetcontentsで取得しているファイルが中途半端に反映してかNetlify側のサーバーから取得している形になりました。 今回Netlifyに載せ替えるサイトはGatsbyの静的ジェネレーターなので以前と構造がまったく違います。当然Netlifyに同じファイルがないのでAMP対応していたページがすべてエラーを吐いてしまいました。 ちなみにAMP対応で、filegetcontentsを使う方法が紹介されています。みなさんもご注意を。 APIなどに file get contents を使うのはオススメしない理由と代替案 トラブルはある！ぐらいの心づもりでメンテナンス中ページも用意しておく トラブルは起こる。うまくいかない可能性を考えて、どうしても復旧できなかった時のためにメンテナンスページを必ず用意しておきましょう。 500番エラーを出すよりマシです。 そうすればユーサーはまたページに戻ってきてくれます。 トラブルが発生したら、いったんメンテナンスページに差し替えリダイレクトかけておきましょう。 以下は、.htaccessのコードです。 トラブルはあって当然。表示されなかった時の対処法も用意しておく どうしようもないときは諦めよう ちなみに私は焦りのあまりさくらサーバー側の設定を触りすぎて、SSLまで効かなくなり手の施しようがなくなりました。 そんな時ほど人間諦めが肝心。 最低でも24時間ぐらいかかるみたいだし、開き直って他の作業をしました。 翌日も気にせず友達とLandersに買い物へ行ってジャンク祭りを堪能。 スーパーマーケット Landers そんなことをしていると、いつの間にか反映していました。 嬉しいリニューアル効果 ページ読み込みのストレスは軽減し、UXが向上したおかげでPVも1.5倍まで伸びました!!! 反映までの1、2日は辛かったけど、喜びはひとしおです。 リニューアルサイコー！ まとめ 今回私が痛い目にあったDNS変更に関する経験と対処法についてシェアさせていただきました。 ちなみに以前DNS変更がいかに怖いかって内容をITセミナーで話をしていたことが発覚しました。。。 しかも、DNS変更の作業は爆弾撤去作業のように神経を使うと説明までしておりました。。。 サイト引越しの際に学んだ5の教訓 | Slide Share 第90回「WEB TOUCH MEETING DNS変更は慎重に！ みなさんのWeb制作ライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry410","title":"Gatsbyブログサイト移行物語~プラグインを利用して目次出力~","date":"2020-12-07","modifiedDate":"2022-01-01","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"記事に目次をつけたかったのでプラグインgatsby-remark-autolink-headersを利用して目次を実装しました。ulタグからolタグに変え、目次が長くなるので閉じるボタンをつけ、アコーディオンさせるなど少し改造しました。そのやり方について綴ります。","tags":["React"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 記事に目次をつけたかったã

1®ã§ãƒ—ラグインgatsby-remark-autolink-headersを利用して目次を実装しました。 ulタグからolタグに変え、目次が長くなるので閉じるボタンをつけ、アコーディオンさせるなど少し改造しました。そのやり方について綴ります。 ※ 2021å¹´12月v4バージョンアップに伴いリライトしました。 今までのGatsbyの記事と注意点 現在ここまで記載しています。制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。 1. インストールからNetlifyデプロイまで 2. ヘッダーとフッターを追加する 2. 投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加 3. ブログ記事、カテゴリ、タグ一覧の出力 4. プラグインを利用して目次出力（←イマココ） 5. プラグインナシで一覧にページネーション実装 6. 個別ページテンプレート作成 7. プラグインHelmetでSEO調整 8. CSSコンポーネントでオリジナルページを作ろう！！ 9. 関連記事一覧出力 11. タグクラウドコンポーネントを作成する 12. パンくずリストを追加する 13. 記事内で独自タグ（コンポーネント）を使えるようにする v5へのアップグレード方法はこちら。 ※ Gatsbyは2021月12月、v4にバージョンアップしています。随時リライトしています。 このシリーズではテーマGatsby Starter Blogを改造 この記事は一番メジャーなテンプレート、「Gatsby Starter Blog」を改造しています。同じテーマでないと動かない可能性があります。 目次出力のためのプラグインgatsby-remark-autolink-headersを利用 Gatsbyは豊富なプラグインが魅力です。 gatsby-remark-autolink-headers はプラグインの1つです。 以下のようなことができます。 見出しタグにidを振る 見出しタグを抽出しリンク付きのリストタグを出力 gatsby-remark-autolink-headers gatsby-remark-autolink-headersをインストール npmインストールします。 gatsby-config.jsにプラグインの追記 gatsby-remark-autolink-headers は gatsby-transformer-remark のサブプラグインです。なので、gatsby-config.jsの gatsby-transformer-remarkのoption に記載します。 テーマGatsby Starter Blogを利用していればgatsby-transformer-remarkはインストールされているはずです。 このプラグイン1コ問題があって、公式サイトによるとプラグインgatsby-remark-prismjsよりも前に読み込む必要があります。 gatsby-remark-autolink-headersを実装 実装します。 オプションの説明については記事の後ろに記載します。 今回はシンプルにアイコンなし。以下のように設定しました。 オプションを設定しなければ、以下のように無駄なコードも出力されます。 option の maintainCase を true にするとアンカーリングが効かなくなることも maintainCaseをtrueにすると見出しに追加されるidに含まれるアルファベットは大文字が小文字に変換されます。目次のアンカーと差異ができて飛ばなくなることがあります。なのでここではfalseにしておきましょう。 目次を出力するコンポーネントを作成する 次に目次を出力するコンポーネントを作成します。 table-of-content.jsを追加します。 コードはこんな感じです。 リスト化されたデータはdata.markdownRemark.tableOfContentsに格納されます。 blog-post.jsのGraghQLのスキーマmarkdownRemark()内にtableOfContentsを追記します。 ポイントはmaxDepthを指定することによって表示する見出しの深さを調整できます。 目次のネスト（入れ子）が深いのはあまり好きじゃないんだよね ということで、見出し3（maxDepth: 3）まで取得することにしました。 あとは記事詳細テンプレの読み込みたい場所にコンポーネントを出力するだけです。 出力されるタグをulからolに変え、開閉ボタンをつける リスト出力がul（アンオーダーリスト・順不同リスト）なのは個人的にはちょっと気に入らないです。 なのでここから少し改変します。 JavaScript replace で ul> から ol> に置換します。（閉じタグもあるのでこのような形にしました） 後ほどアコーディオン機能を実装します。チェックボックスを追加して h2 を label に書き換えておきます。 スタイリングする カã

1‚¦ãƒ³ã‚¿ãƒ¼é–¢æ•°ã‚’利用してスタイリング、アコーディオンは手間なのでCSSのみで実装しました。 今回はコードしか紹介しませんので詳しく原理を知りたい方はこちらをご覧ください。 style用のコンポーネントのコードです。 コンポーネント化してスタイルを書きたい場合は、styled-componentsのインストールが必要です。 最初から閉じておきたい場合は、inputにcheckedを付与しておきましょう。 オプションの一覧 オプションの一覧です。icon以外はあまり使うことないかもしれません。 | オプション | 用途 | | ------------------- | ---------------------------------------------------------------------------- | | offsetY | リンクをクリックして移動した時の見出しの上の空き（オフセット）の調整。pxです | | icon | Boolean。デフォルトはtrueでホバーすると左にアイコンが表示されまます。 | | class | アンカーに独自のクラス名を指定するそう | | maintainCase | Boolean。含まれる要は大文字小文字を維持するか指定できる。 | | removeAccents | Boolean。アクセント削除。日本人のサイトにはまず必要なさそう。 | | isIconAfterHeader | Boolean。アイコンの位置を右側に移動 | | elements | リンクを自動挿入するためのタグ一覧を配列で指定 | まとめ 目次があると記事の全貌がわかり、読むか読まないかの判断ができ、ユーザーに優しいです。 次の記事は「プラグインナシで一覧にページネーション実装」です。 実際私のサイトでもヒートマップで確認すると、目次ってかなりクリックされているんですよ。 この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry411","title":"Gatsbyホットリロード中他のディバイスからアクセスする方法","date":"2020-12-07","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2014/entry192.webp","description":"Gatsbyでサイト構築中、iPhoneやAndoroidでもチェックしたいですよね？同じWiFi繋がっているのなら、browser syncではExternalアドレスが使えるはず！やり方を調べていたら、見つかったのでそのやり方をメモしておきます。","tags":["npm"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 Gatsbyでサイト構築中、iPhoneやAndoroidでもチェックしたいですよね？ 同じWiFi繋がっているのなら、browser syncみたいにExternalアドレスが使えるはず！\\",\\"やり方を調べていたら、見つかったのでそのやり方をメモしておきます。 PCのIPを指定するだけ カンタンです。 PCのIPアドレスを指定するだけです。 PCのIPに当たる×××.×××.×××.×××の部分はMacだと「システム環境設定」>「ネットワーク」から調べることができます。 IPアドレスをコピーします最後の.（ドット）は不要です。 面倒なので、package.jsonのscriptに登録しておきましょう 毎回コード打ち込むのは面倒なので、package.jsonのscriptにコマンドを登録しておきます。 パソコンのIPは場所が変わったりなどしたら変わります。 気をつけてください。 あとは以下のコマンドで起動してください。 まとめ これでGatsbyでのサイト構築が楽になりますね！ ちなみに私はラップトップで一度記事を書き、ゴロゴロしながらiPhoneで記事の誤字脱字などをチェックしています。 記事のチェックが終わった後に、GitHubにプッシュし、Netlifyにデプロイしています。 Netlifyは基本無料ですが使用量やビルド数に制約があります。 今月頭にNetlifyへ移行しましたが、すでにこんなにBuildしてしまいヒヤヒヤしております。 スマホのゲームで課金する大人の気持ちが少しわかります。。。 最初はこのIP指定の仕方を知らなかったã

1®ã§ã‚¨ãƒ©ã‚¤ç›®ã«ã‚ってしまいました。 残り105分を大事に使います。 皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry409","title":"テックスクールに通っただけではプログラマーにはなれないワケ【元エンジニア講師談】","date":"2020-12-06","modifiedDate":"2022-06-22","category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2020/entry409.webp","description":"職業訓練校も含めスクール通ったところですべての人がプログラマーになれません。テックスクールの講師を経験した私が学習する側と教える側の目線に立ち、その理由を赤裸々に語ります。","tags":["キャリアアップ・転職","駆け出しエンジニア"],"body":"「プログラマーになるのってカンタン！いますぐ〇〇スクールで私たちと一緒に勉強しましょう！」なんて広告をよく見ます。 単刀直入に言います。職業訓練校も含めスクール通ったところですべての人がプログラマーになれません。職業訓練校卒業した後猛勉強し、テックスクールの講師を経験した私が私が学習する側と教える側の目線に立ち、その理由を赤裸々に語ります。 結論・テックスクールに通ったところですべての人がプログラマーにはなれない テックスクールに通ったところですべての人がプログラマーにはなれません。 理由はプログラミング学習の壁が高くて挫折するからです。 実際に挫折する人間を山ほど見ました。 プログラミング学習で9割の人が挫折する理由 プログラミングを習得しようとすると9割が挫折すると言われています。 プログラミングの習得は想像以上に難しいからです。 では具体的にどんなことが難しいか。 私は今まで職業訓練校や有料テックスクールでフロントエンド中心にプログラミングを教えてきました。 私はその中でプログラミング学習に挫折し道を諦めた人をたくさん見てきました。 挫折する具体的な理由です。 質問できない エラーが解決できない 技術書や教材がムズイ そもそも向いていない モチベーションが続かない では、1つづつ解説します。 質問できない プログラミングは難しいんです。 学ぶに連れて誰かに聞きたいことがたくさん出てきます。 学習中解決策を知ることさえできれば先に進めますがそんなにカンタンではありません。 初学者のうちはコードのつまらない書き間違えがしょっちゅうです。重大な間違えをしていると思ったらタイポなんてこともザラです。自分に嫌気がさしてくる人もいると思います。 「しょうもない質問をしていないだろうか？」 私は長年職業訓練校を始めとする講師をしていました。 生徒さんから「自分がこの程度のことがわかってなかったら恥ずかしい」という感情も垣間見てきました。 プログラミングを習得したいなら恥ずかしさを克服することが最優先です。 そして、スクール以外にも質問できる場所は見つかります。 学びたいジャンルのコミュニティに属することです。 ググればconnpassなどでいくらでも勉強会コミュニティはあります。 そして人は頑張っている人を応援したくなるもの。 10年前職業訓練校卒業以降の私の学習スタイルは独学です。 恥さえ捨てれば、いつでも質問できる状況下に身を置くのはカンタンです。 勉強会コミュニティに属する勇気がないならテックスクールで遠慮なく質問しましょう。 回避策：質問できる場所に身を置ã

1ã“と エラーが解決できない 実はプログラミングって大半がエラーを解決するために書いていると言っても過言ではないんです。 プログラマーになると決めた以上エラーが解決できないとその先はありません。 解決できるようになるためにはとにかくたくさんのエラーを経験することです。 たくさん経験すれば必然的にエラーに詳しくなります。 しかし我々日本人にとってエラーメッセージの解読って難しいんです。 理由は英語だから。 ほとんどの人がここでパニクります。 解読が難しい上に膨大な数のエラーにで折れ挫折する人が多いです。 まずは冷静になること。 エラーメッセージをGoogle翻訳にかければなんとか理解できます。 そして、一度にエラーを解決する必要はありません。1つづつ順番に解決することが大切です。 回避策：冷静になり1つづつエラーを解決すること 技術書や教材などがムズイ 技術書などがムズイのには理由があります。 優秀な人ほど自分にとってカンタンな説明はすっ飛ばします。 たとえば、このディレクトリーに置くとかファイルの拡張子はどうするとか常識だと思っている説明は省略したくなるもの。 そんな説明に時間を費やすぐらいなら、重要なことを伝えたいのも理解できます。 たまに、同じようにプログラミング始めたてで自分より少し理解できている人の説明の方が理解できたってことありませんか？ 直近で、あなたの分からない気持ちを体験している人ほど説明がうまいのです。 いい講師に巡り会えなくても、同じことを学習する仲間がいるのもプログラミングを習得する秘訣です。 回避策：自分にあった学習環境に身を置くこと そもそもプログラミングに向いていない やる気はあってもそもそもプログラミングに向いていない人もいます。 パソコンの前にじっと座っていられない 物事順序立てて理論的に考えるのが苦手 我慢強くエラーを潰すのがツライ お金や時間を使ってスクールに通ってもやめてしまう人をたくさん見てきました。 単刀直入に言います。 お金さえ払えば、スクールに行けば人生が変わるなんて安易に思っている人はやめた方がいいです。 プログラミングをするためには冷静さと相当忍耐が必要です。 もっと向いていることにお金と時間をかけた方が人生豊かになります。 まずはプロゲートやドットインストールなどで、無料もしくは格安な教材をひととおり試してみてください。 もしそこで苦痛を感じたら向いてない可能性大です。 回避策：自分の向き不向きを見極める モチベーションが続かない 前述した「質問できない」、「エラーが解決できない」、「ムズイ」、「向いていない」などが続くと当然モチベーションがなくなってきます。 「この先本当に自分はやっていけるだろうか？」 挫折しないためにはいかに自分でモチベーションを保つ努力をするかがポイントとなってきます。 スクールによってはメンターやカウンセラーが付いていますのでそういったシステムを利用するのもアリです。 また一緒に勉強したり、励まし合う仲間を作ったりするのもオススメです。 いかにモチベーションを下げない状態にするのが大切です。 回避策：モチベーションを維持できる工夫をする それでもプログラマーになりたい！独学・テックスクールどちらを選ぶべき？ プログラミング学習挫折の理由に「質問できない」「エラーが解決できない」「ムズイ」「向いていない」「モチベーションの維持」などを挙げました。 それでもなりたいという人は、まず独学かスクールに通うか悩むと思います。 向いていそうな方を選択すればいいと思います。 | | メリット | デメリット | | -------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------ | | テックスクール | ・就職保証などがある・いつでも相談できる・仲間ができる | ・費用がかかる・講師の質にばらつきがある・時間を拘束される | | 独学 | ・お金がかからない・好きな時間に勉強できる・好きなことを限界なく学習できる | ・質問できない・モチベーションの維持が難しい・強制力がない | テックスクールは寂しがりやで自分に対して強制力がない人にぴったりです。お金がかけられなく、強い意志がある人は独学ã

1‚‚できると思います。 ちょっと意志の弱いあなたにアドバイス。テックスクール選びのポイント プログラミング勉強したいけど、ほどんどの人は独学に不安を覚えると思います。なので、テックスクールに行きたい気持ちは分かります。 とはえい、各テックスクールの広告ってどれもあなたの人生を絶対豊かにしそうな気がして目移りしますよね？ そこで元エンジニア講師の私がスクール選びのポイントをお教えします。 説明会やカウンセラーの言うことを鵜呑みにするな スクールにお問い合わせしたら必ずカウンセリングをススメられると思います。 カウンセリングって言ったら聞こえはいいですが営業です。 そして目の前に現れるのは授業という商品を売るプロです。 だから、プログラミング学習や業界で働く大変さを理解できていないだけでなく、プログラミング学習習得の大変さについての説明が十分じゃないこともあります。 とくに「今まで在籍した生徒さんの成功事例」はキラーワードなので気をつけてください。 同じテックスクール通ったからと言って同じような結果になるとは限りません。 カウンセリングで言われていることをすべてを鵜呑みにしないでください。 プログラミング習得は大変だということと、成功した生徒さんとあなたはまったく別の人間です。 リスクをきちんと説明してくれているスクールと出会ったら通う価値はあると思います。 卒業後のサポートが手厚い 会社員でも、フリーランスでも、企業でもいいです。皆さんはプログラマーとして就職することがゴールです。 人生を賭けて大金をはたいてテックスクールに通って卒業後のサポートがないって悲しくないですか？ 最近では就職保証サポートや卒業後に授業料を払えばいいようなスクールもあります。 | | 特徴 | | -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | テックキャンプ | 独自就活イベント/履歴書などの添削サービスあり。就職できなければ全額返金(※) | | LABOT | 受講中は授業料は発生しないが学習に必要なノートパソコン（MacBook Pro）は事前に各自用意が必要。24カ月から48カ月に渡って給与（月給）の13〜17％を支払う(※) | ※ 必ずご自身で条件をお確かめください。 あなたの卒業後の人生をサポートしてくるスクールを選んでください。 提供しているカリキュラムがコロコロ変わるスクールは危ない カリキュラムって作るのは、実はとても大変です。 時間がとてもかかるのでそうカンタンにカリキュラムを組めないはずです。 それでも人気の言語のカリキュラムがぽんぽん出るようなスクールは「売り上げ重視の儲け主義」かもしれません。 受講してみたら内容がスカスカなんて可能性もあるので注意してください。 プログラミングなんてぶっちゃけ、どの言語も基本は変わらないんです。大阪弁と東京弁ぐらいの違いです。 だから古典的な言語でも基本をしっかり教えてくれるスクールの方がオススメです。 自習・反転授業？実は人手不足かもしれません 現在プログラマーって不足しているのはみなさんもご存知だと思います。 そこにビジネスの勝機を感じたのか、たくさんテックスクールが乱立しています。 ただ冷静に考えてみてください。 「プログラマーは不足しているのにそのプログラマーを育てる人がそんなにいるの？」 って不思議に思いませんか？ 昨年日本に帰った際、知り合いのテックスクールの副校長にたまたま会い、テックスクールの実情を聞く機会がありました。どの学校もエンジニア講師は足りていないと聞きました。 対策としてテックスクールは自習や反転授業というスタイルを取るそうです。 #### 反転授業 「授業」と「宿題」の役割を全く逆にした授業形態のことを指す。 受講者は事前に予習をし、翌日授業を受ける。 反転授業に授業スタイルを変えると事前に知識のインプットができるので授業効率がよくなります。 実際時間を4分の1に圧縮できたとの事例もあります。 実際に自習して自走力をつける、反転学習で時短して学ぶことは今からプログラマーになりたいあなたにとって必要です。 授業スタイルが自習・反転の場合、そのテックスクールは人手不足かもしれません。満足のいく授業を受けられない可能性もある点だけご注意ください。 モチベーション維持をケアしてくれるスクールは◎ プログラミング習得にå

1¤§åˆ‡ãªã®ã¯ãƒ¢ãƒãƒ™ãƒ¼ã‚·ãƒ§ãƒ³ã®ç¶­æŒã§ã™ã€‚ これが一番難しいんです。 自分でモチベーションが維持できる人はそもそもテックスクールなんて必要ないです。 YouTubeなどの良質な学習コンテンツはありますし、公式リファレンスを利用すれば事足ります。 なんども言いますがモチベーションの維持が難しい。 最近、在籍中にメンターやカウンセラーをつけてくれるテックスクールがあります。 モチベーションをケアしてくれる手厚いスクールは行く価値があります。 さいごに 自分の向き不向きを見極め、努力とモチベーションが継続できる人はテックスクールに行ってもプログラマーやWebデザイナーになれます。 ただ、自分にあった継続できる方法を見極めてください。 私がIT業界で生きていこうとした時のお話を少しだけします。 当時の私は子どもいて学校に行く経済力がありませんでした。 だから失業保険をもらいつつ職業訓練校に行く道を選びました。税金で行かせてもらってこんなこと言うのも恐縮ですが、卒業生が講師で授業の質もサイアクでした。しかも周りも失業保険や補助金欲しさに来ている人も多く決していい環境とは言えませんでした。 だから、私のプログラミング知識はほとんど独学です。 独学はキツイです。誰にも聞けず、夜中3時にエラーで悩まされることなんて日常茶飯事でした。 それでも続けられたのは「この先、どんなことがあってもIT業界で生きていく！」ことを決断していたからです。 しつこく、執念深く最後までやり抜いた人の勝ちです。 くじけそうになることもあるかもしれませんが、乗り越えれば良い思い出になります。 この記事がプログラマーを目指す皆さんの人生の一助となれば幸いです。 最後までお読みいただきありがとうございました。 学習方法ではなく、年齢やキャリアで悩んでいる方はこちらの記事も併せてお読みください。","noindex":true},{"slug":"entry408","title":"Gatsbyブログサイト移行物語~ブログ記事、カテゴリ、タグ一覧の出力~","date":"2020-12-03","modifiedDate":"2026-03-26","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"gatsbyのブログ用記事を抽出し一覧を作りました。カテゴリ、タグ一覧もぞれぞれ用意したのでだいぶ使い勝手がよくなりました。サムネ出力用のコンポーネントの作り方も紹介しています。今回はそれぞれの一覧の出力の仕方についてまとめます。※ 2021å¹´12月28日v4対応のためリライトしました。","tags":["React"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 gatsbyのブログ用記事を抽出し一覧を作りました。カテゴリ、タグ一覧もぞれぞれ用意したのでだいぶ使い勝手がよくなりました。今回はそれぞれの一覧の出力の仕方についてまとめます。 サムネ出力用のコンポーネントの作り方も紹介しています。 ※ 2021å¹´12月30日v4対応のためリライトしました。 今までのGatsbyの記事と注意点 現在ここまで記載しています。制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。 1. インストールからNetlifyデプロイまで 2. ヘッダーとフッターを追加する 2. 投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加 3. ブログ記事、カテゴリ、タグ一覧の出力（←イマココ） 4. プラグインを利用して目次出力 5. プラグインナシで一覧にページネーション実装 6. 個別ページテンプレート作成 7. プラグインHelmetでSEO調整 8. CSSコンポーネントでオリジナルページを作ろう！！ 9. 関連記事一覧出力 11. タグクラウドコンポーネントを作成する 12. パンくずリストを追加する 13. 記事内で独自タグ（コンポーネント）を使えるようにする v5へのアップグレード方法はこちら。 ※ Gatsbyは2021月12月、v4にバージョンアップしています。随時リライトしています。 このシリーズではテーマGatsby Starter Blogを改造 この記事は一番メジャーなテンプレート、 Gatsby Starter Blogを改造しています。同じテーマでないと動かない可能性があります。 今回やりたいこと ブログ記事のみ抽出してサムネイルのある一覧を作る。 さらにカテゴリとタグごとの一覧も作成。 src/pageディレクトリーにあるindex.jsを複製 Gatsby Starter Blogでは、テンプレートはsrc/templates内に収められています。 まずは、以下にblogs-list.jsという名前で格納します。 一覧の出力を確認したいのでダミーの記事も用意しておきます。 blogs-list.js の変数名を変更。 gatsby-node.jsで一覧を作成するためのコードを書く gatsbyjsは静的ページを生成するので各一覧を生成するためのコードを書きます。 出力する元となるデータは gatsby-node.js の result に格納されています。 記事データは変数 posts に格納されています。 テンプレートを使ってブログ記事の一覧を生成する gatyby-node.jsにテンプレート(blog-list.js)を追加します。 ブログ記事として扱う投稿にはfrontmatterのpageTypeにblogを付与します。 前回ブログ詳細ページでも投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加、postsの中からpageTypeがblogのデータだけ抽出しました。 ブログ詳細を出力しているコードの下にcreatePageを使って一覧を出力するコードを追加します。 localhost:8000/blogs/にアクセスします。 まだblog以外の記事も取得されています。 pageTypeがblogの記事のみを取得する blog-list.jsを編集しましょう。記事一覧と、総数を取得し表示できるようにします。 コードを以下のように追記して、GraphQLで totalCount (記事の総数)も取得します。 blosQyery の allMarkdownRemark に totalCount、heroを追記。 GraghQLでfilterを使ってpageType=blogで絞り込んでいます。 サムネを出力するためのコンポーネント作成 サムネを出力するためのコンポーネントを作成します。 img.js を src/components/内に格納します。 blog-list.jsを編集します。は使わないので

1削除します。 Imgコンポーネントを読み込み、画像を表示するために記事を改造します。 見た目は悪いですが、出力できました。 styled-componentsで見た目をきれいにする ブログ一覧用のスタイルを作成します。外部ファイルで、styled-componentsコンポーネントを作ります。 一覧全体の見出し用と、一覧用のコンポーネントを1つのファイルに作成します。 シンプルですがサイトとして見れるレベルまでになりました。 カテゴリを追加する カテゴリ項目の一覧も追加します。 ブログを設計するときに、カテゴリの数は6個と決めていました。 カテゴリを増やしすぎると、自分の書きたい内容の軸がブレそうですしね。 ということで、gatby-config.js の siteMetadata 、以下のようにカテゴリを追記しておきました。 markdownファイルの cate には siteMetadata の slug を記述するというルールを設けます。 blog-list.jsをsrc/templates/内に複製し、cate-list.jsを作成します。 gatsby-node.jsのクエリにcateを追加します。 cate-list.jsをテンプレートとしたすべての記事からcateを絞り込んだそれぞれの一覧を出力するページを生成します。 cateSlug（カテゴリ）はcreatePageのcontextに格納すれば、テンプレートcate-list.jsに値を渡すことができます。pageContextで取得できます。 cateSlugと一致するデータのみを使用します。pageType=blogかつ cateが $cateSlugと一致するものだけ絞り込みます。 （カテゴリ）を受け取って 出力する一覧をフィルターをかけて絞り込んでいます。 import { siteMetadata } from \\"../../gatsby-config\\"であらかじめgatsby-config.jsに設定したカテゴリのslug、name、descriptionを取得しページ全体の見出しや説明として利用します。 タグ一覧ページを追加する この銀ねこアトリエではタグは複数設定OKというルールを設けています。 gatsby-node.js側のqueryに tags を追記します。 カテゴリ同様blogs-list.jsを複製し tag-list.js をテンプレートとして使用します。 すべての記事からtagsを取得し、重複を削除してタグごとのページを表示します。 タグはたくさん増えると判断し、siteMetaでのスラッグの管理はしないことにしました。 gatsby-node.js側にタグのページを生成するためのコードを追記します。 タグ一覧のテンプレートへの出力。カテゴリを改造しただけのコードです。カテゴリ一覧出力コードの下のあたりに記述します。 タグの一覧出力のフィルターの記述方法が、カテゴリと少し異なります。 タグはmarkdownファイル毎に複数設定してある（配列）なのでtags: { in: [$tag] } }で絞り込んでいる点です。 タグ毎の記事の総数を表示したかったので、totalCountを取得しています。 pageContextからタグ名を取得してタイトルとして利用します。 記事詳細にカテゴリやタグのリンクを追加する せっかくなので投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加で作った、カテゴリやタグにリンクを貼りたいですよね？ カテゴリの詳細が取得できるようにします。 Dlコンポーネントにスタイルを追加します。 これで記事のからお好みのジャンル一覧へ飛べるようになりました。 まとめ これですべてのブログ記事、カテゴリ、タグの一覧が取得できるようになったと思います！ 次の記事は「プラグインを利用して目次出力」です。 2020年末からGatsbyでのブログ運用を始め、2021年末v4になり今記事を修正しているところです。 できるだけ早く全記事修正します。生暖かい目で見守ってください。 この記事がみã

1ªã•ã‚“のコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました！","noindex":true},{"slug":"entry407","title":"クリスマスが近いので、ブログ執筆を恋の告白に例えてみた","date":"2020-12-01","modifiedDate":null,"category":"seo","categoryName":"SEO対策・デジタルマーケ","ogImage":"/thumbnail/2020/entry407.webp","description":"みなさん、恋愛はしてますか？ブログを読んでもらえることは、意中の人に自分を見てもらうことに似てるなーと思いました。11月はブログを15本更新すると心に決め、書き切ることはできましたが思ったよりPVが伸び悩みかなりキツくて、心くじけそうになりました。ブログ始めて辛い時期の人もいると思うので、その気持ちを共有できたらと思います。","tags":["例えてみる","SEOライティング"],"body":"みなさん、突然ですが恋愛はしてますか？ブログを読んでもらえることは、意中の人に自分を見てもらうことに似てるなーと思いました。 多分だけどね！！ 11月はブログを15本更新すると心に決め、書き切ることはできましたがPVが伸び悩みかなりキツくて、心くじけそうになりました。ブログ始めて辛い時期の人もいると思うので、その気持ちを共有できたらと思います。 ブログ記事を読んでもらうのは意中の人に振り向いてもらうことに似ている 2018年広島でSEOの勉強がしたくてSEOの勉強会を開きました。 おかげで未知のジャンルの新たな友だちができました。 アフェリエイターです。 アフェリエイトとは広告商品の一種。 メディアに商品の宣伝や販促をしてもらい、実際に販売につながった場合に、そのきっかけとなった紹介に対して報酬（コミッション）を支払う仕組みを利用して収入を得ている人のこと。 私の友だちのいちアフェリエーターが言っていました。 「記事はラブレターを書く気持ちで書く」 その時は大切な人に伝えたいメッセージを書く時の気持ちで書いてるんだーって思いました。 できるアフェリエーターは桁違いにクソ稼ぐ 私の知らない世界だったのですが、できるアフェリエーターはサラリーマンの想像が及ばないくらいクソ稼ぎます。 アフェリエイトだけで年間1千万円稼ぐ主婦もいるんだとか。 アフェリエイトにまったく興味はわかず雲の上の話くらいに思ってました。 今年に入り、コロナでフィリピンはロックダウンに見舞われ記事を書く時間が少し確保できるようになりました。 SEOの勉強にもなるし、願わくは最近ウェブサイト制作以外でも少し収入があったらいいなーと思うようになりました。 まずはPVを稼ぐ記事を優先的に増やし、Adのインプレッション数（広告の表示回数）を増やすことを目標にしました。 中世ヨーロッパのナンパ男カサノヴァに学べ！慣れないうちは数をこなすこと 友だちたちが口を揃えて言うのは「最初数をこなすのが大事」とのこと。 すでにアフェリエイトでご飯を食べている人が言うのだから間違いないでしょう。 そもそも「銀ねこアトリエ」は自分のログを振り返るためのサイトで忙しい時期など数えると15記事も書いてない年もありました。 そんないい加減な私が掲げた目標は月15本執筆。 チョーキツかったですwww 仕事終わりにスタバで毎日記事書いたって投稿をたまにTwitterで見かけますがマジで尊敬します。 中世ヨーロッパに存在したジャコモ・カサノヴァという作家がいます。 彼ばブサイクだったにもかかわらず、女性にしつこーーーく声をかけ続け 1000人もの女性と付き合った そうです。 ブサイクにもかかわらず。 ジャコモ・カサノヴァ|ウィキペディア（Wikipedia） なぜカサノヴァがそんなに付き合えたかというと、、、 絶え間なくロックオンした女性にアタックし続けたから、だそう。 ターゲットとなった女性の心理を察するに、「そんなに私のこと好きなの？」という気持ちと単に断れなかったã

1®ã§ã—ょうね。 愛の告白1000本ノック！！ブログも不屈の精神でいきましょう！ ※ 1000本ノックは例えです。 ブログ執筆1000本ノックは大事な学習期間 ブログを書いていると渾身の記事なのにPVがまったく伸びない記事もあります。 ささっとテキトーに書いた記事でも読まれてることもあります。 要は自分のいいと思っている価値観が万人に受けるとは限らないってことですね。 今さらですが、友人が「ひたすら書け」ってアドバイスが理解できました。 ブログを書き始めて間もない時ほど、学習期間が必要なんですね。 恋愛の1000本ノックをし続けたカサノヴァもやみくもに告白し続けた訳ではなく、たくさんの告白から学んだ結果、1000人の女性と付き合うことができたと思います。 敗因を知り改善策を立てることが成功へのカギですね！ 時に報われないことを覚悟する 今年に入ってたくさんの記事を書きました。 中には時間をたっぷりかけて下調べして書いたにもかかわらず読まれてない記事もあります。 凹みます。 ブログを始めたら、序盤は努力して書いても報われない覚悟して書く必要があります。 恋愛だって報われない告白だってあります。 相手がいて成り立つことだし相手の望むニーズにあってないなら仕方ない。 会社員の頃どうしても女性と付き合いたかったインターンがいました。 毎週末クラブで不屈の精神でナンパし続けました。 結局インターンの間、彼の努力は報われることがありませんでした。 にもかかわらず、彼はインターンを卒業の日に言いました。 「僕は変われたんです。今までの僕は自信がなく女の子に声をかけることすらできなかった。それだけでも進歩だと思います！」 感動しました。 ブログも告白も続けることが大事。 この「銀ねこアトリエ」も2014年から通算して実は300本近く記事を書きました。読まれてない記事は削除したり、まとめたりして現在100本程度です。 報われなかった記事たちが200近くあるのです。 努力はいつか報われる…信じましょう！ 1000本ノックで自分の向き不向きを知る 何本も記事を書いていると自分の得手不得手がわかってきます。 この「銀ねこアトリエ」ではテック系の記事が一番PVを稼いでいます。 と思いきや、意外な記事がPVを稼ぐこともあります。 当時、飼いねこが食中毒になり「同じ体験をした人が私の記事を読んで助かるかも」と想いで書きました。 書いた当時はこんなに読んでもらえるとは思いませんでした。 書いてみないとどんな記事が、何が刺さるか、何が読まれるか分からないんです。 確かに得意なジャンルの記事はPVを伸ばしやすいです。が、それ以外も書いてみると思いの外読んでもらえるなんてこともあります。 しかも得意な記事ばかり書いているとネタが尽きてきます。 このジャンルの記事ちょっと私には書くの難しいかもーって思っても書きたいならチャレンジする価値はあります。 「美人だから俺には無理だろう」と思っていても告白してみるまで分からないじゃないですか。 ひたすら書いていれば、Google Analyticsやsearch consoleが、どんな記事が自分に向いてるのかを数字で示してくれます。 PVだけにとらわれて一喜一憂しないことです。 恋愛と一緒。うまくいかなくても終わったことは引きづらず次へ行きましょう。 きっといい出会いが待っています。 ちなみにカサノヴァは手当たり次第、しかも女性だけじゃなく男性にも手を出したそうです。 あと一歩の時はめげずにチャレンジ あと一歩、惜しい記事に必要なのはリライトです。 カサノヴァの告白も同じことを言い続けたわけじゃなく、何かしらの改善があったはずです。 じゃないとブサイクなのに1000人もの女性と付き合えないです。 「あと一歩」かどうかを判断する材料として二段階のポイントがあります。 1. 検索された時に表示回数があるのにクリック（流入）されていない場合 2. 流入があるけど直帰や離脱ã

1•ã‚Œã¦ã„る場合 第一段階検索された時に表示回数があるのにクリック（流入）していない場合 表示回数とクリック数search consoleで調べましょう。 この場合はMetaディスクリプションとタイトルがユーザーに刺さってないからです。 そんな時はMetaディスクリプションとタイトルを調整します。 第二段階:流入があるけど直帰や離脱されている場合 このケースではファーストビューや導入部分を改善します。 こちらは今年に入ってもっともリライトしている記事です。 ABテストも実施し数回リライトしました。 4月にはたった月間60PVしかなかったのに先月は400PVまで伸びました。100倍まではいきませんがなかなか結果を出せたと思います。 数字を見ると効果が出てるなーって実感もあり励みになりますよね。 1000本ノックから見えてくるもの。自分の勝ちパターンを知る 今年の6月くらいからのデータを振り返り、自分のパターンが見えてきました。 私はテック系の記事であれば、時間をかけずにさっと書けます。 今年に入ってとりわけCSSの記事を多めに書くようにしています。 理由は息長くPVを稼ぐからです。 今まで執筆した記事の上位記事はすべてCSS系です。 こちらの記事、確実に長い期間PVを稼ぐことをわかった上で執筆しています。 だから時間をかけてしっかりと記事を作りこみました。 6月に公開し、自然流入で検索順位も現在上位に食い込んできています。 テック記事は滞在時間も長いです。 次にPVを稼ぎやすいのがライフスタイル・キャリア系の記事です。 この手の記事は瞬間的に数字は伸びますが持続性が低く、書くのに時間もかかります。。 私の記事を書くときのルールです。 文字数は2000文字以上、最近はアイキャッチ画像もシリーズ記事以外は毎回変えています。 先月の序盤は勢いと情熱で書いてました。。。 しばらくしてしんどくなり、「こりゃこのペースは続けられないわ」って気づきました。 体力を温存しながら、失敗せず、できるだけ読んでもらえる記事をいかに書き続けるにはどうすればいいか考えました。 テック系5割、ライフスタイル・キャリア3割、チャレンジ2割という割合で執筆することにしました。 おかげさまで楽になりました。 誰しもが勝ちパターンを持っているはずです。 告白でもこれを言えばラクに落とせるという「キラーワード」を持っている人もいるはず。 勝ちパターンを見つけましょう。 まとめ・1PVに一喜一憂せず肩の力を抜いて書き続ける ブログ書き始めでPVが伸び悩み、辛い時期もあるでしょう。 文章が下手でもいいんです。 誤字があっても後から修正すればいいんです。 PVが稼げるようになれば、Adのインプレッション数（広告の表示回数）は伸びますから！！ 諦めたらそこで試合は終わりですよ。 安西先生 いつか陽の目を見るはずです！！ ぜひ諦めずにブログ書き続けましょう。 そして、クリスマスが近いのでぜひ好きな人への告白がまだの人は頑張ってください。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry406","title":"Gatsbyブログサイト移行物語~投稿テンプレにカテゴリやらキービジュアル（アイキャッチ）追加~","date":"2020-11-30","modifiedDate":"2021-12-30","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"記事のmarkdownファイルの設定でカテゴリ、タグ、記事のキービジュアルを追加できるようにしました。主にはgatsby-plugin-imageを使って、キービジュアル画像なã

1©ã‚’追加する方法をご紹介します。※ Mac以外では検証してません。ご了承ください。※ 2021å¹´12月28日v4対応のためリライトしました。","tags":["React"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 ブログのファーストビューって大切ですよね。キービジュアル次第（記事の最初に目を引く画像）で読むか読まないか考えますもん。 ということで記事のmarkdownファイルの設定でカテゴリ、タグ、記事のキービジュアルを追加できるようにしました。 主にはgatsby-plugin-imageを使って、キービジュアル画像などを追加する方法をご紹介します。 おまけで、「この記事を書いた人」的なパーツも改造しました。 ※ 2021å¹´12月28日v4対応のためリライトしました。 今までのGatsbyの記事と注意点 現在ここまで記載しています。 制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。 1. インストールからNetlifyデプロイまで 2. ヘッダーとフッターを追加する 2. 投稿テンプレにカテゴリやらキービジュアル（アイキャッチ）追加（←イマココ） 3. ブログ記事、カテゴリ、タグ一覧の出力 4. プラグインを利用して目次出力 5. プラグインナシで一覧にページネーション実装 6. 個別ページテンプレート作成 7. プラグインHelmetでSEO調整 8. CSSコンポーネントでオリジナルページを作ろう！！ 9. 関連記事一覧出力 11. タグクラウドコンポーネントを作成する 12. パンくずリストを追加する 13. 記事内で独自タグ（コンポーネント）を使えるようにする v5へのアップグレード方法はこちら。 ※ Gatsbyは2021月12月、v4にバージョンアップしています。随時リライトしています。 このシリーズではテーマGatsby Starter Blogを改造します この記事は一番メジャーなテンプレート、 Gatsby Starter Blogを改造しています。同じテーマでないと動かない可能性があります。 今回やりたいこと ブログ記事のmarkdownファイルだけを取得し、投稿ごとにキービジュアル画像やカテゴリなどの属性を追加し、テンプレートに表示したい。 まずは普段更新する記事用のテンプレを作ります。長いですが、目次を活用しながら読み進めてください。 今回の完成目標です。 おまけで、「この記事を書いた人」的なコンポーネントも改造しました。かなりブログっぽいページにGrade Upできます！ 記事と記事中の画像などの格納フォルダーの設定 gatsby-node.jsのコメントから。 Explicitly define the siteMetadata {} object This way those will always be defined even if removed from gatsby-config.js Also explicitly define the Markdown frontmatter This way the \\"MarkdownRemark\\" queries will return null even when no blog posts are stored inside \\"content/blog\\" instead of returning an error siteMetadata 内のデータ（オブジェクト）を明示的に定義します。 gatsby-config.jsから削除された場合でも、これらは常に定義され。Markdown内のfrontmatterも明示的に定義します。 このように、「MarkdownRemark」クエリは、ブログの投稿は、エラーを返す代わりに「content/blog」内に保存されます。 つまり、content/blogに格納されたmarkdownファイルは記事として反映されます。 記事内本文に表示したい画像もマークダウンファイルと同じblogフォルダーに格納します。 私は今公開されているサイトにディレクトリー構造をできるだけ近づけるため、以下のように設置しました。 gatsby-config.jsを見ると /content/blog と /src/images 以下に画像が格納できるようになっているのでこのまま使います。 v4以降、ディレクトリー構造の変更方が分かっておらず、blogの中にblogsがあるというちょっと気持ち悪い構造になってしまったのですが、一旦はこれで運用することにしました。 frontmatter を設計し投稿する。 記事ごとに必要なタイトルなどの項目を設計します。 ここで適当に設計したら多分あとで泣きをみます。 後々何が出力したいかよく考えて作成します。今から以下のファイルを操作します。 デフォルトではこんなものだと思いますので、キービジュアル（hero）、記事のタイプ(pageTypetype)を追加します。 ちなみに私のブログではcategoryは1つ、タグは複数OKというルールとしました。 ルールが煩雑だと記事も破綻しますからね。。。 entry1.md を新たに作り Frontmatter を編集する 複数の値は配列で。 今までブログをblogs/以下に公開していたので content/blog/blogs/ ディレクトリー内に格納します。 starter blog では記事はblog以下のディレクトリ構造がページ生成時に継承されます。 domainがhttp://example.comだった場合。 gatsby-node.js から frontmatter の設定変更 gatsby-node.js ファイルから exports.createSchemaCustomization 〜といいうコードを探します。 まだ何ã

1‚‚触ってなければ、239行目あたり（結構下の方）にあるはずです。 createTypes内に設定された出力したいfrontmatterに応じて修正ます。 type Frontmatterに cate、tags, hero、pageType を追加します。 GraghQLのコメントは#を頭に付与するだけ。 GraphQLはクエリ言語なので、markdownファイルのfrontmatter(---で囲んだ部分)の設定もここから読み取ることができます。 取得するデータは result に格納設定されています。 frontmatterに、hero、pageTypeをgatsby-node.jsの上の方に追記します。 さらに、上記（変数 result）のコードの少し下のあたりも修正。 heroの値をテンプレート側で受け取れるようにします。万が一キービジュアルの設定がなかった時のために、ダミー画像用のコードもセットしておきます。 pageType blogだけに絞り込んで出力 prev nextボタンもpageType blogのみ動くように修正 これでmd側に書かれている画像パスを参照できるようになります。 出力するテンプレートを改造し、画像を出力する。 出力するテンプレートのコードを編集します。 このテンプレートでは blog/ 以下のmarkdownファイルから取得したコンテンツを出力します。 GraghQLで受け取るクエリを変更 pageQueryの設定を変更します。 $hero: String 追加し、markdownファイルから gatsby-node.js 経由で画像パスを取得します。 このように取得した値は、絞り込みなどに使えます。 allFile にはすべてのファイル情報（mdや画像）が格納されています。 site と markdownRemark の間に $heroの値と一致するファイルを取得する gatsby-image-plugin 出力するための値を取得しておきます。 Gatsbyは WebP（ウェッピー） や AVIF（エーブアイエフ） も対応しています。formats を指定しなければ、従来の画像形式（pngやjpgなど）とWebPのみで出力できます。 WebP（ウェッピー）という画像形式をご存知でしょうか？ 長い間、webの静止画は大部分がJPEG/GIF/PNGのいずれかでした。WebPはこのすべてを置き換えることができる次世代のフォーマットです。2020å¹´9月リリースのiOS 14がWebPをサポートしたことで、主要なモダンブラウザーの足並みがようやく揃いました。 次世代画像形式のWebP、そしてAVIFへ WebPはSafariも対応したので、IEガン無視の人は十分使えます。 gatsby-image-plugin は loading Lazy 対応してあります。 placeholder は loading Lazy で画像が表示されるまでに、代わりに表示される画像です。DOMINANT_COLORがデフォルトですが、BLURRED にしておくと、表示したい画像のぼやけたものを表示してくれ、代替画像から画像実物にきりわかる時が自然です。 不要であれば NONE にしておきましょう。 細かい設定（オプション）についてはこの記事の最後、おまけ・画像のオプションなどに書いてあるので、そちらも参考にしてください。 値が取れているか確認します。 必要なデータはchildImageSharpに格納されています。 帰ってくる値はこんな感じ。 gatsby-plugin-imageでキービジュアルを出力 starter blog にデフォルトで入っている gatsby-plugin-image をインポートします。 gatsby-imageからgatsby-plugin-imageへ 確かv3以降、gatsby-plugin-imageに画像の取り扱いが変わりました。出力方法も変わります。 今回、 でキービジュアル画像を出力するのですが、使い方は以下のように childImageSharpの値を丸ごと getImage に渡します。 では実際にテンプレートの header タグ内に実装してみます。 出力コードはこんな感じ。何も設定しなくても、decoding=\\"async\\"が付与されています。 ついでに記事の公開日時もtimeタグで書き直します。timeタグを使うと検索エンジンが「時」を表しているコンテンツであることを認識してくれます。 CSSを追加してないのでちょっとダサいけど出力できました。 カテゴリやタグを出力 テンプレートにã

1‚«ãƒ†ã‚´ãƒªã‚’追加します。 タグやカテゴリも取得できるようにする markdownRemark に cate、tags、を追加します。 お好みで日付フォーマットも変更しておきます。 データが取れるか確認。 出力結果は以下の通り。ちゃんとmarkdownファイルからfrontmatterのデータが取れました。 カテゴリの出力 まずはカテゴリのみ出力します。 タグも追加。タグは複数あるので map で出力します。 Reactではmapのようなループ系の処理で key がないと怒られるので、必ずセットしてください。 今は単に文字だけを表示してますが、次のブログ記事、カテゴリ、タグ一覧の出力でカテゴリやタグの一覧ができるのでその時にリンクを付与します。 next（次の記事へ） と previous（前の記事へ）の挙動 最初から実装されている next（次の記事へ） と previous（前の記事へ）のボタンが動くか確かめます。 ユーザーには基本記事のみ（pageType: blog）を行き来して欲しいので、ちゃんと動いているか確かめます。 entry1.mdを複製してentry2.mdを作ります。 元々あった「hello,world」などへのリンクがnext（次の記事へ） と previous（前の記事へ）に表示されなくなっていればOKです。 全体のスタイルをstyled-componentsで整える 前回同様、styled-componentsを使います。 インストール方法はヘッダーとフッターを追加する - せっかくなのでstyled-componentsでスタイルを入れてみるを参考にしてください。 styled-components用にタグを書き直します。 1. articleからArticleへ 2. 画像のラッパーを増やす 3. 日付用のクラス追加と少しコード修正 3. カテゴリ、タグのdlをDlへ 4. 記事の本文出力を内包しているsectionをBlogEntryへ 5. ページ送りのnavをBlogPostNavにし、ulのインラインスタイルを削除 デザインを整えます。ファイルの下の方にスタイルを追記します。 プロフィール（bio.js）のコンポーネントを改造してみよう プロフィール用のコンポーネントをbio.jsを改造しましょう！ その前に、gatsby-config.jsの基本情報が設定されている siteMetadata を確認し、必要があれば編集、追記してください。 SNSアカウント情報を足してみました。 gatsby-config.js の siteMetadata にはどのコンポネントやテンプレートからでも、アクセスできます。 アクセス方法はいろいろありますがbio.jsでは、 useStaticQuery を使って取得しています。 を使ってプロフィール画像を表示してあるので今回差し替えます。 gatsby-plugin-imageには と の画像の取得方法があります。 コンポーネントを使うとGraphQLのコードを書かずに直接画像を指定できます。 難点は相対パス画像しか使えません。変数も使えないのでたまに不便。 @fortawesome/react-fontawesomeをインストールしてSNSリンクにアイコンを付与 せっかくなのでfontAwesomeを使えるようにします。 以下コードを追加。 アイコン用のタグを追加します。 styled-components でスタイルを整える styled-componentsを使うためにタグを書き換えます。 スタイルは下の方に追記します。 完成はこんな感じ。 まとめ 記事詳細ページはアレンジできるようになりました！ 次回は「ブログ記事、カテゴリ、タグ一覧の出力」です。 皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。 おまけ。画像のオプションなど オプションがめちゃくちゃ細かいのですが、大まかなものだけ表にまとめました。全部書けないのでもっと詳しくみたい人は公式サイトのイメージオプションを参考にしてください。 すべてのオプション | オプション | デフォ値 | 説明 | | ------------------------------------------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | ayout | \\"constrained\\" /CONSTRAINED | リサイズの振る舞い | | width/height | | 画像サイズ | | aspectRatio | | アスペクト比。通常は画像のアスペクト比に依存 | | placeholder | \\"dominantColor\\"/DOMINANT_COLOR | 画像がアップされるまでの一時的な画像 | | formats | [\\"auto\\",\\"webp\\"]/[AUTO,WEBP] | 画像のフォーマット | | transformOptions | {fit: \\"cover\\",cropFocus: \\"attention\\"} | グレースケールなどへ変換可能 | | sizes | 自動作成 | フルサイズの指定が欲しい時だけ使う | | quality | 50 | 画像のクオリティ0 ~ 100 | | outputPixelDensities | For fixed images:[1, 2]For constrained:[0.25, 0.5, 1, 2] | 生成する画像ã

1®ãƒ”クセル密度。 | | breakpoints | [750, 1080,1366, 1920] | デフォで、一般的なデバイス解像度の幅が生成。ソース画像よりも大きな画像が生成されることはない。ブラウザに応じて自動かつ適切な画像サイズに切り替える。 | | blurredOptions | なし | プレースホルダがぼやけてない限り無視される | | tracedSVGOptions | なし | SVG用のプレースホルダーオプション。 | | jpgOptions | なし | jpegを生成するときシャープにするオプション | | pngOptions | なし | pngを生成するときシャープにするオプション | | webpOptions | なし | webpを生成するときシャープにするオプション | | avifOptions | なし | avifを生成するときシャープにするオプション |","noindex":false},{"slug":"entry405","title":"フィリピン最大級水族館 セブオーシャンパーク【人魚に会える】","date":"2020-11-28","modifiedDate":"2026-06-08","category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2020/entry405.webp","description":"フィリピン最大級水族館セブ島の本格的な水族館セブオーシャンパークの見どころをご紹介！！Klook（クルック）による事前予約の裏ワザ！アマゾンなどの古代魚を始めとする世界中の魚が見れるだけではなく、鳥や爬虫類まで展示されており、飽きることなく楽しむことができます。人生初あの生物に遭遇したのもあり、、、、セブオーシャンパークについてレポートします。","tags":["セブ観光","セブ島エンジニア生活","海外移住"],"body":"セブ島にはフィリピン最大級水族館セブオーシャンパークという観光名所があります。プロモ（ディスカウント）だったのもあり、友だち3人で行ってきました。 アマゾンなどの古代魚を始めとする世界中の魚が見れるだけではなく、鳥や爬虫類まで展示されており、飽きることなく楽しむことができます。人生初あの生物に遭遇したのもあり、、、、セブオーシャンパークについてレポートします。 フィリピン最大級水族館セブオーシャンパークってどんなところ？ セブオーシャンパークは2019å¹´8月24日にオープンした唯一セブ島の本格的な水族館です。 ロックダウンで運営していませんでしたが、いつの間にか再開したみたいです。 2020年にはプロモ（ディスカウント）で Week Day 430ペソでした！ しかもミネラルウォーター1本もサービスでついてきました。 水族館なのに鳥や爬虫類のような変わった生物も飼育されています。 | | 詳細 | | ---------- | ------------------------------------------------------------------------------------------------------------------------------- | | 施設名 | Cebu Ocean Park | | 施設詳細 | 3階建 | | 料金 | 土日祝：900ペソ平日:700ペソ（※2026年時点の最新料金） | | 営業時間 | 9:00~18:00（最終入場17:00） | | HP | https://www.cebuoceanpark.com/ | | 場所 | SMシーサイドモール隣Google Mapで場所を確認する | 2026年でも安く入場する裏ワザ Klook（クルック）などの海外OTA（オンライン予約サイト）で事前購入するとやすくなることがあります！ ネット前売り価格： 平日：約 680〜720ペソ 土日祝：約 870〜890ペソ その他、セブ在住のIDがあればローカル割で600ペソで入場できるようです。 私はDusit Thani（デュシタニ）のビーチのデイユースもKlookで平日600ペソで購入しました。 今回付き合ってくれた人 ちーちゃん ... 元同僚。英語が話せる マイアさん ... セブ島の日本人占い師。タロットで占ってくれます マイアさんの記事はこちら。 クリスマス前だし恋の相談なんかある人はぜひどうぞ。 セブオーシャンパークを回るポイント 日本人が行くなら共通して気ã

1‚’つけたいポイントをお伝えします。 Jungle Treck（ジャングル・トレック） 入場してチェーンの暖簾（のれん）をくぐると金魚や錦鯉も！？世界中からやってきた淡水魚が展示されています。 エリア別に水槽を分けられてます。 閲覧注意！古代魚がお魚のお頭食べる瞬間を目撃！ エントランスから少し歩くと、アマゾンの古代遺跡を感じるお魚の水槽がありました。 ちょうどエサやりの時間でした。 古代魚？アマゾンの魚が「お魚のお頭（かしら）」を咥えてご満悦な顔でスイスイ泳いでいました。。。 「お頭（かしら）」はお口に収まりきらないほどの結構なサイズでした。 「アマゾンのだしそんなもんか」と思いました。が、、、 別の水槽でも金魚が自分と同じぐらいのサイズの魚の切り身をついばんでいるところを見てしまいました。 諸行無常。 生き物は命あってこそがすべてと悟りました。 鳥フンに注意！水族館なのに頭上には鳥 頭上にはインコがたくさん飛んでいます。 しかも水槽にもBigな鳥フンが派手にヒットしていました。 このエリアには基本、屋根はありません。 鳥フンのヒットが水槽じゃなく、自分だと思うと。。。 多少のアクシデントは覚悟して進みましょう。 イãƒ

1³ã‚³ã®ç¨®é¡žã¯ã€Œã‚´ã‚·ã‚­ã‚»ã‚¤ã‚¬ã‚¤ã‚¤ãƒ³ã‚³ã€ã¨ã„うらしいです。 首元がトラ柄でまるで「大阪のおばちゃん」のようでした。 マイアさん曰く、台湾のおばちゃんも似たようなもんだそうです。 おばちゃん\\b最強 in the World。 インコたちには「Creepy Critters（クリーピー・クリッターズ）」を過ぎて2階に上がるともっと間近で見ることができます。 逃げられないようネットが張ってありますが、日本人からすればもっと珍しい見た目の鳥がネットの外に飛んでいました。 Creepy Critters（クリーピー・クリッターズ） ここからは不気味な生物（クリーピー・クリッターズ）の展示です。爬虫類や昆虫が展示されています。 ゴ●ブリにしか見えないCreature（生物）もいました。 大の昆虫嫌いなので、怖くてとても写真を撮れませんでした。 余談ですがフィリピン・セブ島のゴ●ブリは茶色く、現地の言葉で「オッオッ」って言います。 Seven Seas（セブン・シーズ） 室内の水槽の展示です。カクレクマノミをはじめとする可愛いお魚を見ることができます。 イソギンチャク、チンアナゴ、エビも超可愛かったです！！ 魚のエサが白菜だったことに衝撃も受けました。 まるで海に入ったかのよう？内側に人が入れるスペースがある水槽あり！けど……… Seven Seas（セブン・シーズ）エリアには水槽の内側に入ったかのようなところもありました！ とにかく狭い。 身長が高い人は気をつけて、Chabby（わがままボディー）な人は諦めてください。 触れる体験コーナー 魚やヒトデなど直接海の生物に触れる体験コーナーもありました！ そして、顔ハメ発見！ 我々も調子に乗って顔ハメでパシャり。 魚をさわる以外に、有料ですがこんなアクティビティも楽しめます！ | 内容 | 追加料金 | | ------------------------------ | ------------ | | ドクターフィッシュ | 100ペソ/20分 | | シートレック | 1200ペソ | | クロコダイルケージ | 2000ペソ | | エイと一緒に泳げるアクテビティ | 1000ペソ | フィッシュスパ、体験しました！ せっかくなのでフィッシュスパを体験しました。 ドクターフィッシュという魚がいらない角質を食べてくれるとか。 全長約10cm。西アジアの河川域に生息する淡水魚で、37℃程度の高い水温でも生息できるためトルコなどの温泉にも生息するが通常は河川や池沼に生息する。水温、水質ともに適応の幅が非常に広く丈夫な魚である。餌を求める時は活発に動き回るが、普段は石などの上や陰でじっとしていることが多い。食性は雑食性。口が吸盤のようになっており石や岩などに付着した藻類を舐めるようにして食べることができるほか、底にいる微生物や昆虫の幼虫などを食べる。 >ドクターフィッシュ| Wikipedia 集（たか）られすぎて、もののけ姫でいうタタリヘビが体から湧き出ているみたいになってしまいました。。 たらふく食べたのでしょう、小さな黒いものがぷかぷか………。何が浮いていたのかはご想像にお任せします。 結局、制限時間20分を超えても居座り続けバードショーを見逃してしまいました。 海中トンネルから360 Acrylic（360アクリリック） やっと目玉エリアに到着です！ フィッシュスパの隣から再び屋内に入ると、我々3人余裕で丸呑みできるサイズのワニが待ち構えています。 ワニは80年も生きるそう。 海中トンネルへ。 とてもフォトジェニックな写真が撮れます！ フィリピン人はセルフィー大好きなので、良い場所の奪い合いとなります。 未確認生物（UMA）??大はしゃぎで写真を撮ã

1£ã¦ã„る時に事件は起こった 必死で写真を撮っていると、水槽の奥に明らかに魚ではないフォルムの生き物が映り込みました。 あれ？？！ あれれ？？！ 水中に人魚の格好をしたおっさん？？？ 目を疑いました。 エイやそのほかの生き物がいるにもかかわらず、我々はおっさんか人魚かよく得体の知れない生き物の撮影に夢中でした。 優雅に泳いたと思いきや、足場があるところに尾びれで直立したり。。。動きは人間です。 我々が必死で撮影しているとそのUMA（未確認生物）に手招きされ、ようやく気づきました。 これからショーが始まるんだ。 マーメイド（人魚）ショーを見ました！ マーメイドショーを見るために足早に海中トンネルを抜けると階段式の観覧席がありました。 圧巻の海中トンネルで満足していた我々ですが、さらにマーメイド（人魚）ショーがあるなんて感動・サイコー！ 4頭（？）の男女のマーメイドが海中を魚のように泳ぎます。 泳ぎだけでなく、ハート形のバブルを作るなど圧巻でした。 そして、近くで見たらおっさんじゃなかったです。 笑顔がキュートな女性でした。 おっさん呼ばわりしてごめんちゃい。 腹が減ったので、SMシーサイド・モールにあるミシュラン1つ星を持つ「ティム・ホー・ワン」へ 散々オーシャンパーク内を歩いて腹が減ったので、「香港点心専門店」ティム・ホー・ワンへ行ってきました。 蒸し餃子や焼売、春巻きなどが中心を中心に味わえることができます。 そして、日本でも食べることができるようです！ http://timhowan.jp/ 餃子の皮が具材によって違って、柔らかい。しかもエビなど、海鮮素材がプリプリでした！！ タレは全体的に辛めでした。 3人でシェアして2000ペソくらいでした。 久々に満足できる中華を食べました！ まとめ・セブオーシャンパークはおもしろい 現在ロックダウンで行けるところが限られています。 近場で海を感じられる、水族館・セブオーシャンパークに行って息抜きをしてみてはいかがでしょうか？ 運が良ければ、マーメイド（人魚）にも会えますよ！ 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry401","title":"Gatsbyブログサイト移行物語~インストールからNetlifyデプロイまで~","date":"2020-11-26","modifiedDate":"2021-12-28","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry401-v4.webp","description":"現在、前から気になる静的サイトジェネレーターのGatsbyでブログを作り直しています。今回はインストールして、Netlifyでデプロイしてウェブサイトを公開するまでの方法をご紹介します。このサイト表示の重さに耐えかねて、サクラのレンサバ×concrete5でブログ書くのを断念することにしました。※ Macでのやり方となります。※ 2021/12/28v4対応のためリライトしました。","tags":["React","github","Netlify"],"body":"2026年、Gatyby はレガシー化してしまい現在開発が止まってます。新しいSSG記事を参考にしてください。 現在、前から気になる静的サイトジェネレーターのGatsbyでブログを作り直しています。 今回はインストールして、Netlifyでデプロイしてウェブサイトを公開するまでの方法をご紹介します。このサイト表示の重さに耐えかねて、サクラのレンサバ×concrete5でブログ書くのを断念することにしました。 ※ Mac以外では検証してません。ご了承ください。※ 2021å¹´12月28日v4対応のためリライトしました。 今までのGatsbyの記事と注意点 現在ここまで記載しています。制作するまでを目標にUPしていくので順を追ったらGatsbyサイトが作れると思います。 1. インストールからNetlifyデプロイまで（←イマココ） 2. ヘッダーとフッターを追加する 2. 投稿テンプレにカテゴリやらメインビジュアル（アイキャッチ）追加 3. ブログ記事、カテゴリ、タグ一覧の出力 4. プラグインを利用して目次出力 5. プラグインナシで一覧にページネーション実装 6. 個別ページテンプレート作成 7. プラグインHelmetでSEO調整 8. CSSコンポーネントでオリジナルページを作ろう！！ 9. 関連記事一覧出力 11. タグクラウドコンポーネントを作成する 12. パンくずリストを追加する 13. 記事内で独自タグ（コンポーネント）を使えるようにする v5へのアップグレード方法はこちら。 ※ Gatsbyは2021月12月、v4にバージョンアップしています。随時リライトしています。 このシリーズはGithub・gatsby-starter-blogに各内容ブランチごとで分けて格納しています。 Gatsby(JS)とは？ Gatsby(JS)はReactで作られた 静的サイトジェネレーター です。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理をカンタンに行うことができます。 公式サイト 生成される静的サイトは SPA（シングルページアプリケーション） でもあるので、表示速度も速く感動します。 Gatsby(JS)の気になる難易度 難易度はJS触れる人ならなんとかいけると思います。 1から作ること考えたら超楽です！ Reactの入口としてはオススメです。コンポーネント作る練習にもなります。 ES6以上の記述方法がある程度知っている。 あとGraphQLの使い方知らないと慣れるまでしんどいかもしれません。 React、GraphQLについてはこのブログの最後の方に説明足してます。興味あったら読んでください。 Gatsby JS をインストール まずは、Gatsbyをグローバルにイãƒ

1³ã‚¹ãƒˆãƒ¼ãƒ«ã—ます。 インストールできない場合は、sudo実行してください。 Minimal Node.js version 14.15.0 現時点でのv4で必要とするNodeの最低バージョンは14.15.0です。バージョンの上げ方が分からない方はこちらをご覧ください。 もしくは スターター用テンプレートをインストール まずはスターター用テンプレートをインストールしましょう。 Gatsby Starter Library 一番メジャーでベーシックなGatsby Starter Blogをインストールします。 公式ページのStarterの中に「gatsby-starter-blog」があるので「Install with gatsby-cli」から以下コードをコピーします。 gatsby-starter-blog はディレクトリー名なのでお好みで変えてください。 cdコマンドで移動します。 私は普段 VS Code からコマンドを使います！Gatsbyのディレクトリーができたら、そのディレクトリをVS Codeで開くことをオススメします。 Netlifyにデプロイしたいのでgitにも追加します。 今回私はgithubを使い、公開設定で制作することにしました。 https://github.com/ 早速新しくリポジトリを作ります。 とくに設定せずデフォルトのままで追加します。 コミットできるようにしておきます。 まずは「first commit」とコメントしてコミット。 リモートと連携します。連携するURLはgithubのリポジトリページから取得しておきます。 以下のコマンドでリモートリポジトリと連携できます。 gitアカウントを複数使い分けている人は、ssh接続じゃないとpushできないので以下のコマンドで。 注意！！！ 最近、githubのポリシーが変わって複数のアカウントでhttpsでのpushができなくなりました。 その場合は、鍵設定が必要です。 設定の仕方はこちらを参考に。 GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~ とりあえず今回は mainブランチ へプッシュできるようにしておきましょう！！ 追加できているか確認。 Gatsbyを起動してみる 早速Gatsbyを起動してみましょう！ 以下コードでタスクランナーが走ります。 他にもコマンドがいくつかありますが、頻繁に使うのはnpm run cleanぐらいです。 | コマンド | 詳細 | | ---------------- | ------------------------------ | | npm start | 開発サーバーを起動 | | npm run build | ビルド | | npm run serve | ビルドした内容を動かす | | npm run format | コードの整形 | | npm run clean | ローカルのキャッシュなどの削除 | 初期設定等を変更しよう ファイル gatsby-config.js から初期設定を変更しておきましょう！ サイトメタ情報変更。お好みで変更してください。 記事を追加しよう！ さらに記事を追加します！ 記述方法はMarkdownです。 記事はcontent/blog内に格納されています。 投稿：test.mdを追加してみよう /blogディレクトリー直下にtest.mdを追加してみましょう！ 構造は以下の通り。 タイトルやメタ情報を追記できるfrontmatterの部分と、本文に当たる部分の2パートあります。 以下の通りfrontmatterを書いてみます。 以下はSEO的に大切なので抜かりなく記述しておきましょう。 title ... タイトル date ... 日にち。-（ハイフン）でくぎる description ... 記事の説明 それに続けて適当に本文を書いてみましょう！ 今回はテスト練習なので、これでコミット&プッシュしてデプロイしてみます。 ファイルの追加 通常のコミット。 今回は次のようにコミットメッセージを概要と詳細に分けたい時は間に改行を挟みます。 EOM入力で終了できます。 もしコミットのコメントを間違えたと思ったらctrl + cで一旦抜けて入力しなおしましょう。 Netlifyへデプロイする Netlify を git と連携して mainブランチ に push されたデータが反映するように設定しましょう！ Netlify公式サイト 右上のSign Upから入って、githubと連携させます。 「New site from Git」からリポジトリを追加します。 Continuous DeploymentからGitHubを選択。 勝手に公開用のディレクトリpublicとbuildコマンドgatsby buildが選ばれます。 あとは「Deploy site」ボタンをクリックするだけです！ これで少し待ったら、デプロイのステータスがpublishedとなるはずです！！ Node のバージョンにご注意（2021/12/12追記） 初期デプロイ時にデフォルトで最新の安定バージョンのNodeがインストールされます。以後引き続き最初インストールされたNodeが使用されます。 現段階（2021/12/12）ではNetlifyは現在12.x.x以上でないと使えません。 Gatsby をアップグレード（v4→v5）して Netlify にデプロイで、リポジトリにファイルを追加するだけで、Node バージョンを変更できる方法を紹介しています。 ビルドでコケます。 古くなってしまった場合は、Nodeのバージョンを設定し直します。 Site setting > Build & deploy > Environment に移動。 Environment variables に Key => NODE_VERSION value => x.x.x（設定したいバージョン）をセットして保存（Save）します。 必ず、Netlifyで使用できるバージョンを確認しておいた方がいいいです。 これで次回のデプロイ時から、新しいバージョンが使えます。 Gatsby ではバージョンごとにNodeの求められるversionが違うので注意してください。 まとめ いかがでしたでしょうか？ Github と連携して、gitのコマンドで mainブランチ に push するだけで公開できるようになったかと思います。 次回は「ヘッダーとフッターを追加する」をご紹介します！ 最後までã

1Šèª­ã¿ã„ただきありがとうございました。 参考 & Wiki 今回難しい用語が多かったので、Wikiをつけました。参考にしてください。 静的サイトジェネレーターとは？ 静的なHTML/CSS & JavaScriptを生成するツールのこと。 Reactとは？ Facebookの開発したJavaScriptのフレームワーク・ライブラリの1つです。 UIのパーツ（構成部品）、いわゆるコンポーネントを作り、組み合わせてウェブサイトなどをできます。 パーツを再利用できるのが最大の特徴です。 React 公式サイト GraphQLとは？ Facebookが開発しているWeb APIのための規格で「クエリ言語」と「スキーマ言語」の2つから構成されています。 クエリ言語は、GraphQL APIのリクエストのための言語で、これはさらにデータ取得系のquery、データ更新系のmutation、サーバーサイドからのイベントの通知であるsubscriptionの3種類があります。なお、この記事では、総称としてのクエリ言語は「クエリ言語」と書き、クエリの3種のひとつであるqueryは「query」と書くことにします。 スキーマ言語は、GraphQL APIの仕様を記述するための言語です。リクエストされたクエリは、スキーマ言語で記述したスキーマにしたがってGraphQL処理系により実行されて、レスポンスを生成します。 「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ","noindex":true},{"slug":"entry402","title":"コンクリ（CMS concrete5）へreCAPCHA v3を追加しました","date":"2020-11-26","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2020/entry402.webp","description":"みなさん、スパム対策してますか？。GoogleのreCAPTCHA v3が機械学習で「このメールスパムやで！」って選り分けてくれるようになりました。リリース当初は喜び勇んで運用しているサイトにガツガツ実装しました。じつは最近、当ブログサイト「銀ねこアトリエ」に実装してみたのでそのやり方を紹介します。","tags":["concrete5"],"body":"reCAPTCHA とは？ みなさん、スパム対策してますか？GoogleのreCAPTCHA v3が機械学習で「このメールスパムやで！」って選り分けてくれるようになりました。 リリース当初は喜び勇んで運用しているサイトにガツガツ実装しました。 じつは最近、当ブログサイト「銀ねこアトリエ」に実装してみたのでそのやり方を紹介します。 みなさん、このスクショの右下のラベル見たことありますか？ これ、reCAPTCHA v3と言います。 reCAPTCHA（リキャプチャ）とは、ウェブサイトの制限エリアへのアクセスを試みるボットからサイトを防御するためCAPTCHAを利用するのと同時に、そのCAPTCHAに対する返答を紙の本のデジタル化に活かすシステムである。 reCAPTCHA | Wikipedia 我々の使い道としてはボットを排除して、スパムからあなたのサイトを守ってくれるありがたい無料サービスです。 「私はロボットではありません」 「何個信号あるか選べ」 みなさん経験あるんじゃないでしょうか？ ↓↓↓こいつ、結構イライラしますよねww↓↓↓ こちらはちなみにreCAPCHA v2の方です。 サイトを守るために必要なサービスです。 Googleも親切でタダで使わせて使わせもらえるのでぜひ実装してみたらいいと思います！！ 実装するために必要なスキル 実装するためには以下必要です。 多少知見があれば、多分そんなに難しくないです^ ^ 四則演算子ができて、関数ぐらい使えれば余裕で実装できると思います。多分。 フロントのコーディングスキル PHP&JS知識 基本のプログラミングスキル concrete5へのreCAPCHAの実装手順 外部フォームブロックでフォームを実装していることが前提です。 contact_formという外部ブロックを作ったã

1®ã§ã‚ればこんな構造になります。 外部フォームの実装方法は↓↓↓こちら↓↓↓ コンクリの外部フォームでお問い合わせフォーム作ったよ Googleアカウントからトークン発行 Admine Consoleから新しいサイトの設定をしてトークンを発行しましょう。 reCAPCHA 右端のプラスマークからreCAPCHAを追加したいサイトを設定します。 サイトのドメインなど、サイトの設定します。 今回はreCAPTHA v3を選びます。 ドメインを追加し、オーナーにgmailを設定。 利用条件の同意にチェックを入れ、送信をします。 トークンを発行できます。 あとは実装するのみです！！！ キーは「サイトキー」と「シークレットキー」の2つです。 View：HTML側の設定 たとえば、formというIDのformタグをターゲットにしたい場合こんな感じ。 externalform/contactform.php以下にこちらを追記。 JSを追加します。 とりあえずFooter付近で大丈夫だと思います。 JSにはrender以降のパラメーター[サイトキー]にreCAPCHAで取得できるサイトキーを記述します。 続けてJSを追記します。 次はPHP側のコントローラーに記述します。[シークレットキー]には取得した値を入力します。 $result->scoreから取れるスコアレベルは０ ~ 1なのでその間で設定します。 まとめ あとは、スパムが来たらreCAPCHAの管理画面から監視できるようになります！！ ほぼスパムメールは来なくなると思いますが、スパムのスコアレベルはご自身で調整してください。 WPなどではcontact form 7などのプラグインを使えば一発で設定可能ですw せっかくの大切なあなたのコンテンツ、しっかり守ってあげてくださいね。 そして、最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry400","title":"WordPress プラグインなしでカスタム投稿のカスタムフィールドにメディアを追加する方法","date":"2020-11-21","modifiedDate":"2023-12-28","category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2020/entry400.webp","description":"2022å¹´12月にメンテナンス済み。プラグインを使わずにカスタムフィールドで画像を登録する方法のご紹介です。投稿画面から便利にかんたんに複数の画像登録したくて探していたらJavaScript APIが使えることを知りました。メディアを呼び出せるとリッチに画像をカスタムフィールドで登録できる機能を実装できます。","tags":["WordPress"],"body":"今回は WordPress のプラグインを使わずにカスタムフィールドで画像を登録する方法のご紹介です。 投稿画面から便利にかんたんに複数の画像登録したくて探していたら JavaScript API が使えることを知りました。メディアを呼び出せるとリッチに画像をカスタムフィールドで登録できる機能を実装できます。 T.D 様よりタイポの発見・ご指摘があり修正させていただきました！ありがとうございました。 実例：商品登録などのカスタム投稿にスライドショーを追加するためにカスタムフィールドにメディアを追加 普通の投稿（ブログ記事以外）で投稿の種類を増やせるのが WordPress の便利なところですよね？ 今回はお仕事で商品という種類の投稿を作って、いくつか画像を登録して投稿ごとに商品のスライドショーを実装しなければなりませんでした。 プラグイン・カスタムフィールドアドバンスを利用すればカンタンなんでしょうけど「テーマをインストールした瞬間から設定なしで使える」状態を目指したかったので、カスタマイズすることになりました。 私が実際実装した内容に限りなく近い状態での実装方法をご紹介します。 カスタム投稿を新規で作成 function.php などにcreateposttypeという関数を作って、新たにカスタム投稿を追加します。 add_action()は特定のアクションに対して指定した関数をフックさせる関数です。 この場合（init なので）プラグインなどの初期化のタイミングに実行されます。 今回はあくまで「カスタムフィールドにメディア（画像登録）を追加する方法」のご紹介なので、詳しい説明は割愛します。 フックのタイミングは以下を参考にすると良いです。 プラグイン API/アクションフック一覧 カスタム投稿の編集画面にメタボックスの追加 addmetabox()関数を使って登録エリアを作ります。 引数はこちらを参考にしてください。 関数リファレンス/add meta box productcustomfields関数内に実際登録させる内容コードを書きます。 以下のような感じで出力されるようにします。 今回は画像名と画像を 3 つまで登録できるようにしてみます。 実際のデータはフォームタグを hidden で仕込んでおき、JS で動的に値を格納できるようにしておきます。 JavaScript API の呼び出し 管理画面でメディアの JavaScript API を利用してメディアのポップアップを呼び出せるようにします。 wpenqueuemedia()が無茶便利でした！ 関数リファレンス/wp enqueue media JavaScript API の調整 編集画面に JavaScript API を使って画像追加、削除ボタンから動的に画像を操作できるよう管理画面の footer 部分に JavaScript を追加します。 画像が選択されたら、JS で仕込んでおいた img タグを表示するように JavaScript を仕込んでおきます。これで UI（見た目）もそこそこきれい。 画像と画像名を保存 画像と画像名を保存できるようにします。 プラグインなしで実装するメリット ぶっちゃけ WordPress ってプラグインの方が安定してますしすべての機能を網羅していて痒いところに手が届きます。しかも無料です。 しかし 「すべての機能」を網羅しているがゆえに不要な機能もたくさん付いています。 私のカスタマイズするメリットは以下のような感じです。 サイトの軽量化プラグインを減らして不要な JS や CSS を抑え軽くすることができる 余計な機能を減らすことでユーザーが迷わない 利用するのはお客さん。 ブログなのか、企業サイトなのかなどã

1§ä½•ã‚’強化するなどがまったく違ってきますのでニーズに合わせてカスタマイズするのがディベロッパーの使命かと思います^ ^。 まとめ こんな感じで、画像がカスタム投稿でもリッチに登録できるようになりました！！ 工夫したらカテゴリなどのサムネ登録などでも応用できます。 みなさんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。 更新履歴 2021 å¹´ 1 月 13 日追記 サイトをリロードやプレビューへ切り替えた際にデータが消えるバグを発見し修正しました。 2022 å¹´ 12 月 17 日追記 セキュリティー対策のコードを追記しました。 メディアを保存するための JS の記載のある add_script で不具合が見つかったため書き換えました。","noindex":false},{"slug":"entry396","title":"【CSSコピペ】かわいいボタンデザイン厳選集！UI/UX解説付き実装コード","date":"2020-11-14","modifiedDate":"2026-06-17","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry396.webp","description":"HTMLとCSSのコピペで今すぐ使える、かわいいボタンデザイン集です。ただ可愛いだけでなく、UI/UXの観点から本当に使いやすいシンプルなコードを厳選しました。サイトが華やぎ、ユーザーが迷わずクリックしたくなる実装コードと解説をお届けします。","tags":["CSS"],"body":"ボタンひとつで、ウェブサイトの操作性と世界観はガラリと変わります。 今回は、コピペでスマートに実装できるかわいいボタンデザインのCSSコード集をつくりました。 実務でしっかりと機能するように、最新のプロパティに対応したシンプルなHTMLとCSSの構成にしています。なぜそのデザインが最適なのか、UI/UXの解説も添えました。 この記事でわかること コピペですぐに使えるかわいいボタンのCSSコード ユーザーのクリックを自然に誘うホバーアニメーションの書き方 サイトの価値を高めるためのUI/UX視点でのボタン選び デザインの妥協をなくし、あなたのサイトに新しい命を吹き込むボタンをスムーズに配置していきましょう。 ボタンを実装する上でUX/UI上重要な3つのポイント ボタンのデザインでボタンのデザインでユーザーのことを考えて大切にしてことがあります。 1、サイズは適切か スマホの時サイズが小さすぎるとタップできません。 縦横のサイズが44px以上（Googleの推奨サイズ） というのが鉄板です。 2、クリックできそうか デザインとしてクリックできそうか、がポイントです。 形としてボタンっぽかったらなおわかりやすいかと思います。 よくあるボタンデザインがこんな感じです。 たとえばこんなオレンジのボタンがあるとします。 ※ コンバージョン率が高いと言われているのであえてオレンジを使っています。 アイコン、文字をのせたらもうボタンって何と無くわかりますよね？ ユーザーに「なんかクリックできそう」って思わせるのがポイントです。 3、他のパーツと差別化できているか ウェブサイトではとくにCVボタンなどであれば、クリックされる事が重要なポイント。 他のパーツ（コンテンツ）との差別化をしっかりしておく必要があります。 コピペで使えるベーシックなボタンのCSSコード3つ まずはベーシックなボタンのコードをご紹介します。 この3つレパートリーを持っていればとりあえずどうにかなります。多分。 よくある続きを読むボタンですね。 今回右に配置したアイコンは「Material Design Iconic Font」※ を使っています。 Material Design Iconic Font ※ 使うアイコンが少ないのであれば、マテリアルアイコンを使わずCSSだけで対応ã

1—たほうがサイトが軽量になります。詳しくはこちら。 Flexを使って、文字とアイコンを縦横均等に配置してます。 ベーシックなボタン | Code Pen pointer-events の使い方と使いどころ パーツでいえばページネーションや、COMING SOONにしてリンクが貼れないバナーなどに使うことが多めです。 CMSから吐き出すタグを自分では書き換えられないけどCSS側でクリックを禁止したい、などのケースで重宝します。 ホバーで半透明 💡 transition にはプロパティを指定する transition の対象のプロパティを指定しない場合、ブラウザに負担をかけ、パフォーマンスに大きな影響を与えてしまうことがあります。 opacity のようなプロパティの使用しましょう。 色が反転 ホバーすると、ボーダーが反転します。 他のボタンとサイズを合わせるためにbox-sizing: border-box;でborderを内側に含めています。 定番の立体感のあるボタンらしいボタン 定番のボタンらしいボタンを作るとき、私はかならずY軸に向かったbox-shadowを使います。 クリックしたとき、押した感が出るようにtranslateで位置をわずかに下げ、さらにbox-shadowも同じ分量減らします。 これで不自然な挙動をしないボタンらしいボタンの完成です。 💡 CSSセレクターこんな指定の仕方もあるよ！ コードが減るという理由で時折トリッキー？な指定方法を使います。参考までに。 クラスの前方一致 セレクタ名 [class^=btn] ある文字列から始まるクラスのみを指定できます。この場合btnほにゃららといった感じですね。 クラスの後方一致 セレクタ名 [class$=btn] 逆に後方一致だとこんな書き方ができます。 部分一致 セレクタ名 [*=btn] btnが含まれるか否か 簡単なアイコンはclip-pathで実装したほうが軽量 便利なプロパティがたくさん出てきて、最近一番重宝しているのがclip-pathです。grid でコードを書いたほうが変な調整もいらないです。 コードに関しては以下の記事で紹介しています。 【コピペOK】かわいいボタンのCSSコード・スニペット集 いくらかわいい、かっこいいと思えてもそのデザイン普通使えないと意味がありませんよね？ 実戦で使えそうなものだけピックしてご紹介します。 スケルトンボタン・ベースから応用まで 背景が黒っぽい場合にスケルトンボタンってかっこいいです。 濃いめのグラデの上に乗っけるのもオススメです。 ベースのスケルトン、クリアソープのようなスケルトン、ネオンのようなスケルトン3つのコードスニペットを作ってみました。 今回のポイントは rgb関数 ※です。 半透明の白は濃いめの背景のデザインを生かせるのでオススメです。 文字サイズが小さいと見えないので注意です。 rgb関数 指定方法: rgb(255 255 255 / .3) | | 意味 | 値 | | ---------- | ----------------- | ------- | | r(red) | 赤 | 0 - 255 | | g(green) | 緑 | 0 - 255 | | b(blue) | 青 | 0 - 255 | | /以降 | 透明度（alpha値） | 0 - 1 | RGBカラーモデルのred・green・blueに、/以降にalphaを加えることができます。 rgbは数値が高いほど純色となります。aが0だと透明で1に近づくにつれ不透明となります。 スケルトンボタン・ベースから応用まで|Code Pen ベースのスケルトン 背景を半透明にしただけで、クリックとともに白っぽさが増します。 クリアソープのようなスケルトンボタン クリアソープのように少し立体感をつけてみました。 box-shadowをinsetにして立体感をつけています。 ネオンのようなスケルトンボタン ボーダーをbox-shadowだけで作って、ライトのようにしています。 グラデーションを利用したボタン グラデーションはアニメーションが滑らかに行われなã

1„のが難点です。 なので、beforeなどで1個要素を作って移動などアニメーションをさせます。 ここでのポイントがz-indexです。 擬似要素を文字の下にもぐりこませないと、字が見えないのでz-indexを使って要素の順番を入れ替えます。 親要素 z-index: 1 擬似要素 z-index: -1 グラデーションを利用したボタン|Code Pen 今回グラデーションを作るのに使ったのはこのジェネレーターです。 CSS Gradient グラデーション反転 あらかじめグラデーションを逆にした擬似要素をopacity:0で隠しておき、ホバー時に表示させグラデーションを反転させます。 グラデーションが横にスライド 擬似要素を2倍（200%）のサイズに作り、overflow: hiddenで隠しておきます。 hoverした時にleft: -100%でアニメーションさせます。 きっちりセパレートさせた色でアニメーション 私のこのブログのデザインにも使っている左上のマークがスライドするボタンです。 ポイントはグラデの角度を315度の斜めにし左右の色をそれぞれ50%に設定します。 あとは先ほどのグラデーション横にスライドのようにアニメーションさせるだけです。 さらに洗練されたインタラクティブなボタンデザイン その他型押しのような文字のボタン、shadowを利用したクールなボタン、マウスオーバーすると波紋が広がるボタンなど作ってみました。 その他よりインタラクティブなボタン| Code Pen 文字がエンボス text-shadowとbox-shadowでエンボス風のボタンです。 パキッとした影が広がるボタン box-shadowを2個重ねるだけで、クールなボタンができます。 クリックすると波紋が広がるボタン クリックすると波紋が広がります。 ボーダーがアニメーションするボタン ボーダーが左上と右下からアニメーションするボタンです。heightとwidthを0から100%に広げることで実現しています。 グラデーション×シャドーを駆使した立地なボタン(2022/12/17追加) まるで画像で書き出したようですがCSSのみで実装できるボタンのご紹介です。 まとめ：ウェブサイトと調和するかわいいボタンを設置しよう ボタンデザインたくさんあって目移りすると思いますが、凝りすぎているとサイトと調和するのが難しい場合もあります。 サイトと調和するかよく考慮した上で、実装するのが◯ですね！ その他チェックボックス やセレクトボックスのフォームパーツ類もコードスニペットあります。 参考にしてください。 みなさんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry394","title":"拝啓デザイナー様。ピクセルパーフェクト必要？その他お願いしたいこと8つ","date":"2020-11-12","modifiedDate":"2023-03-04","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry394.webp","description":"長年、フロントコーディングをしているとどうコーディングするんだ！ヤラレターってデザインカンプが届きます。Webデザインは紙とまったく違う。自由に好きなところオブジェクトを配置できない。フロントコーディング制限とルールがたくさん。ピクセルパーフェクト必要なの？ということで今回はウェブデザイナーを目指すなら、これだけは抑えて欲しいポイント8つをまとめました。","tags":["UX/UI"],"body":"長年、フロントコーディングをしているとどうコーディングするんだ！ヤラレターってデザインカンプが届きます。 私の持論ですが「Webデザインは紙とまったく違う」です。 自由に好きなところにあれこれオブジェクトを配置できないです。コードに落とし込むためには制限とルールがたくさんあります。 よく思うことがこれ。ピクセルパーフェクトって必要なの？ ということで今回はウェブデザイナーを目指すなら、これだけは抑えて欲しいポイント8つをまとめました。 1. お願い！カラーモードはRGBで！ カラーモードがCMYK。イラレやフォトショでデザインカンプが上がってきたときよくあります。 紙とウェブでは色の出力モード違いますよ！！必ずRGBで作ってください。。。。 最近はXDの登場のおかげでこの問題はだいぶ減りました。 良い時代になった。 2. ちょっと待って。フォントサイズ、考慮してください フォントが超小さいデザインカンプを受け取ることがあります。 Google Chromeでの最小フォントサイズは10pxです。そのほかのブラウザでは1p

1xまで小さくできるみたいですが、Chromeの世界でのシェア率は64.67%です。 世の中の半数以上が使っているChromeに合わせるのが○ですよね。 Browser Market Share Worldwide CSSでtransform: scaleなどでムリやり縮小すれば10px以下の文字サイズにすることはできます。 が、よく考えてください。 なぜ小さなサイズが設定できないか考えたことありますか？ ユーザーは情報を得るためウェブサイトに訪問します。 せっかくの情報が読みづらいと思いませんか。 Googleの推奨するフォントサイズは16pxです。 ユーザーへの思いやりよりデザイン性を優先してませんか？ ユーザーはデザインの良し悪しを評価するためにサイトへ訪れているわけではなく情報を閲覧しにきているのです。 文字サイズへの配慮、忘れないでください。 3. レスポンシブするものにムダなピクセルパーフェクト求めないで 最近ピクセルパーフェクトで少しTwitterが持ちきりになりましたが、私はピクセルパーフェクトどっちでも良い派です。 デザインがきっちりしっかり設計されていたら喜んでやります。逆のケースだとぶっちゃけ地獄です。 ピクセルパーフェクトは必要なのか？ HTMLコーダーの考え方まとめ 再利用できないパーツだらけの無秩序なデザインカンプをピクセルパーフェクトにするのはめっちゃ工数かかります。 そして、ウェブサイトはレスポンシブで幅が変わります。 デザイナーがピクセルパーフェクトを求めるあまり、コンテンツが収まりきらない場合もあります。WordPressなどの動的サイトだとレイアウトが崩れることも。。 ウェブのお作法に沿ってないデザインカンプでもその通りに作ることを強いるデザイナーさんがたまにいます。 どうしても再現できなくてたくさんのパーツが画像になったこともorz せっかくのテキストが画像じゃSEO的にも意味ないし、せっかくコーダーとしてはとても悲しかったです。 4. コントラストのつかない色をたくさん使わない 表などのグレーの枠線で使用している色の種類がやたら多い事があります。 デザインカンプ通りにするか、相談してどちらかに揃えるようにお願いするか頭を悩ませることがあります。 みんながレティーナ（高機能な）ディスプレイで見ているわけじゃないので、そんな大きな違いが出ないこともあります。 安いラップトップPCのモニターで見たら全部同じ色ですよw 無駄にコードが増えます。 そして、たまに背景に溶け込んでしまいそうなくらい、薄いグレーの文字を見かけます。 最低コントラスト比は4.5:1です。 >この達成基準の意図は、(コントラストを強化する支援技術を使用していない) 中度のロービジョンの人がテキストを読めるように、テキストとその背景との間に十分なコントラストを提供することである。 >WCAG 2.0 解説書コントラスト (最低限):達成基準 1.4.3 を理解する >WCAG20 コントラスト比について コントラストのつかないのであれば色数は抑えたほうがいいです。 オンラインのコントラストチェッカーがあるので調べてみるのもアリですね。 コントラストチェッカー WebAIM: Color Contrast Checker 5. リンク・ボタンはモバイルでタップするサイズを考慮する Google曰く、ボタンの推奨サイズは縦横共に44px以上です。これはおおよそ成人男性の指でもタップできるサイズです。 やたらめったら小さいと、誤操作にもつながります。 モバイルデザインでは指で操作することを一番に配慮しましょう。 デザインカンプを受けとってコーディングするぞーってなった時に、ボタンサイズが小さいと気分が萎えます。 6. PCとスマホはセット。最低この2つを用意してはじめてデザインカンプです ウェブサイト用のデザインカンプでPCだけでモバイルが用意されていないことがあります。 「PCを参考に作ってよー」ってデザイン支給する人たまにいます。 スマホとPCって訪問するユーザーの属性結構違うし思っておいて欲しいです。 ユーザビリティ考えるとPCと同じデザイン使い回せないこともあります。 タブレットまでã

1¨ã¯è¨€ã„ませんが、せめてスマホのデザインも作ってください。 最近はウェブサイトの種類によりますがスマホから流入するケースが多いんですよ。 本来であればスマホのデザイン優先して作った方がいいです。 個人的にはデザイナーなのに一番見られる箇所になぜ注力しないのかが不思議。 7. モバイルのハンバーガーボタン配置したならドロワーメニューもデザインして モバイルのデザインカンプにハンバーガーボタンはあるのにドロワーメニューがなくて「テキトーに作ってー」って言われることがあります。 その時の私の心理状態はこちら。 「テキトーってなにw」 メニューって実際にあまり開かれることはありませんが、大切な機能であることには間違いないです。 必ずデザインを用意しましょう。 8. HTML、CSSの性質を知った上でデザインを ウェブサイトはHTMLやCSSで作るのでそれなりのお作法があります。 HTML5になりタグの数も108個に増えコーディング方法もセマンティック（意味のある）になりました。 構造がしっかりすればウェブサイトとしても解析されやすくなりますし、ユーザーも理解しやすくなります。 HTMLとデザインで作ったパーツが紐づかないとウェブサイトとして破綻すると思うんです。 そうなると、ウェブデザイナーはやはりHTMLをある程度理解できていることが前提条件となります。そして、CSSにも制約があります。 ウェブデザインは感覚だけではできません。 紙デザインがシールを好きなようにペタペタ貼って仕上げていくのに比べ、ウェブデザインは積み木に近いと思っています。 しかもウェブデザインは大枠の構造がほぼ一緒です。 HTML構造とCSSの特性を知った上でデザインされたカンプが届くと飛んで喜びます。 反省・マサカリを投げずに制作に入る前にガイドラインを決めておく ちなみにここからは私のこの一年の反省です。 「再現できねーよ！」って言って差し戻す（差し戻せないこともあり。。。）より、先にガイドラインを決めておく。 そうすれば手戻りが減ってみんなハッピーでしたね。 たとえば、以下のような項目です。 基本のフォントサイズ 使用する基本の色 コンテナーのサイズ モバイル・PCのデザインカンプのサイズ 「言わなくてもそのくらいわかるでしょう」って思いがちですが、、、阿吽（あうん）の呼吸なんて存在しません。 今後、私もマサカリを投げる前に取り決めておこうと思います。 今までたくさん投げてごめんちゃい。 まとめ・機能性 を優先してデザインされたウェブサイトがエラい子！ コーダーもデザイナーもディレクターもお金をいただくクライアントではなく根本はサービスを使うユーザーに向くべきなんですよね。 ユーザーが心地よくそのサービスを使えてはじめて良い製作物と言えるのではないでしょうか。 デザインは建物などの設計と同じ！機能的に設計してユーザーに心地よいを届けたいですね！ 合理的な思考のデザイナーさんの作ったデザインカンプはコーディングしてて気持ちいいです。 散々デザインに関して要望を書きましたが、私もデザイナーさんに怒られないようフロントエンドエンジニアとして精進します。 長くなりましたがこの記事がウェブ制作のヒントになれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry393","title":"セレクトボックスのデザインをCSSで整える方法！プルダウンの矢印変更やselect optionの注意点など解説","date":"2020-11-10","modifiedDate":"2026-07-07","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbn

1ail/2020/entry393.webp","description":"セレクトボックスのデザインをCSSでスマートに整える方法を解説！主要ブラウザの見た目を統一する基本ステップから、コピペで使えるプルダウンの矢印変更コードなど実務に直結するスニペットをまとめました。selectのoptionタグに関する注意点も含め、フォームの実装をサクッと終わらせましょう！","tags":["CSS"],"body":"セレクトボックスのデザインをCSSでスマートに整える方法をマスターしましょう！主要ブラウザの見た目をサクッと統一する基本ステップから、コピペで使えるプルダウンの矢印変更コードなど実務に直結するスニペットを網羅しました。 今回はよく使うスタイリング方法をケース別にまとめているので、selectのoptionタグに関する注意点も含め、フォームの実装を圧倒的なスピードで完成させて次のタスクへ進みましょう！ この記事でわかること 主要ブラウザでセレクトボックスの見た目を綺麗に統一する手順 コピペで今すぐ使えるおしゃれなデザインスニペット optionタグの挙動と、いざというときのスマートな代替案 セレクトボックスのデザインをCSSで整える基本手順 セレクトボックスとはHTMLのフォームパーツの一種で、ユーザーにたくさんの項目の中から選択させたい時に使います。 私がよく使うのは住所での県などの選択が多めです。 少量であれば、ラジオボタンやチェックボックスで十分だと思います。 ラジオボタンとチェックボックスのカスタマイズについてはこちらをご参照ください。 セレクトボックスの基本のHTMLの書き方 コードとしては以下の通りで選択させたいアイテムはoptionタグに入れ、それをselectタグでラッピングします。 クリックしたら、こんな感じで項目が表示されます。 主要ブラウザでセレクトボックスの見た目を統一する方法 HTMLのフォームパーツ（お問い合わせフォームなどで使うタグ）は標準で複雑なスタイリングを各ブラウザが用意しています。フォームパーツはサイト上で動的に操作できる要素です。 クリックしたり、キーダウンした際に何かしら操作ができてしまう特別な要素。 なのでブラウザ側は特別な見た目を用意しています。 コーダーはカスタマイズ時にあらかじめ用意されたたくさんの標準CSSを打ち消しつつスタイリングしなければなりません。 だからチョー面倒なのです涙。 【コピペOK】CSSでつくるセレクトボックスのデザインサンプル まずはデフォルトの要素のスタイルを打ち消します。CSSでappearanceプロパティの値をnoneにします。 appearanceプロパティはチェックボックスやボタンなどの各フォームパーツの持っているスタイルを真似たり、もしくは打ち消す時に使います。appearanceについては以下ブログも参考に^ ^。 そのほか初期化が最低でも必要なプロパティはこちら5つ。 1. background（背景） 2. border（ボーダー） 3. border-radus（角丸） 4. font-size（文字サイズ） 5. color（文字色） デザインに応じて上書きしておきましょう！ IE対応ではappearanceに-ms-expandという矢印（ドロップダウンメニューを開閉）ボタンが擬似要素にデフォルトでセットされているのでdesplay:noneをセットする必要がありましたが、最近の子はIE知らんよね笑。 参考：::-ms-expand|MDN また、プルダウン表示されるoptionタグはブラウザや端末（iPhoneとか）に相当依存するのでカスタマイズはむずかしいということをあらかじめ知っておいた方が良いです。 ラッパーを挟んで作る方法 セレクトボックスといえばå

1³ç«¯ã«çŸ¢å°ãƒžãƒ¼ã‚¯ãŒã‚るイメージですよね？ 標準CSSでせっかくあった矢印マークはリセットすると打ち消されてしまいます。 スタイリングの際は必ずユーザビリティ・アクセシビリティを考えましょう。 一目見てユーザーがこのタグはなにができるかわかるよう矢印マークを再度追加します。 まずはラッパーを使う方法をご紹介します。 矢印マークの素材が用意できないときに私がよく使う手です。 selectの上にdiv（ラッパー）などでラッピングし、擬似要素を利用してマークを作ります。 正方形の要素を作り上部・右にボーダーをにつけて45度傾けたら完成です。 位置をposition: absoluteで右端に固定します。 縦位置ど真ん中にしたいのでtop: 50%に配置してtranslate: 0 -50%で要素の高さ半分上に上げています。 もうひとつポイントはz-indexです。 z-indexは要素の重なり順を操作できるプロパティです。 実はabsoluteで位置調整した擬似要素は重なり順が1個上になり、セレクトボックスの上に重なってしまいます。 このままではマークの上をクリックしてもセレクトボックスが反応しないのでセレクトボックスの下にマークを潜り込ませます。 ラッパーにはz-index: 1を、afterにはz-index: -1を付与します。 ラッパーを挟んで作る方法デモ|Code Pen プルダウンの矢印（▼）をCSS背景画像で変更するパターン ラッパーを使うのは面倒！という人は背景画像を利用して作る方法があります。 ぶっちゃけこちらの方がコードはすっきりします。 ポイントは背景の位置です。 右から10pxの位置に固定したい場合は、right 10pxという書き方で指定可能です。 同様に下からの時もbottom 10pxみたいな指定が可能です。 ついでにbackgroundプロパティのショートハンドの書き方のご紹介です。 色 背景画像に指定したい画像のパス リピート 位置 / サイズとなってます。 うまく効かないときは/（スラッシュ）が抜けていることが多いです。 セレクトボックスのコードはこちら 背景画像で矢印マークを仕込むパターンデモ|Code Pen 2025年追記。矢印マークなどの単純なアイコンは clip-path で仕込む方法もあります。ファイルを読み込むとリクエスト数が増えるので最近私はこの方法を取ることが多いです。 セレクトボックスのケース別スニペット集 セレクトボックスをコーディングしているときによく「これどうやるんだったっけ？」って思い出せないことがあります。 ケース別でスニペットを作成しましたのでよろしければ参考にしてください。 ケース1・セレクトボックス上「選択してください」を表示したいけど、その項目を選択肢から外したい セレクトボックスにはプレースホルダーがないので、「選択してください」などの文字をoptionタグを使って表示することが多いです。 とはいえ、実際の項目として「選択してください」を選択されても困りますよね？ そんなときは、selected + disabled属性を付与してCSSで隠して解決します！ selected 選択された状態 disabled 操作不能 セレクトボックス上「選択してください」を表示したいけど、その項目を選択肢から外したいデモ|Code Pen ケース2・selectのoptionタグをグルーピング（optgroup）したいとき セレクトボックスの中の項目が多くてグルーピングしたいことがありますよね？ optgroupを使ってまとめることができます。 たくさん項目がある際は、ユーザーの可読性も上がるので親切です。 optionタグをグルーピングデモ|Code Pen 参考:HTML 要素リファレンス optgroup MDN ケース3・複数の項目を選択したい 複数選択させるためにはselectにmultiple属性を付与すればOKです。 ただしCSSに非常にクセがあって、とてもカスタマイズが難しかったです。。。 選択した項目にチェックが入るところだけ、CSSで付与しました。 とりあえずチェックが入った時の背景色と文字色の変更が難しい。 力技で、box-shadowを内側に効かせればできましたが、その代わりマークが消えます。。。Safariでは思い通りの見た目にはなりません。 また時間があるときにもうちょい調べて追記します。 複数の項目を選択デモ|Code Pen 参考 デュアルリストボックスでクリックされたオプションの背景色を変更する 

1selectのoptionタグはCSSでデザインできる？ 結論からいうと、select タグのなかにある option タグ（クリックしたときに出てくる選択肢のリスト）は、CSSだけで思い通りにデザインすることはできません。 なぜなら、このプルダウンメニューの見た目はブラウザやOS（とくにスマートフォンのiOSやAndroidなど）のシステム標準に強く依存しているからです。CSSで背景色（background-color）や文字色（color）を少し変更するくらいはできますが、余白（padding）を広げたり、おしゃれなフォントに変えたり、アニメーションをつけたりするカスタマイズは不可能です。 optionタグにCSSを効かせたいときの現実的なアプローチ 背景色や文字色の微調整にとどめる: スマートフォンなどでは反映されないこともあると受け入れたうえで、最低限の設定にする。 JavaScriptやライブラリで自作する: 見た目を完全にコントロールしたい場合は、HTMLの ul や li タグを使ってセレクトボックス風のUIをつくり、JavaScriptで制御する。 チェックボックスやラジオボタンで代用する: 前のセクションで解説したように、はじめから別のフォームパーツでデザインするほうが実装スピードも早く、確実です。 デザインできない仕様に頭を悩ませて時間を使うよりも、表現できる別の方法でサクッと実装して、次のタスクに進むほうがきわめて建設的で楽しいですよ！ チェックボックス（\\\\） で代用する そもそも使わず UIを似せてcheckbox で作成するのもありです。その方がデザインの幅が広がります。 最近は疑似要素 :has() が使えるのでいかようにもアイデア次第でカスタマイズできます。 multiple(checkbox)のデモ|Code Pen まとめ いかがでしたでしょうか？ 個人的にはセレクトボックスがフォームパーツの中で一番クセが強くカスタマイズの難しい要素だと思っています。 CSSだけでのカスタマイズは大変ですが避けて通れないのでスタイリング頑張りましょう。 ボタンのCSSスニペット集も追加しました！ さらにグローバルメニューのホバーアニメスニペット集追加しました！ぜひ活用して表情豊かなウェブサイトを作ってください！ SEO似効果的なパンくずリストの設置方法についても詳しく解説しています。 そしてコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry392","title":"SEOをマッチングアプリの出会いに例えてみた","date":"2020-11-08","modifiedDate":null,"category":"seo","categoryName":"SEO対策・デジタルマーケ","ogImage":"/thumbnail/2020/entry392.webp","description":"突然ですがみã

1ªã•ã‚“はマッチングアプリやったことありますか？海外ではオンラインデーティングといってとてもポピュラーな出会いのきっかけですよね。マッチングアプリの出会いは本当にSEOにそっくり。1記事がオーガニックサーチ（自然検索）からあるキーワードで浮上し流入され、離脱されずに1PVを稼ぐまでをマッチングに例えて解説してみました。結構ガチで女性からどうみられてるのかも合わせて書いてますので参考にしてください。","tags":["Google検索エンジン","例えてみる"],"body":"突然ですがみなさんはマッチングアプリやったことありますか？海外ではオンラインデーティングといってとてもポピュラーな出会いのきっかけですよね。 マッチングアプリの出会いは本当にSEOにそっくり。 1記事がオーガニックサーチ（自然検索）からあるキーワードで浮上し流入され、離脱されずに1PVを稼ぐまでをマッチングに例えて解説してみました。 結構ガチで女性からどうみられてるのかも合わせて書いてますので参考にしてください。 「あなたというコンテンツ」をコンバージョン（マッチング）させるまでの過程がSEOにそっくり コンバージョンとはSEOにおいてそのウェブサイトのゴールです。何をゴールとするのかはそのサイトの使用目的によります。 今回のSEOにおいてのゴールはオーガニックサーチ（自然検索）からブログ記事の1PV（ページビュー）を獲得するまで。 マッチングアプリの出会いとSEOのコンバージョンでは共通する大事な過程が4つあります。 露出、ファーストインプレッション、流入されたら冒頭で心を掴む、興味を持ってもらうです。 各ポイントを順番にクリアさえすればコンバージョンに至れます。  ãƒžãƒƒãƒãƒ³ã‚°ã‚¢ãƒ—リSEOステップ1露出アプリ内でアカウント・プロフィールなどが露出されているか特定キーワードで10位以内に検索結果が浮上しユーザーの目に触れやすくなっているかステップ2ファースト・インプレッションプロフ写真で好印象を与えることができるか目を引くディスクリプションやタイトルで検索一覧の中からクリックしてもらえるかステップ3流入（サイトへ着地）した後プロフィールで付き合いたいか興味を持たせることができるか記事の冒頭で記事が本当に読みたい内容と思わせる工夫ができているかステップ4コンバージョン（ゴール）興味を持ってもらいマッチング成立最後まで読んでもらう・ファンになってもらう 余談ですがこのアイキャッチに使ってる写真は今年ロックダウン中に暇つぶしで登録した「フィリピン出会い系サイトの鉄板Tinder」で使っていたプロフ写真です。 Tinder 2年前の写真ですが。。。。まあ詐欺っちゃ詐欺ですね。 Tinderは私が現在住んでいるフィリピンでメジャーなマッチングアプリです。 ちゃんと当時の実年齢42才、敬愛する実のおかんの名前を借りて登録。 退屈で速攻やめてしまいました。 未来の彼女もウェブサイトも目に触れなければ気づいてもらえない。とにかく露出させる工夫が必要 SEOでは最初はとにかくウェブサイトに流入してもらう！が大事です。 たどり着いてもらわないことには記事を読んでもらえませんからね。 マッチングアプリでいうところ、ターゲットに自分のプロフィールが表示されることを増やすことです。 アプリ内で自分のアカウント・プロフィールなどが露出されるように工夫する まずはアプリの登録したら、プロフィール設定しますよね。 自分は「こんな人間だ」というのが伝わり、「マッチしてほしい女性のニーズ」にあってるかどうかが大切です。 趣味や職業など事細かに書いて、人となりがわかるような写真もしっかり登録しておくと露出が増えるはずです。 登録したばかりの時はとくに男性に課金させることをマッチングアプリ側が狙っているのであなたの露出も意図的に増えると思います。 SEO・露出させるために特定キーワードで10位以内に浮上させること とにもかくもSEOでまず大事なのが露出させること。 こちらはサーチコンソールの検索パフォーマンスのデータです。 ページごとにフィルターをかけられます。 まずは順位に着目してください。 オーガニックサーチ（自然流入）で、狙ったキーワードで最低でも上位10位程度まで持ってくることが大事です。 人間って面倒くさがる生き物。10位以下だと次のページになってしまうので探される可能性がグンと減ります。 でã

1¯æ¤œç´¢ã®é †ä½ã‚’上げるためにはどうすればいいのでしょうか？ 検索を上位にあげるためには、とにかくキーワードにそった記事を書くこと。 たとえばSEOの記事を書こうとして、野球の話になってしまったなどだと本末転倒です。 一貫してキーワードからブレない記事を書くことを心がけています。 私はちなみに3000文字以上くらいを目安にしています。 ファースト・インプレッションを高める。露出されるようになったらクリックしてもらうための仕掛けを 検索順位が上位表示されるようになったら、次はクリックしてもらわなければなりません。 どんなファースト・インプレッション（最初の印象）を与えるかが重要です。 ファースト・インプレッションの決め手はプロフ写真。好印象を与える 詳しく知ってもらうために大事なのは「見た目」です。要は写真です。 イケメンじゃないからといって諦める必要はありません。 笑顔がステキだったりするだけでも全然違います。 意外と自分がイケてると思っている写真でも人から見てそうでもないこともあります。 もし出会いが伸び悩んでる場合は写真を変えてみましょう。 オススメしないプロフ写真 やたら脱いで筋肉自慢 過剰に加工した写真 清潔感のない風貌 ナルシストがあふれた写真 良かれと思って掲載した写真は大抵NGです。。自然体が一番ですよ。。。。 SEO・目を引くディスクリプションやタイトルで検索一覧の中からクリックしてもらう みなさんもこんな感じでググってますよね？ 検索一覧ではタイトルとメタディスクリプションでユーザーはそのページを閲覧するかを判断します。 最近スマホでは設定によりますがアイキャッチも出力されますよね。 出力させるためには、name属性thumbn

1ailを持ったmetaタグをhead内に設置しておく必要があります。 Googleは気まぐれです。出力されないこともあります。出力されたらラッキーくらいに思っておいてください。 このタイトルとディスクリプションが検索キーワードを検索したユーザーに刺さらなければ読んでもらえません。 絶対にやって欲しいのはタイトルに検索キーワードを含めること。 ディスクリプションにも含めます。 もちろん、そのページを閲覧かどうか決めるのは人。そのキーワードで検索した人が「何を探し求めてきているか」よく考えて全力で書きます。 クリック率が低い場合は、タイトルとディスクリプションに問題があるのかもしれません。 同様のキーワードで検索されている記事と比べてみるといいかもしれません。 流入後、冒頭で興味を持たなければ人は離脱する やっと流入してもらうことができましたが、まだこれで終わりではありません！ 最後まで記事を読んでもらわないといけません。 そのプロフィールの冒頭であなたに興味を持たせることができるか？ プロフを見ている女性はきっと「この人が自分にとってマッチする人か」と考えているでしょう。 なので冒頭の文章が結構大事です。 また、「プロフ読んでくれてありがとう」とか、さりげない感謝などがあると好印象を与えるかもですね。 オススメしないプロフィール内容 自慢が多め キャラを無理やり作っている 内容が誇張・もしくはウソ すべて本当のことを言う必要ないですが、身長が160cmしかないのに170cm的なウソはやめたほうがいいですね。。。。 SEO・記事の冒頭（ファーストビュー）でその記事が本当にユーザーにとって読みたい内容だと感じてもらえるか 流入した後もやっぱり「見た目」が大事。読みたい記事かを印象づけるのはアイキャッチです。 私も記事のイメージを印象付けるアイキャッチをできるだけ作るように頑張ってます。 その次に記事を読むか否かを判断するのは冒頭の文章です。 私は冒頭の文章で「読者に寄り添っているか」に一番気を遣っています。 この記事を読みに来てくれている人はどんな思いでこの記事にたどり着いたのだろうか？ この記事でどんなことを解決してくれるだろうか？ あくまで、文章を読むのは人。ロボットではありません。 そのキーワードを検索している理由は困っていて解決策を求めているから。なので一緒に解決していこうと寄り添うことが読者の信頼につながるのでないかとも思っています。 コンバージョンに至るまでは分析し解決策を予測しPDCAを回すしかない コンバージョンに至るまでのいくつか通過しなければならないポイントがありますが、それぞれでうまくいかないときはちょっとずつやり直しを繰り返しましょう。 たとえば検索順位が上がらない場合は検索エンジンにキーワードがマッチしていない可能性があるのでコンテンツ全体を見直す必要があります。 マッチングを成立するためには？ まずは露出を増やすしかありません。 みんな器用に文章を書けたりいい写真を掲載できるわけではありません。 そして、露出とチャンスを増やすためにはやはりお金の力が最強ですね。 露出数・母数が増えればチャンスは間違いなく増えます。 相手に妥協できない人、チャンスがなかなか来ない人はお金で解決することをオススメします。 数をこなしてトライアンドエラーで、プロフィールを充実させてください。 誰にでもチャンスはあります。応援しています！！！！！！ 最後まで読んでもらう。ファンになってもらうために せっかく流入してもらってもなかなか滞在してもらうことは難しいです。 記事を最後まで読んでもらうためにGoogleアナリティクスで離脱率、直帰率、滞在時間をチェックして定期的にリライトしています。 とくに私がリライトの際に意è­

1˜ã—ているのは以下の項目です。 結論から述べているか？ 自分がどんな人間か伝えられているか（持っているスキル・信用がおける人間かとか） 文章を塊ごとに見出しをつけてセクショニングできていて、読みやすいか 同じキーワード流入のある他の人の書いた記事を分析し、比較して自分の記事の強みを見出しリライト ちなみに沈黙のWebライティング —Webマーケッター ボーンの激闘—はウェブライティングにオススメの1本です。ウェブライティングのノウハウがぎっしり詰まっています。 まとめ オーガニックサーチ（自然流入）から1PVを稼ぐまでの流れをマッチングアプリの出会いに例えてみました。 SEOもマッチングアプリでもコンバージョンにいたるために大切なのは、 この先ファンや好きになってくれる人に対しての思いやりだったり、相手の求めてるものに対しての解決方法の提示だったりなのかなーって思います。 先々月まで私のサイトは最近までおおよそ平均1700PVでした。 このサイトはそもそも私の備忘録として始めました。 昔は記事更新しなくてもPVたくさんあって高飛車になってたのもあります。 ここ最近はPVはダダ下がりでひどかったです。 なんでこんなにPVが落ちたかと言うと。。。 仕事が忙しすぎてブログが更新できてなかったのと、古い情報で価値がなくなり改善の必要な記事も放置していたのもあります。 私の記事は基本テックブログなので、情報が古くなりニーズに沿わなくなればいともカンタンにPVは落ちます。 ひどかったã

1®ã§ã“の8月くらいまで結構頑張ってました。 仕事辞めるまでまとまった時間が取れず、最近やっと記事をボツボツ更新したりリライトしたりするようになりました。 10月は記事をたった4記事追加しただけですが約1000PVアップしました。 昔に比べたらまだまだですが嬉しかったです。 PVは低くなっちゃったかもしれませんが、誰かが読んでいてくれているということは忘れてはいけませんねですね。 たとえ1PVでも寄り添える記事を書く原動力になります。 さておき、出会いを求めてる方は良いクリスマスになることを祈っていますYOY！！ 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry390","title":"便利なのに使ってないの？！CSSプロパティ5選","date":"2020-11-03","modifiedDate":"2022-07-05","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry390.webp","description":"appearanceなど、便利なCSSのプロパティ使いこなせていますか？。columns、pointer-events、writing-modeなど普段使わないのでないでしょうか？知っていれば、コーディングの幅がグンと広がりますよ！！ということで、この記事では私がよく使うCSSのプロパティやバリューの使い方などをさらに掘り下げまとめてみました。","tags":["CSS"],"body":"CSSには便利なのにあまり使われていないプロパティがたくさんあります。 appearance などフォーム実装に不可欠なプロパティはもちろん、columns、pointer-events、writing-mode など普段使わないようで便利なプロパティもたくさんあります。 知っていれば、コーディングの幅がグンと広がりますよ！！ ということで、この記事では私がよく使うCSSのプロパティやバリューの使い方などをさらに掘り下げまとめてみました。 1 appearance フォームパーツのCSSをリセットで重宝 appearanceプロパティはチェックボックスやボタンなどの各フォームパーツの持っているスタイルを真似たり、もしくは打ち消す時に使います。 appearance の使い方と使いどころ ボタンのCSSしっかりスタイリングしたつもりでも、iPhoneで見たら角丸グラデになっていて他のブラウザとデザインが違ったってことはありませんか？ フォームパーツはブラウザごとに結構独自のスタイルを持っています。 上記の画像を見てもらってわかる通り、Safari と FireFox のボタン要素には軽いグラデがかかっています。 とりわけ、ボタンなどのフォームパーツは本当に厄介でCSSのリセットを相当こまめにやらなければいけません。 そんな時重宝するのがappearanceプロパティです。 どちらかというと他のフォームパーツのスタイルを真似ることはないと思います。 appearance の値 | 値 | 説明 | | ------ | ------------------------------------------------------ | | none | フォーム特有のスタイルを打ち消します | | auto | ユーザーエージェントが要素ごとにスタイルを適用します。 | フォームパーツはappearanceだけではデフォルトのスタイルは打ち消しきれないので borderやbackgroundも合わせてよく確認してスタイリングしましょう。 なぜフォームパーツがデフォルトで複雑なスタイリングになっているか考えたことはありますか？ フォームパーツはブラウザ上で操作するための重要な要素です。 ユーザーが操作しやすいよう、目立たせたり操作に応じたリアクションが起こるように設計されています。 デフォルトのデザインが気に入らないからという理由で、表面上のスタイリングをするのはユーザーフレンドリーではないですよね。 カスタマイズするときは、アクセシビリティを考慮してコーディングしていきましょう。 appearance のデモとリファレンス appearance - CSS: カã

1‚¹ã‚±ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆ| MDN web appearance のデモ 2 pointer-events 要素のクリックを禁止したい時に重宝 プロパティ・pointer-eventsは要素のクリックイベントを禁止したい時に使います。 個人的には使用頻度高めです。 pointer-events の使い方と使いどころ パーツでいえばページネーションや、COMING SOONにしてリンクが貼れないバナーなどに使うことが多めです。 CMSから吐き出すタグを自分では書き換えられないけどCSS側でクリックを禁止したい、などのケースで重宝します。 pointer-events の値 | 値 | 説明 | | ------ | ------------------------------------------------------ | | auto | プロパティが指定されていないときと同様にふるまいます。 | | none | クリックイベント発火禁止 | マジ? SVG に使えるの???! HTML で実験的にSVGでも使えるそうです。 JSと合わせて使ったら面白いギミックが作れそうですね！！ | 値 | 説明 | | -------- | ---------------- | | stroke | 線のところのみ | | fill | 塗りのところのみ | pointer-events のデモとリファレンス SVG用の値はさらに用意されています！ こちらをお読みください。 pointer-events - CSS: カスケーディングスタイルシート| MDN web docs pointer-events SVGのデモ 3 resize textarea などでおなじみのサイズ調整をどの要素でも可能に textarea がムダにビヨーンとん伸びてうざいことがありませんか？ それを解消するのがプロパティ・resizeです。 resize の使い方と使いどころ リサイズによってデザインを崩したくない時などオススメです。 よく横に伸びてデザインが崩れるのはやだなーと思うことが多いので、縦方向にのみサイズ調整できるverticalなんは重宝するんじゃないでしょうか？ 一応他の要素でも使用可能です。使い所は今のところ思い当たりませんが。。。 resize の値 | 値 | 説明 | | ------------ | -------------------------------------------------- | | none | リサイズ不可。サイズ調整用の右下のつまみがなくなる | | both | 縦横双方リサイズ可能です。textareaのデフォルト値 | | vertical | 縦方向のみリサイズ可能 | | horizontal | 横方向のみリサイズ可能 | resize のデモとリファレンス resize - CSS: カスケーディングスタイルシート| MDN web docs resize のデモ 4 columns 段落・段組みを超カンタンに作れるプロパティ プロパティcolumnsは段組みされた要素の段の幅や段数を設定できるプロパティです。 columns の使い方と使いどころ 均等割の段組を作りたいことありますよね！ 段落の数、隙間、また区切るためのボーダーなんかの値も用意されています。 flexやgridを使わずに実現可能です。 以下のような段組がたった3行で書けます。 columnsには幅と数は設定できてどちらが前でも後ろでもOK。 column-gapは列の間の隙間、column-rule は間に挟むボーダーなどの装飾をセットできます。 columns の値 幅と数のみです。サンプルの場合は3カラム、サイズはオートです。 columns - CSS: カスケーディングスタイルシート| MDN web column-gap - CSS: カスケーディングスタイルシート| MDN web column-rule - CSS: カスケーディングスタイルシート| MDN web columns のデモ 5、writing-mode 最近流行り？の縦書きの実装 プロパティ・writing-modeはテキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかを設定することができます。 writing-mode の使い方と使いどころ 昨今かなり紙のデザインのように、かなり自由なレイアウトが流行ってるのでflexやgridなどと組み合わせて、かっこいいデザインが作れそうです。 writing-mode の値 | 値 | 説明 | | --------------- | ------------------------------------------------------------------------ | | horizontal-tb | デフォルト。左から右へ流れる | | vertical-rl | 上から下へ垂直に流れ、次の垂直の行は、前の行の左に配置される | | vertical-lr | コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の右に配置される | text-align: center文字が縦方向にセンタリング、text-align: rightで文字が下揃えになるので戸惑うかもしれません。 文字を中央揃えにしたい場合は、flexなã

1©ã§èª¿æ•´ã™ã‚‹ã®ãŒè‰¯ã•ãã†ã§ã™ã€‚ クセがあって、FireFox、Edgeで崩れると思います。 高さ（height）を決めてあげるとうまくいくと思います。 column-rule - CSS: カスケーディングスタイルシート| MDN web writing-modeのデモ まとめ・定期的に使わないプロパティを開拓してコーディングスキルをアップデートしよう！ たまに情報をキャッチアップしてアップデートしないといつの間にか古い書き方しか知らなくなっちゃいますよね。 たまに使い方を調べておくだけでも、いざ実装に困ったら引き出しが一個増えていて助かることもあります。 以下CSSもわりとマニアックですので参考にしてください。 みなさんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry389","title":"セブ島・カーボンマーケットで買物しよう【海外在住者体験談】","date":"2020-11-01","modifiedDate":"2022-06-20","category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2020/entry389.webp","description":"海外移住に興味ある方。フィリピン・セブ島に1年半住んでると物価の安さと現地の人ののんびりした人柄にすっかり魅了されてしまいました。先日地元の人しかあまり行かないカーボンマーケットをはじめとするコロン（街の名前）エリアで買い物を楽しんだのでレポートします。","tags":["セブ観光","セブ島エンジニア生活","海外移住"],"body":"みなさん、海外に住むことは興味ありますか？ フィリピン・セブ島に1年半住んでると物価の安さと現地の人ののんびりした人柄にすっかり魅了されてしまいました。先日地元の人しかあまり行かないカーボンマーケットをはじめとするコロン（街の名前）エリアで買い物を楽しんだのでレポートします。 コロンってどんなところ？どんなお店があるの？ コロン（MAP）は港があるのもあり、物資の運搬の拠点でかつては機関車が行き来していたそうです。 市場名がカーボン（石炭）マーケットなのもなのが納得できます。 たくさんの路面に面したショップがあります。 中国系の経営のお店が多いそう。 そして、 ぶっちゃけ「治安は悪い」です。 ストリートチルドレンやホームレスが当たり前のように行く先々にいます。 とはいえ、リーズナブルなお店が点在し、外国人でも長く住む人にとって便利な「お買い物スポット」でもあります。 外国人である我々がコロンストリートで買い物する時のポイントです。 フィリピン人と行く 外国人同士複数人で行く 明るい時間に行く 同じアジア圏ではありますが、肌の色も違うし好んで着る服も違うので外国人と一目でわかります。 平和ボケした日本人なんての恰好のカモです。 この日は元同僚と一緒に行きました。 「BEASTAR」フィリピーノ御用達・セブ島のシマムラへ 各洋服などが安価に手に入るお店「BEASTAR」へ。 セクシーなお洋服も多数あります。 ジーンズやワンピースだけじゃなく、カバンやブランケットに至るまで100ペソから200ペソとにかく安い。 ※ 1ペソ約2円です。 驚きの金額ですが、こういう場所で彼らなりに上手く買い物してるんですね。 BEASTAR MAP 本命カーボンマーケットへ！ 今日はウズラの卵とアボカドが欲しくてカーボンマーケットに来ました。 悲しいかな、この日アボカドは手に入りませんでした。 この時期フィリピンではアボカドは季節外れとのこと。 日本では年中手に入る食材なので戸惑いましたが、フィリピンでは季節外れの食材の入手は難しいです。 この日の購入したものは、今回はフルーツのグアバ（キロ40ペソ・20ペソ）・ウズラの卵12コ（1コ2ペソ・24ペソ）・唐辛子（5ペソ）・トマト3コ（1コ5ぺソ・15ペソ）。 セブ島では野菜を食べる習慣が少なく、ビタミンや酵素不足しがちです。フルーツは手軽に取れる栄養源として重宝します。 グアバはお酢とお塩で食べるのがオススメとのこと。 ウズラの卵はマーケットでは雑にビニール袋に入れられて売られています。 案の定帰宅したらすでに3 ~ 4コ壊れてましたww 一般的なスーパーではケースに入った状態で買えますが、マーケットではそうは行きませんね。 ヒビが入ってる程度だったので、帰宅後茹でてピクルスにしました。 カーボンマーケットでは、鮮魚・干魚・鶏、お米などなんでも手に入ります。 ちなみにセブ島に住んでいたら路上のあちこちに鶏がいるのですが、ç”

1Ÿæ´»ã«å›°ã£ãŸã‚‰ãŠé‡‘に変えるそうです。 ディープなスポット・ウェットマーケットへ カルボンマーケットの奥にある室内の市場・ウェットマーケットへ潜入しました。 ここはお肉などの販売が中心で、血や体液で汚れてもすぐに水で流せるように床が濡れています。 ほとんどのお店は明け方から朝、夕方からさらにお肉を中心に販売しているそう。 一区画一日たった50ペソで借りられるとのことです。 借りるためには政府（役所）に、貸してもらえるか否か許可を得る必要があるそうです。 ECQ（ロックダウン）中は自分の区画を運営するため、市場に寝泊まりして土日だけ自宅に帰っていたとのこと。収入を得られないと生活できませんからね。 貴重なお話が聞けました。 こちらはチョリソーといってソーセージの一種。フルーツじゃないですよww 日本で食べられるチョリソーは辛いソーセージですが、フィリピンではやけに甘いのが特徴です。 こちらは豚の顔。キロ100ペソ。骨をちゃんと抜いてあるから少しお高め。 豚の血も売ってました。 ドゴドゴという内臓やショウガなどと煮込んだ料理の材料として使います。 私には未開の食べ物です。 私たちが潜入したã

1®ã¯ãŠæ˜¼éŽãŽã€‚市場は基本オフタイムなので、おっさんたちが机や台の上でゴロゴロしています。 ちなみに、ありのままに伝えるとウェットマーケットは不衛生です。 しかもまるまると太ったラットを数匹目撃してしまいました。。。。。 観光用馬に乗りました カーボンマーケットは馬で物資を運搬していた名残もあってか観光用の馬車がいます。 地元の人は絶対乗らないと思いますが、せっかくなのでトライ。 金額は50ペソ。今はソーシャルディスタンスのせいで乗れなくなってしまったハバルハバル（バイクタクシー）よりお高め。 ジェネラルちゃん（メス）は5才。5000ペソで他の島から購入してきたとのこと。約1万円なので日本では考えられない金額なんですがこちらでは高額です。 かつてセブ島は観光が大きな経済の基盤でした。 コロナの影響で彼らの生業が営めなくなったと改めて思い知らされます。 早くセブ島にも観光業が戻ってきたらいいなあって思いました。 美容用品の卸問屋へ！ マニキュアやヘアダイなどリーズナブルな美容用品の卸問屋へ連れて行ってもらえました。 マニキュアなどがたった30ペソ前後。日本で考えるとまずあり得ない価格です。 前から欲しかった、ヘアアイロンを手に入れることができました！ 店員さんが箱を開けて、中身を見せてくれたただけでなく直接試すこともできました。 日本ならテスターとかあるので考えられませんねww たった1200ペソで購入できました。 アヤラモールで買ったら3000ペソ以上です。 上手く買い物すれば安価に手に入りますね！！ Cebu Demelle Enterprises MAP 路面店でゴリラポット？的三脚をたった180ペソで入手 前から欲しかったスマフォ用三脚も手に入りました。 壊れてもいいかなってお値段なのでとりあえずは満足。 ちなみにアヤラモールで見た同じタイプは1500ペソ！！高すぎて買うのを断念しました。 海外移住の拠点として人気のフィリピン・セブ島 たまたま転職してセブ島に来ましたが、現在プチ移住を満喫中です。 私がセブ島を海外移住の拠点としてオススメポイントとオススメしないポイントをお伝えします。 ※ 現在はコロナのため入国制限があります。 オススメポイントその1・「英語圏」なので新たに知らない言語を学ぶ必要がない フィリピンの公用語は英語。 フィリピン人は小学校から英語で授業を受けるので平均して英語のスキルは高いです。 中学英語が理解できれば最低限のコミュニケーションは取れるかと思います。 新たに言語を学ぶ必要がないのは大きなポイントだと思います。 オススメポイントその2・物価がとにかく安い 贅沢しなければ、日本人水準の生活レベルを年間100万から150万くらいで維持できます。 みんな稼ぐことに着目しがちですが、支出が抑えられるのは最大の利点かと思います。 オススメポイントその3・暖かいので免疫力が上がる 赤道直下で温暖な気候のおかげで年中元気で病気にかかりにくいです。 冷えって万病の元だと思うんですよね。セブ島にいたら年中体温も暖かく保てます。 免疫力も上がっていいみたいです。 オススメしないポイント1・公共機関でもルールがコロコロ変わっていい加減すぎ 女心と秋の空か？！ってくらいルールがコロコロ変わってめっちゃ振り回されます。 先日もビザの手続きで移民局に行きましたが、移民局のスタッフの情報共有ができてなさすぎてたらい回しにされ、散々待たされた挙句、自動でID発行するからもう帰っていいよって言われました。 その時間概ね4時間。 人が少ない日本では時間の価値が高いはずですが、人口が多いこの国では時間に対する価値感があまりにも違うせいか、平気で待たせます。 日本人が厳しすぎるのか。。。ねばならない思考の人にはオススメしません。 住むのなら、「まあ、いいか」の精神でいきましょう！ オススメしないポイント2・治安はとにかく悪ã

1„ 実は私、この国に来て2日目くらいで携帯（iPhone 8）を盗まれました。 iPhoneの追跡機能を使ってみたら、すでにマニラにありました。。。 賃金水準はとにかく劣悪で、そしてiPhone一個盗んで売っぱらえば半年ぐらい生活できるそう。 我々は所詮外国人。 日本と同じ感覚で住んではダメです。 安全なところに住みたいなら、日本から出ないのが一番です。 オススメしないポイント3・ローカルフードの栄養価を期待するな フィリピン人はとにかくお米が好き。おかずの汁をかけてご飯を食べるほど。 炭水化物と塩分が大好きで、30代後半から糖尿病や高血圧になる人も多いとか。 そして、炭水化物食べ過ぎで痩せていてもお腹が出ている人も多いです。 とにかく食に満足したいフィリピン人にとって手っ取り早いのが油と炭水化物です。 ロックダウン中は行動が制限されたせいか、ローカルフードしか食べられず、食事が塩分・油過多、しかも野菜が思うように食べられませんでした。 ほぼ毎日食べた結果、見事に太りましたww たまに食べるのはいいですが、健康を考えると控えたほうがいいです。 忘れないで。私たちはあくまで外国人 セブ島だろうがどこだろうと海外移住をしたらそこでは我々は外国人だということ。 カバンを無造作に置いて目を離したり携帯を机に置きっぱなしとか決してやらなくなりました。 出かける時も高級品は身に付けず、カバンも前に持ってしっかり手で抱え込むようにして歩いています。 そして日中でもできるだけ大通りを通るように心がけています。 最近では、ロックダウン以前よりホームレスは増え、治安は少し悪化しているように思えます。 2020年、フィリピン人の最低賃金は1日385ペソ（約800円）とのこと。 しかも、8月時点で失業率は45.5%。 CNN Philippines参照 ロックダウンで僅かな補助金は出たそうですが、もらえる人は限られていたそうです。 10万円もらえる日本は恵まれてますね。 それでもたくましく、市場で日々生きるために頑張っている地元のフィリピン人たちにパワーをもらえました。 まとめ・外国人が海外で生活するために必要なこと 一年半フィリピン・セブ島に住んで思うのは外国人である我々こそ率先してフィリピンの文化を受け入れ理解することが重要です。 会社に勤めていた時はその理解がちょっと足りなかったと反省しています。 少しずつでも、言葉を理解し、文化を理解する。 移り住んだ外国人である我々が少しでもいいから歩み寄る。 理解したいと日々思ってたら自然にビサヤ語も覚えてきますよ！ 今では野良犬や鶏、腹を出したおっさんがそこら中にいるのが私にとっての日常です。 そして、今回コロンを案内してくれた元同僚クイニーには感謝です。","noindex":true},{"slug":"entry385","title":"海外生活でも日本食！パン粉ぬか漬けのレシピ","date":"2020-10-30","modifiedDate":"2023-03-01","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2020/entry388.webp","description":"パン粉のぬか漬けレシピをご紹介。海外に住んでものすごく恋しいのが和食です。どの国でも手に入る食材を使って、パン粉のぬか漬けが作れます。保存も効くのでおすすめです！！","tags":["海外生活","料理"],"body":"私は海外生活4年めです。憧れの海外生活も長くなってくると、とても恋しくなるのがが和食です。私は現在セブ島に住んでますが、もちろんぬか床なんてかんたんに手にはいりません。 どの国でも手に入る食材を使って、パン粉で代用したぬか漬けレシピをご紹介します。 💡 この記事でわかること 海外で手に入る食材を使ったぬか漬けの作り方 海外生活で日本人の体や口にあった料理の作り方 セブ島の手軽に日本食が手に入るスーパー パン粉ぬか漬けを作るために用意するもの まずは材料などのご紹介。どこのスーパーでも手軽に手に入ります。 にんじん 1本 キュウリ（ジャパニーズキューカンバー） 1本 パン粉 2カップ 砂糖 大さじ2杯 å¡© 大さじ2分の1程度 あれば昆布 3 ~ 4かけ ジップロック 大きめ ジャパニーズキューカンバー（日本のキュウリ）は、大きめのスーパーで手に入ります。 ただ、海外の日本キュウリ（2本で50ペソ前後）に比べて約2倍のお値段です。。。 作り方 1. 野菜のカット 野菜の皮を剥き4センチ程度にカットします。さらに縦に4等分に切ります。 フィリピンの野菜は日差しが強いせいかキュウリに限らず野菜全般皮が硬いです。 日本ではあまりきゅうりの皮を剥いて食べることはありませんが、ストライプになるように部分的に剥いておいた方がいいです。 入手できたら昆布も使いましょう。 使う場合は軽く洗って細くカットしておくとダシが出やすくなります。 私はさらに包丁で昆布の表面に小さな切り目をたくさん入れておくようにしています。 2. 材料をジップロックへ まずはパン粉、塩、砂糖を入れてシェイク。 そこに野菜を投入し、軽く揉んで放置します。 常温の方が発酵は早いですが、セブ島のように常夏の国では出来るだけ冷蔵庫に入れておいた方が良いです。 3. 一日放置 1日経ったら充分漬かって食べられるようになります！ こんな感じでパン粉に水が出てきたら食べ時です。 パン粉を水で洗ってお皿に盛ったら完成。 一味がなければチリペッパーをかけて食べると美味しいです。 材料の入手先 材料の入手先です。 ITパーク：スーパーメトロ（MAP） 安心・安定で日本のグロサリーも手に入ります。 コロン：カーボンマーケット（ MAP ] 塩はカップの計り売りで15ペソで入手しました。ウズラの卵は1個2ペソ！季節外れのアボカドも入手可能です。セブで治安が悪いエリアなので日本人だけでの出入りはオススメしません。 ロビンソン：フエンテ（ MAP ） 引越して最も近所のスーパー。メトロよりも全体的に安い印象。 サリナスドライブ：ビッグプラスマート（MAP） 韓国系グロサリーストア。昆布なんかも手に入ります！キレイな牛肉もお肉やニラなども入手可能。 ロックダウンで食生活を制限されたのã

1§ãƒ¬ã‚·ãƒ”を公開したくなった 2020年コロナウィルスの蔓延で世界はパニックとなりましたね。しかもフィリピンは世界最長の6ヶ月もの間ロックダウンで街は封鎖されました。 誰しもが思うように外に出られなくなりました。 ロックダウンの規制がもっとも酷い時、私は会社の寮に住んでいました。 デリバリーか寮の一階にある食堂が主な食事を得られる場所です。 フィリピン人の食生活は米米米、たまに肉ぐらい炭水化物と肉。野菜はレアキャラで、塩分過多。お皿に食材を盛ると茶色くなりがちです。 大抵のフィリピン人はとてもタンボ（チャビー） です。 日本の一汁三菜彩豊かな食文化の中育った私にとって、ロックダウンの食生活は地獄でした。 しかも体調を壊しました。 私のように、海外に住む日本人は日本食が恋しかったり体に合わなかったり健康に気遣いたい人もいるのではと思います。 私のレシピがお役に立てれば幸いです。 まとめ：海外でも工夫すれば節約しながら日本食を味わえる 最近ではフィリピンだけでなく各国に日本のグローサリーストアはあるでしょうし、和食のレストランもあります。 とはいえ、日々のこととなると出費が気になりますね。 海外でも上手に工夫して、食生活をエンジョイしたいですね。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry387","title":"セブ島唯一日本人占い師・さくら庵のマイアさんから学ぶかみーゆ流占いとの付き合い方","date":"2020-10-29","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2020/entry387.webp","description":"たまーにですが、セブ島唯一日本人占い師・さくら庵のマイアさんとお茶してます。ぶっちゃけ私はプログラマーなのでまったく占い信じてません！！！こんな私がマイアさんとの付き合いを通じて、占いに対して思ってることなどを綴ります。","tags":["セブ島エンジニア生活","ライフスタイル"],"body":"フロントエンドエンジニア、今はプータローのかみーゆです。 たまーにですが、セブ島唯一日本人占い師・さくら庵のマイアさんとお茶してます。 ぶっちゃけ私はプログラマーなのでまったく占い信じてません！！！ こんな私がマイアさんとの付き合いを通じて、占いに対して思ってることなどを綴ります。 人生の選択に悩んでるのであれば占ってもらえばいい 人生の選択に悩んでるのであれば占ってもらえばいいんじゃないですか？ 「自分の答え持ってる人」は聞く必要ないかと思います。 ぶっちゃけそういう人は占いなんて必要ないんです。 （SMモール・カフェラグーナ） ただ、世の中には私のように自分の道をガンって決められる人の方が少ないようです。 ほどんどの人が悩み、苦しみ、路頭に迷っています。 苦しいのなら話を聞いてもらう価値はあるんじゃないでしょうか？ 私が占い師を信用しなかったワケ ちなみに占いを信じていない私がマイアさんと出会ったのは昨年の10月ぐらいだったかと。 マイアさんとはセブ島にある私の行きつけのバー・リップルに週末出没していました。 はじめて話しかけられたとき、 「悪いけど占い信じてないから私はいらない」って彼女にすぱっと言ってしまいました。 失礼ですよね。。。 マジでごめんなさい。胡散臭いし、探偵ならまだしも占い師がバーにいるなんてどうしたんだっくらいに思ってましたww 今ではセブ島で仲良しな友だちの1人なので、もちろんマイアさんの仕事に対する姿勢や考えも尊敬しています。 私が占い師への偏見ができた理由もちゃんとあるんです。 名付け親？占い師と私の過去の因縁 私の名前の由来について。おばあちゃんがたまたま立ち寄った占い師によってつけられました。 頭がいい子なら「知恵」、美人になって欲しいなら「由理子」と候補をもらいました。 で、おばあちゃんは私の名前を「由理子」にしたそうです。 （幼き日の由理子） 今となって思うのは、、、 結果ã

1«ã‚³ãƒŸãƒƒãƒˆã—ろ！！！占い料金返せ！ どうせならもっとオサレな名前を提案しろ、ムキーーーー！ です。 ちなみに他の兄弟（実は4人兄弟・名前は伏せます）に関して補足しておきますと、 「姉・明るい子」「兄・賢い子」「妹・優しい子」という感じで名付けられています。 両親からは「こんな子に育ってほしい」という想いが込められてますね。 なんで私だけ名付け親が占い師なのかが不明です。 今は親の重ーーーい願いがこもった名前より、縁も所縁（ゆかり）もない占い師が提案した名前で良かったとも思います。 ナゾに信心深いおばあちゃんは、また別の占い師に私を見てもらったようです。 その無責任な占い師は、「この子は他の兄弟に比べて母親に可愛がられてない」的なことを言いい放ちました。 その言葉を鵜呑みにしたおばあちゃんは、事実確認もせず母にキツく当たりました。 だから占いはキライでした。 今では、占い師の言葉を鵜呑みにしたおばあちゃんが一番ダメだったとも理解してます。 私から見たマイアさんはどちらかというとカウンセラー （バー・リップルにて占い中） 彼女はタロットカードで占ってくれます。 占う前に状況を聞いてくれます。 彼女に占ってもらい、救われた人は何人か知ってます。 私の受けた印象は、原因や解決方法をかなり分析してその人の状況を判断して近道を示しているように思います。 タロットカードを介して、ではありますが。 それってカウンセラーじゃない？って感じます。 マイアさんは基本的に不要な占いはしません。 私もたまに占って欲しいことがありますが大抵言われるのは「かみーゆは占いいらないでしょ、答え持ってるもん」とのこと。 単にマイアさんと話がしたいだけのことも多いです。お見通しですね。 「占いは責任のある仕事」 不要な占いをしない理由には彼女が占いに対しての信念があるからなのでしょう。 マイア先生のアドバイスが誰かの人生に影響すると分かっているからなのだと思います。 タロットカードに「仕事のパートナー」としての尊敬がある おもしろいことに、マイア先生はタロットカードを尊敬してます。 タロットカードが仕事のパートナーだって思ってるからでしょうね。 つい前も「この子たち（タロットカード）、私よりよっぽど優秀だから」と言ってました。 そしてカードからメッセージを読み取ってどんな言葉を伝えるかも慎重です。 過去苦しい時期があったから占いで人を救いたいという想いがある 何度か話をする中で、過去苦しいことがあったそう。 どんなことがあったかは知りませんし、そこに首をつっこむつもりはありません。 ただ話できないことほど、辛いことだと勝手に予想しています。 私も辛いことほど口に出せないですし、ね。 マイアさんは占いに出会い救われたので自分が救われた占いで人の力になりたいと考えています。 生半可な気持ちでは占っていないということは伝わりました。 占いをあまり信じていない私の占いとの付き合い方 すでに答えを持ってるので占いが必要ない私ですが、占いに対して3つの見解を持ってます。 変わりたいなら、執着を捨てて素直な心で聞くべし 人は共感や同意を求めたい生き物です。 すでに答えを持っていて、それに同意を求めたいだけなら占ってもらう必要ないんじゃない？という意見です。 営業妨害だったらごめんなさいw そういう人って大抵悩みを抱え始めた時、周りに相談していると思います。 そして周りからは自分にとって「納得いかないアドバイス」が周囲から返ってきてるのではないでしょうか？ すでにどうしたいか明確で、「正しさを証明したいだけ」なら他人に意見を求める必要ないんじゃないんですかね？ 日本で昔、テレビでたまたま女芸人が「納得いく占い結果が出るまで占いをハシゴする」って言ってたのを見たことがあるります。 「じゃあ行くなよ」って心の中でツッコミを入れました。 自分の「正しさを証明したい」という欲求を満たしたいだけなら、お金のムダなので占ってもらう必要ないんじゃないですかね。 占い結果やアドバイスを受け入れられるようになり、「私の考え間違ってるかも」って少しでも思い始めたら人生が好転するかもしれませんよ！ スピリチュアルとかガン無視で本気のアドバイスと捉える マイアさんの言ってることは当たります。状況を冷静に整理・判断できるからだと思います。 タロットを持ってるだけで、実は一昔前に流行ったFBIのプロファイラーくらいに思ってます。 #### プロファイラーとは？ >「こういう犯罪の犯人はこういう人間が多い」という統計学である。この犯罪者のパターンを推論する事を「プロファイリング」と言い、推定する専門家（捜査権を持っているとは限らず、外部委託ã

1§åŠ©è¨€ã™ã‚‹ã ã‘の学者のこともある）を「プロファイラー(profiler)」、推定された結果を通常「プロファイル(profile)」と言う。 >犯行や犯罪現場で犯人像を推定する作業は現場の警察官や刑事でも行っている。それら現場の推定が経験によって行われる物である。経験による判断も個人の過去の事実、観察の統計的な裏付けに基づいたものである。しかし、経験によるという場合に、事実・観察を科学的記録している訳ではないことがある。それに対してプロファイリングは行動科学的知見を用いると言う点において異なる。 表情や話し方や態度から、無意識のうちに性格や癖を事細かに分析してるんだと思えます。 メンタリストって一面も感じますね。 あくまで私の見方です！ どちらかというと、科学が好きなのでそんな風に思っているだけです。 もちろんスピリチュアルが大好きな方は、ピュアな気持ちで占ってもらってください。 何をすべきか自分で責任持って選ぶべし 散々占っておきながら、選択できない自分がいることもありますよね。 （ITパーク・スーパーメトロ） 私はマイアさんにアドバイスされても「やりたくないなー」てことはやらないです。 心の声に従うのが一番ですよ。 ぶっちゃけマイアさんのアドバイスも人生の一選択肢にすぎません。 自分の道は自分で切り開かなくてどうするんですか？ そんな考え方があるって思うだけでも「ものの見方は変わってくる」んじゃないでしょうか？ 耳を傾けるだけでも、「視野が広がる」ことは間違いないと断言します。 まとめ・本当に変わりたいならまっさらな気持ちでアドバイスを受け止めよう 私は散々占いを信じてないと言いつつ、マイアさんのアドバイスには一目置いてます。 ただ「自分の正しさを証明したい」だけであれば、ほかを当たってください。 ラッキーなことにさくら庵・マイアさんがこの木曜日から土曜日までキャンペーンしてます！土曜日が満月だからとのこと。 インスタのフォロワー1000人登録記念！！！10分間無料で占ってもらえるそうですよ！ LINE@にお問い合わせしてみてください。 さくら庵・マイアさんの満月リーディング・キャンペーン内容 《フォロワー様1000人突破記念》として、10分間の満月リーディングを無料でさせていただきます。 LINE@にご登録いただいて、［満リー希望］とメッセージいただけたら、日時をご相談させていただきます。","noindex":false},{"slug":"entry386","title":"消耗しない生き方の選択とセブ島での充電生活レポート","date":"2020-10-27","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2020/entry386.webp","description":"2019å¹´4月「MacBook Pro とスーツケースだけで生きていこう」と、セブ島に来て1年半経ちました。理由は３つ。1、好きな仲間と仕事したかった。2、オフショアと人材育成がやりたかった。3、年取ったら南の島でのんびり食べるだけ稼いで生活したかった。そんな思いで家財まで整理してセブ島に来たのに、仕事辞めちゃいました。辞めた理由と現状とこの先について綴ります。","tags":["キャリアアップ・転職"],"body":"2019å¹´4月 MacBook Pro とスーツケースだけで生きていこう と、セブ島に来て1年半経ちました。 理由は３つ。 1. 好きな仲間と仕事したかった。 2. オフショアと人材育成がやりたかった。 3. 年取ったら南の島でのんびり食べるだけ稼いで生活したかった。 そんな思いで家財まで整理してセブ島に来たのに、仕事辞めちゃいました。辞めた理由と現状とこの先について綴ります。 仕事を辞めた3つの理由 会社を辞めた3つの理由からお話しします。 私の経歴を軽く説明しておくと、もともと日本ではウェブ制作会社でフロントエンドエンジニア、その後フィリピン・セブ島では日系ベンチャー企業でプログラマー講師を経てオフショアブリッジSEをしていました。 ちなみに、セブ島に来た詳しい理由はこちらをお読みください。 ロックダウンで自分を見つめ直す時間ができ、一生懸命というか・・・磨耗して働くのがイヤになった 2020年世界はコロナウィルスが爆発的に蔓延。 そのため、セブ島だけでなくフィリピンは半年もの世界最長の幸いロックダウン（街の封鎖）がフィリピン政府によって敷かれました。 強制的ではありますが、自宅勤務を余儀なくされ通勤や人付き合いに費やす時間がなくなり、自分を見つめ直す時間ができました。 ロックダウンが何かわからない方はこちらをご覧ください。 この一年半、思い返せば何が楽しかったか思い出せないくらい忙しかったです。 そして私の夢は「年取ったら南の島でのんびりする」だったのに微塵できていないことに気づきました。 若ければいいけど私はもういい歳だし、体力的にもこのまま続けるのは辛すぎる。 仕事に注力するあまり、自分自身を大切にできてないことにも気が付きました。 在職中は、せっかく南の島に来たのに海はたった1回しか行っていません。 まあ海は実は嫌いなんですけどねww セブ島で外の景色も見ず、毎日モニターとにらめっこ。 がむしゃらに働いていて、ふと、「この生活がこの先も続いたら私は耐えられるだろうか」と思うようになりました。 また、自分でこの働き方を選択したのも間違いないと加えておきます。 何よりも成果物の質にコミットしたい IT業界に約10年いる私の持論です。 「いい成果物を提供できたら顧客がファンになってくれるので営業する必要はない」 今までの私の仕事の仕方は、良質のプロダクトを作ることにフルコミットする、です。 この一年半、私の働き方にも問題あったã

1®ã‹ã‚‚しれませんが、自分のプロダクトの作り方・提供の仕方に納得いかずイライラしていました。 もっと、もっと、もーーっと、いいものが提供できるはずだって。 多くの制作会社は、数字に追われて営業部隊が無理な仕事を取ってきて、納期に追われて制作部隊が疲弊しています。 とくに日本の会社！！御社、御社ですよ笑 満足のいくものを納品して、クライアントだけでなくそのサービスを使うユーザーも満足したらハッピーじゃないですか？ 良いものを提供できれば無理な営業などする必要ないから経費も削減できる。 無理な営業をしなければストレス・フリーでさらにみんなハッピー。 とはいえ今のご時世、生き延びるために数字を追わずには生きていけませんよね。ちゃんと理解しています。 かっていても私は「数字にフォーカスする仕事」は絶対にやりたくない。 そんな「自分の価値を大切にしたい」と思ったのも1つの理由です。 「1日8時間の働く時間が大切」だと豪語していたくせに自分ができていないことに気がついた 1日仕事をする時間って約8時間ですよね？ 人生の大半は仕事をしてるにもかかわらず、労働する時間が楽しくなかったら人生終わってると思います。 はっきり言います。ここ最近は忙しすぎて私は人生を楽しめなかったです。 忙しいのが好きな人もいるのであくまで私の意見です。 私の人生で何か選択するときの基準はいたってシンプル。 やっていることが「おもしろいか」「ダサくないか」に当てはまるか、です。 「おもしろいか」「ダサくないか」いずれかから外れたと感じた瞬間に絶対やりません。 いざとなったら何やっても食ってけるし、どうとでもなる。 ということで、9月30日（正確には10月20日）をもちまして退職いたしました。 この先、自分らしく人生を楽しむために 今私は何をしてるかと言うと。。。 セブ島にまだいますww プラプラしつつ、友達を大切にしつつ、のんびりとセブ島を楽しんでます。 閑静な地域にあるコンドミニアムの最上階に引っ越しました。 毎朝教会の鐘の音で目を覚まし、体をいたわるためできるだけ自炊しています。 退職後3か月は充電期間 ただいまのんびり1か月目です。 そして、はじめてセブ市内を観光しました！ 実は未だセブ島はロックダウン中です。それでも以前より規制が緩くなったおかげで歴史的建造物など目の当たりにしてめちゃくちゃ感動しました！ 1年半住んではじめてのプライベートの観光でした笑 セブ島は実はかの航海時代に活躍したマゼランが果てた地です。みなさん知ってました？ （写真：マゼラン・クロス） サント・ニーニョ教会からカーボンマーケットへも行きました。 ウズラの卵が1コたった2ペソ（約4円）。買い物しながらマーケットにいる地元の人と交流も楽しみました。 「英語が話せないのが恥ずかしかった」ので勉強始めました 私セブ島に来た当初、まったく英語が話せませんでした笑 ブランクはあるものの、実は大学は英文科（中退）で英検二級も持ってます。 日本人にあるあるですがスピーキングとリスニング能力が皆無に等しかったです。 セブ島に来た当初「話せなくてもどうでもいいじゃん」って振舞ってましたが、正直に言うとものすごく恥ずかしかったです。 今年入ってオフショア選任になってからというものの、英語はビジネスにも有利になって話せたほうがいいということに気づきました。 話せないのを話せないまま、コンプレックスを抱えたまま終わるとせっかくセブ島に来たのに後悔するだろうと思うようになりました。 辞めてしばらくは英語の勉強にまじめに取り組むと心に決めました。 実際どんなことをやってるのかと言うと、以下のようなメニューです。 平日：毎日1時間から2時間文法を中心としたスピーキングとリスニング 土曜日：アクティビティやテーマに沿ってプレゼンなど。ライティングも含む 写真は「サン・ペドロ要塞」、三角の要塞です。やっと入場できるようになりました！ この日は「サン・ペドロ要塞」で私の地元広島の歴史的建物についてプレゼンをしました。 努力次第で潰せるコンプレックスは率先して潰してしまった方がいいですよ。 コンプレックスは1つでも少ない方が前向きになれるし人生が楽しくなります。 プログラミングスキルとナレッジをインプット プログラミングの辛いところは、技術の進化が早いところですね。 英語学習以外の時間はこの一年半で置いてけぼりになったプログラミングの技術の知識やスキルのインプットに費やしています。 具体的には今月はReact中心に勉強しています。 私は、ただ授業を買って勉強するのは向いてないので何かしらプロダクトを作ります。 このブログも来月には見た目はそのままでリニューアルしたいですね！ このサイトが爆速になることを願います。 本当に好きな人たちとだけ過ごす もちろん、英語やプログラミングの勉強するとか言いつつ、まったくストイックに追い込んでないです。 なんせ今は充電期間ですからね！ 空き時間はお友だちとお茶やご飯して過ごしています。（写真はSMシティモールです） 好きな人といるだけでその空間・時間がパワースポットになるんですよ！ 一緒にいるだけで良いアイデアが生まれたりウキウキします。寿命も延びます、多分。 （写真：ドラム缶焼肉粋） 大好きな人たちと過ごす時間が愛おしいと思えるのは、今までの大変な期間があったおかげかもしれません。 充電期間後はどうするつもり？ さて2か月後をどうするか、ですね。 だんだんやりたいことが見えてきました。 私はウェブ制作が好きですし、この先も「死ぬまでウェブ制作するかそれに準ずるものへ関わるんだろうな」て、ぼんやり思ってます。 そして今もこの先のやろうとしていることも実は根本的に変わってません。 好きな仲間と仕事をするのが私のこの島に来た理由です セブ島まで来る人なんて変なヤツが多いに決まってますからww そして、好きなことがしたいなら1人ですればいいんです。 私にとって「何をするか」よりも「誰とするか」の方がよっぽど重要です。 また、私の好きな仲間の定義があります。 「一緒に苦楽を乗り越えることができ尊重し合える相手」です。仕事は時に辛いこともあります。仲良しごっこじゃ続きません。この先は窮地に直面しても一緒に乗り越えられるような戦友以外とは一緒に仕事しないと思います笑 年齢・性別関係なくそんな人と長く仕事できるならハッピー。人生の目標1つなので達成させます！ 老兵は去り、教育に力を注ぎたい なんだかんだ言っても私もいい歳。 これからエンジニアとしてもですが、脳も体もどんどん劣化していくばかりです。 この先、「私という人間を活用するためには人材育成がマスト」と考えてます。 IT人材を育てたい気持ちはセブ島に来る前から今も変わりません。 そして人材を育てたい理由が他にもあります。 まだ広島でフリーランス駆け出しの頃、私はとてもスキルもナリッジもないしょぼいコーダーでした。 なぜかめちゃめちゃ周りに育てられて助けられました。 多分一生懸命頑張ってる、ガッツがあったと言う理由ですね。 情熱を持って学びたい人にその機会が作りたいです。 優秀な若い世代が一人でも増えたら世の中が豊かになりますしね。 ただ、人材育成って体力がかなり必要で片手間ではできないのも分かってます。 そして、教える側は育成期間ある意味その人の人生を背負ってるくらいの気持ちを持つべきですね。 師匠たちには恩返しできないので、生半可ではないガチな姿勢で次世代を育成する。 師匠たちにã

1‚‚らった恩は次世代に送ります。 ちなみにはっきりバッサリ言っておくと、有料テックスクールみたいなものはやるつもりないです。もっと違う形で、人材育成を実現したいですね。 まとめ・好きな仲間たちと楽しく働いてお金を稼ぐ！ 中途半端ですが現状報告でした！ 最終的には大好きな仲間と楽しく仕事するためにお金が必要というのが最近の結論です。 3か月間充電したら楽しく好きな仲間といかにマネタイズするため、具体的にすることを考えていこうと思います。 最後までお読みいただきありがとうございました。 参考 サン・トニーニョ教会：1566年に創建されたフィリピン最古の教会。教会にはマゼランから送られた「小さなキリスト」サント・ニーニョ像が祀られています。キャンドルを灯すのをオススメします。入場料無料。Map マゼラン・クロス：サント・ニーニョ教会の入り口にある十字架。今展示されているのはレプリカだとか。フィリピン人は敬虔なクリスチャンで信心深いので本物置いちゃうと奇跡が欲しくて十字架の一部をむしりとっちゃうらしいです。 カーボン・マーケット：コロン（町の名前）にあるセブ島でおそらく最大の市場。コロンはとても治安が悪いので、住み慣れない外国人が1人で出入りするのはオススメしません。この日は季節外れのアボカドが手に入りました。Map ドラム缶焼肉粋：650ペソで食べ放題。ソフトドリンクも飲み放題メニューあります。 日本では食べられない生レバ刺しが食べられます。タン塩も絶品。私のサンクチュアリで1 ~ 2週間に1回くらい訪れます。人数が多い時などはFacebookページから予約していくことをオススメします。FacebookMap","noindex":false},{"slug":"entry382","title":"職場の人間関係は人の割合で変わる！組織を腸内フローラに例えてみた","date":"2020-10-19","modifiedDate":"2022-06-07","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2020/entry382.webp","description":"職場の人間関係が辛い方へ。職場の良くも悪くもどんな人で構成されているかで変わります。組織って腸内環境に似ているので私のその会社での経験を例えて説明してみました。腸内環境整える前にマジ社内環境整えよう！！今いる組織で苦しい人、悩んでいる人の一助となれば幸いです。","tags":["例えてみる","キャリアアップ・転職"],"body":"職場の人間関係が辛い方へ。職場の良くも悪くもどんな人で構成されているかで変わります。昔、乳酸菌を取り扱う会社にいました。当時は「腸内環境整える前にマジ社内環境整えよう」よ、と思うくらい劣悪でした。組織って腸内環境に似ているので私のその会社での経験を例えて説明してみました。 今いる組織で苦しい人、悩んでいる人の一助となれば幸いです。 腸内環境について予備知識 私の経験の話の前に腸内環境について予備知識を入れておいて欲しいです。 興味ない人は飛ばしてもらって結構ですw 腸内には約100兆億個の細菌が住んでおり、1列に並べると地球を2周半できるほどの長さになります。 しかも細菌たちがお花畑のようなので腸内フローラと呼ばれています。 毎日排泄（はいせつ）する便の内訳ですが80%が水分で、3分の1は食べカス、3分の1は腸壁、3分の1は腸内細菌です。 たくさん便が出たからって昨日の食べすぎた食事がリセットされてるわけではないと思ってください笑 腸内細菌にはざっくり分けて3種類います。 悪玉菌、善玉菌、日和見菌です。 ビフィズス菌や乳酸菌がいわゆる善玉菌で悪玉菌と戦ったり、腸の

1働きを助けたりします。 悪玉菌はウェルシュ菌など腸内で毒素を出したりします。 理想は日和見菌が7割で、善玉菌が2割、悪玉菌が1割、といった感じでしょうか？ このバランスが崩れると下痢やアレルギーなどの病気になると言われてます。 大多数もいるくせに日和見菌というのは善玉菌が増えると善玉菌の味方になり悪玉菌が増えると悪玉菌の味方をします。 腸内フローラと組織ってめちゃ似てます。 腸内フローラに例えながら当時いた会社の環境や経験を説明します。 入社当初、3大悪玉菌との遭遇 実は昔、私メイクさん、ネイリストをしていました。専門学校やキャリアスクールで教えたり、賞も取ったこともあります。 それまでのキャリアのおかげで、小さな部署ではありましたが、はじめての大企業の子会社に就職でき、制服を着て会社勤なんてしたことがなく正直ワクワクしていました。 初出社した時、忘れもしない5月8日、とびらを開けた瞬間直感で 「ヤバい！逃げ出さなきゃ！！」 と思ったのを覚えてます。 その動物的直感は1ミリもズレてなかったのはその後思い知ることになります。 アフター5に支店にヒステリックに電話をかけまくる女 定時の5時以降、支店に電話をする女がいました。 「もう帰ったの！信じられない！」とヒステリーに叫びながら。 彼女の仕事は商品の手配をして、日々の売り上げを集計することでした。 最初はなぜそんなヒステリックに叫ぶのか意味が分かりませんでした。 定時後電話する理由としては 「私がこんなにおまえたちのために遅くまで頑張ってるのになんでとっとと帰ってるんだ？」 と周りに主張したかったようです。 ゆがんだ承認欲求ですね。相当病んでます。 ゲームするか怒鳴るかしかしない役員 その会社で忘れられないもう1人の悪玉菌ですが、ゲームしてるか怒鳴るしかしない役員がいました。 売り上げ達成しないと、ひたすら部下に罵声を浴びせるという地獄絵図。 私はたまたま席が近く、毎日その恫喝（どうかつ）を四六時中聞いてました。 怒鳴られる社員は決まっていて、不器用でゴマスリが苦手なタイプ。弱い者イジメというか、八当たりにしか見えませんでした。 怒鳴ってる以外は、仕事せずにパソコンで麻雀（マージャン）ゲームばかりしていました。 今でもその強烈な怒鳴り声が耳の奥の方に残っています。 自分より優れている人・目立つ人を徹底的に叩き落とすおばちゃん 入社してはじめての飲み会がありました。 当時新入社員でまだ若かったã

1®ã§ã¿ã‚“なが周りに寄ってきて話かけてくれました。 その日は新しい仲間と会社のビジョンを共有し、たくさん話できて満足し、気分よく帰りました。ところが次日、私がいろんなこと人の悪口を言いふらしているといううわさを聞きました。 そのうわさの出どころがすぐに彼女だと分かりました。 というか、私はまだ会社に関して詳しくないので悪口すら言えないのは周りも分かっていました。 そして、そんなあからさまなうそをつくような人間がいるとは心の底から信じられませんでした。 のちのち、彼女の人となりを周りの人から聞かされて納得。売り上げが高く、役員から評価されてましたが人一倍嫉妬心が強く、自分より少しでも目立つ人がいれば、とくに女に対しては徹底的に嫌がらせをする人とのこと。 女子中学生じゃあるまいし勘弁してって心の底から叫びたかったです。 善玉菌、いい人もたくさんいたから続けられた こんなワンダーな会社に入ったものの、もちろんいい人もたくさんいました。 私の企画を通すために根回ししてくれる上司、売り上げが立たず困ってるときに協力してくれる支店のマネージャー、共感できる同僚など。 彼らがいる間はキツくても仕事は楽しかったです。 善玉菌激減・ある日突然訪れた大量のクビ切り その会社は世界的な大企業の子会社でしたが、赤字で膨大な借金がありました。 どうにも負債が膨れて最終手段を取ることになりました。依願退職です。 退職金を払うので辞めさせ、人件費を浮かせる手段をその会社は取りました。 恫喝（どうかつ）役員が何人かピックアップし、退職を促すことになりました。 当時はリーマンショック真っ只中。辞めたところで仕事などすぐ得られる当てはない状況でした。 みんないつ肩を叩かれるかビクビクしていて、なんとも言えない異様な負のオーラが社内に流れていました。 しかも、優秀な社員までも退職金目当てに辞めてしまいました。 人の構成のバランスが大きく崩れた末路 経営やマネジメントが悪いと善玉菌的な人材は減ります。 前述した悪玉菌的な人たちは社内に残り、怒鳴り声はより一層大きく聞こえるようになりました。とは言え、社内の多くは日和見菌のような人たちの方が多かったです。 残された人のモチベーションはダダ下がり、ものの見方もネガティブに偏り、売り上げにも影響しました。 組織は本当に腸内フローラのようなもので悪玉菌と善玉菌のバランスが崩れると日和見菌のような人たちも悪い方向に傾いていくんです。 結果、どうにも立ち直せなくなったのもあり、他の子会社と合併することで生き延びることとなりました。 人のバランスで組織が変わる ジョブホッパーの私が今までいろんな会社を経験して断言します。組織はどんな人がいるかのバランスで決まると言って過言ではないです。 人のバランスが悪いと人間関係、数字、すべてがうまく回らなくなります。 立て直しが無理だと感じたら手遅れになる前に退散した方がいい 私は当時会社にいてキャリアが築けないなど自分にメリットを感じなければ、2年で辞めると心に決めていました。 にもかかわらず、世界的大企業の子会社という理由で4年もずるずる勤めてしまいました。 4年間いた結果、私はそれまでメイクさんネイリストとして築いたキャリアを完全に腐らせてしまいました。 大きな組織に属すると社会的に安心感はありますが、腐った環境だとキャリアアップできなかったり、心を病んだり、疑心暗鬼になるだけです。 トータルで何の得にもならないです。 人のバランスの悪い組織は、この依願退職が物語るように、我々のことは守りません。 どんなに良いと思っていた組織も、人のバランスが崩れたら悪い方に傾きます。 そんな時は思い切って撤退するのも一つの手。 私は辞めて、それまでに築いたキャリアを捨てててIT業界に転身しました。たくさん勉強して努力しました。 そして、二度とキャリアを腐らせないために同じことがあればすぐ撤退すると心に決めています。 もちろん、人のバランスが変わったら持ち直すこともありますけど。 まとめ 私の10年前に体験した話を腸内環境に喩えつつ説明してみました。 私の経験ですが、何かのお役に立てれば幸いです。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":true},{"slug":"entry374","title":"WordPressのラジオボタンとチェックボックスをカスタマイズ","date":"2020-07-18","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry374.webp","description":"WordPressのフォームのデザインを変えたいことってありますよね？プラグインを使っているせいで、複雑なHTMLが出力されていたり、CSSの意味がわからなくなったり。。。そんなときはコピペで秒で解決しましょう！！この記事ではMW WPフォーム、Contact Form 7の二大プラグインのラジオボタンとチェックボックスのカスタマイズ方法をご紹介します。","tags":["CSS"],"body":"WordPressのフォームのデザインを変えたいことってありますよね？ プラグインを使っているせいで、複雑なHTMLが出力されていたり、CSSの意味がわからなくなったり。。。 そんなときはコピペで秒で解決しましょう！！ この記事ではMW WPフォーム、Contact Form 7の二大プラグインに焦点を絞って、ラジオボタンとチェックボックスのデザインのカスタマイズ方法をご紹介します。 ラジオボタン・チェックボックスのカスタマイズだけが知りたい方はこちらの記事をお読みください。スニペット（サンプルコード）も随時追加中です。 MW WP Form のラジオボタン・チェックボックス MW WP Form は日本製のとても便利なフォームプラグイン。お問い合わせの内容をDBに保存できたり特にカスタマイズしなくても、最初から機能豊富。よく使います。 MW WP Formプラグイン詳細 このプラグインではあらかじめ用意されたショートタグというものをテキストエディターに貼り付けてフォームのパーツを作って行きます。 MW WP Form ラジオボタンのカスタマイズ法 HTML ショートタグを設定するとこんな感じでHTMLが出力されます。 CSS デフォルトではこんな感じで設定されてます。 まずはラジオボタンをこんな感じに変えようと思います。 基本のラジオボタン・チェックボックスのカスタマイズ方法同様、inputタグをdisplay:noneで消して隣接するspanタグの擬似要素before、afterを追加してカスタマイズします。 !importantをできるだけ使わずショートタグをタグでラッピングしクラスをつけてスタイリングしていくと良いです。 クラスを付与するためにショートコードを挿入する時に以下のような設定にしておきましょう。 MW WP Form チェックボックス のカスタマイズ法 checkboxの場合、単純にクラス名がmwform-checkbox-fieldに変わるだけです。 仕上がりイメージはこんな感じ。 Contact Form 7のラジオボタン・チェックボックス Contact Form 7は私Web制作を始めてすぐにお世話になったプラグインです。 Ajaxによるフォーム送信するところとか、個人的に心が熱くなります。 Contact Form 7プラグイン詳細 Contact Form 7ラジオボタンのカスタマイズ法 まずはどんなHTMLが吐き出されるかを見てみましょう。 かなり深いspanでできた入れ子構造のHTMLが吐き出されます。 スマフォ対応のため、ラベルごとクリックできるようにlabelで要素を囲むにチェックを入れておくことをおススメします。 HTML CSS Contact Form 7 チェックボックスカスタマイズ法 チェックボックスもラジオボタン同様、個々の項目をlabel要素で囲むようにすることをオススメします。 出力されるHTMLはラジオボタンと構造は一緒です。全体のラッパーの名前が違うくらい。相変わらずネスト（入れ子）が深いです。 HTML CSS まとめ WordPressのプラグインもどんなHTMLが出力され、どうCSSが効いているか分ればカスタマイズも問題なくできます。 わからないうちはとりあえずコピペで、分かってきたらコードを徐々に改造してみてください。 最後までã

1Šèª­ã¿ã„ただきありがとうございました。","noindex":false},{"slug":"entry370","title":"【2026年版】CSSでラジオボタン・チェックボックスを爆速カスタマイズ！コピペ用コード付","date":"2020-07-07","modifiedDate":"2026-06-22","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry370.webp","description":"【2026年最新】CSSでラジオボタン・チェックボックスを劇的におしゃれに変える方法を解説。最新のaccent-colorプロパティから、擬似要素を使った高度なカスタマイズまで。コピペで即導入できるコードスニペットを多数掲載し、WordPress（Contact Form 7）やモダンなWeb制作現場ですぐに役立つ内容です。","tags":["CSS"],"body":"CSSでラジオボタン・チェックボックスの見た目をおしゃれに変える方法を詳しく解説しました。 2026年現在、accent-color プロパティの登場で色変更は容易になりましたが、Web制作の現場では「ブランドに合わせた独自デザイン」を求められるシーンが依然として多いです。 この記事では、HTML/CSSを勉強中の方はもちろん、実務でUIデザインをブラッシュアップしたいエンジニアの方に向けて、モダンブラウザに対応した最新のカスタマイズ手法を紹介します。 ラジオボタン・チェックボックスの仕組みを理解すれば、どんなデザインも自由自在に作れるようになります。 とにかくすぐ使いたい！ という人は、目次から各デザインスニペット（コードサンプル）をコピペして使ってください。 WordPressの定番プラグイン「Contact Form 7」や、モダンなコンポーネント開発でもそのまま使えるコード付きです。（※以前主流だった MW WP Form 等にも対応可能です） ラジオボタンとチェックボックスの違いとは？そのままだと可愛くない理由 カスタマイズする理由から。 1つめ。ズバリ「見た目がよくなるから」です。HTMLのタグはCSS未使用の場合、各ブラウザに用意されているスタイルが適応されています。ラジオボタン、チェックボックスも同様です。 プレーンな状態で使うと次の通り青色で質素。このままだとウェブサイトのデザインによっては合わないし、カスタマイズした方がいいのは言うまでもありませんね。 2つめ。「各ブラウザごとに用意されているラジオボタン・チェックボックスなどのスタイルが違うから」です。 各ブラウザごとのラジオボタンやチェックボックスを比べてみます（私のマシンがMacなのでIE、Edgeは確認していません）。 比較すると本当にわずかですが細かい違いがわかります。デスクトップだとIEやEdge、モバイルでもっと違うと思います。 カスタマイズするメリットは見た目もよくなり、誰がどのブラウザで見てもデザインがブレないことです。 デメリットとしてはいつもよりコードをたくさん書く必要があります。 まあ、大した量ではないので大丈夫でã

1™ã€‚ accent-color である程度色が変えられるようになった【2026年追記】 2021年以降の導入された accent-color プロパティを使うと、ラジオボタン・チェックボックスの色が変えられるようになりました。 100% コントロールは出来ませんが、難しいコードを書かなくても多少見た目を調整ができるようになりました。 Safariは注意 「読みやすさ」を優先するため、指定した色が明るすぎると、勝手に少し暗い色に置き換えて表示することがある。 他のブラウザでは背景色に合わせてチェックマーク（レ点）を白か黒に自動で切り替えますが、背景色によってはチェックが見えなくなることがあります。 Safariは薄ピンクが視認性を考慮して茶色くなった。 Chromeはaccent-colorはそのまま、チェックやサークルの色が調整される。 このように、 「ブラウザの補正を許さず、100%デザインをコントロールしたい」 という場面では、このあと紹介する「appearance: none を使ったモダンな手法」や「擬似要素を使った完全カスタマイズ」が今でも正解です。 HTMLでのラジオボタン・チェックボックスの基本の作り方（アクセシビリティ考慮） 通常のラジオボタン・チェックボックスの書き方です。 ラジオボタン・チェックボックスのボタンは直径10px程度で小さく、とくにスマフォでのタップ操作がかなり厳しいです。Googleの推奨するボタンサイズが縦横44px以上 。なので私は文字をクリック（もしくはタップ）したときにチェックできるよう、必ずlabelタグとセットで使います。 labelの使ったコーディング方法は2通りあります。 labelタグとinputタグを分ける方法 inputタグとlabelタグを紐づけるとlabelタグをタップしただけでチェックできるようになります。 inputタグにid属性、labelタグにfor属性を追加します。両方同じ値にします。 labelタグの中に入れてしまう方法 inputタグをlabelタグの中に入れてしまいます。属性を追加しなくていいので楽チンです。 CSSでおしゃれに！ラジオボタン・チェックボックスをカスタマイズする実装コード ラジオボタンをカスタマイズ labelタグとinputを分ける書き方でスタイリングしてみます。 手順としては4ステップ。 1. inputタグを隠す（appearance: none ） 2. labelタグ内にボタンを置くスペースを作る 3. 擬似要素before、afterを使ってラジオボタンの各パーツを作る 4. 擬似クラスを使ってチェックが入った時にスタイルを変える ※ 今回はCSS設計などは無視します。 appearance: none に指定しますのでinputタグそのものは操作できなくなりますが、labelタグをクリックorタップすればそれに紐づいたinputタグもチェックが入った状態にできます。 inputタグとlabelタグは隣接しているので隣接セレクターが利用できます。チェックが入った状態のinputタグのすぐ次の要素へスタイリングができます。 擬似要素・beforeの上に重ねたafterのopacityを0にして隠しておき、チェックがついたら1にすることで表示します。 ※ 以前は display: none で要素表示を削除してましたが、アクセシビリティに配慮すると appearance: none 方が適切です。 ボタン用のbefore&afterは高さと幅を持った要素を作るためにはdispplayをblockかinline-blockあたりに設定しておくのを忘れずに。 ポイントは「擬似要素」「擬似クラス」「隣接セレクター」です。 擬似要素 擬似要素を使うと要素内に擬似的に要素を作ることができます。擬似要素の中にbeforeとafterがあります。beforeは要素内の最初、afterは最後に要素を追加できます。 contentプロパティがセットで、値に文字なども追加できます。ちなみに擬似要素を指定するときは::（コロン2つ）を使用します。 inputタグや、brタグのように中にコンテンツを内包できないタグには擬似要素が追加できないことを念頭に置いておきましょう。 擬似クラス 擬似クラスを使うとそのタグの特定の状態を指定できます。この場合だとラジオボタンに「チェックが入った状態」のcheckedを使います。擬似クラスを指定するときは:（コロン1つ）を使います。 隣接セレクター となり合った要素の指定方法です。要素同士を ＋（プラス）で繋ぎます。 チェックボックスも同じHTMLの構成でスタイリング 上に重ねる擬似要素afterを利用してチェックマークを作ります。 今回は特別な素材を用意せず、borderとtransform（変形）のrotateï¼

1ˆå›žè»¢ï¼‰ã‚’利用してCSSのみで作ります。 labelタグに入れ子にする場合 入れ子にする場合は、文字をspanタグなどのなかに入れます。 擬似要素を作るために必要です。 ラジオボタン・チェックボックスのスニペット（サンプルコード） CodePenにいくつかコードを掲載しています。興味ある方はコピペで使ってみてください。 HTMLはこちらを共通で使います。 ズームしながら出現するチェックボックス デモ : ズームしながら出現するチェックボックス CodePen 波紋が広がるラジオボタン デモ : 波紋が広がるラジオボタン｜CodePen スマフォやアプリに使えるラジオボタン デモ : スマフォやアプリに使えるラジオボタン｜CodePen スピンしながらチェックが入るラジオボタン デモ : スピンしながらチェックが入るラジオボタン｜CodePen WordPressのフォームのカスタマイズ方法 MW WP FormとContact Form 7でのフォームのカスタマイズ法もご紹介しています。 記事が長くなってしまったので以下にまとめてます。 よろしければ合わせてご一読ください。 まとめ ラジオボタン、チェックボックスのカスタマイズって結構勉強になるんです。HTMLの親子関係、CSSの擬似クラス、セレクターの種類なんかも覚えられますしね。なんどもやっているうちに、頭に入ってくるのでオススメです。 セレクトボックスのカスタマイズ方法も追加しました！！こちらも合わせてお読みください。 さらにボタンのCSSスニペットの記事も追加しました！！ みなさんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry369","title":"未経験、不安。30才過ぎてもエンジニア/プログラマー転職はできる","date":"2020-07-01","modifiedDate":"2023-01-22","category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2020/entry369.webp","description":"「ITエンジニア、Webデザイナーに転職したい」。そんな相談を受けることがあります。10年前未経験だけどIT業界へ転職したときにもがき苦しんだ自分と、異業種から転職してエンジニア/プログラマーを目指したいけど迷っている人のためにつづりました。家族・友だち・世間の目や社会的な立場が気になる、「自分にはエンジニアは向いてなのではないか？」と、不安に押しつぶされそうな人の一助となれば幸いです。","tags":["キャリアアップ・転職","講師","駆け出しエンジニア"],"body":"未経験だけどITエンジニア/プログラマー、Webデザイナーに転職したい。 そんな相談を受けることがあります。 私自身も10年前未経験からのIT業界へ転職したときにもがき苦しみました。異業種から転職してエンジニア/プログラマーを目指したいけど迷っている人のためにつづりました。 家族・友だち・世間の目や社会的な立場が気になる、自分にはエンジニアは向いてなのではないか？ と、不安に押しつぶされそうな人の一助となれば幸いです。 エンジニアへの道は本当につらいのか？ 自分にITエンジニア、Webデザイナーはムリないんじゃないか。。。そんなこと思ってませんか？ そんなことはありません。一番それを証明しているのは私です。 私は30才過ぎて美容業界から転職しましたが、現在オフショア開発でブリッジSEのかたわら、コードも書きつつ納品物の品質管理もしています。 「かみーゆさんが特別ですよ」ってたまに言われます。 そんなことないです。 30才前後でアパレル業界から転身し今や某プログラミングスクールの校長 ケーキ屋さんから職業訓練校で勉強してWebデザイナーになった人 35才過ぎから勉強して海外でプログラマーやってる人 今思いつくだけでも私が知っているだけでこのくらいいます。 探せばもっともっとそんな人はいるはず。 もし「自分にはエンジニアはムリだ」って思ってるのであれば、できないと思った自分がいるだけかも知れません。 まずは、なりたい自分になるためできることを探してみてください。 具体的にエンジニア/プログラマーになるために実際にしたこと 私がエンジニアになるため、やってきたことはざっくり4つ。 1. とにもかくも基礎力をつける 2. つよつよな人（メンター）を味方につける 3. 自分の付加価値を増やす 4. つねに勉強できる環境に身を置ã

1 さらにくわしく紹介しますので、参考にしてもらえたら嬉しいです。 1、とにもかくも基礎力をつける エンジニアになりたくて一番最初にやったことはとにかくコードを書きまくりました。 職業訓練校の頃、みんなが1回しか復習してなさそうだったら私は支給されたテキストを3回繰り返し練習していました。 慣れてきたらテキストのサンプルコードを利用して他のものを作ります。 ここで、何に利用できるか自分で考えるのも力を付けるポイント。 私の根底にあったのは、とにかく周りと「出し抜き」たかった、「差」をつけたかった。 私、性格悪いでしょうww？ でも考えてみてください。 もし同じ企業が就職先の場合、自分の能力が劣っていたら負ける可能性がグッと高くなりませんか。 私は周りの人に負けたくないからコードを書きまくりました。 周りを「出し抜く」ためにやりましたが、しっかりコードを書きまくったおかげで基礎力がついたので結果的に良かった！です。 プログラミング勉強し始めの頃って、確実にプログラミングするために基礎力をつけることが大切なんです。 そもそも、体力ないとマラソンも走れませんよね？ 個人的には、初学者のうちはコードが汚くてもとにかく書きまくることをオススメします。 何度も書いているうちに自分のミスるポイントがわかるようになります。 コーダーはスピード命。ミスコードに気がつけるようになるだけでコーディングが速くなります。 偉そうなことを言ってますが、当時の私は目も当てられないほどへっぽこ。 どんなに同じレベルの人を出し抜こうとしても、卒業して外に出てしまえば底辺だったと思い知らされました。今では性格が悪かったことも反省しています。 2、つよつよな人（メンター）を味方につける ある日派遣切りにあいました。再就職もめんどくさいし、仕方なくフリーランスの道を選びました。まだ私はプログラマというよりコーダー。とても力もなくしょぼしょぼでした。 力や経験が足りない人は業界の先輩で相談できる人を見つけるとよいです。 まずは業界の人に出会うことから始めましょう。 当時の私は地方のITコミュニティに属したり地方の勉強会に参加してました。 いろんなコミュニティに顔を出してると出会いも増えますし、もちろん友だちもできます。 コミュニティに属する時点でみんな向上心が高いので、気も合いますし仲良くなるもの早いです。 ちなみに私のつよつよな人（能力の高い先輩）を味方につけるコツはこんな感じ。 1. 等身大で。自分を卑下せず虚勢を張らない 2. 正直にできないことはできない、得意なことは得意と伝える 3. 頑張っている・学ぶ姿勢・情熱を見せる つよつよな人は自分もがんばり屋さんだったり仕事に誇りを持っています。とくに頑張っている・学ぶ姿勢・情熱を持っている人を助けてくれます。 私は一人のつよつよインフラエンジニアと出会いました。 デバッグの仕方、コマンドの叩き方、ネットワークのこと、sshの入り方。その人からたくさん学びました。 このつよつよなエンジニアは出し惜しみなく教えてくれました。もちろん厳しかったですww。 今日の私があるのはその人のおかげと言っても過言ではありません。 他にもWeb業界のつよつよ重鎮とも出会いました。 2年ほど広島県の人材発掘プロジェクトでアシスタントをしたことがあります。つよつよ重鎮、めちゃめちゃ厳ã

1—い。 デザイン、コード、文章の些細な書き方などよく夜中まで詰められました。 とても辛かった、、、、と言いたいところですがまったく平気でした！ 私はこの業界で生きていくって決めてたので必死で食らいつきました。Web業界のつよつよ重鎮と働けることはとても名誉なこと。すべて吸収しようと必死だったのは覚えてます。 当時はなんであんなにうるさかったんだろうって思ってましたが、すべてはサービスを使う「ユーザー」に向いていたんだと思います。 つよつよな人に応える方法は、自分の力を底上げするしましょう 指摘には素直に聞く耳をもつ、言われたことは出来るだけすぐやる。 具体的には、習ったことはブログなどでアウトプットとかしました。 そんなことをしていると驚くほど進化しました。 私は幸いにも、そのほかにたくさんのつよつよな人と出会って、助けてもらって、教えてもらって今にいたります。 #### IT勉強会どうやって見つけるの？ サイトconnpassで地域のIT勉強会やコミュニティを探せます。 中でも、IT勉強会の老舗・CSS Niteもオススメです。イベントのクオリティも高く登壇者も豪華で参加する価値あり。 3、自分の付加価値を増やす 対価が欲しけりゃ価値を高めろ!! この一言に尽きます。 私はそこらへんのコーダーと同じことをしていたら普通の収入しか得られないと思っていました。なので、当時女性コーダーでJSを触れる人が少なかったのであえて勉強しました。 JSを勉強した結果、ファーストビュー・アニメーションの仕事が取れるようになりました。当時1本10万くらいだったかな？ そして、みんながWordPress！WordPress！っていってる間にCMS concrete5のコミュニティを立ち上げました。 concrete5に興味津々だったのもありますが、結果自分の付加価値を上げることができました。 「concrete5の人ですよね？」と言われるようになりお問い合わせもあり、仕事も取れました。 concrete5は大規模サイトに向いてるので、ナイショだけどいい金額の仕事も取れました。 普通にコード書けるだけの人ならどこにでもいるでしょ？だったら、できるだけ特別なことができる人間になるしかないのよ。 他の人より少し別のスキルを増やすだけです。報酬も上がりますので、試してみてください。 4、つねに勉強できる環境に身を置く と、いっても特別勉強するのは面倒です。 私は、毎回案件で自分に負荷をかけるような挑戦しています。 私の尊敬するつよつよインフラエンジニアの教えです。 今の自分にはキツそうだけどやったら何とかできそう！！ 負荷のレベルはこのくらいがちょうどいいです。 具体的には、使ったことない新しいJSライブラリ取り入れたり、新しいCSSプロパティ使ったりなど、そんなことを繰り返し挑戦してるだけでノウハウが溜まります。 もう1コカンタンな方法があります。 優秀なエンジニアやデザイナーなどと積極的に付き合うことです。 ちょっとした会話するだけで最新の情報など吸収でき刺激にもなります。 この業界で生きていくことを「諦めなかった」自分の心理を考察してみる IT業界ではじめて働いた会社の時給は780円（スキルあるからもっと払うって言ったのに）でした。 仕事内容と時給に納得いかず辞め、次見つけた職場でも派遣切りにあい、泣く泣くフリーランスへ。 フリーランスで修羅場をくぐり、実力がついたおかげで改めてフロントエンドエンジニアとして企業に再就職できました。エンジニアとして認められるまで時間はかかってますし、大変でした。 それでも私がIT業界を諦めã

1ªã‹ã£ãŸã®ã«ã¯ç†ç”±ãŒã‚ります。 プログラミングは楽しい みなさんは、プログラミング勉強して最初に「Hello, World!」を表示した時の感動を覚えてますか？ ランダム関数でおみくじを作ったり、PHPでフォームを作って実際にメールを送ったり、JSアニメーションを使って車を走らせたり…。 私はふつうの人よりしつこいせいか、まだ学校でやって動いた時の感動を覚えてます。 プログラミングってぜったい楽しいんです。 「人生の大半である仕事する1日8時間を楽しく過ごせたら幸せなじゃいですか？」 それがIT業界でやっていきたいと思った理由のひとつです。 楽しいことなら多少辛くても続けられるんじゃないかな。 今エンジニアになろうとしている人に聞きたい。 プログラミング、本当に楽しいですか？ 「ダメだったらやめりゃいーや」って思っていた 自分の長所ですが、わりと見切りが早いです。 ダメだと思ったら早めに撤退します。早めに逃げれば痛手も少ないですし新しい道へも進みやすくなります。 それから、一番必要なのは辞めちゃう時に自分を許す心かと。 世の中にねばならないことなんてひとつもありません。 むしろやめることで価値が高まるぐらいに開き直ってます。 根拠のない不安など問題ではない なんでもやってみなければわかりません。やり直しなんていくらでもできるものです。若くて独身であればなおのこと。 一番ダメなのは取り越し苦労に怯えて何もやらないこと。 不安を払拭でき、言い訳しないと誓えるならチャレンジした方が人生は豊かになる。 もし失敗しても人間挫折があるくらいの方が魅力あるし、挫折からも多くを学べる。 挫折を知れば成功のありがたみもわかります。 決断したなら迷わず突き進む。やってもないうちから起こってもないことを不安に思うのは妄想で自滅してるだけですよ。 まとめ 最初は時給780円からスタートしたのでワーキングプアそのものでした。 フリーランスで実践を積んで、ようやく使えるエンジニアになれたと自信が持てるようになりました。 私がエンジニアになるため・いるためやってきた「とにもかくも基礎力をつける」「つよつよな人（メンター）を味方につける」「自分の付加価値を増やす」「つねに勉強できる環境に身を置く」、ぜひ参考にしてもらったらと思います。 紆余曲折して今に至る私のたわごとでしたが、最後までお読みいただきありがとうございました。 おまけ・YouTubeもあるよ！ YouTube化しました！よろしければご一読ください。","noindex":true},{"slug":"entry368","title":"セブ島で仕事したかったんでXDで退職届を作った話","date":"2020-06-27","modifiedDate":"2026-03-26","category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2020/entry368.webp","description":"みなさん、仕事は楽しいですか？私はロックダウンのせいで不眠症ですがまあ楽しく仕事できていると思います。昨年、セブ島でXD勉強会を開催させいただき、僭越ながら私もLTでXDの使い道を紹介させていただきました。最終的に退職届を作った話まで披露して大変ご好評いただきました。もう1年半前の話ですし、せっかくなので差し障りない程度に経緯を話しておこうかと思います。","tags":["XD","おもしろ"],"body":"みなさん、仕事は楽しいですか？ 私はロックダウンのせいで不眠症ですがまあ楽しく仕事できていると思います。 2019年、セブ島でXD勉強会を開催させいただき、僭越ながら私もLTでXDの使い道を紹介させていただきました。最終的に退職届を作った話まで披露して大変ご好評いただきました。 もう1年半前の話ですし、せっかくなので差し障りない程度に経緯を話しておこうかと思います。 まずは、辞めようと思った経緯から 会社を退職する経緯からお話しします。この説明抜きでは「XDで退職届を作った話」を語れませんので。 その1：信頼し背中を預けられると思っていたヤツが辞める 私が職業訓練校の講師をしていた時、見つけて引き抜いたヤツがいました。 仕事に愚直かつ、とても信頼の置ける人間でした。そういう姿勢に惚れたのã

1§å¼•ãæŠœãã¾ã—た。 こいつしか私の背中を預けることはできないと言っても過言ではなかったです。 ところがある日、彼は辞職を余儀なくされました。とても残念でした。 その2：海外で実力を試したかった こう見えてもエンジニアの端くれで、やっぱり英語圏の優れたエンジニアと働いてみたい、実力を試したいという欲求があります。実は私の密かな夢でした。 「実力を試したい」という部分に関しては正直年齢的には厳しいので、半ば諦めてました。 転職が決まり、業務自体はエンジニア講師でのオファーでした。 私のモットーで価値をずらして理想に近いことをするという考えがあります。なので、海外で働けることは大きな一歩でした。 その3：口減らしされそうになる 実はシニアエンジニアの私、一番お金がかかります。事業買取に巻き込まれ、心の底から好きで入った会社ではなく、お給料ぐらいは保証して欲しかったのですが、影で外部パートナーの話が持ち上がっているのを小耳に挟みました。 私はすでに内定が決まっていたのもあり、退職の意思を伝えようと決断していました。 どうせ作るならサイコーにイケてる退職届作ってやろう 用意した退職届にサインさせられるのなんてまっぴらごめんでした。 そして、どうせならWord（Microsoftさん、ごめんちゃい）で作成されたダサい書式なんて使いたくないので、長年お世話になっている大好きなAdobeのツールを使って作成することにしました。 退職届を作成するために選んだツールはXDです。 日本中探してもXDで退職届を作ったのは私だけと自負しています。 XDを選んだ深い？ワケ 実は私、広島のXDUG（ユーザーグループ）の立上げ人です。私のセブ島行きが決まってたので、地元の仲間に押し付けて出て行きました。 まあ、要はXDが大好きなんですよ。なのでXDを使って退職届を作ったらどうなるかやってみたかっただけなんです。 3つの課題がありました。 課題その1：縦書きをどうするか？ XDはそもそもプロトタイプツールで文書を作るためのツールではないので縦書きが存在しません。どうしたものかと考えて使ったのが「縦書きプラグイン」です。 このプラグイン、ただ改行を入れて縦書きを実現しているだけなので句読点の位置が微妙。 なので、別にテキストボックスを配置して句読点の位置を調整しました。 字詰できないのが結構苦痛で、めちゃ大変でした。 実際のアートボードはこんな感じです。 課題その2：イケてるフォントを使いたい 最近サイトを見ると游明朝とかよく見るけど、どうせならサイコーにイケてる明朝体で作りたいと思ったので、友達のデザイナーにどの明朝体が一体イケてるか相談しました。 そこで「モリサワ A-OTF リュウミン」を使うことに。 モリサワ A-OTF リュウミン | Adobe Font 課題その3：出すタイミングをどうするか？ 4月からセブ島勤務が決まっていたので、逆算して辞めるタイミングを考えて1月末には提出することにしました。 勉強会では「勇気が必要」と言いましたが、未来を決めていた私にとっては実は大した問題ではありませんでした。 退職届を作った感想 備えあれば憂いなし！退職願と退職届の2つを用意したせいもあり、想像以上に時間と手間がかかりました。 最後はPDF出力して印刷すればオッケーです。 これで終わりではありません。きちんと自分の名前の下に押印するのを忘れないでください。 WordやGoogleドキュメントを使えばこんな苦労する必要もなく、数分で作成できていることも分かってます。 それでもXDを使いたかったAdobeへの製品愛だけご理解いただければ幸いです。 晴ã

1‚Œã¦é€€è·ã—ました！ 晴れて無事、会社を退職することができました。 外部パートナーの話が出る前に迷わず「退職届」の方を提出させていただきました。 ちなみに余談ですが、退職届は一度出すと取り消せないのが特徴です。 もちろん前の会社では仲間と苦楽を共にした、いい思い出もたくさんあります。 ランチタイムに「ジョハリの窓」をやったり、どんな女がモテるか探るため「マトリクス図」を作ったり、業後に「カープの試合」を見に行ったり。 たくさんのキツイ案件がこなせたのもやっぱり仲間のおかげかなーと今更ながら思い返します。 一応稼ぎ頭でしたし、フロントエンドエンジニアとしてとてもやる気は感じていました。 そしてテクニカルディレクターとして、みんなに何があっても最後の砦になると心に決めて仕事していました。 フリーランスだった私が仲間と仕事する楽しさや、Web制作でチーム力の重要性を学ぶことができとても感謝しています。 2019å¹´12月セブ島でXDの勉強会を開き、このネタぶっこんだらやっぱりウケましたw 昨年セブ島のオフショア会社Vananazさんと日本のXDUGの協力の下、XDのオンライン勉強会を開かせていただきました。 当日は私もLTを一本持たせていただき、エンジニアなりのXDの使い道などをご紹介させていただいた中、この退職届を作った話もぶっこませていただきました。 XDUG 広島XDUG 当日のTwitterまとめの様子はこちら ↓↓当日のスライドはこちら↓↓ こんなところで使えるのXD活用法｜20191208 XD勉強会 in セブ島 | Slide Share 広島の友達たちは相変わらずゆるゆるで途中もぐもぐタイムとか挟みつつ、豪華にも湯口さんやたーさんなどにもご登壇いただき、とてもご協力感謝します。 嬉しいコメントも！！ 当日参加されていた方が私のLTの様子をブログに書いてくださってました。 「おもしろすぎる」。ありがとうございますww まとめ 退職というと結構ネガティブなイメージですが、転職って新しい出会いがあったりしてワクワクします。 会社を辞めてなければ、今の会社でものすごい奴らにも出会えてなかったですし。セブ島はロックダウンさえなければ出会いの宝庫です。 最後までお読みいただきありがとうございました。 おまけ・XD退職届のDLはこちらから せっかくなのでXDの退職届と退職願のテンプレートを作りました！GitHubからダウンロード可能です。ご利用の際は捺印と勇気をお忘れなく。 データダウンロード","noindex":true},{"slug":"entry365","title":"セブシティロックダウン 1か月を振り返る","date":"2020-04-25","modifiedDate":"2023-01-22","category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2020/entry365.webp","description":"コロナの影響でセブシティがロックダウンになりました。20時以降外出禁止、移動手段なし、あちらこちらに

1軍隊。多分日本では想像できない状況です。約1ヶ月を振り返ってみようと思います。※ この記事は私一個人の責任・意見として執筆しています。","tags":["セブ島","セブ島エンジニア生活","海外移住"],"body":"コロナウイルス蔓延の影響でついにフィリピン・セブシティがロックダウンになりました。 ロックダウンとは区画の封鎖のことで、区画からは許可なく出ることができなくなりました。 主には20時以降外出禁止、移動手段なし、あちらこちらに軍隊。多分日本では想像できない状況を経験することとなりました。 写真提供:DAREDEMO HERO 日本の皆さんにもこの状況を伝えたく、約1ヶ月を振り返ってみようと思います。 ※ この記事は私一個人の責任・意見として執筆しています。 ロックダウン：きっかけはコロナウィルスの蔓延 中国武漢から広がったコロナウィルス。大半は軽症で終わるけど、一部重症化し運が悪ければ死に至ります。その致死率0.66%で、インフルエンザの致死率が1%未満。人類とインフルエンザの戦いはコロナウィルスより長い分、抗インフルエンザ薬も開発され、体力年齢に問題なければ脅威ではありません。 人類はコロナという未知の病原体と戦う事になりました。 個人的にはヨーロッパの全人口の約3分の1を死滅させたペスト以来の脅威ではないか？！とも思っています。 写真提供:DAREDEMO HERO ロックダウンの前触れ：セブシティ3月中~下旬、外出規制がかかる セブシティーでは8時以降の外食が禁止となりました。飲食店も営業時間を短縮。飲食店でのお酒の販売も禁止。楽しみだった飲み歩きもできなくなりました。 3月28日：ついにセブシティロックダウン 3月28日正午、ついにロックダウンが施行されました。ロックダウンの正式名は「Enhanced Community Quarantine（ECQ）」です。 4月28日正午までと言われていましたが5月15日まで延長されるとのこと。 4月27日私は食料の備蓄のためスーパーに行きましたが、この通りの行列。ネズミの国のアトラクションかと思いました。 日本とは違う！ECQで厄介なこと フィリピンの規制は日本に比べたら相当厳しい。何がどう厄介かご紹介します。 外出制限・外出パスが必要になる バランガイ（日本で言う町内会）内だけ外出可能なバランガイパスがないと外出できなくなりました。 ロックダウン（ECQ）直後、なぜか謎の在住証明書っぽいものをもらいそれを持って外に出ればいいと言われました。 しかし、実はまったく効力のないことが判明。後日きちんとバランガイパスがもらえました。 外国人だからかもしれませんが、中には未だ手配してもらえない人もいます。 町のいたるところに検問が敷かれてます。場所によっては軍隊もいてかなり物々しい状況。 少し遠出する場合は、パスだけでなく身分証明書（パスポートなど）を提示を求められる場合があります。 酒の販売禁止 完全にお酒は販売禁止です。私のこの国での唯一の楽しみがお酒を飲むこと。お酒ぐらい売ってくれてもいいじゃないって言いたいですよね？ 人が集まったところでお酒を飲むのがフィリピン人。孤食が進む日本と違ってソロ呑みなんて考えられないのでしょう。お酒の販売すら、国民性が許してもらえないようです。 ランドリーショップが使えなくなる フィリピンは洗濯機を持ってないお家が多いです。なので、いつも私もランドリーショップを利用しています。 ECQともにいつも使っていたランドリーショップが休業し使えなくなりました。新しいところに変えましたが、規制がさらに厳しくなり、目の前にあるのにエリアが違うので、使えなくなりました。さらに別のところに変えましたが、そこも使えなくなりそうです。 NO パンツ、NO L

1IFE。 頼みの綱・デリバリーで頼めるお店がごくわずか 基本外出は禁止なので、主な食事は自炊かデリバリー。軟禁生活ではご飯を食べるくらいしか楽しみがないです。 私の環境下では冷蔵庫も小さいかつ・食材を手に入れるのが困難なため、自炊は1日1回が限界です。 フィリピンでは便利なご飯のデリバリーサービスがあります。GrabとFood Pandaです。私はGrab愛用者でしたが、お店がどんどん閉まって利用できなくなりました。 フィリピン人の愛するファストフード・Jollibeeすら頼めなくなりました。 コンドミニアムにも食堂が付いているのですが、私はフィリピンの味の濃いかつ脂ギッシュな食事があまり合わないです。そのためフィリピンに来た時、結構痩せました。 食事って精神衛生上、結構大事です。 空港閉鎖：帰国できなくなる ロックダウン（ECQ）により、たくさんの外国人がセブ島に足止めされました。 セブ島の空港はラプラプ島にあります。現在、空港は閉鎖されている上に、ロックダウン（ECQ）により市の行き来が容易にできなくなりました。チケットが取れたとしても、飛行機が飛ばなかったというケースもありました。現在、チャーター機は飛んでいますが通常チケットに比べたらとても高額。チケットが確実に取れるわけでもないですし、必ず飛ぶとは限らないようです。 私が一番悲しいのは、英語・IT留学でこちらに来ている人が帰れなくなっていることです。中には人生を変えようと、お金を無理して工面してきている生徒さんもいます。 チャーター機で帰ろうと思えば帰れるのでしょうが、通常のチケットに比べたら高額です。とても心苦しい限りです。 ただフィリピンや日本双方の情勢は刻々と変わり、そんな中なんとかセブ島に閉じ込められてしまった日本人を1人でも帰国させるためにチャーター機を準備するなど努力している人たちがいるのは十分理解しています。だからこそなおのこと歯がゆいです。 ロックダウン（ECQ）だからこそ良かったこともある！ ECQとはいえ悪いことばかりではない！！ECQだから、得ã

1‚‹ã“と・気づけることがありました。 接点の少ない同僚と仲良くなれた 私は会社の寮に入っているので、別部署の同僚ととても仲良くなれました。 1人じゃ寂しいので一緒にお昼や夜ご飯を食べたり、内緒だけど特殊ルートで買い込んだお酒を一緒に飲んだりしました。 一緒にYouTubeを見たり、、、遅れてきた青春を謳歌してます。 料理が楽しめる 私料理が大好きで、昔からストレス発散はもっぱら大鍋料理を作ることでした。無心に玉ねぎとかみじん切りしている時が楽しいです。 ただおいしいだけではダメです。ただおいしいだけのモノを食べていたら、確実に太ります。 私は料理を作るときは、栄養バランスも考えます。脂質、タンパク質、糖質、ビタミンなど、健康オタクではありませんが、それなりに栄養バランスを考慮しています。ちなみに、私の栄養の知識は高校生の時の家庭科から得たものです。 今更ですが、両親が払ってくれた高校の授業料を1mmもムダにしてないと我ながら感心です。 料理はセンス！出汁を使えば、香りも楽しめます。本当は盛り付けも大切にしたい。ただお腹を満たすだけだなら動物と一緒。食事は五感で楽しみたい！！！ 料理が楽しすぎて、ちょっと熱くなってしまいました。 さておき、料理って手順も大切だし、プログラミングに似てます。プログラマーに料理やらせたら絶対うまいと思います。 さておき、今まで忙しすぎて料理したいっていう発想にはなりませんでしたが改めて作るととても楽しいです！ 同じ寮に食べ盛りの若者が多くて作りがいがあります。 インプット・アウトプットする時間が捻出できた！！！ これクリエーターとしてマジ大事！勉強する時間ができた。今までできなかったので嬉しい！ アウトプットはもっぱらブログでしているのですが更新頻度が増えました。このブログサイト「銀ねこアトリエ」は去年の夏・沖縄出張中にコツコツリニューアルを準備しました。 そしてやっと今年1月くらいに勢いで公開。ところが、結構致命的な実装漏れや設定ミスが多く機能していませんでした。。。やっと記事をまともにアップする時間が取れるようになり、なんとかWebサイトとして機能できるレベルまで修正できました。 今月・来月はJS、CSSを中心にインプットしたことをまとめていこうと思います！ 日本の友達とたくさん話ができた 自宅に閉じ込められると夜暇です。なので地元の友達とオンライン飲み会とかできました！ 若者が使いがちな、LINEのビデオ電話のとてもしょうもない機能も勉強のために使ってみました。会話がまったく成立してないのに楽しかったです。 家族と話しできた 普段忙しい、時間帯が合わなくて家族と話しできてませんでしたが時間が捻出でき、たくさん話しができました。 私実は4人兄弟。日本にいた頃は、盆と正月は潰れるまで家族で酒を飲むのが恒例行事でした。もちろん、朝から迎え酒です。 いつか日本に帰ったらお父ちゃん、お母ちゃん、ねーちゃん（独身）、息子で死ぬほど酒を飲みたい。息子が参戦できるようになったのは嬉しいですね。両親が健在なうちに実現したいです！！ 自分を見つめ直す時間ができた あと、規制されることで夜など時間に余裕ができました。 今まで忙しすぎて見えてなかったことが見えてきました。ときに人は、立ち止まるのも大切ですね。 さいごに・こんな状況だから何ができる人間になるかを考える 私は、場所が変わろうがパソコンがあってネットさえつながれば仕事ができる人間です。ロックダウンで自宅軟禁になりましたが、現在もバリバリ働いて相変わらず納期に追われてます。 ただ、もし私が以前のようにメイクさんで現在の状況に陥っていたら、完全に職を失い路頭に迷っていました。自分が10年前に思い切って職種を変えたことは正しかったと思っています。 今回、フィリピンでも大量解雇などã

1§å¤±æ¥­è€…が増えたことと思います。人と直接合わないと成立しない仕事をしている人にとってはとても危機的状況だと思っています。おそらく、日本でもたくさんの会社が倒産すると思います。たくさんの失業者、そして悲しいですが最悪自殺者も増えると予想します。 コロナをきっかけに働き方や生活が世界規模で大きく変わっていく。変化に順応できることが生き残る術と痛感しています。 この先、世界が完全に以前のように戻るとは正直思っていません。人類は今から学び、第二、第三のコロナが発症した時に生き残らなければならないので。 オンラインでできることだってたくさんあります。悲観せず、この状況下でできることを探すしかないと考えています。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry360","title":"Adobe XD ユーザーグループ広島のオンライン勉強会に参加しました","date":"2020-04-11","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2020/entry360.webp","description":"セブシティーがロックダウンされて毎日超寂しい今日この頃。地元広島でXDのオンライン勉強会開催するって言うもんだから参加することにしました。","tags":["UX/UI","XD"],"body":"セブシティーがロックダウンされて毎日超寂しい今日この頃。 地元広島でXDのオンライン勉強会開催するって言うもんだから参加することにしました。 Adobe XDとはなんぞ？ XDはUIデザインやプロトタイプの作成、リアルタイム共同編集などの強力な機能が多数あるツールです。 私は会社ではクライアントやフィリピン人エンジニアとのやりとり、プライベートではイベント登壇用のプレゼン資料を作るために使っています。 ↓↓↓今回のイベントはこれ↓↓↓ 見るだけもOK！共同編集もしゃもしゃ会！ ↓↓↓当日の様子を公式スタッフのやんこちゃんが書いてます↓↓↓ zoomzoom! XDUG広島 vol.6 もしゃもしゃ会｜noex design アートボードを並べてみんなで各々模写します。 写生大会みたいで、とても楽しかったです。 実際のもしゃもしゃ会でやったこととか機能とか ワタクシ、一応フロントエンドエンジニアの端くれなので開発者ツールでバンバンコードを解析しながら作っていきました。時間が限られてるので、ざっくり作って後から調整する作戦でした。テキトーですが、最後まで作りきりました。 よろしければご覧ください。 ↓↓↓模写したユーザーグループサイト↓↓↓ https://xdug.jp/ ↓↓↓模写結果↓↓↓ https://xd.adobe.com/view/bb865e2a-98f0-4507-4589-524c7bae03ce-cdb7/ ちなみに今回XDを使うために必ず使って欲しい、もしくは使った機能をご紹介しておきます。 コンポーネント機能を使い倒せ 今回は共同編集ということでマスベさんの作ったコンポーネントを拝借させていただきました。 コンポーネントというパーツを部品扱いする概念があるのですが、ちょっと前にXDにも導入されました。 Sass(SCSS)とか使う人であれば、いくつかのCSS設計の手法をご存知だと思います。 CSSを長年書いている人ならわかると思うんですが、ページが増えてコードが長くなればなるほどカオスになっていきます。 それを避けるために考えられたのがSMACSSやFLOCSSとかCSS設計などの手法です。 ざっくりいうと色違いや種類違い、部品のさらなる部品といったように各パーツをしっかり整理してコーディングする方法です。導入するとCSSが破綻しにくくなります。 エンジニアからすれば、UI設計の段階で導入されることは非常にありがたいですし格段にコーディングしやすくなります。 コンポーネント機能を使って見出しやボタンなどのベースを作っておけば、色違いや形違いなど用途ごとにアレンジできます。 ボタン、見出し、チェックボックスなど同じ機能や属性を持ったものはできるだけコンポーネント化しておいてもらえるとã

1‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã™ã‚‹æ™‚もハッピーです。 基本中の基本ですが、コンポーネントのように複雑じゃない、色やフォントも登録できます。 こういった下準備をしておくと統一感も出ますし、後日色調整が入った時にデザイナー自身が幸せになれますね。 初心者であればあるほどガイドやグリッドに頼ろう！！ 美しいものって意外と理論的に作られています。 私は元メイクさんでした。色気もク○もない言い方をすると、メイクさんという仕事は顔を設計し、陰影などを利用して可能な限り美しい比率に近づけることです。 そんな経験も踏まえて、Webデザインを初めた人に言いたいのは、美しく作ろうと思うならば自分の感性はまずいったんドブに捨ててください。 そして、グリッド（12gridシステム）やガイドラインを利用してください。 繰り返し処理の鉄板リピートグリッド 今さら説明するまでもありませんが、以下のような同じデザインだけどコンテンツ違いの場合は鉄板でリピートグリッドを使います。 今回、面倒だったのはココ涙。端数だったので上に図形を重ねてごまかしました涙 リピートグリッドのこんな感じで中途半端になった時の対処法があれば知りたいです。 グローバルナブなどをクロール時に固定して実装した時の挙動を確認 XDにはプレビュー機能があり、私はこんな実装してーってエンジニアやクライアントに確認して欲しい時よくこの機能を活用します。 Webサイトは紙媒体と違って動きがあるもの。 リンクを共有する手もあるんですが、動きなどの繊細さがイマイチなので私はよく録画して見てもらうことが多いです。 実装するフロント側のエンジニアにもこんな感じで実装して欲しいから必ずプレビューを見るように伝えておくと○。 模写では開発者ツールでwebサイトの幅をカンバスサイズと同じサイズにしておくと良いみたい 今回各参加者に1366pxのカンプを用意されていました。 可能な限り、同じように作るためには開発者ツールを使ってWebサイトを1366px幅に設定しておきました。 このサイトはもうひとまわり大きなカンバスサイズでもよかったかもしれませんね。 パディングの設定がメチャ便利 コンポーネント機能に引き続き、XDに余白処理が実装されたのはフロント側の人間としては歓喜歓喜歓喜です。 今年の2月ぐらいに実装されたみたいですね。サイコー。 文字数が変わっても余白は同じように保ってくれるのでボタンとかのパーツの見た目がいい感じでできそうです。 より、正確にコーディングできますね。 知らなかった！SVGコードをコピペするだけで配置できる 私はサイトを最終的にコーディングすることを想定してカンプを作るので、アイコン類はベクター画像が嬉しいです。 模写側のサイトを見ると、いくつかの画像データはSVGでできていたので一度SVGデータとして保存して配置しました。 今回、即興ですが、デモさせてもらいました^ ^ 今日みんなで作業していて発見できたのですが、、、、やっぱりXDやってくれますね。SVGのコードを開発者ツールからコピーして、XD上でペーストするだけで配置できるじゃないですか。 マジビビりました。 データとしてはSVGの方が軽いですが、XD上での描画でメモリを食います。今回みたいに複数アートボードを並べて、共同作業する際は多用を避けた方がいいかもですね。まあ、そんなこと実務ですることはまずありませんがww とりあえず、XD勉強会のまとめ XDってツールはアジャイル開発で月一アップデートしていて頻繁に機能が追加されます。置いてけぼりなんてしょっ中です涙。 私実はプロトタイプだった頃から使ってるんですが、その時から比べたらバケモノ級に成長しちゃっててマジでビビります。 と、いうことでã

1“のツールの勉強会は定期的に参加しないと便利な機能を見逃しちゃいそうです。 共同編集なんて、以前に比べたら相当使い勝手が良くなっていました。 いまだにフォトショやイラレのデザインカンプがきますが、みなさん早くXDに移行して欲しいものです。 さておき、今回インプットもたくさんできてよかったです。 楽しかった！また次回も参加します。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry361","title":"CSS の shape-outside で特定の形の図形にテキストを回り込ませる","date":"2020-04-01","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry361.webp","description":"最近 float 使ってますか？ 一昔前の横並びのカラムレイアウトの鉄板は float と クリアフィックス でした。 今は grid や flex の登場でめっちゃ毛嫌いされている float の使い道と四角以外の図形へのオサレな回り込みをしてみましょう。","tags":["CSS"],"body":"最近 float 使ってますか？ 一昔前の横並びのカラムレイアウトの鉄板は float と クリアフィックス でした。 今は grid や flex の登場でめっちゃ毛嫌いされている float の使い道と四角以外の図形へのオサレな回り込みをしてみましょう。 挿絵とテキスト / 読みものとして適した配置を実現できるプロパティ、float よく以下のようなレイアウトを見かけますが、私は読みものとしてこんな感じのレイアウトは正直好かんです。 もともと、float は画像などへの回り込みをするために作られたプロパティです。カラムレイアウトを作るためにできたものではないです。 デザインが多様化し、テーブルレイアウトからカラムレイアウトで利用するようになり、flex、gridの登場もあり急に悪者扱いされるようになりました。 雑誌なんかでよく見かけるのは以下みたいなレイアウトが多いはずです。それを実現するのが float です。 余談ですが、私の頭の中では float はFFの魔法でいうレビテトに近いです。多分。 今はスマフォで画像とテキストの縦積みレイアウトが圧倒的に組むことが多いですが、PCになった時、エリアを有効活用するためこんなレイアウトが必要不可欠なのではないでしょうか？ 本来の float の使い方を知らない世代のデザイナーさん、ぜひこのレイアウトでデザインカンプを作って欲しいです。 CSSプロパティfloatの本質を理解する float はオブジェクトを擬似的に浮かして回り込ませます。必ずと言っていいほど、解除処理とセットで使います。 float させると、要素のコンテナーと回り込ませたい要素は重なっています。コンテンツだけが回り込ませたい要素にぶつかって折り返しているイメージです。 なので余白を設定したいときは回り込ませたい要素の方に設定してください。floatの概念がわかってなくてよくここら辺で転ぶ人、多いですねw floatとshape-outsideで複雑な図形に対してハイレベルな回り込みを実現する 丸や複雑な図形への回り込みを実現する、shape-outside というプロパティを使うとさらにかっこいい実装ができるそう。 現在IE以外はすべてカバーしています。 shape-outside | Can I use 基本図形 nset() …… 内側にオフセットした長方形 circle() …… 円 ellipse() …… 楕円 polygon() …… 多角形 ということで早速使ってみましょう！！ 円形に対して回り込ませる 図形の形を縁に設定してみます。 余白も含めてこんな感じで回り込みます。 楕円に回り込ませる shape-outside: circle() を shape-outside: ellipse() に変えるだけです。 画像を直接設定することも可能 以下みたいに直接画像を読み込んでも良いそう。 複雑な図形に回り込み処理をする せっかくなら複雑な形にも回り込みさせたいですよね？とはいえ計算が面倒なので、ここは思い切ってGUIツールでパスの頂点を調整することをオススメします。 CSS Shapes Editor というChromeに拡張機能があるらしいのですが私はうまくできなかったã

1®ã§Firefoxのデフォのshape編集機能を利用してパスを作成しました。 CSS シェイプのパスを編集する 開発者ツールで適当に3つ以上値を追加して、プロパティを追加したら、パス編集ツールが出るのでそちらをクリック。 複雑な図形では shaape-margin で余白を調整するのが良いみたいです。 IEに対応したい場合はpolyfillで対応しましょう。 https://github.com/adobe-webplatform/css-shapes-polyfill まとめ・CSSはより複雑な表現が可能となった CSSの進化でより複雑な実装が可能になりましたね。 みなさん、どうかfloatのことを嫌いにならないでください。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry363","title":"【コピペで動く】CSS counter（カウンター）の使い方！実務で使える自動ナンバリング実装パターン3選","date":"2020-03-29","modifiedDate":"2026-06-08","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry363.webp","description":"「olタグの連番を手動で直すのが面倒…」そんな悩みを一発解決！CSSのcounter（カウンター）関数を使えば、HTMLを汚さずに数字を自動ナンバリングできます。実務で今すぐ使えるデザインサンプルコード（コピペOK）と階層型の入れ子（counters）の実装テクニックを15年目エンジニアが徹底解説します。","tags":["CSS"],"body":"HTMLの ol タグを使ってリストを作ったとき、「注1、注2」とか「第1章、第2章」みたいに文字を含めた連番にしたいことってありませんか？ さらに、後から要素の順番を入れ替えたせいで、「手動で入れた数字がズレて、修正するのがダルすぎて具合が悪くなった…」というのは、コーダーなら誰もが一度は経験する絶望です。 そんな不毛な手作業を完全にゼロにするのが、CSSの counter（カウンター） 関数です。 意外と知られていませんが、Internet Explorer（IE）の

1対応を気にする必要がなくなったモダンWebの現代において、CSSカウンターは「HTMLを汚さずに保守性を爆上げする」ための必須テクニックとなっています。 ネットにある多くの解説記事は「初期化の仕組み」といった退屈な仕様から始まりますが、この記事ではまず、 現場でそのままコピペして使える「実務直結の実装サンプル3選」 からご紹介します！ この記事でわかること 実務でそのまま使えるCSSカウンターのコピペコード3選 CSSカウンターを動かすための「3つの呪文（仕組み）」 複雑な「1-1」「1-2」のような入れ子（階層型）を実装する裏ワザ olタグのダサいデフォルト数字を消して、綺麗にデザインし直す手順 CSSカウンター（counter）とは？ CSSカウンターとは、JavaScriptやHTMLの直書きに頼ることなく、「CSSの力だけで要素の数を自動で数えて、好きな場所にナンバリング（連番）を出力する機能」のことです。 通常の ol タグと li タグの組み合わせだと、数字のデザイン（色や大きさ、背景など）を細かく変更するのが非常に困難です。そのため、昔はわざわざ ul タグを使い、HTML側に手動で「1. 」「2. 」と文字を書き込んで装飾していました。 しかし、CSSカウンターを使えば、HTML側は綺麗なリスト構造のまま、CSSの擬似要素（::before や ::after）を利用して、自由自在にデザインされた数字を自動で配置できるようになります。 順番を入れ替えたり、間に新しい要素を追加したりしても、CSSが自動で数字を再計算してくれるため、運用の手間が劇的に削減されます。 CSS2／CSS2.1 ですでにあったモジュールで、使い方はいたって単純。 CSS Counter Styles Level 3 カウンターモジュールの基本の使い方 CSSカウンターの仕組みはいたって単純です。親要素の中で特定の要素（子要素）を自動で数え、その値を擬似要素（::before や ::after）と content プロパティを使って出力します。 実際に動かすために覚えるプロパティは、以下の3つの呪文だけです。 1. counter-reset（数字のリセット・名前付け） まず、数えたい範囲の「親要素」に対して設定します。 カウンターに好きな名前（変数のようなもの）をつけ、数字を「0」に初期化します。コンピューターは0基準で始まるため、既定値は0になります。 ※ちなみに、カウンター名に none, inherit, initial は使用できません。 2. counter-increment（数字を増やす） ナンバリングを出力したい「子要素」に対して設定します。このプロパティが読み込まれるたびに、数字が1ずつ増加（インクリメント）します。 counter-reset: 0 スタートですが、要素が登場して counter-increment された時点で「1」増加するため、最初に出力される数値は「1」となります。 3. content: counter()（画面に出力する） 擬似要素（::before または ::after）の content プロパティの中で、counter(カウンター名) を呼び出して画面に出力します。 たとえば、main タグの中に h2 が登場するたびに自動で「1」「2」と番号を振りたい場合は、以下のように記述すればOKです。 【コピペOK】実務で100%使うCSSカウンターの実装サンプル3選 現場でよくあるデザインを再現した、今すぐ使えるスニペット集です。HTMLはシンプルな構造のまま、CSSだけで自動ナンバリングを行います。 超基本的なオーダーリスト 基本のオーダーリストだとこんな感じでタイリングできます。 方法はいくつかあるのですがtext-indentを利用したナンバー以降の文字を字下げする方法をご紹介します。 ナンバー以降の文字が長くなってもこんな感じでæŠ

1˜ã‚Šè¿”すことができます。箇条書き（ul）でも使えます。 丸で囲って装飾する 丸で装飾したものも作ることもできます。 コードは基本と一緒で ol にクラスcircleを付与しただけです。 出力するナンバーは同じサイズで作ってプロパティ transform: scale(倍率) を使って縮小して調整するといい感じになります。 数字形式の表示方法の変更する 入る数字の形式を変更することもできます!!! 指定方法は数字形式を第二引数に入れるだけです。 指定できる数字形式は以下のように割と豊富。 | 値 | 詳細 | | -------------------- | --------------------------------------- | | decimal | 数字（初期値） | | decimal-leading-zero | 0つき数字（例：01、02、03） | | lower-roman | ローマ数字（小文字）（例：ⅰ、ⅱ、ⅲ） | | upper-roman | ローマ数字（大文字）（例：Ⅰ、Ⅱ、Ⅲ） | | lower-alpha | アルファベット（小文字）（例：a、b、c） | | upper-alpha | アルファベット（大文字）（例：A、B、C） | | cjk-ideographic | 漢数字（例：一、二、三） | | hiragana | ひらがな（例：あ、い、う） | | katakana | カタカナ（例：ア、イ、ウ） | | hiragana-iroha | いろは順（例：い、ろ、は） | | katakana-iroha | イロハ順（例：イ、ロ、ハ） | コンテンツごとに出力する コンテンツごとにもナンバーを付与することも可能です。 ナンバーを出力する位置を position: absolute; で調整し box-shadow で装飾したらそれなりに仕上がります。 こういうレパートリーがあるとデザインないときに即興で作れて良いです。 ナンバーを入れ子にする counters関数を使うとさらに複雑にナンバーを入れ子にできます。 その前に、リストの入れ子の書き方を知らない人が多いので、リストの入れ子の正しい記述方法とCSSの子セレクターの指定の仕方についてもご紹介しておきます。 子セレクターの指定の仕方 ある要素の直下の要素を指定したいときは以下のように要素と要素の間に > 書きます。 通常以下の子要素、孫要素と下の下まで指定できるのに対して、特定できて便利です。 CSSの子セレクターの指定の仕方について リストの入れ子の正しい書き方 li タグの中に改めて ul ないしは ol を書いて li タグを足します。 複雑な入れ子を正しく装飾する このように書いた場合、ul > li > ul > li というように入れ子が複雑になっていき要素をちゃんと厳密に指定しないとスタイリングが破綻します。 親のリストと子どものリストのデザインをしっかり分けたいけどいちいちクラス分けするのもめんどくさいです。なので、子セレクターを利用して指定していくのをオススメします。 子リストも合わせてナンバー出力する 今度は入れ子のリストの文頭にナンバーをつけてみましょう。 子リストには親要素のナンバーも合わせて付与します。 そうすることで、親の何番目の子の何番目なのかがわかりやすくなります。 以下のように、親要素子要素もろともすべてにcounter-resetをセットするのがポイントです。 あとは以下の通り全体のliタグに、counter-increment と counters 関数をセットするだけ。 これで ol の ol-has-child というクラスを持つ親要素の全 li タグに自動でナンバー出力を設定できます。 2個目の引数は親要素のナンバーと子要素のナンバーをつなぐコネクターとなります。 なので子要素は1 - 2みたいな出力になります。 counters関数 も通常の counter関数 同様、引数に表示形式を指定できます。 まとめ：HTMLを汚さない、モダンで保守性の高いコーディングへ 手動で「1.」「2.」とHTMLに直書きする時代は完全に終わりました。CSSカウンターをマスターすれば、仕様変更で要素の順番が入れ替わっても、CSSが自動で一瞬で整合性を合わせてくれます。 コーディングの効率を上げて時間を生み出したら、さらに本格的なモダンWebのスキルを磨いていきましょう！ 「もっと実務でガシガシCSSを書いてフロントエンドエンジニアとして転職したい！」 「独学のコーディングに限界を感じている…」 という方は、僕が実際に15年のエンジニア人生の中で厳選した「現場の現役エンジニアから最新の技術を直接学べる高品質な民間プログラミングスクール」の徹底比較記事もぜひ参考にしてみてください。あなたのコーディングスキルを確実に現場レベルへ引き上げます！ 最後までã

1Šèª­ã¿ã„ただきありがとうございました。 CSS カウンターの使用 - MDN Web Docs 本記事のコードサンプル - CodePen","noindex":false},{"slug":"entry357","title":"セブ島のSEO勉強会でWebサイト速度改善方法についてお話しさせていただきました","date":"2020-03-21","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2020/entry357.webp","description":"2020/2/29 セブ島でWACA（Web解析士協会）&オフショア開発会社スプローブさん主催、アフェリエイト・オウンドメディア・SEOなどの勉強会が開催され登壇する機会をいただきました。当日の様子などを気ままに綴ってます。","tags":["Web解析","講師"],"body":"2020/2/29 セブ島でWACA（Web解析士協会）&オフショア開発会社スプローブさん主催、アフェリエイト・オウンドメディア・SEOなどの勉強会が開催され登壇する機会をいただきました。 当日の様子などを気ままに綴ってます。 SEO・マーケ・アフェリエイト・メディア立ち上げなどの珍しい勉強会がセブ島で開催 セブ島では年に数回、WACA（Web解析士協会）さんとスプローブさん主催でWeb解析系の勉強会を開いているとのこと。 ちなみに前回の様子はこちら 私も昨年11月参加、Web解析士協会理事の江尻さんとお友達にならせていただきました。 下記のようにTwitterで「超退屈だ！欲求不満だ！」とつぶやいたら、江尻さんがおもしい人を日本から連れてきてくると約束してくれました。 セブ島での開催が決定し、私もついでに登壇者の1人としてオファーしてもらえました。 このイベント、SEOやリスティング、Webマーケを軸にウェブの世界でどう生き抜くかをテーマに各登壇者が話すという、なかなかおもしろいイベントとなりました。 開催・運営・会場提供などに携わったWacaの川口さん、スプローブの村田さんをはじめとするスタッフの方には心から感謝です！ イベント詳細はこちら 【2020/2/29 オンライン参加可】ウェブ生存戦略セミナー（アフィリエイト/SEO/メディア運営) (解析士割有り） 当日の私のスライド 有料イベントだったため一部、内容を伏せてあります。 クリエイターじゃなくてもできるWebサイト表示速度改善方法（事例のこぼれ話のおまけつき） クリエイターじゃなくてもできるWebサイト表示速度改善方法（事例のこぼれ話のおまけつき） 濃ゆいメンバーがセブ島に集結 仕事に忙殺されて、記事を書くのに1か月もかかってしまいちょっとあやふやになりつつ、遅ればせながら登壇者をご紹介します。 各登壇者の詳しいプロフィールに関しては、以下リンクを参考にしていただければ幸いです。 【2020/2/29 オンライン参加可】ウェブ生存戦略セミナー（アフィリエイト/SEO/メディア運営) (解析士割有り） 小林 貴志さん 通常アフェリエイターは稼ぐ方法を教えてくれないみたいですが、惜しみなくアフェリエイトで稼ぐ方法をお話いただけました。 アフェリエイトの真髄を知り尽くしている小林さん。大阪でアフェリエイト酒場なるものがありそこに出没するらしく、アフェリエイトのノウハウをあれこれ教えてもらえるようです。興味がある方はどうぞ。 國吉イチさん メディアの立ち上げの話でした。 現在同僚で若干入社したばかりの19歳（だったと思う）で弊社のメディアの立ち上げを行い、月間50万PVまで育てた猛者です。ブログ結構面白いし、こっそり尊敬してます。 神守由理子(私) Webサイト表示スピードに関するお話をさせていただきました。 Webサイトは大事なコンテンツを乗っけるためのツール。なのでコンテンツをいかに快適に読ませるかがモットーです。 セブ島であれば週末リップルというバーに行けば私に会えます。Webサイト改善の話が聞きたい時はお酒を一杯おごってくださいwww è¾» 幸範さん 事業のメディア化のお話。江尻さんのテーマに沿ってサバイブなお話でした。私は勝ち負けあんまり気にしない方ですが、ç”

1Ÿãæ®‹ã‚‹ãŸã‚ã«ã¯æ™‚に勝つことも必要だということ。 そして、辻さんが行なっているギルドプロジェクト、超楽しそうです！！ 私も今度から何かやりたいことがあったら、誰かにお金出してもらえる？って聞いてみようと思います。自分のアイデア・提案力などに価値があるかカンタンに計れますよね。 森永 乃武幸さん 意思決定などのマインドセットのお話でした。 小手先の知識だけではダメだと思いました。ちなみに森永さんはWeb解析のスペシャリスト。午後はWeb解析士の講義でも登壇されていたようです。 懇親会では、私が「再びWeb解析士受けようかなー」（数年前に合格済）と言っていたらやめといた方がいいとアドバイスいただきましたw ファシリテーター：江尻 俊章さん 2000年からWeb解析に携わっているWeb解析士協会理事の方です。話するととってもフランクで若者を応援する姿勢が大好きです。こういう大人が日本にもっと増えると日本は幸せになれそうですね。 おまけ:セブポットさんに遊びに行ってきました イベントにセブ島でフリーペーパーを配布したり情報発信サイトを運営しているセブポットさんという企業の方が参加していて、お声がけいただき遊びに行ってきました。 Webサイト：セブポット イベントに登壇するとこういった思わぬ出会いがありとてもワクワクします。 イベントでは話できなかった、Webサイトの改善すべき点などを雑談を交えながらお話しさせていただきました。 とても楽しかったです！ありがとうございます。 私、いつも言ってるんですが1番大切なのはコンテンツ！コンテンツが薄っぺらかったり、価値がユーザーに伝わらなかったら意味がないと断言します！！！ 単に検索順位を上げるためだけにやっている施策などカスです。 今までの経験上、熱量の高いコンテンツは確実に閲覧してもらえます。熱は絶対に伝わります。 次に重要なのは、ユーザーがコンテンツを快適に閲覧できるかどうか、です。 表示スピードだけじゃないです。色やフォントの種類やサイズ、導線、すべて考慮してはじめて使いやすいサイトになります。アクセシビリティやユーザビリティ大事。 運用する方、オーナーの方は目先の検索順位に惑わされず、そのWebサイトが誰のために存在するサイトか？という軸からブレないでください。 さいごに こういったナレッジシェアって大切！ITの進化は目まぐるしい。ほんっとついていくの大変です。誰かが中心になって、こういう会をどんどん開いていけるといいですね。 コンテンツラブの私ですがまたどこかのイベントで登壇するかもしれませんので見かけたら気軽に声をかけてください^_^ 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry355","title":"Webクリエイターを目指すリスタート組の君たちへ 多分ファイナル","date":"2020-02-16","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2019/entry355.webp","description":"Wantedlyに変なポートフォリオ載っけたらなぜか海外ベンチャー企業からヘッドハントされ日本をとび出して約10ヶ月以上経ちました。転職後、エンジニア講師とオフショアの二足の草鞋を履いてましたが、今年に入ってオフショア専任になりました。最後のエンジニア講師を通じて学ばせてもらったので、そのマインドを忘れないために現在の気持ちを綴ります。この記事は私が等身大で思ったことを綴ってるので、個人の責任で書いているということをご了承ください。","tags":["講師","駆け出しエンジニア"],"body":"Wantedlyに変なポートフォリオ載っけたらなぜか海外ベンチャー企業からヘッドハントされ日本をとび出して約10ヶ月以上経ちました。 転職後、エンジニア講師とオフショアの二足の草鞋を履いてましたが、今年に入ってオフショア専任になりました。最後のエンジニア講師を通じて学ばせてもらったので、そのマインドを忘れないために現在の気持ちを綴ります。 この記事は私が等身大で思ったことを綴ってるので、個人の責任で書いているということをご了承ください。 自分がどの程度パソコン操作できるか確認して プログラミングやコードを書き始めた頃のとこって多分忘れてるのかもしれません。 薄れた記憶を辿ってみました。 スペルミスでまったく動かないが連発 ディレクトリ迷子になる 全部同じ文字に見ã

1ˆã‚‹ã‹ã‚‰ã‚¨ãƒ©ãƒ¼åŽŸå› ã‚’探すのが地獄 自分は間違ってないという謎の思い込み 初心者でプログラミングが動かない理由は99パーセントヒューマンエラーです。しかもプログラミングよりも、フォルダー操作やショートカットなどパソコン操作がまともにできないこともあります。恥ずかしいミスのオンパレードで原因がわかるたびに情けなくなってました笑 なので、まずは基本的なパソコン操作ができるようになってからプログラミングの勉強に挑んで欲しいです。 プログラミングを勉強し始めた人の9割が習得する前に挫折すると言われてます。そもそもパソコンのスキルが低いと、その敷居はさらに高くなります。 ちなみに私がプログラミング勉強し始めた頃のスキルはエクセルの関数がある程度使いこなせるレベルでした。最低限のフォルダー操作やオフィス系のソフトが使いこなせる程度であればまずは大丈夫かと思います。 自分のパソコンスキルが十分ではないならまずはそこを克服しましょう。 プログラミングができるようになることよりプログラミングから学べる「解決思考」な方が大切 いつもプログラマーになりたい人へ問いたいことがあります。 「プログラマーになりたいのか？」それとも「プログラマーの自分になりたいのか？」 私はもともと職業訓練校を経てレタッチャー（写真加工する人）の仕事からスタートしました。その後、WebサイトのHTMLやCSSのコーディングを始め、それだけのスキルじゃ食ってけないと思い知り、PHPやJavaScriptを習得しました。スキルがないと高額の案件は取れなかったので必要に駆られて学びました。 食うため、生きるために学んだんです。 やりたくてやってきたわけではないという言い方もできなくはないです。ただ学んだことに対して一切後悔したこともないですし、得たことの方が大きいです。 やってて一番良かったのはマインドが変わりました。 イヤなことがあっても愚痴で終わらせず、解決方法を考えるようになりました。 プログラミングの構文ではif文やSwitch文というものがあります。これってまんま人間の行動に置き換えられることができます。Aの手法がダメならBのように状況によって代替案や対策を考えられるようになります。 またコードは1人で書くとは限りません。誰かにそのコードを見ただけで伝わりやすいようにしておかなければならないこともあります。整理したり、コメントを残したり、書く順番を気をつけておく必要があります。 最後に処理について。目標に向かってどうすればスムーズに処理や結果を出すためにはどうすればいいか、という思考が鍛えられます。ベストプラクティスじゃなくてもそういう考えをすでにし続けることが大切です。 こんな感じでプログラミングからいろんなことを学ぶことができます。 たとえプログラマーになれなくてもプログラミングのマインドを決して忘れないで欲しいです。経営者やプロダクトマネージャーには必須の思想です。 講師だって学ぶ 私はマウント取ったり偉ぶる必要はないと思ってるので、素直に思ったことをいつも伝えてます。 我々も業務をこなしながら日々勉強しています。私がこの会社に入って一番驚いたのはエンジニア講師が最も勉強してます。多分。 我々も日々試行錯誤です。どう伝えたら伝わるかとか、理解できるかとかめちゃ考えてます。ドンバンガンとか擬音で言った方が伝わる人もいれば、細かく順序立てて理論的に説明しないと伝わらない人もいます。 叩いて伸びる子もいれば、褒めて伸びる子もいる。 みんな違う。だから、少なからずどの子もしっかりみてあげることは大切だなーとは最近しみじみ感じてます。 我々講師はプログラミングを理解して欲しいとともに好きになって欲しいという気持ちは共通だと思ってます。多分他の学校のエンジニア講師も同じ気持ちと信じています。 生徒さんが理解できている時はいいんです。 分からない、学ぶことが苦しい時、不安に思っている時こそ寄り添えさせてもらえることは人としてこちらも成長させてもらえます。 理解できない苦しみ、早く成長したい焦り、そんなことを共感して一緒に辛かった時もありますが、前進できた時の喜びもひとしおでした。 小さな感動が毎日ありました。 私にとって最後のバッチを見させてもらった時、そんなことを強く感じさせてもらいました。 気づかせてもらえたことに感謝してます。 最後に みなさんには卒業してやっとスタート地点に立てたと思って欲しいです。 卒業後、起業したい、会社に属したい、フリーランスになりたい、色んな人がいます。 いずれにせよ楽なことなど何1つなく厳しい道でã

1‚ることは間違いありません。 ちなみにある生徒さんからこんなこと言われました。 >うちの会社のエンジニア留学でいろんなことが感謝できるようになった。 >だからこそ、課題解決できる人が増えて、世の中に幸せと思える人が増えていけばいい、ありがとうをもっと増やしたい。 私の講師人生でそんなことを言われたのははじめてで光栄です。 これからも必要とあればもちろん、いつでも頼ってきてください。 真っ直ぐに頑張ってる若者が心折れることなく、頑張れる日本にできるよう海の向こうから援護射撃します。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry356","title":"広島に帰省したのでウェブタッチミーティングでフィリピンやオフショアの話をしてきました","date":"2020-02-16","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2020/entry356.webp","description":"セブ島のIT留学・オフショア会社に転職・引っ越して約1年！久々の広島の帰省です。せっかくなのでウェブタッチミーティングでセブ島でのオフショアのメリットやフィリピンの生活などの話をしてきました。たくさんの人に会って思ったこと、感じたことも合わせて綴ります。","tags":["Web Touch Meeting","オフショア"],"body":"セブ島のIT留学・オフショア会社に転職・引っ越して約1年！ 久々の広島の帰省です。せっかくなのでウェブタッチミーティングでセブ島でのオフショアのメリットやフィリピンの生活などの話をしてきました。たくさんの人に会って思ったこと、感じたことも合わせて綴ります。 ウェブタッチミーティングってそもそもなんぞ？ ウェブ周りの知識を企業・立場関係なく横つながりからナレッジシェアできたらいいな、ということで藤本さんが始めたIT勉強会です。 もうかれこれ10年くらい経つんじゃないかな？我々も年取るわけだ笑 余談ですが、昔はウェブおさわり会という卑猥な名前でした。いつのまにやらまともな名前に変わったそうです。 私も何度か登壇させていただいた思い入れのある勉強会です。 「イカしたポートフォリオを作ったらヘッドハントされてオフショアしにセブ島まで行った話」をしました スライド 動画 当日のTwitterまとめ ウェブタッチミーティング公式サイト ちなみにセッションでは説明が薄かったところを補足します。 そもそも、オフショアとは？ 最近よく耳にする、「オフショア」。 英単語「offshore」の読みをカタカナ表記した言葉で「海外」を意味します。岸を表す「shore」と離れることを示す「off」からなる単語で、本来は「沖合」で、国外、つまり「海外」のことをいうようになったそう。 ビジネスでの「オフショア」は新興国や途上国のことが多いです。先進国の企業が人件費などのコストを抑えるために海外へ拠点を置くようになりました。 フィリピンは公用語が英語。世界規模でみてもその他の国に比べ、「国民全体レベルで流暢な英語を話せる」ことが強み。私が住むセブ島にもその強みを活ã

1‹ã™ã¹ãã€ãŸãã•ã‚“のコールセンターがあります。 言語の壁を超えて、コミュニケーションがスムーズに取れることは大きな強みです。 ITに力を入れているのか名前もそのまんま、ITパークというエリアもセブ島には存在ます。 私はセブシティーに住んでいますが、近隣に日系のみならず欧米・アジアのたくさんのオフショア開発会社が存在します。 悲しくもフィリピンという国は約300年植民地でした。そのためスペイン、アメリカなどの文化が入り混じっています。私は東南アジアの他国に比べて全体的にとても順応性の高い国民と感じています。そのため、オフショアとしてマッチしやすいのも特徴だと思っています。 一般的なフィリピンの物価とか賃金とか ビールは60ペソ(約120円)くらい。フィリピン人の平均月給は2万円くらいです。格差は激しいと思います。 医療費も日本に比べると安いので、保険に入っている人は少ないです。銀行口座も開設している人少なめ。贅沢しなきゃ月8万以内で暮らせるんじゃないでしょうか？ ポートフォリオを作ったきっかけ 去年職業訓練校で先生してたとき、生徒さんが卒業制作の際ちょっと手持ち無沙汰になり、自分用のポートフォリオを作りました。やったことないことを生徒に言えないじゃないですか？ さらにwantedlyに掲載してみたんです。 そうしたらなぜか、私がまっ先にヘッドハントされました。 ポートフォリオをとにかく作れ！ この業界に入りたけりゃ、転職したければとにかくポートフォリオ作ってほしい。 技術力、人間性のアピール、すべてを詰め込むことができる、履歴書なんかよりよっぽど強力なツールです。 反応が悪ければ、作り直せばいい。 とにかく、最初は完成させることを目標にしてほしい。 そして、PDCAを回して改良すればいい。就活始めたときに作り始めるようじゃ遅いですよ。 作ろうとしてるけどまだアクションしてない人。今すぐ取りかかってください。 美容業界からIT業界へ行った理由 美容業界からなぜIT業界へ転職したのか？よく聞かれます。 約10年前美容業界にいました。元々はブライダルや地元のテレビ局のメイク、ネイル、ネイリスト講師をやってました。 ネイルエキスポ2003年トータルルックコンテストで4位に入賞したこともあります。 わりとキャリアは築いていた方と思います。でも、問題がありました。子育てと仕事の両立です。うちの子は喘息とアトピーを持っていて、急な喘息の発作を起こすことがありました。ブライダルメイクやスタジオメイクなんてどう考えても穴を開けられない仕事です。 ある日子供の喘息が悪化して入院したことがありました。変わりがいないからスーツを着て、病院から出勤したとき心が苦しかったのを今でも忘れません。その時、誰かが代わりをできる仕事をしようと決意し転職しました。 キャリアが死に決断した その後、化粧品メーカーに勤めました。日々数字を追う仕事で、技術職とは程遠い仕事でした。毎日エクセルで数字を集計したり、販促用のチラシを作ったりしてました。私の美容の知識やスキルは想像以上に活かされず、このままでは私のキャリアが死んでしまうと、焦燥感ばかり募ってました。 どうせキャリアが死んだなら新しいことをしたい。幸いにも毎日パソコンを触ってたおかげで、パソコンを使う仕事に興味を持っていたので、ウェブクリエーターになるべく、職業訓練校に行く決意をしました。 そもそも、エンジニアになるつもりはなかった 元々美容関係の仕事の関係で色彩も勉強してたのでデザイナーになりたかったです。 もう、私より優れたデザイナーはたくさんいたし同じフィールドでは戦えなã

1„と思ったのは本音です。 そしてやってみたら意外と向いていたんですよね。食わず嫌いは、自分の可能性を狭めます。とにかくやってダメなら諦めればいい。 職業訓練校では3倍勉強した 朝予習、授業、夜復習。明けても暮れても勉強した記憶があります。単純に3倍以上は勉強しました。なぜそんなに勉強したかって？職業訓練校での職業講話がきっかけでした。 講話した方は私たちと同じ職業訓練校出身。にもかかわらず、しっかりキャリアを築いていました。 キャリアを築くために戦略を建てて行動してました。たった4か月で何をしたのかを教えてくれました。周りの職業訓練生と同じスタートラインに立っているようだとダメ。普通のことをしてたら現役の人に勝てない。 この道で生きていくと決めたので、正直にその人の真似をしてみました。 それでも、スタート地点に立った時はマイナスからのスタートです。転職して新しいこと始めるなら覚悟して欲しいです。 卒業してすぐスマフォアプリ選手権にチャレンジした 卒業してすぐ、人に誘われてマイクロソフト主催のスマフォアプリ選手権にエントリーしました。 どうやったら勝てるかを考えた結果、月に30個アプリを作ると決めました。 最初は役割分担で、素材だけ作ってましたが次第にUI、プログラムまでせざるを得なくなり、結果29個の申請を通すことができなんとか優勝できました。 ここで学んだのは、自分のやることに線を引かなければ、自分のやれることの幅が広がるということでした。 エンジニアになるためにどんな勉強をしていたか 私がこの業界に入ってやったこと。 すでにあるイケてるサイトを模写コーディングしました。 勉強会に参加しまくりました。分かんないことは人に聞きまくりました。 井上大輔さん著のレスポンシブデザインの本を3回はやりました。勉強したことは可能な限りブログや勉強会でアウトプットしてました。 ブログはアウトプットにもってこいのツールです。 間違っていることを恐れないこと。バカ丁寧に書く。アウトプットすればするほど自分の中にも落とし込めます。 特にイベントでの登壇はアウトプットだけではなく自分を売り込むチャンスです。 そして、今でも変わらずにやってることがあります。1案件に1チャレンジを必ず課す。 具体的には新しい技術にチャレンジするとか。 ちょっとだけキツイチャレンジを繰り返すと必ずスキルは上がります。 地方のIT業界は？帰省して気づいたこと 広島のIT業界も捨てたもんじゃないです。リテラシーも高くて、向上心も高い。 これはやはり何年もかけて広島で毎月IT勉強会を開いてくれた藤本さんのおかげもあります。 IT業界の開発技術の進化スピードは息切れするくらいキツイんです。 だからこそ地方エンジニアは知識や情報に飢えてます。都心ほど勉強会が盛んではありません。 誰かとナレッジシェアしたい。自分のやってることが正しいかベストなのかも不安なんです。 だからこそ、そういった場を提供してもらえるのは心の底から感謝です。 セブ島でも同じようなことができれば、現地の私のようなエンジニアが嬉しいだろうなと思いました。 一年離れたあとに見ã

1Ÿæ—¥æœ¬ã®å°è±¡ とにかく街はきれい。道路硬いから長時間歩くと膝にくるww 気軽に乗れるバイタクなどあるわけもなく移動に時間がかかる。とにかく全てが高い笑 飯はサイコーに旨い。ただ塩分多めなのかむくむ。全てがオンタイム。 ありがたいことが多いと同時に、ルールが整備され過ぎて家族や仕事のしがらみがガチガチで生きづらい人も多いなぁ、と感じました。 どんな生き方を選択するかは自分次第ということを忘れてはいけないですね。 サイコーの仲間が帰りを待っていてくれた 正直、ウェブタッチミーティングへ登壇するために帰ったと言っても過言ではありません。 コロナショックでイベント開催も危ぶまれましたか、アルコール消毒やマスクを常備して開催してくださったイベント運営サイドの方々には心の底から感謝してます。 参加者は減りましたが、84名もの来場がありました。 みんな相変わらず暖かく迎え入れてくれました。ごはんも随分奢ってもらいましたし笑 私が日本にいたとき、広島のIT業界にどの程度貢献できたかは分かりません。 ただ、セブ島に滞在しつつ地元へできることはたくさんあるはずなので何かできることを始めるフェーズなのかもしれませんね。 おまけ、息子が会いに来た 約束してなかったですが、息子が会いに来ました笑 息子氏、大学辞めてセブ島で約半年語学学校インターンやってました。 最初は照れくさいのか話しかけようとしなかったですが、最後はベラベラセブ島でのことなどを話してくれました。 とくに日本の教育への思うところ。みんな同じ方向に向かせたがったり、親や大人の言うことに疑問を抱くところは「さすが親子」と思います。 日本の教育は前を向くか後ろを向くか。つまり、レールからはみ出しにくい仕組みなんだと感じます。 息子曰く、360度向けるようになりたいとのこと。まあ、頑張れ。 セブ島で骨のあるやつと出会って考えが変わったんだなぁと。 大学や高校だけでは絶対に得られない出会いがあったんだとしみじみ感じ、大学は辞めてしまったけどセブ島に連れて行って良かったと思います。 さいごに 今回の帰省は好きな人に会う旅でした。 たかだか一週間でしたが、自分を俯瞰して見つめ直すこともできました。 そして、みんなから「いかに大切にされいてるか」も気付くことができました。 91歳のおばあちゃんにも会えました。死に目に会うよりは、生きているときに会いたかったので良かったです。 お金も名誉も持って死ねない。これからも私らしく、誰にも媚びす、友だちの助言には素直に耳を傾けて生きていきます。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry362","title":"2020年から始める JS 入門1 はじめの一歩・Hello world","date":"2020-01-05","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2020/entry362.webp","description":"JS は好きですか？女子小学生だと思って悶々したおっさんはおまわりさん呼びましょうかねw冗談はさておき、セブ島ロックダウン。インプットのチャンスです。もっとエンジニアとして飛躍したいですし、自分に落とし込むためにJSについて数回に分けてブログを書いてみることにしました。","tags":["JavaScript"],"body":"JS は好きですか？女子小学生だと思って悶々したおっさんはおまわりさん呼びましょうかねw 冗談はさておき、セブ島ロックダウン。インプットのチャンスです。もっとエンジニアとして飛躍したいですし、自分に落とし込むためにJSについて数回に分けてブログを書いてみることにしました。 JS(JavaScript)ってなんぞ？ 通称JS、JavaScriptとはブラウザ専用に開発されたスクリプト言語です。生まれたのã

1¯æ„å¤–と前で、インターネットが普及し始めた1990年代はじめでNetscape社が開発しました。 当時人気だった言語 Java にあやかって、JavaScript と名付けられました。ちなみに JavaScript は Sun Microsystems, Inc.の登録商標しているので、JSと呼ぶのが好ましいです。 JSはHTMLのなかに記述することで、Webブラウザ上で実行されます。ボタンをクリックしたらシュルシュル〜〜と上にページがスクロールしたり、Webサイトなどに動きやインタラクティブ（対話型）な実装ができるのが魅力です。 また、Netscape社とMicrosoft社による実装には若干の違いがあり、ECMA によって ECMAScript として標準化されています。 現在のバージョンは2019å¹´6月に公開された10が最新です。毎年公開されているようです。ツライ。 ES6(ECMAScript2015)で破壊的なくらいいろんなものが変わって「あわわわっ」てなったと、記憶しています。 こんな話をしているとゾッとしてしまうのでもうやめましょうw 昔はクライアントサイドで使う言語でしたが、2010年以降 Node.js の登場でサーバーサイドでも使えるホットな言語になりました。 現在はSPAとか作れるエンジニアなどがとても人気があります。 JSでできることをもっと掘り下げる 目的を履き違えて使うことほどナンセンスなことはないので、まずはJSでできること、得意なことをを理解しておきましょう。 アニメーション ユーザーのアクションに沿った処理 フォーム操作 画像・音声・動画の取り扱い ローカルデータを取り扱う とりあえず、JSを書いてみようぜ！ JS を書くためには Web の仕組みを知っておきましょう。 HTML や CSS、画像は一回一回サーバーにこのデータ欲しいから見せてーってリクエストというものを送ります。それに対してサーバー側からこのファイルだねーっていうレスポンスが返ってきます。 HTMLはWebブラウザに表示されるために上から順番に読み込まれていきます。JS は CSS 同様、コードが長くなって邪魔なので外部ファイルで読み込むのが一般的です。 JS は HTMLの中で実行されます。HTML、CSS などを解析されて初めてWebブラウザにWebサイトがレンダリング（描画）されますが、JSが変なところで読み込まれると、解析が始まってしまいページのレンダリングが阻害されてしまうことがあります。なので以前はレンダリングの阻害を避けるため、の閉じタグの手前あたりに書くのが主流でした。 ES6以降、読み込むタイミングを最適化する async と defer という属性が登場し非同期で読み込まれるようになりました。async は即時実行されるのに対し、defer はHTML解析後、読み後に実行されます。 なので要素の操作をしたい場合は積極的に defer 属性を付与すると○。 さて前置きが長くなりましたが、以下のようにファイルを早速作ってJSを書いてみましょう。 カンタンですが、警告ダイアログというものを使ってみましょう。 警告ダイアログに表示したいオプションの文字列または、文字列に変換されて表示されるオブジェクトです。 window とはDOM文書を収めているウィンドウのことで、実際コードを書くときは省略することができます。 以下のような感じで、ご自身のディスクトップにディレクトリとファイルを作ってみましょう。 プログラミングの第一歩でもある「Hello World」を一度出力してみましょう。 ファイル構造 index.html index.js まとめ とてもカンタンではありますが、プログラミングの大切な第一歩です。 プログラミングを始めた方は特に以下をしっかり気をつけてください。 イãƒ

1³ãƒ‡ãƒ³ãƒˆã‚’きちんと揃える 半角を全角にしないように気をつける 綴りを気をつける 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry340","title":"Webクリエーターを目指すリスタート組の君たちへ リターンズ","date":"2019-09-21","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2019/entry340.webp","description":"ここ数年、縁あって職業訓練校の講師としてWebクリエータを育てていました。これから目指す人、学ぶ人、業界に飛び込む君たちへの想いを、個人の一意見と責任を持って綴ろうと思います。","tags":["講師","キャリアアップ・転職"],"body":"ここ数年、縁あって職業訓練校の講師としてWebクリエータを育てていました。 職業訓練校を経て、5年以上経った今フロントエンドエンジニアをしている私がWebクリエータを目指すリスタート組の君たちへ贈りたいリアルなメッセージを綴りました。 私個人の意見なのでご了承の上お読みください。 限界を自分で決めたらそこで終わり もう30代だからとか言う人いますが、まあ関係ありませんね。私自身が30才過ぎてエンジニア未経験で転職して今フロントエンドエンジニアとして働いているのですから。 たくさん案件も手がけました。技術責任者でもありました。自慢じゃありませんが、いまだに私に仕事をしてほしいと言うお客さんもいます。ありがたいですね。 誰だって最初があるもんです。私だって始めた当初はもうそりゃへなちょこでショボいのなんのって今思い出しても目も覆いたくなるような黒歴史持ってますよ。 それでも小さなハードルを一個づつ超えることができれば人は成長するものなので不思議です。 自らちっこいハードルを用意する 私は今でも「一案件に一個挑戦する」と決めています。新しい技術を取り入れたり、今まで使ったことのないCSSのプロパティを使ったり。 挑戦することはいいことではありますが、今10できるところを急に100やるのは無理です。 挑戦してできなければ心も折れちゃいます。 なのでほんの少しだけチャレンジ、確実にこなして実力と自信に変えていくといいと思います。 転職は恥じゃない。むしろ武器にしてほしい 日本では転職を繰り返している人に対して、「続かない」「飽きっぽい」と言う偏見を持っている人もいます。 私は全くそうは思いません。前職での経験は武器になるはずです。 美容師からWeb制作会社の経営者、ホストからのWebクリエイター、バーテンダーからのWebマーケッターなどいます。 コミュ力など前職で得たスキルをフル活用して活躍しています。 前職でのスキルを足し算にしてハイブリッドな人材になってほしいものです。 プログラミングは難しい 正直、プログラミングって難しいと思います。 難しいから給料が良かったり、人材が少ないのかもしれません。 決して賢い人しかできないということではないです。 身に着けるためにはコツコツ続けることだと思います。 コードに慣れること。エラーを恐れず、冷静に原因を探ること。リファレンスを読めるようになること。 最初から派手なことをしようとせず、小さな処理からコツコツ書いていくこと。 そんなことを繰り返しやっているうちにできるようになります。 コードを書いているうちにだんだん半角数字と全角数字が混じった文章を見るだけで気持ち悪くなります。 だんだん、理論的思考が身につきAが駄目ならBみたいに先回りしたクールな考え方が身についていきます。 学習にかけた時間とお金は、身につけた技術で必ず将来取り返せ プログラミングを勉強したい人すべてに言いたいことは一つ。 「学習にかけたお金は必ず身につけた技術で取り返してほしい」 プログラミングスクールの受講料は安くないはず。 私は生徒さんがこの受講料を捻出するために、貯金したりなどいろんな努力をしていると想像しています。 みんな、人生を変えたいから通ってるから。 私の仕事は「この業界で飯が食えるスキルやマインドを身につけさせる」ことでã

1™ã€‚今は無理でも、そのタネを渡せたら彼ら次第ですがいずれ実らせることができると信じています。 この気持ちは広島での職業訓練校での講師をしていた時と変わっていません。 スキルがあれば、その会社が気に入らなきゃ別に移ることもできる。 スキルがあれば、起業もできる。 スキルがあれば、たまに投資したいと言ってくれる人も現れる。 要はスキルがあればどこでも食っていける。 給料だけでなく選ぶ権利と自由が手に入ります。 これは身にしみて感じています。 何をするかも大切だけど、誰と働くかも大切 これから就職活動をする人もいると思います。あるいはフリーランスになるかもしれませんね。 少し考えてほしいのは、誰と働くかということです。 私は仕事はカンタンじゃないと思います。やりがいはありますが、しんどいことも多いです。 だからこそ、この会社の人と一緒に戦えるだろうか？ということを考えてほしいのです。 一緒に苦楽を共にできない人といては士気も下がる。 一緒に戦える人がいる場所を探してください。 人は働いているうちは1日の大半を仕事して過ごします。その時間が楽しくて仕方ない。苦しくても乗り越えられたら人生はハッピーです。 そんな会社との出会いを願っています。 最後にエールを 将来みなさんとこの業界で出会うことを楽しみに待ってます。","noindex":true},{"slug":"entry339","title":"たった1pxの気遣いでWebサイトは見違える","date":"2019-09-10","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2019/entry339.webp","description":"最近、久々にプロのWebデザイナーの仕事（デザインカンプ）をみて感動しました。そこで私が普段、1px単位で気をつけていることを書き記してみました。わずか数ピクセルで見やすさ、余白の心地よさが変わります。","tags":["デザイン","UX/UI"],"body":"最近、久々にプロのWebデザイナーの仕事（デザインカンプ）をみて感動しました。 そこで私が普段、1px単位で気をつけていることを書き記してみました。わずか数ピクセルで見やすさ、余白の心地よさが変わります。 良いデザインカンプと出会うとヨダレが出そうになる 普段仕事をしていると、いいデザインカンプに当たるとやったね！て思います。 デザインの良し悪しって余白の開け方で決まるといっても過言ではないと思います。 デザインカンプデータを開いたとき、きちんとガイドを引いたり計算機を叩いて余白を決めている形跡を見ると清々しい気持ちになりますね。感覚に頼らず、アスペクト比も4:3とか16:9を計算してくれているとなおのこといい気分になります。 Webサイトにはレスポンシブデザインといってディバイスやウィンドウ幅でデザインがレイアウトやサイズが変わるものもあります。レスポンシブデザインは今やWebデザインの主流です。 この仕組みを理解してないとなかなかいいデザインカンプはできないし、再現が難しいものになります。 Webと紙のデザインは似ているけど非なるもの 長い間紙のデザインやっている人で仕事の幅を広げたくてWebデザインを始める人がいます。 正直、そんなにカンタンではないと思います。 Webと紙のデザインは色の出力の仕方がそもそも違う。だから色の設定から違います。 そして1px以下のサイズは作れません。ブラウザによっては細かい色は表現できないこともあります。そして、A4サイズのようなものはなく異なるディバイスサイズに対応しないといけないということ。 ファーストビューに大

1切な要素を詰め込む必要があること。 フォントの混植はできない。検索エンジンに解析させるために画像よりテキストの方が大切。 などなど挙げればきりがありません。紙に比べてたくさんの制約があります。 RGB（光の三原色）や単位がpxであることはもちろん、カーニングできないことなどWebサイトの仕組みを知っておくべきです。 何度か自分の作ったデザインカンプをコーディングしたら気づくと思います。 Webサイトはユーザーがコンテンツ（情報）を得る場所 Webサイトの目的って情報を伝えることだと思っています。なのでユーザーにとって、Webサイトの使いやすさやコンテンツの読みさすさはとても重要だと思っています。 ユーザビリティとアクセシビリティです。 これは紙にも共通してますね。 日本人の男性の5人に1人は何らかの色覚障害を持っています。誰しもが読みやすいか考慮しなければなりません。 たとえば、主要テキストをとってみても以下があげられます。 黒がキツ過ぎないか(#000とか使わない) 明る過ぎないか（白黒印刷して一体化していたらダメ） 行間(line-height)は十分取れていて読みやすいか 文字サイズは十分読めるサイズか？(推称16px) 変な色使ってないか？（一部の色覚障害者には認識できない色もある） 小さな見出しと段落などの行間にも気を遣う ユーザーのコンテンツを読むときの心地よさは、たかだか数ピクセルで実現できたりします。 たとえばこんな見出しと入力項目があるとします。 デザインに近接という手法があります。本来であれば同じグループであればくっつけますがほんの少し、5px 前後間を開けるだけで可読性が上がります。 こういった小さな気遣いの積み重ねで良いサイトが出来上がります。 おまけ・スーツの法則 無駄に色数が多いと事故（カオスなWebサイトが出来上がる）が起こります。 メインカラー70%（ジャケット）、サブカラー25%（シャツ）、アクセントカラー5%（ネクタイ）を心がける。スーツと同じ割合になるようにするとバランスがいい感じになるはず。 あと困ったら、同系色（ピンクと茶色など）と無彩色（白黒グレー）を使う。色相や明るさ、彩度を揃える。 そうすれば少なからず事故は防げる。 まとめると 1pxの気遣いが良いサイトを作ります。だから数ピクセル単位で配慮する必要があるんです。 デザインカンプを作るときは感覚に頼らずガイドを引く。PCのそばに計算機などを置いておく。出来上がったら一度白黒で変換して確認する。 ちょっとした気遣いの積み重ねが仕事の質をグッと上げる。 プロであるほどこういうところに気を使っていると感じたのでこんな記事を書いてみました。小さな仕事にでもそういったところは滲み出るものですね。","noindex":true},{"slug":"entry338","title":"【実録】古いSEO手法でブラックハットをでペナルティを食らったサイトを改善させた話","date":"2019-08-03","modifiedDate":"2023-01-22","category":"seo","categoryName":"SEO対策・デジタルマーケ","ogImage":"/thumbnail/2019/entry325.webp","description":"被リンク購入のブラックハットでペナルティを食らったサイトの運用。古いSEO手法のせいで 80位以下 だったボロボロに傷ついたサイトを 10位以内まで改善したお話のダイジェストです。どうやって立ち直らせたか解説します。","tags":["Web解析Google","検索エンジン"],"body":"突然ですがみã

1ªã•ã‚“、被リンク購入のブラックハットでペナルティを食らったサイトの運用を任されたことはありますか？ 私は過去つとめた会社で、運悪くブラックハットでボロボロのサイトに出くわしたことがありました。 古いSEO手法のせいで 80位以下 だったボロボロに傷ついたサイトを 10位以内まで改善したお話をまとめました。 ※ 実際の会社名や案件に関してはコンプラ上、名前を伏せてお話を進めていきます。 調査：最初はまったくブラックハットが使われているとは気づかなかった ソースコード、コンテンツ、サイトマップ、Analytics、search console でごくごく当たり前のことを調べました。 調べれば出るわ出るわ、悪質なSEO手法。 安易なSEOその1：お問い合わせ見出しがすべてh1 ほぼ全てのページにお問い合わせフォームがあり、その「お問い合わせ」という見出しが h1（大見出し） でした。 h1 は SEO というかサイトの構造上、大切な要素。 スポーツ新聞を購入する時、一番に見るのはでっかい見出し。興味のあるコンテンツが書かれているかここで判断しますよね？ 誰が「お問い合わせ」っていうタイトルに対しての内容に興味ある？ ぶっちゃけて アホか！！！ とツッコミを入れたいレベル。 安易なSEOその2：コンテンツが限りなく薄っぺらくて雑 すべてのページ、見出しが違うだけでコンテンツが一緒でした。ページ数が多ければいいわけじゃない。 Google は人に役立つ、有用なコンテンツを評価するとガイドラインでも言うとるがな。 ひどすぎる：悪質（ブラックハット）なSEO対策 いかがわしいサイトから大量に被リンク貼られていました。 search console で見れば一目瞭然です。 昔は被リンクさえ多ければいいということで、リンクが売買されてました。 個人ブロガーでも「相互リンクお願いしまーす」と気軽に声かけるする人もいました（やっちゃダメ）。 今は通用しません。Google は頻繁に検索エンジンのアルゴリズムをアップデートしています。 意図的に貼られた不自然な被リンクを検索エンジンは見抜く 被リンク先が悪質なサイトであれば、リンクされているサイトの評価も下がる 自然にかつ良質なサイトからの被リンク数が評価に繋がるのでこれ、完全にアウトです。 ブラックハット・未だに被リンクの売買がされているらしい 昨年の10月時点ですが、そのようなお話も聞けました。結構大手でもやってるらしいですね。 被リンク、 絶対買っちゃダメ Google のエンジニア、桁違いに優秀です。 ちょっとやそっとの浅知恵で勝てると思いますか？ 無理です。バレますよ。やめましょ。 既存サイトの改善 まずは、既存のサイトで手を尽くせるところを洗い出しました。 クライアントファースト。すぐにリニューアルするのではなく、今できることを提案するのが先決。 サイトの軽量化 なので JS、CSS、画像を圧縮し徹底的に軽量化。 他の運用サイトでもこれやってみて順位が20位近く上昇した実績も。 セマンティクスに一部コードを書き直す マークアップエンジニアは意味のあるタグを選んで、コーディングします。 検索エンジンはタグを見てここは「ナビだ！」とか、「記事だ！」とか判断していますから。 私はリーダブルにするためにもコーディングするとき、結構見出しに気を使います。 健常者であれば視覚的にコンテンツは読めます。でも、そうでない方はリーダーを使って、見出しを見てそれ以降のコンテンツが興味あるか否かを判断します。 そして、いつも心がけてるのがリストタグを適切に使用すること。 プレゼンの時も箇条書きのように言いたいことを列挙すると聴衆が理解しやすいです。 記事を追加できるようにする もともとあったニュース機能を利用して、記事を投稿できるようにしました。 このサービスを使ったらどんなことができるかなど、ユーザーに有用な情報を提供できることは評価につながります。 ペナルティから回復するためにリンクの否認 まずはいかがわしい被リンクとおさらばしなければいけません。。。。 なので、被リンクを外す「リンク否認」の作業をしました。 本来の被リンク作業は以下。 リンクされてるサイトに削除依頼を依頼 それでもダメなら最終手段ã

1§ãƒªãƒ³ã‚¯å¦èª リンク否認は search console から行えます。でも、前の制作会社が分からなくて依頼すらできないことも。なのであくまで最終手段ということをお忘れなく。 やっぱリーサルウェポンはリニューアル UI/UX の手法を使う ソースコードを徹底的に書き直す。UX/UI がそもそもイケてないからマズイんですよね。 ということで、ペルソナを立ててカスタマージャーニーマップなどの UX/UI 手法でコンテンツの動線を改善します。 この事例ではコンバージョンの一つがお問い合わせだったのでお問い合わせボタンへ誘導するデザインとコンテンツの組み立てを試行錯誤しました。 モバイルファースト、レスポンシブ化 もともとのサイトは PC とスマフォでデザインが分かれてました。コンテンツの更新の手間も二倍です。なので、レスポンシブ化してコンテンツの更新を PC とスマフォ両方しなくても済むようにして更新の負担を減らした。 保守する側（我々）の負担も減りました。 構造化データで検索エンジンに適切に情報を伝える 検索エンジンに適切なサイト情報が解析できるように調整しました。 ユーザーに有用なコンテンツを追加 クライアントからヒアリングして、ユーザーがこのサイトに訪れた時に知りたそうなコンテンツを増やす。 今までオラオラクライアント目線で作られていたサイトをユーザーの知りたいコンテンツを載せることで、ユーザーファーストなサイトに生まれ変わらせました。 このサイト改善をまとめると 本当にそんなことー？といくらい、、、 当たり前のことしかしていません！ 当たり前のことを、丁寧にやるだけです。それが一番大切。 クライアントのサービスを利用したい人にとって有用なコンテンツを増やす サイトの導線（ユーザビリティ）や表示スピードの改善 クライアントのサービスのイメージにあったデザインにリニューアル クライアントとコミュニケーションをとる 抜け道や魔法のようなギミックはない これをやったら一位になるような魔法はありません。あるとしたらそれはズル。つまり、ブラックハット（Google のガイドライン違反）です。被リンクの購買など、ブラックハットを勧めるような SEO 業者と付き合うとその負債はあなたの所有するサイトのドメインが背負うようになります。 Google のガイドラインに沿う ユーザーのことを考えてコンテンツを作る ズルをすれば裁かれる クライアントとの信頼関係 苦しかったからSEOのでっかい勉強会を開催した 2018年、SEOのでっかい勉強会を開きました。私のわがままをみんな聞いてくれ、助けてもらってとても良い勉強会を開催できめちゃめちゃ感謝してます。 そもそも、この勉強会を開こうと思ったきっかけがあります。 古いSEO手法のせいで80位以下だったボロボロに傷ついたサイトを10位以内まで改善するのがめちゃめちゃ大変だったからです。 今だから言えますがサイトを開けてみた時、ホントヤベーと思いましたね。 広島フロントエンド勉強会 Special 2018 『Googleに聞きたい！ 検索エンジンQ&A』 SEO対策を依頼するクライアントの気持ち考えたことありますか？ SEO業者ってうさんくさくないですか？ はい、気持ちわかります。 ぶっちゃけて、コンサルとか言ってる人、 ろくなヤツに出会ったことがありません！！ （中には仲のいい信用できる人もいます） 私は以前たまたまSEOに特化したWeb制作会社にいましたが、SEO対策を依頼されるのってとても大変です。 クライアントもクライアントで依頼しつつ疑心暗鬼から入ることがあります。 クライアントも自ら勉強しますし、様々なSEO対策の業者に知識を植え付けられることもあります。 順位を保つために「記事を更新しなければ！！！」と焦燥感にかられる、ブログ中毒のクライアントもいます。 ケースバイケースですが、世に出回った都市伝説的なSEO対策の知識が蓄積されていることもありますね。 当時は苦しんでるんだなーとひしひしと感じて仕事してました。 この時のクライアントも半分「SEO対策頼んで大丈夫何だろうか？」そんな気持ちだったのだと思います。 最後に 今回、スライドをこの記事に起こしたã

1®ã«ã¯ç†ç”±ãŒã‚ります。 Google の金谷氏曰く、未だにこのブラックハットをする業者がいるそうです。これは、ユーザーの SEO への間違った知識が定着しているのも一因とのことでした。 金谷氏は SEO に対するユーザーの知見が変わればという想いで、広島での SEO勉強会への登壇を快く引き受けてくださいました。 最近忙殺されて SEO の勉強はサボりがちでしたが、引き続き頑張ろうと思います。 Webコンテンツが大好きだからね！！ 元ネタはこちら 古いSEO手法のせいで80位以下だったボロボロに傷ついたサイトを10位以内まで改善したお話ダイジェスト","noindex":true},{"slug":"entry337","title":"Contact Form 7 で必須項目のエラーメッセージをカスタム","date":"2019-08-02","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2015/entry235.webp","description":"WordPressサイトだけでも月1くらいのペースで制作しています。よく、フォーム系のプラグインのお世話になります。中でもContact Form 7はお気に入りでめっちゃ奥が深いですね！カスタマイズする時こころおどります！今回は発想の転換で必須項目のエラーメッセージを変えたのでそのやり方をメモしておきます。","tags":["WordPress"],"body":"WordPressサイトだけでも月1くらいのペースで制作しています。 よく、フォーム系のプラグインのお世話になります。中でもContact Form 7はお気に入りでめっちゃ奥が深いですね！ カスタマイズする時こころおどります！今回は発想の転換で必須項目のエラーメッセージを変えたのでそのやり方をメモしておきます。 そもそも、管理画面側で入力項目を必須にする必要はない ウェブ制作でプライバシーポリシーが重要な昨今、プライバシーポリシーへの同意ってめちゃ大事です。 単純にプライバシーポリシーに同意するという項目にチェックを入れてなかった場合に、送信できないようにしたかったのですが contact form 7 では必須項目でのエラーメッセージは全て一緒です。 ちょっとユーザーに対して優しくないのでチェックがない場合エラーメッセージを変更しようと考えました。 ズバリ、最初から管理画面で必須にせず、エラーメッセージをコントロールするだけ。 fuctions.php に addfilter で wpcf7validate にフックするコードを書けば OK。 以下のコードの例は、checkboxです。 以上です。","noindex":false},{"slug":"entry336","title":"【2026】VS Codeで正規表現置換・検索を使い倒す。コピペでテキスト処理を制するチートシート","date":"2019-07-21","modifiedDate":"2026-06-15","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2019/entry336.webp","description":"VS Code（Visual Studio Code）で正規表現を使った置換・検索をマスターし、不毛な手作業を数秒で終わらせるための実戦チートシート。単一・複数ファイルの一括置換や細かい絞り込み方法、実務の現場で即コピペして使える正規表現の具体例を淡々と網羅。","tags":["VS Code","正規表現"],"body":"大量のテキストデータやソースコードの修正って面倒くさくないですか？ vscode 置換 および vscode 正規表現 を検索と組み合わせるだけｄ、大量なテキストなどを一瞬で 一括置換 ！作業効率が縛上がりです。 この記事では、VSCode での vscode 検索 正規表現 の基本操作（ショートカットキーや範囲選択）から、複数のファイルを対象とした処理、そして実務でそのままコピペして使える vscode 正規表現 置換 のチートシートを紹介します。 ※ 使用ツールはVS Codeを前提とします。基本機能については以下の関連記事を参考にしてください。 単一ファイル内での置換・検索の基本 cmd + F（Win: Ctrl + F）で検索、cmd + opt + F（Win: Ctrl + H）で置換ボックスが開きます。 | 項目 | 役割・機能の解説 | 操作方法 / ショートカット | | ---------------------------------- | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | | 大文字と小文字を区別する（Aa） | アルファベットの大文字・小文字を厳密に区別して検索します。 | クリックで切り替え（Alt + C / Mac: Cmd + Option + C） | | 単語単位で検索する（AbI） | 部分一致を排除し、完全に独立した単語として一致するもののみを検索します。 | クリックで切り替え（Alt + W / Mac: Cmd + Option + W） | | 正規表現を使用する（.*） | 特殊文字（メタ文字）を使った高度な検索パターンを有効にします。（※チートシートを使う時は必ずON） | クリックで切り替え（Alt + R / Mac: Cmd + Option + R） | | 件数 | 現在マッチしている件数と、選択中の位置（例：1 / 2件）を表示します。 | （インジケーター表示のã

1¿ï¼‰ | | 頭文字を大文字にする（AB） | 置換後の文字列の先頭を自動的に大文字に変換して置換します。 | クリックで切り替え | | 1個だけ置換 | 現在選択されている（ハイライトしている）1箇所のみを置換します。 | Enter（置換入力欄で押下） | | すべてを置換 | ファイル内でマッチしたすべての箇所を一括で一瞬に置換します。 | Cmd + Alt + Enter（Windows: Ctrl + Alt + Enter） | 複数のファイル内での置換 cmd + shift + F（Win: Ctrl + Shift + F）で全体検索、cmd + shift + H（Win: Ctrl + Shift + H）で全体置換が開きます。 上部メニューについて左から解説します。 1. 更新… 検索結果を最新の状態にリフレッシュします。 2. 検索・置換ボックスをクリア… 入力されている文字列をすべて消去します。 3. 新しい検索を開く… 既存の検索結果をキープしたまま、別の検索タブを新しく立ち上げます。 4. 折りたたみと展開の切り替え… ファイルごとにグループ化されたマッチ結果の表示を一括で開閉します。 結果をエディター画面に表示できます。マッチした個所やファイルの数だけでなく、その前後行をハイライト付きで一覧表示可能です。 複数ファイルの検索・置換での細かい絞り込み ちょっとわかりにくいんですが...複数ファイルの検索・置換画面では【…】ボタンをクリックするとさらに 入力フォーム が出現します。 さらにどんなファイルを対象にするかなど設定でき、細かく絞り込めます。 含めるファイル 対象とするファイル名を入力します。 「」（ワイルドカード）を使うと、特定の 拡張子* のファイルが探せて便利です。 たとえば、.css、.scss、*.htmlという3つのファイルを探したいとき、,(カンマ)で区切ります。 除外するファイル 除外するファイルに省きたいファイルを設定すると、検索・置換の対象から外すことができます。 歯車マークを押すと除外したいファイル名を入力した状態で除外するかどうかを切り替えられるので便利です。 こちらも使い方は含めるファイルと一緒で複数あるときは,(カンマ)で区切ります。 すべてまとめるとこんな感じになります！ よく使う正規表現 正規表現で使用する特殊文字は以下の通りです。正規表現では「メタ文字」「メタキャラクター」と呼びます。 | メタ文字 | 説明 | 記述例 | 結果 | | -------- | --------------------------------- | ----------- | -------------------- | | ^ | 行頭 | ^abc | abcから始まる文字列 | | $ | 行の終わり | xyz$ | xyzで終わる文字列 | | \\\\| | または（OR） | jpg\\\\|jpeg | jpgかjpeg | | | 直前の1文字の0回以上繰り返す | 0 | なし 0 00 000など | | + | 直前の1文字の1回以上繰り返す | 123+ | 123 1233 12333など | | ? | 直前の文字あるかないか | jpe?g | jpegかjpg | | [] | 指定された文字集合のいずれか1文字 | [0-9] | 0〜9のいずれかの数字 | | [^] | 指定された文字集合以外の１文字 | [^0-9] | 0〜9以外の文字 | | () | 一つのまとまり、グループ | (123)+ | 123 123123 123123123 | | \\\\ | メタ文字のエスケープ | \\\\ | 普通に | 正規表現では空白、改行もよく使うのでまとめておきます。 | 記号 | 解説 | | ---- | ------------ | | \\\\n | 改行 | | \\\\t | ハードタブ | | \\\\s | 半角スペース | | 文字の指定 | 解説 | | ------------- | ---------------------------------------------------- | | [a-zA-Z0-9] | 英数半角小文字大文字 | | \\\\d | すべての半角数値 | | \\\\D | 半角数字以外すべて | | \\\\w | すべての半角英数字とアンダースコア | | \\\\W | 半角英数字とアンダースコア以外すべて | | \\\\n | 改行コード | | \\\\s | スペース（半角スペース、\\\\t、\\\\n、\\\\r、\\\\f）すべて | | \\\\S | スペース（半角スペース、\\\\t、\\\\n、\\\\r、\\\\f）以外のすべて | | \\\\t | タブ | 置換といえば()ã

1Œä¾¿åˆ© 正規表現を（）で括って検索すると、マッチした文字列を $1, $2 といったように置換後へ参照表示可能です。 たとえば、以下のようなコードがある場合： コピペで使える正規表現・時短テクニック14選 実務の現場でそのままコピペして使える、実戦的な正規表現の具体例を淡々と網羅します。 1. 改行を取り除く（1行にまとめる） 2. 2個以上のスペースやタブを取り除く 3. URLを含む特定のHTML構造を一括置換 4. 日本語の間に紛れ込んだ不要な空白を削除 5. 大文字・小文字・ケース（英字）の即時変換 6. 行頭の連番（数字・記号）を一括で取り除く 7. エクセル・スプシのデータからマークダウンやHTMLテーブルを生成 8. PHP等の比較式をヨーダ記法へ一括置換 9. すべてのHTMLタグを削除してテキストのみ抽出 10. 画像の拡張子を一括でWebPなどに変更 11. 数字を指定の桁数で0埋め（0パディング） 12. 数値に3桁区切りのカンマ（,）を自動付与 13. imgタグから画像パス（srcの中身）だけを抽出 14. 特定の文字列が含まれていない行（または含む行）を丸ごと削除 1. 改行を取り除く（1行にまとめる） いたってシンプル。 置換後の文字列は 何も入力しない・空欄 でオッケー👍️ 2. 2個以上のスペースやタブを取り除く 2個以上のスペースを取り除くときは、2通りの書き方があります。 置換後の文字列は 何も入力しない・空欄 👍️ もしタブを削除したい場合は（\\\\s）を（\\\\t)に替えればオッケー。 置換後の文字列は 何も入力しない・空欄 👍️ 3. URLを含む特定のHTML構造を一括置換 一度書いたHTMLのソースコードをWordPressなどのショートコードに置き換えないといけないことってありますよね？ そんなときはこいつだ！URLのコード（https://example.com/）は適宜変えてください。 hrefの前後に class target=\\"_blank\\" など他の属性や入っていた時も考慮しています。 4. 日本語の間に紛れ込んだ不要な空白を削除 PDFから文章をコピーすると謎の半角スペースが紛れ込んでることがよくあります。 間のスペースを取り除くだけならこんなコードでオッケーです。 置換後の文字列は 何も入力しない・空欄 👍️ 5. 大文字・小文字・ケース（英字）の即時変換 置換といえば、VS Codeには超便利な大文字・小文字変換機能（Transform）が付いています。 最初の文字だけを大文字に替えたり、スネークケース（snake_case）に変えることも可能です。 よく使う方はショートカットキーを割り当てておきましょう。 キーボードショートカット設定画面は、ショートカット Cmd + K -> Cmd + S（Windowsは Ctrl + K -> Ctrl + S）で開けます。 「transform」あたりの文字で検索をかけたら以下のように絞り込めます。 ショートカットの例。 小文字を大文字に Cmd + Shift + Option + U（Windows： Ctrl + Shift + Alt + U） 大文字を小文字に Cmd + Shift + Option + L（Windows： Ctrl + Shift + Alt + L） 6. 行頭の連番（数字・記号）を一括で取り除く ネットの記事やメモ帳からテキストをコピーしたとき、行頭に「1.」「2.」「①」「●」などの連番や記号がついていることってありますよね。 これを1行ずつ手動で消すのは面倒なので、正規表現を使って一発でキレイさっぱり消し去りましょう！ 置換後の文字列は 何も入力しない・空欄 👍️ 7. エクセル・スプシのデータからマークダウンやHTMLテーブルを生成 「このデータ、全部HTMLのテーブル（表）に組み込んでおいて」と依頼されることがありますよね。データ量が多いと、1個ずつ や を打つのは気が遠くなるほど面倒くさいものです……。 そんな時は置換で一気に解決ダーーーッ！！！（猪木風） やり方はめちゃくちゃ簡単。まずは Excel やスプレッドシートにある、挿入したいテーブルのデータを丸っとコピーして VS Code に貼り付けます。 一見するとただのテキストに見えますが、実はセルとセルの間が「タブ（空白）」として認識さã

1‚Œã¦ã„る状態になります。今回はこの特性を利用して、一瞬でHTMLの表コードに変換していきます。 ちょっと手間ですが、二段階で変換します。 HTMLの場合 先に始まりと終わりにタグを設置。 タブをタグに変換。 完成 マークダウンの場合 マークダウンもほぼ一緒 タブをタグに変換。 8. PHP等の比較式をヨーダ記法へ一括置換 他でも使えそうですが、通常のコードをヨーダ記法（定数を左辺に置く記述順）などに書き換えたい時の置換方法です。演算子を挟んで左右の中身を入れ替えます。 💡 置換後に「$」という文字を残す理由 置換後の文字列にある $$$1 という記述に「おや？」と思ったかもしれません。 VS Codeの置換画面では、$ という文字そのものを出力したい場合、$$ と2つ重ねて書くというエディタルールがあります。 今回は、文字としての $（$$）の直後に、後方参照の $1 を合体させているため、結果として $ が3つ並んだ $$$1 という形になっています。この仕様さえ覚えておけば、PHPの変数（$から始まる文字）を絡めた複雑な入れ替えも自由自在にコントロール可能です。 ヨーダ記法に関しての詳しい解説はこちら。 9. すべてのHTMLタグを削除してテキストのみ抽出 最近どうしてもHTMLから文字だけ抽出したいケースに出くわしました。 置換後の文字列は \\\\n などにしておき、あとから置換で一つまとめると取り扱いやすいと思います。 ただ、これだと改行だらけになるので後ほど置換で1こだけにします。 10. 画像の拡張子を一括でWebPなどに変更 古いソースコードの画像をWebpにした場合、一気に置換したいですよね？ jpe?gとすることでjpgもjpegも対象になります。 11. 数字を指定の桁数で0埋め（0パディング） まずは1桁。 2桁。 1桁、2桁を0埋め処理したい場合は、2桁が終わったあと、1桁を下記の通り実行すれば問題ありません。 12. 数値に3桁区切りのカンマ（,）を自動付与 こんなのも置換可能。 13. imgタグから画像パス（srcの中身）だけを抽出 ソースの img タグから画像パスだけ抜き取る方法のご紹介です。 img タグが一行で書かれている時のみ有効です。 一度に処理する方法を考えようと思いましたが、VS Codeが重くなるので3回に分けました。 例えば以下のようなたくさんのタグにラップされた img タグがコードがあるとします。 img タグを含まない行はすべて削除。 結果は以下のようになるはずです。 先程のケースだと img タグが他のタグでラッフされているので、その場合は手前のコードを削除したほうがスムーズに行きます。 img を a、src を href にすれば、aタグのリンクだけ抜き取れるなど、応用できます。 14. 特定の文字が含まれていない行を削除してJSONをスプシ用に加工 とあるJSONデータをスプレッドシート（スプシ）用のデータに一瞬で加工したくて、特定の文字が含まれる行だけを残して、あとは改行ごとすべて削除したときのテクニックです。 例えば、以下のような実際のJSONデータがあるとします。 まずは、必要な行だけを抽出します。 通常は ^(?!.hogehoge).\\\\n で「 hogehogeを含まない行を削除 」できますが、今回は slug と title の2つの文字列のどちらかを含む行を残したいので、正規表現の「または（ | ）」を使って以下のように指定します。 置換後の文字列は何も入力しない・完全に空欄でOKです。 次のような結果になります。 次に、行頭の空白や \\"slug\\": などの不要な記述を消去して、ダブルクォーテーションの中身（値）だけを引っ張り出します。 イãƒ

1³ãƒ‡ãƒ³ãƒˆã®ç©ºç™½æ•°ãŒç’°å¢ƒã«ã‚ˆã£ã¦ã‚ºãƒ¬ã¦ã„ても確実にマッチさせるため、行頭は \\\\s* を使って柔軟に指定するのがコツです。 結果 このままだとデータが縦一列に並んでいるため、スプシに貼ったときに別々の行になってしまいます。 そこで、「URLの末尾にあるスラッシュ（ / ）と改行コード」を起点に、スプシの横移動を意味する「タブ（ \\\\t ）」に変換して合体させます。 あとはこの結果を丸ごとコピーして、スプレッドシートにそのままペーストすれば、URLとタイトルがそれぞれ「A列」「B列」に綺麗に分かれたシートが一瞬で完成します👍️ まとめ・置換最強 この記事でご紹介したテクニックは、私が2019å¹´7月21日に執筆しました。 時代の変化や現場のコードに合わせてアップデートを重ねた厳選コード集です。 置換を制すればコーディングやデータ加工の効率は爆発的に上がります。 AIも意外と間違えるんですよね汗 なので、検証に検証を重ねてちゃんと動くかチェック済みです！ この記事が皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry335","title":"CSSの変な仕様あるあるを力一杯列挙してみた","date":"2019-07-20","modifiedDate":"2026-03-26","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2019/entry335.webp","description":"CSSってムズくないですか？マジで。多分初心者がつまづくであろう、なんでこーなるの？！をまとめます。思い出したら随時更新しようと思います。","tags":["CSS"],"body":"CSSってムズくないですか？たくさんつまづく初心者を見てきました。 一見初学者には 理不尽なまでに意味不明なクセ がたくさんあります。 高さはコンテンツ量によって無限に伸びる特性があります。なので、CSSプロパティも横方向に対しては親切で縦方向に対して無頓着な仕様になっています。 なんでこーなるの？！を元エンジニア講師の私がわかりやすくまとめます。 折りたたみマージン マージンという厄介なプロパティがあります。上下にあるとなぜか重って相殺されます。 慣れない人からするとめちゃめちゃ混乱することでしょう。 画像要素に aタグとかでラップすると下に隙間できる マークアップ言語は英語圏の人が作ってます。imgタグはフレージングコンテンツ、つまり文字列のような振る舞いをします。 これを回避するためのコードはこちら。 画像のアスペクト比がおかしい 昔の香港ムービーのように画像のアスペクト比がおかしいサイトがあります。 その場合は以下のコードで回避しましょう。こうしておけば高さの比率を保てくれます。 ついでに、バナーなどウィンドウ幅や親タグよりデカくてはみ出してることがありますので、それを回避するために、imgタグの初期値として以下を設定しておきましょう。 「画像要素にaタグとかでラップすると下に隙間できる」を回避したいので以下のようしておけば無駄がありません。 もしくは要素を dislplay: block; にすれば、インラインな振る舞いがなくなります。 画像のアスペクト比について追記 ZEST2007miniさんよりobject-fitあるじゃないかーとのことでした。 私のブログはできるだけIEをカバーした内容で書くように心がけてるのですっ飛ばしてました。object-fit-imagesというJSを使えばIE対応可能だそうです。 object-fit-images CSS プロパティ object-fit について img や video コンテナーにどのようにはめ込むかを設定するプロパティ。 | 値 | 詳細 | | ---------- | -------------------------------------------------------------------------------------------------------------------- | | contain | アスペクト比を維持したままコンテンツボックスに収まる。アスペクト比が合わない場合は余白ができる。 | | cover | アスペクト比を維持したまま、要素のコンテンツボックス全体を埋める。アスペクト比と合わない場合は、画像が切り取られる。 | | fill | オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は引き伸ばされます。 | | none | 置換コンテンツは、拡大縮小されません。 | | scale-down | オブジェクトの実際のサイズが小さいほうを採用します。 | パディングの縦方向を%指定したら変な値になる パディングの縦の挙動が不思議。なぜか横幅を参照して算出してくれます。 なので、それを利用して Google マップや YouTube などの iframe をレスポンシブ化できます。 アスペクト比16:9の場合、以下のようなコードになります。 9 ÷ 16 = 0.5625 なので 56.25% になります。 高さを 100vh 指定したら、iPhone の Safari で見るとフッターメニュー分隙間ができる 高さを 100vh 指定したら、iPhone の Safari で見るとフッターメニュー分隙間ができる アンドロイドで明朝体が使えない 機種依存でも明朝体は品があっていいですよね。アンドロイドユーザーってなんでみんな変なフォント使ってるんでしょう？使いたければWebフォントで代用しましょう！ 游ゴシック、游明朝IEでバグる もうメイリオ使いましょう。以下のようにハックすればOK。 パディングが要素からはみ出す CSS をリセットするときにボーダーもパディングも内側に含めましょう。 クリアフィックス、、、、やめましょ 親要素に擬似要素（::beforeと::after）を無理くり追加してfloat解除するのやめましょ。 もうすでに使える便利な CSS のレã

1‚¤ã‚¢ã‚¦ãƒˆãƒ¢ã‚¸ãƒ¥ãƒ¼ãƒ«ã¯ã‚ります。 現時点では flex を積極的に使って、IE の利用者が格段に減ったら grid を使いましょう。 それにしても Win ユーザーってなんであんなに頑固にIEを使い続けるんだろう。。。。ラストモヒカンすぎて涙がちょちょぎれます。 まとめ 現時点で思いつくだけの CSS の変だなーと思うところと回避方法を書いてみました。 思い出せたらまた追記します。 皆さんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry325","title":"Webサイトの表示速度を真剣に考える","date":"2019-06-21","modifiedDate":null,"category":"seo","categoryName":"SEO対策・デジタルマーケ","ogImage":"/thumbnail/2019/entry325.webp","description":"昔いた会社で、画像の圧縮、CSSなどの外部ファイルを徹底して不要ファイルを削除して圧縮してさらにワンソース化した結果、50位から20位以内に順位が改善したことがあります。今日はWebサイトの軽量化とスピードについて真剣に考えようと思います。","tags":["Web解析","Google検索エンジン"],"body":"昔いた会社で、画像の圧縮、CSSなどの外部ファイルを徹底して不要ファイルを削除して圧縮してさらにワンソース化した結果、50位から20位以内に順位が改善したことがあります。 今日はWebサイトの軽量化とスピードについて真剣に考えようと思います。 どんなにデザインがイケていても見られないWebサイトは価値がない いつも思っていますが、見られないサイトは価値がないです。 見られない原因としては、Webサイトが上位に上がってこない、つまりGoogleに評価されていないWebサイトということです。 Googleの評価とは？ ざっくりカンタンに説明するとユーザーにとって価値あるコンテンツか、ユーザー閲覧時にストレスを与えていない、この２つが主です。 この２つが評価されれば自ずと価値あるサイトと認められ、順位も上がってきます。 本日は評価対象のユーザー閲覧時のストレスについてフォーカスします。 Webサイトの表示スピードについて ユーザー閲覧時のストレスの原因の１つに表示スピードがあります。皆さんも、検索したページを開こうとして、なかなか表示されずイライラ、結果閲覧を諦めた経験があるのではないかと思います。 Googleはユーザーフレンドリーを目指してるので、表示スピードが遅いのはユーザーに優しくないサイト！ということで低評価の一因にもなり得ます。 ではどのような対処ができるのでしょう？ Webサイトで使用する画像にまずは着目して欲しい 表示スピードの低下の大きな原因の１つに画像が挙げられます。 画像の枚数が多い、画像が大きいなどが読み込みスピードに悪影響を与えています。 データ形式は適切か？まず、画像の種類にあったデータ形式かも確認します。データが無駄に肥大します。 色数の多い風景写真のようなものが形式がPNGになってないか->JPEGへ変える。 アンカーポイントが複雑かつ無駄に多い画像がSVG->PNGへ変えるなど考慮は必要です。 画像サイズは適切か？これ一番あるあるです。まんま使わずトリミングしてください。横幅5000pxとかのままであげるのマジ止めてください。最近では画像をオンラインでトリミングできるサービス山のようにあります。 画像を圧縮する 画像サイズを可能な限りオンラインツールもあります。 画像加工ソフトとかない方は、オンラインサービスを使いましょう。 I love image compress jpg Optimizilla 細かいアイコンはCSSスプライトにまとめる 細かいアイコンはCSSスプライトで一枚の画像にまとめてしまいます。 本来5個アイコンがあればサーバに5リクエストするところ、1リクエストですみます。 CSSスプライトの作り方はこちらを参考に CSSスプライトのコードは Sass の Mixin にとりあえずまとめとけ！ 遅延読み込み(LazyLoad)を使う 1ページあたりにたくさん画像があるのであれば、JSを使って画像の遅延読み込みを実装しましょう。画像ã

1®é…延読み込みとは画面をスクロールし、画像がディスプレイ上に現れた際に読み込むテクニックです。 LazyLoadなどjQueryライブラリを利用すれば比較的実装は容易です。 もちろん、画像が初期ロード時に存在しないことになります。解析されないのでSEO的に困るという場合は画像データは構造化データに入れてあげましょう。 CSS、HTML、JSなどのファイルの圧縮 改行もファイルサイズアップに貢献しています。 特にCSSは可読性を追求すると改行だらけになりますよね？ 可能であればGulpなどのツールを使えばいいのですがなかなか難しいです。 オンラインサービスで手間をかけずにやりましょう。 なので、サイトリリースの際は圧縮してしまいます。 Online JavaScript/CSS/HTML Compressor ファイルを一個にまとめる CSS、JSなどは思い切ってワンソース化しましょう。一個のファイルにまとめたら、サーバへのリクエスト数も減ります。 これもGulpを使えばカンタンです。やり方は後日まとめますね。 CMSなどの最初から用意されてる余分なファイルの読み込みをやめる WordPressなどでは、あらかじめ絵文字とか用意してありますが正直いらんです。 WordPressの場合余分なファイルの読み込みは以下で止めることができます。 ただし、フォーム系のプラグインを入れていると動かなくなることもあるので気をつけましょう。 Lighthouseでチェック ChromeのサイトチェックツールにLighthouse（Google拡張機能）というものがあります。シークレットブラウザで、使えるようにしておくことがミソです。 Lighthouse(Google拡張機能) Chromeでシークレットブラウザで使えるようにする方法は別記事にまとめます。 まとめ いかがでしたでしょうか？ 全ての項目を実施すると相当ページの読み込みスピードは早くなります。 でもコンテンツをとことん読んで欲しい時はページそのものをamp化しちゃうのが一番いい気がします。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry323","title":"オブジェクト指向プログラミングをキャバクラに例えてみた","date":"2019-06-01","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2019/entry323.webp","description":"オブジェクト指向って説明が難しいですね。どうやったら理解できるか一晩考えたら、キャバクラに例えるのが面白そうなのでチャレンジしてみます。","tags":["例えてみる","講師","おもしろ"],"body":"オブジェクト指向って説明が難しいですね。どうやったら理解できるか一晩考えたら、キャバクラに例えるのが面白そうなのでチャレンジしてみます。 何かに例えると分かりやすい 数年前SEOを恋愛に例えて、モテたきゃ出会い系や街コンでチャンスを増やすために金かけろと遠回しに言ったブログを書いたことがあります。 また合コンをABテストに例えてコンバージョン上げる方法をブログ化したこともありました。 一部の層からひんしゅくをかいつつ、概ね面白くて分かりやすかったとのご意見をいただきました。 オブジェクト指向プログラミングを何かに例えてみたい！ オブジェクト指向の説明はとても難しいです。よく車に例えた例を見ますが、とにかく頭に入ってこない。ポリモーフィズム（多様性）とか拒絶反応出ちゃう名前出すのやめて欲しい。 何に例えたら頭に入るんだろうと悩んでおりました。 実は激白すると以前、 ボーナスが出ない腹いせに熟女キャバクラでバイトしたことがあります。 大切なã

1“となので二度言います。 ボーナスが出ない腹いせに熟女キャバクラでバイトしたことがあります。 どんな経験も無駄にはなりませんね。昨晩、店長とキャバ嬢の関係性がオブジェクト指向に近いんじゃね？！とピコーーンと思いつきました。 なので遠慮なくキャバクラに例えてみることにしました。 オブジェクト指向がなぜキャバクラなのかキャバの店長の教育通りにすると、それなりにキャバ嬢が稼げるようになる キャバクラといえば見た目やスタイルが大切と思いますが、そんなことないです。 顔がポンコツ（悪口）でも稼ぐキャバ嬢はいます。 オブジェクト指向プログラミングは店長の教育に似ています。 たとえ顔がポンコツ（悪口）でも、いくつか決まり切った対応をすれば顧客は満足してお金を落としてくれるようになります。 クラスとは？キャバクラでいう店長の作ったマニュアル この教育のセットがいわゆるオブジェクト指向プログラミングでいう「クラス」に当たります。 クラスというものはキャバクラでいう売れるキャバ嬢になるための「お客様対応マニュアル」みたいなものです。 以下のような感じで、売れるための対応がセットになっています。 インスタンスとは？マニュアルに従うキャバ嬢を育成 クラスとはキャバクラの店長が編み出した売れるキャバ嬢になるためのお客様対応マニュアルと例えました。店長はマニュアルに従うキャバ嬢を育成します。 マニュアルを伝授して実行するのが新人キャバ嬢で、これをオブジェクト指向ではインスタンスと呼びます。 これで店長の教育通りに仕事をするキャバ嬢（インスタンス）が量産されるわけです。 メソッドとは？キャバ嬢が店長から伝授された売り上げをあげるための手段 キャバ嬢が連絡先を聞くのも、食事に行きたがるのも別にあなたに気があるわけではありません。リピートを取る、つまり売り上げをあげるためです。 これも彼女たちは言いたくて言っているわけではありません。目的のために用意されたマニュアルを実行しているだけです。 褒めたり気分を良くさせる 何かねだる このようにあらかじめ用意された一連のタスクをオブジェクト指向ではメソッドと呼びます。 店長の教育からねだるというメソッドを実行するだけです。 「何」（引数）をねだるのかはお客さんによって変わります。 オブジェクト指向プログラミングではクラスからメソッドを取り出し実行できます。 ちなみにクラスからはメソッド（関数）だけではなくプロパティ（変数）を呼び出すこともできます。 オブジェクト指向の三大要素って？売れているキャバ嬢の資質？ オブジェクト指向には三大要素というものがあります。 カプセル化 ポリモーフィズム（多様性） 継承 カプセル化とは？なんでシャンパンオーダーしちゃったのか思い出せる？ みなさん、もしキャバクラに行ってうっかりシャンパンオーダーしてしまった翌日、理由って思い出せますか？ キャバ嬢が可愛かったから？それとも気が大きくなっちゃったから？ 多分細かいことはきっと思い出せないでしょう。 キャバ嬢はお客さんが気分良くなるような行動を店長から教えられ（メソッド）、プログラムが機械的に処理する如くやってるだけです。 残念ながらあなたに好意があるわけではありません（キリッ）。 むしろ、やっていることがバレては夢がなくなり困ります。 こう言った隠しておきたい処理のことをカプセル化と言います。 実はキャバ嬢は綿密なテクニックを皆さんにバレないように実行しているのです。 なので細かい処理は隠しちゃいますwww どんな処理をしているかは確認できないですが、お客さんはいつの間にかシャンパンを開けてしまっているわけです。 オブジェクト指向ではこのような複雑かつ長い処理で見せなくても、もしくは見せたくないものなどを隠しておくことができます。 ポリモーフィズム（多様性）シャンパンを開けるか、プレゼントをもらうか プログラムでは同じ処理を使いたい時、書き換えなã

1„といけないことがあります。でも、似たようなコード書くのやだし手間だしもったいないですよね？ ちなみにキャバ嬢の行動に置き換えることもできます。 シャンパン開けて欲しかったけどこのお客さん無理そうだからなんか別のもの買ってもらおう。 プログラムでは、漠然としたものを抽象化（目的などを変えることができる）して実装することができます。処理や原理は一緒だけど目的などを変えることができます。 このように柔軟に処理を行うことをポリモーフィズム(多様性)と言います。 お客さんAに対して お客さんBに対して ポリモーフィズムの良さは振る舞いをケースバイケースで変えられるといったところでしょうか？ 継承キャバ嬢がお店を変わることになった場合 店舗の都合で移動を余儀無くされることもあります。 同じ系列店のキャバの店長でもそれぞれ教育ポリシーが違うことがあります。 最初にいた店長から教わったテクニックを引き継ぎつつ、新しい店長のテクニックを使うこともできます。 オブジェクト指向でいう継承です。 前の店長の教育を引き継ぎつつ新しい教育を取得することができます。 お酒を作る 延長させる ねだる 上記仮説とはいえ、むしろそのメソッド持っている店長いるなら教えてくれ！！ まとめ いかがだったでしょうか？今回はオブジェクト指向プログラミングを無理くりキャバクラに例えてみました。 めんどくさいゴタクを並べましたが、オブジェクト指向で一番ステキだと思うのは使い回しできるということだと思います。エコロジー！ 最初から頭でっかちに理解することに注力するより、とりあえずやってみて動かして感動してみてはいかがでしょう？ 理解していなくても仕事できる人は山のようにいますから^ ^ 二、三回コード書いてオブジェクト指向ナンジャラホイ？って記事読んでみた方が多分「なるへそーっそういうことか」ってなります。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry321","title":"イカれたポートフォリオ作ったら、ナンパされたので転職してセブ島まで来た話","date":"2019-05-05","modifiedDate":null,"category":"overseas-freelancing","categoryName":"海外ノマド生活","ogImage":"/thumbnail/2019/entry321.webp","description":"セブ島来て1ヶ月経ちました。ヘッドハントされてセブ島に来たのでその経緯について綴ります。","tags":["セブ島エンジニア生活","キャリアアップ・転職"],"body":"セブ島来て1ヶ月経ちました。ヘッドハントされてセブ島に来たのでその経緯について綴ります。 ポートフォリオサイトを作ったきっかけ 私は日本にいる時、職業訓練校の先生をしていました。卒業課題をさせる時に自分があまりにもやることがなく、手持ちぶたさん。なので一緒にポートフォリオを作ってみることにしました。 いい加減な気持ちでサイトを作り始める 時間は少ないですが、ウケを狙うだけのために注力しつつサイトを作ることにしました。 でき上がったサイトはこちら。 ワイヤー兼カンプ作成 用意するものは会社におくられてくるような、セールスのファックスの裏紙のみ。 フリクションボールペンで殴り書きで仕上げます。 Webサイトは構成が大切。かと言って、時間かけるのもめんどいので、お化粧品やお布団まとめ買いにありがちなLPの構成に私というコンテンツをぶっ込んでみることにしました。 コーディングはサクッと終わらせる 2年かけて作った「かみーゆstrap」（SCSS）と、polyfillなどのライブラリを駆使してテキトーにコーディングします。 変数である程度グリッドレイアウトや余白の単位を決めてるので、かみーゆstrapを使うとよっぽど変な色をぶっ込まない限りはまともに仕上がります。しかも、bootstrapã

1¿ãŸã„に、htmlが無駄に入れ子にならないのも特徴です。さすが私。 周囲の人間にお喜びの声を書くよう強要 商品などを訴求する時に効果的なのはなんと言ってもお客様の声です。 半ば強制で周りの仲間にお喜びの声を書いてもらいました。 現在も募集中です。我こそは一捻りあるオモロイ声（苦情でも可）提供してくれる方求む。 クロスブラウザ対策（未実装） まだ未実装ですが、IEで見るとイルカが出てきてIEやめてedgeとか最新ブラウザ使うように促す仕掛けを準備してたんですがまだ実装してません。気が向いたら実装します。 なんちゃってだけどフォームも実装 Vue.js.jsで項目によって切り替わるフォームを実装しました。 実は前の会社に誘導するようにしてましたが、もうその会社は辞めてしまい言ってしまえば義理もないので今は削除してます。 さらに言うと問い合わせられたところで対応できないです。もしどうしても、どうしても何か私に聞きたければ、TwitterでDMください。気が向いたら返信します。 結局、私が転職してしまった 元々は職業訓練校の先生で生徒の就職をサポートするのが私の使命でしたが、面白半分でポートフォリオを作りなんとなく転職サイトに載っけたら、声がかかってあれよあれよと転職することになってしまいました。 人生最大のナンパ？？？ 私、 特技はナンパすることとされることと自負しております。 代表的な実績はざっとこんな感じです。 二十代の頃、薬局で二日酔いの薬くださいと言って薬剤師が困惑している姿を見て知らない人に「今から遊びに行こうよー」声かけられた。二日酔いじゃっちゅーねん 飲んでたらたまたま隣に座ったおっさんと話ししてご飯やお酒、映画のチケット奢ってもらった（日本にいるときはしょっ中） Googleの検索エバンジェリストをTwitterでナンパしたら快く広島でセミナーに登壇してくれた 自分でもこう言った不意な出会いを楽しんでいます。だから声をかけられる or かける時はワクワクしています。 きっとおもしろいヤツがたくさんいるに違いないという期待を込めて転職を決意した あのポートフォリオをみてウチに来て欲しいって言うんだからよっぽど変なヤツらがいる会社に違いないと思い、面接を受けてしまいました。 もう、古い体質の退屈な会社は飽きました。 転職が決まったあと 転職が決まった後は家財整理などめちゃめちゃ大変でした。 所有物はしがらみ。思い切って手放してしまうと身軽になる セブ島に行くにあたり、家財のすべてを手放すことにしました。処分してみると分かりますが、フットワークが以前にも増して軽くなった気がします。人間関係もしかりですが所有するものがたくさんあるだけで思うように動きが取れなくなるんだと思います。 今後はMacとトランクケース1個に入る荷物があれば生きていけるようにしたいですね。 私が死んだ後遺産整理業者は必要ないくらい何も持ってませんが、MacBook Proと一緒に埋葬していただければ幸いです。 結局、残りの人生やりたいことをやりたかった 今年子育てがひと段落しました。 私、40歳過ぎたらこれまでできなかったことを全力投球しようと前々から思ってました。 やりたいとがあるならやらないと人生は損 人間にはやりたいことを持っている人とない人がいます。やりたいことが見つからない人って本当にいるんですよ！ でももっとかわいそうなのはやりたいことがあっても人間関係や環境などのしがらみでしたくてもチャレンジできない人。つまり、諦めてる人です。 やりたいことがあって、チャレンジできるということは幸せなことなんです。なので私は常日頃、やれることはやり尽くして私の人生よかったーって死にたいと思ってます。 そんな私でもできないことはあります。私にとってのしがらみは年齢と子供です。 子育てが終わればもっとやりたいことができる。あとは年齢的なものがクリアできればOKですよね？ 日本は経営者のマインドや環境が発展途上では？ アメリカなどでのIT先進国ではIT関連の職の給料は日本よりも良いです。これはこの業種が評価されているということだと思います。思うに一つの要因として、日本はまだWeb業界新規参入したばかりなので正当に評価されてないのもあるんだと思います。 働くところによっては薄給、サービス残業当たり前、スタッフの扱いも酷いし、ホントこういうところ日本ってダメよねーと思います。 この先日本という小さなフィールドにだけ身を置ã

1„ていたらグローバル社会で生き残れない 私が日本にいた時は、IT業界めちゃめちゃ人材不足でした。きっと数ヶ月前のことだから今もそうでしょう。 人材不足はIT業界だけではないです。10年前、コンビニの店員が外国人って想像できました？都心部のコンビニ店員はほぼ外国人です。 人口は減る一方、若い人がいない。育成しようにも若者がいないんだから仕方ないですよ。そのうち新卒の希少価値があり過ぎてどの企業もこぞって獲得苦労するんじゃないでしょうか？ 日本のIT業界が深刻な人材不足だからこそ、チャンスはあります。 東南アジアの人口は増える一方で平均年齢が日本に比べ15〜20才も若いです。労働力が潤沢！！ 言語・文化の壁などの課題もあり、私にとってはすごく大きなチャレンジでしたが、せっかく巡ってきたチャンスをみすみす逃すわけにはいかない。腹をくくって行くことにしました。 その後の経過についてはまた今度綴ります！ おまけ。息子ももれなく付いてきた ちょうど大学進路を決めようとしていた息子もなんか知らんがこっちで大学行くことになりセブ島まで付いて来ちゃいました。 せっかく子育てがひと段落してもう放っておこうと思ったのになぁ笑 大学進学の手続きは無事終わり、あとは入学する日を待つばかり！ 大学の手続きが結構大変だったのでそれに関しても綴ります！","noindex":false},{"slug":"entry313","title":"JS でフォーム操作したいなら name 属性に submit をつけてはならない","date":"2019-02-21","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2018/entry268.webp","description":"フォーム操作したい時 JS で値を追加したり、操作したい時があると思います。そんな時、name 属性の命名に注意ください！場合によっては JS が動かねーから要注意です。","tags":["JavaScript"],"body":"フォーム操作したい時 JS で値を追加したり、操作したい時があると思います。そんな時、name 属性の命名に注意ください！場合によっては JS が動かねーから要注意です。 element.submit()でフォームを send できる 最近、Vue.js.js などで画面遷移することなくフォームを実装することも多くなりました。あと、リターンキーでフォームの誤送信が起こらないようにして欲しいなどという要望も多めです。なのでフォーム操作をJS制御することって多々あるもんなんです。 フォームの submit をとめる方法を考える 一定条件に満たした場合にフォームを送る時、JS で実装するときふた通りあると思います。 まずは form タグ内に input[type=submit]ボタンを設置する。条件に満たない場合、フォーム機能を止めることもできます。 もしくは input[type=submit] を使わず、特定の button もしくはinput[type=button] でクリックした時に、submit() を発火させる。 いずれかだと思います。 name 属性に submit があるだけで、JS が死ぬ 後者で操作する時、面倒なことに element.submit() は真っ先に name属性に万が一 submit があるだけで、拾ってしまって動かなくなります。 焦る必要はありません。解決法は超カンタンです。name属性の命名をsubmit_btnとか変えましょう。 終わりに 前も似たようなことで、name属性に気をつけなければならないと思いました。 たかだか、そんなもので送信ボタンは動くのでちょっと気をつければいいだけですが気をつけてください。","noindex":true},{"slug":"entry315","title":"CSS アニメーションで軽量アコーディオンメニュー（コードサンプルあり）","date":"2019-02-11","modifiedDate":"2026-03-20","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbn

1ail/2019/entry315.webp","description":"2022-01-04メンテナンス済。CSS アニメーションはjQueryに依存しないと軽量になります。今回は「detailsとsummaryタグを使う新方法（追加）」「labelとinputタグを使う旧方法」「JavaScript（jQuery不使用）も使ってなめらかなアニメ-ションをリッチに実装する方法（レスポンシブ対応のため修正）」の3パターン（高さ可変に対応したコードもあり）をご紹介します。原理を理解したい方は順を追った解説をまず読み進めてみてください。","tags":["CSS"],"body":"CSS アニメーションを駆使して軽量アコーディオンメニューの実装方法をご紹介。 jQueryに依存しないと軽量になります。今回は「detailsとsummaryタグを使う新方法（追加）」「labelとinputタグを使う旧方法」「JavaScript（jQuery不使用）なめらかアニメーションの使ってさらにリッチに実装する方法（レスポンシブ対応のため修正）」の3パターンをご紹介します。もちろん高さの可変に対応したコードも有りますので、目次を参考にしてください。 原理を理解したい方は順を追った解説をまず読み進めてみてください。 アコーディオンメニューにCSSを主軸に実装する理由 言うまでもなく、CSSアニメーションはJSのDOM操作より軽いです。 一方デメリットとしてはCSSが複雑かつコードが長くなり初学者は混乱しやすいことです。 今回は「details&summaryを使う方法」「label&inputを使う方法」「JavaScript（jQuery不使用）も使って実装する方法」の3種類を紹介します。すべて一長一短あります。 | 種類 | メリット | デメリット | | ----------------- | -------------------------------------------------------------------------- | ------------------------------------------------ | | details&summary | WAI-ARIAなどのアクセシビリティへの配慮が不要 | IE未対応。safariのバグあり | | label&input | 手軽でJS不要。ブラウザをあまり考慮する必要がない（IEすら動く） | アクセシビリティに関して不適切 | | JS | WAI-ARIAなどの記述や値の動的変更が可能。ブラウザをあまり考慮する必要がない | 学習コストが上がる。少し挙動が重くなる可能性あり | detailsとsummaryタグを使う方法（2021-01-05追記） detailsとsummaryタグ（詳細折りたたみ要素）を使えば、アニメーションの滑らかさにはかけますが、CSSすら使わずにアコーディオンを実装できます。 セマンティック（タグに意味を持たせる）コーディングという観点からもこちらのタグを使うのが良さそうです。が、問題もあります。 Safariはバグだらけで対応が大変。複雑なアニメーションは避けたほうがよさそう。 detailsタグ内ではtransformプロパティのanimationやtransition系が動かないことがある。animationを実装してみたが最初の1回だけしか動かなかった。 flexが効かない なので、こんなアイコンつけたかったけど諦めました。 detailsタグ内のsummary以降のコンテンツは開閉対象になってしまうので、アコーディオンしたいコンテンツごとにdetailタグでラップする必要があります。 最初から開いておきたい場合はopen属性を付与します。 デフォルトの~~ダサい~~アイコンを消したい時は、summaryのCSSを以下のようにセットしておきます。 パターン1：コンテンツの高さが決まっている場合 実際にアニメーションを入れます。今回はheightを指定して入れてみました。 diplay:flexも効かないので縦方向はline-heightで真ん中に持ってきてます。 デモ：detailsとsummaryタグを使う方法 パターン2：コンテンツの高さが決まっていない場合 summary以下のdivに対してのアニメーションはSafariのバグでうまくいかず。 試行錯誤した結果、summaryにCSSを追加してそれっぽいアコーディオンを作ってみました。 なかなかトリッキーなコードです。 デモ：detailsとsummaryタグを使う方法2 labelとinputタグを使う旧方法 手軽で複雑なアニメーションが CSS だけで実装できるのが label と input タグを使う方法です。 ※ IE(InternetExplore)のサポートは2022å¹´6月に終了しています。 セマンティック（意味のあるタグを使った）コーディングの観点からは非推奨です。 まずは開閉ボタンを実装しましょう！ タグにオンオフ（:checked）の状態があるタグ・チェックボックスもしくはラジオボタンを利用します。 開閉ボタンの状態がcheckedの場合はメニューが開き、それ以外は閉じている状態を作ります。 チェックボックス、ラジオボタンは自己終了タグなので中に文字列などのコンテンツを持つことができませんので、label要素を使います。 inputのid属性とlabelのfor属性の値が同じであれば label をクリックするだけで対であるチェックボックス、ラジオボタンのcheckedのçŠ

1¶æ…‹ã‚’操作できます。 チェックボックス、ラジオボタンはdisplay: noneで隠しちゃいます。 この時点ではスライドアップとダウンのアニメーションの実装はまだしません。 パターン1、開閉させるトリガーをチェックボックスに持たせる ポイントはチェックボックスの状態によって（checkedかそうじゃないか）、次の次のタグである要素の状態が変わるように操作します。 input[type=checkbox]:checked + label + div { display: block; } すべてのコードは以下のような感じです。 デモ：開閉させるトリガーをチェックボックスに持たせる パターン2、開閉させるトリガーをラジオボタンに持たせる アコーディオンにname属性を利用すれば、1つのメニューが開いてる時は他のメニューを強制的に閉じさせる実装もできます。 デモ：開閉させるトリガーをラジオボタンに持たせる スライドアップ&ダウンのCSSアニメーションの実装 アニメーションの実装にはプロパティtransitionを使います。デフォルトの状態のセレクターにのみ設定しておけばOKです。 今回は、イージングなどはデフォルトのままで秒数のみ設定しました。 アニメーションさせるのは「高さ」なので、プロパティはheightもしくはmax-heightを使います。 パターン1、アコーディオンするアイテムの高さが決まっている場合 アイテムの高さが決まっているときはプロパティheightを使いましょう。 この場合は自然で滑らかなアコーディオンが実装できます。 閉じた状態の時は高さを0にし、はみ出した部分はoverflow:hiddenで調整します。アニメーションはおよそ500ミリ秒。私はコードを少しでも短くするために単位をs（秒）にして0省略.（ピリオド）で記述することが多いです。 transition: .5s; こんなこともチリツモです。 すべてコードをかくとこんな感じになります。 デモ：アコーディオンするアイテムの高さが決まっている場合 パターン2、アコーディオンするアイテムの高さが決まっていない場合 アイテム内のコンテンツが多い時はディバイスによってもになりますが、高さがまちまちになります。 height: 0 に対してheight: autoでアニメーションを設定しようとした場合、スライドする範囲をブラウザ側で計算できないためアニメーションはしません。 なので、こんな場合はmax-heightを使います。 原理はパターン1と変わりませんので説明は割愛します。 残念な点が一つあります。 GIFアニメの通りスライドアップするとき変な間ができて不自然になること。 コンテンツが収まる高さが不明でも最大値は設定しておかないとアニメーションしません。 なのでmax-heightの最大値を100vhや9999pxなどの絶対にコンテンツが収まるサイズに設定しておく必要があるからです。 デモ：アコーディオンするアイテムの高さが決まっている場合 JavaScript（jQuery不使用）も利用してアクセシビリティも考慮しつつリッチにアコーディオンメニューを実装（2021-01-05編集） 結論。開閉のトリガーはJSに委ねて、アニメーションはCSSに任せるのが良い。 今のところ、個人的にはJSとCSSを組み合わせるのが一番いい気がします。WAI-ARIA対応（スクリーン読み込み）もできますのでアクセシビリティもいい感じです。 そして自然なスライドアップとダウンをさせるためには要素のheightの取得が不可欠です。 初期状態では要素は開いた状態にしておき、開閉する要素の高さをjsで0にしておきます。 クリックしたらインラインスタイルでheightを追加し、アニメーションする仕組みになっています。 2021-01-05にリサイズ対応。レスポンシブでも使えるようにしてあります。 デモ：JavaScriptも利用してアクセシビリティも考慮しつつリッチにã

1‚¢ã‚³ãƒ¼ãƒ‡ã‚£ã‚ªãƒ³ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã‚’実装 WAI-ARIAの取得はもちろんsetAttributeでも記述できます。 このコードではアコーディオンメニューが複数ページにあってもお互い干渉し合うことなく動きます。 今回使用した、CSS・JSのプロパティなど 今回使用したHTML・CSS・JSのプロパティなどを紹介します。 HTML:role（WAI-ARIA） アクセシビリティに関する属性です。role=\\"button\\" を追加すると、要素はスクリーンリーダーにボタンコントロールとして表示されます。 HTML:ariaなんちゃら（WAI-ARIA） aria-にはプロパティ（Property）とステート（State）状態があり、状態によって変化するものをステート（State）と呼びます。通常、ステート（State）の変更はJavaScriptで制御します。 aria-expandedを開閉コンテンツに付与するのは間違いだそう。親タグか、トグルボタンに付与しましょう。 CSS:「隣接セレクター」+（プラス）で隣合う要素に対してスタイルを指定 +（プラス）を使って、ある要素の次の要素のスタイルを設定できます。 擬似要素（hover、checked）と合わせるとカンタンにアニメーションの実装ができるのでオススメ。 selectorA + selectorB selectorA:checked + selectorB CSS:「兄弟セレクター」~（チルダ）で同列の要素に対してスタイルを指定 意外とよく使うのが ~ （チルダ）である要素と同列に並んだ特定の要素にスタイルを指定したい時に使います。 selectorA ~ selectorB JS:前後要素の取得 便利です。よく使います。 nextElementSibling 次にあるノードを取得 previousElementSibling 前のノードを取得 JS:forEach 今回は2引数利用して、取得したアイテムと、インデックスを取得し、変数menuHeightに配列として格納しました。 要素.forEach((item, index) => { ここに処理 }) JS:...（スプレッド構文） 配列を展開できます。 まとめ・CSSでアニメーションを軽量化してアコーディオンを増やそう！ いかがでしたか？ アコーディオンメニューはjQueryに頼らなくても、CSS3だけやJSを利用して軽量に作ることができます。 カンタンなコードならライブラリに頼らないほうが軽量化できていい時もありますし、ライブラリに頼らず自ら書くことでCSSやJSの理解度も高まります。 正解はないので、まずは自由に実装してみてはいかがでしょうか？ この記事がみなさんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry309","title":"Web Touch Meeting ＋ Adobe XD に参加して来ました","date":"2019-01-22","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2019/entry309.webp","description":"待望の Web Touch Meeting が帰ってきました。しかも大好きな XD スペシャルということで、LT すべく乗り込みました。ちなみに今回はSEOについてLTさせていただきました。","tags":["Web Touch Meeting","XD"],"body":"待望の Web Touch Meeting が帰ってきました。しかも大好きな XD スペシャルということで、LT すべく乗り込みました。ちなみに今回はSEOについてLTさせていただきました。 Web Touch Meeting（ウェブタッチミーチング） とは？ 通称 WTM / ウェブタッチミーティングは、Web周りの知識をみんなでシェアしようと iai の藤本さんが始めたIT系勉強会です。 Webの触り部分を勉強するということで、 最初はWebお触り会議という衝撃的な名前でした。 おさわり。。。 一昨年、100回をめどに一旦区切りをつけました。 Web Touch Meeting（ウェブタッチミーチング） 約束、如法さんのオープニングアクト ハイパーメディアトランスレーターのNyoho氏によるオープニングアクトから始まりました^_^ 私は残念なことに間に合いませんでしたが、きっとみんなが釘付けになったに違いない。 オープニングアクト ショートカットぶち早い！ せっかく参加するので、LTさせていただきました せっかく参加するのでSEOについてLTさせてもらいました。 去年、古いSEO手法のせいで80位まで落ちてえらいこっちゃになっているサイトを10位まで蘇らせたお話を、駆け足でさせていただきました。 毎回のことながらLTなのに自己紹介の前置きが長いと言われます。 まったく気にしてませんけどね。 所属する会社に言われるわけでもなく、私が喋りたいことを喋り倒させていただきました。思いの外ご好評いただき恐悦至極でございます。 被リンク、絶対買っちゃダメ スライドはこちらでーす。 古いSEO手法のせいで 80位以下 だったボロボロに傷ついたサイトを 10位以内まで改善したお話ダイジェスト ちなみにアンケートの結果、面白かったLTでは3位、興味深かったLTでは1位でした。 うぇーい！私大人気じゃ！ Adobe XDのセッション X

1Dはベータ版からうれげに使っていたアプリケーションで最近 XD の使いすぎで、イラレのショートカットも忘れております。 如法さんの動画見なきゃー！笑 オープニングアクト 私は指示書も、ワイヤーもXDで作ります。 なんならワードやエクセルで作るべき資料も XD です。 デザインカンプが XD で来たときは手放しで喜んでます。うぇーい。 Adobe XD超入門！XDを導入すべきメリットと基本機能をご紹介』株式会社MIRAI マスベサチさん 基本的な操作や使い方をご紹介いただきました。デモを挟みながら、ホント分かり易かったです！ フォトショのカンプは重いんじゃ。ホントやになります。 ディレクターも XD 、デザイナーも XD で良いと思います。 なんなら PTA や学校の配り物も XD で作れば良いと思います！ これで XD ユーザーが増えると良いな。 『UI/UXデザインを変えるAdobe XDの誕生から今後の進化まで』アドビ システムズ 株式会社 轟啓介さん 軽い（早い）は正義！ サイトも、ソフトも、人間も軽いに越したことはありません！ 進化の速さとかどんどん便利になって私もアップデートが楽しみです。 私個人としては趣味で一個プラグイン作ってみたいと思います。 轟さんのセッション仕込みも多くてとても楽しかったです。 XD ユーザーグループ、広島でも作るよ！ 懇親会で酔った勢い笑？でユーザーグループ作ろうやって話になりました。 私はエンジニアだし、デザインのことは若いもんにまかせようと思います。 最初の勉強会がいつ開かれるか、楽しみですね！ わーい、わーい。 さいごに、藤本さんへのお願い 1年経って思いましたが、WTMはやっぱり広島のIT・Web業界発展発展のために必要です。 いろんなジャンルの人と出会えるし、私もWTMで何人もの人に出会い、お世話になりました。 余談ですが、今回も8年ぶりくらいに会う職業訓練校で一緒だった人に会えました。 まだ、web 業界で働くことを諦めず、また勉強しているとのことでした。 漠然としてますが、この勉強会に参加している人は、みんなある意味同じ方向向いてるなって思います。 ということでせめて、年4でいいので、WTM続けてください！ お願いしまーす！","noindex":true},{"slug":"entry308","title":"さくらレンサバで concrete5 8系を使うなら最新 Ver に Upgrade しとけ！","date":"2019-01-21","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2014/entry175.webp","description":"去年レンタルサーバー（さくら）がの PHP のバージョンが勝手にアップグレードしてサイトが見れなくなってしまったことがあります。concrete5 8.2 では php7.2 で予約語のせいで動かなくなったみたいです。そこで、concrete5 8.2 を php7.2 に対応する方法を紹介します。","tags":["concrete5"],"body":"去年レンタルサーバー（さくら）がの PHP のバージョンが勝手にアップグレードしてサイトが見れなくなってしまったことがあります。concrete5 8.2 では php7.2 で予約語のせいで動かなくなったみたいです。 そこで、concrete5 8.2 を php7.2 に対応する方法を紹介します。 結論、アップグレードすれば良い まあ、concrete5 8.2 系以上は早い話アップグレードすれば大丈夫でã

1™ã€‚ concrete5の最新版を落としてきて、以下ファイルを上書きするだけでオッケーです。 composer.json composer.lock /concrete くれぐれも言いますが、concrete5 をカスタマイズする時は絶対/concrete内をカスタマイズしてはいけません。このフォルダはコアで汚染されると大ごとです。 /application 内にカスタマイズしたいファイルやディレクトリなどをコピーしてカスタマイズして置くとオーバーライドされます。 ただ、自作のブロックやコントローラがきちんと新しいバージョンで動くか不安ですよね。concrete5 は WordPress みたくリファレンスがもりもりあるわけではありませんので、困ったときは私はコンクリートファイブジャパンの代表・菱川さんのブログか、本家のリファレンス(English)か、Katzさんのブログを参考にしています。 たまにググりきれない時は、致し方なくコア(concreteディレクトリ内)を漁って作っていることもあります。 なので、オラオラとカスタマイズした自分のサイトが下手したら動かなくなるかもしれないので、容易にアップグレードというわけには行きません。 現サイトのデータを落としてきて、ローカルに構築 Vagrant で php7.2 環境でインストールするとやはり以下のエラー。 なので、一旦 Vagrant の php を 7.1 ダウングレードして、concrete5 をアップグレード。 concrete5 を 8.4系（現時点の最新）にアップグレード。 Vagrant の php を 7.2 にアップグレードして確認。 問題なく、アップグレードできました。ほ。 まとめ concrete5 8系をお使いの方で、レンサバのセキュリティ問題で php が突然アップグレードして私のようにびっくりしている人、困っている人もいると思います。 解決方法はアップグレードのみです。 カスタマイズ入れている人、特殊なテーマ・ブロックを使っている人は慎重にやった方がいいとは思います。 参考にしていただければと思います。 最後まで、お読みいただきありがとうございました。 追記 : php7.2 の count() の取り扱いに注意 数日経つと、サイトにエラー出で表示されとらんやん笑 あとで調べて見ると、php7.2の count() の取り扱いが変わっているそう。 結構これで判定しているところあるからやばいね笑 PHP7.2のcountにハマった話 今更だけど、もっと型に厳格にコード書かないといけないなと反省しました。","noindex":true},{"slug":"entry286","title":"脱 jQuery！軽量のスクロール JS・MoveTo が便利","date":"2018-12-14","modifiedDate":"2022-12-17","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2018/entry268.webp","description":"jQueryなしで使える jsライブラリの MoveTo の使い方をご紹介します。別ページに遷移したときの対処法もご紹介。","tags":["JavaScript"],"body":"みなさん、スムーズスクロールは好きですか？最近 jQueryなしで使える jsライブラリの MoveTo がお気に入りです。ということで、今日はMoveTo の使い方をご紹介します。別ページに遷移したときの対処法もご紹介。 GitHub からソースを拾ってこよう 以下サイトよりダウンロードします。 Clone or download をクリック後、Download ZIPでおっけーです。 https://github.com/hsnaydd/moveTo dist/内に moveTo.js と moveTo.min.js がありますので、後者のミニファイ（圧縮）されたファイルの方を使いましょう。 ページ内リンクをスムーズスクロール設定する | 値 | 内容 | | --------- | ----------------------------------------------------------------------------------------------------- | | tolerance | スクロール到達地点の許容誤差を補正。初期値は「0」。ヘッダー固定などしているときは少し調整すると良い。 | | duration | 移動時間をミリ秒単位で指定できる。初期値は「800」。 | | easing | スクロールのイージング描画の種類を指定します。初期値は「easeOutQuart」。 | | callback | スクロール終了時に実行される処理を指定可能。 | 初期値のままで使いたい場合は、以下のように指定します。 スクロール終了時に何かしら処理を加えることもできます。コールバックを指定したいときはこんな感じで書けばおっけー。 個別に設定する class を js-trigger に設定するとスクロールの対象になります。 ターゲットの設定は aタグであれば href属性にまんま書いてもいいし、ボタンタグなどであればカスタム属性 data-taget の値に指定します。 まとめて設定する #(ハッシュ)から始まる href の値が指定してあるaタグのみスムーズスクロールできるようにします。 ちなみに href は hypertext reference の略です。 href^=で値が#から始まる aタグのみを配列化ã

1§ãã¾ã™ã€‚ forEach()を使って一気に指定することも可能です。モダンブラウザであれば、Array.prototype.slice.callの指定は必要ありませんが、IE11では動きません！IE対策のために一行追加しましょう。 moveto.registerTrigger()で何をクリックしたら、moveTo が動くかを設定してやります。 おまけ・アンカーのある遷移したページのスクロール位置を調整 MoveToではヘッダーが固定されていてもページ内アンカーの移動はうまく動きますが、別ページに遷移をした時はうまく動きません。 なので遷移先でも tolerance のような処理をしたい場合は以下のようにJSで調整しておきます。 スクロール位置をヘッダー分上に上がるように調整します。 特にアニメーションする必要もないので、移動位置をシンプルにヘッダーの高さ分上に移動させるだけです。 完全に読み込み終了しないと、位置がずれることがあるので addEventListener(\'load\') を使ってページ読み込み終了後に実行します。 まとめ いかがでしたか？ jQueryなしでわりかしカンタンに設定できるしとにかく軽いのは嬉しいです。ぜひ使ってみてください。","noindex":true},{"slug":"entry285","title":"Webクリエータを目指すリスタート組の君たちへ season2","date":"2018-11-07","modifiedDate":null,"category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2014/entry197.webp","description":"私はフロントエンドエンジニアで制作する傍、職業訓練校の講師もしてます。Webクリエイタをしていて日々思っていることとWebクリエイタをこれから目指す人に伝えたいことを綴ります。この意見は私の一個人の見解で、会社とは関係ない旨だけ先に言っておきます。","tags":["講師","キャリアアップ・転職"],"body":"私はフロントエンドエンジニアで制作する傍、職業訓練校の講師もしてます。Webクリエイタをしていて日々思っていることとWebクリエイタをこれから目指す人に伝えたいことを綴ります。この意見は私の一個人の見解で、会社とは関係ない旨だけ先に言っておきます。 誰だって必ず最強の武器を持っている うちの訓練では主にコーディングやデザインを学ぶのですが、コードを触ったりデザインソフトに触れたりと、初心者の方にとっては相当大変だったと思います。 正直にいうと、最初私もWebクリエイタを育てなければならないという、プレッシャーもありました。 コーディングやデザインができなくても、Web業界では生きていける 実はWebでの仕事って制作に限らなければ、SEO対策、コンテンツ制作、Web解析など、たくさんの種類あります。 もし、コーディングやデザインを学んでみて難しければ、視点を変えて別の仕事に目指すのもありです。 制作は苦手でも、人の力を借りるのが得意だったり、誰にも真似できない企画力がある人もいます。それは十分な強みです。 クリエーターを目指して、デザイン、コーディングをやってみたら思いのほかできなくて落ち込むこともあったと思いますが、そんなことは気にしなくていいと思うんです。 誰にでも絶対に強みってあるんですから、強いところで勝負して再就職を目指せばいいと思います。 弱みよりも強みを伸ばしてもっと自分の力を信じる 自分の欠点ばかり探して劣等感に苛なまれてませんか。 評価は他人が決めること。自分ではないんです。思っている以上に良いところがあって欠点なんてほんの僅かだということを他人は気づいています。 自分の強みを知っていますか？ 自分の強みを知って伸ばせば最強の武器になるんですよ。 そして、今までの異業種で得た経験も大きな付加価値です。他社で学んだ、ビジネスマナーや仕事のスケジューリング、クライアントとの交渉術、オフィス製品を使いこなすスキルなど。みなさんきっとたくさんの付加価値を持っているはずです。 プラス自分の独自の人間力もあるはずです。弱みなんて強みを伸ばしていけば消えていきます。 だから、みんな自信を持ってください。 いい意味で身の丈を知る 先ほども述べた通り、誰しもが最強の武器を持っています。 私は、今でも新しい案件をやる時はついでに新しいことにチャレンジしたりと、自分に課題を課します。 少し努力すればできることを探してやると自分の技量がパワーアップして自分の価値が上がるからです。 そして社内でナリッジシェアすればみんなの技量も上がるし、制作物のクオリティも上がり、会社そのものの価値も上がります。 自分の技量を俯瞰し、見極めどんな新しいスキルセットを身につけばいいかを判断していけば良いと思います。 一つ言いたいのは、自分の限界を決めないで欲しいということでã

1™ã€‚ 今まで色んな人を見ていて伸びしろはわりとマインドの問題もあったりします。 「自分には出来ない」「難しい！」と決めつけてしまうと、せっかくの成長のチャンスを逃してしまう可能性があります。 自分を過大、過小評価しない。 色眼鏡は外して、ありのままの自分を見ましょう。 やりたくないことを避けるより、どうやったら楽しめるかを考えたほうが幸せになれる 考えてみれば人生は理不尽だったり嫌なことは避けては通れないものです。 昔の私は自分やりたいことをしたいなら倍嫌なことをするという変な哲学がありました。ネイリストになった時、必要に迫られてメイクやエステを勉強することを受け入れたのもそのためです。今ではそんなことないと思いますが。 嫌なことをイヤイヤやれば、2倍も3倍もイヤになります。 人の思考にはそれぞれクセがあって約97%無意識に頭の中でループされます。 人の思考のクセはそれまでに生きてきた環境や経験が違うので個人差があります。大雑把に言うとネガティブだったり、ポジティブだったりするものです。 でもこれって、実は直せるんですよね。ネガテイブな思考が回り始めたことに気がつけるようになったら他のことを考えるようにするだけでいいんです。最初のうちは、今日の晩ご飯何食べたいかなでも良いです。 もっと踏み込むことができるなら、少し視点を変えてどうやったら楽しめるかを考えてみると毎日の見えているものも変わってくるはずです。 一番もったいないのは『自分はこうだ！』と決めつけてしまうことです。 自らの可能性を頑固頭が潰してしまうなんてもったいない。 意外と人って変われるものですよ。 リスクと上手く付き合う 人生リスクはつきものです。私もフリーランスの頃何度も痛い目に遭いました。 どの世界にもリスクはあります。リスクと遭遇することは覚悟して下さい。 Web制作の現場において、 納期に対して制作期間を見誤ると致命傷を負います。 自分だけでなくチームの技量を把握するべきです。 たとえ、3日で構築できるものでも不測の事態を予測して予備日を何日か用意しておく。余裕があればリカバリできますから。特にディレクター志望の人は絶対に伝書鳩しちゃダメですよ。ディレクターになりたい人こそ制作の要（かなめ）です。 判断を見誤ったら、軍隊（制作部隊）が全滅します。 軍師であることを心して欲しいものです。 優れたクリエイタだからといって優れた指導者になれるとは限らないと思い知る 私が優れているわけではないですが、これは自分自身の自戒です。 講師の仕事をしていると色んな生徒さんがいます。最初はフォルダの整理やデータのダウンロードなどのパソコンの基本操作でも手間取ります。 見慣れないアルファベットや、ダブルクォーテーション、セミコロンという記号ですら普段の生活でほとんど使ったことのない人だっています。 私は今となっては息をするようにコードを当たり前のように書いていて、そういう頃が大なり小なり自分にもあったことを忘れてました。 優れた指導者とは、生徒さんの目線まで降りれる人なんだと最近は思えるようになりました。 出来すぎる人は出来ない人の視点まで降りる事が出来ないから、このくらいできるだろ！という感じでハードルの高いところから教えてしまうんです。 ハードルが高いとよほど根性があるか、地頭が良くないと学ぶことがストレスになります。結果やっていることがキライになってしまうんです。 コーディングは想像以上に初心者にとって、かなりハードル高いことが多いことを思ã

1„知りました。 分からないことをどう分からないか理解できるように努力しようと思います。 恩が返せないなら誰かに送ればいい 私はこの業界に入ってたくさんの人に助けてきてもらえました。VagrantやGulpでタスクが作れるようになったのもそのおかげです。 私がお世話になった人は、高いところにいてついていくのがやっとです。とはいえ、今の私がいるのはあの人たちのおかげと声を大にして言えます。 私みたいな一介の力無いWebクリエイタがここまで成長できました。 そんな人たちに私はボーナスが出たら焼肉を奢るぐらいしかできないんですよね。 焼肉じゃ足りない笑 だから、当時の私のように困っている人を助ける。もらった恩がとても大きくて返せないので誰かに送ることにします。 被害妄想に振り回されるな 最近被害妄想ほど厄介な感情はないと思います。なんと言っても妄想ですから。 どうせこう思っているんでしょ？ とか、自分の思い込みで不幸になるのって人生かなり損してますよ。 とりあえず思い込みは捨てて、事実と現実に耳を傾けてください。 誰かにそんなこと思われていてもそれがどうしたぐらいの気持ちでいた方が 人生はラク。 人生の主役は誰でもなく自分です。悲観しながら他人の評価ばかり気にしていたら精神がすり減り実力も発揮できなくなります。 プライドなんぞ捨てろ 長く生きているのでプライドに振り回されている人を山のように見てきました。 ここでいうプライドはどちらかというと誇りではなく、マウントしたい欲求といったほうが近いです。 業界が変わって色んな人がいましたが、しょうもないプライドのせいで損している人が沢山います。 特にビジネスチャンスを逃しています。 人は多かれ少なかれ支配したい本能に振り回されているんだと思います。 欲求に振り回されず、利益や現実を直視した方が幸せになれます。 そんなにマウントしたいならスキルを磨けばいいんです。 自分の人生を人に委ねるな 絶対にやっちゃいけないこと。それは人のせいにすることです。 転職したのも、学校に通ったのも全て自分の責任です。 何かのせいにしていると、負の感情の泥沼から抜け出せなくなります。 忘れないでください。すべては自分の決めたことです。 8年くらい前、私も自分のキャリアが死んで行き、こんなキャリア捨ててやると転職を決めました。 正直苦渋も舐めてきました。とはいえ、転職してからの出会いはイヤなことも含めて学びは多いです。 イヤな想いをして悔しかったからこそ頑張れた部分もあります。 もし自分の人生を誰かに委ねてしまっても決して文句は言わないで下さい。自分の選んだ道は自分で責任を取る。たとえ不本意でも。 人のせいにせず、己の正直に身の丈を知り出来ることを頑張る。いたってシンプルですが、続けるだけでネガティブな感情からは抜け出せます。 最後にリスタート組のWebクリエイタを目指す方にエールを 最近私が思っていることをぶちまけた感じになりました。 一番大切なのは自分のマインドなのだと思います。 人生は自分のマインド次第で幸・不幸が変わると思います。 仕事している時間が人生で一番長いと思います。だからこそ、その仕事中を一番楽しく充実した時間を過ごすことを願っています。 少しでも良い職場に出会えることを願います。","noindex":true},{"slug":"entry279","title":"SEO 勉強会「『Googleに聞きたい！ 検索エンジンQ&A』」無事終わりました","date":"2018-10-09","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbn

1ail/2018/entry279.webp","description":"10/6(土)「Googleに聞きたい！検索エンジンQ&A」無事終わりました。ご参加くださったみなさん、本当にありがとうございました。","tags":["Google検索エンジン"],"body":"2018/10/6(土)「Googleに聞きたい！検索エンジンQ&A」無事終わりましたのでそのレポートです。 Q&A はめちゃめちゃ盛り上がりました。もっと話聞きたい！という声もたくさんお寄せいただきました。 ご来場の皆さん、心から感謝です！！！ 参加者は約90名でした。県内はもちろん、南は熊本、東は静岡から、遥々遠方からお越しいただけました。 広島初の大きな SEO の勉強会（たぶん） とりさんがコミュニティ立ち上げて約1年。広島におっきな IT の勉強会が無くなってしまい、Web 全般のナリッジシェアが難しくなりました。 SEO とか、ニッチな勉強会なんてなおのこと。今回広島フロントエンド勉強会で、SEO の勉強会がやりたい！と思い、一念発起し、広島講師として UI/UX の専門家の金井さん、Google 検索エンジンのエバンジェリスト金谷さんと海外SEO情報ブログの鈴木さんを外部講師としてお招きし、お話いただくことができました。 勉強会を開こうと思った経緯はこちらをお読み下ã

1•ã„。 やりたかったから広島でSEOの勉強会します！ ざっくりとした SEO 勉強会の内容 SEO は筋トレだ！ 金井さんには SEO が素人でも分かるように筋トレに例えてお話しいただきました。 幅広い客層の方がいたので、SEO の基本のキは分かっていただけたのではないでしょうか。それから、うちの会社が変なこともバレてしまいました。あ、ちなみに本当に痩せました。 Google 検索最新情報 基本的な Search Console のことをお話しいただきました！使ったことない人もいたようです。 新しくなった Search Console ベータ版の頃からミーハーのように使っていますが、すごく使いやすいです。うちは AMP 導入しているので、エラーの発見にも役立っています。 Search Console でデータを見るときはスマフォとPCを分けてくださいとのことでした。 最近「リンク」というメニューが増えてさらに便利になりました。 もっともっと、便利になって行くのを楽しみにしています。 Page Speed Insights の変わった点や Lighthouse の使い方なども併せてお話いただきました。 Page Speed Insights Lighthouse Page Speed Insights はリアルタイムから収集したデータを元に叩き出す方式に変わってます。 今すぐできる、モバイルユーザー体験向上のための Google SEO〜スピード改善、リッチリザルト、ローカル検索対応 etc. 〜 スピードアップデートに伴うサイト高速化のお話でした。 最近、既存のサイトの改修をしました。 すごくヘヴィなサイトだったので、画像の圧縮、CSS ファイルをワンソースにまとめて圧縮しただけですが、一気にランキングが10位くらい上がりました。いつも思いますが、やっぱり画像がネックなんですよ。 ちなみに鈴木さんより、Lighthouse を使うときは正しい結果を出すためにシークレットモードで拡張機能をオフにして使ってくださいとのこと。 私は Gulp でタスク作って圧縮しますが、みんながみんなできるわけではないので、手軽に使えるツールを利用すればよいですね。 Q&Aコーナー Q&A は通称 AMA（Ask Me Anything：なんでも聞いて！）だそう。予想通り、めちゃめちゃ盛り上がりました！ Twitterもまとめています。どんなふうに盛り上がったかはこちらをみた方が早いかも！ 広島フロントエンド勉強会 Special 2018 『Googleに聞きたい！ 検索エンジンQ&A』Twitterのまとめ どうせなら懇親会などのこぼれ話も交えて せっかくなので、懇親会やその他で出たこぼれ話も交えて私が思ったこと、ためになったことなどお話しさせていただきます。 個人的に alt は目が見えã

1ªã„人のことを考えて値を入れて欲しい alt は SEO でも大切かもしれませんが、コード書く人間としてはアクセシビリティを第一に考えて欲しいです。 そもそも alt は代替テキストで、画像が読み込まれなかった時に表示される文字です。 スクリーンリーダーで読まれる時、不自然じゃないのがよいのではないでしょうか？ 画像じゃなくて文章にするとどうなるだろうと考えたらよい代替テキストになるかもしれませんね。 色んなツールあるけどやっぱり Search Console が一番正確 Moz など被リンクやページランクを確認できるツールはあります。 が、やはり Search Console のデータが一番正確です。2日前までのデータしか見れないから、他のツールを使いたくなっちゃうんでしょうね。 被リンク、絶対買わないで！ 最近びっくりしたのは未だに被リンクを販売しているSEO業者がいるんだということ。 今ではこういう人工的な被リンクは超やっちゃいけないことなのに未だにそのようなブラックハットなやり口が健在だということにがっかりしました。 ドーピングと一緒です。バレなければと思ったらダメです。一度ペナルティくらったら取り戻すのはものすごく大変ですよ！ 魔法のようなテクニックはない ユーザーにどんなコンテンツを求めてるかを徹底的に分析したり、研究してますか？ なんなら、ペルソナ立てたりカスタマージャーニーマップでユーザー体験やってみればいいと思います。 ユーザーとしてもしょうもないコンテンツは読みたくない。 ユーザーが求めるコンテンツを頑張って作るしかないということですね。 シークレットモードでも順位は違う これは前から知っていましたが、理由としてはパーソナライズ意外にも、ローカライズ（位置情報）が検索の条件に乗っかってくるからだそう。 Google の人は Search Console のことを「サチコ」と呼ばない 呼ばないらしいです、はい。 こんなしょうもない質問にも答えていただき、ありがとうございます。 普段会えないようなジャンルの人と会えた！ アフェリエイターに会えました。普段なら絶対会うことがないと思います。 普段開かないジャンルの勉強会に参加するとこういう出会いも醍醐味ですね！ 話をしてみるとめちゃめちゃ楽しかったです。呑んだくれててあまり覚えてないですけど笑 お酒は人種やジャンルを超える最強ツールですね。 まとめ 勉強会を終えて思ったのは、 地方の SEO リテラシーが上がることは、 悪質 SEO 対策も減るということに繋がると改めて思いました。 変に出回っているテクニックは使わない。被リンクは買わない。 SEO の勉強会、来年もやりたいな！と思いました。 最後に、司会（私）が棒読み && カミカミでごめんちゃい。","noindex":true},{"slug":"entry284","title":"MySQL を 5.1 から 5.7 系にアップグレードする際にハマりました","date":"2018-09-23","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2014/entry208.webp","description":"grant の MySQL を 5.1 から 5.7 系にアップグレードする際にどハマりし、結局助けてもらってなんとかアップグレードしたのでそのやり方をメモします。","tags":["DB"],"body":"grant の MySQL を 5.1 から 5.7 系にアップグレードする際にどハマりし、結局助けてもらってなんとかアップグレードしたのでそのやり方をメモします。 MySQLのアップグレード バックのことはさほど分かっていないくせに、Vagrant を構築してしょっ中作っては壊しています。 もっぱら Vagrant の構築はいただきもののシェルスクリプトを使いまわしてます。めちゃめちゃ重宝していて、たまに改変してます。 ちょっと前に作成したサイトを最近リニューアルする必要があり、本番環境のMySQL の 5.7系だったので、仮想環境も念のため 5.7にしなければならず。。。 しかしいただいたシェルスクリプトは 5.1 系で書いてあるし、インストールの仕方が違うらしくシェルスクリプトを改造する自信はなく。。。。 一応改造は試みましたがうまく行かず撃沈。いったん構築してしまってアップグレードすることにしました。 MySQL 5.1 から 5.7 に アップグレードするには2段階のステップを踏まなければならない ワタクシの環境はちなみに CentOS 6.4 です。 MySQL 5.1 が古いのか、バージョンアップするためにはまず、5.6系にあげなければならないそう。 こちらのブログを参考にさせていただきました。 MySQL5.1から5.7にバージョンアップさせるための手順 まずは 5.6 系へアップグレード vagrant sshで入り、まずはバージョン確認。 特権レベルにセット。 まずはmysqlをシャットダウン。 既存のmysqlを削除 落ちてこない人は直接、ルートにmysql-community-release-el6-5.noarch.rpmを置ã

1„て yum install すればいいと思う。 yum-config-managerでエラーになる人は以下コマンドを実行して、上のコマンドをもう一度叩いてみてください。 [yum]yum-config-managerコマンドの実行でcommand not foundエラー インストール。 ここですでにDBがあるとおそらく mysqld が起動できないはずです。 なので、まずはログを確認してみます。 Mac ではログファイルを開いたら shift + g で一番下まで行けます。 b で1ページ戻り、space で次のページ、q でログファイルを抜けることができます。 先に DB を作ってしまってたせいか、不要なファイルができていたのでこいつを削除しにいきます。 ちゃんとした理由についてはこちらをご覧ください。 my.cnfでinnodb関連の設定後、MySQLが起動しなくなった ディレクトリーを移動して中身を確認。 下の三つが不要なので強制削除します。 ※もちろんエラー内容を確認の上削除。 Fatal error: Can\'t open and lock privilege tables: Table \'mysql.user\' doesn\'t existというエラーが出た場合 インストール時に mysqlinstalldb が実行されるが、ディレクトリがわからない状態なので、インストール場所とユーザ名を指定して明示的に実行すると良いようです。 MySQLの起動時に \\"Fatal error: Can\'t open and lock privilege tables: Table \'mysql.host\' doesn\'t exist\\"というエラーが出た これで無事再起動できるはずです。 アップグレードします。 パスワードを設定している場合はお尻に -p をつけてパスワード入力します。 バージョン確認。 ようやく5.6系になりました。 5.7にアップグレード 続けて、5.7 にアップグレードします。 まずはmysqlをシャットダウン。 せっかく作ったけど、のmysqlを削除。 5.7を有効化 インストール 無事アップグレードできているはずです。 まとめ 今回 MySQL のバージョンアップにチャレンジすることで、mysql のエラーログの見方を覚えたりバージョンの切り替えを覚えることができました。 ハマってよかったーーー。","noindex":true},{"slug":"entry276","title":"やりたかったから広島でSEOの勉強会します！","date":"2018-08-20","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2018/entry276.webp","description":"SEOの勉強がしたくて、県外に勉強しにいこうと思ったけど、広島やその近辺の方と一緒に勉強した方が楽しいかもしれないと思って、色々頑張ったらGoogleの検索エバンジェリストと海外SEOのウェブマスターの召喚に成功しました。その経緯を説明します。","tags":["Google検索エンジン"],"body":"SEOの勉強がしたくて、県外に勉強しにいこうと思ったけど、広島やその近辺の方と一緒に勉強した方が楽しいかもしれないと思って、色々頑張ったらGoogleの検索エバンジェリストと海外SEOのウェブマスターの召喚に成功しました。その経緯を説明します。 SEO勉強会の概要 概要は以下の通りです。 詳しくはサイトをご覧いただいた方が早いかも。 『Googleに聞きたい！ 検索エンジンQ&A』イベント特設ページへ | 概要 | 詳細 | | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | イベント名 | 広島フロントエンド勉強会 Special 2018『Googleに聞きたい！ 検索エンジンQ&A』 | | 開催日時 | 2018å¹´10月6日(土) 13:30 - 17:00（13:00開場） | | 講師 | 金井 由宇(リードスペース株式会社代表取締役社長/HCD-Net認定人間中心設計専門家)金谷 武明(グーグル合同会社/Google 検索のエヴァンジェリスト)鈴木 謙一(「海外SEO情報ブログ」の運営者) | | 主催 | 広島フロントエンド勉強会 | | 参加費 | 早割 : 4000円 ※9月15日までにお申込みの方通常 : 5000円 | 勉強会を開こうと思ったきっかけは、SEOに苦しんだこの数年があったから 最近勤めている会社ではSEOに取り組んでいます。ブログを書いたり、お客様からヒアリングしてコンテンツを作ったりしています。 一応ウェブ解析士の勉強もしましたしGoogleアナリティクスなどは見方はわかってたものの、現会社に入るまでは一生懸命SEOに取り組んでいたわけではありませんでした。 私もエンジニアのはしくれなã

1®ã§ã€ãƒžã‚¤ã‚¯ãƒ­ãƒ‡ãƒ¼ã‚¿ã‚’埋め込んだり、タグなどのセマンティックを意識したりはしています。プラス、コンテンツ作りというタスクも私に増えたわけです。 SEO対策をしているといろんなことがあります。せっかくコツコツ順位を上げてきたサイトがGoogleアップデートの煽りを受けガクンと下がったりしたこともあります。80位ぐらいのサイトのSEO対策をやった時は、昔主流だったSEO対策が原因でかなりのハンデを背負った状態でスタートすることもありました。毎日検索順位とにらめっこしては一喜一憂していました。 苦しかったからこそSEOの勉強をしたくなった SEO対策は泥臭い作業の繰り返しで正直キツイ時もあります。 これをやったら必ずしも上がるという保証もありません。常にGoogleアップデートもあります。 今のところ私が体感してこれだけは間違いない！と思うのは、 本当にユーザーのためになるコンテンツを作る。 この一言に尽きます。 ライティングスキルや、ユーザーが読みやすいようUX/UIも考慮しなければなりません。 順位が上がった時はすごく嬉しかったです。キツイかもしれませんがめっちゃやりがいはあります（Mか！）。 それからというもの、もっと検索エンジンやSEOのことを学びたいと思うようになり、思い切って、もっと勉強したいと思って県外の勉強会を探しました。残念なことに広島では、なかなか大きなSEOの勉強会がありません。 大阪で見つけて勉強会に参加しようと考えたのですが、参加費がめちゃめちゃ高い。交通費と合わせると悩みますよね。。。。 そんなにSEOの勉強をしたいなら講師を広島に呼べばいいじゃない 悶々としていたのですが、ひょっとしたら広島と近隣地方のみんなも勉強したいんじゃないかな？ だったら、私が講師と交渉して広島に呼べばいいじゃない！ そうすればみんなでSEOを勉強できる！！ そう思ったら即行動。私が今関わっている広島フロントエンド勉強会主催者に相談しました。 快諾してくれたので、さっそく講師を探しました。 なんとか講師の方が決定しました 私は非常にラッキーです。 最初に声をかけたのは弊社社長でHCD-Net認定人間中心設計専門家でもある金井 由宇です。 ありがたいことにコミュニティで開催したい旨も理解してくれて、さらにスポンサーとしても協力してもらえました。 Google検索エバンジェリスト金谷 武明さんがお話くださることになりました。 しかも金谷さんには講師としてお話いただくだけでなく、講師探しで悩んでいたら「海外SEO情報ブログ」で有名な鈴木 謙一さんをご紹介いただきました。めちゃめちゃ感謝しています。 私がSEOをもっと勉強したいと思ったのがきっかけで、いろんな人が協力してくれ、しかもこんな素晴らしい講師陣を迎えることができるなんて現時点でも感動してます。 当日は精一杯頑張ります！皆さんもぜひお越しください。 やりたいことは声を大にすれば、実現できるのかも！ 今回この勉強会を開くのは、広島を中心とした地方のSEOや検索エンジンの知識を学び、それらに携わる人たちと一緒に向上したかったからです。相談した当初は不安でしたが、私の考えや信念に賛同してくれた仲間が一緒にイベントづくりをしてくれています。 そして素晴らしい講師も集まりました。 広島のコミュニティを支える、企業の方にもご協賛いただきました。心から感謝しています。 やりたいことをやりたいと思って心の中にしまっていても、伝わらないし、思ったままで終わってしまう。小声でもなかなか、周りに動いてもらうことは難しい。でも、大きな声でやりたいんだって叫べば伝わるし、実現するものなんだと今回は思いました。 当日はサイコーのイベントになるように今から準備してます。 みなã

1•ã‚“、参加して一緒にSEOや検索エンジンの勉強をしましょう。 『Googleに聞きたい！ 検索エンジンQ&A』イベント特設ページへ","noindex":true},{"slug":"entry283","title":"WordPress で自作した機能を plugin 化してまとめると幸せになれた","date":"2018-08-14","modifiedDate":"2023-01-22","category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2015/entry235.webp","description":"WordPress のfunctions.php に書いていく、自作した機能をプラグインごとにまとめたらめちゃめちゃ便利だったのでその方法をメモっておきます。","tags":["WordPress"],"body":"WordPress のfunctions.php に書いていく、自作した機能をプラグインごとにまとめたらめちゃめちゃ便利だったのでその方法をメモっておきます。 WordPress の自作した機能は整理しておかないと、めちゃめちゃカオスになる WordPress で自作した機能はまとめておかないとめちゃめちゃカオスになります泣（経験者は語る） 自作する機能が増えてくると、ついつい functions.php 内が長ーーいコードになってしまい、後から修正するときに何をどこに書いたか忘れてしまうということもあると思います。コメント入れていますが、どういう関数に書いたか、どんな機能を追加したかも忘れてしまう始末。 その対策として、私は今まで functions.php に機能ごとに分けてインクルードしていました。 この方法に切り替えてからは、1ファイルにまとめて書いていた頃より、なんぼか楽にはなりましたがやっぱりカオスっちゃカオス。 一個間違えたらみなこける！みんな仲良しすぎ！ どうにかならんもんかなーと思っておりましたら、数年前からプラグインにまとめると幸せになれるよ、という声を各方面からチラチラ聞いていたのでやっと重い腰をあげてやってみることにしました。 プラグインにまとめるメリット プラグイン化するメリットは以下の通りです。 管理画面をプラグイン一覧を見ればどんな機能を入れたか一目瞭然。運用中は目に見えて使わない機能は何実装していたっけと良くなるので地味に助かるし、コードを書かない人たちにも可視化できるのは嬉しい ファイルが機能ごとにまとめられてスッキリ。機能ごとにフォルダにまとめられる上に、めちゃめちゃ整理整頓されます。スパゲティコードも回避できます 機能ごとにプラグイン化してあるので、他テーマへの使い回しが楽 プラグインごとに機能を自作してデバッグすればいいので、何でエラーを吐いているかとか開発もしやすい チームでも共有・共同開発もしやすくなると思いますし、とにもかくも、取っ散らかる前にプラグイン化して整理するに限ります。 プラグイン化の方法 プラグイン化はとってもカンタンです。 wp-content/plugins 内にファイルを突っ込むだけです。 例えば sample.php といったファイルに機能を書くなら、中身はこんな感じです。 さらに細分化して複数のファイルに機能を分けてフォルダにまとめたい場合 例えば、SEO で必要なタイトルタグやメタディスクリプションなどをカスタムフィールドで投稿画面に実装することもあると思います。 しかも、文字数カウンターをつけたりCSSで調整してリッチにしたい場合、専用のCSSやJSも用意しないといけない場合もあります。 その他 SEO 的に必要な構造化データを出力したくなったりと機能は山盛りになってしまいます。 そんな時こそプラグインにまとめるとスッキリします。 以下のようなファイル構造でプラグインを作ります。 seo_set.php には以下のようなコードで他のファイル類を読み込みます。 あとは各ファイルにコードを書いていきます。 おまけ

1：プラグイン内のCSSやJSを管理画面に適応する場合 プラグイン内のJSやCSSを管理画面に適応する場合はadminenqueuescriptsを使用します。scripts なんて言っているけどスタイルとかのデータも追記してくれます。 個人的には管理画面くらいなら、モバイルファーストインデックスを意識しなくていいと思うので、ファイルが多少細分化しても管理画面が重くなけりゃいいと思う。 ちなみに、エンキュー(encueue)とはキュー(cueue/先に入れたものが先に出る構造になっている何か)にデータを入れることだそう。 よくキュー状態とか言いますよね？会社で複数人で一つのプリンターとか使った経験がある人ならわかるかも。 adminenqueuescripts の用法もっと詳しく載ってないかなと思い、WordPress Codex 行ってリファレンス探してみたら英語しかありませんでした笑 Plugin API/Action Reference/admin enqueue scripts まとめ：たくさんカスタマイズしたいならプラグイン化するのは絶対オススメ！ 以上、WordPress の自作した機能をWordPressにまとめる方法をご紹介いたしました。 今回はプラグイン化の方法のみのご紹介です。","noindex":true},{"slug":"entry282","title":"concrete5でページリストブロックの絞り込みをカスタマイズしてみた","date":"2018-08-11","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2014/entry175.webp","description":"concrete5 でページリストブロックの検索結果をカスタマイズしなくてないけなくなったのでそのやり方をメモします。","tags":["concrete5"],"body":"concrete5 でページリストブロックの検索結果をカスタマイズしなくてないけなくなったのでそのやり方をメモします。 デフォルトでも十分優秀なページリストブロック ページリストブロックはデフォルトでもとても優秀なブロックで、記事の一覧を出力するのによく重宝します。 多少、コードは書かないといけませんが、その学習コストを入れても十分使えます。 デフォルトのテンプレートで主にできること 親ページで絞り込み ページタイプで絞り込み タグで絞り込み トピックスで絞り込み 並び替え 日付で表示・非表示ページをコントロール ページネーション 任意の属性で絞り込みをする ページリストブロックには変数$listの中に管理画面で設定した絞り込みの値が入ったものが渡ってます。 $list->getResults(); で結果を配列で出力でき$pagesに格納されています。 なので一旦、 filterByAttribute(); で属性での絞り込みを追加して、再度$list->getResults(); で絞り込み結果を再度 $pages（同じ変数名がやな人は変えてね）に代入すれば最小限の労力でカスタマイズできます。 ナビを出力したら以下のコードで絞り込みを追加します。 あとは通常通り、 $pages を foreach で回せば絞り込みは完成です。ページネーションも変更する必要はありません。 おまけ オプションリストで出力するともっとカンタン ちなみにオプションリスト(とか)で出力する場合は、以下のコードでもいけます。 勝手に出力してくれるのでめちゃめちゃ便利です。 ただしどんなコードがあらかじめ出力されるか把握した上で、コーディングしないと泣く羽目に遭いますよ。 複数の属性をまとめて扱いたいならセットに登録しよう ページ属性はまとめてセットに登録することが可能です。 登録したデータをまとめて foreach で回せるので便利です。 まとめ 実際に私が実装したのは複数の属性を作って絞り込んだのでもっと複雑でしたが、このくらいミニマムなものを改造してチャレンジすると敷居が低くて良いと思います。 もちろん、いろんな種類の属性でできます！ 以下公式サイトのURLを見ながら、ぜひやってみるといいと思います。 参考サイト PageList オブジェクトで検索・ソートを行う","noindex":true},{"slug":"entry280","title":"初心者コーダーに贈る！超軽量高機能エディターVS Code入é

1–€2","date":"2018-07-23","modifiedDate":"2021-03-05","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2018/entry266.webp","description":"コーディング初心者に贈るVS Code完全マニュアル第2弾！第1弾で快適にコーディングできるところまでセッティングしたので、さらに便利に使えるようにスニペット、ターミナルやGit連携などのご紹介をします。この記事は最新2021年のVS Codeに合わせて大幅にリライトしました。","tags":["VS Code","git"],"body":"コーディング初心者に贈るVS Code完全マニュアル第2弾！ 第1弾で快適にコーディングできるところまでセッティングしたので、さらに便利に使えるようにスニペット、ターミナルやGit連携などのご紹介をします。 この記事は最新2021年のVS Codeに合わせて大幅にリライトしました。 この記事のゴールはVS Codeをさらに使いこなすためにスニペットを作ったりGit連携できるようになることです。 VS Codeをダウンロードし、ある程度設定できていることが前提条件 です。 第1弾では快適にコーディングできるところまでセッティングしました。 SCSSの設定などは3弾に記載してますので、必要に応じて読み進めてください！ VS Codeの見取り図 機能が多く迷子になりやすいので、わからなくなったらこちらを参考に。 アクティビティ バー ツールの中でもっとも使うメニューです。 VS Codeのスニペット #### スニペットとは VS Codeのスニペットとは、よく使うコード一式をショートカットやキーに登録しておく機能です。言語ごとに登録できます。 コード書いてると、「これ何回書いたっけ？」ってことあると思います。 スニペット設定用ファイルを追加方法 HTMLのスニペットを作ります。 アクティビティーバーの下側・歯車マークをクリック>ユーザースニペット（ショートカットは当たってません）をクリックします。 htmlとバーに入力すると、HTMLと入力するとhtml用にhtml.jsonというスニペット用のファイルができます。 スニペット設定用ファイルの削除方法 タブを右クリック（Option+Cmd+R）し「ファインダーで表示します」を選ぶと、ファイルの置かれている場所がわかります。 不要になったらここから削除します。 スニペットの書き方 コメントアウトされているPrint to console〜から閉じカッコまでをコピーしてスニペットを作っていきます。 デフォルトで用意されているhtml:5で展開するHTMLのコードはこちら。 個人的にはhead内に最低必要なコードは含めておきたいです。足りないコードはこちら4つ。 電話番号の自動リンク化を無効 iOSのSafariには、文書内の電話番号を検出して自動的にリンクする機能が備わっているのですが、電話番号以外の番号も誤認識されてしまうことがありやっかいです。最初から無効化しておきます。 ページの説明 サイト公開に最低限必要。 スタイルシート 絶対何かしら読み込むので用意しておきます。ファイル名はあとで変更すれば良いです。] JavaScriptファイル ドロワーメニューなど何かしらJSは書くはずなのでファイルをもう書いておきます。 コードが横へ爆長になった場合は、「Option+Z」でコードの折り返しをセットすると◎。 コードは以下。 ${1:タイトル}のように書いておくと、デフォルトの文字を入れつつタブでカーソル移動しながらカンタンに書き換えられます。 数字は移動したい順番です。 html:tempで展開可能です。候補も出ますし、どã

1‚“なコードが展開されるかもわかります。 VS CodeでGitと連携する！ せっかくなのでGitと連携してコードを管理（バージョン管理）しましょう。 Gitでググったらおそらく、コマンドがわんさか出てきて初学者にとっては地獄。。。 そんなGit操作をVS Code備え付けのGUI（グラフィカル・ユーザー・インターフェイス）で使えるなんて超幸せです！ さておきバージョン管理とはすなわち躾（しつけ）！ 初学者だろうが有無を言わずに使いましょう！ GitHubとVS Codeをサインインしておきます。私はVS Codeを普段GitHubと連携しています。 アクティブバーの人マークをクリックし、サインインして同期を選び、GitHubを選びます。 GitHubでリポジトリを作り、クローンする GitHubで先にリポジトリを作っておきます（readme.mdを追加しないで作ってください）。 新しくVS Codeを開きクローンするを選びます。 リポジトリを選び、クローンする場所を選びます。 クローンが終わると改めて「VS Codeを開きますか？」と聞かれるでそちらを開いておきます。 readme.md ファイルを追加してファーストコミット ディレクトリーにreadme.mdという名前のファイルを追加します。適当に文字を打ち込み、ソース管理（ショートカットCtrl+Shift+G）を開きます。 ちょっと小さいですがアイコンにそって説明します。 1. ファイル名です。クリックすると変更前・変更後を比較できます。 2. 単純にファイルを開けます。 3. 変更を破棄できます 4. 変更をステージ（コミット対象）に移せます。 5. 状態。U（新規）/M（変更）/D（削除）/C（コンフリクト）です。クリックするとファイル名同様変更前・変更後を比較できます。赤くなってる場合はエラーがあるかコンフリクトしているので注意です。 ここでは4のプラスボタンをクリックしてステージングします。 「ステージされている変更」が出現し、ファイルがそちらに移動します。もしステージングを取り消したい場合はー（マイナス）ボタンを押して下に移動します。 ファイルの量が増えてくると面倒です。変更したファイルの変更は「ソース管理」「ステージされている変更」の横にある横ボタンからまとめて操作できます。 サイドバー右上のメニュー(・・・)から「コミット」>「ステージング済みをコミット」を選択します。するとコミットのメッセージを求められるので「Initial Commit」と入力しておきましょう。 コミット履歴はエクスプローラーのタイムラインから確認できます。 結構頻繁に行き来するので、エクスプローラー（Shift+Cmd+E）とソース管理（Ctrl+Shift+G）のショートカットは覚えたほうがいいです。 プッシュ リモートにプッシュします。 サイドバー右上のメニュー(・・・)から「プル、プッシュ」>「プッシュ」を選択。 GitHubのリポジトリでちゃんとプッシュされているか、確認しましょう。 [box style=border] 余談・Macのキーチェーンで保存さã

1‚Œã¦ã„たパスワードが厄介でプッシュできない現象に陥った。。。 ちなみに私のMacに2つのGitHubのパスワードがキーチェーンに保存されていました。 パスワードを聞かれたら、現在削除されたアカウントが優先されプッシュできない状況にお陥りました。 もう使ってないのでキーチェーンから削除して一件落着。みなさんも気をつけましょう。 ブランチ追加・切り替え VS Codeはブランチの追加もカンタンです！ メニューからも追加できますが、下のステータスバーから追加するほうがカンタンです。 切り替えも同様に下のステータスバーをクリックして切り替え可能です。 マージ マージはブランチに移動し、サイドバー右上のメニュー(・・・)から「ブランチ」>「ブランチをマージ」を選択。 マージしたいブランチを選択するだけです。 コンフリクト対応（不完全なので追記します。待ってね） 初学者の最大の難関、コンフリクトについてです！ コードに差異があってうまくマージができなかった時に起こります。 コンフリクトが起きたら黄色い文字で「C」と表示されます。いまだに気分が萎えますね。。。 「現在の方」と「入力欄のすべて」の二通り選べて問題なければすべてソース管理側でã

1„ずれかを選ぶことができます。 どっちも取り込まないといけない場合は手動で直します。 「C」マークがついたファイルごとに、箇所箇所で修正します。 ファイルには以下のように「現在の変更」と「入力欄の変更」で選べるのでどちらかで修正します。 箇所箇所でさらに違う場合はさらに手動で修正しましょう。 ターミナルを使おう！（ちょっとハードル上がるよ） 通常ターミナルは別アプリケーションから開きますがVS Codeにも付属でついています。「Ctrl+Shift+@」で表示・非表示可能です。 私は普段、Git操作はターミナルから行っていて、VS CodeのGit機能はブランチ切り替えと作成ぐらいしか使ってません。 GitHubのアカウントを以前2こもっていてコミットで1アカウントの方がhttpsのURLからはできなくなってしまいました。 困ったので片方はssh接続といって鍵認証で接続する方法をとることにしています。 GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~ コマンドでクローンする 普通にVS Codeを開いてターミナルを起動し、cdコマンドでディレクトリ移動します。 ディスクトップに移動しておきます。 自分の居場所がわからない人は以下コマンドで調べてみましょう。 今いる階層のディレクトリ・ファイルが確認できます。 sshの方のURLでgit cloneします。 パスフレーズを聞かれるので入力します。 これで問題なければ、クローンできます！！ いくつかgitのコマンドをご紹介しておきます。 変更のあったものだけステージング コミット プッシュ 2回目以降オプションは不要。 まとめ：VS Codeをもっともっと快適に使おう！！ 今回はスニペットの作り方、Git連携、ターミナルの使い方をご紹介させていただきました。 あくまでVS Codeの使い方にフォーカスしてますので、Gitの細かいコマンドなどは触れていません。 前回同様、クソ長い記事になってしまいましたがぜひ目次を利用して必要な項目だけ見てもらえると幸いです。 最後までお読みいただきありがとうございました。 おまけ：VS Codeお悩み別使い方 第1弾ではショートカット一覧を掲載したのでシチュエーションやお悩み別の使い方を掲載しておきます。 サイドバーが邪魔 Cmd+Bでサイドバーを閉じます。開きたい時は同じくCmd+B。 開いているファイルが多すぎて邪魔 ショートカットCmd+K+Cmd+Wですべて閉じて、開きたいファイルだけクイックオープン（Cmd+P）からファイル名を入力して開きます。 ファイル名は分かっているけど、ファイルとディレクトリが膨大でエクスプローラーから探すのは辛い クイックオープンを使いましょう。「Cmd+P」でワークスペース内のファイルを素早く探すことができます。 ファイル名を入力するだけです。 headerのここ書き換えたいんだけど、どこやっけ？ タグの位置は分かってるけどコードが長くてカオス。 そんな時はエクスプローラーの中のアウトラインからHTMLやCSSのツリー構造から移動するのが早いかも！ エクスプローラーの中のアウトラインを使うとHTML、CSS、SCSSのアウトライン（構造）が一目瞭然の機能です。クラスやIdも一緒に記載されているので場所を判別しやすいです。 現在開いているファイルの任意の行にところに移動したい ミニマップか、クイックオープンを使います。 クイックオープン：Cmd+Pと入力後、:行数 ミニマップ：大体ここくらいかなって位置を選んで移動 エラーの場所を探したい ミニマップ:現在のファイルのエラーを修正したい。マップ上に赤い線が入るのでファイル上どのくらいエラーを吐いてるのかもわかる（たまに気分も萎える）。 アウトライン:現在のファイルのエラーを教えてくれる。エラー個所に素早く移動できる。 問題：全体のエラーを教えてくれる。エラー個所に素早く移動できる。 エラーをチェックする時は問題を開いておくと○。ショートカット「Cmd+Shift+M」です。","noindex":true},{"slug":"entry275","title":"飼い猫が食中毒！？対処法等の備忘録","date":"2018-07-14","modifiedDate":"2023-03-01","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbn

1ail/2018/entry278.webp","description":"猫の嘔吐が異常な時は要注意。うちの猫が拾い食いで食あたりに。衰弱して死にかけました。猫の食中毒の具体的な症状、対処法や医療費等をメモしておきます。","tags":["ペット","ペットの病気"],"body":"猫の嘔吐が異常な時は要注意。うちの猫が拾い食いで食あたりに。衰弱して死にかけました。猫の食中毒の具体的な症状、対処法や医療費等をメモしておきます。 💡 この記事でわかること 飼い猫が玉ねぎなど、猫が食べてはいけないものを食べてしまったときの対処法 動物病院の対応や費用の目安 飼い猫の食中毒処置後の自宅での過ごし方 いつもの晩酌、トイレに行った隙に事件は起こった うちの猫：チョコボ（5歳くらいのオス）は保護ネコです。野良ネコ時代の意地汚さは健在で、好きあらば人間様の食べ物を狙ってきます。 私は基本毎日晩酌しています。その日もいつものように晩酌していました。ほろ酔いで油断してトイレに行った隙にチョコボはテーブルに残したカレー風味のサラダチキンの袋をなめてしまいました。 すぐに取り上げましたが、奴はしめしめといった顔をしていました。 翌日、飼い猫の容体が急変（食中毒の具体的な症状） 明け方、チョコボが激しく嘔吐（えず）く音で目を醒ましました。最初はいつものように毛玉を吐いてるだけだと思っていました。 しばらくすると落ち着いたので、いつものように餌を与えました。半分ぐらい食べたところで、食べるのをやめてしまいました。 うちのネコは食べるのが生きがいらしく、とにかく意地汚くて食いしん坊。なので異変は感じていました。 少し経つと、さらにゲーゲー吐き始めました。 食べたものを全て吐ききってもさらに吐き続けました。どんどん顔がゲッソリし、最後は肩で息をする始末。心配ではあったけどネコを家に残して会社に行きました。 仕事中も気になって仕事が手につきませんでした。今までみたことのない体調の変化だったので「帰ったら、チョコボが死んでいたらどうしよう」ということが頭をよぎって離れません。 事情を説明して、早退することにしました。 帰宅したら、相も変わらず弱りきった姿のチョコボ。苦しそうに肩で息をしています。いつもは元気に走り回っているのですが、微動だにしません。 もうこれは病院に連れて行くしかない！チョコボを移動用のゲージに入れて、タクシーを呼んで動物病院に連れて行くことにしました。 初めての動物病院 それまで目立った病気をしたことがなかったチョコボ。 移動中もゲージから不安そうな表情かつか細い声でニャーニャー鳴いていました。 病院に着くと、体重を計り、体温を測り、血液検査。 熱が少しあり、脱水症状。しかも肝臓の数値が悪かったので症状からおそらく食中毒とのこと。思い当たる節は昨日のカレー味のチキンサラダしかないので多分それだろうという話になりました。 原材料に香辛料と味付けに玉ねぎが使われています。玉ねぎはネコにとっては毒 です。場合によっては死に至るそう。おそろしー。皆さんも気をつけてください。 その後、肝臓の数値を戻す（らしい）注射と脱水を緩和する点滴もどきの注射を受けました。 ネコを本格的に点滴させようと思ったら一日預けなければいけないそうです。その代わり点滴もどきを打てば、肩甲骨の間に水分をため、毛細血管から水分をじんわり吸収させていけるそうです。おかげさまで日帰りできました。 ちなみに、肩甲骨の皮膚を引っ張ってすぐに戻らない時は脱水が進んでいる とのことでã

1™ã€‚ 先生は至って冷静で、「大丈夫、大丈夫」という調子。拾い食いからの中毒はよくある事案なんだと思いました。 治療費は約1万2000円でした（涙）。 初診料 血液検査 点滴 注射 その他諸々 まあ、命には変えられないので、…勉強代です。 病院での食中毒の処置後のケア 処置後も油断大敵です！動物病院での処置後、私がやったネコへのケアをご紹介します。獣医さんのアドバイスも含みます。 エサはウェット系に切り替える ドライフードに比べ、ウェット系のエサは匂いが強く食欲を駆り立てるそうです。しかも水分約80%以上含むので、脱水ネコにはもってこいです。 ちなみにうちで、与えたのはこのちゅーる。 水分の含有量は90%以上。チョコボにとってはお盆や正月、クリスマスにしか食べることが許されないご馳走。通常はドライフードの上にかけて食べさせています。 この時ばかりはさすがに弱りきっていてエサ箱から食べてくれませんでした。仕方ないので手のひらに置いて口に運んでやりました。少しずつですが食べてくれるようになりました。私の体温で温まったのが良かったようです。 銀のスプーン 三ツ星グルメ ジュレ まぐろ・かつおにしらす・かにかま添え(35g)posted with カエレバ楽天市場で調べるAmazonで調べる ネットで情報を調べると軽くレンジでチンして人肌程度に温めてやるのもよいそうです。温めると匂いも強くなり、食べてくれる確率が上がるそうです。 経口補水液をスポイドなどで与える 獣医さんからは経口補水液を水分補給のために与えていいとのことでした。 もちろん水飲み用の容器に経口補水液を入れたところで飲んでくれないのはわかっていました。 うちにたまたま、ネイリスト時代エアブラシ洗浄に使っていたボトルにノズルがついている容器があったã

1®ã§åˆ©ç”¨ã™ã‚‹ã“とにしました。 これに経口補水液を入れて少しずつ口に含ませていきました。 普通のご家庭にはないと思うのでスポイドとかでも大丈夫だと思います。 水分補給には電解質がいいのですが、間違っても人間用のポカリスエットなどを与えないでください。ネコは腎臓が弱い動物です。ポカリスエットには塩分が含まれていますので、腎臓に負担がかかります。 廣貫堂 エブリサポート 経口補水液 パウダータイプ(6g*10包入)posted with カエレバ楽天市場で調べるAmazonで調べる 赤ちゃん用のポカリスエットならOKと他のブログで見ましたが、念のためどんなものを飲ませたらいいか獣医さんによく相談してください。 食中毒の症状が回復しなければ、再度動物病院へ うちの子の場合3日程度したら食欲も戻りました。 今ではすっかり、意地汚い元どおりのチョコボで、好きあらば盗み食いを目論んでます。 どのネコちゃんも同じように回復するとは限りません。なので2、3日経っても回復の傾å

1‘が見られない場合は迷わず病院へ連れて行くことをオススメします。 まとめ ネコの食中毒防止にはネコが食べたくなるようなものを届くところに放置しないのが一番です。 それでもうっかりすることはあります。もし、そんな時は早めに動物病院に連れて行き、処置後のケアを十分してあげてください。 ネコも大切な家族。大切にしてあげてください。 最後までお読みくださり、ありがとうございました。","noindex":true},{"slug":"entry274","title":"web デザイナー 未経験が揃えるべきポートフォリオ。職業訓練校で周りの3倍勉強する覚悟","date":"2018-06-19","modifiedDate":"2026-07-11","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2018/entry274.webp","description":"Webデザイナー未経験からどう食べていく？職業訓練校のWebデザインからフロントエンドエンジニア未経験で就職を掴んだ私が、綺麗ごと抜きの現実を明かします。かっこよさではなく、企業が求める「使える人間」として最速で材料を揃え、人生を切り開くヒント。","tags":["講師","キャリアアップ・転職"],"body":"未経験からのWebデザイナー、フロントエンドエンジニアは無理だよ。。。 そんなこと思ってませんか？ 他業種からの転職を目指し、職業訓練校のWebデザインクラスやスクールの門を叩きたい人は多くいます。 現在の私はフィリピンのセブ島で Web 開発企業を経営していますが振り返れば、私のリスタートは常に崖っぷちの連続でした。 子どもの病気をきっかけにそれまでの美容キャリアをすべて手放すことになり、失意の中で職業訓練校の門を叩きました。未経験からWebコーダーの道を歩み始め、日本のIT企業でテクニカルディレクターまで上り詰めました。その後セブ島へエンジニア転職、そしてコロナで即無職。それでもこの島で生きていくと腹をくくり、貯金ほぼゼロ、コネも資本もない状態から泥臭く手続きを進めて会社を設立しました。 大丈夫、キャリアなんて何度死んでも人生は終わりません。やり直したいと思ったときから、新しいチャレンジは始まっています。 デザイナー志望からフロント エンド エンジニア 未経験で現場に潜り込み、最終的に海外で起業するに至った私の実感をベースに、企業が本当に求めている人材とはなんぞやを綴りました。今の足踏み状態を打破し、自分の選んだ道を正解にしていくための参考として、ぜひ最後まで読んでみてください。 職業訓練校のWebデザインやスクールからリスタートを目指す君たちへ 断っておきますが、今日は夢や理想の話なんぞしません。どこぞに属しているかとか、キラキラしたお話は一切しません。正直にリアルな話をさせていただきますので、読みたい人は覚悟してお読みください。 IT業界に行こうと思ったきっかけ 私はもともとはネイリストやメイク講師。地元の専門学校やカルチャースクールで教壇に立つ日々を送っていました。しかし、華やかに見える世界とは裏腹に、道具はすべて自持ちで賃金は底の底。 何より変則的な勤務体系は、小さな子どもを抱える身にはあまりに厳しかったです。子育てとの両立に限界を感じて一度はそのキャリアを断念し、土日休みの会社へ再就職。そこでは自分の才能が活かせず、大切なキャリアが日に日に死んでいくような焦りばかりが募っていました。 どうせこれまでのキャリアが死んでしまうなら、一刻も早く新しいチャレンジをして傷口が浅いうちに人生をやり直そう そう一念発起して退職し通ったのが職業訓練校のWebプログラミングのコースでした。 職業訓練校からフロントエンドエンジニア未経験で就職して学んだこと 職業訓練校では HTML、CSS、JavaScript、PHP を学びました。メイクさんだったこともあり本来はデザイナーになりたかったã

1®ã§ã™ãŒã€ã‚¿ã‚¤ãƒŸãƒ³ã‚°çš„にたまたまプログラム系のコースしかなかったです。 今となってはコード書くほうが楽しかったり、直感より解決思考が向いてましたので、この道に進んでよかったと思ってます。 あの時、職業講話で現場の声が刺さらなければ今の私はいない 私の通っていた職業訓練校では現場で働いている人の声を聞かせてくれる 職業講話 がありました。たまたま職業訓練校出身の方が職業講話に来てくださりました。 特に印象的だったのは、「 学校で学ぶ3倍勉強しないと就職できないよ 」と言う言葉。 ついでに、 普通のことしてたら、 たかが3ヶ月でクリエーターになれるわけないだろ。 という心のド直球な声も聞こえてきました。 その時はたった数ヶ月でクリエーターになったその人が実践したことを真似るのが、クリエーターになる近道だと思いました。 クソ真面目な私は、子育ての合間に勉強しまくりました。教科書は3回やりました。今考えると何とも効率の悪いやり方ですが笑。この言葉がなかったら今の私はいないのでとても感謝してます。 私がやっているフロントエンドエンジニアのことだけ言わせていただくと、進化が早すぎて書籍なんてWebにある情報に追いついてないことがほとんどです。 編集や出版を待っている間に新しい技術が生まれちゃうんですから笑 もちろんとはいえ、良書は山のようにありますよ！ 人が人であり変わらないように根本的なマインドは学ぶことが可能です。 特に山崎 大助さんの レスポンシブWebデザイン「超」実践デザイン集中講義 は随分助けられました。 この本も何度もやり込みました。 ついでに言っておくと、先生の質や、授業の質に不満を言っているうちは未来がないと思ってください。 自分の人生は自分で切り開くものです。 リスタート組で本気でクリエーター目指したいなら、しのごの言う前に手を動かして今の技術を追いかけてください。ただし、 効率よく です。今時スポ根なんて流行りませんし、ちょっと工夫すればカンタンに情報は手に入りますし、身につけるのも可能です。 努力が報われる神話は昭和で滅びましたよ！ 遠い過去の話ですよ笑 Webデザイナー未経験のリアルな現実と企業のホンネ 寝ても覚めてもコードを書くのが好き、イラレのパスどりや画像加工ならいつまでもしていたい人はスルーしてください。そう自然に思って行動できる方はクリエーターに向いてます。 クリエーターになった自分に憧れているだけ の方にとってはこの業界はちょっと厳しいです。 企業は即戦力が欲しいんです。なので、もし本格的にクリエーターになりたいなら効率よく最低でも職業訓練校にいる周りの人の3倍の技量を身につけてください。決して3倍勉強する必要はありません笑。それでも、リアルに業界に入ってしまうと下の下だと思っておいた方がいいです。 経験値は圧倒的に足りない のですから。 就職後の方も、この業界ではスキルを身につけたり学び続ける必要はありますので覚悟しておいてください。 理想と現実のギャップを覚悟しろ。そもそも企業が欲しい「使える人間」の正体 なんども言いますが 現実と理想は違います 。 かっこいいからと言ってデザイナーやコーダーになりたいと思ってるかもしれませんが企業はそんな人材は欲していません。かっこいい人間じゃなくて 使える人間 が欲しいのです。 求められてるのはWeb担だったり、Web解析できてコンテンツ作れるSEOが分かる人材だったりします。地方でもEC系で商品発送やお客様とのメールのやりとりなどしながら合間で自社サイトの改修やバナーをコツコツ作ってほしい企業なら結構あるんじゃないでしょうか。 そういう方面も視野に入れて就活すると勝機はグンと高くなります。 100%理想を叶えるなんてほぼ無理です。私ももともとはデザイナーになりたかったã

1®ã§ã™ãŒã€ä»Šã¯ãƒ•ãƒ­ãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã§ã™ã€‚すでに優れたデザイナーは山のようにいるし同じ土俵で戦うのは無理でした。コード書く方が面白いし、今ではならなくてよかったとさえ思ってます。 ここで言いたいのは1ミリでも理想に近い職種に就くのがゴールであって、理想を100%叶えることではありません。私たちはご飯を食べていかなきゃいけないのですから笑。夢ばかり見て負け戦を挑むくらいなら、少し視野を広げたり、価値をずらして自分のつきたい職種にニアピンな仕事を探してみてください。 職業訓練校でのゴールはご飯を食べていく＝就職することです。 頭でっかちは命取りです。 自分の選んだ道。何があっても人のせいにしたり後悔するな これはどんな時でも言えることですが、 何があってもどんなことがあっても 最後は人のせいにしない こと。 人間だから腐ることもあるし、しんどいこともあると思います。私も幾度となく悩み、腐り、落ち込んできました。そんな中でも救われこの業界でやってこれたのは、私がやっていることを見てくれて評価してくれる人が結構いたからです。おかげさまで幾度となく救われてきてめちゃめちゃ感謝してます。 最終的にどう行動するかが大切ですね。 最終的には自分の就きたい職種につけないかもしれません。でも職業訓練校やスクールでリスタートにチャレンジしたことも自分の考え方一つで価値のあるものに変わります。決してムダにはなりません。 誰かにススメられるがまま選んだ道でも、 最終的には自分が選んだということを忘れないで ください。どんな結果になろうと人のせいにしたり後悔さえしなければ道は拓けますから。 まとめ：Webデザイナー未経験が就活で使えそうな材料（ポートフォリオ）は一つでも多く揃えろ 就活で使えそうな材料は一つでも多く揃えろ くれぐれも言いますが、職業訓練校に入ったのであれば就職することがゴールです。 自分の経験上のお話ですが、職業訓練校に頼りっぱなしだと就職は遠のきます。 一日でも早く就職したければ、スキルを一個でも多く身につけたり、毎日せっせとポートフォリオなどの材料を揃えてください。デザイナー目指すのであれば毎日バナーを作ってください。エンジニアやコーダになりたいなら、一日で作成できるような1ページ完結型のサイトのコーディングするのもオススメです。 最初は真似で構いません。むしろ、下手なオリジナリティを発揮するくらいなら真似してください。バナーやサイトのおまとめサイトから気に入ったデザインなんかカンタンに見つけられます。教材は山のようにあるんです。 最初は下手でいいです。淡々と数をこなすことが大切です。コツコツ毎日作っているうちにスキルがブラッシュアップされていきます。さらに覚悟はいりますが他人に見てもらったり評価してもらうとさらに上達します。 ポートフォリオを作る時はその中から良いものを選べばいいわけですから。 人の意見に程よく耳を傾けろ 夢見がちな時は冷静にいることが難しいです。だからこそ、人の意見に耳を傾けてください。 それによく考えてみてください。転職ってかなりの死活問題ですよ。一歩見誤るとご飯が食べていけなくなります。 ただし鵜呑みじゃなく、良いと思う意見を自己責任で取り入れてみてください。 特に、自分のことを俯瞰できず「私はこういう人間なんだ」と決めつける人はほどやるべきです。他人から見れば全く別の姿にè¦

1‹ãˆã¦ã‚‹ã‚‚んです。 多少のハッタリはいいけどウソはバレるよ 同じ職業訓練校のバッチメイトで、出来もしないことを嘘ついて虚勢を張って失敗した人もいます。企業側もバカじゃないからバレます。 そんな人に伝えたいのは 自分の中にある根拠のない自信は捨ててしまえ！ 何とかなることは根拠がないと何とかならないです！！！ かと言って過小評価も絶対ダメです。 等身大の自分でいることが大切。 自分で判断できないなら、どのくらい実力があるか判断できる人に聞きましょう。自分を客観視して何が武器で何が足りないのか、よく分析しましょう。 多少のハッタリはいいけど、そのハッタリを将来的に補えるかよく考えてからにしましょうよ。 最終的には人柄が重視される スキルがなくても伸び代があれば採用の確率はグーンと上がります！ イマドキのIT企業はスタッフにEQ（心の知能指数）を求めています。 中国のEC大手のアリババ創始者、ジャック・マー氏も人に大切なのは「IQ（知能指数）」「EQ（心の知能指数）」「LQ（愛の知能指数）」と言ってます。 IT業界といえど所詮会社って人の塊。だから、人間性が大切なんですよ。 みかんが一個腐ってたら全部腐るように組織も腐ります。 つまり、仕事の質が落ちたり生産性が下がるということです。 中には職業訓練校卒で未経験でも就職せずに運よく独立できた人も知ってます。大抵は勘がよかったり、元々人間力が高かったり、たまたま運が良かった、才能がある人で、別格と思った方がいいです。 ネガティブな理由で独立した人は大抵失敗します。私も一旦仕方なくフリーランスになりましたが、食べていくために再び会社に勤めることにしました。世の中そんなに甘くないと思いつつ、現在はフィリピンで起業するという狂気じみたことをやってしまいましたが笑 この業界で生きていくと決めたならお作法を知るために、最低一度はWeb業界の企業に就職することをオススメします。 最後に。自分の強みを知れ Webクリエーターを夢見て、職業訓練校やスクールの門を叩く人は多いと思います。 他業種からの転職も決してネガティブではありません。前職で得たスキルが、Web一本でやってきた人とは違うものを持っていて思わぬ才能を発揮する方も目の当たりにしてきました。 また、デザイナーやコーダ、プログラマばかりがこの業界の全ての仕事ではありません。自分にあった仕事を見極めて就活に臨んでください。 幾度となく苦渋を舐めてきたリスタート組の私だから言える本音を綴らせていただきました。 最後まで読んでくださりありがとうございます。","noindex":false},{"slug":"entry272","title":"ヒロフロ CMS部でコンクリの8を触ってもらいました","date":"2018-06-17","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2018/entry272.webp","description":"6/2広島フロントエンド勉強会でconcrete5の特徴や運用についてお話、みなさんに体感していただきました。","tags":["concrete5"],"body":"2018/6/2広島フロントエンド勉強会でconcrete5（現concreteCMS）の特徴や運用についてお話、みなさんに体感していただきました。 concrete5（現concreteCMS）ってなんぞ？ concrete5（現concreteCMS）はCMSの一種でブロック型CMSでは国内シェアNo.1。 concrete5（現concreteCMS）とは？ 数年前に東京から佐々木 多生さんがWeb Touch Meetingでconcrete5（現concreteCMS）のお話をしてくださってから、しばらくして「広島でコンクリ」というコミュニティを立ち上げ、今に至ります。 現在、コミュニティ「広島でコンクリ」は他のCMSもフレキシブルにナリッジシェアできるようヒロフロ CMS部に吸収してもらいました。 広島フロントエンド勉強会 個人的には勉強会が細分化して分散しすぎるのは割と問題だと思っている。 いろんなCMSの勉強会をしたいのでCMS部作りました CMSシェアはWordPressが一番多いですが、もともとブログ用に作られたCMS。作りたいサイトや目的に応じて向き不向きを取捨択一するのが制作側の使命だと思ってます。 いろんなCMSの勉強がしたいでしょ？！ どのCMSも一長一短あります。目的に応じて使い分けれるようになりたいというのもあるので、今回広島フロントエンド勉強会の主催者、井上くんにお願いしてCMS部を作ってもらいました。広島で一番メジャーだったWeb系の勉強会 Web Touch Meetingが昨年終わってしまいIT系の勉強会がすっかり減ってしまいました。 WTMが無くなって多分みんな困ってると思うし、ナリッジシェアとして二月に一度くらいCMS部が開催できればなぁと思ってます。 concrete5（現concreteCMS）の特や向いているサイトをご紹介 たくさん入力項目があったり、内容がコロコロ変わるサイトに向いてます。 割と急な仕様変更に強いCMSです。 おかげさまで今まで何度となく命拾いしてきました。 いろんなサイトを作ってきましたが、不動産系のサイトは特に相性が良かったです。 大規模なサイトもオススメ。お知らせだけならWordPressで十分です。 メリット 自由度が高い がっつりカスタマイズもできますが、簡易サイトまで柔軟に実装可能です。 編集権限を詳細に決められる 誰にどの部分を編集させるか、そしてその変更に対して公開する云々のロールを詳細に割振れます。チームで運用する際に向いてます。 デメリット ç®

1¡ç†ç”»é¢ãŒé‡ã„ 多機能な分重いです。あまり機能が必要ないならWordPress\\b > 静的サイト > FBページという感じで無理にCMS化も必要ないと思います。ついでに言っちゃうと、なんでもかんでもなんでもかんでもWordPressオススメする会社ははーっきりいってお客さんのこと考えてないか、物事の本質が分かってないなーと思ってます。 サーバーを吟味する必要がある 割とサーバーを選ぶ気がします。今まで、レンサバでPHPのモジュールが足りないせいで動かなくてあわわわっとなった経験も。。。WordPressは雑食というか、割となんでもいけます。コンクリは大手のレンサバ、例えばサクラ、X-server、CPIは難なく動きました。 実際に触ってみる 参加者のみなさんに実際にconcrete5を触ってもらうためにアカウントを発行しました。今回は運用する側の立場になって触ってもらうのが目的。 開発だけしていると更新する際どんな点が大変かとか見えなくなりがちです。ソースコードを読み解いていくのも大切ですが、運用するお客様の立場を体感してもらえたなら私の目的達成です。 concrete5（現concreteCMS）の機能内でカンタンにブロックを追加したり色々ページを追加したり触ってもらいました。 もともとconcrete5（現concreteCMS）は一度に100人ぐらいがアクセスして、ごにょごにょしても動く強固なCMSとして開発されました。 私の借りている安いレンサバだとさすがに落ちましたが笑、サーバーのプランを吟味したりカスタマイズすれば大丈夫でã

1™ã€‚ 認証機能を試してもらう 誰かが書いた記事を承認権限がある人が確認して公開するというコンクリの機能を体感してもらいました。 結構高尚な機能だと思いますが、この承認機能をconcrete5では標準搭載されてます。 とはいえ、どう承認されるのかを体感してもらわないとわからないと思うので、希望者に協力してもらいました。 複雑な多段階認証が必要であれば、エンタープライズ版(有償)を是非ご検討ください。こちらであれば静的HTMLも吐き出してくれます。 まあ、中〜小規模であれば一段階の認証で十分使える機能です。 設定も難しいプログラムを書く必要がないので、興味ある方は是非試して見てください。 まとめ レポートが遅くなってしまいましたが、今回CMS勉強会にたくさんの方にご参加いただき感謝してます。 今後も広島フロントエンド勉強会のCMS部でいろんなCMSの情報を発信・共有していきますので宜しくお願いします。 おまけ：ライトニングトークでご紹介いただいたコンクリAPI化を試してみた その後、ライトニングトークでご紹介いただきましたconcrete5（現concreteCMS）のAPI化やってみました。 また記事をまとめますので乞うご期待。","noindex":true},{"slug":"entry266","title":"【VS Code】縦一括の「矩形選択・範囲選択」をマスター！便利ショートカット一覧表","date":"2018-06-11","modifiedDate":"2026-06-08","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2018/entry266.webp","description":"VS Codeで効率が劇的に変わる縦一括の「矩形選択（範囲選択）」をどこよりも噛み砕いて解説！やらかしを即復元できる「タイムライン（変更履歴）」機能や、昨今話題の「拡張機能のセキュリティリスク（削除方法）」、コーダー必須のショートカット一覧表まで網羅。","tags":["VS Code"],"body":"コーディング初心者に贈るVS Code完全マニュアル第1弾！ イãƒ

1³ã‚¹ãƒˆãƒ¼ãƒ«ã‹ã‚‰æ‹¡å¼µæ©Ÿèƒ½ã€ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã¾ã§ã€ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°åˆå¿ƒè€…でもすぐにフロントエンド（HTML、CSS、JavaScript）を効率よくコーディングできるようにするためのセッティング方法を詳しく解説。矩形（範囲）選択などの強力なショートカット集も最後にまとめています。 💡 検索で大人気の 縦一括で編集できる「矩形選択（範囲選択）のキホン」 や、開発スピードが劇的に上がる 便利な「ショートカット一覧表」 も記事の後半にまとめています。 この記事のゴール：VS CodeをインストールしてHTML、CSSなどを超快適に書けるようにセッティングするまで VS Codeの基本操作方法とフロント系のコードを快適に書くためのセッティング方法を初学者向けにまとめました。 本文中に登場するショートカットは主にMac中心に紹介してますが、記事最後にWindowsも含めた一覧を用意しましたのでそちらを参考にしてください。 先にお伝えしておくと、めちゃめちゃ記事が長くなりました。。。 テクニカルな部分は「初心者コーダーに贈る！超軽量高機能エディターVS Code入門2」へ記載しました。Gitやスニペット、ターミナルなどに知りたい方はこちらをご覧ください。 Visual Studio Code とは？ Visual Studio Code（以下、VS Code）は、Microsoftによって開発された最高峰のソースコードエディターです。 Windowsはもちろん、Mac、Linuxでも使えます。 高機能にもかかわらず無料で使用できます。VS CodeはElectronというプラットフォームで作られています。 VS Codeは以下からダウンロードできます。 Visual Studio Code DL 余談ですが、昔はサクラエディター、テラパッドや秀丸というテキストエディターがありましたが、シンタックスハイライトでタグが色分けされるくらいで、現在みたいにインテリセンス（自動補完機能）なんてありませんでした。当時はいちいちググるのも面倒だし、タグやプロパティをほぼ丸暗記していました。 いやー、いい時代になった。 VS Codeの個人的推しポイント 初心者から手練れ（経験豊富な人）まで、私のオススメする4つの推しポイントをご紹介します。 1. インテリセンスが素晴らしい 補完・文字の候補を出してくれるアレ（自動補完機能）が大変優れてます。うろ覚えでもじゃんじゃんコード書けます。 2. 拡張機能が豊富 拡張機能がとにかく豊富です！私はブログの下書きもVS Codeを使って、快適に執筆しています。 3. 付属ターミナルが便利 独自のUIの付属ターミナルがあるので、いちいち別アプリでターミナルを起動する必要がありません。 4. Git 連携がカンタン 切り替えることなくシームレスにコミットできます。 この先はVS Codeをダウンロード、インストールして読み進めてみてください！ Macの方はアプリケーションフォルダーにぶち込んでインストール終了です。Windowsの方はインストールウィザードにしたがって進めればOKです！ 英語が苦手な方へ。まずは日本語パッケージをインストール 英語が苦手な方はまずは日本語パッケージをインストールしましょう。 左側バーの4つめの四角いアイコンをクリック（もしくはショートカットCmd+Shift+X）で拡張機能を開きます。 検索バーに「Jap」ぐらい入力したら「Japanese Language Pack for Visual Studio Code」が表示されるので、インストール。 完了したら、右下に表示される「Restart Now」をクリック・VS Codeを再起動します。 VS Codeのざっくりとした歩き方 日本語化が無事できたところで、VS Codeのカンタンな使い方を説明します。 ※ VS Codeの見取り図 アクティビティバーとサイドバー VS Code左手にある以下のメニューをアクティビティバーと呼びます。4 つの主な機能があります。 各メニューをクリックするとサイドバーが開きますが、「Cmd+B」で必要に応じて開閉しましょう。 1. エクスプローラーï¼

1ˆCmd+Shift+E） ファイルやディレクトリの管理ができます。 2. 検索と置換（Cmd+Shift+F） ファイル類をまとめて検索したり置換できます。検索・置換に関しては、こちらにより詳しく書いてあります。 3. ソース管理（Ctrl+Shift+G） Gitでソースのバージョン管理ができます。 4. 拡張機能（Cmd+Shift+X） 拡張機能をここから探してインストールできます。初学者コーダーオススメの拡張機能は後述する便利な拡張機能にまとめます。 ⚠️ 【重要】昨今(2026)のセキュリティリスクと拡張機能の削除方法 最近、 「公式にそっくりな偽物の拡張機能」 や、「有名だった拡張機能が乗っ取られ、アプデで悪意あるコード（ウイルスなど）を仕込まれる」 という悪質なアタックが世界中で急増しています。 誰もが自由に公開できる場所だからこそ、以下の自衛を必ず心掛けてください。 青いチェックマーク（公式認証バッジ） がついているか確認する ダウンロード数が極端に少ないものは避ける 使わなくなった拡張機能は放置せず、すぐに削除（アンインストール）する 🗑️ 拡張機能の削除方法： 1. 拡張機能の検索欄に @installed と入力（またはインストール済み一覧を見る） 2. 削除したい拡張機能の右下にある 「歯車マーク」 をクリック 3. メニューから 「アンインストール（Uninstall）」 を選択するだけで完全に削除できます。 5. やらかしても大丈夫！VS Codeの自動バックアップ「タイムライン（変更履歴）」機能 「コードを書き換えたら動かなくなった…！」「さっきの綺麗な状態に戻したい…」 そんな時もVS Codeなら安心です。 Gitなどで重い管理をしていなくても、ファイルを保存した歴史（バックアップ）をエディタが自動で裏にすべて記録してくれています。 サイドバーの左下（またはエクスプローラー下部）にある 「タイムライン（TIMELINE）」 パネルを開くと、過去に保存した履歴が「○分前」のようにずらりと並んでいます。 見たい履歴をポチッとクリックするだけで、上図のように 「過去のコード（左）」と「現在のコード（右）」を並べて、どこを書き換えたのか一瞬で比較・確認 できます。 これさえ知っておけば、初心者のうちも恐れずにどんどんコードを書き換えて実験できますよ！ ステータスバー 下のバーはステータスバーです。 行＆列 現在の行と列がわかります。文字を選択すると、現在選択している文字数もここに表示されます。 スペース タブの設定スペースの数を指定できます。 エンコードの設定 エンコードの指定ができます。基本UTF-8です。 改行コードの指定 デフォルトはLFです。 言語モードの指定 PHP、CSS、HTMLなど、使いたい言語にモードを変えることができます。言語ごとにシンタックスハイライトがオンになり、ミスをチェックしやすくなります。 設定から配色テーマを変更しておく 一日中コードを見るのでツールの配色テーマは大切です。アクティビティバー右下歯車マークから変更しておきましょう。デフォルトはDark+です。 VS Codeの設定を変更しながらコードを書いてみよう ではそろそろ、VS Codeの設定を変更しながらコードを書いてみましょう。 最初の一歩・ファイルで開くかワークスペースで開く 基本的にWeb制作をする際はディレクトリー（フォルダー）単位で管理します。適当なフォルダーをデスクトップに作っておきましょう。 ショートカット「Cmd+O」でワークスペースやファイルをひらけます。 フォルダーやファイルを追加してコーディングしてみる 「Cmd+Shift+E」でエクスプローラーを開き、新しいファイルを追加するショートカット「Cmd+N」を押します。ファイルをワークスペースに追加したら、「Cmd+S」でファイル名を index.html として保存するだけです。 コーディング補助機能Emmetでコーディングしてみる VS Codeの初期機能には、HTMLやCSSの入力を劇的に爆速化するEmmet（エメット）が標準搭載されています。 Emmet チートシート Emmetの展開ショートカットは Tabキー です。 エディター上で ! （半角）を入力した後、Tabキー を押すだけで、HTMLの骨組みとなるコードが一瞬で展開されます。 コーディングしやすいように設定を変える（Google規約準拠） HTML、CSSのインデントは、Googleのコーディング規約でも推奨されているソフトタブ（スペース2個）に設定するのがモダンで綺麗です。 Google HTML/CSS Style Guide インデントを変えるためには「Cmd+,」で設定を開き、Editor:Tab size を 2 に

1設定します。 右上にあるファイルマークをクリックして setting.json を開き、以下の設定をまるごと追加してみましょう。半角スペースの可視化やEmmetの日本語化、終了タグへのコメント自動挿入などが一気に有効化されます！ 設定が完了したら、body の中で以下のEmmetを入力して Tabキー を叩いてみてください。 スペースが ・ で表示され、インデントのズレが一目瞭然になります！ CSSファイルを追加してみる title タグの下に link:css と入力してTabキーを押すと、即座にスタイルシートのリンクが生成されます。 href 内の style.css を Cmd（Ctrl）を押しながらクリック すると、その場で新規CSSファイルを作成・追加できます。 CSS側でも、例えば c#333 ＋ Tabキー で一瞬でプロパティが展開されます。 編集が10倍速くなる！「矩形（くけい）選択」って何？ 下のショートカット表にある 「矩形選択」 や 「マルチカーソル」 という言葉、ちょっと難しそうに見えますが、使いこなすと編集スピードが爆速になります！ 一言でいうと、 「縦一列をガバッと同時に選んで、複数の行をいっぺんに書き換える機能」 のことです。 どんな時に使うの？ 5行ある文章の頭に、一発で全部「・」を付けたいとき 縦に並んだデータの不要な部分を、一気に縦にズドーンと消したいとき 🐾 まずはこれだけやってみて！（一番簡単な使い方） 下の表にある一番上の操作を、今すぐこの画面で試してみてください。 1. Windowsなら Shift + Alt、Macなら Shift + Option を押しっぱなしにする 2. そのままマウスで、縦にビューッとドラッグする これだけで、選んだ行すべてに「チカチカする縦の棒（カーソル）」が同時に現れます。そのまま文字を入力すると、すべての行に同時に文字が書き込まれる感動を味わえます！ キーボードだけで美しく選びたい時や、ページごと豪快に選びたい時は、下のVS Code必須ショートカット一覧 を使ってみてくださいね。 VS Codeを拡張しよう Prettier Formatterをインストールしよう コードがどんなに散らかっても、保存時に一瞬で超綺麗に整形してくれる最強フォーマッタ Prettier を導入しましょう。 右上にあるファイルマークをクリックして setting.json を開き、既に書かれている設定の末尾（閉じカッコ } の手前）に、以下のコードをカンマ（,）で繋げて追記しましょう。 コーディング初心者なら絶対入れとけ！オススメ拡張機能のご紹介 Live Server ボタン一発でローカルサーバーを起動。ファイルを保存するだけでブラウザが自動リロードされる超必須プラグインです！ Path Intellisense 画像やリンクのパス（./images/...など）を爆速で自動補完してくれます。 htmltagwrap 囲みたいコードを選んで Option+W を押すだけで、一瞬で親タグでラップできます。 まとめ・VS Codeを使いこなしてコーディング上手になろう！ VS Codeは今や世界シェアNo.1の絶対的テキストエディターです。Git連携も強力で、これが無料で使えるのは信じられません。 作業効率を高めるショートカットとEmmetをマスターすれば、コーディングの速度は2倍にも3倍にも跳ね上がります。作業の速さはコーダーにとって圧倒的な価値になります。ぜひ手に馴染むまで使い倒してください！ おまけ・VS Code必須ショートカット一覧 Windows ショートカット公式PDF Mac ショートカット公式PDF 一般 | Windows | Mac | 概要 | | ------------- | ----------- | ---------------------------------------------------- | | Ctrl+Shift+P | Cmd+Shift+P | ★ コマンドパレットを開く | | Ctrl+P | Cmd+P | ★ ❤︎ クイックオープン（ファイルなどを探すのに便利） | | Ctrl+Shift+W | Cmd+Shift+W | ★ ウィンドウやワークスペースを閉じる | | Ctrl+Shift+N | Cmd+Shift+N | ★ 新しいウィンドウを開く | | Ctrl+K Ctrl+S | Cmd+K Cmd+S | キーボードショートカットを開く | キーボードショートカットからショートカットを当てと変更ができます。よく使う機能でショートカットが当たってないものは当てておきましょう。 ファイル操作系 | Windows | Mac | 概要 | | ------------- | ------------ | ---------------------------------------------------------------------------------------------- | | Ctrl+O | Cmd+O | ★ 既存のワークスペースやファイルを開く | | Ctrl+N | Cmd+N | ★ 新しいファイルを開く | | Ctrl+S | Cmd+S | ★ ファイルを保存 | | Ctrl+Shift+S | Cmd+Shift+S | ★ 別名でファイルを保存 | | Ctrl+K S | Cmd+Option+S | ★ すべてのファイルを保存 | | Ctrl+W | Cmd+W | ★ 現在のエディターを閉じる（開いているエディターがなã

1ãªã£ãŸã‚‰ãƒ¯ãƒ¼ã‚¯ã‚¹ãƒšãƒ¼ã‚¹ã‚‚閉じられます） | | Ctrl+K Ctrl+W | Cmd+K Cmd+W | ★ すべて閉じる | | Ctrl+Q | Cmd+Q | ★ VS Code終了 | エディター操作系 行単位の操作と開いているファイルをタブ切り替えでかなり作業が早くなります。 | Windows | Mac | 概要 | | ----------------- | ------------------------------- | ------------------------------ | | Ctrl+X | Cmd+X | ★ カット | | Ctrl+C | Cmd+C | ★ コピー | | Alt+ ↑ / ↓ | Option+↓ / Option+↑ | ★ 行の移動 | | Shift+Alt + ↓ / ↑ | Shift+Option+↓ / Shift+Option+↑ | ★ 行のコピー | | Ctrl+Shift+K | Shift+Cmd+K | ★ 行の削除 | | Ctrl+Enter | Cmd+Enter | ★ 空の行を下に追加 | | Ctrl+Shift+Enter | Shift+Cmd+Enter | 空の行を上に追加 | | Ctrl+Shift+\\\\ | Shift+Cmd+\\\\ | カッコ（()[]など）へ移動 | | Ctrl+] / [ | Cmd+] / Cmd+[ | ★ インデント追加・削除 | | Home / End | | 先頭・最後へ移動 | | Ctrl+Home | Cmd+↑ | ❤︎ ファイルの先頭へ移動 | | Ctrl+End | Cmd+↓ | ❤︎ ファイルの最後へ移動 | | Ctrl+↑ / ↓ | ⌃PgUp / ⌃PgDn | ❤︎ 上下の行の入れ替え | | Alt+PgUp / PgDn | Cmd+PgUp /Cmd+PgDn | ページの入れ替え | | Ctrl+Shift+[ | Option+Cmd+[ | ★ ❤︎ 次のタブのファイルへ移動 | | Ctrl+Shift+] | Option+Cmd+] | ★ ❤︎ 前のタブのファイルへ移動 | | Ctrl+K Ctrl+C | Cmd+K Cmd+C | 行にコメント追加 | | Ctrl+K Ctrl+U | Cmd+K Cmd+U | 行のコメント削除 | | Ctrl+/ | Cmd+/ | ★ コメントの追加と削除 | | Shift+Alt+A | Shift+Option+A | 空のコメント追加 | | Alt+Z | Option+Z | 文字の折り返しのオンオフ | マルチカーソル系 マルチカーソルは高機能エディターの醍醐味です。矩形選択などはよく使います。 | Windows | Mac | 概要 | | ---------------------------- | ------------------------------ | ------------------------------------ | | Alt+Click | Option+X | ★ カーソル追加 | | Ctrl+Alt+↑ | Option+Cmd+↑ | ★ カーソルを下へ追加 | | Ctrl+Alt+↓ | Option+Cmd+↓ | ★ カーソルを上へ追加 | | Ctrl+U | Cmd+U | 最後に追加したカーソルを削除 | | Shift+Alt+I | Option+Ctrl+I | 選択した行の最後の行にカーソルを追加 | | Ctrl+L | Cmd+L | 現在の行を選択 | | Ctrl+Shift+L | Shift+Cmd+L | 一致するすべての出現箇所を選択 | | Ctrl+F2 | Cmd+F2 | すべての出現箇所を変更 | | Shift+Alt+→ / ← | Ctrl+Shift+Cmd+→ / ← | 選択範囲を拡大/縮小 | | Shift+Alt+Drag | Shift+Option+Drag | ★ ❤︎ ドラッグしながら矩形選択 | | Ctrl+Shift+Alt+↑ / ↓ / ← / → | Shift+Option+Cmd+↑ / ↓ / ← / → | ★ ❤︎ 十字キーを使っての矩形選択 | | Ctrl+Shift+ Alt+PgUp | Shift+Option+ Cmd+PgUp | ページの上へ矩形選択 | | Ctrl+Shift+ Alt+PgDn | Shift+Option+ Cmd+PgDn | ページの下へ矩形選択 | よくやるのは十字キーを使っての矩形選択 >Cmd+←/→などで行の先頭や最後にカーソルを移動させ、まとめてタグを書き換えます。 選択や置換系 Cmd+Dは超便利で使いまくっています。 | Windows | Mac | 概要 | | ------------- | ------------ | ------------------------------------------------------ | | Ctrl+F | Cmd+F | ★ エディター内での検索 | | Ctrl+H | Option+Cmd+F | ★ エディター内での置換 | | Alt+Enter | Option+Enter | ★ 候補をすべて選択 | | Ctrol+D | Cmd+D | ★ ❤︎ 現在選択中の文字列と同じ次に出てくる文字列を選択 | | Ctrl+U | Cmd+U | 文字選択のUndo（選択前に1つ戻ります） | | Ctrl+K Ctrl+D | Cmd+K Cmd+U | 文字選択をスキップ | | Alt+C | Option+C | 大文字小文字を区別する | | Alt+R | Option+R | 単語で検索 | | Alt+W | Option+W | 正規表現を使用する |","noindex":false},{"slug":"entry244","title":"老犬の床ずれ防止とおすすめ大型犬介護グッズ。犬の床ずれを治るまで支えた排泄介助","date":"2017-10-10","modifiedDate":"2026-07-07","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbn

1ail/2017/entry244.webp","description":"大型犬介護グッズの選び方と老犬の床ずれ防止ケアを網羅。寝たきりの犬の床ずれが治るまでの対策や、排泄を清潔を保つ工夫など、過酷な多頭介護をやり切った老犬介護ブログだからこそ書ける実務ノウハウを公開します。","tags":["ペット","ペットの病気"],"body":"この記事は、「犬の床ずれ対策と大型犬介護の現実。老犬が寝たきりになり老衰の最期を迎えるまで」の続編です。 我が家ではセントバーナードやゴールデンレトリバー、ダルメシアンといった大きな犬たちを自宅で介護し、看取ってきました。前回は「たった5歳。脳の癌で死んだゴールデンレトリバー」と「高齢で足腰が立たなくなったダルメシアン」の壮絶な看取りの経験を綴りました。 今回の記事では、30kgを超える彼らの体を支えるために本当に役に立った大型犬介護グッズの選び方や、老犬の床ずれ防止マニュアルなど、具体的な体験に基づいたノウハウです。 一般的なメーカーの宣伝記事とは違い、おむつでの排泄を嫌がる頑固な犬との格闘や、できてしまった犬の床ずれが治るまで私たちが実践した工夫など、大型老犬介護ブログとしてのリアルな体験をベースにまとめています。 この記事でわかること 自宅で大型犬を看取るために必要となる環境と条件 ペティオなどの床ずれ予防用品や体圧分散マットの選び方 寝たきりになった犬の床ずれが治るまでの具体的なケア手順 おむつを嫌がる老犬の排泄介助と、寝床の清潔を保つ工夫 自宅で簡単にできる、寝たきりの犬のアンモニア・体臭対策 ペットを自宅で看取るのは、手助けなしでは難しい この記事は、自宅で看取ることを前提として話を進めます。 断言しますが、ペットの介護は一人では厳しいです。特に大型犬になると肉体的な負担が大きいです。 私は運良く6人家族だったのでみんなで協力しあい、大型犬を介護し看取ることができました。 それでも基本的には専業主婦だった母に大きな負担がかかりました。 ペットの介護も手助けなしだと厳ã

1—いものです。特に大型犬になると、排泄の処理や床ずれ予防など、定期的にやらないといけないことがたくさんあります。 できるだけ自宅で看取りたいのは分かります。しかし自宅で看取りたい方は覚悟してください。 日中家にいることができない方はペットシッターさんにお願いしたり、無理せず老犬・老猫ホームに預けることをおすすめします。 大型犬介護グッズの選び方と老犬の寝床・体圧分散の工夫 介護が必要になったら、最低限の準備が必要です。 すべてホームセンターやアマゾンで手軽に手に入ります。 おむつ おしっこマット おしりナップ（人間用でOK） クッション 柔らかいベッド ブランケット まとまった量をストックしておくと安心です。なので、アマゾンで頼むのが一番手っ取り早いです。 老犬の床ずれ防止のために！ペティオなどの床ずれ予防用品の活用法 大型犬の介護は大変です。とくに寝たきりになった場合は床ずれを起こします。 絶対に床などに寝かしっぱなしにしないで、柔らかいベッドを用意してあげてください。 ペット用の床ずれ防止クッションなどもありますが、我が家は座椅子を代用していました。 大型犬のが寝たきりになったベッドは自重ですぐクッションのふかふか感がなくなってしまいます。 しかも、おしっこが漏れて汚してしまうこともあります。 頻繁に買い換える必要があります。消耗品と割り切り、5000円位を上限にできるだけふかふかしたものを用意することをおすすめします。 ベッドやクッションを用意してあげるだけでは床ずれは防止できません。 定期的にマッサージしたり向きも変えてあげます。スキンシップも兼ねてやってあげると喜びます。 ブランケットも床ずれ対策に役立ちます。すぐ臭くなるので複数用意しておくといいです。 老犬は体温調節機能が下がるので、冬場は寒さ対策にもなります。 犬の排泄を介助する 犬の排泄介助必需品といえば、犬用おむつです。 大型犬でいちばん大変なのは排泄の介助です。 ドギーマン ペットの紙オムツ LLサイズ(10枚入)posted with カエレバ楽天市場で探すAmazonで探す おもらし対策のおむつは必須ですが、それ以外にも役立ったグッズを紹介します。 寝たきりになった犬のトイレ介護と犬の床ずれを治るまで防ぐ清潔を保つ工夫とノウハウ 寝たきりの犬のトイレ介護におしっこシートが大活躍します。 ケース販売 デオシート しっかり超吸収 無香消臭タイプ ワイド(54枚入*4袋セット)posted with カエレバ楽天市場で探すAmazonで探す ペット用おむつはあまり役に立たないこともあります。特に大型犬だとずれたり外れてしまうことがあるからです。 しかし、おしっこシートも完璧ではありません。 中〜大型犬は床ずれ防止で向きを変えたりしていると位置がずれてしまうことがあります。 おむつが外れたりやおしっこシートがずれていることに気づかず、ベッドの中がおしっこだらけになってしまうことも。しかも大型犬はおしっこの量も多く、シートで吸収しきれないこともあります。 中〜大型犬のおもらし対策には 防水シーツ が役立ちます。ペット用もありますが少し高いので、人間用のおねしょシーツで代用することもできます。 てんかんなどの発作でおもらしする場合の対処法 脳の腫瘍で亡くなったボブは発作のたびにおしっこを漏らしていました。 ただ発作を起こしている時以外は元気だったので、おむつを付けませんでした。つけてもすぐに脱いでしまうからです。 仕方ないのでおもらしのたびに床を水で拭いたあと、乾拭きしました。臭くなるので拭いた後ペットのおしっこ用消臭スプレーを使います。 ペティオ ハッピークリーン 犬オシッコ ウンチのニオイ 消臭＆除菌(800mL)posted with カã

1‚¨ãƒ¬ãƒæ¥½å¤©å¸‚場で探すAmazonで探す 発作は多いときは一日に2回以上あり、とても大変でした。 掃除がしやすい場所に移してゲージに入れてしまえばいいのでは？と思いますよね？ ボブが動けるうちはできるだけ自由にしてやりたかったという、家族みんなの気持ちもあったのでしませんでした。 老犬の食事 高齢の犬には、我が家ではドックフードをお湯でふやかして与えました。 エサ箱から食べるのが難しい場合は、手で与えると食べてくれることがあります。 それでも食べない場合は、老犬専用の介護食に切り替えるか、高カロリーなものを与えるのが一般的です。 デビフ 愛犬の介護食 ささみ＆すりおろし野菜(85g)posted with カエレバ楽天市場で探すAmazonで探す 食事は命に関わることなので、素人判断せず獣医さんに相談しましょう。 老犬の飲水 歩けなくなったらスポイドで水を与えます。水も手で少しずつ与えると飲んでくれることがあります。 老犬介護ブログが実践した寝たきりの犬の体臭・アンモニア対策 寝たきりの犬は匂いも臭くなります。 我が家では体臭対策に水のいらない犬用のシャンプーを使っていましたが、あまり効果を感じられませんでした。 おすすめは ホットタオルで拭いてあげること です。タオルを水で濡らして固く絞り、レンジで30秒くらいチンします。熱さを確かめて、全身を拭いてあげます。きれいになるだけではく、血行も良くなります。 また老犬は新陳代謝も落ちるので、口や耳、目の周りも汚れて臭くなります。 耳や目周りの専用の洗浄グッズもありますが、うちでは人間の赤ちゃん用のおしりナップを重宝しました。低刺激で安心して使えます。 ピジョン おしりナップ やわらか厚手仕上げ 詰めかえ用(80枚*6コ入)posted with カエレバ楽天市場で探すAmazonで探す また、頻繁におしっこを漏らしたり、おむつの中で排泄するのでどうしても体は臭くなりました。 たまに匂いにたまりかねて洗っていましたが、これが骨の折れる作業でした。 犬を洗うのと乾かすのはセットです。 特に老犬は体温調節が苦手なので濡れたままにしておくことはNGです。 母はたまに一人で洗ってましたが、かなり大変だったと思います。 最後の日を一緒に過ごすために 大型〜中型犬の介護についておわかりいただけたと思います。 特に肉体的に大変でした。が、命の尊さ、生き物の老いなど学ぶことが多かったです。 そして一緒に過ごした時間は宝物でした。 旅立つ間際まで一緒にいてくれて心から感謝しています。 私の体験記があなたの愛犬の介護に役に立つことを願っています。最後までお読みいただきありがとうございました。","noindex":false},{"slug":"entry243","title":"犬の床ずれ対策と大型犬介護の現実。老犬が寝たきりになり老衰の最期を迎えるまで","date":"2017-10-09","modifiedDate":"2026-07-07","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2017/entry243.webp","description":"大型犬介護の現実と、犬の床ずれ対策。老犬が寝たきりになり、老衰で最期を迎えるまでのリアルなタイムラインと向き合うための心構えを、複数の大型犬を看取ってきた飼い主の視点から具体的にお伝えします。","tags":["ペット","ペットの病気"],"body":"私の家にはセントバーナード、ゴールデンレトリバー、ダルメシアン、ミニチュアダックスフンドと、いつも家族の一員として犬がいました。 可愛い子犬を迎え入れても、ペットはいつか必ず老いていきますし、病気もします。大型犬介護は想像以上に体力を使い、綺麗事だけでは済まない現実があります。 この記事では、我が家で実際に経験した犬の床ずれ対策や、老犬が寝たきりになったときの排泄の工夫、そして犬が老衰で最期を迎えるときのリアルな状態について綴ります。 先に言っておきますが、私は専門家ではありません。あなたと同じ立場で、愛犬の介護と向き合い、看取ってきた一人の飼い主です。 いま現在、老犬の寝たきりや体位変換、夜泣きなどの介護に直面して、たいへんな思いをされている方の力になれば幸いです。 この記事でわかること 脳腫瘍によるてんかん発作を起こす大型犬を看取った話 老犬が寝たきりになったときの、おむつ排泄の拒否への対応 自重で起きる犬の床ずれ対策と、マッサージのやり方 犬が老衰で最期を迎えるときの変化ã

1¨ã€ãƒšãƒƒãƒˆãƒ­ã‚¹ã‚’防ぐ心構え 具体的なケア方法やおすすめの防止用品は「老犬の床ずれ防止とおすすめ大型犬介護グッズ。犬の床ずれを治るまで支えた排泄介助」にまとめました。 大型犬介護の現実。病気や老衰で愛犬を看取ること 特に記憶に残った2匹のお話をします。 たった5歳。脳の癌で死んだゴールデンレトリバー 私が中学ぐらいだったと思います。オスのゴールデンレトリバーが我が家にやってきました。 兄弟の誰かが飼いたいと言い始めのがきっかけだったと思います。 まだ当時はバブルで、今では考えられませんけどペットは ペットショップで血統証付きで購入する というのがステータスでした。 我が家も血統証付きのゴールデンレトリバーを購入し、ボブと名付けました。 賢くて人懐こく、家族みんなに愛されていました。 脳腫瘍ができ水頭症を発症 成犬してしばらくして、先天性の脳の障害があることが分かりました。 ボブはさらに脳に腫瘍ができたせいで、「水頭症」を併発しました。 水頭症のせいで何度も何度もてんかん発作を起こしました。 「てんかん」で暴れるボブ 具体的な発作の症状です。気を失って倒れたかと思うと、白目をむいて手足をジタバタさせて暴れます。これが30秒くらい続きます。 発作中は泡を吹き、収まると失禁しました。 ゴールデンレトリバーは大きな犬種です。しかも室内で飼っていたので、発作を起こすたびに廊下の床が傷つき、壁に穴が空きました。家族で発作に居合わせた人が暴れるのを抑えました。ボブは30キロ以上あったので抑えるのが大変でした。 正気に戻ったボブいつも、「くーん、くーん」としばらく不安そうに泣いていました。 動物病院にも頻繁に連れていきました。母親一人で通院するのは大変です。しかもいつ発作が起こるか分からない。なので動物病院へよく一緒について行きました。 治療は続けるも、ボブの病気は一向に良くなりませんでした。当時の医療では無理だったのかもしれません。 ボブの医療費は相当かかりました。母親いわく 車が一台買えるほど だったそうです。 わずか5歳で天国に旅立ったボブ ボブを家族に迎え入れて5年。たしか土曜か日曜日の朝でした。目覚めるとボブは冷たくなっていました。 闘病生活も虚しく、たった5年で天国へ旅立ってしまいました。 老犬が寝たきりに。足腰が立たなくなったダルメシアン しばらくして、私達は新しいダルメシアンの子犬を迎え入れました。 ボブの介護は大変だったけど、新しい犬を飼いと私も含め子供たちが言い始めたからです。 父は犬を飼うことを反対していましたが、なんとか説得して飼うことになりました。 12月生まれらしいのでノエル（フランス語でクリスマス）と名付けました。 気性の荒い血気盛んな犬 ダルメシアンは見た目こそ愛らしいですが、一般的に気性が荒いと言われています。 ノエルも例外ではなく、よく家族の誰かれ構わず噛みつきました。力も強い犬でした。 私も成犬になったノエルの散歩中に急に引っぱられ、転んで怪我をしたことがあります。 犬も当然性格が違います。ノエルは内向的で攻撃的。ボブに比べて扱いにくい子でした。 高齢になった大〜中型サイズの老犬は足腰がやられる 気性の荒かったノエルですが年齢を重ねるに連れ、少しづつ性格も丸くなってきました。 ノエルはよく転ぶようになりました。 転ぶ回数が増えれば増えるほど、後ろ足がだんだん立たã

1ªããªã‚Šã¾ã—た。 ちょっと水が飲みたい、なでてもらいたいから近寄りたい。そんなカンタンなことができなくなりました。 最初は後ろ足を引きずって何とか移動していましたが、次第に自力で歩けなくなりました。 おむつの中で意地でもおしっこしないノエル ノエルは排泄を散歩中にするようにしつけてました。 室内飼いだったので、長時間外出する時はおしっこマットを用意しました。しかし、誰かが帰ってきて散歩に連れて行ってもらうまで我慢するような犬でした。 自分のポリシーを貫く頑固な犬でした。 そんな頑固な犬が高齢化したらどうなるのでしょうか。 当然おむつを履かせてもおしっこを我慢します。膀胱炎になるのがとても心配でした。 しかたないのでおしっこさせるために、ノエルを抱きかかえて外に連れ出しました。 ダルメシアンの成犬は20キロ近くあります。このノエルの介護で母親は肘を痛めました。 犬用車椅子があるのでは？と思われるかもしれませんが、我が家は段差だらけだったので使えませんでした。 さすがの頑固者のノエルも最終的には動けなくなり、寝たきりで排泄することもありました。しかし数は少なかったです。 我が家での具体的な「寝たきりになった犬のトイレ介護」について詳しく紹介しています。 寝たきりで犬の床ずれを起こしたノエルのケア 足腰が立たず、寝ている時間が増え、筋力が弱り、更に足腰が立たない。 そんな悪循環を繰り返し、ノエルはついにほぼ寝たきりになりました。 クッション性のあるベッドで寝てはいましたがノエルは中-大型犬です。寝たきりになると、自重で床ずれを起こします。 定期的にマッサージしたり、向きを変えたりしてあげなければなりませんでした。 ノエルは特にマッサージされるのが大好きでした。こちらが疲れてやめると目をキラキラさせて「おかわり」をしてきました。その仕草がかわいかったのでよくマッサージをしてあげました。 「寝たきり中-大型犬の床ずれ対策」についての解説もあります。 犬が老衰で最期を迎えるときのリアルな状態 ノエルは死期が近くなると水、食事の量が極端に減りました。 そして今まで嗅いだことのないひどい匂いがするようになりました。 ある日のことです。いつもおとなしくしているノエルが、なにかに向かって吠えていました。 息も荒くなり意識が朦朧（もうろう）とし、たまに何かにとりつかれたように吠えました。 そんな状態を数回繰り返し、家族に見守られて静かに息を引き取りました。 ペットロスにならないために。飼うときの心構え ペットの死因は老衰が44%です。病気、事故、色んな理由はありますが 必ず死にます。 大抵の人は ペットが死ぬことを想定して飼うことはありません。 私たち兄弟も子供の頃はただ「可愛い」という理由で、親にねだって子犬を飼い始めました。 家族として迎え入れた瞬間、いずれ来る死を覚悟しておかないと「ペットロス症候群」になることがあります。 ペットがどんな死を迎えるか分からない ボブが死んだ頃の私はまだ10代でした。当然、ボブの死が受け入れられませんでした。 老衰ならまだしも、納得できない死 だったからです。 まさか難病とは思わなかった まさか車に引かれるとは思わなかった ペットの 納得できない死 ってたくさんあると思います。 学校も休みました。ショックが大きすぎてなかなか立ち直れませんでした。 どうあがいてもボブの命を取り戻すことはできないのは分かっています。でも心で納得できないという状態が長く続きました。 時間とは不思議です。 悲しみは時間とともに薄らいでいきました。 今ペットロス症候群で悩んでいる方も多いと思いますが、大抵は時間が解決してくれます。 ペットの生涯を通じて生き物が老いることを学ぶ もちろんノエルが死んだときも悲しかったです。が、それ以上に感謝の気持ちが強かったです。 寿命を全うしてくれたから です。これ以上ありがたいことはありません。 ノエルの一生が「生き物がどう老いていくか」を教えてくれました。どんなに愛らしくても、生き物は年月が経てばいずれ老います。 誰かに助けてもらえなã

1„と水も飲めない、トイレも行けない。ボケてしまうこともあります。 生きている以上避けることはできないです。人間も一緒です。 まとめ・いずれ死ぬことを覚悟し準備をしておくことが大事 ペットはたくさんの思い出や癒やしもくれますが、お別れのときはとてもつらいです。 ペットを飼うということは、病気・高齢化・死もセットです。備えをし、後悔のないようにしっかり看取ってあげたいものです。 「排泄介助、床ずれ防止。中〜大型犬を介護し、看取るためにやったこと」で大型犬の介護に役立つ情報をご紹介しているので併せてお読みください。 私の経験があなたのペット介護に役立てば幸いです。","noindex":false},{"slug":"entry253","title":"カンタン！wgetでサイトを丸ごとダウンロードする方法","date":"2016-12-09","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2014/entry192.webp","description":"wgetコマンド便利です。仕事中ファイルのバックアップをとろうと思いftpソフトでDLしていましたが途中止まってしまいました。なのでwgetコマンドで落とすことにしました。なので、wgetコマンドについてまとめておきます。","tags":["コマンド"],"body":"wgetコマンドってなんぞ？ HTTPアクセスをしてコンテンツをファイルに保存するコマンドです。 homebrewでインストールできます。 ないようならまずはhomebrewをインストール。 ターミナルを開いて下記サイトにあるコードを貼り付けて実行するだけです。 homebrew インストールされたら、次のコードでインストール。 ※もし拒否されるようでしたら頭にsudo+スペースをつけてみてください。 ファイルを格納するディレクトリーを作成、移動します。 もしくは 基本のコマンドは以下のとおり。 サイトを丸ごと落としたい -lはサイトの階層の深さ。0だと全ての階層を落とします。 --convert-linksをつけるとローカルでもみれるよう絶対パスを相対パスに書き換えてくれます。 ベーシック認証のかかったサイトをDL パスワードとIDを追加します。","noindex":true},{"slug":"entry249","title":"しろたん師匠に学ぶ黒い画面とSQL入門","date":"2016-11-30","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2014/entry208.webp","description":"みなさん、SQLはお好きですか？今では多少普通の人よりはわかるようになりましたがちんぷんかんぷんちんです。私の敬愛するつよつよメンターしろたん師匠からそんな話するつもりなかったのにありがたくもSQLの話になったのでその内容をまとめます。","tags":["DB","concrete5","しろたん師匠"],"body":"みなさん、SQLはお好きですか？今では多少普通の人よりはわかるようになりましたがちんぷんかんぷんちんです。 私の敬愛するつよつよメンターしろたん師匠からそんな話するつもりなかったのにありがたくもSQLの話になったのでその内容をまとめます。 ざっくり、「しろたん師匠」のご紹介？ しろたん師匠 /インフラ屋さん 広島市内に生息。 ノーと言える大人ですが、口を一度開けば毒を吐くこともあります。 インフラ、サーバーサイドだけでなくフロント周りまで幅広く手がけているようです。 一見怖そうですがしろたんのようなラブリーキャラをこよなく愛しているみたいです。 テトリスがうまいです。 嫁がイケてます。 SQLってほんま大切やん 最近ちょっとデータベースやサーバーのスペックを本来考えないといけない複雑な案件しました。 本日たまたま仕事帰りに会社の近所で会社を経営しているしろたん師匠にエンカウントしてしまいました。 一見怖そうですがしろたんのようなラブリーキャラをこよなく愛しているみたいです。 メモリやデータベースについて思いの丈をぶつけてみました。 まずはSQL知っとかんといけんじゃろう。 SQL上何がどう動いているのが分かってるのかい？ 何がどう処理されてるかによってサーバーへの負荷が違うんだぜ。 とりあえず、そこ覗いてみようぜっちゅうことで。。。。SQL入門的なコマンド覚えたのã

1§ãƒ¡ãƒ¢ã—ておきます。 まずは、コマンドからデータベースをみてみよう とりあえず、サーバーに入りましょう!!! 今回はvagrantで作ったサーバーの中を参考にみてみます。 vagrant sshで接続します。 ワンラインでかけますのでユーザー名がuserパスワードがpasswordの場合はこんな感じで続けて書けます。 MySQLに接続できるようになりました。 データベースのあれこれがわかるのでまずはコマンドshow databasesを叩いてみましょう。 終端に必ず;(セミコロン)が要ります。 今度はデータベースのテーブルを確認していきます。 どのデータベースを使用するか選び、中身を見てみましょう！ select * from【テーブル名】でそのテーブルの全てのデータが見ることができます。 例えば、wordpressのwp_usersの中身を見て見たければこんな感じ。 また、カラム数が多すぎて見にくい場合は、縦並びに変えることもできます。 最後に\\\\G(バックスラッシュラージg)を付与するだけ。 explain selectで出力してみた とりあえず、早速教えてもらったexplain selectで出力する方法を教えてもらいました。 explain selectを実行するとSQLの挙動や出力スピードを最適化するのに役立つそう。 いつか役に立つはずなの、そのやり方もメモっておきます。 まずは上記コマンドで出力内容を見て見ましょう。 select_typeとid 別々のフィールドですがセットとして考えて良いみたいです。 ちなみにクエリがJOINだけから構成される場合、select_typeはSIMPLEとなります。 (MySQLが実行出来るJOINの種類はNested Look Join（NLJ）の一種類しかないそうです) #### ネステッドループ結合とは？ ネステッドループ結合は最初にアクセスする表(外部表、駆動表とも呼ばれる)をフェッチし、そのフェッチしたデータと結合可能なデータを内部表から検索する処理をループして結合します。 サブクエリが絡むと次のselect_typeには次の5種類のうちいずれかが表示されるそう PRIMARY…外部クエリを示す SUBQUERY…相関関係のないサブクエリ DEPENDENT SUBQUERY…相関関係のあるサブクエリ U* NCACHEABLE SUBQUERY…実行する度に結果が変わる可能性のあるサブクエリ DERIVED…FROM句で用いられているサブクエリ table まんまテーブル名です。 type const … PRIMARY KEYまたはUNIQUEインデックスのルックアップによるアクセス。最速。 eq _ ref…JOINにおいてPRIARY KEYまたはUNIQUE KEYが利用される時のアクセスタイプ。constと似ているがJOINで用いられるところが違う。 ref … ユニーク（PRIMARY or UNIQUE）でないインデックスを使って等価検索（WHERE key = value）を行った時に使われるアクセスタイプ。 range … インデックスを用いた範囲検索。 index … フルインデックススキャン。インデックス全体をスキャンする必要があるのでとても遅い。 ALL … フルテーブルスキャン。インデックスがまったく利用されていないことを示す。OLTP系の処理では改善必須。 possible_keys オプティマイザがテーブルのアクセスに利用可能なインデックスの候補として挙げたキーの一覧。 possible_keys オプティマイザによって選択されたキー。 key_len 選択されたキーの長さ。 ref 検索条件で、keyと比較されている値やカラムの種類。定数が指定されている場合はconstと表示される。JOINが実行されている時には、結合する相手側のテーブルで検索条件として利用されているカラムが表示される。 rows そのテーブルからフェッチされる行数。実際の行数とは違うことがあるので注意が必要。 whereでpost_parentの値を絞ってみます。 そうするとtypeがref(where key = valueで検索された)になりpossiblekeysとkeyがpostparent、refがconstになりましたね。 条件を二つでand検索にするとExtraのところにUsing whereが追加されます。 keyã

1¯post_parentを選択されてますね。 次にor検索で実行してみますとこんな感じ。 typeがALLになりました。 どんなコマンドを叩いたか思い出せない時 今回はざっと教えてもらいましたが、どんなコマンドを叩いたか忘れてしまって復習できない時があります。 そんな時はhistoryコマンドでどんなコマンドを叩いたか探す方法も教えてもらいました。 まず、ルートに戻ってls -alで隠しファイルを確認します。 そうすると、.mysql_historyという隠しファイルが 確認できると思います。 catコマンドで中身を見てみましょう。 とりあえずまとめ とりとめのない感じの中身になっちゃいましたが、とりあえずexplain selectで出力されるデータを解析(?)してクエリをチューニングするらしいのですが、しろたん師匠はどうクエリが動いているのかをみて欲しかったみたいです。 私なりになんとなくあっちこっちから調べて情報を継ぎ接ぎしましたが、このクエリ実行がサーバーのスペック等に影響するのでSQLがどう動いてるのかぐらいはやっぱり知っておきたいですね。 MySQLのEXPLAINを徹底解説!! / 漢のコンピューター道 ネステッドループ結合とは? / Walking Alone","noindex":true},{"slug":"entry248","title":"concrete5.7でセッションハンドラをデータベースに変更する","date":"2016-07-16","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2014/entry192.webp","description":"サーバの設定がガチガチでセッションが書き込めなくなっていたのでデータベースに書き込む方法に変更したので、そのやり方についてメモします。","tags":["DB","concrete5"],"body":"サーバの設定がガチガチでセッションが書き込めなくなっていたのでデータベースに書き込む方法に変更したので、そのやり方についてメモします。 まず、親ページデータの取得方法 そもそもセッションってなんぞ？ セッションとはサーバーとクライアントとの一連のやりとりのことです。 どのユーザーがアクセスしてきているのか、あるいはこれまでにどのような情報のやり取りが あったのかと?いったことを判断します。 このようなサーバーとクライアント間の情報を管理・保持することをセッション管理と言います。 http://www.standpower.com/php_session.html セッションはどうやって管理される？ サーバーはリクエストがあったクライアントに対して、セッションIDというものを発行し、クライアント側に保存させます。 サーバーはセッションIDとクライアントとのやり取りの情報を保存します。 次回、クライアントがそのサーバーに接続した際に、セッションIDにより それまでにやり取りした情報や記録を保持したものを引き継ぐことができるのです。 ちなみにクッキーの違う点はクライアント側で情報を保存します。 通常のセッションの保存場所 セッションを利用するためにはphp.iniに以下のような設定が必要になります。 session.usetranssid = on session.save_path = 任意のディレクトリ これでセッションをスタートさせれば通常セッションが任意のディレクトリ内に保存されるようになりますので、使えるようになるわけです。 が、 サーバのセキュリティがガチガチでセッションファイルを書き込むディレクトリーが見当たらないよーと途中からエラーを吐くようになりました。 本題：セッションの保存場所を変えてみよう！ ということで仕方ないので、セッションの保存場所をデータベース内に変更することに。 まずconcrete.phpを作成、application/config内に保存。 ここにこのファイルを作ることによって、concrete/config/concrete.phpをオーバーライドします。 すでに他の設定で作っている場合は、return array();の中に以下のようにコードを追記します。 これでセッションはデータベース内に保存さã

1‚Œã‚‹ã‚ˆã†ã«ãªã‚Šã¾ã—た。","noindex":true},{"slug":"entry236","title":"外部フォームブロックでお問い合わせフォーム作成","date":"2015-12-01","modifiedDate":"2022-04-18","category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2014/entry175.webp","description":"concrete5（concreteCMS）の外部フォームを使ってフォーム作りました。2022年にAjax対応する記事執筆に伴い、大幅にリライトと加筆しました。フォームヘルパーやメールヘルパーの詳しい使い方も紹介しています。","tags":["concrete5"],"body":"concrete5（concreteCMS）の外部フォームを使ってフォーム作りました。 2022年にAjax対応する記事執筆に伴い、大幅にリライトと加筆しました。フォームヘルパーやメールヘルパーの詳しい使い方も紹介しています。 ※この記事ではconcrete5と表現してますが、現在concreteCMSに名前が変わりました。 ※ver8のみで検証済み。 外部フォームとは？ concrete5には外部フォームというブロックがあります。 ここに自分でphpをゴリゴリ書いて独自のフォームを作成することができます。 もちろん、デフォでもフォームブロックは用意されておりも管理画面でお問い合わせ内容などの管理もできて便利です。…が、デザインの自由度も効かないし自動返信もできませんので今一歩な使い勝手。。。。 ということでやはりお好みのフォームを作りたいときは外部フォームブロックがおすすめです！！ 下準備 フォーム送信の流れは以下の通り。 1. フォーム項目の登録 2. バリデート（文字数とかきちんとアドレスを登録をできてるかなど）を判定して問題なければ送信 3. メールがサイトオーナーとフォーム送信者の両方に届く 4. thanksメッセージを表示 例えば今回下記のようなフォームにします。 ニックネーム アンケート（3択） メールアドレス これを実現するために必要なのは以下のファイル。 フォームのコントローラー（挙動の制御） フォームのビュー（見た目） メールの中身 今回は Controller、Wiew は application/block/external_form 内にformというフォルダを新規作成してその中に配置します。 今回はファイル名をcontact_form.phpとしました。 見た目を整形していく用のビューのファイルはform直下に配置します。挙動の制御をするコントローラーファイルはさらにその直下にcontrollerフォルダを作って同じ名前のファイルを置きます。 見た目を整形していく用のビューのファイルはform直下に配置します。挙動の制御をするコントローラーファイルはさらにその直下にcontrollerフォルダを作って同じ名前のファイルを置きます。 コントローラー、ビュー、メールのテンプレを作る concrete5のブロックはMVC（モデル・ビュー・コントローラー）モデルとなっており、コアをオーバーライドして作成します。 フォームヘルパーを使ってフォームの見た目（view）を作成 まずはviewのコードです。 ヘルパーを使ってフォームのタグを作ります。今回はBootstrapを使いました。htmlやCSSの説明は割愛します。 見た目は完成しました。 これでフォームヘルパーを使ってControllerとのデータのやり取りができるようになります。 フォームヘルパーの使い方です。 例えばニックネームのコードは以下のように出力されます。 各フォームパーツは以下のように呼び出せます。 | 名前 | コード | | ------------------ | -------------------------------------------------------------- | | テキスト | $form->text([name], [value],[属性]) | | メール | $form->email([name], [value],[属性]) | | labelタグ | $form->label([name], [value]) | | hidden | $form->hidden([name], [value]) | | password | $form->password([name], [value], [属性]) | | チェックボックス | $form->checkbox([name],[value], [checked], [checked],[属性]) | | ラジオボタン | $form->radio([name],[value], [checked],[属性]) | | テキストエリア | $form->textarea([name], [value],[属性]) | | セレクトボックス | $form->select([name], [option], [checked],[属性]) | | 送信 | $form->submit([name], [value], [属性], [class]) | 今回は送信ボタンを button タグ直書きで使ってますが、input タグに変えたい場合は以下のようにして、 disabled などの属性を付与することもできます。 これでいったんは値ã

1®controllerに渡すことができるようになりました。 チェックボックスなどは以下のように配列に値を格納します。 controllerで送信などの処理 フォームのバリデート、送信後の挙動などをこのファイルで設定します。 今回application/block直下に置くので namespace を Application\\\\Block\\\\ExternalForm\\\\Form\\\\Controller とします。 先程書いたview側のコードです。 \\\\Core::make(\\"token\\")でトークンを発行し、 controller側でトークンが一致しなければフォームの送信自体をできなくします。 Core::make(\'helper/validation/strings\')でバリデーション処理をします。 Core::make(\'helper/validation/strings\')にあるバリデーションを使って判定ができます。 | 名前 | コード | | ------------ | ----------------------------------- | | 空かどうか | $validation->notempty([値]) | | メール | $validation->emal([値]) | | 最大文字数 | $validation->max([値],[数]) | | 数字を含む | $validation->containsNumber([値]) | パスワードの判定ではないのでとりあえずこのくらい。 文字数に関しては日本語の場合誤差が出るかも。 view側で値を受け取り、表示します。 h() は値をエンティティ（無害）化する、concreteCMSのメソッドです。出力、受け取る値を必ずエンティティ化します。 エラーを表示できるようになりました。 メールヘルパーを使ってメール送信する application/mail直下に送信するメール内容のテンプレートになる mail_complete.php という名前でファイルを配置します。 メール本文を格納します。 メール本文が短い場合は、パラメーターを使わず、contact_form.phpへ以下のように直書きもできます。 Thanksメッセージを表示する view側で $this->set(\'thanks\', true) の値を受けとり、送信完了メッセージを表示させます。 view、controllerのすべてのコード ver8をお使いの方必読！脆弱性対策 外部フォームを使わなくても以下対策をしておきましょう！ Concrete CMS Version 9 未満のサイトを運営している方は、Nginx や Apache の設定に、ヘッダーを一つ追加することで対策をしていただくことをお勧めします。 Cross-Origin-Resource-Policy を「same-origin」か「same-site」に設定してください。どちらかが最適かがわからない場合は、以下のドキュメントを参考にしてください。 https://developer.mozilla.org/ja/docs/Web/HTTP/Cross-OriginResourcePolicy_(CORP) Nginx の場合: location ブロックの中に Apache の場合 (.htaccess もしくは同等の場所で) 元記事は以下となります。 CVE-2021-22954 と V9 以前の Concrete への対応について まとめ・外部フォームブロックを使えばCSRFへの対応をしたフォームを作成可能 今回Ajaxのフォームを作ったことをきっかけに7年前に書いたこの記事もリライトしました。 ついでに今更書きかけで、放置していたことも思い出しました！ 外部フォームブロックを使えばCSRFへの対応をしたフォームを作成可能です。 「クロスサイトリクエストフォージェリ（CSRF）」とは？ クロスサイトリクエストフォージェリ（CSRF）とは、Webアプリケーションに存在する脆弱性、もしくはその脆弱性を利用した攻撃方法のことです。掲示板や問い合わせフォームなどを処理するWebアプリケーションが、本来拒否すべき他サイトからのリクエストを受信し処理してしまいます。 クロスサイトリクエストフォージェリ（CSRF） 最近ではブラウザ側でXSS対策をされるようにはなっていますが、下手なコードを書くより、CSRFを防ぐための処理はCMSにできるのであればCMSに任せたほうがいいです。 この記事がみã

1ªã•ã‚“のCMSライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。 参考サイト 外部フォームブロックをカスタマイズし、入力・確認・完了画面のフォームを作る Sending Mail::legacy-documentation concrete5","noindex":true},{"slug":"entry235","title":"WordPressで画像をリサイズする","date":"2015-11-19","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2015/entry235.webp","description":"WordPressのカスタムフィールドに登録した画像のリサイズの仕方についてメモっておきます。","tags":["WordPress"],"body":"WordPressのカスタムフィールドに登録した画像のリサイズの仕方についてメモっておきます。 functions.phpにリサイズを登録 画像のリサイズをできるようにするためにはまず、アイキャッチを有効にしなければいけません。 functions.phpに以下コードを追記します。 WordPressでは画像をアップロードしたときに、リサイズした画像を生成できます。 リサイズする画像の登録 なのでaddimagesize()でリサイズする画像サイズを登録します。 addimagesize( $name, $width, $height, $crop ); $name…新しい画像サイズの名前 $width…画像の幅（px） $height…画像の高さ（px） $crop…画像を切り抜くか否か(初期値はfalse) ただ、画像サイズ名に予約名があるのでそれ以外で指定します。 thumb thumbnail medium large post-thumbnail ということで、「newResizeImage」という名前で画像サイズを作るとするとこんな感じになります。 カスタムフィールドの画像情報を取得 出力したいカスタムフィールドの画像情報を取得します。 getpostmeta($post_id, $key, $single); $post_id…カスタムフィールドを取得したい投稿のID $key…取得したい値のキー名の文字列。オプションで初期値はnull $single…初期値はfalse。falseでカスタムフィールドの配列を返す。true をセットした場合、文字列として単一の結果を返す。 わざわざ配列にする必要はないのでtrueをセット。 IDは時と場合によるのでですが、whileなどで回してなりして取得します。今回は割愛します。 あとは画像をwpgetattachmentimagesrc()で画像情報を取得します。 取得できる値は配列で以下のようになってます。 [0] => url [1] => width [2] => height [3] => 真偽値: リサイズされいている場合は true、元のサイズの場合は false なのでパスを取得してimgタグなどに出力したい時は以下のような感じになります。 パスだけ取得できたら、JSなどにも応用できて便利です。","noindex":true},{"slug":"entry233","title":"XAMPP/PHP5.5.27~mySQLの初期パスワード設定","date":"2015-11-18","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2014/entry192.webp","description":"Windows10にXAMPPをインストール、MySQLの初期パスワード設定の仕方ではまったので、やり方についてまとめておきます。","tags":["XAMPP"],"body":"Windows10にXAMPPをインストール、MySQLの初期パスワード設定の仕方ではまったので、やり方についてまとめておきます。 まずは、XAMPPをローカルにイãƒ

1³ã‚¹ãƒˆãƒ¼ãƒ« まずはXAMPP(XAMPP v5.6.14 (PHP 5.6.14) )をインストール。 ※現時点で最新版。 XAMPP（今回はWindows用） program内にインストールすると動かなくなる可能性があるのでCドライブ直下が良いようです。 XAMPPは初心者向けの仮想環境？ 私が職業訓練校生の時に出会ったXAMPP。 当時、職業訓練校でPHPを学ぶために使ったローカルでも使える仮想環境はXAMPP。 最近の制作する時はMac環境ですし、お仕事ではVagrant＋gulpなのでXAMPPのことなんてすっかり記憶の彼方に。。。。 XAMPPは初心者にはうってつけのツール（の認識）でした。 最近はどうやら、知見のない人がXAMPP走らせたままで放置してセキュリティ上の問題が方々であったようで、XAMPP提供側がApacheの管理画面をなくすなど仕様変更があったらしい。面倒になったけど仕方ない。。。 おかげさまで多少、超初心者には敷居が高くなりました。 さくっとコマンドプロンプトでパスワード変えました 以前のバージョンであればApache管理画面でphpMyAdminのログインパスワードをカンタンに帰れましたが、Apache管理画面がなくなりましたからね…。あれこれ悩んだ挙句、ググると、localhost/security/にアクセスすればいけるとか情報発見。早速試すも404が返される。。。 Apacheのダッシュボードの上部メニューにHOW-To Guides発見。中を確認してみるとメニューに「Reset the MySQL/MariaDB Root Password」というものが！（こっちを先に見ろよ）。 パスワードを変えたければシェルをクリックしてコマンドを叩いてねとのことでした（英語）。 とりあえずコントロールパネルを管理者権限で起動し「shell」をクリック。 コマンドプロンプトが立ち上がるので初期パスワードを設定するため以下入力。 パスワードは変更できましたが、phpMyAdminにアクセスできなくなっちゃうので、config.inc.phpの設定も合わせて変更します。xampp/phpMyAdmin/config.inc.php 21行目当たりにパスワードの設定があり、値が空になっているのでここを変更。 コマンドプロンプトで設定したパスワードと一致させます。そして保存。 これで初期パスワード設定完了です。 phpMyAdminにアクセスできるようになります。 追記 以下の方法でもパスワードは変更できます。 1.phpMyAdminにログイン 2.上メニューUser Accountをクリック 3. root localhostのEdit privilegesをクリック ※画像はすでにパスワード変更しているのでパスワードの項目が「いいえ」になっているけど初期設定では「はい」になっています。 4.「パスワードを変更する」をクリック パスワード変更画面へ行きパスワードを2回入力して実行。 ~~※config.inc.phpは変更不要です。~~ ※config.inc.phpにパスワードが反映されてないと思います。XAMPPコントロールパネル＞シェルから行った手順同様に書き換えましょう。 Windows7で検証ずみです。 私のWindows10環境下だとUser Accountにアクセスしようとするとエラーが出てここまでたどりつけませんでした。手動で設定をつついたらいけるんでしょうが、コマンド叩いたほうが早いので諦めました。 おそらく8でも動くんではないかと思います…。","noindex":true},{"slug":"entry212","title":"カラオケ採点で高得点を取る検証！JOYSOUNDのしゃくり・ビブラートで90点超えのコツ","date":"2014-12-24","modifiedDate":"2026-07-07","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbnail/2014/entry212.webp","description":"みなさんカラオケはお好きですか？みんなにうまいって言われると嬉しくなりますよね？先日カラã‚

1ªã‚±ã§RGばりのうろ覚えカラオケで90点以上たたき出しました。ということで今回はコツをお教えします。ちなみにこの記事を読んだところで歌が上手くなる確約はいたしませんのでご了承ください。","tags":["おもしろ","セブ島生活"],"body":"カラオケで90点以上の高得点を取るために、過酷なボイストレーニングや音程の猛練習は必要だと思ってませんか？ セブでも1時間飲み放題＆歌い放題（499ペソ）のCEBU BASEでハイボール片手にカラオケするかみーゆ。 JOYSOUNDの「分析採点」をはじめとする最新機能カラオケ採点専用AIによる採点機能には、実は誰でも簡単に攻略できる隙が存在します。メロディを正確に追うのが苦手でも、しゃくりやビブラートによる加点システムを過剰なほど量産してAIによる判定をハックすれば、うろ覚えの曲でも簡単に点数を引き上げることができます。 私が拠点を置くフィリピン・セブ島は個室のカラオケが少ないので、あえて人が少ない時間帯を狙ってこのハック術を検証しに突撃しています（笑）。 真面目に歌わずにシステムを騙して、サクッと90点の壁をぶち破るカラオケで高得点を狙うコツと裏技を教えます。 この記事でわかること 歌が下手でもJOYSOUNDの分析採点で90点が出る理由 カラオケ採点で加点を爆食いするための「しゃくり」「ビブラート」ハック術 音程を無視して点数を量産しやすいおすすめ曲の条件 なぜ歌が下手でもJOYSOUNDの分析採点で90点が出せるのか？ YouTubeでのボイトレチャンネルなどでは「正しい音程で歌いましょう」というアドバイスが多くないですか？ 私ですが、自分で言うのもなんですがすんごい音外します。最近の歌、たまについてけません。 でも、採点システムを研究したら実はめっちゃ歌がうまく聞こえるだけではなく、実際に高得点が採れるようになることを数年前に発見しました笑 JOYSOUNDの「分析採点」をはじめとする加点機能付きのシステムには、攻略の隙があるんです。 メロディを正確に追う音程判定が少しくらいズレていたとしても、テクニックによる加点を過剰なほど量産すれば、減点分を大幅に上書きして総合得点を引き上げることができる仕組みだからです。 つまり、真面目に音程外すことにビクつきながら歌う必要はありません！ドヤ 極論、うろ覚えの歌でも 簡単に90点を狙えます。 カラオケ採点で高得点を稼ぐための「しゃくり」ハック術 JOYSOUNDの採点システムを攻略する上で、最も簡単かつ強力な加点要素が しゃくり です。 本来の音程よりも少し低い音から入り、滑らかに正しい音程へと声を持ち上げるこのテクニックを検知させることで、ガンガン加点が入ります。 コツは、音程バーが切り替わる出だしの瞬間だけ、わざと半音ほど低い声で入り、直後に「ウゥーン」と正しい音程へ声を滑らせることです。 メロディをよく覚えていない曲であっても、すべてのフレーズの頭でこの動作を執拗に繰り返してください。ただし、完全にデタラメだと減点されるため、サビなど「覚えているところはきちんと歌う」のが、加点を最大化する秘訣です。 しゃくりの上達するコツはその歌手になりきることです。イチオシの歌手がいるのでぜひなりきって歌いましょう。 🎤 しゃくりが凄すぎる日本の歌姫（怪物）たち LiSA（アニソン界の女王） 『紅蓮華』などを聴くと分かりますが、すべてのフレーズの頭で、地を這うような低い音から一瞬で本来の超高音へ滑らかに持ち上げる「高速ハイスピードしゃくり」の達人です。彼女の歌い方を真似するだけで、JOYSOUNDの採点AIは加点でお祭り騒ぎになること間違いなし👍️ MISIA（ソウルフル歌姫） 圧倒的な声量と音域を持っていますが、バラードの歌い出しで、切なã

1•ã‚’表現するためにあえて「半音下からじわじわと音を持ち上げる超濃厚なしゃくり」を多用。 DREAMS COME TRUE・吉田美和（元祖しゃくり） 日本のポップス界に「しゃくり（フェイク）」の心地よさを定着させた元祖しゃくり。リズムに乗りながら階段を駆け上がるように音を上げる、参照すべきしゃくり。 ビブラートの回数をシステムに過剰認識させて点数を取る方法 プロの歌姫たちが喉を震わせる美しいビブラートは感動的ですが、私たちが目指すのは芸術ではなく システムのバグ利用 です。 JOYSOUNDの採点マイクは声の微細な上下運動（周波数）を感知しているため、キレイに響かせる必要は一切ありません。ロングトーンの瞬間に、マイクを持つ手を前後に小刻みに揺らしたり、顎をガクガクと震わせたりするだけで、AIは 極上の高速ビブラート と勘違いして加点を爆食い し始めます。 この感覚を掴む最短ルートが「鼻歌」です。口を閉じて「ふ〜」と鼻歌を歌いながら喉を震わせる練習をしておけば、実際のカラオケでも機械的に加点判定を量産するマシーンになれます。 文字数は295文字です。「マイクを揺らす」「顎を震わせる」という、真面目なボイトレサイトが決して書けない狂気的なハック感を押し出しました。 風呂に入ったらまず、鼻歌だ！！！ JOYSOUNDの採点システムで加点を量産しやすいおすすめ曲の条件 どれだけハック技術を磨いても、テンポが速すぎる曲ではしゃくりを入れる隙がありません。システムを効率よく騙すなら、 テンポが遅く、ロングトーンが多い曲 を選ぶのが鉄則。 最たる理想例 秋川雅史氏 『千の風になって』 米良美一氏 『もののけ姫』 AI 『Story』 点数を狙うなら完全に最新のアップテンポ曲を完全に排除 特に『Story』は、サビの「一人じゃないから〜」のロングトーンが加点に最適で、マイクを揺らす擬似ビブラートの加点が恐ろしい勢いでカンストします。 メロディの起伏が激しすぎないので、すべてのフレーズの頭で「ウゥーン」と下からすくい上げるしゃくりも100%の確率で入ります。 実際に私もこの『Story』で何度も90点以上を叩き出しているので、「あ、この人歌上手いかも」って思わせる事ができます。 じっくり声をのばせるこれらのバラードを選ぶことこそが、JOYSOUNDで確実に90点を量産する最強の近道です。 まとめ：真面目に歌うな、カラオケの採点専用AIによる判定をハックせよ カラオケの採点システムで90点以上の高得点を出すためだったら、ボイストレーニングや音程の猛練習は必要ありません。 この記事でお伝えした通り、JOYSOUNDの分析採点AIが検知する「加点アルゴリズム」の隙を突き、すべてのフレーズの頭で「しゃくり」を連発し、ロングトーンでマイクを揺らして「ビブラート」を過剰認識させることさえできれば、うろ覚えの曲であっても機械は勝手に高得点を弾き出せます。 『もののけ姫』や『Story』といった、加点をつかみ取りやすいバラードを選んで、ぜひ次回のカラオケでこのハック術を試してみてください。真面目にキレイに歌うのではなく、賢くシステムを騙して、ゆるく笑いを取りながらサクッとに90点の壁をぶち破りましょう。","noindex":false},{"slug":"entry211","title":"WordPressに独自ショートコードのサンプルコード集【入れ子もOK！】","date":"2014-12-21","modifiedDate":"2023-03-04","category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2014/entry211.webp","description":"WordPressのショートコードの実装の仕方をご紹介します！！ショートコードは入れ子もできます！単純なものから値を付与したり複雑なもの、ショートコードの入れ子の仕方も解説します。サンプルコードつき。※ この記事は2021å¹´6月に大幅メンテナンスしました。","tags":["WordPress"],"body":"WordPressのショートコードの実装の仕方をご紹介します！！ 単純なものから値を付与したり複雑なもの、ショートコードの入れ子の仕方も解説します。サンプルコードつき。※ この記事は2021å¹´6月に大幅メンテナンスしました。 この記事の対象 WordPressを少し改造したり、カスタマイズできる WordPressでブログをカスタマイズしたい HTMLやCSSがわかる カンタンな実装から順番に紹介していきます！！！ ショートコードの作り方 ショートタグは投稿でphpの代わりに使えるワードプレス専用のタグです。 ショートコードAPI 変数や関数が使えるのでとっても便利です。 たとえば、サイトのURLのショートタグを作りたいときのコードの書き方はこんな感じ。functions.phpに追記するだけです。 add_shortcode関数でショートコードとして呼び出すことができます。 投稿記事内にã

1‚·ãƒ§ãƒ¼ãƒˆã‚³ãƒ¼ãƒ‰ã‚’利用できるようになります。 ヘビーに使うバナーをショートコードとして登録し呼び出す バナーやコンバージョンエリアを呼び出すのに便利です。 記事内でバナー表示したいところに追加します。 ショートコードに引数を使って値を追加する 次はショートコードに値（引数）を追加する方法です。 現在はextractを使う方法は推奨されてません。 先ほどのバナーのショートコードを改造してみます。 これで画像とリンク先を差し替えることができるようになります。 ショートコード内に文を入れる ショートとタグの中に文も追加できます。 カンタンなものでこんな装飾もできますし、吹き出し装飾なんかも作れます。 コンテンツだけ追加したいとき コンテンツだけ追加したいときは、第一引数をnullか\'\'あたりにしておきます。 ショートコードの入れ子 ショートコードは装飾にめっちゃ便利ですが、入れ子にしたいこともあります。 そんなときはshortcodeunautopとdoshortcodeを使います。 先ほど作ったショートコードを例にとると、装飾の中にショートコードを含めることができるようになります。 そのほか、ショートコードで便利なTips そのほかショートコードで便利な方法がいくつかあるので、まとめておきます。 テンプレート内（phpファイル内）で呼び出す テンプレート内ではdo_shortcode関数を使って呼び出します。 ショートコードを取り除く 逆にサイトの説明などにショートコードが抜き出しで出てしまうことがあります。そんなときはstrip_shortcodesでショートコードが取り除けます。 まとめ ショートコードはうまく使うと超便利！装飾の幅も広がり記事やページがめっちゃ華やかになります。 ただ、テーマの乗り換えをするときに使えないショートコードなども出てきた後々大変にはなることもありますので、メンテナンス性を考えて、うまく利用しましょう！ 皆さんのコーディングライフの一助となれば幸いです。 今回も最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry208","title":"鬼のPHP合宿に参加しました","date":"2014-11-30","modifiedDate":null,"category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2014/entry208.webp","description":"php.netを頼りにフォームを作る鬼のようなPHP耐久勉強会に参加してきました。もはや空前のともしび、いつお迎えが来ても分からない状態なくらい憔悴しきってますが、記憶が薄れぬうちに綴ります…。","tags":["PHP","しろたん師匠"],"body":"php.netを頼りにフォームを作る鬼のようなPHP耐久勉強会に参加してきました。もはや空前のともしび、いつお迎えが来ても分からない状態なくらい憔悴しきってますが、記憶が薄れぬうちに綴ります…。 結論から言いたいからまとめます 今回は何とかMySQLのデータを出し入れする際の関数を作ることまでできました。 「そんくらいできるー」というちょっとphpかじったくらいの人、ぜひコピペなしでリファレンスオンリーを参照にやってみてください。その際はもちろん、インテリセンス（補完）の効くエディターも使用禁止です（笑） 悔しいのは、入力の禁止事項で、バリデーションとかやりたいことが多すぎて形にすることができませんでした。。。 ここら辺は持ち帰ってやることにします。もちろんコピペなしでリファレンス見ながら考えつつです。 php.netのリファレンスはすごーく充実してました。熟読したおかげででも分かったことも多く…ラムダ式使えるんですね～。 今回苦楽を共にしたメンバーをリスペクトします。 そして改めて…。 Funaffectの大林さん、ありがとうございました。 そして一緒に頑張ったメンバーの皆さん、お疲れ様でした～。 極限状態から得られる何かを得るために 午後2時過ぎ、昨日それは始まった…。 講師の大林さんが徹夜しないと、phpは身に着けることができないと言った。 参加するまでその真意は分からなかった。 ミッション1.ドキュメントを読破せよ 参加とともに始まったのはリファレンスPHP.netを読破することからスタート。 読ã

1‚€æ™‚間は約8時間。 このリファレンスなめちゃあかん。情報量がぎっしり詰まっている。 理解しようとすると、想像以上に時間がかかるのです。 お昼2時から11時まで読み続けましたが、結局すべて読破することはできませんでした。 ミッション2.コピペは禁止 読破したら、phpで何ができるかわかるので、phpを使ってどんなプログラムをするか考えました。ちなみに「鬼のPHP合宿」ではコピペ禁止という謎のルールがあります。 コピペ…禁止だと…！？ これがすごーくキツかった。コピペ禁止なので途中からどんな関数が必要か考えつつ、メモりつつリファレンス読んだので余計時間がかかりました。 結局疲れすぎてどこにメモしたかもわからなくなって意味ありませんでした。。。。 ミッション3.体力を消耗した状態から戦闘開始 読破したころには、体力があるはずもなし。 もちろん頭も回りません。低血糖で立ち上がっただけでフラフラ。生命の危機を感じてあまり好きじゃない甘い食べ物ドーナツを食べました。 タイプする指もイマイチ鈍くなって、言ってることもかなり崩壊してきます。 まとめ・極限状態から得られるもの この勉強会に参加して、phpを習得できるわけではありません。 そもそも、勉強の仕方を習得するのが目的です。 今回、学校では教えてもらえなかったデバッグの仕方、プログラミングの考え方、あり方…つまり基礎が学べます。 そして、普段決してつまみ食いですべて目を通すことがないリファレンスを全体的に読むことで「phpいったいなんぞや？」ということも知ることができました。 ちょっとかじっただけで「phpはダメ」とか「php嫌い」とか言えなくなっちゃいましたね。 あと、コピペしたソースをちょっと改造したぐらいで「プログラミングできた」と思っていた自分も恥ずかしいです。 しろたん師匠（大林さん）のおかげで勉強の仕方を学ぶことができました。 感謝です。 プログラマーを目指す方はまずは学び方から学んではいかがでしょうか？ 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry204","title":"「広島でコンクリ」concrete5勉強会vol4開催しました","date":"2014-11-17","modifiedDate":null,"category":"career","categoryName":"キャリアアップ","ogImage":"/thumbnail/2014/entry204.webp","description":"11/16（日）「広島でコンクリ」concrete5勉強会vol4開催しました。コンクリートファイブジャパンのCCOのKatzさんをお招きして、concrere5の基本操作から、カスタム事例、本家PortlandLabsのレポートを聞くこともできました。","tags":["concrete5"],"body":"11/16（日）「広島でコンクリ」concrete5勉強会vol4開催しました。 コンクリートファイブジャパンのCCOのKatzさんをお招きして、concrere5の基本操作から、カスタム事例、本家PortlandLabsのレポートを聞くこともできました。 『広島でコンクリ』concrete5勉強会無事終了しました 今回、本当にプログラマ、インフラ屋さん、デザイナー等幅広い層の人が来て、言葉の選び方にも困ったと思います(笑) なので、concrete5というより、むしろCMSとは何ぞやあたりの話も盛り込まれてました。 ときどき笑いを交えるところはさっすがKatzさん！関西人ならではと思いました。 制作事例では何千～何万のページにも耐えうる屈強さに驚きでした。 結構有名どころのサイトもconcrete5で作られてるんですよね～。ここら辺の情報はコミュニティや当日参加者の特権ということで伏せておきます。へっへっへ…。 セッション中気になったものをさっそく試してみた 一番使うであろう記事エディターについて。 concrete5では記事エディターにはTinyMCEが使われているのですが、必要に応じてカスタムできます。 記事ブロックエディター設定をクリックします。 印象に残ったセッションを小出しに感想も含めてご紹介。 TinyMCEってなんぞや？WYSIWYGエディターをカスタムできる 一番使うであろう記事エディターについて。 concrete5では記事エディターにはTinyMCEが使われているのですが、必要に応じてカスタムできます。 記事ブロックエディター設定をクリックします。 ツールバーセットをカスタムにセットし、試しにh4を追加してみました～。 よく使うタグはこのようにセットしておけば、わざわざHTMLで編集しなくても済みますね。 左下に親切にもTinyMCEの使い方のリファレンスもついてます。 ただし日本語ではないので

1分かりにくい場合はコチラをご参考に。 TinyMCE の紹介 ユーザーすべてがHTMLに詳しいわけではありません。 うっかりボタンぽちって画面が変わってパニック～！ もう使いたくない!!! とか、ならないためにも、使ってほしくない・いらない機能はあえてなくしてしまった方がいいときもあります。カスタマイズできるので結果トラブル防止もできますね！ その他、concrete5には優れた権限設定がありますのでそこら辺もぜひ活用しまくりたいところですね。 当日のまとめ とりあえず当日の様子をTwitterまとめました。これを見ながら、思いだしつついろいろなネタを思いだしてみることにします。 Twitterまとめ 最後に… ご参加の皆さん、ありがとうございました～。","noindex":true},{"slug":"entry195","title":"OSC2014 in HIROSHIMAに参加しました！","date":"2014-09-21","modifiedDate":null,"category":"cms","categoryName":"CMS","ogImage":"/thumbnail/2014/entry175.webp","description":"concrete5エバンジェリストでもある私が、OSC2014 in HIROSHIMAに参加しました！concrete5 in HIROSHIMAからはCMS・concrete5の紹介でブースを出させていただきました。","tags":["concrete5"],"body":"concrete5エバンジェリストでもある私が、OSC2014 in HIROSHIMAに参加しました！concrete5 in HIROSHIMAからはCMS・concrete5の紹介でブースを出させていただきました。 OSC（オープンソースカンファレンス）ってなんぞや？ concrete5の勉強会を立ち上げてまだ2か月。初めてのことでコミュニティの方に助けられて何とかここまで来れました。 そして、OSCに出展したらとアドバイスいただきわからないまま申し込みました。 オープンソースカンファレンスは、オープンソースの今を伝えるイベントです。 東京だけでなく、北は北海道、南は沖縄まで全国各地で開催しています。 オープンソース関連のコミュニティや協賛企業・後援団体による、セミナーやプロダクトの展示などを入場・参加料が無料でご覧いただけるイベントです。 http://www.ospn.jp/ 確かに、趣旨に合ってる。当日は朝9時から長丁場のイベントになりました。 ブースでconcrete5の紹介 今回はなんとconcrete5Japanの代表取締役・菱川さんが応援に来てくれました！ 心細かったã

1®ã‚‚あり本当にありがたかったです～。 何よりも紹介方法を学ばせていただきました。 ブースでは新しいバージョンの5.7と以前のタイプの5.6を一緒にご紹介させていただきました。 こんなことを中心にご紹介させていただきました。 ページのレイアウトをコロコロ変えることができる キャンペーンバナーにもってこい細部まで期間限定で公開指定できる 複数人で手分けして管理できる（権限の設定） 直感的にレイアウトを変えられるので手離れが良い ソースはタダでDLできる よくよくまとめてみると、これって女性にうれしいCMSじゃないですか？ 女性って車を性能で選ぶのではなく見た目で選んでしまうし、着せ替え感覚で買い換えることもあります。日々お化粧だってコロコロ変えちゃうし。 サイト丸ごと変えるとコストがかかるけど、部分的にバナーやデザインを変えたりレイアウトをコロコロ変えられるって女性のニーズにピッタリかも。 目標：concrete5に興味を持ってもらうこと 今回セミナーでは皆さんにconcrete5に興味を持っていることを目標にお話をさせていただきました。 当日のスライド : concrete5を使ってみよう！ まとめ 懇親会ではいろんなオープンソースに携わる方たちのお話をさせていただきとても刺激になりました。 懇親会で『なんでconcrete5なの？』と言われました。 1番は使っていて楽しい！です。 もう1つの理由はphpを管理画面から触ることができないことですかね～。どのCMSも完ぺきではないですが少しでも安心して使えるCMSがいいですね。","noindex":true},{"slug":"entry192","title":"これだけ覚えておくと便利！フロントエンジニアのためのコマンド（ライン）","date":"2014-09-10","modifiedDate":"2026-03-26","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2014/entry192.webp","description":"コーダーにとって黒い画面で敷居が高いですよね？私がターミナルでよく使うスクリプトをまとめてみました。初心者でこれだけ覚えていればハッピーになれること間違いなし。Mac前提で進めていきます！※この記事は2014月09月10日に書いたものをリライトしました。","tags":["コマンド"],"body":"コーダーにとって黒い画面（コマンドライン）で敷居が高いですよね？ 私がターミナルでよく使うスクリプトをまとめてみました。初心者でこれだけ覚えていればハッピーになれること間違いなし。Mac前提で進めていきます！ ※この記事は2014月09月10日に書いたものをリライトしました。 コマンドラインってなんぞ？ コマンドラインとはキーボードを使い命令を入力して操作するツールのことを指します。 イラレやフォトショのようにマウスで直感的に使えるアプリケーションとは違い、Windows・Macともにテキストのやりとりだけで操作するのが特徴。 プログラミングの環境構築したり実際にプログラムを実行したりする際に使い方を覚えておくと便利です。 余談ですが、イラレやフォトショのようにマウスで操作できるアプリケーションのことをGUI（Graphical User Interface）、テキストだけで操作するものを CUI（Character User Interface） と言います。 コマンドを起動 少し前はiTermを使っていましたが、現在はVS CodeのTerminal機能を主に使っているのでそちらを使っていることを前提に説明します。 Mac の VS Codeでのターミナルはショートカット control + shift + @ で起動可能です。 上部メニューの Terminal > New Terminal からでもOK!! ※ ちなみにWindowsの人は「コマンドプロンプト」（ショートカットWindowsキー+ｓでcmdと入力すれば起動可能）で十分事足りると思います。 コマンドには実行すること以外にそれに対するオプションも多数あるのでそちらも合わせて紹介します。 「cd」コマンドで階層の移動 cdコマンドは参照したいディレクトリへ移動したい時に使います。 「ls」コマンドで現在のディレクトリの構造を調べる lsコマンドを使いましょう。 たまに不可視ファイ（先頭に.があるファイルなど）があってなんのこっちゃってことありますが、そんなとき便利。 lsコマンドの便利なオプション:-a（すべて表示） 参照ディレクトリ内のファイルをすべて表示してくれます。 とりわけ見つけにくいのが先頭に.（ピリオド）があるファイルなどです。 作ったはずのファイルがファインダー（Macのファイル管理のアプリ）でみても見つからないなんてことはプログラミング初学者に陥りやすいケースですね。 lsコマンドの便利なオプション:-l（詳細の表示） どんなステータスのファイルがあるかを調べる時に便利です。 ステータスは以下の通り。 なんでこのファイル書き込めないの？って悩んだ時に使えるコマンドです。 ファイルタイプ パーミション ハードリンクの数 オーナー名 グループ名 バイトサイズ タイムスタンプ ファイル名 lsコマンドの便利なオプション:-1（縦に表示） これは敬愛するしろたん師匠が言ってたコマンドです。 とりあえずどんなファイルがあるかみたい時、一列に並べれば数量が把握しやすいです。 「history」忘れんぼうさんのためのお助けコマンド 「前回どんなコマンド使ったっけ？」ってなる人に必須のコマンドはhistoryです。 今まで打ち込んだコマンドの履歴をたどれます。 デフォルトだとhistoryの履歴って1000件らしいです。 今回履歴保存方法は割愛します。 「fillall finder」MacのFinderの表示がおかしくなった！！ たまにマックのFinderに表示されるべきものが表示できないのにlsコマンドを叩くとあるってなことがあります。 そんなときは再起動が一番。 アップルの設定からも再起動可能ですが、コマンドから以下を叩くだけで再起動可能なので便利です。 「rm -R」とにかくディレクトリごと有無も言わずに削除したい とにかく有無も言わずにすべて削除したい時は以下のコマンドを使いましょう。 ただこのコマンド、ラピュタの「バルス」 ぐらいの破壊力があると思ってください。 一度消すと復活は不可能です。 昔、うっかり必要なファイルも決して地獄を見ました。 「which」でファイルやアプリケーションの格納場所を探せ たとえば、dockerがどこにあるか探したい時は？ 「sudo」管理者権限の切り替え スーパーユーザーで実行する。 パスワードを求められますがほとんどのコマンドはこれで実行可能。 「chmod」で権限変更 権限問題は大抵ローカルで立てたものも含めサーバー側で起こります。 あれ？ファイルが変更できない！権限かなぁ。。 権限（パーミッション）変更で困った場合はchmodが使えます。 | モード(数字) | モード(アルファベット) | 権限 | | ------------ | ---------------------- | | 4 | r | 読み取り | | 2 | w | 書き込み | | 1 | x | 実行 | 合計値を「所有者」「所有グループ」「その他」の順で入力し、パーミッションを変更できます。 変更後は ls コマンドで権限がちゃんと変わっているか確認します。 764の場合は 「所有者」に対し「読み取り」「書き込み」「実行」を付与 「所有グループ」に対し「読み取り」「書き込み」を付与 「その他」に「読み取り」を付与 アルファベットでも指定可能 アルファベットで指定することもできます。こちらの方が直感的にできるかもです。 | 変更対象 | 意味 | | -------- | -------- | | u | ユーザー | | g | グループ | | o | その他 | | a | すべて | 変更方法は以下です。 | 変更方法 | 意味 | | -------- | ---------------------- | | = | 指定した権限にする | | + | 指定した権限を付与する | | - | 指定した権限を除去する | | 変更内容 | æ„

1å‘³ | | -------- | -------- | | r | 読み取り | | w | 書き込み | | x | 実行 | exit / command + c:作業を抜ける 意外と紹介されていないので。 ショートカットcommand + cもしくはexitと入力すれば大抵の実行中の作業は抜けられます。 まとめ 現在現役フロントエンドエンジニアとして最低このくらい知ってたら便利かなーというコマンドをまとめてみました。 実際はもっと、もーーーーっと使います。 黒い画面は倦厭されがちですがまじでなんでもできますのでぜひ積極的にできるところから使うことをオススメします。 この記事がみなさんのコーディングライフの一助となれば幸いです。 最後までお読みいただきありがとうございました。","noindex":true},{"slug":"entry181","title":"aタグ（リンク）のクリックできる範囲をCSSで親要素まで広げる","date":"2014-08-09","modifiedDate":"2026-06-15","category":"web-developer","categoryName":"ウェブ制作","ogImage":"/thumbnail/2014/entry181.webp","description":"aタグのクリックする範囲がズレたり、想像以上にクリックできる範囲（当たり判定）がオカシい！そんなお悩み解決します。そこで、今回はaタグのクリックできる範囲のズレを直す方法をご紹介します。※ この記事は2026å¹´6月15日にメンテナンスしました。みなさんのコーディングライフの一助となれば幸いです。","tags":["CSS"],"body":"【2026å¹´6月 メンテナンス済み】 初回公開は2014年ですが、今もなお「aタグのクリック範囲」はコーディングにおける地å‘

1³ãªã‚¹ãƒˆãƒ¬ã‚¹æºã§ã™ã€‚ aタグのクリックする範囲がズレたり、想像以上にクリックできる範囲（当たり判定）がオカシい！そんなお悩み解決します。 基本となる display: block; を使った親要素への拡張から、Flexboxを使ったモダンな中央配置、さらにはHTML構造を壊さず無駄なdivも増やさないスマートな解決策まで、今の制作現場でそのまま使える 「最も手離れが良いCSS」 を再定義しました。 そこで、今回はaタグのクリックできる範囲のズレを直す方法をご紹介します。 ※ この記事は2026å¹´6月15日にメンテナンスしました。みなさんのコーディングライフの一助となれば幸いです。 aタグ（リンク）にまつわるお困りごと3つ この記事では初心者がつまずきがちの3つのお困りごとの解消法と原因をご紹介します ナビゲーションをクリックしても反応しない！？ aタグの中に画像を配置して下側にできたアキをどうにかしたい!! リンクのど真ん中に文字や画像を配置したい お困りごと1・あれ？！ナビゲーションをクリックしても反応しない！？ こんなナビを作ってみたものの、見た目はキレイにできているのにクリックしてもテキスト部分しかリンクが反応しない。。。。 そんなことあります。 テキスト以外のエリアをクリックしてもちゃんとリンクへ飛ぶようにしたいですよね？ このようにナビゲーションを配置したい時に書きがちなコードです。 display: flexでナビのliタグを横方向に並べ、幅を均等に振り分けます。 残念ながらこのコードではリンクの範囲はliタグと同じサイズになりません。 解決法：CSSでaタグにプロパティdisplay:blockをセットするだけ ではどうすればいいのか。 解決方法はカンタンです。 aタグにCSSでプロパティdisplay:blockやをセットするだけです。 原因の解説 理由はaタグの初期値はdisplay: inline、つまりaタグがインラインレベルの要素だからです。 displayは要素の表示形式を指定するプロパティでinlineを指定すると通常、内側のコンテンツ（テキストなど）以上のサイズに大きくなることはありません。 そのためliタグの中にインラインレベルの要素をおくからアキができてしまうわけです。 プロパティdisplayを活用して表示形式を変えましょう。 お困りごと2・aタグの中に画像を配置して下側にできたアキをどうにかしたい!! 画像を入れ子にしたら下の方にこんな感じのアキが！！ 解決法：CSSでimgタグにプロパティvertical-align: bottomをセット この現象は初心者あるあるです。 解消法はCSSでimgタグにvertical-align: bottomをセットするだけです。 原因の解説 プロパティvertical-alignはインライン要素の縦方向の位置を調整するプロパティです。 アイコンの位置上付、下付きなどの文字位置の調整もプロパティvertical-alignを使います。 imgタグの下になぜ余白ができるのか。 インラインレベルの要素はアルファベットをベースに作られているからです。 HTMLはもともと英語圏の人が作ったものなので、文字にはベースラインが基準になるようにセットされてます。小文字の「g」や「j」下に突き抜けます。 imgタグなどのインラインレベルの要素はこれらの文字と同じ振る舞いをするので下に変なアキができてしまうのです。 画像の位置のたての位置の基準を一番下に変えれば良いだけです。 お困りごと3・リンクの範囲を縦方向にも広げて文字位置を縦横方向真ん中に配置したい イラストのようなナビゲーションメニューを作る時、 高さを寸分狂わず決まった高さにしたい!! しかもリンクのテキストは上下左右ピタッとセンタリングしたい。 なのにpaddingやheightを駆使してもなぜかうまくいかないことってありませんか？ 解決法：aタグにプロパティdisplay:flexをセットして配置を調整 解決法はdisplay: flexを使い倒します。 aタグに高さをセットする display: flex justify-content: center align-items: center 原因と解説 プロパティdisplayをflexにすると子要素やコンテンツの縦方向や横方向並びと位置をコントロールできます。 flex-directionというプロパティをセットで使うのですが、初期値はrowがセットされており子要素は横並びになります。なので縦方向に並べたい時はcolumnをセットしておきます。 並べていく方向のコンテンツの位置をコントロールできるのがjustify-contentで、centerにするとこの場合、コンテンツは横方向にセンタリングされます。 縦方向に対しての位置をコントロールするプロパティがalign-itemsです。値をcenterにするとaタグの縦方向に対し真ん中にコンテンツを配置できます。 おまけ・HTML5の要素について要素がどうカテゴライズされているか知っておこう インライン、ブロック要素という言い方はHTML5ではなくなりました。 ただ、この記事では便宜上aタグとimgタグをインラインレベルの要素と説明しています。 イãƒ

1³ãƒ©ã‚¤ãƒ³ã€ãƒ–ロックの解説は難しいですね。 要素は分類できる 要素（HTLMタグ）、つまりコンテンツは7つに分類できます。 メタデータ・コンテンツ ... 文書情報や別文書との関係などを定義するコンテンツ フロー・コンテンツ ... 文書の本体に現れる一般的なコンテンツ セクショニング・コンテンツ ... セクションの範囲を定義するコンテンツ ヘッディング・コンテンツ ... 見出しを表すコンテンツ フレージング・コンテンツ ... 段落内で使用するようなコンテンツ エンベッディッド・コンテンツ ... 文書内に埋め込みを行うコンテンツ インタラクティブ・コンテンツ ... ユーザーが操作可能なコンテンツ aタグやimgタグは、HTML5では主にフレージングコンテンツの一種ですが同時にユーザーが操作可能なのでインタラクティブコンテンツでもあります。 さらに、imgタグは「画像を埋め込む」コンテンツでもあるのでエンベッディッド・コンテンツにも属します。 とても複雑ですね。 要素の特性を知る上では重要ですが、こんなことイチイチ気にしていたらコーディングできないです。 たとえはフレージング・コンテンツであるspanや、strongの中にpタグやdivタグを入れたら文書構造が破綻するぐらいは知っておいた方がいいですが、気になったら都度調べる程度で十分です。 | 種類 | タグ | 備考 | | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | | フローコンテンツ | , , ,（map要素内にある場合）, , ,, , , , ,, , , , , , , ,, , ,,, , , , , , ,, -, ,, , , ,, , , , , , , , ,, , , ,, , , , , , , , , , , ,, , , , ,, , , , ,, , , , , , , , , , テキスト | | メタデータコンテンツ | , , , , , , , | | ヘッディングコンテンツ | ~ | 見出し | | セクショニングコンテンツ | , , , | | | フレージングコンテンツ | , , （map要素内にある場合） , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , テキスト | | | エンベディッドコンテンツ | , , , , , , , | | | インタラクティブコンテンツ | （HTML 5.1ではhref属性がある場合に限る）,, （controls属性がある場合）,, , , , ,, （usemap属性がある場合）,, （type=\\"hidden\\"の場合は除く）,, , ,（usemap属性がある場合）（HTML 5.1では除外）,, , , （controls属性がある場合） | | まとめ・この記事を読んでくださった方へ この記事は私がブログを始めた頃、2014年に書いたものです。 ありがたいことに、いまだに毎月たくさんの人に読んでもらっています。 きっとコーディングで行き詰ってこの記事にたどり着いていると思うので、少しでもわかりやすくなるよう何度もメンテナンスしています。お役に立てたら幸いです^ ^。 最後まで、お読みいただきありがとうございました。","noindex":false},{"slug":"entry172","title":"厳島神社の撮影許可と写真の著作権。フリー素材・SNS掲載に潜む盲点を解説","date":"2014-05-14","modifiedDate":"2026-07-07","category":"ginneko-tsuredure","categoryName":"かみーゆ徒然記","ogImage":"/thumbn

1ail/2014/entry172.webp","description":"商用OKのフリー素材や自撮り写真なら神社の画像を自由に載せていい？実はそこに掲載許可の盲点があります。2014年に私が厳島神社へ直電し「逆に困惑された」生の回答をもとに、写真の著作権や施設管理権の境界線を解説。2026年最新ルールをクリアし、誰も教えてくれない実務の真実を伝えます。","tags":["著作権"],"body":"自分で撮影した自慢の写真や、利用規約に「商用OK」と書かれた使い勝手のいいフリー素材。それらをお気に入りのブログや企業のホームページへ自由に載せられると、発信がいっそう楽しくなりますよね！ しかし、発信をより安全かつ確実にするために、絶対に知っておくべき大切なマナーがあります。それが 「被写体の承諾（施設管理権）」 という視点です。 特に世界遺産にも登録されている 厳島神社 のように、歴史的・宗教的価値の高い建造物は、撮影そのものが大歓迎されていても、実は「メディアやブログへの掲載」には手続きを踏むことで、お互いに気持ちよく公開できるようになります。 なにを隠そう、仕事で厳島神社の写真を使う可能性があったã

1®ã§ã€åŽ³å³¶ç¥žç¤¾ã®ç¤¾å‹™æ‰€ã¸ç›´é›»ã—ました（2014年）。 私が真面目すぎて、担当者の方が少し驚いて苦笑いされました。 広島出身の私が、そのときの生の回答を含めて、エンジニアやクリエイターが胸を張って発信を続けるための「掲載許可」の境界線をわかりやすく解説します！ この記事でわかること 厳島神社などのフリー素材や画像を使う前に知るべき基礎知識 自分で撮影した写真でも、掲載許可の手続きが必要になる理由 2014年の直電取材でわかった、神社側の「リアルな本音」 2026年も変わらない、正しい申請方法と発信のマナー 正しい筋の通し方をサクッと味方につけて、誰からもリスペクトされる素敵なコンテンツを堂々と発信していきましょう！ 厳島神社に写真の撮影・掲載許可について直接問い合わせた結果 当時、私が運営していたメディアで厳島神社の写真を使用する可能性があったため、事実確認のために社務所へ直接電話で問い合わせを行いました。その際、担当者の方から頂いた回答は、非常に重みのあるものでした。 「掲載の目的や規模にかかわらず、まずは書面での申請をお願いしています。 厳島神社は宗教法人 です。広島の象徴として親しんでいただくのは光栄ですが、掲載される媒体の内容（公序良俗、政治的・宗教的利用など）によっては、お断りさせていただくこともございます」 この回答から学べるのは、私たちが「フリー素材」だと思っている風景も、管理者にとっては 「守るべき信仰の場」 であるという視点です。 「自分が撮った写真だから自分のものだ」という所有権の主張は、その場所を管理・維持している団体の 「施設管理権」 の前では、必ずしも万能ではありません。特にブログを収益化している（アドセンスやアフィリエイトを貼っている）場合、それは「商用利用」とみなされるリスクがあることを忘れてはいけません。 2026年現在の厳島神社写真掲載ルール 2026年現在も、この基本方針は維持されています。もし厳島神社の写真（大鳥居を含む）をブログや配布物に掲載したい場合は、以下のフローを確認してください。 申請窓口：〒739-0588 広島県廿日市市宮島町1-1「嚴島神社 社務所」宛 申請方法：電話ではなく 「郵送」 による書面申請が原則です。 必要事項：掲載媒体の概要、使用目的、発行部数（または想定PV）、レイアウト見本（ラフ）を同封します。 手数料：営利目的の場合、冥加金（掲載料）が発生することがあります。 ※最新の状況は 広島観光ナビ Dive! Hiroshima 等の公式ソースを必ずチェックし、自治体ではなく 「神社側」 と直接やり取りを行う必要があります。 ブログやWeb制作で「掲載許可」を申請する際の注意点とマナー 書面申請を出す際、ただ「ブログに載せます」と書くのではなく、「神社を尊重して掲載する意思を伝えること」 「公序良俗に反するアフィリエイト等と並列にしないこと」 を明記した企画書（レイアウト）を添えると、スムーズに許可をもらえると思います。 まとめ：神社 の 写真 を SNS やブログで扱う際の見落としがちな盲点 この記事を最初に公開してから12年。SNSや生成AIの普及により、画像データの境界線はより曖昧になっています。しかし、曖昧だからこそ 「権利者への敬意（リスペクト）」 というアナログな姿勢が、最後には自分を守ることになります。 1. 「商用フリー」の言葉を過信しない：素材サイトが「被写体の掲載許可（プロパティリリース）」まã

1§å–得しているとは限りません。 2. 撮影ポリシーの確認をルーティンにする：有名な庭園、寺社仏閣、特殊な近代建築などは特に注意が必要です。 3. 「信仰の場」であることを再認識する：単なる「映えスポット」ではなく、そこが誰かにとっての聖域であることを忘れない。 2026年のインターネットでは、信頼性の高いコンテンツ（E-E-A-T）を作るためには、こうした細かい権利関係をクリアにしているかどうかが、AI検索エンジンからも厳しく評価されるポイントになっています。 正しい手続きを踏んで、胸を張って発信を続けましょう。 最後までお読みいただきありがとうございました。","noindex":false}]')},65189,e=>{"use strict";function t(){return{async:!1,breaks:!1,extensions:null,gfm:!0,hooks:null,pedantic:!1,renderer:null,silent:!1,tokenizer:null,walkTokens:null}}var o=t(),a={exec:()=>null};function r(e){let t=[];return o=>{let a=Math.max(0,Math.min(3,o-1)),r=t[a];return r||(r=e(a),t[a]=r),r}}function i(e,t=""){let o="string"==typeof e?e:e.source,a={replace:(e,t)=>{let r="string"==typeof t?t:t.source;return r=r.replace(n.caret,"$1"),o=o.replace(e,r),a},getRegex:()=>new RegExp(o,t)};return a}var s=((e="")=>{try{return!!RegExp("(?<=1)(?<!1)"+e)}catch{return!1}})(),n={codeRemoveIndent:/^(?: {1,4}| {0,3}\t)/gm,outputLinkReplace:/\\([\[\]])/g,indentCodeCompensation:/^(\s+)(?:```)/,beginningSpace:/^\s+/,endingHash:/#$/,startingSpaceChar:/^ /,endingSpaceChar:/ $/,nonSpaceChar:/[^ ]/,newLineCharGlobal:/\n/g,tabCharGlobal:/\t/g,multipleSpaceGlobal:/\s+/g,blankLine:/^[ \t]*$/,doubleBlankLine:/\n[ \t]*\n[ \t]*$/,blockquoteStart:/^ {0,3}>/,blockquoteSetextReplace:/\n {0,3}((?:=+|-+) *)(?=\n|$)/g,blockquoteSetextReplace2:/^ {0,3}>[ \t]?/gm,listReplaceNesting:/^ {1,4}(?=( {4})*[^ ])/g,listIsTask:/^\[[ xX]\] +\S/,listReplaceTask:/^\[[ xX]\] +/,listTaskCheckbox:/\[[ xX]\]/,anyLine:/\n.*\n/,hrefBrackets:/^<(.*)>$/,tableDelimiter:/[:|]/,tableAlignChars:/^\||\| *$/g,tableRowBlankLine:/\n[ \t]*$/,tableAlignRight:/^ *-+: *$/,tableAlignCenter:/^ *:-+: *$/,tableAlignLeft:/^ *:-+ *$/,startATag:/^<a /i,endATag:/^<\/a>/i,startPreScriptTag:/^<(pre|code|kbd|script)(\s|>)/i,endPreScriptTag:/^<\/(pre|code|kbd|script)(\s|>)/i,startAngleBracket:/^</,endAngleBracket:/>$/,pedanticHrefTitle:/^([^'"]*[^\s])\s+(['"])(.*)\2/,unicodeAlphaNumeric:/[\p{L}\p{N}]/u,escapeTest:/[&<>"']/,escapeReplace:/[&<>"']/g,escapeTestNoEncode:/[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/,escapeReplaceNoEncode:/[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/g,caret:/(^|[^\[])\^/g,percentDecode:/%25/g,findPipe:/\|/g,splitPipe:/ \|/,slashPipe:/\\\|/g,carriageReturn:/\r\n|\r/g,spaceLine:/^ +$/gm,notSpaceStart:/^\S*/,endingNewline:/\n$/,listItemRegex:e=>RegExp(`^( {0,3}${e})((?:[	 ][^\\n]*)?(?:\\n|$))`),nextBulletRegex:r(e=>RegExp(`^ {0,${e}}(?:[*+-]|\\d{1,9}[.)])((?:[ 	][^\\n]*)?(?:\\n|$))`)),hrRegex:r(e=>RegExp(`^ {0,${e}}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$)`)),fencesBeginRegex:r(e=>RegExp(`^ {0,${e}}(?:\`\`\`|~~~)`)),headingBeginRegex:r(e=>RegExp(`^ {0,${e}}#`)),htmlBeginRegex:r(e=>RegExp(`^ {0,${e}}<(?:[a-z].*>|!--)`,"i")),blockquoteBeginRegex:r(e=>RegExp(`^ {0,${e}}>`))},l=/^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/,c=/ {0,3}(?:[*+-]|\d{1,9}[.)])/,d=/^(?!bull |blockCode|fences|blockquote|heading|html|table)((?:.|\n(?!\s*?\n|bull |blockCode|fences|blockquote|heading|html|table))+?)\n {0,3}(=+|-+) *(?:\n+|$)/,p=i(d).replace(/bull/g,c).replace(/blockCode/g,/(?: {4}| {0,3}\t)/).replace(/fences/g,/ {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g,/ {0,3}>/).replace(/heading/g,/ {0,3}#{1,6}(?:\s|$)/).replace(/html/g,/ {0,3}<[^\n>]+>\n/).replace(/\|table/g,"").getRegex(),g=i(d).replace(/bull/g,c).replace(/blockCode/g,/(?: {4}| {0,3}\t)/).replace(/fences/g,/ {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g,/ {0,3}>/).replace(/heading/g,/ {0,3}#{1,6}(?:\s|$)/).replace(/html/g,/ {0,3}<[^\n>]+>\n/).replace(/table/g,/ {0,3}\|?(?:[:\- ]*\|)+[\:\- ]*\n/).getRegex(),m=/^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html|table|[ \t]+\n)[^\n]+)*)/,S=/(?!\s*\])(?:\\[\s\S]|[^\[\]\\])+/,u=i(/^ {0,3}\[(label)\]: *(?:\n[ \t]*)?([^<\s][^\s]*|<.*?>)(?:(?: +(?:\n[ \t]*)?| *\n[ \t]*)(title))? *(?:\n+|$)/).replace("label",S).replace("title",/(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/).getRegex(),b=i(/^(bull)([ \t][^\n]*?)?(?:\n|$)/).replace(/bull/g,c).getRegex(),h="address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|search|section|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul",y=/<!--(?:-?>|[\s\S]*?(?:-->|$))/,f=i("^ {0,3}(?:<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n*|$)|comment[^\\n]*(\\n+|$)|<\\?[\\s\\S]*?(?:\\?>[^\\n]*\\n*|$)|<![A-Z][\\s\\S]*?(?:>[^\\n]*\\n*|$)|<!\\[CDATA\\[[\\s\\S]*?(?:\\]\\]>[^\\n]*\\n*|$)|</?(tag)(?: +|\\n|/?>

1)[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$)|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$)|</(?!script|pre|style|textarea)[a-z][\\w-]*\\s*>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ 	]*)+\\n|$))","i").replace("comment",y).replace("tag",h).replace("attribute",/ +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex(),C=e=>i(m).replace("hr",l).replace("heading"," {0,3}#{1,6}(?:\\s|$)").replace("|lheading","").replace("|table","").replace("blockquote"," {0,3}>").replace("fences"," {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~~~)[^\\n]*\\n").replace("list",e).replace("html","</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag",h).getRegex(),P=C(/ {0,3}(?:[*+-]|1[.)])[ \t]+[^ \t\n]/),I=C(/ {0,3}(?:[*+-]|\d{1,9}[.)])(?:[ \t]|\n|$)/),A={blockquote:i(/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/).replace("paragraph",I).getRegex(),code:/^((?: {4}| {0,3}\t)[^\n]+(?:\n(?:[ \t]*(?:\n|$))*)?)+/,def:u,fences:/^ {0,3}(`{3,}(?=[^`\n]*(?:\n|$))|~{3,})([^\n]*)(?:\n|$)(?:|([\s\S]*?)(?:\n|$))(?: {0,3}\1[~`]* *(?=\n|$)|$)/,heading:/^ {0,3}(#{1,6})(?=\s|$)(.*)(?:\n+|$)/,hr:l,html:f,lheading:p,list:b,newline:/^(?:[ \t]*(?:\n|$))+/,paragraph:P,table:a,text:/^[^\n]+/},w=i("^ *([^\\n ].*)\\n {0,3}((?:\\| *)?:?-+:? *(?:\\| *:?-+:? *)*(?:\\| *)?)(?:\\n((?:(?! *\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\n|$))*)\\n*|$)").replace("hr",l).replace("heading"," {0,3}#{1,6}(?:\\s|$)").replace("blockquote"," {0,3}>").replace("code","(?: {4}| {0,3}	)[^\\n]").replace("fences"," {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~~~)[^\\n]*\\n").replace("list"," {0,3}(?:[*+-]|1[.)])[ \\t]").replace("html","</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag",h).getRegex(),k={...A,lheading:g,table:w,paragraph:i(m).replace("hr",l).replace("heading"," {0,3}#{1,6}(?:\\s|$)").replace("|lheading","").replace("table",w).replace("blockquote"," {0,3}>").replace("fences"," {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~~~)[^\\n]*\\n").replace("list"," {0,3}(?:[*+-]|1[.)])[ \\t]+[^ \\t\\n]").replace("html","</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag",h).getRegex()},G={...A,html:i("^ *(?:comment *(?:\\n|\\s*$)|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)|<tag(?:\"[^\"]*\"|'[^']*'|\\s[^'\"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))").replace("comment",y).replace(/tag/g,"(?!(?:a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)\\b)\\w+(?!:|[^\\w\\s@]*@)\\b").getRegex(),def:/^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/,heading:/^(#{1,6})(.*)(?:\n+|$)/,fences:a,lheading:/^(.+?)\n {0,3}(=+|-+) *(?:\n+|$)/,paragraph:i(m).replace("hr",l).replace("heading",` *#{1,6} *[^
2]`).replace("lheading",p).replace("|table","").replace("blockquote"," {0,3}>").replace("|fences","").replace("|list","").replace("|html","").replace("|tag","").getRegex()},D=/^( {2,}|\\)\n(?!\s*$)/,x=/[\p{P}\p{S}]/u,T=/[\s\p{P}\p{S}]/u,M=/[^\s\p{P}\p{S}]/u,v=i(/^((?![*_])punctSpace)/,"u").replace(/punctSpace/g,T).getRegex(),W=/(?!~)[\p{P}\p{S}]/u,E=i(/link|precode-code|html/,"g").replace("link",/\[(?:[^\[\]`]|(?<a>`+)[^`]+\k<a>(?!`))*?\]\((?:\\[\s\S]|[^\\\(\)]|\((?:\\[\s\S]|[^\\\(\)])*\))*\)/).replace("precode-",s?"(?<!`)()":"(^^|[^`])").replace("code",/(?<b>`+)[^`]+\k<b>(?!`)/).replace("html",/<(?! )[^<>]*?>/).getRegex(),N=/^(?:\*+(?:((?!\*)punct)|([^\s*]))?)|^_+(?:((?!_)punct)|([^\s_]))?/,L=i(N,"u").replace(/punct/g,x).getRegex(),O=i(N,"u").replace(/punct/g,W).getRegex(),H="^[^_*]*?__[^_*]*?\\*[^_*]*?(?=__)|[^*]+(?=[^*])|(?!\\*)punct(\\*+)(?=[\\s]|$)|notPunctSpace(\\*+)(?!\\*)(?=punctSpace|$)|(?!\\*)punctSpace(\\*+)(?=notPunctSpace)|[\\s](\\*+)(?!\\*)(?=punct)|(?!\\*)punct(\\*+)(?!\\*)(?=punct)|notPunctSpace(\\*+)(?=notPunctSpace)",R=i(H,"gu").replace(/notPunctSpace/g,M).replace(/punctSpace/g,T).replace(/punct/g,x).getRegex(),j=i(H,"gu").replace(/notPunctSpace/g,/(?:[^\s\p{P}\p{S}]|~)/u).replace(/punctSpace/g,/(?!~)[\s\p{P}\p{S}]/u).replace(/punct/g,W).getRegex(),J=i("^[^_*]*?\\*\\*[^_*]*?_[^_*]*?(?=\\*\\*)|[^_]+(?=[^_])|(?!_)punct(_+)(?=[\\s]|$)|notPunctSpace(_+)(?!_)(?=punctSpace|$)|(?!_)punctSpace(_+)(?=notPunctSpace)|[\\s](_+)(?!_)(?=punct)|(?!_)punct(_+)(?!_)(?=punct)","gu").replace(/notPunctSpace/g,M).replace(/punctSpace/g,T).replace(/punct/g,x).getRegex(),B=i(/^~~?(?:((?!~)punct)|[^\s~])/,"u").replace(/punct/g,x).getRegex(),V=i("^[^~]+(?=[^~])|(?!~)punct(~~?)(?=[\\s]|$)|notPunctSpace(~~?)(?!~)(?=punctSpace|$)|(?!~)punctSpace(~~?)(?=notPunctSpace)|[\\s](~~?)(?!~)(?=punct)|(?!~)punct(~~?)(?!~)(?=punct)|notPunctSpace(~~?)(?=notPunctSpace)","gu").replace(/notPunctSpace/g,M).replace(/punctSpace/g,T).replace(/punct/g,x).getRegex(),U=i(/\\(punct)/,"gu").replace(/punct/g,x).getRegex(),F=i(/^<(scheme:[^\s\x00-\x1f<>]*|email)>/).replace("scheme",/[a-zA-Z][a-zA-Z0-9+.-]{1,31}/).replace("email",/[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/).getRegex(),Q=i(y).replace("(?:-->|$)","-->").getRegex(),_=i("^comment|^</[a-zA-Z][\\w:-]*\\s*>|^<[a-zA-Z][\\w-]*(?:attribute)*?\\s*/?>|^<\\?[\\s\\S]*?\\?>|^<![a-zA-Z]+\\s[\\s\\S]*?>|^<!\\[CDATA\\[[\\s\\S]*?\\]\\]>").replace("comment",Q).replace("attribute",/\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/).getRegex(),z=/(?:\[(?:\\[\s\S]|[^\[\]\\])*\]|\\[\s\S]|`+(?!`)[^`]*?`+(?!`)|``+(?=\])|[^\[\]\\`])*?/,$=i(/^!?\[(label)\]\(\s*(href)(?:(?:[ \t]+(?:\n[ \t]*)?|\n[ \t]*)(title))?\s*\)/).replace("label",z).replace("href",/<(?:\\.|[^\n<>\\])+>|[^ \t\n\x00-\x1f]+|(?=\))/).replace("title",/"(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)/).getRegex(),K=i(/^!?\[(label)\]\[(ref)\]/).replace("label",z).replace("ref",S).getRegex(),X=i(/^!?\[(ref)\](?:\[\])?/).replace("ref",S).getRegex(),Y=i("reflink|nolink(?!\\()","g").replace("reflink",K).replace("nolink",X).getRegex(),q=/[hH][tT][tT][pP][sS]?|[fF][tT][pP]/,Z={_backpedal:a,anyPunctuation:U,autolink:F,blockSkip:E,br:D,code:/^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/,del:a,delLDelim:a,delRDelim:a,emStrongLDelim:L,emStrongRDelimAst:R,emStrongRDelimUnd:J,escape:/^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/,link:$,nolink:X,punctuation:v,reflink:K,reflinkSearch:Y,tag:_,text:/^(`+|[^`])(?:(?= {2,}\n)|[\s\S]*?(?:(?=[\\<!\[`*_]|\b_|$)|[^ ](?= {2,}\n)))/,url:a},ee={...Z,link:i(/^!?\[(label)\]\((.*?)\)/).replace("label",z).getRegex(),reflink:i(/^!?\[(label)\]\s*\[([^\]]*)\]/).replace("label",z).getRegex()},et={...Z,emStrongRDelimAst:j,emStrongLDelim:O,delLDelim:B,delRDelim:V,url:i(/^((?:protocol):\/\/|www\.)(?:[a-zA-Z0-9\-]+\.?)+[^\s<]*|^email/).replace("protocol",q).replace("email",/[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/).getRegex(),_backpedal:/(?:[^?!.,:;*_'"~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_'"~)]+(?!$))+/,del:/^(~~?)(?=[^\s~])((?:\\[\s\S]|[^\\])*?(?:\\[\s\S]|[^\s~\\]))\1(?=[^~]|$)/,text:i(/^(`+|~+|[^`~])(?:(?=[`~])|(?= {2,}\n)|(?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)|[\s\S]*?(?:(?=[\\<!\[`*~_]|\b_|protocol:\/\/|www\.|$)|[^ ](?= {2,}\n)|[^a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-](?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)))/).replace("protocol",q).getRegex()},eo={...et,br:i(D).replace("{2,}","*").getRegex(),text:i(et.text).replace("\\b_","\\b_| {2,}\\n").replace(/\{2,\}/g,"*").getRegex()},ea={normal:A,gfm:k,pedantic:G},er={normal:Z,gfm:et,breaks:eo,pedantic:ee},ei={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},es=e=>ei[e];function en(e,t){if(t){if(n.escapeTest.test(e))return e.replace(n.escapeReplace,es)}else if(n.escapeTestNoEncode.test(e))return e.replace(n.escapeReplaceNoEncode,es);return e}function el(e){try{e=encodeURI(e).replace(n.percentDecode,"%")}catch{return null}return e}function ec(e,t){let o=e.replace(n.findPipe,(e,t,o)=>{let a=!1,r=t;for(;--r>=0&&"\\"===o[r];)a=!a;return a?"|":" |"}).split(n.splitPipe),a=0;if(o[0].trim()||o.shift(),o.length>

20&&!o.at(-1)?.trim()&&o.pop(),t)if(o.length>t)o.splice(t);else for(;o.length<t;)o.push("");for(;a<o.length;a++)o[a]=o[a].trim().replace(n.slashPipe,"|");return o}function ed(e,t,o){let a=e.length;if(0===a)return"";let r=0;for(;r<a;){let i=e.charAt(a-r-1);if(i!==t||o)if(i!==t&&o)r++;else break;else r++}return e.slice(0,a-r)}function ep(e){let t=e.split(`
3`),o=t.length-1;for(;o>=0&&n.blankLine.test(t[o]);)o--;return t.length-o<=2?e:t.slice(0,o+1).join(`
4`)}function eg(e,t,o,a,r){let i=t.href,s=t.title||null,n=e[1].replace(r.other.outputLinkReplace,"$1");a.state.inLink=!0;let l={type:"!"===e[0].charAt(0)?"image":"link",raw:o,href:i,title:s,text:n,tokens:a.inlineTokens(n)};return a.state.inLink=!1,l}var em=class{options;rules;lexer;constructor(e){this.options=e||o}space(e){let t=this.rules.block.newline.exec(e);if(t&&t[0].length>0)return{type:"space",raw:t[0]}}code(e){let t=this.rules.block.code.exec(e);if(t){let e=this.options.pedantic?t[0]:ep(t[0]),o=e.replace(this.rules.other.codeRemoveIndent,"");return{type:"code",raw:e,codeBlockStyle:"indented",text:o}}}fences(e){let t=this.rules.block.fences.exec(e);if(t){let e=t[0],o=function(e,t,o){let a=e.match(o.other.indentCodeCompensation);if(null===a)return t;let r=a[1];return t.split(`
5`).map(e=>{let t=e.match(o.other.beginningSpace);if(null===t)return e;let[a]=t;return a.length>=r.length?e.slice(r.length):e}).join(`
6`)}(e,t[3]||"",this.rules);return{type:"code",raw:e,lang:t[2]?t[2].trim().replace(this.rules.inline.anyPunctuation,"$1"):t[2],text:o}}}heading(e){let t=this.rules.block.heading.exec(e);if(t){let e=t[2].trim();if(this.rules.other.endingHash.test(e)){let t=ed(e,"#");(this.options.pedantic||!t||this.rules.other.endingSpaceChar.test(t))&&(e=t.trim())}return{type:"heading",raw:ed(t[0],`
7`),depth:t[1].length,text:e,tokens:this.lexer.inline(e)}}}hr(e){let t=this.rules.block.hr.exec(e);if(t)return{type:"hr",raw:ed(t[0],`
8`)}}blockquote(e){let t=this.rules.block.blockquote.exec(e);if(t){let e=ed(t[0],`
9`).split(`
10`),o="",a="",r=[];for(;e.length>0;){let t=!1,i=[],s;for(s=0;s<e.length;s++)if(this.rules.other.blockquoteStart.test(e[s]))i.push(e[s]),t=!0;else if(t)break;else i.push(e[s]);e=e.slice(s);let n=i.join(`
11`),l=n.replace(this.rules.other.blockquoteSetextReplace,`
12    $1`).replace(this.rules.other.blockquoteSetextReplace2,"");o=o?`${o}
13${n}`:n,a=a?`${a}
14${l}`:l;let c=this.lexer.state.top;if(this.lexer.state.top=!0,this.lexer.blockTokens(l,r,!0),this.lexer.state.top=c,0===e.length)break;let d=r.at(-1);if(d?.type==="code")break;if(d?.type==="blockquote"){let t=d.raw+`
15`+e.join(`
16`),i=this.blockquote(t);r[r.length-1]=i,o=o.substring(0,o.length-d.raw.length)+i.raw,a=a.substring(0,a.length-d.text.length)+i.text;break}if(d?.type==="list"){let t=d.raw+`
17`+e.join(`
18`),i=this.list(t);r[r.length-1]=i,o=o.substring(0,o.length-d.raw.length)+i.raw,a=a.substring(0,a.length-d.raw.length)+i.raw,e=t.substring(r.at(-1).raw.length).split(`
19`);continue}}return{type:"blockquote",raw:o,tokens:r,text:a}}}list(e){let t=this.rules.block.list.exec(e);if(t){let o=t[1].trim(),a=o.length>1,r={type:"list",raw:"",ordered:a,start:a?+o.slice(0,-1):"",loose:!1,items:[]};o=a?`\\d{1,9}\\${o.slice(-1)}`:`\\${o}`,this.options.pedantic&&(o=a?o:"[*+-]");let i=this.rules.other.listItemRegex(o),s=!1;for(;e;){let o=!1,a="",n="";if(!(t=i.exec(e))||this.rules.block.hr.test(e))break;a=t[0],e=e.substring(a.length);let l=function(e,t=0){let o=t,a="";for(let t of e)if("	"===t){let e=4-o%4;a+=" ".repeat(e),o+=e}else a+=t,o++;return a}(t[2].split(`
20`,1)[0],t[1].length),c=e.split(`
21`,1)[0],d=!l.trim(),p=0;if(this.options.pedantic?(p=2,n=l.trimStart()):d?p=t[1].length+1:(p=(p=l.search(this.rules.other.nonSpaceChar))>4?1:p,n=l.slice(p),p+=t[1].length),d&&this.rules.other.blankLine.test(c)&&(a+=c+`
22`,e=e.substring(c.length+1),o=!0),!o){let t=this.rules.other.nextBulletRegex(p),o=this.rules.other.hrRegex(p),r=this.rules.other.fencesBeginRegex(p),i=this.rules.other.headingBeginRegex(p),s=this.rules.other.htmlBeginRegex(p),g=this.rules.other.blockquoteBeginRegex(p);for(;e;){let m=e.split(`
23`,1)[0],S;if(c=m,S=this.options.pedantic?c=c.replace(this.rules.other.listReplaceNesting,"  "):c.replace(this.rules.other.tabCharGlobal,"    "),r.test(c)||i.test(c)||s.test(c)||g.test(c)||t.test(c)||o.test(c))break;if(S.search(this.rules.other.nonSpaceChar)>=p||!c.trim())n+=`
24`+S.slice(p);else{if(d||l.replace(this.rules.other.tabCharGlobal,"    ").search(this.rules.other.nonSpaceChar)>=4||r.test(l)||i.test(l)||o.test(l))break;n+=`
25`+c}d=!c.trim(),a+=m+`
26`,e=e.substring(m.length+1),l=S.slice(p)}}r.loose||(s?r.loose=!0:this.rules.other.doubleBlankLine.test(a)&&(s=!0)),r.items.push({type:"list_item",raw:a,task:!!this.options.gfm&&this.rules.other.listIsTask.test(n),loose:!1,text:n,tokens:[]}),r.raw+=a}let n=r.items.at(-1);if(!n)return;for(let e of(n.raw=n.raw.trimEnd(),n.text=n.text.trimEnd(),r.raw=r.raw.trimEnd(),r.items)){this.lexer.state.top=!1,e.tokens=this.lexer.blockTokens(e.text,[]);let t=e.tokens[0];if(e.task&&(t?.type==="text"||t?.type==="paragraph")){e.text=e.text.replace(this.rules.other.listReplaceTask,""),t.raw=t.raw.replace(this.rules.other.listReplaceTask,""),t.text=t.text.replace(this.rules.other.listReplaceTask,"");for(let e=this.lexer.inlineQueue.length-1;e>=0;e--)if(this.rules.other.listIsTask.test(this.lexer.inlineQueue[e].src)){this.lexer.inlineQueue[e].src=this.lexer.inlineQueue[e].src.replace(this.rules.other.listReplaceTask,"");break}let o=this.rules.other.listTaskCheckbox.exec(e.raw);if(o){let t={type:"checkbox",raw:o[0]+" ",checked:"[ ]"!==o[0]};e.checked=t.checked,r.loose?e.tokens[0]&&["paragraph","text"].includes(e.tokens[0].type)&&"tokens"in e.tokens[0]&&e.tokens[0].tokens?(e.tokens[0].raw=t.raw+e.tokens[0].raw,e.tokens[0].text=t.raw+e.tokens[0].text,e.tokens[0].tokens.unshift(t)):e.tokens.unshift({type:"paragraph",raw:t.raw,text:t.raw,tokens:[t]}):e.tokens.unshift(t)}}else e.task&&(e.task=!1);if(!r.loose){let t=e.tokens.filter(e=>

26"space"===e.type);r.loose=t.length>0&&t.some(e=>this.rules.other.anyLine.test(e.raw))}}if(r.loose)for(let e of r.items)for(let t of(e.loose=!0,e.tokens))"text"===t.type&&(t.type="paragraph");return r}}html(e){let t=this.rules.block.html.exec(e);if(t){let e=ep(t[0]);return{type:"html",block:!0,raw:e,pre:"pre"===t[1]||"script"===t[1]||"style"===t[1],text:e}}}def(e){let t=this.rules.block.def.exec(e);if(t){let e=t[1].toLowerCase().replace(this.rules.other.multipleSpaceGlobal," "),o=t[2]?t[2].replace(this.rules.other.hrefBrackets,"$1").replace(this.rules.inline.anyPunctuation,"$1"):"",a=t[3]?t[3].substring(1,t[3].length-1).replace(this.rules.inline.anyPunctuation,"$1"):t[3];return{type:"def",tag:e,raw:ed(t[0],`
27`),href:o,title:a}}}table(e){let t=this.rules.block.table.exec(e);if(!t||!this.rules.other.tableDelimiter.test(t[2]))return;let o=ec(t[1]),a=t[2].replace(this.rules.other.tableAlignChars,"").split("|"),r=t[3]?.trim()?t[3].replace(this.rules.other.tableRowBlankLine,"").split(`
28`):[],i={type:"table",raw:ed(t[0],`
29`),header:[],align:[],rows:[]};if(o.length===a.length){for(let e of a)this.rules.other.tableAlignRight.test(e)?i.align.push("right"):this.rules.other.tableAlignCenter.test(e)?i.align.push("center"):this.rules.other.tableAlignLeft.test(e)?i.align.push("left"):i.align.push(null);for(let e=0;e<o.length;e++)i.header.push({text:o[e],tokens:this.lexer.inline(o[e]),header:!0,align:i.align[e]});for(let e of r)i.rows.push(ec(e,i.header.length).map((e,t)=>({text:e,tokens:this.lexer.inline(e),header:!1,align:i.align[t]})));return i}}lheading(e){let t=this.rules.block.lheading.exec(e);if(t){let e=t[1].trim();return{type:"heading",raw:ed(t[0],`
30`),depth:"="===t[2].charAt(0)?1:2,text:e,tokens:this.lexer.inline(e)}}}paragraph(e){let t=this.rules.block.paragraph.exec(e);if(t){let e=t[1].charAt(t[1].length-1)===`
31`?t[1].slice(0,-1):t[1];return{type:"paragraph",raw:t[0],text:e,tokens:this.lexer.inline(e)}}}text(e){let t=this.rules.block.text.exec(e);if(t)return{type:"text",raw:t[0],text:t[0],tokens:this.lexer.inline(t[0])}}escape(e){let t=this.rules.inline.escape.exec(e);if(t)return{type:"escape",raw:t[0],text:t[1]}}tag(e){let t=this.rules.inline.tag.exec(e);if(t)return!this.lexer.state.inLink&&this.rules.other.startATag.test(t[0])?this.lexer.state.inLink=!0:this.lexer.state.inLink&&this.rules.other.endATag.test(t[0])&&(this.lexer.state.inLink=!1),!this.lexer.state.inRawBlock&&this.rules.other.startPreScriptTag.test(t[0])?this.lexer.state.inRawBlock=!0:this.lexer.state.inRawBlock&&this.rules.other.endPreScriptTag.test(t[0])&&(this.lexer.state.inRawBlock=!1),{type:"html",raw:t[0],inLink:this.lexer.state.inLink,inRawBlock:this.lexer.state.inRawBlock,block:!1,text:t[0]}}link(e){let t=this.rules.inline.link.exec(e);if(t){let e=t[2].trim();if(!this.options.pedantic&&this.rules.other.startAngleBracket.test(e)){if(!this.rules.other.endAngleBracket.test(e))return;let t=ed(e.slice(0,-1),"\\");if((e.length-t.length)%2==0)return}else{let e=function(e){if(-1===e.indexOf(")"))return -1;let t=0;for(let o=0;o<e.length;o++)if("\\"===e[o])o++;else if("("===e[o])t++;else if(")"===e[o]&&--t<0)return o;return t>0?-2:-1}(t[2]);if(-2===e)return;if(e>-1){let o=(0===t[0].indexOf("!")?5:4)+t[1].length+e;t[2]=t[2].substring(0,e),t[0]=t[0].substring(0,o).trim(),t[3]=""}}let o=t[2],a="";if(this.options.pedantic){let e=this.rules.other.pedanticHrefTitle.exec(o);e&&(o=e[1],a=e[3])}else a=t[3]?t[3].slice(1,-1):"";return o=o.trim(),this.rules.other.startAngleBracket.test(o)&&(o=this.options.pedantic&&!this.rules.other.endAngleBracket.test(e)?o.slice(1):o.slice(1,-1)),eg(t,{href:o&&o.replace(this.rules.inline.anyPunctuation,"$1"),title:a&&a.replace(this.rules.inline.anyPunctuation,"$1")},t[0],this.lexer,this.rules)}}reflink(e,t){let o;if((o=this.rules.inline.reflink.exec(e))||(o=this.rules.inline.nolink.exec(e))){let e=t[(o[2]||o[1]).replace(this.rules.other.multipleSpaceGlobal," ").toLowerCase()];if(!e){let e=o[0].charAt(0);return{type:"text",raw:e,text:e}}return eg(o,e,o[0],this.lexer,this.rules)}}emStrong(e,t,o=""){let a=this.rules.inline.emStrongLDelim.exec(e);if(!(!a||!a[1]&&!a[2]&&!a[3]&&!a[4]||a[4]&&o.match(this.rules.other.unicodeAlphaNumeric))&&(!(a[1]||a[3])||!o||this.rules.inline.punctuation.exec(o))){let o=[...a[0]].length-1,r,i,s=o,n=0,l="*"===a[0][0]?this.rules.inline.emStrongRDelimAst:this.rules.inline.emStrongRDelimUnd;for(l.lastIndex=0,t=t.slice(-1*e.length+o);null!==(a=l.exec(t));){if(!(r=a[1]||a[2]||a[3]||a[4]||a[5]||a[6]))continue;if(i=[...r].length,a[3]||a[4]){s+=i;continue}if((a[5]||a[6])&&o%3&&!((o+i)%3)){n+=i;continue}if((s-=i)>0)continue;i=Math.min(i,i+s+n);let t=[...a[0]][0].length,l=e.slice(0,o+a.index+t+i);if(Math.min(o,i)%2){let e=l.slice(1,-1);return{type:"em",raw:l,text:e,tokens:this.lexer.inlineTokens(e)}}let c=l.slice(2,-2);return{type:"strong",raw:l,text:c,tokens:this.lexer.inlineTokens(c)}}}}codespan(e){let t=this.rules.inline.code.exec(e);if(t){let e=t[2].replace(this.rules.other.newLineCharGlobal," "),o=this.rules.other.nonSpaceChar.test(e),a=this.rules.other.startingSpaceChar.test(e)&&this.rules.other.endingSpaceChar.test(e);return o&&a&&(e=e.substring(1,e.length-1)),{type:"codespan",raw:t[0],text:e}}}br(e){let t=this.rules.inline.br.exec(e);if(t)return{type:"br",raw:t[0]}}del(e,t,o=""){let a=this.rules.inline.delLDelim.exec(e);

31if(a&&(!a[1]||!o||this.rules.inline.punctuation.exec(o))){let o=[...a[0]].length-1,r,i,s=o,n=this.rules.inline.delRDelim;for(n.lastIndex=0,t=t.slice(-1*e.length+o);null!==(a=n.exec(t));){if(!(r=a[1]||a[2]||a[3]||a[4]||a[5]||a[6])||(i=[...r].length)!==o)continue;if(a[3]||a[4]){s+=i;continue}if((s-=i)>0)continue;i=Math.min(i,i+s);let t=[...a[0]][0].length,n=e.slice(0,o+a.index+t+i),l=n.slice(o,-o);return{type:"del",raw:n,text:l,tokens:this.lexer.inlineTokens(l)}}}}autolink(e){let t=this.rules.inline.autolink.exec(e);if(t){let e,o;return o="@"===t[2]?"mailto:"+(e=t[1]):e=t[1],{type:"link",raw:t[0],text:e,href:o,tokens:[{type:"text",raw:e,text:e}]}}}url(e){let t;if(t=this.rules.inline.url.exec(e)){let e,o;if("@"===t[2])o="mailto:"+(e=t[0]);else{let a;do a=t[0],t[0]=this.rules.inline._backpedal.exec(t[0])?.[0]??"";while(a!==t[0])e=t[0],o="www."===t[1]?"http://"+t[0]:t[0]}return{type:"link",raw:t[0],text:e,href:o,tokens:[{type:"text",raw:e,text:e}]}}}inlineText(e){let t=this.rules.inline.text.exec(e);if(t){let e=this.lexer.state.inRawBlock;return{type:"text",raw:t[0],text:t[0],escaped:e}}}},eS=class e{tokens;options;state;inlineQueue;tokenizer;constructor(e){this.tokens=[],this.tokens.links=Object.create(null),this.options=e||o,this.options.tokenizer=this.options.tokenizer||new em,this.tokenizer=this.options.tokenizer,this.tokenizer.options=this.options,this.tokenizer.lexer=this,this.inlineQueue=[],this.state={inLink:!1,inRawBlock:!1,top:!0};let t={other:n,block:ea.normal,inline:er.normal};this.options.pedantic?(t.block=ea.pedantic,t.inline=er.pedantic):this.options.gfm&&(t.block=ea.gfm,this.options.breaks?t.inline=er.breaks:t.inline=er.gfm),this.tokenizer.rules=t}static get rules(){return{block:ea,inline:er}}static lex(t,o){return new e(o).lex(t)}static lexInline(t,o){return new e(o).inlineTokens(t)}lex(e){e=e.replace(n.carriageReturn,`
32`),this.blockTokens(e,this.tokens);for(let e=0;e<this.inlineQueue.length;e++){let t=this.inlineQueue[e];this.inlineTokens(t.src,t.tokens)}return this.inlineQueue=[],this.tokens}blockTokens(e,t=[],o=!1){this.tokenizer.lexer=this,this.options.pedantic&&(e=e.replace(n.tabCharGlobal,"    ").replace(n.spaceLine,""));let a=1/0;for(;e;){let r;if(e.length<a)a=e.length;else{this.infiniteLoopError(e.charCodeAt(0));break}if(this.options.extensions?.block?.some(o=>!!(r=o.call({lexer:this},e,t))&&(e=e.substring(r.raw.length),t.push(r),!0)))continue;if(r=this.tokenizer.space(e)){e=e.substring(r.raw.length);let o=t.at(-1);1===r.raw.length&&void 0!==o?o.raw+=`
33`:t.push(r);continue}if(r=this.tokenizer.code(e)){e=e.substring(r.raw.length);let o=t.at(-1);o?.type==="paragraph"||o?.type==="text"?(o.raw+=(o.raw.endsWith(`
34`)?"":`
35`)+r.raw,o.text+=`
36`+r.text,this.inlineQueue.at(-1).src=o.text):t.push(r);continue}if((r=this.tokenizer.fences(e))||(r=this.tokenizer.heading(e))||(r=this.tokenizer.hr(e))||(r=this.tokenizer.blockquote(e))||(r=this.tokenizer.list(e))||(r=this.tokenizer.html(e))){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.def(e)){e=e.substring(r.raw.length);let o=t.at(-1);o?.type==="paragraph"||o?.type==="text"?(o.raw+=(o.raw.endsWith(`
37`)?"":`
38`)+r.raw,o.text+=`
39`+r.raw,this.inlineQueue.at(-1).src=o.text):this.tokens.links[r.tag]||(this.tokens.links[r.tag]={href:r.href,title:r.title},t.push(r));continue}if((r=this.tokenizer.table(e))||(r=this.tokenizer.lheading(e))){e=e.substring(r.raw.length),t.push(r);continue}let i=e;if(this.options.extensions?.startBlock){let t=1/0,o=e.slice(1),a;this.options.extensions.startBlock.forEach(e=>{"number"==typeof(a=e.call({lexer:this},o))&&a>=0&&(t=Math.min(t,a))}),t<1/0&&t>=0&&(i=e.substring(0,t+1))}if(this.state.top&&(r=this.tokenizer.paragraph(i))){let a=t.at(-1);o&&a?.type==="paragraph"?(a.raw+=(a.raw.endsWith(`
40`)?"":`
41`)+r.raw,a.text+=`
42`+r.text,this.inlineQueue.pop(),this.inlineQueue.at(-1).src=a.text):t.push(r),o=i.length!==e.length,e=e.substring(r.raw.length);continue}if(r=this.tokenizer.text(e)){e=e.substring(r.raw.length);let o=t.at(-1);o?.type==="text"?(o.raw+=(o.raw.endsWith(`
43`)?"":`
44`)+r.raw,o.text+=`
45`+r.text,this.inlineQueue.pop(),this.inlineQueue.at(-1).src=o.text):t.push(r);continue}if(e){this.infiniteLoopError(e.charCodeAt(0));break}}return this.state.top=!0,t}inline(e,t=[]){return this.inlineQueue.push({src:e,tokens:t}),t}inlineTokens(e,t=[]){this.tokenizer.lexer=this;let o=e;if(this.tokens.links){let e=Object.keys(this.tokens.links);e.length>0&&(o=o.replace(this.tokenizer.rules.inline.reflinkSearch,t=>e.includes(t.slice(t.lastIndexOf("[")+1,-1))?"["+"a".repeat(t.length-2)+"]":t))}o=(o=o.replace(this.tokenizer.rules.inline.anyPunctuation,"++")).replace(this.tokenizer.rules.inline.blockSkip,(e,t,o)=>{let a=o?o.length:0;return e.slice(0,a)+"["+"a".repeat(e.length-a-2)+"]"}),o=this.options.hooks?.emStrongMask?.call({lexer:this},o)??o;let a=!1,r="",i=1/0;for(;e;){let s;if(e.length<i)i=e.length;else{this.infiniteLoopError(e.charCodeAt(0));break}if(a||(r=""),a=!1,this.options.extensions?.inline?.some(o=>!!(s=o.call({lexer:this},e,t))&&(e=e.substring(s.raw.length),t.push(s),!0)))continue;if((s=this.tokenizer.escape(e))||(s=this.tokenizer.tag(e))||(s=this.tokenizer.link(e))){e=e.substring(s.raw.length),t.push(s);continue}if(s=this.tokenizer.reflink(e,this.tokens.links)){e=e.substring(s.raw.length);let o=t.at(-1);"text"===s.type&&o?.type==="text"?(o.raw+=s.raw,o.text+=s.text):t.push(s);continue}if((s=this.tokenizer.emStrong(e,o,r))||(s=this.tokenizer.codespan(e))||(s=this.tokenizer.br(e))||(s=this.tokenizer.del(e,o,r))||(s=this.tokenizer.autolink(e))||!this.state.inLink&&(s=this.tokenizer.url(e))){e=e.substring(s.raw.length),t.push(s);continue}let n=e;if(this.options.extensions?.startInline){let t=1/0,o=e.slice(1),a;

45this.options.extensions.startInline.forEach(e=>{"number"==typeof(a=e.call({lexer:this},o))&&a>=0&&(t=Math.min(t,a))}),t<1/0&&t>=0&&(n=e.substring(0,t+1))}if(s=this.tokenizer.inlineText(n)){e=e.substring(s.raw.length),"_"!==s.raw.slice(-1)&&(r=s.raw.slice(-1)),a=!0;let o=t.at(-1);o?.type==="text"?(o.raw+=s.raw,o.text+=s.text):t.push(s);continue}if(e){this.infiniteLoopError(e.charCodeAt(0));break}}return t}infiniteLoopError(e){let t="Infinite loop on byte: "+e;if(this.options.silent)console.error(t);else throw Error(t)}},eu=class{options;parser;constructor(e){this.options=e||o}space(e){return""}code({text:e,lang:t,escaped:o}){let a=(t||"").match(n.notSpaceStart)?.[0],r=e.replace(n.endingNewline,"")+`
46`;return a?'<pre><code class="language-'+en(a)+'">'+(o?r:en(r,!0))+`</code></pre>
47`:"<pre><code>"+(o?r:en(r,!0))+`</code></pre>
48`}blockquote({tokens:e}){return`<blockquote>
49${this.parser.parse(e)}</blockquote>
50`}html({text:e}){return e}def(e){return""}heading({tokens:e,depth:t}){return`<h${t}>${this.parser.parseInline(e)}</h${t}>
51`}hr(e){return`<hr>
52`}list(e){let t=e.ordered,o=e.start,a="";for(let t=0;t<e.items.length;t++){let o=e.items[t];a+=this.listitem(o)}let r=t?"ol":"ul";return"<"+r+(t&&1!==o?' start="'+o+'"':"")+`>
53`+a+"</"+r+`>
54`}listitem(e){return`<li>${this.parser.parse(e.tokens)}</li>
55`}checkbox({checked:e}){return"<input "+(e?'checked="" ':"")+'disabled="" type="checkbox"> '}paragraph({tokens:e}){return`<p>${this.parser.parseInline(e)}</p>
56`}table(e){let t="",o="";for(let t=0;t<e.header.length;t++)o+=this.tablecell(e.header[t]);t+=this.tablerow({text:o});let a="";for(let t=0;t<e.rows.length;t++){let r=e.rows[t];o="";for(let e=0;e<r.length;e++)o+=this.tablecell(r[e]);a+=this.tablerow({text:o})}return a&&(a=`<tbody>${a}</tbody>`),`<table>
57<thead>
58`+t+`</thead>
59`+a+`</table>
60`}tablerow({text:e}){return`<tr>
61${e}</tr>
62`}tablecell(e){let t=this.parser.parseInline(e.tokens),o=e.header?"th":"td";return(e.align?`<${o} align="${e.align}">`:`<${o}>`)+t+`</${o}>
63`}strong({tokens:e}){return`<strong>${this.parser.parseInline(e)}</strong>`}em({tokens:e}){return`<em>${this.parser.parseInline(e)}</em>`}codespan({text:e}){return`<code>${en(e,!0)}</code>`}br(e){return"<br>"}del({tokens:e}){return`<del>${this.parser.parseInline(e)}</del>`}link({href:e,title:t,tokens:o}){let a=this.parser.parseInline(o),r=el(e);if(null===r)return a;let i='<a href="'+(e=r)+'"';return t&&(i+=' title="'+en(t)+'"'),i+=">"+a+"</a>"}image({href:e,title:t,text:o,tokens:a}){a&&(o=this.parser.parseInline(a,this.parser.textRenderer));let r=el(e);if(null===r)return en(o);e=r;let i=`<img src="${e}" alt="${en(o)}"`;return t&&(i+=` title="${en(t)}"`),i+=">"}text(e){return"tokens"in e&&e.tokens?this.parser.parseInline(e.tokens):"escaped"in e&&e.escaped?e.text:en(e.text)}},eb=class{strong({text:e}){return e}em({text:e}){return e}codespan({text:e}){return e}del({text:e}){return e}html({text:e}){return e}text({text:e}){return e}link({text:e}){return""+e}image({text:e}){return""+e}br(){return""}checkbox({raw:e}){return e}},eh=class e{options;renderer;textRenderer;constructor(e){this.options=e||o,this.options.renderer=this.options.renderer||new eu,this.renderer=this.options.renderer,this.renderer.options=this.options,this.renderer.parser=this,this.textRenderer=new eb}static parse(t,o){return new e(o).parse(t)}static parseInline(t,o){return new e(o).parseInline(t)}parse(e){this.renderer.parser=this;let t="";for(let o=0;o<e.length;o++){let a=e[o];if(this.options.extensions?.renderers?.[a.type]){let e=this.options.extensions.renderers[a.type].call({parser:this},a);if(!1!==e||!["space","hr","heading","code","table","blockquote","list","html","def","paragraph","text"].includes(a.type)){t+=e||"";continue}}switch(a.type){case"space":t+=this.renderer.space(a);break;case"hr":t+=this.renderer.hr(a);break;case"heading":t+=this.renderer.heading(a);break;case"code":t+=this.renderer.code(a);break;case"table":t+=this.renderer.table(a);break;case"blockquote":t+=this.renderer.blockquote(a);break;case"list":t+=this.renderer.list(a);break;case"checkbox":t+=this.renderer.checkbox(a);break;case"html":t+=this.renderer.html(a);break;case"def":t+=this.renderer.def(a);break;case"paragraph":t+=this.renderer.paragraph(a);break;case"text":t+=this.renderer.text(a);break;default:{let e='Token with "'+a.type+'" type was not found.';if(this.options.silent)return console.error(e),"";throw Error(e)}}}return t}parseInline(e,t=this.renderer){this.renderer.parser=this;let o="";for(let a=0;a<e.length;a++){let r=e[a];if(this.options.extensions?.renderers?.[r.type]){let e=this.options.extensions.renderers[r.type].call({parser:this},r);if(!1!==e||!["escape","html","link","image","strong","em","codespan","br","del","text"].includes(r.type)){o+=e||"";continue}}switch(r.type){case"escape":case"text":o+=t.text(r);break;case"html":o+=t.html(r);break;case"link":o+=t.link(r);break;case"image":o+=t.image(r);break;case"checkbox":o+=t.checkbox(r);break;case"strong":o+=t.strong(r);break;case"em":o+=t.em(r);break;case"codespan":o+=t.codespan(r);break;case"br":o+=t.br(r);break;case"del":o+=t.del(r);break;default:{let e='Token with "'+r.type+'" type was not found.';if(this.options.silent)return console.error(e),"";throw Error(e)}}}return o}},ey=class{options;block;constructor(e){this.options=e||o}static passThroughHooks=new Set(["preprocess","postprocess","processAllTokens","emStrongMask"]);static passThroughHooksRespectAsync=new Set(["preprocess","postprocess","processAllTokens"]);preprocess(e){return e}postprocess(e){return e}processAllTokens(e){return e}emStrongMask(e){return e}provideLexer(e=this.block){return e?eS.lex:eS.lexInline}provideParser(e=this.block){return e?eh.parse:eh.parseInline}},ef=new class{defaults=t();options=this.setOptions;parse=this.parseMarkdown(!0);parseInline=this.parseMarkdown(!1);Parser=eh;Renderer=eu;TextRenderer=eb;Lexer=eS;Tokenizer=em;Hooks=ey;constructor(...e){this.use(...e)}walkTokens(e,t){let o=[];for(let a of e)switch(o=o.concat(t.call(this,a)),a.type){case"table":for(let e of a.header)o=o.concat(this.walkTokens(e.tokens,t));for(let e of a.rows)for(let a of e)o=o.concat(this.walkTokens(a.tokens,t));break;case"list":o=o.concat(this.walkTokens(a.items,t));break;default:{let e=a;this.defaults.extensions?.childTokens?.[e.type]?this.defaults.extensions.childTokens[e.type].forEach(a=>{let r=e[a].flat(1/0);o=o.concat(this.walkTokens(r,t))}

63):e.tokens&&(o=o.concat(this.walkTokens(e.tokens,t)))}}return o}use(...e){let t=this.defaults.extensions||{renderers:{},childTokens:{}};return e.forEach(e=>{let o={...e};if(o.async=this.defaults.async||o.async||!1,e.extensions&&(e.extensions.forEach(e=>{if(!e.name)throw Error("extension name required");if("renderer"in e){let o=t.renderers[e.name];o?t.renderers[e.name]=function(...t){let a=e.renderer.apply(this,t);return!1===a&&(a=o.apply(this,t)),a}:t.renderers[e.name]=e.renderer}if("tokenizer"in e){if(!e.level||"block"!==e.level&&"inline"!==e.level)throw Error("extension level must be 'block' or 'inline'");let o=t[e.level];o?o.unshift(e.tokenizer):t[e.level]=[e.tokenizer],e.start&&("block"===e.level?t.startBlock?t.startBlock.push(e.start):t.startBlock=[e.start]:"inline"===e.level&&(t.startInline?t.startInline.push(e.start):t.startInline=[e.start]))}"childTokens"in e&&e.childTokens&&(t.childTokens[e.name]=e.childTokens)}),o.extensions=t),e.renderer){let t=this.defaults.renderer||new eu(this.defaults);for(let o in e.renderer){if(!(o in t))throw Error(`renderer '${o}' does not exist`);if(["options","parser"].includes(o))continue;let a=e.renderer[o],r=t[o];t[o]=(...e)=>{let o=a.apply(t,e);return!1===o&&(o=r.apply(t,e)),o||""}}o.renderer=t}if(e.tokenizer){let t=this.defaults.tokenizer||new em(this.defaults);for(let o in e.tokenizer){if(!(o in t))throw Error(`tokenizer '${o}' does not exist`);if(["options","rules","lexer"].includes(o))continue;let a=e.tokenizer[o],r=t[o];t[o]=(...e)=>{let o=a.apply(t,e);return!1===o&&(o=r.apply(t,e)),o}}o.tokenizer=t}if(e.hooks){let t=this.defaults.hooks||new ey;for(let o in e.hooks){if(!(o in t))throw Error(`hook '${o}' does not exist`);if(["options","block"].includes(o))continue;let a=e.hooks[o],r=t[o];ey.passThroughHooks.has(o)?t[o]=e=>{if(this.defaults.async&&ey.passThroughHooksRespectAsync.has(o))return(async()=>{let o=await a.call(t,e);return r.call(t,o)})();let i=a.call(t,e);return r.call(t,i)}:t[o]=(...e)=>{if(this.defaults.async)return(async()=>{let o=await a.apply(t,e);return!1===o&&(o=await r.apply(t,e)),o})();let o=a.apply(t,e);return!1===o&&(o=r.apply(t,e)),o}}o.hooks=t}if(e.walkTokens){let t=this.defaults.walkTokens,a=e.walkTokens;o.walkTokens=function(e){let o=[];return o.push(a.call(this,e)),t&&(o=o.concat(t.call(this,e))),o}}this.defaults={...this.defaults,...o}}),this}setOptions(e){return this.defaults={...this.defaults,...e},this}lexer(e,t){return eS.lex(e,t??this.defaults)}parser(e,t){return eh.parse(e,t??this.defaults)}parseMarkdown(e){return(t,o)=>{let a={...o},r={...this.defaults,...a},i=this.onError(!!r.silent,!!r.async);if(!0===this.defaults.async&&!1===a.async)return i(Error("marked(): The async option was set to true by an extension. Remove async: false from the parse options object to return a Promise."));if(typeof t>"u"||null===t)return i(Error("marked(): input parameter is undefined or null"));if("string"!=typeof t)return i(Error("marked(): input parameter is of type "+Object.prototype.toString.call(t)+", string expected"));if(r.hooks&&(r.hooks.options=r,r.hooks.block=e),r.async)return(async()=>{let o=r.hooks?await r.hooks.preprocess(t):t,a=await (r.hooks?await r.hooks.provideLexer(e):e?eS.lex:eS.lexInline)(o,r),i=r.hooks?await r.hooks.processAllTokens(a):a;r.walkTokens&&await Promise.all(this.walkTokens(i,r.walkTokens));let s=await (r.hooks?await r.hooks.provideParser(e):e?eh.parse:eh.parseInline)(i,r);return r.hooks?await r.hooks.postprocess(s):s})().catch(i);try{r.hooks&&(t=r.hooks.preprocess(t));let o=(r.hooks?r.hooks.provideLexer(e):e?eS.lex:eS.lexInline)(t,r);r.hooks&&(o=r.hooks.processAllTokens(o)),r.walkTokens&&this.walkTokens(o,r.walkTokens);let a=(r.hooks?r.hooks.provideParser(e):e?eh.parse:eh.parseInline)(o,r);return r.hooks&&(a=r.hooks.postprocess(a)),a}catch(e){return i(e)}}}onError(e,t){return o=>{if(o.message+=`
64Please report this to https://github.com/markedjs/marked.`,e){let e="<p>An error occurred:</p><pre>"+en(o.message+"",!0)+"</pre>";return t?Promise.resolve(e):e}if(t)return Promise.reject(o);throw o}}};function eC(e,t){return ef.parse(e,t)}eC.options=eC.setOptions=function(e){return ef.setOptions(e),eC.defaults=ef.defaults,o=eC.defaults,eC},eC.getDefaults=t,eC.defaults=o,eC.use=function(...e){return ef.use(...e),eC.defaults=ef.defaults,o=eC.defaults,eC},eC.walkTokens=function(e,t){return ef.walkTokens(e,t)}

64,eC.parseInline=ef.parseInline,eC.Parser=eh,eC.parser=eh.parse,eC.Renderer=eu,eC.TextRenderer=eb,eC.Lexer=eS,eC.lexer=eS.lex,eC.Tokenizer=em,eC.Hooks=ey,eC.parse=eC,eC.options,eC.setOptions,eC.use,eC.walkTokens,eC.parseInline,eh.parse,eS.lex,e.s(["marked",0,eC])}]);