python bottleでcssを読み込ませたい
python,djangoでは2つくらいwebアプリケーションを作ったのですがもっと軽量なフレームワークであるbottleでは特に何も作ったことがありませんでした。
bottleをインストールしていろいろやっていたのですが、
cssの読み込みどうするの？？？
続きを読む(長崎総科大附属高校）湘南ベルマーレ所属。鈴木冬一プレー集
湘南ベルマーレ所属。鈴木冬一。
2019年に湘南ベルマーレに入団した高卒ルーキー。
ルヴァンカップで出番を掴むと、アジア王者鹿島戦相手にベルマーレが1人退場の状態で切り札として投入され溌剌とした動きを見せた。
ルヴァンカップではすでにアシストも決めている注目の選手だ。
続きを読む
(いちばんやさしいpython教本の改造)観客動員予測システム「ベルマーレ観客動員予測１号ちゃん」プログラム解説③
今回は観客動員予測システム部分の解説をしましょう。
(いちばんやさしいpython教本の改造)観客動員予測システム「ベルマーレ観客動員予測１号ちゃん」プログラム解説③
以下がコードとなります。
def douin_csv_open(command):
"""フォームから入力した動員 1のような言葉を引数として受け取った時にdouin, numberという変数に分割して受け取る"""
douin, number = command.split()
with open('観客動員整理.csv', encoding='utf-8') as open_file:
read_douin = open_file.read()
douin_split = read_douin.splitlines()
douin_dict = {}
for douin in douin_split:
team_number, mobilization = douin.split(':')
douin_dict[team_number] = mobilization
mobilization_dict = {}
for team_number in douin_dict:
audience_mobilizations = douin_dict[team_number].split(',')
key = audience_mobilizations[0]
name = audience_mobilizations[1]
year = audience_mobilizations[2]
section = audience_mobilizations[3]
'''audience_mobilization = audience_mobilization[4]はエラーになるのでsを付けた'''
audience_mobilization = audience_mobilizations[4]
the_day_of_the_week = audience_mobilizations[5]
sunny = audience_mobilizations[6]
sunny_mobilization = audience_mobilizations[7]
if sunny_mobilization != "観客動員数予測1":
sunny_mobilization = int(sunny_mobilization)
cloudy = audience_mobilizations[8]
cloudy_mobilization = audience_mobilizations[9]
rain = audience_mobilizations[10]
rain_mobilyzation = audience_mobilizations[11]
heavy_rain = audience_mobilizations[12]
heavy_rain_mobilyzation = audience_mobilizations[13]
star = audience_mobilizations[14]
opening_match = audience_mobilizations[15]
sannno_univ_special_day = audience_mobilizations[16]
mobilization_dict[team_number] = (name, year, section, audience_mobilization, the_day_of_the_week, sunny, sunny_mobilization, cloudy, cloudy_mobilization, rain, rain_mobilyzation, heavy_rain, heavy_rain_mobilyzation, star, opening_match, sannno_univ_special_day)
mobilization_dict[team_number] = '{}戦の観客動員数は\n{}の場合{}人\n{}の場合{}人\n{}の場合{}人\n{}の場合{}人よ。'.format(name, sunny, sunny_mobilization, cloudy, cloudy_mobilization, rain, rain_mobilyzation, heavy_rain, heavy_rain_mobilyzation)
basic_message = '{}戦の観客動員数は\n{}の場合{}人\n{}の場合{}人\n{}の場合{}人\n{}の場合{}人よ。'.format(name, sunny, sunny_mobilization, cloudy, cloudy_mobilization, rain, rain_mobilyzation, heavy_rain, heavy_rain_mobilyzation)
if audience_mobilization != "0":
mobilization_dict[team_number] = '{}戦の観客動員数は{}人だったわ。\nお天気は{}だったわ。\nこの時私はまだ生まれてないから動員数の予測はしていないの。'.format(name, audience_mobilization, cloudy)
if star == "1":
mobilization_dict[team_number] = basic_message + "\nこの試合はスター選手が来るから、たくさんお客さんが来そうね。" .format(name, sunny, sunny_mobilization, cloudy, cloudy_mobilization, rain, rain_mobilyzation, heavy_rain, heavy_rain_mobilyzation, star)
if sannno_univ_special_day == "1":
mobilization_dict[team_number] = basic_message + "\nこの日は産能大スペシャルデーだから、たくさんの学生さんが来てくれると思うわ。"
if sunny_mobilization > 15380:
mobilization_dict[team_number] = basic_message + "\nスタジアムの収容人数よりも人が多い？\nごめんなさい。そういうことはまだ教わっていないの。"
response = mobilization_dict
return response[number]
この部分は前回解説しましたが入力された文字の分割とcsvの呼び出しをしてsplitlines()で行ごとに出力しています。
def douin_csv_open(command):
"""フォームから入力した動員 1のような言葉を引数として受け取った時にdouin, numberという変数に分割して受け取る"""
douin, number = command.split()
with open('観客動員整理.csv', encoding='utf-8') as open_file:
read_douin = open_file.read()
douin_split = read_douin.splitlines()
team_number, mobilization = douin.split(':')でキーとその他にデータを分ける。
douin_dict = {}
for douin in douin_split:
team_number, mobilization = douin.split(':')
douin_dict[team_number] = mobilization
douin_dict[team_number] = mobilization
でdouin_dict(辞書)に1:'北海道コンサドーレ札幌' '14000'
のようにデータを突っ込んでいきます。
mobilization_dict = {}
for team_number in douin_dict:
audience_mobilizations = douin_dict[team_number].split(',')
キー以下を,で分割していきます。分割の際のポイントを解説。
'''audience_mobilization = audience_mobilization[4]はエラーになるのでsを付けた'''
audience_mobilization = audience_mobilizations[4]
これは多分なんですが代入するワードと代入されるワードが同じだとエラーがでるっぽい。個人的には不可解で今でも本当にそうなのか疑問なんですが、sをつけることで改善しました。
if sunny_mobilization != "観客動員数予測1":
sunny_mobilization = int(sunny_mobilization)
晴れの場合の観客動員予測のデータだけは(別に全部修正してもいいんだけど）strからintに変換しなきゃいけないんですけれど、csvデータの先頭行には観客動員数予測1のように列見出しが書いてあるので列見出しの部分はintに変換できずにエラーが出てしまうんですよね。
なのでifで
if sunny_mobilization != "観客動員数予測1":
として"観客動員数予測1"の場合は変換しないことにしました。
ちなみにintに変換する理由は終盤に出てくるこのプログラムに必要だから。
if sunny_mobilization > 15380:
mobilization_dict[team_number] = basic_message + "\nスタジアムの収容人数よりも人が多い？\nごめんなさい。そういうことはまだ教わっていないの。"
僕の知識が不足（bottleではなくjupyter notebookを使った重回帰分析等の知識の方）していてスタジアムの動員数よりも上の観客動員数を予測してしまうんですよね。
ですのでintの15380がスタジアムの収容人数のMAXなのでこれより多い数値が出た場合にbasic_messageに加えて特殊なワードを喋るように改造を施したのです。
response = mobilization_dict
return response[number]
あとはこんな感じでフォームから入力された番号から辞書を引き出して出力すればOK!
そのほかの機能
他の機能は改造ってほどのことはしてませんね。
ramdam機能を使ってJリーグと入力するとランダムで言葉を発します。
import random
about_j_league_dict = {
'1':'Jリーグ。実力差が少ないリーグという評判よ',
'2':'Jリーグが強くならなければ日本代表も強くならないわ。\n選手を海外に輸出だけすれば強くなるなんて幻想よ。',
'3':'みんなはどのチームのサポーターなの？\n私はもちろんベルマーレよ。',
'4':'Jリーグアプリ。あれ面白そうね。',
'5':'チケット買った？',
'6':'バージョンが上がれば他にも会話が増えるかもね。',
'7':'Jリーグは女性や子どもでも楽しめる安全なスタジアムを目指しているわ。\n私のようなインターネット上の存在でもいつか観戦できるようになるかしら？',
}
def about_j_league():
key, j_league = random.choice(list(about_j_league_dict .items()))
choiced = j_league
response = choiced
return response
テキストからワードを呼び出すというのも元々の機能から改造してませんね。発する言葉は増やしましたけど。
command_file = open('pybot.txt', encoding='utf-8')
raw_data = command_file.read()
command_file.close()
lines = raw_data.splitlines()
bot_dict = {}
for line in lines:
word_list = line.split(',')
key = word_list[0]
response = word_list[1]
bot_dict[key] = response
出力元のpybot.txtには以下のように記されている。
こんにちは,こんにちは！ こんばんわ,こんばんわ！ ありがとう,どういたしまして！ おやすみなさい,おやすみなさい！ さようなら,さようなら！ そうだよ,そうなんだ！ 頑張って,ありがとう はい,えっ？本当？やるわね！ いいえ,えっ！じゃあ頑張るしかないわね！ 買,チケット買いましょう。あとローストビーフ丼。 人工知能,私人工知能ではないの。バージョンが上がればそうなるかもね！ ロースト,ローストビーフ丼は絶対おいしいと思うの！ げっ,げげっ！
実はローストビーフ丼を食べたがっていますｗ
デプロイについて
デプロイについて少し。
bottleとdjangoのディレクトリを分けてお互いをデプロイするというのは出来ないわけではなさそうでした。ただ同時にdjangoに書き換えて1つのディレクトリでデプロイするのはオーソドックスな考え方と言われました。
ですのでいずれdjangoに書き換えるかもしれません。
今回はとりあえずherokuにデプロイ。
requirements.txtの構成はこんな感じ。これで動作しました。
requirment
bottle==0.12.13
python-dateutil==2.8.0
pythonanywhere==0.6
requests==2.20.0
wikipedia==1.4.0
Jinja2==2.10
今後について
これからやろうと思っていることについてメモがあります。
投票アプリケーション
Questionの掲載期限を設けたい →完了 vote→投票 →完了 投票時のコメントを設けられるようにしたい →完了 CSSをもっとかっこよくしたい →完了
将来やること 1人1票、投票6時間に１回とか→クッキーとipを送信させればできそうだが難しそう 3人まで投票できるようにしたい 棒グラフで得票数が見られるようにしたい 二重submit禁止 google analytics google adsense
掲示板アプリケーション CSSの改造 →完了 投票アプリ。今こんなの投票してます。の表示。→完了 いいねボタンの作成 →完了 フォーム横の文字を消したい → 完了
Djangoに振り替えてさくらVPSに ローカル環境時とデプロイ時でcsvの読み込みの成功不成功が変わってしまう（おそらく文字コードによる違い）のでそこをなんとかする。 →解決。ただしcsv自体は文字化けしている
将来やること ユニットテスト JavaScriptで非リダイレクトいいね(Ajax通信の使用) 二重submit禁止 画像のアップロード容量制限→完了
新しく作りたいアプリケーションもあるのですが、それよりはまず今までの復習もかねて既存アプリケーションに改造を加えたいと思っております。
たくさん作って忘れてることもあるので復習。
ただ改造においてjava scriptを学ぶ必要があるのでjava scriptをやろうと思っています。
あとものすごーく簡単なmysqlの操作方法みたいな講座を今見ているのでそれは全部見ます。
ベルマーレ観客動員予測１号ちゃん
というわけで一号ちゃんを作成は終了。まだいろいろ勉強しよう。
(いちばんやさしいpython教本の改造)観客動員予測システム「ベルマーレ観客動員予測１号ちゃん」プログラム解説②
前回の記事
前回は改造前のプログラムの解説とcss部分だけで終わってしまいました。
今回はいよいよプログラム部分に入っていきますよ。
プログラム的に特に書きたいことを書いていく
まずURLにアクセスするとLINE風の会話部分が空欄になっており味気ないことが判明しました。
なのでpost意外でURLにアクセスした場合には
@route('/douinyosoku/1/')
def audience_mobilization():
input_text = '観客動員予測や質問を入力してください'
output_text='こんにちは！\n湘南ベルマーレ観客動員予測システムの\n「観客動員予測１号」です。\nよろしくお願いいたします！'
return template('template', input_text=input_text, output_text=output_text, input_text_conversion='')
input_text_conversion=''は完全に僕が作った部分なので後ほど解説
input_text = '観客動員予測や質問を入力してください' output_text='こんにちは！\n湘南ベルマーレ観客動員予測システムの\n「観客動員予測１号」です。\nよろしくお願いいたします！'
このように出力するようにしました。
実はbottleはこのままだと\nの改行が反映されないのですが
Python + Bottle + Jinja2で、Jinja2のカスタムフィルターを使う - メモ的な思考的な
この記事を参考に改行を反映させました。
from bottle import TEMPLATE_PATH
TEMPLATE_PATH.append("./path/to/templates")
の部分はなにか改造が必要かなと思いましたが丸写しでいけました。
html部分は
{{input_text|nl2br }}
{{output_text|nl2br }}
こんな感じで書けばおっけー。
フォーム送信後。つまりPOSTによるアクセスに関しては
@route('/douinyosoku/1/', method='POST')
def do_audience_mobilization():
input_text = request.forms.input_text
output_text = pybot(input_text)
input_text_conversion = ''
このように書きます。
input_text_conversion = ''
以外は元のプログラムと全く同じですね。
input_text_conversionって何？
input_text_conversionについて説明しますね。
これを説明するにはここの機能について語らなくてはなりません。
このアプリケーションの本丸部分ですね。
実は観客動員予測の呼び出しはcsvファイルから行っております。
1: 相手チーム, 北海道コンサドーレ札幌 晴れの場合の観客動員数, 14000 雨の場合の観客動員数, 13000 ...etc
2: 相手チーム, FC東京 ...etc
このようなデータが並んでおります。
html部分のセレクトボタンで
<strong class="douinyosokukiku">観客動員数の予測を聞く</strong> <form class = "select-form" method="post" action="/douinyosoku/1/"> <select name="input_text"> <option value="audience_mobilization_anaritics 1">1節 北海道コンサドーレ札幌</option> <option value="audience_mobilization_anaritics 2">2節:FC東京</option> <option value="audience_mobilization_anaritics 3">4節:ベガルタ仙台</option> <option value="audience_mobilization_anaritics 4">6節:ジュビロ磐田</option> <option value="audience_mobilization_anaritics 5">7節:松本山雅FC</option> <option value="audience_mobilization_anaritics 6">10節:名古屋グランパス</option> <option value="audience_mobilization_anaritics 7">11節:大分トリニータ</option> <option value="audience_mobilization_anaritics 8">14節:横浜F・マリノス</option> <option value="audience_mobilization_anaritics 9">17節:セレッソ大阪戦</option> <option value="audience_mobilization_anaritics 10">19節:ヴィッセル神戸</option> <option value="audience_mobilization_anaritics 11">21節:鹿島アントラーズ</option> <option value="audience_mobilization_anaritics 12">23節:サガン鳥栖</option> <option value="audience_mobilization_anaritics 13">25節:浦和レッズ</option> <option value="audience_mobilization_anaritics 14">27節:清水エスパルス</option> <option value="audience_mobilization_anaritics 15">28節: 川崎フロンターレ</option> <option value="audience_mobilization_anaritics 16">30節:ガンバ大阪</option> <option value="audience_mobilization_anaritics 17">33節:サンフレッチェ広島</option> </select></p> <input type="submit" value="送信"><input type="reset" value="リセット"> </form>
hrmlから audience_mobilization_anaritics 11 のような文章が送信されると
if 'audience_mobilization_anaritics' in command:
response = douin_csv_open(command)
が動作し、
def douin_csv_open(command):
"""フォームから入力した動員 1のような言葉を引数として受け取った時にdouin, numberという変数に分割して受け取る"""
douin, number = command.split()
with open('観客動員整理.csv', encoding='utf-8') as open_file:
read_douin = open_file.read()
douin_split = read_douin.splitlines()
まずaudience_mobilization_anaritics 17をふたつに分割した後csvを開いてキー17を呼び出していくのですが出力の際に問題があったのです。
input_text = request.forms.input_text
そう！input_textはformで入力した文章をそのまま呼び出すのです。なので観客動員のセレクトボックスを送信すると。
audience_mobilization_anaritics 17
と英語とキー番号を喋りだしてしまうのです。
これはさすがにおかしい。
input_text部分を改造しようと思ったのですが、
入力した言葉をそのまま出力する機能も残す必要があったので以下のようにプログラムして
if input_text == 'audience_mobilization_anaritics 1':
input_text_conversion = 'コンサドーレ札幌戦の観客動員数を教えて'
input_text = ''
特定の言葉がフォームに入力された場合にはinput_textを空欄にしてその代りにinput_text_conversionを出力するという風に変更を加えたのです。
余談ですが当初はhtmlのフォーム部分は
<option value="動員 1">1節 北海道コンサドーレ札幌</option>
としていてさらにべつのフォーム部分では、
<strong class="ベルマーレ観客動員予測１号ちゃんについて">ベルマーレ観客動員予測１号ちゃんについて</strong>
としていたのですが
これをやってしまうと動員というキーワードが干渉してしまい、ベルマーレ観客動員予測１号ちゃんについてというキーワードに1や2といったdictのkeyが存在しないためoutput_textがNoneになるというエラーが発生しました。(なんか他にもエラーが出た気がする)
これだと日本語の質問が干渉を起こしまくってしまうため
<option value="audience_mobilization_anaritics 1">1節 北海道コンサドーレ札幌</option>
↓
if input_text == 'audience_mobilization_anaritics 1':
input_text_conversion = 'コンサドーレ札幌戦の観客動員数を教えて'
input_text = ''
とすることで英語の文章を送り出力はinput_text_conversion = 'コンサドーレ札幌戦の観客動員数を教えて'
で行うという処置をとったのです。
なんか長いし分かりにくい説明ですかね？
今回はこのくらいにしておきましょう。
(いちばんやさしいpython教本の改造)観客動員予測システム「ベルマーレ観客動員予測１号ちゃん」プログラム解説①
作りました。
作ったのでアウトプットもかねてプログラム解説をつけようと思います。
素人なので解説なんて大げさなものじゃありませんね。ただ理解を深めたり復習するにはアウトプットがいいんですよね。
分析手法についてはこちらを見てください。
重回帰分析を使ってベルマーレの観客動員数を予測したい！！！① - ニートがベルマーレ好きすぎて会社起こしたけど今後は未定
重回帰分析を使ってベルマーレの観客動員数を予測したい！！！② - ニートがベルマーレ好きすぎて会社起こしたけど今後は未定
コードはこちら
考えたこと
まずdjangoでしかwebアプリケーションを制作したことが無かったので簡単なアプリをbottleで作ろうと思いました。
ただしさくらvpsを使う場合すでにdjangoのアプリケーションがデプロイされているので最終的にdjangoに書き換える必要はあるかもしれないと考えました。
一番やさしいpython教本をもとに改造を加えるのでとりあえずbottleで作った証としてherokuにアップロードする可能性は考慮していました。（本の内容をherokuにbottleでデプロイしたことがある）
元のプログラムの解説
プログラム的にやったことでまとめていきたいことを書いていきます。
このアプリは「いちばんやさしいpython教本」を基に改造をしてあります。
まずはもとのアプリを少し解説してみましょうか。
以下がpybotweb.py
import os
from bottle import route, run, template, request
from pybot import pybot
@route('/hello')
def hello():
return template('pybot_template', input_text='', output_text='')
@route('/hello', method='POST')
def do_hello():
input_text = request.forms.input_text
output_text = pybot(input_text)
return template('pybot_template', input_text=input_text, output_text=output_text)
#run(host='localhost', port=8080, debug=True)
run(host="0.0.0.0", port=int(os.environ.get("PORT", 5000)))
普通にURL+/helloのページに遷移した場合
input_text='', output_text=''
部分は空欄になっていることが分かります。
以下html部分（template.tpl)↓
<html>
<body>
<h1>pybot Webアプリケーション</h1>
<form method="post" action="/hello">
メッセージを入力してください: <input type="text" name="input_text">
<input type="submit" value="送信">
</form>
<ul>
<li>入力されたメッセージ: {{input_text}}</li>
<li>pybotからの応答メッセージ: {{output_text}}</li>
</ul>
</body>
</html>
formにメッセージを入れるとフォームでの送信はPOST
<form method="post" action="/hello">
となるので
@route('/hello', method='POST')
以下がURLに出力されます。
html部分を見てみると、inputテキストに出力がされるようになっていますね。
↓以下に出力
<li>入力されたメッセージ: {{input_text}}</li>
<li>pybotからの応答メッセージ: {{output_text}}</li>
ここで関数を見てみると
input_text = request.forms.input_text
output_text = pybot(input_text)
return template('pybot_template', input_text=input_text, output_text=output_text)
input_textはそのままフォームで送信されたinput_textが出力されますがoutput_textは
output_text = pybot(input_text)
が出力されることになります。
output_text = pybot(input_text)とは何かというとpybot.pyというファイルに
command_file = open('pybot.txt', encoding='utf-8')
raw_data = command_file.read()
command_file.close()
lines = raw_data.splitlines()
bot_dict = {}
for line in lines:
word_list = line.split(',')
key = word_list[0]
response = word_list[1]
bot_dict[key] = response
def pybot(command):
# command = input('pybot> ')
response = ''
try:
for key in bot_dict:
if key in command:
response = bot_dict[key]
break
if '平成' in command:
response = heisei_command(command)
if '長さ' in command:
response = len_command(command)
if '干支' in command:
response = eto_command(command)
if '選ぶ' in command:
response = choice_command(command)
if 'さいころ' in command:
response = dice_command()
if '今日' in command:
response = today_command()
if '現在' in command:
response = now_command()
if '曜日' in command:
response = weekday_command(command)
if '天気' in command:
response = weather_command()
if '事典' in command:
response = wikipedia_command(command)
if not response:
response = '何ヲ言ッテルカ、ワカラナイ'
return response
こんなコードがあるのですがここの
def pybot(command):
以下となります。
if '平成' in command:
もしコマンドの中に平成があれば
response = if '平成' in command:
response = heisei_command(command)
レスポンスに関数heisei_command(command)が代入されます。
これは平成 西暦の年数のようにフォームに入力すると平成○年は西暦○年ですよと教えてくれるプログラムです。
def heisei_command(command):関数は以下のようになっており、
def heisei_command(command):
heisei, year_str = command.split()
if year_str.isdigit():
year = int(year_str)
if year >= 1989:
heisei_year = year - 1988
response = '西暦{}年ハ、平成{}年デス'.format(year, heisei_year)
else:
response = '西暦{}年ハ、平成デハアリマセン'.format(year)
else:
response = '数値ヲ指定シテクダサイ'
return response
heisei, year_str = command.split()
と書いてあるようにsplit()で空欄で文字を分割。heisei変数とyear変数に分割します。
returnはresponse。
response = '西暦{}年ハ、平成{}年デス'.format(year, heisei_year)
else:
response = '西暦{}年ハ、平成デハアリマセン'.format(year)
else:
response = '数値ヲ指定シテクダサイ'
return response
def pybot(command):
(中略）
if '平成' in command:
response = heisei_command(command)
と書かれているのでたった平成 1989のように打ち込むとheisei_command(command)がresponseに代入され
関数でpybot(input_text)が処理した戻り値がoutput_textに代入され
@route('/hello', method='POST')
output_text = pybot(input_text)
return template('pybot_template', input_text=input_text, output_text=output_text)
html部分の
<li>pybotからの応答メッセージ: {{output_text}}</li>
に出力されます。これが基本的な機能になります。
このプログラムを基に改造をし、「ベルマーレ観客動員予測１号ちゃん」を完成させました。
プログラム的に改造したところで特に書きたいこと
ここから改造した部分で特に書きたいことを書いていきます。
まずただのフォームでは味気ないと思ったのでLINE風のフォームに変更しました。
このページを丸写し参考にしました。
CSSで作る！吹き出しデザインのサンプル19選
ただしフォーム部分と上の名前のところは自分で考えて改造しました。
フォーム部分はcssは以下のようになっています。
.line-top {
max-width: 100%;
text-align: center;
font-size: 16px;
background: #003a66;
/*paddingで幅を広げようと思ったらなぜか無理だった */
border: solid 10px #003a66
}
.line-top strong {
color: #FFFFFF;
}
文字の部分は画像と文字の上下幅がぎりぎりだったので広げようと思いpaddingを改造していたのですがなぜか全く動作せず、
border: solid 10px #003a66
としてボーダーの方で改造して幅を広げました。
フォームに関しては
.input-form {
width: 94%;
margin: 0.5% 0% 1% 1% ;
padding: 0% 0% 0% 1%;
float: left;
border-radius: 10px;
-webkit-appearance: none;
border: 1px solid #ccc
}
.input-button
{
width: 2%;
max-width: 5%;
height: auto;
margin: 0.5% 0.5% 1% 1.5%;
}
こんな感じで書いております。
htmlは
<form method="post" action="/douinyosoku/1/"> <input class = "input-form" name="input_text"> <input class = "input-button" type="image" src="/static/css/images/submit_button.png" alt="送信する"> <!--<input class = "input-button" type="submit" value="送信">--> </form>
こうなっています。
送信ボタンをLINEっぽい画像にしたのですがこれをレスポンシブデザインに適用しようとすると大苦戦でした。
画像自体のサイズも最初からずいぶん変更しましたし、結局画面幅ごとにcssを書いていくという非常にオーソドックスな方法をとることに。
/* このやり方で画像を小さくすることにいつか挑戦したい。 https://junzou-marketing.com/responsive-image */
@media only screen and (max-width: 1024px){
.input-form {
width: 94%;
margin: 0.5% 0% 1% 1% ;
padding: 0% 0% 0% 1%;
float: left;
border-radius: 10px;
-webkit-appearance: none;
border: 1px solid #ccc
}
}
@media only screen and (max-width: 1024px){
.input-button
{
width: 2.5%;
max-width: 2.5%;
height: auto;
margin: 0.5% 0.5% 1% 1.5%;
}
}
@media only screen and (max-width: 768px){
.input-form {
width: 93%;
margin: 0.5% 0% 1% 1% ;
padding: 0% 0% 0% 1%;
float: left;
border-radius: 10px;
-webkit-appearance: none;
border: 1px solid #ccc
}
}
@media only screen and (max-width: 768px){
.input-button
{
width: 3.5%;
max-width: 3.5%;
height: auto;
margin: 0.5% 0.5% 1% 1.5%;
}
}
@media only screen and (max-width: 700px){
.input-form {
width: 90%;
margin: 0.5% 0% 1% 1% ;
padding: 0% 0% 0% 1%;
float: left;
border-radius: 10px;
-webkit-appearance: none;
border: 1px solid #ccc
}
}
@media only screen and (max-width: 700px){
.input-button
{
width: 7%;
max-width: 7%;
height: auto;
margin: 0.5% 0.5% 1% 1.5%;
}
}
form幅と画像の幅を%表記でいじくっています。でもやっぱりちょっとずれるんですよね。
最近はこんな方法もあるらしくいつか最新の方法で挑戦したいです。
新常識ってなんかかっこいい。
ちなみにレスポンシブデザインの基本的なところはbootstrapにお任せ。
いまはこんな便利なものがあるんですね！！！すごい！！！
Introduction · Bootstrap
(Starter templateを使います。マジでなんかいい感じに処理してくれます）
元のプログラムの説明とcss周りだけで終わってしまった・・・。
続きは次回！
2019 J1第4節 湘南ベルマーレ対ベガルタ仙台 小野田！！山根！！両CBのゴールで鬼門仙台に勝利！！これは大きいぞ！！
やった！！
やった！！！
やったぞーーーーーーーー！！！！！！！！
冬一！！！あいつむっちゃすごい！！高校卒業したばっかりってマジ！？
あいつすごいわ！！！
そして小野田！！！すごくない！？どこから見つけてきたんだ！！？？
JFLにあんな逸材がいたとは！？？
山根のシュートにはたまげたし未月はものすごい勢いで成長してるし！！
本当に楽しかったです。
続きを読む
