Welcome to weblog

先日、Twitterの公式ツイートボタンが発表されましたね。

それにともなって、KAYACさんの

たった3行!Flashで公式Tweetボタンをつくる | エントリー | _level0.KAYAC | flash ActionScript blog

の記事でFlash用公式Tweetボタンの作り方の説明が紹介されてました。

インスパイアされて、公式Tweetボタンのブックマークレット版を作ってみました。(非公式だけど)

more…

みなさまおひさしぶりです
”おひさしぶり” なんて言わず日々投稿しなきゃとは思うんですけども、
まあマイペースに。

今、思いつきでブックマークレット作ったので紹介しておきます。 more…

引越し完了

2010 07/06 00:26:59

おひさしぶりですこんばんは

私事ではありますが、引越しをしまして、

その関係でずいぶんと更新が滞っていたわけですね(とはいえ滞りすぎなんですけども)

んでもって、引越し後にメインPCが起動しなくなるというアクシデントもあり、
もうバッタバタだったわけです。

先日、無事修理が完了してツクモ電気の修理工場からメインPCが戻ってきたわけです

環境も整ったことだし、いろいろとブログネタも溜まっているのでまた近いうちブログアップしますのでまたよろしくです。

眠いので今日はこのへんでー
(あいかわらずゆるゆるです)

1, removeChild や visible = false; されたMCはMouseEventは効かなくなるけど、ENTER_FRAMEとかは効いたまま。
2, Flash IDE 上で配置したMCとかは、ドキュメントクラス配下になる。
3, Event.ENTER_FRAME とかってのは定数で、実際の中身は “enterFrame” とか文字列が入ってる。

なにか気づいたら追記するかも。
すごくベーシックなことだけど、Flash初心者としてはとても大事なのでメモメモ。

昔習った三角関数とか全然覚えて無くて、
色々試してみた。

今回は直角三角形の辺の長さから角度を求めるっていうのを使ってみた。[/javascript]
青い矢印の座標を基準に、青い矢印の座標とマウスの座標を結ぶ直線と斜辺とみなした直角三角形を使ってます。
(説明がヘタクソですね。。)

Flashにマウスをのせると、マウスの方向に矢印が向きます

This movie requires Flash Player 9

ソースは以下のとおり(一部)

var dx:int = mouseX - arrow.x;
var dy:int = mouseY - arrow.y;
arrow.rotation = Math.atan2(dy,dx) * 180 / Math.PI;

このソースをENTER_FRAMEで回してます。
Math.atan2が便利すぎる!

昔の数学(算数?)の記憶をたどりつつ、
思い出せずにググりつつで、ピタゴラスの定理(三平方の定理)を使ったFlashをさくっと作ってみました。

青いマルをドラッグしてみてください

This movie requires Flash Player 9

どこにピタゴラスの定理を使っているかというと、
大きい円の大きさの可変部分のロジックです。
Flashの中心点から青いマルまでのx軸での距離をA辺、Flashの中心点から青いマルまでのy軸での距離をB辺、
Flashの中心点と青いマルを結ぶ直線を直角三角形のC辺とみなし、

A2 × B2 = C2

っていう公式を使って、C辺の長さ(Flashの中心点と青いマルを結ぶ直線の長さ)を求めています。

ソースは以下です。

package {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.events.Event;

	public class Main extends MovieClip{
		var ball:MovieClip;
		var circle:MovieClip;

		public function Main() {

			ball = ball_mc;			//ドラッグ対象のmc
			circle = circle_mc;	//大きさの変わる円のmc

			ball.addEventListener(MouseEvent.MOUSE_DOWN, startDragHandler);
			ball.addEventListener(MouseEvent.MOUSE_UP, stopDragHandler);
		}

		public function startDragHandler(e:MouseEvent):void {
			e.target.startDrag();
			stage.addEventListener(MouseEvent.MOUSE_MOVE,circleTraceForm)
		}

		public function stopDragHandler(e:MouseEvent):void {
			e.target.stopDrag();
			stage.removeEventListener(MouseEvent.MOUSE_MOVE,circleTraceForm)
		}

		public function circleTraceForm(e:MouseEvent):void {

			//ドラッグ対象のmcの座標から、中心点からの距離を計算
			var sideA:int = ball.y - stage.height / 2;
			var sideB:int = ball.x - stage.width / 2;

			//ピタゴラスの定理にて、直角を挟む辺a,bの長さから斜辺の長さを出すには a*a + b*b = c*cとなるので
			var sideC:int = Math.sqrt(sideA * sideA + sideB * sideB);

			circle.width = sideC * 2;
			circle.height = sideC * 2;
		}
	}
}

まずはiframeのsrcの値を疑え!!!

ってわけで、今日お仕事中に久々ハマったのでメモメモ。
(同じコトで再度ハマるとかいかんですね)

https環境で、IE6でiframeのsrcの値が空だと怒られます。

「このページにはセキュリティで保護されている項目と保護されていない項目が含まれています。
保護されていない項目を表示しますか?」

って怒られます。
ごめんなさいいい

これどういう場合に起きやすいかというと、
JavaScriptでiframe生成して、srcに値セットする前にうっかりappnedChildでノード追加しちゃうとなります。
(まさに今回がそうでした)
なので、ちゃんとsrcの値セットしてからappendChildしましょーねと。
そういう話なのでした。

JavaScriptでアコーディオンとかのアニメーションとかを再現したい場合、伸びる要素を最初display:none;にしておいて、ポチしたらdisplay:block;とかにして、heightとか伸ばしてやると思うんだけど、そのdisplay:none;をスタイルシートに書いちゃうとJavaScriptを無効にしてる人が情報を見れなくなっちゃうので、JavaScript側でdisplay:none;にしたいよって時のメモ。(説明が長いな
会社の先輩から聞いて目から鱗だったのでメモメモ。

普通にJavaScriptで

obj.css.dipslay = "none";

とかやるのはイケてない。
これやるにはHTMLのノード拾わなきゃだからwindow.onload後じゃないといけないし、
そうすると環境によっては一瞬ちらっと見えちゃったり、要素が一瞬出て消えるのでガタっとなるかもしれない

そこで、一枚スタイルシートを別で用意して、それにdisplay.none;の記述だけしておく。
そいつをJavaScriptでonload前にリンクさせる。
ここは普通に下記のような感じでいいかなと。

document.write('<link rel="stylesheet" href="/css/hoge.css" type="text/css" /> ');

もしあれだったらdocument.headの有無のチェックとか入れておくのがいいのかも?

まとめると、

  1. 1. デフォルトのスタイルシートではdisplay:block;に
  2. 2. JavaScriptでdisplay:none;用のスタイルシートをonload前に追加
  3. 3. 追加されたスタイルシートのスタイルでdisplay:block;がdisplay:none;に上書かれる。

みたいな感じかと。
スタイルシートを別で足さなくても、直書きでheadにスタイル書いてもいいかもだけど、
管理しやすいってことで別スタイルシートにしたほうがいいかなと。

ちょっと文章にしづらいんだけど、少し見えたこと。
覚え書き程度にメモっておく。

仕事でのスキルアップ、やりたい仕事、理想と現実などなど
若手クリエイター(自称でも)にありがちなことを悶々と考えていました。
そして帰宅しても仕事のこと考えたり、仕事で必要なスキルを磨いたり。
それはそれで楽しい部分もあったんですが、疲れたり苦しくなったりする部分も多かったり。
webっていう世界は好き。
だから自分は好きなことを仕事にしていて、でも苦しいってどういうことだ。。
なんて考えてました。

仕事でやること、個人でやりたいこと。
使うツールと見せる場が同じでも、求めることと求められることが圧倒的に違う。
だから「こんな技術仕事に応用できない」とか「もっと仕事に役立つものを」なんて苦しまなくてもいい。
まずは一度、別物と切り離して考えてみる。
そうすると心が軽くなった。
個人でやりたいことは、純粋に自分が楽しいこと。
自分が楽しいことをみんなで共有できたらもっと楽しい。
制作欲っていう比較的一人称なものと、
表現欲っていう二人称以上なものを満たすための場が自分にとってのwebなのだと気づいた。
それはきっとジュエリーを作っていた頃の自分と何も変わっていない、自分の中のプリミティブな欲求。
ジュエリー制作とweb制作だろうと、結局求めているものは変わらないみたいだ。
変な言い方をすると、企業webサイトの制作会社でジュエリー制作しようとして苦しんでるのと変わらないんだ、たぶん。

ツールと見せる場が同じだから、
個人でやったことがたまたま会社での仕事に生かせたら棚ボタモノ!
そう考えることにした。

とりあえずはこの悶々とした気持ちが少しでもポジティブな方向に向いたことを喜ぼう。
一個人としてのアクションをまずは楽しむところから仕切り直そう。
(そしてやりたい仕事も今の請け負い制作のような受身なものでなく、自社開発して発信していく仕事がしたいという事にも気づいてしまったがそれはそれで。)

あ、でもでも、仕事としてのwebも嫌いじゃないです。
ほんとほんと。

文脈もなんもあったもんじゃないけど、
とりあえず考え方が少しひらけた気がするのでメモ。
また悶々としたら見返そうかなって。

初めてのXMLパース

2010 04/06 21:09:18

API使って色々したいって時に、JavaScriptにてXMLのパースを初めてやってみたので、
ちょいメモメモ。
CDATAセクションの扱いとかも勉強になった。

XMLがこんな感じだったとする

<?xml version="1.0" encoding="UTF-8"?>
<content>
<ID><![CDATA[001]]></ID>
</content>

で、IDの中身の値 001 を取得したい。
とりあえず今回は大枠の content タグの取得からノードを辿ってみる。

//まずレスポンスのxmlを変数に。
var xml = xmlhttp.responseXML;

//content ノードの取得。getElementsByTagName使ったから、 HTML Collectionで返ってくるので  [0] でノード指定。
var node_content = xml.getElementsByTagName("content")[0];

//ID ノードの取得。firstchildでもいけるし、getElementsByTagNameでもいい。
var node_ID = node_content.childNodes[0];

//最後に値の取得。CDATAセクションも一つのノードなので childNode[0] でアクセス。nodeValueで値を取得
var node_ID_value = node_ID.childNodes[0].nodeValue;

基本的にはノードの辿り方はHTMLのノード辿るのと大差ないみたい。
初めてやってみたので、これ以外で何か素敵な方法とか、こうするのがベターとかあったら是非とも教えていただきたいです。

参考サイト : Ajax/JavaScriptのXML parser
http://www.nikep.net/srdpty/index.php?/archives/21-AjaxJavaScriptXML-parser.html

Get Adobe Flash playerPlugin by wpburn.com wordpress themes