HyperCard tribute

スライドバーを作る

　アナログな数値入力をする方法を考えてみます。年齢などのように正確な入力を必要とする場合ならば、ダイアログボックスや増減ボタンを備えた入力方法が適しています。しかし、データの幅が大きい場合や、感覚的な入力の方が好ましい場合、例えばウィンドウのスクロールバーやサウンドの音量などには、アナログ入力の方が直感的にわかりやすくなります。
　そこで、ここではスライドバーを作ってみます。スライドバーとは、バーをドラッグする事で値を入力する方式のことです。

　この様なスライドバーを用いて、スピードなどの調整をするようにしてみましょう。視覚的であるスライドバーを用いることで、コンピュータに接しているという感覚が少しですが払拭されます。

　ボタンを１コ作り、ボタン名は slide にします。カード上には、グラフィックとしてメーターを書き込みましょう。
 1 
 2 
 3 
 4 
 5 
 6 

 7 
 8 
 9 
10 
11 
12 
13 
14 
15 
16 
17 
18 

on mouseDown
  put the top of me-the mouseV into V
  repeat while the mouse is down
    set the top of me to the mouseV+V
  end repeat
end mouseDown

on mouseUp
  put the loc of me into bz
  put item 2 of bz into y
  if y<=100 then put 80 into y
  else if (100 < y and y <= 140) then put 120 into y
  else if (140 < y and y <= 180) then put 160 into y
  else if (180 < y and y <= 220) then put 200 into y
  else if 220 < y then put 240 into y
  put (y-80)/40+1
  put y into item 2 of bz
  set the loc of me to bz
end mouseUp

　mouseDownのハンドラには、垂直のみに移動できるスクリプトを書き込んであります。


  • put the loc of me into bz
    　８行目ではボタンの座標を取り出し、変数bzに代入します。


  • put item 2 of bz into y
    　９行目で、ボタン座標の２つ目のアイテム、すなわちy座標を取り出して、変数yに代入します。


  • if y<=100 then put 80 into y
    　１０行目から１４行目で座標の補正を行います。範囲外の値を範囲内に変更するためと、目盛りにぴったりと合わせるために、ある区間にある座標は目盛上にくるように補正するのです。


  • put (y-80)/40+1
    　１５行目で選んだスピードを取り出します。まず、初期値の値を引いてspeedデータを０に戻し、目盛幅で割ることでどのどのデータを選んでいるかを調べます。現在のデータは０から始まっていますので、最後に１をプラスします。


  • put y into item 2 of bz
    　補正したy座標を１６行目で、ボタン座標の２つ目のアイテムの位置に、また戻しておきます。


    　これで、スライドバーができました。
    　１５行目の計算式が難しいと感じるならば、１０行目から１４行目までのthen節の中にput文でspeedを代入するようにすればよいでしょう。


    次は水平に移動できるボタンです。今度は疑似アナログ入力をさせてみます。 
     1 
 2 
 3 
 4 
 5 
 6 

 7 
 8 
 9
10 
11 
12 
13 
14 
15 
16 

    on mouseDown
  put the left of me-the mouseH into H
  repeat while the mouse is down
    set the left of me to the mouseH+H
  end repeat
end mouseDown

on mouseUp
  global speed
  put the loc of me into bz
  put item 1 of bz into x
  if x<=100 then put 100 into x
  else if 400<=x then put 400 into x
  put x-100 into speed
  put x into item 1 of bz
  set the loc of me to bz
end mouseUp

    　mouseDownハンドラは、水平にドラッグするスクリプトを書いてあります。
    　１１・１２行目で、左右の範囲を越えてしまったボタンをチェックします。
    　１３行目で、データの補正をしてあります。ボタンのＸ座標は１００から初めてありますので、１００を引いています。このスクリプトでは右に１ドット動かすことで、speedが１増えるようにしてありますが、この値を変更することでより大きな値や小さな値に対応することができるようになります。