YATのblog
type: channel
description: webデザインをする上で必要な知識・情報・技術等の記述や、参考になるサイトの紹介等を掲載しています。
date: 2025-12-12T07:52:44Z
update period: hourly
update frequency: 1
update base: 2000-01-01T12:00+00:00
generator agent: https://wordpress.org/
items: Cursor のアップデートでビジュアルエディタが搭載！ Cursor Browser とは
items: Chrome 拡張機能「ZOOM hidden vjs-control-bar」を作りました
items: プロの Web デザイナーは3分という制限の中で、どれだけ訴求力の高いバナーをつくれるのか？【Adobe Express編】
items: Web サイト制作の学習で JavaScript になると途端に感じるハードルを下げるためのコツ
items: 広島県が有する離島「倉橋島」の写真を撮ってきました
items: 読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察
items: Google Fonts を WordPress で複数読み込む時に正常処理されないときの対処法
items: Laravel 開発環境を Docker で構築
items: GitHub Actions を使って WordPress のテーマをデプロイ（アップロード）する
items: WordPress の管理画面でシンプルに SNS アカウントを管理するプラグイン「Simple SNS Account Management」を作りました

Cursor のアップデートでビジュアルエディタが搭載！ Cursor Browser とは
type: item
creator: YAT
date: 2025-12-12T07:35:35Z
subject: エディタ
subject: Cursor
description: AI 機能を搭載したエディタ Cursor 多くの人がすでに利用していることと思いますが、バージョン2.2で Figma のようなエディット機能が利用できるビジュアルエディタが搭載されるとのこと。 Cursor 公式サイ […]
encoded: AI 機能を搭載したエディタ Cursor 多くの人がすでに利用していることと思いますが、バージョン2.2で Figma のようなエディット機能が利用できるビジュアルエディタが搭載されるとのこと。 Cursor 公式サイトで2025年12月11日に公開された記事によると、ドラッグアンドドロップで要素を並び替えたりコンポーネントやプロパティを直接確認したり、クリックした要素を編集して内容を書き換えたりと視覚的に編集ができるようになるとのこと。サイトには動画が貼り付けられており、実際の使用感を確認できるのですが、見ている感じエディタというよりはプロトタイピングツールという印象が強いですね。 Adobe の製品に Dreamweaver というオーサリングソフトがありますが、エディタという観点でいくとこれに近いのかもしれません。X を見ていたらたにぐちまことさんが同じ感想を仰っていました。 Cursorのブラウザが、ビジュアル編集をサポート。こ・・これは、Cursorは現代のDreamweaverになるのかもしれない。… — たにぐち まこと／学ぶ。をちゃんと (@seltzer) December 12, 2025 そう、僕もこれを感じたんですよね。 鹿野 壮さんはすでに触ってますね。 CursorのVisual Editor（ビジュアルエディター）を早速使ってみたら、エグかった 1. Figma UIでデザインを編集。paddingの調整・グラデーションの変更など 2. Applyを押す 3. コードがそのまま実現 … pic.twitter.com/VOUsOx9wAK — 鹿野 壮 Takeshi Kano (@tonkotsuboy_com) December 12, 2025 なお、ビジュアルエディターのUIはどうみてもFigmaです。ありがとうございます 僕も触ったんですが、全く同じこと感じました。 <img fetchpriority="high" decoding="async" width="490" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2025/12/972d93f5705dae5791d5d3116199c322-490x400.png" alt="" class="wp-image-8231" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2025/12/972d93f5705dae5791d5d3116199c322-490x400.png 490w, https://wp.yat-net.com/wp/wp-content/uploads/2025/12/972d93f5705dae5791d5d3116199c322-245x200.png 245w, https://wp.yat-net.com/wp/wp-content/uploads/2025/12/972d93f5705dae5791d5d3116199c322-768x627.png 768w, https://wp.yat-net.com/wp/wp-content/uploads/2025/12/972d93f5705dae5791d5d3116199c322-900x734.png 900w, https://wp.yat-net.com/wp/wp-content/uploads/2025/12/972d93f5705dae5791d5d3116199c322.png 1054w" sizes="(max-width: 490px) 100vw, 490px" /> この辺とか特に感じますよね デザインモードだけでなく、CSS を確認することもできます。 <img decoding="async" width="429" height="400" src="https://wp.yat-net.com/wp/wp-content/uploads/2025/12/7a03754a8caa40203ecf60361407b9ab-429x400.png" alt="" class="wp-image-8233" srcset="https://wp.yat-net.com/wp/wp-content/uploads/2025/12/7a03754a8caa40203ecf60361407b9ab-429x400.png 429w, https://wp.yat-net.com/wp/wp-content/uploads/2025/12/7a03754a8caa40203ecf6036140…

Chrome 拡張機能「ZOOM hidden vjs-control-bar」を作りました
type: item
creator: YAT
date: 2024-02-02T03:30:24Z
subject: JavaScript
subject: Chrome
description: ZOOM でレコーディングをしたものを視聴する時に表示される動画のコントローラ。再生位置を変更したり停止したりと便利ですが、動画を停止するとコントローラーが必ず表示されるため、重なっている内容が見にくいという相談をいただ […]
encoded: ZOOM でレコーディングをしたものを視聴する時に表示される動画のコントローラ。再生位置を変更したり停止したりと便利ですが、動画を停止するとコントローラーが必ず表示されるため、重なっている内容が見にくいという相談をいただきました。 <img loading="lazy" 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="auto, (max-width: 900px) 100vw, 900px" /> 動画をフルウィンドウにすればコントローラは動画域から外れるので見えるようになりますが、アプリにメモを取るなどが面倒だなと思い、Chrome の拡張機能を作ってみました。 ZOOM hidden vjs-control-bar： Chrome ウェブストア ソースコードは GitHub にあげています 開発手順について まずは実装できるかの検証を行いました 動画のコントロールバーを特定できる ID・クラスが存在しているか確認 上記が確認できたら、JavaScript のセレクタを用いて要素の表示・非表示のコードを書いてみる Chrome 拡張機能の仕様に則って開発 テスト 実際に使ってもらってフィードバックをもらう 公開手続き 動画のコントロールバーを特定できる ID・クラスが存在しているか確認 Chrome 検証ツールのインスペクタを使って確認すれば良いのでこれは簡単にできます <img loading="lazy" 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="auto, (max-width: 900px) 100vw, 900px" /> JavaScript のセレクタを用いて要素の表示・非表示のコードを書いてみる ここではいきなりエディタを使うのではなく、Chrome 検証ツールの Console にコードを書いて実行してみます。 <img loading="lazy" decoding="async" width="900" height="221" src="https://wp.yat-net.com/wp/wp-content/up…

プロの Web デザイナーは3分という制限の中で、どれだけ訴求力の高いバナーをつくれるのか？【Adobe Express編】
type: item
creator: YAT
date: 2023-12-26T01:43:24Z
subject: デザイン
subject: AdobeExpress
description: 今回の記事はアドビ社の PR 企画「みんなのデザインチャレンジ」に参加して書いています。 記事のテーマを考える中で、「色々な制限・制約の中で、プロのデザイナーは一体どれだけのものが作れるのか？」 という話になり、ちょっと […]
encoded: 今回の記事はアドビ社の 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" dec…

Web サイト制作の学習で JavaScript になると途端に感じるハードルを下げるためのコツ
type: item
creator: YAT
date: 2023-11-01T02:18:54Z
subject: JavaScript
subject: 学習
description: ハロウィンというイベントにブログを書いています、こんにちは。 ここ数年 Web サイト制作の学習を始めた方が一気に増えた感じがありますね。HTML や CSS などエディタに簡単なコードを書くだけでブラウザに文字や画像が […]
encoded: ハロウィンというイベントにブログを書いています、こんにちは。 ここ数年 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 は大文字になっていますよね？ この書き方はキャメルケースという言い方をする書き方で、ラクダのコブのように大きくなっているところ小さくなっているところが続いていることからこの名前がついています。 由来を知っていたほうが覚えやすいのでこれはメモして…

広島県が有する離島「倉橋島」の写真を撮ってきました
type: item
creator: YAT
date: 2023-08-20T23:20:09Z
subject: 写真
subject: 倉橋島
subject: 室尾
subject: 広島県
description: 夏休みを利用して祖父母の田舎にあたる倉橋島へ行ってきました。 この島に住んでいる親族は90代がほとんどで、観光地を除けば幼少期に往訪していた頃と比べると営業しているお店が減っていますし、屋敷のような家も今では空き家になっ […]
encoded: 夏休みを利用して祖父母の田舎にあたる倉橋島へ行ってきました。 この島に住んでいる親族は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-cont…

読み仮名を表現する ruby タグのマークアップやスタイリングとアクセシビリティについての考察
type: item
creator: YAT
date: 2023-08-11T01:03:44Z
subject: CSS3
subject: HTML
subject: ルビ
description: 日本語には漢字という難しい文字があり、未履修の漢字が含まれた文章を読むことは我々日本人にとってもなかなか困難なもの。 そういった人たちにもコンテンツを楽しんでもらえるようルビ（よみがな）を振ることは良いアプローチですし、 […]
encoded: 日本語には漢字という難しい文字があり、未履修の漢字が含まれた文章を読むことは我々日本人にとってもなかなか困難なもの。 そういった人たちにもコンテンツを楽しんでもらえるようルビ（よみがな）を振ることは良いアプローチですし、今は殆どのブラウザがルビに対応しているため比較的簡単に実装できます。 例えば著者夏目漱石のぼっちゃんの一文をルビを振ってみると下記の様な見た目に 親譲 おやゆず りの 無鉄砲 むてっぽう で 子供 こども の 時 とき から 損 そん ばかりしている。 これを担保するために必要なソースコードは下記 親譲 おやゆず りの 無鉄砲 むてっぽう で 子供 こども の 時 とき から 損 そん ばかりしている。 もしも書籍一冊分のルビを振る必要があれなら非常に労力の高いものになりますが、タグの構造としてはそれほど難しくなく、現状は下記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/…

Google Fonts を WordPress で複数読み込む時に正常処理されないときの対処法
type: item
creator: YAT
date: 2023-07-11T06:50:11Z
subject: WordPress
subject: Webフォント
description: どのタイミングでかはわからないのですが、いつのまにか運用しているサイトで指定している Web フォントが正常に読み込めていないことに気づきました。 デザインする際に自分の端末にフォントをダウンロードしてしまうので、実装時 […]
encoded: どのタイミングでかはわからないのですが、いつのまにか運用しているサイトで指定している 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 で構築
type: item
creator: YAT
date: 2023-05-01T09:36:09Z
subject: Docker
subject: Laravel
subject: PHP
subject: 開発環境
description: ブログを書くのがかなり久しぶりになります。 最近 Laravel を触ってまして、Docker で環境構築して使うことが増えてきたので備忘録として書いておこうと思うので、これから触ってみたいという方の参考になれば嬉しいで […]
encoded: ブログを書くのがかなり久しぶりになります。 最近 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/ww…

GitHub Actions を使って WordPress のテーマをデプロイ（アップロード）する
type: item
creator: YAT
date: 2021-10-27T07:08:51Z
subject: WordPress
subject: GitHub
description: FTP を使ったアップロードが面倒なのでなるべく Git と連携したデプロイをしたい。そうなると CI のサービスが割と主流なんですが、GitHub Actions を使うともっとお手頃にローカルからサーバーへデータ転送 […]
encoded: 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:…

WordPress の管理画面でシンプルに SNS アカウントを管理するプラグイン「Simple SNS Account Management」を作りました
type: item
creator: YAT
date: 2021-10-04T05:40:24Z
subject: WordPress
subject: プラグイン
description: 単純に SNS のアカウントを WordPress の管理画面で管理したいことがあるのでプラグインにして公開しました。 どんな時に使うの？ 案件で SNS アカウントを用意するのでデザインに入れておいてくださいと言われた […]
encoded: 単純に 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 にお願いします