自動化無しに生活無し

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

フロントサイド

  • サイトのアイコンを指定して、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 ...
    続きを読む

  • CSS3とHTML5のタブシステムをtransitionでアニメーション表示に仕立てる
    CSS3とHTML5だけでタブを作り、複数のページを表示させる【JS不要】で作ったタブシステムは瞬間的に切り替わるので、少し野暮ったい。 他にアニメーションを多用したサイトであれば、タブシステムも同様にアニメーションを実装するべきかと思われる。そこで本記事ではその解説を行う。 タブシステムの基本形(改修) 従来型は、スマホ表示になると、折り返して表示していたので、横スクロールに仕立てる。 まずHTML。 <!DOCTYPE ...
    続きを読む

  • 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ライブ ...
    続きを読む