自動化無しに生活無し

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

JavaScript

  • 【Leaflet.js】地図をクリックしてマーカーを配置した時、古いマーカーを削除する
    以前紹介したLeaflet.js+OSMでマッピングアプリを作る記事 DjangoでOpenStreetMap(OSM)とleaflet.jsを使ってマッピングアプリを作る では、2度以上地図をクリックすると、前にクリックして配置されたマーカーが残ってしまう問題があった。そこで、今回はこの古いマーカーを削除して、新しくクリックされた位置にマーカーを配置させる。 ソースコード 要するに、マーカーを配置したと ...
    続きを読む

  • 【Django】canvasで描画した画像をAjax(jQuery)で送信【お絵かきBBS、イラストチャット、ゲームのスクショ共有などに】
    例えば、チャットサイト、掲示板サイトでユーザーが描画したイラストを投稿できる形式にしたい時。 ユーザーが手元の端末でペイントツールを起動して画像を保存して、サイトに添付して貼り付けるのはやや面倒。それだけでなく、サイト独自のレギュレーション(お題に沿ってイラストを付け加える形式、指定された色しか使ってはいけないなど)がある場合、ユーザーのペイントツールでそれを強いるのは不可能に近い。 そこで、サイト上 ...
    続きを読む

  • 【jQuery】ボタン式の横スライダーを自作する【通販サイト・コンテンツ共有サイトなどに】
    通販サイトなどでよくある。横スクロール型のスライダーを作る。slick.jsなどを使えば簡単に実現できるが、かえって複雑なので、自作した。 ソースコード HTML。jQueryを読み込み、別途JavaScriptとCSSを読み込む。 <!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> <!--jquery読み込み--> <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> <div class="preview_control_area"> <div class="data_preview_area"> <div class="data_preview_frame"><div class="data_preview_content&qu ...
    続きを読む

  • 【jQuery】HTML、CSS、JS合わせて100行以内でカルーセルを自作する【自動スライド】
    カルーセルと言えば、slick.js等のライブラリがあるが、たかだか自動的にスライドするだけのシンプルなカルーセルをサイトの一部分に実装させるためだけにライブラリをインストールさせるのはやや大げさだ。 そこで、今回はカルーセルをjQueryを使用した上で自作する。書く必要のあるコードはHTMLが約30行、CSSが約20行、JSが約40行の合計100行足らずで実現できる。 ソースコードと解説 HTML。C ...
    続きを読む

  • FormDataをformタグではなく、オブジェクトにキーと値をセットした上でAjax送信
    タイトルの説明。 通常、Ajaxでサーバーにリクエストを送信する時、下記のようにFormDataクラスを使用して送信する。 const form_elem = "#form_area"; const data = new FormData( $(form_elem).get(0) ); const url = $(form_elem).prop("action"); const method = $(form_elem).prop("method"); $.ajax({ url: url, type: method, data: data, processData: false, contentType: false, dataType: 'json' }).done( function(data, status, xhr ) { //Done }).fail( function(xhr, status, error) { //Fail }); しかし、送信したいデータがいつもこのようにformタグで囲まれているとも限らない。 そこで、FormDataクラスに引数を入れずにオブジェクトを作り、オブジェクトにキーと値をセットしてAja ...
    続きを読む

  • Javascriptを使ってCSVを生成してダウンロードする
    CSVの生成とダウンロードであれば、あえてサーバーサイドでやらなくても、JavaScriptだけでことは足りる。 ソースコード 下記関数を実行すれば良い。 //現在スタックされているデータをCSVに変換してダウンロードする function create_csv(){ //文字列型で二次元配列のデータ data = [ ["A","B","C"], ["A1","B1","C1"], ["A2","B2","C2"], ["A3","B3","C3"], ["A4","B4","C4"], ] console.log(data); //作った二次元配列をCSV文字列に直す。 let csv_string = ""; for (let d of data) { csv_string += d.join(","); csv_string += '\r\n'; } //ファイル名の指定 let file_name = "test.csv"; //CSVのバイナリデー ...
    続きを読む

  • video.jsを実装させ、コントローラをカスタムする【Brightcove Player】
    通常、videoタグを使用する場合、controls属性を付与することで、動画の操作(再生、音量調整等)が可能なコントローラを表示できる。 しかし、再生速度の操作やコントローラの装飾関係を一から作っていくには時間がかかりすぎる。 そこで、videoタグの拡張が可能なvideo.jsというライブラリを実装させる。すでにAmazon等の大手サイトでも採用実績のある完成度の高いvideoタグ専用のjsライブ ...
    続きを読む

  • JavascriptからCookieを扱う【動画の設定音量の記録と読み込み】
    JavaScriptからCookieを扱う。これで、サイトのデータをユーザーのブラウザに保存できる。 Cookieにvideoタグで設定した音量情報を格納、読み込みするコード 実例を交えながら解説する。下記はvideoタグで指定した音量をCookieに記録する。 window.addEventListener("load" , function (){ const video = document.querySelector("video"); video.addEventListener("volumechange",(event) => { document.cookie = "volume=" + decodeURIComponent(event.target.volume) + ";Path=/single;SameSite=strict"; }); set_video_volume(); }); function set_video_volume(){ let cookies = document.cookie; console.log(cookies); let cookiesArray = cookies.split(';'); let volume = 0; for(let c of cookiesArray) { console.log(c); let cArray = c.split('='); if( cArray[0] === "volume"){ volume = Number(cArray[1]); console.log(volume); break; } } const video = document.querySelector("video"); video.volume = volume; } Cookie ...
    続きを読む

  • jQueryのコードをJavascriptに書き換える【セレクタ、属性値の参照、イベントなど】
    jQueryに依存したコードをそのままにするのは再利用性に欠け、開発効率にも関わる。そこで、今回はjQueryのコードを適宜javascriptに書き換える。 セレクタ まずは基本のセレクタ以下のように書き換える。 var test = $(".test"); //↓以下に書き換え var test = document.querySelectorAll(".test"); //←全ての.textクラスの要素を抜き取る var test = document.querySelector(".test"); //←.testクラスの1番最初の要素を抜き取る jQueryが提供するメソッドや属性などは使用できなく ...
    続きを読む

  • HUGOにシェルスクリプトとJavaScriptの記事検索機能を実装させる
    タイトルの通り。 静的サイトジェネレーターのHUGOはサーバーサイドのスクリプトが存在しない(全てフロント言語)。そのため、検索機能を実装させるとなると、検索対象と検索機能の全てをフロントに記述する必要がある。フロントで完結する検索機能に必要になるのが、JavaScript。 それから、検索対象である記事の文字列をJSが読み取れる形式でジェネレートしてあげる必要もある。その際にコマンド一発でジェネレー ...
    続きを読む