チュートリアル9(画像表示)

ブログページの画像部分を実装します。

tutorial3/logic/BlogHtml.java①
1:
2:
3:
4:
5:
    private void setImagePath( Attribute attr, int article_no, int image_no ) {
        Article article = Article.db.get( article_no );
        String  path = URIAttribute.pageToDownloadURI( PageType.PHOTO, new java.io.File( article.image[image_no] ).getName(), Photo.ARTICLE + "=" + Integer.toString( article_no ), Photo.IMAGE + "=" + Integer.toString( image_no ) );
        attr.set( path );
    }

ここで生成されるパスは、
rabbit/lu.1h4mqv.mo.99ouiq.on.2oc7ul.na/image.jpg?article=0&image=1
のような形式になります。

tutorial3/logic/BlogHtml.java②
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
    private void addArticle( int no ) {
        if ( Article.db.size() <= no )  return;
        BlogHtml    dummy = (BlogHtml)PageLoader.getPageFactory().getPage( PageType.BLOG_HTML );
        Article article = Article.db.get( no );
        dummy.getJumpA().setAttribute( new Attribute( "name", "jump" + Integer.toString( no % MAX_ARTICLE ) ) );
        dummy.getDateDiv().setValueString( article.getDate() );
        dummy.getTitleDiv().setValueString( article.title );
        //dummy.getTextDiv().setValueString( article.text );
        dummy.getTextDiv().removeHTMLPart();
        dummy.getTextDiv().addHTMLPart( new PlainText( article.text ) );
        Text    category = new Text( "カテゴリ: " );
        for ( int i = 0; i < article.category.length; i++ ) {
            if ( article.category[i] ) {
                category.append( Article.CATEGORY[i] );
                category.append( " " );
            }
        }
        dummy.getCategoryDiv().removeHTMLPart();
        dummy.getCategoryDiv().addHTMLPart( category );
 
        if ( article.image[0] == null ) {
            dummy.getTopImageLinkA().setVisible( false );
        }
        else {
            setImagePath( dummy.getTopImageLinkA().getAttribute( "href" ), no, 0 );
            setImagePath( dummy.getTopImageImg().getAttribute( "src" ), no, 0 );
        }
        if ( article.image[1] == null ) {
            dummy.getBottomImageLinkA().setVisible( false );
        }
        else {
            setImagePath( dummy.getBottomImageLinkA().getAttribute( "href" ), no, 1 );
            setImagePath( dummy.getBottomImageImg().getAttribute( "src" ), no, 1 );
        }
 
        this.getMainDiv().addHTMLPart( dummy.getArticleDiv().getReplica() );
    }

画像部分は、
<A><IMG></A>
の構造になっています。
画像が無ければ<A>タグごと非表示にします。
画像があれば、<A>タグのhrefと、<IMG>タグのsrcの内容を、setImagePath を使い書き換えます。

今回も Gate クラス等には手を加えていませんが、ひとまず完成とします。

ただし、このサイトの場合、1つ問題があります。アップロードされた画像のファイル名です。
クライアントから送られたファイル名をそのまま使用しているため、たまたま異なる記事で同一名称の画像がアップロードされてしまうと古い同名ファイルは上書きされてしまいます。
また同様に記事の削除と連動してアップロードファイルを削除しますが、上の例の場合、2つの記事が同じ画像を使っているため、一方の記事を削除すると、もう一方の記事では画像がリンク切れとなってしまいます。

サイトの性質にもよりますが、今回のようなサイトではアップロードしたファイルは全てユニークなファイル名に変換して保存すべきです。