Skip to content

Commit b931e10

Browse files
kp54kp54
authored
Merge pull request #8 from coderdojo-japan/add-contest-info
DCJ2025-141 [サイト入稿] コンテスト募集要項・応募規約の修正と応募方法ページの追加
2 parents 726584e + 6dc2230 commit b931e10

17 files changed

+371
-20
lines changed

‎common.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,8 @@ h3 {
4747
margin: 15px 0;
4848
border-radius: 5px;
4949
}
50+
51+
.link-chevron::before {
52+
content: '»';
53+
padding: 0 0.25em;
54+
}

‎contests/how-to-apply.html‎

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,289 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>DojoCon Japan 2025 プログラミングコンテスト コンテスト応募方法 - DojoCon Japan 2025</title>
8+
<meta name="description" content="DojoCon Japan とは、日本の CoderDojo コミュニティメンバーが全国から集まる年に１度のカンファレンスです。">
9+
<meta property="og:type" content="website" />
10+
<meta property="og:image" content="https://dojocon2025.coderdojo.jp/img/cover.jpg">
11+
<meta name="twitter:card" content="summary_large_image" />
12+
13+
<!-- Settings for web browsers (as minimum as possible) -->
14+
<link rel='canonical' href='https://dojocon2025.coderdojo.jp/contests/terms/' />
15+
<link rel='shortlink' href='https://dojocon2025.coderdojo.jp/contests/terms/' />
16+
<link rel="manifest" href="/site.webmanifest">
17+
<link rel="icon" href="/img/favicon.ico"> <!-- 32×32 -->
18+
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png"> <!-- 180×180 -->
19+
20+
<style>
21+
@import url("../../common.css");
22+
23+
img {
24+
margin: 5px;
25+
max-width: calc(100% - 10px);
26+
}
27+
28+
a {
29+
color: #27B;
30+
text-decoration: none;
31+
}
32+
33+
.bordered {
34+
border: 1px solid #ddd;
35+
}
36+
37+
.step {
38+
background: #f4f4f4;
39+
padding: 15px;
40+
border-radius: 5px;
41+
margin-bottom: 20px;
42+
}
43+
44+
.flow-image {
45+
display: block;
46+
width: 100%;
47+
max-width: 600px;
48+
margin: 40px auto;
49+
}
50+
51+
.required-mark {
52+
color: #e00;
53+
font-weight: bold;
54+
margin-left: 5px;
55+
}
56+
57+
.red-text {
58+
color: #e00;
59+
font-weight: bold;
60+
}
61+
62+
.p0-b0 {
63+
padding: 0;
64+
border: 0;
65+
}
66+
67+
table {
68+
width: 100%;
69+
border-collapse: collapse;
70+
margin-top: 20px;
71+
}
72+
73+
th,
74+
td {
75+
border: 1px solid #ddd;
76+
padding: 12px;
77+
text-align: left;
78+
}
79+
80+
th {
81+
background-color: #e9f5ff;
82+
font-weight: bold;
83+
width: 30%;
84+
}
85+
86+
ul {
87+
padding-left: 20px;
88+
}
89+
90+
li {
91+
margin-bottom: 10px;
92+
}
93+
</style>
94+
</head>
95+
96+
<body>
97+
<a href="/contests/index.html" class="link-chevron">コンテスト応募要項に戻る</a>
98+
<h1>コンテスト応募方法</h1>
99+
100+
<div class="step">
101+
<p>コンテスト応募は以下のステップで行います。</p>
102+
<ol>
103+
<li>ProtoPediaのアカウントを作成</li>
104+
<li>ProtoPediaに作品情報を登録</li>
105+
<li>応募フォームに登録</li>
106+
</ol>
107+
</div>
108+
<p style="margin: 0;">
109+
ProtoPediaとはITものづくりに関する作品を記録・公開できるWEBサービスです。<br>
110+
DojoConプログラミングコンテスト応募作品以外にも沢山のものづくり作品が掲載されています。<br>
111+
プログラミングコンテスト以外の作品もここに登録することで沢山の人に見てもらうことができます。
112+
</p>
113+
<a href="https://protopedia.net/" target="_blank">
114+
<img src="/img/protopedia-logotype.png" alt="ProtoPedia Logotype" class="flow-image"
115+
style="width: 200px;">
116+
</a>
117+
118+
<p>
119+
以下にそれぞれのやり方を記載します。<br>
120+
わからないところはCoderDojoのメンターさんに聞いてみてくださいね！<br>
121+
DojoConのお問い合わせフォームから問い合わせても大丈夫です。
122+
</p>
123+
124+
<h2>１．ProtoPediaのアカウントを作成</h2>
125+
<p>まずProtoPediaのアカウントを作成する必要があります。（すでにアカウントがある人は作成する必要はありません。）</p>
126+
<div class="note">
127+
<p style="margin: 0;">未成年者のProtoPediaへのアカウント登録は<span class="red-text">保護者の方の同意が必要</span>となります。必ず許可をもらいましょう。</p>
128+
</div>
129+
130+
<h3>① ProtoPediaサイトへアクセスし、右上の「新規登録」ボタンをクリック</h3>
131+
<img src="/img/contests/how-to-apply/step-1-1.png" alt="ProtoPediaの新規登録ボタン" class="flow-image">
132+
133+
<h3>② メールアドレス・パスワードを入力して「新規登録する」（Google, X, Facebookでも登録可能です）</h3>
134+
<img src="/img/contests/how-to-apply/step-1-2.png" alt="新規登録フォーム" class="flow-image">
135+
136+
<h3>③ メールアドレスに確認用のメールが届くのでメールに記載されたURLをクリックして登録ページを開く</h3>
137+
<img src="/img/contests/how-to-apply/step-1-3.png" alt="ユーザー登録" class="flow-image">
138+
<p>「表示名」は本名でもニックネームでも構いません。表示名・ユーザーIDはWeb上で公開されることになります。</p>
139+
<h3>④「サービスを開始する」クリック</h3>
140+
141+
<h2>2．ProtoPediaに作品情報を登録</h2>
142+
<p>1.の手順で作成したアカウントでログインした状態で、右上の「作品を投稿」ボタンをクリックします。</p>
143+
<img src="/img/contests/how-to-apply/step-2-1.png" alt="作品投稿フォーム1" class="flow-image">
144+
145+
<p><span class="required-mark">※</span>の項目はDojoConプログラミングコンテスト応募にあたって入力必須になります。</p>
146+
147+
<table>
148+
<tr>
149+
<th>① 作品ステータス<span class="required-mark">※</span></th>
150+
<td>「完成」で応募してください（完成していないときは「開発中」で保存していても大丈夫です）</td>
151+
</tr>
152+
<tr>
153+
<th>② 作品タイトル<span class="required-mark">※</span></th>
154+
<td>応募する作品のタイトルを入れましょう</td>
155+
</tr>
156+
<tr>
157+
<th>③ 作品のURL</th>
158+
<td>Scratchで公開されているものなど、Web上で見ることができる場合は入れておきましょう</td>
159+
</tr>
160+
<tr>
161+
<th>④ 概要<span class="required-mark">※</span></th>
162+
<td>作品の簡単な説明を入れてください</td>
163+
</tr>
164+
<tr>
165+
<td colspan="2" class="p0-b0">
166+
<img src="/img/contests/how-to-apply/step-2-2.png" alt="作品投稿フォーム2" class="flow-image">
167+
</td>
168+
</tr>
169+
<tr>
170+
<th>⑤ ライセンスの設定</th>
171+
<td>デフォルト（表示する）のままで構いません</td>
172+
</tr>
173+
<tr>
174+
<th>⑥ 画像<span class="required-mark">※</span></th>
175+
<td>作品の画像、プログラムの画像などアピールしたい画像を1～5枚登録してください</td>
176+
</tr>
177+
<tr>
178+
<th>⑦ 動画<span class="required-mark">※</span></th>
179+
<td>
180+
YouTubeに限定公開で動画をアップしてそのリンクを入れます<br>
181+
<span class="red-text">※動画は3分まで（3分を超える場合は3分までを審査対象とします）</span><br>
182+
プログラムが動いている動画やアピールしたいポイントなどの動画を入れましょう。少なくとも動きがわかれば大丈夫です！動画のクオリティは評価対象としませんので簡単なもので大丈夫です<br>
183+
YouTubeへのアップ方法がわからない場合はご相談ください
184+
</td>
185+
</tr>
186+
<tr>
187+
<td colspan="2" class="p0-b0">
188+
<img src="/img/contests/how-to-apply/step-2-3.png" alt="作品投稿フォーム3" class="flow-image">
189+
</td>
190+
</tr>
191+
<tr>
192+
<th>⑧ システム構成（図）</th>
193+
<td>作品がどのように構成されているか図にあらわせる場合は描いてアップロードしますが、空欄でも構いません</td>
194+
</tr>
195+
<tr>
196+
<th>⑨ システム構成（文）</th>
197+
<td>作品を構成する要素を書きますが、空欄でも構いません。テキスト入力でOKです</td>
198+
</tr>
199+
<tr>
200+
<td colspan="2" class="p0-b0">
201+
<img src="/img/contests/how-to-apply/step-2-4.png" alt="作品投稿フォーム4" class="flow-image">
202+
</td>
203+
</tr>
204+
<tr>
205+
<th>⑩ 開発素材<span class="required-mark">※</span></th>
206+
<td>
207+
使用したツールやAPIなどを書きます<br>
208+
例）Scratch, Viscuit, Unity, Python, Arduino など
209+
</td>
210+
</tr>
211+
<tr>
212+
<th>⑪ タグ<span class="required-mark">※</span></th>
213+
<td>
214+
使用したプログラミング言語や技術などを書きます<br>
215+
“Scratch”など「開発素材」か「タグ」か迷うようなものはどちらにも書いていてOKです<br>
216+
<span class="red-text">必ずここに”白帯コース” ”黒帯コースどちらかを書いてください（白帯コース：初級・中級者レベル、黒帯コース：上級者レベル）</span>
217+
<img class="bordered" src="/img/contests/how-to-apply/tag-description.png" alt="タグ設定の説明">
218+
↑入力後Enterを押してこのように表示されていれば入力OKです入力後Enterを押してこのように表示されていれば入力OKです
219+
</td>
220+
</tr>
221+
<tr>
222+
<th>⑫ ストーリー<span class="required-mark">※</span></th>
223+
<td>
224+
こだわりポイントやアピールポイント、難しかったところなどを書きます<br>
225+
また必ず<span class="red-text">コンテストテーマ「ひらめき」とどう結びついた（結びつく）のか</span>を書いてください
226+
</td>
227+
</tr>
228+
<tr>
229+
<th>⑬ スライドモード</th>
230+
<td>このチェックは何もしなくてよいです</td>
231+
</tr>
232+
<tr>
233+
<td colspan="2" class="p0-b0"><img src="/img/contests/how-to-apply/step-2-5.png" alt="作品投稿フォーム5"
234+
class="flow-image"></td>
235+
</tr>
236+
<tr>
237+
<th>⑭ メンバー登録</th>
238+
<td>
239+
チームの場合のみ必須<span class="required-mark">※</span><br>
240+
「チーム名を入力」の欄にチーム名を入れます<br>
241+
またもしもチームメンバーもProtoPediaのアカウントを持っている（作った）場合は「メンバーを追加する＋」をクリックしてそのメンバーのアカウントを追加します
242+
</td>
243+
</tr>
244+
<tr>
245+
<th>⑮ 関連リンク</th>
246+
<td>関連リンクがある場合は入力しますが、空欄でよいです</td>
247+
</tr>
248+
</table>
249+
<img src="/img/contests/how-to-apply/step-2-6.png" alt="関連リンク入力欄" class="flow-image">
250+
<p>
251+
入力後はこのページの一番上の「一般公開」と表示されているプルダウンの隣の「作品を登録」ボタンを押しましょう。<br>
252+
これで作品が登録され、ProtoPedia上で作品が公開されます。
253+
</p>
254+
<div class="info">
255+
<p style="margin: 0;">プルダウンを「下書き保存」にして「作品を登録」ボタンを押すと作品は公開されずに下書きとして保存することもできます。</p>
256+
</div>
257+
<img src="/img/contests/how-to-apply/step-2-7.png" alt="urlをコピー" class="flow-image">
258+
<p>作品が公開されたら、URLの部分をコピーしておきます。このURLは次の応募フォームの入力に使用します。</p>
259+
<h2>3．応募フォームに登録</h2>
260+
<p>
261+
下記URLの応募フォームにアクセスして、必要事項を入力します。<br>
262+
<a target="_blank" href="https://forms.gle/2WJ3S19kWuqijANVA">https://forms.gle/2WJ3S19kWuqijANVA</a>
263+
</p>
264+
265+
266+
<p>
267+
この中の「応募作品のURL（ ProtoPedia ）」の項目に、先ほどコピーしたURLを入れてください。<br>
268+
正常に応募が完了すると、入力したメールアドレスにGoogleフォームから入力した内容のメールが届きます。
269+
</p>
270+
271+
<p>
272+
１～３すべてのステップが完了すると、DojoCon2025プログラミングコンテスト作品ページ（下記）に応募作品として作品が反映されます。<br>
273+
<a target="_blank" href="https://protopedia.net/event/dojocon2025"
274+
target="_blank">https://protopedia.net/event/dojocon2025</a><br>
275+
※なお即時反映できない場合がありますので反映されない場合は１日程度待ってください。それでも反映されない場合はお手数ですがお問い合わせフォームよりお知らせください。
276+
</p>
277+
<div class="note">
278+
<p style="margin: 0;">
279+
応募フォームで応募後もProtoPediaを更新することができます。作品のバグを修正したり機能を加えるなどのブラッシュアップはいつでも可能となりますが、一次審査後に大きく作品内容を変更することは禁止とします。
280+
</p>
281+
</div>
282+
283+
<p>不明点があれば、お問い合わせフォーム（<a target="_blank"
284+
href="https://forms.gle/t9ctDcuZZ8cqqFtR">https://forms.gle/t9ctDcuZZ8cqqFtR</a>）にてお知らせください。</p>
285+
286+
<a href="/contests/index.html" class="link-chevron">コンテスト応募要項に戻る</a>
287+
</body>
288+
289+
</html>

0 commit comments

Comments
 (0)