スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

はてなブックマークに追加 はてなブックマーク - スポンサーサイト

MyHome Portal:画像&動画ビューワ紹介

MyHome Portalを、まだご利用でない方に、フォトアルバム機能のご紹介です。

MyHome Portalでは、ローカルPCの任意のディレクトリ(フォルダ)の画像(写真)や動画をWebブラウザでビューイングできます。もちろん、フォルダの移動操作もできます。

動画はFLV,MP4,WMV,MPG,MOV,M2TSの再生ができます。動画の時分割サムネイル表示もできます。

静止画はブラウザで高速表示できるように自動的に縮小画像作成もできます。
JPEG画像のEXIF情報を読み取って、縦位置撮影情報を持っている画像の自動縦位置表示や、自動のロスレス(無劣化)回転画像処理をすることもできます。

サムネイル表示やスライドタイプの表示ができます。サムネイル表示は、10枚単位などでページ送りができます。画像の拡大・縮小表示もできます。
全画面スライドショーもできます。F11キーと組み合わせれば、パソコン画面一杯のスライドショーができます。フェードアウト・フェードインしながらの自動プレイもできます。動画を全画面で連続再生することもできます。
全画面スライドショーではキーボード操作で画像スキップや画像削除などの操作もできます。

Windowsアプリケーションとは少し違ったユーザーインターフェースで、フォトアルバム、画像ビューワとして、それなりに実用的に使えるレベルになっていると思います。

MyHome Portalは、インストールや環境設定に多少手間がかかりますが、他の機能として、ホームページインデックス(ブックマーク)&検索、カレンダー(スケジューラ)、旅行記、ToDo、掲示板、RSSリーダー、メモ、学習、住所録+PDF葉書宛名書き、チャット(Chat)、ID・パスワード管理、預貯金管理、各機能とGoogle Maps & Earthとの連動など、盛りだくさん(?)の機能があります。一度お試しください。

p1.jpg
p2.jpg
p3.jpg
p4.jpg
p5.jpg00000234-timeline.jpg

スポンサーサイト

はてなブックマークに追加 はてなブックマーク - MyHome Portal:画像&動画ビューワ紹介

theme : PHP
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 : コンピュータ

DIVの組み合わせで思い通りのレイアウトは難しい。

MyHome Portal Ver.2.60で、アルバムの上位ディレクトリを、左側に表示できるようにしましたが、ウインドウの下端一杯に広げたかったのですが、方法がわかりませんでした。CSSはやはり難しいです。HTMLとCSSを一部抜きだすと次のような感じです。ウインドウの下一杯に広げる方法がわかる方、アドバイスをお願いいたします。
ここに抜き出した部分より上の<div id="page_navi">などの高さが固定なら実現できそうなのですが、これら上段部分はウインドウサイズにより可変という前提です。下のフッター部分はなしという条件でもOKです。

<div id="photo_body">
<div id="photo_header">
</div>
<div id="photo_contents">
<div id="photo_dir">
</div>
<div id="photo_main">
</div>
</div>
</div>

#photo_body {
height: 70%;
}
#photo_contents {
position: relative;
height: 100%;
}
div#photo_dir {
position: absolute;
height: 100%;
overflow: scroll;
}


<div>部分のみにしたHTML全体とCSSを以下にも置きました。
http://ok2nd.web.fc2.com/sample/index.html
http://ok2nd.web.fc2.com/sample/photo.css
http://ok2nd.web.fc2.com/sample/photo-left.css

はてなブックマークに追加 はてなブックマーク - DIVの組み合わせで思い通りのレイアウトは難しい。

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

Ver.2.61:日本語ファイル名動画再生不具合解消

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

旅行記、掲示板、メモで、日本語ファイル名のFLV,MP4をアップロードした場合、動画再生できなかった問題を解消しました。

アルバム動画再生で、WMVファイルパスに日本語が含まれていると再生できない不具合を修正。

アルバムのスライドモードで、ディレクトリ表示位置を左側にした場合、IE6ではスライド背景色が消えてしまう不具合を解消。

はてなブックマークに追加 はてなブックマーク - Ver.2.61:日本語ファイル名動画再生不具合解消

theme : PHP
genre : コンピュータ

Ver.2.60:アルバム・ディレクトリ表示位置を可変に

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

アルバムの上位ディレクトリ表示位置を、上段または左側に切り替えできるようにしました。

b220.jpg
b220-l.jpg

はてなブックマークに追加 はてなブックマーク - Ver.2.60:アルバム・ディレクトリ表示位置を可変に

theme : JavaScript
genre : コンピュータ

Ajaxを使ったページ遷移なしのスライドショー補足

MyHome Portal Ver.2.59で追加したAjaxを使ったページ遷移なしのスライドショーについての補足です。

ページ遷移なしのスライドショーと言っても、全画像をあらかじめ読み込んで切り替えている訳ではありません。任意のフォルダの数十枚、数百枚の画像のスライドショーを実現するのに、その方式は現実的ではありません。順次、次に表示する画像を読み込みながら、スライドショーを行なっています。

画像の読み込みは、jQueryを使って行なっています。
$("#img_slide_main_"+c_p).attr("src", "img-get.php?page="+nxt);

ただ、フェードアウト・フェードインと組み合わせる場合、フェードアウトしてから、次の画像を.attr()で指定して読み込んでもフェードイン開始に間に合わず、おかしな動作になってしまいます。そこで、<img>タグを2つ用意して、
<img id="img_slide_main_0" ..... >
<img id="img_slide_main_1" ..... >
スライドショーの時間間隔を空けるためのsetTimeout()をする前に、次の画像を事前にもう一つの<img>タグに.attr()で読み込み、2つの<img>タグを交互に切り替えて使っています。
$("#img_slide_main_"+c_p).css("display","none");
$("#img_slide_main_"+a_p).css("display","");

はてなブックマークに追加 はてなブックマーク - Ajaxを使ったページ遷移なしのスライドショー補足

theme : JavaScript
genre : コンピュータ

Ver.2.59:Ajax利用のページ遷移なしスライドショー

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

アルバムに「全画面(Ajax)」を追加。Ajaxを利用して、ページ遷移なしのスムーズな全画面スライドショーができます。画像切り替えはフェードアウト+フェードインで切り替えます。フェードアウトおよびフェードインの時間は実運用定義ファイルで変更できます。オートプレイ&オートリピート固定です。マウス操作はできません。元のアルバム画面に戻るには[Esc]キーで戻ります。通常の全画面モード・スライドショーで使える[Esc]キー以外のキー操作はできません。

旅行記マップのルート表示を、チェックボックスでページ遷移なしでオン/オフできるようにしました。

旅行記マップの全画面表示では、ルート表示を車と徒歩から選択できるようにしました。

route1.jpg
route2.jpg

はてなブックマークに追加 はてなブックマーク - Ver.2.59:Ajax利用のページ遷移なしスライドショー

theme : JavaScript
genre : コンピュータ

Ver.2.58:旅行記:戻るリンク追加。

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

旅行記本文ページに、元ページ(一覧/地点一覧/月間カレンダー/年間カレンダー)に戻るリンクを追加。

旅行記、カレンダーで、頁行数がリセットされてしまうことがある不具合を修正。

はてなブックマークに追加 はてなブックマーク - Ver.2.58:旅行記:戻るリンク追加。

theme : PHP
genre : コンピュータ

Ver.2.57:旅行記マップで全マーカーのルート表示

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

旅行記の地点一覧に、該当の旅行記ページリンクや地点修正リンクを追加。

旅行記の地点一覧に、添付ファイルがあれば、アイコン表示するようにしました。

旅行記のマップに「全ルート」ボタンを追加。全マーカー地点を経由するルートを表示します。全画面モードでは、ルートのナビゲーションも表示します。ルートは車と徒歩によるルートです。一覧からの複数日選択による一括マップでも同じ機能が使えます。マーカー数は25個を超えると表示できません(多分?)。

旅行記マップのマーカーに、「Googleマップ」「前(次)地点からの経路」リンクを追加。実際のGoogleマップにジャンプします。

INDEX、カレンダー、旅行記のミニカレンダーの今日の背景色と文字色を実運用定義ファイルで設定できるようにしました。

カレンダー、旅行記、掲示板、メモのフォームによる登録ページのメモリサイズと最大実行時間を実運用定義ファイルで指定できるようにしました。

diary31.jpg

はてなブックマークに追加 はてなブックマーク - Ver.2.57:旅行記マップで全マーカーのルート表示

theme : JavaScript
genre : コンピュータ

Ver.2.56:旅行記を追加。ストリートビュー追加。

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

新しいコンテンツ「旅行記」を追加しました。旅行の行き先の地点をGoogleマップでマーカー表示できます。
全画面タイプのGoogleマップ表示もできます。全画面タイプのGoogleマップでは、ストリートビュー表示もできます。
一覧表で、複数の日付を選択して、一括マップを作成できます。複数日の行き先地点全てのマーカーを1枚の地図に表示します。
登録・修正画面で、マーカーの登録や修正ができます。マーカーは移動もできます。登録・修正画面でのマーカーの修正や移動、地図の拡大・縮小はAjaxを使って、画面遷移なしに、リアルタイムでデータベースに記録します。
複数日のマーカー地点情報を一覧表示、一括修正もできます。

カレンダー・マップ機能で、地図の右側にマーカー名一覧を表示するようにしました。
カレンダー・マップ機能(別窓)に、ストリートビュー機能を追加しました。
ツール・Google Maps & Earthに、ストリートビュー機能を追加しました。

diary2.jpg
diary5.jpg

はてなブックマークに追加 はてなブックマーク - Ver.2.56:旅行記を追加。ストリートビュー追加。

theme : JavaScript
genre : コンピュータ

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

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

IEで、Google Maps APIを使ったページを表示した後で、INDEXトップページを表示すると異常に時間がかかりハングアップしたようになる問題点を解消。

原因は、トップページの各種インターネット検索サイトボタンで、Shift-JISやEUCコードへの変換を行うために使っていたJavaScript「ecl.js」によるものでした。IEでしか発生しないため、IEとGoogle Maps APIの相性の問題かと思っていたのですが、全く別のところに原因があったようです。
ネットを検索したところ、Drk7jpさんが、「ecl.js」の改善版「ecl_new.js」を作成されていることが分かり、これに置き換えることで、問題点が解消されました。Drk7jpさん、ありがとうございます。

《 参考:ecl.js (Escape Codec Library) と Sleipnir の相性が悪い件について 》
http://www.drk7.jp/MT/archives/001324.html

はてなブックマークに追加 はてなブックマーク - Ver.2.55:トップページ表示不具合解消

プロフィール

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

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

FC2Blog Ranking

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

この人とブロともになる

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

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。