グラフ生成ライブラリ C3.jsについて
こんにちは！フロントエンドエンジニアの本間です。
今回はグラフ生成ライブラリのC3.jsについてです。
C3.jsとはWebグラフィックスを扱うD3.jsを利用して、オプションのような形で簡易的にグラフを作る為だけに拡張されたライブラリです。
日本だと知名度がイマイチかもしれませんが、海外ではD3.jsの人気が高く注目度の高いライブラリです。
D3.jsのみでもグラフを作成できますが、慣れるまで扱いが難しいところもあり、C3.jsを使うことでより楽にグラフを作成できます。
ドキュメントも充実していて、オプションも豊富にあり、柔軟性も高いので自分なりのグラフをさっと作りたい時など大変便利です。
データの投入方法を工夫することで動きをつけることができ、見せ方もカスタマイズできます。
以前、BIツールで月間のデータを可視化する時に使用していたことがあり、当日以降のデータを予想値として半透明にして表示したり、アニメーションを加えたりとカスタマイズしていました。
では早速、使ってみましょう。
ライブラリを記述
＜link href="/path/c3.css" rel="stylesheet" type="text/css"> ＜script src="/path/d3.v3.min.js" charset="utf-8"> ＜script src="/path/c3.min.js">
はい、これが無いと始まりません。ライブラリを読み込みます。
D3.jsベースなのでこれもお忘れなく。
html
＜div id="chart">＜/div>
グラフが展開される要素を用意します。
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data2: 'y2'
}
},
axis: {
y: {
label: { // ADD
text: 'Y Label',
position: 'outer-middle'
}
},
y2: {
show: true,
label: { // ADD
text: 'Y2 Label',
position: 'outer-middle'
}
}
}
});
上記のようなデータを読み込むと...
はい、グラフが出来ました。
データとグラフを見比べると、どこのデータがグラフ上でどう表示されるのかわかると思います。
データはCSV, JSON形式でも投入可能でURLで指定することもできます。
グラフタイプを下記のように指定すると異なるグラフが展開されます。
type: 'bar'
type : 'pie'
折れ線グラフと棒グラフは組み合わせて使うことが出来ます。
さらに動的にデータを変更してアップデートをかけるとアニメーションして表示が変わります。
サマリーとデイリーでグラフタイプを分けたり、項目をクリックして線がトランスフォームしてカッコよくアニメーションしながら詳細を表示するなんてこともできます。
データ可視化の意義や、データから行動を読み取るといったことを念頭に置いて、最適な表現できると良いですね。
他にもいろいろできますので公式ドキュメントをチェックしてみてください。
最後まで読んでいただきありがとうございました。
公式ドキュメント
c3js.org
try! Swift 2016 の感想 ☆*:.｡.
PR TIMES エンジニアのうさみです。 3月2日から3月4日までの3日間、東京・渋谷にて try! Swift 2016 が開催されました！
今回、PR TIMESはシルバースポンサーとして参加させていただきました。技術的なことはもう少しSwiftの技術力がついた頃に触れるとして、イベントに参加して感じたことを少しだけ・・・
PR TIMES のロゴ、ありました！
イベント中はこちらのネックストラップを装着です☆
try! Swift が開催されたのが今回初ということもあり、ご存知でない方も多いかと思いますが、公式サイトでは以下のように紹介されています。
try! Swiftは世界中のSwiftデベロッパーが一堂に会し、知識や技術を互いに共有し高め合うことを目的としたカンファレンスです。
try! Swift (@tryswiftconf) | Twitter
カンファレンスには国内や海外の著名なエンジニアが33人招待され、3日間に渡って33のセッションが繰り広げられました。1セッション25分という講演の中には、技術本には載っていないような興味深いお話から技術的に高度なお話まで盛りだくさんで、私はイベント後半の半分程しか参加できませんでしたが、とてもお腹いっぱいになりました。すべて参加できていたら、きっとしばらく興奮をおさえることができなかったかもしれません。。
高度なお話では一瞬（？）となることもしばしばでしたが、25分という限られた時間の中でキーワードに対してざっと説明してくださっていたので、話がまったくわからなくなるということは無かったように思います。
ご提供いただいたスターバックスのコーヒーとパンをいただきながら休憩タイム
休憩中も講演者や参加者の間でSwift話が弾み会場は賑やかでした
セッションの内容については、後日、動画や資料を公開していただけるとのことですが、著名な方々や企業様のブログにてまとめ記事が既にいくつか投稿されています。（貴重な記事、ありがとうございます！）
→ 株式会社はてな様の@niwatakoさんがすべてのセッションを聞き起こしくださっています。す、すごい！途中からの参加でしたのでとても助かりました・・・ありがとうございます！
→ クラスメソッド株式会社様のエンジニアのみなさまによる最速レポートです。1日目午前から3日目午後までそれぞれまとめられています。セッションだけではなくイベントで提供いただいた朝食やランチのお写真もあります。（私はランチのお写真撮り忘れてしまいました・・・）ありがとうございます！
→ 世界的なiOSエンジニアである堤さんがイベント全体の感想をまとめられています。Swiftだけではなく、今回のように海外の方が集まる場でのコミュニケーションについてなどストレートに述べていらっしゃって、とても共感いたしました。Swiftだけではなく英語もがんばろう！という気持ちに・・・ありがとうございます！
→ セッションごとに上記の@niwatakoさんによる聞き起こしと合わせて、講演者様の発表資料やサンプルコード、レポートや関連記事等をさらに見やすくまとめていただいています。ありがとうございます！
今回のイベントについて主催者様としても「世界トップレベルのエンジニアがこれだけ集まるカンファレンスは海外と比較しても非常に稀」とのことですし、初のSwiftカンファレンスにして素晴らしいメンバーが集結され貴重な講演内容だったことと思います。
イベントが終了して日が経ち、少しずつイベント時の熱が冷めつつありますが、改めて今回のカンファレンスに参加できたことをうれしく思います！
2日目のスポンサーも参加可能なスピーカーディナー
たくさんのエンジニアの方とご挨拶させていただき、また刺激をいただきました
お料理もとてもおいしかったです
次回となるであろう「try! Swift 2017」の開催は今回の成功がかかっているとのことですが・・・
主催者様のイベントへの配慮も素晴らしく、国内や海外からたくさんの方々が集まり大盛況、イベント終了後の懇親会の盛り上がりもすごかったので、きっと次回も開催されるのではないでしょうか☆*:.｡.（という期待でいっぱいです）
ぎりぎり私も写真に入れました！
前方の方々だけなので実際はもっとたくさんいらっしゃいます
try! Swift 2016 は、主催者、講演者、参加者のみなさまの「Swiftが好き」「みんなで盛り上げていこう」という思いを終始感じられるカンファレンスでした。今もなお、try! Swift の Slack への投稿は続いていますしね ( ´ - ` )
初のカンファレンスということで大変だったことと思いますが、素晴らしいイベントを開催してくださった主催者のみなさまに感謝いたします。ありがとうございました！
貴重なお話を聞いて満足して終わりにするのではなく、今後に活かしていきたいと思います。
try! Swift オリジナルTシャツや手提げ袋をいただきました☆
袋の中にはステッカー等がたくさん！
古いWebアプリケーションのブラウザテスト
エンジニアのアカイです。
今回はブラウザテストを行ってみます。
具体的には、Capybara/Poltergeistを使用して、無人テストを行います。
これらはRuby on Railsのテストのために作られている雰囲気がありますが、
他のアプリケーションでも使用できます。
条件は以下の通りです。
- 3画面構成のフォーム(入力・確認・完了)
- 入力は正常値のみ
- 自動的に完了画面まで動作させる
- サーバ上で実行
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に関する説明は省略します。
それでは、早速テストを設置してみます。
フォームは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. 紹介書籍のあらすじ
- 作者: 藤井太洋
- 出版社/メーカー: 文藝春秋
- 発売日: 2015/04/10
- メディア: 文庫
- この商品を含むブログ (9件) を見る
内容紹介
いま、そこにある個人情報の危機を描く警察小説公立図書館の私企業との提携を進めるエンジニアが誘拐された。サイバー犯罪捜査官とはぐれ者ハッカーのコンビが個人情報の闇に挑む。
[> http://www.amazon.co.jp/dp/4167903288 >]
内容（「BOOK」データベースより）
京都府警サイバー犯罪対策課の万田は、ITエンジニア誘拐事件の捜査を命じられた。協力者として現れたのは冤罪で汚名を着せられたハッカー、武岱。二人の捜査は進歩的市長の主導するプロジェクトの闇へと…。行政サービスの民間委託計画の陰に何が?ITを知りつくした著者が描くビッグデータの危機。新時代の警察小説。
■2. 他の方の感想
hon.bunshun.jp
mitaimon.cocolog-nifty.com
wirelesswire.jp
delphinz.hatenablog.com
blue1st.hateblo.jp
■3. 自分の感想
「マルウェアによるパソコン遠隔操作事件の取り調べから始まり、そこから振り込め詐欺、行政の民間委託施設のシステムの開発現場で起こった誘拐事件の捜査を進めるうちに事件を追う主人公達は……」という、ニュースなどで聞いたことのあるキーワードがふんだんに入ったあらすじはフックがとても効いていると思いませんか？本書は、その期待を裏切ることはない名作です。
私も、前職などで個人情報を取り扱うシステムの開発に携わると何をもって個人情報とするかという定義について法やシステム的な定義に触れることがあり、ユーザとしてサービスを利用するために個人情報と行動履歴を渡したりしていると、運営会社が所有している複数のサービスの情報が紐付いた場合、どのように個人が定義されるのか、というようなことを考えることがありますが、マイナンバーの発行と利用が始まった今に本書を読んでみると、個人情報にまつわる様々な要素を緊迫感のある犯罪小説に構成されていることに唸る次第です。
読了後には普段のスマホやネットや会員サービスの利用について、違った見解と一段と深い興味を持てるスリリング内容です。
また、人月的に大規模なシステム開発で多々起こりうる問題について、登場人物がその現場に赴くことで、その様々な問題を見ることになるのですが、このあたりの描写もITエンジニア的にあるある感が満載です。それも単なるネタではなく犯罪小説として重要な要素になるので、読んだときのお楽しみに。
著者もインタビューで答えていますが、
http://hon.bunshun.jp/articles/-/3604?page=2
パスワードは推測されない、暗号は解読されない、スーパーハッカーによるご都合展開をしない、など、情報技術を使ったフィクションで良く見られる虚構的要素が極力排除され、現実の技術の延長線上にある情報技術描写はITエンジニアが読んでも鼻白むことはありません。
「社会派推理小説」とは、「荒唐無稽なトリックを否定し、現実性のある社会性の強い題材をあつかい、動機を重視した推理小説」とされています。本書は前述した通り、「（情報技術の）荒唐無稽なトリックを否定し、（システム開発やシステムや行政に紐付けられた個人情報という）現実性のある社会性の強い題材をあつかい、動機を重視した（2015年に書かれた最新の）推理小説」として、私は本書をとてもおすすめできます。
予定されているという続編も非常に楽しみです。
中国における電子決済
今回中国における電子決済事情についてお話しをしたいと思います。
2015年度、中国の電子決済の実際の取引金額は9.31万億元（162兆円）。アリペイ（支付宝）とWeChat paymentはその中で最も使われている決済方法です。今回さらに2月18日から中国に上陸したApple Payを加え、それぞれの概要を紹介します。
アリペイ
アリペイとは「アリババグループ」が提供する中国最大規模の電子決済サービスです。2004年12月が設立され、2014に世界最大のオンライン決済サービスになりました。2015年6 月にユーザー数が4億人になった、世界中に180くらいの銀行及びVISA、MasterCardなど提携しています。アリペイはオンライン決済だけではなくて、金融業務も行っています。市場シェアはおよそ8割を占めています。
WeChat Payment
「WeChat（微信）」が展開している決済サービス「WeChat Payment」はアリペイに続き第二のオンライン決済サービスです。ユーザー数もすでに4億人を突破し（WeChatのユーザー数は6億人）、使い方としては自分名義の銀行カードをバンドし、決済する際にQRコードを読み取るだけで、決済が完了します。
Apple Pay
ご存知の通り、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に連携させることができます。
IFTTTにはAlexa関連レシピがたくさんありますので、日本でもAlexaを利用できます。一例として今回のブログではAlexaからslackにタスクを送る方法を紹介したいと思います。まず、IFTTTのユーザー登録をし、ログインしましょう。
ブラウザーヘッダーのユーザー名をクリックしてcreateを選択
thisをクリック
キーワード検索にalexaを入力し選択する
ConnectをクリックしAmazonアカウントを入力してAlexa認証を行う
Continew to the next stepをクリック
Choose a Trigger > Ask what's on your To Do Listを選択
Create Triggerをクリック
thatをクリック
Choose Action Channelのキーワード検索にslackを入力し選択する
ConnectをクリックしSlackの認証を行う
Continew to the next stepをクリック
Choose an Action > Post to channelを選択
タスクを表示したいSlackのチャンネルを選択しCreate Actionをクリック
Create Recipeをクリック
レシピ作成完了
わずか数分で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にスポンサーとして協賛させて頂きました。
イベントは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
全身をつかう
全身をつかって仮想現実をコントロールするというのは新しいことではありません。
ですが、360度の映像とモーションを組み合わせたものは新しい試みです。
LEXUSがホバーボードを開発しましたが、それを体験できるのはバルセロナにある公園だけです。
それをどこでもできるようにして欲しいという依頼があり、つくったのがこちらです。VRには人を不快にするVR酔いがあると言われています。フレームレートを何回も調整して酔いをおこさないようにしたそうです。これからゲームと映画の間のコンテンツがどんどんでてくるのだろうなと思いました。
どの人も安全なところを捨て去り、挑戦しているのが印象的でした。
後半戦はまた次回に
BREAK TIMES NITE 〜急成長サービスをつくっている人の考え方
こんにちは。
PR TIMESフロントエンジニアの山田です。
昨日、6回目となる「BREAK TIMES NITE 〜急成長サービスをつくっている人の考え方」を開催しました！
新オフィスに移転して1ヶ月、外部からのお客さまを招いてのイベントは初となります。
今回は株式会社トランスリミットの代表取締役 高場大樹さまをお招きして開催いたしました。
17:00
準備中開始です！
19:00
軽い懇親会からスタート。セッション前にみんなで交流して、場を暖めます。
19:40
まずはPR TIMESのことをお話させて頂きました。
Techを使ってプレスリリースを進化させているPR TIMESを説明。
19:50
トランスリミット高場さまの登壇です。
「Brain Wars」「Brain Dots」をヒットさせて来た考え方を熱く語って頂きました。
参加者のみなさま、ありがとうございました！
7回目に向けて準備を始めます！
次回もご期待ください。
chrome エクステンション 7選
フロントエンジニアの本間です。
今回は業務スピードが上がる便利なGoogle Chromeの拡張機能を紹介します。
エンジニアに限らず、色々な人が使える汎用的な物もご紹介します。
使えそうな物があれば幸いです。
まずはこれ
Webデザイナーの方は必須！ブラウズ上ならどこでもカラーコードを調べらます。操作も簡単、調べたいところでクリックするだけ
先ほどのピクセル版です。どこでもピクセルが図れます。こちらの操作はドラックするのみ！
これは表示しているサイトのhtmlをチェックしてタグの過不足などを検出してくれます。初歩的なミスを指摘され、赤面する前に入れときましょう。
サイトのキャプチャを取ってくれます。全体、部分キャプチャ、簡単な図形や文字で注釈をつけられます。この手のキャプチャツールの中では一番使いやすいかなと思います。
英語のドキュメントを読む時の強い味方です。カーソルを乗せると単語の辞書を引いてくれます。さらにその場で発音もチェックできます。
Angular.jsの開発補助。scopeのwatch数を計測できるのでSPAを作る上で、必ずぶつかるメモリリーク問題の解決策を考える上で、数値の測定は欠かせません。
だいぶ前に話題になりました。音で周辺の人にURLを共有できます。可愛らしい音の中にURL情報が入っていると思うと、びっくりしますよね。使い道はともかくアイディアが素晴らしいです。
いかがだったでしょうか。
便利な物はガンガン使用して、リズム良く開発したいですね。
JavaScriptで自作もできるので、自分の便利ツールを作成するのも面白いと思います。
古いPHPアプリケーションの環境刷新
エンジニアのアカイです。
今回は古い環境で動作している古いWebアプリケーションの対応ということで、
環境を可能な限り新しいものに入れ替える試みです。
古い環境は以下のようになっています。
この状況は、CentOS6の標準rpmをインストールした場合に選択されるものですが、
PHP7も正式にリリースされた今、この環境を使用し続けるのは抵抗があります。
想定している状況は以下の通りです
今回はこれらの作業ログになります。
対処すべき内容の確認
PHP公式にバージョン移行のガイドがあります。
関数は仕様変更や非推奨・廃止などがあると思いますので、確認は必須です。
- http://php.net/manual/ja/migration54.php
- http://php.net/manual/ja/migration55.php
- http://php.net/manual/ja/migration56.php
- http://php.net/manual/ja/migration70.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=*"
細かい部分は未検証ですが、具体的な対処は例えば以下のように行いました。
-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メッセージ等は除去できました。
これで、移行に向けてプログラム修正を行える環境を作成できました。
あまり役に立つ情報はありませんが、バージョンの古い環境はいつか限界を迎えますので、
時間と労力の許す限り、安心できる動作環境を構築する努力をしましょう。
