ホームページ開発ツール>Dashcodeコラム

Dashcodeコラム

目次
 SetMatrixの怪

 mirrorPlayerでは反転にSetMatrix()を使っているのですが、10.5では10.4と異なり、ムービーが右下側にずれた上に(右側と下側は領域をはみ出すのでその部分が)欠けるという問題が起きました。(QuickTimeの機能なので、QuickTimeのバージョンに依存している可能性もあります。)

 どうも、マトリックスの操作に、10.4ではbox(ムービー領域)の原点(左上)を、10.5ではウィジェットの原点を用いているようです。
追記:その後、10.5でずれが生じるようになり、10.4と同じ処理にすると解消されることが確認されました。(OS:10.5.8, QuickTime:7.6.6で確認)
OSまたはQuickTimeのバージョンアップにより、元に戻った、ということなのでしょうか?(2010/08/05)
 なので、boxの原点をウィジェットの原点に合わせると、正しく表示されるのですが、それはデザイン上避けたいところです。
 あれこれやった結果は、
document.getElementById("box").style.left = 0;
document.getElementById("box").style.top = 0;
document.getElementById("box").innerHTML = '<embed name="movie" width="352" height="259" controller="false" enablejavascript="true" 
autoplay="false" target="myself" id="movie" src="'+mPath+'" href="" style=position:absolute;top:16px;left:9px;></embed>';  // mPathはファイルパス
document.getElementById("text4").innerHTML = document.getElementById("movie").GetRectangle();
var st_array = document.getElementById("text4").innerHTML.split(",");
var movW = parseInt(st_array[2]);
var movH = parseInt(st_array[3]);
var rX = 320 / movW;
var rY = 240 / movH;
if (rX >= 1 && rY >= 1) var rR = 1;
else if (rX > rY) var rR = rY;
else var rR = rX;
document.getElementById("movie").SetMatrix(-1*rR+",0.0,0.0 0.0,"+rR+",0.0 320.0,0.0,1.0");
document.getElementById("box").style.left = 19;
document.getElementById("box").style.top = 32;
 つまり、boxを一時的にウィジェットの原点に移動し、反転させた後に元に戻すというものです。
 ただし、原点を移動させただけではうまくいかず、embedで、
 ・width,heightは、boxの左上座標分を足す。
 ・styleを追加し、boxの左上座標の半分の値をtop,leftで指定する。
 かなり対症療法的ではありますが、とりあえずうまくいっているようです。(もっとシンプルにできそうな気もしますが…)
10.4では依然としてbox原点のようなので、内部でOSのバージョンを判定して、処理を切り替えています。
 ちなみにSetMatrix()の引数の意味は、以下の通りです。
(パラメータは3つずつ組になっていて、組の中はカンマ、組の間はスペースで区切ります。並びは、左上から横にみていきます。)
反転
-----------------
x(-1)	0	0
0	y(-1)	0
0	0	1

平行移動(反転した場合は軸の反対側に画像が現れるので、引き戻すために必要になる。)
-----------------
0	0	0
0	0	0
x移動量	y移動量	1

拡大縮小
-----------------
x倍率	0	0
0	y倍率	0
0	0	1

 Dashcodeかんたんレビュー(2)

 Dashcodeを使ってみて気付いたことの続きです。
 なお、ここでのDashcodeのVersionは、2.0.1(158)です。

 select(Popup Menu)のonchangeイベントが誤動作?
 本件は、Dashcode上でのみ発生します。書き出されたアプリでは発生しません。
 selectのonchangeイベントに関数名を書くと、実行直後にselectをクリックしないと、他のどこをクリックしても(selectの)onchangeイベントが発生し、関数が実行されてしまいます。(onclickイベント等に何か書いてある部品は、クリックしてもOKっぽい。)

 サイズが誤動作?
 部品のサイズを変更しようとしても、うまく変更できなくなることがあります。
 直接書き込んでも勝手に変更されたり、アローの下側をクリックしても数字が増えてしまったり、連動のバネを消しているのに連動扱いになったり、と、良く分かりません。
 こうなったら、cssを直接いじった方がいいようです。


 iPhone向けWebアプリでのXMLHttpRequest

 iPhone向けWebアプリケーションの続きです。
 手始めとして、京香を移植してみたのですが、データの取得のところで「Permisshon Denied」が出てしまい、動きませんでした。
シミュレータでは動いてしまいます。(当たり前ですが)実機での検証は必須ということですね。
 XMLHttpRequestが外部サーバ(URL)にアクセスできない、というのが原因のようでした。
ウィジェットでは、info.plistのAllowNetworkAccessをtrueにすれば外部サーバにアクセスできたのですが、Webアプリケーションではinfo.plistがないため、指定できません。
 少し調べてみたのですが、どうも(XMLHttpRequestが外部サーバにアクセスできないのは)仕様らしいということ以外、良く分かりませんでした。
 ところが、答えは身近なところにありました。

 Dashcodeのライブラリには、ボタンやテキスト等の「部品」の他に、ソースコードを記述した「コード」というのがあります。
 その中に「XMLHttpRequest Load」と「XMLHttpRequest Setup」というサンプルが含まれていて、これらを使うことで、外部サーバにアクセスすることができました。
注)京香の場合はWebアプリとデータを同じサーバ上に置くことにしたため、結局上記サンプルは使わずに、従来方式を相対パス指定に変更したものを採用しました。

 iPhone向けWebアプリケーションの作成

 iPhone SDKに含まれるDashcodeでは、iPhone/iPod touch向けにWebアプリケーションを作成することができます。
通常のXcodeに含まれているDashcodeでも作成できるかどうかは未確認です。
 Webアプリケーションは、Xcodeで作成するアプリケーション(以下、アプリ)と異なり、iPhone/iPod touchにインストールしません。
 アプリ本体はWebサーバ上に置き、iPhone/iPod touch上のSafariで当該ページを開くことにより、動作させます。
 アプリとはいっても、実態はhtml,JavaScript,cssを組み合わせた、Dashboard用ウィジェットそのもの、といってもいいくらいのものです。

 中でも「ユーティリティ」というテンプレートを用いると、Dashboard用ウィジェットとほぼ同等の外観/操作性を持ったアプリを作成することができます。
 そのため、ウィジェットを移植したいような場合は、Cocoaで作り直すよりずっと手軽に行えます。

 「ユーティリティ」テンプレートで作成される新規プロジェクトは、それ自体が一つの完成されたアプリとなっており、実行すると、iPhoneシミュレータが起動して、動作を確認することができます。
個人的には、テンプレートでここまでするのは遣り過ぎのような気もします。
 動作確認はシミュレータでもいいのですが、実機でも簡単にできます。(注:無線LAN環境が必要です。)
 以下は、当方で実機テストを行った時の手順です。
  1. 「ユーティリティ」テンプレートで作成したプロジェクトを保存。
  2. プロジェクトウィンドウ左ペイン中央部の「共有」をクリックし、右ペイン右下の「動作形式で保存」ボタンをクリック。
    (デフォルトでは自分のホームの「サイト」フォルダ内に作成される。)
  3. 「サイト」フォルダ内にmytest.htmlを作成し、上述の「動作形式で保存」したフォルダ内のindex.htmlへのリンクを記述。
    (これは、複数のアプリを個別にiPhone側でブックマークする手間を軽減するためのもので、必須ではない。)
  4. システム環境設定の「共有」で、「Web共有」にチェックする。
    (ローカルIPアドレスが192.168.0.101、ユーザ名がhogeだとすると、http://192.168.0.101/~hoge/で、自分の「サイト」フォルダにアクセスできる。)
  5. iPhone/iPod touchのSafariで、実機テスト・ホームページのアドレス(http://192.168.0.101/~hoge/mytest.html)をタイプし、ブックマークしておく。
  6. リンクをタッチしてページを開き、動作を確認する。
 勿論、実機を接続できるのはローカルに限定されますが、テストには十分かと思われます。


 AppleScript連係時のテキストエンコーディング

 これは、Dashcode固有というより、Dashboard一般の話ですが、一応ここに記しておきます。

 Dashboardのウィジェットは、AppleScriptを呼び出して処理できるのですが、ここで問題になるのが(日本語の)文字コードの違いです。
 ウィジェット内は「UTF-8」が基本ですが、AppleScriptの方は「Shift-JIS」になります。
 そのため、ウィジェットからAppleScriptに日本語を渡して処理させたい場合は、どこかで変換をしなければなりません。

 一番手頃なのが、AppleScript内で「iConv()」を呼ぶやり方でしょう。
 ところが、「ああ」や「ああああ」は正しく変換してくれるものの、なぜか「あ」や「あああ」は変換してくれません。(偶数はOKで奇数はNGというのが規則性を感じさせますが。)
 また、ターミナルでも同じ結果なので、AppleScript固有の問題という訳ではなさそうです。

 という訳で、使えません。どうしたものか。
 この件につきまして何か情報をお持ちの方は、ご一報下されば幸いです。

P.S.
 AppleScriptが返してくる文字列は、ウィジェット内で文字化けなく扱うことができます。


 Dashcodeかんたんレビュー

 ここでは、Dashcodeを使ってみて気付いたことを書き留めておきます。
 なお、Dashcodeはベータ版(Version 0.9beta(76))です。

 ローカライズ
 ローカライズは基本的にWidget Attributesで行います。
 ここで、ちょっと分かりずらかったのが、ソースコード上で記述するメッセージと、title属性(マウスを持っていくとポップアップする説明文)でした。
 それらはいずれも、ソースコード(.jsファイル)上で「getLocalizedString()」という関数を記述した上で、KeyおよびValueを自分で追加してやる必要があります。書式は例えばこんな感じ。
 document.getElementByID("hoge").value = getLocalizedString("key");
 title属性の場合は、以下のように記述します。
 document.getElementByID("hoge").title = getLocalizedString("key");

 名前の変更
 ソフト(プロジェクト)の名前を、まずは仮につけておき、後で変更するというのは良くあることなのですが、Dashcodeではその変更順を誤ると、そのプロジェクトが使えなくなることがあります。
 名前を変更する場合は、まず、info.plistの中身を書き換えます。その後、ファイル名等を書き換えます。

 外部ファイル
 Dashcodeでは、AppleScriptやテキスト等のファイルを外部から取り込むことができますが、これはリンクではなく、コピーになります。そのため、オリジナルを書き換えても、反映はされません。
 リンクかコピーかは一長一短だとは思いますが、Dashcodeを立ち上げなければ編集できないというのは、ちょっと不便かも。
 なお、AppleScriptを編集していると、時々「元ファイルを見失った」といったダイアログが出て保存できなくなります。その場合は、別名で保存後、元ファイルを開き直して全文コピーすれば回復できます。

 FindとSearch
 Findは、テキスト(css,html,js等)のみを対象とします(Source CodeフィールドにフォーカスしていないとBeepが鳴ります)。一方、ウィンドウ右上のSearchは、プロジェクト全体が対象になります。

 select(Popup Menu)の透明化
 selectの透明化は、Inspectorパネルでは指定できません(Opacityを選択できない)。なので、直接cssファイルを編集する必要があります。


[Home]  [MacSoft]  [Donation]  [History]