はてなブックマーク

こんにちは。 Webデザイナーの山本です。 今回はCSSアニメーションの種類や詳細、使い方の例などをご紹介します！ CSSアニメーションとは？ CSSアニメーションとは、CSSだけでアニメーションすることができる機能のことです。 animationとtransitionの２種類があります。 animationは再生回数を指定したり逆再生や遅延して再生など詳細な指定が可能ですが、transitionはhover（マウスオーバー）などのタイミングで１度だけの再生になります。 主な違いはこんな感じ。 ▼animation ・ループできる ・本格的なアニメーションの設定ができる ・再生後にプロパティの継続ができる ・自動再生ができる ▼transition ・ループできない ・hover等のきっかけが必要（自動再生できない） ・再生後にプロパティが元に戻る animation animationは

どうも、開発2部サーバー担当の山本です。 皆さんDBの水平分散は行ってますか？ 最近ではサービス開始時点から水平分散しているタイトルも割と多いのではないでしょうか。ユーザーやデータが増えるのはサービスが好調な証ではありますが、いざ対応しようと思うと大変ですよね。 今回はMySQLのストレージエンジンであるSpiderを使った水平分散（以下シャーディング）について紹介したいと思います。 Spiderとは Spiderは2009年にver1.0がリリースされた国産のMySQLストレージエンジンで、MySQL以外にもMariaDBとOracleに対応しています。 MySQLにはInnodbを代表にMyISAM、MEMORYなど様々な特徴を持ったストレージエンジンが用意されていますが、Spiderの特徴はストレージエンジンがシャーディングに対応していることです。 ここ最近は皆さんAWSのAuror

はじめまして、WEBプログラマーの佐野と申します。 少し前ですが、NTTソルマーレ株式会社様の海外向けゲームアプリ「Moe! Ninja Girls」の公式サイト制作をさせていただきました！ ※サーバーが海外にあるため、読み込みに時間がかかります。 ※日本での配信はしておりません。 その中で、HTML5のCanvasを使って桜を降らせるアニメーションを作成しましたので、 完成までの手順をSTEPに分けて共有させていただきたいと思います。 こちらが今回作成したサンプルの完成形です。 【2017/02/13追記】 ブログの最後に、今回のサンプル使ってWEBチームで１つ作品を作ってみました。 サンプルと違い、かなり豪華なものになってますので、ぜひ最後まで見ていただければと思います。 Step1:画像を表示して上から下に動かす まずは画像の表示と画像を上から下に動かすところまでやってみました。 S

こんにちは。webデザイナーの山本です。 今回は素材感のあるwebサイトのボタンの作り方をご紹介します。 ツールはPhotoshop CS5を使用しています。 制作方法 それでは実際に作っていきましょう。 ステップ1：土台を作ろう ・円形シェイプツールで円を作る。（直径230pxくらい、カラー：#000） ・新規レイヤーを作成し、ブラシツールで適当に形を作る。（今回はペンキブラシを使いましたが、何ブラシでもよいですし、もはやこの過程はなくても大丈夫です） ・上記２つを「レイヤーの結合」する ・さっき結合したレイヤーにレイヤースタイルを付ける。 ■ドロップシャドウ ・描画モード：乗算（カラー：#000） ・不透明度：75 ・角度：120（包括光源を使用にチェック付） ・距離：0 ・スプレッド：49 ・サイズ：13 ■シャドウ（内側） ・描画モード：乗算（カラー：#000） ・不透明度：75

こんにちは。開発1部デザイナーHです。 今回は、ソーシャルゲームカードゲームイラスト業務の手順、イラスト自体のメイキングなどを画像を交えてご紹介いたします。 また巷で流行りの色収差のやり方も併せてご紹介。 ▼「金属の質感描写にこだわったダークファンタジーなイラストの描き方」はこちら イラスト業務の手順 こういったイラスト制作の依頼では、まずどういったキャラクター。シチュエーション、レアリティなどの仕様書が届きます。 それらの決まりに従って進行していくわけですが、今回は大体どこでも共有している項目の一部を紹介したいと思います。 大ラフ ラフ 清書 完成形 – 納品 各手順の合間に提出～チェックバックがあります。 発注元によって細かく分かれていたりそうでなかったりしますが、概ねこのような手順になります。 今回の記事では1枚ですが、大体3枚で1組のセット注文になっていることが多いです。 今回のイ

こんにちわ。webデザイナーの池田です。 弊社ではオリジナルレーベル「peakvox」にてfacebookを運用しているのですが、 突然facebookの更新情報が取得できなくなり、すこしハマってしまったので共有させて頂きます。 同じ現象にお悩みの方の参考になればと思います。 今までの取得方法 まずは、今までどのように取得していたかというところですが、 弊社ではgoogleFeedApiを使ってfacebookが発信しているfeed情報を取得してタイムラインの更新をお知らせしておりました。 しかしある日突然エラーが・・・。 「400:Feed could not be loaded.」 要するにフィードが読み込めないよーと言っているようです。 それもそのはず、実はfacebookのfeed配信の機能が2015年6月23日をもって終了となっていました。 https://developers.

社内サーバーの状況は、zabbixである程度管理出来るようになったんですが、ちょっと不安になってきたのがバックアップです。 開発用サーバーも含めてmysqlが色々なところで立ち上がっているのですが、このバックアップを楽に出来ないものか、と。 要件的には、 mysqldumpを各サーバーで行う リモートでmysqldumpを行うのではなく、各サーバーでdumpし、出力ファイルを回収する形で。リモート接続を許可していないmysqlもあるので。 各サーバーでdumpしたsqlファイルをまとめて、圧縮して固めておく 圧縮したバックアップは数日間、履歴管理出来るようにする（10日間ぐらい） 対象となるサーバーのリストは簡単に更新出来るようにする 各サーバーにログインする必要がありそうなので、fabricの出番です。 問題は履歴管理。 logrotate等色々とやり方があると思うのですが、練習がてらj

こんちは。開発２部の吉岡です。 オーツー社内には様々なサーバーがあります。ファイルサーバーや、バックアップ用サーバー、Jenkins、Jenkinsのスレーブ、Redmineなど… サーバーが増えていくのは良いのですが、どのサーバーはどんな状況なのかさっぱり把握出来ていません。 そこでサーバー状況を一括で管理するために、Zabbixを導入してみました。 Zabbixについて Zabbixは死活監視＋負荷監視なオールインワンな感じのサーバー管理ツールです。 Webブラウザ上で設定を行うことが出来、項目や画面が多く、かなり高機能な印象です。 インストールしてみた インストールはマニュアルを参考に行ったのですが、意外と簡単で躓くこともなかったです。 被監視サーバーにはzabbix-agentをインストールするのですが、とりあえず使うにはzabbix-serverのIPアドレスを設定するぐらいでし

開発２部の吉岡です。 前回の記事 rpmを使ったchef-soloのレシピを作成していく 前々回の記事　chef-soloで使うrpmの配信サーバーを立ててみる 今回はVagrantとchef-soloを組み合わせて開発環境を作っていきたいと思います。 git submoduleでクックブックを持ってくる 前回の記事では、作成したクックブックをgitにpushしておきました。 vagrantのディレクトリを「git init」しておき、クックブック（「site-cookbooks」ディレクトリ）をsubmoduleとして追加してやります。 （なので、「cookbooks」に入っているサードパーティ製のレシピは使わない前提です） vagrant initしたディレクトリで $ git submodule add レポジトリURL ./site-cookbooks とすると、site-cook

開発２部の吉岡です。 現在、開発環境をどんな感じで構築しようかと考え中ですが、各所で話題のchef-soloとVagrantを使って挑戦してみました。 なんだかんだで3回に分けて掲載していこうかと思います。 ひとまず、開発環境をとしては、下記のようなものが欲しいです。 各開発スタッフが手早く開発環境を使用できるようにする。思い立ったら即環境をゲット出来るようにしたいです。 ミドルウェアの変更など、開発環境の変化も各スタッフで共有出来るようにする。各スタッフがなるべく同じ環境を使用できるようにしたいです。 本番環境も考えた環境を使用したい。ミドルウェアのバージョン等、本番で使用するものと出来るだけ同じにしたいです。 プロジェクト終了後でも、環境を復旧できるようにする。納品後でも動作環境を保持しておいて、検証や問い合わせ対応等の作業を行いやすくしたいです。 chef-solo・Vagrant

以前開催していた社内LT大会時に『アジャイル』というものを知り、 まずは1人でホワイトボードを使ったタスク管理をしていたのですが、 なかなかわかりやすいなと思い、チーム内でもはじめてみました。 (アジャイルではカンバンというみたいです) また、新しいタスク関連の記事も更新しましたので、こちらもぜひご覧くださいませ！ ざっくりとした使い方 ToDo→Doing→Name00(個々のタスク)→Check(確認中)→Done(修正がなければ完了) 優先度が高いものは上へ 付箋の色は制作作業・見積・MTGなどのカテゴリー分け 個々のタスクは当日分のみ（持ち越し時は朝会で見直す） メリット パッと見てわかりやすい 視覚的にわかりやすいです。 全体でどれだけのタスクがあるか・個々のタスクはどれくらいあるか 朝会との併用で1人1人のタスクも偏らないように調整していきます。 導入が簡単 Webツールのよう

11/23にamazon大阪支社で開催された関西ソーシャルゲーム勉強会に参加してきました。 第5回 関西ソーシャルゲーム勉強会 関西ソーシャルゲーム勉強会 Facebookページ 最近は社内での勉強会も活発になっているので、私を含め、2部からも何名か参加しました。 セッション内容 AWS・運営・デバッグと幅広いテーマでセッションがありました。 なかなか難しいものもありましたが、 技術的な話が多め？全体的にエンジニアの方の参加が多いなという印象でした。 ビンゴ！！ 途中のビンゴゲームでは私は残念ながらビンゴにはなりませんでしたが、 他の社員はいくつか景品をゲットしていました。 (悔しいけど、次回こそ…！) 懇親会はビアバッシュ！ 聞くのにいっぱいいっぱいでセッション中は写真を撮っていなかったのですが、 懇親会では何枚か写真を撮りましたので、一部をご紹介します！ あー！！進撃Tシャツをゲットし

こんちは、吉岡です！ 先日、開発２部で見積もりポーカーのWorkshopを行いました。 今回はそのレポートです。 やってみた経緯 DevLove関西さん主催で行われた「アジャイルな見積もりを語ってみませんか？」というワークショップがあったのですが、社内で一緒に参加する方を募集してみたところ、思わず多く方から反応がありました。 結局、業務的な理由等で私一人での参加になったのですが、このワークショップがかなり面白く、勉強になるものでした。 見積もりに対する認識の違いをまとめるプロセスや、意見交換などを楽しむことが出来たと思います。 この勉強会について社内で話してみたところ、面白そうなのでやってみようという声があり、元々の関心が高かったということもあって、開催してみた次第です。 やってみました！ ワークショップは、上記のDevLove関西の勉強会で使用されていた橋詰様のスライドを元に行いました。

こんちは。開発２部の吉岡です。 オーツーではKVSとしてRedisを使ってます。 なぜかというと、 インストールと設定が簡単なので、開発環境を作りやすい。 柔軟なデータ型。ハッシュとソート済みセットにはお世話になってます。 master-slaveのレプリケーションを作って、冗長構成も取ることが出来る。 という感じでしょうか。 ちなみにphpredis使って接続しています。 ランキングとRedis ランキング機能はソーシャルゲームに付き物です。 なぜRedisでランキングで作成するのかというと、データベースでも実装を行うことは出来るのですが、順位付けの処理に非常に負荷がかかります。特に同点同位。これがクセモノです。 リアルタイムでこれを生成するのはかなり難しいかと思いますが、Redisのソート済みセット使えばこの処理は比較的楽に実装出来ます。 参考になるのは↓な記事でしょうか。 Redis