20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru

note
スタートアップだからこだわったこと
Shoei Takamaru (@takamario)

Agenda
• 自己紹介・サービス紹介
• スタートアップだからこだわったこと
• 最新技術を！
• グローバルに！
Copyright © Piece of Cake, Inc. All Rights Reserved.
• イケてる！
• etc…
• まとめ
2

Who are you?
• 高丸翔英 (たかまるしょうえい, @takamario)!
• エンジニア (フロントエンド寄り？)!
• 2008年4月楽天入社!
• 2014年1月ピースオブケイク入社!
• 趣味は、ジョギング・バンド活動・写真・料理・酒
4

Our Services
• デジタルコンテンツ配信プラットフォーム
Cakes (ケイクス)　2012年9月リリース
https://cakes.mu/!
• クリエイターと読者をつなげるサイト!
• 週額150円 / 月額500円で全記事読み放題!
• サブカルな記事が多いです
(腐女子とか、恋愛工学とか、レズとか)
6

Our Services
• note (ノート)　2014年4月リリース
https://note.mu/!
• 個人でコンテンツが100円から販売できる
プラットフォーム
7

Got a lot of feedback
8
• リリース1ヶ月で2,000万PV、100万UU 達成

Got a lot of feedback
• 芸能人アカウントも続々
GLAY HISASHIさん
9
伊集院光さん
くるりさんロンブー田村淳さん

Quruli
• くるり公式ファンクラブ
純情息子がnoteに移行
• 会報、オフショット、
未公開音源、チケット先行
予約案内など、
すべてがnote上で！
10

Great Hits
• 山本さほさんのマンガ
岡崎に捧ぐがヒット！
https://note.mu/sahoobb/m/
m6d7f0f032e74
• 深爪さんの、性の話から
ドラマの感想まで書かれた
コラムがヒット！
https://note.mu/fukazume_taro
• 今後は一般の方の作品が
爆発的に売れる可能性も！
11

Recent Releases
• 2014年10月 iPhone/Androidアプリ
リリース
• PC版だけだったテキスト編集、
そして、ボイスレコーダー代わりに
サウンドノート録音が可能に
• プッシュ通知で
新しいコンテンツの更新を
見逃しません！
12

Recent Releases
• クリエイターサポート機能"
• いわゆる投げ銭です
• Crowd Funding 的な
使い方もできる
13

スタートアップだから
こだわったこと

Use new technologies!
16
Angular.jsを採用
• HTMLがそのままテンプレートに
• インラインでイベントバインディング(ng-click等)
インラインでviewとmodelのバインディング(ng-model)
• Model 側であった変更が、View に伝わる
View 側であった変更が、Model に伝わる
(2-way Data binding)

Angular Style
var noteApp = angular.module('noteApp',[]);
!
myApp.controller('NoteCtrl', [
'$scope',
function($scope, $http) {
$scope.likeNote = function() {
$http.post('like');
};
}
]); JS
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>
HTML

Angular’s Pros
• HTMLにコード書くのはラク
• 2 way-binding 激ラク
データ更新を反映させるためのコード書かなくても、勝手に表示値が変わってくれる
18
「使ってみたかったかった」が一番の理由。
不安はあったが。。！
デザイナーがHTML(haml)を作成／修正
エンジニアがng-xxxxを付ける／移動する
スピーディーな開発

How about SEO?
• たいていのボットは、JSでレンダリングされてものは
読み取れない
• 対応しなければいけないのは、
Google と Yahoo! と Bing と。。？
• Facebook？
• はてな？Pocket？Google+？
19
SEO対策は？

OGP
• 初期には、
Phantom JS で Angular を
レンダリングする荒技を検討
• が、OGP bot ごとに対応が必要
• 2段階で来るbotも。。
• サーバサイドで返すように修正
しました (Googlebot以外)
Phantom JS
(w/ cache)
20

What's “note”?
• 「note」で検索
(2014年11月7日時点)
21
2位
(良い◎)

What's “ノート”?
• 「ノート」で検索
(2014年11月7日時点)
22

What's “ノート”?
• 「ノート」で検索
(2014年11月7日時点)
23
6位
(そんなに悪くない)

Note is …
• noteとは
24

Spam…
• スパム投稿が増えた。。対策に追われた。。
• スパムが来る＝注目されているとポジティブに考えた
25

Angular 1.3
• 2014年10月13日リリース
https://github.com/angular/angular.js/blob/master/
CHANGELOG.md#130-superluminal-nudge-2014-10-13
• パフォーマンス向上！
• データバインディングを一度だけにすることが可能に
⇒ 多量のデータバインディングは
　レンダリングが超遅くなる (「もっとみる」ページャ系)
26

Develop with Global Members
• 元々、CTOがシンガポールにいる
(それだけでカオス)
• iPhoneエンジニアもシンガポールに
いる(これまたカオス)
• Framgia (VN) と連携
http://framgia.com/jp/case/poc.html
• ElasticSearch対応や
Bayesian Filterの開発など
得意な分野(ロジカルなもの)を
担当！
28

Discuss Globally!
ChatWork GitHub
29

Looks so cool!
31
• 元々は、ファンクラブに
近いUIだった
• クリエイターまたは有名人が
ファンと深い交流を行うSNS

Looks so cool!
• ピボット。何でもできて面白い雰囲気を！
• うちのデザイン部長がズバッと作った！
32

Looks so cool!
33
• MediumライクなWYSIWYG
エディタ
(contenteditable)
• 生JSでDOMいじりばっかり
バグ多い、ソースはカオス
• 今はこういうライブラリ
も。。
https://github.com/
daviferreira/medium-editor

IE makes happy?
34
IEを斬る！！

iOS 8 Support
• アプリリリース間近のタイミングで、
iOS 8 がリリースされる。。
• 幸い修正範囲は少なかったが、
審査に時間がかかった。。
• やはり、対応して出したほうが
「おおっ！」だと思った
35

Use note for our Daily Report
• noteを使って日報を書く
• 使いにくいところを
自分たちで見つける
37

技術を追い求めること

Someone said…
• 1年に1つのプログラミング言語は
覚えるべき(LotY)
from The Pragmatic Programmer
• 1つの言語を使い続けるより、
その場に合わせた
言語選択ができるように
39

New Tech is similar to Start Up
• 最新技術はスタートアップに似ている
• バグも多いが、改善されていく(成長)のが楽しい
• 誰かに任せるのではなく、自分たちで考え検証して、
結果を出す
40

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

メンバーにこだわる！

Our Dev Team
• CTO (SGP) x 1
• エンジニア (JPN) x 2 (高丸を含む)
• iPhone App エンジニア (JPN x 1, SGP x 1)
• デザイナー (JPN) x 2
• and ディレクター、ユーザサポート(JPN)
43
愉快なサブカル野郎たち

ぜんぜ足りてまへん！

We’re hiring!
ピースオブケイクではエンジニアを募集しています！
• cakesとnoteを支えるサーバーサイドエンジニアを募集！
https://www.wantedly.com/projects/10771
• Angular JSを使って開発したいエンジニア大募集！
• noteのiOS/Androidアプリをつくりたいエンジニア大募集！
45

20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru

More Related Content

What's hot (20)

Similar to 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru (20)

20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru