オフラインでhtmlの練習ができるもっといいものがあった - WebMaker

なんだ、そんないいものがあったのか、という気持ちでいっぱいです！

m0t0k1m0t0k1.hatenablog.com

小学生向けにhtmlを教えるとき、エディタによる補完とかの補助を受けたいけどインターネットに接続されてなくても使えるものがないかと探していた。そこで、簡易なエディタを以前につくりかけていたのだが…

もっといいぞ

偶然に他の調べ物をしていると、Google Chromeのアドオンとして動作する「Web Maker」というものを見つけた。これならWindowsパソコンだろうがmacだろうが、関係ない！やった！

webmakerapp.com

使ってみたところ、ブラウザ内でサーバーが動作しているのか、ライブプレビューされる。CodePenやJSBINのようにhtml、css、JavaScriptの３つのペインで記述することができて、プレビューへ結構すばやく反映されていく。それぞれのペインはhtml固定というわけではなく、次のように設定で切り替えすることができる。

htmlペイン	cssペイン	JSペイン
html	css	JavaScript
markdown	scss	CoffeeScript
pug	sass	ES6(Babel)
	LESS	TypeScript
	Stylus

以下が使ってみた、非常に面白くないサンプル。 外部ライブラリもインポートしてくれるので、主なところはこれだけでサクッとなにかつくれそう。

Chromeさえ動いてくれたらなんとかなりそうというのが非常に素晴らしい。中古のPCでもなんとかなりそうな予感があたりに満ちてきた。

個人的に素晴らしいと思うところ

標準でエディタでインテリセンスが有効になっていること、そして構文ハイライトがされるところが素晴らしい。それに、もっと大事なこととして、ハイライトのテーマを選択することができるようになっている！！！さきほどのスクリーンショットではmonokaiだが、Solarize Darkなど、わたしの好きなテーマも入っている。VisualStudio系のものも入っていると良かったんだけどね… フォントサイズも変更できる。フォントは変更できないが、見やすいので問題ないだろう。

マークダウンではテーブルも問題なさそう。どういうフレーバーなのかわからないけど、それはまた後で調べてみる。

アプリ内に保存することもできるが、ファイルへのエクスポートやインポートも装備されているので、困ることは少なそうだ。スクリーンショットを撮ることもできるので、サンプルをつくって他人へ見せるというのもオフラインでできるので便利すぎる。

気になるとしたら、日本語メニューでないので避けたいと思う方がいくらかはいそうだ。それに、Chromeアプリっていつまで続くんだろうね。あとは、これでマークダウンを書き続けることはしんどいので、やはりスニペットくらいの利用になるとは思う。

次回、htmlを教えるときにはこれを使うかな。

Kindleアプリストアに公開したアプリを使ってエントリするテスト

これはテストです。

m0t0k1m0t0k1.hatenablog.com

昨日エントリした記事で、App Inventor2をつかって作成したAndroidアプリをKindleアプリストアへリリース申請していた。ものすごくあっけなく審査は通過して、いまそのあぷりをつかってこのエントリを書いている。さすがにKindle Fireから記事をそのままフリックで入力していくのは非常にツラいので、キーボードを繋いで使用している。

Satonaka Editor

使い勝手は悪くない。しかし、いちいち予測変換が表示されて見辛い。それに自分でクリアをタップしてしまうことがあるので、そこは改善の余地がある。

画面が小さいのは気にならない。それよりもむしろAmazon Driveへの下記だしをサポートするべきだったことに気がついた。やはりきちんとつくったほうがいいな、というのが最大の反省点であろう。

もちろん、App Inventorでもファイルの書き出しはサポートされているので、それを利用すればファイル書き出しは簡単に行うことができる。あら？むしろAmazon Driveを直接使うのではなくて、その方がいいのかな？どこへ保存したいのかはゆーざーに任せたほうがいいのか、そこが流儀がデスクトップと違いそうだというところが気になるものではある。

一応スクリーンショットも撮ってみた。横向きにしても使えるので、小さいディスプレイのように利用するといいだろう。

今後について

このアプリはテスト用につくってみたものだが、ファイル保存くらいはサポートするように改修しても個人的にも良いように感じるので、いずれアップデートしようとおもう。

また、デスクトップ用につくっていたsatoyama editorとの使用感の違いが一点あることにも気づいた。１０分経過で鐘の音が鳴るのは同じなのだが、ダイアログを表示して一度手を止めさせるということをさせていなかった。これもアップデートしたいところではある。

それにしてもモバイルのOperaからのはてなブログは投稿しにくい。

はてなブログ Perfect GuideBook

これなら小学生でもAndroidアプリを開発できる！App Inventor2をつかってkindle fire用アプリを申請した話

こども向けにプログラミング教室のようなことをはじめようと考えてCode Studioのカリキュラムを実際にやっていっていたところ、おもしろいものを見つけた。どうやら5年以上前から存在していたようなのだが、いまさら知ったというところ。それが、App Inventorだ。

App Inventor

どうやら調べてみたところ、最初はGoogleが行っていたプロジェクトのようで、数年前にオープンソース化されているようだ。現在はMIT（マサチューセッツ工科大学）の方がメンテナンスしているらしい。MITと聞くとやはりScratch・・・と思うのだが、まぁだいたい同じような感じ。ビジュアルプログラミング環境で、ブロックを組み合わせてアプリを開発することができる。しかもエディタはブラウザ内にある。

ところが、Scratchとまったく異なるところがある。それは、これ単独でAndroidアプリを開発することができるという点だ。Code Studioにもブロックを組み合わせてJavaScriptを記述してアプリをつくることができるエディタがある。これはアプリの表示もブラウザ内で行われるのだが、こいつは違う。ブラウザからビルドをしてapkファイルを作成することもできる。コンパニオンアプリをスマホやパソコンに導入すれば、そのままデバッグも行うことができる。恐ろしい。Javaなんか必要なかったんだ！！！

とはいえ

もちろん当たり前だが、良いことばかりではない。見た目はあらかじめ用意された部品から選択するようになるので、デザイン的なカスタマイズ性は低い。できることもかなり限られているので、込み入ったアプリをつくるのはかえって難しい。それでも、手元に実機のAndroidがあれば自分で開発したアプリを自分のスマホやタブレットで動作させてみることが比較的かんたんにできるというのは夢があっていいな。

Androidアプリにビルドできるというので、いまこのエントリを書いているHTMLベースのsatoyama-editorをアプリにしてみようと考えた。実に浅はかな考えではある。だが、以前からモバイルのOperaでは音声の再生がうまくいかないという問題があったうえ、いくらElectronアプリにしてもタブレット内で動作するわけではない。そういうことで、このApp Inventorがどの程度つかえそうなものなのか遊んでみようと思い、実際にアプリにしてみた。

アプリをつくる

App Inventorは現在バージョン２のようだ。ブラウザベースで動作する。最初はGoogleアカウントでログイン認証が発生するので、Googleアカウントを持っていないこどもには少々ハードルが高い。やってみるならお父さんお母さんのGoogleアカウントでログインするようになるだろう。

MIT App Inventor | Explore MIT App Inventor

このページの「Create apps!」というボタンらしきものをクリックするとエディタが登場する。なお、以下が今回つくった「Satonaka Editor」のプロジェクトである。 ご覧いただくとお分かりのように、画面左側に部品の一覧があり、中央がデザイナー、左がプロジェクトの内容をツリー上に見ることができるビューア、そして部品ごとのプロパティ画面というようになっている。古来より利用されているVisualBasicなどの開発環境に慣れた方なら「はいはい」というように部品をデザイナーへもっていっていろいろすることができる。

部品がそろったら、いよいよコードだ。コードは先ほども言ったようにビジュアルプログラミングすることができる。対象となる部品を一覧からクリックすると、それに関するイベント、プロパティやメソッドが配置されたブロック一覧が表示される。

あとはこれをエディタ部分へドラッグ＆ドロップすればコードを書いていくことができる。なお、以下が今回のコード。ブロックがやたらたくさん見えるのでごちゃごちゃしているが、今回は関数定義などを試してみていないのでちらかっているということと、変数が面白いのでということがある。 変数の何が面白いかというと、Scratchとは異なる考え方でつくられているということだ。Scratchでも現在のブラウザベースで動作するバージョン２からはスコープが明示できるようになった。しかし、どれがそうなのかといったことは見た目にわかりにくい。App Inventorでは見た目がごちゃごちゃしそうなところなのに、あえて変わったアプローチをとったようだ。

何が違うのか？それはスコープ、変数の存在範囲がブロックの形状ではっきり視認できるというところだ。変数を宣言すると、そこから変数が作成される。そのとき、何をあらかじめセットしておくかを明示的にブロックで表現できるだけでなく、この変数がいつまで使えるのかということも囲まれている範囲で見てわかるというところが面白い。

最初は「は？どういうこと？？」と感じたわけだが、わかれば「なるほど・・・」とうなずくばかり。こういう考え方もある。

便利な部品

アプリをつくってみると、ほんとうにちょっとした細かいことができない。クリップボードへテキストボックス内のテキストをコピーしたりはできない。テキスト内の部分を選択することもできない。このあたりの操作はユーザーにゆだねられている。キータイプしたイベントは発生しないため、タイマーで常時監視させるという方式を採用せざるを得ないなど、「そういう感じになるかー」といったところ。

ただ、便利なものもある。たとえば、TinyDBという部品。これは目に見えない部品なのだけど、利用することができる。satoyama-editorではブラウザのローカルストレージを利用してテキストを保存したり、アプリ起動時に保存されている内容を呼び出したりしていた。これとほぼ同様のことをデータベース操作なしで利用することができる。どうやっているのかまでは調査していないが、使い勝手はどう見てもローカルストレージと同じに見える。なお、TinyDBのWeb版もある。おそらくクラウドストレージという感じに変わるだけであろう。これはこれでデバイス間を同期するような場合には便利だろう。

このほか、センサーも利用することができる部品がたくさんある。タイマーはこのセンサーのグループに所属している。カメラ機能もメディアのグループ内に写真を撮るもの、ビデオを撮るものが用意されている。音声認識の部品もある。もちろんボイスレコーダーもつくることができる。

ちょっと恐ろしいがコンタクトやEメール、電話番号にもアクセスできる。Twitterには専用の部品も用意されている。さらに、レゴマインドストーム用の部品もあるので、androidデバイスをマインドストームに接続して操作するということもできるようになっている。

もちろんウェブへの接続やBluetooth接続も可能なようだ。実験的なものとしてFireBaseデータベースも利用できる。ここまできたら本格的な機能をもったアプリも開発しようと思えばできる。細かな操作は難しいとしてもだ。

そして申請へ

はじめてモバイルデバイス用のアプリ申請をしたのだが、まさかそれがkindle用になるとは夢にも思わなかった。しかもそれはJavaで書いたものではなくて興味本位で手を出したApp Inventorをつかったものだったとは。申請は明日までかかるような見込みだと表示されているが、あんなになにもできないアプリにそんなに審査がかかるものなのか、よくわからないところではある。

便利なのはapkさえアップしてやればkindleでも動作するのか簡易チェックしてくれるというところ。アプリ内課金などGooglePlayに関するような操作は一切しないので、簡易チェックがOKになるのは当たり前といえば当たり前なのだが。

おススメはしないが、野良apkを動作するようにリスキーな設定をしておけば別にストアにアップしなくても大丈夫。USBなどなんらかの方法で送り込むことができれば動かしてみることはたやすい。しかしそれにしてもモバイルアプリはデスクトップアプリに比べてかなりの数になっているはずなのだが、あえてガンガンつくっていこうという気持ちにはあまりなれなかった。こんなに簡単なのに。

審査が通ったらまたここにエントリしようと思うが、落ちたら落ちたエントリでも書くかな。

小学生からはじめるわくわくプログラミング2

親子で楽しく学ぶ! マインクラフトプログラミング (ぼうけんキッズ)

子育てはおもしろすぎる

子育てなどと言ってもよいのかわからないが。

わが子もいよいよMBP（mac book pro）がほしくなるような年頃になったようだ。ふざけやがって＜（＾o＾）＞ iMovieは以前からiOS版もmac版も使いこなしはじめていたが、とうとうGarageBandにも手を出した。ループを組み合わせてガンガンと動画のBGM用のトラックをつくりはじめている。しかも、つくり方がわたしのようなオヤジとは違う。MIDI世代は死んだほうがいいのかもしれない。

ひとつのプロジェクトファイルにいくつもそして同じテンポでしかもまったく異なる雰囲気のトラックをつくっているのだ。 各トラックの間には数小節ごと空けられていて、自分なりの区切りなんだろう。もはやわけがわからない。ひとつのファイルに画像やテキスト、スライドなどをいくつもつくったりすることはあるが、音楽でもそれをやってしまうのかと思ったら自分のアタマの固いこと・・・と悲しくなった。

どれもちょっとした操作を一度見せただけだが、自分の興味が強い分野ではガンガンに吸収していく。いつのまにかiMovieでもアフレコをしてみたり過激に動画をくっつけたり切り離したりして見せ場をつくろうという雰囲気が見て取れる。音楽でも関係のないジャンル、グループに分けられたループを混ぜる実験を繰り返しているので、すぐにさまざまなことができるようになるだろう。ほんとうに軽々とやってのけていくのは逆に清々しい。もっと無邪気に仕事もしたほうがいいんだろうな。

勉強はどうも不純な動機がないと気が進まないようだが、こうしたものは気が進みやすいのならもっと上手に活用したいところだ。

なお、わが子がやっているような状態でそのままmp3などへ書き出しをすると、おかしなことが起きるわけだが、きっとそこもiMovieで編集するときに都合のようように無理やり合わせるのだろう。結果が面白そうなので、もう少し様子を見てみることにする。

GarageBandマスターブック OS X Mavericks&iOS 7対応 (Mac Fan Books)

いちばんやさしいiMovie入門

UWSCが意外とおもしろい

予想外に書きやすいシンプルなつくりで、おもしろいなーと使ってみているUWSCですが、ほんとうにシンプルです。過去によくWindowsパソコン上で無人操作をやっていることがあったのですが（サーバーの情報を定期的にダウンロード、加工してメール納品するとか）、こういった内容ならWSHよりもずっと書きやすいかもしれないです。

PHPのように多数そろえられたビルトイン関数、ウィンドウ操作をかなり柔軟に利用できるうえに、コマンドプロンプトやPowerShellとも連携できます。さらにCOMやDLLまで利用できるので、はっきり言ってVBAを使う必然性ってほとんどなくなります。もしあるとしたら、VBEを使いたい、というときくらいです。今回はしょうもないサンプルを提示しますが、WSHだけでこれを数分で書くのは相当難しいはずです。というか、無理かも。

dim voices[] = ""
recostate(true)
voice = dictate()
repeat
    resize(voices, length(voices))
    voices[length(voices) -1] = voice
    voice = dictate()
until voice = "終わり"
dim f = fopen("voice.txt", f_write)
fput(f, trim(join(voices,"<#cr>")))
fclose(f)
print "the end."

このサンプルは何かというと、音声認識で入力したテキストを「終わり」というまで蓄積してテキストファイルに保存するというものです。ちょっとしたメモをするときに実行しておけば声だけでメモが取れますよね。

個人的にもっとも気に入っているところはファイルの入出力だったりするかもしれません。込み入ったものでなければFOPEN関数などでサクッと開いて、FPUT関数で書き込みです。読み込みたいときはFGET関数です。WSHだとファイル入出力をするにはFileSystemObjectというオブジェクト経由でしか読み書きできません。設計が美しすぎて、かえって面倒というものです。もちろん、FileSystemObjectをつかうと結構いろんなことができるのですが、上記のようなしょうもないツールだとわざわざ使うのが面倒すぎるわけです。

特徴

特徴的なものとして、制御構文の条件分岐でしょうか。IFとIFBという2種類があります。VS Code用の拡張でキーワード登録していくときに「なんだこれ？」と思ったのですが、どうやら数値が条件に入るときはIFBで、そうでなければIFでよいようです。いまいち使い分けがわからないですが、サンプルを見ているとそういう使い分けのようです。

余談ですが、VS Code Extensionを0.0.2にしてスニペット追加と大文字小文字を無視してハイライトできるようにしてます。。 相変わらず全然機能が不足しているので、もっと便利にしたいところですが。

marketplace.visualstudio.com

ほかに、THREADというキーワードがあって、これで関数名を渡すとその関数を別スレッド実行してくれるというものです。自動化のためのツールということもあってか、便利に使えるようになっているようです。それから、連想配列をつくるにはHASHTBLキーワードをつけるだけというラクチンさ。Scripting.Dictionaryだったっけ、をつかってオブジェクトを利用する必要がありません。

例外処理がついているのも面白いのですが、TRY - ENDTRYです。ただ、これは例外が発生した時と何があっても最終的に実行されるブロックがあるものと別々の構文になっているようです。JavaやC#、VB.netのように混ぜて記述することができないようです。そのせいか、サンプルでも例外をキャッチするブロックをさらにFINALLYがあるTRYブロックで囲むという不思議な書き方にしてあります。さらに、このFINALLYはその前のTRYブロック内でEXITしたとしても必ず実行されるようです。本当に必ず実行してほしい（ファイルを閉じるとか）ものはここへ書いたほうがいいですね。

また、MODULEというモジュール化の機構も備わっていますが、なぜかCLASSの別名でもあってオブジェクト指向的なクラスとは異なります。モジュールとしてまとめるので、どちらかというと名前空間という雰囲気です。そういうこともあってインスタンス化はできません。また継承やインターフェースもありません。モジュールは一階層のみ対応のようで、ネストした次のようなものはNGのようです。

MODULE aaa
    MODULE bbb
        FUNCTION ccc()
        FEND
    ENDMODULE
ENDMODULE

モジュール内に定義した変数は外側からはアクセスできないようになっているので、それっぽいことはできます。もちろんインスタンス化できないのでコンストラクタ、デストラクタもありません。またVBAであるようなプロパティもつくることはできません。

Windows特化型の強み

このUWSCというツールはWindowsでの動作のみサポートしています。WindowsAPIをふんだんに利用して開発されているのでしょう。おかげで現在のバージョンではSENSOR関数を利用してセンサーの情報を利用したスクリプトをつくることもできるようになっています。

http://www.uwsc.info/sample.html#N66

もちろん既存のWMIを利用したスクリプトや、PowerShellを経由した.Net Frameworkの利用、ネイティブDLLの利用も思いのままです。こんなにできて大丈夫なんだろうか？と思ってしまうところです。ある程度はWindowsのUACが防いでくれるので、OFFにしていなければ大丈夫だと思いますが。WSHやPowerShellのように標準インストールされていたら悪意のあるソフトウェアを量産し放題ですね。恐ろしい。

なお、有償のPro版になるとフォームを利用できるようになったりExcel（LibreOfficeも含む）を操作する関数が利用できるようになるようですが、フォームだけなら.NetをPowerShellから使えば利用できます。ちょっと面倒ではありますが。それに、XAMLも用意すればフォームではないウィンドウアプリをつくることもできるので、可能性は結構あります。

UWSCに関する書籍は紙のものが1種類だけ存在しているようです。非常にマニアックだったということですね。興味のある方は使ってみてはいかがでしょうか。

Windows マクロテクニック