[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法
JavaScript のメソッド window.matchMedia を使用すると、CSS3 の MediaQuery のようにウィンドウサイズで JavaScript のコードを分けて使用する事が可能です。window.matchMedia の使い方・対応ブラウザなどのメモです。 window.matchMedia は MediaQueryList オブジェクト（MediaQueryList – Web API インターフェイス | MDN）を返すメソッドです。 サンプルデモまでのリンク→ウィンドウサイズによってテキストの内容を変更するサンプルデモ 使い方 matches でウィンドウサイズとマッチするかを簡単に調べる matches プロパティを使うと、指定したウィンドウサイズとマッチしたら true マッチしなければ false を返してくれます。ウィンドウサイズの指定の仕方は CS
![[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/d4a1ab350b11240c268ad4418373b07e790b15b0/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F08%2Fmediaquery.png)
☆ sweep.js ☆
Status This project is no longer maintained. CSS now has built-in support for setting color-interpolation-method. Transitioning through the oklch color space is a superior alternative to using this library. About sweep.js is a small JavaScript library (5kb zipped) that enables proper color transitions through the HSL and HUSL spaces. Ordinary CSS transitions and existing frameworks convert HSL col
気軽にプログラミングを始められるWebエディタ『runstant』作りました - Qiita
7月19日. 久しぶりの３連休. 予定はぎっしりだった. だが神からのお告げがあった. なんか作れと. 気づいたらオレの指は Macbook Air の薄いキーボードの上だった. ってことで連休中にちょっとしたツール作りました. 気軽にプログラミングを始められるWebエディタです. 名前は runstant. run + instant の略で, インスタントラーメンのように一瞬で気軽に実行できるよって意味です. ログイン不要, サーバー通信なしで一瞬で プログラミングを始めることができます!! 一応, tmlib.js 公式エディタ的な 位置づけなのでデフォルトで tmlib.js のサンプルが入ってます. とりあえず触ってみてください -> こちら 特徴 ログインの必要ないよ 状態を hash で保存するのでサーバー通信しないよ html/css/javascript が書けるよ ちょ
ブックマークレットの書き方の段階的な発展の仕方 - ザリガニが見ていた...。
ブックマークレットとは、JavaScriptコードが保存されたブックマークのことである。クリックすると、そこに保存されているJavaScriptコードが実行される。 通常のブックマークのアドレスには、http:で始まるURLが保存されている。 ブックマークレットのアドレスには、javascript:で始まるJavaScriptコードが保存されている。 はじめの一歩 WebブラウザのURLフィールドに以下のように入力して、returnキーを押してみると... javascript:alert("hello world!!") アラートダイアログが表示された！ URLフィールドのアイコンをブックマークバーにドラッグ＆ドロップすると、そのJavaScriptはブックマークレットとして保存される。 あるいは、aタグのリンク先にJavaScriptを設定しておけば、そのリンクをドラッグ＆ドロップして
【Yosemiteの新機能】JavaScriptでアプリケーションを操作し、面倒な作業を自動化してみた | Goodpatch Blog
初めまして、ProttのフロントエンドエンジニアのSyoです。よろしくお願いします！ 実は皆さんもう既にご存知と思いますが、Mac OS XにはAppleScriptというスクリプト言語があり、システムアプリケーションや一部のサードパーティ製アプリをコントロールすることができます。これより日常中繰り返し同じ操作する所はプログランミングで操作を自動化することができるので大変便利です。ただし、AppleScriptはそれ以外一切使う所がなくて、その為にわざとAppleScriptを勉強するのは非効率ではないでしょうか。 今秋リリースするOS X Yosemiteでは、AppleScriptに加えJavaScriptも利用可能になりました。ということでJavaScriptを少しでもわかる方は、JavaScriptで簡単にMacアプリケーションを操作することが出来るようになりました！ Hello
[JS] 条件分岐や、数値と文字列の変換、小数点切り捨てなどの短縮された書き方いろいろ
他の方が書いたコードなどをみていると、意味が分かりそうで分からない JavaScript の書き方にしばしば遭遇します。そういった、本などではあまり紹介されていないけど実際のコードでは使われていたりする短縮された書き方のメモです。 条件分岐に関するもの 三項演算子で書く 書式 (条件式) ? 条件に当てはまる時の処理 : 当てはまらない時の処理 ; 例）変数 num の数値が5以上の場合は true 、それ以外なら false を変数 val へ代入 val = (num > 5)? true : false; 略さない書き方 if(num > 5){ val = true; } else { val = false; } if 文の true の場合だけ処理を書く 書式 if(条件式) 条件に当てはまる時の処理 ; 例）変数の数値が5以上の場合は false を返す。 if(val >
![[JS] 条件分岐や、数値と文字列の変換、小数点切り捨てなどの短縮された書き方いろいろ](https://cdn-ak-scissors.b.st-hatena.com/image/square/86e81ff91fa6b313217fdb231a7e53f682b53caf/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F03%2Ficon.jpg)
CSS Font Loading Module Level 3を試してみた - console.blog(self);
1年以上前から、ちゃんと調べたいと思っていたけど、やっていなかった。 CSS Font Loading Module Level 3は、2014/06/30時点で最終草案(Last Call Working Draft) になっている。CSS Font Loading Module Level 3はフォントのローディングに関する仕様書。 CSS Font Loading Module Level 3 - W3C Last Call Working Draft, 22 May 2014 最新のEditor's Draftはこっち。 CSS Font Loading Module Level 3 - Editor’s Draft フォントについての仕様書はCSS Font Module Level 3で、2014/06/30時点で勧告候補(Candidate Recommendation)にな
Smoky Backgrounds Generator - waterpipe.js
waterpipe.js by dragdropsite.com Tweet Smoke style Gradient start: Gradient end: Opacity: 10% Smoke size: 100% Line width: 2px Smokes #: 1 Background style Outer color: Inner color: Download size Width (px): Height (px): Samples (click to generate) Samples Generate Download Credits: rectangleworld.com
自社サイトリニューアルで、ぐにゃぐにゃする丸のヤツとかについて | ココノヱブログ
前の記事を岡田がバズらせたので、プレッシャーを感じている山田です 公開後も細かくマイナーチェンジを重ねているココノヱのサイトリニューアルのお話、その２です。 僕はぐにゃぐにゃする丸いヤツとか、ここのゑ君が落ちてきてDOM要素にぶつかるのとか、あと全体的な仕上げと調整で頑張りました。
JavaScriptでMacに歌ってもらう - Okiraku Programming
最近のChrome, SafariのJavaScriptには音声合成APIが入っています。 使い方は簡単で、JavaScriptコンソール等で var msg = new SpeechSynthesisUtterance('こんにちは!'); msg.lang = "ja-JP"; // 言語指定 window.speechSynthesis.speak(msg); のようにするだけで喋ってくれます。 音声エンジンを変えることも可能です。使える音声の一覧を var voices = speechSynthesis.getVoices(); で取得すると、voicesに音声オブジェクトのリストが返ってくるので、この中のlangやnameを見て使いたいものを msg.voice = voices[3]; などとSpeechSynthesisUtteranceオブジェクトのvoice属性に指定す
Appleは独自のJavaScriptアクセラレータ「FTLJIT」を開発中
By Timothy Griffin asm.jsを採用するFirefox 29は、Chrome 34やIE 11よりも圧倒的に高速であることが公表されましたが、AppleはSafariにコードネーム「FTLJIT」と呼ばれる独自のJavaScriptアクセラレータを開発中であることが明らかになりました。 FTLJIT – WebKit https://trac.webkit.org/wiki/FTLJIT Apple has its own JavaScript accelerator in the works | Javascript - InfoWorld http://www.infoworld.com/t/javascript/apple-has-its-own-javascript-accelerator-in-the-works-242042 AppleはGoogleのV8、
『ClipMenuをJSで拡張して、ステキなコピペライフを』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。スマートフォン版Amebaでディベロッパーをしている宇納です。 本日は普段の業務とは離れて、ちょっとだけ便利なTipsのご紹介です。 Mac OS用のクリップボード・ユーティリティソフトClipMenuをJavaScriptで拡張する方法と、それを使ったサンプルをご紹介します。 とても簡単にできますので、プログラミングが苦手な方も是非挑戦してみてください！ ClipMenuとはクリップボードの履歴を保持しておけるフリーのアプリケーションで、これを使うとコピー＋ペーストを何度も繰り返さなくても、コピーした履歴から呼び出してペーストができます
Service Worker - first draft published
The first draft of the service worker spec was published today! It's been a collaborative effort between Google, Samsung, Mozilla and others, and implementations for Chrome and Firefox are being actively developed. Anyone interesting in the web competing with native apps should be excited by this. Update: Is ServiceWorker ready? - track the implementation status across the main browsers. So, what
JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Security Cheatsheet
Blog - LINE ENGINEERING
Web Animations
llllll.li
Myjson - A simple json storage and hosting service
LocalForageでアプリケーションのオフライン対応を行う
