TechCrunch | Startup and Technology NewsBoeing’s Starliner spacecraft has successfully delivered two astronauts to the International Space Station, a key milestone in the aerospace giant’s quest to certify the capsule for regular crewed missions. Starliner…
非同期プログラミングを驚きのシンプルさに (するかもしれない) Flow.js を公開しました。 - latest log
(ε・◇・)з o O ( (ミ・◇・ミ) o O ( あたし。ずっと思ってた… (ミ・◇・ミ) o O ( あたしの脳みそだと Deferred/Promises は、ちょっと難しすぎるって… (ミ・◇・ミ) o O ( jQuery.Deferred 解説記事をいくつかみたけど、すごく… モジモジしてて、ちょっと縦長すぎるんですもの… (ミ・◇・ミ) o O ( だから作っちゃった… ).done(); 非同期処理をシンプルに書ける、とても小さなライブラリをリリースしました。 Deferred/Promises は既存の構造や, そもそもの考え方を大きく改変する必要がありますが、 flow.js はあまり大きな違和感もなく、現在の流れを維持したまま導入できると思います。 使い方はこちらをごらんください http://www.slideshare.net/uupaa/flowjs リポジ
ページ内の見出しに合わせて目次を自動生成する
Result 簡易的なものなので汎用性は高くは無いかも。 jQuery(function($) { $.fn.toc = function(o, p) { p = $.extend({ title: "タイトル" }, p); //見出しを入れるボックスを生成 this.prepend('<div id="toc-list"><strong>' + p.title + '</strong><ol></ol></div>').children(o).each(function(i) { i = i + 1; //IDを合わせて見出しへのページ内リンクと目次へのページ内リンクを生成 $(this).attr('id', 'section-' + i).nextUntil(o).after('<a href="#toc-list">Topへ ⇑</a>'); $('<li><a hre
時間が経過すると自動的にメールを削除するGmailフィルターをつくる
メールを自動的に振り分けるために私は実にたくさんのGmailフィルターを作りますが、一つの難点はMacのMail.appにあるようなスマートフォルダを作成して、自動的に古いメールを削除するといったことができない点でした。 というのも、フィルターはメールが届いた時点で動作するもので、タイマーのように時間が経過してから発動するものではないからです。 しかし本家Lifehackerの記事経由で知ったjohnedayのブログ記事でGoogle Apps Scriptという仕組みを利用してこうした時間経過で発動するフィルターを作る方法があることを知りました。 どちらの記事にも詳しいステップが割愛されていましたので、そのあたりを埋めつつご紹介します。### Google Apps Scriptsを作成する Google Apps Scriptはクラウドベースの Javascript 実行プラットフォー
メンテナブルJavaScript
目次 はじめに 第I部 スタイルガイドライン 1章 基本フォーマット 1.1 インデントのレベル 1.2 文の終端 1.3 1行の長さ 1.4 改行 1.5 空行 1.6 命名 1.6.1 変数と関数 1.6.2 定数 1.6.3 コンストラクタ 1.7 リテラル値 1.7.1 文字列 1.7.2 数値 1.7.3 null 1.7.4 undefined 1.7.5 オブジェクトリテラル 1.7.6 配列リテラル 2章 コメント 2.1 1行コメント 2.2 複数行コメント 2.3 コメントを使う 2.3.1 難解なコードにコメントを付ける 2.3.2 エラーになりそうな箇所にコメントする 2.3.3 ブラウザ特有のハック 2.4 ドキュメントコメント 3章 文と式 3.1 波括弧を揃える 3.2 ブロック文での空白 3.3 switch文 3.3.1 インデント 3.3.2 caseか
node.jsとGoogle Chromeによるローカルアプリケーション開発·node-chrome MOONGIFT
node-chromeはnode.jsをバックエンドに、フロントエンドをChromeを使ってローカルアプリケーションを開発します。 node.jsを使っていると何でもJavaScriptで完結したい気分になってきます。そこでターゲットになるのがローカルアプリケーションです。Gtkなどを使うことなく、何とChromeを使ってしまうソフトウェアがnode-chromeです。 デモアプリを立ち上げたところ。 デモのコードです。 node-chromeではGoogle Chromeのパスを指定し、普段使っているプロセスとは別でWebブラウザを立ち上げます。後はnode.jsのサーバとして動くのみです。ローカルでWebアプリケーションを立ち上げて利用するという新しいスタイルが実現しそうです。 node-chromeはnode.js製のソフトウェア（ソースコードは公開されていますがライセンスは明記され
PeerJS - Simple peer-to-peer with WebRTC
The PeerJS library PeerJS simplifies WebRTC peer-to-peer data, video, and audio calls. PeerJS wraps the browser's WebRTC implementation to provide a complete, configurable, and easy-to-use peer-to-peer connection API. Equipped with nothing but an ID, a peer can create a P2P data or media stream connection to a remote peer. Downloads Setup Include the library with a script tag <script src="https://
CSS3Dで作られたリアルな“雲”、チュートリアル付き 【増田 @maskin】 | TechWave（テックウェーブ）
HTML5といったウェブ標準化技術には賛否いろいろあるけれど、世界のITシーンでは常にホットなトピックであるのは変わりない。 例えば、これ。スペイン・バルセロナのJaume Sánchez Elias氏が制作したインタラクティブな雲。最新のウェブブラウザでページ (http://www.clicktorelease.com/code/css3dclouds/) を表示すれば、驚くことうけあい。 リアルな雲が、マウス等の動きに応じて動くのはもちろん、雲を子細に渡りチューニングをすることもできる。もちろん、ウェブの技術だけで、プラグインなどは使用していない。 Windows 7の資産も活用可能 これは、CSS3Dを中心に、簡単なJavaScriptでできているもので、単に雲っぽく表示させているだけでなく、あたかも3Dでレンダリングしたようにブラウズできるように設計されている。 どうやら、一部に
Frontrend Vol.4に行って来ましたメモ
Frontrend Vol.4 powered by CyberAgent, Inc.に行って来ました。 とてもテストについてのお話を聞けたのでとても楽しかったです。 誤字、間違いなどありましたら教えてください。 ※アンケートへのリンクを削除しました。 GUIのお話Chrome Dev toolsのお話Chrome DevTools.next http://www.slideshare.net/yoshikawa_t/chrome-devtoolsnextショートカット便利Break PointXHRとかで使う Timelineボトルネックな部分調べるのが便利 Chromeの隠しURL的なのchrome://chrome-urls で一覧できる Charlesデバック用プロキシ MapLocalローカルのファイルと置き換える AutoResponser Throttle回線のエミュレート
Webカメラから超絶カッコいいプロフィール写真を撮れるWebサービス作った - 海峡
Webカメラでめっちゃカッコいいプロフィール画像を簡単に撮れて便利.JS インターネットの皆さん、こんばんは。国民的スポーツの一つであるアニメGIFに関する記事です。 今回、Webカメラから超絶クールなプロフィール画像を撮れるWebサービスを開発したのでご紹介させて頂きます。 SNSや履歴書などに貼るプロフィール写真を撮ったら思ったよりもカッコよくなくてつらい気分になったことはありませんか？ 「動いてるときはもっとカッコよく見えてるはずなのに……」静止画になると急に生命力が失われた感じに見えてしまいます。とてもつらい思いになりますね。 そこで、簡単にもっとかっこいいプロフィール写真を撮りたいと思い、Webカメラから超絶クールなプロフィール画像を撮れるWebサービスを開発しました。 言い換えれば、Webカメラから撮った映像からアニメGIFを作れるWebサービスです。 サービス名は「Webカメ
初心者が２ヶ月でプログラミングをマスターする方法|we-blog
株式会社we-b(ウェブ)の公式ブログです。 コーポレートサイト: http://www.we-b.co.jp 感動コレクション「log」: http://www.lo-g.me ゼロからの友達づくりを経験できるアプリ「Class」: http://cla-ss.me 株式会社we-b(ウェブ)の公式ブログです。 コーポレートサイト: http://www.we-b.co.jp 感動コレクション「log」: http://www.lo-g.me ゼロからの友達づくりを経験できるアプリ「Class」: http://cla-ss.me 2012/11/23 (読了時間1分) この記事は真子(まこ)が担当しました。 「プログラミング勉強したいんですけど、どう勉強したら1人で何かつくれるようになりますか？」と学生によく聞かれます。今日はそんなプログラミング初学者に向けたエントリーです。 僕もまだ
【初心者向け】WEBクリエイターになるための入門7レッスン | DECONCEPTER
無料で学べるドットインストール 無料でプログラミングの基礎を簡単に動画で学習できるドットインストールというサイトをご存知でしょうか。こちらのサイトではHTMLやCSSといったWEBページを作るための基礎知識やWEBシステムやWEBページのデザインをするためのプログラミング言語の解説が幅広く網羅されているサイトだ。 初心者でなくても、新しい言語を気軽に学べるようになっており、WEB技術の学習に対する敷居を大きく下げてくれている。今日はこれからWEBページを作りたいという方やWEBディレクターをやっているが作り方を実はよく知らないという方が最低限押さえておきたいレッスンをピックアップする。 HTML これが書けなきゃ始まらない。HTMLは全く難しいものではありません。整形した文書をWordで作ったことがある方は多いと思うが、HTMLはインターネットに整形した文書を公開するための言語だ。 WEB
Google Chart で Imp と Click のグラフとかをうまいこと書く - tokuhirom's blog
たとえば広告システムがあるとして、Impression 数と Click 数をそれぞれ数字としてもってたとして、普通に Google Chart でグラフを書くと以下のようになります。click 数が imp 数にくらべて非常にちいさいので、このグラフは役にたちません。 が、Google Chart では targetAxisIndex というのがあるので、これをもちいて以下のように指定すれば OK でした。 options = { series: { 1: {targetAxisIndex: 1} } }; あたらしいグラフは以下のようになります。2012-10-16 が Imp のわりにすげー click 数のびててなにこれ!! っていうのがわかります。 以上のグラフは以下のようなコードで描画することができます。 <html> <head> <script type="text/jav
Googleの二段階認証用のキーをJavaScriptで生成·GAuth Authenticator MOONGIFT
GAuth AuthenticatorはGoogleの二段階認証用のキーを生成するWebアプリケーションです。 Googleの二段階認証を有効にしているとGmailなどにログインする際にAuthenticatorというアプリを使ってワンタイムパスワードを入力する必要があります。そのワンタイムパスワード生成をWebベースで行えるのがGAuth Authenticatorです。 デモの画面です。 追加の画面です。 Google Chromeアプリ版もあります。 追加してみました。面白いのはiPhoneアプリ版と同じ数値がちゃんと出ていることです。 GAuth AuthenticatorはJavaScriptを使ってワンタイムパスワードを生成します。実際iOSアプリと同じ数字が出てきますので、Googleの各サービスでキー入力を求められた際にもアプリを立ち上げる必要がなく便利そうです。 GAut
Happy Elements Labs: 150行でここまでできる！Three.jsによる3Dタイピングゲーム
カメラ # PerspectiveCamera以外にOrthographicCameraがあります。 # 引数: 視野角（垂直）、描画範囲の縦横比、カメラから一番近い描画点、カメラから一番離れた描画点 @camera = new THREE.PerspectiveCamera(40, document.width / document.height, 1, 10000) # カメラの位置 @camera.position.y = 300 @camera.position.z = 1000 レンダラー（sceneの描画を行うためのオブジェクト） # WebGLRenderer以外にCanvasRenderもあります。 # 引数のオプションは下記を参照 # https://github.com/mrdoob/three.js/wiki/WebGLRenderer @renderer = new
OREPONでクーポン出して売れて感じたこと — DECONCEPTER
仲間内のサービスを認知させるためのサービス？ 金曜にリニューアルされたOREPONですが、現在火曜日の時点で自分のクーポンにたどり着く導線が用意されていません。発行した「javascriptを実はあんまりわかってない人の為の初心者講座」のクーポンIDは92ですが、クーポンID93の「オオカワタツヤを1日8時間(休憩別)拘束しませんか?」が先にトップページに掲載され、依然自分のクーポンが陽の目を見ることは無さそうです。 よくみると先にトップに出たクーポンは顔面広告というlivertyのサービスのようですね。livertyのサービスクーポンが優先的に出ている印象です。 自分で売りやがれ！ 自分で売りやがれ！そう理解しました。 よくよく考えればgumroadもサイトでプロダクトを紹介するページはありません。 自分を売るわけだから、自分でツイートしたりブログ書いたりして自分で売るのが当たり前だ
表紙を写すと本のレビューが読めたりするHTML5アプリを作ってみた - デー
最近のブラウザはgetUserMediaという機能でJavaScriptからカメラを操作してリアルタイムに動画を読んだりできるようなので、画像認識のデモ的なものを作ってみた。 表紙検索 PCのGoogle Chrome、Opera、AndroidのOpera Mobileの場合 動画が読めるといっても実際のところ一部のブラウザでしか使えなかったので段階的に対応してみた。 まず、PCのGoogle ChromeとOpera、AndroidのOpera Mobileの最新バージョンが全ての機能が使えるブラウザです。 これらのブラウザで hyoushi.me というドメインを開くと、サイトのトップに「カメラ起動」というでかいボタンが表示されています。 IS05 + Opera Mobile （僕はウェブカメラを持っていないのでこれはIS05 + Opera Mobileのキャプチャです） カメラ
迫力満点。Webサイトの背景全部を動画に·BigVideo.js MOONGIFT
BigVideo.jsはWebサイトの背景に動画を利用し、そのまま再生できるソフトウェアです。 Webサイトの背景は単色、もしくは適度なパターン画像を使うのが一般的です。しかしそんな考えに捉われないソフトウェアがBigVideo.jsです。何と動画をバックグラウンドに指定し、そのまま再生してしまう驚きのソフトウェアです。 デモです。背景は画像ではなく動画です。バックグラウンドで再生されています。 切り替えました。すごく幻想的で格好いいです。 BigVideo.jsの力だけではないですが、前面のコンテンツは背景が透けていてマッチしています。映画のトレーラーに合わせて説明を加えても良さそうですし、ドキュメンタリー系のWebサイトで使っても良いかもしれません。動画はJavaScriptで切り替え可能ですが、最後まで行くとそこで止まるようになっています（ループ指定もできるようです）。 BigVid
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptコードをブラウザ上で動作テスト、共有できる・「Plunker」
rvl.io