昨日のマリノス戦の謎だった判定シーンを整理してみたよ
微妙なジャッジに猛抗議も…湘南FW武富は“説明”に納得「しょうがない」
https://web.gekisaka.jp/news/detail/?275796-275796-fl
こんな記事がありました。
僕はこのシーン真横から見ていたので正直謎判定だったのですが映像があったので見返すと確かにこの記事の通りかなと。
ただ運用はおかしかったよねと思いました。
このシーンを一度整理してみようと思いブログを書きました。
続きを読む
2019年J1第12節 湘南ベルマーレ対浦和レッズのMVPは?菊地俊介に!でもみんなで掴んだ勝利だった!
2019年J1第12節 湘南ベルマーレ対浦和レッズのMVPは?
http://160.16.55.98/polls/14/results/
というテーマでMVP投票を行いました!
MVPは28票を獲得した菊地俊介選手に!!!
続きを読む
2019 J1第12節 湘南ベルマーレ対浦和レッズ 奇跡を起こしたハーフタイム。
鳴り響く怒号。ブーイング。収まるはずがない。許せなかった。
ふざけるんじゃねえぞ。
しかしその時聞こえてきたのは・・・。
「緑と青の勇者湘南 さあ今日も行こう 勝利目指して」
「緑と青の勇者湘南 ゴールを奪って 勝利をつかめ」
それは奇跡を起こした夜だった。
続きを読む
Django内でJavaScriptを使うときのファイルや画像の置き場所のベストプラクティスは結局何なんだ!?
以前この記事でDjango内でJavaScriptを使った時のことをまとめました。 https://qiita.com/sr2460/items/ee516e494ccc11baed6b
その後色々なサンプルプログラムをつなぎ合わせていじっていたのですがここで疑問が生じました。 JavaScriptを使うときのファイルや画像の置き場所。 基本的にstaticディレクトリ内に入れているんですけどこれって本当に正しいのかなあと疑問に思ったんですよね。
こんな感じの構造でアプリケーションを作っています。 staticディレクトリの中にjavaScriptディレクトリを設置。 その下のimagesディレクトリには画像。Scriptsディレクトリにはjsファイル。 soundディレクトリにはmp3などの音楽ファイルが入っています。
続きを読むwindow.onloadは同じページで複数回使用することができないのでaddEventListenerを使用する必要がある。
参考記事 https://www.sejuku.net/blog/19754
JavaScriptでwindow.onloadを使用する機会があったのですが同じページで二回使ったらものの見事に動きませんでした。
function init() {
imgs = new Array(3);
imgs[0] = new Image(250, 207);
imgs[0].src = "{% static "javascript/images/pic0.jpg" %}"
imgs[1] = new Image(250, 207);
imgs[1].src = "{% static "javascript/images/pic1.jpg" %}"
imgs[2] = new Image(250, 207);
imgs[2].src = "{% static "javascript/images/pic2.jpg" %}"
}
window.onload = init;
このwindow.onloadは複数使うと一番最後に記載したものだけが反映されます。
というか関数を代入するという構成になっているから関数を代入するたびにその前に代入したものが消えてしまってるんでしょうね。
というわけでこれはこう書き換えます。
window.addEventListener("load",function() { imgs = new Array(3); imgs[0] = new Image(250, 207); imgs[0].src = "{% static "javascript/images/pic0.jpg" %}" imgs[1] = new Image(250, 207); imgs[1].src = "{% static "javascript/images/pic1.jpg" %}" imgs[2] = new Image(250, 207); imgs[2].src = "{% static "javascript/images/pic2.jpg" %}" }, false) <br>
function init()を削除して、window.addEventListener("load",function() に書き換えます。無名関数になっていますね。
そして最後に, false)を加えます。
無名関数になって代入もしようがないのでwindow.onload = init;も当然削除ですね。
window.onloadを複数回使いたいときはこのような書き方ならばOK。
試してみてください。
補足 コメントをいただいたのでコードを修正しました。
window.addEventListener("load",function()
を
document.addEventListener('DOMContentLoaded', function()
参考記事 https://noumenon-th.net/programming/2017/06/11/domcontentloaded/
実は画像を処理するコードだったのですがこれで特に問題なく動きました。
ありがとうございます!!!
【djangoとJavaScript】django内でJavaScriptを使って画像を変化させたい
現在3ステップでしっかり学ぶ JavaScript入門という本を使ってJavaScriptを勉強しています。 というのもDjangoアプリケーションでいいねボタンを作っているのですがそれをAjaxを使って非遷移でカウンターを増やしたいのです・・・が全くうまくいかず。 これは付け焼刃の知識では仕方がないのでJavaScriptを学び、かつDjango上でJavaScriptを実際に動かす工程を踏まなきゃだめだな・・・と思ったわけです。
というわけでまず上記の教科書にこんなコードが掲載されていました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> <title>イメージの操作</title> <style type="text/css"> body { text-align: center; } </style> <script type="text/javascript"> var imgs; function init() { imgs = new Array(3); for (var i = 0; i <= (imgs.length - 1); i++) { imgs[i] = new Image(250, 207); imgs[i].src = "images/pic" + i + ".jpg" } } window.onload = init; var num = 0; function changeImg() { document.myImg.src = imgs[num].src num++; if (num == 3) num = 0; } </script> </head> <body bgcolor="#FFFFFF"> <img src="images/off.jpg" name="myImg" width="250" height="207" onclick="changeImg()" onmouseout="this.src='images/off.jpg';" > </body> </html>
まずDjangoの画像の配置ですが2つの方法があります。 以下のようにプロジェクト直下にmediaディレクトリを作成し、そこに画像を配置します。 画像へのパス↓
\mysite\media\off.jpg
つまりDjango使用する際には
imgs[i].src = "images/pic" + i + ".jpg"
を
imgs[i].src = "media/pic" + i + ".jpg"
に変更し
onmouseout="this.src='images/off.jpg';"
を
onmouseout="this.src= 'media/off.jpg';"
に変更すれば良いのです。
ただ、普通は共通部分mediaではなくアプリケーションごとにcssとimagesを設けてそこの画像を操作しますよね。
僕もチャレンジしたのですがやったら意外とめんどくさかったです。
とはいえ一応やり方を。
まずはアプリケーション内にstaticディレクトリを作成しその中に画像を配置します。 パスは以下のようになります。
\mysite(プロジェクト名)\javascript(アプリケーション名)\static\javascript(staticディレクトリの中には必ずアプリケーション名を書いたディレクトリを入れること)\images\off.jpg
ここで今度は
imgs[i].src = "images/pic" + i + ".jpg"
を
imgs[i].src = "javascript/static/javascript/images/" + i + ".jpg"
のように変更すれば良いような気がしますが実はこれはうまくいきません。 まずstaticディレクトリを呼び出すには{% load static %}と一文をテンプレート内に表記する必要があります。 さらにstaticルートを呼び出すためには"{%static ~ %}"という構文を使うため
imgs[i].src = "{% static "javascript/images/pic" + i + ".jpg" %}"
とすれば良いと思ったのですが変数iの部分が動作しませんでした。
ここでいろいろ聞いた結果JavaScriptの変数はdjangoのレンダリング時には渡せないということでやるならすべてdjangoで書き換える必要があるようでした。
・・・。
それはいずれはやりたいですが今は勉強したばかりのJavaScriptをDjango上で動作させるということが主目的。
一旦それは保留です。
結局画像部分はループ構造を使わず
<script type="text/javascript"> var imgs; function init() { imgs = new Array(3); imgs[0] = new Image(250, 207); imgs[0].src = "{% static "javascript/images/pic0.jpg" %}" imgs[1] = new Image(250, 207); imgs[1].src = "{% static "javascript/images/pic1.jpg" %}" imgs[2] = new Image(250, 207); imgs[2].src = "{% static "javascript/images/pic2.jpg" %}" }
としました。
最終的にこんなコードに。もう少し研究の余地がある気がしますね、これ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'javascript/style.css' %}"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>JavaScriptの実験</title> </head> <body> <h1>JavaScriptの実験</h1> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> <style type="text/css"> body { text-align: center; } </style> <script type="text/javascript"> var imgs; function init() { imgs = new Array(3); imgs[0] = new Image(250, 207); imgs[0].src = "{% static "javascript/images/pic0.jpg" %}" imgs[1] = new Image(250, 207); imgs[1].src = "{% static "javascript/images/pic1.jpg" %}" imgs[2] = new Image(250, 207); imgs[2].src = "{% static "javascript/images/pic2.jpg" %}" } window.onload = init; var num = 0; function changeImg() { document.myImg.src = imgs[num].src num++; if (num == 3) num = 0; } </script> </head> <body bgcolor="#FFFFFF"> <img src= "{% static "javascript/images/off.jpg" %}" name="myImg" width="250" height="207" onclick="changeImg()" onmouseout="this.src='{% static "javascript/images/off.jpg" %}';" > <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>