TECH Matari

年明けから本気だす為に、WEB制作に便利なチートシート(Cheat Sheet)のまとめです。主に日本語版かつPDFで入手できるものを集めました。日本語版が見つからないものは、非日本語版も掲載しています。

1.CSSのチートシート

from CSS Cheat Sheet 日本語版 | textdrop

2.正規表現のチートシート

from 正規表現 Cheat Sheet 日本語版 | textdrop

3.PHPのチートシート

from PHP Cheat Sheet 日本語版 | textdrop

4.MySQのチートシート

from 漢(オトコ)のコンピュータ道: MySQL Cheat Sheet 1.0

5.SEOのチートシート

from SEO基本技術のチートシート（トラの巻）を作ってみた | Web担当者Forum

6.WordPressのチートシート

from WordPress Help Sheet 日本語版 | textdrop
※その他WordPressの開発用のさまざまなチートシート→WordPressチートシートいろいろ・SEOとかテンプレートタグとか – かちびと.net

7.mod_rewriteのチートシート

from mod_rewrite Cheat Sheet 日本語版 | textdrop

8.Subversionのチートシート

from Subversion Cheat Sheet 日本語版 | textdrop

9.Gifのチートシート

from Git Cheat Sheet 日本語版 | textdrop

以下、英語版です。

10.HTML5のチートシート

from HTML 5 Cheat Sheet (PDF) – Smashing Magazine

11.jQueryのチートシート

from jQuery Cheat Sheet
jQueryは日本語版のチートシートが無かったけど、いずれ誰か作るだろう。とりあえず jQuery 1.3.2 日本語リファレンスがあれば充分。

12.htaccessのチートシート

from the jackol’s den » htaccess Cheatsheet
※htacdessのチートシートの日本語版はどっかにあった気がするんだけどな～

13.PHPの各種演算結果のチートシート

from BlueShoes: PHP Cheat Sheet

14.実体参照文字のチートシート

from XHTML Character Entity Reference

15.adobe Flash CS4 キーボードショートカットのチートシート

from

16.Unix/Linuxのコマンドのチートシート

from Unix/Linuxコマンドリファレンス – よたらぼ 保管庫

17.ActionScript/Tweenerのトランジションのチートシート

from 超訳：Tweenerドキュメント＆言語リファレンス

18.ActionScript/Flexのクラス・API相関図ポスター

from Ted On Flash: Cube Wallpaper – AS3 and Flex API Posters

こうやってみると、textdrop – http://www.textdrop.net/さんによる日本語化されたものがおおいですね。ありがたいです。

僕もなにか作ってみようかな。

Popularity: 12% [?]

written by ANN

時間の処理には、trick7さんのTeraClockを使わせてもらいました。

キモは、

(TextArea).verticalScrollPosition = (TextArea).maxVerticalScrollPosition

だけです。

デバッグ用に、TextAreaに変数とかを表示させたいときに、スクロールバーが付いてこないと非常に見づらいので、上の１行を追加すると便利です。

[as]
package
{
	import fl.controls.Button;
	import fl.controls.TextArea;
	import flash.display.MovieClip;
	import flash.events.*;

	import com.trick7.utils.TeraClock;
	/**
	 * ...
	 * @author IRONHEARTS
	 */
	public class Main extends MovieClip
	{
		private var _ta1:TextArea;
		private var _ta2:TextArea;
		private var _reset:Button;
		private var _tc:TeraClock;

		public function Main():void
		{
			addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);

			_ta1 = TextArea(getChildByName("ta1"));
			_ta2 = TextArea(getChildByName("ta2"));
			_reset = Button(getChildByName("reset"));

			_reset.addEventListener(MouseEvent.CLICK, resetHandler);

			_tc = new TeraClock;

			_tc.addEventListener(TeraClock.SECONDS_CHANGED, secListener);

		}
		private function resetHandler(e:MouseEvent):void
		{
			_ta1.text = _ta2.text = "";
		}
		private function secListener(e:Event):void
		{
			var s:String = _tc.hours2 + ":" + _tc.minutes2 + ":" + _tc.seconds;

			_ta1.text += s + "\n";
			_ta2.text += s + "\n";

			_ta2.verticalScrollPosition = _ta2.maxVerticalScrollPosition;
		}
	}
}
[/as]

ソース必要な人はドウゾつtascroll.fla,Main.as

Popularity: 9% [?]

written by ANN

一つ前のエントリーの続きで、Flashでテキストエディタを作成中。編集したテキストおよびTextFormatをXML形式に変換して、サーバにPOSTし、保存する処理を作成中に、上記のエラーが発生。

Flash側からPHPへのPOSTについては、

AS3とPHPの連携 – 基礎 – memo.at sonic

を参考にさせてもらう。たしかに、load()でPOSTするというのには違和感を感じるが、これしかないのでしょうがない。（Socketベースで通信する場合はセキュリティポリシーファイル／サーバが必要でさらに面倒）

[as]
// テキストフィールドのフォーマットをXMLに落とし込む
 var txtxml:TextField2XML = new TextField2XML(_targetText);
 var v:URLVariables = new URLVariables();
 v.body = txtxml.getXML();
 var req:URLRequest = new URLRequest("ポスト先のURL");
 req.data = v;
 req.method = URLRequestMethod.POST;
 var loader:URLLoader = new URLLoader(req);
 loader.dataFormat = URLLoaderDataFormat.VARIABLES;
 loader.load(req);
[/as]

PHP側は、$_POSTで受信したデータをDBに保存する処理を記述。

$data = $_POST["body"];
// ～DBに書き出す処理・省略～
exit;

で、FlashIDE上でプレビューしてみると、

Error: Error #2101: URLVariables.decode() に渡される文字列は、名前/値のペアを含む、URL エンコーディングされたクエリー文字列でなければなりません。

という、エラーが発生。おかしいなぁ。ちゃんとURLVariablesで値を渡していて、URLエンコーディングされたクエリー文字列が生成されてるんだけどナーと思い、悩むこと30分。

やっと分かった。

呼び出し時にエラーになってるんじゃなく、呼び出した後にエラーになっている。つまり、

[as]
loader.load(req);
[/as]

で、呼び出すURLからのレスポンスが、key=value形式になってないとエラーになるのである。

しかし、POSTしても別にレスポンスを見ないケースもあるだろうにﾈｰ。

しょうがないので、php側でexitする前に echo “ret=true”;とダミーのレスポンスを返すことにする。コレでエラーは無くなった。

TextField2XMLのソースは、まだ調整中なので公開できないけど、XMLの読み書きが完了したら、サンプルとして公開する予定。

それにしても、as3になってから、URLへのGET,POSTや、FlashVarsへのアクセスが煩雑になって面倒この上ない。だれかas2互換のラッパー関数とか作ってないかな。ついでにJavaScript互換関数とかPHP互換関数とかあると嬉しいな。

知っていたら教えてください。

Popularity: 15% [?]

written by ANN

JavaScriptベースのエディタは沢山あるが、最終的に編集した結果を画像として出力したいので、Flashで作ってみることにした。最終的に目指すのは、

●編集結果を画像(jpeg)として保存できるようにする。
●編集内容もMySQLに保存しておき、再編集できるようにする。

とりあえずは編集できるTextFieldと、フォント・サイズ・色の選択を作ってみた。

>>>>>続きを読む

Popularity: 6% [?]

written by ANN

先日、とあるサイト内のFlashのデモを作成する。手元のマシン・ブラウザでは問題ないが、先方のPCだと、Flash部分が空白もしくは、１回だけ表示されるというような不安定な動作に。

ムービーとしては,A1.swf,A2.swfとファイルが２つあり、メインのswfが、その２つを交互に読み込んで再生。片方の再生が終わったら、もう片方を再生・・・と、特に難しいところも無いはず。

作成する時間が無かったので、loadMovieでswfを読み込んで、rootのonEnterFrameで再生フレームをチェックするという方法をとっていた。
手元では問題なかったので、そのままアップしたが、、なぜか先方では表示されないとの連絡あり。

Playerのバージョンの問題かと思ったがそうでもない。凝ったことはしてない故、原因が分からなくてしばしハマる。

nabeさんとSkypeで相談しながら、MovieClipLoaderに置き換えてみる。AS2.0はリスナーとスコープがAS3に比べてややこしいので、ﾏﾝﾄﾞｸｾ（´A`）手を抜いたのがトラブルの元だった。

MovieClipLoaderに修正したものは、先方のPCでもちゃんと表示された。
詳しく聞いてみると、以前のものでは、Flash部分が空白で、CPU負荷・メモリ消費も上がり、どうも暴走してるような感じだった・・・と。

詳しく検証してないけれど、この現象から想像するに、loadMovie後のフレームのチェックが、ロードが終わらないうちにやってしまい、正常に判断できず、（ロジック的に）次々のloadMovieされてしまい、無限にロードされてしまったような動きになったんじゃないかと思われる。

A1.swfもA2.swfもファイルサイズが小さかったので、ロードは一瞬で終わるだろうと高をくくっていたのがマズかった。
ロードが終わってないうちに次のロード、そのまた次のロードと、延々繰り返していたようだ。

ソースコードは恥ずかしすぎるので非公開です（///

教訓。

　忙しくても（手を抜いて）loadMoiveは使ったりしない。
　ちゃんとMovieClipLoaderを使おう！

Popularity: 13% [?]

written by ANN

くぅー！まんまとハマってしまった…。

FlashPlayerのバージョンは8以降を対象にしようと思って、AS2.0でSWFを作成していた。その際、パブリッシュの設定でFlashPlayerのバージョンを8にするのを忘れて、9のままで作成していた。

作ってプレビューした時には問題なかった。その後、Playerのバージョンを確認したら9になっていたので8に設定してパブリッシュしたら、今まで削除されていたMCが削除されない！Playerのバージョンを変更した際には他にもいくつか変更していたので、原因の究明にとまどった。後でPlayerを9にするとちゃんと削除されるなーと思いながら、8でも削除されるように修正しなくちゃならないので、いろいろ調べたところ…

[FLASH CS3のヘルプ]より

むむむ！attachMovie()するときにgetNextHighestDepth()使ってますよ。んで、削除しようとしているMCの深度を調べると見事に1048676。バージョン2のコンポーネント…、ああ、はじめ使ってました、今は使ってないけど…。何だよー、Buttonコンポーネントがライブラリにあるだけで、こんなことになるのかよー。

Buttonコンポーネントをライブラリから削除するとまったく問題なく削除された。こんな罠作るなよー…。

他の対処方法としては、getNextHighestDepth()を使っていて、且つバージョン2のコンポーネントがライブラリにある場合は削除対象のMCをswapDepths()を使って、-16383～1048675内の深度に再設定してremoveMovieClip()するか、removeMovieClip()を使わずにunloadMovie()を使う。

FlashPlayer9だと深度が1048676でも削除されていたのは、9の場合は有効な深度が広がっているってことかなー？

Popularity: 12% [?]

written by joy-pop

ごぞんじ、ROXIK氏の作品。
THE ECO ZOO | ECODA!DOBUTSUEN

もうね。アホかと。すごいとか、すごくないとか、そんなレベルじゃない。質感とか細かい動きとか
作り込みがもう無慈悲としかいいようがない。（モデリングも自分でやってるんだろうか）

ROXIK temporaries.
Adobe MAX イベント時に発表したものらしい。

こんなの見せられたら、もうね、Papervision3Dとか、やる気がおこらない。

しかし、まだ違うアプローチで突破点があるに違いない！！！がんばろう！

Popularity: 6% [?]

written by ANN

[ActionScript3.0] Sprite/MovieClipとかをランダムに動かす(徘徊させる) | moriBlogさんの動きを使わせてもらって、ちょっと作ってみた。

※クリックしてください。

虫っぽいのが動いたあとに、軌跡を付けたかったんだけど、ビットマップとかマスクとかがいまいちわかってなくて挫折。
その辺が完成したらソース載せます。

Popularity: 11% [?]

written by ANN

一つ前の

Yahoo ASTRA LayoutContainersを使ってフォント一覧パネルを作るに、フォントサイズを変更するためのスライダーを付け、ソース内の不要なコードを消した物を作りました。

直リンはこちら。font_pane2.swf

ドキュメントクラス(fontPane.as)と、ヘッダ部分(fontHeader.as)と、フォント一覧(fontMenu.as)と、プレビュー部分(fontRightArea.as)にて構成されているけれど、ポイントはBorderPaneを継承したドキュメントクラスなので、その部分のソースのみ掲載。（全ソースはページ最下部にてダウンロードできます）

>>>>>続きを読む

Popularity: 14% [?]

written by ANN

Yahoo! Developer Network – Flash Developer Center – ASTRA Flash Componentsのコンポーネントって、結構便利と思うんだけれど、本家のドキュメント以外にほとんどドキュメントがない。

みんな自分でがりがり書いてるんだろうか。それともFlexだとちょちょいのポンなんだろうか。
素のFlashは、いわゆるGUIのコンテナとしての機能が低すぎると思う。

ということで、YahooのLayoutContainersを使ってなにかできないかーと考えていて、とりあえずフォント一覧を作ってみた。

フォント一覧であれば、別にYahoo LayoutContainersを使わなくても割と簡単にできるけど、Yahoo LayoutContainersを使う利点としては、

●レイアウトの変更を柔軟にできる。定番なものであれば、座標していせずとも、だいたいレイアウトできる。
●ステージの拡大縮小への対応が簡単。
●HTMLでいうところのDIVみたいな間隔で、まさにコンテナとして使える
●その他いろいろあると思うけど、また勉強中。

で、まだかなり完成度低いけど、できたのがこちら。

swf単体で開くと、リサイズにも対応してるのが分かると思います。
font_pane.swf

今回使ったのは、
・BorderPane
・HBoxPane
・VBoxPane
の３つ。

あと、フォントサイズの変更機能と、クラスのコードを整理したらソースアップしようと思う。
というか、Yahoo のコンポーネント使ってる人いないのかなぁ～

[ 追記 ]
スライダーでフォントサイズを変更できるもの＋ソースを追加しました。

Yahoo LayoutContainersでフォント一覧・改良＆ソース

Popularity: 14% [?]

written by ANN