2011年10月30日

Heroku上にredmine(1.2.1)を構築してみた。


個人的にredmineを使ってのプロジェクト管理について興味を持ったので、Heroku上に構築してみることにしました。
Ruby on Railsの知識は皆無でしたが、色々と調べるなどして無事にDeployすることができました。

http://d.hatena.ne.jp/alpha_neet/20111027/1319748428を大変参考にさせていただきました。この場を借りて感謝します。。。

環境など

  • Mac OS X 10.6.8
  • ruby 1.8.7
  • redmine 1.2.1
  • gem 1.3.7
  • rails 2.3.11

rvmのインストール|複数のバージョンのrubyを管理する。

redmineでは、最新バージョンよりも少し古いRubyを使用しないと上手くいかないということでした。
そこで、rvm(Ruby Version Manager)を使って、複数のバージョンのrubyを用途に合わせて使用できる環境を作ります。

rvmのサイト(http://beginrescueend.com/)にアクセスしてみると、rvmの導入方法が書かれていました。
説明の通りにターミナルを使って、
bash < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer)
を実行すると、インストールされます。

これによって、ターミナルで[rvm]コマンドが使えるようになる!・・・と思いきや、上手く動作しなかったので、ターミナルに以下を打ち込んで実行します。
echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm" # Load RVM function' >> ~/.bash_profile
さらに続けて以下も実行。
source .bash_profile
これで、やっとのこさrvmコマンドが使えるようになりました。
果たして本当に使えるのか?を確かめるためには、ターミナルで以下のコマンドを実行すればわかります。
type rvm | head -1
=>「rvm is a function」とでれば、無事にrvmが使えるということです!

Rubyのインストール|rvmを使ってRubyをインストールする。

いよいよ、rvmを使って、Rubyを導入します。ここではRubyの1.8.7バージョンを使うので、ターミナルで実行するrvmコマンドは以下になります。
rvm install 1.8.7
ダウンロード、インストールには多少の時間が必要となります。気長に待ちましょう★

無事に完了したら、PCにdefaultで使うRubyのバージョンを指定しておきます。これにもrvmコマンドを使います。引き続きターミナルで以下を実行してください。
rvm --default use 1.8.7
これで、使用するバージョンの指定は完了。

RubyGemsのバージョンを変更する|Ruby言語用のパッケージ管理システム

Rubyをインストールすると、自動でRubyGemsというものも導入されています。
Rubyを使い倒すために便利なライブラリやツール群を簡単にインストールや利用、管理してくれるのが、このRubyGemsです。
正式名はRubyGemsですが、基本的には「gem」と呼ばれます。現在(2011/10/30)の最新バージョンは1.8.10なんですが、ここでは1.3.7を使用します。
ターミナルで以下を実行すると、gemのバージョンを確認することが出来ます。
gem -v
自分の場合は、「1.8.10」と出てきてしまい、1.3.7ではなかったため、バージョンを変えないと行けませんでした。
RubyGemsをバージョンダウンするためには、gemを使って「rubygems-update」をインストールしなくてはなりません。以下をターミナルで実行して、このrubygems-updateをインストールします。
gem install -v 1.3.7 rubygems-update
これで、rubygems-updateを使用できます。「-v 1.3.7」で、ダウンしたいgemのバージョンを指定します。
つづいて、rubygems-updateのコマンド「update_rubygems」を使って、gemのバージョンをダウンします。
update_rubygems
ちゃんとgemのバージョンがダウンしたかどうかを、改めて確認します。
gem -v
「1.3.7」と表示されたので、僕の場合はOKでしたが、ここで躓くことがよくあるようです。。。

rails、sqlite3をインストールする

着々と環境が整ってきました。
次にローカルPCへの作業環境の整備とrailsのインストールを行います。
私の場合は、以下の場所に「workspace」というディレクトリを作成し、その中にアプリケーションを入れていくことにしました。

workspace.png
作業環境スペースの例

上記の画像はあくまでも例なので、都合の良い場所にディレクトリを作成すればよいと思います。
それでは、ターミナルを使ってディレクトリを作り、そのディレクトリに入ります。
mkdir workspace
cd workspace
「workspace」ディレクトリに入ったら、次にRailsをインストールします。今回はRailsのバージョンを2.3.11に指定したいので、2.3.11バージョンを指定する形でインストールします。以下をターミナルで実行してください。
gem install rails -v=2.3.11
これで、railsがインストールされました。続いて、データベースに使うsqlite3もインストールします。
gem install sqlite3-ruby
sqliteは、MySQLと同様のデータベース管理システムで、小規模のアプリケーションには十分なものです。
もちろんMySQLも使うことが出来ます。(ここでは、MySQLは使用しませんが・・・)

redmineを作業ディレクトリに入れる。

続いて、redmineをダウンロードしてローカルディレクトリに入れます。
私の場合は、「workspace」ディレクトリの中に個人「projects」ディレクトリを作成し、その中にダウンロードしたzipファイルを入れました。
redmineのzipファイルは下記にアクセスすることで手に入れることが出来ます。

http://rubyforge.org/frs/download.php/75099/redmine-1.2.1.zip

ダウンロードしたファイルをその場所で解凍しておきます。「redmine-1.2.1」という名前のディレクトリができると思います。

database.ymlの設定を行う。

次に、[redmine1.2.1/config/database.yml]にある、database.ymlファイルの中身を編集します。
先ほどsqlite3をインストールしたので、sqlite3を使う旨を設定としてこのdatabase.ymlに書き込みます。
production:
  adapter: sqlite3
  database: db/production.sqlite3

development:
  adapter: sqlite3
  database: db/development.sqlite3

test:
  adapter: sqlite3
  database: db/test.sqlite3
このdatabase.ymlは、Railsアプリにおいてデータベースを設定するためのファイルです。
「production(本番用)」「development(開発用)」、「test(テスト用)」の3種類の設定ができ、実行モードを変えることで、それぞれの設定を切り替えて使うことができます。上記の用に書けば、sqlite3を用いる際の設定としては問題ありません。

bundle installコマンドを使う

Railsではbundle installコマンドを使うことでプロジェクトで必要とされるモジュールを一括でインストールすることができます。
このbundle installコマンドを使うためには、予め以下を実行する必要があります。
gem install bundle
bundle installコマンドでインストールしたいものは、プロジェクトディレクトリの中に「Gemfile」という名前のファイルを作り、編集する必要があります。
以下を実行してGemfileを作り、ターミナル上で編集しましょう。
vim Gemfile
Gemfileに書き込む内容は以下になります。
source 'http://rubygems.org'

gem 'rails', '2.3.11'
gem 'i18n', '0.4.2'
gem 'rubytree'
gem 'coderay', '~>0.9.7'
Gemfileが整った状態で、ターミナルでbundle installコマンドを実行します。
bundle install
どしどしとインストールされるはずです。。。

session_store.rb ファイルを生成する

redmineでセッションデータを安全に扱うための秘密鍵が含まれる config/initializers/session_store.rb ファイルを生成します。
ターミナルで以下を実行して下さい。
rake generate_session_store
これでconfig/initializers/session_store.rb が出来ているはずです。

データベースの更新作業を行う

先ほど設定したデータを基に、データベースの更新作業を行います。以下をターミナルで実行してください。
RAILS_ENV=production rake db:migrate
RAILS_ENV=production rake redmine:load_default_data
実行をすると、
Select language: bg, bs, ca, cs, da, de, el, en, en-GB, es, eu, fa, fi, fr, gl, he, hr, hu, id, it, ja, ko, lt, lv, mk, mn, nl, no, pl, pt, pt-BR, ro, ru, sk, sl, sr, sr-YU, sv, th, tr, uk, vi, zh, zh-TW [en]
と問われるので、「ja」と答えます。ここで、使用言語を設定することになります。

この操作では、database.ymlにおけるproductionの設定に基づいてデータベースを更新しています。
redmine:load_default_dataと指定することで、デフォルトの内容をある程度揃えてデータベースを設定してくれます。

ローカル上で実行してみよう!

いよいよredmineをローカル上で実行してみます。起動させるには、以下のコマンドを使用します。
ruby script/server webrick -e production
私の場合は、「http://0.0.0.0:3000」にアクセスすればローカルでredmineを動かすことが出来ました!やった!
スクリーンショット(2011-11-01 22.07.53).png

Herokuにデプロイするための準備

Herokuにredmineをあげるために、redmine内のファイル構成をいくつか編集する必要があります。
以下のコマンドを実行して、必要となるディレクトリを作成します。
mkdir tmp/files
mkdir tmp/plugin_assets
さらに作成したディレクトリ内が空であると、gitが上手く機能しないため、dummyファイルを作っておきます。
touch tmp/files/dummy
touch tmp/plugin_assets/dummy

続いて、何個かのファイルをガリガリ編集します。ターミナル上で編集してもよいんですが、私は慣れているエディタで直接編集しました。
lib/redmine/menu_manager.rbを編集
「@last_items_count = 0」の下に、「@childrenHash ||= {}」を追加する。
@last_items_count = 0
@childrenHash ||= {}
lib/redmine/menu_manager.rb内

app/models/attachment.rbを編集
「@@storage_path = Redmine::Configuration['attachments_storage_path'] || "#{RAILS_ROOT}/files"」を書き換える。
@@storage_path = Redmine::Configuration['attachments_storage_path'] || "#{RAILS_ROOT}/files"
@@storage_path = Redmine::Configuration['attachments_storage_path'] || "#{RAILS_ROOT}/tmp/files"
app/models/attachment.rb内

vendor/plugins/engines/lib/engines.rbを編集
「self.public_directory = File.join(RAILS_ROOT, 'public', 'plugin_assets')」を書き換える。
self.public_directory = File.join(RAILS_ROOT, 'public', 'plugin_assets')
self.public_directory = File.join(RAILS_ROOT, 'tmp', 'plugin_assets')
vendor/plugins/engines/lib/engines.rb内

config/environment.rbを編集
「Rails::Initializer.run do |config|」の下にいくつか追加する。
Rails::Initializer.run do |config|
 config.action_controller.session = { 
    :key => "_myapp_session", 
    :secret => "適当な文字列" 
}
config/environment.rb内

.gitignoreを編集
「.gitignore」を以下の内容にする
/.project
/.loadpath
/config/additional_environment.rb
/config/configuration.yml
/config/database.yml
/config/email.yml
/config/initializers/session_store.rb
/coverage
/db/*.db
/db/schema.rb
/files/*
/lib/redmine/scm/adapters/mercurial/redminehelper.pyc
/lib/redmine/scm/adapters/mercurial/redminehelper.pyo
/log/*.log*
/log/mongrel_debug
/public/dispatch.*
/public/plugin_assets
/tmp/cache/*
/tmp/sessions/*
/tmp/sockets/*
/tmp/test/*
/vendor/rails
*.rbc
.gitignore内

heroku上にアプリをつくる

gem install heroku
git init
heroku create 'プロジェクトの名前'
加えて、heroku上のrubyのバージョンも設定しておきます。
heroku stack
heroku stack:migrate bamboo-ree-1.8.7

いよいよheroku上にコミット!!

git add .
git commit -m 'first commit'
git push heroku master
heroku rake db:migrate
これでやっとのこさ、heroku上にredmineが置けました。
ターミナル上で、
heroku open
と実行すれば既定のブラウザでアクセスできます。

プロジェクトマネジメントにredmineがどのくらい使えるかはわかりませんが、無事にredmineを使える状態になりホットしました。

2011年10月10日

AGESTOCK2011を見てきました。


AGESTOCK2011 in TOKYO DOME CITY HALLを見てきました。

高校、大学の友人たちと一緒に、お客さんとして見るAGESTOCK。 昨年もたくさんの友人たちがAGESTOCKに足を運んでくれましたが、運営スタッフであったために、彼らの楽しむ様子や表情を見ることはできませんでした。

今回一番うれしかったのは、わざわざ足を運んでくれた友人たちの、AGESTOCKのステージを見つめる姿が、本当に楽しそうであったことです。

彼らの笑顔、手を挙げて盛り上がる姿や感動で言葉を失う姿に、AGESTOCKが存在する理由や、続いていく理由を感じられました。



そして、もう1つうれしかったこと。



それは、自分が昨年Ageメンバーとして駆け抜けた意味一緒にAgeを引退した同期のみんなと過ごした時間の意味を再確認できたことです。

久しぶりに会っても、同期のメンバーには頭が下がるというか、
あの時、あの場面でお世話になったとか、ありがとうと言いたくなる気持ちが自然と湧いてきます。AGESTOCK2011のステージを見ていて、昨年のことを色々回想しました。
いい仲間を持ったのだと、改めて感じるのです。



Ageでの生活が終わり、時間が出来ると新しい時間が増えます。



これまであまり絡むことの少なかった身近な人々との時間、新しいことを学び、打ち込む時間。
Age2010が終わってから、Ageとは違う場所で大きな力を注ぎ、惜しみない努力をし、大きな成果をあげる学生を数多く見てきました。
大学生の可能性にこだわり、挑戦してきた自分が、多くの同世代に大学生の可能性や挑戦する姿を見せつけられる。。。
そんなこともしばしばでした。

自分たちがAgeStock2010で伝えようとしたこと、
後輩たちからAGESTOCK2011で伝えられたこと。

それを胸を張って表現できる、体現している人間になるべく、
夢を持って、ひたすらに努力を重ねていかなければ、、、
AGESTOCK2011が改めて感じさせてくれました。

これでまた1年間がんばれそうです!
AGESTOCK2011の皆さん、本当にありがとう!
本当に本当に、最高でした!


2011年7月30日

メディア技術基礎(ネットワーク・画像処理)最終課題


いよいよ、メディア技術基礎(ネットワーク・画像処理)最終課題について記入させていただきます。

まず、最終課題制作にあたって、私は以下のような設計図を提出しました。

断面図.png
正面図や断面図はこちらをご覧ください。

はじめにこの設計図に基づいて制作した改造FlickrViewerについて説明したいと思います。

改造FlickrViewerの概要について

デバッグした直後に表示されるウィンドウは以下になります。

スクリーンショット(2011-07-30 13.20.36).png
デバッグ直後に表示されるウィンドウ

ほぼ、設計図と同様のレイアウト、機能を持った形を実現することができました。

スクリーンショット(2011-07-30 13.23.02).png
撮影された年を指定することが出来るフォーム

左上には、撮影された年を指定することのできる入力フォームを設置。

スクリーンショット(2011-07-30 13.22.53).png
画面をクリアするボタン

右上には、表示された画像をクリアするためのボタンを設置しました。

このFlickrViewerでは、撮影年を入力しても、しなくても検索が可能です。
撮影年はデフォルトの状態で、「Japan」というキーワードで検索すると、以下のように写真を取得、表示できます。

スクリーンショット(2011-07-30 13.53.37).png
撮影年は表示されたものから変えずに、「Japan」で検索した。

設計図通りに、取得した画像はタイル状に表示させています。
では次に、撮影年を指定した状態で画像を検索することにします。

スクリーンショット(2011-07-30 14.02.31).png
撮影年を2000年に指定した。

「Japan」というタグがついた、2000年に撮影された画像を取得します。
これによって、

2000年 1月1日 00:00:00〜2000年 12月31日 23:59:59

の間に撮影された写真を手に入れることが出来ます。
この結果、以下のように写真を手に入れることが出来ました。新たに検索をすると、先ほど検索して表示した画像の上に上書きされる形で表示されます。

スクリーンショット(2011-07-30 14.02.15).png
撮影年を2000年に指定した上で、「Japan」タグのついた画像を検索

そして、表示された画像は、右上のCLEARボタンを押すことでクリアすることができます。

スクリーンショット(2011-07-30 14.11.38).png
クリアボタンを押すことで、画面をクリアする。

以上が、改造したFLickrViewerの概要になります。

ソースコード、工夫した点

続いて、実装する上でのソースコードや工夫した点について説明したいと思います。

1. 写真をタイル状に並べる
 授業テキストでは、円状に写真を表示していましたが、シンプルに画面いっぱいにタイル状に表示されるように改造しました。画像の描画についてプログラムをしている「FlickrPhotoPanel.java」内を改造しました。
//取得した写真の枚数を格納
int photoNum = photoImgList.size();
if(0 < photoNum){
    for(int i=0; i<photoNum; i++){
        //写真の番号を9で割った際の余りの数で、列を指定する
        int amari = i%9;
        int x = (int)(0 + 75*amari);
        //写真の番号を9で割ることで行を指定する
        int count = i/9;
        int y = (int)(0 + 75*count);
    }
}
FlickrPhotoPanel.java
描画できるウィンドウは、横675px、縦300pxと指定しました。
また、Flickrから取得する画像のサイズは、縦横75pxです。このサイズの画像がウィンドウに隙間なくぴったりと埋まるためには、ちょうど54枚の画像を必要とする計算になります。
よって、FlickrAPIへパラメータ指定する際にこのサイズにぴったり画像が埋まるように、最大54枚を取得するよう設定しました。
そこで、取得した画像54枚を左上から順にタイル状に埋めていくわけですが、上から何枚目の写真であるかによって、描画する位置を指定するプログラムを書きました。(上記プログラム参照)

2. 描画されている画像をクリアする
 次に、一度描画した画像をクリアする機能について説明します。クリアといっても、実際に行っているのは"強制的に取得した画像を0枚としたこととして、画面上を再描画する"ということです。
この際にポイントとなるのは、".clear()"というメソッドです。
photoImgList.clear();
 photoImgListは、取得した画像の配列をリストとして格納している変数なので、上記のプログラムによって格納している画像のリストをすべて消してしまいます。
 この".clear()"を生かし、FlickrPhotoPanel.javaの中に、photsClear()というメソッドを用意しておきます。これを後からCLEARボタンと結びつけるのです。
public void photosClear(){
	//画像のリストデータをここでリセットする。
	photoImgList.clear();
} 
FlickrPhotoPanel.java内に、以下のメソッドをセットしておく

 一方で、CLEARボタンの描画については、以前授業でも登場したJButtonクラスを利用します。後で、このボタンに対応したイベントを発生させることが出来るよう、setActionCommandメソッドを用いて、アクションコマンドを登録しておきます。
clearButton = new JButton("CLEAR");
clearButton.addActionListener(this);
//CLEARボタンにアクションコマンドを登録しておく
clearButton.setActionCommand("CLEAR");
FlickrViewer.java内に、ボタンの描画などをセット

ボタンの描画が完了したら、CLEARボタンが押された際のイベントを設定します。
public void actionPerformed(ActionEvent e){
    //どのボタンが押されたかを確認する
    String cmd = e.getActionCommand();
    //もしCLEARボタンが押されていたら、以下を実行
    if(cmd.equals("CLEAR")){
        //先ほど作成したphotsClear()メソッドを呼び出して画像の配列リストをクリアする
        this.flickrPhotoPanel.photosClear();
    }else{
        ここでは省略
    }
    //セットした画像のリストデータに基づいて再描画する。
    this.flickrPhotoPanel.repaint();
}
FlickrViewer.java内に、CLEARボタンのイベントをセット

これで、クリアボタンが上手く動きます。ちなみに、改めて検索する場合に再描画するときも"photoImgList.clear();"を用いて一度画像の配列を空にしています。

3.撮影年指定部分の実装について
 続いて、左上のフォームで撮影年を指定する部分の実装について説明します。
フォームは、以下のようにJTextFieldを用いて作成し、描画しています。
takenYear = new JTextField("ここに撮影年を指定");
FlickrViewer.java内に、撮影年を指定するフォームをセット

デバッグした時点でフォームが出るだけでは、何を入力してよいものかわからないため、デフォルトで「ここに撮影年を指定」という文字がフォームに入るように指定しておきます。

スクリーンショット(2011-07-30 13.23.02).png
デフォルトで、フォームの説明文を表示する

ウィンドウの立ち上げから、タグのみをフォームに入れて画像の取得を行うユーザーもいると想定されるため、画像を検索する際のイベント処理は、以下のように条件分岐しました。
public void actionPerformed(ActionEvent e){
    String cmd = e.getActionCommand();
    if(cmd.equals("CLEAR")){
        //CLEARボタンを押した際のイベント処理
    }else{
        //撮影年を入力するフォームの中の文字列を取得
        String year = takenYear.getText();
        //"撮影年フォームの中が空"または、"defaultの文字列"であるとき
        if(year.equals("") || year.equals("ここに撮影年を指定")){
            撮影年を指定しない際のイベントについて
        }else{//撮影年が入力されているとき
            撮影年を指定した際のイベントについて
        }
    }
}
撮影年が指定されていない際と、指定した際では、FlickrAPIに問い合わせるURLが異なります。
指定しない際は、撮影年フォームの文字列内容は無視し、タグ入力フォームに記入された文字列のみをパラメータとしてURLに組み込みます。
String keyword = addrField.getText();
String request2flickr = new String(
"http://flickr.com/services/rest/?method=flickr.photos.search&per_page=54&api_key="+ 
flickrApiKey +
"&tags="+
keyword);
this.flickrREST.sendRequestAndSetObj(request2flickr);
撮影年が指定されていない際のイベント処理

撮影年が指定されている時は、入力された値を、max_taken_date,min_taken_dateに引き渡し、パラメータとしてURLを作成します。
String keyword = addrField.getText();
String request2flickr = new String(
"http://flickr.com/services/rest/?method=flickr.photos.search&per_page=54&api_key="+ 
flickrApiKey +
"&tags="+
keyword +
"&max_taken_date="+
year + "-12-31 23:59:59" +
"&min_taken_date=" +
year + "-01-01 00:00:00");
this.flickrREST.sendRequestAndSetObj(request2flickr);
撮影年を指定した際のイベント処理

4.ウィンドウレイアウトの実装について
 ウィンドウレイアウトは、先日提出した断面図通りに作成しました。
正メンズ.png
ウィンドウレイアウトの断面図

//FlickrPhotoPanelインスタンスを生成
this.flickrPhotoPanel = new FlickrPhotoPanel();

//JPanelインスタンスを生成。
//topContainerの中身について
JPanel topContainer = new JPanel();
    topContainer.setLayout(new GridLayout(1,2));
    topContainer.add(takenYear);
    topContainer.add(clearButton);

//bottomContainerの中身について
JPanel bottomContainer = new JPanel();
    bottomContainer.setLayout(new BorderLayout());
    bottomContainer.add(addrField, BorderLayout.NORTH);
    bottomContainer.add(this.flickrPhotoPanel, BorderLayout.CENTER);

//topContainerとbottomContainerをBorderLayoutで上下に配置
this.getContentPane().add(topContainer, BorderLayout.NORTH );
this.getContentPane().add(bottomContainer, BorderLayout.CENTER );
レイアウトのコードについて

topContainerの中は、GridLayoutを用いることで、要素を横並びに表示しました。あとは、BorderLayoutを用いて上下に配置しました。


以上が、私が最終課題として制作した改造FlickrViewerです。長くなりましたが、よろしくお願いします。