2024-11-02

【AWS】AWS Organizationsの画面を確認してみた

AWS Organizations

※2024.11.2の情報です。

概要

AWSのOrganizationsについて、実際に触って画面を確認したので自分の備忘として残しておく。

組織のRoot

・Root配下にhkane8teamの組織単位（OU）を作成

・さらにhkane8team配下にtest-childの組織単位（OU）を作成

hkane8teamの画面

子にtest-childがある

（参考）組織単位（OU）を作成した直後は、サービスコントロールポリシーにデフォルトでFullAWSAccess（AWS管理ポリシー）が直接アタッチされた状態となっていた。

ポリシーの画面

ポリシーとして５つのポリシータイプが有効化・無効化できる

Organizationsの勉強をすると、よく目にしていたSCP（サービスコントロールポリシー）もここにある。

有効化したポリシーの画面

hkane8teamのポリシーを見ると、有効化したポリシーごとに、アタッチされている内容が確認できる。有効化していない（無効化）のポリシーは、ポリシータブ内に表示されなかった。

（参考）タグポリシーを作成してアタッチしていたが、一度タグポリシーを無効化して、再度有効化すると無効化前に設定してたポリシーは削除された。

各ポリシーの作成画面

以下、確認した画面。

・AIサービスのオプトアウトポリシー

・バックアップポリシー

・チャットボットポリシー

指定する際の項目

・サービスコントロールポリシー

・タグポリシー

以上です。

2024-09-14

【AWS】移行関連のサービスを図で整理してみた

AWS

※2024.9.14時点で調査した情報です。

概要

AWSの移行関係のサービスも色々ありすぎて理解できていなかったため、全体を可能な範囲で自分用に整理してみた。

整理した図

（補足）図を作成中に参照した情報

検出方法２の推奨の記載

docs.aws.amazon.com

上記より、調査時点で、推奨される移行サービスは ASW MGN

aws.amazon.com

AWS MGNの図は、以下を参照して記載。

docs.aws.amazon.com

Snowmobileサービス終了してました。

www.cnbc.com

以上です。

2024-09-14

【AWS】分析関係サービスの関連図をできる範囲で整理してみた

AWS

※2024.9.14時点で調査した情報です。

概要

AWSの分析関係のサービス名が色々ありすぎてわからないため、全体を可能な範囲で自分用に整理してみた。※記載できていないサービスや関連が他にもあるはず。

整理した図

（補足）サービス名称変更の記事

aws.amazon.com

以上です。

2024-05-01

【技術やってみた】Mac M1上でadb(Android Debug Bridge)を利用してスマホエミュレータのスクリーンショット取得等を試してみた

Android Studio adb

概要

Mac M1でスマホ上でのコマンド実行を操作できるadb(Android Debug Bridge)を使って、スクリーンショットと動画を取得してみた。

環境

・Mac OS Sonoma 14.4
・Visual Studio Code 1.73.1（adb実行）
・Android Studio （スマホのエミュレータを起動）

参考

adbは以下を参考にやってみた。

Android Debug Bridge（adb） | Android Studio | Android Developers

実行内容

やってみた結果を以下の手順で記載した。
・PCにadbをインストール（1から3）
・スマホのエミュレータを起動するためにAndroid Studioをインストール（4から14)
・adbを利用し、スマホのエミュレータのスクリーンショットと動画保存を実行(15から21）

　　[PCにadbインストール]

adbはAndroid Studioに含まれるため、Android Studioのインストーラを下記ページからダウンロードしてインストールした。

https://developer.android.com/studio?hl=ja
VSCodeを起動し、adbコマンドを利用できるように以下パスを設定した。
cd
vi .zshrc
export PATH=$PATH:/Users/kane/Library/Android/sdk/platform-tools
source ./.zshrc
adbが使えることを以下コマンドで確認した。これでadbが利用できる状態となった。
adb version

[スマホのエミュレータを起動するためにAndroid Studioをインストール]
Android Studioを起動し、New Projectを押す。
「Empty Activity」を選択して、「Next」を押す。
Nameを適当に変更して、「Finish」を押す。（今回は「AdbTest」に変更。）
Projectが作成された。
画面右側の「Device Manager」のアイコンを押す。
Device Managerの画面が表示される。「Create virtual device ...」を押す。
デバイスが表示されるので、適当なデバイスを選択する。ここでは「Pixel 8 Pro」を選択した。選択したら「Next」を押す。
システムイメージをダウンロードする。ここでは「VanillaIceCream」のみダウンロードした。ダウンロードしたあと「Next」を押す。
仮想デバイスの定義画面になるので、確認して「Finish」を押す。
デバイスが作成された。Typeの右側のアイコン「▷」を押す。
右側に作成したデバイスが表示された。スマホのエミュレータ準備ができた。

[adbを利用し、スマホのエミュレータのスクリーンショットと動画保存を実行]
adbコマンドで作成したデバイス（スマホのエミュレータ）と接続されているかを確認する。VS Codeで
adb devices
を実行すると、「emulator-5554」が表示されていた。
スマホのエミュレータ上でコマンドを実行してみるために、adbのシェルを実行する。
adb shell
スマホのエミュレータのスクリーンショットを取得し、シェル実行を終了する。
emu64a:/ $ screencap /sdcard/screen.png
emu64a:/ $ exit
スマホのエミュレータのスクリーンショットをPCへダウンロードする。
adb pull /sdcard/screen.png

以下、16から18を実行した画面例
ダウンロードしたファイルを開くと、スマホのエミュレータのスクリーンショットが取得できていた。
今度はスマホのエミュレータの画面の動画を取得してみる。
adb pull /sdcard/demo.mp4
Codecのエラーが表示されて、画面サイズがデフォルトになった。

スマホ上で適当に操作したのち、Ctrl＋Cで録画を終了した。
スクリーンショットと同じようにPCにダウンロードできた。
adb pull /sdcard/demo.mp4
動画ファイルを開くと、スマホエミュレータ上で操作した画面遷移などが記録されていた。（下記は、画面の一部で、実際はスマホのエミュレータのように縦長で保存されていました）

以上です。

2024-04-20

【技術やってみた】Playwrightでのダイアログ表示を含む画面のテストをしてみた

Next.js Playwright

概要

E2Eの自動テストツールPlaywrightを利用して、ダイアログ表示を含む画面のテストができるか試してみた。

環境

・Mac OS Sonoma 14.4
・Visual Studio Code 1.73.1
・Node.js 20.12.0
・Next.js 14.1.4
・Playwright 1.43.1

アプリケーションは以下の記事で作成したものを利用していきます

https://hkane8.hatenablog.com/entry/2024/04/20/163148

参考

・PlaywrightのGitHubページ
https://github.com/microsoft/playwright

実行内容

Playwright用のフォルダを作成して、下記コマンドでPlaywrightをインストールする
```
npm init playwright@latest
```
インストールされたPlaywrightの定義ファイル「playwright.config.ts」を修正する
テスト実行時のスクリーンショットと動画を保存するために、use内に以下を追記
　・screenshot : 'on'
　・video:'on'
インストール後に作成されるフォルダtests（デフォルト値）配下に以下テストファイルを作成する
・tests/dialog.spec.ts

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {

await page.goto('http://localhost:3000/');

page.once('dialog', dialog => {

console.log(`Dialog message: ${dialog.message()}`);

dialog.accept();

});

await page.getByRole('button', { name: 'ダイアログ表示' }).click();

await expect(page.getByText('移動後画面')).toBeVisible();

console.log(`WAIT!`);

// 最後にsleepを入れtないと、画面遷移後のスクリーンショット取得ができないことがあったので、処理を入れた

const sleep = waitTime => new Promise( resolve => setTimeout(resolve, waitTime) );

await sleep( 1000 )

.then( ()=>{

// 5秒停止後の処理

console.log(`GO!`);

});

});
テストを実行してみる
npx playwright test

passedで成功している。
テスト結果を表示してみる
npx playwright show-report
ブラウザに以下画面が表示される
試しに、chroniumをクリックすると結果が表示された
（対象ブラウザはplaywright.config.tsに記載されている。実行時のオプションで対象を指定できる）
結果画面を下にスクロールすると、スクリーンショットも確認できた
さらに下にスクロールすると実行時の画面遷移がビデオでも確認できた
０：００最初のアクセス画面

０：０１ダイアログのOK押した後の画面
さらに下にスクロールすると、サーバ側の標準出力が確認できた

テストは正常実行できている。
試しにダイアログの操作をキャンセルにするように、
tests/dialog.spec.tsファイルのaccpetをdismissに修正してテストを実行してみた。

// dialog.accept();

dialog.dismiss();

npx playwright test
を実行すると、以下のようなエラーが表示された

さらに、自動でブラウザが起動して、エラーレポートが表示された

choromiumをクリックすると、どこでテストエラーになったかを表示された

　　dialogをキャンセルで進めることで、期待した画面に遷移してないため、エラーになった。想定どおり。

以上です。

2024-04-20

【技術やってみた】Next.jsでのダイアログ表示動作テスト用アプリケーションを作成した

Next.js

概要

E2Eの自動テストツールPlaywrightで、ダイアログ表示を含む画面のテストを実施したいので、サンプルアプリを作成した。

環境

・Mac OS Sonoma 14.4
・Visual Studio Code 1.73.1
・Node.js 20.12.0
・Next.js 14.1.4

前回記事でインストールしたNext.jsのサンプル環境を修正して、アプリを作成した。
【技術やってみた】Next.js 14のサンプルWebアプリケーションをMacで実行してみた

実行内容

前回インストールしたサンプルアプリのフォルダ構成に対して、以下を実施。
・page.tsxを修正

"use client";

export default function Home() {

const getData = async () => {

if(confirm("OK?")){

window.location.href = "http://localhost:3000/after";

}else{

console.log("nokey.");

}

};

return (

<>

<div>ダイアログ確認画面</div>

<button className="button" onClick={getData}>ダイアログ表示</button>

</>

);

}

・after/page.tsx を作成

"use client";

export default function Home() {

const backTop = async () => {

window.location.href = "http://localhost:3000/";

};

return (

<>

<div>移動後画面</div>

<button className="buttonafter" onClick={backTop}>移動後のページです。移動前のページに戻る</button>

</>

);

}

・global.cssを修正
bodyを色を修正して、buttonとbuttonafterの定義を追加

@tailwind base;

@tailwind components;

@tailwind utilities;

:root {

--foreground-rgb: 0, 0, 0;

--background-start-rgb: 214, 219, 220;

--background-end-rgb: 255, 255, 255;

}

@media (prefers-color-scheme: white) {

:root {

--foreground-rgb: 255, 255, 255;

--background-start-rgb: 0, 0, 0;

--background-end-rgb: 0, 0, 0;

}

}

body {

color: rgb(var(--foreground-rgb));

background-color: white

/* background: linear-gradient(

to bottom,

transparent,

rgb(var(--background-end-rgb))

)

rgb(var(--background-start-rgb));

*/

}

@layer utilities {

.text-balance {

text-wrap: balance;

}

}

.button{

background-color: #000;

border-radius: 50px;

color: #fff;

padding: 15px 60px;

}

.buttonafter{

background-color: #000;

border-radius: 50px;

color: #0ff;

padding: 15px 60px;

}
アプリの動作確認をする
npx next dev
実行結果以下が表示される
ブラウザで、表示されたURLにアクセスする。以下が表示される
「ダイアログ表示」ボタンを押す。ダイアログが表示される
キャンセルを押すと、画面は遷移しない。
O Kを押すと、以下の画面に画面遷移する。

ダイアログ表示を動作確認できるアプリケーションが準備できました。

以上です。

2024-03-30

【技術やってみた】Next.js 14のサンプルWebアプリケーションをMacで実行してみた

Node.js Next.js

概要

Next.jsのサンプルWebアプリケーションをMacで実行してみた

環境

・Mac OS Sonoma 14.4
・Visual Studio Code 1.73.1

本記事でインストールしたソフトウェアのバージョン

・Node.js 20.12.0
・npm 10.5.0
・Next.js 14.1.4

実行内容

Node.jsのホームページへアクセスする
下記画面で、OSやバージョンを選択して、ダウンロードボタンを押す
ダウンロードしたパッケージファイルを実行する
「続ける」を押す
使用許諾契約の内容を確認して、「続ける」を押す
内容に同意する場合、「同意する」を押す
「インストール」を押す
インストールの許可を求められるので、Touch IDかパスワード入力のどちらかを実施する
インストールが進んで、完了画面が表示される。「閉じる」を押す。
インストーラファイルを「残す」か「ゴミ箱に入れる」のどちらかを押す
VSCodeを起動して、以下コマンドを実行しnodejsとnpmのバージョンを確認する
node --version
npm --version
Next.jsのサンプルアプリを作成するために、適当なディレクトリ配下で下記コマンドを実行する。
npx create-next-app --typescript
　プロジェクト名：hello-next（なんでも良い）を入力してEnterキーを押す
　その他オプションは全てデフォルトのまま、Enterキーを押していく

Successと表示されていれば作成成功。
作成したアプリケーションのディレクトリ配下に移動し、アプリケーションを起動する
cd hello-next
npm run dev
ブラウザで表示されたLocalのURLへアクセスする
http://localhost:3000/

表示された！