読者です 読者をやめる 読者になる 読者になる

Uni-Q blog

うにきゅう ぶろぐ

さよならフリーランスの私。 Lang-8 に転職しました。

会社

1月とちょっとだけしかフリーランスしなかった。。

表題の通り、転職いたしました。 私がくしゃみをすると、「Bless you」って声かけられちゃうようなオフィスです。

いいなと思った理由はいくつかあるのですが、一番印象として残ってるのをあげるとすれば、会社が持ってる価値観に共感できる部分が多かったところでしょうか。

lang-8.jp

チームメンバーに載せていただきました。となりのiOSエンジニアさんをギロリと見てる感じ。

がんばります。仕事だけでなく語学も…!

f:id:uniq:20170210170658j:plain

2016年出会ってよかったもの

ぽえむ

中には「買ったもの」じゃないものも含まれるので「出会ってよかったもの」としてメモ。2016年なので、6個あげてみる。

ご近所のヨガ教室

そもそも座禅できる所を探していたのですが、たまたま引っ越した近くにヨガ教室があり、チラシ的なものをみると、いわゆるダイエットとか、そういうのでなく、ヨガの根本的なところを意識して、マインドフルネス的な…。まあ運動不足だしちょっと体験してみようかとやってみたら、かなり良かった。まだヨガらしいことは出来てないと思いますが。。。

「私っていまどんな感じだろ?」って自分自身に耳を傾ける感じ。

体もほぐされる感じ〜。たまに、ひぃーってうめき声あげてます。

教えてくれる内容や、いろんなものの捉え方が、私に合ってるというか。 同じ年ぐらいの方が個人でやられてて、それも勇気わきます。

糖質を意識した食事しつつ筋トレ

ヨガで調子良くなってきたので、筋トレしたり、食事に気を使ったり。体力ついてきたかなあ、と。

痩せたかどうかは???w

大きめ冷蔵庫

1人ぶん以上…っていうか、ファミリー向けな冷蔵庫を、親からお下がりいただきまして。。 作り置きしまくりで重宝する。

minneとかcreemaとか手作りサイト

売ったりはせずに買ってるだけですが…

「こういったものが欲しいんだけど、どこにも売ってないなあ」というのがあるので重宝してます。

スタバのボトル

よくスタバで、本日のコーヒーのアイスコーヒーか、ソイミルクを入れてもらってます。

パジャマ

部屋着をやめてパジャマにしました。 部屋では、外に出るようなカッコしてます。寝るときにパジャマに着替える感じ。服をだいぶ手放すことが出来ました。 服が減ると…

  • 管理する手間が減る
  • ものが減って部屋が広く感じる

こんな効果が。


以上でございます。

年越しそばを十割で少しだけいただいて、やっと年越し気分…。

css で ParrotアニGIF みたいなの

CSS

はじめに

これは 第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 を教えてくれまして、自分でも調べながら〜なんですが、復習がてらメモメモ。

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 

って表示されました!

今回はここまで。