aoi

なでしこ＆葵まとめに戻る

Web開発環境「葵2」(あおい２)とは、日本語プログラミング言語「なでしこ」を利用できる、Webアプリケーションの開発・実行環境。ここでは、その「葵2」を使う上でのメモを残していきます。いちおう、例題としてなでしこ学園メーカーを移植してみました。

• 「あおい学園メーカー」を公開：葵2で、脳内メーカークローンのWeb版を作ってみました
• ソースコードを公開

ここでは、葵2の次のバージョンについて調べています。

• Windowsエディタ版 aoi2-010.zip
• Webエディタ版 2007-08-27バージョン

はじめるには †

とりあえず、プログラミングしてみましょう。

入手 †

• 公式サイト

Windowsエディタ版(以下、Winエディタ版)とサーバー版の2種類があります。

Winエディタ版は、Windowsパソコン上で動作します。

サーバー版は、全OSで利用可能で、Webサーバー(Windows,Linuxなど)に設置してブラウザ経由で利用できます。ブラウザ上で葵プログラムを開発・実行・配布できます。

配布機能を使わない場合は、PHPが動作するサーバーであれば何でもOKらしいです(確認中)。

また、設置済みのサーバー版は、葵Webエディタで利用可能です。

Winエディタ版のインストール †

1. ダウンロードしたファイルを解凍します

Winエディタ版でのプログラム実行 †

初回のみ、Adobe Flash Playerの設定が必要そう。

1. 解凍したファイルの「aoi2edit.exe」をダブルクリック
2. 下の「基本的なコード」から、適当なコードを入力
3. 実行ボタンをクリック
4. 「Adobe Flash Playerが潜在的な脅威を検出しました・・・127.0.0.1」というダイアログボックスが表示された場合
   1. ダイアログの「設定」ボタンをクリック
   2. ブラウザに「Adobe Flash Player」設定マネージャが表示されたら、「グローバルセキュリティ設定」で「編集」-「追加」を選ぶ。
   3. 葵vmのファイルパス(・・・/aoivm.swf)をコピペする
   4. いったんブラウザを閉じる
5. 再度、プログラムを実行する

サーバー版のインストールと設置 †

手元のWindowsパソコンにXAMPPを入れて、そこに導入しました。

1. ダウンロードファイル(aoi2_web-20070827.zip)を解凍する
2. 解凍ファイル中のEditorsフォルダ以下を、「(XAMPPのインストール先)\htdocs\」にコピー
3. 「(XAMPPのインストール先)\htdocs\Editor\setup.php」をブラウザから実行。
4. インストールパスの入力を求められたら、「http://localhost/editor/」という感じに入力
5. 無事にセットアップが完了したら、安全のため、setup.php と cgi/setup フォルダを削除
6. 葵2エディタを起動するには、ブラウザから「http://localhost/aoi/aoi2editor.html」を呼び出す

ドキュメント †

• チュートリアル
• リファレンス
• なでしことの違い
• Flashへの対応 ダウンロードファイルの中に説明有り

基本的なコード †

基本的なコードをフツーに書けないと何も始まらないのですが、そのあたりの情報が必ずしも充実している訳ではないので、メモを残していきます。記述上の細かな注意や、バグっぽいところもあるみたい。

今のところ、葵2の日本語プログラミング言語は「なでしこ」のサブセットになっている(Windows上で動作させるときは、「なでしこ」の言語エンジンも利用できる)。

ハローワールド †

「こんにちは」を表示する。

テキスト中で{}を使って、変数を展開することもできる

テスト＝１
「さようなら、{テスト}」を言う。

テキスト入力 †

ダイアログボックスに入力する方法

「名前は？」と尋ねる。
「{それ}さん、こんにちは」を表示する。

テキストボックスに入力する方法。イベント名はデフォルトで、(ボタン名)+イベントになる。

「入力してね」のエディタ作成して、文字入力ボックスに代入。
「確認」のボタン作成。

●確認イベント
 文字入力ボックス＠テキストと言う。

テキストボックスに入力する方法（イベント関数を定義）

入力テキストボックス＝「入力してね」のエディタ作成。
確認ボタン＝「OK」のボタン作成。
確認ボタン＠イベント＝「ボタン確認」

●ボタン確認
   入力テキストボックス＠テキストと言う

画像を表示 †

チュートリアル/画像を表示しようのサンプルコード。Winエディタ版で動かすには、Adobe Flash Playerの設定変更が必要です("Winエディタ版でのプログラム実行"を参照)。

URL=「http://art1.photozou.jp/bin/photo/6504/org.bin」
ＳＰ＝スプライト作成
ＳＰ＠画像＝URL

「http://」経由でjpeg形式を表示。gifやpngだと、(今のところ)表示されないみたい。

画像を合成して表示 †

2つのスプライトで画像を表示すれば、普通に画像を重ね合わせることができます。

URL1=「http://farm2.static.flickr.com/1381/1435827859_5447bec092_m.jpg」
ＳＰ1＝スプライト作成
ＳＰ1＠画像＝URL1

URL2=「http://farm4.static.flickr.com/3518/3998363830_c24491bdf2_m.jpg」
ＳＰ2＝スプライト作成
ＳＰ2＠左＝180
ＳＰ2＠上＝300
ＳＰ2＠画像＝URL2

データの保存と読み込み †

Flash Playerのサンドボックス(ブラウザローカル領域 SharedObject)に対して、データを読み書きできる。クッキーの代わりか？　次の2つのサンプルコードが、同じサイトで実行された場合、保存したデータが表示される。

#保存
「test_aoi.txt」に「あいうえお」をローカル保存する

#読み込み
「test_aoi.txt」からローカル読む
それを言う

参考:Flash Playerヘルプ-ローカル記憶領域の設定

2次元配列 †

配列は、CSV形式ではなくJSON形式で記述する。2次元配列にするにはネストする。

テスト配列=[[1,2],
[3,4],
["abc","efg"]]

3回
   A=テスト配列:(回数-1):0
   B=テスト配列:(回数-1):1
   A&「,」&Bを表示

配列の要素番号を変数で表す時には、必ず「(...)」(カッコ)で囲む。

テスト配列=[[1,2],
[3,4],
["abc","efg"]]

3回
    イ＝回数-1
    2回
        ロ=テスト配列:(イ):(回数-1)
        ロを表示

関数の定義 †

「関数を呼び出します」を言う。
戻り値＝「こんにちは」を出力する
戻り値を言う

●出力する(メッセージを)
   「最初の関数です」を言う
   メッセージをテストする

●テストする(テキストを)
    「２番目の関数です」を言う
   テキストを言う

   それは、「完了です」

関数定義の直後で１行空けると、関数が動かなくなることがある(バグ？)

繰り返し †

「なでしこ」と異なり、「反復」命令では、現在呼び出している値は対象ではなくそれに代入されている。また、回数が使えない。回数を使いたい場合は、「n回」命令に置き換える。

テスト配列＝["a","b","c","d","e","f"]

#反復
テスト配列を反復
    「{回数}：{それ}」を言う　#回数は表示されない

#N回の繰り返し
イ＝テスト配列の要素数
(イ)回
    「{回数-1}：{テスト配列:(回数-1)}」を言う

なお、「反復」命令と「n回」命令の直後に1行空けると、エラーになるので注意が必要(バグ？)。

そのほか †

現在の葵2について、気づいたこと

プログラム保存 †

Winエディタ版で、「名前を付けて保存」の動作が少し怪しい。「保存」ボタンをクリックしても、いつまでも「名前を付けて保存」ダイアログが表示されて、実際には保存されていない。

新しいファイル名を指定して「保存」ボタンをクリックしたあと、「キャンセル」すると、メインウィンドウに戻る。すると、ファイル名が新しいモノになっている。しかし、ファイルは保存されていないので、「ファイル」-「保存」を実行すること。