自動化無しに生活無し

WEBとかAIとかLinux関係をひたすら書く備忘録系ブログ

  • 【保存版】Ajax(jQuery)の仕組みと仕様

    本記事は、たびたび忘れがちなAjaxのパラメータや引数などの意味を思い返すための備忘録である。 let form_elem = "#form_area"; let data = new FormData( $(form_elem).get(0) ); let url = $(form_elem).prop("action"); let method = $(form_elem).prop("method"); $.ajax({ url: url, // リクエストの送信先 type: method, // 送信するリクエストのメソッド data: data, // 送信するデータ(FormDataオブジェクト型) processData: false, // dataに指定した内容をURLエンコードして送信(?page=2などの形式)にするかの指定。FormDataオブジェクトの場合はfalseを指定 contentType: false, ...
  • WebSocketとポーリング、ロングポーリングの違い【非同期通信と双方向通信】

    前説 非同期通信 非同期通信とは、2人以上のユーザーがそれぞれ自分たちの都合のいいタイミングでデータを受信し、通信をすることである。 同期通信とは、リクエストを送信した後、レスポンスを受け取るまで何もできない。 非同期通信ではリクエスト送信をJavaScriptに任せることで、リクエスト送信後からレスポンスを受け取るまでに、続けて処理を行うことができる。 この非同期通信を行うために使用する技術がAjaxであ ...
  • 【Django】Ajax(jQuery)でロングポーリングを実装させる【チャットサイトの開発に】

    Ajaxを使えば、ページを部分的に更新させることができる。 そして、setTimeoutを使うことで、指定した時間おきにページを部分的に更新することができる。 ただ、Ajaxによるリクエストとレスポンスを繰り返している(ただのポーリング)ようでは、ウェブサーバーに負担が掛かってしまう。 クラウドサーバーなどは死活問題で、負荷が増えると課金してサーバーの強化などを考慮しなければならない。 そこで、リクエスト ...
  • 素のJavaScriptのXMLHttpRequest(Ajax)で通信する【jQuery不使用】

    CSRFトークンを取得する POSTメソッドを送信する時必要になるCSRFトークン。 前もって取得しておく。下記コードをページロードと同時に実行する。 function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie !== '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].trim(); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } const csrftoken = getCookie('csrftoken'); ちなみに、このコードはDjango公式からの受け売りである。 https://docs.djangoproject.com/en/4.0/ref/csrf/ POSTメソッドを送信する 前項で取得したCSRFトーク ...
  • 【Django】Ajaxで複数枚の画像を一回のリクエストでアップロードする。

    経緯 例えば、1つのデータに対して、複数枚の画像を記録したい場合がある。 ECサイトの商品がその例で、1つの商品に対して、複数枚の画像を記録する必要がある。 しかも、商品に対して記録する画像の枚数が10枚以上になる可能性もあり、これを1つのモデルに画像フィールド10個などとしているようではDBの構造上の問題に発展する。 だからこのような場合は、商品モデルと商品画像モデルの1対多のリレーションを組むべきであ ...
  • 【Python】GoogleのISBNのAPIを使い、書籍の情報を手に入れる

    GoogleのISBN検索ができるAPIを使うことで、書籍の情報を簡単に手に入れることができる。 もちろん、書籍のサムネイルも取得可能。スクレイピングではないので、サイトの変化に合わせて手直しが必要になることもない。 アカウントの登録も不要 #! /usr/bin/env python3 # -*- coding: utf-8 -*- import requests try: result = requests.get("https://www.googleapis.com/books/v1/volumes?q=isbn:9784873117782") except: print("通信エラー") else: #返却されたJSONを辞書型に変換する。 data = result.json() print(data) print(data["items"][0]["volumeInfo"]) #書籍情報を手に入れる。 print(data["items"][0]["volumeInfo"]["title"]) print(data["items"][0]["volumeInfo"]["publishedDate"]) print(data["items"][0]["volumeInfo"]["authors"]) print(data["items"][0]["volumeInfo"]["description"]) print(data["items"][0]["volumeInfo"]["imageLinks"]["thumbnail"]) ...
  • 【Restful化】DjangoRestframeworkの導入・移行作業【ビュークラス継承元の書き換え、Serializerの運用】

    Restful化のためには、DjangoRestframeworkをインストールする必要がある。(素のDjangoでもAjaxでDELETE,PUT,PATCHメソッドの送信は可能だが、リクエストボディの読み込みに難があるため。) だが、素のDjangoで開発している状態であれば、コードの一部をDRF仕様に書き換えを行う必要がある。 本記事では、40分Djangoを元にDRF移行手続きを解説する。 予め ...
  • DjangoRestFrameworkは本当に必要なのか?【Restful化とAjaxでデータを送信するときの問題】

    結論 DjangoはデフォルトでRestfulに対応している(Ajaxを使ってPUT,DELETE,PATCHメソッドの送信ができる)。 ただし、PUT,DELETE,PATCHのリクエストボディを参照するのはやや複雑。 そのため、それらのメソッドを使ってリクエストを送信する場合、DRFを使ったほうが良い。 素のDjangoはRestfulに対応している AjaxでPUT,DELETE,PATCHメソッドを ...
  • 【jQuery】Ajaxで郵便番号検索を行う【通販サイトなどの住所登録に有効】

    通販サイトなどでは、郵便番号を入力すると、住所の入力を自動で行ってくれる。 本記事では郵便番号検索の実装を解説する。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="script.js"></script> </head> <body> <input id="postcode" type="text" name="postcode" placeholder="ここに郵便番号を入力する(ハイフン不要)"> <input id="postcode_search" type="button" value="郵便番号検索"> <input id="prefecture" type="text" name="prefecture" placeholder="都道府県"> ...
  • 【Django】PUT、PATCH、DELETEメソッドのリクエストを送信する【Django REST Framework】

    前提 まず前提として、PUT、PATCH、DELETEのメソッドはHTMLのformタグから送信することはできない。 例外として、Laravelでは下記のようにしてformタグでDELETEメソッドを送信するが、Djangoではそれは通用しない。これから解説するDjango Rest Frameworkを使用しても。 <form action="{{ route('topics.destroy',$topic->id) }}/" method="POST" style="display:inline-block;"> {{ csrf_field() }} {{ method_field("delete") }} <button class="btn btn-outline-danger" type="submit">削除< ...