スマートフォン版使い方_JavaScpict

JavaScpict ジャバスクピクト (ピクトグラミング JavaScript版)　使い方

画面の説明

画面は3つの部分から構成されます．上側は，ピクトグラムを表示する「人型ピクトグラム表示領域」，中央は，プログラムを記述する「プログラムコード入力領域」，下側はプログラムの入力を支援する「プログラムコード入力支援ボタン」です。

プログラムコード記述領域にプログラムを入力することで，人型ピクトグラムのポーズを変えたり動かしたりすることができます。また，「プログラムコード入力支援ボタン」を押すとその命令文を「プログラムコード記述領域」に追加できます．JavaScpictでは，JavaScript言語でプログラミングできます．

 

利用目的に応じたオプション

JavaScpictでは利用の目的に合わせて4つの機能をオンオフできます．

画像（名称）	説明
（座標系表示）	画像の右に表示されているチェックボックスをオンにすると，座標系が表示されます．座標はXY座標系（X方向とY方向の値，両方を組み合わせて位置を表現する）です．横方向がX座標で左端の-320から右端の320まで，縦方向がY座標で上端の-320から下端の320までをとります．つまり，中心が（0,0），左上が（-320,-320），右上が（320,-320），左上が（-320,-320），右上が（320,-320），つまりX軸正方向が右，Y軸正方向が下となります．数学の座標軸とY軸だけ逆方向なので注意して下さい．
（ドラッグ不可）＊標準でオン	画像の右に表示されているチェックボックスをオフにすると，人型ピクトグラムは「ピクトグラム表示パネル」上でピクトグラムの体の部位を直接ドラッグすることででも操作することができます。また，ピクトグラム表示領域上で，始点を人型ピクトグラムの体の部分以外の点にして，終点までドラックすると，線分が描けます．

 

コントロールボタン

ピクトグラミングでは再生・停止などのコントロールは，コントロールボタンから制御します．

画像（名称）	説明
（初めから再生）	はじめから再生する．
（一旦停止）	停止します．
（停止位置から再生）	停止している状態から再生します．
（すべてクリア）	プログラムコード入力領域に記述されているプログラムをすべて消去します．消去前に確認のダイアログボックスが表示されます．

さあ！始めよう

まずは，１時間で学ぶジャバスクピクトからはじめてみましょう．

 

作成コンテンツのダウンロード

 

作成したコンテンツのダウンロードは2通りあります。

 

[1. ショット画像のダウンロード]

（１）画像ダウンロードボタンを押すと，作品名.png の名前でショット画像が保存されます．

[2. アニメーションのダウンロード]

（１）動画ダウンロードボタンの右側にあるチェックボタンをオンにします．

（２）一度最初から最後まで実行します．ゆっくり実行されますが，内部的にはアニメーション画像が動的に生成されています．

（３）動画ダウンロードボタンを押すと，作品名.gif の名前でアニメーション画像が保存されます．

 

 

 

 

画面右上のプログラムコード記述領域に命令を入力し定義します．入力文字列は動作や状態を変化させるための「命令」コードと，引数列を空白で区切る以下の方式です．

pic.命令(引数1, 引数2 ．．．．);

命令セット一覧 人型ピクトグラムの動きの変化を表現できる「ピクトアニメーション」，移動の経路が線で引かれることで図形を描く「ピクトグラフィックス」の２種類の命令から構成されています．また両方に共通して使用される変数定義，繰返し，条件分岐等の命令が用意されています．