文字サイズは、最小_小_標準_大_最大。文字色は、いろいろと変えられる。背景色も、いろいろと変えられる。太字と、下線と、取消線(文字揃え:中央ぞろえ)。
字下げをすると、段落全体が右に移動する(これは2回字下げしたもの)。戻すこともできる。リンクを挿入でき、クリックで別タブに表示(例→ 色使いの基本ルール:使うのは3色まで!)。SocPadで作ったものをホームページとして使うことができる。
表の挿入は、 | セルの結合・分割可 | 列・行の | ![]() | ← jisshu/img フォルダ内の画像一覧から 画像を選んで貼り付け |
列数×行数を指定して | 挿入・削除可 |
①動作は4色のボタンに割り当て、②飛び先は class属性で指定し、③必要に応じて動作を拡張する という ローコードプログラミング の手法で行う。 「順次・分岐・反復」のスライド移動の基本命令は、 xgo(数); という関数で、数によって動作を変える。
種類 | ボタンの文字の例 | 既定動作 | 命令 | sectionタグの class属性 |
順次 | →(次へ) | ボタン3 | xgo(1); | |
←(前へ) | ボタン2 | xgo(-1); | ||
分岐 | 選択肢2へ~選択肢6へ | xgo(2);~xgo(6); | class="bk2"~"bk6" | |
(選択を)抜ける | xgo(7); | class="bk7"(合流点のスライドに) | ||
反復 | ↓(次の反復ブロックへ) | ボタン4 | xgo(8); | 反復ブロックの開始スライドに class="hp" |
↑(前の反復ブロックへ) | ボタン1 | xgo(-8); | ||
↓↓(末尾へ) | xgo(9); | |||
↑↑(先頭へ) | xgo(-9); |
① スライドの背景を指定する。
② x関数・x変数でボタン動作を拡張する。 ※ テストボタンの data-test = “命令文” を書き換えて、ボタン動作のテストができる。
③ アニメーションで画面に躍動感を与える。
■ x関数の xanim(オブジェクト); でスライドの中の要素を時間を追って変化させることができる。アニメーションオブジェクトの書式は、anime.js に従う。戻り値は、xa に。
■ Wick Editor というフリーのWebアプリで手軽に Gifアニメ を作ることができる。軽量化して使うとよい。 | ||
---|---|---|
![]() | ![]() | ![]() |
④ 同じフォルダにあるSocSagaファイルを x関数で呼び出すことができるので、クラス全員で共同制作することができる。
⑤ HTMLファイル本体をカスタマイズ(html・css・JavaScript を必要に応じて書き換え)する。文字の大きさ→ --fontvw: 1.5vw; methods:に新しい x関数 を追加…など。
※ このような発展的な使い方により、プレゼンだけでなく、クイズ・アドベンチャーゲーム・脱出ゲーム・すごろくなども作れる。
Poly Sphere Dog Second by hadano-kouji1 on Sketchfab ※ 犬の3Dモデルです。マウスでグリグリできます。
1. Googleアカウント取得。校務用とは別に授業用のアカウントがあると便利。
2. Replit に[Continue with Google]で[Sign up]し、アカウントを設定。左上の ≡ - [+Create]をクリック、Titleにプロジェクト名(socsaga1 等)、Languageは[HTML,CSS,JS]を選択し、[+Create Repl]をクリック。プロジェクトはクラス数分作るとよい。
3. JavaScriptプログラムは、基本的にhtmlファイルに組み込んで動作させる。ローカルファイルをFiles欄にドラッグ&ドロップするか、コードエディタで直接書くかする。
4. SocSagaを利用するには、socsagaset.zipをダウンロード・解凍しておく。sagaフォルダの中のものをすべてFiles欄にドラッグ&ドロップする。
5. jisshu00.html をひな形ファイルとし、ファイル名右の ≡ をクリック-Duplicate、≡ をクリック-Rename で jisshu01.html,jisshu02.html,…とクラスの生徒数分の実習htmlファイルを用意。指導者の方へ.txt の指示に従ってhtmlリストと画像リストを更新しておく。実習開始時には、右上の[👤+Invite]をクリックし、メールで生徒に知らせる。生徒には、次の手順で操作をさせる。
6. メールが届いたら、https://replit.com/join/**********-******* をクリックし、[Continue with Google]で[Sign up]して、プロジェクトに参加する。「Replit needs ……」に対しては、[Allow notifications]を選ぶ。
7. コード編集欄の右の Output欄の右上の ↗ (Open in a new tab) をクリックして新しいウィンドウを開く。少し待つと「ソックサーガへようこそ」から「ソックサーガで実習」に自動的に切り替わる。コード編集欄の右の仕切り線を右にずらして、広くしておくとよい。
8. jisshu/socsaga.html(ソックサーガの説明_編集用)へをクリックし、実行エリアが表示されるようにし、[コンテンツ作り へ]、[ → ]、[ → ]、…とボタンをクリックして、SocSagaの説明を読み進める。
9. SocSagaについて理解できたら、jisshu フォルダ内のhtml一覧で jisshu**.html(**は出席番号)をクリックして自分のページを表示する。Files欄で jisshu/jisshu**.html を選び、コード編集欄と自分のページとを行ったり来たりしてSocSagaの練習をする。編集するスライド番号 を入力し、自分のページの ↻ ボタンで更新。スライド編集エリアで編集後、[ソース]ボタンでコピーしたソースをコード編集欄のsectionタグ内に貼り付ける。自分のページの ↻ ボタンで更新。正しく表示されているか、実行エリアのボタンが作動するか確認。
双方向性 コンテンツ
Web標準に従って属性を指定するだけ。 | 他のSocSagaファイルを呼び出せ、共同制作ができる。 |