webデザインをする上で必要な知識・情報・技術等の記述や、参考になるサイトの紹介等を掲載しています。
Chrome 拡張機能「ZOOM hidden vjs-control-bar」を作りました
ZOOM でレコーディングをしたものを視聴する時に表示される動画のコントローラ。再生位置を変更したり停止したりと便利ですが、動画を停止するとコントローラーが必ず表示されるため、重なっている内容が見にくいという相談をいただ […]
ZOOM でレコーディングをしたものを視聴する時に表示される動画のコントローラ。再生位置を変更したり停止したりと便利ですが、動画を停止するとコントローラーが必ず表示されるため、重なっている内容が見にくいという相談をいただきました。 <img fetchpriority="high" decoding="async" width="900" height="507" src="https://wp.yat-net.com/wp/wp-content/uploads/2024/02/chextention_01.jpg" alt="ZOOM のコントロールバーがソースコードと被ってしまい見づらくなっている様子" class="wp-image-8141" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2024/02/chextention_01.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2024/02/chextention_01-355x200.jpg 355w, https://wp.yat-net.com/wp/wp-content/uploads/2024/02/chextention_01-710x400.jpg 710w, https://wp.yat-net.com/wp/wp-content/uploads/2024/02/chextention_01-768x433.jpg 768w" sizes="(max-width: 900px) 100vw, 900px" /> 動画をフルウィンドウにすればコントローラは動画域から外れるので見えるようになりますが、アプリにメモを取るなどが面倒だなと思い、Chrome の拡張機能を作ってみました。 ZOOM hidden vjs-control-bar： Chrome ウェブストア ソースコードは GitHub にあげています 開発手順について まずは実装できるかの検証を行いました 動画のコントロールバーを特定できる ID・クラスが存在しているか確認 上記が確認できたら、JavaScript のセレクタを用いて要素の表示・非表示のコードを書いてみる Chrome 拡張機能の仕様に則って開発 テスト 実際に使ってもらってフィードバックをもらう 公開手続き 動画のコントロールバーを特定できる ID・クラスが存在しているか確認 Chrome 検証ツールのインスペクタを使って確認すれば良いのでこれは簡単にできます <img decoding="async" width="900" height="385" src="https://wp.yat-net.com/wp/wp-content/uploads/2024/02/434a7563f9275320819497b00925e50f-900x385.png" alt="検証ツールを使ってクラスを特定している様子" class="wp-image-8142" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2024/02/434a7563f9275320819497b00925e50f-900x385.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2024/02/434a7563f9275320819497b00925e50f-400x171.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2024/02/434a7563f9275320819497b00925e50f-768x328.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2024/02/434a7563f9275320819497b00925e50f.png 1280w" sizes="(max-width: 900px) 100vw, 900px" /> JavaScript のセレクタを用いて要素の表示・非表示のコードを書いてみる ここではいきなりエディタを使うのではなく、Chrome 検証ツールの Console にコードを書いて実行してみます。 <img decoding="async" width="900" height="221" src="https://wp.yat-net.com/wp/wp-content/uploads/2024/02/91fe48e9b6f8977e44dc83a3ad23e07b-900x221.png" alt="コンソールログのサンプル画像" class="wp-image-8143" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2024/02/91fe48e9b6f8977e44dc83a3ad23e07b-900x221.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2024/02/91fe48e9b6f8977e44dc83a3ad23e07b-400x98.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2024/02/91fe48e9b6f8977e44dc83a3ad23e07b-768x189.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2024/02/91fe48e9b6f8977e44dc83a3ad23e07b.png 1114w" sizes="(max-width: 900px) 100vw, 900px" /> JavaScript のコードは Console に記述して実行できるので便利ですね。 Chrome 拡張機能の仕様に則って開発 あとは実際にエディタを使って開発していきます。必要なものは下記 manifest.json content_script.js icon screenshot 今回の開発ではデータを取得・保存・メッセージの受け取りなど不要なのでシンプルな構造で作れました。ファイルについて解説していきますね。 manifest.json このプロジェクトに関する設定を json ファイルとして記述します { "manifest_version": 3, "name": "ZOOM hidden vjs-control-bar", "version": "1.1.1", "description": "Button of hidden for vjs-control-bar on ZOOM", "icons": { "16": "images/icon16.jpg", "32": "images/icon32.jpg", "48": "images/icon48.jpg", "128": "images/icon128.jpg" }, "host_permissions": [ "https://*.zoom.us/rec/play/*" ], "author": "yat@yat-net.com", "content_scripts": [ { "matches": [ "https://*.zoom.us/rec/play/*" ], "js": [ "content_script.js" ], "css": [ "style.css" ], "run_at": "document_end", "all_frames": true } ], "action": {} } 現在 manifest_version は3で開発となっているので、合わせてあります。 name: 拡張機能名 version: 拡張機能のバージョン。最初は1.0.0から始めました description: 拡張機能の説明 icons: サイズごとに利用される場所が異なるようで、ひとまず4種類用意。 host_permissions: この拡張機能がアクセスを許可する URL です。この URL の条件を満たすページで利用可能になると考えてください。( * マークの部分は何らかの文字列が入る場合と考えましょう） author: 開発者のメールアドレス content_scripts: ユーザーが host_permissions に該当するページにアクセスした際に実行する JavaScript ファイルです。ページの DOM にアクセス可能なので今回のようにセレクタで該当した箇所のスタイルを変更するなどが可能です。 matches: content_scripts を実行するページ URL です。host_permission で許可しているサイト内のどのページで利用するかと考えると良いですね。今回は両者同じ値を入れています。 js: 実行するJavaScript のファイル名。 css: 実行する CSS ファイル名 run_at: JavaScript や CSS を読み込むタイミングを指定 all_frames: ページ内にframe がある場合、frame 内も実行範囲にするか。今回必要なかった… action: Chrome ツールバーの拡張機能のアイコンをクリックした場合にポップアップを表示できるのですが、そのポップアップに表示する内容などをここに記述します。今回ポップアップ機能を設けていないため不要ですが、manifest_version の3では項目を入れておかないとエラーになるとのことだったのでひとまず指定しました。 今回利用していない仕組みもあるので、開発してみたい！という方は下記サイトが参考になるかと。 Chrome拡張機能の概要から公開まで(ManifestV3対応) ~概要編~ Backlogで「リンク付きの課題キーと件名」を取得するボタンを追加するChrome拡張機能を作ってみた Google Chrome拡張機能開発入門: Manifest V3対応の実践ガイド テスト・フィードバックをもらう 自分で実際に使ってみてテストし、周りの人にも実際使ってもらってフィードバックをもらって自分で気づけ無い挙動の対応。そしていよいよ公開手続きです 公開手続き 開発した拡張機能を zip 圧縮 Chrome ウェブストアのデベロッパーダッシュボードからアカウントを作成 必要情報の記載 審査 承認されない場合 アップデート こちらはこの記事がわかりやすかったのでオススメです Chrome拡張機能の概要から公開まで(ManifestV3対応) ~公開編~ 上記ページに記載ないもので対応したことをちょっと書いておきます Mac に備わっているデフォルトの圧縮機能を使うとアップロード時にエラーが発生 何度アップロードしてもエラーがでたので、zip 圧縮時に問題があると思い、ターミナルのコマンドで圧縮しました zip -r ファイル名.zip 圧縮するフォルダ -r はフォルダを圧縮するオプションです アップデートをどうすればいいのか迷った 審査が通ると下記のようにアイテムに並びます。並んだものを上書きするのかと思ったのですがどうも違うようで、単純に manifest.json ファイルのバージョンを上げて圧縮後改めてページある「新しいアイテム」としてアップロードするようです。当然審査が入ります。 <img loading="lazy" decoding="async" width="900" height="321" src="https://wp.yat-net.com/wp/wp-content/uploads/2024/02/898c21d6fd078441f0f603f157cb7025-900x321.png" alt="Chrome ウェブストアのサンプル画像" class="wp-image-8144" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2024/02/898c21d6fd078441f0f603f157cb7025-900x321.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2024/02/898c21d6fd078441f0f603f157cb7025-400x143.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2024/02/898c21d6fd078441f0f603f157cb7025-768x274.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2024/02/898c21d6fd078441f0f603f157cb7025.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" />
プロの Web デザイナーは3分という制限の中で、どれだけ訴求力の高いバナーをつくれるのか？【Adobe Express編】
今回の記事はアドビ社の PR 企画「みんなのデザインチャレンジ」に参加して書いています。 記事のテーマを考える中で、「色々な制限・制約の中で、プロのデザイナーは一体どれだけのものが作れるのか？」 という話になり、ちょっと […]
今回の記事はアドビ社の PR 企画「みんなのデザインチャレンジ」に参加して書いています。 記事のテーマを考える中で、「色々な制限・制約の中で、プロのデザイナーは一体どれだけのものが作れるのか？」 という話になり、ちょっと面白そうだったのと、自分でも試してみたくなったので、今回のテーマで書いてみることにしました。 実際、デザインの仕事は色々な制限・制約の上でものづくりが求められるので、僕自身難しいなと感じることが多いです。 例えばプロダクトを扱う企業やマーケティング会社のインハウスデザイナーは、限られた時間の中で広告用のバナー・アイキャッチを用途・サイズ別に大量に作らないといけません。そのため、繁忙期になると特にクオリティと時間に追われるという側面があります。 実際、僕自身も独立する前までは、インハウスで Web サイトのデザインやマーケティングに必要なデザインをしていました。 普段の仕事は納期仕事ではないので、余裕をもったスケジュールでしたが、突然参加が決まったセール用のバナー作成指示などは、「1時間後には出稿したい」という切羽詰まった要望が割りと普通にありました。 1時間ならまだいい方で、「やっぱりセールに参加することにしたから、15分ぐらいでぱぱっと作ってもらえる？」みたいな会話って社内だと発生しやすいんです。 当時は無茶言うなあと思いながらも、「まあ普段から触っているサイトだし素材もあるからなんとかなるか」と思い直してすぐに作って提出していました。 ただこの場合、条件が揃っているから叶っていただけで、たとえば「コーヒーショップの呼び込みバナーを作ってもらえません？3分で！」と言われたら流石に無理があります。 だって素材を切り抜かないといけないし、そもそも素材を探さないといけない。それだけでも3分なんてあっという間に超えてしまう… でももし切り抜きにも素材探しにも時間がかからなかったらどうでしょうね？ 今回は、そんな無茶を叶えてくれるツールのお話です。 Adobe Express 豊富なテンプレートや生成 AI を使ってクリエイティブを作成できるのが Adobe Express の良いところ。 ワンクリックで画像の背景を切り抜いたり、テンプレートのテキストを編集できたりとデザインワークがかなり簡単にできるため、ノンデザイナーの方にもおすすめのツールになります。 では本当に、Adobe Expressを使えば、3分でバナーが作れるのか？ 早速、「コーヒーショップの呼び込みバナー」を例に、実際の画面で使い方を見ていきましょう。 Adobe Express は基本的に無料で使えますが、一部の機能やテンプレート・素材はプレミアムプラン（有償）となります。 Creative Cloudのコンプリートプランを契約している方なら、プレミアムプランも使い放題。僕もコンプリートプランなので、今回はプレミアムプランで試していきます。もちろん無料版も機能が充実していて使い勝手がよいですよ！ 3分でトライ（ファーストステージ） まずは自分が作りたいクリエイティブを上部のメニューから選択します。該当する様々な候補がサブメニューとして出現するので、作りたいタイプを選択。 <img loading="lazy" decoding="async" width="900" height="251" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_013-900x251.png" alt="Adobe Express で作りたい項目を選択するキャプチャー写真" class="wp-image-8081" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_013-900x251.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_013-400x112.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_013-768x214.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_013.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> テンプレート選択画面に変わるので、理想に近いものを選択すればあとはテンプレートを編集して必要な情報に書き換えましょう <img loading="lazy" decoding="async" width="900" height="482" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_014-900x482.png" alt="テンプレートから選択した LISA のコーヒータイムデザインデータ" class="wp-image-8082" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_014-900x482.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_014-373x200.png 373w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_014-746x400.png 746w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_014-768x412.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_014.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> <img loading="lazy" decoding="async" width="900" height="660" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_029-900x660.png" alt="LISA の部分を YAT に編集している画面キャプチャー" class="wp-image-8085" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_029-900x660.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_029-273x200.png 273w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_029-546x400.png 546w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_029-768x563.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_029.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> 文字周りの装飾も短時間でこんな事ができます <img loading="lazy" decoding="async" width="900" height="555" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_05-900x555.jpg" alt="文字フレームを編集している画面キャプチャー" class="wp-image-8086" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_05-900x555.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_05-324x200.jpg 324w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_05-648x400.jpg 648w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_05-768x474.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_05.jpg 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> ということで、テンプレートから選んで編集すれば3分で作れました。 ですが、細かい部分を考えるとまだまだ手を加える必要はあります。 たとえば 飲み物系は暖色系にしたい 文字とリボンの上下感覚が少し詰まっているので調整したい 「YAT」と「の」間があきすぎているので詰めたい コーヒータイムの文字間隔を狭めたい 文字の調整などは設定を変えれば変更できます。ですが写真の色を変えたい場合はこのサンプルだとコップと背景が一枚の写真になっているため変更ができず、写真そのものを変えないといけません。 そうなると、そもそもレイアウトなんかは考え直さないといけないので作り直しになります。 3分でトライ（セカンドステージ） せっかくなのでもう少し機能を使って、実際に3分でどこまでできるのかやってみました。 テンプレートの検索を使って「コーヒー」で出てきた中から一つを選択。 <img loading="lazy" decoding="async" width="900" height="487" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_01-1-900x487.png" alt="コーヒーチケットのテンプレート選択画面キャプチャー" class="wp-image-8087" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_01-1-900x487.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_01-1-370x200.png 370w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_01-1-740x400.png 740w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_01-1-768x415.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_01-1.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> すでにいい感じですが下記が気になります。 吹き出しがちょっと荒い 名前を変えなきゃ 「コーヒー1杯」の文字バランス 「150円」の文字バランス テイクアウトのことも入れたい 早速吹き出しを素材から探してみました <img loading="lazy" decoding="async" width="900" height="490" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_017-900x490.png" alt="吹き出し変更中のキャプチャー" class="wp-image-8088" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_017-900x490.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_017-367x200.png 367w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_017-735x400.png 735w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_017-768x418.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_017.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> あとは吹き出しの内容や名前の変更と、文字の調整をして完成したのがこちらです <img loading="lazy" decoding="async" width="900" height="484" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_021-900x484.png" alt="吹き出し内容と NAMAE を YAT'ｓに変更後の画面キャプチャー" class="wp-image-8089" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_021-900x484.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_021-372x200.png 372w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_021-744x400.png 744w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_021-768x413.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_021.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> ここにテイクアウトのテキストと、素材を同じように検索して追加・編集して仕上げ <img loading="lazy" decoding="async" width="900" height="489" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_026-900x489.png" alt="文言「テイクアウトもOK」とコーヒーの写真を添えて仕上げた画面キャプチャー" class="wp-image-8090" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_026-900x489.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_026-368x200.png 368w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_026-737x400.png 737w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_026-768x417.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_026.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> 今のところ Adobe Express 上では字詰めができないので、気になる点はあるものの、一応3分程で目標の条件で作る事ができました。 <img loading="lazy" decoding="async" width="900" height="506" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_07-900x506.png" alt="完成したデザイン" class="wp-image-8102" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_07-900x506.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_07-356x200.png 356w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_07-712x400.png 712w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_07-768x431.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_07.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> デザイン素材で検索すると切り抜き済みの素材がたくさん出てきたので「これは便利だ！」と思いました。仮に背景付きの素材でも、「背景を削除」を使うことで、複雑な背景でなければ簡単に切り抜けます。 デザインで意識すること テンプレートを使うメリットは、とにかく簡単にデザインができること。レイアウトがすでに出来上がっているので、そこに必要な情報を入れてしまえば完成です。ただし、それだけだとディティールが甘いままになるので、気をつける点がいくつかあります。 一つは文字のバランス。 金額表記で大事なのは数字の部分なので、単位はそこまで目立たなくても伝わります。単位を小さくすることで、より数字を目立たせられます。 また、今回テイクアウトも OK とコーヒー1杯「150円」の3行を一つの塊として作ったので、それぞれの文字の開始位置・終了位置を整えました。 テイクアウトの文言は他の2行ほど目立たなくても良いので小さめにし、左側はコーヒーカップのカーブに沿うように余白を少し開け、右端はツラが合うよう揃えています。 カーブに揃えることと、キャンバスの四角に揃えることを意識するだけでもきれいに整えて見せられます。 <img loading="lazy" decoding="async" width="519" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_020-519x400.jpg" alt="注意する箇所にガイダンスを入れたもの。テキストの開始位置をカーブに合わせる。右側はきっちり右に揃える。" class="wp-image-8093 size-full" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_020-519x400.jpg 519w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_020-259x200.jpg 259w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_020-768x592.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_020.jpg 822w" sizes="auto, (max-width: 519px) 100vw, 519px" /> ちなみに「テイクアウトもOK」は他の2行を目立たせるために小さくしています。そのまま右に揃えると左側が空きすぎるため、テイクアウト用のコーヒーカップを配置しました。これで1行目のバランスが整ううえ、イメージでも伝えられるので非常にいいバランスになりました。 また、四隅の上下左右の感覚が均一になるよう位置を調整しています。揃えるべきところはしっかり揃えないと違和感が発生するので気をつけましょう。 <img loading="lazy" decoding="async" width="900" height="290" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_010-900x290.png" alt="余白を均一にするためのガイドラインイメージ" class="wp-image-8094" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_010-900x290.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_010-400x129.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_010-768x247.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_010.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> デザインするにはセンスがなくて…という意見をよく聞くのですが、こういったセオリーを知ることがセンスに繋がっていきます。まずはどういうところに目を向けるべきかを考えていくと、デザインはそこまで難しいものではないと理解してもらえると思います。 Adobe Express は、他のグラフィックツールと比べてできることに制限があるものの、ここまでのものを3分という短時間で作ることができます。例えば自分のブログや YouTube のサムネイルが必要だけどデザインに自信が無いという方には、是非使ってほしいと思うツールです。 デザイナーにとっても嬉しい機能として下記があります Adobe Fonts が利用できるのでフォントが豊富 デザイン素材は Adobe Stock が利用できる フォントや素材は豊富に揃っていると便利ですが、ノンデザイナーさんからすると多すぎて逆に迷ってしまい、どれを使えばいいのかわからないってなりますよね。 そこでフォントと素材の選び方を少しお話しておきます。 フォントの選定 フォントが沢山あってもタイプに分けるとそこまで多くないので、まずは下記を覚えましょう 日本語と英語 まずフォントには英語用のフォントと日本語用のフォントがあります。どちらも兼ねているフォントもありますが、海外で作られたフォントは英数字のみで日本語に対応しているものが少ないため、こういったものは英語用のフォントになります。 一方、日本の文字は英数字以外にひらがな・カタカナ・漢字など文字の種類が多いため、フォントによってひらがなのみ・カタカナのみというものや、全てを揃えたものなど、文字タイプが違います。 ですので、デザインでフォントを選ぶ時はまず英数字のみなのか、日本語まで網羅するのか考えましょう。 そして日本語と英語のフォントはそれぞれ大きく分けて2つのタイプがあることを覚えておいてください。 日本語 ゴシック体 ･･･ 縦線・横線の太さがほぼ同じ, ウロコがない 明朝体･･･ 縦線・横線の太さが異なり, ウロコがある 英語 サンセリフ･･･ 縦線・横線の太さがほぼ同じ, セリフがない セリフ･･･ 縦線・横線の太さが異なり, セリフがある <img loading="lazy" decoding="async" width="900" height="356" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_09-900x356.png" alt="ゴシック・明朝・sans serif・serifそれぞれの特徴図 ゴシック：縦線・横線の太さがほぼ同じ、ウロコがない 明朝：縦線・横線の太さが異なり、ウロコがある sans serif: 縦線・横線の太さがほぼ同じ、セリフがある serif: 縦線・横線の太さが異なり、セリフがある" class="wp-image-8095" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_09-900x356.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_09-400x158.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_09-768x304.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_09.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> 日本語のフォントと英文フォントをデザインのなかで混在させる場合、統一感を出すならゴシック体とサンセリフもしくは明朝体とセリフというようにタイプをあわせます。 ただこれは基本的な話で、より表現を上げるためにフォントには様々なタイプが存在します <img loading="lazy" decoding="async" width="600" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_06-600x400.png" alt="書体のサンプル。丸ゴシック体・オール体・手書き体・スクリプト体・デザイン書体" class="wp-image-8096" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_06-600x400.png 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_06-300x200.png 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_06-768x512.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_06.png 900w" sizes="auto, (max-width: 600px) 100vw, 600px" /> 見出しや吹き出し・装飾文字など、部分的にあえて書体を変えることで効果的に見せることができます。今回作ったデザインは、全体としてはサンセリフとゴシック体を利用し、吹き出し部分は丸ゴシックを利用しています。そうすることで、吹き出し自体を目立たせることと、やさしさを強調して表現しています。 <img loading="lazy" decoding="async" width="900" height="520" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_016-900x520.jpg" alt="吹き出しに配置した丸ゴシックを強調する画像キャプチャー" class="wp-image-8097" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_016-900x520.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_016-346x200.jpg 346w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_016-692x400.jpg 692w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_016-768x444.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_016.jpg 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> 次に文字には太さがあります。細いものしかないものもあれば、細い・太いの2タイプ揃えているものもありますし、太さを7段階調整できるものもあります。 デザイン上、小さい文字はより細く見えますし、大きい文字はより太く見えます。サイズの違う文字をデザイン上に配置する場合、この特性を考慮して文字の大きさによって太さを変えることが大切です。 <img loading="lazy" decoding="async" width="415" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_019-415x400.png" alt="M+1cフォントファミリーのプルダウン選択中画面キャプチャー" class="wp-image-8098 size-full" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_019-415x400.png 415w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_019-207x200.png 207w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_019.png 682w" sizes="auto, (max-width: 415px) 100vw, 415px" /> 全体の太さが同じぐらいに見えるよう調整すると、全体が整って見えます。そう考えると、文字の太さにバリエーションがあるフォントの方が使いやすいとも言えそうですね。 気をつけてほしいのは、一つのデザイン上であまり多くのフォントを使わないことです。フォントの種類があまり増えすぎると統一感を出すのが難しくなるので、最初はなるべく少ないフォントの種類で作るのがオススメ。 最初は3種類ぐらいまでにとどめておいて、デザインに慣れてきたら増やしていきましょう。あえて沢山のフォントを使ったデザインも面白いものが作れるので、今後の目標にしても楽しいですよ。 こちらはテンプレートで出てきたデザインそのままですが、バランスがとても良いので是非参考にしましょう。 <img loading="lazy" decoding="async" width="900" height="1125" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_03-900x1125.jpg" alt="デザインの参考になる「COFFEE Hour SUNRISE COFFEE SHOP」のテンプレートデータ" class="wp-image-8100" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_03-900x1125.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_03-160x200.jpg 160w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_03-320x400.jpg 320w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_03-768x960.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_03.jpg 928w" sizes="auto, (max-width: 900px) 100vw, 900px" /> 素材の選定 デザインのテイストを決定する素材は、選定する際に悩んだり、挿入する数によってバランスを取るのが難しくなったりと、考える事が多いです。 迷子にならないようまずはポイントを押さえておきましょう 主題となる物 世界観を作る背景 文字を目立たせる装飾 余白を埋めるオブジェクト 「主題となるもの」とは、今回のバナーでは中央のコーヒーカップです。パッと見てコーヒーに関するバナーであることが伝わりますよね。これこそが、このバナーの主題です。 次に背景ですが、今回のバナーでは素材自体に背景がすでに配置されています。左のイエローと右のグレーを中央で分けたもので、仕事と休憩という2つの時間をこの背景で表現しています。 文字を目立たせる装飾は左上の吹き出しです。開始時間を単なるテキストで伝えることもできますが、他にも伝える情報があるのでそのままではちょっと伝わりにくいです。 <img loading="lazy" decoding="async" width="900" height="504" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_011-900x504.jpg" alt="吹き出しを使わずにテキストのみで情報を伝えるバージョン" class="wp-image-8101" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_011-900x504.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_011-357x200.jpg 357w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_011-714x400.jpg 714w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_011-768x430.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_011.jpg 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> あえて吹き出しを使うことで他の情報より目立たせられることと、差が生まれることで他の部分も目立って効果的ですよね。 <img loading="lazy" decoding="async" width="900" height="506" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_07-900x506.png" alt="完成したデザイン" class="wp-image-8102" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_07-900x506.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_07-356x200.png 356w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_07-712x400.png 712w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_07-768x431.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_07.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> 最後は余白を埋める「あしらい」についてです。右側の3本の線とテイクアウトOKの横に置いたコーヒーの素材がこの役割を持っていますが、無いとこんな感じになります。 <img loading="lazy" decoding="async" width="900" height="506" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_012-900x506.jpg" alt="完成前のあしらいがないバージョン" class="wp-image-8103" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_012-900x506.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_012-356x200.jpg 356w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_012-711x400.jpg 711w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_012-768x432.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_012.jpg 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> 左側は上部に吹き出しと下側にコーヒーショップ名があるので、比較すると右上の余白がどうしても気になります。中央に大きなコーヒーカップがあるので視線を集められそうですが、実は左上・左下・右下に要素があるので右上の何もない空間のほうがより目立ってしまい目線が余白に向いてしまいます。 しかし、情報をここに入れると全体的に仰々しくなってしまうので、今回のような「線の素材」などが活躍してくれます。 余白は、配置しているもの同士がそれぞれ別のグループであることを明確にしてくれるので、吹き出しとコーヒーショップの間には装飾を配置していません。余白を埋める時は埋めるべきか空けておくべきかをよく考えましょう。 また、テイクアウトOKの左も少し開いていますが、これは上記で述べたようにコーヒーカップに沿わせて配置するために装飾は右側に配置しました。 生成AI Adobe Firefly で素材を作って3分でトライ 今回のバナーは、テンプレートを選択した時点で良いものがすぐ見つかったのでサクッと作ることができました。ですが、当然見つからない場合もあります。 特にテンプレートを探していると、テイストはイメージに近いけど内容がぜんぜん関係ないものがよく見つかります。こういう場合は内容をカスタマイズすれば完成するので素材を生成 AI で作ってみます。 果たして3分でどこまで出来るのか・・・？ <img loading="lazy" decoding="async" width="900" height="471" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_027-900x471.png" alt="テンプレートで見つかった SPICE CURRY のデザイン" class="wp-image-8104" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_027-900x471.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_027-382x200.png 382w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_027-764x400.png 764w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_027-768x402.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_027.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> テキストは全て編集できるので、中央のイラストをコーヒーに変えてみます。 <img loading="lazy" decoding="async" width="392" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_022-392x400.png" alt="メディア＞テキストから画像生成＞サイズ選択の画面キャプチャー" class="wp-image-8105 size-full" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_022-392x400.png 392w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_022-196x200.png 196w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_022-768x785.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_022.png 832w" sizes="auto, (max-width: 392px) 100vw, 392px" /> テキストは全て編集できるので、中央のイラストをコーヒーに変えてみます。 ツール左側の「メディア」というメニューに「テキストから画像生成」があるのでこちらを選択してサイズを決定。 <img loading="lazy" decoding="async" width="278" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_023-278x400.png" alt="生成させるイメージを「コーヒーカップ」と指定している画面キャプチャー" class="wp-image-8107 size-full" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_023-278x400.png 278w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_023-139x200.png 139w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_023-768x1104.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_023.png 850w" sizes="auto, (max-width: 278px) 100vw, 278px" /> 生成したい内容を書き込み、コンテンツタイプを選んで決定すると生成してくれます。 <img loading="lazy" decoding="async" width="607" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_025-607x400.jpg" alt="「プロンプトが短すぎます」と表示されている画面キャプチャー" class="wp-image-8108 size-full" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_025-607x400.jpg 607w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_025-303x200.jpg 303w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_025-768x506.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_025-900x593.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_025.jpg 1280w" sizes="auto, (max-width: 607px) 100vw, 607px" /> しかし説明文が短いと、「プロンプトが短すぎます」と言われるので、ここはよく文章を考えて入力しなければなりません。 「切り抜きやすいコーヒーラテのイラスト」と指定してみます。 コンテンツタイプも指定なしで作り直してみましょう。 <img loading="lazy" decoding="async" width="900" height="538" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_018-900x538.jpg" alt="コンテンツタイプを「なし」に選択した画面キャプチャー" class="wp-image-8110" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_018-900x538.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_018-335x200.jpg 335w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_018-669x400.jpg 669w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_018-768x459.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_018.jpg 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> 生成されました！これを使いたいので切り抜きます。 生成されたイラストを選択し直すと、画像編集メニューがでてくるので、「背景を削除」を選択します。 <img loading="lazy" decoding="async" width="900" height="542" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_015-900x542.jpg" alt="背景を削除の実行ボタンを示す画面キャプチャー" class="wp-image-8111" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_015-900x542.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_015-332x200.jpg 332w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_015-664x400.jpg 664w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_015-768x463.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_015.jpg 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> 実行するとキレイに背景が削除されました <img loading="lazy" decoding="async" width="900" height="528" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_024-1-900x528.jpg" alt="実際に背景削除された画像の画面キャプチャー" class="wp-image-8116" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_024-1-900x528.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_024-1-341x200.jpg 341w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_024-1-682x400.jpg 682w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_024-1-768x451.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_024-1.jpg 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> あとはテキストをコーヒーショップ向けに変更して完成です <img loading="lazy" decoding="async" width="900" height="470" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_04-900x470.png" alt="完成したデザイン" class="wp-image-8117" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_04-900x470.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_04-383x200.png 383w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_04-766x400.png 766w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_04-768x401.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_04.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> 生成の調整などが必要なので3分ではできませんでしたが15分ぐらいで完成しました。 まとめ いかがでしたか？ テンプレートをうまく活用すればかなり時短で作れることと、デザインに詳しくなくても一定のルールに従って編集することで、ノンデザイナーの方でもしっかりしたものが作れることが伝われば嬉しいです。 また、デザイン以外の生成も可能で、例えば QR コードも作れます。 <img loading="lazy" decoding="async" width="900" height="466" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_02-900x466.png" alt="QR コード生成画面キャプチャー" class="wp-image-8118" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_02-900x466.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_02-386x200.png 386w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_02-772x400.png 772w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_02-768x398.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_02.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> <img loading="lazy" decoding="async" width="231" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_028-231x400.png" alt="" class="wp-image-8119 size-full" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_028-231x400.png 231w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_028-115x200.png 115w, https://wp.yat-net.com/wp/wp-content/uploads/2023/12/aex_028.png 658w" sizes="auto, (max-width: 231px) 100vw, 231px" /> ホーム画面の右側メニューにあるプラスマークをクリックすると、他にも色々作れるものが並んでいるので、そちらも是非チェックしてみてくださいね。 最後に、実はこの記事のアイキャッチ画像も Adobe Express で作ってみました。 僕なりにアドビさんのイメージを具現化してみたつもりなんですが、どうでしょうか？ 作りたいイメージに合う素材を探して配置を繰り返し、テキストを入れて完成までで、大体10分ぐらいで完成しました。 自分で表現できるというのがデザインの面白さ・楽しさだと思っています。 そういう意味では、Adobe Expressはデザインすることの喜びを、誰でも手軽に体験できるツールだとも思います。 ぜひ、Adobe Expressを通じて色んな人にデザインすることの喜びを知ってもらえたら嬉しいです。
Web サイト制作の学習で JavaScript になると途端に感じるハードルを下げるためのコツ
ハロウィンというイベントにブログを書いています、こんにちは。 ここ数年 Web サイト制作の学習を始めた方が一気に増えた感じがありますね。HTML や CSS などエディタに簡単なコードを書くだけでブラウザに文字や画像が […]
ハロウィンというイベントにブログを書いています、こんにちは。 ここ数年 Web サイト制作の学習を始めた方が一気に増えた感じがありますね。HTML や CSS などエディタに簡単なコードを書くだけでブラウザに文字や画像が表示された感動は今でも忘れられません。 そこから気づけば20年ぐらい Web 制作の業界で仕事をしているのですが、僕もひとに教えることが増え多くの人が JavaScript が難しいという意見をよく聞くようになりました。 実際 HTML や CSS とは違い、プログラミング特有の言葉が一気に押し寄せるものは途端にやる気を阻害し、自分には向いていないと感じるひとも多いと思います。 僕自身は専門学校でプログラミングの学習をしてから HTML や CSS の学習を始めたので、変数や関数などはすでに知っていたこともあり、言葉が分からないとはならなかったんですが、それでも特有のカタカナ言葉に翻弄されていました。 おそらく多くの人がこのカタカナ言葉の意味が分からなかったり、ニュアンスがつかめないというトラップに引っかかって蟻地獄から抜け出せないような何とも言えない状況に陥ったことがあると思います。 書籍での学習が難しい 基礎を学ぶなら書籍でしっかり学習しよう！ そう意気込んで挑んだものの、最初からとにかくこのカタカナ言葉の応酬から始まると中々前に進めずストレスを感じだし、中には知らない言葉が多すぎて眠くなってしまうってひとも多いと思います。 「みんなはこれで理解して言っているんだから自分はきっと向いていなんだ…」って思い込んでしまうのも割りとここに多いと思うんですよね。 果たしてそうなんでしょうか？ 本当はそんなこと無いんですが、ニュアンスを掴む術がわからないとどう進めればいいか分からなくなりますし、独学だと簡単に辞めてしまいます。 さて、これほんとにどうやって理解すればいいんでしょうね？ それを今回お話ししたいと思います カタカナ言葉との向き合い方 全くきたことがない言葉を文章で説明されてもイマイチどういうことが分からなかったり、こうかな？と思ってもそれであっているのか自身が持てなかったりしませんか？ これは当たり前のことで、わからないってことは自分の中に答えがない。 答えがないから正解か判断ができない。 こんな状況なんです。 例えば JavaScript でよく出てくるイベントという言葉。 これを聞いても「イベントという言葉は知っているが、プログラミングのイベントというのは別のことだろう」と考えてしまいがちです。 でもそんなことはなく、平たく言えば「何かが起こったこと」で、冒頭で僕が述べた「ハロウィンというイベント」というのとニュアンスは同じです。 キーボードを押したイベント マウスをクリックしたイベント ブラウザの幅を縮めたイベント すべて「何かが起こった」わけなんですよね JavaScript だとよく出てくるのは上記が主で、プログラムで書くと addEventListener() ってのがよく出ます。 MDN Web documents の解説を見てみると addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。 https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener と書いてありますが、カタカナ言葉がこの文章だけでも4つも出てきて苦手意識がある人はこの時点で「分からないから他のサイトを見よう」となりますね。 でも本当はこの一文に重要なことが書いてあるので、ここが読めれば検索しすぎて疲弊することが減りますし、何より学習事態がやりやすくなります。 なので、この一文の読み方のコツをちょっと解説していきます addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。 英語やカタカナ言葉の部分を読み解く addEventListener まずは冒頭にある addEventListener にしっかり目を向けましょう。 「う、長いからしんどそう…」 大丈夫です、これも読み方にコツがあります。 最初の一文字は小文字で下記始まっていますが、Event と Listener は大文字になっていますよね？ この書き方はキャメルケースという言い方をする書き方で、ラクダのコブのように大きくなっているところ小さくなっているところが続いていることからこの名前がついています。 由来を知っていたほうが覚えやすいのでこれはメモしておきましょう。 さて、この大文字になっているところはそれぞれ独立した英単語であることがわかります。分解してみると add Event Listener この3つです。意味はそれぞれ下記の通りです 加える イベント リスナー 加えるはつまり足すとか追加するって事ですね。イベントはさっき説明した「何かが起こったこと」という意味。ではリスナーはなんでしょう？ これは英単語なのでそのまま英語翻訳を使います 「listener」は英語の単語で、日本語に訳すと「聞き手」または「聴衆」を意味する。音楽、ラジオ、講演など、何かを聞く人全般を指す言葉である。また、対話や会話において、話す側ではなく聞く側の人を指すこともある。 https://www.weblio.jp/content/%E3%83%AA%E3%82%B9%E3%83%8A%E3%83%BC なんとなくニュアンスは伝わりますか？大事なのは聞き手とか聞く人っていうことです。 じゃあこの英文3つを翻訳してみましょう。Deepl で翻訳を書けると下記のように出てきます add event listener イベントリストの追加 イベントリストに追加 https://www.deepl.com/translator#en/ja/add%20event%20listener イベントリストだから、ハロウィンみたいに年間通して色々なイベントが並んでいるかのごとく、ブラウザ上で「クリックした」とか「ブラウザが広がった」とかのイベントをリストに追加したってことです。 プログラム上のイベントがリストに追加されてどうなるんだ？と思うかもしれませんが、まだ文章の初めを読んでいるだけなので、addEventListener() については イベントをリストに追加するもの と捉えて置きましょう。 EventTarget インターフェース で、次に進むと文章は addEventListener() は EventTarget インターフェイスのメソッド となっていますね。 EventTarget も2つの単語がくっついていることがわかると思うので、これもさっきと同じようにバラバラにして翻訳します Event Target イベント（これはさっき出てきましたね） ターゲット（翻訳をかけると「target」とは、的・標的・目的のことを意味する英語表現である。と出てきます https://www.weblio.jp/content/%E3%82%BF%E3%83%BC%E3%82%B2%E3%83%83%E3%83%88） 意味を合わせると、「イベントの目的」と翻訳できます。しかしこのキーワードにはインターフェースというのがついているので、これも翻訳しましょう インターフェース（英：interface）とは、もともと「接点」や「境界面」を意味する語であり、特にコンピュータシステムにおいて異なる機器やシステムを接続する部分を指す用語として用いられる表現。人間と機械の接点となる入出力システムを指す場合もある（ユーザーインターフェースおよびマンマシンインタフェース）。 https://www.weblio.jp/content/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9 ニュアンスとしては接点や境界面を意味していて、異なるものを接続する部分というのが意味としては近いものになりますね。 異なるものを接続する部分 メソッド そしてこの言葉ですね。これもプログラミングをやっているとよく出てくる言葉です。これも同じく翻訳しましょう method：「方式」「手段」 https://www.weblio.jp/content/%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89 とてもシンプルですね。 ここでさっきの文章を調べた言葉で補足してみます addEventListener() は EventTarget インターフェイスのメソッド を掴んだニュアンスを使って文章を補足すると イベントをリストに追加する addEventListener() というのは、イベントの対象と接続する手段 となります。 ハロウィンというイベントをリストに追加したら、参加したい対象者と繋ぐ。こんな感じですね。 JavaScript の話なので、プログラミング的なことでいえばクリックというイベントをリストに追加して、その時に何かさせたい処理と接続するための手段ってことです。 ということは、この addEventListener を使って「画面上の画像を削除する処理」と接続すればクリックした時に画面上の画像を削除できるってことになってきます。 また、この文章の後ろに続いている ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。 もカタカナ言葉を翻訳して読み解くとこうなります ターゲット（的・標的・目的） 目的に特定のイベント（例えばクリック）が配信されるたびに呼び出される関数を設定します 関数 カタカナ言葉ではないですが聞き慣れない言葉が出てきましたね。 翻訳がかけられない言葉や、翻訳してもイマイチ分からない言葉が出てきたらこのサイトで調べてみましょう 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 ニュアンスを掴むための解説が沢山掲載されています。学習し始めの段階で読むにはとても参考になるので是非色々見てほしいのですが、今回は関数に焦点を当てると 処理をまとめたものだよ 何かを入れると何かをやって何かを返してくれるよ 何かを入れると何かをして何かを返してくれる、処理のまとまり https://wa3.i-3-i.info/word1905.html と出てきます。一言で説明は難しいですがなんとなく言ってることはわかりますかね。これはそのまま補足として入れてしまいましょう。ついでに冒頭の文章も入れてしまいます。 イベント（クリックとか）をリストに追加する addEventListener() というのは、イベントの対象と接続する手段です。 ターゲット（対象：例えばボタン）に特定のイベントが配信されるたびに呼び出される関数（何かを入れると何かをして何かを返してくれる処理のまとまり）を設定します。 ということになります。 どうでしょう、元の文章より長くなりましたが初見よりニュアンスは掴みやすいのではないでしょうか。 元の文章はこちらです addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。 後はこれを理解する日本語力と想像力が必要なので、文章を読むだけでまだ分かりづらいという方は、絵にしながらまとめていくとニュアンスは更につかみやすくなります。 <img loading="lazy" decoding="async" width="636" height="857" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/10/js_001.png" alt="理解するための図解" class="wp-image-8054" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/10/js_001.png 636w, https://wp.yat-net.com/wp/wp-content/uploads/2023/10/js_001-148x200.png 148w, https://wp.yat-net.com/wp/wp-content/uploads/2023/10/js_001-297x400.png 297w" sizes="auto, (max-width: 636px) 100vw, 636px" /> 意味を調べたときに大事なのは、このニュアンスを掴む事です。ニュアンスが掴めれば完全な意味を理解できなかったとしても、「なんとなくこういう事を言っている？」ところまでたどり着けるようになります。 何もわからない状態とは雲泥の差なので、このニュアンスを掴むことを繰り返して慣れていきましょう。 そして学習で大事なのはノートに自分なりにまとめることです。 アナログのノートでもデジタルのツールでも何でも構いません。自分なりにこういうことを言っている？と頭の中を整理しながら書き留めていくことで、情報を整理したインプットが行なえます。 単に見たままを写すのではないので気をつけてくださいね。 jQuery の on() jQuery で学習している人は addEventListener() ではなく on() が出てきますね。 「クリックした時に何かしたい」で検索している人は click() にたどり着くと思いますが、click() はクリックにしか使えませんが on() は様々なイベントに対応できて便利です。 なので、上記 addEventListener() の jQuery 版に近いものがあります（ただし完全互換ではないのでご注意） ところで on って英語でなんて習いましたか？ 「なにかの上にある = on」こんな感じですかね？ on の意味をこれで覚えていると間違ってはないですがちょっと語弊が出てきます。 ちょっとここで on の単語を Google で画像検索してみましょう <img loading="lazy" decoding="async" width="766" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/10/js_002-766x400.jpg" alt="on を画像検索した結果イメージ" class="wp-image-8056" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/10/js_002-766x400.jpg 766w, https://wp.yat-net.com/wp/wp-content/uploads/2023/10/js_002-383x200.jpg 383w, https://wp.yat-net.com/wp/wp-content/uploads/2023/10/js_002-768x401.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/10/js_002-900x470.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/10/js_002.jpg 1280w" sizes="auto, (max-width: 766px) 100vw, 766px" /> on 単体で検索すると靴のブランドがたくさん出てきたので、「on の意味」で検索しました。 するとどうでしょう、机の上を意味する画像が少ないことがわかります。そして、「くっつく」という意味を伝えるようなものがたくさん出てきますね。 実際の on の意味は上以外に「くっついている」という意味があります。（更にもっとたくさんの意味があります） 「机の上に」を表す画像が少ないことがわかりますね。 壁に写真が掛けられていたら英語だと A picture on the wall. という言い方をします。 でも壁の上じゃないですよね。 机の上というのはもっと正確に言えば「机の上でくっついている状態」が on ということになります。 ここから英語で電気が通電していることを turn on と表現するんですが、これは on を上に乗っているで覚えているとピンと来ませんよね。 それぐらい英語を理解しておくって大事。 何が言いたいかというと、jQuery の on() もマウスが上に乗っているを端的に言ってるわけじゃないってことです。 ボタンにマウスカーソルを載せてクリックするというアクションがあったら、マウスカーソルを載せるまでは on ですが、クリックするまではニュアンスに含まれないので on ってなんだ？ってなってしまいます。 ボタンをクリックした時に◯◯する これをコードにするとこんな感じです $('#button').on( 'click', function() { ◯◯する処理; }); これを応用して、ページが読み込まれたらに書き換えると load を使って下記のように使うことができます $(window).on( 'load', function() { ◯◯する処理; }); $( window ) はブラウザから確認できるものという意味で、これが load（読み込み）状態とくっついたら、つまり全ての内容が読み込まれてload 状態になったら◯◯という処理を行う。という意味になります。 なぜ on でこういうことになるかというと、これも英語の on のニュアンスと関係があります。 Turn on the light. と書くことで「明かりをつけた状態」を表しますが、これって電気が直接電球にくっついているわけじゃないですよね。通電することで電球の明かりが光ったという間接的なことですが、on は直接的なものではなく間接的なものにも使える便利な単語なんです。 これを理解していると $( window ) というブラウザが確認できる物と読み込みというニュアンスがくっつくというのも理解できます。 まとめ 英語もカタカナ言葉も聞き慣れない日本語も難しいですが、翻訳・画像検索しながら調べて行くことで未知だったものが少しニュアンスを掴めるところまではたどり着けます。 もちろん最初から分かる！とはならないかもしれませんが、それでもこれを繰り返すことで少しずつニュアンスの掴み方がわかってきますし、ニュアンスが掴めれば理解するためのプロセスとしては一歩前に進んでいます。 ただ時間はかかります。当然今までやったことのないことを学習しているわけですし、最初からなんでも理解できる人は少ないです。 諦めない・辞めない事が結局近道なので学習してみたけど全然理解できない糸口が掴め無いという方のヒントになれば幸いです。
広島県が有する離島「倉橋島」の写真を撮ってきました
夏休みを利用して祖父母の田舎にあたる倉橋島へ行ってきました。 この島に住んでいる親族は90代がほとんどで、観光地を除けば幼少期に往訪していた頃と比べると営業しているお店が減っていますし、屋敷のような家も今では空き家になっ […]
夏休みを利用して祖父母の田舎にあたる倉橋島へ行ってきました。 この島に住んでいる親族は90代がほとんどで、観光地を除けば幼少期に往訪していた頃と比べると営業しているお店が減っていますし、屋敷のような家も今では空き家になったせいで当時の見る影も無いほど朽ち果てたまま放置されていたりと、時代の移り変わりを肌で感じました。 今回の往訪自体が数年ぶりでこれから先いつ往訪できるかわからないので今のうちに島の様子、特に自分が幼少期に遊んだ近辺の写真を撮影してブログに残しておこうと考えこの記事を書いています。 島に渡る音戸大橋 本島から倉橋島には広島県呉市からかけられている音戸大橋を使って渡ります。 幼少期はこの橋が一つしか無くてこの時期は渋滞を起こしていましたが、現在は第二音戸大橋がかけられたことでかなり緩和されてスムーズに。 第二音戸大橋は近くに飲食ができる建物が一軒と駐車場があり、この場所から広大な瀬戸内海を眺めることができとても気持ち良くてオススメ。 最初に第二音戸大橋の近くにある休憩所から撮影 <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7405.jpg" alt="瀬戸内海の眺め" class="wp-image-7912" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7405.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7405-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7405-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7405-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7405-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7397.jpg" alt="第二音戸大橋を含めた瀬戸内海と山の眺め" class="wp-image-7913" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7397.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7397-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7397-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7397-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7397-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7400.jpg" alt="第二音戸大橋と道路の眺め" class="wp-image-7914" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7400.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7400-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7400-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7400-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7400-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7401.jpg" alt="反対側の道路の眺め" class="wp-image-7915" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7401.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7401-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7401-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7401-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7401-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7396.jpg" alt="ひまねきテラスと瀬戸内海の写真" class="wp-image-7917" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7396.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7396-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7396-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7396-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7396-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> ひまねきテラスではしらす丼が提供されていますが、今回はお店が混んでいたので断念… <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7408.jpg" alt="瀬戸内海と町並みの写真" class="wp-image-7918" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7408.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7408-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7408-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7408-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7408-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> 今回は音戸大橋の方も撮影がしたかったので一旦迂回してもう一方の橋へ。 音戸大橋の方は橋をかけるためにループ線が設けられており、頂上に休憩スペースがあります。本当はここに設置されている飲食店でご飯を食べたかったのですが、残念ながらお店は無くなっていました。 <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7410.jpg" alt="休憩所からみた音戸大橋" class="wp-image-7919" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7410.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7410-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7410-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7410-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7410-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> 休憩所からみた音戸大橋。向こう側が倉橋島で、渡ればこちら側と同じくループ線で下に降りることになります。 <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7414.jpg" alt="音戸大橋と大きな雲" class="wp-image-7920" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7414.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7414-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7414-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7414-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7414-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> この日は台風が去ったあとで空は非常に青くきれいな雲が特徴的でした。 <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7415.jpg" alt="夏の空と彩雲" class="wp-image-7922" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7415.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7415-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7415-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7415-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7415-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> この写真だと分かりづらいですが、こんなに晴れた日に虹が出てる！と思って撮影したんですが、実はこれ虹ではなく彩雲（さいうん）という事をX（twitter）で教えてもらいました これはもしや彩雲という激レアなやつなのでは? — 本と写真とイングリッシュマフィンの長尾さん (@wildwest_kazya) August 16, 2023 彩雲（さいうん、英語: iridescent clouds）は、太陽の近くを通りかかった雲に、緑や赤など多色の模様がまだらに見える現象[1][2]。 現れることは珍しくないが、昔から瑞相（ずいそう）の一つ、吉兆とされる[3][4]。瑞雲（ずいうん）、慶雲・景雲（けいうん）、紫雲（しうん）などの雅称がある[3][4]。 彩雲 – wikipedia <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3299.971258050789!2d132.5363547764849!3d34.19821077310235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x355aa83cf695528f%3A0x4c65b74d3826c881!2z56ys5LqM6Z-z5oi45aSn5qmL!5e0!3m2!1sja!2sjp!4v1692513049473!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"> 倉橋島室尾 音戸大橋を渡り倉橋島に入ってから走ること30分強で目的地となる室尾に到着。 途中に桂浜というキャンプ場や温泉施設がある観光地を通ったのですが、ここは以前より開拓されており、カフェがオープンしていたり牧場が開発されていたりと観光客が賑わっていました。 砂浜もきれいで瀬戸内海は海が静かで泳ぎやすいので、遊びに来る方にはオススメの場所。 今回ここには立ち寄っていないので気になる方は観光サイトなどで確認してみてください。 参考：倉橋・桂浜、白い砂浜と松原の歴史感じる施設：Tabetainjya 室尾についてから早速付近を撮影しましたが、日中暑くて汗だく。1時間ぐらいが限界でしたね… <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7418.jpg" alt="室尾の瀬戸内海沿いを走る車と造船場の写真" class="wp-image-7923" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7418.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7418-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7418-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7418-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7418-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7420.jpg" alt="室尾からの瀬戸内海と山の写真" class="wp-image-7924" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7420.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7420-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7420-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7420-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7420-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7424.jpg" alt="船着き場と山と海の写真" class="wp-image-7930" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7424.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7424-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7424-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7424-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7424-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7428.jpg" alt="造船場を中央にした写真" class="wp-image-7929" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7428.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7428-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7428-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7428-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7428-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> 中央に見えているのは造船所 <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7426.jpg" alt="呉市立倉橋東小学校正門の写真" class="wp-image-7928" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7426.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7426-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7426-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7426-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7426-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> 小学校はすでに廃校となっており、来島者のために無料の駐車場として開放 <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7429.jpg" alt="呉市立倉橋東小学校門からの写真" class="wp-image-7925" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7429.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7429-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7429-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7429-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7429-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7436-m.jpg" alt="呉市立倉橋東小学校校舎の写真" class="wp-image-7926" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7436-m.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7436-m-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7436-m-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7436-m-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7436-m-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7434-m.jpg" alt="呉市立倉橋東小学校校舎の写真" class="wp-image-7927" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7434-m.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7434-m-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7434-m-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7434-m-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7434-m-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7435.jpg" alt="呉市立倉橋東小学校校庭からの写真" class="wp-image-7931" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7435.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7435-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7435-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7435-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7435-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7437-m.jpg" alt="室尾の民家と原動機付自転車の写真" class="wp-image-7932" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7437-m.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7437-m-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7437-m-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7437-m-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7437-m-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> 小学校からで室尾を散策 <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7440.jpg" alt="室尾民家の写真" class="wp-image-7934" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7440.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7440-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7440-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7440-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7440-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7441.jpg" alt="室尾民家と向こうに見える山の写真" class="wp-image-7936" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7441.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7441-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7441-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7441-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7441-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7442.jpg" alt="室尾民家の写真" class="wp-image-7937" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7442.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7442-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7442-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7442-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7442-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7443.jpg" alt="室尾民家の写真" class="wp-image-7938" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7443.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7443-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7443-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7443-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7443-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7445.jpg" alt="室尾民家の写真" class="wp-image-7939" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7445.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7445-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7445-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7445-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7445-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7448.jpg" alt="室尾民家の写真" class="wp-image-7940" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7448.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7448-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7448-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7448-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7448-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7449.jpg" alt="室尾民家の写真" class="wp-image-7941" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7449.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7449-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7449-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7449-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7449-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7455.jpg" alt="室尾商店の写真" class="wp-image-7942" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7455.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7455-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7455-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7455-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7455-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7457.jpg" alt="室尾民家の写真" class="wp-image-7943" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7457.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7457-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7457-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7457-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7457-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7458.jpg" alt="室尾民家の写真" class="wp-image-7944" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7458.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7458-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7458-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7458-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7458-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7460.jpg" alt="室尾商店の写真" class="wp-image-7945" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7460.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7460-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7460-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7460-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7460-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7461.jpg" alt="室尾民家の写真" class="wp-image-7946" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7461.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7461-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7461-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7461-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7461-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7463.jpg" alt="室尾民家の写真" class="wp-image-7947" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7463.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7463-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7463-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7463-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7463-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7465.jpg" alt="室尾民家の写真" class="wp-image-7948" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7465.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7465-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7465-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7465-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7465-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7466.jpg" alt="室尾民家に生える松の木の写真" class="wp-image-7949" style="object-fit:cover" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7466.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7466-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7466-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7466-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7466-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7468.jpg" alt="室尾商店の写真" class="wp-image-7950" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7468.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7468-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7468-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7468-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7468-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> 幼少期よく来た商店 <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7470.jpg" alt="室尾民家の写真" class="wp-image-7951" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7470.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7470-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7470-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7470-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7470-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7472.jpg" alt="室尾民家の写真" class="wp-image-7952" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7472.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7472-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7472-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7472-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7472-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7474-m.jpg" alt="室尾民家の写真" class="wp-image-7953" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7474-m.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7474-m-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7474-m-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7474-m-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7474-m-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7478.jpg" alt="室尾の森田理容院の写真" class="wp-image-7954" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7478.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7478-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7478-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7478-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7478-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7481.jpg" alt="宮と山と青空の写真" class="wp-image-7955" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7481.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7481-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7481-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7481-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7481-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7482.jpg" alt="室尾民家と青空の写真" class="wp-image-7956" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7482.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7482-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7482-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7482-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7482-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7483.jpg" alt="宮と石碑の写真" class="wp-image-7957" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7483.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7483-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7483-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7483-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7483-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7485.jpg" alt="宮と狛犬左の写真" class="wp-image-7958" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7485.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7485-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7485-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7485-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7485-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7486.jpg" alt="宮と狛犬右の写真" class="wp-image-7959" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7486.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7486-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7486-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7486-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7486-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> 宮の付近では毎年夏祭りが行われていましたが、青年団の持続ができなくなるためお祭りは今年で最後らしい <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7487.jpg" alt="山と青空の写真" class="wp-image-7960" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7487.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7487-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7487-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7487-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7487-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7488.jpg" alt="船着き場と山と青空の写真" class="wp-image-7961" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7488.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7488-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7488-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7488-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7488-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7489.jpg" alt="海と山と空の写真" class="wp-image-7962" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7489.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7489-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7489-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7489-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7489-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7490.jpg" alt="海とボートと空の写真" class="wp-image-7963" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7490.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7490-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7490-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7490-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7490-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7492.jpg" alt="室尾の道路の写真" class="wp-image-7964" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7492.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7492-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7492-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7492-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7492-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7493.jpg" alt="室尾の道路反対側の写真" class="wp-image-7965" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7493.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7493-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7493-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7493-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7493-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7495.jpg" alt="桟橋への写真" class="wp-image-7966" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7495.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7495-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7495-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7495-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7495-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7496.jpg" alt="室尾民家の写真" class="wp-image-7967" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7496.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7496-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7496-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7496-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7496-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7498.jpg" alt="室尾民家の写真" class="wp-image-7968" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7498.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7498-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7498-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7498-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7498-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7500.jpg" alt="居酒屋とんぼの写真" class="wp-image-7969" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7500.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7500-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7500-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7500-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7500-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> 新しく居酒屋ができていた <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7502.jpg" alt="北吉鮮魚店の写真" class="wp-image-7970" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7502.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7502-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7502-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7502-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7502-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7505.jpg" alt="JA ひろしまの写真" class="wp-image-7971" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7505.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7505-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7505-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7505-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7505-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7507.jpg" alt="林医院の写真" class="wp-image-7972" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7507.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7507-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7507-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7507-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7507-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7510.jpg" alt="徳田美容室の写真" class="wp-image-7973" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7510.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7510-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7510-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7510-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7510-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7512.jpg" alt="室尾郵便局の写真" class="wp-image-7974" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7512.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7512-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7512-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7512-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7512-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7515.jpg" alt="室尾観光の写真" class="wp-image-7975" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7515.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7515-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7515-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7515-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7515-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7518.jpg" alt="室尾民家の写真" class="wp-image-7976" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7518.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7518-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7518-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7518-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7518-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7521.jpg" alt="浜荘の写真" class="wp-image-7977" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7521.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7521-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7521-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7521-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7521-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> 行ったこと無いですが喫茶店浜荘 <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7522.jpg" alt="西亀診療院の写真" class="wp-image-7978" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7522.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7522-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7522-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7522-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7522-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7524.jpg" alt="浜荘駐車場と海と山の写真" class="wp-image-7979" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7524.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7524-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7524-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7524-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7524-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7525-m.jpg" alt="室尾民家の写真" class="wp-image-7980" style="width:840px;height:560px" width="840" height="560" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7525-m.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7525-m-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7525-m-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7525-m-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7525-m-900x600.jpg 900w" sizes="auto, (max-width: 840px) 100vw, 840px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7526.jpg" alt="海から川の写真" class="wp-image-7981" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7526.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7526-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7526-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7526-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7526-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7528.jpg" alt="消防団施設の写真" class="wp-image-7985" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7528.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7528-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7528-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7528-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7528-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7439.jpg" alt="山への登り坂の写真" class="wp-image-7933" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7439.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7439-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7439-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7439-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7439-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7530.jpg" alt="お墓と山の写真" class="wp-image-7986" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7530.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7530-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7530-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7530-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7530-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7534.jpg" alt="山から眺める島と瀬戸内海の写真" class="wp-image-7988" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7534.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7534-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7534-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7534-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7534-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7535.jpg" alt="墓場の脇道の写真" class="wp-image-7989" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7535.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7535-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7535-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7535-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7535-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7536.jpg" alt="山道の写真" class="wp-image-7990" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7536.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7536-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7536-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7536-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7536-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7539.jpg" alt="山から見下ろした島の風景と海の写真" class="wp-image-7991" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7539.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7539-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7539-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7539-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7539-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7549.jpg" alt="お寺の写真" class="wp-image-7992" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7549.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7549-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7549-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7549-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7549-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7552.jpg" alt="お寺をでてすぐの町並みの写真" class="wp-image-7993" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7552.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7552-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7552-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7552-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7552-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7555-m.jpg" alt="お寺からでて町を見下ろした写真" class="wp-image-7994" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7555-m.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7555-m-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7555-m-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7555-m-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7555-m-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7557-1.jpg" alt="封じられた井戸の写真" class="wp-image-7996" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7557-1.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7557-1-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7557-1-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7557-1-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7557-1-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7558.jpg" alt="室尾民家の写真" class="wp-image-7997" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7558.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7558-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7558-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7558-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7558-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7560.jpg" alt="室尾民家の写真" class="wp-image-7998" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7560.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7560-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7560-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7560-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7560-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7562.jpg" alt="室尾民家の写真" class="wp-image-7999" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7562.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7562-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7562-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7562-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7562-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7563.jpg" alt="西道歯科医院の写真" class="wp-image-8000" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7563.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7563-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7563-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7563-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7563-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7566.jpg" alt="室尾民家の写真" class="wp-image-8001" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7566.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7566-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7566-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7566-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7566-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7569.jpg" alt="沢蟹の写真" class="wp-image-8002" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7569.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7569-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7569-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7569-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7569-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> 撮影しながら歩いていると沢蟹を発見 幼少期訪れたお店はだいたい見る影がなく、別の建物になっていたり空き地になっていました。 しかし、新たに移住してきたかたであろう新居が数軒建っていたり改築工事をしていたりと新しい活気を感じることもでき、無くなっていくだけじゃないと感じられたのは喜ばしいです。 <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7573.jpg" alt="夕焼けの瀬戸内海と造船場の写真" class="wp-image-8003" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7573.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7573-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7573-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7573-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7573-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13215.731458555585!2d132.52497197155452!3d34.09686027024081!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x355aab998adcbc0d%3A0x60afd1cc210b10f1!2z5a6k5bC-44Gu6KGX5Lim44G_!5e0!3m2!1sja!2sjp!4v1692512915378!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"> 広島海軍自衛隊船着き場 帰路の途中海軍の船を撮影したかったので少し寄り道 <img loading="lazy" decoding="async" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7581.jpg" alt="海軍船の写真" class="wp-image-8004" style="width:840px;height:560px" width="840" height="560" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7581.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7581-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7581-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7581-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7581-900x600.jpg 900w" sizes="auto, (max-width: 840px) 100vw, 840px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7582.jpg" alt="海軍船と海軍保有道の写真" class="wp-image-8005" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7582.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7582-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7582-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7582-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7582-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7586.jpg" alt="海軍船と海軍保有道の写真" class="wp-image-8006" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7586.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7586-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7586-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7586-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7586-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7611.jpg" alt="海軍船の写真" class="wp-image-8009" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7611.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7611-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7611-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7611-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7611-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7596.jpg" alt="倉庫を利用した会社の写真" class="wp-image-8011" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7596.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7596-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7596-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7596-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7596-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7617.jpg" alt="アレイからすこじまの看板の写真" class="wp-image-8016" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7617.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7617-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7617-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7617-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7617-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7613.jpg" alt="アレイからすこじまの写真" class="wp-image-8012" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7613.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7613-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7613-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7613-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7613-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7618.jpg" alt="寮へ渡る海軍の写真" class="wp-image-8013" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7618.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7618-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7618-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7618-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7618-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7597-m.jpg" alt="港町珈琲店とセブンイレブンの写真" class="wp-image-8014" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7597-m.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7597-m-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7597-m-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7597-m-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7597-m-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> 海軍カレーを提供している喫茶店ですが、残念ながら訪れた時間はまだ営業していませんでした。 <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7620.jpg" alt="港町珈琲店の写真" class="wp-image-8015" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7620.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7620-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7620-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7620-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7620-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1072.769662682081!2d132.54881284912125!3d34.22608047721239!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x355aa7f7b5dbf7f7%3A0x2bfc801434d87490!2z5pen5ZGJ5rW36LuN5bel5bug5pys6YOo5YmN6K235bK4!5e0!3m2!1sja!2sjp!4v1692512969338!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"> 広島城 今回もう一箇所訪れたかった広島城。 戦時に天守閣・各城門・櫓および城内の軍事施設が壊滅しましたが後に復元。台風の影響で破損しながらも修復を行い現在は綺麗な外観が維持されています <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7352.jpg" alt="広島城と公園の写真" class="wp-image-8017" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7352.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7352-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7352-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7352-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7352-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7353.jpg" alt="広島城と公園の写真" class="wp-image-8018" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7353.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7353-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7353-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7353-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7353-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7354.jpg" alt="正面からの広島城の写真" class="wp-image-8019" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7354.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7354-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7354-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7354-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7354-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7362.jpg" alt="広島城城下の写真" class="wp-image-8021" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7362.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7362-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7362-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7362-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7362-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7360.jpg" alt="広島城公園からの写真" class="wp-image-8020" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7360.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7360-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7360-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7360-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7360-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7364.jpg" alt="テレビ塔の写真" class="wp-image-8022" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7364.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7364-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7364-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7364-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7364-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7368.jpg" alt="広島城公園から見えるビルの写真" class="wp-image-8024" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7368.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7368-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7368-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7368-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7368-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7371.jpg" alt="広島城公園から見えるビルの写真" class="wp-image-8025" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7371.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7371-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7371-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7371-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7371-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="844" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7373.jpg" alt="広島城の堀の写真" class="wp-image-8026" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7373.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7373-303x200.jpg 303w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7373-607x400.jpg 607w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7373-768x506.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7373-900x593.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> 周辺の町並みもついでに <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7378.jpg" alt="広島市のビルの写真" class="wp-image-8027" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7378.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7378-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7378-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7378-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7378-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7379.jpg" alt="標識とビルの写真" class="wp-image-8028" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7379.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7379-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7379-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7379-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7379-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7380.jpg" alt="広島市のビルの写真" class="wp-image-8029" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7380.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7380-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7380-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7380-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7380-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7381.jpg" alt="広島市のビルの写真" class="wp-image-8030" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7381.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7381-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7381-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7381-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7381-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7383.jpg" alt="信号機と歩道の写真" class="wp-image-8031" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7383.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7383-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7383-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7383-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7383-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> <img loading="lazy" decoding="async" width="1280" height="853" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7388.jpg" alt="広島城の公園と歩道の写真" class="wp-image-8032" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7388.jpg 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7388-300x200.jpg 300w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7388-600x400.jpg 600w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7388-768x512.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/4M3A7388-900x600.jpg 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> 機材について 今回は荷物を少なくするためレンズは標準ズーム一本。基本的に快晴だったこともあり ISO 感度100−200でシャッタースピードを1600−2000あたりで撮影しています。 ただ影に入るとこのシャッタースピードでは暗くなりすぎるので、適宜800あたりに抑えて撮影していました。 カメラ：Canon EOS 5D Mark IV レンズ：Canon EF 24-70mm f/2.8L II USM
読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察
日本語には漢字という難しい文字があり、未履修の漢字が含まれた文章を読むことは我々日本人にとってもなかなか困難なもの。 そういった人たちにもコンテンツを楽しんでもらえるようルビ（よみがな）を振ることは良いアプローチですし、 […]
日本語には漢字という難しい文字があり、未履修の漢字が含まれた文章を読むことは我々日本人にとってもなかなか困難なもの。 そういった人たちにもコンテンツを楽しんでもらえるようルビ（よみがな）を振ることは良いアプローチですし、今は殆どのブラウザがルビに対応しているため比較的簡単に実装できます。 例えば著者夏目漱石のぼっちゃんの一文をルビを振ってみると下記の様な見た目に 親譲 おやゆず りの 無鉄砲 むてっぽう で 子供 こども の 時 とき から 損 そん ばかりしている。 これを担保するために必要なソースコードは下記 親譲 おやゆず りの 無鉄砲 むてっぽう で 子供 こども の 時 とき から 損 そん ばかりしている。 もしも書籍一冊分のルビを振る必要があれなら非常に労力の高いものになりますが、タグの構造としてはそれほど難しくなく、現状は下記2つだけ。 ruby タグ – ルビを振りたい言葉を囲む rt タグ – 実際のルビを囲う 一昔まえだと（おそらくこの記事を書いた8年ぐらい前？）モダンブラウザも対応していないものがあったので、ルビの代替え用に rp タグも入れる必要があり、今より一手間掛かりました。 各ブラウザで閲覧すると下記のようになります Chrome デモ <img loading="lazy" decoding="async" width="1280" height="548" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_chrome-1.png" alt="" class="wp-image-7879" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_chrome-1.png 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_chrome-1-400x171.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_chrome-1-900x385.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_chrome-1-768x329.png 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> Firefox デモ <img loading="lazy" decoding="async" width="1280" height="554" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_firefox.png" alt="Firefox での閲覧サンプル画像" class="wp-image-7880" style="object-fit:cover" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_firefox.png 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_firefox-400x173.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_firefox-900x390.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_firefox-768x332.png 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> Safari デモ <img loading="lazy" decoding="async" width="1280" height="542" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_safari.png" alt="Safari での閲覧サンプル画像" class="wp-image-7881" style="object-fit:cover" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_safari.png 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_safari-400x169.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_safari-900x381.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_safari-768x325.png 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> Edge デモ <img loading="lazy" decoding="async" width="1280" height="716" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_edge.png" alt="Edge での閲覧サンプル画像" class="wp-image-7882" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_edge.png 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_edge-358x200.png 358w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_edge-715x400.png 715w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_edge-768x430.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/00_cap_edge-900x503.png 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> 多言語をルビとして表示する 読み仮名だけでなく日本語に対して英語をルビとして振る、あるいはその逆を記述することも可能です This これ is 〜です a （ひとつの） ball ボール . This これ is 〜です a （ひとつの） ball ボール . これ This は ボール ball です &lt;p> &lt;ruby>これ&lt;rt lang="en">This&lt;/rt>&lt;/ruby>は&lt;ruby>ボール&lt;rt lang="en">ball&lt;/rt>&lt;/ruby>です &lt;/p> この場合ドキュメントに指定している言語と異なる言語を指定するので、lang 属性を指定しています。 CSS でのスタイリングが課題 問題は CSS での制御が難しい点があり、個人的にはデフォルトのままで使うので充分だと感じています。 というのも、各ブラウザが CSS の制御に対応していなくて、Firefox がまだ対応しているかなという状況 margin, padding, position を使って違いを比べてみましたが、かなり違いがでました。 Chrome スタイリングデモ <img loading="lazy" decoding="async" width="1280" height="566" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_chrome.png" alt="Chrome でスタイリングをあてた閲覧" class="wp-image-7883" style="object-fit:cover" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_chrome.png 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_chrome-400x177.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_chrome-900x398.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_chrome-768x340.png 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> Firefox スタイリングデモ <img loading="lazy" decoding="async" width="1280" height="557" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_firefox.png" alt="Firefoxでスタイリングをあてた閲覧" class="wp-image-7884" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_firefox.png 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_firefox-400x174.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_firefox-900x392.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_firefox-768x334.png 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> Safari スタイリングデモ <img loading="lazy" decoding="async" width="1280" height="553" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_safari.png" alt="Safari でスタイリングをあてた閲覧" class="wp-image-7885" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_safari.png 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_safari-400x173.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_safari-900x389.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_safari-768x332.png 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> Edge スタイリングデモ <img loading="lazy" decoding="async" width="1280" height="728" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_edge.png" alt="Edge でスタイリングをあてた閲覧" class="wp-image-7886" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_edge.png 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_edge-352x200.png 352w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_edge-703x400.png 703w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_edge-768x437.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/01_cap_edge-900x512.png 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> CodePen で確認する これだと余白で合わせることがまだ難しく、position に至ってはかなり異なってしまいます それでもどうにかスタイリングするには 見た目の調整をどうしても合わせるのであれば data 属性を使って制御する方法があります 昨日 きのう も 今日 きょう も 明日 あした も ruby[data-ruby] { position:relative; } ruby[data-ruby]::before { content: attr(data-ruby); position:absolute; left:0; top: -1.5em; right:0; margin: auto; text-align:center; font-size:.6em; } rt { display: none; } Chrome デモ <img loading="lazy" decoding="async" width="1280" height="574" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_chrome_data.png" alt="Chrome で date 属性を使った閲覧デモ" class="wp-image-7887" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_chrome_data.png 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_chrome_data-400x179.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_chrome_data-892x400.png 892w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_chrome_data-768x344.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_chrome_data-900x404.png 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> Firefox デモ <img loading="lazy" decoding="async" width="1280" height="538" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_firefox_data.png" alt="Firefox で date 属性を使った閲覧デモ" class="wp-image-7888" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_firefox_data.png 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_firefox_data-400x168.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_firefox_data-900x378.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_firefox_data-768x323.png 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> Safari デモ <img loading="lazy" decoding="async" width="1280" height="535" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_safari_data.png" alt="Safari で date 属性を使った閲覧デモ" class="wp-image-7889" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_safari_data.png 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_safari_data-400x167.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_safari_data-900x376.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_safari_data-768x321.png 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> Edge デモ <img loading="lazy" decoding="async" width="1280" height="700" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_edge_data.png" alt="Edge で date 属性を使った閲覧デモ" class="wp-image-7890" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_edge_data.png 1280w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_edge_data-366x200.png 366w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_edge_data-731x400.png 731w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_edge_data-768x420.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/08/02_cap_edge_data-900x492.png 900w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /> CodePen で確認する アクセシビリティの課題 見た目に優しいルビですが音声で読み上げると本文とルビ両方を読み上げられてしまうので、これは聞きづらいと感じました。 主要なキーワードだけならそこまでストレスにはなりませんが、長文すべてにルビを振ると音声で聞くにはかなりストレスなのでアクセシビリティには課題がありますね。 これについては他のメディアなどでも言及されています。 Webのルビ仕様にはアクセシビリティを阻害している面がある。「日本DAISYコンソーシアム」が改善を求めてブラウザベンダ、WHATWG、W3Cらに公開書簡 ルビ振りタグと音声読み上げのアクセシビリティ両立について ただ僕は OS に標準で搭載されているものでしか聴いていないので、「外部ツールが対応しているよ」などご意見あれば教えていただけると嬉しいです。
Google Fonts を WordPress で複数読み込む時に正常処理されないときの対処法
どのタイミングでかはわからないのですが、いつのまにか運用しているサイトで指定している Web フォントが正常に読み込めていないことに気づきました。 デザインする際に自分の端末にフォントをダウンロードしてしまうので、実装時 […]
どのタイミングでかはわからないのですが、いつのまにか運用しているサイトで指定している Web フォントが正常に読み込めていないことに気づきました。 デザインする際に自分の端末にフォントをダウンロードしてしまうので、実装時に読み込みを確認するとその後の運用ではフォントをアンインストールしない限り、実装方法が変わった場合に気づかないんですよね。 なんせ自分の端末にはフォントがはいっているわけだから、サイトの表示で正しくフォントが表示されてしまうわけです。 今回気づいたのはサイトのリニューアルをお願いしている方と画面共有している時に「フォントが違いますね？」と言われたことが発端でした。 実際に自分の手元の Windows で確認したら（普段は Mac を使っている）想定しているフォントで表示されていなかったわけです。 Google Fonts の指定に関して <img loading="lazy" decoding="async" width="757" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/07/googlefont_01-757x400.jpg" alt="" class="wp-image-7862" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/07/googlefont_01-757x400.jpg 757w, https://wp.yat-net.com/wp/wp-content/uploads/2023/07/googlefont_01-379x200.jpg 379w, https://wp.yat-net.com/wp/wp-content/uploads/2023/07/googlefont_01-768x406.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/07/googlefont_01-900x475.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/07/googlefont_01.jpg 1280w" sizes="auto, (max-width: 757px) 100vw, 757px" /> 上記のように利用したいフォントを複数選択すれば、一括で読み込むコードが Use on the web の項目に表示されます。 WordPress で利用する場合、wp_enqueue_style() でこのコードを読み込みます wp_enqueue_style( 'googlefonts', "https://fonts.googleapis.com/css2?family=Meie+Script&family=Vollkorn:ital,wght@0,400;0,600;1,400;1,500&display=swap", array(), null ); ここでポイントになるのが、バージョン指定をいれる引数に null を指定すること。 ここは省略することも可能で、その場合は WordPress のバージョンが設定されます。元々自分が記述していたコードもここは省略していたのですが、その場合に不具合が生じて HTML に吐き出されるコードから指定していたウェブフォントがコードから何故か削除されていたんですよね。 何故そのような仕様になるのかは不明なんですが、何気なく null を指定するとうまく行ったので備忘録として記事にしておきました wp_enqueue_style(): https://developer.wordpress.org/reference/functions/wp_enqueue_style/ Vite で利用する ついでに Vite で Web フォントを使うプラグインがあったので合わせて紹介しておきます https://www.npmjs.com/package/vite-plugin-webfont-dl
ブログを書くのがかなり久しぶりになります。 最近 Laravel を触ってまして、Docker で環境構築して使うことが増えてきたので備忘録として書いておこうと思うので、これから触ってみたいという方の参考になれば嬉しいで […]
ブログを書くのがかなり久しぶりになります。 最近 Laravel を触ってまして、Docker で環境構築して使うことが増えてきたので備忘録として書いておこうと思うので、これから触ってみたいという方の参考になれば嬉しいです 今回実行した環境は以下のとおりです Mac Apple M1 MAX Ventura 13.1 Docker の仕様について 下記環境を構築します Webサーバー: NginX PHP: php-fpm （php:8.0.5-fpm-alpine） Database: MariaDB まずは Docker が入ってない人は Docker をインストールしましょう Docker Docker はわかりやすく概要を説明すると、コンテナに必要なアプリケーションをイメージという単位で構築し、それぞれに上記で記載している Web サーバーや PHP, Database といったアプリケーションやミドルウェアなど自分に必要な構成で自分の端末に構築できる仕組みです。 自分の端末に直接 Web サーバーや Laravel をインストールして動かすこともできますが、案件によって Web サーバーを変更したり PHP のバージョンを変更するのは手間がかかります。 Docker なら必要なときに必要な構成を docker-compose.yml というファイルに定義しておくことでいつでも立ち上げたりシャットダウンしたり、削除することができるので、切り替えが容易に行えて楽です。 また設定ファイルを共有すれば、他の人にもすぐに同じ環境を用意してもらえるので、共同開発するのも便利。 かなり端的に概要を書いているので、もっと詳しく知りたい方はサーバー会社のさくらインターネットさんが公開している「さくらのナレッジ」の記事を読んでみましょう Docker入門（第一回）～Dockerとは何か、何が良いのか～：さくらのナレッジ docker-compose.yml version: "3" services: web: image: nginx:latest ports: - 8000:80 volumes: - ./docker/web/default.conf:/etc/nginx/conf.d/default.conf - .:/var/www/html depends_on: - php-fpm php-fpm: build: ./docker/php volumes: - .:/var/www/html depends_on: - db db: image: mariadb:latest ports: - 33306:3306 environment: MYSQL_ROOT_PASSWORD: root MYSQL_USER: root MYSQL_PASSWORD: root MYSQL_DATABASE: sampledb volumes: - ./db-data:/var/lib/mysql 今回開発するフォルダを作成し、上記ファイルを保存しましょう。 作成するフォルダを sample とし、ユーザーディレクトリに作成した場合下記構成になります。 ~/sample/docker-compose.yml ~/ はユーザーディレクトリを指します このファイルを書く場合インデントに注意してください。インデントが崩れているとエラーになります。 Web サーバー NginX の設定 NginX の設定ファイルが必要なので、default.conf というファイルを用意します default.conf server { listen 80; root /var/www/html; index index.php index.html index.htm; access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; location ~ \.php$ { root /var/www/html/sample/public; fastcgi_split_path_info ^(.+\.php)(/.+)$; fastcgi_pass php-fpm:9000; fastcgi_index index.php; include fastcgi_params; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param PATH_INFO $fastcgi_path_info; } } root の位置は自分の作成したフォルダが sample なので、/var/www/html/sample/public になります。docker-compose.yml で名前を変更した場合は、このディレクトリ構造の sample を自分が docker-compose.yml で指定した値に合わせてください 同様に fastcgi_pass には docker-compose.yml に記載している php-fpm を指定し、ポートはデフォルトの9000番を割り当てています。 このファイルは下記のように配置します ~/sample/docker/web/ │ └──default.conf └──docker-compose.yml ここで docker を起動しましょう ターミナルなどで下記コマンドを実行します。場所は ~/sample に移動してから実行。（％は入力不要です） % docker-compose up -d データベース MariaDB docker-compose.yml に MariaDB への接続情報を記載しています 上記記載の docker-compose.yml から抜粋 db: image: mariadb:latest ports: - 33306:3306 //← 外部から接続する時のポート番号：内部接続時のポート番号 environment: MYSQL_ROOT_PASSWORD: root //← Root のパスワード MYSQL_USER: root //← ユーザー名 MYSQL_PASSWORD: root //← パスワード MYSQL_DATABASE: sampledb //← 作成するデータベース名 volumes: - ./db-data:/var/lib/mysql まずはデータベースが起動しているか確認してみましょう 下記コマンドをターミナルで入力してデータベースのコンテナに接続します % docker-compose exec db sh docker-compose exec ○○ sh で起動している○○（ docker-compose.yml で定義している services: 内部に記載している web, php-fpm, db のどれか ）に接続するという意味です。接続すればターミナルの操作が自分の端末ではなく、コンテナ上での操作に変わります。 # 環境によって異なりますが、％ から # のようにターミナルの開始記号が変わっていれば、コンテナに接続できています。 コンテナから抜けたい場合は exit コマンドで。 # exit % このように切り替わったことを確認しながら今自分の端末を操作しているのか、コンテナを操作しているのか判断できるようになりましょう。 説明どおりに進めているとコンテナから抜けているので、改めてコンテナに接続します。 % docker-compose exec db sh 次にコンテナ内のデータベースに接続します # mysql -u root -proot sampledb mysql コマンドの -u はユーザーをしてするオプション、-p はそのまま続けてパスワードを入力するオプションで、最後に接続するデータベース名を記載します。 これらコマンドを使う時は下記に気をつけてください 小文字大文字を間違えてないか 半角スペースが全角スペースになっていないか ハイフンが付いているものはオプションです。-p については続けて入力するパスワードを省くと、コマンド実行後にパスワードを確認してきます。 どちらの方法でも下記のようなメッセージが表示されれば接続できています <img loading="lazy" decoding="async" width="900" height="226" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/003-900x226.jpg" alt="Welcome to the MariaDB monitor. Commands end with ; or \g. Your MariaDB connection id is 28 Server version: 10.11.2-MariaDB-1:10.11.2+maria~ubu2204 mariadb.org binary distribution Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others. Type 'help;' or '\h' for help. Type '\c' to clear the current input statement." class="wp-image-7824" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/003-900x226.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/003-400x101.jpg 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/003-768x193.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/003.jpg 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> Laravel インストール 今回利用するバージョンは 9.52.7 になります Laravel は PHP のフレームワークになるので、PHP の必要なパッケージやモジュールをインストールするために Docker ファイルを作成します 作成場所は先に記載している docker-compose.yml に記載している php-fpm の build 部分にしている場所になります 上記記載の docker-compose.yml から抜粋 php-fpm: build: ./docker/php ファイル構成で示すと下記の構成になります ~/sample/docker/php/ │ │ └──Dockerfile │ └─/web/ │ └──default.conf └──docker-compose.yml Dokerfile FROM php:8.0.5-fpm-alpine RUN apk --update add \ &amp;&amp; apk add build-base curl git zip tar unzip vim oniguruma-dev RUN cd /usr/bin &amp;&amp; curl -sS https://getcomposer.org/installer | php &amp;&amp; ln -s /usr/bin/composer.phar /usr/bin/composer RUN apk add libxml2-dev curl-dev $PHPIZE_DEPS RUN pecl install xdebug-3.1.5 RUN docker-php-ext-install pdo_mysql RUN docker-php-ext-install mbstring RUN docker-php-ext-install xml RUN docker-php-ext-install curl RUN docker-php-ext-install session RUN docker-php-ext-install tokenizer RUN docker-php-ext-enable pdo_mysql mbstring xml curl session tokenizer xdebug WORKDIR /var/www/html RUN docker-php-ext-install のように重複している箇所ははまとめて記述することもできます RUN docker-php-ext-install pdo_mysql mbstring xml curl session tokenizer ただこの場合どれかのパッケージインストール時にエラーが有る場合、原因が特定しづらいので分けておけばどのパッケージでエラーが出たかわかりやすくなります。 RUN 以降を Docker のコンテナ起動時に実行 apk add でパッケージのインストールを行います。 $PHPIZE_DEPS の指定は phpize に必要なパッケージのインストール。PHP拡張モジュールを動的にビルドするのに必要なもので、この指定がないと PHP 本体をビルドし直すことになります。 pecl install xdebug は PHP のデバッグツールですが僕が今回インストールした際にバージョン指定なしでインストールするとエラーが発生したので 3.1.5 を指定しています。 docker-php-ext-install PHP の拡張インストールで、docker-php-ext-enable を使って有効化しています。 コンテナ再構築 PHP の設定ファイルを追加したので docker-compose を再度実行し、コンテナを再構築します % docker-compose up -d 構築が終わったら Laravel をインストールするため php-fmp のコンテナに接続し、インストールコマンドを実行します % docker-compose exec php-fpm sh 接続するとターミナルの開始記号が下記のようになるはずなので /var/www/html # この状態でインストールコマンドを実行します。 /var/www/html # composer create-project --prefer-dist laravel/laravel sample 最後の sample はアプリケーションの名前になり、作成したディレクトリにこの名前のフォルダが作成されます。 ~/sample/db-data/ │ /docker/php/ │ │ └──Dockerfile │ └─/web/ │ └──default.conf │ /sample/ └──docker-compose.yml この sample フォルダの中身が Laravel プロジェクトになります Laravel の welome ページをブラウザに表示 上記で作成している default.conf にドキュメントルートの指定が入っています default.conf より抜粋 root /var/www/html/sample/public; この中の index.php ファイルが Laravel プロジェクトをブラウザで表示する際のトップページになります。 そして、Laravel から データベースに接続する設定を .env というファイルに書き込まないとエラーになるので、.env を編集し MySQL の記述を下記に変更します。 Laravel プロジェクトフォルダ（今回だと sample ）の直下に .env というファイルがありますが、見えない場合は不可視ファイルを表示するように設定が必要です Mac の場合 cmmand + shift + . Windows の場合 タスク バーから エクスプローラー を開く＞ [表示] > [表示] > [隠しファイル] を選択 .env の DB_ で始まる箇所を編集し、docker-compose.yml にある同一の項目と値を合わせます DB_CONNECTION=mysql DB_HOST=db DB_PORT=3306 DB_DATABASE=sampledb DB_USERNAME=root DB_PASSWORD=root DB_CONNECTION の値は mysql になります。MariaDB ではないので注意しましょう DB_HOST の値は docker-compose.yml で指定しているサービス名になるので今回は db DB_PORT の値はコンテナ同士を内部通信で行うので docker-compose.yml で指定した ports の右側の値（33306:3306） DB_DATABASE, DB_USERNAME, DB_PASSWORD の値は docker-compose.yml に指定した名前をそのまま利用します これで php-fpm のコンテナに接続し、データベースのコンテナへ接続できるので、php-fpm に接続した状態でデータベースのテーブル定義を Laravel のコマンドを利用して設定します。 コンテナに接続していない場合はまずは接続 % docker-compose exec php-fpm sh 接続したらドキュメントルートから始まるので、Laravel プロジェクトに移動 /var/www/html cd sample /var/www/html は表示されているはずなので、コピーする際にコピーしないように気をつけてください cd というコマンドがディレクトリを移動するコマンドを意味し、今いる階層に存在する sample ディレクトリに移動するという意味になります。 移動したら Laravel の migrate コマンドを実行 /var/www/html/sample php artisan migrate <img loading="lazy" decoding="async" width="900" height="91" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/006-900x91.png" alt="" class="wp-image-7835" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/006-900x91.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/006-400x40.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/006-768x77.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/006.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> こんな感じで表示されれば成功。 これは Laravel プロジェクトに artisan ファイルが存在するからこのコマンドが利用できるので、エラーが出た場合は正しいディレクトリ位置にいるか確認してください。また今いる sample ディレクトリの中身を確認して artisan ファイルが存在するかも確認してみましょう。 ディレクトリ内のファイルを確認するには下記コマンドを実行 /var/www/html/sample ls -la 下記のように存在するファイル一覧を表示できます <img loading="lazy" decoding="async" width="416" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/754c60f9236aed030874a9a8d8fbb594-416x400.jpg" alt="" class="wp-image-7832" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/754c60f9236aed030874a9a8d8fbb594-416x400.jpg 416w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/754c60f9236aed030874a9a8d8fbb594-208x200.jpg 208w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/754c60f9236aed030874a9a8d8fbb594-768x739.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/754c60f9236aed030874a9a8d8fbb594-900x866.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/754c60f9236aed030874a9a8d8fbb594.jpg 1160w" sizes="auto, (max-width: 416px) 100vw, 416px" /> また、自分の端末のユーザーディレクトリに sample ディレクトリを作成して開発しているので、ユーザーディレクトリの中身を Finder や エクスプローラで確認すれば同様に内部のファイル一覧が確認できます。 <img loading="lazy" decoding="async" width="462" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/004-462x400.jpg" alt="" class="wp-image-7833" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/004-462x400.jpg 462w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/004-231x200.jpg 231w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/004-768x665.jpg 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/004-900x779.jpg 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/004.jpg 1236w" sizes="auto, (max-width: 462px) 100vw, 462px" /> コンテナに接続して確認するのも、端末側から確認するのも同じファイルが確認できます。これは同じファイルを扱っている事になりますが下記の違いがあります コンテナに接続してアクセスする場合はルートディレクトリが Laravel ディレクトリになり、ドキュメントルートは default.conf に記述した設定になる（今回は /var/www/html/photom/public ） 端末から見る場合はルートは端末のルートディレクトリ Docker の Web サーバーコンテナを利用しているので、これは仮想的なサーバーを端末の中に用意して利用している。こんなイメージを想像してもらえればわかりやすいと思います。 <img loading="lazy" decoding="async" width="510" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/005-510x400.png" alt="自分の端末内部イメージ Docker, Container, image" class="wp-image-7834" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/005-510x400.png 510w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/005-255x200.png 255w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/005-768x602.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/005-1536x1204.png 1536w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/005-900x705.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/005.png 1784w" sizes="auto, (max-width: 510px) 100vw, 510px" /> ここまでで準備は整いました。実際にブラウザに表示してみましょう。 /var/www/html/sample php artisan serve php artisan serve このコマンドで Web サーバーが起動します。 <img loading="lazy" decoding="async" width="900" height="164" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/007-900x164.png" alt="" class="wp-image-7836" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/007-900x164.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/007-400x73.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/007-768x140.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/007.png 952w" sizes="auto, (max-width: 900px) 100vw, 900px" /> Web サーバーが起動すると ip アドレスが表示されるので、この ip アドレスをコピーしてブラウザに貼り付けてみます。 <img loading="lazy" decoding="async" width="640" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/008-640x400.png" alt="" class="wp-image-7837" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/008-640x400.png 640w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/008-320x200.png 320w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/008-768x480.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/008-900x563.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/008.png 1280w" sizes="auto, (max-width: 640px) 100vw, 640px" /> 様子がおかしいですね。 コンテナ内部から起動するとこのように表示できないエラーが返ってきます。 これはコンテナ内部からの通信設定で起動しているからで、ブラウザを経由するような外部通信だと設定を変えないといけないんですよね。（これに気づくのに時間がかかりました） ですので、まずは一度起動を停めます Press Ctrl+C to stop the server と記載があるので、キーボードを Ctrl + C 入力して停めます。そしてコンテナの接続から抜けて自分の端末接続に切り替えます /var/www/html/sample exit 次に .env のファイルを書き換えます .env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=33306 DB_DATABASE=photom DB_USERNAME=root DB_PASSWORD=root 変わるのは DB_HOST と DB_PORT ですね。内部通信・外部通信というのがいまいち理解しづらいですが、ターミナルでコンテナに接続してそこから別のコンテナに接続通信を行う場合は内部通信。ブラウザなどを使って外側から通信する場合が外部通信といった感じです。 内部通信の場合は DB_HOST の名前を docker-compose.yml で指定しているサービス名を指定していましたが、外部通信に変更する場合は DB_HOST を 先程表示された ip アドレスに( 127.0.0.1 ) DB_PORT を docker-compise.yml ファイルの内部と外部で設定した左側の内容に（ 33306:3306 ） Laravel を触っていてブラウザに表示した際に接続エラーが出た場合は、この設定値に誤りがあるケースが多いので確認してみましょう。 ちなみになぜわざわざ外部と内部のポートを変えているかというと、自分の環境にほかの開発用アプリケーションがインストールしてあって、それらが既存の 80番や3306番を利用しているかで、ここがバッティングするとエラーになって使えないからです。 コンテナー同士の内部通信であればそれらの影響を受けないのでデフォルトの値で利用できますが、開発端末の方はそういうわけに行かないので、外部通信のポートをあえて変更して設定しています。 では改めて端末側からサーバーを起動してみましょう。必ず Laravel プロジェクトにいることを確認してください % php artisan serve 先ほどと同じ用に ip アドレスが表示されるのでブラウザの画面を更新します <img loading="lazy" decoding="async" width="640" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/009-640x400.png" alt="" class="wp-image-7839" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2023/05/009-640x400.png 640w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/009-320x200.png 320w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/009-768x480.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/009-900x563.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2023/05/009.png 1280w" sizes="auto, (max-width: 640px) 100vw, 640px" /> この画面が表示されれば成功です。 参考資料 今回記事執筆に参考させていただきました Laravelの開発環境をdocker-composeで一から構築してみる：RE:ENGINES Docker入門（第一回）～Dockerとは何か、何が良いのか～：さくらのナレッジ
GitHub Actions を使って WordPress のテーマをデプロイ（アップロード）する
FTP を使ったアップロードが面倒なのでなるべく Git と連携したデプロイをしたい。そうなると CI のサービスが割と主流なんですが、GitHub Actions を使うともっとお手頃にローカルからサーバーへデータ転送 […]
FTP を使ったアップロードが面倒なのでなるべく Git と連携したデプロイをしたい。そうなると CI のサービスが割と主流なんですが、GitHub Actions を使うともっとお手頃にローカルからサーバーへデータ転送ができるのでやり方を書いておきます。 レンタルサーバー WordPress のお仕事だとエックスサーバーやさくらインターネットを使うことが多いのですが、この場合は転送に FTP を利用します。 まず設定するのは、リポジトリにある Settings の secrets に FTP 情報などを登録します。 ここで登録する内容は外部から見えないので安心して利用可能。 テスト環境と本番環境など転送先サーバーが複数存在する場合はそれぞれの値を一つ一つ入力して保存していきます。 <img loading="lazy" decoding="async" width="730" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2021/10/action_secrets-730x400.png" alt="Action secrets のスクリーンショット" class="wp-image-7784" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2021/10/action_secrets-730x400.png 730w, https://wp.yat-net.com/wp/wp-content/uploads/2021/10/action_secrets-365x200.png 365w, https://wp.yat-net.com/wp/wp-content/uploads/2021/10/action_secrets-768x421.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2021/10/action_secrets-900x493.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2021/10/action_secrets.png 1280w" sizes="auto, (max-width: 730px) 100vw, 730px" /> 最初は何も項目がないので、 New repository secret のボタンをクリックし 登録名 登録内容 を入力して保存していきます。 FTP_PASSWORD → レンタルサーバーから提供される FTP のパスワード FTP_SERVER → レンタルサーバーから提供される FTP のホスト情報 FTP_USERNAME → レンタルサーバーから提供される FTP のユーザーネーム TEST_FTP_PASSWORD → テストサーバー用の FTP パスワード TEST_FTP_SERVER→ テストサーバー用の FTP ホスト情報 TEST_FTP_USERNAME→ テストサーバー用の FTP ユーザーネーム GitHub で入力するのは以上です。 次にデプロイに必要なファイルをプロジェクトに追加します。 .git がある同階層にディレクトリとファイルを設置 /.git /.github/workflows/deploy.yml 上記になるようディレクトリ .github/workflows/ を作成し、workflow の中に ***.yml として（ファイル名は自由）yamlファイルを作成します。 on: push: branches: - main pull_request: branches: - main name: Deploy jobs: test: name: Upload Staging runs-on: ubuntu-latest steps: - uses: actions/checkout@master - name: Upload Staging uses: SamKirkland/FTP-Deploy-Action@2.0.0 env: FTP_SERVER: ${{ secrets.TEST_FTP_SERVER }} FTP_USERNAME: ${{ secrets.TEST_FTP_USERNAME }} FTP_PASSWORD: ${{ secrets.TEST_FTP_PASSWORD }} LOCAL_DIR: ./ REMOTE_DIR: /public_html/ production: name: Upload Production runs-on: ubuntu-latest steps: - uses: actions/checkout@master - name: Upload Production uses: SamKirkland/FTP-Deploy-Action@2.0.0 env: FTP_SERVER: ${{ secrets.FTP_SERVER }} FTP_USERNAME: ${{ secrets.FTP_USERNAME }} FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }} LOCAL_DIR: ./ REMOTE_DIR: /public_html/ on: 以下に必要なコードを記述していきますが、このサンプルでは main ブランチに push もしくは pull_request でデプロイを実行するようにしています。 name: はこのコードの名前で何でも構いません。 jobs: 以下にデプロイに利用する処理を記述していきます。 test: は テスト環境へのデプロイ、production: は本番環境へのデプロイ name: デプロイ処理の名前 runs-on: ここで指定したランナー環境で実行されます。ジョブに対する時間は無料枠だと2000分まで。詳しくはドキュメントの使用制限を確認してください。GitHub Docs: 使用制限、支払い、管理 steps: ここから順番で処理が実行されます uses: ブランチのチェックアウト name: 実行するアクションの名前 uses: 実行するアクションの内容。今回は SamKirkland/FTP-Deploy-Action@2.0.0 を利用しています env: デプロイの実行。必要な情報は見えてしまうと困るので、先程登録した secrets の内容を取得して実行します。 LOCAL_DIR: 転送元（GitHub）のドキュメントルート REMOTE_DIR: 転送先（サーバー）の転送先となるディレクトリ 最初は main ブランチに push すれば実行されます。 SSH を使ったデプロイ（VPSなど） レンタルサーバーで SSH を使う場合も同じです。ただしパスフレーズが使えないので、レンタルサーバーで鍵を登録する場合はパスフレーズを入力せずに登録してください。 on: push: branches: - main pull_request: branches: - main name: Deploy jobs: production: name: Upload Production runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: install SSH key uses: shimataro/ssh-key-action@v2 with: key: ${{ secrets.SSH_PRIVATE_KEY }} name: ida_rsa known_hosts: ${{ secrets.KNOWN_HOSTS }} - name: Deploy run: rsync -rlOcv --omit-dir-times --exclude ".git/" --exclude ".github/" -e "ssh -i ~/.ssh/ida_rsa -p ${{ secrets.SSH_PORT }}" ./ ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:/public_html/ SSH の場合デプロイに rsync を利用します。 FTP の設定と異なるのは SSH キーを secrest に登録 kown_host の登録 rsync での ssh の接続設定 SSH キーを secrest に登録 secret に サーバーとの接続で利用している SSH キーを登録します。 kown_host の登録 secret に登録します。手順は ローカルの端末でターミナルを使い ssh-keyscan -H ホストのアドレス >> ~/.ssh/known_hosts を実行 ~/.ssh/known_hosts をエディタで開き、ホストアドレスの部分をコピーして secret に貼り付け actions/checkout@v2 ではこの設定が必要になっています。（v1 では不要だった） rsync での ssh の接続設定 rsync のオプションに -rlOcv をつけています。色々と調べていると -ahvz をつけているものが多かったんですが、これだと転送はされるものの転送時に sync: failed to set times on "/***/***/.": Operation not permitted (1) というエラーが出力されていたので、権限周りでエラーが発生したため、転送時の権限に影響がないように変更してこの形にしました。 権限についてはドキュメントを読むか、rsyncオプション を参考してみてください。 あとは main に push すればデプロイされます。 pull_request でデプロイしたい場合は、FTP のサンプルに合わせてコードを編集してください。
WordPress の管理画面でシンプルに SNS アカウントを管理するプラグイン「Simple SNS Account Management」を作りました
単純に SNS のアカウントを WordPress の管理画面で管理したいことがあるのでプラグインにして公開しました。 どんな時に使うの？ 案件で SNS アカウントを用意するのでデザインに入れておいてくださいと言われた […]
単純に SNS のアカウントを WordPress の管理画面で管理したいことがあるのでプラグインにして公開しました。 どんな時に使うの？ 案件で SNS アカウントを用意するのでデザインに入れておいてくださいと言われた後、アカウントを共有してもらうまで時間がかかることがあります。 また、構想段階では SNS 運用をしようと思っていたが公開後はバタバタしていてしばらく SNS はできそうもないというケースなどもあり、その場合デザイン上掲載していた SNS アイコンをページ上から一旦非公開してほしいというケースもたまにあります。 その際にわざわざ調整依頼をいただくのも面倒でしょうし、実装側も最初から登録あったものだけフロント側に表示するよう実装しておけば楽ですよね。 毎回テーマに SNS のアカウント情報をいれるのも案件ごとにやるよりはプラグイン化しておいたほうが後々楽なので今回リリースしました。 何ができるの？ 管理画面で Twitter Facebook Instagram YouTube のアカウントが管理できます。 フロント側で呼び出したい場合は ssam_account(); を利用することで連想配列による各 SNS の アカウント情報の取得 ssam_view(); を利用することで連想配列による各 SNS の URL の取得が行なえます。 echo していないので取得後はご自身で使いたいように加工しましょう プラグインについて プラグインは公式ディレクトリからダウンロードできます。 Simple SNS Account Management ソースファイルはGithubにあげています。 Github:Simple SNS Account Management 良いね！って思ったら Rating にレビューもらえると嬉しいです。 またバグ報告やソースレビューなどあれば GitHub にお願いします
Nodenv のリストに無い Node のバージョンをインストールするため node-build を導入するフロー
WordPress の開発で利用する gulp を使った themrish というものを公開しているのですが、利用している各種パッケージが古かったり、すでに利用していない物があったりしたので中身をバージョンアップしました […]
WordPress の開発で利用する gulp を使った themrish というものを公開しているのですが、利用している各種パッケージが古かったり、すでに利用していない物があったりしたので中身をバージョンアップしました。 この際に Node のバージョンを現在（2021年8月26日）の推奨版である 14.17.5 に切り替えたかったんですが Node の管理をしている Nodenv では 13.2.0 までしかインストールできません。 nodenv でインストールできるバージョンを確認するには下記コマンドを nodenv install --list <img loading="lazy" decoding="async" width="402" height="346" src="https://wp.yat-net.com/wp/wp-content/uploads/2021/08/de8d6e3aa18993044c416c26ff9e521f.png" alt="nodenv でインストールできるバージョンは2021年8月26日現在12.11.1~13.2.0" class="wp-image-7745" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2021/08/de8d6e3aa18993044c416c26ff9e521f.png 402w, https://wp.yat-net.com/wp/wp-content/uploads/2021/08/de8d6e3aa18993044c416c26ff9e521f-232x200.png 232w" sizes="auto, (max-width: 402px) 100vw, 402px" /> どうするか調べたところ node-build を利用すればインストールするバージョンを追加できるのでそちらを導入したので以下メモ書きです nodenv の導入 nodenv の導入がまだの場合はまずここからやりましょう インストール git clone git://github.com/nodenv/nodenv.git ~/.nodenv nodenv にパスを通す echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.zshrc echo 'eval "$(nodenv init -)"' >> ~/.zshrc 上記の .bash_profile の部分は自分の環境似合わせる必要があります。~/.bash_profile とか ターミナルなどのシェルを再起動 exec $SHELL -l とコマンドを実行するかアプリケーションを再起動するか ここまでで nodenv が利用できるようになっているはず。確認してみましょう nodenv -v 上記コマンドはアプリケーションのバージョンを確認するコマンドです。-v というのがバージョンを確認するためのオプションで、アプリケーション名とバージョンが表記されれば無事インストールができています。 <img loading="lazy" decoding="async" width="600" height="94" src="https://wp.yat-net.com/wp/wp-content/uploads/2021/08/cb7092b83f444cb6fb9643ae771c02c5.png" alt="nodenv 1.3.1+11.5024679 のようなバージョン情報" class="wp-image-7743" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2021/08/cb7092b83f444cb6fb9643ae771c02c5.png 600w, https://wp.yat-net.com/wp/wp-content/uploads/2021/08/cb7092b83f444cb6fb9643ae771c02c5-400x63.png 400w" sizes="auto, (max-width: 600px) 100vw, 600px" /> node-build の導入 ここからが本題。node-build のインストールに Homebrew を使います brew install node-build mkdir -p "$(nodenv root)"/plugins git clone https://github.com/nodenv/node-build.git "$(nodenv root)"/plugins/node-build インストルできたらインストールできるバージョンを確認しましょう node-build --definitions <img loading="lazy" decoding="async" width="418" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2021/08/446bc4fd168ad33f4a09b8c640b258ee-418x400.png" alt="14.10.0~15.0.0以降まで" class="wp-image-7746" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2021/08/446bc4fd168ad33f4a09b8c640b258ee-418x400.png 418w, https://wp.yat-net.com/wp/wp-content/uploads/2021/08/446bc4fd168ad33f4a09b8c640b258ee-209x200.png 209w, https://wp.yat-net.com/wp/wp-content/uploads/2021/08/446bc4fd168ad33f4a09b8c640b258ee-768x734.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2021/08/446bc4fd168ad33f4a09b8c640b258ee-900x860.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2021/08/446bc4fd168ad33f4a09b8c640b258ee.png 1042w" sizes="auto, (max-width: 418px) 100vw, 418px" /> 今回は推奨版の14.17.5をインストールするので node-build 14.17.5 ~/.anyenv/envs/nodenv/versions/14.17.5 14.17.5 の部分を自分がインストールしたいバージョン番号に変更して使ってください <img loading="lazy" decoding="async" width="900" height="299" src="https://wp.yat-net.com/wp/wp-content/uploads/2021/08/fc5f3697d80e12111c421acaa481c9e8-900x299.png" alt="バージョンリストに14.17.5が表示" class="wp-image-7748" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2021/08/fc5f3697d80e12111c421acaa481c9e8-900x299.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2021/08/fc5f3697d80e12111c421acaa481c9e8-400x133.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2021/08/fc5f3697d80e12111c421acaa481c9e8-768x255.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2021/08/fc5f3697d80e12111c421acaa481c9e8.png 1280w" sizes="auto, (max-width: 900px) 100vw, 900px" /> インストール完了。＊（アスタリスク）がついているものが現在指定しているバージョンなのでこれを切り替えます。ローカルプロジェクトの方を切り替えたいので nodenv local 14.17.5 切り替わったか確認します node -v <img loading="lazy" decoding="async" width="778" height="98" src="https://wp.yat-net.com/wp/wp-content/uploads/2021/08/a0183e4eef4548d0a9e138e56f86ccee.png" alt="バージョン 14.17.5" class="wp-image-7749" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2021/08/a0183e4eef4548d0a9e138e56f86ccee.png 778w, https://wp.yat-net.com/wp/wp-content/uploads/2021/08/a0183e4eef4548d0a9e138e56f86ccee-400x50.png 400w, https://wp.yat-net.com/wp/wp-content/uploads/2021/08/a0183e4eef4548d0a9e138e56f86ccee-768x97.png 768w" sizes="auto, (max-width: 778px) 100vw, 778px" /> これでバッチリ切り替わりました！