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

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

Shoei Takamaru (@takamario)

Copyright © Piece of Cake, Inc. All Rights Reserved.

Agenda• 自己紹介・サービス紹介

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

• 最新技術を！

• グローバルに！

• イケてる！

• etc…

• まとめ2

自己紹介


Who are you?

• 高丸翔英 (たかまるしょうえい, @takamario)!

• エンジニア (フロントエンド寄り？)!

• 2008年4月楽天入社!

• 2014年1月ピースオブケイク入社!

• 趣味は、ジョギング・バンド活動・写真・料理・酒

4

https://twitter.com/takamario

サービス紹介


Our Services

• デジタルコンテンツ配信プラットフォームCakes (ケイクス)　2012年9月リリースhttps://cakes.mu/!

• クリエイターと読者をつなげるサイト!

• 週額150円 / 月額500円で全記事読み放題!

• サブカルな記事が多いです(腐女子とか、恋愛工学とか、レズとか)

6

https://cakes.mu/


Our Services• note (ノート)　2014年4月リリース

https://note.mu/!

• 個人でコンテンツが100円から販売できるプラットフォーム

7

https://note.mu/


Got a lot of feedback

8

• リリース1ヶ月で2,000万PV、100万UU 達成


Got a lot of feedback

• 芸能人アカウントも続々

9

伊集院光さん

ロンブー田村淳さんくるりさん

GLAY HISASHIさん

https://note.mu/hikaruijuin

https://note.mu/atsushilonboo

https://note.mu/quruli

https://note.mu/hisashi


Quruli

• くるり公式ファンクラブ純情息子がnoteに移行

• 会報、オフショット、未公開音源、チケット先行予約案内など、すべてがnote上で！

10

https://note.mu/quruli/m/m86d745e4e37e


Great Hits• 山本さほさんのマンガ岡崎に捧ぐがヒット！ https://note.mu/sahoobb/m/m6d7f0f032e74

• 深爪さんの、性の話からドラマの感想まで書かれたコラムがヒット！https://note.mu/fukazume_taro

• 今後は一般の方の作品が爆発的に売れる可能性も！

11

https://note.mu/sahoobb/m/m6d7f0f032e74

https://note.mu/fukazume_taro


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

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


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以外)

20

Phantom JS (w/ cache)


What's “note”?

• 「note」で検索(2014年11月7日時点)

21

2位(良い◎)


What's “ノート”?

• 「ノート」で検索(2014年11月7日時点)

22


What's “ノート”?

23

6位(そんなに悪くない)

• 「ノート」で検索(2014年11月7日時点)


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

https://github.com/angular/angular.js/blob/master/CHANGELOG.md#130-superluminal-nudge-2014-10-13

グローバルに！


Develop with Global Members

• 元々、CTOがシンガポールにいる(それだけでカオス)

• iPhoneエンジニアもシンガポールにいる(これまたカオス)

• Framgia (VN) と連携 http://framgia.com/jp/case/poc.html

• ElasticSearch対応やBayesian Filterの開発など得意な分野(ロジカルなもの)を担当！

28

http://framgia.com/jp/case/poc.html


Discuss Globally!

29

ChatWork GitHub

イケてる雰囲気を！


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

https://medium.com/

https://github.com/daviferreira/medium-editor


IE makes happy?

34

IEを斬る！！


iOS 8 Support

• アプリリリース間近のタイミングで、iOS 8 がリリースされる。。

• 幸い修正範囲は少なかったが、審査に時間がかかった。。

• やはり、対応して出したほうが「おおっ！」だと思った

35

Dog Fooding!


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

http://signalvnoise.com/posts/3697-server-generated-javascript-responses

メンバーにこだわる！


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を使って開発したいエンジニア大募集！ https://www.wantedly.com/projects/10789

• noteのiOS/Androidアプリをつくりたいエンジニア大募集！https://www.wantedly.com/projects/10784

45

ピースオブケイクではエンジニアを募集しています！

https://www.wantedly.com/projects/10771



Thank you for listening!

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

Engineering