portfolio

　私は大学に通っていた当時、材料科学を学んできました。　その中でプログラムを利用したX線回析分析を行い、プログラムに興味を持ちました。その後、プログラミング技術を取得しようと専門学校に進み、現在は技能五輪大会Webデザイン職種に出場する為、日々サーバーサイドについて学んでいます。　今後はサーバーサイドへの知識を貯め、大学時代に得た工学的知識を駆使したプログラマーを目指し、学んでいこうと考えています。

性別 男性 清水 啓生

希望職種 ゲームプログラマー

自己PR

言語

開発環境

ツール

Unity、Direct3D 11.0、OpenGL Microsoft Visual Studio 2017-2019、

Apache HTTP Server、Xcode

C/C++、C#、Objective-C、 Action Script2.0/3.0、PHP、

JavaScript(JQuery)、CSS3.0 & HTML5

Adobe Photoshop CS6、 Adobe Illustrator CS6、 Adobe Dreamweaver CS6、Git(GitHub)

年齢 21歳

スキルシート

言語

▶ 技能五輪

P.5‐8

↳ フォンシェーディング P.16

▶ Direct３D P.18-19

↳ パズルアクション P.13-14

▶ OpenGL P.15-17

▶ Unity ゲーム作品 P.9-14

↳ ステルスアクション P.9-12

目次

P.1-4

▶ 仮想Eコマースサイト

第57回技能五輪では、ウェブデザイン職種にて神奈川県地方大会に出場しました。課題としては未完成のブログ同様の機能を持ったウェブサイトをデータベースに接続し、データベースを表示、書き込みができるよう修正するというものでした。私はAPI通信に似せたAPI類似機能を自作し(次ページ：フォルダ管理(apiフォルダ))、JQuery(次ページ：フォルダ管理(jsフォルダ))を使い、events.htmlにデータベースを表示、post.htmlにデータベースの書き込みが行えるよう修正しました。次ページの流れ図では、フォルダ管理と実際にどのように作動させたかを図で表しました。

技能五輪

技能五輪とは、国内の青年技能者（原則23歳以下）を対象に、技能競技を通じ、青年技能者に努力目標を与えるとともに、技能に身近に触れる機会を提供するなど、広く国民一般に対して技能の重要性や必要性をアピールし、技能尊重気運の醸成に資することを目的として実施する大会です。(引用：技能五輪全国大会トップページ)私は『第57回技能五輪』と『第58回技能五輪』の「ウェブデザイン職種」に出場させて頂きました。下記では出場した際に作成したWebサイトの内容や各大会の概要などを記述します。

開発環境 ・Apache、Sublime text

使用言語 ・HTML5 & CSS3.0、 PHP、Java Script(JQuery)

大会概要

第57回技能五輪

競技概要

1

フォルダ管理

流れ図

2

15 CSSを利用し、表を指定されたデザインに修正

12 HTMLを使用し、指定された文章を指定されたレイアウトに修正

13 じゃんけんのピクトグラムをSVG形式で作成

14 HTMLで表示している数値をJavaScriptのDOM操作で合計値を計算、表示

9 JavaScriptでDOM操作を行い、文字の表示/非表示

10 CSSを利用し、ウェブページのレイアウトを作成

11 CSSを利用し、画像をマウスオーバーすると画像上に文字を表示

6 AjaxでPOSTしてサーバの応答を取得、取得したものによって表示を変更

7 PHPを使用し、GETパラメータの値と指定された数値を大小判定

8 指定された機能をもったウェブページのデザインを作成

3 CSSの属性セレクタを使用しハイパーリンクの表示を指定された色に修正

4 PHPとSQLを使用し、DBを配列で取得し、ウェブページに表示

5 指定された画像をカラーモードを変更し、モノクロ画像に修正

課題番号 課題内容

1 指定された画像複数枚をPhotoShopのパッチ処理を利用し、画像サイズを修正

2 HTMLとJavaScriptでDOM操作のアニメーションでストップウォッチを作成

開発環境 ・Sublime text

使用言語 ・HTML5 & CSS3.0、PHP、Java Script

第58回技能五輪では、ウェブデザイン職種にて神奈川県地方大会に出場しました。課題は昨年と異なり、『Speed Test』を行いました。『Speed Test』とは、120分間で未完成のファイルや画像などの15個を指定された修正内容に修正を行う課題です。

課題内容一覧

第58回技能五輪

競技概要

3

表(前ページ：課題内容一覧)では、実際に大会で作成した課題を表にまとめたものです。下図ではその課題に沿って作成物の一部です。

『第58回技能五輪 神奈川県地方大会 ウェブデザイン職種』にて、敢闘賞を受賞することができました。敢闘賞受賞にあたって、『あいち技能五輪・アビリンピック2020』にて行われる『第58回技能五輪 全国大会 ウェブデザイン職種』に神奈川県代表として出場させて頂くことが決まりました。今後は全国大会で好成績を残せるよう、今まで勉強してきたものをさらに精度を高め、全国大会で使われているLalavelなどを勉強していこうと思います。

今後の目標

4

フォルダ管理

仮想Eコマースサイト

開発環境 ・Apache、MariaDB、Sublime text

使用言語 ・HTML5 & CSS3.0、PHP

自作で仮想のEコマースサイトを作成しました。構造(下図)としては、トップページ(index.php)、アイテムページ(item.php)、ログインページ(login.php)、カートページ(cart.php)、ユーザーページ(users.php)の５つのページで構成され、その他のphpファイルでは、データの行き来などで使用しています。また、トップページ、アイテムページ、カートページはMariaDBを使い、データベースを管理をしています。

概要

5

・ログインページ

ページ遷移

ログアウトボタンを押すと…

ログインすると…

ログイン・ログアウト動作

トップページ、アイテムページ、ログインページの３つはログインもせずに表示を行うことが出来るが、カートページ、ユーザーページの２つはログインを行わなければ表示がされないようになっています(下表)。ログインを行うとページの左上にユーザーネームが表示され、ナビゲーションバーにあるログインボタンがログアウトボタンに変化するようになっています(下図)。

ログインをせずに表示できるページ

ログインをしなければ表示できないページ

・トップページ ・カートページ

・アイテムページ ・ユーザーページ

6

ナビゲーションバーには「商品一覧」「カート」「ユーザー」「ログインorログアウト」があり、「商品一覧」をクリックするとトップページへ。「カート」をクリックするとログインしている場合、カートページへ。ログインしていない場合、ログインページへ。「ユーザー」をクリックすると「カート」同様にログインしている場合、ユーザーページへ。していない場合、ログインページへ。「ログインorログアウト」はクリックするとログインしている場合、ログアウトを行い、ログインページへ。していない場合、ログインページへ移動するようになっている(下図)。また、ロゴをクリックするとトップページへ移動します。

：ログイン等関係なくページ移動

：ログインを行っているとページ移動

：ログインを行っていないとページ移動

ナビゲーションバーのボタンを選択した際のページ遷移

トップページに表示されているレース名もしくは画像をクリックするとアイテムページへ移動します。アイテムページ内で気になる競走馬の馬名もしくは画像をクリックするとログインをしていない場合、ログインページへ。ログインをしている場合、カートページへ移動し、気になる競走馬がカートに追加されます。

トップページ アイテム カートページ ユーザー ログイン

7

トップページ(index.php)

アイテムページ(item.php)

ログインページ

カートページ(ｃart.php)

レース名または画像をク

リックしたことでトップペー

ジからアイテムページへ移

動。

馬名または画像をクリック

したことでアイテムページ

からカートページへ移動。

ログインを行っ

ていない場合

は、ログイン

ぺージへ

移動する。

8

動作環境 ・Android

開発期間 ・４か月

制作人数・プランナー　　　１人・グラフィッカー　３人・プログラマー　　６人

PHANTOM・LEAD

開発環境・Unity 2018.2.11f1・Microsoft Visual Studio 2017・Git(GitHub)

使用言語 ・C#

ジャンル ・ステルスアクション

9

　１年後期に、第１２回ゲームコンテスト「GFF AWARD 2019」に応募するためにチームで制作した作品です。

敵に発見されずにゴールを探せ！

少女と幽霊を操作しゴールへ導け！

少女は、長い間砦に囚われていまし

た。そのストレスで自分の意志では，

行動できない、か弱い少女です。

ですので、プレイヤーが心優しい幽霊

となり、先導し、移動することによって、

少女は、幽霊が通った道を移動するこ

とができます。

敵キャラクターであるスライムには、視

界エリアがあり、少女が入ると敵が襲い

かかってきます。

視界エリアは、少女が入ると赤色になり

ます。幽霊は、視界エリアに入っても発

見されません。

敵に発見されたらとにかく逃げろ！

敵のスライムには、独自の思考パター

ンを持っており、少女を追っかけてきま

す。

障害物や距離を稼いだりなどを利用し、

敵から逃げ切ろう。

ゲーム概要

10

こちらはチーム作品では実装予定のもので、チーム制作にあたって個人で制作したものです。まず初めに、CSVファイルを作成し、そのCSVファイルには読み込みやすいように「0、-1、1」を書き込みました。

CSVファイルの内容

その後、CSVファイルを読み込むために、下図のコードをステージに対して作動するスクリプトに書き込みます。

生成する際に使用するコード

CSVでステージ作成

11

実際に作成したCSVファイルを読み込ませ、ステージを生成したものを下図です。

CSVをステージに起こしたもの

また、前のページで作成したスクリプトを使用して、他のステージを作成したものを下図になります。

その他のステージの生成

12

動作環境 ・PC

開発期間 ・４か月

制作人数・プランナー　　　１人・グラフィッカー　６人・プログラマー　　３人

キララとおほしさま

開発環境・Unity 2019.1.4f1・Microsoft Visual Studio 2019・Git(TortoiseGit)

使用言語 ・C#

ジャンル ・パズル

13

　１年後期から２年前期かけて、チームで制作した作品です。　自分はプログラマー兼プランナー補佐として参加し、ステージの構成等を行いました。

空気に注意！

少女を操作して星座を描け！

ある日突然、おほしさまが散り散りに

なってしまった。

それに気づいた少女「キララ」を操作

して、散り散りになったおほしさまをも

との位置に戻そう。

キララがおほしさまを動かす際は、空

気を消費し、使い切ってしまうとゲーム

オーバーになってしまうので注意！

ただ歩くと空気は消費しない

ブロックを押すと消費する

ゲーム概要

14

２つの配列をまとめる配列 実際に完成したもの

OpenGL

開発環境 ・Microsoft Visual Studio 2017-2019

今回、OpenGLを使い、立方体の作成を行いました。まず初めに、立方体となる面を６つ作ります。面にはそれぞれ各点の座標位置を配列を使い、４つ指定し、各頂点の配色も配列を使い、指定します。また、その面を立方体にするため、インデックス配列を使い、面の指定をすることで立方体が完成します。

座標位置の配列 配色の配列

立方体の作成

15

シェーディングを勉強するに当たり、今回、フォンシェーディングについて特徴から掘り下げ、実際に作成しました。

このフォンシェーディングの各ポリゴンサーフェスは、次のような計算を実行してレンダリングされます。・各多角形頂点における平均単位法線ベクトルの決定・ポリゴンの表面上に頂点の強度を線形補間・各走査線に沿って証明モデルを適用し、表面点の投影ピクセル強度を計算

実際に作成したもの

フォンシェーディング

特徴

作成

16

今後は粉砕エフェクトを完成させ、今まで以上にOpenGLを理解を深めいていきたいです。また理解を深めていくと平行させながら、OpenGLを利用したゲーム制作や大学時代に学んだ知識を元に各種シェーダーの作成を行っていきたいと考えています。

粉砕エフェクト(粉砕前)

粉砕エフェクト(粉砕後)

今後の目標

17

クラス化させた各シェーダーと各バッファーを作成したcppファイルで定義し、以下のcppファイル内で各シェーダーと各バッファーを描画させるよう作成します。

Direct3D

開発環境 ・Microsoft Visual Studio 2017-2019

今回、Direct3Dを使い、三角形の描画を行いました。まずはじめに、各シェーダーと各バッファーをヘッタ―を使い、クラスを宣言します。

シェーダークラス バッファークラス

三角形の描画

18

各シェーダー、バッファーの作成

実際に作成した三角形の描画

今後は、三角形の描画だけではなく、テクスチャーの読み込みや大学時代に学んだ知識を元にOpenGL同様、各種シェーダーの作成を行い、Direct3Dの理解を深めていきたいと考えています。

今後の目標

19