Zero Clipboard利用時のボタンイベント処理追加

MyHome Portal 3.20で、ID管理のクリップボードコピー[C]ボタンを押した時に白くハイライトするようにしました。
http://ok2nd.blog87.fc2.com/blog-entry-260.html

Zero Clipboardを使って、glue()を設定すると、ボタンのmousedownやmouseupのイベントをZero Clipboardが拾ってしまうため、ZeroClipboard-ok2nd.jsを直接修正して、これを実現しました。

case 'mousedown':
  this.domElement.style.backgroundColor = '#ffffff';
case 'mouseup':
  this.domElement.style.backgroundColor = '#e0e0e0';
スポンサーサイト

はてなブックマークに追加 はてなブックマーク - Zero Clipboard利用時のボタンイベント処理追加

theme : JavaScript
genre : コンピュータ

Ver.3.20:ID管理クリップボードコピーボタン改善

MyHome Portal Ver.3.20をリリースしました。
http://ok2nd.web.fc2.com/download.html

「カレンダー」「旅行記」「住所録」それぞれのGoogle Maps API V3を使ったマップが、1地点の場合、地図が拡大されすぎてしまうのを修正。

「テキスト縦書き表示 (IEのみ)」で、H1タグ内文字をHTMLタイトルとするようにしました。フォーム入力版では、別途HTMLタイトルを指定できるようにしました。

「ID管理」で、W↑をクリックすると、ID&パスワードの小ウインドウと該当ホームページのウインドウ2つが開きますが、ChromeではID&パスワードの小ウインドウが、メインウインドウの下に隠れてしまう問題を修正。window.open()で、ウインドウを開く位置指定でscreenX,screenYを追加。

「ID管理」で、クリップボードコピー[C]ボタンを押してもZero Clipboardを使用している関係でボタンの形状が変化しないのを改善。クリック時点で白くハイライトするようにしました。

はてなブックマークに追加 はてなブックマーク - Ver.3.20:ID管理クリップボードコピーボタン改善

theme : JavaScript
genre : コンピュータ

複数のZero Clipboardコピーボタン

MyHome Portal 3.19で、Zero Clipboard利用によるクリップボードへのコピー機能を付けました。
http://ok2nd.blog87.fc2.com/blog-entry-258.html

Zero Clipboardは、setText()でコピー文字列をセットした後で、glue()でボタンを設定して、そのボタンをクリックすることでクリップボードへのコピーが実現されます。

Zero Clipboardを使って複数ボタンによるコピー機能実現に苦労しました。私が実現した方法は以下のものです。
onmouseover()で、自分自身にglue()を設定するというものです。

<script language="JavaScript">
function clipSetBtn(id, text) {
var clip = new ZeroClipboard.Client();
clip.setText(text);
clip.glue('button'+id);
}
</script>
<input type="button" id="button11" value="C" onmouseover="clipSetBtn('11','ABC');">
<input type="button" id="button12" value="C" onmouseover="clipSetBtn('12','DEF');">

はてなブックマークに追加 はてなブックマーク - 複数のZero Clipboardコピーボタン

theme : JavaScript
genre : コンピュータ

Ver.3.19:ID管理にクリップボードへのコピー機能

MyHome Portal Ver.3.19をリリースしました。
http://ok2nd.web.fc2.com/download.html

「ID管理」に、クリップボードへのコピーボタン機能を追加。
IDやパスワードの右の「C」ボタンをクリックすると、クリップボードにその文字列をコピーします。
各サイトのログイン画面にそのままペーストできます。
クリップボードへのコピーには、Zero Clipboardを利用。
http://code.google.com/p/zeroclipboard/
260-2.jpg

「アルバム」「ギャラリ5」で、画像サイズをSELECTメニューで変更できるようにしました。
「アルバム」「ギャラリ5」の背景画像を設定できるようにしました。
boxes-b.jpg

各コンテンツの検索機能が、検索キーワード入力後、Returnキーでも動作するように修正しました。

Google Maps JavaScript API V3を使ったマップページのマップタイプ切り替えメニューの形式が変更されていたので、それに合わせてマップの地点一覧のサイドバーの位置を少し下に下げました。
対象は、カレンダー、旅行記、住所録のそれぞれのマップページと、Google Maps (複数地点) API V3版。
map-sidebar.jpg

ツール「Google Maps (複数地点) API V3版」で検索地点が1地点の場合、地図が拡大されすぎてしまうのを修正。

ツール「テキスト縦書き表示 (IEのみ)」を修正。文章をファイルではなく、フォームから入力できるタイプも用意。行間やフォントタイプの指定も可能にしました。
tategaki.jpg

各ページのHTMLのDOCTYPEをhtml5に合わせて、
<!DOCTYPE html>
に、変更。IE6も含めて、これで特に支障はなさそうです。

はてなブックマークに追加 はてなブックマーク - Ver.3.19:ID管理にクリップボードへのコピー機能

theme : JavaScript
genre : コンピュータ

Ver.3.03:不具合修正

MyHome Portal Ver.3.03をリリースしました。
http://ok2nd.web.fc2.com/download.html

Ver.3.01で「ID管理」「(簡易) 預貯金管理」でも一部修正ミスがあったので、修正しました。

はてなブックマークに追加 はてなブックマーク - Ver.3.03:不具合修正

theme : JavaScript
genre : コンピュータ

Chromeで、コピー&ペーストができない

MyHome Portalのコンテンツ「ID管理」で、Chromeの場合、コピー&ペーストが出来ないようです。

Ver.2.62、Ver.2.63で適用した「ID管理のコピー&ペーストで文字列の最後にスペースが付いてしまう問題の回避策」が正常に動作していないみたいです。(何時から動作していないのか不明?)

対処として、以下の行をコメントアウトしてください。
・id-manager/list-my-template.php
・id-manager/view-idpass.php
//	$oncopy = ' oncopy="copy(event);return false"';

とりあえず、コピー&ペーストは出来るようになります。Chromeの場合、コピー&ペーストで文字列の最後にスペースは付いてしまいます。

※ Ver.2.80で、このoncopy処理を廃止しました。

はてなブックマークに追加 はてなブックマーク - Chromeで、コピー&ペーストができない

theme : JavaScript
genre : コンピュータ

Chromeを既定のブラウザにできない理由

Google Chromeは、IEに比べてはるかに高速で良いのですが、Google Chromeを既定のブラウザにはしていません。
その一番の理由は、文字列のコピー&ペーストで、余分なスペースや改行が付いてしまうことです。
認証が必要なWebサイトのID管理には、MyHome PortalのID管理を使っていますが、IDやパスワードをコピーする時に、英数字混在&記号交じりの文字列をコピーするために、トリプルクリックを使いますが、Google Chromeでは、なぜか元の文字列に存在しないスペースや改行が付いてしまいます。
MyHome PortalのID管理では文字列は、コピー&ペーストしやすいように<table><tr><td>で囲んでいますが、Google Chromeではペースト先にスペースや改行が入ってしまいます。
<div>や<span>で囲んでも駄目です。IEでも<div>や<span>では余分な範囲を選択してしまいます。
下にサンプルを載せました。Google Chromeで試してみてください。
改善策をご存知の方、教えてください。

<table><tr><td>abc@123#xyy</td></tr></table>
<div>abc@123#xyy</div>
<span>abc@123#xyy</span>

【table】
abc@123#xyy

【div】
abc@123#xyy

【span】
abc@123#xyy

【2010/3/5 追記】
※この問題は、Livedoor KnowledgeにてBLUEPIXYさんから素晴らしい解決策をいただきました。

http://knowledge.livedoor.com/44359
【2010/3/8 追記】
Ver.2.62でこれを適用しましたが、Firefoxでは不具合が発生することが判明。Ver.2.63でChromeのみ、このoncopy処理を適用するようにしました。

http://ok2nd.blog87.fc2.com/blog-entry-203.html

BLUEPIXYさんからの解決策を転載させていただきます。
oncopyを使って以下のスクリプトで処理します。

<head>~</head>に、
<script type="text/javascript">
function copy(e){
var text = window.getSelection()+"";
text=text.replace(/(.+)\s*/,"$1");
input = document.createElement("input");
input.hidden = true;
input.value = text;
document.body.appendChild(input);
input.select();
try {
success = document.execCommand("copy", false, null);
} catch (ex) {
success = false;
} finally {
document.body.removeChild(input);
}
return false;
};
</script>


body 部分で、oncopy にcopy() を割り付け
<table oncopy="copy(event);return false">
<tr><td>abc@123#xyyz</td></tr>
</table><br />

はてなブックマークに追加 はてなブックマーク - Chromeを既定のブラウザにできない理由

theme : CSSレイアウト
genre : コンピュータ

Ver.1.20:ID管理ページのレイアウト修正

MyHome Portal Ver.1.20を リリースしました。
http://ok2nd.web.fc2.com/download.html

  • 「ID管理」表示ページのID、パスワード表示欄のレイアウトを少しだけ修正。
    項目名と値表示ボックスの上下位置がアンバランスだったのを補正。
    Google Chromeでは改行されて2段表示になってしまってた問題を解消。

  • ReadMe-original.txt.phpに、「初期アカウント登録」と「サンプルデータ削除方法」を追加。
    【初期アカウント登録方法】
    サンプルデータを利用して一括修正する方法が簡単です。
    1.サンプルデータの管理者アカウント「tarou」でログインします。
    2.右上メニュー「ユーザ一覧」を開き、「一括修正/追加/削除」を開きます。
    3.サンプルデータのアカウント、ハンドル、パスワードを利用環境のユーザに合わせて修正します。
    権限に「admin」と入れるとシステム管理者になります。
    【サンプルデータ削除方法】
    サンプルデータを削除する方法です。
    <カレンダからサンプルのスケジュールデータを削除>
    mysql -u myhome -ppass123
    use _db_calendar;
    truncate table m_schedule;
    exit


  • 120.jpg

    はてなブックマークに追加 はてなブックマーク - Ver.1.20:ID管理ページのレイアウト修正

    プロフィール

    ok.2nd

    Author:ok.2nd
    HomePage:
    http://ok2nd.web.fc2.com/
    Email: m.ok.2nd@gmail.com

    最新記事
    最新コメント
    最新トラックバック
    月別アーカイブ
    FC2ブログランキング

    FC2Blog Ranking

    検索フォーム
    カテゴリ
    リンク
    RSSリンクの表示
    ブロとも申請フォーム

    この人とブロともになる

    QRコード
    QRコード
    ユーザータグ