Uni-Q blog

うにきゅう ぶろぐ

css で ParrotアニGIF みたいなの

はじめに

これは 第2のドワンゴ Advent Calendar 24日目の記事として書かれた記事です。

自己紹介

こんにちわ。元ドワンゴのデザイナー id:uniq です。

ドワンゴというと何故か ParrotアニGIF を思い出しました。 なので、なんとなくCSSでチカチカクルクルするやつだけでもやってみます。

やってみる

まずCSSで丸い表現

HTMLてきとうに用意。

<div class="layout">
  <div class="parrot">
  </div>
</div>

CSSもてきとうに。 border-radius で円の直径を指定するのだけど、全体の幅 width と高さ height を指定しているのであれば、「%」つかうと楽。

.layout {
  padding: 20px 50px;
}
.parrot {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: #ffd68c;
}

これで黄色い丸ができてるはず。まだ動かない。

ぐるぐるさせる

  • party っていう名前であにめーしょん作る。
  • -webkit-transform-origin でぐるぐる廻る中心を設定する。
@-webkit-keyframes party {
  0% {-webkit-transform: rotate(0deg);}
  100% {background-color: #ffd68c;}
}

.parrot {
  border: 2px solid #373737;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: #ffd68c;
  -webkit-animation: party .5s linear infinite;
  -webkit-transform-origin: 20px 35px;
}

今回はwebkitだけ。。。これで黄色い丸がぐるぐるしてると思う。

色を調べる

色を変化させるために、色を拾ってくる。最新のphotoshopでひらいたら、アニメーションgifのコマがレイヤー毎に別れてた。すべての色をメモしておく。…10回ぐらい変えれば大丈夫っぽいかな。

f:id:uniq:20161224000628p:plain

色を変えてみる

分け方は、0%→10%→…(省略)…→90%→100% …でいっかな。とりあえず。

0% { background-color: #ffd68c; }
10% { background-color: #8cffff; }
20% { background-color: #8cff8c; }
30% { background-color: #8cb5ff; }
40% { background-color: #d68cff; }
50% { background-color: #ff8cff; }
60% { background-color: #d68cff; }
70% { background-color: #8cb5ff; }
80% { background-color: #8cffff; }
90% { background-color: #8cff8c; }
100% { background-color: #ffd68c; }

↑この子達を、 party に入れてあげる。

@-webkit-keyframes party {
    0% {
    -webkit-transform: rotate(0deg);
    background-color: #ffd68c;
  }
    10% { background-color: #8cffff; }
    20% { background-color: #8cff8c; }
    30% { background-color: #8cb5ff; }
    40% { background-color: #d68cff; }
    50% { background-color: #ff8cff; }
    60% { background-color: #d68cff; }
    70% { background-color: #8cb5ff; }
    80% { background-color: #8cffff; }
    90% { background-color: #8cff8c; }
    100% {
    -webkit-transform: rotate(360deg);
    background-color: #ffd68c;
  }
}

↑こんなかんじになった。

↓結果。

さいごに

  • めりーくりすます!
  • ドワンゴ Advent Calendarなのに、エンジニアっぽいことが書けなくてごめんね? でも気にしてない。
  • AngularJS にしようか、チームまねじめんとな話題にしようか悩んだ。
  • 来年もよろしくお願いいたします。

退職してフリーランスへ。

退職のお花。ありがとうございます。m(__)m

私はよく、黄色系のお花をいただくことが多い気がします。(^^)

入社/転職エントリーも記事にしてないのにアレですが、某社を退職しました。本日が最終出社日でした。(入社/転職エントリーを書かなかったのは、自分の絵が上手じゃないので、その会社の評判が落ちるんじゃないかと不安だったからです…!イラスト系なので。)

私はデザイナーとしてアサインしましたが、 業務の内容はデザイン以外も、、、(そもそもデザイナーの職種ってどっからどこまでなんだろう?って感じですが)ヒアリングから始まり、機能検討とか策定、マイルストーンぎめ、スケジューリングやチームビルディングみないなマネージメントめいたことや、布教や雑用など、様々なことをやらさせていただきました。

自分にいろんなことを挑戦させてくださった会社や仲間に感謝です。

次のステージなのですが、いったんフリーランスなんですが、お仕事する先は決まってて…そちらにフルコミットして頑張る所存です。(`・ω・´)

また、ちょっとした夢がありまして、それに向かって突っ走っていこうかと思っています。

今後共、どうぞどうぞ、よろしくお願いいたします。

とりあえず AngularJS いっぽめ

同僚のエンジニアさんが仕事の合間に AngularJS を教えてくれまして、自分でも調べながら〜なんですが、復習がてらメモメモ。

AngularJS とは

  • MVWフレームワーク
  • Model-View-Whatever と言われることが多いみたい。
  • View はテンプレートだと思ってもいいかも?

とりあえず、一歩目的なhtmlを作ってみる。

AngularJS をダウンロード

AngularJS — Superheroic JavaScript MVW Framework の「Download AngularJS 1」から min.js をダウンロードします

html作る

index.html 作ります。

<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
  <script src="js/angular.min.js"></script>
  <title>test angular</title>
</head>
<body>
  hoge
</body>
</html>

<html ng-app> って書いてあげます。
ng-app 以下で anglar 動かしちゃうわよー…的な。
View で宣言して、どーのこーのすると、 Model に 何か作っちゃう感じなのかなあ…とかとか。 (まだよく分からない)

AngularJS は VMW だとかメモ

jsフォルダの中に angular.min.js を入れてあげます。

作ったhtml見てエラー出てないか確認

なんとなくサーバーたちあげます。復習では python でやった。

$ cd project/test-ang/
$ python -m SimpleHTTPServer 8000

URLあくせす。

http://127.0.0.1:8000/

コンソールにエラー出てないのでOK。

ちょっと計算とかさせてみる

<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
  <script src="js/angular.min.js"></script>
  <title>test angular</title>
</head>
<body>
  <p>{{'コーヒー' + '牛乳' }} おいしいです</p>
  <p>1 + 2 = {{ 1 + 2 }}</p>
</body>
</html>

ちゃんと

1 + 2 = 3 

って表示されました!

今回はここまで。

if 文の練習…反対を出したい時

if( x != A || y != B ){
  z = C;
}

これの反対を作ろうとしたんですが、、「ふぁ!?!?」って混乱してしまって、
結局エンジニアさんに教えてもらいました。
情けないのでメモします。><


お題(isn't or isn't)

if( x != A || y != B ){
  z = C;
}

例えるなら
「みかん が好きじゃない」または「りんご が好きじゃない」人は【おっぱい大きい】

反対が欲しい、
つまり、 【おっぱい大きくない】 という結果を出したい場合。

パターン1(isn't and is)

if( x != A && y = B ){
  z = C;
}

つまり 「みかん が好きじゃない」且つ「りんご が好き」な人は【おっぱい大きい】

パターン2(is and isn't)

if( x = A && y != B ){
  z = C;
}

つまり 「みかん が好き」且つ「りんごが好きじゃない」人は【おっぱい大きい】

パターン3(isn't and isn't)

if( x != A && y != B ){
  z = C;
}

つまり 「みかん が好きじゃない」且つ「りんご が好きじゃない」人は【おっぱいは大きい】

パターン4(is and is)

if( x = A && y = B ){
  z != C;
}

つまり 「みかん が好き」且つ「りんご が好き」人は【おっぱい大きくない】


やったあ、【おっぱい大きくない】でたよおおお。。。

試しまくってやっと。。。

この考え方に慣れなくては。。。><


photo by RayMorris1

時代を感じるイラストが描かれた父母への手紙


子供の頃からイラスト描くのが好きな1973年生まれです。

実家で見つけたので晒してみる。
f:id:uniq:20151007201834j:image
お父さんの誕生日に描いたらしい。
なぜかCHA-CHA-CHAの歌詞が。
お父さんに「バージン気分CHA,CHA…」ってどういうことっすかね???
自分の誕生日プレゼント(ステレオ)を催促してます。

f:id:uniq:20151007202114j:image
こちらは父の日に送ったカード。
「カードでゆるしてチョンマゲ」だそうです。
やはり自分の誕生日プレゼントを催促するのを忘れない。

f:id:uniq:20151007202330j:image
父の日のカード。唐草模様で古風を演出。
「おじゃる」が意味不明。

f:id:uniq:20151007202515j:image
これは、お母さんの誕生日カードに描いたイラスト。
なぜかキャプテン翼。
腐に目覚めつつある頃かもしれない。
「清光」っていうのは、とうらぶではありません。弟の名前です。

とりあえず、こんなところで。