こんにちは。開発 2 部 箕浦です。
今回はWebのUIデザインを生成AIが自動で作成してくれる「v0」(https://v0.dev/ )という画期的なサービスについて紹介します。

我々システム開発を行うデベロッパーにとって、どのような画面デザインにすればいいかという課題は頭を悩ませる要因となっています。
大規模なプロジェクトであれば、通常デザイナーに依頼してデザインを作成しますが、小規模なプロジェクトではデザイナーに頼れない場合もあります。
そのような場合、開発者自身が優れたUIデザインを考える必要があります。

そんなときは今流行りの生成AIにUIデザインをしてもらおうという試みになります。

この「v0」というサービスは、チャットのようにテキストで指示をすることで、自動的にWebページのUIを作成してくれて、さらに細かい修正も追加で指示することで行ってくれます。

生成されたUIはコードとして出力されますので、 それをそのままコピーもしくはCLIのコマンドでプロジェクトに取り込むことが可能です。

なお、生成されたUIのコードは、 React(Next.js)とhtmlのどちらでも可能で Tailwind CSSやshadcn/uiを利用していますので、こちらをプロジェクトで利用していることが前提となっています。

利用するには、Vercel のアカウント(無料)が必要になります。
無料のFreeプランと有料のPremiumプラン(月20$)があり、利用できるクレジット数や、ハイクオリティやUIが生成可能等の差があるようです。 プランの比較はこちら

今回は無料のFreeプランでやってみます。

ログインすると、以下の画面になります。

非常にシンプルでこのプロンプトから指示を送信することでAIがUIを提案してくれます。

画面の下の方に行くと、 Exploreの欄に指示したテキストと、実際に生成されたUIの例がいくつかあります。
この中から、イメージに近いものを選んで採用する方法もあります。

今回は試しにYouTube風のUIを作ってもらうことにします。
プロンプトには、日本語で指示することも可能です。
試しに「YouTubeのようなUIを作って」 と指示してみます。

すると、AIが3つの提案をしてくれます。 まず一つ目。

次に2つ目

最後に3つ目

結構それらしいUIを作ってくれました。
提案してもらったUIを選んでさらに追加の指示を行うことも可能です。

ここでは3つ目のUIを採用することとして、
追加で日本語のUIにしてもらいます。

すると、ちゃんと指示通りに日本語化してくれました！

右上にあるテーマアイコンから、フォント等を変更することが可能です。

タブレットや、スマートフォンで確認した際の表示のされ方もここで確認可能です。
以下はタブレットの場合。

codeをクリックすると、Reactとhtmlのコードが確認できます。
ここで直接コードを編集して微調整することも可能です。

こちらはhtmlの場合。

こちらのコードを今回はNext.jsのプロジェクトに取り込んでみることにします。
取り込み方法は、CLIコマンドによる方法と、手動でコードをコピペする方法がありますが、 コマンドの方が楽なので今回はそちらでやってみます。
(現在CLIによる取り込みはNext.jsのみサポートされているようです)

コードの上の方にある 「npx v0 add ・・・」 とあるコマンドをコピーします。

Next.jsのプロジェクトを作成し、プロジェクトフォルダ直下で以下のコマンドを実行します。
Tailwind CSSを利用していますので、Tailwind CSSも組み込んでおきます。

npx v0@latest init

次に先ほどコピーしたコマンドを実行します。

npx v0 add 7ulmWSS039r

コードを確認すると、先ほどのコードがプロジェクトにコピーされています。

そして、起動して確認してみます。

すばらしい！YouTube風のUIが一発で作成できました。
ここまで3分ほどしかかかってません。

さらに、このサービスのすごいところは、画像をアップロードすることでその画像に近いUIも作成してくれます。
こちらは無料では1回のみしか試すことができなかったので、いずれ紹介してみたいと思います。

今回は無料プランで試しましたが、いずれは有料プランのハイクオリティ出力も試してみたいと思います。

このサービスをうまく使えば、デザイナーさんに頼れない状況でも、開発者側でUIの生産性の向上が見込めると思います。

プロジェクトでWPF内での棒グラフの実装を行うことになり、苦労したことですし、せっかくなので調査した内容等をこちらで紹介します。
WPFで棒グラフを表示するためには様々な方法がありますが、
その中の一つとして、WPF内でWindows Form用のコントロールを使う方法があります。
今回MVVMモデルで記載しております。

動作環境：.NetFramework4.7.2 + xaml

ソリューションエクスプローラーのプロジェクトを右クリックし、「追加」→「参照」をクリックしてください。その後表示される「参照マネージャー」内の「アセンブリ」から以下の項目の参照を追加してください。

• WindowsFormIntegration
• System.Windows.Forms
• System.Windows.Forms.DataVisualization

※上記の方法でWindowsFormIntegrationの参照ができなかった場合
「参照マネージャー」を開き、参照ボタンを押下します。
その後、以下のフォルダ内にある「WindowsFormsIntegration.dll」を選択してください。
C:\Windows\Microsoft.NET\Framework64\v4.0.30319\WPF

XAMLに以下のコードを追記します。

<Grid>
        <WindowsFormsHost x:Name="Chart1" />
</Grid>

コードビハインド(MainWindow.xaml.cs)には以下のコードを追加します。

public MainWindow()
        {
            InitializeComponent();
            MainWindowViewModel vm = new MainWindowViewModel();
            this.DataContext = vm;

            Chart1.Child = vm.chart1;
        }

ViewModelには以下のコードを追加します。

public class MainWindowViewModel
    {
        public Chart chart1;
        Title title;
        ChartArea chartArea1;
        Series series1;
        
        public MainWindowViewModel()
        {
            chart1 = new Chart();
            title = new Title("タイトル");
            chartArea1 = chart1.ChartAreas.Add("Area1");
            series1 = new Series();

            // 数値
            Random rdm = new Random();

            // X軸表示用の名前
            string[] memberList = { "Aさん", "Bさん", "Cさん", "Dさん", "Eさん" };

            // グラフの設定
            SettingChart();

            // グラフ要素の追加
            for(int i = 0; i < 5; i++)
            {
                series1.Points.AddY(rdm.NextDouble());
                series1.Points[i].AxisLabel = memberList[i];
            }
        }

        private void SettingChart()
        {
            // グラフタイトル、軸ラベルの設定
            title.DockedToChartArea = "Area1";
            chartArea1.AxisX.Title = "X軸ラベル";
            chartArea1.AxisY.Title = "Y軸ラベル";

            // グラフの種類
            series1.ChartType = SeriesChartType.Column;

            // ChartにTitle,Seriesを追加
            chart1.Titles.Add(title);
            chart1.Series.Add(series1);
        }
    }

以下の棒グラフが表示されます。

またViewModelにSeriesを追加すると各個人の二つのデータを比較するということも行うことができます。

        public MainWindowViewModel()
        {
            chart1 = new Chart();
            title = new Title("タイトル");
            chartArea1 = chart1.ChartAreas.Add("Area1");
            series1 = new Series();
            series2 = new Series();

・・・

            // グラフ要素の追加
            for(int i = 0; i < 5; i++)
            {
                series1.Points.AddY(rdm.NextDouble());
                series2.Points.AddY(rdm.NextDouble());
                series1.Points[i].AxisLabel = memberList[i];
            }

・・・

            // ChartにTitle,Seriesを追加
            chart1.Titles.Add(title);
            chart1.Series.Add(series1);
            chart1.Series.Add(series2);

またグラフの上に数値や文字を表示する場合はseries1.Points[0から始まるグラフの順番].labelに表示させたい文字を入れることで可能です。
以下はグラフに自身の値をグラフの上に表示させている内容となります。

double value1;
double value2;
            // グラフ要素の追加
            for(int i = 0; i < 5; i++)
            {
                value1 = rdm.NextDouble();
                value2 = rdm.NextDouble();
                series1.Points.AddY(value1);
                series1.Points[i].Label = Math.Round(value1,2).ToString();
                series2.Points.AddY(value2);
                series2.Points[i].Label = Math.Round(value2,2).ToString();
                series1.Points[i].AxisLabel = memberList[i];
            }

このグラフを使用する際の注意点ですが、2点あります。

• コントローラが画面の最前面に表示されるため、グラフの前面に要素を配置することができない。
• X軸の数を10個以上にすると全てのX軸の各グラフ名が表示されなくなる。

以上の2点です。

特に二つ目の点ですが、例えば以下のように グラフを10人分表示させようとした場合です。

            string[] memberList = { "Aさん", "Bさん", "Cさん", "Dさん", "Eさん","Fさん","Gさん","Hさん","Iさん","Jさん" };

            // グラフの設定
            SettingChart();

            double value1;
            double value2;
            // グラフ要素の追加
            for(int i = 0; i < 10; i++)
            {
                value1 = rdm.NextDouble();
                value2 = rdm.NextDouble();
                series1.Points.AddY(value1);
                series1.Points[i].Label = Math.Round(value1,2).ToString();
                series2.Points.AddY(value2);
                series2.Points[i].Label = Math.Round(value2,2).ToString();
                series1.Points[i].AxisLabel = memberList[i];
            }

表示は以下のようになり、5人の名前しか表示されなくなってしまいます。

このＸ軸の表示ですが、１０以上からはグラフの数が増えるほど表示するＸ軸の数も減っていくようです。

こんにちは。開発 2 部 箕浦です。
サーバーレスの開発には欠かせないAWS Lambdaですが、ランタイムバージョンのサポートが切れると、
AWSはセキュリティパッチ等を適用しなくなり、サポート切れの関数はテクニカルサポートの対象ではなくなります。
さらに、新規作成や更新もできなくなるので、ランタイムのバージョンアップが必要になってきます。

今回はとある案件で、構築時はNode.js 16.xで作成していたLambda関数でしたが、
Node.js 16.x の 2024 年 6 月 12 日のサポート終了に伴い、Node.js 20.x へ移行いたしました。
その際、AWS SDKのバージョンもv2からv3へ移行する必要がありました。

v3自体は、Node.js 18.x から登場し、利用可能だったようですが、16のまま放置していたので、今回初めて移行を試みました。
今更な情報かもしれませんが、その際、いろいろソースコードを変更する箇所がありましたので、一部紹介します。

今回SDKにて利用しているサービスは、Lambda、S3、Cognito、DynamoDB、SES でしたのでこれらをピックアップします。

ポイントとしては、

• ①インポート
• ②呼び出し
• ③エラーハンドリング

の3か所です。

インポート​

従来は以下のように aws-sdk 自体をインポートして、それぞれのサービスのクライアントを生成する必要がありました。

const aws = require('aws-sdk');
const documentClient = new aws.DynamoDB.DocumentClient();

v3 では以下のように個別のモジュールをインポートする必要があります。 面倒ですが、SDKをまるごとインポートするよりも個別にインポートした方がサイズを削減することが可能です。

const { DynamoDBClient } = require("@aws-sdk/client-dynamodb");
const { DynamoDBDocumentClient, DeleteCommand } = require("@aws-sdk/lib-dynamodb");
const documentClient = DynamoDBDocumentClient.from(new DynamoDBClient({ region: 'ap-northeast-1' }));

cognito, lambda, s3, ses の場合は、

const {
    CognitoIdentityProviderClient,
    AdminCreateUserCommand,
    AdminDeleteUserCommand,
} = require("@aws-sdk/client-cognito-identity-provider");
const { LambdaClient, InvokeCommand } = require("@aws-sdk/client-lambda");
const { S3Client, GetObjectCommand } = require("@aws-sdk/client-s3");
const { SESClient, SendEmailCommand } = require("@aws-sdk/client-ses");
const cognito = new CognitoIdentityProviderClient({});
const lambda = new LambdaClient({});
const s3 = new S3Client({});
const ses = new SESClient({ region: 'ap-northeast-1' });

このような感じです。

呼び出し​

v2では、各サービスのAPIの呼び出し方は、一般的には クライアントが提供しているAPIに対応しているメソッドにパラメータを直接渡す方法でした。

    const params = {
        TableName: TABLE_NAME,
        Key: {
            UserName: user_id,
        },
    };
    await documentClient.delete(params).promise();

v3 では、APIに対応しているCommandにパラメータを渡してコマンドを生成して、 それをクライアントのsendメソッドに渡してやります。

    const params = {
        TableName: TABLE_NAME,
        Key: {
            UserName: user_id,
        },
    };
    await documentClient.send(new DeleteCommand(params));

さらにLambdaの場合は、戻り値のPayloadのParseの部分にも修正が必要でした

    const ret = await lambda.invoke(params).promise();
    const result = JSON.parse(ret.Payload);

    const ret = await lambda.send(new InvokeCommand(params));
    const result = JSON.parse(Buffer.from(ret.Payload).toString());

エラーハンドリング​

v2 では、以下のように、例外が発生した際に、catchに渡される例外オブジェクトのcodeメンバを参照することで、
エラーハンドリングが可能でしたが、v3ではこの記述はだめでした。

    try {
        const ret = await cognito.send(new AdminCreateUserCommand(params));
    } catch (e) {
        if (e.code === 'UsernameExistsException') {
            response.statusCode = 400;
            body.resultCode = 'E0007';
        } else if (e.code === 'InvalidPasswordException') {
            response.statusCode = 400;
            body.resultCode = 'E0016';
        } else {
            response.statusCode = 500;
            body.resultCode = 'E0001';
        }
        response.body = JSON.stringify(body);
        callback(null, response);
        return;
    }

v3では以下のように、instanceof を使ってハンドリングする必要がありました。

    try {
        const ret = await cognito.send(new AdminCreateUserCommand(params));
    } catch (e) {
        if (e instanceof UsernameExistsException) {
            response.statusCode = 400;
            body.resultCode = 'E0007';
        } else if (e instanceof InvalidPasswordException) {
            response.statusCode = 400;
            body.resultCode = 'E0016';
        } else {
            response.statusCode = 500;
            body.resultCode = 'E0001';
        }
        response.body = JSON.stringify(body);
        callback(null, response);
        return;
    }

今回取り上げたサービスはほんの一部ですが、それ以外のサービスでは他にも変更点はある可能性はあります。
もし、同じ境遇の方いましたら、ご参考までに。

こんにちは。開発 2 部 箕浦です。
現在、関わっている案件でWebプッシュ通知について調べる機会がありましたので
実装の仕方からブラウザ間の挙動の違いを調査した結果を紹介します。
本記事は、後編であるフロントエンド編になります。

今回はフロントエンドはReactで実装します。

Service Worker​

Webプッシュ通知は、ユーザーがウェブサイトを見ている状態だけでなく、他のサイトを見ているときや、別のアプリケーションを動かしているときなどにも通知されてほしいです。
WebアプリケーションはReact(Javascript)でブラウザ上で動作するものなので、基本的にはユーザーがウェブサイトを閲覧していないときは動作しません。
そのため、Webプッシュ通知を受け取ったときの動作は、本体のWebアプリケーションとは別のプロセスで動かしておいて、プッシュ通知の処理を行う仕組みが必要となります。
その役割を担うのがService Workerです。
Service Workerは、プッシュ通知だけでなく、バックグラウンドで何か処理をさせたいときなど用途はいろいろあります。
ただし、ブラウザの種類やバージョンにより、サポート状況や挙動が変わることがありますので事前に動作確認が必要となります。

publicフォルダ配下に以下の service-worker.js ファイルを作成します。 簡単に説明すると、
push イベントに対して、タイトルやメッセージなどを受け取り、 showNotification を使って、デスクトップにプッシュ通知を表示します。
notificationclick イベントに対して、通知がクリックされた際に、指定したURLへ遷移するようにしています。

addEventListener('push', (event) => {
    console.log('[Service Worker] Push Received.');
    console.log(`[Service Worker] Push had this data: "${event}"`);

    if (!(self.Notification && self.Notification.permission === 'granted'))
        return;

    var data = {};
    if (event.data)
        data = event.data.json();

    console.log(data)

    self.clients.matchAll().then(clients => {
        clients.forEach(client => {
            client.postMessage({
                data: data
            });
        });
    });

    var title = data.data['pinpoint.notification.title'];
    var message = data.data['pinpoint.notification.body'];
    var icon = data.data['pinpoint.notification.imageIconUrl'];
    var image = data.data['pinpoint.notification.imageUrl'];
    var options = {
        body: message,
        icon: icon,
        image: image,
        data: data,
    };
    event.waitUntil(self.registration.showNotification(title, options));
});

addEventListener('notificationclick', (event) => {
    event.notification.close();
    event.waitUntil(
        clients.openWindow(event.notification.data.data['pinpoint.url'])
    );
});

React​

React側ではまず、firebase のライブラリをインストールします。

npm install firebase

App.jsに前編でFirebaseコンソールからコピーしたコードスニペットをそのまま貼り付けます。

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {
  apiKey: "APIキー",
  authDomain: "webpush-c7bed.firebaseapp.com",
  databaseURL: "https://webpush-c7bed.firebaseio.com",
  projectId: "webpush-c7bed",
  storageBucket: "webpush-c7bed.appspot.com",
  messagingSenderId: "586895317040",
  appId: "アプリ ID",
  measurementId: "G-SPL1GEMWDJ"
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

同じく、以下のコードを追記します。
「サーバーキー」には、前編でFirebaseコンソールからコピーしたサーバーキーを設定します。
今回はサーバーキーや上記の設定は、ソースコードにハードコーディングしていますが、本番環境で使用する場合は、外から読み込むなどの仕組みが必要です。

import { getMessaging, getToken, isSupported } from "firebase/messaging";
const messaging = getMessaging(app);

const vapidKey = "サーバーキー"
var registeredServiceWorker;
navigator.serviceWorker.register('/service-worker.js').then((reg) => registeredServiceWorker = reg)

function App() {

  useEffect(() => {

    function requestPermission() {
      isSupported().then((isSupport) => {
        if (!isSupport) {
          console.log('Messaging is not support.');
          return
        }
      
        console.log('Requesting permission...');
        Notification.requestPermission().then((permission) => {
          if (permission === 'granted') {
            console.log('Notification permission granted.');
            getTokenRequest()
          }
        })
      })
    }
    
    async function getTokenRequest() {
      // Add the public key generated from the console here.
      getToken(messaging, {
        vapidKey: vapidKey,
        serviceWorkerRegistration: registeredServiceWorker
      })
        .then((currentToken) => {
          if (currentToken) {
            // Send the token to your server and update the UI if necessary
            // ...
            console.log(`token: ${currentToken}`);
            // ここで取得したトークンをサーバーへ送信する
          } else {
            // Show permission request UI
            console.log('No registration token available. Request permission to generate one.');
            // ...
          }
        }).catch((err) => {
          console.log('An error occurred while retrieving token. ', err);
          // ...
        });
    }
    requestPermission();
  }, []);

  return (
    <div className="App">
      <div>
        ・・・
      </div>
    </div>
  );
}

ここまでで実装は完了です。

プッシュ通知の送信​

フロントエンドをローカルで起動します。

npm run start

ブラウザが起動すると、画面上部にプッシュ通知を許可もしくはブロックするがポップアップで表示されます。
ここで許可を選択しておきます。
ブロックを選択すると、プッシュ通知が届かなくなります。

すると、トークンが払い出されます。 今回はわかりやすいようにトークンをデバッグコンソールに出力しています。

本来であれば、このトークンをサーバーへ何らかの方法で送り、サーバー側でユーザーと紐づけて管理しておきます。
今回はサーバーは省略しているので、このトークンをコピペすることにします。

今回はプッシュ通知の送信は簡単に確認するため、Amazon Pinpointのコンソール画面から送信します。
デバイストークンには先ほどコピーしたトークン
プッシュ通知サービスには「FCM」
を入力し、メッセージの内容を入れて、プッシュ通知を送信します。

送信を行うと、デスクトップの右下に無事プッシュ通知が表示されました！！

ブラウザによる挙動​

ここからは、ブラウザによるプッシュ通知の挙動を確認していきます。
今回はChrome、Edge、FireFoxの３種類で確認することにします。

デフォルトの状態でのプッシュ通知の表示​

まずはデフォルトの状態でのプッシュ通知の表示は、

Chromeの場合

Edgeの場合

Firefoxの場合

こちらは、同じ結果となりました。

requireInteractionを有効​

ユーザーがクリックするか閉じるかするまで、通知が自動的に閉じずに残る設定である requireInteraction を有効にした場合、

Chromeの場合

Edgeの場合

Firefoxの場合

こちらは、Edgeの場合は「閉じる」ボタンが表示されず、25秒ほどで通知の表示が消えました。 Edgeの場合、requireInteractionの設定だけではだめなようです。

プッシュ通知を閉じずに、連続して何回か送信した場合​

プッシュ通知の「閉じる」ボタンを押さずに、連続して何回か送信した場合の動作を見てみます。

Chromeの場合

Edgeの場合

Firefoxの場合

ChromeとFirefoxでは、連続して送ると、3つまではデスクトップに表示されますが、それ以降は、 デスクトップに表示せず、通知管理に溜まっていく動作となっていました。
その状態で閉じるボタンで通知を閉じると通知管理に溜まっていたものが、 順番に表示されます。
Edgeでは、通知管理には溜まっていきますが、どれだけ送っても、デスクトップには1つまでの表示となっています。

ブラウザを起動していない状態でのプッシュ通知​

ChromeとFirefoxでは、即時に通知表示されず、ブラウザを開いて、20秒ほど待っていると、 それまで溜まっていたものが一度に通知されてくる動作となっています。
それに対し、Edgeでは、ブラウザを起動していない状態でも、プッシュ通知が表示されました。

ブラウザによって、プッシュ通知のサポート状況や、実装は以後のバージョンアップで動作は変わる可能性がありますが、 現時点ではこのような差異がありました。
他にもいろいろな設定がありますので、今後も色々触ってみようと思います。

こんにちは。開発 2 部 箕浦です。
現在、関わっている案件でWebプッシュ通知について調べる機会がありましたので
実装の仕方からブラウザ間の挙動の違いを調査した結果を紹介します。
本記事は、前編であるバックエンド設定編になります。

Webプッシュ通知とは​

Webプッシュ通知とは、ウェブサイトからユーザーに対して通知を送信する仕組みです。
画像のようにウェブサイトにアクセスした際、通知の許可を求めるポップアップで「許可」を選択し、
デスクトップ右下にポップアップされるあれのことです。
ブラウザがサポートしている場合、ユーザーはウェブサイトから通知を受け取ることができます。

iOS16.4から既にサポートされており、iPhoneでもWebプッシュを受けれるようになっています。

Webプッシュ通知を実装するには、バックエンド側の実装が必要になるのですが、Webプッシュといってもいろいろな方法があり、サービスも複数あります。

今回は、簡単に、Firebase Cloud Messaging と Amazon Pinpoint というサービスを組み合わせて実装します。 Firebase Cloud Messaging だけでもWebプッシュは可能ですが、管理コンソール画面からプッシュ送信することを考え、Amazon Pinpointの管理コンソールからの方が送りやすいため、Amazon Pinpointを組み合わせました。

さらに、今回は詳しく取り上げませんが、Amazon Pinpointを利用すると、ある特定のユーザグループのみWebプッシュを送信するという使い方ができますので、特定の地域に住む人のみとか、特定の年齢層の人のみにWebプッシュを送信するといったことも可能です。

Firebase​

まずは、Firebase にプロジェクトを作成します。 Firebase を利用するにはGoogleアカウントが必要になります。

続いて、上記で作成したプロジェクトにウェブアプリを追加します。 今回は下のようなアプリを作成しました。

下の方の「SDKの設定と構成」の欄にnpm、CDN、Configでそれぞれ実装するときのコードスニペットが表示されていますので、フロント側にこれを組み込みます。
今回はReactで実装しますので、npmを選択します。

また、「Cloud Messaging」タブでAPIが有効になっていることを確認し、 「サーバーキー」もメモっておきます。

Firebase Cloud Messagingの設定は以上です。

Amazon Pinpoint​

つづいて、Amazon Pinpointの管理コンソールに入り、
こちらもプロジェクトを適当に作成し、 プッシュ通知の設定にてFirebase Cloud Messaging (FCM)の キー認証情報のAPIキーの欄に先ほどメモした「サーバーキー」を設定します。

Amazon Pinpointの設定は以上です。簡単ですね。

次回の記事では、フロント側の実装方法について解説し、実際の挙動を確認します。

お楽しみに！

こんにちは。開発 2 部 箕浦です。
WEBサーバの性能測定をするとき、 有名なツールとしてApache Benchがあります。

Apache Benchを使うにはApacheをインストールする必要がありますが、
Apache Bench以外の余計なものまでインストールされて煩わしいというケースがあります。

そんなとき、Dockerを使って、自分のPCを汚すことなく、Apache Benchを使用するための備忘録です。
(もちろんDockerがインストールされていることが前提です)

まずは適当なフォルダに以下の Dockerfile を作成します。

FROM alpine
RUN apk --no-cache add apache2-utils

ENTRYPOINT ["/usr/bin/ab"]

以下のコマンドでビルドします。
abのところはイメージ名なのでなんでもいいです。

docker build -t ab .

あとは以下のコマンドで、WEBサーバーに負荷をかけます。
-n 以降は、Apache Benchのオプションとなります。 オプションについて詳細はこちら

docker run --rm ab -n 100 -c 3 'https://hogehoge.com/'

上記の場合、「https://hogehoge.com/ というサイトに対して、3ユーザから100回アクセスする」という意味になります。

--rm をつけているのでコンテナ終了時にコンテナを自動削除します。

Dockerfileさえ保存しておけば、テストしたいときにいつでもすぐに始められるので、ご活用ください。

こんにちは。開発 2 部 箕浦です。
React がオンラインで学習できる mosya React というサービスを体験してみました。

はじめるには Google アカウントが必要になります。

コースは、入門編、中級編、実践編とあり、 無料では入門編の「React 入門 1」というレッスンのみとなります。

ちなみに「React 入門 1」は、以下の全 10 レッスンの内容となっています。

では、さっそく始めていきます。
まずは教材を読んで、問題に挑戦するという流れになっています。
教材は入門編では、イラストも多く、初学者にも優しい内容となっております。
有料ではAIに質問もできるようです。

教材の内容が理解できたら、問題に挑戦ボタンを押下します。
画面の左側に問題が出題され、右側のエディタに入力して回答します。

レッスンが終了すると、自分の学習履歴や終了証が確認できます。

有料のレッスンは、月額のサブスクリプションになっています。

今回は無料レッスンのみの体験でしたが、 React初学者がReactに触れながら学ぶことができるには、有用なツールの一つではないかと感じました。

こんにちは。開発 2 部 箕浦です。
今回のブログサイトの立ち上げに伴い、Docusaurus というフレームワークに触れてみてその便利さに感動したので、さっそく紹介します。

Docusaurus とは、簡単にいうと、Meta 社が作成したドキュメントサイトやブログサイトを高速で立ち上げることができる React ベースのフレームワークとなります。
ドキュメントサイトというのは、React API リファレンスのようなページのことです。
読み方はドキュサウルスというみたいです。(間違っていたらごめんなさい🙇)

実際の記事は Markdown で書けるため、気軽に投稿でき、 Github や Algolia とも連携可能です。
また、多言語対応だったり、プラグインで機能を追加することも可能です。
執筆時点の最新バージョンは 3.2.0 となっております。

プロジェクトを作成するには、以下のコマンドを実行します。

npx create-docusaurus@latest myproject

途中でテンプレートを選ぶように聞かれます。

? Select a template below...
>   classic (recommended)
    Git repository
    Local template

今回はclassicテンプレートで作成しました。
classic は、通常利用するであろう機能をあらかじめ盛り込んだ機能セットだと考えていいと思います。

フォルダ構成は以下となっています。
今回は Typescript で作成しています。

.
├── README.md
├── blog
│   ├── 2021-08-26-welcome
│   │   ├── docusaurus-plushie-banner.jpeg
│   │   └── index.md
│   ├── 2019-05-28-first-blog-post.md
│   ├── 2019-05-29-long-blog-post.md
│   ├── 2021-08-01-mdx-blog-post.mdx
│   └── authors.yml
├── docs
│   ├── intro.md
│   ├── tutorial-basics
│   │   ├── _category_.json
│   │   ├── congratulations.md
│   │   ├── create-a-blog-post.md
│   │   ├── create-a-document.md
│   │   ├── create-a-page.md
│   │   ├── deploy-your-site.md
│   │   └── markdown-features.mdx
│   └── tutorial-extras
│       ├── img
│       │   ├── docsVersionDropdown.png
│       │   └── localeDropdown.png
│       ├── _category_.json
│       ├── manage-docs-versions.md
│       └── translate-your-site.md
│
├── .gitignore
├── babel.config.js
├── tsconfig.json
├── docusaurus.config.ts
├── package-lock.json
├── package.json
├── sidebars.ts
├── src
│   ├── components
│   │   └── HomepageFeatures
│   │       ├── styles.module.css
│   │       └── index.tsx
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── index.js
│       ├── styles.module.css
│       └── markdown-page.md
└── static
    ├── img
    │   ├── docusaurus.png
    │   ├── docusaurus-social-card.jpg
    │   ├── favicon.ico
    │   ├── logo.svg
    │   ├── undraw_docusaurus_mountain.svg
    │   ├── undraw_docusaurus_react.svg
    │   └── undraw_docusaurus_tree.svg
    └── .nojekyll

主要なフォルダやファイルは、

• blog/
  ブログ用の Markdown ファイルや画像ファイルを管理するディレクトリ
• docs/
  ドキュメント用の Markdown ファイルや画像ファイルを管理するディレクトリ
• src/components
  カスタム React コンポーネントを管理するディレクトリ
• src/pages/
  ドキュメントファイル以外のページを管理するディレクトリ
• static/
  静的ファイルを管理するディレクトリ
• docusaurus.config.js
  サイトの設定ファイル
• sidebar.js
  サイドバーを定義するファイル

となっております。

以下のコマンドで起動します。

npm start

http://localhost:3000/ にアクセスすると、以下の画面が表示されて、既にドキュメントサイトやブログの雛形ができています。

こちらのページは、src/pages の index.tsx が表示されています。

右上の太陽のアイコンをクリックすると、ダークモードにも切り替え可能です。

ヘッダーの Tutorial をクリックするとドキュメントサイトのサンプルへ遷移します。

こちらは先ほどのフォルダ構成の dosc/ の中身のページが、そのままページとなっています。

ヘッダーの Blog をクリックするとブログサイトのサンプルへ遷移します。

こちらは先ほどのフォルダ構成の blog/ の中身のページが、そのままページとなっています。
各フォルダに .mdファイルや.mdxファイルで作成したページを格納し、ビルドするだけで、 Docusaurus が自動でページを構成して表示してくれる仕組みとなっております。

サイトの細かい設定はdocusaurus.config.js をいじります。
docusaurus.config.js の設定内容の詳細は こちら を参照ください。

こんな感じで爆速で、マニュアルサイトやブログサイトが構築できてしまいます。

Docusaurusが実際に使われているサイトはここで見ることができます。
ソースが公開されているものもあり、実際に構築するイメージに近いものをここで探して、参考にできます。

他にもプラグインを追加して、検索機能やバージョニング機能、SEO対策等を追加でき、
これからいろいろ可能性を探っていきたいと思います。

公式ドキュメントは、まだ日本語には対応していないので早く対応してもらえるといいですね。

皆さんも、サイト作成するときは、Docusaurusを検討してみるといいかもしれません。
導入も簡単ですので、ドキュメント生成ツールをお探しの方はぜひ一度試してみてください。

このたび、ディアシステム技術ブログを開設しました。
このブログでは、技術に関する記事や興味深い話題について不定期に発信していきます。
ぜひご覧いただければと思います。