Vue.js＆Typescript備忘録

【Vue起動】
cdコマンドでVueプロジェクトに移動
npm run serve

■バージョン確認
・Vue
npm list vue //プロジェクトにインストールしている場合
npm list -g vue //グローバルにインストールしている場合

・VueCLI
vue -V
・2021/10時点での最新の安定バージョン
Vue： 2.6.14
Vue/cli： 4.5.13

【Vue.jsの特徴】

• 双方向バインディングでリアルタイムに値の更新が可能
• コンポーネントで部品化し、複数のコンポーネントを組み合わせることで柔軟にviewを生成する
• SPAを作るのに適している
• 単一ファイルコンポーネントで作成する（HTML、js、cssを1つのファイルに記述する）

【Vueプロジェクトの基本】

• viewフォルダにはテンプレートを、componentsフォルダには再利用可能なコンポーネントを作成する
• App.vueでアプリケーションを定義し、そこからviewのHome.vueを呼び出す。
• Home.vueからcomponentsフォルダのコンポーネントを呼び出して使用する。

App.vue(ルート)
┗Home.vue(viewフォルダ)
　┗Comp.vue(componentsフォルダ)
たとえば、Header.vueならApp自体の構成になるのでApp.vue直下に置く。

• CSSは遷移元のCSSを引き継ぐため、複数のビューで同じCSSクラス名を使用していると意図しない装飾が反映される。命名規則などによる明確な定義が必要

～App.vue～

//vueでは1コンポーネントしかｋ返さない約束なので、template内は1つのdiv等にまとめる
//@Componentしたファイルを要素として呼び出せる

【v-bindとv-on】

【v-model】※
v-modelはv-bindとv-onをまとめたもの。
フォームアイテムによってv-bindとv-onの展開のされ方は異なる

アイテム： v-bind/v-on
テキストボックス、テキストエリア： value/input
チェックボックス、ラジオボタン： checked/change
セレクトボックス： value/change

【v-for】
参考：
【徹底解説】これを見ればわかるvue.jsのv-forのkeyの動作 | アールエフェクト

※文字列と組み合わせたい場合には以下

v-bindは、指定した要素が何らかのリクエストを起こした際にレスポンスをどの要素に返すかを示す。
なのでv-forで複数の要素が生成される際や、inputで値を入力した際に使用される。

・ラジオボタンのバインディング
参考：
Vue.jsでラジオボタン [radio button]

～Question.vue～　※子コンポーネント

{{ item.text }}

～Home.vue～

・typescriptの書き方 ※@Prop

■配列をpropsとして輪つ
親
items: ['iphone', android]
子

※divでなくspanで渡す場合はindexof()？

【emit】
参考：
propsと$emitでデータを引き渡す - Qiita

■基本
～Child.vue～

～Parent.vue～

・直接ではなく関数に値を送信したい場合
～Parent.vue～

■フォームから
子コンポーネントで親に値を送信
～Child.vue～

親コンポーネントで受け取り
～Parent.vue～

・直接値を渡したいなら
参考：
Vueのデータバインドの基本 - Qiita

～Parent.vue～

・さらに親となるコンポーネントに値を伝はさせたい
方法1 :Watchで変更を監視
@Watch('propName', { deep: true }) //propName子要素の変更まで感知する場合はdeep: true
propNameChangedDeep () {
console.log('catch'
}

【算出プロパティ】 computed
template内での扱いは通常のプロパティと同様。
プロパティとして使用したいが、複数の値や条件、式から値が算出される場合に使用する

■ゲッターとセッター：getter,setter

private get propName (); <戻り値の型> {
return <戻り値>
}

private set propName (): void {
～更新処理～
}

【画面遷移】viewの切り替え
※パスによるコンポーネントの切り替えであり、URLは変わらない

■参考：
Vue.jsでフォームを使おう - Qiita

■基本
～Home.vue～

～router/index.ts～
{
path: '/result',
name: 'Result',
component: () => import('../views/Result.vue')
props: true //★値を受け渡す場合はこの記述が必要
}

～Result.vue～
■viewを切り替える際の値の受け渡し
上記基本の下、routerの設定でpropsをtrueにしてある前提

以下のようにparamsで指定する。
★パラメータはStringにしないとエラーになる
validate () {
this.$router.push({
name: 'Result',
params: {
param: String(this.param) //自身のparamを遷移再起のparamに渡す
}
})
}

【バリデーションフィルター】
■参考：
Vue.JSでフォームのvalidationを行う - Qiita
フィルター — Vue.js
単純なフォームバリデーション
フォームのバリデーション — Vue.js

■filtersを使う方法　※要検証だし@Componentに書かないといけない？
@Component({
filters:
validator (clientNmae: string) {
if (!clientName) return ''
return clientName.charAt(0).toUpperCase() + clientName.slice(1)
}
})

■VeeValidateライブラリを使用するのがよさそう
Vue.js のフォームバリデーションライブラリ VeeValidate を評価してみた | DevelopersIO
デモあり
VeeValidateでVue.js用の超便利なバリデーションを実装する | カバの樹
【Vue.js】VeeValidateがメジャーバージョンアップで便利になっていた – 株式会社シーポイントラボ ｜ 浜松のシステム・RTK-GNSS開発
古いバージョンとの差異
VeeValidate 2から3へのアップデート - 一休.com Developers Blog

・導入
npm install veevalidate --save
バージョン確認
node_modules/veevalidate/README.meを参照

・import
import { extend, ValidationProvider, ValidationObserver } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules'
extend('required', required) //template内でrequiredの名前で使用できるようにする

/
@Componentに以下を記述
@Component({
components: {
ValidationProvider
}
})

・フォームをValidationProviderで囲う

{{ errors[0] }}>

//エラーがあったらメッセージを表示

次へ

・エラーメッセージのカスタマイズ
extendしている中でカスタマイズする。
extend('required', {
...required, //requiredを継承
message: '※{_field_}は必須項目です' //fieldにはinput内で指定s多name属性の値が代入される
})

・フォーム全体にエラーがあるかを監視する：ValidationObserver

★ドキュメントでは以下のような記述が見つかるが廃止されている
v-validate="required" //廃止
rules="required" //OK
kome
ValidationProviderをimportする必要があるので注意

【クラスオブジェクトの使用】
クラス定義はexport defaultする前に記載する

webデザイン基礎備忘録

画面サイズ

max-width: 800~1000px
min-width: 460px

テキスト

- 級数は3種類までにする
- フォントは14px以上

フォーム

ラジオボタン

- テキスト全体をボタンにするのが主流
- ホバーエフェクト
- 選択されたらホバーエフェクトを固定＆議事要素で右側に✓を付ける
- 高さはそろえる

フレームワーク

- マテリアルUI
- bootstrap

stickyfooter　//固定フッター
参考：
【BootstrapでWebデザイン】Bootstrapでfooterを作成する方法 | .NETコラム

pythonにSelenium導入備忘録

■必要なもの

Firefoxウェブドライバー：Firefox公式ページ
Python：Python公式ページ
slerenium：Pythonのpip
Powershell最新版

■パワーシェルの実行権限

win＋r　=>powershell
set-executionpolicy remotesigned
Y
上矢印キーを2回押してset-executionpolicy remotesigned
が表示されたら、get-executionpolicyに修正
Enter
remotesignedと表示されればOK

■Pythonのインストール

https://www.python.org/から。
適したバージョンのexecutable installerをダウンロード
Customize installationを選択
pip、Add Python to environment variables（環境変数にパスを通す）を選択

・バージョン確認
>|??|python-V|

■Seleniumのインストール

powershellで以下を入力
>|??|pip install seleniumu|

Pythonのフォルダの下位層にインストールされる

■Firefoxwebdriver(geckodriver)のインストール

以下のサイトからwin版のドライバをダウンロード
https://github.com/mozilla/geckodriver/releases

Pythonフォルダ内にドライバ(geckodriver.exe)を格納
Python\python**-**

python＆seleniumスクレイピング備忘録

【Selenium基本操作】

■基本形

>|??|driver.find_element_by_属性('要素名').操作|

■webdriverの指定

driver = webdriver.Chrome()#chromeをドライバに指定
driver = webdriver.Firefox()#Firefoxをドライバに指定

■基本メソッド

.get('URL')   #指定したURLに遷移する
.click()      #要素をクリック
.text         #テキストを取得
.send_keys('TEXT')        #'TEXT'を入力
.clear()      #テキストを削除
.get_attribute('VALUE')   #'VALUE'の属性を取得
.close()      #ウィンドウを閉じる
.back()       #一つ前の画面に戻る
.switch_to_frame('FRAME') #'FRAME'に移動
.switch_to.default_content()      #元のフレームに戻る
.switch_to_window(window_handle)  #ウィンドウを切り替える

【ドライバー設定】

■Opthins
from selenium import webdriver
from selenium.webdriver.chrome.options import Options

options = Options()
#このoptionsにいろいろ追加して設定する

driver = webdriver.Chrome(ChromeDriverManager().install(), options=options) #引数にoptionsを与える

・便利なオプション
#スクロールバーを非表示にする
options.add_argument('--hide-scrollbars')
#シークレットモードで起動する
options.add_argument('--incognito')
#ブラウザを表示しない
options.add_argument('--headless')

■ChromeDriverの最新版を常に使用する
ChromeDriverはブラウザがアップデートされるたびに最新化しなくてはならない。
ChromeDriverManagerを使用すると常に最新版のドライバを構成してくれる。
ただ、サードパーティーのモジュールであるため想定外のエラーが起こることもある。
SSLエラーに案るのもその一つ。この場合は、osモジュールで環境変数を操作し、SSLチェックを外す。

・実装
from selenimu import webdriver
grom webdriver_manager.chrome import ChromeDriverManager
import os

options = webdriver.ChromeOptions()
options.add_experimental_option('excludeSwitches', ['enable-logging']
options.use_chromium = True

os.environ['WDM_SSL_VERIFY']='0'
driver = webdriver.Chrome(ChromeDriverManager().install())

【要素の取得】

■基本形

driver.find_element_by_xpath('XPATH')

※要素はWebElementオブジェクトとして取得される
※複数の場合は'find_elements'とする
※以下は同義

1.driver.find_element_by_id('ID')
2.driver.find_element(By.ID, 'ID')

■指定の型

by_class_name('CLASS') #classでの指定
by_id('ID') #idでの指定
by_xpath('XPATH') #xpathでの指定
by_tag_name('h1') #'h1'タグでの指定

※構文を続けて複数回実行することも可能
例）driver.find_element_by_id('ID').find_elementby_class_name('CLASS')

【その他のよく使うメソッド】

■iframe内に移動

ifm = driver.find_element_by_xpath('XPATH') #iframeのパスを指定
driver.switch_to_frame(ifm)

・もとのiframeに戻る

driver.switch_to.default_content()

※iframeの切り替え前後は読み込み遅延によるエラーが出やすい。
WebDriverWait()を使用して回避すること。

■ウィンドウを切り替える

win  bu.window_handles
driver.switch_to.window(win[●]) #●番目のウィンドウに移動する

・ウィンドウハンドルの番号の取得

l = driver.window_handles
print(0)
print(1)
print(driver.current_window_handle) #現在のウィンドウハンドル

■指定の要素までスクロール（マウスオーバー）

elm = driver.find_element_by_id('ID')
actions = ActionChains(driver)
actions.move_to_element(elm).perform()

■ドロップダウン（選択リスト）を選択したいとき

elm = driver.finde_element_by_xpath('XPATH')
elm_select = Select(elm)
elm_select.select_by_value('VALUE')

■アラートを承認

Alert(driver).accept()  #アラートを承認

■テーブルの文字列を取得

tableelm = driver.find_element_by_xpath('XPATH')
tr_li = tableelm.find_element_by_tag_name('tr') #tr(各行)の要素をtrsにリストで格納
for i in range(1,len(tr_li)):
  td_li = tr_li[i].find_element_by_tag_name('td') #tr内のtd要素をリストで格納
  box = []
  for j in range(0,len(td_li)):
    box.append(td_li[j].text + '\t')
for k in box:
  print(p)
・boxへの追加の記法appendix
box += '%s\t' % (td_li[j].text)

■入力を求める

txt = input('入力してください')
print(txt) #入力された文字が出力される

【Xpathについて】

■基本形

driver.find_element_by_xpath('//*[@id="srchbtn"]')

■パスについて

//  #子ノード全体から探す
*   #該当するすべての要素を探す
/parent::td            #1つ上のtdまで含めた範囲を指定
/following_sibling::td #同階層のtdすべてを指定
//li[3]               #3番目の要素を取得　※//li[position()=3]と同義
//li[position()>1]    #x番目以外の要素を取得
//p[string-length(normalize_space())]>400 #400文字以上の要素を取得

■特定のテキストを含む

//a[contains(text(),'TEXT')]
※完全一致の場合
//a[text() = 'TEXT']

■特定の文字から始まる

・基本形

//a[starts-with(@id, 'TEXT')]

・応用

//a[starts-with(@href, 'http://') or starts-with(@hrefs, 'https
://')]

【待機】

■参考

Seleniumで待機処理するお話 - Qiita
selenium.webdriver.support.expected_conditions — Selenium 4.0.0 documentation

■準備

from selenium.webdriver.support import expected_condition as EC

time.sleep(1) #1秒待機

・要素が出現するまで待機

wt = WebDriverWait(br,10)	//何秒でタイムアウトするか
wt.until(ec.visibility_of_element_located((By.XPATH,●path●)))  #()を２重にしないとエラーが出る
wt.until(ec.visibility_of_element_located((By.CLASS_NAME, 'classname')))

・Enterが押されるまで待機
>|??|input()|

■要素が見つからなければ例外処理

try:
element = driver.find_element_by_tag_name('article')
except NoSuchElementException:
print('探した要素は存在しない')
finally:
driver.save_screenshot('result.png')
driver.quit()

■selectの解除

deselect

■疑似要素のクリック

actions.move_to_element_with_offset(要素,x,y)
actions.click()
actions.perform()

■終了

driver.quite() #終了してブラウザを閉じる
driver.close() #現在のページを閉じる

■
xpathのparentとかの前はスラッシュ
select_by_visible_text()
selenium for pythonでタブの切り替えをする

【appendics】

■スクリーンショット
FileName = os.getcwd() + '\\screen.png' #ファイル名
driver.save_screenshot(FileName) #スクリーンショットを保存

■フルスクリーンショット
imoprt base64

viewport = {
'x' : 0,
'y' : 0,
'width' : width,
'height' : height,
'scale' : 1
}

image_base64 = driver.execute_cdp_cmd(
'Page.captureScreenshot', {
'clip' : viewport,
'captureBeyondViewport' : True
}
)

image = base64.b64decode(image_base64['data'])
FileName = os.getcwd() + '\\screen.png'

with open(FileName, 'wb') as f:
f.write(image)

・参考
Python + Selenium で Chrome の自動操作を一通り - Qiita

■印刷を使用する
アナリティクス系の画面は、グラフの描画などレンダリングのタイミングが複雑でシンプルにスクリーンショットを取ることができない。
印刷の使用を検討する。
印刷設定は以下のファイルに書かれており、これをドライバ起動中に上書きした状態で使用する
C:\Users\your_name\AppData\Local\Google\Chrome\User Data\Default\Preferences

・参考
Python - WebページをPDFで自動保存する ~Selenium pdf Print Option~ HTML to PDF - デジタル推進課
PythonのSeleniumでhtmlをpdfにするときの設定メモ | 彗星

#印刷設定
appState = {
'recentDestinations' : {
{
'id' : 'Save as PDF',
'origin' : 'local',
'account' : 2
}
}

prefs = {
'printing.print_preview_sticky_setting.appState' : json.dumps(appState),
'savefile.default_derectory' : os.getcwd()
}

options.addexperimental_option('prefs', prefs)
options.add_argument('--kiosk-printing') #印刷ボタンを自動でEnterする

■ログイン情報の保存
ブラウザは起動時の設定プロファイルを持っているて、ログイン情報や、ブラウザ起動時の拡大倍率などもここに保存されている。
seleniumで起動される場合はこれとは別の一時的なプロファイルが使用されるため、起動時は毎回ログインが求められる。
このプロファイルをdriver用に作ってあげ、毎回こちらを参照するようにすることで、PCを再起動してもログインは不要になる。
※普段使われているプロファイルを参照する方法もあるが、Seleniumで起動する場合、同じプロファイルを複数起動することを禁止しており、すべてのブラウザを閉じなければならない

どのプロファイルで実行されているかはURLに以下を打ち込むとわかる
chrome://version/

・実装
profile_path = os.getcwd() + '\\profile' #profileというフォルダを作成しここにプロファイル情報を保存する
options.add_argument('--user-data-dir=' + profile_path) #先ほどのprofileフォルダを参照する
options.add_argument('--profile-directory=Default') #profileフォルダ内のDefaultフォルダを指定する
driver = webdriver.Chrome(ChromeDriverManager().install(), options=options)

■拡張機能の使用
ドライバーは新規プロファイルでブラウザを起動するため普段使用している拡張機能が無い。
常時型の拡張機能であれば、拡張機能が保存されたフォルダパスを指定することで、ドライバー起動時にあわせて導入することができる。
しかし、何かをキーにして動く起動型の拡張機能は、レンダリングされたページではなくブラウザのツールバーに組み込まれるためSeleniumで操作ができない。
そのため、拡張機能にショートカットキーを設定　＞pyautoguiでキーボードをアナログに押した動作を再現　して起動する。
キーを送るにはsend_keyを使用するのが一般的だが、これはwebページに対してキーを送ることになり、拡張機能の起動には使用できなかった。
例としてGoFullPageという、スクロールしてフルスクリーンショットを取る拡張機能を使用する。

・実装
拡張機能のパスを調べる
だいたい以下
C:\\Users\\username\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions
このフォルダに拡張機能のIDで格納されている。拡張機能のIDは以下の手順で確認できる。
ブラウザ右上の設定＞その他のツール＞拡張機能＞デベロッパーモードをonにする

#driver起動時のoptionsに含める
extension_path='先ほど調べたパス'
options.add_argument('f'load-extension={extension_path}')

これで拡張機能を含めた形でdriverが起動される

【エラー】
■システムに接続されたデバイスが機能していません
＞特に動作に影響はない
ログを消したいならwebdriverにオプションを追加する
・参考
https://miya-mitsu.com/python-0x1ferror/

■クリックされない
.click() #最後の()忘れていませんか？

死かk