Heroku Gardenを使ってみた

WebブラウザだけでRailsアプリ開発!?

@IT編集部

2009/3/25

Ruby on Railsでアプリケーション開発を始める場合、開発環境の準備が“ひと手間”となることがある。Heroku Gardenを使うと、Webブラウザだけ準備すればいい(編集部)

Heroku Gardenとは何か?

 Heroku Gardenは、RubyやRuby on RailsをインストールすることなくWebブラウザ(Firefox)上でRailsアプリケーション開発ができる統合開発環境(IDE)と、アプリケーションのホスティングサービスを提供するWebサイトです。「学習に最適(perfect for learning)」とあるように、Railsアプリケーション開発を試してみたい方にお勧めです。

 Webブラウザから利用できるIDE機能に注目が集まっていますが、分散型バージョン管理システムのGitとの連携にも対応しているため、ローカル環境でアプリケーションを開発してHeroku Gardenでホスティングすることもできます。

Heroku Garden Heroku Gardenは現在、Limited Betaとして利用可能です。Herokuのスタッフのブログによると今後も無料でサービスを提供していくようです。なお、Herokuの発音は「ハーオークー(her-OH-koo)」のようです。

 元々、Heroku Gardenの機能は2007年10月にサービスを開始したHerokuで提供されていました。およそ1年2カ月を経て、Heroku上で稼働するRailsアプリケーションが2万件を越えています。そこでHerokuのスタッフは、Private Betaとして提供していたサービスを有料化する方針を2009年1月に打ち出しました。

 同時に彼らは、「数千人のユーザーがHerokuの、特にWebブラウザから利用できる開発環境が、初めてRailsに触れるものとして最適だと好意的であることを知っている」として、WebベースのIDEとホスティング機能を切り出し、Heroku Gardenとして再スタートさせました。

 そこで今回は、新しくなったHeroku Gardenを利用して、簡単なRailsアプリケーションを開発し、公開するまでを紹介します。サンプルアプリケーションは、増井雄一郎(masuidrive)氏が動画を使ってRailsアプリケーション開発の簡単さを広く知らしめた「10分で作るRailsアプリ for Windows」にならって、ブックマークアプリケーションにしました。

関連記事:
リンク Heroku Garden
http://herokugarden.com/
リンク Heroku
http://heroku.com/
リンク 10分で作るRailsアプリ for Windows
http://masuidrive.jp/rails/

Heroku GardenでRailsアプリを作る前に

 Heroku Gardenは、Limited Betaとして提供されているため、ユーザー登録が完了するまでに少し時間が必要となります。本稿執筆のためにアカウントを取得してみると、およそ1日後にinvitation(招待状)メールが到着しました。

 なお、すでにアカウントをもっているユーザーから招待を受けることもできます。これは、Heroku Garden上で複数のユーザーによる共同開発が可能だからです。

アカウント申請

 アカウントが発行されたら、さっそくログインしてみましょう。「My Apps」画面にある「Create New App」ボタンをクリックします。

「My Apps」画面

 画面が切り替わって、Ruby on Railsの初期画面が表示されます。これで、開発環境の準備は完了です。

Ruby on Railsの初期画面

 左下にある「<<」ボタンをクリックすると、IDE画面になります。

IDE画面

 プロジェクト名は「untitled-xxxxxx」となっています(左上)。この部分をクリックするか、先ほどのRailsの初期画面下部にある「app settings」をクリックしてください。

app settings

 公開されるRailsアプリケーションは、「プロジェクト名.herokugarden.com/アプリケーション名/」となります。アプリケーションの設定画面でプロジェクト名を付け替えられます。ここでは、プロジェクト名を「atmarkit」に変更しました。また、共同開発者の登録や、アプリケーションを一般公開(Public)するか共同開発者だけに公開(Private)するかを選択できます。

さくっとScaffoldしてみよう

 IDE画面に戻って、左下にある歯車のアイコンをクリックしてみましょう。Generate、Console、Rakeという3つのメニューが表示されます。Consoleを選ぶとirbが起動します。

Console

 Generateを選択すると「ruby script/generate」に相当するコマンド入力フィールドが表示されます。Heroku Gardenで利用しているRailsのバージョンは2.2.2(本稿執筆時点。Herokuでは2.3.2にも対応したようです)なので、以下のようなScaffoldを行いました。アプリケーション名は「Bookmark」としました。

Scaffold Bookmark name:string url:string description:text

Scaffold

 Heroku Gardenで利用しているデータベースはSQLite3です。記事名を入力するカラムを「name」、URLを入力するカラムを「url」としてstring型で、記事の紹介文を入力するカラムを「description」としてtext型で設計しました。「id」「create_at(作成日時)」「updated_at(更新日時)」のカラムは指定しなくても自動的に生成されます。

 「Run」をクリックすると、Generateのログが表示されます。

Generateログ

 また、IDE側ではdb/migrate以下にマイグレーションのためのファイルが作成されます。「Migrate Now」という黄色い文字列をクリックするとマイグレーションが始まります。

マイグレーション

 これでアプリケーションは完成です。ね、簡単でしょう?

 IDE画面の右上にある「>>」ボタンをクリックするとWebサーバ画面に切り替わります。URLの末尾にアプリケーション名「Bookmarks」を追加すると(サンプルではhttp://atmarkit.herokugarden.com/Bookmarks)、実際のRailsアプリケーションが動いているのが分かります。

ブックマークアプリ画面

データベースにデータを追加してみよう

 データベースにデータが入っていないので、IDE画面に戻ってサンプルデータを追加してみましょう。「Data」タブをクリックすると「bookmarks」というテーブルが作成されています。

Dataタブ

 テーブル名をクリックすると、データベースのスキーマが表示されます。

データベーススキーマ

 「data」をクリックすると登録されたデータの一覧画面になります。「Create new record」をクリックして手作業でデータを入力するほかに、CSVファイルをインポートすることも可能です(本稿執筆のために日本語を含んだCSVファイルをインポートしてみましたが、うまくいきませんでした。Web上で検索してみると、UTF-8で作成すると成功したという情報がありました)。

Create new record

 さて、Heroku Garden上では日本語の入力ができません。しかし、テキストファイルなどで作成しておいた文字列をコピー&ペーストすると入力できました。

データ入力

 3件ほどレコードを追加してから、Webサーバ画面に切り替えてみます。シンプルで素っ気ないブックマークアプリケーションですね。Show(見る)やEdit(直す)、Destroy(消す)、New Bookmark(追加)機能もちゃんと動いていました。

画面を日本語化したり、URLをクリッカブルにしたり

 ブックマークアプリケーションなのに、URLがただの文字列なので使い勝手が悪いと思いませんか? 本格的なアプリケーション開発であればきちんと作りこみを行うべきだと思いますが、今回は、erbファイルをいじって画面を日本語化したり、URLにリンクを設定してみました。

 IDE画面に戻って、app/views/bookmarks/index.html/erbを開きます(画像をクリックすると拡大します)。中身はきわめて簡単なHTMLのようなものです。英語で表示されていた見出しや項目を、データベースのレコード入力時と同じ要領で、コピー&ペーストで日本語化しました(「消す」を押した後に表示される警告や、新規ブックマークの追加機能を日本語化し忘れています)。

index.html.erb

 URLをクリックすると新しいブラウザ画面に表示させるために、<%=h bookmark.url %>をコピーして<a>タグで囲んでいます。

<td><a href="<%=h bookmark.url %>" target="_blank"><%=h bookmark.url %></a></td>

 プラグインを導入したい場合は、IDE画面の左カラムにある「vender」をクリックします。インストール済みのプラグインの一覧画面になりますので(初回は一覧が存在しません)、必要なプラグインを検索して追加(Installをクリックするだけ)してください。

 完成したRailsアプリケーションの公開は、「Heroku GardenでRailsアプリを作る前に」の章で触れたapp settings画面にある、PublicとPrivateのラジオボタンをPublicにするだけです。

Coding Edgeフォーラム トップページ

 Ruby/Rails関連記事
プログラミングは人生だ
まつもと ゆきひろのコーディング天国
 ときにプログラミングはスポーツであり、ときにプログラミングは創造である。楽しいプログラミングは人生をより実りあるものにしてくれる
生産性を向上させるRuby向け統合開発環境カタログ
Ruby on Rails 2.0も強力サポート
 生産性が高いと評判のプログラミング言語「Ruby」。統合開発環境を整えることで、さらに効率的なプログラミングが可能になる
かんたんAjax開発をするためのRailsの基礎知識
Ruby on RailsのRJSでかんたんAjax開発(前編)
 実はAjaxアプリケーション開発はあなたが思うよりも簡単です。まずはRuby on Railsの基礎知識から学びましょう
Praggerとnetpbmで作る画像→AA変換ツール
Rubyを使って何か面白いものを作ってみよう!
 一般的な画像をアスキーアートに変換するツールを作ってみる。さらに出力にバリエーションを持たせてみよう
コードリーディングを始めよう
Railsコードリーディング〜scaffoldのその先へ〜(1)
 優れたプログラマはコードを書くのと同じくらい、読みこなす。優れたコードを読むことで自身のスキルも上達するのだ
  Coding Edgeフォーラムフィード  2.01.00.91

 



Coding Edge フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

>

Coding Edge 記事ランキング

本日 月間