見出し画像

Twitterで写真・画像を保存する時ちょっと便利なPHPファイルをこしらえた

maz

Twitterに投稿された写真や画像を拡大表示したあと、「あ、なんかこの写真綺麗」とか「この画像いいな」って思った時に、保存しようとするとファイル名の後ろに”_large”とか”jpg large.jpg”とかくっついてイラつく～ってずっと思ってました。
そのまま保存してもいいんですが、邪魔くさいんで毎回余計な文字列を削ってました。後でまとめてリネームソフトで置換してもOKなんですけどね。

さらに画像が複数のアルバム表示だと右クリックでは保存できないし。デベロッパーツールのパネルからURL取得とかめんどくちゃい。

そこでいっそのことページデータをPHPで読み込んで画像ファイル名だけ抽出してみようかなと思いついて、ちくちくコーディングしてみました。
【（注）ファイルの表示にはローカル等のWEBサーバが必要になります。】

step-1：『ポップアップ表示したツイートのURLを取得』
ブックマークレットでGETパラメータにURLを渡してPHPファイルを開く。
step-2：『URLからページデータを取得』
GETパラメータで受け取ったURLを「file_get_contents」渡してページデータをテキストで取得。
step-3：『DOM要素の中からclass、imgタグを絞り込んでファイル名取得』
step-4：『HTMLコードにimgタグを差し込んで画像を表示』

という感じでざっくりとコーディングしたところ、ほぼ予想通りに表示できてあっけ。じゃあページの飾りつけをといじり始め、表示テストをするうちに「file_get_contents」でのページデータ取得ができなくなってしまい困惑。
いろいろ調べてみると外部ドメインからのアクセスでは拒否られることが判り、ｃURLで取得ができそうな記事をみつけて修正してみたがうまくいかない。

そんじゃJQueryのajaxでやってみようと試行錯誤の結果、xdomainajaxでデータは受け取れたものの、受け取ったオブジェクトの展開が思うようにいかず断念。基本的にjavascript使いこなせてないんだと意気消沈。

ページデータが取得できないのなら画像のURLをGETしちゃえって開き直ってブックマークレットの方を改造することに方針変更。

当初は簡潔なコードで以下のようなものでした。

javascript:(function(){
	open("http://localhost/extract.php?q=" + location.href);
})()

「querySelectorAll」を使って画像のURLを
'.PermalinkOverlay-modal .AdaptiveMedia-photoContainer img'
の条件で配列に取得して、ループでGETパラメータに連結。

idx=0;elms.forEach(function(){urls=urls+','+elms[idx]['src'];idx=idx+1;})

最後にパラメータを付けたURL（表示を行うPHP）を開く。

open('http://localhost/trial/extract/index.php?qi='+urls,'img');

こんな冗長なコードでブックマークレットと呼べるのだろうかと恥ずかしさ爆発ですが、とりあえずなんとかまとまったのが以下のコードです。

javascript:(function(){
uname=document.querySelector('.permalink-header .fullname');
elms=document.querySelectorAll('.PermalinkOverlay-modal .AdaptiveMedia-photoContainer img');
idx=0;urls=uname.textContent;elms.forEach(function(){urls=urls+','+elms[idx]['src'];idx=idx+1;});
open('http://localhost/extract.php?qi='+urls,'img');})()

上記のコードをブラウザのブックマークに登録してツイート画面を表示した状態でクリック。

すると新しいタブでページが読み込まれて

こんな感じで表示されます。

表示ページはextract.phpとしていますが、お好みで。
PHPファイルの内容は

<?php
if($_GET && !empty($_GET['qi'])){
	$par = urldecode($_GET['qi']);
	$prop = explode(',', $par);
	$uname = array_shift($prop);
	$num_class = count($prop) > 2? ' vt': '';
	foreach ($prop as $key => $value) {
		$url = explode('/', $value);
		$file = array_pop($url);
		$ary_f = explode('.', $file);
		array_pop($ary_f);
		$fileName = implode('', $ary_f);
		$image .= "<div class='img$num_class'><img src='$value'><div><a href='$value' download='$uname". "_". "$fileName'>$uname". "_$fileName</a></div></div>\n";
	}
}
？>
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>data-image</title>
	<style>
		body {
			background-color: rgba(0,0,0,0.8);
		}
		.row {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			margin-top: 5%;
		}
		.img {
			margin: 0px 20px 50px;
			max-width: 40%;
			overflow: hidden;
			/*height: calc(300px + 3.2em);*/
			text-align: center;
		}
		.img.vt img {
			height: 400px;
		}
		img {
			height: 500px;
		}
		a, a:visited {
			color: #fdd;
			text-decoration: none;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="row">
		<?=$image?>
	</div>
</div><!-- container -->
</body>
</html>


この記事が気に入ったらサポートをしてみませんか？