１週間でポートフォリオを作ってみた(AWS, flask,BEM, flocss)

１週間でポートフォリオを作ってみた(AWS, flask,BEM, flocss):

はじめに

P&Dのアドベントカレンダーも15日目です。もうすぐクリスマスですね。僕はiPhoneXRが欲しいなと思っているので、この記事をサンタ����が見てくれてたら嬉しいな����。

技術的アドバイスがあれば、この記事にコメントいただけると助かります。

それでもいいよーというかたは 次の開発環境の章にお進みください。

ちなみに僕が作ったポートフォリオはこちらで、そのソースコードはこちらです。

開発環境

まず、僕は一学生ですので、ポートフォリオをじっくり作り時間がありません。ですので、簡単に、きれいに、迅速に真似できるような環境だと思います。なお、今回はJavaScriptによるアニメーションなどは一切行なっていません。また、pythonを利用するので、pyenvとvirtualenvの環境および利用方法はあらかじめ準備しておいてください。

ちなみにpyenvの環境をMacで整える人はこちらを参考にしてもらえるといいと思いますw。

BEM, flocss

BEMとはscssの記法です。flocssはBEMを利用しながらwebページ全体のデザインを作りやすくします的な？

flocssの公式はこちらです。

gulp

タスクランナーです。細々したタスクをgulpファイルを用意してあげれば、コマンドを叩くだけで簡単に面倒な処理をやってくれます。ここではscssのコンパイル(scssファイルをコンパイルしてcssにする)に利用しました。

今では、webpackの方が主流なのかもしれませんが、僕は時間がなかったので使ったことのある物を利用することにしました。gulpの公式HPはこちらです。

flask

pythonの軽量webフレームワークです。今回の記事では5行程度しか書いてないのでpython知らねーよという人も使えると思います。

AWS

今回のデプロイ先です。AWS Elastic BeanstalkというCLIがあり、AWSの方にflaskでのデプロイまでのチュートリアルがあったので、それに従いながらデプロイしました。

フォルダ構成

flaskを利用するので、cssやhtmlファイルを所定のフォルダ内に作成する必要があります。

• application.py
• templates
  
  
  • index.html
• static
  
  
  • css
    
    
    • style.css
    • style.scss
    • foundation
      
      
      • _base.scss
      • _reset.scss
    • layout
      
      
      • _footer.scss
      • _main.scss
    • object
      
      
      • component
        
        
        • _header.scss
      • project
        
        
        • _hero.scss
        • _joining.scss
        • _skills.scss
      • utility
        
        
        • _margin.scss
        • _padding.scss
  • image
  • script
    
    
    • script.js

なお、画像とscriptに関しては省略します。

仮想環境

今回はAWSでも利用してあったのでvirtualenvで作成しました。

フロント

html,cssだけで構成しました。スマホ画面への対応をやっています。フロント開発の流れとしては、必要なファイルを揃え、htmlとcssを編集するだけでしょうね。

サーバー

flaskでサーバーを立ち上げるのは簡単です。今回の場合、DBはないので、ただrouteに一致するhtmlのファイルを返すだけで終わりです。

application.py

from flask import Flask, render_template 
application = Flask(__name__) 
 
@application.route('/') 
def main(): 
    return render_template('index.html') 

僕が１週間かかった最大のエラー

という題名にしたことを今でも後悔するほど、本当のお粗末なエラーでした。

デプロイには成功しているのに、server internal errorというメッセージがずっと飛んでいました。

最終的にはflaskのapplication.pyのapplicationという変数をもともとappという変数で宣言していて、それがエラーの原因でした。公式のDocumentはきちんと読みましょうねー。

感想

正直、これであればweb開発の基礎を一通り触ってみた人にとってはちょうどいい開発になると思います。