概要

TikTok といえば、短編動画を扱っているソーシャルネットーワーキングサービス（SNS）ということを皆さんはすでにご存じかと思います。

TikTok は今や全世界で流行しておりおもしろ動画からためになる動画まで様々な動画が世界中から投稿され、インターネットを通じていつでもどこでも見ることができます。

動画視聴があたりまえになった昨今に非常にマッチしたアプリケーションですね。

そんな TikTok は基本モバイルアプリ（Android・iPhone）でしか利用できないのですが、今回はそれを Web アプリとして再現している OSS を見つけましたのでご紹介したいと思います。

今回ご紹介する OSS は、Vue+Vite で TikTok 風アプリを再現している「Douyin-Vue」になります。

ちなみにですが、「Douyin」というのは TikTok の中国語「抖音」の拼音表記「Dǒuyīn」に由来しており、TikTok の「d」は「Dǒuyīn」の頭文字「D」からきているということです。

それでは早速詳細についてみていきましょう！

特徴

「Douyin-Vue」の大きな特徴としては、Vue＋Vite で構築された Web アプリということでしょうか。

アプリ版の TikTok とい同じような挙動を Web アプリの「Douyin-Vue」でも忠実に再現されており、完成度が非常に高く見えました。

利用方法としては、ローカル環境にソースコードをクローンして自環境で動かすか、デモページにアクセスすることで簡単な挙動を確認することができます。

ローカル環境で動作確認する場合は以下のコマンドを実行することで動作可能です。

git clone https://github.com/zyronon/douyin.git
cd douyin
npm install
npm run dev

その後、サーバーが起動するので http://127.0.0.1:3000/ にアクセスすることで利用可能です。

もしくは、以下のデモページにアクセスすることで利用可能です。

早速私のほうでもこちらの「Douyin-Vue」を試してみました！

※ ブラウザで動きを確認する際は、ウィンドウをモバイルサイズに変える必要があるため、場合によっては「F12」を選択してからモバイル版のウィンドウサイズに変える必要があります（詳細は「Douyin-Vue」の注意文に従うことで対応可能です）。

実際の TikTok アプリと同じように動画を上スクロールすることで次の動画が表示されたり、コメント機能があったりされ、Web アプリでも忠実にアプリの挙動が再現されていました！

こちらが Vue で構築されているということなので、モバイルアプリ風なシステムを構築したいと考えているWeb アプリ屋さんの方々にとって非常に勉強になる OSS ではないかと思いました。

自分もこちらの OSS を見ながら、Web アプリの構築方法だったりを学んでいきたいなと思いました！

今回は、Vue+Vite で TikTok 風アプリを再現している「Douyin-Vue」という OSS についてご紹介いたしました。

モバイルアプリで人気のある TikTok を Web アプリで忠実に再現されている点が非常に素晴らしいと思いました。

Web アプリでモバイルアプリ風なものを作成したいという方にとっても非常に勉強になる OSS かと思いますので、気になった方はこちらを利用してみて、リポジトリを参考にされてみてはいかがでしょうか。