UpupuとDavdav: WebDAVを使った写真共有

12/25/2012

UpupuとDavdav: WebDAVを使った写真共有

WebDAVを使って簡単に写真共有できるツール、「Upupu」と「Davdav」を紹介します。

写真共有サービスは今や様々なものがありますが、外部サービスに依存せずにチーム内で簡単に写真が共有できると、ミーティングのログを撮り貯めたりするのに便利です。今回紹介するUpupuとDavdavは、Xcoo, Inc.で開発・公開されているツールで、Xcooの社内ツールとして実際に用いられているものです。オープンソースとして公開されているため、インストールさえできれば、誰でも利用することができます。

Upupuは、WebDAVやDropboxに2タップ（撮影と送信）だけで写真をアップロードできるiOSアプリです。保存ディレクトリ名、ファイル名はアップロードの日時から自動的に生成されます。App Storeで850円で販売されています。また、GitHub上にオープンソースとして公開されているため、ソースコードをダウンロードしてビルドすれば、無料で利用することもできます。 → https://github.com/xcoo/upupu

Davdavは、Upupuを使ってWebDAVにアップロードした写真を、サムネイル付きで快適に閲覧するためのビューアです。Auto Pagerizeにも対応しています。DavdavもGitHub上にソースコードが置かれているので、誰でも利用可能です。 → https://github.com/xcoo/davdav

それでは以下に、UpupuとDavdavをソースコードからビルドし、インストールする方法を説明します。なお、WebDAVのアップロード先環境は予め用意されているものとします。WebDAVの設置方法は検索すれば多くの説明サイトがありますので、そちらを参考ください。

Upupuのインストール

ソースコードのダウンロード

Gitでcloneしてください。

$ git clone https://github.com/xcoo/upupu.git

もしくは、こちらからzipで圧縮されたファイルをダウンロード・展開してください。

その後、Upupu.xcodeprjをXcode 4で開いてください。 iPhoneなどを接続して実行すればインストールされます。CertificateやDevice登録などのiOS開発の基本部分はここでは説明しませんので、他サイトを参考にしてください。

Dropboxを使う場合

Upupuでは、WebDAVの他にアップロード先にDropboxを指定することもできます。

Dropboxを利用するには、Dropboxアプリの登録とUpupuの設定ファイルの書き変えが必要です。詳しくはこちらをご覧ください。

Davdavのインストール

ここでは、UbuntuとApacheを用いたインストール方法を説明します。

Python 2.7以上、MySQL 5.0以上があれば、他の環境でも利用可能だと思います。その他の環境へのインストールは、Davdav wikiのInstall manualを参照してください。

ある程度のLinuxの知識があることを前提としていますので、ご了承ください。

1. 関連パッケージのインストール

まず、Ubuntuのapt-getを使ってGit, MySQL, Apache, Pythonのeasyinstallをインストールしましょう。その後、easyinstallを使ってpipを、pipを使ってPythonの依存ライブラリをインストールします。

$ sudo apt-get update
$ sudo apt-get upgrade

# Install Git
$ sudo apt-get install -y git

# Install MySQL
$ sudo apt-get install -y mysql-server mysql-client libmysqlclient-dev

# Install Apache2
$ sudo apt-get install -y apache2 libapache2-mod-wsgi

# Install Python libraries
$ sudo apt-get install -y python-setuptools
$ sudo easy_install pip
$ sudo pip install Flask SQLAlchemy MySQL-python PIL configobj

2. Davdav用のユーザの作成

Davdavを動かす用のユーザを作成しましょう。また、サムネイル画像保存用のディレクトリをここで作成しておきます。

$ sudo adduser davdav
$ sudo -H -u davdav mkdir /home/davdav/thumbnail

3. Davdavのダウンロード

DavdavをGitHubからダウンロードします。アップデートのしやすさを考えると、Gitでcloneしたほうが良いと思います。

$ sudo -H -u davdav git clone https://github.com/xcoo/davdav.git /home/davdav/davdav

4. MySQLのセットアップ

MySQLにDavdavのデータベースを作成します。 sqlファイルを流し込んでデータベース作成しましょう。

$ cd /home/davdav/davdav
$ mysql -u root -p < db/davdav.sql

5. Davdavの設定

テンプレートをコピーして、設定ファイルを作成します。

$ sudo -u davdav cp config/davdav.ini.example config/davdav.ini

作成したdavdav.iniを編集して、DBURI, WEBDAVROOTURL, THUMBROOTURL, WEBDAVDIRの値を環境に合わせて書き変えましょう。

DBURIのuser, passwordは、先ほど作成したMySQLデータベースに接続できるユーザ名とパスワードにしてください。WEBDAVROOTURLは、Upupuのアップロード先にしているWebDAVのURLです。THUMBROOTURLは、サムネイル画像を見られるURLです。WEBDAVDIRには、Ubuntu内でのWebDAVディレクトリのパスを指定します。

ここでは、Davdavを表示するドメインはdavdav.example.comと仮にしています。実際に使うドメインに書きかえてください。

DEBUG=False
TESTING=False

DB_URI='mysql://user:password@localhost/davdav?charset=utf8'

WEBDAV_ROOT_URL='http://webdav.example.com/'
THUMB_ROOT_URL='http://davdav.example.com/thumbnail'

WEBDAV_DIR='/var/www/webdav'
THUMB_DIR='/home/davdav/thumbnail'

NUM_BY_PAGE=10

FOOTER_ENABLE=True

AUTH_ENABLE=False
AUTH_USERNAME='username'
AUTH_PASSWORD='password'

それ以外の設定は、1ページ毎の表示日数やフッターの有無などですが、後でも編集可能なのでここではデフォルトにしておきます。

※Pythonの実行環境としてvirtualenvを使用する場合、config/virtualenv.iniの設定も必要となります。それについてはこちらのREADMEを見てください。

6. crontabの設定

cronを使って、定期的に新規画像をチェックし、サムネイル画像を生成するようにします。ここでは、5分毎にチェックするようにしています。

$ sudo -H -u davdav crontab -e /5    * python /home/davdav/davdav/tool/cron.py

生成されたサムネイル画像は/home/davdav/thumbnail以下に、サムネイルと実画像との対応付け情報はMySQLに保存されます。

7. Apacheの設定

WSGIを使ってDavdavを動かせるように、Apacheの設定を書きます。

ここでは、VirtualHostを使ってdavdav.example.comに接続したときに動作するようにしています。サムネイル画像もこのドメインから見られるように、Aliasを設定しています。

<VirtualHost *:80>
    ServerName davdav.example.com

    WSGIScriptAlias / /home/davdav/davdav/app/davdav.wsgi
    WSGIDaemonProcess davdav user=www-data group=www-data processes=5 threads=10 home=/home/davdav/davdav/app python-path=/home/davdav/davdav/app
    WSGIProcessGroup davdav
    WSGIPassAuthorization On

    Alias /thumbnail /home/davdav/thumbnail
</VirtualHost>

最後に、Apacheをリスタートして完了です。

$ sudo service apache2 restart

ウェブブラウザでhttp://davdav.example.comを開いて、実際に動くことを確認してください。

Tags: Xcoo WebDAV

« Bootstrapでかっこいいファイル選択フォームをつくる OpenNI2をWindowsにインストール »