SVGをcss/jsで操作するときに知っておきたいこと - Qiita
はじめに ※SVG初心者向きの記事です SVGはスケーラブルでベクターなグラフィックスです。レスポンシブや高解像度ディスプレイに対応する時にはとても頼もしい存在です。htmlと同じようにcssやjsでの制御も可能なため、インタラクティブなコンテンツもお手の物です。 そんなSVGは表示だけであれば簡単ですが、cssやjsを利用する際には知っておきたい基本知識があります。 これ以上、私のように時間を浪費してしまう哀れな子鳥たちを増やさぬようメモしたいと思います。ｱｰﾒﾝ 目次 表示のさせかたに気をつけろ！ cssに気をつけろ！ fill: none;に気をつけろ！ viewBoxに気をつけろ！ jQueryに気をつけろ！ サーバーの設定に気をつけろ！ 表示のさせかたに気をつけろ！ SVGの表示方法は複数あります。 <img>のsrcでファイルを読み込む background-imageプロパテ
Enterキーを無効にする方法 - Qiita
Enterキーを押すと、フォームが送信されることがある。 キーボード入力後、マウス操作してクリックする、という手間が省けてとても便利だと思う。 しかし、入力中にうっかり押してしまったりなど、期待しない挙動をしてしまうこともあるだろう。 この挙動は、HTMLの仕様がそうなっているからである。 ※ 古いブラウザでは以下の内容で対処できない場合があります。 ※ ブラウザの仕様が変わり、以下の内容では対応できなくなる場合があります。 対処方法① 送信ボタンを書き換える(テキストフィールドなどが2つ以上のとき) テキストフィールドなどがアクティブな状態で、Enterキーを押すとフォームが送信される。 <form name="testform1" action="test1.html"> <input type="text" name="text1" /> <input type="text" nam
JS xv6
What's this? This is an online demo of our xv6 port to GAIA, the CPU we designed. JS porting is done by compiling our CPU simulator with Emscripten. Please refer to my blog post for the detail: How we ported Xv6 OS to a home-built CPU with a home-built C compiler Xv6 is a simple UNIX like OS by MIT. If you want to know more about xv6 or our porting project, see links below. Command Examples ls See
他人に近寄ってはいけない時代に警鐘を鳴らす - Qiita
「コロナヤベー。誰とも近付かんわ」 あ、会社で一番モテる佳代ちゃんだ。 チュ 「えっ」 「うおおおおおおおおおおお」 「全然わからんけどチュウされた！！！うれしい！！！」 いや、でもさすがに意味わからんすぎる。 怖いから、警戒しとこ。 またきた！まじで意味わからん！ pic.twitter.com/Z6Ohru6Teq — caz (@cazu_PR) April 8, 2020 「音だけじゃダメか！！」 君も佳代ちゃんに備えよう！ <佳代ちゃん警戒ブザー作りに必要なもの> ・obniz board (http://akizukidenshi.com/catalog/g/gM-13685/) ・超音波距離センサー ＨＣ－ＳＲ０４ (http://akizukidenshi.com/catalog/g/gM-11009/) ・圧電スピーカー（圧電サウンダ）（１３ｍｍ）ＰＫＭ１３ＥＰＹＨ４００
押したキーのキーコードを取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website
押したキーのキーコードを取得するには、イベント引数であるevent.keyCodeプロパティで取得できます。 取得できるイベントはkeyup、keydown、keypressです。 keyCodeプロパティはイベントの引数で参照できますが、IE8以下ではwindow.eventでのみの参照が可能となっています。 デモ ※ 何かキーを押してください。 サンプルコード JavaScript document.onkeydown = function(e) { var keyCode = false; if (e) event = e; if (event) { if (event.keyCode) { keyCode = event.keyCode; } else if (event.which) { keyCode = event.which; } } alert(keyCode); };
ブラウザピアノ
ピアノは音域の広い楽器です。それで、 左シフト キーを押すと演奏音域が左側へ、 右シフト または enter キーを押すと演奏音域が右側へ、それぞれ移動します。なお、Windows11では、alt+shiftで入力言語をENGに切り換えると右shiftで音域の変更ができます。なお、日本語を入力する時はalt+shiftを押して元に戻して下さい。Firefoxでは右シフトキーは使えます。 マウスでも演奏音域を選択できます。マウスオーバーを選択すると白鍵盤の上にカーソルが載ると音が出ます。 赤字で示した音はハ長調のドになります。 旧バージョン メトロノームはありません。⇒ 旧バージョン 新作ピアノ ※ 鍵盤の大きなピアノ ピアノの鍵盤サイズを大きくしたピアノです。⇒ 🎹 ※ ３和音を弾けるピアノ 制約がありますが、３和音を弾けるピアノを試作しました。３種類あります。 ① ⇒ Windows日
Facebook疲れを解決するたった１つのさえた方法 | WP-E (仮)
渾身の釣りタイトルからこんにちわ。あんどーです。ジョークに近い記事ですので、軽い気持ちでお読みください。 みんなFacebook大好きですよね？ Facebookは今やすっかり日本にも定着したSNSとなりました。 先日Facebookが数十分ダウンした際、Twitterのタイムラインは「Facebook落ちてる」一色になり、果てはNHKのトップニュースに上がっちゃうぐらいみんなFacebookが大好きだし気になってますよね？ でもなぁ・・・Facebookって「アレ」がなぁ・・・。 「アレ」とは？そう、お誕生日通知ですね。 心をこめたお祝いメッセージ？ 大抵の人は、お祝いの言葉を受け取るのは嬉しいものだと思います。 お祝いをする自分も、純粋におめでとうの気持ちと、お誕生日の方との思い出を振り返ってみたりして、言葉を贈るものですね。 ですがしかし、まだ知り合って間もない人、あまり面識自体が多
The web's scaffolding tool for modern webapps | Yeoman
Get started and then find a generator for your webapp. Generators are available for Angular, Backbone, React, Polymer and over 5600+ other projects. One-line install using npm: npm install -g yo What's Yeoman?Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. To do so, we provide a generator ecosystem. A generator is basically a plugin tha
眺めているだけで楽しい！ 踊るミクさんをブラウザ上で自由なアングルから見れるJavaScriptライブラリ｢jThree｣
眺めているだけで楽しい！ 踊るミクさんをブラウザ上で自由なアングルから見れるJavaScriptライブラリ｢jThree｣ 2014.03.23 21:00 塚本直樹 いじってみたら想像以上にすごかった！ ブラウザ上で踊るミクさん（MMDモデル）を好きな角度から眺められる｢jThree｣が公開されました！ このjTreeとはMMDデータをブラウザ上で閲覧できるようにするJavaScriptライブラリです。対応ブラウザはChrome・FireFox・Operaの最新版となっており、OSはWindows 7のみサポートしています。Macの場合はOperaだと動作するそうですが、私の環境だとMac＋Chromeでも動作しました。 公式ページに掲載された｢千本桜｣のデモを開始すると、ブラウザ上でMMDデータのミクさんが踊りだします。そして、画面を左クリックしたままドラッグしてみると… このように自
ツイートボタンのツイート内容を動的に変える - tumblr
https://twitter.com/about/resources/buttons#tweet そこかしこにあるtweetボタン、上記URLでツイートする内容とかどのハッシュタグつけるかを指定して作ることができます。 が、結局これはtwitterの提供するjsが、ページ読み込み時にaタグをボタンとしてレンダリングしているので、指定したツイート内容をレンダリング後に変更するなんてことはできません。 でも、動的にツイート内容を変えたいと思うことはあるでしょう。 例えばjsで作ったゲームのスコアをツイート内容に含めたいとか。ページ表示時（＝ボタンのレンダリング時）にはゲームのスコアはわからないから、ツイート内容を決められないわけです。 で、どうやるかを覚書。といってもここに総てが書いてある。 https://dev.twitter.com/discussions/6860 widget.js
Slashdot
An anonymous reader writes "I have been working on an HTML5 app for Panasonic VIERA TVs, specifically a client for the Plex Media Server. After paying $129 for the developer program, version 1.0 was submitted for inclusion in their VIERA Connect marketplace several weeks ago. After a few requested tweaks, they inquired about how the client communicated with the Plex Server. As many/most web develo
jQuery:ボタンの有効・無効設定 - クウネル戦隊ガキュオーン備忘録
ボタンをクリック時にボタンを無効にする必要があったので ついでにメモ〆('-'*) attr()でdisabledを設定することで ボタンの有効・無効を切り替えることができます。 2012.01.25 修正 /* jquery1.7.1 で確認 */ /* ボタンの無効化 */ $('#input_button').attr('disabled', true); /* ボタンの有効化 */ $('#input_button').attr('disabled', false); $('#input_button').removeAttr('disabled'); ↑まちゃ様よりご指摘頂きました。 ありがとうございます。 以前の情報（バージョンが不明です。。。） /* ボタンの無効化 */ $('#input_button').attr('disabled', 'disabled'); /*
1分で実現できるjavascriptにおけるconsoleまわりの有用なテクニック4つ - Qiita
jsのconsoleまわりのテクニックはいろいろありますが、個人的に有用だと思ったものにしぼって紹介します。 chromeなら、command + option + jでconsoleを開いて下記のコードを貼りつければ実際に動きを確認できます(1分でできます!!)。 console.logの出力結果をcssで装飾する 出力例 サンプルコード console.log("%csuccess", "background-color:#5bb75b;color:white"); console.log("%cfail", "background-color:#da4f49;color:white;font-size:30px");
greasemonkey内でjQueryを使う - $shibayu36->blog;
久々にuserscript書こうと思って、greasemonkey辺りを触ってた。最近chromeではjsshellとか言うのがあるらしいけど、firefoxだったら今もgreasemonkeyで書いたらいいんだろうか。いまいちよくわかってない。 それはともかくuserscript内でjQueryとjQuery UIを使いたかったのでいろいろ調べた。 基本 userscriptでは最初の部分にいろいろ書くと、どんなURLで読み込むかとか設定できる。そこで@requireを使っておけばとりあえず、jQueryを読み込んで使うことができる。 // ==UserScript== // @name Script Name // @description Script Description // @namespace http://saficion.com/ // @include http://
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新型コロナウイルス 国内感染の状況
LINE と仲良くなってみる（失敗） | プログラマ気分
http://www.jthree.jp/
http://clockmaker.jp/blog/2014/01/away3d-typescript-fire/
[javascript] Q. ブラウザのイベントのデフォルト動作を中止するしたい
TechCrunch | Startup and Technology News
