--- title: Pepperのタブレット上でvConsoleを使ってJavaScriptのログを確認する tags: Pepper HTML jQuery JavaScript author: trashrash slide: false --- Pepperのタブレットでは自作のhtmlを表示できるけど開発する時に手軽にログを見られないのが非常に不便だったりする。web開発の時みたくコンソールを表示できると便利なので、vConsoleという擬似的なwebコンソールを表示できるプラグインを使ってみる。 (某ハンズオンイベントでvconsoleの存在を知り衝動だけでとりあえず記事を書きます。) ## Pepperのタブレットのログ確認方法 まずjavascriptでは > console.log("text"); という記述でwebコンソールにログを出力できる。 知ってるところだとこれを確認するにはPepperのローカルサーバにPCブラウザでアクセスしてコンソールを開くか、ログに出したいテキストを一旦ALMemoryに保存してChoregrapheでsubscribeしてからログに出力するパターンあたりをよく使う。 個人的な使用感としては前者は接続が不安定だったりでつまづく。後者はログに出せる情報が限られる。(Elementsの情報などは見られない) # vConsoleを導入する ## 導入するとどうなるか 先に結果を見せます。 ![IMG_2980.JPG](https://qiita-image-store.s3.amazonaws.com/0/122557/d36e9e97-b640-91dc-41c7-9aa29db31062.jpeg) ![IMG_2983.JPG](https://qiita-image-store.s3.amazonaws.com/0/122557/c79c8ef8-aaf6-e0fb-befe-5504220ff1c9.jpeg) こんな感じでコンソールを表示することができます。 ## 導入手順 ### vConsoleをダウンロード https://github.com/Tencent/vConsole こちらからzipをダウンロードするか、npmが入っていれば > npm install vconsole でダウンロード可能。落として来たら > dist/vconsole.min.js というファイルがあるのでこれをPepperのhtmlディレクトリに持って来ます。 これで下準備は完了です。 ### html作成 今回作成したhtmlはこちら。 ```html
``` ![IMG_2984.JPG](https://qiita-image-store.s3.amazonaws.com/0/122557/c0a53086-0249-08cd-16cd-efbde461b213.jpeg) 単純なdiv要素が4つ配置されてあります。それぞれタップするとログが出るようになっているので色分けして識別しやすくしてあります。 ```html ``` vconsoleの読み込み部分。 newするだけでconsoleを表示するUIボタンが出現します。 加えてjQueryで各div要素にクリック(タッチ)イベントを設定しています。 ### Pepperアプリ作成 behaviorはshow appボックスを配置してつなぐだけなので割愛 ディレクトリ構成はこんな感じ スクリーンショット 2018-12-01 15.20.20.png ## ログを確認する ![IMG_2982.JPG](https://qiita-image-store.s3.amazonaws.com/0/122557/47ffd12e-3492-1b6f-a758-4619d56b40c1.jpeg) 表示されました。最初の画像のようにhtmlのElementも確認できます。 ## 感想 jQueryでhtml書き換えた時やajaxでデータ取得した時なんかにさくっとログを確認するには便利だと思いました。注意としては結局プラグインなのでログ出力もブラウザレベルではなくスクリプトレベルの処理なため、若干反応が鈍かったり、タッチイベントをロストしたりします。Pepperのタブレットの処理能力に依存するところですね。 とはいえとても便利なのでぜひお試しあれ。