自動化無しに生活無し

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

フロントサイド

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

  • サイトのアイコンを指定して、Favicon 404 NotFound問題を解決する【フリー素材使用】
    F12キーを押してコンソールを開き、JavaScriptの挙動を確かめる時。目につくのが、favicon.ico NotFoundという赤字の警告。 この警告はサイトのアイコンを設定していないことによって発生する。つまり、このブログのようにアイコンを設定すれば、警告は出ないということだ。 アイコンを設定する。 HTMLのheadタグ内に下記を記入する。 <link href="img/favicon.ico" rel="icon"> まず、アイコンのファイル名は必ずfavicon. ...
    続きを読む

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

  • HUGOでSNS等のシェアリンク(シェアボタン)をブログ内に配置して、PVを増やす【Twitter、Facebook、はてなブログ、LINE】
    HUGOでもシェアリンク(シェアボタン)を設置できる。HUGOのパラメータ変数を用意する必要があるので、慣れていないと難易度が高いが。 ソースコード 記事単一表示ページにて下記のHTMLを書く <div class="article_share_area"> <h2>シェアボタン</h2> <a class="article_share_link link_twitter" target="_blank" rel="nofollow noopener noreferrer" href="https://twitter.com/share?url={{ .URL | absURL }}&text={{ .Title }}">Twitter</a> <a class="article_share_link link_line" target="_blank" rel="nofollow noopener noreferrer" href="https://social-plugins.line.me/lineit/share?url={{ .URL | absURL }}">LINEで送る</a> <a class="article_share_link link_facebook" target="_blank" rel="nofollow noopener noreferrer" href="https://www.facebook.com/sharer/sharer.php?u={{ .URL | absURL }}">Facebook</a> <a class="article_share_link link_hatena" target="_blank" rel="nofollow noopener noreferrer" href="https://b.hatena.ne.jp/add?mode=confirm&url={{ .URL | absURL ...
    続きを読む

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

  • CSS3とHTML5だけでモーダルダイアログを作る【JS不要】
    モーダルダイアログもとどのつまり、単なる表示非表示なので、HTMLとCSSだけで再現できる。 checkboxとlabelタグを使えば良いだけの話である。 ソースコード まず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="style.css"> </head> <body> <label class="modal_label" for="modal_chk">新規作成</label> <input id="modal_chk" class="modal_chk" type="checkbox"> <div class="modal_body"> <label class="modal_bg" for="modal_chk"></label> <div class="modal_content"></div> </div> </body> </html> 2つのlabelタグのfor属性はいずれもcheckboxのI ...
    続きを読む

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