君たちは永遠にそいつらより若い

技術と音楽と日々のこと。

イベント: 「iro-hackathon〜いろハッカソン〜」 に参加してきましたレポート

イベント アート

コミケとお盆休みの裏番組的イベント、iro-hackathon〜いろハッカソン〜 というイベントに参加してきました。

【iro-hackathon〜いろハッカソン〜】 : ATND

f:id:kuteken:20140819172714p:plain

8/16はirohaの日!?
iroha miniをいろんな技術で拡張する、アートハッカソンを開催します。
おみやげにiroha miniを全員プレゼント☆

8/16 は、私の姉の誕生日であると同時にirohaの日であるらしいです。毎年うっかり誕生日おめでとうを言い逃してしまう私ですが、今年は言えた！この時点で iroha様々です！！！

本イベントはiroha miniのファンイベントです。
協力 : TENGA株式会社

しかも、TENGA 公式協力！これは行くしか無い！迷わず参加ボタンをクリックしました！

iroha とは

知人にこのイベントについてお話しする中で、そもそも iroha が何か理解されていない方が一定数いらっしゃることに気がつきました。そのような方は、こちらをご一読ください。

iroha - Official Website

女性らしくを、新しく。もっと自分のからだに素直でいよう。
もっとセルフケアを安心して楽しもう。
すべての女性に、新しい毎日がはじまります。
iroha DESIGNED BY TENGA.

公式サイトの説明文の湾曲的かつソフトな表現が素晴らしいです。この場で直接的に書くと色々と不都合が発生するので、お察しください。

当日

どんな方が参加するのだろう！？とワクワクしながら、当日まで指折り数えていましたが、

f:id:kuteken:20140819172759p:plain

ただの羞恥プレイになっていました。

ただのドMに成り下がるのは悔しかったので、誰かいないかとリビングに上がってみると、岡山から来た @puhitaku くんを発見。コミケ帰りで疲れているところを連行し、会場の 8bit cafe に向かいました。細く長い 5F までの階段を抜けると、たくさんの人が！！！来場者の方々も男女半々で、健全なイベントのようでした。ほっ。

さて、iro-hackathon 開催です。

第1部 : ライトニングトーク

触感センサ×iroha miniで魔改造(ちーむほじほじ)

そもそも穴をほじる系の研究をされていたチーム。TENGA の中に仕込まれた圧力センサを触ると変態紳士(iroha) が震えるよ☆という、色々と隠された意図を感じざるを得ない発表でした。

f:id:kuteken:20140816172452j:plain

実際にTENGA 内の圧力センサを触ると、やたらリアルな感覚を受け、想像力が膨らみました。これは、TENGA に指を入れて操作する系エロゲという新ジャンルが産まれるかもしれない！未来を感じました。

konashi を使った iOS × iroha mini コントロール

iroha は、通常仕様では本体ボタンでの、振動ON/OFFのみのコントロールです。このチームは、iroha とスマートフォンの無線通信アプリを作り、無段階の振動調整機能を付けました。

f:id:kuteken:20140816173450j:plain

Vibease ぽい。振動の変化も非常に繊細で、機構を全て機体の中に納めれば、普通に売れる。ストレートにイケてました。

第2部 : 銀ナノインク「AgIC」を使って、光るirohaをつくってみよう!

家庭用プリンタを電子回路印刷を印刷できる AgIC のペン版を使って、光る iroha としてデコろう☆というワークショップタイムです。

大量の iroha mini（壮観）。

f:id:kuteken:20140816170818j:plain

好きな iroha を選んで、デコりタイムです。

f:id:kuteken:20140816175846j:plain

銀ナノ粒子インクのペンで回路を描くと、1秒ほどでインクが乾燥し、ペンの軌跡が銀色になりました。新鮮！小型LEDをテープで貼って、紙を丸めて電池の電極に触れさせると、

f:id:kuteken:20140816175706j:plain

…光りました！これは、子ども向けのワークショップによさそう！

そして、良い歳した大人たちが本気で iroha をデコった結果がこちら。

f:id:kuteken:20140816183451j:plain

某参加者の女性「私、これ枕元に置いてても、絶対バレない自信あるわ。」

f:id:kuteken:20140816183456j:plain

御尤もです。

以上、イベントレポでした。

ほとんどの方が iroha を実際に触るのが初めて。こっちの方がかわいい！とか何とかいいつつ、和気あいあいと男女一緒に明るくセルフプレジャーグッズをいじり倒せる、明るく爽やかに笑い合える良いイベントでした！楽しかった！性について、こういう爽やかさで語られて、もっと正しい知識が広まり、もっとハッピーでストレスフリーな世界になると良いなぁと思います。

本日は、2時間のみの開催ということもあり、LT & ワークショップという形式でしたが、今度は TENGAさん主催のハッカソンとかやらないのかな(笑) すごく盛り上がると思うけど、悪ノリさせないようにさじ加減が難しそうですねw

主催の @lumie007 さん、ありがとうございました！

p5.js 入門(公式のGet startedを意訳しながらやってみた)

p5.js Web

フィードで流れてきたので、触ってみる。

p5.js とは

http://p5js.org/

オンブラウザで気軽に Processing ライクにコードを書くための、JavaScriptのライブラリです。HTML5オブジェクト、ウェブカム、音声などにアクセスできるライブラリもあるらしいので、様々なインタラクティブコンテンツに応用が利きそうですね。

どんなことができるの？

この紹介ムービーページでざっと説明してくれています。（最後までつい見てしまうw）

http://hello.p5js.org/

demo よりも、examples の方が充実してて、見ていて楽しい。個人的には、 Simulate を見るとテンションが上がります。

http://p5js.org/learn/#examples

Get started をやってみる

公式の Get started を抜粋＆意訳しながら、ざっとやってみます。

http://p5js.org/get-started/

チュートリアルで最終的にできるもの

f:id:kuteken:20140807155927p:plain

ファイルダウンロードとセットアップ

ファイルをダウンロードして使う場合

ここからライブラリとサンプルファイルをダウンロード。

http://p5js.org/download/

解凍すると、中身はこんな感じ。

f:id:kuteken:20140807152545p:plain

自分の環境のパスに合わせて、p5.min.js を読み込めばOK。

<script src="../p5.min.js"></script>

CDN を使う場合

CDN から p5.js を読み込めばOKですが、0.0.0 を使いたいバージョンに合わせること、p5.min.js にすることを忘れずに。 ※2014/8/7 現在は、0.3.0が最新です。

<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.0.0/p5.js"></script>

↓

<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.0/p5.min.js"></script>

開発環境

f:id:kuteken:20140807155939p:plain

α版ですが、 p5.js editor という専用エディタがあります。2014/8/7 現在は、mac OS X 版のみの提供で、Windows と Linux 版はもう少し経ってからリリースするそうです。

Get started では、 Sublime Text 2 が使用されています。

初めての Sketch

円を描こう

インターネットに繋がっていれば、以下をこのまま書けば動くと思います。

<!DOCTYPE html>
<html>

  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.0/p5.min.js"></script>
    <script>
      function setup() {
      }

      function draw() {
        ellipse(50, 50, 80, 80);
      }
    </script>
  </head>

  <body>
    <h1>Hello p5.js!</h1>
  </body>

</html>

Prossesing を触ったことがある方でしたら、見覚えがあると思いますが、

ellipse(50, 50, 80, 80)

は、中心を左上から (50, 50) の位置, 横幅と高さを (80, 80) で円を描け という命令です。

もし、エラーが起きて、うまく動かなければコンソールを見て、何かエラーが出ていないか確認しましょう。

もうちょっとエキサイティングな円を描こう

マウスが押されていたら黒い円、押されていなかったら白い円を描くサンプルです。

<!DOCTYPE html>
<html>

<head>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.0/p5.min.js"></script>
  <script>
    function setup() {
      createCanvas(640, 480);
    }

    function draw() {
      if (mouseIsPressed) {
        fill(0);
      } else {
        fill(255);
      }
      ellipse(mouseX, mouseY, 80, 80);
    }
  </script>
</head>

<body>
  <h1>Hello p5.js!</h1>
</body>

</html>

描画する領域が 640x480 なので、その領域をはみ出ると描画されていません。

f:id:kuteken:20140807155927p:plain

チュートリアルが終わったら

この後は、以下の資料を見て、勉強して行きましょう！

以上、チュートリアルの抜粋＆意訳でした。

うん！当たり前ですけど、思いきし、Processing でした！w

Processing への参入障壁が超下がって、いいっすね。p5.js を勉強したい場合、Processing の本を読むと良いと思います（でも、大体 Java で書いてあります）。

ジェネラティブ・アート -Processingによる実践ガイド

ジェネラティブ・アート -Processingによる実践ガイド

ビジュアライジング・データ ―Processingによる情報視覚化手法

ビジュアライジング・データ ―Processingによる情報視覚化手法

Processingをはじめよう (Make: PROJECTS)

Processingをはじめよう (Make: PROJECTS)

特に、ジェネラティブ・アートは超美しいので、ヴィジュアルブックとしてもオススメ。（今、検索したら追加で以下の記事が出てた。読もう。）

HTML5でのジェネラティブ・アート［Processing、JavaScript、チュートリアル］ （『ジェネラティブ・アート』の未刊の章）

ばりばりアートっぽいことすると良いと思います。

arduino のリセット方法 (Line in use 対策)

arduino にBluetoothモジュールを繋ぎ、ターミナルからcuを使ってシリアル通信していた際に、モジュールに接続しようとすると、Line in use で弾かれることがあった。

$ cu -s 9600 -l /dev/tty.SBDBT-001bdc091961-SPP
cu: /dev/tty.SBDBT-001bdc091961-SPP: Line in use

他の端末で接続済みの際に出るエラーだけど、特に他の接続で使っていない場合にも出ることがある。そういう時は、arduino を一度リセットプログラムでリセットすると正常に動く場合がある。

リセットプログラムはとてもシンプル。空のsetup, loopを書いてあげるだけ。

void setup() {
}

void loop() {
}

以上。

2014年のro69jackでいいなと思ったアーティストまとめ

音楽

夏フェスの季節ですね。この季節には、優勝すると日本4大フェスのの一つ ROCK IN JAPAN FESTIVAL(いわゆる、ロッキン) に出られる！という、邦楽ロックの大手登竜門のオーディションro69jackが開催されます。

このro69jackの選考では、マーケットにはまだ評価されていないけれど、それなりにイケてるアーティストが集まってくるので、個人的に好きなアーティストを掘り出す際にコスパがとても良い。そんなこんなで、僕が2014年のro69jackでいいなと思ったアーティストの個人的なまとめです。

優勝組で良いなと思ったアーティスト

アホみたいな数のエントリーから、1次選考通過組は461組。そして、そのうち6バンドが優勝しましたが、僕は優勝組の中では、この2バンドが良いなーと思いました。

プププランド「おっぱい」※癒されたい人向け

少し懐かしくて、荒削りで爽やかなサウンド。ゴイステとか、andymori みたいなのが好きだと、好きかも。

魔法少女になり隊「RE-BI-TE-TO」※騒ぎたい人向け

ピコピコxパラパラxスクリーモというインパクトが強過ぎる組み合わせ。フェスでは、モッシュとダンスが入り乱れるでしょう笑

全6バンド聞きたい方はこちらへ

https://www.youtube.com/playlist?list=PL4m3xvz4an44QV3nf4kmi4y-tXOwtFtYg

1次選考で良いなと思ったアーティスト

1次選考通過組は、461組。掘り出し物アーティストが多くて、聴き回ると楽しいです。その中で良いなと思った9バンド。作業中BGMにしていたので、たくさん聞き逃していると思いますけどねw

全461バンド聴いて掘り出したい方はこちらへ

http://jack.ro69.jp/contests/jack2014/qualifier

バンドというものは生もの！継続しているだけでも奇跡のようなものなので、気になったら活動しているうちに是非ライブへ！

Facebookアプリ エラー `App Not Setup: The developers of this app have not set up this app properly for Facebook Login.` 解決方法

Web

目の前で友人がハマってたので、記録。

現象

  • 2014年以降？に発生
  • アプリ開発者アカウントでアクセスしているときは、問題なくアプリにログインできる
  • その他のアカウントでアクセスすると、App Not Setup: The developers of this app have not set up this app properly for Facebook Login. が出てアプリにログインできない

発生理由

  • アプリが public ではない！

解決方法

  • 該当Facebookアプリ開発者画面にて
    • Setting>Contact Email へメールアドレスを登録する
    • Status & Review>Do you want to make this app and all its live features available to the general public? を ON にする

※public にするためには、メールアドレス登録が必須

英語よく分からんわーという方は、以下の動画とかを見ると良いです。

https://www.youtube.com/watch?v=kRuOe_yLWR4

いやしかし、FB の管理画面、超変わってたわー。

参考資料

https://www.facebook.com/help/community/question/?id=10201756195602898

http://stackoverflow.com/questions/21329250/the-developers-of-this-app-have-not-set-up-this-app-properly-for-facebook-login

http://www.omnioo.com/record/sns/app-not-setup-the-developers-of-this-app-have-not-set-up-this-app-properly-for-facebook-login/

grunt-image で画像最適化を自動化する

Web

あるある

デザイナ(コーダ)「うおー！(^ω^)(すごい勢いでデザイン＆コーディング)」

エンジニア「デザイナからデータを受け取ったよ！そのまま突っ込むよ！えい！(^ω^)」
ユーザ「画像…めっちょおもぃ(^ω^)」

あなたの…心に…直接…呼びかけています… 画像…最適化できてますか…誰がやるか…曖昧に…なっていたりしませんか…

画像最適化とは

画像最適化とは、Webサイトのレスポンス改善を目的に、画像に適切な処理を施すことです。一口に言っても、様々なアプローチがあり、形式を変換したり、画像をまとめたりすると、コードも触る必要があるので大変。今回は効果がわかりやすく、カジュアルに取り入れやすい 画像ファイルサイズを小さくする(品質を保ちながらデータを削ったり、圧縮する) の最適化手法にフォーカスします。

画像最適化ツールといえば、先日、話題になっていた http://compressor.io/ が記憶に新しいですが、以下の理由であんまり使いたくない。自動化したいです。

  • GUI でぽちぽち最適化するのはかなりしんどい
  • デザイナ(コーダ)がやるのか、エンジニアがやるのか曖昧
  • 画像最適化自体を忘れちゃうことがある(だって人間だもの)
  • リリース前案件の画像を外に出すのは抵抗がある

CLI だけで完結する grunt-image を使って、自動化

そこで、いい感じのツールを探していて、 grunt-image を見つけました。

PNG, JPEG, GIF, SVG 画像をCLI完結で最適化してくれる grunt モジュールです。 tasks を覗くと、画像形式に合わせて、 optipng や jpegtran などの画像最適化コマンドをかけていることが確認できます。

インストール・設定

インストールする際には、libjpeg-turbo を入れてから、対象ディレクトリにて npm でインストールしましょう。また、自動化させるには、watch も必要なので、入ってなければ npm install watch とかでインストールしてください。

$ brew install libjpeg libjpeg-turbo
$ npm install --save-dev grunt-image

続いて、 Gruntfile.js の記述。例えば、src 以下への画像追加を watch して、dist に吐き出したい場合はこのように書きます。

module.exports = function (grunt) {
  grunt.initConfig({
    image: {
      static: {
        files: { 
        }
      },
      dynamic: {
        files: [{
          expand: true,
            cwd: 'src/', 
            src: ['**/*.{png,jpg,gif,svg}'],
            dest: 'dist/'
        }]
      }
    },
    watch: {
      images: {
        cwd: 'src/',
        files: ['**/*.{png,jpg,gif,svg}'],
        tasks: ['image']
      },
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-image');
}

動かしてみる

さて、設定が済んだら、grunt watch して、src ディレクトリに画像を投げてみましょう。すると、このとおり。自動的に画像が最適化され、 dist ディレクトリに保存されました。素敵っす。

$ grunt watch
Running "watch" task
Waiting...
>> File "src/sample.jpg" added.
Running "image:static" (image) task

Running "image:dynamic" (image) task
✔ src/sample.jpg -> before=707.76 kB after=336.14 kB reduced=371.61 kB(52.5%)

Done, without errors.

まだ研究の余地がありそう

  • compressor.io: 707kB -> 250 kB
  • grunt-image: 707kB -> 336 kB

改めて、 compressor.io は、すごいですね。上記で最適化を通したサンプル画像ファイルは、compressor.io のカメレオン画像なのですが、まだ90kB近く開きがある。裏で何を使ってるんだろうなー。要研究です。

いきなり全て完璧にはできませんが、まずはできるところから導入していきたいですね。

参考リンク: grunt-image 作者 @1000ch(id:hc0001) さんの記事

調べてる途中で日本の方と気付いた。良記事です。今月のWEB+DBの記事も執筆されているらしい。読もうー。

画像の最適化をCLIだけで行うgrunt-imageを作った http://1000ch.net/posts/2014/grunt-image.html

WEB+DB PRESS Vol.81

WEB+DB PRESS Vol.81

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

ナラティブ【narrative】とは。

英語

ナラティブ…？

疑問は本日読んだこの記事から始まった。

アマゾンの会議は30分間の沈黙から始まる http://ascii.jp/elem/000/000/897/897508/

アマゾンジャパン ハードライン事業本部 大木 聡本部長は言う。ジェフ・ベゾスCEOの方針で、社内ではナラティブ（説話）第一主義なのだという。

ナラティブ=説話？

「重要な問題について理解してるかどうかを把握するためにナラティブが重要。ナラティブは文化なので他の企業はマネしづらいだろう」（大木本部長）。

ナラティブ=文化？

アマゾンでは会議の運営もナラティブ流だ。60分の会議であれば、最初の30分間は黙って書類を読むために費やされる。残りの30分間で、本文と補遺を読んでも納得できないことを質問攻めにするのだという。

ナラティブ=流派？

わからないので辞書を引いた。

ナラティブ【narrative】
物語。朗読による物語文学。叙述すること。話術。語り口。→ナレーター

ナラティブ=物語？

ダメだ。全然、話が繋がらない。よく意味が分からない。みなさん天才なんだろうか。ストーリーとナラティブの違いがわからないクソ野郎は、僕だけなのだろうか。

他の使われ方を調べてみた

医療、ゲーム、広告、エッセイ、心理学、ガジェットネームと幅広いけど、Amazon の記述としっくりハマる何かが得られない…。心理学に至っては、かなりディープで素敵な世界が広がっていそう。

結局「ナラティブ」とは

一人称、体験、没入感、語り手…など、しっくりくる感覚の言葉を悩みあぐねいていたところに偶然 @hatone がアメリカから帰国してきたので、帰国記念の親子丼を煮たり、ナラティブクリップのアプリを見せてもらったりしながら聞いてみたら、とてもしっくり来る説明をしてもらえた。

「ホラー映画を見てるのがストーリーで、お化け屋敷に入ってるのがナラティブだよー。一連の出来事をウォークスルーしてる感じかなー。」

一連の！出来事を！！ウォークスルー！！！！！！！

これか。おにいちゃんしっくり来たよ。さすが在留者ちげーな。

件のAmazonの記事での「ナラティブ」とは

ここでは、一連の出来事の語り手と言う意味を持って、黙読するドキュメントのことを、社内で「ナラティブ」と呼んで使っているのね。

で、後から以下の記事を読んだら、ちゃんと "narratives" って書いてあんの＾＾

Specifically, before any discussion begins, members of the team -- including Bezos -- consume six-page printed memos in total silence for as long as 30 minutes. (Yes, the e-ink purveyor prefers paper. Ironic, no?) They scribble notes in the margins while the authors of the memos wait for Bezos and his minions to finish reading. Amazon (AMZN) executives call these documents "narratives,"

http://management.fortune.cnn.com/2012/11/16/jeff-bezos-amazon/

日本語の記事でも、最初から「ナラティブ」って固有名詞っぽく書いてくださればよいのに。。

心理学としてのナラティブは深そうなので、今日はひとまず立ち入らずにまたちゃんと論文を読もう。あと、ゲーム業界のお話では、ナラティブがウォークスルーするゲームスタイルではなくて、「物語をより深く体験できる…それがナラティブゲーム！」と、あるジャンルになってしまっている。こうなると、本来の意味から更に意味が派生して、ナラティブという言葉で、物語を経験させる手法論が語られてしまっていて、言葉がごちゃまぜで、よく分からんことになっている。ちなみに、ナラティブゲームなら僕は moon が一番好きです。もー今日はこれでおしまい。なんか間違ってそうだったら、英語がすごいひと教えてくださいm( _ )m

MOON

MOON