yukiamakawa / recipeformatter

SNS投稿用のレシピ文章をカンタンに作れるアプリケーションです

recipe-formatter

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

recipeformatter's Issues

デザインもう少しつける？

Androidで自動的に一番上の要素にfocusされる

期待する動作

材料のリストで、分量や単位の選択肢をタップした後にinputにフォーカスする。

実際の動作

材料が2つ以上ある場合、自動的に一番上の要素にフォーカスされてしまう

再現手順

原因（予想）

分量や単位のinputの指定を$refsからidに変えたことで、idが重複して一番最初の要素が選択されるようになってしまった。

解決・改善案（あれば）

補足

iPhoneでクリップボードにコピーのボタンが反応していない？

• iPhoneXR iOS 13.3.1 Safari で発見

ホームに追加する際の文言とアイコン追加

placeholderの文字色が少し濃い

機能概要

PCでは問題ないと思ったが、スマホで見ると、やや濃い目に見える。

要望理由

実装案

補足

pagesのcss設定

備考の縦幅を大きくする

機能概要

2行ではたりなさそう

• 手順は平均２行。収まっている
• 備考は2行では足りないかも。

要望理由

実装案

補足

Google Analyticsが動作していない

formとtextareaで文字サイズが違うと見にくい？

CSSで変数を設定する

atomsのcss設定

google analyticsの導入

説明用のブログ?イラスト？を書く

コピーをクリックしたときに、インスタやツイッターを開く

機能概要

要望理由

実装案

補足

フォームの追加、削除

項目入れ替えができるようにしたい

機能概要

・特に作り方は途中挿入や入れ替えができた方が便利。後から忘れてた！ってなった時に消して入れ直すのが大変。

要望理由

実装案

補足

ヘルプ表示の追加

機能概要

要望理由

実装案

補足

コンポーネント間のdataの受け渡しの設定

フォーム上でも手順と備考にindexをふる

アプリ名正式に考える？

問題

• 英語なので読みにくい

• タイトルではどんなアプリなのかわからない

  • formatterという単語はなじみがないのでは

• レシピを作るのを手助けしてくれるアプリ、という点が伝わる

改善案

• レシピメーカー
• レシピクリエイター
• レシピヘルパー

分量と作り方を両方見やすくする

機能概要

• 材料と作り方は、内容と手順を確認しながら入力する

要望理由

実装案

補足

masterにpushしたらciでfirebase deployされるように設定

テンプレの作成

機能概要

• ハッシュタグや文章のテンプレを保存して呼び出せるようにする

要望理由

• 出汁の取り方など、よく使う文章は何度も入力が面倒
• 今のアプリでは、別の部分からコピペを毎回しないといけない

実装案

補足

レシピの最後にレシピフォーマッターでの作成がわかるようにする

機能概要

要望理由

実装案

補足

data()の情報をコピーできるようにする

moleculesのcss設定

入力内容のアウトプット部分

organismsのcss設定

プレースホルダーをリアルな文章にする

機能概要

料理の説明部分のプレイスホルダーがもう少しリアルだと良いな。

要望理由

実装案

補足

コピーした時にメッセージを表示する

CSSのgridに書き換え

issueとプルリクのテンプレ

firebaseへのデプロイ

コピー用文章のテキストの間隔（縦）が狭い

機能概要

コピー用文章の縦幅を大きくする

要望理由

• 読みにくい
• インスタに投稿するときのイメージと異なる

実装案

• line-heightを.CopyTextに設定する

補足

最終項目が空だった時にindexのみ出力される

期待する動作

最終行が空のときはindexも表示しない

実際の動作

indexのみが表示されている

再現手順

手順と備考で、行を追加して最終行を空にする

原因（予想）

reduce()内で空の場合はindexも出力しないように書き換える必要がある

解決・改善案（あれば）

補足

著作権表示の追加

機能概要

要望理由

実装案

補足

ロゴのデザイン

単位をまとめる

機能概要

• 食材の欄で、単位をプルダウンで入力できるようにする

要望理由

• 単位は半角や記号が必要なものが多く、スマホではキーボードを切り替えて入力するのが面倒

実装案

• 材料にunit(単位)カラムを追加
• 入力で自由入力とドロップダウンを両立できるようにする
  　- 単位どうする?
  　　- 個, g, ml, l, 本, 切れ
  　　- 頻度が高く、キーボード変換や文字変換が必要なもの
• 並び替えボタンを初期は非表示にする
  　- 並び替えを押すと、文字は固定の代わりに入れ替えボタンが表示される
  　- 完了を押すともとの入力ができる
  • 追加もデザインを合わせる

補足

内容を入力していなくてもindexなどが表示されるフォームがある

本来フォーム入力が無ければ"1.""#"といった初期表示も出ないはずだが、一部表示されているものがある。

手順、備考、ハッシュタグで表示されていた

レシピタイトルの横幅を大きくしたい

期待する動作

レシピタイトルが全文見えるようにしたい

実際の動作

タイトルの横幅が小さくて基本的に切れてしまう

再現手順

原因（予想）

解決・改善案（あれば）

補足

ビルドエラー解消

期待する動作

実際の動作

#93 の変更でビルドエラーが出るようになったので修正

再現手順

原因（予想）

解決・改善案（あれば）

補足

プレビューと実際にコピーされる文章が違う

期待する動作

プレビューの文章がそのままコピーされる

実際の動作

空白の処理などが微妙に異なる

再現手順

原因（予想）

コピー対象のテキストとプレビューのテキストは別の処理を施したものを使っている。

解決・改善案（あれば）

同一のcomputed()から出された値をプレビューとコピーの両方で使う

補足

bosyuの案内をする

食材の分類を分けられるようにする

機能概要

• 食材の中でも、「ソース用」「タネ用」など複数に分類分けしたい

要望理由

• ソース系などまとめて調理するものは「★を入れる」のように手順でまとめたいので、材料でもまとめたい
  https://miro.com/app/board/o9J_kvJLhBU=/

実装案

補足

レスポンシブ対応

備考の頭をindexではなく中点にする

• ユーザー提案

ESlintとprettier追加

項目内の改行ができていない

開発環境用のプロジェクト作成

機能概要

• 開発用のプロジェクト作成
• devにマージされた時にcircleciで開発環境にdeploy設定

要望理由

本番用のプロジェクトしかないので、開発用のプロジェクト作成

実装案

補足

追加、削除のボタンのサイズが小さい

• ユーザーからの指摘