ココアのお勉強ブログ

法政大学理工学研究科の大学院2年生です。主に深層学習を中心に勉強/研究しています。まだまだ初心者なので優しくしてくれると嬉しいです。きまぐれでイラストも描きます。イラスト:https://hotcocoagallery.jimdosite.com/ Blenderブログ:https://shade-gerbera-72a.notion.site/Blender-d9a0ac43bf26442da9eea3de365decf0

Unity入門してみた

買った本

ねこのやつを買いました。

www.amazon.co.jp

何でUnity?

blenderで作ったモデル動かしたいから。

作ったもの

f:id:hotcocoastudy:20211024114425g:plain

本通りに作った2Dゲーム

本の言うとおりに作るとネコがひたすらのぼるゲームになります。

想像していたよりは作りやすく、本もわかりやすかった気がします。

感想

ググってまで勉強する意欲がなかったので本を買ってしまったけど、多分ネットにも分かりやすい記事とかがある気がする。これからも色々なチュートリアルやってみよう(願望)

Blender入門してみた

最近3DCGソフト「Blender」に入門しました。

このはてなブログに書いても良かったのですが、何故かgifがうまくアップロードできなかったので以下のリンク先にまとめました。

shade-gerbera-72a.notion.site

基本的にはyoutubeチュートリアル動画を見て、出てきたショートカットやツールなどを1つずつまとめたものになります。

備忘録みたいなブログなので完全に自分用です。

まだ勉強中なのでどんどん更新していく予定です。

twitterでよく見る俺TUEEEEEEE3DCGを作れるように頑張ろうと思います。

翻訳付きの通話Webアプリ作って遊ぶ

作った画面

f:id:hotcocoastudy:20210429002916p:plain
まだデプロイしてないのでぼっちのデモになってる。

作った理由

Web Speech API割と精度いいなぁというのと、バカなので外国人と話すとき翻訳あると助かるなぁと思い組み合わせることにしました。

Web Speech APIで音声を認識→認識した音声をあらかじめGASで作っておいたgoogle翻訳の結果を返してくれるAPIを立ててそこに流す

というふうにしました。認識結果と翻訳内容はfirebaseのrealtime databaseに逐次保存されます。

あと画面共有機能の資料があまりなくて実装に苦労した。

感想

無料っていいね!

DeepL APIにしたらもっといいんだろうなと思いつつお金はかけたくないので保留

Gridsomeでポートフォリオ作ってみた

github.com unruffled-fermi-be1e3f.netlify.app

作った理由

就活でポートフォリオの提出がめちゃくちゃ多かったので作りました。

Vueはインターンシップで少しだけ触っていて、今回Markdownとかで書こうとかではないので別に使う必要はないけど、どうせなら何か知らないものも使ってみようと思ってVueのSSGフレームワークGridsomeを使ってみました。

Vue.jsのSSGフレームワークGridsomeはすごいぞ!! - Qiita

vuetifyを使った実装

vueでの開発はvuetifyを使うと楽なのでインストールしておきます。

$ npm install --save vuetify
$ npm install --save-dev webpack-node-externals

gridsome.server.jsを以下のように設定します。

const nodeExternals = require('webpack-node-externals');

module.exports = function (api) {
  api.chainWebpack((config, { isServer }) => {
    if (isServer) {
      config.externals([
        nodeExternals({
          allowlist: [/^vuetify/]
        })
      ])
    }
  })

  api.loadSource(({ addCollection }) => {
    // Use the Data Store API here: https://gridsome.org/docs/data-store-api/
  })

  api.createPages(({ createPage }) => {
    // Use the Pages API here: https://gridsome.org/docs/pages-api/
  })
}

vuetifyの使い方は簡単で公式ドキュメントの実装でやりたいことと似ているものを探してそれを使います。 vuetifyjs.com

例えば今回では

をコピーしてきて、不要な部分や直したいところは微調整します。

タイムラインのところの実装はEducation.vueを見ると若干変えてはいますが、ほぼ一致していることが分かります。
gridsome-portfolio/Education.vue at master · SyogoShibuya/gridsome-portfolio · GitHub

こんな感じで高速で実装できます。

デプロイ

Netlifyというものを用います。 新しくnetlify.tomlというファイルを作成し、以下のように記述します。

[build]
  publish = "dist"
  command = "gridsome build"

残りは以下のサイトのように書いたソースをGithubにあげ、NetlifyとGithubを連携させればデプロイ完了です。
Gridsomeを利用して簡単なサイトを作成しよう

感想

無料っていいね。