こんにちは、ナカムラです。 最近サイトを作る中でアニメーションを実装する機会が多かったので、もっと実装に良さそうな手法はないものかと探したところ、Lottieに辿り着きました。 あまり最近の紹介記事が見つからなかったので流行りのものではないかもし…
こんにちは、ユアサです。 今回はCSSの擬似クラスの使い方を少し工夫することによってできる、小ワザのようなアプローチについて作成例を数点交えて紹介したいと思います。 あくまでも作成例なので、「こう作ればいいんだ」というより「やりようはあるんだな…
こんにちは、コバヤシです。 先日はJetBrainsのAI「Junie」を試してみましたが、今度は今話題のAnthropicの「Claude Code」を試してみました。 tech.arms-soft.co.jp Claude Codeとは Claude Codeは、Anthropicが開発する大規模言語モデル「Claude」をベース…
こんにちは、ハヤマです。 今回は、Figmaを使った資料作成について考えてみたいと思います。 例えば、よくあるのがCMSを組み込んだサイトをクライアントが円滑に運用できるように準備する操作マニュアルなど。 制作ツールはGoogle スライドやPowerPoint、は…
こんにちは、ナカムラです。 先日とてもカラフルなサイトを作った際に便利だったCSS変数の使い方をご紹介しようと思います。 汎用パーツの色ちがいを作る サイト内で共通で使うボタンなどのパーツは形は同じでもコンテンツ別に色を変えたい、ということはよ…
こんにちは、コバヤシです。 JetBrainsから新しいAI「Junie」がPhpStormで使えるようになったので試してみました。 今回はその使い勝手やできることを簡単に紹介していきます。 Junieとは？ Junie（ジュニー）は、JetBrainsが開発したAIベースのコーディング…
こんにちは、ユアサです。 以前業務内で活用してかなり便利だったので、今回はCSSセレクタの中でも便利なnth-childのof <selector>を使って工夫したストライプテーブルを作成してみたいと思います。 of <selector>の使い方 nth-child(○番目 of 特定のセレクタ)と記述でき、特定の</selector></selector>…
こんにちは、ハヤマです。 今回は、「AIイラスト」をテーマに書いていきたいと思います。 AIイラストとは AIイラストとは、大量のデータを学習したAI（人工知能）が生成したイラストのことです。イラストのテーマやシチュエーションをテキスト（プロンプト）…
こんにちは、コバヤシです。 今回は、Laravel 12のリリースに伴って非推奨となったBreezeについて、Bladeを使いたい場合どのような選択肢があるのかを整理して書いていきたいと思います。 Laravel12について Laravel 12は、2025年2月にリリースされた最新バ…
こんにちは、ナカムラです。 グローバルナビゲーションについて、2つの記事を書いてきました。 今回はこの記事の内容を踏まえて、実際に作っていきたいと思います。 tech.arms-soft.co.jp tech.arms-soft.co.jp DEMO 早速ですが完成したデモです。 See the P…
こんにちは、ユアサです。 今回は使い所が色々あり便利そうだった、古くからあるプロパティzoomについてまとめたいと思います。 なぜわざわざこの話？ お恥ずかしながら自分は最近になってこのプロパティの存在を知りまして、話を聞いたり調べたりしたところ…
こんにちは、ハヤマです。 今回は、デザインデータ共有時に起こりうるフォントのトラブルについて、注意点などご紹介します。 文字化けは発生していないのに、ウェイトが変わってしまっている...？ 「Illustratorで作成したデザインデータを開いたとき、フォ…
こんにちは、ナカムラです。 前回、グローバルナビゲーションについての考えをまとめました。 tech.arms-soft.co.jp 今回は実際にキー操作に対応したグローバルナビゲーションを作る前に、キー操作の方法や対象などを確認していきたいと思います。 キー操作 …
こんにちは、コバヤシです。 今回は、「AWS Transfer Familyで簡単！サーバーレスなCSVバッチ処理」の最後で話をしていた、 EventBridgeとSQSを使用したサーバーレスなCSV処理について書いていきたいと思います。 tech.arms-soft.co.jp 目指す処理の流れ 前…
こんにちは、ハヤマです。 今回は、Figmaのファイルにサムネイルを設定する方法について学んでいきます。 Figmaファイルのサムネイルとは ファイル一覧画面を開いた時にファイル名とともに表示される画像のことで、デフォルトではファイル内（ページが複数あ…
こんにちは、ユアサです。 今回は誰でも簡単にモーダルが作れるようになるshowModal()メソッドを使って、実用的なモーダルを実装してみたいと思います。 割とやっていたモーダルの実装方法 モーダルの要素を用意するのは大前提ですが、そこから開くためのボ…
こんにちは、ナカムラです。 先日、お世話になっているフロントエンド仲間と勉強会をしました。 最近のCSSプロパティの話や、実装に悩むレイアウトの実装方法のアイデア交換など、日頃気になっているフロントエンド周りの話をするとても有意義な会でした。 …
こんにちは、コバヤシです。 明けましておめでとうございます。今年もよろしくお願いいたします。 今回はPHPStanを使った静的解析について書きたいと思います。 静的解析とは 静的解析とは、コードを実行することなくチェックを行い、潜在的なエラーや問題点…
こんにちは、ユアサです。 先日初めてmicroCMSを触り、APIで内容を取得してお知らせ記事を作成しました。今回の記事ではその自習の内容の応用として、管理画面でお知らせ記事を作成した後、その内容を一覧表示するページを作成していこうと思います。 今回は…
こんにちは、ハヤマです。 突然ですが、私は普段、Adobeのアプリをメインにデザインワークを行っていて、傍でFigmaについて定期的に学習を進めています。 ただここ数ヶ月は、あまりFigmaの最新情報をチェックできず…。 Figmaは定期的なアップデートを重ねて…
こんにちは、ナカムラです。 今回はCSSだけで行う子要素の件数判定の方法について書きたいと思います。 グリッドを使った一覧などは子要素の件数が変わっても自動的に折り返して行が増えます。 通常はこのままで十分ですが「件数が少ない時は列数を変更した…
こんにちは！ドイです。 2024年11月29日に、『InfiniCloud 株式会社』様が開催するエンジニア勉強会に、弊社土居（私）が登壇する機会をいただきました。 勉強会の内容について書いていきたいと思います。 2024年7月26日の勉強会には弊社小林が登壇いたしま…
こんにちは、コバヤシです。 とある案件で重くなりそうなCSVのバッチ処理があり、稼働中のサーバーに負荷をかけないように、どうにかならないかと試行錯誤してみました。 AWS Transfer Family、Amazon S3とAWS Lambdaを使う方法を試してみたので、今回はその…
こんにちは、ユアサです。 今回は自分が業務内や自習する際によく使っているフロントエンドの便利なツール・サイトなどについて紹介しようかと思います。 （そういえばこういったものは書いたことがなかったなぁ・・・と思い書くに至りました） 「そんなの知…
こんにちは、ハヤマです。 今回は、Photoshopの新機能「不要な要素の削除」について紹介したいと思います。 「不要な要素の削除」とは 2024年10月リリース（バージョン 26.0）から使用できるようになった削除ツールの新機能で、 画像の背景にある不要な電線…
こんにちは、ナカムラです。 フロントエンドの仕事の中でパフォーマンスの改善というのは常に求められるものになります。 （PageSpeed Insightsによる計測を中心に確認しています） 読み込むファイルの容量を小さくする、というのも大切なことですが、コーデ…
こんにちは！ドイです。 前回の記事では、IPv4、IPv6を比較した上で、 IPv6を利用した場合、ネットの速度は速くなるのか？という点について考えました。 tech.arms-soft.co.jp 記事の中で、IPv4 over IPv6技術について触れるという話だったので、今回はIPv4 …
こんにちは、コバヤシです。 弊社では、データベースのドキュメント作成にどのツールを使うべきか試行錯誤してきました。エクセルやGoogleスプレッドシートで作成してみたり、Figmaで描いてみたこともあります。しかし、どれも更新が手間で、更新を忘れてし…
こんにちは、ユアサです。 今回は、Vue.jsよりも軽量で簡単に実装できるAlpine.jsを使ってみます。 Alpine.jsについて Vue.jsに比べかなり軽量なJSフレームワークです。HTMLタグに直接記述して動的な動きを付与できる、誰でも簡単に触れるフレームワークとな…
こんにちは、ハヤマです。 今回は、カラーパレットジェネレーター「Adobe Color」について書いていきたいと思います。 「Adobe Color」とは Adobeが提供しているカラーパレットジェネレーターです。 2色以上でデザインを行う際に配色を検討しますが、そんな…
