Imported-from-Medium

React Nativeチュートリアル: プニプニしたボタンを作ろう！

どうも個人アプリ作家のTAKUYAです。新しいYouTubeビデオを制作しました！

タイムライン

0:22 Intro
1:39 What you will learn from this video
2:14 ハック開始！
7:09 Neumorphism CSSをRNにインポートする
8:06 タイポして、気づいて、直す
9:00 背景ビューを変えようとするものの、変な結果になる
10:45 ボタンの見た目がなんかおかしい・・
11:40 イベントハンドリングをどうやって実装するのか調べる
14:46 グラデーションの実装方法をGoogleで調べる
15:22 react-native-linear-gradientのインストールに手こずる
17:33 グラデーションに角度を付ける方法の理解に苦しむ
20:03 いい感じに出来た！
20:45 まとめ

スキューモーフィックなUIが好きだ

今日は、React Nativeアプリの開発ワークフローについて皆さんにお見せしたいと思います。以前の動画で、tmuxとvimの開発環境についてご紹介しました。もしまだご覧になっていない方はぜひご覧ください。

僕はInkdropというMarkdownノートをデバイス間で整理して同期できるアプリを作っています。そのモバイル版はReact Nativeで開発しました。React NativeはiOSとAndroid両対応のアプリが作れるフレームワークで、
ご覧のようにまるでネイティブアプリのようにスムーズに動作します。とても簡単にマルチプラットフォームのアプリが作れます。

さて今回は、僕が普段どのように、vimとtmuxを使ってReact Nativeのアプリを作っているかお見せしたいと思います。そのお題として、やわらかい見た目のボタンを作りましょう。僕は個人的にスキューモーフィックUIが大好きです。今ではほとんど見かけませんが、2013年ごろまではとてもポピュラーなGUIデザインの趣向でした。スキューモーフィズムのインターフェースオブジェクトは、現実世界に対応する物体を模していて、ユーザにどうやってそれらとインタラクトするのかを示します。そして最近、アレキサンダー・プリュートさんが素晴らしいスキューモーフィックなデザインを公開しているのを見つけました。彼は、もしまだスキューモーフィズムが行きていて発展し続けていたら、アプリケーションの見た目はどんなんだろうか、というビジョンを提案しています。素晴らしいですよね。沢山の人がそれに魅了されました。

ミカール・マレウィッツさんが、この新しいスキューモーフィズムをNeumorphismと名付けました。

さらに彼は、ソフトなUIを構築するためのCSSコードをジェネレートするサイトも作りました。この動画では、これをReact Nativeで作ってみたいと思います。成果物がこちら：

いい感じでしょ。かわいいですよね。これを作るのに実際は40分ぐらいかかりました。で、この動画でお伝えしたいのは、単なるボタンの作り方ではなくて、どうやってその作る方法を見つけるかというプロセスです。つまり、僕が普段どのようなプロセスでモノを作っているのか。ミスして、エラーに悩んで、解決策をググり、そして問題を解く、その流れに注目して見てほしいと思います。そして、そのコツをコピーして盗んでください。お楽しみいただければ幸いです。

コードはGitHubに公開していますのでご参考ください：

ハッカーと写真家

どうも、Takuyaです。エージェント型コーディングは、今やすっかり欠かせないワークフローになりました。自分のような個人開発者にとっても、ソフトウェア開発の景色と考え方を一変させました。同時に、この劇的な経済的変化に不安を感じている人も多いと思います。ほとんどの人にとって、これはプログラマーとして経験してきた中で最大のパラダイムシフトです。自分もなかなか受け入れられず、悲嘆の五段階の取引(Bargaining)と抑うつ(Depression)の段階を抜けるまでに結構時間がかかりました。でも Opus 5.5 を見てから、AI は自分でほぼコードを書くのをやめてもいいくらい賢くなったと感じました。今は主に、生成されたコードを Neovim でレビューしています。 AI はこれからも進化し続けるし、自分がコードに触れる機会は着実に減っていくでしょう。その中で、今後自分たちが何を学ぶべきか、プログラミングに対するメンタルモデルをどう変えていくべきかについて議論したいと思います。それと、この特別な瞬間の自分の考えや気持ちを書き残しておきたいと思ったので、本稿は自分のための「

信念を貫け！1年半の開発と3ヶ月の燃え尽きから学んだAIコーディングの教訓

お断り: 元の記事は英語で書き、壊れた文法はAIで直しました TL;DR * アプリの新バージョン開発に費やした1年半(3ヶ月の燃え尽き期間を含む)で学んだこと * AIは常に人生の二の次であるべき。過去には二度と戻れない * 5年後に振り返ったとき、Fableがどうだったとか完全にどうでもいい * シングルタスクをキープしろ。エージェントの数は関係ない * 頭の中のコンテキストスイッチが次のボトルネック * 理解があるからこそ、次のアイデアが生まれる * 自分を本当に幸せにするものを知れ – 僕は自分が欲しいものを作る * SaaSを10年以上運営するのは、同じ作品を何年も描き続ける漫画家のようだ * 自分の信念を築けるのは、自分だけ Inkdrop v6の開発に１年半費やしたどうもTAKUYAです。英語圏でかれこれ10年個人開発をしています。先日投稿した通り、予てから作っていた新バージョンのMarkdownノートアプリをやっとリリースしました。繰り返しになるので、リンクだけ貼っておきます： Inkdrop is an AI-native Markd

Inkdrop v6リリースしました

どうもTAKUYAです。日本語でもお知らせします。 Inkdrop v6を正式リリースしました！1.5年がかりの大改修となり、大変お待たせしました。本バージョンでは、新しいMarkdownエディタや、最近のエージェント型コーディングワークフローに最適化された新しいAI連携機能など、根本から作り直した改善が盛りだくさんです。それでいて、気が散らないシンプルでクリーンなUXはそのまま維持しています。まずはじめに、既存のユーザの皆様に大きな感謝を述べたいと思います。開発期間中に辛抱強く待って下さった事、そしてCanaryテストで多くのフィードバックをくれたことに心から感謝します。皆さんのサポートなしには実現できませんでした。ウェブサイトもv6に合わせて完全に作り直しました。アプリのUIをそのまま使ってライブデモを構築したので、アプリをDLせずとも新しいエディタを試せるようにしました。ぜひ触ってみてください： Inkdrop is an AI-native Markdown note app for developers — smooth context flow between

個人開発と生活

朝、娘をバス停まで送り出す。前にちらっとみかけた田村淳の相槌術が面白そうだったので、ママ友との雑談で早速実践してみたら効果てきめんだった。その方法は単純に、職業病で癖になっている批判的思考を完全オフにし、相槌に全神経を注ぐ、というものだ。「へぇ」「うん」「うーん」「なるほど〜」と、相手の話にどんなバリエーションで返そうかという所に集中する。騙されたと思って試してみて欲しいんだが、このお陰で相手の話がよく理解できて、自然なフォローアップの質問やリアクションが浮かぶようになる。こちらから頑張って面白い話をひねり出す必要が無いので、気が楽になった。話の結論も何もいらなくて、「そうなんですね」「いいですね」「ほんじゃお疲れ様です〜」みたいな感じで締めくくる。反応に困ったらとりあえず「いいですね」まじで便利！男相手の会話でも有効。インタビューにも応用が利きそうだ。天気が悪くてだるいので、やる気が出るまで部屋でレシートの撮影などの単純作業をして過ごした。レシートを撮ったら事務代行さんに投げる。そのうちAIに代替させたい。レシートは基本カフェばっかりである。ユーザフォーラムをチェックしたら、