Re* Programming

xs-dev(moddable)セットアップ

xs-dev インストール npm i -g xs-dev 初期設定 xs-dev setup --target-branch public helloworld xs-dev run --example helloworld エラーが出るようになるが... /Users/weizen/.local/share/xs-dev-export.sh:source:5: no such file or directory: /export.sh IDF_PATH のパスがないことによるエラーだった ESP32のセットアップをすると解消されるらしい => ならなかった xs-dev info で表示される ESP32 IDF Directory のパスを IDF_PATH に指定 source $HOME/

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

今回、中国出身の Designer 王雅さんと一緒に制作した「寄席の箱」を SNACKS Vol.2 で展示しました。実は、王さんは私が学校の授業（IoT）で教えていた生徒なのですが、卒業デザインで発表した内容の世界観がとても良いなと思っていました。せっかくなので卒業制作とは別に展示やコンテストに出せるものにしないかと声をかけたのでした。 // 一応補足しておくと学校の卒制の合否判定は私の担当では無く、また卒業制作提出後のやり取りです彼女は、日本のデザインと漫才がとても好きで来日し、1年足らずで日本語のやり取りがほとんど出来るぐらいになっていました。お笑いを知るには歴史から（？）ということで漫才について色々と調査し、その流れの中で寄席や漫才、お笑いにはテレビが非常に大きな関わりを持っており、欠かせないものであると感じ、その時代背景とともにお笑いの歴史をブラウン管に映し表現したい。というものでした。例えば、中国にもお笑いが有り、ボケとツッコミなど日本との相関図をインフォグラフィックで表現したり、お笑いやコントのキーワードをアニメーションさせるモー

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

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

kinect

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

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

Meteorworks 2015年振り返り

約一年振りの更新となりますが、みなさんお元気でしょうか？振り返りとして2015年最初で最後の記事としたいと思います。やってみたことと実現出来たこと今年一番大きなことは、個人事業の仕事でもNode.js を使うことがほぼほぼメインとなりました。反面、今年のテーマとしては昨年以上にWebをやらないと決めて活動しました。もちろん仕事では受けているのですが、そこに留まらないことを目標として、Webではないイベントに参加する機会を作りました。昨年とは違う世界が見えるかなと思って活動したように思います。そして、本当にいろんなことを始めていた１年でした。写真を撮ることも続けていたのですが、撮影の依頼が来ることにもつながり、またそこでの知りあった人と仕事の繋がりが生まれる。といった好循環もあり、継続的な収入があったのは大きいです。敢えて今年やらなかったこと一方、Webはやらない。という今年のテーマに沿った行動もあり（昨年ほどは）勉強会に出ない1年でした。リアルに顔を合わせる知人には「は？」と言われるのですが、参加していた数は圧倒的に少な

Meteorworks 2年目 2014年振り返り

かみやんの個人活動としての Meteorworks の2年目が半分以上終えようとしています｡昨年は初年度ということもあり慣れないことばかりでしたが､今年は色々と各方面から声をかけていただくことが多くなりました｡ありがとうございます｡今年、実は敢えてWebから離れることを意識していました｡もちろん､主催のイベントはがっつりWebなのですが､大半Webではないイベントに参加しました｡カメラで写真を撮るようになったことも大きく写真を撮る係だったり､運営のお手伝いだったり｡自分が面白いと思ったこと､やりたいことを実現するのがたまたまWebだった｡またそうじゃない方法だった｡という流れにしたいなと考えています｡ Meteorworksとして活動し始めた時から肩書はEngineerとしています｡これは､いずれ復活したい自動車に関わる仕事であってもそのまま使えるようにという意味もあります｡来年は「かみやん，Webやめるってよ」って言われるぐらいになりたいですね｡今年以上にいろんなことをやっていきたいと思います｡どうぞよろしくお願い致しま

Photograph Advent Calendar [16日目]

しわっす！過去最高に忙しいしわすむかえておりますかみやんです｡ * Photograph Advent Calendar 2014 16日目､アカリ (@kokona_san)さんからバトンをつなぎます｡よくよく考えるとアカリさんと初めてお会いしたのもカメラ遠足からではないでしょうか ? (違ったらすいません...) 私はカメラを手にすることで、今までは気にも留めなかった季節の移り変わりやイベントへの興味が出てきて､生活に変化が出ました｡色んな人とも知り合うことが出来ていいコトずくめですが，Engineerとしての商売道具より高額な遊び道具になりそうで怖いです(笑そう言えば､昔はハマったらお金掛かりそうだからとカメラは敬遠してたんでした｡カートもそのやらないと公言しているものの一つです｡クルマは好きですがやりません｡私公式的には､フォーミュラよりも箱カテゴリーが一番好きだからということにしておきます｡おっと､話がそれました｡本当ならAdventCalendarを飾れる冬らしいものを撮りに行くのがよいのかなと思

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系がr

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

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

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> [http://www.htmlday.jp/] の参加イベントとしても登録しています。 ※ HTMLDAYは勉強会のお祭りらしいので、同日色々な勉強会が開催されます（他にもTypeScript勉強会などたくさんあります…. ゲストなんと今回は、日本Node.jsユーザグループ代表 @yosuke_furukawa [https://twitter.com/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などのタスクツールは、他の言語のプログラマーやデザイナー関係なく利用すると便利ということもあり、今回は本編の申し込み以上の参加申請がありました。ハンズオンの性質上あまり多く参加者を募れないので、次回以降は開催形式を考えたいと

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/

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 [https://ghost.org/] は 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 ->

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

今年の発表まずは今年の発表振り返り第二回 JetBrainsユーザーグループ in 大阪｣WebStormについて発表してきました [http://www.slideshare.net/kamiyam/webstorm]Node.js勉強会 in 大阪 MVCフレームワーク Sails.jsについて機能紹介 [http://www.slideshare.net/kamiyam/slide2-21820687] Grunt.jsを使ったExpressの開発環境構築 [http://www.slideshare.net/kamiyam/gruntjs-express] 第7回関西PHP勉強会PhpStormとGrunt.jsで作る CakePHP快適開発環境 [http://www.slideshare.net/kamiyam/phpstorm-grunt]第14回リクリセミナー知ってるつもりで実は知らない拾う技術捨てる技術 [http://www.slideshare.net/

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

この記事は Node.js Advent Calendar 2013 [http://www.adventar.org/calendars/56] 20日目の記事です。概要 Node.js というか express [http://expressjs.com/] で使っているテンプレート ejs でのお話です。 expressで実装していて、この書き方で良いのかなという疑問があるので今回書いてみました。 Node.jsのフレームワーク、express ではデフォルトでテンプレートエンジン Jade [http://jade-lang.com/] を使用しますが、オプションで EJS [http://embeddedjs.com/] を使用することも出来ます。以下、EJSでの利用フロー。 EJS を使う上で共通部分を一括管理したいので express-locals をインストールし、app.js

Illumination Photo #IllPhoto Advent Calendar 2013 : DAY11

Illumination Photo #IllPhoto Advent Calendar 2013 [http://www.adventar.org/calendars/67] 11日目の記事です。この時期になるとイルミネーションが点灯する大阪･御堂筋大阪・光の饗宴 [http://www.hikari-kyoen.com/] 御堂筋イルミネーションのイベントとして12月1日から始まっています。

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-usem

第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 を実際に使うところまで進めなかったが少し残念ですが

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

テーマごと移植したので見た目としては大きな変化は無いのですが、ブログを Ghostへ移行しました。 Ghost は Node.jsで作られたBlogシステム(CMSではない)で、ユーザとして見ると非常にシンプルなものとなっています。 Ghosthttps://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 でも HTML