-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (131 loc) · 6.72 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/*! sanitize.css v4.1.0 | CC0 License | github.com/jonathantneal/sanitize.css */progress,sub,sup{vertical-align:baseline}button,hr,input{overflow:visible}[type=checkbox],[type=radio],legend{padding:0}[aria-disabled],html{cursor:default}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}*,::after,::before{background-repeat:no-repeat;box-sizing:inherit}::after,::before{text-decoration:inherit;vertical-align:inherit}html{box-sizing:border-box;font-family:sans-serif;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}small,sub,sup{font-size:83.3333%}hr{height:0}nav ol,nav ul{list-style:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}img{border-style:none}svg{fill:currentColor}svg:not(:root){overflow:hidden}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{outline-width:0}table{border-collapse:collapse;border-spacing:0}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit;font-size:1em;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{display:table;max-width:100%;white-space:normal}textarea{overflow:auto;resize:vertical}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-cancel-button,::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[tabindex],a,area,button,input,label,select,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden][aria-hidden=false]{clip:rect(0,0,0,0);display:inherit;position:absolute}[hidden][aria-hidden=false]:focus{clip:auto}
</style>
<style>
body{padding:15px;color:#333;word-break:break-all}
.wrap{border-top:2px solid #666;border-left:2px solid #666}
.row{display:flex;align-items:stretch}
.row:first-child > div{width:20%}
.row:last-child > div{width:50%}
.col{display:flex;flex-direction:column}
.col > div{height:50%}
.content{padding:10px;border-right:2px solid #666;border-bottom:2px solid #666}
</style>
<style>
body{font-family:"Avenir Next",Verdana,"Hiragino Kaku Gothic Pro","Yu Gothic",Meiryo,Osaka,sans-serif;font-size:14px}
h1{font-size:16px;margin-top:0;margin-bottom:10px;word-break:normal}
h2,h3,h4,h5,h6{font-size:14px;margin-top:0;margin-bottom:10px;word-break:normal}
ol,ul{line-height:1.75;margin-top:0;margin-bottom:10px;padding-left:20px}
ol > li{list-style-type:decimal}
li > ol,li > ul{margin-bottom:0;margin-top:0}
li:not(:last-child){margin-bottom:5px}
dl{line-height:1.75;margin-bottom:10px}
dt,dd:not(:last-child){margin-bottom:5px}
hr{margin:10px 0;border:0;height:2px;background-color:#ccc}
table{display:block;margin:10px 0;border-left:solid 1px #ddd}
td,th{border-bottom:solid 1px #ccc;border-right:solid 1px #ccc;padding:8px 10px}
thead td,th{font-weight:700;background-color:#fff;border-top:solid 1px #ddd}
tbody tr:nth-child(odd){background-color:rgba(0,0,0,0.03)}
blockquote{color:#666;margin-left:10px;border-left:solid 4px #ddd;padding-left:10px;margin-top:10px;margin-bottom:10px}
img{vertical-align:middle;margin:10px 0;max-width:100%}
code{border-radius:3px;background-color:#f7f7f7;line-height:1.5;color:#555;font-size:.95em}
pre{border-radius:3px;border:0;margin:10px 0;line-height:1.5;background-color:#f7f7f7;overflow-x:auto;word-wrap:normal;white-space:pre;font-size:13px;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;padding:10px}
</style>
</head>
<body>
<div class="wrap">
<div class="row">
<div class="content">
<h1>PROBLEM</h1>
<ul>
<li>これを読めばいいというJavaScriptの入門書がない</li>
<li>ES2015+の学び方が分からない</li>
<li>JavaScriptの流れが早すぎて、どれから学べばいいのか道筋が見えない</li>
</ul>
<h2>EXISTING ALTERNATIVES</h2>
<ul>
<li>MDN</li>
<li>本 <a href="https://gist.github.com/azu/027859e08e284cb8dfe7">https://gist.github.com/azu/027859e08e284cb8dfe7</a></li>
<li>ドットインストール</li>
</ul>
</div>
<div class="col">
<div class="content">
<h1>SOLUTION</h1>
<ul>
<li>一通りのJavaScriptが分かる文章とコード</li>
<li>ES2015+を基本として考えた使い方の解説</li>
<li>変化し続ける言語の基盤となる基礎を学べる仕組み</li>
</ul>
</div>
<div class="content">
<h1>KEY METRICS</h1>
<ul>
<li>販売部数</li>
<li>GItHub Star</li>
<li>はてなブックマーク</li>
<li>PV</li>
</ul>
</div>
</div>
<div class="content">
<h1>UNIQUE VALUE PROPOSITION</h1>
<ul>
<li>本で読めてウェブでも無料で読める</li>
<li>悪いものを避けるべきこととして学べる</li>
</ul>
<h2>HIGH-LEVEL CONCEPT</h2>
<ul>
<li>ES2015+ Good Parts</li>
</ul>
</div>
<div class="col">
<div class="content">
<h1>UNFAIR ADVANTAGE</h1>
<ul>
<li>仕様に詳しい人が見てる</li>
</ul>
</div>
<div class="content">
<h1>CHANNELS</h1>
<ul>
<li>Mail</li>
<li>Blog</li>
<li>GitHub Watch</li>
<li>Book Store</li>
</ul>
</div>
</div>
<div class="content">
<h1>CUSTOMER SEGMENTS</h1>
<ul>
<li>他言語がメインのプログラマ</li>
<li>新入社員</li>
</ul>
<h2>EARLY ADOPTERS</h2>
<ul>
<li>既にJavaScriptを知っているが、ES2015+については何となくしか知らない人</li>
</ul>
</div>
</div>
<div class="row">
<div class="content">
<h1>COST STRUCTURE</h1>
<ul>
<li>書く時間</li>
</ul>
</div>
<div class="content">
<h1>REVENUE STREAMS</h1>
<ul>
<li>物理/電子書籍の販売 部数×値段</li>
</ul>
</div>
</div>
</div>
</body>
</html>