#daiizメモ

Scrapboxに夢中

ポートフォリオ「ぽとふ」を刷新しました

① 「ぽとふ」をリニューアルしました

今日は久しぶりに自由な時間があったので、アプリやプロトタイプなどの作品を紹介するためのポートフォリオサイト「ぽとふ」をゼロから作り直しました。

ぽとふ開設時の記事


今回の大リニューアルにあたって、コンセプトを以下のように大きく変更しました。

つくったものは全て載せる勢い

  • ブログ記事、絵、アプリ、プロトタイプ... 何でも掲載できるような設計にする。
  • 作品をリリースしたらすぐに載せられるようになる工夫。
    • 作品スクリーンショットの廃止
    • 全ての情報が揃わなくても掲載可能にする

シングルページ

  • 無駄なページ遷移を廃止
  • サイドのメニューを廃止
  • 1ページ完結型

デザイン自動で

  • 新たな作品を追加するには、CSVファイルを編集するだけでOK
  • デザインはポートフォリオ作成ツール「Potofu」がやってくれる

このようにして仕上がった新サイトが下記ページです。(URLは以前のものと同じです。)

② ポートフォリオ作成ツール「Potofu2」も公開しました

上のサイトを作ったツールをGitHubに公開しました。

たとえば、work.csv

hoge, ?, ?, #Sample, @CSV
daiz's portfolio, http://daiz713.github.io/0/, http://daiz713.github.io/0/, #Sample, #Potofu2

のように書いて、これを.jsにするために

$ node setup.js works.csv > www/works.js

を実行します。 これでCSVに書いた内容がwww/works.jsが生成されるので、www/index.js

window.onload = function () {
    potofu2.setTitle(
        "Potofu2",
        "Potofu2",
        "ポートフォリオ作成ツール"
    );

    var hoge = potofu2.makeList('サンプル', 'table', [
        1, 2    /* CSVの行番号に対応 */
    ]);

    potofu2.pour([
        hoge
    ]);

    potofu2.flush();
}

のように書き、www/index.htmを開けばOKです。 以下のようなポートフォリオサイトが表示されます。


メソッドの用例などは

を見ると、雰囲気を掴めるかと思います。Potofu2の詳しい使い方は後日紹介します。