How2Gyazomodoki のバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
How2Gyazomodoki へ行く。
- 1 (2015-03-18 (水) 09:54:38)
- 2 (2021-10-22 (金) 23:27:11)

gyazoもどき gyazom を作る
- 前提
6行のシェルスクリプトで作る
アプリケーション版を作る
- 名前をhashする
ドラッグアンドドロップに対応する
フォルダーのドラッグアンドドロップに対応する
HTMLのPOSTプロトコルに変更する

このページの内容はmacOSで動かしましたが他の環境でも生かせます。

gyazoもどき gyazom を作る †

増井先生のgyazoをリスペクトして, gyazoもどき, なづけて gyazom を作ってみました。ほんもののgyazoはこちら。

←これが本物

この「もどき」アプリは、スクリーンショットを自前のwebサーバへアップロードしてで公開します。以下では、scpを使ってアップロードしています。後半では、ドラッグアンドドロップで任意のファイルとフォルダをアップロードできるようにしています。 jpegファイルはjpegのままアップロードされ、また、動画、音声、PDFファイルなどもアップロードできます。このようなファイルをwebページに貼り付ける場合に便利です。また、アプリケーションやフォルダをドラッグアンドドロップした場合は、名称を保存して圧縮してアップロードするので、ファイルを共有する目的でも使えます。

↑

前提 †

自前のwebサーバをもっている。
- 以下の例ではhost名がyourhost.jp
- データを置くURLがhttp://yourhost.jp/gyazo/
- SSHする先がyourhost.jp:public_html/gyazo/
そこにパスワード入力なしでscpできるようになっている。
- シェルスクリプトでファイル転送できればscpじゃなくて良いです
- パスワードなしで公開鍵・秘密鍵でsshするように設定する方法は .hogeworkshop_SecureSshServer (内部専用)
クライアントはMac OS X

自前のwebサーバを持っていないなど、この前提が達成出来ない場合は、本物のgyazoを使いましょう。

↑

6行のシェルスクリプトで作る †

たとえば、gyazom.commandという名前で以下のファイルを作ります。たった6行のスクリプトで、スクリーンショットを撮って、それを年月日時分秒.pngという名前でwebサーバにアップロードします。

#!/bin/sh
filename=`/bin/date +"%Y%m%d%H%M%S"`
screencapture -i /tmp/$filename.png
scp /tmp/$filename.png yourhost.jp:public_html/gyazo/.
echo http://yourhost.jp/gyazo/$filename.png | pbcopy
open http://yourhost.jp/gyazo/$filename.png
rm /tmp/$filename.png

ポイントは以下の２つの便利なMac OS Xコマンド。

screencapture スクリーンキャプチャを実行します。-iオプションでインタラクティブに動作
pbcopy ペーストバッファへコピーします。

このファイルを実行可能にします。

chmod a+x gyazom.command

このファイルをダブルクリックします。

するとターミナルが起動して、このプログラムが実行されます。本家gyazoと同様、URLはコピー／ペーストのバッファに入っていますので、任意のアプリケーションにペースト可能です。

↑

アプリケーション版を作る †

Automatorを使います。 AutomatorはMac OS Xの操作や主にGUIアプリの実行を自動化するアプリケーションですが、シェルスクリプトも利用できます。さらに一連の手順をダブルクリックで起動するアプリケーションにすることも可能です。

ファイル・新規からアプリケーションを選び、ユーティリティ・シェルスクリプトを実行を選び、上記のシェルスクリプトをウィンドウの中に書きます。

これをアプリケーションとして保存。ダブルクリックで起動して終了します。本物のgyazoとほぼ同じ動きになります。

アイコンも変えてそれっぽくしてみよう。（Gyazoアイコンと同じにすればそれっぽい）

↑

名前をhashする †

上記の方法では、ファイル名を年月日時分秒としました。重複する心配は無いので問題ないし、ファイル名で整理したり探したりする場合に便利です。ただ、しらみつぶしにサーバにアクセスされるとサーバにおいた画像が見つかる可能性があります。誰に見つかっても良い画像を置くという方針なら問題ないけど、特定の人に知らせたい画像を置く場合があるならこれはちょっと困ります。元祖gyazoではhash値を使ってこの問題を解決しています。そこで、ここでもそうしてみましょう。

md5 -q -s`/bin/date +"%Y%m%d%H%M%S"`

とすると、日時分秒を種にしてhash値をえることができます。これを用いれば、ほぼユニークな名前を生成できます。以下は、ファイル名をhash値にしたときのgyazom.commandです。

#!/bin/sh
datetime=`/bin/date +"%Y%m%d%H%M%S"`
filename=`md5 -q -s$datetime`
screencapture -i /tmp/$filename.png
scp /tmp/$filename.png yourhost.jp:public_html/gyazo/.
echo http://yourhost.jp/gyazo/$filename.png | pbcopy
open http://yourhost.jp/gyazo/$filename.png
rm /tmp/$filename.png

↑

ドラッグアンドドロップに対応する †

本物のgyazoは、イメージファイルをドラッグアンドドロップするとアップロードしてくれます。もうすこし動作を詳細に説明すると、元の画像ファイルをpngに変換して、ハッシュ名＋.pngのファイル名にしてサーバに登録します。この「もどき」の方もドラッグアンドドロップに対応させてみましょう。

上と同じく、Automatorでアプリケーションを作ります。入力の引渡し方法を「引数として」にします。これで、ドラッグアンドドロップされて起動した場合は、そのファイル名（フルパス名）が引数として（シェルスクリプトなら$1として）渡されます。アプリケーションアイコンがダブルクリックされた場合は、引数なしで起動します。引数の数で有無を判断し、引数があった場合は、そのファイルをアップロードし、引数がなかった場合には、スクリーンキャプチャするようにします。

コード部分を以下にテキストで書いておきます。（Automatorでシェルを指定してるから1行目は多分なくてもよいですね）

#!/bin/sh
datetime=`/bin/date +"%Y%m%d%H%M%S"`
hashname=`md5 -q -s$datetime`
serverSSH="yourhost.jp:public_html/gyazo/"
serverURL="http://yourhost.jp/gyazo/"

if [ $# -ge 1 ] ; then
#drag and dropped an icon
	ddname=`echo $1 | awk -F'\/' '{print $(NF)}'`
	scp $1 $serverSSH$ddname
	echo $serverURL$ddname | pbcopy
	open $serverURL$ddname
else
	screencapture -i /tmp/$hashname.png
	scp /tmp/$hashname.png $serverSSH.
	echo $serverURL$hashname.png | pbcopy
	open $serverURL$hashname.png
	rm /tmp/$hashname.png
fi

ここでは、ドラッグアンドドロップされた場合は、そのファイル名そのままアップロードするようにしました。本家gyazoでは、ここもファイル名がハッシュ値になっています。自分のwebサーバのディレクトリなので、ときどき整理することもあるだろうと思い、その時に、元のファイル名のほうがわかりやすいと考えました。もし、ここもハッシュ値名にするなら、以下のようにしても良いかもしれません。

#!/bin/sh
datetime=`/bin/date +"%Y%m%d%H%M%S"`
hashname=`md5 -q -s$datetime`
serverSSH="yourhost.jp:public_html/gyazo/"
serverURL="http://yourhost.jp/gyazo/"

if [ $# -ge 1 ] ; then
#drag and dropped an icon
	ddtype=`echo $1 | awk -F'.' '{print $(NF)}'`
	scp $1 $serverSSH$hashname"."$ddtype
	echo $serverURL$hashname.$ddtype | pbcopy
	open $serverURL$hashname.$ddtype
else
	screencapture -i /tmp/$hashname.png
	scp /tmp/$hashname.png $serverSSH.
	echo $serverURL$hashname.png | pbcopy
	open $serverURL$hashname.png
	rm /tmp/$hashname.png
fi

ちなみに、ここでは、ドラッグアンドドロップされたファイルがそのままアップロードされます。この方法は、本家gyazoと違って次の点で優れていると思います。

画像ファイル以外もアップロードできる（本家はpngとかjpgに限定されていました）
- 動画ファイルとか音声ファイルとかPDFファイルとかをwebページに組み込む時などに便利
JPEGファイルもpngに変換されずにそのままアップロードされる
- 写真をwebページに組み込みたい時にファイルサイズの点で有利

↑

フォルダーのドラッグアンドドロップに対応する †

フォルダー（デイレクトリ）がドラッグアンドドロップされた時は、zipしてアップロードするようにしました。

if [ -d $1 ]

でデイレクトリかどうかの判断ができるようです。これを利用して、ハッシュされたzipファイルを作ってアップロードします。 Mac OS Xのアプリケーションはデイレクトリなので、アプリケーションもアップロードできます。もうこうなると、スクリーンショット共有じゃなくて、任意のファイル共有のアプリですね。

以下にスクリプトを置いておきます。

#!/bin/sh
datetime=`/bin/date +"%Y%m%d%H%M%S"`
hashname=`md5 -q -s$datetime`
serverSSH="yourhost.jp:public_html/gyazo/"
serverURL="http://yourhost.jp/gyazo/"

if [ $# -ge 1 ] ; then
#drag and dropped an icon
	ddname=`echo $1 | awk -F'\/' '{print $(NF)}'` #file/folder name
	if [ -d $1 ] ; then
	#directory
		cd /tmp
		cp -r $1 $ddname
		zip -r $ddname.zip $ddname
		scp $ddname.zip $serverSSH.
		rm -r $ddname
		rm $ddname.zip
		echo $serverURL$ddname.zip | pbcopy
		open $serverURL$ddname.zip
	else
	#simple file
		scp $1 $serverSSH$ddname
		echo $serverURL$ddname | pbcopy
		open $serverURL$ddname
	fi
else
#no drag and dropp item
	screencapture -i /tmp/$hashname.png
	scp /tmp/$hashname.png $serverSSH.
	echo $serverURL$hashname.png | pbcopy
	open $serverURL$hashname.png
	rm /tmp/$hashname.png
fi

↑

空白を含むファイル名に対応する †

ドラッグアンドドロップされるファイルやディレクトリの名前に空白がある場合は、いろいろダブルコーテーションで囲ってあげないといけないことがわかりました。

#!/bin/sh
datetime=`/bin/date +"%Y%m%d%H%M%S"`
hashname=`md5 -q -s$datetime`
serverSSH="yourhost.jp:public_html/gyazo/"
serverURL="http://yourhost.jp/gyazo/"

if [ $# -ge 1 ] ; then
#a file or folder is drag&dropped
	ddname=`echo $1 | awk -F'\/' '{print $(NF)}'` #file/folder name
	if [ -d "$1" ] ; then
	#directory
		cd /tmp
		cp -r "$1" "$ddname"
		zip -r "$ddname.zip" "$ddname"
		scp "$ddname.zip" $serverSSH.
		rm -r $ddname
		rm $ddname.zip
		echo $serverURL${ddname}.zip | pbcopy
		open "$serverURL$ddname.zip"
	else
	#simple file
		scp "$1" $serverSSH.
		echo $serverURL$ddname | pbcopy
		open "$serverURL$ddname"
	fi
else
#no drag and dropped item
	screencapture -i /tmp/$hashname.png
	scp /tmp/$hashname.png $serverSSH.
	echo $serverURL$hashname.png | pbcopy
	open $serverURL$hashname.png
	rm /tmp/$hashname.png
fi

↑

ダウンロード †

フォルダのアップロード機能をさっそく試してみます。完成したgyazom.appを、gyazom.appにドラッグアンドドロップして、ここに置きました。

これを起動すると以下のようなダイアログが出たり、さらには、壊れているのでゴミ箱に捨てろと言われるかもしれません。

この場合は、リンゴマーク→システム環境設定→一般の中の、「ダウンロードしたアプリケーションの実行許可」を「すべてのアプリケーションを許可」にすると起動できます。一度起動すればあとは問題なく起動数rので、一度起動したらこの設定を「Mac App Storeと確認済みの開発元からのアプリケーションを許可」に戻しておくと良いです。

また、このサンプルは、仮想のホスト、yourhost.jpの設定になっているので、このままでは動きません。このサンプルをAutomatorにドラッグアンドドロップして開いて、皆さんのweb/sshサーバに合わせて、スクリプトの以下の場所、

serverSSH="yourhost.jp:public_html/gyazo/"
serverURL="http://yourhost.jp/gyazo/"

の設定を変えてください。

↑

現在の問題点 †

日本語のファイル名のペーストバッファへのコピーがうまく機能していません。ただし、openされるときのブラウザのURL窓には正しく日本語が入っています。 pbcopyコマンドで問題が起きているようです。ただ、英語名は正しくコピーされていますし、ターミナル上のコマンドラインから日本語をpbcopyに渡すと正常に動作してます。 Automatorの環境設定の問題のように思います。日本語のファイル名の場合は、ブラウザのURL窓からコピーしなおしてください。

↑

HTMLのPOSTプロトコルに変更する †

増井先生に自慢したら、「sshなんか使ってやんの」と言われました。サーバ用意するのめんどくさいと思っていたのですが、POSTプロトコルのファイル転送は簡単にできることを知りましたので、変更しました。これでsshのパスワード不要にしておく必要がなくなります。その代わり誰でもアップロードできてしまう問題があります。

サーバ側には、次の受け取り用phpファイルを用意しておきます。アップロードするイメージファイルの置き場所を、./gyazoにしていました。その下の、ルートにphpファイルを置きます。./gyazoのオーナーは、_www:adminにして置きました。内容は、

<?php 
// アップロードのチェック
if ( $_FILES['filename']['error'] == UPLOAD_ERR_OK )
{
    // アップロードされたファイルの保存先を./gyazoに
    $upload_file = "./gyazo/" . $_FILES["filename"]["name"] ;
     
    // アップロードされたファイルを./gyazoに移動
    if ( move_uploaded_file( $_FILES["filename"]['tmp_name'], $upload_file ) )
    {
        // パーミッション設定
        chmod($upload_file, 0644);
    } 
} 
?>

です。このPHPファイルの名前をgyazo.phpとしておきました。

ここに、ファイルをPOSTプロトコルでおけば良いです。通常は、ファイルアップロードするフォームを作って、そのページからアップロードするのですが、curlコマンドで行うこともできるそうです。例えば、

curl -X POST http://yourhost.jp/gyazo.php  -F "filename=@/tmp/myfile.png;type=image/png"

とすれば、myfile.pngを上記のphpプログラムに渡すことができます。

gyazomの例で、一番シンプルな、画面コピーをアップロードするスクリプトを、このPHPを使ったバージョンに置き換えます。対比がわかりやすいように、scpのコマンド行もコメントで残してあります。

#!/bin/sh
datetime=`/bin/date +"%Y%m%d%H%M%S"`
filename=`md5 -q -s$datetime`
screencapture -i /tmp/$filename.png
#scp /tmp/$filename.png yourhost.jp:public_html/gyazo/.
curl -X POST http://yourhost.jp/gyazo.php  -F "filename=@/tmp/$filename.png;type=image/png"
echo http://yourhost.jp/gyazo/$filename.png | pbcopy
open http://yourhost.jp/gyazo/$filename.png
rm /tmp/$filename.png