#author("2021-11-11T12:49:22+09:00","ocha","ocha")
[[How2Gyazomodoki]]
#author("2021-11-11T12:49:32+09:00","ocha","ocha")

[[How2Computing]]

古いバージョンです。SSHを使ってます。Webサーバを使ったバージョンはこちらです。

[[How2Gyazomodoki]]

-------------------

#contents


このページの内容はmacOSで動かしましたが他の環境でも生かせます。
*gyazoもどき gyazom を作る [#sbddd479]

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

http://is.ocha.ac.jp/~siio/gyazo/08522d57d597dd25576883b1233cbd65.png
←これが本物

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


**前提 [#u9bb85b9]

-自前の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:https://gyazo.com/ja]]を使いましょう。

*6行のシェルスクリプトで作る [#ab14135b]

たとえば、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


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

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

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

 chmod a+x gyazom.command

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

http://is.ocha.ac.jp/~siio/gyazo/20111108213617.png


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

*アプリケーション版を作る [#v86253dc]

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

http://is.ocha.ac.jp/~siio/gyazo/20111108212028.png

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

//http://is.ocha.ac.jp/~siio/gyazo/20111108212214.png
http://is.ocha.ac.jp/~siio/gyazo/20111108212724.png

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

http://is.ocha.ac.jp/~siio/gyazo/20111108212427.png

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

**名前をhashする [#o2bbc191]

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


*ドラッグアンドドロップに対応する [#zbe7fdf1]

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

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

http://is.ocha.ac.jp/~siio/gyazo/b4a8bae463224abcdf847cf2bc7e58f6.png


コード部分を以下にテキストで書いておきます。(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ページに組み込みたい時にファイルサイズの点で有利

*フォルダーのドラッグアンドドロップに対応する [#wb199026]

フォルダー(デイレクトリ)がドラッグアンドドロップされた時は、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

**空白を含むファイル名に対応する [#ne7808d8]

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


 #!/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


**ダウンロード [#yb76a4fe]

フォルダのアップロード機能をさっそく試してみます。
完成したgyazom.appを、gyazom.appにドラッグアンドドロップして、
[[ここに置きました。:http://is.ocha.ac.jp/~siio/gyazo/gyazom.app.zip]]


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

http://is.ocha.ac.jp/~siio/gyazo/364e3e520e26978c1ebb4c8a966e508c.png


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

http://is.ocha.ac.jp/~siio/gyazo/dbd4a6c8a9881b6ff02ad31e53dd04ee.png

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

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

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

**現在の問題点 [#yda4c61e]

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

*HTMLのPOSTプロトコルに変更する [#v6694600]

増井先生に自慢したら、「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

Mac OS Catalinaからプライバシー機能が追加されたため、ターミナルから画面コピーするには、「システム環境設定」「セキュリティとプライバシー」「画面収録」で以下のようにターミナルに許可を与えておく必要があります。

http://is.ocha.ac.jp/~siio/gyazo/56b0facb58eda07c29c6d9c6f8b0d89a.png

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS