最近行ったパフォーマンス改善のまとめ - arms inc. Engineers' Blog
こんにちは、ナカムラです。 フロントエンドの仕事の中でパフォーマンスの改善というのは常に求められるものになります。 （PageSpeed Insightsによる計測を中心に確認しています） 読み込むファイルの容量を小さくする、というのも大切なことですが、コーディングの書き方にも気をつけていきたいです。 これまでの整理を兼ねて記事にしていきたいと思います。 画像の軽量化 webpの使用や、圧縮率の変更などでより軽くすることができます。 パフォーマンススコアにはそれほど大きな影響はありませんでしたが、必要以上に大きなファイルを読み込ませるのは良くないので、常に気をつけたいと思います。 javaScriptの読み込み </body>の直前に読み込んでいたものを<head>内に移動し、defer属性をつけました。 これにより、DOMの解析を進めながら、同時進行でjavaScriptのファイルを読み
IPv4 over IPv6技術とはなんだろう？ - arms inc. Engineers' Blog
こんにちは！ドイです。 前回の記事では、IPv4、IPv6を比較した上で、 IPv6を利用した場合、ネットの速度は速くなるのか？という点について考えました。 tech.arms-soft.co.jp 記事の中で、IPv4 over IPv6技術について触れるという話だったので、今回はIPv4 over IPv6技術について勉強していきたいと思います！ なぜIPv4 over IPv6技術が存在するのか 前回の記事の中で、IPv4で行われるPPPoE接続で速度が遅くなっている理由として、網終端装置（NTE）を利用して通信を行っている点を挙げました。 その際に『枯渇問題を解決するべく登場したのがIPv6と説明しましたが、IPv4とIPv6は互換性がありません。』 と説明をしましたが、どういうことか？というと、この地球上にはIPv4とIPv6という別々のインターネットが存在しています。 そして、
cssのmod()を使って方眼紙風の背景を作る - arms inc. Engineers' Blog
こんにちは、ナカムラです。 今回は方眼紙風の背景を作ります。 ただ格子状に線を引くだけなら難しくないですが、「要素の幅や高さが変わっても背景がぶつ切りにならないように作りたい」となると少々工夫が必要になります。 そこで、CSSのmod()を使ってみたいと思います。 mod()とは？ CSSの値関数の一つです。 リファレンスからの引用ですが、下記の計算をしてくれる関数です。 ある数値を別の数で割ったときのモジュラス（除数と同じ符号を持つ）を計算します。 developer.mozilla.org マス目が途切れないようにするには、背景を設定する要素のサイズを、「マス目のサイズの倍数＋線幅」にしたいです。 「マス目のサイズの倍数」にするには、マス目のサイズで割ったあまりの数を背景を設定する要素の幅と高さから引くことで調整できます。 ※余剰を求める関数はもう一つありますが、こちらは用途が異なるの
画像の取得の優先度を改善！fetchpriority属性で取得順を調整しよう - arms inc. Engineers' Blog
こんにちは、ユアサです。 今回は画像の取得優先度を調整できるプロパティfetchpriorityについてまとめていきます。 （linkやscriptなどにも付与できますが、今回は画像における効果についてまとめます） プロパティについて fetchpriority属性はHTMLのimg要素に付与できるプロパティで、取得する画像の優先度を指定することができます。ファーストビューなど、ページの初回読み込み時に表示させておきたい画像がある場合には積極的に付与しておきたいプロパティです。 使い方はimg要素にfetchpriority =""という具合に記述することで指定でき、指定できる値はhigh low autoの3種類となっています。文字通りそれぞれhighは高優先度、lowは低優先度、autoが初期値となります。 では次のセクションで実際に使用していきます。 使ってみる 実際に使ってみる前に
習うより慣れる！FigmaでWebデザイン 〜ボタン作成で学ぶバリアント〜 - arms inc. Engineers' Blog
こんにちは、ハヤマです。 今回は、「バリアント」機能を使ってコンポーネントのバリエーションを作っていきたいと思います。 前回の記事はこちら tech.arms-soft.co.jp ※本記事では、Figmaの機能名は日本語化された名称で記載しています。 バリアントとは バリアントとは、1つのコンポーネントに対してバリエーションを追加できる機能です。 例えば、以下のようなコンポーネントを作成したとします。 バリアントを使うと、このような「通常時」「ホバー時」などといった状態変化で切り替わるスタイルを、個別のコンポーネントではなく1つのグループの中にまとめて“バリエーション”として管理することができます。 1つにまとめたコンポーネントのグループは、「コンポーネントセット」と呼びます。 バリアントを使ってみよう では早速バリアントを作成してみましょう。 例として、お問い合わせフォームのページに設
CSSの色の設定にはcolor-mix()を活用しよう - arms inc. Engineers' Blog
こんにちは、ナカムラです。 今回はCSSの色の指定について書きたいと思います。 CSSのcolor-mix()という関数を使ってみようと思います。 color-mix()とは 簡単にいうと2色を混合させる関数です。 MDNからの引用 color-mix() 関数記法は 2 つの 値を採り、指定された色空間の指定された量で混合した結果を返します。 developer.mozilla.org color-mix(色空間（method）, 1色目, 2色目) 第一引数に色空間（method）を、 第二引数に１色目、続いて第三引数の2色目を書きます。 色空間（method）は値間の補間に使用する色空間の種類になります。 詳しくは下記で説明されていますが、よく使うのはsrgbではないかと思いますので、DEMOもsrgbを使用します。 developer.mozilla.org DEMO See th
webフォントの文字詰めについて - arms inc. Engineers' Blog
こんにちは、ナカムラです。 今回はwebフォントの文字詰めについてです。 デザイナーから基本的に文字詰めはしたいという要望もあったので一度整理しておこうかと思います。 普段Googleフォントから提供されているNoto Sans JPを使用することが多いので文字詰めをするCSSプロパティ「font-feature-settings: "palt";」をよく使います。 このプロパティは使用できるフォントが限られているので、別のフォントを使いたい、となった場合の対応方法も整理していきたいと思います。 font-feature-settingsが使えるもの、使えないもの font-feature-settingsはOpenTypeフォントの「プロポーショナルメトリクス」というオプション設定をオン／オフするプロパティになるため、そもそも使いたい書体が対応していなければ何も変化しません。 詳しくは下
【Figma】続・コメントやメモに関する便利なウィジェット＆プラグイン - arms inc. Engineers' Blog
こんにちは、ハヤマです。 前回はFigmaでの申し送りやメモを共有するのに便利なウィジェットについて記事を書いたのですが、 社内でいくつかリアクションをもらえたことと、前回調べた中で紹介しきれなかったものがありましたので 今回も引き続き、コメント・メモに関する便利なウィジェット＆プラグインについてご紹介をしていきたいと思います。 前回の記事はこちら tech.arms-soft.co.jp Annotation Sticky Notes FigJamの標準機能にある付箋のデザインを模したウィジェットです。 Annotation Sticky Notes 特徴 こちらのウィジェットの特徴は以下の通り（作者さんのnoteより引用）。 ・自動で付箋の作成者のアバターと名前が表示される ・10色から色を選べる ・八方にくちばしをつけられる（吹き出しのような形にできる） ・作成日を自動で表示する こ
homebrewアップデートで、依存するライブラリが使えなくなった際の解決方法 - arms inc. Engineers' Blog
こんにちは！ドイです。 今回は、homebrewをアップデートしたところ、PHPが実行できなくなったので、解決していきます。 現象 PhpStormで、PHP_CodeSnifferが実行できなくなりました。 上部メニューから、PhpStorm > settings > PHP > 品質ツール > PHP_CodeSnifferまで進み「…」をクリックします。 モーダルが表示されるので、「検証」ボタンをクリックすると「Can not run PHP Code CodeSniffer」とエラーが表示されました。 確かに、PHP_CodeSnifferが動いていないようです。 再度上部メニューから、PhpStorm > settings > PHP > Composerまで進み、「エディターで開く」をクリックします。 composer.jsonが開かれるので、右上にある「更新」ボタンをクリック
CSSだけで角が欠けたデザインを表現しよう！ - arms inc. Engineers' Blog
こんにちは、ユアサです。 弊社の案件で要素の角が欠けている（ベベルのある）デザインをコーディングする機会がありましたので、今回はその備忘録も兼ねてまとめていきたいと思います。 どのように作成すればいいのかさっぱり分からなかったので、こちらの記事を参考にさせていただきました。 （参考記事はかなり前に書かれているもので、現在ではradial-gradientの書き方が少し変わっているので、多少調整したもので紹介します） webrocketsmagazine.com ベベルをCSSで表現する そもそもベベルという表現を知らなかったので念の為に説明すると、一般的に要素の角が欠けたようなデザインのことを指すようです。欠け方は斜線や丸などがメジャーでしょうか。 まずは作成してみましょう。参考記事を元に現在の記法に修正したものが以下になります。 See the Pen bevel01 by felly
CSSだけで吹き出しデザインの尖っている部分をうまい具合に作りたい！！ - arms inc. Engineers' Blog
こんにちは、ユアサです。 吹き出し付きのコメントがあるようなページのコーディングをすることがありますが、その度に格闘していた『吹き出しの尖っている部分どう作るか問題』に（一旦）終止符を打ちたいので、今回は備忘録も兼ねて自分が考えた方法について書きたいと思います。 （吹き出しの尖っている部分ですが「ツノ」や「しっぽ」と呼ばれているらしいので、以下その呼び方で書いていきます） 調べるとよく出てくる作成方法 テキストの要素を親要素とし、擬似要素で三角形を作ってpositionプロパティで位置調整をしています。吹き出しが背景色のみなら擬似要素1つ、枠線があるものの場合は擬似要素を2つ用意して重ねることで枠線があるように見せる・・・というやり方が一般的かと思います。 See the Pen comnent01 by felly (@felly00505) on CodePen. 今回この記事でお話し
Figmaのプラン「プロフェッショナル」「ビジネス」は何が違う？ - arms inc. Engineers' Blog
こんにちは、ハヤマです。 今回は、Figmaのプラン内容について書いていきたいと思います。 Figmaのプラン 現在、Figmaの利用プランは以下の4種類があります。 （2023年10月31日現在） スターター Figmaプロフェッショナル Figmaビジネス エンタープライズ 参照元は、公式のこちらのページ。 www.figma.com 上記ページの「機能を比較する」の表を参照すると、「Figmaプロフェッショナル（以下、プロフェッショナルプラン）」と「Figmaビジネス（以下、ビジネスプラン）」では対応する機能が結構近しいことや、一部カテゴリーの機能に関してはビジネスプランが特出していることがわかります。 おそらくですが、個人で作業する方を除いては、スタータープランで試したあと有料プランの検討をする方が多いのではないでしょうか。 その際「Figmaの全ての機能を使いこなしたい」という方
習うより慣れる！FigmaでWebデザイン 〜スタイル設定：プラグイン活用編〜 - arms inc. Engineers' Blog
こんにちは、ハヤマです。 前回の記事では、スタイルを1つ1つ登録する方法について書きました。 tech.arms-soft.co.jp 今回は、プラグインを用いて一括登録する方法について学習していきたいと思います。 カラーやテキストのスタイルをまとめて登録するプラグイン 選択したカラーやテキストの要素を、一括でスタイルに登録してくれるプラグインです。 Styler www.figma.com 使い方 ①スタイル登録用のシェイプまたはテキストを作成する 前回の記事で作成した素材を流用します。 ②レイヤー名を編集 プラグインでスタイルを一括生成する際、スタイルの名称はレイヤー名から紐づきます。 シェイプ等はデフォルトのレイヤー名が「Rectangle」などオブジェクトの種類に由来したものになっているので、あらかじめスタイルに関連する名前に変更しておきましょう。 テキストスタイルは、スタイル名を
API仕様を簡単に作成&管理しよう！ - arms inc. Engineers' Blog
こんにちは！ドイです。 API仕様をまとめるときに、どんなツールを使っていますか？ExcelやGoogleスプレッドシートで管理したり。。。 色々だと思いますが、今回はOpenAPIについてまとめていきたいと思います。 OpenAPIとは swagger.io 「OpenAPI仕様（旧Swagger仕様）は、REST APIのためのAPI記述形式である」と説明があります。 記述方式は、YAML形式やJSON形式で、利用可能なエンドポイントや認証方法などを記述することができます。ExcelやGoogleスプレッドシートで管理すると、以下の点が難点になるかと思います。 API仕様を書く人によって、フォーマットが異なる 変更を管理するのが難しい バージョン管理が難しい こんな問題点を楽に解決してくれるのが、OpenAPIです。 OpenAPI Editor API仕様をPhpStorm上で記述す
CSSで作る片側だけ可変する背景 - arms inc. Engineers' Blog
こんにちは、中村です。 今回はCSSの話です。 フロントエンドの作業はデザインを下にマークアップとスタイルを作っていくところから始まります。 そこで、最近よく作るレイアウトの組み方をご紹介したいと思います。 片側だけ可変する背景 記事のタイトルにもありますが、片側だけ可変する背景を作ってみたいと思います。 単純にコンテンツ幅だけ、ウィンドウ幅いっぱいにするのであればwidth: 100%;にしたら良いですが、 コンテンツ幅＋片方だけウィンドウ幅に合わせて可変するにはどうしたら良いでしょうか。 条件 コンテンツ幅1152pxを保つ コンテンツは中央配置 画面右側だけ、ウィンドウの幅に合わせて可変する 背景の左端の位置は変わらない width: 95%;といった、ウィンドウ幅に対しての割合を設定しただけでは左側の位置も変わってしまうのでダメですね。 95% では、DEMOをみていきましょう。
スタイルを使いこなせ！要素の特徴やブラウザのサポート制限をくぐり抜けて使い分けるグラデーションについて考える - arms inc. Engineers' Blog
こんにちは、ユアサです。 前回からJSとCanvasでレーダーチャートを作成する記事を作成しましたが、弊社で取り扱った案件でグラデーションを使うことがあり自分の備忘録という意味でもまとめておきたいと思ったので、今回は少し逸れてCSSでグラデーションを使う際のポイントなどをまとめていこうと思います。 （１）背景グラデーションの見える範囲 ブロック要素とインライン要素どちらにもbackgroundのlinear-gradient等でグラデーションを指定することはできますが、それぞれの要素の特徴ゆえにデフォルトの状態ではグラデーションの表示される範囲が違ってきます。 See the Pen gradetion-text-back by felly (@felly00505) on CodePen. 例としてspanタグとpタグの見え方を比べていきます。 上記コードでは上から インライン要素のsp
入力値に合わせて即描画！canvasとJSを使ってレーダーチャートを作ってみよう -準備編- - arms inc. Engineers' Blog
こんにちは、ユアサです。 今更な内容になってしまいますが、今回は図形やアニメーションを描画できるcanvas要素とJSを使ってテキストボックスに入力した値に応じて描画ができるレーダーチャートを作っていきたいと思います。この記事では五角形のレーダーチャートを想定しています。 canvas要素については以前弊社ブログ内で記事にされていますので、こちらを参考にしてみてください。 tech.arms-soft.co.jp canvasで描画するために必要なJSメソッド 上記の添付記事でも説明されていますが、getElementById('ここにid名')で対象のid名が付与されている要素を取得してgetContext('2d')で描画を有効にする必要があります。 また描画開始の宣言をしなければいけないのでbeginPath()も記述します。これらを踏まえてまず以下の通りになります。 const p
来たる「DTPの2023年問題」！Adobeサポート終了フォントを要チェック - arms inc. Engineers' Blog
こんにちは、ハヤマです。 今回は、「DTPの2023年問題」と呼ばれる、フォントに関する注意点をご紹介したいと思います。 （2023年、気がつけば到来まで4ヶ月を切っていますね（汗）） 「DTPの2023年問題」とは？ 2023年1月以降、Adobe製品でType 1 フォントのサポートが終了することを指しています。 「Type 1 フォント」とは？ Adobeが1984年に発表したPostScriptで用いられる表示・印刷用の欧文フォント形式のことです。 （PostScript、PS1、T1、Adobe Type 1、Multiple Master、MM とも呼ばれています） Windows環境では使用することができません。 Type 1 フォントの見分け方 Illustratorで確認するとわかりやすいと思います。 「文字」パネルからフォント一覧のセレクトを開いた時、右端に「a」のマー
JavaScriptとclip-pathを使って、カーソルの位置に合わせて写真をマスクする - arms inc. Engineers' Blog
こんにちは、ナカムラです。 今回はカーソルの位置に合わせて表示を制御するものを作ってみたいと思います。 カーソルの位置の取得や、表示の変更にはJavaScriptを、写真のマスクはclip-pathを使います。 とっても簡単です。 DEMO 画面内にカーソルを当ててみてください。 カーソルの位置に合わせて写真が丸く切り抜かれているかと思います。 See the Pen JavaScriptとclip-pathを使って、カーソルの位置に合わせて写真をマスクする by Nakamura (@takayo-nakamura) on CodePen. 基本スタイル 下準備としてまずはスタイルから解説していきます。 divで囲ったimgタグに対して、画面いっぱいになるようにしています。 #imageWrap { width: 100vw; height: 100vh; } #image { widt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
