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