Credlyのサイトに登録されている資格に関してデータ分析を行うサービスを作ってみた話

Credlyのサイトをスクレイピングしてデータ分析サービスを作ってみた話

はじめに

デジタルバッジプラットフォーム「Credly」のデータを効率的に管理・分析するためのサービスを開発し，複数のクラウドプラットフォームにデプロイした経験を共有する．本記事では特に，アプリケーションのクラウド環境への構築に焦点を当てている．

Credlyの概要

Credlyは，デジタルバッジを管理・発行できるプラットフォームである．ユーザーは取得した資格やスキルを証明するデジタルバッジを管理し，オンライン上で共有することができる．

Credlyのデータ分析サービスの概要イメージ．多数のバッジを効率的に管理・分析できる．

開発の背景

現在186個のバッジを保持しているが，Credlyの標準UIには次のような課題があった：

• ソート機能がなく特定のバッジを探しづらい
• イベント時に保有資格のバッジを提示する際に時間がかかる
• 以前あった「人気順」「発行機関別」のソート機能が廃止された

これらの不便さを解消するために，Credlyからデータをスクレイピングし，分析・可視化するサービスを開発することにした．

開発の流れ

1. ローカル環境でのスクレイピングツール開発

PythonとSeleniumを使用して，Credlyサイトから自分のバッジデータを取得するスクレイピングプログラムを開発した．このステップでは：

• ログイン認証の自動化
• バッジデータの抽出
• データの整形と保存

の機能を実装した．

2. データ分析と可視化アプリケーションの開発

Streamlitを使用して，収集したデータを分析・可視化するウェブアプリケーションを開発した．主な機能として：

• 全取得バッジの一覧表示とフィルタリング
• 発行機関別バッジ数のグラフ表示
• 時系列での取得個数の推移表示

などを実装した．

3. クラウドサービスへのデプロイ

このアプリケーションを3つの主要クラウドサービス（Azure，AWS，Google Cloud）にデプロイした．それぞれの構築プロセスを詳細に解説する．

Azureでの展開

1. VSCodeを使用した開発環境

まず，Visual Studio Codeを使用して既存のスクレイピングプログラムを修正し，Streamlitアプリケーションとして再構成した．

2. Dockerコンテナの作成

App ServiceにChromedriverを含むアプリケーションをデプロイするため，コンテナ化することにした．

VSCodeでApp.py，Dockerfileとrequirements.txtを作成している様子．これらのファイルがコンテナ化に必要である．

requirements.txtには必要なPythonライブラリを記述．Streamlit，Selenium，pandas等の主要ライブラリを指定している．

3. コンテナイメージのビルドとテスト

Docker CLIを使用してローカル環境でコンテナイメージをビルドし，動作確認を行った．

ターミナルでのDockerイメージビルドコマンドの実行画面．ビルドプロセスが成功していることが確認できる．

ビルドしたコンテナイメージをローカル環境で起動しているコマンド画面．このステップでアプリケーションの動作検証ができる．

ローカルで起動したアプリケーションをブラウザで表示した様子．この段階でUIや機能の確認ができる．

4. Azure環境へのコンテナイメージのプッシュ

ビルドしたコンテナイメージをAzure Container Registryにプッシュする．

Azureコンテナレジストリへのログイン準備．適切な認証情報を使用してAzureサービスにアクセスする．

コンテナイメージにAzure Container Registry向けのタグを付ける操作．これによりイメージの保存先が指定される．

docker pushコマンドでイメージをAzure Container Registryにアップロードしている様子．レイヤーごとのアップロード進捗が表示されている．

イメージのプッシュが完了した状態．すべてのレイヤーが正常にアップロードされた．

Azure portalでコンテナイメージが正常に登録されていることを確認する画面．リポジトリ内のイメージ情報が表示されている．

アップロードされたイメージのタグ情報．バージョン管理やデプロイ時の参照に使用する重要な情報である．

5. App Serviceへのデプロイ

Azure App Serviceを使用してコンテナイメージをデプロイする．

Azure App Service作成画面．Webアプリケーションのホスティング環境を設定している．

App ServiceのDocker設定画面．コンテナレジストリからイメージを選択し，デプロイ設定を行う．

デプロイする前の設定確認画面．リソースグループ，プラン，イメージ情報など重要な設定を確認できる．

デプロイ完了後のApp Service概要画面．稼働状態やURLなどの情報が表示されている．

AWSでの展開

1. Amazon Container Registry(ECR)の作成

まず，コンテナイメージを保存するためのECRリポジトリを作成する．

Amazon ECRリポジトリ作成画面．コンテナイメージを保存するためのレポジトリを設定している．

2. コンテナイメージのビルドとECRへのプッシュ

AWS CLIを使用してECRへの認証を行い，コンテナイメージをビルドしてプッシュする．

# 事前準備
pip3 install --upgrade --user awscli
aws configure
# AWS Access Key ID: [アクセスキー]
# AWS Secret Access Key: [シークレットキー]
# Default region name: [リージョン（例: ap-northeast-1）]
# Default output format: json

export AWS_ACCESS_KEY_ID=アクセスキー
export AWS_SECRET_ACCESS_KEY=シークレットキー
export AWS_DEFAULT_REGION=リージョン

# ECRログイン
aws ecr get-login-password --region <リージョン> | docker login --username AWS --password-stdin <アカウントID>.dkr.ecr.<リージョン>.amazonaws.com

# コンテナイメージビルド，タグ付け，ECRにプッシュ
docker build -t <アプリ名> .
docker tag <アプリ名> <アカウントID>.dkr.ecr.<リージョン>.amazonaws.com/<アプリ名>
docker push <アカウントID>.dkr.ecr.<リージョン>.amazonaws.com/<アプリ名>

3. プッシュ確認とイメージURIのコピー

ECRコンソールでイメージがプッシュされたことを確認し，イメージURIをコピーする．

ECRコンソールでイメージが正常にプッシュされていることを確認する画面．イメージURI，タグ，サイズなどの情報が表示されている．

4. Amazon Lightsailコンテナサービスの設定

AWSのLightsailサービスを使用してコンテナアプリケーションをデプロイする．

AWSコンソールでLightsailサービスを検索している画面．AWS内の様々なサービスから目的のサービスを選択する．

Lightsailでコンテナサービスの作成画面．新規サービスの作成オプションを選択している．

コンテナサービスの容量（スペック）選択画面．アプリケーションに適した性能とコストのバランスを考慮したプランを選択する．

ECRのコンテナイメージをLightsailにデプロイする設定画面．コンテナ名，イメージURI，ポート設定などを指定している．

Google Cloudでの展開

1. Cloud Shellを使用した開発環境

Google CloudのCloud Shellを使用して，ローカル環境を使わずに直接クラウド上で開発を行った．

Google Cloud ConsoleからCloud Shellを起動する画面．画面上部のターミナルアイコンをクリックして開始する．

起動したCloud Shell環境．ここでコマンドを実行して，アプリケーションの開発からデプロイまで行う．

2. アプリケーションファイルの作成

Cloud Shell内でアプリケーションに必要なファイル（app.py，requirements.txt，Dockerfile）を作成する．

# 作業用ディレクトリの作成
mkdir st_app_credly && cd st_app_credly

# app.py の作成
cat <<EOF > app.py
import time
import pandas as pd
import streamlit as st
from selenium import webdriver
...
EOF

# requirements.txt の作成
cat <<EOF > requirements.txt
streamlit
pandas
selenium
webdriver-manager
matplotlib
wordcloud
python-dotenv
EOF

# Dockerfile の作成
cat <<EOF > Dockerfile
# 使用するイメージ
FROM python:3.9-slim

# Chromeのインストール
...
# 依存ライブラリのインストール
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY . .

# 環境変数設定
ENV PORT=8080

# 起動コマンド
CMD ["streamlit", "run", "app.py", "--server.port=8080", "--server.address=0.0.0.0"]
EOF

3. Cloud Shellエディタでのコード編集

必要に応じて，Cloud Shellのエディタモードを使用してコードを編集する．

Cloud Shellのエディタモードでコードを編集している画面．一般的なIDEと同様の機能で快適に編集できる．

4. コンテナイメージのビルドとCloud Runへのデプロイ

Cloud BuildとCloud Runを使用して，アプリケーションをビルドしデプロイする．

# Artifact Registry にリポジトリを作成（初回のみ）
gcloud artifacts repositories create <リポジトリ名> --location=<リージョン> --repository-format=docker

# Docker 認証の設定
gcloud auth configure-docker <リージョン>-docker.pkg.dev

# コンテナイメージのビルド
gcloud builds submit --tag <リージョン>-docker.pkg.dev/$(gcloud config get-value project)/<リポジトリ名>/<アプリ名1> .

# Cloud Run にデプロイ
gcloud run deploy <アプリ名2> \
    --image <リージョン>-docker.pkg.dev/$(gcloud config get-value project)/<リポジトリ名>/<アプリ名1> \
    --region <リージョン> \
    --platform managed \
    --allow-unauthenticated

5. デプロイ確認

Cloud Runコンソールでデプロイ状況を確認する．

Google Cloud ConsoleのCloud Run画面．デプロイされたサービスの状態，URL，トラフィック状況などが表示されている．

成果物と公開URL

完成したアプリケーションでは，以下の機能を実装した：

• バッジの一覧表示とフィルタリング
• 発行機関別バッジ数のグラフィカルな表示
• 時系列での取得バッジ数の推移
• データのエクスポート機能

完成したアプリケーションのメイン画面．バッジ一覧，グラフ，分析結果などが表示されている．見やすいUIで情報が整理されている．

各クラウドサービスでのアプリケーションURLは以下の通りである：

• Azure: https://credly-data-analyzer.azurewebsites.net/
• AWS: https://credly-data-analyzer.49evafhcg41s4.ap-northeast-1.cs.amazonlightsail.com/
• Google Cloud: https://st-app-credly-504242909255.asia-northeast1.run.app/

クラウドサービスの比較評価

3つのクラウドプラットフォームを比較した結果は以下の通り：

デプロイの容易さ

• Google Cloud: 最も簡単．Cloud Shell一つで開発からデプロイまで完結できる
• Azure: 比較的簡単だが，コンテナレジストリとApp Serviceの連携に少し手間がかかる
• AWS: LightsailコンテナサービスはUIが直感的で，実際はガイドに沿って数ステップでデプロイ可能．ECRからLightsailへの連携もスムーズ

運用コスト

• Azure & Google Cloud: ほぼ無料に近い形で運用可能
• AWS Lightsail: 月々約1,000円のコストが発生するが，安定したパフォーマンスと予測可能な固定料金体系が魅力

パフォーマンス

• AWS: Lightsailは安定したパフォーマンスを提供し，アプリケーションの負荷変動に強い
• Google Cloud: 自動スケーリングが優れており，トラフィック急増時に対応しやすい
• Azure: コールドスタート後の応答速度が良好

管理のしやすさ

• AWS: Lightsailは複雑なAWSサービス群の中でも比較的シンプルなインターフェースを提供し，コンテナ管理が容易
• Google Cloud: Cloud Runは非常にシンプルな運用モデル
• Azure: App Serviceは細かな設定が可能だが，オプションが多い

3つのサービスを総合的に見ると，用途や重視するポイントによって最適な選択は異なる．このアプリケーションの場合はいずれのプラットフォームでも十分な性能を発揮している．

まとめ

Credlyのバッジデータを効率的に管理・分析するためのアプリケーションを開発し，Azure，AWS，Google Cloudの3つのクラウドプラットフォームにデプロイした．各プラットフォームの特性を理解し，比較することで，クラウドサービスの選択や活用方法についての知見を深めることができた．

このプロジェクトにより，以下の成果を得ることができた：

• Credlyのバッジ一覧を効率的に管理・検索できるようになった
• データ分析の可視化や資格一覧のエクスポート機能を実現
• 各クラウドサービスでの展開方法の違いを比較・理解

今後は，より高度な分析機能を追加し，ユーザーエクスペリエンスの向上を図っていく予定である．

---

クラウドの選択はプロジェクトの要件や予算によって異なるが，今回の経験を通して，Google Cloudの開発環境の使いやすさとAzureのコスト効率の良さが特に印象的だった．みなさんのプロジェクトにも，この知見が役立てば幸いである．