Language
ログイン
言語設定
X
English
日本語 [Japanese]
オープンデータを使ってアプリを作ろう
アプリケーションの作成と公開をサポートするサイト
お問い合わせ
HOME
チュートリアル
アプリ新規作成
アプリのFork
公開アプリ一覧
アプリ作品の情報
バス
宮崎県串間市
forked:よかバス時刻表App 0.5
fullscreen
大石康晴
路線データから、運行中の路線のみを抽出表示する
0
評価指数
いいね!
0
Loading...
このアプリ作品で使われているデータと同じ形式のデータを作成し、このアプリに適用することができます。
ひな形として使うファイルをリストから選択し、"Create Templete"をクリックして下さい。
アプリケーション
fullscreen
play
stop
reload
Play
JavaScript
CSS
HTML
概要
保存した実行結果
forked:よかバス時刻表App 0.5
jquery-1.7.1.min.js
http://maps.google.com/maps/api/js?v=3&sensor=false
gmaps.js
jquery-ui-1.8.18.min.js
forked:よかバス時刻表App 0.5
http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
forked:よかバス時刻表App 0.5
forked:よかバス時刻表App 0.5
forked:よかバス時刻表App 0.5
//グローバル変数 var map; var arrDay = new Array( 7,1,2,3,4,5,6 ); //読み込むファイル名 var BSLfile = "Kushima_Community_Bus_BusStopList"; var BRLfile = "Kushima_Community_Bus_RouteList"; //よくつかう連想配列のkey var LabelKey = "http://www.w3.org/2000/01/rdf-schema#label"; var DescriptionKey = "http://purl.org/dc/elements/1.1/description"; var FeeKey = "http://linkdata.org/property/rdf1s1008i#fee"; var TimetableKey = "http://linkdata.org/property/rdf1s1008i#TimetableRef"; var ServiceDayKey = "http://linkdata.org/property/rdf1s1008i#day_8601"; var LatitudeKey = "http://www.w3.org/2003/01/geo/wgs84_pos#lat"; var LongitudeKey = "http://www.w3.org/2003/01/geo/wgs84_pos#long"; $(document).ready(function(){ //今日の日付 var nowdate = new Date(); $("#today").text( nowdate.toLocaleString() ); //Datepicker $( "#datepicker" ).datepicker(); $( "#datepicker" ).datepicker( "option", "dateFormat", "yy/m/d" ); $( "#datepicker" ).datepicker( "setDate", nowdate ); var defaultDate = $( "#datepicker" ).datepicker( "getDate" ); $( "#datepicker" ).val( toLocaleString(defaultDate)); $( "#datepicker" ).change(function() { createActiveRouteTable(); }); //Google Map map = new GMaps({ div: '#map', zoom: 14, lat: 31.4646457, lng:131.218161 }); createActiveRouteTable(); }); //運行中の路線を描画 function createActiveRouteTable(){ //今日の日付 var nowdate = $( "#datepicker" ).datepicker( "getDate" ); var whatday = arrDay[nowdate.getDay()]; //呼び出すオープンデータが保存されているプロジェクトのID var workValue = "rdf1s1008i"; //バス停情報を呼び出すためのKeyを配列に保存 var BusStopKeyList = LinkData.getSubjects(workValue, BSLfile ); //取得できたか確認するために、配列の長さを吐き出させるテスト $("#test").append( BusStopKeyList.length + "戸 " ); //テーブルから行を消す $("#result_tbody").empty(); //マップをリセット map.removePolylines(); map.removeMarkers(); //路線情報を呼び出すためのKeyを配列に保存 var RouteList = LinkData.getSubjects(workValue, BRLfile ); var ActiveTimetableList=[];var ActiveRouteColor=[]; //路線情報を総当たり攻撃 $.each( RouteList , function(i){ //運行する曜日を取得 var check = LinkData.getObjects(workValue, BRLfile, RouteList[i], ServiceDayKey )[0]; if( check.indexOf( whatday ) >= 0 ){ //運行してない路線はここで除外 var Name = LinkData.getObjects(workValue, BRLfile, RouteList[i], LabelKey )[1]; var NameEN = LinkData.getObjects(workValue, BRLfile, RouteList[i], LabelKey )[2] var Bound = LinkData.getObjects(workValue, BRLfile, RouteList[i], DescriptionKey )[0]; var Fee = LinkData.getObjects(workValue, BRLfile, RouteList[i], FeeKey )[0]; var Timetable = LinkData.getObjects(workValue, BRLfile, RouteList[i], TimetableKey )[0]; var TimetableFile = LinkData.getObjects(workValue, BRLfile, RouteList[i], "http://linkdata.org/property/rdf1s1008i#TimetableFileRef" )[0]; var ThemeColor = LinkData.getObjects(workValue, BRLfile, RouteList[i], "http://linkdata.org/property/rdf1s1008i#ThemeColor")[0]; //運行している路線だけをテーブルに挿入 $("#result_tbody").append( '<tr style="border-left:15px solid '+ThemeColor+'"><td><ruby>'+ Name +'<rt>'+ NameEN+'</rt></ruby></td><td>'+ Bound +'</td><td>'+ Fee +'</td></tr>' ); ActiveTimetableList.push( [TimetableFile, Timetable] ); ActiveRouteColor.push( ThemeColor ); } //↑ここまで }); //運行している路線が通過するバス停を地図に表示(コードテスト) $.each(ActiveTimetableList, function(k){ var TimeTableFile = ActiveTimetableList[k][0]; var TimeTableID = ActiveTimetableList[k][1]; //初期化 var pathpoints =[]; var ActiveBusStopIDs=[]; var ActiveBusStopKey = LinkData.getSubjects(TimeTableFile, TimeTableID ); //バス停IDを抽出して配列に保存 $.each( ActiveBusStopKey , function(i){ //バス停IDを取得してpush ActiveBusStopIDs.push( LinkData.getObjects(TimeTableFile, TimeTableID, ActiveBusStopKey[i], "http://linkdata.org/property/"+TimeTableFile+"#refID" )[0] ); }); //重複を削除 ActiveBusStopIDs = unique(ActiveBusStopIDs); //マーカーを配置する $.each( ActiveBusStopIDs , function(i){ //バス停IDを取得 var ActiveBusStopID = ActiveBusStopIDs[i]; //バス停IDと対応する情報を取得 var Lat = LinkData.getObjects(workValue, BSLfile, "http://linkdata.org/resource/rdf1s1008i#"+ ActiveBusStopID, LatitudeKey )[0]; var Long = LinkData.getObjects(workValue, BSLfile, "http://linkdata.org/resource/rdf1s1008i#"+ ActiveBusStopID, LongitudeKey )[0]; var Title = LinkData.getObjects(workValue, BSLfile, "http://linkdata.org/resource/rdf1s1008i#"+ ActiveBusStopID, LabelKey )[1]; //Polyline用 pathpoints.push( [Lat,Long]); //地図に追加 map.addMarker({ lat: Lat, lng: Long, title: Title, infoWindow: { content: '<p>'+Title+'</p>' },/*HTML*/ icon: "https://chart.googleapis.com/chart?chst=d_simple_text_icon_left&chld=|30|000|bus|16|FFF|333" }); }); map.drawPolyline({ path: pathpoints, strokeColor: ActiveRouteColor[k], strokeOpacity: 0.6, strokeWeight: 6, }); }); } //重複を取り除く関数 function unique(array) { var storage = {}; var uniqueArray = []; var i,value; for ( i=0; i<array.length; i++) { value = array[i]; if (!(value in storage)) { storage[value] = true; uniqueArray.push(value); } } return uniqueArray; } //連想配列の要素数を返す function hashLength(array){ var len = 0; for(var key in array) { len++; } return len; } // 出力例:2008/5/1 2:00:00 function toLocaleString( date ) { return [ date.getFullYear(), date.getMonth() + 1, date.getDate() ].join( '/' ) + ' ' + date.toLocaleTimeString(); }
html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map { height: 100% }
<div class="container"> <h1>よかバス時刻表</h1> <h2>路線</h2> <p>今日は<time id="today"></time>です。</p> <p>日付: <input type="text" id="datepicker" size="30" /> 運行予定の路線は次の路線です</p> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>路線</th> <th>方面</th> <th>料金</th> </tr> </thead> <tbody id="result_tbody"> </tbody> </table> </div> <p class="text-danger">※都井岬線以外は年末年始の期間(12/29~1/3)は運休です。</p> <p class="text-info">※天候や交通事情により多少運行に遅れが生じることがあります。 予めご了承ください。</p> <p>正確な運行情報は<a href="http://www.city.kushima.miyazaki.jp/modules/contents01/index.php?content_id=22">公式サイト</a>を参照してください。</p> <h2>バス停</h2> <div id="map"></div> <p id="test"></p> </div>
実装済みの機能
当日運行する路線を抽出表示
バス停位置をGoogleMapに表示
サンプル程度に
jquery-1.7.1.min.js
http://maps.google.com/maps/api/js?v=3&sensor=false
gmaps.js
jquery-ui-1.8.18.min.js
このアプリをForkして新しいアプリを作る
ダウンロード
Fork元のアプリは更新されました.
>>see
アプリは更新されました.
>>see
ツイート
このアプリ作品をwebから探す
作者
メッセージ送信
大石康晴
Fork元のアプリ
talbot5300
's
よかバス時刻表App 0.5
実行回数
334
ウェブサイト
ライセンス
Fork count
0
作成日
2013年12月13日
最終更新日
2013年12月13日
Fork元のアプリ
よかバス時刻表App 0.5
作者: talbot5300
更新日: 2013年12月1日
578 回実行
"
" コミュニティへの投稿が完了しました。投稿したアプリ作品は、コミュニティ管理者によって承認されるとコミュニティに公開されます。
エントリー先のコミュニティとカテゴリ名を選択し、「エントリー」ボタンをクリックして下さい。
チュートリアル
アプリ作品の削除をする場合は削除をクリックしてください
送信者
名前
*
E-mail
*
件名
*
メッセージ
*
アクセス認証
*
送信
キャンセル
入力データ
関連アイデア
このアプリ作品で入力データとして使われているデータ作品のリストです。
チェックボックスの選択を変更すると、入力データを変更して実行することができます。
よかバス(福島方面)
作者: talbot5300
更新日: 2013年12月1日
901 ダウンロード
,
2 アプリケーション
BR495_Inbound_Weekday
BR495_Outbound_Weekday
BR501_North_Weekday
BR501_South_Weekday
よかバス(北方・大束方面)
作者: talbot5300
更新日: 2013年12月1日
1643 ダウンロード
,
2 アプリケーション
BR499_Inbound_Tuesday
BR499_Outbound_Tuesday
BR512_Inbound_Monday
BR512_Outbound_Monday
BR514_Inbound_Weekday
BR514_Outbound_Weekday
よかバス(都井方面)
作者: talbot5300
更新日: 2013年11月24日
1535 ダウンロード
,
2 アプリケーション
BR498_Inbound_Tuesday
BR498_Outbound_Tuesday
BR515_Inbound_Weekday
BR515_Inbound_Weekend
BR515_Outbound_Weekday
BR515_Outbound_Weekend
BR524_Inbound_Thursday
BR524_Outbound_Thursday
よかバス(本城方面)
作者: talbot5300
更新日: 2013年12月1日
553 ダウンロード
,
2 アプリケーション
BR488_Inbound_Weekday
BR488_Outbound_Weekday
よかバス路線リストおよび停留所位置
作者: talbot5300
更新日: 2013年12月1日
578 ダウンロード
,
2 アプリケーション
Kushima_Community_Bus_BusStopList
Kushima_Community_Bus_RouteList
自分のデータを入力する
このアプリを使ったアイデアはまだ公開されていません
アイデアを作成
ニュースフィード
linkdata.org に関するツイート