Edited at

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

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

https://umihico.github.io/thumbnailed-portfolio-websites/

私も熱が入ってきて、ロケーション分けも実装しました。今後もアップデートしたいと思います。Japan明記かつ#portfolio-website使いは現在7名しかいません。皆さんも参加してくだされば嬉しいです

toppage.gif

 こんな感じで、トップのスター数、フォーク件数、アップデート順に回覧できます。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", ]で出力先の指定ファイルを保護できる。


参考