React Nativeチュートリアル: プニプニしたボタンを作ろう！
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に公開していますのでご参考ください：
