Dec 09, 2005

Mac OS XでWebフォトギャラリーサービスを作ろう

Panther



 今開発中の商品写真やデザインとか、サークルの記念写真、イベントの記録アルバム、そんな画像をインターネットで共有できたら、仕事はかどるよなぁ、みんなで盛り上がれるよなぁ、なんて思うこともあるわけです。

 htmlの知識があったり画像処理ソフトの知識があれば、こうしたフォトアルバムを作ることはできますけれども、仕事やサークルの仲間みんなが知識を持っているとは限りません。みんなでアルバムを作ったり共有したりするのはなかなかむずかしいものです。おまけに他の人には見られたくないプライベートな写真があったりなんかすると、管理がとてもややこしそうに思えてきます。

 オープンソースウェアとして開発されているCoppermineという高機能Webフォトギャラリーソフトをインストールすれば、MacOSXでとても便利なフォトギャラリーをみんなで使うことができるようになります。ここではMac OS X(Panther)にCoppermineをインストールして、Webフォトギャラリーサービスを提供する方法を考えていきます。


Coppermine Photo Gallary

Coppermine Photo Gallaryのデモサイト



こんなサービスを起動できます。

 Coppermine Photo Gallaryは高機能です。とりあえず私レベルで理解できる分でもこんなにあります。スゴイ魅力的(これでiPhotoと共有できたらもう最高っていうところなんですがね)。写真を個人やグループで共有できたり、個人だけのプライベートアルバムが作れたり、だれでもユーザー登録できたりと充実のサービスです。

  • ユーザー管理(投稿可能ユーザー/不可能ユーザー)
  • プライベート写真の管理(閲覧可能/不可能)
  • 画像の自動縮小拡大
  • スライドショー機能
  • コメント機能
  • 投票機能
  • メール通知機能
  • FTPやWebDAVをつかった複数画像一括アップロード、アルバム化機能
  • MySQLで扱えるデータなら音声(MP3,wave)でも動画(mov, fla)でもなんでもこい。
  • 有名な伝言板phpBBやYaBBなどとユーザー管理を共有可能。


 Coppermine Photo GallaryもPHP言語でできています。おかげでインストールも楽々です。日本語もちゃんと使えます。ここではCoppermine Photo Gallary1.4.2をMac OS X10.3.9にインストールしていきます。このステップをはじめる前に、最低限、

をすませている必要があります。



必要なもの

  • Mac(Mac OS Xを搭載しているもの。ここは10.3.x(Panther)で進みます)
  • Safari(またはShiira, Firefox, Mozilla, Omniweb, iCab, Camino, InternetExploreなど)
  • miエディタ
  • やる気
  • Readmeを読む努力
  • オープンソースコミュニティへの感謝
  • セキュリティーへの配慮
  • インターネットを構築してくれた方々への畏敬の念



Coppermine Photo Gallaryのダウンロード

 まずはCoppermine Photo Gallary(略してcpgと呼ぶようです)をダウンロードします。

  1. SafariでCoppermine Photo Gallaryへ移動します。



  2. 上の方に"Downloads"とありますので、そこをクリックしてダウンロードサイトに進みます。



  3. おなじみSourceForgeに移動します。



  4. ページ中程にあるCoppermineのDownloadsをクリックします。



  5. ファイルをダウンロードする二歩手前ぐらいのページに移動します。ながいなぁ。



  1. ページ中程の"cgp1.4.2.zip"と書いてあるところをクリックして先に進みます。



  2. えーと...ダウンロード先を選択するページが表示されます。



  3. すきなサイトを選んでダウンロード実行です。



  4. さらにダウンロード実行待ちのページに移動しますので、しばらく待ちます。しばらく待つと自動的にダウンロードが実行されます。ステップ多いんですよ。

    しばらく待っていると...


    ダウンロードが始まります。始まらない場合はYour download...以下のリンクをクリック。


  5. ダウンロードが完了するとデスクトップに"cpg1.4.2.zip"というファイルができますのでダブルクリックして展開します。





  6. デスクトップに"cpg142"というフォルダが出来上がっていればダウンロードの作業は終了です。



  7. cgp142フォルダの名前を好きな名前に変更してしまいます。ここがURLに含まれることになるので、短くてしゃれた名前の方がいいと思います。ここではphotoと名前を付けてみました。

    コレを




Coppermineの配置

 Coppermineを配置します。Webで表示できる場所にしないといけませんので、Mac OS X (PantherやTiger)では/Users/ユーザーネーム/Sites内か、/Library/Webserver/Documents内かのどちらかになります。設置はどちらでもかまいません。違いは前者ならhttp://あなたのドメインネーム/~ユーザーネーム/photoでアクセスできて、後者ならhttp://あなたのドメインネーム/photoでアクセスできるというとこです。ここではあえて/Users/ユーザーネーム/Sites内に設置するようにしていきたいと思います。

  1. デスクトップの"cpg142"フォルダを/Users/ユーザーネーム/Sites内に移動させます。



  2. 移動させたらサイトフォルダを開いて、なかにちゃんとphotoフォルダが入っていることを確認します。



  3. photoフォルダを開いて、中からalbumsフォルダとincludeフォルダを探します。



  4. albumsフォルダとincludeフォルダにアクセス権を設定します。それぞれのフォルダをマウスでクリックして選択したら、Finderのメニューから情報を見るを実行します。



  5. 情報ウィンドウが開きます。所有者とアクセス権のところが以下のようになっているはずです。



  6. 所有者とアクセス権を、その他/読み書きに、グループ/読み書きに変更します。



  7. 「内包している項目に適用する...」を必ず押します。




  8. 忘れずに、includeフォルダにも同様のアクセス権を設定します。ただしincludeの方は内包する項目に適用する...はしなくても大丈夫です。



  9. これで設置の作業は終了です。



MySQLにCoppermine用のユーザーを作る。

 Coppermineは画像データなどの管理にMySQLを使用します。Coppermineを使えるようにするには、まずMySQLにユーザーを作っておかないといけません。すでにMySQLにユーザーを作ってある場合はこの作業を飛ばしてください。

  1. Coppermineはデータの管理にMySQLを使います。なのでMySQLにCoppermine用のユーザーを作っておく必要があります。safariからphpMyAdminをひらきます。すでにユーザーを作ってあったらこの作業は要りません。




  2. 特権をクリックします。



  3. 特権を設定するページになります。



  4. "ユーザーの追加する"をクリックします。




  5. "ユーザーの追加する"ページになります。




  6. ユーザー名、ホスト、パスワードを入力します。ここではユーザー名をhogehoge、パスワードをtsukaitaipasswordと入力してあります。


    ホスト名はポップアップから「ローカル」をえらべば自動的に入力されます。


  7. グローバル特権を設定します。SELECT, INSERT, UPDATE, DELETE, FILE, CREAT, ALTER, INDEX, DROP, CREATE TEMPORARY TABLESにチェックをつけておきます。



  8. 実行するを押します。





  9. "ユーザーを追加しました"とでますので、これでphpMyAdminでの作業は終了です。




MySQLにCoppermine用のデータベースを作る

 MySQLにこれからCoppermineが画像やコメント、ユーザーIDなどを管理するのに使うデータベースを作っておきます。

  1. SafariからphpMyAdminをひらきます。




  2. メニューから"データベース"を探してクリックします。



  3. データベース画面になります。



  4. 下の方にある「新しいDBを作成します」にこれからCoppermineで使うのデータベース名
    を決めて入力します。ここではcoppermineと入力しました。入力したら作成を押します。名前はなんでもいいですが、後で使いますので忘れないように。



  5. データベースcoppermineを作成しました、という具合に出れば完成です。



  6. これでMySQLにデータベースを作成する作業は終了です。



ImageMagickのインストール

 Coppermineは投稿された画像を処理するのにUnixなどで一般的な画像処理ライブラリというのを使います。すでにここまで来るステップ(Mac OS XにEntropyPHPをインストールしよう)でEntropyPHPをインストールしてありますので、GDという画像処理ライブラリが使えるようになっているのですが、処理された画像の美しさという点ではImageMagicが優れている部分があるのだそうです。ここではFinkを使ってMac OS XにImageMagickをインストールして、Coppermineでよりきれいな画像を扱えるようにしていきたいと思います。

  1. アプリケーションフォルダを開いて、FinkCommanderを起動させます。



  2. FinkCommanderのウィンドウの中から、Imagemagickを探します。



  3. imagemagickという名前が付いているのが2つありますが、ここでは"imagemagick-nox"の方をバイナリーインストールしていきます。

    imagemagick-noxを選択して左上のボタンでインストールを実行。


  4. ざざざざーーーとimagemagickのダウンロードとインストールが始まります。



  5. Doneとでれば終了です。これでimagemagickのインストール作業は終了です。




Coppermineのインストール

 いよいよCoppermineのインストールを開始します。phpで親切にインストールスクリプトを作ってくれているのでとても簡単です。

  1. Safariで以下のURLを開き、インストールスクリプトを動かします。ここでは/Users/ユーザーネーム/Sites/にphotoという名前でCoppermineを設置したので、

    http://あなたのドメインネーム/~ユーザーネーム/photo/install
    または
    http://127.0.0.1/~ユーザーネーム/photo/install

    です。

    /Library/Webserver/Documetnsにインストールしたばあいは
    http://127.0.0.1/photo/install
    ですね。



    ここではhttp://127.0.0.1/~ユーザーネーム/photo/installで進めていきます


  2. Coppermineのインストールがページが開きます。いやっほー。



  3. まずUsernameのところにCoppermineの管理者名をいれます。ここではhogehogeといれました。管理者パスワードは好きなパスワードを考えていれてください。ここではsukinapasswordといれました。Emailのところには管理者のEmailアドレスを入力します。



  4. つづいてMySQLのための設定をします。MySQL Hostはlocalhostのままでオッケーです。MySQL Database Nameは前のステップで作成したデータベース名をいれます。MySQL Usernameは前のステップで作成したユーザー名を、MySQL Passwordにはそのとき設定したパスワードを入力します。MySQL Table prefixはいじらなくても大丈夫です。
    ここではここまでのステップでデータベース名にcoppermine、ユーザー名をhogehoge、パスワードをtsukaitaipasswordと設定してきているのでその通り入力してあります。



  5. 最後にImageMagickがどこにあるかを入力します。画像処理にImageMagickではなくてGDを使うときはなにも入力しなくてもよいです。



  6. ImageMagickは前のステップでFinkによって/sw/bin/内にインストールされていますので、ここには以下のように入力します。

    /sw/bin/




  7. 全ての入力が終了したら"Let's Go!"を押してインストール実行です。



  8. インストール完了の表示が出れば、無事成功した証拠です。イエー。



  9. "Let's continue!"を押して先に進みます。


  10. ログイン画面の後、見事にCoppermineのトップページが出ます。おお、ばっちり。



  11. これでインストール作業は完了です。



Coppermineの設定

 Coppermineの設定をしていきます。ここでは全ての設定についてはふれませんが、とりあえず日本語にしてしまえばだいたいの項目は理解できるようになります。

  1. 左上にあるConfigボタンをクリックして設定画面に移動します。



  2. 設定画面が開きますので...



  3. うえから二つ目Language & Charset settingsをクリックします。



  4. Languageの設定が開きます。



  5. LanguageをJapaneseに設定します。



  6. 設定したらページの一番下にある Save new configurationを押して設定を有効にします。



  7. 設定がアップデートできましたという表示が出ますので、CONTINUEをおして先に進みます。すると...



  8. 日本語になったトップページがばばーーんと表示されるはずです。




  9. もう一度Configを押して設定画面に進むと、今度は設定項目が日本語になって表示されるので、どういう設定なのかわかりやすくなってきます。一つ一つよく見ながら、自分のサーバーにあった設定をしてみてください。



  10. たとえば「一般設定」ギャラリーのタイトルなどを決めてしまいましょう。

    文字化けが起きる場合はこのページの最後を参考にしてみてください。


  11. ユーザー設定を上手におこなうと、登録制で誰でも自由に投稿できるようにしたり、自分の専用アルバムを作ることができるようになります。この機能がとても嬉しいです。ただし、登録の際、メールでの承認をするようにしておかないと、どこの誰だかわからない人が勝手にアルバムを作ってしまったり、勝手にプライベートなアルバムをのぞいたりするようになってしまうかもしれません。




動作確認

 実際に画像の投稿ができるか試してみましょう。

  1. ログイン後、まずこれから画像を投稿する為のアルバムを作ります。メニューの「アルバム」をクリックします。



  2. アルバム管理ページになります。



  3. 下にある「新規作成」を押して新しいアルバムを作成します。



  4. 「新しいアルバム」という文字が出ますので、ここを好きな名前に変えてあげます。変えたら「変更を適用」を押して先に進みます。

    新しいアルバムとありますので、


    コレを好きな名前に。


    忘れずに適用を...。


  5. 新しいギャラリーができます。トップページにまだなにも入っていないアルバムがあることを確認しましょう。文字化けしている場合はこのページの一番最後を参考にしてみてください。



  6. 次にページ上部にある「ファイルのアップロード」をクリックして、画像を登録していきます。



  7. ファイルを選択を押して、アップロードしたい画像を指定します。指定したら次に進みます。

    好きな画像を選びます。




  8. アップロード完了と出たら完成です。「続く」をクリックして先にすすみます。



  9. ファイルの内容を入力するページになります。



  10. 良く忘れるのですが、アップロードしたいアルバムを選びます。



  11. ファイル名とファイルの説明などをいれます。入力が完了したら続けるを押します。アップロードした画像の分だけこの作業を繰り返します。



  12. ファイルが正常にアップロード...と表示されたら完了です。続けるを押して先に進みます。



  13. トップページにアルバムとして画像が表示されればばっちりです。



文字化けが起きているときは?

  1. ギャラリー名などが文字化けするような場合は/usr/local/php/libにあるphp.iniの設定のせいかもしれません。「Mac OS Xでオンラインショップを作ろう」でmbstringまわりを変更していると、文字化けが起こるようです。デフォルトでEUC-JPになるように設定している為にちょっとしたすれ違いが起きるようです。そんなときは「Mac OS Xでオンラインショップを作ろう」で変更した"register_globals = On"以外の設定を元に戻してみてください
  2. もしくはCoppermineのLanguageのCharacter Encoding設定をUTF-8からEUC-JPやShift-JISなどに変更するという方法もあるかとおもいます。ただし、ここを変更すると、既にアップロードしたファイル等の名前が文字化けするようになるかもしれません。







Trackback

No Trackbacks

Track from Your Website

http://earlybirds.ddo.jp/namahage/inegalog/trackback/tb.php?id=26
(言及リンクのないトラックバックは無視されます)

Comments in Forum

Discuss