Oura Ring API連携：開発者向けウェラブル接続ガイド

Oura Ringのようなウェアラブルデバイスは、個人の健康データの大半を提供します。開発者にとって、このデータはパーソナライズされたウェルネスアプリケーションを作成するための宝庫です。しかし、このデータに安全にアクセスし、意味のある形で可視化するという課題があります。

このチュートリアルでは、Oura Ring APIに接続し、日次の健康指標を取得して、クリーンでグラフやすいインターフェースに表示するウェルネスダッシュボードを構築します。モダンなウェブスタックを使用します：ReactフレームワークとしてNext.js、データ可視化のためにRechartsを使用します。

このガイドを終える頃には、動作するウェブルアプリケーションと、ウェアラブル技術APIを自分のプロジェクトに統合するための確かな理解が得られます。これは、盛り上がりを見せるヘルステック分野に興味を持つ任何人にとっての実用的なスキルです。

問題の理解

Ouraアプリ自体は優れていますが、Ouraデータを他のデータソースと関連付けたい、カスタム可視化を作成したい、または独自のウェルネスアプリケーションを構築したいと思うかもしれません。公式のOura APIは、これらの可能性への扉です。しかし、あらゆるAPI、特にOAuth2認証を使用するAPIとの統合は、手間はかかるかもしれません。

私たちのアプローチは、OAuth2ハンドシェイクを処理し、アクセストークンを安全に保存し、そのトークンを使用してOura APIからデータを取得するNext.jsアプリケーションを作成することです。その後、そのデータをフロントエンドに渡して、洞察に満ちたチャートとしてレンダリングします。

前提条件

• Oura RingとOuraアカウントを持っていること。
• Node.js（v18以上）とnpmがインストールされていること。
• ReactとNext.jsの基本的な知識があること。

ステップ1：Oura APIアプリケーションの設定

まず、Ouraデベロッパーポータルで新しいアプリケーションを登録する必要があります。

何をするか

OAuth2アプリケーションを作成し、Client IDとClient Secretを取得します。これらは、Next.jsアプリがOura API認証に使用します。

実装

1. Ouraデベロッパーポータルの「API Applications」セクションにアクセスし、「Create New Application」をクリックします。
2. アプリケーションの詳細を入力します。
3. 作成が完了すると、Client IDとClient Secretが提供されます。これらを安全に保管してください。後で必要になります。

ステップ2：Next.jsプロジェクトの初期化

次に、Next.jsアプリケーションを実行しましょう。

何をするか

新しいNext.jsプロジェクトを作成し、環境変数を設定して、Oura API認証情報を安全に保管します。

実装

npx create-next-app@latest oura-wellness-dashboard
cd oura-wellness-dashboard

次に、プロジェクトのルートに.env.localというファイルを作成し、Oura API認証情報を追加します：

OURA_CLIENT_ID=your_client_id
OURA_CLIENT_SECRET=your_client_secret
NEXTAUTH_URL=http://localhost:3000

仕組み

.env.localファイルはNext.jsの特別なファイルで、ソース管理にコミットされない環境変数を保存するために使用されます。これにより、APIキーが秘密に保たれ、安全に管理されます。

ステップ3：Oura API認証の実装

Next.js APIルートを使用してOAuth2フローを処理します。

何をするか

2つのAPIルートを作成します：1つはユーザーをOuraの認可ページにリダイレクトし、もう1つはユーザーが許可を付与した後、Ouraからのコールバックを処理します。

実装

まず、ログイルートを作成しましょう。pages/api/auth/login.jsに新しいファイルを作成します：

// pages/api/auth/login.js
export default function handler(req, res) {
  const authUrl = `https://cloud.ouraring.com/oauth/authorize?client_id=${process.env.OURA_CLIENT_ID}&redirect_uri=${process.env.NEXTAUTH_URL}/api/auth/callback&response_type=code&scope=daily`;
  res.redirect(authUrl);
}

次に、pages/api/auth/callback.jsにコールバックルートを作成します：

// pages/api/auth/callback.js
import { serialize } from 'cookie';

export default async function handler(req, res) {
  const { code } = req.query;

  if (!code) {
    return res.status(400).send('No code provided');
  }

  const tokenResponse = await fetch('https://api.ouraring.com/oauth/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      code,
      redirect_uri: `${process.env.NEXTAUTH_URL}/api/auth/callback`,
      client_id: process.env.OURA_CLIENT_ID,
      client_secret: process.env.OURA_CLIENT_SECRET,
    }),
  });

  const tokenData = await tokenResponse.json();

  if (tokenData.error) {
    return res.status(400).json(tokenData);
  }

  const cookie = serialize('oura_token', tokenData.access_token, {
    httpOnly: true,
    secure: process.env.NODE_ENV !== 'development',
    maxAge: tokenData.expires_in,
    sameSite: 'lax',
    path: '/',
  });

  res.setHeader('Set-Cookie', cookie);
  res.redirect('/dashboard');
}

仕組み

/api/auth/loginルートは、client_idとredirect_uriを付けてOuraの認可ページにユーザーを単にリダイレクトします。ユーザーが承認すると、Ouraは一時的なcodeを付けて/api/auth/callbackルートにリダイレクトします。

コールバックで、このcodeをaccess_tokenと交換します。次に、このaccess_tokenをhttpOnlycookieに保存して、安全に保管します。

ステップ4：Ouraデータの取得と表示

認証が完了したので、ユーザーデータを取得してダッシュボードページに表示できます。

何をするか

pages/dashboard.jsに新しいページを作成し、getServerSidePropsを使用してサーバー側でOuraデータを取得し、ページコンポーネントに渡してレンダリングします。チャートのためにrechartsライブラリもインストールします。

実装

まず、rechartsをインストールします：

npm install recharts

次に、pages/dashboard.jsファイルを作成します：

// pages/dashboard.js
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

export default function Dashboard({ sleepData, readinessData, activityData }) {
  return (
    <div>
      <h1>Your Oura Wellness Dashboard</h1>
      <div style={{ width: '100%', height: 300 }}>
        <h2>Sleep Score</h2>
        <ResponsiveContainer>
          <BarChart data={sleepData}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="day" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="score" fill="#8884d8" />
          </BarChart>
        </ResponsiveContainer>
      </div>
      {/* Add similar charts for readiness and activity data */}
    </div>
  );
}

export async function getServerSideProps(context) {
  const { oura_token } = context.req.cookies;

  if (!oura_token) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }

  const [sleepResponse, readinessResponse, activityResponse] = await Promise.all([
    fetch('https://api.ouraring.com/v2/usercollection/daily_sleep', {
      headers: {
        'Authorization': `Bearer ${oura_token}`,
      },
    }),
    // ... similar fetch calls for readiness and activity
  ]);

  const sleepJson = await sleepResponse.json();
  // ... similar json parsing for readiness and activity

  return {
    props: {
      sleepData: sleepJson.data,
      // ... readinessData and activityData
    },
  };
}

最後に、ログインボタン付きのシンプルなホームページをpages/index.jsに作成します：

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Welcome to your Wellness Dashboard</h1>
      <a href="/api/auth/login">Login with Oura</a>
    </div>
  );
}

仕組み

getServerSidePropsでは、cookieからoura_tokenにアクセスします。それが存在しない場合は、ログインするためにユーザーをホームページにリダイレクトします。存在する場合は、AuthorizationヘッダーでOura APIの睡眠、レディネス、アクティビティデータエンドポイントへのリクエストに使用します。このデータはプロパティとしてDashboardコンポーネントに渡され、Rechartsを使用してシンプルな棒グラフを作成します。

すべてを組み合わせる

すべてのピースが整ったら、アプリケーションを実行できます：

npm run dev

http://localhost:3000に移動します。ログインボタンが表示されます。これをクリックすると、Oura認証フローに進み、睡眠データが可視化されたダッシュボードにリダイレクトされます！

セキュリティのベストプラクティス

• HttpOnly Cookie：アクセストークンをhttpOnlycookieに保存します。これは、クライアントサイドのJavaScriptからアクセスできないことを意味します。これにより、XSS攻撃を軽減できます。
• サーバーサイドのデータ取得：getServerSidePropsでデータを取得することで、アクセストークンがクライアントのブラウザに露出することがなくなります。

結論

Oura Ring APIで認証し、ユーザーデータを取得し、ウェルネスダッシュボードで可視化するNext.jsアプリケーションを正常に構築しました。このプロジェクトは、より複雑でパーソナライズされた健康・ウェルネスアプリケーションを構築するための優れた基盤となります。

リソース

• Oura API V2 Documentation
• Next.js API Routes Documentation
• Recharts Documentation

クイックリファレンス

よくある質問

Q: これが自分に該当するのかどうすればいいですか？ A: 個人的な病歴と家族歴について医療提供者と相談し、個人のリスク因子を評価し、適切な次のステップを決定してください。

Q: 医師に何を聞けばいいですか？ A: 良い質問には次のようなものがあります：「結果は何を意味するのか？」「私のオプションは何ですか？」「どのような生活習慣の変化が有帮助ですか？」「いつフォローアップすればいいですか？」

Q: 生活習 anotherの変更で помочьはありますか？ A: ほとんどの健康状態は、基本的な対策から benefit します：バランスの取れた栄養、定期的な運動（週150分以上）、質の良い睡眠（7〜9時間）、ストレス管理、そしてタバコを避けること。

医療に関する免責事項

この記事は教育目的のみを目的としており、医学的アドバイスではありません。健康、治療、ケアに関する決定をする前に、必ず資格のある医療提供者と相談してください。個人の状況は異なり、ある人にとって適切なことが別の人に適切でない場合があります。

緊急の医療状態が発生した場合は、直ちに119番（または現地の緊急電話番号）に連絡してください。