Edition」の初級から中級のチュートリアルです。このチュートリアルは、中学・高校生からプログラミングが始めての方達を対象にして、Mac&Winのアプリを同時に作ります。2種類のイメージこの章の概略テキスト・データを含んでいるイメージ・オブジェクトと、リンクしたイメージ・オブジェクトの違いと扱い方。デフォルト・フォルダー(DefaultFolder)とスペシャル・フォルダー・パス(specialFolderPath)。アイテム・デリミター」の変更。注意:このチュートリアルは、LiveCodeでアプリケーションを開発して行く上で、絡み合っている事柄をステップ・バイ・ステップで、用語を積み上げて解きほぐしているので、興味あるタイトルの章だけを抜粋して拾い読みして行くと、大事な事柄を飛ばしているかもしれません。写真はラスター・グラフィック画像(またはビットマップ画像)と言われる、沢山のピクセル・ドットの集まりで表現します。最近は時々しか見ないですが、以前はお絵描き(ペイント)プログラムと言うのポピュラーでした。お絵描きでは線や面が単色でベタな感じで、写真は1つ1つのピクセルを細かな色の違いで表現します。どちらも基本的には同じものです。LiveCodeではイメージ(image)と言うオブジェクトをカード上に作って、その中で画像を見せます。イメージ・オブジェクトの外には画像は表現できません。LiveCodeでは例外的に、テキスト・フィールドの中のキャラクターにイメージ表示をする、「imageSource」と言う表現もできますが、ここでは扱いません。お絵描き(ペイント)のイメージ・オブジェクト始めにペイント・イメージのサンプルです。スクリプトでカード上にイメージ・オブジェクトを作って、その中にブルーでバツ印を大きく描きます。Mainstack)をFileメニューから作ってください。メッセージ・ボックスから下のスクリプトを送ります。マルチライン・メッセージから1度に送っても良いですし、1行づつスクリプトを確認しながら送っても良いです。1行づつ送ると、カーソルが途中でブラッシュの丸い形に変わりますから、そのつもりで。デフォルト・イメージ・オブジェクトのレクト(rect)を80,80,320,320に設定。イメージ・オブジェクトを作りなさい。最後に作ったイメージを、ボーダーが見える設定にします。最後に作ったイメージの、3Dボーダーの設定を負にします。ブラッシュ・ツールを取りなさい。ブラッシュ(のサイズ)を8に設定しなさい。ブラッシュのカラーをブルーに設定しなさい。(ブラッシュの)ドラッグするスピードを120に設定しなさい。90,90から300,300に(ブラッシュを)ドラッグしなさい。90,300から300,90に(ブラッシュを)ドラッグしなさい。ブラウズ・ツールを取りなさい。1行1行の積み重ねは、簡単な言葉でできています。templateImage」は、デフォルトで作られるイメージ・オブジェクトのプロパティを設定します。image」と言う表現にします。スクリプトでイメージ・オブジェクトにペイントしたので、今度はツール・パレットのペイント・ツールで、今作ったイメージ・オブジェクトの上に描き足してみます。Color)をクリックしたまま(マウスダウン)にすると、カラー・チャートで出ますからグリーンを選びました。フィル・カラーはブラッシュに色を満たす、というような意味合いでしょうか。Shape)からのブラッシュ形と大きさを選びます。大きめの丸を選びました。フリーハンドで適当に、イメージ・オブジェクトの中でマウスを動かしてみます。オブジェクトのある範囲の中でだけ、ブラッシュで描く事ができます。イメージ・オブジェクトの中には、ブルーのバツ印とフリーハンドで描いたグリーンの線のデータが書き込まれていますから、それをそっくりそのまま他のイメージ・オブジェクトに移してみます。2)を、ドラッグ&ドロップして、メッセージ・ボックスから、下のスクリプトを送るとまったく同じイメージ(ペイント)がイメージ2に現れます。2)に入れたデータをメッセージ・ボックスで見てみます(下図)。1」としても同じ結果が得られます。何が何だかわかりませんが、とにかくこういうデータがイメージ・オブジェクトに書き込まれていると言うのがわかります。見た目には白地に色で描いたように見えますが、デフォルトのイメージ・オブジェクトは透明なバックグラウンドです。Effects)を試してみましょう。Effects)を開いて(上図)、適当に効果をいろいろ付けたり外したりして遊んでください。透明のバックグラウンドに描いているので、イメージ・オブジェクトの内部の透明部分にも効果が現れます。Effects)は、イメージ・オブジェクトだけでなく他のコントロールにも適用できます。ここではスクリプトでのグラフィック・イフェクトの記述は省きます。写真でこのような透明な効果を作り出すには、透明のあるPINGまたはGIFFイメージをインポートします。イメージのメニューからのインポートは、この章の下で書きます。インターネットの写真をリンクカード上にあるふたつのイメージ・オブジェクトの1つ「イメージ2」を削除します。セレクトしてデリート・キーで削除するか、下のスクリプトをメッセージ・ボックスから送ります。始めのスクリプトを何度も試していると、イメージ・オブジェクトが重なって沢山作られているかもしれません。いうオブジェクトはありません」のエラーが出たら、イメージ1だけしか残っていないと言うことになります。イメージ1のファイル・ネーム(fileName)を「http:...../dog.jpg」に設定しなさい。レクト)を80,80,320,320に設定していたので、サイズは240x240ピクセルでしたが、リンクしたイメージはその写真のオリジナル・サイズの400x300に変わります。サイズとポジションはロックされていません(下図:赤丸)。Properties」に表示されます(下図:Source)。イメージのサイズを変えて、さらにそれをロックしてから、別なイメージをリンクします。シフト・キーを押しながら、写真の縦横比率が変わらないようにイメージの右下を縮小させて、インスペクタでロックします(下図)。次に別なイメージをインスペクタからリンクしてみます。先程はJPEGイメージでしたが、今度はPINGイメージ「dog2.png」です。http://kenjikojima.com/livecode/dog/dog2.pngを、インスペクタの「Source」に上記を入れてリターン・キーを叩きます(下図:インスペクタからリンクする)。気が付いた方もいるかと思います。イメージが不自然です。実はイメージをロックしたまま、リンクをしたので画像がゆがんでいます。「formattedWidth」と「formattedHeight」を使ってオリジナルの画像サイズにします。フォーマッテド」は書式を整えると言う意味で、「formattedWidth」と「formattedHeight」は、オリジナル写真の左右・天地のピクセル数を返すプロパティです。イメージ1のフォーマッテド・ウイズ(オリジナル・ピクセル横)を返しなさい。イメージ1のフォーマッテド・ハイト(オリジナル・ピクセル縦)を返しなさい。これでどちらも300を返します。リンクした写真は正方形にトリミングされたイメージです。イメージ・オブジェクトはロックしておくと自分の望む大きさにできるのですが、写真のプロポーションが崩れて、おかしなイメージになってしまいます。リンクした直後に「formattedWidth」「formattedHeight」でオリジナルの大きさを知って、そのプロポーションで望むサイズにする方法を取ります。ロックされたイメージは、スクリプトで指示を与えるとサイズやポジションが変えられます。下のスクリプトは、イメージの天地を180にして、オリジナルのプロポーションを維持します。"http://kenjikojima.com/livecode/dog/dog2.png"に設定しなさい。イメージ1のオリジナル横巾をformattedWに入れなさい。イメージ1のオリジナル天地をformattedHに入れなさい。プロポーションを変えずに、イメージ1の天地を180にした時の横巾を、tWidthに入れなさい。イメージ1の横巾をtWidthに設定しなさい。イメージ1の天地を180に設定しなさい。イメージのオリジナル・サイズは300x300の正方形でしたから、天地を180にすると、180の横巾になります。いう場合は普通同じ比率のポイントを返すファンクションを作ります。上のスクリプトを、ファンクションを使ったボタンに入れるスクリプトにするとこうなります。1)の名前(name)を「dog」とします。formattedWファンクション「formattedW」で、天地180にした場合の同比率の横巾を返します。使っているパラメータ「pImage」は「イメージ・ネーム(またはイメージ・ナンバー)」、「pHeight」はイメージ・オブジェクトに設定する「天地のポイント数」です。このスクリプトを使って、オプション・メニューからファイル名を選んで、イメージを表示するスクリプトにしてみましょう。オプション・メニュー」を、イメージ「dog」の下にドラッグ&ドロップしてください。Items)に、この下にあるファイル名を入れて、Displayは「6」にします(上図:右赤丸)。Windowsではデフォルトの「5」にしておくと、6行目が隠れてスクロールしなくてはいけません。スイッチ」の文が書けるようになっています。switch」までは削除してください。スイッチ」は、別な章で話しましょう。menuPick」の後にある、ここでは「pItemName」としているパラメータで返します。ユーザーが「dog4.jpg」を選んだとしたら、「pItemName」の中に「dog4.jpg」が入って、その後のスクリプトは「pItemName」を「dog4.jpg」として処理すると言う意味です。パラメータは「pWhich」でも、その他の言葉を使ってもかまいません。上で使ったネット上の写真を、イメージ・オブジェクトにリンクするスクリプトの最後のファイル名を、ユーザーが選択するファイル名のパラメータ「pItemName」と差し替えます。ここではページ・レイアウトの関係で、バックスラッシュで行替えしています。ハンドラーの中の始めの文は1行で書いても問題ありません。menuPickこれで試してみると、写真の入れ替えはうまくいってるのは分かるでしょう。大きさの調整が必要ですね。次に作ったファンクション「formattedW」を加えます。formattedW大きさは天地で揃うようになったので、もう少しポジションの調整を追加することにします。場合によったら、全て左揃えにしなくてはいけない事も出るかもしれません。ボタン・メニューの左を基準に整えて行きます。Menu」から「dog」にします。ボタン「dog」のトップレフト(左上)を返しなさい。簡単明瞭で、まったくそのままの意味です。X値とY値の2つのアイテムが、カンマで区切られて返されます。今度は、イメージ・オブジェクトの左下のロケーションを聞いてみましょう。イメージ「dog」のボトムレフト(左下)を返しなさい。この図の例では、イメージ「dog」のボトムレフト(左下)はX値もY値も、ボタン「dog」より小さいです。ボタン「dog」と同じ位置で左揃えにするには、X値をボタン「dog」と同じにして、Y値は適当な間隔があく程度にボタン「dog」よりも小さくします(上にします)。だいたい「10」くらいのアキが良いでしょうか。ボタン「dog」のトップレフト(左上)を「tButtonTopLeft」に入れなさい。2)が正しいか確認してください。10」の数字の調整でします。グラフィックの章でやったビジュアル・イフェクトを付ける事もできます。下のスクリプトがボタン「dog」に書き込む全てです。formattedWリンク・イメージの保存デフォルト・フォルダー「DefaultFolder」スペシャル・フォルダー・パス「SpecialFolderPath」リンクしたイメージは、お絵描き(ペイント)したイメージ・オブジェクトのようには、オブジェクトの中身のデータを他のイメージ・オブジェクトに、そっくり移す事はできません。試みにこのスクリプトをメッセージ・ボックスから送ると、何もないempty(空)を返します。イメージ「dog」の(中身の)テキストを返しなさい。リンクしているイメージ・オブジェクトは、イメージの中継をしているだけですから、カード上にあるイメージをスナップ・ショットのように切り取って、新たなデータをエクスポートして保存します。リンクしたイメージをエクスポートしたファイルは、リンク元にあるオリジナルのサイズやファイル形式ではありません。今ここでは全てのイメージの天地を、180ピクセルにしていますから、その大きさで保存されます。イメージ「dog」をJPEGフォーマットでファイル名「testImage.jpg」でエクスポートしなさい。このスクリプトで、リンクしたイメージのファイルをJPEGで保存できます。今のままの状態では、LiveCodeアプリケーションの置いてあるデフォルト・フォルダー(defaultFolder)に、保存されてしまいます。デフォルト・フォルダー(defaultFolder)は、下のスクリプトでパスを得られます。デフォルト・フォルダー(defaultFolder)のパスを書き出しなさい。次に進む前に、少しデフォルト・フォルダー(defaultFolder)の説明をします。LiveCodeを開くと、デフォルト・フォルダーはLiveCodeアプリのあるフォルダーになります。開発が完了して、LiveCodeプロジェクトを配布できるスタンドアロン・アプリにした場合は、そのスタンドアロンのある場所が、デフォルト・フォルダーになります。LiveCodeエンジンがあるフォルダーと言ってもよいでしょう。イメージをエクスポートしたい場合、ユーザーが選んだフォルダーとか、デスクトップとかの適当な場所を、デフォルト・フォルダーに設定しないと、LiveCodeエンジンのあるフォルダーにファイルが入ってしまいます。デフォルト・フォルダーは不便な事だけでなく、有用なこともあって、デフォルト・フォルダーに設定されていると、そのフォルダーの中のファイルの状態を知る事ができます。(デフォルト・フォルダーにある)ファイルを全て書き出しなさい。送ると、デフォルト・フォルダー(現在はLiveCodeアプリの置いてあるフォルダー)の中の、アプリケーションを除いたファイルのリストが返されます。詳しい内容を知るスクリプトもありますが、ここでは省きます。状況によってデフォルト・フォルダーを設定することで、テンポラリー・ファイルを保存したり削除したり、またフォルダーの中身を見たりする事ができます。今はユーザーの指定なしに、デスクトップにイメージ・ファイルが保存できるようなボタンを作る事にします。Button」をオプション・ボタンの右隣に置いてLabel(レイベル)は日本語で「デスクトップに写真を保存」とします。OSのこのバージョン(6.0.1)で、ボタンへの直接日本語入力に問題があるようですから、うまく直接入力できない時はインスペクタのレイベル(Label)にコピペしてください(Windwosではまだ未確認)。ボタンは適当な横巾に伸ばしてください。デフォルト・フォルダーを確認します。デフォルト・フォルダー(defaultFolder)のパスを返しなさい。デフォルト・フォルダーがどこにあるか、パスを返します。OSを使っていてアプリケーション・フォルダーの中の「LiveCode_CE」と言うフォルダーに入れているので、「/Applications/LiveCode_CE」が返ってきました。アプリケーション・フォルダーに直接LiveCodeアプリを入れている人は「/Applications」が返されます。スペシャル・フォルダー・パス」を使います。ファンクションの「specialFolderPath」は、コンピュータを操作する上で、デスクトップやフォントやテンポ・ファイルの置き場所など、特定のフォルダーのある場所のパスを返します。デスクトップ」を扱います。デスクトップ(Desktop)のパスを返しなさい。これで私は「/Users/kenjikojima/Desktop」が返ってきました。ユーザーの違いで、返されるパスが違ってきます。デフォルト・フォルダー(defaultFolder)をスペシャル・フォルダー・パス(specialFolderPath)にセットすれば、エクスポートするイメージ・ファイルはデスクトップに現れます。デフォルト・フォルダー(defaultFolder)をデスクトップ(Desktop)に設定しなさい。一つの問題は、ボタンをクリックするだけで、保存するファイル名を付けなくてはいけません。下のスクリプトの"testImage.jpg"の部分です。JPEG区切り記号「itemDelimter」の変更リンクの違いは、イメージ「dog」のファイル・ネーム(fileName)から分かりますから、最後のファイル名をそこから採り出せれば、保存ファイルに使う事ができます。slash」キャラクターの後が、保存するファイル名になります。2)と言う言葉を使いました。comma」で区切られた順序をアイテム・ナンバーで呼んでいます。アイテム・デリミター」を使います。「item」は日本語でもアイテムと言いますし、項目と言う意味です。デリミター」は「範囲をさだめる」意味の「delimit」からの言葉で、日本語では「区切り記号」とも言われます。アイテム・デリ」とも、どちらの形でも使う事ができます。アイテム・デリミター(itemDelimiter)をスラッシュ「/」に設定しなさい。item)から、保存するファイル名が得られます。comma)に戻されます。ここでは複雑さを避けるために全て「JPEG」でファイル形式を作る事にしますから、最後のドットの後のエクステンションは「.jpg」に統一します。(最後からの番号)-5」を採り出して、その後に「.jpg」を付けます。「char」は「character」の短縮形です。アイテムデリ)をスラッシュ「/」に設定しなさい。最後のアイテムのキャラクター1から-5と「.jpg」を書き出しなさい。これまでのスクリプトをまとめて、ボタン「デスクトップに写真を保存」に入れます。デフォルト・フォルダー(defaultFolder)をデスクトップ(Desktop)に設定しなさい。アイテムデリ)をスラッシュ「/」に設定しなさい。最後のアイテムのキャラクター1から-5と「.jpg」を「tFileName」に入れなさい。イメージ「dog」をJPEGフォーマットでファイル名「tFileName」でエクスポートしなさい。マウスアップ「dog1」から「dog5」までのイメージをデスクトップに保存してください。写真の画像が完全に切り替わってからボタン「デスクトップに写真を保存」をクリックしないと、正しい写真がエクスポートされません。このイメージ・ファイルのエクスポートは、同じファイル名がすでにあると上書きしてしまいます。それを避けるスクリプトは、ここでは省略します。スタックを閉じて、新しいスタックを作る保存した5枚のイメージを使って、新しいスタックで少し実験をしてみます。スタックは「linkedImage.livecode」と言うファイル名でSave(保存)します。このスタックは閉じて、新しいスタックを作ります。FromMemory」を選びます。Mainstack」を作ってください。File...」を選んで(下図)、デスクトップに保存したイメージ・ファイルを1つ選びます。図では「dog3.jpg」を選びました。File...」を選んで(下図)、デスクトップに保存したイメージ・ファイルを1つ選びます。図では「dog4.jpg」を選びました。2つのイメージがカード上にありますから、適当にスタックのサイズを調整して、2つのイメージが程よい位置に来るよう配置します。スタックの名前(name)を「dog」に、タイトル(title)を「Dog」にしました。1)のインスペクタを見てみます。Name(名前)はオリジナル・ファイルのファイル名「dog3.jpg」となっています。fileNmae」は空白です(下図)。2)をインスペクタで見ると、Name(名前)はイメージのIDナンバーです。fileNmae」は、ファイル・パスになっています。参照した)・コントロールと言う意味が分かります(下図)。1とメッセージ・ボックスから送ると、お絵描き(ペイント)の時のように、沢山の文字列が書き出されます(下図)。2)で、上と同じスクリプトを送ると、何も書き出されません(下図)。Memory」でスタック「Dog」を閉じます。メモリーごとスタックを閉じました。2)のデスクトップにあるファイル(dog4.jpg)を、どこかデスクトップでない場所に移動させてください。それではもう一度、スタック「Dog」をFileメニューから開きます。Stack...」(下図)。イメージ2は参照していただけなので、ファイルが見当たらなくなると、画像が現れません。イメージ・ファイルは、この2つの違いを理解して使い分ける必要があります。エンプティ」を返しますが、実はテンポラリーでイメージ・データ(imageData)をオブジェクトに含んでいます。次の章はデスクトップに保存したイメージを使って、もう少しイメージの可能性を探る予定です。last」を使えば、オブジェクトのナンバーを毎回指定する必要がありません。リンクするイメージは、イメージ・オブジェクトのファイル・ネーム(fileNmae)を、インターネットのイメージは「http://ドメイン/ファイル名」に、ローカルのイメージは「ファイル・パス」を設定します。アイテム・デリミター」の設定は、ハンドラーを抜けるとデフォルトのカンマ(comma)に戻ります。ネガティブ・ナンバー(終わりから)」と言う設置もできます。FromMemory」を選んで、メモリーごと削除します。