![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#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 ポイントは以下の２つの便利な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
