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

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

PR TIMES Developer Blog

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

人感センサーと連携したアプリをつくりたい☆*:.。.1.検討編

PR TIMES エンジニアのうさみです。今年1月に新オフィスに移転してから、もうすぐで3ヶ月・・・暖かい季節になってまいりました☆

f:id:breaktimes:20160125200724j:plain

移転の際に設置した弊社オリジナルの受付アプリも、それだけの間、お客様にご利用いただいているのですが、そろそろ機能改善も含めつつ新しい機能も盛り込んでバージョンアップをしたいなと考えています。

新機能として一番に取り入れたいことは、人感センサーを利用して受付アプリ側でアクションを起こすことです。具体的には、以下のようなことを実現したいです。

お客様がエントランスにいらっしゃったら人感センサーが感知して受付アプリが◯◯◯をする (◯◯◯の箇所は考案中)

人感センサーというと電子工作の知識を必要としそうですが、あいにく私は詳しくはありません。。そんな私でも実現できる方法がきっとあるはず!という思いで調べてみましたところ・・・ありました! 私の技術力の範囲では以下のどちらかの方法で実現ができそうです。

1. 超小型PC「Raspberry Pi」で人感センサーを自作する

<必要なもの>

・Raspberry Pi2 Model B ボード&ケースセット (Standard, Clear)
www.amazon.co.jp

・Raspberry Pi 赤外線モーションセンサー PIR Infrared Motion Sensor
www.amazon.co.jp

・ジャンパワイヤ(メス~メス) 10本セット
www.amazon.co.jp

<金額>

5,980円 + 1,400円 + 492円 = 7,872円

※以上は参考にさせていただいた記事内の一例です。調べていたところ、もっと安価に自作できそうでした。

2. SONYのスマートDIYキット「MESH」の人感タグを利用する

<参考>

meshprj.com
qiita.com

<必要なもの>

・MESH Motion(人感)タグ
www.amazon.co.jp

<金額>

6,980円


「Raspberry Pi」の方はPCですので、人感センサーだけではなく他の用途でも利用することができて自由度が高いと思いますが、プログラムを組んだりセンサーを取り付けたりと知識が必要とされます。

「MESH」の人感タグの方は、人感センサーとしての用途に特化しており、また専用のMESHアプリを利用してアクションを起こさせるため自由度は低いと思いますが、小学生でもMESHを使った仕組みを作れるとのことで簡単に利用できそうです。

 「たんじゅんなのにすごいことができる」(小学校5年男子)
 「かんたんにできたからびっくりした」(小学校3年女子)
 「工夫して自分の想いのままに工作できた」(小学校5年女子)


meshprj.com


エンジニア的には「Raspberry Pi」を使って人感センサーとしての用途だけでなく、他のことも実現してみたい!という気持ちもあるのですが、エントランスに設置して外観的にスマートなのはどちらであるかと考えると・・・「MESH」を利用して今回実現したいことをクリアできればいいかなと思います。

ちなみに・・・「MESH」には人感タグを含め以下のタグがありますので、いろんなタグを揃えて新しい仕組みをつくるのも楽しそうですね☆

  • LEDタグ : いろいろな色に光ります。
  • ボタンタグ : シンプルなボタンです。
  • 人感タグ : 人の動きを検知できます。
  • 動きタグ : 動きを検知することができます。
  • 明るさタグ : 明るさの変化を検知できます。
  • 温度・湿度タグ : 温湿度の変化を検知できます。
  • GPIOタグ : 電子工作の無線化や、できることを拡張します。

「MESH」でこんなことができるよ! というレシピも紹介されていて、見ているだけでも楽しいです ( ´ - ` )

recipe.meshprj.com


まだ、実物は手元になく実際どうなるかわかりませんが!
進捗がありましたら、2.導入編をお届けしたいと思います☆*:.。.

phantomjsでサイトのキャプチャーをとる

エンジニアの呉です。
今回紹介したいのはコマンドラインから使えるWebブラウザーであるphantomjsです。そもそも、なんでphantomjsを使うのか?それはWebサイトのキャプチャーをとるために、最初wkhtmltoimageを使ったけど、スマホ版はうまく撮れなかったため、いろいろを調べた結果はphantomjsを決めました。

phantomjsについて

phantomjsはコマンドラインから使えるブラウザーです。レンダリングエンジンには「WebKit」が採用されています。phantomjsを利用すると、コマンドラインから、Webブラウザーを操作して、ブラウザー内に表示されるデータを取得したり、スクリーンショットを撮ったりすることができます。Webサイトからデータを取り出すスクレイピングにも使えます。

続きを読む

PR TIMESエンジニア開発環境をのぞき見

こんにちわ、PR TIMESエンジニアの花田です。
今回のブログのテーマは

「PR TIMESエンジニアはどのような環境で仕事をしているのか」

技術記事がメインとなっているBREAK TIMESなので、少し角度を変えて、PR TIMESエンジニアはどのような環境で仕事をしているのかを紹介したいと思います。

まずはPR TIMESエンジニアが使用しているパソコンは主にMACを使用しています、社内エンジニア9割はMAC、希望すればデュアルモニター仕様に!
Macbookを使用しているエンジニアはthunderbolt display!

f:id:breaktimes:20160330154259j:plain
私はimac+デュアルモニター仕様にしています。

支給されるimacはスペックも高性能!
f:id:breaktimes:20160330154318j:plain
f:id:breaktimes:20160330154336j:plain
phpstorm/illustrator/photoshop/googlecrome/等複数のアプリケーションを開いてもストレスフリーで作業を行えるので、作業効率抜群です!

もちろんトラックパッドも常備
(写真は1ですが、トラックパッド2もあります)、デザイナーであればペンタブの支給も!

f:id:breaktimes:20160330154401j:plain

しかし、性能が良くてもエンジニアも人間です、パソコンは疲れなくても人間は疲れます・・・
そんな時は社内にあるTIMES GARDENにて休憩♪

f:id:breaktimes:20160330154431j:plain
コーヒーメーカーもあるのでコーヒーを淹れて・・・

f:id:breaktimes:20160330154455j:plain
ソファでくつろいでアイデアを練るなんて事も♪

必要な本は全て支給されるため、好きな本を見て勉強が出来るのでスキルアップがとてもしやすいです♪
f:id:breaktimes:20160330154515j:plain



いかがでしたか?
私が何故このように環境をブログに書きたいと思ったのは、道具・環境について私の好きな文献があり、

アメリカのHCI(ヒューマン・コンピュータ・インターフェイス)研究者テリー・ウィノグラードはハイデッガーを引用しながら、『普段は文字を入力しているときに、パソコンのキーボード自体を意識することはないが(道具的存在)、なんらかの処理の問題で、入力した文字がすぐに表示されないと、キーボードのキーが「引っかかる」という属性をもって現れてくる(ブレイクダウン)事物的存在になる』と述べた(『コンピュータと認知を理解する』,1989)。 つまり道具に何か問題が発生すると、その道具が意識に上り、それ自体を対象として扱う(事物的存在になる)。しかし、道具に問題が起きなければ、それ自体は透明性があり、たとえばキーボードでは「文章を書く」ということに集中できる(道具的存在になる)。

文献のように、集中出来る道具・環境にて仕事をしているため作業効率が高く、結果生産性の向上に繋がっています。
環境と道具がエンジニアの質に繋がると日々感じ、一人でも多くの方に共感してもらえるかなと思い今回のブログを書きました。
もっと他の事も書きたかったのですが、また次の機会にでもPR TIMESエンジニア開発環境を紹介します♪

$.ajaxファイルアップロードでの進捗表示

こんにちは。フロントエンドエンジニアの本間です。 

今日は$.ajaxファイルアップロードでプログレスバー表示についてです。 

UIUXにおいて体感速度を短縮するのは重要で、同じ待ち時間でも進捗表示することによって体感速度が向上します。

さらにプログレスバーの色や模様によっても体感速度が変わってくるという研究結果もでているようです。


gigazine.net


PRTIMESでは企業管理画面のリリース配信登録画面でワードファイルをアップする際に使っています。
 
やり方は$.ajaxの引数にxhrオブジェクトを渡し、progressイベントハンドラで取得します。

$.ajax({
    url  : api.url,
    async: true,
    xhr : function(){
        var XHR = $.ajaxSettings.xhr();
        if(XHR.upload){
            XHR.upload.addEventListener('progress',function(e){
                var progre = parseInt(e.loaded/e.total*100);
                $hoge.css({width: progre+'%'});
            }, false);
        }
        return XHR;
    },
})


簡単ですね。

8行目e.totalがトータルサイズでe.loadedがアップし終わったファイルサイズです。それをパーセントに直して次の行で$hogeの横幅に代入してます。

プログレスバーは必要な時に表示してアップロード後に、消すといった使い方がほとんどだと思いますので、 表示切り替えはbeforeSendとcompleteを使うといいと思います。

生のjavascriptの場合は下記 

var req = new XMLHttpRequest();
req.addEventListener('progress', updateProgress, false);
req.open();

function updateProgress(e) {
    var progre = parseInt(e.loaded/e.total*100);
    document.getElementById(hoge).style.width=progre+'%';
}


非同期前提なのでasyncがfalseだと取得できません。
ですので古いブラウザ対応などでよくやる空のiframeからsubmitしてレスポンスを親に渡すやり方でも取得できませんのでご注意!

ちなみにprogressイベントのブラウザ対応状況は下記です。
 

PC

ChromeFirefoxInternet ExplorerOperaSafari
7以上3.5以上10以上12以上対応


mobile

Android Android WebviewFirefox MobileSafari MobileIE Mobile
対応対応1.0以上対応10.0以上


今回はファイルアップロードでそこまで長くない時間でしたが、時間のかかる処理をする際に楽しげなアニメーションGifを動かしたり、広告スペースに活用したりと工夫してあるサイトも多いですね。

体感時間について下記の記事が面白かったのでご紹介致します。

第46回 体感時間のコントロール | WIRED VISION

待っているという事実を一瞬忘れさせるのが体感時間短縮の鍵ですね。
最後まで読んでいただきありがとうございます。

PR TIMESは東証マザーズに上場しました!

PR TIMESフロントエンジニアの山田です。
※この記事はエイプリルフールではありません!

f:id:breaktimes:20160401093752j:plain
昨日、3月31日にPR TIMESは東証マザーズに上場しました。
prtimes.co.jp

なかなか体験することができないセレモニーにも参加することができ、感慨深い想いです。

エンジニアも含め参加した社員も、静かに見守る、その場を楽しむ、興奮して写真を撮りまくるなど様々な反応でしたが、サービスをご利用頂いている方々に感謝し、そしてサービスをより良くしていこうという想いは皆変わらないと思います。
prtimes.jp


そんなPR TIMESのエンジニアチームでは一緒にサービスを発展させて頂ける仲間を募集しています。興味を持たれた方は以下のフォームからご応募ください。
オフィス訪問も受け付けていますので、お気軽にどうぞ。

VR導入-開発裏話

PR TIMESフロントエンジニアの山田です。

Oculus Riftの出荷が開始されたり、サムスンが発表会でGEAR VRを利用して話題になったり、VRが盛り上がってますね。

PR TIMESでも3/29の記者会見で発表させて頂いたように、配信されるプレスリリース内にVRが埋め込めるようになっています。
prtimes.jp

Flic360、ストリートビューYouTubeなど360度回転して見られるフォトや動画がご利用可能です。
シルク・ドゥ・ソレイユさんにも早速ご利用頂き、臨場感が伝わります。
prtimes.jp

埋め込みは簡単、VRのURLをフォーム内に入力し挿入ボタンを押すだけ。

表にはサラッとだしていますが、裏ではPR TIMESのエンジニアチーム一同が頑張りました。
最初の開発が始まったのが1月。オフィス移転のタイミングでPR TIMESのリリースを出すときに、ストリートビューでオフィス内を見せることができたらいいねという話から。移転までわずか数日というタイミングでした。

果たして間に合うのかという状況で手をつけ始めましたが、実際やってみるとなんとかなるもの。リリースを出すタイミングを少し遅らせて頂きましたが、無事インドアビューを埋め込んで配信することができました。
prtimes.jp

もちろん徹夜のデスマーチとかしてません!ちゃんと営業時間内の作業で終わらせました。技術力だけでなく、こういたところもPR TIMESエンジニア・チームの誇れるところ。

当初ストリートビューだけだった機能も、その後VR提携の話などもありFlic360を追加。YouTubeのVR動画にも対応。そして、これからも使える形式を増やしていく予定。

PR TIMESでは今後も時代に合わせた機能を追加していきますので、ご期待ください!

RedisのZSETを使った集計方法

PRTIMESエンジニアの吉です。 弊社ではNode.JSとRedisを使って一部の機能を実装しています。 今日はRedisをつかった集計方法ノウハウをみなさんと共有したく、簡単に紹介したいと思います。

なぜ集計にRedisを使うのか

最近のWebアプリケーションは様々なシーンにおいて大量のデータをサーバーに送ってきます。 特にユーザーのアクセス情報や行動ログ、内部セッションデータの保存などデータ間の関係性が低い情報に関してはNoSQLに保存するのが望ましいと思います。

ここで登場するのがRedisです。 Redisはデータをメモリ上に保持するので非常に高速な処理が可能です。 また、list, set, zset, hashといったデータ構造を持っていて効果的にデータを保存できる点からデータの集計に向いていると考えているからです。

以下、Redisのzsetを使って期間別のデータを絞り込んでScoreを合算する方法の一部をまとめました。

データ保存時のzset構成

Index用データzset

f:id:breaktimes:20160324185902j:plain

ここで登録するデータは期間別に登録された情報を絞り込むためのIndexの役割をします。 タインプスタンプがscore、実データkey名がvalueとなります。 以下、redisの登録コマンドです。

ZADD data:index 1458010816 data:1

redis zadd document

集計対象データzset

f:id:breaktimes:20160324190017j:plain

ここで登録するデータは実データ、集計対象となるデータです。 集計したい値がscore、項目名がvalueとなります。以下、redisの登録コマンドです。

ZADD data:1 10 value_1 20 value_2 30 value_3 ...

集計

集計対象データのkey名を取得

f:id:breaktimes:20160324190125j:plain

まずはindex用zsetデータから期間を絞り込んで集計対象となるデータのkey nameを抽出します。 以下、redisの抽出コマンドです。

ZRANGEBYSCORE data:index 1458010816 1458010816

redis zrangebyscore document

結果作成

f:id:breaktimes:20160324190141j:plain

取得したkey名をもとに集計を実施します。zunionstoreを実行すると新たなdata:sumというzsetが生成されます。 data:sumにはzunionstoreで指定したzsetの合算値が入ります。 以下、redis集計コマンドです。

ZUNIONSTORE data:sum 4 data:2 data:3 data:5 data:6

redis zunionstore document

感想

今回のブログではredisのzsetを使った集計の一例を紹介しました。 みなさんご存知のとおり、簡単にデータの保存ができて高速に処理が行われることにすごく感銘を受けています。 集計以外でもRedisは様々な使い道がありますので積極的にredisを使いブログを通じて紹介したいと思います。

CentOS6.7にNginx+PHP5.6+MySQLの環境を作ってWordpressの引っ越しをする

PRTIMESエンジニアの深川です。

リファクタリングの季節、春ですね。PRTIMESでもサーバのリファクタリングということで社内で運用しているサイトの棚卸しの実施中。 利用状況や現状の構成をレビューして、必要があればサーバの移行を進めています。

中でも、 * Wordpressで運用しているサイト * PHP&Apache&MySQLの構成 * チューニング次第でサーバリソースの要求水準は高くない

このようなサイトは複数あるので、今回移行にあわせて、PHPのバージョンを5.6にしつつ、 WEBサーバをApacheからNginxに切替えています。

今回はその辺りの手順を公開してみます。

本来ならプロビジョニングツールで一括!となりますが、 自動化の前に手続きを確認ということで、今回はコマンドベースでの手順の公開です。

f:id:breaktimes:20160323175834p:plain クラウドコンピューティングのイラスト | 無料イラスト かわいいフリー素材集 いらすとや


■移行における作業項目の今回の対象範囲

WordPressで運用しているサイトの移行となると、必要そうな手順をざっくり書いてみます。

  • サーバの確保
    • 移行先検討
    • 契約
  • サーバ構築
    • PHPインストール
    • MySQLインストール
    • PHP-fpmインストール
    • Nginxインストール
  • アカウントの作成
    • 運用ユーザ作成
    • MySQLユーザ作成
  • リソースの転送
  • 動作テスト
  • ドメイン
    • DNSレコード更新
    • 旧サイト転送対応

で、今回の記事で対象にする部分はこちらです。

  • サーバの確保
    • 移行先検討
    • 契約
  • サーバ構築
    • PHPインストール
    • MySQLインストール
    • PHP-fpmインストール
    • Nginxインストール
  • アカウントの作成
    • 運用ユーザ作成 * MySQLユーザ作成
  • リソースの転送
  • 動作テスト
  • ドメイン
    • DNSレコード更新
    • 旧サイト転送対応

■サーバ構築

PHPインストール

リポジトリの追加

PHP5.6をインストールするために、epelとremiのリポジトリを追加

% sudo rpm -Uvh http://ftp.iij.ad.jp/pub/linux/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm
% sudo rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm

インストール

% sudo yum install --enablerepo=remi --enablerepo=remi-php56 php php-opcache php-devel php-mbstring php-mcrypt php-mysqlnd php-phpunit-PHPUnit php-pecl-xdebug php-pecl-xhprof

PHP設定変更

phpの設定を変更。コメントアウトとしている部分は5.6では非推奨となる項目なので、該当する設定が適用されていたら、対象行をコメントアウト

% sudo vim /etc/php.ini 
default_charset = "UTF-8"
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.language = Japanese
;mbstring.internal_encoding = EUC-JP
;mbstring.http_input = auto
;mbstring.http_output = SJIS
MySQLインストール

インストール

% sudo yum -y --enablerepo=remi install mysql-server

初期化スクリプトを実行

% sudo mysql_install_db --datadir=/var/lib/mysql --user=mysql

起動、自動起動設定

% sudo /etc/init.d/mysqld start
% sudo chkconfig mysqld on

セキュリティ設定スクリプトを実行(基本すべてYで)

% sudo mysql_secure_installation
PHP-fpmインストール

インストール

% sudo yum install --enablerepo=remi --enablerepo=remi-php56  php-fpm

設定ファイル編集

% sudo vim /etc/php-fpm.d/www.conf 
user = nginx
group = nginx

起動、自動起動設定

% sudo service php-fpm start
% sudo chkconfig php-fpm on
□Nginxインストール

インストール

% sudo yum -y install nginx

設定ファイル(ファイル名は任意で)

% /etc/nginx/conf.d/wp.conf
server {
  listen 80;
  server_name wp.jp; # 取得したドメインを指定してください
  root /var/www/wp;
  index index.php;

  # 以下、パーマリンク対応
  # URL デフォルトのリンクから変更した場合
  location / {
    try_files $uri $uri/ @wordpress;
  }

  # index.php などの.phpでのアクセス
  location ~ \.php$ {
    try_files $uri @wordpress;
    fastcgi_index index.php;
    fastcgi_split_path_info ^(.+\.php)(.*)$;
    fastcgi_pass  127.0.0.1:9000;
    fastcgi_param SCRIPT_FILENAME  /var/www/wp$fastcgi_script_name;
    include       fastcgi_params;
  }

  # 階層型URLのパーマリンクでアクセスされた場合
  location @wordpress {
    fastcgi_index index.php;
    fastcgi_split_path_info ^(.+\.php)(.*)$;
    fastcgi_pass  127.0.0.1:9000;
    fastcgi_param SCRIPT_FILENAME  /var/www/wp/index.php;
    include       fastcgi_params;
  }  
}
% sudo nginx -t
% sudo service nginx reload

■リソースの転送

WordPressソース一式

(移行元サーバでの作業)wordpress一式が/var/www/wp/にある想定で、移行先サーバに転送します。

sudo rsync -av -e ssh /var/www/wp 移行先サーバユーザ名@移行先サーバホスト名:/var/www/isuta/

※ 今回は雑にまとめて転送していますが、ファイル容量次第では転送量と時間が大変なことになるので、 ソースはgitなどで管理している場合は、移行先サーバの該当ディレクトリに先にgit cloneしておくと良いかもれしません

□DBのデータ

(移行元サーバでの作業)MySQLバックアップ

mysqldump --single-transaction -u (wordpressデータベースユーザ名) -p (wordpressデータベース名)  > wp_db.dmp

バックアップしたファイルを移行先サーバに転送後に(移行先サーバでの作業)MySQLリストア

mysql -u (wordpressデータベースユーザ名) -p (wordpressデータベース名) < wp_db.dmp

簡単となりますが、以上です。

似たような構成のサイトを複数あって、個々に手動で対応するのは面倒で手作業のミスも発生するので、 構築の作業と可能な範囲のリソース配置はAnsibleやChefによるプロビジョニング対応しておきたいところです。

UX DAYS TOKYO 2016 カンファレスレポート

f:id:breaktimes:20160321000226j:plain
こんにちは。PR TIMESデザイナーの新井です。
UXの重要性は年々高まってきていますが、自分たちのビジネスにどう活かすかを世界の第一線で活躍しているUXデザイナーたちから学べる機会はなかなかないので前年に引き続き、今年もUX Days Tokyoに参加してきました。今回、PR TIMESはゴールドスポンサーをさせていただきました。
2016.uxdaystokyo.com

内容の把握、理解が完全でない点もありますが、今回参加して自分なりに解釈したことをまとめました。

続きを読む

phpstorm 便利機能

こんにちわ!エンジニアの花田です

今回は多くのエンジニアに使用されているIDE「phpstorm」についてお話したいと思います。

といってもphpstormとは何か?という話ではなく、phpstormの覚えておくと便利機能をまとめてみましたので作業効率化を図れる参考なれば!

補足でブログを訪れてくれた、これからエンジニアを目指す人にphpstormって何?を軽く書いておきます。

【phpstorm】

  • コード補完が優秀でカユイところに手が届く
  • 他のIDEに比べると軽い
  • 有料

それではphpstormの便利機能を紹介します。
使用phpstorm
f:id:breaktimes:20160309185029p:plain
10.0.3


control + j
クラス・メソッドドキュメントを表示



f:id:breaktimes:20160309172217p:plain

良く使用してるクラス・メソッドは大体覚えていますが、たまに使う物に関しては思い出すヒントとして使用してはどうでしょうか


command + alt + t
選択した行を特定のタグで囲む



f:id:breaktimes:20160309172733p:plain

全体を【if】で囲むという時に・・・

f:id:breaktimes:20160309172922p:plain

選択した行を選択しcommand + alt + tを選択すると

f:id:breaktimes:20160309173042p:plain

タグ入力になりますので、【if】(囲いこみたいタグ)を入力すればOK

f:id:breaktimes:20160309173200p:plain


command + shift + v
クリップボード履歴から文字を貼り付け



f:id:breaktimes:20160309174208p:plain

先ほどまで使用していた内容を貼り付けする時には便利です


右クリックから[ Compare Directories ]
クリップボードの内容とテキスト内の差分等を比較する


f:id:breaktimes:20160309183524p:plain

差分にかける基準となるエリアをコピー

f:id:breaktimes:20160309183643p:plain

差分したい場所にて右クリックから[ Compare Directories ]を選択

f:id:breaktimes:20160309184539p:plain

差分結果が表示されます


shift2度押し
phpstorm内の全てのプロジェクト・機能・設定等を検索



f:id:breaktimes:20160309190103p:plain


指定文字 + tab
Emmet html.css等入力の短縮を補助



f:id:breaktimes:20160309193512p:plain

上記のような【a】タグはaを入力したら+ tabで
<a href=""></a>と自動的に入力されます

Emmetを利用したリストの作り方

【ul】の中に【li】を10個設置して【a】タグを配置

ul>li*10>aと記載した後に+ tabをすると・・・

f:id:breaktimes:20160309193935p:plain

こんな感じに変換されます。


いかがでしたでしょうか?
上級者の方には知っている機能ばかりかもしれませんが、phpstormを使用されている人やこれから使用してみるユーザーの方は是非試してみてください。