TaaQi Diary

エンジニア大学院生TaaQiのほのぼのした日常を綴ります。

Djangoに Bootstrap4 を導入して楽をしよう

こんにちは、たーき( @Taaaqiii ) です。

Djangoを使って過去に作ったWebアプリケーションを言語バージョンアップとリファクタリングをしているときに、
以前は長いCSSを書いていたのですが、CSSフレームワークをしようしてコードの量を減らそうと思いました。

そこで、今後のアプリ制作で楽をするために、Bootstrapを使ってみようと思います。

環境

Python 3.7.6
Django 3.0.2
django-bootstrap4 1.1.1

導入手順

まずはdjangoでbootstrap4の導入を簡単にしてくれるライブラリの django-bootstrap4 をpipインストールします。

$  pip install django-bootstrap4

Collecting django-bootstrap4
  Downloading django_bootstrap4-1.1.1-py3-none-any.whl (26 kB)
Collecting beautifulsoup4
  Downloading beautifulsoup4-4.8.2-py3-none-any.whl (106 kB)
     |████████████████████████████████| 106 kB 11.9 MB/s 
Collecting soupsieve>=1.2
  Downloading soupsieve-1.9.5-py2.py3-none-any.whl (33 kB)
Installing collected packages: soupsieve, beautifulsoup4, django-bootstrap4
Successfully installed beautifulsoup4-4.8.2 django-bootstrap4-1.1.1 soupsieve-1.9.5

続いて、Djangoの manage.py と同階層 にある setting.py の
INSTALLED_APPS, TEMPLATESのOPTIONS に bootstrap4 を追加します。

# Application definition

INSTALLED_APPS = [
    'study.apps.StudyConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap4', #<--ここに追加
]

~~~~~~~~~~
~~~~~~~~~~

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
            'builtins':[ 
                'bootstrap4.templatetags.bootstrap4',　#<--ここに追加！
            ],
        },
    },
]

最後に、テンプレート(base.html)のでbootstrapの CSSとjavaScriptを読み込む処理を追加します。

    <head>
        <title>AppName</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {% bootstrap_css %} <!-- ここを追加 -->
        {% bootstrap_javascript jquery='full' %} <!-- ここを追加 -->
    </head>

Bootstrap4の使用実例

例えば以下のようにhtmlにナビバーを記述すると、

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">AppName</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">マイページ</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ユーザ情報</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ログイン</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ログアウト</a>
                    </li>
                </ul>
            </div>
        </nav>

このような表示にしてくれます。

f:id:TaaQi:20200131202203p:plain
navbar

初めまして、Taaqiです【プログラミング・アクアリウムとの出会い】

CODE AQUA

こんばんは、たーき( @Taaaqiii )です。

今日からはてなブログを初めてみました。

ブログを書くのはこれが初めてではないですが、以前は WordPress で記事を書いていたため、はてなブログは初挑戦です。
ちょっとずつ慣れて行けたらなと思っています。

 

このブログでは、僕Taaqiの体験したこと、考えたこと、感じたことについて『発信』していきたいと思っています。

自分から情報を発信してみたい

これまでは、他の方の記事を読んで学びを得る『受信』はあったものの、自分からの『発信』はあまり行ってきませんでした。

僕の祖父が僕と同じ年齢だった頃、こんなに簡単に情報を世界中の人が手軽に見れるような状態にして『発信』することはできていませんでした。

せっかくこんなに簡単に世界中の人に自分のことを知ってもらえる機会があるならば、どんどん積極的に発信していこうと、23歳になった今思うようになりました。

もちろん、情報を『発信』するだけでもダメだと思います。
『受信』と『発信』のバランスをとりながら、自己成長もできると良いなと思っています。

 

プログラミングとの出会い

僕は2020年1月現在、M1(修士１回生)の大学院生です。
専攻は情報学です。

B1(学部１回生で)人生で初めてプログラミングと出会い、C言語から始まり、
Ruby -> Python のような流れでプログラミング言語を徐々に覚えていきました。

現在扱っているプログラミング言語は
7割がPython, 3割がRuby, まれにJavaScript, R言語
といった感じです。

B1(学部１回生)でC言語を学んでいるときは、僕は完全に専攻を間違えた、自分にはプログラミングは向いてない…
と嘆いていました。

しかし、
B2(学部２回生)でアプリ制作を行うサークルへの入団、そして優秀な先輩や同期たちとの出会いもあってクリエイティブなことが大好きになります。

B3(学部3回生)になると、IT系の企業で長期インターンに応募し、学校に通いながら社内システムの開発に携わらせてもらいました。
現在も、なお就業中です。(とは言ったものの大学院進学とともに出勤は週１程度に減りましたが）

今は、修士の研究としてのシステム開発としてPython・Djangoを使ったWebアプリケーションを作成しています。

 

アクアリウムとの出会い

僕がアクアリウムを始めたのは、大学に入ってからです。

B1の頃に、淡水水槽(60cmスリム)を始めます。

初めの頃は完全に熱帯魚をメインで飼育をすることに面白みを感じていましたが、だんだん水草レイアウト水槽の美しさに惹かれていきます。
B1の冬に、アルバイトを頑張って貯めたお金でCO2添加システムを導入し水草の育成にハマります。

 
しかし、ある病気にかかってしまいしばらく入院生活をすることになってしまいます。。。

その間、自分の体のことで精一杯で、退院後に帰宅したときに水槽は半崩壊状態でした。

ショックでしばらくアクアリウムをやめてしまいます。
(当時の生き残っていた生態や水草は近所のアクアショップと知り合いに引き取ってもらいました)

B3の夏、初めての「沖縄」旅行へ行きます。

初めての南の島で、生まれて初めて自然界に生息する色とりどりのトロピカルフィッシュやサンゴを目の当たりにしました。
そこで、僕は海の美しさを実感します。

僕は事情があって、ダイビングをすることができませんが、海が本当に大好きなんです。

沖縄から帰ってきてから、YouTubeでマリンアクアリウム という、海水で水槽作っていく分野があることを知ります。
大阪のアクアショップを廻って、海水水槽の魅力にどんどん引き込まれていき、
自宅のマンションで、海水水槽を立ち上げます。

初めはGEXという会社のAQUA-Uという水槽(かなり小さめ)を改良して外部フィルターを２個付するという変わったスタイルで始めました。

それから水槽のサイズアップを行い、現在は60cmスタンダード(60*30*36)の水槽をオーバーフロー化して海水魚とサンゴの飼育を行っています。

マリンアクアリウム を初めて２年半くらいになりますが、
海の世界は大変奥が深く、いまだに分からないことだらけです。

マリンアクアリウム は、出費もかなり多い趣味なのですが、
無理のないペースで、ゆっくりと自分のペースでちょっとずつサンゴを増やして、
色とりどりの水槽を作っていきたいと思っています！

なぜ「はてなブログ」を選んだの？

発信ツールとして、プログラミングや情報技術の知識共有サイトの Qiita というものがあります。
エンジニアとしては、Qiita での知識共有も非常に魅力的だと思ったのですが、
僕は発信したいものが「プログラミング」意外にも多々あります。

それに、僕はまだ新米のエンジニアなのでまだまだQiitaにアップできるような高クオリティの開発ができていないことも自覚しています。

そんなこんなで、はてなブログにたどり着きました。

ゆくゆくはDjangoとかで、独自のブログサイトを立ち上げてみたい思いもありますが、
今はこのはてなブログで発信する「情報」を言語化する取り組みをして行けたらと思っております。


こんな感じです。

今後も、何卒よろしくお願いします。

はてなブログでプログラミングのソースコードの表示テストをしてみた

CODE

プログラミングのソースコードがはてなブログできちんと表示されるかどうかのテストです。

まずはPythonから。

import numpy as np
arr = np.array([1, 2, 3])

続いてRuby

class HomeController < ApplicationController
    def schedule
        @staffs = Stuff.all.order('age')
    end
end

うん、いい感じ。