こんにちは、ユアサです。 先日初めてmicroCMSを触り、APIで内容を取得してお知らせ記事を作成しました。今回の記事ではその自習の内容の応用として、管理画面でお知らせ記事を作成した後、その内容を一覧表示するページを作成していこうと思います。 今回はあくまでもmicroCMS公式のチュートリアルの内容を参考にして作成するので、あらかじめmicroCMSの「Getting Started（ブラウザ）」ページの内容を終えている前提で進めます。 ↓microCMSの公式ページはこちら microcms.io ↓microCMSのチュートリアル「Getting Started（ブラウザ）」はこちら …

こんにちは、ハヤマです。 突然ですが、私は普段、Adobeのアプリをメインにデザインワークを行っていて、傍でFigmaについて定期的に学習を進めています。 ただここ数ヶ月は、あまりFigmaの最新情報をチェックできず…。 Figmaは定期的なアップデートを重ねており、その進化は目覚ましく、やはりユーザーのシェア率の高さを感じさせるパワフルなもの。このままでは安心して年を越せません。 そこで今回は、やや駆け足ですが、ここ数ヶ月の間にアップデートしたFigmaの機能の中で自分が気になったものをいくつかまとめて紹介したいと思います。（チョイスはデザイン作業向けとなります） 私のように、“普段はガッツ…

こんにちは、ナカムラです。 今回はCSSだけで行う子要素の件数判定の方法について書きたいと思います。 グリッドを使った一覧などは子要素の件数が変わっても自動的に折り返して行が増えます。 通常はこのままで十分ですが「件数が少ない時は列数を変更したい」場合はどうでしょうか。 javaScriptで判定してクラスを付け替える方法もありますが、今回は子要素の件数の判定も含めてCSSだけで列数を変えてみたいと思います。 DEMO See the Pen CSSだけで行う、子要素の件数に応じたレイアウトの変更 by Nakamura (@takayo-nakamura) on CodePen. 件数が少な…

こんにちは！ドイです。 2024年11月29日に、『InfiniCloud 株式会社』様が開催するエンジニア勉強会に、弊社土居（私）が登壇する機会をいただきました。 勉強会の内容について書いていきたいと思います。 2024年7月26日の勉強会には弊社小林が登壇いたしました。 詳細の記事はこちらです。 tech.arms-soft.co.jp ADRって何だろう？ 今回の勉強会では、『ADRってなんだろう？』という内容で発表をしました。 ADRについては、過去のブログでも触れています。 tech.arms-soft.co.jp tech.arms-soft.co.jp 今回は、ADRとは何かを、…

こんにちは、コバヤシです。 とある案件で重くなりそうなCSVのバッチ処理があり、稼働中のサーバーに負荷をかけないように、どうにかならないかと試行錯誤してみました。 AWS Transfer Family、Amazon S3とAWS Lambdaを使う方法を試してみたので、今回はその方法を書きたいと思います。 Amazon S3とは Amazon S3（Simple Storage Service）は、AWSが提供するオブジェクトストレージサービスです。高い可用性と耐久性を持ち、テラバイト単位の大容量データでも効率よく保存できます。 今回の仕組みでは、AWS Transfer Familyを使っ…

こんにちは、ユアサです。 今回は自分が業務内や自習する際によく使っているフロントエンドの便利なツール・サイトなどについて紹介しようかと思います。 （そういえばこういったものは書いたことがなかったなぁ・・・と思い書くに至りました） 「そんなの知ってて当たり前でしょ！」ってものもあるかと思いますが温かい目で見守っていただけたら幸いです。 グラデーションのCSSが簡単に設定できる「CSS Gradient」 文字色や背景色など度々使われるグラデーションですが、CSSでそれを表現する際に用いられるlinear-gradient内の指定を具体的にどの数値でどのくらいに調整するか、イメージするだけではちょ…

こんにちは、ハヤマです。 今回は、Photoshopの新機能「不要な要素の削除」について紹介したいと思います。 「不要な要素の削除」とは 2024年10月リリース（バージョン 26.0）から使用できるようになった削除ツールの新機能で、 画像の背景にある不要な電線、ケーブル、被写体以外の人物を自動的に検出して削除してくれます。 以前こちらのブログで「生成塗りつぶし」機能を使った不要な人物・オブジェクトの削除について記事を書いたことがありますが、それとは別の操作方法です。 以前の記事はこちら tech.arms-soft.co.jp 操作方法 今回は、Photoshop公式から公開されているチュー…

こんにちは、ナカムラです。 フロントエンドの仕事の中でパフォーマンスの改善というのは常に求められるものになります。 （PageSpeed Insightsによる計測を中心に確認しています） 読み込むファイルの容量を小さくする、というのも大切なことですが、コーディングの書き方にも気をつけていきたいです。 これまでの整理を兼ねて記事にしていきたいと思います。 画像の軽量化 webpの使用や、圧縮率の変更などでより軽くすることができます。 パフォーマンススコアにはそれほど大きな影響はありませんでしたが、必要以上に大きなファイルを読み込ませるのは良くないので、常に気をつけたいと思います。 javaSc…

こんにちは！ドイです。 前回の記事では、IPv4、IPv6を比較した上で、 IPv6を利用した場合、ネットの速度は速くなるのか？という点について考えました。 tech.arms-soft.co.jp 記事の中で、IPv4 over IPv6技術について触れるという話だったので、今回はIPv4 over IPv6技術について勉強していきたいと思います！ なぜIPv4 over IPv6技術が存在するのか 前回の記事の中で、IPv4で行われるPPPoE接続で速度が遅くなっている理由として、網終端装置（NTE）を利用して通信を行っている点を挙げました。 その際に『枯渇問題を解決するべく登場したのがI…

こんにちは、コバヤシです。 弊社では、データベースのドキュメント作成にどのツールを使うべきか試行錯誤してきました。エクセルやGoogleスプレッドシートで作成してみたり、Figmaで描いてみたこともあります。しかし、どれも更新が手間で、更新を忘れてしまい、実態と合わなくなり、そのままでは使えなくなることもしばしばありました。 そんな悩みを抱えていた時、とても便利なツール「tbls」を見つけたので、今回はその紹介と使い方を紹介します。 tblsとは tblsは、データベーススキーマを自動でドキュメント化するツールです。 MySQLやPostgreSQLなどの主要なRDBMSに対応していて、テーブ…

こんにちは、ユアサです。 今回は、Vue.jsよりも軽量で簡単に実装できるAlpine.jsを使ってみます。 Alpine.jsについて Vue.jsに比べかなり軽量なJSフレームワークです。HTMLタグに直接記述して動的な動きを付与できる、誰でも簡単に触れるフレームワークとなっています。 公式サイトでは「マークアップ内で直接動作を作成するための堅牢で最小限のツールです。現代の Web 向けの jQuery のようなものだと考えてください。」と紹介されていますが、jQueryのような挙動を再現できるという例えで記述するものはJSになります。 またAlpine.jsを使うための要素は15個の属性…

こんにちは、ハヤマです。 今回は、カラーパレットジェネレーター「Adobe Color」について書いていきたいと思います。 「Adobe Color」とは Adobeが提供しているカラーパレットジェネレーターです。 2色以上でデザインを行う際に配色を検討しますが、そんな時に便利です。 こちらのツールですが、なんと無料。 Webからアクセスするだけで利用できます。 https://color.adobe.com/ja/ できること Adobe Colorでできることは、以下の通り。 ① カラーテーマを作成 カラーパレットジェネレーターを使用し、色彩理論に基づいてカラーテーマを作成できます。 メニ…

こんにちは、ナカムラです。 今回は方眼紙風の背景を作ります。 ただ格子状に線を引くだけなら難しくないですが、「要素の幅や高さが変わっても背景がぶつ切りにならないように作りたい」となると少々工夫が必要になります。 そこで、CSSのmod()を使ってみたいと思います。 mod()とは？ CSSの値関数の一つです。 リファレンスからの引用ですが、下記の計算をしてくれる関数です。 ある数値を別の数で割ったときのモジュラス（除数と同じ符号を持つ）を計算します。 developer.mozilla.org マス目が途切れないようにするには、背景を設定する要素のサイズを、「マス目のサイズの倍数＋線幅」にした…

こんにちは！ドイです。 今回は、今まで興味があったもののなかなか手をつけられずにいたIPv4、IPv6について勉強していきたいと思います。 IPv4、IPv6について勉強しなければ！と思ったのは1〜2年ほど前。X（旧Twitter）で、こちらのツイートが流れてきました。 きこえますか…過去に「プロフェッショナルIPv6」の初版と第2版の両方を無料ダウンロードするだけで満足して全く読んでいない、あなたの…心に…直接… 呼びかけています…第I部「インターネットとIPv6の概要」だけでも今すぐ読み始めるのです…最初の一歩をまずは超えるのです！！！ https://t.co/t2mqK4R5Om— 小…

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

こんにちは、ユアサです。 少し前のChromeのバージョン更新でルビ関連のCSSプロパティが対応開始となりました。すぐに使う機会はないかと思いますが、地味〜に便利そうなものがあるので、これらの使用感を確かめる意味も含めて今まで出てきたルビ関連の主なCSSプロパティを見てみたいと思います。 displayプロパティ 例えばdisplay: ruby;と指定した場合、その要素を実質<ruby>要素のように扱えるようになります。またその要素内の子要素にdisplay: ruby-text;を指定することによって、<rt>要素のように振り仮名として扱えます。 このようにdisplayプロパティにはルビ…

こんにちは、ハヤマです。 今回はIllustratorの新機能「生成パターン」について書いていきたいと思います。 「生成パターン」とは 「Adobe Firefly」を搭載して、テキストプロンプトを使用してベクターによるパターンの生成ができる機能です。 過去に記事で紹介した「テキストからベクター生成」と同様に、生成したいイメージの内容をプロンプトに入力するだけで、簡単にベクターのパターンデータが生成することができます。 現時点ではベータ版が公開中。テストおよびフィードバック用に利用ができるようになっています。 生成される作品は、商用利用しても安全になるようにデザインされているのだそう。 上手く…

こんにちは、ナカムラです。 今日はposition:stickyを使った時のちょっとしたお助けプロパティをご紹介します。 課題点 ECサイトやポータルサイトの検索結果ページなどでよく使われるレイアウトに、検索結果一覧の横に絞り込み検索が表示されているものがあります。 絞り込み条件も長くなるので、選択してすぐ検索ボタンを押せるように、position:stickyを用いてボタンを追従させると使いやすくなります。 この時、検索枠の親要素が角丸だった場合、 追従しているときは四角いオブジェクトの状態として表示し、 追従している時 元の位置に戻った時は、親要素の角丸に合わせてトリミングされる。 元の位…

こんにちは、コバヤシです。 先月、InfiniCloud株式会社様の勉強会で「PHPとWebAssembly」についてお話ししてきました。 （このあたりの話はドイが前回のブログにて書いています） tech.arms-soft.co.jp この時にはWebAssemblyとしてPHPを使う方法について話しをしたのですが、今回はその時に時間がなくてお話しできなかった「PHPからWebAssembly」を動かす方法について書きたいと思います。 Wasmerのインストール まずは簡単にWebAssemblyを実行できるように、Wasmerをインストールします。 wasmer.io 今回は、Apache…

こんにちは！ドイです。 2024年7月26日に、『InfiniCloud 株式会社』様が開催するエンジニア勉強会に、弊社小林が登壇するということもあり参加してきました。 とても実りある内容だったので、勉強会の内容について書いていきたいと思います。 勉強会『InfiniStudy』とは？？ 静岡市内に本社を持つ『InfiniCloud 株式会社』様が主催の勉強会です。 2ヶ月に一度、勉強会を開催しており、今回が第6回になるそうです。 勉強会は通常、インフラセッションと開発セッションの二部に別れています。 勉強会に参加するとなると、 どうしても自分の業務に近しい内容の勉強会を選択してしまうので、 …

こんにちは、ユアサです。 今回は画像の取得優先度を調整できるプロパティfetchpriorityについてまとめていきます。 （linkやscriptなどにも付与できますが、今回は画像における効果についてまとめます） プロパティについて fetchpriority属性はHTMLのimg要素に付与できるプロパティで、取得する画像の優先度を指定することができます。ファーストビューなど、ページの初回読み込み時に表示させておきたい画像がある場合には積極的に付与しておきたいプロパティです。 使い方はimg要素にfetchpriority =""という具合に記述することで指定でき、指定できる値はhigh l…

こんにちは、ハヤマです。 今回は、「バリアント」機能を使ってコンポーネントのバリエーションを作っていきたいと思います。 前回の記事はこちら tech.arms-soft.co.jp ※本記事では、Figmaの機能名は日本語化された名称で記載しています。 バリアントとは バリアントとは、1つのコンポーネントに対してバリエーションを追加できる機能です。 例えば、以下のようなコンポーネントを作成したとします。 バリアントを使うと、このような「通常時」「ホバー時」などといった状態変化で切り替わるスタイルを、個別のコンポーネントではなく1つのグループの中にまとめて“バリエーション”として管理することがで…

こんにちは、ナカムラです。 今回はCSSの色の指定について書きたいと思います。 CSSのcolor-mix()という関数を使ってみようと思います。 color-mix()とは 簡単にいうと2色を混合させる関数です。 MDNからの引用 color-mix() 関数記法は 2 つの 値を採り、指定された色空間の指定された量で混合した結果を返します。 developer.mozilla.org color-mix(色空間（method）, 1色目, 2色目) 第一引数に色空間（method）を、 第二引数に１色目、続いて第三引数の2色目を書きます。 色空間（method）は値間の補間に使用する色空間…

こんにちは、コバヤシです。 以前Laravel6で認証をカスタマイズする方法を書きましたが、 tech.arms-soft.co.jp 今回はLaravel11でBreezeを使用した認証をカスタマイズする方法を書いていきます。 Breezeがインストールされていて動作していることを前提としています。 目次 参照する項目を追加するだけの場合 もう少し複雑な認証をしたい場合 ガードの作成 プロバイダーの作成 configの変更 コントローラーの修正 envに追加 完了 遷移先の設定 まとめ 参照する項目を追加するだけの場合 app/Http/Requests/Auth/LoginRequest.…

こんにちは、ドイです！ 前回に引き続き、データサイエンス100本ノックに挑戦していきます。 前回の記事 tech.arms-soft.co.jp S-056: 顧客データ（customer）の年齢（age）をもとに10歳刻みで年代を算出し、顧客ID（customer_id）、生年月日（birth_day）とともに10件表示せよ。ただし、60歳以上は全て60歳代とすること。年代を表すカテゴリ名は任意とする。 SELECT customer_id, birth_day, CASE WHEN age < 10 THEN '10歳以下' WHEN age >= 10 AND age < 20 THEN…

こんにちは、ユアサです。 今回は前々回作成したギャラリーモーダルを改修していきます。 ↓前回の記事はこちら tech.arms-soft.co.jp 現状の動作の流れをまとめる まず改修前のギャラリーモーダルを確認します。 See the Pen gallery_modal by felly (@felly00505) on CodePen. 改修前のギャラリーモーダルでは、特定の画像をクリック後にモーダルが表示され、クリックした対象の画像の箇所まで自動で移動する仕様でした。 しかし、モーダルが非表示の場合でもDOM上では存在している状態だったので、これをモーダル表示時にのみ生成させ、また画像…

こんにちは、ハヤマです。 今回は久しぶりに、こちらのシリーズの続きを。 tech.arms-soft.co.jp コンポーネント化する想定でボタンを作成していきたいと思います。 コンポーネントとは デザインファイルやページの中で何度も利用する要素に対し設定する、共通性を持ったパーツのこと。 コンポーネントには親子関係があります。「親コンポーネント（メインコンポーネント）」が親、「インスタンス」が子です。 親コンポーネントの内容やスタイルを編集すると、子であるインスタンスに自動で反映されます。逆に、インスタンスを編集した場合、その内容は親コンポーネント・その他のインスタンスには共有されません。こ…

こんにちは、ナカムラです。 今回はwebフォントの文字詰めについてです。 デザイナーから基本的に文字詰めはしたいという要望もあったので一度整理しておこうかと思います。 普段Googleフォントから提供されているNoto Sans JPを使用することが多いので文字詰めをするCSSプロパティ「font-feature-settings: "palt";」をよく使います。 このプロパティは使用できるフォントが限られているので、別のフォントを使いたい、となった場合の対応方法も整理していきたいと思います。 font-feature-settingsが使えるもの、使えないもの font-feature-s…

こんにちは、ドイです！ 前回に引き続き、データサイエンス100本ノックに挑戦していきます。 前回の記事 tech.arms-soft.co.jp S-052: レシート明細データ（receipt）の売上金額（amount）を顧客ID（customer_id）ごとに合計の上、売上金額合計に対して2,000円以下を0、2,000円より大きい金額を1に二値化し、顧客ID、売上金額合計とともに10件表示せよ。ただし、顧客IDが\"Z\"から始まるのものは非会員を表すため、除外して計算すること。 SELECT customer_id, SUM(amount) as sum_amount, CASE WH…

こんにちは、コバヤシです。 今回はWordPressの投稿ページのパーマリンクにカスタムフィールドの値を使用する方法について書きます。 よくある方法 今回は、/hogehoge/【カスタムフィールドで設定した値】で投稿ページを表示したいと思います。 （カスタムフィールドのフィールド名はcodeとします） ネットで検索すると見つかるのが、以下の方法です。 functions.php <?php function custom_rewrite_rule() { add_rewrite_rule( '^hogehoge/([0-9]+)/?$', 'index.php?post_type=xxxxx…