BiND+IDでサイトを作ってみた

5,887 views
9月 16, 2007 by 組長
Filed under: BiND for WebLiFE*, Download, DS*Style, ID for WebLiFE*

BiNDとIDでフォトギャラリーサイトを作ってみたので公開します。そして、気づいた点など少々。

まず、作成したサイトはこちらです。
「赤き瞳で綴るフォトサイト?USAGIGUMI::Foto」
http://red.usagigumi.net/

制作約2日間、BiNDのテンプレートを使わず、新規ページから配色など自分で作りました。そこに、前から作ってあったIDのフォトギャラリーがあったので、1サイトになっていたものをバラバラにして(1作品1サイトにして)BiNDと連携させました。

※注
以下に書くのはWindows版BiNDに関するものです。
それから、使い勝手とか不具合&要望は他のサイトの方が書かれているようですので、うさぎ組では「BiND+IDで気づいた点」をメインに書いていきたいと思います。

—

(1)動作は重たいが良く出来ている
サクサクは動かないが、ここまで自動で作ってくれるなら我慢の範囲内。
今後のカートリッジ(テンプレート)が出る事を考えると、発売当初でこれだけのサイトが作れるのなら十分ではないでしょうか。文句あるなら他のエディター使えばいいわけですから。
組長的には、ソフトを使いながら「こうしたらどうなる?」「ああしたらどうなる?」とアイデアが湧いて出てきて久々に楽しめました。

(2)エリアとブロックの関係はとっても大事
カートリッジ(テンプレート)から入ると分かりにくいんですが、新規でオリジナルページを作ってみると最初に表示されるのがこれ。

この、ヘッダー、ビルボード、コンテンツ、フッターというのが四大エリアです。
マニュアルの図解には載っていませんが、コンテンツはメイン、サイドA,Bを括っている枠と考えたらいいと思います。

そして、各エリアの配下にブロックが配置されます。ここで重要なのは、
「ブロックを上下させて順序を入れ替えられるが、エリアを超えて順序の入れ替えをする事ができない」
ということです。
カートリッジ(テンプレート)をベースに自分仕様にデザインを変えていく際、メニューなどがどのエリアに配置されているかを理解しておかないと、思った場所にブロックを移動させられなくてイライラするかもしれません。

(3)IDユーザーならIDを徹底活用すべし
せっかくなので、どんどん連携しちゃいましょう。HTMLっぽくないリッチなサイトが出来上がります。
ただ、ID下部のメニューの20ピクセル分がポッッコリ開いてしまうバランスの悪さが個人的には許せず(細かくてスイマセン)、「下20ピクセルを上下10ピクセルにするメニュー」を急遽作成しました。
これで少しバランスが良くなります。組長同様、細かい方はダウンロードして使って下さい。

BiND NonMenu 解説ページ

(BiNDの特典ダウンロードなど参考にして、IDのメニューフォルダに入れてさい。)

(4)IDサイトを配置するならビルボードエリアにするべし
メインエリアなどは余白(padding)が設定されているため、Lサイズなど825px幅のカートリッジを配置すると右側が切れてしまいます。
IDサイトを配置する場合はビルボードエリアを使い、必要であればテキストもビルボードエリアにブロックを追加し、体裁をスキンで整えるなどの工夫をしましょう。

(5)ID側でサイトコピーした場合はHTMLテンプレートの更新もするべし
細かい事ですが、BiND側で「ID Flashパーツ設定」を選択してIDサイトを開く部分があります。ここのプルダウンメニューに表示されるIDサイト名が、ID側でサイトコピーした時に実態と一致しなくなる場合があります。(上手く説明出来ませんが)
こうなった場合は一旦BiNDを終了し、ID側で該当するサイトを開き、HTMLテンプレートを設定し直してあげる(同じHTMLテンプレートを選択してOKする)と良いみたいです。
サイト作成当初はIDパーツの名前がおかしくても思い出せますが、時間が経つと「これなんだっけ?」状態になってしまうはずなので注意しましょう。

以上、また気づいた事があれば更新します。