先日、業務に必要な作業工程をまとめた動画が、Xのポストを通じて共有されるということがありました。
普段ならツールを使って動画データをダウンロードして作業を進めるところですが、このときは出先でインストール制限のあるPCを使用していたため、ダウンロードができません。「スマホを利用すれば…」とも考えましたが、アプリは怪しいものが多かったためインストールに至らず、ブラウザの拡張機能も基本的には非対応。
そこでインストール不要のWebツールを探しましたが、広告が多すぎたり、複数の動画に対応していなかったり、信頼性に疑問のあるものばかりで、条件に合うツールを見つけるのに苦労しました。今後、同様の事態に備えるため、ツールを作ってみようと思います。
本ダウンローダーは、違法ダウンロードを推奨するものではなく、その目的での使用は禁止しています。権利者本人が、その権利をもって、X上に送信したものを私的使用のための複製の範囲内で利用するためのものです。
（私的使用のための複製）
第三十条著作権の目的となつている著作物（以下この款において単に「著作物」という。）は、個人的に又は家庭内その他これに準ずる限られた範囲内において使用すること（以下「私的使用」という。）を目的とするときは、次に掲げる場合を除き、その使用する者が複製することができる。
違法にアップロードされた有償著作物を、違法なものであると認識しながら、ダウンロードする行為は、違法ダウンロードとして罰せられます。その他、触法行為につきましても禁止しておりますので、利用前に「利用上の注意」をご一読いただきますようお願い申し上げます。
違法ダウンロードと有償著作権物についてはこちらのリンクを参照してください。
作る前に相談してみる
普段、プログラムを組むことのない人間には、どこから手をつけたらいいのか分からないので、まずはAIに相談してみます。今回、協力してもらったのはChatGPTです。
業務でJavaScriptの簡単なツールなどを作成するときにも利用していますが、他のAIサービスと比べても、無料で利用できる範囲が広く、無料枠では応答回数によってモデルの変更はあるものの、基本的には制限なく返答をもらうことが可能です。
AIとのチャットの詳細は伏せますが、ChatGPTさん曰く「Pythonで作れます」とのこと。
実際に作ってみる
ここでChatGPTに「そのコードを書いてください」とお願いすると、30秒ほどで書いてくれました。コードの長さから考えても、人間が手で打つより何倍も早い仕上がりです。しかし、こちらが指示した通りの仕上がりになっているわけではなく、利用できる基本的な形で返してきます。
そのコードに対してこちらから「どのような処理が欲しいか」「何を出力したいか」を指示することで、自分の欲しいコードをオーダーメイドで仕立ててもらうことになります。ここからのやりとりが長くなる傾向にあるので、応答回数の制限なく返答してもらえるChatGPTが必要になるわけです。
今回はダウンロードするのではなく、動画データのリンクを返してもらえればいいので、複雑な処理は不要で、やりとりの回数もそれほど多くはありませんでした。
実装してみる
実際にサイトにするには、表示するためのWebページをHTMLとCSSで作る必要があり、そのファイルと一緒にPythonのファイルを設置する必要があります。
現在利用しているXserverでは、Pythonファイルについては設置場所に制限がなく、ファイルが置いてあれば利用できるとのことですので、困ることはありませんでした。
一方、レンタルサーバーということで、外部ファイルのインストールには大きな制限があり、今回はオープンソースのソフトウェアをインストールする必要があったため、Anacondaをインストールしています。
Xserverのファイル管理は、大容量の1GBまでのアップロードに対応していますが、今回使用した「Linux
Python 3.12 64-Bit (x86) Installer (1007.9M)」はサイズがオーバーしたので、SSH接続からコマンドラインでのダウンロードが必要です。
この作業が嫌な場合は、Minicondaを選ぶという手もありますが、いずれにしても、その後のインストール作業でコマンドラインによる操作が必要になるため、差はないと思われます。
インストールについては「Xserver Anaconda」で検索をすると解説しているページがたくさんあるので、必要な方は調べてみてください。検索結果を順番に見ていけばできると思います。個人的にはこちらのサイトが求めていた方法に一番近かったです。
あっさり躓く
ここまで順調にいっていたのですが、意外な所で躓くことになったのがWebページ側。頭の中に描いていた一連の流れは以下の通りです。
- フォームにURLを入力
- Python側で処理
- 結果を表示
プログラムに精通していなくても、誰もがこれは簡単な流れだと分かるはずです。そう思っていたので僕自身もHTMLとCSSを書いたら終わりと思っていました。しかし、令和の世の中はそんなに甘くはありません。
「PCでもスマホでも、同じように使えて、表示に問題がない」というのは当たり前のようで難しい問題で、現代では、PCとスマホで解像度が異なるだけでなく、各端末によってバラバラです。ユーザーの数だけ環境があると言っても過言ではありません。
@mediaで解像度ごとにCSSの設定を変えたり、端末によって読み込むCSSを別の物にしたり、記述をpx表記からvw・vh表記に変更したり、と対応は様々です。今回はこの順に試して「vw・vh表記」に落ち着きました。
よくある方法ですし、実際この方法は長く使われていると思います。画面幅などを基準にそれより大きいか、それより小さいかを判定してCSSのルールを変えることができます。
「PCは横長で、スマホは縦長」くらいの認識で設定する分には楽でいいのですが、現在の環境は少々複雑で、いわゆるFHD・WQHD・4Kが混在している状況です。幅だけで判定すると4K解像度を持つスマホに、PC用のCSS設定を表示してしまうということもあり得ます。
それを防ぐために、「端末がPCかスマホか、解像度はいくつか」など、より細かい条件を設定してもいいのですが、複数条件にすると組み合わせの数だけ記述が増え、各箇所に不具合が出た場合にはそれぞれ修正が必要となるので不採用となりました。
「複数条件を設定すると組み合わせ分の修正箇所が発生してしまう」というデメリットを克服するのが、端末によって読み込むCSSを別の物にする方法です。これも昔から使われていますが、こちらは判定と読み込みにJavaScriptを用いるので少々手間がかかります。
しかし、端末ごとにCSSを分けることで「PC・スマホ」「FHD・QHD・4K」という条件で発生していた6通りの組み合わせを、3通りまで減らすことができ、どちらかの端末でしか発生しない不具合についても、不具合が発生した側のみ対処すればいいので管理面で優秀です。
問題があるとすれば、どちらの端末にも影響する不具合があった場合は、結局、組み合わせ分の修正が必要となること、そして、ファイルが分けられていることで修正時の手間が増える点でしょうか。実際、今回も制作時に両方を書き換えることが何度もあったので別の方法を採ることにしました。
CSSでは長年、絶対値であるpxが使われてきました。画面の1ドット、それが1pxです。現在ではデバイスピクセル比により1pxが複数の物理ドットに対応する場合もありますが、大まかな認識としてはこんな感じです。
端末の解像度が多様化した現代では、FHD環境では大きく、4K環境では小さく表示されるといった問題が発生します。これを解決するために、画面の割合に応じた大きさをvw・vhで指定することで、どのような解像度の端末でも一貫した表示が可能になりました。端末ごとの調整も不要です。
vw・vhは絶対値ではないため、その他の要素を計算するには不向きですが、解像度による見え方の違いを防ぎ、表示品質を一定に保つ点で大きく役立っています。何より修正箇所が少なくて済むので、他の要素が絡まないのであれば積極的に使いたいですね。
使い勝手も大事なので微調整
レスポンシブ対応でかなり時間を要しましたが、ChatGPTの支援もあったため、煩わしい作業は少なかったと思います。実際に組み合わせてみるとそこまで悪くなかったのですが、もう少しだけクオリティーにこだわってみました。
URL送信後にフォームを消去
連続的にリンクを抽出するにあたり、フォームにURLが残ると毎回手動で消す必要が出てくるので、JavaScriptで自動的に消去するようにしました。
Pasteボタンを設置
取得したリンクはクリップボードに貼り付けている方が多いと思うので、Pasteボタンで「貼り付け→ダウンロード」となるように設定しました。クリップボードアクセスのため、ブラウザに許可する必要がありますが、貼り付けの手間を減らせます。
iframeはレスポンシブに
Pythonから返ってきた内容はページ内のiframeで表示しています。表示位置には一応スペースを設けていますが、表示後の高さ調節などはJavaScriptによって行っています。リンク4つまではスクロールせずに表示できるはずです。
必要事項はアコーディオン化
使用方法などは見えやすい方がいいかなとも思いましたが、ずっと見えているのも目障りですし、縦スクロールの範囲も広がってしまうので、画面の誤タップなどで移動してしまった場合のストレス軽減も含めて、アコーディオン化によって表示を短縮しました。
プライバシーに最大限の配慮を
ツール側にも同様の記述しておりますが、できる限り、安心して利用できるように以下の通り設定しています。
- サイトによっては、利用者によってダウンロードされた動画のリンクを公開しているところもありますが、本ダウンローダーでは一切公開しません。利用者のプライバシーを守ると同時に、違法な動画や問題のある動画の拡散防止、私的使用のための複製を越えない設計にしています。
- また、誤ってプライベートな内容が含まれた文字列が送信された場合も記録されません。Python側でX（Twitter）のドメインのみ受け付けるよう設定されています。
- フォームから送信されたX（Twitter）のURLについては高速化のためキャッシュされることがありますが、その他の利用情報やIPアドレスなどは記録・保存されません。
- サイトへのアクセスは、サーバーのアクセスログやGoogleアナリティクスなどに記録されることがありますが、利用情報については記録していないため紐付けられることはありません。
完成
AIを用いてもまだ簡単に作れる時代にまでは至ってはいませんが、ある程度コードが読めれば、ほぼ素人でも自分の作りたいものを実現させることができる時代になりました。AIによるコード生成が多くを占めていますが、こちらがテストした限りでは、今のところ不具合は出ていません。
大量アクセスを想定しているわけではないので、実際に複数の利用者がいた場合には、不具合が出る可能性もあります。何か問題がありましたら、お問い合わせからご連絡ください。
