「Zenith」 – React、Tolgee、Tailwind CSS を使用した穏やかな瞑想アプリ

この投稿では、Zenith を共有できることを嬉しく思います。Zenith は、厳選された心地よいサウンド、使いやすいインターフェイス、サポートにより、ユーザーが心を落ち着かせて集中できるように設計された瞑想アプリです。多言語対応。アプリのコア機能、技術スタック、設定方法、そして React への Tolgee の統合について説明します。

デモ

特徴

• 心地よいサウンド: ユーザーは、瞑想セッションを強化するために調整されたさまざまな心を落ち着かせるサウンドから選択できます。
• ローカリゼーション: Tolgee の統合により、世界中のユーザーがアプリを母国語で体験できるようになります。
• レスポンシブ デザイン: Tailwind CSS により、デバイス間での流動的でモバイル フレンドリーなエクスペリエンスが可能になります。
• ユーザーフレンドリーなインターフェイス: シンプルなレイアウトにより、アクセシビリティとナビゲーションのしやすさが優先されます。

技術スタック

• React: アプリのフロントエンドは React を使用しており、スムーズでインタラクティブな UI の作成に最適です。
• Tolgee: Tolgee は多言語サポートを簡素化し、世界中の視聴者にローカリゼーションを簡単に提供できるようにします。
• Tailwind CSS: Tailwind は、ユーティリティ第一のアプローチにより、クリーンで応答性の高いデザインを迅速に作成するのに役立ちます。

ゼニスを使い始める

試してみることに興味がありますか?マシン上でアプリを実行する方法は次のとおりです。

リポジトリのクローンを作成します。

git clone https://github.com/tolgee/tolgee-platform.git
cd demos/meditation-app

依存関係をインストールします。

npm install

アプリを実行します。

npm run dev

次に、ブラウザで http://localhost:5173 にアクセスしてアプリを探索します。

ゼニスの使用

• 言語切り替えを使用して、希望の言語を選択します。
• 利用可能な心地よいサウンドを参照し、クリックして再生します。
• タイマーを使用してセッションの継続時間を設定します。
• 瞑想セッションをお楽しみください。

React への Tolgee の統合

ドキュメント

トールジーとは何ですか？

Tolgee は、React を含むさまざまなフレームワークとスムーズに統合するオープンソースのローカリゼーションおよび翻訳プラットフォームです。開発者が多言語アプリケーションを迅速に作成し、翻訳を簡単に管理できるアプリ内翻訳ツールを提供します。

Tolgee を React アプリケーションに統合する方法

Tolgee は、アプリのインターフェース内で直接翻訳を管理するための簡単なセットアップと強力なツールを提供することで、ローカリゼーションを簡素化します。ここでは、Tolgee を React アプリケーションと統合し、それを使用して多言語エクスペリエンスを作成するためのステップバイステップのガイドを示します。

ステップ 1: Tolgee をインストールする

まず、Tolgee ライブラリを React プロジェクトに追加します。 Tolgee は NPM パッケージと Yarn パッケージの両方を提供しているため、最適な方を選択してください。

git clone https://github.com/tolgee/tolgee-platform.git
cd demos/meditation-app

ステップ 2: アプリケーションで Tolgee を設定する

次に、アプリで Tolgee を初期化します。まず、Tolgee ライブラリから必要なコンポーネントをインポートし、次に Tolgee の TolgeeProvider でアプリをラップします。このプロバイダーは、アプリ全体で Tolgee の翻訳およびローカリゼーション機能を有効にします。

メイン アプリ ファイル (App.js や Index.js など) で、次のように TolgeeProvider を設定します。

npm install

ステップ 3: 翻訳を追加する

Tolgee は翻訳ごとに一意のキーを使用し、アプリ全体で参照できます。翻訳は、Tolgee プラットフォームを通じて、またはコード内で直接管理できます。

ローカライズ用のテキストを追加する例

T コンポーネントまたは Tolgee の useTranslate フックを使用して、翻訳が必要なテキストを定義します。これらをコンポーネントで使用する方法は次のとおりです:

の使用コンポーネント

npm run dev

Tolgee プラットフォームでは、welcome_message キーを英語の「Welcome to Zenith」などの翻訳と、さまざまな言語での同等のフレーズにマッピングします。

useTranslate フックの使用

より複雑なシナリオの場合は、useTranslate フックが役立ちます。

npm install @tolgee/react
# or
yarn add @tolgee/react

ステップ 4: Tolgee DevTools を使用したインコンテキスト編集

Tolgee のコンテキスト内編集は大きな利点です。アプリ内で翻訳を直接編集できます。 DevTools を有効にすると、テキストをクリックしてリアルタイムで翻訳を編集でき、翻訳ワークフローが合理化されます。

DevTools にアクセスするには、アプリを でラップしていることを確認してください。 (上に示したように) 開発モードになっています。これにより、Tolgee プラットフォームを行ったり来たりすることなく、翻訳を調整または追加できます。

まとめ

Zenith は、心地よいサウンド、ユーザーフレンドリーなインターフェイス、多言語サポートを組み合わせて、本当にアクセスしやすい瞑想体験を提供します。フロントエンドには React、レスポンシブ デザインには Tailwind CSS、シームレスなローカリゼーションには Tolgee などのツールを活用することで、Zenith は言語やデバイスを超えてユーザーが安心できるよう設計されています。

あなたがローカリゼーションについて詳しく知りたいと考えている開発者であっても、単に瞑想アプリに興味がある人であっても、この投稿が洞察力に富んでいることを願っています。気軽にデモを試して、Zenith が自分自身の落ち着きを見つけるのにどのように役立つかを確認してください。

コーディングと瞑想を楽しんでください!

以上が「Zenith」 – React、Tolgee、Tailwind CSS を使用した穏やかな瞑想アプリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。