-
Notifications
You must be signed in to change notification settings - Fork 165
/
index.js
255 lines (251 loc) · 11.8 KB
/
index.js
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
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
import Head from "katatema/head";
import React from "react";
import Style from "../stylesheets/main.scss";
class QuestionCard extends React.Component {
constructor(...args) {
super(...args);
this.state = { hidden: true };
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
if (!window.getSelection || window.getSelection().isCollapsed) {
this.setState({ hidden: !this.state.hidden });
}
}
render() {
return(
<div className="card card-clickable" onClick={this.handleClick}>
<div className="card-body">
Q. {this.props.question}
</div>
<div className={`card-body${this.state.hidden ? " hidden" : ""}`}>
A. {this.props.children}
</div>
</div>
);
}
}
export default class Index extends React.Component {
render() {
return(
<div>
<Head>
<meta charSet="utf-8"/>
<title>Yattecast - Podcastサイトをつくるためのテンプレート</title>
<meta name="viewport" content="width=device-width"/>
<meta name="description" content="Podcastサイトをつくるためのテンプレート"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:description" content="Podcastサイトをつくるためのテンプレート"/>
<meta name="twitter:title" content="Yattecast"/>
<meta property="og:description" content="Podcastサイトをつくるためのテンプレート"/>
<meta property="og:site_name" content="Yattecast"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://r7kamura.github.io/yattecast/"/>
</Head>
<Style/>
<main className="main">
<section className="main-section">
<div className="container">
<h1 className="hero-heading">
Yattecast
</h1>
<p className="hero-description">
Podcastサイトをつくるためのテンプレート
</p>
<h2 className="hero-sub-heading">
簡単・便利・最高
</h2>
<p className="hero-description">
サイトを公開するには、録音した音源と説明文をGitHubに置くだけ。<br className="hidden-extra-small"/>
再生用のプレーヤーやiTunes用のRSSフィードなども自動で用意されます。
</p>
<div className="hero-button-wrapper">
<a href="https://github.com/r7kamura/yattecast" className="button button-default">
GitHubでforkして使う
</a>
</div>
</div>
</section>
<section className="main-section">
<div className="container">
<img src="https://cloud.githubusercontent.com/assets/111689/20457744/38c370fe-aed5-11e6-8344-751294065161.png" alt="demo" className="demo-image"/>
<p>
デモサイト:
<a href="https://yatteiki.fm" target="_blank">yatteiki.fm</a>
</p>
</div>
</section>
<section className="main-section">
<div className="container">
<h1 className="main-section-heading">
Podcastに役立つ機能
</h1>
<div className="row">
<div className="column-small-4 feature">
<div className="feature-image" style={{ backgroundImage: "url(https://cloud.githubusercontent.com/assets/111689/20546957/18104ec0-b15c-11e6-9ca5-929b61388a09.png)" }}/>
<h3 className="feature-heading">
シンプルなデザイン
</h3>
<p className="feature-description">
Podcastの主役はあくまで音声。コンテンツを際立たせるためにシンプルなデザインを採用しています。
</p>
</div>
<div className="column-small-4 feature">
<div className="feature-image" style={{ backgroundImage: "url(https://cloud.githubusercontent.com/assets/111689/20546239/4de09e4c-b157-11e6-8db1-2d5fb4adc6b2.png)" }}/>
<h3 className="feature-heading">
RSSフィード
</h3>
<p className="feature-description">
用意されたデータを元に、iTunesで配信するために必要なRSSフィードを自動で生成します。
</p>
</div>
<div className="column-small-4 feature">
<div className="feature-image" style={{ backgroundImage: "url(https://cloud.githubusercontent.com/assets/111689/20546962/30ff8d1a-b15c-11e6-9211-9a941ac14169.png)" }}/>
<h3 className="feature-heading">
細かい配慮
</h3>
<p className="feature-description">
倍速再生対応のプレーヤーやTwitterボタンなど、Podcastに便利な機能を予め用意しています。
</p>
</div>
</div>
</div>
</section>
<section className="main-section main-section-gray-background">
<div className="container">
<h1 className="main-section-heading">
使い方
</h1>
<div className="card">
<div className="card-header">
<h2 className="card-heading">
1. リポジトリをfork
</h2>
</div>
<div className="card-body">
<a href="https://github.com/r7kamura/yattecast">r7kamura/yattecast</a> をforkし、適当な名前に変更します。<br className="hidden-extra-small"/>
orgname.github.io のようなパターンの名前にするのがおすすめです。
</div>
</div>
<div className="card">
<div className="card-header">
<h2 className="card-heading">
2. 設定を変更
</h2>
</div>
<div className="card-body">
_config.yml のサイト名や説明文などを書き換えます。
</div>
</div>
<div className="card">
<div className="card-header">
<h2 className="card-heading">
3. 音源を配置
</h2>
</div>
<div className="card-body">
audioディレクトリにmp3ファイルを配置します。<br className="hidden-extra-small"/>
サンプルとして最初から空のmp3ファイルが置かれています。
</div>
</div>
<div className="card">
<div className="card-header">
<h2 className="card-heading">
4. 記事を配置
</h2>
</div>
<div className="card-body">
_postsディレクトリに記事を配置します。<br className="hidden-extra-small"/>
サンプルの記事ファイルが置かれているので上書きしましょう。
</div>
</div>
<div className="card">
<div className="card-header">
<h2 className="card-heading">
5. 変更をpush
</h2>
</div>
<div className="card-body">
以上で変更は完了です。<br className="hidden-extra-small"/>
git pushしてサイトを公開・更新しましょう。
</div>
</div>
</div>
</section>
<section className="main-section">
<div className="container">
<h1 className="main-section-heading">
よくある質問
</h1>
<QuestionCard question="mp3ファイルに容量制限はありますか？">
GitHub Pagesでは1ファイルあたり100MB以下の容量のファイルをホスティングできます。
</QuestionCard>
<QuestionCard question="どのブランチにPushすればGitHub Pagesに公開できますか？">
orgname.github.io というパターンのリポジトリではmaster、それ以外ではgh-pagesが利用できます。
</QuestionCard>
<QuestionCard question="手元でサイトをプレビューするにはどうすれば良いですか？">
Rubyが動く環境を用意できる場合、bundle exec jekyll serve というコマンドでプレビュー用のサーバを起動できます。
</QuestionCard>
<QuestionCard question="iTunes StoreでPodcastを配信するにはどうすれば良いですか？">
iTunes Store > Podcast > Podcastを送信する より RSSフィードのURL (サイトURLの末尾に /feed.xml を付けると得られます) を登録してください。
</QuestionCard>
<QuestionCard question="無料で利用できますか？">
はい、商用利用の有無を問わず無料でご利用いただけます。<br className="hidden-extra-small"/>
<a href="https://www.amazon.co.jp/gp/registry/wishlist/31WJYTS73D19K" target="_blank">ほしいものリスト</a> から何か寄付していただけると製作者が喜びます。
</QuestionCard>
</div>
</section>
<section className="main-section main-section-image-background" style={{ backgroundImage: "url(https://yatteiki.fm/images/header.jpg)" }}>
<div className="main-section-overlay">
<div className="container">
<h2>
Podcastをはじめよう
</h2>
<p>
会話を録音して、Yattecastで公開しよう
</p>
<div className="hero-button-wrapper">
<a href="https://github.com/r7kamura/yattecast" className="button button-border">
GitHubでforkして使う
</a>
</div>
</div>
</div>
</section>
</main>
<footer className="footer">
<div className="container">
<table className="footer-table">
<tbody>
<tr>
<td>製作</td>
<td><a href="https://github.com/r7kamura" target="_blank">r7kamura</a></td>
</tr>
<tr>
<td>画像提供</td>
<td><a href="https://github.com/kkosuge" target="_blank">kkosuge</a></td>
</tr>
<tr>
<td>デモ提供</td>
<td><a href="https://yatteiki.fm" target="_blank">yatteiki.fm</a></td>
</tr>
<tr>
<td>ソースコード</td>
<td><a href="https://github.com/r7kamura/yattecast" target="_blank">yattecast</a></td>
</tr>
<tr>
<td>サイト生成</td>
<td><a href="https://github.com/r7kamura/katatema" target="_blank">katatema</a></td>
</tr>
<tr>
<td>ライセンス</td>
<td><a href="https://opensource.org/licenses/MIT" target="_blank">MIT</a></td>
</tr>
</tbody>
</table>
</div>
</footer>
</div>
);
}
};