CMSに対する最新の気持ち

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

とりあえずWordPressは嫌
GitHub pages上にホスティングできると、お金かからないし、しかもURLもかっこいい
jekyllで生成するのもやってみたけど、いちいちコミットしてPushするのだるいし、環境ないと更新も面倒臭くて、廃墟になってしまった。
だから管理画面がほしいなぁ。
Markdownで書きたい。
画像アップローダもほしい（しかし作りたくはない）。
というか自分は、一生に数度くらいしか見せないポートフォリオサイトになんでこんなに時間かけてるんだろう。

構成案

どうせプロジェクトリストくらいしか載せないんだから、もう管理画面もTrelloみたいなやつでいいのでは
ていうかAPIも生えてることだし、Trelloをバックエンドに使って作ってみよう。
GitHub PagesにSPAとして実装して、データ本体はTrelloからjsonでとってこよう。

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

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

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

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

CORS回避

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

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

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

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

フロントエンド実装

Trelloでは、カードに画像をドラッグ＆ドロップすることで、カバー画像を設定することができます。
これを利用すれば、画像アップローダ代わりにもなりますし、プロジェクトごとにスクリーンショットを付けることもできます。

画像を取得するには、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に対して動作しなくなっているようです。当サンプルは動作しませんので、ご注意願います。

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