Skip to content

/sotechsha に関連するページを Static にホストするようにしたい #1500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 14, 2023
Merged

/sotechsha に関連するページを Static にホストするようにしたい #1500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
96db6f1
Add static page for sotechsha
nanophate Feb 9, 2023
98e922b
Remove scrivitio css script
nanophate Feb 12, 2023
20d2763
Remove unnecessary helper
nanophate Feb 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions app/controllers/sotechsha_pages_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
class SotechshaPagesController < ApplicationController
def index; end

def show
render "sotechsha_pages/#{params[:page]}"
end
end
29 changes: 25 additions & 4 deletions app/views/shared/_sitemap_sotechsha.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,29 @@
%nav.navbar
%ul.nav.navbar-nav
- @sts_posts.each do |sts_post|
%li
%span.list-group
= link_to(scrivito_value(sts_post.title), scrivito_path(sts_post), :class => "list-group-item list-group-item-success text-center")
%li
%span.list-group
%a.list-group-item.list-group-item-success.text-center{:href => "/sotechsha/gazou"} スプライト素材のダウンロード
%li
%span.list-group
%a.list-group-item.list-group-item-success.text-center{:href => "/sotechsha/0"} 序章課題
%li
%span.list-group
%a.list-group-item.list-group-item-success.text-center{:href => "/sotechsha/1"} １章課題
%li
%span.list-group
%a.list-group-item.list-group-item-success.text-center{:href => "/sotechsha/2"} ２章課題
%li
%span.list-group
%a.list-group-item.list-group-item-success.text-center{:href => "/sotechsha/3"} ３章課題
%li
%span.list-group
%a.list-group-item.list-group-item-success.text-center{:href => "/sotechsha/4"} ４章課題
%li
%span.list-group
%a.list-group-item.list-group-item-success.text-center{:href => "/sotechsha/5"} ５章課題
%li
%span.list-group
%a.list-group-item.list-group-item-success.text-center{:href => "/sotechsha/6"} ６章課題

%hr/
%br/
250 changes: 250 additions & 0 deletions app/views/sotechsha_pages/0.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,250 @@

<article>
<div class='container'>
<div class='row'>
<div class='col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1'>
<div class='fontsize-bigger'>
<h1>序章課題</h1>
<div>
<h2>リンゴが消えて、別の場所から出てくるようにするには？</h2>
<p>
<span style="font-size: 19.2px;">
<br>
</span>
</p>
<p>
<span style="font-size: 19.2px;">
<b>課題内容（書籍P.32）</b>
</span>
</p>
<p>ネコがリンゴにさわったら、リンゴが消えて別の場所から出てくるようにスクリプトを作り直してみよう。ネコがリンゴにさわったときに、リンゴの位置をランダムに設定し直すと、ちがった動きになるよ。</p>
<p>
<br>
</p>
<p>
<b>ヒント1→&nbsp;</b>
新しいスクリプトをリンゴに追加すること。ネコのスクリプトを参考に、追加する場所を探してみよう。リンゴが出る場所をランダムにするには、カテゴリーのを使うんだ（☞P.142参照）。
</p>
<p>
<b>ヒント2→&nbsp;</b>
x座標、y座標はそれぞれいくつからいくつまでかな？　背景の「xy-grid」をよく見て設定してみよう。リンゴの位置を変える前に一度隠して、しばらくしてからもう一度表示するようにすると、もっとよくなるよ。
</p>
<p>
<br>
</p>
</div>
<%= lazy_image_tag '/img/sotechsha/0/00_cover.png' %>
<div>
<div>
<div>
<p>
<span style="font-size: 19.2px;">
<br>
</span>
</p>
<p>
<span style="font-size: 19.2px;">キミにとっての初めてのScratch作品になったと思うんだけどどうだったかな？　ここからは作った作品に少し手を加えて動きを変えていってみようと思う。まずはリンゴを隠して、しばらくしてランダムな場所に表示させてみよう。プログラムは少ししか変えないけど、動きはだいぶ違って見えると思うよ。</span>
<br>
</p>
<p>
<br>
</p>
</div>
</div>
<div>
<div>
<p>
<b>タカシが最後に作った「ネコ」のスクリプト</b>
</p>
</div>
</div>
<div>
<%= lazy_image_tag '/img/sotechsha/0/00_neko.png' %>
</div>
<div>
<div>
<p>
<b>
<br>
</b>
</p>
<p>
<b>タカシが最後に作った「リンゴ」のスクリプト</b>
</p>
</div>
</div>
<div>
<%= lazy_image_tag '/img/sotechsha/0/00_ringo.png' %>
</div>
<div>
<div>
<p>
<br>
</p>
<h3>リンゴを隠してみよう</h3>
<p>
まずはリンゴを隠してみよう。ネコに触れたらリンゴを隠す部分を作っていくよ。ネコのスクリプトを見て欲しい。
<b>「もしAppleに触れたなら」</b>
というプログラムを用意したね。これと同じようなものをリンゴのスクリプトにも用意するよ。ネコに触れたかどうかを調べたいので同じように
<b>「もしSprite1（ネコ）に触れたなら」</b>
を用意してみよう。それぞれどこのカテゴリーにあったかな？
</p>
</div>
</div>
<div>
<%= lazy_image_tag '/img/sotechsha/0/00a-01.png' %>
</div>
<div>
<div>
<p>
<br>
</p>
<p>
みつかったかな？　
<b>「もし〜なら」</b>
は制御カテゴリー、
<b>「Sprite1に触れた」</b>
は調べるカテゴリーだったね。これを組み合わると
<b>「もしSpite1に触れたなら」</b>
ができるよ。
</p>
<p>
では、この中にリンゴを隠すプログラムを用意しよう。
<b>「隠す」</b>
というブロックが見た目カテゴリーにある。それを
<b>「もしSprite1に触れたなら」</b>
の中に入れてみよう。
</p>
</div>
</div>
<div>
<%= lazy_image_tag '/img/sotechsha/0/00a-02.png' %>
</div>
<div>
<div>
<p>
<br>
</p>
<p>
できあがったプログラムは
<b>「10歩動かす」</b>
の前に入れてみよう。これでネコに触れるとリンゴが隠れるよ。
</p>
</div>
</div>
<div>
<%= lazy_image_tag '/img/sotechsha/0/00a-03.png' %>
</div>
<div>
<div>
<p>
<br>
</p>
<h3>再びリンゴを表示させよう</h3>
<p>
さて、これで隠すことができるようになったけど、このままだと一度ネコがリンゴに触れてしまうと、リンゴが出てこなくなっちゃうね。そこで、再びリンゴを表示させるようにしてみよう。リンゴを表示するには
<b>「見た目」</b>
カテゴリーの
<b>「表示する」</b>
を使うよ。これを
<b>「隠す」</b>
の後に入れて、緑の旗をクリックしてみよう。
</p>
</div>
</div>
<div>
<%= lazy_image_tag '/img/sotechsha/0/00a-04.png' %>
</div>
<div>
<div>
<p>
<br>
</p>
<p>
リンゴが隠れなくなったね。これは一瞬隠れてるんだけど、すぐに表示されてしまうから隠れてないように見えてるからなんだ。そこでちょっと一工夫。
<b>「隠す」</b>
と
<b>「表示する」</b>
の間に制御カテゴリーにある
<b>「1秒待つ」</b>
を入れてみよう。
</p>
</div>
</div>
<div>
<%= lazy_image_tag '/img/sotechsha/0/00a-05.png' %>
</div>
<div>
<div>
<p>
<br>
</p>
<p>これでリンゴが隠れて1秒後に表示されるようになったよ。</p>
</div>
</div>
<div>
<div>
<p>
<br>
</p>
<h3>ランダムな場所に移動させよう</h3>
<p>
いよいよ最後の仕上げ、ランダムな場所に表示してみよう。隠した後にリンゴの場所を変えて違うところに表示するよ。スプライトの場所を変えるにはどのブロックを使ったらよかったかな？　
<b>「x座標を〜y座標を〜にする」</b>
を使えばよかったね。まずは、これを
<b>「隠す」</b>
と
<b>「表示する」</b>
の間に入れてみよう。
</p>
</div>
</div>
<div>
<%= lazy_image_tag '/img/sotechsha/0/00a-06.png' %>
</div>
<div>
<div>
<p>
<br>
</p>
<p>
このままだと毎回同じ場所に出てくるので、場所をランダムにしてみよう。ランダムにするには演算カテゴリーの
<b>「〜から〜までの乱数」</b>
というブロックを使うよ。乱数というのがランダムな数値のことだよ。
</p>
<p>
<b>「〜から〜までの乱数」</b>
を2つ用意しよう。1つはx座標、もう1つはy座標部分に入れてみよう。さて、ランダムな数値はいくつからいくつまでにすればいいかな？　今背景は「xy-grid」になっていると思う。もし違う背景だったら「xy-grid」にしてみよう。
</p>
<p>
「xy-grid」の上下左右に数字が書いてあるね。左のxは-240、右のxは240、上のyは180、下のyは-180。この数字を使えばよさそうだね。ではxは
<b>「-240から240までの乱数」</b>
、yは
<b>「-180から180までの乱数」</b>
としてみよう。
</p>
</div>
</div>
<div>
<%= lazy_image_tag '/img/sotechsha/0/00a-07.png' %>
</div>
<div>
<div>
<p>
<br>
</p>
<p>これで、緑の旗をクリックしてみると……ネコに触れるたびにリンゴがランダムな場所に表示されるようになった！　プログラムをちょっと追加しただけで動きが変わったね。緑の旗がクリックされたときのリンゴの場所をランダムにしてみたりもできるよ。チャレンジしてみよう！</p>
</div>
</div>
</div>
<hr>
<div class="text-muted text-right h5">更新日: 2017年02月23日</div>
<div style='margin-left: 0px; padding-bottom: 30px;'></div>

<%= render partial: 'shared/sitemap_sotechsha'%>

</div>
</div>
</div>
</div>
</article>
Loading