魔法少女サイト

これは、魔法少女になれなかった男の記録である。

ブログの移動をします。

ブログの移動をします。

突然ですが、ブログをnoteに移動します。

僕のブログのドメインがyuki540.hatenablog.jpと改名前の「yuki540」のままということもあり、「せっかくなので使うサービスを変えてみよう！」ということでnoteに移動しました。

これからの更新はそちらになりますので、このブログはこれ以降、更新しませんのでよろしくお願いします。

↓↓↓ 下記のリンクになります。

https://note.mu/yui540

人の優しさに触れた誕生日。

22歳になりました。

f:id:yuki540com:20181109173641p:plain

みなさんお久しぶりです。

大変私事なのですが、11/09が誕生日ということで22歳になりました。

せっかくの誕生日ということで、何かネット上でアクションを起こしたいと思い、あるサイトを公開しました。

はい。バーチャルニートのメンバーに入れてもらい、技術書典5で出したWeb本です。

元々は有償で公開していたものでしたが、もっとたくさんの人に「CSSアニメーションを使った自己表現」について知ってもらいたいという思いから、バーチャルニートのメンバーから許可をもらい、無償で公開させてもらいました。

🎉yozora.magical-girl.site🎉

で、プリン食べながらサイトを公開した後、すぐ寝る( ˘ω˘)ｽﾔｧ予定だったんですが.......

人の優しさに触れた

なんとバーチャルニートのメンバーのみんながサプライズで僕の誕生日サイトを作ってくれていました!?!?!?!?

これは...正直泣いちゃいました......

今までこんな嬉しいサプライズされたことなかったので......

ドワンゴのインターンシップで一緒だった、おりばー君と仲良くなり、それからおりばー君の学校の友達であるバーチャルニートのメンバーのみなさん達と一緒に技術書典に一緒に参加させていただいたりと、違う学校にも関わらず仲良くしていただいて、お世話になりっぱなしで感謝しても感謝しきれません....

これからも仲良くしていただける嬉しいです....🙇‍♂️🙇‍♂️🙇‍♂️

本当にありがとうございました！！！！

また、誕生日サイト上やTwitterでたくさんの方々のお祝いメッセージもいただき、本当に嬉しいです....

f:id:yuki540com:20181109185018p:plain

f:id:yuki540com:20181109185043p:plain

f:id:yuki540com:20181109185101p:plain

f:id:yuki540com:20181109185114p:plain

f:id:yuki540com:20181109185129p:plain

f:id:yuki540com:20181109185246p:plain

f:id:yuki540com:20181109185259p:plain

f:id:yuki540com:20181109185314p:plain

数年前までの僕では考えられないほど、たくさんの方々とコミュニケーションをとらせていただける環境になり、本当に生きててよかったです....

今まで一番印象に残った誕生日になりました！！！！

みなさん本当にありがとうございました！！！！

これからについて

で、僕のこれからの活動ですが、直近では年内に2つのWebサイト（サービスではない）を公開します。（もちろんアニメーションをたくさん使ったサイトを作りますのでお楽しみに！）

また、ElectronアプリとWebサービス、できればiOSアプリも公開できたらなと思います。

VTuberデビューについてですが....年明けまで待ってください....🙇‍♂️🙇‍♂️🙇‍♂️

そして、来年4月からは株式会社ピクシブに入社します。

ずっと入社したかった会社なので精一杯頑張ります！！！

働き始めても今まで通り個人の活動も空いた時間に続けていきますのでこれからもよろしくおねがします！！

ということで超私的な記事ですが、最後まで読んでくれてありがとうございました！

また、どこかでお会いしましょう！

『臆病な魔女は、また長い旅に出る-------------------』

お知らせ

Twitterのヘッダー、PCの壁紙にさせていただきました🎉

可愛い....

トムさん、ありがとうございました🙇‍♂️🙇‍♂️🙇‍♂️

f:id:yuki540com:20181109191835p:plain

f:id:yuki540com:20181109191854p:plain

由比ヶ浜結衣生誕2018非公式サイトを作った話

あいさつ

f:id:yuki540com:20180616154123p:plain

やっはろー、yui540だよ！

最近、暑くなってきましたが、みなさんいかがお過ごしでしょうか？

僕は最近、食パンにハマっていて四六時中、食パン食べてます。

特に超芳醇 4枚切りが美味しいので、みなさんもよかったら食べてみてください。

で、今回「由比ヶ浜結衣生誕2018非公式サイト」を作ったので、そのことについて書きたいと思います。

🎂 yui.magical-girl.site 🎂

はじまり

推しキャラがコロコロ変わる僕ですが、これからは由比ヶ浜結衣のみを推していくことを決めたのですが、あることに気がつきました。

「あれ？由比ヶ浜結衣って誕生日いつだっけ？」

あろうことか、推しキャラを誕生日を把握していなかったのです。

なので、「僕と誕生日近かったら嬉しいな〜」などと思いながら検索すると...

【参照: ピクシブ百科事典】 f:id:yuki540com:20180616161442p:plain

f:id:yuki540com:20180616161504p:plain

「うっ...もうすぐだ...（検索した日は、5/31）」

何かを買ってお祝いしたいと思いましたが、ニートの僕にはあまりお金がないので、自分なりに何かをして誕生日をお祝いすることにしました。

で、僕には簡単なサイト作るぐらいしか能がないので、由比ヶ浜結衣生誕2018非公式サイトを作ることにしました。

↓「作るぞ」という意思表明

つくる

↓一連の制作過程のツイートです。

まず、メインのイラストを準備する。

OGP画像を作る。

パート分けして、アニメーションを作っていく（SPでも同じように動くようにもする）

※よく質問されますが、僕が１からイラストを描いているのではなく、元の画像をパーツごとになぞって塗りつぶして作っているだけです。

まあ、いつも通り脳死のCSS Animation芸のサイトですね。

ソースコードが見たい方は、こちらにあります。

僕がよくやるCSS Animationのパターンを知りたい場合は、下の記事をご覧ください。

さいごに

出来は良くありませんが無事、6/18までにサイトをつくることができ、由比ヶ浜結衣の誕生日を祝ってくれる人達もいて良かったです。

このサイトをきっかけに「やはり俺の青春ラブコメはまちがっている。」をまた見てくれる人が増えてくれれば、なによりです。

みなさんも推しキャラの誕生日を祝うサイトを作ってみてはいかがでしょうか？

最後に、この場を使って、由比ヶ浜結衣というキャラクターを生み出し、命を吹き込んでくださった、

渡航先生・東山奈央さん・俺ガイル制作に関わった全ての方々に感謝します。

f:id:yuki540com:20180616154740p:plain

ニートに学ぶCSS Animation演出講座 4時間目

Web css アニメーション

あいさつ

f:id:yuki540com:20180503160414j:plain

どうもどうも、また会いましたね。風邪気味のyuki540です。

先日、東京に遊びに行ってきましたが体調不良により、２日で地元に帰ってしまいました。でも、めっちゃ楽しかったです！

また近々、東京にもう一回行くと思うので、今度は１週間ぐらい滞在したいです。

今回はどんな作る？

で、今回作るものですが、

↓ この花火(?)みたいな弾けた感じのものを作っていきたいと思います。

いろんなところで使えるアニメーションパターンだと思うので、ぜひ作ってみてください。

作ろう

最終的に出来上がるものはこちらになります。

はい。作っていきましょう。

マークアップ

今回は３種類の弾けるアニメーションを解説するので、.effect_type_1~.effect_type_3という風に要素を分けます。

僕はdivタグしか知らないので、クソマークアップに関しては指摘されても無視しますのでご理解ください。

<main class="stage">
  <!-- effect_type_1 -->
  <section class="effect effect_type_1">
    <div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div>
  </section>
      
  <!-- effect_type_2 -->
  <section class="effect effect_type_2">
    <div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div>
  </section>
      
  <!-- effect_type_3 -->
  <section class="effect effect_type_3">
    <div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div>
  </section>
</main>

スタイルをあてる

まずは、土台となる.stageのスタイルをあてていきましょう。

* {
  margin: 0;
  padding: 0;
}

/**
 * stage
 */
.stage {
  position: absolute;
  width: 100%; height: 100%;
  background-color: #D3C7C0;
}
.stage:before,
.stage:after { position: absolute; content: ""; display: block; }

.stage:before {
  top: 20px; left: 20px;
  width: calc(100% - 40px); height: calc(100% - 40px);
  border: dashed 5px #635256;
  border-radius: 30px;
  box-sizing: border-box;
  opacity: 0.3;
}
.stage:after {
  width: 400px; height: 400px;
  top: calc(50% - 200px); left: calc(50% - 200px);
  border-radius: 50%;
  background-color: #635256;
}

.stage:beforeで画面の周りに破線を引いて、.stage:afterで後々アニメーションの繋ぎで使う茶色のボールを作っています。

今回の重要なのは、.effect_type_1~.effect_type_3なので、.stageは好きなように装飾してもらっても大丈夫です。

次に.effect_type_1にスタイルをあてていきます。

/**
 * effect
 */
.effect {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  overflow: hidden;
}
.effect div {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.effect div:after {
  content: ""; display: block;
  position: absolute;
  opacity: 0;
}
.effect div:nth-child(1) { transform: rotate(0deg);   }
.effect div:nth-child(2) { transform: rotate(45deg);  }
.effect div:nth-child(3) { transform: rotate(90deg);  }
.effect div:nth-child(4) { transform: rotate(135deg); }
.effect div:nth-child(5) { transform: rotate(180deg); }
.effect div:nth-child(6) { transform: rotate(225deg); }
.effect div:nth-child(7) { transform: rotate(270deg); }
.effect div:nth-child(8) { transform: rotate(315deg); }


/*** effect_type_1 ***/
.effect_type_1 {
  top: calc(50% - 200px); left: calc(50% - 200px);
}
.effect_type_1 div:after {
  top: 5px; left: calc(50% - 20px);
  border-top: solid 70px #635256;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
  transform: translateY(130px);
}

.effectで共通の部分をまとめてスタイルをあてています。

400 x 400の円を作って、子要素を45degずつ回転してるだけですね。

.effect_type_1では三角形を弾けさせたので、borderで縦長の三角形を作っています。

↓ .stage:afterで隠れている&opacity: 0;で非表示になっているので、確認しづらいでしょうがこんな感じになってます。

f:id:yuki540com:20180503172606p:plain

また、初期状態ではtranslateYで中央に子要素を寄せています。

次に.effect_type_2にスタイルをあてていきましょう。

/*** effect_type_2 ***/
.effect_type_2 {
  top: 50%; left: calc(50% - 400px);
}
.effect_type_2 div:after {
  top: 0px; left: calc(50% - 40px);
  width: 40px; height: 40px;
  background-color: #8db3b1;
  border-radius: 50%;
  transform: translateY(170px);
}

↓ .effect_type_2は、中央から少し左下にズレた位置に配置して、弾けさせる子要素は円にしています。 f:id:yuki540com:20180503173957p:plain

次に.effect_type_3にスタイルをあてていきましょう。

/*** effect_type_3 ***/
.effect_type_3 {
  top: calc(50% - 400px); left: 50%;
}
.effect_type_3 div:after {
  top: 0px; left: calc(50% - 20px);
  width: 40px; height: 40px;
  background-color: #9994A6;
  transform: translateY(150px);
}

↓ .effect_type_3は、中央から少し右上にズレた位置に配置して、弾けさせる子要素は四角形にしています。

f:id:yuki540com:20180503174047p:plain

これでレイアウト的には完成です。

アニメーションさせよう

では、アニメーションさせていきましょう。

/*********************************************************************************
 *  animation
 *********************************************************************************/

/*** stage ***/
.stage:after { animation: hidden-ball 0.6s ease 0s forwards; }

/*** effect_type_1 ***/
.effect_type_1 div:after {
  animation:
    fadein 0.3s ease 0.5s forwards,
    show-type-1 0.6s ease 0.5s forwards;
}

/*** effect_type_2 ***/
.effect_type_2 { animation: rotate360 4s ease 0.6s forwards; }
.effect_type_2 div:after {
  animation:
    fadein 0.3s ease 1.1s forwards,
    show-type-2 0.6s ease 1.1s forwards;
}

/*** effect_type_3 ***/
.effect_type_3 div:after {
  animation:
    fadein 0.3s ease 1.7s forwards,
    show-type-3 0.6s ease 1.7s forwards;
}


/*********************************************************************************
 *  keyframes
 *********************************************************************************/
@keyframes hidden-ball {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(0); }
}
@keyframes show-type-1 {
  from { transform: translateY(130px); }
  to   { transform: translateY(-75px); }
}
@keyframes show-type-2 {
  from { transform: translateY(170px); }
  to   { transform: translateY(-40px); }
}
@keyframes show-type-3 {
  from { transform: translateY(150px) rotate(0deg); }
  to   { transform: translateY(-40px) rotate(270deg); }
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

単純なので説明する必要はないとは思いますが、一応説明しますと、

hidden-ballキーフレームで、.stage:afterをバイーンとした感じで画面から消します。

↓

次にshow-type-1, fadeinキーフレームで.effect_type_1 divを弾ける感じでアニメーションさせています。（よく使いそうなキーフレームは、fadeinのように細かく分けて、カンマ区切りでanimationプロパティに適用するようにすると、色々便利です）

↓

.effect_type_2 divも同じようにshow-type-2, fadeinキーフレームで弾けた感じでアニメーションさせますが、rotate360キーフレームで、.effect_type_2自体も回転させながら表示しています。

↓

.effect_type_3 divは、show-type-3, fadeinキーフレームで四角形が回転しながら、弾けたアニメーションをさせています。

↓

終わり

どうでしょう？上手く動きましたか？

上手くいかない方は、こちらのコードを参照しながらもう一度試してみてください。

さいごに

この記事を書いてる途中に気づきましたが、safariではborder-radius: 50%; overflow: hidden;をしても、円状に非表示してくれないみたいですね。

f:id:yuki540com:20180503181332p:plain

safariでは上手く動きませんが、アニメーションを作るときのヒントにでもなれば幸いです。

最後まで見てくれてありがとうございました。

できるだけ、簡単なものを作って記事に書いていく予定なので次回も見てくれると嬉しいです。

じゃーねー。

（FANBOX始めました。）

f:id:yuki540com:20180503181755p:plain f:id:yuki540com:20180503181817p:plain

専門学校に入学して3ヶ月で絶望し、退学してニートになった男の話

就活

はじめに

f:id:yuki540com:20180503150519p:plain

どーもーココロヤミ状態のyui540です😈

「ニートに学ぶCSS Animation演出講座書けよ！」って思う人もいるかもしれませんが、"Effective CSS Animation"って読み物を書いてpdfで無料配布する予定なので待っててね。

で、現在ニート(2018/04/10時点)の僕ですが、僕のことをあまり知らない人は「なんでニートなの？」「就職先はあるの？」「親は怒ってない？」「あんた頭大丈夫？」というようなことを思っている人が多いと思うので、そこらへんのことも説明しながら書いていけたらな思います。

あ、先に言っておくと、ピクシブ株式会社様から内定を頂いているので1年後にはニートを脱却します。

なんの根拠もなく、希望を持って入学した専門学校

僕は低学歴なので、大学に行く頭がなかったので専門学校に入学するわけですが、今思えばこの時点で僕にとっての悪夢は始まっていたのかもしれません。

希望を抱いていた僕は入学してすぐに、周り同級生や先輩などに「趣味でプログラム書いてる？」や「どんな言語使ってる？」「なんの技術好き？」というような質問を投げかけていました。（先輩には敬語使ってます）

でも、みんな口を濁してアニメの話（アニメ好きなのでそれはそれで楽しい）などに会話をそらされていました。

仕方ないので、学校内に開発サークルみたいな感じよくわからん集まりがあったので見学しましたが、そこでも結局、ほとんど開発していなくて過去の成果物が 当時の僕でも1時間半あれば、再現可能なwebページ でした。本当によくわからん集まりです。

この時点で僕は本当の意味で一人だということ悟りました。

※ 僕のワガママに付き合ってくれるいい友達はいます。彼にはこの場を使って感謝させていただきます。

なんのために通っているのかわからなくなった学校

入学して3ヶ月ぐらいで、ITパスポート, C言語検定 ２級を取って、並行で自分の好きなコードを書いたりしていました。（それ以降、資格は取ってません）

資格対策の授業は問題集をひたすらやるような感じだったので、先生はほとんどいてもいなくてもいい状態でした。

唯一の救いだと思っていたプログラミングの授業も酷いものでした（ここでは内容は言えませんが）

上記のようなこともあり、1年生の後半から〜3年生で退学するまで、ほとんど授業を聞いていませんでした。（僕はただの悪い生徒だったので、学生の皆さんはちゃんと授業聞きましょうね）

学校の同級生達とは違うやり方でやってみる

先輩達の就職活動の季節が来ると、「内定出た」など会話が飛び交っているので話を聞いてみると、学校にコネがある会社から内定を貰っている人たちばかりでした。（その会社をディスってる訳ではありません）

ただ、その会社で働きたいから入社するのではなく、「内定出た！これで就活しなくて済む！」という人たちが大半でした。

そこで感じたのが、「この学校の雰囲気に流されたままだと、入りたい会社に行くことは夢のまた夢になってしまう」でした。

周りの同級生たちは、授業以外でプログラムを書くことはなく、資格勉強も仕方なくやっているという感じでした。

なので当時、僕は授業と資格を捨てて、自分が書きたいコードを書いて、それをネットに公開していくことを決めました。

satella.io開発の始まり & 地獄の日々 & 反撃

で、当時のものはポートフォリオには載ってませんが、「コメントが流れるチャットサイト」をcometを自前で実装して作ったり、「YouTubeプレイヤー上に絵を描けるサイト」を作ったり、niconicoのAPIを利用して色々遊んでいました。

それからしばらくして、たまたまLive2Dの紹介動画（Euclidの試作版だったかな？）をみて、衝撃を受けました。

そして、「技術ってこういう使い方もできるんだ」と感じ「自分も同じようなものを作ってみたい」と思い、開発を始めたのはいい思い出です。

↓ 最初は3D技術は使わず、canvas2Dで各パーツに動きの誤差を与えながら、それっぽく動かしていました。


キャラクターをスマートフォンで動かせるサービスを作ってみた。

で、これの後継となるsatella.ioが今では学生時代の一番重要な作品となりました。（現在公開しているものはβ版ですが）

ですが、satella.ioの開発中のモチベーションは壊滅的でした。

というのも、教師達からは「君には作ることができない」「それはIT学科が作るものじゃない」「すでにそんなソフトは出回っているので作る意味はない」といった言葉をかけられきたからです。

また、周りに技術的な相談をする人もいなく、そもそも動く状態にまで持っていけるのかわからないまま開発を続けるのは非常に苦しかったです。

それでも、開発を続けられたのは「可愛いキャラをこの手で動かしてみたい」という気持ちがあったからでした。

そして、結果的に一応が動く状態にまで持っていくことができ、学校の作品発表会でも、たくさんの方から賞賛の声をいただきました。

f:id:yuki540com:20180410151042j:plain

f:id:yuki540com:20180410151055j:plain

また、僕のことを批難していた教師達もこれを機に僕の開発を褒めるようになりました。（僕の中では反撃に成功したと思っています）

インターンシップへの参加が人生のターニングポイントになった

それから先は、インターンシップに参加することを目標にし、結果的に面白法人カヤック, ドワンゴ, ピクシブのインターンシップに参加しました。

今までの学校生活と違い、僕よりも圧倒的にレベルの高いインターン同期の人たちや、優秀なメンターの方々に囲まれて、何かができることに感動したことを今でも覚えています。

そして、インターンシップをきっかけにピクシブ株式会社様から内定を頂くことができ、僕にとってインターンシップへの参加が人生のターニングポイントとなりました。

その後

で、内定が出たのは嬉しいのですが、あと一年、学校に通わないといけませんでした（4年制なので）

ここ半年近く体調も良くないことと、「このまま学校に通い続ける意味はない」という結論に至り、退学し、現在ニートです。（一年後ちゃんと働きます）

親は、ちゃんと就職先も見つけて、一年分の学費も浮くので逆に喜んでくれています。（親もピクシブに入社することに大賛成しているので）

僕自身は、この一年を自分の作りたいものや活動に使っていく予定です。（最近はcss animationネタが多いですが）

伝えたかったこと

「就職するために頑張ること」が書かれた記事をちらほら見かけたので、それに乗っかり書きました。

で、伝えたかったのは "僕みたいな低学歴で学校を退学したニートでも 、周りに自分と同じ志を持った人が一人もいなくても" 夢を叶えることができるということです。

僕と同じような境遇の人で、「今の状況を変えたいけど、怖くてうまく行動できない」という人はぜひ、いっぱい何か作ったり、活動したりしてどんどん公開していってみてください。

もしかしたら、今の状況が何か変わるかもしれません。

ちょっと長くなりましたが、これが僕の専門学校入学から〜退学までのお話です。

つまんなかったかもしれませんが、最後まで読んでくれてありがとうございます！

じゃーねー。

f:id:yuki540com:20180410155837p:plain