2024.12.18 WEBシステム開発 WebSocketライブラリを使用して、シンプルなリアルタイム通知アプリを作成する方法 ふと、リアルタイム通信ってどうやって行っているのだろうと気になってしまいました。 リアルタイム通信の仕組みを理解するために、今回はWebSocketライブラリを使用して簡単なアプリケーションを作成してみます。 前提 Ubuntu 22.04 PHP 8.1.2 CodeIgniter 4.5.1 [...]
2024.12.17 WEBアクセス解析 【Googleアナリティクス4】リンク切れ（404 Not Foundページ）を特定し、訪問経路を調査する方法 リンク切れ（404 Not Found）の状態が続くことで、ユーザビリティの低下やクローラー巡回の妨げが発生し、SEOに悪影響を及ぼす可能性があります。そうならないためにも、定期的にリンク切れがないかチェックをする必要があります。 Googleアナリティクス4（以下GA4）では、リンク切れになって [...]
2024.12.12 WEBシステム開発 “開発者の”npmパッケージが原因で問題を解決できない！ node_modulesのライブラリにパッチを当てる方法【最終手段】 今年も残すところあとひと月。気がつけば師も走る12月になりました。歳を重ねるごとに1年が早く感じられるのは不思議なものです。今年の汚れは今年のうちに、辛かった思い出も2024年に吐き出しきって気持ちよく2025年を迎えたいものです。 今回はnpmパッケージにパッチを当てる方法についてご紹介します。 [...]
2024.12.04 WEBWebデザイン 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【中編】 前回のおさらい 前編では、Photoshopのタイムライン機能を使って、ツリー上のスターの飾りを拡大・縮小する方法をご紹介しました。 APNG・WebPアニメーションについても下記ブログで解説しています。 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【前編】 前回 [...]
2024.11.29 WEBWebデザイン Adobe XDのコンポーネント機能とは？正しく理解して作業効率をあげよう みなさんは、Adobe XDの「コンポーネント機能」をご存じですか？ 「知ってはいるけど、うまく使いこなせない…」という方もいらっしゃるのではないでしょうか。 今回は、コンポーネント機能のご紹介と、正しい使い方について、伝授いたします。 コンポーネント機能とは デザインやワイヤーフレー [...]
2024.11.25 WEBシステム開発 クロスブラウザテストサービスを調査して実際に使ってみた 最新の端末やOSでの検証が求められるこの業界。 近年も勢いが衰えないスパンの早い端末やOSの世代交代に対応するのは大変です。。 そこで今回は、端末の世代交代に対応するための方法として、クロスブラウザテスト用のサービスを調査してみました。 クロスブラウザテスト用サービスについて ざっくり調べてみた感 [...]
2024.11.25 WEBWebデザイン :nth-child()擬似クラスをもっと便利に！ 新構文、”of <selector>”を使って選択要素をフィルタリングしよう 先日、:nth-child()擬似クラスについて下記の記事を投稿しました。 :nth-child()擬似クラスで指定した順番・範囲の要素を取得する :nth-child()擬似クラスの基本的な使い方はこちらを参考にしていただければ幸いですが、もう一つだけお伝えしたい機能がありましたので筆を執りまし [...]
2024.11.19 WEBシステム開発 CodeIgniter4でAPIを使用してランダムユーザーを生成する方法 今回は前回の天気情報取得に引き続き、APIを使用して簡単なアプリケーションを作成してみます。 今回のテーマは「ランダムユーザー生成」です。Random User Generatorを使って、ランダムなユーザーのプロフィールを取得し、webページ上に表示する仕組みを実装してみます。 前提 Ubun [...]
2024.11.19 WEBWebデザイン 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【前編】 前回、Photoshopを使って画像の中に動画を埋め込み、mp4形式で書き出す方法をご紹介しました。 【Photoshop】画像の中に動画を埋め込んで書き出す方法（モックアップ動画の作成方法） あれからアニメーションが面白くなってきたので、今回はPhotoshopを使ってアニメーションを作成し、A [...]
2024.11.12 WEBシステム開発 ソフトウェアアーキテクチャメトリクスを読む（その1） 今回から、積み本になっていたオライリーの「ソフトウェアアーキテクチャメトリクス」を読んでいきたいと思います。 定義と計測 「Lean とDevOps の科学」のソフトウェアデリバリーに対する、メンタルモデルから4つのキーメトリクスが生まれた。 このメンタルモデルが、この本の土台となるらしい。 デプ [...]
2024.11.06 WEBWebデザイン 【jQuery】ページ内のどのコンテンツにいるのか分かるエレベーターメニューを実装してみた 最近のwebサイトではエレベーターメニューをよく見るようになりました。 LPなど長いページでの使用や、沿革ページで年ごとに区分するなど、使い方は様々です。 今回はjQueryを使って、エレベーターメニューを実装してみたいと思います。 エレベーターメニューの仕様 最初に、エレベーターメニューの仕様に [...]
2024.10.22 WEBシステム開発 【Go】ベンチマーク機能を使って高速でメモリ使用量の少ないプログラムを書こう 先日、メモリ使用量をなるべく抑えたい処理を実装するにあたってGoのベンチマーク機能を使用しました。 今回はそのベンチマーク機能について記事を書いていこうと思います。 ベンチマークのコードの書き方 実際にベンチマーク機能で使うコードを書いてみます。 go func BenchmarkExampl [...]
2024.10.08 WEBシステム開発 Vitestでブラウザテストができる!? Browser Modeを試してみた 久々に Vitest のドキュメントを漁ったら experimental 段階ですが新しい機能が追加されていました。 昨今のフロントエンド界隈のエコシステムが更新されるスピードは早いですね。 参照Browser Mode | Guide | Vitest 今回は Vitest の実験的（expe [...]
2024.10.08 WEBシステム開発 Vue3でjQueryのdatepickerを使いたい！実装手順と注意点を解説します。 皆様、ご無沙汰しております。 今回は、先日Vue3とjQueryのDatepickerを組み合わせて実装する機会があったので、その方法と、つまずいたポイントおよび解決策についてご紹介したいと思います。 要件 日付の入力欄が複数個欲しい 入力欄の個数は任意で増減させることができる それぞれの入力欄 [...]
2024.10.02 WEBアクセシビリティ 【ウェブアクセシビリティ】代替テキスト（alt属性）をチェックする方法をご紹介！ webサイトの更新やアクセシビリティチェックの際、画像の代替テキスト（alt属性）が正しく設定されているか確認することが重要です。 どのような文言が設定されているか、また代替テキスト自体が設定されているかを、ブラウザで確認する方法をご紹介します。 代替テキスト（alt属性）については下記ページで詳 [...]
2024.09.27 WEBWebデザイン 【Photoshop】画像の中に動画を埋め込んで書き出す方法（モックアップ動画の作成方法） 今回は、Photoshopを使って画像の中に動画を埋め込み、mp4形式で書き出す方法をご紹介します。 なんと、Photoshopは動画編集もできたのです…。需要はニッチかもしれませんが、下記のようなPCモックアップのGIF画像を業務で作成することがあったため、備忘録として残しておこうと思います。P [...]
2024.09.27 WEBシステム開発 話題の『ChatGPT o1』をコーディングに使ってみた（ChatGPT 4oとの比較） 昨今ではもう世間に定着してきたChatGPTですが、2024年9月12日に新しいAIモデルの『ChatGPT o1』がリリースされました。 https://openai.com/index/introducing-openai-o1-preview/ 今回のモデルに関しては思考プロセスが洗練され、 [...]
