プログラミング雑記

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

Atomをファミコン風(?)のレガシーおしゃれエディタにしてみた!

Atomファミコン風(?)エディタにしてみました。レガシーでオシャレな感じを目指しました。

 

f:id:kirari0831:20190121213828p:plain

f:id:kirari0831:20190121213941p:plain

エディタ部はこんな感じにしていきます。

 

f:id:kirari0831:20190120232313p:plain

エディタだけでなくUI部もフォントを変えて統一感を持たせてます。
 

 

テーマ

pico8-syntax

atom.io

 

PICO-8という昔ながらのドット絵ゲームを作るゲーム開発環境があるのですが、そのエディタを参考に作られたテーマです。今回、こんなエディタの見た目にしようと思ったきっかけになりました。

 UIもpico8-uiというものが用意されていますが若干Atomとの相性は良くないので無難にatom-material-uiがおすすめです。

 

フォント

PixelMplus10 / PixelMplus12

itouhiro.hatenablog.com

 

見た目と実用性を兼ね備えているのはこのフォントでしょうか。10×10ピクセルフォントと12×12ピクセルフォントの2種類がありますが、前者の方がおすすめです。12×12だと少しレガシー感が薄くなっちゃう感じがします。漢字も使えるのが便利です。

 

f:id:kirari0831:20190121213828p:plain

PixelMplus10

f:id:kirari0831:20190121214856p:plain

PixelMplus12

美咲フォント

www.geocities.jp

 

8×8ピクセルで一番ファミコン感は出るかもしれませんが、アルファベット中心のソースコードにおいてはやはり見づらさがぬぐえないです。漢字も使えるのですが、コメントに漢字を打とうものならそのコメントの価値は半減するかもしれません。

 

f:id:kirari0831:20190121214935p:plain

美咲ゴシック

PICO-8フォント

www.lexaloffle.com

 

PICO-8本家のフォントです。大文字と小文字が識別できるものと、大文字も小文字もすべて大文字になるものの二つがあります。後者の大文字統一バージョンが見た目的にはおすすめですが、小文字と大文字の区別がつかなくなってしまう不便さは大きいでしょうか。PICO-8感を出すには一番ですが、漢字は使えないのでPixelMplusなどと併用しましょう。

 

f:id:kirari0831:20190121215737p:plain

PICO-8 mono upper(大文字統一)

f:id:kirari0831:20190121215804p:plain

PICO-8 mono(大文字小文字)

※日本語はすべてPixelMplus10を使用

 

UIのフォント設定方法

 

テキストエディタのフォントが変更できてもUIがそのままだと味気ないですよね。

f:id:kirari0831:20190121221113p:plain

デフォルトの場合

 

せっかくならUIのフォントをも変更したいですよね。

f:id:kirari0831:20190121222022p:plain

UIにもPixelMplus10を使用

 

File/Stylesheetを選択してAtomスタイルシートを開きます。

f:id:kirari0831:20190121223054p:plain

 

開いたスタイルシートに以下のコードを貼り付けてセーブします。

atom-workspace{
    font-family: "PixelMplus10";
    font-size: 18px;
}

 

font-familyとsizeは好きな感じに編集してみてください。

 

f:id:kirari0831:20190121224146p:plain

f:id:kirari0831:20190121224129p:plain

 

設定画面全体に反映されるのがいいですね。

 

構文エラーがあってもテキスト言語(p5.js)とブロック言語を変換可能にした

はじめに

この記事はProcessing Advent Calendar 2018 - Qiitaの11日目の記事となります。

2016年以来2年ぶりのProcessing Advent Calendarへの参加で、最後に過去記事も載せますので宜しければそちらもご覧ください。 

 

 

niisi.hatenablog.jp

 

※ 今回の記事は以前紹介したシステムの新機能についてなので、上記記事を先に読むと良いかもしれません。

 

 

本編

今年のProcessing Advent Calendarにこのような記事や

 

masatoshihanai.com

 

このような記事

 

takawo.hatenablog.com

 

がありましたが、私もProcessingでプログラミングの楽しさを知った一人です。そんな人が一人でも多く増えたら良いなと考え、プログラミング初心者向けとしては主流(?)のブロック型言語とp5.js(JavaScript)を組み合わせたプログラミング環境を作っています。今回はそのプログラミング環境に、ブロック言語の一つの「弱点」を解消しようと実装した機能を紹介したいと思います。

 

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

niishi31.tumblr.com

 

上の動画を見ると、入力した文や式が途中だったり、不完全であってもブロックに変換できているのが分かると思います。今までは文が完全な状態でなければ変換されなかったのですが、入力途中でも変換できるようになったため、テキストからブロックへの変換の即時性が増し、よりブロックとテキストの対応付けが分かりやすくなったのではなと考えています。

f:id:kirari0831:20181211004627p:plain

"x="と打ち込んだ段階で代入式のブロックが表示される

 

以下のような不完全なプログラムでもそれに対応した「穴あき」ブロックを作ることができます。テキストからわざわざ穴あきブロックを作ることはないですが、ブロックでプログラミングをする際はこの穴あきブロックがよく発生します。今までは穴あきブロックがあると構文エラーを起こしテキストからブロックへの変換ができなくなっていたのですが、この機能によってブロックの方でプログラムを作りかけでもテキストとの変換が常に保たれるようになりました

f:id:kirari0831:20181211004233p:plain

四則演算の数字が欠けていても大丈夫

f:id:kirari0831:20181211004323p:plain

変数名がなくたって大丈夫

f:id:kirari0831:20181211004347p:plain

関数呼び出しの引数がなくても大丈夫。もっと言えば閉じカッコがなくても

f:id:kirari0831:20181211005240p:plain

こんなにPropertyExpressionが続いたって

 

if文やfor文などでは、()や{}、条件式などがなくても変換出来るようになっています。もし文法を忘れてもそこはブロック言語の良い所を利用して、ブロックの断片を生成できればあとはブロックの組み立てでプログラミングをすることができます。ブロックで組んだとしても右のテキストエディタにはブロックが出力した正しいコードが載っているのでそこで構文を確認できます。構文があやふやなプログラミング学習の初期段階にはもってこいなのではないでしょうか。

 

f:id:kirari0831:20181211010148p:plain

それっぽい形になっていればブロックが出てきます

f:id:kirari0831:20181211010330p:plain

if文なら"if"だけあれば大丈夫

f:id:kirari0831:20181211010358p:plain

for文だってこの通り

f:id:kirari0831:20181211010418p:plain

よく見たらセミコロンがない!

 

 

今回は短いテキストをリアルタイムにブロックに変換する例だけを見せましたが、以下のような穴あきブロックだらけのプログラムであっても、テキストエディタの方に変更を加えたらブロックへの変換が行われます。ブロックを組んでいる最中にある一部分だけはテキストで組みたいと思ったときは、たとえプログラムを組みかけでもテキストエディタに打ち込めばそれがブロックに変換されます。

f:id:kirari0831:20181211011127p:plain

構文エラーがあってもテキストとブロックは変換可能

 

利点、出来るようになった事まとめ

ブロックでプログラミングをしようと思ったとき、複雑なものになるといちいちドラッグアンドドロップで作るのは非常に面倒くさく、テキストで書きたくなるときがあります。しかし、ブロックで組んでいるとどうしても穴あきブロックが現れてテキストからブロックへの変換が出来ない場面がありました。それを今回の機能では解決することができます。

また、構文を忘れてしまったとき大量のブロックから該当するブロックを探すのではなく、断片的でもそのブロックの「キーワード」になるようなものさえわかっていれば具体的な構文があやふやでもそのブロックを取ってくることができるようになり、ブロックが出力するテキストのコードから正しい構文も学ぶことができます。

 

 

これでまた一歩ブロックとテキストが近づきました。

f:id:kirari0831:20181011223650p:plain

おわりに

Advent Calendarでは毎年みなさんのオシャレでセンスの塊のようなProcessing作品に出会えるので、毎年この時期を非常に楽しみにしています。私はProcessingでプログラミングをするのが大好きなのですが、皆さんのようなオシャレな作品は到底作れないので参加するのに若干ためらいがありました。しかし、大好きなProcessing業界を少しでも自分も盛り上げたいと思い、ほかのみなさんとは違った角度からにはなってしまいましたが、今年はこの記事を投稿しようと思いました。

昨年は、AtomのAdvent Calendarに浮気してしまいましたが、今年はProcessingで盛り上がる25日間の1日を担当できて良かったです。過去記事もあるのでよろしければご覧ください。

 

2015年

niisi.hatenablog.jp

 

2016年

niisi.hatenablog.jp

 

2017年(Atom

niisi.hatenablog.jp

 

ピカチュウテーマの兄弟テーマが出来た!本家からも公認された!

イーブイテーマ参戦!

以前こんな記事を書きました。

 

 

niisi.hatenablog.jp

 

 

 

この時、ピカチュウテーマ以外にもイーブイテーマも作ろうかな、なんて書いていましたが何もせずそのまま5か月の月日が……

 

そんなある日いきなりこんなテーマが!!

 

 

atom.io

 

 

おおー!誰か別の人がイーブイテーマを作ってくれた!しかもテーマの説明のところにご丁寧に”This syntax is inspired by pikachu-syntax.”とまで書いていただいてありがたいですm(__)m

 

さらに同じ方がこんなテーマも。

 

 

atom.io

 

 

最近のポケモンには疎いのですが、エモンガ?というポケモンですよね。

なぜかこっちは説明欄にスクショがなかったので下に貼っておきます。

 

 

f:id:kirari0831:20181112232733p:plain

 

 

ピカチュウイーブイテーマの時は周りがエディタの背景と同系色でまとめられていたのですが、エモンガテーマは白と黒のコントラストが良いですね!ただ、文字色に関してはピカチュウテーマからいじられていないようで、若干の見づらさが残ります(ピカチュウテーマもたいがいだったのですが……)。ピカチュウは背景がライトテーマにあたるのでエモンガテーマの方は背景と文字色がマッチしているのですが、緑が少し見づらいのと、致命的なのが文字色に白色が使われているので完全に見えない文字があるのがちょっと残念。エモンガテーマは背景が真っ白なので文字色を変えれば普通に使えそう(かわいいエモンガちゃんの主張が激しいけどそれはそれでありだな)。

 

 

f:id:kirari0831:20181112234257p:plain

 

 

イーブイテーマもピカチュウテーマと基本的に文字色が同じなのですが、背景がダークテーマ寄りなので全体的に文字が見づらいのが難点か……しかし、このカーソルについているイーブイのgifがめっちゃかわいい!!どうやらHyperターミナルのpokemon_cursorから持ってきているのではないみたいなので、どこで手に入れたんだろうと思いました。

 

 

いやーしかし、こうやってピカチュウテーマから新しいテーマが生まれたのは非常に喜ばしいことです。こうやってAtomテーマ界が盛り上がってくれると嬉しいですね。作ってくださった方本当にありがとうございました。

 

 

本家Hyper Pokemonから認められた!

ピカチュウテーマはHyper PokemonというHyperのターミナル向けテーマを参考に作ったものでした。

 

 

github.com

 

勝手に画像をお借りしてしまって実はビクビクしながら公開したのですが、上記GitHubページのreadmeのRelatedの欄にPikachu Syntaxが入っていてびっくり!本家様でも紹介していただけて非常に嬉しいです!

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

 

はじめに

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

初めてプログラミング学習をする人には、ビジュアルプログラミング言語を用いて視覚的にプログラムを組めるようにするのがとっつきやすく学習を始めやすいと思いますが、主流なプログラミング言語はほとんどテキストで記述する形式ですからいずれは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(){

};

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

 

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

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

まとめ

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