creator note

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

07-02-10

HTML5 Canvas 一覧（チートシート）

HTML5の新機能、Canvasタグのelement（要素）、Attributes（属性）、Methods（関数）の一覧をまとめたCheat Sheet（チートシート）をまとめたページを発見しました。

元ページ：HTML5 Canvas Cheat Sheet v1.x
URL：http://simon.html5.org/dump/html5-canvas-cheat-sheet.html

まだバージョンが１．ｘになっているので今後増えていきそうですね。

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のほうが得意そうな印象を受けましたので、簡単に演出を加えたい方は参考にしてみてはいかがでしょうか。ではまたー

05-28-10

iPhone向けサイト制作が簡単になるDreamweaver機能拡張

iPhone用のページを作成する時は、PCブラウザ用のHTMLファイルのマークアップはそのままでCSSのみiPhone用に作成して、テンプレートを共通化させておきたいものです。

今回紹介するのは、エイチツーオー・スペースが配布を開始した、Dreamweaver CS4/5用のextension（機能拡張）でiPhone向けサイトの手助けをするツールの紹介です。最初にiPhone用のテンプレートを選択し、iPhoneのデザイン風にCSS3でレイアウトされ、Device Centralで表示確認できる流れで制作ができるみたいです。

配布元：iPhone site extension for Dreamweaver CS4/5 | エイチツーオー・スペース[H2O Space.]
http://h2o-space.com/web/product/iphone_dw/

05-27-10

5月27日までAdobe Creative Suite 4 Web Standardを買っておこう！

明日に迫ったAdobe Creative Suite 5。Adobe Creative Suite 4シリーズがAdobe Storeで購入できるのは今日までとなってしまいました。CS5発表の時に話題となった一番安くCreative Suite 5 Web Premiumを購入する方法をおさらいします。

Creative Suite 5 Web Premium購入までの流れ

１．Dreamweaver CS4 をダウンロード購入します。49,875 円

２．Creative Suite 4 Web Standardにアップグレードします。75,000 円

３．Creative Suite 5 Web Premium無償アップグレード申請をする。0円

４．111,375円お得！！

CS5ではWeb Standardが廃止され、Web Premiumに統合されました。新規でCS5 Web Premiumを購入すると236,250 円かかりますが、この手順で購入すると124,875円で111,375円お得です。もちろん、既にCS4をもっている方は普通にアップグレードすれば遠回りする必要はありませんが、CS3からのアップグレードするかたは、128,000 円なので、3,125円お得です。

「んじゃそれぐらいのお金やったらええわー！」ってなるかもしれませんが、Flashという曲者アプリを思い出してくださいｗ　flaファイルのバージョンを落として納品して欲しい。と言われたことがあると思います。そうすると、CS3からCS5にアップグレードしてしまうとCS4が抜けている為、今後CS5で保存したflaファイルをCS3に落とすことができなくなってしまいます。

CS4も手に入って、かつFlashの下位バージョンも手に入る。たぶん、これはすごくお得だと思います。
CS4の購入は5月27日今日までなのでお忘れなく！！（ボクはもう買いました）

>>新製品・新バージョン発表後の無償アップグレードポリシーについて
http://kb2.adobe.com/jp/cps/740/740.html

05-21-10

Papervision3D本語 リファレンスガイド

ActionScriptで3DCGアニメーションや3Dゲームを作るために欠かせない、Papervision3Dの日本語ドキュメントが公開されてましたのでメモします。

Papervision3D™ 2.1 日本語 リファレンスガイド
http://papervision3d-jp.googlecode.com/svn/trunk/docs/index.html
papervision3d-jp（プロジェクト）
http://code.google.com/p/papervision3d-jp/

04-15-10

iPhoneOS4になれば31個のステキな機能が追加される

なんといってもマルチタスクできるのが魅力的ではありますが、31個も機能が追加されるみたいです。iPhoneアプリを作る際に、これらの機能もアイデアの一つとして取り入れていきたいところです。

3Gでのデータ通信ON・OFF切り替え

ネットワーク設定で、3Gでのデータ通信のONとOFFの切り替えができるようになりました。特に、これまでAPNDプロファイルを使って非公式な方法で制御されてた方には、安心ではないでしょうか。

SMS文字数カウント

SMSが長文になりすぎないように、入力した文字数を表示してくれます。

SMS検索

メールのような感覚で、SMSメッセージを検索できます。

ホームスクリーンの壁紙

ロックスクリーンとホームスクリーンで別々の壁紙を設定できます。

カメラズーム

カメラを使う際、画面をタップするか、バーをスライドすると5倍までズームできます。

WebとWikipedia検索

通常のSpotlight検索から、WebやWikipediaにも直接検索可能になりました。

添付ファイル表示は目いっぱいに

Mailアプリで添付ファイルをプレビューするとき、いつも画面上下に表示されているバーがなくなり、表示できる範囲が目いっぱいまで拡大されます。

「新規連絡先」入力がすっきり

メインスクリーンで入力できる項目が増えました。上画像左の「OLD」にあるように、緑の「＋」の部分はいちいち別画面に移動して入力していたので、だいぶすっきりです。

写真をイベント、顔、場所で分類

iPhotoを使っている方なら、手動でアルバムを作る必要なく、イベント、顔、場所をキーにしてiPhoneに（iPadにも）写真を同期できます。

歌詞・Podcast情報表示のON・OFF

iTunesに取り込んだ歌詞とかPodcastの情報表示のON・OFFが、一括設定できるようになりました。

スペルチェック

スペルミスらしき部分を、赤い点線で警告してくれます。しかも、スペルミスだけでなく、世の中的にNGなワードも、（スペル的には正しくても）警告されるようです。

写真添付時にリサイズできる

カメラで撮った画像をメールで送るとき、縮小するかどうかを聞いてくれます。親切！サイズは、実サイズも含めて4つから選べます。

プレイリスト作成

「On the Go」はiPhone OS 4からはなくなったようです。代わりに、「Add Playlist…」になり、ここからプレイリスト作成ができ、プレイリスト名も「On the Go1」とかではなく、好きな名前をつけられます。

iTunesのアルバム・ビュー

アルバム・ビューでは、曲名リストだけでなく、アルバムのサムネイルと長さ、曲数、リリース日が表示されます。

アプリごとの位置情報利用設定

設定＞位置情報で、位置情報を使ってもOKなアプリを設定できます。また、最近位置情報を使ったアプリにはコンパスのアイコンが付くことで、確認できます。

ゲームセンター

今はまだ始まっていませんが、ゲームセンターのサービスが始まれば、友達と一緒にプレイしたり、ハイスコアを競ったりできるようになります。

メールのスレッド表示

メールをスレッドに分けて表示できます。

長い英数字パスワード対応

従来の数字4桁に代わり、英数混在のより長いパスワードに対応しました。

複数メールアカウントの表示を統合

複数のメールアカウントの表示を、1画面で表示することができます。もちろんメールアカウントごとの表示と切り替えることも可能です。

Appフォルダー（アラート付き）

アプリをまとめられるAppフォルダー。これだけでも便利ですが、しかも、フォルダー内のアプリにアラートがあると、フォルダーにも「！」でアラートが表示されます！

フォルダーはドックにも置ける

便利なAppフォルダーはドックにもおけます。

メール内に連絡先画像を表示

連絡先に画像を登録している人からメールが届くと、メール画面のすみっこにその画像が表示されます。

アプリのクローズ

マルチタスキング中のアプリが並ぶトレイから、アプリを閉じられます。アイコンを押して、赤い「－」（マイナス）が表示されるまでホールドするだけです。

電卓アイコン

アプリ自体は同じですが、電卓のアイコンが変わってちょっとおしゃれになりました。

バースデーカレンダー

バースデーカレンダー機能では、連絡先からみんなの誕生日を一括で取り込めます。OFFにすることもできます。

メール内の日付と住所のスマートリンク

メール内の住所や日付がリンクになり、住所であれば地図検索、日付であればカレンダー登録ができます。GmailのWebクライアントと同じような機能です。

「よく使う項目」は、ダブルタップとホールドで

これだけは、かゆいところに手が届かなくなったと感じる方もいるかもしれません。「よく使う項目」を使うには、従来はダブルタップのみでしたが、iPhone OS 4では、ダブルタップしてホールド、になりました。iPhone OS 4でダブルタップすると、タスクマネージャーが立ち上がります。

Bluetooth キーボードのペアリング

Bluetoothキーボードが使えるようになりました。

SMS送信失敗時のアラート

SMSの送信に失敗した場合、これまでは自分で確認しないと、失敗したことに気が付きませんでした。iPhone OS 4では、アイコンのわきに「！」が表示されるようになりました。

メモの同期

メモの同期のON・OFFが一括でできるようになりました。

Mobile Safariでの、ページ内での動画再生

新しいiPhone Safariでは、iPadのように、Quicktimeに飛ばずにページ内で動画を再生できます。フルスクリーン表示するには、タップするのみ。

元の記事：http://gizmodo.com/5513121/the-hidden-secrets-of-iphone-os-4/

04-13-10

Flash制作者とWebディレクターがよくするやりとりFAQ

Q.納品されたswfファイルが開けません

A.ローカル（StanndAlone）でswfを再生できるFlash Playerは無料配布されてませんので、Flash Playerがインストールされたブラウザにドラッグアンドドロップして確認してください。

Q.ブラウザにswfファイルをドラッグアンドドロップしましたが、サイズが違います。

A.htmlに乗せていないswfファイルは、縦横サイズが指定されていないので、ブラウザウインドウの幅の分だけ拡大します。原寸サイズで確認する場合はhtmlに貼り付けて、htmlから確認してください。

Q.Flash Playerをインストールしているのに、Flashが表示されません！

A.（JavaScriptでswfを表示させている場合）JavaScritpがOFFではありませんでしょうか？swfを表示するために、swfobject.jsというJavaScritpを使用していますので、確認する際にはJavaScritpをONにしてください。

Q.修正したswfファイルが、更新されてないみたいなんですが。

A.swf配信後、更新前のキャッシュファイルが残っている可能性があります。ブラウザのキャッシュを消してから確認してみてください。

Q.外部XMLを更新、配信したんですが反映されません。

A.swfの修正更新ではなく、外部XMLを用いている場合、Flash側でキャッシュ対策がされてない場合があります。Flash制作者へお問合せください。

Q.外部から読み込んでいる画像が表示してません。

A.読み込んでいる画像のURLに直接アクセスしてみてください。そこに画像はありますか？

Q.Flashが出てなくて真っ白です。

A.真っ白いという状況は複数の原因が考えられますので、まず、そのFlashが表示されるはずの真っ白い場所を右クリックしてみてください。Flashのコンテキストメニューが表示されなかったらFlash Playerがインストールされてないか、HTMLの記述に間違いがあります。まずはそこを確認してから他の原因を調べます。

Q.IEではFlashが見れますが、FirefoxではFlashが表示されません（その逆の場合も）

A.見られてないブラウザにFlash Playerがインストールされていない可能性があります。IEとFierfoxとでは、各ブラウザごとにFlash Playerのインストールが必要ですので、見られないブラウザでAdobeのサイトからFlash Playerをインストールしてください。
http://get.adobe.com/jp/flashplayer/

Q.ページ内リンクからブラウザの戻るボタンで、Flash Playerが正しく再生されない

A.ブラウザによって「戻る」ボタンの仕様がちがい、全てに当てはまるとは限りませんが、Flashのタイムラインが進んでしまってる状態のまま「戻る」可能性があるので、1フレーム目にXMLや画像を読み込むActionScriptを記述していると、その1フレーム目のActionScriptが実行されていないまま、フレームが進んでいる状態に戻っている可能性が高いと思います。ページ内リンクからブラウザの戻るボタンで、Flash Playerが正しく再生されないを参考にしてみてください。

Q.FlashPlayerは潜在的に危険な操作を停止してしまいます。

HTTP環境外、例えばローカルとかからFlashを再生してリンクを確認する時、セキュリティが働いてページ遷移しない設定になっています。FlashPlayerは潜在的に危険な操作を停止しましたの回避策を参考にしてみてください。

04-08-10

Flashに値やパラメータを送る方法まとめ

HTMLにswfファイルを貼り付けてブラウザで見るときに、場合によってはHTMLに書いておいた値やパラメータをFlashの変数に渡してあげたいときがあると思います。Flash内を更新したいときや、ちょっとした汎用性のあるコンテンツを作るときに、Flashアプリケーションがインストールされていない環境でも、Flashの更新をしたりする時に便利です。色々ある方法の中で一番シンプルな方法、swfobjectを使って、ActionScriptにどう書けばいいのか紹介します。

swfobjectを使ってパラメータを設定する場合

swfobjectの使い方はswfobject v2.xの使い方を参考にしてみてください。
Flashコンテンツの背景色を色々変更したいという例えで紹介します。HTMLに書くswfobjectの書き方のイメージはこんな感じにします。

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
<!--
var flashvars = {bgColor: "FF0000"};//←背景色
var params = {allowscriptaccess: "always"};
swfobject.embedSWF("flash.swf", "flashContent", "100", "100", "8", "", flashvars, params,attributes);
//-->
</script>

flashvarsに変数名「bgColor」を書いて、値である16進数の「FF0000」を書いてみました。
ではActionScriptではどのように書くか

ActionScript2.0以下でflashvarsを取得する場合

ステージ全部に収まるシェイプを作って、今回の例では100×100の正方形のMovieClipを作ってステージに配置します。インスタンス名を「bg」としました。第１フレームに下記のActionScriptを書きます。

var color_obj = new Color(bg);// カラーオブジェクトを作成する
var colorStr = "0x"+_root.bgColor;//ここがswfobjectで設定した値が入ります
color_obj.setRGB(colorStr);

厳密なことはわかりませんが、flashvarsに格納した値はFlash上では_rootに宙に浮いてて、それを_root.[変数]にしてあげるとポコ！ってはいる。そんなイメージにしてますボクはｗ

ActionScript3.0でflashvarsを取得する場合

ActionScript3.0になってから、そんな宙に浮いていた値のイメージが、ちゃんとScriptを書いて値を取りに行くことを書かなければいけなくなりました。swfに渡そうとする変数の値は、LoaderInfoクラスで取得することができます。

import flash.display.LoaderInfo

var params:Object = loaderInfo.parameters;
var bgColorStr:String = params["bgColor"];

params[flashvars]になるので、複数の値を取得する時は名前を指定してあげれば取得することができます。

04-06-10

ActionScript3.0で右クリックのコンテキストメニューを消す方法

ActionScript3.0から、Flash領域内で右クリックしたときに出るコンテキストメニューを非表示にすることができるようになりました。

import flash.ui.ContextMenu;

var menu_mc = new ContextMenu();
menu_mc.hideBuiltInItems();

拡大縮小や描画領域を表示させるのはユーザーの方に見せる必要がないと思い消してもいいと思いますが、コンテンツによってはセキュリティーの設定項目と、Flash Playerとは。のメニューは残しておいたほうがいいかもしれへんなぁーっと個人的には思いました。