倭マン's BLOG

くだらない日々の日記書いてます。 たまにプログラミング関連の記事書いてます。 書いてます。

Forrest を使ってみる (3) : プロジェクト・ロゴとグループ・ロゴ

今回はプロジェクト・ロゴとグループ・ロゴについて少々(一覧)。

Forrest では、プロジェクト・ロゴやグループ・ロゴは skinconf.xml ファイルの「skinconfig/project-logo/text()」や「skinconfig/group-logo/text()」を読み込んで、自動的に PNG ファイルを作成してくれます(自作の画像ファイルを使うことも可能)。 ただし、デフォルトの設定では、何故かプロジェクト・ロゴが見切れてしまってます(Forrest がバージョンアップしても修正されないのが謎)。

今回は、それの修正方法と、その他にグラデーションや色の変更方法を見ていきます。

★project.svg


まずは、プロジェクト・ロゴとグループ・ロゴを設定しているファイルをみてみましょう。 これは、以下のパスで指定される SVG*1 ファイルです:

${ForrestSite}/src/documentation/content/xdocs/images/project.svg
${ForrestSite}/src/documentation/content/xdocs/images/group.svg

これらはどちらも同じような内容なので、ここでは project.svg の内容を見てみます(コメントは適当に省略):

<?xml version="1.0" standalone="no"?>
<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     xsl:version="1.0"
     xmlns:for="http://apache.org/forrest"
     width="420" height="65" >

  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
      <stop style="stop-color:white" offset="0"/>
      <stop style="stop-color:lightgreen" offset="1"/>
    </linearGradient>

    <filter id="shadowFilter" filterUnits="objectBoundingBox" width="1.4" height="1.4">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2 2" result="blur"/>
      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
      <feComposite in="SourceGraphic" in2="offsetBlur" operator="over"/>
    </filter>
  </defs>

  <g filter="url(#shadowFilter)" fill="url(#gradient)">
    <text x="100%" y="60%" style="font-size:24pt; font-family:Verdana ; text-anchor: end" >
    <for:project-name />
    </text>
  </g>
</svg>

★プロジェクト・ロゴの修正★


まずは、プロジェクト・ロゴの修正方法を。 拙者はあんまり SVG に詳しくないので(というか仕様書を読もうとして挫折した*2)、以下の方法は結構力業ですが、まぁ結果オーライってことで。

上記のサンプルに対して下表のような変更

変更する属性(への XPath 式) 変更前の値 変更後の値
svg/@width 420 500
svg/g/text/@x 100% 80%

を施すと、プロジェクト・ロゴは次のようになります(プロジェクト名*3は「Waman World」としています):


きちんと見切れないようになりました。

★グラデーションの変更★


project.svg には、コメントアウトされた形で2つのグラデーションが定義されています。 試しにこれらを使ったプロジェクト・ロゴを観てみましょう。

Linear Gradient

「Linear Gradient」は直線的なグラデーションです。 このグラデーションを使用するための変更は以下の通り:

変更する属性(への XPath 式) 変更前の値 変更後の値
svg/defs/linearGradient コメントを外す
svg/g/@fill url(#gradient) url(#linearGradient)

この結果、プロジェクト・ロゴは以下のようになります:

Radial Gradient

「Radial Gradient」は円形のグラデーションです。 このグラデーションを使用するための変更は以下の通り:

変更する属性(への XPath 式) 変更前の値 変更後の値
svg/defs/radialGradient コメントを外す
svg/g/@fill url(#gradient) url(#radialGradient)

この結果、プロジェクト・ロゴは以下のようになります:

★色の変更★


次の変更はグラデーションの端の色を変更しています。 同時にフォントサイズも変更してますが、これには特に意味なし。

変更する属性(への XPath 式) 変更前の値 変更後の値
svg/defs/linearGradient/stop/@style[@offset = 0]/@style stop-color:white stop-color:magenta
svg/defs/linearGradient/stop/@style[@offset = 1]/@style stop-color:lightgreen stop-color:red
svg/g/text/@style font-size:24pt;
font-family:Verdana ;
text-anchor: end
font-size:18pt;
font-family:Verdana ;
text-anchor: end

変更結果は以下のようになります:

*1:Scalable Vector Graphics

*2:SVG に定義されている要素のうち、フィルター効果やアニメーションを指定するものに同じ接頭辞のもの(feXxxx や animateXxxx のようなもの)が沢山ありますが、XML でこれらを定義するなら、別の名前空間を新に定義して、接頭辞の分類も XML 名前空間の機能を使えばもう少しスッキリすると思うんですが。

*3:これは skinconf.xml で指定するのでした。