【2020年度】業務内容

[yurino-sakamoto]

【04/01】

内容： https://seattleconsulting01.sharepoint.com/:x:/r/sites/seattle_academy20/_layouts/15/Doc.aspx?sourcedoc=%7B3CA6981D-8DA6-4196-B013-E68D69E73211%7D

【各種install, signup】
目的：研修を始める上で必須となる、ツールinstallやサービスへの登録を行います。
内容： ①chrome　https://www.google.com/intl/ja_jp/chrome/ ②vs code　https://azure.microsoft.com/ja-jp/products/visual-studio-code/ ③Live share 　　https://visualstudio.microsoft.com/ja/services/live-share/ 　　https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack 　　https://qiita.com/irico/items/b67328fdaa2d9a306cba ④slack　https://slack.com/intl/ja-jp/downloads/mac ⑤homebrew　https://brew.sh/index_ja ⑥node-brew https://qiita.com/mame_daifuku/items/373daf5f49ee585ea498 ⑦git　https://qiita.com/normalsalt/items/f200ba50363ebfd46df0 ⑧github https://qiita.com/sendo111/items/27b8dced1cbe9019749c ⑨google https://accounts.google.com/signup/v2/webcreateaccount?flowName=GlifWebSignIn&flowEntry=SignUp ⑩firebase https://qiita.com/kohashi/items/43ea22f61ade45972881#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B 共有リンク内の「プロジェクトを作る」のみ ※gitのアカウント、リポジトリは「メンバー表」シートに記載すること

[yurino-sakamoto]

【04/02】 git環境構築

＜内容＞
①リモートリポジトリでディレクトリを作る
②管理したいフォルダ内で操作をおこなう
③リモートリポジトリとローカルリポジトリを関連させる
④ブランチ作成
⑤各種設定
　・ブランチ保護設定
　・コラボレータの設定

＜必要があればすること＞
・CircleCIの設定
・git clone
・プルリクのテンプレ作成
・SSHKey（初めてアカウントを作る場合）
・ブランチ自動削除設定
　nodeバージョン変更

①リモートリポジトリでディレクトリを作る

②管理したいフォルダ内で操作をおこなう

1.管理したいフォルダに移動 2.管理したいフォルダに初期設定をおこなう

１.　$ git init

git init を押すと、.git などのフォルダが作成される

③リモートリポジトリとローカルリポジトリを関連させる

１.　$ git add -A
２.　$ git commit -m "メッセージを入れる"
３.　$ git remoto origin
４.　$ git push origin 

④ブランチ作成

git checkout-b ブランチ名

＊リモートとローカルのフォルダ内容は同じであるため、そのままブランチを切って大丈夫

⑤各種設定

　・ブランチ保護設定 　・コラボレータの設定

[yurino-sakamoto]

【04/03】 Linax研修

【①linux研修】
https://qiita.com/savaniased/items/d2c5c699188a0f1623ef
https://qiita.com/tomozo6/items/5646d6a062950f986372

[yurino-sakamoto]

【04/03、04/06】 Vue.jsの環境構築

Vueインストール

　vue-cliインストール
　カレントディレクトリにvueプロジェクトを作成する
　Vueコンポーネントのビルド

追加パッケージインストール
　・vuex
　・vue-router
　・vue-loader
　・bootstrap-vue

　firebase-cliのインストール
　firebaseにログイン
　firebaseプロジェクトの作成
　firebaseの開発サーバを起動する
　firebaseのデプロイ
（どっかでReadMEの編集）

開発環境後半

　・開発サーバーの実行とホットリロード
　・本番環境のビルド（Firebaseデプロイ用セットの作成）
　・firebaseへのデプロイ

↓↓環境構築シート↓↓ https://seattleconsulting01.sharepoint.com/:x:/r/sites/seattle_academy20/_layouts/15/Doc.aspx?sourcedoc=%7B81C10F6F-884D-4FD7-BF75-C3CA80382CF3%7D&file=URL%E3%81%BE%E3%81%A8%E3%82%81.xlsx&action=default&mobileredirect=true

Vue.js 参考記事 https://jp.vuejs.org/　公式動画がおすすめ https://qiita.com/suuungwoo/items/15941c1ae0762fb566e6 初心者向けhttps://qiita.com/kskinaba/items/3e8887d45b11f9132012 詳細にまとめてある https://jp.vuejs.org/v2/guide/instance.html ライフサイクルについて https://jp.vuejs.org/v2/guide/ 公式ドキュメント https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/reviews?hl=ja&authuser=2 vueの開発ツール（拡張機能追加必須）

[yurino-sakamoto]

【04/08〜04/18】 ポートフォリオ実装（フロント）

業務内容
①Headerの実装
　・ハンバーガーメニューの実装
②Mainの実装
　・画像は相対パス
③Aboutの実装
　特になし
④Skillの実装
　・v-on
　・v-bind
　・v-bottom
　・v-if
　・chart.vue
⑤Visionの実装
　・特になし
⑥contactの実装
　・textarea,input
⑦Footerの実装
　・スムーススクロール

仕様書 初版_ポートフォリオ_仕様書.pdf

完成形 https://myfirstfirebase-1260d.web.app/

[yurino-sakamoto]

【04/20】ポートフォリオ実装（バックエンド/Firebase側）

手順まとめ

最終目標　Realtime Databaseのデータ取得し、vueに表示
1   Realtime databaseの設定
　　・作成
　　・jsonファイルのインポート
2   Functions APIを作成し、HTTPアクセスで情報が返却されることを確認
　　・
3   非同期通信の設定
　　・axiosとvue-axiosのパッケージをVueプロジェクトにインストール
　　・ Vueのmain.jsとVueAxios, axiosを関連づける
4  functionsフォルダ内でパッケージをインストールする
　　・expressのインストール 
　　・body-parserのインストール
5   Store定義の作成

アーキテクチャ構造.pdf

補足　アーキテクチャ.pdfの内容を理解する 　　・Hosting　サーバーを借りること 　　・Cloud functions　GCP 上で JavaScript で書かれた関数を実行するためのサービス 　　・FirebaseSDK　ソフトウェア開発キット 　　・FirebaseAdminSDK　 　　・SDK

手順詳細

１Realtime databaseの設定

// .jsonファイル例
{
  "skills": [
    {
      "category": "front-end",
      "name": "HTML",
      "score": 3
    },
    {
      "category": "back-end",
      "name": "Java",
      "score": 3
    },
    {
      "category": "devops",
      "name": "github",
      "score": 2
    }
  ]
}

単語　Firebase RealtimeData Base 　　　.json　コードに関する拡張子 参考　https://qiita.com/devnokiyo/items/26de016b0baf60b26c90 （２と同じ）

２Functions APIを作成し、HTTPアクセスで情報が返却されることを確認

const functions = require('firebase-functions');
const admin = require('firebase-admin');
const express = require('express');
const bodyParser = require('body-parser');
​
const app = express();
app.use(bodyParser.json());
​
admin.initializeApp();
​
app.get('/', (req, res) => {
​
  // Cross-Origin Resource Sharing（CORS）に対応させる
  res.set('Access-Control-Allow-Origin', '*');
  res.set('Access-Control-Allow-Methods', 'GET, HEAD, OPTIONS, POST');
​
  // realtime databaseからスキルデータを取得する
  let skills = []
  const query = admin.database().ref("skills").orderByKey();
  query.once("value").then(snapshot => {
    // 取得したデータを１件ずつ配列に設定する
    snapshot.forEach(childSnapshot => {
      // 取得したデータを１件ずつ配列に設定する
      let skill = childSnapshot.val();
      skill.key = childSnapshot.key;
      skills.push(skill);
    });
    // 取得結果を返す
    return res.send(skills);
  })
    .catch(error => {
      // 取得時にエラーがでた場合にエラー文字列を返す
      res.status(404).send('No data available.');
    });
});
​
// regionを指定してファンクションを定義(CORS対策)
exports.skills = functions.region('us-central1').https.onRequest(app);

参考　https://qiita.com/devnokiyo/items/26de016b0baf60b26c90　 （１と同じ）

３非同期通信の設定

・axiosとvue-axiosのパッケージをVueプロジェクトにインストール 理由　データにアクセスするため axios　node.js上で動くPromiseベースのHTTPクライアント

ターミナル 　
npm install --save axios vue-axios

・Vueのmain.jsとVueAxios, axiosを関連づける

 // npm install --save axios vue-axios を実行してデータにアクセスできるようにする
 import axios from 'axios'
 import VueAxios from 'vue-axios'
 Vue.use(VueAxios, axios)
 ​
 Vue.config.productionTip = false
 ​
 new Vue({
   render: h => h(App),
 }).$mount('#app')

５functionsフォルダ内で以下のパッケージをインストールする

npm install express --save
npm install body-parser --save

Express：Node.jsのMVCフレームワーク body-parser：POSTメソッドをJSON形式で送信してくれる 　　　　　　　 HTML(ejs)のformのinputに入力された値を受け取れるようにするもの

６firebaseのfunctions内で「realtime database」にアクセスする

<template>
  <div id="app">
    <div>{{ this.skills }}</div>
  </div>
</template>
​
<script>
export default {
  name: 'App',
  data() {
    return {
      skills: []
    }
  },
  mounted () {
    this.getSkills();
  },
  methods: {
    getSkills() {
      // dataのスキルを初期化する
      this.skills = [];
      // this.skillsを一時変数のitemsに参照コピーする
      let items = this.skills;
      // axios.getを用いてデプロイ済のfunctionにアクセスする
      this.axios.get('https://us-central1-portfolio-4f0fc.cloudfunctions.net/skills')
        .then((response) => {
          response.data.forEach(function(skill) {
            // 取得したデータを１件ずつ配列に設定する
            items.push(skill);
          })
        })
        .catch((e) => {
          alert(e);
        });
    }
  }
}
</script>

７Storeの作成、保存、カスタマイズ

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  //state:コンポーネントでいうdata
  state: {
    skillCategories: [],
  },

  //getters:コンポーネントでいうcomputed的なもの
  getters: {
      getSkills: (state) => (category) => {
        if (state.skillcategories.length > 0) {
          return state.skillcategories.find((skill) => skill.category===category);
        }
      return [];
    },
  },

  //mutations:コンポーネントでいうmethod（と言うかsetter）
  //stateを唯一変更できるもの
  mutations: {
    //vuexでは引数をpayloadと呼ぶっぽい
    //payloadはオブジェクトにするべき（いっぱい入れれるし）
    setSkillCategories(state, payload) {
      state.skillCategories = payload.skillCategories;
    },
  },

  //actionのコミットを使うことでミューテーションを呼び出す（コンポーネントには無い概念）
  actions: {
    async updateSkillcategories({commit}) {
      const skillCategorie = [];
      const res = await axios.get('https://us-central1-portfolio-de069.cloudfunctions.net/users');
      res.date.forEach((caregory) =>{
        skillCategories.push(category);
      });
      commit('setSkillCategories', {skillCategories});
    },
  },
});

注意　関数を合わせることに注意する 参考　https://vuex.vuejs.org/ja/guide/ 　　　https://dev83.com/vue-vuex02/ 　　　https://qiita.com/sygnas/items/7eac9491b37a1bcba0cb

8 Chart描画用Componentでstoreから情報を取得し、描画を行う

・jsonファイルの中身の変更（データの更新）階層化の例↓

{
  "skills":[
    {
      "Front-end":[
        {
          "labels":"CSS",
          "data":"2"
        },
        {
          "labels":"HTML",
          "data":"2"
        },
        {
          "labels":"JavaScript",
          "data":"2"
        },
        {
          "labels":"WordPress",
          "data":"2"
        },
        {
          "labels":"Vue",
          "data":"2"
        },
        {
          "labels":"SCSS",
          "data":"2"
        }
      ]
    },
    {
      "Back-end":[
        {
          "labels":"Java",
          "data":"2"
        },
        {
          "labels":"Ruby",
          "data":"2"
        },
        {
          "labels":"RubyOnRail",
          "data":"2"
        },
        {
          "labels":"MySQL",
          "data":"2"
        }
      ]
    },
    {
      "DevOps":[
        {
          "labels":"Linax",
          "data":"2"
        },
        {
          "labels":"Node",
          "data":"2"
        },
        {
          "labels":"Git",
          "data":"2"
        },
        {
          "labels":"GitHub",
          "data":"2"
        },
        {
          "labels":"Firebase",
          "data":"2"
        }
      ]
    }
  ]
}

・gettersでstoreの情報を制限し、持ってくる

・vexxとvueの連携 https://qiita.com/Ryoma0413/items/c41d10d2e6e2a420c3cf https://qiita.com/shintarow/items/1f7b64b5f687a37768f7

【対処したエラー】

エラー　localホストに飛ぶとネットワークエラーになる 原因　　cors policy エラー/サーバーの相違→firebase deployは○？ 解決方法　https://developer.yukimonkey.com/article/20200227/

エラー　jsonが反映されない 原因　　jsonにて指定している関数が違う 解決方法　関数を揃える

XMLHttpRequestとは 参考　https://reffect.co.jp/html/xmlhttprequest-basic

[yurino-sakamoto]

【4/23】2個目のサーバーを立て、設定を行う

①firebaseのサーバをもう一つ立てる（新しいプロジェクトを立てる）
②.firebasercファイルにサーバーを登録する
③環境変数を使えるようにするため、ファイルの中身をいじる
④deploy用シェル
⑤realtime databaseのデータも同一のJSONをインポートする

目的

Firebaseの環境をお客様および社内公開用と開発用の2台構成にし、いざ見てもらいたい時に、動かない！！みたいな悲惨な状況をなくすため 公開用はmasterからのみデプロイするようにする 対応してもらうこと

詳細説明

①firebaseのサーバをもう一つ立て、データをインポート

②.firebasercに登録する

本番環境用サーバ（メルマガで送っている方）：Pサーバ 検証環境用サーバ：Dサーバ Pサーバの名前の例：portfolio-43a14

コマンド
firebase use {Pサーバ}今までの
firebase target:apply hosting portfolio {Pサーバの名前（任意）}
firebase use {Dサーバ}新しい方
firebase target:apply hosting portfolio {Dサーバの名前（任意）}

③環境変数を使えるようにするため、ファイルの中身をいじる

１）.env.development.build（開発用ファイル）

NODE_ENV='production'
 VUE_APP_FUNCTIONS_API='seattle-academy-demo'

２）.env.production（公開用ファイル）

NODE_ENV='production'
 VUE_APP_FUNCTIONS_API='portfolio-43a14'

３）package.json（環境変数の管理）

 "scripts": {    
"build:production": "vue-cli-service build --mode production",
     "build:development": "vue-cli-service build --mode development.build",
}

４）axiosでfunctionsAPIにアクセスしている所（ここでは、src/store.js）

 actions: {
const functionsUrl = 'https://us-central1-' + process.env.VUE_APP_FUNCTIONS_API + '.cloudfunctions.net/skillCategories';
       const res = await axios.get(functionsUrl);
}

④deploy用シェル

#!bin/sh
 # portfolioのルートディレクトリで
 # npm install
 # package-lock.json
 # に変更があれば、事前にコミットしておく。その後
 # development:開発のみ
 # sh deploy.sh development
 # production:本番のみ
 # sh deploy.sh production
 # both:本番、開発両方
 # sh deploy.sh both
 # 上記コマンドのいずれかを実行する
 #
 # masterブランチ名が異なる人は変えてください(いないと思うが)
 MASTER_BRANCH='master'
 # TODO: 自分の開発用サービス名に変更する
 DEVELOPMENT_SERVER="seattle-academy-demo"
 # TODO: 自分の本番公開用サービス名に変更する
 PRODUCTION_SERVER="portfolio-43a14"

 # $1:execute status
 # $2:error message
 function check_execute() {
   if [ $1 -gt 0 ]; then
     echo $2
     exit $1
   fi
 }

 if [ $1 = "development" ] || [ $1 = "both" ]; then
   # 開発環境用デプロイ(currentブランチ)
   # switch to development server
   firebase use ${DEVELOPMENT_SERVER}
   # build with development mode
   npm run build:development
   # build check
   check_execute $? "build error for development"
   # deploy to development server
   firebase deploy
 fi

 if [ $1 = "production" ] || [ $1 = "both" ]; then
   # 本番用デプロイ(masterブランチ)
   # switch to production server
   git checkout .firebase/hosting.ZGlzdA.cache
   # TODO: masterにこの修正がマージされたら外して、masterのデプロイもこのシェルでできるようになります
   # git checkout ${MASTER_BRANCH}
   # checkout check
   check_execute $? "checkout to master error"
   git pull
   # switch to production server
   firebase use ${PRODUCTION_SERVER}
   # build with production mode
   npm run build:production
   # build check
   check_execute $? "build error for development"
   # deploy to production server
   firebase deploy
   # cache一応戻しておく
   git checkout .firebase/hosting.ZGlzdA.cache
 fi

deploy.sh 使い方はdeploy.shのコメント参照

[yurino-sakamoto]

【04/25〜4/30】環境構築　ポートフォリオ実装（バックエンド/local側）

参考資料

①Eclipseのインストール
②Springプロジェクトの作成
　　1.Spring Toolsのインストール
　　2.Spring MVCプロジェクト作成
　　3.Tomcatのインストール
　　4.Spring MVCプロジェクト起動
③DBViewerの設定
　　1.JDBCドライバをダウンロード
　　2.DBViewer Pluginのインストール
　　3.DB登録
④DBアクセス
　　1.Sequel Proを開き、seattle-academy20にサンプルデータを作成
　　2.pom xml書き換え
　　3.プロジェクトの更新
　　4.プロジェクト内にファイル作成
　　5.作成したファイルの中身を書く
　　6.起動

①Eclipseのダウンロード

補足 Eclipse：開発を効率化するための統合開発環境がセットになった便利ツール

②Springプロジェクトの作成

1.Spring Toolsのインストール

2.Spring MVCプロジェクト作成

参考資料：https://qiita.com/zateon/items/b610f514e13309268264#spring-mvcプロジェクト作成

補足 Spring：Java言語によるソフトウェア開発を支援するフレームワークの一つ Spring Tools　　 ： Eclipseをベースにした、Spring専用の統合開発環境 Spring MVC ：SpringでWebアプリケーションを開発するためのフレームワーク 　　　　　　　M（Model）：システムの中でビジネスロジック、データアクセスを担当 　　　　　　　V（View）：レイアウトの部分 　　　　　　　C（Controller）：ModelとViewの仲介役 参考記事 https://terasolunaorg.github.io/guideline/public_review/Overview/FirstApplication.html MVCモデル　https://qiita.com/riku-shiru/items/2bed096e106e72e0b58a

制作後フォルダ構想図

制作後フォルダ補足 config：設定（configurationの略） JRE：Javaで作られたアプリケーションを動かすために必要なソフト（Java Runtime Environmentの略） 参考資料：https://www.sejuku.net/blog/63551 JDK：Javaでプログラムを作成する際に必要な開発キット（Java SE Development Kitの略） Java SE：Javaでプログラミングを行う際に最低限必要な機能をまとめたもの（Java Standard Editionの略） Maven：プロジェクトのライフサイクル全体を管理するもの

3.Tomcatのインストール

Tomcat　　　 ：Java Servletを動かすときに必要なソフト（競合：JSP Java Servlet：Webサーバ上（バックエンド）で動く、Javaで書かれたプログラムのこと 　　　　　　　（ユーザーが検索結果画面から気になるページをクリックすると、 　　　　　　　　その要求をサーブレットが受けてデータの処理するなどアクセスした人に応じて 　　　　　　　　ページの見え方を変えて提供するページのこと） 　　　　　　　HTTPリクエストはサーブレットコンテナが受け取り、 　　　　　　　サーブレットコンテナがサーブレットに対して処理の命令を出す

サーブレットの動作方法

参考　https://hnavi.co.jp/knowledge/blog/java-servlet/

HTTP：通信方法の一つ。他にも 参考　https://ascii.jp/elem/000/000/447/447425/ 　　　https://oshiete.goo.ne.jp/qa/792462.html

HTTPリクエストの種類 Getメソッド：URLの後ろに送りたいデータを付与して送付 特徴　→送信できるデータ量が制限される（URLの後ろに付与するため、ブラウザによってURLに使用できる文字数が決まっているから） 　　　　閲覧履歴が残る 　　　　　　　(「URL?パラメータ名=値」という形式) 　　　　　　　「?」パラメータのはじまり 　　　　　　　「&」パラメータの切れ目 　　　　　　　「=」挟んだ左側がGETの変数名、右側が渡される値 　　　　　　　データを取得したい時に使用（データベースの書き換え不必要なもの） Postメソッド：HTTPリクエスト内のメッセージボディ（HTTPリクエストのパラメータ内容を渡す場所）にデータを含めて送付 使用機会例→データを変更したい場合 　　　　　　データのソート、更新、削除、新規登録などで使用する場合 　　　　　　パスワードのような秘匿情報をURLに表示したくない場合 　　　　　　データ量が多い場合 　　　　　　バイナリデータを送信したい場合 特徴　→URLなどの見た目は変わらない

4.Spring MVCプロジェクト起動

③JDBCドライバ ：データベースとJavaを仲介するためのもの 　DBViewer Plugin：データベースフロントエンドを提供するEclipesプラグイン 　　　　　　　　　　JDBCドライバーを経由して様々なデータベースに接続 　pom xml　　　　：プロジェクトに関する情報を持つ重要なファイル。 　　　　　　　　　　 プロジェクトのビルド情報、依存ライブラリ情報、プラグイン設定などが含まれる

[yurino-sakamoto]

データベース設計　環境構築

①JDBCドライバをダウンロード
②DBViewer Pluginのインストール
③DB登録
④接続

手順まとめ

①JDBCドライバをダウンロード

下記サイトよりダウンロード https://dev.mysql.com/downloads/connector/j/ ダウンロード手順 ① ②

②DBViewer Pluginのインストール

下記サイトを参考にインストールする https://symfoware.blog.fc2.com/blog-entry-808.html 完了確認

③DB登録

以前行った手順で、Docker上のMySQLを起動してください → Sequel Proで起動を確認 EclipseでDBViewerパースペクティブを選択 DBViewerPluginを右クリック → 登録 データベース定義名は何でも大丈夫です JDBC ドライバーに「ファイルの追加」から①でダウンロードしたjarファイルを追加してください → 「次へ」ボタンをクリック JDBC Driverを「com.mysql.jdbc.Driver」に変更。似ているのがあるので注意 → 「テンプレート書き換えますか？」的なメッセージが出たら「OK」 接続文字列：jdbc:mysql://127.0.0.1:3306/academy_database 接続ユーザ：root 接続パスワード：※自分で変更したもの → 「テスト接続」 「接続に成功しました」のメッセージが出たら「完了」ボタン データベースが追加される

④接続

登録したDBを右クリック→ 接続 なんか開いたら接続できています

[yurino-sakamoto]

【04/25〜4/30】Firebase SDK接続　ポートフォリオ実装（バックエンド/local側）

[yurino-sakamoto]

タスク１０

やりたいこと
①MySQLからデータを取ってくる
②Realtimedatabaseに情報をあげる

＊ボタンを押すとデータが更新されるようにする（skillControllerの中に記載していく）

①MySQLからデータを取ってくる

https://dev.classmethod.jp/articles/java_mysql_db_select/

@Autowired https://sites.google.com/site/soracane/home/springnitsuite/spring-no-ji-nengnitsuite/3-zi-dong-denidisuru-fang-fa

@override：親クラスのメソッドを上書き https://wa3.i-3-i.info/word138.html

Listとは https://www.sejuku.net/blog/15073

MapとListの違い https://www.sejuku.net/blog/19097

throws https://eng-entrance.com/java-throw-and-throws

getter setter https://qiita.com/CostlierRain464/items/07f46ba005c6c9bb42e2

stream

ラムダ https://www.bit-drive.ne.jp/managed-cloud/column/column_14.html

[yurino-sakamoto]

ki-baryu-housiki

オペレーターは 1.7 より下のソース・レベルで許可されていません https://qiita.com/ochomaki/items/1d02786b1216d5e6e167

[yurino-sakamoto]

hash map .put https://www.javadrive.jp/start/hashmap/index2.html

Map関連 https://www.sejuku.net/blog/16067