サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大そうじへの備え
level0.kayac.com
あと1週間ですよー。フジロック。 来週の今頃にはテントたてて芝生でごろごろしながら前夜祭待ってるはずのhidakaです。 さて、Android。LinearLayoutのLayout weightの話。 Layout weightを指定して、LinearLayout内の要素のサイズを割合で指定しますよね。 画面サイズ違い吸収するために、このパーツは固定して、これとこれはこの比率のまま広がってほしい！とか。 で、Layout weight指定して、わーいうまくいったー。さて中の要素いれようとした時、問題が起こります。 Layout weight指定したレイアウトにImageViewとかいれると、中の要素によって広がったりしてしまいます。全然割合あわなくなってしまったり。 サンプルみても、Layout weight指定してるのはTextViewとかButtonですごくシンプルだったり。 いやL
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で終了時の関数を実行したりイージングを付けられ
【ルール】 参加者に与えられたミッションはだた1つ。 15分以内に こちらのコード を美しくすることのみ。美しさの定義はあえて参加者に委ねます。 「可読性」を美しさと捉えるも良し、「短さ」を美しさと捉えるも良し、「処理の軽さ」を美しさと捉えるも良し。 己の美的感覚のみを信じて戦う大会。それが、YOKOHAMA CORDS CODES COLLECTION なのです。 ※ 東京ガールズコレクションと掛けたネーミングだったのですが、タイポもありまったく気づかれませんでした。 ファイ部リーダー 本多大和 の作品 あんなサイト や こんなサイト の実装を手がけるファイ部リーダー。 演出が非常に得意分野ですが、今回は演出ではなくコードの美しさを競う大会。非常にスタンダードな改修を加えてきました。 Update と Render をわけたところがポイントだそうです。 ？？？からの採点 90点 セレクタ
第1回 HTMLファイ部 リファクタリング大会 15分以内に こちらのコード を美しくすることのみ。美しさの定義はあえて参加者に委ねます。 「可読性」を美しさと捉えるも良し、「短さ」を美しさと捉えるも良し、「処理の軽さ」を美しさと捉えるも良し。 己の美的感覚のみを信じて戦う大会。それが、YOKOHAMA CORDS CODES COLLECTION なのです。 ※ 東京ガールズコレクションと掛けたネーミングだったのですが、タイポもありまったく気づかれませんでした。 ファイ部リーダー 本多大和 の作品 あんなサイト や こんなサイト の実装を手がけるファイ部リーダー。 演出が非常に得意分野ですが、今回は演出ではなくコードの美しさを競う大会。非常にスタンダードな改修を加えてきました。 Update と Render をわけたところがポイントだそうです。 ？？？からの採点 90点 セレクタが複数
1年ぶりなlevel0で戸惑っているhidakaです。 今日はmixiさんの開発したdeploygateのご紹介。 アプリ作る人だけじゃなくクライアントとやり取りする人にもおすすめなものです。 ■deploygateとは https://deploygate.com/ mixiが開発した開発中のアプリの配布・更新・ログ確認ができるサービスです。 testFlightのandroid用のすごいやつ、って説明すればだいたい伝わります。 素敵な紹介動画はこちら。 これまではUSBケーブルをつないでapkファイルをコピーして開いてもらったり、 メールやアップローダーでapkファイルを送ってインストールしてもらったりと、 アプリの配布の手間がかなりあったのを削減してくれます。 (メール添付で送るとうまく開けなかったなど) ■まずは会員登録 アプリを受け取る人を限定するためにもテスターも会員登録が必要
デザイナーズブログに掲載した、 「FlashやHTML5で作成されたカードの合成UI・演出のまとめ」 好評だったので、level0にも掲載します！元記事から少し作品をプラスしています。 もはやコーディングコンテストサイトと化しているjsdo.itですが、 いま開催中のSPEC vol.5はいつもとちょっと違います。 今回は、いつものHTML5・JavaScript・CSSに加えて、ActionScriptでのエントリーもできます！ 「じつはFlashのほうが得意！」という方にも挑戦していただいているんですが、もうすでに続々と面白い作品が集まりだしているので個人的に気になる作品をいくつかご紹介したいと思います。 今回のお題「カードの合成のUI・演出を作ってください」 Flash編 forked from: SPEC vol.5 投稿用コード - wonderfl build flash on
みなさんこんにちは！閃光部おばらです。 今回は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
こんにちは！閃光部おばらです。 ウィンドウの"resize"、"scroll"イベント、document の "mousemove"イベント、そしてrequestAnimationFrame()を使用する際など、 イベントハンドラやコールバック関数の実行回数を間引きたい、実行間隔を一定以上に保ちたいケースが良くあると思います。 今回はそんなときに便利なユーティリティクラスを作成してみましょう。 また、そのユーティリティクラスを用い、"mousemove"イベントの回数を間引いてみましょう。 クラス名 一般に、こういった処理を（実行回数を絞るという意味から）throttle と呼ぶため、 クラス名は Throttle とすることにしましょう。 クラス名が格好いいとやる気が倍増しますね！ 機能 必要最小限な機能は以下の二つになります。 ・最少実行間隔を設定する ・実行する関数を設定する 仕様
Scripting Objective-C. Lately I've been interested in embedding other languages in my Cocoa Apps to handle less performance sensitive tasks & to be able to mess with things while the App is running. With the flexibility of the Objective-C Runtime, this turns out to be a simple and fun task. Scripting Objective-C. Lately I've been interested in embedding other languages in my Cocoa Apps to handle l
「777」まであと２日!! ソーシャルゲーム事業部閃光部の松山です。 777ブログウェイ『つくるための三種の神器』。 "つくるため"と言えば、Flashは言わずもがな欠かせないツールなんですが、 今回は、その他で欠かせないものを紹介したいと思います。 その１："絵コンテ" ・ソーシャルゲームで再生されるFlashの演出には、 ゲームの世界観だけではなく、機能やゲームの狙いなども含まれます。 この為、本来の軸をぶらさない為にも最初に絵コンテを制作して、 ディレクター＆デザイナーなど、チームでコンセンサスを取りながら制作を進めています。 制作前に数パターン演出案を考えて精査。紙ベースで最初にパターン出す方が早いし進めやすい。閲覧しやすく描きやすいので、大体A4の用紙１枚につき１案をまとめています。 ペンと消しゴム。ペンはstaedtlerの製図用シャーペンが丁度いい重さ(落としてペン先曲げやす
こんにちは！閃光部おばらです。 前回は Deferred をフルスクラッチで作成しました。 今回はそれをさらに使いやすくしていきましょう。 ※前回の記事はこちらです。併せてお読みください。 http://level0.kayac.com/#!2012/06/deferred.php 復習 以下が前回ご紹介したコードです。 /** * @return {Object.<function>} */ function Deferred() { /*------------------------------------------- PRIVATE -------------------------------------------*/ var _queue = []; /*------------------------------------------- PUBLIC ---------
777ブログウェイ8日目！ Ebisuアンドロイダーのmochicoです。 今日は私がAndroidアプリ企画～設計をする３ステップと、その時に使う３種の神器を紹介させていただきます！ １．イメージする アプリの企画が立ち上がったらまずは事前調査。 Android App Patterns 使いやすいパターンはどんどん取り入れてアプリのイメージを固めていきます。 もちろん公式のDesignガイドラインやGooglePlayは常にチェック。 ２．描く イメージが固まってきたらそれをアウトプットします。 UI STENCILS 手描き大好き。どれだけ電子化が進んでも紙に描くのは頭の整理になるし、何より速いです。 いただきもののWindowsPhoneのテンプレートノートですが、 Androidの画面設計だろーが、機能設計だろーが、クライアントサーバーの構成図だろーが何でも描いちゃいます。 お客
みなさんこんにちは！ 閃光部おばらです。 ajax やアニメーション等の非同期処理を行う際、Deferred という概念を用いると非常に作りやすくなります。 Deferred の機能を提供するライブラリは多々ありますが、 今回は必要最低限の機能を持つ Deferred をフルスクラッチしてみましょう。 仕様 今回作成する Deferred の仕様は以下の通りとします。 ・【待機中】と【解決】の二つの内部状態を持ち得る。 ・初期状態は【待機中】。 ・ユーザーは（メソッドを呼び出すことにより）内部の状態を【待機中】から【解決】に一度だけ変更可能。 ・一度、内部状態を【解決】に変更した後は、他の状態に変更不可。 ・ユーザーは（メソッドを呼び出すことにより）任意の数のコールバック関数を登録（予約）できる。 ・登録時の内部状態が【待機中】の場合、コールバック関数はキューに追加される。 （【待機中】か
777ブログウェイ5日目です！ みなさん初めまして。HTMLファイ部の比留間です。 _level0はフロントエンド向けのブログということで、ファイ部も今後はこちらで更新を行うことになりました。 自分はHTML5関連のネタを主に書いていく予定です。よろしくお願いします！ スマホWebサイト制作に欠かせない3つのツール スマホサイト制作で一番苦労するのはどこでしょうか。 人によって色々意見があると思いますが、デバッグツールの少なさは誰もが思っていることと思います。 これがPC版だったなら・・！ と何度も唇を噛んだ経験があります。 ということで、今回ここで紹介するのはそうしたスマホサイト制作に欠かせない3つのツールについてご紹介したいと思います。 目次 weinre Adobe Shadow Charles weinre weinreとは、Web Inspector Remoteの略だそうです。
777ブログウェイ始まりました！ はじめまして。nakagamiです。 この記事はカヤックの七夕のイベント「777」に向けたリレーブログです。 技術系アドベントカレンダー(*)になぞり、777イベントが開催される7月7日までの期間に、 4つの職能ブログ ( エンジニア 、デザイナー、フロントエンドエンジニア（本ブログです）、ディレクター )を横断し、更新して行きます。 テーマは「つくるための三種の神器」。 カヤック有志による、それぞれの切り口で記事を投稿していきます。 では期間中、どうぞお楽しみにください。 アドベントカレンダーについての記事 「師走を楽しもう。技術系アドベントカレンダーの魅力とは」 自己紹介 まずは初めての投稿ですので自己紹介を。 2011年にカヤック閃光部にジョインし、以降Flash/ActionScriptを軸にクライアントワークのプロジェクトに携わりつつ、 閃光部の
※4/30で募集終了しました（5/1追記） 現在募集中のFlashLiteクリエイター対象『100KB採用』！ 応募締切は4月30日(月・祝)までとなりました！！ まだまだ募集していますので、ご応募お待ちしています！ 今回は、カヤックのソーシャルゲームチームで現在運営している 『ぼくらの甲子園~熱闘編~』『武装合体ブレイブファクトリー』 で制作した、FlashアニメーションTipsを紹介します！ 【ぼくらの甲子園~熱闘編~】 : オープニングFlash このゲームは、ユーザー１人１人が高校球児となり ４７都道府県の中から自分の入学する高校を選び、 一緒の高校になった他のユーザーと共に甲子園を目指すのが目的なんですが、 本当の野球と同様、ユーザーが９人集まらないと試合ができない！という 異色のソーシャルゲームです。 高校野球の練習・特訓と言った世界観を、 ミニキャラクターを利用したアニメーシ
こんにちわ。HTMLファイ部のふちがみです。 HTML5のすごいコンテンツやニュースをキャッチアップしきれない！知らないところでバズってる！と悔しい思いをしている方も多いと思います。そこで、ミーハーなファイ部のメンバーに「どうやって情報収集をしているか」を聞いてみたのでまとめてみました。 ソーシャルブックマーク キーワード「HTML5」を含む新着エントリー - はてなブックマーク キーワード「CSS」を含む新着エントリー - はてなブックマーク キーワード「javascript」を含む新着エントリー - はてなブックマーク コミュニティー html5j.org | Google グループ ニュースサイト HTML5/CSS3の情報をクリップ！ :: dotHTML5 dotHTML5のtwitterもフォローしておくとGOOD ゲーム・ガジェット系 Kotaku JAPAN｜ザ・ゲーム情報
※4/30で募集終了しました（5/1追記） 「動く履歴書」を見せてください。 100KB以下の世界で、 工夫をこらして生きるクリエイターは、 未来でも生きていける。 カヤック閃光部は、そう思っています。 ５年以上も前から、 過去の技術と言われていたFlashLite1.1ですが、 ソーシャルゲームブームが続く昨今、 その技術は、まだまだ必要とされています。 さまざまな制限の中で試行錯誤しつつ、 サクサク動くアニメーションをつくる技術と、 ユーザーを楽しませる効果的な演出。 これは、すべての日本人が スマートフォンを持ったとしても、役に立つ。 そのことを信じているカヤック閃光部は、 FlashLite1.1クリエイターを募集します。 携帯Flashコンテンツや、Flashアニメーションを つくったことのある方、カヤックで働きませんか。 閃光部の「閃」は、ひらめくという漢字です。 カヤックのF
次のページ
このページを最初にブックマークしてみませんか？
『_level0 | Kayac Interactive Designer's Blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
