SlideShare a Scribd company logo
Webナイト宮崎 Vol.6
~てげJavaScript学びたい~
すごいぞVuetify!!
ポートフォリオを作ってみた
Shoya Yamamoto
2019 / 9 / 27
今日話すこと
自己紹介
すごいぞVuetify
Vuetifyとは?‐
結論何ができるのか‐
作ったもの
ポートフォリオ‐
使ったライブラリとか‐
最後に宣伝
自己紹介
山元 彰也(Yamamoto Shoya) 28歳
システムエンジニア(3年程)
Ruby,Rails,CMS保守/開発‐
好きなこと / もの
音楽(主に邦楽Rockバンド)‐
関ジャニ∞ ※ジャニヲタです。‐
ゲーム(Splatoon2)‐
サッカー、フットサル‐
すごいぞ
Vuetify
Vuetifyとは?
Vue.jsで使えるフレームワーク
マテリアルデザイン
豊富なコンポーネント
グリッドシステム
結論何ができるのか
cssを書かず見栄えの良いものができる
Vue版Bootstrapみたいなもの
VueにはBootstrapVueなるものもある‐
もちろんレスポンシブ対応可
作った
もの
ポートフォリオ
https://s-yamamoto3215.github.io/portfolio/
使ったライブラリとか
vuetify
vue-typer
トップページのタイピングアニメ‐
fontawesome-free
無料のアイコンフォント‐
pug
sass
結局何がすごかったか
デザインできなくてもそれっぽいものできる
細々書かなくてもさっとパーツができあが
る
豊富なオプションで以外に自由度もある
物が出来上がるから楽しい
今後の展望として、Googleカレンダーとの連携
やTwitterのタイムラインの埋め込みも実装した
い。
最後に宣伝
先日こんなツイートをしました。
SNSやら
Facebook => 「山元 彰也」で検索
Twitter => @yamamon_zawawa
LINEもあるよ
Gmailもあるよ
Fin,

More Related Content

What's hot

Wcan summer 2014 lt
Wcan summer 2014 ltWcan summer 2014 lt
Wcan summer 2014 ltkuma2515
 
ロボットシステム学2015年第13回
ロボットシステム学2015年第13回ロボットシステム学2015年第13回
ロボットシステム学2015年第13回
Ryuichi Ueda
 
年越しVue.jsをした話
年越しVue.jsをした話年越しVue.jsをした話
年越しVue.jsをした話
YukiSamuraki
 
OSC 2016 Nagoya - MineOSのすすめ -
OSC 2016 Nagoya - MineOSのすすめ -OSC 2016 Nagoya - MineOSのすすめ -
OSC 2016 Nagoya - MineOSのすすめ -
roamer7038
 
WordCamp Yokohama2010 プレゼン
WordCamp Yokohama2010 プレゼンWordCamp Yokohama2010 プレゼン
WordCamp Yokohama2010 プレゼン
miccweb
 
第32回信号処理シンポジウム「Raspberry PiとROSを 使ったロボットシステム」
第32回信号処理シンポジウム「Raspberry PiとROSを使ったロボットシステム」第32回信号処理シンポジウム「Raspberry PiとROSを使ったロボットシステム」
第32回信号処理シンポジウム「Raspberry PiとROSを 使ったロボットシステム」
Ryuichi Ueda
 
フロントエンド温泉にサーバーレスでダイブする(Public)
フロントエンド温泉にサーバーレスでダイブする(Public)フロントエンド温泉にサーバーレスでダイブする(Public)
フロントエンド温泉にサーバーレスでダイブする(Public)
Yuki Ito
 
マルチブラウザやりました (DMM.Study Night)
マルチブラウザやりました (DMM.Study Night)マルチブラウザやりました (DMM.Study Night)
マルチブラウザやりました (DMM.Study Night)
Takafumi Sugie
 
サーバ擬人化ユーザ会Lt資料 qpstudy lite
サーバ擬人化ユーザ会Lt資料 qpstudy liteサーバ擬人化ユーザ会Lt資料 qpstudy lite
サーバ擬人化ユーザ会Lt資料 qpstudy lite
Seiichiro Ishida
 
今のWeb開発者に伝えたいWebブラウザの病みの歴史
今のWeb開発者に伝えたいWebブラウザの病みの歴史今のWeb開発者に伝えたいWebブラウザの病みの歴史
今のWeb開発者に伝えたいWebブラウザの病みの歴史
Sho Okada
 
jTthree V3 technical preview
jTthree V3 technical previewjTthree V3 technical preview
jTthree V3 technical preview
Masaki Yamamoto
 
mrubyのJIT
mrubyのJITmrubyのJIT
mrubyのJIT
miura1729
 
松江Ruby会議03 LT るりまアピール
松江Ruby会議03 LT るりまアピール松江Ruby会議03 LT るりまアピール
松江Ruby会議03 LT るりまアピールSho Hashimoto
 
【Qp08】ざびたん2リリース報告lt 20111022
【Qp08】ざびたん2リリース報告lt 20111022【Qp08】ざびたん2リリース報告lt 20111022
【Qp08】ざびたん2リリース報告lt 20111022
Seiichiro Ishida
 
IT業界における伝統芸能の継承 #hachiojipm
IT業界における伝統芸能の継承 #hachiojipmIT業界における伝統芸能の継承 #hachiojipm
IT業界における伝統芸能の継承 #hachiojipm
鉄次 尾形
 
Ruby関西勉強会発表資料
Ruby関西勉強会発表資料Ruby関西勉強会発表資料
Ruby関西勉強会発表資料
三七男 山本
 
SDK for NFC Starter Kit(2) 使ってみる
SDK for NFC Starter Kit(2) 使ってみるSDK for NFC Starter Kit(2) 使ってみる
SDK for NFC Starter Kit(2) 使ってみるHirokuma Ueno
 
Firefox OSがモテないのは どう考えてもお前らが悪い!(FxOS Gecko勉強会LT版)
Firefox OSがモテないのは どう考えてもお前らが悪い!(FxOS Gecko勉強会LT版)Firefox OSがモテないのは どう考えてもお前らが悪い!(FxOS Gecko勉強会LT版)
Firefox OSがモテないのは どう考えてもお前らが悪い!(FxOS Gecko勉強会LT版)
星影 月夜
 
るりまの1/nはMatsue.rbでできています。
るりまの1/nはMatsue.rbでできています。るりまの1/nはMatsue.rbでできています。
るりまの1/nはMatsue.rbでできています。Sho Hashimoto
 

What's hot (20)

Wcan summer 2014 lt
Wcan summer 2014 ltWcan summer 2014 lt
Wcan summer 2014 lt
 
ロボットシステム学2015年第13回
ロボットシステム学2015年第13回ロボットシステム学2015年第13回
ロボットシステム学2015年第13回
 
年越しVue.jsをした話
年越しVue.jsをした話年越しVue.jsをした話
年越しVue.jsをした話
 
OSC 2016 Nagoya - MineOSのすすめ -
OSC 2016 Nagoya - MineOSのすすめ -OSC 2016 Nagoya - MineOSのすすめ -
OSC 2016 Nagoya - MineOSのすすめ -
 
WordCamp Yokohama2010 プレゼン
WordCamp Yokohama2010 プレゼンWordCamp Yokohama2010 プレゼン
WordCamp Yokohama2010 プレゼン
 
第32回信号処理シンポジウム「Raspberry PiとROSを 使ったロボットシステム」
第32回信号処理シンポジウム「Raspberry PiとROSを使ったロボットシステム」第32回信号処理シンポジウム「Raspberry PiとROSを使ったロボットシステム」
第32回信号処理シンポジウム「Raspberry PiとROSを 使ったロボットシステム」
 
フロントエンド温泉にサーバーレスでダイブする(Public)
フロントエンド温泉にサーバーレスでダイブする(Public)フロントエンド温泉にサーバーレスでダイブする(Public)
フロントエンド温泉にサーバーレスでダイブする(Public)
 
マルチブラウザやりました (DMM.Study Night)
マルチブラウザやりました (DMM.Study Night)マルチブラウザやりました (DMM.Study Night)
マルチブラウザやりました (DMM.Study Night)
 
サーバ擬人化ユーザ会Lt資料 qpstudy lite
サーバ擬人化ユーザ会Lt資料 qpstudy liteサーバ擬人化ユーザ会Lt資料 qpstudy lite
サーバ擬人化ユーザ会Lt資料 qpstudy lite
 
今のWeb開発者に伝えたいWebブラウザの病みの歴史
今のWeb開発者に伝えたいWebブラウザの病みの歴史今のWeb開発者に伝えたいWebブラウザの病みの歴史
今のWeb開発者に伝えたいWebブラウザの病みの歴史
 
jTthree V3 technical preview
jTthree V3 technical previewjTthree V3 technical preview
jTthree V3 technical preview
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
mrubyのJIT
mrubyのJITmrubyのJIT
mrubyのJIT
 
松江Ruby会議03 LT るりまアピール
松江Ruby会議03 LT るりまアピール松江Ruby会議03 LT るりまアピール
松江Ruby会議03 LT るりまアピール
 
【Qp08】ざびたん2リリース報告lt 20111022
【Qp08】ざびたん2リリース報告lt 20111022【Qp08】ざびたん2リリース報告lt 20111022
【Qp08】ざびたん2リリース報告lt 20111022
 
IT業界における伝統芸能の継承 #hachiojipm
IT業界における伝統芸能の継承 #hachiojipmIT業界における伝統芸能の継承 #hachiojipm
IT業界における伝統芸能の継承 #hachiojipm
 
Ruby関西勉強会発表資料
Ruby関西勉強会発表資料Ruby関西勉強会発表資料
Ruby関西勉強会発表資料
 
SDK for NFC Starter Kit(2) 使ってみる
SDK for NFC Starter Kit(2) 使ってみるSDK for NFC Starter Kit(2) 使ってみる
SDK for NFC Starter Kit(2) 使ってみる
 
Firefox OSがモテないのは どう考えてもお前らが悪い!(FxOS Gecko勉強会LT版)
Firefox OSがモテないのは どう考えてもお前らが悪い!(FxOS Gecko勉強会LT版)Firefox OSがモテないのは どう考えてもお前らが悪い!(FxOS Gecko勉強会LT版)
Firefox OSがモテないのは どう考えてもお前らが悪い!(FxOS Gecko勉強会LT版)
 
るりまの1/nはMatsue.rbでできています。
るりまの1/nはMatsue.rbでできています。るりまの1/nはMatsue.rbでできています。
るりまの1/nはMatsue.rbでできています。
 

Recently uploaded

本の感想共有会「データモデリングでドメインを駆動する」本が突きつける我々の課題について
本の感想共有会「データモデリングでドメインを駆動する」本が突きつける我々の課題について本の感想共有会「データモデリングでドメインを駆動する」本が突きつける我々の課題について
本の感想共有会「データモデリングでドメインを駆動する」本が突きつける我々の課題について
Masatsugu Matsushita
 
エンジニアのセルフブランディングと技術情報発信の重要性 テクニカルライターになろう 講演資料
エンジニアのセルフブランディングと技術情報発信の重要性 テクニカルライターになろう 講演資料エンジニアのセルフブランディングと技術情報発信の重要性 テクニカルライターになろう 講演資料
エンジニアのセルフブランディングと技術情報発信の重要性 テクニカルライターになろう 講演資料
Toru Miyahara
 
「VRC海のおはなし会_深海探査とロボットのお話」発表資料
「VRC海のおはなし会_深海探査とロボットのお話」発表資料「VRC海のおはなし会_深海探査とロボットのお話」発表資料
「VRC海のおはなし会_深海探査とロボットのお話」発表資料
Yuuitirou528 default
 
今さら聞けない人のためのDevOps超入門 OSC2024名古屋 セミナー資料
今さら聞けない人のためのDevOps超入門 OSC2024名古屋  セミナー資料今さら聞けない人のためのDevOps超入門 OSC2024名古屋  セミナー資料
今さら聞けない人のためのDevOps超入門 OSC2024名古屋 セミナー資料
Toru Miyahara
 
Compute Units/Budget最適化 - Solana Developer Hub Online 6 #SolDevHub
Compute Units/Budget最適化 - Solana Developer Hub Online 6 #SolDevHubCompute Units/Budget最適化 - Solana Developer Hub Online 6 #SolDevHub
Compute Units/Budget最適化 - Solana Developer Hub Online 6 #SolDevHub
K Kinzal
 
ビジュアルプログラミングIotLT17-オープンソース化されたビジュアルプログラミング環境Noodlの紹介
ビジュアルプログラミングIotLT17-オープンソース化されたビジュアルプログラミング環境Noodlの紹介ビジュアルプログラミングIotLT17-オープンソース化されたビジュアルプログラミング環境Noodlの紹介
ビジュアルプログラミングIotLT17-オープンソース化されたビジュアルプログラミング環境Noodlの紹介
miyp
 
Linuxサーバー構築 学習のポイントと環境構築 OSC2024名古屋 セミナー資料
Linuxサーバー構築 学習のポイントと環境構築 OSC2024名古屋 セミナー資料Linuxサーバー構築 学習のポイントと環境構築 OSC2024名古屋 セミナー資料
Linuxサーバー構築 学習のポイントと環境構築 OSC2024名古屋 セミナー資料
Toru Miyahara
 

Recently uploaded (7)

本の感想共有会「データモデリングでドメインを駆動する」本が突きつける我々の課題について
本の感想共有会「データモデリングでドメインを駆動する」本が突きつける我々の課題について本の感想共有会「データモデリングでドメインを駆動する」本が突きつける我々の課題について
本の感想共有会「データモデリングでドメインを駆動する」本が突きつける我々の課題について
 
エンジニアのセルフブランディングと技術情報発信の重要性 テクニカルライターになろう 講演資料
エンジニアのセルフブランディングと技術情報発信の重要性 テクニカルライターになろう 講演資料エンジニアのセルフブランディングと技術情報発信の重要性 テクニカルライターになろう 講演資料
エンジニアのセルフブランディングと技術情報発信の重要性 テクニカルライターになろう 講演資料
 
「VRC海のおはなし会_深海探査とロボットのお話」発表資料
「VRC海のおはなし会_深海探査とロボットのお話」発表資料「VRC海のおはなし会_深海探査とロボットのお話」発表資料
「VRC海のおはなし会_深海探査とロボットのお話」発表資料
 
今さら聞けない人のためのDevOps超入門 OSC2024名古屋 セミナー資料
今さら聞けない人のためのDevOps超入門 OSC2024名古屋  セミナー資料今さら聞けない人のためのDevOps超入門 OSC2024名古屋  セミナー資料
今さら聞けない人のためのDevOps超入門 OSC2024名古屋 セミナー資料
 
Compute Units/Budget最適化 - Solana Developer Hub Online 6 #SolDevHub
Compute Units/Budget最適化 - Solana Developer Hub Online 6 #SolDevHubCompute Units/Budget最適化 - Solana Developer Hub Online 6 #SolDevHub
Compute Units/Budget最適化 - Solana Developer Hub Online 6 #SolDevHub
 
ビジュアルプログラミングIotLT17-オープンソース化されたビジュアルプログラミング環境Noodlの紹介
ビジュアルプログラミングIotLT17-オープンソース化されたビジュアルプログラミング環境Noodlの紹介ビジュアルプログラミングIotLT17-オープンソース化されたビジュアルプログラミング環境Noodlの紹介
ビジュアルプログラミングIotLT17-オープンソース化されたビジュアルプログラミング環境Noodlの紹介
 
Linuxサーバー構築 学習のポイントと環境構築 OSC2024名古屋 セミナー資料
Linuxサーバー構築 学習のポイントと環境構築 OSC2024名古屋 セミナー資料Linuxサーバー構築 学習のポイントと環境構築 OSC2024名古屋 セミナー資料
Linuxサーバー構築 学習のポイントと環境構築 OSC2024名古屋 セミナー資料
 

すごいぞVuetify!! 〜ポートフォリオを作ってみた〜