takanix.com｜エクスプロード社長ブログ

【Flash】FlashをHTMLに変換ツール

2011年10月22日 6:58 PM

iPhoneやiPadでは、Flashが使えないし、アニメーションはAjaxを使って作るという風に考えなければならない。

いくつか変換ツールが出てきたのでメモ。

「Adobe Wallaby」
Adobe純正のツール。インストールして使う。
Flaファイルのみで、ActionScriptはサポートされないが、アニメーションならこれで十分。Mac版とWin版がある。

「 Adobe Edge」
HTMLベースでアニメーションを作成するアプリケーション。
Mac版とWin版がある。

「SWF Animation Converter」
SWFファイルをアニメーションとして書き出す。
Airソフト。

「Google Swiffy」
Google提供の変換サービス。サイトにアクセスして変換する。
いろいろと制限がある。
変換したものは、Androidでは表示出来ない。

カテゴリー：HTML, Tips ：コメント（0）

【HTML】正規表現

2011年8月1日 9:22 PM

文字列処理で、フォームから送られた文字列などから特定の文字列を抽出したり、ある特定のパターンにマッチする文字列を処理する式。

プロパティ

match( /正規表現/ ) ()内で指定した式にマッチするかを判断する。マッチの時はtrue。その他はfalse
replace(/正規表現/, 置換文字) 第一引数でマッチした文字列を第二引数(置換文字)で置き換える。
search(/正規表現/) マッチしたらマッチ箇所を番号で返す。マッチしなかった場合は、-1が返る

バックスラッシュ【\】

【.】【-】【/】【¥】【+】【*】【$】など正規表現内で使用される記号を文字列として使用したい場合は、記号の前に【\】を付けます。これを【エスケープする】と呼びます。

【例題】Javascriptです。

match(/0123/) 　　【0123】にマッチ。012、123にはマッチしない。

match(/[0123]/) 　【[]】内の文字のどれかにマッチ。

match(/[0123]+/) 　【+】は、1文字以上にマッチ。

match(/[0123]\.[0123]+/) 　【.】はバックスラッシュでエスケープ

match(/[^0123]\.[0123]+/) 　【[^]】は【[]】内以外にマッチ。

match(/^[0123]\.[0123]+/) 　【^[]】は文字の最初にマッチ。

match(/^[0123]+@[0123]+\.(com|co.jp)$/) 　【com】【co.jp】のどちらかの場合は【()】で囲み【|】で分ける。【$】は文字の最後にマッチ。

match(/[あいうえお]/) あいうえおのどれかにマッチ。

【例題】PHPです。

if (!eregi(“^[a-z0-9]([a-z0-9]|\-|\_|\.)+@[a-z0-9]([a-z0-9]|\-)+[a-z0-9]([a-z0-9]|\-|\.)+[a-z]{1,4}$”, $mail )){ print “エラー”; }

^[a-z0-9]([a-z0-9]|\-|\_|\.)+　→　一文字目がa〜zか0〜9のいずれか一文字。その後に続くのは、a〜zか0〜9か-_.のいずれか何文字でも可。
@[a-z0-9]([a-z0-9]|\-)+　→　@の文字のあとa〜zか0〜9のいずれか一文字が続き、その後に続くのは、a〜zか0〜9か-のいずれか何文字でも可。
[a-z]{1,4}$　→　最後尾の文字から数えて1文字〜4文字は、a〜zのいずれか。
eregiは、上記ですと$mail変数に、正規表現による文字列を検索する関数です。文字が見つかったらTRUE、なければFALSEが返り値となって返ってきます。
!が付いているのは、反対の動作で、【文字が含まれなかったら】という意味です。
例題では、指定の変数に正規表現の文字列が含まれていなかったら、エラーですと表示させるスクリプトです。

カテゴリー：HTML, Tips ：コメント（2）

【HTML】文字参照一覧・文字実体参照／数値文字参照

2011年8月1日 8:59 PM

文字参照一覧

HTML／XHTMLの特殊記号がそのまま表示されるように記述したり、キーボードで直接入力できない文字を記述するための方法を文字参照という。

文字参照は2種類の方式があります。たとえば「<」は文字実体参照では「<」、数値文字参照では「<」と記述する。

■文字実体参照（character entity references）

■数値文字参照（numerical character references）

なお、XHTML 1.0ではアポストロフィ（文字実体参照「'」、数値文字参照「'」）が新たに文字参照に加えられた以外はHTML 4.01と同じ。ただし、文字実体参照「'」は正しく表示されない場合が多いので、数値文字参照「'」と記述よい。

Latin 1 Characters (ISO 8859-1)

文字実体参照		数値文字参照		説明
				改行禁止スペース
¡	¡	¡	¡	反転させた感嘆符
¢	¢	¢	¢	セント
£	£	£	£	ポンド
¤	¤	¤	¤	通貨
¥	¥	¥	¥	円
¦	¦	¦	¦	縦破線
§	§	§	§	セクション
¨	¨	¨	¨	ウムラウト
©	©	©	©	著作権
ª	ª	ª	ª	女性序数
«	«	«	«	二重山括弧（開始）
¬	¬	¬	¬	ノット、角ダッシュ
				ソフトハイフン
®	®	®	®	登録商標
¯	¯	¯	¯	長音記号
°	°	°	°	度
±	±	±	±	プラスマイナス
²	²	²	²	2乗（2の上付き文字）
³	³	³	³	3乗（3の上付き文字）
´	´	´	´	鋭（揚音）アクセント
µ	µ	µ	µ	マイクロ
¶	¶	¶	¶	パラグラフ
·	·	·	·	中黒
¸	¸	¸	¸	セディーユ
¹	¹	¹	¹	1乗（1の上付き文字）
º	º	º	º	男性序数
»	»	»	»	二重山括弧（終了）
¼	¼	¼	¼	4分の1
½	½	½	½	2分の1
¾	¾	¾	¾	4分の3
¿	¿	¿	¿	反転させた疑問符
À	À	À	À	低（抑音）アクセントつきA
Á	Á	Á	Á	鋭（揚音）アクセントつきA
Â	Â	Â	Â	曲折アクセントつきA
Ã	Ã	Ã	Ã	チルダつきA
Ä	Ä	Ä	Ä	ウムラウトつきA
Å	Å	Å	Å	リングつきA
Æ	Æ	Æ	Æ	連字のAE
Ç	Ç	Ç	Ç	セディーユつきC
È	È	È	È	低（抑音）アクセントつきE
É	É	É	É	鋭（抑音）アクセントつきE
Ê	Ê	Ê	Ê	曲折アクセントつきE
Ë	Ë	Ë	Ë	ウムラウトつきE
Ì	Ì	Ì	Ì	低（抑音）アクセントつきI
Í	Í	Í	Í	鋭（揚音）アクセントつきI
Î	Î	Î	Î	曲折アクセントつきI
Ï	Ï	Ï	Ï	ウムラウトつきI
Ð	Ð	Ð	Ð	古英語のエズ（ETH）
Ñ	Ñ	Ñ	Ñ	チルダつきN
Ò	Ò	Ò	Ò	低（抑音）アクセントつきO
Ó	Ó	Ó	Ó	鋭（揚音）アクセントつきO
Ô	Ô	Ô	Ô	曲折アクセントつきO
Õ	Õ	Õ	Õ	チルダつきO
Ö	Ö	Ö	Ö	ウムラウトつきO
×	×	×	×	乗法、かけ算
Ø	Ø	Ø	Ø	スラッシュつきO
Ù	Ù	Ù	Ù	低（抑音）アクセントつきU
Ú	Ú	Ú	Ú	鋭（揚音）アクセントつきU
Û	Û	Û	Û	曲折アクセントつきU
Ü	Ü	Ü	Ü	ウムラウトつきU
Ý	Ý	Ý	Ý	鋭（揚音）アクセントつきY
Þ	Þ	Þ	Þ	古英語のソーン（THORN）
ß	ß	ß	ß	連字のsz（ドイツ語など）
à	à	à	à	低（抑音）アクセントつきa
á	á	á	á	鋭（揚音）アクセントつきa
â	â	â	â	曲折アクセントつきa
ã	ã	ã	ã	チルダつきa
ä	ä	ä	ä	ウムラウトつきa
å	å	å	å	リングつきa
æ	æ	æ	æ	連字のae
ç	ç	ç	ç	セディーユつきc
è	è	è	è	低（抑音）アクセントつきe
é	é	é	é	鋭（揚音）アクセントつきe
ê	ê	ê	ê	曲折アクセントつきe
ë	ë	ë	ë	ウムラウトつきe
ì	ì	ì	ì	低（抑音）アクセントつきi
í	í	í	í	鋭（揚音）アクセントつきi
î	î	î	î	曲折アクセントつきi
ï	ï	ï	ï	ウムラウトつきi
ð	ð	ð	ð	古英語のエズ（eth）
ñ	ñ	ñ	ñ	チルダつきn
ò	ò	ò	ò	低（抑音）アクセントつきo
ó	ó	ó	ó	鋭（揚音）アクセントつきo
ô	ô	ô	ô	曲折アクセントつきo
õ	õ	õ	õ	チルダつきo
ö	ö	ö	ö	ウムラウトつきo
÷	÷	÷	÷	除法、割り算
ø	ø	ø	ø	チルダつきo
ù	ù	ù	ù	低（抑音）アクセントつきu
ú	ú	ú	ú	鋭（揚音）アクセントつきu
û	û	û	û	曲折アクセントつきu
ü	ü	ü	ü	ウムラウトつきu
ý	ý	ý	ý	鋭（揚音）アクセントつきy
þ	þ	þ	þ	古英語のソーン（thorn）
ÿ	ÿ	ÿ	ÿ	ウムラウトつきy

Special Characters

文字実体参照		数値文字参照		説明
“	"	“	"	二重引用符
&	&	&	&	アンド（アンパサンド）
<	<	<	<	小なり
>	>	>	>	大なり
‘	'	‘	'	アポストロフィ
Œ	&OElig;	Œ	Œ	連字のOE
œ	&oelig;	œ	œ	連字のoe
Š	&Scaron;	Š	Š	キャロンつきS
š	&scaron;	š	š	キャロンつきs
Ÿ	&Yuml;	Ÿ	Ÿ	ウムラウトつきY
ˆ	&circ;	ˆ	ˆ	曲折アクセント
˜	&tilde;	˜	˜	チルダ
	&ensp;			n文字幅スペース
	&emsp;			m文字幅スペース
				細いスペース
‌	&zwnj;	‌	‌	ゼロ幅ノンジョイナー
‍	&zwj;	‍	‍	ゼロ幅ジョイナー
‎	&lrm;	‎	‎	左から右マーク
‏	&rlm;	‏	‏	右から左マーク
–	–	–	–	n文字幅ダッシュ
—	—	—	—	m文字幅ダッシュ
‘	‘	‘	‘	引用符（開始）
’	’	’	’	引用符（終了）
‚	&sbquo;	‚	‚	下付き引用符
“	“	“	“	二重引用符（開始）
”	”	”	”	二重引用符（終了）
„	&bdquo;	„	„	下付き二重引用符
†	&dagger;	†	†	参照符
‡	&Dagger;	‡	‡	二重参照符
‰	&permil;	‰	‰	千分率（パーミレージ）
‹	&lsaquo;	‹	‹	山括弧（開始）
›	&rsaquo;	›	›	山括弧（終了）
€	€	€	€	ユーロ

Symbols

文字実体参照		数値文字参照		説明
Α	Α	Α	Α	アルファ
Β	Β	Β	Β	ベータ
Γ	Γ	Γ	Γ	ガンマ
Δ	Δ	Δ	Δ	デルタ
Ε	Ε	Ε	Ε	イプシロン
Ζ	Ζ	Ζ	Ζ	ゼータ
Η	Η	Η	Η	イータ
Θ	Θ	Θ	Θ	シータ
Ι	Ι	Ι	Ι	イオタ
Κ	Κ	Κ	Κ	カッパ
Λ	Λ	Λ	Λ	ラムダ
Μ	Μ	Μ	Μ	ミュー
Ν	Ν	Ν	Ν	ニュー
Ξ	Ξ	Ξ	Ξ	クシー（クサイ）
Ο	Ο	Ο	Ο	オミクロン
Π	Π	Π	Π	パイ
Ρ	Ρ	Ρ	Ρ	ロー
Σ	Σ	Σ	Σ	シグマ
Τ	Τ	Τ	Τ	タウ
Υ	Υ	Υ	Υ	ユプシロン
Φ	Φ	Φ	Φ	ファイ
Χ	Χ	Χ	Χ	キー（カイ）
Ψ	Ψ	Ψ	Ψ	プシー（プサイ）
Ω	Ω	Ω	Ω	オメガ
α	α	α	α	アルファ
β	β	β	β	ベータ
γ	γ	γ	γ	ガンマ
δ	δ	δ	δ	デルタ
ε	ε	ε	ε	イプシロン
ζ	ζ	ζ	ζ	ゼータ
η	η	η	η	イータ
θ	θ	θ	θ	シータ
ι	ι	ι	ι	イオタ
κ	κ	κ	κ	カッパ
λ	λ	λ	λ	ラムダ
μ	μ	μ	μ	ミュー
ν	ν	ν	ν	ニュー
ξ	ξ	ξ	ξ	クシー（クサイ）
ο	ο	ο	ο	オミクロン
π	π	π	π	パイ
ρ	ρ	ρ	ρ	ロー
ς	&sigmaf;	ς	ς	ファイナルシグマ
σ	σ	σ	σ	シグマ
τ	τ	τ	τ	タウ
υ	υ	υ	υ	ユプシロン
φ	φ	φ	φ	ファイ
χ	χ	χ	χ	キー（カイ）
ψ	ψ	ψ	ψ	プシー（プサイ）
ω	ω	ω	ω	オメガ
ϑ	&thetasym;	ϑ	ϑ	シータシンボル
ϒ	&upsih;	ϒ	ϒ	フックつきユプシロン
ϖ	ϖ	ϖ	ϖ	パイシンボル
•	•	•	•	ブリット（中黒）
…	…	…	…	三点リーダー
′	′	′	′	プライム符号（分またはフィート）
″	″	″	″	二重プライム符号（秒またはインチ）
‾	&oline;	‾	‾	オーバーライン（オーバースコア）
⁄	&frasl;	⁄	⁄	分数のスラッシュ
℘	&weierp;	℘	℘	手書き風のP
ℑ	&image;	ℑ	ℑ	手書き風のI（虚数のI）
ℜ	&real;	ℜ	ℜ	手書き風のR（実数のR）
™	™	™	™	商標
ℵ	&alefsym;	ℵ	ℵ	アーレフ（第一超限基数）
←	←	←	←	左矢印
↑	↑	↑	↑	上矢印
→	→	→	→	右矢印
↓	↓	↓	↓	下矢印
↔	↔	↔	↔	左右矢印
↵	&crarr;	↵	↵	改行キー（キャリッジリターン）
⇐	⇐	⇐	⇐	二重左矢印
⇑	&uArr;	⇑	⇑	二重上矢印
⇒	⇒	⇒	⇒	二重右矢印
⇓	&dArr;	⇓	⇓	二重下矢印
⇔	⇔	⇔	⇔	二重左右矢印
∀	∀	∀	∀	すべての（数学記号）
∂	∂	∂	∂	偏微分（数学記号）
∃	∃	∃	∃	存在する（数学記号）
∅	∅	∅	∅	空集合（数学記号）
∇	∇	∇	∇	ナブラ（数学記号）
∈	∈	∈	∈	要素として含まれる（数学記号）
∉	∉	∉	∉	要素として含まれない（数学記号）
∋	&ni;	∋	∋	元として含む（数学記号）
∏	∏	∏	∏	nの積（数学記号）
∑	∑	∑	∑	nの総和（数学記号）
−	−	−	−	マイナス（数学記号）
∗	&lowast;	∗	∗	アスタリスク（数学記号）
√	√	√	√	平方根（数学記号）
∝	&prop;	∝	∝	比例（数学記号）
∞	∞	∞	∞	無限（数学記号）
∠	&ang;	∠	∠	角度（数学記号）
∧	&and;	∧	∧	かつ（数学記号）
∨	&or;	∨	∨	または（数学記号）
∩	∩	∩	∩	積集合（数学記号）
∪	∪	∪	∪	和集合（数学記号）
∫	∫	∫	∫	積分（数学記号）
∴	&there4;	∴	∴	ゆえに（数学記号）
∼	&sim;	∼	∼	チルダ（数学記号）
≅	&cong;	≅	≅	およそ等しい（数学記号）
≈	≈	≈	≈	ほぼ等しい（数学記号）
≠	≠	≠	≠	等しくない（数学記号）
≡	&equiv;	≡	≡	合同（数学記号）
≤	&le	≤	≤	小なりイコール（数学記号）
≥	≥	≥	≥	大なりイコール（数学記号）
⊂	⊂	⊂	⊂	部分集合（含まれる）（数学記号）
⊃	⊃	⊃	⊃	部分集合（含む）（数学記号）
⊄	&nsub;	⊄	⊄	部分集合（含まれない）（数学記号）
⊆	&sube;	⊆	⊆	部分集合（含まれるか等しい）（数学記号）
⊇	&supe;	⊇	⊇	部分集合（含むか等しい）（数学記号）
⊕	&oplus;	⊕	⊕	丸つき加算記号
⊗	&otimes;	⊗	⊗	丸つき乗算記号（ベクトル積）
⊥	&perp;	⊥	⊥	垂直（数学記号）
⋅	⋅	⋅	⋅	ドット
⌈	&lceil;	⌈	⌈	左シーリング
⌉	&rceil;	⌉	⌉	右シーリング
⌊	&lfloor;	⌊	⌊	左フロアー
⌋	&rfloor;	⌋	⌋	右フロアー
〈	&lang;	〈	〈	左アングル
〉	&rang;	〉	〉	右アングル
◊	&loz;	◊	◊	ひし形
♠	&spades;	♠	♠	スペード
♣	&clubs;	♣	♣	クラブ
♥	&hearts;	♥	♥	ハート
♦	&diams;	♦	♦	ダイアモンド

カテゴリー：HTML, Tips ：コメント（0）

【HTML】IME入力モードのCSS

2011年7月10日 3:51 PM

WIN用IE、FireFoxのみの設定となるが

PC向けのフォームでIME入力モードを自動で設定するCSSがある。

Macには関係ないけど、ほとんどがWindowsという状況なので

設定するに越したことはない。

Windowsだけだが、ユーザービリティに良い。

【ime-modeプロパティ】

auto 自動

active IMEオン（日本語入力モード）

inactive IMEオフ（英数字入力モード）

disabled IME使用不可（英数字入力モード）

【CSS例】

input.example1 { ime-mode: auto; }

input.example2 { ime-mode: active; }

input.example3 { ime-mode: disabled; }

textarea.example4 { ime-mode: inactive; }

もしくは

input要素及び、textarea要素のみ。

非推奨属性。

カテゴリー：HTML, Tips ：コメント（0）

【HTML】IEでのフォーム送信でEnterキーが使えない

2011年7月10日 3:36 PM

IEとFireFoxで、フォームの送信をEnterキーで行うと

フォームの内容が送信されずに困っていました。

IEとFireFoxでは、テキストフォームが1個だとEnterキーを押しても送信出来ないとのこと。

その他のブラウザでは、問題ないのに、この挙動は結構悩んでいました。

解決策として、隠しテキストフォームを追加し対応いたしました。

その時のソースが以下の通りです。もし、同じ内容で困っている方がいらっしゃいましたら一度使用してみてください。

style要素で非表示にするのが大切な部分です。

カテゴリー：HTML, Tips ：コメント（0）

【Flash】FlashをHTMLに変換ツール