Briswell Tech Blog

ブリスウェルのテックブログです

ローカル環境でS3とLambdaを実行するために、LocalStackを設定してみた

みな様こんにちは。
BriswellのSonと申します。

最近、以下の図に従ってLambdaをテストして実行するのに興味があります。

AWS環境では、上の処理の実行・テストが簡単ですが、localhostではファイルのアップやLambdaの起動などは難しいです。しかし、LocalStackを使用すると、簡単になります。

I. LocalStackとは

① 概要

  • ローカル環境でAWSのサービスのシミュレートするツールです。
  • AWSのリソースを使用せずにアプリケーションをテスト・開発できます。

参照先: https://docs.localstack.cloud/overview

② メリット

  1. ローカル開発への便利性
    AWSのリソースを実際に使用せずに、ローカル環境でアプリケーションを開発およびテストする環境を提供します。

  2. コスト削減
    AWSの実際のサービスを使用する必要がないため、開発およびテストにかかる費用を削減できます。

  3. 多くのAWSサービスのシミュレート
    S3、LambdaなどのさまざまなAWSサービスをシミュレートできる。これにより、さまざまなサービスを使用してアプリケーションをテストできます。

③ デメリット

  1. シミュレーションの制限
    AWSの一部のサービスを提供しますが、すべての機能が完全にシミュレートされているわけではありません。

  2. パフォーマンスの低下
    シミュレーション環境でのLocalStackのパフォーマンスは、AWSの実際の環境と比較して期待されるほど高くないことがあります。

  3. 複雑な設定
    設定は、新しいユーザーにとって複雑で理解しにくい場合があります。

II. 使ってみる

① イメージ

以下は、LocalStackがソースコードをLambdaに直接マウントする方法を示すイラストです。

イラストにより、ローカル環境でソースコードを実行できるために、LocalStackとDockerを利用する必要があります。

② 環境構築

LocalStackのインストール

macの場合】Terminalで下記のコマンドを実行する必要がある

brew install localstack/tap/localstack-cli
brew install awscli-local

【他のプラットホーム】下記のリンクを参照できます。 https://docs.localstack.cloud/getting-started/installation/

インストールしたら、LocalStack CLIとLocalStack AWS CLIのバージョンを確認するために、下記のコマンドを実行する。

localstack --version
awslocal --version  

Dockerのインストール

docker: https://docs.docker.com/get-docker/
docker-compose (version 1.9.0+): https://docs.docker.com/compose/install/

実装

LocalStackとDockerを導入したら、以下の内容でdocker-compose.ymlファイルを作成します。

version: "3.8"

services:
  localstack:
    container_name: localstack_test
    image: localstack/localstack:latest
    ports:
      - "127.0.0.1:4566:4566"            # LocalStack Gateway
      - "127.0.0.1:4510-4559:4510-4559"  # external services port range
    environment:
      - DEBUG=1
      - LAMBDA_REMOTE_DOCKER=0
      - LAMBDA_DOCKER_FLAGS=-e NODE_OPTIONS=--inspect-brk=0.0.0.0:9229 -p 9229:9229
      - LAMBDA_EXECUTOR=${LAMBDA_EXECUTOR-}
      - DOCKER_HOST=unix:///var/run/docker.sock
    volumes:
      - "${LOCALSTACK_VOLUME_DIR:-./volume}:/var/lib/localstack"
      - "/var/run/docker.sock:/var/run/docker.sock"

Dockerコンテナを起動するために、次のコマンドを実行します。

docker-compose up -d

下の添付した画像により、ローカル環境の作成が完了しました。

③ ローカル環境の管理

常にAPIのコマンドでサービスを管理できますが、もっと簡単に管理するために、下記のURLでアカウントを登録して、コンソールで管理できます。

https://app.localstack.cloud/dashboard

④ ローカル環境でサービスの登録方法

Lambdaの作成方法

functiontestのLambda関数を作成するために、Terminalで下記のコマンドを実行する。

awslocal lambda create-function \
    --function-name functiontest \
    --region ap-northeast-1 \
    --code S3Bucket="hot-reload",S3Key="$(pwd)/" \
    --handler dist/function.handler \
    --runtime nodejs18.x \
    --timeout 300 \
    --role arn:aws:iam::000000000000:role/lambda-role

上のコマンドにより、ソースコードが[dist]フォルダーの[function]ファイルにあります。

注意:Lambdaなどを作成・実行するために、Dockerを起動する必要があります

Lambdaをチェックしたい時に、下記のリンクで参照できます。 https://app.localstack.cloud/inst/default/resources/lambda/functions

上の添付した画像により、functiontestのLambda関数の作成が完了しました。

S3バケットの作成方法

buckettestのS3バケットを作成するために、Terminalで下記のコマンドを実行する。

awslocal s3api create-bucket --bucket buckettest --create-bucket-configuration LocationConstraint=ap-northeast-1

S3バケットをチェックしたい時に、下記のリンクで参照できます。

https://app.localstack.cloud/inst/default/resources/s3

上の添付した画像により、buckettestのS3バケットの作成が完了しました。

S3からLambda実行を発火の設定方法

buckettestのS3バケットからfunctiontestのLambdaを発火するために、Terminalで下記のコマンドを実行する。

awslocal s3api put-bucket-notification-configuration \
    --bucket buckettest \
    --notification-configuration '{
        "LambdaFunctionConfigurations": [
          {
            "Id": "1", 
            "LambdaFunctionArn": "arn:aws:lambda:ap-northeast-1:000000000000:function:functiontest",
            "Events": ["s3:ObjectCreated:*"]
          }
        ]
    }'

LambdaFunctionArnは、作成したLambdaの[Function Arn]です。

LambdaのDebugするために、[Visual Studio Code]の設定方法

プロジェクトの下に.vscodeのフォルダーを作成して、.vscodeの下に2つのファイルを作成する必要がある。

*launch.jsonファイル

{
  "version": "0.2.0",
  "configurations": [
      {
          "address": "127.0.0.1",
          "localRoot": "${workspaceFolder}",
          "name": "Attach to Remote Node.js",
          "port": 9229,
          "remoteRoot": "/var/task/",
          "request": "attach",
          "type": "node",
          "preLaunchTask": "Wait Remote Debugger Server"
      },
  ]
}

*tasks.jsonファイル

{
  "version": "2.0.0",
  "tasks": [
      {
        "label": "Wait Remote Debugger Server",
        "type": "shell",
        "command": "while [[ -z $(docker ps | grep :9229) ]]; do sleep 1; done; sleep 1;"
      }
  ]
}

ローカル環境でS3とLambdaを実行してみましょう

発火を確認するためにはブレークポイントを設定した方が良いです。

ブレークポイントを設定したら、[Visual Studio Code]の[デバッグの開始(F5)]ボタンを押下する。

LocalStackのコンソールのS3管理画面でファイルをアップロードして、[Visual Studio Code]側でアップしたファイルの情報が表示されます。

上記の画像により、ローカル環境でS3からLambdaの発火できました。

最後まで読んでいただきありがとうございました。
疑問があれば、コメントをしてください。

AWS Transfer FamilyでのSFTP環境を構築してみました

みな様こんにちは。
BriswellのSonと申します。

最近、帳票や画像などのファイルを読む・保存するために、SFTPサーバーの設定してみました。

SFTPサーバーは外部ユーザーがアクセスできるので、承認されていないものが公開されることを避けるために、適切な権限を与える必要があります。

AWSクラウドではSFTPサーバーを簡易的に管理するために、[Transfer Family]というサービスを提供しています。

添付した画像を参照すれば、大体な流れがわかると思いますが、詳しい設定方法を追記します。

I. S3バケットの作成

ファイルを保存するため、S3バケットを1つ作成する必要があります。
バケット名を bw-test-transferfamily と設定します。

上記の画像により、バケットの作成が完了しました。

II. Transfer Familyの作成

①. ポリシーの作成
ユーザーを認証するために、最初にIAMサービス側でポリシーを作成しないといけないです。
作成方法は下記の通りです。

[アクセス許可を指定] 画面で [ポリシーエディタ] 項目でJSONを選び、下記のルール内容を入力する。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "s3:ListBucket",
                "s3:GetBucketLocation"
            ],
            "Resource": [
                "arn:aws:s3:::bw-test-transferfamily"
            ],
            "Effect": "Allow",
            "Sid": "CommonS3Role"
        },
        {
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:DeleteObject",
                "s3:DeleteObjectVersion",
                "s3:GetObjectVersion",
                "s3:GetObjectACL",
                "s3:PutObjectACL"
            ],
            "Resource": [
                "arn:aws:s3:::bw-test-transferfamily/*"
            ],
            "Effect": "Allow",
            "Sid": "ReadWriteS3Role"
        }
    ]
}

次の画面は [確認して作成] です。
[ポリシー名] 項目で bw-user-transferfamily-policy を入力し、[ポリシーの作成] ボタンを押下する。

上記の画像により、ポリシーの作成が完了しました。

②. [Transfer Family] のユーザーのロール作成
ユーザーのアクションを管理するために、ロールを作成する必要があります。
詳しい作成方法は下記の通りです。

[信頼されたエンティティを選択] 画面では [信頼されたエンティティタイプ] を [AWS のサービス] に選択し、[ユースケース] 項目で [Transfer] を選択します。
選択後、[次へ] ボタンを押下する。

[許可を追加] 画面で bw-user-transferfamily-policy のポリシーを検索する。
Hitしたレコードから該当のレコードにチェックを入れて、[次へ] ボタンをクリックする。

[名前、確認、および作成] 画面では、[ロール名] で bw-user-transferfamily-role と入力する。
入力後、[ロールを作成] ボタンをクリックする。

上記の画像により、ロールの作成が完了しました。

③. [Transfer Family] 作成
最初に [AWS Transfer Family] 画面で [サーバーを作成] ボタンを押下します。
押下後、[プロトコルを選択] 画面に移動します。

SFTPメソッドでバケットへファイルをアップロードしたいので、[SFTP (SSH ファイル転送プロトコル) - Secure Shell 経由のファイル転送] を選択し、[次へ] ボタンをクリックする。

[ID プロバイダーを選択] 画面で [サービスマネージド] を選択します。
選択後、[次へ] ボタンを押下する。

[エンドポイントを選択] 画面でパブリックでアクセスしたいので、[パブリックアクセス可能] を選択します。
選択後、[カスタムホスト名]は [なし] に選択してもいいです。[次へ] ボタンを押下する。

[ドメインを選択] 画面でS3へ接続したいので、[Amazon S3] を選択します。
選択後、[次へ] ボタンを押下する。

[追加の詳細を設定] 画面でデフォルトのままにして、[次へ] ボタンを押下します。

確認と作成の画面で詳細な設定を確認し、OKだった場合、[作成] ボタンをクリックします。
注意:作成したら、1 時間あたり 0.30USDの料金がかかってしまうので、調査だけの場合は終わり次第削除したほうがいいです。

上記の画像により、[Transfer Family] の作成が完了しました。

④. [Transfer Family] のユーザー作成
ユーザーを作成するために、[Transfer Familyサーバー管理] 画面で先程作成したサーバーIDを押下する。
[詳細なサーバー] 画面に移動し、[ユーザー] 設定のグループで [ユーザーを追加] ボタンを押下する。

[ユーザーを追加] 画面で [ユーザー名] 項目を bw-user-transferfamily と入力し、[ロール] 項目で bw-user-transferfamily-role を選択し、ホームディレクトリで bw-test-transferfamily を選びます。

bw-test-transferfamily/csv のフォルダにファイルをアップしたいので、[オプションのフォルダ] 項目で csv を入力し、[制限付き] のチェックを入れます。

最後に追加ボタンを押下する。

上記の画像により、ユーザーの作成が完了しました。

⑤. ユーザーの [SSH パブリックキー] 追加
SSHキーを作成しておくために、自分のパソコンのTerminalで下記のコマンドを実行する。

ssh-keygen -t rsa -C "bw-test-transferfamily" -f ~/.ssh/bw-test-transferfamily
cat ~/.ssh/bw-test-transferfamily.pub
  • ssh-keygen -t rsa -C "bw-test-transferfamily" -f ~/.ssh/bw-test-transferfamily:[プライベートキー] と [パブリックキー] を作成するため。
  • cat ~/.ssh/bw-test-transferfamily.pub:[パブリックキー] 内容を取得し、[Transfer Family] のユーザーのSSHキー設計部分に追加するため。

SSHキー作成方法は下記の画像の通りです。

SSHキーの作成が完了したら、先程作成した [Transfer Family] のユーザーを押下して、[明細ユーザー] 画面に移動します。
[SSH パブリックキー] 設定のグループで [SSH パブリックキーを追加] ボタンを押下する。

[キーを追加] 画面の [SSH パブリックキー] 項目で作成したばかりキー(~/.ssh/bw-test-transferfamily.pubファイル内容)を入力後、[キーを追加] ボタンを押下する。

上記の画像により、SSH パブリックキーの追加が完了しました。

III. テスト

今回S3へファイルをアップロードするために、Cyberduckを使います。
設定方法は下記の画像の通りです。

Connection型が、[SFTP]
Sever: Transfer Familyサーバのエンドポイントを参照
Username: Transfer Familyサーバのユーザー名
SSH Private Key: 自分のパソコンでSSHキーを作成した時に、このファイルを作成しました。

必須項目の入力が完了したら、[Connect] ボタンを押下する。
問題がなければS3の bw-test-transferfamily/csvにあるファイルが表示されます。

上記の画像により、CyberduckアプリでS3へファイルをアップロードできました。

最後に

今回は、CyberduckなどからS3にSFTPの方法でアップロードするために、SFTPサーバの構成について共有しました。
最後まで読んでいただきありがとうございました。
疑問があれば、コメントをしてください。

WebRTCを使ってビデオ通話アプリを作ってみました

皆さん、こんにちは! 最近は天気が暖かくなってきましたね。もうすぐ花見の時期になってきて楽しみですね。

皆さん、仕事をする時はビデオ通話のサービスをよく使っていますか?Google MeetsかZoomか、色んなビデオ通話のサービスがないと仕事に困りますね。 自分の方はこれらのサービスはどうすれば作れるかちょっと気になったので、調べて作ってみました。 新しい技術ではないですが、WebRTCという技術が存在します。 WebRTCを使ったら、誰でもビデオ通話アプリを作れます。

WebRTC(英語: Web Real-Time Communication)は、ウェブブラウザやモバイルアプリケーションにシンプルなAPI経由でリアルタイム通信(英語: real-time communication; RTC)を提供する自由かつオープンソースのプロジェクトである。ウェブページ内で直接ピア・ツー・ピア通信を行うことによって、プラグインのインストールやネイティブアプリのダウンロードを行わなくても、ウェブブラウザ間のボイスチャットビデオチャット、ファイル共有などを実装できるようになる。

wikipediaによる


アプリの概要

  • ビデオ通話の時、ビデオORオーディオの通信を自由に切れます。
  • 画面共有はできます。

使う技術:WebRTC + socket.io

処理のフロー

処理のフローはこの下のフローチャートを参考してください。

flowchart
処理のフローチャート

一部のサンプルのソースコード

クライアント側のソースコード

  • navigator.mediaDevices.getUserMediaで自分のPCのビデオとオーディオのデータストリームを取得する:
const localStream = ref(undefined);
...
localStream.value = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true,
  });
  • RTCPeerConnectionを作成して、オファーを送る:
// 後の処理に必要
const pcArr: { toSocketId: string; pc: RTCPeerConnection }[] = [];
...
const pc = new RTCPeerConnectionRTCPeerConnection({
  iceServers: [
    { urls: 'stun:stun.services.mozilla.com' },
    { urls: 'stun:stun.l.google.com:19302' },
  ],
});
pcArr.push({ toSocketId: user.socketId, pc });

// ビデオを表示するため
const remoteVideoData = reactive({
  socketId: user.socketId,
  mediaStream: undefined as MediaStream | undefined,
  userName: user.name,
});
if (!remoteVideo.value.find((video) => video.socketId === user.socketId)) {
  remoteVideo.value.push(remoteVideoData);
}

pc.ontrack = (event) => {
  if (
    remoteVideoData.mediaStream === undefined ||
    remoteVideoData.mediaStream.id === event.streams[0].id
  ) {
    // ウェブカムからのビデオ
    remoteVideoData.mediaStream = event.streams[0];
  } else {
    // 画面共有からのビデオ
    screenSharingActive.value = true;
    screenSharingStream.value = event.streams[0];
    screenSharingVideo.value!.srcObject = screenSharingStream.value;
  }
};

localStream.value!.getTracks().forEach((track) => {
  pc.addTrack(track, localStream.value!);
});

const offer = await pc.createOffer();
await pc.setLocalDescription(offer);

io.emit('room.offer', user.socketId, pc.localDescription, userName.value);

pc.onicecandidate = (event) => {
  if (event.candidate) {
    io.emit('room.candidate', user.socketId, event.candidate);
  }
};
  • オファー情報を保存する、アンサー情報を作って送る:
io.on('room.offer', async (socketId: string, offer: RTCSessionDescriptionInit, name: string) => {
  const pc = new RTCPeerConnection({
    iceServers: [
      { urls: 'stun:stun.services.mozilla.com' },
      { urls: 'stun:stun.l.google.com:19302' },
    ],
  });

  localStream.value!.getTracks().forEach((track) => {
    pc.addTrack(track, localStream.value!);
  });

  const remoteVideoData = reactive({
    socketId,
    mediaStream: undefined as MediaStream | undefined,
    userName: name,
  });
  if (!remoteVideo.value.find((video) => video.socketId === socketId)) {
    remoteVideo.value.push(remoteVideoData);
  }

  pc.ontrack = (event) => {
    if (
      remoteVideoData.mediaStream === undefined ||
      remoteVideoData.mediaStream.id === event.streams[0].id
    ) {
      // ウェブカムからのビデオ
      remoteVideoData.mediaStream = event.streams[0];
    } else {
      // 画面共有からのビデオ
      screenSharingActive.value = true;
      screenSharingStream.value = event.streams[0];
      screenSharingVideo.value!.srcObject = screenSharingStream.value;
    }
  };

  await pc.setRemoteDescription(new RTCSessionDescription(offer));
  pcArr.push({ toSocketId: socketId, pc });

  const answer = await pc.createAnswer();
  await pc.setLocalDescription(answer);

  io.emit('room.answer', socketId, pc.localDescription);

  pc.onicecandidate = (event) => {
    if (event.candidate) {
      io.emit('room.candidate', socketId, event.candidate);
    }
  };
});
  • オファーとアンサー共通の情報を保存する:
io.on('room.candidate', async (socketId: string, candidate: RTCIceCandidate) => {
  const pc = pcArr.find((pc) => pc.toSocketId === socketId)?.pc;
  if (pc) {
    await pc.addIceCandidate(new RTCIceCandidate(candidate));
  } else {
    alert('RTC not found!');
  }
});
  • アンサーを保存する:
io.on('room.answer', async (socketId: string, answer: RTCSessionDescription) => {
  const pc = pcArr.find((pc) => pc.toSocketId === socketId)?.pc;
  if (pc) {
    await pc.setRemoteDescription(new RTCSessionDescription(answer));
  } else {
    alert('RTC not found!');
  }
});
  • 画面共有:
const screenSharingVideo = ref(null);
const screenSharingStream = ref(undefined);
...
screenSharingStream.value = await navigator.mediaDevices.getDisplayMedia({
  video: { cursor: 'always' } as any,
  audio: false,
});
screenSharingVideo.value!.srcObject = screenSharingStream.value!;
screenSharingStream.value.getVideoTracks()[0].onended = () => {
  stopScreenSharing();
};

for (const pcData of pcArr) {
  screenSharingStream.value.getTracks().forEach((track) => {
    pcData.pc.addTrack(track, screenSharingStream.value!);
  });

  // 再びオファー送る
  const offer = await pcData.pc.createOffer();
  await pcData.pc.setLocalDescription(offer);
  io.emit('room.reoffer', pcData.toSocketId, offer);
}
  • 画面共有のオファーを保存する、新しいアンサーを作って送る:
io.on('room.reoffer', async (socketId: string, offer: RTCSessionDescription) => {
  const pc = pcArr.find((pc) => pc.toSocketId === socketId)?.pc;
  if (pc) {
    await pc.setRemoteDescription(new RTCSessionDescription(offer));
    const answer = await pc.createAnswer();
    await pc.setLocalDescription(answer);
    io.emit('room.answer', socketId, pc.localDescription);
  } else {
    alert('RTC not found!');
  }
});
  • ビデオORオーディオ通信を切る
const toogleVideo = () => {
  const videoTracks = localStream.value.getVideoTracks();
  videoTracks?.forEach((track) => {
    track.enabled = false;
  });
};

const toogleAudio = () => {
  const audioTracks = localStream.value.getAudioTracks();
  audioTracks?.forEach((track) => {
    track.enabled = false;
  });
};

バックエンド側のソースコード

socket.on('room.candidate', (userSocketId: string, candidate: RTCIceCandidate) => {
  socket.to(userSocketId).emit('room.candidate', socket.id, candidate);
});

socket.on('room.offer', (userSocketId: string, offer: RTCSessionDescription, name: string) => {
  socket.to(userSocketId).emit('room.offer', socket.id, offer, name);
});

// 画面共有で使う
socket.on('room.reoffer', (userSocketId: string, offer: RTCSessionDescription) => {
  socket.to(userSocketId).emit('room.reoffer', socket.id, offer);
});

socket.on('room.answer', (userSocketId: string, answer: RTCSessionDescription) => {
  socket.to(userSocketId).emit('room.answer', socket.id, answer);
});

今日の記事はここまでです。 何か質問があれば、遠慮なくコメント欄に投稿してください。

CIからAWSにOIDCの方法でデプロイしてみた

みな様こんにちは。
私はBriswellのSonと申します。

最近、CIでAWSにOIDC方法でデプロイしてみました。

最初に私が作成した図を見ましょう!

添付した画像を参照したら、大体な処理がわかると思いますが、詳しい流れを書きます。

初めに

普通にAWSソースコードをデプロイするために、aws_access_key_idaws_secret_access_keyが必須な情報じゃないでしょうか。 しかし、OIDC方法を利用する際には、上記の2つの情報が先に設定する必要がない、その情報をAWS側で提供します。

基本的に流れは下記の通りです。

I. idPでTokenの発行

最初に、Buildは、CI idPへTokenの作成の命令を送ります。CI idPでもらったパラメーターとPrivateキーを利用し、Tokenを作成します。

Tokenの内容については、例えば:AWS側で案件のIdとユーザのIdで確認したい場合、Buildがパラメーターを渡す情報をTokenに入れる必要があります。

作成が完了した後にBuildに返却します。

II. AWSへTokenの送信

CI idPにTokenを作成してもらったら、BuildでAWS cliassume-role-with-web-identityの関数でrole-arnweb-identity-tokenAWS送信します。送信の目的としてはAWSサービスにアクセスする時に使うためのAccessKeyIdSecretAccessKeySessionTokenを3つ取得したいからです。

 - role-arnは、AWSでロールを作成しておきました。例えば:arn:aws:iam::xxxxxxxxxxx:role/Test-Role-deploy-dev
 - web-identity-tokenは、CI idPでTokenを発行したばかりです。

assume-role-with-web-identityのパラメーターの中にrole-arnweb-identity-tokenの以外、他のパラメーターもあります。
例えば:duration-seconds, role-session-name

III. AWSでIAMの認証

AWS側では、IAMがもらったrole-arnで「ID プロバイダ」を参照します。

上の画像はサンプルのロールです。

上の画像はサンプルの「ID プロバイダ」です。

設定したプロバイダの連絡情報でCI idPに連絡して、Publicのキーを取得します。連絡先は「プロバイダのURL + '.well-known/openid-configuration'」の形です。

Publicのキーを取得したら、IAMがTokenをパラメーターに変換します。

その後に、パラメーターとロールの設定した「信頼されたエンティティ」の比較を行います。ロールにしている場合、一時的な情報(AccessKeyId、SecretAccessKey、SessionToken)を発行し、Buildに返却します。もらったデータが指定していない場合、エラーを返却する。

IV. BuildでAWS認証の設定

最後にBuild側ではAWS認証情報をもらったら、「aws configure」のコマンドで保持します。

AWSにデプロイやアクセスなどするために、この情報を使います。この情報は一時的な情報なので、Buildが完了したら、このキーがなくなり、CI側に保存しないです。

最後に

上記は、CIからAWSにOIDCの方法でデプロイに関する基本的な共有です。
拙い文章でしたが、最後まで読んでいただきありがとうございました。
疑問があれば、コメントをしてください。

よろしくお願いします。

PHPのバージョンアップ影響調査(PHP7.4 to 8.2)

はじめに

PHP案件のバージョンアップを行う機会がありましたので、進め方を紹介します。 表題の通り、PHP7.4から8.2へのアップデートでした。

バージョンアップに向けた心構え

システムの規模に比例してバージョンアップのインパクトも大きくなっていきます。

バージョンアップを行うことで今まで動いていたコードが動かなくなることがあり、この動かなくなる部分 = バージョンアップ向けの改修 がどの程度発生するかの規模感を知るところから始めます。

(闇雲にバージョンアップ作業から始めてもスケジュールを立てられず、苦しいです)

大体は何かしら動かなくなる部分が出てきてしまい、バージョンアップ用の修正が必要となります。

バージョンアップ時の注意点を以下にまとめます。

  • 関数の振る舞いが変わる、廃止される等、互換性がなくなりソースの修正が必要になることがある
    • オフィシャルの変更点一覧など、一通り確認しておくと良い
    • (複数回のメジャーバージョンアップが必要な場合、バージョンアップよりも最新バージョンをベースに作り直したほうがトータルで安くつくこともある)
  • ライブラリもPHPの新しいバージョンに合わせて更新
    • 依存関係の問題で使えなくなる場合もある
    • ライブラリの更新が止まっており、PHPの新しいバージョンに追従できないこともある
  • バージョンアップ作業後は一通りの機能に問題がないか、実際に動かして検証する必要がある
    • 目に見える形でエラーは出ていないがバリデーションのかかり方が以前と異なる、のように実際に動かしてみないとわからないケースもある

また、日々進んでいる改修作業を止められない場合、本流の環境とは別にバージョンアップ環境を準備し、平行で進めていくとよいケースもあります。

  • STEP1:バージョンアップの検証環境にて、バージョンアップ作業を行いとりあえずで動くところまでを目指す
  • STEP2:バージョンアップの検証環境にて、入念に検証を行う
  • STEP2.5:本流の改修で出た差分を取り込む
  • STEP3:2~2.5でエラーや問題が出れば修正する
  • STEP4:2~3を繰り返し、安定した頃合いで本番へリリース
  • ※改修は止まっている、または本番を一定期間止めてもOKということであれば、直接本流の環境で作業を行うほうが対応コストは低いです

調査方法

ソースコードに修正が必要な箇所がどれだけ存在するか確認を行っていきますが、目検でソースコードを一つずつチェックしていくのはしんどいです。

PHPにはバージョンアップ時にも使える便利な静的解析ツールが存在しています。

静的解析ツールだけで100%の検証が保証されるというものではなく、あくまでも最低限確実に変更が必要な箇所を見つけてくれる程度であり、実際に動かしての検証は必ず行うものと考えておくと良いです。

機械的に必要箇所を見つけてくれるだけでも作業はかなり楽になるものです。

今回はPHP8向けの以下のツールを使用させていただきました。 (製作者様、大変感謝🙏 )

odan.github.io

コーディング規約をチェックをするphp_codesnifferをベースに、PHP8の規約に違反していないか、というルールを追加するphp-compatibilityとの組み合わせになります。 インストール手順はリンク先のページを参照ください。

実行例

PHP 8 Compatibility Check
実行してみると上記のように変更が必要な箇所を知らせてくれます。 ちなみに、今回のケースではERRORが230件、WARNが228件の結果です。...なかなかの件数が出てしまっていますね。

ERRORは互換性がなくなる等必ず修正しなくてはいけないもの、WARNは今後非推奨の予定が立っている等どうせなら一緒に修正したほうが良いもの、と理解しています。もしかしたらWARNでも修正しないと動かないというものがあるのかもしれません。

終わりに

今回はPHPのバージョンを8系へアップデートする際にphp_codesniffer+php-compatibilityの組み合わせで静的解析を行う話をまとめさせていただきました。

実行結果が出るとどの程度コードに影響が出るかを知れるだけではなく、実際には修正して再実行してというサイクルをERROR/WARNが0件になるまで繰り返していくという流れになります。

適切なツールを使用することで雪かきのような作業の負荷を軽減し、本来注力したい作業にリソースを向けていけると良いですね。

インボイス制度による影響と対応について

今回は去年から開始されたインボイス制度による影響と対応について投稿しようと思います。
2023年10月1日から制度が開始されましたが、
弊社では保守を行わせていただいている案件のシステムが多数ありますが、一部システムでこの制度の影響を受けることがありました。

インボイス制度ってなんだっけ...影響がある部分ってどこなんだろう...
と度々思うこともあるので備忘録として記載しておきます。

インボイス制度とは?

国税局のHPインボイス制度についてまとめた記事などを参考にしてみたところ

今回の制度で正確な消費税率や消費税額などを明示したインボイス(適格請求書)が必要になりました。

具体的には現行の請求書に登録番号、複数税率に対応した消費税率、消費税額の記載が必要になります。

このインボイス(適格請求書)がないと仕入税額控除ができなくなります。

仕入税額控除とは?

仕入税額控除ってなんなんだ...

と思って調べてみると
消費税を算出する際に売上の消費税額から仕入の消費税額を差し引くことを言うそうです。

仕入税額控除 = 売上の消費税額 - 仕入の消費税額

文字だけだといまいちピンとこないので図で表してみました

仕入税額控除の図解

仕入の消費税額が控除されないのは厳しいのでインボイス制度への対応は必須と言えそうです。。。

今回の制度によるシステムの影響

弊社では受発注管理システムとしての機能を備えたクラウドERPパッケージ「アイカタ」を開発しております。
今回の制度によって「アイカタ」インボイス制度を満たすような改修を行なっております。
「アイカタ」を参考に影響の具体例をまとめてみました。

・売上請求画面
複数税率に対応した消費税率、消費税額の表示、システム構成の変更

・請求書
売上請求画面に準じた表示の変更、適格事業者番号の追加

上記対応で「アイカタ」インボイス制度の要件を満たすシステムとなりました。

下記リンクからお問い合わせ頂くことで
「アイカタ」機能をお見せしてのご説明、インボイス制度に対するシステムのお悩み相談が可能です。
よろしければお気軽にお問い合わせください。
ai-cata.com

ブリスウェルのAI技術・サービス紹介 〜 画像分類・物体検出・表情認識・生成AIなど

(ブリスウェルでは現時点では画像生成AIのサービス化はしていません・・・)

ブリスウェルでは、AIを活用して様々なサービスを提供しています。 AIのみでも利用できますし、業務システムやモバイルアプリなどと連携することも可能です。

それでは紹介していきましょう。

続きを読む

ローカル環境で画面にQuickSightを使用するダッシュボードを埋め込んでみる。

どうもこんにちは。ブリスウェルのSonです。
最近、ウェブサイトでダッシュボードを埋め込むために、QuickSightをちょっと調査してました。忘れないように、基本的な手順をメモしておきます。
この記事は技術的な内容なので、QuickSightサービスの料金に関する問題を無視します。

言語: PHP (v 7.4)
必要なライブラリ: AWS SDK for PHP (v 3.x)

準備:CSV内容

tenant city itemtype price
tenant1 city1 item1 100
tenant1 city1 item2 200
tenant1 city2 item1 400
tenant1 city2 item2 500
tenant1 city3 item1 700
tenant1 city3 item2 800
tenant2 city1 item1 100
tenant2 city1 item2 200
tenant2 city2 item1 400
tenant2 city2 item2 500
tenant2 city3 item1 700
tenant2 city3 item2 800

依頼内容は
ダッシュボードを画面に埋めこむ
・特定のユーザーはtenant=tenant2の行のみ閲覧できるように

datasetについて
上のCSVをインポートして、データセットを作成します。
データセットの作成をしたら、RLS モードを設定する必要があります (行レベルのセキュリティ)
特定のユーザーのみを表示するので、列を「tanent」に設定する必要があり、タグ列を「hogetalent」のような値を設定できます。

データセットからダッシュボードの作成してみます。ダッシュボードを作成したら、こんな状態になります。 RLSを設定しましたので、自分のアカウントでも細かいダッシュボードが見えないです。

IAMのroleの設定について
ダッシュボードを表示するには、SDKにある「GenerateEmbedUrlForAnonymousUser」を実装する必要があります。
ただし、「GenerateEmbedUrlForAnonymousUser」が実行できるために、次のようなユーザーにロールを与える必要があります。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "quicksight:GenerateEmbedUrlForAnonymousUser"
            ],
            "Resource": [
                "arn:aws:quicksight:{region}:{account_id}:dashboard/*"
            ],
            "Condition": {
                "ForAllValues:StringEquals": {
                    "quicksight:AllowedEmbeddingDomains": [
                        "http://localhost"
                    ]
                }
            }
        },
 ]
}

注意: 該当する「AllowedDomains」の値を変更する必要があります。
例: https://abc.com

Coding
まずは下記のようなコマンドでAWS SDK for PHP (v 3.x)導入するする必要があります。

composer require aws/aws-sdk-php

以下のように必要な情報を指定する必要があります。

define('AWS_REGION', 'XXXXXXXX');
define('AWS_ACCESS_KEY', 'XXXXXXXX');
define('AWS_SECRET_ACCESS_KEY', 'XXXXXXXX');
define('AWS_ACCOUNT_ID', 'XXXXXXXX');

次に、次の内容のphpクラスを作成します。

<?php
require __DIR__. '/vendor/autoload.php';

use Aws\QuickSight\QuickSightClient;
use Aws\Exception\AwsException; 

class QuickSight {
     $this->credentials_ = [
           'version' => 'latest',
           'region' => AWS_REGION,
           'credentials' => [
               'key'    => AWS_ACCESS_KEY,
               'secret' => AWS_SECRET_ACCESS_KEY
           ]
    ];
}

次にgetEmbedUrlの関数を作成します。「generateEmbedUrlForAnonymousUser」の関数を実行するために、$dashboardIdのパラメーターを渡す必要があります。

<?php

public function getEmbedUrl($dashboardId) {
   $params = [
      'AllowedDomains' => [
         'http://localhost'
      ],
      'AwsAccountId' => AWS_ACCOUNT_ID,
      'Namespace' => 'default',
      'SessionLifetimeInMinutes' => 600,
      'AuthorizedResourceArns' => 'arn:aws:quicksight:${AWS_REGION}:{AWS_ACCOUNT_ID}:dashboard/$dashboardId',
      'ExperienceConfiguration' => [
         'Dashboard' => [
            'InitialDashboardId'=> $dashboardId
         ]
      ],
      'SessionTags' => [
         [
            'Key' => 'hogetenant',
            'Value' => 'tenant2',
         ]
      ]
   ];

    try {
      $client = new QuickSightClient($this->credentials_);
      $result = $client->generateEmbedUrlForAnonymousUser($params);
      $embedUrl = $result['EmbedUrl'];
      
      return $embedUrl;
    } catch(Exception $e){
      print $e->getMessage();
    }
}

tenant=tenant2の行のみを表示するので、hogetenantのタグ値をtenant2に指定する必要があります。
注意: 該当する「AllowedDomains」の値を変更する必要があります。
例: https://abc.com

ウェブに表示するダッシュボードの埋め込みリンクを取得したい場合は、次の手順を実行します。

<?php
$quickSight = new QuickSight();
$embedUrl = $quickSight->getEmbedUrl($dashboardId);

実行が成功した場合の $embedUrl の値は次のようになります。
https://ap-northeast-1.quicksight.aws.amazon.com/embed/xxxxxx&amp;identityprovider=quicksight&amp;isauthcode=true

次のようにiframe$embedUrlを挿入する必要があります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quicksight Demo</title>
</head>
<body>
  <iframe src="<?php echo $embedUrl ?>"></iframe>
</body>
</html>


結果が来ました。

ローカル環境でダッシュボードが正常に表示されました。
もし何か問題がございましたら、お手数ですがコメント欄にご記入いただければ幸いです。

スポーツ動画のタグ付け

そろそろ年末が近づいてきました。気持ちの良い秋晴れ(もう冬ですかね)の空が広がっています。先日、数年ぶりに体育館で運動をしました。普段PCと向き合ってガチガチの身体がほぐれて良かったです。

今回は久しぶりにAI関連の記事です。CLIPモデルを利用して動画を解析してみます。

CLIPはOpenAIによって開発されたモデルで、画像とその説明(テキスト)の関係を検出します。このモデルは、インターネットから集めた大量の画像とテキストのペアで学習しています。特定のタスク用に追加の学習を必要とせず、多様なシーンで精度を出せるのが魅力ですね。

体育館での運動の合間の一コマです。謎の動きをしていますが、はたしてCLIPモデルを何をしているか理解できるでしょうか。

1. 検出する動き(テキスト)を日本語・英語で定義

{
  "投げる": "throw",
  "歩く": "walk",
  "走る": "run",
  "飛ぶ": "jump",
  "泳ぐ": "swim",
  "踊る": "dance",
  "歌う": "sing",
  "座る": "sit",
  "描く": "draw",
  "寝る": "sleep"
}

2. テキストの特徴量をpickleファイルへ保存

import torch
import clip
import pickle
import json

# CLIPモデルの初期化
device = "cuda" if torch.cuda.is_available() else "cpu"
model, transform = clip.load("ViT-B/32", device=device)

# 事前に準備した日本語と英語の辞書
with open('japanese_to_english_dict.json', 'r', encoding='utf-8') as file:
    japanese_to_english_dict = json.load(file)

# 英語に翻訳されたタグをCLIPモデル用にトークナイズ
translated_tags = list(japanese_to_english_dict.values())
text = clip.tokenize(translated_tags).to(device)

# テキストの特徴量を計算
with torch.no_grad():
    text_features = model.encode_text(text)

# pickleファイルとして保存
with open('text_features.pkl', 'wb') as f:
    pickle.dump(text_features, f)

print("テキスト特徴量を保存しました。")

3. 動画を読み込んで各フレームにタグ付け

import cv2
import torch
import clip
import pickle
from PIL import Image
from collections import Counter
import json
import os
import glob

# 指定されたフォルダ内の画像を削除する関数
def delete_images_in_folder(folder, file_extension="*.jpg"):
    files = glob.glob(os.path.join(folder, file_extension))
    for f in files:
        os.remove(f)

# フレームにテキストを描画する関数
def draw_text_on_frame(frame, text, position, font=cv2.FONT_HERSHEY_SIMPLEX, 
                       font_scale=0.7, font_color=(0, 255, 0), line_type=2):
    cv2.putText(frame, text, position, font, font_scale, font_color, line_type)

# バッチごとにフレームを処理する関数
def process_batch(frame_batch, start_frame_index, model, transform, text_features, 
                  japanese_tags, japanese_to_english_dict, all_tags_for_video, 
                  output_folder, fps):
    # バッチ内の各フレームをRGBに変換
    batch_rgb = [cv2.cvtColor(frame, cv2.COLOR_BGR2RGB) for frame in frame_batch]

    # 変換されたフレームをPyTorchテンソルに変換
    batch_transformed = torch.stack([transform(Image.fromarray(img)) for img in batch_rgb]).to(device)

    # CLIPモデルを使用して画像の特徴量を抽出
    with torch.no_grad():
        image_features = model.encode_image(batch_transformed)
        logits_per_image = (image_features @ text_features.T)
        probs = logits_per_image.softmax(dim=1)
        top_tag_indices_list = probs.topk(N).indices

    # 各フレームごとに最も関連性の高いタグを選択
    for i, top_tag_indices in enumerate(top_tag_indices_list):
        valid_indices = [idx for idx in top_tag_indices if probs[i][idx] > SIMILARITY_THRESHOLD]
        top_tags_for_frame = [(japanese_tags[idx], probs[i][idx].item()) for idx in valid_indices]

        # 日本語タグを英語に変換
        top_tags_for_frame_english = [(japanese_to_english_dict[tag], score) for tag, score in top_tags_for_frame]

        # 現在のフレームのインデックスと時間を計算
        current_frame_index = start_frame_index + i
        current_frame_time = current_frame_index / fps

        # 処理中のフレームとそのタグをコンソールに出力
        print(f"Frame {current_frame_index} (Time: {current_frame_time:.2f} seconds): {top_tags_for_frame_english}")

        # フレームにタグを描画して保存
        for j, (eng_tag, score) in enumerate(top_tags_for_frame_english):
            text = f"{eng_tag}: {score:.2f}"
            draw_text_on_frame(frame_batch[i], text, (10, 30 + j*30))

        frame_filename = f"{output_folder}/frame_{current_frame_index}.jpg"
        cv2.imwrite(frame_filename, frame_batch[i])

        # 抽出されたタグを全タグのリストに追加
        for tag, _ in top_tags_for_frame:
            all_tags_for_video.append(tag)

# メインスクリプトの開始
device = "cuda" if torch.cuda.is_available() else "cpu"
model, transform = clip.load("ViT-B/32", device=device)

# pickleファイルからテキスト特徴量を読み込み
with open('text_features.pkl', 'rb') as f:
    text_features = pickle.load(f).to(device)

# 動画ファイルを読み込み
cap = cv2.VideoCapture('sports-movie.mp4')
fps = int(cap.get(cv2.CAP_PROP_FPS))

# 日本語と英語の辞書を読み込み
with open('japanese_to_english_dict.json', 'r', encoding='utf-8') as file:
    japanese_to_english_dict = json.load(file)

# 日本語のタグリストを作成
japanese_tags = list(japanese_to_english_dict.keys())

# 処理された全フレームのタグを保存するリストを初期化
all_tags_for_video = []

# バッチサイズ、上位N個のタグを選択するための数、類似度のしきい値を設定
BATCH_SIZE = 16
N = 3  # 上位N個のタグを選択
SIMILARITY_THRESHOLD = 0.2  # 類似度のしきい値

# バッチ処理用のフレームリストを初期化
frame_batch = []

# 出力されるフレームを保存するフォルダの設定
output_folder = 'output_frames'
if not os.path.exists(output_folder):
    os.makedirs(output_folder)  # フォルダが存在しない場合は作成
else:
    delete_images_in_folder(output_folder)  # フォルダが存在する場合は中の画像を全て削除

# 動画の各フレームを処理
frame_count = 0
while cap.isOpened():
    ret, frame = cap.read()  # フレームを読み込み
    if not ret:
        break  # フレームがない場合は終了

    frame_batch.append(frame)  # バッチリストにフレームを追加
    # バッチサイズに達したら処理を実行
    if len(frame_batch) == BATCH_SIZE:
        process_batch(frame_batch, frame_count - len(frame_batch) + 1, model, transform, 
                      text_features, japanese_tags, japanese_to_english_dict, 
                      all_tags_for_video, output_folder, fps)
        frame_batch = []  # 処理後はバッチリストをリセット
    frame_count += 1

# 残りのフレームを処理
if frame_batch:
    process_batch(frame_batch, frame_count - len(frame_batch) + 1, model, transform, 
                  text_features, japanese_tags, japanese_to_english_dict, 
                  all_tags_for_video, output_folder, fps)

cap.release()  # 動画の読み込みを終了

# タグの出現回数を集計し、ファイルに出力
tag_counts = Counter(all_tags_for_video)
with open('output_tags.txt', 'w', encoding='utf-8') as f:
    for tag, count in tag_counts.most_common():
        f.write(f"{tag}: {count}\n")  # タグとその出現回数をファイルに書き込み

print("動画の処理が完了しました。")

4. 実行結果と分析

タグとその出現回数は以下となります。

投げる: 832
踊る: 479
走る: 238

いいですね。多くは「投げる」と判断しています。

「踊る」「走る」はどのようなポイントで判断されているのが気になるところです。いくつかピックアップしてみます。

① 走る(run) 86%

まあ確かにこの画像だけを見ると走っているように見えますね。

② 投げる(throw) 50% & 走る(run) 41%

腕の部分は投げている雰囲気を出しています。

③ 投げる(throw) 75%

投げてます!

④ 踊る(dance) 74%

珍妙なダンスですが... 投げても走ってもいないですね。

5. 最後に

動画を読み込んで解析する場合、各フレームの静止画像に対して解析することになるので、上記のようにポイントでは誤った判断をすることがあります。そのため、全体を通してどのタグが一番多く検出されたのかを見ることで最終的な判断とすることがよさそうです。

Webのプッシュ通知を実装してみました。。。

iOS がよやくWebプッシュ通知を対応したので、PWAのPush通知を実装して色々なフィーチャーを使ってみました。

「Webプッシュ通知」とは、通知を許可したユーザーにWebブラウザ経由でプッシュ通知(受信操作をしなくてもメッセージが自動表示される通知方式)を送信する機能です。ユーザーは「Webプッシュ通知」を許可するだけで受信できるようになります。 なお「Webプッシュ通知」はPushAPINotificationAPIという2つの仕組みから成り立っています。

今回は vuejs のフロントエンドと nodejs バックエンドでWebプッシュ通知の機能を実装してみました。バックエンド側では web-push というパッケージをインストールする必要があります。

  1. フロントエンドでプッシュ通知の許可をリクエストするボタンを配置する必要があります。なければ iOS でプッシュ通知の許可をリクエストできません。
  2. フロントエンドで ServiceWorkerRegistration.pushManager.subscribe でサブスクリプションを登録します。登録結果はバックエンドのAPIを叩いて、保存します。

     serviceWorkerRegistration.pushManager.subscribe({
         userVisibleOnly: true,
         applicationServerKey,
     });
    
  3. バックエンドで WebPush.sendNotification を叩いたら フロントのサービスワーカー へ通知送信できます。

     WebPush.sendNotification(
         subscription,
         JSON.stringify({
             title: body.title,
             options: body.payload,
         }),
         options,
     );
    
  4. サービスワーカーで通知表示の処理を行います。(通知のボタンを押す時の処理もサービスワーカーで対応できます)

     self.addEventListener('push', (event) => {
         const data = event.data?.json();
         event.waitUntil(
             self.registration.showNotification(data.title, data.options),
         );
     });
    

Webプッシュ通知の表示は色んなオプションで調整できます。但し、 Windows/MacOS/iOS/Android では表示が異なるので、注意してください。仕様はここで参考してください: https://developer.mozilla.org/ja/docs/Web/API/ServiceWorkerRegistration/showNotification

  • badge:Androidのみ対応する

Androidで対応するbadgeのオプション

  • icon:iOSは未対応、MacOSではアプリのアイコンの代わり大きい画像として表示される
  • image:iOS/MacOSは未対応
  • actions:iOSは未対応、action.iconはWindowsのみ対応する

Windowsのwebプッシュ通知、icon + image + actions をセットしている

MacOSのプッシュ通知、icon + actions をセットしている

iOSのプッシュ通知

Androidのwebプッシュ通知、bade + icon + image + actionsをセットしている

皆さんもWebプッシュ通知を実装してみましたか?何かいい経験があれば コメント欄で共有してくれると幸いです。 では、今日の記事はここまでです。また後で。。