2017/08/09

Small Basic 1.3 リリース

8月7日に Small Basic 1.3 がリリースされました。Microsoft Store からダウンロードできます。

Small Basic 1.3

主な変更点は以下の通りです。

・コードの最後の空行で Ctrl+Space を押して IntelliSense を表示しようとすると IDE が終了してしまう問題の修正。
・ヘルプに Small Basic Quick Guide が追加された。(ただし英語)
・サンプルコードが表示されるようになった。(ただしコメントが英語)
・Microsoft Store のみからダウンロード可能。
・Small Basic のアイコンが新しくなった。(v1.2 Microsoft Store 版より)
・Small Basic の格納場所がストアアプリ向けに変更された。(v1.2 Microsoft Store 版より)
・文法エラーメッセージが分かりやすく変更された。(英語版のみ)


| | コメント (0) | トラックバック (0)

2017/07/24

Mac + 英語版 Windows での日本語入力

macOS Sierra 日本語版 + Apple 日本語キーボード + Parallel Desktop 12 for Mac + Windows 10 Home 英語版 + IME という環境で、[かな] [英数]キーを使って日本語入力と英語入力を切り替える方法について説明します。

まず、Windows に日本語キーボードのドライバーをインストールします。

Device Manager を立ち上げ、Keyboards の左にある > クリックし、Standard PS/2 Keyboard をダブルクリックします。

Device_manger

Properties の画面で [Update Driver] ボタンを押します。

Update_driver

How do you want to search for drivers? 画面で Browse my computer for driver software をクリックします。

Browse_my_computer

Browse for drivers on your computer 画面で Let me pick from a list of a available drivers on my computer をクリックします。

Let_me_pick_from_a_list

Show compatible hardware のチェックを外し、Model の中から Japanese PS/2 Keyboard (106/109 Key Ctrl + Eisuu) を選び、[Next] ボタンを押します。

Japanese_ps2_keyboard

Update Driver Warning 画面でこのドライバーは推奨されない云々と出ますが、[Yes] をクリックしてインストールします。

Update_driver_warning

Windows had successfully updated your drivers 画面が出るので、[Close] ボタンを押します。

Updated

再度、Properties 画面が出るので、[Close] ボタンを押します。
Close

再起動しますかという画面が出るので、[Yes] を押して再起動します。

Restart

次に、Apple キーボードの[かな]キーと[英数]キーに「IME ON」「IME OFF」の機能を割り当てます。

タスクバーの日本語 IME の「A」(または「あ」)のところで右クリックを押し、 Properties を選びます。

Ime_properties

Settings for Microsoft IME 画面で [Advanced] ボタンを押します。

Advanced

Advanced Settings for Microsoft IME 画面の Editing operation and behavior にある [Advanced] ボタンを押します。

Advanced_2

Setting 画面で、「無変換」キー(Mac の「英数」キー)の No Inpu... の項目 ToggleKana を選んで [Modify] キーを押します。

Modify

Functions の中から IME OFF を選んで、[OK] ボタンを押します。

Ime_off

同様に「ひらがな」キー(Mac の「かな」キー)の No Inpu... の項目 Hiragana ke を選んで [Modify] キーを押します。

Modify_2

Functions の中から IME ON を選んで、[OK] ボタンを押します。

Ime_on

設定が終わったら Keyboard 画面で [OK] ボタンを押します。

Ok

Advanced Settings for Microsoft IME 画面でも [OK] ボタンを押します。

Ok_2

以上で設定終了です。

IME 自体を切り替えるには [option]+[command]+[space] キーを押します。日本語 IME に切り替わったら、[英数]キーと[かな]キーで英語入力と日本語入力を切り替えます。

| | コメント (0) | トラックバック (0)

2017/07/14

フリーソフト紹介: Visual Studio Code

本日、Aptana Studio 3 を立ち上げようとしたら、以下のエラーで立ち上がらなくなりました。

Aptana_studio_3

そろそろ Visual Studio に移行しようと思っていたところだったので、Aptana Studio 3 はアンインストールしました。ところが、最近 Visual Studio Code というコードエディターがあることを知ったので、これをインストールしてみました。

Vscode

とりあえず、ftp-sync と Debugger for Chrome (JavaScript用)という拡張機能を追加インストールしました。どちらも、構成(初期設定)を json ファイルに記入して利用します。

このソフトはマイクロソフトのオープンソースで、ソースコードは GitHub に公開されています。Visual Studio Code そのものを直したり、拡張機能を追加したりすることも可能です。すでにさまざまなプログラミング言語に対応した拡張機能がある他、Windows 版のみならず、Linux や Mac でも動作するのは魅力と言えるでしょう。

| | コメント (0) | トラックバック (0)

2017/06/25

プログラミング講座(175) LitDev 拡張機能

今回はアニメとは直接関係ありませんが、Small Basic の拡張機能である LitDev Extension のヘルプの日本語訳を開始したので、お知らせします。

LitDev (リットデブ)拡張機能は Small Basic に多くの機能を追加するライブラリで、3D 表示、物理エンジン、複数の楽器をサポートする音楽機能、xml, csv などを扱う機能、イメージ効果、高速の配列などを利用できます。

これまで日本語のヘルプがなかったのですが、作成を開始しました。現在の版を GitHub に公開しています。

使い方は、LitDev Extension をインストール後、以下のステップで日本語のヘルプが表示されます。

1.上記 GitHub サイトで [Clone or download] > [Download ZIP] を選ぶ。
2.ZIP ファイルの中から LitDev.ja.xml を C:\Profram Files (x86)\Microsoft\Small Basic\Lib にコピー。
3.日本語版の Small Basic を起動する。

以下のスクリーンショットは同じ ZIP ファイルにある TranslateAidJ.sb を開いたところです。

図176 LitDev 拡張機能
【図176 LitDev 拡張機能】

このプログラムでは、LDControl.AddMenu や LDxml オブジェクトなどを利用して、今回の翻訳の一部を行いました。このプログラムを実行するには、英語版の LitDev.xml を同じフォルダに入れておく必要があります。メニューの概略は以下の通りです。

File > Save :編集中の LitDev.ja.xml を保存します。
Node > Next :次のテキストノードに移動します。
Node > Previous :前のテキストノードに移動します。
Node > Sibling :次の兄弟ノードに移動します。
Node > Child :1つめの子ノードに移動します。
Node > Parent :親ノードに移動します。
Auto > Quote :「」を""に戻します。
Auto > Space :英単語前後の半角の空白を調整します。※
Auto > Literal :""内の文字列を英語版と同じに戻します。

※ 半角のスペースの置き方については、マイクロソフト日本語スタイルガイドに基づいて処理を行いました。

Google 翻訳をベースに翻訳していますが、まだ不十分なところもあります。順次精査し改善していく予定です。翻訳の改善に協力いただける方がいらっしゃいましたらご連絡をお待ちしております。


| | コメント (0) | トラックバック (0)

2017/06/14

JavaScript (41) SyntaxHighlighter のカスタマイズ

前回、いろいろ試してうまくいかなかった点がありました。ダウンロードしたバージョンが正しくなかったようです。今回は改めて最初から SyntaxHighlighter 3.0.83 を使って Small Basic のコードをきれいに表示できるようにしてみたいと思います。

SyntaxHighlighter 3.0.83 のダウンロード

GitHub の zip ファイルをダウンロードします。

ファイルのコピー

このうち以下のファイルを自分のサイトにコピーします。
・ styles\shCore.css
・ styles\shThemeEclipse.css
・ scripts\shCore.js
・ scripts\shBrushCss.js
・ scripts\shBrushJScript.js
・ scripts\shBrushVb.js
・ scripts\shBrushXml.js

ココログの設定

ココログの設定 | ブログのサブタイトル の下に以下のコードを設定し、反映します。










VB のブラシを使って SB のプログラムを表示

以下のようなコードをブログに埋め込むと、



For i = 1 To 100
TextWindow.WriteLine("Hello World!")
EndFor

このように表示されます。


For i = 1 To 100
TextWindow.WriteLine("Hello World!")
EndFor

SB のブラシとテーマを作成

作成したブラシ (.shBrushSBjs) とテーマ (shThemeSb.css) をこちらに公開しました。

SB のブラシを使って SB のプログラムを表示

ココログの設定に作成したブラシを追加して以下のようなコードを埋め込むと、



For i = 1 To 100
TextWindow.WriteLine("Hello World!")
EndFor

このように表示されます。


For i = 1 To 100
TextWindow.WriteLine("Hello World!")
EndFor

| | コメント (0) | トラックバック (0)

2017/06/09

JavaScript (40) ソースコードの表示 SyntaxHighlighter

JavaScript について久しぶりに書きます。このシリーズでも使わせていただいている SyntaxHighlighter ですが、ココログでもコードを表示できる他、カスタマイズすることもできます。

そこで今回は、SyntaxHighlighter の最新版 (4.0) を使っていろいろやってみようと思います。

まず、GitHub にある SyntaxHighlighter のビルドのインストラクション(指示)にしたがって SyntaxHighligher をビルドしてみようと思います。

最初は git コマンドを使うので、Git Shell を立ち上げます。

Windows PowerShell
Copyright (C) 2016 Microsoft Corporation. All rights reserved.
 
~\Documents\GitHub> git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
Cloning into 'syntaxhighlighter'...
remote: Counting objects: 3500, done.
remote: Total 3500 (delta 0), reused 0 (delta 0), pack-reused 3500
Receiving objects: 100% (3500/3500), 5.94 MiB | 1.81 MiB/s, done.
Resolving deltas: 100% (1762/1762), done.
~\Documents\GitHub>

次に node.js のコマンドを使うので、Node.js コマンドプロンプトを立ち上げ、コマンド npm install を実行します。

npm ERR! node -v v0.10.13
npm ERR! npm -v 1.3.2
npm ERR! path C:\Users\Nonki\Documents\GitHub\syntaxhighlighter\node_modules\bab
el-preset-es2015\node_modules\babel-plugin-transform-es2015-function-name\node_m
odules\babel-helper-function-name\node_modules\babel-template\node_modules\babyl
on\lib\index.js
npm ERR! fstream_path C:\Users\Nonki\Documents\GitHub\syntaxhighlighter\node_mod
ules\babel-preset-es2015\node_modules\babel-plugin-transform-es2015-function-nam
e\node_modules\babel-helper-function-name\node_modules\babel-template\node_modul
es\babylon\lib\index.js
npm ERR! fstream_type File
npm ERR! fstream_class FileWriter
npm ERR! code ENOENT
npm ERR! errno 34
npm ERR! fstream_stack C:\Program Files (x86)\nodejs\node_modules\npm\node_modul
es\fstream\lib\writer.js:284:26
npm ERR! fstream_stack Object.oncomplete (fs.js:107:15)
npm http GET https://registry.npmjs.org/regenerator-runtime
npm http 304 https://registry.npmjs.org/regenerator-runtime
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     C:\Users\Nonki\Documents\GitHub\syntaxhighlighter\npm-debug.log
npm ERR! not ok code 0
 
C:\Users\Nonki\Documents\GitHub\syntaxhighlighter>

どうやら、エラーになってビルドがうまくいかなかったようです。そこで、Node.jp の最新版をインストールし直し、npm cache clean コマンドを実行してから、再び npm install を実行しました。

| `-- webpack-core@0.6.9
|   +-- source-list-map@0.1.8
|   `-- source-map@0.4.4
`-- yargs@3.32.0
  +-- camelcase@2.1.1
  +-- cliui@3.2.0
  | `-- wrap-ansi@2.1.0
  +-- decamelize@1.2.0
  +-- os-locale@1.4.0
  | `-- lcid@1.0.0
  |   `-- invert-kv@1.0.0
  +-- string-width@1.0.2
  | +-- code-point-at@1.1.0
  | `-- is-fullwidth-code-point@1.0.0
  |   `-- number-is-nan@1.0.1
  +-- window-size@0.1.4
  `-- y18n@3.2.1
 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
 
C:\Users\Nonki\Documents\GitHub\syntaxhighlighter>

こちらはうまくいったようなので、次に進み、node .\node_modules\gulp\bin\gulp.js setup-projectnode コマンドを実行します。今度は、git clone https://github.com/syntaxhighlighter/brush-php.git でエラーになってしまいました。調べてみると、Windows 10 でのビルドはうまくいかないようでした。そこで、上記と同じことを Mac でやってみました。Node.js インストール後、実行したコマンドは以下の通りです。

git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
cd syntaxhighlighter
npm install
./node_modules/gulp/bin/gulp.js setup-project 

Mac では問題なくビルドできました。最後に以下のコマンドを実行しました。これで、dist フォルダに syntaxhighlighter..js と theme.css が作成されます。

NONKI-Mac-mini:syntaxhighlighter nonki$ ./node_modules/gulp/bin/gulp.js build --compat 
--brushes=css,cpp,csharp,java,javascript,vb,xml --theme=default
[19:18:47] Requiring external module babel-register
[19:18:47] Using gulpfile ~/Documents/syntaxhighlighter/gulpfile.babel.js
[19:18:47] Starting 'build'...
[19:18:50] Theme: default
[19:18:50] Brushes: css, cpp, csharp, java, javascript, vb, xml
[19:18:50] Hash: 5910dbdf4bb31d0abb6a
Version: webpack 1.15.0
Time: 2392ms
                   Asset    Size  Chunks             Chunk Names
    syntaxhighlighter.js  145 kB       0  [emitted]  main
syntaxhighlighter.js.map  224 kB       0  [emitted]  main
chunk    {0} syntaxhighlighter.js, syntaxhighlighter.js.map (main) 137 kB [rendered]
    [0] ./src/index.js 1.18 kB {0} [built]
    [1] ./src/core.js 7.16 kB {0} [built]
    [2] ./repos/opts-parser/opts-parser.js 1.5 kB {0} [built]
    [3] ./repos/syntaxhighlighter-regex/index.js 1.16 kB {0} [built]
    [4] ./repos/syntaxhighlighter-regex/xregexp.js 67.8 kB {0} [built]
    [5] ./repos/syntaxhighlighter-match/index.js 659 bytes {0} [built]
    [6] ./repos/syntaxhighlighter-match/lib/match.js 1.19 kB {0} [built]
    [7] ./repos/syntaxhighlighter-match/lib/apply-regex-list.js 1.05 kB {0} [built]
    [8] ./repos/syntaxhighlighter-match/lib/matches.js 2.67 kB {0} [built]
    [9] ./repos/syntaxhighlighter-html-renderer/index.js 9.67 kB {0} [built]
   [10] ./src/utils.js 2.3 kB {0} [built]
   [11] ./src/transformers/index.js 538 bytes {0} [built]
   [12] ./src/transformers/trim.js 316 bytes {0} [built]
   [13] ./src/transformers/blogger_mode.js 186 bytes {0} [built]
   [14] ./src/transformers/strip_brs.js 181 bytes {0} [built]
   [15] ./repos/unindenter/unindenter.js 955 bytes {0} [built]
   [16] ./repos/retabber/retabber.js 1.4 kB {0} [built]
   [17] ./src/dom.js 6.76 kB {0} [built]
   [18] ./src/config.js 311 bytes {0} [built]
   [19] ./src/defaults.js 1 kB {0} [built]
   [20] ./src/html_script.js 1.72 kB {0} [built]
   [21] ./~/process/browser.js 5.45 kB {0} [built]
   [22] ./repos/brush-base/brush-base.js 2.78 kB {0} [built]
   [23] ./repos/brush-css/brush.js 4.86 kB {0} [built]
   [24] ./repos/brush-cpp/brush.js 4.51 kB {0} [built]
   [25] ./repos/brush-csharp/brush.js 1.8 kB {0} [built]
   [26] ./repos/brush-java/brush.js 1.37 kB {0} [built]
   [27] ./repos/brush-javascript/brush.js 1.05 kB {0} [built]
   [28] ./repos/brush-vb/brush.js 1.56 kB {0} [built]
   [29] ./repos/brush-xml/brush.js 1.54 kB {0} [built]
   [30] ./~/domready/ready.js 1.13 kB {0} [built]
   [31] ./src/dasherize.js 526 bytes {0} [built]
   [32] ./src/compatibility_layer_v3.js 478 bytes {0} [built]
[19:18:50] Finished 'build' after 2.75 s
NONKI-Mac-mini:syntaxhighlighter nonki$

このようにして作成した、theme.css と syntaxhighlighter.js について、下記のようにココログの設定を行ってみたのですが、結局うまくいきませんでした。他の原因も考えられるのですが、SyntaxHighlighter 4.0 はまだ開発途中と判断し、3.0.83 をダウンロードし、上記のようなビルドは行わず、ココログの設定 | 基本情報 | ブログのサブタイトルの下に <script> タグを設定しました。

<link type="text/css" rel="stylesheet" href="http://www.nonkit.com/javascript/css/shCoreEclipse.css">
<link type="text/css" rel="stylesheet" href="http://www.nonkit.com/javascript/css/shThemeEclipse.css">
<script type="text/javascript" src="http://www.nonkit.com/javascript/js/XRegExp.js"></script>
<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shCore.js"></script>
<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushCpp.js"></script>
<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushCss.js"></script>
<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushJava.js"></script>
<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushJScript.js"></script>
<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushVb.js"></script>
<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushXml.js"></script>
<script type="text/javascript">  
    SyntaxHighlighter.config.stripBrs = true;
    SyntaxHighlighter.all();  
</script>

図36 ココログの設定
【図36 ココログの設定】

これでココログの記事の中でコードを表示できるようになります。コードは以下のタグで挟みます。

<pre class="brush: vb">
</pre>

SyntaxHightligher 自身は JavaScript で書かれていますが、さまざまなプログラミング言語をサポートしています。例えば、以下のプログラムは私が書いた Visual Basic のコードです。結果のとおり、<p> タグが残ってしまいます。サブタイトルの下に設定した、SyntaxHighlighter.all(); の前に、SyntaxHighlighter.config.stripBrs = true; を置いたことにより、<br> タグは削除できていますが、<p> タグはうまく削除できません。また、右上の?を押すと本来、SyntaxHighlighter についてのバージョン情報などが表示されるはずなのですが、今のところ @ABOUT@ と表示されてしまします。


Imports System.IO
Module FDump

Sub Main()
' get filename from arguments
Dim filename As String = System.Environment.GetCommandLineArgs(1)
' open input file
Dim stdin As FileStream = New FileStream(filename, FileMode.Open, FileAccess.Read)
' output a line
Dim b, i As Integer
b = stdin.ReadByte()
i = 0
While 0 < b
If i Mod 256 = 0 Then
Console.WriteLine("")
Console.WriteLine("Addr +0 +1 +2 +3 +4 +5 +6 +7 +8 +9 +A +B +C +D +E +F")
Console.Write("---- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --")
End If
If i Mod 16 = 0 Then
Dim h As String
Console.WriteLine("")
h = Hex(i \ 16)
Console.Write(Left("000", 4 - h.Length) & h & " ")
End If
Console.Write(Hex(b) & " ")
i += 1
b = stdin.ReadByte()
End While
Console.WriteLine("")
#If DEBUG Then
Console.WriteLine("")
Console.WriteLine("Press any key to continue...")
Console.ReadKey()
#End If
End Sub

End Module

ココログでの表示は上記のように多少問題が残っていますが、次回は Small Basic 用に設定をカスタマイズしてみたいと思います。

(つづく)


| | コメント (0) | トラックバック (0)

2017/05/10

プログラミング講座(174) 図形の左右反転

アニメエディターに関して、久しぶりに進捗(しんちょく:はかどること)がありました。
図形を左右反転する水族館のプログラムを書きました。プログラムID TKW252-6 として発行しました。
図175 水族館
【図175 水族館】

このプログラムでは Group_Flip というサブルーチンで図形を反転しています。Group_ は疑似的なクラス(Small Basic にクラスの概念がないので真似したもの)で、図形グループを扱います。よくゲームキャラクターなどをスプライトと呼ばれるグラフィックスの機能で画面上を移動させたりしますが、この図形グループは幾つかの図形を一つにまとめ、スプライトのように、移動、回転、拡大縮小、左右反転などをできるようにしたものです。

今回この Group_ 疑似クラスを設計するにあたり以下の点を重視しました。
・ 図形エディタで作成した Shapes_Init (と shape 配列)をそのまま使いたい。
・ Group_ の操作では shape の内容は変更しない。(左右反転など例外あり)
・ 操作として、登録/削除・移動・拡大/縮小・回転・左右反転・表示/非表示ができる。

このうち今回は登録・移動・左右反転を実装(じっそう:実現すること)しました。結果として、図形エディタで使っていた Shapes_Add, Shapes_Move を Group_Add, Group_Move に作り変え、新たに Group_Flip を追加することになりました。

今後は、今回作ったものに、さらに操作を追加し、アニメエディター Anime に組み込んでいきます。Anime は現在 GitHub に画面イメージを表示するのみのパイロット版を公開しています。CodePlex は年内に更新できなくなるとのことなので、GitHub に引っ越しをしました。

なお、今回の水族館プログラムには気になっている箇所があります。それは Group_Flip に時間がかかるので、魚が反転する間、他の動きが止まってしまうことです。反転中も他の動作ができるような仕組みを作る必要があります。


| | コメント (0) | トラックバック (0)

«ディープラーニング