投稿日:

サイズ・カラーなど自由にカスタマイズできるローダー

サイズ・カラー・速度や方向まで自由にカスタマイズできるローダーをご紹介します。

ローダーの実装にはいろんな便利なツールがありますが、ちょっとした変更が難しかったり、サイズが変わるとぼやけたりして使いにくいものもありますよね。
Loading UIは、js不要で40種類以上のデザインのローダーが設置できます。
→Loading UI

デザインはどこにでも使えるシンプルなものから、少し変わったものまで用意されています。

サイズ、カラー、アニメーションの速度などさまざまな設定が簡単にできます。

投稿日:

LaravelでMySQLではなくSQL Server（RDS）を採用する際の注意点とシステム構築のポイント

1. はじめに

LaravelでWebアプリケーションを開発する際、データベースの第一選択肢としてMySQLやPostgreSQLが選ばれることが多いかと思います。しかし、エンタープライズ向けのシステム開発や、既存の社内資産（Microsoftエコシステム）との統合、あるいはクライアントの指定などにより、SQL Server（Microsoft SQL Server）を採用しなければならない局面があります。

クエリビルダやEloquent（ORM）によってデータベースの違いはある程度抽象化されますが、設計や運用のフェーズでは、SQL Server特有の仕様や挙動の違いについて事前に把握しておく必要があります。

この記事では、実際にLaravel × SQL Serverの構成でシステムを構築した際の経験をもとに、実装時における具体的な注意点と、AWSのRDSで稼働させる際のインフラ視点での考慮すべきポイントをまとめました。

2. Laravel実装・仕様における注意点（MySQLとの違い）

まずは、Laravelのアプリケーションコードやデータベース設計（マイグレーション）を行う上で、MySQLとの違いに留意すべきポイントを解説します。

① ドライバーの導入
Laravelのコンテナやローカル開発環境（Dockerなど）を立ち上げただけでは、SQL Serverには接続できません。PHPからSQL Serverに接続するためには、拡張機能である「Microsoft Drivers for PHP for SQL Server（pdo_sqlsrv）」と、OS側に「Microsoft ODBC Driver」を個別にインストールする必要があります。
Dockerfileにこれらのインストール処理を追加するステップが発生するため、初期の環境構築フェーズで考慮しておくべきポイントです。
② 【事例】UUIDのケース（大文字・小文字）による影響

Laravel側で主キーや外部キーとしてUUIDを採用する場合、データベースのデータ型による挙動の違いに注意が必要です。

Laravelの

Str::uuid()

などで発行されるUUIDは、通常アルファベット小文字（例:

a1b2c3d4-...

）です。しかし、これをSQL Serverの

uniqueidentifier

型の列に登録すると、データベース側では自動的にアルファベット大文字（例:

A1B2C3D4-...

）に変換されて格納されます。

PHP
// Laravel側で発行（小文字）
$uuid = (string) Str::uuid();
// "a1b2c3d4-..." User::create(['id' => $uuid, 'name' => 'テストユーザー']);
// SQL Server側には大文字で保存される
// "A1B2C3D4-..."
SQL Serverの照合順序（Collation）がケースインセンシティブ（大文字小文字を区別しない：

_CI

）であれば、SQLの検索（

WHERE

句など）自体は問題なく一致します。

しかし、「取得したデータをアプリケーション（PHP）側で厳密に文字列比較する」「JavaScript（フロントエンド）にそのまま渡して、フロント側で厳密な比較（

===

）を行う」といった処理を含んでいる場合、大文字と小文字の差異によって不一致と判定されてしまうケースがあります。

【対応策】
SQL Serverから取得したUUIDをプログラム側で扱う際は、常に

strtolower()

や

Str::lower()

で小文字に統一するか、型を

uniqueidentifier

ではなく

varchar(36)

にして文字列として小文字のまま保存するなどの設計上の工夫が有効です。

③ マイグレーションの挙動差
Laravelのマイグレーションファイルで

$table->string('name')

と定義した場合、MySQLでは

varchar

型になりますが、SQL Serverでは

nvarchar

型（Unicode文字列）として作成されます。

nvarchar

は日本語などのマルチバイト文字を考慮する上で安全ですが、1文字あたりに必要なバイト数が異なるため、インデックスの最大サイズ上限に影響を与える場合があります。また、外部キー制約の命名規則や長さの上限もMySQLとは異なるため、既存のマイグレーションファイルを流用する際は事前の検証が推奨されます。

④ 生SQL（MySQL固有関数）の互換性
クエリビルダを基本とする場合でも、複雑なクエリで

whereRaw()

や

selectRaw()

を使い、生SQLを書くことがあります。この際、MySQL特有の関数を使っていないか確認が必要です。

    • 日付の取得: MySQLの
      NOW()

      は、SQL Server（T-SQL）では

      GETDATE()

    • 文字列結合: MySQLの
      GROUP_CONCAT()

      は、SQL Serverでは

      STRING_AGG()

    • ページネーション:
      LIMIT / OFFSET

      の記述（SQL Serverのバージョンや構文によっては

      OFFSET FETCH

      を使用）

これらはクエリビルダの自動吸収の対象外となるため、SQL Serverの構文に合わせて記述する必要があります。

3. AWS RDS（SQL Server）で稼働させるときの注意点

インフラをAWS上に構築し、マネージドデータベースであるAmazon RDSでSQL Serverを運用する場合、オープンソースのMySQLとは異なる運用・コスト面の特性を考慮する必要があります。
① 【事例】クエリのメモリ見積もりと処理の待ち時間（ウェイト）への対策
運用フェーズにおけるリソース管理において、SQL Server特有のメモリ管理アルゴリズムに留意する必要があります。
SQL Serverのオプティマイザは、クエリを実行する際、事前に必要となる使用メモリ量を多めに見積もる（Memory Grant）性質があります。
これにより、以下のような挙動が発生することがあります。
  • データ量が少なく軽量なクエリであっても、一時的なソートや結合（Join）が含まれていると、システムが「この処理には一定以上のメモリが必要である」と推測してメモリを要求する。
  • 同時に複数のリクエストが集中すると、データベース全体の空きメモリが一時的に不足し、処理が実行されずにメモリ確保の順番待ち（RESOURCE_SEMAPHOREウェイト）が発生する。
  • 結果として、データ量が少ないにもかかわらず、レスポンスに大幅な待ち時間（遅延）が生じてしまう。
【対応策】
MySQLなどの感覚で「データ量が少ないうちは最小限のスペック（db.t4g.microなど）で対応できる」と判断すると、思わぬボトルネックになることがあります。この挙動に対応するためには、インデックスを徹底的に最適化してメモリ要求量を抑えることはもちろん、「メモリ割り当てに余裕を持たせる（RDSのインスタンスクラスをはじめから高めに選定する）」というインフラ側からのアプローチが効果的です。
② ライセンス費用によるコスト面の影響
MySQLやPostgreSQLはオープンソースですが、SQL Serverは商用データベースであるため、RDSの利用料金にMicrosoftのライセンス費用が内包されます。
同じスペック（vCPUやメモリ量）のインスタンスを選択しても、MySQLと比べるとランニングコストが高くなる傾向があります。さらに、マルチAZ（冗長化）構成にする場合、選択するエディション（Standard Editionなど）によってライセンス要件が変わるため、事前のコストシミュレーションが不可欠です。
③ Amazon Auroraの選択肢について
AWSの強力なフルマネージドDBである「Amazon Aurora」は、現在のところMySQL互換とPostgreSQL互換のみの提供となっています。
そのため、SQL Serverを採用する場合はAurora独自の柔軟なオートスケーリングや高速なレプリケーションの仕組みを直接利用することはできません。通常のAmazon RDS（マルチAZ構成時は、SQL ServerのAlways On可用性グループなどの仕組みを用いた同期）として、堅実な運用設計を行う必要があります。
④ タイムゾーンの固定仕様
RDSでSQL Serverのインスタンスを作成する際、オプショングループ等を利用してタイムゾーン（例:

Tokyo Standard Time

）を設定することができます。

しかし、このタイムゾーン設定はインスタンス作成時に一度決定すると、後から変更することができません。「デフォルトのUTCのまま立ち上げてしまい、後から日本時間に変更したくなった」という場合は、データベースのSnapshotから新しいインスタンスを再作成・移行する大掛かりな作業が必要になるため、最初の構築時に確実に設定しておく必要があります。

4. まとめ

Laravelという優れたフレームワークのおかげで、データベースの違いは高度に抽象化され、共通のコード資産で開発を進めることができます。しかし、詳細な仕様に踏み込むと、今回紹介した「UUIDの大文字化に伴うアプリケーション側での比較への影響」や「SQL Server特有のメモリ見積もり仕様によるレスポンスへの影響」のように、RDBMS固有の挙動への理解が求められます。
Web上のLaravelに関する情報の多くはMySQLやPostgreSQLを前提に書かれていることが多いため、SQL Serverを組み合わせる際は、これらの特性をチーム全体で事前に共有しておくことが大切です。
初期段階から十分なメモリスペックの確保と、実際のデータ挙動を意識した厳密な検証環境でのテストを行うことで、安定したシステム構築が可能となります。
投稿日:

LaravelでExcel出力をする方法

LaravelでExcelをインポート・エクスポートしたい

LaravelでExcelやCSVのインポート・エクスポート機能を実装したい場合に便利なのがLaravel Excelです。
composer経由でインストールすることができます。
実際にLaravelExcelをインストールしてExcelファイルを書き出すところまでの手順を簡単に解説します。
※usersテーブルのデータを出力する処理を実装するため、前提としてusersクラスにユーザーの追加をお願いします。

インストール

Composer経由でインストールします。

composer require maatwebsite/excel

インストール後に下記コマンドを実行してmakeの欄に「make:export」と表示されていればインストール完了です。

php artisan list

Exportクラスを作成する

LaravelExcelでは出力内容をExportクラスに定義します。
そのためまずはExportクラスを作成します。

php artisan make:export UsersExport --model=User

すると「app/Exports/UsersExport.php」が作成されます。

collection()がExcelへ出力するデータを返すメソッドです。
今回は「User::all()」を返しているため、usersテーブルの内容がそのままExcelになるはずです。

ルーティング作成

web.phpにルーティングを作成します。
下記コードをそのまま貼り付けて使用できます。

use App\Exports\UsersExport;
use Maatwebsite\Excel\Facades\Excel;

Route::get('/users/export', function () {
    return Excel::download(new UsersExport(), 'users.xlsx');
});

実際にサーバーを起動して出力

追加したルーティングにアクセスしてダウンロードしてみましょう。

http://localhost:8000/users/export

すると「users.xlsx」がダウンロードされます。
usersテーブルにデータがあれば、Excelファイル内に一覧が出力されます。

まとめ

Laravel12でLaravel Excelを使う流れは以下の通りです。

1. パッケージをインストール
2. Exportクラスを作成
3. collection()で出力データ定義
4. Excel::download()でダウンロード

基本はこれだけです。
他にも様々な機能が用意されているので、公式ドキュメントを読んで色々試してみるのも面白いです。
Laravel Excel公式ドキュメント

投稿日:

1行でも複数行でも最後を「…」にして省略するcss

文章の最後を「…」にして省略する表現は、よく使うので備忘録です。

■完成物

See the Pen
Untitled by matsu (@pochi__2828)
on CodePen.

■解説

1行にしたい場合はシンプルにこんな感じです。

  overflow: hidden; // オーバーする文字を非表示に
  white-space: nowrap; // 1行表示なので改行しない
  text-overflow: ellipsis; // 最後に三点リーダーを付与

複数行にしたい場合は行数を設定します。
display: -webkit-box;と-webkit-box-orient: vertical;はセットで使用します。
Flexboxの古い仕様ですが、複数行省略の際に便利ということで広く使用されています。

  overflow: hidden; // オーバーする文字を非表示に
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; // 表示する行を指定
投稿日:

SonarQubeを使ってソフトウェアの静的コード解析 (SAST)をしてみる

ソースコードの脆弱性診断を行う機会があったのでSonarQubeを使ってみました
Windowsマシン上での実施した手順です

SonarQubeのCommunity版を入手します
https://www.sonarsource.com/open-source-editions/sonarqube-community-edition/
Download for free、Only Downloadでzipファイルがダウンロードができます
※この時最新バージョンがダウンロードされますが、この後使用するJavaバージョンと相性悪いなどの場合
少し前のバージョンの使用を検討してください

zipファイルを展開して任意のパスに配置します
例)C:\sonarqube\sonarqube-26.2.0.119303

Javaで動作するためjava.exeのパスを環境変数に追加します
(Javaがない場合、先にインストールしてください)
変数名：SONAR_JAVA_PATH
例)C:\Program Files\JetBrains\IntelliJ IDEA 2025.3.1.1\jbr\bin\java.exe

今回はそのほか設定をデフォルトのまま進めます

nodeのパッケージが1点必要でした
以下コマンドで@sonar/scanをインストールしてください
npm install -g @sonar/scan
(nodejs、npm未導入の場合、先にインストールしてください)

StartSonar.batを起動します
パス)bin/windows-x86-64/StartSonar.bat

初回起動の場合以下の出力となります

ブラウザにて以下URLにアクセスします
http://localhost:9000/
以下画面になります

ログインします
初期設定のユーザID/パスワードはadmin/adminです
ログイン後パスワードの変更が必要になります

トップ画面です
今回はローカルにあるソースコードに対して実施しますので
Create a local projectから始めます

プロジェクト情報を設定します
プロジェクト表示名、プロジェクトキーは任意で(対象のもとのプロジェクト名など)
メインブランチ名はこの場合は任意で

プロジェクト構成ですが
標準かカスタムかの選択は今回は標準で進めます

プロジェクトができました
続けて解析をかける対象への設定を行います
Locallyを選択します

トークンを生成します
特に変更なしでGenerate

対象環境のPG言語、OSを選択すると
解析のコマンドが生成されるのでコピーします
(PG言語は仮でよいです。今回Otherとしましたがこの後実際はPythonコードを対象にかけましたが特に問題ありませんでした)

対象のソースコードがあるディレクトリ(プロジェクト)に移動して先ほどのコマンドを実行します
※注意)コマンドの最初のsonar-scanner.batはsonar-scannerと.batなしに変更が必要でした

コマンド実行結果です
successfullyで終わっていれば成功しています

ブラウザ画面を見ると、解析結果画面が表示されています

全体の結果としてはPassedになっていますがSecurity Hotspotの項で1件発生していました。詳細を見てみます

今回の指摘は優先度も低く対応しなくてもよいかなという内容でしたが
危険性、対策など各情報へアクセスできるのでそこから危険性、処置対策の判断をしていくものになります

投稿日:

cssアニメーションで横に流れる文字を作る

cssアニメーションで簡単に流れる文字を作ります。

■完成物

See the Pen
cssだけで流れる文字 by matsu (@pochi__2828)
on CodePen.

■解説

ベースとなるHTMLには、無限ループにするためにテキストを2回記述する必要があります。
そのテキストをflexboxで横並びにし、アニメーションで-50%移動させると繰り返し同じ文字が流れていきます。
テキストは必ずwhite-space: nowrap;を設定し、改行が入らないようにしてください。

投稿日:

Kotlin MultiplatformでWindowsデスクトップアプリとそのインストーラーを作ってみる

以前JavaFXを使ったWindowsデスクトップアプリのインストーラー作成の手順を紹介しましたが、InteliJを使ったKotlin Multiplatformであればもっとお手軽に出来たので紹介します

準備するのはInteliJです。以下からダウンロード、インストールしてください。InteliJを使うとプロジェクトの作成時などでJavaやGradleなどの必要なものがセットアップされます

https://www.jetbrains.com/ja-jp/idea/

手順

(1)InteliJ初期画面ですがまずKotlin Multiplatformプラグインをインストールします

(2)プロジェクト_新規プロジェクトを選択

(3)ジェネレーターにKotlin Multiplatformが選択できるようになっています

(4)プロジェクト設定を以下のように入力。今回はデスクトップのみとします。

(5)プロジェクトが初期作成され、ビルドが走ってエラーとなりました。コンソールを見るとJava24を使えとのこと、設定ページへのリンクもあります

(6)リンクを押すと以下のダイアログが開きダウンロードを押すだけで済みます

(7)Java24がインストールされてビルドも成功します

(8)実行してみます。GradleタスクからjvmRunを実行

(9)アプリ画面です。ボタンを押すと図形が表示されたり隠れたりします

(10)インストーラーを作成します。GradleタスクからpackageReleaseMsiを実行

(11)成功しました。コンソールにインストーラーファイルの出力先が出ています

(12)インストーラーファイルです

(13)インストーラーファイルを実行するとセットアップウィザードが始まります

(14)セットアップウィザード2

(15)セットアップウィザード3

(16)セットアップウィザード4

(17)セットアップウィザード5

(18)アプリがインストールされました

(19)アプリ実行

(20)インストーラーをカスタマイズします。アイコンファイルを追加します。追加先は以下のようなリソースフォルダです

(21)build.gradle.ktsにインストーラーの設定を追加します。compose.desktop > application > nativeDistributions項目です

(22)packageNameを変更してwindowsのshortcutをtrueにiconFileの指定を追加しました

(23)再びGradleタスクからpackageReleaseMsiを実行。packageNameに指定した名前でインストーラファイルができました

(24)インストラー実行後、デスクトップにショートカットが出来てアイコン画像が適用されています

以上

投稿日:

年末年始休業のお知らせ

平素は格別のご高配を賜り、誠にありがとうございます。
株式会社エイブリッジでは誠に勝手ながら、年末年始休業日を下記のとおりとさせていただきます。

【年末年始休業日】
2025年12月30日（火）～2026年1月4日（日）
※2026年1月5日（月）より、通常営業を開始致します。
※休暇中のお問い合わせにつきましては、2026年1月5日（月）以降に対応させていただきます。

ご不便をおかけいたしますが、何卒ご了承いただきますようお願い申し上げます。

投稿日:

Google Apps Script（GAS）でよく使う基本的なメソッド集

GASを触る機会がありましたので、今回はよく使う便利メソッド集をまとめていきます。

スプレッド操作系

// スプレッドシートを開く
const ss = SpreadsheetApp.getActiveSpreadsheet(); // アクティブなスプレッドシート
const ssById = SpreadsheetApp.openById('ID'); // IDで開く
const ssByUrl = SpreadsheetApp.openByUrl('URL'); // URLで開く

// シートを取得
const sheet = ss.getActiveSheet(); // アクティブシート
const sheetByName = ss.getSheetByName('シート名'); // シート名を指定して取得
const sheets = ss.getSheets(); // 全シート取得

// セルの値を取得・設定
const value = sheet.getRange('A1').getValue(); // 単一セルのデータみ取得
const values = sheet.getRange().getValues(); // シートの全データ取得（2次元配列）
const values = sheet.getRange('A1:B10').getValues(); // シートの特定範囲のみ取得（2次元配列）
sheet.getRange('A1').setValue('テキスト'); // 値を設定
sheet.getRange('A1:B10').setValues(values); // 範囲に設定

// 行・列の操作
const lastRow = sheet.getLastRow(); // 最終行番号
const lastCol = sheet.getLastColumn(); // 最終列番号
sheet.appendRow(['値1', '値2', '値3']); // 行を追加
sheet.insertRowAfter(1); // 指定行の後に挿入
sheet.deleteRow(2); // 行を削除

Google Drive操作

// ファイル操作
const file = DriveApp.getFileById('ID'); // ファイル取得
const fileName = file.getName(); // 名前取得
const fileUrl = file.getUrl(); // URL取得
file.setName('新しい名前'); // 名前変更

// フォルダ操作
const folder = DriveApp.getFolderById('ID'); // フォルダ取得
const files = folder.getFiles(); // フォルダ内のファイル
while (files.hasNext()) {
  const file = files.next();
  Logger.log(file.getName());
}

// ファイル作成
const newFile = folder.createFile('name.txt', 'content');
投稿日:

GSAPで横に流れる文字を作る

いにしえのHTMLタグ「marquee」のように、横に流れる文字をGSAPを使って作ります。
GSAPとは、簡単にアニメーションを実装できるJavaScriptライブラリです。

GSAP

■完成物

See the Pen
GSAPで流れる文字 by matsu (@pochi__2828)
on CodePen.

■解説

ベースとなるHTMLには、無限ループにするためにテキストを2回記述する必要があります。
そのテキストをflexboxで横並びにし、片方をleftでイイ感じの位置にずらします。
GSAPの設定は以下の通り。

xPercent　→マイナス指定で左方向に移動
duration　→動作時間
repeat　→-1で無限リピート
ease　→移動以外の動きは不要なのでnone

jQuery不要で簡単に動きを付けることができるので、GSAPは覚えていて損はないですね。