10才からはじめるゲームプログラミング図鑑

表題の書籍を読みました。子ども向けのスクラッチ入門です。
小学校のプログラミング教育必修化ということで、私もいつか子どもに教えたいと思い、興味を持ちました。

8コの異なるタイプのゲーム作成しながら、スクラッチを学ぶという内容です。段階的に新しいことに触れられるようになっていて、構成が上手いです。
普段は、ゲームプログラミングなどしないので、新鮮な気持ちで学べましたが、10才の子がこれをどう理解するのかまでは、想像が及びませんでした。
書籍のプログラムを公開しましたので、どんなものか気になる方は、見てみてください。こういうのが、作れます。

scratch.mit.edu

書籍はスクラッチのバージョンが2.0で書かれているのですが、現在、バージョンは3.0になっていまして、ブロックの書き方が多少異なるところがあるので、書き方で困っている方に参考になるかと思います。
と思ったら、バージョン3.0対応版が出ているではないか!

なんてこったい。こっちが欲しかったな、、

クラッチは、ゲームを作るための仕組みが豊富に用意されていて、自由度が高く、2Dのものなら、なんでも作れそうなくらい。
ブロックという命令をつないで、プログラムを作っていくので、プログラムに馴染みのない人にはわかりやすそうですが、プログラムに馴染みのある人には、テキストのプログラムと違って、検索ができないから、可読性どうなの?とも思いました。処理をスプライトごとに作るので、複雑なものは読める気がしないなあと思ったり、、
あとは、SNSにもなっていて、自分の作成したものを公開して、コメントをもらったり、フォローしたり、交流も盛んに行われているのも面白いですね。私も早速、中学生と友達になりましたよ。

本がなくても十分に学べそうなほどに、公式ページのチュートリアルも超充実。

scratch.mit.edu

しかし、膨大な作品が公開されていますね。どうやってこの中から面白いものを見つけるのだろう、、
とりあえずの仕組みは理解したので、オリジナルの作品を作って、公開したいと思います。

ポケモンずかんを作りました

最近、娘、息子がポケモンばかり観ていまして、仲良くするためにどんなものかと調べていたら、オープンデータがあったので、自分で「ポケモンずかん」を作ってみました。

 

・興味を掻き立てられる参考記事

ポケモンはみんなに愛されているんだなーと再認識。

qiita.com

 

ポケモンオープンデータ

↑の紹介記事からこれを選びました。jsonデータと画像データがあります。

github.com

 

・私が作ったポケモンずかん

141-lab.com

 

今回、利用したライブラリなど

cssリセット

necolas.github.io

 

cssフレームワーク

yahoo!さんが開発。シンプルで好き。

purecss.io

 

・htmlテンプレート

データをhtmlに簡易に埋め込めるんだけど、こういうのはもうvue.jsでよいのではと思ったり。

pure-js.com

 

・アイコン

fontawesome.com

 

・http通信

これは有名なやつなのかな。

github.com

 

ツールチップ

jQuery依存のツールチップが結構あり、非依存で探して良さげだったやつ。

atomiks.github.io

 

・スクロール

エレベーターという名前が面白いね。

tholman.com

 

以上です。

セレクタはquerySelectorを使い、ajaxはaxiosで、もうjQuery使うのはやめようと思ったら、jQuery依存ライブラリというのがたくさんあって、使える非jQuery依存ライブラリをまとめたらよいのではないかと思いました。jQueryって、そんなに積極的に使いたくないですよね?

 

ポケモンずかんは、公式サイトの情報量が素晴らしいので、断然こっちを見たほうがよいです。私は、今回、ポケモンずかんを作って、ポケモンの属性は最大2ということと、世代があるということを覚えました。

zukan.pokemon.co.jp

tileを使ってみました

前の会社を辞めたときに、同僚からtileをいただきまして、使い始めましたので、その使用感を報告します。(島田くん、みているかい?)
tileは、スマートトラッカーといって、失くしたくないものに一緒に付けておくと、スマートフォンからそれがドコにあるかわかるというものです。
いかにも、IoTって感じですよね。米国でシェアNo.1なのだそうで、よいものをありがとうございました。

thetileapp.jp

 

tileでできること
スマートフォンからtileの音を鳴らす
・tileからスマートフォンの音を鳴らす
・最後に検知した場所を表示
・他のユーザに探してもらう
 
仕様としては、Bluetoothで30m以内が探索可能な範囲なので、鍵や財布など、近くにあるはずだけれど、ドコに置いたっけ?みたいなものに付けておくようです。
また、Bluetoothの範囲を超えてしまった場合は、最後に同期していた場所が分かるようになってるので、探し物が最後に同期していた場所から移動していなければ、辿ることができます。
さらに、それでも見つからない場合は、他のユーザに探してもらうことができるようですが、それが財布だった場合、帰ってくるのでしょうか?どれだけの人が探してくれるのでしょうか?
モラルやユーザ数の問題があるのではないかと思います。

 

私は、鍵も財布も同じ場所に置きますし、失くすようなこともなく、恩恵がないかなと思い、思い切って子どもに付けてみました。
息子3歳、云うことは聞かず、ちょこまかと動き回り、迷子になることしばしばという困った年ごろです。
 
紐をつけて、首かけスタイル(普段は服の中へIN)

f:id:nby2ki:20190311231117j:plain

 

スマートフォンから位置確認

f:id:nby2ki:20190311231311j:plain


範囲が30mなので、本当にドコかへ行ってしまうと探しようがないのですが、ショッピングモールなど、人ごみの中、ちょっと見失ってしまったというような場合に、場所が分かり、迷子を阻止することができました。
出かけるとき、少し安心。

 

GPSだと便利なんですけどね、GPSのサービスは月額利用料がかかります。

本当に、子どもの見守りをする場合は、こういったサービスを利用します。

tileは手軽に利用できますね。

vue.jsでwebアプリケーションを作った

以前、ruby on railsで「午後ローデータベース」というwebサイトを作成したのですが、これをvue.js + laravelで、SPAとして作り直しました。

gogoro.141-lab.com

 

以下のライブラリを利用しました。

・フロントエンドフレームワーク

vue.js

jp.vuejs.org

 

cssリセット

CSS Tools: Reset CSS

 

cssフレームワーク

Kube CSS & JS Framework

 

・トースト通知

github.com

 

・アイコン

fontawesome.com

 

webフレームワーク

laravel.jp

 

vue.jsを利用した感想としては、処理がシンプルに記述でき、コード量がかなり少なく済んだことが、一番印象に強いです。htmlタグにvue.jsの機能を属性として書いていくのですが、従来の作り方だと、イベントを拾って、domを丸ごと置き換えていくようなところを、vue.jsでは、domの構造をそのまま記述できるので、プログラムの見通しがよくなり、この新しさは、作っていて、単純に面白かったです。あと、フロントエンドフレームワークは、Angularを少しやったことがあるんですが、それと比較して、とても分かりやすいというところも、よかったので、気に入りました。今後も使っていきたいと思います。

 

ニッチな情報を取り扱っているので、アクセスの少ないサイトなのですが、web apiも公開しましたので、みなさま、ぜひ利用してください。

統計ダッシュボードAPIの活用

埼玉県三郷市の統計データをグラフ表示するアプリケーションを作成しました。

 

三郷市の統計

 

総務省統計局のサービス「統計ダッシュボード」の公開APIを使って、データを取得しています。

「統計ダッシュボード」は、グラフ表示できるデータが予め整理されていますが、このサイトからは、存在するデータ全てをグラフ表示することができます。

地域が、埼玉県三郷市なのは、私が住んでいるからです。

 

ライブラリの構成は、先日、作成した「統計ダッシュボードAPIテストフォーム」と同じで、グラフ表示は、highchartsを利用しました。

se-diary.hateblo.jp

 

www.highcharts.com

 

highchartsは、簡単にきれいなグラフが描けて、素晴らしいライブラリでした。

商用でなければ、無償で利用することができます。

本家サイトのグラフ表示はd3.jsを使っていて、かなりプログラムが作りこまれているようでした。

統計ダッシュボードAPIテストフォーム

総務省統計局が扱う主要データを提供する「統計ダッシュボード」というサービスでAPIを公開していて、何か活用できないかと、ひとまずAPIのテストフォームを作成しました。

 

統計ダッシュボードAPIテストフォーム

 

htmlベースです。以下を利用しました。

 

purecss.io

yahoo!が提供するcssフレームワーク

シンプルで好み。

 

jquery.com

ajaxするので、使いました。

 

dimsemenov.com

ポップアップのライブラリ。

デザインがシンプルで、使いやすかったです。

 

 

Toastr by CodeSeven

トースト通知のライブラリ。

これも、デザインが気に入りました。

 

riotで入力部品を分割したかったのですが、描画タイミングが掴めず、描画前に値を読めない、イベントの設定ができないなど、上手くいかず、コンポーネント系は、勉強していきたいと思います。

PHP開発をスピードアップする、CI(継続的インテグレーション)とCD(継続的デリバリー)+グローバル開発

CI、CDの勉強会に参加してきました。

osslabo.doorkeeper.jp

 

株式会社コウェルというベトナムのオフショアを得意とする会社が主催する勉強会で、CI, CDの概要、オフショア、PHP開発についての内容だったのですが、実体験を踏まえたものになっていて、興味深かったです。

 

気になった点をメモ。

 

■CIの導入について

自動テストの導入はコストがかかるので、プロジェクトの途中からはできなかったと、難度の高さが伺えたが、ビルドやデプロイの導入であれば、それほど難しくはなく、おすすめであるとのこと。

30分の作業が5分に短縮され、ヒューマンエラーもなくなったそう。

 

■Laravel Homestead

Laravelの開発環境を含んだLaravel公式のvagrant box。

株式会社コウェルでは、ベトナムのオフショア開発を行っていて、vagrantをhomesteadで構築して、開発環境を統一していたとのこと。PHP開発のフレームワークは、Laravelの実績が最も多いそう。

 

・マニュアルのhomestead

Laravel Homestead 5.1 Laravel

 

vagrant boxのhomestead

app.vagrantup.com

 

 

■Laravel Dusk

テストの自動化について、画面はどのようにテストしているか質問したら、Laravelに画面テストの機能が備わっていると教えてもらった。

たぶん、Laravel Duskのことではないかと思う。

「From Dusk Till Dawn」っぽい名前がいいね。

 

・マニュアル

ブラウザテスト(Laravel Dusk) 5.4 Laravel

 

あと、キーワードとして、ヘッドレスchromeとも云ってました。

ブラウザを使わないブラウザテストができるようです。

developers.google.com

 

弊社では、継続開発案件が少ないので、導入コストが障壁になる。

あと、やってくれそうな人もいないのだけど、なんとかやれないかな。