ぼっち対策として、ポートフォリオを作る。contentぼっち対策として、ポートフォリオを作る。update.※現在、当サンプルは動作しません。追記を参照して下さい。大き目の勉強会に参加すると、たいていぼっちになってしまいます。ピザとチューハイ片手に、邪魔にならない位置にいるしかありません。自己アピールさえできればなんとかなる場合も多かったと思います。ポートフォリオの出番です。CMSに対する最新の気持ち書き下すとこんな感じでしょうか。そこは面倒臭がるなよって箇所もありますが。pages上にホスティングできると、お金かからないし、しかもURLもかっこいいjekyllで生成するのもやってみたけど、いちいちコミットしてPushするのだるいし、環境ないと更新も面倒臭くて、廃墟になってしまった。管理画面がほしいなぁ。Markdownで書きたい。画像アップローダもほしい(しかし作りたくはない)。いうか自分は、一生に数度くらいしか見せないポートフォリオサイトになんでこんなに時間かけてるんだろう。構成案どうせプロジェクトリストくらいしか載せないんだから、もう管理画面もTrelloみたいなやつでいいのではていうかAPIも生えてることだし、Trelloをバックエンドに使って作ってみよう。PagesにSPAとして実装して、データ本体はTrelloからjsonでとってこよう。周りには何使いますかね。Reactもいいんですけど、こういうちょろいアプリには、Vue.jsを使うことにしています。記述量が少なくて済みます。Trelloからjsonを取る手っ取り早い方法まず、適当なボードを一つ作り、公開状態(public)にします。実は、TrelloのボードのURL末尾に.jsonをつけるだけで、下記のようにjsonを取得することができます。CORS回避しかし、trelloからjsonを取得しても、当然のようにCORS非対応です。ドメインを超えてjsonを取得することはできません。そこで、JSONProxyというjsonをCORS対応してくれるプロキシサービスがありますので、利用させて頂きましょう。AJAX」にURLを突っ込んで生成してもらいます。フロントエンド実装Trelloでは、カードに画像をドラッグ&ドロップすることで、カバー画像を設定することができます。これを利用すれば、画像アップローダ代わりにもなりますし、プロジェクトごとにスクリーンショットを付けることもできます。画像を取得するには、json内のcardの下に、attachementsとして、複数の解像度の画像へのリンクが記述されていますので、それを取得します。実態はS3にホスティングされているようです。ここでは、最大解像度の画像を取得します。"";}残りのjs実装は、下記の通りです。HTML側も含めてのコードはGitHubのレポジトリを参照してください。HTML変換がなされます。地味ですが、以下の一行だけでmarkdown変換を済ませています。marked(card.desc)完成品DEMO利点と感じる部分Trelloのヘビーユーザであれば、気軽に更新できる利点があるかと思います。TrelloにはiOS版もありますので、出先からでも簡単に更新できます。Trelloには共有機能もありますので、共同編集にも使えるんじゃないかと思います。ブログ機能も内包しているCMSが多い昨今ですが、ポートフォリオとブログでは要求仕様が大きく異なりますし、はてなブログとかに移譲してしまった方がいいと考えています。思う部分Trelloから直でjsonを取得したいところです。ローディングまで結構待たされます。Vue.jsについて今回のような、jsonをfetchして組み立てて表示、みたいな単純なSPAは、Vue.jsがうまくはまる利用例だと考えています。現在では、jsonproxyはhttpsに対して動作しなくなっているようです。当サンプルは動作しませんので、ご注意願います。upLoginユーザーは見つかりませんでした。