『フロントチューニンガソン 最速を目指すには』
11:10～ 課題ページの確認＆PageSpeed Insightsの実行目的：チューニング対象のウェブサイトの改善の余地を調査 上記のgruntプラグインをインストールする npm install コマンドを実行しながら、ブラウザやIDEでチューニング対象のウェブサイトを確認し始めました。 少し見ただけでもCSSの構文エラーがあったり、使っていないJavaScriptライブラリがインポートされていたり…。 まるで無茶な運用を数ヶ月続けたかのような、カオスなファイル群でした。 ここで実行した PageSpeed Insights に画像サイズの最適化をオススメされたので、まずはそこから行うことにしました。 11:20～ 画像ファイルの最適化目的：画像ファイルサイズの削減 30 x 30pxで表示している画像ファイルが実際には150 x 150pxで保存されていたりする画像がそこそこあったの
『派手なだけじゃ意味が無い！魅力を伝える訴求デザイン』
皆様はじめまして、2013年新卒入社の小笠原と申します！ 現在アメーバゲーム部門にて、県vs県のカードバトルゲーム・天下統一クロニクルのデザイン全般を担当しています。 今回は、ソーシャルゲームの運用には欠かせないガチャの訴求デザインについて、 天クロが大切にしている考え方やノウハウをご紹介出来ればと思います。※この先登場するガチャはこの記事の為に用意したサンプルなので、実際にゲーム内で引く事は出来ません…！ご容赦下さい。 天下統一クロニクルとは 「坂本龍馬」「日光東照宮」「ぬらりひょん」など、各地の名物や偉人をテーマにしたカードを武器に、全国47都道府県が戦いを繰り広げるバトルゲームです。 全国の皆様に支えて頂き、この9月にめでたく2周年を迎えます！ ガチャの訴求デザインとはソーシャルゲームの中で販売されるガチャの魅力を伝えるための、 バナー等のデザインの事を指します。 ゲームのテイストや
『RequireJS等はもう古い。WebPackとは？』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 アメーバ事業本部 クロスイノベーション室のグンタ（@gunta85）と申します。 今回はフロントエンド開発用の、 ありとあらゆる依存関係を簡単に解決してくれる、 WebPackというスグレモノをご紹介します。 導入経緯大きなアプリを開発するにあたり、依存関係を解決してくれるものを探していました。 その中で、RequireJSやBrowserify、Componentなども候補に挙がりましたが、 諸々の理由でWebPackを選びました。 特徴の違いについては「WebPack vs Browserify」等で検索してみると良いかと思います
『ClipMenuをJSで拡張して、ステキなコピペライフを』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。スマートフォン版Amebaでディベロッパーをしている宇納です。 本日は普段の業務とは離れて、ちょっとだけ便利なTipsのご紹介です。 Mac OS用のクリップボード・ユーティリティソフトClipMenuをJavaScriptで拡張する方法と、それを使ったサンプルをご紹介します。 とても簡単にできますので、プログラミングが苦手な方も是非挑戦してみてください！ ClipMenuとはクリップボードの履歴を保持しておけるフリーのアプリケーションで、これを使うとコピー＋ペーストを何度も繰り返さなくても、コピーした履歴から呼び出してペーストができます
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
『ガールフレンド（仮）の「声」実装』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。こんにちわ。 「ガールフレンド（仮）」でフロントエンドの開発をしている秋山と申します。 「ガールフレンド（仮）」とは、ユーザーが主人公となり、様々な女の子と出会っていく“声が出る♪”学園恋愛カードゲームです。各カードには、人気声優のボイスが付いていて、さまざまな演出に合わせてキャラクターの声を聞くことができます。スマホのブラウザ版カードゲーム × 声ガールフレンド（仮）の開発に入る時点で、スマホブラウザゲームで音声を出しているサービスは他にもありましたが、カードに声が付いているものは少なかったかと思います。 また、スマートフォンのブラウ
『モバイル時代におけるCSSの設計と実装』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、こんにちは。 ネット総合事業本部プラットフォームDivの斉藤です。 今回は私の所属している部署からは初の1pixelへの寄稿となるそうです。 CSS開発のアプローチほぼ同時期にモダンウェブ開発に欠かすことが出来ないと言われるようになったJavaScriptと比べると、CSSにおける設計、という話題はなかなか出てきません。 単純なウェブサイトを作る際にはあまり気にしてこなかった部分ですが、ウェブアプリを制作している我々の仕事には欠かすことが出来なくなってきています。 ほかのプログラミング言語に比べると圧倒的に非力な言語だからこそ、ほかのプ
『タッチイベントを使ったスマートフォンページ制作』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ブロググループでフロントエンドの開発を担当している泉と申します。 クリエイティブアカデミー※1を経て、2012年5月に中途入社いたしました。 クリエイティブアカデミー レポート 仕様について１、フリックを使った画像の切り替え 今までは、現在見ている画像から次（前）の画像を見るためには、リンクをタップしてもらって該当の画像ページに遷移させる必要がありました。 しかし今回はユーザにストレスを与えないために、ページ遷移しなくても画像が切り替わるように実装します。 ２、表示されている画像のピンチイン／アウト（拡大／縮小） タップされた時のイベン
『リッチスマートフォンWebアプリのメモリ管理』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、ピグディビジョンでフロントエンドのプログラムを書いています。maginemu (@maginemu) です。 どこでもピグライフとは弊社の提供しておりますPC向けソーシャルゲーム「ピグライフ」をスマートフォン向けに移植したサービスです。『ピグライフのお庭をスマートフォンでも』を目標に移植を行いました。 (「どこでもピグライフ」はPCで「ピグライフ」を開始し、「いちごジュースを作ってみて！」というクエストをクリアするとお使い頂けるようになります) PC版ピグライフはFlashでつくられていますが、どこでもピグライフはHTML5/CSS3/J
『スマートフォン向けブラウザゲームの開発について』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんばんは。アメーバ事業本部ピグディビジョン所属の久保です。 今回は6月5日にリリースいたしましたスマートフォンで遊べる「スマートフォン版ピグつりゲーム」(http://fishing.pigg.ameba.jp)の開発の一端をご紹介させていただきます。 スマートフォン版ピグつりゲームとは スマートフォン版ピグつりゲームとは、PC版アメーバピグの中で遊べるつりゲームをスマートフォンでも気軽に楽しんでもらえるように制作したブラウザゲームです。PC版はFLASHで動作しますが、スマートフォン版ではiPhoneの対応を考慮に入れてHTML/CSS/Java
『JavaScriptのテスト手法』
みなさんはじめまして。 2011年11月に中途で入社し、現在はAmeba事業本部でスマートフォン版Ameba（通称デカグラフ）の開発をしている川口（facebook）と申します。 JavaScriptにおけるテストフレームワーク JavaScriptにおけるテストフレームワークとしては、有名なもので現在以下のものがあります。 ●JsUnit Javaのテストフレームワークとして有名な「JUnit」を参考に作られたテストフレームワークです。 ●QUnit もともとjQueryをテストするために開発されたフレームワークですが、現在ではjQueryへの依存が無くなっているためjQuery以外のライブラリを使ったプロジェクトでも使用できます。 ●Jasmine
『データ管理で作業効率がUPするデザインワーク』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは！ スマートフォンプラットフォームDivという部署でデザインを担当しているおばたです。 モック作りを進めていって、デザインの方向性がなんとなく見えてきたら その後の開発は、デザインデータの管理・運用で作業効率がずいぶんと違ってきます。 はじめにFireworks CS5.1を使い、Subversion（SVN）で管理しています。 データの管理は、忙しいとついつい後回しにしてしまいがちです。 しかし、放っておくと気づけばカオスになっていることもしばしば・・・ ちょこちょこ整理するようにすると、すてきな感じになります。 Subversionにつ
『Fireworksの拡張機能について』
アメーバ事業本部ピグディビジョンでFlashデベロッパーをしております植木(@tomohip)と申します。2011年10月に入社いたしました。最近、Dreamweaverの本を共著で書きました。 素材をインポート後は、通常は、自分の作りやすいように名前を変え、ムービークリップに入れたりと、まとめた状態になっています。そうした状態で、再度インポートを使うと、また０からになるので、インポートするのが非常に手間です。 そこで、私が考えた方法は、Fireworksにまとめてしまう方法です。FireworksはPhotoshop、Illustratorのファイルを読み込めますし、スライスの書き出しも簡単で、グラフィックが苦手な私でも簡単に使えます。使うパーツごとにレイヤーに分けて管理して、使いたい画像だけを書き出して使います。毎回、更新部分だけFireworksの編集作業が発生しますが、Flashよ
『スマートフォンUIデザイン｢ブーシュカ｣』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 Ameba事業本部ソーシャルゲームディビジョンでデザイナーをしております大森です。 スマートフォン対応するにあたり最初に、｢ブーシュカ｣を簡単に説明させてもらうと、2009年9月リリースされた携帯向けソーシャルサービスで、手乗りサイズのブタのペットを育成するというゲームです。 フィーチャーフォン用のゲームとしてスタートしましたが、増え続けるスマートフォンユーザーにも楽しんでもらうべく、｢ブーシュカ｣も昨年よりスマートフォン対応を進め、昨年12月にAndroid版を、今年の1月にiPhone版をリリースしました。 2年もの間サービスを提
『SPピグで見るCSS3活用事例』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、森と申します。 スマートフォン版アメーバピグのWebアプリを担当しています。 「HTML5 Web Applicationのつくりかた」という記事が詳しいので、 この記事ではスマホ版ピグのCSSについてマイページを例にご紹介します。 とても長い記事になってしまいましたが、最後までご覧頂けると嬉しいです。 スクリーンショットで見るCSSプロパティやセレクタ2012年4月現在、SPピグ内のレイアウトはどのページも大体同じなので、マイページとフォーム要素を抜粋して使っているプロパティやセレクタの中から主要なものをざっと並べてみました。 HTML
『人間中心設計のプロセスを採用したリニューアル』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、Amebaでデザイナーをしております植田（@uuepoo）です。 2011年8月9日にリニューアルしたAmebaプレゼントについて、Amebaプレゼントとはデジタルアイテムを贈り合えるサービスです。 プレゼントのほかに、プレゼントの周りを装飾できるフレームや、プレゼントを包むラッピングも一緒に選べます。 プレゼントは有料のもの、無料のものと両方あり、 種類も好きな文字を入れることが出来るものや、自分のピグが入るもの、動くプレゼントがあったりと様々です。 プロジェクトの流れユーザーアンケートの実施 RN前のサイトを使ったユーザビリティテスト
『HTML5 Web Applicationのつくりかた』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 サイバーエージェントでフロントエンドの開発をしております 原(@herablog) です。 スマートフォン版 アメーバピグ新規作成で使用した技術について触れたいと思います。 #ちなみにこの記事ではHTML5を「最新ブラウザ向けのwebアプリケーション作成技術」というかなり広い解釈で使用していますので予めご理解ください。 今までDesktop・Android向けはFlashで作成されていたのですが、今回はiOS, Androidともに対応したいということで、HTML5でできるところまでやってみることにしました。 No Lag作るにあたり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
