1枚絵を1,130パーツへ分解する
背景除去、Lab色空間での減色、輪郭のベジェ化、線画のストローク化までを自作パイプラインで検証しています。
okojo
Developer Portfolio
個人開発エンジニアの okojo（オコジョ）です。iOS・Android・Webアプリを作りながら、現在は「1枚のイラストをJavaScriptだけで描き直し、自然に動かす」方法を比較・検証しています。公開中のアプリだけでなく、失敗した方法や実装上の判断も記録しています。
Scroll01. About Me
Biography
okojo（オコジョ）と申します。個人開発エンジニアとして、日常で何度も発生する小さな手間を減らすための Web アプリや iOS アプリを作っています。以前は身近な人から相談された課題に合わせて個別に作ることが多く、現在はその経験をもとに、同じ困りごとを持つ人がそのまま使える形へ整理して公開しています。
このサイトでは、アプリのダウンロードリンクだけでなく、なぜ作ったのか、どんな使い方を想定しているのか、データをどこで扱うのか、今後どこを改善するのかまで記録します。アプリを使う前に判断できる情報を置くことを重視しています。
使っている技術
JavaScript, Python, Swift / SwiftUI, Kotlin / Jetpack Compose, Flutter, Canvas, SVG, WebGL, ESP32
現在のテーマ
iPhoneを圏外・バックグラウンド・強制終了にしたらSpanは何％消えるのか、検証や実験を重ねて解消法を考察する。イラストのベクター分解と1px完全複製、部位ごとのアニメーション、MediaPipeによる顔追跡、サマターゲをStack-chanへ載せる音声・赤外線・スマートホーム連携を比較しています。
サイト運営方針
掲載内容は自分が開発・検証したアプリと、その制作過程で得た知見を中心にしています。公開リポジトリ、実装ファイル、動作確認の結果を根拠にし、まだ検証できていない内容はその状態が分かるように書きます。
更新・広告方針
掲載責任者は okojo です。アプリの仕様変更や検証結果に合わせて内容を見直し、誤りの連絡には Contact フォームから対応します。本サイトは運営費のため Google AdSense を利用しますが、広告の有無によって紹介内容や評価を変えません。最終内容確認日: 2026年7月30日。
12
掲載中のアプリ・Web版
3
対応プラットフォーム
17
公開記事
100%
個人開発
Current Work
いま比較していること
同じキャラクターを、SVG、Canvas、DOM/CSS、WebGL、組み込み画面で動かすと何が変わるのか。実装を分けて、再現性・動かしやすさ・処理負荷・保守性を比べています。
完全一致と動かしやすさを比較する
SVG分解、RGBの1px複製、Canvas顔追跡、DOM/CSS、Stack-chanの描画方式を同じ観点で比較します。
サマターゲを机の上へ出す
Stack-chanの既存機能を保ったまま、キャラクターの顔、ローカル発話検出、エアコンの赤外線操作を追加しています。
組み込み記録を読む →02. Apps
実際に利用できるアプリとWebツールを掲載しています。各詳細ページでは、機能だけでなく、作った理由、設計上の判断、データの扱い、既知の制約を説明しています。
iOS
Uni-Log
iOS / Web
時間割・単位計算・タスク・出欠管理をひとつにまとめた、大学生のための管理ツール。iOS版とWeb版を提供しています。
VR
Air-keyboard
Three.js / WebXR
Meta Questのコントローラーで空間上のキーを選び、上下左右のフリックでかなを入力。キーボード移動、QWERTY切替、PCのマウス操作にも対応します。
iOS
samatage-samata-ge（サマタゲ・サマターゲ）
iOS
25分の集中と5分の休憩を、黒い化けものが見守るポモドーロタイマー。圧のある演出で「だらだら」を切る。
iOS
公務員の被扶養者のためのアプリ
iOS
勤務条件とシフトから給与を概算し、月収・年収の見込みと利用者が設定した収入目標を比較できる管理アプリ。
Live sites
公開中のWebサイト／デモ
現在アクセスできるものだけを掲載しています。アプリの機能説明、操作デモ、サポート情報を確認できます。
実験デモ
JavaScript SVGイラスト
1,130パーツへ分解したキャラクターを動かす
比較デモ
1px完全複製版
RGB完全一致とWebGLリグを両立する実験
ブラウザゲーム
反重力ブロック Web
下から上へ進むCanvasブロックパズル
デモあり
Omni ToDo
iPhone・Widget・Apple Watchのタスク同期
公開中
Limit5
区切りを作る5時間リマインダー
公開中
OmniTimer
複数タイマーとストップウォッチ
公開中
TapPage
ブロックを組み立ててWebページを作るiOSアプリ
公開中
冷蔵庫管理人
冷蔵庫の在庫と期限を管理するアプリ
学習Webアプリ
Derivative
12レッスン、途中式の見える微分電卓、3段階クイズ
ブラウザツール
Clock & Stopwatch
現在時刻、ストップウォッチ、ラップ記録
03. Articles
個人開発や環境構築の中で実際に調べ、つまずき、解決したことを記事にまとめています。横にスライドすると過去の記事も読めます。
JS × Illustration
JavaScript
1枚のイラストをJavaScriptで描き直す — 1,130パーツのSVG化
背景除去からLab減色、輪郭のベジェ化、線画のストローク化、まばたきまで。実装と失敗を段階ごとにまとめました。
読む →5 Rendering Methods
比較検証
キャラクターをWebで動かす5方式を比較 — SVG・Canvas・DOM・WebGL・LVGL
同じキャラクターを異なる描画方式で実装し、完全一致、動かしやすさ、負荷、隠れ領域の扱いを比べます。
読む →Samatage × Stack-chan
IoT / ESP32
サマターゲをStack-chanへ — 顔・音声・赤外線を壊さず追加する
公式の音声・サーボ・アニメーションを残し、キャラクター表示とローカル発話検出、エアコン操作を薄い統合層として追加しました。
読む →MediaPipe Avatar
Canvas / MediaPipe
顔画像を送らないWebアバター — MediaPipeの値だけで表情を動かす
ブラウザ内で顔を解析し、11個の正規化済み表情パラメータだけをスマホからPCへ渡す構成と、30fps制御を解説します。
読む →Screen Time API
Swift / iOS
iPhoneのアプリ制限を3種類に分けて実装した — Screen Time API設計記録
FamilyActivityPicker、ManagedSettings、Shield、DeviceActivityMonitorをどう分けたかを、三つの制限方法から整理します。
読む →SwiftUI → Compose
Android移植
iOSアプリ4本をAndroidへ移植して分かった「同じ機能」の作り方
動画編集、音楽再生、位置通知、収入管理を題材に、Appleの仕組みをAndroidで何へ置き換えたか比較します。
読む →App Store
個人開発
個人開発アプリをApp Storeでリリースするまでの全手順
アイデア出しから審査提出・リジェクト対応まで、個人開発者がiOSアプリを公開するまでの流れを、実体験をもとにまとめました。これから最初の1本を出す人向けのガイドです。
読む →Pomodoro
生産性
ポモドーロ・テクニック実践ガイド — 25分集中を続けるコツ
「25分集中 + 5分休憩」のシンプルな時間管理術。挫折しやすいポイントと習慣化の工夫を、ポモドーロタイマーを自作した経験から紹介します。
読む →Campus
大学生活
大学の履修管理を効率化する — 単位計算・時間割・出欠の整理術
「単位が足りない」を防ぐために。時間割・単位・タスク・出欠と、散らばりがちな履修情報を1か所に集めて管理する方法を解説します。
読む →Income
お金の管理
扶養に関する収入記録の始め方 — 税・健康保険・共済を分けて確認する
一つの「壁」で判断せず、制度ごとに確認するための入口と、給与明細の項目を後から追える形で記録する方法をまとめました。
読む →Static Site
Web制作
静的サイトを無料で公開する方法 — このサイトの構成を例に
HTML・CSS・JavaScriptだけのサイトを無料で独自ドメイン公開するまでの手順を、このポートフォリオサイトの実構成を例に解説します。
読む →DUNS / Google Play
アプリ申請
DUNSナンバーの取得にかかった時間の話
個人事業主でもGoogle Playで組織登録はできる。ただしDUNSナンバーが必要で、「急がない方」を選んだら5月16日申請・6月29日取得で約44日。日付は信用しすぎない方がいい、という実体験。
読む →Marketing
マーケティング
個人開発アプリの広告、どこに出すのが最善？（第1回）
Google広告・Meta・YouTube・リール・TikTok・X。選択肢は多いのに最善が分からない。実際に試して感じた各チャネルの手応えと難しさを、答えの出ない前提で整理した連載第1回。
読む →Linux / Ubuntu
環境構築
Ubuntu（Linux）を始める前に知ってほしい、ネットワークとハードウェアの話
Wi-Fiが認識されない、Intel 8265/8275 の無線LAN不具合、USBテザリングという逃げ道。Linuxを入れる前に確認しておきたい現実的なポイントを、実体験ベースでまとめました。
読む →Git
Git
実務で使うGitコマンド集 — コンフリクト解決から地味に便利な操作まで
リポジトリの作成、変更の記録、ブランチ、コンフリクトの解決、取り消し、そして意外と知られていない便利コマンドまで。場面ごとに使うGitコマンドを整理しました。
読む →3D / VR
3D / VR
Blenderで作った世界の中に入って操作したい — いま挑戦していること
Blenderで組んだ3D空間に、VRで実際に入り込み、その中で操作までしたい。「数分間のエールを」のPVを見て抱いた衝動と、その実現に向けた技術的な壁について書きました。
読む →AItuber
AI
「完璧なAItuber」を作りたい — 挑戦者は多いのに完成形が少ない理由
AItuberに挑戦する人は多いのに、「これは完成形だ」と思えるものはなかなか見当たりません。何が足りないのかを分解しながら、自分が作りたいものを言語化していきます。
読む →04. Notes
個人開発で実際に迷った点、設計時に決めたこと、アプリを使う前に知っておいてほしいことをまとめています。
05. Links
SNS・ブログ・技術記事など
06. Contact
お問い合わせはフォームからお願いします。