2014年3月16日日曜日

Calabash-Androidを利用してAndroidのシナリオテストを日本語で書いてみる

このエントリーをはてなブックマークに追加 はてなブックマーク - Calabash-Androidを利用してAndroidのシナリオテストを日本語で書いてみる

Androidのシナリオ自動化テストで使えるCalabsh-Andoridを利用してみたのでその時のメモ。calabash-androidのインストールを行い、HelloWorldアプリをエミュレーターで動かし、日本語によるシナリオテストできるまでを記載します。(ググれば分かりそうな所は割愛)

calabash-android

目次

  1. Calabash-Androidとは
  2. Calabash-Androidのインストール
  3. HelloWorldアプリの作成
  4. Androidエミュレーターの作成、起動
  5. 試験(cucumber)のスケルトン作成
  6. keystoreの設定
  7. テストの実行
  8. テストを日本語化する
  9. Tips

1.Calabash-Androidとは

こちらの資料がとても分かりやすかったです。

Calabash-AndroidでBDDしようぜ!

ざっくり特徴としては

  • Androidのシナリオテストを実行するライブラリ
  • 現在も開発が続いている(2014年3月16日時点)
  • テストはCucumberで書く
  • テストで日本語が書ける

などが特徴でしょうか。 あと特に良いなと思った点としてコード書かない人でもテストが書ける事です。

# language: ja
フィーチャ: 初期画面表示確認を行う
        アプリのユーザーとして初期画面表示を行う。
        なぜならアプリ起動時に表示するからだ。

シナリオ: 初期画面を表示する
        ならば"Hello world!"と表示されていること
        ならばスクリーンショットを撮る

みたいな書き方が出来るのでテスターの人でも書けるのが特に良いなと。(他のテストライブラリについてそんなに詳しく分かりませんが) あとで見た人もとても分かりやすい。

2.Calabash-Androidのインストール

公式ドキュメントはこちら。

Calabash-AndroidはRubyのGemで提供されているので、Rubyのインストールが必要です。また、以下が必要となります。

  • Ruby(1.8.7以上)
  • Ant
  • Java
  • AndroidSDKのインストール、ANDROID_HOMEの設定

自分はMacOSXで設定しましたが、LinuxでもWindowsでも条件が揃っていれば動作可能かと思います。

各インストールの詳細は割愛。 インストール後、各コマンドのパスが通っているか確認。

$ruby -v
ruby 1.9.3p385 (2013-02-06 revision 39114) [x86_64-darwin13.1.0]

$java -version
java version "1.6.0_65"
Java(TM) SE Runtime Environment (build 1.6.0_65-b14-462-11M4609)
Java HotSpot(TM) 64-Bit Server VM (build 20.65-b04-462, mixed mode)

$ant -version
Apache Ant(TM) version 1.9.3 compiled on December 23 2013

$echo $ANDROID_HOME
/Applications/adt-bundle-mac-x86_64-20131030/sdk

ANDROID_HOMEはsdkの所を指定しないと駄目なようなので注意。

上記が完了したら、以下コマンドでCalabash-Androidをインストール。

$gem install calabash-android

確認。

$gem list --local |grep android
calabash-android (0.4.21)

3. HelloWolrdアプリの作成

テスト対象とするAndroidアプリを作成しましょう。とりあえず自分はHelloWorldアプリを作りました。ここも詳細は割愛。

この際の注意点としてAndroidManifest.xmlにandroid.permission.INTERNET を設定しておいてください。

Calabsh-Androidではhttpを使ってテストしているっぽいのでこれをやっておかないと失敗します。

4. Androidエミュレーターの作成、起動

Androidエミュレーターを作成して起動しておいてください。詳細は割愛。 実機の場合、USB接続してadb devicesコマンドで認識できていればOK。

テストしたいアプリがインストール、起動出来る事を確認しておくと良いと思います。

また、エミュレーター起動時にUse Host GPUを使うと後述するテスト時のスクリーンショットを撮るときに黒くなってしまうので注意です。

5. cucumberのスケルトン作成

試験をする為のスケルトンファイルを作成します。テストしたいAndroidプロジェクト配下(AndroidManifest.xmlがある場所)に移動して、calabash-andorid genコマンドを実行します。

$cd workspace/[YourProjectName]
$calabash-android gen

とするとスケルトンが作成されます。

features
|_support
| |_app_installation_hooks.rb
| |_app_life_cycle_hooks.rb
| |_env.rb
|_step_definitions
| |_calabash_steps.rb
|_my_first.feature

my_first.featureが試験項目になるのですが、こちらの内容をHello world!と画面に表示されている事という内容に変更します。

Feature: Login feature

  Scenario: As a valid user I can log into my app 
    Then I see "Hello world!" 

本当はFeature,Scenarioの場所も変えた方が良いのですが、とりあえず動かしたいので無視。(日本語化に関しては後述)

6. keystoreの設定

テスト実行時にテスト対象のapkと同様の署名されたテストアプリを同時にインストールします。

上記より、どのkeystoreを使ったかを教えてあげる必要があります。

$calabash-android setup

上記コマンドを実行するとkeystoreの場所、alias、パスワードを聞いてくるので入力します。 入力が終わるとカレントディレクトリにcalabash_settingというのが出来ており、こちらに入力した情報があるのが確認出来ます。

7. テストの実行

さあ、テストを実行してみましょう!calabash-androidコマンドを実行し、引数にテストしたいapkを指定します。

$calabash-android run bin/MainActivity-debug.apk
Feature: Login feature

  Scenario: As a valid user I can log into my app # features/my_first.feature:3
1135 KB/s (556187 bytes in 0.478s)
1706 KB/s (277892 bytes in 0.159s)
    Then I see "Hello world!"                     # calabash-android-0.4.21/lib/calabash-android/steps/assert_steps.rb:5

1 scenario (1 passed)
1 step (1 passed)
0m37.799s

とすると色々文字が出て最後に成功(pass)しているのが確認できます。なお、-vオプションを付けるとverboseで詳細が表示されるのでうまく動かない時はこちらを付けるのがおすすめです。

先ほど編集したmy_first.featureのThen I see “Hello World!”の箇所をThen I see “test!!!”とするとテストが失敗する事からもテストがしっかり実行できている事が確認できます。

$calabash-android run bin/MainActivity-debug.apk
Feature: Login feature

  Scenario: As a valid user I can log into my app # features/my_first.feature:3
1907 KB/s (556187 bytes in 0.284s)
1668 KB/s (277892 bytes in 0.162s)
    Then I see "test!!!"                          # calabash-android-0.4.21/lib/calabash-android/steps/assert_steps.rb:5
      Action 'assert_text' unsuccessful: Text'test!!!' was not found (RuntimeError)
      features/my_first.feature:4:in `Then I see "test!!!"'

Failing Scenarios:
cucumber features/my_first.feature:3 # Scenario: As a valid user I can log into my app

1 scenario (1 failed)
1 step (1 failed)
0m46.468s

8.テストを日本語化する

今書いてあるテストはあくまで英語なので日本語でも出来るようにします。 まず、featureファイル(シナリオ)を日本語化します。

# language: ja
フィーチャ: 初期画面表示確認を行う
        アプリのユーザーとして初期画面表示を行う。
        なぜならアプリ起動時に表示するからだ。

シナリオ: 初期画面を表示する
        ならば"Hello world!"と表示されていること
        ならばスクリーンショットを撮る

1行目で日本語での予約語を使いますよ、という事を宣言しています。(Feature:フィーチャ、Then:ならば、などなど)

ただし、これでテストを実行しても「表示されている事」、「スクリーンショットを撮る」などの記述が何の操作に対応するか不明であるため、動きません。 そこでfeatures/step_definitions/calabash_steps.rbファイルを編集します。

# coding: utf-8
require 'calabash-android/calabash_steps'

ならば /^"(.*?)"と表示されていること$/ do |text|
  step %{I should see "#{text}"}
end

ならば /^スクリーンショットを撮る$/ do
  step %{I take a screenshot}
end

こんな感じで日本語で認識させたい文言を書き、次の行に具体的に実行する処理を記載します。 step hogeで出来る処理の一覧は以下にあります。(hoge秒待つ、fugaボタンを押すなど色々あります)

calabash-android / ruby-gem / lib / calabash-android / canned_steps.md

また、最初に紹介したslideshareを書いてくれた方がstepファイルを日本語化したものをGistにおいてくれているみたいなのでこれを使っても良いかと思います。(未検証とのことですが、かなり助かります。)

patorash / common_steps.rb

準備ができたのでテストを実行してみます。

$calabash-android run bin/MainActivity-debug.apk
# language: ja
フィーチャ: 初期画面表示確認を行う
  アプリのユーザーとして初期画面表示を行う。
  なぜならアプリ起動時に表示するからだ。

  シナリオ: 初期画面を表示する               # features/my_first.feature:6
1558 KB/s (556187 bytes in 0.348s)
1397 KB/s (277892 bytes in 0.194s)
    ならば"Hello world!"と表示されていること # features/step_definitions/calabash_steps.rb:4
    ならばスクリーンショットを撮る             # features/step_definitions/calabash_steps.rb:8

1 scenario (1 passed)
2 steps (2 passed)
0m44.955s

成功しました!結果もすごい分かりやすい!撮ったスクリーンショットはカレントディレクトリにscreenshot_0.pngとかで配置されています。

試験シナリオを増やす場合にはfeature/**.featureというファイルをシナリオ分作成していけばOKで、日本語で実施したい処理を増やしたい場合にはfeatures/step_definitions/calabash_steps.rbに記述を増やしておけばOKです。

9.Tips

  • calabash-android run bin/MainActivity-debug.apk -v --format html --out reports.htmlというような書き方で結果をHTML出力できる
  • debugビルドしたアプリをインストールした状態でreleaseビルドしたアプリをテストしようとすると証明書違うよって怒られる事があるのでその場合には一度アプリを削除するなどが必要。(基本的にはuninstallコマンドが先に走るので大丈夫なはず)
  • テスト用にインストールしているアプリはtest_servers/配下に存在する
  • adb installでアプリをインストールしているが、adb -r installにしたい場合にはfeatures/support/app_installation_hooks.rbのinstall_appという記述をupdate_appとすれば良い。(プリインアプリなどアプリが削除できない場合に有効)

2014年2月13日木曜日

Gitlab6.4をApacheで動作させようとした際にProxyErrorとなる場合の対応

このエントリーをはてなブックマークに追加 はてなブックマーク - Gitlab6.4をApacheで動作させようとした際にProxyErrorとなる場合の対応

gitlab-recipes/install/centosを参考にCentOS6.4上にGitlab6.4をApacheで動作させようとした際にProxyErrorとなり、ログインが出来なかった。

ググってみたらこんなIssueがあり、以下を実行しろと。

$bundle exec rake assets:precompile RAILS_ENV=production

上記でProxyErrorがなくなり、無事ログイン画面が出ました。良かった良かった。

2014年2月8日土曜日

Redmine Backlogsのカード印刷(card printing)設定が有効化できない場合の対応

このエントリーをはてなブックマークに追加 はてなブックマーク - Redmine Backlogsのカード印刷(card printing)設定が有効化できない場合の対応

RedmineのBacklogsプラグインでストーリーカードを印刷出来る機能があるのですが、RedmineBacklogsプラグインの設定で何故かラベルの設定が出来ない状況になっていました。

BacklogのGithubで同様にはまっている人がBacklogs printable card labels cannot be configured といタイトルでissueを投稿しており、この状態だと印刷が出来ないので以下を実施する必要がありました。

$cd REDMINE_HOME/plugins/redmine_backlogs/lib/labels
$cp labels.yaml.default labels.yaml
$/sbin/service httpd restart

選択可能なラベルリストがlabels.yamlなのですが、最初に配置されているものは何も指定されていない為、選択が出来ませんでした。上記のように複数のラベルが記述されたlabels.yaml.defaultをlables.yamlに上書きし、Redmine再起動でラベルの選択が出来るようになりました。

出力されるストーリーカードに日本語がある場合に文字化けしてしまう問題は

Redmine BacklogsでストーリーカードをPDF出力する時の文字化けを防ぐ方法

で対応方法が記載されており、助かりました。

2014年1月27日月曜日

VagrantのProvisioning機能を利用してVM起動時にGitリポジトリ作るようにしてみた

このエントリーをはてなブックマークに追加 はてなブックマーク - VagrantのProvisioning機能を利用してVM起動時にGitリポジトリ作るようにしてみた

Gitのリモートリポジトリを作る必要がありそうな感じだったので、試しにVagrantのProvisioning機能を利用してVM起動時にGitのリモートリポジトリを作るshellを作って試してみたのでその時のメモ。

前提条件

  • ホストマシーンはMacOSX10.9.1で、Gitはインストール済み
  • 仮想環境はCentOS6.4を利用
  • 仮想環境にGitのリモートリポジトリを作成し、ホストマシーンでcloneしたり出来るまでを実施

目次

  1. Vagrantのインストール
  2. Vagrantを利用したCentOS仮想環境の構築
  3. 仮想環境のCentOSの作成、起動
  4. 仮想環境にプライベートIPアドレスを設定する
  5. 仮想環境にGitのリモートリポジトリ作成
  6. まとめ
  7. 参考サイト

1.Vagrantのインストール

Vagrantを利用する際にはVirtualBoxが必要なので予めインストールしておきます。

Vagrantの公式サイトのDownloadからOSにあったVagrantをダウンロードしてインストールします。(たしかOK連打でOKだったはず)

2014年1月26日現在以下のOSのものが配布されているようです。

  • MacOSX(32bit or 64bit)
  • Windows(32bit or 64bit)
  • Debian/Ubuntu(32bit or 64bit)
  • CentOS/Fedora/Redhat(32bit or 64bit)

インストールが完了するとTerminalでvagrantコマンドが使えるようになっているはずです。

$vagrant --version
Vagrant 1.4.3

2. Vagrantを利用したCentOS仮想環境の構築

注意:Boxの取得は大きなファイルのダウンロードとなる為、通信速度が早い所で実施するのがおすすめです

Vagrantで任意のOSの環境を構築する際に対応するOSのBoxというものが必要となります。

入手可能なBoxの一覧はこちらから確認できます。

取得したいBoxのURLが分かったらvagrant box addコマンドを利用してBoxを取得します。ざっくりの書式は以下の通りです。

vagrant box add {title} {url}

詳細を知りたいときはvagrant box add -hで調べて下さい。

titleにはvagrantで保存するBoxの名称を記載します。例えばcentos6_4という名称でBoxを保存したい場合は以下のようなコマンドを実行します。

$vagrant box add centos6_4 http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20130731.box

ダウンロード完了後、vagrant box listコマンドを使ってBoxの取得が出来ているか確認します。

$vagrant box list
centos6_4 (virtualbox)

上記のようになっていればダウンロードが完了しております。なお、Boxファイルの実態は~.vagrant.d/boxesにあります。

3. 仮想環境のCentOSの作成、起動

準備が出来たのでいよいよCentOSの仮想マシンを作成します。

適当な場所にVagrant用のフォルダを作成し、移動します。

$mkdir -p ~/vagrant/centos64/
$cd ~/vagrant/centos64/

上記の場所でvagrant initコマンドを実行し、仮想環境で利用するBoxを指定します。 先ほどダウンロードしたcentos6.4という名称のBoxを利用する場合には以下のコマンドとなります。

$vagrant init centos6_4

上記を実行するとカレントディレクトリにVagrantfileというものが作成されます。

中身を見ると分かりますが、このファイルの中で利用するBoxを何にするか記載してあります。

config.vm.box = "centos6_4"

また、その他仮想環境に関する設定情報などが本ファイルに記載してあります。

ちょっと話が逸れましたが、次にVMを起動します。 カレントディレクトリにVagrantfileがある場所で以下のコマンドを実施します。

$vagrant up

少し時間が経つとVMが起動したことが分かります。

起動後、以下のコマンドでSSHログインが可能です。

$vagrant ssh

上記でvagrantユーザーでログインができます。簡単ですねー。

その他VMを操作するコマンドとしてはよく利用するのは、シャットダウンさせるvagrant halt、中断させるvagrant suspend、また再会のvagrant resume、環境を破棄するvagrant destory、Vagrantfileの変更を再読みするvagrant reloadあたりでしょうか。詳細やその他コマンドは公式ドキュメントVagrant Documentを見て下さい。

4. 仮想環境にプライベートIPアドレスを設定する

GitリポジトリをVagrant上に作成してアクセスしたいのでVagrant環境に任意のプライベートIPアドレスを指定したいです。

上記の方法は簡単でVagrantfileを編集すればOKです。

#config.vm.network :private_network, ip: "192.168.33.10"

という記述が27行目当たりにあるのでコメントアウトを外します。

config.vm.network :private_network, ip: "192.168.33.10"

上記実施後、Vagrantfileを再読みさせたいのでvagrant reloadコマンドを利用します。

$vagrant reload

とするとVagrantfileが再読み込みされ、VMが再起動します。

vagrant sshしてifconfigコマンドなどを利用するとIPアドレスが設定されているか確認できるかと思います。

上記を利用して例えばvagrant上にapacheを立てて、ホストからhttp://192.168.33.10などでアクセスも可能です。(iptablesを設定している時は解除が必要な場合があります)

なお、Vagrantfileが存在するディレクトリとVMの/vagrant/配下は共有フォルダになっているのでファイルの受け渡しはこちらを利用すると便利です。

5. 仮想環境にGitのリモートリポジトリ作成

基本的な設定は終わったのでVagrantのCentOS6.4にGitのリモートリポジトリの環境を作ります。

と言っても普通に作ってはVagrantでも意味ないよね、という事でVagrantの起動時に自動的にソフトウェアなどをインストールするProvisioing機能を使ってGitリモート環境を作ってみます。(ChefやPuppetとも連携できるみたいですが使った事ないので残念ながら今回はシェルで。。。)

という事でやりかたですが、起動時にシェルを実行する場合にはVagrantfileに以下のような記述を追記します。

config.vm.provision "shell", path: "provision.sh"

上記のような記述をするとカレントディレクトリに存在するprovision.shをvagrant upした時に実行してくれます。

という事で起動と同時にリポジトリを作るシェルを作成してみました。

# install git
sudo yum -y install git

# create git group
sudo groupadd git

# add git group
sudo usermod -a -G git vagrant

# create git repository
sudo mkdir -p /var/public_git/.test.git
sudo git init --bare --shared /var/public_git/test.git
sudo chown -R root:git /var/public_git

少し、説明を記載します。

  • 2行目でGitをインストール
  • 5行目でGit用のgitグループを作成
  • 8行目でvagrantユーザー(sshでログインするユーザー)にgitグループを追加
  • 11行目でGit用のフォルダの/var/public_git/test.gitを作成
  • 12行目で作成したフォルダに共有リポジトリを作成
  • 13行目で作成したフォルダのグループをgitグループに変更

上記によってgitグループのユーザーはcloneが出来るようになります。

試しにホストのMacからgitグループとなっているvagrantユーザーでcloneしてみます。

下記コマンドを実行するとvagrantユーザーのパスワードが聞かれるのでパスワードのvagrantと入力するとcloneが成功する事が確認できます。

$git clone ssh://vagrant@192.168.33.10/var/public_git/test.git
Cloning into 'test'...
vagrant@192.168.33.10's password: 
warning: You appear to have cloned an empty repository.
Checking connectivity... done

また、試しにpushもしてみます。

$cd test
$touch abc.txt
$git add abc.txt
$git commit -m "First Commit"
$git push origin master

ついでにgit用のユーザーを追加して確認してみます。

$vagrant ssh
# 以降仮想環境での操作
$sudo useradd git_user -g git
$sudo passwd git_user
$exit

では追加したユーザー(git_user)で適当なディレクトリに移動し、cloneしてみます。

$git clone ssh://git_user@192.168.33.10/var/public_git/test.git

先ほどpushしたabc.txtも確認できます。

まとめ

上記のように一度シェルを作ってしまえば、例えば設定を誤ってしまった時も

$vagrant destroy
$vagrant up

とすればまた同じ環境が手に入るので便利です。複製も何個でも出来ますし、便利。

Vagrantは単語は知っていたのですが、そんなに学習コスト高くない割に恩恵が大きい気がします。 今後時間あるときはChefも勉強してみてもっと俺俺レシピを作りたいです!

参考サイト

2014年1月18日土曜日

CDN使う時にhttpとhttpsアクセスがある場合にエラーになった話

このエントリーをはてなブックマークに追加 はてなブックマーク - CDN使う時にhttpとhttpsアクセスがある場合にエラーになった話

Herokuに昔デプロイしたアプリを久々に見にいったらhttpsアクセスも許容するようになったらしく、その場合にCDNからのjQueryなどの読み込みに失敗しており、コンソールを見ると以下のようなエラーが表示されていました。

混在アクティブコンテンツ "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" の読み込みをブロックしました

どうやらSSLアクセスの場合、CDNもSSLにしろって事らしい。

でも単純にhttpsとか書き換えるんではなくてhttpsアクセスの時だけhttpsのCDNを見に行くと一番嬉しいと思って調べてたら以下のようにhttpを消すとアクセスに応じて取得先を変更してくれました。

How to fix a website with blocked mixed content

変更前

<script src="http//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

変更後

<script src="//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

これで再デプロイしたらうまくできました。良かった。

2014年1月15日水曜日

ChromeDevToolsのMobile emulationを触ってみた

このエントリーをはてなブックマークに追加 はてなブックマーク - ChromeDevToolsのMobile emulationを触ってみた

GoogleChromeのDevToolsの機能でMobile emulationなるものが出来ていたのでちらっと確認したのでそのメモ。

以下に出来る事の抜粋を記載します。もっと出来る事がありそうですが、詳細はMobile emulationを確認下さい。

  • 各種スマホのエミュレーション
  • ピンチイン、ピンチアウト、スワイプ操作が出来る
  • 画面サイズ及びピクセル比の変更が可能
  • メディアタイプの切り替えが可能
  • User-Agentの変更も可能
  • 現在地の変更が可能

参考サイト

GoogleDevelopersのChromeDevToolsのページ

Mobile emulation

HTML5Rocksでの紹介ページ

Chrome DevTools for Mobile: Screencast and Emulation

目次

  1. 準備
  2. エミュレーターを起動させる
  3. 操作
  4. 画面サイズ及び縦横サイズを変える
  5. ピクセル比を変える
  6. メディアタイプの切り替え
  7. UserAgentの変更
  8. 現在地(緯度経度)の変更
  9. その他

1.準備

2014年1月14日現在では通常のMacのGoogleChrome(v31)では確認できなかったのでGoogle Chrome Canaryをインストールします。

インストール後、Chromeを起動し、右上の3本線のボタンを押下後、Tools→DeveloperToolsを起動させます。

DeveloperToolsを起動後、DeveloperToolsの右上の歯車のアイコンを押下します。

GeneralのShow ‘Emulation’ view in console drawer.の欄のチェックを有効化させます。

その後、画面下部にEmulationタブが出現しているのが確認できます。 もし、画面下部のタブが表示されない場合にはEscキーを押下して表示させてください。

2.エミュレーターを起動させる

Emulatorタブの画面左にある

  • Device
  • Screen
  • User Agent
  • Sensors

をクリックする事でミュレーターの詳細を設定する事が出来ます。

とりあえずGoogle Nexus4のエミュレーションを起動します。

  1. EmulatorタブのDeviceを選択し、セレクトボックスからGoogle Nexus4を選択します。
  2. Emulateボタンを押下します。

上記2ステップでChromeの画面が選択したスマホのエミュレーションを行う画面となります。

3.操作

PCのスクロールでスクロールできますが、タッチイベントのエミュレートも出来るのでクリックしながらスクロールする事でスワイプも可能です。

また、Shiftキーを押下しながらスクロールさせる事でピンチイン、ピンチアウトの操作も可能です。

なお、以下でタッチ操作のエミュレーションを無効化出来ます。

  • EmulatorタブのSensorsを選択し、Emulate touch screenのチェックを外します

3.画面サイズ及び縦横サイズを変える

  1. EmulatorタブのScreenを選択し、Emulate Screenにチェックを入れます
  2. Resolutionの値を変更する事で画面サイズを変更できます。

縦と横の画面サイズを設定する真ん中にあるボタンを押下する事で縦横のサイズを逆にする事が出来ます。

4.ピクセル比を変える

ピクセル比を変更できます。 これでMediaQueryでratioに関する記述を行った場合の確認も簡単に出来ます。

  1. EmulatorタブのScreenを選択し、Emulate Screenにチェックを入れます
  2. Device pixel ratioの値を変更します。

例えば以下のようなコードを書きます。(dataURIは略)

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #image {
        background-repeat:no-repeat;background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgAB...
    }
}

上記の場合、ratioが2の場合にはid属性がimageの箇所に表示されますが、1に変更すると表示されなくなる事が確認出来ます。

5.メディアタイプの切り替え

  1. EmulatorタブのScreenを選択し、CSS mediaにチェックを入れます
  2. セレクトボックスから任意のmediaタイプを選択します。

こちらについては実際動作は未確認となっております。。。

6.UserAgentの変更

  1. EmulatorタブのUser Agentを選択し、Spoof user agentにチェックを入れます。
  2. セレクトボックスから任意の端末名を設定するかテキストボックスの値を直接書き換えます。

User Agent String.Comにアクセスすると適当に設定した値が表示されているのが確認出来ます。

7.現在地(緯度経度)の変更

現在地(緯度経度)のが変更が出来ます。

  1. EmulatorタブのSensorsを選択し、Emulate geolocation coordinatesにチェックを入れます。
  2. Lat、Lonにそれぞれ値を入れます。

上記の状態でGPSを取得するようなページに遷移します。 Geolocation Demoに遷移するとブラウザから現在地取得して良いかの確認が表示されるので許可すると東京タワーの場所に移動した事が確認できます。

また、測位に失敗した(navigator.geolocation.getCurrentPositionでエラー)とさせたい場合にはEmulate position unavailableにチェックを入れます。

8.その他

加速度の設定だったり、ViewPortの設定?などその他色々出来るようですが、今日はとりあえずここまで。 時間があったら調べよう。。

2014年1月13日月曜日

HTML5プロフェッショナル認定試験を受験してみた

このエントリーをはてなブックマークに追加 はてなブックマーク - HTML5プロフェッショナル認定試験を受験してみた

HTML5プロフェッショナル認定試験のレベル1を受験してきて一応合格できたので自分のやった学習方法とか色々メモします。

以下参考サイトです。

LPI-Japanの公式サイト HTML5 Professional Certificaiton HTML5プロフェッショナル認定試験

HTML5認定試験策定で利用されている(?)wiki HTML5プロフェッショナル認定試験 (HTML5 Professional Certification) 試験開発Wikiサイト

目次

  1. HTML5プロフェッショナル認定試験とは?
  2. やってみた勉強方法
  3. 受験をしてみて

1.HTML5プロフェッショナル認定試験とは?

以下ざっくり記載します。詳細は公式サイトを見てください。

  • LPI-Japanがやっている。
  • 受験料金は15000円(税抜き)。
  • 受験申し込みは基本的にいつでも受験出来る。実際の試験はピアソンのテストセンターに行って受験する。
  • 受験の際にLPI-IDとピアソンのIDが必要となる。(どちらもWebからID作成可能)
  • Level1とLevel2があるが、2013年1月時点では受験できるのはLevel1のみ。Level2は現在策定中。
  • 試験時間は90分で問題数は約60問。
  • 約7割正解で合格。
  • 認定の優位性の期限があって5年間らしい。

また、以下にLevel1の試験範囲を記述します。

  • Webの基本知識
  • CSS3
  • 要素
  • レスポンシブWebデザイン
  • オフラインWebアプリケーション(概要とマニフェスト)

詳細は出題範囲(案)Detailed Objectivesを見てください。なお、それぞれに重要度があるので、勉強する際に確認しておくと良いと思われます。

また、上記の通り、Level1の場合、JavaScriptに関する詳細は範囲外です。(JSの読み込み方法とかは出てきますが)

2.やってみた勉強方法

上記を書く前に自分の状況を。

  • 所謂フロントエンジニアではないのでゴリゴリHTML/CSS書いた経験はない。たまに書く時はググりながら何とか書けるレベル。
  • Webシステムの作成経験はあり。(主にサーバーサイド)
  • HTML5自体は興味あって勉強会や情報を仕入れたりは積極的にしている。つもり。

以下に実際に僕がやった勉強法などを記載します。

また、以下に学習する上で大切だと思うポイントを記載します。

自分の実力と試験範囲を把握する

受験する人のスキルでどれぐらいどこの箇所を学習すれば良いか全然違ってくるのでまずは自分の実力を確認しましょう。

例えばフロントエンジニアの人でHTML/CSSゴリゴリ書いてますって人はwikiで試験範囲などを確認して少し復習するだけで良いかもしれません。

逆にWebシステム作成経験がない、HTML/CSSなどをほとんど書いた事がない人などの場合は、Webの基礎知識からまず学習した方が良いと思いますし、いきなり公式テキストをやるのではなく、ドットインストールの動画を見ながら初歩的な所から学習した方が良い気がします。(ドットインストールは初心者向けに説明してくれているので)

自分の場合、Webの基礎知識はある程度知っていたのであまりやらず、それ以外の箇所(特にHTML5要素/CSS3)を重点的に学習しました。

コードを書く

ただ内容を暗記してもそれはただの受験勉強になってしまって、全く意味がないのでしっかりコードを書いて、挙動を確認しましょう。

実際に書いてプロパティを変更するとどのような挙動になるかなど確認した方が頭にも入りやすいかと思います。(animationやtransitionら辺はコード書くと面白いです)

個人的には書くときのテキストエディタはSublime Textがおすすめです。 GruntのLiveReload機能を使って書くとエディタで保存するタイミングでブラウザが自動更新されたりするので便利ですが、そもそもGrunt何って人ははまりそうですし、別にやらなくて良いかと思います。

英語で覚える

タグ名やプロパティは基本的に英語の名称(または略語)だったりするのですが、その名称もしっかり覚えるべきだと個人的には思います。

例えば<ol>、<li>要素もそのまま覚えるのではなくてそれぞれOrdered list、Unordered listと覚えるとそれぞれの要素の挙動も忘れる事がないと思います。

3. 受験をしてみて

78点(えっ!)というそこまで余裕ではない点数ではありましたが、合格できました。

  • HTML5の試験だけどそれだけに特化してる訳ではなく、Webの基礎知識だったり、HTML/CSSの基礎も学習をする事が出来るのでその辺りの知識を整理出来たのは良かった。
  • 本資格を持っている=書ける、という訳ではない。実際の業務ではレガシーブラウザへの対応だったり、JavaScriptを使うことがほとんどあると思われるがその辺りの話はないため。また、試験内容も基本的には知識を問うものが中心となっているため。(知識は知識で大切)

また、受験を踏まえ、どのような人が受験すると良いと思ったかも記載しておきます。

  • HTML5に興味ある人
  • デザイナーだったりフロントエンジニアの人
  • サーバーサイドエンジニアでたまにHTML/CSS書いたりする人でもっと知識を整理したい人

資格の有用性?という意味ではまだ試行された日が経ってないので、よく分かりませんが、個人的には勉強するきっかけになったので良かったかなーと。