SlideShare une entreprise Scribd logo
1  sur  27
Gridsome で
ポートフォリオを作った話
自己紹介
岡 恭平 (おかきょー)
同志社大学 理工学部 機械システム学科
Python, JavaScript, TypeScript を利用して
Webアプリ開発全般をしています
ポートフォリオ Twitter はコチラ
詳しくはコチラを参照してください。
では本題
作ろうと思ったきっかけ
ポートフォリオ+ ブログのサイトを持ちたい
このようなブログサイト
技術選定
フロントエンド・フレームワーク
フロントエンド・フレームワーク
フロントエンド・フレームワーク
フロントエンド・フレームワーク
イメージ図
選ばれたのは
選ばれたのは
でした。
立ちはだかる壁
Docker を利用しての環境構築
DB, API の設計を1 から組む
XSS などのセキュリティを書く
サーバーを維持するとなった時の維持費 … etc...
2ヶ月後たっても
完成せず
JAMStack を知る
JavaScript ✖️ APIs ✖️ MarkUp
JAMStack としての利点
より高速かつ優れたパフォーマンス
低コストで拡張が簡単
セキュリティの強化
Git 内で管理できる ... etc
Gridsomeを使うことに
利点
GraphQL が デフォルトで利用できる
利点
CMS と連携させて、マークダウンや画像を無料で管理できる
Netlify CMS を利用すれば、
サーバーを無料で借りれるだけでなく、
独自の管理サイトで記事の変更を行える
課題点
課題点
新しすぎて情報が全くない !
課題点
・公式ドキュメントがそこまで親切ではない
・GraphQL を読み込むために、<page-query>, <static-query> という
特殊なタグを使わないといけない(エディター非対応)
・マークダウンが使えるようにするための設定を自身で行う必要がある
サイト完成
最後に
● Gridsomeは、まだ発展途上の技術 (初リリース:2018 年 9月〜)
● Vue.js で簡単にブログを簡単に公開したい人にはおすすめ
● 開発には、ちゃぶ台返しも重要
( それまで作ってきたものが無駄にはならない )
ご清聴ありがとうございます

Contenu connexe

Tendances

ET2014資料: mruby プログラム言語Rubyによる組込みソト開発
ET2014資料: mruby プログラム言語Rubyによる組込みソト開発ET2014資料: mruby プログラム言語Rubyによる組込みソト開発
ET2014資料: mruby プログラム言語Rubyによる組込みソト開発Kazuaki Tanaka
 
C#からSORACOMを管理できるようにした話(SoraCommonNet)
C#からSORACOMを管理できるようにした話(SoraCommonNet)C#からSORACOMを管理できるようにした話(SoraCommonNet)
C#からSORACOMを管理できるようにした話(SoraCommonNet)Kei Nakazawa
 
懲りずにazure functionsでlinebotを作ってみた
懲りずにazure functionsでlinebotを作ってみた懲りずにazure functionsでlinebotを作ってみた
懲りずにazure functionsでlinebotを作ってみた裕之 木下
 
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!leverages_event
 
Non blocking and asynchronous
Non blocking and asynchronousNon blocking and asynchronous
Non blocking and asynchronousNorio Kobota
 

Tendances (7)

ET2014資料: mruby プログラム言語Rubyによる組込みソト開発
ET2014資料: mruby プログラム言語Rubyによる組込みソト開発ET2014資料: mruby プログラム言語Rubyによる組込みソト開発
ET2014資料: mruby プログラム言語Rubyによる組込みソト開発
 
なぜ今OSGiか
なぜ今OSGiかなぜ今OSGiか
なぜ今OSGiか
 
C#からSORACOMを管理できるようにした話(SoraCommonNet)
C#からSORACOMを管理できるようにした話(SoraCommonNet)C#からSORACOMを管理できるようにした話(SoraCommonNet)
C#からSORACOMを管理できるようにした話(SoraCommonNet)
 
JavaScript TDD紹介 #agilesamurai
JavaScript TDD紹介 #agilesamuraiJavaScript TDD紹介 #agilesamurai
JavaScript TDD紹介 #agilesamurai
 
懲りずにazure functionsでlinebotを作ってみた
懲りずにazure functionsでlinebotを作ってみた懲りずにazure functionsでlinebotを作ってみた
懲りずにazure functionsでlinebotを作ってみた
 
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
 
Non blocking and asynchronous
Non blocking and asynchronousNon blocking and asynchronous
Non blocking and asynchronous
 

Similaire à My portfolio

ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewRakuten Group, Inc.
 
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについてMasahito Zembutsu
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作Maboroshi.inc
 
.NET の過去、現在、そして未来
.NET の過去、現在、そして未来.NET の過去、現在、そして未来
.NET の過去、現在、そして未来Akira Inoue
 
ML system design_pattern
ML system design_patternML system design_pattern
ML system design_patternyusuke shibui
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~normalian
 
Djangoフレームワークの紹介 OSC2015北海道
Djangoフレームワークの紹介 OSC2015北海道Djangoフレームワークの紹介 OSC2015北海道
Djangoフレームワークの紹介 OSC2015北海道Shinya Okano
 
[visasQ] 2017-04-26 ビザスクを支えるアーキテクチャ
[visasQ] 2017-04-26 ビザスクを支えるアーキテクチャ[visasQ] 2017-04-26 ビザスクを支えるアーキテクチャ
[visasQ] 2017-04-26 ビザスクを支えるアーキテクチャvisasQ - ビザスク
 
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011Hiroh Satoh
 
初めてのWebプログラミング講座
初めてのWebプログラミング講座初めてのWebプログラミング講座
初めてのWebプログラミング講座DIVE INTO CODE Corp.
 
知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたちKensaku Komatsu
 
WebAssembly text format で画像処理を書くぞ
WebAssembly text format で画像処理を書くぞWebAssembly text format で画像処理を書くぞ
WebAssembly text format で画像処理を書くぞKohei Kawasaki
 
VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成
VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成
VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成Hiroshi Yamaguchi
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発Yuta Matsumura
 
SmartNews の Webmining を支えるプラットフォーム
SmartNews の Webmining を支えるプラットフォームSmartNews の Webmining を支えるプラットフォーム
SmartNews の Webmining を支えるプラットフォームSmartNews, Inc.
 
WordBench Saitama vol.6
WordBench Saitama vol.6WordBench Saitama vol.6
WordBench Saitama vol.6masaaki komori
 
Chrome DevTools.next
Chrome DevTools.nextChrome DevTools.next
Chrome DevTools.nextyoshikawa_t
 

Similaire à My portfolio (20)

Walking front end
Walking front endWalking front end
Walking front end
 
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
 
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
 
.NET の過去、現在、そして未来
.NET の過去、現在、そして未来.NET の過去、現在、そして未来
.NET の過去、現在、そして未来
 
ML system design_pattern
ML system design_patternML system design_pattern
ML system design_pattern
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
 
Djangoフレームワークの紹介 OSC2015北海道
Djangoフレームワークの紹介 OSC2015北海道Djangoフレームワークの紹介 OSC2015北海道
Djangoフレームワークの紹介 OSC2015北海道
 
How To Drink Wsgi
How To Drink WsgiHow To Drink Wsgi
How To Drink Wsgi
 
[visasQ] 2017-04-26 ビザスクを支えるアーキテクチャ
[visasQ] 2017-04-26 ビザスクを支えるアーキテクチャ[visasQ] 2017-04-26 ビザスクを支えるアーキテクチャ
[visasQ] 2017-04-26 ビザスクを支えるアーキテクチャ
 
SnapDishの事例
SnapDishの事例SnapDishの事例
SnapDishの事例
 
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
 
初めてのWebプログラミング講座
初めてのWebプログラミング講座初めてのWebプログラミング講座
初めてのWebプログラミング講座
 
知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち
 
WebAssembly text format で画像処理を書くぞ
WebAssembly text format で画像処理を書くぞWebAssembly text format で画像処理を書くぞ
WebAssembly text format で画像処理を書くぞ
 
VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成
VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成
VisualSFMとMeshLabとCloudCompareによるドローン撮影画像を用いたデジタル地図作成
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
 
SmartNews の Webmining を支えるプラットフォーム
SmartNews の Webmining を支えるプラットフォームSmartNews の Webmining を支えるプラットフォーム
SmartNews の Webmining を支えるプラットフォーム
 
WordBench Saitama vol.6
WordBench Saitama vol.6WordBench Saitama vol.6
WordBench Saitama vol.6
 
Chrome DevTools.next
Chrome DevTools.nextChrome DevTools.next
Chrome DevTools.next
 

My portfolio