Skip to content

Commit 9a4f1b8

Browse files
yasulabyasulab
committed
Convert HTML to ERB: Stretch3
1 parent cf9f092 commit 9a4f1b8

File tree

2 files changed

+145
-119
lines changed

2 files changed

+145
-119
lines changed

‎app/views/stretch3s/new.html.erb

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<% provide(:title, 'Stretch3 × AI 拡張ブロックの利用申請 (試験運用中)') %>
2+
<% provide(:desc, 'Stretch3 の AI 拡張ブロックが、全国の CoderDojo でご活用いただけるための利用申請フォームです。試験運用中で、いただいたフィードバックなどを踏まえて予告なく変更が行われる可能性があります。') %>
3+
<% provide(:url, '/stretch3') %>
4+
<% provide(:meta_image, '/img/stretch3_cover.png') %>
5+
6+
<style>
7+
.stretch3-notes {
8+
margin-top: 100px;
9+
font-size: 11.8px;
10+
line-height: 1.7em;
11+
color: #909090;
12+
}
13+
.stretch3-eyecatch {
14+
border-radius: 10px;
15+
object-fit: cover;
16+
}
17+
</style>
18+
19+
<div class="container">
20+
<section class="introduction" style="padding: 50px 0px;">
21+
<div class="text-center">
22+
<h1 style="line-height: 1.4em; margin-bottom: 50px;">
23+
Stretch3 × AI
24+
<br class="ignore-pc">
25+
利用申請フォーム
26+
<br>
27+
<small>(試験運用中)</small>
28+
</h1>
29+
<%= lazy_image_tag '/img/stretch3_cover.webp',
30+
alt: 'AI 拡張ブロック利用例のスクリーンショット画像',
31+
class: 'stretch3-eyecatch',
32+
style: 'box-shadow: 0 2.5rem 2rem -2rem hsl(200 50% 20% / 40%);' %>
33+
</div>
34+
<p style="margin-top: 70px;">
35+
Stretch3 内にある AI 拡張ブロックの利用申請フォームです。<small>(<a href="#">&raquo; 詳細を見る</a>)
36+
</small>
37+
</p>
38+
<p style="margin-bottom: 50px;">
39+
利用規約は、<b>保護者が利用者と一緒に</b><br class="ignore-pc">ご確認いただくようお願い致します。
40+
</p>
41+
42+
<%= form_with model: @stretch3, url: stretch3_path, class: 'form' do |f| %>
43+
<div class="field">
44+
<%= f.label :email, "メールアドレス" %>
45+
<%= f.email_field :email, required: true, autocomplete: "email", class: "form__field", placeholder: '例: coderdojo@example.com' %>
46+
</div>
47+
<div class="field">
48+
<%= f.label :parent_name, "保護者の名前" %>
49+
<%= f.text_field :parent_name, required: true, autocomplete: "name", class: "form__field", placeholder: '例: 幸田 道場' %>
50+
</div>
51+
<div class="field">
52+
<%= f.label :participant_name, "利用者の名前" %>
53+
<%= f.text_field :participant_name, required: true, autocomplete: "name", class: "form__field", placeholder: '例: 幸田 道子' %>
54+
</div>
55+
<div class="field">
56+
<%= f.label :dojo_name, "道場名" %>
57+
<%= f.text_field :dojo_name, required: true, class: "form__field", placeholder: '例: CoderDojo 瀬戸' %>
58+
</div>
59+
<div class="form__terms">
60+
<h2 class="form__h2">利用規約</h2>
61+
<ol>
62+
<li>
63+
<small>
64+
<a href="https://learn.microsoft.com/ja-jp/azure/ai-services/responsible-use-of-ai-overview" target="_blank">
65+
Azure AI サービスにおける AI の責任ある使用
66+
<small>
67+
<small>
68+
<i class="far fa-external-link"></i>
69+
</small>
70+
</small>
71+
</a>
72+
に従うこと
73+
</small>
74+
</li>
75+
<li>
76+
<small>
77+
<b>利用者は、事前に保護者から同意を得ること</b>
78+
<br>
79+
<small>
80+
(参考:
81+
<a href="https://www.mext.go.jp/content/20241226-mxt_shuukyo02-000030823_002.pdf" target="_blank">
82+
文科省 - 生成AIの利活用に関するガイドライン (概要)
83+
<small>
84+
<i class="far fa-external-link"></i>
85+
</small>
86+
</a>
87+
/
88+
<a href="https://www.mext.go.jp/a_menu/other/mext_02412.html" target="_blank">
89+
詳細を見る
90+
<small>
91+
<i class="far fa-external-link"></i>
92+
</small>
93+
</a>
94+
)
95+
</small>
96+
</li>
97+
<li>
98+
<small>
99+
CoderDojo 以外で利用する場合は、一般社団法人 CoderDojo Japan からの書面による許諾を事前に得るようお願いします。
100+
</small>
101+
</li>
102+
</ol>
103+
<p>
104+
<pre style="white-space: pre-wrap; margin-bottom: 30px; color: #505050;">
105+
※ 本サービスは Azure AI の利用上限に達した場合、または上記規約に違反した場合などの理由により、予告なく利用が停止される場合もあります。あらかじめご了承いただけると幸いです。また<a href="/privacy" target="_blank">プライバシーポリシー</a>の確認・同意も合わせてお願い致します。</pre>
106+
</p>
107+
</div>
108+
<div class="field text-center">
109+
<%= f.check_box :term_of_use, required: true %>
110+
<%= f.label :term_of_use, "上記の利用規約に同意する", style: "display:inline" %>
111+
</div>
112+
113+
<%= f.submit "同意して利用を始める", class: "form__submit" %>
114+
<div class="text-center" style="color: gray;">
115+
<small>
116+
<small>
117+
<b>
118+
※
119+
ボタン押下後、Stretch3 のページへ移動します
120+
</b>
121+
</small>
122+
</small>
123+
</div>
124+
125+
<p class="form-notes">
126+
Stretch3 は NHK for School や書籍「
127+
<a href="https://www.oreilly.co.jp/books/9784814400829/" target="_blank">Scratchではじめる機械学習</a>
128+
」などでも取り扱われている、自作の拡張機能が使えるように改造されたスクラッチです。特徴は以下の通りです。（引用元:
129+
<a href="https://www.nhk.or.jp/school/sougou/programming/origin/shiryou/028.html" target="_blank">NHK for School</a>
130+
）
131+
<blockquote style="font-size: 11.8px; line-height: 1.8em; color: #909090; margin-bottom: 0px;">
132+
〇一部の機能以外は、ふつうのスクラッチと同じように操作できます
133+
<br>
134+
〇スクラッチのアカウントに作品を保存できません（コンピューターに保存することはできます）
135+
<br>
136+
〇スクラッチのサイトでの作品の共有ができません
137+
</blockquote>
138+
<span style="font-size: 11.8px; line-height: 1.8em; color: #909090;">
139+
&copy; Junya Ishihara (Stretch3) / Yu Ishihara (アイコン) / Ichiro Nakatani (拡張機能)
140+
</span>
141+
<br>
142+
</p>
143+
<% end %>
144+
</section>
145+
</div>

‎app/views/stretch3s/new.html.haml

Lines changed: 0 additions & 119 deletions
This file was deleted.

0 commit comments

Comments
 (0)