📜 目次
1. はじめに
2. TikTokの問題点
3. 解決策の探求
4. より良いTikTokインターフェースの構築
5. 自動スクロールの実装
6. Node.jsを使用した動画のアップロード
7. クラウド上でのアプリのホスティング
8. 結論
1. はじめに
TikTokは、毎日何百万人ものユーザーが動画をスクロールしている世界中で大流行しています。しかし、多くのユーザーが苦情を言っているアプリの主要な問題があります。それは、自動スクロール機能がないことです。この記事では、TikTokの問題点と、ある開発者が自動スクロール機能を備えたより良いインターフェースを作成するために手を打った方法について探求します。
2. TikTokの問題点
TikTokの問題は単純です。ユーザーは動画を自動スクロールできません。代わりに、動画から別の動画に移動するには手動でスワイプする必要があります。これは、ユーザーがマルチタスクを行おうとしたり、手が利用できない場合などに、イライラすることがあります。多くのユーザーからの苦情にもかかわらず、TikTokアプリ内に自動スクロールを有効にする設定はありません。
3. 解決策の探求
問題を解決するために、この開発者は、TikTokアプリ内に自動スクロールを有効にする設定を探して調べ始めました。しかし、すぐにそのような設定が存在しないことがわかりました。その後、Googleで検索して、多くの他のユーザーもこの機能を探していることがわかりました。
開発者は、TikTokアルゴリズムとAPIを調査し、アプリの上にレイヤーを作成してスクロールしながら動画を取り込むことができるかどうかを調べました。しかし、多くのAPIがロックされており、彼らが望んでいた方法で動画のURLにアクセスすることが困難であることがわかりました。
4. より良いTikTokインターフェースの構築
多くの調査の後、開発者は、フロントエンドとバックエンドを含めて、TikTokインターフェース全体をゼロから再構築することに決めました。彼らは、従来のデザインよりも動画やコメントにより多くのスペースがあるデザインを作成することを望んでいました。また、ユーザーが動画コンテンツを横向きモードで見るように促すために、動画の縦向きモードのデザインを横向きインターフェースに移動することも検討しました。
開発者は、Reactを使用してインターフェースを構築し、Create React Appを使用して全体を起動しました。また、Style Componentsを使用して、すべてのコンポーネントにCSSを簡単に追加して、後で再利用できるようにしました。その結果、デスクトップ、タブレット、すべてのデバイスで動作するレスポンシブデザインが実現しました。
5. 自動スクロールの実装
開発者が最も苦労したのは、自動スクロール機能の実装でした。彼らは、他の人が問題を解決しているかどうかを確認するためにStack Overflowに参加するなど、さまざまな方法を試しました。最終的に、CSSプロパティのスクロールスナップを発見し、異なるセクションに自動スクロールすることができるようになりました。その後、JavaScriptを使用して、動画の最後にアクションを処理して、次の動画にスクロールして自動的に再生するようにしました。
6. Node.jsを使用した動画のアップロード
開発者は、次に動画のアップロードに注力しました。彼らは、バックエンドでNode.jsを使用して、ユーザーがMP4ファイルをアップロードできるAPIを作成しました。また、すべての動画のURLを取得して、Webアプリで再生する準備ができるようにするためにfetchリクエストを作成しました。
7. クラウド上でのアプリのホスティング
アプリをオンラインで利用できるようにするには、開発者は良いホスティングプロバイダーを見つける必要がありました。彼らは、コスト効果が高く、応答時間が速いクラウドプロバイダーであるgcoreに決定しました。彼らは新しいプロジェクトを作成し、Ubuntuと仮想コアCPUに2ギガバイトのRAMを備えたクラウドインスタンスを展開しました。その後、Node.jsとnpmをインストールし、ファイアウォールを有効にしてWebトラフィックを許可しました。
8. 結論
結論として、TikTokの自動スクロール機能の欠如は、多くのユーザーにとって重大な問題でした。しかし、ある開発者が自動スクロール機能を備えたより良いインターフェースを作成するために手を打ちました。彼らは、React、CSS、JavaScriptを使用してインターフェースを構築し、Node.jsを使用して動画のアップロード用のAPIを作成しました。その後、アプリをクラウド上でホストしてオンラインで利用できるようにしました。このアプリを使用することで、ユーザーは自動スクロール機能とより良いTikTok体験を楽しむことができます。
🎉 ハイライト
- TikTokには自動スクロール機能がなく、ユーザーにとってイライラすることがあります。
- ある開発者が自動スクロール機能を備えたより良いTikTokインターフェースを作成しました。
- 彼らは、React、CSS、JavaScriptを使用してインターフェースを構築し、Node.jsを使用して動画のアップロード用のAPIを作成しました。
- アプリはクラウド上でホストされ、オンラインで利用できるようになりました。
- ユーザーは自動スクロール機能とより良いTikTok体験を楽しむことができます。
❓ FAQ
Q: アプリを自分で試すことはできますか？
A: はい、説明欄でアプリをチェックし、自分のクラウド環境でテストするためにプロジェクトをクローンすることができます。
Q: 開発者はどのようにして自動スクロール機能を実装しましたか？
A: 開発者は、CSSプロパティのスクロールスナップを使用し、動画の最後にアクションを処理して、次の動画にスクロールして自動的に再生するようにJavaScriptを使用しました。
Q: 開発者はどのようなホスティングプロバイダーを使用しましたか？
A: 開発者は、コスト効果が高く、応答時間が速いクラウドプロバイダーであるgcoreを使用しました。
🔗 リソース
- gcore: https://gcorelabs.com/
