LangJournalアプリに動画投稿と再生機能を実装しました！

こんにちは！LangJournalアプリの開発者です。今日は、私たちのアプリに新しく追加された動画投稿と再生機能について、その開発プロセスをより共有したいと思います。

開発の背景
実装の概要
ソースコードの解説
- 動画の選択とアップロード
- サムネイルの生成とアップロード
動画の再生
実装のポイント
まとめ

開発の背景

LangJournalは日記を通じて、語学を学習できるアプリです。今までは画像しかできなかったのですが、動画投稿機能は絶対に必要な機能だと思い追加することにしました。

実装の概要

React NativeとExpoを使用して、この機能を実装しました。主なステップは以下の通りです：

expo-image-pickerの利用: ユーザーがデバイスから動画を選択できるようにします。このライブラリは、自分のスマートフォンからギャラリーにアクセスし、メディアを選択する簡単な方法を提供します。
expo-avの利用: 選択された動画の再生機能を実装します。expo-avは動画とオーディオコンテンツの再生に最適化されています。また早送り、一時停止などの機能を提供されているので実装が楽です。
expo-video-thumbnailsの利用: 動画のサムネイルを生成します。サムネイルを保存しておけば一覧画面などに使えるので便利です。毎回動画を取得する必要がないからです。
Firebaseの利用: サムネイルと動画自体をFirebaseに保存します。Expoとの相性がよく、ライブラリも豊富のため、採用しました。

ソースコードの解説

動画の選択とアップロード

ユーザーが動画を選択し、Firebaseにアップロードするプロセスです。

javascript

import * as ImagePicker from 'expo-image-picker';
import { storage } from 'firebase';

const pickVideo = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Videos,
  });

  if (!result.cancelled) {
    const videoUri = result.uri;
    const response = await fetch(videoUri);
    const blob = await response.blob();

    const videoRef = storage().ref().child(`videos/${new Date().getTime()}`);
    await videoRef.put(blob);

    generateThumbnail(videoUri, videoRef);
  }
};

サムネイルの生成とアップロード

選択された動画からサムネイルを生成し、Firebaseにアップロードします。このプロセスにより、アプリの一覧表示やプレビューがより高速かつ効率的になります。

javascript

import { createThumbnailAsync } from 'expo-video-thumbnails';

const generateThumbnail = async (videoUri, videoRef) => {
  try {
    const { uri: thumbnailUri } = await createThumbnailAsync(videoUri);
    const response = await fetch(thumbnailUri);
    const blob = await response.blob();

    const thumbnailRef = storage().ref().child(`thumbnails/${videoRef.name}`);
    await thumbnailRef.put(blob);
  } catch (e) {
    console.warn(e);
  }
};

動画の再生

アプリ内で動画を再生するために、expo-avを使用します。

javascript

import { Video } from 'expo-av';

const VideoPlayer = ({ videoUri }) => (
  <Video
    source={{ uri: videoUri }}
    rate={1.0}
    volume={1.0}
    isMuted={false}
    resizeMode="cover"
    shouldPlay={false}
    useNativeControls
    style={{ width: 300, height: 300 }}
  />
);

実装のポイント

ユーザビリティ: ユーザーが簡単に動画を選択し、アップロードできるようにしました。
パフォーマンス: 動画とサムネイルのアップロードは効率的に行われます。大きなファイルサイズの動画でも、Firebaseの高速なアップロード機能により、ユーザーは待たされることがありません。
データ管理: Firebaseを使用して動画とサムネイルを保存し、データの管理を簡素化しました。これにより、ユーザーがアップロードした動画とサムネイルは安全に保存され、アプリ内で簡単にアクセスできます。