CSS改造キットの使い方ビデオ（前編）

このビデオでは？

このビデオの内容

アップデーター (v.3.06 build654)の概要

あなたの街にデジタルステージが伺います！！
さあ、あなたの近くの会場で開催されるのは、何月何日？

デジタルステージ平野からビデオメッセージ（1分）

デジタルステージ平野です。 さて、過去、BiND DAY、PhotoCinema DAYと、2回に渡って「全国6都市同時開催」のイベントを開催してきたデジタルステージですが、今回のBiND3では「ツアー」と題し、つまり「全部直接僕がまわる」という企画にしてみました！ 北は北海道から南は九州まで、あますことなく全国、あなたの家の近くまで行きます！ ですので、是非、BiNDユーザーの方、あるいはBiNDに興味がある方も、お近くの会場にお越し下さい！！ 当日は、BiND3の新機能だけではなく、気になるBiND専用サーバー「BiND Server」の目玉でもある「BiND Mobile」ではどんなことを考えているか、そして先日公開したBiNDのCSS改造キットを使った簡単なデモを行ないます。そして何より、そうした機能プレゼンテーションよりも、今回はみなさんと直接会える！ということなので・・・ウェブコンポーザーの未来、そして僕が考えるこれからのインターネット、これからのデザイン、そしてこれから僕らがみなさんと一緒にどうやってウェブコンポーザーの世界を広げて、楽しい未来を築いていきたいかといった、『未来』のビジョンについて、できるだけ分かりやすく、そして楽しく、お話できればと思っています。 今回のBiND3は、BiNDシリーズの集大成。でも、ここからがスタート。 スタートラインに立った僕らの＜これから＞を、語り合いましょう！ 10月19日（月）の大阪心斎橋を皮切りに、30日（金）に名古屋、15日（日）は札幌、翌16日（月）は一気に南下して福岡（お待たせしました！）、そして19（木）仙台、千秋楽が27（金）の渋谷です。 さあ、全国6都市のBiND Tour 2009、僕はデジタルステージユーザーのみなさん、全員とお会いする覚悟で臨みます！楽しみです！

【ご入場に関してのご案内】

参加費は無料です。

今回のイベントの事前登録は行なっておりません。

参加者多数の場合には先着順の入場となりますのでご了承ください。

v.1.0 / 2009.9.15

このキットはBiND3の「テーマ機能」を使い、BiND3のCSSを改造するためのサンプルファイルです。
このキットによるCSSの改造はAdobe Dreamweaver CS4以上で行なうことを推奨しています。
また、CSSカスタマイズは、BiND3のサポート対象外となります。改造の方法について、個別の問い合わせには応じられませんので、このドキュメントと関連サイトを参考にしてください。

1. BiND3の「テーマ機能」を使って、CSSやJavaScriptのカスタマイズが行なえます
2. BiND3単体では設定できない項目を設定できます

例えば・・・
・タイトルや大見出し、小見出し、本文などのデフォルトの文字色や装飾を設定する
・タブやアコーディオンなどの色やデザインを設定する
・BiNDにはないメニューデザインを設定する

例えば上のような「段落スタイル」を一括でオリジナルに変更したり、オリジナルのメニューをデザインしたり・・・写真のロールオーバーの柄や色、テーブルデザインなどを個々に設定できます。色だけではなく、マージンやフォントの装飾なども設定可能です。

タブやアイコーディオンなどもこのように全項目が変更できるようになっており・・白背景以外にも、黒い背景のときの項目もすべて設定できるようになっています。

これらの設定は手書きでCSSを書くことで行ないます。
ただし手書きでCSSを改造していくのはとても大変なため、この改造キットを作成しました。
この改造キットの中にある「edit.html」をDreamweaverで開けば、DreamweaverのUIを使って手書きと比べて比較的容易にCSSの改造ができます。

1. CSSの基礎知識がある程度ある人
2. Dreamweaverの基本的な操作知識がある人
3. このドキュメントで内容を理解でき、独学で先へ進める人

メリット

1. BiND上で設定できない項目が設定できる
2. オリジナルのテーマを作成して配布もできる
3. BiNDでは不可能だと思われていた完全オリジナルデザインができる

デメリット

1. CSSの知識がないと分からない（分からない方には改造をお勧めしません）
2. CSSの知識があっても多少の応用力が必要（クリックして選択できないclassがあるので注釈を読むこと）
3. サンプルファイルをあまり改造しすぎるとブラウザごとに見え方が変わる可能性がある（自己責任で）

1. この改造キット
2. BiND3本体
3. Adobe Dreamweaver CS4（手書きでCSSが記述できる人は不要です）

BiND3では、BiND2と同じCSS（モジュールと読んでいます）が使われています。そのため、BiND2とBiND3では完全な互換性がありますが、今回のテーマ機能のCSSカスタマイズは、このBiND2のモジュールCSSに「上書き」する形式で、テーマのCSSを読み込みます。そのため、テーマのCSSにBiNDのHTMLタグに適したclassのCSSを記載すれば、理論上あらゆるCSS要素を設定できることになります。
また、JavaScriptもロード可能のため、上級者にとっては改造の幅も広がります。
ただし、CSSやJavaScriptの改造は、BiNDの特徴でもある「ブラウザ閲覧保証」ができなくなるということでもあります（ただし、サンプルファイルをちょっと改造するぐらいであれば大きくレイアウトやデザインが崩れることはないでしょう）。

1. 「MyTheme00」を好きな名前にリネーム
2. リネームした「MyTheme00」をBiND3のアプリケーションフォルダのTemplates内「CornerSkin」に好きな名前のフォルダを作成し、そこに入れる
3. BiND3を起動して「テーマ」を開くと、リネームした名前のテーマが表示されるので適用する
4. 「MyBiND3_Sites」内のそのサイトフォルダを開き、ルート階層の「CornerSkin」に入っているフォルダの「_developer」の「edit.html」をDreamweaverで開く
5. Dreamweaverで編集し、保存する（別に説明あり）。
6. 同階層「preview-lite.html」や「preview-dark.html」でプレビューもできるが、BiND上でも確認できるはず
7. 完成したと思ったら「MyTheme00」を好きな名前にリネームしたフォルダをBiND3のアプリケーションフォルダのTemplates内「CornerSkin」に戻すとまたテーマとして使える
8. その際、ページ背景なども一緒に設定したい場合は、「テーマ」の「ユーザー設定」で保存した「PageSettings」と差し替える
9. 最終的には「「info.xml」と「thumbnail.png」を設定して、「_developer」を削除して完成

CSSをカスタマイズする

1. edit.htmlを開く
2. 「デザイン」をオンにして「ライブビュー」をオンにする
   • 
     • ライブビューをオンにする前は以下のように「雑然として完成系がイメージしにくい」状態ですが、ライブビューをオンにした後は、以下のように「BiND上での完成形と近い状態で編集」できる状態になります。
     • 　→→ライブビューON→→
3. 「CSSスタイル」のパレットが表示されているようにし、タブから「すべて」ではなく「現在」を選ぶ
   • 
4. ライブビューによって本物と近い感じでプレビューできているサンプルページの改造したい項目をクリックする
5. すると「CSSスタイル」にそのCSSクラスが表示されるので好きに変更する
   • 下の場合は「H2」の色と装飾が表示されている状態です。
   • 
6. ちょっとしたティップスとして
   • 下のように色や項目が１つのフィールドになってしまっていて編集しにくいときは
   • 
   • この「CSSスタイル」のパレットの下部にある以下の「鉛筆アイコン」をクリックします
   • 
   • すると以下のようにUIで変更できるので便利です。
   • 
7. 最後にメニューから「すべてを保存」を選び、CSSのカスタマイズ自体の作業は終了です。

ページのデザイン設定（ページの背景デザインなど）を保存する

つぎに、テーマを適用したらページの背景デザインなども変更されるようにしましょう。

1. BiND3上でページのデザインをします
   • 
   • ここでいうページのデザインとは、「設定」の「ページデザイン」の項目のことを指します。
2. ページデザインが完成したら「テーマ」を開き、「ユーザー設定」タブから「＋」を選び、現在のページデザインを「テーマ」として保存します。
   • 
3. 保存されたテーマが以下の場所に保存されているので、そこから「PageSettings」フォルダを取り出します。
   • 以下の場所を開くと、テーマとして保存した際につけた名称のフォルダがあります。その中に「PageSettings」フォルダがあります。
     • Mac
       • ユーザーディレクトリ内のライブラリ／preferences／BiND3 Data／CornerSkin／
     • Win
       • ユーザーディレクトリ内の／APP Data／Roaming／BiND3 Data／CornerSkin／
       • ※Windowsの場合、OSのバージョンやユーザー権限によっては、若干異なったディレクトリになっている場合があります。
4. 取り出した「PageSettings」フォルダを、カスタマイズしたテーマのフォルダの中にある「PageSettings」フォルダと差し替えます。
5. これで、このテーマのページのデザイン設定も、あなた独自のものに差し変わりました。

最後にUI上に表示されるサムネールやXMLを編集する

1. 下の「フォルダの構成」を参考にして、以下のファイルの書き換えを行なってください。
   • bdmodified.txt
   • info.xml
   • thumbnail.png
2. 上級者の方はこの手順に加えて、jsフォルダの中を手書きで改造したり、cssフォルダの中にあるクロスブラウザのCSSに手を入れたりすることもできます。
3. 最後に、この作成したフォルダを、アプリケーションと同階層にある「Templates」フォルダの「CornerSkin」フォルダの中に作成した任意のフォルダの中に入れて完了です。
4. BiNDを起動しなおして、テーマとして適用してみてください。
5. ブロックスキンは、「シンプル白」もしくは「シンプル黒」のみがカスタマイズされています。それ以外のブロックスキンを変更しても何も変化しません。

以上。

• ブロックスキンの「シンプル黒」と「シンプル白」のほとんどの項目が改造できる
• メニューBを改造できる
• ほか

当然CSSなので逆解析すればあらゆる要素が改造可能。
ただし、かなり高度なので、このサンプルで改造できる項目を改造することをお勧めします。



以上で、CSSのカスタマイズの解説を終わります。
今後の反応によっては、他のパターンのキットも用意するかもしれません。
まずは、この改造キットでCSSをカスタマイズにチャレンジしてみてください。

この改造キットはサポート対象外のため、個別対応はできませんが、以下の開発ブログで最新情報やコメントを受け付けています。
今後の開発の方向の参考にしますので、ぜひ一度アクセスしてみてください。
http://www.digitalstage.jp/blog/bind_css.html

上記ページでアクセスできない場合は、以下のトップページからたどることができます。
http://www.digitalstage.jp/blog/

みなさまからのご意見をお待ちしております！

2009.9.25
デジタルステージBiND開発クルー

グッドデザインなウェブをつくろう。

良いデザインは、あなたの強い味方になる。

仮のSYNC2デモサイトを立ち上げました

現在の開発状況

開発に関するアンケートにご協力ください

現在までのアンケート集計結果

Twitter経由のご意見

平野より追加で補足： 「なぜ高価なDreamweaverが必要なのか？なぜBiND単体で対応しないのか？」という主旨のお問い合わせをいくつかいただいておりますが、この改造キット自体が「Dreamweaverで改造したい！」というユーザーの方からのリクエストにお応えした機能だということをご理解いただければと思います。そもそもBiND自体は細かいCSSの設定をしなくても良いソフトですので、「あえてやりたい」という方向けの改造キットだとも言えます。

BiND Server、本格始動！
ウェブコンポーザーのための＜モバイル新時代＞

こんにちは、デジタルステージ平野です！
今回の開発ブログの話題は、"MOBiLE"。今日までずっとベールに包まれていたBiND3専用サーバー「BiND Server」ですが、今週はついに「なぜ専用サーバーなのか？」という謎を解くヒントをお伝えします！

3週に続けて全3回ということでお届けしてきたBiND3速報ですが・・・実はまだまだネタがいっぱいあるんです！
さぁ、そんなわけで4週目。今週は、BiNDの「ほんのちょっと先の未来」へ、みなさんをお連れしましょう！
さらに来週もありますよ！！

 
まずはこちらのビデオメッセージから、どうぞ！！（↓↓↓再生ボタンをクリック↓↓↓）

ということで、11月からはこんな感じでBiND Serverが本格始動します！
ビデオの中で説明していた「モバイル」。これは、今回のBiND3のテーマである「デザイン」の次に僕らが掲げる、もうひとつの新しいテーマなんです。実際に動いている画面もご覧いただいたことで、少しイメージが湧いてきましたか？？
ではここからは、上の動画で説明した内容を、もう一度細かくおさらいしていきましょう。

携帯サイトとPCサイトを別々につくる？
BiND3とBiND Serverの組み合わせの場合、そんな必要はありません。

あなたはただ、普段から使い慣れたBiNDで自由にサイトをつくり、更新するだけです。
サイトが完成したら、BiND Serverにアップロード。その際に、例えば下のような感じでQRコードをサイトに貼付けておきましょう。

あなたがBiND3でつくったサイトは、パソコンで見ればパソコン用に。
ドコモ、ソフトバンク、auなどの携帯で見れば、ケータイサイトに自動的に振り分けられます。
同じURLで問題なし。
今までのお手製携帯サイトによく見かけた「携帯はこちらのアドレスへ！」といった分かりにくい案内は一切不要。
サイトにアクセスする人は、ただアクセスするだけで最適な状態で見ることができるんです。

なお、ケーターサイトを作ったことのある方ならご存知だと思いますが、ケータイサイトはPCサイトと違って、細かい制約やルールが沢山あります。例えば、FlashやAjaxなどは携帯端末が対応していないため表示できないほか、１ページのデータ量に上限がある、などなど。BiND Serverでは、こういった制約やルールに合わせて、携帯端末用に簡素化されたページを自動生成するようになります。
さらに、自動生成されたケータイサイトを「PC上からもプレビューできるサービス」も提供する予定です（いちいち携帯でチェックしてたら面倒ですからネ）。

せっかくケータイサイトをオープンしたのだから、名刺やショップカードなどにQRコードを印刷することもお忘れなく。
※上記のQRコードはサンプルとしてのイメージ図です。

QRコードはこんな応用も！

特定のページ専用のQRコードも作れるので、例えば「このQRコードからアクセスした方専用クーポン」といったものもつくれます。どこからもリンクを貼っていないページをBiNDでつくり、そのURLのQRコードを作成するだけです。

パスワード付きのページもつくれる！

さらに、パスワードを入力しないと入れないページの作成や、会員限定サイト作成なども、BiND Serverではオプションとして提供されるので、応用範囲はそれこそアイディア次第でどこまででも広がります。

携帯だけじゃなく、iPhoneだって大丈夫。
iPhoneでアクセスした場合には、ケータイよりもよりリッチに表現されたサイトになります。見やすいようにiPhoneの横幅にピッタリなレイアウトになり、メニューなども折り畳んだ状態に。クリックするとiPhoneらしいアニメーションで快適なナビゲーションで閲覧できるようになります。

BiND Serverにはこの他にも、いろいろなサービスを追加していく予定です。
とにかく、コンセプトは「ウェブコンポーザーのための専用サーバー」です。
ウェブコンポーザーにとって大切なのは、技術に振り回されることではなくて、内容に集中すること。サイト全体をプロデュースできること。よりよいサイトづくりを目指すこと。
だからこそ、サーバーでできることも、徹底的に考え抜いていきたいと思っています。

例えば、ウェブコンポーザーなのに、サーバーのメンテナンスに四苦八苦しているって、「ウェブコンポーザーらしくない」。だから、BiND Serverは、メンテナンスフリー。24時間態勢、震度7の地震にも耐えるデータセンターで管理されています。有料プランでは、ウイルスチェックやスパムメールフィルタも搭載。さらにプログラムもできるウェブコンポーザーの方ならば、Perl、PHP、MySQLデータベース、共有SSLといったサーバーソフトウェアも使うことができます。

でも、大切なのは、そういうことじゃないと思うんです。

大切なのは、BiNDがあって、SYNCがあって、SiGNがあって、そしてBiND Serverがあるということ。
それらはシームレスに繋がるので、より内容に集中できるということ。
より素敵なウェブサイトを運営できるということ。

思いついたアイディアを、すぐにカタチにできること。
何もつっかかることなく、サイトの構想段階から運営、そして携帯サイトやクーポン、会員限定サイトといったものまでが、技術的なストレスなしで実現できる環境を手に入れるということ。

ストレスなく、あらゆることができるようになったからこそ、大切なのは、あなたのアイディア。
アイディアをすぐにカタチにできる環境が、これで整います。

さぁ、ここからが、ウェブコンポーザーの本当の出番です！
さぁみんな、本気を出す準備はOK？？？

1. BiND3には、BiND3専用サーバー「BiND Server」が標準でバンドルされているのが特徴です
2. BiND3 スタンダード版は6ヶ月、プロフェッショナル版は24ヶ月、基本プランが月額0円で使えます
   • 基本プランは、9月25日から利用できます
   • 利用の開始は、BiND3の購入日やユーザー登録日ではなく、ご自分で利用開始日を決められます（具体的には、BiND3上からBiND Serverの登録を行った時点からとなります）。
   • 基本プランはサブドメインでの利用となり、ドメインは「ユーザー名.bindsite.jp」をお使いいただけます。
   • 例えばユーザー名が「digitalstage」だった場合のURLは「http://digitalstage.bindsite.jp」です。
   • 無料期間終了後の基本プランは、月額980円になる予定です（追加オプションを申し込んだ際には基本プランの料金は不要です。追加オプションの料金に基本プランの料金は含まれます）。
3. 「BiND Server」には追加オプション（有料）があり、11月ごろに開始されます
4. 追加オプション（有料）の目玉は、「モバイルサイト自動作成サービス（仮）」です。
   • ケータイサイトとiPhoneサイトが、BiNDからBiND Serverにアップロードした時点で自動的に完成するという、シンプルかつ便利なサービスです。
5. 追加オプション（有料）には、そのほかにもいろいろなものが予定されています。
   • 独自ドメイン、メール、PHPやSQLなどの利用、パスワード付きの会員限定コーナーの作成、QRコードの生成、ウイルス・スパムフィルター　など
   • BiNDという制作ソフトと、専用サーバーという組み合わせにより、ソフト単体ではできない画期的なサービスを開発していきます。
   • これらのオプションは個別に申し込む必要がないようにセットにして安価にご提供します。
6. 追加オプション（有料）は、スタンダード版、プロフェッショナル版のどちらからでもお申込いただけるようになります（上記の機能は追加オプションなので、プロ版、スタンダード版、いずれの方もオプションをお申し込みいただくことで上記の全機能がエディションの違いに関係なく使えるようになります）。
7. さらに詳細な情報は近日中に発表します。

それでは、BiND3リリースまであともう少し！
来週は、最後のベールに包まれていたSYNCの新バージョンの実際に動作している様子を動画でお見せします！さらに、Twitterなどとも連携する「クチコミ機能」の詳細についても、動作画面のデモを織り交ぜながら迫ります！

まだまだネタの尽きないBiND3、来週もどうぞお楽しみに！！

BiND3で始まる
ウェブコンポーザーのための＜デザイン新時代＞

こんにちは、デジタルステージ平野です！
今回の開発ブログでは、"BiND LOVES DESiGN."というキャッチコピーを掲げたBiND3のバージョンアップの中で、僕、平野が『個人的にとても気に入っている機能』をビデオを中心にご紹介します。

デザイン。とにかくそれが今回のBiND3のキーワードです。

BiNDは、デザインをどう愛しているのか。
そしてBiNDを使う人たちには、デザインをどう楽しんでほしいのか。
・・・楽しい？・・・そう、デザインは「楽しい」んです！
難しいものでも、挫折感を味わうものでも、一部の才能ある人にしかできないことではないんです、絶対。
デザインは、楽しい。しかも、すごく楽しい。

だから3年目のBiNDは、BiNDユーザー全員にデザインを楽しんでもらおうと思ってます。
そんなBiND3の、僕のお気に入り機能を3つ、ご紹介しますね。

僕のお気に入り機能 1

デザインの楽しさのひとつは、「試行錯誤」です。

何度も何度も試行錯誤して、自分で「・・・おお、コレだ！」とピンときたモノが作れたとき、めちゃくちゃ楽しい！
でも試行錯誤が大変なんで、みんな挫折しちゃう。そこまでたどり着かないうちにやめちゃうんですよね。
う〜ん、分かりました。じゃあBiND3は、ラクラク試行錯誤できるようにしちゃいましょう。
ということで、いろんなことが「ピッ！」と押して「パッ！」と変わるようにしちゃいました！
 

さて、テーマ機能とレイアウト機能、いかがでしたか？
ちなみにこのビデオ、ノーカットで撮影しているので、このままリアルタイムです。だから超駆け足でしたけども、本当にわずか5分でここまでやれます。デザインが本当にガラガラと変わっていって、面白いですよね。
正直、もっともっと細かく見せたかったんですが（というか遊びたかったんですが）、続きはぜひ、ご自分で。
多分、「ピッ！」と押して「パッ！」と変わる楽しさがヤミツキになっちゃって、3時間ぐらいは遊べます（僕はこれで1日中遊びました）。
ところで、そうやっていじっていると、あるとき「良いデザインと出会う」って感じがすることがあります。自分でつくっているはずなのに、なぜか「出会った・・・」って感じちゃう。実はそれこそが、あなたのデザインセンスなんです。
あなたも、その体験を是非味わってくださいね。

僕のお気に入り機能 2

デザインの楽しさのひとつは、「アレンジ」です。

プロであっても、ゼロからデザインを始めることは、すごくすごく難しいんです。
だから既にあるものをモチーフ（参考）にして、自分色に変えていくことが多々あります。
新しいSiGN2では、まさにこのアレンジが楽しめる。
それに、使い切れないほどの色鉛筆って、ワクワクしません？？
そんな感覚で開発したいっぱいのエフェクト、楽しんで下さい！
 

画像って、「チクチク」と細かい部分を直していくことで、デザインはものすごく良くなるんです。
地味に「チクチク」と1ピクセル単位で動かしたり、ちょっと行間や文字の間隔を変えたり、フォントを変えたりすることで、ピシ！っとした感じになっていきます（これもデザインの醍醐味です！）。だから細かい微調整のための機能ってすごく大事。あと、SiGN2からは日本語フォントが内蔵されているので、MacでもWinでも「100%同じ画像」が作れます。実は、Macでデザインするとかっこ良くなって、Winだとダサくなるっていうアレ、理由のほとんどはフォントだったりします。今度は大丈夫。みんないい感じのデザインができるはずですよ？

僕のお気に入り機能 3

最後に、デザインの楽しさのひとつは、「セレクト」です。

もっとかっこ良く言うと、ディレクション、ディレクター。
実は「選ぶ」っていうこと自体も、デザインのひとつなんです。
だからBiND3では、本気のデザインクオリティーのテンプレート集を「選びきれないぐらいの数」用意することにしました。
テンプレート集を機能と呼ぶのは変かもしれませんね。でも、デザイン機能の１つだと思ってます。
なぜなら「選びきれないぐらいある中から選ぶ」ってすごく大事なんです。例えば、3しかない中から「これがいい！」と選ぶのと、100ある中から「これがいい！」と選ぶのでは、全然「デキ」が違います。
良いデザインというのは、「星の数ほどある候補」の中から「たったひとつを選ぶ」ってことだったりもするんです。
そして、たくさんあるデザイン候補の中から選んではじめたサイトは、絶対に良いサイトになるんです。

だから僕たちは、BiNDユーザーのみなさんに「たくさんの中から選ぶ」という状態が用意できるよう、今回のBiND3では追加のデザインテンプレート集にも今までにないくらいの力を入れました。
早くも来月ぐらいには、BiND3用のサイトコレクションのvol.1から3までが一挙リリースされます。
素人さんには手を抜いても分かるまい、というふうな気持ちを全部排除して、超本気のデザイン勝負、自信作です。ご期待ください！
ぜひ、あなたがウェブ・ディレクターとして、あなたのサイトデザインをディレクションする感じを楽しんでくださいね！

▼　▼　▼
▼　▼
▼
追加テンプレート集の詳細を見てみよう！

以上、デジタルステージ平野でした！
下のコメント欄では、このエントリーの内容に関するご感想や気になることをどうぞ！お待ちしてます！