getUserMedia と連携させて Computer Vision API を使ってみた

マイクロソフトの画像認識APIの Computer Vision API を試してみた。API そのものより

  • 「getUserMedia で動画を得る」->「スナップショットを取る」->「APIへアップロード」

って部分が勉強になったのでメモっておく。

BitBar を試してみる

任意のスクリプトを定期実行して、標準出力結果を Mac OS Xのメニューバーに表示してくれるアプリ「BitBar」を試してみました。

はじめてのRiot.js

手抜きタイトルのはじめてシリーズ3つ目。近頃、耳にすることの多いRiot.jsをさわってみました。

はじめてのfacebook/flux

前回書いたReact.jsのコードをfacebook/fluxで書きなおしてみます。前回同様、ほぼ殴り書きです。

はじめてのReact.js

過去にブクマしてたFlux関連の記事を一気読みする機会があったので、その流れで今までノータッチ状態だったReact.jsもさわってみました。 りぃさんのCodeGridの記事(これから始めるReact.js 全6回 | CodeGrid)が一段落ついたので、これを見つつアレンジしつつやってみます。

Angular2で簡易ブログを作ってみる

このブログを運用してたクラウドサービスが吸収合併?かなんかした影響ですべての記事がクラウド上のMySQLに永眠することになってしまい、 あちらこちらでキャッシュをひろっては、作りかけだった静的サイトジェネレータでホスト先を移行したりとせわしなくしていた今日このごろです。 そんなわけで「Angular2やるぞ!」と1ヶ月ほど前に書いたAngular2のコードも確実に忘れそうだったのと明日の勉強会に備え、備忘録も兼ねて記事にしとこうと思います。

Media Capture and Streams と Web Audio API で実現する録画・録音・ WAVファイルの生成

前回のエントリではマイク経由の音声認識を行う Speech Recognition API を試しましたが、今回はカメラ・マイクからの動画・音声キャプチャを行う Media Capture and Streams を試してみます。 また、キャプチャした音声の録音については MediaStream Recording を使用することで可能ですが、現時点(2015年4月)では Firefox にしか実装されていません。 そこで Web Audio API を使用することで他のブラウザでも音声録音を可能にし、それらの音声データを wav 形式で保存する方法についても試してみました。

ブラウザのみで音声認識とテキスト読み上げを実現する Web Speech API

HTML5 の Web Speech API をご存知でしょうか? ブラウザベースで音声認識とテキストの読み上げを実現する API です。 今回はこの Web Speech API について試したことをまとめてみました。 ちなみに少し前の Chrome では Speech Input API という INPUT 要素に x-webkit-speech という属性を記述するのみで、手軽に音声認識を実現できるという機能がありましたが現バージョンでは廃止されてるようです・・・
Web Speech API の対応ブラウザは Can I Use よりご確認ください。

TOC(目次メニュー)の実装方法について考えてみる

みなさん、日々の勉強で得たナレッジはどこに記録されてますか?
自分の場合、少しでも気になって調べた事はとりあえずマークダウンで記述してテキストファイルに保存してます(閲覧は HTML 形式に変換したドキュメントをロカール web サーバや Bitbucket 越しに参照してます)。 そんな調子で気軽にメモしてくと情報量がすぐに増えてしまうので、見出し要素ごとにカテゴライズされたコンテンツに素早く移動するための TOC(目次メニュー)は欠かせない機能です。
今回はこの目次メニューの実装方法について考えてみました。

HTML5 の Web Audio API で音楽してみる

HTML5 の Web Audio API の存在をご存知でしょうか? 購読してる専門誌でも紹介されてるのを見かけた記憶がなかったのでよく知らなかったのですが、検索してみると興味深い記事が結構目につきます。 CANVAS や WebGL など見た目系機能が注目されがちな HTML5 ですが、音声方面も面白いかなという事で、今回調べたことをまとめがてら紹介してみたいと思います。

Windows ではじめてみる Node.js

Node.js といえば発表された当初、イベント駆動、ノンブロッキングI/O、スケーラブルネットワークブログラミング、といった部分が注目され非常に話題になりました。 フロントエンド技術の興隆目覚しい昨今においては、Sass や CoffeeScript のコンパイルを自動化する Grunt や Gulp といったタスクランナーを動かすための開発環境インフラとして大きな役割をはたしています。
今回はそんな node.js の基本的な利用方法についてまとめてみました。

MVWフロントエンド・フレームワーク、AngularJS をはじめてみる

AngularJS は、クライアントサイド MVC フレームワークの1つですが、自身のことを MVW フレームワークと呼んでます。 これは Model-View-Whatever の略で 「MV*について議論するなんて時間の無駄、そんな暇あるならコード書きなよ。MV*の*の部分なんて”Whatever”でいいんだよ。」 という思いが込められてるそうです・・・いかしてますね!
という訳でコードを書きながら AngularJS を紹介したいと思います ^^;

Backbone.js ではじめるクライアントサイド MVC プログラミング

MVC と言えば Apache Struts をはじめとするサーバサイド・フレームワークを想像しますが、 今回は JavaScript による大規模開発の際に採用されるクライアントサイド MVC フレームワーク「Backbone.js」の使い方についてまとめてみました。 (厳密にはクライアントサイドの場合、MVC とは呼ばず MVVM とか MV* とか呼ばれてるようです。)

Pull Request ではじめてみる!GitHub ソーシャルコーディング

こんにちわ、就活の面接がいつの間にか雑談ぽくなりがちな cyokodog です。 普段できないプログラムの話とか、異業種の現場の話とか聞いたりできるのってすごい楽しいものですね!(お時間とらせてしまってすいません^^;)
今回はそんなコミニケーションを取りながら、皆でわいわい開発するのが当たり前の時代がきたらいいなぁ… そんな思いを込めて、ソーシャルコーディングを可能にする WEB サービス GitHub の利用方法についてまとめてみました。

JavaScript の prototype オブジェクト入門

こんにちわ、2015年3月をもって所属会社が解散することになってしまった CYOKODOG です(悲) ただいま絶賛就活中、当方にご興味ございましたらお声かけのほどよろしくお願い致します ^^;
そんな背景もあり過去の資料を整理することも多々ありまして、今回は昔懐かしい JavaScript の prototype 周りについて自分なりにまとめてみました。

マークダウンにも優しいライブデモ対応シンタックスハイライター jQuery プラグイン

Easy Code Prettify は、Ex Code Prettify(その場で編集/実行できるシンタックスハイライター jQuery プラグイン)を簡易的に実行することができる jQuery プラグインです。 クラス名等の HTML 属性値によるパラメータ指定を必要としないため、マークダウン形式でブログを書いてる場合等に利用すると便利です。

うちの小3男子がダウンレールでB/Sボードスライドを習得した

うちの小3男子はスケボーが趣味なのですが、この度念願の「ダウンレールでのバックサイドボードスライド」という技を習得することができました! 開発者ブログをうたっときながら、相変わらず興味のない人にはなんのことやらという内容ですが、ついにきた!という思いがあまりに強かったので記念に動画を載せさせて頂きます。 親バカと思って許してください(笑)

WordPress 製のブログを Twitter カードに対応させてみた

Twitter カードってご存知でしょうか?ツイート内に URL が含まれている場合、そのページのタイトル、概要、アイコン写真なども一緒に表示してくれる機能です。 これは前回のエントリ「WordPress 製のブログを OGP(Open Graph Protocol) に対応させてみた」で紹介した OGP の Twitter 版の機能にあたります。OGP の対応が済んでいれば簡単な手順で対応させることができます。

WordPress 製のブログを OGP(Open Graph Protocol) に対応させてみた

OGP ってご存知でしょうか?Open Graph Protocol の略で、「このウェブページは、こんな内容です」ということをプログラムに対し正しく伝達するための仕様だそうです。どんな時に活用されるかというと、Facebook や Google+ 等で OGP が記述されたページがシェアされた際、この OGP の情報をもとにフィードに表示する画像やコンテンツの概要を載せてくれるようになります。

フェードイン/フェードアウトで「ふわっ」とページを切り替える【追記あり】

ネットで見つけたプログラムの TIPS などはなるべく実践を心がけてるんですが、やはりブログ等に残しておかないとすぐに忘れてしまうなぁ と感じてる今日この頃です。そんな訳でなるべく細いネタでもちょくちょく投稿してこうかと思います。
で、今回はページからページへ遷移する際、フェードイン/フェードアウトを使って「ふわっ」とページを切り替える方法について考えてみました。

レスポンシブ対応でサイドメニューを一定範囲で固定表示する jQuery プラグイン

久しぶりのプログラム関連のエントリーです。
表題の「サイドメニューを一定範囲で固定表示」って意味通じますでしょうか? 画面スクロール時、サイドメニューが上部に流れきって消えてしまわないように途中から position:fixed で位置固定して、フッターにかぶる位置にきたら位置固定を解除するUIのことです。あの有名な LIG さんや痛いニュースでも採用されてるデザインです。
このちょくちょく見かけるUIのかゆいとこを解消した jQuery プラグインを紹介します。

挑戦!自作フィギュア ワンピース・チョッパー編

皆様、今年の夏はいかがお過ごしでしたでしょうか?
うちでは夏といえば子供と一緒にプールに海にスケボーにと、プログラマーらしからぬ肌の色になるまで外で遊びつくすのが恒例ですが、今年は小3がママさんの怒りを買いまくりーので外出禁止でインナープレイに終始しました。
そんなわけで、夏休み前から始めたチョッパー・フィギュアの製作活動にも精を出す結果となり、この度、無事完成させることができましたのでお披露目いたします。

大人だけど全力で「7人の悪魔超人編」の絵を描いてみた

昨年の暮れ、ウォーズマン・フィギュアを作り始めた頃、子供にせがまれて「7人の悪魔超人編」の絵も同時並行で書き始めました。その後、フィギュア製作もお絵かきの方も途中であきてずーと放置状態だったわけですが、 二ヶ月程前に奮起してフィギュアを無事完成されることができました。絵の方も中途半端は子供の教育上良くないなーという事で、こちらの方も今回完成させてしまいました。

挑戦!自作フィギュア ラーメンマン編 その2

フィギュア製作は作業場所が石膏粘土で汚れるので、きれい好きなママさんに見つかると激怒される恐れがあるので夜な夜なこっそり作っています。
なので現物をお披露目できる相手はオーバーリアクションで褒めてくれる心優しい職場の方々だけな訳ですが、先日、珍しく飲み会を催すという話があり、そこでぜひ完成したラーメンマンをお披露目したく、急遽1~2時間程度で塗装まで仕上げましたので、こちらでもお披露目したいと思います。

挑戦!自作フィギュア ラーメンマン編 その1

前作のウォーズマンに引き続き二作品目となる自作フィギュアは、ラーメンマンです!
当時の小学生のトラウマになった?という、脳みそグッサリやられて植物人間になってしまうウォーズマン戦のラーメンマンを意識して作ってみました。

ツールバーをスクロール位置に応じ画面の上下にピタっと固定表示する jQuery プラグイン

管理者向け画面などで、画面下部にコマンドボタンを配置した際、画面に表示するデータ量が多いとコマンドボタンが画面の表示枠内に収まらず不便に・・・かと言って position:fixed で固定表示すると、データ量が少ない場合に不格好に見えてしまう・・・そんな経験は無いでしょうか?
Fitbar は、ツールバーやナビゲーションメニューを画面のスクロール位置に応じ上部又は下部に固定表示させることができる jQuery プラグインです。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。

Picasa の写真の拡大/縮小を簡単に行うことできる jQuery プラグイン

皆さん、Google の写真共有サービス「Picasa」をご利用でしょうか? 2048×2048ピクセル以下の画像であれば容量が実質無制限であることもあり、自分の場合、ブログの掲載写真等に使用してます。
Picasa Zoom は Picasa で管理された写真の拡大/縮小を簡単に行うことできる jQuery プラグインです。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。

挑戦!自作フィギュア ウォーズマン編 その2

前回、約半年かけて(そのほとんど放置期間でしたが)作り上げたウォーズマンの造形をお披露目しましたが、重い腰を上げやっと塗装に取り掛かりました。実質三日程度の作業でしたが、とりあえずそれなりに満足のいく出来栄えになったのでお披露目します。

システム管理者におすすめ!SQL の実行結果を手軽にエクセルに出力する方法

社内SEなどという仕事をしていると「システムでいちいち条件指定してデータとるのメンドイから、エクセルにまとめてメールで送ってよ!」などと言われる事がちょくちょくあります(自分だけ?)。そんな時は dqy ファイルを使用し SQL の実行結果をエクセルに出力させてます。テキストファイルにDB接続情報と SQL を書くだけで良いとってもお手軽+おすすめ Tips をご紹介いたします。

mailto:リンク機能を利用しやすくする jQuery プラグイン

mailto:~ と記述されたリンク要素をクリックするとメールクライアントの作成フォームが起動されるのはご存知でしょうか?Web メールが主流な昨今あまり見かけなくなりましたが、宛先や本文を指定することでメールテンプレートとしも利用できるので、企業内システムなどで活用すると結構便利かと思います。
Mailto は、そんな mailto リンク機能を利用しやすくする jQuery プラグインです。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。

メーリングリストの「なりすまし」判定を Gmail と Google Apps Script で回避する方法

携帯のメールアドレスで Google グループ(メーリングリスト)に参加したら、「なりすまし」と判定されメールが届いてこないといった経験はないでしょうか?
携帯キャリアのセキュリティレベルの設定を変更することで大抵は解決できますが、メンバーが大勢いたり、ITに詳しい人が少ない場合、この作業が結構面倒だったりします。
今回、Gmail と Google Apps Script(GAS) を使用し、この問題を回避させる事ができたので手順をご紹介します。

挑戦!自作フィギュア ウォーズマン編 その1

昨年の暮れぐらいから何故かキン肉マンにはまりだした我が家の小3男子、「フィギュア探しの旅」でも目当てはキン肉マン関連ですが、旬でない作品を探すのは一苦労です。 実際、どれだけ種類があるのかとネットで検索してみると、なんと自作でしかもかなりのクオリティの「ザ・ニンジャ」のフィギュアを作ってる人を発見!
しかも、材料は百円ショップで揃えられるものばかり・・・とくれば自分も試さないわけにはいきません!(笑)

塗装はまだしてませんが、今回なんとかそれなりの形にすることができたウォーズマンをお披露目したいと思います!

第3回アキバ・フィギュア探しの旅

ゴールデンウィーク、当初はディズニー行こうとか、登山行こうとかいろいろ言ってましたが、結局またまたアキバでのフィギュア探しになりました。 ママさんと小3男子のフィギュア熱はまだ冷めてないようです。 今回は二度目となる浅草で遊んで、徒歩で浅草→上野→秋葉原と移動しました。

はてブ、Twitter、Facebook、Google+ のソーシャルボタンをシンプルに表示する jQuery プラグイン

Easy Social Buttons は、はてブ、Twitter、Facebook、Google+ のソーシャルボタンをシンプルなデザインで表示することのできる jQuery プラグインです。各サービスが提供しているソーシャルボタンより動作が軽いので投稿記事一覧画面などで大量にボタンを表示したいような場合に向いています。jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。

PaaS で動かす WordPress + OpenShift 入門

このブログは PaaS の AppFog のフリープランで動かしてるのですが、先日、フリープランのサービス縮小の通知がありました。念のため WordPress が動く目ぼしいところが他にないか探したところ、OpenShift が 「無料、広告なし、独自ドメイン対応、Git でアップロード」といった感じで良さげでした。
そんな訳で OpenShift で WordPress を使用する手順をまとめてみました。

Google App Engine for Java 入門 + Struts2 デプロイ手順

前回のエントリで作成した Struts2 のサンプルプログラムのデモを OpenshiftAppFogHeroku といった Java の動く PaaS で公開できないかなぁとちょっと調べてみたのですが、Eclipse で開発したらその場でポンっとデプロイできる Google App Engine が一番手軽でいいんじゃないか・・・と言うことで約4年ぶりに Google App Engine をさわってみました。
そんな訳で Google App Engine for Java の導入手順と合わせ、Struts2 のデプロイ手順もまとめてみました。

2014年度版 Eclipse + Struts2 による Java Web アプリ開発入門

オラクル管理下になって以降めっきり話題が減った感のある Java ですが、最近、隣の席の新人 SE さんが研修で Struts2 ベースの Web アプリを構築をしてるようで、時々質問を受けたりします。Java と言えば Struts に次ぐ定番フレームワークが長らく待望されてましたが、結局どうなったのでしょう?
Struts の冠のある Struts2 がネーミング的には有利な気もするので便乗して勉強してみることにしました。

はてブ、Twitter、Facebook、Google+ などのソーシャル系サービスの API を手軽に使用できるようにする jQuery プラグイン

Social Info は、はてなブックマーク数や Twitter のつぶやき数などを取得するソーシャル系サービスの API を簡単に利用できるようにする jQuery プラグインです。独自デザインのソーシャルボタンなどを自作する際に利用すると便利かと思います。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。

第2回アキバ・フィギュア探しの旅

年末に行ったばかりなのに、正月連休にも行ってしまった第二回アキバ・フィギュア探しの旅。
やはり今回もママさんの鶴の一声で行くことになりました。前回、目をつけてたがっちゃんフィギュアを目の前でもってかれたのが悔しかったのと、やること無くて暇だったのが主たる動機のようです。

大人だけど全力でキン肉マンの絵を描いてみた

うちには小2の男子が1名いるのですが「誕生日プレゼントなに欲しい?」って聞いたら「キン肉マンの絵」と返ってきました(笑)
家での遊びは、けん玉、コマ、お絵かき、読む漫画は、北斗の拳、Drスランプ、キン肉マン・・というある意味「昔ながら」な彼らしい回答です。

そんなわけで、会社の休憩時間と睡眠時間を削って全力でキン肉マンの絵を書いてみました。

第1回アキバ・フィギュア探しの旅

ちょっと前のママさんの誕生日、「なにが欲しー?」と聞くと即答で

「ガっちゃんのフィギュア!」

と返ってきました・・・

さっそくネット通販で調べたけどどこも品薄、いろいろ調べて楽天で見つけてなんとか注文。送料やら手数料やらで 500 円ちょいのおもちゃが 2000 円以上もかかってしまいました・・・

スクロールイベントの開始/終了、方向を判別できる jQuery プラグイン

Ex Scroll は、スクロールイベントの開始/終了のタイミング、スクロール方向を判別することのできる jQuery プラグインです。2009 年頃に書いたプログラムですが、ちょくちょく需要があるようなのでソースの見直しも兼ね GitHub で管理するようにしました。リポジトリは jquery.utility-kit とし軽量の utility 系のプラグインはこちらで管理し追加してく予定です。

その場で編集/実行できるシンタックスハイライター jQuery プラグイン

Ex Code Prettify は、Google Code Prettify をベースとしたシンタックスハイライトを行う jQuery プラグインです。ソースコードの編集/実行をその場で行う機能や、外部 CSS / JS ファイルの動的インポート機能等を使用して、jsdo.itjsFiddle のようなライブデモ機能を自サイトに実装することができます。

ガラクタで重厚感のあるおもちゃを作ってみた ~その2~

皆さん、今年の夏はいかがおすごしでしたでしょうか。
うちは子供を中心にプール、クワガタ探し、スケボーと例年通りの変わり映えない夏でした。ただ唯一いつもと違ったのは、前回のエントリーでも書いたガラクタ(というか日常ゴミ)によるおもちゃ作りに家族全員が精を出してたという事です。 という訳でその後、置き場所も考えず、調子にのってさらに作りこんでしまった作品郡も載せときますのでよろしかったら見てやってください。

ガラクタで重厚感のあるおもちゃを作ってみた

ガラクティストこと ゴトー孟(もう) さんをご存じでしょうか?
ペットボトルや空き箱などの日常生活で出るがらくたを使って、ハイクオリティなおもちゃを作ってしまうすごい方なのですが、先日、子供の自由研究のネタ探しに訪れた横浜こども宇宙科学館でその作品を初めて見ました。とてもガラクタでできてるとは思えない重厚感、完成度に衝撃を受けました。
そんな訳で夏休みの時間を利用し、我が家でも作ってみました。

Bootstrap ベースの日付/時刻ピッカーを日本語環境向けにカスタマイズした jQuery プラグイン

Bootstrap が普及して以降、Bootstrap のデザインを基調とした jQuery プラグインをちらほら見かけるようになりました。 日付/時刻ピッカーの「Bootstrap Datetime Picker」もそんなプラグインの1つですが、今、仕事で開発してる Web アプリに使ってみたところ、いろいろとかゆいところがあったので、使いやすくなるようカスタマイズしてみました。

location.hash の値に応じ表示コンテンツを切り替える jQuery プラグインを作ってみた

location.hash の値に応じ表示コンテンツを切り替える jQuery プラグインを作ってみました。大した処理じゃありませんが、jQuery プラグインのデモページとか作る際、複数パターンのデモがある時など毎回記述するのが面倒なのでプラグイン化してみました。ついでに location.hash のリンクリストも生成するようにしてます。

フォームデータ登録後もページスクロール位置を維持する方法を考えてみた

Web アプリケーションにおいて、入力項目が一画面に収まらないような入力フォームの場合、入力値の一時保存ボタンが必須になるかと思いますが、通常の作りだと保存処理後、ページスクロール位置が先頭に戻ってしまうのが悩みどころです。Ajax で実装すれば解決もできますが、もっと手軽に解決できる方法がないか考えてみました。

Google Code Prettify のかゆいとこをなんとかする jQuery プラグインを書いてみた

ソースコードをかっこよく表示してくれる JavaScript ライブラリ「Google Code Prettify」。巷では高機能な「SyntaxHighlighter」におされ気味ではありますが、シンプル仕様で見た目もかっこよくて好みです。今回はちょっと手を加えて使い勝手の方を少し改善してみました。

WordPress の Markdown 環境を『Behave.js』でさらに快適にしてみる

みなさん WordPress の投稿記事はどういう形式で入力されてますか?自分の場合、快適に Markdown 記法を使いたくてブログを転々としてることもあり、「Markdown on Save Improved」というプラグインを使い Markdown で入力してます。今回、さらなる快適編集環境を求め「Behave.js」という JavaScript ライブラリを導入してみました。

Google 以外のメールアカウントで Gmail をメールクライアントとして使用する方法

IT リテラシーがまるっきり無かった 10 年以上前、うかつにも会社のメールアドレスをまぐまぐに登録して以来、スパムメールがよく飛んでくるようになりましたw そんな場合、強力なスパムフィルターのある Gmail をメールクライアントとして使用することで、問題を解決することができます。
備忘録も兼ねて手順をまとめときますので、スパムメールに苦しむ同僚がいたら教えてあげてください。

WordPress のこまごま設定プラグインにソーシャルボタン設置機能、他を追加した

前回のエントリで公開した 「WordPress のこまごました設定をまとめてできるプラグイン」に、ソーシャルボタン設置機能、他を追加しました。ソーシャルボタンは結構簡単にできるかなと思ってたんですが、個々のボタンを等間隔に揃えたりとか見た目を調整するのって面倒なんですね・・・疲れました。

jQuery 1.9 で $.browser が使えなくなってしまった対策

jQuery 1.9 になってとうとう $.browser が使えなくなってしまいましたね。 もともと非推奨ということもあり、個人的にはプラグインを実装する時などは極力使用しないようにしてましたが、実際使えなくなってしまうと、動かなくなってしまうプラグインって結構多いんじゃないかなぁって気がします。

引っ越してきました

こんにちは cyokodog(ちょこドッグ)です。

ちょこドッグなら chokodog だろとよく言われますが、cyokodog 派(少数派)ですのでよろしくお願いします。 (サイコドッグと思われてたこともありますw)