2019/10/24

プログラミング講座(185) Anime 配列の設計

アニメーションエディタ Anime の開発が少しだけ捗(はかど)りました。以前 SVG で作ったアニメーションで以下のようなコードを使いました。

<use x="208" y="154" xlink:href="#g2">
    <animate attributeName="y" begin="0s"
    dur="3s" from="154" to="78" />
    <animate attributeName="y" begin="3s"
    dur="9s" from="78" to="78" />
    <animate attributeName="y" begin="12s"
    dur="3s" from="78" to="154" />
    <animateTransform attributeName="transform" begin="3s"
    dur="3s" type="rotate" from="0 300 214" to="-90 300 214" />
    <animateTransform attributeName="transform" begin="6s"
    dur="3s" type="rotate" from="-90 300 214" to="-90 300 214" />
    <animateTransform attributeName="transform" begin="9s"
    dur="3s" type="rotate" from="-90 300 214" to="0 300 214" />
</use>

これはロケットの動きを記述したものです。これを Small Basic の配列で表してみました。こんな感じです。 

    anime[1] = "func=load;name=Stars1;x=0;y=0;path=stars.png;"
    anime[2] = "func=move;name=Stars1;x=0;y=428;at=0s;dur=3s;"
    anime[3] = "func=move;name=Stars1;x=-598;y=0;at=3s;"
    anime[4] = "func=move;name=Stars1;x=0;y=0;at=6s;dur=3s;"
    anime[5] = "func=move;name=Stars1;x=0;y=-428;at=12s;dur=3s;"
    anime[6] = "func=load;name=Stars2;x=0;y=-428;path=stars.png;"
    anime[7] = "func=move;name=Stars2;x=0;y=0;at=0s;dur=3s;"
    anime[8] = "func=move;name=Stars2;x=598;y=0;at=6s;dur=3s;"
    anime[9] = "func=move;name=Stars2;x=0;y=428;at=9s;"
    anime[10] = "func=move;name=Stars2;x=0;y=0;at=12s;dur=3s;"
    anime[11] = "func=load;name=Rocket;x=208;y=154;path=Rocket.sb;"
    anime[12] = "func=move;name=Rocket;x=208;y=10;at=0s;dur=3s;"
    anime[13] = "func=rotate;name=Rocket;angle=-90;at=3s;dur=3s;"
    anime[14] = "func=rotate;name=Rocket;angle=0;at=9s;dur=3s;"
    anime[15] = "func=move;name=Rocket;x=208;y=154;at=12s;dur=3s;"

11から15行目が同じくロケットの動きを表しています。プログラム全体は QXF519 として発行しました。このプログラムを実行する前に、まず File オブジェクトのコメントのマークを削除し、さらにプログラムと同じフォルダに、ロケットの図形 RQB683-6 と星空のイメージ stars.png を置いておきます。これらのファイルは GitHub にも公開しています。

今回はアニメーションの内部表現について書き進めることができました。アニメーションエディタ Anime は、この内部構造に加えどういった UI(ユーザインタフェース)にするかということを決めていくことで形ができていくと思います。できるだけ簡単で直感的な UI にしたいと思います。

Pilot-01

関連項目

| | コメント (0)

2019/09/20

コンピュータの進化

コンピュータは電子計算機から情報処理装置へ進化し、さらに人工知能へと進化しようとしている。中国語の電脳という言葉はまさにこの第三段階を表していると言える。今、私が人工知能に期待するのは翻訳・通訳。世界の言葉の壁を取り払ってくれることを望む。

プログラミングの自動化はなかなか難しかったが、人工知能の進化によりプログラミングをしないで済む時代が来るかもしれない。そうなったときのプログラムは解法を書くのではなく、問題定義が本質になるだろう。人間と人工知能は問題を正確に記述し、共有する必要がある。

| | コメント (0)

2019/07/29

Ruby (4) カウンター問題の原因と対策

前回、Ruby で作成したアクセスカウンターがリセットしてしまった件について書きました。その後、ソースを読んで原因について考えました。カウンタは count1.dat などのテキストファイルに格納されていて、読み込む際にエラーが起きるとファイルの内容は無視して変数 count に必ず1を設定しています。そのためオープン/読み込み/クローズのいずれかでエラーが起きリセットしてしまっている可能性が非常に高いと思います。

おそらく複数のサイトから同時にアクセスがあった場合にこのようなことが起きると推測できます。時間を置いて再度チャレンジすればうまくいく可能性が上がるでしょう。

対策としては、上記のようにリトライしてみるということと、同様の問題が起きたときのためにエラーログを残すことの両方を実現する予定です。

リトライでは乱数を使用して100ms単位でスリープしたのち再度読み込むようにしたいと思います。

エラーログについては、rescue => e とすると e にエラーの内容を獲得できるので、これと日時の情報をログファイルに書き込むようにしたいと思います。

それから、カウンタ用ファイルへの書き込みの際はファイルのロックもエラー処理も行っていませんでしたが、こちらも読み込みの際と同様の処理を追加したいと思います。

(つづく)

関連項目

| | コメント (0)

2019/05/29

Ruby (3) カウンターがリセット!

3年ぶりの Ruby に関する投稿になります。3年前に作成したアクセスカウンターが順調に動いていた(と思う)のですが、この度、その一つがリセットしていることに気づきました。5月10日現在で 3146 までいっていたはずが、本日 27 に戻っていたのです。

Counter

不正アクセス?とも一瞬思いましたが、大抵そんなはずはなく、カウンターにそもそも不具合があった可能性が高いのではと考えています。カウンターの値はサーバーにあるテキストファイルに保存しているので、何らかの理由でそれが読めず、0 をカウントアップして書き込んでしまったので、リセットしたのではないかと推測できます。

ただ確証はありません。対策としては、同じ事態が起きたときに状況を把握できるようなログを残すこと、同じ問題を起こしにくくすることが挙げられます。

もうすっかり Ruby を忘れてしまっているので、思い出しながら直していこうと思います。ちょっと時間はかかるかもしれません。

(つづく)

関連項目

| | コメント (0)

2019/05/09

C# (10) SBO 既知の留意点

Small Basic Online (SBO)の既知の留意点はオフィシャルブログの記事や GitHub の Issues にまとめられていますが、英語ということと載っていないものもあるので、ここにまとめ直しておきます。2019年5月9日現在の既知の留意点です。番号は GitHub Issues のものです。

  • #12 起動に時間がかかる。
  • #13 発行とインポートがサポートされていない。
  • #14 タートルが Edge ブラウザで表示されない。
  • #57 "#12345678" のような透明な色は無視される。
  • #58 GraphicsWindow.DrawImage() がイメージを表示しない。
  • #69 GraphicsWindow.Title がサポートされていない。
  • #71 サブルーチン名と変数名が同じだと文法エラーとなる。
  • #74 GraphicsWindow.GetPixel() がサポートされていない。
  • #87 Shapes.Rotate() が図形の中心で回転しない。
  • #88 Shapes.Zoom() が図形の中心から拡大・縮小しない。
  • #89 Shapes.Zoom() の倍率を1にするとプログラムが停止する。
  • #92 Shapes.Rotate() の角度を360にするとプログラムが停止する。
  • ファイルの拡張子が .sb ではなく .txt になった。
  • GraphicsWindow.WidthGraphicsWindow.Height がリードオンリー。
  • GraphicsWindow.FontBold の規定値が "False"
  • Program.Directory がサポートされていない。
  • File.GetSettingPath() がサポートされていない。
  • File.GetTemporaryPath() がサポートされていない。
  • 配列を a = "1=One;2=Two;" のような初期化ができない。

ある程度、動くようにはなったものの、まだ正式版とするにはそれなりの修正が必要となりそうです。どの程度動くのかということでは、サンプルとして鯉のぼりのプログラムを修正してみました。SBO 1.0 ではまだ発行ができないので、こちらにソースとその結果のスクリーンショットを公開しました。

関連項目

| | コメント (1)

2019/05/08

C# (9) Blazor とは

前回、Blazor について簡単に触れました。Small Basic Online 自体が Blazor アプリケーションとなっています。今回は私自身もまだよく判っていないところもあるのですが、Blazor とは何かについて簡単にまとめてみたいと思います。

Blazor について調べてみるとまず jsakamoto さんの Slide Share のスライド C#でSingle Page Webアプリが開発できる「Blazor」が見つかりました。jsakamoto さんは Small Basic 1.0 向けの Excel や IE の拡張ライブラリを作られた方です。

一言で言えば Blazor はブラウザ上で動く SPA (Single Page Application) を作るための開発から実行までの環境です。SPA とはその名のとおり一つのページでさまざまな動作が可能なブラウザ上のアプリケーションです。Small Basic Desktop から発行したプログラムは IE(インターネットエクスプローラー)上の Silverlight というプラグインで実行できましたが、Small Basic Online ではエディタからコンパイラ、実行まで全てブラウザ上で行えます。

Blazor 以前の環境の SPA ではブラウザ上で JavaScript(や TypeScript)のプログラムが動いていました。Small Basic Online の初期のバージョンも TypeScript で動く仕組みでした。それが Blazor では C# でプログラムを記述できるようになりました。.NET の代表的な言語です。.NET の言語は Java のように中間言語にコンパイルされ、その中間言語が実行時に解釈されて動きますが、Blazor ではその中間言語をさらに、WebAssembly というブラウザ共通の実行コードで解釈し実行しているようです。

Blazor の表示は HTML と CSS をベースとしており、Small Basic Online ではグラフィックスとして SVG を利用しています。

Blazor は開発途中でしたが、実験段階を終え、公開プレビュー版となりました。間もなく正式版になるところです。

| | コメント (0)

C# (8) Shapes のデバッグ

Small Basic Online v1.0 のソースのどこから手をつけたらいいのか悩んでいたのですが、先日見つけた Shapes の回転と拡大・縮小の不具合の修正案が示されたので、そこに着目していきたいと思います。

今回取り上げる問題点は2つあり、Shapes.Rotate が図形の中心で回転しないという問題Shapes.Zoom が図形の中心で拡大・縮小しないという問題です。それぞれ GitHub の Issue として報告済みです。

Rotate

それに対しての学生の alxnull さんによる修正案がこちらです。まず、対象となっているファイルは Source/SmallBasic.Editor/Libraries/Shapes/BaseShape.cs というファイルです。Source フォルダにはいくつかのプロジェクトがありますが、今回の修正箇所は SmallBasic.Editor というプロジェクトの中で、エディタの一部になります。このエディタの中に Libraries というフォルダがあり、実行時に呼ばれるライブラリの記述があります。Small Basic Online のエディタは Blazor という仕組みを利用しており、図形は SVG として扱われています。

今回の修正案はこの SVG の図形に対して CSS の transform-origin という style で図形の中心を指定する center というキーワードを与えています。この修正で Chrome では問題が解決していることを確認できましたが、Edge では直っていませんでした。いろいろやってみたところでは、Edge 上では SVG の図形に対する CSS がうまく働いていないようです。

CSS を使わずに SVG の記述だけでうまく対応できるよう alxnull さんに働きかけていく予定です。

関連項目

| | コメント (0)

«プログラミング講座(184) Small Basic の不具合