レトロパイキャビネット作成

DSC02873.jpg

レトロパイ用のキャビネットを自作したので、パーツリストや図面、得られた知見をまとめます。


仕様
ラズベリーパイ+レトロパイ、7インチ液晶、ジョイスティック+8ボタン、電源スイッチ、バッテリー内蔵、音量ボリューム、モノラルスピーカー


パーツリスト
  • ラズベリーパイ
  • ファン付ケース
  • アガチス板 30x60x5mm x1
  • MDF板 45x90x2.5mm x1
  • レザーシート
  • 7インチLCDx1
  • ジョイスティック(LS-56-01)x1
  • 24φ差込式ボタン(PS-14-D)x6
  • サービススイッチ(DS-412)x2
  • アーケードスティック用基板x1
  • モバイルバッテリーx1
  • 電源スイッチ(2極1投) x1
  • ボリュームノブ x1
  • USBスピーカー(基盤とUSBケーブルを使用)x1
  • 可変抵抗x1
  • スピーカーx1
  • 両面テープ付マジックテープx1
  • HDMIケーブル x1
  • LCD電源供給用DC端子付USBケーブル(タイプAオス/DC 外径5.5φ(内径2.5φ)x1
  • ラズベリーパイ給電用USBケーブル(タイプAオス/マイクロBオス)x1
  • モバイルバッテリー給電用USBケーブル(マイクロBオス/マイクロBメス)x1
  • L字USB変換コネクタ(タイプAオス/タイプAメス)x3
  • ゴム足 3mm穴 x4
  • L字金具 20x15 x4
  • 皿ネジ 4x10 x6
  • 丸ネジ(黒) 4x10 x8
  • 配線用ビニール線
  • オイルステイン
  • 蜜ロウ

費用
¥25,000(材料費のみ。買い直した分は未計上。工具抜きで4万くらいは掛かってると思う)


図面
※後加工が必要です(後側のL字金具用のネジ穴の位置をやや手前にし、前面のスイッチ用の穴をやや大きくした方がいいです。入手したパーツによって変わるため参考程度に)


作成内容

下準備
木工も電気も中学以来なので練習がてら、KORGのガジェット系シンセを収納できるラック作成とエレキギターの電装交換でリハビリ。

電装系の動作確認
まず液晶やスティック、ボタンなどの電装パーツを購入し、一通り繋いで動作確認。
本当はここでケーブルの長さとか配置とかを詰めておいたほうがいいです。

キャビネット図面作成
板取り図を書き出せるFusion360でデータを作成。PDFで書き出せます。
シンセラックを作った時はSketchUp(今はGoogleじゃないのね)を使って図面を作成しましたが、フリー版だとベクターデータで書き出せないので試用期間中に完成させてデータを作成。
SketchUpとFusion360両方を使った印象としては操作自体はSketchUpの方が取っつきやすいけど、Fusion360の方が微調整しやすい印象。


木材加工
板取り図をAIファイルに変換して、レーザーカッターに読み込ませると図面通りに切断してくれます。レーザーカッターはレンタルしてくれるところを探してカットしてもらいました。

カットされたコンパネとサイドの板は切断面を隠すため、2枚を貼り合せました。
サイド用の板は皿ネジを埋め込むために彫刻刀でネジの頭が収まるように削って別のサイド用の板と貼り合わせてクランプで固定。はみ出した接着剤をキレイに拭き取ります。固まってから削るのは大変です。


仮組み
パーツがキチンとハマるか、収まるかの確認をします。
採寸を間違えてたらしく、L字金具と前面のボタン用の穴をやすりで削りました。
ゴム足も一部カッターで切り落としました。

いざ組立ようとして、グリグリ押し込んだら液晶が壊れました。
同じ液晶を買い直したのですが、別の液晶がやってきて、サイズは違うわ、動作アンペア違うわでものすごい手間取った。
最初の液晶はラズパイからの給電で足りてたけど、新液晶は別口から給電しなくてはならず、2口のモバイルバッテリーを購入。2回路になったので2極1投の電源スイッチも購入。
2口の小さいモバイルバッテリーって選択肢ないですね。
液晶のサイズが変わったので筐体の図面も直して、再度レーザーカッターで切ってもらった。


塗装
サイドの板はオイルステインで着色し、蜜蝋仕上げ。底面と背面は艶なしの黒に塗り、天面とコンパネ部分はレザーシートを貼りました。
オイルステインを塗りすぎて木目が消えてしまった。


組立
USBスピーカーは片チャンネルの線を切断してモノラル仕様にしたところ、ボリュームが効かなくなったため、ギターの残り物のボリュームポットに変更。元がステレオ仕様だったので配線がよくわからなかったのが原因です。別に購入した小型スピーカーを底面にねじ止めして固定。

アンプ基盤と液晶用の基盤を液晶の裏にマジックテープで固定。
液晶は16:9のワイド画角なのですが、レトロパイ側では4:3の画角としてしか認識してもらえなかったため、一時的に付属の設定用の基盤をつないで4:3画角に変更し、レザーシートで左右を隠ぺい。

コンパネはファストン端子なのでパチパチ繋いで終了。

仮組み時に何となくわかってはいたけどUSBケーブルが長すぎて収まらないので、短くしつつ、ラズパイと液晶の給電用USBケーブルに電源スイッチをつなげました。

バッテリー給電用のUSB口を背面に接着、模型用のパテで固定。金属剥き出し部分をテープで絶縁。ケーブルやら端子やらでスペースを圧迫されつつ、無理矢理ネジを締めて完成。

実際には無理矢理押し込んだので、ハンダで固定してたとこが取れちゃったり、ショートしちゃって動かなかったりで何度も開け閉めしてます。最終的に収まりきらずに背面パネルが曲がってます。


Tips

レーザーカッター
レーザーカッターはお店の人にやってもらうのがおすすめです。レーザーの出力とか焦点距離とかわからないまま手探りで操作してると、切断面がどんどん炭化します。

どうしても切断面が焦げるので設計図の段階で意識しておく必要があります。焦げ目を消す場合はやすりで削る必要があるのでその分、小さくなってしまいます。
ホゾを手で削ると精度が出ないため、ホゾを使って組み立てる場合には切断面が見えない、目立たない設計にした方がキレイに仕上がります。
また厚い板ほど切断面の炭化が目立ちます。板の油分も炭化に影響するらしいです。

店員さんの話では切断する場合におすすめな木材がアガチスらしいです。
ただアガチスは木材としてはやわらかい方なので、割れやすい。キッチリとハメ込む作りの場合は強度に注意。
MDFはそれなりに強度がありながら削りやすいので便利ですが、油分が多くて焦げやすいとのこと。
ベニヤも悪くはないけど、薄いと反ります。ベニヤに限らず、木材は反るので買ってきたら早々に加工した方がいいです。雨が降るとガンガン反ります。


配線
絶縁大事です。
ボタンのファストン端子が別のボタンの端子と接触しちゃってコントローラーを認識しなくなりました。全ての端子に絶縁テープを巻いて、ボリュームポットと電源スイッチも絶縁テープを巻きました。

USBケーブルは自作の方が取り回しが楽になります。
市販のケーブルは用途に対して長すぎるし、延長/変換ケーブルを多用すると接続部が邪魔になりやすいです。筐体をコンパクトにしようとすると束ねたケーブルと端子の体積に悩まされることになります。
今回はL字コネクタの端子だけ残して別のUSBケーブルに繋いで使用しました。

またバッテリーの充電に非常に時間が掛かるのでUSBの急速充電について調べたのですが、特に決められていないらしく、メーカーによって方法が異なるようです。
データ用の線をショートさせる形が多いらしいですが(液晶用に買ったDC-USBケーブルがそれだった)、抵抗を噛ませる方法もあったり、端末側の仕様に合わせる必要もあるらしいのであきらめました。


反省点
  • 筐体はもう少し大きくしてハンドレスト的なスペースと配線用のスペースを確保した方がよかった
  • 液晶はもう少し角度つけた方がいい(液晶の視野角度からやや外れてた。本当は4:3の液晶が欲しかった)
  • バッテリーの容量と充電時間が不満(動作時間は2時間未満)


感想
レトロパイ筐体用のDIYキットが売ってるので、それ買った方が楽。
3DS LLが2万、Switchが3万ってスゴいし100均のスノコとか木箱もスゴイ。

参考

宣伝用画像.jpg
周囲の人には「やっとか」と言われましたが、細々と作っていたアプリをリリースしました。
パッと見、オセロっぽいボードゲームです。
ゲームのルール自体はSPOTというファミコンやゲームボーイ向けに発売されていたものから流用しています。

http://pots.linnet.jp/


ゲームの詳しい内容は上記の紹介ページを見ていただくとして、少し裏側の話を。

OpenGLはちょっと大変そう、SurfaceViewはHTMLのCanvasとほぼAPIが同じという理由でSurfaceViewで作り始めましたが、それでもAPIが生々しいため、ActionScriptっぽく書けるSurfaceViewのラッパークラスから作り始めてしまったため、時間が掛かってしまいました。

Androidは画面の解像度のバリエーションが多いため、画像類は極力、ベクターで扱いたいと思ったのもSurfaceViewの選定理由の一つです。
SurfaceViewは読み込んだフォントをそのまま表示できるため、最近のウェブサイトで使われるアイコンフォントと同じようにゲーム内で使用するグラフィックをアイコンとしてまとめて読み込んでいます。
フォントですので、単色となってしまいますが、キャラクターなどを使用する予定はなかったため、特に気にはなりませんでした。
そのため個々のパーツは、画面サイズを基準とした相対値サイズ、座標を指定できています。


最終的にはシーン管理やアニメーション機能なども組み込んだフレームワーク的なものになり、ある程度、形になり始めてからはかなり楽になりましたが。

今回、作ったフレームワーク的なものは、落ち着いてからコードを整理してgithub辺りにアップしようかと思っています。多分、需要がないのだと思いますが、SurfaceView関連のライブラリをあまり見かけないので。


いつからかわからないけど、Chromeでローカルのファイルを開くとウインドウサイズを一定以下に縮めることができないっぽい。
手元のPCだと1374px以下のサイズに出来ない。
タブを切り替えて小さくすれば一時的に小さく出来るけど、ウインドウサイズを変えようとドラッグすると1374px以上にされちゃう。

ぺライチのレスポンシブのページを作ってる時にウィンドウサイズを小さくできなくて困ったのでメモ。
URLが省略されちゃうとか最近、微妙な仕様変更が気になる印象。

PreprosでJavaScript圧縮

PreprosはWindowsでWeb制作をするときに非常に便利なツールです。

SassやLessのコンパイルや画像の最適化、Chromeのエクステンションと連携してオートリロードなどにも対応していますし、JavaScriptの圧縮・結合にも対応しています。


公式サイトのヘルプにも記載はありますが、JavaScriptの圧縮についてまとめます。

ファイルの先頭に別のjsファイルを結合したい場合
//@prepros-prepend foo1.js
//@prepros-prepend foo2.js
「//」も含めて記述します。
複数のファイルを読み込めますが、上記の記述の場合、foo2.jsが先頭、foo1.jsがその次に記述されます。

ファイルの末尾にjsファイルを結合したい場合
//@prepros-append bar.js
同様に「//」も含めて記述、こちらも複数のファイルを読み込めます。記述順は記載順のままです。

minifyしたくない場合
ファイル名を「foo.min.js」のように「min.js」を含める。
ライセンス表記を残したい場合にどうぞ。

※ver. 4.0.1での挙動です。


あとPhotoshopでpngを書き出した場合にIE6以下で表示できない(今は気にしなくてもよいとは思いますが、アルファチャンネルが荒れるとかではなく、IEで読み取れないExifが含まれてるっぽい)画像になることがありましたが、Preprosの画像最適化で解消できました。

htmlの一部を置換して配信する方法

テストサーバと本番サーバでリンクを書き換えたいとか、テストサーバでは一部の文字を置換したいけど、HTMLに手を入れちゃうと本番サーバにアップロードする前に修正しなきゃならないので、大変・・・。そう思ってました。

Apachのモジュールを調べたら、mod_substituteとかmod_layoutとかmod_ext_filter辺りが置換してくれそうなんですが、レンタルサーバでは動きませんでした、Xamppでも・・・
そもそもhttp.confを書き換えられない環境も多いです。


調べたら.htaccessからcgiをキックできる方法がありました。
.htaccessに「Action text/html /replace.cgi」のように記述するとCGIが動くので、ちょっとした置換処理を行うPerlを書きましょう。
もちろんCGIのパーミッションを変更する必要はありますが。

詳しくはココを参照してください。

CGI動かしちゃうので、サーバの負荷を考えるとテストサーバ用と思った方がいいです。
サーバの仕様、設定にも依存しますので、動かない場合もあります(ロリポップでは動きました)。

Action以降を書き換えれば、CSSやJavaScriptでも動くと思いますし、画像をゴリゴリ書き換えることも出来るんでしょうね、多分。


Android小ネタ

FontMetricsで取得できるパラメータ類はgetFontMetrics()した時の値を返すので、後で文字サイズを変更すると正しい値が取得できないらしい。

以下のコードだと文字サイズが20の場合のパラメータが返ってくる。

Paint textPaint = new Paint();
textPaint.setTextSize(20);
FontMetrics fontMetrics = textPaint.getFontMetrics();
textPaint.setTextSize(100);
Log.d("Font", fontMetrics.descent + "" + fontMetrics.ascent);

文字サイズを変更した場合は再度、getFontMetrics()する必要があるみたい。

マニフェストのエラー

久々にAndroidをいじろうとSDKのアップデートをしたら、過去のプロジェクトもコンパイルできなくなった。
「まず、エラー直してね」的なアラートが出るんだけど、どこにもエラーマークがないので途方に暮れながら、Eclipseの問題タブをクリックしたら、「hould explicitly set android:allowBackup to true or false (マニフェストのバックアップ関連のパラメータを設定してね)」的なメッセージがあったので、とりあえずfalseに設定したらコンパイル出来た。

ちょっと前に触った時は設定してなくてもコンパイル出来たと思うんだけどな。

Androidアプリでの色深度

Androidアプリを作っていてアルファチャンネルのあるグラデーションを含むビットマップがどうしてもキレイに描画されず(縞々に見える)、しばらく悩んでいた問題が解決したのでメモ。

結論から先にまとめると
SurfaceView内でフルカラーを描画したい場合は、SurfaceHolderに色深度を指定する必要があるようです。

SurfaceViewを継承したクラスのコンストラクタあたりで

getHolder().setFormat(PixelFormat.RGBA_8888);

のように書きます。


Androidアプリでビットマップを取り扱う際に色深度を指定できるのですが

 ARGB_8888:アルファチャンネル付き32ビット
 ARGB_4444:アルファチャンネル付き16ビット
 RGB_565:アルファチャンネル無し16ビット

グラデーションの面積が広いグラフィックやクオリティ重視の写真データなどを表示する場合はARGB_8888がマストになると思います。
Photoshopなどでノイズを乗せるとキレイに描画されるらしいのですが、画像によっては正しく表示されないようです。「ノイズを乗せる」のは簡易的にディザリングを行うことが目的だと思うのですが、アルファチャンネル付きのグラデーションには効果がありませんでした。



Androidの色深度についての解説は以下のページが詳しいですが、ビットマップデータを読み込む際にオプションを設定する必要があります。




SurfaceViewクラスは描画するエリアに色深度を設定する必要があるため、SurfaceHolderに設定する事になります(Android2.3以降はViewクラスはデフォルトで32ビットカラーらしいのですが)。

ただ、32ビットカラーのビットマップはメモリの使用量が大きく、描画のフレームレートも落ちるため、多用するとアプリごと落ちることもあるようです。
カメラアプリなどはビットマップの取り扱いが難しそうですね。


Flash作成中にクラスが増えすぎて表題のようなエラーが出ることがあります。
解決方法が書かれたブログがいくつかありますが、Windowsの環境変数に「JAVA_TOOL_OPTIONS」を追加する方法は僕の環境では改善できませんでした。

http://saqoosha.net/2008/12/24/1662/
http://air.creator.ms/flash-011.html

いろいろ探してAdobeのサイトに別の解決策が掲載されていたので、藁をも掴む思いで試したところ、エラーが出なくなりました。
レジストリを弄ることになるので自己責任でお願いします。

http://kb2.adobe.com/cps/405/kb405257.html

「HKEY_CURRENT_USER/Software/Adobe/Flash 10/ActionsInspector」の「JVM Max Heap Size」のサイズを128から256にしました。
僕の環境はWindows7のFlash CS4です。

僕のやり方が悪いのかどうかわからないですが、以前にも環境変数に追加する操作をしたところ、反映されないことがあったので(単にやり方を間違えていただけなのかもしれませんが)、心当たりのある方はお試しください。
本来はFlash/ActionScriptの構成を見直すのが一番の解決策ですが、納期の都合でなかなか出来ない場合も多いので、最終的にはリファクタリングしたいと思ってます。

MacBoocAir(2011 mid)でBootComp(悪い例)

いろいろ回り道をしてしまったので、同じように困ってる人のためにまとめます。


まず、結論。

DVDからのセットアップ失敗

BootCampアシスタントから再起動した後、すぐに黒い画面が出るようであれば、OSのインストールが出来ません。純正ドライブでないと出来ない模様。すでに外付けDVDドライブを持ってる人はBootCampセットアップだけのために買うのはもったいないので、USBメモリでのインストールを試みましょう

USBメモリからのセットアップ失敗

BootCampアシスタントでブートメディアの生成に失敗する場合、ISOファイルの生成に失敗してる可能性が高いです。別のソフトを使ってISOファイルを作りましょう



BootCampセットアップ完了までにやったこと

Window7 HomePremiumを購入し、すでに持っていたバッファロー製のDVDドライブをつないでBootCampアシスタントを起動。ドライバ類をUSBメモリーに書き込んでもらう。

BootCampアシスタントがBootCamp領域を生成し、再起動。黒い画面に白い文字で1行だけのメッセージ・・・「No bootable device」

何度、やっても当然変わらず。ALTキーを押しながら起動し、ドライブを選択するも先に進まない。結局、ボクの環境ではDVDドライブからのインストールが出来ないことに気づく

USBメモリからインストールしようと、ヨドバシまで8GBのUSBメモリを買いに走る(4GBのしか持ってなかった。BootCampアシスタントで4GBじゃ足りないって言われます)。あとで書きますが、別の方法ですと4GBのUSBメモリでも大丈夫です。

ディスクユーティリティでWindows7のインストールメディアをISO形式に変更し、BootCampアシスタントで起動用データに変換・・・、途中で失敗しましたって言われる・・・

ためしにISOデータをそのままUSBメモリに突っ込むもBootCampアシスタントにインストールメディアがないよっていわれて先に進めず。わかってましたよ・・・

同じように困ってる人いないかと2ちゃんの記事を探して、MS製の「Windows 7 USB DVD ダウンロード ツール」なるものがISOデータを起動用データにしてくれるらしいことを知り、別のWindowsマシンで試す。が、「無効なISOファイルです」って言われてあせる。

いろいろ探して、WinToFlashというフリーソフトがWin7のインストールメディアから直接、USBメモリへ起動用データを書き込んでくれるらしいのでダウンロードして行。英語版のソフトなので少々わかりにくいですが、ウィザード形式で操作できます。データは3.1GBなので手元に4GB以上のUSBメモリがあれば大丈夫なようです。

先ほど作ったUSBメモリを差し込んで、BootCampアシスタントを起動。始まったー!インストール出来たー!ちゃんとsetup.exeを起動してドライバも入れました。


参考