コンユウメモ @kon_yu

作ったガラクタとか、旅行とかの話

Maker Faire Tokyo 2017にGet Wildなイントロクイズを出展

クソアプリ MFT

2017/8/5, 6に開催されたMaker Faire Tokyo2017(以下MFT)に出展してきた。 個人で出展してきたわけではなく、今年もおうちハック同好会に混ぜてもらった。

makezine.jp

出展して1ヶ月立って落ち着いてきたのでブログに書いておく。 こういうのって本当は出展前に作っているもののベータ版から公開して知ってもらうところからやるのがマーケティングなんだよねーといつも思いながら終わった後に記事にしているわけだ

今年のMFTは会場も前回より広かった気がする。通路も広かったように思える。年々子供向けやギーク向けじゃないのものが増えてきていて良い傾向だと思う。

MFTオライリーの本が割引で買えるので今年もついつい買ってしまった。

また今年もしょうもないもの作ったよ

今年作ったのはコレ Get Wild and Intro

今年の4月にTMNのアルバムが発売され全曲Get WildというGet Wildが36曲入った(この時点で何を言ってるのわからなくなってくる)素敵なアルバムが発売された

GET WILD SONG MAFIA

GET WILD SONG MAFIA

このアルバムをただ聴いてるだけじゃ面白くない、もっとGet Wildをみんなに楽しんでもらう。そして制作するに辺りGetWildを聴き込もうという動機で作った

作ったものは簡単に言うと、Get Wildのサビの「Get Wild and Tough一人では解けない愛のパズルを抱いて〜」となる箇所を聴きどのGet Wildか4択で当てるものだ

Raspberry Pi3にタッチパネルの液晶を付け、外付けのスピーカから音を鳴らしている

ともかく動いている動画を見てもらおう


Get wild and intro at Maker Faire Tokyo 2017

苦労したところ

通常のイントロクイズとは違い、各Get Wildのサビの部分を予め知る必要がある。オマケにどの曲もどこから始まるかは一定ではない。 そこで、一曲一曲聴いてサビが始まるのが何分何秒からかスプレッドシートにまとめるということを行った。コレを作ってるときはオレの耳がゲシュタルト崩壊した。

全曲まとめたシートをオレ以外の誰に役に立つかはわかんないけど公開しているので閲覧して努力の一端を感じて欲しい docs.google.com

一部抜粋するとこのような内容、First Get wild and Toughが最初にサビが始まる時間。

タイトル アーティスト アルバム ファイル名 曲の長さ First Get wild and Tough 備考
Get Wild TM NETWORK Get Wild Song Mafia [Disc 1] 1-01 Get Wild.mp3 4:01 1:01
Get Wild ("FANKS CRY-MAX" Version ) TM NETWORK Get Wild Song Mafia [Disc 1] 1-02 Get Wild (FANKS CRY-MAX Version ).mp3 5:36 2:03
GET WILD '89 TM NETWORK Get Wild Song Mafia [Disc 1] 1-03 GET WILD '89.mp3 6:45 2:05
Get Wild ビクター・ファンタスティック・オーケストラ Get Wild Song Mafia [Disc 4] 4-01 Get Wild.mp3 4:02 1:00
--- --- --- --- --- ---
Get Wild Dave Rodgers Get Wild Song Mafia [Disc 4] 4-02 Get Wild.mp3 6:23 1:16
Get Wild 小室みつ子 Get Wild Song Mafia [Disc 4] 4-03 Get Wild.mp3 4:40 1:08

反響

おっさんにしか受けない　おっさんだけにはすごい受ける

あとオレ以外クリアでた人が1人しかいなかった。 10問中5問正解したらクリアなんだけどかなりむずい

  • TMN名義じゃないカバーしたGetWildも1/3ぐらい含まれているのでそこは割りと当てやすい
  • TMN名義だけどライブバージョンのアレンジの感じが古いか新しいかがヒントになる
  • ノーマルなGet Wildが正解でも、たくさん聞いてるともうわけわかんなくなる

来年はもっと子供の受けるものを作りたい(コレも毎年思ってる気がする)

技術的な説明

先も説明したとおり、ハードウェア構成は、 Raspberry Pi3にタッチパネルの液晶、外付けのスピーカ。

このタッチパネル液晶はこちらの商品を買った

cocopar　4インチIPSハイビジョンLCD ディスプレイ　タッチパネル　タッチペン付

cocopar　4インチIPSハイビジョンLCD ディスプレイ　タッチパネル　タッチペン付

このタッチパネルはHDMI接続ではなく、ラズパイのGPIOの部分に直接接続する形を取る。

どっかのブログに同様の製品を接続するのに設定にエライ苦労していたようだが、Amazonの商品説明欄に謎のDropBoxのURLが張って有り、そこにあるディスクイメージをSDカードに焼いてあげるとすんなりディスプレイが表示された。

開発言語

今回はPython縛りで開発した。いつもはRubyをこよなく愛して使っているが最近お仕事でPythonを使うことが増えてきたのでPythonで書いてみた。 GUIはTkinterというライブラリを使っている。GUIはビジュアルエディタを使うべきでコードで書くべきではないなぁと思った。

Pythonで作っていたのでザックリmacで作ってからラズパイに転送して動作確認する方法を取っていた。 ラズパイではGUIはキチンと表示されるがmacだとダメだったりなかなか環境差で苦労した。

ソースはかなりクソコードだけど一応リポジトリに上げといた。 github.com

MplayerでMp3を再生しているのでそれをインストールして、 後はgetwildsディレクトリに、みんな持ってるGET WILD SONG MAFIのデータをMp3にして置いておけば動くよ

Amazon Dash ButtonでGet Wildな音姫をDIY

クソアプリ

クソアプリ Advent Calendar 2016 6日目が放置されていたので、またしょうもないものを作ったので勝手に代打をします

はじめに

トイレでウンコをしているときにブリブリうるさいと嫁に叱られるので、排便の気配が来たら「あーー」と声をだすようにしたところ

「あーーー」っと大声で注目を集めた挙句にブッブーとおならサウンドを聞かせるだけだったので別の手段を講じることにした。

Amazon Dash Buttonを使って、音声ファイルが再生できれば「音姫」をDIYすることが出来るのではないかというわけで

Amazon Dash ButtonとRaspberry PiでGet Wildを再生できるようにした。

※ ちなみにオレはライブに行くくらいのTMNファンである

Raspbery Piの環境

  • ラズパイ本体: Raspberry Pi typeB
  • アナログスピーカー
  • OS: raspbian jessie

mp3の再生

mp3の再生にvlcをインストール　

sudo apt-get install vlc

コマンドラインでmp3再生

カレントディレクトリにあるGet Wildのmp3ファイル(getwild.mp3)をVLCで再生する

cvlc getwild.mp3

ここで、スピーカーから「ふんふんふーん　ふふんふーん」とイントロが聞こえてきたら成功

もしHDMIに画面出力している場合、アナログ出力に音声の出力先を換える

amixer cset numid=3 1

Amazon Dash Buttonの設定　

Amazon Dash ButtonをiTunesプレイヤーにしてみた　の Amazon Dash Buttonの同期 の辺りを参考すると良い。

ざっくりいうと、通常通りAmazon Dash Buttonの設定をするが、商品選択のタイミングで設定しなければ良い

Nodeの設定

Amazon Dash Buttonを利用するNode.jsライブラリにdash-buttonを利用した。

必要なライブラリlibpcapをインストール

sudo apt-get install libpcap-dev

npmのインストール

sudo apt-get install npm

dash-buttonのインストール

sudo npm install --save dash-button

Amazon Dash Buttonのマックアドレスをスキャン

よくわかってないがｍdash-buttonはAmazon Dash Buttonのマックアドレスを調べて、Amazon Dash Buttonのmacアドレスが通信を発信したのをフックしてコマンドを実行するらしい。その為Amazon Dash Buttonのマックアドレスを取得する。

取得する機能はdash-buttonに含まれている。

package.jsonファイルに下記のようにする

{
  "scripts": {
    "scan": "dash-button scan"
  }
}

スキャン実行

sudo npm run scan
# このタイミングでAmazon Dash Buttonを押すと下記の様にマックアドレスが表示される
Detected a DHCP request or ARP probe from xx:xx:xx:xx:xx:xx

Get Wild再生プログラム

以下のようにGet Wildを再生するコードをgetwild.jsというファイル名で保存する

const DashButton = require("dash-button");

const PHY_ADDR = "xx:xx:xx:xx:xx:xx"; // ここでマックアドレスを指定
let button = new DashButton(PHY_ADDR);
console.log("WILD AND TOUGH'")

//実行部
button.addListener(() => {
    const exec = require('child_process').exec;
    // execの第一引数にmp3再生のコマンドを記述する
    exec('cvlc getwild.mp3', (err, stdout, stderr) => {
        if (err) { console.log(err); }
        console.log(stdout);
    });

});

実行

sudo node getwild.js

プログラムが起動したら、Amazon Dash Buttonを押すとこんな感じでWild and Toughだ

課題

  • 一回ボタンを押したら、音声を停止できない
  • 一階ボタンを押したら、node.jsを再起動させないと、再びボタンを押しても反応しない。これプログラムでどうにかなるのかな？
    • node-dash-buttonを使うと上記2つの問題を解決できるかもしれない

参考資料

今年もクソアプリ作るぜ！HTML5で2000年頃のHP風にプロフィールサイトを作ったぜ

クソアプリ HTML5

クソアプリ Advent Calendar 2016 1日目の投稿です。

概要

HTML5、CSS3で2000年頃のホームページ風にプロフィールページを作成した。 ホスティング先は今時のGithub pages

作ったサイトはこれ

https://konyu.github.io/

ベースはTwitter BootstrapではなくGoogleのmaterial design liteを使い、レスポンシブ対応し、header, footer, main, sectionタグを用いて構造を作成し、css3を用いてアニメーションを利用した

ここから2000年頃のHP風のこだわりのポイントを1つずつ解説していく

タイトルは「無題ドキュメント」

ホームページビルダーで作られたページのデフォルト名は「無題ドキュメント」昔作られたいい加減なサイトはけっこう「無題ドキュメント」である。

いまでも「無題ドキュメント」で検索すると、昔の個人ページや企業ページがヒットするので調べてみるといいだろう

<title>無題ドキュメント</title>

metaタグにホームページビルダーのタグ

ホームページを作るといえばホームページビルダー

もちろん今回作成するにあたって使ってない

<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.0.0 for Windows" />

ジオシティーズの広告が入ってる

ホームページといえばYahoo Geocities。無料版だと自動で広告がページトップに挿入されるのだ。

その広告を適当に再現

スクリーンショット 2016-12-01 23.07.51.png

無駄に背景が連続した画像

スクリーンショット 2016-12-01 23.06.25.png

無駄に画像を字が読みにくい感じで背景画像を設定

Japanese ONLYの謎の人種差別的挨拶

「Sorry,this site is Japanese ONLY」をサイトトップに追加 日本語だけで申し訳ない気持ちを表してるが、英語的に全然ダメ。当時からおかしいという指摘は多々あったけど。 エスカレータは本来2列で並ぶべきなのに、片側を空けてしまうように広まってしまっていたのだ

ダサい感じのアクセスカウンタ

カウンターはなぜかカンストしてるかデータが吹っ飛んでるかで1000+とかで下駄を履いているのもポイント

※ カウンターはイメージです

リンクするルールとバナー画像

スクリーンショット 2016-12-01 23.19.19.png

リンクしてくれるホームページに設置できるように、バナー画像を用意するものなのだ

※ リンクフリーというのもよく使われるけど英語的に間違ってるよ

tableタグをGrid systemで表現

スクリーンショット 2016-12-01 23.22.59.png

昔のページでよく使われたtableタグを多用して作られてるように見えるが、material design liteのグリッドシステムで再現

iframe風のサイドバー

スクリーンショット 2016-12-01 23.27.38.png | スクリーンショット 2016-12-01 23.36.50.png

iframe風のサイドバーは、画面幅が狭くなると自動で非表示になる。スマフォでアクセスしても非表示。

無駄に激しくチカチカするnewアイコン

古くはgifアニメで作られていたがcssのアニメーションで再現

ゲストブック用のBBS

最近めっきりなくなった掲示板(BBS)は昔のサイトは挨拶用とか、XXXXを語る用とか1つのHPに複数のBBSがあったりしたもんよ

100の質問と工事中

その名の通り、昔はやったしょうもない質問が100個ある。100の質問(さらにしょうもない1000の質問というもうクソミソなものもあったもんよ)

そして永遠に工事が完了しないサグラダ・ファミリアのような工事中の表示

なぜか自分のPCの説明のページがある

歴代の自宅PCのマシンスペックが「CPU　Pentium3 1GHz」とか「メモリ　512MB」とか書いてある

メーカーのPCが高くて、自作PCで組むと1/3ぐらいの金額で組めた時代だからかね

ポインタについてくる文字列たち

視認性を下げUXを著しく下げるJavascript

Special Thanks

参考にしたサイトたち