setInterval と function と配列の戻り値

setInterval と function を複数組み合わせるとどうなるか確認。

ついでに、function の戻り値を配列で受け取って処理してみた。

<HTML>
<HEAD><TITLE>練習</TITLE></HEAD>
<BODY>
<FORM name="timeform">
現在時刻<BR>
<INPUT name="timetext1" type="text" size="40"><BR>
<INPUT name="timetext2" type="text" size="40"><BR>
</FORM>
<SCRIPT>

setInterval("displayOne()",1000);
setInterval("displayTwo()",1000);

function displayOne() {
  var nowData = getNowData();
  document.timeform.timetext1.value = nowData[0] + "年" + nowData[1] + "月" + nowData[2] + "日(" + nowData[3] + ")" + nowData[4] + "時" + nowData[5] + "分" + nowData[6] + "秒";
}

function displayTwo() {
  var nowData = getNowData();
  document.timeform.timetext2.value = nowData[0] + "/" + setTwoDigit(nowData[1]) + "/" + setTwoDigit(nowData[2]) + "(" + nowData[3] + ")" + setTwoDigit(nowData[4]) + ":" + setTwoDigit(nowData[5]) + ":" + setTwoDigit(nowData[6]);
}

function getNowData() {
  var nowData = new Date();
  var yearStr = nowData.getFullYear();
  var monthStr = nowData.getMonth() + 1;
  var dateStr = nowData.getDate();
  var weekNum = nowData.getDay();
  var weekName = ["日","月","火","水","木","金","土"];
  var hourStr = nowData.getHours();
  var minStr = nowData.getMinutes();
  var secStr = nowData.getSeconds();
  var res = [yearStr, monthStr, dateStr, weekName[weekNum], hourStr, minStr, secStr];
  return res;
}

function setTwoDigit(num) {
  var res = num;
  if(res < 10) {
    res = "0" + res;
  }
  return res;
}
</SCRIPT>
</BODY>
</HTML>


結果は次のような感じ。

現在時刻


リアルタイムで時刻表示

JavaScriptにてリアルタイムで時刻表示を行う場合、どうやらFORMタグとINPUTタグを使うようだ。

<HTML>
<HEAD><TITLE>練習</TITLE></HEAD>
<BODY>
<FORM name="timeform">
現在時刻
<INPUT name="timetext" type="text" size="40">
</FORM>
<SCRIPT>
setInterval(function() {
  var nowData = new Date();
  var yearStr = nowData.getFullYear();
  var monthStr = nowData.getMonth() + 1;
  var dateStr = nowData.getDate();
  var weekNum = nowData.getDay();
  var weekName = ["日","月","火","水","木","金","土"];
  var hourStr = nowData.getHours();
  var minStr = nowData.getMinutes();
  var secStr = nowData.getSeconds();
  document.timeform.timetext.value = yearStr + "年" + monthStr + "月" + dateStr + "日(" + weekName[weekNum] + ")" + setTwoDigit(hourStr) + ":" + setTwoDigit(minStr) + ":" + setTwoDigit(secStr);
}, 1000);

function setTwoDigit(num) {
  var res = num;
  if(res < 10) {
    res = "0" + res;
  }
  return res;
}
</SCRIPT>
</BODY>
</HTML>


結果はこんな感じ。

現在時刻


FORMタグのname属性値であるtimeformと、INPUTタグのname属性値であるtimetextを「.」でつなげ、valueに対して値を代入すればいいらしい。

「setInterval(実行する内容,実行する間隔);」で、指定した「実行する内容」を「実行する間隔(ミリ秒=1/1000秒)」で繰り返してくれるらしい。今回は1000ミリ秒(1秒)に1回、現在時刻の更新をさせてみた。

次のように実行内容を関数として書き出してもよいらしい。


<HTML>
<HEAD><TITLE>練習</TITLE></HEAD>
<BODY>
<FORM name="timeform">
現在時刻
<INPUT name="timetext" type="text" size="40">
</FORM>
<SCRIPT>
setInterval("displayTime()",1000);

function displayTime() {
  var nowData = new Date();
  var yearStr = nowData.getFullYear();
  var monthStr = nowData.getMonth() + 1;
  var dateStr = nowData.getDate();
  var weekNum = nowData.getDay();
  var weekName = ["日","月","火","水","木","金","土"];
  var hourStr = nowData.getHours();
  var minStr = nowData.getMinutes();
  var secStr = nowData.getSeconds();
  document.timeform.timetext.value = yearStr + "年" + monthStr + "月" + dateStr + "日(" + weekName[weekNum] + ")" + setTwoDigit(hourStr) + ":" + setTwoDigit(minStr) + ":" + setTwoDigit(secStr);
}

function setTwoDigit(num) {
  var res = num;
  if(res < 10) {
    res = "0" + res;
  }
  return res;
}
</SCRIPT>
</BODY>
</HTML>


結果は…当然変わらない。

現在時刻


実行内容を「displayTime()」という関数名で定義して、「setInterval("実行する関数名",実行する間隔);」と書いて実行させる。

「setInterval」は、関数名の前後を「"」で囲むこと、だそうだ。

プログラムが動かない場所を特定する方法

いつものことだが、ちょくちょくプログラム入力中に間違ってしまう。

Javaなどはコンパイル時に何行目がこうだから悪いだの言うし、他の言語も実行中に止まったところを教えてくれるが、JavaScriptはスネてしまい(?)プログラムが実行できなくなった先を表示しないため、どこが悪いのかさっぱりわからない。

そこで、ここまでは動いているんじゃないかな?というところに、以下の1行を入れてみた。

document.write("ok");


「ok」と表示されれば、そこまでは無事動いている、ということが分かる。もっとも、その先のどこでどのように間違っているか、少しずつずらして調べていくので時間がかかるが…。

もしも長いプログラムになったら、きっと大変なんだろうな。

自作関数内で止まった時は、さっぱり気づかず苦労した。

JavaScriptのデバッグが捗る!コンソールにログを出力する方法」という記事を発見。Chromeでのコンソールの使い方と、コンソールへの出力方法がまとめられている。

Internet Explorerでも、[F12]キーを押して「コンソール」をクリックすれば準備完了。

…あとは、これを使いこなせるだろうか?

JavaScriptで日時データ表示

次に、JavaScriptで日時データの表示に挑戦。


<HTML>
<HEAD><TITLE>練習</TITLE></HEAD>
<BODY>
練習<BR>
<SCRIPT>
var nowData = new Date();
var yearStr = nowData.getFullYear();
var monthStr = nowData.getMonth() + 1;
var dateStr = nowData.getDate();
var weekNum = nowData.getDay();
var weekName = ["日","月","火","水","木","金","土"];
var hourStr = nowData.getHours();
var minStr = nowData.getMinutes();
var secStr = nowData.getSeconds();
document.write(yearStr + "年" + monthStr + "月" + dateStr + "日(" + weekName[weekNum] + ")" + hourStr + "時" + minStr + "分" + secStr + "秒");
</SCRIPT>
</BODY>
</HTML>


「.getMonth()」で月数を得たときに「+1」するのは、月が0〜11で考えられているため。

また、時間、分、秒を求めるときは、それぞれ最後に「s」がつくので忘れずに。

結果は以下の通り。

練習


さらに、赤字の行を追加。

<HTML>
<HEAD><TITLE>練習</TITLE></HEAD>
<BODY>
練習<BR>
<SCRIPT>
var nowData = new Date();
var yearStr = nowData.getFullYear();
var monthStr = nowData.getMonth() + 1;
var dateStr = nowData.getDate();
var weekNum = nowData.getDay();
var weekName = ["日","月","火","水","木","金","土"];
var hourStr = nowData.getHours();
var minStr = nowData.getMinutes();
var secStr = nowData.getSeconds();
document.write(yearStr + "年" + monthStr + "月" + dateStr + "日(" + weekName[weekNum] + ")" + hourStr + "時" + minStr + "分" + secStr + "秒");
document.write("<BR>");
var weekEName = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
document.write(yearStr + "/" + monthStr + "/" + dateStr + "(" + weekEName[weekNum] + ")" + hourStr + ":" + minStr + ":" + secStr);

</SCRIPT>
</BODY>
</HTML>


結果はこんな感じ。

練習


うーん…秒が一桁の時、「:」でつないで表示する際には二桁で表示させたい。できれば、時や分も。

functionを使えばよさそう。ということで、さっそく赤字を追加して確認。

<HTML>
<HEAD><TITLE>練習</TITLE></HEAD>
<BODY>
練習<BR>
<SCRIPT>
var nowData = new Date();
var yearStr = nowData.getFullYear();
var monthStr = nowData.getMonth() + 1;
var dateStr = nowData.getDate();
var weekNum = nowData.getDay();
var weekName = ["日","月","火","水","木","金","土"];
var hourStr = nowData.getHours();
var minStr = nowData.getMinutes();
var secStr = nowData.getSeconds();
document.write(yearStr + "年" + monthStr + "月" + dateStr + "日(" + weekName[weekNum] + ")" + hourStr + "時" + minStr + "分" + secStr + "秒");
document.write("<BR>");
var weekEName = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
document.write(yearStr + "/" + monthStr + "/" + dateStr + "(" + weekEName[weekNum] + ")" + setTwoDigit(hourStr) + ":" + setTwoDigit(minStr) + ":" + setTwoDigit(secStr));

function setTwoDigit(num) {
  var res = num;
  if(res < 10) {
    res = "0" + res;
  }
  return res;
}

</SCRIPT>
</BODY>
</HTML>


結果は次の通り。

練習


満足。
(^v^)

文字コードの設定

さっそくJavaScriptの練習をしてみた。

超シンプルに、Windowsのメモ帳で次のように書いた。

<HTML>
<HEAD>
<TITLE>練習</TITLE>
</HEAD>
<BODY>
練習<BR>
<SCRIPT>
alert("OK");
</SCRIPT>
</BODY>
</HTML>

名前を付けて保存するとき、ファイルの種類を「すべてのファイル」にして、「practice.html」という名前で保存した。

WindowsでこのファイルをダブルクリックしてInternet Explorerで開くと、「練習」と画面に表示され、アラートに「OK」の文字が表示された。どうやら成功だ。

このファイルを共有フォルダに置き、iPadでFileExplorerを起動してこのファイルを開くと…ん?「練習」という漢字が文字化けしている!

いろいろ調べたところ、どうやら文字コードを明示する必要があるらしい。

まずは、以下のように赤字部分を追加。

いろいろ調べたところ、メモ帳標準の「ANSI」のままではiOSで表示する際に文字化けすることがわかった。

<HTML>
<HEAD>
<TITLE>練習</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
</HEAD>
<BODY>
練習<BR>
<SCRIPT>
alert("OK");
</SCRIPT>
</BODY>
</HTML>

そしてそこで、再びメモ帳で「名前を付けて保存」を行い、ファイル名はそのまま、ファイルの種類は「すべてのファイル」、文字コードを「UTF-8」に変更して保存、上書き確認に「はい」と答える。

iPadのFileExplorerは、一度その場所を開くとファイルが更新されても反映されないので、ひとまず別の場所にアクセスしてから、あるいは一つ上のフォルダに戻ってから、再びHTMLファイルのある場所を開き、目的のHTMLファイルにアクセスしなければならない。

今度はちゃんと「練習」と表示された。

<8/18追記>
どうやら、METAタグで明示しなくても、単純にUTF-8で保存するだけでよいようだ。
無事iPadでも文字化けすることなく表示するようになった。

iOSで動くプログラムをつくりたい!JavaScriptに挑戦

最近動きが悪くなってきたiPad第三世代だが、それでもまだまだ仕事で活躍してくれる。

そんな中、大それたことはできなくてよいがちょっとした機能がほしい、と思うことがよくある。

昔から多少のプログラム言語は扱ってきたがバリバリ作れるほどではないし、今からガッツリとプログラムの勉強をする時間はなかなかとれない。

比較的簡単にできて、元手がかからず、できればWindowsやLinuxなどの他のOSでも利用したい。

そんなことを考えているうちに、一つのプログラム言語を思いついた。

それがJavaScriptだ。



仕事で必要だったこともあり、無料アプリ大好きな自分が使用している数少ない有料アプリの一つ「FileExplorer」(今日の時点では600円)。

無料版の「FileExplorer Free」もある。

有料版と無料版の違いは、「iPhone・iPadからファイルサーバ上のファイルを開く」によると、次の通り。

  • 無料版は接続先が1つしか保存できない

  • 有料版は複数の外部サービス(WebDAV・Dropbox・Google Drive・OneDrive・box)に対応している


  • さらに同サイトでは、アプリ内課金によるアップグレードと有料版の購入との違いについても書かれている。

    接続先の保存が1か所でもよく、外部サービスを利用しないのなら、無料版でもよいかも。

    無料版の使い方について書かれた「【これは便利!】第3回 FileExplorerアプリ を利用して iPhoneから無線LANルータ経由でNASへアクセスする」や、有料版の使い方について書かれた「クラウドファイルの一括管理ができる!FileExplorerが便利すぎた「2014年版」」は参考になる。



    WindowsPCでキーボードを使ってJavaScript入りHTMLファイルを作成し、iPadでFileExplorerを使ってWindowsPCの共有フォルダからJavaScript入りHTMLファイルを得れば、作るのも楽だし複数のOSで動作確認もできる。

    JavaScriptによるプログラミングは、iPadではFileExplorerでHTMLファイルとして管理できるため、他のアプリと違ってインストール・アンインストールが不要な点もよい。

    昔覚えたHTMLと組み合わせればなんとかなりそうだ。



    さっそくJavaScriptについて調べると、まずはJavaScriptが動作するか確認が必要とのこと。

    あなたのブラウザでJavaScriptを有効にする方法」で、現時点でJavaScriptが有効かどうか、自分のブラウザのJavaScriptの有効化する方法が分かる。

    WindowsPC、iPad、Android携帯電話、いずれもJavaScriptは有効になっていた。

    また、「Windows標準のテキストエディタ「メモ帳」を使いこなそう」でメモ帳の使い方を、「JavaScript入門」でJavaScriptを、それぞれお勉強。

    なんとかなる…かな?



    ちなみに、「iPadだけでアプリ開発!アプリ&環境まとめ」にてiPadでJavaScriptを作成する方法も見つけたが、やはりキーボードで入力したいし、これまでに書いてきたようにiPadの動きも悪いし…ということで、今回はパス。

    マキノ高原キャンプ場の小川は気持ちいい

    今年は、「マキノ高原キャンプ場」へ行ってきた。

    ここでは、林間、高原、広場、展望、川、森の隠れ家と、6か所からサイトが選べる。

    やはり暑い8月なので、直射日光を避けることができるよう林間を選択した。

    すぐ隣には膝下までの水位の小川が流れていた。

    我が家の愛犬チワワは水が嫌いだが、飼い主に導かれるまま頑張って川に足先がつかるところまでは入ることができた。

    のんびりとした時間を過ごすことができた…が、とにかく暑かった。

    ここの標高は300mだそうで、他よりは気温が3〜5度低いようだが、全国で35度を超える日が続いていたこともあり、おそらく行った日も30度を超えていたものと思われる。

    そんな中、テニスコートを借りて2時間遊んでみた。
    (^-^;

    汗が止まらない。ドリンクはすぐ空になり、途中で買い足した。

    テニスコートはたくさんあったが、自分たち以外はだれも使用しておらず、おそらくこんな暑い日に借りたのは自分たちくらいではなかろうか…。

    ちなみに、テニスに参加しなかった仲間がチワワとともにテントでお留守番だったが、日が上がれば林間でも日が当たり、動く木陰を追いかけていても暑かったらしい。

    夜にはノコギリクワガタやコクワガタをゲット。

    網や虫かごを持つ少年や親だけでなく、ガッツリ虫採りの格好をした大人も何人も見かけた。

    そのガッツリ派を観察していると、暗い木々の方はほとんどチェックすることなく、灯りがついている炊事棟を中心に回っているようだった。

    持っている網を動かしているところを見ると、どうやら蛍光灯付近に止まっているターゲットを捕獲していたようだ。

    蜜と思しきものが出ている個所を昼間に見つけて、夜に何回か回って見たが、そこにいたのはゴキブリやカミキリなど、他の虫ばかりだった。

    羽化したばかりのセミや、超巨大なナメクジも見つけた。

    二晩とも、みんなですぐ近くの温泉へ行った。

    当然他の利用者も同じことを考えているようで、閉館1時間前に行くと、中は人であふれかえっていた。

    2日目の夕方、川遊びから戻ると、おそらく多くの人がそこから入って来たであろう通路入口に2台の車が停まっていた。

    その入り口から入り、そこから出ようとして車の向きを変えておいたのに、帰りの出口がふさがれてしまった。

    3日目の朝、こちらも向こうも片付けに入っていたが、その2台はなかなか出ようとしない。

    正午までに出ればよいが、5分前になっても向こうは動く気配がなく、のんびり片付けを続けているようだった。

    幸い周囲の車が別の出口から出て行ったようでスペース的にゆとりができていたこともあり、こちらも別ルートを探して出発した。

    確かにその日は利用者も多かったが、場所がまだあるにもかかわらず通路入口をふさぐのはいかがなものか。

    思いやりの心を大切にしよう、と改めて思った。

    iPad第三世代をiOS8.4.1にアップデートして…

    以前のアップデート後から、起動直後にリンゴマークが出て約1〜2分は使い物にならないiPad。

    慣れたうえそろそろあきらめもつき、PC同様のんびり起動を待って使っている。

    仕事で使うことを考えると、さっと起動して使える新しいタブレットの購入を考えるべきか、と悩みながらも、iOS8.4.1が出ていることに気付いたので、淡い期待を込めてアップデートしてみた。

    アップデート直後、前回とは白黒が逆転し、黒背景・白リンゴが長らく表示され、通常の画面が出てもすぐにまた白リンゴが表示される。

    念のため再起動してみると、なぜか再びアップグレードのメッセージが表示され、実行すると今度はまた白背景・黒リンゴが表示されるようになった。

    しかも、この状態のときに画面をタップしていないと、すぐにスリープに入ってしまう。

    結論。アップデートしても何も変わらない。淡い期待は、当然の如く打ち砕かれた。

    スリープからの復帰後に数回白背景・黒リンゴの表示が繰り返された後で「DR.メモリ」を使ってみると、メモリの空きはしっかり確保されていた。

    現状は、ボタンやカバーによりスリープから復帰すると白背景・黒リンゴが3〜4回表示された上で使えるようになる。

    リンゴが表示されている間にホームボタンを連打したり画面をタップし続けたりしていても、再びスリープに入ることがある。

    複数のアプリを起動したり、アプリの切り替えを行おうとするとリンゴが表示されるのも、以前と変わりない。

    調べたところ、今回のアップデートはApple Music関連のバグ修正らしい。

    Apple、iOS 8.4.1をリリース―Apple Musicのバグ多数を修正 (TechCrunch)

    やはり、新しいタブレットを買うか…。

    iPadの不具合を解消

    第三世代のiPadを購入して数年が経った。

    先日、iOS8.3にアップデートしたところ、急に調子が悪くなった。

    具体的には、スリープから復旧したとき、別のアプリを起動したときなどに、白地に黒リンゴが表示されて、しばらく待たなくてはいけないようになった。


    iPad Black Apple


    あちこち調べたところ、こんな記事を見つけた。

    iOS8アップデートで重いiPadをサクサク動作に戻す方法を試した!Safariが軽くなったよ

    書いてあることをとりあえず行ったが、あまり改善されない。

    さらに調べてみると、どうやらメモリの解放がうまくいっていないかもしれないという記事に辿り着いた。

    動作が重いiPhone・iPadを軽くする5つの対処方法

    とりあえず再起動だ!と、スリープボタンとホームボタンを長押ししてみたが、やはり白地に黒リンゴは表示され続けた。

    そこで、「iMemoryGraph」というアプリをいれてみたが、広告削除のアドオン(現在120円)を入れないとメモリの解放機能はつかないらしい。

    すぐにアンインストールした。

    直接AppStoreで検索したところ、「DR.メモリ」なるアプリを発見、インストールして、「最適化」ボタンをタップしたところ、不具合はすっきり解消。

    また快適で楽しいiPad生活が送れるようになり、とてもうれしい。
    (^v^)

    <2015/05/24追記>
    快適…と思っていたが、数日後には再びリンゴマークの表示が始まった。

    どうやらスリープに入るだけでメモリがいっぱいになるようで、毎回「DR.メモリ」で使用メモリ領域を開放しなければならない。

    一応、いろいろなアプリの自動通信ものを切ってみたが、あまり変化はない。

    iCloudへの自動ログインをやめるとすっきり、という話も見つかったが、自動バックアップをとっているようなので、自動ログインを切ることがためらわれる。

    とりあえず、起動後1分ほどリンゴマーク、そしてDR.メモリで開放すれば通常通り利用可能。

    第三世代iPadには、もはやiOS8.3は重いのかもしれない。

    さらにあちこち検索したところ困っている方々も多いようで、現状では今後のアップデートに期待するしかないようだ。

    さくさく使えて便利なiPadだったが、iOS9になる頃にはアップデートをあきらめざるをえないのかもしれない。

    以前、iPadからHDMIでテレビに画像を送れると知り、第三世代iPad対応のとあるメーカーのケーブルを購入したが、iOS8になっていたためか、そのケーブルは使えなくなっていた。

    iOSをアップグレード・アップデートしないと利用できないアプリがあるため仕方なく行ってきたが、そろそろ限界かもしれない。

    使い勝手がよく、長らく重宝してきただけに、この動きの悪さ、とても残念である。

    Ubuntuでビデオサーバを作ってみた

    幾分年代物になりつつある我が家のHITACHI製のテレビWooo。

    「Woooリンク」なるものがあり、有線LANに接続すれば、ネットワーク上の他のテレビなどに保存されたビデオデータも再生できることは知っていた。

    この機能をDigital Living Network Alliance (DLNA) というらしい。

    ウィキペディア「Digital Living Network Alliance」

    で、Ubuntuをサーバにして、テレビからUbuntu内のビデオを見ることができるようになる、という記事を見つけたので挑戦してみた。

    Ubuntu (Ubuntu-Studio) 12.04をDLNAホームサーバーに仕立てる

    これで、デジタルビデオカメラで撮影した動画をテレビで見ることができ、パソコンのディスプレイよりも大きく、大勢で楽しめると考えたからだ。

    さっそく「mediatomb」をUbuntuにインストールしてみた。

    結論から言うと、目的は達成されなかった。

    設定を変更することで写真は見られたが、HITACHIのWoooでは動画の保存形式が特定のものでないと再生できないらしい。

    一応、リアルタイムで動画の形式を変換するフィルタを用意する方法が別のサイトで書かれていたが、我が家のWoooでは動かなかった。

    MediaTombで東芝レグザからmp4動画を視聴(リアルタイムエンコード)

    サーバのスペックが弱いためだろうか?
    機会があればまた挑戦したい。


    calendar

    S M T W T F S
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031     
    << July 2017 >>

    selected entries

    categories

    archives

    links

    profile

    書いた記事数:84 最後に更新した日:2016/09/11

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM