こんにちは！おさゆです。 突然ですが、お茶の水女子大学には「3年生合宿」というものが存在します。 毎年八王子のとある会場を貸し切って行っているようなのですが、私の年からは残念ながらコロナウイルスによりオンライン開催になっています。 （どうやら結構本格的な合宿らしく、夜になったらみんなでお酒を飲むそう！？で、普段見れない姿を見れたかもしれない？？？？！！！合宿やりたかったですね〜残念...） 話が逸れましたが、この合宿は「大学3年生が今後の進路や研究室を決めるために先生や先輩と対話する」ことを目的として開催されています。 私が3年生の時、希望する研究室はほぼ決まっていたものの、就職か院進かでとても悩んでいたので、大変ためになる合宿でした。 この合宿では先輩から３年生に向けて、研究室紹介動画を披露するのですが、その紹介動画を私たちB4が作成した時の話をします。 当時（？）、2chの創設者である「ひろゆき」さんの切り抜きが流行っていたので、そのパロディーを作ろう！という提案をしたのですが、その提案が通り（！）、 「YouTubeで配信をしている伊藤先生に対して生徒が伊藤研についてスーパーチャットで質問をし、それに先生が回答する」という方針で動画を作ることになりました。 後日、先生にはひろゆき氏になり切っていただき（笑）、撮影した動画はひろゆきマスター（？？？）の私が中心となって編集しました。 （その際、台詞や詳細についてかなりガッツリ書いた企画書（5P）を先生に提出したら、「こんなすごい企画書が事前に届いたのは初めてです！」と言われてシンプルに嬉しかった...！） やる時はとことんやるガチ勢で妥協はしたくなかったので、実際のひろゆき氏の切り抜きのようにテンポ良く、わかりやすい字幕になるようにかなりこだわりました。 完成した動画は4分程度のものにはなりますが、制作には9時間くらいかかったかもしれないです。疲れた。 そんなこんなで、実は動画編集は初心者なので、最初のチャット画面と、偽YouTubeの偽チャンネル「たかゆきの切り抜き」の枠組みは、nextjsで作った方が早いと思いました。 https://osayubot.vercel.app/demo/chat/ https://osayubot.vercel.app/demo/youtube/ （スクリーンムービーで作った用なのでレスポンシブ対応していません。） この枠組みをスクリーンムービーで録画し、作ったひろゆきの動画のはめ込み・全体の微調整をすることで、動画を無事完成させることができました！ ３年生に伊藤研の良さが無事届いていたらいいな〜！☺️

3年生に向けた研究室紹介ムービーを作成するためにページを作成してみました

研究室紹介ムービー制作

初めまして！osayubotです。 ・Next.js（TypeScript） ・Micro CMS ・Vercel を使って JAMstack な ブログを1日でサクッと実装してみました！ 実装のポイント ・0.1秒ごとにタイトルを表示させタイピングしているように見せる setIntervalを使いました。 countが変化するごとにuseEffectを発火させ実装しました。 苦労したところ ・センタリング なぜかスマホ表示で画面幅が100%を超えてしまって変な表示になっていました。 overflow-wrap: break-word; は英文字が長く続く場合は必須ですね！ 今後はこのブログを使って技術の積み上げをしていきたいと思っています！ よろしくお願いします！

Next.js と Micro CMS を使って JAMstack なブログを作成しました！