こんにちは！マーケターから未経験のエンジニアに転職した社員Tです。
開発を始めて1年が経ち、サーバーサイド開発にも触れるようになりました。

今回は、Javaを使用したダッシュボードAPIの作成についてご紹介します。
これまでフロントエンド中心の開発を行っていた私が、サーバーサイドのAPI開発に挑戦していく様子をお届けします。

本記事の対象の方

• サーバーサイド開発をこれから学びたい方
• JavaでのAPI開発に興味がある方
• ダッシュボードの作成を通じて、実践的な技術を学びたい方

Javaとは？

Javaは、非常に人気のあるオブジェクト指向プログラミング言語で、さまざまなアプリケーションの開発に広く使用されています。

詳しい説明については、過去のブログ記事をご参照ください。

環境構築

環境構築に関しては、内容が広範囲にわたるため、別の記事で詳細に解説する予定です。

ダッシュボードAPIの作成

今回作成したいのは、こんなダッシュボード画面です。ユーザーがコースを選択することで、自分の学習状況を一目で確認できるようにすることを目指しています。

全体の作成の流れとしては、下記の通りとなります。

1. ユーザー情報を取得
2. コース情報を取得
3. 各グラフ描画に必要なデータを取得

今回は、2.コース情報を取得するAPIIの実装について詳しく触れていきたいと思います。

1. ユーザー情報の取得については、過去のブログ記事をご参考ください。

コース情報取得APIの設計

取得したユーザー情報から法人IDをリクエストに含め、コースリストを取得する

エンドポイント

• HTTPメソッド: POST
• リクエストボディ: 法人ID
• レスポンス: エラーメッセージリスト、コースリスト

リクエスト例

{
  "corporateId": 1
}

今回はパスパラメータではなく、リクエストボディから法人IDを受け取る設計にしています。これにより、柔軟なデータの受け渡しが可能となります。

レスポンス例

{
    "errorMessageList": null,
    "courseList": [
        {
            "course_id": 1,
            "corporate_id": 1,
            "course_name": "プログラミング基礎",
            "create_date": "2024-06-01T01:00:00.000+00:00",
            "update_date": "2024-06-01T01:00:00.000+00:00"
        },
        {
            "course_id": 2,
            "corporate_id": 1,
            "course_name": "データベース管理",
            "create_date": "2024-06-15T00:00:00.000+00:00",
            "update_date": "2024-06-15T00:00:00.000+00:00"
        }
    ]
}

レスポンスでは、courseList というフィールドにコース情報のリストが返されます。
このリストには、各コース情報が含まれます。もしエラーメッセージがあれば、errorMessageListにリストとして含まれますが、今回はエラーがない想定です。

コース情報取得APIの実装

今回は、ユーザー情報をもとにコースリストを取得するためのAPIを実装します。このAPIは、法人IDに基づいて、対応するコースの情報を返す役割を果たします。

コース情報を管理するモデルクラスの作成

まず最初に、ユーザー情報を格納するためのエンティティクラスを作成します。
このクラスは、データベースのテーブルとマッピングされ、ユーザー情報を格納する役割を持ちます。ここで定義したクラスを基に、データベース操作を行います。

例えば、以下のような CourseEntity クラスを作成します。

package jp.co.smsdatatech.questiongenerate.entity;

import java.io.Serializable;
import java.sql.Timestamp;

import jakarta.persistence.Column;
import lombok.Data;

/**
 * courseテーブルEntity
 */
@Data
public class CourseEntity implements Serializable {

    /** シリアルバージョンUID */
    private static final long serialVersionUID = 1L;

    /** コースID */
    private Integer course_id;

    /** 法人ID */
    private Integer corporate_id;

    /** コース名 */
    private String course_name;

    /** 作成日 */
    private Timestamp create_date;

    /** 更新日 */
    private Timestamp update_date;
}

MapperXMLの作成

次に、データベースからコース情報を取得するためのクエリを定義する MapperXML を作成します。このXMLファイルは、MyBatisなどのORMツールと組み合わせてデータベースとのやり取りを行います。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="jp.co.smsdatatech.questiongenerate.repository.CourseMapper">
    <select id="getAllByCorporateId" parameterType="Integer" resultType="jp.co.smsdatatech.questiongenerate.entity.CourseEntity">
        SELECT
            course_id,
            corporate_id,
            course_name,
            create_date,
            update_date
        FROM
            course
        WHERE
            corporate_id = #{corporateId}
        ORDER BY
            course_id
    </select>
</mapper>

サービスクラスの作成

次に、サービスクラスを作成してコース情報の取得処理を実装します。このクラスでは、リポジトリや Mapper を使ってデータベースから情報を取得し、レスポンスとして変換します。

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import jp.co.smsdatatech.questiongenerate.entity.CourseEntity;
import jp.co.smsdatatech.questiongenerate.repository.CourseMapper;

/**
 * コーステーブルService
 */
@Service
public class CourseService {

    /** ログ出力クラス */
    private static final Logger log = LoggerFactory.getLogger(clazz:CourseService.class);

    /** courseテーブルMapper */
    @Autowired
    private CourseMapper courseMapper;

    /**
     * コース検索（法人ID検索）
     * 1.機能概要
     * courseテーブルから法人IDに紐づくコースを取得し、Listで返却する。
     * 2.処理フロー
     * ①DB接続・抽出
     * ②返却
     *
     * @param corporateId 法人ID
     * @return {@literal List<CourseEntity> コース一覧}
     */
    public List<CourseEntity> getAllByCorporateId(Integer corporateId) {
        List<CourseEntity> courseList = courseMapper.getAllByCorporateId(corporateId);
        log.info("courseテーブルから法人ごとのレコードを取得しました。");
        return courseList;
    }
}

コントローラークラスの作成

最後に、リクエストを処理する TopRest コントローラークラスを作成します。

/**
 * コースリスト取得.
 *
 * 法人IDに紐づくコースリストを取得し、CorporateCourseResponseForm に詰めて返却する。
 *
 * <h3>処理フロー</h3>
 * 1. コース情報（コースIDとコース名）を取得<br>
 * 2. 取得したリストを返却
 *
 * @param form Top画面Form
 * @param result バリデーション結果
 * @return コースリスト CorporateCourseResponseForm
 */
@PostMapping("/top/getCourseListByCorporateId")
public CorporateCourseResponseForm getCourseListByCorporateId(@RequestBody @Valid TopForm form,
        BindingResult result) {
    log.debug("TopRest (getCourseListByCorporateId) 呼び出し開始");

    CorporateCourseResponseForm responseForm = new CorporateCourseResponseForm();
    List<String> errorMessageList = new ArrayList<>();

    Set<String> processedFields = new HashSet<>();

    // バリデーションエラーがある場合、詳細なエラーメッセージを追加
    if (result.hasErrors()) {
        for (FieldError fieldError : result.getFieldErrors()) {
            // フィールド名を基に重複チェック
            if (!processedFields.contains(fieldError.getField())) {
                String errorMessage = messageSource.getMessage(fieldError, Locale.getDefault());
                errorMessageList.add(errorMessage);
                processedFields.add(fieldError.getField());
            }
        }
        responseForm.setErrorMessageList(errorMessageList);
        return responseForm;
    }

    // 法人IDを整数に変換
    Integer corporateId = Integer.parseInt(form.getCorporateId());

    // 法人IDを基にコースリストを取得
    List<CourseEntity> courseList = courseService.getAllByCorporateId(corporateId);

    if (CollectionUtils.isEmpty(courseList)) {
        // コースが見つからなかった場合
        errorMessageList.add(messageSource.getMessage(ErrorMessages.COURSE_NOT_FOUND, args:null, Locale.getDefault()));
        responseForm.setErrorMessageList(errorMessageList);
        log.debug("CourseRest (getCourseList) コースが見つかりません: ");
        return responseForm;
    }

    // コースリストをレスポンスに設定
    responseForm.setCourseList(courseList);
    return responseForm;
}

今回の実装では、リクエストボディのバリデーション に @NotBlank と @Pattern のアノテーションを適用することで、不正なデータによる例外発生を未然に防ぐ設計 になっています。

実装内容の振り返り

今回のコース情報取得に関して、情報が頻繁に変更されることはないため、キャッシュの活用が有効であることに実装後に気付きました。
現状ではリクエストごとにDBへのアクセスを行っていますが、キャッシュを導入することで、レスポンス速度の向上やDB負荷の軽減が期待できると考えています。

これについては、今後の改善点として検討していく予定です。

まとめ

今回の実装を通じて、実装前に視野を広げ、さまざまな手段を自分の引き出しに入れておく重要性を実感しました。そのためには、「もっと良い方法はないか」と常にベストを探し続けることが大切だと感じました。経験を積むことと同時に、探究心を持ち続けることで、自然と「より良いものを作りたい」という気持ちが湧いてきます。今後もこの姿勢を大切にし、より良い設計と実装を目指して学び続けていきたいと思います。

筆者：K・T（20代）

所属：ハイブリット・マルチクラウド部

マーケターとしてWEB広告運用やアパレルブランドの運営に携わってきたが、エンジニアとしての新たな挑戦を決意した転職組。
好奇心が旺盛で、新しいことに挑戦する姿勢が彼女の魅力。
マーケター×エンジニアの強みを生かし、UI/UXの提案から実装まで幅広く対応し、彼女自身がブランドを育てているのだろうと思わせてくれる、そんな20代の乙女。

The post 【はじめてのJava】ダッシュボードAPIを作成しよう！②コース情報取得編 first appeared on SMS DataTech.

こんにちは！マーケターから未経験のエンジニアに転身した社員Tです。
開発を始めて1年が経ち、サーバーサイド開発にも触れるようになりました。

今回は、Javaを使用したダッシュボードAPIの作成についてご紹介します。
これまでクライアントサイド中心の開発を行っていた私が、サーバーサイドのAPI開発に挑戦していく様子をお届けします。

本記事の対象の方

• サーバーサイド開発をこれから学びたい方
• JavaでのAPI開発に興味がある方
• ダッシュボードの作成を通じて、実践的な技術を学びたい方

Javaとは？

クライアントサイドしか触れてこなかった私は、サーバーサイドについては全くの初心者でした。そこで、まずは「Javaとは何か？」というところからお話ししたいと思います。

Javaは、非常に人気のあるオブジェクト指向プログラミング言語で、さまざまなアプリケーションの開発に広く使用されています。特に、サーバーサイド開発や大規模システム開発において強力なツールとなっており、以下のような特徴があります。

プラットフォームに依存しない

Javaで開発されたアプリケーションは、どのOSでも実行可能で、クロスプラットフォームで動作します。これにより、Javaで書かれたコードは、Windows、Mac、Linuxなど、異なる環境でも問題なく実行できます。

オブジェクト指向

Javaはオブジェクト指向プログラミングに基づいているため、コードが整理されていて、再利用性が高く、保守性に優れています。これにより、アプリケーションの規模が大きくなっても、管理がしやすくなります。

豊富なライブラリとフレームワーク

Javaには、開発を効率化するための豊富なライブラリやフレームワークが存在します。特に、Spring BootやHibernateなどは、サーバーサイド開発において非常に便利で、効率的に開発を進めることができます。

このように、Javaは非常に強力で多用途な言語です。これからサーバーサイド開発に取り組む際に、大きな武器となってくれること間違いなしです。

環境構築

環境構築に関しては、内容が広範囲にわたるため、別の記事で詳細に解説する予定です。

ダッシュボードAPIの作成

今回作成したいのは、こんなダッシュボード画面です。ユーザーがコースを選択することで、自分の学習状況を一目で確認できるようにすることを目指しています。

全体の作成の流れとしては、下記の通りとなります。

1. ユーザー情報を取得
2. コース情報を取得
3. 各グラフ描画に必要なデータを取得

今回は、その中でも最初のステップとして、
「1.ユーザー情報を取得」するAPIの実装について詳しく触れていきたいと思います。

ユーザー情報取得APIの設計

まず最初に、ユーザー情報を取得するAPIの設計方針を考えます。

今回のAPIでは、指定されたメールアドレスを基に、ユーザーIDと法人IDを取得し、画面に返すことが目的です。従って、POSTメソッドを使用し、リクエストボディからメールアドレスを受け取るシンプルなAPI設計にします。

エンドポイント

• HTTPメソッド： POST
• リクエストボディ： メールアドレス
• レスポンス： ユーザーIDと法人ID（JSON形式）

リクエスト例

{
  "mailAddress": "[email protected]"
}

今回はパスパラメータではなく、リクエストボディからメールアドレスを受け取る設計にしています。これにより、柔軟なデータの受け渡しが可能となります。

レスポンス例

{
  "userId": 175,
  "corporateId": 1,
  "errorMessageList": null
}

このレスポンスでは、指定されたメールアドレスに対応するユーザーの情報（ユーザーIDと法人ID）をJSON形式で返します。もしエラーが発生した場合は、errorMessageListにエラーメッセージを追加することで、エラー対応を行います。

ユーザー情報取得APIの実装

次に、このAPIを実際に実装していきます。Spring Bootを使って実装を行い、リクエストを受け取った後にデータベースからユーザー情報を取得し、レスポンスを返す流れになります。

ユーザー情報を管理するモデルクラスの作成

まず最初に、ユーザー情報を格納するためのエンティティクラスを作成します。このクラスは、データベースのテーブルとマッピングされ、ユーザー情報を格納する役割を持ちます。ここで定義したクラスを基に、データベース操作を行います。

例として、LoginHistoryEntityエンティティクラスを作成します。

package jp.co.smsdatatech.questiongenerate.entity;

import java.io.Serializable;
import java.sql.Timestamp;
import lombok.Data;

/**
 * ログイン履歴テーブルEntity
 */
@Data
public class LoginHistoryEntity implements Serializable {

    /** シリアルバージョンUID */
    private static final long serialVersionUID = 1L;

    /** ユーザーID */
    private Integer userId;

    /** 法人ID */
    private Integer corporateID;

    /** ログイン日時 */
    private Timestamp loginDate;
}

Serializable インターフェースを実装することで、オブジェクトのシリアライズが可能となり、永続化や通信に利用できるようになっています。

MyBatisのMapper設定

次に、データベースからユーザー情報を取得するためのクエリを定義するXMLファイルを作成します。このXMLファイルは、MyBatisなどのORMツールと組み合わせてデータベースとのやり取りを行います。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="jp.co.smsdatatech.questiongenerate.repository.CustomerMapper">

  <select id="getByMailAddress"
          parameterType="String"
          resultType="jp.co.smsdatatech.questiongenerate.entity.CustomerEntity">
    SELECT
      user_id,
      user_name,
      mail_address,
      address_prefecture,
      address_municipality,
      birthday,
      gender,
      create_date,
      update_date
    FROM
      customer
    WHERE
      mail_address = #{mailAddress}
  </select>

</mapper>

#{mailAddress}： この部分が、実際に呼び出し元から渡された email パラメータの値に置き換えられます。

サービスクラスの作成

次に、サービスクラスを作成してユーザー情報の取得処理を実装します。このクラスでは、リポジトリやMapperを使ってデータベースから情報を取得し、必要に応じてレスポンスに変換します。

import lombok.extern.slf4j.Slf4j;
import jp.co.smsdatatech.questiongenerate.util.DateUtils;

/**
 * ログイン履歴テーブルサービス
 */
@Slf4j
@Service
public class LoginHistoryService {

    private final LoginHistoryMapper loginHistoryMapper;

    // コンストラインジェクションを使用
    @Autowired
    public LoginHistoryService(LoginHistoryMapper loginHistoryMapper) {
        this.loginHistoryMapper = loginHistoryMapper;
    }

    /**
     * 指定されたメールアドレスに基づいてユーザー情報を取得する。
     *
     * @param email メールアドレス
     * @return ユーザーIDと法人IDを含むリスト。
     */
    @Transactional(readOnly = true)
    public Map<String, Object> getUserDetailsByEmail(String email) {
        log.debug("format: メールアドレス {} に基づくユーザー情報を取得します。", email);
        return loginHistoryMapper.getUserDetailsByEmail(email);
    }

getUserDetailsByEmail メソッドは、@Transactional アノテーションを使用してトランザクションを管理し、指定されたメールアドレスに基づいてユーザー情報を取得します。

コントローラークラスの作成

最後に、リクエストを処理するコントローラークラスを作成します。このクラスで、リクエストボディからメールアドレスを受け取り、サービスクラスを呼び出して情報を取得し、その情報をレスポンスとして返します。

例えば、TopRestクラスを以下のように作成します。

public class TopRest {

    /**
     * ログイン状況取得。
     *
     *<p>login_historyテーブルからユーザーIDに基づくログイン状況を取得し、
     * LoginHistoryResponseFormに詰めて返却する。
     *
     *<h3>処理フロー</h3>
     * 1. ログイン履歴を取得
     * 2. 取得データを返却
     *
     *<h3>レスポンス構成</h3>
     * "loginHistorysByDay" -> 曜日ごとのログイン状況 (キー：曜日, 値：true/false)
     * "error" -> エラー発生時のメッセージ
     *
     *@param form Top画面UserId用form
     *@param result バリデーション結果
     *@return ログイン履歴情報 LoginHistoryResponseform
     */
    @PostMapping("/getLoginHistoryByUserId")
    public LoginHistoryResponseForm getLoginHistoryByUserId(
            @RequestBody @Valid UserIdForm form,
            BindingResult result) {

        List<String> errorMessageList = new ArrayList<>();
        LoginHistoryResponseForm responseForm = new LoginHistoryResponseForm();
        Set<String> processedFields = new HashSet<>();

        // バリデーションエラーがある場合、詳細なエラーメッセージを追加
        if (result.hasErrors()) {
            for (FieldError fieldError : result.getFieldErrors()) {
                // フィールド名を基に重複チェック
                if (!processedFields.contains(fieldError.getField())) {
                    String errorMessage = messageSource.getMessage(fieldError, Locale.getDefault());
                    errorMessageList.add(errorMessage);
                    processedFields.add(fieldError.getField());
                }
            }
            responseForm.setErrorMessageList(errorMessageList);
            return responseForm;
        }

        // ユーザーIDを整数に変換
        Integer userId = Integer.parseInt(form.getUserId());

        // サービス層で曜日ごとのログイン履歴を取得
        Map<String, Boolean> dailyLoginHistoryMap =
            loginHistoryService.getLoginHistoryByUserIdAndDateRange(userId);

        // ログイン履歴が空かどうかをチェック
        if (dailyLoginHistoryMap.isEmpty()) {
            errorMessageList.add(messageSource.getMessage(
                ErrorMessages.NO_LOGIN_HISTORY, null, Locale.getDefault()));
            responseForm.setErrorMessageList(errorMessageList);
            return responseForm;
        }

        responseForm.setDailyLoginHistoryMap(dailyLoginHistoryMap);
        return responseForm;
    }

このメソッドは、リクエストボディで受け取ったユーザーID（form）に対してバリデーションを実行します。
もしバリデーションエラーがあれば、そのエラーメッセージをリストに追加し、LoginHistoryResponseForm にセットしてエラーレスポンスとして返却します。

バリデーションエラーがなければ、ユーザーIDを整数に変換し、loginHistoryService.getLoginHistoryByUserIdAndDateRange を使用して、指定されたユーザーの曜日ごとのログイン履歴を取得します。

もしログイン履歴が存在しない場合は、エラーメッセージをリストに追加し、早期リターンします。
ログイン履歴が取得できた場合は、その情報をレスポンスフォームに設定し、正常なレスポンスとして返却します。

実装内容の振り返り

Mapの便利さゆえに使用しがちですが、型安全性の欠如やコードの可読性を考慮すると、DTOやEnumを利用した実装に統一していく方が望ましいと感じました。

また、作成中に感じた点として、サーバーサイドに情報を送信する際にリクエストが改ざんされる可能性があるというセキュリティ上の懸念が浮き彫りになりました。特に、クライアントサイドから送信されたデータがそのままサーバーで利用されるため、不正な操作を防ぐためにセキュリティ対策を強化する必要があると痛感しました。この点については、Javaのフィルターや認証・認可の仕組みを活用し、より安全なシステムを構築するという課題が残りました。次回制作時には、このセキュリティ部分を改良していきたいと思います。

まとめ

まだ知識が浅く、試行錯誤しながら進めている部分も多いですが、実装を通じて多くのことを学びました。今後は、より洗練された設計を目指し、コードの可読性や保守性を高めるための改善に取り組んでいきたいと思います。また、セキュリティやパフォーマンスに関する課題も意識し、これらの分野についてさらに学び、システム全体をより堅牢で効率的なものにしていきたいと考えています。

筆者：K・T（20代）

所属：ハイブリット・マルチクラウド部

マーケターとしてWEB広告運用やアパレルブランドの運営に携わってきたが、エンジニアとしての新たな挑戦を決意した転職組。
好奇心が旺盛で、新しいことに挑戦する姿勢が彼女の魅力。
マーケター×エンジニアの強みを生かし、UI/UXの提案から実装まで幅広く対応し、彼女自身がブランドを育てているのだろうと思わせてくれる、そんな20代の乙女。

The post 【はじめてのJava】ダッシュボードAPIを作成しよう！① ユーザー情報取得編 first appeared on SMS DataTech.

こんにちは！マーケターから未経験のエンジニアに転職した社員Tです。再びブログを執筆できる機会をいただき、とても嬉しく思います。
前回のブログから半年が経ちましたが、その間に学んだことや身につけた技術を引き続き皆さんと共有できたらと思っています。

今回は、Vue.jsと、Chart.jsを組み合わせて視覚的にデータを表現する方法にチャレンジしてみました！

本記事の対象の方

このブログ記事は、JavaScriptのフレームワークであるVue.jsを学びたい初学者や、実際にアプリケーションを開発したい方を対象にしています。
また、グラフやチャートを使ってデータを視覚化したい方に向けて、Chart.jsの魅力や具体的な使い方をご紹介します。

vue.jsとは？

Vue.jsは、JavaScriptのフレームワークのひとつで、HTMLとJavaScriptの間でデータの連携を行う役割を果たします。
詳しい説明については、過去のブログ記事をご参照ください。

vue.js環境構築

Vue.jsを使うための環境構築についても、過去のブログを参考にしてください。
具体的な手順を詳しく解説していますので、導入方法や初期設定の詳細を確認できます。

メリット

Chart.jsを使用することで、データを視覚的に表現することが可能になります。
そのメリットをいくつかご紹介します。

1. 簡単な導入と使いやすさ

シンプルなAPIで、初心者でもすぐに利用できるのが魅力です。

2. 豊富なチャートタイプ

折れ線グラフや円グラフなど、多彩なグラフを簡単に作成できます。

3. カスタマイズ性

デザインを統一しやすく、自由にカスタマイズが可能です。
そして、Vue.jsと組み合わせることで、さらに次のような利点があります。

4. リアクティブデータの自動反映

Vue.jsのリアクティブシステムを活用することで、データが更新されるたびにグラフも自動で再描画されます。
これにより、動的なデータ表示が簡単に実現します。

5. コンポーネントベースでの再利用性

Vue.jsでは、グラフをコンポーネントとして再利用できるため、プロジェクト全体で効率的にグラフ描画が行えます。

これらの組み合わせによって、ユーザーにとっては視覚的にわかりやすいデータ表示が可能になり、開発者にとっては効率的な実装が実現します！

Chart.js環境構築

Chart.jsを使用するには、以下の方法があります。

• scriptタグを埋め込む
• NPMを利用してインストール
• CLIを利用してインストール(単一ファイルコンポーネントが利用可)

今回は、<body>終了タグの直後にscriptタグを挿入しました！

この方法なら、すぐに使い始められるので、手軽にグラフを表示したい場合に便利です。

描画領域の準備

Chart.jsは、HTMLの<canvas>要素にグラフを描画します。まずは<canvas>要素をHTMLに追加します。ここでは、idとして”learningTimeChart”を指定しています。

次に、canvas要素のコンテキストを取得して、描画のための準備をセットしていきます。

グラフ描画エリア設定

Vue.jsでChart.jsを使用して、チャートを作成します。サンプルコードは以下の通りです。

var myLineChart = new Chart(ctx, {
  type: 'doughnut', // グラフの種類
  data: data,       // データ
  options: options // オプション設定
});

それぞれの設定項目の詳細を表形式でまとめました。

先ほど紹介したHTMLをもとに、scriptを記述してグラフを描いていきます。

グラフ描画の実践

円グラフを表示するサンプルを示します。

createChart(labels, data) {
  let canvas = document.getElementById('learningTimeChart');
  if (canvas) {
    let ctx2 = canvas.getContext('2d');
    if (ctx2) {
      if (this.learningTimeChart) {
        this.learningTimeChart.destroy();
      }

      this.learningTimeChart = new Chart(ctx2, {
        type: 'doughnut',
        data: {
          labels: labels,
          datasets: [{
            data: data,
            backgroundColor: ['#36A2EB', '#FF6384'],
            hoverBackgroundColor: ['#36A2EB', '#FF6384']
          }]
        },
        options: {
          cutout: '0%',
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              enabled: false
            },
            datalabels: {
              display: false
            }
          }
        }
      });

      this.isLoading = false;
    }
  }
},

以下のようなグラフが描画されます。

今回は、円グラフを使って目標時間と総学習時間を表示しています。

グラフのタイプとデータ設定

上記の表でもご説明した通り、グラフのタイプは、typeプロパティで指定します。今回の円グラフを描く際は、’doughnut’を指定します。
データはdataプロパティで設定し、Vue.jsのコンポーネントとしてグラフを作成することで、データが変更されるたびに自動的にグラフも再描画されます。

既存のグラフがある場合は、destroyメソッドを呼び出して破棄し、Chartコンストラクタを使用して新しいグラフを生成します。

今回の実装では、Axiosを使用してJSONファイルからデータを取得し、モックデータとして活用しています。

"learning_time_data": {
  "labels": ["学習時間", "残りの時間"],
  "data": [200, 120]
},

この方法により、リアルなAPIレスポンスを模倣でき、データがない状態でもスムーズに開発やテストが可能です。

実際の開発時には、学習時間を表示するグラフをコンポーネント化することで、異なるページで再利用が容易になり、プロパティを通じて異なるデータを渡すことで開発効率が向上します！

オプションの設定

options オブジェクトを使うことで、グラフの見た目や動作をカスタマイズできます。

• cutout: 円グラフの中心の空間のサイズを指定
• legend: 凡例の表示
• tooltip: ツールチップの表示
• datalabels: データラベルの表示

そのほかにも、スタイルの設定で背景色を変更したり、アニメーションを加えたりと、色々と楽しむことができます。

まとめ

プロジェクトで使う機会があったので、Chart.jsの使い方をまとめてみました。
これ一つで色々なグラフが生成できるのは本当に便利ですね！

今後もさまざまなグラフを作成していきたいと思います。
最後までお読みいただき、ありがとうございました！

参考サイト(公式)

• クイックスタート | Vue.js
• Chart.js

筆者：K・T（20代）

所属：ハイブリット・マルチクラウド部

マーケターとしてWEB広告運用やアパレルブランドの運営に携わってきたが、エンジニアとしての新たな挑戦を決意した転職組。
好奇心が旺盛で、新しいことに挑戦する姿勢が彼女の魅力。
マーケター×エンジニアの強みを生かし、UI/UXの提案から実装まで幅広く対応し、彼女自身がブランドを育てているのだろうと思わせてくれる、そんな20代の乙女。

The post 【学習アプリ開発記】Vue.jsとChart.jsを使ってグラフ描画してみた。 first appeared on SMS DataTech.

こんにちは！マーケターから未経験のエンジニア職に転身した社員Tです。
この度は、初めてのブログ記事を執筆する機会を得て、とても嬉しく思います。
この記事では、自身の学びと成長を振り返りながら、過去に実施した vue.js について書いていきたいと思います。

本記事の対象の方

本記事は、JavaScriptのフレームワークであるVue.jsを学びたい初学者や、Vue.jsを実際に使用してアプリケーションを開発したい方が対象です。記事では、Vue.jsの基本的な機能やメリットから始めて、環境構築方法や外部APIからのデータ取得、ディレクティブの活用方法などを解説しています。

vue.jsとは？

まずVue.jsとは、JavaScriptのフレームワークの1つであり、HTMLとJavaScriptの間でデータの連携を行う役割を果たします。このデータの連携には、Vue特有の機能であるディレクティブが使用されます。「ディレクティブ」とは、HTML内で特定の属性や要素に指示を記述することで、Vue.jsがその部分を監視し、データの変更に応じて動的にHTMLを更新します。

メリット

Vue.jsを扱うメリットは、JQueryよりも記述が簡単であり、初心者でも扱いやすいことです。
さらに、Vue.jsは※双方向のデータバインディングが可能です。
つまり、UIとデータのいずれか一方が更新されれば、もう一方も自動的に更新される仕組みになっています。これにより、データとUIが常に同期されるため、開発効率が向上します。
初学者の私には、理想的な学習機会となりました。
※データモデルとUI（ユーザーインターフェース）の間でデータが自動的に同期される仕組み

環境構築の手順

Vue.jsを導入する方法

Vue.jsは、いくつかの方法で使用することができます！

• scriptタグを埋め込む
• NPMを利用してインストール
• CLIを利用してインストール(単一ファイルコンポーネントが利用可)

今回はbody終了タグの直後にscriptタグを挿入しました！

Vue.jsの拡張機能をインストール

事前にお使いのブラウザにVue Devtoolsをインストールしておくことをおすすめします。
Vueコンポーネントの階層構造や状態を視覚化できます。
私はchromeを使うため、拡張機能vuejs-devtoolsを入れました。

問題取得とディレクティブの活用

タイトルに記載のとおり、学習アプリの制作に挑戦しました。
このアプリは、ユーザーに問題を提供し、解答を受け付け、解説を表示する、一問一答のサービスです。
ここからは、特に問題の取得とVue.jsのディレクティブの活用にフォーカスしてみたいと思います。

問題の取得と表示

問題の取得や回答の解説表示にはChatGPTのAPIを利用しています。
具体的には、JAVA側でAPIエンドポイントを指定し、axiosを使用してHTTPリクエストを送信しています。
これにより、アプリが動的に問題を取得し、表示することが可能になります。

デザイン（ディレクティブの活用）

Vue.jsのディレクティブを活用して、動的な表示を実現します。
具体的には、v-ifやv-cloakなどのディレクティブを利用しました。

エラーテキストの表示

条件に応じて要素を表示または非表示にしたい場合には、「v-if 」ディレクティブを利用しています。
今回はシステム上、なにかしらの問題が発生した際にはエラーを表示させたいが、通常時は表示したくない場合に「v-if 」ディレクティブを活用しました。

解説の非表示

演習を行うアプリでは、問題を解いている際に回答が見えてしまったら使いものになりません。
そのため、ユーザーが回答の閲覧を希望するまでは解説を非表示にする必要があります。
さらに、次の問題に進む際には、新しい問題と回答が再取得されるため、一時的にデータが表示されることを防ぐために今回は、v-cloak ディレクティブを使用しました。

v-cloak ディレクティブは、Vue.jsの初期化が完了するまで要素を隠すためのディレクティブです。初期化が完了する前にデータが表示されてしまうことを防ぎ、見栄えを向上させます。

これらのディレクティブを活用することで、アプリの見た目や動作をスムーズに調整することができます。

おわりに

以上、Vue.jsを使用して問題の取得からディレクティブの活用までをご紹介させていただきました！
次回も、Vue.jsについてさらに深く掘り下げていきたいと思います。
皆さんもぜひ、Vue.jsを使った開発に挑戦してみてください！

筆者：K・T（20代）

所属：ハイブリット・マルチクラウド部

マーケターとしてWEB広告運用やアパレルブランドの運営に携わってきたが、エンジニアとしての新たな挑戦を決意した転職組。
好奇心が旺盛で、新しいことに挑戦する姿勢が彼女の魅力。
マーケター×エンジニアの強みを生かし、UI/UXの提案から実装まで幅広く対応し、彼女自身がブランドを育てているのだろうと思わせてくれる、そんな20代の乙女。

The post 【学習アプリ開発記：はじめてのVue.js】問題解答画面を作成してみた！ first appeared on SMS DataTech.

こんにちは、株式会社SMSデータテックの社員Mです。
前回の記事ではECSでRedmineを構築する方法について解説しました。
ECSでRedmineを構築することで、サーバーの管理・運用業務を効率化することができました。
本記事では、次のステップとして、AWS SSOの設定をやってみたいと思います。

本記事対象の方

AWSでRedmineを構築しており、シングルサインオン(SSO)設定をしたいという方を対象としております。
※現在、omniauth samlのpluginsに脆弱性が発見されております。
導入する際は気を付けて下さい。

SSO設定をするメリット

AWSコンソールにログインすることができれば、ワンクリックでRedmineにアクセスすることができます。
また、初アクセスの際にアカウントが作成されるため、アカウント作成も必要ありません。

使用技術について

SSOとは

SSOとは、Single Sign-Onとして知られる認証の仕組みのことです。SSOを使用すると、ユーザーは1度の認証で複数の関連システムやアプリケーションにアクセスできます。これは、ユーザーが複数のアカウントやアプリケーションに対して別々にログインする必要がなくなるため、利便性が向上し、セキュリティが向上します。

IAM Identity Centerとは

AWS IAM アイデンティティセンターは、AWS アプリケーションもしくは複数の AWS アカウントに対するワークフォースのアクセスを管理するために推奨されるサービスです。

RedmineにSSO設定を導入する方法

手順は以下の通りになります。

1. IAM Identity Centerでアプリケーションの設定
2. omniauth samlファイルインストール
3. samlファイルを編集

それぞれ説明していきます。

IAM Identity Center

IAM Identity Centerのアプリケーションから、アプリケーションの追加を行います。

アプリケーションの追加

写真

こちらの情報は、後述するsamlファイルに記述するので、メモしておいてください。

アプリケーションメタデータ

「メタデータ値をマニュアルで入力する」を選択

入力項目は下記内容を記述
アプリケーションACS URL：URL/auth/saml/callback
アプリケーションSAML対象者：IAM Identity Center SAML 発行者 URL

属性マッピングの編集

属性マッピングについては、AWS公式ドキュメントを参照しています。

下記表の通り記述

omniauth samlファイル編集

→omniauth saml

AWSからSSOログインが可能になるpluginです。

Start画面からワンクリックでredmineにアクセスできるようになります。

※version5.1.1でも導入できますが、脆弱性が検知されているため、注意が必要です。

インストール方法

dockerfileが存在するディレクトリにpluginsというディレクトリを作成します。
そのディレクトリに移動し、下記コマンドを実行します。

2saml.rbの編集

samlファイルを編集します。
sample-saml-initializers.rbをコピーし、編集していきます。

assertion_consumer_service_url => ”URL/auth/saml/callback”
issue                                           => ”URL/”
idp_sso_target_url                      => “IAM Identity Center SAML 発行者 URL”
idp_cert                                       => “IAM Identity Center証明書”
name_identifier_format               => “urn:oasis:names:tc:SAML:2.0:nameid-format:persistent”
idp_slo_target_url                       => “URL”
login                                            => ‘extra.raw_info.name’,
mail                                             => ‘extra.raw_info.email’,
firstname                                     => ‘extra.raw_info.firstname’,
lastname                                     => ‘extra.raw_info.lastname’

※Redmineのversion4以下だとこのままで良いのですが、version5以上になるとエラーが発生してしまいます。
そのため、version5以降は下記設定が必須となります。

Redmine version5以降の追加設定

このsamlファイルの一行目に

と入力します。(自身が設定しているディレクトリから/redmine_omniauth_saml/lib/redmine_omniauth_samlを見に行ってください。デフォルトのディレクトリはusr/src/redmineです。)
このディレクトリにはSSOログインに関係するファイルがあります。

以上で設定完了です。

AWSコンソール画面のアプリケーションから、直接Redmineにアクセスできるようになります。

写真追加

おわり

今回は、ECSで構築したRedmineにシングルサインオン(SSO)設定を導入してみました。AWS SSOを活用してRedmineに接続する方法についての情報が少なく、設定にはかなり苦労しました。特に、SAMLファイルの編集やIAM Identity Centerの登録に関する部分が難しかったです。
しかし、設定後は面倒なアカウント作成が不要になり、ワンクリックで接続できるようになったため、非常に便利になりました。ただ、一部の脆弱性がまだ解消されておらず、その点が気がかりです。
試行錯誤の末に作り上げたAWS SSO認証が、他の方々のお役に立てることを願っています。

筆者：R・M（20代）

所属：ハイブリット・マルチクラウド部

まったくの未経験でこの業界に飛び込んできた若手。
パッと見はビジュアル系？
でもプレゼンしだすと、少し胡散臭さもあわせもったセールスように華麗なプレゼンを見せる。
読者と一緒にAWSのプロになりたい、そんな20代。

The post RedmineのSSO設定をAWSで行う first appeared on SMS DataTech.

こんにちは、株式会社SMSデータテックの社員Mです。
今回はdockerfile編集とECSの設定を解説します。

本記事対象の方

ドメインの設定や環境の構築を、ご自身で設定できる方

ECSで構築するメリット

ECS環境で立ち上げる理由としては、サーバーなどの管理運用が不要なためという点です。
また、最初の環境構築が終われば、イメージのタグを編集するだけでアップデート可能です。

構成図

全体の構成図となります。
本記事で紹介する内容はECSとdockerfileです。
ELBについても紹介していますが、設定に必要な部分のみ記載しています。
今回は、上記構成図の赤線で囲った箇所以外のAWS環境が作成できている前提で進めていきます。

使用技術について

今回使用するサービス、技術について簡単に説明します。

ECSとは

ECSとは、Amazon Elastic Container Service（Amazon ECS）の略です。AWS上で、Dockerコンテナを簡単に管理、配置、スケーリングをすることができます。

ECRとは

ECRとは、Amazon Elastic Container Registry（Amazon ECR）の略です。AWSが提供する、Dockerコンテナイメージのプライベートレジストリサービスのことです。ECRを使用することで、Dockerイメージを安全に保存、管理、デプロイできます。

ELBとは

ELBとはElastic Load Balancing（Amazon ELB）の略です。AWSが提供する負荷分散サービスです。ELBは、複数のEC2インスタンスや他のサービス間でネットワークトラフィックを自動的に分散させることで、高可用性とスケーラビリティを提供します。これにより、アプリケーションのパフォーマンスが向上し、障害が発生した際の影響を最小限に抑えることができます。

Dockerとは

Dockerとは、ソフトウェアのコンテナ化を実現するためのオープンソースのプラットフォームのことです。コンテナは、アプリケーションと定ファイルなどをまとめてパッケージ化し、どの環境でも一貫して動作させることができる技術です。

Dockerfileとは

Dockerfileとは、Dockerのイメージを作成するための手順を記載したテキストファイルのことです。テキストファイルで操作するため、編集管理が非常に簡単です。

DockerfileからRedmineを構築する方法

手順は下記の通りに進めていきます。

1. Pluginsをインストール
2. Dockerfileの編集
3. ECRにpush
4. ELB作成
5. ECS設定
6. ELB編集

Pluginsインストール

dockerfileが存在するディレクトリにpluginsというディレクトリを作成します。

そのディレクトリに移動し、下記コマンドを実行します。

git clone https://github.com/redmica/redmine_issues_panel 
git clone https://github.com/redmica/redmica_ui_extension 
git clone https://github.com/suer/redmine_absolute_dates 
git clone https://github.com/tkusukawa/redmine_work_time

各種Pluginsについての説明

Redmineの使用を改善していくためにDockerfileに幾つかのpluginsをinstallしています。
どんなpluginsなのか簡単に説明していきます。

issues panel

→issure panel

チケットをパネル形式で表示してくれるものです。
チケットがステータス毎で分かれているので、進捗状況が分かりやすくなります。

ui extension

→ui extension

セレクトボックスで検索が行えるようになります。

absolute dates

→absolute dates

Redmineはデフォルトのままだと「〇日前」と表示されます。

このpluginsを入れると、日付が表示されるようになります。

work time

→work time

このpluginsで工数の設定、算出が行えるようになります。

Dockerfile編集

ここからDockerfileの編集を行っていきます。
Dockerのイメージを作成し、実行することでDockerコンテナを作成することができます。
今回使用するイメージredmine:5.1.1です。

→redmine:5.1.1

実行内容の説明

ビルドするイメージのベースとなるイメージを指定しています。

FROM redmine:5.1.1

必要なパッケージを更新させ、不要なパッケージを削除します。
イメージの容量を小さく保つことができます。

RUN apt-get update
RUN apt-get clean
RUN rm -rf /var/lib/apt/lists/*

ローカルに保存したpluginsを、コンテナ内にコピーしています。
左側でローカルに保存したpluginsのディレクトリを参照し、右側でコンテナ内のディレクトリを指定しています。

COPY ./plugins/redmine_issues_panel/ /usr/src/redmine/plugins/redmine_issues_panel
COPY ./plugins/redmica_ui_extension /usr/src/redmine/plugins/redmica_ui_extension
COPY ./plugins/redmine_absolute_dates /usr/src/redmine/plugins/redmine_absolute_dates
COPY ./plugins/redmine_work_time /usr/src/redmine/plugins/redmine_work_time

ディレクトリを/usr/src/redmineにします。相対参照で動いているファイルもあるので、必ずこのディレクトリに移動させます。

WORKDIR /usr/src/redmine

所有権をredmineで統一させます。

RUN chown -R redmine:redmine ./

saml.rbをconfig/innitializers/saml.rbにコピーさせます。samlファイルはここを参照して動いています。

RUN cp plugins/redmine_omniauth_saml_saml.rb config/initializers/saml.rb

最後にbundle installを行います。ファイルの依存関係をインストールします。

RUN bundle install

ECRにpush

作成したdockerfileをECRにpushしていきます。
コマンドについては、ECRの画面「プッシュコマンドの表示」から参照できます。

認証トークンを取得し、レジストリに対してDocker クライアントを認証

aws ecr get-login-password --region <リージョン> | docker login --username AWS --password-stdin <AWSアカウントID>

Docker イメージを構築します。

docker build -t <イメージ名> .

リポジトリにイメージをプッシュできるように、イメージにタグを付けます。

docker tag <イメージ名>:<tag> <pushするイメージ名>:<tag>

新しく作成した AWS リポジトリにこのイメージをプッシュします

docker push <pushするイメージ名>:<tag>

ELB作成

ロードバランサーはALB、インターネット向けで作成します。
リスナーとルーティングは後ほど設定しますので、デフォルトで作成してください。

ターゲットグループ作成

その他はデフォルトでOKです。

ECS設定

タスク定義

ECRにpush後、ECSのタスク定義を作成します。

メモリ、CPUは最小要件で作成しています。

環境変数：

pluginsを導入しない場合、REDMINE_PLUGINS_MIGRATEは不要です。

デフォルトのままで問題ありません。
awslogs-groupはタスク定義の名前が自動的に入ります。

redmineのファイルは、files配下に保存されるため、コンテナパスは/usr/src/redmine/files
となります。

クラスター作成

デフォルトの設定でOK

サービス作成

ELB編集

ELBにリスナーを追加します。

証明書は取得した証明書を選択してください。

HTTPS:443の条件を編集します。

ホストヘッダーを選択し、redmineのURLを入力
HTTPS:443の設定は以上です。

最後にHTTP:80のデフォルトの設定も編集していきます。

アクションのルーティングをURLにリダイレクト

以上で設定終了です。

ECS起動後、URLからredmineにアクセスできるようになります。

おわり

ECSでRedmineを構築してみました。多くの記事がdocker-composeやEC2を使った方法を紹介していますが、ECSでの動作方法についてはあまり見かけませんでした。ECSでRedmineを運用することで、Dockerfileのアップデートだけで済み、サーバーの管理が不要になる点は非常に大きなメリットです。
アップデートも簡単で、バージョンを変更してupgradeコマンドを実行するだけで済むため、時間もかかりません。この方法により、管理の負担を大幅に軽減できます。
この記事が、他の方々の負担を少しでも減らすことができることを願っています。

⇒STEP2：RedmineのSSO設定をAWSで行う

筆者：R・M（20代）

所属：ハイブリット・マルチクラウド部

まったくの未経験でこの業界に飛び込んできた若手。
パッと見はビジュアル系？
でもプレゼンしだすと、少し胡散臭さもあわせもったセールスように華麗なプレゼンを見せる。
読者と一緒にAWSのプロになりたい、そんな20代。

The post ECSでRedmineを構築する first appeared on SMS DataTech.

こんにちは、社員Dです。
今回AWSのドキュメントを眺めていたら、EC2を管理するSystem Center Virtual Machine Managerのアドインがあるのを見かけました。
どんな感じなのか見てみたので、VirtualMachineManagerを試しに構築してみる様子とアドインの追加の様子を記事にしています。
また、インストール自体は完了しましたが、つまずいた箇所についても触れていきます。

⇒Amazon EC2とは

本記事の対象の方

この記事では、前提として必要なActiveDirectoryの設定、WindowsServerのセットアップなどは、ご自身で設定できる方を対象としています。

System Center Virtual Machine Managerとは

私自身の認識ですが、SystemCenterVirtualMachineManagerはオンプレミスのデータセンターにて複数のHyper-Vをホストするサーバー、仮想環境を管理する製品です。

メリット

大規模なデータセンターを抱える企業では、多くの仮想環境を抱えている事が有ります。
この製品は、その様な複数の仮想マシンやホストの管理を集約し運用の効率化、テンプレート化によって仮想マシンの展開を高速化できるメリットが有ります。

環境構築の手順

作るもの

WindowsServerとSystemCenterVirtualMachineManagerの評価版を利用し、管理サーバ、管理クライアントにAWS管理アドインをインストールしていきます。
Virtual Machine Manager(以下VMM)は下記のコンポーネントが要件となっている為、これらからも同時にインストールを進めていきます。

●Windows ADK
●SQL Server

事前準備

VMMではActiveDirectoryのドメインのVMM管理サーバ・VMホストに特権をもつドメインユーザが必要です。
これらはVMMのSQLServerのインストールにも必要なので、事前に用意します。
また、各インストーラもあらかじめダウンロードします。

仮想マシンとWindowsServer2022評価版のインストール

仮想マシン上で構築を進めていきます。
OSインストールについては細かい部分は省きますが、OSの種類はデスクトップエクスペリエンスをインストールします。

インストール完了後ドメイン参加も進めておきます。

 VMM構築

Windows ADKのインストール

今回試すサーバはインターネットに接続できるので、ダウンロードしたADKのインストーラのみで進めて行きます。

インストールする機能は「Deployment Tools」のみ必要です。
他の機能はインストールしません。

WindowsPEアドオンのインストール

VMMに必要な機能ですが、WindowsADKのインストーラーには含まれておらず、独立しています。
こちらも同じくインストールします。

SQLServer2022インストール

評価版のインストールを進めていきます。

途中に出てくるAzureの拡張機能はインストールしません。

インストールする機能には「データベースエンジンサービス」を選択する

照合序列は規定値から「Latin1_General_100_CI_AS」を選択

認証モードはsaも使えるようにしておきたいので、混合モードを設定
管理者に事前準備で作成したドメインのVMM用アカウントを設定します。

System Center Virtual Machine Managerのインストール

ここからVMMのインストールに入りますが、ダウンロードしてきた評価版のファイルは展開する必要があるようです。

デフォルトではCドライブにフォルダが作成され、その中に必要なファイルが展開されます

Setup.exeをクリックしてセットアップを開始します。

インストールメニューが表示されますが、上はVMM管理のインストールで、下はVMMの管理下に入る仮想のホストマシンへのエージェントインストールです。
今回は管理サーバのインストールを進めます。

機能選択は「VMM管理サーバー」を選択します。
同時にVMMコンソールのチェックが自動で入ります。

プロダクトキーは空欄のまま進みます。

DB設定を進めます。インスタンス名はSQLServerインストール時に設定したものをリストボックスから選択します。今回はデフォルトでインストールしているのでMSSELSERVERを選択。

VMM用に用意したドメインユーザを設定します。

ポート構成、ライブラリ構成についてはデフォルトのまま進めます。

インストールが完了しました。

成功している様子で記事を作成していますが、実はここで躓きました・・・。
次章で起きた事と私が解決できた方法を記載します。

コンソールの接続が表示されるので接続確認をします。

無事VMMの構築が完了しました。

VMMのインストール失敗例と対策

ライブラリ構成の後、インストール確認を経てセットアップに入ります。
しかし、セットアップ中に完了できない旨を伝えるメッセージが表示されセットアップに失敗しました。

原因はMicrosoft.ComponentStudio.Common.dllがないとの事。
WindowsADKで「Deployment Tools」をインストールしていれば、有る筈ですがエラーになっています。
実際のファイルパスを確認したところ確かにありません。

試しにamd64の中を確認すると、目的のファイルが入っています。
どうやら最新版はarmなどに対応した為なのか、アーキテクチャ毎にフォルダ分けがされてしまっているようです。
なのでここから少し古いバージョンのWindowsADKをダウウンロードしてインストールしなおしました

https://learn.microsoft.com/ja-jp/windows-hardware/get-started/adk-install#other-adk-downloads

AWSアドイン追加

ここからSCVMM用のアドインをダウンロードします。

https://aws.amazon.com/jp/windows/system-center/

ZIPダウンロードがダウンロードされます。

これを設定のコンソールアドインから追加します。

アドイン追加はウィザードにて追加できます。

追加が完了するとメニューにEC2ボタンが出てきます。

しかし、AmazonEC2から接続設定に入れますが、押せなくなっています。

VMとサービスで「すべてのホスト」を選択すると押せるようになります。

アクセスキーとシークレットキーを設定すると、一度コンソールが閉じられます。

再度起動するとEC2インスタンスの状態が確認できるようになりました。

起動・停止等は出来るようですが、作成画面を確認するとリージョン等表示はなく、表示も崩れています。
私の環境が原因かアドインのアップデートがされていないのか、原因は不明ですがインスタンスは作成できないようです。

以上でアドインの追加まで設定しました。

おわり

まだ、ホスト追加、仮想マシンの作成等が残ってはいますが、今回はここまでにします。
以前VMM 2012を使たことはありますが、大きく変わった様子はなくAzure連携関連の機能が増えたようです。
AWSのアドインについては、今後修正されるかは不明ですが、今後のアップデートの後、再度確認してみます。
VMM自体、大規模なオンプレミスの仮想環境を抱える企業向けといった印象で、中小規模なシステムではクラウドや、WindowsServer標準のhyper-Vマネージャーで十分といった印象です。

筆者：H・D（30代）

所属：ハイブリット・マルチクラウド部

興味をもったことはとことん追求してしまうＤ氏。
自宅にはオリジナルのサーバはもちろん、それを監視するパトランプまであるそう。
温度が規定値に達すると、手持ちのスマホにアラートが届くほど。
彼こそ、まさにインフラの申し子。

The post いまさらSystemCenterVirtual MachineManager2022を試す first appeared on SMS DataTech.

株式会社SMSデータテック　営業推進本部　黒石

はじめに

こんにちは。株式会社SMSデータテック営業推進本部の黒石です。
当社（SMSデータテック）では、全社員が『QC（Quality Control）サークル活動』と呼ばれる日常業務の品質向上を目的とした業務改善の小集団活動に取り組んでいます。
業務改善を自発的に行なうことの出来る若手リーダー育成の機会として、業務改善発表会という社内イベントを毎年開催しています。各部署から選抜された優れたQCサークル活動の改善事例を、全社員に対して業務改善発表会を通じてナレッジ共有を行ってます。
本稿では、社内イベントを企画・運営するQC事務局の担当者として、業務改善発表会という社内イベント向けのポスター作成を効率的に行う為に、生成AI（ChatGPT）を業務に活用した事例をご紹介します。

生成AI業務活用の背景

社内イベントの開催情報について、できるだけ多くの社員に対して認知してもらうことが、イベント告知の目的となります。実現方法としては「オンライン」と「リアル」の観点から伝達したい情報を、複数の媒体を活用して情報発信を行います。

情報発信の手段は下記３つの方法で実施します。

• 手段１：社内ポータルサイトの社内報として情報を発信する
• 手段２：各組織のグループメールアドレス宛に情報を発信する
• 手段３：社内フロアで目につき易い場所に対して情報が掲載されたポスターを掲示する

情報発信を行う為の「手段１」および「手段２」については、QC事務局として前年度に情報発信した文章を流用して作成することで、過不足のない情報発信を行うことが出来ます。
「手段３」のポスターの作成については、昨年度に使用したポスターの類似したデザインやレイアウトを流用することは新規性に欠けることとなり、掲示物のポスター内容を当社社員に見てもらえなくなってしまう状況が想定された為、新規作成する必要があると考えました。

今回は予算の関係上、掲示用ポスター作成を社外のデザイナーに対して外注を行わずに、生成AI（ChatGPT）の画像生成機能を有効活用することはできないかと考えて、イベント告知用ポスターの制作に取り組みました。

イベント告知用のポスター作成に向けた考慮点は下記となります。
①掲示したい場所を確認して、大枠のポスターサイズを決定します。（例：A2サイズ）
②ポスター作成後に印刷業者に印刷作業の発注を行う事を想定して、発注先の業者が推奨するファイルデータ（テンプレート）を利用して、ポスターに使用する画像を作成します。

社内掲示用ポスターに使用する画像の生成

生成AIとして著名なChatGPTの開発元はOpen AI社です。ChatGPTに最新AI画像生成ツール「DALL-E3」と呼ばれる画像生成機能が2023年10月に追加されました。
今回は、月額20$で使用することができる『ChatGPT Plus』プランの『GPT-4』を使用して、社内イベント告知用のポスター作成に必要な画像生成の作業を行います。

初めにChatGPTでは、チャット入力欄にMessage（テキスト文章や添付ファイルデータ等）を入力する情報のことを「プロンプト」といいます。
ChatGPTに対して「プロンプト」として具体的な指示を行なうことによって、目的に適したデザインの画像を生成することが可能となります。
ChatGPTのチャット欄に入力した「プロンプト」と出力された「画像生成結果」の事例について、ご紹介します。

事例１

ChatGPTのプロンプト入力

ChatGPTの画像生成結果

ChatGPTの機能を利用して画像生成をおこなった出力結果は下記となります。

画像生成結果に対する考察

社内イベント告知用ポスターとして使用したい画像のイメージとは違うものの、ChatGPTに任意の「プロンプト」を入力して実行をする事で、落ち着いたデザインの画像を生成できることを確認できました。

事例２

ChatGPTのプロンプト入力

ChatGPTの画像生成結果

画像生成結果に対する考察

業務改善発表会のイベント内容が伝わる画像として、英語のスペルに誤りがあるものの、アニメのような画像の生成結果を確認できました。

事例３

ChatGPTのプロンプト入力

ChatGPTの画像生成結果

画像生成結果に対する考察

業務改善発表会のイベント内容が伝わる画像イメージが、生成AI（ChatGPT）の機能を活用することで、アニメのような画像の生成結果を確認することができました。こちらの画像を採用して、最終的に社内イベント告知用のポスターを作成しました。

４．生成AI活用のポイント

生成AI（ChatGPT）活用のポイントについて説明します。

１．具体的な指示をプロンプトで入力する

AIは具体的な指示に基づいて動作します。期待する結果を得るためには、具体的で明確な指示を入力することが重要です。

２．AIの能力を理解する

AIは多くのタスクを実行できますが、その能力は限定されます。AIの能力と限界を理解することで、より効果的に活用することができます。

３．データの品質を確保する

AIの性能は、使用するデータの品質に大きく依存します。信頼性の高いデータ（言語情報等のデータ）を使用することで、より正確な結果を得ることができます。

４．結果の解釈を適切に行う

AIが提供する結果は、適切な解釈とコンテキスト（場面／文脈）が必要です。結果の解釈を適切に行うことで、有用な洞察を得ることができます。

５．倫理的な使用を心掛ける

AIの使用は、プライバシー、公正性、透明性などの倫理的な問題を引き起こす可能性があります。これらの問題を考慮に入れ、倫理的な使用を心掛けることが重要です。

これらのポイントを踏まえ、生成AI（ChastGPT）を効果的に業務活用してください。

まとめ

本稿では、生成AI（ChatGPT-4）を使用したポスター制作の体験談について記述しました。
有料版のChatGPT-4（DALL-E）の機能を使用して画像生成を行い、社内イベント告知用のポスター制作を行いました。
生成AI（ChatGPT-4）を使って様々なデザインを試して、最終的に満足のいくデザインを制作することが出来ました。ChatGPTの便利さや限界、さらに活用する際のポイントについて学びました。
具体的なプロンプトの重要性、ChatGPTのメリットとデメリット、そしてやり取りを続けることで理想の回答や結果を得られる可能性について触れました。
皆様も自組織のルールに準拠したうえで、生成AI（ChatGPT等）の便利な機能を業務に利活用してみてはいかがでしょうか。

SMSデータテックでは、一緒に働くメンバーを大募集しています！

• OJT制度があり初心者でも安心
• チームで協力し合って仕事ができる
• 仕事もプライベートも充実◎
• 世の中になくてはならないシステムに携われる
• 資格取得支援制度で新しい資格にチャレンジしやすい

私たちと一緒に、エンジニアとして楽しく働きませんか？

The post 生成AI（ChatGPT）でポスター生成してみた！ first appeared on SMS DataTech.