Help us understand the problem. What is going on with this article?

ぼっち対策として、ポートフォリオを作る。(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に対して動作しなくなっているようです。当サンプルは動作しませんので、ご注意願います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした