youtube-dlの画像共有から考えるTwitterでファイル交換するツール作成

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

なんか呟いてくれないのだが togetter.com/li/1615011

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

諸事情でこれを先に進めるか。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

うむ1100x1100で5MBやなー で、メタデータといってもdataScheme程度もほしいと成ると・・・ Base64の状態(1.3333倍)で不足バイト分のPaddingやメタデータをカマしてbyteに変換をかけて、画像に変換、圧縮Maxなping形式にすると。 で、データ形式は、dataURIで＋Paddingをカンマで入れると。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

PNGやった・・・ まちごうた。 ブラウザで完結したいとなるとSafariのサポートのしょっぱさが身にしみる。 アイツラなんなんと思うがChromeが色々手を出し過ぎというのも有る。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

さて k-tai.watch.impress.co.jp/docs/column/te… という先駆者を見かける。 これの個人的にイケてない点は ・アプリである（パーミッション与えすぎ） ・ファイルの中身を保管先が知る可能性が高い（漏洩、内部閲覧をしている） ・本来必要ないユーザー登録を要求する（行動追跡の可能性が非常に高い） と言う点

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

どう、提供元が言い訳しようとも、紳士協定であり 法的裏付けも、監査もないのだから実質やりたい放題である。 ならば、自分で作ればどうだろうか？と言う話。 じゃあ、このアプリの利便性をWebアプリのみで提供したい場合はどうしたらいい？ 何が有れば提供できる？

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

目標は第三者とのデータ交換なので、 ・まず、該当ページのurlのQRコード ・次にtwitterの該当ページへの誘導、上記urlに含める ・パスワード、これもurlに含める、別途再送も許可 ・一旦ファイルをローカルに落としてアップロードしてもらう必要がある。 ・後はファイルをアップロードして変換する

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

本当はtwitterから直接画像を持ってこれると良いが、クロスドメインデータはバイナリファイルにタッチした瞬間にブラウザのクロスドメイン規制に引っかかる。 webrtcを無理やり張ればできなくは無いがbookmarkletが必要

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

うーむ。困った CanvasにBitMapデータぶっこんで取り出したら値が微妙に変わってるんだが・・・・なんで？ アルファチャンネルの処理で値が変わるだと・・・ えーっと、表示するデータがアルファチャンネルを加味したRGBになるので、再度RGBAに取り出しても値が違う可能性が高いと・・・

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

じゃあアルファチャンネル使えないじゃないですかヤダー！

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

stackoverflow.com/questions/4309… ここに書いてあるように、アルファチャンネルの適用が適当、使い捨てっぽい。従ってちゃんとデータほしけりゃアルファチャンネルは255固定にするしかない。 なお、0にしたら全部0になってしまった。そりゃ合算した結果を見たら0だわな・・・

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

うーん・・・なんかヤバイな png圧縮はいいんだが、圧縮が進むと一部データが化けて出てくるのだが・・・ お前、事実上黒一色だから黒でええやろ 的な似た感じの部分まで影響が出る。 何が言いたいかと言うとデータのバラエティが低いデータを突っ込むと省略される。 まあ先にDefrateをかければいいが

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

一応出来た！ やったぜ！ github.com/ryunosinfx/Twe… 変な人に見つからないように英語で書いてやった。 後悔はしてない。 と言っても使い方は簡単だが。 単純に言うと ファイル9.9MB程度を４枚の4MBの画像に相互に変換するツール。 ただし、画像はTwitterのトリミングサイズ（4096px、5MB規制）内

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

ryunosinfx.github.io/TweetImagesAsF… このページをブラウザで開くだけですね。 デザインもクソも 1html,1js,1cssで簡易に作ってるので適当です。 スマホ？知らない子ですね。 これからテストだけど、あんまりやる気は起こらない。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

という訳でテスト 内容は吾輩の著作物であるTwitterに過去に上げたイラスト zipなので、安心してダウンロードして欲しい。 ryunosinfx.github.io/TweetImagesAsF… 多分、大丈夫。トリミングしないでくださいよ〜 なお、10.8MBあった。 pic.twitter.com/JymnQ59Nf4

拡大

拡大

拡大

拡大

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

ダメだにゃー。jpegに変換されとるよ。＼(^o^)／ｵﾜﾀ ナンテコッタイ。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

768x768で再チャレンジや！ pic.twitter.com/HNRIzsspgG

拡大

拡大

拡大

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

768x768の6bit(※base64なので)が成功と。 じゃあ1024x1024で再チャレンジや！ pic.twitter.com/kAYjIrMwav

拡大

拡大

拡大

拡大

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

あーミディアムサイズになるとダメっぽいですね。jpegになっちゃった。 900x900と言う数字がなにか見えた気がするので 900x900で試して見るね。 pic.twitter.com/szJbguvCNy

拡大

拡大

拡大

拡大

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

お、いい感じにpngファイルになったぞ。 じゃあデフォルト値は900pxにしておくか。 だいたいこれで7.3MB、ブラウザ上では6.9MBまでいけた。 後はてっとり早く出来るのは、暗号化処理（パスワード相当のSHA256をキーにしたAES256-CBC）とローディング表示ぐらいか。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

画面スクショ ①ファイルをToImagesのタブで登録します。 ②すると、最大4枚画像が出来ます。クリックするとDL出来ます。これをTwitterにUPします。 ③Twitterから画像4枚を順番にDLします。 ④これをToFileのタブのimage1~4にアップします。そして、convertToFileボタンを押すとファイルがDL出来ます pic.twitter.com/0kQ7Su8DBL

拡大

拡大

拡大

拡大

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

尚、スレッドの先頭で言及した youtube-dlの画像ファイルとは互換性が無いです。 互換性をもたせられなくも無いですが、面倒くさいのでやってないです。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

FirefoxとChromiumで動いたからええじゃろ。 尚、順番間違えたり、jpegを食べさせてもファイルは落ちてこないので注意。 なんやな・・・明後日の用途として AntiVirus「何者だ？名乗れ！」 File「画像です」 AntiVirus「よし！通れ！」 的なPPAPの亜種的な運用は可能やな・・・

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

ryunosinfx.github.io/TweetImagesAsF… よし、 ・レスポンシブデザイン対応、多分スマホで使える ・ローディングの表示 ・入力可能データ量の試算 まで対応したぞい。 だから何だというが。ここで次は暗号化か。

汝、翼を与える＠ばってん先に翼ばくれんね イベント・・（parody） @ryunosinfx

現在パスワードを懸ける所までは出来た。 さあ、後はエラー対応か。 バックグラウンドを暗号化したら紫にしよう。 暗号化対象がおかしい場合はエラーを出さないと。 そしてファイルのシグネチャを出さないと。 ファイルシグネチャが一致してれば安心でしょ。