Re* Programming

Thoughts, stories and ideas.

「寄席の箱」というブラウン管TVを使ったデジタルアート作品を展示しました

「寄席の箱」というブラウン管TVを使ったデジタルアート作品を展示しました

今回、中国出身の Designer 王雅さんと一緒に制作した 「寄席の箱」 を SNACKS Vol.2 で展示しました。 実は、王さんは私が学校の授業(IoT)で教えていた生徒なのですが、卒業デザインで発表した内容の世界観がとても良いなと思っていました。 せっかくなので卒業制作とは別に展示やコンテストに出せるものにしないかと声をかけたのでした。 // 一応補足しておくと学校の卒制の合否判定は私の担当では無く、また卒業制作提出後のやり取りです 彼女は、日本のデザインと漫才がとても好きで来日し、1年足らずで日本語のやり取りがほとんど出来るぐらいになっていました。 お笑いを知るには歴史から(?)ということで漫才について色々と調査し、その流れの中で寄席や漫才、お笑いにはテレビが非常に大きな関わりを持っており、欠かせないものであると感じ、その時代背景とともにお笑いの歴史をブラウン管に映し表現したい。というものでした。 例えば、中国にもお笑いが有り、ボケとツッコミなど日本との相関図をインフォグラフィックで表現したり、お笑いやコントのキーワードをアニメーションさせるモーショングラフィックで表現したりさまざまなものでした。 そこで私は、彼女が考える世界観を極力表現できるサポートに徹しようと思いました。 SNACKSに展示を行うまでの経緯や漫才に対する思いは王さん自身のブログを見てもらうことにし、私は制作したものの仕組みについて書きたいと思います。 作ってみたの楽しみ・“SNACKS”に参加しました https://ajizakamiyabi.hatenablog.com/entry/2019/04/18/120631 以下、中国語版

UnityとHTC VIVE/Trackerを使ってスプラトゥーンっぽいインタラクティブコンテンツを作った話

先日 DojoCon Japan 2017 で Inkind Sponsorとして「ふしぎマニューバー」 を 出展しました。 ほぼ表題で完結する話ですが、イベント当日は仕組みについて結構質問があったので、振り返りがてら解説したいと思います。 今年のわりと早い時期から、こざる さんから、相談を受けました。 きっかけは以前制作した 「さえ子のお人形」の仕組みを解説する勉強会を受けての事だったそう。 ご本人の記事「手作り!ふしぎマニューバー」に詳細が書かれています。 体験型のコンテンツを見てもらった結果、こういうお話が来たのは嬉しいことです。 イベントまでの流れ 5〜7月頃 ざっくり、「CoderDojoに参加される子どもたちに向けて、不思議な体験ができるコンテンツを出したい」という感じだったように記憶しています。 何を作ろうかなと思っていましたが、不可視彫像 や トラッキングデバイスを使った記事※1, ※2を見ていて、立体視をやりたいなとふんわり考えていました。 HTC VIVE を使うにしても子供向けとなるとVRとしての利用はありえないので、Traker のみを使う方向になりました。 ただし、その時私のUnityのレベル1、VIVEも一度体験しただけで所有はしておらず今考えるとなかなかチャレンジャーだったのでは。。。という感じがします。 何度か打ち合わせを重ねていくに従って、

kinect

ポリッドスクリーンとキネクトを利用したタッチコンテンツを作ってホラーなイベントを開催した

ポリッドスクリーン(PolidScreen)とキネクト(Kinect)を使い、参加型のホラーコンテンツを作って、WebやCGの学校、デジタルハリウッド(以下、デジハリ) 内でイベントを開催した。 タイトルでほぼ完結するのだけど、久しぶりに制作したっていう感じがしたのでアウトプットしておく。 ポリッドスクリーン(PolidScreen)とは、農業用”ポリ”フィルムをプロジェクターの投影面として映像をスクリーンに映し出す技法。 以下のサイトが詳しい。 とても参考になりました。 PolidScreeen 最近だとフィルムスクリーンの前後両面に映像を投影したっていう話題が挙がっていた。 一方、キネクト(Kinect)は言わずと知れた Xboxの周辺機器。 ジェスチャーや身体の動きなどで操作することができる入力デバイスである。 そのKinectとプロジェクタを使い、ポリッドスクリーンに映像を投影、そのスクリーンを巨大なタッチスクリーンとして操作するコンテンツを制作した。 動画を見てもらった方が早いかもしれない。 さえ子のお人形 プレデモ from METEORWORKS on Vimeo. 背景 デジハリで講師をされているT氏と一緒に、今年の4月頃から普段触らない技術やデバイスを勉強するもくもく会として、ここ半年ぐらいずっとKinect やら Raspberry Pi やらを触っていた。 そのうちhalloweenの時期が近づいていた。 デジハリでは 毎年halloweenパーティが開催されるのだけど、

Meteorworks 2015年 振り返り

約一年振りの更新となりますが、みなさんお元気でしょうか? 振り返りとして2015年最初で最後の記事としたいと思います。 やってみたことと実現出来たこと 今年一番大きなことは、個人事業の仕事でもNode.js を使うことがほぼほぼメインとなりました。 反面、今年のテーマとしては 昨年以上にWebをやらない と決めて活動しました。 もちろん仕事では受けているのですが、そこに留まらないことを目標として、Webではないイベントに参加する機会を作りました。 昨年とは違う世界が見えるかなと思って活動したように思います。 そして、本当にいろんなことを始めていた1年でした。 写真を撮ることも続けていたのですが、撮影の依頼が来ることにもつながり、またそこでの知りあった人と仕事の繋がりが生まれる。といった好循環もあり、継続的な収入があったのは大きいです。 敢えて今年やらなかったこと 一方、Webはやらない。という今年のテーマに沿った行動もあり(昨年ほどは)勉強会に出ない1年でした。 リアルに顔を合わせる知人には「は?」と言われるのですが、参加していた数は圧倒的に少なくなっています。 あと、ブログも書きませんでしたね。 大阪 Node.js勉強会 も未開催でしたが、月一で NodeSchool Osaka のメンターもやっていたので、感覚的な忙しさは変わっていません。 ただ、ちょっと技術的にはサボり過ぎていると思う節もあり、これは来年の課題としたいです。 来年に向けて 来年はまた学習の年にしたいと考えています。

Meteorworks 2年目 2014年振り返り

かみやんの個人活動としての Meteorworks の2年目が半分以上終えようとしています。 昨年は初年度ということもあり慣れないことばかりでしたが、今年は色々と各方面から声をかけていただくことが多くなりました。 ありがとうございます。 今年、実は敢えてWebから離れることを意識していました。 もちろん、主催のイベントはがっつりWebなのですが、大半Webではないイベントに参加しました。 カメラで写真を撮るようになったことも大きく写真を撮る係だったり、運営のお手伝いだったり。 自分が面白いと思ったこと、やりたいことを実現するのがたまたまWebだった。 またそうじゃない方法だった。 という流れにしたいなと考えています。 Meteorworksとして活動し始めた時から肩書はEngineerとしています。 これは、いずれ復活したい自動車に関わる仕事であってもそのまま使えるようにという意味もあります。 来年は「かみやん,Webやめるってよ」って言われるぐらいになりたいですね。 今年以上にいろんなことをやっていきたいと思います。 どうぞよろしくお願い致します。 勉強会&スライド 今年も主催兼発表ほとんどでした。 一年の総まとめとして挙げておきます。 発表ダブルヘッダーが印象的で,2会場の移動で、チャリンコを借りて市内を疾走したのは良い思い出です。 Node.js 超初心者向け勉強会 http://node-osaka.connpass.com/event/4877/ Github: Osaka-Node-Beginners https://github.com/nodejs-osaka/Osaka-Node-Beginners

Photograph Advent Calendar [16日目]

しわっす!過去最高に忙しいしわすむかえております かみやん です。 Photograph Advent Calendar 2014 16日目、 アカリ (@kokona_san)さん からバトンをつなぎます。 よくよく考えるとアカリさんと初めてお会いしたのもカメラ遠足からではないでしょうか ? (違ったらすいません...) 私はカメラを手にすることで、今までは気にも留めなかった季節の移り変わりやイベントへの興味が出てきて、生活に変化が出ました。 色んな人とも知り合うことが出来ていいコトずくめですが,Engineerとしての商売道具より高額な遊び道具になりそうで怖いです(笑 そう言えば、昔はハマったらお金掛かりそうだからとカメラは敬遠してたんでした。 カートもそのやらないと公言しているものの一つです。 クルマは好きですがやりません。 私公式的には、フォーミュラよりも箱カテゴリーが一番好きだからということにしておきます。 おっと、話がそれました。 本当ならAdventCalendarを飾れる冬らしいものを撮りに行くのがよいのかなと思っていましたが、この写真にしました。 大阪のディープなスポット(?)の一つ、名前が聞き慣れないことで有名な 西中島南方 近くです。 普段なら通り過ぎるような何気ない風景で撮ったということと、この写真を撮った時もカメラの繋がりで知り合いになった人のイベントに向かう途中でした。 次のカメラ候補を悩んだり、撮りに行く場所を考えたり、飽きずに続けているようなので まだまだ撮る日々は続きそうです。 明日は misumi さんです。 misumi さんも業界的には同じフィールドにいる人ですが、最初にお会いしたのはカメラきっかけだったんじゃないでしょうか??? それではよろしくお願いします。

MEAN Stack チュートリアルを元に Sails.js で実装してみた

IBM developerWorks の MEAN Stack で構成されたチュートリアルの記事を参考に、Sails.jsの実装方法で再構成してみました。 Node.js、Express、AngularJS、および MongoDB を使用してリアルタイム・アンケート・アプリケーションを作成する http://www.ibm.com/developerworks/jp/web/library/wa-nodejs-polling-app/ アプリに必要なもの Node.js Node モジュール: Sails.js Node モジュール: waterlineモジュール (sails-redis / sails-mongo / sails-postgresql など) JavaScript フレームワーク: AngularJS データベース: MongoDBなど ※ MongoDBを使わなくても可能 動作環境 Node.js v0.

sails new コマンドをhookして独自環境を構築するSails Generatorについて

Sails.js は v0.10系から、Sails Generator を使った環境構築方法を提供しています。 (※ currently experimental の記述あり) 今回は、そのSails Generatorを使った構築方法を 2通り紹介したいと思います。 sails new hook 方式 sails new コマンド実行時の Scaffold は sails-generate-xxx を複数実行して生成しています。 例えば、Viewテンプレートを ejs から jade に変更する場合、コマンドのオプションで sails-generate-views を sails-generate-views-jade に差し替えて、生成するファイル構成を変えています。 この使い分けと同じ仕組みを 自身の環境用に定義します。 Sails.js はデフォルトで grunt を使っていますが、これを gulp を使える構成に変更してみます。 npm に登録されている

Sails.js v0.10系 新機能まとめ

Sails.js のバージョンがついに v0.10へとアップデートしました。 今回はRC版がコンスタントに上がっていき、色々機能的なテストを行っている印象でした。 幾つかv0.9系からの変更点もあるので、ここで纏めておきたいと思います。 Node.js: v0.10.26 Sails.js v0.10.2 sails コマンド sails new --linker オプションが廃止され sails-linker はデフォルトで使用するようになりました。 対象ファイルは/config/pipeline.js に設定します(後述) sails generate api v0.9.x では sails generate @Hogeを実行すると HogeController.js@Controller と Hoge.js@

Sails.js + PassportでID/Password認証

Passportについて 以前、everyauth を使ってパスワード認証・SNS認証など実装していましたが、なんとなく自分には取っ付き辛く、Passport を見つけてからこちらを採用するようになりました。 Passsport http://passportjs.org/ https://github.com/jaredhanson/passport Passport は一般的な ID/Password認証 の他に各SNSを使ったOAuth認証までサポートしています。 (認証と権限設定のみなので、投稿機能などの実装は SecretTokenをその他のパッケージに譲ることになります) passportモジュールは、Passportの骨格となるパッケージとなり、その他 passport-github や passport-twitter などがそれぞれの認証機能を提供しています。 今回は、passport-local を使ってログイン処理をする例を紹介します。 Node.js: v0.10.26 Sails.js v0.10.0-rc8 記事公開時 v0.10系がrc版 ですが、今のところ基本的にv0.

Frontrend in Nagoya へ参加して全セッション質問してきた #frontrend

6/21(土) 名古屋で開催された Frontrend、Frontrend in Nagoya へ参加しました。 Frontrend in Nagoya http://html5nagoya.jp/frontrend/ 事の発端?は、Node.js大阪 勉強会 に 潜入調査しにきた 来てくださった @girigiribauer が運営に携わっていることと @hiloki が frontrend 静岡、大阪に引き続き出演されるということからでした。 いろんな経緯があって参加することを誰にも言っておらず、関西圏の知り合いはまったく参加していなかったのですが、懇親会でも楽しくお話しさせていただいたり非常に楽しい勉強会でした。 Frontrend in Nagoya - togetter http://togetter.com/li/683262 Frontrendはフロントエンドのトレンド(?)についてという一貫したテーマがあるのですが、名古屋ではオリジナルの話しをしてもらいたいという要望があったそうで、前回参加したFrontrendから時間も経っていることもあり非常に興味深い内容でした。 フロントエンドのスキルマップと育成のはなし by

Node.js大阪 勉強会を開催しました #npp02

6/14(土)にNode.js大阪 勉強会を開催しました Node.js大阪 勉強会 (#npp02) http://node-osaka.connpass.com/event/6453/ テーマ: Production Environment 今回は <htmlday> ということで色んな所で勉強会が開催されていて、Node.js大阪勉強会では最も人数が少ない回となりました。 とは言え、自分たちが聞きたい/話したいテーマだったので非常に学ぶことが多かったです。 Twitter https://twitter.com/hashtag/npp02 セッション 「Node を稼働させる」 @kumatch @kumatch による本番稼働ツール主体のお話で、初めて @kumatch にNode.js話を聞いた頃使っていたものから現在に至るまでの遷移や工夫などでした。 pm2 の細かい話も良かったですね。私もpm2で本番系は稼働させています。 Nodeを稼働させる from

Node.js大阪 勉強会を開催します #npp02

少し間が空いてしまいましたが、6/14(土)にNode.js大阪 勉強会を開催します。 概要 Node.js大阪 勉強会 http://node-osaka.connpass.com/event/6453/ テーマ テーマは Production Environment です。 Node.jsの本番環境についてのあれやこれやを共有できたらと思っています。 本イベントは <htmlday> の参加イベントとしても登録しています。 ※ HTMLDAYは勉強会のお祭りらしいので、同日色々な勉強会が開催されます (他にもTypeScript勉強会などたくさんあります…. ゲスト なんと今回は、日本Node.jsユーザグループ代表 @yosuke_furukawa 氏にお越し頂くことになっています。 セッション セッションのタイトルも固まってきたところです。 毎回スピーカーとして発表していますが、発表があるとだいたいそわそわしているので、今回発表無しで参加したいぐらいです(笑 なお、前回まで初心者向け勉強会を開催していましたが、諸般の事情により本編(通称:午後の部)

Node.js勉強会 を開催しました #npp01

2/8(土) Node.js勉強会を開催しました。 Node.js 超初心者向け勉強会 http://connpass.com/event/4877/ Node.js勉強会 http://connpass.com/event/4878/ 開催前日の夜、すごく雪が降っていて勉強会自体の開催が出来るかどうかという感じでしたが、会場近辺では大きな積雪もなく通常どおり開催することになりました。 午前のセッション 午後の座学形式の勉強会の前に開催している。インストール(とExpress)についてのみ解説セッションです。 一緒にインストール作業をするハンズオンセッションですね。 最近 Grunt,Less,CoffeeScript など、Node.jsを使って作業をすることが多くなり、ただサーバサイドの処理を書くというものではなくなっています。 特にGrunt、gulpなどのタスクツールは、他の言語のプログラマーやデザイナー関係なく利用すると便利ということもあり、今回は本編の申し込み以上の参加申請がありました。 ハンズオンの性質上あまり多く参加者を募れないので、次回以降は開催形式を考えたいと思います。 特に、今回時間の関係で Express の説明は大きく省きました。 しかし、Express自体の内容について聞きたいといった声もありセッション自体の構成を考えるタイミングのようです。 (前回終了時、

Sails.jsをリバースプロキシ経由で実行する(Sails.ioと接続出来ない)

node モジュール node-http-proxy を使い、リバースプロキシ経由でsails.jsを使っている環境があるのですが、Sails.io(Socket.io)への接続がうまくいかずどう対応するのか悩みましたが、実行しているポートへ直接呼び出すことで接続できました。 Version: Sails.js@v0.9.6 /assets(/linker)/js/app.js (function (io) { // as soon as this file is loaded, connect automatically, //var socket = io.connect(); var socket = io.connect(“/hogehoge", {port: 起動ポート}); view(layout.ejs) 側で起動ポートを取得します。

Sails.js で CoffeeScript の自動コンパイルを実行する

Sails.js のContorollファイル(HomeController.coffee など)をCoffeeScriptで記述した場合、sails lift での実行であれば.coffeeファイルは自動コンパイルされますが、node(forever) app.js で起動するとコンパイル出来ない(起動しない) のでその解決法を紹介します。 npm i -S coffee-script app.jsの最初の個所で coffee-scriptをrequireする。 // Start sails and pass it command line arguments require('coffee-script'); //<-追加 require('sails').lift(require('optimist').argv); (2014/4/3追記) coffee-script@1.7.x

Sails.js v0.9.3以降で Nodeプロセス再起動モジュールを使う

grunt を内部的に使っているからかファイルの監視が常に発生してしまうので、それらを回避する方法です。 forever .foreverignore ファイルを作成し、.tmpフォルダを対象外とする。 **/.tmp/** forever -w start app.js Nodemon .nodemonignore ファイルを作成、以下のフォルダを対象外とする。 views/* .tmp/* .git/* nodemon -w api -w config nodemon api.jsでも大丈夫な気がしますが、 nodemon 使ってないので詳細は不明。 Supervisor .tmp,.git,views を対象外として起動する。 `supervisor -i .tmp,.git,views app.js`` 参考 http://stackoverflow.com/questions/18687818/auto-reloading-a-sails-js-app-on-code-changes

Ghost v0.3.3 から v0.4 へのアップデート

このブログは 記事作成時(2014/1/22現在) Ghost で組んでいるのですが、v0.3.3 からv0.4にアップデートしました。 Ghost は Node.js で組まれたBlogシステム です。 使っている人は少ないですが、Ghost 最近盛り上がって来たような気がします。 アップデートの方法ですが、下記を参考にしました。 How To Update Ghost To Version 0.4 http://www.allaboutghost.com/how-to-update-ghost-to-version-0-4/ 方法は2つあります。 コマンドによる自動アップデートとする方法と、手作業で zipファイルをダウンロードする方法です。 以下、実行コマンドです。 v0.3.3 -> v0.4 sudo

Meteorworks として初めて活動した 2013年振り返り

今年の発表 まずは今年の発表振り返り 第二回 JetBrainsユーザーグループ in 大阪」 WebStormについて発表してきました Node.js勉強会 in 大阪 MVCフレームワーク Sails.jsについて機能紹介 Grunt.jsを使ったExpressの開発環境構築 第7回関西PHP勉強会 PhpStormとGrunt.jsで作る CakePHP快適開発環境 第14回 リクリセミナー 知ってるつもりで実は知らない 拾う技術捨てる技術 (2014.1追記) 2013年のスライドの各アクセス数 via. SlideShare http://www.slideshare.net/yearinreview/kamiyam/U_4GAg (2014.1追記終わり) 今年の振り返り 個人的には 今年 Meteorworks(メテオワークス)として JavaScript、そして Node.js で仕事をする機会が多くなりました。

EJSを使って スクリプトなどをヒアドキュメントっぽくextends する

この記事は Node.js Advent Calendar 2013 20日目の記事です。 概要 Node.js というか express で使っているテンプレート ejs でのお話です。 expressで実装していて、この書き方で良いのかなという疑問があるので今回書いてみました。 Node.jsの フレームワーク、express ではデフォルトでテンプレートエンジン Jade を使用しますが、オプションで EJS を使用することも出来ます。 以下、EJSでの利用フロー。 EJS を使う上で共通部分を一括管理したいので express-locals をインストールし、app.js で反映させます。 npm install ejs-locals --save この ejs-localsで Viewの 共通レイアウトを layout.ejs として メインレイアウト index.ejs

concat/minifyしたファイルへのリンクを grunt-usemin を使って自動で書き換える

最近、HTML,CSS,JavaScript を記述するのに、Jade,Sass,LESS,Stylus,CoffeeScript などのプリプロセッサが便利で使っていますが、CSSFrameworkを利用することもありファイルが複数に分かれていることが多くなってきました。 grunt に限らず自動化処理を実行して、本番環境用に結合( concat )・圧縮(minify) して複数あるファイルを1つにまとめてアップロードする方も多いと思います。 しかし、HTML内で CSS( meta link=~ ) JavaScript (script src=~) は 本番環境では minifyファイルを、開発環境では元々の複数にわかれたファイルのパスを設定することになります。 (Sassのinclude 等を使えば最終的には1ファイルに纏まりますが、CSSファイルのみの構成などもあるので・・・・) 意外とこれが面倒で、私は minify ファイルをリンクしたタグをコメントアウトした状態で挿入しておいて都度切り替えるということをしていました。 ここで登場するのが、grunt-usemin です。 grunt-usemin はYeomanで使用されているのですが、基本パック的な webapps もすでに大きくなり過ぎていてわかりづらいので、今回はシンプルなフォルダ構成での設定例を挙げてみます。 色々と設定があるので、後々拡張していくと良いかもしれません。 導入

第2回デザイナー向けプログラム勉強会 (Sass編)を開催しました #DmP02

DmP 第2回目ということで、Sass 勉強会を開催しました。 デザイナー向けプログラミング勉強会 DmP02 http://connpass.com/event/3840/ DmP はプログラミングを覚える会なのに Sass ? と思われるかもしれませんが、Sassで使われる変数や extend、mixin がプログラムをする上で役に立つのでは? ということで、今回選んでみました。 資料は github にアップしています。 Githubで資料などを管理しているのは、同じ課題を複数回行うという目的からですので、またいずれSass編できればよいですね。 https://github.com/Designer-meets-Programming/files-vol2-Sass ※ ワークショップの復習用なので実際に参加した方でないとわかりづらいかもしれません。 当日の行ったSublimeText2 のインストールとSsss のコンパイルまでの手順を追加しています。 今回は Compass を実際に使うところまで進めなかったが少し残念ですが、Sass の基本的な部分はきっちり使えるようになったのではないかなと思っています。 当日参加された方のWindows環境で [Decode error - output not utf-8] のエラーがどうしても解決せず、終了後

ブログをWordPressからGhost に移行しました

テーマごと移植したので見た目としては大きな変化は無いのですが、ブログを Ghostへ 移行しました。 Ghost は Node.jsで作られたBlogシステム(CMSではない)で、ユーザとして見ると非常にシンプルなものとなっています。 Ghost https://ghost.org/ (2013/12/21追記) 日本語公式ドキュメントが公開されたようですね。 Ghost日本語ガイド http://docs.ghost.org/ja/ (2013/12/21追記終り) 今年の初旬に Kickstarter で記事 がupされ、私も使ってみたいと思い(少額では有りますが)支援参加していました。 すぐに目標額に達した覚えがあります。 Ghost: Just a Blogging Platform http://www.kickstarter.com/projects/johnonolan/ghost-just-a-blogging-platform 記事投稿 投稿はMarkdown

Node.js

細かすぎて伝わらない Sails.js v0.9.3 のtipsまとめ

Sails.jsは0.8系から0.9系にバージョンアップした際、仕様が大きく変わったので少しまとめてみました。 ちなみにSails.jsは もう v0.9.4のリリース終わって v0.9.7です。。。(2013/10/17現在) grunt 依存 sails lift(node app.js) 実行時、内部的にgrunt を実行しています。 これはv0.9系の一番大きい変更であり、一番やっかいな仕様変更です。 これにより、grunt[default]を実行し、そこからSails(Express)でサーバを起動するタイプの処理(grunt-express-serverなど)が動作しません。 また、これに付随するのか node-supervisor での起動も出来ません。再起動を延々繰り返します。 (2014/4/1追記) ignoreファイルを設定することで動作します Sails.js