社内HTML5勉強会を行いました社内HTML5勉強会を行いました

先日、社内でHTML5勉強会を行いました。今回は「基礎編~HTML5の基礎とiPhone最適化~」と題して、HTML5でiPhone最適化を行う際の基礎知識とHTML5利用の目的共有を行いました。そこで、今回の勉強会の資料を一部公開します! HTML5といっても、新しく追加されたタグやAPI,CSS3など範囲が広く、その上主要ブラウザでも実装状況が違ったり、仕様の廃止があったりするのが現状です。しかし、スマートフォン(今回はiPhoneのみ)に限定してしまえば、ブラウザを限定することがほぼ可能なので、HTML5の機能を生かした最適化を行うことができます。機能面、操作性ではネイティブアプリに劣りますが、Webアプリであればデバイスに依存することなく開発でき、安価で導入しやすいという利点があります。  【資料の内容】●開発環境の整備●HTML5の基本セット●iPhone向けWebアプリケーションの開発-Viewport-付加機能●HTML5で追加されたタグ-audio-video-canvas-form属性●API-クライアントサイドのストレージ-geolovcation-オフラインアプリケーションキャッシュ●アニメーション  【資料はコチラ】 [file]/2010/12/HTML5_iPhone.pdf[/file]

秀英体100展に写心機 ver.2を出展します秀英体100展に写心機 ver.2を出展します

お正月明けのギンザ・グラフィック・ギャラリーで開催される企画展「秀英体100」にて、ふたたび「株式会社ワンパク」とともにデジタルインスタレーション、「写心機」のver.2を出展致します。 2011/1/21 追記:ビデオを載せました! 2009年11月に行われた、Make:Tokyo Meeting 04で好評を得たver.1「写心機 Prototype」から2年、全く異なる構成で、新たに今回の企画展「秀英体100」にて「写心機 {Font}

FxUG12月勉強会の資料をアップしましたFxUG12月勉強会の資料をアップしました

ご参加頂いた皆様、お疲れ様でした。PureMVCの発表で使用した、資料とサンプルをアップしました。 [airbadge] PureMVC_FxUG, https://www.riaxdnp.jp/wp-content/uploads/2010/12/PureMVC_FxUG.air, v1,https://www.riaxdnp.jp/wp-content/uploads/2010/12/airbadge.png[/airbadge] コチラをインストールしてから、右クリック「ソースの表示」で中身が見れます。 サンプルの解説はコチラ: [file]/2010/12/PureMVC_FxUG解説.pdf[/file]

HTML5を使うべき10の理由HTML5を使うべき10の理由

プラグイン vs HTML5 それぞれの「適材適所」のエントリーの解説編です。続いてHTML5の判断材料です。同じく10項目挙げてみました。また文章ばかりです。 ○スマートフォン向けである(特にiOSも対象) iOSではPlug-inが排除されているのですから、何の余地もありません。またターゲットをAndroid等のスマートフォンに特化できるなら、HTML5が良いかと思います。Flash PlayerはAndroid OS2.2から対応していますが、パフォーマンスを出すには繊細にチューニングした開発が必要です。ただし、注意が必要なのは、HTML5で画面を作ったからといって、PCでもスマートフォンでもOK!という訳にはいきません。タッチやジェスチャに対応した画面作りが必要で、AppleのUIデザインガイドラインに従わないと違和感のある画面となります。

Flash/Silverlightを使うべき10の理由Flash/Silverlightを使うべき10の理由

プラグイン vs HTML5 それぞれの「適材適所」のエントリーの解説編です。FlashやSilverlightの「適材適所」について。文章しかなくてすいません。。。 ○UIコンポーネントを利用する ツリーやデータグリッド(Excelのようなセル)のようなHTML formに無いUIコンポーネントが必要であったり、チャートやマップ等のデータビジュアリゼーションを行ったり…このようなUIコンポーネントが既に用意されています。また、サードベンダーから多くの外部コンポーネントが利用できるのもの強みです。FlexではIBMのILOG、SilverlightであればInfragisticsのNetAdvantage等があり、かなり高機能なコンポーネント群です。これらのUIコンポーネントをJavaScriptでクロスプラットフォームでゼロから開発するのはかなり難しいです。HTML5対応ブラウザが普及していけばHTML5向けのUIコンポーネントも充実していくと思うので、これから期待しています。 ○デバイスI/Oと連携する

Flex4でアイコン付きのカスタムボタンを作るFlex4でアイコン付きのカスタムボタンを作る

みなさん、Flex4(spark)は使ってますか?今回の記事では、よく使うアイコン付きButtonコンポーネントをFlex4で作ってみたいと思います。 Flex3ではiconプロパティに、画像パスをセットしてあげればアイコンが表示できましたが、Flex4のButtonにはiconプロパティがありませんので、カスタムButtonSkinを作成して、アイコンを実装します。 完成図はこんな感じです。表示するLabelも複数行にしました。 ■ButtonSkinクラスの構成カスタムButtonSkinの作成は、新規MXMLスキンでホストコンポーネントを(spark)Buttonにセットして生成できます。すると、デフォルトのButtonSkinクラスがコピーされるので、ここにiconを表示するパーツを追加します。MXMLで編集できるので、デザインビューで確認しながらスキンをカスタマイズできます。追加する前に、デフォルトのButtonSkinの構成をまとめてみます。 1:ホストコンポーネント <!– host component

@IT おばかWindows 7 アプリ選手権レポートが公開されました!@IT おばかWindows 7 アプリ選手権レポートが公開されました!

@IT Windows 7でも「おばかアプリ選手権」は大爆笑でした 7/10、お台場の東京カルチャーカルチャーで「おばかWindows 7アプリ選手権 決勝戦」が開催され、私たちも決勝戦に参戦してきました!その決勝戦イベントのレポート記事が、@ITにて公開されましたのでぜひご覧ください。 投稿した2作品はこちらです↓「おばか Windows 7アプリ選手権」に2作品投稿しました!」

Flash Player でファイルアップロードで気をつけるべきことFlash Player でファイルアップロードで気をつけるべきこと

Flashのサイトで、flash.net.FileReferenceを使ってファイルをアップロードする機能はよく見かけますが、地味だけど致命的になるハマりポイントが幾つかあります。これらの問題は過去にいろんなヒトがぶつかっているのですが、改めて整理してみました。 ■ Flash Playerのファイルアップロードの通信は、ブラウザから通信APIを利用していない アップロードの通信は、Webブラウザからの通信とは違うもの、と考えておく必要があるようです。このため、ieHTTPHeadersやLiveHttpHeadersのようなHTTPヘッダーをキャプチャするツールでヘッダー情報をキャプチャすることができません。 ■ FirefoxやSafariで自己SSL証明書のSSL通信でアップロードに失敗する 自己証明書によるSSL通信下でファイルアップロードを行うと、アップロードに失敗します。IEではセキュリティ例外を一度承認してしまえばアップロードできるのですが、SafariやFirefoxでは意図的にサーバー証明書やルート証明書をOSやブラウザにインストールする必要があります。

すぐに使えるFlexコネタ集すぐに使えるFlexコネタ集

昨日のおしゃれFxug勉強会にお越しいただいたみなさま、ありがとうございました。勉強会での発表より、ドリームページで使ったFlexコネタ集を。 1.scaleプロパティの活用 なんの変哲もないよく見かけるscaleプロパティを使った小技。Scaleを少し変更するだけで、同じインスタンスも素敵に変身します。 【Window領域に合わせた拡大表示】大きなディスプレイを使っている人は、Windowもめいいっぱい広げて使いたいもの。Flexでは表示サイズに合わせた%指定やパディングの指定もできすが、座標計算をして表示しているコンポーネントの場合、Windowサイズが変更されるときにいちいち計算をしなおすのは面倒。そんなときは、今のWindowサイズにおける表示可能領域とそのコンポーネントのサイズを比較して、何%拡大可能か計算します。それをscaleにセットするだけで、簡単にリキッド・レイアウトが実現できます。 【一覧表示】一覧表示や、Mini Map表示ならスケールダウン。scaleを小さく設定するだけでミニチュアコンポーネントが作れます。ミニチュアながらも機能はそのまま!なのがかわいらしい。必要に応じてステータスを変更しいらない機能は無効化しましょう。 scaleを変更するだけでいいので簡単です。インスタンスを使いまわせば経済的ですし、下手な計算なロジックを書いてバグを埋め込む心配もなし! 2.ドラッグプロキシーの活用