Welcome to weblog

公式Tweetボタンのブックマークレット版 作ってみた

火曜日, 8月 17th, 2010

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

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

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

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

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

more…

ブログ記事を引用投稿するブックマークレット

金曜日, 7月 30th, 2010

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

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

[Flash] すごく基礎的なことの覚え書き

金曜日, 5月 14th, 2010

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

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

Flashで三角関数を使ってみる

水曜日, 5月 12th, 2010

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

今回は直角三角形の辺の長さから角度を求めるっていうのを使ってみた。[/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で懐かしのピタゴラスの定理を使ってみた

水曜日, 5月 12th, 2010

昔の数学(算数?)の記憶をたどりつつ、
思い出せずにググりつつで、ピタゴラスの定理(三平方の定理)を使った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;
		}
	}
}

IE6 + https + iframe でハマったら…

火曜日, 5月 11th, 2010

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

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

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

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

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

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

JavaScriptでdisplay:none;にしたい時のメモ

日曜日, 5月 9th, 2010

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にスタイル書いてもいいかもだけど、
管理しやすいってことで別スタイルシートにしたほうがいいかなと。

初めてのXMLパース

火曜日, 4月 6th, 2010

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

iPadについての考察まとめ

火曜日, 4月 6th, 2010

iPadのリーク・発表から発売した現在までに、
自分の中でiPadに対する考えが色々変わった部分が多いのでまとめてみる。

iPadリーク情報入手直後
タッチパネルのノートPCきたー!!
iPhoneのインターフェイスでネットブック以上、ノートPC以下な性能かな?
時代はPCもタッチパネル!!
スペックが気になるね、スペック!
iPad発表時
そういえばマルチタスクこない?
Flashない?
そもそもPCっていう感じじゃないのか。
てことは電話ができないでかいiPhoneかよ
いらね
iPad発売時 ←今ココ
インターネットを気軽に楽しむ。
アプリケーションを気軽に楽しむ。
そういうデバイスなのかな?
「ちょっとググりたい」
「ちょっとネットで買い物したい」
そんな時にノートPCいちいち開くのが億劫な時って確かにある。
最近のノートPCは小さくなって軽くなったけど、なんだかんだ屋内外で自由に持ち歩く感じじゃない。
ましてや片手で持ちながら操作って感じでも無い。
ネットブックは画面小さいし、スペック的に無理してる感が。
キーボード自体小さくて好きになれない。

そこでiPad。
需要のある用途に機能を限定しつつ、その用途に特化したサイズとインターフェイスは
「ちょっとググりたい」
「ちょっとネットで買い物したい」
にすごくピッタリで
デバイスとしての魅力以上に、
そのデバイスがある生活に魅力を感じることができる。
それってものすごくベーシックなことでもあり、
すごく難しい部分でもあるんだけど、
Appleは今回もそれをやってのけた。
iPodの時みたいに。

さすがApple!

というわけで今僕はとってもiPadが欲しいのです。

2010年 エイプリルフール個人的まとめ

木曜日, 4月 1st, 2010

今日はエイプリルフール!
ということで個人的に秀逸だと思ったサイトを挙げておきます。
※当然2010/4/1限定サイトが多いと思うので、あしからず

円谷ッター(ツブッター)
カネゴンの78ちゃんねるまとめブログZ
円谷プロはさすがのクオリティ。
カネゴンのまとめブログの芸の細かさに脱帽
シックス・アパート
90年代を彷彿とさせる!!
marquee・blink風な挙動(ソースは今っぽくjQueryで制御というクオリティ)
HTMLのソースも必見。コメントもなんかキテる。
さくらのレンタルサーバ
「とある科学の超電磁砲」とコラボみたい。
なんか、胸が熱くなるな。。
ギズモード・ジャパン
左右反転。すげ。
XNEWS-日本最大のXbox&婚活情報サイト-
氏名:初代Xbox 年収:いまはなし
自虐か・・・?
Get Adobe Flash playerPlugin by wpburn.com wordpress themes