ランダムおすすめ記事

ホームページ作りました

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ディレクトリ内に入れているんですけどこれって本当に正しいのかなあと疑問に思ったんですよね。

スクリーンショット (205).png

こんな感じの構造でアプリケーションを作っています。 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/


実は画像を処理するコードだったのですがこれで特に問題なく動きました。 ありがとうございます!!!

2019年ルヴァンカップ第5節 湘南ベルマーレ対V・ファーレン長崎 鈴木冬一プロ初ゴールでベルマーレが最終節に望みを繋ぐ

行ってきましたよ!!!ルヴァンカップ!!!

見られなかった人も多かったと思いますがこの試合!!

良かったです!!!

 

 

続きを読む

【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>



サガン鳥栖戦のMVPは大橋祐紀選手。そしていままで色々あった名古屋戦の歴史を振り返ろう

こんにちは!!今回はやたらと色々ある名古屋戦の歴史を振り返ります。

その前に鳥栖戦のMVP投票。ちょっとブログ更新まで日が空いたのと告知をミスって投票が少なかったので失敗したなあと思っています。

http://160.16.55.98/polls/11/results/

 

結果はこちらで!!

 

続きを読む