Post on 02-Jul-2015
description
note スタートアップだからこだわったこと
Shoei Takamaru (@takamario)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Agenda• 自己紹介・サービス紹介
• スタートアップだからこだわったこと
• 最新技術を!
• グローバルに!
• イケてる!
• etc…
• まとめ2
自己紹介
Copyright © Piece of Cake, Inc. All Rights Reserved.
Who are you?
• 高丸 翔英 (たかまる しょうえい, @takamario)!
• エンジニア (フロントエンド寄り?)!
• 2008年4月 楽天 入社!
• 2014年1月 ピースオブケイク 入社!
• 趣味は、ジョギング・バンド活動・写真・料理・酒
4
サービス紹介
Copyright © Piece of Cake, Inc. All Rights Reserved.
Our Services
• デジタルコンテンツ配信プラットフォームCakes (ケイクス) 2012年9月リリースhttps://cakes.mu/!
• クリエイターと読者をつなげるサイト!
• 週額150円 / 月額500円で全記事読み放題!
• サブカルな記事が多いです(腐女子とか、恋愛工学とか、レズとか)
6
Copyright © Piece of Cake, Inc. All Rights Reserved.
Our Services• note (ノート) 2014年4月リリース
https://note.mu/!
• 個人でコンテンツが100円から販売できる プラットフォーム
7
Copyright © Piece of Cake, Inc. All Rights Reserved.
Got a lot of feedback
8
• リリース1ヶ月で2,000万PV、100万UU 達成
Copyright © Piece of Cake, Inc. All Rights Reserved.
Got a lot of feedback
• 芸能人アカウントも続々
9
伊集院光さん
ロンブー田村淳さんくるりさん
GLAY HISASHIさん
Copyright © Piece of Cake, Inc. All Rights Reserved.
Quruli
• くるり公式ファンクラブ純情息子がnoteに移行
• 会報、オフショット、未公開音源、チケット先行予約案内など、すべてがnote上で!
10
Copyright © Piece of Cake, Inc. All Rights Reserved.
Great Hits• 山本さほさんのマンガ 岡崎に捧ぐがヒット! https://note.mu/sahoobb/m/m6d7f0f032e74
• 深爪さんの、性の話から ドラマの感想まで書かれた コラムがヒット!https://note.mu/fukazume_taro
• 今後は一般の方の作品が 爆発的に売れる可能性も!
11
Copyright © Piece of Cake, Inc. All Rights Reserved.
Recent Releases
• 2014年10月 iPhone/Androidアプリリリース
• PC版だけだったテキスト編集、そして、ボイスレコーダー代わりにサウンドノート録音が可能に
• プッシュ通知で新しいコンテンツの更新を見逃しません!
12
Copyright © Piece of Cake, Inc. All Rights Reserved.
Recent Releases
• クリエイターサポート機能"
• いわゆる投げ銭です
• Crowd Funding 的な使い方もできる
13
スタートアップだからこだわったこと
最新技術を!
Copyright © Piece of Cake, Inc. All Rights Reserved.
Use new technologies!
16
Angular.jsを採用• HTMLがそのままテンプレートに
• インラインでイベントバインディング(ng-click等)インラインでviewとmodelのバインディング(ng-model)
• Model 側であった変更が、View に伝わるView 側であった変更が、Model に伝わる(2-way Data binding)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Angular Style
17
<div class="note" ng-controller="NoteCtrl"> <div class="datetime">{{note.published_at | date:'yyyy/MM/dd'}}</div> <p class="talk">{{note.body}}</p>! <button class="like-button" ng-click="likeNote()">! <div class="comment"> <input class="comment-form" ng-model="comment"> </div></div>
var noteApp = angular.module('noteApp',[]);!myApp.controller('NoteCtrl', [ '$scope', function($scope, $http) { $scope.likeNote = function() { $http.post('like'); }; }]); JS
HTML
Copyright © Piece of Cake, Inc. All Rights Reserved.
Angular’s Pros
• HTMLにコード書くのはラク
• 2 way-binding 激ラク データ更新を反映させるためのコード書かなくても、勝手に表示値が変わってくれる
18
「使ってみたかったかった」が一番の理由。不安はあったが。。!
デザイナーがHTML(haml)を作成/修正
エンジニアがng-xxxxを付ける/移動する
スピーディーな開発
Copyright © Piece of Cake, Inc. All Rights Reserved.
How about SEO?
• たいていのボットは、JSでレンダリングされてものは 読み取れない
• 対応しなければいけないのは、Google と Yahoo! と Bing と。。?
• Facebook?
• はてな?Pocket?Google+?19
SEO対策は?
Copyright © Piece of Cake, Inc. All Rights Reserved.
OGP
• 初期には、Phantom JS で Angular をレンダリングする荒技を検討
• が、OGP bot ごとに対応が必要
• 2段階で来るbotも。。
• サーバサイドで返すように修正しました (Googlebot以外)
20
Phantom JS (w/ cache)
Copyright © Piece of Cake, Inc. All Rights Reserved.
What's “note”?
• 「note」で検索(2014年11月7日時点)
21
2位(良い◎)
Copyright © Piece of Cake, Inc. All Rights Reserved.
What's “ノート”?
• 「ノート」で検索(2014年11月7日時点)
22
Copyright © Piece of Cake, Inc. All Rights Reserved.
What's “ノート”?
23
6位(そんなに悪くない)
• 「ノート」で検索(2014年11月7日時点)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Note is …
• noteとは
24
Copyright © Piece of Cake, Inc. All Rights Reserved.
Spam…
• スパム投稿が増えた。。対策に追われた。。
• スパムが来る=注目されているとポジティブに考えた
25
Copyright © Piece of Cake, Inc. All Rights Reserved.
Angular 1.3
• 2014年10月13日リリースhttps://github.com/angular/angular.js/blob/master/CHANGELOG.md#130-superluminal-nudge-2014-10-13
• パフォーマンス向上!
• データバインディングを一度だけにすることが可能に⇒ 多量のデータバインディングは レンダリングが超遅くなる (「もっとみる」ページャ系)
26
グローバルに!
Copyright © Piece of Cake, Inc. All Rights Reserved.
Develop with Global Members
• 元々、CTOがシンガポールにいる(それだけでカオス)
• iPhoneエンジニアもシンガポールにいる(これまたカオス)
• Framgia (VN) と連携 http://framgia.com/jp/case/poc.html
• ElasticSearch対応やBayesian Filterの開発など得意な分野(ロジカルなもの)を担当!
28
Copyright © Piece of Cake, Inc. All Rights Reserved.
Discuss Globally!
29
ChatWork GitHub
イケてる雰囲気を!
Copyright © Piece of Cake, Inc. All Rights Reserved.
Looks so cool!
31
• 元々は、ファンクラブに 近いUIだった
• クリエイターまたは有名人がファンと深い交流を行うSNS
Copyright © Piece of Cake, Inc. All Rights Reserved.
Looks so cool!
• ピボット。何でもできて面白い雰囲気を!
• うちのデザイン部長がズバッと作った!
32
Copyright © Piece of Cake, Inc. All Rights Reserved.
Looks so cool!
33
• MediumライクなWYSIWYGエディタ(contenteditable)
• 生JSでDOMいじりばっかりバグ多い、ソースはカオス
• 今はこういうライブラリも。。https://github.com/daviferreira/medium-editor
Copyright © Piece of Cake, Inc. All Rights Reserved.
IE makes happy?
34
IEを斬る!!
Copyright © Piece of Cake, Inc. All Rights Reserved.
iOS 8 Support
• アプリリリース間近のタイミングで、iOS 8 がリリースされる。。
• 幸い修正範囲は少なかったが、審査に時間がかかった。。
• やはり、対応して出したほうが「おおっ!」だと思った
35
Dog Fooding!
Copyright © Piece of Cake, Inc. All Rights Reserved.
Use note for our Daily Report
• noteを使って日報を書く
• 使いにくいところを自分たちで見つける
37
技術を追い求めること
Copyright © Piece of Cake, Inc. All Rights Reserved.
Someone said…
• 1年に1つのプログラミング言語は覚えるべき(LotY)from The Pragmatic Programmer
• 1つの言語を使い続けるより、その場に合わせた言語選択ができるように
39
Copyright © Piece of Cake, Inc. All Rights Reserved.
New Tech is similar to Start Up
• 最新技術はスタートアップに似ている
• バグも多いが、改善されていく(成長)のが楽しい
• 誰かに任せるのではなく、自分たちで考え検証して、結果を出す
40
Copyright © Piece of Cake, Inc. All Rights Reserved.
Future of JS• DHH は JS MVCフレームワーク嫌いらしい
http://signalvnoise.com/posts/3697-server-generated-javascript-responses
• HTML/JS分離の時代から、HTML + JSの部品の時代
• Google さんの時代
• Polymer → 部品化、再利用性の向上
• Dart → JSのパフォーマンス向上
• HTTP2.0 (SPDY) → セキュア、つなぎっぱ
• Android Wear → どこでも、どのデバイスでも41
メンバーにこだわる!
Copyright © Piece of Cake, Inc. All Rights Reserved.
Our Dev Team• CTO (SGP) x 1
• エンジニア (JPN) x 2 (高丸を含む)
• iPhone App エンジニア (JPN x 1, SGP x 1)
• デザイナー (JPN) x 2
• and ディレクター、ユーザサポート(JPN)
43
愉快なサブカル野郎たち
ぜんぜ足りてまへん!
Copyright © Piece of Cake, Inc. All Rights Reserved.
We’re hiring!
• cakesとnoteを支えるサーバーサイドエンジニアを募集!https://www.wantedly.com/projects/10771
• Angular JSを使って開発したいエンジニア大募集! https://www.wantedly.com/projects/10789
• noteのiOS/Androidアプリをつくりたいエンジニア大募集!https://www.wantedly.com/projects/10784
45
ピースオブケイクではエンジニアを募集しています!
Thank you for listening!