Act Green ECO WEEK 2017 でプログラミング体験イベントを開催しました!

越谷レイクタウンのエコウィークイベント!

2017年10月22日(日)に埼玉県越谷市のイオンレイクタウンにてエコをテーマにした大型体験型イベントが行われ、環境保護、社会保護、教育、健康、といったテーマでたくさんのイベントが行われました。

その中のひと枠を頂いて、自分でデザインしたエコカーを、画面の中で動かす簡単なゲームをScratchで作る、プログラミング体験会を開催しました。

満員御礼!たくさんの人に体験していただきました!

この日は台風直撃で雨風がとても強い悪天候でしたが、イオンレイクタウンにはたくさんの人がいてプログラミング道場に興味を持っていただき参加していただきました!

荒天の際は周辺の方々はレイクタウンで過ごすのだとか。

各回12人参加を3回おこないましたが、常に満席でした!

Scratchにハマる子続出!!

画面の中で動くボールを作り、自分でデザインしたエコカーをマウスで操作して、画面の中を走らせてボールを避けるというゲームを作りました。

自分でデザインしたエコカーが画面の中を動くゲームを作れたので、みんな夢中になっていましたね!

いろんなエコカーやオリジナルキャラクターを作り、もっとやりたい!と終了時間がきてもパソコンを触り続ける子どもがたくさんいました。

家に帰ってからもできるように案内しているので、おうちで続きをやってくれているといいですね!

初めてScratchを触る子がほとんどでしたが、プログラミングの楽しさにのめり込んでもらえたようでよかったです。

消費や浪費ばかりではなく、何か創り出すことで何かしらのエコにつながればいいなと思います。

今回でモノづくりを楽しんでもらうための機会を作れていたなら幸いです!

好評のまま終了しました!

調布メンター陣や、イベント関係者の方々で協力しあい、なんのトラブルもなく終えることができました。

イベント企画のBeGood Cafe様の方々です。

会場のセッティングや受付などを担当していただきました。

ありがとうございます!

リフレクションムービー

一日の活動を動画で残し、それを振り返って見られる「リフレクションムービー」っぽいものを、iPhoneで撮影した動画と、iPhoneのiMovieのテンプレートで作ってみました。 作ったと言っても、テンプレートに動画から指示するだけで、それっぽく作ってくれます。 動画の内容とテロップが合っていませんが、そこは御愛嬌。

Dojoサーバー構築!

さくらインターネットさんのご厚意により、各Dojo毎にインスタンスがひとつ提供されるというニュースが流れたのを見た方も結構おられるとは思いますが、今回はCoderDojo調布のインスタンスセットアップで行った事を備忘録的に書いてみたいと思います。

TL;DR

ログイン設定

割り当てられたインスタンスにログインして、真っ先にした事は各ユーザーの公開鍵の登録でした。Dojoインスタンスでは公開鍵認証のみになっているので(チャレンジパスワードを使えるようには出来ます)、使用する人は公開鍵の登録が必要です。最初はインスタンスの申請者の鍵だけが登録されているので、使用する人から送って貰った公開鍵を登録します。登録された公開鍵に対する秘密鍵が設定されているターミナルからログインすることが出来ます。

次に、共通アカウントの常時共用はよろしくないので、普段使う人のアカウント作成を行いました。その中で管理者となる人のアカウントのsudoの設定を行います。

ここで失敗

インスタンスの設定で必要の無いポートを閉じようと思い、iptablesを叩いてしくじりました。Dojoに提供していただいているインスタンスはコンソールが使えないので、二進も三進も行かなくなり、一旦削除申請→削除の後に再申請しました。副産物として、代理申請のサンプルを作ることが出来ました。

コンソールが使えないのでiptablesはノータッチにしましょう

APT初期設定

次に、インストール直後の状態のAPTとパッケージを更新します。

$ sudo apt-get update
$ sudo apt-get upgrade

これで、APTデータベースと、インストールされているパッケージが最新になります。

PHP7.1インストール

PHPのバージョン番号を指定してインストールする環境を構築します。*1
まずは、APTにリポジトリを追加するためのリポジトリ追加ツールをインストールします。

$ sudo apt-get install -y software-properties-common python-software-properties

ツールがインストールされたらPHPのリポジトリを追加します。

$ sudo add-apt-repository ppa:ondrej/php

リポジトリが追加されたらAPTデータベースを更新し、バージョンを指定してPHPをインストールします。

$ sudo apt-get update
$ sudo apt-get install -y php7.1
$ php -v
PHP 7.1.7-1+ubuntu16.04.1+deb.sury.org+1 (cli) (built: Jul  7 2017 09:41:45) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies with Zend OPcache
v7.1.7-1+ubuntu16.04.1+deb.sury.org+1, Copyright (c) 1999-2017, by Zend Technologies

PHPのインストールが終わったら、nginxから使うためにFPMをインストールします。

$ sudo apt-get install php7.1-fpm

node.js環境構築

次にnode.jsを使えるようにします。Ubuntuに標準で入っているnode.jsではなくて、「n」というツールでStableバージョンをインストールします。まず、Ubuntuの標準のnpmと、nodejsをインストールします。しかし、APTでそのまま入れるととんでもなく古いのがインストールされ、その後にnpmが動かなくなるのでもうちょっと新しいものが入るように設定します。

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

その後に、nodejsをインストールします。

$ sudo apt-get -y install npm nodejs

インストール後に、npmを更新します。

$ sudo npm i -g npm

次にnode.jsのバージョン管理ツール「n」をインストールします。*2

$ sudo npm i -g n

これで「n」が使えるようになります。この「n」を使ってnode.jsをインストールします。

$ sudo n stable

インスト〜ルが終わったらバージョン確認をします。

$ node -v
v8.2.1

Stableのバージョンであれば成功です。この後はUbuntuのnodejsは必要ないので削除しておきます。

$ sudo apt-get purge nodejs

nginxインストール

Ubuntuの標準でインストールされるnginxはだいぶ古いので、最新版をインストールするための設定を行います。*3
まずはnginxのPGPキーをAPTに登録します。

$ sudo curl http://nginx.org/keys/nginx_signing.key | sudo apt-key add -

次にリポジトリを追加します。

「/etc/apt/sources.list」の最後に、下記の2行を追記してください。

deb http://nginx.org/packages/ubuntu/ xenial nginx
deb-src http://nginx.org/packages/ubuntu/ xenial nginx

「xenial」の部分はディストリビューションによって変わります。
具体的には「/etc/lsb-release」の「DISTRIB_CODENAME」の文字列になります。

$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=16.04
DISTRIB_CODENAME=xenial

リポジトリの追加が終わったら、APTデータベースを更新しnginxをインストールします。

$ sudo apt-get update
$ sudo apt-get install nginx

まず、「/var/run/php/php7.1-fpm.sock」があることも確認しておきます。 次にPHP7.1が使えるようにnginxを設定します。「/etc/nginx/conf.d/default.conf」に下記を追記します。

location ~ ^/~([^/]+)/(.+\.php)$ {
  alias /home/$1/public_html/$2;
  fastcgi_pass unix:/var/run/php/php7.1-fpm.sock;
  fastcgi_index index.php;
  fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
  include fastcgi_params;
}

location ~ ^/~(.+?)(/.*)?$ {
  alias /home/$1/public_html$2;
}

location ~ \.php$ {
  alias   /var/www/html;
  fastcgi_pass unix:/var/run/php/php7.1-fpm.sock;
  fastcgi_index index.php;
  fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
  include fastcgi_params;
}

location / {
  root   /var/www/html;
}

また、Dojo名のサブドメイン(調布の場合は「chofu」)を登録してもらっている場合は、「server_name」も変更しておきます。

server_name  chofu.coderdojo.jp;

Let's Encryptを設定する

nginxでHTTPSを使用するために、Let's Encryptの設定を行います。*4

Let's Encryptで使うツール「certbot」をAPTでインストールするために、certbotのリポジトリをAPTに登録します。

$ sudo add-apt-repository ppa:certbot/certbot  

登録が終わりましたら、APTデータベースを更新し、certbotツールをインストールします。

$ sudo apt-get update
$ sudo apt-get install python-certbot-nginx

正常にインストールが終わりましたら、証明書を取得します。

$ sudo certbot certonly --webroot -w [nginxのドキュメントルート] -d [FQDNを記述]

[FQDN]には、HTTPSを設定するFQDNを入れてください。

実行すると、

Saving debug log to /var/log/letsencrypt/letsencrypt.log  
Enter email address (used for urgent renewal and security notices) (Enter 'c' to cancel):

と訊かれるので、有効なメールアドレスを入力してください。メールアドレスを入力すると、

Starting new HTTPS connection (1): acme-v01.api.letsencrypt.org  
    
-------------------------------------------------------------------------------  
Please read the Terms of Service at  
https://letsencrypt.org/documents/LE-SA-v1.1.1-August-1-2016.pdf. You must agree  
in order to register with the ACME server at  
https://acme-v01.api.letsencrypt.org/directory  
-------------------------------------------------------------------------------  
(A)gree/(C)ancel:

と訊かれるので、「A」を入力してリターンを押してください。リターンを押すと、

-------------------------------------------------------------------------------
Would you be willing to share your email address with the Electronic Frontier
Foundation, a founding partner of the Let's Encrypt project and the non-profit
organization that develops Certbot? We'd like to send you email about EFF and
our work to encrypt the web, protect its users and defend digital rights.
-------------------------------------------------------------------------------
(Y)es/(N)o:

と訊かれるので通常は「N」を入力してリターンを押してください。
すると、次のように表示されて、「/etc/letsencrypt」ディレクトリが生成されます。

Obtaining a new certificate
Performing the following challenges:
http-01 challenge for chofu.coderdojo.jp
Waiting for verification...
Cleaning up challenges

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/chofu.coderdojo.jp/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/chofu.coderdojo.jp/privkey.pem
   Your cert will expire on 2018-06-03. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot
   again. To non-interactively renew *all* of your certificates, run
   "certbot renew"
 - Your account credentials have been saved in your Certbot
   configuration directory at /etc/letsencrypt. You should make a
   secure backup of this folder now. This configuration directory will
   also contain certificates and private keys obtained by Certbot so
   making regular backups of this folder is ideal.
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

次に、「/etc/nginx/conf.d/default.conf」に設定を追記します。
port443で待ち受ける設定と、証明書の読み込みを追記します。
ドメイン部分は各Dojoで変更してください。

listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/chofu.coderdojo.jp/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/chofu.coderdojo.jp/privkey.pem;

これでhttpsでの待ち受けは出来るのですが、port80に来たアクセスを強制的に443に転送する場合は、下記も追記してください。

if ($scheme != "https") {
    return 301 https://$host$request_uri;
}

nginxを再起動すると設定が反映されます。

$ sudo service nginx restart

let's encryptの証明書は有効期限が3ヶ月と短いので、毎月1日に自動更新するようにcronに設定します。

0 4 1 * * /usr/bin/certbot renew

gitbucketの起動

Dojoで使っているコードの管理をするためにgitbucketをインストールしました。
gitbucketのReleaseページから「gitbucket.war」をダウンロードしてきます。

github.com

ダウンロードが終わりましたら実行します。

$ java -jar gitbucket.war --port=8000

「--port」はポート番号の指定です。CoderDojo調布ではメンター連絡用にSlackを使用し、インテグレーションとしてポート8080を使う「hubot」を動かすため、gitbucketのデフォルトポート「8080」から「8000」に変更しています。アクセスする時は、

http://[設定したFQDN]:8000

とします。nginxの管理下に無いのでHTTPSにはなりません。nginxでProxyの設定をするとHTTPSに出来るかもしれません。

マインクラフトマルチサーバーを起動

マインクラフトはデフォルトではポート25565を使うので、iptablesでポートを開放します。

$ sudo iptables -A INPUT -p tcp --dport 25565 -j ACCEPT

マインクラフトマルチサーバーは、マインクラフトのオフィシャルからダウンロードし設置するだけで起動出来ますが、プラグインを簡単に使えるようにするために「Spigot」サーバーをビルドして設置します。

BuildToolsは実行したディレクトリにファイルを大量に生成するため、まず最初に作業用ディレクトリを作成し中に入ります。そして「BuildTools」を取得します。

$ wget https://hub.spigotmc.org/jenkins/job/BuildTools/lastSuccessfulBuild/artifact/target/BuildTools.jar

BuildToolsのダウンロードが終わりましたら、バージョン(リヴィジョン)を指定してサーバーアプリをビルドします(結構時間がかかります)。

java -jar BuildTools.jar --rev latest

上記の例だと現在の最新安定版がビルドされます。 バージョン番号を指定するには下記のようにします。

java -jar BuildTools.jar --rev 1.12.1

終了すると「Spigot-[バージョン番号].jar」というファイルが生成されていれば成功です。 このファイルをマインクラフト用のディレクトリにコピーし実行します。サーバーアプリも実行したディレクトリに大量にファイル/ディレクトリを生成するので、マインクラフト用のディレクトリを切って、その中で実行してください。

java -jar -Xms512M -Xmx1024M ./Spigot-[バージョン番号].jar &

オプションは使用するメモリ量の指定です。Dojoサーバーではこれより多いとメモリが足りなくなり、Spigotが落ちます。マルチサーバーが起動出来ると、マインクラフトのマルチでDojoサーバーのアドレスへ繋ぐことが出来ます。ホスト名を登録してもらっている場合はそのアドレス(CoderDojo調布の場合は「chofu.coderdojo.jp」)で繋ぐことが出来ます。

hubot関連

CoderDojo調布では、メンター連絡用にSlackチームを作成し、hubotを使い各種連携を行なっています。これはまた別で書きたいと思います。

*1:参考:意外とPHPのバージョンを指定してUbuntuにインストールする方法が載ってないのでまとめる - Qiita

*2:ここで「node」が無いとエラーになる場合があります。その場合は「sudo ln -s /usr/bin/nodejs /usr/local/bin/node」を実行してください。

*3:参考:Ubuntuに最新のnginxをインストールする - Qiita

*4:参考:How To Secure Nginx with Let's Encrypt on Ubuntu 16.04 | DigitalOcean

第1回 CoderDojo 調布 メンター勉強会を開催しました

CoderDojo 調布には、Viscuit・JavaScript・HTML・電子工作に VR/AR/MR などなどそれぞれ得意な分野を持っているメンターがそろっているのですが、その人がいないと教えられないという状況でした。

最初の第一歩のところまででいいので、興味をもった参加者に代わりのメンターがガイドできるくらいにはしておきたいということで、各メンターが持っている知識を共有するメンター同士の勉強会を開催してみました。

やや大きめの部屋を予約して、どうせならほかの CoderDojo のメンターさんや興味を持った方々の参加も OK にしたところ、調布以外の CoderDojo からも多数参加していただけました。

あらかじめテーマを決めず、シェアできる知識を持ち寄って、その場で発表内容を決めるというアンカンファレンスというゆるい形でおこないましたが、知識が身につくよう実際に手を動かすハンズオン形式でおこなったというのもあって、スキルアップに役立った充実した内容だったかと思います。

私(石原)からは、Scratch の拡張機能の紹介や最新事情などを紹介させてもらいました。内容はだいたい以下の個人ブログで公開している内容の紹介でした。

後半は、Processing 超入門。Processing やってみたいという参加者にはじめの一歩を踏み出すまでどうガイドすればいいかという話です。メモ書き程度の内容で、単体でどこまで役に立つかはわかりませんが一応資料を公開しておきます。

Viscuit ファシリテーターのアリーさんからは大人向け Viscuit 入門。メガネの動きが独特で最初は戸惑いましたが、プログラムが動いたときはパズルが解けたような喜びがあって楽しい。メガネの動きが面白いので Scratch で再現してみました。

scratch.mit.edu

Scratch とはまた別の面白さがあり、Viscuit、プログラミング入門者に良さそうです。紹介された入門書の Amazon へのリンクを貼っておきます。

CoderDojo 小平 とがぞのさんからは、プログラムコードで音楽を演奏できる Sonic Pi の紹介。Sonic Pi は Minecraft PI とも連携でき、 音楽に合わせて自動建築するなども可能だそうです。

https://www.facebook.com/events/485117778489338/permalink/491333014534481/?ref=1&action_history=null

調布メンター 猪股さんからは、Rasberry Pi の GPIO を使った Lチカ、CoderDojo 藤沢の森さんからは、Unity の使い方の紹介がありました。

CoderDojo小平から参加いただいた山賀さんからは、当日は残念ながら持ってこられなかったのですが、自己紹介で紹介されていたライントレースロボット Ozobot を使った面白い作品の動画を Facebook 上で紹介してくださいました。

好評だったので、また近いうちに第2回をおこないたいと思います。

第10回 CoderDojo 調布 親子交流会 を開催しました

昨年9月から毎月開催している CoderDojo 調布が、第10回を迎えました。

記念に特別なことをしようということになり、いつもよりも広い定員100名のホールを借りて、こどもたちだけでなく保護者の方々にもプログラミングを体験してもらえればと考えて、親子交流会と銘打って開催しました。

通常の自由にプログラミングして発表という CoderDojo のコーナーに加え、今回、

のご協力を得て、Sphero、Strawbees、littleBits や PETS といったプログラミング関連製品を体験できるコーナーも用意しました。

f:id:jishiha:20170702123214j:plain

左や右旋回など、前進、後退など動きをプログラミングできる Sphero(スフィロ)。ゴールキーパーの動きをプログラミングしたりもしました。

f:id:jishiha:20170705225140j:plain

Strawbees(ストロービーズ)はスウェーデン生まれのクリエイティブツールです。

f:id:jishiha:20170702150251j:plain

こんな大きなものまで作れてしまいます。

f:id:jishiha:20170705225133j:plain

前後左右とループのブロックを差し込み、ブロックの命令通りに動く木製の PETS。障害物をよけ、ゴールまでたどりつくミッションをクリアするための最適な動きをプログラミングします。

f:id:jishiha:20170702151801j:plain

「ボタン」「ライト」「モーター」といったモジュールを磁石でくっつけて様々な仕組みを作ることができる電子工作キット、littleBits にも夢中です。

f:id:jishiha:20170702154653j:plain

アイロンビーズとビジュアルプログラミング言語 Viscuit(ビスケット)の体験コーナー。デジタルポケット 様からはタブレットを貸していただきました。

f:id:jishiha:20170702152526j:plain

通常の CoderDojo のコーナー。自分の作品作りに集中。

f:id:jishiha:20170705225125j:plainf:id:jishiha:20170705225657j:plain

今回は、作品作りと発表の時間のセットを、前半と後半の2回おこないました。

f:id:jishiha:20170702134550j:plain

大人のスクラッチ教室も盛況でした。新しい世界を知りました、なんて嬉しい感想も。大人になっても新しいことを学ぶのは楽しいものです。

f:id:jishiha:20170705225109j:plain

保護者同士交流できるようにと設けた休憩コーナー。

f:id:jishiha:20170702122909j:plain

ポストイットに感想やコメントを自由に書いてもらってホワイトボードに貼り付けておけるコーナーを用意しました。

f:id:jishiha:20170702124052j:plain

嬉しいコメントの数々です。

f:id:jishiha:20170702231515j:plain

お疲れ様でした〜。親子交流会、今後も定期的におこなっていきたいと思います。

f:id:jishiha:20170702164244j:plain

CoderDojo調布のネットワーク環境: Wi-Fiルーターレンタル「カシモバ」を利用しています

CoderDojo調布がいつも会場として利用している調布市市民プラザ「あくろす」には無線LANなどのネットワーク環境がないため、国内Wi-Fiレンタル専門店の「カシモバ」さまから毎回Wi-Fiルーターをレンタルしています。

www.kashimob.com

10台まで同時接続できるPocket WiFi 502HWという端末を使っているのですが、Webで「宅配受取/宅配返却」を指定して予約すれば、指定した日(CoderDojo開催日の前日)に送られてきて、返すときは同封されてくるレターパックの封筒に入れてポストに入れるだけと手間はかかりません。

CoderDojo調布の参加者を少しずつ増やしてきたところ、前々回になって最大接続数の10台を超えるようになってきてしまったため、前回からは2台レンタルするようにしています。

レンタル費用は、毎回の募金からまかなっているのですが、いつも利用しているということで前回「カシモバ」さまのご厚意でレンタル費用をいくらか割引していただきました。大変感謝しております。

他のCoderDojoでも、無線LANなどのネットワーク環境がない場所で開催するケースがあると思うので、調布での方法を紹介させてもらいました。また、うちではこんな風にやっているよ、といった情報がありましたら、コメントなどで教えていただけるとうれしいです。

株式会社ホロラボにブログのスポンサーになっていただきました

CoderDojo 調布のブログははてなブログというサービスを使っています。

はてなブログは無料でも使えるサービスなのですが、それだと広告が表示されてしまいます。

広告が表示されないよう有料プランで使えるようにということで、株式会社ホロラボ にスポンサーになっていただきました。

ホロラボは CoderDojo 調布のメンター紹介のコーナーで、毎回いろいろなおもちゃ・ガジェットをデモしてくださる中村 薫さんが社長さんの会社です。

Microsoft HoloLens をはじめ、最先端の技術を使いリアルとバーチャルをつなげていこうという会社で、HoloLens は一度調布メンターの人たちで試させてもらったのですが、未来を感じさせるとてもワクワクさせてくれる技術でした。

中村さん、ホロラボさん、どうもありがとうございます。

f:id:jishiha:20170226155737p:plain