プログラミング雑記

プログラミングが趣味のだらだら学生。自作したプログラムの紹介やいまハマってることなんかを適当に書いていったりいかなったり

プログラミング教育に新風を巻き起こ(したい)すシステム公開!

 

はじめに

子どもやプログラミング初学者向けのプログラミング学習支援システムを作っています。

初めてプログラミング学習をする人には、ビジュアルプログラミング言語を用いて視覚的にプログラムを組めるようにするのがとっつきやすく学習を始めやすいと思いますが、主流なプログラミング言語はほとんどテキストで記述する形式ですからいずれはVPLから脱しないといけません。

 

techacademy.jp

 

そこで、ビジュアルプログラミング言語とテキスト記述形式の言語の間でリアルタイムに変換できるシステムを現在作成しており、メインとなる機能が実装できたのでα版として公開したいと思いました。以下が全体像となんとなくの使い方です。

 

https://niishi31.tumblr.com/post/178949323589

niishi31.tumblr.com

 

https://niishi31.tumblr.com/post/178949561624

niishi31.tumblr.com

 

github.com

 

今回の記事では技術的なところには触れず、今回作成しているシステムの特徴について書いていきます。

 

 

特徴

テキスト/ブロック間のリアルタイム変換

ブロックからテキストへの変換は数多くあります。Blocklyでもデフォルトで備わっている機能です。しかし、テキストからブロックへの変換はあまり例がありません。特に、リアルタイムに変換を行えるようにしているものは私が知る限りありませんでした。

私が今回作成しているシステムではブロックからテキストはもちろん、その逆のテキストからブロックへのリアルタイム変換も可能にしています。

 

https://niishi31.tumblr.com/post/178907795694

niishi31.tumblr.com

 

同一システム内、同一画面内にテキストとブロックの両表現を取り入れ、その間を連携させることによりプログラミングを初めて学ぶ人はブロックから学習を始め、テキストでの書き方を学び、徐々にテキストでのプログラミング学習へ移行することができます。また、ブロックでのプログラミングの仕方はすでに知っている人でも、慣れたブロックからテキストへの学習移行ができます。

 

ブロックエディタでテキスト記述が利用可能

ブロックでプログラミングをしているときに一番わずらわしいのは、一々ほしいブロックを探し出し、エディタにもってきて、今あるブロックと接続しなければいけないことだと考えています。例えば、(1+2*3)/4という計算をプログラムで書きたい場合、タイピングしてしまえばあっという間です。しかし、これをブロックで記述しようと思ったらとても大変です。数字を記述するためのブロックを4つと演算子ブロックを3つ持ってきて、それぞれ数字ブロックなら1や2や3や4をタイピングし、演算子ブロックなら+,*,/を選択しなければいけません。最後にその7つのブロックを組み合わせなければならずとても気の遠くなるような作業です。

そこで、このような明らかにテキストで記述できるものはテキストで記述してしまおうということでブロックエディタ上でもテキスト記述ができるようにしました。

 

https://niishi31.tumblr.com/post/178907549392

niishi31.tumblr.com

 

これはブロック表現とテキスト表現間の中間表現に位置すると考えていて、いきなり全部をテキストで記述するのではなく、まずは一文からテキストにチャレンジするようなイメージです。

 

JavaScriptのほぼすべての文法に対応

JavaScriptのほとんどの文法が使えるようになっており、ブロックへ変換できるようになっています。ArrowFunctionやLiteralの正規表現など、自分があまり普段使わない文法は実装していないのですが、これから実装する予定です。これほど多くのJavaScriptの文法に対応しているVPLもないのではと思っています。

どれくらい対応しているのかイメージする例として、テキストからブロックへの変換するソースコードを1,000行強書いたのですが、それが全てブロックに変換できるレベルです。(もちろん、変換されたブロックがどんな複雑なことになっているかについては触れません……;;)

 

ライブプログラミング

初学者にとっても大事なのはフィードバックの速さだと思っています。自分がプログラムに与えた変更が実行結果にどう影響を与えるのかをすぐにわかった方が良いと考えています。そこで、このシステムではライブプログラミング、つまりソースコードに変更あるとプログラムを再実行する機能、を取り入れています。

特にこのライブプログラミングは、p5js(Processing)のようなグラフィックを操作するプログラムと相性が良いため採用しています。

 

https://niishi31.tumblr.com/post/178944664473

niishi31.tumblr.com

 

ライブプログラミングがあると教える側としても、プログラムを変更しながらそのまま実行結果に与える影響を教えられるため、実行ボタンを押して実行画面が出てその様子を確認してなどのタイムラグがなくなり教えやすいのではと考えています。

 

(ある程度の)エラーに対応(実装中……)

こちらは鋭意開発中なのですが、ソースコード中に構文エラーがあってもある程度ブロックに変換できるようにしています。システムの裏側の話になってしまうのですが、ソースコード中に構文エラーがあるとブロックには普通は変換できないのですが、ブロックとともに開発しているとこのような構文エラーは多く起こる可能性があります。

 

f:id:kirari0831:20181011223650p:plain

 

例えば、矩形を描画するブロックrectをブロックエディタ上に持ってきたとしましょう。そうするとテキストエディタ上にはrect( , , , );が挿入されることになります。この一文のせいでほかの正常なソースコードもブロックに変換されなくなってしまいます。こうならないように、裏で色々ごまかしながら構文エラーがあってもある程度に動くようにしています。現在、これに手を付けたばかりで実装はまだ進んでいないのですが、これからもっと深く扱っていく予定です。

 

注意

まだまだブラッシュアップできていない部分が多々あるので「うまくいく」ように使ってあげないといけません……

setup()やdraw()の書き方

p5jsの多くのサンプルは

 

function setup(){

}
function draw(){

}

と書くことが多いと思います。

 

しかし、ライブプログラミングを動かすために、

 

setup = function(){

};
draw = function(){

};

のように書くようにしてください。

 

取ってくることのできないブロック

画面左にあるブロック一覧からブロックを取ってくることができるのですが、現在ブロックを作ってはいるもののブロック一覧に登録していないブロックが多々あるので取ってくることのできないものがあります。これに関してはやればすぐに対応できるのでブロック作成が落ち着いたところで一気にやってしまいたいと思います。

まとめ

ビジュアルプログラミング言語とテキスト記述言語の間に連携をとり、ブロック言語からテキスト言語へのスムーズな学習移行を図るシステムを作成しています。中核となる機能であるブロックとテキストのリアルタイム変換が実装できたので公開することとなりました。注意にも書いたのですが、まだブロックの整理ができていないのですが、もしこのシステムを使いたいという方がいらっしゃればブロックの整備もすぐにいたしますのでコメントをくだされば、と思います。

 

 

Atomをピカチュウ色に!ピカチュウテーマを公開しました

Atom向けのカラースキームとしてピカチュウテーマを公開しました。

 

atom.io

 

f:id:kirari0831:20180604153217p:plain

 

見た目はこんな感じ。黄色が主体なのでコーディング向けとは到底思えませんがピカチュウがかわいいので気分転換くらいに使用してみてください。UIはAtom material UIがおすすめです。

 

 

最近Hyper™というターミナルにハマっているのですが、このHyperにはポケモン色に染める

Hyper Pokemon - Tailor-made Pokémon themes for your Hyper terminal

こんな興味深いテーマがあってAtom向けにも欲しいなあと思って作ってみました。

まさか全ポケモンverは作れませんが、ピカチュウだけとりあえず作成し公開してみました。

 

レッツゴーピカチュウとレッツゴーイーブイが発表されたばかりなので、イーブイverも作ってみようかな~

Processingでビジュアルプログラミング言語を自作するpart1

  • はじめに
  • 実装
    • ①ブロックの見た目をつくる
    • ②ブロックを移動できるようにする
    • ③ブロックをくっつけさせる
    • ④ブロックの接続関係をもたせる
  • まとめ

 

はじめに

本記事ではProcessingで簡単なビジュアルプログラミング言語を作るのを目的に、ソースコードをあげながら作り方の解説を行っています。今回は第1回目ということで一番基本となるもっとも単純なブロックの作り方について取り上げています。

ビジュアルプログラミング言語(VPL)

小中学生向けであったり、プログラミングを初めて学習する人でも簡単にプログラミングができるように、プログラムの命令を視覚的に表現したプログラミング言語のこと。

多くはプログラムの命令をブロックで表すものが多い。

主流なビジュアルプログラミング言語としてはScratchが挙げられる。またビジュアルプログラミング言語の作成を支援するBlocklyというGoogleの作ったライブラリも広く知られている。

 

Processing

Download \ Processing.org

もしダウンロードされてない方は上記のサイトからダウンロードをお願いします。

今回はこのProcessingを用いてビジュアルプログラミング言語に用いるブロックを作っていきます。

 

実装

①ブロックの見た目をつくる

まずはブロックを描画するところまで書いていきます。

以下のソースコードを打ち込むなり、コピペするなりしてください。

細かい点についてはコメントで説明しているので、随時読んでみてください。

 

続きを読む

Atomのおすすめテーマまとめ2017&自作テーマがFeatured Theme入りした話!

 

この記事はAtom Advent Calendar 20172日目の記事となっています。

2年連続2回目の投稿となります。

qiita.com

 

今回は2017年に新たに公開されたテーマのおすすめと自作テーマがFeatured入りした話をしようと思います。

 

いつものようにおすすめテーマを紹介する前に一つご報告があります。

ついに念願のAtom公式Featured Theme入りを果たしました!Featured ThemeというのはAtom公式がおすすめしているテーマのことで、公式ホームページのTheme上部で常に掲載されるようになります。

f:id:kirari0831:20171129144927p:plain

 

画像でみてもわかる通り今回Featured Theme入りをしたテーマはAtom-Eclipse-syntax。あれっ?pear-dark-sytntaxじゃないの?(´;ω;`)

実はこのatom-eclipse-syntaxはEclipseに似たようなテーマを作ってやろうというネタ重視で作ったテーマであまり見栄えとかは気にしてないものなんです。

最近Javaを書くことが多かったのでEclipseに似せたテーマを作りたかったのですが、Atomの場合ローカル変数かメンバ変数か見分けられないですし、完全に同じにすることもできず、また色を全く同じにしてもEclipseAtomだとなぜか見え方が違ってAtomの方は少し汚い感じになるしで中途半端な作品なのです。ただ、せっかく作ったなら公開するかって感じで公開したらまさかのFeatured入り。驚きとうれしさと申し訳なさといろいろな感情が混じったような感じでしたね。

Featured入りをするなら真剣に作ったpear-darkの方を載せてほしかった……

 

f:id:kirari0831:20171129145939p:plain

 

これがAtom-Eclipse-syntaxですが、これは結構「よく見える」部類のイメージ図で実際使ってみるとコレジャナイ感を持つはずです。現在3500インストールされていますが、インストールしたほとんどの人に失望感をもたらしたのではないかと思います。

 

それでもやっぱりFeatured入りして日に日にインストールが増えていくのはうれしいと思う俺であった……m(__)m

 

おすすめテーマ2017

それでは気を取り直して本題である、

2017年に出たテーマの中からおすすめしたいテーマを上げていきたいと思います。

 

monokai-neo-syntax

f:id:kirari0831:20171129150654p:plain

今年一番おすすめしたいテーマはこちら!

大人気テーマであるMonokaiの派生テーマであるmonokai-neo。

これは今年一番というか今までで一番おすすめしたいテーマです俺の中の歴代一位。Monokaiのあの色合いはそのままに全体的に柔らかい色調になっています。オリジナルのはかなりどぎつい感じなのですが、こちらのneoの方はそれが緩和されておりいつまでも見られるような感じであり長時間の使用に向いています。自分はパステルカラーが好きなのでMonokai+パステルという好きなものの組み合わせでできているこのテーマはすぐに気に入り、これが公開されからはほとんどこのテーマを使っているくらいです。インストール数は350くらいなのですがもっと知られていいテーマだと思います。

 

monokai-neon-syntax

f:id:kirari0831:20171129151505p:plain

これはmonokai-neoの派生テーマであるmonokai-neo"n"です。そう、このテーマは自分があまりにmonokai-neoが好きすぎてリスペクトの意味もこめて作ったテーマなのです。

完全にダジャレなわけですがneoとは全く同じ色を使い、shadowを文字にかけることによって文字が発色しているように見せているテーマです。まさにネオン!ノートパソコンのような小さい画面だとあまり発色しているように見えないのですが、デスクトップパソコンくらいのモニターになるとかなり発色しているのがわかるはずです。どうせならこれをFeatured Themeに入れてほしかったくらい気に入ってる作品です。皆さんもmonokai-neoとあわせてインストールしてみてください!インストール数は160.

 

ariake-light-syntax

f:id:kirari0831:20171129152200p:plain

前回の記事で紹介したariake-light-syntaxのライトバージョンですね。作った人はオリジナル版とは別なのですが中々いい出来です。Atomはライトテーマが中々見づらいことが多いのですが、このテーマは目も疲れにくく視認性も高いテーマになっています。ライトテーマが良いという方はぜひインストールしてみてください。インストール数は271。

 

pochinki-syntax

f:id:kirari0831:20171129152543p:plain

真っ黒すぎない背景に真っ白すぎない文字色、自分はかなりこういう系統のテーマが好きです。目が疲れにくいから。monokai-neoなどもこのパターンですね。

そんな最近はやりの組み合わせに赤とオレンジの新たなハイライト色を持ってきたテーマです。赤とオレンジが映える以外は少し背景と同化してしまい文字の見えやすさは少し劣ってしまうのですがきつい感じがないのでトントンなのかなという感じです。インストール数は60。

 

ninja-atom-syntax

f:id:kirari0831:20171129153021p:plainf:id:kirari0831:20171129153024p:plain

名前に惹かれてインストールしてみたようなテーマですね。色合いはかなり好きなタイプですし、特にHTMLのサンプル画像なんかかなり綺麗に映っていて気に入ってるテーマの一つなのですが、ninja-atom-syntaxと言いつつ色合いからはあまり「忍者」感は感じられないという罠。

王道系の色合いに少し変化球を織り交ぜたテーマなので万人受けすると思います。ぜひともインストールしてみてください。インストール数は200弱。

 

photon-light-syntax

f:id:kirari0831:20171129153507p:plain

ライトテーマはライトテーマでもメルヘン系のライトテーマですね。以前の記事でも、いくつかメルヘン系は紹介しましたがそれ系統のテーマになっています。メルヘン系のいいところは背景が明るすぎず、文字色が鮮やかで目立つところでしょうか。自分の環境だと真のライトテーマは明るすぎて使えないことが多いのですが背景が落ち着いたこういうテーマはかなり使い勝手がいいです。Atomのライトテーマで悩んでいてる人はぜひともインストールを。インストール数は400強。

 

challenger-deep-syntax

f:id:kirari0831:20171129153942p:plain

f:id:kirari0831:20171129153954p:plain

もともとはEmacsのテーマだったものをもとに作られたテーマ。色合いは基本に忠実なのですが、全体的に背景に対して明るめ。コントラスト強めなのがお好きな方におすすめしたい一つ。賑やかな感じが好きなテーマです。(あと上の画像も好き)

インストール数は56.

 

city-lights-syntax

f:id:kirari0831:20171129154545p:plain

最初に言っておくと、このテーマは個人的にはあまり好きじゃないテーマです。黒背景に溶け込むような暗い文字色は見づらくて好きではないのですが、ここで取り上げたのは爆発的な人気のためです。普通のテーマが公開してすぐのインストール数は大体一桁や二桁にようやく乗るくらい、少し時間をおいて三桁にのれば成功した部類です。しかし、このテーマは公開後すぐにインストール数1000を超え、atom-eclipseと同時期にFeatured Theme入りしさらにインストール数は加速、現在は14000弱インストールされています。今年公開されたテーマの中ではトップクラスの人気だったといえるでしょう。

自分の紹介するテーマが派手めなものが多いのでちょうどバランスも良く紹介しました。おとなしい色合いで目が疲れにくいテーマがいいという方はぜひインストールしてみると良いでしょう。シンタックステーマだけでなくUIcity-lights-uiやアイコンcity-lights-iconsもあるので合わせてインストールしてみてください。

 

such-art-syntax

f:id:kirari0831:20171129160306p:plain

今年一番のイロモノテーマはこれでしょう。上の画像はイメージ画像ではないですよ。such-artをテーマに設定した途端、あなたのコードエディタは古めかしいテレビのようなモニターに閉じ込められます。いったい何を言っているんだという人はぜひ一度自分のAtomに入れてテーマに設定してみてください。インストールしてみて「おお!面白い!」となったら即アンインストールしても構いません、実用性はあまりないので……ただ、友達や同僚をビックリさせるにはもってこいかもしれませんが。

これをテーマというのはどうなのかという感じがしますが、テーマの欄に入っているので一応テーマにしておきましょう。インストール数は86.

 

pipboy-syntax

f:id:kirari0831:20171129161018p:plain

こちらもイロモノテーマの一つ。某人気ゲームを彷彿させるとするテーマになっています。設定すると上記のイメージ通り右下にキャラが、画面最上部にCOPYRIGHTが出ます。これも実用性はないですが、驚かせたいときに使いましょう。インストール数は170.

 

番外編

pear-dark-syntax

f:id:kirari0831:20171129161911p:plain

f:id:kirari0831:20171129161915p:plain

前回の記事でも紹介した自作のテーマであるpear-dark。これはかなりまじめに作りこんだものなので自分でもかなり気にいっているテーマなのですが、皆さんのおかげでインストール数が50弱から785に増えまして今もじわじわとインストール数が伸びていっています。本当に多くの方に使っていただきありがとうございます。

 

 

 

今年のおすすめテーマは以上となります!テーマやUIはかなり開拓されてきた感があり中々目新しいものは出てきませんでしたがmonokai-neoのような既存のものをさらに磨き上げたようなものが出てくると嬉しいです。それではまた来年お会いいたしましょう~さようなら~