{ "version": "https://jsonfeed.org/version/1", "title": "okapping's Hello My Friend", "description": "", "home_page_url": "https://okapping.github.io", "feed_url": "https://okapping.github.io/feed.json", "user_comment": "", "author": { "name": "okapping" }, "items": [ { "id": "https://okapping.github.io/posts/pyxel-shape-click-evaluate/", "url": "https://okapping.github.io/posts/pyxel-shape-click-evaluate/", "title": "【pyxel】図形の中をクリックしたかを判定する", "summary": "これだけ！ 四角い枠の中が押されたかどうかを判定します。…", "content_html": "

これだけ！

\n

四角い枠の中が押されたかどうかを判定します。

\n

中身はこれだけ！

\n
def is_click_inside_rect(self, x, y, w, h):\n    \"\"\"\n    四角形の中をクリックしたかどうか判定する\n    \"\"\"\n    if pyxel.btnp(pyxel.MOUSE_BUTTON_LEFT):\n        if (\n            x <= pyxel.mouse_x < x+w\n            and y <= pyxel.mouse_y < y+h\n        ):\n            return True\n    return False
", "author": { "name": "okapping" }, "tags": [ "個人開発", "Pyxel" ], "date_published": "2026-10-13T22:05:09+09:00", "date_modified": "2026-10-13T22:14:26+09:00" }, { "id": "https://okapping.github.io/posts/open_pyxel_with_vscodium/", "url": "https://okapping.github.io/posts/open_pyxel_with_vscodium/", "title": "VSCodiumで、VSCodeの拡張機能を開く", "summary": "VSCodiumは、VSCodeのオープンな部分だけで作成されたVSCodeです。そんなVSCodiumにも拡張機能を入れることができますが、VSCodeの拡張機能をVSCodeと同じように検索して入れることはできません。 そこで、VSCodeの拡張機能の、VSIXファイルをダウンロードして、それをVSCodiumから開く形で、VSCodiumから使えるようにします。…", "content_html": "

VSCodiumは、VSCodeのオープンな部分だけで作成されたVSCodeです。そんなVSCodiumにも拡張機能を入れることができますが、VSCodeの拡張機能をVSCodeと同じように検索して入れることはできません。

\n

そこで、VSCodeの拡張機能の、VSIXファイルをダウンロードして、それをVSCodiumから開く形で、VSCodiumから使えるようにします。

\n

VSIXファイルをダウンロードする

\n

まずこちらのサイトにて、pyxelと検索し、右側のボタンから、「Universal」を選択。

\n

\"入力例\"

\n

VSCodiumで開く

\n

拡張機能を開き、三点リーダー「…」から「VSIXからのインストール」を押し、先ほどダウンロードしたファイルを開いて完了

\n

\"入力例\"

\n

終わりに

\n

pyxelを自身がダウンロードしたい拡張機能名に置き換えることで動作すると思います。

\n

最初のリンクを見つけるのに若干苦労したため、ここに書き残します。

\n

VSCode拡張機能の公式ページからVSIXがダウンロードできるようになるといいのにと思いました。

\n

VSCodiumでpyxelを開きたい人に届いてくれれば幸いです。

", "author": { "name": "okapping" }, "tags": [ "個人開発", "Pyxel" ], "date_published": "2026-10-13T09:37:10+09:00", "date_modified": "2026-10-13T13:40:40+09:00" }, { "id": "https://okapping.github.io/posts/obsidian-underline-h2-tag/", "url": "https://okapping.github.io/posts/obsidian-underline-h2-tag/", "title": "【Obsidian】h2タグに端っこまで下線を引く！", "summary": "はじめに 最近Obsidianを使い始めました。…", "content_html": "

はじめに

\n

最近Obsidianを使い始めました。

\n

前々からメモを外部のサーバーに上げたくないと思っていたので、出会えてHAPPYです。

\n

このqiitaもそうですが、h2タグ（## ）の装飾は幅いっぱいに下線があるのが基本なイメージがあり、Obsidianで書いたときも幅いっぱいに下線を表示したくなりました。

\n

（本題）下線を引く

\n

余計なのはなし。下線を引くのみです！.obsidian/snippets/style.cssに以下コピペして、設定＞外観＞SCCスニペットから読み込めは完成！

\n
body {\n  --line-color: rgba(128,128,128,1);\n}\n/* リーディングモード */\n.markdown-rendered h2{\n  border-bottom: solid 2px var(--line-color)\n}\n\n/* ライブプレビューモード */\n.HyperMD-header-2 {\n  border-bottom: solid 2px var(--line-color)\n}
\n

↓ライブプレビューモードも、プレビューも両対応しています。
（画像はライブプレビュー）

\n

\"image.png\"

", "author": { "name": "okapping" }, "tags": [ "個人開発", "Obsidian" ], "date_published": "2026-08-08T21:57:00+09:00", "date_modified": "2026-10-13T22:12:10+09:00" }, { "id": "https://okapping.github.io/posts/travel-between-two-points-in-a-fixed-amount-of-time/", "url": "https://okapping.github.io/posts/travel-between-two-points-in-a-fixed-amount-of-time/", "title": "【Pyxel】2地点を一定の時間で移動する", "summary": "今作成しているゲームで、2地点を毎回一定の時間で移動したくなったため作成しました。 現在の地点から、クリックした地点を目指して、間を一定の時間で移動します。…", "content_html": "

\n

はじめに

\n

今作成しているゲームで、2地点を毎回一定の時間で移動したくなったため作成しました。

\n

現在の地点から、クリックした地点を目指して、間を一定の時間で移動します。

\n
import pyxel\n\n\nclass App:\n    def __init__(self):\n        pyxel.init(160, 120, title=\"move_constant_time\")\n        pyxel.mouse(True)\n        self.x = 0\n        self.y = 0\n        self.dx = 0\n        self.dy = 0\n        self.target_x = 0\n        self.target_y = 0\n        self.move_frame = 15\n        pyxel.run(self.update, self.draw)\n\n    def move_constant_time(self, x, y, dx, dy, target_x, target_y, move_frame):\n        \"\"\"\n        一定の時間で移動する\n        x, y: 現在の座標\n        dx, dy: 移動距離\n        target_x, target_y: 目的地の座標\n        time: 移動時間\n        \"\"\"\n        # ボタンを押したタイミングで移動速度を設定する\n        if pyxel.btnp(pyxel.MOUSE_BUTTON_LEFT):\n            dx = (target_x - x) / move_frame\n            dy = (target_y - y) / move_frame\n        \n        # 次の座標\n        next_x = x + dx\n        next_y = y + dy\n    \n        # Xがターゲットを超えたら止める（クランプ）\n        if (dx >= 0 and next_x >= target_x) or (dx <= 0 and next_x <= target_x):\n            next_x = target_x\n    \n        # Yがターゲットを超えたら止める（クランプ）\n        if (dy >= 0 and next_y >= target_y) or (dy <= 0 and next_y <= target_y):\n            next_y = target_y\n    \n        x = next_x\n        y = next_y\n    \n        return x, y, dx, dy\n\n    def update(self):\n\n        # クリックした場所を移動座標にセットする\n        if pyxel.btnp(pyxel.MOUSE_BUTTON_LEFT):\n            self.target_x, self.target_y = pyxel.mouse_x, pyxel.mouse_y\n\n        # 一定の時間で移動\n        self.x, self.y, self.dx, self.dy = self.move_constant_time(self.x, self.y, self.dx, self.dy, self.target_x, self.target_y, self.move_frame)\n\n    def draw(self):\n        pyxel.cls(0)\n        pyxel.circ(self.x, self.y, 3, 6)\n        \n        pyxel.pset(self.target_x, self.target_y, 10)\n\nApp()
\n

動作確認

\n

pyxel code makerで動作確認できるようにしています。
ぜひご確認を↓
pyxel code maker

", "author": { "name": "okapping" }, "tags": [ "個人開発", "Pyxel" ], "date_published": "2026-08-08T21:55:00+09:00", "date_modified": "2026-10-13T22:11:02+09:00" }, { "id": "https://okapping.github.io/posts/pyxel-draw_rounded_rectangle/", "url": "https://okapping.github.io/posts/pyxel-draw_rounded_rectangle/", "title": "【pyxel】角丸の四角形を描く", "summary": "角丸を描きたい pyxelでは、デフォルトでpyxel.rectが提供されており、…", "content_html": "

角丸を描きたい

\n

pyxelでは、デフォルトでpyxel.rectが提供されており、
これで四角形を描くことができます。

rect(x, y, w, h, col)\n
\n

しかし、実際に四角形を書く時は、少し角を丸くしたりしたいものです。（？）
そんな時用に関数を作成しました。

公式のpyxel.rect同様に、枠線のみverもあります。

塗りつぶしver

\n
def draw_rrect(x, y, w, h, r, col):\n    """角丸四角形を描く（塗りつぶし）\n    x, y: 左上の座標\n    w, h: 幅と高さ\n    r: 角の丸さ（半径）\n    col: 色\n    """\n    # 中央の矩形を描く（上下）\n    pyxel.rect(x + r, y, w - 2*r, h, col)\n    # 中央の矩形を描く（左右）\n    pyxel.rect(x, y + r, w, h - 2*r, col)\n    \n    # 4つの角を円で描く\n    pyxel.circ(x + r, y + r, r, col)  # 左上\n    pyxel.circ(x + w - r - 1, y + r, r, col)  # 右上\n    pyxel.circ(x + r, y + h - r - 1, r, col)  # 左下\n    pyxel.circ(x + w - r - 1, y + h - r - 1, r, col)  # 右下\n
\n

枠線ver

\n
def draw_rrectb(x, y, w, h, r, col):\n    """角丸四角形の輪郭を描く（線のみ）\n    x, y: 左上の座標\n    w, h: 幅と高さ\n    r: 角の丸さ（半径）\n    col: 色\n    """\n    # 4つの角の円弧\n    # 左上\n    pyxel.clip(x, y, r, r)\n    pyxel.circb(x + r, y + r, r, col)\n    # 右上\n    pyxel.clip(x + w - r, y, r, r)\n    pyxel.circb(x + w - r - 1, y + r, r, col)\n    # 左下\n    pyxel.clip(x, y + h - r, r, r)\n    pyxel.circb(x + r, y + h - r - 1, r, col)\n    # 右下\n    pyxel.clip(x + w - r, y + h - r, r, r)\n    pyxel.circb(x + w - r - 1, y + h - r - 1, r, col)\n    # clipの初期化\n    pyxel.clip()\n    \n    # 上下左右の直線\n    pyxel.line(x + r, y, x + w - r - 1, y, col)  # 上\n    pyxel.line(x + r, y + h - 1, x + w - r - 1, y + h - 1, col)  # 下\n    pyxel.line(x, y + r, x, y + h - r - 1, col)  # 左\n    pyxel.line(x + w - 1, y + r, x + w - 1, y + h - r - 1, col)  # 右\n
\n

若干苦戦しましたが、ポイントは、角の円を描画する際に\npyxel.clip(x, y, w, h)で、角っこのみを描画していることです。

完成図（全文）

\n
import pyxel\n\ndef draw_rrect(x, y, w, h, r, col):\n    """角丸四角形を描く（塗りつぶし）\n    x, y: 左上の座標\n    w, h: 幅と高さ\n    r: 角の丸さ（半径）\n    col: 色\n    """\n    # 中央の矩形を描く（上下）\n    pyxel.rect(x + r, y, w - 2*r, h, col)\n    # 中央の矩形を描く（左右）\n    pyxel.rect(x, y + r, w, h - 2*r, col)\n    \n    # 4つの角を円で描く\n    pyxel.circ(x + r, y + r, r, col)  # 左上\n    pyxel.circ(x + w - r - 1, y + r, r, col)  # 右上\n    pyxel.circ(x + r, y + h - r - 1, r, col)  # 左下\n    pyxel.circ(x + w - r - 1, y + h - r - 1, r, col)  # 右下\n\ndef draw_rrectb(x, y, w, h, r, col):\n    """角丸四角形の輪郭を描く（線のみ）\n    x, y: 左上の座標\n    w, h: 幅と高さ\n    r: 角の丸さ（半径）\n    col: 色\n    """\n    # 4つの角の円弧\n    # 左上\n    pyxel.clip(x, y, r, r)\n    pyxel.circb(x + r, y + r, r, col)\n    # 右上\n    pyxel.clip(x + w - r, y, r, r)\n    pyxel.circb(x + w - r - 1, y + r, r, col)\n    # 左下\n    pyxel.clip(x, y + h - r, r, r)\n    pyxel.circb(x + r, y + h - r - 1, r, col)\n    # 右下\n    pyxel.clip(x + w - r, y + h - r, r, r)\n    pyxel.circb(x + w - r - 1, y + h - r - 1, r, col)\n    # clipの初期化\n    pyxel.clip()\n    \n    # 上下左右の直線\n    pyxel.line(x + r, y, x + w - r - 1, y, col)  # 上\n    pyxel.line(x + r, y + h - 1, x + w - r - 1, y + h - 1, col)  # 下\n    pyxel.line(x, y + r, x, y + h - r - 1, col)  # 左\n    pyxel.line(x + w - 1, y + r, x + w - 1, y + h - r - 1, col)  # 右\n\n# 使用例\npyxel.init(160, 120)\ndraw_rrect(50, 50, 80, 50, 15, 8)\ndraw_rrectb(10, 10, 80, 50, 15, 7)\npyxel.show()\n
\n
\"Image

PyxelCodeMakerに上げてみた

\n

PyxelCodeMakerで書いて、SaveボタンからGistで保存すると、PyxelCodeMakerのリンクで共有が可能になるようです。\nというわけで下記PyxelCodeMakerにて上記関数のチェック可能です。\nhttps://kitao.github.io/pyxel/web/code-maker/?gist=7ce88fec575cb3ac71439b3475b8e2d8

", "author": { "name": "okapping" }, "tags": [ "個人開発", "Pyxel" ], "date_published": "2026-07-23T23:49:49+09:00", "date_modified": "2026-10-13T21:56:37+09:00" }, { "id": "https://okapping.github.io/posts/yarn-folder-update-ver111/", "url": "https://okapping.github.io/posts/yarn-folder-update-ver111/", "title": "毛糸ホルダーアップデートしました。(ver.1.1.1)", "summary": "毛糸管理アプリ「毛糸ホルダー」アップデートしました。バグ修正以外の初めての機能のアップデートになります。 毛糸の情報として保存している画像や、在庫の詳細として保存している画像を…", "content_html": "
\n

毛糸管理アプリ「毛糸ホルダー」アップデートしました。バグ修正以外の初めての機能のアップデートになります。

\n

〜主な追加機能の紹介〜

\n

①毛糸情報にギャラリータブを追加しました。

\n

\"アプリ内のギャラリータブの画像\" 　毛糸の情報として保存している画像や、在庫の詳細として保存している画像を
　「ギャラリータブ」として一覧で確認できるようになりました。

\n

②毛糸情報のメモ欄を追加情報のタブへ移動しました。

\n

\"アプリ内のメモ欄の画像\" 　これによりラベル情報タブがラベルの情報に専念できるようになりました。

\n

③画像が圧縮され、動作と容量が軽くなるようになりました。

\n

これによりスムーズにギャラリータブを閲覧することができます。 ※以前までにアップロード済みの画像ファイルが存在する場合、ギャラリータブが重くなる可能性があります。 その場合は再度アップロードし直してみてください。

\n

④在庫の詳細画面にて、ラベルの情報が確認できるようになりました。

\n

\"アプリ内のラベル情報の画像\"

\n

在庫の詳細の確認中にもラベルの情報へ素早くアクセスすることができるようになりました。

\n

その他不具合の修正

\n\n
", "author": { "name": "okapping" }, "tags": [ "毛糸ホルダー", "個人開発", "iOSアプリ" ], "date_published": "2026-04-17T10:29:00+09:00", "date_modified": "2026-10-13T10:29:48+09:00" }, { "id": "https://okapping.github.io/posts/release-yarn-holder/", "url": "https://okapping.github.io/posts/release-yarn-holder/", "title": "毛糸管理アプリ、毛糸ホルダーをリリースしました！", "summary": "この度、毛糸管理アプリ「YarnHolder（毛糸ホルダー）」をリリースしました！ （といっても昨年12月にはすでにリリースしてましたが。。。）…", "content_html": "
\n

この度、毛糸管理アプリ「YarnHolder（毛糸ホルダー）」をリリースしました！
（といっても昨年12月にはすでにリリースしてましたが。。。）

\n

公式サイトも開設中。ぜひみてね。
↓

\n
\"\"
\n


毛糸ホルダー 公式サイト

\n

こだわり

\n

アプリを作るうえでの個人的なこだわりとして、
apple以外の外部のシステムを使わないようにしています。

\n

同じアプリをandroidにも出そうとしたり、広告を表示させたりする際には、
どうしても外部システムが必要になってしまいますが。

\n

あえてそれらを行わずに、appleデバイスに最適化された、
使いやすい＆洗礼された美しいアプリを（これから頑張って）提供していこうと思います。

\n

swiftは楽しくて最高です。

\n

このブログはアプリ開発関連や、趣味のことなどを載せてみようと思います。 ではまた。

\n
", "author": { "name": "okapping" }, "tags": [ "毛糸ホルダー", "個人開発", "iOSアプリ" ], "date_published": "2026-02-03T10:31:00+09:00", "date_modified": "2026-10-13T13:40:06+09:00" }, { "id": "https://okapping.github.io/posts/release-nenpyo-maki/", "url": "https://okapping.github.io/posts/release-nenpyo-maki/", "title": "【iosアプリ】年表巻き", "summary": "個人用年表管理アプリ 「年表巻き」をリリースしました！…", "content_html": "

個人用年表管理アプリ
「年表巻き」をリリースしました！

\n

全機能 \"無料\" で公開中！！

\n

 

\n
\"\"
\n
\"\"
\n
\n
\n

個人向けの年表管理アプリです。

\n

「あれ何年前だっけな・・・？」とならないように、
自分の歴史や経歴をアプリで管理してみませんか？

\n

アプリの特徴

\n

👍 高い操作性

\n

iosの基本の操作性に倣うことで、とてもシンプルなデザインになっており、
最初から作成を進めることができるように設計しております。

\n

🔐 プライバシー

\n

お客様のプライバシーを第１に考えており、本アプリではお客様のデータは収集せず、また広告も表示致しません。
デバイスの同期も行っておらず、完全にオフラインで動作します。

\n

お問い合わせ

\n

操作方法の不明点等のご相談や、追加機能等のご要望はいつでもお待ちしております。
お気軽に下記メールや開発者X（Twitter）からお問い合わせください。

\n

リンク

\n\n
\n
", "author": { "name": "okapping" }, "tags": [ "年表巻き", "個人開発", "iOSアプリ" ], "date_published": "2026-01-25T22:45:00+09:00", "date_modified": "2026-10-13T23:28:04+09:00" }, { "id": "https://okapping.github.io/posts/release-abstract-games/", "url": "https://okapping.github.io/posts/release-abstract-games/", "title": "【iosアプリ】AbstractGames", "summary": "iosボードゲームアプリ 「Abstract…", "content_html": "
\n
\n

iosボードゲームアプリ
「Abstract Games」をリリースしました！

\n

全機能 \"無料\" で公開中！！

\n

\"\"

\n

\"\"

\n
\n

「テーマ性」や「運要素がない」ボードゲームを多数収録しております。

\n

収録ゲーム一覧

\n

現在遊べるゲーム

\n\n

今後追加予定

\n\n

アプリの特徴

\n

👍 高い操作性

\n

操作のしやすさに重点を置いており、とてもシンプルなデザインになっています。
スマートフォン操作が慣れない方でも安心してご利用いただけます。

\n

🔐 プライバシー

\n

お客様のプライバシーを第１に考えており、本アプリではお客様のデータは収集せず、また広告も表示致しません。
全てオフラインで動作します。

\n

お問い合わせ

\n

操作方法の不明点等のご相談や、ゲームの追加等のご要望はいつでもお待ちしております。
お気軽に下記メールや開発者X（Twitter）からお問い合わせください。

\n

リンク

\n\n
", "author": { "name": "okapping" }, "tags": [ "個人開発", "iOSアプリ", "AbsgtractGames" ], "date_published": "2026-01-14T12:00:00+09:00", "date_modified": "2026-10-13T23:35:36+09:00" } ] }