インライン要素の長文テキストの表示は大丈夫?box-decoration-breakを使って整えよう!

こんにちは、ユアサです。 以前、長文テキスト対策についての記事を書いたことがありました。その記事では紹介し忘れていましたが(というより最近知ったのですが)、テキストが改行・分割された時、テキストの改行位置にある文字のパディングや装飾を補間す…

HTMLタグ<details>でアコーディオンを作る(簡易版)

こんにちは、ナカムラです。 今回はdetailsについて試してみたものをご紹介したいと思います。 よくある質問などでよくアコーディオンを使うと思います。 たくさんある中でユーザーが求めている物・そうでないものがあるので、必要な時だけ開くようにするの…

今注目のAI「GPT-4」を試す

こんにちは、コバヤシです。 今回は今話題になっているAI「GPT-4」について書きたいと思います。 GPT-4とは? GPT-4は、OpenAIが開発した最新の言語モデルで、GPT-3の後継となるものです。このモデルは、さらなる進化を遂げたことにより、自然な文章生成や質…

Fat Controllerから脱しよう!ADRについて学ぶ!

こんにちは!ドイです。 Laravelでの開発を始めて、3年が経ちました。 コードを書くことすら初めてだった私が、初めに覚えたのはMVCという概念でした。 開発を続けるうちに、小さな案件から大きな案件まで関わるようになり、少し困ったことが出てきました。 …

XDユーザーがFigmaを学ぶ 〜データの管理について〜

こんにちは、ハヤマです。 今回は、Figmaのデータ管理方法についてまとめていきたいと思います。 (Figmaに関するこれまでの記事はこちらをご覧ください) Figmaのデータ構造について Figmaのデータですが、XDとは異なる構造で管理をしています。 以下の図を…

忘れていると想定外の表示崩れが・・・長文テキスト対策について考えよう

こんにちは、ユアサです。 業務の中で、動的ページ内で長文テキストを表示した際にデザインが崩れてしまうといった見落としが何度かあったので、今回は動的ページにおける長文テキスト対策について自分の備忘録も兼ねてまとめていきます。 ①コンテンツ範囲か…

iPhone Safariで入力エラーが起きた時に該当箇所へスクロールする

こんにちは、ナカムラです。 今回はフォームの機能で困ったことがあったので、備忘録として書きたいと思います。 HTML5のフォームバリデーションでは必須項目が未入力の場合や、入力形式が異なる場合にエラーメッセージを表示しユーザーへ伝える機能が備わっ…

Web­Assemblyが気になったのでRustで試してみた

こんにちは、コバヤシです。 Web­Assemblyって知っていますか? 何かと目にする機会も多くなってきたので、今更感も強いですがRustを使ってWeb­Assemblyを試してみたいと思います。 Web­Assemblyとは WebAssemblyはWebブラウザーが実行できるバイナリー形式…

XDユーザーがFigmaを学ぶ 〜Frame(フレーム)とは〜

こんにちは、ハヤマです。 昨年AdobeがFigmaを買収し、これを機にFigmaの導入を検討されている方も多いのではと思います。 この記事では、もともと「XDユーザー」で、「これからFigmaへのシフトを考えている方」向けに、覚えておきたい点などをご紹介します…

AWSから請求が!?発覚から対処法まで!

AWS

こんにちは!ドイです。 先日参加した勉強会にて「AWSを利用していて、とんでもない額の請求がきた」という話を聞きました。 私自身、AWSを勉強しようとアカウントを作り、EC2を立ち上げ…とやってはいたものの、しばらく利用していないので他人事として聞い…

【フロントエンド初心者向け】なんでこんなところにリンク領域が?aタグの『見えないクリック領域』を暴け!

こんにちは、ユアサです。 今回は、誰でも一度は見落としてしまったことがあるかもしれないaタグの『見えないクリック領域』について、例と解決策を交えながら考えていきます。 何もないはずのところにクリック領域がある テキストや画像、あるいはhtmlタグ…

GSAPのタイムラインを必要なタイミングで動かす

こんにちは、ナカムラです。 GSAPのtimelineアニメーションをスキップしたり、リプレイする処理は前回行いました。 tech.arms-soft.co.jp scrollTriggerによって、特定の要素が表示されたタイミングでアニメーションする処理も書きましたね。 tech.arms-soft…

CentOSの後継「AlmaLinux」を試してみた

こんにちは、コバヤシです。 今回はCentOSの移行先として有力な「AlmaLinux」を試してみたいと思います。 AlmaLinuxとは CloudLinux社が開発・提供している無償利用可能なRHELクローンです。 CentOS 8のサポートが2021年12月31日に終了することが発表された…

API仕様を簡単に作成&管理しよう!

こんにちは!ドイです。 API仕様をまとめるときに、どんなツールを使っていますか?ExcelやGoogleスプレッドシートで管理したり。。。 色々だと思いますが、今回はOpenAPIについてまとめていきたいと思います。 OpenAPIとは swagger.io 「OpenAPI仕様(旧Swa…

入力値に合わせて即描画!canvasとJSを使ってレーダーチャートを作ってみよう -実践後編-

新年明けましておめでとうございます!ユアサです。 今年もarms inc. Engineer's Blogをどうぞよろしくお願いします。 前回の記事ではレーダーチャートのベース部分となる枠線の描画をしましたので、今回は実践の後編ということで動的に表示するレーダーチャ…

デザイン用語をおさらい!〜○○モーフィズム〜

こんにちは、ハヤマです。 突然ですが、Webデザインの記事などで「グラスモーフィズム」「クレイモーフィズム」「スキューモーフィズム」「ニューモーフィズム」といった「○○モーフィズム」系の名称がよく登場します。 もしくはエンジニアの方でしたら、デザ…

Phpstormの便利機能を使って作業効率化!!

こんにちは!ドイです。 今回はPhpstormのよく使う!という機能をまとめたいと思います。 ショートカットはmacでの操作を前提としています。 検索 ファイル内検索 一番よく使う検索です。ファイル内の検索を行います。 ショートカット:command + F ファイル…

CSSで作る片側だけ可変する背景

こんにちは、中村です。 今回はCSSの話です。 フロントエンドの作業はデザインを下にマークアップとスタイルを作っていくところから始まります。 そこで、最近よく作るレイアウトの組み方をご紹介したいと思います。 片側だけ可変する背景 記事のタイトルに…

まるでWordpress? Editor.jsを試してみる インラインツール作成編

こんにちは コバヤシです。 今回は以前ブログで記事にしたEditor.jsでインラインツールを作成してみました。 tech.arms-soft.co.jp インラインツールとは インラインツールとは、テキストのブロックで文字を選択した時に出るツールのことです。 標準で太字に…

入力値に合わせて即描画!canvasとJSを使ってレーダーチャートを作ってみよう -実践前編-

こんにちは、ユアサです。 先日、canvasとJSを使ってレーダーチャートを作成していく記事の準備編を公開していましたが、今回より実践編となります。 前回の記事はこちら↓ tech.arms-soft.co.jp レーダーチャートのベースとなる枠線を作成しよう 今回はまず…

Illustratorでのルビ振りに便利なスクリプト「illustrator-ruby」

こんにちは、ハヤマです。 今回は、Illustratorでルビ設定をする際に便利なスクリプトについて、備忘を兼ねて記事にしたいと思います。 illustrator-ruby 「illustrator-ruby」はルビのサイズや揃え位置、進入処理・アキ挿入を調整してくれるスクリプトで、…

GSAPのtimelineアニメーションをスキップする

こんにちは、ナカムラです。 今回もGSAPの使い方についてご紹介します。 前回の記事でtimelineの使い方をご説明しました。 tech.arms-soft.co.jp このtimelineを使うと、一連のアニメーションを作ることができます。 サイトのオープニングアニメーションなど…

【Laravel9】今すぐ業務に使えそうな新機能を試してみた!!

こんにちは!ドイです。 今回は、最近の案件でLaravel9をさわる機会があったので、新しく追加された機能についてまとめていきたいと思います。 Enum PHP 8.1から使えるようになったEnumをLaravel9でも使用できるようになりました。 Enumとは PHPのドキュメン…

フルスタックかつ軽量!CodeIgniterを試す-DB編

こんにちは、コバヤシです。 前回に引き続きCodeIgniterをさわっていきます。 今回はDBまわりについて書いていきたいと思います。 tech.arms-soft.co.jp マイグレーションを行う まずはマイグレーションから行っていきます。 sparkコマンドでマイグレーショ…

スタイルを使いこなせ!要素の特徴やブラウザのサポート制限をくぐり抜けて使い分けるグラデーションについて考える

こんにちは、ユアサです。 前回からJSとCanvasでレーダーチャートを作成する記事を作成しましたが、弊社で取り扱った案件でグラデーションを使うことがあり自分の備忘録という意味でもまとめておきたいと思ったので、今回は少し逸れてCSSでグラデーションを…

Adobeがデザインツール「Figma」を買収!今後はどうなる?

こんにちは、ハヤマです。 2022年9月、Adobeがデザインツール「Figma」を200億ドル(約2.9兆円)で買収することを発表しました。 blog.adobe.com 2023年内には買収を完了する予定とのこと。 Figmaは自社ツールをガッツリAdobeと比較して紹介していたりと、結…

GSAPのonイベントを使って、画面に表示されている時だけアニメーションさせる

こんにちは、ナカムラです。 今回はアニメーションの演出でよく使うプラグイン「GSAP」の紹介になります。 GSAPとは アニメーションの実装を助けてくれるjavascriptのプラグインです。 基本的なブラウザはほとんど対応されています。 GSAP | GSAP | Docs & L…

【Laravel】フリーワード検索でやりがちなミスを回避!!

こんにちは!ドイです。 前回の記事では、AWSについて学んできました。 今回は、少し話題を変えまして、Laravelでデータ取得時にやりがちなミスを紹介したいと思います。 テーブル構成は、以下の通りとします。 それでは検索機能を実装していきたいと思いま…

フルスタックかつ軽量!CodeIgniterを試す-View編

こんにちは、コバヤシです。 前回に引き続き、CodeIgniterを試していきます。今回はViewの設定を行います。 tech.arms-soft.co.jp View CodeIgniterのviewのレンダーは標準では、素のPHPで行われます。 'デモです']); } } <body> <p>テスト</p> <p> </p></body>

入力値に合わせて即描画!canvasとJSを使ってレーダーチャートを作ってみよう -準備編-

こんにちは、ユアサです。 今更な内容になってしまいますが、今回は図形やアニメーションを描画できるcanvas要素とJSを使ってテキストボックスに入力した値に応じて描画ができるレーダーチャートを作っていきたいと思います。この記事では五角形のレーダーチ…