自動化無しに生活無し

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

フロントサイド

  • EasyTimer.jsを使ってストップウォッチとタイマーを作る
    以前、下記記事でストップウォッチとタイマーを作ったが、 JavaScript(jQuery)でストップウォッチとタイマーを作る【勉強や運動の記録などに】 使いにくい。 だから、タイマーとストップウォッチのライブラリを実装する。 かなり軽量で、イベントのセットもできるEasyTimer.jsを使う。 ストップウォッチの実装 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>ストップウォッチ</title&g ...
    続きを読む

  • 【Chart.js】棒グラフと折れ線グラフの複合型で、左右の横軸にタイトルと目盛を表示
    注意 Chart.jsには後方互換性が無い。 本記事で解説しているChart.jsのバージョンは3.7.1であり、それ以前のバージョン、もしくはそれ以降のバージョンでは正常に動作しない場合があるのであしからず。 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> <!--chart.jsのCDN--> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script> <script src="script.js"></script> </head> <body> <h1 class="bg-primary text-white">Chart.jsのサンプルコード</h1 ...
    続きを読む

  • Tempermonkeyを使ってGitHubのリポジトリ削除を簡単にする。
    GitHubのリポジトリを作りすぎた。 順次消していこう。 そういう時、こういうダイアログが出てくる。 この確認の入力作業がめんどくさい。 確認するまでもなく、すぐにリポジトリを削除したい時、Tempermonkeyを使ってこの入力作業をスキップしていく。 コード // ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://github.com/[ここにGitHubのユーザー名を]/* // @icon https://www.google.com/s2/favicons?sz=64&domain=github.com // @grant none // @require http://code.jquery.com/jquery-3.4.1.min.js ...
    続きを読む

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