ソックリッカーの始め方【自校運用】

　この記事では、授業配信アプリ「ソックリッカー」の始め方を解説します。クラウド統合開発環境Replit（リプリット）による自校運用の方法です。kyodx.com上に配置されたソックリッカー（デモ版）は、どなたでも無料で使えます。しかし、本格的に授業に活用したい場合は、自校運用されることをおすすめします。大切な教育データを自校で管理でき、安心・便利です。設問データや生徒の入力結果の管理はもちろん、ソックリッカーの先生名の削除も自分でできるのです。

ソックリッカーの始め方（ICT担当者主体で）

1. Googleアカウント取得。学校代表のGoogleアカウントでよい。
2. 🔗Replit に[Continue with Google]で[Sign up]し、アカウントを設定。左上の ≡ - [+Create]をクリック、Titleにプロジェクト名（soclicker 等）、Languageは[HTML,CSS,JS]を選択し、[+Create Repl]をクリック。

3. JavaScriptプログラムは、基本的にhtmlファイルに組み込んで動作させる。ローカルファイルをFiles欄にドラッグ＆ドロップするか、コードエディタで直接書くかする。
4. ソックリッカーを自校運用するには、🔗soclickerset.zipをダウンロード・解凍しておく。soclickerフォルダの中のものをすべてFiles欄にドラッグ＆ドロップする。
5. ソックリッカーでは、生徒が入力したものは Replit ではなく Firebase に保存される。生徒の操作は不要で、ICT担当者が 🔗Firebase console にログインし、データベース作成・管理を行う。プロジェクトの追加-プロジェクトの作成-プロジェクト名[soclicker] …… Realtime Database をテストモードで開始する。
6. Firebase console-プロジェクトの概要[歯車]-プロジェクトの設定-全般-マイアプリ-SDKの設定と構成 で ◎構成 を選択し、📃ボタンでコピー。Replitのsoc/fbconfig.jsに貼り付け、データベースを自校のものに置き換える。
7. Firebase console-Realtime Database-データ- 右端の≡ -JSONをインポート-参照でsoclickersetフォルダの soclicker-*****-export.json を選んでインポート。続けて、ルール-ルールを編集 で databaserule.json の記述内容の通りにし、ルールを公開する。
8. 🔗Firebase StorageにCORSの設定をする をやっておいた方がよい（同一オリジンポリシーに抵触しないため）。

9. Replitコード編集欄の右の Output欄の右上の ↗ (Open in a new tab) をクリックして新しいウィンドウを開く。少し待つと「ソックリッカーへようこそ」から「ソックリッカーで授業」に自動的に切り替わる。ソックリッカー子機（生徒用）へ からsoclicker.html のURLが取得できる。もし、Replitに追加したhtmlや画像をソックリッカーで使いたい場合は、指導者の方へ.txt の指示に従ってhtmlリストと画像リストを更新しておく。
10. あとは、soclicker0.html に配信内容をどんどん入力し、soclicker.html のURLを生徒に公開し、先生名を入力させて授業をしていけばよい。あるいは、https://soclicker.*******.repl.co/soc/soclicker.html#nonaka のように　末尾に #先生名 をつけたURLを生徒に渡してもよい。
11. データベース管理者は、授業者抹消の依頼が来たら、Firebase console-Realtime Database-データ-soclicker-*****-koji の中の、該当する授業者のデータを 🗑️ でdeleteする。~Teachersの中の 授業者名も一緒にdeleteすること。

ソックリッカーの投票機能について

　データを自校で管理できるようになると、ソックリッカーの投票機能が輝きを増します。

　台湾の天才デジタル大臣オードリー・タン氏は、デジタルを駆使して市民参加型の新しい民主主義の実践に挑んでいます。1人1票ではない投票方法（クアドラティックボーディング）の導入など、画期的な事例が 🔗「オードリー・タンが語るデジタル民主主義」という本で多数紹介されています。

　クアドラティックボーディングは、法案・政策・予算などの優先順位を決める投票で有効です。集計を紙上で行うのは難しいので、デジタルシステムが必要になります。授業でアイディアに順位をつける場合など、持ち点と振り分けのルールを工夫すれば、ソックリッカーで同じことができそうです。投票者の意思・志向が反映される民主的なしくみが実現するのです。

※ 以下は、おまけです。しくみを知りたい方はどうぞ……

ソックリッカー自校運用の技術的な話

　🔗クラウド統合開発環境でWebアプリの自校運用を の最後に

　「画像の一覧」の問題が残っていますが、これは何とかなりそうです。画像やクリップボードの扱いが独特な iPad に対応したコードを書くついでに解決します。

と書いた件ですが、次のように対応しました。

• ルートのindex.htmlファイル「ソックリッカーへようこそ」に以下のコードを入れ、新しいウィンドウを開いたら自動的にsocフォルダのindex.html「ソックリッカーで授業」に移動するようにする。

    if (location.hostname.indexOf('.id.repl.co') < 0) {
      location.href = '/soc/';
    }

• soc/index.htmlに以下のコードを入れ、画像一覧を表示させる。urliから画像ファイル名を取得して配列にし、insertAdjacentHTMLでimgタグを挿入してゆく。ファイル名はfigcaptionタグを使って表示。ファイル名をクリックすると画像を開くようにしている。

      fetch(urli, {cache: "no-store"}).then(function(response) {
        return response.text()
      }).then(function(text) {
        jlisti = text.split(/\n/).filter((value) => value !== ''); 
        for (let item of jlisti) {
        soci.insertAdjacentHTML('beforeend',`<figure><img src="img/${item}"><figcaption><a href="img/${item}" onclick="return confirm('画像を開きますか？');">${item}</a></figcaption></figure>`);          
        }        
      });            

• 同じ要領で、soc/index.htmlに以下のコードを入れ、html一覧を表示させる。

      fetch(urlh,{cache: "no-store"}).then(function(response) {
        return response.text()
      }).then(function(text) {
        jlisth = text.split(/\n/).filter((value) => value !== '');
        for (let item of jlisth) {
        soch.insertAdjacentHTML('beforeend',`　<a href="${item}" target="_blank">${item}</a>　`);          
        }
      });

• 画像ファイル名一覧・htmlファイル名一覧の取得は、通常はサーバサイドプログラミングの出番。今回は、「指導者の方へ」で以下のShellコマンドを実行してもらう形にした。{cache: "no-store"} でfetchし、キャッシュを読まないようにしているが、「リストを最新の状態にしたのに一覧が古いまま」ということがたまにあったので、対策を追記した。

cd soc
ls *.html > yourhtml.txt
ls img/ > yourimg.txt

• iPadなどのモバイルOSの場合、画像やクリップボードの扱いがPCとは異なるので注意が必要。JavaScriptの命令がうまく働かないことが多々ある。
• iPadで画像をロングタップしてコピーし、SocPadに貼り付け をしても何も貼り付けられない。仕方ないので、ckeditor5-34.1.0へアップデイトしたうえでAutoImage pluginを有効にした。これで、画像URLを貼り付ければ画像が挿入される。
• ところが、画像をロングタップしても画像のアドレスをコピーが出ない。ファイル名をクリックすると画像を開くようにしたのはこのためで、アドレス欄をロングタップ-コピー でようやく画像URLがコピーされる。
• 他にも方法は考えられるが、Appleが年々クリップボードのセキュリティを厳しくしているので、ユーザーに意識的操作をさせた方がよいと判断した。
• ソックサーガとは違い、ソックリッカーでは生徒に画像をアップロードさせることは想定していない。親機から Firebase Storage にアップロードする使い方が中心。生徒に画像を扱わせたければ、Replitの soc/img フォルダにアップロードし、「ソックリッカーで授業」ページの画像一覧を使うようにする。

オードリー・タンが語るデジタル民主主義 （NHK出版新書670　670） [ 大野 和基 ]

※ ハダノは、DXやSTEAM教育の研究会などで「日本は、オードリー・タンに学ぶべきだ」という声を多く聞きます。
クアドラティックボーディングをはじめとする台湾モデルは、あきらめムードの日本人に変革の勇気を与えてくれます。

楽天

Amazon

Yahoo!

←前へ　ソックリッカー活用で授業改善を