検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
クロスドメイン処理におけるSandbox違反回避のまとめ | _level0 - KAYAC Front Engineer Blog
ActionScriptと他ドメインのファイルでデータをやりとりする際によく引っかかってしまうのが *** セキュリティ Sandbox 違反 *** 互換性のないコンテキストにアクセスを試みました。 と表示されてアクセスを拒否されてしまうことです。 ということで、ひっかかってしまう処理として考えられる XMLをロードする ActionScriptからJavaScriptを呼び出す JavaScriptからActionScriptを呼び出す について違反回避方法をまとめてみたいと思います。 XMLをロードする 他ドメインからXMLをロードする際には参照先のドメインのルートディレクトリに crossdomain.xmlというファイルを置いておきます。 crossdomain.xmlには <cross-domain-policy> <allow-access-from domain="参照先ド
Flex モバイルプロジェクトをためそう | _level0 - KAYAC Front Engineer Blog
海賊王をめざす男 マツです。こんにちは。 Flash Builder Burrito Preview と Flex SDK "Hero" をつかって、Flex モバイルプロジェクトをためしてみます。 [ファイル]_[新規]_[Flex モバイルプロジェクト] [プロジェクト名]、[プロジェクトの場所]を指定します。 [モバイル設定]をします。 [サーバー設定]をします。アプリケーションサーバーの種類：なし [ビルドパス]を設定します。メインアプリケーションファイルを変更することもできます。Base.mxml に変更してみます。 コンポーネントパネルをみると現時点で Flex モバイルプロジェクトに使用できるコンポーネントを確認することができます。 正式にリリースされるときにはさらに増えるかもしれません。 サンプル Base.mxml <?xml version="1.0" encoding
爆速 Twitter アプリをつくる | _level0 - KAYAC Front Engineer Blog
海賊王をめざす男 マツです。こんにちは。 梅雨ですよー。 Flash Builder 4 で、Twitter の特定のユーザーのタイムラインを表示するモックをつくります。 1. 新規 Flex プロジェクトをつくります。 2. [データとサービス] ウィンドウから、データとサービスに接続 をクリック。 3. サービスタイプを選択、[HTTP]を選択します。 4. HTTP サービスを設定 名前：user_timeline URL：http://twitter.com/statuses/user_timeline.xml?id=hoge サービス名：Twitter 5. [データとサービス] ウィンドウに追加されます。また、services.twitter パッケージにクラスが追加されます。 6. [デザイン]モードで、DataGrid コンポーネントを配置します。 7. DataGrid
FlasherがHTML5で遊んだらこうなった（Flashにファイルをドロップ！） | _level0 - KAYAC Front Engineer Blog
お久しぶりです。インターンから正社員にジョブチェンジした新卒の堀口です。 ちまたではHTML5が騒がれていますね。 大抵Flashと比較されるのでFlash vs HTML5 みたいな構図が出来上がりつつあるの？？ みんなFlash嫌いなの？ って気持ちになってきますが、そもそもぼくはFlash vs HTML5というのに疑問を感じます。 お互のいい所を引き出せるクリエイターになりたいです！ いい機会なので、HTML5も覚えちゃいたいですね。 ともかくまずはHTML5に触ってみないと何も始まらないので、先週末に少し遊んでみました。 以前プログラマーの先輩に見せていただいたブラウザ上へのファイルのドラッグアンドドロップが衝撃的だったので、 ぜひこれをやりたいの、僕は。 ＊調べたらブラウザ上へのファイルのドラッグアンドドロップはFirefox3.6の対応のみでした。 ということでこんなデモを見
携帯ソーシャルアプリ向けFlash開発から見えてくる、面白いゲームの作り方（1） | _level0 - KAYAC Front Engineer Blog
ご無沙汰しております。鎌倉本社勤務になり実家からの自転車通勤が可能になりましたkijimaです。 最近はもっぱら携帯ソーシャルアプリのゲームの企画・Flash開発をしているので、その辺の話をしようかと思います。 書いているうちに、なぜだか後半マンガの話になってしまいました（笑） 携帯ソーシャルアプリ内でのFlashの扱われ方 最近、mixiアプリやモバゲー、facebookなどのSNS上で遊べる"ソーシャルアプリケーション"が盛り上がっています。 代表的な例といえば「サンシャイン牧場」や、テレビCMでも見かける「怪盗ロワイヤル」などでしょうか。いずれもSNSの機能を活かして他のユーザーや友達と一緒に遊ぶことができます。これがソーシャルアプリの特徴ですね。 オープンプラットフォーム化する前のモバゲーのミニゲームや、ダウンロードして遊ぶFlashゲームを僕は勝手に"単体完結型の携帯Flashゲ
いつものリファレンスをオフラインでらくらく検索！ Doc?を使おう！ | _level0 - KAYAC Front Engineer Blog
FlashCamp楽しかったですか？僕は弊社の新卒説明会で代々木体育館にいましたが、合間にUstで覗き見してました。Ustは偉大です。次回は是非生で見たい！ さて、今回はasdoc形式のリファレンスを簡単にダウンロード、オフライン保存、オフライン検索を可能にしてくれるDoc?のご紹介です。 http://www.airdoc.be/ Doc?はAIRで作られたアプリケーションで、asdocのURLを指定するだけで簡単にダウンロード、分類、閲覧もこなせる高機能リファレンスビューアです。 AIR製なのでWin,Mac両方に対応しています。 きっと誰もがブックマークに入っているであろう、AdobeのLiveDocsやProgression4のリファレンスなんかも簡単に取り込む事ができます。 前回エントリしたAsDocr.airと併用すれば自分ライブラリのリファレンスや、Betweenas3のよう
Flasherの強い味方、ASDocで簡単ドキュメンテーション | _level0 - KAYAC Front Engineer Blog
FITC皆さんご覧になられましたか？FITCビデオを通勤途中に見るのが密かな楽しみになっているMuraiです。 さて今回はFlasherの資料作成の強い味方、Asdocを簡単に作るAIRの紹介です。 Asdocって？ASDocはJavadocを模したActionScriptのドキュメントです。 主にはこのクラスのプロパティとメソッドは〜でというAdobeのリファレンスでおなじみこの形の物になります。 Flex sdkをいれるとasdocというコマンドラインツールがあるので、その子にソースフォルダを指定するとAdobeのリファレンスと同じものが自動出力されるという便利ツールです。 記述方法とても簡単。 書きたいメソッドやプロパティの上に下記の様に書き込みます。 /** * ここに概要とかを書きます。 * @example ソース例のコメント * <listing version="3.0">
MacでFlashやるならコレ! 魅惑の開発環境FDTでつくろう！ | _level0 - KAYAC Front Engineer Blog
メディア芸術祭行かれましたか？ 会場は狭くなっちゃったけど今年も面白い作品目白押しで大満足のMuraiです。 さて、みなさんFDTご存じですか？ 僕も年末にセットアップした初心者ユーザーのひとりですが、色々と手に馴染んできた所で、ざっとまとめを書いてみたいと思います。 ちなみにタイトルはMacガン押しですが、もちろんWindowsでも使えます！ FDTって？ http://www.solutions.powerflasher.com/jp/ FDTはPowerFlasherという会社が作っているActionScript用改造Eclipseです。 AS3/AS2 MXMLを爆速でコーディングすることができます。 QuickFix(自動変数定義、自動import、自動クラス生成、自動プロパティ定義、自動メソッド定義 etc) 至れり尽くせりのコードフォーマットセッティング 賢いコード補完（文章
「Flasherのレベル10」を考えてみた。 | _level0 - KAYAC Front Engineer Blog
level0ブログの親戚でもある（いま勝手に位置づけた）tech.kayac.comですが、最近面白い記事がアップされたようです。その名も、「javascriptプログラマのレベル10」。 なるほどなーと感心したので、Flashでも考えてみました。 あくまで僕個人が感じる10段階のレベルなので、みなさんも10段階に分けてみて、自分がどの位置にいるかを考えてみてはいかがでしょうか？ Flasher レベル0 ・Flashサイトと非Flashサイトの区別がつく。 ・「Flashって動くホームページのことだよね」 Flasher レベル1 ・マウスイベントを設定して、クラシックトゥイーンを用いて素材を動かす程度のアニメーションをするFlashバナーが作れる。 ・そのまま使えそうなサンプルのflaを探し回っている。 ・ビギナーレベルのFlash書籍を読み始める。 Flasher レベル2 ・fun
as3での印刷についてまとめてみた | _level0 - KAYAC Front Engineer Blog
先日、案件でFlashからの印刷を扱うことがあったので、そのとき調べたいろいろをまとめてみました。 基本 as3での印刷にはPrintJobクラスを使用します。 簡単3stepです。 1.printJob.start() → プリントダイアログの表示 2.printJob.addPage(sprite) → 印刷対象の設定 × ページ分 3.printJob.send() → データをプリンタに送信 実際に使うときは var printJob:PrintJob = new PrintJob(); if(printJob.start()) //←印刷ダイアログでOKが押されるとtrue { try { printJob.addPage(pageSprite1); } catch(e:Error){} //←エラーの場合は何もしない printJob.send(); } という感じです。 印刷
Flash HTML設定のまとめ | エントリー | _level0.KAYAC
Flashコンテンツを表示する際のHTMLパラメタってたくさん。。 一覧で将来自分がみたくなるだろうことは必至！！と思って、まとめてみます。 ざっくりですが・・・。
新PCに移行した際に手放せなかったAIRアプリ | _level0 - KAYAC Front Engineer Blog
こんにちは。新PCを勢いだけで購入し、今週ちょっとずつ移行作業を進めてきました安藤です。旧PCで見境なしにインストールしていたAIRアプリを新PCでは使いそうなモノだけ選別して入れたので、いい機会なのでオススメAIRとして公開してみたいと思います。 ・ARToolKit Marker Generator ARToolKitで使用するマーカーのパターンデータを簡単に生成できるアプリです。自作したマーカーをカメラで撮影するだけでパターンデータを生成してくれます。もちろんFLARでも使えます。 ・QRメーカー QRコードを生成・保存できます。画像を重ねたり色を変えたりして少しオシャレなコードを作ることもできます。 ・De Monster Debugger 以前、佐藤の記事でも紹介した強力デバッグツールです。 ・PixelPerfect 定規アプリです。透過されたサイズ可変の定規で、画面上のウィン
7つのステップで完成！FlashDevelopカスタマイズの奥義 | _level0 - KAYAC Front Engineer Blog
こんにちは、FlashDevelopデビューして早数ヶ月のkijimaです。 今回の記事は、悠々自適にFlashDevelopで開発を進める僕を見てMacからWindowsに開発環境を移行しようか真剣に考えている、隣の席の弊社Flasherに捧げます。 それではさっそく、カスタマイズ方法について解説していきます！ 0. まずFlashDevelopをインストール 下記ページの「download」から、最新版のFlashDevelopをダウンロードします（現行の3.0.0 beta9バージョンと想定して進めます） http://www.flashdevelop.org/community/ 1. とりあえず日本語化しましょうか このFlashDevelopというアプリケーションは、設定用XMLファイルの内容を書き換えることでかなり細かい部分までカスタマイズすることが可能です。 その設定用ファ
「ActionScript3.0 デザインパターン」を途中まで読んでみての感想 | _level0 - KAYAC Front Engineer Blog
先月くらいからずっと気になっていた「ActionScript3.0 デザインパターン」という書籍。まだ読み途中なのですが、はじめの5ページくらいをパラパラ読んでみて既に「そう、そうなんですよ川崎さん！」と言いたくなることが度々あったので、記事にまとめてみることにしました。 といっても先に書いたように、まだ読み終えていないのでまた記事にしていくかもしれません。それではどうぞ。 まずデザインパターンってなに？ デザインパターンそのものが何なのかについてですが、こんなふうに説明しているサイトがあります。とてもわかりやすかったので、そのまま引用させてもらいました。 サルでもわかる 逆引きデザインパターン 第1章 はじめてのデザインパターン デザインパターンとは デザインパターンとは簡単に言うと「良い設計の虎の巻」です。 プログラミングや設計をしていると、以前経験したことがある、似たような問題に出く
スクロールバーをつくるときのポイント | _level0 - KAYAC Front Engineer Blog
スクロールバーやスライダーってなかなか使いまわせないし、決定版ができないですよね。 いっこいっこ見た目や機能が微妙に違うし、連動させる対象や表現も違います。 個人的にも何度Scrollbar.asを作ったかわかりませんが、何回か作ることで方向性が見えてきた部分もあります。 実装方法というよりその考えかたの部分を書いてみたいと思います。 見た目を無視する＝数値化する＝抽象化する まず見た目が一番ややこしいので、まず忘れます。 つまりスクロールバーの本質は、コンテンツをスライドさせるものではなくて、0%～100%(0.0-1.0)の値をスライドさせているものだと捉えます。こういう数値としてしか見ない見方を、抽象化するといいます。 本質的に、やりたいことはある範囲を限界を超えないで行ったり来たりする操作です。表現としてスライドするかぐるぐる回るかといったことは、その具合を具体的に反映した結果でし
爆速!!!"歩く"アニメーションの作り方｜_level0.KAYAC
アニメーションの作業を人に頼んだときに 相手のセンスとスキルを測れる動きがあります。 それが"人の歩行" なぜ"人の歩行"かというと、 ・誰でも毎日見る動きなのでモチーフとして公平。 ・表現するには観察力が必要。 ・自分をモデルに出来る。 ・モーショントゥイーン（クラシックトゥイーン）の特性をある程度理解している必要がある。 という理由です。 そんなセンスとスキルがモロバレになるアニメーションでも、 コツさえつかめば3分で作れる魔法のtippsを今回はご紹介。 ちなみにCS４から今までの "モーショントゥイーン"が"クラシックトゥイーン"になりましたが、 細かい動作が必要な場合には"クラシックトゥイーン"が向いているように思います。 今回紹介するtippsも"クラシックトゥイーン"で制作しています。 前置きが長くなりました。 続きを読む ココがポイント タイムラインをコピーして逆に動く手と
これだけは知っておきたい「FlashLite入門」 | _level0 - KAYAC Front Engineer Blog
この１年、FlashLiteを触る機会を多くいただきました。 まったくの初心者から始めたので、何度も思い通りにいかず、苦しめられました。 ということで今回は、１年の総括の意味を込めておさらいします。 1. ムービークリップの参照方法 これは、以前記事にしましたが、もう少し上乗せして 説明します。 //AS2.0だと、 my_mc._x = 100; //FlashLite1.1だと tellTarget("my_mc"){ _x = 100; } //ネストが深い場合 my_mc.huga_mc.hoge_mc._x = 100; //Flash Lite1.1だと、 tellTarget("my_mc/huga_mc/hoge_mc"){ _x = 100; } //tellTargetの外の変数を参照する場合 hoge = true; tellTarget("my_mc"){ if(/
FlashLiteで音を再生させたいときに誰もが一度はひっかかる罠をご紹介。 | _level0 - KAYAC Front Engineer Blog
携帯向けのFlashコンテンツ、FlashLite（1.1&2.0）で音の出るゲームを開発すると、必ずといっていいほどひっかかるポイントがあります。それはサウンドまわりの実装方法。PC用のFlashPlayerと同じように実装しても音が再生されないのです。 今日はFlashLiteのサウンド実装について、実体験をもとに解説していきます。 FlashLite向けのサウンド再生方法 大事なことなので二度言いますが、携帯向けのFlashLiteコンテンツを開発するときのサウンド実装方法はPC向けFlashとは異なります。 PC向けのコンテンツでライブラリ内にある音声ファイルを再生するには、音声ファイルのプロパティでリンケージ設定をしattachSoundで生成したり（AS2の場合）、AS3では音声ファイル自体にクラス名を設定して、newしてインスタンスを作成して使います。 ここで必要になってくる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
_level0 | Kayac Interactive Designer's Blog
