Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

今回は赤外線信号の基礎知識、読み取り/送信方法までを説明し、次回でWebブラウザーのUIとリアルタイムに連携させます。 下記は必要な材料のリストです。今回もGroveモジュールを使います。 Grove Baseシールド →前回使用したものと同じ Grove 4ピンケーブル →2本必要 赤外線センサー(WLS12136P) →このセンサーにリモコンを向け、リモコンのボタンを押すことで赤外線信号を読み取る 赤外線LED(WLS12148P) →リモコンで発生した赤外線パターンと同じ信号をここから発生させて、家電を操作する リモコンはどういう信号を送信しているの? 早速、某エアコンのメーカーにリモコン信号の仕様を問い合わせましたが、残念ながら公開していないとの回答でした。 でも、大丈夫です。道が閉ざされたわけではありません。リモコンから送信される赤外線パターンを学習し、それと同じ信号を赤外線LE
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
Node.jsを触って勉強してたらWebサイトができました。 結婚式の余興.jp - 結婚式の余興を考えるときに参考になる動画を集めました Youtubeから結婚式の余興の動画を集めてくるサイトです。Web開発は初めてだったので、つくった流れや勉強の方法などをまとめてみます。 9/14追記)スマホ対応をやりました! 普段はiOSアプリを書いています 普段はiOSアプリ開発者をやっていて、仕事と趣味でObjective-Cを書いてます。とても楽しくて2年くらい続けてるのですが、サーバーサイド書けたら幅が広がっていいな、とずっと思ってました。 普段の週末は個人アプリを作ったりしてるのですが、夏休みだし新しいことやろうと思ってNode.jsを触ってみました。 つくったもの 結婚式の余興.jp - 結婚式の余興を考えるときに参考になる動画を集めました 結婚式の余興動画がまとまっていて、だら見できる
データをストリームとして表現する方法と、ストリームを変換する方法を紹介する。 ストリームはメッセージが流れる川である Pub/Subメッセージングモデルでメッセージを流すためのオブジェクトのことをストリームと呼ぶことにする。ストリームにはメッセージをPublishでき、またメッセージを受け取ったときの処理をSubscribeできる。例えばキーボードからの入力をPublishして、内容をコンソールに出力するような処理をSubscribeできる。 kamo.jsでストリームを表現する ストリームについて説明するために、kamo.jsというストリームを表現するためのライブラリをつくった。kamo.jsは、ストリームを作成するためのkamo.Streamというコンストラクタ関数を提供する。このコンストラクタ関数から作成されたオブジェクトは、publishとsubscribeというメソッド(※プロパ
テキストや背景のカラーをアニメーションで少しずつ変更するスクリプトをDesizn Techから紹介します。 Playing with jQuery Color Plugin and Color Animation demo デモでは、テキストのカラーを変更するもの、背景を変更するもの、それぞれ異なるカラーに変更するものなどがあります。 テキストのカラーを変更する場合は、下記のように指定します。 <textarea name="code" class="html" cols="60" rows="5"> $(".first a").hover(function() { $(this).animate({color: "#00eeff" }, 400); },function() { $(this).animate({color: "#FFFFFF" }, 500); }); </textar
今注目のInternet of Thingsを実現するセンサーデバイスのインターフェースとしてArduinoを使い、電子工作の基礎から実装までを紹介する連載。 Arduinoで始めるWeb技術者のためのIoT入門(6): Socket.IOでセンサー&MongoDB~AngularJSアプリ間の通信を行う 家電~Webアプリ間の双方向通信をSocket.IOで行うアプリについて、サーバー側のArduino連携やMongoDBへのデータ保存などと、クライアント側のAngularJSに分けて動作を解説します。(2014/11/19) Arduinoで始めるWeb技術者のためのIoT入門(5): MEANスタックで家電制御アプリを作るための設計・準備と温度湿度センサーからのデータ読み取り 家電~Webアプリ間の双方向通信をSocket.IOで行うための設計や、MEANスタックのインストール、Ye
Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか
クッキーより怖いcanvas fingerprintingって何?迂回方法は?2014.07.28 16:009,463 satomi 問題:ホワイトハウスとYouPornが共通でもってるもの、なーんだ? こたえ:canvas fingerprinting 「canvas fingerprinting(canvasの指紋採取)」というのは、最近大手サイトで採用が広まってる新手のオンライン追跡ツールのことです。クッキーと違って、ユーザー側からは探知もブロックもできないという、とんでもない野郎です。 まさにユーザーの知らぬ間にウェブの閲覧行動がサイトに筒抜け、というマジックミラー状態。その現状をProPublicaが記事にしていますよ。 「canvas fingerprinting」を最初に発見したのはプリンストン大学と英ルーヴェン大学の研究チームです。ここが発表した「The Web Neve
このページの最終更新日:2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav
7月19日. 久しぶりの3連休. 予定はぎっしりだった. だが神からのお告げがあった. なんか作れと. 気づいたらオレの指は Macbook Air の薄いキーボードの上だった. ってことで連休中にちょっとしたツール作りました. 気軽にプログラミングを始められるWebエディタです. 名前は runstant. run + instant の略で, インスタントラーメンのように一瞬で気軽に実行できるよって意味です. ログイン不要, サーバー通信なしで一瞬で プログラミングを始めることができます!! 一応, tmlib.js 公式エディタ的な 位置づけなのでデフォルトで tmlib.js のサンプルが入ってます. とりあえず触ってみてください -> こちら 特徴 ログインの必要ないよ 状態を hash で保存するのでサーバー通信しないよ html/css/javascript が書けるよ ちょ
Webアプリケーションを開発する際にはテキストエディタやIDEを使うのが一般的です。しかし開発してWebブラウザに表示を切り替えて再読み込みして…というのは手間がかかるものです。 そこでWebアプリケーションをWebブラウザ上で開発してしまおうというのがChrome Dev Editorです。JavaScriptだけでなくDartを使った開発にも対応したエディタになります。 Chrome Dev Editorの使い方 こちらがメイン画面です。Chrome Dev EditorはChromeアプリとしてインストールされます。 最初にプロジェクトを作成します。 エディタはハイライトがついたもので使いやすいです。 内部サーバ機能付きです。 GitやChrome Web Storeへのデプロイ機能があります。 Web Starter KitやPolymerをベースに生成することもできます。 Chr
4月に新入社員としてWeb制作会社やSIerに入社した方も、開発業務に携わるようになり、HTML/CSS/JavaScriptを使ったフロントエンド開発を始めた方も多いかと思います。HTML/CSS/JavaScriptはWebブラウザーの上で動かせるので、気楽に開発が始められる半面、「デバッグが難しい」「不具合原因の特定が難しい」「どこにミスがあるのか分からない」というような話をよく聞きます。 そんなときに役に立つのがブラウザーに付属している「開発者ツール」です。「開発者ツール」を上手に使うと、不具合の原因特定を効率的に行えます。以下のように現行の全ての主要なブラウザー(Mozilla Firefox/Google Chrome/Microsoft Internet Explorer/Apple Safari)は「開発者ツール」を持っています。ブラウザー自体が無料ですので、もちろんこれら
Webカメラ映像から人を消すJavascriptを実装しました。 @yabuki様の「風景から歩行者を消す手軽な方法」に発想を得て作成した物です。 風景から歩行者を消す手軽な方法 | 配電盤 Taro YABUKI (yabuki) on Twitter カメラへのアクセスを許可するとWebカメラ映像から人を消すスクリプトが発動します。 実装のポイントは以下の通りです。 WebRTCでWebカメラ映像取得する ピクセル単位のアクセスをしたいので、Webカメラ映像のバッファを不可視なCanvasに落とし込む Canvasのピクセルの平均値を計算する(全部の値は持っていられないので逐次更新する平均値とした) 平均値の計算結果を可視なCanvasに描画する 詳しくは下記ソースをご参照ください。 ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適
Private content!This content has been marked as private by the uploader.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く