creator note

• Flash Sample
• このサイトについて
• プロフィール

06-18-10

HTML5、JavaScript、CSSが共有できるjsdo.it

ActionScriptを共有するwonderflのHTML5、JavaScript、CSS版ってところですね。サイト上で公開されているソースコードを編集して、そのまま公開することができます。

＞＞jsdo.it

にぎやかしにはなりますが、wonderflもjsdo.itも、実際に流用できて使えるコードってあるのでしょうか。。。とはいえ、刺激になり触発されるので、すばらしいサイトだと思います。シェアする方も、ホントの手の内は明かさないんでしょうけどねー。

06-17-10

jQueryとmootoolsでアコーディオンアニメーションを試す

JavaScriptのライブラリでよく使われるのはjQueryだと思います。他にもspryフレームワークや、Yahoo UIライブラリなどもありますが、mootoolsというライブラリはあまり多くは知られていないライブラリだと思います。

▼mootools.js
mootools配布元：http://mootools.net/download
mootools本家サイト：http://mootools.net/
日本語ドキュメントサイト：http://takahashifumiki.com/category/web/mootools/

そんなmootoolsですが、いったいjQueryとどっちを使ったらいいの？というのがあり、「jQuery vs MooTools」と題された記事がありましたのでご紹介します。

▼jQuery vs MooTools
和訳：http://takahashifumiki.com/web/programing/642/
本家：http://jqueryvsmootools.com/

とか言われても、、、実際に見てみないとわからないので、アコーディオンアニメーションをするサンプルを、jQueryとmootoolsで再現してみました。

jQueryでのアコーディオン

jQueryでのアコーディオンのソースコード

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
    $("#accordion div.element:not(:first)").css("display","none");
    $("#accordion div.toggler").click(function(){
        if($("+div.element",this).css("display")=="none"){
            $("#accordion div.element").slideUp("slow");
            $("+div.element",this).slideDown("slow");
        }
    });
});
//-->
</script>
<div id="accordion">
<div class="toggler">１段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>

<div class="toggler">２段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>

<div class="toggler">３段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>
</div>

mootoolsでのアコーディオン

mootoolsでのアコーディオンのソースコード

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
<!--
window.addEvent('domready', function(){
	var myAccordion = new Accordion($('accordion'), 'div.toggler', 'div.element');
});
//-->
</script>
<div id="accordion">
<div class="toggler">１段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>

<div class="toggler">２段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>

<div class="toggler">３段目</div>
<div class="element">
<p>テキストテキストテキスト</p>
</div>
</div>

どうですか？？あまりよくわからないかもしれませんが、他のブラウザ、IE6とかsafariとかでも確認してみてください。僕の雑感は、jQueryは、ややアニメーションがガタガタ動いているように見えるのに対して、mootoolsのほうはスムーズに動いているように見えます。しかも、mootoolsのnew Accordion(引数)は最小限のパラメータのみを記入しているのに、ファーストビューで最初のコンテンツが下へビョーンと動くのがわかります。さらに、透明度ゼロからじわじわ100％濃度にアニメーションもしています。jQueryで同様の演出を加えるには、更にパラメータが必要になりますが、mootoolsではデフォルトの記述で細かい演出が設定されてて、とても簡単に導入できるというのがわかりました。

これだけの結果では一概にどれがいいとは断言できませんが、アニメーションはmootoolsのほうが得意そうな印象を受けましたので、簡単に演出を加えたい方は参考にしてみてはいかがでしょうか。ではまたー

12-13-09

swfobject2.xの使い方

FlashをHTMLに貼り付ける方法の中でswfobjectsというJavaScriptでswfを表示させる方法が便利です。今更な感じもしますが、ボクが使ってて気になったところ、例えば表示した時、一瞬Flashの場所が抜けて、あとから表示することによってガクガク表示したり、swfのキャッシュをクリアにするなど、個人的に問題と思ったところを補う形で紹介したいと思います。

まずはさっそくソースコードのコピペ場所を！

//swfobject.jsを呼び出す
<script type="text/javascript" src="swfobject.js"></script>

//表示させるswfコンテンツの設定
<script type="text/javascript"><!--
var flashvars = {hensu: value};
var params = {allowscriptaccess: "always"};
var attributes = {id: "myFlashContent",name: "myFlashContent"};
swfobject.embedSWF("content.swf?u=20091210", "flashContent", "400", "200", "9.0.0", "expressInstall.swf", flashvars, params,attributes);
//--></script>

//FirefoxでFlashコンテンツに触ったときに出る、
//点線（フォーカスのアウトライン）を消す。
<style type="text/css"><!--
object {outline: none;}
--></style>

//実際に表示させる場所に書くHTMLと代替コンテンツ
<div style="height:200">
	<div id="flashContent">
	<h1>代替コンテンツ</h1>
	</div>
</div>

swfobject.jsを呼び出す記述

swfobject.jsはgoogle codeからダウンロードできます。
配布元：swfobject – Project Hosting on Google Code
http://code.google.com/p/swfobject/

ページ右側に「Featured downloads」というところから、swfobjectのzipファイルをダウンロードします。zipを解凍すると「swfobject.js」がありますので、それを任意の場所にアップしてソースコード2行目の記述を、必要であればパスを換えてHTMLに書きます。

//swfobject.jsを呼び出す
<script type="text/javascript" src="swfobject.js"></script>

flashvarsの使い方

swfobject.embedSWFが実際にFlashを表示させる関数です。その関数の引数にいろいろパラメータを渡すことによっていろんなことができます。flashvarsは変数の値をswfに送るための記述です。もちろん、変数を渡す必要がなければ省略できます。

var flashvars = {hensu1: value1, hensu1: "変数２"};

この「flashvars」のなかに入れる値は、変数をActionScriptへ渡すために記述です。phpやJavaScriptなどのプログラムからFlashへ何か値を渡したいときに、

var value1 = "値だよ";
var flashvars = {hensu1: value1, hensu2: "変数２"};

このように書けば「hensu1」というグローバル変数のなかに「”値だよ”」という文字列StringがFlashにわたることになります。ActionScript内の記述では、この「hensu1」と「hensu2」に対して「var hensu1 = new Sting();」や「var hensu1 = “”;」などを書く必要はありません。というのも、変数「hensu1」に格納された値「”値だよ”」がswfにわたってからFlashが再生されるので、せっかく渡った値がリセットされてしまうことになります。Flash内で動作確認する際は「flashvars」が渡す値を仮でActionScript内の変数として書いてデバッグをし、実際にHTMLをブラウザでFlashの動作確認する際にはコメントアウトをしておきましょう。

paramsの設定方法

objectタグの中に設定するparamsが必要であれば追加して書くことが可能ですが省略もできます。FlashPlayerを投下させる意味のある「wmode」の設定が、たとえばJavaScriptで作られたドロップダウン式のメニューとFlashがかぶっている場合に、この「wmode」が良く使われると思います。しかし、wmodeをtransparentにすると日本語入力などのコンテンツに使用すると、文字が入力できないというバグがあるみたいなので使う時には注意してください。
参考サイト：wmode を transparent に設定した際の注意点

http://www.adobe.com/jp/support/kb/ts/228/ts_228635_ja-jp.html

▼pramsのソースコードサンプル

var params = {
	play: "true",
	loop: "false",
	menu: "false",
	quality: "best",
	wmode: "transparent",
	allowscriptaccess: "always"
};

attributesの使い方

objectタグにidとnameを設定する時にこのattributesを使います。いろいろ調べても情報がなく、どういった使い方をするのかよくわかりませんが、、、おそらくIE4やN3などの古いブラウザで表示するのに必要そうな雰囲気がします＾－＾；

var attributes = {id: "myFlashContent",name: "myFlashContent"};

swfobjectができること

１．Internet Explorer（IE）においてのActiveX コントロールのアクティブ化
　いわゆる、IEでみたときにFlashを一回クリックしないと動作しないし触れないのを回避できます。
　ActiveX コントロールのアクティブ化(Microsoft)
　http://msdn.microsoft.com/ja-jp/library/ms537508(VS.85).aspx
　アクティブコンテンツのFAQ(Adobe)

２．FlashPlayer未インストールのユーザーに対しての代替コンテンツの表示

３．再生に必要なFlashPlayerのバージョンが満たされてなかった時に、代替コンテンツを表示させるか、Express Installを用いて最新版のFlashPlayerをインストールしてもらうのを促す。
参考サイト：Express Install 適用ガイド(Adobe)
http://www.adobe.com/jp/devnet/flashplayer/articles/expressinstall.html

４．Flashコンテンツが重要なコンテンツの場合、h1タグを用いて見出しを設置できるSEO対策。

５．パラメータを変数としてswfに渡すことができる。

swfobjectの注意点

・違うドメインへページ遷移するとき
getURLするときは、paramsにallowscriptaccess: “always”を追加する必要がある。
・wmodeの注意点
文字を入力するコンテンツの場合、FlashPlayerの透過を設定するwmode: “transparent”にすると文字が入力できない。
・swfobject.embedSWFの引数に入れる順番は決まっています。
例えば、flashvarsは使わないがparamsを使いたい時には、flashvarsの場所をnullにする必要があります。
▼引数なしの場合のサンプル

var flashvars = null;
var params = {allowscriptaccess: "always"};
swfobject.embedSWF("content.swf?u=20091210", "flashContent", "400", "200", "9.0.0", "expressInstall.swf", flashvars, params);

▼同じようにexpressInstallを使わない場合

swfobject.embedSWF("content.swf?u=20091210", "flashContent", "400", "200", "9.0.0", "", flashvars, params);

おまけ設定

・outline:noneのCSSでFlashの回りに点線を消してしまう。
CSSでobjectのoutlineをnoneにしています。これはFirefoxでFlashを表示させた時、そのコンテンツに対してクリックすると周りに出る点線を消す設定です。キーボードのTabを押すと、ページ内でクリックできる箇所にフォーカスをあてているこの点線を、swfobjectが表示させるobjectタグに対して設定しています。

・Flashに指し換わるdivの上に高さを設定したdivを挟む。
フルFlashコンテンツであれば問題ありませんが、パーツで使用するFlashがswfobjectで展開される前の状態では、一瞬、上下にガクガク表示する現象があります。これはネットの環境やパソコンの性能に左右されるかもしれませんが、ここで予め高さを設定し、backgroundで色や背景画像を設定しておけば見た目に変なことが起きることがありません。

10-17-09

ソースコードに色をつけるSyntaxHighlighterの導入方法

いろんなブログをみていると、HTML、JavaScript、CSS、XMLやPHPのソースコードを、列番号が割り振られて、かつ部分にフォントカラーが設定されているのを見かけます。「ハイライト」って言うんですね。

▼WordPressプラグインSyntaxHighlighter Evolvedの使い方はこちら
WordPressでソースコードに色をつけるプラグインの使い方：SyntaxHighlighter Evolved

まさか人力で設定しているわけでもなさそうですし、どうやってるのか調べてみると、SyntaxHighlighterというJavaScriptとCSSで簡単に導入できるみたいなのでさっそく試してみました。

SyntaxHighlighterのライブラリをダウンロード

▼ダウンロードはこちらから。
配布元：syntaxhighlighter – Google Code

▼解凍したフォルダー構成。
・Uncompressed
・Styles
・Script

この３つのフォルダーをアップして、
導入したいサイトのheadに下記を書きます。

<link type="text/css" rel="stylesheet" href="http://testblog.com/Styles/SyntaxHighlighter.css" />
<script type="text/javascript" src="http://blog.caraldo.net/Script/shCore.js"></script>

<!-- 表示したい言語に応じて書きます -->
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushJScript.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushCss.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushPhp.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushXml.js"></script>

<!-- window.onloadの時に実行される、表示させる為の関数 -->
<script type="text/javascript">
window.onload = function () {
	dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';
	dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

↑これは、普通のpreタグで挟んでます。
preタグに対してnameとclassを指定してあげます。

<pre name="code" class="html:collapse">
ここにソースコード
</pre>

さっきのheadに書く記述に挟んだpreタグnameとclassを設定してあげると、もうお気付きかもしれませんが、classの部分を書き換えると、その種類のソースコードにハイライトが変わります。下記はそのリストで、左側がclassに入力する種類で、右側は使用する際にheadに書き足すJavaScript名です。

cpp        => shBrushCpp.js
c          => shBrushCpp.js
c++        => shBrushCpp.js
c#         => shBrushCSharp.js
c-sharp    => shBrushCSharp.js
csharp     => shBrushCSharp.js
css        => shBrushCss.js
delphi     => shBrushDelphi.js
pascal     => shBrushDelphi.js
java       => shBrushJava.js
js         => shBrushJScript.js
jscript    => shBrushJScript.js
javascript => shBrushJScript.js
php        => shBrushPhp.js
py         => shBrushPython.js
python     => shBrushPython.js
rb         => shBrushRuby.js
ruby       => shBrushRuby.js
rails      => shBrushRuby.js
ror        => shBrushRuby.js
sql        => shBrushSql.js
vb         => shBrushVb.js
vb.net     => shBrushVb.js
xml        => shBrushXml.js
html       => shBrushXml.js
xhtml      => shBrushXml.js
xslt       => shBrushXml.js

view plain、copy to clipboard、print、?、のテキストを日本語にしてみる。

Scripts/shCore.js　をテキストエディタで開いて、「label:’」と検索してみると４箇所ヒットすると思います。それぞれを下記のように書き換えてみました。

label:'view plain'	=>	label:'プレーン表示'
label:'copy to clipboard'	=>	label:'クリップボードにコピー'
label:'print'	=>	label:'プリント'
label:'?'	=>	label:'コレは何？'

すると文字化けして表示されてしまいました。。orz　これらSyntaxHighlighterのファイルコードは全てShift_JIS形式になっています。ブログやサイトに設定している文字コードに引っ張られるので、headタグに書いているshCore.js”のところに、

<script type="text/javascript" src="http://blog.caraldo.net/Script/shCore.js" charset="Shift_JIS"></script>

「charset=”Shift_JIS”」と書き足しました。

SyntaxHighlighterにActionScritpを対応させる方法

▼こちらのサイトから、ActionScriptをハイライトさせるJavaScriptをダウンロード
配布元：AS3 Syntax Highlighting (with SyntaxHighlighter)
▼解凍したフォルダー構成。
・Scripts
・Styles
StylesのなかにあるSyntaxHighlighter.cssに差し替えて、Scriptsの中にあるCompressedとUncompressedの中にある、shBrushAS3.jsをそれぞれのディレクトリにアップして、

<pre name="code" class="as:collapse">
ここにソースコード
</pre>

これでActionScriptのハイライトが可能になります。

09-25-09

JavaScriptで動くファミコンエミュレーター：JSNES

JavaScriptってすごいなー！！！ブラウザで懐かしいファミコンが動かせるエミュレーターです。CanvasというHTML5が使われているので、それに対応したブラウザ、かつ、JavaScriptの処理が早い、Google Chromだとなんとか動きます。もちろん、利用の際には著作権などに注意し、自己責任の上でご利用してください。

JSNES：http://benfirshman.com/projects/jsnes/