PR TIMESデザイナー&エンジニアブログ BREAK TIMES

PR TIMES Developer Blog(デザイナー&エンジニアによる開発者ブログ)

PR TIMES Developer Blog

当ブログは下記URLに移転しました。
https://developers.prtimes.jp/

古いWebアプリケーションのブラウザテスト

エンジニアのアカイです。

今回はブラウザテストを行ってみます。

具体的には、Capybara/Poltergeistを使用して、無人テストを行います。

これらはRuby on Railsのテストのために作られている雰囲気がありますが、
他のアプリケーションでも使用できます。

条件は以下の通りです。

  • 3画面構成のフォーム(入力・確認・完了)
  • 入力は正常値のみ
  • 自動的に完了画面まで動作させる
  • サーバ上で実行
環境構築

ubuntu 15.10 で環境を作成します。
ruby/bundlerはインストール済みです(2.2.4)。

PhantomJS
$ wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
$ tar xjf phantomjs-2.1.1-linux-x86_64.tar.bz2
$ sudo mv phantomjs-2.1.1-linux-x86_64 /usr/local/
$ sudo ln -s /usr/local/phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin/phantomjs
$ sudo aptitude -y install libfontconfig
テストコード置き場
$ mkdir test
$ cd test
$ bundle init
$ vi Gemfile
$ bundle install --path=vendor/bundle


Gemfileの内容は以下のようにしました。

使わないものもありますが、あまり重要ではないのでそのままにしておきます。

# A sample Gemfile
source "https://rubygems.org"

# gem "rails"

gem 'capybara'
gem 'poltergeist'
gem 'headless'
gem 'rspec'
gem 'activesupport'
gem 'pry'

rspecを使用しますので、準備します。

$ bundle exec rspec --init

spec_helper.rbファイルを編集して、Capybara/Poltergeistを使用できるように設定します。

# coding: utf-8
require 'bundler'
Bundler.require

require 'capybara/rspec'
require 'capybara/poltergeist'
require 'headless'

Capybara.register_driver :poltergeist do |app|
  Capybara::Poltergeist::Driver.new(
    app,
    js_errors: false,
    inspector: true
  )
end

Capybara.default_max_wait_time = 10
Capybara.default_driver = :poltergeist
Capybara.javascript_driver = :poltergeist
Capybara.run_server = false
Capybara.app_host = 'http://172.17.1.111:4567' # テスト対象のホスト設定です

RSpec.configure do |config|
  config.include Capybara::DSL
  config.before(:suite) do
    Headless.new(destroy_on_exit: true).start
  end
end

テストは存在しませんが実行してみます。

$ bundle exec rspec
No examples found.


Finished in 0.00093 seconds (files took 0.34605 seconds to load)
0 examples, 0 failures

test/vendor/bundle/ruby/2.2.0/gems/headless-2.2.2/lib/headless/cli_util.rb:9:in `ensure_application_exists!': Xvfb not found on your system (Headless::Exception)
        from test/vendor/bundle/ruby/2.2.0/gems/headless-2.2.2/lib/headless.rb:77:in `initialize'
        from test/spec/spec_helper.rb:26:in `new'
        from test/spec/spec_helper.rb:26:in `block (2 levels) in '
        from test/vendor/bundle/ruby/2.2.0/gems/rspec-core-3.4.3/lib/rspec/core/example.rb:425:in `instance_exec'
        from test/vendor/bundle/ruby/2.2.0/gems/rspec-core-3.4.3/lib/rspec/core/example.rb:425:in `instance_exec'
        from test/vendor/bundle/ruby/2.2.0/gems/rspec-core-3.4.3/lib/rspec/core/hooks.rb:357:in `run'
        from test/vendor/bundle/ruby/2.2.0/gems/rspec-core-3.4.3/lib/rspec/core/configuration.rb:1724:in `block in run_hooks_with'
        from test/vendor/bundle/ruby/2.2.0/gems/rspec-core-3.4.3/lib/rspec/core/configuration.rb:1724:in `each'
        from test/vendor/bundle/ruby/2.2.0/gems/rspec-core-3.4.3/lib/rspec/core/configuration.rb:1724:in `run_hooks_with'
        from test/vendor/bundle/ruby/2.2.0/gems/rspec-core-3.4.3/lib/rspec/core/configuration.rb:1679:in `with_suite_hooks'
        from test/vendor/bundle/ruby/2.2.0/gems/rspec-core-3.4.3/lib/rspec/core/runner.rb:118:in `block in run_specs'
        from test/vendor/bundle/ruby/2.2.0/gems/rspec-core-3.4.3/lib/rspec/core/reporter.rb:77:in `report'
        from test/vendor/bundle/ruby/2.2.0/gems/rspec-core-3.4.3/lib/rspec/core/runner.rb:117:in `run_specs'
        from test/vendor/bundle/ruby/2.2.0/gems/rspec-core-3.4.3/lib/rspec/core/runner.rb:93:in `run'
        from test/vendor/bundle/ruby/2.2.0/gems/rspec-core-3.4.3/lib/rspec/core/runner.rb:78:in `run'
        from test/vendor/bundle/ruby/2.2.0/gems/rspec-core-3.4.3/lib/rspec/core/runner.rb:45:in `invoke'
        from test/vendor/bundle/ruby/2.2.0/gems/rspec-core-3.4.3/exe/rspec:4:in `'
        from test/vendor/bundle/ruby/2.2.0/bin/rspec:23:in `load'
        from test/vendor/bundle/ruby/2.2.0/bin/rspec:23:in `
' $

xvfbがないといわれていますので、インストールします。
そういえば、フォントを入れていなかったので、念のため追加しておきます。
これは、スクリーンショットを撮る場合に、漢字ひらがななどを表示するためです。

$ sudo aptitude -y install xvfb fonts-ipafont


そしてもう一度実行します。

$ bundle exec rspec
No examples found.


Finished in 0.17762 seconds (files took 0.40034 seconds to load)
0 examples, 0 failures

$

今度はエラーが発生せずに終了しました。

テストの記述

テストはspecディレクトリ以下に設置します。

rspecに関する説明は省略します。

qiita.com


それでは、早速テストを設置してみます。

フォームは3画面構成で、以下のようになっています。

path タイトル ボタン
/form Registration Form Confirm
/confirm Input Confirm Regist
/complete Registration completed -

spec/form_spec.rb

# coding: utf-8
require 'spec_helper'
describe 'アカウント登録' do
  before do
    visit '/form'
  end

  it 'フォームを正しく表示する', js: true do
    expect(page).to have_title 'Registration Form'
  end
end
$ bundle exec rspec
.

Finished in 0.94537 seconds (files took 0.31413 seconds to load)
1 example, 0 failures

$


次は、画面遷移を含めたテストを追加します。

# coding: utf-8
require 'spec_helper'
describe 'アカウント登録' do
  before do
    visit '/form'
  end

  it 'フォームを正しく表示する', js: true do
    expect(page).to have_title 'Registration Form'
  end
  it 'フォームに入力して確認ボタンを押す', js: true do
    data = {
      account: "account-name-#{SecureRandom.hex(8)}",
      pwd: SecureRandom.hex(8)
    }
    data.each do |k, v|
      fill_in k, with: v
    end
    click_on 'Confirm'
    expect(page).to have_title 'Confirm'
  end
end
$ bundle exec rspec
..

Finished in 1.09 seconds (files took 0.32112 seconds to load)
2 examples, 0 failures

$


最後に、登録完了までのテストを追加します。

# coding: utf-8
require 'spec_helper'
@page = nil
describe 'アカウント登録' do
  before do
    @data = {
      account: "account-name-#{SecureRandom.hex(8)}",
      pwd: SecureRandom.hex(8)
    }
    visit '/form'
  end
  it 'フォームを正しく表示する', js: true do
    expect(page).to have_title 'Registration Form'
  end
  it 'フォームに入力して確認ボタンを押す', js: true do
    @data.each do |k, v|
      fill_in k, with: v
    end
    click_on 'Confirm'
    expect(page).to have_title 'Input Confirm'
  end
  it 'フォーム入力から登録完了まで行う', js: true do
    @data.each do |k, v|
      fill_in k, with: v
    end
    click_on 'Confirm'
    click_on 'Regist'
    expect(page).to have_title 'Registration completed'
  end
end
$ bundle exec rspec
...

Finished in 1.34 seconds (files took 0.34232 seconds to load)
3 examples, 0 failures

$

…リクエストパターンごとにitで分けると、pageの内容が空になってしまうようです。

いろいろ試してみましたが、最初から最後までを通して行うテストになってしまいました。

とりあえず目的は達成できましたので、今回はこれで完了とします。


この類のテストはルーチン的なものを自動的に行うことで、
時間を有効に使えるというのが大きいと思います。

ただ、動作があまり見えないこともあり、かなりハマりやすそうですので注意しましょう。

情報技術によってアップデートされた社会派推理小説「ビックデータ・コネクト」

PRTIMESのエンジニア深川です。毎度のIT系読書感想になります。

今回は「Gene Mapper」、「アンダーグラウンドマーケット」、「オービタル・クラウド」など、ソフトウェア技術を活用したSFミステリーに定評がある藤井太洋さんのビックデータ・コネクトを紹介します。

2015年ベスト小説なんて紹介も各所でされてしまったところの出遅れ気味の感想ですが、ぜひ未読のITエンジニアには読んでほしいと気持ちで感想とともに紹介します。

■目次

  1. 紹介書籍のあらすじ
  2. 他の方の感想
  3. 自分の感想
  4. 参考

■1. 紹介書籍のあらすじ

内容紹介
いま、そこにある個人情報の危機を描く警察小説

公立図書館の私企業との提携を進めるエンジニアが誘拐された。サイバー犯罪捜査官とはぐれ者ハッカーのコンビが個人情報の闇に挑む。
内容(「BOOK」データベースより)
京都府警サイバー犯罪対策課の万田は、ITエンジニア誘拐事件の捜査を命じられた。協力者として現れたのは冤罪で汚名を着せられたハッカー、武岱。二人の捜査は進歩的市長の主導するプロジェクトの闇へと…。行政サービスの民間委託計画の陰に何が?ITを知りつくした著者が描くビッグデータの危機。新時代の警察小説。

[> http://www.amazon.co.jp/dp/4167903288 >]

■3. 自分の感想

マルウェアによるパソコン遠隔操作事件の取り調べから始まり、そこから振り込め詐欺、行政の民間委託施設のシステムの開発現場で起こった誘拐事件の捜査を進めるうちに事件を追う主人公達は……」という、ニュースなどで聞いたことのあるキーワードがふんだんに入ったあらすじはフックがとても効いていると思いませんか?本書は、その期待を裏切ることはない名作です。


私も、前職などで個人情報を取り扱うシステムの開発に携わると何をもって個人情報とするかという定義について法やシステム的な定義に触れることがあり、ユーザとしてサービスを利用するために個人情報と行動履歴を渡したりしていると、運営会社が所有している複数のサービスの情報が紐付いた場合、どのように個人が定義されるのか、というようなことを考えることがありますが、マイナンバーの発行と利用が始まった今に本書を読んでみると、個人情報にまつわる様々な要素を緊迫感のある犯罪小説に構成されていることに唸る次第です。


読了後には普段のスマホやネットや会員サービスの利用について、違った見解と一段と深い興味を持てるスリリング内容です。


また、人月的に大規模なシステム開発で多々起こりうる問題について、登場人物がその現場に赴くことで、その様々な問題を見ることになるのですが、このあたりの描写もITエンジニア的にあるある感が満載です。それも単なるネタではなく犯罪小説として重要な要素になるので、読んだときのお楽しみに。


著者もインタビューで答えていますが、
http://hon.bunshun.jp/articles/-/3604?page=2
パスワードは推測されない、暗号は解読されない、スーパーハッカーによるご都合展開をしない、など、情報技術を使ったフィクションで良く見られる虚構的要素が極力排除され、現実の技術の延長線上にある情報技術描写はITエンジニアが読んでも鼻白むことはありません。


「社会派推理小説」とは、「荒唐無稽なトリックを否定し、現実性のある社会性の強い題材をあつかい、動機を重視した推理小説」とされています。本書は前述した通り、「(情報技術の)荒唐無稽なトリックを否定し、(システム開発やシステムや行政に紐付けられた個人情報という)現実性のある社会性の強い題材をあつかい、動機を重視した(2015年に書かれた最新の)推理小説」として、私は本書をとてもおすすめできます。


予定されているという続編も非常に楽しみです。

中国における電子決済

今回中国における電子決済事情についてお話しをしたいと思います。

2015年度、中国の電子決済の実際の取引金額は9.31万億元(162兆円)。アリペイ(支付宝)とWeChat paymentはその中で最も使われている決済方法です。今回さらに2月18日から中国に上陸したApple Payを加え、それぞれの概要を紹介します。

アリペイ

f:id:breaktimes:20160229230420j:plain

アリペイとは「アリババグループ」が提供する中国最大規模の電子決済サービスです。2004年12月が設立され、2014に世界最大のオンライン決済サービスになりました。2015年6 月にユーザー数が4億人になった、世界中に180くらいの銀行及びVISA、MasterCardなど提携しています。アリペイはオンライン決済だけではなくて、金融業務も行っています。市場シェアはおよそ8割を占めています。

WeChat Payment

f:id:breaktimes:20160229232313p:plain
「WeChat(微信)」が展開している決済サービス「WeChat Payment」はアリペイに続き第二のオンライン決済サービスです。ユーザー数もすでに4億人を突破し(WeChatのユーザー数は6億人)、使い方としては自分名義の銀行カードをバンドし、決済する際にQRコードを読み取るだけで、決済が完了します。

Apple Pay

f:id:breaktimes:20160229231901j:plain
ご存知の通り、Apple Payはアップルの電子決済サービスです。中国がアメリカ、イギリス、オーストラリア、カナダの次5番目となります。Apple Payは以上の二つのサービスと違って、オフラインでも決済できる NFCという技術が使われています。アップルはすでに中国の19の銀行と提携し、本格的に中国の電子市場に参入しました。

ちなみに、日本では銀聯カード(中国が発行するクレジットカード、発行枚数は世界一)の次、アリペイやWeChat Paymentの環境も整えつつ、観光客にとってかなり便利になりました。
http://jp.unionpay.com


次、この三つの決済方法の違いについて見てみましょう

  • ハードウェア

アリペイ、WeChat Payment:ほぼすべてのスマートフォン
Apple Pay:最新のアップル製品だけ

  • ネットワーク環境

アリペイ、WeChat Payment:必要
Apple Pay:オフライン決済時に要らない

  • 技術

アリペイ、WeChat Payment:QRコード
Apple Pay:NFC

  • 機能

アリペイ、WeChat Payment:オンライン・オフラインの決済、振込、金融業務など
Apple Pay:オンライン・オフラインの決済

便利さを追求すると同時に、そのサービスの安全性も重視しなければならないと思います。そして、日本はApple Payの次の市場になるでしょうか?

IFTTTを利用してAlexaからSlackにタスクを送る方法

こんにちは。PR TIMESのエンジニアの吉です。

みなさんはAlexaについてご存知でしょうか。簡単に説明しますとAlexaはAmazon版siriです。siriはiphone,ipadから呼び出すことができますがAlexaはAmazon Echoから呼び出すことができます。

Amazon Echoはまだ日本では発売されていませんが、Amazon USAから購入できます。
http://www.amazon.com/Amazon-SK705DI-Echo/dp/B00X4WHP5E/ref=sr_1_1?ie=UTF8&qid=1456033135&sr=8-1&keywords=echo

AlexaではAmazon Prime Music/Spotify/pandoraなどから音楽を再生、Kindle Booksの読み上げAmazonから商品購入、タスク管理など様々なサービスを利用することができますが、日本では残念ながら使えるサービスが限られています。

でも安心してください!! IFTTTを使えば日本でも様々なサービスをAlexaに連携させることができます。
f:id:breaktimes:20160221161225p:plain


IFTTTにはAlexa関連レシピがたくさんありますので、日本でもAlexaを利用できます。一例として今回のブログではAlexaからslackにタスクを送る方法を紹介したいと思います。まず、IFTTTのユーザー登録をし、ログインしましょう。

ブラウザーヘッダーのユーザー名をクリックしてcreateを選択
f:id:breaktimes:20160221161526p:plain

thisをクリック
f:id:breaktimes:20160221161618p:plain

キーワード検索にalexaを入力し選択する
f:id:breaktimes:20160221161638p:plain

ConnectをクリックしAmazonアカウントを入力してAlexa認証を行う
f:id:breaktimes:20160221161658p:plain

Continew to the next stepをクリック
f:id:breaktimes:20160221161716p:plain

Choose a Trigger > Ask what's on your To Do Listを選択
f:id:breaktimes:20160221161738p:plain

Create Triggerをクリック
f:id:breaktimes:20160221161753p:plain

thatをクリック
f:id:breaktimes:20160221161808p:plain

Choose Action Channelのキーワード検索にslackを入力し選択する
f:id:breaktimes:20160221161823p:plain

ConnectをクリックしSlackの認証を行う
f:id:breaktimes:20160221161838p:plain

Continew to the next stepをクリック
f:id:breaktimes:20160221161857p:plain

Choose an Action > Post to channelを選択
f:id:breaktimes:20160221161910p:plain

タスクを表示したいSlackのチャンネルを選択しCreate Actionをクリック
f:id:breaktimes:20160221161923p:plain

Create Recipeをクリック
f:id:breaktimes:20160221161943p:plain

レシピ作成完了
f:id:breaktimes:20160221162013p:plain

わずか数分でAlexaとSlackの連携が完了しました。AlexaからタスクをSlackに通知してみましょう。

alexa put message on my to do list

いかがでしょうか。IFTTTという素晴らしいサービスを利用すればAlexaは日本でも十分活用できます。また、Alexaは自分でもプログラミングができます。エンジニアにとっては魅力的ですね。音声でサーバーを構築できるVoiceOps時代は来るかもしれませんよ!

次回はAlexa Skills Kitを利用してAlexaのプログラミング方法について紹介したいと思いますのでブログ読者登録よろしくお願いします!

FITC TOKYO 2016レポート

こんにちは、PR TIMESデザイナーの新井です。

先日、デザイン・アート・テクノロジーの分野で活躍しているクリエイターを招待してプレゼンテーションを行うFITC TOKYO 2016にスポンサーとして協賛させて頂きました。
f:id:breaktimes:20160222200327j:plain
イベントは2日間にわたって開催されましたが、今回の記事では1日目に参加したときのレポートをご紹介させていただきます。

FITCは、参加者にインスピレーションを与え、学ぶ場を提供し、課題を投げかける、デザインとテクノロジーに特化したカンファレンスやセミナーを世界中で開催しています。2002年より、トロントアムステルダム、東京、サンフランシスコ、シカゴ、ソウル、ニューヨーク、ロサンゼルスをはじめ世界の各都市で、志を同じくする専門家や学生を集めたイベントを開催しています。FITCのイベントは常に、インタラクティブ、テクニカル、デザイン、ビジネスに関連する最先端の話題を取り上げ、急速に変化し続ける業界で活動する参加者たちが最新の情報を得るために欠かせない、専門性の向上およびネットワーキングの機会を提供しています。FITCは独自で、または他のイベント団体と協力して、年間を通じて多数のイベントを開催しています。

公式サイト

完璧なWebデザイナー

いつも仕事で使用しているAdobeのプレゼン。AirbnbやUber、Kickstaterといったクリエイティブなサービスはどんどんでてきているが、webは型が決まってきてつまらないものになってきている。その原因の一つに色々なデバイスが登場し、それぞれに対応するのが大変になったということです。それを解決するためにレスポンシブデザインがうまれ、レスポンシブデザインをリアルタイムに実現するAdobe Museを使用すると、デザイナーがコンテンツをいかにうまく見せるかということをデバイス間を超えてクリエイティブに表現できるといった内容でした。プロダクト開発の背景からプロダクトのメリットまで一連の流れが素晴らしいプレゼンでした。デザインからHTML/ CSS/ JavaScriptも書き出せるそうなので試しに使ってみてはいかがでしょうか。

型を破る

ロスアンゼルスを拠点に広告、ポートレイト、映画、サメの写真を撮っているフォトグラファーのMichael Mullerのプレゼン。これまでの写真を年代順に紹介し、彼が撮りたい対象や仕事を実現するためにあらゆる手段を使って実現してきたことを紹介してくれました。広告写真で成功を収めた彼がどうしても撮りたかったのが、映画の宣伝ポスターの写真でした。そこで彼はたまたま赤信号で車を止めた時に、ストーム・トルーパーがタバコを吸っていたのでそれを写真におさめました。それから、チャイニーズシアター前などにいるパフォーマー達を撮影し始めたのです。その写真が映画会社の偉い人の目にとまり、マーベル関連の写真は彼がほとんど撮影するようになったそうです。

言い訳を言わずにやってみること

ハイクオリティな広告や映画のVFXで知られるThe MillでECDをやっているRama Allenによるプレゼンテーションは今話題のVRについてでした。Oculus RiftやLGなど各社からヘッドマウントディスプレイが発表され、2016年はVR元年になるといわれていますよね。Ramaはアートとテクノロジーを融合していかに観客に魔法をかけられるかということをThe Millの事例を元に紹介してくれました。
感情移入させること
独房の囚人の生活を体験できる“6X9: AN IMMERSIVE EXPERIENCE OF SOLITARY CONFINEMENT”では、観客を感情移入させるために光で1日の移り変わりを表現し、実際の独房で聞こえてくる音を録音して仕様しているそうです。音は視覚とタイミングを合わせると、視覚以上にVRの体験を作る上で重要になるそうです。
www.youtube.com

全身をつかう
https://j.gifs.com/yP68xn.gif
全身をつかって仮想現実をコントロールするというのは新しいことではありません。
ですが、360度の映像とモーションを組み合わせたものは新しい試みです。
LEXUSがホバーボードを開発しましたが、それを体験できるのはバルセロナにある公園だけです。
それをどこでもできるようにして欲しいという依頼があり、つくったのがこちらです。VRには人を不快にするVR酔いがあると言われています。フレームレートを何回も調整して酔いをおこさないようにしたそうです。これからゲームと映画の間のコンテンツがどんどんでてくるのだろうなと思いました。

どの人も安全なところを捨て去り、挑戦しているのが印象的でした。
後半戦はまた次回に

BREAK TIMES NITE 〜急成長サービスをつくっている人の考え方

こんにちは。
PR TIMESフロントエンジニアの山田です。

昨日、6回目となる「BREAK TIMES NITE 〜急成長サービスをつくっている人の考え方」を開催しました!
新オフィスに移転して1ヶ月、外部からのお客さまを招いてのイベントは初となります。
今回は株式会社トランスリミットの代表取締役 高場大樹さまをお招きして開催いたしました。

17:00
準備中開始です!
f:id:breaktimes:20160219195126j:plain

19:00
軽い懇親会からスタート。セッション前にみんなで交流して、場を暖めます。
f:id:breaktimes:20160219194950j:plain

19:40
まずはPR TIMESのことをお話させて頂きました。
Techを使ってプレスリリースを進化させているPR TIMESを説明。
f:id:breaktimes:20160219195316j:plain

19:50
トランスリミット高場さまの登壇です。
「Brain Wars」「Brain Dots」をヒットさせて来た考え方を熱く語って頂きました。
f:id:breaktimes:20160219195522j:plain



参加者のみなさま、ありがとうございました!
7回目に向けて準備を始めます!
次回もご期待ください。

chrome エクステンション 7選

フロントエンジニアの本間です。 

今回は業務スピードが上がる便利なGoogle Chrome拡張機能を紹介します。
エンジニアに限らず、色々な人が使える汎用的な物もご紹介します。
使えそうな物があれば幸いです。

まずはこれ 

1,
chrome.google.com

Webデザイナーの方は必須!ブラウズ上ならどこでもカラーコードを調べらます。操作も簡単、調べたいところでクリックするだけ


2,
chrome.google.com

先ほどのピクセル版です。どこでもピクセルが図れます。こちらの操作はドラックするのみ! 


3,
chrome.google.com

これは表示しているサイトのhtmlをチェックしてタグの過不足などを検出してくれます。初歩的なミスを指摘され、赤面する前に入れときましょう。 


4,
chrome.google.com

サイトのキャプチャを取ってくれます。全体、部分キャプチャ、簡単な図形や文字で注釈をつけられます。この手のキャプチャツールの中では一番使いやすいかなと思います。 


5,
chrome.google.com

英語のドキュメントを読む時の強い味方です。カーソルを乗せると単語の辞書を引いてくれます。さらにその場で発音もチェックできます。 


6,
chrome.google.com

Angular.jsの開発補助。scopeのwatch数を計測できるのでSPAを作る上で、必ずぶつかるメモリリーク問題の解決策を考える上で、数値の測定は欠かせません。 


7,
chrome.google.com

だいぶ前に話題になりました。音で周辺の人にURLを共有できます。可愛らしい音の中にURL情報が入っていると思うと、びっくりしますよね。使い道はともかくアイディアが素晴らしいです。



いかがだったでしょうか。
便利な物はガンガン使用して、リズム良く開発したいですね。 
JavaScriptで自作もできるので、自分の便利ツールを作成するのも面白いと思います。

古いPHPアプリケーションの環境刷新

エンジニアのアカイです。

今回は古い環境で動作している古いWebアプリケーションの対応ということで、
環境を可能な限り新しいものに入れ替える試みです。

古い環境は以下のようになっています。


この状況は、CentOS6の標準rpmをインストールした場合に選択されるものですが、
PHP7も正式にリリースされた今、この環境を使用し続けるのは抵抗があります。

想定している状況は以下の通りです

  • サーバ群をすべて新しい環境へ移行
  • OSは最新のものを使用
  • Apache/PHPはアプリケーションが動作する範囲で最新を選択
  • 上記環境へ移行するためのプログラム修正ができる環境構築

今回はこれらの作業ログになります。

対処すべき内容の確認

PHP公式にバージョン移行のガイドがあります。
関数は仕様変更や非推奨・廃止などがあると思いますので、確認は必須です。

5.3系以前から入れ替える場合、この内容を確認しただけで眩暈がします…

細かいコーディング部分の対応はできた環境で徐々に行うとして、
まず初めにある程度ページを閲覧できる状態にするところまでやりたいと思います。

環境構築

最初に、CentOS6で実行することを想定したchefレシピをそのままCentOS7で動かしてみました。

  * yum_package[php-devel] action install
    - install version 5.4.16-36.el7_1 of package php-devel

そのままではPHPは5.4になるようです(apacheは2.4系です)。

今回の場合は、少なくとも5.6系にはしたいので、phpenvを使用して最初から5.6系をインストールしてしまいます。

実際にはansibleを使用してインストールしましたが、
実行コマンドはおおむね以下のような感じです。

# git clone https://github.com/CHH/phpenv.git
# phpenv/bin/phpenv-install.sh
# cd ; mv .phpenv /usr/local/phpenv
# git clone https://github.com/CHH/php-build.git /usr/local/phpenv/plugins/php-build
# echo -e "export PHPENV_ROOT=/usr/local/phpenv'\nexport PATH=\$PHPENV_ROOT/bin:\$PATH\neval \"\$(phpenv init -)\"" > /etc/profile.d/phpenv.sh
# git clone https://github.com/garamon/phpenv-apache-version.git /usr/local/phpenv/plugins/phpenv-apache-version
# . /etc/profile
# phpenv install 5.6.18
# cp /etc/httpd/modules/libphp5.so /usr/local/phpenv/versions/5.6.18/
# phpenv apache-version 5.6.18

httpd起動は様々な設定を修正しないと動作しない状態でしたが、
なんとか起動・ページの表示を確認できました。


pearの対処について

古いPHPアプリケーションの移行において、これはかなり多い問題のように思います。

基本的には、可能であればすべての部分で廃止・差し替えが望ましいです。

使用せざるを得ない場合、種類が少ない場合でも、
PEARの基本クラス部分に修正が必要になるため、
逐一確認して修正していく必要があります。

また、インストールする場合、pearコマンド/composerが使用できますが、
今回の目的においては避けるべきです。

理由は、pearのライブラリはphp4系向けに作られたものもある状態なので、
パッケージ管理を使用してしまうと、非推奨コードを除去する際に各ツールの管理下にあるコードを変更することになってしまうからです。

現状使用しているものについてはリポジトリ管理下に含めて直接編集し、
追加でパッケージは使用しない方針がよいでしょう。


参考までに、pearをcomposerで管理する場合は以下のようにします。

$ composer config repositories.0 pear http://pear.php.net
$ composer require "pear-pear.php.net/Net_SMTP=*"
$ composer require "pear-pear.php.net/Net_UserAgent_Mobile=*"
$ composer require "pear-pear.php.net/Net_UserAgent_Detect=*"

細かい部分は未検証ですが、具体的な対処は例えば以下のように行いました。


PEAR.php

-function isError($data, $code = null)
+public static function isError($data, $code = null)

-function staticPushErrorHandling($mode, $options = null)
+public static function staticPushErrorHandling($mode, $options = null)

-function staticPopErrorHandling($mode, $options = null)
+public static function staticPopErrorHandling($mode, $options = null)


上記の修正でとりあえずStrictメッセージ等は除去できました。

これで、移行に向けてプログラム修正を行える環境を作成できました。


あまり役に立つ情報はありませんが、バージョンの古い環境はいつか限界を迎えますので、
時間と労力の許す限り、安心できる動作環境を構築する努力をしましょう。

簡単にビデオ通話アプリをつくれるSkyWayのご紹介☆*:.。. [WebRTC]

PR TIMES エンジニアのうさみです。
先日、開発していたアプリをお披露目した時のことです。

社内スタッフの声:
「このアプリにビデオ通話機能があるといいですね」
「・・・というより、無いと不便で困ります」

私:
「・・・(あと1日でビデオ通話機能の追加!?)」

元々の仕様としては、SlackのAPIを叩いて指定したSlackのチャンネルへ通知するというシンプルな機能だけだったのですが、急遽ビデオ通話機能を追加することになったのでした。こういうシチュエーション、よくありますよね・・・

ビデオ通話機能をもったアプリ開発の経験は無く、時間もありませんでした。また、社内でのみ利用するアプリでしたので、開発コストを掛けずに確実に動作させるために何かいい方法は無いかと調べている中で、NTTコミュニケーションズ様の「SkyWay」というサービスを知りました。

nttcom.github.io

以下のサイトには、NTTコミュニケーションズ様が「SkyWay」を開発された経緯や今後の展開について記載されています。(2015年8月時点)

IP電話の次に起こるパラダイムシフト "WebRTC"への挑戦
http://www.ntt.co.jp/journal/1508/files/jn201508036.pdf

国内製で且つ大手企業さまによるサービス提供、また、公式のサンプルや日本語のドキュメントもあるため、取り入れやすそうだと直感し、利用してみることにしました。何より無料で利用できるとのいうのはうれしいです (* ´ - ` *)

WebRTCを利用するのは初めてでしたので、そもそも「WebRTC」とは何かというところから・・・

WebRTC (Web Real-Time Communication)とはWorld Wide Web Consortium (W3C)が提唱するリアルタイムコミュニケーション用のAPIの定義で、プラグイン無しでウェブブラウザ間のボイスチャットビデオチャット、ファイル共有ができる。

引用元:WebRTC - Wikipedia


下記サイトではWebRTCについてまとめていらっしゃいます。

・WebRTC とはなんだったのか ← WebRTCの基本的なことはコチラ
https://gist.github.com/voluntas/67e5a26915751226fdcf

・WebRTC トラノマキ ← WebRTCの今後についてはコチラ
https://gist.github.com/voluntas/59a135343538c290e515

つまり、チャット機能やファイル共有機能、そしてビデオ通話機能を実装するために必要となるもの(面倒なところ)を提供してくれるサービスですね。サーバーを用意してバックエンド側を実装する必要がないので、クライアント側のアプリ開発に注力することができるのはいいですね。


どういうものか把握できましたので、いざ実装を・・・といきたいところですが、今回はご紹介までにさせていただき、実装方法については割愛させていただきます。

下記の公式のサイトとサンプルを見ていただくと実装にあたり丁寧に説明されていますのでご確認ください。

・SkyWay iOS/Android SDK ← SkyWayを利用するにあたっての事前準備についてはコチラ
https://nttcom.github.io/skyway/info-mobile.html

・SkyWay iOS SDK DOCS ← SkyWayを利用して開発している際に参考にするページはコチラ
https://nttcom.github.io/skyway/docs/#iOS

・SkyWay iOSサンプルアプリ ← チャット機能やビデオ通話機能を搭載したアプリのサンプルはコチラ
https://github.com/nttcom/SkyWay-iOS-Sample

公式のサイトの他に下記サイトも参考にさせていただきました。

qiita.com


実際に実装してみたところ、あっという間にビデオ通話アプリをつくることができました。1時間・・・いえ、30分もかからなかったでしょうか・・・まさに開発コストをかけずに実現することができました! ただ、実機での検証には十分に時間を費やす必要がありますね ( ´ - ` )

以上の参考にさせていただいたサイトやサンプルでは、端末を識別するのに利用するIDが動的なのですが、今回つくりたかったアプリは固定IDにする必要がありました。

次回は、固定IDによる実装方法をご紹介できればと思います☆*:.。.

複数サーバーでバッチを平行起動した時に便利すぎたSQLトランザクション

こんにちは、PR TIMESエンジニアの落合です!

みなさんも、普段バッチを作成する事があると思います。
1台のサーバーで、10分に1回などの実行に関しては、処理内容の事だけを考えてコーディングすればいいですが、
負荷分散や、バッチサーバーを冗長化する場合、複数台のサーバーで同時刻に実行したい場合もあると思います。
ただ、何も考慮せずに、複数台で起動してしまうと、重複した処理を実施してしまいます。
今回は、そういった時に、MySQLトランザクション機能を使って、簡単に解消出来た便利な機能を紹介させていただければと思います!

前提

サンプル用のテーブルは、以下のようになっている前提です。
データは、適当に10万件追加しました。

CREATE TABLE IF NOT EXISTS `site` (
  `id` int(13) NOT NULL AUTO_INCREMENT,
  `site_name` varchar(256) NOT NULL,
  `status` int(4) NOT NULL DEFAULT '0'
) ENGINE=InnoDB AUTO_INCREMENT=0 DEFAULT CHARSET=utf8 COMMENT='サイト情報';

プログラムに関しては、10万件のデータを1回のバッチで1000件ずつ処理を行い、5分置きに実行するようなバッチです。
今回は、サンプルなので、処理はせずに1件あたり1秒のスリープを実行しています。

$host = "localhost";
$user = "xxxxxxxx";
$pass = "xxxxxxxx";
$db = "develop";
$dsn = "mysql:dbname=$db;$host=$host;charset=utf8";

//まずは、DB接続
try{
    $pdo = new PDO ($dsn, $user, $pass);
} catch(PDOException $e) {
    var_dump("DB connected error!");
    exit();
}

// selectで1000件の情報を取得する。
$sql = "select * from site where status=0 Limit 2";
$res = $pdo->query($sql);

foreach($res as $v){
    // 取得したデータを、実行中のステータスに変更する。
    $sql = "UPDATE site SET status=1 where id=" . $v["id"];
    $res = $pdo->exec($sql);

    //実行処理内容が1秒かかるとします。
    sleep(1);

    // 取得したデータを、完了のステータスに変更する。
    $sql = "UPDATE site SET status=2 where id=" . $v["id"];
    $res = $pdo->exec($sql);
}
// 未実行件数を取得して、0件の場合は、ステータスを0に戻す。
$sql = "select count(*) as cnt from site where status=0";
$res = $pdo->query($sql);
$count_data = $res->fetch();
if($count_data["cnt"] == 0){
    $sql = "UPDATE site SET status=2 where id=" . $v["id"];
    $res = $pdo->exec($sql);
}

処理時間が同時刻に複数サーバーで実行した場合、ループ処理中に時間がかかると、最初に起動したバッチと、2台目に起動したバッチが、取得する内容が重複する為、このままだと分散処理が正常に行えない事象が発生してしまいます。

SQLトランザクションを使用して解消!

MySQLトランザクションには、4段階の分離レベルが存在しています。
ここで、全てを話してしまうと長くなってしまうので、割愛します。
以下のページに詳しく解説してありますので、ご参考にしてください!
MySQLのトランザクション分離レベル

さて、このトランザクションの挙動を応用して、解決したいと思います。
まず、アップデート自体を禁止する為の設定や、読み込み自体を拒否するような設定などがありますが、
今回はserializableに設定を行って、commitを実行しない限り、ロック中のレコードには、selectをしても返却されない状態にしたいと思います。

ロック用のテーブルを用意する

今回のSQLでは、該当するレコードをロックしてしまうので、処理実行中かを判断する為のテーブルを用意します。
そこに、レコードで実行プログラム名を追加していきます。

CREATE TABLE IF NOT EXISTS `cron_lock` (
  `id` int(13) NOT NULL AUTO_INCREMENT,
  `name` varchar(256) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=0 DEFAULT CHARSET=utf8 COMMENT='ロックテーブル';

ALTER TABLE `cron_lock` ADD PRIMARY KEY (`id`);

INSERT INTO `cron_lock` (`id`, `name`) VALUES(1, 'test.php');

それでは、ロックデーブルが完成したら、sshを2個立ち上げて、テストしてみます。

#プロセスAで実行
mysql> use develop
mysql> SET tx_isolation = SERIALIZABLE;
mysql> SET innodb_lock_wait_timeout=30;
mysql> START TRANSACTION;
mysql> select * from cron_lock where name='test.php' FOR UPDATE;
+----+----------+
| id | name     |
+----+----------+
|  1 | test.php |
+----+----------+
1 row in set (0.00 sec)

次に同じクエリを実行したら、レスポンスが返却されない事がわかると思います。

#プロセスBで実行
mysql> use develop
mysql> SET tx_isolation = SERIALIZABLE;
mysql> SET innodb_lock_wait_timeout=30;
mysql> START TRANSACTION;
mysql> select * from cron_lock where name='test.php' FOR UPDATE;
|
# ロックされているので返却を待っている状態です。

次に、プロセスAをcommitして、ロックを解除すると、プロセスBで順番待ちしているselectが実行されます。

#プロセスAで実行
mysql> COMMIT;

すると、プロセスBのSelectの結果が返却されると思います。

#プロセスBで実行
mysql> select * from cron_lock where name='test.php' FOR UPDATE;
+----+----------+
| id | name     |
+----+----------+
|  1 | test.php |
+----+----------+
1 row in set (20.91 sec)

結果は分かっていても、心の中では、オォォーって感動してしまいます。(笑)
さて、この挙動を応用して、複数同時起動しても実行待機してくれる仕組みをプログラムで作成していきたいと思います。

負荷分散対応バッチのプログラムについて

さて、先ほど作成したcron_logテーブルを用いて、プログラムにしていきたいと思います。

$db = "develop";
$dsn = "mysql:dbname=$db;$host=$host;charset=utf8";
//まずは、PDOでDB接続を行う。
try{
    $pdo = new PDO ($dsn, $user, $pass);
} catch(PDOException $e) {
    var_dump("DB connected error!");
    exit();
}

// cron_lockトランザクションを設定して、レコードをロックする。
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->query("SET innodb_lock_wait_timeout=30;");
$pdo->beginTransaction();
$sql = "select * from cron_lock where name='test.php' FOR UPDATE;";
$res = $pdo->query($sql);

// selectで1000件の情報を取得する。
$sql = "select * from site where status=0 Limit 2";
$res = $pdo->query($sql);
foreach($res as $v){
    // 取得したデータを、全件処理開始フラグを設定する。
    $sql = "UPDATE site SET status=1 where id=" . $v["id"];
    $array[] = $v;
}

// cron_lock解除
$pdo->commit();

foreach($array as $v){
    //実行処理内容が1秒かかるとします。
    sleep(1);

    // 取得したデータを、完了のステータスに変更する。
    $sql = "UPDATE site SET status=2 where id=" . $v["id"];
    $res = $pdo->exec($sql);
}

// 未実行件数を取得して、0件の場合は、ステータスを0に戻す。
$sql = "select count(*) as cnt from site where status=0";
$res = $pdo->query($sql);
$count_data = $res->fetch();
if($count_data["cnt"] == 0){
    $sql = "UPDATE site SET status=2 where id=" . $v["id"];
    $res = $pdo->exec($sql);
}

最後に

今回のコードは、あくまでも参考までのコードでしかありませんが、これらをクラス化しておき、
色んな多重起動するバッチに使用するのもいいかと思います。
設計時に、色々考え、考慮したのですが、毎分実行するようなプログラムで、処理が追いつかない時に、複数のプロセスで同時起動したい場合などにも使える機能だと思います。
実行時間短縮に、プロセスをForkして、並列処理を実行して、速度を担保したとしても、複数サーバーで実行出来ていれば、冗長化出来ているので、安心できます。

今回は、簡単だと思った事が、ちゃんと仕様として、考えたら、意外と難しかったというハマりについて向き合った結果、トランザクションの新たな使い方を発見したので、書かせていただきました。
これを機に、複数サーバーによる、バッチを同時起動する事で、サービスの事前処理などの速度改善に役立てたいと思っています。