読者です 読者をやめる 読者になる 読者になる

pythonerになりたいWEBエンジニア(仮)

python、WEB開発、ExcelVBA、自動化、VR、Unityについて書いていきます

python + djangoでアプリ開発3

こんばんわ、siroです。

先日python + DjangoでWEBアプリ作ってやるぜ!と以下記事で意気込んでスタートしたんですが、初っ端躓いたのでブログに残しておこうと思います。笑

※前回の記事は以下参照

a-zero.hatenablog.com

 

つまづいたこと

前回の記事でも書きましたが、まずはサンプルのページを作っていこう!

ということになったので、さっそくcssフレームワークであるsemantic-UIを入れて、

サンプルページ開いてみたんです。

その時の画像がこちら。

 

f:id:sirosiro346:20170501233438p:plain

 

・・・え!!?

いや、これぺーじ?え?

 

一瞬何が起きたのか意味不明でした。

だって、本来はこうなるはずなんですから・・・

 

f:id:sirosiro346:20170501233639p:plain

 

なんだろうね。

初っ端うまくいかないとやる気なくなるよね。笑

 

で、色々調べた結果、djangoで静的ファイル(cssとかimgとか)を読み込むときは、

若干設定がいることが判明。

なにやら、セキュリティを意識してどこでもアクセスできるようにしていないんだとか。

そのため、静的ファイルを読み込む設定が必要となるそうな。

※詳しいことはあまり調べていません

 

Djangoで静的ファイルを読み込む設定方法

設定ファイルと、表示するhtmlの先頭におまじないをし、パス設定時も特定の記述をすれば良いとのことでした。

※以下参考

Python Django チュートリアル(6) - Qiita

 

setting.pyに以下追加

STATIC_URL = '/static/'
STATICFILES_DIRS = (
     os.path.join(BASE_DIR, 'static'),
)

 

フォルダ構成を以下のように変更


PJ名

 |--PJ名
 |
 |---template 
 |   |---index.html
 |

 |---static
  |--css
  |
  |--img
  |
  |--script
  |
  |--Semantic-UI-master

 

htmlファイルを以下のように修正

staticファイルを読み込む記述を先頭に追加

{% load staticfiles %} <!-- ← 追加 -->

cssなどの静的ファイル読み込み時のパスを以下のように設定

<link rel="stylesheet" type="text/css" href="{% static 'Semantic-UI-master/dist/components/〇〇〇〇.css' %}">

 

 semantic-UIのサンプルを利用した図書管理システムサンプル

そして、semantic-UIのexampleにあるfixed.htmlを少しいじって、できたサンプル画面がこちら。

f:id:sirosiro346:20170501235430p:plain

おおー

なんとなくそれっぽい画面ができた。笑

 

ヘッダメニューがあって、コンテンツが真ん中にあるのでいったん良しとします。笑

なにより、

 

CSSちゃんと読み込めたしOKです!!!!

 

まさかこんなところで躓くと思わなかったけど、新しい言語学ぶとこういったことはあるあるなので、これからもへこたれずにやろうと思います。

 

次回はいよいよ新規登録画面作ります。

テキストボックスやら、ラベルやらいろいろ用意して、入力したデータをDBに登録するところって感じですな。

入力チェックもそれなりに入れたいね。凝りすぎない程度に。

ログイン画面はまー、最後でもいいかな。笑

さっそく予定が崩れてきてますが、モチベ優先でやっていこうと思います。笑

 

ではではーノシ