Google

2016年10月31日月曜日

PixiJSでHelloWorldを細かく解説

前回は能書きだけでしたので、今回は初心に戻りPixiJSでHello World!サンプルを書いてみます。
フレームワークはPixiJSのv4とJQueryを適用する前提で進めて行きます。
ちなみにJQueryはバージョン依存コードを書かないため、v1でもv2系統でも構いません。

PixiJSの最新版は以下からダウンロード可能です。

GitHub
https://github.com/pixijs/pixi.js

しかしここからzipをダウンロードして解凍して云々、、等という作業自体を読んだ方に強制するのも説明するのも面倒なので、まずはそれが不要な1枚ぺらのコードにしてみました。
そのHelloWorldのコードがこちらです。
HTMLと合わせるとここまで長くなってしまいますが仕方ありません。

以下が実行結果のスクリーンショット。
この黒地に白文字という古風な画面がPixiで描画した領域です。

HelloWorldなので画面がつまらないのですがご勘弁を

実際の描画処理を確認するにはこちらからどうぞ。

 Pixi Hello World! Test (ANGEWORKの実験公開ページへ移動)

では、このコードについて各行順を追って説明して行きます。
HTMLにはpixiというidのDIVタグのみが存在しています。
それ以外の部分は普通のHTMLで、PixiとJqueryをロードしてるだけです。


今回の本体はJavaScriptの中です。
JQueryのロード完了イベント時にPixiを初期化するのが16行目から。


最新版ではコンテナとレンダラーの2つがあれば殆どの描画が行えるような構成になっていますのでシンプルです。
Pixiは既にv4のため、旧バージョンとは生成方法に多少の違いがある点に注意して下さい。
ちなみにこのコンテナは簡単に言うと枝葉の入れ子構造になっており、描画したい画像や文字をぶら下げる根元の役割をします。

Pixi.Container ドキュメント(英語)

そして描画担当のレンダラクラス。
レンダラにはviewというCanvasオブジェクトが1つ紐付けられており、このサンプルではこれをpixiというidのタグにJQueryを使用してぶら下げています。

ちなみに今回のようにrenderer.viewをぶら下げると、、、

bodyの下にpixiというタグしかなかったDOM構成が、、、

実行時にこうなります。
CanvasRenderer生成コードと同じ200 x 100のcanvasタグが自動で追加されました。
このレンダラは2D/3D/オプションなどで生成方法を書き分けることがあります。
ちなみに今回使用したCanvasレンダラは2Dの描画を担当するクラスです。

Pixi.CanvasRendererドキュメント(英語)

レンダラには種類があり、3D用のWebGLRenderer、2D/3D両対応のautoDetectRenderernも存在します。
よそ様のコードではautoDetectRendererが多いのですが、CanvasRendererでの初期化コードが少なかったのでこちらにしてみました。
そして引数に何も指定しないとコンテナは真っ黒に塗りつぶされてしまいます。

続いてようやくHello World!の文字生成が21行目から。


ベースが黒地なので白い文字、フォントはArialで生成してみました。
そして生成した文字オブジェクトはコンテナの子供としてぶら下げる必要があります。
しかしそれだけでは描画には至りません。それを変えるのが次のコード。


26行目。コンテナにぶら下がるもの全てをここで描画することになります。
このサンプルでは白文字のHello World!が入っているため単体描画となりますが、背景入れたり装飾入れたり優先順位変えたりとなるのはお察しできるのではないかと。

解説はこれで完了です。お疲れ様でした。

コードばかりの記になってしまいました。
次は描画サイクルについて記載させて頂く予定です。

2016年10月29日土曜日

PixiJSの基本的使い方と概念

好き勝手に紹介させて頂く話です。

JavaScriptのフレームワークは最近色々ありすぎてJavaScript専門サイトでやるような内容なのですが、私がずっと入れ込んでるPixiJSは自前でも紹介させて頂きたいと思ったので書いてみます。

PixiJSはGoodboy Digital Ltd.が開発しているオープンソースのJavaScriptフレームワーク。
ライセンスはMITです。


日本語での呼び方はスバリ「ピクシー」。人によってはポケ○ンとかガン○ムとか想像されるでしょうが、元々は子鬼とか妖精の類から来ています。
ピクシーの記事は他所様でも書かれているとは思うのですが、うちでは使い方のコツや概念等をメインに考えています。
興味がなかった方でもアウトラインの理解が進む事を目標としています。


では簡単に、PixiJS公式でのアナウンスを部分的に抜粋してご紹介。
ピクシーは、非常に高速な2Dスプライトレンダリングエンジンです。ピクシーのAPIは、Macromedia / Adob​​e社のFlashが開拓し、使い倒され、問題と戦い、テストされたAPIを改良したものです。(翻訳担当:ぐーぐるせんせい)
これを言い直すと、、、

ブラウザ上でお絵かきやゲームを作るのに便利で速いエンジンで、APIはFlashのActionScriptに似てますよ

という事です。(書いてないけど3D描画もOKです)

お絵かき機能の正体はCanvasというHTML5の機能で、線や画像を描ける白板のようなものです。
HTMLタグを使って要素を置いていくのではなく、文字通り四角いキャンバス領域の中にぺたぺた「描く」ことができます。
それを、ピクシーのようなエンジンを使うと実装が簡単になると考えて下さい。


ピクシーの公式サイトに行くとこんなページになってます。

既にバージョンは4まで進んでいます。
背景の雲と宇宙のような物体は非常に良く動きます。初期化が終わるまでは背景真っ黒なので焦らずに待ってみて下さい。
全てJavaScriptの表現力だけで構成されており、スマホブラウザでもかなり高速です。

上記の雲以外にも、このサイトで紹介されている実例デモはなかなかです。
ブラウザゲームを作られてる方にはこういう表現力の高さも今更でお馴染みかも知れませんが、グリグリと動く様はブラウザゲームの進化を実感できるはず。

以下に2点程転載してみましたので、説明文のリンクから飛んで遊んでみて下さい。

一例のXWING FIGHTER スターウォーズ横シュー。パワーアップ、ロック要素等、普通に遊べるレベル。
Macの公式ゲーム。ナゲットを転がす3Dゲーム。左右とスペースでジャンプ。ゲーム設定がイミフw
他にも多々デモがあり、ギャラリー一覧はこちらから飛べます。


本来この手の記事ならここでHello World!なのでしょうが、今回は敢えて出さずにピクシーの特徴やなんで使ってるのかという理由を書いてみました。
  • 2D描画速度が他と比べて圧倒的に速い
  • 3D描画のWebGLにも対応
  • クラス、API構造がシンプルで素直
  • プラグインが作れる柔軟性
  • バージョンアップ回数の活発さ
  • 日本では余り使ってなかったw
まず、そもそも他所様と比べてPixiJSの描画速度はかなり上でした。

http://www.goodboydigital.com/pixijs/bunnymark/

正確なベンチではありませんが、上記サイトで実験速度が実感できます。
下がその画面。

最初は二体ですが、クリックすればするほどスプライトが大量に追加されます!なかなかFPSは落ちません。
ここからもいけます。
API構造がシンプルというのも関係しますが、その分便利過ぎるような機能はありません。
特別な事をするにはプラグインで、という方針になっています。
バージョンも既に4が出る位活発で良い傾向です。
使われる機会が少ない気がするのは日本語のドキュメントが少なすぎるからかでしょうかね。



手前味噌ですが、Flashが廃れた時にうちで公開していたブログパーツをHTML5版に全面書き換えしてみたのですが、ここにもPIXIを使わせて頂いております。

Flash程機密が保てないので、構造は根本から変わってしまいましたが。

次回はようやくハローワールドや描画のルール、コツ等を書く予定です。

2016年10月23日日曜日

ぼくのかんがえたさいきようのえーあーるめがね

技術者としては失格かも知れませんが、たらればの与太話を。

最近ARも実用的になりつつありますが、仕事では使えど趣味や日常ではちょっと躊躇します。
重かったりすると装着を継続する気にならず段々頻度が下がる訳で、一度は買ったものの林檎腕時計も今後よっぽどの強化でないと難しいかと思ってます。

じゃあ何が良いのかというと、メガネを目指すべきじゃないでしょうか。
これは人類が完成させた装着型デバイスの一つであるため、同化すると毎日掛ける事すら苦ではないはずです。

Vufineは技術者としては素晴らしく良いアイテムではあるものの、一般人から見たらまだ黎明期のように見えるんじゃないかと思われます。
このように、メガネ同化レベルのアイテムが現実に存在しないのは、メガネの中にこんな機能を入れ込むという事が達成できていないからかも知れません。

単体技術としては殆ど存在しているので、SFとまでは行きませんが。
問題はメガネに搭載できるレベルまでの小型化です。
ソフトは外部にクラウドサーバ連携すれば結構できる事は多いので、ハードの小型化だけです。


私が個人的にそういうデバイスで何をしたいかというと、これです。
(画像は拾い物を合成しました)
新宿駅南口にいて、ここからルミネに行きたいとか考えた時の画面はめ込み合成図。方向とかはいい加減。
常に3次元空間を把握し、看板認識等で細かい位置を調整し、目的地へ3次元でナビをしてくれる真のIoTナビゲーションシステムです。
看板、タイル、ガイド等を画像認識して位置を把握してクラウド連携すれば新宿駅ダンジョンですら攻略も余裕になるんじゃないかと。
後は普通にグーグルやiCloud連携して顔認識とかメールとかWeb検索とか、次の発車時刻とか、便利機能はどうにでもなるような気がします。
後は人を認識して全て3Dキャラとかゾンビに変化させるとか、サービスは幾らでもありそうです。

ですが、現実に落とし込むには大分簡略化が必要です。
殆どのソフトウェア機能を外部サーバに任せて結果を受け取るようにすれば現実性はでてきますが、バッテリーとか脳波操作の精度とか、壁をどうにかしなければなりません。

個人的にはこういうプロジェクトに参加してみたいのですが、各社機密で内部でやっているのかなかなか機会がありません。
まずはVufineのように、スマホに刺して表示するだけの小型モニターあたりから始めないといけないのかもしれませんが。

ということでぼくのかんがえたさいきょうのARメガネの空想話でした。

2016年10月20日木曜日

InfoLinkerを弄った件:補足

前回のInfoLinkerの件について、ちょっとした話ですが補足の追記です。

音声認識の件で、オミットされたこの機能を元に戻したというくだりがあったと思います。
Androidのソースコードをコンパイルしてapkにするのは敷居が高く、面倒さもあって手順を書くと長過ぎるしで色々省いた次第ですが、正直省き過ぎた気がしています。

一応OSのソースは以下等から手に入る事は入るのですが、やっぱり省略で。

Android SourceCode Project
https://source.android.com/

そこで補足として、面倒な事をしなくても実現するための抜け道をば。
実はソースコードからビルドする前、実機のリセット前提で試していたことがありました。
ちなみに時間も無い、OSの中身も調べなきゃならない、互換性があるか解らないという状況で考えた事。

  バイナリがなければ落とせばいいじゃないか、、、と。

そう、どっかからAPKを落としてきて入れ込むという方法です。
自前ストア等、APKを配布する場所はいくらでもあるのですが、OSの機能を検索して落とすという行動は頻度も機会も少なく、なかなか厳しいものがあります。

そしてこれは非常にグレーゾーン且つ危険性も高いため、人様にお勧めはできません。
私も早期の動作確認のために使っただけで、納品には流石に使いませんでした。
覚悟完了した方は自己責任でお願いします。



では具体的な方法について。
検索方法は音声検索のIDを入れてapk com.google.android.voicesearch」等でいけます。
で、例えばですがそれで見つかったこんなサイト。

APKHere
http://ja.apkhere.com/


アプリが色々ありますが、どう考えても危険なものばかりなのでそんなものには目もくれずに音声検索を探します。
するとこんな感じで見つかります。

音声検索 2.1.4

http://ja.apkhere.com/app/com.google.android.voicesearch


このバージョンはAndroid4.4.2と互換性があり、InfoLinkerにインストールすると動作することが確認できています。

他にもこんなサイトもあります。

APKMirror
http://www.apkmirror.com/apk/google-inc/


ここだと他の機能がオミットされていても助かりそうです。
公式で全て普通にダウンロードできれば1番良いのですが、古いバージョン等の確認には非常に不便なのでこいうサイトがあるのも致し方ないところです。

しかし怪し過ぎてそのままダウンロードしてインストールするのは怖いのも当たり前。
ハッシュで確かめるにも別の実機などが必要になったりするため、怖ければ念のためリバースツール等を使いましょう。

ByteCodeViewer
http://bytecodeviewer.com/

このツールは個人的にお気に入りで、apkを直接食ってリバースしてくれます。


私は隅から隅までコードをチェックして、怪しい動作が入ってないかどうかの確認をしてから入れ込みを行いました。
どうやら海外でもAPKの音声検索機能を探している人はそこそこいたようで、結構その手の書き込みは見つかります。
しかしオフライン用のファイルダウンロード機能はやはりこのバージョンとの組み合わせでは機能せず、コミュニティでも困っているようでした。
バージョンを変えたり、音声認識用ファイルの格納先等を調べて入れ込めば機能する可能性もありますが私はまだ確認していません。


補足はここまでですが自己責任でよろです。



おまけ:
http://download.apks.org/?apkid=com.google.android.voicesearch&ver=3.0.1&server=hidiho

ネットでは音声検索v3.0.1というバージョンも見つかります。
これもまた怪しいのですが、中身に変なコードは見つかってないのでそこは大丈夫そうです。

2016年10月19日水曜日

WESTUNITIS社のInfoLinkerを弄った件

以前、WestUnitis社のInfoLinkerというウェアラブルデバイスを触る機会がありました。
その時、デバイス上で動くネイティブアプリを開発してみたのですが、開発に関する細かいあれこれを書いておきます。
個人的な備忘録なので余り役に立たないかも知れません。

まずこちらが公式ページ。
萌えっ子が描かれるホームページ
現在3モデルがあり、私が借りたのはWUZ-01Aというタイプ。



公式のスペックにある通りこの小ささでAndroid4.4.2を内蔵しており、要はAndroidアプリを開発できればカスタマイズも可能という事になります。
なので、開発そのものはさほど困難ではありません。

そしてベースとなるAndroidプロジェクトは上記公式サイトから取得できます。
特殊デバイスという事で画面サイズや押せるボタン等の設定が気になるところですが、サンプルにそれらが収まっており、拡張して作ればこの辺りも特に難しくはありません。

グーグルグラス亡き今、現状ではここまでの小型デバイスは余り見当たらず、機能としては十分過ぎて褒める事が多いので、開発等で大変だったり面倒だった点を敢えて列挙してみます。

1.デバッグ中の本体操作が厳しい

この実機はメガネにセットして使うのですが、操作ボタンは本体の下側に3個並んでいます。自分から見えない右耳のそばをポチポチ押すのはどうしても難しいかと。
そもそもウェアラブルデバイスなので画面も触れない点はどうしようもありません。

じゃあデバッグツール上でならどうにか、、、と思ったところ、このツールは専用の操作アプリが存在しました。
ツール自体は公式が公開しているのでそのSSをアップしてみます。

真ん中の枠と文字は私が入れたものです。
設定画面を出したりホームに戻るボタンがあるのは便利です。
逆を返すと、ウェアラブルデバイスの宿命上、こういったツールが無ければ操作も厳しいという事になります。そもそも画面を触れないですし。
キャプチャ画像は一定タイミングで更新され、図にある通りマウスイベントを拾って実機に渡してくれるというのが良いところ。

しかし開発者であった私は、この狭い画面上でマウスを使ってAndroidの設定画面等をフリック操作しなければなりません。画面表示にはラグもあるので結構厳し目です。
横画面状態でキーボードなどが出るとこれもまた画面が狭くて大変でした。
また、USBでキーボードを繋がずにテストしていたので、文字入力はかなり面倒でした。

2.機能が幾つかオミットされている

小ささゆえに当然でもあるのですが、このAndroidは標準からカスタマイズされ、無駄と思われるものは削除され、必要なものが追加されているようでした。


メモリ等の問題もありますし、無いなら無いでそれはいいのですが、開発時に1番困ったのがお客様に要求されたAndroid標準の音声認識機能がなかった事。

ちなみに確認方法は簡単で、adb のシェルから、

 pm list package

を実行し、com.google.android.voicesearchが存在するかどうかを確認するだけ。

サードパーティライブラリを入れるか標準機能を戻して使うか、正直迷いました。
公式にサポートしてもらう事も考えましたが、WestUnitisさんに仕事を依頼しているわけでもない関係上サポートしてくれる訳がないので最終的に自力で解決策も含め探す事にしました。

そして、開発期間が短かった事もあるので標準機能を使う事に決定。
このオミットされた機能を元に戻る必要があります。
また、工場出荷状態以外の調整は当然ながらサポート外となりますのでご注意を。

2-1.音声認識機能の独自追加

Androidは海外で小型デバイスにインストールされる事が多く、その際この実機同様に機能をオミットするケースがあります。
となると、それらのオミットされた機能を戻したいという方もいらっしゃる訳で、情報集めをして機能を戻す事にしてみました。
まずこの実機OSは4.4.2という事は判明しており、更にAndroidはいくつかの拡張機能をapkとして外部に分割して構成しています。
音声認識もご多分に漏れず、外部apkとして存在しているわけです。

なので、4.4.2のソースコードから音声認識機能部分を取り出しコンパイル。
出来上がったapkのMD5を確認し、別途準備した4.4.2のOSの中身を調べて同一であることを確認。
そして実機に流し込んでみました。

この時、前述の公式ツールのinstall apk機能で流し込もうとしたのですが、OS標準で搭載すべきファイルであったせいなのか、何故か機能してくれませんでした。
なので、コンソールからadb installで強制的にインストール。

すると、存在しなかった音声認識ができるようになってくれました!
アプリからの制御なのでインテント経由ですが、これも問題ありません。

Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
intent.putExtra(
RecognizerIntent.EXTRA_LANGUAGE_MODEL,  RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);
intent.putExtra(RecognizerIntent.EXTRA_PROMPT, "VoiceRecognitionTest");
startActivityForResult(intent, REQUEST_CODE_VOICE);

こんな感じで呼び出せました。

しかし無理に入れたせいなのか、内部に別途設定があるのか、音声認識に関する拡張機能の項目が設定画面に表示されませんでした。
海外コミュニティでもこの謎が解明されておらず、ここは断念。

ちなみにInfoLinkerには工場出荷状態に戻す事も可能なので、失敗したらリセットでOKです。

2-2.カメラとQRコードの認識

InfoLinkerは前面にカメラが付いてます。
お客様からの要求事項には常時カメラ映像の表示と音声連携で映像撮影もあったのですが、良くあるサーフェスに撮影画像を出す方法で問題なく動作しました。
QRコードはzixingを入れて常時解析する事を検討していましたが、実機用に調整されたzixingが既に入っており、そのアプリとの連携で良いという事になりました。
そのzixingとの連携方法ですが、、、

Intent intent = new Intent("com.google.zxing.client.android.SCAN”);

WestUnitis社のサポート様はQRコード連携について快く教えて頂き、上記の連携が可能との事を私に知らせてくれました。
しかしこの方法ではなぜか上手く行かず、Android解析ツールを使用し連携可能なインテント一覧を調べる羽目に。
結果、呼び出し方法は以下の形式でないと動作しない事が判明。

Intent intent = new Intent();
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
intent.setAction(Intent.ACTION_MAIN);
intent.addCategory(Intent.CATEGORY_LAUNCHER);
intent.setClassName(
"com.google.zxing.client.android",
"com.google.zxing.client.android.CaptureActivity");

また、zixingはカメラとコンフリクトするため、画像撮影のためにカメラ画像をサーフェスに表示しているのならばインテント呼び出しの前にカメラを止めなければ駄目です。

3.Wifi通信

音声認識機能を使用するにはWifi等のネットワーク通信が必須です。
InfoLinkerにはWifi機能が標準で付いていますのでこの点は問題ありません。
サーバとの通信も必要だったため、httpcore-4.4.4等も入れ込みましたが、この辺は特にカスタマイズすべき部分ではない事もあって問題なく動作しました。

4.メニュー

実機独自のメニューが搭載されています。
起動可能なアプリは画面全体に表示され、ボタンで左右にスクロールして選択する方式です。

拾い物の画像です、すみません。
このメニューシステムは簡単な設定テキストファイルが存在しており、ボタンの数も限られる関係から、このファイルを修正して自前アプリを追加する必要があります。
設定ファイルにはクラス名などを記載する必要があるのですが、開発者なら問題ないでしょう。

その他

以上のように。InfoLinkerをカスタマイズして独自アプリを作るには、通常のAndroidアプリというよりは様々な努力や調整が必要になるようです。
ボタンが触りづらい位置にあり、画面を触れないウェアラブルデバイスの宿命とも言えるので、この実機に問題があるわけではありませんので念のため。
電池が余り持たず本体が結構熱くなる点は、今後の改良と小型化に期待という感じです。

導入実例も多いようですので、この先あちこちでこのようなデバイスが増えていくかと思われます。
個人的にも価格が下がれば日常的に使いたいものの一つですね。

今回はこんなところで。

2016年10月17日月曜日

Canvasを画像としてダウンロード

今回はCanvas画像のダウンロードについて少々。
記事自体が大したことない内容なのと、前回からのブログ記事の中身に連携や脈絡が無くてアレですが、何かの参考になればと。

まず手前味噌ですみませんが、うちの会社では以下のようなサイトを運営してまして、技術部分を私が担当してます。

ANGEWORKの西洋占星術
http://angework-astrology.com/

古くからあったサイトを去年末に全てHTML5リニューアルしたのですが、ホロスコープと呼ばれる画像をCanvasで描画するようになりました。

こんな画像とかをCanvasで描画してます。
Canvasは最近使用頻度が上がってきているようですが、HTMLやCSSをブラウザに合わせるテクニック同様、実際に組んでみると細かい部分で工夫が必要です。
一部スマホでタッチしてもスクロールできないとか、キャッシュが切れて画像が崩れるとか、どのフレームワーク使うかとか、もう言い出したら色々な感じです。

で、このホロスコープ画像はライセンス的に転載自由なんで好きにキャプチャして使っていただいていいんですが、大抵のブラウザでは右クリしてもダウンロードはできない(HTMLとして保存する動きをする)訳です。
で、キャプチャが面倒くさいと言われたため、横着案として画像でダウンロードするボタンを付けてしまうのが楽だろうという事になりました。
この右上のボタンです。
保存のための実現方法は色々とあるんですが、今後の拡張の関係で今はこうなってます。
では今回使ってるブツの一覧です。

  • JQuery-2.1.4
  • Canvas

フレームワークはソースを見れば一目瞭然、最近v4となったPIXI.jsを使っているのですがこの描画はまだ3な上に今回はお題と直接関係ないのでこちらも割愛します。

そして今回のソースコード。
$(document).ready(function()
{
$(".save_wheel").on('click',function()
{
var canvas = $("canvas")[0];
var img = canvas.toDataURL("image/png");
img = img.replace("image/png", "image/octet-stream");
window.open(img, 'save');
});
});
非常にシンブル過ぎて1件分の記事で良いのだろうかと迷った程です。
JQueryの開始イベントの中にある「save_wheel」というボタン押下イベントで処理をしています。
この辺の資料はどこにでもあるので割愛します。

まず第1のポイントはCanvasをJQueryでどう取得するかという点。
var canvas = $('canvas')[0];
「canvas」というセレクタで取得すると、配列になって取得できます。これはclassと同様、HTML内部に複数生成される可能性があるためこのように取得できます。
canvasタグのIDにcanvasと付ける方法でも良いのですが、フレームワークの種類によっては自動的にCanvasタグが生成されてしまったりしてIDセレクタがやりづらかったりするため、どの道こういった形でアクセスしなければなりません。
このページではCanvasの1個目がホロスコープなので[0]で取得しています。

続いて画像変換。
取得したCanvasをpng形式に変換します。
var img= canvas.toDataURL('image/png');
この内部ではbase64で変換しています。
そしてブラウザに保存形式として扱うためにストリーム形式に変換。
mg = img.replace("image/png", "image/octet-stream");
最後に名前を付けて保存。
window.open(img, 'save');
これを実行すると、おなじみの画像保存ダイアログが表示されます。


ちなみにストリームに変換しない場合、FireFox等では別のブラウザタブ等で画像が単体で表示されます。

凄まじく長いアドレスになってます。
用途や目的に合わせて変更すると良いでしょう。
簡単ですみませんが今回はこんなところで。

2016年10月8日土曜日

AliExpressでジョイスティック注文してみた件4

流石に長いのでアリババの件はこれが最後です。

前回いい加減だと思ったボタン配置は、よく見たら実はこうなってました。

左下から上に掛けて連番になる構成
前回はいい加減とか言ってすみません。
ガンダムVSシリーズ系配置ではあるものの、ちょっとアレな気もします。
異論はあれど、配置はスト2ベースなら基本はこうじゃないでしょうか。


もしくは上段が1~4で、下段が5~8とか、その逆とか。
一応レバーもボタンも普通に使える性能ですし、普通のジョイスティック同様配置変更も可能ですしツールでの対応も可能なので、とりあえずこのままで維持に決定。

そして右側についている謎のボタンx2。
余り説明を読んでいなかったのですが、これはどうやら各ボタン連射オンオフの切り替えスイッチだったようです。

上が連射オン、下が連射オフです。
この機器、Windows上では12ボタンゲームコントローラとして認識していますが、配線上の問題なのかこの2つは純粋なボタンとしては認識されず、実質10ボタンコントローラとなるようです。
使い方は普通で、連射にしたいボタンを押しながらどちらかを押すだけ。

そしてネジの止め方。


天板と箱を4つのネジで止めるだけ。
肝心の吸盤ですが、裏から見るとこんな感じです。


こちらの写真だと分かり辛いのですが、吸盤にはピンが付いていて、引っ張れるようになっています。
一つ前の写真の方が分かり辛いでしょうか。
そしてこの吸盤で机に配置した時の写真はこうです。


吸盤の部分だけ多少浮きますが、ほぼ固定されるようになりました。
あと書き忘れましたが、ボディは全て樹脂製で軽く、天板の方が大きいといういびつな構造です。
それでも吸盤効果は結構でかく、シューティングやっても格ゲーやっても殆ど動く事もなく安心してプレイできます。

ぺったり張り付いてます。空気をしっかり抜かないと不安定な感じはあるので押し込み必須。
さて、これで全ての動作チェックが完了しました。
商品に問題無いことを確認したら、アリババのマイページに戻り受け取った事を通知します。
AliExpressにログインし、マイページから注文一覧を見ると、Confirmのボタンがあります。
(以前の記事で、まだ押さないように書いたボタンです)


問題ない事が解ったので、これを押しましょう。
そして遷移した以下の画面。


対象となる商品のチェックを付けて、このConfirmボタンを押下。
チェックが無いと対象と選べと言われます。


最終確認を問われますので、ここで確定。
これで取引が正常に完了です。


ステータスが変わって 取引完了であることが表示されます。
感想その他を書く項目もあります。
中国という事で心配な部分もあるでしょうが、とりあえずジョイスティックに関しては業者が詐欺をするような可能性は低いのではないでしょうか。


では、このジョイスティックの個人的な評価まとめです。

 ・スティックとボタンは問題なく遊べるレベルの品質
  (三和っぽいのだが微妙に何かが違う気が)
 ・吸盤の接着力は6個もあるので強く、荒っぽいプレイにも対応可能
 ・横移動によるズレに対しては縦ほど強くないものの、それでもほぼ固定
 ・座高はやや高めなので好みが出る
 ・微妙な傾斜が個人的には好み
 ・吸盤はそれぞれ解除ピン?(出っ張り)が付いていて引っ張ると簡単に外せる
 ・机の端っこまでゆっくりずらしていって外すという方法も可能
 ・シンクロでは無いものの連射ボタンも付いているので便利
 ・改造、修理は簡単なので自分で調整したい人に良さげ
 ・天板シールの品質はお察し

流石に最初に書いた全ての欲を満たすものではありませんでしたが、使う分には問題ない事から、この価格なら十分及第点以上と見ても良いんじゃないんでしょうか。
ニトリとかで売ってる車輪付きワゴンの天板にくっつけて、普段は机の横で棚として使うと便利そうです。


おまけとして、AliExpressで私が気になった怪すぃコントローラの写真を幾つか。
あくまで自己責任ですが、アリババ購入にチャレンジしてみるのも一興です。


 

2016年10月7日金曜日

AliExpressでジョイスティック注文してみた件3

前回は荷物待ちでした。
今回は到着の話と開封の儀。

注文してから到着までの期間はざっと2週間でした。
配送に13-26日掛かるという、注文画面での表示日程は合っている事になります。

以下が配送のステート。
注文してから発送開始までには4日程掛かりました。

1番怖かったのはShipped by Airになってから数日なにも変化がなかったこと。
しかも杭州だったので、日本に近い海のそばのはずです。
数日もの間、一体どこを飛んでるんだとw


日本に入ってからは郵便局で細かい追跡ができました。
川崎に来ているのはうちの近所とかではなく、一旦ここに集められるらしいです。


そしてまず郵便局から届いた荷物がこちら。
軽いのですが見た目のこの怪しさ、絶対何か疑われてる気がする、、、w


梱包構成も結構いい加減。
発泡スチロールで周りを囲ってビニールでぐるぐる巻きの中華圏お馴染みのタイプです。


一応スティック部分はスチロールにちゃんと穴を開けて保護してました。


やっと彼の顔が見える段階まで開封。
ボタンが1個サービスで付いてました。以外に親切です。


そして無事にご対面。開封時点で見た目の故障はなさそうです。


意外なことに、スティックとボタンの感度や操作感はさほど悪くありません。
HORI程では無いのですが、格ゲーもこのままプレイして問題なさそうな位です。
僅かな傾斜も宜しいんじゃないでしょうか。

謎のボタンx2(サイトの説明読んでない)
しかしこの荷物、説明書も業者紹介とかの紙も含めて他には 何 も 無 し w
この辺が日本の業者との決定的な違いでしょうかね。

さて、届いたらまず動作確認をして、壊れていないかどうかを見るべきです。
USB経由で何か怪しいものを仕込まれても怖いので、事前に開ける事にします。


何も仕込まれてなさそうです。
純粋な程シンプルに作られたジョイスティックです。

天板をネジとナットで付ける構造ですが、ネジは錆気味なのでDIYセンター等でネジは交換した方が良いかも。

問題なさそうなので、再度はめ込んでPCに接続します。
一応、勝手に実行しようとした時にキャンセルできるので、Windowsのautorun設定は切っておきましょう。
PCに差し込むと、無事に認識できました。
ちなみに私のゲーム環境はWindows7 SP1 64bitです。


続いて設定からボタンの確認。
しかしここで変な事に気付く。


えーと、小足が1、小パンが2?、中足が6??????


あ、、、、、配置構成いい加減なまま出荷したなこれ!!!!


という事で、今回で終わるかと思いきや、もう1回続きます。
次回はアリババの受取手順と実機の配線や使い勝手、その他細かい話になる予定。