-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy pathindex-ja.html
230 lines (219 loc) · 15.4 KB
/
index-ja.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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!doctype html>
<html class="no-js" lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Cattaz - Markdownとアプリのコラボレーションツール</title>
<meta name="description" content="Markdownとアプリによる自由闊達なコラボレーションツール">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="landingpage-assets/img/cattaz-icon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="landingpage-assets/css/main.css">
</head>
<body id="top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#top" data-ga-on="click" data-ga-event-category="nav" data-ga-event-action="navbar" data-ga-event-label="top">Cattaz</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-md-auto">
<li class="nav-item">
<a class="nav-link" href="#features" data-ga-on="click" data-ga-event-category="nav" data-ga-event-action="navbar" data-ga-event-label="features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#usecase" data-ga-on="click" data-ga-event-category="nav" data-ga-event-action="navbar" data-ga-event-label="usecase">Use Case</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mind" data-ga-on="click" data-ga-event-category="nav" data-ga-event-action="navbar" data-ga-event-label="mind">Mind</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html" data-ga-on="click" data-ga-event-category="nav" data-ga-event-action="navbar" data-ga-event-label="english">English</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/FujitsuLaboratories/cattaz" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="navbar" data-ga-event-label="github"><img src="landingpage-assets/img/github-mark-32.png" alt="GitHub" width="30"></a>
</li>
</ul>
</div>
</div>
</nav>
<main role="main">
<section class="jumbotron text-center" style="background-color: #faede5;">
<div class="container">
<h1 style="margin: 0 0 20px;"><img src="landingpage-assets/img/cattaz-logo.png" width="100%" alt="Cattaz"></h1>
<p class="lead" style="color: #666666;">Markdownとアプリによる自由闊達なコラボレーションツール</p>
<p>
<a href="https://github.com/FujitsuLaboratories/cattaz" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="intro" data-ga-event-label="github"><img src="landingpage-assets/img/github-btn.png" alt="GitHub" width="150" style="margin: 7px;"></a>
<a href="http://cattaz.io/build/" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="intro" data-ga-event-label="demo"><img src="landingpage-assets/img/demo-btn.png" alt="DEMO" width="150" style="margin: 7px;"></a>
</p>
</div>
</section>
<!-- START the Summary -->
<section class="text-center" style="background-color: #FFFFFF; padding-top: 3rem; padding-bottom: 3rem;">
<div class="container">
<h2>Cattazとは</h2>
<p class="lead maintext-color">
チームの活動の全てを自由に、1つにします。<br>
チームの「働き方」、「コミュニケーション」、「モチベーション」を変えます。<br>
チームの活動状況に合わせたアプリケーションをMarkdownから起動でき、自由闊達に知識を整理・蓄積・共有できる、Wikiを進化させたコラボレーションツールです。</p>
<img src="landingpage-assets/img/cattaz-concept.png" width="100%" alt="Cattaz Concept" style="max-width: 600px; margin-top: 20px;">
</div>
</section>
<!-- END the Summary -->
<!-- START the Video -->
<section class="text-center" style="background-color: #b2d6d4; padding-top: 3rem; padding-bottom: 3rem;">
<div class="container" style="max-width: 800px;">
<div style="position: relative; width: 100%; padding-top: 56.25%;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/vmm9y5bRehQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</section>
<!-- END the Video -->
<!-- START the Features -->
<section id="features" class="text-center" style="background-color: #FFFFFF; padding-top: 3rem; padding-bottom: 3rem;">
<div class="container">
<h2>Features</h2>
<div class="row align-items-center" style="padding-top: 3rem;">
<div class="col-md-7">
<h3>Markdown編集</h3>
<p class="text-left maintext-color">
Markdown（マークダウン）の標準化拡張のCommonMarkで記述できます。<br>
Markdownによって、文章を見やすい整形された状態に保てます。<br>
Cattazと他のMarkdownエディタの間で、変換処理を必要とせず、テキストをそのままの形でコピー&ペーストできます。<br>
編集中のテキストをリアルタイムにプレビュー画面で確認できます。<br>
<a href="http://cattaz.io/build/#/page/sandbox" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="features" data-ga-event-label="sandbox">Sandboxページ</a>で試してみてください。
</p>
</div>
<div class="col-md-5">
<img class="img-fluid mx-auto features-shadow" src="landingpage-assets/img/markdown.png" alt="Markdown">
</div>
</div>
<hr class="features-divider">
<div class="row align-items-center">
<div class="col-md-7 order-md-2">
<h3>アプリが動く</h3>
<p class="text-left maintext-color">
Fenced code block（バッククォート3つで始まるブロック）にアプリ名を指定することで、プレビュー画面上でアプリを起動できます。<br>
Markdownでは難しい情報の入力をアプリのUIから簡単に入力できます。<br>
また、アプリのUIによって、情報を見やすい形で表示できます。<br>
1つのページに複数のアプリを配置でき、アプリで入力された情報は即座にエディタに反映され、1つのページとして保存できます。<br>
Cattaz内の1つのページで完結するため、円滑にチームは共創活動を行えます。
</p>
</div>
<div class="col-md-5 order-md-1">
<img class="img-fluid mx-auto features-shadow" src="landingpage-assets/img/app-work.png" alt="APP Work">
</div>
</div>
<hr class="features-divider">
<div class="row align-items-center">
<div class="col-md-7">
<h3>アプリを簡単に作って導入</h3>
<p class="text-left maintext-color">
エンジニアはプレビュー画面上で動くアプリをWebアプリを作る要領で開発、導入できます。<br>
アプリはJavaScriptとReactライブラリを使用して記述します。<br>
指定されたpropsを処理することで、同期機能が付加されたアプリを実現できます。<br>
アプリを作成するには、<a href="http://cattaz.io/build/#/doc/ja/app-hello" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="features" data-ga-event-label="app-hello">Hello world</a>を参照してください。
</p>
</div>
<div class="col-md-5">
<img class="img-fluid mx-auto" src="landingpage-assets/img/app-development.png" alt="APP Development">
</div>
</div>
<hr class="features-divider">
<div class="row align-items-center">
<div class="col-md-7 order-md-2">
<h3>リアルタイム同時編集</h3>
<p class="text-left maintext-color">
Markdownのテキストやアプリは、複数人でリアルタイムに同時に共同編集できるため、効率良く情報を共有・共創できます。
遠隔会議など遠隔地にいる方とコラボレーションするときにも、力を発揮します。
</p>
</div>
<div class="col-md-5 order-md-1">
<img class="img-fluid mx-auto" src="landingpage-assets/img/real-time-collaboration.png" alt="Real-time Cllaboration">
</div>
</div>
</div>
</section>
<!-- END the Features -->
<!-- START the Use Case -->
<section id="usecase" class="text-center text-white" style="background-color: #6490cd; padding-top: 3rem; padding-bottom: 3rem;">
<div class="container">
<h2>Use Case</h2>
<div class="row" style="padding-top: 3rem;">
<div class="col-lg-4">
<img class="rounded-circle usecase-circle" src="landingpage-assets/img/meeting.png" alt="Meeting" width="140" height="140">
<h3>ミーティング</h3>
<p class="text-left">
会議や打ち合わせでの議事録作成に利用できます。<br>
遠隔会議でのコミュニケーションを円滑にします。<br>
テレワークの手助けをし、働き方改革を促進します。
</p>
</div>
<div class="col-lg-4">
<img class="rounded-circle usecase-circle" src="landingpage-assets/img/agile.png" alt="Agile" width="140" height="140">
<h3>アジャイル開発</h3>
<p class="text-left">
かんばんアプリやKPTアプリなどを利用することで、スプリントの計画や振り返りを1枚のページにまとめられます。<br>
チームの活動を見える化し、アジャイル開発の高速化に役立ちます。
</p>
</div>
<div class="col-lg-4">
<img class="rounded-circle usecase-circle" src="landingpage-assets/img/events.png" alt="Events" width="140" height="140">
<h3>イベント</h3>
<p class="text-left">
アイデアソンやハッカソンなどのイベントのワークを全てCattazだけで運用でき、生まれた知識をそのままCattazのページに記憶できます。<br>
共同編集によって、みんなでワイワイ楽しく共創を行え、価値あるモノを生み出す手助けをします。
</p>
</div>
</div>
</div>
</section>
<!-- END the Use Case -->
<!-- START the Mind -->
<section id="mind" class="text-center text-white" style="background-color: #bf545e; padding-top: 3rem; padding-bottom: 3rem;">
<div class="container">
<h2>Mind</h2>
<p class="text-left">
最初は、エンジニアがイキイキ楽しく自由闊達に活動できるようになるためのプラットフォームは何なのかと考えました。<br>
多くのツール、色々な仕事の仕方が誕生し、ツールを使いこなすのも情報共有の仕方も複雑化しています。<br>
それにより、自由になる環境が増えつつある一方、混乱しやすくもなっています。<br>
そこで、自由でありながらも、全てを1つに共有でき、最大限にエンジニアの能力を引き出し、エンジニアが楽しく活動できるようにと「Cattaz」を開発しました。<br>
また、エンジニアに限らず、様々な職種の方々、様々な文化を持つ方々にとって、Cattazが自由闊達な場となることを目指します。<br>
今回、「Cattaz」をOSS（オープンソースソフトウェア）として公開しました。<br>
興味がある方は、自由闊達な場を一緒に創造しましょう。
</p>
</div>
</section>
<!-- END the Mind -->
</main>
<footer class="text-muted" style="background-color: #F2F2F2;">
<div class="container">
<p class="float-right">
<a class="none-a" href="#top" data-ga-on="click" data-ga-event-category="nav" data-ga-event-action="footer" data-ga-event-label="top">Back to top</a>
</p>
<p>© 2017 Fujitsu Laboratories LTD.
· <a href="https://github.com/FujitsuLaboratories/cattaz" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="footer" data-ga-event-label="github">GitHub</a>
· <a href="http://cattaz.io/build/#/doc/ja/index" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="footer" data-ga-event-label="document">Document</a>
· <a href="http://cattaz.io/build/" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="footer" data-ga-event-label="demo">Demo</a>
</p>
</div>
</footer>
<script src="landingpage-assets/js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="landingpage-assets/js/plugins.js"></script>
<script src="landingpage-assets/js/main.js"></script>
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-109517479-2','auto');
ga('require', 'eventTracker', { attributePrefix: 'data-ga-' });
ga('require', 'outboundLinkTracker');
ga('require', 'pageVisibilityTracker', { sendInitialPageview: true });
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
<script async src='https://cdnjs.cloudflare.com/ajax/libs/autotrack/2.4.1/autotrack.js'></script>
</body>
</html>