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

皆さんのポートフォリオをgifアニメにして、一覧できるサイト作った【Flaskで静的サイト】

 自分もポートフォリオサイト作ろうかなと、レイアウトの参考にGitHubの#portfolio-websiteを見ていましたが、何とも効率が悪いので、スクレイピングしてgifにまとめました。約1000件のポートフォリオをgifで見れます。改めて、皆さんの技量と熱量スゲェと思いました。
https://portfoliohub.umihi.co/

月日が経ち、現在はPortfolioHubとしてリニューアルしました。Flaskは使用してません。

 こんな感じで、トップのスター数、フォーク件数、アップデート順に回覧できます。gifなので下までのスクロールと、アニメーションも感覚が掴めると思います。みなさんが、数多くのデザインを参考にしたい時に便利だと思うので、使っていただければ幸いです。

 レポジトリのREADME.mdにもありますが、ポートフォリオのレポジトリの説明にurlを入れて、トピック#portfolio-websiteを追加すれば、いずれクローリングされます。日本人ポートフォリオはこの検索では中々ないので、#portfolio-websiteが流行ればいいなと思います。掲載増→回覧件数増の流れにしたいので、良いと思ってくださった方是非スターお願いします。

 本当は件数の多い#portfolioもクローリングしたいのですが、スキルセット・経歴以外の意味のポートフォリオも多数挙がってしまうので、断念しました。

 今回の技術ポイントは、Github pagesの静的ページ縛りに対して、今回のような定期的に集計されソートされる動的に本来やりたい動作の変換、それをpython・Flaskが使えるなら学習コストの無いFrozen-Flaskの紹介です。以下サンプルスクリプトの紹介です。

コマンドライン
pip install Flask
pip install Frozen-Flask
python test.py
フォルダ構成
qiita
│  test.py
├─files (test.py実行後)
│      filename_one.html (test.py実行後)
│      filename_two.html (test.py実行後)
└─templates
        test_dynamic.html
test.py
from flask import Flask, render_template
from flask_frozen import Freezer

app = Flask(__name__)
data = {
    'filename_one.html': 'value_one!',
    'filename_two.html': 'value_two!'
}

@app.route('/<path>/')
def dynamic_index(path):
    value = data[path]
    return render_template('./test_dynamic.html', value=value)

def generate_static_files(dynamic_paths):
    freezer = Freezer(app)
    app.config['FREEZER_RELATIVE_URLS'] = True
    app.config['FREEZER_DESTINATION'] = '../qiita/files'
    app.config['FREEZER_DESTINATION_IGNORE'] = [".git", ]

    @freezer.register_generator
    def product_url_generator():
        for path in dynamic_paths:
            yield "/" + path
    freezer.freeze()

if __name__ == "__main__":
    dynamic_paths = [
        'filename_one.html',
        'filename_two.html',
    ]
    generate_static_files(dynamic_paths)
test_dynamic.html
<html>
  <head></head>
  <body><h1>{{ value }}</h1></body>
</html>

結果

result.jpg

解説

  • dynamic_pathsを自由に設定して、好きなだけ動的なパスを与えられる
  • @app.routeが動的でない場合は自動で生成される
  • 動的なパスに対して、辞書dataで対応する値を好きに用意できる
  • app.config['FREEZER_RELATIVE_URLS'] = True で相対に
  • app.config['FREEZER_DESTINATION'] = '../qiita/files'で出力先設定。省略可(='build')
  • app.config['FREEZER_DESTINATION_IGNORE'] = [".git", ]で出力先の指定ファイルを保護できる。

参考

umihico
皆様のポートフォリオサイトを収集し運営しています。 https://portfoliohub.umihi.co
fiveneeds
酒 x ITで、お酒業界に風穴を開けるベンチャー企業です。
http://www.fiveneeds.co.jp/
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
ユーザーは見つかりませんでした