サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
2024年ランキング
level0.kayac.com
HTMLファイ部のほんだです。 気づきTips! Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
検索じゃ学べない! HTML/CSS/JavaScriptの気づきTipsまとめ31こ 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で終了時の関数を実行したりイージングを付けられ
みなさんこんにちは!閃光部おばらです。 今回はCSSトランジション終了の検知についてです。 トランジション終了を検知するための方法とそれを使用したデモをご紹介します。 CSSトランジションのおさらい まずは簡単なデモを用いておさらいをしましょう。 HTML <div>を一つ用意します。 JavaScript から要素を取得するため、適当な id を付与します。 <div id="hoge"></div> CSS 次はトランジションの設定です。 #hoge { -webkit-transition: all 5s ease-in-out; -moz-transition: all 5s ease-in-out; -ms-transition: all 5s ease-in-out; -o-transition: all 5s ease-in-out; transition: all 5s e
みなさんこんにちは! 閃光部おばらです。 ajax やアニメーション等の非同期処理を行う際、Deferred という概念を用いると非常に作りやすくなります。 Deferred の機能を提供するライブラリは多々ありますが、 今回は必要最低限の機能を持つ Deferred をフルスクラッチしてみましょう。 仕様 今回作成する Deferred の仕様は以下の通りとします。 ・【待機中】と【解決】の二つの内部状態を持ち得る。 ・初期状態は【待機中】。 ・ユーザーは(メソッドを呼び出すことにより)内部の状態を【待機中】から【解決】に一度だけ変更可能。 ・一度、内部状態を【解決】に変更した後は、他の状態に変更不可。 ・ユーザーは(メソッドを呼び出すことにより)任意の数のコールバック関数を登録(予約)できる。 ・登録時の内部状態が【待機中】の場合、コールバック関数はキューに追加される。 (【待機中】か
777ブログウェイ5日目です! みなさん初めまして。HTMLファイ部の比留間です。 _level0はフロントエンド向けのブログということで、ファイ部も今後はこちらで更新を行うことになりました。 自分はHTML5関連のネタを主に書いていく予定です。よろしくお願いします! スマホWebサイト制作に欠かせない3つのツール スマホサイト制作で一番苦労するのはどこでしょうか。 人によって色々意見があると思いますが、デバッグツールの少なさは誰もが思っていることと思います。 これがPC版だったなら・・! と何度も唇を噛んだ経験があります。 ということで、今回ここで紹介するのはそうしたスマホサイト制作に欠かせない3つのツールについてご紹介したいと思います。 目次 weinre Adobe Shadow Charles weinre weinreとは、Web Inspector Remoteの略だそうです。
「モンスターを集めてまいれ!」というiPhoneアプリを プロデュースしたんですが、イラストレーターのタスクが多く ドット絵を自分で描く事になりました。 初ドット絵だったので このノウハウ共有に何の意味も無いかもしれませんが きっと何処かに需要はある!と、思い込んで記事を書いております。 使用ソフトはPhotoshopです。 余談ですが バイトのドット絵得意な子に聞いたところ「Photoshopはやめておいたほうがいい」 との回答。 ・・・・。 さあいってみよう! まず下絵を準備 自分、ワンコしか描けないので イラストレーターにさらっと描いてもらいました モンスター画像は最終的に150×150px で使用するんですが、 ドット絵の荒さを出す為に50×50pxに縮めます。 輪郭の線をポチポチなぞっていきます。 レイヤーを分けて下地になる色を塗ります。 ここで 初心者の私はぽちぽちやるのに疲れ
みなさま、あけましておめでとうございます。@tsmallfieldです。 本年もこの_level0をよろしくお願いいたします! さて、2012第一弾はお正月のスペシャルコンテンツ「おHTML5」!! 制作にあたっての技術的な裏話をご紹介します。 「おHTML5」はブラウザの様々な機能を利用した、くすっと笑える遊び心120%のスペシャルサイト。 <select>や<input>といったいつも見慣れた部品であんなことやこんなことまで!! まだ未チェックの方は今すぐこちらのURLへ! http://ohtml5.kayac.com/ 実装体制 フロントの実装は私とイタニティーの2人で行い、主にフレームワークを作成する側とそれを使用する側という役割分担としました。 専用ライブラリ barbie.js 今回は実験的コンテンツということで、jQueryといったフリーのライブラリを一切使用していません。
先日、『KOF ENCOUNTER』という、すれちがい対戦バトルゲームをリリースしました。 実際に街ですれちがった人とバトルが発生して、経験値がたまってキャラがどんどん強くなっていく!というゲームです。 無料! かつ アカウント登録とか一切必要なし! ですので、ぜひぜひお試しください!! http://itunes.apple.com/jp/app/the-king-of-fighters-encounter/id449518556?mt=8 で、このアプリ、ゲームが進めていくと手持ちのキャラが増えていったり、地域ごとのランキングでのし上がっていったり、といった楽しさがあります。 TwitterとかFacebookをウォッチしてると、わざわざスクリーンショットを自分で撮影してアップしている人が多いことに気づきました。 そこで、『自分の手持ちキャラクターを一覧できる画面』と『自分がランクイン
こんにちは、夏が終わりそうなので夏カレーつくりました、hidakaです。 みなさん、よくアプリ開発しててリリース直前になって、あーあれ忘れてた、これどうなってんのーみたいな話になったことはないでしょうか。 ありがちなところでは、マーケット用の画像ないよ、とかアプリ説明決まってないとか。 今日はディレクター向けに、アプリ開発時にチェックしておくことのまとめです。 まずはアプリ開発スタート時にチェックしておきたいもの。 すぐ決まることはさっさと決めるのが、ブラッシュアップ時間を確保するポイントです。 項目 チェック 備考
iOSアプリのメモリ使用量をリアルタイムに表示するクラスを公開しました みなさまこんにちは、Google+の招待を心待ちにしているtsutsumiと申します! 今日は_level0では久しぶりのiOSの話題でございます。 「なるべくUIViewを使わず描画する」とか、「nibを使わない」とか、iOSアプリの動作を軽快にするためのTipsは数あれど、実際どれぐらい効果あるんだろう、ってことを調べたい、でもInstrumentsはめんどくさい、ってことでメモリ消費量やUIViewの数など、「負荷を示すパラメータ」をリアルタイム表示するクラスを作りました。 (イメージとしてはAS3でいうところのStats) 同梱のサンプルコードを実行すると、こんな感じで表示されます。(左上の黒いラベルがStats) パラメータ内訳は後述しますが、メモリを約16MB使用し、ビューが合計5つ(UIView、UIBu
level0をご覧の皆さん、生存戦略ー! 今週はお休みで寂しいですね。 有明に出奔してる方も多そうですが、構わずエントリです! ところでこんなデモを作ってみました iPhoneのBluetoothでコントロールするプロジェクションゲーム from BMCL on Vimeo. これはなに? これはサイネージ的に外の施設でプレイすることを想定したゲームのプロトタイプです。画面内にある日記帳を、自機であるペンギンに取りに行かせます。 えっ? どこかで見たことのある設定だって? それはきっと、運命による偶然です。 ペンギンを移動させるためには、りんごを使います。 りんごには果たしてどういう意味があるのか・・ 自分の端末で楽しむシングルモードと、サイネージを利用して楽しむバトルモードがあります。 バトルモードの時は、IPhoneの操作で壁面のペンギンを操ります。 BlueToothなら誰でも参加で
皆さんこんにちは、kijimaです。 世の中ではスマートフォンで盛り上がっていますね。 電車内でスマートフォンの広告を見ない日はありません。 しかし、フューチャーフォン(通称ガラケー)による 携帯ソーシャルゲームもまだまだ熱いようです。 そんな状況で、 FlashLite1.1コンテンツ開発における知識やテクニックは まだまだ必要とされているな、と感じます。 そこで、今回は 「FlashLite1.1についてはこの記事さえ押さえとけばOK!!!」 というコンセプトで記事を書いてみました。 これで、FlashLite初心者な後輩に教えるのにも便利になります(笑) 「この記事さえ見とけば、できるようになるから」と。(笑) ■FlashLite1.1初心者はこれを読もう! FlashLite初心者向けや入門記事はとても多いので、 検索すればすぐにヒットします。 情報が重複しているとは思いますが、
さて、Androidって携帯のスペックは上がっているのにインストールできる容量については相変わらず厳しいですよね。
海賊王をめざす男 マツです。こんにちは。 Unity で iPhone & Android アプリをつくろう。 Unity for iPhone and Android http://unity3d.com/japan/mobile.html Unity Spring 2010 Highlight Reel from Unity3D on Vimeo. Unity は、本格的なゲームの開発を誰でも可能にすることを目標に作られたゲーム開発ツールです。 iPhone や Android などのプラットフォームに対して効率よくゲームを提供することが可能です。 ダウンロード UNITY: Download and Start Creating Games http://unity3d.com/unity/download/ Unity から MonoDevelop を関連付ける Unity といっ
久しぶりの更新です。こんにちは。 最近のFlashチームはiPhoneやらAndroidやらJavaScriptやらフィールドがひろがりまくりでとてもあわただしくも楽しいかんじであります。 さて、そんな中で幅広いお仕事をいただける嬉しさ楽しさの反面、やっぱり既存のメンバーのスキルコンバートすると結果的にFlasherが減る!(笑)みたいな状況がありまして、下記のような採用イベントを行うことになりました。 カヤックが実際に今、どういう仕事をどのように進めてるのか、制作現場にフォーカスをあてて各職能のプレイヤーが何を考えているのか、お話する機会をいただきたいと思っています。 自社チーム、クライアントワークチーム、それぞれの視点の違いもみられるかもしれません。興味のある方がいたら、ぜひお越しいただいて中身をのぞいてみてはいかがでしょうか。 道家も(FlashDevelopチーム改め)インタラクテ
海賊王をめざす男 マツです。こんにちは。 Flash Builder Burrito で Android アプリを開発しました。 WORDDICT!-ワーディクト - Android マーケット https://market.android.com/details?id=air.Worddict 「WORDDICT!」は、画面に並ぶアルファベットから、英単語を見つけては指でなぞってつないでいく英単語パズルゲームです。 ゲームは、『お菓子を奪いに来る悪役バグバグから、お菓子を守れ!』というストーリーのもとに展開。 英単語をつくらなければ、時間の経過とともに画面上の文字がバグバグのテリトリーに変わっていきます。 ユーザーはアルファベットの配置を入れ替えながら、できるだけ多くの英単語をつくって悪役から自分のテリトリーを守り、高得点を目指すゲームです。 単語の最後のアルファベットを使い、続けて英単
次のページ
このページを最初にブックマークしてみませんか?
『_level0 | Kayac Interactive Designer's Blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く