スポンサーリンク

【Python】Djangoを使ってウェブサイトを作成する その③

pythonでウェブサイトを制作する

前回までで、とりあえずDjangoを使ってブラウザにhtmlを表示させるところまではできるようになりました。

ですが、これだけでは物足りないので、今回はここにcssやjavascriptも反映させられるようにDjangoで生成したpyファイルを編集していきます。

css・jsや画像をサイトに反映させる

まず大元のmysite直下に「static」というフォルダを新規作成します。(mysite/mysiteの方じゃありません。)

そして、①の記事でダウンロードしたhtmlが格納されていたフォルダをみると、以下のような構成になっており、ここから上の4つのフォルダを「static」にコピーします。

次にmysite/setting.pyを開いてstaticのパスを確認します。一番下のSTATIC_URL = ‘/static/’の部分に以下のような追記をしてベースとなるディレクトリを「static」に指定します。

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

そして、INSTALLED_APPS =の一番下に’django.contrib.staticfiles’,を追記します。以下のようになっていればOKです。

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]

次はhtml側を編集していきます。

まず、index.htmlをテキストエディタで開き冒頭部分(headタグで囲まれた部分)に以下のような記述があると思います。

<link href="style.css" rel="stylesheet" type="text/css" />

これを以下のように書き直します。

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "/style.css"%}">

これでコマンドプロンプトから$python manage.py runserverを実行すると、以下のような画面が表示されます。

ここからcssと同じ要領で画像やjsの部分も反映させていきます。

index.htmlを開くと<img src=”img/〇〇.jpg” alt=”~となっているところが何か所かあります。ここを{% load static%}<img src=”{% static ‘img/〇〇.jpg’ %}” という感じに置き換えると画像が反映されます。

手動でやるとめんどくさいですが、テキストエディタなどで置換していくと楽です。

<img src="img/
↓
{% load static%}<img src="{% static 'img/

.jpg" alt=
↓
.jpg' %}" alt=

置換してindex.htmlを上書きして再起動すると以下のような画面になっています。

jsのファイルも以下のような具合で置換していきます。

<script type="text/javascript" src="jquery.js"></script>
↓
<script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>

これで、ようやく今風のホームページという雰囲気になってきましたね~!

ですが、このままだとリンクをクリックしても全部リンク切れの404になってしまうので、ダウンロードしたフォルダにあった残りのhtmlもDjangoで表示したウェブページに反映できるようにpyファイルを編集していきます。

スポンサーリンク

url_patternsを使ってhtmlページを追加する

というわけでDjangoで作ったペラページにindex.html以外の別のhtmlファイルも表示できるようにしていきます。

表示するページを増やす場合にはmyappのurls.pyを編集します。mysite/urls.pyは大元のファイルなので、ブログサービスや掲示板みたいに動的な画面がある場合は追記したほうがいいですが、今回は普通のウェブページで、管理画面と静的画面(html)しか要らないので、myappのurls.pyの方に追記していきます。

まずmyapp/urls.pyを開くと以下のようになっていると思います。

from django.conf.urls import url
from . import views
from django.urls import path
from django.conf.urls import include

urlpatterns = [
path('', views.index_template, name='index'),
]

表示させるhtmlを増やしたい場合は、まずviews.pyに表示させる関数を新しく追加しurls.pyのurlpatterns = [~の部分に追記していきます。

例えばアクセスのページを表示させたい場合ならば、

path(‘/access’, views.access_template, name=’access’),

終わり

以上がDjangoで簡単なWebサイト(ペラページ)を作るための一連の流れです。Djangoについては、分かりやすい日本語の参考書もまだ少なく独学するのは難しいですが、Pythonオンライン学習サービス「PyQ™(パイキュー)」で勉強すれば、Djangoを使ったECサイトや機械学習を使ったWebアプリも作れるようになるので、Djangoの勉強で困っている方にはオススメです。

Python学習サービス「PyQ™(パイキュー)」の詳細を見てみる

スポンサーリンク

プログラミングの独学はとても難しい


プログラミングは小学校の義務教育にも導入され始めており、これから社会人として生きていく上でプログラミングはもはや出来て当たり前、出来なれば論外というエクセルレベルの必須スキルになりつつあります。そしてそういう話を聞いて参考書なりを購入して独学でプログラミング勉強しようと思っている人も少なくないでしょう。しかしプログラミングを独学で勉強し始めようと思うものの



・「分からない箇所で詰まって挫折してしまった」

・「勉強する時間が足りない」

・「ネットの記事だと情報が断片的でよくわからない」

・「コードのエラーの原因が分からない」



という壁にぶち当たって、プログラミングの勉強を止めてしまう方が少なくありません。独学でプログラミングを勉強してる時間のほとんどはつまづいている時間です。実際僕も最初のころ独学でプログラミングを勉強していた頃はエラーの原因が分からず丸1日を不意にしてしまった・・・そんな苦い経験がありました。



それで僕は一度はプログラミングの学習を諦めてしまいましたが、就活で現実を知る中で「プログラミングを勉強して、いずれフリーランスとして自由な生き方がしたい」「エンジニアとして若いうちから高収入を得たい」という気持ちから一念発起して「侍エンジニアのwebサービスコース」に申し込み、プロのエンジニアの方に対面でマンツーマンでPythonによるWebサービス作り方とWeb技術の基本を教えてもらい、ようやくプログラミングが理解でき、今ではエンジニアとしてそこそこの暮らしができるようになりました。





侍エンジニアでは、とりあえずプログラミングやインターネットの基本を知っておきたい人から、HTML・cssなどでWebサイトやWebアプリを作ってみたい人やPythonを勉強してデータサイエンティストやAIエンジニアになりたい人まで幅広いニーズに応えた様々なコースが用意されています。



IT業界と言ってもエンジニアの仕事はプログラミング言語次第でサーバーから機械学習・ディープラーニングまで多種多様ですし、侍エンジニアの無料レッスン(カウンセリング)を受けてみて、自分のやりたいITの仕事は何なのか?を見つけるのがエンジニアへの第一歩になります。ちなみに今侍エンジニアの無料レッスンを受けると1000円分のAmazonギフト券がもらえるので、試しに受けてみるだけもお得です。


自分は半端に独学やオンラインスクールで勉強して金と時間を無駄にするくらいなら、リアルのプログラミングスクールに通ってしっかりプログラミングを勉強した方がいいと思います。ちなみに今、侍エンジニアに申し込むと、25歳以下の学生の方であれば、受講料が20%OFFになるので超お得です。


そして、プログラミングは大勢で授業を受けたり漫然とオンライン学習をするよりも自分が分からない箇所をピンポイントでプロの講師に直接質問して、ちゃんと納得するというスタイルの方がお金は確かに少し掛かりますが、独学で学ぶよりも絶対にモノになります。


シェアする

  • このエントリーをはてなブックマークに追加

フォローする