グラビカ学習帳～新宿のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

割と初歩的なことなのですが、Flash内に別のSWFを読み込むことについてです。

今までは、単純に loadMovie() を使っていたんですが、これだと親のFlashからアクセスするときにうまくいかない場合があります。（たとえば、子SWFの中にある変数を読みに行くとか。）
理由は単に、子SWFの読み込みが終わる前にアクセスしてしまうからなのですが。

今回は読み込みが終わった直後に指示を出す必要があったので、スクリプトを見直してみました。

// SWFを読み込むためのローダーを作る
var Loader = new MovieClipLoader ();
Loader.loadClip("hoge.swf", MC);

// 読み込み状況を監視するためのオブジェクトを作る
var load_obj = new Object ();

// 読み込み処理時の処理
load_obj.onLoadInit = function(){
// スクリプト
// スクリプト
}

// Loaderに登録
Loader.addListener( load_obj );


こんな感じにして、読み込みが終わったときに function を実行させることができました。

HTMLでページの中にリンクをするときは、

<a href="a.html#kokkara">リンク</a>
<a name="kokkara">ここからはじめる</a>

の２つを使います。
FLASHの場合もページの途中にリンクするときは、

getURL("a.html#kokkara");

と、全く同じ書き方で大丈夫ですが、
一つ注意があります。

FLASHのページ内リンクは、サーバーにアップされないと働かない！！

と、いうことです。
カンタンなことですが、要注意だと思いました。

FLASHを使っていると、↑のように、ボヤボヤ?な画像になってしまっている事があります。
（FRONTのRのところがちょっと横に伸びています。）
FLASH上では大丈夫でも、SWFに書き出すと、このようになってしまい、
とっても困ります。


直し方


通常は、ムービークリップの中はこんなカンジですが、


中心点の位置をずらして、
X、Y、の座標を、両方ともマイナスにします！

すると...

　　　　　→　　　　　
直ります

動き方や、スクリプトの都合でダメな時もあるかもしれませんが、
バナー等を作る時など、かなり有効なのでは...？

と思いました。


☆★　3/18　追加でわかったこと　★☆
ボヤケ画像のXとY座標に細かい小数点が入っている時に、これになりやすいです。

例）
452.8　→　452.0

という風に、キリのイイ数字にしてあげると結構スッキリします。

今回もXML読み込みのお話です。
この部分は引っかかることが多いですね、なにか毎回つまずいてるような気がします＾＾；

XMLファイルのノード内にテキストを書いて、それをFlashで読み込むのですが、改行がうまくいきません。
Flashのほうに、XMLの改行を無視するための
xmlData.ignoreWhite = true;
を書いているのでただ改行しても反映されないのは当然なのですが、Flashの改行コードである \n を入れても改行されない。

で、検索してみたら、こちらにまんまのことが書いてありました。

http://www.flash-jp.com/modules/newbb/viewtopic.php?topic_id=2313&forum=6&post_id=12907

すばらしいです。
\n は読み込んだ時に \\n になっちゃってるんですね・・

一応抜粋させていただくと、
テキストを検索、置き換え用のスクリプトとして

this.convSentence = function (theStc, oldKey, convKey) {
var sentence_array = new Array();
sentence_array = theStc.split(oldKey);
return sentence_array.join(convKey);
};

実際にテキストを変換するために

textData = convSentence(textData, "\\n", "\n");

※textData はテキストが入った変数

と入れることで、\n の改行がちゃんと効くようになります。

XMLなどから読み込んだテキストデータを、ダイナミックテキストに表示させるときのお話です。

テキストフィールドの横幅が決まっていて、かつどのくらいのテキストが入ってくるかわからない場合、テキストが折り返されるか（改行されるか）の判断が必要なときがあります。
たとえば、テキスト終わりの真下にボタンを置きたいときなど。一行のときと二行のときとで、ボタンの位置を変える必要がありますよね。
（注）とくに文字数が必要でなければ" target="_self">こちらが簡単です！ (09/09/11)

テキストの文字数を数えることもできますが、.lengthではバイト数を取得できないため、折り返し位置の判断には向きません。（全角なら5文字しか入らない幅でも、半角なら10文字入ります）

そこで、バイト数を判断するスクリプトを探しました。

http://oshiete1.goo.ne.jp/qa3351087.html

こちらの回答を参考にさせていただいています。


// 折り返しの判断
function strReturn(S) {
// バイト数を表す変数 N の初期化
N = 0;
for (i=0; i<S.length; i++) {
if (S.charCodeAt(i)<=255) {
N += 1;
} else {
N += 2;
}
}

// ここに処理を入れる

}

textData = "表示させたいテキスト";

// 実行
strReturn(textData);

こんな感じです。

変数Nは文字のバイト数となります。
テキストを1文字ずつ調べていき、その文字コードが255以下（半角文字）なら1を、それ以外（全角文字）なら2を足していきます。

なのでfor文が終わった時点でのNの値が、そのテキストの合計バイト数になります。

あとはfor文の後に、変数Nを使ったスクリプトを書くだけですね。
一行に半角10文字まで入るテキストフィールドの場合、

L = Math.ceil(N / 10); // 行数を計算

こんな一行を入れます。
これで行数を取得することができました。（変数L）

今更な感じですが、IE6でのレイアウト崩れについてです。

＜div＞や＜img＞などの要素を縦に並べたとき、余計な隙間ができてしまうことがあります。場合によって原因は変わってくると思いますが、起こりやすそうなものを書いてみます。

横幅にぴったりな＜img＞の下の隙間


＜img＞タグで親の横幅にぴったりな画像を入れている場合、直下の要素との間が空いてしまうことがあります。
これは、＜img＞と要素の間の改行が原因であることが多いです。

＜div＞
　＜img src="xxxxx"＞
　＜div＞
　コンテンツ
　＜/div＞
＜/div＞

コードを見やすくするために改行したいものですが、改行は半角スペースに変換されてしまうため、横幅に納まりきらず縦に伸びてしまいます。

こういう場合は＜img＞タグ後の改行をとってしまうか、＜img＞タグの後ろに＜br /＞タグを入れれば解決できます。

＜div＞
　＜img src="xxxxx"＞＜br /＞
　＜div＞
　コンテンツ
　＜/div＞
＜/div＞

こんな感じです。



縦細の＜div＞の下にできる隙間


縦幅の狭い＜div＞などを使っている場合、下に余計な余白がでることがあります。
これは、指定した height よりも文字サイズ＋行間が大きいことが原因です。
厄介なのは、要素内にテキストを入れてなくても起こること・・
パッと見て、文字サイズが問題だと気付きにくいです。

スタイルで font-size や line-height を指定して、＜div＞の height よりも小さくしてあげれば直ると思います。
09/6/24
後に別の記事でも書いていますが、スタイルに「overflow:hidden; 」を設定することでも解決できるようです。
文字サイズでも間違いではないですが、あまり小さくするとスパム扱いされてしまう場合があるようです・・。

エントリーを登録時、一度入力されているタグは、選択候補として表示してくれる補助機能があります。

タグを入力フィールドに入力した時に、すでに一度使用しているタグと一致すると、そのタグが候補としてリストで表示されます。

1バイト文字の場合は1文字でも入力されればリアルタイムに表示されますが、2バイト文字の場合は文字を確定させる必要があります。しかし、2バイト文字を確定しても候補が表示されないません。一文字、確定後、下矢印キーで表示させることができるようです。

ちなみに、リストの中からの選択は直接マウスで選択するか、上下矢印で選択後、tabキーで確定します。

グラビティワークス　浅賀

先日、お客様先のディレクターさんとの制作進行の電話ミーティング中に、

『3点確認』

という言葉がでてきました。
むむ？　はじめて耳にする言葉です。

3点とは

・テキスト
・レイアウト
・データ

の3点ことで、その確認のことを『3点確認』というそうです。
なるほどー、質問して良かった。。

編集の分野のお客様なので、おそらく編集の世界の3点なのでしょう。
でも、われわれWEB制作の各フェーズで使えそうなフレーズなので、メモ。

・テキスト（何を掲載するかの要素確定）
・レイアウト（要素をどのようにレイアウトするか）
・データ（実際の要素制作、手配）

グラビティワークス　浅賀

■MT4.x / MT5.x（2012/1/10確認）

MTでのブログ内検索についてです。
ブログの検索フォームからキーワード検索を行った場合、検索の対象となるのは

・タイトル
・本文
・続き
・キーワード

の4つです。
書き出されたテキストが検索対象になるわけではありません。


検索対象を新しく増やしたい場合、下記のサイト様で配布されているプラグインを使用することで、カスタムフィールドを検索対象にすることができます。


■Technology on Information
MT > CustomFieldsSearch

こちらで配布されている「CustomFieldsSearch」を使用します。
簡単に説明しますと、

1.ダウンロードしたデータをプラグインフォルダにアップします。
　管理画面を開いている場合は再ログイン。

2.MT管理画面から「デザイン」＞「ウィジット」から「検索」テンプレートを開きます。（MT4.2）

3.デフォルトでは1つ目の<mt:else>の下、<input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" />がある場所に、
2009/1/23
思いっきり間違えてました・・
正しくは4行目あたり、<form method="get" action="<$mt:CGIPath$><$mt:SearchScript$>">の下に、

<input type="hidden" name="CustomFieldsSearch" value="1" />
<input type="hidden" name="CustomFieldsSearchClassType" value="entry" />
<input type="hidden" name="CustomFieldsSearchField" value="カスタムフィールド名" />

この  4  3行を追加します。（2014/1/29修正）
「カスタムフィールド名」の部分は検索対象にしたいカスタムフィールドの
テンプレートタグを入れてください。

（例）<input type="hidden" name="CustomFieldsSearchField" value="sample1" />

複数を指定したい場合は、その分だけ行を増やします。

（例）<input type="hidden" name="CustomFieldsSearchField" value="sample1" />
　　　<input type="hidden" name="CustomFieldsSearchField" value="sample2" />
　　　<input type="hidden" name="CustomFieldsSearchField" value="sample3" />

これで、記入したカスタムフィールドが検索対象になります。

(2014/1/29追記)
注意事項として、このプラグインはMT自体の検索条件とは併用できないようです。
少なくとも、検索対象のカテゴリーを指定するタグ
<input type="hidden" name="category" value="カテゴリー名" />
との併用はできませんでした。


MTは検索関係の機能がいまいちですが、これから良くなってくれると嬉しいですね。

カスタムフィールドには、サイトレベルの物とシステムレベルの物の2種類があります。

【サイトレベル】
・個々のブログごとに作成したカスタムフィールド。他のブログでは使用できない。
・「ブログの複製」を行うときに、" target="_self">カスタムフィールドが複製されない問題が起こる。


【システムレベル】
・システムメニューから作成したカスタムフィールド。すべてのブログで使用できる。
・フィールドの種類に「アイテム」「オーディオ」「ビデオ」「画像」を選択することができない。
・システムレベルで作成したものはすべてのブログ管理画面で表示されるので、あまり数が多くなると邪魔になってしまう。
・「ブログの複製」を行うときに、" target="_self">カスタムフィールドが複製されない問題を回避できる。