Posts

はじめに こんにちは matinana です。 CAMPFIRE Ownersという融資型クラウドファウンディングでサービス開発を行っています！ この記事は**CAMPFIRE Advent Calendar 2020**の 21 日目の記事です。 アドベントカレンダーも終盤戦に入りましたが、CAMP の記事の中にはゲーム要素を含んだ**走る！音が出る！HTML でミニゲームをつくりました**など面白い記事が沢山ありますのでぜひこの機会に覗いてみてください！ 本記事の目的 チーム開発に関して全く知らなかった約一年前の自分が、一年間のチーム開発を通して学んだ態度や tips をまとめることで、 チーム開発の流れの理解 チーム開発に必要になりそうな態度の一案を提示 上記を行い、これからチーム開発を始める人の不安を払拭する一助になることを目的にしています。 書こうと思った動機（当時の私） 私が CAMPFIRE に入社したのは昨年の 11 月です。 独学でいくつかのアプリを作っていましたが、プログラミングの業務や他の人とチーム開発することは未経験でした。 そのため、当時の自分は github でブランチを分けての開発などもほぼしたことがなく、 使ったことがある git コマンドといえばgit pushのみ (addやcommitは vscode でポチッと出来た) GitHub Flowどころかプルリクエストの作成も使ったことがない 上記のような、チーム開発のtの字も知らない（チですらない…）状態でした。 チーム開発一年目というのは、エンジニアとしてもきっと一年目。 目の前の山積みの問題にしっかりと向き合えるように、チーム開発の雰囲気を掴み取ってもらい、闇雲に生まれてしまう不安を軽減できればと考えています。 話さないこと ✕ 開発〜プルリクエスト作成までの基本的な git のコマンドについて こちらは@shh-nkmr さんが書いてくださっているgit 初学者の初めてのチーム開発で気をつける事の備忘録にまとまっています。 開発〜プルリクエスト作成までの基本的な git コマンドに自信がない場合はこちらをご参照ください。 ✕ 具体的なコードの書き方やリファクタのコツなどに関して 私も知りたいです 😂 笑 残念ながらこれらは対象外です。 目次 基本的なチーム開発の流れの整理 課題や仕様の整理 実装 git blame を活かす 実装のスコープを意識する コミットメッセージにプレフィックスをつける rebase でコミットを整理する PR 作成 気になることは全部コメントで書く PR を小分けにする 動作確認をしっかりする レビュー 疑問点を投げるのも大切なこと 良いと思った部分は言葉にして良いと言う 悪い点を指摘するのではなく、相手の理解が進む形で投げるようにする nits IMO MUST などのレビューコメントにラベルをつけてみる 本番反映 あとがき 基本的なチーム開発の流れの整理 GitHub Flow どころかプルリクエストの作成も使ったことがない...

はじめに 本記事について 本記事は React Native(Expo)を用いてOmoidata 日記というスマホ用日記アプリを業界未経験者の私が独学で作るまでに考えたこと、参考にしたサイト、使ったツールなどをまとめたものです。 アプリの概要設計、デザイン（プロトタイピング）、開発、公開までのセクションに分けてそれぞれ紹介いたします。 目的 プログラミング初心者の方々は、周りにアプリを作った事がある知人も少なく、Progate やドットインストールで基本を学んだのち、どのようにオリジナルアプリを作れば良いか手がかりが少ないと思います。 そこで、合格体験記のように私のアプリ制作の流れをシェアすることで、「アプリ制作ってどうやるのか全くわかんね！＼(^o^)／」という状態から「何をすべき（考える・調べる）かの輪郭はわかる」という状態への昇華を目的としています。 対象読者 「プログラミングの初歩的な知識があり、作りたいスマホアプリのアイデアがあるけれど、アプリ制作のやり方がわからない方」 今回は対象読者を「作りたいアプリのアイデアがある方」としています。 そのため、アイデアの創出方法などには触れていません。 また、React Native 製アプリを引き合いに出して説明していますが、ハイブリッドアプリ限定でなく、ネイティブアプリ制作の方にも参考になるような記事を目指して書いています。 目次 基本的な考え方 Done is better than perfect! 自分が欲しいものを作る データを残しておく 概要設計 人気のアプリをダウンロードしてスマホアプリのイロハを感じる 競合アプリをダウンロードしてコアな機能を整理する 作りたい機能に近しいアプリをダウンロードして考えを整理する UI のイメージをより明確にする コンポーネントライブラリーを確認しておく デザイン Adobe XD の使い方を学ぶ XD で参考資料を整える XD で画面を作ってみる 細かいデザインについて 開発 Google 検索をする 公式のドキュメントを読む オープンソースのコードリーディングをする Q&A サイトを利用する 開発の前に… その他 Tips 公開まで プライバシーポリシー・利用規約 ストア用スクリーンショット アイコン サポート URL 基本的な考え方 開発やデザインなどの実装の話の前に、アプリ制作をする上で持っていた方がよいと思う考え方を３つほど記載いたします。 1. Done is better than perfect! 個人開発界隈で擦り切れるほど聞かれる言葉で、もはや語ることはありませんが、やはり初めてアプリ開発をする場合はこのメッセージよりも大切な態度はないと思うので記しておきます。 2. 自分が欲しいものを作る “最悪自分のための最高のサービスになってもいいじゃないですか” > [引用元] 個人開発のモチベーションが続かない、作り終わらない。原因と対策を考えてみた。...

本記事について(ゴール） こんにちは matinana です。技術記事人生初執筆です。宜しくお願いします。 本記事では、下記 GIF のように React Native(Expo)を用いてフォトライブラリの画像を Firebase Storage に保存し、ストレージのダウンロード URL と画像のキャッチコピーを Firestore で管理するまでの一連の実装をしてみます。 はじめに 主なフレームワーク等のバージョンについて 2019 年 9 月 11 日現在最新（SDK34)の Expo を使っています。 “expo”: “^34.0.1”, “react”: “16.8.3”, “firebase”: “^6.4.0”, ソースコードの記述について この記事では要所のみを説明しています。そのため、記事内のソースコードは全文ではありません。実際に手を動かしてみる場合は、こちらのソースコードをコピーして使うというよりも、Githubの方を参照お願いします。 実装の流れ コンポーネントを作る imagePicker を使ってフォトライブラリの画像を取得する Firebase をプロジェクトに導入する フォトライブラリから取得した画像を Firebese Storage に保存し、保存した画像のダウンロード URL を Firestore と紐付ける 1. コンポーネントを作る まずは外観を作るところから始めましょう。 と、言っても複雑な見た目は作っておらず、要素は３つのみです。 ・PostScreen.js: モーダルを表示するボタンと追加された投稿を一覧で表示するスクリーン ・AddPostModa.js: 写真を追加するための登録フォーム（モーダル） ・Post.js: それぞれの投稿のリスト import React from 'react'; import { StyleSheet, View, Dimensions, KeyboardAvoidingView, } from 'react-native'; import { Button } from 'react-native-elements'; import Modal from 'react-native-modal'; import Post from '....