Abridge-News
cssアニメーションで簡単に流れる文字を作ります。
See the Pen
cssだけで流れる文字 by matsu (@pochi__2828)
on CodePen.
ベースとなるHTMLには、無限ループにするためにテキストを2回記述する必要があります。
そのテキストをflexboxで横並びにし、アニメーションで-50%移動させると繰り返し同じ文字が流れていきます。
テキストは必ずwhite-space: nowrap;を設定し、改行が入らないようにしてください。
以前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日（月）以降に対応させていただきます。
ご不便をおかけいたしますが、何卒ご了承いただきますようお願い申し上げます。
GASを触る機会がありましたので、今回はよく使う便利メソッド集をまとめていきます。
いにしえのHTMLタグ「marquee」のように、横に流れる文字をGSAPを使って作ります。
GSAPとは、簡単にアニメーションを実装できるJavaScriptライブラリです。
GSAP
See the Pen
GSAPで流れる文字 by matsu (@pochi__2828)
on CodePen.
ベースとなるHTMLには、無限ループにするためにテキストを2回記述する必要があります。
そのテキストをflexboxで横並びにし、片方をleftでイイ感じの位置にずらします。
GSAPの設定は以下の通り。
jQuery不要で簡単に動きを付けることができるので、GSAPは覚えていて損はないですね。
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
修正前
修正後
●API-Examples/gradle.properties
修正前
修正後
●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のスクリプトを実行します
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ボタンを押します
ビデオ通話に参加しました。相手のカメラ映像が映し出されています。音声もつながっており会話できます
以上
2025年7月7日、動画編集用のフリーソフト「AviUtl2」がリリースされました。
AviUtl2の前身であるAviUtlをよく利用していたので、今回はAviUtl2を用いて簡単な動画の編集・出力を試してみようと思います。
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用のプラグインもどんどん作られていくと思うので、将来性はかなり高い編集ソフトだと感じました。
今回はデータベース設計について学んだことをまとめます。
特に実務でも必ず使う論理設計と正規化に重点を置き、初心者でもイメージしやすいように解説できたらと考えています。
DB設計は、ざっくり以下3つのステップで進めます。
・扱う情報や関係性を明確にする
・ER図（Entity Relationship Diagram）で表す
例：ユーザーが商品を注文する → 「ユーザー」「注文」「商品」というエンティティを洗い出す
・データをRDB（リレーショナルデータベース）で使える形に変換
・主キー、外部キー、正規化を行う
・データ型やインデックス設計
・DBMSごとの最適化
【ポイント】
概念設計は「何を扱うか」、論理設計は「どう整理するか」、物理設計は「どう動かすか」
論理設計は、データを重複が少なく矛盾が起きにくい形に整理する作業です。
2-1. 主キー（Primary Key）
・各行を一意に識別するためのキー
・重複やNULLは禁止
例：user_id、order_id
2-2. 外部キー（Foreign Key）
・他のテーブルの主キーを参照するカラム
・データの関係性を保つ
例：orders.user_id → users.user_id
2-3. データ型の選択
・正しい型を選ぶことで性能や整合性が上がる
・数値はINTやBIGINT、日付はDATEやDATETIME
例：ユーザーと注文の関係
テーブル : users
・user_id (PK)
・name
・email
テーブル : orders
・order_id (PK)
・user_id (FK → users.user_id)
・order_date
正規化とは、冗長性を減らし整合性を保つためにテーブルを分割する作業です。
一言で言うと「意味ごとにテーブルを分けて整理する」ことです。
・各カラムには1つの値だけを入れる
・繰り返しカラムを作らない
・複合キーの一部にだけ依存する列を分ける
・主キーが2つ以上のカラムで構成されている場合に注意
例： (order_id, product_id) が主キーで、order_dateはorder_idだけで決まる場合、order_dateは別テーブルに分離する
・主キー以外の列同士の依存を排除
例：住所テーブルに郵便番号から都道府県が決まる場合、都道府県は郵便番号から導けるため別テーブルに分離する
4. 正規化のメリットとデメリット
【メリット】
・データの重複削減
・更新時の整合性維持
・論理的な整理による可読性向上
【デメリット】
・JOINが多くなり、性能が落ちる可能性がある
・過度な分割は管理が複雑
実務では第3正規形まで行い、必要に応じて非正規化するのが一般的です。
・最初にしっかり設計すれば、後からの修正コストが大幅に減る
・正規化は理屈だけでなく、サンプルを作って試すと理解が深まる
・ER図を描くと頭の中が整理される
・完璧な正規化は不要で、システムの性質や速度も考慮が必要になる
・論理設計は「データを整理する技術」
・正規化は「冗長性をなくし整合性を保つ方法」
・実務では正規化とパフォーマンスのバランスが重要
・最初の設計が後の保守性を左右する
・書籍「達人に学ぶDB設計徹底指南書」
CTAとは「Call To Action（行動喚起）」の略語で、サイトへ訪問したユーザーを具体的な行動へ誘導することが目的です。
例えば、「お問い合わせ」や「お申し込みはこちら」などのボタンやリンクがそれです。
CTAを見直すことで、効果が上がった具体的な例が、abtest.designに掲載されているのでご紹介します。
https://abtest.design/tests/trial-for-free-cta
ボタンに注目してください。
左のA案は「SIGN UP FOR FREE（無料で登録）」、右のB案は「TRIAL FOR FREE（無料でお試し）」と書かれています。
A/Bテストの結果、B案はトライアル開始数が前月比104%増加したそうです。
些細な違いかもしれませんが、たった一言でも言葉選びは大切にしたいですね。
Java FXでJavaで手軽にGUIアプリを作れますが、いざそれを配布しようとすると少しハードルが高いです。少しトリッキーですが成功した実例をもとに手順を紹介します。
eclipseでMavenを使ってJava FXアーキタイプ（ひながた）から作成します
プロジェクトができてビルドまでできました。このまま実行すると
アプリが動作します。
プロジェクトをエクスポートします
jarファイルとlibフォルダが出力されます
次にカスタムJREを作成します。上図のパス上からコマンドラインを開きjlinkコマンドを実行します
jlink --module-path "C:\pleiades\2025-03\java\javafx-jmods-23.0.1" ^ --add-modules java.base,javafx.controls,javafx.fxml,javafx.graphics,java.management,java.naming ^ --output custom-jre
コマンドラインからjpackageコマンドを実行してMSI インストーラーを作成します。
jpackage --type msi ^ --input . ^ --main-jar jfxsample.jar ^ --main-class jp.co.abridge.jfxsample.App ^ --runtime-image custom-jre ^ --name JavaFXSample ^ --dest result
resultフォルダが出力されて中にmsiファイルがあります。これを実行してアプリをインストールします
インストールされました。ただしこれは仮のインストールでこれをもとに正式なインストーラーを作成します
Inno Setupを起動して以下のようなスクリプトを実行します
[Setup]
AppName=JavaFxSample
AppVersion=1.0
DefaultDirName={pf}\JavaFxSample
OutputBaseFilename=JavaFxSampleInstaller
DisableDirPage=false
CreateAppDir=true
PrivilegesRequired=admin
Compression=lzma
SolidCompression=no
UninstallDisplayIcon="{app}\JavaFxSample.exe"
[Languages]
Name: "Japanese"; MessagesFile: "compiler:Languages\Japanese.isl"
[Files]
Source: "C:/Program Files/JavaFxSample/app/*"; DestDir: "{app}/app"; Flags: ignoreversion
Source: "C:/Program Files/JavaFxSample/runtime/*"; DestDir: "{app}/runtime"; Flags: recursesubdirs
Source: "C:/Program Files/JavaFxSample/JavaFxSample.exe"; DestDir: "{app}"; Flags: ignoreversion
[UninstallDelete]
Type: filesandordirs; Name: "{userappdata}\JavaFxSample"
~/Documents/Outputフォルダにファイルが出力されます。これが最終のインストーラーファイルです
インストーラーを実行すると
インストールされて、起動すると
アプリが動作します
