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

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

PR TIMES Developer Blog

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

文系出身エンジニアから見る理系エンジニア、理系出身エンジニアから見る文系エンジニア~PR TIMES社員から特徴を分析してみた!

こんにちは。
学生時代はメディア論を専攻していたPR TIMESエンジニアの山田です。

一般的にエンジニアというと理系のイメージが強い職業ですが、PR TIMESのエンジニアは文系7人、理系3人とむしろ文系の方が多い構成となっています。
「えっ!エンジニアって理系が向いているんじゃないの?」と思う方もいらっしゃるかもしれませんが、、PR TIMESはそうでもありません。

f:id:breaktimes:20160531100656j:plain

文系の脳は「感性やコミュ力はあるが、複雑なことはよくわからない」、理系の脳は「頭脳明晰だが、理屈っぽくて論理的で、コミュ力が無い」なんて話(2秒で分かる「理系脳」「文系脳」の調べ方 - NAVER まとめ)もありますが、実際どうなんでしょう?

かくいう私山田もエンジニアチームで「文系、理系で考え方が違う」と感じていた1人。チームがお互いを理解するために、文系、理系に分かれてアンケートを取ってみました。

続きを読む

中国におけるIT業界のM&A

こんにちは、私はエンジニアの呉です。
今回ご紹介したいのは技術ではなくて、2015年度中国におけるIT業界のM&A事情。

現在、中国でも毎年ものすごく数のITベンチャー企業が増えています、その中は各分野で代表の企業がアメリカのナスダックに上場し、グローバル化を果たしています。

まず中国インターネット業界のトップ10の企業を簡単に紹介します。

  1. 阿里巴巴(アリババ)
  2. 腾讯(Tencent)
  3. 百度検索エンジン大手)
  4. 京东(EC大手)
  5. 奇虎360(ブラウザー
  6. 搜狐(ポータルサイト
  7. 网易(ポータルサイト
  8. 新浪(ポータルサイト
  9. 携程(旅行大手)
  10. 搜房网(賃貸大手)

次はIT業界のM&Aについて紹介します。

アリババがMeizu(魅族科技)に5.9億ドルを出資した。それによって、中国のスマートフォン市場でアップル、小米科技との三國時代が現れます。

www.alibaba.co.jp
www.meizu.com

タクシー配車アプリを展開している二大企業(滴滴打車と快的打車)の合併。合併することによって、同じ分野で世界最大級の企業が誕生しました。企業価値は約60億ドル。

DIDI

快的打车-出租车 专车 代驾 出行

快的打车-出租车 专车 代驾 出行

  • 杭州快迪科技有限公司
  • 旅游
  • 免费

中国のクーポンサイト(美团)とグルメサイト(大众点评网)の合併。企業価値は150億ドルと予測されている。

美团团购-团购,电影,美食,酒店,外卖,优惠,美团网出品

美团团购-团购,电影,美食,酒店,外卖,优惠,美团网出品

  • sankuai Technology (Beijing) Co., Ltd.
  • ライフスタイル
  • 無料

地域の生活関連ライフサービス・プラットフォームを運営する。購入者・販売者間で製品およびサービスを提供する。住宅賃貸、求人情報、中古品、旅行、ケータリング、娯楽、共同購入情報およびサービスなどを手掛ける58同城[58ドット・コム]と赶集网の合併。

中国海外第一分类信息网站|免费发布信息 -58同城

赶集网商城

赶集网商城

  • man zhang
  • ビジネス
  • 無料

旅行業界での合併、海航旅游が途牛旅游网(NASDAQ:TOUR)に5億ドルを出資した。

携程(Ctrip.com)と去哪儿(Qunar)の合併。両者の市場価値は約170億ドル。

jp.ctrip.com

去哪儿攻略—旅游攻略、酒店、机票、火车票、门票、旅行、出境游

去哪儿攻略—旅游攻略、酒店、机票、火车票、门票、旅行、出境游

  • Beijing Qunar Information Technology Company Limit
  • 旅行
  • 無料

神州专车と運転代行サービスを展開するe代驾の合併。

神州专车-安全出行用车必备的专车软件

神州专车-安全出行用车必备的专车软件

  • UCAR (Fujian) Information Technology Co., Ltd.
  • 旅行
  • 無料
e代驾-车主,代驾,酒驾,违章查询,保养,验车,洗车-节假欢聚,酒局无忧

e代驾-车主,代驾,酒驾,违章查询,保养,验车,洗车-节假欢聚,酒局无忧

  • Beijing Yixin Yixing Automotive Technical Development Service Co.,Ltd.
  • 旅游
  • 免费

アリババ、中国のYOUTUBEYOUKU TUDOU(优酷土豆)」を買収した。

www.youku.com

アリババがメディア(第一财经)に2億ドルを出資した。

cbnglobal.yicai.com

中国語のサイトが多いけど、もし興味があれば是非見てください。

エンジニア的オススメ映画1

PR TIMESフロントエンジニアの山田です。
実は前職は映画関係のことをやっていました。
そこで2回に渡ってエンジニア的にアツくなれるオススメ映画を紹介します。
第1回目の今回はインターフェイス系と伝記系です。

インターフェイス

1.アイアンマン

自らもエンジニアであるイケメンの大富豪が活躍します。テロリストに捕まったら有り合わせのものでアイアンマンスーツをDIYして脱出したりととにかくアツいです。
アイアンマンを操縦するアプリケーションJARVISが未来のインターフェイスを示唆しているようで必見。
www.youtube.com

続きを読む

ブラウザに怒られないHTTPSサーバをLet's Encryptとnginxで作る - LINE BOT APIで遊ぶ 準備編

エンジニアの深川です。

今回はLINE BOT API Trial で遊んだ内容について書こうと思っていたのですが、

LINE Developers - BOT API - Overview

LINE BOT API のCallback URLはSSL通信なので、雑なHTTPサーバを用意すればいいかなという目論みは外れて、ドメイン取得、SSL証明書の発行、WEBサーバの設定とやって、HTTPS接続可能なWEBサーバを用意する必要があります。

今回はLINE BOT API Trial を使う前段ということで、お題がSSL証明書の警告の出ないHTTPSサーバの構築について。OSはCentOS6を想定

※ 追記:LINE BOT API Trial、追加募集開始とのことです。
【LINE】「LINE BOT API Trial Account」の追加募集を開始 | LINE Corporation | ニュース


f:id:breaktimes:20160425125520p:plain:w250


手順です。

1. ドメインの取得
2. Let's EncryptからSSL証明書の作成
3. nginxのインストールと設定

1. ドメインの取得

お名前.comとかムームードメインとかバリュードメインなどでサクッと取りましょう。
特に使い続ける必要が無いなら、linkとか安いドメインしてしまっていいと思います。ドメインを取得したら、そのままDNS AレコードをサーバのIPアドレスで登録します。

2. Let's EncryptからSSL証明書の取得

ここから本編です。
SSLの証明書の取得はLet's Encryptを利用します。Let's Encryptについては下記のリンクで確認してください。

letsencrypt.jp


Let's EncryptはPython2.6以下だど動かないので、その場合はPython2.7.9を入れましょう

mkdir src
cd src
wget https://www.python.org/ftp/python/2.7.9/Python-2.7.9.tgz
tar zxvf Python-2.7.9.tgz
cd Python-2.7.9
mkdir /opt/python
./configure --prefix=/opt/python
make
sudo make install

古いPythonをリネームして、新しい方にPathを通します。

which python
mv /usr/bin/python /usr/bin/python_old
ln -s /opt/python/bin/python /usr/bin/python
python --version
cd ../

Pythonのバージョンを上げると、yumが動かなくなるのでyum側を修正します。

vim /usr/bin/yum

下記のように一行目を修正します。

#!/usr/bin/python_old
import sys
try:
    import yum
except ImportError:
    print >> sys.stderr, """\
There was a problem importing one of the Python modules
required to run yum. The error leading to this problem was:

   %s

Please install a package which provides this module, or
verify that the module is installed correctly.

It's possible that the above module doesn't match the
current version of Python, which is:
%s

If you cannot solve this problem yourself, please go to 
the yum faq at:
  http://wiki.linux.duke.edu/YumFaq
  
""" % (sys.exc_value, sys.version)
    sys.exit(1)

sys.path.insert(0, '/usr/share/yum-cli')
try:
    import yummain
    yummain.user_main(sys.argv[1:], exit_code=True)
except KeyboardInterrupt, e:
    print >> sys.stderr, "\n\nExiting on user cancel."
    sys.exit(1)

やっとLet's Encryptに着手できます……

git clone https://github.com/letsencrypt/letsencrypt
cd letsencrypt
./letsencrypt-auto certonly -a standalone -d www.example.com
sudo ls -la /etc/letsencrypt/live/www.example.com

lsの結果がこんな感じなら成功です(ドメインは適宜自分のものに変更してください)

  • cert.pem
  • privkey.pem
  • chain.pem
  • fullchain.pem

3. nginxのインストールと設定

sudo yum -y insatall nginx
sudo nginx
sudo vim /etc/nginx/conf.d/default.conf

3-7行目に適合する部分を変更します。

server {
    listen       80  default_server;
    listen       443 ssl;
    server_name  www.example.com;
    ssl_certificate     /etc/letsencrypt/live/www.example.com/cert.pem;
    ssl_certificate_key /etc/letsencrypt/live/www.example.com/privkey.pem;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

設定の再読み込み後、httpsで対象のドメインにアクセスできれば完了です。

sudo /etc/init.d/nginx reload

f:id:breaktimes:20160425125249p:plain

次回こそ、LINE BOT APIについて書きます。

React NativeでサクッとIOSアプリを作ってみた

PR TIMESエンジニアの吉です。本日はスマートフォンアプリ開発について話したいと思います。

基本的にIOSアプリはSwiftObjective-CAndroidJavaで開発しますが学習コストが必要です。シンプルなアプリあるいはプロトタイプのアプリなど早くアプリを作りたい場合はSwiftjavaを使わなくても作れる方法はいろいろあります。 Monaca, PhoneGap, Titanium Mobile, React Native...

私はプロジェクト性質や開発メンバーのスキルなどを考慮してどれを選ぶのかを決めるべきたと思っています。適切な判断をするためには様々な技術を積極的に触ってみるのがいいでしょう。

このブログで紹介したいのはReact Nativeです。 f:id:breaktimes:20160422133322p:plain

開発元はfacebookjavascriptを使ってとても簡単にアプリを開発できるのが特徴です。今年のF8イベントのアプリもReact Nativeで開発したようでダウンロードして使ってみたらすごく完成度が高いアプリでした。

F8

F8

ソースコードも公開されているので本格的に勉強してみたい方はぜひ中身を確認してみてください。 github.com

本ブログではReact Nativeの公式ドキュメントのチュートリアルを参考にして書きました。 instagram APIとReact Nativeを使用して簡単なIOSアプリを作ってみました。

準備

1.homebrewでファイル監視ツールのwatchmanとjavascriptチェッカーツールのflowをインストールする

brew install watchman flow

2.node4.0以上のバージョンをインストール - nvmかnodebrewを利用バージョンコントロールすることをおすすめ

3.xcode7.0以上のバージョンをインストール

セットアップ

1.react nativeのcliをインストール

npm install -g react-native-cli

2.react nativeのプロジェクトファイルを作成する

react-native init react_ios_app

上記のコマンドで生成されたreact_ios_app/index.ios.jsファイルを修正します。

ソースコードの解説

使用するコンポーネントを読み込み

import React, {
  AppRegistry,
  Component,
  Image,
  ListView,
  StyleSheet,
  Text,
  View,
} from 'react-native';

InstagramのリクエストURLを定義

アクセストークン生成方法についてはInstagramデベロッパーページを参照してください。

var ACCESS_TOKEN = '';
var API_URL = 'https://api.instagram.com/v1';
var PARAMS = '/users/self/media/recent/?access_token=' + ACCESS_TOKEN;
var INSTAGRAM_REQUEST_URL = API_URL + PARAMS;

クラスとコンストラクタの定義

みなさんご存知のようにクラスが生成されるときに呼び出されるconstructorにリスト表示で使用するListViewのデータソースを初期化します。

class react_ios_app extends Component {

  constructor (props) {
    super(props);
    this.state = {
       dataSource: new ListView.DataSource({
         rowHasChanged: (row1, row2) => row1 !== row2, }),
         loaded: false,
    };
  }

Instagram APIから取得したデータをセットする

componentDidMountはコンポーネントがロードされた直後に1回だけ呼び出されます。

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(INSTAGRAM_REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.data),
          loaded: true,
        });
      })
      .done();
  }

レンダリング

Instagram APIコール前はローディングの文字をAPIからデータ取得完了後は実データをリストに表示する処理です。

  render() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMovie}
        style={styles.listView}
      />

    );
  }

  renderLoadingView() {
    return (
      <View style={styles.container}>
        <Text>
          Loading Photos ...
        </Text>
      </View>
    );
  }

  renderMovie(feed) {
    return (
      <View style={styles.container}>
        <Image
          source={{uri: feed.images.thumbnail.url}}
          style={styles.thumbnail}
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{feed.caption.text}</Text>
          <Text style={styles.year}>{feed.caption.created_time}</Text>
        </View>
      </View>
    );
  }
}

スタイル設定

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: {
    width: 150,
    height: 150,
  },
  rightContainer: {
    flex: 1,
  },
  title: {
    fontSize: 13,
    marginBottom: 8,
    textAlign: 'center',
  },
  year: {
    fontSize: 13,
    textAlign: 'center',
  },
  listView: {
    paddingTop: 20,
    backgroundColor: '#F5FCFF',
  },
});

全てのソースコードに関しては私のGitHubに公開しました。

github.com

iosアプリをビルドする

react-native run-ios


react native ビルド

感想

react nativeを利用するためにはreact.jsの使い方をある程度覚えないといけないことに気づきました。それにしてもswift,javaを使わずjavascriptだけで数時間でシンプルなアプリを開発できるのはすごく嬉しいですね。

使い方次第ではfacebookのf8アプリのような洗練されたアプリも開発できますし、ほぼ同じコードでIOS, Androidのアプリが同時開発できます。React Nativeは現時点でバージョン0.24です。メージャーリリースはしてないので仕事で導入するのはまだ早いと思いますが、これからもっと使いやすく高機能になると思いますのでみなさんもぜひ使ってみてはいかがでしょうか。

Chefでメール送信開発環境をサクッと作る

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

前回の記事で、メール送信機能における開発環境について書かせていただきました。
開発環境なので、基本的に毎回同じものを使います。chefのようなプロビジョニングが有効的です!
具体的な詳細は、前回の記事で確認していただければと思います。
今回は、Chefで簡単に送信開発環境をできるレシピを紹介したいと思います。

fileの配置

まずは、設定ファイルをあらかじめ取得しておいて、設定変更を行い、
files/default内に配置しておきます。
今回使用するファイルは以下の通りです。

  • aliases.regexp
  • transport_maps
  • main.cf
  • dovecot.conf
  • 10-mail.conf
  • 10-auth.conf

recipeの作成

それでは、recipeを作成したいと思います。
まずは、postfixを起動できる状態にして、postfixの設定を変更します。

service "postfix" do
    supports :status => true, :restart => true, :reload => true
    action [ :enable, :start ]
end

#postfixの設定を変更
cookbook_file "/etc/aliases.regexp" do
  source "aliases.regexp"
  mode "0644"
end
cookbook_file "/etc/postfix/transport_maps" do
  source "transport_maps"
  mode "0644"
end
cookbook_file "/etc/postfix/main.cf" do
  source "main.cf"
  mode "0644"
end

次にユーザーを作成して、受信できる状態にします。

## ID   catchall
## PASS catchall
user "catchall" do
    comment "catchall"
    home "/home/catchall"
    shell "/bin/bash"
    password "$1$ks.iXsX.$tTErfotf/Zg2n.0zZlFxl1"
    supports :manage_home => true
end

bash "catchallsetup" do
  cwd catpath
  code <<-EOH
    sudo su
    usermod -s /bin/false catchall
  EOH
  notifies :reload, 'service[postfix]'
end

最後に受信できるように受信サーバーの設定を設定を行います。

yum_package "dovecot" do
  action :install
end
cookbook_file "/etc/dovecot/dovecot.conf" do
  source "dovecot.conf"
  mode "0644"
end
cookbook_file "/etc/dovecot/conf.d/10-auth.conf" do
  source "10-auth.conf"
  mode "0644"
end
cookbook_file "/etc/dovecot/conf.d/10-mail.conf" do
  source "10-mail.conf"
  mode "0644"
end
directory "/home/catchall/mail/.imap/INBOX" do
  recursive true
  owner "catchall"
  group "catchall"
  action :create
end

最後に、dovecotを再起動すれば完璧です!

service "dovecot" do
  supports :status => true, :restart => true, :reload => true
  action [ :enable, :restart ]
end

これを行ったら、rainloop等のWEBメーラーツールを使用して、受信できるような環境を用意しましょう!
それに関しての手順は、前回の記事を参照して下さい!

メール送信機能における開発環境

VR関連のコンテンツやガジェトおすすめ8選

デザイナーの新井です。Oculus RiftHTC Viveなどのハイエンドのヘッドマウントディスプレイが発売され、VRが一般家庭でも楽しめるようになりました。スマートフォンをヘッドセットに装着して使用するタイプのGear VRなど手が出やすい価格のものが発表され盛り上がりを見せていますね。VRを楽しむためのコンテンツも揃ってきましたので今回はVR関連のコンテンツやコンテンツを作るガジェットなどを紹介したいと思います。

続きを読む

古いPHPアプリケーションの移行について考えてみる

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

レガシーマイグレーションなどと聞くと、基幹システムで大規模なリプレースを行って、 プロジェクトが炎上…というようなものを想像してしまいますが、 Webアプリケーションにおいても同様の問題が多く発生する時期なのではないかと思います。 実際、ここ数年私もそういうシステムばかり触っているような気がします。

モデルケース

  1. 大きな分類での機能(フロント機能/管理機能など)がすべて一か所に集中している
  2. ドキュメントがなく、詳細仕様はコードを解析しなければならない
  3. データベースの構成変更は管理されていない状態
  4. 運用中のシステムであるため、長期のメンテナンスは実施できない
  5. 新しい機能のリリース頻度が高い

このような状況では、開発者はシステム全体を新しいものに入れ替えることを考えますが、 上記のような項目が足かせになり、実現は困難になります。

コードレベルでの移行(クラス/メソッドのリライトなど)が、 実際に多く行われている方法だと思います。 これは、大きな変更を行わずともすぐに実施できるからですが、 根本的な問題の解決には至らないことが多いです。

従って、今回は上記の「大きな機能分類」を別のシステムで再構築する、 という観点から移行を考えてみたいと思います。

続きを読む

人感センサーと連携したアプリをつくりたい☆*:.。.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サイトからデータを取り出すスクレイピングにも使えます。

続きを読む