###### tags: `仕事依頼` # 大曽根さんMTG ## 230106(金)と7(土) ## 美容院について - ブランチを切るとき - features/staff ![](https://i.imgur.com/jb9RXq9.png) - 歯医者さんに関して - [検証URL](http://133.130.90.136:8080/login?from=home) - ID:admin - パス:admin - ポート番号 - ``http://133.130.90.136:3001/`` - :以降の数字のこと ## 0107やること - リンクをつける - ファイルを開く方法 - ![](https://i.imgur.com/64ob8nH.png) - ファイル構造に関して - src - assets - インデントは4つ ## 230105(木) ## 美容院について - 6日に[notion](https://www.notion.so/sonecchi/wiki-c6dd3612268d4754b2daada413e8201c)の編集権限をもらえる - ログイン画面は大曽根さん担当 ### 習ったこと - [参考リンク:Vueの基本](https://www.notion.so/sonecchi/Vue-18bc8d34ba454cf8949b421abbff7d5d) - notionの使い方 - 便利に使っていければOK - ドキュメント等はこれでまとめる - `/`で呼び出し - ![](https://i.imgur.com/TSN1OXo.png) - vuetifyjs - 見た目が近いものから探す - Usageがデフォルト - vuetify専用のタグがある - テーブルなら`<v-table>` - v-for ←繰り返す - desserts ←配列 - {{}} ←変数 - `:`がキーになっているよ - 繰り返しに - ![](https://i.imgur.com/wKGqQz9.png) ``` <template> <tbody> <tr v-for="item in desserts" :key="item.name" > <td>{{ item.name }}</td> <td>{{ item.calories }}</td> </tr> </tbody> </v-table> </template> ・tr が繰り返される ``` - jsのサンプルデータを書いてほしい - `[]` ←配列 - `{}` ←オフジェクト - `let` ←変数という意味 - プロップスは公式を確認してね - 大曽根さんは基本「`」 派らしいよ - 歯医者さんの方はvue2だよ(今回はvue3) - ![](https://i.imgur.com/QXuLW7u.png) - 繰り返すもので、変数がテンプレになければ追加しよ - ![](https://i.imgur.com/4uE7paT.png) - `ture`か`false`が入るから、オブジェクト - ![](https://i.imgur.com/jskYg9O.png) - ![](https://i.imgur.com/z15uS9E.png) - 必要に応じて`!important` - 不明なものはカードを切っておく - 調査に入れておく - VueのHTML ``` <script type="text/x-template" id="app-template"> <v-app> <v-table> <thead> <tr> <th class="text-left"> Name </th> <th class="text-left"> Calories </th> </tr> </thead> <tbody> <tr v-for="item in desserts" :key="item.name" > <td>{{ item.name }}</td> <td>{{ item.calories }}</td> <td>{{ item.color }}</td> </tr> </tbody> </v-table> </v-app> </script> <div id="app"></div> ``` - VueのJS ``` const { createApp } = Vue const { createVuetify } = Vuetify const vuetify = createVuetify() const app = createApp({ template: '#app-template', data () { return { a: 5, buttons: [ { name: 'SB', active: true }, { name: 'CC', active: true }, { name: 'DD', active: false }, ], } // return }, // dataの終わり methods: { plus() { this.a + 1 }, sum(a, b){ console.log(a+b); }, isOrange( active ){ if(active===true){ return "warning" }else{ return "" } } }, created() { this.plus() console.log(this.a) // => 2 } }).use(vuetify).mount('#app') ``` ## 221228(水) ## 弁護士LPに関して - FVはパターン① - 悩んでいる女性は、前のデザインに戻し、青緑系に変更 - 完全報酬の箇所を鮮やかな、明るい印象に - 3つのメリットは緑ベースに変更 - フッターをつける ## 美容院について [スマートギット](https://www.syntevo.com/smartgit/download/) ### Gitに関して - リポジトリ(ファイル置き場) - プロジェクト - https://github.com/sonecchi/biyou - ブランチ - オリジン(リモートの別名) - ==今自分がどのブランチにいるか== - ![](https://i.imgur.com/iH10vZp.png) - ダブルクリックで切り替え(チェックアウト) - ブランチを切り替えるときに、修正中だった場合、アラートが出る - 他のブランチに引き継いじゃって大丈夫?アラート - ブランチを切る時 - ファイルの構成は、切った時点での元となったブランチと同じになる - - ステージ - コミットファイルはステージにUPする - フェッチ - リモートにある変更点を取ってくる - ![](https://i.imgur.com/9EwAO9k.png) - マージ - ブランチに変更点を反映させる - プル - 分解すると、フェッチとマージ - スマートGITの変更点表示 - ![](https://i.imgur.com/rYLmdV9.png) - コミット - 変更点を記録 - コミット単位でリモートに記録 - コミット単位=変更点 - ==コメント== - 過去のコミット時点に戻る方法 - ブランチをダブルクリック - ![](https://i.imgur.com/bntmeeY.png) - プッシュ - リモートに反映させる - コンフリクト - 同じデータを編集したときに、どっちを正とするか - コミット→プルしたときに起こる - ![](https://i.imgur.com/97X6T3K.png) - HEAD〜==までが自分。以降が相手 - ![](https://i.imgur.com/zi21GEz.png) - コンフリクトを解消した後にコミットするとコンフリクトのテキストが入っている - ![](https://i.imgur.com/NtY73eP.png) - 変更点をしたかを確認 - ![](https://i.imgur.com/J8DpWqg.jpg) リポジトリの中に、ブランチがある ### 学び デザイナーがコーディングをサポートするまでの道のり 事前知識 ``` ``` 1. SmartGitをインストール 2. クローンできない 3. terminalを立ち上げ、確認 4. ``$ git --version`` が入っていなかった 5. ダウンロードする(大体30分前後かかる) 6. https://qiita.com/pome123/items/67cb05c3a38ed6d48267 7. SSH keyを作る --- ## 221202(金) ## 美容院サイトに関して - 3月末リリース - 着手 1月スタート - 12月中にMTG 管理画面のデザインOK web予約アプリの方のデザインも含めてコーディング - figma - https://www.figma.com/file/Fdqk7qToLfF8XcB4H5wgio/%E7%BE%8E%E5%AE%B9%E9%99%A2%E4%BA%88%E7%B4%84%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%83%BBWeb%E3%82%AB%E3%83%AB%E3%83%86?node-id=282%3A7847 - 開発環境のURL送ってもらう - プロットタイプ (管理画面) - - CR提供データ ID:admin パス:admin 画面 - プロトタイプ(管理画面) - CL提供データ(web予約アプリ) - 今後のイメージ - 週一進捗MTG - 週一進捗MTG --- ## 221112(土) ### 参考URL - [オイルサイト](https://oil-star.jp/) ### 議事録 - 現時点でオイルサイトは無し - 工業用オイル - 値段勝負したい - 確定していること - ドメイン(https://oil-star.jp/) - 商品の写真 - 要望 - 鳥をキャラクターにしたい - とにかく安い印象 - キャッチ:どこよりも安くて、安心 - キャッチ:安くない場合はごめんなさい - 事前情報 - IPに詳しくない - 送料無料バナーが欲しい - ![](https://i.imgur.com/9QFKJ9B.png) - 販売オイルの商品分類 - ①潤滑オイル - ②洗浄オイル - ③切削オイル - ④エンジンオイル - ナビゲーション - 売れている順番 - ターゲット - 法人 - デザイン - PC、スマホ両方 - TOP - 商品が一覧で見れるイメージ - 送料無料バナーが欲しい - 浮上油除去装置(シースルーセパレーター) - 特別ページに飛ぶ→見積り相談 - 商品一覧 - 商品詳細 - ページング - 高度な検索条件等のデザインは不要 - システム周り - リアルタイムで値段が変わるイメージ - 在庫がない商品は出ない - 新会員登録フォームは不要:購入時に会員登録がされる - 大曽根さん担当 - フォーム周り - スケジュール - 12月中にデザインFIX - TOPページに入る要素 - 送料無料バナーが欲しい - 送料 法人無料、個人相談 - 浮上油除去装置(シースルーセパレータ - ナビゲーション(4つ+お問合せ+カートを見る) - 会員ログインは無し - ご相談バナー - 商品名から探す - カテゴリ探す - ①潤滑オイル - ②洗浄オイル - ③切削オイル - ④エンジンオイル - メーカーから探す - 画像の補正は無し - NEWアイコンはが入ることはコーディングでOK - 電話番号 - (042) フリーではないよ - 以下不要 - ![](https://i.imgur.com/rqlzaIc.png) - 商品詳細 - メーカサイトへのリンク - ![](https://i.imgur.com/GFrY7A0.png) - カートに入れるの以下不要 - 数量のみ(粘土等はいるものは不要) - 他にもこんな商品あり - フォーム周りは元々あるCSSを使うイメージ - デザインするルール - コーディングしやすい構成か、随時確認した方が良い - 商品一覧 - 値段 - 名前 - 詳細説明は不要 - 送料無料バナー