『PostCSSを使ったモダンCSS開発環境』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。2015年度新卒入社の森下(@morishitter)です。 今は755のフルリニューアルに向けて、Webフロントエンドの開発を担当しています。 その傍らでOSS活動も行っており、本エントリーで紹介するPostCSSは、GitHub上で僕がメンバーの1人でもあるプロジェクトです。 PostCSSとは PostCSSはNode.js製のCSSのパーサーで、そのAST(パース結果のJSオブジェクト)を操作するための便利なAPIを提供しています。PostCSS自体が提供する機能はたったこれだけで、非常に小さいライブラリです。 ASTを操作し、
UIを短期間で検証するデザインスプリント | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 ディレクター、UXデザイナーをしている大塚です。 今回は、5日間でアイデアを形にし、利用者に評価してもらい検証する「デザインスプリント」というプロセスについてご紹介します。 新規サービスを立ち上げたり、新機能を検討し、延々とブレストを繰り返し、いつまでたっても話がまとまらず、ようやくかたちになったら、あまり利用されずに終わってしまうということは、想像しているより良くあることです。 新製品の70-80％が投資分が回収できないという統計もあります。また、その失敗の理由の一番が42％で、市場にニーズがなかったというものです。熱意をもって開発
『AngularJSを使用したゲーム開発』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。オトギアでフロントエンジニアをやってます。atsumoです。 今回は、現在オトギアで使用中のフレームワークAngularJSのお話を少しさせていただければと思います。 ※ AngularJSのバージョンに関してはオトギアで使用中のバージョンである、1.2.16をベースに書かせていただきます。AngularJSとは https://angularjs.org/ Googleとコミュニティによって開発されているオープンソースのMV*系のJavaScriptフレームワークです。 同じような種類のフレームワークとして、Backbone.jsやKn
『RequireJS等はもう古い。WebPackとは？』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 アメーバ事業本部 クロスイノベーション室のグンタ（@gunta85）と申します。 今回はフロントエンド開発用の、 ありとあらゆる依存関係を簡単に解決してくれる、 WebPackというスグレモノをご紹介します。 導入経緯大きなアプリを開発するにあたり、依存関係を解決してくれるものを探していました。 その中で、RequireJSやBrowserify、Componentなども候補に挙がりましたが、 諸々の理由でWebPackを選びました。 特徴の違いについては「WebPack vs Browserify」等で検索してみると良いかと思います
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
『Web Componentsで行うHTMLのコンポーネント化』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは。アメーバ事業本部の泉水（@1000ch）です。 今日はHTMLをコンポーネント化するWeb Componentsという新しいHTMLの仕様と、 その機能を補完するPolymerというライブラリについてお話させていただきます。 Web Components Web Componentsについては、2013年のHTML5 ConferenceでGoogleの夷藤さんがセッションされていました。夷藤さんはChromeチームで、Web Componentの周りの実装をされていたり、Shadow DOMの仕様の編集をされています。 セッショ
『難しくないデザイン効率化のすすめ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。アメーバゲーム部門でデザイナーをしております吉田直由と申します。 リリース直後からの1年2ヶ月の間、ガールフレンド（仮）でUIデザインの運用を担当しておりました。 運用のフェーズになると大きく問題になってくるのが「業務の効率化」ではないかと思います。便利ツールの導入や、難しい技術の取得などもありますが、、、使い慣れない技術は逆に効率を下げる結果になってしまうのでは？ と、なかなか一筋縄ではいかない問題です。 ガールフレンド（仮）デザインチームの場合、1年目～3年目の若いメンバーが多く、さらにメンバーの数も10人という大所帯でした。 どう
『非エンジニアが知ってると得するUnityの知識』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさん、こんにちは。 アメーバ事業本部の中川(@neko_manma1)と申します。 ドラマチック弾丸アクションRPG「ウチの姫さまがいちばんカワイイ」 (以下、ウチ姫)にてUIの制作、キャラ/モンスターデザイン、モデリング／アニメーション、 背景ステージ制作等を担当しております。 ウチ姫は『Unity』というゲームエンジンを使って開発されました。 エンジニア向けのUnity記事はあちらこちらでよく目にするかと思いますので、 今回は非エンジニアの目線で「ここは押さえておきたいUnityの知識」を書かせて頂きます。 Unity開発の強みUnityにつ
『ゲーム開発フレームワーク「Cocos2d-x」とMVC』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。 2012年度新卒入社、Ameba Native Game Studio の久保です。 今回はゲーム開発のフレームワーク Cocos2d-x を取り上げます。 まずは Cocos2d-x について簡単に紹介し、そして私たちのチームでどのように導入しているのか、特に自作ライブラリと設計モデルについて書きたいと思います。 1. Cocos2d-xCocos2d-x はゲームのクロスプラットフォーム開発を行うためのフレームワークで、 iPhone アプリや Android アプリを同一のソースからビルドすることができます。 スマホアプリのクロス
『近日公開予定 JSフレームワークBeez』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさま、こんにちは！ 2013年度新卒入社の吉成祐人（@y_yoshinari）と申します。 現在私はなぞってピグキッチンというサービスのフロントエンドの実装を担当しています。 今回はなぞってピグキッチンの開発で用いている近日公開予定のJSフレームワークBeezについて書きたいと思います。 （※ 2013年12月19日追記：本日、無事にOSSとして公開されました！ → https://github.com/CyberAgent/beez） なぞってピグキッチンは、パズルで材料を集めて料理作り、ピグ村の様々なお客さんに料理をふるまって自分だけの素敵な
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
『スマートフォン向けJavaScriptライブラリ tofu.js』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは！ 現在ブラウザベースの新規ゲームの立ち上げをしています、2013年入社のチャーリー@charlie10151015です！ 主にフロント側をメインにJavaScriptというへんてこな言語を書いています。 最近のマイブームは3D関連でthreejs, webGL, Blenderなどに手を伸ばしております。 tofu.jsについてお話できればと思います。 tofu.jsとは？tofu.jsはHTML5に組み込まれたcanvasをFlashライクなコードで利用できるJavaScriptのライブラリです。 弊社の主席エンジニアが開発し、
『巷で話題のWebStorm』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 スマートフォン版Amebaで、フロントエンドの開発をしている2012年度新卒入社の鈴木と申します。 スマートフォン版Amebaではこれまで弊社ブログでも紹介された通りchikuwa.jsでクライアントサイドを、node.jsでサーバサイドの開発をしております。 そこで今回はJavascriptを用いた開発でメリットがあるWebStormの機能について、私が業務を通して便利と感じた点を紹介させていただきたいと思います。 WebStormとは WebStormはJetBrains社が有償で販売している*IDE（統合環境開発）で、Windows/Mac/L
『運用効率を向上させるサイト構築の3つのポイント』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。広報・IR室でディレクター兼デザイナーを担当している山下と申します。今回は当社の企業サイトをリニューアルするにあたって特に注力した、 「運用効率を向上させるサイト構築のポイント」というテーマで、 構築、運用をした結果、重要度が高かった点をいくつかピックアップして紹介させて頂きます。 ※今回のリニューアルでは、PCサイトの日本語・英語サイトとスマートフォンサイトを刷新しています。 1.運用体制を明確にする プロジェクト初期は決まっていないことが多いためか運用体制の話は後回しになりがちです。しかし、サイト設計の初期段階に明確にしておくことは効
『スマートフォンで動くリアルタイム3Dグラフィック』
はじめまして。 アメーバ事業本部コア室コアディベロップメントグループの新屋です。 コア室では3Dアニメーションライブラリの開発を行っています。 リアルタイム・プリレンダ問わず3Dモーショングラフィックが好きで趣味でも3Dの制作をしています。プリレンダはTAKCOMさん、WOWのdaihei shibataさん、ogaoooooさん、リアルタイムはMasato Tsutsuiさん等の作品が好きです。 リアルタイム3D 昨今のスマートフォンの処理能力の向上に伴い、webブラウザでも一昔前にPCで動作していたようなリッチなコンテンツも高速に処理できるようになりました。 スマホサービスでは必ずと言っていい程CSSやjavascriptでのUI・演出アニメーションが組込まれています。 そうしたアニメーションの表現力を引き上げる方法の一つとしてリアルタイム3Dを紹介します。 リアルタイム3Dを扱う言語
『PhantomJSを使ったスマホサイトテストの自動化(前編)』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは！ スマホ版Ameba担当の川口です。 ちょうど一年前、同じようにJavaScriptを使ったテスト手法について記事を書かせていただいたのですが、今回も懲りずにまた同じようなテーマで再登場いたしました。 JavaScriptのテスト手法 さて、スマホ版Amebaの全面リニューアルから早くも１年経ったのですが、今回はそんなスマホ版Amebaで日々自動テストツールとして活躍してもらっているPhantomJSを紹介させていただきます。 長い記事になるため、今回は前編・後編に分けて以下のような構成でお送りいたします。 ●前編 ・Phanto
デザイン作業のスピードアップ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ゴラクログのデザインを担当をしている鬼石広海と申します。 弊サービスは現在大幅リニューアル中ですので、UI周りはリニューアル後、又機会があればご紹介させて下さい。 今回は、駆け出しのデザイナーさん達の多くが課題にあげる、デザイン作業のスピードアップについてお話します。結論から言いますと、細部から作らずに土台作りを頑張ることが、結果的にスピードにつながるというお話です。 では実際にバナーデザインを例に紹介します。 1.構成要素を全部置く まずはプランナーやプロデューサーと話し合って決めた構成要素を、とりあえず全部キャンバスに置いてみます。
『ガールフレンド（仮）の「声」実装』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。こんにちわ。 「ガールフレンド（仮）」でフロントエンドの開発をしている秋山と申します。 「ガールフレンド（仮）」とは、ユーザーが主人公となり、様々な女の子と出会っていく“声が出る♪”学園恋愛カードゲームです。各カードには、人気声優のボイスが付いていて、さまざまな演出に合わせてキャラクターの声を聞くことができます。スマホのブラウザ版カードゲーム × 声ガールフレンド（仮）の開発に入る時点で、スマホブラウザゲームで音声を出しているサービスは他にもありましたが、カードに声が付いているものは少なかったかと思います。 また、スマートフォンのブラウ
『UI設計〜ディレクションの質を高める7つのポイント』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。社長室でUI/UXディレクターをしている渡辺（@mw19830720）と申します。現在は主にUI/UX視点でのAmebaスマホののクオリティ管理を担当しています。 普段ディレクターが本ブログで執筆することはあまりないと思いますので、今回はいつもと少し雰囲気を変えて、「サービス立ち上げ時におけるUI設計やディレクションの質を高めるポイント」というテーマで、あえて盲点になっているかもしれないと感じている点をまとめてみました。 まずは画面設計のフェーズにおいて2点ほど。 仕様書全体を都度見返す 画面仕様書の作成には数日～長くて数週間程度かかると
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://ameblo.jp/ca-1pixel/entry-11497184837.html