タグ Ginpen.com
新着順 10 users 50 users 100 users 500 users 1000 userscaptureでカメラ起動(知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 17日目) | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 17 日目 今日は capture です。カメラを起動します。 HTML attribute: capture – HTML: HyperText Markup Language | MDN デモ:https://codepen.io/ginpei/pen/xxXxvbX HTML Media Capture | Can I use… Support tables for HTML5, CSS3, etc あ、なんか CodePen ... 続きを読む
React + TypeScriptにESLintを導入するぞ。 | Ginpen.com
Node.js v10.16 react-scripts v3.0 TypeScript v3.5 ESLint v5.16 @typescript-eslint/eslint-plugin v1.13 手順 ESLint本体をインストール .eslintrc.js を生成、プラグイン類をインストール TypeScript 用プラグインを追加 ESLint の設定を更新 NPM スクリプト準備 初期状態から recommended な状態へ対応 ESLint 本... 続きを読む
配列を空にするにはlength=0で十分。(配列とかおれおれAdvent Calendar2018 – 02日目) | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 02日目 JavaScriptの配列のインスタンスを保ったまま中身を全て削除したい場合、 length に 0 を設定するだけで実現できます。 仕様 length の変更で要素が削除されることについて、配列特殊オブジェクト Array Exotic Objects の項に記載があります。 9.4.2 Array Exotic Object... 続きを読む
CSS transformのmatrix()を一瞬で 完 全 理 解 できるやつ作ったよ。 | Ginpen.com
というわけでお探しのはこちらです。 Understanding transform:matrix() https://understanding-transform-matrix.ginpei.info/ スマホでも存分にご理解頂けます。 見た目 こんな感じ。 pic.twitter.com/GsxurJJbKI — 高梨ギンペイ (@ginpei_jp) November 13, 2018 この動画だけでも十分理解できそう。 matrix() とは 動... 続きを読む
DevToolsでz-index一覧できるやつ作ったよ。 | Ginpen.com
Chrome用とFirefo用です。 GitHubでソースコード公開してます。 ginpei/devtools-z-index 見た目 Chrome版。 Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。 はじまり コードスニペット版。これはこれで手軽でよろしいね。 ページ中の要素を `z-index` の数字が大きい順に一... 続きを読む
Chrome、Edge、Firefox互換のブラウザー拡張を作るポリフィル。 | Ginpen.com
最近思うところあってブラウザー拡張を作って公開しました。仕事中についSNS見ちゃうのを止めるやつです。 Chrome → Stop SNS – Chrome Web Store Firefox → Stop SNS – Add-ons for Firefox Edge → 未公開 ソース → ginpei/stop-sns: Chrome, Edge, Firefox extension that... 続きを読む
JSファイル全体を括るfunctionについての話。(JavaScriptおれおれAdvent Calendar 2014 – 01日目) | Ginpen.com
これですね。これ何か呼び方あるの? なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ(変数の有効範囲)は関数単位(function(){~})になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変... 続きを読む
JavaScriptStackTraceApi邦訳。Errorオブジェクトのstackについて。 | Ginpen.com
Google ChromeやNode.jsで利用可能なAPIです。Firefox等には搭載されていません。(まーあんまり使う場面なさそうですけど。) http://code.google.com/p/v8/wiki/JavaScriptStackTraceApi 以下、翻訳です。 All internal errors thrown in V8 capture a stack trace when... 続きを読む
よく使う括弧の名前(日本語、英語)を調べてみたよ。ブラケット、ブレースとか。 | Ginpen.com
その他 括弧全般を指す場合はBracketと呼ぶみたい 上記以外にも呼び方の種類は多い、特に英語 鍵括弧 「 」 はCJK(中日韓)で利用される かつて日本の数学では ( ), { }, [ ] の順に小、中、大括弧と呼ばれていたが、今はそうでもないらしい 世界的には ( ), [ ], { } の順に小、中、大が用いらる場合が多いらしい というか初期以外は丸括弧 ( ) の入れ子で全部表現するよ... 続きを読む
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ!(Frontrend Advent Calendar 2013 – 06日目) | Ginpen.com
この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。(これ今後数年で大流行りしそうに思うので、未読なら是非!) さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが(周回遅れ)、いざアニメーションを実装してみても、なかな... 続きを読む
JavaScriptで要素を検索せずに取得する方法があります。(JavaScriptおれおれAdvent Calendar 2013 – 03日目) | Ginpen.com
JavaScriptおれおれAdvent Calendar 2013の3日目の記事です。 何か要素に対する処理を行う場合はdocument.querySelector()あたりで検索してくるのですが、一部の要素については事前に取得済みだったりします。 <body>を取るならdocument.bodyで document.bodyには最初から<body>要素が格納されています。個人的にはHTMLEl... 続きを読む
jQueryでチェックボックスの状態をうまく取れない、設定出来ないときは、attr()ではなくprop()を使ってね。(JavaScriptおれおれAdvent Calendar 2013 – 02日目) | Ginpen.com
JavaScriptおれおれAdvent Calendar 2013 – 02日目 チェック状態は$checkbox.attr('checked')ではなく$checkbox.prop('checked')で得る必要があります。 検証 初期状態で確認すると c1: attr=undefined prop=false c2: attr=checked prop=true チェックを入れ替えて確認する... 続きを読む
CSSアニメーションを勉強しないとなーと思いつつまだやってない人のために、五分くらいでぱっと分かるCSS Animationを説明するよ。 | Ginpen.com
いえーいCSSでぐりぐり動かしてますか! やろうやろうと思いつつなかなか手が出ないなんて事もありますが、CSS Animationについてそんな人のための簡単な導入です。 CSSでのアニメーションは二種類 実はCSSのアニメーション、と言っても二種類あります。 transition … マウスホバーとかの操作時に動くやつ animation … ずっと動き続けるやつ プロパティは割と似てる 今のと... 続きを読む
CSSでグラデーションを使うときにhsl()が便利すぎる。(CSS おれおれ Advent Calendar 2012 – 19日目) | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 19日目 CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、... 続きを読む
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するっての... 続きを読む
JavaScriptから見たCSS。CSSを学ぶという事。(CSS おれおれ Advent Calendar 2012 – 24日目) | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 24日目 CSS おれおれ Advent Calendarの今年最後の記事です。JavaScript視点でCSSを考えてみます。 先に結論を申し上げると CSSがあるお陰でJavaScriptが便利に! JavaScriptをやるならCSSを学ぶ必要があるし、CSSを習得した人ならJavaScriptを始めるのに有利! というお話です... 続きを読む
Chromeで画像の角丸枠線がボケるのを回避する。(CSS おれおれ Advent Calendar 2012 – 20日目) | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 20日目 いわゆるBK (Bad Knowhow) というやつですな。(BKって和製英語の類?) 現象 画像にborderを付けてborder-radiusも付けると、なんかChromeでうまく表示されないんです。 Chrome 23で見た角丸枠線。欠けている。 Firefoxなんかだと正常でした。 回避策 回避策なのですが、bord... 続きを読む
jQueryで使えるけどCSSでは使えないセレクター。(CSS おれおれ Advent Calendar 2012 – 13日目) | Ginpen.com
CSSでiOS風の選択ボタンをつくるチュートリアル。(CSS おれおれ Advent Calendar 2012 – 10日目) | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 10日目 iOSの選択ボタン。HTMLでいうラジオボタン的なもの。”Segmented Control”というらしいです。 Segmented Control風ラジオボタン。 HTML こんな感じです。 <p> <span class="segmented"> <label><input type="radio" name="frui... 続きを読む
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。(CSS おれおれ Advent Calendar 2012 – 05日目) | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか? その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:... 続きを読む
jQueryの$()が多機能すぎる件について。5種類も仕事があるよ。(軽めのjQuery Advent Calendar 2012 – 01日目) | Ginpen.com
軽めのjQuery Advent Calendar 2012 – 01日目 jQueryってあるじゃないですか。便利ですよね。いろんなところで紹介されてるっていうかもう普通に使われてると思うんですけど。 jQuery() APIについてはこちら。 jQuery() – jQuery API jQuery(expression, context) – jQuery 日本語リファレンス jQuery(... 続きを読む
典型的なJavaScripter3+1種類と、それぞれの勉強法。 | Ginpen.com
一口にJSerといっても、色々な分野の人がいます。そこで、独断と偏見……というか主に偏見で三種類にまとめてみました。 あなたはどのJSerになりたいですか? 三種類 アニメーションを作る人 アプリを作る人 サーバ側を作る人 基本的にプログラマ視点です。コーダー視点も最後に。 では、それぞれ見てみましょう。 アニメーションを作る人 Flashの代わりにJavaScriptやCSSを使う人。Flash... 続きを読む
jQuery 1.8の更新内容をまとめたよ。 | Ginpen.com
個人的に油断してたんですが、jQuery 1.8がリリースされましたね。 CSSのベンダープレフィックスを自動でほぼ補完してくれるようになったのが目玉機能でしょうか。作業量としては、セレクターエンジンSizzleとアニメーション関係を全面的に書き換えた事が大きそうです。なお諸々強化されているにも関わらず、ファイルサイズは減っています。(ちょっとだけどね。) えらい! jQuery Blog » j... 続きを読む
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通:要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽... 続きを読む
Wordpressでページを分割するNextPage記法ってご存知ですか。 | Ginpen.com
知ってる人には当たり前なんだろうけれど、僕は知らなかったのでメモついでに皆様にも。FYIってやつですね。 特に設定とかはいらないみたいで、改ページしたい箇所にこう書くだけ。 <!--nextpage--> ね、簡単でしょう? というわけで、次のページへ続く。 続きを読む