はてブログ

はてなブックマーク新着エントリーの過去ログサイトです。



タグ Ginpen.com

新着順 人気順 5 users 10 users 50 users 100 users 500 users 1000 users
 
(1 - 25 / 40件)
次の25件 »

captureでカメラ起動（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 17日目） | Ginpen.com

2021/12/19 このエントリーをはてなブックマークに追加 5 users Instapaper Pocket Tweet Facebook Share Evernote Clip capture codepen.io CodePen pen

知名度が低いウェブ標準ひとり 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

2019/08/07 このエントリーをはてなブックマークに追加 41 users Instapaper Pocket Tweet Facebook Share Evernote Clip React TypeScript eslint

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

2018/12/03 このエントリーをはてなブックマークに追加 11 users Instapaper Pocket Tweet Facebook Share Evernote Clip length 配列 インスタンス 中身 要素

配列とかおれおれAdvent Calendar2018 – 02日目 JavaScriptの配列のインスタンスを保ったまま中身を全て削除したい場合、 length に 0 を設定するだけで実現できます。 仕様 length の変更で要素が削除されることについて、配列特殊オブジェクト Array Exotic Objects の項に記載があります。 9.4.2 Array Exotic Object... 続きを読む

CSS transformのmatrix()を一瞬で 完 全 理 解 できるやつ作ったよ。 | Ginpen.com

2018/11/14 このエントリーをはてなブックマークに追加 65 users Instapaper Pocket Tweet Facebook Share Evernote Clip Matrix CSS Transform 一瞬 https

というわけでお探しのはこちらです。 Understanding transform:matrix() https://understanding-transform-matrix.ginpei.info/ スマホでも存分にご理解頂けます。 見た目 こんな感じ。 pic.twitter.com/GsxurJJbKI — 高梨ギンペイ (@ginpei_jp) November 13, 2018 この動画だけでも十分理解できそう。 matrix() とは 動... 続きを読む

DevToolsでz-index一覧できるやつ作ったよ。 | Ginpen.com

2018/06/21 このエントリーをはてなブックマークに追加 99 users Instapaper Pocket Tweet Facebook Share Evernote Clip DevTools index ヤツ

Chrome用とFirefo用です。 GitHubでソースコード公開してます。 ginpei/devtools-z-index 見た目 Chrome版。 Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。 はじまり コードスニペット版。これはこれで手軽でよろしいね。 ページ中の要素を `z-index` の数字が大きい順に一... 続きを読む

Chrome、Edge、Firefox互換のブラウザー拡張を作るポリフィル。 | Ginpen.com

2018/04/23 このエントリーをはてなブックマークに追加 24 users Instapaper Pocket Tweet Facebook Share Evernote Clip That Edge ポリフィル Add-ons for ソース

最近思うところあってブラウザー拡張を作って公開しました。仕事中につい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

2014/12/01 このエントリーをはてなブックマークに追加 240 users Instapaper Pocket Tweet Facebook Share Evernote Clip function グローバルスコープ スコープ 変数 関数

これですね。これ何か呼び方あるの？ なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ（変数の有効範囲）は関数単位（function(){～}）になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変... 続きを読む

JavaScriptStackTraceApi邦訳。Errorオブジェクトのstackについて。 | Ginpen.com

2014/05/13 このエントリーをはてなブックマークに追加 38 users Instapaper Pocket Tweet Facebook Share Evernote Clip stack

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

2014/02/20 このエントリーをはてなブックマークに追加 27 users Instapaper Pocket Tweet Facebook Share Evernote Clip フレーズ 括弧 ブラケット CJK Bracket

その他 括弧全般を指す場合はBracketと呼ぶみたい 上記以外にも呼び方の種類は多い、特に英語 鍵括弧 「 」 はCJK(中日韓)で利用される かつて日本の数学では ( ), { }, [ ] の順に小、中、大括弧と呼ばれていたが、今はそうでもないらしい 世界的には ( ), [ ], { } の順に小、中、大が用いらる場合が多いらしい というか初期以外は丸括弧 ( ) の入れ子で全部表現するよ... 続きを読む

スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com

2013/12/06 このエントリーをはてなブックマークに追加 430 users Instapaper Pocket Tweet Facebook Share Evernote Clip ハードウェアアクセラレーション Polymer GPU 周回

この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかな... 続きを読む

JavaScriptで要素を検索せずに取得する方法があります。（JavaScriptおれおれAdvent Calendar 2013 – 03日目） | Ginpen.com

2013/12/04 このエントリーをはてなブックマークに追加 33 users Instapaper Pocket Tweet Facebook Share Evernote Clip document.querySelector Body

JavaScriptおれおれAdvent Calendar 2013の3日目の記事です。 何か要素に対する処理を行う場合はdocument.querySelector()あたりで検索してくるのですが、一部の要素については事前に取得済みだったりします。 <body>を取るならdocument.bodyで document.bodyには最初から<body>要素が格納されています。個人的にはHTMLEl... 続きを読む

jQueryでチェックボックスの状態をうまく取れない、設定出来ないときは、attr()ではなくprop()を使ってね。（JavaScriptおれおれAdvent Calendar 2013 – 02日目） | Ginpen.com

2013/12/03 このエントリーをはてなブックマークに追加 32 users Instapaper Pocket Tweet Facebook Share Evernote Clip prop attr undefined jQuery true

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

2013/10/28 このエントリーをはてなブックマークに追加 116 users Instapaper Pocket Tweet Facebook Share Evernote Clip Ｔｒａｎｓｉｔｉｏｎ CSSアニメーション マウスホバー

いえーいCSSでぐりぐり動かしてますか！ やろうやろうと思いつつなかなか手が出ないなんて事もありますが、CSS Animationについてそんな人のための簡単な導入です。 CSSでのアニメーションは二種類 実はCSSのアニメーション、と言っても二種類あります。 transition … マウスホバーとかの操作時に動くやつ animation … ずっと動き続けるやつ プロパティは割と似てる 今のと... 続きを読む

CSSでグラデーションを使うときにhsl()が便利すぎる。（CSS おれおれ Advent Calendar 2012 – 19日目） | Ginpen.com

2013/06/02 このエントリーをはてなブックマークに追加 61 users Instapaper Pocket Tweet Facebook Share Evernote Clip hsl linear-gradient CSS オレオレ 色相

CSS おれおれ Advent Calendar 2012 – 19日目 CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、... 続きを読む

jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com

2013/05/07 このエントリーをはてなブックマークに追加 317 users Instapaper Pocket Tweet Facebook Share Evernote Clip jQuery submit Ajax jquery.ajax

仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するっての... 続きを読む

JavaScriptから見たCSS。CSSを学ぶという事。（CSS おれおれ Advent Calendar 2012 – 24日目） | Ginpen.com

2012/12/25 このエントリーをはてなブックマークに追加 27 users Instapaper Pocket Tweet Facebook Share Evernote Clip お陰 結論 最後 CSS オレオレ

CSS おれおれ Advent Calendar 2012 – 24日目 CSS おれおれ Advent Calendarの今年最後の記事です。JavaScript視点でCSSを考えてみます。 先に結論を申し上げると CSSがあるお陰でJavaScriptが便利に！　JavaScriptをやるならCSSを学ぶ必要があるし、CSSを習得した人ならJavaScriptを始めるのに有利！　というお話です... 続きを読む

Chromeで画像の角丸枠線がボケるのを回避する。（CSS おれおれ Advent Calendar 2012 – 20日目） | Ginpen.com

2012/12/20 このエントリーをはてなブックマークに追加 12 users Instapaper Pocket Tweet Facebook Share Evernote Clip border-radius border CSS オレオレ

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

2012/12/13 このエントリーをはてなブックマークに追加 42 users Instapaper Pocket Tweet Facebook Share Evernote Clip jQuery セレクター CSS オレオレ

続きを読む

CSSでiOS風の選択ボタンをつくるチュートリアル。（CSS おれおれ Advent Calendar 2012 – 10日目） | Ginpen.com

2012/12/11 このエントリーをはてなブックマークに追加 71 users Instapaper Pocket Tweet Facebook Share Evernote Clip rAdio Label チュートリアル CSS Name

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

2012/12/05 このエントリーをはてなブックマークに追加 660 users Instapaper Pocket Tweet Facebook Share Evernote Clip position width 横幅 横スクロールバー CSS

CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？　その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:... 続きを読む

jQueryの$()が多機能すぎる件について。5種類も仕事があるよ。（軽めのjQuery Advent Calendar 2012 – 01日目） | Ginpen.com

2012/12/01 このエントリーをはてなブックマークに追加 146 users Instapaper Pocket Tweet Facebook Share Evernote Clip jQuery expression CONTEXT API

軽めのjQuery Advent Calendar 2012 – 01日目 jQueryってあるじゃないですか。便利ですよね。いろんなところで紹介されてるっていうかもう普通に使われてると思うんですけど。 jQuery() APIについてはこちら。 jQuery() – jQuery API jQuery(expression, context) – jQuery 日本語リファレンス jQuery(... 続きを読む

典型的なJavaScripter3+1種類と、それぞれの勉強法。 | Ginpen.com

2012/11/13 このエントリーをはてなブックマークに追加 465 users Instapaper Pocket Tweet Facebook Share Evernote Clip JSer CSS 独断 Flash 偏見

一口にJSerといっても、色々な分野の人がいます。そこで、独断と偏見……というか主に偏見で三種類にまとめてみました。 あなたはどのJSerになりたいですか？ 三種類 アニメーションを作る人 アプリを作る人 サーバ側を作る人 基本的にプログラマ視点です。コーダー視点も最後に。 では、それぞれ見てみましょう。 アニメーションを作る人 Flashの代わりにJavaScriptやCSSを使う人。Flash... 続きを読む

jQuery 1.8の更新内容をまとめたよ。 | Ginpen.com

2012/08/13 このエントリーをはてなブックマークに追加 356 users Instapaper Pocket Tweet Facebook Share Evernote Clip ベンダープレフィックス CSS 諸々 jQuery Blog

個人的に油断してたんですが、jQuery 1.8がリリースされましたね。 CSSのベンダープレフィックスを自動でほぼ補完してくれるようになったのが目玉機能でしょうか。作業量としては、セレクターエンジンSizzleとアニメーション関係を全面的に書き換えた事が大きそうです。なお諸々強化されているにも関わらず、ファイルサイズは減っています。（ちょっとだけどね。）　えらい！ jQuery Blog » j... 続きを読む

jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com

2012/05/21 このエントリーをはてなブックマークに追加 1011 users Instapaper Pocket Tweet Facebook Share Evernote Clip input要素 jsdo.it jQuery 共通 要素

必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽... 続きを読む

Wordpressでページを分割するNextPage記法ってご存知ですか。 | Ginpen.com

2012/04/09 このエントリーをはてなブックマークに追加 30 users Instapaper Pocket Tweet Facebook Share Evernote Clip WordPress FYI ご存知 改ページ 箇所

知ってる人には当たり前なんだろうけれど、僕は知らなかったのでメモついでに皆様にも。FYIってやつですね。 特に設定とかはいらないみたいで、改ページしたい箇所にこう書くだけ。 <!--nextpage--> ね、簡単でしょう？ というわけで、次のページへ続く。 続きを読む

 
(1 - 25 / 40件)
次の25件 »