<h2 id="h9707d3a59a">概要</h2><p>筑波大学院において単位の他に「コンピテンシ」という概念があります。授業を通じて取得するなどして指定のコンピテンシを満たさないと卒業できないのです。さらにコンピテンシにはいくつかの項目があり、授業によってどの項目が何ポイントなのかが異なります。そのため、授業計画を立てるにあたってコンピテンシの計算が非常にややこしいのです。しかし公式に計算ツールを提供していないため計算ツールを作成しました。</p><h2 id="hd4d34ed888">技術</h2><p>サクッと作りたかったため、React + MUIを用いています。CSVのパースのみ友人に作ってもらいました。<br>コンピテンシの計算は非常に複雑なため、一部の計算処理は実現できていませんが、大学院を卒業するまで少しずつアップデートを重ねる予定です。</p><h2 id="he4ba96ecb5">リンク</h2><p>GitHub: <a href="https://github.com/takonasu/cs-achievement-evalutaion" target="_blank" rel="noopener noreferrer">https://github.com/takonasu/cs-achievement-evalutaion</a><br>作品のページ：<a href="https://work.takonasu.net/competency_checker/" target="_blank" rel="noopener noreferrer">https://work.takonasu.net/competency_checker/</a><br></p>

筑波大学院において単位の他に「コンピテンシ」を満たさないと卒業できない。しかし公式に計算ツールを提供していないためツールを作成。

情報理工学位P 達成度評価チェッカー

<h2 id="h48162eced8">使用技術</h2><p>Next.js + Vercel + MicroCMSのJamstack構成で構築されています。今まで作成してきたポートフォリオは作品の一覧のみ公開してきましたが、その作品の詳細を記載することはありませんでした。<br>そこで、記事の形式作品の詳細を記載でき、カスタイマイズが柔軟であることからJamStack構成を採用しました。</p><h3 id="h764239889a">Next.js採択理由</h3><p>今まで僕はVueを用いてWEBページを作ることが多かったのですが、2021-2022年現在ではReactをベースにしたプロジェクトの方が多い気がしています。また、参加させていただいている各種プロジェクトは軒並みReactを採用していることから、Reactを用いることは決めていました。<br>headlessCMSにおいてNext.jsはよく利用されており、また、Next.jsを用いたプロジェクトに参加していることから、勉強を兼ねてNext.jsを採用しました。<br>なお、言語はTypeScriptを用いています。（型付けによるメリットが非常に大きいので、JavaScriptは極力避けたいと思っています。）</p><h3 id="hd296ee31e6">Vercel採択理由</h3><p>Next.jsを採用した時点で、楽にデプロイすることが可能なVercelを採用することは必然的に決まっていました。無料枠でかなり自由に利用することができます。<br>今までのポートフォリオはVPS上に構築していましたが、サーバレスの恩恵は非常に大きいです。自動デプロイやmicroCMSなどとの連携が楽にできます。GitHubにpushするだけで、自動でデプロイすることが可能であり、プレビューもできることから採用しない理由はありませんでした。初期設定もほぼ不要で利用できます。</p><h3 id="hb878da870a">MicroCMS採択理由</h3><p>日本発のheadlessCMSのサービスとのことで、第一候補に挙がりました。また、無料枠でできることが非常に多く、画像等の貼り付けも自由にできます。<br>日本語ドキュメントがあるため安心感があります。また参加させていただいているプロジェクトでmicroCMSの利用を検討していたため、学習もかねて採用しました。<br>TypeScriptを利用した際にAPIカラムの型定義を自分でする必要があるなど少々手間がかかりましたが、サードパーティー製のライブラリを用いることで簡単に解決しました。</p><h3 id="hfa2224d677">スタイリング（CSS）について</h3><p>今回のこだわりポイントとして、CSSフレームワークを一切使用していない点が挙げられます。SCSSによってフルスクラッチでスタイリングされています。<br>これは、より柔軟にしかし統一されたデザインを目指したことによります。また、最近CSSフレームワークを利用することが多くなりCSSを直接書く機会が減ってしまい、忘れている懸念があったからです。<br>部品をComponentに分割することでCSSフレームワークのように使いまわすことができるのでフルスクラッチによる構築はこの規模の個人開発ではスムーズでした。<br>もちろんレスポンシブル対応です。<br></p><h2 id="hb570a6676d">デザイン</h2><p>デザインテーマは「<span style="color:#202124">START!! True dreams</span>」です。<br>僕の趣味であり好きなコンテンツである、「<a style="color:#030303" href="https://www.lovelive-anime.jp/yuigaoka/" target="_blank" rel="noopener noreferrer">ラブライブ！スーパースター!!</a><span style="color:#030303">」の第1期オープニングテーマ楽曲の千鳥格子柄が気に入ったことにより採用しました。</span><br><span style="color:#030303">赤を基調としたWEBサイトを目指しています。なお、どうしてもこの5人のメンバーカラーを導入したいという気持ちが抑えられず、フッターにて使用しています。</span><br>素材等はすべて自前で作成しました。<br>スカートの柄である、「千鳥格子」の和柄は Adobe Illustrator にて作成しています。<br>第1テーマカラーとして<span style="background-color:#b8373f"> </span><span style="color:#ffffff;background-color:#b8373f">#b8373f  </span><br>第2テーマカラーとして<span style="color:#ffffff;background-color:#c14c5a"> #c14c5a  </span><br>を採用しています。<br>デザインツールとしてFigmaを用いています。あらかじめデザインを決めてからコーディングをするのは非常に大切ですね。<br><br><img src="https://images.microcms-assets.io/assets/45a0007befd1426591abee1d674af0dc/85fbe22f674547238e2db60de3794580/image.png" alt=""></p>

Next.js + Vercel + MicroCMSのJamstack構成

Portfolio

<h2 id="h9707d3a59a">概要</h2><p>2020年、新型コロナウイルスによって大学の授業はフルオンライン化しました。先生方も手探り状態で授業をしていたかと思います。そんななか、動画中スライドを使って授業をするがスライド自体は配布しない先生方が多くいらっしゃいました。<br>私たちとしてもスライド自体にメモを書き込みたいわけで、動画からスライドを取得したい思いがありました。しかしいちいちスクリーンショットを撮るのは非常に手間です。<br>「スライドぶっこ抜きマン」は、スライドが切り替わったときのみ動画からスライドを自動で抽出してくれるソフトウェアです。<br>自分用に作りましたが、反響を呼び需要があったために公開に至りました。<br><br></p><h2 id="hce931db633">技術的概要</h2><p>OpenCVとC++を用いています。一定フレーム間の差分を計算することで、スライドの切り替わりを検出します。<br>スライドに先生が書き込んだ場合や、動画のノイズが乗った場合でも変更を検知して抽出してしまうことがあります。そのため、フィルターをかけて平滑化した後に差分をとり、ユーザが指定した閾値を超えた場合のみ抽出します。閾値をユーザが指定する必要があるのは、動画によってノイズの乗り具合が異なってしまうことと、スライドのアニメーションでも検知してしまうことをどの程度防ぐかなど好みや状況によることが多くなってしまうためです。<br>現在では利用されることが（おそらく）なくなりましたが、公開目的で作っていなかったため稚拙なプログラムを書いてしまっているので書き直したいです・・・。<br><br>自分用に作ったためCLIでしか動作しない予定でしたが、数人のコントリビューションによってMacにおいてはGUIを、WindowsではCLIだが対話型のやり取りで使用できるようになりました。<br></p><h2 id="he4ba96ecb5">リンク</h2><p>作品のGitHub：<a href="https://github.com/takonasu/SlideBukkonuki" target="_blank" rel="noopener noreferrer">https://github.com/takonasu/SlideBukkonuki</a></p>

オンライン授業でスライドを配布しないのに授業動画内でスライドを表示している先生が多いため、動画から自動的にスライドを切り抜いてくれるソフトを作成。

スライドぶっこ抜きマン

<p>詳細は執筆中です。<br>作品のURL：<a href="https://maumarutime.ml" target="_blank" rel="noopener noreferrer">https://maumarutime.ml</a><br>作品のGitHub：<a href="https://github.com/takonasu/maumarutime" target="_blank" rel="noopener noreferrer">https://github.com/takonasu/maumarutime</a></p>

「バジリスクタイム」風のロゴを作ることができる。月1000人の利用者がいる。

ロゴジェネレーター

<h2 id="hbd03d71084">超A&amp;Gの録画について</h2><p><a href="https://www.joqr.co.jp/ag/" target="_blank" rel="noopener noreferrer">超A&amp;G</a> は文化放送が放送している、アニメラジオ専門のインターネットラジオです。<br>超A&amp;G自体は暗号化処理がされておらず、FFmpeg等を用いて録画することが可能なのですが、どうもうまく録画することができません。それはおかしいだろうと思い、m3u8ファイルを解析してみたところ、ファイル内に記載されているリンクが全て相対パスになっていることが原因でした。ではそのm3u8ファイルに記載されるリンクを全て絶対パスに書き換えてくれるスクリプトを作ってしまおうと思い立ち、AGStation(β)を制作するきっかけとなりました。ネットで探してみたところ、超A&amp;Gを録画できる無料ツールが見当たりませんでした。<br></p><h2 id="h293f170a56">仕組み</h2><p><img src="https://images.microcms-assets.io/assets/45a0007befd1426591abee1d674af0dc/cb6f87640200417f9883c05353ffa7cc/image.png" alt=""><br>AGStationのバックエンドが、m3u8ファイル取得時のみFFmpegのプロキシとして動作します。AGStationが代理で超A&amp;Gサーバにアクセスしてm3u8ファイルを取得します。その後、取得したファイル内のリンクを絶対パスに書き換えてFFmpegに返却します。FFmpegは書き換えられたm3u8をもとに超A&amp;Gサーバから動画ファイル群を直接取得して録画します。これでFFmpegからコマンドを用いて録画することが可能になります。暗号化処理等がなされているわけではないので、複雑な処理が一切ありません。<br>しかし、せっかくなのだから録画しやすいGUI環境を整えてしまおうということで、WEBフロントエンド等の実装を行いました。<br></p><h2 id="h5dc0967264">フロントエンド</h2><p>かんたんにサクッと作りたかったので、当時持ち合わせていたスキルセットの中でNuxt.jsを用いました。また、CSSフレームワークであるBuefyのテンプレートを用いてスタイリングしています。<br>番組表からの録画予約・録画キャンセル・録画済み番組の確認　の操作を行うことができます。<br></p><h2 id="ha2cc149486">バックエンド</h2><p>もともとプロキシをNode.jsで作っていたので、そのままNode.jsでバックエンドを作成しました。ライブラリとしてExpressを用いています。index.tsの単一ファイルで300行弱記述しているのでリファクタリングの余地があります。また、エンドポイントとその役割を簡単に確認できるようにSwaggerが導入されています。録画予約情報を記録するためにMySQLをDBとして利用しており、TypeORMを用いて操作しています。もちろんWEBフロントエンドを利用せずにFFmpegから直接m3u8ファイルを要求することも可能です。<br></p><h2 id="hbcb8206522">Docker</h2><p>作成後、GitHub上で配布したかったため、Dockerで簡単に環境構築ができるように整えました。利用者は、makeコマンドを用いて <code>make  install</code> を実行するだけでFFmpegのインストールからAGStation(β)の導入まで全てが完了します。<br></p><h2 id="h282b720588"><br>関連リンク</h2><p>作品のGitHub：<a href="https://github.com/takonasu/AG_Station" target="_blank" rel="noopener noreferrer">https://github.com/takonasu/AG_Station</a><br></p>

ffmpeg で録画できる超 A&G への予約を支援するツール。WEB フロントエンド経由で予約録画できる。

AGStation(β)

<p>Twin:te （ついんて）は筑波大学生による筑波大学生のための専用時間割アプリです。<br><br>2019年末にプロジェクトの立ち上げを行いました。2019年2月に初版として公開され、現在ではバージョン3として公開されています。2022年7月の段階で延べ12,000人以上のユーザにご利用いただいています。運営メンバーは当初2人でしたが、現在は約10名ほどとなり、有志団体として活動しています。<br>代表を務めており、運営面でのメンバーの負担を減らせるようにしています。<br>技術面ではiOSアプリ全般（通知やウィジェット等）と各種WEBページ（寄付ページの一部等）の作成を主に担当しています。<br><img src="https://images.microcms-assets.io/assets/45a0007befd1426591abee1d674af0dc/aa9d7aa6d9934b99814fee14026a088c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-07-03%2017.17.19.png?w=400&amp;h=748" alt=""></p><h2 id="h599ca8b810">iOSアプリ</h2><p>Twin:teは当初WEBベースのアプリとして開発されていましたが、利用者を増やしたり柔軟な機能を追加したりするためにはやはりネイティブアプリの実装が必要でした。<br>そこで、WEBベースではあるもののウィジェット機能や通知機能等の機能を盛り込んだ各種ネイティブアプリを開発することになりました。このネイティブアプリでは共通の時間割機能の部分はWebViewになっているため、Androidやブラウザ版と開発を共通化することができるメリットがあります。私がiOSアプリを担当した理由は、当初メンバー内にMacを所有しているのが自分しかいなかったからです。小・中・大 各種サイズのウィジェットが実装されています。<br></p><h4 id="h2d015eb95c">ウィジェット（Widget）</h4><p>iOSのウィジェットには二種類あり、iOS13以前の旧型のウィジェットとiOS14以降の新型のウィジェットが存在します。<br>Twin:teのウィジェットはどちらも実装しています。<br>以下の画像は大・中サイズのウィジェット、もう一つは小サイズのウィジェットと旧型のウィジェットです。<br>サイズによって表示内容が異なりますが、ウィジェットでは今日の時間割や次の時間の授業、各授業の場所や時間を確認することができます。<br>もちろん、特殊日課（月曜日なのに水曜日授業など）にも対応しています。<br><img src="https://images.microcms-assets.io/assets/45a0007befd1426591abee1d674af0dc/9f2dc06bd7ce425687ba8be7dbf886c7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-07-06%2017.31.55.png?w=400&amp;h=756" alt=""><img src="https://images.microcms-assets.io/assets/45a0007befd1426591abee1d674af0dc/a2888ae5d4e748979b6f38dc7dcdbb8e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-07-06%2017.33.11.png?w=400&amp;h=756" alt=""><br></p><h3 id="hdb205673f2">苦労している点</h3><h4 id="h4c06cb00ea">Cookieの共有</h4><p>WebViewとAPIを叩くために使用するURLSessionでCookieを共通化する方法に悩みました。<br>これは、Twin:teの各種API（ウィジェットや通知等に用いられる）は認証が必須なため、WebViewでの認証情報を使いまわす必要があったからです。<br>調べてもベストプラクティスが出てこなかったりと悩んでいましたが、以下のQiitaの記事のようにして解決する方法をとりました。<br><a href="https://qiita.com/takonasu/items/80d9a7a60693c0e767e5" target="_blank" rel="noopener noreferrer">https://qiita.com/takonasu/items/80d9a7a60693c0e767e5</a><br>こちらの記事は当時私が書いたものになります。<br></p><h4 id="ha739b3b8f6">その他</h4><p>新しいiOSのバージョンが出る度にひやひやしています。（検証はしています）<br></p><h2 id="h30c5f5161f">寄付ページ</h2><p>Twin:teは完全に無料な広告なしのアプリという思想の元で運営されています。そのため、当初運営費は完全にポケットマネーから支出していました。<br>しかしありがたいことに複数の利用者の方々から寄付をしたいとの意見をいただきました。そこで、寄付ページの作成を行い寄付を募ることとしました。寄付ページのリンクは以下の関連リンクの箇所に記載しています。私は主にマイページ周りを担当しています。<br>現在Twin:teは利用者の方々からいただいた寄付金にて運営しています。<br><br><br>これ以外にもバックエンドやランディングページ等で手が足りていないところの補助を行っています。<br></p><h2 id="h282b720588">関連リンク</h2><p>公式サイト：<a href="https://www.twinte.net" target="_blank" rel="noopener noreferrer">https://www.twinte.net</a><br>iOSアプリ：<a href="https://apps.apple.com/jp/app/twin-te/id1489274755?mt=8" target="_blank" rel="noopener noreferrer">https://apps.apple.com/jp/app/twin-te/id1489274755?mt=8</a><br>寄付ページ：<a href="https://sponsorship.twinte.net" target="_blank" rel="noopener noreferrer">https://sponsorship.twinte.net</a><br>Twin:teのGitHub：<a href="https://github.com/twin-te" target="_blank" rel="noopener noreferrer">https://github.com/twin-te</a><br><br></p>

筑波大学生専用の時間割アプリ。延べ12,000人以上が利用している。代表を務めるとともに、技術面では主にiOS全般を担当。

Takonasu's Portfolio

About

Takanashi Yuya

(takonasu)

自己紹介

免許・資格

経歴

Works

Links

Contact