Edition」の初級から中級のチュートリアルです。このチュートリアルは、中学・高校生からプログラミングが始めての方達を対象にして、Mac&Winのアプリを同時に作ります。メニュー、タブ・パネルこの章の概略LiveCodeの開発環境にあるメニュー・ビルダーを使って、基本的なメニューの構成と、スクリプトのフォーマットを作ります。メニューを設置する事で、プラットフォーム間で起きる違いについて。テキスト・フィールドで使用できる、エディット・メニューのスクリプト。ディセエイブルド、ニーモニック、ショートカット、サブ・メニュー、タブ・メニュー。条件の違いで変えるメニュー・セッティング。スタックからブラウザーでウェブページを開くスクリプト。OSとWindowsののアプリケーションのメニューは、見た目が違っています。OSはメニューバー(menubar)と言って、アプリケーション毎にデスクトップの最上部にメニューが並びます。個々のウインドウの内側の左最上部に小さくメニューが並びます。クロスプラットフォームで同じアプリを開発する場合は、まずその事を考慮に入れてください。Study」としてください。Builder」を開きます(下図)。Name:」を「myMenu」とします。Help」の3つのメニュー名が、デフォルトで入っています。後からでもこれらは直せますから、取り敢えずこれで「OK」をクリックします(下図)。Bar:」に入って、左側にデフォルトの3つのメニューと、右にはそれぞれのメニューのメニュー・アイテム(menuItem)のリストが入っています(下図)。メニュー・アイテムにはちょっと見慣れない「&記号」とか斜線もありますが、後から説明します。Menu)」があります。Bar」をチェックすると、LiveCodeの編集用のメニューが見えなくなってしまうので、編集中はチェックを入れないでください。入門用には「Editメニュー」のスクリプトを書いて行くのが実用的かと思うので、左のメニューから「Edit」を選んでハイライトにしてください(下図)。右のメニュー・アイテムのリストもそれに伴って、「Editメニュー」のデフォルト・アイテムに変わります。4項目のメニュー・アイテムと、ハイフォン(-)の下にもう1項目、全部で6ラインあります。All」に変更します。All」とタイプします(下図赤枠)。次にアイテム・リストの下の方にある「Shortcut」にチェックを入れて、その右の「+記号」の処にショートカットのキャラクター「A」を入れます。All」の為のショートカットです。コマンド」にチェックを入れます(上図右下赤枠)。OSが開発環境でも、このLiveCodeドキュメントをWindowsに持って行けば、「コントロール+A」のショートカットに自動的に切り替わりますから大丈夫です。コマンド」になります。Script(上図左下赤枠)」をクリックして、あらかじめフォーマットを書き込んでおくのが便利です。オート・スクリプトの内容のウインドウが開きます。All」に直されています。これはまだ基本のフォーマットだけで、後からもう少し具体的なスクリプトを書き込んで行きます。Script」をクリックすると通常のスクリプト・エディターが開かれます(下図)。コピー」の実際のスクリプトを書き込む前に、少しメニューのオブジェクトと視覚多的な説明をします。スクリプト・エディターもメニュー・ビルダーも、ここで一旦閉じてください。OSではブラウズ・ツールを持って、開発スタック「menuStudy」をアクティブにしていれば、メニュー・ビルダーで作ったメニューの「myMenu」が、メニューバーに表示されます。「myMenu」は作ったメニュー全体に付けた名前ですから、ユーザー向けにはどこにも表示されません。「Editメニュー」をクリックしてアイテムをプルダウンさせると、4項目だけのメニュー・アイテムが見えます(下図)。同じLiveCodeの書類をWindowsで開いて「Editメニュー」をプルダウンさせてみると、Macと同じ4項目の下にグレーのラインと「Preferences」が見えます。ハイフォン」と「Preferences」があるので、Windowsではメニュー・ビルダーで見える通りですが、Macではなくなっています。それではMacの「Preferences」はと言うと、アプリケーション名(今は「LiveCode」)のメニュー・アイテムの「環境設定」にあります。このプロジェクトが完成してスタンドアロン・アプリケーションになったら、そのプログラム名が今ある「LiveCode」に変わって、アップル・メニューの右隣に入ります。OSのシステムに沿ったもので、同じように「Helpメニュー」にある「About」もアプリケーション名のメニューに移動します(下図)。Study」にしました)。オブジェクトとしてのメニューを説明しなければいけないのだけれど、なかなかたどり着けませんね。Windowsだとメニューのオブジェクトはカードの左上に見えています。OSだったら、メニューバーから取り外してみましょう。スタック「menuStudy」のメニューバーを空にしなさい。bar」のチェックを外したのと、同じ機能のスクリプトです。OSのスタックの左上にも、Windowsのメニューと同じように3つのメニューが現れます。アプリケーション・ブラウザーでカードにある「myMenu」をセレクトしてみると、3つのメニュー・ボタンをグループ化したものである事が分かります(下図)。Grouped(上図赤丸)」でグループ内がセレクトできるようにすると、中のにあるボタンが選べます。menu)の、ボーダーを取ったボタンと同じオブジェクトです。OSが開発環境の人だったら、スクリプトでグループ「myMenu」を見えるようにした時、少しだけスタックの天地が伸びたのに気が付いたかもしれません。OSだったら、スタック・インスペクターでサイズを確認してください。「22ピクセル」デフォルトだった天地よりも伸びています(上図)。OSではグループ「myMenu」が隠れるので、スタックの天地は400ピクセルですが、同じLiveCode書類をWindowsのアプリケーションにした場合は、メニューの分だけ大きくなって、スタックの天地が422ピクセルになる事を、心に留めておいてください。OSのアプリになります。400」のカラーのグラフィックをカードのセンターに置いてから、メニューをメニュー・ビルダーで作ったスタックです。400」のカラーのグラフィックをカードのセンターに置いてから、メニューをメニュー・ビルダーで作ったスタックです。OSでスタンドアロン・アプリにした場合、上のメニュー部分が隠れてスタックの天地はこれよりも短くなります。ほとんどのアプリケーションで、この天地の違いはさほどの影響はないのですが、この事を知っていないと、どうも何か違っているなと、後から考えなくてはならなくなります。OSの違いでメニューを設定するグループ化したメニューのプロパティについて、もうひとつ言っておかなければ行けない事は、バックグラウンド・ビヘイビア(backgroundBehavior)にしているので、追加であたらしく作って行くカードの全てで、同じメニューとしての役割をします。OSでメニューをデスクトップのメニューバーにセットするのは、スタックのメニューバーをメニュー名(ボタンのグループ名)にセットすると言う表現します。スタック「menuStudy」のメニューバーを「myMenu」に設定しなさい。bar」にマークしておけば、LiveCodeエンジンがプラットフォームで自動でメニューの設定をしてくれます。OSでメニューバーにセットしていると、開発書類のスタックがアクティブになっている間は、開発書類のスタックのメニューがメニューバーに出ています。LiveCodeの編集用メニューを出すには、LiveCodeのツール・パレット等をマウスでアクティブにしなければいけません。OSで開発中にメニュー・オブジェクトを出しておく事もしばしばあって、スクリプトでメニューの設置を知っておいた方が問題がありません。クロスプラットフォームでメニュー設定を使い分けるには、スタックがオープンされる前(preOpenStack)に、プラットフォーム(platform)の違いを判断して、メニューバーにメニューを設置するか、それともスタック(ウインドウ)の上部にメニューを表示するかの指示を出します。スクリプトは、メインスタックのスクリプト・エディターに書き込みます。スタック「menuStudy」のメニューバーを「myMenu」にセットしなさい。スタック「menuStudy」のメニューバーを「」にセットしなさい。Script)で、スクリプトのフォーマットを書き込んだままになっていますから、完成させましょう。Grouped」をクリックして、グループ内のオブジェクトが選べるようにします。次に「Editボタン」を選んで、スクリプト・エディターを開いてください。アプリケーション・ブラウザーでボタン・オブジェクトを選んで、スクリプト・エディターを開いても、もちろん良いです。メッセージ・ハンドラーが「menuPick」でパラメータが「pWhich」に、「switch文」のスクリプトが書き込まれています。2種類のイメージ」にありましたが、「swicth文」は使わないでパラメータで写真のリンクを入れ替える時に使いました。イメージはバイナリー・データ」で説明をしています。その時の説明を引用しましょう。『スイッチ(switch)は、いくつかの可能性のあるバリュー(value)から、該当するものを選ぶ構文で、得られる結果は「if」とも似ています。「if」の場合は、該当しなければ、次々に「もしそうでなければ」「もしそうでなければ」と、ドンドン中に入ってチェックして行きます。ケース」を使って、「この場合は」「この場合は」と上から順にチェックして、該当するバリュー(value)に当たった時、その中に用意したスクリプト(ステートメント)を実行します。今回は「いくつかの可能性のあるバリュー(value)」は、メニューピック(menuPick)のパラメータの「pWhich」によって決まります。メニュー・アイテムのどれかが選ばれると、その値は「pWhich」に受け取られて、スイッチ(switch)の「case」に当てはまる値を上から順にチェックして、該当する値に出会った処で、そのステートメントが実行されて、「break」で他の残りのケース(case)をスキップして、スイッチ(switch)文から抜けます。それでは実行するステートメントを完成させます。カード上にテキスト・フィールドがあって、その為のエディット(編集)機能と言う事にします。上の図のスクリプト・エディターにある2つのハイフォン(--)の付いた行にステートメントが入ります。All」と「Preferences」のみを書いています。そのフィールドのテキストを(すべて)セレクトしなさい。Preferences.」とダイアログで応えなさい。スイッチ文を抜ける「Cut」「Copy」「Paste」は、まったくそのマンマです。selectedField)のテキスト全部をセレクトします。「Preferences」は、アンサー・ダイアログでメッセージを表示させています。カード上にフィールドを作って、適当に文章を書き込んだら、エディット・メニューをテストしてください。ショートカットもうまくできますか。OSだったら、メニューバーにも設定して試しましょう。ディセエイブルド、ニーモニック、ショートカットメニュー・ビルダーでメニュー・アイテムを見た時、「&」や「/」が見えると上に書きました。それではもう一度メニュー・ビルダーを「Toolsメニュー」から開けてください。OSでスタックのメニューをメニューバーに設定していると、「myMenu」がメニューバー出ています。LiveCode開発用メニューを出すのは、LiveCodeアプリのツール等のウインドウを、カーソルでアクティブにします。メニューをスタックに表示していると、メニューの内容が表示されないメニュー・ビルダーが出ます。「Edit(上図赤枠)」をクリックして、もうひとつウインドウを出して、どのグループをメニューにするか選びます(上図)。ここでは1つだけのグループですが、スタックに沢山のグループが作られている可能性があります。メニュー・ビルダーにメニュー内容が表示されたら、左のメニュー・リストから「Edit」を選んで、右にメニュー・アイテムを表示します。ニーモニック」にチェックが入って「C」の文字が右に出ます(上図左赤枠)。ニーモニック(mnemonic)はMacでは使わないですが、LiveCodeのデフォルトのメニュー・アイテムのセッティングにあるので、説明をしておきます。key)と、メニューアイテムにアンダーラインのあるキャラクター・キーとの組み合わせて、メニューをポップダウンさせる一種のショートカットです。上の図左でハイライトされている「Copyメニュー・アイテム」で言えば、「&記号」の次のキャラクター「C」がニーモニック(mnemonic)のアンダーライン・キャラクターを示唆しています。右の図のWindowsのメニューで見てください。「Copy」では「C」にニーモニックのアンダーラインがあります。その上の「Cut」では「t」にアンダーラインがあります。C」のショートカットのキャラクターを示唆しています。メニュー・アイテムの一番下にある「Preferences」をハイライトにして選んでください。「Disabled」にチェックマークを入れると、前に左側のカッコが付いて「(Preferences」となります。これでメニュー・ビルダーを閉じるとメニュー・アイテムの「Preferences(環境設定)」は、薄いグレーになってセレクトできないディセエイブルド(disabled)になります。できるようにする」ができないと困りますね。メニュー・ビルダーは、大体のメニューの構成が作れれば良いくらいに考えておいて、スクリプトでも操作できるようになっていないといけません。メニューはプルダウン・メニュー・ボタンをグループにしているので、ひとつひとつのボタンに入っているアイテムを、スクリプトで書き換えればそれが可能になります。できるようにする」になります。ボタン「Edit」のテキストをゲットしなさい(itに入る)。「it」のライン6に「Preferences」を入れなさい。ボタン「Edit」のテキストを「it」に設定しなさい。カッコ(parenthesis)」を付けます。その他メニューがチェックされている印「!c」も、ワリと使われると思うので書いておきます。メニューがチェックされている印サブ・メニューもうひとつサブメニューも重要なので書いておきます。例ではメニュー・アイテム「Open」から2つのサブメニュー「Image...」と「Video...」が引き出せるようにします。どちらもアイテム名の後に「...」を付けているのは、そのメニュー・アイテムを選ぶとダイアログ等のウインドウが開かれると言う、ユーザー・インターフェイスの慣用的な表現で、「Preferences...」とされることも多いです(メニュー・ビルダーのデフォルトでは付いていません)。"File"ボタンのインスペクターを開いてください。アイテム「Open」の下に2行「Image...」と「Video...」を追加します。追加した2行をサブメニューにするには、サブメニュー・アイテムの前に「tab」のアキを作ります(上図)。numToChar(124)」で繋がれた「Open|Image...」が入りますから、「switch」の「case」は「Open|Image...」とします。menuPickサブメニューが選ばれると、アンサー・ダイアログを出すようにしています。quote」にします。二重引用符」と言いますが、LiveCodeでは「"」をquote(クオート)と書きます。タブ・メニュータブ・メニューを作ります。イメージとビデオをタブで切り替えるサンプルです。タブ・メニューを理解するためだけのもので、実際にイメージとビデオが働くまでのスクリプトは書き込みません。上に書いたメニューから続いていて、終わりにメニューの動きディセエイブルド(disabled)と連動させます。Panel」をカードにドラッグ&ドロップします。Panel)はタブが3つあります。OSはセンターに、Windowsは左にタブが寄せてあります。3」が3行で入っています。ここでのサンプル用に「Image」「Video」と2行入れてください(下図)。タブ・パネルは2つのタブになります。Area)をドラッグ&ドロップして、300ピクセルくらいの横巾にします。その上にQuickTimeプレイヤーを乗せます。Menu")をセレクトしてスクリプト・エディターを開けます。エディターには他のボタン・メニューと同じように「menuPick」ハンドラーと「switch」が用意されています。menuPickタブを切り替えた時にパラメータ「pItemName」に「Image」か「Video」が入りますから、「case」はその2つに対処します。menuPick条件やカードの違いでメニューを変えるこれで、切り替えができました。実際のイメージやビデオをリンクするスクリプトは、ここではやりませんが、タブが選ばれた時に「Fileメニュー」のオープンのサブメニューも同時に切り替わるようにします。menuPickタブを切り替えると「Fileメニュー」の「Image...」「Video...」も同時に切り替わります(下図2つ)。次は前のページに移るボタンを作ります。1)が開けられると、「Fileメニュー」の「Open」を無効にして、サブメニューが開けないようにします。上でやっているスクリプトとほとんど同じです。2)を開くのもほとんど同じですが、もしカード2でビデオ・タブが開けられていたら、イメージ・タブに切り替えるスクリプトを入れておきます。text」のライン・ナンバーで返します。タブ・パネルの場合は、メニュー・ヒストリー(menuHistory)をナンバーにセットすると、そのライン・ナンバーのタブをクリックしたのと同じ効果が得られます。screen」、ユーザーに見えないようにします。screen)になって解除されます。screen」と書きます。Web」を付け加える事にしましょう。スタックのメニューから、ユーザーがデフォルトに設定しているブラウザーで、ウェブページを開けるメニュー・アイテムです。Script)で、スクリプトのフォーマットを書き込みます。menuPick「revGoURL」はLiveCodeの以前の名前「Revolution」から来ています。LiveCodeでは始めに「rev」と付いた言葉はリザーブされているので、カスタムのコマンド、ファンクション、バリアブルでは使えません。頭文字を取った短縮語)で、一般にはウェブ・アドレスと言っているものです。"ウェブ・アドレス"で、目的のページがブラウザーで開かれます。アドレスは必ずクオート(quote)で括ります。Tipsメニュー・ビルダーはメニューの大体の構成を作るには適していますが、開発が進むにつれて条件その他でメニューを操作しなくてはいけない箇所も出てくるので、メニューをスクリプトで操作できるようになる事が重要です。OSとWindowsではスタックの天地がメニューのサイズ分変わってくるので、クロスプラットフォームでの開発では、そのことを留意しなくてはいけません。メニュー・アイテムをサブ・メニューにするには、始めにタブ(tab)を挿入します。メニュー・ヒストリー(menuHistory)で、メニュー・ボタンをセットすると、メニュー・アイテムが選ばれたのと同じ動作になります。スタックからウェブページをブラウザーで開けるのは「revGoURL」を使います。