MENU
大人のためのSTEM遊び場〜Python、3Dプリンタ、ガジェット〜
  1. ホーム
  2. Programming
  3. 【Django】ワードクラウドアプリを作成（高さ、幅サイズ設定用のプルダウンメニューを設置）［Python］

【Django】ワードクラウドアプリを作成（高さ、幅サイズ設定用のプルダウンメニューを設置）［Python］

Programming
Django Python WordCloud プログラミング
  • URLをコピーしました！
目次

Django

前回、ラジオボタンなど選択制フォームの並び順がおかしい場合への対処法を解説しました。

あわせて読みたい
【Django】ラジオボタンやプルダウンメニューなどの選択制フォームの並び順がおかしい時に確認すること… Django 前回、ワードクラウドアプリでフォント配色用のラジオボタンを作成しました。 その際に少し悩んだことを今回は解説していきます。 その悩んだこととは、ラジオボ…

今回はワードクラウドアプリの作成に戻って、高さと幅を設定するためのプルダウンメニューを作成していきます。

ちなみに前回の並び順の対処法はこのプルダウンメニューでも使えます。

今回修正するのはいつもの通りこの3つのファイルです。

  • /webapp/wordcloudapp/forms.py
  • /webapp/wordcloudapp/views.py
  • /webapp/wordcloudapp/templates/wordcloudapp/index.html
webapp
├── ...
└── wordcloudapp
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── forms.py                <-これ
    ├── migrations
    │   └── __init__.py
    ├── models.py
    ├── static
    │   └── wordcloudapp
    │       └── wordcloud.png
    ├── templates
    │   └── wordcloudapp
    │       └── index.html      <-これ
    ├── tests.py
    ├── urls.py
    └── views.py                <-これ

それでは始めていきましょう。

/webapp/wordcloudapp/forms.py

まずフォームを作成するため、forms.pyを修正します。

修正したforms.pyがこちらです。

from django import forms

bgcolor_list = [('White','白'),('Black','黒')]
textcolor_list = [('bwr','青-白-赤'),('hot','暖色系'),('cool','寒色系'),('Reds','赤'),('Blues','青'),('Greens','緑'),('Greys','白-黒'),('rainbow','虹色')]
pic_size_list = [(100,'100'),(200,'200'),(300,'300'),(400,'400'),(500,'500')]

class WordCloudForm(forms.Form):
    text = forms.CharField(label='テキスト')
    bgcolor_choice = forms.ChoiceField(widget=forms.RadioSelect, choices=bgcolor_list, initial='White')
    textcolor_choice = forms.ChoiceField(widget=forms.RadioSelect, choices=textcolor_list, initial='bwr')
    pic_size_height = forms.ChoiceField(widget=forms.Select, choices=pic_size_list, initial=300)
    pic_size_width = forms.ChoiceField(widget=forms.Select, choices=pic_size_list, initial=400)

今回はプルダウンメニューを作成するため、そのメニューに記載するリストが必要になります。

その部分がこちら。

pic_size_list = [('100','100'),('200','200'),('300','300'),('400','400'),('500','500')]

そしてプルダウンメニューびフォームは高さ（height）、幅（width）をそれぞれこの部分で作成しています。

    pic_size_height = forms.ChoiceField(widget=forms.Select, choices=pic_size_list, initial=300)
    pic_size_width = forms.ChoiceField(widget=forms.Select, choices=pic_size_list, initial=400)

前回ラジオボタンを作った際にも「forms.ChoiceField」を使用しています。

ラジオボタンかプルダウンメニューかを決める部分はかっこ内の「widget」にあります。

ラジオボタンの場合は「widget=forms.RadioSelect」、プルダウンメニューの場合は「widget=forms.Select」です。

そしてそのプルダウンメニューの内容は「choices=pic_size_list」で先ほど作成したリストを指定しています。

またinitialを設定することで高さ300px、幅400pxをデフォルト値としています。

/webapp/wordcloudapp/views.py

次にviews.pyを修正します。

修正後のviews.pyがこちらです。

from django.shortcuts import render
from django.http import HttpResponse
from .forms import WordCloudForm
import sys
sys.path.append('../')
from webapp import definitions
from janome.tokenizer import Tokenizer
from wordcloud import WordCloud

def wordcloudmake(text, bgcolor, textcolor, height, width):

    tk = Tokenizer(wakati=True)
    tokens = tk.tokenize(text)

    words = ' '.join(list(tokens))

    wordcloud = WordCloud(width=width, height=height, background_color=bgcolor, colormap=textcolor, font_path=r"/System/Library/Fonts/Hiragino Sans GB.ttc").generate(words)
    wordcloud.to_file('./wordcloudapp/static/wordcloudapp/wordcloud.png')

def index(request):
    params = definitions.readjson()
    initial_val = {
        'text':'明日天気になぁれ',
        'bgcolor':'White',
        'textcolor':'bwr',
        'height':300,
        'width':400
    }

    wordcloudmake(initial_val['text'], initial_val['bgcolor'], initial_val['textcolor'], initial_val['height'], initial_val['width'])

    params['forms']= WordCloudForm(request.POST or None, initial=initial_val)

    if (request.method == 'POST'):
        text = str(request.POST['text'])
        bgcolor = str(request.POST['bgcolor_choice'])
        textcolor = str(request.POST['textcolor_choice'])
        height = int(request.POST['pic_size_height'])
        width = int(request.POST['pic_size_width'])

        wordcloudmake(text, bgcolor, textcolor, height, width)

        params['forms'] = WordCloudForm(request.POST)

    return render(request, 'wordcloudapp/index.html', params)

修正点を一つずつ見ていきましょう。

wordcloudmakeの修正

wordcloudmake関数の修正をでは、高さ（height）、幅（width）を追加しています。

def wordcloudmake(text, bgcolor, textcolor, height, width):

    tk = Tokenizer(wakati=True)
    tokens = tk.tokenize(text)

    words = ' '.join(list(tokens))

    wordcloud = WordCloud(width=width, height=height, background_color=bgcolor, colormap=textcolor, font_path=r"/System/Library/Fonts/Hiragino Sans GB.ttc").generate(words)
    wordcloud.to_file('./wordcloudapp/static/wordcloudapp/wordcloud.png')

ということで最初の関数の引数とWordCloudの引数にheightとwidthを追加しています。

def wordcloudmake(text, bgcolor, textcolor, height, width):
wordcloud = WordCloud(width=width, height=height, background_color=bgcolor, colormap=textcolor, font_path=r"/System/Library/Fonts/Hiragino Sans GB.ttc").generate(words)

WordCloudの引数が「width=width, height=height」となってしまい（WordCloudの引数名=変数名）、ちょっと困惑しやすい表記になってしまったので、もう少し工夫してもよかったかなと思っています。

ただ動くのでとりあえずはいいかなと。

wordcloudmakeの引数が変わったので、以下２箇所の関数呼び出し部分も修正しました。

wordcloudmake(initial_val['text'], initial_val['bgcolor'], initial_val['textcolor'], initial_val['height'], initial_val['width'])
wordcloudmake(text, bgcolor, textcolor, height, width)

initial_valの修正

forms.pyでも各フォームのデフォルト値を設定していますが、ここでviews.py内でもinitial_valとして設定していますので、ここにheightとwidthを追加しました。

    initial_val = {
        'text':'明日天気になぁれ',
        'bgcolor':'White',
        'textcolor':'bwr',
        'height':300,
        'width':400
    }

高さ、幅の入力値取得の追加

ページから情報が送信された際、その入力値を取得する部分を追加しました。

この部分の最後2行です。

    if (request.method == 'POST'):
        text = str(request.POST['text'])
        bgcolor = str(request.POST['bgcolor_choice'])
        textcolor = str(request.POST['textcolor_choice'])
        height = int(request.POST['pic_size_height'])
        width = int(request.POST['pic_size_width'])

/webapp/wordcloudapp/templates/wordcloudapp/index.html

最後にindex.htmlを修正します。

修正したindex.htmlがこちらです。

{% extends "basetemplates/base.html" %}

{% block title %}
<title>{{ title }}｜ワードクラウド</title>
{% endblock %}

{% block content %}
    <form action="/wordcloudapp/" method="post">
        {% csrf_token %}
        <p style="text-align: center;"><font size="5">テキスト:  </font>{{ forms.text }}</p>
        <div class="row">
            <div class="col" style="text-align: left;"></div>
            <div class="col" style="text-align: left;"><font size="5">高さ:  </font>{{ forms.pic_size_height }}<font size="5">  px</font></div>
            <div class="col" style="text-align: left;"><font size="5">幅:  </font>{{ forms.pic_size_width }}<font size="5">  px</font></div>
            <div class="col" style="text-align: left;"></div>
        </div>
        <p style="margin:1rem 0rem 0rem 0rem;"></p>
        <div class="row">
            <div class="col" style="text-align: left;"></div>
            <div class="col" style="text-align: left;">
                <font size="5">背景色</font>
                <p style="margin:0.5rem 0rem 0rem 0rem;"></p>
                {{ forms.bgcolor_choice }}
            </div>
            <div class="col" style="text-align: left;">
                <font size="5">テキスト色</font>
                <p style="margin:0.5rem 0rem 0rem 0rem;"></p>
                {{ forms.textcolor_choice }}
            </div>
            <div class="col" style="text-align: left;"></div>
        </div>
        <p style="text-align: center;"><input type='submit' value="click"></p>
    </form>
    <p style="text-align: center;"><img src="/static/wordcloudapp/wordcloud.png"></p>
    <p style="margin:2rem 0rem 0rem 0rem;"></p>
{% endblock %}

この中のこちらの部分を追加しました。

        <div class="row">
            <div class="col" style="text-align: left;"></div>
            <div class="col" style="text-align: left;"><font size="5">高さ:  </font>{{ forms.pic_size_height }}<font size="5">  px</font></div>
            <div class="col" style="text-align: left;"><font size="5">幅:  </font>{{ forms.pic_size_width }}<font size="5">  px</font></div>
            <div class="col" style="text-align: left;"></div>
        </div>

高さと幅のフォームをBootstrapを使ってレイアウトしています。

これで修正は完了なので、サーバーを起動し、確認してみましょう。

まずはデフォルトの高さ300px、幅400pxです（分かりやすいよう背景は黒にしています）。

ワードクラウドの画像自体はこんな感じ。

サイズを確認してみると確かに高さ300px、幅400pxです。

高さ100px、幅500pxを試してみましょう。

こちらは確かに高さ100px、幅500pxになりました。

高さ、幅のサイズはサーバーに高負荷を与えないように500pxにしていますが、大丈夫そうならさらに大きなサイズも作れるようにしていきたいものです。

ということで高さ、幅のサイズ変更に関しては良さそうなので、次回は背景の透明化を選択できるチェックボックスを作成してみましょう。

あわせて読みたい
【Django】ワードクラウドアプリを作成（背景透明化のためのチェックボックスを配置）［Python］ Django 前回、ワードクラウドアプリで画像の高さ、幅を設定するプルダウンメニューを設置しました。 今回は透明な背景を選ぶためのチェックボックスを配置していきます…

ではでは今回はこんな感じで。

Programming
Django Python WordCloud プログラミング
よかったらシェアしてね！
  • URLをコピーしました！

コメント

コメントする

目次