自動化無しに生活無し

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

HTML

  • 【HTML】inputタグで画像を複数枚指定する【multiple】
    画像を複数枚指定できるようにする。 <form method="POST" enctype="multipart/form-data"> <!-- CSRF token --> <input name="content" type="file" multiple> <input type="submit" value="送信"> </form> このフォームで指定された画像は、下記のように同じname属性の値のフォームが複数存在する状態と同じ。 <form method="POST" enctype="multipart/form-data"> <!-- CSRF token --> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <!-- 略 --> <input type="submit" value="送信"> </form> そのため、例えばDjangoでは .getlist() を使って取り出す。 request.FILES.getlist("content") ...

  • inputタグのtype='file'で画像のサムネイルを表示させる
    fontawesomeを使用しているので、アイコンの表示は別途CDNをインストールしておいてほしい。 ソースコード HTML <label class="image_input_area"> <input class="image_input" type="file" name="icon" accept="image/*"> <div class="image_input_icon"><i class="fas fa-image"></i></div> <img class="image_input_preview" src="" alt=""> </label> CSS .image_input_area { display:inline-block; border:dashed 0.2rem var(--gray); width:5rem; height:5rem; position:relative; cursor:pointer; } .image_input{ display:none; } .image_input_preview{ width:100%; height:100%;position:absolute; } .image_input_icon{ width:100%; height:100%;position:absolute; } .image_input_icon i{ font-size:2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } JavaScript(jQuery) $(".image_input").change(function() { const label = $(this).parent("label"); const file = $(this).prop("files")[0]; // 画像以外は処理を停止 if (! file.type.match("image.*")) { $(this).val(""); return; } // 画像表示 const reader = new FileReader(); reader.onload = function() { label.children(".image_input_preview").prop("src", reader.result ); } reader.readAsDataURL(file); }); 【別解】JavaScript(バニラ) window.addEventListener("load" , function (){ document.addEventListener("change", (event) => { // type="file ...
    続きを読む

  • position:relativeとabsoluteとtransform:translateを使ったセンタリング【どんな画面幅でも中央に配置する】
    例えば、サイトのタイトルなど、どんな状況でも必ず中央に配置したい場合があるだろう。 そういう時は、positionとtransform:translateを使用することで解決できる。 ソースコード まずは下記のソースコードを動かしてもらいたい。 `<!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> <style> body{ /* ブラウザのデフォルトでmarginが付いているので消しておく。*/ margin:0; } .content_area { position:relative; /* content_areaの高さをブラウザの縦幅全開ま ...
    続きを読む

  • 【JavaScript】囲碁ライブラリGliftを使ってSGF形式の詰碁WEBアプリを作る
    gliftとは gliftはJavaScript囲碁ライブラリである。 http://www.gliftgo.com/ 囲碁のルールに加え、SGFに対応しているので、棋譜の入出力ができる。 ソースコード glift.jsは https://github.com/artemispax/glift/releases/tag/v1.1.2 からDL SGFはここから拝借した。 <!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="glift_1_1_2.min.js"></script> </head> <body> <div id="test" style="height: 500px;"></div> <script> gliftWidget = glift.create({ sgf: { sgfString: "(;AW[is]AW[ir]AW[iq]AW[ip]AB[js]AB[jr]AB[jq]AB[kp]AB[lp]AB[lq]AB[lr]AB[ms]AW[mr]AW[mq]AW[ks]AW[mp]AW[mo]AW[lo]AW[ko]AW[jp]AW[or]C[Can black live?]AP[goproblems](;B[kr]C[];W[ns]C[Yes, white can't pushRIGHT](;B[ls]C[RIGHT])(;B[nq];W[ls];B[ms];W[ls]))(;B[ls];W[kr]C[No, this is mistake. Black can't make 2 eyes at now.])(;B[nr];W[ls](;B[kr];W[ls];B[ks];W[nq];B[ns];W[os];B[ls];W[kq])(;B[ns];W[nq];B[kr];W[ls];B[ks];W[os];B[ls];W[kq])))", widgetType: 'CORRECT_VARIATIONS_PROBLEM', }, divId: "test" }); </script> </body> </html> 動かすとこうなる。 結論 これで棋譜や詰碁を管理するウェブアプリが作れる。 DBにSGFを文字列 ...
    続きを読む

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

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