HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ

こんにちは。HTMLファイ部の岩淵です。 はじめに 皆さん、jQueryのanimateメソッドを使おうとしたときに、「ちょっとこれはanimateできないなぁ...」と困ったことはありませんか？ 例えば、Google Maps APIの setPosition(new google.maps.LatLng(lat, lng)) みたいな、変数をセットする関数を実行しなければいけないとき。 例えば、CSS3の transform: translate(50px, 20px); のように、transformの値を変化させるとき。 そんなときはjQueryのanimateを使わずにsetIntervalを使ったりして代用するところですが、 終了判定をしてclearIntervalを叩くのは面倒ですし、 animateを使うことによりcompleteで終了時の関数を実行したりイージングを付けられ

KAYAC Front End Engineer チームによるHTML5 iOS Android ActionScript Flash イベント デザイン ニュースのブログ

海賊王をめざす男 マツです。こんにちは。 Flash Builder Burrito で Android アプリを開発しました。 WORDDICT!-ワーディクト - Android マーケット https://market.android.com/details?id=air.Worddict 「WORDDICT!」は、画面に並ぶアルファベットから、英単語を見つけては指でなぞってつないでいく英単語パズルゲームです。 ゲームは、『お菓子を奪いに来る悪役バグバグから、お菓子を守れ！』というストーリーのもとに展開。 英単語をつくらなければ、時間の経過とともに画面上の文字がバグバグのテリトリーに変わっていきます。 ユーザーはアルファベットの配置を入れ替えながら、できるだけ多くの英単語をつくって悪役から自分のテリトリーを守り、高得点を目指すゲームです。 単語の最後のアルファベットを使い、続けて英単

level0のandroidブログ化を企んでいるhidakaです。夏フェス情報がでてきて楽しみな季節ですね。 今日はギャラリーから画像を選んでトリミングをやってみましょう。 まずはギャラリーを呼び出して画像を選択します。 上のコードでギャラリーアプリが起動して画像を選択する状態になるのでどれか選んでみましょう。 Picasaのアカウントの画像なんかもでてきていい感じですよねギャラリー。 Intent intent = new Intent(); intent.setType("image/*"); intent.setAction(Intent.ACTION_PICK); startActivityForResult(intent, REQUEST_PICK_CONTACT); 次に選ばれた画像を受け取ります。 ギャラリー画面の結果をonActivityResultで受け取ります。 後で使

１年ほど前の話になりますが、Google Maps API V3 が正式な JavaScript API になり、 JavaScriptAPIで描画されたGoogleMaps上の任意の要素の色味を調整出来るようになりました。 Google Maps API for Flashの方も色味の調整が可能になっていたので紹介です。 上の画像は、先日制作させていただいた、PUMA SOCIAL(http://social.puma.jp/)というサイトのNEON MAPというコンテンツで、全国のプレイスポット（ビリヤード場とかダーツとか）や、サイトにログインしているユーザーの位置情報をプロットした地図コンテンツです。 GoogleMapsにスタイルを適用することで地図全体の彩度を落とし、 サイト全体のデザイン馴染むようにしています。 細かい説明は、本家のドキュメントを見てもらった方がよいと思うので

みなさん、このLevel0が今月に入ってから半分以上Androidの記事になっていることにお気付きでしょうか。 そう、世の中すっかりAndroid。防水Androidまで発売ですしね。 え、携帯が防水じゃないって何時代の人？ワンセグいるいらないじゃなくてあるの当たり前だからwってな 感じなわけのですよ。自分はまだDesireだから防水じゃないんですが。あぁワンセグもないさ。メモリもね。 そんなわけで毎日Androidアプリ作ったり作らなかったりしていまして、Eclipseでアプリ開発するのって 軽いし(adobeソフトから比べれば)、へんなバグないし（Flashのオートコンプリートでエラー混入する アレは殺意わくね）快適なんですが自動補完、そうオートコンプリート。 これがなぜかものすごく遅い。 これだけはどーしよーもないなーと思ってたんですが解決法を最近入社したkamedaが見つけてきまし

海賊王をめざす男 マツです。こんにちは。 AIR for Android で欠かせないイベントであるタッチイベントについて調べてみました。 タッチ（一瞬で離す） Begin End Tap 一瞬だと Move, RollOver, Over, Out, RollOut が呼ばれません。 タッチ（ゆっくり離す） Begin Move RollOver Over --- Move Move Move --- End Tap Out RollOut タッチして、オブジェクト上を動く間 Move が続きます。 タッチ→ドラッグアウト Begin Move RollOver Over --- Move Move Move --- Out RollOut タッチして、ドラッグアウトするまでオブジェクト上を動く間 Move が続きます。 ドラッグアウトでは、End, Tap が呼ばれません。 ドラッグイ

海賊王をめざす男 マツです。こんにちは。 AIR for Android で mp3 を再生する方法として、以下の２通りを比べてみました。 ・Embed した mp3 を Sound として再生する ・SoundEffect コンポーネントを利用する Embed した mp3 を Sound として再生する import flash.media.Sound; [Embed(source="assets/se/GridTouch.mp3")] public var GridTouch:Class; private var _gridTouchSound:Sound = new GridTouch() as Sound; // mp3 再生 _gridTouchSound.play(); SoundEffect コンポーネントを利用する SoundEffect はまだ spark コンポーネン

実装の機会は非常に稀ですが、複数Flash間のやりとりを可能にするLocalConnectionを使った相互通信を実装してみます。 おさらいまずLocalConnectionについての簡単なおさらいです。 LocalConnectionを使用すると、複数のFlash間で動作のやりとりができます。LocalConnectionには受信側と送信側があり、先に受信側が接続設定しておいたコネクション名を送信側が指定することで、受信側の関数を実行させることができます。以下に例を示します。 まずこれが受信側のスクリプトです。「Connection123」というコネクション名で接続を待機しています。 var _connectReciever:LocalConnection = new LocalConnection(); _connectReciever.client = this; _connectR

海賊王をめざす男 マツです。こんにちは。 AIR for Android で欠かせないイベントであるタッチイベントについて調べてみました。 Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT; fieldGroup.addEventListener(TouchEvent.TOUCH_BEGIN, fieldGroupBegin); private function fieldGroupBegin(event:TouchEvent):void { logTextArea.text += "fieldGroup Begin" + "\n"; fieldGroup.addEventListener(TouchEvent.TOUCH_END, fieldGroupEnd); } private function fieldGroupEnd(

こんにちはtaroです. 最近AS3をあまり書いていないのですが、せっかくなのでAS3ネタを不定期に書いていこうと思いました。 ご存知の通り、for..in, for each..inは使えるケース・使えないケースがあってそんなに扱いのし易い文法ではありません。 例えば、次のようなケース class A { public var var0:String; public var var1:String; } というようなpublicなプロパティをもつクラスのインスタンスについて var a:A = new A; for (var key:String in a) { trace(key); } のように書いてもvar0, var1という風にはtraceされません。もちろんflash.utils.Proxyを使えば他の言語のようにイテレーターのようなものを定義してやることも可能です。 clas

前回から間があいてしまってごめんなさい。今回はいよいよFacebookのOAuth認証をしてみます。 前々回の記事：そろそろFlashからFacebookできるようになっておこうぜ vol.1 設定編 前回の記事：そろそろFlashからFacebookできるようになっておこうぜ vol.2 AS&JS編 前回までのサンプル：こちらからダウンロードできます。 OAuth認証を実行！初期化処理のコールバック関数 initCallBack に続きを書いていきましょう。 前回、成功 / 失敗と分岐していましたが、どちらの場合でも認証を実行します。 private function initCallBack(response:Object, fail:Object = null):void { tf.appendText('initCallBack\n'); if (response) { //初期

海賊王をめざす男 マツです。こんにちは。 Android がいよいよ人々の手に渡るようになってスマートフォン市場はさらに加速してきましたね。 Flex SDK によるモバイル開発の基礎についてまとめてみました。 Flex SDK によるモバイル開発は、Flex 4 から導入された Spark コンポーネントを使用して行います。 Flex 3 までの Halo コンポーネントは使用しないことを除けば、基本的に PC コンテンツ開発と同じです。 モバイル開発に最適化されたポイント ・テーマは、モバイルデバイスの画面サイズとピクセル密度を考慮して新しくデザイン。 ・スキンは、起動時間とメモリ使用量のパフォーマンスを重視して最適化された ActionScript と FXG のみで構成。 ・コンポーネントは、まだ一部の Spark コンポーネントしかスキンとスタイルが提供されていないが、順次提供。

そろそろFlashからFacebookできるようになっておこうぜ vol.2 AS&JS編 [ #facebookjp ] 前回はFacebookにアプリケーションを登録し、URLの設定までやりました。 今回は実際にASとJSを使ってFacebookと通信ができることを確認してみます！ （※2010/12/20 追記） Adobe配布のライブラリが1.0から1.5へバージョンアップしました。 記事の内容も1.5にあわせて修正させていただきました！ AS、JSライブラリをダウンロードFacebook APIのためのライブラリはAdobeより提供されています。こちらのページから、 GraphAPI_Web_1_5.swcをダウンロードしてください。 ※ver 1.5ではFBJSBridge.jsは不要になりました。 Flashを作成さっそくFlashを組みます。swcファイルにパスを通し、co

海賊王をめざす男 マツです。こんにちは。 プロジェクトファイルのテンプレートを生成してくれる AIR アプリで Android 用のモバイルプロジェクトをつくりましょう。 Adobe AIR Launchpad http://labs.adobe.com/downloads/airlaunchpad.html airlaunchpad_p3_102510.air をインストールします。 AIR アプリを起動したら、Mobile を選択します。 Application Name などの設定を行います。 生成するサンプルを選択したら、ジェネレートを完了させます。 指定の場所に zip ファイルが生成されるのでそれを Flash Builder Burrito でインポートすると Android 用のモバイルプロジェクトが確認できます。 ビルドすると選択したサンプルのリストが表示されます。 Ac