tmp.php

// TODO: 後で修正する

JavaScript

canvasで特定の幅で文字を折り返して表示する

やりたいこと canvasを使った文字の描画で、特定の幅で文字を折り返して表示したかった。 何も処理しないと↓みたいに文字が詰まって表示される 実装 ①文字を任意の文字数ごとに分割して配列に入れていく // 表示したいテキスト const src = "あ".repeat(30);…

canvasに表示した画像を丸で囲って表示する

やりたいこと canvasにdrawImage()で貼り付けた画像を正円で表示させたい(丸型にトリミングされたように表示させたい) やるまでは「quadraticCurveTo()でベジェ曲線使ってやらなかん感じ〜!?!?!?!数学できないよ〜!!」(数学関係あるかもわからな…

はてブロの記事が投稿から1年以上経過している場合にアラートを表示する

経緯 ありがたいことに投稿日から数年経過しても、検索からアクセスされてる記事がいくつかあるんだけど、情報が古いから○iitaみたいに この記事は公開日からn年以上が経過しています。情報が古い可能性がありますので十分ご注意ください。 っていう注意書き…

webpackのbuildでmain.js.LICENSE.txtを出力させない

webpackでproduction buildしたときdist/にmain.js.LICENSE.txtを生成させたくなかった const TerserPlugin = require("terser-webpack-plugin"); module.exports = { // ...省略 optimization: { minimizer: [ new TerserPlugin({ extractComments: false, …

textareaの入力文字数によって高さを可変にする

こういうやつ コード <textarea></textarea> <script> const textarea = document.querySelector('textarea'); textarea.addEventListener('input', () => { textarea.style.height = null; textarea.style.height = `${textarea.scrollHeight}px`; }); </script> 改行の数をカウントしてtextareaの…

親のチェックボックスに紐付けたチェックボックスを全てチェックする

親のチェックボックスのチェック状態を親に紐付けた子供のチェックボックスにも反映させたい ↓こういうやつ これをピュアJSで書いたときの備忘録 コード 解説 HTML 親チェックボックスに子供を紐付ける用のカスタムデータ属性(data-id="1")をつける (親であ…

ブラウザの Console をタイマー代わりに使う

電卓使いたいときにブラウザの Console 使う人間なので、タイマーも Console で完結させたかった 1秒ごとに Console に秒数を表示する let minutes = 0; const intervalId = setInterval(countMinutes = () => { ++minutes; console.log(minutes); }, 1000);…

Vue.js でファイルアップロードをする

Vue.js というより axios でファイルアップロードをしたかった 保存ボタンがなく、アップロード時にサーバーに送るのを想定 サーバーサイドのFWは Laravel を想定 <template> <div> <input type="file" ref="image" accept="image/*" name="image" @change="uploadImage" /> </div> </template> <script> import axios from "axios"; export default { name: "…

JSでブラウザの位置情報を取得する

(function () { if (!navigator.geolocation) { console.warn("Geolocation APIを利用できない環境"); return; } navigator.geolocation.getCurrentPosition( (positions) => { // 位置情報の取得成功時の処理 console.log(positions.coords.latitude, posit…

JSで任意の個数分の配列を作成する

PHPで言うところの range(1, 20) をやりたかったけどJSにはそれらしき機能がなく毎回調べているのでメモ [...Array(5).keys()] // [0, 1, 2, 3, 4] Array.from(Array(5).fill().keys()) // [0, 1, 2, 3, 4] indexを0以外から始めたいときはmapで足してあげる…

jQueryのDOM操作メソッド 〜要素の取得編〜

children - 指定した要素の1階層下の子要素を取得する find - 指定した要素の子孫要素を取得する closest - 指定した直近の親要素を取得 contents - 指定した要素の子要素のテキストを含み取得 next - 指定した要素の直後の兄弟要素を返す nextAll - 指定し…

アコーディオンメニューを開いたときにコンテンツの一番初めからスクロールさせる

scroll() list 余計な余白 var $scrollTarget = $("#scrollTarget"); var $scroll = $("#scroll"); var $scrollInt = $("#scroll").offset().top; $scrollTarget.hide(); $scroll.on("click",function(){ $scrollTarget.slideToggle("normal",function(){ if…

jQueryのDOM操作メソッド 〜要素の追加・削除編〜

after - 指定した要素の後ろに引数で指定した要素を追加 insertAfter - 指定した内容を引数で指定した要素の後ろに追加 append - 指定した要素の中の後ろに引数で指定した要素を追加 appendTo - 指定した内容を引数で指定した要素の中の後ろに追加 before - …

jQueryのDOM操作メソッド 〜エフェクト編〜

fadeOut - 要素をフェードアウトして非表示 fadeIn - 要素をフェードインして表示 fadeToggle - fadeInとfadeOutの切り替え fadeTo - 指定したアニメーションでフェード処理 toggle - showとhideの切り替え slideDown - スライドで要素を表示 slideUp - スラ…

jQueryのDOM操作メソッド 〜属性編〜

jQueryのDOM操作系のメソッドについてまとめておく 追加していく予定 .addClass - クラスを追加する .attr - 属性の取得 .hasClass - そのクラス名があるかどうか .prop - プロパティのチェック .removeAttr - 指定した属性の削除 .removeClass - 指定したク…