グリッジ加工を作る - AfterEffects

f:id:utr066:20200621081932g:plain

今回作っていくのはこれ。AfterEffectsでグリッジ加工を作っていこうっていうやつね。こういうの作る時ってなんか外部のプラグイン使ったりするのかな?って思ったりするけど、標準エフェクトのみでできる。ちなみに文字のフォントは外部のやつを使ったから、自分の使いたいものが標準で搭載されていなかったら色々調べてインストールしてみるといい。

作成の流れ

作成はこんな流れでいく。

  1. 背面作成
  2. 文字作成
  3. グリッチエフェクト作成
  4. グリッチエフェクト適用
  5. 文字色調整

大事なのはグリッジエフェクトの作成とそれを適用するところ。むしろそこさえわかっていればOK。ではいってみよう。

背面作成

まず、背面だけどこれはなくてもいい。作る時に文字だけだとちょっと寂しいなあって思ったから後ろに三角形を置いただけ。凝るなら色々作ってもいいかもしれない。

f:id:utr066:20200621083137p:plain

三角形の作り方は以下。

  1. シェイプレイヤー作成
  2. Polygon tool選択
  3. pointsを5から3に変更

polygon toolで図形を描くとデフォルトでは頂点が5つの五角形ができるんだけど、それを三角形にするために頂点の数を3つにする。頂点の数の変更だけがちょっと分かりづらいね。五角形を作ったら、レイヤーをいじるとpointsっていうのが出てくるからそれを3に変更すれば三角形になる。英語版のAfterEffectsを使っているから、日本語版だと表記がちょっと違うだろう。

f:id:utr066:20200621083215p:plain

「polygon tool使って頂点の数を変更する」っていうのだけ頭に入れておけばいける。

文字作成

別に文字じゃなくても、グリッジで表示させたいものを追加すればいい。今回は数字でいくね。

f:id:utr066:20200621083749p:plain

グリッジでよくあるRGBの色をちょっとずらしたような加工は一番最後にやっていくよ。

グリッジエフェクト作成

グリッジエフェクトは新しくコンポジションを作って、そこで作っていく。

  1. コンポジション作成
  2. グリッジエフェクト作成
  3. 2で作成したグリッジエフェクトを適用する

新しくコンポジションを作ったら、新しく平面レイヤーを追加しよう。

f:id:utr066:20200621083932p:plain

追加したら、このレイヤーに「Fractal noise」っていうエフェクトを加える。

f:id:utr066:20200621084101p:plain

  • Noise Type・・・Block
  • Scale Width・・・4000
  • Scale Height・・・600

値はこんな感じに設定しよう。「Uniform Scaling」のチェックを外さないとWidthとHeightを別々で調整できないから外してから調整。値は色々変えてみるともっとしっくりくるのがくるかもしれないぞ。

f:id:utr066:20200621084320p:plain

変更するとこんな感じになるんだけど、このままだと静止画でしかない。後にエフェクトとして使うには動かしたいからtimeの値をいじる。Evolutionをaltキーを押しながらクリック。

f:id:utr066:20200621084452p:plain

f:id:utr066:20200621084533p:plain

「time*3000」としよう。

これで再生してみると、ブロックが流れていくようなものができる。

f:id:utr066:20200621084701g:plain

これをさっき作ったシェイプと数字があるコンポジションに合成していくよ。

グリッジエフェクト適用

さっき作ったものを一番最初に作ったコンポジションに合成していこう。流れとしてはこんな感じ。

  1. 作成したグリッジエフェクトを最初作ったコンポジションに取り込む
  2. Adjustment layer(調整レイヤー)追加
  3. Displacement Map追加
  4. Displacement Mapの値を調整

まずは、さっき作ったものを取り込む。 f:id:utr066:20200621085047p:plain

そしたらAdjustment layerを追加。このレイヤーにDisplacement Mapを適用しよう。

f:id:utr066:20200621085218p:plain

  • Displacement map layer・・・作成したブロックでゅるるるるのコンポジション

いじるのは以下の値だけど、これらをいじるとどのぐらい適用の幅を持たせるのか調整することができる。値をいじってみると分かりやすい。

  • Max Horizonal Displacement
  • Max Vertical Displacement

あとはこのレイヤーを切り取るなりして、適当な箇所に複製する。

f:id:utr066:20200621085523p:plain

同じパターンだとつまらないから、以下の値を変えて置いておくと良い感じになる。

  • Max Horizonal Displacement
  • Max Vertical Displacement

文字色調整

文字の色をちょっとずらした加工を加えるけど、これは単純。

  1. 既存のテキストレイヤーを複製
  2. 色を変更
  3. 位置をちょっとずらす
  4. 全てのテキストレイヤーのBlending ModeをScreenに変更

ブレンディングモードをスクリーンにしないと、文字色が一番上のテキストレイヤーの色だけになってしまうからね。作ったら再生してみると、文字色が異なるものが動くはず。

完成

ここまでやったら完成。もっとグリッジが生きるようなロゴやテキストなんかだとかっこいいかもね。

f:id:utr066:20200621081932g:plain

Nuxt.js・Go・Mysqlのアプリケーションをdocker-composeで作る

Nuxtとgoのアプリケーションをdocker-composeで作っていこうと思う。以前、Nuxtの方は作ったからそれを元に作っていこう。

www.y-techmemo.work

ディレクトリ構成

ディレクトリ構成はこうしよう。backendとかfrontendディレクトリにそれぞれのソースコードが入るイメージ。

├── backend
│   └── Dockerfile
├── docker-compose.yml
└── frontend
    └── Dockerfile

ベストプラクティス的にはダメだけど、とりあえず動かす事が目的だから簡単にいきたい。

ほとんどの場合、空のディレクトリに個々の Dockerfile を置くのがベストです。そうしておけば、そのディレクトリには Dockerfile が構築に必要なファイルだけ追加します。

Dockerfile のベストプラクティス — Docker-docs-ja 1.9.0b ドキュメント

あと、goのアプリケーションからdbに接続することを想定するからmysqlのコンテナも作る。postgresはあまり好きじゃないんだ・・・

Nuxtアプリケーションを作成する

buildで指定するDockerfileの場所を変更した。

// frontend/Dockerfile

version: '3'
services:
  nuxt-app:
    # Dockerfileの場所
    build:
      context: ./frontend
      dockerfile: Dockerfile
    working_dir: /frontend
    command: yarn run dev
    # ホストOSとコンテナ内でソースコードを共有する
    volumes:
      - ./frontend:/frontend
    # コンテナ内部の3000を外部から5000でアクセスする
    ports:
      - 5000:3000

別にcontext使わなくても、builddockerfileで動かすことできるけど、contextではGitリポジトリのURLを指定する事ができるから、まあ柔軟にできる感はある。

docs.docker.jp

書いたら、nuxtのアプリケーションをcreate-nuxt-appで作る。

$ docker-compose run --rm nuxt-app npx create-nuxt-app

色々聞かれるから、適当に回答しておこう。こんな感じにしておいた。

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in .
? Project name frontend
? Project description My impeccable Nuxt.js project
? Author name 
? Choose programming language TypeScript
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript @nuxt/typescript-runtime
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

作成が終わったら、frontendディレクトリ配下にnuxtのファイル群ができているはず。

goアプリケーションを作成する

Nuxtのアプリケーションの作成は終わったから次はgoのアプリケーションをdocker-composeで書く。

// backend/Dockerfile

# 使用するGolangのイメージを指定する
FROM golang:1.14.2-alpine
ENV GO111MODULE=on

# 必要なパッケージなどなどをインストールする
RUN apk update \
    && apk add --no-cache git

EXPOSE 8080

docker-compose.ymlには新しくgo-appっていうservice名で作る。nuxtアプリケーションの記述の下に書いていく。

// docker-compose.yml

  go-app:
    build:
      context: ./backend
      dockerfile: Dockerfile
    working_dir: /backend
    # docker-compose run実行時に実行される
    command: go run main.go
    volumes:
      - ./backend:/backend
    ports:
      - "8080:8080"

docker-compose upで起動したらgoのアプリケーションを動かしたいからcommandにgo run main.goを指定。なので、main.goをbackendディレクトリ配下に作る。

// main.go

package main

import (
    "fmt"
    "net/http"
)

func handler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Hello, World")
}

func main() {
    http.HandleFunc("/", handler)
    http.ListenAndServe(":8080", nil)
}

これで、docker-compose upしよう。serviceを作る時にgo-appという名称で作ったから、go-app指定。

$ docker-compose up go-app

Hello, Worldが出てきますね。

f:id:utr066:20200412135957p:plain

mysqlをdocker-compose.ymlに記載する。

さっきまででNuxtとgoのアプリケーションはdocker-compose.ymlに書いたけど、データベースは作っていない。goからはデータベース使う想定だから、mysqlのコンテナを作ろう。docker-compose.ymlに追加する。

// docker-compose.yml

  db:
    image: mysql:5.7
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: mysql_dev
      MYSQL_USER: U
      MYSQL_PASSWORD: passw0rd
    ports:
      - "3306:3306"

起動してみよう。

$ docker-compose up db

起動したらmysqlに接続できるか確かめる。

$ docker-compose exec db bash
$ mysql -uroot -p
パスワードが聞かれるからMYSQL_ROOT_PASSWORDで指定したrootと入力

$ show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| mysql_dev          |
| performance_schema |
| sys                |
+--------------------+

入れました。

goからmysqlに接続できるようにする

必要なコンテナは揃ったから、次はgoのアプリケーションからmysqlに接続できるようにする。 docker-compose.ymlのgo-appにdepends_on: -dbを追加。

  go-app:
    build:
      context: ./backend
      dockerfile: Dockerfile
    depends_on:
      - db
    working_dir: /backend
    # docker-compose run実行時に実行される
    command: go run main.go
    volumes:
      - ./backend:/backend
    ports:
      - "8080:8080"

コードをいじる前に、適当にテーブルとレコードを作っておく。とりあえずusersテーブルにnameカラム作って入れておこう。

$ docker-compose exec db bash
$ mysql -uroot -p
パスワード入力
$ use mysql_dev
$ create table users (id int, name varchar(255));
$ insert into users (id, name) values (1, "U");
$ select * from users;

ここで作ったレコードをgoでselectするようにする。

mysqlに接続するためのパッケージをimportするけど、今回はgo mod使うからbackendディレクトリで以下コマンドでファイルを作る。

$ go mod init backend

そしたら、main.goファイルをいじろう。mysqlにつなげるか確認するだけのコードを書く。

package main

import (
    "fmt"
    "net/http"
    "database/sql"
    "log"
  
    _ "github.com/go-sql-driver/mysql"
)

func handler(w http.ResponseWriter, r *http.Request) {
    db, err := sql.Open("mysql", "root:root@tcp(db:3306)/mysql_dev")
    if err != nil {
        log.Fatal(err)
    }
    defer db.Close()

    var name string
    err = db.QueryRow("SELECT name FROM users WHERE id = ?", 1).Scan(&name)
    if err != nil {
        log.Fatal(err)
    }
    fmt.Fprintf(w, name)
}

func main() {
    http.HandleFunc("/", handler)
    http.ListenAndServe(":8080", nil)
}

これでdocker-compose upで立ち上げてさっきmysqlにinsertしたレコードのnameが表示されればいいですね。

$ docker-compose up go-app

f:id:utr066:20200412145812p:plain

OK。

Nuxtとつなげる

goのアプリケーションからmysqlにつないでnameを取得できたけど、まだnuxtからは確認できない。Nuxtとgoをつないでnuxtアプリケーションの画面上にnameが表示されるようにしよう。Nuxtではjsonで情報を受け取りたいから、goでjsonを返すようにする。

package main

import (
    "net/http"
    "database/sql"
    "log"
    "encoding/json"
    _ "github.com/go-sql-driver/mysql"
)

type User struct{
    Name string `json:"name"`
}

func handler(w http.ResponseWriter, r *http.Request) {
    db, err := sql.Open("mysql", "root:root@tcp(db:3306)/mysql_dev")
    if err != nil {
        log.Fatal(err)
    }
    defer db.Close()

    var name string
    err = db.QueryRow("SELECT name FROM users WHERE id = ?", 1).Scan(&name)
    if err != nil {
        log.Fatal(err)
    }

    user := &User{
        Name: name,
    }
    res, err := json.Marshal(user)

    if err != nil {
        log.Fatal(err)
    }

    w.Header().Set("Content-Type", "application/json")
    w.Write(res)
}

func main() {
    http.HandleFunc("/", handler)
    http.ListenAndServe(":8080", nil)
}

確認するとjson形式。

f:id:utr066:20200412151652p:plain

これをNuxtで受け取れるようにする。

$ yarn add @nuxtjs/axios

nuxt.config.jsのmodulesにaxiosを追加。

  modules: [
    '@nuxtjs/axios'
  ],

index.vueをいじる。modeにuniversalを指定しているからSSRでやる。async asyncData内でaxiosを使ってapiを呼ぶかな。画面上には取ってきたnameを表示させる。

<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        {{ user.name }}
      </h1>
      <h2 class="subtitle">
        My impeccable Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green"
        >
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Logo from '~/components/Logo.vue'

export default Vue.extend({
  components: {
    Logo
  },

  async asyncData({ app }) {
    try {
      const res = await app.$axios.$get("http://go-app:8080")
      console.info(res)
      return {
        user: res
      }
    } catch(error) {
      // エラー処理
    }
  }
})
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

U表示されてるね。TypeScriptのビルドには失敗するだろうからちゃんとやんないといけないけど、とりあえずの表示はおk。

f:id:utr066:20200412160137p:plain

コード云々は置いておいて、大まかな流れはまあこんな感じできっとできる。

docker-composeでNuxtアプリケーションを作成する

ふと、docker-composeを使ってNuxtのアプリケーションを作ろうと思ったから書いておこう。やるのはdocker-compose upでNuxtアプリケーションを立ち上げるところまで。前のプロジェクトでKubernetes使ってNuxtの開発していたからKubernetes使ったバージョンもやりたいな。

Nuxtアプリケーションのディレクトリ構成

ディレクトリ構成はこうしよう。

.
├── Dockerfile
├── docker-compose.yml
└── src

src配下にNuxtのファイルが入るイメージ。srcディレクトリを置いているのは、単純に破棄しやすいから。トップのディレクトリ配下にNuxtアプリケーションのコードがあると、消したい時なんかにちょっと不便。だからdocker-composeのvolumesではsrcを指定するよ。

Dockerfileを作る

まずはDockerfile。これだけ。

# イメージ指定
FROM node:12.13.0-alpine

EXPOSE 3000
ENV HOST 0.0.0.0

# コマンド実行
RUN apk update && \
    apk add git && \
    npm install -g @vue/cli nuxt create-nuxt-app

docker-compose.ymlを作る

docker-comppose.ymlもこれだけ。

version: '3'
services:
  nuxt-app:
    # Dockerfileの場所
    build: .
    working_dir: /src
    command: yarn run dev
    # ホストOSとコンテナ内でソースコードを共有する
    volumes:
      - ./src:/src
    # コンテナ内部の3000を外部から5000でアクセスする
    ports:
      - 5000:3000

docker-composeでcommandを指定するのかDockerfileでCMDを指定するのかっていうのをちょっと迷うけど、docker-compose upを打った時に実行したいからdocker-compose.ymlにcommandを記述している。

ja.stackoverflow.com

Nuxtアプリケーションを作成する

nuxtアプリケーションの作成をcreate-nuxt-appコマンドで作成する。作成したら立ち上げよう。

$ docker-compose run --rm nuxt-app npx create-nuxt-app

どんな設定にするか色々聞かれるから、答えてあげよう。この時点でTypeScriptを選択できるようになったんだね。TypeScriptでやりたいからTypeScriptを選択しておいた。runtimeも以前TypeScriptを使った時には@nuxt/typescript-runtimeを使ったから、それを選択。

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in .
? Project name nuxt-app
? Project description My transcendent Nuxt.js project
? Author name me
? Choose programming language TypeScript
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript @nuxt/typescript-runtime
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, 
<i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i
> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all
, <i> to invert selection)

全て回答するとアプリケーションが作られるぞ。TypeScript選択するとnuxt.config.jsonにbuildModule追加してくれたり、tsconfig.json作ってくれるのか。以前 JavascritpのものをTypeScriptに途中からした事があるけど、最初からやるとこんな楽なのか・・・

アプリケーションが作られたらsrc配下に色々ファイルが作られる。作られたら起動してみよう。

$ docker-compose up

docker-compose.ymlのportsで- 5000:3000と指定しているからhttp://localhost:5000/でアクセス。ビルドが終わったら、nuxtの画面が表示されるはず

f:id:utr066:20200412113215p:plain

ProcessingとPhotoshopを組み合わせて球体を合成する

Processingで作ったものをPhotoshopに取り込んでいきたい。っていうのを今回はやろう。

Processingで球体を作る

まずはProcessingで球体を作るコードを書く。

float radius = 150;
float step = 0;
float velocity = 0.05;

void setup(){
  size(600, 400, P3D);
}

void draw(){
  background(255);
  translate(width/2, height/2, 0);
  rotateY(frameCount * 0.01);
  
  for(float i = 0, p = 0; i <= 180; i++, p += step){
    float theta = radians(i);
    float phi = radians(p);
    float x = radius * sin(theta) * cos(phi);
    float y = radius * sin(theta) * sin(phi);
    float z = radius * cos(theta);
    
    strokeWeight(4);
    point(x, y, z);
  }
  step += velocity;
}

これを実行するとこんな感じ。

これをPhotoshopに取り込んでいく。

Photoshopに取り込む

Photoshopは画像を加工するイメージだけど、タイムラインを使えば動画を取り込むこともできる。背景には画像を入れよう。

f:id:utr066:20200411121727p:plain

画像を入れたら、ここにさっきprocessingで作った球体の動画を取り込む。

f:id:utr066:20200411121951p:plain

背景が白だけどこれを透明にしたいから、ブレンディングモードを変更しよう。球体を形作っている点の色を白色にしたいから「徐算」を選択。点の色を黒色にしたかったら「乗算」で。

f:id:utr066:20200411122131p:plain

あとは、明るさを調整したり色をブラシで整える。好きな色でいいんじゃないかな。今回は白色と青色を使っている。

f:id:utr066:20200411122542p:plain

適当に人物の写真なんかを合成して完了だ。

f:id:utr066:20200411123142g:plain

www.youtube.com

Photoshopでネオン文字を作成する

今回はPhotoshpネタでいこうかな。Photoshopでネオン文字を作るってことをやる。作るのはこれ。

f:id:utr066:20200410184024j:plain

まずはPhotoshopを起動です。起動したらまずは背景を取り入れる。今回はレンガっぽい画像を背景に置いておいた。背景がそれなりに暗くないとそれっぽくならないから暗くする。

f:id:utr066:20200410184228j:plain

別に暗くするやり方は何でもいい気がする。調整レイヤーで明るさいじっても、新しく黒いレイヤー追加して透明度をいじっても好きな方法でやってくれ。 明るさをいじったら、次は文字を入れていく。

f:id:utr066:20200410184550j:plain

最終的にネオンっぽくするんだけど、そのときに文字のフォントが微妙だと何とも言えないから、それっぽく見えるフォントを使おう。今回使っているフォントは「Library 3 am」っていうフォント。

www.dafont.com

文字をこのまま光らせるような加工してやってもいいんだけど、もうちょいいじる。選択ツールで文字を選択。

f:id:utr066:20200410185450j:plain

選択したらこの選択した部分の点線に沿って線を入れたい。その線で文字をつくるというわけさ。新しくレイヤーを追加してテキストレイヤーは目の部分をクリックして見えないようにしてしまおう。

f:id:utr066:20200410185956j:plain

右クリックで「Storke」をクリックして線を描く。英語版のPhotoshop使っているから表記はStrokeだけど日本語なら何だろう、きっとそれっぽいのがあるはずだ。色は白色にしよう。

f:id:utr066:20200410222430j:plain

そうするとこんな感じになる。 f:id:utr066:20200410222435j:plain

これを加工していこう。BlendingOptionで以下の項目をいじる。

  • InnerGlow
  • OuterGlow
  • DropShadow

HardLightやVividLightにして値を調整するのがいいんじゃないかな。

f:id:utr066:20200410223445j:plain

後はレイヤーを追加してブラシで色を加えていく。

f:id:utr066:20200410223239j:plain

ブレンディングモードを色々変えてやってみるといいです。 文字の端にもブラシでちょっと光らせようかな。

f:id:utr066:20200410223848j:plain

適当にOpacityでもいじって調整していく。

f:id:utr066:20200410223852j:plain

後は諸々ブラシで良い感じになるように加えていく。

f:id:utr066:20200410224338j:plain

ブラシで色を加えてBlendingModeやOpacityを調整したら完成だあ。

f:id:utr066:20200410224142j:plain

そういえば、ネオン文字は日本語のPhotoshopを使った動画もあったな。ちょっと作り方は違うけどこっちの方が見やすいかもしれん。

文系エンジニアはきつい?無理?新卒で入社した自分の体験を書いていこう

今はそうでもないのかもしれないけど、前は「文系エンジニア」っていう言葉をよく聞いた気がする。あんまり知らないけど、」「文系だけどエンジニア」みたいなニュアンスを含んでいるのかな。「文系からエンジニアになれた私すごいだろ!」「文系だけどエンジニアになってしまった。。。」「文系からエンジニアになれるのか?」、どれだろうか・・・。まあいいや、今回はこの文系+エンジニアみたいなことを書こうと思うけど、自分は文系からエンジニアになれるのかっていうこと書いていこうと思う。「自分文系なんだけど、エンジニアになりたいんだよなあ・・・」っていう人はまあ見ていってくれ。自分も文系からエンジニアになった身だ。

文系からエンジニアになれるのか

なれるに決まっているだろう。自分がそうだったからなれる。自分は東京の大学の経済学部を出て、新卒でWebエンジニアとして就職した。といってもどういう流れでエンジニアになったのかっていうのを書かないとわからないよね。ちょっと書いていきたいと思う。何から書こうかと思ったけど、エンジニアとして就職する前のことから書こう。

就職に迷走する

自分は当時2016卒予定で就職活動をしていたんだけど、早めの段階で脱落しました。あの頃の就活時期っていつだったっけなあ。

f:id:utr066:20200407181843p:plain

【2016卒】就活の開始時期と内定時期はいつからか?

2016年は面接選考の解禁が4月1日から8月1日に後ろ倒しになっていたみたいですね。なんであんまり覚えていないかって自分周りと比べるとちゃんと就活やっていなかったんだよな。。。というのも就活というものの流れに自分は乗れなかったんだ。周りが黒いスーツに身を包んで説明会に行って面接に行く、自分もその流れに乗って最初はちょっとやっていたんだけどどうも乗り切れなくて途中で辞めた。就活のあの独特の流れというか空気が気持ち悪くて、それに自分がこの先働くイメージが湧かなかった。

この先何をして生活していくのかなーって考えてた気がするけど、分からない。そもそも働きたくないし、何をしてお金を稼ぎたいかって考えても。。。そうして自分は就活を辞めたよ。

とはいっても就活も少しはした。某NTT系の会社でインターンに参加したり、説明会なんかもいったりした。けど、いざ就活となると何をしていいのか分からない。自分はいったい何をしたいのか。

そしてプログラミングの勉強を始めた。なんでプログラミングを選んだのかは今やあんまり覚えていないんだけど、自分は何か作るのが好きみたいだし、大学時代にワードプレスなんかでサイトを作って運営していたりしたから、そういったことなら楽しいかなーなんて思ったりしたのかな。この先は、どうやってプログラミングを学んでいったのかっていうことを書いていくよ。

プログラミングスクールに通う

独学でプログラミングを学ぶのは効率が悪そうだったからプログラミングスクールに通った。通ったのはテックキャンプ。今や社長もYoutubeやっていたりして従業員数も多いけど、自分が通い始めたときなんか従業員数なんて10~20人ぐらいだったんじゃないかな。当時の学生料金が確か7,8万だったんだけどそれを払って通うことにした。最初はわからないこといっぱいあったけど、そんな時はメンターが優しく教えてくれてね。カリキュラムを進めて進めてプログラムを書けるようになっていったよ。その頃、周りは皆就活終えて最後の学生生活に本気を出していたんじゃないかな。自分は学校前なんかにスクール行ったりして勉強してた。勉強する環境があるっていいよ。

インターンを始める

プログラミングスクールで学んだあとは某企業でエンジニアインターンを始めた。プログラミングもうちょっとやりたくなってさ。スキルを身に着けるなら周りにできる人がいる環境にいる方が確実に良いじゃないですか。そう思ってそこからプログラミングの勉強を続けて、そうやっていったらいつの間にか大学の2016年の卒業式がきた。

皆卒業する

2016年の卒業式、自分は卒業しない卒業式だ。一応行った、スーツを着て。皆はこれから社会に出て働くらしい。俺は周りのそのスピードについていけなかったよ。それなりに写真を撮ったりしたことは覚えているけど、その時何を考えていたかはあんまり覚えていないなあ、最後そのまま普通に家に帰ったわ。

変な目で見られるが気にするな

思い返すと周りに自分みたいな人いなかったし、この先何すんの?とかそりゃ聞かれる。後輩からは変な目で見られる。不安だったような気がしなくもない、自分1浪1留っていうのもあったしね。でもまあ同じような状況の人いるかもしれないけど気にするな。たいしたことはない。むしろ周りの流れに合わせないで自分で考えて選んだんだから誇りを持ちたまえ。自分で考えた結果ならきっと後悔はないさ。

当時就職した人今何しているんだろうな。文系だったからか金融業界や保険業界、メーカーなんかに就職する人が多かったけど、たまに会うときはよく上司の愚痴を聞いたり、会社のブラックさを聞いたりしたぞ。。まじで就職って怖いよな。。。

2017年は就活をする

皆が卒業しても自分のやることは変わらん。インターン先で今までと同様に働いてプログラミングスキルを身に着けていく。エンジニアとして就職するかあ、と思ったからこの年は就活をそれなりにした。SIerとWeb業界でエンジニアとして面接を受けてね。何社受けたかは忘れたけど、3社から内定をもらってその中の一つの企業に入社することにした。2016年はやる気もなく、内定ももらってなかったけどそれなりに普通にやれば内定は取れるっぽい。

プログラミングを学んでそのままエンジニアとして就職したけど、プログラミングを学んでから「あー、これ自分に向いてないわ・・・」ってなっていたら自分なにをしていたんだろう。また何か別の道を模索していたのかもなあ。

エンジニアとして就職する

まあそうしてエンジニアとして就職したわけです。2年遅れの社会人デビューですよ。2年遅れってほかにいるの?って感じだけど、周りには院に行って留年している人もいるし、海外からきている人もいるしで自分より年上の新卒なんて普通にいる。みんないろいろあるみたい。就職した会社では最初に研修して徐々に業務に入っていくっていうよくあるそうなスタイルだったよ。

1年で 退職する

そんな感じでエンジニアとして就職したんだけどね、1年で辞めた。浪人して留年してその果てに会社を1年で辞めてしまったよ。別にその会社はブラックだったわけじゃないのにね、やはり自分は社会に適合できないのかもしれない。。。 ちなみのその会社でどんなことしたかとか、辞めた理由はここに書いてあるから興味あったら見てみるといいかもしれん。

www.y-techmemo.work

文系からでもエンジニアになれるぞ

なれる。君がどうするか次第な気がするぞ。ちょっとだけ気になりそうなことを書いてこの記事は終わろうかな。

文系エンジニアはきついのか

文系エンジニアはきついのかなーっていうことも聞いたりするけど、どうなんだろうね。自分に関して言えば、就職した段階では技術的にはきつくなかった。インターンで同じようなことやっていたし、インターンの方が忙しかった気がするよ。でも、プログラミングを勉強し始めたときは全然わからなかったから、知識がない状態でWebエンジニアとして入社したらそれはちょっときついかもしれない。それに、新卒とはいえ知識がない人はWebエンジニアとして入社しにくいんじゃないかなー、と思う。 文系でエンジニアとして就職したいけど、知識がない・・・っていう人はそれなりの知識を身に着けて、アピールできるものを持っていくことをおすすめするよ。

文系エンジニアに学部は関係あるのか

うーーん、関係ないんじゃないかな。エンジニアだけど自分は経済学部だし、法律系の学部の先輩もいるし、経営系?の先輩もいるし。文系だとどの学部でもプログラミングってほとんど触れないだろうしね、どれも同じようなものなんじゃないか。

理系エンジニアはやっぱりできるの?

エンジニアというと理系のイメージがあるから理系出身のエンジニアってやっぱりできるのかなーって思うよね。できるかどうかは人によると思うけど、自分が一緒に働いたことのある理系院卒の新卒1年目のエンジニアは引くほどできてた・・・アプリからフロントからバックエンド、インフラまでやってた・・・冷静に頭おかしい。今まで相当やってきたんだろうなあ・・・っていうのを感じたよ。

文系エンジニアにおすすめの言語は・・・

正直これがおすすめっていうのはないかな。自分は言語で選ぶよりも近くに教えてくれる人がいる言語っていうのを勧めるよ。以下の記事の「独学で学ぶのにおすすめのプログラミング言語」ってとこでちょっと書いてある。

www.y-techmemo.work

まとめ

文系エンジニアってなんだろうね、エンジニアとして就職すれば文系も理系も関係ないのに。不思議な言葉だ。海外だとコンピュータサイエンスの学位ないとエンジニアになれないみたいなこともあるみたいだから、こういった言葉もあるのだろうか。そう考えると日本はそういった学位がなくてもエンジニアになれるからなれるハードルは低いよね。まあそんなハードル越えちゃおうよ。

文系でもプログラミング習得・エンジニアとして働くことは可能なのか? | ガジェラン

独学で行うプログラミングのおすすめ勉強法

プログラミングを勉強したいけど、プログラミングスクールに行く踏ん切りはつかない・・・だけど、勉強してスキルは身に着けたい。そんな風に思っている人もいるでしょう。だから今回は、プログラミングを独学で学んでいくにはどんな方法をとったらいいのかを書いていきたいと思う。とはいっても自分は独学で学んだわけじゃなくてプログラミングスクールで学んだ人。本音を言うと、何も知識がない状態でスムーズに学びたいならプログラミングスクールに通った方がいいっていうのが自分の意見。テックキャンプに通っていたからテックキャンプをおすすめするよ。 TECH::CAMPオンライン説明会

だけど、今回はプログラミングスクールに通わず独学で学ぶ方法です。自分は今フリーランスだけど、独学で学ぶならどうするのが良いのかということを考えて書いていく。

お前誰

とはいっても、どんな奴が書いているのかが分からない。書いているやつ誰だよとか思ったら以下の記事に自分のことを多少書いてあるからちょっと見てみるといいかもしれない。こいつダメだと思ったら、残念だけど僕の力不足だすまない、この記事は見ない方がいい。

www.y-techmemo.work

独学で学ぶのにおすすめのプログラミング言語

この話題よく聞きますよね。言語なんて腐るほどあるし、確かに最初どの言語を学び始めたらいいのか分からない。といっても、どの言語がいいんだろうか? 自分が今までやってきた言語はざっくりRuby、Javascript、TypeScript, Php、Go・・・、うーん・・・

正直自分は独学で学ぶのに言語そのものの基準で選ばない方がいいんじゃないかなーと思っている。言語そのもので選ぶよりも周りに聞ける人がいる言語という意見を推したい。というのもプログラミングを学び始めると200%学習中に詰まってしまうから。最初の方とかもうひどかった、「変数ってなんだよ」「クラスとインスタンスってなんだよ?」「データベースってなんだよ?くそが」、と何度も壁にぶち当たります。言語の基本的な考え方はどれも似ているし、どの言語を選んでも詰まるところは詰まるでしょう。

そんな時に気軽に聞ける人が周りにいるととても心強いです。正直、お金払ってでも教えてもらった方がいいと思います。はじめのうちはわからないエラーやプログラムの動きを永遠と悩んでいる時間がもったいない。

とはいってもそう簡単にプログラミングに長けている聞ける人なんてなかなかいないのが現実。そうなったらさあ何の言語を勉強したらいいのだろうか? 自分はRubyを推すかな。自分が最初にやったのがRubyっていうのもあるけど、直感的に書いて動くから。いやrubyってなんか裏側の処理とか書くんでしょ?そんなんやりたくない画面作りたい!っていう意見もあると思うけど、どうせ後で勉強することになるから画面に動きをつけるような言語は後でもいいんじゃないかと思う。それにその画面に動きをつけるようなJavaScriptという言語は流れが速くてネットに乗っている情報も書き方がまちまちでけっこう最初は混乱すると思うから。

プログラミングを独学で学ぶのにおすすめの方法

じゃあそのプログラミング言語をどこで最初学べばいいんだよって思うけど、まずはProgateを使うのがいいと思う。ゲーム感覚でできるし、プログラミングの基本的なことを知ることができる。

Progate

まあいうてProgateこの記事見ている人で知らない人いないですよね。いろんなレッスンあるからいろいろやってみると楽しい。

f:id:utr066:20200405195655j:plain

この中から自分の好きな講座を選んでどんどん潰してレベルアップしていこう。やっていくうちに自分が果たしてプログラミングに向いているのかどうか、なんてことも薄々分かってくるのじゃないかと思う。途中で自分にはこれは無理だと思ったら、何か別の道を探してみるのもいいんじゃないかな。

f:id:utr066:20200315000730p:plain

ちなみに自分のレベルは98だった。昔それなりにやってたな懐かしい。ぜひともダブルスコアで越えてくれ。最初にRubyをやるならその後にHTML&CSS、フレームワークであるRuby on Railsを学んでみるのがいいと思うぞ。

Udemy

Progateが終わったら、次は本格的なアプリケーションの作成を学ぶためにUdemyをおすすめするよ。よくRuby on RailsやるならRailsチュートリアルやった方がいいということを聞くけど、正直あんまり最初の方にやるのはおすすめしないぞ。だってあれ最初の方でやるには普通に難しいよね・・・挫折への一歩を踏み出してしまう可能性があるからもうちょっと分かりやすそうな動画教材であるudemyでいきたい。自分もudemyはけっこう使っていて今確認したら38コース買ってた。これけっこう値段いってるな・・・

f:id:utr066:20200405202255j:plain

udemyってけっこう本格的なガチのやつもあったりするけど、レベル別でも検索出来たりできて初心者向けのものもあるからやってみるといいです。左側のメニューからレベルや日本語や英語で絞って口座を検索することができる。学び始めの人へ向けたこんな講座をさがしてみるといいですよ。

f:id:utr066:20200405202744j:plain

ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!

f:id:utr066:20200405202524j:plain

はじめてのRuby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう

プログラミングを本で学ぶ

プログラミングの本も本屋に行ってみるとたくさんありますよね。ぶっちゃけこれもどれを選んだらいいかわかりません。参考までに自分が勉強し始めてから最初の方に読んだ本を以下の記事で紹介しているからよかったら覗いてみなよ。最初はRubyを学んでいたからそれ関連の本が多いかな。

www.y-techmemo.work

まとめ

プログラミングを完全独学で勉強する方法を書いたけど、今なら動画の教材も豊富だしネットにいろんな記事があるから勉強しやすいかもしれない。

  • progateで基礎を学ぶ
  • udemyでアプリケーション作成の方法を学ぶ

っていう方法が良いんじゃないかな。自分でプログラムを書いて頭の中に描いたものを作れるのってけっこういいもんです。プログラミング学んでみたかったらまあやってみればいいんじゃない。

www.y-techmemo.work

【AfterEffects】サイバー感のあるテキストアニメーションを作る

f:id:utr066:20200323174219g:plain

これを作っていこう。

まずは背景から。BackgroundsからPixelsを選択して適用する。Pixelとか名前まんまだな。

f:id:utr066:20200323174444j:plain

次にこの背景に載せるテキストを作る。テキストレイヤーを追加して好きな文字を入力。今回はPixelでいく。

f:id:utr066:20200323174652j:plain

この追加したテキストをサイバー感のあるようなものにしたいから、このテキストにも背景に適用したPixelを適用する。

f:id:utr066:20200323174908j:plain

そうすると、テキストが背景と同じようなものになる。

f:id:utr066:20200323175056j:plain

Find EdgesのInvertのチェックを外す。ちょっとだけ文字が平べったくなる。

f:id:utr066:20200323175151j:plain

Glowを適用しよう。

f:id:utr066:20200323175330j:plain

ちょっとだけ値をいじる。

f:id:utr066:20200323175544j:plain

この時点では、まだまだ微妙。この上から、Saberを使ったレイヤーをかぶせていく。 選択しているテキストレイヤーからAutoTraceを選択して新たなレイヤーを作る。このAutoTraceからSaber使って加工するっていうのはけっこう良い感じになるから個人的に結構使う。

f:id:utr066:20200323175753j:plain

AutoTraceから作成したレイヤーにSaberを適用しよう。 f:id:utr066:20200323175929j:plain

Saberの値をいじる前に、そのレイヤーのブレンディングモードをオーバーレイにしておく。 f:id:utr066:20200323180135j:plain

f:id:utr066:20200323180300j:plain

想像がつくかもしれないけど、この真ん中の線を移動させて文字を表示させていく。そのために、この線の大きさを変更しよう。

f:id:utr066:20200323180407j:plain

スケールの値をいじって線を上下まで伸びるようにする。 子の作った光の線は、左から右に移動するようにしたいからPositonをいじる。

f:id:utr066:20200323180723j:plain

Positonの値をいじって、キーフレームを追加しよう。再生すると、左から右に移動するようになるはず。 線の動きは何となくできたけど、まだまだ文字も背景もイケていない。

一番下にあるPixelの背景をコピーして一番上のレイヤーにかぶせる。そしたら、そのレイヤーのBlendingModeをオーバーレイにしよう。

f:id:utr066:20200323181018j:plain

ちょっとだけ雰囲気が出てきた。キーポイントで気になる部分を修正したら、次に「Linear Wipe」というエフェクトを追加しよう。追加する対象はPixelというテキストを置いたテキストレイヤー。

f:id:utr066:20200403162548j:plain

これが何をしてくれるかっていうと、文字の表示を左から表示させたりすることができたりする。今回は左から来る光の線が通過したら文字を表示させたいから左から表示させるようにしたい。「Linear Wipe」の「Transition Completion」という値をいじると、文字の表示が変わるのが分かる。

f:id:utr066:20200403163011j:plain

光の線が通過したら文字を表示させたいからそれに合うように「Transition Completion」のキーフレームをいじる。良い感じになったら、あとは色合いなどを微調整して完成。

f:id:utr066:20200323174219g:plain

動画にしてあるから、作ってみたかったら見てみると文字だけよりわかりやすいかもしれない。ちなみに英語版のAfterEffectsを使っているから日本語版とはちょっと表記が違うよ。

エンジニアを目指す方におすすめの本を紹介してみる

エンジニアにこれからなりたくて勉強しよう、もうすでに勉強をし始めた!という人もいることでしょう。この記事では、自分がエンジニアになろうとして勉強し始めた頃のことを振り返ってどんな本を読んだらいいのかを紹介していきたいと思う。

本屋に行くとプログラミング関連の本がありすぎてもはやどれを読んでいいのかわかりませんもん。1つの言語をとってもいろいろな本があるし、学び始めはどれを読んだらいいのか・・・・迷ってしまうものです。 だから今回は自分が学び始めの君にお勧めの本を紹介したい。とはいっても、自分も全部の本を読んできたわけじゃないから自分が最初に読んでいてよかったものを書こうと思う。

お前だれ?

自分のことは以下の記事にちょろっと書いたから気になったら見てみてほしい。まあ大したことは書いていない。

www.y-techmemo.work

エンジニアになるなら読むべき書籍

先に書いておくと、自分は以下の手順でプログラミング言語やフレームワークを学んできた。

  • Ruby
  • Ruby on Rails
  • JavaScript
  • Php
  • Laravel
  • Go
  • React
  • Vue
  • TypeScript
  • Nuxt

最初のころに勉強してきたのはRubyだから、プログラミングを学び始めたころはRubyの本を読んでいたよ。PHPなんかは最初のころはやっていなかったから、ここではそれ以降の本の紹介はやめておく。最初自分はプログラミングスクールで学んでいたから、主にそこのカリキュラムを学んでた。本はそのカリキュラムをある程度やった後に読んでいたりしたよ。

じゃあいってみよう。

Ruby on Rails4

この白い本をRailsを勉強していた時に読んでいたなあ。当時やっていたのはRails4だから下に載せている本とはバージョンが違うね、懐かしい。今はもうRails6だからできることもどんどん変わっているでしょう。Railsに関する機能が網羅的に載っているからRailsに関して全体的に知りたいときに良い。

Ruby on Rails 5アプリケーションプログラミング

Ruby on Rails 5アプリケーションプログラミング

パーフェクトRuby

最初に学んでいたのがRubyだったからRubyの本を買って読んでいた思い出がある。Rubyでどんなことができるのか網羅的に載っているから全体的に知りたいときなんかに良い。ただ、学び始めでこれ分厚さは相当精神力をもっていかれるから覚悟のある人だけ買うといい。あって損はない。

改訂2版 パーフェクトRuby

改訂2版 パーフェクトRuby

Ruby入門

この本は自分がRubyを学び始めたときには発売していなかったんだけど、分かりやすくて良い本だから載せておく。Rubyに関する本はこの本を読んでおけばとりあえず間違いない気がする。上で挙げたのは何か調べたいときのリファレンス的な立ち位置で持っておくといいかな。

javascript入門

javascriptを学び始めたときに読んでいた本。当時プログラミングスクールで学んでいたんだけど、javascriptはRubyほどやっていなくて結構読んでいた。白い本なんだけど、もうだいぶ手あかがついてくたびれた感じになってしまった。javascriptの書き方はどんどん変わっていって今ではこの本に書いてある書き方をすることもないけど、そもそもjavascriptってどういう動きをするのかを理解するのに助かった。

リーダブルコード

読みやすいコードを書くときに気を付けるべきことが書いてある。勉強中は自分が書いたコードを見るのは自分だけかもしれないけど、企業に入れば基本的にチーム開発。自分の書いたコードは他の人に見てもらってレビューしてもらう機会も増えていきます。そんなときに「読みやすいコードってどんなんだろ?」という疑問がわくはず。レビューするときに関数名一つとっても一目で何をやっているのかわかる命名は素敵なものです。より良いリーダブルコードを書きたいもの。

Dockerも知っておくといい

上で挙げたのが自分が初期のころに読んでいた本なんだけど、エンジニアにこれからなる上で知っておいてほしいものはやっぱり他にもある。sqlやjqueryなんかもそうだけど、エンジニアとしてどこかの企業に入社する際には是非ともDockerは知っておいてほしい。というのも、今や開発環境はDockerを使っていることが多々あるから。いくつかの企業と関わってきたけど、Dockerが出始めてからはすべての企業で開発環境はDockerだった。企業に入って環境構築してね、と言われてDockerいきなり使うなんてこともあるだろうけど、それだとちょっとびびるからその前に軽くでも触れておくと良いと思う。

最初は「コンテナ?は?」って感じだけど、なんとなく便利なものなんだなーってぐらいは学び始めればわかるんじゃないかと。もし、「Dockelr楽しいいいいいいい!!」ってなったらKubernetesについて学んでみよう。これも結構な企業で使われているもので、自分も使われている現場で作業をしてきたりした。なかなか難しいけど、マスターして俺に教えてくれ。

まとめ

自分が本当にプログラミングを学び始めてどんな本をよんでいたかなあ、っていうのを振り返って書いたけどあの頃はプログラミングをできるようになるのに必死だった。エラー起きてもよくわからないし、もはや何が分からないのか分からないっていう状況もあったなあ。。パソコンをカタカタして勉強するのもいいけど、たまには本を読んで勉強するのもいいもんです。

未経験からフリーランスエンジニアになるにはどうすればいいのか

最近、何かと未経験からエンジニア・フリーランスエンジニアになるためには、といったような話題をブログやらYoutubeやらで見かけるから、それについて自分もちょっと書いていきたい。

書く内容は、未経験からフリーランスエンジニアになるためには何をすればいいか。自分は新卒からエンジニアだったし、他業種からエンジニアになったっていうわけじゃないけど、やっぱりエンジニアになりたいっていう人には言っておきたいこともあるからこの記事で書いていこうと思う。

自己紹介

初めまして、27歳のフリーランスのエンジニアです。記事執筆中の今は、とあるエージェントに案件の紹介を受けてその案件をこなしているという状況ですね。フロントエンドとバックエンドの開発やっています。(書いている今はNuxt.js(vue.js)とgoとgraphqlで何か作っている)とは言っても、こいつ誰だよって思うかもしれないから、ちょっと気になったらこの記事を見てみるといいかもしれない。自分のことを少し書いてある。

www.y-techmemo.work

自分は新卒で入った会社を一年でやめ、ニートをして、そしてフリーランスエンジニアとして働くに至ったわけです。そんな僕が今回未経験からフリーランスエンジニアになるためにはどうしたらいいか?ということを考えて書いていく。今フリーランスエンジニアだからこその意見なんかも書けるといいな。

未経験からフリーランスエンジニアになるには

未経験からフリーランスエンジニアになりたい!っていう人は結構いそうだけど、未経験からいきなりフリーランスエンジニアになるのは正直無謀です。ここでいうフリーランスエンジニアは、エージェントを使ったフリーランスエンジニア。レバテックとかギークスとかポテパンフリーランスとかに案件を紹介してもらうスタイル。

SNSなんかで直接営業かけて仕事を得るといったことは未経験の内にやってみたことはないので、可能かどうか分かりません。もしかしたらSNS経由なんかでポートフォリオを公開して、「こういうのできるので、何か仕事ください。」といったメッセージを送りまくれば、誰かは仕事をくれるかもしれないけど、結構いばらの道な気がする。

エージェントを使った未経験からフリーランスエンジニアが無謀な理由

これは、自分が実際にエージェントを使ってみてそう感じたから。新卒を一年で辞めて半年ぐらいニートみたいなことして、そこからエージェント経由で案件に参画したんだけど、門前払いされたエージェントもあった。一年実務経験あってこれなら、未経験からエージェント経由で案件に参画するというのは難しいんじゃないかなと。(自分は学生の時にも一年ぐらいエンジニアインターンしていたから1年の実務経験でも参画できたのかもしれない)

こういうこともあって、未経験からエージェントを使って仕事を獲得することはできないに近いのではないかと思う。もしも、それでもフリーランスエンジニアに未経験からなりたい!というならさっき少し書いたSNS経由で頑張ってみるとかクラウドソーシングのサイトからなんとかして仕事を獲得するぐらいしかないのではないだろうか。ただ、もしうまくいってもクラウドソーシングなんかは単価は安いからあまり稼げないと思う。

フリーランスエンジニアになりたいならいきなりフリーランスエンジニアを目指さない

自分が思うのは、フリーランスエンジニアになりたいなら、いきなりフリーランスエンジニアになるのではなく、一度何らかの形でエンジニアとしての就業経験を積んだ方が良いだろうということ。正社員でも派遣でもいいでしょう。とは言っても、その正社員とか派遣でもエンジニア経験いるから難しんだよクソが!と言いたいかもしれない。

だからこのハードルを越えるために勉強する。勉強をして企業に入社する。入社した企業でさらに学んでフリーランスエンジニアになる。これが順当な流れかなと。

正社員・派遣エンジニアになるためには

いきなりフリーランスエンジニアになるのは難しい。だからこんなステップでフリーランスエンジニアになったらどうかというのがさっきまでの流れ。

  • 未経験→派遣・正社員エンジニア→フリーランスエンジニア

でもこの未経験から正社員エンジニアになるためのハードルが結構高い。この壁をクリアするには、相応の勉強をしなければなりません。独学だとどう勉強したらわからないし、メンタルも消耗しそうなので、プログラミングスクールに通うことをお勧めします。

ただ、その前に確かめてほしいことがある。それは、君がプログラミングをやっていけそうかどうかです。いきなりエンジニアになりたい!と思ってスクールに通って挫折しました、っていうパターンはお金も勿体無いし避けたいですよね。なので、その前に実際に多少自分でプログラミングを学んでみて自分がどう思うかを確かめてほしい。

Progateでプログラミング適正を図る

ここまで読んでいるあなたならProgateなんてやっていそうだけど、Progateはプログラミングをネット上で学ぶことのできるサービス。ゲーム感覚で進めることができるのが良いですね。自分も昔やっていました、懐かしいです。

f:id:utr066:20200315000730p:plain

作業を進めると、どんどんレベルアップしていくのが楽しい。プログラミングって自分に合うのかなーと思う人はまずは、Progateをいじってみるといいでしょう。

Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

どのプログラミングスクールを選べばいいのか

自分の適性が何となくわかってプログラミングやってみるかーとなったら次のステップであるプログラミングスクールに通ってみることをお勧めします。というのも自分がプログラミングを最初学んだ時にプログラミングスクールに通ったから。学ぶための教材と環境が与えられるというのは結構大きいもので、良い始め方だったと思う。

その時使ったプログラミングスクールがテックキャンプ。だから僕はテックキャンプを勧めるよ。巷では悪評も聞いたりするけど、自分はあまりそうは感じなかったからさ。まあ気になったら体験会に行ってみればいいんじゃないかな。サイトから体験会の申し込みができる。

エンジニアになることを前提に考えているなら、転職支援も行ってくれるTECH::EXPERTが良いかと。(今はTECH CAMP エンジニア転職という名称になっているみたいですね。)

テックキャンプを運営しているdivの社長はYoutubeもやっていますね。チャンネル登録者も多くて知っている人も多いかもしれない。どんな人が経営しているのか見てみたい人はYoutubeチャンネルを見てみるといいかもしれない。

www.youtube.com

プログラミングを学ぶ

プログラミングスクールにもし通うことになったら、めちゃくちゃ学びましょう。自分は最初はマジで何もわかんなかった、もはや何がわかんないのかすらよくわかんなかった。だからカリキュラム見てもよく分かんないところは質問して、何回もカリキュラムやってっていうことをやってたよ。

懐かしいなあ、あの頃なんか自分に新しい知識がどんどん身についていって分からないことは多かったけど、学んでいるのが楽しかった気がする。

勉強のコツはそこまで完璧にわかるわけじゃないけど、とりあえずカリキュラムを先に進めること。その内「あー、こういうことね」と点と点が繋がる。

エンジニアとして転職しよう

スクールで学んだら転職です。転職支援のサービスやWantedlyなんかを使って転職活動をしてみましょう。Youtubeに活動を報告している方もいますね。

www.youtube.com

この方はエンジニアとして内定をもらったみたいですが、やっぱり転職は一筋縄ではいかないようです。あのカリキュラムを全て理解すれば、結構できることあると思うけど、そううまくはいかないか。

転職先を自分の力でも見つけていきたいなら、やっぱりポートフォリオを作って、自分のことについて採用媒体に書いていくのが良いと思う。ポートフォリオ作成のサービスはいくつかあるけど、ここでのポートフォリオは自分で1から作ったやつがいいんじゃないかな。ただ、ポートフォリオの作成って結構時間がかかるはず。時間はかかるけど、その分の知識は身につく。自分で何か作るときには、「これどうやってやるんだろう?」と思って、色々調べつつ実装していく感じになるからね。

だけど多くの人は、この時点の技術力と使える時間で良い感じのポートフォリオ作るってことはなかなかできないんじゃないかな、と思う。まあそれができたら他の人より一歩リードできるかもしれないけど。

もしポートフォリオを作れたら、それをWantedlyなんかに載せておきましょう。ポートフォリオ自分で作る時間ない、でも欲しい!っていう場合にはポートフォリオの作成サービスを使うしかない。RESUMEを使えば、綺麗なのができる。

RESUME(レジュメ)| 全ての人のためのWebポートフォリオサービス

転職先で知識を身につけてフリーランスエンジニアに

内定を得て、転職したらそこで知識を身につけよう。エンジニアとして一年以上実務経験を積んで、エージェントに案件くださいと訪問すれば、案件をもらえるのではないかと思う。もちろんエンジニアになるためには結構な勉強量が必要だし、転職も苦戦するのはもちろんあるだろうけど。でも、やってみたいならやったほうがいいよね。

今回は自分がもし未経験で今からフリーランスエンジニアになるならどうするかなー?と思って書いたけど、どうだろう。結構厳しい道のりかな。でも、現実はこんな感じな気がする。いきなり未経験がフリーランスになって月何十万円を稼ぐなんてことはできないし、やっぱりそれ相応の勉強量が必要となると思う。それでもフリーランスエンジニアになりたい!っていうならやってみればいい。やってみたいならやったほうがいいと思うしさ。

正社員エンジニアとフリーランスエンジニアの働き方の違い

今まで正社員エンジニアやってニートやってフリーランスエンジニアやってみたいなことをやってきたけど、フリーランスの期間もある程度たったしフリーランスエンジニアと正社員エンジニアの違いについて書いていこうと思う。今正社員でエンジニアやっているけど、フリーランスでやってみたいなあ、でもどんな感じなんだろう・・・?と思っている人にとっては多少に参考になるんじゃないかな。

保険とか税金の違いについてはここでは書かないよ。あくまで自分が正社員とフリーランスで働いてみて感じた働き方の違いについて。

お前誰?

自分のことを少し書こうと思うけど、まず自分はこの記事を書いている現在フリーランスエンジニアとして働いている。

www.y-techmemo.work

フリーランスエンジニアといってもエージェントに案件を紹介してもらって、その企業で働いている身。自分でプログラミングで何かを作って稼いでいるっていうのではないから、企業に出社してほかの正社員と同じように席について作業している。だから正直、正社員との違いといってもぶっちゃけ変わらん

会社には正社員だけじゃなくて正社員以外の方もたくさんいますよね。彼らと同じように正社員と同じように席について同じような作業をする。だから大きな違いはないんだよね。ただやっぱり多少の違いはある。だからこの記事では正社員とフリーランスで働いてきて感じた違いをちょろちょろと書いていこう。

会社内の人間との関係性があまりない

フリーランスで働くときには、企業はその企業の特定のプロジェクトをやってほしいと依頼をしてくるから、そのプロジェクト以外の人間との関係はほぼない。正社員の時だったら他の部署と関わったり、他部署と飲み会したりみたいなことをしていたけど、そういうことは思えばあまりないですね。もちろん企業によって違いはあるだろうけど、まあその企業で関係を持つ人間は少なくなるよね。その企業内のイベントなんかにも出ることはなくなるし。

業務内容に違いはほとんどない

正社員の頃は、プログラムを書く事の他に社内で発表する資料の作成やプレゼンなんかをしていたけど、フリーランスで働くとそういったことはない。毎日黙々とその案件に関係のあるタスクをこなしていく。とはいっても、正社員時代の時の作業とほとんど同じ。具体的にいうと、よくあるBacklogでチケット管理してそのタスクをこなしていくとか仕様検討するとか。こういった開発に関することで、正社員・フリーランスで違いはほとんど出ないんじゃないかな。

フリーランスの勤務時間は契約で決まる

フリーランスの勤務時間は、契約で決まる。週5日働くなら140~180時間の間で働いて月○万円っていうのが多いかと。契約によるのかもしれないけど、140時間を下回ってしまった場合の賃金はその分引かれるし、超過して働いてしまった時間分の賃金はもらえる。その契約の時間内なら、どう働いてもその時間を満たせばいいの?って思うけど、企業によるかと思います。

ほとんど夜中に働いて契約の時間を満たす人もいれば、朝早くから働いて契約の時間を満たす人もいたりといった企業もあったし、今案件を受けている企業は他の社員と同じような時間帯で働いてもらいたいからこの時間帯で働いてねー、なんて言われたりしています。案件を受ける企業次第ですね。

案件を受ける前にその企業と面談することができる場合が多いから、そのときにこういったことや他の気になる点を聞いてみるといいです。

フリーランスの給料は見かけ上高い

フリーランスの場合は売り上げになるから、給料っていう言い方も変な気がするけど、正社員と比べるとフリーランスの給料は高く見える。自分は新卒で入った会社を一年で辞めてその後半年ニートみたいなことをしてフリーランスとして案件をもらったんだけど、その時の給料が確か新卒1年目の月の額面の2倍ぐらいだったかなー。だけど、よく言われるように正社員の場合はいろんな補助がついているからそういったことを考えるとフリーランスの給料は何とも言えない。

確定申告が面倒

正社員なら確定申告は会社がやってくれる場合が多いけど、フリーランスの場合は自分でしないといけません。これがだいぶ面倒くさいです。今は確定申告を楽にしてくれる青色申告のソフトなんかはいくつかあるけど、それを使っても面倒です。税理士雇ってやってもらう気持ちが分かります。ただ、正社員の時とは違って経費にできるものは経費にできるので、その点は良いですね。

フリーランスは辞めやすい

フリーランスは契約で働くから、辞めやすい。企業によって更新期間があるんだけど、大体3か月更新な気がする。3か月働いてお互いに継続意思があれば、また3か月契約更新してっていう感じ。

こっちが辞めやすいってことは逆に言えばクビになりやすいんじゃないの?って思うかもしれないけど、それはそう。今まで一緒に働いてきた人の中にもそういった人はいたよ。だけど、個人的には正社員の時と同じように他の人とコミュニケーションが取れて、実装に必要な知識があればそこまでクビになるといったことはない気がするからあまり恐れなくていいと思う。

3ヶ月更新なら3ヶ月で辞める人も結構いるの?って思うかもしれないけど、こういう人は今まで見てきた中でほとんどいない。大体の人はそれ以上の期間働いている気がする。1年近く1つの案件で働く人が多い印象。

働く時期をコントロールできる

1つの案件の契約が終了したら、その後1か月は休んでその後にまた別の案件で働くといった選択肢をとることもできる。例えば、3月に案件の契約を切って、1ヶ月間は休んで4月から別の案件で働くとかね。こういったことは正社員の時にはあまりできないからちょっと魅力的に思えるかもしれない。ただその分給料は減るけど・・・

フリーランスになるには経験年数が大事

フリーランスがエージェントで案件をもらう際にやっぱり経験年数は見られる。というかもうこれが見られる全てなんじゃないかといっても過言ではないのだろうか。経験年数が少ないと案件をもらうのに苦労するのは覚悟した方が良いです。特に自分のような新卒1年で辞めてそこからフリーランスになりたいという人は・・・

未経験からいきなりフリーランスエンジニアになりたい!ってい人はエージェント経由で案件を獲得することは無謀だと思うので、他の方法で仕事を獲得するのをおすすめします。未経験からフリーランスエンジニアを目指すなら最初は、正社員や派遣で経験年数を積んでからなった方がなりやすいかと。

いろんな技術に触れることができる

フリーランスやるといろんな案件に関わることができるから、その分いろんな技術に触れる機会が多くなる。まあその分その技術は勉強しないといけないけどね。正社員だとずっと特定のものしか使っていないなー、っていうことになる場合もあるけど、フリーランスであれば他の案件を受けることでそういったことも解消される。

自分が触った事のないスキルが求められる案件も参画できるの?と思うかもしれないけど、可能だと思う。自分はPythonの経験なんてなかったけど、案件もらって受かったしそこまでやった事ないからだめ!っていうのはないんじゃないかな。ただ、インフラからフロントエンド、バックエンドからフロントエンドみたいな領域が変わるのはちょっと苦しいかもしれない。

まとめ

いくつか書いてきたけど、働く上でフリーランスエンジニアと正社員エンジニアの違いはあまりないんじゃないかなーと思う。もちろんそれ以外の保険・税金の違いはあるけど。案件毎に求められるスキルも変わってくるから技術をどんどん学んでいきたいっていう人にはいいかもね。

光るサークルアニメーションを作る

今日はこれだ。円をシェイプを作っていってsaberというプラグインを使って

まずはシェイプレイヤーを作って丸いやつを作る。 f:id:utr066:20200302173906j:plain

円を作ったら作りたい円の数だけそのレイヤーをコピー。それぞれの円の大きさを良い感じに調整しよう。 f:id:utr066:20200302182634j:plain

そしたら今度は円の一番外側のやつを作る。なんか円じゃないやつね。 f:id:utr066:20200302182954j:plain

シェイプレイヤーを新たに追加して、シェイプの形を長方形にしましょう。そしたら見えないぐらいの小さい長方形を作る。 それを何個も円の周りに置きたいですね、シェイプレイヤーにRepeaterを追加します。

f:id:utr066:20200302183453j:plain

値を調整すると円のように広げることができるので、値をいじります。 f:id:utr066:20200302183902j:plain

円の周りに舞うようになったらOK。

f:id:utr066:20200302183642j:plain

あとは今まで作ったものを光らせていきましょう。Saberというプラグインを使うので、インストールしていない場合は、インストールしておく。

flashbackj.com

光らせる手順としてはこんな感じ。

  • Autotraceで円をかたどる
  • saberでかたどったものを光らせる

まずは、円をAutotraceしていく。 f:id:utr066:20200302184520j:plain

そしたら、そのレイヤーに対してSaberで光らせる加工をしていきましょう。Autotraceしたレイヤーにsaberのエフェクトを加えます。

f:id:utr066:20200302185819j:plain

適用するとこんな感じになる。これだと光る円になっていないので、CustomizeCoreからLayerMaskを選択。

f:id:utr066:20200302185934j:plain

これで光る円になるはず。円の大きさが大きかったり光りすぎている場合は、CoreSizeやGlowIntensityの値を下げてみるといいです。

f:id:utr066:20200302190125j:plain

今やったことを他のレイヤーにもしていけば、光る円をいくつも作り出すことができます。ただ普通にレイヤーを重ねるだけだと、下のレイヤーの円が見えないのでBlendingModeをScreenにしておきます。 これですべての光る円が見える。

f:id:utr066:20200302190728j:plain

円のアニメーションは、EndOffsetの値を調整して好きな位置にキーフレームを置いてやれば、円を描くようにアニメーションしてくれます。 f:id:utr066:20200302190932j:plain

これをすべての作った円のレイヤーに対して行えば、平面でのアニメーションは完了。3Dのアニメーションを作りたかったら、レイヤーを3D化してアニメーションを作っていきます。 3Dにするにはレイヤーの右側にある立方体のチェックボックスにチェックを入れればOK。  f:id:utr066:20200302191253j:plain

あとは、レイヤーのxyz軸を好きなようにいじればいいです。 f:id:utr066:20200302191536j:plain

このRotationの値をいじるとレイヤーの向きが変わるので、それを変化させたいスピードに合わせてキーフレームを設定すればいいですね。 これを全てのレイヤーに行います。

円がにゅっと出てくるようなアニメーションはPositionの値をいじれば可能。 f:id:utr066:20200302191930j:plain 良いタイミングでキーフレームを打ち込んでおきましょう。これもすべてのレイヤーに対して行えば、にゅにゅにゅっと円が出てくるようなアニメーションになります。 そしたらまあいいんじゃないかな。

新卒1年目エンジニアがニートになってみた

ニートを経験したことがあるだろうか? 「ニートになりたい」という言葉はよく聞くけど、実際に仕事を辞めてニートになったことのある人はそういないですよね。ニートになったら会社に行く必要もない、うざい上司とかかわらなくていい、家でダラダラできる。なんて最高な日々なのだと妄想することでしょう。

だけど妄想と現実は大抵違います。ニートに対する妄想と現実も違うことでしょう。ニートしたいと妄想を広げているなら現実はどうか知りたくないでしょうか?

自分は半年ぐらいニートしていた頃があるからその時のことをちょっと書いていこうと思う。ニートになりたい人は参考にしてみてくれ。1年間新卒で入った会社で働いてたからその頃のことからちまちまと書いていく。

新卒でエンジニアとして入社

大学を卒業して入った会社は営業職が強めなWebサービスを提供している会社でした。大学は文系だったんだけど、自分はエンジニアとして入社したんだよね。他にSIerの企業2社に内定をもらっていたんだけど、Web系がいいなーって思ってここにした。というのも学生時代にIT企業でエンジニアとしてインターンしていたこともあって、まあ開発したいよねって思っていたから。

入ってから最初は全国の新入社員で集まって5人ぐらいのグループで研修受けたりしてた。なんかやたら人数いたから広いところでやってたけど、内容はあんまり覚えていない。でも、嫌々やっていたのは覚えている。グループっていっても他の皆営業なんだよね。グループの中にエンジニア一人はきつかったよ、明らかに他のメンバーとの温度差を感じた。お前らのその熱意すげえよ、尊敬する。

そういった全体の研修が終わったら、新入社員の出し物があった。「あー、本当にこういうのあるんだなあ、営業的な会社だなー」って思ってた。もちろんすごいやりたくなかった。こういうのやりたくない人結構多いんじゃないかな。

で、それが終わったら今度は営業研修。アポ取りの電話なんかのロープレ。他の企業もこういった研修やってそうだよね。もはや今では内容はあんまり覚えてないけど、これも嫌々やってた思い出がある。

そういった研修を乗り越えた後にエンジニアとしての研修があったけど、こっちの研修は良かった。AWSだったりPHPだったりの研修をさらっと受けた気がする。やっぱり自分の興味あることじゃないとダメだね。それからOJTだっけ?徐々に開発していって部署に配属されて仕事してっていう感じですね。

エンジニアとして働く

研修が終わったら次は徐々に開発していきます。最初はLaravelを使っての開発だったなー、懐かしい。あれがOJT的な位置付けだったのかなー。Docker使って環境立ち上げて、開発してテスト書いてコミットしてってことをしてた。先輩も優しくて良かった。技術的には学生の頃、他の企業でインターンしてたから全くわからねえ・・・なんてことはなくそのままのノリで開発してた。インターンしてた頃の方がだいぶ忙しかった。

で、そのプロジェクトがひと段落したら今度はAPIの開発をGoでやった。その頃Goを使った開発って今ほど浸透していなかったし、チームにもGoの開発経験がある人いなかったから勉強しつつ作っていった。それまではRubyやPHPをメインで使ってたから最初はGoに慣れなかった記憶がある。やっぱりなんかちょっと毛色違うよね。まあそんなんで開発しつつテスト書きつつみたいなことをやっていったよ。

辞めた理由

別にその会社がブラックだったわけじゃないし、仕事内容が気に入らなかったわけじゃないけど、ふと「ここにいる意味なくね?」と思って勢いで辞めた。そう思ったのも、周りのできるエンジニアがどんどん辞めていってしまったから。確か毎月のように辞めてたなあ。やっぱり自分よりできるエンジニアはいっぱいいて欲しいし、もっと学びたいじゃん。誰と働くかって結構大事だよ。それに自分のやりたいような技術もできそうになかったから。(というか働きたくない)

確か課長と一対一で話しているときに辞めますということを話した気がする。辞めるか続けるか悩みに悩んで言ったわけじゃないし、勢いの力が大きかったする。それから約3か月後に退職。次どうしようかなーと思って、ほかの企業の話も聞いたりしたけど「そもそも働きたくないんだよなあ」なんて甘ったるい思いが強すぎて次を決めないまま退職。特にあんまり不安はなかった。まあなんとかなるだろうという謎の自信があった気がする。

というのもお金に関しては、自分でサイト運営とかしたこともあって、微々たるものだけどネットでお金を稼げるのはわかっていたし、なんとかなるだろうという感覚はあった。そういったこともあって普通にニートになった。辞める時に「次どうすんの?」とか結構聞かれたけど、ニートするって答えてたかなあ。皆辞める人が次何するかってやっぱり気になるんだね。ああいう対応結構面倒くさいよね。

辞めるのは結構面倒くさい

辞めるのっていろんな人と話さないといけないし、結構面倒ですよね。自分の課の課長や部長や人事なんかです。結構攻撃的な言葉も浴びせられるしね。人によって様々だけど、「それって逃げじゃないの」とか言われるし、うるせえよ、逃げちゃダメなのかよ?とか思ってた。まあ、何人かの偉い人と話して手続きして辞めた。

晴れてニートへ

そうやって会社を1年で辞めたんだけど、特にあまり気持ちの変化はなかったなあ。もうちょっと開放感あるんじゃないかと思ったけど、なんかそんなこともなかった気がする。ただ確か次の日ぐらいに髪を染めた。会社だとこういうのうるさいところはうるさいしね。自由にできるのはやっぱりいい。

ニートになって生活はどうなったのかというと生活はあんまり変わらなかった。自分はエンジニアとして働いていたんだけど、家でも同じようにパソコンいじるしよくニートにありそうな昼夜逆転の生活にもならなかったし、なんか働いているときと正直あんまり変わんなくね?なんてことも思ってた。プログラミングは好きだったから家でもプログラム書いたりしてたしね。会社では自分がやりたい技術はできなかったけど、家でなら自分が使いたい技術使ってやりたい放題。そこで自分が扱いたいスキルを伸ばすことができるのはなかなか良い。

あとは、サイト運営なんかもしてた。記事書いたり外注したりとかね。それで広告収入とか得たりしてね。これで何百万とか稼げないかなー、なんてことも思ったりしてた。このニート期間はプログラミングとサイト運営で結構な時間を使った気がする。こうやって書くとニートって感じがしないかもしれないけど、世の中のニートも何かしらやっているんじゃないかな、何もしないって結構暇だしさ。

ニート生活は空虚だよ

ニートは会社の人とも会わなくていいし、時間の使い方も自由。だけどやっぱりなんというかね、空虚なんですよ。朝起きて「さあ、今日は何をしようか」っていうところから始まるのは素晴らしいんだけど、人と会って何かしないっていうのは何とも言えないです。当時暇すぎて駅前のマックとスタバとエクセルシオールをローテーションして、そこでパソコン持って作業してた。家にいても暇なんだもん。平日だけど行ってみると結構人いるんだよ。皆何しているんだろうね。

お金の不安はある

やっぱりお金の不安はあるよね。家賃・食費・水道光熱費・通信費・税金・・・いろいろ含めて1か月最低17万ぐらいはかかるなあっていう感じだった。家賃が8万だったんだけどやっぱり高いよね。ニートに8万はえぐいて・・・

お金ないから食べたいお菓子なんかも買うのにけっこうためらってたなあ。食べ物は自炊してた、外食するとやっぱり高くなっちゃうしね。そんな生活だったけど、そんなに苦は感じなかったよ。質素な生活も悪くないです。でもたまにお菓子をためらいなく買うぐらいのお金は欲しいよね。

フリーランスのエンジニアへ

ニートをしていたんだけど、やっぱりお金がなくなるよね。「あー、数か月後の家賃払えないなあ・・・」ってことを何度も思った。「働くしかないかよくそが」って思って働くことをちょっと考えてみた。取れる選択肢は、「正社員・派遣・フリーランス・起業」。大体こんなもんだ。

正社員はそのときしばらくいいかなって思ったからまず消した。起業に関しては、起業するなら自分で何かやっていってそれが後に事業として回ればいいなあ、なんて思ってたから消した。起業して何かしよう!っていう気持ちはなかったかな。

残るは派遣とフリーランスだけど、派遣よりもフリーランスの方が稼げるだろうと思って派遣は捨てた。そんなんで消去法でフリーランスになることにしたよ。フリーランスとして何をするかっていうともちろんエンジニア。今までエンジニアやってきたからね。新卒で1年しか経験ないし、無理なんじゃね?って思ったけど、やってみないとわかんないよなって思ってエージェントに連絡してみようと思った。

エンジニアのフリーランスエージェントに連絡する

エンジニアのフリーランスを仲介してくれるエージェントってありますよね。有名なところだとレバテックやギークスなんかです。フリーランスエンジニアといっても、きっと週5で働くことになるし、正直面倒だなあって思ったけどまあ働くかと思って連絡した。いくつかエージェントに連絡したんだけど、自分の経験が少なくて門前払いのところもあったよ。どこのエージェントとは言わないけどね。

で、案件を紹介してもらって確か2社と面談してどっちもOK。その中から1つにしてその時の単価が50万いかないぐらいだった。もっと欲しいなーって思ったけど、まあいいかって思ってそのとき案件を受けた企業で働くことにした。今は別のエージェント使っているんだけど、やっぱりこの単価は安かったらしい。エージェントって最低いくらぐらい欲しいですか?みたいなことを聞いてくるんだけど、どれぐらいもらえるかなんて分からないじゃない。

新卒1年で辞めた自分の価値?知らねえよ?って思って「いやー、相場どれぐらいなんですかねー」なんていうノリでいったらそんなんになった。こんなこと言ったらまあそりゃあね。エージェント使うときにはお金に関しては割と強気に言った方がいいでしょう。そんな感じで紹介してもらって働くことになったんだけど、その現場忙しかったね。普通にメンタルやられたけど、まあ鍛えられたし良かったとする。

実務経験1年じゃエージェントで相手にされないかもしれないけど、自分は学生時代ベンチャー企業でエンジニアのインターン1年ぐらいしてたからそういうこともあって取ってくれたのかもしれない。エージェントは実務経験の年数をやたら重要視してくる気がするから、まあ経験年数はある方がいいよね。

今は

今はその時紹介してもらった案件とは別の案件を他のエージェントに紹介してもらってそこで働いてる。うーん、やっぱり働くのは大変だわ、ニートが恋しいけどでもニートになったらなったでいろいろ思うことはあるんだよなあ。

ニート生活は優雅なものだと思っていた

自分は不労所得得て、それで生活していければ幸せなんだろうなあ・・・って思っていたけど、なんかそれも違うらしい。ニート生活を経験して思ったけど、そんな単純なものでもない気がする。たぶん毎月100万円口座に入って、何もしない生活をしても多分つまらないんだろうなあと思ってしまった。ニート生活と同じように誰とも会わない家にこもるような生活だときっとそんな感じだろう。じゃあどんな生活なら幸せなんだよ!って感じだけど、どうなんだろうね。

今まで正社員・ニート・フリーランスってやってきたけど、どうもしっくりこない。ニートもダメ、週5正社員・フリーランスもダメなら間をとって週2,3ぐらいで働くのがいいかもしれない。たぶん人とのつながりとか話すことって大事な気がするからそれが満たせればなんかまた違う景色が見れる気がする。

これからは

これからどう生きるかっていうことをよく考えるんだけど、どう生きようかね。自分は何か作ることが嫌いじゃないみたいだから、やっぱりそういった方向で生活していこうかなーなんてことを思っていたりする。自分は浪人もしたし留年もして、その果てに就職した会社を一年で辞めてニートもして、どうも他の人と比べて社会の流れに乗っていけないなーって感じているからそれなりに自分のペースで生きていきたいと思う。

【AfterEffects】回転するロゴアニメーションを作る

f:id:utr066:20200220112220g:plain

今回はこれ作ります。ロゴの3D感が足りないけど、まあいいでしょう。。

Photoshopでロゴを作る

回している文字はAfterEffectsではなく、Photoshopで作っていきます。その作ったものをAfterEffectsで取り込んで動画を作っていこうという流れです。 Photoshopを開いたら、回転させたり文字等を作ります。今回はこれ。

f:id:utr066:20200220112709j:plain

このままだと平面なので、これを3Dにしていきます。3Dボタンを押して、いろいろ設定してきましょう。 f:id:utr066:20200220115412j:plain f:id:utr066:20200220113039j:plain

ShapePresetを好きなものに変えて、ExtrusionDepthの値を大きくします。3Dの設定をいじったら、ベベルとエンボスを与える。

f:id:utr066:20200220115147j:plain

良い感じの形になるように値を調整したら、3Dレイヤーのライトを調整する。

f:id:utr066:20200220115412j:plain

FrontInsrationMaterialっていうやつ。

f:id:utr066:20200220115632j:plain

ここにある値を自分好みに変えたら、あとは背景を切り抜いて画像にする。

f:id:utr066:20200220115947j:plain

これを今度はAfterEffectsで取り込んで回転させていく感じだね。

AfterEffectsでロゴアニメーションを作る

まずはさっきPhotoshopで作ったロゴを取り込みます。

f:id:utr066:20200220120228j:plain

取り込んだら適当に背景を入れましょう。今回は画像いれたけど、なんか自分で作ってもいいかもしれないね。

f:id:utr066:20200220120444j:plain

さて、ロゴを回していきましょう。くるくると回転させたいので2Dのままではだめです。Photoshopで作った取り込んだものを右クリックして3DLayerを選択します。

f:id:utr066:20200220120612j:plain

これで、くるくると回転させることができるようになったので、値を調整していきます。

f:id:utr066:20200220120957j:plain

YRotationの値をいじってロゴを回転させていってます。時間の流れに沿って回転するように適度なタイミングでキーフレームを打っていきましょう。再生すれば回転するアニメーションができているはず。

後は色合いを調整していくだけ。調整レイヤーを追加してLevelsを入れます。

f:id:utr066:20200220121229j:plain f:id:utr066:20200220121502j:plain

良い塩梅の暗さになるように調整しましょう。 あとは何でしょうね、回転するときに光が当たった方がかっこいいですね。ライトを追加しましょう。 右クリック→New→Light。

f:id:utr066:20200220121813j:plain f:id:utr066:20200220121902j:plain

なんか出ましたね。これをいじって光の当たり具合を調整していきます。再生しながら確かめつつ進めるとよいです。 ちょっとロゴの光り具合が足りないので、Glowを追加しましょう。

f:id:utr066:20200220122319j:plain

値をいじっていい感じに光らせます。納得したらいいんじゃないでしょうか。 これで終わり!

f:id:utr066:20200220112220g:plain

【AfterEffects】プラスチックなヌメリとした文字をアニメーションさせる

f:id:utr066:20200219143747g:plain

今回はこれを作っていきます。文字を何というかプラスチックっぽいぬめりとした加工をして、ぐにゅんっていうアニメーションを加えていきます。

じゃあさっそくいきましょう。 まずは、加工したいテキストを置いていきます。今回はmusic!

f:id:utr066:20200219144554j:plain

テキストのままだと加工しづらいので、シェイプにしてから加工していきたいです。 なので、テキストからシェイプを作成しましょう。 f:id:utr066:20200219144725j:plain

このシェイプは今は白で塗り潰されているけど、これを線だけで描くようにします。 f:id:utr066:20200219145110j:plain

Fillをなしにして、Strokeを2pxで設定します。

f:id:utr066:20200219145110j:plain

次に調整レイヤーを追加。

f:id:utr066:20200219145515j:plain

追加したらその調整レイヤーにCC.Plasticというエフェクトを加えましょう。

f:id:utr066:20200219145842j:plain

CC.Plasticの値をいろいろいじっていきます。値をいじりながらどんな動画になるのか確認しつつ進めるといいでしょう。 今回設定したものを貼っておくとこんな感じです。

f:id:utr066:20200219150210j:plain

文字を照らすライトが欲しいです。ライトを扱う調整レイヤーを追加して、CC.Spotlightというエフェクトを加えます。

f:id:utr066:20200219150926j:plain

値は好みで設定しましょう。 ほんの少し色味が気になるので、MatteChokerというエフェクトを加えます。新たに調整レイヤーを追加して加えました。 f:id:utr066:20200219151310j:plain

他にもまだまだ足りないものがありますね。調整レイヤーを追加して新たに以下のエフェクトを加えます。

- Mirror・・・文字をさかさまにして影のように伸びているようにしたい
- Levels・・・明るさ調整
- CC.Power Pin・・・Mirrorで設定した文字の形を調整する

まずMirrorだけど、これは文字を反対にして良い感じの位置に配置すればOK。 f:id:utr066:20200219152637j:plain

足りない位置の調整はCC.PowerPinで行うよ。

Levelsの値の調整は、いろいろいじいじしながら良い感じの数値にしていきましょう。 f:id:utr066:20200219152229j:plain

CC.PowerPinだけど、これはMirrorで設定した文字の形を良い感じにしていきます。 f:id:utr066:20200219152453j:plain

次は文字をぐにゅんと出すアニメーションを作っていきます。 調整レイヤーを新しく追加して、CC.Lensというアニメーションを追加しましょう。

f:id:utr066:20200219152916j:plain

Lensのsizeを調整してアニメーションさせていきます。sizeを時間で変化させるようにして良きタイミングでキーフレームを設定します。 これで再生するとぐわんと文字が出てくるでしょう。

後は、今まで設定してエフェクトの気になる部分の数値を調整して完了です。

f:id:utr066:20200219143747g:plain