GitHub
Trello
vue.js
nuxt.js
Vue.js #2Day 18

Trello + Nuxt.js + GitHub Pagesでオレオレブログ

Vue.js #2 Advent Calendar 2017の18日目の記事です。

そもそものきっかけ

  • 業務でVue.jsを使っているが、vuexやvue-routerを使ったWEBアプリを作ってみたかった。
  • 前からtrelloを使っていたが、Increments Welcomes Trelloに参加して、単なるチケットトラッカー以外の使い方もできるんじゃないか?と思った。
  • ちょうど年明けに引越し予定で、trelloで引越しTodoや予算を管理していた。
  • WP-REST APIやFirebaseも検討したけど、サーバ立てたくない、軽く始めたいと思い、有り物サービスを使うことにした。
  • ブログ以外にもTodoやリマインダー、メモとしても使いたい。

そんなわけで、Trello + Nuxt.js + GitHub Pagesになりました。サーバレスどころか有り物のWEBサービスとフレームワークだけで軽く作りました。

成果物

今回出来たこと

  • trelloのカードをNuxt.jsを使って、GitHub Pagesに表示
  • カード表示と投稿表示の切り替え

やらなかったこと、やり残したこと、積み残し

  • aritcleのコンポーネント化(←一番大事、時間が出来たら続きをやる)
  • transitionを使ったアニメーション制御(そのうちやる)
  • リスト・ラベルによる絞込(そのうちやる)
  • GitHub Pagesからのカード作成(そのうちやる)
  • リストによるカラム表示(多分やらない、trelloでええやんとなるから)
  • Nuxtでのパーマネントページ(やらない)
  • Markdownの整形(そのうちやる)
  • ドラッグ・アンド・ドロップのUI実装(そのうちやる)

テーマが「簡易オレオレブログ」なので、パーマネントページはやらない予定。ただ現状モノリシックになってしまっているので、articleはコンポーネントに切り出したい。

使ったもの

  • Nuxt.js
  • trello
  • axios
  • GitHub Pages

SSRをやっているわけではないので、Nuxt.jsじゃなくてもいいのではないか?と思うかもしれないが、構成やら環境構築やらがものすごく楽なのでNuxt.jsをつかった。Nuxt.jsのSSR以外の活用は、今回のVue.js Advent Calendarでいろいろな人が取り上げているので、そちらを参考にしていただきたい。

なお、今回は環境構築やインストール、サンプルコードはここにはのせません。Vue.js Advent Calendarが4つもあって、参考になるコードやナレッジはたくさんあるので。どちらかと言うと、さくっと始められますぜ、という感じです。GitHub Pagesは完全にAPIでTrelloから動的にデータ取得して表示してあるだけです。

参考