関連のツールの紹介、使い方などをやさしく説明しています。Tumblr皆さんこんにちは。今回はプレビュー画面で使用できる、debugger(デバッガー)の使い方について説明していきます。Expressionの値の解析まとめデバッガーとは?Bubbleでアプリを作成してプレビューで確認してみようというときに、一度は「これ何だろう?」と思ったことはあるのではないでしょうか?そうです、ページの下の方に出てくる「Debugger」と「Inspect」というボタン、これがデバッガーと呼んでいるものです。URLを見ると、末尾に「debug_mode=true」という文字列がついていますよね。これが付いていると、デバッガーが使えるモードになっているということを表しています「よく分からないけど、とりあえずデバッガーがなくてもアプリは動かせるからいいか~」と思っているそこのあなた、とってももったいないです!デバッガーとは名前のとおり、アプリ等のバグを取り除くのをサポートしてくれるツールなのです。デバッガーの機能を使いこなせるようになると、アプリが思った動きにならないときに簡単に原因を探ることができるかもしれませんよ。それでは早速その機能と使い方について説明していきます。※デバッガーは現在、パソコンでのみ使用できる機能となっています。スマートフォンなどの端末では操作できませんのでご注意ください。デバッガーの機能Bubbleで用意されている主な機能は2つです。簡単なアプリを作成して動かしながら、それぞれ使い方を詳しく見ていきましょう。事前準備まずは図のようなエレメントを配置しましょう。スタートのButtonが押されると「スタートボタンを押しました」のTextを表示し、リセットのButtonが押されると、このTextを非表示にするという単純なアプリで確認します。loadのチェックを外す)にしておき、ワークフローの中で表示させるようにします。スタートとリセットのButtonが連続で押されたときに表示するAlertメッセージも配置しておきます。stateを作成しておきます。typeは「yes/no」、ロード時は非表示にしたいのでデフォルトを「no」に設定します。次にワークフローです。yesならnoに置き換えとして設定してみてください。これで準備は完了です!ワークフローの動きを確認する機能の確認Previewボタンを押して、初めにワークフローのデバッガーを動かしてみましょう。ワークフローのデバッガーには「Normal」「Slow」「Step-by-step」の3つがあり、それぞれ以下の通りに動きます。Normal:ワークフローが途中で止まることなく、最後のステップまで自動で動くSlow:ワークフロー内でステップ間を1秒間隔で自動で動くStep-by-step:ワークフローの1つのステップずつ手動で動かすバグを見つけたいときは、原因となるステップを探すために細かい部分まで確認する必要があると思うので、Step-by-stepで1つずつアクションを確認するのがよいでしょう。それではDebuggerのモードを「Step-by-step」に設定し、スタートボタンを押します。すると画面の下部からデバッガーが表示されるようになりました。next」のボタンを押すごとに、1つずつワークフローのステップが進むようになります。slowを選択してください)次のステップでは条件を設定していましたね。noの場合のみ、メッセージをShowする、としています。whenで設定した内容も赤枠のようにデバッガーに表示されています。whenの色が緑のときは条件を満たす、赤のときは条件を満たさない状態であることを表しています。no、つまり緑になっており、条件を満たすためメッセージを表示させるステップが動きます。次のステップに進みましょう。whenの文字は赤色になっていますね。同様にして最後までステップを進めると、デバッガーの表示は消え、スタートボタンを押したときのワークフローが終わった状態となりました。リセットボタンを押したときや、連続でボタンを押したときの動きなども同様にして確認してみましょう。このように、ワークフローのデバッガーではステップごとの動きを確認することができるため、アプリの挙動確認の際に意図しない分岐に入っていないかどうかをチェックするときに活用してみるとよいでしょう。次はエレメントの設定値などを確認できる、Inspectボタンの使い方です。一度Previewボタンを押し、画面を開いたら「Inspect」ボタンを押してみます。すると「Inspect」ボタンは「Stop」ボタンに変わり、プルダウンが開けるようになります。このプルダウンの中には、ページにあらかじめ設定している全てのエレメントが表示されています。非表示設定になっているものは、エレメント名の末尾に「(invisible)」と付与されています。stateの値の変化を確認していきましょう。画面上で確認したいエレメントをクリックするか、プルダウンからエレメントを選択します。stateはページ(例ではwork-flow-debuggerというページ名にしています)に設定しているので、今回は「work-flow-debugger」というエレメントを選択しましょう。プルダウンは検索機能もついています。stateの値が表示され、確認できるようになりました。noとなっていますね。stateの他にも、エレメントのAppearanceで設定したサイズや色やConditionalsに設定した条件など、すべての設定内容がこれで確認できます。それではスタートボタンを押したときにisVisibleの値が変わるのを確認していきましょう。Inspectのモードの状態ではボタンを押せないようになっているので、いったんStopボタンを押して元の画面に戻してから、スタートボタンを押しましょう。(今回はStepごとには確認しないので、ワークフローのデバッガーはNormalに戻してもよいです)スタートボタンを押した後の状態です。Inspectボタンを押します。左側に、work-flow-debuggerのエレメントの中身が表示されていますが、これは先ほど表示ページロードの際の状態の値が残っているだけですので、画面上のエレメントをクリックするかプルダウンから選択し直しましょう。すると、isVisibleの値がyesに変わっていることがわかりました。今回紹介したデバッガーの応用として、他にも使える便利な機能を少しだけ紹介します。ブレークポイントワークフローのデバッガーですが、ワークフローの途中までは進めてしまいたい、というときに一つ一つStep-by-stepで進めるのは大変ですよね?こんなときに便利なのがブレークポイントの機能です。ブレークポイントをあるStepに設定すると、Normalモードで進めても、ブレークポイントが設定されたStepの前でいったん止まるようになります。例として、先ほどのアプリのスタートボタンを押した際のワークフローで、Step2にブレークポイントを置いてみましょう。プレビューを開き、Normalモードの状態でスタートボタンを押します。すると、きちんとブレークポイントを設定したStep2の前でワークフローが止まることが分かります。長くて複雑なワークフローで動きを確認するときにはぜひ使ってみましょう。dataを使うことはよくあると思います。dataの中身に実際どのような値が設定されているのかを確認したいときに便利なのがこちらの機能です。具体的に使い方を見ていきましょう。Groupを用意し、セルの中にTextを配置します。dataとして、Userのデータベースに登録されたユーザー名(UserName)を検索して、1ユーザーずつ表示させるように作成しています。Userのデータベースの中身は以下のとおり登録しておきます。ここまで設定したら、プレビューを開きInspectボタンを押しましょう。dataの確認ですので、例として1つ目のセルの「テストユーザー」と表示されたTextのエレメントを選択しましょう。すると左下に表示されたTextの値の「テストユーザー」がクリックできる状態となっています。dataを確認することができます。UserName」を選択するとUserNameのみの項目の値が見られます。dataで思ったとおりの値が取得できないときなどに使ってみるとよいでしょう。個別指導などを行っています。)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。