JavaScript
Trello

ぼっち対策として、ポートフォリオを作る。(TrelloとVue.jsでプロトタイピング)

More than 3 years have passed since last update.

※現在、当サンプルは動作しません。追記を参照して下さい。

スクリーンショット 2015-04-14 3.33.52.png

大き目の勉強会に参加すると、たいていぼっちになってしまいます。ピザとチューハイ片手に、邪魔にならない位置にいるしかありません。

自己アピールさえできればなんとかなる場合も多かったと思います。じゃああれですね。ポートフォリオの出番です。作りましょう。


CMSに対する最新の気持ち

書き下すとこんな感じでしょうか。そこは面倒臭がるなよって箇所もありますが。


  • とりあえずWordPressは嫌

  • GitHub pages上にホスティングできると、お金かからないし、しかもURLもかっこいい

  • jekyllで生成するのもやってみたけど、いちいちコミットしてPushするのだるいし、環境ないと更新も面倒臭くて、廃墟になってしまった。

  • だから管理画面がほしいなぁ。

  • Markdownで書きたい。

  • 画像アップローダもほしい(しかし作りたくはない)。

  • というか自分は、一生に数度くらいしか見せないポートフォリオサイトになんでこんなに時間かけてるんだろう。


構成案


  • どうせプロジェクトリストくらいしか載せないんだから、もう管理画面もTrelloみたいなやつでいいのでは

  • ていうかAPIも生えてることだし、Trelloをバックエンドに使って作ってみよう。

  • GitHub PagesにSPAとして実装して、データ本体はTrelloからjsonでとってこよう。

ビュー周りには何使いますかね。Reactもいいんですけど、こういうちょろいアプリには、Vue.jsを使うことにしています。記述量が少なくて済みます。


Trelloからjsonを取る手っ取り早い方法

まず、適当なボードを一つ作り、公開状態(public)にします。

スクリーンショット 2015-04-14 3.42.58.png

実は、TrelloのボードのURL末尾に.jsonをつけるだけで、下記のようにjsonを取得することができます。

スクリーンショット 2015-04-14 3.43.11.png


CORS回避

しかし、trelloからjsonを取得しても、当然のようにCORS非対応です。ドメインを超えてjsonを取得することはできません。

そこで、JSONProxyというjsonをCORS対応してくれるプロキシサービスがありますので、利用させて頂きましょう。

https://jsonp.afeld.me/

※もちろん、過大な負荷をかけないよう留意しましょう

ここの「Cross-domain AJAX」にURLを突っ込んで生成してもらいます。


フロントエンド実装

Trelloでは、カードに画像をドラッグ&ドロップすることで、カバー画像を設定することができます。

これを利用すれば、画像アップローダ代わりにもなりますし、プロジェクトごとにスクリーンショットを付けることもできます。

スクリーンショット 2015-04-14 4.00.51.png

画像を取得するには、json内のcardの下に、attachementsとして、複数の解像度の画像へのリンクが記述されていますので、それを取得します。実態はS3にホスティングされているようです。

ここでは、最大解像度の画像を取得します。

// カードに添付された画像を取得

function getCover(card) {
var attachments = card.attachments;
if ( attachments&& attachments.length > 0 && attachments[0].previews) {
var previews = attachments[0].previews;
return previews[previews.length - 1].url;
}
return "";
}

残りのjs実装は、下記の通りです。

HTML側も含めてのコードはGitHubのレポジトリを参照してください。

// カードを単純なJSONに変換

function getCard(cards, listId) {
return cards
.filter(function(card) {
return card.idList === listId;
}).map(function(card) {
return {
name: card.name,
cover: getCover(card),
desc: marked(card.desc)
}
});
}

new Vue({
el: "#main",
data: {
products: [
{
name: "Loading...",
cover:"",
desc:""
}
],
ideas: [{name: "loading..."}],
result: ""
},
ready: function() {
var self = this;
// TrelloからJSONProxyを経て、jsonを読み込み(fetch APIを使用)
fetch("https://jsonp.afeld.me/?url=https%3A%2F%2Ftrello.com%2Fb%2FVusqcRPc%2Fproduct.json")
.then(function(response) {
return response.json()
}).then(function(json) {
var lists = json.lists.map(function (list) {
return {
name: list.name,
cards: getCard(json.cards, list.id)
};
});
self.result = JSON.stringify(lists);
self.products = lists.filter(function(item) {
return item.name === "作った"
})[0].cards;

self.ideas = lists.filter(function(item){
return item.name === "作りたい"
})[0].cards;
})
}
});

Trelloのカード内のdescriptionにはmarkdownを書くことができますが、ポートフォリオの方でもmarkdown to HTML変換がなされます。

地味ですが、以下の一行だけでmarkdown変換を済ませています。

marked(card.desc)


完成品

DEMO


利点と感じる部分


  • Trelloのヘビーユーザであれば、気軽に更新できる利点があるかと思います。TrelloにはiOS版もありますので、出先からでも簡単に更新できます。

  • また、Trelloには共有機能もありますので、共同編集にも使えるんじゃないかと思います。


  • ブログ機能も内包しているCMSが多い昨今ですが、ポートフォリオとブログでは要求仕様が大きく異なりますし、はてなブログとかに移譲してしまった方がいいと考えています。


    ちょっとなーと思う部分



  • Trelloから直でjsonを取得したいところです。


  • さすがにローディングまで結構待たされます。



Vue.jsについて

今回のような、jsonをfetchして組み立てて表示、みたいな単純なSPAは、Vue.jsがうまくはまる利用例だと考えています。


追記

現在では、jsonproxyはhttpsに対して動作しなくなっているようです。当サンプルは動作しませんので、ご注意願います。