こんにちは

今日は前回のポストで話したwebアプリの開発記第一弾になります。

アプリ名は

ArXiv Bookmark（仮）

にしようかと考えています！！

arXivの論文達をサクッとブックマークして気に入ったものをじっくりと読む、みたいなことができるサイトを目指したいと思ったからです。

ということで、これからできる限りありのままの開発の様子をお伝えしつつ、私のような初学者の手助けになるような連載を目指して頑張っていきたいと思います！！！

第一弾は、サーバー構築の初期の初期についてです。

サーバーサイドの設定

サーバーにはFlaskを使用していきます。

理由はpythonで簡単にサーバー構築が可能な点です！！

Materialize

サイトのデザインにはこだわりたいのですが、CSSの知識は皆無かつそこを専門にしていきたい訳ではないので、サクッとそれらしくデザインができるCSS Frameworkを活用していきます。

そして、選ばれたのは Materializeでした

materializecss.com

何と言ってもGoogle謹製のframeworkということなので間違いない！！おしゃれなボタンとかも簡単に作れちゃいます！！

実装

早速、Flask x Materilaize の実装を書いていきます。

まずは以下のようなプロジェクトを作成します

project
  ├─ app.py        # flask起動スクリプト
  └─ templates     # htmlファイル置き場
    └─ index.html  # トップページのhtmlファイル

そして app.pyを以下のように記述。

# app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")  # localhost:port/ にアクセスした時に実行される（ルーティング）
def index():
    return render_template("index.html")  # index.htmlを描画する


if __name__=="__main__":
    app.run(debug=True)

詳細は上記スニペットのコメントにも書いていますが、これで

http://localhost:5000/　← デフォルトではポートは5000

にアクセスした時に、templates/index.html を描画するようになります。めっちゃ楽チン！！

続いて index.html に Materialize をインポートする部分を書いていきます。

Materializeを使えるようにするには色々方法がありますが、今回はCDN(Contents Delivery Network)を利用しました。

CDNがなんとやらというのは自分で調べてくだされ。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>

    <!-- Materialize -->
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>

<body>

<!-- javascriptはbodyの末尾で読み込み -->
<!-- jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Materialize -->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<body>

基本的には公式サイトのGet started ⇨ CDNに書いてある通りですが、少しだけ変更点があります！

MaterializeにはjQueryが必要なコンポーネントがあるのでjQueryも同時にCDNで読み込むようにしています。

jQueryについては詳しくは割愛しますが、htmlの要素を操作するための便利なjavascriptライブラリだと思っていただければ大丈夫なはずです。

まとめ

今回は、Flaskの最小限の起動スクリプトと、Materializeのインポート方法について書きました。

次回はFlaskのテンプレート言語であるjinja2について書こうかと思います。

続き

nodaki.hatenablog.com

0.5から始める機械学習

Machine Learning, Deep Learning, Computer Vision に関する備忘録

FlaskとMaterialize ~ArXiv Bookmark開発記その1~

サーバーサイドの設定

Materialize

実装

まとめ

続き