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.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/ 今回のモデルに関しては思考プロセスが洗練され、 [...]
2024.09.20 WEBWebデザイン :not()否定擬似クラスを使ってCSSセレクタに！（否定条件）を追加しよう CSSコーディングをしていると、 一番下の行には線をつけないでください 3つ目の要素は背景画像をとってください といったように、要素の「位置」や「順番」に応じて装飾を除外するような要求を出されることがたくさんあると思います。 CSSセレクタは原則として「当てはまる条件」を連ねて要素を絞り込ん [...]
2024.09.11 WEBWebデザイン Illustratorの3D効果「3Dとマテリアル」で、立体的な文字を作ってみよう！ 過去の記事にて、Illustratorの3D効果でアイソメトリック図の作成方法をご紹介しました。 3D効果のおさらい 立方体・直方体の作り方はこちら Illustratorの3D効果で、アイソメトリック図を作ってみよう！【立方体・直方体編】 回転体の作り方はこちら Illustratorの3 [...]
2024.09.06 WEBWebデザイン 【Canvaの使い方】簡単に画像の一部を差し替え・色の変更、追加ができる！マジック加工の使い方 過去の記事「Magic Designなど新機能が続々登場！Canva2023年アップデートで追加されたおすすめの新機能10選」で、2023年のCanvaの大型アップデートで追加された新機能をご紹介しました。 今回は、その中から「マジック加工」の使い方をご紹介します。 マジック加工は、画像の一部の差 [...]
2024.09.06 WEBアクセシビリティユーザビリティ・UX・UI ウェブアクセシビリティに関連する用語を分かりやすく解説 ～達成基準編～ 前回の記事「ウェブアクセシビリティに関連する用語の解説 ～概要編～」に続き、今回は達成基準の説明に出てくる用語を解説していきます。 達成基準とは、適合レベル（達成等級）に達するために、満たす必要がある項目のことをを指します。 より詳しい達成基準の内容については以下サイトよりご確認いただけます。 ウ [...]
2024.09.04 WEBシステム開発 安全性、速度、並行性を兼ね備えた言語と、巷でうわさのRustを覗いてみる（スレッド編 その4） 前回は、スレッド間でのメッセージの受け渡しについて見ていきました。 今回は、txをクローンして複数のスレッドからメッセージを送信する方法について見ていきたいと思います。 前回の「スレッド編 その3」はこちらからご覧いただけます。 参照 https://doc.rust-lang.org/boo [...]
2024.08.27 WEBWebデザイン 【bxSlider】コールバック関数を使って2つのスライダーを連動させてみた 弊社ではトップページのメイン画像をスライダーにすることが多く、jQueryプラグインのbxSliderをよく利用しています。 最近このbxSliderのコールバック関数を勉強する機会があったので、より理解度を深めるため実際の提案でもあった2つのスライダーの連動を実装してみたいと思います。 弊社ブロ [...]
2024.08.22 WEBシステム開発 CodeIgniter4でAPIを使用して天気情報を表示する方法 APIってなに？と聞かれても、具体的に答えることができないくらいの知識しか無かったので、 自身の学習も兼ねて、今回はAPIに着目していきたいと思います。 前提 ubuntu v22.04 PHP v8.1.2 CodeIgniter v4.5.1 APIとは Application Prog [...]
2024.08.22 WEBシステム開発 【Go】jsonパッケージのMarshalとUnmarshalはなんとなくわかったが、Encode, Decodeって何？ 普段のコードでJSON関係の変換をする際にはjsonパッケージのMarshlとUnmarshalを使っているのですが、jsonパッケージの中に同じようにJSONを変換するEncoder型のメソッドEncode及びDecoder型のメソッドDecodeなるものを見つけ、いったいMarhsalとUnm [...]
