この記事は、SYSKEN Advent Calendar 2024 12月24日の記事です。
皆さん、こんにちは、今年で法律上大人になってしまった赤石匠です。
今夜はクリスマスイブですね。私はこの18年間、恋人がいたことは一度もないので今年も例年とかわらずひとりで過ごしています。
今回私は、SYSKEN Advent Calendar 2024のトリを任されました。去年もトリだったような…。今回の記事は、すこし長くなる予定なので前置きはこのくらいにしてさっそく本題へ移ります。
この記事は、SYSKEN Advent Calendar 2024年12月22日の記事です。
システム研究部のNotoです。
今年も残るところ80万秒程度となってきましたが皆様いかがお過ごしでしょうか？クリスマスが近づきイルミネーションが蔓延る昨今、研究室に落ちていたArduinoのテープライトでピカピカイルミネーションを作成したところ思いのほか愉快で楽しくなっている始末でございます。
常にゲーミングで面白さを探求している情報系高専生はGitHubのプロフィールもゴテゴテのピカピカになっているに違いません。そこで今回は、より楽しく愉快になるようGitHubのプロフィールにアニメーションを載せる方法を解説します。
GitHubプロフィールに動的なアニメーションを追加します。
完成品は以下のような感じです：
. ├── .github │ └── workflows │ └── animation.yml ├── script │ └── generate-animation.js ├── package.json └── README.md
class Ripple {
constructor(x, y, contributionCount, duration, delay) {
this.x = x;
this.y = y;
this.size = 20 + contributionCount * 3; // コントリビューション数に応じてサイズを決定
this.duration = duration;
this.delay = delay;
this.fillColor = "none";
this.isMultiCircle = false;
// ランダムに塗りつぶすかどうかを決定
if(Math.floor(Math.random() * 2) > 0) {
this.fillColor = "#4B9EF9";
}
// 大きな波紋の場合、複数の円を重ねる
if (this.size >= 80 && this.fillColor === "none") {
this.isMultiCircle = true;
}
}
}
async function getContributions(username) {
const query = `
query($username: String!) {
user(login: $username) {
contributionsCollection {
contributionCalendar {
totalContributions
weeks {
contributionDays {
contributionCount
date
}
}
}
}
}
}
`;
const response = await graphqlWithAuth(query, { username });
return response.user.contributionsCollection.contributionCalendar;
}
async function generateAnimation() {
const username = process.env.GITHUB_REPOSITORY.split('/')[0];
const contributionData = await getContributions(username);
const width = 800;
const height = 400;
const duration = 2; // 波紋が広がるまでの時間（秒）
let delay = 0;
// コントリビューションがある日のみ波紋を生成
const ripples = contributionData.weeks.flatMap((week) =>
week.contributionDays.filter(day => day.contributionCount > 0)
.map((day) => {
const { x, y } = getRandomPosition(width, height);
delay += Math.random() * 0.3; // 波紋の出現タイミングをずらす
return new Ripple(x, y, day.contributionCount, duration, delay);
})
);
// SVGの生成
const rippleSVGs = ripples.map(ripple => ripple.toSVG()).join('');
const svg = `
<svg
viewBox="0 0 ${width} ${height}"
xmlns="http://www.w3.org/2000/svg"
style="background: #0D1117">
<rect width="100%" height="100%" fill="#0D1117"></rect>
<g>${rippleSVGs}</g>
</svg>
`;
}
toSVG() {
return `
<circle
cx="${this.x}"
cy="${this.y}"
r="0"
fill="${this.fillColor}"
stroke="#4B9EF9"
stroke-width="1"
opacity="0.8">
<animate
attributeName="r"
begin="${this.delay}s"
from="0"
to="${this.size}"
dur="${this.duration}s"
fill="freeze"
values="0; ${this.size}"
keyTimes="0; 1"
keySplines="0 0.8 0.5 1"
calcMode="spline"></animate>
<animate
attributeName="opacity"
begin="${this.delay}s"
from="0.8"
to="0.2"
dur="${this.duration}s"
fill="freeze"></animate>
</circle>
`;
}
name: Generate GitHub Animation
on:
schedule:
- cron: "0 */24 * * *" # 24時間ごとに実行
workflow_dispatch: # 手動実行も可能
push:
branches:
- main # mainブランチへのプッシュでも実行
jobs:
generate:
permissions:
contents: write # リポジトリへの書き込み権限
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install dependencies
run: npm install
- name: Create Animation
run: |
mkdir -p dist
npm run generate
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
これらのコードが組み合わさることで、GitHubの活動状況に基づいた動的なアニメーションが生成され、自動的にプロフィールページに反映する事ができるようになります。
GitHubプロフィールをアニメーションで彩ることで、より魅力的な自己表現が可能になります。このような動的な要素を加えることで、プロフィールページが単なる情報の羅列ではなく、見る人の興味を引く展示になる事でしょう。
SVGアニメーションについては、より自分らしく楽しいものを作成しましょう！皆様も、ぜひ自分なりのアニメーションを作ってGitHubプロフィールを華やかにしてみてはいかがでしょうか。
この記事は、SYSKEN Advent Calendar 2024 12月20日の記事(の予定)でした。
皆さんこんにちはこんばんは。みずあめです。突然ですがマイクラにおける”アドオン”というものを知っていますでしょうか？
“Mod”という言葉なら聞いたことある人も増えると思いますが、どちらもマイクラに新しい要素を追加する、ユーザー制作の追加パックみたいなものです。(超大雑把)
わかりやすい違いは対応するゲームのバージョン(“アドオン”なら統合版、”Mod”ならJava版)と作成難易度です。今回は作成が比較的簡単なアドオン制作の前段階である環境整備について書いていこうと思います。
高専生ならこれらの作成に興味を持っている人間はいると思うので、今回の記事が役に立つと嬉しいです。
まず、今回はパソコンでの開発を考えています。(あんまりいないけど一応スマホでもできる)そのうえで、必要なもの(なければ購入が必要)なものは以下です。
これらがあればアドオン制作はできますが、あると便利になるものとして以下のダウンロードをおすすめします。(すべて無料)
続いてVSCodeの拡張機能のおすすめです。
Blockception’s Minecraft Bedrock Development
上はかなりの頻度で使うことになるUUID(簡単に言えばアドオンを区別するための固有のIDのこと)の生成をしてくれる拡張機能で、
下はフォルダ名にBP,bp(ビヘイビアーパックの略、アドオンの中身)RP,rp(リソースパックの略、アドオンの中身)が含まれているか、ファイルの場所がbehavior_packsもしくはresource_packsの下にある場合、マイクラのIDを予測候補として出してくれる機能です。
以上で入れておきたいあれこれは終わりです。お疲れさまでした。
環境整備はできたので、今度は作ってみましょう
私は主にサイトや動画などを調べて作り方を勉強中です。
ほかの勉強の仕方にあのGithubにマイクラ公式が公開しているサンプルアドオンがあります。https://github.com/Mojang/bedrock-samples
基本的な構造の勉強や、完成形などが分かるのでお勧めです。
今回の記事はいかがでしたか？
記事に書いてあることをすべてやりきるのにかかる時間は三十分もかからないんじゃないかなぁと思います。かなりハードルは低いですよ！！
やりたいと思っていたけどきっかけがない、一歩踏み出すのがめんどくさかった人などは、この機会にぜひぜひ作ってみて、知見を私にどしどし共有してほしいです。
そして、この度は大遅刻してしまい、大変申し訳ありませんでした。今後このようなことがないよう再発防止に努めていきます。
この記事で仲間が増えるといいなぁと願っています。ここまで記事を読んでいただき、ありがとうございました！
次回の記事は22日担当@Noto先輩の記事です。よろしければそちらもぜひご覧ください。
こんにちは！ u_kaiです。 突然ですが皆さん、お菓子は食べますか? 私はお菓子が大好きなのでよく食べるのですが、今回はその中でも特におすすめのお菓子を二つほどご紹介させていただきます!
おっと弱気になってはいけない。それでは早速紹介していきましょう!
まず最初におすすめさせていただくお菓子は宝製菓株式会社より「塩バタかまん」です!
個包装タイプの焼き菓子で、カマンベールチーズのクリームとサクサクとした食感の塩バタークッキーが最高においしく、そのあまじょっぱさが癖になってしまいついつい一袋食べてしまう個人的に最も好きなお菓子です。
値段は200円ちょっとと、まあまあお手頃なお値段で買えるのもGoodなポイントだと思います。
お茶菓子としてもすごくいいのでぜひ!
次におすすめさせていただくお菓子は江崎グリコ株式会社より「冬のきらめきポッキー」です!
こちらは冬季限定と販売されている期間が限られているのにおいしすぎると自分の中で話題になるほど病みつきになってしまったお菓子です。
普段のポッキーよりちょっと贅沢な雰囲気がある箱の中には、塩キャラメルの香ばしい香りで満ちており、一口食べると塩の塩味が甘さをより一層引き立て、あっという間に全部食べてしまうほどやみつきになってしまいます。
ちょっと短い記事になってしまいましたが、ここまで見てくださりありがとうございました!
個人的にお勧めしたいお菓子はまだまだ沢山あるのですが、それを書くにはあまりにも私の計画性が足りなかったということでこの記事を締めくくりたいと思います！ホントスミマセン…
ぜひよろしかったらほかの人の記事も見てみてください!
宝製菓 塩バタかまん 114g – カルディコーヒーファーム オンラインストア
この記事は、SYSKEN Advent Calendar 2024 12月16日の記事です。
こんにちは。kotetsuです。
皆さん、いもは好きですか？（私は大好きです）
このSYSKEN Advent Calendarに１年の頃から毎年参加していますが、毎年ギリギリです。
今年も例外ではなく、ギリギリで作業を始めました。
本当は「スノードーム作ってみた【blender】」という記事を書く予定でした。
12/15/20:30ごろから作業を開始
12/16/0:00に消灯後、順調に作業を進めいていきました。
しかし！
12/16/0:20ごろ、突如としてblenderが煌々と輝きだし動作を停止いたしました。
＼(^o^)／
気が狂いそうです。
というわけで！
文化祭で展示したアニメーション作品「やきいも。」について語りたいと思います。
皆さん、焼き芋は好きですか？（私は大好きです）
焼き芋って美味しいよねっていう理由からできたのが、この作品です。
様々なタスクに追われながら、ギリギリに仕上げた作品ですが、
当日はたくさんの方に見ていただき、「メディアコンテンツ部門２位」と良い成績を得ることができました。
兼部している美術部の展示にもこの作品を流用させていただきました。
原画：MediBang Paint（イラスト制作アプリ）
アニメーション：Live 2D（vtuberとかがつくれちゃうアプリ）
キャラクターをわが子だと思いながら、愛情を注いぎながら描き進めていきます。
どれだけ愛情を注ぐかによって作品の出来が大きく変わってきます。
キャラクターはもちろんですが、いもの描き込みも入念に行います。
美味しそうな焼き芋が描けてしまい、作業中にいもに見惚れ手が止まるという事態が発生してしまいました。お腹も減るし。
なんやかんや原画が描き終わったら、次はLive2Dに原画を読み込みます。
パーツごとにメッシュ割りという作業をしていきます。
なかなかにショッキングな画像ですね。
メッシュ割りが終わったら、割り当てた点を動かしてパラメータを設定していきます。
この作業中に１回データが飛び、危うく人間をやめるところでした。
パラメータを設定したら、いよいよアニメーションを作ります。
こちらもまた、点を動かして打っていく作業です。
ひたすら点を打って、動きを確認して気に食わないところを修正。という作業を繰り返します。
この作業は、私の性格上永遠に続けられてしまうため、妥協点を見つけないといけません。
そんな時に役に立つのが、同部屋です。皆さん、困ったら同部屋を頼りましょうね！
なんやかんや動画の書き出しなどをして、完成！
とってもかわいいアニメーションが出来上がりました！
以上が「やきいも。」の制作過程です。いかがだったでしょうか。
現在12/16/2:50なんとか書き終わることができました。（お腹減った）
もう少しでクリスマスですね。
家族と過ごす方や恋人と過ごす方、クリぼっちを満喫する方などいろいろだと思います。
皆様に素敵なクリスマスが訪れることを心から願っております。メリークリスマス！
次回のSYSKEN Advent Calendar 2024は12月18日、担当はu_kaiくんです！お楽しみに～
専攻科に入ってプロフィールの設定を変えてなかったため部員名簿から消されていたmakuraです(現在は復活)。
今回は今年の弥生祭で展示したVRサイクリングを紹介します。
昨年度に夜の学校を徘徊するVRをしたところ人気だったので今年は自転車で乗って校内一周したら楽しいのではないかと思いサイクリングしているVRを作りました。
大雑把な流れは以下の通りです。
今回使用したカメラはInsta360 ONE X2(自分も何使ったか半分覚えてないので間違っていたらごめん)
https://store.insta360.com/product/one_x2?X-Country=JP
これをGoogleマップのストリートビューの車と同じようにして撮影します。
しかし、360度カメラをヘルメットの上で固定するものがなかったのでカメラの手持ち棒を自身の背中に固定して撮影をしました。
自転車に乗り校内を一周走って撮影しました(撮影ミスで2周分走ったけど)。
イメージ図
ただの不審者ですね。
(昨年度も夜の学校のVR動画を撮るのに棒を持って校内をうろうろしていましたが)
撮った動画の編集を行います。まず、360度カメラで撮った動画は普通にファイルサイズが大きいので書き出す時に圧縮させてファイルサイズを減らします。
次にDaVinci Resolveを使い、必要のないところのカットや写ってしまった車のナンバーや人のモザイク処理を行います。今回は休日に学校で撮っているので人や車が少なかったのとファイルサイズを小さく画質が悪いのでそこまでモザイク処理を行わなくてもよかったです。
ただ、360度の映像を平面にして編集を行うのでかなりやりにくかったです。
VRヘッドセットは部活にあるMeta Oculus Quest 2(以下Oculus 2)を使っていきたいと思います。Windows経由で動画を入れます。昨年度、展示した時は専用の動画プレイヤーアプリをダウンロードしてやりましたが、Oculus 2をアップデートした際にOculus 2だけで360度の動画を再生できる既存のアプリ増えていたので(昨年度の自分が気がついていなかったのもあるかも)今回はそれを使いました。
昨年度、夜の学校を徘徊するVRをしたところ止まっているのに歩いていて不思議というのが多かったので、今回は家にあるエアロバイクを持ってきてエアロバイクにのってペダルを漕ぎながら動画を見てもらいました。これにより、実際に漕いでいるように感じ、また、VR酔いが起きにくくなると思いました。
そのおかげか今年も弥生祭でたくさんの人にやってもらい、やっている人も(知り合いがVRをつけてエアロバイクを漕いでいる絵面を)見ている人も楽しんでもらったと思います。
動画が貼れないので画像を代わりに貼ります。
今はVRに動画を流しているだけですが、時間があれば(多分ない)Googleマップみたいに好きな場所に自由に移動できるようにしたいです。
また、VRをやってくれる部員がいないので後輩にも教えていきたいと考えています。
最後まで読んでいただきありがとうございます。
次回は12月16日(月)でkotetsuさんです。よろしくお願いします。
1年ぶりですten-keyです。
今年の文化祭のビッグイベント、覚えてますか？そう、コスプレ大会ですね。去年私はカラオケ大会に出ましたが、開始一時間前に収録されてないと言い渡されたのでその恨み苦い経験から今年はカラオケ大会ではなくコスプレ大会に参戦しました。
私が扮したキャラクターは、みなさんご存じ東方Project、中でも東方永夜抄というゲームのラスボス、八意永琳です。肩書が「月の頭脳」であり、月出身の天才医師で不死の薬をも作った、という設定です。20年前のキャラですが、今年人気急上昇したのでみんな知ってるものとして扱います。完成したものはこちらになります。
初めてにしては可愛いねコスプレ大会本番では直前に考えたパフォーマンスで会場を盛り上げ、結果6位を取ることができました。え、1位じゃないのかって？他の出場者が面白すぎたのが悪い。舞台袖から見てた私もすごく楽しかったです。ぜひ来年もやってほしいところです。
少々遅くなりましたが、ここからは今年の私のコスプレ経験を体験談兼自分用備忘録に記事にしたいと思います。
服とウィッグはAmazonでポチりました。およそ￥12000。靴は去年吹奏楽のコンクールで一回履いたっきりになってたローファーを流用。世界観的にも合っていたので、吹奏楽に入っててよかったです。(違う、そうじゃない)
この記事の目玉はここからです。コスプレをするうえで、見栄えにかなり、ひょっとしたら一番影響を与えるかもしれない、「メイク」についてお話しましょう。感想から先に言うと、めっちゃ苦労しました。事前に何回も練習を重ねて本番へ臨みました。以下ざっくりした使用アイテムと手順です。
①下地
化粧でまず最初に手に取るのは「下地」と呼ばれる液体です。使用したのはこちら。
けちなので100均です。下地は肌の毛穴などの凹凸を埋めて、また肌の色を少し整えるために使い、化粧の出来に大きく関わります。
額・鼻筋・両頬・顎の5点にちょっとずつ乗せて広げるように塗ります。厚塗りしすぎると鼻の辺でぐちゃっとなって見栄え悪くなります。なりました(練習談)
②BBクリーム
なんか下地の上に乗せるやつ。2次下地みたいな感じ？
親のおさがり。正体は分からないですけどこれ塗るとかなりいい感じになるんですよね。肌の色が整うからかな。何でかは詳しく知らん。使い方は下地と同じ。
③ファンデーション
肌の色を整えるスペシャリストです。100均で購入したものです。
毛穴をしっかり埋めたりもするので、化粧した肌を本格的に作ります。
④シェーディング
影です。
顔のまわりや小鼻などに適宜描きいれることで、輪郭をシャープにしたり鼻を高く見せたりと、顔の見た目上の形に大きく影響を与えます。特に鼻の辺に塗るのは一瞬で印象が変わるので毎日やってもいいかなと思ってしまいます。面倒だからやらないけど100均で買いました。
⑤ハイライト
白い粉(健全)
頬や額の辺に塗ることで明るくなり、顔の印象をより明るく可愛くします。
⑥ビューラー&マスカラ
まつげを整えるやつらです。
上がビューラーで下がマスカラ。ビューラーでまつげをつまみ上げることで目をぱっちり大きく見せ、マスカラでまつげをはっきりさせつつ、形を崩れないようにします。もちろん100均。
⑦アイシャドウ
目の周りに塗ります。平成ギャルが目の周り真っ黒にしてるやつの親戚
明るい色で目元をはっきりさせ、次に暗い色で目を大きく見せます。目の印象は顔の中でも大きなウエイトを占めるので力を入れました。特にコスプレであれば塗りすぎなぐらいはっきり塗ってしまった方がいいです。特に黒色。瞼のふちの辺りにしっかり黒色を塗りました。この線を割と太くするとかなり印象が変わります。でも私の瞼の特性上、瞼を閉じて太く塗っても開くとふちの上に瞼の皮が乗って、線が隠れてしまうのでめっちゃ苦労しました。同じ理由でマスカラも苦労しました。この二つがメイクで一番時間取りました。おふこーすヒャッキン
⑧チーク
頬骨のあたりに塗ります。
ピンク色を付けることで印象を非常に可愛らしくします。いや本当に変わるんです。100円でこんな変わっていいんですかってぐらい。
⑨リップ
言わずもがな口紅。唇の色もだいぶ顔の印象にかかわってくるので、キャラのイメージを崩さない程度に明るい色を選びました。
⑩化粧定着スプレー
せっかく化粧しても崩れては意味がないですね。これを吹きかけると防げるらしいです。・・・あれ本番の時私やったっけ？？？
・・・女性の皆さんから怒られそうな適当な化粧紹介だなぁ。
まあとにかく、この記事を書いて自分の中でもコスプレの経験を言語化できました。実は来年、東京であるイベントでコスプレをすることを計画しておりますので、また新たなスキルを得て頑張りたいです！最後まで読んでいただきありがとうございました！
挨拶
こんにちはー。きのなこです。
最近タダで舞鶴に一週間旅行に行ったので、課題とかなんか色々たまりすぎてて、今大急ぎでこの記事書いてます。
まえおき
さぁさぁ時間もないですし。今年もシス研の活動とは関係ない資格を紹介することにします。
そう、飲食系の資格！食品衛生責任者ですっ。夏休みにとっちゃいましたー笑
え？飲食系なんてしょぼい？ 大丈夫！だってこの資格、国家資格だもん！！
取った経緯
とあるところにアルバイト依存症のアホがいました。そのアホは毎日毎日、狂ったようにバイトをしていました。そしてなんやかんやいろいろありました。最後にそのアホが行き着いた先は飲食店でのアルバイト(かけもち)でした。
はい。飲食店で別にもってなくていいけど、もってるとおっ！！ってなる資格が…そう！食品衛生責任者なんです。
取り方
FP3級より簡単です。
各都道府県の講習を一日受けるだけ。
簡単、誰でもできちゃう。詳しくはggってね！
最後に
雑になりましたが、説明としては十分でしょう。自分はまだ明日提出のレポートが終わってないのでこれから頑張ります。
みんな、変な資格とってる暇あったら、勉強と課題しようね。単位落とすよ？
SYSKEN Advent Calendar 2024、次回の担当はten-keyくんです。期待してます！
この記事は、SYSKEN Advent Calendar 2024 12月8日の記事です。
こんにちは！システム研究部のIzumoi1114です。
アドベントカレンダーのテーマを考えている時、自分にはWeb開発しか取り柄がないことに気がつきました。なので、簡単なWebアプリを作ろうと思います。
当初は「みんなが模写できるような短いコードで書くぞ」と意気込みましたが、無駄にこだわってしまったせいで中途半端に長く、汚くなってしまいました。ごめんなさい。
何を作るかとても迷いました。
簡単なWebアプリといえば、ToDoリストだと思います。そして、クリスマスの時期です。この2つを合わせれば良いんじゃないかと思いました。
結論: クリスマス仕様のToDoリスト
まず雪を降らせたかったのでライブラリを漁っていると、particles.jsといういい感じのやつを見つけました。
設定を少しいじると、雪を降らせることができました。(見えない)
完成したアプリはここで見ることができます！(PCだと綺麗に見れます)
雪だるまのアニメーションがお気に入りです。
また、ソースコードがこちらにあります。
自分のPCにダウンロードして色々アレンジしてみてください！
質問があればいつでもお待ちしてます。
最後まで読んでくださりありがとうございました。
少しでもWeb開発に興味を持ってくれたら嬉しいです。
10月19~20日に開催された第３５回高専プロコンに競技部門で参加しました。
お久しぶりです。きのなこです！
プロコンに参加してきたのでレポート書きます。自分は何もしてない見てるだけのごみだったのですが、めっちゃ楽しかったです。
競技部門は 予選2位通過、準決勝4位敗退でした。
名刺クエスト 企業と学生部門どちらも上位10チームでした！(10000円分のアマギフGET!!)
当日の競技中の様子は以下の動画でご覧ください。
http://www.youtube.com/live/yIifjdYdwkY?si=8jBZY1ikWa1dEkL5
http://www.youtube.com/live/DBorqw6p_bM?si=sP535AB4ttgPlXbr
今回、競技で使ったプログラムは全部、赤石匠くんがYokochi先輩の協力のもと、一人で頑張ってくれたものです。ほんとにすごい尊敬、感謝です。後輩のシャケもチームの紹介動画制作とかたくさん頑張ってました。それに比べて自分、何もしてないゴミすぎる。 競技部門を通して、他高専のアルゴリズムやプログラムを見せていただいたり、徹夜部門とかいう人もいて、いろんな意味でとてもいい経験になったのと、友達１００人できました！(*^^)v
