中級プログラマの自宅でPHP ブログ

自宅用ポータルシステム「MyHome Portal」をオープンソースで公開。MyHome Portalの説明とエンハンス情報。

JavaScript

LeafletでGPSログ(GPX)地図作成。標高グラフ作成やローカルファイル指定も。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を色々と試した。 詳細は以下に。

「Leaflet」でGoogle MAPS APIなしでGoogle マップが使える。

「Leaflet」を使えば、「Google MAPS API」なしで「Google マップ」が使える。

Leaflet + OpenStreetMapで、地図にマーカー表示。

Leaflet + OpenStreetMapで、地図にマーカー表示を試しました。

備忘録:Google Maps Javascript API:主要なスポット(POI)情報ウィンドウを表示させない方法。

Google Maps Javascript APIで作成した地図の主要なスポットをマウスでクリックすると、ポップアップで情報ウィンドウが表示される。 これを、POI(point of interest)と呼ぶ。 この情報ウィンドウを表示させないためには、Mapオブジェクトの初期化オプショ…

ChromeのFlash Playerサポート終了に伴い、MyHome Portal「ID管理」修正。

Google ChromeのFlash Playerサポートが2020年12月で終了します。 MyHome Portal「ID管理」で、[C]ボタンを押すとクリップボードにIDやパスワードをコピーする機能をFlash Playerを使って実現していました。 この機能を、Flash Playerを使わず、JavaScriptで…

Google Maps API)マーカーラベルに使っているchart.apis.google.comが使えなくなった。

MyHome Portalのコンテンツの一部でGoogle Maps APIを使った地図があるが、その地図でマーカーラベルにchart.apis.google.comサービスを利用していたが、2019.3.14よりサービス停止になってしまった。 代替案を探したところ、MarkerWithLabelというのが見つ…

ブログをレスポンシブデザインに変更。

このブログ「中級プログラマの自宅でPHP」を、レスポンシブデザインに変更。 デザインテーマは「Reach」のままで、変更。 ブログのトップページを記事一覧ページに変更する設定で、スマホは除外していたが、全てのデバイスで記事一覧にするようにした。 【 ↓…

スマホ対応のHTML(TABLE)クリッカブルマップ「日本地図」を作成。

以前、MyHome Portalの機能の一部のために作成したクリッカブルマップ「日本地図」を一部手直しして、スマホ対応のものを作成した。 詳細は、以下に。

無限スクロールJavaScript「Infinite Scroll」

無限スクロールを実現するJavaScript「Infinite Scroll」を使ってみた。 別ブログに書いたので、リンクを載せておく。 ≪Infinite Scrollを使った無限スクロール版「12cm×8cmの小さなアート」 - 晴歩雨描≫ http://2ndart.hatenablog.com/entry/2017/07/05/143…

Ver.6.14:検索文字入力ボックスに、クリアボタン

MyHome Portal Ver.6.14をリリースしました。 http://ok2nd.web.fc2.com/download.html 「INDEX」検索文字入力テキストボックスに、クリアボタン(×)を付けました。jQueryプラグインaddclearを使っています。 「INDEX」の検索ボタン「価格(G)」「楽天」「Twit…

2nd INDEXをiPad miniでも使いやすいように

2nd INDEX http://ok2nd.me/index/ を、iPad miniやスマホでも使いやすいように、文字サイズを大きくするために、viewportでinitial-scale=1.7を指定してみました。 <meta name="viewport" content="width=device-width,initial-scale=1.7"> 検索文字入力テキストボックスに、クリアボタン(×)を付けました。jQueryプラグインaddclea</meta>…

Ver.6.13:週間天気をtenki.jpからlivedoorに変更

MyHome Portal Ver.6.13をリリースしました。 http://ok2nd.web.fc2.com/download.html ツール「GPSログ View」の修正画面で、GPXファイル差し替えた場合、名前と補足説明をGPXファイルのデータで置き換えていた仕様を変更。修正画面の名前と補足説明が有効…

tableでマウスhoverしている列の背景色を変える。

「日本百選:都道府県別件数」で、tableでマウスhoverがしているセルの行と列の背景色を変えるようにしてみました。 行はCSSのtr:hoverで色を変えて、列はJavaScriptで色を変えています。 http://ok2nd.sakura.ne.jp/abook/pc/list-hyakusen-sum.php JavaScr…

簡易計算器を作ってみた。

簡易計算器(電卓?)を作ってみました。 http://ok2nd.me/tool/calc/ textareaに入力した数式を、JavaScriptのeval()で評価しているだけです。 セルには()付きの数式を入力できます。JavaScriptの数学関数(Math)も使えます。

備忘録:window.open、return false、void(0)

Google Maps APIを使ったスマホ用サイトを作成した時の備忘録。 ≪スマホ用:2nd マップ≫ http://ok2nd.me/abook/map/ ■button等のonClickにはreturn false;を付ける。これを付けないと元のページに戻ってしまう等の不具合が生じます。PCのブラウザでの検証で…

jQuery UI の Sortableは、恐ろしく便利

MyHome Portal Ver.6.01で、RSSリーダーやToDoで、表示順序の変更をマウスのドラッグ&ドロップで出来るようにしましたが、jQuery UI の Sortableを使って実現しています。 http://ok2nd.hatenablog.com/entry/2013/09/01/074917 jQuery UI の Sortableは恐…

Ver.5.18:JavaScript関数を整理

MyHome Portal Ver.5.18をリリースしました。 http://ok2nd.web.fc2.com/download.html JavaScriptの一部関数を、scripts/ok2nd.jsにまとめました。 各コンテンツの検索フィルタJavaScript関数を、なるべく統一しました。 「RSSリーダー」の↑クリックで表示…

Ver.4.13:操作性の改善

MyHome Portal Ver.4.13をリリースしました。 http://ok2nd.web.fc2.com/download.html すべてのコンテンツの修正画面で、「削除」の確認を、事前チェックボックスでなく、JavaScriptのwindow.confirm()で確認する方式に変更しました。 すべてのコンテンツで…

Ver.4.05:キーワードハイライトをJavaScriptで(2)

MyHome Portal Ver.4.05をリリースしました。 http://ok2nd.web.fc2.com/download.html 「カレンダー(一覧表示)」「ID管理」「利用ガイド」のキーワード検索時のキーワードハイライトがPHP処理だったのを、「メモ」「旅行記」と同様にjquery.highlight.jsを…

Ver.4.04:キーワードハイライトをJavaScriptで

MyHome Portal Ver.4.04をリリースしました。 http://ok2nd.web.fc2.com/download.html 「メモ」「旅行記」のキーワード検索時の、キーワードハイライトをPHP処理でなく、jquery.highlight.jsを使用する方式に変更しました。 本文にURLが入っている場合に<a>タ</a>…

JavaScript:縦計だけの表計算

MyHome Portalのツール「縦計だけの表計算」を、Google App Engine上に載せました。 Google App Engine上と言ってもPythonは使っていません。JavaScriptだけです。 http://2ndindex.appspot.com/calc

jSnowで、スライダーとRGB値指定

javascript「jSnow」を使った文字を雪のように降らせるサイト「2nd jSnow」で、オプションパラーメーターの設定で、スライダーが使えるようにしました。 また、薄片の色をRGB値で指定できるようにしました。 http://2ndjsnow.appspot.com/

textarea文字列をタグで囲んだ後のカーソル表示

MyHome PortalのVer.3.11で、textareaへのタグ&アイコン挿入を改善しました。 textareaへのタグ&アイコン挿入には、 「textareaの選択範囲を取得し、前後に文字列を挿入する」 http://archiva.jp/web/javascript/getRange_in_textarea.html のJavaScriptを使…

jquery.jsの2度読み(インクルード)について

JavaScriptでは、同名の関数があった場合、後に定義したものが有効になります。エラーにはなりません。なので、通常、外部ファイルの同じJavaScriptを2度読みしても問題にはなりません。 しかし、jQueryを2度読みすると、無名関数呼び出しなどで不具合が発生…

Ver.2.64:サブメニューを隠せるようにしました

MyHome Portal Ver.2.64をリリースしました。 http://ok2nd.web.fc2.com/download.html 右上の「利用ガイド」「ユーザ一覧」などのメニューを隠せるようにしました。 scripts/cookie.jsのCookie処理に不具合があったので、修正しました。

jQuery1.4.2のバグなのでしょうか?

MyHome Portalで使用しているjQueryのバージョンを1.3.2から1.4.2に変えてみようと思いテストをしたところ、不具合が発生することが判明。 しかし、これがjQueryのバグなのかMyHome Portal側の問題なのか分かりません。対処方法もよくわかりません。どなたか…

Ver.2.55:トップページ表示不具合解消

MyHome Portal Ver.2.55をリリースしました。 http://ok2nd.web.fc2.com/download.html IEで、Google Maps APIを使ったページを表示した後で、INDEXトップページを表示すると異常に時間がかかりハングアップしたようになる問題点を解消。 原因は、トップペー…

MyHome Portal 使用のJavaScripライブラリ

MyHome Portal で使っているJavaScriptライブラリ一覧を、 「中級プログラマの自宅でPHP」の「MyHome Portal」動作環境ページに整理しました。 <使用スクリプト/ライブラリ> http://ok2nd.web.fc2.com/requirements.html

Ver.1.22:未入力チェックをJavaScriptで警告ダイアログ

MyHome Portal Ver.1.22を リリースしました。 http://ok2nd.web.fc2.com/download.html 入力フォームの件名未入力チェックをJavaScriptで行い警告ダイアログを表示するようにしました。 (修正コンテンツ:カレンダー、メモ、ID管理、利用ガイド) 追加スクリ…

FORM入力データのHTMLプレビュー

textarea内のHTMLスケジュール本文のプレビュー機能は、とても簡単です。 以下のJavaScript関数をコールしているだけです。 function htmlPreview() { document.getElementById('memo_html').innerHTML = htmlDecode(document.getElementById('c_memo').valu…