HarmonyOS運動開発：どのように運動記録を選択してアップロードするか

## 鴻蒙核心技术##運動開発##Core File Kit（ファイル基本サービス）

前言

運動系アプリでは、他のアプリの運動記録を素早くインポートして分析できる機能は、非常に魅力的な機能です。これはユーザーに便利を提供するだけでなく、アプリの実用性和魅力を高めることができます。この記事では、鴻蒙（HarmonyOS）開発の実践経験を基に、運動記録の選択とアップロード機能を実現する方法を詳しく解析し、運動データの管理をより効率的に行う方法について説明します。

一、運動記録のアップロード機能が必要な理由

運動記録のアップロード機能は、ユーザーが他のアプリ（例えばKeep）の運動データを私たちのアプリにインポートして分析や管理できるようにするものです。これにより、私たちのアプリのデータを豊富にし、ユーザーに包括的な運動分析や提案を提供することができます。さらに、アップロード機能を通じて、ユーザーは簡単に運動記録をバックアップや同期することができ、いつでもどこでも自分の運動履歴を確認することができます。

二、核心機能の実現

1. ファイルの選択

ファイル選択機能を実現するために、鴻蒙のDocumentViewPickerAPIを使用しました。以下がファイル選択の核心コードです。

async selectFile() {
  if (this.isLoading) return;

  this.isLoading = true;
  try {
    let context = getContext(this) as common.Context; // getContext(this)の結果がUIAbilityContextであることを確認してください
    let documentPicker = new picker.DocumentViewPicker(context);
    let documentSelectOptions = new picker.DocumentSelectOptions();
    // 選択できるドキュメントの最大数（オプション）
    documentSelectOptions.maxSelectNumber = 1;
    // 選択できるファイルの拡張子の種類['拡張子の種類の説明|拡張子の種類']（オプション） 複数の拡張子名がある場合は、各拡張子名の間に英語のカンマで区切ります（オプション）、拡張子の種類名は100文字以内で、すべてのファイルを選択する場合は'すべてのファイル(*.*)|.*';
    documentSelectOptions.fileSuffixFilters = ['画像(.png, .jpg)|.png,.jpg', 'ドキュメント|.txt', 'ビデオ|.mp4', '.pdf','運動データファイル|.gpx,.tcx'];

    const result = await documentPicker.select(documentSelectOptions);

    if (result && result.length > 0) {
      const fileUri = result[0];
      this.selectedFilePath = fileUri;

      // ファイル名を取得する
      this.fileName = fileUri.split('/').pop() || '不明なファイル';

      // ファイルサイズを取得する
      try {
        let file = fs.openSync(fileUri, fs.OpenMode.READ_ONLY);
        const stat = await fs.stat(file.fd);
        this.fileSize = this.formatFileSize(stat.size);
      } catch (error) {
        console.error('ファイルサイズの取得に失敗しました:', error);
        this.fileSize = 'サイズ不明';
      }

      promptAction.showToast({ message: 'ファイルの選択に成功しました', duration: 2000 });
    }
  } catch (err) {
    console.error('ファイルの選択に失敗しました。原因: ' + (err as BusinessError).message);
    promptAction.showToast({ message: 'ファイルの選択に失敗しました', duration: 2000 });
  } finally {
    this.isLoading = false;
  }
}

核心点解析

• DocumentViewPicker：ファイルを選択するためのコンポーネントで、複数のファイルタイプをサポートします。

• fileSuffixFilters：選択できるファイルタイプを設定します。例えば画像、ドキュメント、ビデオなど。

• fs.openSyncとfs.stat：ファイルのサイズやステータス情報を取得するために使用します。

• promptAction.showToast：ユーザーにファイル選択の結果を通知するためのトーストメッセージを表示します。

2. ファイルのアップロード

ファイルのアップロード機能は、ユーザーが選択したファイルをサーバーにアップロードして、さらに処理を行うためのものです。ここでは省略します。

三、ユーザーインターフェースの設計

ユーザーが簡単にファイルを選択してアップロードできるように、簡潔で直感的なユーザーインターフェースを設計する必要があります。以下がユーザーインターフェースの核心コードです。

@Builder
pageContentBuilder() {
  Column() {
    Text('運動記録のファイルを選択してください:')
      .fontSize(20)
      .margin({ top: 20, bottom: 10 })
      .width('100%')
      .textAlign(TextAlign.Center);

    // ファイル選択エリア
    Column() {
      if (!this.selectedFilePath) {
        Image($r('app.media.szxd_sport_home_setting_icon')) // あなたのファイルアイコンリソースに置き換えてください
          .width(80)
          .height(80)
          .margin({ bottom: 10 });
      }

      Text(this.selectedFilePath ? this.fileName : 'ファイルを選択してください')
        .fontSize(16)
        .width('90%')
        .height(40)
        .backgroundColor('#f0f0f0')
        .borderRadius(8)
        .padding(10)
        .textAlign(TextAlign.Center)
        .margin({ bottom: 10 });
    }
    .width('90%')
    .height(150)
    .border({ width: 1, color: '#ddd', style: BorderStyle.Dashed })
    .borderRadius(8)
    .justifyContent(FlexAlign.Center)
    .onClick(() => this.selectFile())
    .margin({ bottom: 20 });

    // ファイル情報の表示
    this.fileInfoBuilder();

    // ファイルを選択するボタン
    Button(this.selectedFilePath ? 'ファイルを再選択する' : 'ファイルを選択する')
      .onClick(() => this.selectFile())
      .width('60%')
      .height(40)
      .fontSize(16)
      .backgroundColor('#007dff')
      .borderRadius(8)
      .opacity(this.isLoading ? 0.5 : 1)
      .enabled(!this.isLoading);

    // アップロードボタン（アップロード機能がある場合）
    if (this.selectedFilePath) {
      Button('ファイルをアップロードする')
        .onClick(() => this.uploadFile())
        .width('60%')
        .height(40)
        .fontSize(16)
        .backgroundColor('#07c160')
        .borderRadius(8)
        .margin({ top: 20 })
        .opacity(this.isLoading ? 0.5 : 1)
        .enabled(!this.isLoading);
    }
  }
  .width('100%')
  .height('100%')
  .justifyContent(FlexAlign.Start)
  .alignItems(HorizontalAlign.Center);
}

核心点解析

• ファイル選択エリア：ImageとTextコンポーネントを使用してファイル選択の状態を表示し、ユーザーがクリックするとファイル選択のロジックがトリガーされます。

• ファイル情報の表示：Textコンポーネントを使用してファイルの名前とサイズ情報を表示します。

• ファイルを選択するボタン：ユーザーがファイルを再度選択できるようにします。

• アップロードボタン：ユーザーが選択したファイルをアップロードできるようにします。

四、まとめ

鴻蒙のDocumentViewPickerと関連するファイル操作APIを使用することで、運動記録の選択機能を簡単に実現することができます。