---

FLASHをHTMLに組み込むには、SWFObjectが便利。
ダウンロードと使い方は検索すれば、すぐに出てくるけれど
FLASHからJavaScriptを呼ぶには、オプションのallowscriptaccessを"always"にしなければいけないが、SWFObjectでのパラメータ渡しの方法が分からずに悩む。

グーグルさんで検索すると、すばらしいWEBアプリを発見。
SWFObject 2 HTML and JavaScript ジェネレーター v1.2
さらに詳しくで項目を開くと、パラメータが指定できるので、設定してコードを生成。

また、デフォルトの設定だと、FLASHが最善面に来てしまい、highslideで開いた画像がFLASHの下に隠れてしまう。
params.wmode = "opaque";　を指定することで画像をFLASHの上に表示することができる。

---

FLASHからJavaScriptを呼ぶには、ExternalInterface.callを使えばいいが、
問題は、どうやってhighslideを起動するか。
highslideの書式は、
<a href="xxx.jpg" class="highslide" 
onclick="return hs.expand(this)">
<img src="xxx.png" alt="xxx" /></a>

JavaScriptからonclick()は叩けるらしい。
結構いろいろ試行錯誤したけれど、ソースを見た方が早いだろう。
簡略化したので、実際に使っているソースとは少し違うけど。
サンプル

２次配布がどうだか分からなかったので、JavaScriptは削除してあります。
jsフォルダにswfobject.jsを入れ、js/highslideにhighslideを入れてください。
highslideはこちらからダウンロードできます。

概要としては、透明にした<div id="head_flash_img">を配置して
FLASHからawJS_HS_Openを呼んで、<div id="head_flash_img">の中に、id_hs_xxと名前をつけた<a>タグを追加する。
それをonclick()で実行している感じ。

design.cssのvisibility: hidden;で<div id="head_flash_img">を非表示にしているので、これをコメントアウトすると、実際の動作が分かりやすいかも。

最初は、innerHTMLで追加する<a>タグを使いまわそうと思ったけれど、
hs.expand(this)のthisが肝心で、これが変わると同じ画像が複数開いたりするので、結局、枚数分を作成している。

---

FLASHのソースは、ある意味キモな部分なので非公開。
知り合い限定で、欲しい人がいれば送ります。
まぁ、でも動きは好きな様に作って、highslideさえ起動できれば、同じ様なものは作れるはず。

xmlのリストから画像を読み込むのは、どこにでもサンプルが転がっている。

クリックしたら移動して、移動した座標から４角形の頂点を計算し、drawTrianglesで、頂点リストとＵＶリストを使った、２Ｄポリゴンのようなイメージで描画。

楕円の中央部分の幅は広く端は狭く補正とか、移動に減衰を入れるとか、画像の順番をその都度ソートするとか。
そんな感じ。

≪ 続きを隠す

ブラウザのキャッシュを削除して表示しても、普通に表示されるのでキャッシュの問題でもなく。

ほんとに３０分かどうかは謎ですが、３０分って時間がGoogle Analyticsのセッションをカウントする時間なので、Google Analyticsを外してみたり。
ＤＮＳのキャッシュが保持されている時間が、意外に短いらしいので、ＩＰアドレス変換に時間がかかってるのかと疑ってみたり。


このサイトは、シンプルながら、遊びで実は結構いろいろなコンポーネントを組み込んでいます。その辺が問題なのかとも思い、１つずつ機能を外してみました。

結局のところ、とあるJavaScriptが原因でした。
プログラムソースコードを、行番号付きで表示するっていうSyntaxHighlighterの読み込みに、異常に時間がかかることがあるらしい。

実のところ、なんで時間がかかるのかは、よく分かっていないんだけれども
SyntaxHighlighterを読み込む位置を、HTMLの下に移動して、通常画面を表示した後にロードするように変更。

これで、読み込みは発生しているけれども、見た目は表示されているはず。




問題を調べている間に、単純にサイトが重いからだろうと思っていた時期もあり
サイトを軽くする方法を、何個かついでに実装しています。

ＷＥＢで検索すると結構ヒットする、１４のルールっていうのがおもしろい。
元ネタは本で出版されています。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール
この中で、cssを上にまとめるのと、表示に関係のないJavaScriptを下にまとめるのが、簡単な上に効果が大きい。
また、cssとJavaScriptをgzip圧縮すると、格段に軽くなりますが、こっちはちょっと
ひと手間必要。

gzipって書いてあったので、zip圧縮すればいいのかと思ったら読み込んでくれない。
tarのtgz圧縮のことでした。
***.css.gzとか***.js.gzというファイル名になります。

また、gzipに対応していないブラウザがあるらしく、対応したブラウザの場合はgzip版を、未対応の場合には通常のcssやjsを読み込むという分岐が必要になります。
.htaccessに

  
RewriteEngine On  
RewriteBase /  
RewriteCond %{HTTP:Accept-Encoding} gzip  
RewriteCond %{REQUEST_FILENAME} "\.(css|js|html?|xml)$"  
RewriteCond %{REQUEST_FILENAME} !"\.gz$"  
RewriteCond %{REQUEST_FILENAME}.gz -s  
RewriteRule .+ %{REQUEST_URI}.gz [L]  
  

と記述すると、判別してくれるらしい。
　　↑　噂のソースを綺麗に表示するコンポーネント。（たまにうまく表示されない）

この辺は本には載っていないけれど、
元ネタサイトは忘れてしまったけれど、検索すれば引っかかるはず。

≪ 続きを隠す

package MT::Plugin::TTrim;

use strict;
use MT;
use MT::Plugin;
use MT::I18N;
use MT::Template::Context;


my $VERSION = '0.04';


@MT::Plugin::TTrim::ISA = qw(MT::Plugin);

my $plugin = new MT::Plugin::TTrim({
	name => 'TTrim',
	version => $VERSION,
	doc_link => '',
	description => "文字数ではなく、半角文字数分を指定して切り取り",
	author_name => 'Takayama',
	author_link => 'http://www.chosyu.jp/',
});

MT->add_plugin($plugin);

MT::Template::Context->add_global_filter(ttrim_to => sub {
	my($str, $nstr, $ctx) = @_;

	my $out = $str;
	my $cut_num = 0;	# 切り取る文字数

	# 2byte半角スペースを1byte半角スペースに変換
	$out =~ s/ /x20/g;
	# アスキーコード(半角文字)以外を ` に変換
	$out =~ s/[A-HJ-Z]/全/g;		# 英語の大文字は幅が広いので全角文字として計算(Iは除外)
	$out =~ tr/[\x00-\x7F]/`/c;		# UTF-8の日本語は3Byteなので ` が３つになる
	
	# 全角を2Byteとするために変換（終端文字を ^ へ）
	$out =~ s/```/`^/g;
	
	# 文字数が指定より少ない場合は、元の文字列を返す
	if( MT::I18N::length_text($out) <= $nstr ){
		return $str;
	}
	
	# 半角の文字数で切る
	$nstr = $nstr - 2;	# ... の文字分を戻す（全角１文字分）適当に調整
	if( $nstr < 0 ){
		$nstr = 0;
	}
	$out = MT::I18N::substr_text($out, 0, $nstr);

	# 切り取る文字数を取得
	# ` を削除（全角文字の途中で切られた場合も、ここで削除される）
	$out =~ s/`//g;
	# 切り取る文字数を取得（日本語は ^ としてカウント）
	$cut_num = MT::I18N::length_text($out);


	# 切り取り
	$out = MT::I18N::substr_text($str, 0, $cut_num);
	# ...を追加
	$out .= '...';

	return $out;
});

perlの得意な文字列置換を利用した、なんちゃってアルゴリズム。
UTF-8の日本語コードが3byteでありASCIIコードとかぶらない性質を利用。
半角文字数が端数だった場合も、文字化けしないようにきちんと切り取ってくれます。
半角スペースが2byteコードになっているので1byteへ変換しています。

まぁ、プロポーショナルフォントの場合、どちらにせよ半角と全角で文字の長さは合わないんだけど。
≪ 続きを隠す

// Cソース表示
int a = 10;		// 変数Ａ
int b = 20;		// 変数Ｂ
int c = a + b;	// 合計

１．プラグインをダウンロードして、"plugins"と"mt-static/plugins"にアップします。

２．ヘッダーテンプレートの<head>～</head>の間に[code:cpp]<$mt:SyntaxHighlighterInclude brush="cpp,jscript,perl,xml,css" theme="default"$>[/code]を入れます。
このとき、Movable Typeの設定で "mt-config.cgi" の "StaticWebPath" が設定されていないと、JavaScriptとcssへのパスが正常に通りません。
デフォルトだと、コメントアウトされてるはず。
[code:xml]StaticWebPath http://www.xxx/mt/mt-static/[/code]
３．あとは、エントリー記事のソースを書き込む場所に
フォーマットで "SyntaxHighighter + Convert Line Breaks" を選んで

［code:cpp］
ソースコード
［/code］

と書けばよいだけのはずだけど、ここでもトラブル。

このサイトは、HTMLソースの無駄な改行やスペースを省略するために
Movable Type 備忘録さんのMTRemoveBlankを使用しています。
ところが、HTMLソースを出力したあとにJavaScriptでプログラムソースを表示するので
変換する前に、HTMLソース出力の段階で改行やスペースが削除されてしまいます。

これを防ぐために、プログラムコード部分のスペース削除を除外しました。
"RemoveBlank.pl" の "remove_blank_trim" 関数を変更させていただきました。

sub remove_blank_trim
{
    my @out = @_;
    my $txt = '';
    my $awb_flag = 0;  # プログラムコード開始フラグ

    for (@out) {
		if( $_ =~ m/<pre class=\'brush:/ ){  # プログラムコード部分開始
			$awb_flag = 1;
		}
		if( $_ =~ m/<\/pre>/ ){  # プログラムコード部分終了
			$awb_flag = 0;
		}
		if( $awb_flag == 0 ){
        	s/^\s+//;
        	s/\s+$//;
        }else{
        	$_ .= "\n";  # プログラムコード部分には改行を残す
        }
#        $txt .= $_ . "\n" if ($_ ne '');
        $txt .= $_;
    }

    return $txt;
}

さらに、エントリーを書くときにフォーマットが "SyntaxHighighter + Convert Line Breaks" だと、記事中にリンクを貼った場合などに（原因不明）、ソースコード中に自動改行の<br>や<p>タグが出現してしまうことがある。

謎だけど、フォーマットは "SyntaxHighighter" を選び、改行は<br>タグを手動でいれています。
≪ 続きを隠す