開発環境gridsomeJAMstackNetlifyShiftervueWordPress勉強会gridsomeのススメとShifterの可能性について2019-04-052回めのStripeさんオフィス。可愛格好良くて痺れました。こんにちは、みみです。ついてお話してきました。https://slides.com/mimitips/aboutgridsome#/前日に書いた、もっそい内容の薄いスライドで申し訳ないのですが、めちゃくちゃ使いやすい子っていうのはなんとなく分かっていただけるのではないかと。そんなことよりShifterの進化がヤバいまあそんな、私の拙い発表なんで置いといてですね。前回からたった2ヶ月なのにShifterの進化がエグい感じなのですよ。デジタルキューブという記事がイベント直前に公開されていまして、凄いなーと思っていて。さんらとのお話の中で出てきて盛り上がったのでした。先生がキッチリ解説してくださるはず(丸投げ)。先生って付けたくなる程の名解説ぶりだったlulzneko先生のスライドはこちらから。発表資料はこちらになります。2019私的にも、もわもわっとした理解だったものをサクッとピシッと整理してくださって、爽快感がパないです。JAMStack気になってる勢は勉強会に先生をお呼びすると話が早いと思います。...トコロでgridsomeの話は?シュフとニジノハハの合間に(いや、趣味の合間に家事かも)コソコソ仕事している身分なので、まだ実務投入するような案件はなくて趣味でイジっているだけですが、4月現在バージョンは0.5ながら、多分もう全然イケちゃう仕上がりになっております。そんなわけで、試してみようかな、という方に贈る、gridsome事始め「gridsome、去年10月にちらっと試した時は確か日本語URLでうまくいかなかったけれども、ロゴもサイトデザインもぐっと良くなって、色々とアップデートされていたので、放置しっぱなしの趣味ブログをテコ入れするのに使ってみました」...っていう記事を書きかけたままになってたやつを掘り返して、先の弊スライドに書いた5ステップ部分をもうちょっと説明しておきます。前提として、NpmかYarnが要ります(私はnpm派)。(この記事の存在意義が無くなるほどの分かりやすい公式ドキュメント)の通りにコマンドを入れたらインストールが始まります。wordpressmy-websiteの部分がプロジェクトのディレクトリ名となり、my-website以下にファイルが生成されます。WordPressのURLを指定するgridsome.config.jsを開いてbaseUrl:に使いたいWordPressのURLを指定します。developすればローカルサーバーと、GraphQLのURLが自動生成されるのが超便利。いい感じに読み替えてくれるのでクエリが書きやすくていいですね。オススメらしいので、やってみましょう。GitHub(GitLabでも)にアップし、Netlifyの設定をしてぽちっとデプロイすると、https://gridsometest02.netlify.com/という感じでコピーサイトが出来ます。これはこのブログのコピーサイトです。デプロイしない限りアップデートしないからこの記事はまだ反映されていない。スターターのソースを全くいじってない状態で、静的だし凄いシンプルだから当然だけど鬼速です。画像ファイルの置き換えとか、固定ページまではデフォルトで入っていないんですが、GraphQLとVueがあるので其の辺りのカスタムもサクサク。Netlifyの頑張り次第だけど、バニラを試すだけなら、ほんとに5分ぐらいで終わるのでちょっとお試しあれ。Gutenberg(新エディター)用のスタイル、phpのプレビュー版スタイル、そしてVueで書いたスタイルの統合が出来るようにしたら、かなり美味しい子に仕上がる気がします。WordPress以外の使い途もありますし。勉強会後のビールは美味い。そんなわけで、またもや美味しいビールが、いっそ美味しく感じる楽しい勉強会でありました。5月は連休なのでお休みですが、次回は6月を予定しているとのことです!ここのとこ、珈琲じゃなくてビールばっかり呑んでる人になってる...。ロースターdeコワーキングとかもやりたい(迷惑)。アップされてた、lulzneko先生の参加レポートはこちら!レポートもキッチリされてる!3部作だそうです。参加レポート」まずは勉強させていただいたこと。