SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

CoffeeScriptによるモダンなWebアプリケーション開発

CoffeeScriptベストプラクティス集
ブラウザ向けJavaScript編(3)

CoffeeScriptによるモダンなWebアプリケーション開発 第9回

  • X ポスト
  • このエントリーをはてなブックマークに追加

ライブラリをCDNからロードする

 よく使われるライブラリは、誰でも利用できるように企業や団体などがCDN(ファイルを配信するための比較的大規模なネットワーク)にホスティングして公開している場合があります。有名なものとしてはjQueryをGoogle(Google Libraries API)やMicrosoft(Microsoft Ajax Content Delivery Network)がホスティングしています。自分のWebサイト上に設置したjQueryを使わずにこれらのCDNを使うメリットはいくつかあります。

 ライブラリをCDNからロードすると、自分のサーバやネットワークの負荷を減らすことができるうえ、CDNにより世界中のユーザーに対して高速に配信されます。さらに、複数のサイトが同じCDNを使うとブラウザ側でファイルのキャッシュが効きます。他のサイトを訪れた際にキャッシュされたjQueryが別のサイトでも使えるため改めてダウンロードする必要がなく、ページのロードが速くなります。

 jQuery 1.7.2でGoogleのCDNを使うには、jQueryの読み込み先を以下のURLに変更します。

 jQueryのバージョンアップに従ってCDN側にも新しいファイルがアップされ、バージョンごとに独立したURLで利用できます。GoogleのCDNではjQuery UIなど他のライブラリも提供されています。利用できるライブラリの一覧はこちらを参考にしてください。

ブラウザでのテストを自動化する

 Webサイトを開発したら、実際のブラウザで正しく動作するか検証する必要があります。ページのレイアウトだけならばブラウザを立ちあげてアクセスしてみればわかりますが、フォームの送信など複雑な操作を手動で毎回行うのは大変な作業です。幸いなことに、様々なアプローチでそのような操作を自動化する方法があります。

Selenium

 Seleniumはブラウザの操作を自動化するツール群です。Selenium IDEというFirefoxのアドオンを使うとプログラムを1行も書かずにブラウザを操るプログラムを作れます。

 Selenium IDEの使い方は次の通りです。ダウンロードページからSelenium IDEのFirefoxアドオンをインストールし、ブラウザのツールメニューからSelenium IDEを起動します。Selenium IDEのウインドウで右上の記録ボタンを押し、Webページに戻ってリンクのクリックやテキストの入力など記録したい操作を実際に行います。

図1 Selenium IDEで操作を記録する
図1 Selenium IDEで操作を記録する

 ページ内のテキストを選択して右クリックし、verifyTextPresentをクリックすると、選択したテキストがページ内に含まれていることを確認するテストが作られます。

図2 テキストを選択して右クリック
図2 テキストを選択して右クリック
図3 利用可能なコマンドの一覧
図3 利用可能なコマンドの一覧

 記録を停止するにはもう一度記録ボタンを押します。記録した操作は1つのテストケースとなります。テストケースを選択して実行ボタンを押すと、あたかも自分で操作しているかのようにブラウザの操作が自動で進みます。verifyTextPresentで指定したテキストが存在しないなど、期待通りの結果が得られなかった場合にはエラーで停止します。

 記録したテストケースは、ファイルに保存して後で実行できるほか、RubyやJavaなどのプログラムとしてエクスポートすることもできます。エクスポートしたプログラムはSelenium Serverと組み合わせることでコマンドラインからテストを実行できます。

 Selenium IDEを使ったテストの自動化は非常に手軽で、サーバーを用意したりプログラムを書いたりする必要がありません。比較的単純なテストであればSelenium IDEは非常に便利です。

Watir

 Webサイトが大規模になりテストが複雑になると、Selenium IDEではカバーしきれなくなったり、テストケースのメンテナンス作業がかえって複雑化してしまうことがあります。複雑なテストは手動で作るのがベストです。

 Watir(「ウォーター」と読む)というツールを使うと、Internet Explorer(以下、IE)やChrome、Firefox、Safari、Operaといった主要なブラウザをRubyスクリプトで制御して実行結果をテストできます。OSやブラウザは自分で用意する必要がありますが、非常に応用の幅が広いツールです。一時的や小規模な運用であればSeleniumで十分ですが、長期や大規模での運用となるとWatirの方が後々便利でしょう。

 IE、Firefox、Chrome、Operaの各ブラウザについてはWatir WebDriverを使ってほとんど同じソースコードでテストできます。このWebDriverという機能はSafariではサポートされていないため、Safariでテストする時だけはSafariWatirというツールを使います。Watir WebDriverとSafariWatirのAPIは互換性はないものの、構造はかなり似ています。なお、SafariWatirはMacでのみ使えます。

 例えばリスト3のようなスクリプトでFirefoxをリモートコントロールできます。

[リスト3]WebDriverを使ってFirefoxを操作する
require 'rubygems'
require 'watir-webdriver'

browser = Watir::Browser.new :firefox
browser.goto 'http://www.yahoo.co.jp/'  # URLを開く
browser.text_field(:name, 'p').set 'スカイツリー'  # テキストを入力する
browser.button(:id, 'srchbtn').click  # ボタンをクリックする
if browser.text.include? '東京スカイツリー'  # ページ内に特定の文字列があるか確認する
  puts 'ok'
else
  puts 'not ok'
end

 リスト3を実行すると実際にブラウザが起動し、人間が入力しているのと同じように操作が進みます。上記のソースコードの:firefoxの部分を:ie:chrome:operaと変えるだけで、各ブラウザでテストできます。

 PhantomJSなどのヘッドレスブラウザとは違ってGUI環境は必須ですが、より精度の高いテストを実施することができます。

 Watirの使い方はここでは詳しく解説しませんが、他のWebサイト等を参考にしてみてください。

次のページ
プロファイラを使う

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
CoffeeScriptによるモダンなWebアプリケーション開発連載記事一覧

もっと読む

この記事の著者

飯塚 直(イイヅカ ナオ)

1984年東京都生まれ。 高校時代に趣味でPerlやJavaを使ってプログラミングを始める。 慶応大学湘南藤沢キャンパス卒業後、共同通信社にてニュースサイトの開発などを担当。 その後、面白法人カヤックにてソーシャルゲームの開発などを手がける。 2012年現在、カヤックを退社し個人として活動し...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6537 2012/05/14 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング