- 投稿日：2020-07-27T23:49:55+09:00
【CSS画像アニメーション５５選！】Vueエンジニアがおすすめするコピペ大歓迎のオリジナルコード
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります
【真似したくなる】transform：rotate×scaleでCSS画像アニメーション３選
動きは下の画像のような感じになります
１. transform rotateX×scaleで【縦回転】CSS画像アニメーション
２. transform rotateY×scaleで【横回転】CSS画像アニメーション
３. transform rotateY/Z×scaleで【3D回転】画像アニメーション
コードを確認する
transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで右方向からスライドしてくるアニメーション
２. クリックで上からスライドしてくるアニメーション
３. クリックで斜め上からスライドしてくるアニメーション
【transform：rotate×scale】回転×拡大するCSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで横幅が伸び縮みしながらスライドするアニメーション
２. クリックで縦幅が伸び縮みしながらスライドするアニメーション
３. クリックで思いっきり伸び縮みしながらスライドするアニメーション
filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】
動きは下の画像のような感じになります
１. 縦回転するシンプルなスライダーアニメーション
２. 滑らかに横回転するスライダーアニメーション
３. 平面回転するスタイリッシュなスライダーアニメーション
【transform×回転『rotate』】CSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
【transform rotate×画像背景】CSS回転アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX画像背景アニメーション
２. 【横回転】transform rotateY画像背景アニメーション
３. 【3D回転】transform rotateYZ画像背景アニメーション
clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur
２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate
３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate
【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）
動きは下の画像のような感じになります
１. hoverで画像が半透明に？超便利なスライダーアニメーション
２. hoverで画像の色が暴れ出すスライダーアニメーション
３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション
絶対失敗しないナビゲーションメニューサンプル３選
動きは下の画像のような感じになります
１. シンプルだけど洗練されたスライダーアニメーション
２. blurでぼやけながらスライドするスライダーアニメーション
３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション
hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選
動きは下の画像のような感じになります
１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト
２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト
３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト
CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
動きは下の画像のような感じになります
１. 階段のように背景が現れるhoverエフェクト
２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト
３. 斜め上からスクリーンのように背景が現れるhoverエフェクト
４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト
hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)
動きは下の画像のような感じになります
１. フワッと背景が現れるhoverアニメーション
２. 背景が徐々に画像全体へ広がるhoverアニメーション
３. 扉が閉まるように背景が現れるhoverアニメーション
４. 丸い背景が徐々に画像全体に広がるhoverアニメーション
【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. flexで２つの画像が伸縮する画像アニメーション
２. flexでhoverした画像が100％拡大する画像アニメーション
３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション
【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置
動きは下の画像のような感じになります
１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
- 投稿日：2020-07-27T23:49:55+09:00
【現役Vueエンジニアがおすすめ】コピペ大歓迎のオリジナルコードCSS画像アニメーション５５選！
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります
【真似したくなる】transform：rotate×scaleでCSS画像アニメーション３選
動きは下の画像のような感じになります
１. transform rotateX×scaleで【縦回転】CSS画像アニメーション
２. transform rotateY×scaleで【横回転】CSS画像アニメーション
３. transform rotateY/Z×scaleで【3D回転】画像アニメーション
transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで右方向からスライドしてくるアニメーション
２. クリックで上からスライドしてくるアニメーション
３. クリックで斜め上からスライドしてくるアニメーション
【transform：rotate×scale】回転×拡大するCSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで横幅が伸び縮みしながらスライドするアニメーション
２. クリックで縦幅が伸び縮みしながらスライドするアニメーション
３. クリックで思いっきり伸び縮みしながらスライドするアニメーション
filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】
動きは下の画像のような感じになります
１. 縦回転するシンプルなスライダーアニメーション
２. 滑らかに横回転するスライダーアニメーション
３. 平面回転するスタイリッシュなスライダーアニメーション
【transform×回転『rotate』】CSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
【transform rotate×画像背景】CSS回転アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX画像背景アニメーション
２. 【横回転】transform rotateY画像背景アニメーション
３. 【3D回転】transform rotateYZ画像背景アニメーション
clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur
２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate
３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate
【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）
動きは下の画像のような感じになります
１. hoverで画像が半透明に？超便利なスライダーアニメーション
２. hoverで画像の色が暴れ出すスライダーアニメーション
３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション
絶対失敗しないナビゲーションメニューサンプル３選
動きは下の画像のような感じになります
１. シンプルだけど洗練されたスライダーアニメーション
２. blurでぼやけながらスライドするスライダーアニメーション
３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション
hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選
動きは下の画像のような感じになります
１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト
２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト
３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト
CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
動きは下の画像のような感じになります
１. 階段のように背景が現れるhoverエフェクト
２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト
３. 斜め上からスクリーンのように背景が現れるhoverエフェクト
４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト
hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)
動きは下の画像のような感じになります
１. フワッと背景が現れるhoverアニメーション
２. 背景が徐々に画像全体へ広がるhoverアニメーション
３. 扉が閉まるように背景が現れるhoverアニメーション
４. 丸い背景が徐々に画像全体に広がるhoverアニメーション
【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. flexで２つの画像が伸縮する画像アニメーション
２. flexでhoverした画像が100％拡大する画像アニメーション
３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション
【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置
動きは下の画像のような感じになります
１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
- 投稿日：2020-07-27T23:49:55+09:00
【現役Vueエンジニアがオススメ】コピペ大歓迎の完全オリジナルコードCSS画像アニメーション５５選！
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります
【真似したくなる】transform：rotate×scaleでCSS画像アニメーション３選
動きは下の画像のような感じになります
１. transform rotateX×scaleで【縦回転】CSS画像アニメーション
２. transform rotateY×scaleで【横回転】CSS画像アニメーション
３. transform rotateY/Z×scaleで【3D回転】画像アニメーション
transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで右方向からスライドしてくるアニメーション
２. クリックで上からスライドしてくるアニメーション
３. クリックで斜め上からスライドしてくるアニメーション
【transform：rotate×scale】回転×拡大するCSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで横幅が伸び縮みしながらスライドするアニメーション
２. クリックで縦幅が伸び縮みしながらスライドするアニメーション
３. クリックで思いっきり伸び縮みしながらスライドするアニメーション
filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】
動きは下の画像のような感じになります
１. 縦回転するシンプルなスライダーアニメーション
２. 滑らかに横回転するスライダーアニメーション
３. 平面回転するスタイリッシュなスライダーアニメーション
【transform×回転『rotate』】CSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
【transform rotate×画像背景】CSS回転アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX画像背景アニメーション
２. 【横回転】transform rotateY画像背景アニメーション
３. 【3D回転】transform rotateYZ画像背景アニメーション
clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur
２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate
３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate
【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）
動きは下の画像のような感じになります
１. hoverで画像が半透明に？超便利なスライダーアニメーション
２. hoverで画像の色が暴れ出すスライダーアニメーション
３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション
絶対失敗しないナビゲーションメニューサンプル３選
動きは下の画像のような感じになります
１. シンプルだけど洗練されたスライダーアニメーション
２. blurでぼやけながらスライドするスライダーアニメーション
３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション
hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選
動きは下の画像のような感じになります
１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト
２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト
３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト
CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
動きは下の画像のような感じになります
１. 階段のように背景が現れるhoverエフェクト
２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト
３. 斜め上からスクリーンのように背景が現れるhoverエフェクト
４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト
hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)
動きは下の画像のような感じになります
１. フワッと背景が現れるhoverアニメーション
２. 背景が徐々に画像全体へ広がるhoverアニメーション
３. 扉が閉まるように背景が現れるhoverアニメーション
４. 丸い背景が徐々に画像全体に広がるhoverアニメーション
【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. flexで２つの画像が伸縮する画像アニメーション
２. flexでhoverした画像が100％拡大する画像アニメーション
３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション
【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置
動きは下の画像のような感じになります
１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
- 投稿日：2020-07-27T23:49:55+09:00
【現役Vueエンジニア完全オリジナルコード】コピペ大歓迎のCSS画像アニメーション５５選！
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります
【真似したくなる】transform：rotate×scaleでCSS画像アニメーション３選
動きは下の画像のような感じになります
１. transform rotateX×scaleで【縦回転】CSS画像アニメーション
２. transform rotateY×scaleで【横回転】CSS画像アニメーション
３. transform rotateY/Z×scaleで【3D回転】画像アニメーション
transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで右方向からスライドしてくるアニメーション
２. クリックで上からスライドしてくるアニメーション
３. クリックで斜め上からスライドしてくるアニメーション
【transform：rotate×scale】回転×拡大するCSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選
動きは下の画像のような感じになります
１. クリックで横幅が伸び縮みしながらスライドするアニメーション
２. クリックで縦幅が伸び縮みしながらスライドするアニメーション
３. クリックで思いっきり伸び縮みしながらスライドするアニメーション
filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】
動きは下の画像のような感じになります
１. 縦回転するシンプルなスライダーアニメーション
２. 滑らかに横回転するスライダーアニメーション
３. 平面回転するスタイリッシュなスライダーアニメーション
【transform×回転『rotate』】CSS画像アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateXで画像アニメーション
２. 【横回転】transform rotateYで画像アニメーション
３. 【3D回転】transform rotateYZで画像アニメーション
【transform rotate×画像背景】CSS回転アニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX画像背景アニメーション
２. 【横回転】transform rotateY画像背景アニメーション
３. 【3D回転】transform rotateYZ画像背景アニメーション
clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur
２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate
３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate
【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）
動きは下の画像のような感じになります
１. hoverで画像が半透明に？超便利なスライダーアニメーション
２. hoverで画像の色が暴れ出すスライダーアニメーション
３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション
絶対失敗しないナビゲーションメニューサンプル３選
動きは下の画像のような感じになります
１. シンプルだけど洗練されたスライダーアニメーション
２. blurでぼやけながらスライドするスライダーアニメーション
３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション
hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選
動きは下の画像のような感じになります
１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト
２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト
３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト
CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
動きは下の画像のような感じになります
１. 階段のように背景が現れるhoverエフェクト
２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト
３. 斜め上からスクリーンのように背景が現れるhoverエフェクト
４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト
hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)
動きは下の画像のような感じになります
１. フワッと背景が現れるhoverアニメーション
２. 背景が徐々に画像全体へ広がるhoverアニメーション
３. 扉が閉まるように背景が現れるhoverアニメーション
４. 丸い背景が徐々に画像全体に広がるhoverアニメーション
【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選
動きは下の画像のような感じになります
１. flexで２つの画像が伸縮する画像アニメーション
２. flexでhoverした画像が100％拡大する画像アニメーション
３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション
【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置
動きは下の画像のような感じになります
１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
- 投稿日：2020-07-27T20:25:45+09:00
firebaseでデータにアクセスできなくなったらやること
firebaseのDBのルールタブをクリック。
すると以下のようなのが出てきます。
rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { // This rule allows anyone on the internet to view, edit, and delete // all data in your Firestore database. It is useful for getting // started, but it is configured to expire after 30 days because it // leaves your app open to attackers. At that time, all client // requests to your Firestore database will be denied. // // Make sure to write security rules for your app before that time, or else // your app will lose access to your Firestore database match /{document=**} { allow read, write: if request.time < timestamp.date(2020, 7, 27); } } }この一番下の行に日付がありますね。
allow read, write: if request.time < timestamp.date(2020, 7, 27);これが
DBに接続できるリミットです。ですのでこの日付を未来の日付に設定します。
allow read, write: if request.time < timestamp.date(2021, 7, 27);こんなかんじです。
- 投稿日：2020-07-27T19:25:53+09:00
【Vue.js】コンポーネントの属性について
Vue.jsについて必要な知識をまとめました。
自身の備忘録として記載します。コンポーネントの属性について
VueでHTMLのタグの属性に値を設定する場合に、「v-bind」というものを利用します。v-bind:○○という形で属性を指定することで、Vueオブジェクトを用意した値をコンポーネントタグの属性に指定して表示させることができます。
v-modelで値をバウンド
値を入力してその値をコンポーネントに表示します。
コンポーネントの場合は「v-model」というものを使用します。
「v-model」はinputに入力された値の値をVueのdataプロパティの値にバインドする機能になります。
入力された値を変更するとリアルタイムでバインドされた変数の値が更新されます。<input v-model="変数名">上記のように記述します。
v-onでバインドする
イベント関係の属性に値をバインドさせるためのもの。
v-on:イベント名="・・・処理・・・"イベント名には、属性として用意する値から「on」を取り除いたものを使います。例えば、onclickをバインドしたいならば、v-on:clickとなります。
- 投稿日：2020-07-27T18:52:18+09:00
Vuetifyでよく使うJavascriptチップス
v-selectのitemsは配列のみ
しかも、text/valueというkeyの指定付き。
でもAPIから取ってきたデータはオブジェクトの場合。取ってきたデータ
api_data = { "id1":"hoge", "id2":"huga", "id3":"hogehoge", }を
select_items = [ { text: "hoge", value: "id1" }, { text: "huga", value: "id2" }, { text: "hogehoge", value: "id3" }にする状況の場合。
select_items = Object.keys(api_data).map( key => { return { text: api_data[key], value: key } });for in を使うと
let select_itemse = []; for(var key in api_data){ select_itemse.push({ text: api_data[key], value: key }) }個人的にはmapを使った方がわかりやすいけど、for inは他の言語を触っている人にはわかりやすいと思う。
キーが異なる場合
下記の様なデータの場合
api_data = [ { "id":"id1", "title":"hoge" }, { "id":"id2", "title":"huga" }, { "id":"id3", "title":"hogehoge" } }item-text,item-valueプロパティを使います。
<v-select items="api_data" item-text="title" item-value="id" />
- 投稿日：2020-07-27T14:07:20+09:00
【Vue.js, Express, Python】HTMLからテキストとWordファイルを自動生成する
課題、目的
今まで毎週Wordで書いてきたレポートを、最後に一つのWordファイルにまとめて提出する、という謎の課題が期末に出された。
しかし私は、Wordファイルが増えるのが嫌なので、Wordファイルで作成したレポートを、はてなブログにまとめて保存していた。
はてなブログからWordにコピペしようとしたのだが、Wordファイルの表示がaタグなどがじゃまできれいにならない。
これらを手作業で直すのはあまりに億劫である。
そこで、HTMLファイルをテキストに変換すればうまくいきそう、と思い、変換サイトを見つけたが、せっかくなので自分で作ってみることにした。
ついでに、勉強と経験のために変換されたテキストを元にWordファイルを自動生成することにした。文章が長すぎると404エラーになったり、他にもまだバグがあるかもしれないが、コードの整理をする前に頭の整理をするため、記事を書いていく。
完成形
https://github.com/wafuwafu13/Word-Creater
1 デザイン
2 HTML => TEXT 変換
3 TEXT保存
4 Wordファイル作成
実装
1 デザイン
Vuetifyを用いた。
2 HTML => TEXT 変換
JavaScriptでHTMLタグを削除する正規表現 を実装した。
3 TEXT保存
保存すべきカラムは、名前(name)とテキスト(text)である。
axiosを使ってVueからExpressにクエリパラメータとして両者を送信し、ExpressからMySQLに保存することにした。
Node.jsでMySQLに接続する方法は
Node.jsアプリケーションとMySQLを接続しよう！
を参考にした。
公式はこれ。
https://github.com/mysqljs/mysqlApp.vueclickSaveBtn () { console.log('pushed save button') this.saveDialog = false axios .get('http://localhost:3000/' + this.saveFilename + '/' + this.text) .then(res => console.log(res)) .catch(error => { console.log('error occurs in axios ' + error) }) },server.jsapp.get('/:name/:text', (req, res) => { console.log('from frontend params: name => ' + req.params.name) console.log('from frontend params: text => ' + req.params.text) connection.query({ sql: 'INSERT INTO documents (name, text) values (?, ?)', values: [req.params.name, req.params.text] }, (error, results) => { console.log('↓ results from db') console.log(results) }) })4 Wordファイル作成
まずは、MySQLにある名前(name)のデータを選択肢としてブラウザに表示させる。
この記事が参考になった。
Nuxt.jsとmysqlを連携してデータを表示してみたApp.vueclickCreateBtn () { console.log('pushed create button') axios .get('http://localhost:3000/filenames') .then(res => { console.log('↓response from server') console.log(res.data) for (let i = 0; i < res.data.length; i++) { this.filenames.push(res.data[i].name) } }) .catch(error => { console.log('error occurs in axions ' + error) }) },server.jsapp.get('/filenames', (req, res) => { let filenames = [] connection.query('SELECT name from documents', (error, row, fields) => { if (error) { console.log('error occured in db: '+ error) } let files = [] for (let i = 0; i < row.length; i++) { files.push(row[i]) } filenames = JSON.stringify(files) res.header('Content-Type', 'application/json; charset=utf-8') res.send(filenames) }) })なお、Node.js側でCORSポリシーを無効にしなければならないので注意。
server.jsapp.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });最後に、選択された名前のファイルを元に、そのファイル名とテキストをDBから取り出してWordファイルを作成していく。
PythonとMySQLを連携させるのにはmysqlclientを用いた。
この記事が参考になった。
Python3でMySQLを使う – 基本操作からエラー処理まで
公式はこれ。
https://pypi.org/project/mysqlclient/Node.jsとPythonを連携させるのにはPython-shellを用いた。
この記事が参考になった。
Python-shellの使い方
公式はこれ。
https://www.npmjs.com/package/python-shellPythonからWordファイルを作成する方法はこの記事が参考になった。
【python-docx】PythonでWordを操作するApp.vueclickStartCreateBtn () { this.createDialog = false axios .get('http://localhost:3000/word/' + this.createFilename) .then(res => console.log(res)) .catch(error => { console.log('error occurs in axios ' + error) }) }server.jsapp.get('/word/:filename', (req, res) => { let filename = req.params.filename console.log('from frontend params: filename => ' + filename) let { PythonShell } = require('python-shell') let pyshell = new PythonShell('createWord.py') pyshell.send(filename) pyshell.on('message', function (data) { console.log(data); }); })createWord.pyfilename = sys.stdin.readline() print('filename =>', filename.strip()) con = MySQLdb.connect( host = os.environ.get("DB_HOST"), user = os.environ.get("DB_USER"), passwd = os.environ.get("DB_PASSWORD"), db = os.environ.get("DB_NAME"), ) cur = con.cursor() sql = "select text from documents where name = %s" cur.execute(sql, (filename.strip(),)) rows = cur.fetchall() document = Document() print('text =>', rows[0][0]) text = rows[0][0] document.add_paragraph(text) document.save(filename.strip()+'.docx') print('success')まとめ
役に立つものを作りたいわけじゃなかったので、Python-shellに出会えただけで大きな収穫だった。
応用が効きそうなので気が向いたら色々試していきたい。
- 投稿日：2020-07-27T12:28:15+09:00
さくっとVue3をプラウザで試したい時に使えるTips
Vue3がRCになっていよいよリリース間近ですね。
環境構築不要でさくっとVue3の動き確認したいなーって時に使えるTipsを紹介します。script要素を追加し、CDNからVue3のスクリプトを読み込む
適当なサイトを開き、以下コードをプラウザのdevtoolsのconsole上で実行してください。
srcにvue-nextのCDNのアドレスを設定したscript要素を作成し、body直下に追加しています。document.body.appendChild( (() => { const s = document.createElement("script"); s.src = "https://unpkg.com/vue@next"; return s; })() );
これでvue-nextのCDNが読み込めたので、console上でVueが使えます。
あとはやりたい放題使えばOKです。
動作確認コードの一例
参考までに、自分で動かしてみたコードを紹介します。
Vueコンポーネントの動作確認
DOMを追加して、そこに
Vue.createApp()でVueをマウントしコンポーネントを表示しています。templateとsetup()内を調整すればほとんどの動作を確認できます。// マウント用のDOMの追加 document.body.insertBefore((() => { const d = document.createElement("div"); d.id = 'vue-app'; return d; })(), document.body.firstChild); // DOM要素へのVueコンポーネントのマウント const app = Vue.createApp({ template: `<my-component />` }) app.component('my-component', { template: ` <h1>Hello Vue3</h1> <input type="text" v-model="message"/> <div>{{ upperCase }}</div> `, setup() { const message = Vue.ref('') const upperCase = Vue.computed(() => message.value.toUpperCase()) return { message, upperCase } } }) app.mount('#vue-app')yahoo! JAPANで実行してみた例
リアクティブの動作確認
Vue3のComposition APIのリアクティブAPIの動作確認です。
refでもreactiveでも同様にリアクティブに処理を再実行してますね。const reactiveObj = Vue.reactive({ count: 1 }); const refObj = Vue.ref(1); const sumVal = Vue.computed(() => reactiveObj.count + refObj.value); console.log(sumVal.value); // 2 refObj.value = 3; console.log(sumVal.value); // 4 reactiveObj.count = 10; console.log(sumVal.value); // 14
リアクティブの消失の動作確認
Vue Composition APIを使う上で注意が必要なリアクティブの消失について動作確認です。リアクティブな値から分割代入でプリミティブな値を取得すると、リアクティブを消失するのが良くわかると思います。
const reactiveObj = Vue.reactive({ num: 1, str: "hoge", arr: [1, 2, 3], obj: { foo: "foo", bar: "bar" }, }); const { num, str, arr, obj } = reactiveObj; console.log(Vue.isReactive(num)); // false console.log(Vue.isReactive(str)); // false console.log(Vue.isReactive(arr)); // true console.log(Vue.isReactive(obj)); // true
終わりに
とても簡単ですが「さくっとVue3をプラウザで試したいときに使えるTips」でした。
ちょっと動きを確認したいときとかに地味に便利なので使ってみてください〜。
- 投稿日：2020-07-27T12:28:15+09:00
さくっとVue3をWebブラウザで試したい時に使えるTips
Vue3がRCになっていよいよリリース間近ですね。
環境構築不要でさくっとVue3の動き確認したいなーって時に使えるTipsを紹介します。script要素を追加し、CDNからVue3のスクリプトを読み込む
適当なサイトを開き、以下コードをWebブラウザのdevtoolsのconsole上で実行してください。
srcにvue-nextのCDNのアドレスを設定したscript要素を作成し、body直下に追加しています。document.body.appendChild( (() => { const s = document.createElement("script"); s.src = "https://unpkg.com/vue@next"; return s; })() );
これでvue-nextのCDNが読み込めたので、console上でVueが使えます。
あとはやりたい放題使えばOKです。
動作確認コードの一例
参考までに、自分で動かしてみたコードを紹介します。
Vueコンポーネントの動作確認
DOMを追加して、そこに
Vue.createApp()でVueをマウントしコンポーネントを表示しています。templateとsetup()内を調整すればほとんどの動作を確認できます。// マウント用のDOMの追加 document.body.insertBefore((() => { const d = document.createElement("div"); d.id = 'vue-app'; return d; })(), document.body.firstChild); // DOM要素へのVueコンポーネントのマウント const app = Vue.createApp({ template: `<my-component />` }) app.component('my-component', { template: ` <h1>Hello Vue3</h1> <input type="text" v-model="message"/> <div>{{ upperCase }}</div> `, setup() { const message = Vue.ref('') const upperCase = Vue.computed(() => message.value.toUpperCase()) return { message, upperCase } } }) app.mount('#vue-app')yahoo! JAPANで実行してみた例
リアクティブの動作確認
Vue3のComposition APIのリアクティブAPIの動作確認です。
refでもreactiveでも同様にリアクティブに処理を再実行してますね。const reactiveObj = Vue.reactive({ count: 1 }); const refObj = Vue.ref(1); const sumVal = Vue.computed(() => reactiveObj.count + refObj.value); console.log(sumVal.value); // 2 refObj.value = 3; console.log(sumVal.value); // 4 reactiveObj.count = 10; console.log(sumVal.value); // 14
リアクティブの消失の動作確認
Vue Composition APIを使う上で注意が必要なリアクティブの消失について動作確認です。リアクティブな値から分割代入でプリミティブな値を取得すると、リアクティブを消失するのが良くわかると思います。
const reactiveObj = Vue.reactive({ num: 1, str: "hoge", arr: [1, 2, 3], obj: { foo: "foo", bar: "bar" }, }); const { num, str, arr, obj } = reactiveObj; console.log(Vue.isReactive(num)); // false console.log(Vue.isReactive(str)); // false console.log(Vue.isReactive(arr)); // true console.log(Vue.isReactive(obj)); // true
終わりに
とても簡単ですが「さくっとVue3をWebブラウザで試したいときに使えるTips」でした。
ちょっと動きを確認したいときとかに地味に便利なので使ってみてください〜。
- 投稿日：2020-07-27T09:11:39+09:00
v-app-barなどのコンポーネントが読み込まれないエラー
Nuxtを使っていて、vuetifyのコンポーネントが読み込まれないエラーに少しハマったので、メモがてらに書きます。
環境
・macOS Catalina バージョン10.15.5
・node v14.3.0
・npm 6.14.6
・Nuxt v2.13.3エラー文
Unknown custom element: <v-app-bar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.自分で作成したコンポーネントならまだわかるが、vuetifyが用意してくれてるコンポーネントが何で読み込まれないのか不思議でした。
綴りも何回も確認しました。
他にも<v-list-item>などvuetifyで用意してくれているコンポーネントが一部読み込まれないようです。結論
package.jsonを確認すると、
package.json"@nuxtjs/vuetify": "0.5.5" // 他は割愛バージョンが古いことがわかりました。
これが原因でした。インストールできない問題
@nuxt.js/vuetifyの新しいバージョンをインストールしようとすると、インストール時にエラーが出て、インストールできない問題にぶつかりました。
gyp: No Xcode or CLT version detected!「参考記事」に記載してある2つの記事を参考に以下を行うとインストールができるようになりました。
$ rm -rf $(xcode-select -print-path) $ rm -rf /Library/Developer/CommandLineTools $ xcode-select --install筆者の方ありがとうございます。助かりました。
最後に
vuetifyのコンポーネントがないと言われるときはまずバージョンを確認する
といいですね。って当たり前でしたが、他のコンポーネントは使えていて、なかなか原因がわからなかったので備忘録的に書きました。同じようなエラーにハマっている方の助けになれば幸いです。
参考記事
- 投稿日：2020-07-27T07:22:52+09:00
v-if/v-showと$vuetify.breakpointを使ってうまくレスポンシブができなかった件
こんにちは、Yuiです。
皆さんVue.jsでスマホのみサイドメニューなどを非表示にしたい場合、どうしていますか？
多分色々とやり方があるとは思うのですが、私はいつも表示非表示の切り替えは個人的に一番楽なv-if/v-showを使っています。そして画面サイズによって表示・非表示を切り替えるために、
v-if="$vuetify.breakpoint.xs"というような形で簡単にレスポンシブを組んでいます。今回、いつものように
v-if/v-showと$vuetify.breakpointを組み合わせて表示非表示を切り替えようとしたら、うまくいかなかったので、代わりにscssで調整した方法をまとめます。$vuetify.breakpointとは？
そもそも、
$vuetify.breakpointとはどのような書き方かというと、Vuetifyでは下記のように画面サイズがあらかじめ決められており、例えばv-if="$vuetify.breakpoint.xs"と書くことで、その要素をスマホのみ表示にすることができます。ちなみに、v-ifとv-showの切り替えは、v-ifがあまり頻繁に切り替えないとき、v-showは頻繁に表示非表示を切り替える場合に使うのが良いとされています。（v-ifの方が切り替えの際に負荷がかかる。）
今回起こった問題
まずはこちらを見てください。
ボタンが押すとサイドコンテンツが表示されますが、その後、ボタンが消えています。
今回は、ヘッダーの下に紫色の「開く」のボタンを置いて、そのボタンを置くとサイドコンテンツが表示されるようにしています。
PC版では、サイドコンテンツはデフォルトで表示をしているため、このボタンは表示する必要がありません。
なので、スマホでのみ表示にするためにこのように書きました。App.vue<v-btn v-if="$vuetify.breakpoint.xs" color="purple" dark @click.stop="drawer = !drawer" > 開く </v-btn> 〜〜〜〜 <v-navigation-drawer v-model="drawer" absolute right > <SideComment/> </v-navigation-drawer>※サイドコンテンツはページをわけて、
SideComment.vueとして作っています。表示を見ると、上記の通りボタンは無事スマホでのみ表示されるものの、一度しか押せなくなってしまいました。ちなみに、今回はPCとスマホは頻繁に切り替わることもないと
v-ifを使っているのですが、v-showを使っても一度きりしか押せないのは変わりませんでした。どうやら
v-if/v-showと@clickの動きは併用できないようです。
※もし併用できる方法を御存知の方はひっそりと私に耳打ちしてください。笑
（少なくとも色々と調べた限りでは、v-if/v-showと@clickの動きを併用するのはあまり一般的ではないようでした。）どうしたか
v-if/v-showが使えないとなると、scssでdisplay設定をするしかありません。
ということで、下記App.vue<v-btn v-if="$vuetify.breakpoint.xs" class="sp-visible" color="purple" dark @click.stop="drawer = !drawer" > 開く </v-btn> 〜〜〜〜 <style lang="scss" scoped> $pc-min: 960px; @mixin display_pc { @media (min-width: $pc-min) { @content; } } .sp-visible { @include display_pc { display: none !important; } } </style>クラス名をつけて、そこにscssを適用させています。
@mixinははじめて使ったのですが、かなり便利でした。（参考：Sassの「@mixin（ミックスイン）」の使い方と「引数」の解説）今回はタブレットの表示はとりあえずおいておいて、とりあえずPCでのみ非表示にすることが目的だったので、このようなざっくりとしたブレイクポイントで設定しました。
完成形
このような感じで、ボタンは押しても消えなくなったので、とりあえずは成功です。
もちろん、このままではまだまだレスポンシブとして不完全なので、引き続きレイアウトは整えますが、とりあえずは目標達成です！やったね！
今回
@mixinにかなり感動したので、またまとめたいと思います。
- 投稿日：2020-07-27T04:31:47+09:00
LaravelとVueを使ってモダンなWebアプリケーションを構築する
Build a modern web application with Laravel and Vue
- Part 1: Setting up your environment
- Part 2 : Creating our endpoints with REST in mind
- Part 3: Testing your application’s API endpoints
- Part 4: Creating Vue applications in Laravel
- Part 5: Creating a simple Trello clone using Laravel and Vue
上記のリンク通りに進めていきますが、LaravelやVueなどは最新版にします。最終的にはTrelloのクローンアプリを作ります。
※画像は転載元より引用
少しずつ加筆していきます。自分用のメモなので、解説は少なめです。関係ないところは飛ばしていきます。Part 1: Setting up your environment(https://blog.pusher.com/web-application-laravel-vue-part-1/)
記事ではMacでの環境構築が紹介されていますが、Windowsで環境構築を行います。
Prerequisites
このシリーズに沿って進むためには、以下のものが必要です。
- PHPの知識。
- Laravelフレームワークの基本的な知識
- JavaScriptとVueフレームワークの知識
- Node.js **とNPMの基本的な知識
Setting up for PHP development: installing composer
Installing Composer on Windows
Composer-Setup.exeをダウンロードして実行してください。最新のComposerをインストールし、ターミナル内の任意のディレクトリからComposerを呼び出すことができるようにPATHを設定します。
完了したら次のコマンドを実行して確認をします。shell$ composer ______ / ____/___ ____ ___ ____ ____ ________ _____ / / / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/ / /___/ /_/ / / / / / / /_/ / /_/ (__ ) __/ / \____/\____/_/ /_/ /_/ .___/\____/____/\___/_/ /_/ Composer version 1.10.7 2020-06-03 10:03:56環境構築
Xamppにて環境構築を行います。以下のコマンドを実行します。
shell$ cd C:\xampp\htdocs $ composer create-project laravel/laravel trello-clone --prefer-dist $ cd ./trello-clone詳しい解説が必要な方は、以前に書いたこちらの記事を参考にしてみてください。
Laravelのタイムゾーンと言語設定
config/app.php70行目 'timezone' => 'Asia/Tokyo', 83行目 'locale' => 'ja',データベースの設定
xamppからphpMyAdminを起動してデータベースとユーザーを設定し、設定した情報を「.env」ファイルに書きこみます。
データベース名はフォルダ名と同一にしておくと後から見やすいので、今回はtrello-cloneという名前で作成しました。.env4行目 DB_CONNECTION=mysql 5行目 DB_HOST=127.0.0.1 6行目 DB_PORT=3306 7行目 DB_DATABASE=trello-clone 8行目 DB_USERNAME=ユーザー名 9行目 DB_PASSWORD=パスワードUseful Laravel CLI commands
make コマンドは最もよく使うコマンドです。これを使うと、アプリケーション用のさまざまな種類のコンポーネントを作成することができます。このコマンドを使って、モデル、コントローラ、データベースの移行、その他このシリーズでは取り上げないものを作成することができます。
app/ディレクトリに作成される新しいモデルクラスを作成するには、次のコマンドを実行します。
shell$ php artisan make:model SampleModelapp/Http/Controller/ディレクトリに作成される新しいコントローラクラスを作成するには、次のコマンドを実行します。
shell$ php artisan make:controller SampleControllerデータベース/migrations/ディレクトリに作成される新しいデータベースマイグレーションクラスを作成するには、次のコマンドを実行します。
shell$ php artisan make:migration create_sample_table先に生成したマイグレーションを使用してデータベースに変更をマイグレーションするには、次のコマンドを実行します。
shell$ php artisan migrate本当にシンプルなLaravelアプリケーションでは、これらのコマンドを使用することになるでしょう。これらのコマンドについては、アプリケーションを進めていくうちにさらに詳しく知ることができます。コンソールのドキュメントもチェックしてみてください。
Installing and configuring dependencies (Passport)
これから作るアプリケーションはAPIベースのものになるので、認識されたユーザーだけがアクセスできるようにAPIをセキュアにする方法が必要です。
Installing Laravel Passport
Laravel PassportはAPI認証のためのツールです。Passportは認証を簡単にし、数分でLaravelアプリケーションにOAuth2サーバーの完全な実装を提供します。
Passportをインストールするには、以下のコマンドを実行します。shell$ composer require laravel/passportAPI Auth using Laravel Passport
Laravel Passportを使った認証についての詳細な記事がここにあります。このシリーズの次のパートに進む前に一読しておくと、Laravel Passportに慣れるのに役立ちます。
Conclusion
このパートでは、最新のWebアプリケーションを構築するための開発環境の設定方法を考えました。次のパートでは、Laravelアプリケーションを構築し、構築中に知っておくべき概念を説明します。
アプリケーションの構築を進めていくうちに、VueとLaravelを使って最新のアプリケーションを構築するために、どのようにすべてのツールを組み合わせることができるかがわかるでしょう。
Part 2 : Creating our endpoints with REST in mind
Building the models
Trello-cloneでは3つもモデルを使いますが、後から見やすくなるのでモデルはModelフォルダにまとめます。
Userモデル
まず
app/Modelを作成して、その中にUserモデル：app/User.php
を移動し、app/Model/User.phpになるように変更します。
次に以下のファイルを書き換えます。app/Model/User.php3行目 namespace App; => namespace App\Model;config/app.php71行目 'model' => App\User::class, => 'model' => App\Model\User::class,database/factories/User.php5行目 use App\User; => use App\Model\User;Taskモデル、Categoryモデル
以下のコマンドを実行して、
-mrオプションを利用してモデルとMigrationファイルを同時に作成します。shell$ php artisan make:model Model/Task -mr $ php artisan make:model Model/Category -mrThe User model
Laravelにはデフォルトのユーザーモデルがバンドルされているので、ユーザーモデルを作成する必要はありません。ユーザーモデルは以下のフィールドを持ちます。
- id - ユーザーのユニークなオートインクリメントID
- name - ユーザーの名前
- email - ユーザーのE-mail
- password - 認証に使用されるパスワード
Userモデルを開き、以下のように編集します。
app/Model/User.php<?php namespace App\Model; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable; use Illuminate\Database\Eloquent\SoftDeletes; class User extends Authenticatable { use SoftDeletes, Notifiable; protected $fillable = ['name', 'email', 'password']; protected $hidden = [ 'password', 'remember_token', ]; public function tasks() { return $this->hasMany(Task::class); } }? A fillable column
代入可能なデータベースカラムのことです。つまり、代入したいデータをモデルのcreate関数に配列を渡すだけで代入できるということです。? SoftDeletes
データベースから実際にデータを削除せずにリソースを削除する方法です。テーブルが作成されると、'deleted_at'というフィールドができ、ユーザーがタスクを削除しようとすると、'deleted_at'フィールドには削除した日付時刻が入力されます。そのため、リソースの取得が行われた場合、'deleted'リソースはレスポンスの一部にはなりません。Task model
タスクモデルは以下のフィールドを持ちます。
- id - タスク自体のID
- name - タスクの名前
- category_id - タスクが属するカテゴリのID
- user_id - タスクが所属するユーザーのID
- order - それぞれのカテゴリ内でのタスクの順番
Taskモデルを以下のように編集します。
app/Model/Task.php<?php namespace App\Model; use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\SoftDeletes; class Task extends Model { use SoftDeletes; protected $fillable = ['name', 'category_id', 'user_id', 'order']; public function category() { return $this->hasOne(Category::class); } public function user() { return $this->belongsTo(User::class); } }Category model
カテゴリモデルには以下のフィールドがあります。
- id - カテゴリのID
- name - カテゴリの名前
Categoryモデルを以下のように編集します。
app/Model/Category.php<?php namespace App\Model; use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\SoftDeletes; class Category extends Model { use SoftDeletes; protected $fillable = ['name']; public function tasks() { return $this->hasMany(Task::class); } }Writing our migrations
Migrationファイルを以下のように編集します。
Updating our user migration
database/migrations/2014_10_12_000000_create_users_table.php<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateUsersTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('users', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('email')->unique(); $table->string('password'); $table->rememberToken(); $table->timestamps(); $table->softDeletes(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('users'); Schema::table('flights', function (Blueprint $table) { $table->dropSoftDeletes(); }); } }Updating our category migration
database/migrations/XXXX_XX_XX_XXXXXX_create_categories_table.php<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateCategoriesTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('categories', function (Blueprint $table) { $table->id(); $table->string('name'); $table->timestamps(); $table->softDeletes(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('categories'); Schema::table('categories', function (Blueprint $table) { $table->dropSoftDeletes(); }); } }Creating our task migration
外部キーの書き方が変更になっているの（参考リンク）で、チュートリアルとは異なります。
database/migrations/XXXX_XX_XX_XXXXXX_create_tasks_table.php<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateTasksTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('tasks', function (Blueprint $table) { $table->id(); $table->string('name'); $table->foreignId('user_id')->constrained(); $table->foreignId('category_id')->constrained(); $table->integer('order'); $table->timestamps(); $table->softDeletes(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('tasks'); Schema::table('tasks', function (Blueprint $table) { $table->dropSoftDeletes(); }); } }ファイルの並びを確認する
create_tasks_table.phpはusersテーブルのIDとcategoriesテーブルのIDを外部キーとして使用するため、先にusersテーブルとcategoriesテーブルを作成しないと以下のようなエラーが起こります。SQLSTATE[HY000]: General error: 1005 Can't create table `trello-clone`.`tasks` (errno: 150 "Foreign key constraint is incorrectly formed") (SQL: alter table `tasks` add constraint `tasks_category_id_foreign` foreign key (`category_id`) references `categories` (`id`))エラーを回避するためには
database/migratsionsフォルダのファイルが以下のようにcreate_tasks_table.phpが一番最後にあるかどうか確認します。2014_10_12_000000_create_users_table.php 2019_08_19_000000_create_failed_jobs_table.php XXXX_XX_XX_XXXXXX_create_categories_table.php XXXX_XX_XX_XXXXXX_create_tasks_table.php
create_tasks_table.phpが一番最後にない場合は、一番最後になるようにファイル名を変更します。
次に以下のコマンドを実行してMigrateします。shell$ php artisan migrate? Migrationsはデータベースのバージョン管理のようなものです。これにより、アプリケーションの進化に合わせてデータベースを作成、変更、削除することができ、SQLクエリ（または任意のデータベースが使用するクエリ）を手動で記述する必要がありません。また、あなたとあなたのチームがアプリケーションのデータベーススキーマを簡単に変更して共有することができます。詳細はこちらをご覧ください。
Database seeders
データベースの移行ができたので、アプリケーションをテストするときのためにダミーデータを入れる方法を見てみましょう。Laravelでは、シーダと呼ばれるものがあります。
? シーダーを使うと、ダミーデータを自動的にデータベースに挿入することができます。
Creating our users table seeder
データベースシーダを作成するには、次のコマンドを入力します。
shell$ php artisan make:seeder UsersTableSeederこれにより、
database/seeds/UsersTableSeeder.phpファイルが作成されます。ファイルを開き、内容を以下のコードに置き換えてください。database/seeds/UsersTableSeeder.php<?php use App\Model\User; use Illuminate\Database\Seeder; class UsersTableSeeder extends Seeder { public function run() { User::create([ 'name' => 'John Doe', 'email' => 'demo@demo.com', 'password' => bcrypt('secret'), ]); } }run関数には、シーダの実行時に実行したいデータベースクエリが含まれています。
? model factoriesを使用して、より良いシードデータを作成することができます。
? 保存する前にパスワードをハッシュするためにbcryptを使用していますが、これはLaravelがパスワードをハッシュするために使用するデフォルトのハッシュアルゴリズムだからです。
Creating our categories table seeder
データベースシーダを作成するには、次のコマンドを入力します。
shell$ php artisan make:seeder CategoriesTableSeederこれにより、
database/seeds/CategoriesTableSeeder.phpファイルが作成されます。ファイルを開き、内容を以下のコードに置き換えてください。database/seeds/UsersTableSeeder.php<?php use App\Model\Category; use Illuminate\Database\Seeder; class CategoriesTableSeeder extends Seeder { /** * Run the database seeds. * * @return void */ public function run() { $categories = ['Ideas', 'On Going', 'Completed']; foreach ($categories as $category) { Category::create(['name' => $category]); } } }Running our database seeders
データベースシーダを実行するには、
database/seeds/DatabaseSeeder.phpファイルを開き、runメソッドを以下のコードに置き換えます。database/seeds/DatabaseSeeder.phppublic function run() { $this->call([ UsersTableSeeder::class, CategoriesTableSeeder::class, ]); }次に以下のコマンドを実行します。
shell$ php artisan db:seedこれでデータベースがデータで更新されるはずです。ある時点でデータをリフレッシュして再度シードしたい場合は、以下のコマンドを実行してください。
shell$ php artisan migrate:fresh --seedこれはデータベースのテーブルを削除し、それらを元に戻してシーダを実行します。
REST in a nutshell
技術的な用語では、RESTはREpresentational State Transferの略です（他の場所では、単に「リラックスする」という意味です）。この記事をよく理解するために、一口サイズのナゲットに分解する必要がある用語がいくつかあります。
Clients, statelessness, resources – what’s the relationship?
クライアントClients とは、アプリケーションと関わるデバイスのことです。どんなアプリケーションでも、それを操作するクライアントの数は 1 から数十億にもなります。あなたがウェブサイト (https://pusher.com など) にアクセスすると、クライアントはサーバーにリクエストを送信します。サーバーはあなたのリクエストを処理してから、クライアントに応答を送り返し、相互作用を行います。
ステートレスStatelessness とは、最も簡単に言えば、クライアントがすべてのリクエストを完了するために必要なものをすべて持っているような方法でアプリケーションを構築することを意味します。クライアントがそれ以降のリクエストを行うとき、サーバはクライアントに関連するデータを保存したり取得したりしません。アプリケーションがより多くのアクティブな同時使用ユーザを持つようになると、クライアントの状態を管理するサーバに不必要な負担がかかるようになります。ステートレスであることはアプリケーションの設計をシンプルにします。
リソースResources は、コード内の実際のインスタンスを表現したものです。例えば、学生が自分の成績をチェックできるアプリケーションを構築しているとします。これらのリソースは、データベースに保存されるデータとリンクされています。
RESTfulアプリケーションを構築するとき、サーバーはクライアントにリソースへのアクセス権を与えます。クライアントは、リソースを取得、変更、削除するためのリクエストを行うことができます。リソースは通常JSONやXML形式で表現されますが、他にも多くの形式があり、どの形式にするかは実装中に決めることができます。
Creating your first few REST endpoints
エンドポイントの作成を始める前に、REST リソースの命名のベストプラクティスに精通していることを確認してください。
現在、以下の HTTP 動詞を使用しています。
- GET - 通常はリソースを取得するために使用します。
- POST - 新しいリソースを作成するために使用します。
- PUT/PATCH - 既存のリソースを置換/更新するために使用します。
- DELETE - リソースを削除するために使用する
以下は、タスクリソースの REST エンドポイントがどのように見えるかを表形式で表したものです。
METHOD ROUTE FUNCTION POST /api/task Creates a new task GET /api/task Fetches all tasks GET /api/task/{task_id} Fetches a specific task PUT/PATCH /api/task/{task_id} Update a specific task DELETE /api/task/{task_id} Delete a specific task それでは、アプリケーションでルートの作成を始めましょう。routes/api.phpファイルを開き、更新します。
routes/api.phpRoute::resource('/task', 'TaskController'); Route::get('/category/{category}/tasks', 'CategoryController@tasks'); Route::resource('/category', 'CategoryController');上記では、ルートを定義しました。2つのルートがあり、それらを手動で作成しなくても他のすべてのルートを登録してくれます。リソースコントローラとルートについてはこちらをご覧ください。
Formatting responses and handling API errors
ここでは、リクエストが処理されたときのレスポンスの作成方法とフォーマットについて見ていきましょう。
Creating our controllers
ルートができたので、すべてのリクエストを処理するコントローラロジックを追加する必要があります。コントローラを作成するには、ターミナルで以下のコマンドを実行する必要があります。
shell$ php artisan make:controller NameControllerしかし、先ほどの-mrを使った時にリクエストを作成しているので、それを編集してみましょう。
app/Http/Controller/ディレクトリ内のTaskController.phpを開きます。その中で、先ほど作成したルートを処理するための基本的なメソッドを定義します。
ファイル内のストアメソッドを以下のように更新します。app/Http/Controller/TaskController.phppublic function store(Request $request) { $task = Task::create([ 'name' => $request->name, 'category_id' => $request->category_id, 'user_id' => $request->user_id, 'order' => $request->order ]); $data = [ 'data' => $task, 'status' => (bool) $task, 'message' => $task ? 'Task Created!' : 'Error Creating Task', ]; return response()->json($data); }? 16行目で、レスポンスがJSON形式に設定されていることがわかります。データをどのようなレスポンス形式で返したいかを指定することができますが、ここではJSONを使用します。
⚠️ まだアプリケーションの肉付けには力を入れていません。RESTfulエンドポイントを作成する方法を説明しています。後編ではコントローラを完全に作成していきます。
Securing our endpoints with Passport
ルートを作成しましたが、今のままでは誰でもアクセスできてしまうので、制限をかけて安全にしていきます。
Laravelは、デフォルトでWebルートとAPIルートをサポートしています。WebルートはWebブラウザからアクセスした動的に生成されたページのルーティングを処理し、APIルートはJSONまたはXML形式のレスポンスを必要とするクライアントからのリクエストを処理します。
Authentication and authorization (JWT) to secure the APIs
Part 1 では、Laravel Passportを使ったAPI認証について説明しているので、簡単にまとめます。
まず、Laravel Passportをインストールします。
shell$ composer require laravel/passportLaravel Passportには、動作に必要なデータベーステーブル用のMigrateファイルが付属しているので、実行します。
shell$ php artisan migrate次に、アプリケーションを保護するために必要なキーを作成できるように、パスポートのインストールするコマンドを実行します。
shell$ php artisan passport:installこのコマンドは、セキュアなアクセストークンを生成するために必要な暗号化キーに加えて、アクセストークンを生成するために使用される「個人アクセス」と「パスワード付与」クライアントを作成します。
インストール後、Userモデルで
Laravel Passport HasApiToken traitを使用する必要があります。この特性はモデルにいくつかのヘルパーメソッドを提供し、認証済みユーザーのトークンとスコープを検査できるようにします。app/Model/User.php<?php [...] use Laravel\Passport\HasApiTokens; class User extends Authenticatable { use HasApiTokens, SoftDeletes, Notifiable; [...] }次に、AuthServiceProviderのブートメソッド内のPassport::routesメソッドを呼び出します。このメソッドは、アプリが必要とするトークンを発行するために必要なルートを登録します。
app/Providers/AuthServiceProvider.php<?php [...] use Laravel\Passport\Passport; class AuthServiceProvider extends ServiceProvider { [...] public function boot() { $this->registerPolicies(); Passport::routes(); } [...] }最後に、config/auth.phpの設定ファイルで、API認証ガードのドライバオプションをpassportに設定します。
config/auth.php[...] 'guards' => [ [...] 'api' => [ 'driver' => 'passport', 'provider' => 'users', ], ], [...]Log in and register using the API
Laravel Passportを使ってこのアプリケーションのAPI認証を設定したところで、ログインと登録のエンドポイントを作っていきます。
routes/api.phpファイルに以下のルートを追加します。routes/api.phpRoute::post('login', 'UserController@login'); Route::post('register', 'UserController@register');また、APIの認証リクエストを処理するためのUserControllerを作成する必要があります。
app/Http/Controllers/UserController.phpというファイルを新規作成し、その中に以下のコードを配置します。app/Http/Controllers/UserController.php<?php namespace App\Http\Controllers; use App\Model\User; use Validator; use Illuminate\Http\Request; use App\Http\Controllers\Controller; use Illuminate\Support\Facades\Auth; class UserController extends Controller { public function login() { $credentials = [ 'email' => request('email'), 'password' => request('password') ]; if (Auth::attempt($credentials)) { $success['token'] = Auth::user()->createToken('MyApp')->accessToken; return response()->json(['success' => $success]); } return response()->json($response, $status); } public function register(Request $request) { $validator = Validator::make($request->all(), [ 'name' => 'required', 'email' => 'required|email', 'password' => 'required', ]); if ($validator->fails()) { return response()->json(['error' => $validator->errors()], 401); } $input = $request->all(); $input['password'] = bcrypt($input['password']); $user = User::create($input); $success['token'] = $user->createToken('MyApp')->accessToken; $success['name'] = $user->name; return response()->json(['success' => $success]); } public function getDetails() { return response()->json(['success' => Auth::user()]); } }上のコードでは
Login Method: ここでは、ユーザが提供した認証情報を使って Auth::attempt を呼び出しています。認証に成功した場合は、アクセストークンを作成してユーザに返します。このアクセストークンは、ユーザがAPIにアクセスできるようにするために、すべてのAPIコールと一緒に送信するものです。
Register Method: ログインメソッドと同様に、ユーザー情報を検証し、ユーザーのアカウントを作成し、ユーザーのアクセストークンを生成します。
Grouping routes under a common middleware
ルートについては、認証が必要なルートを共通のミドルウェアの下にグループ化することができます。Laravelにはauth:apiミドルウェアが組み込まれているので、それを使っていくつかのルートを保護することができます。
routes/api.php<?php Route::post('login', 'UserController@login'); Route::post('register', 'UserController@register'); Route::group(['middleware' => 'auth:api'], function(){ Route::resource('/task', 'TasksController'); Route::resource('/category', 'CategoryController'); Route::get('/category/{category}/tasks', 'CategoryController@tasks'); });Handling API errors
サーバーがリソースを提供したり操作したりしているときにエラーが発生した場合、クライアントに何か問題が発生したことを伝える方法を実装しなければなりません。そのためには、特定のHTTP ステータスコードでレスポンスを提供しなければなりません。
UserController.phpファイルを見ると、HTTPステータスコード401を実装しているのがわかります。Conclusion
このシリーズのこの部分では、アプリケーション用の RESTful エンドポイントをどのように作成するかを考えてきました。また、どのようにしてエラーを処理し、正しいHTTPステータスコードをクライアントに提供するかについても検討しました。
次の章では、Postmanを使ってAPIエンドポイントをテストする方法を取り上げます。コマンドラインからのテストに役立つユニットテストをいくつか設定します。
- 投稿日：2020-07-27T00:32:23+09:00
vue でコンポーネントを作るときのファイル構成のモヤモヤを解決したい
事の発端
現在仕事ではangular を使用して悪戦苦闘しながら社内webシステムを作っています。
angularで好きだなーと思う中で、コンポーネントのファイル構成が自分の中でスッキリしています。何がスッキリしているかというと、コンポーネントを作ると
以下のようにファイルがはっきり分かれるのが好き。hoge.component.html hoge.component.css hoge.component.tsvue-cliで作るとこの全部がvueファイルの中に全部入りになってしまうのが
自分の中でモヤモヤしてました。
※ 自分が知らないだけ？そんなときに、別のことをgithubで調べていると
anlularのような構成 で作っている方がいて、おぉぉぉ！コレだ！と思いました。そんでもって毎回作るのは大変なので、以下のようなボイラープレートを作成して、これから使っていこうと思っています。
仕組み
難しいことはできないので、以下のような構成を事前に準備。
$ tree ./boilerplate/ ./boilerplate/ ├── Template.component.css ├── Template.component.html ├── Template.component.vue └── Template.component.vue.tscss、htmlは空ファイルでおいておくとして、vue、vue.tsファイルは一応
以下のようにしておきます。Templete.component.vue<template src="./{{ Template }}.component.html"></template> <style scoped src="./{{ Template }}.component.css"></style> <script lant="ts" src="./{{ Template }}.component.vue.ts"></script>Templete.component.vue.tsimport { Component, Vue, Prop, Emit } from "vue-property-decorator"; @Component export default class {{ Template }}Component extends Vue { constructor() { super(); } }ボイラープレートが出来たところで、以下のようなスクリプトを準備します。
make_component.sh#!/bin/bash compname=$1 cp -r ./boilerplate ./src/components/${compname} exts=(css html vue vue.ts) for ext in ${exts[@]}; do mv ./src/components/${compname}/Template.component.${ext} \ ./src/components/${compname}/${compname}.component.${ext} done exts=(vue vue.ts) for ext in ${exts[@]}; do filepath=./src/components/${compname}/${compname}.component.${ext} sed -ri "s/[{]{2} ?Template ?[}]{2}/${compname}/g" ${filepath} doneこのスクリプトを以下のように実行してやると
$ ./make_component.sh Hoge $ tree ./src/components/ ./src/components/ ├── Hoge │ ├── Hoge.component.css │ ├── Hoge.component.html │ ├── Hoge.component.vue │ └── Hoge.component.vue.ts $ cat ./src/components/Hoge/Hoge.component.vue <template src="./Hoge.component.html"></template> <style scoped src="./Hoge.component.css"></style> <script lant="ts" src="./Hoge.component.vue.ts"></script> $ cat ./src/components/Hoge/Hoge.component.vue.ts import { Component, Vue, Prop, Emit } from "vue-property-decorator"; @Component export default class HogeComponent extends Vue { constructor() { super(); } }自分の中ではかなりスッキリ。超自己満足。
ここまでお付き合いしていただきありがとうございます。