画像移動

画像移動動作確認

画像移動の動作確認をするには、click_move.html をブラウザで直接開くか、XAMPP を利用します。
今回は、PHP ファイルを使用していないので、ブラウザで直接開くのが簡単ですが、 XAMPP も利用できるようにします。
XAMPP がインスト－ルされていない場合は、Move Image に戻り、左サイドナビ｢円運動アニメ－ション作成｣の中の
｢PHP を始める準備｣
を参照して、XAMPP をインスト－ルしてください。

画像移動スタ－トファイル保存

動作確認をしていきます。
あらかじめ、フォルダの例として
C:\xampp\htdocs\click_move\css
C:\xampp\htdocs\click_move\img
C:\xampp\htdocs\click_move\js
を作成しておきます。
XAMPP がインスト－ルされていれば、
C:\xampp\htdocs
のフォルダはあるはずです。
XAMPP をインスト－ルされていない方は、適宜
C:\click_move\css
C:\click_move\img
C:\click_move\js
の様なフォルダを作成してください。
ここからはTeraPadをエディタとして使用することを前提に説明していきます。
TeraPad に関しては、Move Imageに戻り、左サイドナビ｢動くアニメ－ション作成｣のなかの
｢動くサイトを始める準備｣
を参照してください。
TeraPadを起動して「表示(V)」を開いて「オプション(O)」をクリックしてください。
オプション画面が開いたら「文字コ－ド」タプをクリックして下記のようになっていること を確認し［OK］をクリックします。

TeraPadオプション画面

次に、Move Image に戻り、左サイドナビ｢画像移動｣の中の
画像移動スタ－ト HTML ファイル
を画面に表示させておき、 ファイル名の click_move.html 部分より上部を除き、
<!doctype html> 以下をすべてコピ－します。
既に開いている TeraPad のなかに今コピ－した内容を貼付けます。
「ファイル(F)」から「名前を付けて保存ファイル(A)」をクリックし
「ファイル名(N)」は、click_move
「ファイルの種類(T)」は、html ファイル(*.html)
とし、あらかじめ作成しておいたフォルダ
C:\xampp\htdocs\click_move
に、XAMPP をインスト－ルされていない方は、
C:\click_move
に保存します。
これで、click_move.html の保存作業は完了です。

画像移動 CSS ファイル保存

Move Image に戻り、左サイドナビ｢画像移動｣の中の
画像移動 CSS ファイル
を画面に表示させておき、 ファイル名の click_move.css 部分より上部を除き、@charset "utf-8"; 以下をすべてコピ－します。
再度開いた TeraPad のなかに今コピ－した内容を貼付けます。
「ファイル(F)」から「名前を付けて保存ファイル(A)」をクリックし
「ファイル名(N)」は、click_move
「ファイルの種類(T)」は、cssファイル(*.css)
とし、あらかじめ作成しておいたフォルダ
C:\xampp\htdocs\click_move\css
に、XAMPP をインスト－ルされていない方は、
C:\click_move\css
に保存します。
これで、click_move.css の保存作業は完了です。

画像移動 IMG ファイル保存

IMG ファイルを保存します。 各点の画像表示、始･終点、各制御点 0～5 の画像
点０、点１、点２、点３、点４、点５
の画像と XY 座標グラフの７つのファイルをダウンロ－ドします。
画像移動 IMG ファイル ダウンロ－ド
をクリックし、一旦保存し必ず解凍してから、
pos-0.png、pos-1.png、pos-2.png、pos-3.png、pos-4.png、pos-5.png、click_move.png
ファイルを
C:\xampp\htdocs\click_move\img
に、XAMPP をインスト－ルされていない方は、
C:\click_move\img
に保存します。
なお、この画像移動 IMG ファイルの元のイラストレ－タファイルもアップします。
画像を変更したい等ありましたらご利用ください。
画像移動 IMG AI ファイル ダウンロ－ド
これで、画像移動 IMG ファイルの保存作業は完了です。

画像移動 JavaScript ファイル保存

Move Image に戻り、左サイドナビ｢画像移動｣の中の
画像移動 JavaScript ファイル
を画面に表示させておき、 ファイル名の click_move.js 部分より上部を除き、
// JavaScript Document 以下をすべてコピ－します。
既に開いている TeraPad のなかに今コピ－した内容を貼付けます。
「ファイル(F)」から「名前を付けて保存ファイル(A)」をクリックし
「ファイル名(N)」は、click_move
「ファイルの種類(T)」は、JavaScript ファイル(*.js)
とし、あらかじめ作成しておいたフォルダ
C:\xampp\htdocs\click_move\js
に、XAMPP をインスト－ルされていない方は、
C:\click_move\js
に保存します。
これで、click_move.js の保存作業は完了です。

ブラウザで画像移動を確認

サンプルで確認

まず始めに画像移動がどのように動くかのサンプルを確認しておきましょう。
Move Imageに戻り、左サイドナビ｢画像移動｣の中の
画像移動動作確認
をクリックするとサンプル表示されます。
これと同じように自分の作成したファイルが動くか確認していきます。

作成したファイル確認

いよいよ保存した画像移動ファイルを表示します。
IEで見ることを前提に説明します。
まず、xamppを起動します。
XAMPP Control Panelが開いたら、Apache Start ボタン、下記、赤丸のところをクリックして Apacheを起動します。
XAMPP コントロ－ル画面
起動すると、Start ボタンが Stop に変わります。
次に、IE を起動しアドレスバ－に、
http://localhost/click_move/click_move.html
と記入し、Enterキ－を押します。
画像移動画面表示されたら確認開始です。
XAMPP をインスト－ルされていない方は、
C:\click_move\click_move.html
を例えば、IE で開きます。
この時、次のような

JavaScript アラ－ト画面

アラ－ト画面がでる時がありますので、許可をクリックします。
この画面を放置するとやがて消えてそのまま JavaScript が非動作になりますので注意してください。

  1. 入力確定動作確認

    ｢入力確定｣ボタンを押すと各点の画像が上段で指定された XY 座標に飛んで行くのを確認します。

  2. 入力値の異常検出

    XY 座標値に異常な値
    -100～500 の範囲を逸脱する値
    数字以外の文字
    入力なし
    等の異常な値を入力してから
    ｢入力確定｣ボタンを押してみましょう。
    入力値異常、例えば、
    「数値ではない入力値があります。」
    等のアラ－トがでることを確認します。

  3. 画像移動確認

    始･終点、各制御点のどれかをワンクリックして動かしたい番号を指定し、マウスクリックボタンは押さずに、 マウスを所定位置まで移動しもう一度ワンクリックして位置を設定してみます。
    うまく移動できたら OK です。
    又、XY 座標グラフの外には移動できないことも確認します。
    さらには、移動後の XY 座標が上段の XY 座標値と一致していることも確認します。

  4. 各ブラウザで確認

    もし、Internet Explorerの他にもブラウザがインスト－ルされているなら、 Mozilla Firefox、Google Chrome、Opera、safari でも動くことを確認しましょう。


これで、画像移動の確認は完了です


画像移動 JavaScript ファイル作成　に戻る
画像移動 CSS ファイル作成　に戻る
画像移動スタ－トファイル作成　に戻る
画像移動概要　に戻る

Move Image に戻る