エディタの左上にリアルタイムに顔を表示する - hitode909の日記
エディタの左上にワイプでリアルタイプにカメラの入力が出てたらバラエティ番組みたいになって便利かと思ってやってみたけどただ意味不明な状態になるだけでとくに役には立たなかった，リモートペアプロするときにこちらの顔を送れるのは便利かもしれない． Atomのコンソールにこれを貼ればワイプ出せるはず． navigator.mediaDevices.getUserMedia({audio: false, video: true}).then((stream) => { const video = document.createElement('video');video.draggable=true;document.body.appendChild(video); video.srcObject=stream; video.style='position: absolute; left: 7vmin
JavaScriptによるデータビジュアライゼーション入門
TOPICS Web , Database , HTML/CSS , JavaScript 発行年月日 2015年10月 PRINT LENGTH 396 ISBN 978-4-87311-746-1 原書 Data Visualization with JavaScript FORMAT PDF JavaScript、HTML、CSSといったWeb開発者が日頃使い慣れている技術を使って、効果的で印象的なグラフの作成方法をチュートリアル形式で説明しています。さまざまな可視化手法の中から、データをより効果的に魅せるには、どの表現方法がよいのか、どのような技術が必要なのかを解説します。基本的なグラフから、樹形図、ヒートマップ、ネットワークグラフ、ワードクラウド、時系列グラフ、地理情報、複合グラフなど、ステップバイステップで徐々に機能を追加したり改善を加えながら高機能かつインパクトのあるインタラ
Python pandas のデータを Highcharts/Highstock + Jupyter でプロットしたい - StatsFragments
R を使っている方はご存知だと思うが、R には {htmlwidgets} というパッケージがあり、R 上のデータを任意の Javascript ライブラリを使ってプロットすることが比較的カンタンにできる。{htmlwidgets} って何？という方には こちらの説明がわかりやすい。 RPubs - htmlwidgetsでJavascriptの可視化をRに 同じことを Python + pandas を使ってやりたい。サンプルとして利用する Javascript ライブラリは 上の資料と同じく Highcharts、Highstock にする。 www.highcharts.com 補足 pandas-highcharts という Python パッケージもあるが、このエントリでは任意の Javascript ライブラリで使えるであろう方法を記載する。 Highcharts でのプロット
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編）
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編） 西田慎吾（株式会社アイ・エム・ジェイ） WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編） 前回に引き続きHTML5 Japan Cup 2014にてWebGL賞と優秀賞をいただいたオンラインレースゲーム、JS-Racingの技術解説をさせていただきます。 サーバサイドの使用技術 サーバサイドの技術としてNode.jsを使用しています。Node.jsはサーバーサイドで動作するJavaScriptで、ノンブロッキングI/Oというモデルを採用しています。非同期処理でデータベースへのアクセスとWebページの表示を別々に行ってくれるので、ストレスなく大量のページの表示が出来ます。また、Socket.ioというライブラリを扱うことで、WebSocke
軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog
Vue.jsは軽量なMVVMライブラリ。 vue.js http://vuejs.org/ 使ってみた感じ、かなり手触りがよいので、紹介する。 概要 handlebars風のテンプレートを書いて、DOMを展開する。普通のテンプレートエンジンと違い、$dataアクセッサを通じて値を書き換えることで、テンプレート展開後も値が同期する(!!!)。 一言で言うと軽量Angular。コード読んだ感じ、内部的にもAngularから大量にコードを持ってきた痕跡がある。$watchとdirective定義がキモなのは同じ。 とはいっても、軽量なのは使う側のAPI側だけで、内部実装はそれなりに重い。APIを軽量にすることで、Angularのデメリットである学習コスト部分を限りなく削ることを目標にしているんじゃないだろうか。 大雑把な使い方 テンプレートを書く。対応するデータ構造を書く。{foo: 'bar'
サーバーを使わずにクロスドメインなスタンプラリーシステム。 - このブログは証明できない。
オフィスの近くに寿司屋があるんですが、平日は500円で寿司ランチを食べることができます。一方、某社のレンタルサーバーのスタンダードプランは月額500円です。ということは、レンタルサーバーを解約すれば、毎月寿司ランチを食べることができます！ そこで、サーバーを使わないスタンプラリーのシステムを作りました。いくつかのネットショップがあって、ショップのサイトを全部まわるとプレゼントに応募できるという状況をイメージしてください。サイトはすべて違うドメインです。 デモ。 デモを用意しました。メインページ1つと寿司屋のサイト3つです。ドメインが用意できなくて、すべて同じドメインに置いてます。これが全部バラバラのドメインでも動きます。寿司屋のサイトでスタンプを押すと、メインページにスタンプが貯まっていき、3つそろうと何か起こります。 http://shunsuk.net/rally/rally_serv
JavaScriptの落とし穴
4. JSのオブジェクトは 連想配列みたいなもの 1 // 空のオブジェクトを作成 2 var dog = {}; 3 4 // プロパティをひとつ追加 5 dog.name = "Pochi"; 6 7 // ブラケットでもアクセスできる 8 dog['breed'] = "Shih Tzu"; 9 10 // 関数をひとつ追加 -> メソッド 11 dog.getBreed = function () { 12 return this.breed; 13 } 5. JSのオブジェクトは 連想配列みたいなもの 1 // 同じものをオブジェクトリテラルで表記 2 var dog = { 3 name: "Pochi", 4 breed: "Shih Tzu", 5 getBreed: function () { 6 return this.breed; 7 } 8 }; 6. クラスっぽい
CentOS6へJasmineによるCI環境を作る(1) | それなりブログ
yum install ruby yum install ruby-libs yum install ruby-devel yum install ruby-rdoc yum install ruby-ri yum install rubygems yum install java-1.7.0-openjdk yum install java-1.7.0-openjdk-devel yum install xorg-x11-server-Xvfb yum install firefox yum groupupdate 'X Window System' RubyはJasmineをGem版で入れるために必要 JavaはSeleniumサーバのために必要 Xvfb / firefox / X Window System は、仮想バッファを介してFirefoxでアクセスするために必要 ※ いくつ
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
真犯人による犯行声明メール全文まとめ - satoru.netの自由帳
※メールを受け取ったご本人である落合弁護士によって全文が公開されました (2012/10/21追記) 報道された犯行声明の映像を読み取って原文のまま文字起こしてみた。 また、新聞社各社から公開されている要旨もまとめています。 各社報道機関によって公表されたメール文面の映像をもとに文字起こし 読み取れる限り一字一句原文のまま再現 報道で未公表、解読ができていない部分、被害者などの実名部分は『######』で表現 Fromのメアド部分は報道＆Yahoo!アカウントに設定されているニックネーム等から再現＞検証過程 誤字脱字、情報提供はコメ欄に投稿していただければすぐに修正します ※あくまで荒い映像からの再現なので見落としや誤読がある可能性あり ※追記：産経新聞による要旨まとめを追加 2012/10/18 1:00 犯行声明全文 日付：2012年10月9日 23:22 (Wed, 10 Oct 2
コードリーディングに最適！たった200行で作れるHTML5製テトリスのプログラミング学習ムービー - Chrome Life
みなさんは、フルスクラッチでテトリスを作ることができますか？ プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。 JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。 特にグラフィックやアニメーションをうまく使ったものを作るには、それなりの経験値が必要だと思います。 そこで、今回ご紹介するのが、教育目的で作られたHTML5製テトリスのプログラミング学習ムービーです。 HTML5 tetris - making of HTML5 tetris - making of 驚くべきことに、 たったの４５分でテトリスが完成！ それもフルスクラッチで、jQueryなどのライブラリーを一切使っていません。 Youtubeのムービーは早送りしていますが、動きを確認しながら実装しているのが分かります。 実際に、こちらでテトリスをプレ
JSX - a faster, safer, easier JavaScript
JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers. Being developed at DeNA as a research project, the language has following characteristics. faster JSX performs optimization while compiling the source code to JavaScript. The generated code runs faster than an equivalent code written directly in JavaScript. The gain may vary, but even the optimi
作りたいもの: JavaScriptのコードの質を保つためのガードレール - 西尾泰和のはてなダイアリー
増井さんの作りたいものリストを作ろうというスライドを見て「確かに『いつかやる』リストに入れてるだけじゃ発展しないから、公開しても問題ないものは公開したらいいなぁ」と思ったので早速やってみました。3つ目。 JavaScriptのコードの質を保つためのガードレール JavaScriptは柔らかい言語で、typoとか変数名の変え忘れが実行時までエラーにならない。しかもしれっとundefinedとかになって、そのままHTMLやSVGのpath文字列に埋め込まれてたりしてデバッグにコストが掛かってしまう。人間は間違える生き物だから、間違いをなくすことはできない。だから間違えた時になるべく早く気づけるようにする仕組みが必要だ。 Google Closure CompilerはJavaScriptのソースコードを静的に検証してエラーを報告してくれる。であれば自分がソースコードを編集している時にバックグラ
Dygraphs — main page
⚠ Please visit the official Dygraphs homepage https://dygraphs.com/ instead. You are reading this on a mirror, which may have outdated, incomplete and/or locally patched information, or as part of the Debian package; links may not work. dygraphs is a fast, flexible open source JavaScript charting library. It allows users to explore and interpret dense data sets. Here's how it works: This JavaScrip
「enchant.js」でゲームを作ろう！ HTML5とJavaScriptによるアクションゲーム制作入門
「enchant.js」でゲームを作ろう！ HTML5とJavaScriptによるアクションゲーム制作入門 ライター：Veki HTML5でゲームが作れるライブラリ「enchant.js」がユビキタスエンターテインメントから発表されました。Webブラウザだけでスプライトを使ったゲームが動くとのことで興味を持った人も多いのではないかと思います。ここではenchant.jsを使ったゲーム作りについて見ていきたいと思います。 enchant.jsがサポートしているHTML5は，長らく使われていたHTML4に代わる次世代Webシステムの要となるものです。HTML5ではWebページの動的な要素，とくにグラフィックスの描画機能などが大幅に強化されており，これまでFlashを使わないとできなかったようなことが，HTMLとJavaScriptだけでできるというのが最大の特徴となっています。 ここにきてIn
JavaScriptをやり始めた人が理解したほうが良いJSONパーサのコード - sifue's blog
そろそろ4月も近いということもあって、新たにWeb業界やSIer業界に入るぞという方がプログラミングの勉強をし始めているころでしょうか。最近は、エンタープライズでもWebクライアントが主流になりつつあるのでJavaScriptの習得は避けては通れない道だと思います。また、Node.js等サーバーサイドのJavaScriptも出てきたこともあって、非常に有用な言語になりつつあります。 そんなJavaScriptを学び始めている人の中でも、ある程度プログラミングをやったことがある人がJavaScriptの綺麗な書き方を学ぶのに絶対理解しておいた方が良い300行程度のソースコードがあります。 それは、JavaScript: The Good Partsに載っているJSONパーサのコードです。 JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス 作者:
JavaScriptの初見で読みづらいシンタックス＆パターン9種
JavaScriptの暗部を感じるカオス JavaScriptのライブラリを読み解いていると，「お前は何を言っているんだ状態」に陥ることがよくあります．難解なコードを通り越して黒魔術になるとついていけません…． そんなコードリーディングをする中で，初見では意味が分からなかったり，分かりづらかったりした記法をまとめてみます．コードリーディングの一助になりますれば幸い． eachな感じのループ×2 比較的簡単な類ですが，定石パターンなので一応．色々あると思いますが，自分がよく使う2パターンだけ紹介します． var elms = [1, 2, 3], e, i = 0, while (e = elms[i++]) { // おぅふ // i -> 1 } 単純に配列から1個ずつ取り出すだけなら上記のような感じです． var elms = [1, 2, 3], e, i = 0, iz = elm
「実のところ、全てを備えていない言語 の方がプログラミングは簡単である」 デニス・リッチー “A language that doesn’t have everything is actually easier to program in than some that do.” – Dennis Ritchie 1 �
「実のところ、全てを備えていない言語 の方がプログラミングは簡単である」 デニス・リッチー “A language that doesn’t have everything is actually easier to program in than some that do.” – Dennis Ritchie 1 ソフトウェアスタックはどんどん 深くなっています。 The software stack is growing ever deeper. 2 プログラマのキャリアはローレイヤの 周辺だけに留まらなくなりました。か といって、LLなどのハイレイヤだけが それにとって変わったわけではありま せん。 そう、今は「ブラウザ」という領域が あるのです。 Programmers can spend an entire career in not just user-space... no
Getting started | Less.js
It's CSS, with just a little more. Use with Node.js: npm install -g less > lessc styles.less styles.css Or the browser: <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> Or try the online playground ! 🆕 Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official do
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - brian-c/phantom-limb: Fake touch events in desktop browsers (unsupported)
