こんにちは、ドイです！ 前回に引き続き、データサイエンス100本ノックに挑戦していきます。 前回の記事 tech.arms-soft.co.jp S-046: 顧客データ（customer）の申し込み日（application_date）はYYYYMMDD形式の文字列型でデータを保有している。これを日付型に変換し、顧客ID（customer_id）とともに10件表示せよ。 SELECT customer_id, TO_DATE(application_date, 'YYYYMMDD') FROM customer LIMIT 10; S-047: レシート明細データ（receipt）の売上日（…

こんにちは、コバヤシです。 今回は、ファイルの変更を検知して他のサーバーと同期する方法について書いていきます。 サーバーはAlmaLinux8を想定しています。 inotifywait inotifywaitはLinuxシステムでファイルやディレクトリの変更を監視するためのコマンドラインツールです。 今回はファイル変更の監視としてinotifywaitを使用します。 dnf install -y inotify-tools inotifywaitをインストールします。 rsynce rsyncはファイルやディレクトリをリモートとローカルの間で同期するためのコマンドラインツールです。 同期に使用…

こんにちは、ハヤマです。 今回は、Figmaの「コメントの追加」機能以外で、メンバー間での申し送りやメモを共有するのに便利なウィジェットをご紹介します。 Figmaの「コメントの追加」機能 まずはFigmaのデフォルトの機能について、簡単に。 ツールバーにある吹き出しアイコンが「コメントの追加」機能です。 コメントを加えたい箇所にクリックすることで、コメントや画像を残すことができます。 ファイル共有をしている第三者に対してメンションすることも可能です。 コメント機能の便利な点・不便な点 この機能の便利な点は、どこにコメントしたかわかりやすいところです。 画面をどんなにズームアウトしてもコメント…

こんにちは、ユアサです。 今回は写真ギャラリーの特定の写真をクリックしてモーダルで表示し、更にモーダル内で他の写真も閲覧できるモーダルギャラリーの実装をしていきたいと思います。 そもそもどうして自分で作成しようとしたのか ギャラリーモーダルを実装するだけなら既存のプラグインを調べればいくらでも出てきますし、実装も簡単です。ただ実装するにあたって極力脱jQueryを目指していきたいというのが第一にあったので、大半のプラグインは候補から外れていきました。 非jQueryのものであれば動作の軽いluminousがありますが、htmlの書き方もオプション実装の際にも少しクセがあるので、他により良い方法…

こんにちは、コバヤシです。 ついにLaravel11が3月15日にリリースされました。 約1ヶ月遅れのリリースですね。 前回のブログでLaravel11の変更点をまとめましたが、今回のリリースに伴い、再び変更点を見ていきたいと思います。 前回のブログはこちら tech.arms-soft.co.jp スケルトンのスリム化 アプリケーションの基本構造がとてもスリムになり、 フォルダ構造が以前のバージョンと比べてシンプルになりました。 app/Console、app/Exceptions、app/Http/Middlewareのフォルダが削除され、ルート、ミドルウェア、例外はbootstrap/a…

こんにちは！ドイです。 今回は、homebrewをアップデートしたところ、PHPが実行できなくなったので、解決していきます。 現象 PhpStormで、PHP_CodeSnifferが実行できなくなりました。 上部メニューから、PhpStorm > settings > PHP > 品質ツール > PHP_CodeSnifferまで進み「…」をクリックします。 モーダルが表示されるので、「検証」ボタンをクリックすると「Can not run PHP Code CodeSniffer」とエラーが表示されました。 確かに、PHP_CodeSnifferが動いていないようです。 再度上部メニューから…

こんにちは、ナカムラです。 最近関わった案件で文字に下線が引かれたデザインが多かったので、今回は下線のスタイルを調整するときに使うCSSプロパティをご紹介したいと思います。 DEMO See the Pen CSSで文字の下線をスタイル調整する by Nakamura (@takayo-nakamura) on CodePen. まず一番上はtext-decoration: underline;で下線を表示しただけの状態です。 デフォルトなのですが、デザインでこの状態になっているものに出会ったことがありません。 色が違う、幅が違う、表示位置が違うなど、デザイン通りに作るにはスタイルの調整が必要…

こんにちは、ユアサです。 以前業務でSwiperを使ったスライダーをスマホ表示時に解除してカラム表示にすることがあったので、今回はPC・スマホそれぞれのウィンドウ幅の可変で都度Swiperを実装・解除する方法について備忘録の意味も込めて書きまとめたいと思います。 そもそもSwiperについて この記事を閲覧していただいている大半の方は知った上でここに辿り着いていると思うので詳しい紹介は省きますが、Swiperはスライダーを簡単に実装できるJSプラグインです。スライダー系プラグインの中でも定番と言ってもいいでしょう。 公式サイトで実装までの手順が書かれていますが、おそらくフロントエンド初心者の方…

こんにちは、ハヤマです。 今回は、和文のフリーフォント探しに便利なサイトをご紹介します。 モジザイ 「モジザイ」は、和文のフリーフォントを書体の種類やスタイルから連想するイメージワードをもとに約300種類の中から検索できるサイトです。 www.mojizai.com デザインを作成する際、例えばキャッチコピーやあしらいとしてのワンポイントなど、欲しいテイストのフォントを検索して探すことがあると思います（例「フォント かわいい ゴシック」など）。 検索して、関連ページを開いて、また検索して、、、だと手間がかかりますが、こちらのサイトを利用すれば、検索結果上で書体のサンプル確認（フォントによっては…

こんにちは、ナカムラです。 今回はCSSだけで円グラフを作ってみたいと思います。 文字を配置するにあたり、CSSの三角関数cos()・sin()を使用します。 グラフを作るというよりまだ使ったことがなかったので、三角関数を使うというのが今回のテーマになります。 DEMO See the Pen CSSだけでグラフ上に文字を表示する円グラフを作る by Nakamura (@takayo-nakamura) on CodePen. 背景色の作り方 .chartを円形にし、背景を円形のグラデーションで設定します。 :root { --r: 100px; } .chart { position: r…

こんにちは、コバヤシです。 今回はLaravelの次期バージョンであるLaravel11の新機能を見てみたいと思います。 Laravel11のリリース時期 laravel11は2024/2/6にリリースされることがアナウンスされていましたが、 この記事を書いている2024/2/10時点では、まだリリースされていないようです。 公式では2024年第1四半期となっていました。 laravel.com Laravel11のインストール 正式にリリースされていないので、インストールには--devを付ける必要があります。 laravel new app-name --dev composerからのインス…

こんにちは、ドイです！ 前回に引き続き、データサイエンス100本ノックに挑戦していきます。 前回の記事 tech.arms-soft.co.jp S-041: レシート明細データ（receipt）の売上金額（amount）を日付（sales_ymd）ごとに集計し、前回売上があった日からの売上金額増減を計算せよ。そして結果を10件表示せよ。 WITH receipt AS ( SELECT sales_ymd, SUM(amount)AS sum_amount FROM receipt GROUP BY sales_ymd ORDER BY sales_ymd ) SELECT sales_ym…

こんにちは、ユアサです。 弊社の案件で要素の角が欠けている（ベベルのある）デザインをコーディングする機会がありましたので、今回はその備忘録も兼ねてまとめていきたいと思います。 どのように作成すればいいのかさっぱり分からなかったので、こちらの記事を参考にさせていただきました。 （参考記事はかなり前に書かれているもので、現在ではradial-gradientの書き方が少し変わっているので、多少調整したもので紹介します） webrocketsmagazine.com ベベルをCSSで表現する そもそもベベルという表現を知らなかったので念の為に説明すると、一般的に要素の角が欠けたようなデザインのことを…

こんにちは、ハヤマです。 今回は、比較的新しい画像ファイルのフォーマット「WebP（ウェッピー）」について紹介したいと思います。 WebP（ウェッピー）とは 2010年に米Googleが開発した画像ファイルのフォーマットのことで、ファイルの拡張子は「.webp」です。 公開当時はまだ対応ブラウザが少なく、しばらくは普及しない状態が続きましたが、現在ではご覧の通り。 （2024年1月現在） WebP image format | Can I use... Support tables for HTML5, CSS3, etc IEのサポートも終了していることから、活用しているサイトも増えてきまし…

こんにちは、ナカムラです。 以前の記事でtimelineをスキップするメソッドをご紹介しました。 tech.arms-soft.co.jp 今回は逆再生をしてみたいと思います。 DEMO See the Pen GSAPのtimelineアニメーションを逆再生する by Nakamura (@takayo-nakamura) on CodePen. アニメーション自体はスキップの時とほとんど同じです。 ※逆再生した時に分かりやすいように回転はなくしています。 reverseBtnをクリックした時のメソッド animationTl.reverse() .reverse()を使用しました。 これだ…

こんにちは、コバヤシです。 今回は、2023のPHPフレームワークのトレンド比較を元に、2024年のトレンドを予測してみたいと思います。 以前のトレンド比較はこちら tech.arms-soft.co.jp tech.arms-soft.co.jp 期間は5年間、比較するフレームワークは以下のものにします。 Laravel CakePHP Laminas（Zend Framework） Symfony CodeIgniter トレンド比較【すべての国】 ! 圧倒的にLaravelが高いトレンドを維持していますね。これは前回の調査の時から変わっていないようです。2番手にはLaminasが来ており…

こんにちは、ドイです！ 前回に引き続き、データサイエンス100本ノックに挑戦していきます。 前回の記事 tech.arms-soft.co.jp S-036: レシート明細データ（receipt）と店舗データ（store）を内部結合し、レシート明細データの全項目と店舗データの店舗名（store_name）を10件表示せよ。 SELECT receipt.*, store.store_name FROM receipt JOIN store ON receipt.store_cd = store.store_cd LIMIT 10; S-037: 商品データ（product）とカテゴリデータ（c…

こんにちは、ユアサです。 吹き出し付きのコメントがあるようなページのコーディングをすることがありますが、その度に格闘していた『吹き出しの尖っている部分どう作るか問題』に（一旦）終止符を打ちたいので、今回は備忘録も兼ねて自分が考えた方法について書きたいと思います。 （吹き出しの尖っている部分ですが「ツノ」や「しっぽ」と呼ばれているらしいので、以下その呼び方で書いていきます） 調べるとよく出てくる作成方法 テキストの要素を親要素とし、擬似要素で三角形を作ってpositionプロパティで位置調整をしています。吹き出しが背景色のみなら擬似要素1つ、枠線があるものの場合は擬似要素を2つ用意して重ねること…

こんにちは、ハヤマです。 今回は、ついにIllustratorにも実装されたAdobe Fireflyの新機能「テキストからベクター生成」を使って、ベクターイラストの生成を試してみたいと思います。 ※「Adobe Firefly」について詳細はこちらのページをご覧ください。 「テキストからベクター生成」とは ユーザーがテキストで指示を出した内容（プロンプト）をもとに、AIがベクターでイラストを生成してくれる機能です。 現在はIllustrator2024で、Beta版として実装されています。 生成したベクターの著作権について 「Beta機能からの出力は、製品またはその他の場所で特に指定されてい…

こんにちは、ドイです！ 前回に引き続き、データサイエンス100本ノックに挑戦していきます。 前回の記事 tech.arms-soft.co.jp S-031: レシート明細データ（receipt）に対し、店舗コード（store_cd）ごとに売上金額（amount）の標準偏差を計算し、降順で5件表示せよ。 SELECT store_cd, STDDEV_SAMP(amount) AS amount FROM receipt GROUP BY store_cd ORDER BY amount DESC LIMIT 5; S-032: レシート明細データ（receipt）の売上金額（amount）に…

こんにちは、ナカムラです。 先日11月11日に開催された「アクセシビリティカンファレンス福岡」に参加しました。 Youtube配信を見ていただけですが参加と言う。見るだけでも大事です。 アクセシビリティの向上は障害者のためだけではなく、みんなが使いやすくなる まずは意識することが大切 小さな 調べてみた やってみた 自分のところを直してみた をやってみましょう！（outline:0をやめてみた、など些細なことからでOK！） という内容でした。 と言うことで、まずは調べ、知る、そして共有することから始めてみたいと思います。 気になった情報を自分なりにまとめてみた アクセシビリティの基準 漠然とア…

こんにちは、コバヤシです。 引き続きLaravel Backpackをカスタマイズしていきます。 前回まではこちら。 tech.arms-soft.co.jp tech.arms-soft.co.jp バリデーションを実装する まずはバリデーションを設定したいと思います。 今回はForm Requestでバリデーションを設定します。 インストール編でも書きましたが、 php artisan backpack:crud のコマンドでコントローラー等を作成した時に、 バリデーションを書く場所を「request」にしていると app/Http/Requests/以下にファイルが出力されているはずです…

こんにちは、ユアサです。 前回の記事ではキーフレームの話と、フレーム・キーフレームとトゥイーンを使って工夫した動作のアニメーションを作成しました。今回は予告していた通り、アニメーションを作成する上での基本原則となる『アニメーションの12の原則』についてまとめ、原則を参考にして試しにアニメーションを作成してみます。 ↓前回の記事はこちら tech.arms-soft.co.jp 12の原則ってなに？ アニメーションの12の原則（以下「12の原則」）の話は調べると専門の詳しい方々が記事にして詳細をまとめてくださっているので、各原則についてそれぞれ深掘りして紹介することは省いてどのようなものであるか…

こんにちは、ハヤマです。 今回は、Figmaのプラン内容について書いていきたいと思います。 Figmaのプラン 現在、Figmaの利用プランは以下の4種類があります。 （2023年10月31日現在） スターター Figmaプロフェッショナル Figmaビジネス エンタープライズ 参照元は、公式のこちらのページ。 www.figma.com 上記ページの「機能を比較する」の表を参照すると、「Figmaプロフェッショナル（以下、プロフェッショナルプラン）」と「Figmaビジネス（以下、ビジネスプラン）」では対応する機能が結構近しいことや、一部カテゴリーの機能に関してはビジネスプランが特出しているこ…

こんにちは、コバヤシです。 前回に引き続き、Laravel Backpackを触ってカスタマイズしていきたいと思います。 まずは英語表記になっている箇所の日本語化です。 前回の記事はこちら。 tech.arms-soft.co.jp タイトルや見出しを変更する タイトルや見出しが日本語ではなく「User」などと表示されているので、これを変更したいと思います。 変更するファイルは以下で行います。 Http/Controllers/Admin/UserCrudController.php <?php public function setup() { CRUD::setModel(\App\Mod…

こんにちは、ナカムラです。 先日、inputタグのチェックボックスとラジオボタン自体をCSSで装飾できないか？ という質問をいただいたのでこの記事で紹介したいと思います。 フォームでよく使われるチェックボックスやラジオボタンの装飾方法は、labelやspanなどで選択肢のテキストを囲み、チェックボックスやラジオボタンであるinputタグをdisplay:none;にします。 inputのcheckedの状態によって見た目を変える必要があるため、必ずinputタグの次にラベル要素を置く必要があります。 ※:has()が使えるようになると不要になりますが、実務で使うのはもう少し先の話になりそうです…

こんにちは！ドイです。 10/8(日)、大田区産業プラザPiOで開催されたPHPカンファレンスに参加しました。 今回は、初のオフライン参加をした感想をまとめたいと思います。 PHPの今とこれから 2023 廣川類さんによるお話です。 例年通り、今後のPHPについてどう変化していくのかというお話でした。 初のオフライン参加だったので、PCの前で聞くのとは違う「PHPカンファレンスに来たのだ！」という実感を持てて嬉しかったです。 Laravelのコードとわたしたちのコードとの距離を保つ 大橋佑太さんによる発表です。 セッションの構成 Laravelの概要 Laravelの便利機能 Laravelに…

こんにちは、ユアサです。 前回の記事では新規ドキュメントの設定と3種類のトゥイーンの説明、ファイルへの書き出し方法の紹介をしました。これで新規作成から書き出しまで一通りの作業ができるようになりました。 今回は改めてキーフレームの話と、フレーム・キーフレームとトゥイーンを使ってより工夫した動作のアニメーションを作成していきます。 ↓前回の記事はこちら tech.arms-soft.co.jp キーフレームは2種類ある 基本的な動作編で紹介したキーフレームですが、実は「キーフレーム」と「空白キーフレーム」の2種類があります。「キーフレーム」を使ったアニメーションは作成しましたが、では一体「空白キー…

こんにちは、ハヤマです。 前回の記事では、スタイルを1つ1つ登録する方法について書きました。 tech.arms-soft.co.jp 今回は、プラグインを用いて一括登録する方法について学習していきたいと思います。 カラーやテキストのスタイルをまとめて登録するプラグイン 選択したカラーやテキストの要素を、一括でスタイルに登録してくれるプラグインです。 Styler www.figma.com 使い方 ①スタイル登録用のシェイプまたはテキストを作成する 前回の記事で作成した素材を流用します。 ②レイヤー名を編集 プラグインでスタイルを一括生成する際、スタイルの名称はレイヤー名から紐づきます。 シ…

こんにちは、ドイです！ 前回に引き続き、データサイエンス100本ノックに挑戦していきます。 前回の記事 tech.arms-soft.co.jp S-021: レシート明細データ（receipt）に対し、件数をカウントせよ。 SELECT COUNT(*) FROM receipt; S-022: レシート明細データ（receipt）の顧客ID（customer_id）に対し、ユニーク件数をカウントせよ SELECT COUNT(DISTINCT customer_id) FROM receipt; S-023: レシート明細データ（receipt）に対し、店舗コード（store_cd）ごとに…