2022/12
著書『WebGL — 建構網頁中的 3D 遊戲,從基礎渲染原理、光影到應用』
深智數位(2022 年)/ ISBN: 9786267146828
2021 年の iThome WebGL 連載をもとに、豊富なサンプルで WebGL を解説。描画に加え、ゲームのインタラクション実装も扱い、帆走ゲーム「Catch The Wind!」を制作。
西瓜(スイカ) / Leo
ハードウェア、OS、ネットワークから Web のフロントエンド・バックエンド、アプリケーション開発まで、情報技術の幅広い分野に興味があります。
おもしろいインタラクションやものづくりの過程が好きで、Web・フロントエンド開発に取り組みながら、ゲーム開発に携わることを目指しています。
2022/3 ~ 2026/2
2021/2 ~ 2022/3
Elixir / Phoenix プロジェクトの開発を支援。
2017/2 ~ 2021/2
チームを率い、海外の顧客と協力して MVP(実用最小限の製品)を開発。
React Native で Android / iOS 向けのクロスプラットフォームアプリを構築。CI/CD によるビルド自動化で開発作業を効率化。
バックエンドに Ruby on Rails、管理画面のフロントエンドに React を使用。
React ベースの静的サイトジェネレーター Gatsby を使用。デザイナーと協力し、レスポンシブ対応・多言語対応のサイトを制作。
ストア画面と管理・編集画面を React で刷新し、ユーザー体験を改善。
Elixir で移行処理を実装し、約 50 万件のストアページのデータを無停止で移行。
キャリアで初めて長期的な保守・開発を担当した Ruby on Rails プロジェクト。
2022/12
深智數位(2022 年)/ ISBN: 9786267146828
2021 年の iThome WebGL 連載をもとに、豊富なサンプルで WebGL を解説。描画に加え、ゲームのインタラクション実装も扱い、帆走ゲーム「Catch The Wind!」を制作。
2022/1
テーマ:Web で 3D シーンを描画するには? WebGL の基礎から
三角形の描画から始め、2D / 3D 変換、ライティングを解説し、最後に帆船と海の 3D シーンを制作する連載を執筆。
2021/4
2020/12
2020/8
2020/8
2020/8
2019/8
2018/11
2018/8
2018/4
2016/2
2012 ~ 2016
在学中、情報系サークルの代表および学生会の情報管理担当を経験。
2009 ~ 2012

個人サイト・ブログ。履歴書ページを A4 縦で印刷できるよう設計。
https://astro.build/ と AI で構築し、静的サイトとして配信。
サイトを見るhttps://pastleo.meソースコードhttps://github.com/pastleo/pastleo.me

iThome 鉄人賽 2021 の連載で制作した最終成果。
ライブラリを使わず WebGL で実装。.obj 形式の帆船モデルを読み込み、影、水面への映り込み、反射を表現。
サイトを見るhttps://static.pastleo.me/webgl-ironman/06-boat-ocean.html

WebGL で実装した、3 人で対戦できるダイヤモンドゲーム。
シェーダーを用いて星空を描画。
サイトを見るhttps://static.pastleo.me/webgl-practice/10-diamond-chinese-checkers.html

2022 年の旧正月に、個人ハッカソンとして Unity を学びながら制作。
スペースキーまたはタッチ操作で帆を開いて風に乗り、岩に衝突するまでにどこまで航行できるかに挑戦するゲーム。
サイトを見るhttps://static.pastleo.me/DriftingSailboat/ソースコードhttps://github.com/pastleo/DriftingSailboat

iThome 鉄人賽 2021 の連載で制作した作品の一つ。
WebGL で実装し、画像テクスチャで球体の色や表面の細部を表現。
サイトを見るhttps://static.pastleo.me/webgl-ironman/05-framebuffer-shadow.html

大学の友人と始めたゲームプロジェクト。WebSocket でサーバーに接続した後、WebRTC でプレイヤー同士をフルメッシュ接続し、マルチプレイを実現。

Vue で制作。
Vue 2 の従来の実装に加え、Vue 3 Composition API 版も実装。
サイトを見るhttps://static.pastleo.me/kana-vueソースコードhttps://github.com/pastleo/kana-vue

React で、交際相手が子どもの頃に遊んでいたゲームを再現。
2 人のプレイヤーが交互に辺を一つずつ選んで獲得。
マスの最後の辺を取ったプレイヤーがそのマスを獲得し、1 点を得る。
すべての辺とマスが埋まった時点で、得点の高いプレイヤーが勝利。
サイトを見るhttps://static.pastleo.me/squaring-gameソースコードhttps://github.com/pastleo/squaring-game

WebSocket + WebRTC でノードを接続し、Kademlia DHT アルゴリズムで P2P ネットワークを構成。
ルーム名を DHT のハッシュ入力に使い、同じルーム名を入力したユーザー同士が接続できる仕組みを実装。
デモサイトでは unamed-network を使ったシンプルなテキストチャットを提供。

YouTube 動画の同期視聴とテキストチャットを提供。
WebSocket + WebRTC でノードを接続し、半分散型の P2P ネットワークを構成。
COSCUP 2019 の登壇と技術記事で、このネットワークを紹介・実演するために制作。

Elixir LiveView で POPCAT のようなアプリを制作。全ユーザーのクリック数を集計し、リアルタイムに同期。
DigitalOcean Kubernetes Challenge 2021 の成果物。Web アプリ、データベース、ロードバランサーを含むシステム全体をコンテナ化し、Kubernetes クラスターにデプロイ。

一定の規則に従ってセルが変化し、パターンを形成するライフゲーム。
Rust で実装して WebAssembly にコンパイルし、ブラウザー上で実行。JavaScript DOM API と連携し、盤面の表示とユーザー操作に対応。
サイトを見るhttps://static.pastleo.me/rs-wasm-glife-20201213ソースコードhttps://github.com/pastleo/rs-wasm-glife

Solidity で Ethereum 上のスマートコントラクトを実装。
ウォレットアドレスをキーに文字列データを読み書きし、スマートコントラクトの機能を検証。
MetaMask があれば Web ページから操作可能。
サイトを見るhttps://static.pastleo.me/hello-solidity-webソースコードhttps://github.com/pastleo/hello-solidity-web
