2016年9月15日木曜日

webでも単語をぶつ切りせず改行したい。

 改行を間違うと悲しい

webサイトでよくあるのが、妙な所で改行が入ること。例えば以下の様に、変な所で改行が入ると悲しい。これは過去にあった実例。

「リチャード・クレイダーマンコ
ンテスト」

 伝統あるピアノコンテストが台無しだ。

 ネットで見かけた対策

そこでinline-blockを指定した<span>タグで切られたくない単語を囲むと良いよというネタを見かけたのだが。なんか行末がガタガタして格好悪い。このガタガタを直すCSSがtext-align: justify;なのだが、inline-blockでぶつ切りにしてるので効かない。

 Justifyが使える改良案

いくつか試した結果inline-blockではなく、white-space: nowrapを指定した<span>タグで囲めばうまく行くのに気が付いたので、試した。実際にはchrome/IEが<span>タグの連続は改行なしというルールがあるので、<wbr>タグを挟んでいる。
 (Firefox,IE11,chrome,safariでは確認したが、iPhone等では未確認)


雑誌で見るような流し込み結果になった。これで一安心だが、全部の区切りを手入力すると大変なので、Tingy-segmenterという分かち書きjsをつかって、自動で区切りを判定できるようにした。

 使い方

ソースをコピペして、文章を適当に<p>や<div>で囲んでclassに「jas」を追加するだけでよい。ちなみに、ニーズがあるか不明だが<button>に長い文章を入れたい時も有効に使える。

デモページ: http://akirayou.net/jas.html

2016年9月8日木曜日

僕の3Dプリンタのテーブルは派手に反っている

 3Dプリンタのテーブル反っている。

写真ではわかりにくいけど、アルミ製のテーブルの上にガラス板敷いて使っています。よくみると左端のほうでアルミ板が下がっている。 0.5mmほど反っているのだ。このアルミ板にクリップでガラス板を固定すると、ガラスも反ってしまう。
つまり3Dプリント中に高さがまちまちって事になって、印刷物がはがれてしまう。

そこで考えた、スペーサー挟めばいいじゃね?

アルミ板の研磨を考えたが手持ちのサンダーじゃ目詰まりしまくってまったく進まない。下がってる分だけスペーサー挟めばいいじゃん!でもどうやって?・・・・
3Dプリントしちゃえばよくない?
ということで、やってみました。1層(1ライン?)印刷すれば、高さの誤差をある程度吸収するはずです。高いところでは潰れて幅広にラインがでるし、低いところでは丸のままステージ上にのります。
うちのプリンタ(倒産したSolidoodle)はノズル径が0.4mmなので、高さの誤差が0.4mm未満の場所なら理屈の上では補正できます。G codeのヘッダ部分は既存の印刷からコピーしてくるとして、ライン生成G codeはエクセルセルマクロでつくりました。
 G code作成エクセル (google drive)
直線(G1)の時はI,J座標は不要ですが、付けてても無視されるのでそのまま無意味な値を書いています。 
こんな感じでガラス板の下に黒いラインが見えます。高さの誤差は正確には計ってないのですが、紙の隙間で試すかぎり、だいぶ改善されました。
このプリンタは構造上プリンタヘッドが動くXY平面がねじれてしまう上に、ねじれ調整用のネジもついていないので、多少の狂いはしょうがないです。マシになったのでOKっす。

調整の手順は以下の通りが楽です。
  1. アルミテーブルをできるだけ水平出しする
  2. スペーサーラインを出してみて、Z軸補正ネジで高さ調整(高い部分で十分ラインが潰れるように)
  3. スペーサーラインを出力
  4. スペーサーの上にガラスを敷いて、Z軸補正ネジで高さ調整。このとき絶対にテーブル調整ネジを触らない!(角度はスペーサでかなり正確に出てるはずなので)

 ほかにも・・・

そもそも反っていないテーブルを使えばいいのです。ガラスがテーブル土台の強度にまけて曲がるのが原因なので分厚いガラスだけでテーブルをつくればいいので、以下のようなガラストップにすればOKです。ただ、テーブル保持部自分で設計するのがダルイときは上の方法も便利ですよ。

参考:@arms22さんに教えて貰ったテーブル売ってるサイト


2016年9月4日日曜日

ダイソーのミニルーペが仕様変更、その対策

ダイソーのミニルーペとは

ダイソーのミニルーペは安いレンズ欲しい人の間では有名な商品。Φ31mm、f=70mmのレンズが108円で2枚取れる事で有名です。このサイズ・焦点距離のレンズはHMD作ったり、LEDの光をしぼるのに使ったり色々便利なサイズです。

 はずれ仕様の見分け方


 しかし残念ながら仕様変更があったようで、在庫が順次左のはずれの方に変わっています。いままで黒い部分を軽く捻るだけで分解して簡単にレンズが取り出せたのですが、はずれ仕様では接着されているのでコツが必要です。ぱっとみ見分けが付かないのですが、ホッチキスで留めてある方が「あたり」でセロテープで箱が閉じられているのが「はずれ」です。

 「はずれ」仕様でのレンズの外し方

試行錯誤でいろいろあると思いますが、とりあえず綺麗に外すことができたので報告。
 分解してみると、「はずれ」も「あたり」もそっくりですが、はずれのほうは赤枠でかこってる部分が接着されています。ウォータポンププライヤーや万力のようなものを使って、以下の2段階で接着部分を破断させれば外すことができます。

根元側の接着をはずす

まずは根元部分をプライヤーで挟んでパキパキと音をたてて、接着部分をはがします。一カ所パキッとやったら、少し回転させて次の部分をパキッとやります。

 裏面をみながらやると、挟んだ部分の接着部分が剥がれていく様子が見えるので、確認しながらやると楽です。

 

レンズ周りの接着をはずす

次はレンズ付近の接着をはずします。レンズの周りをもって、中のレンズを傷つけないよう気をつけつつもパキパキ外していきます。回しながらやって3回ぐらいパキっと言えば外れてると思います。
  

参考:接着部分拡大

接着部分は 縦の線と、天面に円周状にぽつぽつある部分です。イメージしながら割るとやりやすいと思います。

参考:そんな苦労しなくても

モノタロウや、Amazonで検索するとほぼ同一のレンズが1枚100円で売っています。100円+送料を素直に払うのも一つの手だと思います。


2016年8月28日日曜日

IoTが世界を変えるとか、全てがインターネットになるだとか。

先日「融けるデザイン」 という本を読んだ。心理学的な説明でIoTやUXを紐解く的な事が売り文句には書いてあるのだが、それとは関係なく知り合いが絶賛してたので読んでみた。 結構面白いので、雑に短く紹介。

かなりの部分、間違ってるかも知れないが、間違っているなりに納得したので、気にしない。間違った知識で恥を搔きたくなければ本を買おう。

世界は「身体」と「環境」でできている。

自分にとって、世界は意のままに制御できる「身体」とそれ以外の「環境」がある。身体とは例えば自転車に乗っている時は自転車も「身体」だし、マウスカーソルだって「身体」。何かの作業をしようとしている時に細かい事を意識せずに制御できるものは全部「身体」。身体を用いて環境に働きかけたり、その逆に環境から身体に影響をうけたりする。コレは定義。

ネットがある現在では身体ってのは世界の裏側に有っても、この世に存在しない概念的存在であっても身体であったりする、そこんとこOK? もちろん身体同様環境も変わるわな。

「価値」は「体験」を通して生まれる。

本能由来の価値等の体験を通さないものも有るけど、それは置いといて。
初音ミクの例を考えよう。身体と環境の相互作用の中で「体験」がある訳だけれども、上で紹介したように「身体」や「環境」は新しい技術や技能や制限(ミクのガイドライン等のルール)で変わっていく。そこで得られるのが新しい「体験」。ミクが現れる前の時代に、ポリッドスクリーンに映されたミクライブを見てもピンと来ない。「俺たちのミクがついにステージに!」という感動(=価値)には繋がらない。つまり「体験」を通して「価値」は生まれる。「価値」の上に再帰的に新しい「身体」を構築したりするので、深いレベルでの予測は困難。

したり顔で価値をデザインしろ!って言う人いるけど、出来りゃ苦労しない。ミクがこうなるなんて正直予測できてなかったでしょ?でも新しい価値を生む努力はできる。OK?

余談

先日「俺たちのミク」を説明したんだ。「その感情は、AKBやおにゃんこクラブと同じでしょ?」って返された。どうやったらうまく説明できるか頭抱えるよね、自転車の運転の仕方という「身体」に関する説明が難しいように「価値」に関する説明も難しい。

IoTの持つ意味

日経的には保守サービスの売り文句って側面がデカイだろうけど、おいといて。
上の文脈で考えるとIoTはインターネットを身体化(or環境化)するための試みといえる。大事なのは透過性。自転車という道具が身体化した時、自転車という存在は透明になった気がする。それが透過性。環境の側面だと、ネットで買い物する時に、わざわざ回線網やその先のサーバ群・倉庫の存在を意識しない(トラブルが起きない限り)。
インターネットの設計自体も透過性は非常に意識されていて、プログラマはインターネットを利用するアプリを書く時にネットの存在は意識しない(トラブルが起きない限り)。つまり透過性はインターネット進化の歴史からみても哲学として存在する。
現在ネットでは情報を一旦文字・画像情報に落として表示するのが一般的であるが、それだと文章理解というフェーズがあって透過的ではない。もっと透過的な手段で、情報をより直接的に扱って身体化・環境化を進めようというのがIoTである。

つまり文字という一旦解釈が必要な非透過的なインターフェイスから、より透過的なインターフェイスへの脱却を目指すというのが、インターネットにおける次の段階の透過性の実践ってこと。OK?

余談

全てがインターネットになる!って書いてあって「意味わからん。」となりがち。ここではインターネットの詳細は忘れて「 情報ってのは技術的にはいつでも何処でも得る事ができる。」その状態のことを単にインターネットと呼んでいるだけと思えばよい。昔は技術・コスト的には局所的な独自通信が安かったけど、今では世界中でインターネット越しに通信可能するのが合理的な時代になったって事です。デフォルトが局所通信なのか、デフォルトが全世界アクセス可なのか、この「環境」の違いは何かを生むでしょう。

まとめ

ネットを中心に色々なものに透過性を持たせるのが簡単になった事だし、新たな「身体」や「環境」を試行錯誤しよう!その中からきっと新しい「体験」や「価値」が生まれるさ!ということで自信をもって変な事しよう。


2016年7月13日水曜日

FreeBSDで監視カメラ

まず。Linuxではよく用いられるmotionに関してはUSBカメラではうまく動かず諦めました。なのでpwcviewを使ったUSBカメラによる監視カメラの作り方です。

カメラの認識

FreeBSDでのカメラの利用にはwebcamdというデーモンが必要なので、以下のスクリプトでカメラを認識させます。USBカメラを追加・削除する度にデーモンの起動が必要なので、繰り返し実行すればwebcamdを全部殺して起動し直すようにしています。

cameraStart.sh
#!/bin/sh
kldload cuse4bsd
killall webcamd
usbconfig list | grep Camera | awk -F : '{print "webcamd -d "$1" -B -H"}' | sh

監視(pwcview)

 pwcviewはカレントディレクトリのpwcview.msk(動体検知対象外を示すマスク)を読み込むので、カメラの数だけディレクトリが必要です。ここでは/cam/0ディレクトリを監視カメラ用ディレクトリにしています。

重要なのはpwcviewによる表示はxgaやuxgaに対応していますが、マスクはvgaまでしか対応していません(2016/7時点のバグ?)。なので今回はvga(640x480)での監視をしています(-s オプション)。pwcviewで動体検知をした再に動画に記録するのですが、この際の動画変換はmencoderで行います。深い意味は考える必要はなくてw=640:h480の所の解像度がpwcviewに与えたサイズと一致していれば良いです。
-dオプションでカメラの指定、-uで動体検知の感度(小さいほど高感度)を指定します。

/cam/0/run.sh
#!/bin/sh
cd /cam/0
F=`date +%Y%m%d_%H%M`
echo run $F
pwcview -hkr -s vga -f 5 -u 1300 -d /dev/video0 | mencoder -quiet -demuxer rawvideo -rawvideo fps=5:w=640:h=480:i420 - -ovc lavc -lavcopts vcodec=mpeg4 -o $F.mp4 >/dev/null 2>&1


複数カメラでの監視

複数カメラでの監視のため実際には以下のスクリプトで/cam/0と/cam/1の二つを起動しています。
 以下のスクリプトをcronで定期的に実行する事で、実行のたびにファイル名を分けて動体検知動画を見る事ができます。


 #!/bin/sh
killall pwcview
killall pwcview
sudo sh /home/akira/bin/cameraStart.sh
sleep 2

nohup /ssd/cam/0/run.sh &
nohup /ssd/cam/1/run.sh &

Future works

pwcviewが4:3サイズの画像しか対応していないのは今時じゃない。さらにマスクがvgaまでというのもなにか変。なので修正が必要だとは思います。西院フェスおわったら修正するかなぁ。
USBカメラからの読み込みは非圧縮のみなので高解像度ではfpsを高く出来ません。そこの改良までは手を付けるつもりはないですが、、、だれかやんないかな。

2016年5月27日金曜日

ゆっくり計るADコンバータにはノイズが必要だってばさ

重さを量る秤だとか、気温を測る温度計だとかをコンピュータで計る場合、アナログ回路でセンサー値を電圧値にして、ADコンバータで計る事になると思う。このアナログ回路にはある程度ノイズがある必要がある。

この「ノイズが必要」という事を忘れた設計をしている人が多いので、この場で愚痴っておこうと思います。

実験

1000回のデータを計測してその平均を出力するとします。その時に乗るノイズが正規分布で標準偏差(sigma)を0〜1の間で変化させて見ました。ヒストグラムをプロットするとsigma毎にこんな感じになります。
sigma=0のときは0と1しか取らないです、sigmaが0.4,1.0と大きくなるにつれて広い範囲に分布しているのが見て取れます。

 1000回平均値

いよいよ本題です。ノイズの大きさによる平均値の出方の違いを見ていきます。横軸(入力)は0〜1まで0.2単位で変動していて、それにノイズが乗っています。縦軸はADコンバータで計測した平均値を各ノイズ幅(sigma)毎にプロットしています。
真値とAD平均値
sigma=0すなわちノイズが無い時(青線)は0か1しか取らないのでどれだけ平均をとっても真値0.1,0.2,0.3,0.4はAD値平均では0です。逆にsigma=1、すなわちノイズの標準偏差がAD1bit分の時はほぼ綺麗な直線で1000回移動平均とれば0.1単位の値が余裕で読める事がわかります。
sigma=0.2だと正規分布関数形状由来の歪みが出るので補正が必要です。補正の仕方はσの値の大きさによって変わるので、可能ではあるが少しやっかいという状態です。

結論

ADコンバータで電圧を読み取る時で、平均値を取る位時間に余裕がある時は電気回路側でノイズを載せてもらいましょう。その程度の設計は追加コストほぼ0で出来るはずです。載せる量は積算回数にもよるので一概にはいえないですが、安全をとってとりあえず標準偏差=1bit位を目指せばいいんじゃないでしょうか?その辺は業界によって常識的な範囲が変わってくると思います。

今回は電気の話でしたが、これ以外にも、ファームウェアでノイズ取ってます!系もやっかいですよね。「ちょ、勝手に捨てないでよ!ノイズの量を計測した後に信号処理したいだってば」って事、よくある、よくある。なんだろ、この親切が超裏目に出る感じ。


2016年5月25日水曜日

音楽フェスのブッキングからパンフ作成まで

京都で行われる音楽フェス西院ミュージックフェスの応募音源の管理から、パンフレットのスケジュール一覧作成までの概要をまとめます。10年ちかくやってちょいちょい改良されてきた手法なので同じく音楽フェスの事務をやる人の参考になれば幸いです。

やること

約450組のブッキング・選考ミュージシャンの中から音源を聞いて29会場・約230枠のスケジュールにあてはめていきます。ブッキングは単にスタッフが代理でミュージシャンの代わりに代理応募しているだけなので事務屋さん的にはブッキングも選考も区別はありません。これにさらにスポンサー広告やイベント情報を追加してパンフレットのできあがりです。パンフレットはスケジュール面担当、地図面担当の2人で行っており、私はスケジュール面作成のためのデータ整理などのアシスト作業をしていました。

パンフレット:スケジュール面
パンフレット:地図面


作成スケジュール 

2016年の西院フェスの場合以下の様なスケジュールになっています。
  • 1月   ミュージシャン募集開始、webや郵送での応募を開始します
  • 3月   選考開始
  • 3月31日 スポンサー締め切り
  • 4月16日  スポンサー広告デザイン作業(大口スポンサーは5月中頃まで続く)
  • 4月28日 ミュージシャン決定
  • 5月7日 出演ミュージシャンへの連絡完了
  • 5月7日 パンフレットスケジュール欄作成開始
  • 5月7〜14日 時間の入れ替え
  • 5月15日 スケジュール(ミュージシャン名・ジャンル)最終確認
  • 訂正・確認作業(イベント関連だとか細々とした修正がちょいちょい入る)
  • 5月20日 入稿!!
5月前半は大口スポンサーの広告についてデータが入ってきつつ、一度デザインに着手したスケジュールがちょこまかと変わる地獄を見ます。

西院フェスミュージシャン応募情報

応募情報は、パンフレットやwebに掲載する情報のほか、選考用の音源をWebに登録します。基本はミュージシャンに直接webで登録して貰いますが、webが使えない人のために郵送での代理登録も行っています。

web応募画面
ちなみに郵送での登録は応募時点ではミュージシャン名と音源のみを手作業で登録して、応募用紙はカメラで撮影して画像として登録しています。選考で通過したミュージシャンのみ改めて後日メンバー表・webサイト・連絡先などをwebに登録しなおす省力化を行っています。

選考作業

 選考作業は、主に選考担当スタッフが行いますが各会場担当もこういう人が欲しいという意見を出します。膨大な量の音源を聞く必要があるので、スマホで各選考スタッフが聞けるようにしてあります。どんな感じだからxx会場に合いそうというメモ書きが所々に見受けられます。
選考画面(一部)
選考画面では○△×の3段階で選別したあとに、「採用」を決定していきます。採用決定作業は枠にいれる作業になるので、一覧性をもとめて、大きな紙に手書きでやっています。いつもは穏和な選考スタッフたちが軽く殺気だって枠を埋めていきます。その後webのスケジュール管理画面にデータが入力されます。
スケジュール入力画面
 ここで入力されたデータはそのままお客さんが見るwebのスケジュール表示画面に反映されます。よくある、スケジュール変わったから「web担当の人更新しておいて!」がほぼ存在しません。(web担当も担当会場をもつ兼任スタッフなので、そんなに暇じゃない)

スケジュール作成での工夫

ようやく本題です。妻がパンフのスケジュール面担当、webのスケジュール管理システムは私が担当。ここが気持ちよく仕事できないと家庭内不和の原因になります。

 スクリプトによる流し込み

すでに西院フェスWebからはJSON形式でスケジュールデータがダウンロード出来るようになっています。それを読み込ませてテンプレートのデザインに文字を流し込んでいきます。テンプレートは1時間後のスケジュールである右隣のデータの位置をデザインとして指定することで、時間軸に並んだ流し込みが出来るようになっています。
手作業でスケジュールをデザインする際に一番多いのは他人のジャンルを間違えて入れてしまったといった、コピペミス なのでそれが出ないだけかなり気が楽だとデザイナは言っています。


テンプレート(右側はマージン計測用のデータ)
流し込み後のスケジュール(長い文字は被るので手動調整)

スケジュールデータ(JSON形式)
参考

スケジュール変更

西院フェスでは時間の都合上パンフレット作成中も出演ミュージシャンの微調整が行われます。こういった「変更」や「追加」の事を「訂正」と呼ぶとデザイナーがキレます気をつけましょう。
この変更をスムーズにやりたいのですが、一度流し込んだあとにフォントサイズ等の微修正が行われているので、再び流し込み直すのは難しいです。そこで以下の様な差分情報をデザイナーに提出するようにしています。
差分の例 スペース区切りで左が元、右が変更後
 スケジュールのJSONデータはその時々に取得したものを保存しておきます。パンフだけならパンフを変更する度に最新と一つ前のデータだけがあれば良いのですが、ポスターにも情報を流用していた等の理由で、急に0509と0519の差分が欲しいという要望が出たりするためです。
各日付ごとのスケジュールデータ
差分はpythonのプログラムで実行しているので、デザイナが修正作業に入る直前に毎回差分データを作成しています。(差分作成プログラム

差分プログラムを作る前は、定期的に全部を確認してたのでかなり効率が悪かったのでだいぶ作業性が改善されました。

まとめ

 パンフ作成までを一旦のゴールとして西院フェスの事務作業とその工夫を纏めてみました。230組もあると、どのミュージシャンのライブを見に行く?と選ぶのも大変ですが、その事務処理にもそこそこのノウハウが隠れています。こういった細々とした事務の効率化も考えてみると楽しいですよ。