Collect and Display, DocView FW

Collect and Display

画像一覧スクリプトとテンプレート

Collect and Display について
Collect and Display はスクリプトとHTMLテンプレートのセットです。
Collect and Display のスクリプトが得意なことは画像をリスト表示する事です。
自宅LANでの画像一覧ホームページ作りを楽しみます。

HTMLとCSSの知識、そしてHTTPサーバーがエラーを出した際にそれに対処するための知識や経験があればいけると思います。
具体的にはテキストエディタで素のHTMLコードやCSSコードを書く、HTMLページに使用しても安全な文字列の選択、そしてHTTPサーバーの基本的な設定、使用しても安全なパス名の選択 、相対パスの理解、ローカルファイル参照の制限の理解などです。
付属のテンプレートはHTMLエディタで手を加えない限りほぼ何もできません。

下のリンクから Collect and Display のテンプレートサイトに飛んでこのパッケージをテストできます。
それらがWebブラウザに正常に表示され機能するようであれば、このパッケージも同様に機能するのではないかと期待できます。

Collect and Display で事を始める前に手元に準備するものはHTTPサーバー・ソフトウェアとHTMLエディタです。
また 「Collect and Display ダンボール」にHTTPサーバーソフトウェアを使ったHTTPサーバーの立ち上げ手順があります。


Collect and Display 3.3 (最終確認中)
【主な修正項目】
  • 別タブで開くタイプのイメージビューアにて、ロード待ちにある画像がユーザーによる画面スクロール操作等で露わなった後にもロードを開始しない不具合を修正しました。
    この不具合はChrome系Webブラウザで確認されています。
  • dropMeのページ(_dropme.htmlなど)でsunaba_sample.htmlのように静的なデータをロードしようとするとき、2回目以降のブロックロード時に間違ったデータが読み込まれる不具合を修正しました。
  • dropMe(Drop-Me-Imageなど。テンプレートでは砂場ページなどにあります)をユーザー設定により古い順番かつブロックに区切ってロードしようとするとき、 dropMe全体のうち非表示状態にあるものの画像がスクロールなどで表示状態になったにもかかわらずロードされない不具合を修正しました。
  • 猫の絵を押して実行できるListItemBase検索の検索結果一覧表において、代表画像のロードがスクリプトによる誤ったソースアドレスの修正プロセスによって失敗に終わる不具合を修正しました。
  • dropMeのエディタにてシャッター(shutterクラス)内に置いたパスが実際のdropMe生成時にシャッター外に出るなど、ユーザーによって書かれた構造が崩れる不具合を修正しました。
その他にもスクリプトの重要な部分に修正目的で多数手が加えられています。


【主な変更項目】
  • CSSに「.dropMeStatic」が追加されており 、静的なdropMeデータがロードされている事実を気付かせるためにdropMeの背景が黒にされます。
  • ポップアップウインドウ左上にあった「Stick to the right」チェックボックスを廃止してRESIZEボタンにしました。
  • 画像/動画ポップアップ時のデフォルト設定でのサイズが、以前のように「画面横幅に合わせる」または「画面縦幅に合わせる」ではなく「自動設定」になりました。
    以前のようにリサイズをマウス左右ボタンで制御したい場合には、Ctrlキーを押しながらポップアップさせる必要があります。
  • ページイメージビューアの移動がミドルマウスボタンからCtrlキー+Altキーに変更になりました。
    ミドルマウスボタンの場合には移動時にスライド送りしてしまうという誤動作を避け辛かったためです。

【主な新規項目】
  • 砂場dropMeImageについてアイテムの検索と抽出ができるようになり、それ用のパーツが下に示すAとBの2箇所に追加されています。
    検索結果が表示されるウインドウを閉じる際には、OKボタンを押して閉じれば検索履歴はクリアされ、CLOSEを押して閉じれば検索履歴は維持されます。
    維持された検索履歴は次回検索時に引き継がれます。
    この動作機能は意図的なものですが、CLOSEで閉じる事が癖になっていると検索結果の確認時に混乱させられる事があると思いますので注意して下さい。

    A) _cnd_template_cardboardフォルダ内、index.htmlのdivDocHeaderパート

    B) _cnd_template_cardboardフォルダ内、_dropme.html
  • ポップアップ動画で区間再生ができます。方法はリストアイテムの青い[?]ボタンを押して表示されるテキストに書いてあります。
  • DROP-ME-IMAGEページでDROP-ME-IMAGEアイテムに設定チェックボックスを使って静的なデータを読み込ませる事ができます。
    サイト上部にある猫の絵を押すと現れる「DropMeImage 設定」にてこれを行えます。
    なお、「DropMeImage 設定」での設定は一時的なもので、その内容はスクリプトによってHDDに保存されることはなく、Webブラウザが使うメモリやキャッシュ上にあるだけです。
  • POPUPボタンやLISTボタンを押して表示されるウインドウ上にある「Create New Popup」ボタン押して画像や動画のアドレスを入力し、ポップアップを生成できます。
    これは「作業所」ページにあるイメージビューアコンソールの機能縮小版のようなものですが、「Create New Popup」ボタンはPOPUPボタンやLISTボタンが存在するページであればどこでもそれを介して使えます。
    画像や動画へのアドレス指定エディタで画像や動画へのパスを1つ渡せば通常のポップアップが生成され、複数のパスをセミコロン;で区切って渡せばページ・イメージビューアが開きます。
  • テスト段階ですが、DROP-ME-IMAGEのDescエディタにて「<html>;</html>;」が使えます。
    下のリンクにあるCollect and Display ダンボールの「砂場サンプル」ページにてその動作確認ができます。
    DROP-ME-IMAGE Descの今までのテキスト解釈では表現が難しかった表などがHTMLのTableで表現できます。

【その他】
  • いくつかの設定にてデフォルト値の調整を行いました。
  • settings_jp.htmlのリストアイテムのシャッターやdropMeImageのパートなどで新たに設定できる項目が追加されています。

【ダウンロード】
  • Collect and Displayはベクターでダウンロードできます。 (予定)


Collect and Display 3.0
【全般】
・タッチパネルでも機能するよう取り組みました。


【HTML5 video】
・Videoの軸をVLCからHTML5 videoへと切り替えました。


【新しいイメージビューア】
・そのページで動作するイメージビューア「ページ・イメージビューア」を追加しました。
・別タブで動作する初期からあるイメージビューアとは異なりメインページで動作するためWebブラウザによりスリープ状態にされる事がなく、動作の安定が期待できます。


【砂場のDropMeImageを強化】
・DropMeImageはlocalStorageを保存手段とする一時用途の画像メモです。HTMLエディタ無しですぐに使えます。



リンク


スクリーンショット




Since 2014
inserted by FC2 system