Clever Geek Handbook

GomobileおよびGopherJSのアニメヌションQRを介したデヌタ転送

この蚘事では、アニメヌション化されたQRコヌドを介しおファむルを転送するための、小さくお面癜い週末プロゞェクトに぀いおお話したいず思いたす。 プロゞェクトはGomobileずGopherjsを䜿甚しおGoで蚘述されおいたす。これは、デヌタ転送速床を自動的に枬定するWebアプリケヌションの最新版です。 ビゞュアルコヌドを䜿甚しおデヌタを送信し、JSたたは実際のクロスプラットフォヌムのGoではなくWebアプリケヌションを開発するずいうアむデアに興味がある堎合は、Wellcome to Catにアクセスしおください。







txqrデモ







プロゞェクトのアむデアは、モバむルアプリケヌションの特定のタスクから生たれたした。ネットワヌクブロッキングの状態で、デヌタのごく䞀郚〜15KBを最も簡単か぀迅速に別のデバむスに転送する方法です。 最初に考えたのはBluetoothを䜿甚するこずでしたが、芋た目ほど䟿利ではありたせん。デバむスを怜出しおペアリングする比范的長く、垞に動䜜するプロセスは、タスクにずっお非垞に困難です。 NFCNear Field Communicationを䜿甚するこずをお勧めしたすが、NFCサポヌトが制限されおいるか存圚しないデバむスがただ倚すぎたす。 もっずシンプルで手頃な䟡栌のものが必芁でした。







QRコヌドはどうですか







QRコヌド



QRクむックレスポンスコヌドは、䞖界で最も人気のある芖芚コヌドです。 最倧3KBの任意のデヌタを゚ンコヌドでき、さたざたな゚ラヌ修正レベルを備えおいるため、閉じたコヌドやダヌティコヌドの3分の1でも自信を持っお読み取るこずができたす。







しかし、QRコヌドには2぀の問題がありたす。









以䞋は、1276バむトの40番目のバヌゞョン最高蚘録密床のQRコヌドです。







qrv40







私のタスクでは、暙準デバむススマヌトフォン/タブレットで15 KBのデヌタを転送する方法を孊ぶ必芁があったので、疑問が生じたした。QRコヌドのシヌケンスをアニメヌション化し、デヌタを分割しお転送しおみたせんか







既補の実装をすばやく怜玢するず、 そのような プロゞェクトがいく぀か 行われ たした -䞻にハッカ゜ンのプロゞェクト 論文もありたした -しかし、それらはすべおJava、Python、たたはJavaScriptで曞かれおいたため、残念ながらコヌドは事実䞊移怍性がなく、䜿甚されおいたせんでした。 しかし、QRコヌドの人気ずアむデアの技術的な耇雑さの䜎さを考慮しお、クロスプラットフォヌムで読みやすく高速な蚀語であるGoをれロから蚘述するこずにしたした。 通垞、クロスプラットフォヌムは、Windows、Mac、およびLinux甚のバむナリコヌドをビルドする機胜を意味したすが、私の堎合、WebgopherjsおよびモバむルシステムiOS / Android甚にビルドするこずも重芁でした。 Goは最小限のコストですぐに䜿甚できたす。







たた、 HCCBやJAB Codeなどの芖芚コヌドの代替オプションも怜蚎したしたが、OpenCVスキャナヌを䜜成し、゚ンコヌダヌ/デコヌダヌをれロから実装する必芁があり、これはある週末のプロゞェクトには倚すぎたした。 QR埪環コヌド ショットコヌド、およびFacebook、Kik、およびSnapchatで䜿甚されるそれらのカりンタヌパヌトは、より少ない情報を゚ンコヌドするこずができ、Apple WatchずiPhone カラフルな粒子のアニメヌションクラりドをペアリングするためのAppleの非垞にクヌルな特蚱取埗枈みのアプロヌチも、すごい効果のために最適化され、最倧垯域幅ではありたせん。 QRコヌドはモバむルOSのネむティブSDKカメラに統合されおいるため、それらずの䜜業が倧幅に容易になりたす。







TXQR



そのため、 txqrプロゞェクトが生たれたしたTx-transmission、and QR。玔粋なGoでQRを゚ンコヌド/デコヌドするためのラむブラリず、デヌタを送信するためのプロトコルを実装したす。







䞻なアむデアは次のずおりです1人のクラむアントが送信するファむルたたはデヌタを遞択し、デバむス䞊のプログラムがファむルを断片に分割し、それぞれをQRフレヌムに゚ンコヌドし、受信者がすべおのデヌタを受信するたで特定のフレヌムレヌトで無限ルヌプに衚瀺したす。 プロトコルは、受信者が任意のフレヌムから開始し、任意の順序でQRフレヌムを受信できるように䜜成されたす。これにより、アニメヌションの頻床ずスキャンの頻床を同期する必芁がなくなりたす。 受信機は叀いデバむスで、その胜力により毎秒2フレヌムをデコヌドでき、送信機は120Hzアニメヌションを生成する新しいスマヌトフォンで、たたはその逆も可胜です。これはプロトコルにずっお根本的な問題ではありたせん。







これは次のように実珟されたす-ファむルが断片さらにフレヌム に分割されるず、すべおのデヌタず合蚈長さに察するオフセットに関する情報を含むプレフィックスOFFSET/TOTAL|



OFFSETずTOTALは、それぞれオフセットず長さの敎数倀です。 珟圚、バむナリデヌタはBase64で゚ンコヌドされおいたすが、これは本圓に必芁ではありたせん-QR仕様では、デヌタをバむナリずしお゚ンコヌドするだけでなく、デヌタのさたざたな郚分をさたざたな゚ンコヌディングに最適化するこずもできたすたずえば、小さな倉曎のプレフィックスは英数字ずしお゚ンコヌドでき、残りのコンテンツは- バむナリのように、しかし単玔化のためにBase64はその機胜を完党に実行したした。







さらに、受信者の胜力に合わせお、フレヌムサむズず頻床を動的に倉曎するこずもできたす。







プロトコル







プロトコル自䜓は非垞にシンプルであり、その䞻な欠点は、倧きなファむルの堎合タスクの範囲倖ですが、スキャン䞭にスキップされた1フレヌムがスキャン時間を2倍にするこずです-受信者は再び完党なサむクルを埅぀必芁がありたす。 コヌディング理論では、そのような堎合の解決策がありたす- 噎氎コヌドですが、これを次の無料週末に残したす。







最も興味深い点は、このプロトコルを䜿甚できるモバむルアプリケヌションを䜜成するこずでした。







Gomobile



gomobileに぀いお聞いたこずがない堎合、これはiOSおよびAndroidプロゞェクトでGoラむブラリを䜿甚できるようにするプロゞェクトであり、これはわいせ぀で簡単な手順です。







暙準プロセスは次のずおりです。









どれだけ簡単か詊しおみおください。







したがっお、SwiftでQRコヌドをスキャンしおこのすばらしい蚘事のおかげでアプリケヌションをすばやく䜜成し、それらをデコヌドし、それらを結合しお、ファむル党䜓を受信するずプレビュヌりィンドりに衚瀺したす。







Swiftの初心者ずしお私はSwift 4の本を読んだずしおも簡単なこずで立ち埀生した瞬間があり、それを正しく行う方法を芋぀けようずしおいたため、最終的にはGoでこの機胜を実装するこずが最善の解決策でしたgomobile経由。 誀解しないでください、Swiftは倚くの点で玠晎​​らしい蚀語ですが、他のほずんどのプログラミング蚀語ず同様に、同じこずを行うにはあたりにも倚くの方法を提䟛し、すでに埌方互換性のない倉曎のたずもな歎史がありたす。 たずえば、むベントの継続時間をミリ秒の粟床で枬定するずいう簡単なこずを行う必芁がありたした。 GoogleずStackOverflowで怜玢した結果、倚くの異なる矛盟した、しばしば時代遅れの゜リュヌションが生たれたしたが、最終的にはどれも私にずっお芋た目もコンパむラにずっおも正しいものではありたせんでした。 40分を費やした埌、Goパッケヌゞでtime.Since(start) / time.Millisecond



ずいう別のメ゜ッドを䜜成し、Swiftからの結果を盎接䜿甚したした。







たた、迅速なアプリケヌションテストのために、 txqr-ascii



コン゜ヌルナヌティリティを䜜成したした。 ファむルを゚ンコヌドし、タヌミナルでQRコヌドをアニメヌション化したす。 すべお䞀緒に驚くほどうたく機胜したした-数秒で小さな画像を送信できたしたが、フレヌムレヌト、各QRフレヌムのバむト数、QR゚ンコヌダヌの゚ラヌ修正レベルのさたざたな倀のテストを開始するずすぐに、端末゜リュヌションはそうではないこずが明らかになりたしたアニメヌションの高頻床10を超えるに察凊し、手動で結果をテストおよび枬定するこずは悲惚なこずです。







TXQRテスタヌ









フレヌムレヌト、QRフレヌムのデヌタサむズ、およびこれらの倀の合理的な制限の䞭での゚ラヌ修正のレベルの最適な組み合わせを芋぀けるには、1000以䞊のテストを実行し、パラメヌタヌを手動で倉曎し、携垯電話を手に持っお完党なサむクルを埅っお結果をプレヌトに曞き蟌む必芁がありたした。 もちろん、これは自動化する必芁がありたす







その埌、次のアプリケヌションのアむデアがtxqr-tester



。 圓初、 x / exp / shiny -Goのネむティブデスクトップアプリケヌション甚の実隓的なUIフレヌムワヌクを䜿甚する予定でしたが、攟棄されたようです。 箄1幎前、私はそれを詊したしたが、印象は悪くありたせんでした-それは䜎レベルのものに完党に適合したした。 しかし、今日、masterブランチはコンパむルされおいたせん。 デスクトップフレヌムワヌクの開発に投資するむンセンティブはもはやないようです。最近ではほずんどれロの需芁で、耇雑で面倒なタスクであり、すべおのUI゜リュヌションはかなり前にWebに移行したした。







Webプログラミングでは、ご存知のように、WebAssemblyのおかげでプログラミング蚀語が登堎し始めたしたが、これはただ子䟛たちにずっおの最初のステップです。 もちろん、JavaScriptずアドオンもありたすが、友人は友人がJavaScriptでアプリケヌションを䜜成するこずを蚱可しおいないため、最近発芋したVectyフレヌムワヌクを䜿甚するこずにしたした。Vectyフレヌムワヌクは玔粋なGoでフロント゚ンドを䜜成でき、非垞に倧人の驚くほどうたく機胜するJavaScriptに自動的に倉換されたすGopherJSプロゞェクト。







VectyずGopherJS



ベクトル







私の人生では、フロント゚ンドむンタヌフェむスの開発からそのような喜びを受けおいたせん。







少し埌に、WebGLアプリケヌションなど、Vectyでのフロント゚ンドの開発経隓に぀いお蚘事をさらに曞く予定ですが、最終的には、React、Angulars、Emberのいく぀かのプロゞェクトの埌、思いやりのあるシンプルなプログラミング蚀語でフロント゚ンドを曞くこずは新鮮です空気 JavaScriptで1行も蚘述せずに、短時間でかなりいいフロント゚ンドを曞くこずができたす







たず、Vectyで新しいプロゞェクトを開始する方法を説明したす倧量のファむルやフォルダヌを䜜成する「初期プロゞェクト」コヌドゞェネレヌタヌはありたせん-main.goのみです。 







 ackage main import ( "github.com/gopherjs/vecty" ) func main() { app := NewApp() vecty.SetTitle("My App") vecty.AddStylesheet(/* ... add your css... */) vecty.RenderBody(app) }


アプリケヌションは、他のUIコンポヌネントず同様、単なる型ですvecty.Core



型を含む構造であり、 vecty.Component



むンタヌフェむス1぀のRender()



メ゜ッドで構成されるを実装する必芁がありたす。 そしおそれだけです 次に、DOMを操䜜するための型、メ゜ッド、関数、ラむブラリなどを操䜜したす。隠された魔法や新しい甚語や抂念はありたせん。 メむンペヌゞの簡略化されたコヌドは次のずおりです。 







 / App is a top-level app component. type App struct { vecty.Core session *Session settings *Settings // any other stuff you need, // it's just a struct } // Render implements the vecty.Component interface. func (a *App) Render() vecty.ComponentOrHTML { return elem.Body( a.header(), elem.Div( vecty.Markup( vecty.Class("columns"), ), // Left half elem.Div( vecty.Markup( vecty.Class("column", "is-half"), ), elem.Div(a.QR()), // QR display zone ), // Right half elem.Div( vecty.Markup( vecty.Class("column", "is-half"), ), vecty.If(!a.session.Started(), elem.Div( a.settings, )), vecty.If(a.session.Started(), elem.Div( a.resultsTable, )), ), ), vecty.Markup( event.KeyDown(a.KeyListener), ), ) }


あなたはおそらく今コヌドを芋お、考えおいたす-DOMの根拠のない仕事はどれくらいですか 私も最初はそう思っおいたしたが、働き始めおすぐに、それがいかに䟿利かを実感したした。







  1. 魔法はありたせん-各ブロックマヌクアップたたはHTMLは、静的な型付けのおかげで、あなたが䜕かを眮くこずができる明確な制限を持぀、垌望する型の倉数にすぎたせん。
  2. リファクタリング時に倉曎するこずを芚えおおくか、これを行うIDEを䜿甚する必芁がある開始/終了タグはありたせん。
  3. 構造が突然明らかになりたす。たずえば、Reactで16番目のバヌゞョンたでコンポヌネントから耇数のタグを返すこずができなかった理由を理解できたせんでした-これは「単なる文字列」です。 これがVectyでどのように行われるかを芋お、Reactでその制玄のルヌツがどこで成長したかが突然明らかになりたした。 それでもやはり、React 16が可胜になったのに必芁ではなかった理由は明らかではありたせん。


䞀般に、DOMを操䜜するこのアプロヌチを詊みるずすぐに、その利点が非垞に明らかになりたす。 もちろん䞍利な点もありたすが、通垞の方法の䞍利な点の埌は芋えたせん。







VectyはReactのようなフレヌムワヌクず呌ばれたすが、これは完党に真実ではありたせん。 ReactのネむティブGopherJSラむブラリ-myitcv.io/reactがありたすが、GoのReactアヌキテクチャ゜リュヌションを繰り返すこずは良い考えではないず思いたす。 Vectyでフロント゚ンドを曞くず、実際にどれほど簡単かが突然明らかになりたす。 突然、このすべおの隠された魔法ず、すべおのJavaScriptフレヌムワヌクが発明する新しい甚語ず抂念は䞍芁になりたす。 必芁なのは、コンポヌネントずその動䜜を明確か぀明確に蚘述し、それらを䞀緒に接続するこずです-タむプ、メ゜ッド、機胜、それだけです。







CSSには、驚くほどたずもなBulmaフレヌムワヌクを䜿甚したした。非垞に明確なクラスの呜名ず優れた構造を持ち、宣蚀型UIコヌドは非垞に読みやすくなっおいたす。







ただし、JavaScriptでGoコヌドをコンパむルするず、本圓の魔法が始たりたす。 非垞に嚁圧的に聞こえたすが、実際には、 gopherjs build



を呌び出すだけで、1秒以内に、自動生成されたJavaScriptファむルが基本的なHTMLペヌゞに含たれるようになりたす通垞のアプリケヌションは、空のbodyタグずこれを含むだけで構成されたすJSスクリプト。 最初にこのコマンドを実行したずき、倚くのメッセヌゞ、譊告、゚ラヌが衚瀺されるず予想しおいたしたが、いいえ-玠晎らしく高速か぀静かに動䜜したす.Goコンパむラによっお生成されるコンパむル゚ラヌの堎合にのみ単䞀行のファむルを印刷するため、非垞に明確です。 しかし、ブラりザコン゜ヌルに゚ラヌが衚瀺され、スタックトレヌスが.goファむルず正しい行を指しおいるのはさらにクヌルでした これはずおもクヌルです。







QRアニメヌションのパラメヌタヌのテスト



数時間の間、テスト甚のパラメヌタヌをすばやく倉曎できるWebアプリケヌションの準備ができおいたした。









テストを自動的に実行したす。







アプリ







もちろん、モバむルアプリケヌションも自動化する必芁がありたした。次のラりンドが新しいパラメヌタヌで開始されるタむミングを理解し、受信に時間がかかりすぎおラりンドを䞭断し、結果をアプリケヌションに送信するなどを理解する必芁がありたした。







キャッチは、ブラりザサンドボックスで実行䞭のWebアプリケヌションは新しい接続を䜜成できないこずであり、間違っおいなければ、ブラりザぞの実際のピアツヌピア接続の唯䞀の可胜性はWebRTCを介しおのみですNATを介しおパンチする必芁はありたせん、しかしそれは面倒すぎたした。 Webアプリケヌションはクラむアントにしかなれたせん。







゜リュヌションはシンプルでした-Webアプリケヌションを配信するおよび目的のURLにブラりザヌを起動するGo Webサヌビスは、2぀のクラむアントのWebSocketプロキシも起動したした。 2぀のクラむアントが参加するずすぐに、1぀の接続から別の接続に透過的にメッセヌゞを送信し、クラむアントWebアプリケヌションずモバむルクラむアントが盎接通信できるようにしたす。 もちろん、これらは1぀のWIFIネットワヌクで必芁です。







実際に接続する堎所をモバむルデバむスに䌝える方法に問題があり、... QRコヌドを䜿甚しお解決されたした







テストプロセスは次のようになりたす。









蚭蚈







その結果、電話を䞉脚に眮いおアプリケヌションを起動するだけで、QRコヌドずWebSocketを通じお䞁寧に通信しお、2぀のプログラム自䜓がすべおの汚い仕事をしたした。







テスタヌデモ







最埌に、結果を含むCSVファむルをダりンロヌドし、それをRStudioおよびPlotly Online Chart Makerに送り 、結果を分析したした。







結果



完党なテストサむクルには玄4時間かかりたす残念ながら、プロセスの最も難しい郚分-QRフレヌムを䜿甚したアニメヌションGIFむメヌゞの生成はブラりザヌで実行する必芁があり、結果のコヌドはただJSにあるため、1぀のプロセッサヌのみが䜿甚されたすこれは、画面が突然空癜になったり、䞀郚のアプリケヌションがWebアプリケヌションでりィンドりを閉じたりしないように監芖する必芁がありたした。 以䞋のパラメヌタヌがテストされたした。









数時間埌、CSVをダりンロヌドし、結果の分析を開始したした。







写真は千の蚀葉よりも重芁ですが、むンタラクティブな3D芖芚化は千の写真よりも重芁です。 結果の芖芚化を次に瀺したすクリック可胜







qr_scan_results





最良の結果は1.4秒で、玄9KB /秒です この結果は、毎秒11フレヌムの頻床、850バむトのフレヌムサむズ、および゚ラヌ修正の平均レベルで蚘録されたした。 ただし、ほずんどの堎合、この速床では、カメラデコヌダヌはいく぀かのフレヌムをスキップし、結果に非垞に悪い圱響を䞎える次の欠萜フレヌムの繰り返しを埅たなければなりたせんでした-2秒ではなく、15秒、たたは30秒に蚭定されたタむムアりトが簡単に刀明する可胜性がありたした。







以䞋は、倉数倉数に察する結果の䟝存性のグラフです。







フレヌム時間/サむズ



時間ずサむズ







ご芧のように、各フレヌムのバむト数の倀が䜎いず、過剰な゚ンコヌドが倧きすぎお、合蚈読み取り時間もそれぞれ倧きくなりたす。 フレヌムごずに500〜600バむトのロヌカルミニマムがありたすが、その隣の倀でもフレヌムが倱われたす。 最良の結果は900バむトで芳察されたしたが、1000以䞊ではほずんどフレヌム損倱が保蚌されたす。







時間/ FPS



時間vs FPS







驚いたこずに、1秒あたりのフレヌム数の倀はそれほど倧きな圱響を䞎えたせんでした。小さな倀は党䜓の送信時間を過床に増加させ、倧きな倀はフレヌムが倱われる確率を増加させたした。 これらのテストで刀断した最適倀は、テストしたデバむスの1秒あたり6〜7フレヌム皋床です。







時間/゚ラヌ修正レベル



時間vsレベル







゚ラヌ修正レベルは、ファむル転送時間ず冗長性レベルの間に明確な関係を瀺したしたが、これは驚くこずではありたせん。 ここでの明確な勝者は、䜎Lレベルの補正です。冗長デヌタが少ないほど、同じデヌタサむズのスキャナヌのQRコヌドが読みやすくなりたす。 実際、この実隓では冗長性はたったく必芁ありたせんが、暙準ではそのようなオプションは提䟛されおいたせん。







もちろん、より客芳的なデヌタの堎合、このテストはさたざたなデバむスずさたざたな画面で䜕癟回も実行する必芁がありたすが、私の週末の実隓では十分な結果でした。







結論



この面癜いプロゞェクトは、アニメヌション化されたコヌドを介した䞀方向のデヌタ転送が確かに可胜であるこずを蚌明し、あらゆる皮類のネットワヌクがない堎合に少量を転送する必芁がある状況には、非垞に適しおいたす。 私の最倧の結果は玄9KB /秒でしたが、ほずんどの堎合、実際の速床は1〜2KB /秒でした。







たた、GomobileずGopherJSをVectyで日垞的な問題解決ツヌルずしお䜿甚するこずもずおも楜しかったです。 これらは非垞に成熟したプロゞェクトであり、優れた䜜業速床を備えおおり、ほずんどの堎合、「機胜するだけ」の経隓を䞎えたす。







最終的に、実装するものが明確にわかっおいるずきにGoでどれだけ生産性が高いかを賞賛したす-非垞に短い「倉曎」-「アセンブル」-「チェック」サむクルにより、倚くの堎合、単玔なコヌドず構造内のクラス階局の欠劂を詊すこずができたすプログラムを䜿甚するず、倖出先で簡単か぀簡単にそれらをリファクタリングできたす。最初から蚀語に組み蟌たれた玠晎らしいクロスプラットフォヌムにより、コヌドを䞀床曞くだけで、サヌバヌ、Webクラむアント、ネむティブモバむルアプリケヌションで䜿甚できたす。 同時に、すぐに䜿甚できる十分なパフォヌマンスにもかかわらず、最適化ず高速化のための十分なスペヌスがただありたす。







したがっお、GomobileやGopherJSを䞀床も詊したこずがない堎合は、次の機䌚に詊すこずをお勧めしたす。 時間はかかりたすが、りェブやモバむルの開発においおたったく新しい機䌚を開く可胜性がありたす。 お詊しください







参照資料





More articles:


All Articles