ServersMan@iPhone Android 4.0β から ServersMan@VPS へ画像送ってBlog自動反映


ServersMan@iPhone, Android が 4.0β になり「ServersMan Shell」機能が搭載されました。
ServersMan@iPhone
ServersMan@Android

ServersMan Shell は色んなServersMan搭載機器へ簡単にアクセスしてファイルのアップロード、ダウンロードが可能というもの。VPSにもアクセスできるので、ServersMan@iPhone, Android (Desktop もできますが・・) から VPS へ画像をアップして自動でWeb上に反映するためのまとめを書いてみます。

目次

動作条件

  • アップした画像のサムネイル作成に PHP を使います。GDモジュール必須。
  • サムネイル作成、HTMLファイル作成は、アクセスするたびに実行すると処理的に重そうなので、cron で定期的に実行します。
  • 最終的にサムネイルの画像と画像へのリンクを記述したHTMLファイルを生成するので、iframe内で読み込んだり、ajaxで読み込んだり、phpで include したりして表示させてください。
  • 今回紹介する方法は、WordPress のウィジェット内にHTMLファイルを読み込ませて表示します
  • HTMLじゃなくて JSON で返したほうが柔軟性ありますが、読み込ませるだけで使えるのでHTMLにしました。暇があったら、JSON でも出せるようにするかも

PHP の準備

インストールしてない人はこちらへ。

↑で紹介している方法でインストールしていればGDモジュールも入ってるはずですが、入れてない人は、以下のコマンドを実行。

yum install php-gd

ServersMan@VPS の ServersMan を最新に

公式にやり方が載ってます。
【CentOS】
【Debian / Ubuntu 32bit】
【Debian / Ubuntu 64bit】

apache の設定

ServersMan の画像アップロード先を apache でアクセスできるようにします。例では、android_pic って名前にしてますが、好きな名前つけてください。

アップロード先ディレクトリの作成

cd /var/serversman/htdocs/MyStorage
sudo -u apache実行ユーザ mkdir -p android_pic/thumbnail

※ apache実行ユーザは環境、設定によって変わるので以下から調べてください。

CentOS
grep -i -e "^user" /etc/httpd/conf/httpd.conf
Ubuntu
grep -i -e "^user" /etc/apache2/apache2.conf 

apache 設定
http://VPSのIPアドレス/android_pic と /var/serversman/htdocs/MyStorage/android_pic をマッピングします。

vi /etc/httpd/conf/httpd.conf
Alias /android_pic /var/serversman/htdocs/MyStorage/android_pic
<Directory "/var/serversman/htdocs/MyStorage/android_pic">
    Options FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

apache をリブートして設定を反映。

/etc/init.d/httpd restart
または
/etc/init.d/apache2 restart

サムネイル、HTMLを生成するスクリプトを設置

まず設置場所を作ります。例では、/var/www/batch に設置。

cd /var/www
sudo -u apache実行ユーザ mkdir batch

スクリプトをダウンロード

cd batch
sudo -u apache実行ユーザ wget https://github.com/temog/ServersMan-VPS-Tool/raw/master/generateThumbnail/make_thumbnail_html.php --no-check-certificate

スクリプト設定。設定例のままでよければ設定不要です。

vi make_thumbnail_html.php
$generate = new GenerateThumbnailHTML(
    '/var/serversman/htdocs/MyStorage/android_pic',  ← 画像置き場
    '/android_pic',  ← 画像置き場のURL
    '/var/serversman/htdocs/MyStorage/android_pic/index.html',   ← HTMLの生成先
    '/var/serversman/htdocs/MyStorage/android_pic/thumbnail',   ← サムネイル置き場
    '/android_pic/thumbnail',   ← サムネイル置き場のURL
    '100',   ← サムネイルの横幅(px)
    '600'   ←画像の最大横幅(px)
);

サムネイルの表示個数変更
デフォルトは新しい順で 5つ表示します。変更したいときは $generate->generate(); の上に以下を追記

$generate->setNumOfThumb(10);

上の例だとサムネイルが10個

divタグのCSS名を変更
デフォルトは serversman_pictures になるので変更したいときは $generate->generate(); の上に以下を追記

$generate->setCssName('CSS名');

cron で定期実行する

スクリプトを実行すると、画像置き場から画像を探してまだ作られていないサムネイル画像を生成して、サムネイル、リンクを表示するHTMLを生成します。こいつを定期的に実行させるため crontab にジョブを設定したあげます。

crontab の編集画面を開く

sudo -u apache実行ユーザ crontab -e

以下を書き込んで保存

BATCHPATH=/var/www/batch
*/5 * * * * /usr/bin/php $BATCHPATH/make_thumbnail_html.php 1>> $BATCHPATH/batch.log 2>> $BATCHPATH/error.log

上の設定例では、5分起きに実行し、標準出力を /var/www/batch/batch.log に、標準エラーを /var/www/batch/error.log に書き込みます。

5分後ぐらいに /var/www/batch/error.log に何も書き込まれてなければ正常に動作しているはずです。

iPhone、Android から画像をアップロードしてみる

ここまでくると画像をアップロードすれば自動でサムネイル、HTMLが生成されるはずなので試してみます。

iPhone / Android の ServersMan を起動
※例は Android

起動したら、画面上部の「Shell@Android」をタップ

VPS の ServersMan をタップ
※ VPS側の ServersMan が起動してないと当然接続できないので起動させてといてください。

「MyStorage」をタップ

「android_pic」をタップ

画像置き場まで移動できたので「アップロード」をタップ

アップロードするファイルを選択します。例では、
sdcard → DCIM → 100MEDIA まで移動して・・・

IMAG0100.jpg をタップ

「OK」をタップすると

アップロードが始まります。

100% までいったら VPS側に画像が送られたか確認してみます。

ls /var/serversman/htdocs/MyStorage/android_pic
合計 1572
drwxrwxr-x 3 apache apache   4096  4月 19 01:55 .
drwxr-xr-x 3 apache apache   4096  4月 19 01:49 ..
-rw-rw-rw- 1 apache apache 996890  4月 19 01:56 IMAG0100.jpg
-rw-rw-rw- 1 apache apache 138324  4月 15 09:35 IMG_3457.5.jpg
-rw-r--r-- 1 temo   wheel   72323  4月 16 22:56 cat01.jpg
-rw-r--r-- 1 temo   wheel  260184  4月 17 01:04 img29c63db5zik6zj.png
-rw-r--r-- 1 apache apache    445  4月 19 02:00 index.html
drwxrwxr-x 2 apache apache   4096  4月 19 02:00 thumbnail
-rw-rw-rw- 1 apache apache  97573  4月 17 03:23 wallpaper.jpg

cron が動いた後にサムネイルとHTMLが作成されていれば成功。

ls /var/serversman/htdocs/MyStorage/android_pic/thumbnail/
合計 44
drwxrwxr-x 2 apache apache  4096  4月 19 02:00 .
drwxrwxr-x 3 apache apache  4096  4月 19 01:55 ..
-rw-r--r-- 1 apache apache  1738  4月 17 02:43 1302827723_IMG_3457.5.jpg
-rw-r--r-- 1 apache apache  4337  4月 17 02:43 1302962204_cat01.jpg
-rw-r--r-- 1 apache apache 10063  4月 17 02:43 1302969845_img29c63db5zik6zj.png
-rw-r--r-- 1 apache apache  3043  4月 17 03:24 1302978225_wallpaper.jpg
-rw-r--r-- 1 apache apache  5696  4月 19 02:00 1303145764_IMAG0100.jpg
ls /var/serversman/htdocs/MyStorage/android_pic/index.html
-rw-r--r-- 1 apache apache 445  4月 19 02:00 /var/serversman/htdocs/MyStorage/android_pic/index.html

生成された HTML を読み込む

冒頭でも書きましたが、iframeなり、ajaxなり、PHPなりで読み込ませるだけです。
当Blogでは、WordPressのウィジェット(PHP)に読み込んでます。(画面右側にある『Android Album』)

1. ウィジェットでPHPを使えるようにするプラグインを導入
いっぱいありましたが、適当に「PHP Text Widget」ってのを使ってます。

2. ウィジェットを作って、PHPで HTML を読み込ませる
これだけ

<?php include "/var/serversman/htdocs/MyStorage/android_pic/index.html"; ?>

3. CSSで見栄えをよくする
お好きなようにどうぞ。当Blogではこんな感じで指定してます。

.serversman_pictures > a > img {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    margin:2px;
}

コメントを残す

メールアドレスが公開されることはありません。

Top