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

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

JavaScript

無限スクロール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.me/abook/pc/list-hyakusen-sum.php JavaScriptは、以…

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

簡易計算器(電卓?)を作ってみました。 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…

Ver.1.12:PHP/JavaScriptソースコード整形表示

MyHome Portal Ver.1.12を リリースしました。 http://ok2nd.web.fc2.com/download.html SyntaxHighlighterを使って「PHP/JavaScriptソースコード整形表示」を追加。サーバ上の任意のソースを整形表示できます。拡張子を判断して整形表示します。ボタンで整…

Ver.1.11:ホームページのモノトーン表示他追加

MyHome Portal Ver. 1.11を リリースしました。 http://ok2nd.web.fc2.com/download.html あまり実用的でないツールをいくつか追加。いつもカラーで見ているホームページをたまにモノトーンで見てみると新鮮に感じますよ。 「ツール」に「ホームページのモノ…

Ver.1.10:翻訳 by Google AJAX Language API

MyHome Portal Ver. 1.10を リリースしました。 http://ok2nd.web.fc2.com/download.html コンテンツカテゴリとして「ツール」を追加。 「ツール」に「翻訳 by Google AJAX Language API」を追加。 日⇔英翻訳では、翻訳後、元の言語に再翻訳して翻訳の精度を…

インプットフォームのtextareaの拡大、縮小

インプットフォームのtextareaのサイズが変更できなくて不便と思ったことはありませんか? MyHome Portalでは、大・小ボタンでtextareaの拡大、縮小ができるようにしています。 次のようなJavaScriptで実現しています。 function textareaBigSmall(obj, bigS…