自動化無しに生活無し

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

フロントサイド

  • 【JavaScript】動的に要素が変化した時に何か処理をさせたいならMutationObserverを使う
    例えば、特定の要素内のHTMLがJavaScriptの処理によって変わった時。 こんな時に何か処理を実行したい場合、MutationObserverを使うと良い。 ソースコード //特定の要素が動的に変化した時、何らかの発動させる let body = document.getElementsByTagName('body')[0]; let target = new MutationObserver(function(){ detail_sortable() }); target.observe(body, { "childList":true,"subtree":true }); 結論 例えば、Ajaxが発動して、ページがレンダリングされた時に何かを発動させることができる。(Ajaxのdoneの時に処理を書くという方法もあるが ...
    続きを読む

  • JavaScriptで並び替えをするならSortable.js【jQuery不要のライブラリ】
    CDN <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> 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://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> </head> <body> <div class="sort_area"> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">1</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">2</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">3</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">4</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">5</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">6</div> </div> <script> const sort_areas = document.querySelectorAll(".sort_area"); for (let area of sort_areas ){ new Sortable(area, { animation: 150, ghostClass: 'dragging', onEnd: function(){ console.log("ソート完了") }, }); } </script> </body> </html> 動かすとこうなる 結論 ソート終了時、onEndで何か処理を実行する事ができる。例えば、Ajaxとか。 ドラッグ中にクラスを割り当てる事ができるので、色を変えるとか色々できると思う。 詳細は公式にて。 https://sortablejs.github.io/Sortable/ ...

  • 【CSS3】チャットのウェブデザインを作る
    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"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="container"> <div class="mine_speech_bubble_area"> <div class="speech_bubble"></div> </div> <div class="others_speech_bubble_area"> <div class="speech_bubble"></div> </div> </main> </body> </html> Django用のHTML {% for topic in topics %} <div class="{% if topic.user.id == request.user.id %}mine{% else %}others{% endif %}_speech_bubble_area"> <div class="speech_bubble">{{ topic.comment|linebreaksbr }}</div> </div> {% endfor %} CSS .mine_speech_bubble_area{ text-align:right; } .others_speech_bubble_area{ text-align:left; } .mine_speech_bubble_area .speech_bubble { /* 自分が送った時は右下の角をつける */ background:lime; border-bottom-right-radius:0; } .others_speech_bubble_area .speech_bubble { /* 相手が送った時は左上の角をつける */ background:silver; border-top-left-radius:0; } .speech_bubble{ text-align:left; word-break:break-all; display:inline-block; max-width:80%; padding:0.5rem; margin:0.5rem 0; border-radius:1rem; } 動かすとこうなる。 ...

  • JavaScript(jQuery)でストップウォッチとタイマーを作る【勉強や運動の記録などに】
    記録系のウェブアプリに欠かせないストップウォッチとタイマー これをJavaScript(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> <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.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="script.js"></script> </head> <body> <div class="p-2 my-2"> <h2>タイマー</h2> <label><input id="timer_hour" type="number" min="0" max="99" value="0">時間</label> <label><input id="timer_minute" type="number" min="0" max="59" value="0">分</label> <label><input id="timer_second" ...
    続きを読む

  • 【JavaScript】.replace()で検索した文字列すべてを置換したい場合は正規表現を使う
    例えば、以下の文字列の,を に書き換えたいとする。 let data = "aaa,bbb,ccc"; 文字列の置換処理は.replace()で実現できるから、こうすれば良いと思いがちだが実は違う。 console.log(data.replace(","," ")); // aaa bbb,ccc デフォルトでは最初にヒットした文字列しか置換してくれない。検索した文字列を全て置換したい場合、このようにする。 console.log(data.replace( /,/g , " ")); // aaa bbb ccc ちなみにPythonでは.replace()を使うと全て置換してくれる。だから、Pythonでreplaceを使 ...
    続きを読む

  • JavaScript(jQuery)で神経衰弱
    canvas未使用、JavaScript(jQuery)で神経衰弱を作ってみた。 突貫で作ったためかなり雑ではあるが、トランプを使用したゲームに流用できそうだ。 デモページ カードの素材は ( https://opengameart.org/content/playing-cards-vector-png )より。ウラ面は自前で作った。 https://seiya0723.github.io/memory_cards_game/ ソースコード https://github.com/seiya0723/memory_cards_game 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> <style> img { width:200px; } </style> </head> <body> <table id="table"></table> </body> </html> JavaScript window.addEventListener("load" , function (){ // カードの画像: https://opengameart.org/content/playing-cards-vector-png //カードのデータ形式 var CARD_DATA = [ { "number":1,"src":"img/ace_of_clubs.png" }, { "number":1,"src":"img/ace_of_diamonds.png" }, { "number":1,"src":"img/ace_of_hearts.png" }, { "number":1,"src":"img/ace_of_spades.png" }, { "number":2,"src":"img/2_of_clubs.png" }, { "number":2,"src":"img/2_of_diamonds.png" }, { "number":2,"src":"img/2_of_hearts.png" }, { "number":2,"src":"img/2_of_spades.png" }, { ...
    続きを読む

  • JavaScript(jQuery)でQRコードを表示させる
    例えば、ユーザーの一部がPCでの操作をやめて、スマホで操作したいと思ったとする。 こういう時QRコードを表示させる、ブラウザのアドオンや機能を使えば良いが、ユーザーにそれを強いるのはやや酷である。 そこで、jQueryを使用して、QRコードを簡単に表示させると良いだろう。 コード <!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="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> <script> window.addEventListener("load" , function (){ let qrtext = location.href; let utf8qrtext = unescape(encodeURIComponent(qrtext)); $("#qrcode").html(""); $("#qrcode").qrcode({width:160,height:160,text:utf8qrtext}); }); </script> </head> <body> <div id="qrcode"></div> </body> </html> 動かすとこうなる。 結論 下記を参照。 https://github.com/jeromeetienne/jquery-qrcode ...

  • 【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: ...
    続きを読む

  • 【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 ...
    続きを読む