【javascript】bubble製のサイトを開いたときに端末がiPhoneかandroidか(あるいはデスクトップか)判定する方法

###・前提条件 ・発生している問題・エラーメッセージ ・実装したい機能

僕がbubbleで作ったページを開いたときに、ページを開いた端末がiPhoneであるかandroidであるか(あるいはデスクトップであるか)を判定するため、javascriptの処理を教えてほしいです。
具体的には、ネット上で見つけた「iPhoneかandroidか判定するコード」をbubble内で使用し結果を取得する方法を知りたいです。

背景として、動画の再生におけるアップル端末とその他の端末の機能の違いが挙げられます。videojsプラグインなどを用いてボタン操作無くノーモーションで動画を再生したい場合、音声さえなければ自動再生が可能であることがわかりましたが、アップル製端末については自動再生ができないことがわかりました。

そのため、端末がアップル製か判定したうえで、アップル製品であれば「コンソール(再生ボタン等)をvisibleにする」という条件をconditionalでつけたいと考えています。

ネット上で、iPhoneかandroidか判定するコードを見つけましたので、htmlにコピペするなどを試しましたが、うまくいきませんでした。htmlエレメントを使うのか、toolboxのrunjavascriptを使うのかよくわからず、教えていただきたいです。

以下に取得したコードをそれを記載したサイトのリンクを添付いたします。

よろしくお願いします。

【以下コード】

iOS_or_Android

【コードここまで、以下リンク】

JavaScriptは、ワークフローのRun JavaScriptアクションで動かします。
When page is loadedのイベントにRun JavaScriptを置いて、
その中にJSを書き込みます。(HTMLではないので、scriptタグは含みません。)
もしPage is loadedでうまく動かないときは、適切なイベントに設定してみてください。

そのJSの中に、Bubbleに返す戻り値を設定し、
あとは、JavaScript to Bubbleのエレメントで、それを受け取ります。

使い方が解説されているサイトがありましたので、ご参照ください。
https://blog.nocodelab.jp/entry/toolbox-2

「いいね!」 2

ありがとうございます!やってみます!

いろいろ試してやってみたのですが、os判定を表示することができませんでした、、、

どこをどう改造したらいいのかわからず、ヒントを頂けないでしょうか、、、???

ではまず、改造する前に、サイトに書かれているHTMLをそのまま「index.html」などに保存して、思う結果が得られているかを確認してみるといいと思います!
そこから、その内容をBubble用に少し微調整すればokです。
色々とは、どのようなことを試されましたか?

「いいね!」 1

index.html、やってみます、、、

具体的には、
①Javascript to Bubbleに値を渡す関数(bubble_fn_text(☆))を入れてみる
②上記の関数の位置を変えてみる
③☆の引数(?)を変えてみる
④複数含まれていたタグを削除してみる

などです、、、

最終的には以下のようなスクリプトになりましたが、動作しませんでした。。

var os_name;          // iOS, Android

window.onload = function() {
    var ele = document.getElementById("output");
//
    var ua = navigator.userAgent;
    if (ua.match(/Android/)) {
        os_name = "Android";
    } else if (ua.match(/iPhone|iPad|iPod/)){
        os_name = "iOS";
    } else {
        os_name = "unknown";
    }
    ele.innerHTML = "OS = " + os_name;

bubble_fn_text(os_name);
}

JavascripttoBubbleの設定はどうなっていますか?

var ele = document.getElementById("output");

└ HTMLエレメントでidがoutputの要素を取得する必要がないので、削除します。

ele.innerHTML = "OS = " + os_name;

└ 同じく、特に表示させる必要がないので削除です。Bubbleで中身を参照するために表示させるなら、以下のようにtextエレメントを使えばOKです。

JavascripttoBubbleは、text型で宣言し、Publish valueにチェックを入れておきます。

window.onload = function()

└ Page is loadedのイベントに仕込むので、これも不要です。

最終的に、Run javascriptに書くスクリプトは以下のとおり。

これで、正常に値が取れるはずです。
Windowsでしか検証してませんが、unknownと正しい結果を取得できました。
(ちなみにconsole.logは、正しく値が取れているかをコンソールタブで検証するために書いているので、別になくてもOKです)

一度、Java Scriptを、基礎文法だけでもプロゲートか何かで学んでみると良いと思います~。