せりかログ

検索条件

全3件 (1/1ページ) 一覧表示に切り替え記事本文を表示

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

adiary::アルバム

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

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

変わった点

インターフェース

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

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

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

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

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

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

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

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

注意

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

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

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

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

TrueTypeFontを用意することでサムネイルにファイル情報を埋め込むことができます．ここで埋め込まれる情報は，ファイル名，ファイルサイズ，アップロードしたときの日付です*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以外への対応

コメント（0件）

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

adiary::アルバム

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

動作したブラウザ

完全に動作した

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
- ~~４－５件くらいサポートすれば十分？~~
- 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でまとめて別記事行きか．

コメント（0件）

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

ToDo

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

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

既知のバグ？

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

めも

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

参考サイト

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

コメント（0件）