レベルエンター山本大のブログ

面白いプログラミング教育を若い人たちに

BLOCKVROCKリファレンス目次はこちら

設計力で測る課題解決力

設計力は、課題解決力の一部です。

 

プログラミングを使って「設計」がうまくできるようにすることを目的にすると、結果として「課題解決力」が身につき、課題解決力が測定しやすくなると思います。


例えば、「おばあちゃんの安否を見守りたい」という課題を解決するカリキュラムを立てるとしましょう。

まずは一部に既存のシステム（例えば電話とか）が含まれるような設計でもかまいません。

プログラミングやコンピューティングからスタートせずに設計からスタートして解決策を上げていきます。

 

初めは、自分たちに考えられる手段で答えがまとまると思います。

「毎朝電話する」とか「毎日LINEでスタンプを押してもらう」とか。

 

その上で、効率を考えたり、異常パターンを考えたり、リスクを考慮したり、変なトラブルを切り分けたり、予測や仮説を立てたり、実測・実験してみたり。
一部のプロセスが、プログラミングによって解決するかもしれませんし、最終的にプログラミングの要素が全く無く、あるものの組み合わせで解決できることもあるかもしれません。

解決方法そのものではなく、効率、異常パターン、リスク、トラブルなどに対して考慮された設計力をポイントに評価すれば、すなわち課題解決力と言えるのではないかと思います。

 

プログラミング学習は、設計を学ぶ科目だと思う

若い人（特に子供）たちにプログラミングやコンピューティングを教えることの意義について、あれこれ行ったり来たりと考えた結果、その意義は「設計の力」を鍛えることを目的にするということで良いんじゃないかと現時点で思っています。

プログラムはそもそも設計図です。

プログラミング＝実装という言い方をされることもあるけれど、それは違っていてプログラミング＝設計であるということはプログラマーの中では、よく知られたことです。

では、設計とは、与えられた手段（ルールや部品）を使って、目的を具現化することです。

目的があって手段があるところに、プロセスを組み立てるのを設計と呼ぶことにします。

  

手段の数を増やさずに、目的までの組み立てかたに工夫をしてもらう
この設計の習得を目的とすると、いろんな手段を教えることよりも限られた手段で、複雑なものを設計してもらうことを重視した方が学びの効果が高いと思います。

 

これは、まだプログラミングそのものの面白さに興味が持てていないような人たちを対象とした話です。

スキルとしてのプログラミングも大変有意義なので、興味がすでにある人にはもっと具体的なことを教えることが私は大事だと思います。

 

簡易HTTPツール 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"
		integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
		crossorigin="anonymous"></script>
</head>
<body>
	<div>host:<input id="req_host" type="text" value="http://localhost:8080"></div>
	<div>path:<input id="req_path" type="text" value="/bookshop/ajaxtest"></div>
	<div>method:<input id="req_method" type="text" value="GET"></div>
	<div>
		message body:
		<textarea id="req_body"></textarea>
	</div>
	<div>
		<button id="req_button">送信</button>
	</div>
	<div id="response_disp">
	</div>
<script type="text/javascript">
$("#req_button").on("click",(e)=>{
	let host = $("#req_host").val();
	let path = $("#req_path").val();
	let method = $("#req_method").val();
	let body = $("#req_body").val();
	$.ajax({
		url : host + path,
		dataType: "json",
		method: method
	},body).then( e =>{
		console.log(e);
		$("#response_disp").append(JSON.stringify(e));
	}).catch( e =>{
		console.log(e.statusText , e.responseJSON)
		alert(e.statusText + " " + e.responseJSON);
	})
});
</script>
</body>
</html>

Scratch Blockly と Blockly とで違うところ(1)

Blocklyで作ったソフトをScratch Blocklyに対応させている、色々詰まるのでメモ。

 

1) Blocklyのツールボックスのカテゴリには必要な属性がなかったが、Scratch Blocklyには必須属性がある(colour・secondaryColourがないとエラー）そして、ID属性がないとクリックしてもスクロールしない

 

以下のカテゴリは正常に機能する
<Category id="test1" name="test1" colour="#FA8C1A" secondaryColour="#AB6E00" >

</Category>

 

2) 色のフィールドの変更

＊　FieldColourが現時点でうまく使えていない。Scratch Blocklyで新たに登場したFieldColourSliderで代用。

フィールドに色の名称(red , blue , blackなど）を指定できなくなった。CSSのカラーコード指定のみ。

 

Blockly 

　new Blockly.FieldColour("red");　　// Blockly OK . Scratch Blockly Error.

 

Scratch Blockly

　new Blockly.FieldColourSlider("#FF0000"); //  Scratch Blockly OK

 

 

■

1年が暮れる。この1年はレベルエンターという会社と自分にとって、とても実りの多い1年だった。

 

BLOCK VROCK というサービスを開始した。

産休明けの仲間の復帰を受け入れられた。

提携レベルの協業を実現できた。

障害児童向けのプログラミング教育を定期的に実施できた。

創業1年目に教えた教え子さんをアルバイトとして受け入れられた。

会社的な（経営的な）ピンチを乗り越えられた。

教え子が経営者になるかどうかの悩みを相談できた。

１２ヶ月分のScratchのゲームが作れた。

VCから投資の話が受けられた。

新しい教え子が高校生と新社会人でできた。

昔の教え子さんの結婚式に１次会から呼んでもらえた。

２次会もたくさん招いていただいた。スピーチもさせてもらえた。

たくさんの教え子さんたちと飲んだ。

 

新しく起業した会社のCTOになれた。

BLOCK VROCKを中心にしたイベントを大成功できた。

教え子や社員に任せた仕事が大成功した。

社員が思った以上に成長した。

BLOCK VROCK Version 2を用意できた。

アルバイトの仲間が増えた。

賞与をとりあえず出せた。

 

創業当時には思いもしなかったことや、当時目標や夢だったことが、徐々に実現していってる。

来年はどんな年になるか楽しみだ。

Swiftのちょっとしたメモ

PlayGroundでHTTP通信

import UIKit
import PlaygroundSupport

PlaygroundPage.current.needsIndefiniteExecution = true

let session = URLSession(configuration: .default)

var urlComponents = URLComponents(string: "http://localhost/json")!

urlComponents.query = "method=get"

let url = urlComponents.url!

let request = URLRequest(url: url)

let task = session.dataTask(with: request) { (data, response, error) in
    guard let data = data else { print("HTTP通信でエラー"); return  }

    let json = String(data: data, encoding: .utf8)!
    print(json)
}
task.resume()
session.finishTasksAndInvalidate()

オートレイアウトをコードで実装する

import UIKit

class ViewController: UIViewController {

    var sampleView: UIView!
    
    override func loadView() {
        super.loadView()
        sampleView = UIView(frame: .zero)
        sampleView.backgroundColor = UIColor.red
        sampleView.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(sampleView)
        
        let sa = self.view.safeAreaLayoutGuide;
        sampleView.centerXAnchor.constraint(equalTo: sa.centerXAnchor).isActive = true
        sampleView.centerYAnchor.constraint(equalTo: sa.centerYAnchor).isActive = true
        sampleView.topAnchor.constraint(equalTo: sa.topAnchor,constant: 10.0).isActive = true
        sampleView.bottomAnchor.constraint(equalTo: sa.bottomAnchor,constant: -10.0).isActive = true
        sampleView.leadingAnchor.constraint(equalTo: sa.leadingAnchor,constant: 10.0).isActive = true
        sampleView.trailingAnchor.constraint(equalTo: sa.trailingAnchor,constant: -10.0).isActive = true
    }

    override func viewDidLoad() {
        super.viewDidLoad()       
    }
}

URLカスタムスキームでのアプリ連携

プロジェクトの設定、 info -> URLTypes -> URL Schemes 　「myapp」(://とかはいらない）

呼び出しボタンのアクション接続などで

let url = URL(string: "myapp://")!
let app = UIApplication.shared
app.open(url , options: [:] ,completionHandler: nil )

Node.js/Expressサイトを、AWS EC2からfirebaseに移行

コーポレートWebサイトを firebaseに移行しました。

もともと、静的ページで AWS EC2のWindowsサーバにホスティングしていましたが、

色々とメンテナンス性が悪くコストも高いので、段階的にnode.js/Express 化してfirebaseに以降、今週日曜日に移行が終わったので書きます。

 

できればあとで、参考リンクはやめて手順としてまとめます。

 

静的ページをNode.js Expressに移行することについては、割愛。

EC2上で、単なるNode.jsのサービスとして80ポートに公開していたサイトの移行です。

 

 

1.firebaseのアカウントを作る

2. firebase のプロジェクトを作る

3.ローカルの環境作る

 

ぐらいまでは以下のQiitaで調べたら特に詰まることなくできます。

簡単にできることを実感でき、firebaseの好感度が上がります。

qiita.com

 

＊リアルタイムデータベースまではやりません。

 

6. Nodeの環境を作成する

7. 旧サイトをfirebase functions の形式でローカル実行する

 

これは以下のQiitaを参考にしました。

qiita.com

 

動くところまでハマりませんでした。

 

ちょっとハマったのは、デプロイです。

8.firebaseにデプロイする

エラーメッセージで「dependencies」にexpressが入ってないと怒られました。

ローカルではnpm i -Dで依存ライブラリをsaveしていたので「devDependencies」にはいっていいました。

firebaseがきちんと怒ってくれていることに気づかず、いろんなことを調べてしまいました。

エラーメッセージを額面通り受け取れなくなったのは主にMicrosoftさんのせいだと思っています。

 

9. リライトの設定

firebase functionsは、RESTなAPIを作ることがメインなのでhostingするには冗長なURL構成になります。

firebase.jsonでリライトの設定をすることで、https://ホスト名/以下がnode.jsの呼び出しと一致するようになります。

{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
,"rewrites": [
{
"source": "/**",
"function": "app"
}
]

},
 

"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
],
"source": "functions"
}
}

 

以下のNode.jsのappを/**に当てはめるというリライトの記述です(/*だとホスト名以下１階層しか見てくれない）

exports.app = functions.https.onRequest(app);
でexportsのappに、書き出したfunctionsのオブジェクトが、URLのリクエストに応答してくれます。
 
10.　imageやcss/jsなどのリソースの配置
　hosting 配下のpublicなどにcssやjs,imgなどは配置します。(functions側 のpublicに置きがち）
 
11.  DNSを書き換えます。（firebaseのhostingにある「ドメインの接続」にしたがってやる）
 　→ちょうど２時間待たされたので、ドキドキした。
 
以上です。