Tag Archives: Web

プログラミング教育に向けて 「Scratch」に触れてみる

一昨年から街中を歩くと、パソコン教室や塾などのスクールの看板などに「プログラミング」という文字の掲載が徐々に増えて参りました。また、ショッピングモールや団地の集合施設でもプログラミング教育のイベントが開催されている事もあります。

2020年度より、日本国内の小学校でプログラミング教育が始まり、プログラミング教育を実施する目的は、「論理的思考力や創造性、問題解決能力等(文部科学省の公式サイトの文章より一部引用)」を早い段階から育むことを目的としています。

そのため、必修化するプログラミング教育に備え、子供の習い事で今現在プログラミングが徐々に浸透してきています。

多くのスクールがプログラミング教育で使用している言語は、「Scratch」という言語です。

scratch_1

「Scratch」は、MITメディアラボが、プログラミング初心者に製作を通して、更なる学習意欲を持たせる事を目的に、構文の書き方を覚えることなく、インタラクティブアニメーションやゲーム、アート作品を開発することのできるヴィジュアル言語です。

「左に8歩移動」「右に20度回転」といった、ブロックをつなげるだけで実行することができ、遊び感覚のある言語になってます。

昨今、日本では「TECH KIDS GRAND PRIX」という小学生対象の開発コンテストでも応募対象となっており、「Scratch」でアプリを開発した受賞者も登場しました。

 

それでは、実際にScratchに触れてみましょう。

下記のURLにアクセスして「作ってみよう」を選択します。
https://scratch.mit.edu/

scratch_14

すると、Webブラウザ上でプロジェクトの画面が描画され、マシンにソフトウェアをインストールすることなく、すぐに使う事が可能です。

scratch_2

緑の枠のウィンドウが、チュートリアルの紹介しており、紹介通りにネコを動かして挨拶するプログラムを動かしてみます。

scratch_2

まず、画面左のコードより、実行するコードのブロックを真ん中の大枠にドラッグ&ドロップで運びます。

scratch_11

選択して運んだブロックを、下記のように繋ぎます。

scratch_15

ブロックが一旦完成したので、実行ボタン(緑のフラッグ)を押します。

scratch_16

すると、下記のように、ネコは「こんにちは」と挨拶して、コードのブロックの結果がスクリーンに反映されます。

scratch_17

では、次に少し自身でシチュエーションを考えてみて、要素を付け足してみます。今度は、キャラクターを2体にして、片方が挨拶したら、もう片方が挨拶を返すプログラムです。
画面右下の隅のアイコンより「背景を選ぶ」を選択します。

scratch_4

使用したい背景を選択します。今回は、「Boardwalk」という海のある背景を選択します。

scratch_5

次に、新しくキャラクターを追加します。画面右下の隅のアイコンより「スプライトを選ぶ」を選択します。

scratch_6

使用したいキャラクターを選択します。今回は、「Bear」を使用します。

scratch_7

すると、画面にクマが追加されます。あとは、2体のキャラクターをドラッグ&ドロップで適当な位置に移動させます。

scratch_18

また、クマがネコの方を向いていない場合、クマの「向き」を調整します。

scratch_19

「向き」をクリックして、左右反転のアイコンをクリックし、「-90」に値を調整します。すると、クマは、ネコの方を向きます。

scratch_8

画面を調整したら、各キャラクターにコードを追加してみます。
まず先にネコのコードを追加し、最後にメッセージを送るようにします。

scratch_10

次にクマのコードを追加します。ネコからメッセージが届くので、メッセージが届いたらクマのプログラムを実行します。

scratch_9

そして、実行ボタンを押すとプログラムを開始します。
初めにネコが歩き、その後クマを見つけて「こんにちは」と、挨拶します。
すると、クマは立ち上がって、「こんにちは」と挨拶を返します。

scratch_13

これで、プログラムは終了です。

他にも制御・演算コードなどで、計算、条件式、繰り返し処理のようなコードを追加することも可能です。

実際に触れてみて、プログラマーとしては初心に帰った気持ちとなり、
プログラムというのは、論理的な順番に基づいて処理を動かすというものをしっかり覚える事ができます。
また、まず画面のデザインもとてもわかりやすく、徐々に進めていく内に、
他のコードにも興味が沸くようになっていき、教育ソフトとしてかなり適した言語になっていると思います。

もし、プログラミング教育に興味を持たれてましたら、
Webですぐ簡単に扱う事ができるので、おススメです。

CAS-UBの経過とV5の計画

今日は、アンテナハウスの出版物制作サービスCAS-UBのこれまでの経過と今後の予定について紹介致します。

CAS-UBのPRサイト

CAS-UBは2011年にサービスを開始して以来、既に満6年を経過しました。現在のバージョンはV4.0ですが、近々CAS-UB V5とするべく鋭意開発を進めております。

CAS-UBの目標は、本の制作やページ組版についての知識がない人が、原稿を書いただけであとはできるだけ自動的に一定品質の出版物を作成できることです。CAS-UBサービス開始時点では、印刷物のためのPDFの作成、および、EPUB3とKindle形式の電子書籍制作機能が大きなテーマでした。

当初はPDFを街のプリントショップに持ち込んで、プリントオンデマンドで本にしていました。2016年頃から流通によるプリントオンデマンドが実用的に使えるようになってきました[1]。そこで、CAS-UBで制作した本をアマゾン、楽天ブックス、hontoなどのオンラインストアで販売開始しました。

オンラインストアは少部数の本を、在庫を気にせず気軽に販売できるという長所がある版面、購入者が実際に手に取って内容や現物を確認してみることができない、という欠点があります。技術書典のようなイベントでは実際に手にとってご覧いただくことができるというのが良い点です[2]。

さて、現在、V5の開発を勧めていますが、V5では主に次の機能を強化する予定です。

出版物オフラインテキスト形式(仮称)のインポートとエクスポート
現在のCAS-UBの編集作業は、ブラウザの画面で、クラウドサーバー上の出版物を対話的に操作します。出版物がいくつかの記事に分かれているとき、各記事のテキストを編集して保存し、次の記事に進む操作が必要ですが、これは若干まだるっこしく、また大きな出版物では通信の遅延が馬鹿になりません。そこで、編集中の出版物を丸ごとテキスト形式で取り出して、外部のテキストエディタで編集し、編集が終ったら戻すという出版物のオフラインテキスト形式を実用化します。実は、この機能は最初の頃からありましたが、今年になって販売済みタイトルのいくつかは、この方式で編集を実践しており、便利なことを実感しております。

現在、より使い易い物となるよう本機能を見直しております。

Webページ作成機能の強化
CAS-UBで編集した出版物はWebページとして作成できます。一年ほどまえから弊社の製品マニュアルの多くはCAS-UBで制作して、PDF、Windowsヘルプ(CHM)形式、Webページとして作成して公開しています[3]。

特に製品マニュアルや一般に公開する出版物はPDFやEPUBのみではなく、Webページとして公開するのが大変効果的と感じています。

但し、現在のWebページ作成機能は、レスポンシブなWebページを生成できないなど、まだ不十分なものです。そこで、今回はWebページ作成機能をさらに強化してレスポンシブなWebページ作成もできるようにします。実用的に使っていただけるようなレベルを目指したいと考えています。

ご期待ください。

【参考資料】
[1] 流通によるプリントオンデマンドでの出版が現実のものとなった今、その活用の課題を考える。(2017年1月時点)
[2] 10月22日 技術書典3参加報告
[3] 例えば、XSL-FO の基礎 第2版 – XML を組版するためのレイアウト仕様