自動化無しに生活無し

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

フロントサイド

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

  • 【OSM+leaflet.js】ブラウザからGPS(位置情報)を取得し、マーカーを配置させる
    ブラウザから位置情報を取得し、leaflet.jsでマーカーを配置させる。 index.html 今回は、leaflet.jsを外部のファイルにまとめた。こうすることでleaflet.jsの追加機能を組みやすくなると思う。 <!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">コメント ...
    続きを読む

  • 【HTML】ダウンロードのダイアログを表示させたい場合、aタグにはdownload属性を付与する
    小ネタ。 例えば、ファイルを共有するウェブアプリを作る時、ファイルをリンクタグでダウンロードする仕様に仕立てる。 しかし、それが画像やPDF等のブラウザで表示できるファイルの場合、ダウンロードのダイアログが表示されず、ファイルそのものが表示されてしまう。 <a href="sample.pdf">ダウンロードする</a> そこで、aタグにdownload属性を付与する。 <a ...
    続きを読む

  • 【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> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="script.js"></script> </head> <body> <form action=""> <input type="number" name="amount" value="0" readonly> <input type="button" name="minus" value="減らす"> <input type="button" name="plus" value="増やす"> </form> </body> </html> JavaScript window.addEventListener("load" , function (){ $("[name='plus']").on("click", function(){ amount_add(this,true); ...
    続きを読む

  • 【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="都道府県"> ...
    続きを読む

  • 【jQuery】selectタグで年月日検索をする【うるう年対応】
    年月日検索をする時、年だけ、月だけ指定して検索する場合がある。この場合、年月日全てを指定するflatpickrでは対応できない。 この場合はselectタグを使用して検索をする。だが、月ごとに日数は異なる。うるう年では2月は29日になる。それに対応させるためには、JavaScriptを書く必要がある。 本記事ではjQueryを使用して、なるべく短く年月日検索を行うselectタグを作る。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta ...
    続きを読む

  • HTML5とCSS3だけでAmazon風の星レビューのフォームを再現する【ホバーした時、ラジオボタンのチェックされた時に星を表示】【flex-direction:row-reverseで逆順対応可】
    以前、サーバーサイドで1から5のいずれかの数値を受付、DBに保存する方法を実践したが、フロント系ではそれをもう少しおしゃれに実装させたい。 そういう時は、なるべくJavaScriptを使用せず、HTMLとCSSだけで表現するのがベターなやり方だと個人的には思う。 だからこそ、今回も同様にHTMLとCSSだけでレビューの星を入力するフォームを再現した。 マウスをホバーした時、星が塗りつぶされ、外れると星が ...
    続きを読む

  • chart.jsでグラフ表示幅と高さを指定する。
    まず、公式によると下記の方法ではchart.jsの横幅と高さ指定は通用しない。 <canvas id="graph" height="40vh" width="80vw"> 他にもクラス名を指定して、そのクラス名に幅などの装飾を施す方法も通用しない。 対策 対策1:親要素でstyle属性にposition:relativeとwidth及びheightを合わせて指定する。 クラス名にCSSで装飾を施すのではなく、親要素のstyle属性に指定しなければうまく行かないので注意。 <div style="position:relative;width:250px;height:250px;"> <canvas id="graph"></canvas> </div> 対策2: ...
    続きを読む

  • HTMLのformタグで送信(submit)をする際に、確認をとった上で送信を行う【onsubmit属性】
    例えば、下記のような削除ボタンであれば、削除ボタンが押されると同時に削除が実行される。 <form action="" method="POST"> <!--CSRF_token--> <input class="btn btn-outline-danger" type="submit" value="削除"> </form> これでは間違えて押してしまった時に取り返しが付かない。 そこで下記のようにformタグにonsubmit属性を付与する。これで削除の送信前に確認をとった上で送信を行う事ができる。 <form action="" method="POST" onsubmit="if(confirm('本当に削除し ...
    続きを読む

  • 【JavaScript】Chart.jsでグラフを描画する【棒グラフ、円グラフ、折れ線グラフ】
    インストールとチュートリアル 最新版のCDNなら以下サイトから入手できる https://www.jsdelivr.com/package/npm/chart.js?path=dist とりあえず試したい場合は下記CDNをインストールする。(※一部仕様が現行バージョンと異なるため注意) <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script> 続いて、グラフを表示させたい場所に下記、canvasタグを配置。 <canvas id="graph"></canvas> これで準備完了。後は、次項以降のJavaScriptを発動させ、任意のグラフを描画させる。 棒グラフ 公式から拝借。 実行させるJavaScriptが下記。 const ctx = ...
    続きを読む