自動化無しに生活無し

WEB開発関係を中心に備忘録をまとめています

  • 【git/GitHub】コマンドと使い方の一覧
    • 作成日時:
    • 最終更新日時:
    • Categories: others
    • Tags: git GitHub
    後に追記予定あり。 必要と思われるものから順に、解説サイトから抜粋して並べている。 基本操作編 これができれば、作ったコードをGitHubに公開できる。 リポジトリを作る git init インデックスする(コミットするファイルを記録) 全てのファイルをインデックスする場合はこうする git add . コミットする git commit -m "ここにコミットのメッセージを記録する" 【補足1】ユーザー情報を入力していないため、コミットできな ...
    続きを読む

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

  • 【Django】カスタムユーザーモデルに記録した自分のユーザー情報を編集する【ユーザー情報変更画面に】
    • 作成日時:
    • 最終更新日時:
    • Categories: サーバーサイド
    • Tags: Django
    Djangoでは新規会員登録したとき、記録できるのはユーザーIDとパスワードだけで、会員登録フォームの追加をしない限り、姓名の記録はできない。 仮に新規会員登録した時にフォームが与えられていたとしても、後にその編集をするページがなければ仕方ない。(例えば、姓名が変わった時に変更する手続きをするフォームページを用意していないと、後々問題になる) そこで、本記事ではユーザー情報を編集するページを作る方法を ...
    続きを読む

  • 【jQuery】数値入力フォームを押しっぱなしで入力する仕様に仕立てる
    以前、『【jQuery】数値入力フォームをボタンで入力する仕様に仕立てる』で解説したフォームを、ボタン押しっぱなしでも入力できるように仕立てる。 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> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <form action=""> <div class="spinner_area"> <input class="spinner" type="number" value="0" max="10" min="0"> <button class="spinner_button" type="button" name="minus" value="-1">ー</button> <button class="spinner_button" type="button" name="plus" value="1" >＋</button> </div> </form> </body> </html> CSS .spinner_button{ user-select: none; cursor:pointer; padding:0.5rem; width: auto; vertical-align: middle; } .spinner_area input{ padding: 0.5rem; border: 0.1rem solid gray; border-radius: 0.25rem; font-size: ...
    続きを読む

  • django-channelsを使ってWebSocketを実現させる【チャットサイト開発に】
    django-channelsのチュートリアルに倣って、WebSocketのチャットサイトを作った。 とても実装難易度が高い。実装手順の備忘録として本記事をまとめる。 解説 ライブラリのインストール pip install django channels daphne djangoとdjango-channels、それからdaphne(ダフネ)をインストールする。 daphneは ASGI（Asynchronous Server Gateway Interface）に準拠したサーバー。 config/settings.py """ Django settings for ...
    続きを読む

  • 【Django】セッションの有効期限をセット、もしくはブラウザを閉じた時にセッションを無効化【settings.py】
    セキュリティを担保したいサイトであれば、ブラウザが閉じてもセッションが残るデフォルトのDjango設定を疎ましく思うだろう。 そういう時は、settings.pyからセッションの有効期限の設定もしくは、ブラウザの終了を検知して無効化する設定を施せばよい。 セッションに有効期限をセットする【単位:秒】 例えば60秒後にセッションを切って、再ログインを要求させる場合はこうする。 SESSION_COOKIE_AGE = 60 デフォルトでは2週間にな ...
    続きを読む

  • 【Leaflet.js】半径5km圏内の領域に円を描画する【circle】
    半径5km圏内に円を描画する。これで指定したポイントからの距離がつかめる。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>コメント付きマップ</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> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <script src="script.js"></script> <style> #map { height:90vh; } </style> </head> <body> <h1 class="bg-success text-white text-center">コメント付きマップ</h1> <main> <div class="row mx-0"> <div class="col-sm-6"> <div id="map"></div> </div> <div class="col-sm-6"> <input id="set_gps" type="button" value="GPSを使って入力"> <form ...
    続きを読む

  • 【Leaflet.js】クリックした地図上に画像を配置する【overlays】
    用途がいまいち思いつかないが、leaflet.jsでは地図上に画像を描画する事ができる。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>コメント付きマップ</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> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <script src="script.js"></script> <style> #map { height:90vh; } </style> </head> <body> <h1 class="bg-success text-white text-center">コメント付きマップ</h1> <main> <div class="row mx-0"> <div class="col-sm-6"> <div id="map"></div> </div> <div class="col-sm-6"> <input id="set_gps" type="button" value="GPSを使って入力&quo ...
    続きを読む

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

  • Ubuntu20.04にNginxとPHP7.4をインストールしてHelloWorldをする
    5年以上前にやったきり、完全に忘れているNginxでPHPを動かす方法。 本記事ではその手順をまとめる。 必要なパッケージのインストール sudo apt install nginx php php-fpm Nginxはサーバー、phpはPHP処理系、php-fpmはNginxから動作させるために必要なもの Nginxの設定 /etc/nginx/sites-available/defaultを書き換える。 sudo vi /etc/nginx/sites-available/default TODOと書かれた場所だけ編集する。 ## # You should look at the following ...
    続きを読む