2007/11/23(金)せりかのアルバム adiary ver.1.05

一通り作った.
でも,普通に使ってると要らないと思われる機能ばかり.

もうちょっとデバッグしたら公開できると思う.

変わった点

インターフェース

フォルダリスト,画像の表示領域が最大になるように調節してあります.
Javascriptを使ってサイズを調整しているため,Javascriptが使えない環境だと表示が崩れる可能性があります.

ログインしているときの表示
ログイン時の表示1
ログイン時の表示2

ログインしていないときの表示
非ログイン時の表示

複数ファイルのアップロード

複数のファイルをまとめてアップロードできるようになりました.
ファイルサイズの制限は,1つずつではなく,アップロードするファイルの合計サイズがチェックの対象になります.大きなファイルをアップロードしたい時は,まとめてアップロードするのではなく,1つずつファイルを指定してください.

同時にアップロードできるファイル数に制限はありません.
+/- ボタンをクリックすることでアップロードフォームを追加/削除することができます.

複数ファイルのアップロード

サムネイルのアップロード

ファイルをアップロードするとき,サムネイル画像を指定すればその画像がそのまま使われます.サムネイルだけの置換はサポートしていません.すでにアップロード済みのファイルにサムネイルを指定したい場合は,ファイルを一度削除後,改めてアップロードしてください.

注意

ここでアップロードされるサムネイルはjpg画像であることが前提になっています.
他の形式はサポートしていないため,あらかじめjpg画像に変換してからアップロードしてください.

画像以外をアップロードしたときのサムネイルの作成

画像以外のファイルをアップロードしたとき,画像情報を元にサムネイルを作成するようになりました.

以下の機能は暫定的なものです.将来,機能自体を削除する可能性もあります.

TrueTypeFontを用意することでサムネイルにファイル情報を埋め込むことができます.ここで埋め込まれる情報は,ファイル名,ファイルサイズ,アップロードしたときの日付です*1
詳しくはインストールの仕方を参照してください.

*1 : そのうち書式化したいところだけど...

ダウンロード

ダウンロード@せりかのアルバム adiary出張版

一応ここにも置いておく.
adiary-album-1.05.lzh

インストール・アップデートの仕方

使い方@せりかのアルバム adiary出張版

uploader.conf.cgiでの変更箇所

  • スケルトンディレクトリの指定{<$Skelton_dir = "<@Skelton_dir>uploader/">}
  • フォントの指定{<$v.font = '/usr/X11R6/lib/X11/fonts/TTF/xxx.ttf'>}\サムネイルに画像情報を埋め込まない場合は必要ありません
  • スケルトンディレクトリを指定した事によるパスの変更{<$v.form_skelton = 'form'>}{<$v.response_skelton = 'response'>}{<$v.error_skelton = 'error'>}{<$v.album_skelton = 'album'>}
  • アイコンフォルダの指定{<$v.album_icons = "<@Diary.public_dir>uploader/">}
  • アイコンの指定{<$v.etc_icons = begin_hash>}{ . = nothumb.gif}{ lzh = lzh.gif}{ zip = zip.gif}{ mp3 = mp3.gif}{ m4a = m4a.gif}{ wma = wma.gif}{ ogg = ogg.gif}{ avi = avi.gif}{ wmv = wmv.gif}{<$end>}

追加機能

フォントの指定

この機能は暫定的なものです.将来,機能自体を削除する可能性もあります.

TrueTypeFontがあると,画像以外をアップロードしたときにサムネイルにファイル情報を埋め込むことができます.フォントは各自で用意してください.また,日本語フォントはライセンス的にきわどいところが多いため,フォントファイルはウェブからアクセス出来ないフォルダに置くようにしてください.

表示例

左がフォントを指定したときのサムネイル,右がフォントを指定しなかったときのサムネイルになります.

フォントを指定したときと指定しなかったときの違い

この例ではhttp://www.tosu.org/Osaka fontのUNICODE版を利用させて貰っています.

パスの指定

<$v.font = '../osaka.unicode.ttf'> # 相対パスで指定
<$v.font = '/usr/X11R6/lib/X11/fonts/TTF/xxx.ttf'> # 絶対パスで指定
上記の様にフォントファイルへのパスを指定したあと,先頭の#を消す必要があります.

現時点での修正点

  • アニメgifをアップロードしたとき,先頭のコマのみをサムネイルにするように修正
  • メール投稿時ファイルがアップロード出来なかったバグを修正
  • 日本語ファイル名の画像をアップロードしたとき,一部のブラウザで正しく表示できなかったバグを修正
  • ファイル・フォルダの構造を変更
  • 複数のファイルを同時にアップロードできるようにした
  • サムネイル作成時にファイル情報を埋め込めるようにした
  • サムネイルファイルをアップロードできるようにした
  • Javascriptを別ファイルに分割した
  • アイコンをいくつか追加した
  • NetPBMによるサムネイルの作成機能を削除

FAQ

  • サムネイルを指定してアップロードしたのに,サムネイルが正しく表示されない
    • サムネイルはjpg形式でしたか?\現在のバージョンではjpg以外の形式には対応していません.画像の形式を変換するフリーソフトがいくつかありますので,そちらで形式を変換後アップロードしてください.
  • 埋め込みサムネイルを利用したい\未対応です.ImageMagickだけではexif情報を取得することができないため,未対応としています.
  • フォントを指定したのにファイル情報が出ない
    • アイコンが真ん中に表示されている\フォントパスの指定が間違えているようです.正しく設定されているか確認してください.
    • アイコンが上半分に出て,下半分が真っ白のまま\フォントファイルが壊れているか,Unicodeフォントではないようです.最近のフォントは大体Unicodeにマップされていますが,Shift-JISにマップされているフォントもあります.そのようなフォントはここでは利用することが出来ません.Unicodeに対応したフォントファイルを用意してください.

ToDo

  • ゴミ箱機能の実装
  • ファイル
    • 移動
    • 加工
      • 90度回転
      • 落書き
  • フォルダ
    • 管理
    • 削除
  • サムネイル
    • 単品でのアップロード
    • 再作成
    • jpg以外への対応

2007/11/10(土)せりかのアルバム 4 adiary ver.1.04

ブラウザによって動作が違いすぎる...
というより,IEの独自仕様がつらい.

せりかのアルバム adiary出張版 ver.1.04

small

機能(uploader.pm)的に中身は変わってないんだけど,インターフェース(album.html)的に大きく変わりました.これ以上深追いすると大変なことになるので,現状はこのへんで止めておく.っていうか眠い.
明日もうちょっと手直ししてから1.04としてアップロードする.
ダウンロード@せりかのアルバム adiary出張版

一応ここにも置いておく.
adiary-album-1.04.lzh

インストール・アップデートの仕方

使い方@せりかのアルバム adiary出張版

現時点での修正点

  • デザイン
  • 複数ファイルをまとめて貼り付けられる
  • ダブルクリックで直接貼り付け
  • サムネイルの表示のみで大きな画像は出さないようにした
    • 必要なら画面上に出る画像のURLをクリック

ToDo

多分,冬のイベントに合わせて次の機能は付けると思う.

  • 複数ファイルをまとめて削除
    • というより,フォルダの移動
    • ゴミ箱機能の実装
  • サムネイル再作成
    • サムネイルのアップロード
  • ハッシュによるファイルの追尾
  • 2段以上のフォルダのサポート
  • javascript別ファイル化
    • スクリプト書き直し

既知のバグ?

  • IE7での動作がおかしい?
    • 右側のサムネイル表示部分の幅が怪しい.\\heightと同様にresizeに合わせて再計算すべきかも.

めも

  • onresizeに合わせてサイドバーのheightを変更.
    • ウィンドウの高さは,document.documentElement.clientHeightで取得.
      • サイズが取得できるってことは,他のブロックで必要なサイズを除けば最大値がだせる?
    • 大体65%位がちょうどいい?
  • IEはclassName,他はclassでクラス名を指定.
  • ダブルクリックのイベントは,クリックのイベント後に発生
    • クリック時にダブルクリックが発生することを知ることができない
      • タイマーつかって,遅延の処理を入れる?
        • 面倒だし,そこまでの価値は無い
    • ちらつくけど仕方が無い

参考サイト

IE の getAttribute / setAttribute
class属性値をgetAttributeで取るときは、、、
ブラウザの表示領域のサイズを取得するには