Luaレッスン28「(3.4)タッチ対応デバイス用のスクリプトを作成する」和訳

出典:http://compasstech.com.au/TNS_Authoring/Scripting/script_tut28.html

レッスン28「(3.4)タッチ対応デバイス用のスクリプトを作成する」

2013年初頭、TI-Nspire apps for iPadがリリースされました。これによって、刺戟的な新たなチャンスがNspireプラットフォーム全体にもたらされました。Luaスクリプトで記述されたドキュメントはタッチ・インターフェイスと大変に相性が良く、画面上のオブジェクトを指先やスタイラスで動かせることほど楽しいことはありません。

現行のスクリプトのほとんどは、大型画面を利用することを前提に記述してあれば、今回紹介する新たなプラットフォームでも問題なく実行されるはずですが、最も効果的に活用する手段として検討すべき項目がいくつかあります。いくつか新たなコマンドも、TI-Nspire Luaコマンド・セットに追加されました。

  1. タッチ対応か否か APILevel = 2.2

タッチ対応機能は、実はTI-Nspire OS 3.2のリリース時点でスクリプト機能にすでに含まれていました。iPad appsがリリースされるまで、タッチ対応機能を試すためのプラットフォーム(OS 3.4)が存在していなかっただけなのです。新たなAPILevelが必要です。そのためのコマンドを利用するには、APILevel = 2.2と定義するところからスクリプトを開始しなければなりません(注:その前のAPIlevel(2.0)では、物理エンジンへのサポートが追加されました)。APILevel 2.2では、それ以前のすべての機能に加えてタッチ・サポートが追加されました。

 では、タッチ・サポートとは何でしょうか? それが必要になるのはどのような場合でしょうか? 

 画面上でオブジェクトをつかんでドラッグできるようになっている既存のスクリプトは、タッチ対応環境でもうまく機能するでしょう。mouseUp、mouseDown、mouseMoveといったコマンドは、ほぼ予想どおりに機能しますので、変更はまったく不要です(ただし、シングル・クリックはうまく機能するにしても、ダブル・タップの必要な場合はおそらく修正が必要でしょう)。

 入力したテキストを取り込んで表示するための2DEditorテキスト・ボックスも、新たなタッチ対応環境でうまく機能するでしょう。タブレットでテキスト・ボックスをタップすると、システム・キーボードが起動します。システム・キーボードは画面の半分を占めるかもしれませんが、タイピングすれば所望の効果が得られ、テキスト・ボックスを使ってテキストの入力と表示をおこなうことができます。

 推奨事項:システム・キーボードは画面の下半分を覆いますので、システム・キーボードが起動したときでもテキスト・ボックスが見えなくならないよう、テキスト・ボックスは可能な限り画面の上端へ寄せて配置するようにしてください(iPad appで気づいたでしょうが、Graphsアプリケーションの函数入力ラインが画面下端から上端へ移動したのは、まさにこの理由のためです)。

 iPadのシステム・キーボードは、Nspireのタッチ環境でも便利な使い方ができます。システム・キーボードの右下のキーは、普通はシステム・キーボードをかたづけるためのキーです。したしこのキーを押し下げたままにすると、[Undock]、[Split]という2つのオプションが現れます。[Unlock]を選択すると、システム・キーボードがフローティング状態になり、同じキーで上下へ動かすことができるようになります。こうすれば、画面の見やすい位置へシステム・キーボードが動かせます。

 [Split]を選択すると、システム・キーボードが2つに分割されてサイズが大幅に小さくなって、親指タイピングをするのに最適となります。分割されたシステム・キーボードもドラッグできますので、簡単に位置が変更できます(注:このモードでは、TI-Nspireの数学キーボードは利用できませんが、前述したように上下へはドラッグできます)。

 

  1. ちょっとしたタッチ機能をスクリプトへ追加する

下のスクリプトをよく見てください。

 このスクリプトの大半は、標準的なテキスト入力スクリプトです。空の文字列(msg)を定義し、テキストが打ち込まれると同時に各文字がこの文字列に追加され、追加された文字列が画面中央に表示されるというスクリプトです。

 このスクリプトの特徴はon.mouseUp()コマンドです。

 タッチ非対応デバイス(ハンドヘルド、エミュレーター)では、このコマンドは無視されてスクリプトが実行されます。タッチ・デバイスでは、画面のどこかがマウスでクリックされたときに、タッチ対応デバイスであるかどうかがこの函数によってチェックされます。タッチ対応デバイスであった場合は、さらにシステム・キーボードが表示されているかどうかがチェックされます。表示されていなければ表示され、表示されていれば非表示にされます。

 このちょっとしたコードを記述するだけで、タッチ対応のスクリプトになります。これにはさまざまな用途があります。一番シンプルなのはおそらくここに示したスクリプトでしょう。つまり、画面のどこかをタップすることで、タッチ対応デバイスであるかどうかをチェックし、キーボードが表示されているかどうかをチェックするというスクリプトです。

 しかし、ボタンやスライダーのように、タップ操作に反応させる必要のあるオブジェクトがほかにあったらどうなるでしょうか? 簡単な方法の1つは、ウィンドウの特定の部分を指定する方法です(たとえばy < 0.2*hと指定して、画面の上端がタップされたときにキーボードを表示するという方法などがあります)。

 もちろん、ボタンを追加して、そのボタンに"keyboard"または"keyPad"といったラベルを付けることは可能です。下の最初のスクリーンショットは、エミュレーター(またはハンドヘルド)から取得したものです。ここでは[keyBoard]ボタンは不要であり、普通に打ち込めば、打ち込んだ内容が表示されます。2つ目のスクリーンショットiPadで取得したものです。青い[keyBoard]ボタンをタップすると、iOSキーボードが表示されます。

f:id:ti-nspire:20141229115854j:plain

f:id:ti-nspire:20141229115901j:plain

 ここに示したように、ボタンなどのアイテムを表示するかしないかを指定する手段としてtouchテストおよびtouch.enabledテストを使用することさえ可能ですので、タッチ非対応プラットフォームではこのボタンが表示されないことがわかります。

ここまで述べてきた特徴について、サンプル・ファイルtouch_Button.tnsのスクリプトをじっくり調べてください。ボタンを追加するコードにも興味が湧くかもしれません。

platform.apilevel = 2.2

local screen = platform.window

local w = screen:width()

local h = screen:height()

local msg = ""

function on.mouseUp()

     if touch and touch.enabled() then

          if touch.isKeyboardVisible() == false then

               touch.showKeyboard(true)

          else

               touch.showKeyboard(false)

          end

     end

end

function on.charIn(ch)

     msg = msg .. ch

     screen:invalidate()

end

function on.backspaceKey(ch)

     msg = msg:usub(0, -2)

     screen:invalidate()

end

function on.paint(gc)

     w = screen:width()

     h = screen:height()

     gc:setColorRGB(50, 50, 150)

     gc:setFont("sansserif", "i", 12)

     local str = "Type to enter text..."

     gc:drawString(str, 0.1*w, 0.1*h, "middle")

     gc:setColorRGB(150, 50, 50)

     gc:setFont("sansserif", "b", 18)

     local sw = gc:getStringWidth(msg)

     gc:drawString(msg, (w - sw)/2, h/4, 'middle')

end

 

  1. タッチ・プラットフォーム用にスクリプトを最適化する

iPadのディスプレイは、ハンドヘルドよりもコンピューターのディスプレイと共通点が多い(大きな画面へ移行できる可能性があることは素晴らしい)。しかし内部的にはハンドヘルドと似ている重要な点があります。それは、定期的に画面をリフレッシュすることが、コーディングの際に重要であるということです。表示の変化を伴う函数すべてに、platform.window:invalidate()というコマンドを追加するという方法を採ります。場合によっては、定期的に画面をリフレッシュするのではなく、タイマーを追加する必要のあることもあります。しかし画面の変化が確実に反映されるようにしたい場合は、画面のリフレッシュをコードに記述しなければなりません。

特にタッチ対応デバイスで重要なことは、ポインターのサイズです。選択ツールとしては、指先もスタイラスもコンピューターまたはハンドヘルドのマウスよりもずいぶん大きいので、そのことも考慮してスクリプトを作成する必要があります。

そのため、一部のオブジェクト・クラスについては、contains函数を変更しなければならない可能性があります。スライダーの把手として使用する円を例に考えてみましょう。円の半径がr、円の中心とポインターの現在のxy座標との距離がdである場合、普通は、d <= rでcontainsプロパティーをtrueと定義します。しかしスクリプトによっては、d <= 2*rあるいはd <= 3*rという値に定義する必要もあるでしょう。

また、何かオブジェクトを押したときに、そのオブジェクトを大きくするということを検討しても良いでしょう。選択したオブジェクトが大きくなれば、指先やスタイラスで押したときにも、隠れて見えなくなることがなくなるからです。

こうしたアイディアについては、http://compasstech.com.au/TNS_Authoring/Scripting/luajs/controls.htmlに例示しました。

------------------------------------------------------------------

訳註:かなりはしょりはしたが、Scripting HQに掲載された第28レッスンまでを訳し終えた(レッスンはまだ続いている)。