Day12 ウェルカム画面が動いた!Awesome!

【両OS対応】 React Nativeで爆速モックアップ/プロトタイプアプリを作ろう 1/3 【ウェルカム画面編】の続きから

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 1/3 【ウェルカム画面編】|川西発之 / 陳発暉|note ※※※※※本記事は2018年5月に執筆されました.当時の React Native の環境から変わっている部分もありますので,2020年5月より記事の値段を大幅値下げすると同時に,記事更新や質問等のサポートの対象外とさせて頂きます.m(_ _ )m1/3 【ウェルカム画面編】:799円 → 199円2/3 【ホームタブ編】:899円 → 299円3/3 【プラスボタン編】:999円 → 399円※※※※※
 note.mu

> って、あれれ〜…

から再開
もくもくと作業。ところどころメモです。

よっしゃーーーー!横スクロールできたー!!!
そして、ついに事前の予告どおり、こちらの有料ノートの購入のところまでたどり着きました。ありがとうございます。このままやらせていただきます!

さっそくクレカ支払いぽちー。がんばるぞー!

画像を3枚準備するところまで来ました。

LIGさんのこちらからスマホサイトのデザイン時に参考になるWebサイトのギャラリーまとめ

スマホサイトのデザイン時に参考になるWebサイトのまとめ6選 | 東京のWeb制作会社LIG スマートフォンサイトやスマートフォン用のアプリ、レスポンシブWebサイトをデザインする際に参考になるUIやトレンドのリンク集、ギャラリーサイトをまとめてご紹介します。海外のトレンドやデザイン性の高いサイトも参考になります。幅広いデザインやUIの引き出しを持つことで、ユーザーが使いやすいWebサイトをデザインしましょう。
 liginc.co.jp

こちらに掲載されているスマホ画面をダウンロードさせてもらって、取り急ぎはめておきます。

スマートフォンサイトのデザインリンク集 sps collection sps collectionは技術的・デザイン性に優れたスマートフォンサイトを掲載しているデザインリンク集です。スマートフォンからも閲覧可能です。
 spscollection.com

適当なところの画面を右クリックして画像保存。
どのサイト見てもきれい。デザイナーさんはすごいね!

最後はボタンの設置です。

> $ cd AwesomeProject
> $ npm install react-native-elements

これもいろいろエラーでましたが、再度

> $ npm install

することで解決しました。

【ウェルカム画面編】最後まできましたー。ここまでの結果はこちら!

それっぽい!!!!

わたしがみなさんに提供するアプリも、きっとこのウェルカム画面を実装することでしょう!そのときは How to use みたいな英語でそれっぽさを増し増しでやりたいです!

初めての操作動画撮影

  1. QuickTime Playerを起動
  2. ファイル>新規画面収録
  3. 赤丸の横のアローをクリックしてマイクをOFF
  4. 一部の画面だけ撮影したいので、ドラックして画面範囲を設定
  5. 収録開始をクリック
  6. 終わったら command + control + esc で撮影停止名前をつけて保存

ここまでは順調でした。
Gif に変換したかったので、変換アプリを探すことに。

最初 Gifted インストールしてみた

‎Gifted ‎Turn a quick video into an animated GIF easily. Useful to create simple looping animations that can be shared in a chat room or in a blog post.
 apps.apple.com

ドラッグアンドドロップですぐに変換された!だがしかし!!縦長の画面が横長に自動変換されてしまう…

どうやって設定するのだ…
まあいいや
やめよう…

.mov を gif に変換【Mac】

.mov を gif に変換【Mac】 - Qiita 概要 ffmpegを使います なければhomebrewでインストール brew install ffmpeg Homebrew - macOS用パッケージマネージャー FFmpeg - 動画の変換 .mov →...
 qiita.com

これならできそう!
だけど Home brew のアップデート時間かかる…使ってなかったからなぁ。

― 30分後

うおおおおおおぉぉぉおおぉぉ!!!
早くコイーーーーーー!!

― 5分後

アップデート&インストール終わったーーー!

> $ ffmpeg -i welcomescreen.mov -r 24 ws.gif

かんせーい!!
やったーー!!

さぁ WordPress にアップロード

えっつ?なんで?
エラーになっちゃうの???

んで、いろいろ探したけど、WordPress5 になって Gutenberg になってからは、アップロードできないみたい。みんなどうやってアップロードしてるの?教えてください!!!

ということで、さくっと逃げて Twitter にアップしたのを記事に貼ることにしました涙

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください