制作物ページ

本サイトは旧ポートフォリオサイトです!!!!新しいサイトは下記です。

https://portfolio.usuyuki.net/

※2021年7月10日以降の制作物などは上記サイトからご覧になれます。

ここは私が制作したものを紹介するページです。

各制作物の画像または名前をクリックすると個別ページに飛びます。

ジャンル:全ジャンル

--進行中の制作物--

使用予定技術:PHP, Laravel, HTML, CSS, JavaScript, Figma, React, Docker, Next.js

プログラミング, web関係

「こもよみ」は名言管理webアプリです。素敵なUXとなることを目指して作成中です。シンプルさと速さを目指しています。私にとって初のReactなど技術向上を目指して作っている側面もあります。ちなみに「こもよみ」は万葉集最初の歌から引用しました。

使用予定技術:React, Next.js, TailwindCSS, 各種API, Vercel

プログラミング, web関係

現状のポートフォリオサイトは個人的に好きなのですが、新しい技術を使いたいということでReactのフレームワークであるNext.jsを使ってポートフォリオサイトを新たに作っています。仮想DOMによる高速なポートフォリオサイトとなる予定ですが、大学のテスト期間などで作業が止まっています…

--制作物--

公開・デプロイ日:2021/06/26

使用技術:HTML, CSS, JavaScript, TailwindCSS

web関係

自身が主催するgit勉強会2021の最後に共同開発の練習として参加者全員で作りました。

公開・デプロイ日:2021/06/14

使用技術:PHP, Laravel, HTML, CSS, Figma, Docker, TailwindCSS

プログラミング

かどで日記はweb上で日記を作成、管理できるサービスです。日記の検索機能だけでなく、形態素解析などを用いた統計機能の実装も準備中です。

公開・デプロイ日:2021/05/03

使用技術:M5StackCore2, UIFlow

プログラミング

日本人のISS同時滞在を記念して、ISS位置情報API→Maps Satic API (Google)→UIFlow→M5 Stack Core2で作りました。UIFlowというツールを使ったのでゴリゴリのプログラミングではありません…

公開・デプロイ日:2021/04/11

使用技術:PHP, HTML, CSS, JavaScript, M5Paper

プログラミング

M5Paperという電子ペーパー付きマイコンを用いて、情報つき卓上カレンダーのようなものを作りました。画面はHTML&CSS&JS&PHPを用い、それをサーバー上で画像に変換し、その画像をマイコン上で表示しています。1時間に1度の更新のため、電力消費はかなり少なめです。

公開・デプロイ日:2021/04/07

使用技術:Python, Selenium

プログラミング, ライフハック

弊大学では、授業の情報が書かれたシラバスがネットで公開されています。しかしながらそれはログインが必要な上、シラバスの閲覧も大変手間のかかるものです。そこでseleniumでブラウザを操作することで、手作業で行っていたデータ収集を自動化しました。※コードには細心の注意をはらい、サーバーへの負荷がかからないように配慮しています。

公開・デプロイ日:2021/04/04

使用技術:WordPress, PHP, Docker, TailwindCSS

プログラミング, デザイン

これまで既存のものを使用していましたが、この度自作テーマへ変更しました。かわいさをブレンドしたデザインです。ローカルの開発環境にDockerを使ってみました。

公開・デプロイ日:2021/04/03

使用技術:Python, Selenium

プログラミング, ライフハック

私が通っている大学では複数のサイトで授業の情報などが開示されるのですが3段階ログインが必要であるなど情報収集には相当な手間がかかります。そこでSeleniumというブラウザ操作を制御できるフレームワークを利用して一分操作の自動化をしました。具体的には①学内ポータルへの自動ログイン、オンライン授業用サイトへの自動ログイン、学部授業サイトへの自動ログイン、メールサイトへの自動ログイン②画像選択型認証の突破③お知らせがあった場合別タブでお知らせを開く、です。※コードには細心の注意をはらい、サーバーへの負荷がかからないように配慮しています。

公開・デプロイ日:2021/03/08

使用技術:PHP, Laravel, HTML, CSS, JavaScript, React, Docker, Next.js, TailwindCSS, TypeScript

プログラミング

フロントエンド(NextJS)の一部のコーディングとバックエンド(Laravel)のガチャAPI制作で携わりました。

公開・デプロイ日:2021/02/07

使用技術:Python

プログラミング, 機械学習

講義「実践データサイエンス」の課題で好きなことができたので、自身の日記を解析してみました。自然言語処理をちょこっとと言った感じです。開発はcolabノートを使いました。

公開・デプロイ日:2020/12/22

使用技術:HTML, CSS, JQuery, JavaScript, TailwindCSS, Darkmode.js, 各種API

プログラミング

ポートフォリオに載せるほどでもない小さなものを作っていました。

公開・デプロイ日:2020/12/16

使用技術:HTML, JavaScript, TailwindCSS, 各種API

プログラミング, web関係

宇都宮市に関わる方が朝見ると便利なサイトを目指して作りました。天気や日の出、降水予報などがまとめて見れます。TailwindCSSとJavaScript使っています。ただしスマホへの対応が微妙にできていません。モバイルファーストの時代にあるまじきサイトですね笑。でもTailwindCSSのおかげでCSSを一行も書けずにモダンな風味のサイトができました。情報取得はJavaScriptのfetch関数を使って各種APIを叩くことで実現していますが、ペライチでGitHubPagesで運用の為APIがCORS関係で弾かれることも多々あり、実装できない機能も多々あり、中途半端なサイトになってしまいました。なのでβ版です。

公開・デプロイ日:2020/12/12

使用技術:HTML, CSS, JavaScript, p5.js, TailwindCSS, Darkmode.js

プログラミング, web関係

ちょっとした制作物や新しい技術のお試し利用などローカルに置いておくのはもったいないけれど、かといってポートフォリオに掲載するのもなぁ…と思ったページの置き場です。TailwindCSS使ってみたり、ダークモード対応してみたり…かといって未完成も置いてたりする結構ラフなサイトです。

公開・デプロイ日:2020/11/03

使用技術:WordPress, PHP, HTML, CSS, Bootstrap4, Figma

プログラミング, web関係

WordPressの独自テーマで運用する練習としてポートフォリオサイトを作りました。以前のポートフォリオ半年を前にリニューアルです。Figmaを用いてデザインし、BootstrapとWordPress関数を利用して、運用しやすいページにしました。

公開・デプロイ日:2020/10/31

使用技術:Arduino, C/C++

プログラミング, Arduino

Makuakeでクラウドファンディングされていた「minee」というタイマーが大変魅力的だったのですが、手の届く価格でなかったためArduinoを用いて自作を試みました。似ても似つかない製品になりました。 動作の様子はこちら

公開・デプロイ日:2020/10/31

使用技術:Aviutl

動画編集

サーボーモータにより視覚的に経過を確認できる自作タイマー”TeruTeruTimer”の紹介動画です。いつもと少し違う雰囲気の動画に仕上げました。

公開・デプロイ日:2020/10/19

使用技術:WordPress, Linux系コマンド

プログラミング, web関係

VPSでサイトを運営し始めた関係でWordPressも利用し始めました。初めてのCentOS,初めてのコマンドライン操作,サブドメインの利用,そしてWordPressなど新しい体験と沢山の困難の末に完成しました。

公開・デプロイ日:2020/10/06

使用技術:Aviutl

動画編集

ラテアートに憧れて100均でミルクフォーマーを買いました。お家で手軽にラテアートができて嬉しい気持ちでいっぱいなのですが、ラテアートの難しさを痛感しています……

公開・デプロイ日:2020/09/30

使用技術:PHP, Laravel, HTML, CSS, JavaScript, Figma

プログラミング, web関係

現状α版です。朝だけ使える予定のSNSです。早起きしたり、夜のSNSで時間を無駄にしないことを目指して作りました。Figmaを用いたプロトタイプ制作をはじめて導入して制作しました。

公開・デプロイ日:2020/09/19

使用技術:PowerPoint

デザイン

3月に大学の近くで一人暮らしを始めました。引っ越しの時に利用した寝台列車「サンライズ出雲号」から見た朝日に文字を添えました。スマホがガラスに反射して映っているのもなんだかエモいですね。

公開・デプロイ日:2020/09/18

使用技術:PowerPoint

デザイン

デザインに関する本を購入し、そのアウトプットをしようかと思い、言の葉HTML宣伝用として作りました。デザインは知識と言われています。まだまだ知識が身についていないことを痛感しました…

公開・デプロイ日:2020/09/01

使用技術:Aviutl

動画編集

みんなで放送コンテスト2020実行委員会の一員として、結果発表のシーン切り替え映像を制作しました。

公開・デプロイ日:2020/09/01

使用技術:Aviutl

動画編集

みんなで放送コンテスト2020実行委員会の一員として、結果発表のシーン切り替え映像を制作しました。

公開・デプロイ日:2020/09/01

使用技術:Aviutl

動画編集

みんなで放送コンテスト2020実行委員会の一員として、結果発表のシーン切り替え映像を制作しました。

公開・デプロイ日:2020/08/18

使用技術:PHP, Laravel, HTML, CSS

プログラミング, web関係

言の葉HTMLは付加価値をつけてweb手紙を送れる日本らしさを意識したサービスです。生まれて初めて作ったwebサービスです。サークルの知識や本で得た知識のアウトプットとして作りました。

公開・デプロイ日:2020/07/30

使用技術:Aviutl

動画編集

はじめての試験ということもあり、記念に制作しました。これまで全く考えてこなかったデザインの知識が少しだけ混じった作品です。

公開・デプロイ日:2020/07/25

使用技術:HTML, CSS

プログラミング, web関係

「webエンジニアを目指す学習ロードマップ」に触発され、そのセミナーの翌日に作った初めてのwebサイトになります。以前ポートフォリオサイトとして利用していました。

公開・デプロイ日:2020/06/20

使用技術:PHP, Laravel

プログラミング, web関係

ユーザーがお互いに遊びに行く事を投稿し合うことで公園の混雑状況を把握するアプリ「SafetyPark」のバックエンドを担当させていただきました。※SafetyParkのロゴが存在しないため、制作を行っている団体のロゴを添付しております(許諾取得済)

公開・デプロイ日:2020/05/02

使用技術:Python

プログラミング

指定のExcelシートに入力した時間割を基に曜日別>>科目別>>日付別にフォルダの階層構造を作るソフトウェアです。下記uuefolderの一般向け版ですが一般公開へのリスクを考慮して、高校時代同じクラスだった人のみに配布しました。

公開・デプロイ日:2020/04/28

使用技術:Python

プログラミング

宇都宮大学工学部1年生に出された時間割をExcelシートに入力するという課題をうまく活用できないかと思い、そのシートを読み取って曜日別>>科目別>>日付別にフォルダの階層構造を作るソフトウェアを作りました。オンライン授業だとファイルがごちゃごちゃになってしまうため、あったら便利だなと思ったのがきっかけです。