バスのWebアプリ

ということで,バスのWEBアプリが一通りできました.

ソースは公開しません〜(関連するテクニックは順次公開)

とりあえず、自力で作ってみてください.

画像は使わずCSSでレイアウトしています

bus

HTML5とjavaScriptで作成していますので,このままスマホアプリも作成できます.(最近のスマホアプリはHTML5で開発できるようになっています)

コピペ5分ほどでAndroidで実行可能に,,,(ビルドにはMonacaを使っています)

もう3分ほどで.apk(Androidのアプリファイル)もビルドできました.

android

この程度であれば,開発コストはHTML5の方が安いかもです.

document.getElementByIdでnullのエラー

3日いろいろなサイトをあたってようやく解決.

現象:document.getElementById(“dia”).innerHTML = hoge;

で,JavaScriptの書き方で反映されないときがある.

自分用時刻表アプリを書いています.出発までの残時間はリアルタイムで反映され便利です.問題は,終バスが出た後のに「本日終了〜」みたいな文字を入れたいのですが,それが表示されずエラーが出ます.

出るエラーは

TypeError: document.getElementById(…) is null

で,この意味はどうやら

「おまえ,そんなID無いよボケ!!」

みたい.

でもHTML上にはちゃんと,

<div.time id=”dia”><p>aaa</p></div>

があります.

で,3日間いろいろなサイトを当たりましたが,どうも実行順の問題のようです.

HTML書類は行の上から実行されますが,HTMLの最後に書かれている<DIV>タグを読み込む前にID検索しようとして,無いと言われるみたい.

解決方法は,HTML全部読み込んだ後にID検索すればいいじゃん!ってことなんですが,ここにも罠が.

</script>の直前にgetDocument~が入っているfucnctionのshowTime()を実行させようと,

window.onload=showTime();

と書いてもエラーが.

何でも,この場合は

window.onload=showTime;

()無しで実行するらしい.

はぁ〜?何でしょこれ?

()をつけると関数を実行,()をつけないと関数を参照という意味らしいですが,,見に行くって,,ねぇ

でもこれでうまく行きそう.

 

平日か土日かを判定させる(時刻表用)

バスの時刻を表示させる場合は,今日のダイヤが何かを判定する必要があります.

ダイヤは5種あります

  • Aダイヤ(平日,講義日)
  • Bダイヤ(平日の集中講義や補講日)
  • Cダイヤ(土曜日)
  • 臨時(定期試験,入試,学祭など)
  • 運休日(日曜,祝日,大学の休みの日)

そのプログラムを考え,どのタイミングで判定させると効率が良いか考えてみましょう.例えば先に土日の判定をするとそこで別の処理へ行き,臨時ダイヤの土曜日のif文までたどりつけない可能性があります.

一般の電車の時刻表などは,元旦と祝日が例外日で,後は平日か土日かの処理です.ただし運行会社によっては,土曜と日曜のダイヤが異なることもあるようですので注意してください.

<!DOCTYPE html>
<html>
<head>
<title>Byou</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Byou</h1>


<script type="text/javascript">
setInterval(myYoubi, 100);//myByouってfucitonを100ミリ秒おきに実行してね
var kyouYoubi;
//----曜日だけとるなら100ミリごとにやらなくてもいいですが,,

function myYoubi() {
myDate = new Date();//日付をとってきてmyDateにいれる.このfunctionの外に書くと1回しか日付をとってこないので,秒が更新されない
myYou = myDate.getDay();//myDateの中から曜日だけとりだす.getDay()がその機能.0が日曜,6が土曜日/ちな,日付はgetDate()らしい

//------ifをつかった条件分岐はここから------
if(myYou == 0 && myYou == 6){//もしもmyYouが0(日曜)と等しく,かつ(&&)6(土曜)と等しければ,
document.bgColor = "peru";//背景色を赤にせよ
kyouYoubi = "今日は土日のダイヤです"

//--土日の時の次のバス時間表示プログラムをここに

}
else{//それ以外の時は
document.bgColor = "powderblue";//背景色を白にせよ
kyouYoubi = "今日は平日のダイヤです"

//--平日の時の次のバス時間表示プログラムをここに

}
//----ifはここまで-------

//---ここは文字表示のシステム
document.getElementById("myYou_hyouji").innerHTML = kyouYoubi;//myYou_hyoujiというIDを検索してkyouYoubiを代入しなさい
//-----文字表示ここまで------

}//myByouのfunctionはここまで
</script>

<div id="myYou_hyouji"></div>
</body>
</html>

 

秒で背景色を変更する

なんかね,document.writeはあんまし使わんほうがいいかもです.

<!DOCTYPE html>
<html>
<head>
<title>Byou</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Byou</h1>


<script type="text/javascript">
setInterval(myByou, 100);//myByouってfucitonを100ミリ秒おきに実行してね
//----

function myByou() {
myDate = new Date();//日付をとってきてmyDateにいれる.このfunctionの外に書くと1回しか日付をとってこないので,秒が更新されない
mySeconds = myDate.getSeconds();//myDateの中から秒だけとりだす.getSeconds()がその機能

//------ifをつかった条件分岐はここから------
if(mySeconds > 44 && mySeconds < 60){//もしもmySecondsが44より大きく,かつ(&&)60より小さければ,
document.bgColor = "#ff0000";//背景色を赤にせよ
}
else{//それ以外の時は
document.bgColor = "#ffffff";//背景色を白にせよ
}
//----ifはここまで-------

//---ここは文字表示のシステム
document.getElementById("myByou_hyouji").innerHTML = mySeconds;//myByou_hyoujiというIDを検索してmySecondsを代入しなさい
//-----文字表示ここまで------

}//myByouのfunctionはここまで
</script>

<div id="myByou_hyouji"></div>
</body>
</html>

 

お天気情報をよそからもってくる

天気情報をどう使えばよいかとの質問がありましたので,走り書き

各種サイトで天気情報が公開されています.

今回は非商用ですので,無料で使えるサービスを利用して天気を表示してみましょう.

なお、こうしたサービスの多くは個人での利用を前提としており、アプリ化して配布するなど、頻繁なアクセスをすり前提ではありませんので注意してください。
また、商用利用可能であっても、頻繁にアクセスしないようキャッシュを利用することがマナーとされています。

まず,こういうサービスのことをAPI(Application Programming Interface)と呼びます.ですので,Googleなどで”天気 API”などと検索するといくつか無料サービスが出てきます.このほかにも地図や交通情報などのAPIもあります.これらは”無料 API”で検索してみてください.

このほかにも”オープンデータ”などを利用してみても良いでしょう.

サンプルにはopenweathemapのAPIを利用しました.

次のHTMLをコピペしてブラウザで開いてみてください.(新JavaScript例文辞典さんの例文を利用しています)

<!DOCTYPE html>
<html>
<head>
<title>おてんき</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- metaタグで スマホの挙動を制限している -->
</head>
<body>
<h1>てんき</h1>

<script type="text/javascript">


httpObj = new XMLHttpRequest();
httpObj.open("get", "http://api.openweathermap.org/data/2.5/weather?q=Nagoya,jp", true);
httpObj.onload = function(){
	var myData = JSON.parse(this.responseText);
	var txt = "";
	for (var i=0; i<myData.weather.length; i++){
		txt = txt + myData.weather[i].description + "  " + myData.weather[i].main+"<br>" + "<img src=http://openweathermap.org/img/w/" + myData.weather[i].icon + ".png>";
	}
	document.getElementById("result").innerHTML = txt;
	

}
httpObj.send(null);


</script>

<div id="result"></div>
<!-- このDIVのIDを探してここに21行目で作成したHTMLをいれちゃう -->

</body>
</html>

解説はいずれ

名古屋の天気情報が沢山出るのですが,そのうち,天気の記号とアイコンを引き出しています.

実際のデータは

http://api.openweathermap.org/data/2.5/weather?q=Nagoya,jp

です.この結果(JSON)から該当する部分を抜き出して,HTMLに入れています.