2007/12/01(土)IIS 5.1

動作が謎すぎる.
Image/Magick.pmをロードしようとすると固まる.
AN HTTPD + ActivePerl with ImageMagickでは問題なくサムネイルが作れるのに.

ソースは公開しているので,だれかIISに詳しい人に任せたいところ.

その後 2007/12/01

PATHを変更した後は再起動が必要だったらしい.
サービス停止,起動だけでは再読込されないらしく,PC自体の再起動が必要っぽいです.

おかげで,無事にサムネイルは作れました.

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/21(水)文字の扱い

ImageMagickは文字を画像に埋め込むのにTTFを要求する?
GDだと欧文の場合,フォント指定無しでいける模様.

もうちょっと調べてみないことには分からないけど...
フォントを必要とする場合はどうしよう.

フォント 2007/11/22

やっぱり必要らしい.
サムネイルにファイル情報を埋め込みたいときは,ユーザにフォントを用意して貰うことにする.

2007/11/19(月)アニメGIFの扱い

標準アップローダ,せりかのアルバム 1.04までにはアニメGIFをアップロードしたとき,すべてのコマを展開してしまうバグがあります.
10コマ程度ならまだ笑えますが,数百コマを超える巨大GIFアニメを展開しようものならそれだけでサーバの容量を食いつぶしかねませんのでアップロードしないように注意する必要があるっぽいです.

せりかのアルバムでは1.05以降で修正します.
アップデートが待てない方は,各自でファイルを修正してください.

修正箇所

ファイル:lib/Satsuki/Uploader.pm

  • 標準アップローダーの場合\261行目
  • せりかのアルバムの場合(全バージョン共通)\304行目
eval { $image->Read( $save_file_real ) };

eval { $image->Read( $save_file_real."[0]" ) };

に修正

2007/11/17(土)せりかのアルバム 1.05 開発中

オフィシャルの方にマージ出来るようにファイル構造やメソッドを整理中.

動作したブラウザ

完全に動作した

  • IE 7
  • Firefox 2
  • Safari 3

制限付きで動作

  • IE 6\CSSのmax-heightが効かないらしい
  • Opera\Javascriptで幅が正常に設定できないらしい\高さは正しく設定できているので,スクリプトのミスだと思う

悩みどころ

CSS

IEとFFの違いが強敵
-> 攻略済み? @ 1.05
Javascriptに逃げることにした.
そのため,Javascript, CSSが使えない環境ではせりかのアルバムを利用することは出来ません.
CSSの都合上IE 6以前で微妙に表示がおかしかったりするかもしれない.

フォルダの管理

  • 毎回探索するなんて馬鹿なことはやってられない.
    • 適当にキャッシュファイルを作って管理する?
  • ftpソフトでフォルダを作られたときにどう対処するか.
    • アルバム管理メニューにリフレッシュボタンを作る
  • 何階層までフォルダを作れるようにするか
    • confで上限を指定?
    • 気にしない?

画像表示部分

  • 複数の表示モードをサポートするか
    • サムネイル(標準)
    • スライドショー
    • 管理モード\これがないと画像の管理ができない.

アップロード

  • 複数ファイルをまとめてアップロード\ -> 仕込みは終わってる @ 1.05
    • 4-5件くらいサポートすれば十分?
    • Javascript + DHTMLで制限無し\ -> 実装済み @ 1.05
  • 圧縮ファイルの展開
    • アーカイブの展開に対応する?
    • 展開後のファイルサイズのチェックが必要
  • 画像サイズの変更
    • 上限を決めておき,強制的に縮小する

サムネイル

  • アップロード時に,サムネイルも同時にアップロードできるようにする\画像の場合,アップロードされたサムネイルが優先し,画像から作成はしない.\ -> 実装済み @ 1.05
  • exifの取得
    • PerlMagickでは無理
    • exiftool使えばいける...使いたくない
  • サムネイルの再作成
    • 純粋に再作成する\サムネイルだけを削除できれば作り直せるんだけど
    • サムネイルファイルをアップロードし,上書きする
  • 拡張子に合わせたサムネイルの用意
    • 有名な形式くらいはサポートしたい...けど...面倒\ImageMagick使ってなんとかならないか?
  • 対応希望拡張子
    • アーカイブ(lzh, zip, tar, gz, tgz, rar)
    • 文書(txt, doc, pdf, c, cpp, h)
    • 音楽(mp3, m4a, wav, ogg, wmv)
    • 動画(avi, mpg, mpeg, mp4, qt, mov, rm, rmv, flv)

ハッシュ

  • ファイルをハッシュで管理する?
  • 管理
    • ハッシュ用フォルダの作成
  • 同じハッシュがあったときの動作
    • アップロードしない
    • 連番付けてアップロードを許可?
      • この場合,正しく追跡できなくなる
    • 上書きする

画像の加工

  • 回転
    • 90度回転くらいは欲しい
  • サイズの縮小
    • 適当なサイズに縮小したい
  • 落書き
    • 画像に文字を入れたりしてみたい
    • Javascriptでは無理?
    • flashの方が簡単だろうなぁ

----------------------------------------
1.05で実装する機能だけではなく,今後実装したいと思っている機能リストらしい.

そのうち,ToDoでまとめて別記事行きか.

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で取るときは、、、
ブラウザの表示領域のサイズを取得するには

2007/10/27(土)せりかのアルバム adiary出張版

なんとなく作ってみた.
本家のC言語版に比べると使い勝手は微妙かもしれないけど,今の単純なアップローダーよりはましになってるはず.

暫定版なので適当です.致命的なバグとか,実装が楽な要望以外はスルーです.ただ,今のうち要望しておいてもらえれば正式版の時に実装されるかもしれません.
1.06よりadiaryにマージされました.

現在のバージョン:1.06
開発中のバージョン:1.07

機能一覧.

  • 日記帳を書き込む権限が無くても表示可\当然日記を書く権限が無ければアップロード出来ません.
  • フォルダを作ることができる\何階層でも作れます.
  • ファイルをアップロードすることができる
  • ファイルと同時にサムネイルをアップロードすることができる.
  • 画像を選択し,日記帳に埋め込むことができる
  • ファイルを移動することができる
  • フォルダを移動することができる
  • ゴミ箱を利用することができる.というより強制.\ゴミ箱にはファイルだろうが,フォルダだろうが入れることができます.
  • ゴミ箱をからにすることができる.

mixiコミュで議論に上がってる点は一通りサポートしてるはず.
記事を削除したときーはuploader側の仕事では無いので機能に入れる予定無し.

既知のバグ

1.06の段階では無し

ToDO

  • デザインの統一\[s:できれば,標準で選択されているスタイルシートに合わせたいところ.]

他に何か欲しい機能があればコメントください.
ただ,コメントもらっても実装するかはせりかのやる気次第ですが.

ダウンロード

オフィシャルにマージされるまでは,この記事からリンクしておきます.ご利用は各自の責任でお願いします.
このアルバムはadiary-1.xx向けです.adiary-2.xx以降はマージ済みなのでインストールする必要はありません.

注意

1.05からファイルの構造が変わっています.

あくまでも暫定版です.
オフィシャルにマージされるときには仕様が変更になる可能性もあります.
というより思いっきり変わります.
adiary-album-1.05.lzh
adiary-album-1.04.lzh
adiary-album-1.03.lzh
adiary-album-1.02.lzh
adiary-album-1.01.lzh

使い方

1.04以前からのアップデート

一部フォルダ・ファイルの構造が変わっています.
お手数ですが,以下のファイルをFTPソフトなどで削除した後,インストールを行ってください.

  • 削除が必要なファイル
    • diary.user.skel/edit_diary.html
    • diary.user.skel/uploader/ 以下の全てのファイルとフォルダ
  • 削除しなくてもゴミが残るだけのファイル
    • public/noimage.jpg
    • public/nothumb.jpg

uploader.conf.cgiでの設定項目がいくつか増えています.
新しいsampleファイルを元に書き直して貰うほうが早いかもしれません.

変更箇所はuploader.conf.cgiでの変更箇所@せりかのアルバム 4 adiary ver.1.05参照

インストール

ダウンロードして解凍して出てきたものを上書き.
あとは,同梱のuploader.conf.cgi.sampleを元に設定書くと動きます.標準のuploader.cong.cgiをそのまま使ってる人は同梱のファイルを同じようにリネームするだけで動きます.

メール投稿への対応

mail.conf.cgiの最後に次の1行を追加する必要があります.
<$Uploader.allow_upload = 1>

更新履歴

1.05 -> 1.06 (12/31)

  • 本ver. よりadiaryに統合
  • フォルダを作れる階層に制限が無くなった
  • ゴミ箱機能の実装\ファイル/フォルダを削除するときは,一度ゴミ箱に移動する必要があります.
  • ファイル/フォルダの移動を実装
  • 詳細はせりかのアルバム adiary ver.1.06参照

1.04 -> 1.05 (11/23)

  • アニメgifをアップロードしたとき,先頭のコマのみをサムネイルにするように修正
  • メール投稿時ファイルがアップロード出来なかったバグを修正
  • ファイル・フォルダの構造を変更\それに伴い,一部のファイルを手動で消して貰う必要があります.
  • NetPBMによるサムネイルの作成機能を削除
  • 詳細はせりかのアルバム adiary ver.1.05参照

1.03 -> 1.04 (11/11)

  • デザインを変更\現在のデザインを元にアルバムの開発に進むと思う
  • 複数ファイルを選択して,一括貼り付けができるようになった
  • IE 7での動作が怪しいかも.widthも動的に変えるべきかもしれない.(11/12)
  • 詳細はせりかのアルバム 4 adiary ver.1.04参照

1.02 -> 1.03 (10/30)

  • mod_perlが悪さをしてサムネイルが表示されない点を修正

1.01 -> 1.02 (10/29)

  • yyyymmのフォルダが無条件に作られてしまう点を修正
  • 旧シングルユーザモードでサムネイルが表示されないことがある?\[s:自分の環境で再現できないため不明]
  • mod_perlが悪さをしてサムネイルが表示されない\原因は分かったのですが...
  • upload.cgiのパスの取得方法を変更

続きを読む