AI

Capacitor

【iOSアプリ】シミュレーターで App Store 用のスクリーンショットを作る

App Store にアプリを出すには、ストアに載せるスクリーンショットが必要です。私は今までWebのデベロッパーモードを使ってスクリーンショットを撮っていました。今回は、シミュレーターを使う方法について説明します。シュミレーターを使うと必...
Capacitor

【iOSアプリ】Capacitor で作った iOS アプリを「実機で」動かす方法|初心者|Xcode に Apple ID を追加

MedTimer お薬タイマーという次の薬の時間がわかるアプリをCapacitorで作成することにしました。シュミレーターを使って確認しながら作成しました。そのあと、実機で確認したい場面で「シミュレーターでは動くけれど、自分の iPhone...
iOSアプリ

【iOSアプリ】アプリ審査通ったけど、App Storeの言語が英語のままだった

初めてのiOSアプリが審査を通り、無事に公開されました。喜んでストアページを眺めていたら、 「情報」セクションの言語が「英語」になっていました。中身は全部日本語なのに・・・原因を突き止めて直すまでの記録と、次に作るアプリで同じ失敗をしないた...
Capacitor

「MedTimer お薬タイマー」をiOSアプリにしてみる話|React NativeじゃなくてCapacitorを使う|Xcodeで表示確認

個人開発しているお薬管理アプリ「MedTimer」、ずっとWebアプリとして作ってきたのですが、通知機能をつけたくてアプリにすることにしました!理由はシンプルで、Webブラウザだと画面を閉じた瞬間に通知が届かなくなってしまうから。お薬の飲み...
3秒で今日のきぶん 開発記録

【初心者】気分記録アプリ、公開への道⑤|スクリーンショット画像作るの大変だった

こんにちは!初学者ながら、iOSアプリを公開しようとしている者です。今回はアプリ公開に欠かせないスクリーンショット画像についての話です。スクリーンショット画像とはスクリーンショット画像とは(正式名称が合っているかわからない)Apple St...
3秒で今日のきぶん 開発記録

【初心者】気分記録アプリ、公開への道④|データベース「日付」の取り扱い|SQLiteとMySQLの違い

気分記録アプリを作っていて、「日付なんて文字列で入れておけばいいでしょ」と思っていたら、画面を見ても絶対に気づけないバグの入り口だと知りました。その記録です。SQLite とは何か(MySQL を知っている人向け)私は phpMyAdmin...
3秒で今日のきぶん 開発記録

【初心者】気分記録アプリ、公開への道③|Expo Go つまずいた iPhone 表示確認

AIにアプリ作成のプロジェクトの土台を作ってもらいました。ファイルの詳細は👇その後に実機でチェックするにあたってExpo Goが必要とのこと。Expo Goの導入について確認すると、「アプリを登録してQRコードを読み取ります」しか書いてなく...
3秒で今日のきぶん 開発記録

【初心者】気分記録アプリ、公開への道②|Expo で React Native アプリを作り、iPhone 実機に表示するまで

今回はAIに助けてもらって、Expoのファイルの作成から表示までの流れを書いていこうと思います。2026年8月、アプリ開発が初めての状態から Expo でプロジェクトを立ち上げ、自分の iPhone に画面を出すまでの記録です。公式手順どお...
3秒で今日のきぶん 開発記録

【初心者】気分記録アプリ、公開への道①|進め方とExpo Go

要件定義書をChatGPTと作ったが、Claude Codeに確認すると考えられていない点が10点以上あった。iOSのアプリなのか、Androidを考えたアプリなのか、学習コスト、個人情報の扱いなど。データベースは一度Firebaseを使っ...
アプリ紹介

FANELABで作ったアプリ・Webアプリ一覧/開発ログ一覧

FANELABでは、Web制作やアプリ開発の中で「こんな機能があったら便利そう」「毎回同じ作業をするのが面倒」と感じたことをきっかけに、さまざまな小さなアプリやWebツールを制作しています。このページでは、これまでに公開したiOSアプリと無...
開発ブログ

Tailwindの色「–color-ink-soft」って何色?VScodeの拡張機能「Color Highlight」が便利!

お薬タイマーの開発中、AIが書いた「--color-ink-soft」という色の指定がわからず、カラーコードを探し回りました。Tailwind v4の色変数のしくみと、index.cssやColor Highlightで色を確認する方法を初心者目線でまとめています
開発ブログ

Tailwind v4の余白がわからない!mb-6の中身「calc(var(–spacing) * 6)」を調べた話

お薬タイマーの開発中、Tailwindの余白がなぜかうまく動かず悩みました。mb-6の正体「calc(var(--spacing) * 6)」のしくみと、余白が変わらないときの原因、私が使った調整方法を初心者目線でまとめています。
開発ブログ

URLからモックアップ画像を作る機能|canvasが汚染された状態から画像プロキシを使った方法で解決

私が作ったポートフォリオ用のモックアップを作成するアプリ「Mockup Generator」。開発ブログ↓一番欲しかったのはURLからモックアップを作り、PNG画像で出力する機能だったのですが、CORS(Cross-Origin Resou...
開発ブログ

AIに丸投げしてはいけないと思った理由|便利だからこそ「理解すること」が大切

AIに開発をすべて任せて感じた課題を紹介。丸投げのリスクや、コードを理解しながら活用することの大切さについて、実体験をもとに解説します。
開発ブログ

AIが書いたコードを読むのは意外と大変|便利だけど理解には時間がかかる

AIが生成したコードは便利ですが、読み解くのは意外と難しいこともあります。実際に開発で感じた、AIコードのメリットと苦労した点を紹介します。
アプリ紹介

ビフォーアフター画像を残したくて、写真コラージュツールを自作した話【Photo Timeline】

美容ケアの変化を残したくて、写真を並べるだけでビフォーアフター画像がつくれる無料ツール「Photo Timeline」をつくりました。開発のきっかけと、写真を外に出さない設計にした理由をまとめています。
開発ブログ

【コピペOK】CSSだけでネオン文字を作る方法|ゲーム風・サイバー風デザインを作ろう!

CSSだけでネオン文字を作る方法を解説します。text-shadowを使った基本の光る文字から、ゲーム風・サイバー風デザインまで、コピペで使えるサンプルコード付きで紹介します。
開発ブログ

サイバー風Webデザインの作り方|FANELABで取り入れたデザインの工夫を紹介

FANELABで採用しているサイバー風デザインの作り方を紹介します。ネオンカラーやDotGothic16フォントなど、ゲーム風・近未来風デザインを制作するポイントを実例付きで解説します。
運営者プロフィール

【はじめまして】看護師からweb転職した運営者プロフィール

看護師からWeb業界へ転職し、現在はAIを活用したWebアプリ開発やWeb制作、広告運用に携わっています。運営者である私の経歴や現在取り組んでいることをご紹介します。
アプリ紹介

推し系統占いを公開しました!今日の気分にぴったりな推しを診断

推し系統占いは、今日の気分にぴったりな「推しの系統」を診断できる無料Webアプリです。開運ワード付きカードやSNS共有、おすすめメンズコンカフェ紹介にも対応しています。