2024.08.21 WEBシステム開発 TypeScriptの型定義がない外部ライブラリとmonorepoを組み合わせた時にTypeScriptのコンパイルエラーが発生して困ったこと 当社では CSS スタイリングではCSS Modulesを、日付選択（Datepicker）のライブラリにReact DayPickerを使用しています。 React DaypickerではCSSの型宣言はされているのですが、CSS Modulesの型定義ファイルがないため独自にCSSのスタイルを [...]
2024.08.21 WEBシステム開発 Vue3の非同期コンポーネントを使ってみる 皆様、いかがお過ごしでしょうか。 今回はVue3の非同期コンポーネントがどんなものか使いながら理解していきたいと思います。 インストール 筆者の環境は以下の通りです。 $ node -v v22.5.1 $ npm -v 10.8.2 Viteで開発環境を構築していきます。ESLintと [...]
2024.08.21 WEBWebデザイン Adobe間の素材の共有が簡単に！CCライブラリの使い方 Adobe製品を横断して使用しながらデザインを作成しているとき、このようなことはありませんか？ 以前Illustratorで作成した図を、XDのデザインカンプに配置したいが、どこに格納したのか忘れてしまった Photoshopで作成し、XDのデザインカンプに配置している図に変更が入ってしまっ [...]
2024.08.07 WEBアクセシビリティ ウェブアクセシビリティに関連する用語の解説 ～概要編～ 令和3年に障がい者差別解消法が改正されたために、ウェブアクセシビリティへの関心が高まっており、webサイトのリニューアルを検討されている方も多いと思います。そんな中で、ウェブアクセシビリティについて理解を深めようとしても、専門的な用語が多く、なかなか前に進めないことも少なくはないかと思います。（実 [...]
2024.07.31 WEBWebデザイン :nth-child()擬似クラスで指定した順番・範囲の要素を取得する CSSコーディングを行っていると、要素の位置に依存したコードを書く機会は少なくないと思います。 一番下の行だけ下線をつけたい 偶数の行は背景色を〇〇にしたい 上からn番目の要素だけ△△色にしたい といった、特定の位置に配置される要素に対して特別なスタイルを適用することになりますが、HTML構 [...]
2024.07.30 WEBWebデザイン 【CSS】display:none に対してアニメーションを付けてみた CSSを熟知している皆さんにとって、CSSでアニメーションを作成することは簡単なことかもしれません。 しかし、私のようなまだまだ経験の浅いコーダーにとっては、慣れない作業に感じることがあります。 そこで、最近私がコーディングしたアニメーションについて、備忘録として記録しておこうと思います。 実装概 [...]
2024.07.24 WEBWebデザイン 【Canvaの使い方】フリーハンドで簡単に絵が描ける！お絵描き機能の使い方 Canvaは、豊富なテンプレートと直感的な操作で、誰でも簡単にバナーやチラシなどを作成できるデザインツールです。 お絵描き機能はCanvaで使える機能の1つで、画面上にフリーハンドでイラストや図形を描くことができます。 以前からお絵描き機能はありましたが、2023年のアップデートで描画アシスト機能 [...]
2024.07.24 WEBシステム開発 安全性、速度、並行性を兼ね備えた言語と、巷でうわさのRustを覗いてみる（スレッド編 その3） みなさまお久しぶりです。 今回も「The Rust Programming Language」を読みながら、 スレッドについて見ていきたいと思います。 前回の「スレッド編 その2」はこちらからご覧いただけます。 参照 https://doc.rust-lang.org/book/ https: [...]
2024.07.12 WEBシステム開発 CodeIgniter4のコアクラスを拡張して使ってみた！（View編） CodeIgniter4には便利なコアクラスがいくつか導入されています。 ライブラリリファレンス コアクラスを使うことで、外部ライブラリを導入したときのバージョン問題や親和性がない等のリスクを減らせるのがコアクラスを使うメリットかと思います。 逆にコアクラスに実装されていないものに関しては、デフォ [...]
2024.07.12 WEBシステム開発 CodeIgniter4のコアクラスを拡張して使ってみた！（Validation編） CodeIgniter4には便利なコアクラスがいくつか導入されています。 ライブラリリファレンス コアクラスを使うことで、外部ライブラリを導入したときのバージョン問題や親和性がない等のリスクを減らせるのがコアクラスを使うメリットかと思います。 逆にコアクラスに実装されていないものに関しては、デフォ [...]
2024.07.02 WEBWebデザイン 【Canvaの使い方】チラシやポスター、プレゼン資料のデザインを自動生成！マジックデザイン機能の使い方 プレゼン資料やポスター、チラシなどのデザイン作成に苦手意識はありませんか？ そんな方に、今回ご紹介するCanvaの「マジックデザイン機能」がおすすめです。 「マジックデザイン機能」は画像やテキストからAIが自動的にデザインを生成してくれる機能で、2023年のアップデートにて実装されました。この記事 [...]
2024.07.02 WEBWebデザイン 【流行デザイン】XD・Photoshopでニューモーフィズムデザインを作ってみよう！ 2020年頃から、一部のwebデザインで取り入れられている「ニューモーフィズム（Neumorphism）」。 ニューモーフィズムは色数が少なく、シャドウで要素の境界を表現するため、洗練された近代的なデザインを作り上げることができます。 今回は、そんなニューモーフィズムを、Adobe XD・Phot [...]
2024.06.28 WEBシステム開発 .envファイルを使わずにCodeIgniter4で環境変数を設定する方法 業務で、CodeIgniter4を使用して環境変数を設定する際に、.envファイルを使わずに環境変数を管理する方法に挑戦しました。 自身の学習も兼ねて、まとめてみました。 前提 ubuntu v22.04 PHP v8.1.2 CodeIgniter v4.5.1 Twig v3.10.3 環 [...]
2024.06.27 WEBサイト構築・リニューアル 【中小企業】製造業のコーポレートサイトで参考にしたいコンテンツを紹介 コーポレートサイトを通して、自社の魅力を効果的に伝えたいけど、どんなコンテンツを作ればいいのか分からない。一般的にどんなコンテンツがあるのか知りたい。このようなお悩みを抱える方も少なくはないと思います。 今回はそんな方の参考となるように、「中小企業の製造業」を対象としてコーポレートサイトのコンテン [...]
2024.06.27 WEBアクセシビリティ ウェブアクセシビリティに配慮した画像の代替テキスト（alt属性）の書き方を紹介！ webアクセシビリティの世界標準規程である「WCAG」や日本規格「JIS X 8341-3」では、webサイトを閲覧するユーザーに年齢や環境、身体的負担などのハンディがあっても、等しく情報が取得できるよう、基準を設定しています。 その基準の1つに「ロゴ・イラスト・グラフ・写真などの画像に、その画像 [...]
2024.06.26 WEBWebデザイン 【CSS】CSSで画像をクリッピング！clip-pathの使い方を解説！ コーディングに要求されるハードルが年々上がってきていますが、その一つにデザインの複雑化が挙げられます。 単純な四角形だけではなく斜め線や三角形、正円や角丸など、様々な図形を使用したデザインが、近年では見られるようになりました。 画像で書き出すと何かと融通の利かない図形ですが、CSSで切り抜いてしま [...]
2024.06.26 WEBシステム開発 【Go】最近のリリースで追加された新しい機能について調べてみた（min関数,max関数、clear関数、rangeを使ったforループの新機能） 以前記事にした機能の他にも最近のリリースで実装された新しい機能があるため、そちらについても調べてみました。 以前の記事 Go1.21で追加された「slicesパッケージ」とは？実際にパッケージ内の関数を使うコードを書いてみた。 Go1.21で追加された「mapsパッケージ」とは？実際にパッケー [...]
