ちょこっとIっTぇみる

個人的に気になるITネタを気分でつらつらと。

vagrant on mac で rspec with capybara (selenium)

mac vagrant 環境の railsのテストを rspec with capybara (Selenium)を使ってテストしたいってときに

Vagrant環境下におけるブラウザテストについて(Chrome編) | hifive開発者ブログ
を参考(◎とてもわかりやすい!!)にやってみた上で個人的に迷った点を補足した内容です。

前提

vagrant側でrails+rspec with capybara 環境構築済み

gem 'rspec-rails'
gem 'capybara'
gem 'selenium-webdriver'

macchromeインストール済(ブラウザはmac上のものを使う)

設定の手順

1) Vagrantfileに下記を追加 し、vagrant 起動

Vagrant.configure(***) do | config | 〜 end の間に記載

 config.vm.network :forwarded_port, guest: 3000, host: 3000  

仮想環境側の3000番ポートがそのまま母艦の3000番ポートにつながっています。そのため母艦の http://localhost:3000/ にアクセスすると、仮想環境の http://localhost:3000/ にアクセスしたのと同じになります。

・・母艦って表現わかりやすいなぁ。ホストとゲストってピンとこないし。

2) vagrant環境の rails 開発環境の spec/rails_helper.rb に下記 追記

 # use chrome driver with capybara
 Capybara.javascript_driver = ENV['DRIVER'] ? ENV['DRIVER'].to_sym : :chrome

 Capybara.app_host = [:safari, :chrome, :firefox, :iphone, :ipad].include?(Capybara.javascript_driver) ? "http://localhost:3000" : "http://10.0.2.2:3000"
 Capybara.default_wait_time = 10
Capybara.run_server = false

 Capybara.register_driver :chrome do |app|
  Capybara::Selenium::Driver.new app,
   browser: :remote,
  desired_capabilities: Selenium::WebDriver::Remote::Capabilities.chrome,
   url: "http://10.0.2.2:4444/wd/hub"
 end

参考元からコピペ後 IPを 「10.0.2.2」に変更
10.0.2.2 は vagrant(ゲスト)側からみた 「母艦」(ホスト)側のIPとなるとのこと↓
参考:VirtualBox 内のゲスト OS からホスト OS にアクセスしたい · GitHub

3)vagrant環境 で railsサーバ 起動 = localhost:3000 で動く

rails s

※当方 動かず。。→ rails 4.2 だったため

rails s -b 0.0.0.0

参考:rails sで起動したサーバにブラウザからアクセスできない - Qiita

4) Selenium Server を ダウンロードし、起動

macvagrant側ではありません。)上で作業します。

ダウンロード

こちらより、バージョンを選び 、standalone版をダウンロード
→ 当方は 2.4を使った。最新版はエラーがでたので。

起動 (しつこいですが、mac上で!
java -jar /Users/mac_user/Downloads/selenium-server-standalone-2.40.0.jar


5) rspec テストの実行 (vagrant側)

bundle exec rspec spec/features/path/to/xxx_spec.rb

以上。

【小ネタ】PHPのエイプリルフールネタは終わった?

本日は4/1ですね。様々なエイプリルフールネタがネット上を賑わしていますが、


phpのエイプリルフールネタは、

phpinfo();

を実行すると、phpのロゴが変わっている(主に動物)
って内容だったのですが、

久々(多分3年ぶり)本日実行してみたら、、
変わってない。。普通でしたね。。

いつからやめちゃったのかな。。

…そして、気づいた。はてなブログのエイプリルフールネタ。
http://staff.hatenablog.com/entry/2013/04/01/000000
今記事作ったら日付が 2013-3-32 となってる。

Titanium Studio 推奨環境 スペック

最新(2013/1/16時点)のTitanium Studio で開発するための推奨スペック等を。
参考 : Titanium サポートページより

  1. ハード
    • メモリ: 2~3G (Titanium Studioのみの使用量。実際の使用には更にOSや常駐アプリのメモリ使用量も考慮する必要有り。)
    • OS : Mac OS X 10.7(Lion) ~ 10.8(Mountain Lion) 、Windows 7 ~ Windows 8
  2. JDKJava Development Kit
    • Java SE 6 rev 10 以降
      • MAC:OSにてインストール済み。
      • Windows:Oracleより「Java SE 6 update 最新版ver」の32bit版インストールが必要
        ※64bit版は使えない。OSが64bitでも32bitをインストールする
  3. Android SDKAndroid SDK Manager よりインストール)
  4. Xcode (iOS開発用)
    • 4.2 ~ 4.5.2
    • iOS 5.1には 4.3以上、iOS 6.0の開発には 4.5以上が必要

他のツールは最新版をインストールしとけば問題無しかと。

Windows7 Titanium Studio 開発環境構築手順 ~ Android アプリ開発準備 ~

Windows 7 に Titanium Studio でAndroidアプリを開発するための環境構築手順をさっくりまとめます。

大変参考になるページがありました。 64bit対応した手順ですので、こちらもぜひご参考に。

JavaJDK)のインストール

  1. http://www.oracle.com/technetwork/java/javase/downloads/index.html から [Java SE 6 Update 33]の[JDK Download]をクリック
  2. 「Accept License Agreement」を選択してから 「Windows x86」(32bit)「Windows x64」(64bitの場合)⇒64bitの場合も「Windows x86」をクリックする⇒ダウンロード(■図1)
  3. インストールexeを実行してインストール完了
  4. ユーザ環境変数JAVA_HOME」JDKをインストールしたPATH(例:C:\Program Files\Java\jdk1.6.0_33\)を設定してください。

■図1
f:id:nicestblue:20120627105518p:plain
■図2 環境変数設定(コントロールパネル>システムとセキュリティ>システム からの遷移)
f:id:nicestblue:20120626204917p:plain

Android SDKのインストール

  1. http://developer.android.com/sdk/index.html より ダウンロード
  2. インストーラexeを実行してインストール (※ インストールパスを「 C:\Android\android-sdk 」に設定しました。)
  3. インストールされたファイル内の「adb.exe」を別のフォルダにコピー (※1
  4. システム環境変数「path」に 追加 (※2、■図3)
  5. ⇒ 完了後 SDK Manager 起動 し、AndroidAPIをダウンロード
    【全てのAPIをダウンロードするのが一番確実です。】

f:id:nicestblue:20120627112649p:plain

※1 adb.exe の コピー
コピーするファイル

 C:\Android\android-sdk\platform-tools\adb.exe

コピー先フォルダ( ここへコピーアンドペースト

 C:\Android\android-sdk\tools

※2 システム環境変数「path」 に

C:\Android\android-sdk\platform-tools;C:\Android\android-sdk\tools;

を追加

■図3 pathの設定方法
f:id:nicestblue:20120627115849p:plain

Titanium studio

『Titanium Mobileで開発するiPhone/Androidアプリ』の著者である @donayama さんが、補完稿としてインストール周りの章を追記・修正されたものを公開されています。
こちらをベースに説明します。

ダウンロード~インストール

  1. 上記資料(PDF) 2-3. Titanium Studioのインストール に添って Windows用インストーラーexe ファイルをダウンロードして下さい。
  2. 2-3-2. Windows 7 の項を参考にインストールを行なって下さい。

今回 (2012/6/27 現在)インストールしたTitanium Studio の バージョン

Titanium Studio, build: 2.0.2.201205311912
(c) Copyright 2012 by Appcelerator, Inc.  All rights reserved.
Build: jenkins-titanium-rcp-master-204 (origin/master)
Date: 31 May 2012, 19:15:04

開発環境 確認作業 (Androidアプリを構築してみる)

上記資料(PDF)2-5. Hello Worldプロジェクトの作成をガイドにすすめてみましょう。

  1. Titanium Studio 起動 (■図4-a workspace を各自指定してください。)
    • 起動時にログインを促されます(■図4-b) ダウンロード時に取得したアカウントでログインしましょう。
      ※ Titanium Studioはネットに繋がっていないと起動できません。
    • 起動後git supportの設定を促すダイヤログがでますが、だまってOKして、しばらく待ちましょう。
  2. 起動後 Titanium Mobile Projectを新規作成(■図5)
  3. Projectを設定⇒構築(■図6)
  4. Android Emulater用にビルド⇒起動(■図7)
    • Titaniumの画面下部「Console」欄にいろんなログが表示されますが、無視して待ちましょう。(^-^)
    • Androidエミュレーターは起動が遅いです。…じっくり待ちましょう。
  5. エミュレータが立ち上がって、Console欄のログ出力が収まったら、エミュレータ内でアプリをたちあげてみましょう。(■図8)

■図4-a
f:id:nicestblue:20120627122236p:plain
■図4-b
f:id:nicestblue:20120627124510p:plain
■図5
f:id:nicestblue:20120627124350p:plain
■図6
f:id:nicestblue:20120627134854p:plain
■図7
f:id:nicestblue:20120627135934p:plain
■図8
f:id:nicestblue:20120627143147p:plain

… というわけで、これにて 無事(!?)Androidアプリが開発できる環境が整いましたね。
お役に立てれば幸いです。m(__)m

JavaScriptでGoogleカレンダーのデフォルト表示月を動的にする方法 (2

前回からものすごーく時は過ぎているのですが、続編をちゃんと書こうとおもいます。

※説明は上記前回既読を前提に書いております。

本内容の前提条件

というわけでそのjavascriptからgoogleの日付パラメータを動的に変える実装をさらっとご紹介。

1)googleカレンダーの日付パラメータに渡す javascript date.js を作成

冗長すぎるという。。m(__)m

/*
   from(yyyymm01)生成
   現在日付 > middday なら 翌月、そうでなければ当月01日を返す

*/
function getDate(midday){
        var addmonth = 1;
	var date = new Date();
	var year = date.getFullYear();
	var day = date.getDate();
        if (day > midday) {
            addmonth = 2;
        }
	var month = date.getMonth() + addmonth;

	if (month < 10) {
		month = "0" + month;
	}
	
	var strDate = year + month  + "01";
	return strDate;
}

/*
   to(yyyymm02)生成
   現在日付 > middday なら 翌月、そうでなければ当月02日を返す

*/
function getDateto(midday){
	var date = new Date();
	var year = date.getFullYear();
	var day = date.getDate();
        if (day > midday) {
            addmonth = 2;
        }
	var month = date.getMonth() + addmonth; //getMonth は 0-11を取得

	if (month < 10) {
		month = "0" + month;
	}
	
	var strDate = year + month  + "02";
	return strDate;
}

/*
   「&dates=yyyymm01/yyyymm02」を
    googleカレンダー埋め込み iframe<iframe src="https://www.google.com/calendar/embed?...."  
    のsrc属性の末尾に足しこむ。
 */
function setGoogleDates(midday) {
//alert (getDate(1));
        var midday = 12;
        var obj= document.getElementsByTagName("iframe")[0];                   // ページ内の一番最初(0個目)のiframe=googleカレンダーである場合。
        obj.src = obj.src+'&dates='+getDate(midday) + "/" + getDateto(midday); // ここで足し込む
}

あとは1)のdate.jsをサイト上に配置し、
googleカレンダーを埋め込んだHTML内で

<script type="text/javascript" src="./date.js"></script>  <*-- HTMLとdate.jsが同じ階層においてある場合 -->

とかすれば、これで完成なう。。のはず。。

自分と同じ境遇(HTML上でgoogleカレンダーを動的に表示したい。)の方がいれば。 お役に立てれば幸いでございまする。

JavaScriptでGoogleカレンダーのデフォルト表示月を動的にする方法 (1

こんにちは。

今日は うちの会社のスクールの空きスケジュールを
googleカレンダーを使って公開するときに

「今月もう終わるのに今月のカレンダーの予定が出てても意味ないなー、来月の予定を表示したいなー」

現在日付が月の末日近く 例)20日 になったら、翌月のカレンダーを表示したい。

ってことで、まず 公開するgoogleカレンダー側で表示範囲を指定する方法を調べると。

Googleカレンダーで月を指定して埋め込み

に iframe srcパラメータに

&dates=表示範囲from(yyyymmdd)/ 表示範囲to (yyyymmdd) 
例)&dates=20120501/201205/31  ⇒ 2012/5/1 ~ 2012/5/31 の期間を表示する。

見たいな感じでいけるらしい。

で、表示するカレンダーは月単位なので、

律儀にtoを月末にしなくとも、fromより新しい日であれば

いいのでは?ってことで、

&dates=20120501/20120502 (5/1~5/2)

で試してみたところ結果は一緒。OKこれならtoを生成するのもfrom+1日で済むのでらくちん。

ってことで動的に表示するフローは以下のとおりに。


1.月の末日近くの日付を定義 (例 20
2.現在日 > 1.の日付の場合
googleカレンダーパラメータの末尾に下記値を追加

    &dates=翌月一日/翌月二日 ex) &dates=20120501/20120502


してみようとおもう。

で、PHPでちゃちゃっとやるかってとこですが、
…実はうちのスクールのwebサイトはCMSで構築してて
そのコンテンツはphpコード非対応。。あべしっ。。

というわけで、動的にするには。。javascriptでやっつけるしか無いですね。。

続きは(2 は次回までのおたのしみに。。

(2はこちら。

どうしても Titanium Studio 環境を windows 7 に 構築できない人へ

初ブログです。

スマホアプリ向け開発環境 Titanium studio の環境準備にには

多くの方が詳細な記事にされています(ありがたい限りですね。)

下記のページを参考させて頂きました。

Windows7環境でTitanium Studioをインストール

Titanium Studio導入~Windows編~

 

それらの情報を拝借したのですが、いかんせん癖があり、構築までハマリまくりました。

で、試行錯誤の末、なんとか 新規アプリ、kitchensink (サンプル)の起動まで行くことができました。


ということで。

上記の記事を踏まえてもTitanium studioのWIN7へのインストールが解決できない方に

もしかしたら助けになるかもと思い

実体験から感じたポイントを記載してみました。

titanium studioのバージョンは以下の通り

titanium studio
Build: jenkins-titanium-rcp-master-138 (origin/master)
Date: 14 February 2012, 12:10:43

以下ポイントです。 (※ 不要なこともあるかもしれませんが。。他に術がなければお試し下さい。)

JDK

  • jdk 6 をインストール(※7はだめです。)
    こちらのURLより↓のDownloadボタンで取得したものをインストール
     f:id:nicestblue:20120404205447p:plain 
  • インストールディレクトリは カッコを含むディレクトリ以下にするのはやめる。例) program files(x86)
     (自分はC:\Program Files\Java\jdk1.6.0_31 にインストール)
  • 環境変数pathに「上記インストールディレクトリ/bin」を追加
       (自分の場合: ;C:\Program Files\Java\jdk1.6.0_31\bin   )

android SDK

  • sdkをインストールしたディレクトリ(※)\android-sdk\platform-tools\adb.exe
      ⇒ インストールしたディレクトリ (※) \android-sdk\tools ディレクトリへコピー  
      (※)自分の場合: c:\Android  
  • 環境変数pathを  インストールしたディレクトリ (※)  \platform-tools; インストールしたディレクトリ (※)  \tools へのフルパスを追加
       (自分の場合  : C:\Android\android-sdk\platform-tools;C:\Android\android-sdk\tools)

android sdk manager

  • 起動は 「管理者として実行」 。

    f:id:nicestblue:20120405113440p:plain

     
  • androidsdkは 2.2(v8)を全てダウンロード。(時間がかかるができれば全てverダウンロードするのが吉)
     

    f:id:nicestblue:20120405120118p:plain

 ■titanium studio 

  • [app explorer]-[Run Configurations...] で android APIGoogle APIs Android 2.2 を指定しましょう
       

    f:id:nicestblue:20120405122849p:plain

     

    f:id:nicestblue:20120405124656p:plain

  • 結構起動まで時間かかるので、じっとまつ
  • eclipseベースのソフトなので基本重い。他にも 重いソフトを立ち上げているとちゃんと動かないかも。
  • こまったらPC再起動。