JavaScript無し！CSSで簡単に動きを実装するテクニックまとめ
作成：2016/07/19 Web制作 > JavaScript無しで実装するCSS小技まとめです。細部にちょっとした動きを取り入れたいときなど、知っておくと便利なエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 メタ言語でなく、CSSで見たい方は「View Compiled CSS」でコンパイルして見てください。 ※CodepenのURLの末尾に「?editors=1100」を付与するとhtml/cssのみの編集画面で閲覧できるので、今回は全てのURL末尾に付与してます。 モーダルウィンドウ チェックボックスを使わないタイプ。擬似クラスである:targetを使い、アンカーリンク（#シャープ）にスタイルを適用しモーダルウィンドウを表示しています。 .foo:target { color: red; } :target擬似クラスを利用すれば、J
JavaScript (Electron) を使ってアプリの見栄えを整える - Qiita
Electronを使って見栄えを整えてみる ElectronはJavaScriptでデスクトップアプリケーションが作れるツールです。 前回「30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで」では簡単なアプリを作って配布するところまでやりました。 あとはいつも通りの JS + HTML + CSS でガリガリ書いていけばいいのですが、まずは見た目から入ろうということで、もう少しアプリっぽい見栄えにしてみましょう。 ちなみに、Macではいろいろ動作を確認しましたが、Windowsは知りません。 大体同じように動くはずですが、もしダメだったらWindows版の記述を教えて頂けると助かります。 基本設定は browser-window APIで browser-windowはアプリのウィンドウを表示するためのAPIです。 例えば、以下は単なるin
WebGLStudio
3D Development environment for the web. WebGLStudio (formerly known as WebGLStudio) is a platform to create interactive 3D scenes directly from the browser. It allows to edit the scene visually, code your behaviours, edit the shaders, and all directly from within the app. Try WebGLStudio.js Example Source on GitHub Documentation Learn or you can use the latest version (more features and more bugs)
JavaScriptの情報の仕入れ方 - mizchi's blog
ぼくのフロントエンドの情報収集ソース | Yuhiisk みたけど多すぎて逆に機能不全になると思う。 自分が主に見てるのは次の2つ。 efclのはてなブックマーク JSer infoのazuさんのはてブ。 Echo JS - JavaScript News Hacker News のJS版みたいなもの これを読み流すんじゃなくて、LDRで一件一件丁寧にみてる。日本語圏で再生産され続ける情報に意味があるもの少ないので、上流とまとめだけみればよい。
angularJS と jQuery に関する誤解を解く - nazokingのブログ
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
GitHub、JavaScriptでデスクトップアプリが作れるライブラリAtom Shellを、Electronに改称
米GitHubは、4月23日（現地時間）にJavaScriptによってデスクトップアプリケーションを作成できる、クロスプラットフォームのデスクトップアプリケーションシェルAtom Shellの名称を、Electronに変更した。今回の改称に合わせて、公式サイトのURLも変更する。 Electron（旧Atom Shell）は、もともとAtomエディタでChromiumやNode.jsのイベントループやネイティブAPIを用いるために作られた。しかし、テキストエディタのサポートだけが目的ではなく、Web技術を使用したクロスプラットフォームのネイティブデスクトップアプリケーション開発の実現も目指していた。 開発開始から2年が経過し、Electronは自動アプリアップデートやWindowsインストーラー、クラッシュレポートなど、ネイティブアプリケーションに役立つさまざまな機能を、JavaScrip
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
人気上昇中のJavaScriptライブラリを調べてみた【2015年版】
altJSの人気が混戦で面白い！ 2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表。 ← 前回 連載 INDEX 次回 → こちらのページで【2016年版】も発表！ ■ 2015年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2014年版はこちら）。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名
JS.next
概要 正規表現でドット「.」を改行文字にもマッチさせることができるようになった。 続きを読む 概要 try { } catch( err ) { }の( err )の部分を省略することができるようになった。 続きを読む 概要 正規表現内の好きな部分に名前を付け、その名前を使ってマッチ結果を参照できるようになった。 続きを読む 概要 プロミスの成功・失敗に関わらず継続して処理を行うためのPromise.prototype.finallyメソッドが実装された 続きを読む 概要 配列のSpread/Rest構文のように、オブジェクト内に別のオブジェクトを展開する構文が実装された。 続きを読む 概要 関数を定義する際、パラメータの末尾にカンマを付けてもよいことになった。 続きを読む 概要 対象のオブジェクトがもつ全てのPropertyDescriptorsを得られる関数が実装された。 続きを読
WebGL 開発支援サイト wgld.org
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
超弾幕も可能？ WebGL高速化のススメ
今日のテーマ WebGL高速化のススメ 今回はあくまでも WebGL 特有の高速化 TIPS です。 WebGL にあまりなじみのない方もいらっしゃると思うので…… そもそも WebGL って？ というところから簡単に解説します。
JavaScriptだけでMIDIで遊べる！最高に乱暴なWeb MIDI API利用方法 - Qiita
JavaScriptだけでMIDIで遊べる！最高に乱暴なWeb MIDI API利用方法 Web MIDI API / Web Audio APIを使ったハッカソンイベント「Web Music ハッカソン #3」が近づいていますので、ここでWeb MIDI APIの使い方を振り返ってみましょう。 はじめに断っておきますが、これは 乱暴者による乱暴者向けの記事です。 最低限の手間で、Web MIDI APIに対応してる気分を味わう までを目指します。 [2015/02/08 追記] さらに手間をかけたくないという超絶手抜きな人（ワシです）向けに、アホみたいなラッパー(poormidi.js)作りました。 使い方 良かったら使ってみてください。 ちゃんと勉強したい方は、下記リンクを見てください。 ちゃんと勉強したい方向けリンク集 Web MIDI API (W3C) Web MIDI APIの
最強オブジェクト指向言語 JavaScript 再入門！
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
JavaScript初級者から中級者になろう — uhyohyo.net
このページの最終更新日：2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav
Mozilla、クロスプラットフォームのWebGLゲームエンジン「PlayCanvas Engine」公開 | OSDN Magazine
Mozillaは6月4日、オープンソースのクロスプラットフォームのゲーム構築用JavaScriptライブラリ「PlayCanvas Engine」をリリースした。「世界で最も容易に利用できるWebGLゲームエンジン」としている。 PlayCanvas Engineは3Dグラフィックを利用したゲーム開発向けのJavaScriptエンジン。Webブラウザ上で利用できる3DグラフィックスAPIである「WebGL」を利用する。プロジェクトは、WebGLがデフォルトで有効となった「Firefox 4.0」のリリース（2011年3月）後に立ち上げられており、パートナーとしてMozillaのほか、米ARMやゲーム開発を手がける米Activisionが名を連ねている。 対応OSはWindowsおよびMac OS X、Android、iOSで、グラフィックスのほか物理演算エンジンやアニメーション、2D/3D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのsetTimeout()でコールバック関数に引数を渡す
PWABuilder
HTML5/CSS3のニュースやTIPSなどのまとめ (2014年12月23日)
GitHub - soliton4/nodeMirror: node.js + CodeMirror = powerful ide
AngularJSの$scopeをController as で置き換えるべき理由 - Qiita
