モーグルとカバとパウダーの日記 このページをアンテナに追加 RSSフィード Twitter

モーグルやカバ(EXカービングスキー)、山スキー(BC)の山行記録などがメインの日記です。
いろんな条件のいろんなところを、その時々の条件にあった滑り方で楽しむ、フリースキーをして遊んでいます。

検索で来られた方は、上の検索窓から再度検索していただくか、右サイドバーのカテゴリーやトピックスの項目で絞り込んでみてください。
仕事柄、コンピュータ系のネタも多いので、スキー関連ネタだけ読みたい方は[ski]、コンピュータ関連ネタは[pc]、スパム関連ネタは[spam]で絞り込んでください。

2016-05-26 (Thu)

[]revealjsで作ったプレゼン資料をphantomjsを利用してPDFrevealjsで作ったプレゼン資料をphantomjsを利用してPDF化を含むブックマーク revealjsで作ったプレゼン資料をphantomjsを利用してPDF化のブックマークコメント

こないだの勉強会で作った資料は、MarkDownで書いたものをrevealjsを使ってスライド化していました。


それだとSlideShareに載せれないのでrevealjsのPDF出力機能を使ってPDF化しました。

revealjsではプレゼンURLの後ろに「?print-pdf」と付けると、PDF出力用のページを表示してくれるので、それをブラウザのプリント機能からPDF出力させてやればPDF化することが出来ます。

ただ、それだと手でオペレートする必要があって、自動化出来ないのがちょっとイヤな感じでありました。


そしたら勉強会の時に @ktz_alias さんから、phantomjsを使うと自動化出来るよ!というナイス情報を教えていただきました。

結果的にはばっちり動いたのですが、画面サイズ指定などでちょこちょことハマったので使い方の説明を書きたいと思います。


phantomjsをインストールするためにnpmを使います。

自分はWindows環境なのですが、久しぶりにnpmを使おうとしたらなにやらエラーがでて、結局npmというかnode環境自体を入れ直すはめになりましたので、node環境を入れるところから説明します。

今、Windowsでnodeを入れるには、nodeのバージョン管理ツールであるnodistを入れて、そこから入れるのがお薦めのようです。


marcelklehr/nodist: Natural node.js and io.js version manager for windows.


ここからインストーラーをダウンロードしてインストールします。今だと0.7.2が入るはず。

% nodist -v
0.7.2

現在の安定版nodeを入れます。

% nodist stable
nodev6.2.0

これでnodeもnpmも入ります。

% node -v 
v6.2.0

% npm -v  
3.5.2

やっと本題のphantomjsを入れます。

すでにnode環境できてる方はここから。

% npm install -g phantomjs

なんかたくさんメッセージが出て、かつ途中でTypeErrorとかエラーが出るのですが、なんとか入ります。


次に、作ったプレゼン資料のrevealjsのディレクトリパスとそれを表示できるURLを調べます。

例えばパスと表示できるURL

だったとします。


revealjsのpluginの中にphantomjsで出力するための「print-pdf.js」というJSがおまけで入っているので、それを使うとコマンドラインからすぐPDFが吐けるようになっています。

「print-pdf.js」はパラメータとして、PDF用の表示URL、出力ファイル名、あとオプションで画面サイズを「480x350」のようにして渡すことが出来ます。

ただこの画面サイズがくせ者で、実際のサイズはこの2倍になります

デフォルトでは「960x700」となっており、すると画面サイズが「1920x1400」となるのでたぶん大きすぎるでしょう。

なので「480x350」と指定すると「960x700」のサイズになります。たぶんこれがちょうどいいと思います。

表示URLPDF出力用のURLにする必要があるので「?print-pdf」を追加してやります。するとコマンドに「?」が含まれてしまうことになるためURLはダブルクォートで括る必要があります


というわけでまとめると下記のようなコマンドでrevealjsで作ったプレゼン資料をPDFにすることができます。

% phantomjs C:/Users/hoge/Dropbox/Public/exampleslide/reveal.js/plugin/print-pdf/print-pdf.js \
 "https://dl.dropboxusercontent.com/u/99999999/exampleslide/index.html?print-pdf" \
 exampleslide.pdf 480x350
トラックバック - http://d.hatena.ne.jp/stealthinu/20160526

2016-05-24 (Tue)

[][]ニューロンになってみる ニューロンになってみるを含むブックマーク ニューロンになってみるのブックマークコメント

LIGさん主催の勉強会「づや会」の機械学習の回で『ニューロンになってみる』という題でLTをさせていただきました。


づや会 vol5 「機械学習の話」 - connpass

http://lig.connpass.com/event/30420/



ニューロンになってみる(reveal.js版)

https://dl.dropboxusercontent.com/u/4412680/zuyaneuro/handneuro.html


ディープラーニングとかニューラルネットワークがどうやって学習をするのか、数式で説明されてると、数式の意味するところがいまいちわからないという時があると思うんですが、実際にどんなアルゴリズムで動いているのかがわかると、以外に簡単なことを意味していたりします。

ニューロは元々生物の脳細胞の動きを元にしているので、一個一個のニューロの動きは実は単純だったりします。

そこで手で実際にニューロの動きをやってみて、ニューロがどうやって学習するのかを学習しよう、というわけです。


これ、『マッチ箱の脳』という本が元ネタで、そこではマッチ箱とマッチを使って、ニューロンのやってる学習をやっています。

ただ、勉強会でやるには準備が大変なので、紙とえんぴつかExcel上とかでやることを考えてそのフォーマットを作ってみました。


ただ、実際のLTでは時間が全然足らず、結局実際にやってみてもらうだけの時間が取れなくて、説明だけで終わってしまいうまくいきませんでした。

次回、NSEGとかでリベンジ出来たらなと思っています。

トラックバック - http://d.hatena.ne.jp/stealthinu/20160524

2016-04-22 (Fri)

[]NetCommons2で大きなサイズの画像アップロードに失敗する理由 NetCommons2で大きなサイズの画像アップロードに失敗する理由を含むブックマーク NetCommons2で大きなサイズの画像アップロードに失敗する理由のブックマークコメント

NetCommonsというCMSがあり、そこで画像ファイルアップロードするとある程度のサイズの画像なら問題ないが、大きなサイズの画像だとアップロードに失敗する、という問題が起きました。


メモリやアップロードファイルサイズの設定はすでにphp.iniでされており、phpinfo()で確認してみてもちゃんと設定が通っている状況でした。


しかしデバッガで追ってみると、携帯用のサムネイルを作るためにimagecreatefromjpegというGD関数を使うところで落ちてしまい、どうやらメモリが足らない状況でした。

どうやら、というのはここで落ちるとエラーを吐かずに死ぬので、メモリ不足のせいで死んだのかどうかをエラーログからは確認できないためです。


ちなみに、imagecreatefromjpegすると、ファイルサイズに関係なく画像のサイズx4byte分のメモリを必要とするらしく、例えば4000x3000pixの画像をアップロードするとそれだけで48Mのメモリが消費されることになります。


で、ぐぐってみると似たようなことで困っている人はいるようなのですが、どうもphp.iniではなく「ini_set」でやると大丈夫、という話がありました。ほんとに??


PHP GD Allowed memory size exhausted - Stack Overflow

http://stackoverflow.com/questions/2827908/php-gd-allowed-memory-size-exhausted


そこで、imagecreatefromjpegを呼ぶ前で「ini_set('memory_limit', '512M')」として試したところ、ちゃんと動くことがわかりました。


そうなると今度はなんでphp.iniで設定した値が使われないんだろう??という疑問がわくわけですが、その理由は実はCMS側の設定でした。


NetCommonsには

「システム管理」→「サーバ設定」→「PHP最大メモリ数」

という項目があり、ここでPHPの最大メモリ数設定が出来るとなっているのですが、どうやらここで設定した値でmemory_limitが設定されてしまうように書かれているようです。

ここに512M等設定すると、大きな画像アップロードでも落ちないようになりました。

トラックバック - http://d.hatena.ne.jp/stealthinu/20160422

2016-03-22 (Tue)

[][]CakePHP2.7以降はPHP5.2では動かない CakePHP2.7以降はPHP5.2では動かないを含むブックマーク CakePHP2.7以降はPHP5.2では動かないのブックマークコメント

今さらながらPHP5.2の環境で動くシステムを作らなければならなくて、でもまあCakePHP2系はPHP5.2対応だから大丈夫だよね、と思って作ってたのです。


が… 本番環境で動かしてみたら下記のようなエラーが出てはまりました。

PHP Parse error: syntax error, unexpected T_STATIC, expecting T_STRING or T_VARIABLE or …


実はCakePHP2.7以降だとPHP5.3以降対応になっているとのこと。

2.7 移行ガイド — CakePHP Cookbook 2.x ドキュメント

http://book.cakephp.org/2.0/ja/appendices/2-7-migration-guide.html

CakePHP 2.7 で必要な PHP バージョンは、 PHP 5.3.0 に引き上げられました。


CakePHP3系はPHP5.2では動かないことを確認していたのでCakePHP2系を選択したのですが、2.6と2.7でPHPの対応バージョンに違いが出てきてしまうのでした。

インストールCakePHP Cookbook 3.x ドキュメント

http://book.cakephp.org/3.0/ja/installation.html

システム要件

PHP 5.5.9 以上


また、DebugKitでもエラーが出たのでこれも調べてみると2013年7月時点ですらPHP5.3以降となっているそうでした。

PHP5.3以上のときだけDebugKitを読み込む - mikage014の日記

http://d.hatena.ne.jp/mikage014/20130704/1372895705

DebugKitのmasterブランチは2013年7月時点で

となっています。


ちなみにcomposerも対応バージョンは

Introduction - Composer

https://getcomposer.org/doc/00-intro.md

Composer requires PHP 5.3.2+

となっており使えません。

…のに使ってしまっていました。こっちはちゃんと確認すりゃわかることだったのに…


ということで自分のチェックミスが問題でした。

もう2016年時点で今さらPHP5.2環境で新規開発する案件なんてなかなかなかろうとは思いますが、つい普通の環境での開発と同じ感覚で環境構築してしまうとはまるということで。

トラックバック - http://d.hatena.ne.jp/stealthinu/20160322

2016-03-10 (Thu)

[]Vagrantの共有フォルダをapacheの公開ディレクトリにしていると更新が反映されない問題 Vagrantの共有フォルダをapacheの公開ディレクトリにしていると更新が反映されない問題を含むブックマーク Vagrantの共有フォルダをapacheの公開ディレクトリにしていると更新が反映されない問題のブックマークコメント

今、WindowsCakePHPの開発を行っているのですが、Vagrant上にCentOSを入れ、共有フォルダ /vagrant 以下にディレクトリを作ってそこにCakePHPを入れ、apacheの設定でそこをDocumentRootにして使っています。

開発はWindows上のNetBeansで直接共有フォルダのソースを編集するようにしています。

これだとWindows上のXAMPP使ってるのと同じような感じに開発が進められます。


さてその環境で、Javascriptのファイルを編集しても編集が反映されない、一度ファイル名を変更して、再度ファイル名を戻すとちゃんと動くんだけど… というような相談を受けました。

最初、CakePHPキャッシュブラウザキャッシュを疑ったのですが、Cake関係ないファイルでテストしても同様の状況が再現できて違うことがわかりました。

しかも色々とテストしてみると、単に修正が反映されない時ばかりではなく、なんか過去に修正した時の内容が出てきたり、一部欠けたものが出てくることがあったりと、不安定な動作をすることがあることがわかりました。


そこで今度はApache自身のキャッシュを疑ったのですが、Apacheにそんな機構あったっけ?と思ったのと、あと他ではこういうの経験したことが無かったから、Vagrantの共有フォルダがらみなんだろうなあ、と考えました。

そこで「vagrant 共有フォルダ apache」でぐぐったところすぐに答えがわかりました。


Vagrantの共有フォルダをDocumentRootに設定した場合にファイルの変更が反映されない | trapon : experience

Virtualbox上のApacheでホストマシンと共有している静的ファイル(CSSなど)の更新が検知されない問題を解決する方法 | tipshare.info


VirtualboxやVagrantではそこそこメジャーなトラブルっぽいです。

結局、共有フォルダはNFSとかと同じような機構なので、EnableMMAPとEnableSendfileが効いているとうまく動かないことが起こるそうです。


/etc/httpd/conf/httpd.confのデフォルト設定ファイルにもこの2項目の記述がありコメントになっているため、そこを外してやるか、無ければ下記のようにoffの記述を追加してやります。

EnableMMAP off
EnableSendfile off

これだけで無事に解決できました。


ただ自分の例のように、途中にキャッシュサーバフレームワークを利用している場合、どこのキャッシュのせいでこの問題が起こっているのか、がわかるまでに結構時間がかかるのではないかと思います。


(追記)

さとうふみやすさんより下記のように情報をいただきました。


VirtualBox の shared folder で sendfile(2) がバグってるやつを調べた - hibomaのはてなダイアリー

Nginx や Apache で sendfile(2) サポートを有効にしていると VirtualBox の shared folder ( /vagrant ) のファイルを ホストOS側からで更新しても反映されないバグが知られています。

・generic_file_splice_read はファイルが書き換えられているかどうかを確認しない

・ホストOSでファイルが更新されていても generic_file_splice_read は知らず知らず 古いページキャッシュを返してしまう

という問題

VirtualBoxのvboxsfに問題があるようで、根本解決できる道はありそうなんですが、未だにパッチされてないからなかなか難しそうなのか。

トラックバック - http://d.hatena.ne.jp/stealthinu/20160310

2016-02-02 (Tue)

[]古いWebアプリMySQLからエクスポート文字化け 古いWebアプリのMySQLからエクスポートで文字化けを含むブックマーク 古いWebアプリのMySQLからエクスポートで文字化けのブックマークコメント

perl+MySQLで書かれた古いWebアプリをリプレースする件があるのですが、まず今登録されているデータをエクスポートしてくるところからはまりました。


いわゆるレンタルサーバ上で動いておりシェルは使えないため、webの管理画面からphpMyAdminを使ってエクスポートするようになっていました。


で普通にエクスポートするとデータが全部文字化け


テーブルエンコード設定を確認すると「latin1_swedish_ci」になっていました。

そういや昔のMySQLって、エンコード指定しないデフォルトの状況だと「latin1_swedish_ci」になるんだったかな?


perlのコードからDBの中身はEUCであることがわかっていたので、エクスポート時の文字コードEUCに指定してみたり、エクスポートされて出力されたテキストファイルをEUCに変換したりしてみたのですが改善されませんでした。


で、ぐぐってみるとそのまんまな事例と解決法がありました。

8年前のエントリーで「XOOPS」の単語が時代を感じます。


latin1_swedish_ciで文字化け | Home and Abroad

http://waji-mart.com/homeandabroad/latin1_swedish_ci%e3%81%a7%e6%96%87%e5%ad%97%e5%8c%96%e3%81%91/


エクスポートしてきたテキストを秀丸で開いて「欧文」で保存する、というものでした。

欧文で保存してから再度開きなおすと、今度はちゃんとEUC文字コードが自動認識されて文字化けせずに開いてきました。

大変に助かりました。ありがたい!


EUCのデータだからとEUCで出力しようとがんばってた方向が間違ってたようです。

トラックバック - http://d.hatena.ne.jp/stealthinu/20160202

2016-01-28 (Thu)

[]vagrantサーバで時間を動かしてテストする vagrantサーバで時間を動かしてテストするを含むブックマーク vagrantサーバで時間を動かしてテストするのブックマークコメント

vagrantで動かしている仮想サーバ上に開発/テスト環境を作ってあり、そこで date で時間を進めてテストを行おうとしていました。

しかし、ntpdを動かしていないのに勝手に時間がすぐ戻ってしまい、なんで?となりました。

ただVMwareとかVirtualBoxのようなVMでは、ホストのサポートが無いとクライアントサーバの時間がずれてしまう現象が良くあるので、それを補正する機能が付いているのですが、VirtualBoxで動いているvagrantでもその機能がデフォルトで動いているのだろうな、と思いました。

で調べてみるとやっぱりそうで、デフォルトでは時間の同期が行われてしまうため、止めるためにはvagrantファイルに設定を追記する必要があるのだそうです。


Vagrantでホストマシーンとクライアントマシーンの時間を同期させない方法 - Qiita

http://qiita.com/wataru420/items/6441b69ec5fb90743fd1

config.vm.provider :virtualbox do |vb|
  vb.customize ["setextradata", :id, "VBoxInternal/Devices/VMMDev/0/Config/GetHostTimeDisabled", 1]
end

ということで、設定を追加してvagrant上で動いているクライアントサーバ再起動したところ、無事に同期しないようになりました。

トラックバック - http://d.hatena.ne.jp/stealthinu/20160128

2015-12-24 (Thu)

[]Picate (Picasaタグ編集ヘルパー)という簡易Webサービスを公開します Picate (Picasaタグ編集ヘルパー)という簡易Webサービスを公開しますを含むブックマーク Picate (Picasaタグ編集ヘルパー)という簡易Webサービスを公開しますのブックマークコメント

Picasaのタグ編集ヘルパー「Picate」

http://k2net.hakuba.jp/picate/


(追記)

Google、写真管理サービス「Picasa」終了へ、「Googleフォト」に統合 -INTERNET Watch

GoogleフォトではPicasaにあった「タグ」機能がないため、このPicateも使えなくなります。

残念…

(追記ここまで)


この記事はNSEGアドベントカレンダーの17日目の記事です。


前年度、うちの下の子どもが幼稚園の年長さんだったのですが、うちの幼稚園では父兄が卒園アルバムを制作することになっており、嫁がアルバム制作委員長となってしまいました。

アルバム制作委員長というのが大変な仕事だ… というのは、助言を聞きに言った歴代のアルバム制作委員長たちがみな「もう二度とやらない」と語っていたというエピソードを聞いて理解しました。


参考まで、下記に非常にためになるエントリーを上げておきたいと思います。


結果的に、ここまでは大変ではなかったのですが、やはり相応に大変な思いをしていました。

そして主にPCやネットワーク系のことで補佐をすることになった自分も、そこそこ大変でありました。


アルバム作るとき、大きく分けて

1. 写真を集める

2. 写真を選択する

3. 写真を加工する

4. 写真をまとめてページを作る

という感じの作業が必要です。

一般的にアルバムを作ると言った時にぱっとイメージする4の部分は、あくまで最後の、一番楽な?工程であり、その下準備が非常に、大変に労力がいるようでした。


特に選択する部分は、どの子がどんだけの枚数写っているかをチェックする必要があったり、その中でなるべく良い表情のものを選択する必要があったりと、実は一番神経を使うパートだったりするようです。


自分がこのアルバム作成の話を聞いて、どうやれば一番楽に出来るだろうかと考えた時、写真を集めたり選択する部分は「Picasa」でやればよかろう、という意見を出しました。

PicasaならGoogle+アカウントを作る必要があるものの、1アカウントで15GBまで無料で利用でき、Picasaアプリを入れなくても、Web上でグループ内で写真を見たり、アップロード出来る機能があり、写真にタグ付けをして整理することが出来るからです。

非常に多数の写真があるので、各種イベント毎の写真に対し、アルバム委員が分担してアルバムに載せる候補を「○○ちゃん」とか「プール参観」とかのタグをつけながら選択していく、ということを考えました。


…と思ってやってみてもらったのですが、確かにそう、機能はあるんだ、でもダメじゃんこれ… ということがいくつも出てきました。それが下記3点でした。

Google+ に自動で転送されてしまうため、Picasaウェブアルバムのサイトにいちいち戻る必要がある、とかは些細な事です)


まず、画像をアップロードでやってもらうのは、心理的に非常に敷居が高い、ということ。

これは、USBメモリーに入れてもらって、それを嫁がPicasaアプリから一括でアップロードする、ということで解決しました。

  • タグ共有の問題

最初はメンバーごとにアカウントを取ってもらい、共同編集アルバムを使ってアップロードや閲覧する、というスタイルで考えていたのですが、タグ情報は共有されない、という問題がありました。

そのため結局、アルバム委員用のアカウントを作成し、みなそのアカウントログインして表示やタグの編集をしてもらう運用にしました。

  • タグでの絞り込み表示ができない

そして一番えええ?と思ったのが、タグでの絞り込みをして表示することが出来ない、という問題です。

PicasaはPCのアプリケーションソフトWebサービスとがあるのですが、アプリケーションではタグごとに写真を抽出する方法がある(タグリストからそのタグを選択するという非常に当たり前なやりかたで)ものの、なんとWebサービス側ではそういう機能が提供されていないのです!

すでに結構タグ付けを行ってから、その機能が無くてすごく使いにくいという報告をうけた(自分たちは基本、アプリケーションのほうで確認していたため気が付かなかった)ため、急遽なんとかする必要が出来ました。


そこで作られたのがこの


Picate (Picasaタグ編集ヘルパー)

http://k2net.hakuba.jp/picate/


という簡易的なWebサービスなのです。


このページを開くと、Googleアカウントログインしていない状況だと、最初にPicasaログインアカウントの入力が求められます。

これはOpenIDでのログインになりますので、こちら側ではなんら情報を取得したり保持したりはしていません。

というか実は、このページ内にあるjavascriptのみで機能が完結していますので、このページを自分のホームページ領域にコピーして、カスタマイズして使うことも出来ます。


ログインすると、そのアカウントPicasaに上げているアルバムのリストとそのリスト内で使われているタグのリストが表示されます。

f:id:stealthinu:20151224132015p:image


この中からアルバムを選択するか、タグを選択すると、そのアルバムでそのタグの付いている写真のみがこのページ下記に全て表示されます。


写真を選択すると、Picasa Webサービスの写真編集ページが表示されますので、タグの編集はそちらで行なうことが出来ます。


ソース見ていただくと、アルバムからタグの取得するところがなんだか複雑になっていることがわかると思うのですが、PicasaのWebAPIはなぜか、アルバム毎とタグ毎の写真取得APIはあるものの、アルバムとタグをどちらも指定出来るAPIがないのです。

なので仕方なく、一旦タグで抽出したものをスクリプト内でアルバムidでフィルタして実装しています。

他にも、ところどころ足りないところのあるAPIで、使いにくかったです。

あと編集後の反映が、Picasa WebサービスAPIから触るときにはタイムラグがあったり(それも酷い時だと日単位くらいで…)なかなか難しいところがありました。


でも、このPicateがあればPicasaを使って写真選択をみんなで行なう、というのは結構良い感じで動きました。

ので、これから幼稚園のアルバム制作しないといけない、という方はぜひご利用してみてください。


(関連)

Lenovo G560でムービーメーカーが起動できない問題 - モーグルとカバとパウダーの日記

ムービーメーカー2012で縦長になる問題 - モーグルとカバとパウダーの日記

GIMPで拡大縮小がうまくできなくなる問題 - モーグルとカバとパウダーの日記

[][]SNS時代のスパム手法 SNS時代のスパム手法を含むブックマーク SNS時代のスパム手法のブックマークコメント

この記事はNSEGアドベントカレンダーの24日目の記事です。


…といいつつ新規に作ったものではなく、これは去年の11月にとあるセキュリティ系の講演で喋った内容のプレゼン資料です。

今、スパマーたちはメールによるスパムから、SNSを使ったスパムへと軸足を移しており、SNSスパム手法はどんなものがあってどうやって広めたりマネタイズしているのか、を紹介したものです。


https://dl.dropboxusercontent.com/u/4412680/naganoispbouhan/snsspam.html


今のスパムの特徴が

であること、そして今後はより

  • システムの穴より人間の穴を狙う
  • SNSファースト・スマホファースト
  • 低率で大量配信より標的型で高率に
  • 「サービス」と「スパム」の差があいまいに

という方向へむかうであろうこと、を解説しています。

トラックバック - http://d.hatena.ne.jp/stealthinu/20151224

2015-12-10 (Thu)

[]JenkinsからSelenium IDEテストケースを使って自動テストを行う JenkinsからSelenium IDEのテストケースを使って自動テストを行うを含むブックマーク JenkinsからSelenium IDEのテストケースを使って自動テストを行うのブックマークコメント

この記事はNSEGアドベントカレンダーの10日目の記事と、

Selenium/Appium Advent Calendar 2015の22日目の記事です。

概要

Selenium IDEというWeb UIの自動テストを行うツールで作ったテストケースを、Jenkinsというビルドやテストの自動化を行うCI継続的インテグレーションツール)から呼び出して、定期的にWeb UIのテストを行う環境を構築します。


以前、Web UIのテスト自動化をしたいと考えていた時、

JenkinsとSeleniumでJavaScriptのテスト自動化、最初の一歩。第1回 日本Seleniumユーザーコミュニティ勉強会 − Publickey

のエントリーを読んで、JenkinsからSelenium IDEを使ったWeb UIのテストの定期実行できるということを知りました。

普通JenkinsからはSelenium Web Driverを利用すると思いますが、テストプログラムを書けなくてもSelenium IDEなら使えるという層がいる場合、Selenium IDEでのテストを使えるのは大きいです。

なのでこれはぜひ導入したいと思いました。


しかし、このエントリーではSeleniumhq Pluginを入れれば簡単に出来そうな感じに見えたのですが、実際に導入しようとすると結構色々とノウハウが必要でした。

そこで、Jenkins + Selenium IDEの導入方法と、その環境へのジョブの投入方法について説明します。

導入環境
注意点

環境構築

Jenkinsのインストール
selenium serverの準備
% cd /var/lib/jenkins
% ln -s selenium-server-standalone-2.42.2.jar selenium-server.jar
Jenkinsの設定

プラグインインストール

システム設定

  • 「Jenkinsの管理」→「システムの管理」選択
  • 「グローバルプロパティ」→「環境変数」をチェック
    • 日本語変換指定
      • CentOS5の場合XMODIFIERSの設定をしないとFirefoxの動作がうまくいかない
      • キー:XMODIFIERS
      • 値:@im=scim
    • Javaエンコーディング指定
      • レポートページの日本語が文字化けを防ぐ
      • キー:_JAVA_OPTIONS
      • 値:-Dfile.encoding=8859_1
  • 「Xvfb installation」選択
    • Name:Xvfb
    • ジョブ作成時に利用するXvfbを指定するための名前なので適当でよい。
  • Selenium Remote Control」
    • htmlSuite Runner:/var/lib/jenkins/selenium-server-standalone.jar
サーバFirefoxの準備
% yum install firefox xorg-x11-server-Xvfb

クライアント側(Windows)でXの表示可能にする
動作テスト

サーバFirefoxを起動してプロファイル生成と表示の確認

サーバFirefoxSelenium IDEプラグインを導入

サーバFirefoxからテストケースが実行可能か確認

テストケース内のパスの違いやFirewallの問題のため、Windows上では問題なかったテストケースサーバ上では動作しない場合がある。

そのため、サーバ上のFirefoxでもテストケースがきちんと動くか確認する。

  • /var/lib/jenkins などにテスト的に作成したテストスイート「example_suite_1.html」とテストケース「example_test_1.html」のようなファイルをアップロード
  • サーバ上のfirefoxを起動してSelenium IDEを開く(検索バー横に「Se」と書いてあるアイコンか「Tools」→「Selenium IDE」)
  • テストスイート「example_suite_1.html」を読み込み(Selenium IDEの「File」→「テストスイートを開く」)
  • テストスイート実行(「アクション」→「テストスイート全体を実行」)

selenium-server経由で自動テスト可能か確認

$ export XMODIFIERS="@im=scim"
    • CentOS5の場合、XMODIFIERSの設定をしないとFirefoxの動作がうまくいかなかったので注意
  • selenium-server経由でテストケースを実行
$ java -jar selenium-server-standalone.jar -htmlSuite *firefox http://www.example.com example_suite_1.html example_result_1.html
  • サーバ上のfirefoxの画面でテストが正常に動作し、終了後自動的にfirefoxが閉じられることを確認
    • テストが終了してもfirefoxが閉じられない場合、テストスイートではなくテストケースを実行していないか確認する。

画面出力をXvfbにして自動テスト可能か確認

  • Windows上でMobaXTermを起動
  • Xvfbを起動する
$ Xvfb :99 -ac -screen 0 1024x768x24 &
$ export DISPLAY=:99
$ export XMODIFIERS="@im=scim"
$ java -jar selenium-server-standalone.jar -htmlSuite *firefox http://www.example.com example_suite_1.html example_result_1.html
  • コンソールに何行かINFOが表示され最後に「15:09:34.372 INFO - Killing Firefox...」と出て終了し、「example_result_1.html」にテスト結果が書かれていることを確認

自動テスト項目の作成

大まかな流れ

  • Jenkinsの管理画面から自動テストの「ジョブ」を作成する
  • テストで使われるSelenium IDEのテストファイルをsftpで置く
  • 動作確認と定期実行指定
新規ジョブ作成
  • Jenkinsのダッシュボードから「新規ジョブ作成」
  • ジョブ名:
    • 半角英数の他のジョブ名と重ならない適当な名前
    • サーバ上のworkspaceディレクトリ名がそのままその名前で付けられるため、日本語ではなく半角英数で付けることを推奨。
    • この例では「example_test」とする。
  • フリースタイル・プロジェクトのビルド」を選択。
  • 「OK」を押すと詳細設定ページヘ遷移。
  • ソースコード管理
    • 「なし」を選択。
  • ビルド・トリガ
    • 一旦、なしで設定。
    • テストして問題なく動いたら「定期的に実行」で定時テストにする。
  • ビルド環境
    • 「Start Xvfb before the build, and shut it down after.」をチェック。
    • 「高度な設定」を選択
    • Xvfb screen:「1024x768x24」
    • スクリーンショット撮ることを考えて画面サイズと色数の指定をする。
  • ビルド手順の追加」→「SeleniumHQ htmlSuite Run」を選択
    • browser:Firefoxでテストする場合は「*firefox
    • startURL:対象となるサーバURLhttp://www.google.com/」など
    • suiteFile:Selenium IDEで作った『テストスイート』ファイル。テストケースでは『ない』ことに注意。
    • この例では「selenium/example_suite_1.html」とする。
    • resultFile:テスト結果が書かれるHTMLファイル名。レポート生成のため別フォルダにすること。
    • この例では「result/example_result_1.html」とする。
  • ビルド後の処理の追加」→「Publish Selenium Report」
    • 「SeleniumHQ htmlSuite Run」の「resultFile」と同じものを指定。
    • この例では「result/example_result_1.html」とする。
  • ビルド後の処理の追加」→「Publish Selenium Html Report」
    • 「SeleniumHQ htmlSuite Run」の「resultFile」の『ディレクトリのみ』であることに注意。
    • この例では「result/」とする。
    • ここで間違ってresultFileと同じものを指定するとぬるぽを吐いてしまうため要注意。
    • またresultフォルダを別にせずテストケースと同じところに出力していると、そちらも解析しようとして失敗する。
  • 「保存」を押すとプロジェクトのページヘ遷移。
テストスイート・テストケースファイルの登録
テストの動作確認と定期実行設定
  • テストの動作確認
    • Jenkinsのダッシュボードに先ほど登録した「example_test」プロジェクトが出ているので選択。
    • ビルドの実行」を選択すると自動テストが開始する。
    • ビルド履歴」に出てくる日時の横▼から「Console Output」を見るとテストの実行状況が確認出来る。
    • Selenium Report」を見ると各テストの結果詳細を確認できる。
    • ワークスペース」からファイルを確認出来るため、スクリーンショットの確認も可能。
  • 定期実行の設定
    • プロジェクトの「設定」を選択
    • ビルドトリガ」→「定期的に実行」をチェック
    • スケジューリング:毎日早朝4時にテストする例「H 4 * * *」

*1CentOSは諸事情により6ですらなく5です。しかし6でもあまり変わらないと思います。

トラックバック - http://d.hatena.ne.jp/stealthinu/20151210

2015-11-10 (Tue)

[]gitで取ってきたファイルのタイムスタンプをcommit日付に直す gitで取ってきたファイルのタイムスタンプをcommit日付に直すを含むブックマーク gitで取ってきたファイルのタイムスタンプをcommit日付に直すのブックマークコメント

git clone等で取得したファイルのタイムスタンプは、commitされた日時ではなく、そのgitコマンドを発行した日時になってしまいます。

なんかオプション指定でもすれば、commitした日時にできるのかな?と思ったのですが、簡単にはできないみたいで、gitwikiタイムスタンプを変更するperlスクリプトが書かれていました。


Setting the timestamps of the files to the commit timestamp of the commit which last touched them

https://git.wiki.kernel.org/index.php/ExampleScripts#Setting_the_timestamps_of_the_files_to_the_commit_timestamp_of_the_commit_which_last_touched_them


で、これと同様のことをshellスクリプトで行うものが下記サイトにありました。


コミット日付をタイムスタンプに復元したい

http://www.shigemk2.com/entry/git.timestamp


今まわりの人にMobaXTermを勧めていることもあって、MobaXTerm上でこれを使えるようにしたかったのですが、MobaXTermで使われているbusyboxだとdateの挙動の違いで動かなかったため、一部を修正して使えるようにしてみました。


git-set-file-times for busybox

https://github.com/stealthinu/git-set-file-times4busybox

for FILE in `git ls-files`; do
  TIME=`git log --pretty=format:%ci -n1 ${FILE} | sed -e "s/\([+-][0-9]\{2\}\)00$/\1:00/"`
  echo -e "${TIME}\t${FILE}"
  touch -t "${TIME}" ${FILE}
done

busyboxのdateコマンドでは「+0900」という書式でのTZ指定はエラーになってしまうため「+09:00」という形に置き換えるようになっています。

トラックバック - http://d.hatena.ne.jp/stealthinu/20151110