【Mac】Platypus で遊ぶ – webビュー

2019年2月10日

Platypus で遊ぶという記事で作った「imageDL.app」をもうちょっとマシにしたい。機能は変わらないけど、見た目くらいは変えてみよう。

Contents

1. webビュー
2. 今回気づいたこと
3. imageDL webビュー版

webビュー

Platypus の webビューは、スクリプトの出力を HTML でレンダリングしてくれる。HTML が扱えるなら、とりあえず画面をカラフルに出来るし、画像も使える。HTML を自作できれば、思うような画面が作れるだろう。
　まずはテストとして Google を表示してみたい。

インターフェイスで「web view」を選択する。
「Script Path」で [+new] をクリックしてスクリプトを書く。Platypus のドキュメントによると、以下のように書くらしい。

#!/bin/sh
echo "Location:https://google.co.jp/"

Location:URL（改行） と、スクリプトで出力すると、サイトを開いてくれる（ echo で出力された文字列は、そのまま改行される）。 [Create App] をクリックしてアプリを書き出してみる。

うまくいった。検索もできるようだ。
　今度は自作した HTML ファイルを表示させてみる。
　適当に作った index.html をバンドルさせ、

echo "Location:./index.html"

とやってみたが、うまくいかない。
　こういう場合は、

cat index.html

とやるらしい。

今度はうまくいった。

今回気づいたこと

前回はまったく気づかなかった、大事なことがふたつ。
　ひとつは [Create App] を押した時の挙動である。
　Platypus は、[Create App] をクリックすると、バンドルしたファイルを、バンドルし直してくれるのである。自作したアプリを右クリックしてパッケージの内容を表示し、リソース内のファイルを書き直すのは意味がない。
　デスクトップにあるファイルをバンドルしたなら、その元のファイルを編集する。そうすれば、Platypus がバンドルし直してくれる。パッケージ内のファイルを編集しても、元のファイルに上書きされてしまうので、徒労に終わるのである。

もうひとつは、プロジェクトそのものの保存だ。
　保存はファイルメニューではなく、「profiles」メニューの「save profile…」でおこなう。バンドルファイルを追加した場合などに、こまめに保存しておけば、作業の続きが楽になる。

imageDL webビュー版

imageDL は、ブログの記事などの URL をドロップすれば、ページに含まれる画像のリンクを抽出してダウンロードするアプリである（【Mac】Platypus で遊ぶ | 林檎コンピュータ）。これを webビュー版にアップグレードしてみる。
　ファイルは最終的に、以下のようになった。

Script.sh

#!/bin/sh

# cat で index.html をレンダリングさせる
cat index.html

URL=`cat -`
if ! test -z "$URL"; then
	if echo "$URL" | grep -sq "^http"; then
		sh dl.sh "$URL"
	else
		exit 0
	fi
else
	exit 0
fi

バンドルファイル

📝 index.html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="style.css">
    <title>タイトル</title>
  </head>
  <body>
    <p class="blink">Drop URL</p>
    <script src="jquery.min.js"></script>
    <script src="idl.js"></script>
  </body>
</html>

📝 style.css

body	{
	background-color: #323232;
	background-image: url('title.png');
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: #fff;
	font-family: sans-serif;
}
img.thum	{ /*ダウンロードした画像のサムネを表示*/
	width: 150px;
}
.blink { /*「Drop URL」を明滅させる*/
  animation: blinkAnime 1s infinite alternate;
  font-weight: bolder;
  font-size: 1.5em;
  text-align: center;
}
@keyframes blinkAnime{
   0% { color: #323232 }
 100% { color: #ffffff }
}
#clear	{ /*[クリア]ボタン*/
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 5px;
	cursor: pointer;
	background-color: #999;
	width: 5em;
	text-align: center;
}

📝 idl.js

$(function (){ //[クリア] をクリックするとサムネを消去する。
	$('#clear').click(function (){
		$('.thum').css('display', 'none');
		$('.message').css('display', 'none');
		$(this).css('display', 'none');
	});
});

📝 dl.sh

#!/bin/sh

saveLoc=~/Desktop

# 前回、[Cancel]された場合、dlTmpフォルダが残るので、消去する。
if ! test -e ./dlTmp; then
	mkdir ./dlTmp
else
    rm -rf ./dlTmp
    mkdir ./dlTmp
fi
cd ./dlTmp

url=$1
/usr/local/bin/wget --quiet "$url"
/usr/local/bin/nkf -w * >utf.txt
blogtitle=`head -n 50 utf.txt |
 grep -i -A 10 '<title>' |
 grep -B 10 '</title>' |
 tr -d '\n' |
 sed -e 's/<[^>]*>//g' |
 sed -e "s/ /_/g" |
 sed -e "s/[:.\/()=-]//g"`

grep -i -E  'href=(http|"http|"https)://[a-z0-9/_\.\-]+(.jpg|.png|.gif|.jpeg).' utf.txt |
 sed -e  's/[Ss]rc=\"http//g' |
 tr ' ' '\n' | tr '=' '\n' |
 tr '"' '\n' | grep -E 'jpg$|jpeg$|png$|gif$'|
 grep -E '^http'  > list.txt

for file in `cat list.txt`
do
	/usr/local/bin/wget --quiet $file
	# ダウンロードした画像を表示する
	echo '<img src="dlTmp/'`basename $file`'" class="thum">'
done

zip -0 -q "$blogtitle".zip *.jpg *.gif *.png *.jpeg
cp "$blogtitle".zip "$saveLoc"/

cd ../
rm -rf dlTmp

# クリアボタンの表示
echo '<p class="message">'$blogtitle'</p>'
echo '<p class="message">終了です</p>'
echo '<p id="clear">クリア</p>'

他に以下のものをバンドルした。
　jQuery はローカルにダウンロードしてバンドルしないと、読みこんでくれないようだ。