8 返信 最新の回答 日時: Jan 13, 2017 12:58 AM ユーザー:beginners

    時刻を表示し続ける

    beginners

      いつもお世話になっております。

       

      画面上に時刻を表示し続けるためにはどうしたら実現するのでしょうか?

       

      手段は問いませんが、イメージでいえばパソコンの時刻の様に、現在の時刻がリアルタイムに表示し続けさせたいです。

       

      どうすれば実現するのでしょうか?

      ご教授頂ければ幸いです。

        • 1. Re: 時刻を表示し続ける
          sago350@未来Switch

          ・OnTimerスクリプトでフィールドの値を更新し続ける方法

          ・Webビューアの中にHTMLを書く方法

          の2種類かなぁと思っています。

           

           

          Webビューアにこんな設定を書いて↓配置すれば動き出します。

           

          "data:text/html," & 設定::HTML時計

           

           

          HTML時計フィールドの中↓

          <span style="font-size : 72pt">

          <p id="RealtimeClockArea2" >時刻表示中...</p>

          </span>

           

           

          <script type="text/javascript">

          function set2fig(num) {

            // 桁数が1桁だったら先頭に0を加えて2桁に調整する

            var ret;

            if( num < 10 ) { ret = "0" + num; }

            else { ret = num; }

            return ret;

          }

          function showClock2() {

            var nowTime = new Date();

            var nowHour = set2fig( nowTime.getHours() );

            var nowMin = set2fig( nowTime.getMinutes() );

            var nowSec = set2fig( nowTime.getSeconds() );

            var msg = "⏰" + nowHour + "時" + nowMin + "分";

            document.getElementById("RealtimeClockArea2").innerHTML = msg;

          }

          setInterval('showClock2()',2000);

          </script>

           

          中のJavaScriptは下記サイトから拝借したはずです。

          現在時刻をテキストでリアルタイムに表示し続ける時計を作る - JavaScript TIPSふぁくとりー

          なので、好きなJavaScriptを探してきて設定すればいいかと。

          • 2. Re: 時刻を表示し続ける
            beginners

            回答ありがとうございます。

             

            「OnTimerスクリプトでフィールドの値を更新し続ける方法」で上手くいきました。

            助かりました。

             

            【Webビューアの中にHTMLを書く方法】

            ・Web ビューアの中に仕込んで利用するのが最も負荷が少ないとのことでしたので、こちらで対応してみます。

             

            ありがとうございました。

            • 3. Re: 時刻を表示し続ける
              beginners

              お世話になります。

              Webビューアの中にHTMLを書く方法にチャレンジしていますが、初心者のもので幾つかお聞きしてもいいですか。

               

              質問1。 Webビューアの配置の仕方は、レイアウト上のWEBビューアーツールからレイアウト上に配置し、そこが時刻を表示させる項目になるのかなと考えていますがいいでしょうか。

               

               

              質問2。 レイアウト上のWEBビューアーツールからレイアウト上に配置しますと、Webビューアの設定画面が表示されます。

              「Webサイトの選択」や「Webアドレス」や「指定」ボタンなどが表示され、選択や入力できる画面が現れてきますが、

              ご教授いだだきました下記の設定を、Webビューアの設定で、Webサイトの選択を”カスタム Webアドレス”を選択し、

              ”指定”に "data:text/html," & T_Ver::URL時刻 と入力しましたがいいのでしょうか?

               

              >>Webビューアにこんな設定を書いて↓配置すれば動き出します。

              >>"data:text/html," & 設定::HTML時計

               

               

              質問3。 ご教授いただきました下記のHTML時計フィールド(URL時刻フィールド)の中にHTMLを入力するようですが、どこにHTMLを記述してよいのか分かりませんでした。教えて頂けると幸いです。

               

              >>HTML時計フィールドの中↓

              >> <span style="font-size : 72pt">

              >> <p id="RealtimeClockArea2" >時刻表示中...</p>

              >> </span>

               

              >> 以下省略

              • 4. Re: 時刻を表示し続ける
                sago350@未来Switch

                質問1

                OKです。

                 

                質問2

                OKです。

                 

                質問3

                あなたの環境だと「T_Ver::URL時刻」の中になります。

                • 5. Re: 時刻を表示し続ける
                  beginners

                  度たびですみません。

                  質問3にあった「あなたの環境だと「T_Ver::URL時刻」の中になります。」について、どこを更新するのか探したのですが分からなくて、色々と調査したのですが。

                   

                  私が行った手順ですが、

                  1、「T_Ver」というテーブルに、”URL時刻”というフィールドをオブジェクトとして追加しました。

                  2、Webビューアツールからレイアウト上に時刻を表示する場所を作成しました。

                  3、上記2の項目を右クリックしたら「Webビューアの設定」が選択すると、Webビューアの設定画面が表示されます。

                  4、Webビューアの設定画面の各項目に下記のように入力しています。

                   ・Webサイトの選択=カスタム Webアドレス

                   ・Webアドレス="data:text/html," & T_Ver::URL時刻

                   OKを押下しWebビューアの設定画面を閉じます。

                   

                  ここまでは、前回の質問で「OK」を頂いていると思っていますが、

                  この先が、どうしても分からないのです。

                   

                  T_Ver::URL時刻 のフィールドのどこに、どうやってHTMLを記述してよいのでしょうか。

                   

                  基本的な事をお聞きするのかも知れません。すみませんが教えて頂けると助かります。

                   

                  • 6. Re: 時刻を表示し続ける
                    sago350@未来Switch

                    HTMLを入れるので、フィールドタイプはテキストで、そこにHTMLを入れます。

                    • 7. Re: 時刻を表示し続ける
                      beginners

                      できました。

                      すごいですね。

                      本当にありがとうございました。

                      • 8. Re: 時刻を表示し続ける
                        beginners

                        上手く表示されて喜んでいましたが、時刻は表示させるだけなのに

                        表示された時刻のフィールドは、テキストボックスのように入力領域のような表現になっていたのです。

                         

                        こんな事を聞いてよいのか分かりませんが、

                        「塗りつぶし=なし」で、「枠線」もないようにして時刻が表示されるように設定するHTMLはどう書けばいいのでしょうか?

                         

                        JavaScriptの知識が無く、色々と検索し独学で設定して検証してみたのですが、上手くいかず、下記の「function test()」を追加して実行してみたのですが、何も変わらず途方にくれてしまいました。

                        こんな事まで聞いてよいのか分かりませんが、可能ならご教授頂ければ助かります。

                         

                         

                        <!--  JavaScriptを使って現在の時刻を得て表示する

                        //-->

                        <span style="font-size : 12pt">

                        <p id="RealtimeClockArea2" >時刻表示中...</p>

                        </span>

                         

                         

                        <script type="text/javascript">

                        function set2fig(num) {

                          // 桁数が1桁だったら先頭に0を加えて2桁に調整する

                          var ret;

                          if( num < 10 ) { ret = "0" + num; }

                          else { ret = num; }

                          return ret;

                        }

                         

                         

                        function showClock2() {

                          var nowTime = new Date();

                          var nowHour = set2fig( nowTime.getHours() );

                          var nowMin = set2fig( nowTime.getMinutes() );

                          var nowSec = set2fig( nowTime.getSeconds() );

                          var msg = "⏰" + nowHour + "時" + nowMin + "分" + nowSec + "秒";

                          document.getElementById("RealtimeClockArea2").innerHTML = msg;

                        }

                        function test() {

                        <!--  //描画コンテキストの取得

                        //-->

                          var canvas = document.getElementById('RealtimeClockArea2');

                          if (canvas.getContext) {

                            var context = canvas.getContext('2d');

                        <!--

                            //ここに具体的な描画内容を指定する

                            //塗りスタイルに青色を指定した上で、

                            //左から10上から10の位置に幅100高さ100の塗りつぶしの四角形を描いて、

                            //左から20上から20の位置の幅50高さ50の四角形でクリアする

                        //-->

                            context.fillStyle = "rgb(0, 0, 255)";

                            context.fillRect(10,10,100,100);

                            context.clearRect(20,20,50,50);

                          }

                        }

                         

                         

                        setInterval('showClock2()',1000);

                        </script>