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

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

PR TIMES Developer Blog

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

PR TIMES運営サービスのクリスマス

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

クリスマスですね。
PR TIMESが運営するサービスにもエンジニアチームでクリスマス気分を盛り上げる施策をいくつか組み込みましたので、ご紹介します。
お気づきになられた方はいらっしゃいましたでしょうか?

続きを読む

PR TIMESはエンジニアどんなエンジニアを求めているのか?

2015年ももう少しで終わり、新たな年も始まりますね。
年が明けると卒業まで1年少しとなった学年の方々は、就職活動に向けてそわそわしてくるのではないでしょうか?
すでに活躍されているエンジニアでも年が明けたら心機一転、転職を考えている方もいらっしゃることと思います。

f:id:breaktimes:20151211185746j:plain

そこで今回はPR TIMESではどんな体制で開発しているのか、どんなエンジニアを求めているのか、そんなことをお話します。

続きを読む

javascriptのアニメーションライブラリ TweenMax(基礎編)

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

フロントエンドを担当していると、重要になってくるのがUI設計やユーザーを惹きつける気持ちの良いアニメーション。
javascriptで作成する場合、jQuery animateを使っている方が多いと思います。
今回はそのjQuery animateより高速と言われるTweenMaxをご紹介してみます。

Flash全盛期にフルFlashサイトを作られていた方などは聞き覚えのある名前ではないでしょうか。
結構なシェアで使われていたトゥイーンライブラリですね。

実はPR TIMESでもTayoriというサービスで部分的に使っています。
Tayoriのポップボタンを押したり、ドラッグしたり、スワイプしたりした時のアニメーションはTweenMaxなんです。
http://tayori.comf:id:breaktimes:20151127192441g:plain

さて本題に入ります。
まずはライブラリを読み込んでおきましょう。

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js'></script>

まずはテスト用に動かすオブジェクトを作っておきます。

<div class="circle"></div>
.circle {
  width: 100px;
  height: 100px;
  top: 50px;
  left: 10px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
}

それではTweenMaxをつかって、このサークルを動かしてみましょう。

・set
javascript内に以下のコードを記述します。

TweenMax.set('.circle',{left: 300});

setを使うとオブジェクトの値を設定することができます。
アニメーショはせずに瞬時にプロパティが変更されるメソッドです。

・to

TweenMax.to('.circle', 1.5,{left: 300, ease: Sine.easeInOut});

toはオブジェクトを指定の値までアニメーションさせるメソッドです。

・fromto

TweenMax.fromTo('.circle', 1.5,{left: 150, ease: Sine.easeInOut}, {left: 300, ease: Sine.easeInOut});

formtoはオブジェクトの初期値を設定して、そこから指定値までアニメーションをさせるメソッドです。

まとめたものはこちらをご覧ください。

今回は本当の基礎を紹介しました。
ちょっと動かすだけでも楽しいですよね。

次回はもう少し応用編でお送りします。

TechCrunch Tokyo 2015

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

ハッカソンに引き続き、本編の方にも行ってスタートアップバトルを見させて頂きました。jp.techcrunch.com

どちらも同じTechCrunchというイベントではありますが、それぞれに違った熱気を感じたので、両方見られて良かったと感じています。

続きを読む

TechCrunch Tokyo 2015 ハッカソン

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

TechCrunch TokyoのゴールドスポンサーとしてTayoriAPIを提供させて頂きました。
f:id:breaktimes:20151116182105j:plain

バックエンドの深川と2人で説明&サポートとして伺ってきたのですが、全36チームが実際のプロトタイプまで作って白熱したプレゼンを行うのを見て、大変刺激を受けた2日間。
f:id:breaktimes:20151116182336j:plain

みなさん素晴らしいアイデアばかりでPR TIMES賞を選出するときもだいぶ迷いましたよ。
f:id:breaktimes:20151116182529j:plain


おつかれさまでした!

TayoriがTechCrunchハッカソンにAPI提供します!

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

jp.techcrunch.com

7月に正式リリースしましたカスタマーリレーションサービスTayoriが11/14〜15にかけて開催されるTechCrunch Tokyo 2015のハッカソンにAPIを提供します。tayori.com

Tayoriはお問い合わせフォームが簡単に作成でき、カスタマーとスムーズにやりとりが出来るサービスなんです。
実はこのブログの右下に出ている緑色のアイコン、これもTayoriを使って設置したものとなっています。

APIは今回のハッカソン専用のものとなりますので、ご参加される方は是非とも使ってみてくださいね!

当日は僕ともう1名のエンジニアで会場に伺って、説明やサポートなどをさせて頂きますので
よろしくお願いします。

BREAK TIMES NITE VOL.5 -アプリ開発- イベント終了☆*:.。.

PR TIMES エンジニアの宇佐見です。

先月の8月20日(木)に、PR TIMES開発チーム主催のBREAK TIMES NITE VOL.5が開催されました。テーマはアプリ開発!アプリというとWindowsAndroid等のアプリもありますが、今回はiPhoneiPodiPadで動作するiOSアプリのお話が中心となりました。

会場には、お仕事でアプリ開発をされている方やこれから開発してみたいという方、アプリ開発におけるビジネスにご関心ある方など、たくさんの方にお集まりいただきました。

ご参加、ご応募いただきましたみなさま、ありがとうございました!

f:id:breaktimes:20150907072142j:plain

イベントは、19時少し過ぎた頃にスタートしました。

スタッフとして参加するのも今回で3回目となりまして、きれいな司会者様によって進行されるイベントの光景にもすっかり慣れました(笑)アプリ開発ということもあってでしょうか、女性の参加者が多く感じました。エンジニア向けの勉強会に参加するとやはり男性が多いのですが、フロントエンドやUI/UX、そしてアプリ開発がテーマの勉強会は女性の参加率が高い印象があります。

f:id:breaktimes:20150907072212j:plain


まずはPR TIMESエンジニアからの登壇者として私から「Switch to Swift from Objective-C」というテーマで発表させていただきました。Objective-Cによるアプリ開発経験のある私が、Swiftによる開発に挑戦!その中で得たことやハマってしまったことを共有できればと思い、このテーマにしました。

全く同じ機能のアプリで実装がどれだけ変わるのかというのを実感したく、また、自分以外の方々にも実感していただきたかったので、Objective-CSwiftのそれぞれで0から全く同じ機能を持つアプリを開発し、発表の時にソースコードを比較していくことにしました。

f:id:breaktimes:20150907072233j:plain

その時のスライドやソースコードは、こちらで公開可能なものとなりましたら投稿いたします☆*:.。.


続いて、HMDT株式会社 代表取締役の木下誠さんがご登壇され、アプリ開発のビジネス的な側面をお話いただきました。

f:id:breaktimes:20150907072248j:plain

技術者として大手企業から独立後、HMDT株式会社を設立されてから現在に至るまでに、どのようにしてアプリ開発をビジネスとして成り立たせてこられたのかを深く伺うことができ、開発者の立場であっても経営者の立場であっても大変勉強になる講演内容だったと思います。

特に、クライアント様を探されるところからプロジェクトを完了されるまでのことや、売り上げに結び付けるにあたりどうされているか等、リアルなお話を伺えたことはとても貴重でした。

木下さんは私がPR TIMESに来る前に一緒にお仕事していまして、iOSアプリ開発の極意をみっちりと教えていただき、私の中では師匠と弟子のような関係です。(ご本人はどう思っていらっしゃるかわかりませんが…)当時はまさか一緒に登壇するなんて思ってもみませんでしたので、今回こうして実現できたことがとても嬉しかったです。

HMDT

Makoto Kinoshita (@mkino) | Twitter


セッション後は美味しいお料理とお酒を楽しみながらの交流会です。みなさん、テーマであるアプリ開発についてや、お仕事の話で盛り上がっていました。

f:id:breaktimes:20150907072746j:plain


そして最後は恒例となりつつある記念撮影をして、イベント終了となりました。

f:id:breaktimes:20150907072340j:plain


次回のBreakTimesNiteVol.6は近々開催予定です。是非ご期待ください☆*:.。.

8/20(木) BREAK TIMES NITE VOL.5 -アプリ開発- 開催!

f:id:breaktimes:20150501113609p:plain

2014年8月21日に第1回目を開催してからちょうど1年、数多くの参加者に支えられ続けてきましたBREAK TIMES NITEも5回目となりました。
今回はアプリ開発をテーマに開催致します!

ゲスト講師にはHMDT株式会社の代表取締役木下誠氏をお迎えしました。「大辞泉」「駅探エクスプレス」などを手がけられ、「たのしいSwiftプログラミング」「iPhone SDK 3プログラミング大全」などの著書もあります木下氏に、アプリ開発のビジネス的な側面を語って頂きます。クライアントとの打ち合わせ、技術選定、ビジネスモデルなど数々のアプリ開発を手がけてこられた経験があるからこそ語れる内容にご期待ください。

また、PR TIMESからはエンジニアの宇佐見が登壇し、アプリ開発の技術的側面についてお話いたします。

BREAK TIMES NITE VOL.5 -アプリ開発-
日時:2015年8月20日(木)19:00~21:30
場所:赤坂ガーデンシティ18F
参加費:無料(懇親会も無料でご参加頂けます)

Program
1.宇佐見英美子
PR TIMESエンジニア
デザイン系/情報系の学校を卒業後、WEB制作会社にて、WEBデザイナーイラストレーター、プログラマーとして幅広くお仕事をさせていただく。その後、サーバーサイドやフロントエンド、Flash/FlexのRIAやiOSアプリなどの開発に携わり、現在もエンジニアとしての道を直進中☆*:.。.

2.木下誠氏 -アプリ開発のビジネス的な側面
HMDT株式会社代表取締役OS XおよびiOSアプリケーションの開発を行う。
iOSアプリ開発は黎明期から行っており、手がけた本数は100を超える。主な製品として「大辞泉」「中日日中辞典」「DropTalk」「たのしいアプリプログラミング 〜 Swiftではじめよう!」「HMDT BOOKS」「音楽のある情景」「GALAPAGOS」「UTAMO」「MapFan」「駅探エクスプレス」など。
近著に「たのしいSwiftプログラミング」「iOS開発におけるパターンによるオートマティズム」「iPhone SDK 3プログラミング大全」「たのしいCocoaプログラミング [Leopard対応版]」など。
f:id:breaktimes:20150728180600j:plain

3.交流会
ケータリングとドリンクをご用意しています。講師や参加者と交流しましょう!

交流会も含め、どなたでも無料で参加できます。
お申込み:http://breaktimes5.peatix.com
breaktimes5.peatix.com


たくさんの方のご参加をお待ちしています!

本当におもしろい“地方ニュース”って何? 地方をテーマにした新メディアを“廃村”で考える3日間! PR TIMES サマーインターン募集開始!

2017年3月卒業予定の学生を対象として、2泊3日にわたるインターンシップを2015年9月7日(月)から9日(水)に開催します!

山形県の“廃村”を舞台に、「今まで埋もれてしまっていた地方のニュースを流通させ、生活者に届ける新しいメディア」を社員と共に考えます。

f:id:breaktimes:20150717205138p:plain

募集対象となる学生は、エンジニア/デザイナー/ディレクター/プロデューサー志望の方を対象とします。また、今回出たアイディアは実際にサービス化する予定です。今回のインターンシップを経て、長期的にこの課題に関わっていきたいと考える方は、研修生として社員サポートの元、開発や運営に携わっていただきます。皆様のご応募お待ちしております。


内容 :【地方の情報を流通させる新しいメディアを考えるアイディアソン】
・PR TIMES社員(エンジニア職、PRプランナー職、メディア運営職)による座学
・座学情報を元に、チームで新メディアを企画/発表
・今回のインターンシップを経て、長期的に関わっていきたいと考える方は、研修生として社員サポートの元、開発や運営に携わっていただきます

受入人数:20名予定(応募後、書類選考と面接を行い、インターン生を決定します。)
募集期間:2015年7月17日(金)~8月10日(月)
応募職種:エンジニア/デザイナー/ディレクター/プロデューサー(文系理系問わず)
参加条件:2017年3月卒業予定の学生で、WEBサービスへの関心のある方
    (推奨)HTMLの基礎知識
    (推奨)UI設計の基礎知識
開催場所:山形県東村山郡 宿泊施設「タガマヤ村」(URL:http://tagamaya.com/
実施期間:2015年9月7日(月)~9日(水) 2泊3日
参加費  :無料
交通費  :全額支給

応募及び詳細は下記サマーインターン特設ページをご覧ください。prtimes.co.jp

Laravelの概要

R TIMESサーバーサイトエンジニアのゴです。

今日はPHPフレームワークの中で、最近注目されつつのLaravelについて簡単にお話しをしたいと思います。

フレームワークとは
Webフレームワークには、Webアプリケーションを開発するために必要なライブラリ(プログラム部品)と構造が含まれています。
Laravel5のディレクトリ構成は以下

app
  -----Commonds
  -----Console
  -----Events
  -----Exceptions
  -----Handlers
         -----Commonds
         -----Events
  -----Http
         -----Controllers
         -----Middleware
         -----Requests
  -----Providers
  -----Services
bootstrap
config
detabase
  -----migration
  -----seeds
public
resources
  -----assets
  -----lang
  -----views
storage
tests
vendor

LaravelはMVCパターンを採用したWebフレームワークで、主な機能は次の通りです。

ここでも、簡単にMVCとは何をお話しします。すでに理解した方はご辛抱していただきたいです。
MVCという名称は、3つの要素「モデル(Model)」「ビュー(View)」「コントローラ(Controller)」の頭文字が並べられたものです。それらの関係性は↓

  • アプリケーションの外からのイベント通知はコントロータが処理し、モデルを操作します。
  • モデルが更新されるとビューに通知され、画面表示が変わります。
ルーティング

あるドメイン下のURLリクエストを全て受け取り、アプリケーションのルート定義に従って、マッピング処理を実行します。app/Http/routes.phpの中で定義します。

スキーマビルダー

スキーマビルダーとはスクリプトでテーブル作成やカラム追加などの処理が書けます。Laravelのスキーマビルダーは次のDBを対応しています。

1:Sqlite

2:MySQL

3:PostgreSQL

4:SQL Server

テーブルを作成するには、Schema::createメソッドを使用する

Schema::create('company', function($table){
	$table->increments('id');
})

最初の引数はテーブル名で、2つ目は無名関数です。新しいテーブルを定義するためのBlueprintオブジェクトを取ります。

マイグレーション

マイグレーションスキーマビルダーを使ったテーブル作成やカラム追加処理にバージョン管理機能を追加します。Laravelのマイグレーションマイグレーションフィアルに日時とクラス名を埋め込み、データベースのmigrationsテーブルで管理しています。
書くファイルにはup(),down()2つのメソッドがあって、例えばup()メソッドでテーブル作成処理を書いたら、down()メソッドでテーブル削除処理を書くようにします。

クエリビルダー

LaravelではSQLを直接書く必要がありません。メソッドチェーンを使ってSQL文を組み立てることができます。例えばusersテーブルのusernameカラムが「田中」で始まるユーザーのemailを抽出する場合は

DB::table('users')->select(['email'])->where('username', 'like', '田中*')->get();
Eloquentモデル

Laraveは「Eloquent」というO/Rマッパ(オブジェクト リレショナル マッパ)を持っています。それはデーターベースのレコードをオブジェクトとして扱うパターンの1つです。
Eloquentモデルを定義します。

class Test extends Eloquent{}

また、make:modelコマンドを使用し、Eloquentモデルを生成することもできます。

php artisan make:model Test
Bladeテンプレートエンジン

BladeテンプレートはシンプルなPHP構文のラッパーです。変数展開は{{$variable}},コメントは{{--コメント--}}。@で始まるディレクティブはPHPの制御構文(if, while, foreachなど)にそのまま置き換えられるほか、@extends, @section, @includeなどHTMLぺーじを部品下する仕組みもあります。

サービスコンテナ(IoCコンテナ

サービスコンテナはクラス間の依存を管理する強力な管理ツールです。アプリケーションのどこからでもアクセスできる「名前付きのPHPオブジェクトが入った容れ物」です。フレームワークや外部パッケージが提供する各種オブジェクトが入っていて、PHPのインターフェースやクラス名で取り出すことができます。

Laravelの学習は始めたばかりので、今回はおおざっぱで概要を簡単に説明しました。今後はアプリを実際に作って、Laravelのいいところを体験してみたいです。