2024年7月から独立してフリーランスとなり初月を無事完了できました。
毎日必死で体感としては一瞬で過ぎ去ったようにも思えます。
新しい実装、業務等担当させていただき、新たにできるようになったことをまとめようと思います。
新たに身につけたスキル
YoutubeAPIを使用し、サイトに情報を反映させる
YoutubeUIのサイト構築をご依頼いただいた際、YoutubeAPIを利用し、動画情報を動的に取得してフロントに表示するという実装をいたしました。
背景
WordPressの管理運用はクライアント様自ら行うのですが、投稿部分に表示する情報として、【動画タイトル】【サムネ】【Youtubeリンク】さらに【再生時間】【再生回数】という項目があり、特に【再生回数】に関しては日々変動していくものなので、通常のカスタムフィールドで数値を入力して、都度数値を更新していくのはあまりにも大変。。。ということもあり、APIを利用した動的な情報取得を提案させていただき、実装をいたしました。
学び
初めてのAPIということもありAPIキーの管理、リクエスト上限など、通常のコーディングでは普段無いような考慮する点が多くかなり調べつつ実装いたしました。APIリクエスト回数を制限したり、APIの最適化の部分はまだまだ課題に感じました。今後もYoutube以外にもさまざまなAPIを利用してサイト構築をする機会があると思いますので、引き続き勉強していく予定でございます。
今回1番参考にしたサイトは下記です。
https://wordpress-mag.com/youtube-data-api/
CSS変数・コンテナクエリ・擬似クラスhas()を使用したコーディング
改修案件ですでにある程度のHTML構造、CSSが当たっていたサイトの改修をする際に、新たにScss環境を構築するのではなく、元の環境で作業するためにpureCSSで作業する際に今回初めて採用いたしました。
背景
今までは小規模のものであってもSassを採用しFLOCSSでコーディングをしていましたが、単ページのLPや小規模サイトであればむしろファイル作成・分割の方が時間がかかるということもあり、現在のCSSはCSS変数や、コンテナクエリ、has・is等の強力な擬似クラスも使用できるので、pureCSSでコーディングしました。
学び
コンテナクエリとhas()が特に便利すぎて感動しました。。。
今回サイドバー付きのサイトのため、サイドバーのコンテンツのpadding-inlineで使用しましたが、ブレイクポイントで管理するのは少し難しくかなり細かくブレイクポイントを切らないといけない実装でしたが、コンテナクエリでスムーズなレスポンシブを対応することができました。
has()はドロワーメニューの開閉状態のクラス管理で使用しました。スマホサイズ時にドロワーとサイドバー開閉ボタンがある実装のため、それぞれのボタンの押しわけで管理しました。これは通常のJavaScriptでも問題無い気はしますが、これによりJavaScriptの記述量も若干ですが減らすことができコードがシンプルになりました。
まだまだ便利な活用方法があるので今後の案件で活かしていきたいと思います。
参考にしたブログは下記です。
https://coliss.com/articles/build-websites/operation/css/css-has-pseudo-class.html
最近は暇があればZennやブログ記事などを見て主にCSSプロパティやViteについて調べています。
取り入れられそうなところは無理せず取り入れていきます。
Zennで:has()に関する技術ブログを執筆いたしました。ぜひご覧くださいませ。
【CSS】:has()セレクタ×WordPress実践的な具体例
8月制作実績
- LP 4件
- WordPress 2件
- 改修 1件
さいごに
コーディング・ WordPress構築のお仕事をお受けしております。JavaScriptで動きを加えたサイト制作が得意です。
制作実績はこちらからご覧いただけます。お仕事の依頼は当サイトのコンタクトフォームもしくは各種SNSよりお受けしておりますので、ぜひお気軽にお問い合わせください。
