HyperCard tribute

スクロール文字入力システム

　フィールドに書き込まれた「ひらがな」や「カタカナ」を左右にスクロールさせて文字入力をするシステムを作ってみます。
　左右の矢印を押してフィールドを動かして入力したい文字を探し、入力したい文字が画面に現れたらその文字をクリックして入力します。表示されている文字の上には全てボタンを透明にして置いておきます。ボタンは左から順に「b19」「b20」・・・・「b34」「b35」という風に名前を付けて下さい。
　消去には、最後の文字を消去する時に「１つ消す」ボタンを、全部消す時は「全部消す」を用意しておきます。名前は「１つ消す」「全部消す」として下さい。


入力ボタンのスクリプト
　このカードには１６個の入力ボタン（文字の上に置いてある透明ボタン）がありますが、その入力ボタンには以下のmouseUpのハンドラを書き込みます。
　その下のtypeハンドラはカードに書き込みます。 
 1 
 2 
 3 

 4 
 5 
 6 
 7 
 8 
 9 

on mouseUp
  type
end mouseUp

on type
  put the short name of target into num
  put empty into char 1 of num
  put char num of cd fld "scroll" after cd fld "nyuu"
  cur
end type

  • type
    　２行目では type ハンドラを呼び出します。つまり、１６個のボタン全てに type ハンドラを載せてしまうと管理や変更が難しくなるためにカードに置いたハンドラを参照するのです。


  • put the short name of target into num
    　５行目では クリックされたボタンの情報を取り出しています。target命令最初にクリックされたオブジェクトを指定することができますので、これを用いてそのオブジェクトの名前を取り出すのです。
    「target（最初にメッセージを受け取ったオブジェクト）」
    　　の
    「the short name（短い名前）」
    　　を
    「変数num」
    　　に
    「put 〜 into 〜（上書き代入する）」


  • put empty into char 1 of num
    　６行目では取り出した情報のいらない部分を消し去っています。入力ボタンは一番左のボタンから順番に「b19」「b20」・・・・「b34」「b35」となっているのですが、押されたボタンの位置がわかればいいので数字の前についている「b」は必要ありません。ですから、最初の「b」を取り除くのです。
    　「このようなややこしい事をしないために、ボタンの名前は最初から数字にしておけばいいのではないか？」と思われるかもしれませんが、ボタンの名前を数字のみにしてしまうと、ボタンのIDやカードボタン番号とHyperCard（もしくはあなた）が勘違いする恐れがありますので「b」をつけておくのです。簡単なスクリプトで効果は絶大ですから覚えて置いて損はないでしょう。
    「empty（空っぽ）」
    　　を
    「変数num」
    　　の
    「char 1（一文字目）」
    　　に
    「put 〜 into 〜（上書き代入する）」


  • put char num of cd fld "scroll" after cd fld "nyuu"
    　７行目でフィールド「スクロール」のnum文字目を、フィールド「nyuu」に追加します。
    「cd fld "scroll"（画面中央のスクロールするフィールド）」
    　　の
    「char num（num文字目）」
    　　を
    「cd fld "nyuu"（画面上部の名前が表示されるフィールド）」
    　　に
    「put 〜 after 〜（最後尾につけ加える）」

    　フィールドはスクロールするのに、どうしてクリックした文字がちゃんと入力されるのでしょうか。それは、フィールドに代入される文字数とボタンの名前の付け方にからくりがあります。

    　例えばフィールドに「あいうえおかきくけこ」の１０文字が入っていたとします。そのフィールドは、行のそろえを「中」にしておき、画面上には文字列の中央部分が表示されるようにしておきます。下の例は中央の４文字が見えるようにした場合の図です。
    　この時重要なことは、画面上に表示される部分は両端に同じ字数分だけ残るようにしなければならないということです。つまり「えおかき」では、左右３文字ずつが表示されないようにフィールドの大きさを調整しているのです。そして画面上に表示される文字の部分にだけボタンを置きます。
    　上の図を見るとわかると思いますが、ボタンの名前の付け方は左から順番に数えた数字を付けます。それではここで、フィールドを左に１文字分スクロールさせてみます。
    　フィールドをスクロールさせてもフィールドの内容は同じですから、現在のフィールドの位置と、クリックされた位置は対応するというわけなのです。

    　今回のスクロール文字入力システムでは、５２文字をフィールドに代入し、画面上には１６文字が見えるようにフィールドを調整しています。そして、左右に１８文字ずつ隠れている文字があるため、一番左のボタンは「b19」となるわけです。


    カーソル表示のスクリプト
    　このスクリプトはカードに書き込みます。現在の文字数を数え、その位置にカーソルを表示します。 
     1 
 2 
 3 
 4 
 5 
 6 

    on cur
  put "￣" into cd fld "nn"
  repeat with i=1 to the number of chars of cd fld "nyuu"
    put "　" before cd fld "nn"
  end repeat
end cur

    　フィールドに「とけい」という文字が入っているとして説明をします。


  • put "￣" into cd fld "nn"
    　カーソルの位置は、毎回一番左から移動させて表示していますので、ここでカーソルをフィールド「nn」に上書き代入しておきます。


  • repeat with i=1 to the number of chars of cd fld "nyuu"
    　フィールド「nyuu」の文字数だけrepeat節を繰り返します。今回は、文字数は３なので３回繰り返します。


  • put "　" before cd fld "nn"
    　空白をフィールドの一番前につけ加えることで、カーソルを１文字分右に移動させます。
    （繰り返し１回目）
    （繰り返し２回目）
    （繰り返し３回目）
    　すなわち、フィールドの文字数分だけ右に移動させることで、現在のカーソルの位置となるわけです。


    選択のスクリプト
    　スクロールさせる文字グループを選び出します。ポップアップで選んだグループのデータをフィールド「scroll」に代入します。 
     1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
10 

    on mouseUp
  lock screen
  put the selectedText of cd btn "選択" into text
  if text="ひらがな" then put "ふへほまみむめもやゆよらりるれろわんっぃぇゃゅょ　あいうえおかきくけこさしすせそたちつてとなにぬねのはひ" into cd fld "scroll"
  else if text="カタカナ" then put "フヘホマミムメモヤユヨラリルレロワンッィェャュョ　アイウエオカキクケコサシスセソタチツテトナニヌネノハヒ" into cd fld "scroll"
  else if text="だくおん" then put "グゲゴザジズゼゾダヂヅデドバビブベボパピプペポ　　がぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽガギ" into cd fld "scroll"
  else if text="記号・数字" then put "！○□△☆◎♂♀“”→←↑↓＆♯♭♪〜％＄℃　１２３４５６７８９０＋−×÷＝＜＞∞√αβγθλ…・：；？" into cd fld "scroll"
  else if text="アルファベット" then put "ｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺａ" into cd fld "scroll"
  unlock screen with dissolve very fast
end mouseUp

    左右へのスクロールボタンのスクリプト
    　ここでは、説明を省きます。わからなければ、「自由自在にスクロール」のセクションを読んで下さい。


    「一つ消す」のスクリプト
    　フィールドの最後の文字を消した後、curハンドラを呼び出します。 
     1 
 2 
 3 
 4 

    on mouseUp
  put empty into last char of cd fld "nyuu"
  cur
end mouseUp

    「全部消す」のスクリプト
    　フィールドの文字を全て消し、curハンドラを呼び出します。 
     1 
 2 
 3 
 4 

    on mouseUp
  put empty into cd fld "nyuu"
  cur
end mouseUp

    フィールド「nyuu」のスクリプト
    　フィールド「nyuu」は直接打ち込むことができるように、ロックはかけないようにしておきます。これで、漢字などを直接打ち込むことができるようになりました。しかし、ここで問題が出てきてしまいます。
    　直接打ち込めるように、ロックをかけなかったおかげで、カーソルを表示するcurハンドラをどこで呼ぶかの問題が出たのです。できることならば、一文字打つごとにカーソルが一つ右に動いてくれればいいのですが、それはできません。idle ハンドラを用い常にカーソルの位置をチェックしようとしても、ひらがなに変換する前にidle ハンドラが呼ばれてしまい、フィールドには半角文字分しか代入されないことになります。日本語への変換が済んだ後にcurハンドラを実行しようとしても、フィールド上でカーソルがブリンクしている時に、ハンドラを読んでしまうとフィールドのブリンクは消えてしまうのです。すなわち、まだ入力の途中であったとしてもフィールドのカーソルは消え入力の続きができなくなってしまうのです。
    　そこで、少し状況は違うのですが、フィールドへの直接入力が終わったという状態を、フィールドの上からマウスカーソルが出たらというメッセージを用いて表現してみます。フィールドへの直接入力に対してリアルタイムにカーソル位置は移動しませんが、実際には直接入力が終わった時点で、フィールドの外へカーソルを移動させるはずなので似たような感じになると思います。 
     1 
 2 
 3 

    on mouseLeave
  cur
end mouseLeave