JavaScript

TOKYO IDOL FESTIVAL 2016 のタイムテーブル画像化ツールを作った

日本最大規模のアイドルの祭典・"TOKYO IDOL FESTIVAL"(通称TIF)。 今年は明日からの8/5〜8/7の3日間の日程で、始まります。 TOKYO IDOL FESTIVAL 2016 で、こういったフェスってステージが複数あって観たいステージが幾つもあるなか、どの時間にどれを見る…

EC2 Spot Instanceの価格変動をターミナルでモニタリングする

というものを作った。こんな感じの。 Repository : https://github.com/sugyan/spot-price-watcher 背景 TensorFlowを使ったDeep Learningでアイドルの顔識別なんかをずっとやってきたけど、やっぱりCPUマシンだけでやっていくのは厳しいな、と思い、 やっぱ…

集中線アニメーションさせるChrome拡張

!!!集中線GIFメーカー!!!っていうのが面白くて、Goに移植されたりもしていて、 集中線GIFメーカー in Golang - syohex’s diaryじゃあJSでも出来るかな、と思ってChrome拡張にしてみた。 ブラウザ上で表示している画像たちに自動的に集中線アニメーションをつ…

ctagsでjsx(ES6 class)の定義にジャンプできるようにする

React を使うにあたって、最近は ES6 classes を使ってJSXを書くようにしているのだけど、Componentを色んなファイルに分けて書いてるとそれぞれの定義に移動するのがつらくなってきた。 そういえば普段PerlやRubyを書くときはctags -eでTAGSを作っておいて…

「React.js meetup #1」に参加してLTしてきた

React.js meetup #1 に参加してきた。参加者枠を大きく上回る応募のあった超人気イベントだったけど、@koba04さんにReact.jsのこと色々おしえていただいた縁もありLT枠で出させていただいた。 slide: http://sugyan.com/presentations/reactjs-meetup-1/ 成…

react-routerでsingle pageなrails scaffold

React をちょっと触ってみたい、というのと 最近すこし Ruby on Rails も勉強はじめた、ということで、rails g scaffoldで作るような管理画面のViewを react-router を使ってSingle Page Applicationで作ってみた。 https://react-router-scaffold.herokuapp…

Heat mapで動きが活発な地域を可視化する

Ingressの話。 先月 にA14になり、もはやGold Medalは不要になったしGuardianはキッパリ諦めることにした(Max Time Portal Heldが19 daysで壊される、というのを3回経験した…)わけだけど。実際のところ自分の活動圏付近でどのあたりで入れ替わりが激しくてど…

WebGLでPortal Shieldとかを描く (続き)

WebGLでPortal Shieldとかを描く - すぎゃーんメモ の続き。 色々追加したものを以下で公開してみた。http://sugyan-static.herokuapp.com/webgl/ingress/index.html INVENTORYで見られる全アイテムを追加 ナビゲーションバーからの選択で切り替え 選択前は…

WebGLでPortal Shieldとかを描く

唐突にWebGLを勉強してみようと思って、練習として作ってみた。 http://sugyan-static.herokuapp.com/webgl/portalkey.html http://sugyan-static.herokuapp.com/webgl/portalshield.html (※WebGL対応ブラウザでご覧ください) WebGLについて全然知識が無かっ…

Google Doodleのルービックキューブを解くChrome拡張を作った

http://www.google.com/doodles/rubiks-cube のやつ。 とっくに旬を過ぎていて今さら感あるけど、、URL 開いてスタートした瞬間に自動で解いてくれるChrome Extension 誰か2014-05-19 16:02:43 via Twitter for Macって自分で言ったし。 Google Doodle's Rub…

アメブロ「いいね!」機能を使うためのChrome拡張を作ってみた

先月末あたりに、スマートフォン版アメーバブログに新機能として「いいね!」というのが加わったらしい。 【ブログ】スマートフォン版アメーバブログの新機能追加・改善のお知らせ|スタッフブログ アメブロパワーアップ!アメーバブログがもっと楽しく!も…

Slateを入れてみた

Macで起動中のアプリを切り替えるのに、⌘+Tabだけだとたくさん起動しているときに選択するために連打するのが面倒だし頻繁に使うものは一発で切り替わるようにしたい、というのがあって、 今までずっとそれをQuicksilverのHotKey機能を利用して ⌘+Ctrl+Q でi…

アメーバブログの画像を取得するブックマークレットを書いた

ももクロちゃんたちも使っているブログサービス、アメブロ。 最近、投稿画像の閲覧ページの表示が変わったらしい。 【画像】画像拡大ページ・画像一覧ページの表示方法が変わります|スタッフブログ で、その新しい画像ページではその画像を取得して保存しよ…

任意の要素数の密な配列を生成するスニペット

Perlだと、 use Data::Dumper; my @hoge = ("fuga") x 5; print Dumper \@hoge; __END__ $VAR1 = [ 'fuga', 'fuga', 'fuga', 'fuga', 'fuga' ]; みたいな感じでx演算子を使って任意の個数の密な配列を簡単に作ることができるのだけど、JavaScriptではどうし…

「JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技」を読みました

「JavaScriptテクニックバイブル」献本いただいたのでありがたく読んでるけど内容盛りだくさんでなかなか読み終わらない! URL2012-08-31 00:44:04 via Instagram JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技作者: JSサポーターズ出版社/メ…

ももクロのメンバーブログが更新される曜日/時間帯を可視化してみた

http://blog.bitly.com/post/22663850994/time-is-on-your-side の記事のような可視化が面白いなーと思って、そういえばすぐに使えるデータがあった、と思い、ももいろクローバーZのメンバーのブログが更新される曜日/時間帯の頻度を可視化してみた。 http:…

JavaScriptで、もう連想配列の最後のカンマに悩んでないので

JavaScriptで、もう連想配列の最後のカンマに悩まない!(※追記あり) · DQNEO起業日記 で言及いただいていたので今の自分の意見を。 その発想は無かったし、無いですね。2012-05-02 09:55:29 via Twitter for iPhoneです。 要素数が変わる、無駄なkeyが入る N…

ももクロの人気上昇ぶりをグラフで可視化する

「最近、ももクロの人気が急上昇中。」とだけ盲目的に言っていてもアレなので、参考になる資料を用意したく。 ちょうど最近ファンの間で「メンバーのブログへのコメント件数が増えているよね」というのがあったので、その推移をグラフで可視化してみた。 htt…

Processing.jsで踊るPerfume

既に誰かやってるかな…? と思ったけど。 https://github.com/perfume-dev で、Processingでの動作サンプルがあったので、これそのまま使ってProcessing.js使って動かせるようにすればweb上でも動きが見られるんじゃないの、と思ってワケも分からないままpde…

Software Design 2012年3月号 にコラムを書かせていただきました

Software Design (ソフトウェア デザイン) 2012年 03月号 [雑誌]出版社/メーカー: 技術評論社発売日: 2012/02/18メディア: 雑誌購入: 1人 クリック: 43回この商品を含むブログ (8件) を見る色々と縁がありまして、第2特集「エンジニアだからできるハック」の…

Functionの期待する引数の数をlengthプロパティで取れる

知らなかったのでメモ。 https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/length $ node > (function () {}) [Function] > (function () {}).length 0 > (function (a) {}).length 1 > (function (a, b) {}).length 2これを…

JavaScriptによるcross domain, streamingなAPIアクセスについて

最近までお仕事でちょいちょい調べてたことのまとめを書いた。 JavaScriptによるcross domain & streamingなAPIアクセスの方法色々 - Nakamap APIの場合 - | tech.kayac.com - KAYAC engineers' blog

nodelintでflymake

node-jslintでflymake - すぎゃーんメモ で設定した、node-jslintによるflymakeを使っていたのだけど、 var util = require('util'); とかに対して警告を出してきてちょっとイラっとする。どうもnode-jslintで使われているjslintがちょっと古いらしく、"util…

FileReaderを使って選択した画像の真ん中あたりを正方形に切り取って表示する

フォームで画像をアップロードする際にプレビュー表示したい、というとき、FileReaderが使えるブラウザだとそれを使って簡単に実現出来る。 html5の File API を使って、アップロード無しで画像プレビュー - 超自己満足プログラミング 「プレビュー表示する…

orion editor updated.

http://livecoder.sugyan.com/で使っているeclipse OrionのJavaScriptエディタがupdateされていて名前空間などが変わってた。 Orion - Eclipsepedia eclipse.orionだったものがorion.textview.TextViewなどに変更されている。 追従してlivecoderもアップデー…

Quine ruBy JavaScript版

Quine ruBy - まめめも への挑戦。 Quine ruBy Perl版 - すぎゃーんメモ に引き続き、JavaScript版。 eval ($a= 'a=1;p= this[1\ &&"alert" ]?(a=0+0\ ) ||alert:1 &&this["p"+ "rint"]?( \ 1 &&print):console.log,u=unescape,q=u(( \ 0 ||"%27")),f=Functi…

node-jslintでflymake

javascript-modeでのflymakeに、今までSpiderMonkeyを使っていたけど、試しにnode-jslintを使ってみることにした。 GitHub - reid/node-jslint: The JavaScript Code Quality Tool — for Node.js. node-jslintはnpmでinstallすると"jslint"コマンドを提供し…

手作りiPhoneTracker

これは不気味―iPhoneには過去の位置情報が逐一記録されていることが判明 | TechCrunch Japanという記事が話題に。 iPhoneで取得した位置情報が記録されている、というもの。そのデータを抜き出して可視化するツールが公開されている。 petewarden/iPhoneTrac…

東京Node学園 1時限目 メモ

東京Node学園 1時限目 : ATND var memo = { opening: [ { speaker: '@meso', title: 'ご挨拶 / 5分でわかるNode.js', contents: [ 'http://tng1.mesolabs.com/', 'キーワードはイベント駆動, 非同期(non blocking)', '簡単に早い非同期サーバが書けるよ!' ]…

JavaScriptで住所入力支援 その2

JavaScriptで住所入力支援 - すぎゃーんメモ にて、id:sun-basix氏から「google maps apiのGeocoderクラスを使った検索は?」とツッコミをいただきました。全然その発想がなかった… orz というわけでgeocoderバージョンを作り直してみました。 forked from: …

JavaScriptで住所入力支援

「郵便番号から住所を補完する」的なJavaScriptはよくあるけれど、「郵便番号も分からない見知らぬ土地の住所を入力する」というときに簡単に入力できるものがあればいいな、と思ってちょっと作ってみた。 http://www1216u.sakura.ne.jp/address/ 最初のロー…

instagram #prayforjapan map

続・ #prayforjapan を眺める - すぎゃーんメモにて、過去のものも取得できるようになったので、これだけの数があれば位置情報付きで投稿されているものも多いのでは、と思いGoogle Mapsとマッシュアップしてみた。instagram #prayforjapan photo map - jsdo…

Shibuya.jsに行ってきた

Test.jsを聴きにいきました。 http://shibuyajs.org/articles/2011/02/28/test Shibuya.js - Test.js : ATND 以下、自分メモ。敬称略です。 var memo = { main_talk: [{ title: 'さいきんのCUIでのJavaScriptテスト', speaker: 'hotchpotch', contents: [ //…

javascriptのquine

404 Blog Not Found:perl - Quine.pm で(ほぼ)あらゆるPerl Scriptをquineに http://d.hatena.ne.jp/shinichiro_h/20081102#1225569359 こういう方法でquineを書けたのですね…。 SpiderMonkeyなら eval(s="print('eval(s='+s.quote()+')')") と書けるようだ…

node.jsでsymbolic quine

node.jsにはfile systemを扱うライブラリがあるので、実行スクリプト自らのファイルを読み込むことでquine的なプログラムを簡単に書ける。 process.stdout.write(require('fs').readFileSync(__filename)) $ node -v v0.4.2 $ cat quine.js process.stdout.w…

JavaScriptでInstagramのWeb UIを作る

Instagram APIで、それなりに色々なことができるなーと調べているうちに、「JavaScriptだけでiPhone Appと同等のページを作れるのでは?」と思い、試しにちょっと作ってみた。 http://www1216u.sakura.ne.jp/jstagram/ JSで作ったInstagramってことで"JStagr…

Instagram API が面白いかも

これって実は結構前から使えてたんですかね…? A More Open Platform: The Instagram API http://instagr.am/developer/ とりあえずclientを申請してゴニョゴニョと触ってみました。 Instagram popular photos - jsdo.it - share JavaScript, HTML5 and CSSc…

orion editorで同時編集してみる

node.js+socket.ioでcodemirror editorを同時編集してみる の、続き。 editorを、codemirrorからeclipse orionのブラウザクライアントeditorに乗り換えてみた。 Planet Eclipse 以下のURLで動いています(前回の更新して上書きした) http://www1216u.sakura…

node.js+socket.ioでcodemirror editorを同時編集してみる

node.jsでchatアプリっぽいもの作るメモ - すぎゃーんメモ node.js+socket.ioでライブコーディング的なものを作るメモ - すぎゃーんメモ node.js+socket.io+oauth+SessionWebSocketでログイン付きチャットを作るメモ - すぎゃーんメモ に引き続き、第4弾。 j…

node.js+socket.io+oauth+SessionWebSocketでログイン付きチャットを作るメモ

(※2011/09月 追記: この記事の方法は既に古いので Socket.IOとHTTPセッションの共有は Socket.IO と Express でセッションの共有 - Block Rockin’ Codes などを参考にしましょう) node.jsでchatアプリっぽいもの作るメモ - すぎゃーんメモ node.js+socket.io…

Kodをビルドしてみる

kodapp.com - をちょっと使ってみようかと思いまして。 普通にバイナリ配布されてるからそれを使えば良いんだろうけど、特に意味もなくいちおう自前でビルドしてみた。 kod/README.md at master · rsms/kod · GitHub に書いてある通りにやっていくだけだけど…

node.js+socket.ioでライブコーディング的なものを作るメモ

node.jsでchatアプリっぽいもの作るメモに引き続き、第2弾。 socket.ioを使って、あるtextareaで編集した内容を出来るだけリアルタイムに別のページに反映させるもの、を作ってみた。誰かがライブでtextareaで書いているコードをwebからみんなが見られる、的…

node.jsでchatアプリっぽいもの作るメモ

ようやくNode.jsをさわってみた。 インストール大変そうなイメージを勝手に持っていたけど、全然そんなことはなく $ wget http://nodejs.org/dist/node-v0.2.5.tar.gz $ tar zxvf node-v0.2.5.tar.gz $ cd node-v0.2.5 $ ./configure --prefix=$HOME/local $…

jstudy #2 にいってきた

@hokacchaさん主催のJavaScript勉強会「jstudy」に初参加してきました。 jstudy #2 : ATND jstudy#2 - Togetterまとめ みなさんステキな発表資料をupしてくださっていて助かります。 JavaScript入門講座 by @hokacchaさん function オブジェクトについて by …

jsdo.itリリース!

jsdo.it - Share JavaScript, HTML5 and CSS いやー面白い! HTMLもCSSもJSも自分で書けるから、Webページを自由に作れる…! canvasの描画とかも興味深いけど、自分としてはこれを機に頑張ってjQueryの使い方をしっかり覚えたいです!

高機能ライブラリ「jQuery」とそのPlugin「Validation」

非常に高機能で便利なJavaScriptライブラリとして評判の「jQuery」をちょっと触ってみた。 jQuery Pluginが豊富に存在する、というのも人気の理由のようで。 formの入力チェックをしてくれる「Validation Plugin」というものを使って試してみた。 bassistanc…

連想配列の最後にカンマを入れてはいけない言語もある

Perlのハッシュでは余裕で my %hash = ( foo => 'hoge', bar => 'fuga', ); なんて書き方をしてしまうけど、JavaScriptでは、最後の要素の後にカンマを入れてはいけないらしい。全然知らんかった。 var hash = { foo: "hoge", bar: "fuga" // ここにカンマを…

JavaScriptでSyntax Highlight

ソースコードを載せるのに、そのままでは味気ないと思い色々試行錯誤。 http://www.sugyan.dynalias.com/~sugi/cgi-bin/source_list.cgi Syntax Highlightでソースコードに色づけする方法はいろいろあって非常に迷ったけど、 結局「SHJS」を採用することにし…