おやじプログラマー日記: javascript

【PHP】HTMLのリンクにダウンロード処理を設定する方法

HTMLの a タグのリンク先にPHPプログラムを指定してファイルをダウンロードする方法ですが、リンクファイルの引数を GET 指定する様にします。

HTMLのソースは以下の様にします。リンクファイルの引数を file として、その値にファイル名を直接指定しています。
呼出すPHPプログラムは download.php とします。

PHPプログラムは以下の通りです。いろんなサイトを見ると、出力ヘッダのタイプは application/force-download でOKな様です。
ファイル出力は readfile() で行います。

投稿時刻 14:39 javascript, PHP | 個別ページ | コメント (0) | トラックバック (0)

【Javascript】:IEではデフォルト値を持った関数では動作しない

Javascriptで作成した関数でデフォルト値を持つものを作成してデバッグしていました。関数の例として以下の様な感じです。

この関数を「a」タグのクリックイベントでコールしたりしていたのですが、 FireFox や Chrome では問題無く動くのですが、 IEでは全く動作しません。

どうも、IEではデフォルト指定ができない様です。

以下の様にして、引数が宣言されているかを確認するしかない様です。

投稿時刻 17:37 javascript | 個別ページ | コメント (0) | トラックバック (0)

【jQuery】ラベルで囲まれたチェックボックスで、ラベルのclickイベントが2回実行される

以下の様なソースで、チェックボックスもしくはラベルをクリックしたときにclickイベントが発生することを期待してHTMLに書いたのですが、ラベル部分をclickしたとき2回clickイベントが実行されてしまいます。但し、チェックボックスの四角の部分をclickだと1回しかclickイベントが発生しません。

ラベル部分をclickした時に1回目のイベントが発生し、それと共にチェックボックスがclickされたとされ、その後、親要素に対してラベルのclickが伝搬し2回目のイベントが発生する様です。 2回目の親要素のイベントを発生させない様にするには、親要素への伝播をキャンセルする【stopPropagation】を用います。上のソースの様に、チェックボックスのclickイベントで【stopPropagation】をコールしてやれば、親へのイベントは発生しなくなります。

JavaScriptの理解を深めた人がさらにもう一歩先に進むための本

投稿時刻 11:02 javascript | 個別ページ | コメント (0) | トラックバック (0)

ソーシャルブックマーク統合サービス「Add Clips」は終了！

このブログですが最近開くのが遅いと感じていたのですが、原因がわかりました。
ソーシャルブックマーク統合サービスの「Add Clips」を記事に貼っていたのですが、このサービスが2016年3月31日で終了していました。

以下のスクリプトを貼っていたのですが、早速削除しました。
<script type="text/javascript">  </script> <script charset="utf-8" src=" http://js.addclips.org/v2/addclips.js" type="text/javascript"> </script>

投稿時刻 14:05 javascript, パソコン・インターネット | 個別ページ | コメント (0) | トラックバック (0)

ブログにブログ内検索窓を付けてみました

このブログに、ブログ内の検索窓が無かったので右側のバナーに追加してみました。
以下の、HTMLソースをタイプリストの備考欄に設定し、バナーの右側に表示設定を行います。

注意するのは3行目のvalueの値ですが、ブログのアドレスの「http://」を省いたものにします。

<form action="http://www.google.com/search"> <input type="hidden" name="hl" value="ja"> <input type="hidden" name="hq" value="inurl:rnk.mitelog.jp/"> <input type="hidden" name="ie" value="utf-8"> <input type="hidden" name="oe" value="utf-8"> <input type="hidden" name="filter" value="0"> <input type="text" name="q" size="23" maxlength="30" value=""> <input type="submit" name="btnG" value="ブログ内検索"> </form>

以下は、「新規タイプリスト作成」でタイプリストに新規のものを作り、メモリストのタイトルを「検索」としてラベルには何も設定せず、備考欄に上のHTMLソースを設定します。

その後で、ブログのデザインの表示項目を選択で、表示チェックを行います。

更に、ブログのデザインの並べ方を変更で、検索窓の位置を変更します。

投稿時刻 11:49 javascript, パソコン・インターネット | 個別ページ | コメント (0) | トラックバック (0)

ASP.NETのカレンダー・ポップアップのカレンダーが右側に間延びした感じで表示される場合の対応

ASP.NETのajaxToolkitのCalendarExtenderを設置したのですが、実際に起動してみるとカレンダーボタンをクリックした時に以下の図の様に日付の部分が横に間延びした感じになりました。

<asp:textbox id="TextDate1" runat="server" width="68px"></asp:textbox> <asp:imagebutton id="ImageButton1" runat="server" imageurl="~/common_img/Calendar_scheduleHS.png" onclientclick="return false;"> <ajaxtoolkit:calendarextender id="CalendarExtender1" runat="server" format="yyyy/MM/dd" targetcontrolid="TextDate1" popupbuttonid="ImageButton1" daysmodetitleformat="yyyy/MM" todaysdateformat="yyyy/MM/dd"> </ajaxtoolkit:calendarextender> </asp:imagebutton> 他のページでは問題なかったのですが、とあるページにカレンダーを設置したらこの様なことになって悩んでいたのですが、以下の方法で解決しました。

カレンダーはTABLE要素で描画されるので、TABLEのTDの padding , border がCSSで既に定義されているとそれの影響のため、この様なことが起きます。

それで、以下のように強制的にカレンダーのTABLE,TDを定義すれば防げます。
.ajax__calendar_container TABLE { width:170px !important; padding:0px !important; margin:0px !important; border:0px !important; font-size:11px !important; } .ajax__calendar_container TD { padding:0px !important; margin:0px !important; font-size:11px !important; }

投稿時刻 16:52 javascript, VB.NET | 個別ページ | コメント (0) | トラックバック (0)

「GoogleMap API V3」の使い方その11（さらにInfowindow）

■Infowindowの大きさ設定

以前の記事の中でInfowindowを使って単なる文字列の表示を行ったことがありましたが、このブログをご覧の方で、「リンクが貼れればいいのに」との感想がどこかにありました。そこで、今回はそのリンクと併せて、Infowindowの大きさ設定のことについて記事を書きます。

Infowindowにはオプションとして指定できる大きさの引数としてはmaxWidthしかなく、高さ指定がありません。 Infowindowに表示する内容としてのcontentに縦に長いものを渡すと縦方向は適当に内部で処理してくれているようです。以下にその例を示します。（尚、縦に長すぎてmapの縦に収まらない場合はスクロールバーが表示されます）
<head> <title>Google Map API v3-11</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // マーカーを生成 var gmarker = new google.maps.Marker({ map: gmap, position: latlng, title: "福井駅" }); // 情報ウィンドウの生成 var infoWindow = new google.maps.InfoWindow({ content: "InfoWindow - test<br />" + "<a href='http://www.google.co.jp/'>google検索</a><br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" + "0123456789<br />" , maxWidth: 200 }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(gmarker, 'click', function(event) { // 情報ウィンドウの表示 infoWindow.open(gmap, gmarker); }); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 300px; height: 400px;"></div> </body> </html>

■DIVタグによるInfowindowの大きさ設定

Infowindowのcontentの内容をDIVタグを使って囲み、DIVのCSS宣言でwidthとheightを設定すれば表示ウインドウの大きさが指定できます。
<head> <title>Google Map API v3-11-2</title> <style type="text/css"> #infowindowclass { width: 400px; height: 100px; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 var gmap = new google.maps.Map(document.getElementById("map"), mapOptions); // マーカーを生成 var gmarker = new google.maps.Marker({ map: gmap, position: latlng, title: "福井駅" }); // 情報ウィンドウの生成 var infoWindow = new google.maps.InfoWindow({ content: "<div id='infowindowclass'>" + "InfoWindow - test<br />" + "<a href='http://www.google.co.jp/'>google検索</a>" + "</div>" }); // マーカーのクリックイベントの関数登録 google.maps.event.addListener(gmarker, 'click', function(event) { // 情報ウィンドウの表示 infoWindow.open(gmap, gmarker); }); } </script> </head> <body onload="initialize()"> <div id="map" style="width: 500px; height: 300px;"></div> </body> </html>

投稿時刻 14:34 GoogleMap API, javascript | 個別ページ | コメント (2) | トラックバック (0)

「GoogleMap API V3」の使い方その10（ルート検索2）

■ルート検索の結果をルートレンダラで表示

「その９」の例では、ポリラインを使ってルート検索結果を描画しましたが、ルートレンダラを使えばそんな面倒なことはしなくても簡単に描画することができます。

ルートとルートレンダラのインスタンスをマップの生成と共に、初期処理にて生成しておきます。 [検索]ボタンをクリックされた時に、ルートの route メソッドを利用してルートのリクエストを行います。ルート検索の結果はroute メソッドで宣言された、コールバック関数に帰ってきます。コールバック関数は results, status の引数を持ち、statusがOKでなければエラーが発生しています。
statusがOKの場合、ルートレンダラのsetDirectionsメソッドにresultsを渡すことで、ルートが描画されます。
results[0]のプロパティとしてoverview_pathがありますが、緯度・経度の配列として格納されています。
<head> <title>Google Map API v3-10</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> var directions; //ルートのインスタンス var directionRenderer; //ルートレンダラ var map; //マップのインスタンス var ds = google.maps.DirectionsStatus;//ルート結果のステータス var directionsErr = new Array(); //ルート結果のエラーメッセージ directionsErr[ds.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。"; directionsErr[ds.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。"; directionsErr[ds.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。"; directionsErr[ds.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。"; directionsErr[ds.REQUEST_DENIED] = "ウェブページではルートサービスを使用できません。"; directionsErr[ds.UNKNOWN_ERROR] = "サーバーエラーのため、ルートリクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。"; directionsErr[ds.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。"; // Onload時処理 function initialize() { // ルートの生成 directions = new google.maps.DirectionsService(); // ルートレンダラの生成 directionRenderer = new google.maps.DirectionsRenderer(); // Google Mapで利用する初期設定用の変数 var mapOptions = { zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(36.062092, 136.223323) }; // GoogleMapの生成 map = new google.maps.Map(document.getElementById("map"), mapOptions); // ルートレンダラにマップを関連付ける directionRenderer.setMap(map); } // [検索]ボタン処理 function searchRoute() { // テキストボックスから検索の出発・到着を取得 var origin = document.getElementById("origin").value; var destination = document.getElementById("destination").value; // ルート検索を依頼する directions.route( { // ルートリクエスト 'origin' : origin, //出発地点 'destination': destination,//到着地点 'travelMode' : google.maps.DirectionsTravelMode.WALKING //ルートタイプ:徒歩 }, function(results, status) { // ルート結果callback関数 if (status == ds.OK) { // 結果がOK ?? // 結果をレンダラに渡し、ルートをマップに表示 directionRenderer.setDirections(results); } else { // 結果がOKではない場合 alert("ルート検索が失敗しました。理由: " + directionsErr[status]); } }); } </script> </head> <body onload="initialize();"> <div id="map" style="width: 520px; height: 400px;"></div> <div> <input id="origin" type="textbox" value="福井駅（福井）" size="40" ><br /> <input id="destination" type="textbox" value="福井県福井市役所" size="40" ><br /> <input type="button" value="検索" onclick="searchRoute()"> </div> </body> </html>

投稿時刻 14:51 GoogleMap API, javascript | 個別ページ | コメント (1) | トラックバック (0)

「GoogleMap API V3」の使い方その９（ルート検索）

■住所文字列からルート検索し、ルート描画

文字列の住所からルート検索を行い、そのルートをマップに表示します。

ルートのインスタンスをマップの生成と共に、初期処理にて生成しておきます。 [検索]ボタンをクリックされた時に、ルートの route メソッドを利用してルートのリクエストを行います。ルート検索の結果はroute メソッドで宣言された、コールバック関数に帰ってきます。コールバック関数は results, status の引数を持ち、statusがOKでなければエラーが発生しています。

statusがOKの場合、resultsはDirectionsResult オブジェクトの配列として返されてきます。返された配列の0番目の値にルート検索が入っています。 results[0]のプロパティとしてoverview_pathがありますが、緯度・経度の配列として格納されています。これを使ってポリラインを表示してやれば、マップ上にルートが描画されます。
<head> <title>Google Map API v3-9</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> var directions; //ルートのインスタンス var map; //マップのインスタンス var ds = google.maps.DirectionsStatus;//ルート結果のステータス var directionsErr = new Array(); //ルート結果のエラーメッセージ directionsErr[ds.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。"; directionsErr[ds.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。"; directionsErr[ds.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。"; directionsErr[ds.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。"; directionsErr[ds.REQUEST_DENIED] = "ウェブページではルートサービスを使用できません。"; directionsErr[ds.UNKNOWN_ERROR] = "サーバーエラーのため、ルートリクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。"; directionsErr[ds.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。"; // Onload時処理 function initialize() { // ルートの生成 directions = new google.maps.DirectionsService(); // Google Mapで利用する初期設定用の変数 var mapOptions = { zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(36.062092, 136.223323) }; // GoogleMapの生成 map = new google.maps.Map(document.getElementById("map"), mapOptions); } // [検索]ボタン処理 function searchRoute() { // テキストボックスから検索の出発・到着を取得 var origin = document.getElementById("origin").value; var destination = document.getElementById("destination").value; // ルート検索を依頼する directions.route( { // ルートリクエスト 'origin' : origin, //出発地点 'destination': destination,//到着地点 'travelMode' : google.maps.DirectionsTravelMode.WALKING //ルートタイプ:徒歩 }, function(results, status) { // ルート結果callback関数 if (status == ds.OK) { // 結果がOK ?? // ポリライン(折れ線)を生成し、マップに表示 var poly = new google.maps.Polyline({ map: map, //マップ path: results.routes[0].overview_path,//ポリラインの座標の列 strokeWeight: 5, //ストローク幅(ピクセル単位) strokeColor: "#f01010",//16進数形式のストロークの色 strokeOpacity: 0.5 //ストロークの不透明度(0.0～1.0) }); // 検索結果の中心設定 map.setCenter(results.routes[0].bounds.getCenter()); } else { // 結果がOKではない場合 alert("ルート検索が失敗しました。理由: " + directionsErr[status]); } }); } </script> </head> <body onload="initialize();"> <div id="map" style="width: 530px; height: 400px;"></div> <div> <input id="origin" type="textbox" value="福井駅（福井）" size="40" ><br /> <input id="destination" type="textbox" value="福井県福井市役所" size="40" ><br /> <input type="button" value="検索" onclick="searchRoute()"> </div> </body> </html>

投稿時刻 13:11 GoogleMap API, javascript | 個別ページ | コメント (0) | トラックバック (0)

「GoogleMap API V3」の使い方その８（ジオコーディング）

■ジオコーディングより住所文字列から緯度・経度を取得

ジオコーディングを使って、文字列の住所から緯度・経度を取得し、その位置にマーカーを表示します。

ジオコーディングのインスタンスをマップの生成と共に、初期処理にて生成しておきます。 [Geocode]ボタンをクリックされた時に、ジオコーディングの geocode メソッドを利用してジオコーディングのリクエストを行います。ジオコーディング化の結果はgeocode メソッドで宣言された、コールバック関数に帰ってきます。

コールバック関数は results, status の引数を持ち、statusがOKでなければエラーが発生しています。
statusがOKの場合、resultsはGeocoderResultオブジェクトの配列として返されてきます。返された配列の0番目の値にジオコーディング結果が入っています。 results[0]のプロパティとしてaddress_components、geometry、typesがありますが、緯度・経度の値はgeometryのlocationを参照します。 <head> <title>Google Map API v3-8</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> var geocoder; //ジオコーディングのインスタンス var map; //マップのインスタンス var gs = google.maps.GeocoderStatus;//ジオコーディング結果のステータス var geocoderErr = new Array(); //ジオコーディング結果のエラーメッセージ geocoderErr[gs.ERROR] = "Google サーバーへの接続に問題が発生しました。"; geocoderErr[gs.INVALID_REQUEST] = "この GeocoderRequest は無効でした。"; geocoderErr[gs.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。"; geocoderErr[gs.REQUEST_DENIED] = "ウェブページではジオコーダを使用できません。"; geocoderErr[gs.UNKNOWN_ERROR] = "サーバーエラーのため、ジオコーディングリクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。"; geocoderErr[gs.ZERO_RESULTS] = "この GeocoderRequest に対する結果が見つかりませんでした。"; // Onload時処理 function initialize() { // ジオコーディングの生成 geocoder = new google.maps.Geocoder(); // Google Mapで利用する初期設定用の変数 var mapOptions = { zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(36.062092, 136.223323) }; // GoogleMapの生成 map = new google.maps.Map(document.getElementById("map"), mapOptions); } // [Geocode]ボタン処理 function codeAddress() { // テキストボックスから住所を取得 var address = document.getElementById("address").value; // ジオコーディングを依頼する geocoder.geocode( {'address': address}, // ジオコーディングリクエスト function(results, status) { // ジオコーディング結果callback関数 if (status == gs.OK) { // 結果がOK ?? // マップ中心設定 map.setCenter(results[0].geometry.location); // マーカー設定 var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { // 結果がOKではない場合 alert("ジオコーディングが失敗しました。理由: " + geocoderErr[status]); } }); } </script> </head> <body onload="initialize();"> <div id="map" style="width: 300px; height: 300px;"></div> <div> <input id="address" type="textbox" value="福井市大手1丁目1-1" size="40" > <input type="button" value="Geocode" onclick="codeAddress()"> </div> </body> </html>

投稿時刻 17:59 GoogleMap API, javascript | 個別ページ | コメント (0) | トラックバック (0)

おやじプログラマー日記

コンピュータ業界に身をおいて３０年あまり…VB.NET・OracleなどのTIPS、おやじの独り言

おすすめ本

最近の記事

最近のトラックバック

Ranking

最近のコメント

アーカイブ

AccRanking

Ad

カテゴリ「javascript」の19件の記事

2018年4月 5日 (木)

【PHP】HTMLのリンクにダウンロード処理を設定する方法

2018年4月 4日 (水)

【Javascript】:IEではデフォルト値を持った関数では動作しない

2017年10月19日 (木)

【jQuery】ラベルで囲まれたチェックボックスで、ラベルのclickイベントが2回実行される

2016年6月 6日 (月)

ソーシャルブックマーク統合サービス「Add Clips」は終了！

2015年4月18日 (土)

ブログにブログ内検索窓を付けてみました

2014年12月15日 (月)

ASP.NETのカレンダー・ポップアップのカレンダーが右側に間延びした感じで表示される場合の対応

2011年7月29日 (金)

「GoogleMap API V3」の使い方その11（さらにInfowindow）

2011年6月 3日 (金)

「GoogleMap API V3」の使い方その10（ルート検索2）

2011年6月 1日 (水)

「GoogleMap API V3」の使い方その９（ルート検索）

2011年5月31日 (火)

「GoogleMap API V3」の使い方その８（ジオコーディング）

検索

admax

カテゴリ

リンク

LSF

LPOP