2Dの美少女を受肉しよう!

この記事は、SYSKEN Advent Calendar 2021の13日目の記事です。

はじめまして、3年生のRainです。
システム研究部の数少ない女子部員です。女子部員絶賛募集中です。

今日の記事はLive2Dでバ美肉する話をします。

 

1.Live2Dについて

Live2Dってご存知ですか。最近のソシャゲとかVTuberとかでいっぱい使われてますよね。
イラストを頑張ってウニャウニャすると動くアレです。

 

2.原画を生成します

自分は少しだけ絵が描けるので原画を生成します。
何かしらのペイントソフトで描けば生成されますが、自分はCLIP STUDIO PAINTを使いました。
動かしたい所ごとにレイヤーを分けました。レイヤー数は58くらいあるらしいです。
絵ができたらPSDデータで保存します。

全身を作ることをさぼってしまったのでバストアップしかありません。

 

3.モデリングする

Live2D Cubism EditorにさっきのPSDデータを放り込みます。

自動でメッシュを設定してくれる機能があるので、その機能でメッシュを生成します。
目とか口とかは細かく綺麗に動かしたかったので手動でメッシュを生成しました。一個ずつ点を打っています。


すごい画像ですね。恐れることはありません。

パラメータに変形のアレコレを設定していきます。
こんな感じで動いてほしいなあ〜みたいなのを、メッシュを変形させて作っていきます。
笑顔や口の動き、髪の揺れなどいっぱいこだわれて楽しいです。

物理演算も設定していきます。
これは感覚です。よく分かりませんが可愛くできたっぽいので良さそうです。

モデリングができました!

 

4.トラッキングして動かす

今回はkalidofaceというブラウザで動くやつを使います。ありがたい。
作ったモデルを動かすためにトラッキングアプリにデータを放り込みます。
カメラをオンにすればトラッキングして動いてくれます!やったー!

超楽しい〜〜〜〜!!!

 

5.最後に

分かりましたか。分かりませんよね。
この記事はLive2Dに興味を持ってもらいたいための記事なので、きちんとやりたいならLive2D公式やクリエイターの方々が良いチュートリアルを用意してくださっているのでそれを見ましょう。

自分の絵が動くのはめちゃめちゃ楽しいです。みんなもLive2Dをやろう!

Trelloを使って大量のタスクを管理しよう!!

This article is the 10th day of the SYSKEN Advent Calendar 2021.
1202 radnelaC tnevdA NEKSYS eht fo yad ht01 eht si elcitra sihT

おはこんにちは、river Kです。連日耐え難い寒しさにいささか参っておりますが、
タスクを大量に抱えてしまい。どうすればいいのかわからなくなってきて
頭をフリーズさせている頃かと思います。
12月の暦の読みは師走といいますし、頭にシワを寄せて考え込んでいると
そのしわ寄せが舞い込んできて走る羽目になる方も少なくないはずです。

そんな悲劇を起こさないためにこのブログでは自身がいまするべきこと、
していることの管理の補助をしてくれるTrelloの使い方やテンプレートの作成など
一通り解説していこうと思います。

目次

  • 使い方
  • テンプレート
  • power-upについて
  • まとめ

使い方

まず初めにTrelloにはweb版とアプリ版がありますが、
今回私はweb版のTrelloについて話します。
特にこれっと言って違いはないかもしれませんが、一応気を付けてください。

ログインする

  1. アカウントにログインする
  2. 無料トライやるは無視しましょう
  3. 画像の画面にたどり着く

ボードを作ってみる

  1. 左端のボードと書いてあるところを押す
  2. [新しいボードを作成]を押す
  3. タイトルを入力する(今回はタイトルという名前にしました)

このボードの名前は自信が現在抱えているプロジェクトや
これから作るカードの内容に合わせてつけるのがよいと思います

画像の状態になると思います
(背景は自身で選択するかランダムで決まるので違っても気にしなくて大丈夫です)

ここでざっくり用語や映し出されている内容について説明します。
まず最初の画像に移っているものをワークスペースといいます。
そして2番目の画像に移っている画面そのものをボードいいます。
2番目の画像に移っている[ToDo]や[作業中]と書いてある白い四角を
カードといいます。

ワークスペースは先ほど挙げたボードを管理し,
ボードは先ほど挙げたカードを管理する空間となっています

ワークスペースの中の[タイトル]ボードの中の[ToDo]カードという状態です

タスクを作ってみる

  1. カードの下にある[追加]をクリック
  2. 名前を作る
  3. エンターを押す

こんな感じになればよいです。
ここでいうタスクとは今自身が抱えている仕事内容のことです。
1タスクに使う文字が大きくならないようにしましょう。

もし仮に長くしないと表せないようであれば1タスクとして書くのではなく、
複数のタスクに分けて書くとよいと思います。

このタスク並びにカードは左クリックを押し[アーカイブ]というところを押すことで
消すことができます

カードの並べ方のテンプレート

最初にも述べましたがTrelloはタスクを管理の補助をしてくれるソフトです。
しかし、管理するといっても様々な方法があります。
そのため、どのように管理すればいいかわからない方もいると思います。
そんな方のために今回一つテンプレートとなるものを紹介させていただきます。

まず前提として何かしらのプロジェクトを進めている状態であるとします。

カードの解説

左端から順番に
[Backlog],[ToDo],[Doing],[Review],[Done]となっています。

[Backlog]は今していること全体を通してのタスクを書く場所です。
[ToDo]は前後二週間くらいから取り掛かることのできるタスクを置く場所
[Doing]は現在進行形で取り掛かっている状態のタスクを置く場所
[Review]一応完了していているが見直しや感想をもらいに行きたいタスクを置く場所
[Done]完全に終了しているタスクを置く場所

 

使い方

  1. [Backlog]にタスクを追加する
  2. [ToDo]または[Doing]に移動させる
  3. タスクが終わったら[Review]に移動させる
  4. 完全に終わったら[Done]に移動させる

イメージとして[Backlog]から[Done]にめがけてタスクが移動する感じです。

power-upについて

power-upとは

trelloの個人のボード一つ一つに追加することができる特殊な機能で
例えば、カレンダーを作ったり、期限の設定を見やすくしたり
google、slackなどと連携したりも可能です。
時間経過でカードが錆びていくようなものもあります。

入れ方

  1. 画面右上にある[・・・ボードメニューを表示]をクリック
  2. power-upと書いてあるところクリック
  3. 入れたいと思ったものを選び追加を押す

画像は特にないです正直ちょっと疲れた

おすすめ

  • カードエイジング : 時間経過によってタスクの色が変化していくもの
  • カレンダー : 期限を入力するとカレンダーにそのタスクをカレンダーに表示してくれるもの
  • Countdown : 期限を設定するとその期限まであと何日か表示してくれいるもの

このほかにも自信が使いやすいと感じたものを入れて
自分なりのボードを作っておくとTrelloを開くのが楽しくなるので
より長続きしやすくなると思います

まとめ

まず、使い方についてなのですがTrelloにはPower-upを入れなくても
様々な機能がついており、それを説明するだけでも大量の時間を要するため
簡単な内容までしか紹介しきれていません。
なので、とりあえず色々調べてみたり使ってみたりしてみてください!

次に、テンプレートの話なのですが、今回のテンプレートは
何かのプロジェクトをする前提のテンプレートなので、
紹介したものが必ずしも正しい使い方というわけではありません。

私ことriver KはTrelloで一か月リストを作成し、それを全員が見れるように公開しています。
URLを張っておくので見てみたい方はそちらをクリックしてください!!

https://trello.com/b/merzNlA3/%E4%B8%80%E3%81%8B%E6%9C%88%E3%83%AA%E3%82%B9%E3%83%88

次回(明後日)はRain先輩になります。お楽しみに!

追記

最近、部活に行かない時間と先輩が部活に来る時間がぴったりとかみ合ってしまって
まるで先輩を避けてるみたいだなぁと感じてしまったので、ここで謝罪させていただきます。

ポスターをゆるく作る

この記事は、SYSKEN Advent Calendar 2021 9日目の記事です。(みんなこの書き出しだけどこれで固定なの)

こんにちは、名前を改名したばかりのまくらです。寒い日が続きカイロが必須になってきました。

今回は部室に貼るポスターを作っていきたいと思います。

目次

  • 作る理由
  • 作ったもの
  • 最後に

作る理由

今回、どうしてポスターを作るかと言いますとこのように注意書きを養生テープや付箋に書いて汚いことになっているので一つの紙にまとめたいなと思ったので作ろうと思います。

作ったもの

私はデザインのソフトとかよく分からないので、使うソフトはfirealpacaを使って作っていきます。

まず文字だけ入れて見たもの

 

これでは物足りないのでせっかくfirealpacaを使っているので絵を入れてみます。

最近ハマっているのを書いて見ました。

ついでにゴミ箱も養生テープで書いているので作って見ました。

最後に

今回はポスターを作って見ました。自分は絵を描いたりするのが好きなのですが、なかなか人に見せることが恥ずかしくてあまり描いてないです。自分の好きなことが思いっきりできるように頑張っていきたいです。

次回(明後日)はriver K君になります。お楽しみに!

 

がんばれ〜(グルグルグルグルグルグルグルグル)

 

スプーンを創造してみよう。

この記事は、SYSKEN Advent Calendar 2021 7日目の記事です。

おはようございます、Notoです。12月某日部長先輩から「君たちAdvent Calenderをかかないか」と遅ればせながらお達しがあり少しは部活っぽいことしないとと思い筆を執った次第です。題名にはスプーンの創造と書いてありますがもちろん金属からではなくBlenderという3DCGソフトフェアを使い作っていきます。対戦よろしくお願いします。

目次

  1. Blenderとは?
  2. スプーンを作ってみる
  3. 最後に

1、Blenderとは?

さあ、みなさんBlenderというソフトを知っていますか。インターネットをかじっている高専生諸君は一度ぐらいは聞いたことがあるのでしょう。Blenderは完全無料で使えるオープンソースの総合3DCGソフトフェアです。3DCGはもちろんのこと動画編集やVFX、お絵かきなどいろいろなことができます。すべての機能を完全に網羅することは不可能といわれるほどたくさんの機能を持っています。この記事ではBlenderを使い簡単でそれっぽい割と完成度の高いスプーンを作っていきます。完成図としてはアイキャッチ画像のようなものができる予定です。

2、スプーンを作ってみよう

1、形を作る

まずは簡単に形を作ってみましょう。ベースはUV球を使います。UV球を生成して編集モードに移行。そのあとに上半分を消します。これですくう部分ができましたね。

次に持つ部分を作ってみましょう。真ん中の辺を二つ選択してEキーで押し出しましょう。スプーンの持ち手は途中で折れ曲がっているのでしっかり折り曲げていきましょう。これでもうスプーンはできたも同然です。

少し形を整えていきましょう。実際のスプーンを見ながら直していくとわかりやすいです。すくう部分の先端を長くして、そこを少し浅くします。そのあとに折れ曲がっているところを細くします。もうこれはスプーンです。

ここでモデファイヤーを使います。ソリッド化でスプーンに厚みをつけていきます。適当にこんなものかなーって感じで厚みをつけてそのあとにサブディビジョンサーフェースを使い滑らかにします。これで形は完成です。

2、色を付けよう。

色というか質感をつけていきます。マテリアルについてはGoogleを参照しましょう。その方が分かりやすくたくさんの情報が出てきてくれることでしょう。説明が面倒くさくなってきたわけではありません。

あとは地面を作って、世界を貼って、カメラを設置してそれっぽくすれば完成です。レンダリングして観賞しましょう。やったね!

3、最後に

ここまでBlenderでスプーンを創造する方法を書いてきました。いかがだったでしょうか。授業の休み時間に作ったのでスプーンがとても雑なことになっています。持ち手の部分が短すぎますね。まあ、ご愛嬌ということで。これをきっかけに「Blender触ってみたいなぁ」と思ってもらえれば幸いです。「Blender tutorial」と調べるとたくさんの資料が出てくるので作ってみると楽しいのではないでしょうか。では、また会う日まで。アデュー。

次の担当はtamuaki先輩です。楽しみに待ちましょう。

等身大美少女ロボット制作計画(足立レイ)を勝手に紹介

この記事は、SYSKEN Advent Calendar 2021 5日目の記事です。

初めまして、Tomookiです。Vtuberと合成音声キャラが好きな2年生です。

一部界隈では有名なのですでに知っている方がいるかもしれませんが、

今回紹介することは みさいるさんの「等身大美少女ロボット制作計画」とそれで開発中の「足立レイ」についてです。

ものっすごくロマンのある計画なのでとりあえず見てみてほしいです。

目次

・等身大美少女ロボット制作計画と足立レイ

・足立レイの読み上げソフト

・現状

続きを読む »

入退室管理システム Monban を支える技術

この記事は、SYSKEN Advent Calendar 2021 3日目の記事です。

あらたです。 後期中間試験が終わり、最近は寒い日が続くようになってきました。

今回はシステム研究部で開発・運用を行っている入退室管理システムについて書いていきます。

目次

  • 背景
  • 作ったもの
  • 使用した技術
  • 感想

背景

昨年度から本校では感染症対策のため、課外活動に参加した学生を記録するようになりました。これを受けてシステム研究部では、Google Formsを使用して課外活動に参加した部員を記録していました。しかしこの方法は、正直に言ってかなり面倒です。記録を取るためだけに以下の行程が必要になります。

  1. QRコードをスマホで読み取る
  2. 必要な情報を記入する
  3. 送信する

1回の記録に1分かかると考えれば、5年間ある高専生活のうち30時間を無駄にすることになります。貴重な青春時代をそんなことで失うわけにはいきません。そこで、学生証だけで記録を取ることができる本システムのアイデアを思いつきました。

作ったもの

部室の入室時と退出時に学生証をかざすと、氏名と時刻が自動で記録されます。同時にSlackのチャンネルにも投稿され、誰が部室にいるのかを観測できます。

初期バージョンの開発期間は1日で、部費で購入してもらった機器が届いたその日のうちに動くものをつくりました。高専プロコンで忙しい時期に他のことをしたくなるのはよくあることだと思います。

使用した技術

構成図は以下のようになっています。

クライアントサイド

ハードウェアとして、鯖室にあったRaspberry Pi Model B+ v1.2と購入したSony PaSoRi RC-S380を使用しています。ここらへんの機材を発掘できるのは鯖室のよいところだと思います。

こちら側でしている処理は非常に単純で、学生証から読み取った学籍番号をサーバーに投げるだけです。インターネットへの接続や重複を防ぐ処理など面倒な部分がいくつかありましたが、それだけでした。

サーバーサイド

GolangとEchoでAPIサーバーを実装して、それをHerokuにデプロイしています。クライアントから受け取った情報は適切な加工を施したあとにGoogle Sheetsへ保存します。

最初はDBに保存しようと考えていましたが、データの取り出しやすさや安定性を考え最終的にGoogle Sheetsを選択しました。スマホからもデータを確認することができるため、よい選択だったのではと考えています。

「記録されたデータの可視化を行うサイトを構築する」というアイデアもありましたが、氏名や学籍番号、活動時間といった個人情報がインターネットに公開されるのはまずいと考え断念しました。ただ、かなりの量のデータが収集されるため、部内ハッカソンでなにかに活かせればと思っています。

感想

今のところは元気に動いてくれていてとても楽しいです。アイデア段階ではまったく想定していなかった活用方法もあり、なかなか便利なシステムになりました。特に、誰が部室にいるのかを把握できるようになったのは一つの革命だと思っています。

一方で、以前までシス研で使用されていた鍵管理ツールのように製作者依存の運用になっていることは大きな課題です。部として運用するための仕組みを整えつつ、今後もシステムを改善していきたいです。

明後日はTomookiの投稿です。お楽しみに!

線を引くだけ

この記事は、SYSKEN Advent Calendar 2021の2日目1日目の記事です。

 

こんばんは、部長です。ポケモン厳選にいそしんでいたためAdvent Calenderに取り掛かるのが遅くなってしまったことをお詫びします。

さて、今回の記事はIllustratorで線を引くだけのものです。

Illustrator(以下Aiと表記)は皆さんご存じAdobeが開発・提供しているデザインソフトです。AiはPhotoshopなどの色のついた点の集合を扱うものとは違い、ベクターデータを扱うソフトです。ベクターデータ、つまり線のデータを扱うため後から拡大縮小しても崩れにくいというのが特徴です。

Aiはベクターデータを扱うと言いました。つまり、線のデータが無いところに突然物を生やす、といった行為はできません。なにを表現するにもかならず線を引く必要があります。そのことを踏まえてデザインを構築していきましょう。

 

1.線を引く

線を引くにもいきなりフリーハンドで作っていくことはハードルが高いですし、整ったものを作るのは困難だと思います。そこで、Aiの「ペンツール」を使って線を引いていきます。このペンツールはクリックした場所を経由して折れ線を引いてくれます。始まりと終わりの2点だけを指定すれば1本の直線を引けますね。

ペンツールでひたすら線を引いていくことでもデザインはできていきますが、それでは昨今流行の正円や正方形をベースとしたデザインはかなりめんどくさいものになりますね。そこで、「長方形ツール」や「楕円ツール」を使用していきます。

これらのツールを使えばすべての角が直角な長方形や綺麗な円を使って様々なデザインを作れますね。Shiftキーを押しながら使えば正方形や正円だって綺麗に作れます。

2.色を付ける

先ほどAiは線のデータを扱うと言いました。ですが線だけでデザインを作るのはいささかハードルが高すぎます。そこで、先ほど引いた線の中の色を決めればどうでしょうか。だいぶ印象が変わりましたね。

ざっくり言うとAiは線がどこにあるか、そして線が何色か、線の内側は何色か、の3つがカギになります。というかすべてこれでできているといっても過言ではないでしょう。この3つをいじっていくだけでほとんどの形が作れます。

さて、結局はこの2つだけわかっていれば基本的には問題ないのですが、さすがにこれだけではいささか不便です。ここからはこれらを念頭に置いていろんな形を作るうえであると便利なことを並べていきます。

 

組み合わせる

基本的には1に描いた「ペンツール」と「長方形ツール」、「楕円ツール」をメインに作っていきます。では例えばNintendo SwitchのイラストをAiで作ろうと思うとどうすればいいでしょうか。

Switchを単純な図形に置き換えて考えてみましょう。画面がある本体の形は長方形です。その横についているJoy-conも長方形ですね。正面から見てしまえばSwitchは大小3つの長方形が並んでいますね。ということでまずは大きな長方形を真ん中にその左右に小さい長方形を置いてみましょうか。

うん、だいぶSwitchぽいですね。そんなことないですか?

では左右の長方形の外側の角を丸めてみましょうか。Shiftキーを押しながら選択をすると複数選択ができます。その状態でCtrl(Macならcommand)キーを押すと四角形の角に丸い印が出ますね。そのCtrlを押した状態でSthitを押して、その状態で丸めたい角を選択します。丸めたい角にある丸い印が青くなっていればその状態で丸めたいだけ内側にその印をドラッグします。

こうすればほら、だいぶSwitchっぽいんじゃないですか? え、まだダメ? じゃあ今度はジョイスティックと各種ボタンを足していきましょうか。

今度はもっと簡単です。長方形ツールでそれぞれにちょうど合ったサイズの円を足していきます。この時に作るのはジョイスティック用の丸が1つとボタン用の丸が1つだけです。それがつくれたらAltキーを押しながらドラッグしてみてください。複製できましたね。複数の同じサイズのものを置く場合、1つを複製した方がきれいに作れるのでこれを使って他のパーツも作っていきます。

かなりSwitchに見えてきましたね。それぞれの中に色を付ければSwitchだとわかるのではないでしょうか。

 

Illustratorでデザインをするうえで重要になるのは組み合わせて形を作っていくことです。そのほかにも面白い機能はいろいろあるのでまずは触ってみてください!

 

余談ですが、今回Advent Calenderの参加者が少ないので1日おきに記事を出します。1日目を僕がしくじったので次は明日、3日です。