Movable Type 備忘録

 Octopus Engine

  • Apr232006
  • Vote:
    http://bizcaz.com/archives/2006/04/23-234925.php
  • Categories: Tools
  • Tags: ,
  • Social Bookmark

わたしのブログ内でも使っていた、Octopus Engine(オクトパス・エンジン)の使い方を紹介してみようと思います。

既に知っている人もいると思いますが、Octopus Engine(オクトパス・エンジン)って何？って人のためにカンタンに説明しますね。

Octopus Engine(オクトパス・エンジン)とは、通常、角丸な矩形を表現する場合、CSSだけで表現することもできますが、影をつけたりなど、ちょっとグラフィカルに表現しようと思ったらテーブルを使って画像を貼り付けたりしますよね。 ですが、テーブルによるグラフィカルな矩形は固定幅が基本です。 そこで、可変幅にも、グラフィカルな矩形を可能にしたのがOctopus Engine(オクトパス・エンジン)という技術？なんです。

具体的には、タコの足のように8方向にそれぞれのイメージをCSSのクラスに割り当てることで実現します。 CSSのクラス名を変えれば、違ったイメージ、例えば角丸やエンボスのかかった矩形にカンタンに変更することができます。 わたしのブログでも、トップページの上の方にある茶色がかった矩形と、その下のエントリの矩形というかんじで使い分けています。

Octopus Engine(オクトパス・エンジン)といっても、何かプラグインなどをインストールすわけでもなく、CSSと8方向のイメージを作るだけなのでカンタンなんです。 強いて言えば、その8方向のイメージを作る方が難しいかも、です。

わたしの説明ではちょっと分かりづらいと思いますので、さらに詳しい内容はこちらのサイトDragon Labs | Octopus Engineを参照してください。英語なんですけど汗２もっと分かりづらいかな汗２

Octopus Engine(オクトパス・エンジン)を使わず、ちょっとした角丸な矩形を表現するなら以下のような矩形をCSSでカンタンにできます。

CSSで角丸な矩形

どうですか？カンタンに角丸な矩形できたでしょ？

そして以下がコードになります。

  1. <div id="region">
  2.     <b class="rtop"><b class="r1"></b><b class="r2"></b> <b class="r3"></b><b class="r4"></b></b>
  3.     <div style="font-size:18px;">CSSで角丸な矩形</div>
  4.     <p>どうですか？カンタンに角丸な矩形できたでしょ？</p>
  5.     <b class="rbottom"><b class="r4"></b><b class="r3"></b> <b class="r2"></b><b class="r1"></b></b>
  6. </div>
  1. こちらはCSS
  2. #region {
  3.     margin: 0 10%;
  4.     background: #F2EEE5;
  5. }
  6. b.rtop, b.rbottom {
  7.     display:block;
  8.     background: #ffffff;
  9. }
  10. b.rtop b, b.rbottom b {
  11.     display:block;
  12.     height: 1px;
  13.     overflow: hidden;
  14.     background: #F2EEE5;
  15. }
  16. b.rtop b.r4, b.rbottom b.r4 {
  17.     margin: 0 1px;
  18.     height: 2px;
  19. }
  20. b.r1{ margin: 0 5px; }
  21. b.r2{ margin: 0 3px; }
  22. b.r3{ margin: 0 2px; }

でも、今回はこんな平面的なものではなく、もっとグラフィカルな矩形です。 こちらがデモです。 わたしのブログ内の各所でも同じような矩形が表示されていると思います。
では、Octopus Engine(オクトパス・エンジン)の使い方を説明します。

  • 上記リンク先から octopus.zip という圧縮ファイルをダウンロードします。
    ダウンロードした圧縮ファイルを適当なフォルダに展開してください。その中に、octopus.js というJAVAスクリプトがありますので、そのスクリプトをサーバーにアップロードします。アップロード先はどこでも構いません。 ここでは例として、トップページと同じ場所にアップロードするものとして説明していきます。
  • 次に、Octopus Engine(オクトパス・エンジン)で使うイメージをアップロードします。
    先ほどの圧縮ファイルの中に以下に示す8つのイメージファイルが入っていますので、各イメージをアップロードしてください。 複数ありますがどれでも構いません。
    1. ・north.png、south.png、east.png、west.png
    2. ・nw.png、ne.png、sw.png、se.png
  • 次に<head>～</head>の中に以下のコードを追加します。
    1. <style type="text/css" media="projection, screen">
    2. .octopus {
    3.     width: 100%;
    4.     clear: both;
    5. }
    6. .north { background: url(/image/template/north.png) repeat-x top; }
    7. .east { background: url(/image/template/east.png) repeat-y right; }
    8. .south { background: url(/image/template/south.png) repeat-x bottom; }
    9. .west { background: url(/image/template/west.png) repeat-y left; }
    10. .ne { background: url(/image/template/ne.png) no-repeat top right; }
    11. .se { background: url(/image/template/se.png) no-repeat bottom right; }
    12. .sw { background: url(/image/template/sw.png) no-repeat bottom left; }
    13. .nw { background: url(/image/template/nw.png) no-repeat top left; }
    14. </style>
    15.  
    16. <script language="JavaScript" type="text/javascript" src="/octopus.js" charset="utf-8"></script>
    青い字の部分を各自の環境に合わせて変更してください。できれば、フルパス(http://xxxx.com/image/～)で記入した方がGOODです。
  • そして、実際に矩形表示させる場所に以下のコードを追加します。
    1. <div class="octopus">
    2.     ここにエントリの本文など、適当なコンテンツを書きます。
    3. </div>
  • 追加したら、保存してブラウザで表示してみてください。
    どうですか♪グラフィカルな矩形が表示されたでしょ？ 先ほどの圧縮ファイルの中に、フォトショップのプロジェクトが入っていますので、自分好みでイメージを作ることができますよ。

以上で、Octopus Engine(オクトパス・エンジン)を使った、グラフィカルな矩形を表示することができました。 何度やっても表示されない…という人はメルしていただければ、わたしの使っているスタイルシートとサンプルコードを送ります。

SEE YOUハート２

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード