見積もり - HackMD

# 見積もり ## 2021-10-19 ### CSVダウンロード処理をバックエンド化する [#71](https://github.com/imejin-dev/redirect-on-rails/issues/71) - ユーザーがログインしてないとき - 403 - ユーザーがログインしているとき - ユーザー権限がオペレータの場合 - 403 - クリックログがある場合 - 200 - クリックログがない場合 - 404 ### ターゲットリストにページネーションがほしい [#69](https://github.com/imejin-dev/redirect-on-rails/issues/69) - 変更前 - showメソッド(キャンペーン詳細画面) - キャンペーンに紐付くターゲットに紐づくアクセスログを取得 - 変更後 - キャンペーン詳細画面 - campaigns_controller.rb - showメソッド(キャンペーン詳細画面) - ページネーション追加 - キャンペーン25件分に紐づいたターゲットを返す - アクセスログ情報は返さない。 - campaign_associatedメソッド(クリック履歴画面、キャンペーン編集画面) - キャンペーンに紐付くターゲットに紐づくアクセスログを取得分解キャンペーン詳細画面 - showメソッドはCampaignのみ - 同時にtarget#indexを叩く - param campaign.id(params id) クリック履歴画面 - access_logs#indexを叩く - 注意点 CSVダウンロード処理をバックエンド化するのでこのissueではダウンロードをさせるようにしていません。 csvダウンロードさせる処理を追加しても追加したコードを消す必要が出てくるため。 ### オペレーターのユーザー権限修正 [#70](https://github.com/imejin-dev/redirect-on-rails/issues/70) (ターゲットリスト追加ボタンとCSVダウンロードボタンを非表示にする) 関数に権限名を渡して、ユーザーの認証タイプと比較し、TrueFalseを返す　方がいちいちユーザー＝＝ADMINとかしなくて済むすると、ボタンの仕様変更があったとき便利 ### 全般的にリロードができない [#67](https://github.com/imejin-dev/redirect-on-rails/issues/67) 現象 /はいけるが、URIがそれ以上だとエラー →Nuxtの動的ルーティング [リンク↓](https://www.dkrk-blog.net/vue-nuxt/nuxt-generate-routes) ``` API: generate プロパティ - Nuxt.js Nuxt.js には nuxt generate コマンドがあって、pages 配下に置いた ".vue" ファイルを、静的なコンテンツとして出力してくれる。でも、動的なルーティングは無視してしまう。吐き出された index.html から、nuxt-link を通して動的なルーティングにアクセスすることは可能だけど、それらは index.html から切り替えたものなので、 "fruits/orange/" などに直接アクセスしようとしても、index ページが存在しないためアクセスできない。 ``` herokuをpm2対応したらいけそう？ https://buzz-ink.slack.com/archives/C014J00E170/p163443530024500 清水、杉田の方でも調べてみるタスク ### 文案が長い場合の表示改善 [#74](https://github.com/imejin-dev/redirect-on-rails/issues/74) overflow-y:scrollでいけそう 10行文のheightを設定する本文をdivタグとかのブロック要素で囲う --- ## 2021-10-22 ### ワーカー権限ではキャンペーン一覧を閲覧できなくする[#76](https://github.com/imejin-dev/redirect-on-rails/issues/76) - オペレーター時はサイドバーで一覧は削除 - `frontend/middleware/admin.js` で制御 - オペレーター向けのトップ画面は必要（`/admin`）はまずい→作る方針 - `frontend/middleware/admin.js`を下記っぽく変更 ```js= export default ({ $auth, route, redirect, $useUtil }) => {  const loggedInUserNotAccess = ['admin-campaigns-new'] const isDisallowed = !$useUtil.isAllowed($auth.$state.user.authority_type, ['admin']) && loggedInUserNotAccess.includes(route.name) if (isDisallowed) return redirect('/hogehoge') #新しいページへ } ``` ### ログイン時にアクセス時点のURLを記憶する[#77](https://github.com/imejin-dev/redirect-on-rails/issues/77) - 動作的にはリダイレクト。vue-routerの機能でできる login.vueに記述（createdとかと同じスコープ） ```js // signIn.vue data() { return { prevPath: '', } } beforeRouteEnter(to, from, next) { next(vm => (vm.prevPath = from.path)) }, submit() { // ログイン処理後にpush this.$router.push(this.prevPath) } ``` ### 文案コピー用画面のデザイン改善 [#75](https://github.com/imejin-dev/redirect-on-rails/issues/75) - エンジニアのベストエフォートでデザイン改善 - 最低限のマージン、パディング - 電話番号、本文の見分けがつく ### 【管理画面】キャンペーン一覧からキャンペーンを削除できる [#25](https://github.com/imejin-dev/redirect-on-rails/issues/25) - Estimate・・・3 - 矢代・・・3 - 杉田・・・3 - 清水・・・3 - APIはできていて、リクエストも通ることを確認済み - 削除対象→モーダルに伝達して削除まで、細かいエラーがあるかもですが、リクエストは成功引き継ぎ分 - 削除モーダルにて、削除対象のキャンペーンのクライアント名を入力させる --- ## 2021-11-01 ### 画面の横幅領域を適切にする [#93](https://github.com/imejin-dev/redirect-on-rails/issues/93) - Estimate・・・2 - 矢代・・・2 - 杉田・・・2 - 清水・・・2 - 全て共通 - PCにおいて、最小960pxの横幅で閲覧した際にもコンテンツが溢れない - 959px以下は崩れても問題ない。 - レスポンシブ対応 - キャンペーン一覧 - 企業名以外の項目についてテーブル内での折返しが発生しないこと - width調整 - IDは5桁まで折り返さずに表示させる - break-word: no-wrap; - キャンペーン詳細 - ID、電話番号、操作アイコン欄はテキストを折り返さない - width調整 - IDは5桁まで折り返さずに表示させる - break-word: no-wrap; - クリック履歴一覧 - issueでは指定はないがキャンペーン同様に横幅を調整する(必要であれば) - テーブルのスタイルはキャンペーン一覧などと合わせる - その他(別issueでいいが現状把握として) - #admin配下のテーブルに適用されるscssを削除 - 👆el-tableの原型も変わってしまっている - https://element.eleme.io/#/en-US/component/table#table-with-border ### 【キャンペーン詳細】1ページあたりのターゲット一覧の表示数を変更する [#117](https://github.com/imejin-dev/redirect-on-rails/issues/117) - Estimate・・・1 - 矢代・・・1 - 杉田・・・1 - 清水・・・1 - キャンペーン詳細 - 1ページあたりの表示件数を100件にする - perを100にして渡す ### 新リダイレクトちゃんの可用性向上に向けた設計作業 [#113](https://github.com/imejin-dev/redirect-on-rails/issues/113) - Estimate・・・ - 矢代・・・ - 杉田・・・ - 清水・・・ - 常時維持したい機能 - リンクのリダイレクト(かなり重要) - リダイレクトクリックの記録 - 別案件チームを巻き込んで設計する必要がある？案１：heroku →　AWS RDB → Lambda - 送る側（管理者、ワーカー）：AWS RDBをDBとしたheroku - 使う側（リダイレクトを踏む人）：RDBを参照しリダイレクトするLambda 👇吉田さん、藤井さんと話し合い現状 - heroku - Standard dyno * 2 →$50 - heroku postgres Hobby Basic $7 - ※Hobby Free 10,000レコ → Hobby Basic 1,000,000 新リダイレクトちゃんのAPI→APIがリダイレクト先URLを返す→リダイレクト案１：heroku →　AWS RDS → Lambda(リダイレクト部分だけ) - 送る側（管理者、ワーカー）：AWS RDBをDBとしたheroku - 使う側（リダイレクトを踏む人）：RDBを参照しリダイレクトするLambda - メリデメ論点 - dyno(アプリケーション) - デプロイ時の再起動に掛かる時間・・・保留(10秒ぐらいなら許容？) - DB - レコード上限でDB停止・・・対応したい - 費用 - 57ドルぐらいにしたい ## 1. ECS - Estimate・・・8 - 矢代・・・5→8 - 杉田・・・8 - 清水・・・8 作業 1. Nuxtをコンテナ化する 2. Dockerfile作成、docker-compose.yml修正 3. ECSデプロイ ## 2. DBだけEC2 - Estimate・・・3 - 矢代・・・3 - 杉田・・・3 - 清水・・・3 - 拡張性がない - その場凌ぎ感 - 将来、アーキテクチャを変えるときつらい、ダウンタイム - ボリュームは手動で上げないといけない、タウンタイム - パブリックにDBがあることになる ## 3. DBだけRDS - Estimate・・・3 - 矢代・・・3 - 杉田・・・3 - 清水・・・3 - 構築、動作確認 - 80$前後(heroku dyno*2, rds,rds_INOUT) ## 4. EC2 + RDS - Estimate・・・5 - 矢代・・・5 - 杉田・・・5 - 清水・・・5 - 費用 - EC2→月2500くらい（ほぼ最小インスタンスタイプ） - RDS→立ち上げだけで2500、それにINOUT費用（最小インスタンスタイプ） - 安ければ安いほど、**同時接続数**、メモリとか下がる - t3.micro→45 - 何基準の45かは調査が必要。調べたい - 70$前後(ec2, rds,rds_INOUT) 共通　 - DB移行 heroku→RDS - herokupostgresにローカル接続してDumpすれば手元に来る？ - RDSにアップロード - 接続テスト、負荷テスト pgsql host=RDSのエンドポイント、OR rails consoleで 3人くらいで試す優先順位 1.　可用性 2. 拡張性 3. お金 ### プロダクションへのデプロイ時にCIが実行されるようにしたい [#109](https://github.com/imejin-dev/redirect-on-rails/issues/109) - Estimate・・・3 - 矢代・・・3 - 杉田・・・3 - 清水・・・3 1. aws 2. AWS CodeDeployでCircleCIを自動実行できるらしい https://dev.classmethod.jp/articles/deploy-with-codedeploy-circleci2-0/ 2. heroku 4. Review Appsを使う（デプロイ前にはなる） https://devcenter.heroku.com/articles/github-integration-review-apps ### ターゲット先ごとに送信済みチェックボックスを設置したい [#97](https://github.com/imejin-dev/redirect-on-rails/issues/97) - Estimate・・・3 - 矢代・・・3 - 杉田・・・3 - 清水・・・3 - キャンペーン詳細画面のターゲット一覧テーブルに送信済みかを判別するチェックボックスを設置 - issueでは右端にチェックボックスを設置することになっている - 管理者とワーカーのどちらでも任意にチェックをつけられる - チェックボックスからchangeイベントを受け取り更新処理を実行 - バックエンド繋ぎこみ - バックエンドのmodelの型に合わせて引数を渡す - エラーが返ってきた場合はメッセージを表示させて、チェックボックスの状態を更新実行前の状態に戻す - targetテーブルにカラムを追加する - targetコントローラーのupdateメソッド - send_flagのようなboolean - テスト項目 - tureを渡した時にsend_flagがtrueに更新される - falseを渡した時にsend_flagがfalseに更新される - 一括取得した時にsend_flagが意図した順番になっている - 未ログイン時にステータスコード403が返却されるか ### クリック時点における送信済みチェックボックスの状態を記録するようにしたい [#98](https://github.com/imejin-dev/redirect-on-rails/issues/98) - Estimate・・・ - 矢代・・・ - 杉田・・・ - 清水・・・ - targetテーブルにカラムを追加する - isSendedのようなbooleanかsendedDateとして送信日時 or 空文字を登録する - テスト項目 - 渡された値が正しく登録されているか --- ## 2021-11-05 ~ 2021-11-11 ### リダイレクト機能の自動テスト強化 [#81](https://github.com/imejin-dev/redirect-on-rails/issues/81) - Estimate・・・5 - 矢代・・・5 - 杉田・・・5 - 清水・・・5 - 現在実施されているテスト項目 - 存在しないTargetのidの場合 - ステータスコード404を返す - 存在するTargetsのidの場合 - 関連するキャンペーンのurlが返る - 関連するアクセスログが1件増える - テスト追加項目 - `test/pages/_inserturl/_slug/index.spec.js` - フロントエンドでページを開く→URLを受け取る→リダイレクトする - 対象ページ `frontend/pages/_inserturl/_slug/index.vue` - [axiosをjestでモック](https://qiita.com/torinist/items/39d91c034aebd59351d3) - [リダイレクトをJestでテスト](https://biwakonbu.dev/blog/2019/10/js-redirect-test-with-jest) Slackより ``` ・アクセスログが1件増える・slack通知するメソッドが呼ばれることこれだけではなく、APIでは紐づくCampaignのurlが返ることもテストしてますね合わせて、フロントエンドでページを開く→URLを受け取る(モックになっちゃうけど)→リダイレクトするってテストを書けばより強固 ``` - 差し戻しあり - 見積もり書 https://hackmd.io/6CqbxsRtQQe95EPeJRK0Wg ### クリック検知の通知設定が通知設定画面でできる [#48](https://github.com/imejin-dev/redirect-on-rails/issues/48) - Estimate・・・3 - 矢代・・・3 - 杉田・・・3 - 清水・・・3 バックエンド - email_notificationsテーブル作成 - caipaign_id - mail(string) nullable - notification_flag(boolean) default false - モデル修正 - notifications_controller - new - (mail_send #49で) - シード追加 - テスト追加 - 登録valid invalid - notification_flagが意図した値になっているかフロントエンド - キャンペーン一覧に通知設定画面に遷移するアイコンを作成 - 通知設定画面を作成しないといけない - /campaigns/id/click-notification/index.vue - ![](https://i.imgur.com/5aFPw2m.png) - 導線はここだけ？→松木さんに確認 - 詳細画面から設定できなくてもいいの？ ### クリック検知の通知がメールでなされる [#49](https://github.com/imejin-dev/redirect-on-rails/issues/49) - Estimate・・・3 - 矢代・・・３ - 杉田・・・3 - 清水・・・3 - `app/mailers/`にtarget_mailer.rb#click_detect - メール用のHTMLを書く - 送信時のエラーハンドリング - 運用メンバーに通知がいくようにする→Slackに作る - エラーログ確認はherokuで行う。 - `heroku logs --tail -a prd-redirect-on-rails`で確認できなければ、`Run console`でcat,tail - (Slackに開発時の通知チャンネルを作り、通知はするようにしておく) - `app/controllers/targets_controller.rb#slug`で、mail_notificationsテーブルを参照し、notification_flagがtrueなら通知を送る - 迷惑メール判定されないか軽くチェック→ネットサーフィンで確認程度 - テスト追加 - メール送信ができるテスト - 意図した相手に意図した文面でいくこと - (メール送信失敗時のテスト？) - 参考 - https://railsguides.jp/action_mailer_basics.html - --- ## 2021-11-11 ### キャンペーン詳細における「詳細」と「文面コピー」の機能の変更 [#130](https://github.com/imejin-dev/redirect-on-rails/issues/130) - Estimate・・・1 - 矢代・・・1 - 杉田・・・1 - 清水・・・1 - 文面コピーボタンを詳細ボタンに変更 - 押下したらダイアログが開く ### 文案コピー用画面のデザイン改善 [#75](https://github.com/imejin-dev/redirect-on-rails/issues/75) - Estimate・・・ - 矢代・・・1 - 杉田・・・1 - 清水・・・1 - 要素毎にボーダーつけて、margin,paddingを設定 - コピーボタンは右上に、コピーマークにする（el-icon-copy-document） - クリックしたらチェックは不要 ### 複数のURLをリダイレクト設定できるようにしたい [#29](https://github.com/imejin-dev/redirect-on-rails/issues/29) - Estimate・・・ - 矢代・・・ - 杉田・・・ - 清水・・・フロント - - urlのフォーム追加・削除ボタン - バック - urlsテーブルを作成 - キャンペーンID - URL - slugId - slugsテーブル - ターゲットID - slug - url_id | id | campaign_id | slugs | urls | |:--:|:--:|:--:|:--:| |1|1|awfwuahnuawfc|https//hogehoge.com| |2|1|lpkokykoyhjok|https//varvar.com| - テストの修正、複数の場合のテスト項目追加 - APIの修正 - シードの修正 ``` type Campaign = { campaignUrl: CampaignUrl } type CampaignUrl = { id: Int url: string camPaignId: Int targetSlugId: Int } type TargetSlug = { id: Int slug: string targetId: Int campaignUrlId: Int } ``` ### 複数URL設定機能追加時のキャンペーン詳細画面の修正　[#39](https://github.com/imejin-dev/redirect-on-rails/issues/39) - Estimate・・・ - 矢代・・・ - 杉田・・・ - 清水・・・ ### 同じcsvを使っても表示されるリスト（会社名）の順番が違う[#140](https://github.com/imejin-dev/redirect-on-rails/issues/140) - Estimate・・・2 - 矢代・・・２ - 杉田・・・2 - 清水・・・2 - 現象 - CSVアップロード時は正常に動作 - ページ遷移すると順番が変わる？ - フロントでソートが効いてるのに順番が合わない→API側っぽい - 原因 - 再取得時にページネーションが作動しない？ - 対応 - API側でソート - レスポンスのテスト追加 - 全ての順番の一致テスト - ２ページ目に正しい値がきているか（3件ほどチェック） ### キャンペーンを新規追加した際に作成ボタンを押しても反応がない[#141](https://github.com/imejin-dev/redirect-on-rails/issues/141) - 現象 - 再現できない。 - 矢代さんのwinでも再現できない。 ## 2021-11-15 ### リダイレクト機能の自動テスト強化 [#81](https://github.com/imejin-dev/redirect-on-rails/issues/81) - https://hackmd.io/18CfilzBQR2qI3hu_S2WJg - Estimate・・・8 - 清水・・・8 - 杉田・・・8 - 矢代・・・８ - pre-mainを作って、本番環境デプロイ前にreleaseブランチをE2Eテスト→デプロイ後にE2E - stg(releace)→pre-main(E2E)→main(E2E) - herokuにApp追加 - 環境変数(https://blog.44uk.net/2019/03/16/heroku-config-multiple-set-and-remove/) - スクレイピングテスト作成 1. ログイン 2. キャンペーン一覧 3. 「詳細」押下→キャンペーン詳細 4. ターゲットがなければ次へターゲットがあるなら「文面コピー」押下→URLをコピー 5. アクセス→２００ならOK - circleCI記述 - mainデプロイ前にpre-main-redirect-on-railsにE2E - mainデプロイ後にhttps://doc-share.jpにE2E - pre-mainへのデプロイ処理追加 - jest.config.js編集 - STG、mainのみ走るテストを作成 - 普段のテスト実行からそのテストをはずす https://qiita.com/sayama0402/items/3fe6931c14e72e933174 ## 2021-11-18 ### 【本番環境】Heroku Prebootの適用 [#155](https://github.com/imejin-dev/redirect-on-rails/issues/155) - Estimate・・・2 - 清水・・・2 - 杉田・・・2 - 矢代・・・2 - テスト環境のみ（一時的にdynoをstandardにし、２器にする） - Heroku CLIでpreboot機能を有効化する ```bash $ heroku features:enable preboot -a dev-redirect-on-rails ``` - Prebootが有効になっているか確認する ```bash $ heroku features -a dev-redirect-on-rails # === App Features dev-redirect-on-rails # [+] preboot Provide seamless web dyno deploys [general] ``` - 参考資料 - https://devcenter.heroku.com/ja/articles/preboot - https://developer.feedforce.jp/entry/2018/12/12/120000 ## 2021-11-25 ### クリック時点における送信済みチェックボックスの状態を記録するようにしたい [#98](https://github.com/imejin-dev/redirect-on-rails/issues/98) - Estimate・・・3 - 矢代・・・3 - 杉田・・・3 - 清水・・・3 - フロント - クリック履歴画面に送信済み欄にチェックアイコン ![](https://i.imgur.com/9St2TYh.png) - ターゲットテーブルのチェックボックスのスタイルをいじる - バックエンド - access_logsテーブルにカラムを追加(send_status、) - クリック時にターゲットのsend_flagを取得してaccess_logsに登録 - CSVダウンロード時にaccess_logsに追加したカラムを出力させる - カラム名・・・送信状態 - value・・・送信済み or 未送信 - Rspec - リダイレクト時にaccess_logsに送信状態が登録されていること - csvダウンロード時に追加したカラムが出力されていること ### クリック検知の通知設定が通知設定画面でできる [#47](https://github.com/imejin-dev/redirect-on-rails/issues/47) - Estimate・・・2 - 矢代・・・2 - 杉田・・・2 - 清水・・・2 - フロントエンド - 通知設定だけで1ページを作成(要素が増える可能性がある) - キャンペーン一覧に通知設定画面に遷移するアイコンを作成 - 通知設定画面を作成しないといけない - /campaigns/id/notification/index.vue - ![](https://i.imgur.com/5aFPw2m.png) - 導線はここだけ？→松木さんに確認 - 詳細画面から設定できなくてもいいの？ ### クリック検知の通知がメールでなされる [#49](https://github.com/imejin-dev/redirect-on-rails/issues/49) - Estimate・・・ - 矢代・・・ - 杉田・・・ - 清水・・・ - フロントエンド - 通知設定だけで1ページを作成(要素が増える可能性がある) - キャンペーン一覧に通知設定画面に遷移するアイコンを作成 - 通知設定画面を作成しないといけない - /campaigns/id/notification/index.vue - ![](https://i.imgur.com/5aFPw2m.png) - 導線はここだけ？→松木さんに確認 - 詳細画面から設定できなくてもいいの？

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.