最新版で学ぶThree.js入門 - 手軽にWebGLを扱える3Dライブラリ - ICS MEDIA
Three.jsとは、手軽に3Dコンテンツを制作できる商用利用可能なJavaScriptライブラリ。WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。 もともと2000年代後半のFlashの時代から、ウェブの3D表現が人気を集めてきました。今では標準技術としてのWebGLが、ゲームやビジュアライゼーションなどの多くの場面で採用されています。WebGLとThree.jsは実際に多くのサイトで使用されており、ユーザーに印象に残るウェブコンテンツには欠かせない技術となっています。また、JSライブラリの容量も126KB（GZIP）しかなく、とても軽量です。 本記事でThree.jsによ
ReactとAngularのいいとこ取り？ 2017年こそ学びたいVue.jsの始め方
Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく（バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません）、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと
XSS Attack Tips / 今日から始めるXSS - http80
日々の健全なXSSにお役立てください。 ●極力短いコードでXSS 本題に入る前に軽く整理します。オーソドックスなXSSであれば、おなじみの次のようなコードになるでしょう。 "><script>alert(document.cookie)</script> *1 しかしながら、Reflectedするのにもかかわらず、場合によっては文字数制限という問題にぶち当たることもあるかと思われます。その場合、より短いコードでXSSを成功させる必要性があります。どこにReflectedされるかによって書き方は変わりますが、大まかには下記のどれかになるでしょう。 ◆HTML Body(HTML構文内) BAD: <input type="text" value="<?php echo $GET['name']; ?>"> PoC: "><script>alert(1)</script> (28文字) PoC
CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！
Webアニメーションの実装方法として海外でいまもっとも話題なのが、anime.jsでしょう。日本の「アニメ」が語源の注目のDOMアニメーションライブラリーの使い方を詳しく。 もし速くて軽いアニメーションのライブラリーを探しているなら、Julian Garnierが考案したanime.jsを検討してみてはどうでしょうか。 この記事は、SVG画像を含む動的なDOMアニメーションに関する解説です。記事では、canvas-WebGLやSVGに特化したアニメーションライブラリーに触れるつもりはありません。ただし、WebページのHTML要素（理想的にはSVG画像も）のアニメーションに適していれば、別の機会に紹介するかもしれません。 記事の目的はライブラリーを分析してコードを掘り下げることではありません。主にCSSを使う人が、DOMのアニメーションのためにJavaScriptでなにができるかを追及する、
React with Reduxによる大規模商用サービスの開発 / nodefest2016
東京Node学園祭2016で話したブッキングテーブルのやつ
ECMAScript6対応 webpackを最低限実務で使う為の設定とRailsとwebpackの共存方法 - Qiita
やること webpackとそのPluginを使って、実務で使えるレベルにするには、情報が断片的だったのでまとめてみました。 [追記] Railsとwebpackの共存方法についても記述しました。 以下の事を実現する ES6をES5に変換 babel-core babel-loader babel-preset-es2015 SCSSのコンパイル css-loader style-loader extract-text-webpack-plugin sass-loader node-sass JS内にHTMLファイルを読み込む html-loader Font Awesomeをnpmでインストール file-loader url-loader ブラウザのLive Reload browser-sync browser-sync-webpack-plugin .envでの設定値をセットし、pr
Essential Electron
Read this in Japanese. What is Electron? Electron is a library you can use to build desktop applications with JavaScript, HTML and CSS. These applications can be packaged to run on Mac, Windows and Linux computers as well as be placed in the Mac and Windows app stores. Next: Why is this important? Definitions: JavaScript, HTML and CSS Are web languages, meaning they are the building blocks of webs
project毎のnpmコマンドをいい感じにするnpmrc & config達 - Qiita
npmrcのドキュメントを読みなおしていたら、.npmrcは/path/to/my/project/.npmrcのようにプロジェクト毎に配置することが出来る事に気づいて、ちょっと使ってみたら便利だった。 globalやhomeディレクトリへの設定を前提としたnpm configの記事は結構あるが、プロジェクト毎でnpm-configについて書かれている記事があんまり無かったのでまとめてみる。 npm-configの何が良いのか？ project毎に出来ると何が良いのか？ npm-configの設定をすると、色々コマンドを省略出来たりして良い事がある。 (参考:2016年版 Node.jsで幸せになれる10の習慣) npmrcやnpm-configは、個人開発用であれば、$HOME/.npmrcへの設定だったりnpm config setでの設定で十分。 また、npm registryに登録
DEFGHI1977のWEB技術まとめ・ツール等
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
JavaScript で Y コンビネーターを理解する - Qiita
ベンチャーキャピタルの Y コンビネーターはラムダ計算の Y コンビネーターから名付けられている。その Y コンビネーターについて JavaScript での説明をメモっとく。 階乗の再帰的な関数定義 JavaScript で階乗を再帰的に定義して、5の階乗を求めるとこうなる。 function factorial(n) { return n == 0 ? 1 : n * factorial(n - 1); } factorial(5); // => 120 この場合 factorial という名前で関数を定義しているので再帰的に関数呼び出しができている。しかし Y コンビネーターを使うと無名関数での再帰的な関数呼び出しが実現できてしまう。まあ、JavaScript だと arguments.callee で下記のように実現できてしまうのだけど、arguments.callee を使わなく
「A-Frame」でVR開発入門！HTMLの追記だけでスマホブラウザから好きな場所を360度パノラマ画像体験 - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「VR(バーチャルリアリティ)」を体験されたことはあるでしょうか？ 「Oculus Rift」のような頭に装着するデバイスが人気ではあるものの、持っている人はまだ少ないと思いますので、今回はみなさんがお持ちの「スマホ」にあるブラウザで疑似体験してみようと思います。 もちろん没入感はありませんが、スマホ画面の奥に広がる「仮想的な空間」を実感することはできると思います！ ■「A-Frame」を使ってみよう！ ブラウザから、簡単にVR空間を楽しめるようにしてくれるフレームワークとして「A-Frame」があります。 【 A-Frame 】 「A-Frame」のユニークなところは、HTMLタグを追記するだけですぐにVR空間を構築できる点にあります。 例えば、公式ページで紹介されている以下の「サンプルデモ」のリンクを、スマホで開いてみてください
なぜ人は必死でjQueryを捨てようとしているのか
最近はやりのjQuery Hateの謎に迫る！ （というか、これであってるのか教えてほしいという発表）Read less
ituore.com - ituore リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
JavaScript の並列処理機能を味見してみる
この記事は “A Taste of JavaScript’s New Parallel Primitives” の抄訳です。 まとめ：複数の Worker と共有メモリを利用して、本当の意味で並列アルゴリズムの JavaScript 実装を可能にするために、JavaScript の基本機能を拡張しようとしています。 複数コアを用いた計算 JavaScript (JS) は成熟しました。モダンな Web ページのほとんど全てで、大量の JavaScript が利用され、それらが動作するのは当たり前のことになっています。また JS の適用領域も拡大しています：クライアントサイドでは、Facebook や Lightroom が行っているように画像処理が JavaScript で実装されていますし、Google Docs のようなブラウザで動作するオフィススイートも JS で実装されています。P
JavaPoly.js — Java(script) in the Browser
Introduction JavaPoly.js is a library that polyfills native JVM support in the browser. It allows you to import your existing Java code, and invoke the code directly from Javascript. JavaPoly works even if the user does not have Java installed on their computer. It finally allows Java to become a first class citizen by running directly in the browser's script tags (and interacting directly with th
TypeScriptを使った方がいいケースとは？ | POSTD
去年の夏、私たちは大量のコードベース（18,000行以上の コード行数 ）をJavaScriptからTypeScriptへと変更しました。この移行作業を通じて、両者の相違点や類似点について大いに学び、TypeScriptの優れたユースケースや、TypeScriptを使うべきではないケースなどについて考えてみました。 型システムとは補助輪のようなものです。転倒防止してくれる代わりに、遅くなり、操作性が制限されます。 TypeScriptのユースケース コードサイズ ：ソースコードが膨大である場合、また複数の人がプロジェクトに従事している場合、型システムは明らかなエラーを防ぐのに役立ちます。 特に SPA の場合は当てはまります。誰かが変更したコードが他の人のコードを破損させてしまう可能性があるなら、何らかの安全機構を持つ方がいいでしょう。TypeScriptの トランスパイラ は明白な誤りを
React.jsとCSS3で長女のためにWEB絵本を作った話 - Qiita
まずはこちらの動画をご覧ください。 こちらは娘が２歳半の頃に児童館で撮影したものです。 かわいい・・・ 生後1000日近くともなると、子どもは自分で絵本を読むようになります。 並行してひらがな覚え始めるので、親としてはガンガン絵本を読んでほしいのですが、実際には挿絵に合わせて適当な話を創をして遊んだり、まじめにひらがなを音読し始めたかと思えば数ページも読まないうちに次の絵本を引っ張り出してきては読んで、飽きてまた違う絵本に手を出すだけで、一向にちゃんと読んでくれません。 ちゃんと読まない原因として、もしかして絵本に動きがないから飽きてしまうのでは、と思った自分は もしもパパが作った動く絵本があったら、娘は大喜びして本を読むようになり、どんどん集中力が身について、あいうえおもマスターしてパパ大満足！なんてことになるんじゃないだろうか。 なんてことを考え、実際にWEB絵本を作成して娘に見せるま
Vercel: Build and deploy the best web experiences with the Frontend Cloud – Vercel
Your complete platform for the web.Vercel provides the developer tools and cloud infrastructure to build, scale, and secure a faster, more personalized web. Your complete platform for the web.Vercel provides the developer tools and cloud infrastructure to build, scale, and secure a faster, more personalized web.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js
ひたすら楽してディープラーニング
