2024-01-01から1年間の記事一覧

【フロントエンド初心者向け】microCMSを使ってお知らせ一覧を作ってみた!

こんにちは、ユアサです。 先日初めてmicroCMSを触り、APIで内容を取得してお知らせ記事を作成しました。今回の記事ではその自習の内容の応用として、管理画面でお知らせ記事を作成した後、その内容を一覧表示するページを作成していこうと思います。 今回は…

【普段はAdobeアプリがメインだけどFigmaも興味があるデザイナー向け】最近のFigmaのアプデ内容をチェック

こんにちは、ハヤマです。 突然ですが、私は普段、Adobeのアプリをメインにデザインワークを行っていて、傍でFigmaについて定期的に学習を進めています。 ただここ数ヶ月は、あまりFigmaの最新情報をチェックできず…。 Figmaは定期的なアップデートを重ねて…

CSSだけで行う、子要素の件数に応じたレイアウトの変更

こんにちは、ナカムラです。 今回はCSSだけで行う子要素の件数判定の方法について書きたいと思います。 グリッドを使った一覧などは子要素の件数が変わっても自動的に折り返して行が増えます。 通常はこのままで十分ですが「件数が少ない時は列数を変更した…

第8回 InfiniStudy 静岡中部のITエンジニア勉強会に参加しました!

こんにちは!ドイです。 2024年11月29日に、『InfiniCloud 株式会社』様が開催するエンジニア勉強会に、弊社土居(私)が登壇する機会をいただきました。 勉強会の内容について書いていきたいと思います。 2024年7月26日の勉強会には弊社小林が登壇いたしま…

AWS Transfer Familyで簡単!サーバーレスなCSVバッチ処理

こんにちは、コバヤシです。 とある案件で重くなりそうなCSVのバッチ処理があり、稼働中のサーバーに負荷をかけないように、どうにかならないかと試行錯誤してみました。 AWS Transfer Family、Amazon S3とAWS Lambdaを使う方法を試してみたので、今回はその…

【フロントエンド向け】コーディングや動作確認で便利なツール・サイト紹介

こんにちは、ユアサです。 今回は自分が業務内や自習する際によく使っているフロントエンドの便利なツール・サイトなどについて紹介しようかと思います。 (そういえばこういったものは書いたことがなかったなぁ・・・と思い書くに至りました) 「そんなの知…

Photoshopの削除ツールが進化!新機能「不要な要素の削除」

こんにちは、ハヤマです。 今回は、Photoshopの新機能「不要な要素の削除」について紹介したいと思います。 「不要な要素の削除」とは 2024年10月リリース(バージョン 26.0)から使用できるようになった削除ツールの新機能で、 画像の背景にある不要な電線…

最近行ったパフォーマンス改善のまとめ

こんにちは、ナカムラです。 フロントエンドの仕事の中でパフォーマンスの改善というのは常に求められるものになります。 (PageSpeed Insightsによる計測を中心に確認しています) 読み込むファイルの容量を小さくする、というのも大切なことですが、コーデ…

IPv4 over IPv6技術とはなんだろう?

こんにちは!ドイです。 前回の記事では、IPv4、IPv6を比較した上で、 IPv6を利用した場合、ネットの速度は速くなるのか?という点について考えました。 tech.arms-soft.co.jp 記事の中で、IPv4 over IPv6技術について触れるという話だったので、今回はIPv4 …

tblsで始める楽々データベース設計書管理

こんにちは、コバヤシです。 弊社では、データベースのドキュメント作成にどのツールを使うべきか試行錯誤してきました。エクセルやGoogleスプレッドシートで作成してみたり、Figmaで描いてみたこともあります。しかし、どれも更新が手間で、更新を忘れてし…

インタラクティブな動作を簡単に実装!超軽量のJSフレームワーク「Alpine.js」を使ってみよう

こんにちは、ユアサです。 今回は、Vue.jsよりも軽量で簡単に実装できるAlpine.jsを使ってみます。 Alpine.jsについて Vue.jsに比べかなり軽量なJSフレームワークです。HTMLタグに直接記述して動的な動きを付与できる、誰でも簡単に触れるフレームワークとな…

カラーパレットジェネレーター「Adobe Color」で配色を楽しもう

こんにちは、ハヤマです。 今回は、カラーパレットジェネレーター「Adobe Color」について書いていきたいと思います。 「Adobe Color」とは Adobeが提供しているカラーパレットジェネレーターです。 2色以上でデザインを行う際に配色を検討しますが、そんな…

cssのmod()を使って方眼紙風の背景を作る

こんにちは、ナカムラです。 今回は方眼紙風の背景を作ります。 ただ格子状に線を引くだけなら難しくないですが、「要素の幅や高さが変わっても背景がぶつ切りにならないように作りたい」となると少々工夫が必要になります。 そこで、CSSのmod()を使ってみた…

IPv6を利用した場合、ネットの速度は速くなるって本当?

こんにちは!ドイです。 今回は、今まで興味があったもののなかなか手をつけられずにいたIPv4、IPv6について勉強していきたいと思います。 IPv4、IPv6について勉強しなければ!と思ったのは1〜2年ほど前。X(旧Twitter)で、こちらのツイートが流れてきまし…

Laravelなしで使う!Illuminate/Validationを単体で使用する方法

こんにちは、コバヤシです。 ある案件で、素のPHPにバリデーションを入れる必要があり、以前ブログで紹介した「validation」を使おうとしたところ、メンテナンスされていないようでした。。 tech.arms-soft.co.jp そこで、今回はLaravelで使用されている「il…

ルビ関連のCSSプロパティや最近の仕様について

こんにちは、ユアサです。 少し前のChromeのバージョン更新でルビ関連のCSSプロパティが対応開始となりました。すぐに使う機会はないかと思いますが、地味〜に便利そうなものがあるので、これらの使用感を確かめる意味も含めて今まで出てきたルビ関連の主なC…

イラレ新機能!Adobe Fireflyの「生成パターン」で、シームレスなベクターパターンを作ろう

こんにちは、ハヤマです。 今回はIllustratorの新機能「生成パターン」について書いていきたいと思います。 「生成パターン」とは 「Adobe Firefly」を搭載して、テキストプロンプトを使用してベクターによるパターンの生成ができる機能です。 過去に記事で…

position:stickyを付与した要素の親要素にoverflow:hiddenのような効果をつけたい時に使用するCSS

こんにちは、ナカムラです。 今日はposition:stickyを使った時のちょっとしたお助けプロパティをご紹介します。 課題点 ECサイトやポータルサイトの検索結果ページなどでよく使われるレイアウトに、検索結果一覧の横に絞り込み検索が表示されているものがあ…

PHPからWebAssemblyを動かしてみる

こんにちは、コバヤシです。 先月、InfiniCloud株式会社様の勉強会で「PHPとWebAssembly」についてお話ししてきました。 (このあたりの話はドイが前回のブログにて書いています) tech.arms-soft.co.jp この時にはWebAssemblyとしてPHPを使う方法について話…

第6回 InfiniStudy 静岡中部のITエンジニア勉強会に参加しました!

こんにちは!ドイです。 2024年7月26日に、『InfiniCloud 株式会社』様が開催するエンジニア勉強会に、弊社小林が登壇するということもあり参加してきました。 とても実りある内容だったので、勉強会の内容について書いていきたいと思います。 勉強会『Infin…

画像の取得の優先度を改善!fetchpriority属性で取得順を調整しよう

こんにちは、ユアサです。 今回は画像の取得優先度を調整できるプロパティfetchpriorityについてまとめていきます。 (linkやscriptなどにも付与できますが、今回は画像における効果についてまとめます) プロパティについて fetchpriority属性はHTMLのimg要…

習うより慣れる!FigmaでWebデザイン 〜ボタン作成で学ぶバリアント〜

こんにちは、ハヤマです。 今回は、「バリアント」機能を使ってコンポーネントのバリエーションを作っていきたいと思います。 前回の記事はこちら tech.arms-soft.co.jp ※本記事では、Figmaの機能名は日本語化された名称で記載しています。 バリアントとは …

CSSの色の設定にはcolor-mix()を活用しよう

こんにちは、ナカムラです。 今回はCSSの色の指定について書きたいと思います。 CSSのcolor-mix()という関数を使ってみようと思います。 color-mix()とは 簡単にいうと2色を混合させる関数です。 MDNからの引用 color-mix() 関数記法は 2 つの 値を採り、指…

Laravel11で認証機能(Breeze)をカスタマイズする

こんにちは、コバヤシです。 以前Laravel6で認証をカスタマイズする方法を書きましたが、 tech.arms-soft.co.jp 今回はLaravel11でBreezeを使用した認証をカスタマイズする方法を書いていきます。 Breezeがインストールされていて動作していることを前提とし…

【SQL】データサイエンス100本ノック(構造化データ加工編)に挑戦!!56〜60

こんにちは、ドイです! 前回に引き続き、データサイエンス100本ノックに挑戦していきます。 前回の記事 tech.arms-soft.co.jp S-056: 顧客データ(customer)の年齢(age)をもとに10歳刻みで年代を算出し、顧客ID(customer_id)、生年月日(birth_day)と…

写真をクリックしてモーダルでより見やすく表示!写真のギャラリーモーダルを作成しよう -改修編-

こんにちは、ユアサです。 今回は前々回作成したギャラリーモーダルを改修していきます。 ↓前回の記事はこちら tech.arms-soft.co.jp 現状の動作の流れをまとめる まず改修前のギャラリーモーダルを確認します。 See the Pen gallery_modal by felly (@felly…

習うより慣れる!FigmaでWebデザイン 〜ボタン作成で学ぶコンポーネント〜

こんにちは、ハヤマです。 今回は久しぶりに、こちらのシリーズの続きを。 tech.arms-soft.co.jp コンポーネント化する想定でボタンを作成していきたいと思います。 コンポーネントとは デザインファイルやページの中で何度も利用する要素に対し設定する、共…

webフォントの文字詰めについて

こんにちは、ナカムラです。 今回はwebフォントの文字詰めについてです。 デザイナーから基本的に文字詰めはしたいという要望もあったので一度整理しておこうかと思います。 普段Googleフォントから提供されているNoto Sans JPを使用することが多いので文字…

【SQL】データサイエンス100本ノック(構造化データ加工編)に挑戦!!52〜55

こんにちは、ドイです! 前回に引き続き、データサイエンス100本ノックに挑戦していきます。 前回の記事 tech.arms-soft.co.jp S-052: レシート明細データ(receipt)の売上金額(amount)を顧客ID(customer_id)ごとに合計の上、売上金額合計に対して2,000…

カスタム投稿ページのパーマリンクにカスタムフィールドの値を使用する方法

こんにちは、コバヤシです。 今回はWordPressの投稿ページのパーマリンクにカスタムフィールドの値を使用する方法について書きます。 よくある方法 今回は、/hogehoge/【カスタムフィールドで設定した値】で投稿ページを表示したいと思います。 (カスタムフ…