「画像掲示板の泉」では、jpeg、png、gif画像の埋め込み以外にも、YouTube、ニコニコ動画の埋め込みができるようにしていましたが、新たにTikTok動画の埋め込みもできるようにしてみました。

TikTokの動画シェア機能にある「リンクをコピー」でコピーしたURLを画像掲示板の投稿時に設定すると、掲示板の書き込みにTikTok動画を埋め込むようにしてあります。

他にも、書き込みのなりすまし防止として「2ちゃんねる」などの匿名掲示板で使われている「トリップ」にも対応するなどしていますので、TikTok動画の埋め込みプログラム作りを中心に、最近のPHP画像掲示板のプログラム改修についてご紹介したいと思います。

画像掲示板の泉

画像掲示板にTikTokの動画埋め込み

月間アクティブユーザーが10億人を突破したというTikTokアプリをスマホに入れてる人も多いのではないでしょうか？

その人気に少しでもあやかろうと思いまして、画像掲示板で投稿する際にTikTok動画も埋め込みできるようにしてみました。

像掲示板の泉に投稿する時にはリンクコピーで色々埋め込みできます
画像掲示板の泉に投稿する時にはリンクコピーで色々埋め込みできます

提供される動画埋め込みコードを利用

YouTubeの動画埋め込みについて記事を書いた時にも説明をしましたが、YouTubeやTikTokといった動画投稿サイトでは、サイトやブログに動画を埋め込みするための専用コードが提供されています。

PHPプログラムなどを使って動画埋め込み機能を作る場合にも、その動画サイト側で用意されている埋め込みコードを利用すれば簡単に実現できるので、今回もTikTokの埋め込みコードの中身から確認していきます。

古いYouTubeの動画埋め込みコードにSearch Consoleで警告を受けた
YouTube埋め込みについてはこちらの記事をどうぞ

TikTokの動画埋め込み用コード

TikTokのサイトに行くとオススメ動画が次々再生されますが、再生中の動画にある矢印部分を押すと、動画シェアのためのツールがポップアップで表示されます。

TikTokで提供されている動画シェア用のツール
TikTokで提供されている動画シェア用のツール

その中から「＜＞埋め込む」と書かれたボタンを押すと、このような埋め込みコードが表示されます。このコードをブログやお持ちのサイトに貼り付けすると、iFrameにTikTokの動画プレーヤーを生成してもらえるといった作りになっています。

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@sui_manchikan/video/6939103414034976001" data-video-id="6939103414034976001" style="max-width: 605px;min-width: 325px;" >
<section>
<a target="_blank" title="@sui_manchikan" href="https://www.tiktok.com/@sui_manchikan">@sui_manchikan</a>
<a title="猫" target="_blank" href="https://www.tiktok.com/tag/%E7%8C%AB">#猫</a>
<a title="子猫" target="_blank" href="https://www.tiktok.com/tag/%E5%AD%90%E7%8C%AB">#子猫</a>
<a title="マンチカン" target="_blank" href="https://www.tiktok.com/tag/%E3%83%9E%E3%83%B3%E3%83%81%E3%82%AB%E3%83%B3">#マンチカン</a>
<a title="猫のいる暮らし" target="_blank" href="https://www.tiktok.com/tag/%E7%8C%AB%E3%81%AE%E3%81%84%E3%82%8B%E6%9A%AE%E3%82%89%E3%81%97">#猫のいる暮らし</a>
<a target="_blank" title="♬ オリジナル楽曲 - 戸崎 彪真 ｻﾌﾞ - 領域展開ヘビの人???" href="https://www.tiktok.com/music/オリジナル楽曲-戸崎-彪真-ｻﾌﾞ-6902975008000346881">♬ オリジナル楽曲 - 戸崎 彪真 ｻﾌﾞ - 領域展開ヘビの人???</a>
</section>
</blockquote>
<script async src="https://www.tiktok.com/embed.js"></script>

YouTubeの埋め込み用コードと違い、TikTokの埋め込み用コードにはタグ付けされたハッシュタグのTikTok内部リンクも付いているので、けっこうなボリューム感があります。

<section>で囲まれているハッシュタグ用のTikTok内部リンクは一旦除外して、必要そうなコードだけ集めてみるとこんな感じです。

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@sui_manchikan/video/6939103414034976001" data-video-id="6939103414034976001" style="max-width: 605px;min-width: 325px;" >
<section>
</section>
</blockquote>
<script async src="https://www.tiktok.com/embed.js"></script>

動画生成に必要となるTikTok動画IDとは

動画生成に必要な動画IDが存在する箇所は、一行目の＜blockquote＞にある「cite」パラメータと「data-video-id」パラメータのようです。

<!--　こちらはcite　-->
h ttps://www.tiktok.com/@sui_manchikan/video/6939103414034976001

<!--　こちらはdata-video-id　-->
6939103414034976001

ただ、citeパラメータの一番最後は「data-video-id」パラメータと同じ値がセットされているので、このciteに設定されたURLだけ掲示板投稿時に保存しておけば、動画埋め込みコードと同じものを作ることができそうです。

「リンクをコピー」で提供されているURL

画像掲示板のPHPプログラム側で、TikTokの動画埋め込みコードからciteパラメータだけ抜き出すのは簡単ですが、この長々しいTikTokの動画埋め込みコードをフォームからPOSTするのは微妙ですし、そもそもスマホでこの長いコードをコピペできるかもわかりません。そこで、動画シェアツールに「リンクをコピー」というものが別に用意されているので、こちらを確認します。

すると、先ほどの埋め込みコードの「cite」パラメータにセットされていたURLと同じものがコピーされました。しかも、動画埋め込みコードのようにポップアップせず、即リンクがコピーされるので更に使い勝手が良い感じです。

ttps://www.tiktok.com/@sui_manchikan/video/6939103414034976001

TikTokの「リンクをコピー」のURLを使えば、そのURLを使って動画埋め込みコードを生成可能と分かったので、画像掲示板ではこれをフォームにセットして投稿してもらえば良さそうです。

TikTokリンクをコピーの値から必要なものを取得

画像掲示板側の投稿書き込みデータと一緒に、TikTok「リンクをコピー」でコピーしたURLをフォームから投げてもらうよう、フロントのHTMLとPHPを作りこんでいきます。

POSTするデータは極力少なくしたいところですので、先頭にある「https://www.tiktok.com」のURLスキームとホストはどうせ固定でしょうから、Path部分だけを切り取って保存しておくことにします。

//フォームにセットされたTikTokURL
$URL = $POSTDATA["movieaddr"];

//URL要素を連想配列に
$URL_PARSE = parse_url($URL);

//Path要素を抜き出し
$MoviePath = $URL_PARSE['path'];

TikTokの「リンクをコピー」には短縮URLがある

これで無事完成と思っていましたが、TikTokの「リンクをコピー」で取得できる動画URLには短縮URLバージョンが存在していました。どうやら、アプリ経由でリンクをコピーする場合などには、短縮URLの方が端末にコピーされるようです。

//正規URL
ttps://www.tiktok.com/@sui_manchikan/video/6939103414034976001

//↑の動画の短縮URL
ttps://vt.tiktok.com/ZSd1LjAxb/

短縮URLの解析をする方法

TikTok動画のキーパラメータを取得するためには、短縮URLを正規URLに展開する必要があります。そこで、PHPをお使いの方であればおなじみの「cURL」を使って短縮URLを展開して元のURLを解析していきます。

cURLはHTTPリクエストやレスポンスを簡単に扱うことができるPHPのライブラリです。ディレクトリ型検索エンジンの登録サイトのリンク切れチェッカーを作った際にも利用していましたので、気になる方はそちらの記事も確認ください。

PHPでリンク切れチェッカーを作ってみた

cURLで短縮URLを展開する

cURLを使って短縮URLを再帰的にたどり、HTTPのレスポンスを文字列で取得します。

//短縮URL
$URL = 'ttps://vt.tiktok.com/ZSd1LjAxb/';

//cURLを初期化
$ch = curl_init();

//cURLの転送用オプションにURLや他のパラメータをセット
curl_setopt($ch, CURLOPT_URL, $URL);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);

//HTTPレスポンス取得
$running = curl_exec($ch);

HTTPのレスポンスを見ると転送先の正規URLが入っています。

HTTP/1.1 301 Moved Permanently
Server: nginx Content-Type: text/html;
charset=utf-8
Content-Length: 586
Location: https://www.tiktok.com/@sui_manchikan/video/6939103414034976001?_d=sec.....

URLが短縮URLかどうかの判別を付けてあげて、短縮URLの場合にはcURLで正規URLを取得するといった流れにしてあげれば、正規URL、短縮URLのどちらにも対応させることができます。

パラメータをTikTok動画埋め込みコードとして出力

掲示板側で投稿データを出力するとき、保存しておいたPathデータを埋め込みコードの形にセットして出力してあげれば、掲示板のTikTok動画埋め込み対応が完了です。

//投稿データと一緒に保存しておいたPath
$URL = /@sui_manchikan/video/6939103414034976001

//parse_url()でURLを解析
$URL_Path = parse_url($URL);

//Pathからdata-video-idを抽出
$Path_array = explode("/",  $URL_Path);
$Path_Last = end($Path_array);

//掲示板出力データにセット
$BBS = '<div class="iframe-wrap-tiktok"><blockquote class="tiktok-embed" cite="https://www.tiktok.com'.$URL_Path.'" data-video-id="'.$Path_Last.'" style="max-width: 605px;min-width: 325px;" > <section>  </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script></div>';

以上でTikTok動画の埋め込みにも対応させることができました。

PHPで2chのトリップを生成する

TikTok埋め込み以外に「トリップ」機能も追加しておきました。「2ちゃんねる」、「4chan」などの匿名掲示板では、書き込みした投稿者が自分の投稿だということを証明するための機能として「トリップ」という機能があります。

投稿するときの名前部分に「#自分専用のパスワード」を入力しておくと、その文字列のハッシュ値を生成して表示することで、成りすましでないことを証明するといった作りです。

2ちゃんねるで実装されたPerlのスクリプトはWikipediaにも置かれており、「1人用（ひとりよう）キャップ」を略されて「トリップ」と呼ぶようになったとの歴史まで説明してくれています。2ちゃんで採用されているトリップ生成用のPerlスクリプトは下記とのことです。

#名前欄に入力されたトリップキーワード（半角#と文字列）
$tripkey = "#istrip";

#トリップキーから#を取り除く
$tripkey = substr $tripkey, 1;

#crypt()関数用のソルトを2～3文字目で生成
$salt = substr $tripkey . "H.", 1, 2;
$salt =~ s/[^\.-z]/\./g;
$salt =~ tr/:;<=>?@[\\]^_`/A-Ga-f/;

#crypt()関数でハッシュを生成
$trip = crypt $tripkey, $salt;
$trip = substr $trip, -10;

#トリップと分かるように◆を付ける
$trip = "◆" . $trip;
print $trip, "\n";

このperlスクリプトをPHP化したサンプルコードを公開して下さった方がいらっしゃいましたので、pc.casey.jpさんのコードをほぼそのまま使わせてもらいました。ありがとうございます。

おわりに

画像掲示板PHPプログラムを、画像、YouTube、ニコニコ動画、TikTokの埋め込みにまで対応させることができました。アクセス数は相変わらず過疎っていますが、TikTok人気にあやかって少しぐらい増えてくれたらと思います。

TikTokでは気になる動画が次々表示されますが、おすすめ動画を選ぶレコメンドエンジンの説明を読むと凄い感じです。「異なるユーザーが同じ人気動画に出会ったとしても、各ユーザーのおすすめフィードはそれぞれ異なっている」？？？

TikTokを開いて「おすすめ」フィードにアクセスすると、ユーザーの興味に合わせて厳選された動画が表示されるので、好きなコンテンツやクリエイターを簡単に見つけることができます。このおすすめの仕組みは、各ユーザーが興味を持ちそうなコンテンツを届けるレコメンドシステムによってできています。TikTokの大きな特徴の一つは、一つとして同じおすすめフィードがないことです。つまり、異なるユーザーが同じ人気動画に出会ったとしても、各ユーザーのおすすめフィードはそれぞれ異なっており、特定の個人に合わせてカスタマイズされています。

TikTokが「おすすめ」に動画をレコメンドする仕組み

しっかりこの機械学習AIも販売してるようで、さすがですね。