また1からこつこつと

最高はひとつじゃないと信じてまたがんばります。

coderdojo-kashiwa.com をアップデートした話

2019年5月16日に、CoderDojo Kashiwa の公式Webサイトをアップデートした。

f:id:mjk0513:20190516161617p:plain

coderdojo-kashiwa.com

GitHubのコミットログを見ると、First Commitが2018年11月6日だったので実に半年近くもかかってしまった。 まあ大学に行きながら会社をやりつつそれ以外のタスクに追われながらの実装だとこれくらいになってしまうのか。

f:id:mjk0513:20190516145056p:plain

旧サイトの問題点

旧サイトを作ったのは2015年くらいのことで、まだBootstrapとかまともに知らなかったクソザコなころに無理やり実装していた。 Webサイト製作の基本的な事柄を殆ど知らなかった状態で作っていたので、OGP設定も適当、レスポンシブ対応もしてない。 インタラクティブなコンテンツ配信もできなかったから毎回HTMLを書くような状態。 Googleがモバイルフレンドリーでないサイトを表示し始めたころから、そろそろいい感じにサイトを作り直したいと思っていた。

また、柏市のなかには4つの CoderDojo があるが、それぞれの申込み方法が異なっているのも問題だった。 もっといろんな Dojo をぐるぐる回ってもらうためにも申込み方法を完結に、一本化して提供したかった。

そんなこんなで昔から OnlineDojo という構想を考えていた。 CoderDojo に来なくてもオンライン上で同じようなことができるようになればいいし、家で CoderDojo でやったことの続きをやるときにも役立つような仕組みを作れればいいなと思っていた。

昨年の10月頃に自分の開発案件がいい具合に収束したので、11月の頭から開発を本格的にスタートさせた。

新サイトの設計

まずは Adobe XD で下絵を書き始めた。僕は普段デザインはやらないけど、XDくらいは使えるようになりたかったので慣れるためにも作ってみた。

f:id:mjk0513:20190516161527p:plain
Adobe XDで下書き

例によって基本的には apple.com を参考に、どのような魅せ方がいいのかを考えて作った。 XDは使いやすくて簡単にプロトタイプが出来上がるのすごくいい。

なんとなくの方向性が定まったので、ここからコーディング作業が始まる。

構築

f:id:mjk0513:20190516162629p:plain

フロントエンドは Bootstrap + PHP + Vue.js で、バックエンドはPHPで書いている。 別のプロジェクトでVue.jsを勉強してて、その手軽さに魅了されて coderdojo-kashiwa.com でも一部使ってる。 ただ、その時点では大方の実装がPHPベースで終わっていたのでほんと一部なんだけど。

フロントエンドを基本的にやってくれた @maro が完全にBootstrapおじさんと化していた。気づいたらなんでもBootstrap使って実装してくれててすごい。

今回のようなインタラクティブなWebサイトはWordPressみたいなCMS使えばもっと簡単につくれるのはわかってるんだけど、自分たちの勉強も兼ねて1から作ってる。今回はこれが功を奏したような気がしてる。 特に、高校生の @hinata くんは今回の開発がまともなコードを書くはじめての大規模プロジェクトだったから、すごく勉強になったんじゃないかなと思う。 彼の凄いところは、2018年12月くらいからちょっとずつPHP勉強始めたのにもうゴリゴリ書けるようになってるところ。吸収力すごいし、プログラマ特有の勘というか、エラーでたときにここが原因じゃないかな的な推定がちゃんとできてるところもすごい。もう立派なエンジニアとして活躍できる。

成長で言うと、 @masaki も気づいたらフロントできるようになっててびっくりしてる。彼いわくなんでもできるマルチクリエーターになりたいらしい。できると思うよ。

4人のコントリビューションはこんな感じ。 f:id:mjk0513:20190516163043p:plain

いい感じだね👍

OnlineDojo

今回の課題の1つでもあった OnlineDojo 。実は2018年の前半にも作ってた。その時は coderdojo-kashiwa.com と分離した別のアプリケーションとして実装してたんだけど、どうにも最後まで詰め切ることができず開発が頓挫してしまった。 @kecy さんや @maro とほぼ毎日のようにコード書いてて、あれはあれでめちゃくちゃ楽しかった。今度は別のなにかを一緒に作りたいメンバー。

前回の反省から、OnlineDojo を coderdojo-kashiwa.com の機能の1つとして埋め込んでしまえばメンテナンスも楽だしいいんじゃないかと考えた。 headerやfooterを共通化して同じドメインで提供することで、CoderDojo Kashiwa の体験として一貫性があってとてもいい感じになりそう。 f:id:mjk0513:20190516163653p:plain

結果として予想していた通りになった気がする。 1度アカウントを作ってしまえば柏市内のどこの CoderDojo に行こうとも簡単に申込むことができるし、自分の学習ログを記載するようなポートフォリオと呼んでいる機能も使える。 ポートフォリオは病院のカルテのようなものをイメージしてもらえればいいと思う。自己申告カルテ。 いままでは、CoderDojo 柏 に来てくれた子が次の週に CoderDojo 柏の葉 に行ったときにそれまでやってたことがメンターに正しく伝わらなかったりする問題があった。これはあまりよろしくない。 ポートフォリオがあればメンターがこれまでその子が何をしてきたのかを見ることができる。それによってアドバイスすることがもっと増える。

f:id:mjk0513:20190516164435p:plain
メンターからその子の参加状況を確認することができる

一応テストはしてるけどまだまだこれから運用していく過程で出てくる不具合だったり不満点があると思うので、開発はまだまだ続く...これがアジャイル開発か。

やってみて思ったこと

今回書いたコードはかなり先のことを見通してわかりやすく簡潔になってるはずだし、設計も今後増えていくであろう様々な機能やコンテンツを見越してやっているので、メンテナンスしやすいサイトにはなっている(はず)。 はやくも追加したい機能がいくつかあって、はやくやりたいんだけど日々のタスクと相談しながらぼちぼちとやっていきたい👍

いま一番やりたいのは、Chart.js を使った統計情報の公開。 過去の分も合わせてかなりの数のデータあるので、いい感じに料理したら面白いことになりそう。

あとはメンターのdashboardのデザインが適当すぎる(BootstrapのCardを並べているだけ)なので、いい具合にリデザインして気持ちよく使えるようにしたい。

でも今回アップデートしていろいろなことを自動化したら日々のDojoでやる仕事のいくつかが無くなったので満足度はすごく高い。 通知系をSlackに一本化したのもうまく機能しそうな雰囲気がある。

とまあ長々と書いたけど、とりあえずサイトを見てください! 最後にもう一回リンク貼っておく笑

coderdojo-kashiwa.com

追記: 使い方を解説する動画も作った。

www.youtube.com

Special Presentation Day 2018 を開催した

f:id:mjk0513:20190318174022j:plain
集合写真

CoderDojo Kashiwa の年間成果報告会、Special Presentation Dayを今年度も開催した。
本当ならば12月にやりたかったのだが、直前の会場変更や学生の試験日程などなどゴタゴタしてしまって、結局3月の開催に。

今回は基本的に高校生を中心に運営をすることになり、裏テーマとして「脱宮島化」を掲げた。僕らの代がコミットするのは極力控えて、高校生だけでがんばってもらったわけだけど、結果としてすごくいいイベントになったと思う。

スタッフのみんなお疲れ様でした!

動画

今回も例年通り YouTube Live を行った。
www.youtube.com

ちょっとWi-Fiが不安定で途中動画が止まったりしちゃってるのですが、音声は入っていると思うのでご容赦を。

所感

例年作品のレベルが上がっている。普段の CoderDojo でもそれは感じるところではある。
ただ、内容が Scratch に偏っているので、やりたいと思った子に適切なツールを提示していきたい感じがする。

また、今回は柏市内のある小学校のコンピュータ部の子たちがゲストとして参加してくれた。
みんなレベル高い作品ばかりで素晴らしかったです👑

CoderDojo Kashiwa のミッションは、「市内のどこにいてもプログラミングを学べる環境を提供する」ことなので、学校とのコラボはもっと積極的に行っていきたい。

作品はこちらの Scratch スタジオから見ることができるので、ぜひ遊んでみてください。
scratch.mit.edu

Scratchのスタンプは基のスプライトのレイヤーにかかわらず一番したにつく

多くの方には自明のことだと思うのですが、Scratchのスタンプ機能はスタンプするスプライトのレイヤーに関わらず、一番最下層に付くんですね。
今日の CoderDojo で子どもに質問されていろいろ試したところ、結局レイヤー関係なかった。


f:id:mjk0513:20181216143849p:plain
Scratch 2.0 での例

f:id:mjk0513:20181216143535p:plain
Scratch 3.0 betaでの例

上記のプログラムでやりたいような、マウスがクリックされたときにコスチュームをスタンプしたい(上下関係を保ったまま)場合は、クローンを作るといいらしい。

f:id:mjk0513:20181216144055p:plain
Scratch 3.0 beta でクローンを作成

今まで知らなかったのでメモがてら。

vlogをはじめた

少し前からvlog(Video blog)を始めてみた。
普段から仕事の関係でいろいろなところに行かせてもらう機会が多く、今までは雑にTwitterにあげてたりしたんだけど、せっかくなら動画撮ってサクッと編集して公開したほうがおもしろいんじゃないかと前々から思ってた。

iPhoneXS Max を買ったことにより、今まで使っていた iPhone7 Plus が空いたので、DJIの Osmo Mobile 2 と組み合わせて動画撮れることに気がついた。

先日の北海道出張のときから本格的にやろうと思ってずっと回してみた。いきなりYouTubeに上げるのもハードル高いなぁとビビったので、まずはFacebookにあげてみた。
f:id:mjk0513:20181011234459p:plain

そしたらそこそこリアクションがよかったので、まあこれなら見せられるようなものかなぁと判断したので、ついにYouTubeに上げることにした。
というわけで、チャンネルがこれ。
www.youtube.com

いままで5本分撮ったんだけど、それらすべてYouTubeに上げました。
www.youtube.com

機材

vlogを始めるにあたって、一通り機材を揃えてみた。

①:DJI Osmo Mobile 2 & Manfrotto

f:id:mjk0513:20181011234732j:plain
www.manfrotto.jp
www.dji.com

Manfrotto の三脚は Amazon のタイムセールか何かで安く買えたような覚えがある。
後に出てくる2つの機材もこれつけてハンドグリップしながら撮ってるのですごい使い勝手が良い。

②:Cannon EOS M5

f:id:mjk0513:20181011235046j:plain
cweb.canon.jp


これはvlogをやろうと思う前に買った。ミラーレス一眼が欲しかった。
主に子どもたちとワークショップやってるときに撮ったりする用。最近ひとりの現場も多いから、講師しながら撮ってたりする。
でも毎日持ち歩いている(リュックの中に入れっぱなし)ので、風景も撮る。
f:id:mjk0513:20181011235216j:plain
f:id:mjk0513:20181011235237j:plain
f:id:mjk0513:20181011235304j:plain

いい感じ。もっと修行せねば。

③:GoPro Hero7 black

f:id:mjk0513:20181011235510j:plain

GoPro Hero7 black がこの前発売されたので手が滑ってしまった。
www.youtube.com

かなりいい感じで手軽に撮れるから、実はOsmo Mobileとか使わなくてもいいんじゃないかとか思い始めている。
まだ全部の機能を使いこなせていないので、もう少し実験重ねます。

④:Final Cut Pro

www.apple.com

編集はFinal Cut Proを使っている。もともとiMovieでやってたんだけど、ちょっと前に映像制作の仕事があったので学生用のProバンドルを購入した。
なんとなく iMovie でできていたことを Final Cut Pro でできるようにはなったけど、まだまだ奥深そうなのでもうちょっと考えてみる。

Adobe Creative Cloud にも入会しているので、 Adobe Premier とかもあるんだけど、弊チームは Final Cut Pro で編集してるからもう少しこいつに慣れてみる。

今後なにしたいの?

vlogは毎日撮るわけじゃない(そんなに時間取れない😅)けど、ちょくちょく上げていきたい。
YouTuber目指してないし収益化とかこれっぽっちも考えてないけど、何らかの形で機材投資代くらいは回収できればいいかなぁ。
とりあえず飽きるまで続けてみようかと思う。

DojoCon Japan 2018 を開催した #DojoConJP

f:id:mjk0513:20180828192259j:plain

DojoCon Japan とは、日本最大の CoderDojo コミュニティの祭典で、CoderDojo 関係者 (見守る大人、学ぶ子供) とその活動に賛同・協賛する人が全国各地から集まる大きなイベントです。
2016年, 2017年は関西での開催で、2018年は初めて関東圏での開催となりました。

そして、今年は実行委員長を拝命したので準備から当日までの動きをざっと書いてみます。

dojocon2018.coderdojo.jp

なぜ関東でやることになったのか?

2017年度の懇親会で、調布の石原さん、さいたまの岡嶋さん, 星野さんたちと、来年度は関東でやるぞと宣言してしまったことが大きなきっかけ。

2017が終わってから1ヶ月も経たないくらいに DojoCon Japan 2018 実行委員会が発足した。
確か2回目くらいのMTGで、僕が実行委員長やりますと宣言して本格的にやることになったような。

その更に数週間後には、会場となるサイボウズさんにもう見学行ってる。

そして3ヶ月後には具体的なリリースをようやく出せてる。


今回のイベントのテーマは「ひろがる plus one」でした。
これは僕が考えたものです。
DojoConを開催することで関西方面のCoderDojoコミュニティの広がりが凄まじいなと個人的に思っており、ぜひこの広がりを関東でも起こしたいと思ってつけました。
また、参加した人たちにとって少しでも何らかの学びや得るものがあればいいなという思いから"plus one"をつけています。

当日の様子

本当にたくさんの方々にご来場いただき、感謝感激です🙇
CoderDojo 関係者のみならず、久々にお会いできる方やSNSではつながっていたけれど一度もお会いできていなかったような方と実際に会えるのはとてもいいことだと思います。

f:id:mjk0513:20180828233447j:plain
f:id:mjk0513:20180828233506j:plain

当日の様子はこちらのムービーを御覧ください。
www.youtube.com
CoderDojo Kashiwa の映像チームがいつもどおりRTDで仕上げてくれました。

また、当日のセッションとインタビュー動画は 株式会社フランリベル さんが現在まとめてくださっているところです。
もうしばらくお待ち下さい。
franliber.co.jp


ここまではいつもどおりのイベントまとめ。ここからはやってみての感想や思いを書きます。

個人的感想とまとめ

まずは、実行委員長のみなさんに最大級の感謝とリスペクトを送りたいと思います。
今年の実行委員会は、初めて実行委員をやる人が全体の95%くらいだったということや、僕自身がこのレベルのイベントの主催をするのが初めてだったということもあり、かなりあやふやな部分がとても多かったなぁと思います。これは一番大きな反省点です。ノリでどうにかなることとならないことの線引がよくわかりました。
例えば、ScratchDay in Kashiwa や Special Presentation Day などのイベントは規模感も影響度合いも小さいので、その場のノリとテンションでざっと決めても実行しきれるけど、DojoCon Japan くらいの大規模なイベントになると関わってくる人数や影響範囲が格段に違ってくるので、考えなきゃいけないことが多いです。
僕自身本当に勉強になりました。そういう意味では僕自身もイベントを通じて plus one どころか、four も five も得られた気がします。

実行委員の皆さん、本当にどうもありがとうございました!!

また、僕に対して叱咤激励してくださった皆様にも、心から感謝申し上げます。

今回の DojoCon Japan 2018 をきっかけにして、関東圏のDojoがもっと親密になったり、関東圏にもっと CoderDojo が増えたりしたらいいなと思います。

来年はどうしようかなぁ。

福井に日帰り出張して、大学生と話してきた #NEST_Fukui

株式会社アフレルさんが主催されているイベントに登壇するため、日帰りで福井に出張してきました。

このエントリーは帰りの電車内で書いています。なぜ書いているかは後ほどわかる。

移動

本当は飛行機で行こうと思ってたんだけど、お金払うの忘れてて流れてしまった。

先日十勝に日帰り出張してからというもの、日本国内なら日帰りで行けるのでは🤔というアホな考えを持ってしまったので、今回のお話も快諾させていただきました。 次の日の朝からどうしても外せない用事があるのでしょうがない。

福井という場所は実に不思議な場所にある。今はまだ新幹線が開通していないので、電車で行く場合は滋賀県米原を経由するか、石川県の金沢を景趣するしかない。 今回は、せっかく1日で帰ってくるのでとことんネタに走ろうということで、中部地方をぐるっと一周するルートで移動することにした。

まずは東京駅で東海道新幹線にのって米原まで向かう。 f:id:mjk0513:20180625203416j:plain

そして、米原駅で特急しらさぎに乗り換え。

f:id:mjk0513:20180625203542j:plain しらさぎって結構古い列車なんだなぁ。

帰りは福井駅から金沢駅へ移動し、北陸新幹線で上野まで帰る。 ちなみに今は金沢駅のちょっと手前。

鯖江

メガネの街として有名な鯖江は、IT都市としてかなり有名。Code for Sabaeの活動が活発だったり、IchigoJam発祥の地であったり。前々から行ってみたかったので急遽立ち寄ることにした。

Hana道場という子どもたちや地域の方のためのITものづくり道場がある。CoderDojoの関係者としてはやはり立ち寄るしかない。 hanadojo.com

実は、2年前から関わっている茨城県堺町での高校生を対象としたアイデアソン事業で、Hana道場を拠点としているエルコミュニティの竹部さんと出会っており、前々からお誘いを受けていた。ちょうど竹部さんもいらして久しぶりにお会いできた。 f:id:mjk0513:20180625204106j:plain

次に来るときは子どもたちがいるときにしよう。一緒に遊びたい。

#NEST_Fukui

今回の主目的であるイベントは、アフレルさんが大学生を対象にしているもので、今回で第二回らしい。 テーマはIT系の社長と喋ろう!というざっくりしたもので、僕の他にはナチュラルスタイルの松田さん、lig.jpの福野さん、アフレル社長の小林さんという布陣。皆さん子どものためのプログラミング教育活動にかなりコミットされている方ばかり。 松田さんと福野さんはPCNをやられている。

直前に福井大学をうろうろして学生に宣伝したのが功を奏して、多くの人が来てくれた。

福野さんが作った コメント.net を使って、オーディエンス参加型のトークセッションになったのがすごくよかった。 http://xn--tckzb0d6c.net/

大学の情報教育がどうしてあんなにもつまらないのか問題とか、これからの日本どうなんだとか、多岐にわたる議論をさせてもらってとてもおもしろかった。参加者の皆さんもかなりコメントくれたのでいい雰囲気でした。

議論の中で、ブログをやってどんどん発信していこうという話が出た。その場でハッシュタグ #NEST_Fukui が決まり、みんなで書こうぜという流れに。だから出張報告をブログに書いてる。

最後に、参加者の皆さんに言いそびれたことを書いておく。

僕は大学生とか会社の社長とか社団の理事とかやってるけど、特にそこに固執しているわけではなく、好きなときに好きなことができる状態を確保したいなぁと思っているわけです。 その「好きなこと」も、巡り巡って誰かのためになるといいなと思ってやってます。 僕らの世代で、いい加減に昭和からの脱却を図らないとやばいなぁとも思ってます。 だから、みんなでやっていきましょう💪僕もがんばるので、皆さんもがんばってください!!!

ScratchDay 2018 in Kashiwa 開催レポート #SD2018Kashiwa

f:id:mjk0513:20180611103029j:plain scratchday-kashiwa.org

ScratchDay 2018 in Kashiwa 今年も無事に開催できました🎉 ご協力頂いたすべての皆様、ご参加くださったすべての皆様、ありがとうございました。

今年の振り返り記事は、僕がメインに担当していたセッションについて書きます。

セッション①:企業と教育はどうあるべきか

今回スポンサーとして参加してくださったアイオーデータの宮下さんをお招きして、「企業と教育はどうあるべきか」をテーマにトークセッションを行いました。 宮下さんやアイオーデータの皆様とは、今年に入ってから様々なイベントでお会いしており、今回はぜひ一緒にやらせていただきたいと思いオファーさせていただきました。 f:id:mjk0513:20180611133921j:plain

教育領域とIT領域の親和性を高めるためにはどうすればいいのかずっと考えているのですが、ユーザの声を聞くというのは当たり前のことだけではなく、お互いがお互いへのリスペクトを怠らないというのが大切だと思っています。 今回のセッションでは、まさにそのような話になりました。現場で使えるプロダクトをどうやってつくるかは常に課題としてあり続けているとのことです。

また、今のプログラミング教育がブームになっている現状についても企業の立場から意見を頂きました。私たちがいまやらなければならないことは、2020年を乗り越えることであり、プログラミング教育をブームではなく文化として残すくらいの気概を企業が持つことが大切だが、それができる企業がとても少ないことが問題だとのことです。 自分も正に同じことを思っています。2020年以後の業界はどうなるのか、楽しみでもあり怖くもあります。 最悪なシナリオが遂行されることのないよう準備していく必要がありそうです。

セッション②:学校とプログラミング教育

今年も、昨年度まで柏市教育委員会の副参事であり、今年度より柏市立手賀東小学校の校長先生になられた佐和伸明先生にご登壇いただきました。また、今年は柏市のプログラミング教育の中核を担っている柏メディア教育研究会の青木先生、露木先生にもご登壇いただき、それぞれの実践についてお話していただきました。

f:id:mjk0513:20180611135951j:plain

佐和先生からは、柏市でのプログラミング教育一般の話を。 柏市では、2017年度から市内にある42校すべての公立小学校でプログラミング教育をスタートさせました。昨年度やってみたところ、大多数の児童がプログラミングの授業にポジティブな反応を示していることがわかりました。この授業は総合的な学習の時間に行っているので、文部科学省が示しているような教科の中でのプログラミング教育は全学校でできていないのが現状です。メディア教育研究会では昨年度プログラミング教育の手引きに示されているA分類の内容を中心に研究授業をしてきました。次のフェーズは、これをすべての先生たちができるようにすることです。

青木先生からは、自身の学校で取り組まれている特設クラブ活動「コンピュータ部」についてお話いただきました。 青木先生の学校では、今年度から特設クラブ活動(中高でいう部活)としてコンピュータ部が発足しました。コンピュータ部なのですべてプログラミングをするわけではありませんが、かなり多くの部分をプログラミングをする時間にしているようです。小学生向けのプログラミングコンテストに出場することやWhy?大喜利に参加することを目標に、日々活動しています。 また、それ以外にも、運動会の案内をコンピュータ部が作ったり、校内の掲示物を作ったりするなど、コンピュータを使った様々な取組みをされています。 僕は個人的にこの案内を作るプロジェクトはとてもいいと思っています。コンピュータを使ってアウトプットしたものが、誰かの役に立っていることを体験するのは素晴らしいことです。

露木先生からは、教科の中でのプログラミング教育についてお話していただきました。 小学5年生の算数 正多角形の作図部分をやってみたところ、多くの児童が積極的に授業に参加し、お互いに教え合う姿が見えたとのことです。コンピュータ教室で行う授業が珍しいというのもありますが、やはりプログラミングが持つ力はかなりありそうだという結論に至りました。 また、電子黒板などのデジタル教材についても話がすすみ、デジタルとアナログの二項対立になることをやめなければならないという議論になりました。Information Technologyという意味で言えば、黒板だって紙だってITです。タブレットなどとの違いはテクノロジーの差です。お互いのいいとこどりをしてよりよい姿を目指していこうという結論に至りました。

セッション③:Lifelong Kindergarten の読書会

今年のScratchDayには絶対に欠かせないと思っていた、Lifelong Kindergartenの読書会。 タイムテーブルの都合上、少ししか時間を確保できなかったのですが、最も大切だと思ったエッセンスだけを抽出してお話しました。 iPad Pro に Apple Pencil で書きながらやったので、そのメモを公開します。 f:id:mjk0513:20180611140954p:plain f:id:mjk0513:20180611141033j:plain f:id:mjk0513:20180611141046j:plain f:id:mjk0513:20180611141100p:plain

僕はこの Creative Learning Spiral や4つのPといった考え方がすごく好きで、 CoderDojo や自分のワークショップでもできるだけ取り入れていこうとやっています。 4つのPを初めて知った時、これは完全に自分に当てはまると思いました。 Project, Passion, Peers, Play の4つを上手く獲得していくと、創造的な思考ができるというのはかなり納得できる部分が多いです。

その他

最後に打ち上げの様子を載せておきます。皆さん本当にお疲れ様でした! f:id:mjk0513:20180611141531j:plain f:id:mjk0513:20180611141609j:plain

そして、これでようやく地元系のイベントが終わったので、 DojoCon Japan 2018 の準備に本腰入れて取り組めます。 8月25日(日)は日本橋でお会いしましょう。 dojocon2018.coderdojo.jp