20141112 tech valley #3 note - スタートアップでこだわったこと - takamaru
DESCRIPTION
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaruTRANSCRIPT
![Page 1: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/1.jpg)
note スタートアップだからこだわったこと
Shoei Takamaru (@takamario)
![Page 2: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/2.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Agenda• 自己紹介・サービス紹介
• スタートアップだからこだわったこと
• 最新技術を!
• グローバルに!
• イケてる!
• etc…
• まとめ2
![Page 3: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/3.jpg)
自己紹介
![Page 4: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/4.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Who are you?
• 高丸 翔英 (たかまる しょうえい, @takamario)!
• エンジニア (フロントエンド寄り?)!
• 2008年4月 楽天 入社!
• 2014年1月 ピースオブケイク 入社!
• 趣味は、ジョギング・バンド活動・写真・料理・酒
4
![Page 5: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/5.jpg)
サービス紹介
![Page 6: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/6.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Our Services
• デジタルコンテンツ配信プラットフォームCakes (ケイクス) 2012年9月リリースhttps://cakes.mu/!
• クリエイターと読者をつなげるサイト!
• 週額150円 / 月額500円で全記事読み放題!
• サブカルな記事が多いです(腐女子とか、恋愛工学とか、レズとか)
6
![Page 7: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/7.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Our Services• note (ノート) 2014年4月リリース
https://note.mu/!
• 個人でコンテンツが100円から販売できる プラットフォーム
7
![Page 8: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/8.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Got a lot of feedback
8
• リリース1ヶ月で2,000万PV、100万UU 達成
![Page 9: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/9.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Got a lot of feedback
• 芸能人アカウントも続々
9
伊集院光さん
ロンブー田村淳さんくるりさん
GLAY HISASHIさん
![Page 10: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/10.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Quruli
• くるり公式ファンクラブ純情息子がnoteに移行
• 会報、オフショット、未公開音源、チケット先行予約案内など、すべてがnote上で!
10
![Page 11: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/11.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Great Hits• 山本さほさんのマンガ 岡崎に捧ぐがヒット! https://note.mu/sahoobb/m/m6d7f0f032e74
• 深爪さんの、性の話から ドラマの感想まで書かれた コラムがヒット!https://note.mu/fukazume_taro
• 今後は一般の方の作品が 爆発的に売れる可能性も!
11
![Page 12: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/12.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Recent Releases
• 2014年10月 iPhone/Androidアプリリリース
• PC版だけだったテキスト編集、そして、ボイスレコーダー代わりにサウンドノート録音が可能に
• プッシュ通知で新しいコンテンツの更新を見逃しません!
12
![Page 13: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/13.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Recent Releases
• クリエイターサポート機能"
• いわゆる投げ銭です
• Crowd Funding 的な使い方もできる
13
![Page 14: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/14.jpg)
スタートアップだからこだわったこと
![Page 15: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/15.jpg)
最新技術を!
![Page 16: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/16.jpg)
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)
![Page 17: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/17.jpg)
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
![Page 18: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/18.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Angular’s Pros
• HTMLにコード書くのはラク
• 2 way-binding 激ラク データ更新を反映させるためのコード書かなくても、勝手に表示値が変わってくれる
18
「使ってみたかったかった」が一番の理由。不安はあったが。。!
デザイナーがHTML(haml)を作成/修正
エンジニアがng-xxxxを付ける/移動する
スピーディーな開発
![Page 19: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/19.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
How about SEO?
• たいていのボットは、JSでレンダリングされてものは 読み取れない
• 対応しなければいけないのは、Google と Yahoo! と Bing と。。?
• Facebook?
• はてな?Pocket?Google+?19
SEO対策は?
![Page 20: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/20.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
OGP
• 初期には、Phantom JS で Angular をレンダリングする荒技を検討
• が、OGP bot ごとに対応が必要
• 2段階で来るbotも。。
• サーバサイドで返すように修正しました (Googlebot以外)
20
Phantom JS (w/ cache)
![Page 21: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/21.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
What's “note”?
• 「note」で検索(2014年11月7日時点)
21
2位(良い◎)
![Page 22: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/22.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
What's “ノート”?
• 「ノート」で検索(2014年11月7日時点)
22
![Page 23: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/23.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
What's “ノート”?
23
6位(そんなに悪くない)
• 「ノート」で検索(2014年11月7日時点)
![Page 24: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/24.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Note is …
• noteとは
24
![Page 25: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/25.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Spam…
• スパム投稿が増えた。。対策に追われた。。
• スパムが来る=注目されているとポジティブに考えた
25
![Page 26: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/26.jpg)
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
![Page 27: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/27.jpg)
グローバルに!
![Page 28: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/28.jpg)
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
![Page 29: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/29.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Discuss Globally!
29
ChatWork GitHub
![Page 30: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/30.jpg)
イケてる雰囲気を!
![Page 31: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/31.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Looks so cool!
31
• 元々は、ファンクラブに 近いUIだった
• クリエイターまたは有名人がファンと深い交流を行うSNS
![Page 32: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/32.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Looks so cool!
• ピボット。何でもできて面白い雰囲気を!
• うちのデザイン部長がズバッと作った!
32
![Page 33: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/33.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Looks so cool!
33
• MediumライクなWYSIWYGエディタ(contenteditable)
• 生JSでDOMいじりばっかりバグ多い、ソースはカオス
• 今はこういうライブラリも。。https://github.com/daviferreira/medium-editor
![Page 34: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/34.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
IE makes happy?
34
IEを斬る!!
![Page 35: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/35.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
iOS 8 Support
• アプリリリース間近のタイミングで、iOS 8 がリリースされる。。
• 幸い修正範囲は少なかったが、審査に時間がかかった。。
• やはり、対応して出したほうが「おおっ!」だと思った
35
![Page 36: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/36.jpg)
Dog Fooding!
![Page 37: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/37.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Use note for our Daily Report
• noteを使って日報を書く
• 使いにくいところを自分たちで見つける
37
![Page 38: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/38.jpg)
技術を追い求めること
![Page 39: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/39.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
Someone said…
• 1年に1つのプログラミング言語は覚えるべき(LotY)from The Pragmatic Programmer
• 1つの言語を使い続けるより、その場に合わせた言語選択ができるように
39
![Page 40: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/40.jpg)
Copyright © Piece of Cake, Inc. All Rights Reserved.
New Tech is similar to Start Up
• 最新技術はスタートアップに似ている
• バグも多いが、改善されていく(成長)のが楽しい
• 誰かに任せるのではなく、自分たちで考え検証して、結果を出す
40
![Page 41: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/41.jpg)
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
![Page 42: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/42.jpg)
メンバーにこだわる!
![Page 43: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/43.jpg)
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
愉快なサブカル野郎たち
![Page 44: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/44.jpg)
ぜんぜ足りてまへん!
![Page 45: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/45.jpg)
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
ピースオブケイクではエンジニアを募集しています!
![Page 46: 20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru](https://reader035.vdocuments.mx/reader035/viewer/2022081404/559440261a28abe35b8b4820/html5/thumbnails/46.jpg)
Thank you for listening!