#336 Copycopter

開発者の中にはコピーを書くのが苦手という人は多いでしょう。例として下のページの最初にあるテキストを見てみましょう。今の“Browse Products”という表示は、“Browse Our Products”や“Product Listing”の方がいいのか、それとも単に“Products” とすべきでしょうか?

クライアントがこのタイトルやその下の記述のテキストを変更したいと思った場合、その作業は思ったほど簡単ではありません。このテキストはビューテンプレートに直に書かれているため、変更する場合は、ソースコードにアクセスしてテンプレートを編集し、アプリケーションをデプロイしなおす必要があります。もしシンプルな管理用画面があって、そこにクライアントがアクセスしてこのようなテキストを編集できれば作業はずっと簡単になるでしょう。Copycopterはこのような用途のためにあり、Railsアプリケーションのテキストをクライアントが編集できるインターフェースを提供します。CopycopterはRuby gemの形でも提供されているので、アプリケーションへの統合も簡単です。これはかつては有料サービスでしたが、Thoughtbotが最近オープンソース化し無料で使用できるようになりました。そこで今回のエピソードではこれを使って、既存のアプリケーションのヘッドラインと説明文を編集できるようにします。

Copycopter Serverを設定する

まず最初にCopycopter Serverを設定します。これは、コピーを編集するためのインターフェースを提供する完全なRailsアプリケーションです。これはmountable engineではなく、自身のRailsアプリケーションとは別のホストマシンにデプロイされている必要があります。Herokuがこの用途に最適であり、Copycopterは1 dynoで動作するのでここでは無料でホストすることが可能です。もしHerokuのアカウントを持っていなければ、無料で登録可能です。登録が終わったら、アプリケーションを管理するためのコマンドラインインターフェースを提供するHeroku Toolbeltをインストールします。ダウンロードとインストールを終えたら、どのターミナルウィンドウからでもherokuコマンドにアクセスできます。それでは次のコマンドでHerokuアカウントにログインします。

$ heroku login
Enter your Heroku credentials.
Email: eifion@asciicasts.com
Password: 
Authentication successful.

認証が成功したので、HerokuにCopycopter Serverをデプロイできます。Githubのドキュメントにこのための手順があるのでそれに従います。まずプロジェクトをローカルマシンにcloneします。

$ git clone git://github.com/copycopter/copycopter-server.git

次にディレクトリを移動して、Herokuへのデプロイを開始します。最初に新規のHerokuアプリケーションを作成します。

$ cd copycopter-server/
$ heroku create --stack cedar

設定によっては、このコマンドの実行時にエラーが発生する場合があります。これを修復するために、bundle installコマンドを実行します。テストの依存数をできるだけ少なくするために、テスト環境を除外して実行する方がいいでしょう。

$ bundle install --without=test

これの実行後は、heroku createを実行してもエラーが発生することはないでしょう。HerokuへのデプロイにはGitを使うので、git pushコマンドを実行します。

$ git push heroku master

次のコマンドを実行して、サーバ上でデータベースのmigrationをおこないます。

$ heroku run rake db:migrate

migrationが終了したらheroku restartコマンドを実行します。これでCopycopterプロジェクトを作成できるので、次のコマンドを実行します。(言うまでもありませんが、NAME, USERNAME, PASSWORDの各オプションの値を自分のアプリケーションに合わせて変更してください。)

$ heroku run rake copycopter:project NAME=Store USERNAME=eifion PASSWORD=secret

作成したサイトを見るためにheroku openを実行すると、ブラウザでRailsアプリケーションが開きます。

“Store”のリンクをクリックすると、Copycopterプロジェクトを作成したときに使用したユーザ名とパスワードを求められます。それらを入力するとプロジェクトページが表示され、このプロジェクト用のRailsアプリケーションがないというメッセージが表示されます。そのページにあるRailsアプリケーションを設定するための手順によると、必要な作業は、アプリケーションのgemfileにgemを追加し、Copycopterクライアントを設定するための初期化ファイルを追加することです。

Copycopterを使うようにRailsアプリケーションを設定する

この手順に従ってストアアプリケーションにCopycopterを追加します。まずgemflleにgemを追加し、bundleコマンドを実行してインストールします。

gem 'copycopter_client', '2.0.0'

次に初期化ファイルを作成します。ここにはデプロイしたCopycopter Serverに自分のアプリケーションをフックするための設定をおこなうコードが含まれます。

CopycopterClient.configure do |config|
  config.api_key = 'f5a22cf0acffc7010db99951be3c5d0d'
  config.host = 'sharp-window-4901.herokuapp.com'
end

これでアプリケーションのトップページのヘッドラインと説明文をCopycopterを介して編集できるようになります。そのためにはページのテンプレートを開いて、各テキストをtメソッドの呼び出しに置き換え、識別のためのユニークキーと、Copycopterに値が定義されていない場合のための各項目のデフォルト値を渡します。

<h1><%= t "products.headline", default: "Browse Products" %></h1>

<em><%= t ".tagline", default: "We have what you need at a great low price." %></em>

ここでtメソッドはRailsであらかじめ用意されている国際化メソッドであり、そのためにCopycopterはWebサイトの国際化対応のために使用することもできます。キャッチフレーズの識別子がピリオドで始まっていることに注意してください。これによって相対キーとなるので、テンプレートへのパスが前について、このテンプレートに対しては固有の値となります。

Copycopterをロードするためにアプリケーションのサーバを再起動します。その後でページをリロードすると、tの呼び出しがすべてデフォルト値を使用するため、以前とまったく同じ表示になります。Copycopter Serverにアクセスすると、キーを探すための検索ダイアログが出ています。“headline”を検索すると、products.headlineキーが表示されます。これをクリックすると、キーがついたテキストを編集できるページが開きます。“Browse Products”を“Browse Our Products”に変更してみます。

変更をドラフトとして保存しておくか本番環境に公開するかを選択することができます。ここではドラフトとして変更を保存しておきます。アプリケーションのページをリロードするとテキストが変わっています。

同じようにキャッチフレーズも変更します。アプリケーションで相対キーを与えたので、これはproducts.index.taglineというキーを持ちます。編集対象のテキストにはエディタを介してスタイルを追加できます。またアプリケーションのテキストを違う言語に翻訳したい場合は、別のロケールのテキストを設定することもできます。

最後に、一つのCopycopter Serverは複数のプロジェクトを管理することができるので、もし他にもサイトを持っていたら、再度heroku run rake copycopter:projectを別のプロジェクト名とともに実行できます。