BiND2のスペックに掲載していない改善点をご紹介
2008年09月07日 19:36 [ BiND for WebLiFE* ]
お久しぶりです。
デジタルステージ平野です。
さて、いよいよ9月19日に発売になるBiND2。
すでにオフィシャルサイトで細かい情報も出ていますし、ビデオでの紹介もされていますが、いかがでしょうか？
でも、ウェブ制作ソフトのキモは、そういうスペック上、キャッチコピーは分からない、細かい点が大事ですよね？
そこで今日はみなさんに、公式サイトには掲載していない、細かなバージョンアップや改善点をお知らせしようと思います。
マニアックな内容ですが、興味のある方は、どうぞ（＾＾。
カタログには掲載されていない16のマニアックな改善機能
[1] 不要なタグをできるだけ減らし奇麗なHTMLソースにする。
[2] Dreamweaverでの修正が可能なHTMLソースにする。
[3] Ajaxの動作を軽快にする。
[4] Internet Explorer 6と他のブラウザのデザインの差をなくす。
[5] ブロック内の変な隙間をなくす、調整できるようにする。
[6] ブロック間の隙間すらゼロにする裏技。
[7] テーブルやインデントの独自ルールを改善。メニューの数を増やす。
[8] ブロックエディタの使いやすさを追求。
[9] 新しいブラウザへの対応について。Google、IE8、ほか。
[10] 画像のリンクのボーダー（枠）が消せるオプションを搭載
[11] IE6でのレイアウト崩れを9割以上防げる自動調整機能
[12] ブロックごとにデザイン付きの背景（フレーム）を入れられる機能
[13] 必要なファイルしかアップロードしない新しいFTP機能
[14] 登録した複数のブラウザでプレビューできる機能
[15] マルチユーザーに対応。管理者権限がなくとも起動可能にも。
[16] その他の細かい改善
[1] 不要なタグをできるだけ減らし奇麗なHTMLソースにする。
◇従来：
BiNDが書き出すタグはウェブ標準準拠でありながらも、v.1.00では「不要なタグが多い」という感じは否めませんでした。
v.1.3以降のバージョンでは、これらの問題もほぼ解決されましたが、それでも「BiNDが書くタグ（HTMLソース）は無駄が多い」という印象は拭えなかったように思えます。
◆今回：
今回のv.2.0では、プロのHTMLコーダーが見ても納得してもらえるぐらいまで、HTMLタグを最適化、つまり短い記述を目指しました。
手書きでHTMLを書く場合までにはさすがに及ばないものの、自動でタグを記述するソフトの中では、かなりの高品質になったのではないかと思っています。
実際、v.1.00と比べると4分の1ぐらいの記述量になっています。
○余談：
「短く、奇麗なタグを書く」ために、BiND2では「インテリジェンスHTML生成エンジン」を新規に開発。
使っているうえでは一瞬の出来事なので何も気づきませんが、BiND2の内部ではデザインに合わせてダイナミックにHTMLのタグが生成され、常に最適化されています。
デザインが変わると、タグも変わります。そしてデザインの組み合わせを見て、さらに短くできるタグを発見すると、短く最適化します。
そういった陰の最適化の機能自体が、BiND2では強化されています。
そしてもちろん、BiND2も「ウェブ標準」です。
W3Cのチェッカーを必ずパスするように設計されています。
※カスタムタグからご自身でタグを挿入された場合にはそれに限りません。
→BiNDが対応しているW3Cの公式チェッカーはこちら
[2] Dreamweaverでの修正が可能なHTMLソースにする。
◇従来：
v.1.xのBiNDのサイトは、事実上Dreamweaverでの編集は不可能でした。
◆今回：
まず、BiNDは特殊なサイト管理をしているため、Dreamweaverとの連携はサポート対象外です。というか、BiNDで編集すると、BiNDはHTMLファイルを吐き出し直すため、他のソフトでHTMLを編集しても意味がありません。
ですが、ユーザーの方のうち、ほんの数パーセントではありますが、Dreamweaverで編集したあとにBiNDに戻れなくても良く、「BiNDで大まかなサイトデザインやページをつくり」その後、「Dreamweaverで修正や編集をしたい」というリクエストがありました。
それならば、ということで、公式には発表していませんが、Dreamweaverでサイトが開けて普通に編集できるように改善しました。
もちろんサポート対象外ですし、ものすごくHTMLに詳しい方向けの「裏技」ですので、あくまで「分かる方」だけがお使い下さい。
[3] Ajaxの動作を軽快にする。
ものすごくマニアックな話です。
アコーディオンに「一番下を開く」というオプションを追加しました。
アコーディオンはとても良いナビゲーションなのですが、「一番上を開く」だと、それ以外のボタンが一番下に来てしまいます。それだと押されない確率が高いので、「一番下を開く」によって、開くためのボタンがすべて上部に来るようにしました。また発売日に提供される2.1アップデータでは、マウスの反応も最適化されています。
さらに、「リッチ系」のスキンでは、アコーディオンの「上下を丸く」できるようにしました。
そして「すべてを開く」のオプションを使えば、角丸で上下を包みながら、すべてのコンテンツをユーザーに見せることができます。
誰がビビっと来るか分かりませんが、個人的にツボだったので搭載しました。
あと、全体的なJavaScriptの処理が倍ぐらい速くなっています。
高速化はすぐにどなたでも体感できる改善だと思います。
[4] Internet Explorer 6と他のブラウザのデザインの差をなくす。
◇従来：
v.1.xのBiNDサイトでは、他のブラウザでは「半透明」なデザインが、IE6では「グレー」のデザインになる、といったことがありました。
これはバグではなく、IE6が「半透明な画像」、通称 「透過PNG」に対応していないためでした。
◆今回：
「IE6と他のブラウザの見た目を極限まで一緒にしよう！」と長期に渡る取り組みを行ない、最終的に透過PNGの表示がIE6でも可能で、かつ極限まで高速化できるプログラムを開発しました。
それにより、IE6と他のブラウザの見た目は、ほぼ一緒になりました。
IE6は独自の仕様の多いブラウザで、血のにじむような地味な努力の連続でしたが、パーフェクトサポートブラウザと同じレベルになっています。パーフェクトとしなかった理由は、IE6で透過PNGを使う際に、若干のページの読み込みの遅さが発生するからです。ここ数年に発売されたパソコンでは、ほとんど気づかないと思いますが、低速なマシンであればあるほど、「カクッ」といった表示の遅れがあります。
IE6でのデザインを損なうか、それとも同じにするか悩んだ結果、みなさんから最も要望の多かった「IE6でのデザインの一致」を優先することにしました。ご容赦ください。
[5] ブロック内の変な隙間をなくす、調整できるようにする。
◇従来：
BiND1を使ってブロックを組むときに「なんか勝手に隙間ができるのでなくして欲しい」というリクエストがありました。
ちなみにその隙間とは、もともとBiNDはそういうデザインなのですが、やりたいデザインによっては「いらない隙間」でもあったようです。特にノートPCなどの小さなモニタでの閲覧環境では、過剰にスキマのあるウェブデザインは悪いデザインでもあります。また、ファーストビューと呼ばれる「スクロールしなくて見える範囲」が写真で覆い尽くされるようなテンプレートは、好ましくありません。
◆今回：
今回は、テンプレートの改善だけではなく、ブロック内の上下左右の余白（マージン）をゼロにするための機能を搭載しました。
チェックボックスにて指定するだけでブロックの四隅にピッタリ付くようになります。
さらに、行間も「広い」「普通」「狭い」の３種類をブロックごとに選べるようになりました。
全体的に「ピチピチで詰まったデザイン」ができる仕組みに刷新しました。
「BiNDってスカスカなデザインしかできないのがイヤ」と思っていた方は、今度は大丈夫。お好きなだけピチピチにできます。
[6] ブロック間の隙間すらゼロにする裏技を用意。
◇従来：
上記のほかにもうひとつ、「ブロック間の隙間」というものもありました。
ブロックとブロックの間もゼロピクセルにしたいという要望が、ひそかに多かったのではないかと思っています。
◆今回：
そこでこのような裏技を用意しました。
レイアウトが「本文」で「上下左右の余白をゼロ」にチェックが入っていて、かつブロックの中が画像のみの場合に、ブロック間の隙間もゼロになります。
1000人中3人ぐらいは猛烈に「おぉぉぉぉ！」と叫ぶ裏技かと思っていますが残りの997人は「ん？で？」という感じかもしれません（笑）。とにかく、一部の人が熱狂するマニアックな裏技です。
実はこれでいろいろなデザインの幅が広がります。
連続したブロックに別々の画像を貼ったり、真ん中のブロックの背景を画像にすることにより、３つのブロックを１つのデザインに見せるといったプロのウェブデザインでは常識的なテクニックを、BiND上でも採用できるようになりました。
[7] テーブルやインデントの独自ルールを改善。メニューの数を増やす。
◇従来：
BiND1では、リスト系の設定がちょっと分かりにくい面もありました。
例えば、「テーブル」や「インデント」といったものを使いたいときには、特定のスキンを選ぶ必要があって、その組み合わせでデザインが変わったり。
◆今回：
BiND2では、「テーブル」「インデント」「ニュース」という3つのメニューを搭載。どんなスキンを選んでいても、必ず指定したデザインになります。また、メニューも一気に1種類から6種類に大幅増量。
こちらもスキンと関係なく選ぶことができます（スキンで色が変わります）。
[8] ブロックエディタの使いやすさを追求。
フォントカラー、フォントサイズ、フォントフェイスといったフォント系の基本機能をすべて新搭載しました。
カラーはカラーパレットから好きな色を。サイズは６種類から選べます。
フェイスは現在「ゴシック系」と「明朝系」の２種類を選ぶだけで、自動的に設定されるようになっています。さらにコーナー設定には、そのサイト（コーナー）全体のフォントサイズやフェースを選べるようになっています。デザインサイトであれば、デフォルトよりもひとつ小さなサイズにするとかっこよくなりますし、見やすいサイトを目指すのであれば、ひとつ大きめの明朝系フォントに設定すれば、まじめで読みやすいサイトになります。
なお、サイズが選択制になっている理由は、タグとしての正しさを優先する（W3Cの勧告に従う）ためと、ブラウザごとに同じサイズになるように自動調整するためです。
BiND2上なら、WindowsでもMacでも、「今編集しているサイズ」と同じサイズで他のOSやブラウザでも見れると思ってもらって問題ありません。
そのために、OSやブラウザによって違うサイズになりがちな設定をなくし、６種類からの選択形式にしました。
さらにv.1.3で搭載済みですが、アンドゥー、リドゥーのやり直し機能も、改めて搭載しました。
[9] 新しいブラウザへの対応について。Google、IE8、ほか。
数日前、Googleが新しいブラウザ（"Google Chrome"ベータ版）を出しました。
BiND開発チームは、こうした新しいブラウザが出る度に検証を開始します。
また、現在マイクロソフトでは、IE8を開発しています。
BiND開発チームとしては、ベータ版の段階では「様子見」の状態です。
またベータ版の段階ではみなさんのモジュールの更新アップデートは行ないません。
なぜならば、ベータ版の時点ではブラウザのバグかBiNDの問題かが分からないからです。
ですので、新しいブラウザへの対応は正式バージョン後になります。
なお、公式には発表していませんが、BiND開発チームでは以下のブラウザを将来、サポートブラウザに含めようと思って計画を進めています。
・Google Chrome（Windows版とMac版の正式版がリリース後に対応予定）
・Internet Explorer 8（正式版リリース後にはきちんと対応予定）
・iPhone、Wii
ちなみに、ChromeはWebkitと呼ばれるSafariと同じエンジンを採用しているため、現状では「BiNDではすでにサポート済み」と言っても問題ないくらいに、正しくBiNDサイトがレンダリングされるはずです。
[10] 画像のリンクのボーダー（枠）が消せるオプションを搭載
従来は、画像パーツにリンクを貼ると、必ずボーダーが入ってしまいました。今回のバージョンでは、「枠を消す」オプションを用意しました。これにより、画像のボタンやスライスされた画像ごとに違うリンク先を用意するといったことができるようになります。
[11] IE6でのレイアウト崩れを9割以上防げる自動調整機能
IE6には、いわゆる「float問題」と呼ばれるCSS搭載上の問題がありました。
具体的には、他のブラウザでは正常に表示されるサイドバーなどが、IE6だとページの下部にずれてしまうといったものが「float問題」です。
これはブラウザ側のバグであるため、BiND側で調整することは不可能だと思いましたが、今回のBiND2では、IE6環境ではそもそもBiNDが起動できなくなったため、開発チームは特にこのfloat問題に頭を悩めていました。
なぜならば、ユーザーのみなさんがIE6でチェックできる方法がなくなるからです。この「float問題」の最大の問題は、他のブラウザでは正常に表示されるということです。ですので、IE7上のBiNDで作成しても、MacのBiNDで作成しても、絶対にIE6でのレイアウト崩れに気づくことができなくなります。さらに、IEはその性質上、他のブラウザと異なり、IE7とIE6をひとつのマシン上に共存させることもできません。なので、今回BiND2で搭載したブラウザごとにプレビューできる機能も意味がありません。また、スタンドアロンのIE6というものも存在しますが、正式なIE6ではない違法性の高い改造版なうえに、XPのみ、さらにJavaScriptやPNG処理のためのプログラムが動作しないために、BiNDサイトのプレビューに使えるものではありません。
さらにこの問題は、ユーザーのみなさんがサイドバーの中に、サイドバーの横幅以上のものを入れたときに起こるのですが、それをソフト側が防ぐ方法はありませんでした。
結果から先に言うと、BiND2では、このfloat問題を解決しました。
IE6での、「サイドバー落ち」とも言われる「float問題」は発生しません。BiND2は、みなさんがつくったサイトのサイドバーの画像が、サイドバーよりも長い場合で、かつIE6だとレイアウトが崩れるであろうと判断したとき、自動的にIE6でのみ、その大きい画像を自動的にトリミングします。他のブラウザではトリミングされないので、デザインを損なうこともありません。
[12] ブロックごとにデザイン付きの背景（フレーム）を入れられる機能
エリアスキンに加え、ブロックごとにもデザインされた「フレーム」を入れることができます。
3種類の中からワンクリックでつけることができます。フレームの色は、そのブロックで選択しているブロックスキンに対応しています。
[13] 必要なファイルしかアップロードしない新しいFTP機能
BiND2では、複数のテーマファイルに対応しています。
テーマファイルとは、そのコーナー（ディレクトリ）にあるすべてのページの「エリアスキン」「ブロックスキン」などを一括で入れ替えられる、スキンの集合体です（プリインストール時はテーマは1種類しか入っていません）。
この複数テーマファイルの対応によって、必然的に「必要ファイルだけをアップロード」する機能が必要になりました。なぜならば、テーマファイルは数百のファイルの集合体なので、テーマを複数使った場合に、使用したテーマのみアップロードされるようにしなければ、実用的ではないからです。
なお、現在のサイトで使われているテーマのファイルはすべてアップロードされますが、そのファイル数もBiND1と比べると半分以下になっています。それにより、アップロード時間も短縮されました。
[14] 登録した複数のブラウザでプレビューできる機能
お使いのマシンにインストールされているすべてのブラウザを、BiND2に登録し、ポップアップメニューで選択するだけで、BiNDのデフォルトブラウザに設定することができるようになりました。
[15] マルチユーザーに対応。管理者権限がなくとも起動可能にも。
Windows、Macintosh版、ともにマルチアカウント、マルチユーザー環境に対応しました。
インストールと認証時には管理者権限が必要ですが、通常の利用であればノーマルな権限のユーザーでもBiNDを起動し、別々の環境としてサイト制作を行なうことができます。
ただしデジタルステージとしては特別な理由がない限り、管理者権限のアカウントで、一人での利用をお勧めします。理由は、一般的にマルチユーザー環境だと予期せぬトラブルが発生することが多いので、必要な方だけお使いいただいたほうが安全です。
[16] その他の細かい改善
A. 画像の拡大時など各所の説明文を日本語だけでなく英語も入れる改善
英語サイト向けに、日本語のみの説明をなくしました。
B. 丁寧なつくりのサイトに感じさせるスムーズスクロール機能
アンカータグで飛ぶときに、アニメーション付きでスクロールする機能を標準搭載しました。「ページの先頭へ」といったカスタムタグで体感することができます。
C. 著作権フリーで使用できる大量のアイコン、写真素材を追加
BiND1で意外にも好評だった写真素材やアイコンなどを、大量に新作にしました。
カタログに記載されているよりも、さらに多くの素材が製品版には入っています。
これらはすべてロイヤリティーフリーの扱いですので、ご自由にサイト制作にお使いいただけます。
いかがでしたでしょうか？
カタログには書いていないマニアックな改善点ばかりを列挙してみました。
いろいろと細かい点でも進化しているBiND2、発売まであと少しです。
是非お楽しみに！！
ワンクリック・アンケートにご協力ください
今回のような情報を今後も欲しいですか？今後のこのブログの運営方針の参考にします。
ぜひ投票をお願いします。
[ 必要ない(1点) ] [ あるに超したことない(3点) ] [ 今後も是非！(5点) ]
300人が投票／平均的なご意見：4.1点 （5点がとても興味ある情報で1点が必要ない情報）
トラックバック ( 0 )
この記事のトラックバックURL : http://www.digitalstage.jp/mt_tb/mt-tb.cgi/133