Flickrのウェブアルバムと同等の機能を持つdfGallery 2.0をさくらインターネットの共用サーバーに設置する

Posted by kumacchi on 2009年3月31日 , 35 Comments
※注意
この記事は情報が古い記事です。現在は、ソースを書き換えなくても.htaccessの修正だけで設置できる方法が判っています。.htaccessの修正点については下記の記事を参考にしてください。

【解決】Flickrのウェブアルバムと同等の機能を持つdfGallery 2.0をさくらインターネットの共用サーバーに設置する – KUMA TYPE

古い記事は、使い方や設置方法の参考になると思いますのでそのまま残しておきますが、ソースの書き換え自体は無視してください。コメント欄の情報にも色々と参考になるところがあると思います。 

 

Flickrを使っている人にはわかると思いますが、Flickrにはとってもかっこいいflashで作られたウェブアルバム（スライドショー）機能があります。下の画像がそうなんですが、

XG001111

それと同等の機能を持ったウェブアルバムがフリーで配布されています。「dfGallery 2.0」というソフトなのですが、下の画像がそうです。Flickrの方が画像の切り替わりがクロスフェードでかっこいいのですが、それを除けばほぼ同機能で使い勝手もよさそうな高機能なウェブアルバムです。

XG001110

ウェブアルバム探していて下のGIGAZINEの記事を見つけてよさそうなので実際に設置してみることにしたのですが、いざさくらのサーバーに設置してみるとそのままでは動きませんでした。簡単に設置できるように設定なしでいろいろ自動で取得して動くように設計されているようですが、サーバーの違いを吸収しきれないでうまく動かないという。好意が裏目に出ている感じです。

出てくるエラーで検索してみると、同じエラーで困っている人が海外にもごろごろいるようで、エラーの出たままの画面で放置されているところがかなり引っ掛かります。明確な解決方法を見つけることができませんでしたが、なんとか使える状態までもって行くことができましたので、一応メモ代わりに残しておこうと思います。もっとスマートな解決方法があるかも知れませんし、今後のバージョンアップで解決される可能性もあります。他の解決策が見つからない場合やどうしてもさくらのレンタサーバーに「dfGallery 2.0」を今現在設置されたい方。チャレンジしたけど挫折した方は参考にされてみてください。

 

◇関連：Welcome to Flickr – Photo Sharing
http://www.flickr.com/

◇関連：おそろしく高機能でフリーなFlashフォトギャラリーの決定版「dfGallery 2.0」 – GIGAZINE
http://gigazine.net/index.php?/news/comments/20090125_dfgallery/

 

◇dfGallery 2.0 – Free Flash Gallery | Dezinerfolio
http://web.archive.org/web/20130825063534/http://www.dezinerfolio.com:80/dfgallery-2/free-flash-gallery

 

◇設置方法
以下、設置方法です。

さくらインターネットの共用レンタルサーバーに設置します。MySQLとPHPが必要になるので、スタンダードプラン以上が必要です。

とりあえず、上の「dfGallery 2.0」の配布元のページと、下の設置方法と使い方の動画を軽く見ておくことをお勧めします。

XG001112

１．dfGallery 2.0の配布ファイルをダウンロード

下のリンクの先のページから

http://web.archive.org/web/20130825063534/http://www.dezinerfolio.com:80/dfgallery-2/free-flash-gallery

下の画像の部分をクリックして、「dfGallery 2.0」の配布ファイルをダウンロードします。

XG001113

現在ダウンロードすると下の

dfgallery_v2.005.zip

というzipファイルがダウンロードされます。

２．「dfgallery_v2.005.zip」を解凍します。

通常「dfgallery_v2.005」というフォルダが作成されるかと思います。短くてわかりやすいようにdfgという名前にリネームしておきます。

３．dfgフォルダをサーバーにアップロードします。

方法は問いませんが、dfgフォルダをサーバーにアップロードします。通常はftpになると思いますので、FFFTPなどを利用して、設置場所にアップロードします。

ここではサブドメインを割り当てた

tools.kumacchi.com

に設置を行います。

設置用にgalleryというディレクトリ（フォルダ）を新たに作成してその中にアップロードします。

フルパスは

/home/kumacchi/www/tools/gallery

になります。

自分で設置するときは自分の環境に合わせてパスを読み替えてくださいね。

 XG001115

Sota’s Web Page (FFFTP)
http://www2.biglobe.ne.jp/~sota/ffftp.html

※わかる人はsshでログイン後wgetでダウンロードしてunzipしてください。

４．とりあえずアクセスしてみる。

アップロードしたらとりあえずアクセスしてみます。

http://tools.kumacchi.com/gallery/dfg

まあ、下のように「Internal Serrver Error」になります。

XG001116

これは、「dfGallery 2.0」に付属の.htaccessファイルに書かれている設定が、さくらのレンタルサーバーでは対応していないためなので、これを変更します。

５．[.htaccess]を編集する。

「dfGallery 2.0」に付属の.htaccessをテキストエディタで開いて次のように編集します。

通常は下のようになっているので、これを

<FilesMatch "\.(engine|inc|info|install|module|profile|po|sh|.*sql|theme|tpl(\.php)?|xtmpl)$|^(code-style\.pl|Entries.*|Repository|Root|Tag|Template)$">
  Order allow,deny
</FilesMatch>

Options -Indexes
Options +FollowSymLinks

ErrorDocument 404 /index.php
DirectoryIndex index.php

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.php/$1 [L]
</IfModule>

下のように修正します。

<FilesMatch "\.(engine|inc|info|install|module|profile|po|sh|.*sql|theme|tpl(\.php)?|xtmpl)$|^(code-style\.pl|Entries.*|Repository|Root|Tag|Template)$">
  Order allow,deny
</FilesMatch>

#Options -Indexes
#Options +FollowSymLinks

ErrorDocument 404 /index.php
DirectoryIndex index.php

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.php/$1 [L]
</IfModule>

まあ、Optionsの行をコメントアウトしただけです。編集が終わったら再度.htaccessをアップロードします。

/home/kumacchi/www/tools/gallery/dfg の中です。

フォルダの中にアップロードして下ください。FFFTPでフォルダの中を見ると下のようになっているはずです。

 XG001118

６．再度サイトにアクセスしてみる。

http://tools.kumacchi.com/gallery/dfg

今度は動いたが、なんだか問題があるようで、下のメッセージと共にここで止まってしまう。

Invalid cURL response.
We expected ‘true’ from the url : http://tools.kumacchi.com/gallery/dfg/api/rest/test_curl

XG001117

とりあえずいろいろ調べてみたのだけどよくわからない、php curlにさくらインターネットが対応していないのかと思ったのだがそういうわけではないようだった。<?php phpinfo（） ?>で確認してみるとちゃんと対応している。

そういうわけでいろいろググってみて、はまってるという記事は見つかっても解決方法が載っているところがなかなか見つからない、そんな中でとっても参考になったのが下のサイトの情報、ロシア語何で全く何を言ってるのかはわからないのですが、プログラムコードが書いてある所だけのぞいてみると何となく修正する箇所がわかりました。

◇php/json | Уголок Web-мастера | -= Allrussian.info =-
http://www.allrussian.info/thread.php?postid=1526661&sid=ca14643e58b4983baa2c554c382cebee#post1526661

７．プログラムソースを修正してみる。

◎install.phpの103行目
下のようになっているのを

$curl_url = ‘http://’.$_SERVER[‘SERVER_NAME’].substr($_SERVER[‘SCRIPT_NAME’],0,strpos($_SERVER[‘SCRIPT_NAME’],’/index.php’)). ‘/api/rest/test_curl’;

下のようにべた打ちで修正します。

$curl_url = ‘http://tools.kumacchi.com/gallery/dfg/index.php/api/rest/test_curl’;

 

◎/app/config/config.phpの18行目
下のようになっているのを

 

$config[‘base_url’]    = ‘http://’.$_SERVER[‘SERVER_NAME’].substr($_SERVER[‘SCRIPT_NAME’],0,strpos($_SERVER[‘SCRIPT_NAME’],’/index.php’)). ‘/’;

下のようにべた打ちで修正します。

$config[‘base_url’]    = ‘http://tools.kumacchi.com/gallery/dfg/index.php/’;

それぞれのパスは、自分の環境に合わせて書き換えてください。

それぞれ修正が終わったら元の場所に上書きでアップロードします。

８．再度サイトにアクセスしてみる

http://tools.kumacchi.com/gallery/dfg

とりあえず、何となく動き出したようです。(*´▽`*)ｖ

やけにシンプルな画面だなーと思っていたのですが、まあ、普通の人は見ない画面だからいいのかなーと思っていたのですが、実は後からスタイルシートやAjaxなどにパスがちゃんと通ってないことが判明これを直さないといろいろウェブからの管理機能が利用できなかったりするのでもうちょっと修正を行うことにする。

XG001119

９．さらにプログラムのソースを修正してみる

◎app/views/templates/header.phpの７行目～９行目

下記のようになっているところを

<link   type="text/css" href="<?php echo base_url() ?>/app/views/templates/ui/index.css" rel="stylesheet"  media="screen"/>
<script type="text/javascript" src="<?php echo base_url() ?>/app/views/templates/ui/scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>/app/views/templates/ui/scripts/script.js"></script>

べた打ちで修正します。
※PHPがわかる人はどこかで定義して指定するといいかも

 

<link   type="text/css" href="http://tools.kumacchi.com/gallery/dfg/app/views/templates/ui/index.css" rel="stylesheet"  media="screen"/>
<script type="text/javascript" src="http://tools.kumacchi.com/gallery/dfg/app/views/templates/ui/scripts/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="http://tools.kumacchi.com/gallery/dfg/app/views/templates/ui/scripts/script.js"></script>


修正が終わったら、保存して元の場所に上書きでアップロードします。

１０．再度サイトにアクセスしてみる

http://tools.kumacchi.com/gallery/dfg

うまくいきました。先ほどの画面がかっこよくなりましたｗ。(*`ω` *)ｖ

これでインストール作業を行えそうです。

XG001120

１１．データベースの設定

「dfGallery 2.0」はデータベースが必要なようなのでデータベースの設定を行います。MySQL、MySQLi、Postgreが選べるようですが、さくらインターネットはMySQLなのでそれを前提に設定を行います。

まず、さくらインターネットのコントロールパネルにログインしてデータベースの設定を確認します。
（※ここではさくらインターネットの共用レンタルサーバーを例に作業を進めますので、他のサーバーをご利用の場合はそれぞれサーバーの仕様に従ってください。説明自体は参考になるかと思います。）

さくらインターネットコントロールパネルログインページ
https://secure.sakura.ad.jp/rscontrol/

おなじみのこの画面から、ドメイン名とパスワードを入力してログインします。

XG001121

サーバコントロールパネルにログインすると、左側のメニューに下記のメニューがあるので、「データベースの設定」をクリック

XG001122

データベースをまだ作成していない場合は作成の画面になるので、「データベース接続用パスワード」を適当に決めて入力して。[送信する]をクリックしてください。

 XG001124

「データベース接続用パスワード」の設定が完了すると、データベースの設定画面になります。ここに表示される内容を利用します。

XG001125

上の画面を見ながら下の画面に入力していきます。コピー&ペーストが確実です。

hostname：mysql101.db.sakura.ne.jp（上の画面のデータベース サーバ）
Database Type：MySQL
username：kumacchi（上の画面のデータベース ユーザ名）
database：kumacchi（上の画面のデータベース名）
database prefix：kumacchi_（空でも問題ないとりあえずデータベース名に_をつけたものにしてみる。上の使い方の動画でもそうしているので）

XG001126

入力が終わったら、[Install the gallery]をクリック

なんか最初のphp_curlのエラーが出る場合があるかもしれないけどブラウザをリロードしてみてください。

うまくいったら下の画面が出ます。

とりあえずのusernameとpasswordがadminになっているようなので、覚えておいてください。

[here]をクリックします。

XG001127

１２．DfGallery 2.0の管理画面にログインします。

１１．で[here]をクリックするか

インストールしたパスのURLにアクセスすると下記のログイン画面が表示されるようになります。
http://tools.kumacchi.com/gallery/dfg

１１．の最後の画面でみたusernameとpasswordであるadminを入力して[Login]をクリックしてDfGallery 2.0の管理画面にログインします。

XG001128

ログインが成功すると下のような画面になります。

もしも[Upgrade]のリンクが表示されていたらとりあえず押しといてください。

XG001129

１３．パスワードを変更する

とりあえずパスワードがadminのままではセキュリティー的に問題があるのでパスワードを変更しましょう。

上の画面にある[Profile]をクリックするとパスワードの変更画面です。

パスワードの変更画面に入ったら、
old passwordに古いパスワード(admin)
new passwordとconfirm passwordに新しいパスワードを入力して、Update passwordをクリックしてパスワードを変更してください。

XG001133

パスワードの変更が完了したら、いったんログアウトして再度新しいパスワードでログインを行ってみてください。

１４．ギャラリーを追加する。

ギャラリーを追加します。ギャラリーはアルバム全体まとめたものになるもので、ギャラリーの中にさらにアルバムを作成します。アルバムはカテゴリみたいなものです。[Add Gallery]をクリックしてギャラリーを作成します。

XG001130

下の画面になるので Gallery Title：を指定します。とりあえずここでは、「kumacchi’s Gallery」としました。ThemeとSkinはデフォルトではstan ardしか選べないのでそのままにしておきます。ギャラリータイトルを指定したら[Create]をクリックします。

XG001131

ギャラリーが追加されました。さらに[Add Gallery]をクリックすると別のギャラリーを作成することができます。

XG001132

１５．アルバムを追加する

アルバムを作成するには、[albums]のリンクをクリックします。

XG001134

アルバムの画面に入ると、最初は何もないので、[add albums]をクリックしてアルバムを追加します。

XG001135

アルバムの追加画面に入ったら、
Album Title：にアルバムのタイトルここでは[ねこ]にします。
Type:はflickr、picasa、customから選べますが、前の二つはそれぞれのサイトとの連携機能で、独自のアルバム作成機能ではないので、ここでは割愛します。普通のウェブアルバムが作りたい場合は[custom]を選択します。

入力が完了したら、[Create]をクリックします。

 XG001138

これで、[kumacchi’s Gallery]ギャラリーに[ねこ]アルバムが追加されました。さらに、アルバム（カテゴリみたいなもの）を追加する場合は、[add albums]をクリックして同様に処理します。

XG001139

１６．写真をアップロードする

さて、アルバムが作成出来たら、今度は写真のアップロードです。

[ねこ]アルバムで[manage]をクリックします。

XG001141

[Upload]をクリックします。

XG001142

画像のアップロード画面になるので、Title(タイトル)、とアップロードするファイルを[参照]ボタンで指定します。タイトルは別に指定しなくても後から設定できます。

XG001143

[Add another field]をクリックすると入力行を増やすことができます。押した回数だけ行が増えるので一度に複数のファイルをアップロードする事ができます。

下のような感じで、行が増えます。

XG001144

実際に、ファイルを指定して、[Upload images]をクリックしてみます。

XG001145

と思ったら、一個目でぐるぐるまわったまま終わらないので、調べてみるとこれまたソースの修正が必要っぽい

XG001146

◎app/views/admin/manage/upload.phpの２行目を修正
下記のようになっているので

<script type="text/javascript" src="<?php echo base_url() ?>/app/views/templates/ui/scripts/jquery_ajaxfileupload.js"></script>

下記のように修正します。

<script type="text/javascript" src="http://tools.kumacchi.com/gallery/dfg/app/views/templates/ui/scripts/jquery_ajaxfileupload.js"></script>

修正が完了したら、保存して元の場所に上書きでアップロードします。

再度、アップロードをやり直すと、順次画像のアップロードが行われ

XG001147

下記のようにアップロードがすべて完了します。

XG001148

１７．最後にまとめてソースの修正 ※パスは自分の環境に合わせてください。

◎app/filters/init.phpの

３７行目を

define ( ‘RESOURCES_FOLDER’, dirname ( FCPATH ) . ‘/resources/’ );

下の様に修正します。フルパスでパスを指定します。

define ( ‘RESOURCES_FOLDER’, ‘/home/kumacchi/www/tools/gallery/dfg/resources/’ );

４７行目を

define ( ‘RESOURCES_FOLDER_URI’, $CFG->slash_item ( ‘base_url’ ) . ‘resources/’ );

下記のように修正します。

define ( ‘RESOURCES_FOLDER_URI’, ‘http://tools.kumacchi.com/gallery/dfg/resources/’ );

◎app/views/admin/gallery/generate.phpの

１６行目の

code +=’\n\t<param name="movie" value="<?php echo $server_url ?>DfGallery.swf" />’;

を下記のように修正します。

code +=’\n\t<param name="movie" value="http://tools.kumacchi.com/gallery/dfg/DfGallery.swf" />’;

２０行目の

 

code +=’\n\t<embed src="<?php echo $server_url ?>DfGallery.swf" quality="high"’;

を下記のように修正します。

code +=’\n\t<embed src="http://tools.kumacchi.com/gallery/dfg/DfGallery.swf" quality="high"’;

それぞれ編集が終了したら、保存して、元の場所に上書きアップロードしてください。

１８．アルバムを表示するためのタグを取得する

ギャラリーの画面で、<embed>のリンクをクリックします。

XG001149

タグを生成する画面に入ったら、Widthに表示するアルバムの幅、Heightに表示するアルバムの高さを指定して[Generate Code]をクリックすると、タグが生成されるので、タグをコピーしてウェブサイトやブログに貼り付けます。

ブログなどの場合は、500pxなどと、ブログのサイズに合わせて設定するといいと思います。

ここでは専用のページに張り付けるので、100%で高さと幅を指定しました。

XG001150

生成したタグを張り付けたindex.htmlファイルを作成して
/home/kumacchi/www/tools/gallery
にアップロードした。

<html>
<head>
<title>kumacchi’s Gallery</title>
</head>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%">
<param name="allowFullScreen" value="true" />
<param name="movie" value="http://tools.kumacchi.com/gallery/dfg/DfGallery.swf" />
<param name="quality" value="high" />
<param name="FlashVars" value="xmlUrl=http://tools.kumacchi.com/gallery/dfg/index.php/api/rest/get_gallery/1/json" />
<embed src="http://tools.kumacchi.com/gallery/dfg/DfGallery.swf" quality="high"width="100%" height="100%" FlashVars="xmlUrl=http://tools.kumacchi.com/gallery/dfg/index.php/api/rest/get_gallery/1/json" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>

１９．アルバムにアクセスしてみる

実際にアルバムが表示できるかアクセスしてみる。

http://tools.kumacchi.com/gallery/

XG001151

どうやらうまくいったようです。

基本的な機能はこのような感じです。後は自分でいろいろ弄ってみてください。

お疲れ様でした。

つかれた つ´Д`)つ

(Visited 160 times, 1 visits today)

タグ :

カテゴリ： PC・インターネット