投稿日:

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は覚えていて損はないですね。

投稿日:

Agora APIExampleを使ってWeb通話してみる

Agoraはビデオや音声通話・ライブ配信を簡単に実装できるSDKツールです
Agoraを使ってWeb通話アプリを試そうとした際に
クイックスタートなどを参考にしてもある程度の実装・コーディングが必要になっていて．．．
とにかくまず動かしてみたいと思いやってみた記録です

◆前提(手順割愛)
・Windows11で作業します
・Androidアプリを作成してスマホで動かします
・AndroidStudioで作業します
・GitHubに接続します
・Agoraにサインアップしてアカウントを取得します
参考URL）https://jp.vcube.com/sdk/trial
・認証用にApp IDとApp Certificate用のTokenを作成します
参考URL）https://qiita.com/v-cube/items/c43dd8b0241f03fedc1d#app-certificate-%E3%81%AE%E6%9C%89%E5%8A%B9%E5%8C%96

◆
AgoraIO/API-Examplesというリポジトリがあります
URL）https://github.com/AgoraIO/API-Examples
Agoraのサンプル集なのでこれをビルドすればすぐアプリとして動かせると考えました

◆手順
まず上記リポジトリからCloneします、取得先はAndroidStudioのプロジェクトフォルダとします
例）C:\Users\【ユーザー名】\StudioProjects\API-Examples

上記フォルダをAndroidStudioで開きます

API-Examples内には各機種向け、各機能ごとのサブプロジェクトという構成になっています
今回使用するのはAPI-Examples/Android/APIExampleです

App IDとApp Certificate用のTokenを設定します
設定先はAPIExample/app/src/main/res/values/string_configs.xmlです

<string name=”agora_app_id” translatable=”false”>YOUR APP ID</string>

“YOUR APP ID”部分をApp IDに書き換え

<string name=”agora_app_certificate” translatable=”false”>YOUR APP CERTIFICATE</string>

“YOUR APP CERTIFICATE”部分をApp Certificate用のTokenに書き換え

以上でビルドすればAPKができるはずでしたがビルドができない、失敗などあったので以下を追加処置しました

●API-Examples/build.gradle
修正前

id 'com.android.application' version '8.5.0' apply false
id 'com.android.library' version '8.5.0' apply false

修正後

id 'com.android.application' version '8.5.2' apply false
id 'com.android.library' version '8.5.2' apply false

●API-Examples/gradle.properties
修正前

rtc_sdk_version = 4.0.1

修正後

rtc_sdk_version = 4.5.2

●API-Examples/app/build.gradle
修正前



android {

    namespace "io.agora.api.example"

    compileSdk 35

    defaultConfig {

        applicationId "io.agora.api.example"

        minSdkVersion 24

        targetSdkVersion 35

修正後



android {

    namespace "io.agora.api.example"

    compileSdk 34

    defaultConfig {

        applicationId "io.agora.api.example"

        minSdkVersion 24

        targetSdkVersion 34

以上でビルドが通るようになりました
◆リリースビルドしてAPKファイルを作ります
Android StudioでTerminalビューを開き
API-Examples/Android/APIExample配下にあるgradleのスクリプトを実行します

gradlew assembleRelease

API-Examples/Android/APIExample/app\build/outputs/apk/releaseにapkファイルができます

◆スマホでアプリを動かしてみる

Android端末2台にAPKをインストールします

起動します。アプリの初期画面です。いろんなサンプルのメニュー選択画面になっています。

メニューの一番目のLive Interactive Vide Streaming(Token Verify)を選択してみます

「App ID」、「Token」、「Channel ID」を入力してビデオ通話を開始する機能になっています。「App ID」、「Token」はAgoraで発行したものを使用する必要があります。今回はアプリに「App ID」、「Token」を埋め込んでいますのでこの機能は使いません

メニューに戻って2番目のLive Interactive Vide Streamingを選択します

「Channel ID」を入力してビデオ通話を開始する機能になっています。「App ID」、「Token」はアプリに埋め込んだ値が使用されます。

「Channel ID」に適当な値を入力してJOINボタンを押すとビデオ通話を開始します

ビデオ通話を開始して待ち受けている状態です。画面左側に自分のカメラ映像を映しています

もう一方のスマホでアプリを起動して同じくLive Interactive Vide Streaming画面から「Channel ID」に先ほどと同じ値を入力してJOINボタンを押します

ビデオ通話に参加しました。相手のカメラ映像が映し出されています。音声もつながっており会話できます

以上

投稿日:

Aviutl2がリリースされたらしいので触ってみる

2025年7月7日、動画編集用のフリーソフト「AviUtl2」がリリースされました。
AviUtl2の前身であるAviUtlをよく利用していたので、今回はAviUtl2を用いて簡単な動画の編集・出力を試してみようと思います。

そもそもAviUtlって？

AviUtlは1997年から存在する無料の動画編集ソフトで、様々なプラグインを導入して機能を拡張しやすい点が特徴です。昔から公開されているだけあり、プラグインも多種多様なものが有志の方々により公開されています。
使い方についてもたくさんの方が記事を公開していますので、そちらも参考にしてみてください。
《参考》AviUtlの易しい使い方

早速いろいろいじくり回してみる

①導入～動画ファイル読み込み
それでは早速AviUtl2を使ってみます。インストーラのダウンロードページは以下です。
AviUtlのお部屋

インストーラ版とexe版の2つがありますが、特にこだわりがなければインストーラ版でよいでしょう。
で、インストール後に起動してみた初期画面はこんな感じ。

画面中央上部に動画のプレビュー、下部分にタイムラインがあります。塗りつぶしていますが、左側にはディレクトリが表示されています。右側のウインドウはまだ不明なので一旦放置で。

ちなみに、前身のAviUtlの初期画面はこんな感じ。

ガチで何もありません。ウインドウに動画ファイルをD&Dすることで動画を編集することができます。
拡張編集プラグインを導入することで動画編集が行いやすくなります。（というより導入しないと編集ソフトとして圧倒的に使いづらさが目立ちます）
今回はAviUtl2について触っていくので、閑話休題。

左側のディレクトリから動画ファイルを探し、タイムラインにD&Dすることで、プレビューに動画が映るようになります。

今回はゲーム画面を録画した動画ファイルを用いて編集していきます。

②動画の切り取り、エフェクトの追加

動画の読み込みができたら、次は動画ファイルを編集したり、オブジェクトを追加してみます。（オブジェクト＝字幕や画像など）
動画上で余計な操作を行って冗長になっている部分を切り取り、コンパクトにしてみましょう。
切り取りたい箇所の開始地点をタイムライン上で指定し、Shiftを押しながらタイムラインをクリックすると、開始地点から終了地点までを範囲選択できます。
その状態で動画ファイルのレイヤーを右クリックし、「切り取りして詰める」を選択すると選択範囲を切り取った状態にしてくれます。
（各画像はgifファイルとなっているので、クリックして動きを確認してみてください）

ただやってみるとわかりますが、（元動画にもよりますが）切り取ったままの状態では開始地点～終了地点までの内容がまるまる消えるわけですので、動画の繋ぎ目としてもちろん違和感があります。
この繋ぎ目の違和感を消すために、切り取られた前後の動画ファイルにエフェクトを使います。

切り取りしたあとはタイムライン上に2つの動画オブジェクトができているはずなので、前半の動画オブジェクトをレイヤー1からレイヤー2に移します。

レイヤーの関係性として、レイヤーの番号が大きくなるほど、編集で前面に表示されます。現在のレイヤーの配置だと、
レイヤー1：動画後半部分
レイヤー2：動画前半部分
となるので、前半部分が優先して画面に表示されます。

エフェクトをかけるのは、このレイヤー分けした動画のうち、動画前半部分になります。先ほど放置していた右側下部を見ると、現在選択しているオブジェクトの詳細情報が表示されています。
詳細情報の「＋」部分をクリック→切り替え効果　と選択すると、動画の冒頭と最後にかかるエフェクトが選択可能です。今回はフェードというエフェクトを選択します。

これでレイヤー2の動画オブジェクトに対して画面切り替えのエフェクトをかけることができました。
ただし、このままでは前半動画のエフェクトで暗転→後半動画がいきなり映る、という状態になっているので、タイムライン上にある後半動画のオブジェクトを、前半動画の最後の部分に少し重なるようにします。
やり方は簡単で、後半動画、つまりレイヤー1に配置してある動画オブジェクトの先頭部分が、レイヤー2の動画の最後部分と重なるようにタイムライン上の配置を動かすだけです。

これで、いい感じに動画を繋ぐことができました。
ちなみに、現状だと動画の冒頭にもフェードがかかっている状態なので、冒頭にのみエフェクトをつけたい・消したい場合は、右側のオブジェクトの詳細情報の下側に、フェード（エフェクトの名称）という項目が追加されているので、そちらで編集可能です。

③オブジェクトの追加・編集

次は、字幕を入れてみたいと思います。
タイムライン上でオブジェクトが配置されていない部分を右クリック→オブジェクトの追加→テキスト　の順で字幕を入れることができます。
今回はレイヤー3に字幕用のテキストオブジェクトを追加しました。レイヤーは数字の大きいレイヤーほど前面に表示されるので、これで動画上に字幕が表示されるようになります。
逆に、動画オブジェクトよりも前のレイヤーにオブジェクトを配置してしまうと、字幕が表示されないので注意しましょう。

今度は字幕で表示する内容を記載します。
テキストオブジェクトを選択したあと、右側の詳細情報を下の方にスクロールするとテキストボックスがあるので、そちらで字幕として表示する内容を編集できます。なお、編集した内容はプレビューにリアルタイムで反映されます。
テキストの表示も詳細情報から変更可能なので、お好みのフォントにしましょう。画面上に表示される時間もタイムライン上のオブジェクトから変更可能です。

表示したいテキストが決まったら、画面上のどこに配置するかを決めます。
詳細情報からx軸、y軸を指定することでも編集可能ですが、今回はプレビュー上のオブジェクトを移動する方法で配置場所を決めます。（多分プレビュー上で移動している人がほとんどのはず。。）
これで字幕の編集もできました。

④動画の出力

編集に問題がなければ、あとは動画ファイルとして出力するだけです。
出力はウインドウ左上の「ファイル」→「ファイル出力」から可能です……が、デフォルトのままだとaviファイル、pngファイル、jpegファイルの3形式でしか出力できません。

動画ファイルのフォーマットとしてメジャーなのはmp4ファイルですが、mp4で出力したい場合はどうするかというと、プラグインを導入する必要があります。
https://apps.esugo.net/aviutl2-mp4exporter/
上記サイトにプラグインの導入方法まで記載されていますので、mp4で出力したい場合はそちらを参考にしてみてください。今回はavi形式で出力してみます。
出力形式を選択すると、保存用のダイアログボックスが開くので、保存場所・ファイル名を指定したあとに保存を押すと、動画出力が始まります。出力中は画面下部に出力状況が表示されるので、終わるまで気長に待ちましょう。

出力が完了したら、出力したファイルに問題がないか一通りご確認ください。

まとめ

今回はAviUtl2を使って動画編集をしてみました。使用感としては、AviUtlと比較してUIがひとまとめになってかなり操作しやすくなりました。
まだリリースされたばかりのソフトのため、AviUtl2用のプラグインはまだまだ充足しておらず、AviUtlのプラグインとも互換性がないため、初代をカスタムして使っていた人にとっては「初代のほうが使いやすい」という感想も挙がるかと思います。その反面、動画編集をしたことがない・AviUtlを触ったことはあるがあまり使っていなかったという人にとってはAviUtl2のほうが圧倒的に使いやすいかと思います。
これからAviUtl2用のプラグインもどんどん作られていくと思うので、将来性はかなり高い編集ソフトだと感じました。