さきにまとめ CSP環境(chrome拡張等)でVue.jsを使うときは Vue.js Github CSPブランチ からコードを取ってこよう. はまったこと Vue.jsを使って簡単にChrome拡張を初めて作ろうとした. <!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <title>Sample</title> </head> <body> <!-- CONTENT HERE --> <div id="app"> {{ message }} </div> <!-- CONTENT END --> <script src="assets/vendor/vue.min.js"></script> <script src="./js/main.js"></script> </body> </html>
用語 完全: コンパイラとランタイムの両方が含まれたビルドです。 コンパイラ: テンプレート文字列を JavaScript レンダリング関数にコンパイルするためのコードです。 ランタイム: Vue インスタンスの作成やレンダリング、仮想 DOM の変更などのためのコードです。基本的にコンパイラを除く全てのものです。 UMD: UMD ビルドは <script> タグによってブラウザに直接利用されます。https://cdn.jsdelivr.net/npm/vue の jsDelivr CDN からの既定のファイルは ランタイム + コンパイラ UMD ビルド (vue.js) です。 CommonJS: CommonJS ビルドは browserify や webpack 1 のような古いバンドラでの利用を意図しています。これらのバンドラ (pkg.main) のための既定のファイルはラ
3D Logo Generator 動くものはこちらです。 http://ohbarye.github.io/3D-logo-generator/ コードはGitHub参照。 https://github.com/ohbarye/3D-logo-generator 概要 ブラウザで入力された文字列を3Dロゴに変換するjsを書いてみました。 ↓はギザギザしたgif画像ですが生成されるロゴはこんな感じです。 影をつけてみたり。 今回はほぼthree.jsだけで書いています。three.jsはWebGLで3Dを表現できるライブラリです。友達に教えてもらいました。 http://threejs.org/ 今までWebGLの領域に触れたことは無かったのですが、思っていたよりも簡単に3D Renderingを実現でき、それに感動したのでthree.jsのシンプルな例も書いてみます。 // 描画領域サイ
Examples Physics plugin for three.js Physijs brings a very easy to use interface to the three.js framework. One of the reasons three.js is so popular is because it is so incredibly easy for graphics newbies to get into 3D programming. Physijs takes that philosophy to heart and makes physics simulations just as easy to run. In fact, there are just five easy steps that must be taken to make a 3D sce
はじめに 北千住デザインという名前でthreejsを使ってブラウザVJをやっています。今回はそのVJネタのひとつを説明します。 やったこと ARみたく、実写と動的なCGを組み合わせてVJをしたいと考えた(こういう合成をマッチムーブというらしい)。 ただARは現状では精度が低かったり、リアルタイムが前提の表現なので、映像作品とみたときイマイチな場合がある。そこで、実写映像をあらかじめ撮影して別のソフトで3Dトラッキングし、それにWebGLで描画された音に反応する映像をオーバーレイさせるという方法をとってみた。静的な映像と動的な映像のハイブリットといった感じ。 こんな感じで、背景はふつうのリニアな映像、手前の動いている物体は、音に合わせてリアルタイムに変形している。 キマイラ #BRDG7 @ 渋谷WWW X DE DE MOUSE🐭 x HEXPIEXLS with 北千住デザイン✨ これ
Web技術者よ、Unityを始めよう!Unity WebGL入門──HTML5 Conference 2016セッションレポート 池和田有輔(ユニティ・テクノロジーズ・ジャパン) HTML5 Conference 2016特集・第5弾は、「Unity WebGL入門」です。WebGL正式対応により、ゲームをはじめとしたブラウザコンテンツ制作ツールとして広く使われるようになったUnityの概要及びWebGLへの書き出しについて解説します。 WebGLにも対応したUnityのいま Unityは統合的なインタラクティブコンテンツ制作ツールです。 無料で使えるPersonalから文字通りプロフェッショナルのためのProまで3つのサブスクリプション・プランを用意していますが、根幹となるUnityエディタの機能はどのプランも同一のものとなっており、対応プラットフォームにも違いがありません。つまり、Pe
榊正宗@BlenderQuiz @megamarsun ちょっと最近少しだけきになってるのがUnityやUnrealの過剰な宣伝。これを覚えたら仕事ありますみたいな事をいって若者を刺激してるのって、本当に若者のためを思って言ってる人たちなのかな…。UnityやUnrealは否定しないけど、そこになんとも言えん違和感を感じる今日この頃。 榊正宗@BlenderQuiz @megamarsun 私はいつも自分自身の経験からクリエイターの目指すべき道を語ってるつもりだけど、どうも私の言葉よりも若者を食い物にしてシェアビジネスを勝ち抜こうとする営業マンの言葉のほうをみんな信じちゃうんだよね。まあ、私は一時的なシェアビジネスには興味ないし長く使えるものがいいと思うがね。 榊正宗@BlenderQuiz @megamarsun UnityやUnrealは手段であって、つかってもいいけど崇拝する対象では
どうも上津原です。 今回は、実装時に初心者だから(だと思う)つまずいたポイントと、どう解決したかをUnity操作、Oculus Rift対応それぞれに分けて紹介していきたいと思います。 教える立場の人は、完全初心者が3Dゲームに手を出すとどういうところにぶつかるのか? これから始める人は、ぶつかる前にどこを押さえておけばいいのか? それらの参考になれば嬉しいです。 では、Unity操作編、始まりです! 3Dゲームの基本 3Dゲームには、Z軸や重力、当たり判定、ライティング、カメラ…いろいろな要素が絡みます。 そんな中、盛大に転んだものを3つお伝えします。 オブジェクトが地面を通り抜けて落ちていく! 本をひと通り試した私は、ある程度もう知ってるもんね〜という心持ちでプロジェクトを作っていました。 そこで一番最初のつまづきがきました。 「この3Dモデル配置してRigitbodyで重力付きの物が
WebGL Advent Calendar 2014の13日目の記事です。 3Dのスキルなんてものは1mmもないわたくしが、お勉強したログをまとめてみます。 Three.jsのバージョンは68時点のものです。 参考にしたもの three.jsのドキュメント three.jsのサンプル three.jsによるHTML5 3Dグラフィックス〈上〉―ブラウザで実現するOpenGL(WebGL)の世界 ドキュメントとサンプルがしっかりしてるので、それだけでも事足りそうだけど、本を読んだほうが早い。記事中で上巻と書いているのはこの本のことです。ただし、2013年9月に出版されたものなので、ちょっと古いところもあります。 Three.jsの超基本 こんなノリだと動く! renderer作成 scene作成 camera作成 lightをsceneに置く meshをsceneに置く meshは素材のma
イントロダクション 初めまして! 面白法人カヤックでフロントエンドエンジニアをやっております、ごんと申します。 今回はタイトルの通り、Three.js の記事を書かせていただきました。 先月、JRA(日本中央競馬会)の年末のビッグレース・有馬記念のプロモーションとして、シン・アリマというキャンペーンが行われ、弊社では、そのWebサイト制作などをお手伝いさせていただきました。 このキャンペーンは、有馬記念とシン・ゴジラのコラボレーション企画で、スペシャルWebサイトでは、競走馬の名馬アリマとゴジラが、市街地や中山競馬場でデッドヒートを繰り広げるという、概ね荒唐無稽なゲームを遊ぶことができました。 残念ながらすでに、サイトの公開期間が終了してしまい、現在はゴジラや名馬アリマの雄姿を見ることはできないので、スクリーンショットを貼ります。 シン・アリマでは、WebGL を利用し、モバイルブラウザ上
ジオメトリ (プリセット)TextGeometry[テキスト]日本語フォント PlaneGeometry[平面] CircleGeometry[円] CubeGeometry[直方体] SphereGeometry[球] CylinderGeometry[円柱] TorusGeometry [トーラス(ドーナツ)] TorusKnotGeometry [トーラス結び目] LatheGeometry[回転体] ConvexGeometry[凸包] TetrahedronGeometry[正4面体] OctahedronGeometry[正8面体] IcosahedronGeometry[正20面体] PolyhedronGeometry[多面体] TubeGeometry[管] ParametricGeometry [パラメトリック曲面] ExtrudeGeometry[] ShapeGeo
はじめに エロ画像は最高です。 エロ画像さえあれば、誰でも自由にエッチなことができます。たとえ彼女がいないブサメンであっても、一人で性的に興奮することができます。そこに確かな満足を覚えて、幸せに浸ることができます。どんな嗜好も思いのままです。 故に我々人類にとって、エロ画像を集めることは、フンコロガシが糞を転がすのと同じように、種としての習性と称しても過言ではない行いなのではないかと思います。 しかしながら、我々は霊長類の長たる生き物です。かれこれ数万年に渡って同じように糞を転がし続けているフンコロガシと同じではいけません。より効率的に、より意欲的にエロ画像を収集してこその人類です。 ただ、そうは言ってもエロ画像の収集は非常に大変です。様々なサイトを巡り、十分に吟味した上で、フィッティングのあった品々を、確たるスキームに合わせて収集、構造化してゆく必要があるのです。日によって必要な一枚が異
JavaScript 3DライブラリThree.jsの解説書。実用的なサンプルを例示しながら、Three.jsによるウェブ3Dコンテンツ作成のすべての側面を解説します。対象読者は、初中級のウェブ開発者。JavaScriptとHTMLの基礎知識があれば数学やWebGLに詳しくなくてもかまいません。本書では、光源や影、マテリアル、ジオメトリ、パーティクルなど3Dシーンの作成に必須の基本的な内容から、カスタムシェーダーや物理エンジン、立体音響の利用といった応用的な内容までをわかりやすく丁寧に解説します。日本語版では、モバイルVRアプリの開発と、MikuMikuDanceモデルデータをブラウザ上で扱う方法についての解説を巻末付録として収録しました。 本書のサンプル 訳者まえがき まえがき 1章 初めての3Dシーン作成 1.1 Three.jsを使用する要件 1.2 ソースコードの取得 1.2.1
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
So this is the first time, that you can provide 3D content without forcing the users to install special libraries or viewers. The currently well browser support will still be improved in the next time. But even when a user with a non WebGL browser visits your page, Three.js gives you the possibility to share your content. You can render the scene with a hardware accelerated WebGL renderer, or, if
2016年後半にも登場が予定されているAppleの新OS「macOS」および「iOS 10」などの標準ブラウザとなる「Safari 10.0」の新機能や仕様がAppleの開発者向けページで公開されています。 Safari 10.0 https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html 【Web API】 ◆IndexedDBのサポート IndexedDBを実装することで、W3Cの勧告基準に完全対応。これにより、オフラインで使用するWebアプリケーションの構造データを保存するためおよび、クライアント側で大量のデータをキャッシュするリクエストを行うAPIを利用可能に。 ◆プログラマティックな切り取りとコピーに対応
今年はVR元年と呼ばれています。 実は過去にも何度かVR元年と呼ばれ、VRが来る、と言われていた年があります。 ですが、今年はいよいよそれが本格的になりそうな状況になってきました。 そこで今回は、「今からWebVRに備えよう!」ということで、WebVRとはなにか、それを利用して何ができるのか、利用シーンはどうか、といったことに焦点を当てたいと思います。 VR元年 本格的になりそうなのはなぜか。まずひとつ挙げられるのはOculus Rift(詳細は後述)に代表される、いくつかのヘッドマウントディスプレイ(以下、HMD)が比較的安価に家庭で利用できるようになったことです。 今年に発売される予定のものだけでも、Oculus Rift、HTC Vive、PlayStation VR、FOVE(開発キット版)など様々なHMDが市場に登場する予定になっています。 またこれらが注目される理由として、現在
(編注:2020/10/01、いただいたフィードバックをもとに記事を修正いたしました。) 私は週末のほとんどを家族と過ごし、読書を楽しみ、それから、現在関っているオープンソースプロジェクトの作業に時間を割いています。そのプロジェクトはここStack Overflowで従事している仕事と重なっていますが、全く同じというわけではありません。多くの開発者はサイドプロジェクトに取り組むことで修練を積んだり、キャリアを発展させたり(あるいは単に遊んだり!)しています。Stack Overflowではプロフェッショナルから趣味の人まで向けに、あらゆるタイプのテクノロジをサポートします。いつ作業をしていても、質問に答えられるようにしているのです。では、平日と比べて週末にはどんなプログラミング言語についての問い合わせが多いでしょうか。 Kaggleで公開されている StackLite dataset を使
Log.where('created_at > ?', 24.hours.ago).where(type: 'error') って叩きたいのだけど、 created_at にインデックスなんて張ってないので全力でフルテーブルスキャンになって結果が返ってこない😱 前提 created_at にインデックスなんて張ってない でも id は auto_increment でだいたい日時順に振られてることが期待できる 解決策 インデックスがなければ自分で二分探索すればいいじゃない! ってのを書いたのでご活用ください。 class ActiveRecord::Base # @param [Time] created_at # @return [ActiveRecord::Base] def self.find_closest_created_at(created_at) return if sel
はじめに 本エントリは Unity Advent Calendar 2014 8日目の記事になります。 Unity 5 からは Build ターゲットに WebGL が追加されます。Unity 5 プリオーダ向けベータ版で現在試すことが出来ます。 Unity 2020.2b - Unity 今年の 3/18 に行われた GDC2014 で Unity 5 が発表されたタイミングで WebGL 対応が発表されました。日本でも 4/7、8 で行われた Unite 2014 においても WebGL についての講演があり、その動画や講演資料を公式サイトから閲覧することが出来ます。 http://japan.unity3d.com/blog/press/unity5 http://japan.unity3d.com/unite/unite2014/schedule Unity と Web デプロイメ
先にお断りしておきますが、コンピュータ将棋の開発もDeep Learningも専門分野ではないので、外野の素人が垂れ流してる妄想に過ぎません。 技術解説のつもりですが、どちらかというと自分の中の情報整理に近いです。むしろ、誰か詳しい人が書いてください!(俺が読みたい) Ponanza Chainer http://www2.computer-shogi.org/wcsc27/appeal/Ponanza_Chainer/Ponanza_Chainer.pdf 先週、世界コンピュータ将棋選手権(5月開催)のアピール文書が公開されました。 開発メンバー 開発アプローチ 演算リソース その中でPonanza開発チームが上記全てに国内最高峰を取り揃えているという宣言に、ネット上が震撼しました。 今年の世界コンピュータ将棋選手権のPonanzaはたぶんめちゃめちゃ強いことになる。過去現在、そして下手
Vue.jsとElectronでシンプルなTwitterクライアントを作った。 vue-twitter-client きっかけとしては一言で言うとフロントエンド周りの勉強。 2017年1~3月の振り返りにも書いた通り。 自分はモダンなフロントエンドの開発に疎かったので重い腰を上げてそろそろやるかという気持ちになって3月中頃くらいからはじめた。 Vue.jsについては2,3週間前くらいから触りはじめている。 Vue.jsはちゃんとしたSPAからフォームにちょいと味付けみたいな使い方もできたり小回りがきく。 個人的にはReactでの開発よりやりたいことが直感的に書ける気がしてるので使いやすいという印象。 とりあえず最初はTODOアプリやAPIを叩く小さなフィードを作って、次にNuxt.jsでSSRできるミニサイトを作ったりで大体使い方は覚えてきたというステータス。 ライブラリでいうとvuex,
表題の通り、数年勤めたソニー株式会社を退職しました。 個別具体の退職理由はいろいろあってそれらは後述しますが、退職を決めた基本的な理由は、個人的なキャリアパスの設計と会社の方針のミスマッチ、労働観のミスマッチ、技術投資の考え方のミスマッチの三点に集約できると思っています。 キャリアパスの設計と会社の方針のミスマッチ私はソニーでソフトウェアエンジニアとして働いていました。 ソフトウェアエンジニア(を目指す人間)にとってソニーと言えば、"自由闊達な理想工場"、エンジニアが自由に活躍できる会社、日本のメーカーなのにソフトウェアもちゃんとつくれる会社、などのイメージがあるかと思います。私もそう思っていました。 実際会社は説明会などでそういった説明をしましたし、そういったイメージを前提に私はソニーを選び、「エンジニアとしてプロフェッショナルになる。品質が高く、お客の求める体験を作り出せる人間になる」
今年も4分の1が終わったのでプライベートの振り返りをしてみた。 今年はひっそりと0から学んで何かしらの成果物を出すシリーズを趣味でやってる。1月は画像処理、2月はDNN、3月はVue.jsとやってきた。4月は何しよう。— razokulover (@razokulover) 2017年4月2日 1月はディジタル画像処理本から始まって関連する処理をOpenCVで実装したりcanvasでやったりした。成果物としては低画質画像メーカーとかができた。— razokulover (@razokulover) 2017年4月2日 [asin:B013LBJ3GQ:detail] 2月はDNN。はじめてのDeeplearningを読んで、mnistから始まってCNN,DCGANで遊ぶくらいまではざっくりやった。chainerを使った。実際理解は浅いけど線形代数の理解が深まったのは良かった。成果物はweb
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く