X_NOTE: 4月 2013

2013年4月22日月曜日

flash(swf)をSVGに変換してくれるツール「Swiffy」開発元：Google

Swiffyの使い方

Google SwiffyのサイトにSWFをアップロードして変換

Google Swiffyサイト左下にあるボタンからHTML5に変換したいSWFをアップロードする
アップロードが完了すると「Swiffy output」と表示され、HTML5に変換されたhtmlのリンクが表示される
変換されたhtmlファイルをリンク先から取得する（リンクは１５分で期限切れになる）

Adobe FLASH CS4以降の拡張機能を使って変換

Google Swiffyサイト右上にあるボタンからExtensionをダウンロードして、インストールする（ダウンロードして、ファイルを実行するとインストールが開始される）
Swiffyで表示させるflaファイルを開く
「コマンド」から「Export as HTML5 (Swiffy)」を選択すると、HTML5のファイルが出力される

<注意点>
iOSではFLASH(swf)が非表示、Android2.x以前ではSwiffy(SVG)が非表示になります。
Canvasアニメーションに関しては、チューニング次第でパフォーマンス改善しそう(少し重い)です。

<画面を拡大した時の比較>
・SVG(Swiffy)

・Canvas

・Flash(swf)

＜参考サイト＞
msto.jp - Google Swiffy 覚書
http://msto.jp/p/6/

2013年4月13日土曜日

サムネイル(グリッド)を並べた時に同じCSSでぴったり収める方法

215pxサムネイルを4つ20pxの間隔で配置したい場合最後のサムネイルにかかったmargin-right:20px;が邪魔になります。そこで最後のマージン20pxを吸収します。

サムネイル4つを収めたい横幅は920px、しかし上記の状態だと940pxの幅必要です。それをサムネイルの親要素の幅を940pxとして20px多くしますがmargin-right:-20px;で20pxを相殺することで。215pxサムネイルを×4個、20pxの間隔で配置したい時に920pxでピッタリ収まります。

#colum{

width:940px;

margin-right:-20px;

_overflow:hidden;

}

.thumbnail{
width:215px;
float:left;
padding-right:20px;
}

2013年4月12日金曜日

スマートフォンサイトを作るための参考サイトまとめ。

（１）「jQuery Mobile」

スマートフォン向けフレームワーク、iOSやAndroidなどのWebKitベースのスマートフォンだけでなく、Windows PhoneやBlackBerryにも対応。

スマートフォンでのページ切り替えアニメーションや基本的な構造、ボタンのアイコンなどが簡単に使えるようにしてくれるライブラリ。

参考サイト
「jQuery」http://jquery.com/

「jQuery Mobile」http://jquerymobile.com/

「jQuery Mobile 日本語リファレンス」http://dev.screw-axis.com/doc/jquery_mobile/

2013年4月10日水曜日

Mail.appの着信を通知するアプリケーション「Growl」の設置

Mail.appの着信を通知するアプリケーションとしてメモするが「Growl」は
アプリケーションからの情報を様々なスタイルで通知するアプリです。

（1）ダウンロード：Growl(download)

（2）ダウンロードしたデータを解凍してインストーラーでインストールする。

（3）インストールだけだと使えないので、Apple Script を手に入れて必要な場所に格納する必要があります。

メール通知用のApple Scriptは過去のGrowlのバージョン（Growl 0.7.6）をダウンロードした
データの中にあります。場所はGrowl(download)のGrowl 0.7.6 - For 10.3 と描かれている所をクリック。

データを解凍してGrowl/Scripts/Email/ Mail Notification.scptを取り出します。

（4）登録アカウント名/ライブラリ/Mail/
の中に取り出した。Mail Notification.scptを入れます。

（5）これで Mail.app を起動して環境設定を開きます。ここの「ルール」を開いて「ルールを追加」をクリックします。