2025.02.12 WEBWebデザイン コーディングやプログラミングのネーミングに便利！codicの使い方 コーディングをするとき、クラス名やメソッド名などの命名に悩む方は多いと思います。 英語で命名する場合がほとんどだと思いますが、筆者も毎回英語を調べてコーディングにあてはめる作業に結構時間を使ってしまいます。 今回はそんな命名に役立つサービス「codic」をご紹介します。 codicとは codic [...]
2025.02.12 WEBシステム開発 2024年末にアルファ版が発表されたヘッドレス UI ライブラリ Base UI を触ってみる Base UIは、Radix UI, Material UI, Floating UI の作成者によるスタイルなしの React コンポーネントライブラリです。 特徴として以下 3点をあげています。 Headless Accessible Composable 参照：About Base U [...]
2025.02.12 WEBアクセシビリティ ウェブアクセシビリティを理解するために、参考になった資料をご紹介します！ 突然ですが、「ウェブアクセシビリティ」について勉強しようと思っているけれど、難しそうだからあと回しになっている…ということはありませんか？ 私も『ウェブアクセシビリティ難しそう…』という印象から、勉強することを避けていたうちの一人でした。しかし、社内スタッフとの話し合いや、とっても分かりやすいさま [...]
2025.01.20 WEBWebデザイン webpよりもさらに軽量？新しい画像フォーマット「AVIF」を使ってみよう！ webサイトを制作するにあたって画像ファイルの圧縮形式の主流が「webp（ウェッピー）」になってしばらく立ちました。 全てのモダンブラウザがサポートするようになってからは弊社でも積極的に利用しており、当ブログでも複数回にわたって紹介して参りました。 次世代画像フォーマット「WebP」に変換して、 [...]
2025.01.20 WEBアクセス解析 【Googleアナリティクス4】「お問い合わせの送信」をキーイベントに設定し、webサイトの改善に役立てよう！～計測・活用編～ 前回は、キーイベントの設定方法について解説しました。 今回は、取得したキーイベントのデータを確認する方法を紹介します。 今回紹介するデータの確認方法は以下の5種類です。 過去30分以内に発生したキーイベントを確認する キーイベントの発生数を確認する キーイベントを発生させたユーザーの参照元（流入 [...]
2025.01.16 WEBアクセス解析 【Googleアナリティクス4】「お問い合わせの送信」をキーイベントに設定し、webサイトの改善に役立てよう！～設定編～ 突然ですが、Googleアナリティクス4（以下、GA4）で「キーイベント」を設定していますか？ お問い合わせフォームや資料請求フォームを運用しているようであれば、webサイトの目標達成率が分かるキーイベントの計測結果はとても大事なデータとなります。 今回は、GA4のキーイベントとはなにか？から設定 [...]
2025.01.16 WEBシステム開発 PHP7.4にアップグレードしたらTwigのエラーが大量発生！その原因と対処方法について 弊社では、PHPフレームワーク「CodeIgniter」とテンプレートエンジン「Twig」を活用し、アプリケーション開発を行うことが多々あります。 過去にCodeIgniterとTwigの連携方法を紹介しています。 CodeIgniter3にTwigを連携して使う CodeIgniter4にテン [...]
2024.12.26 WEBシステム開発 Go言語の標準ライブラリstringsパッケージについて調べてみた ～その1～ 今回は、標準ライブラリについて理解を深めようと思いstringsパッケージについて調べてみました。 stringsパッケージは、文字列操作を簡単かつ効率的に行うための豊富な機能を提供しているようです。文字列を操作する機会は多いと思うので、良い勉強になりそうです。 stringsパッケージ内の機能と [...]
2024.12.23 WEBWebデザイン 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【後編・書き出しまで】 前編では、Photoshopのタイムライン機能を使って、ツリー上のスターの飾りを拡大・縮小する方法をご紹介しました。 APNG・WebPアニメーションについても下記ブログで解説しています。 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【前編】 続いて中編では、 [...]
2024.12.23 WEBシステム開発 Google Chromeの拡張機能を作ってみよう！【入門編】 日本においてトップシェアを誇るブラウザと言えば Chrome ですが、その Chrome の拡張機能を皆様使っていますでしょうか。 私もいくつかインストールして活用しているのですが、時々こういう拡張機能があったらなぁと思うことがあります。 でもなかなか、自分のニーズに合っていなかったり、日本語に対 [...]
2024.12.18 WEBアクセス解析 【Googleアナリティクス4】webサイトへの海外からのアクセス状況や検索キーワードを調べる方法 突然ですが、自サイトに海外からどのくらいのアクセスがあるのか知りたくはありませんか？ Google アナリティクス 4（以下GA4）では、国内だけでなく、海外からのアクセス状況も調べることができます。 海外に拠点があったり、これから海外へ市場を展開していこうと考えていたりする方は、今回ご紹介する記 [...]
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の世代交代に対応するのは大変です。。 そこで今回は、端末の世代交代に対応するための方法として、クロスブラウザテスト用のサービスを調査してみました。 クロスブラウザテスト用サービスについて ざっくり調べてみた感 [...]
