slanted W3C logo

デザインとWEBシステムとの付き合い方

FURUSHO Takashi,
<furusho＠n-i-agroinformatics.com>




CSS Nite in Osaka, Vol.8

自己紹介

古荘貴司（ふるしょう　たかし）

blog

http://blog.n-i-agroinformatics.com/


自己紹介

会社では畑も耕してます（従業員が）


自己紹介

会社では畑も耕してます（従業員が）

草むら？


自己紹介

SOY CMS




自己紹介

SOY CMS


後でちょっとだけデモしますが、今日は詳しいお話はいたしません。

アフターパーティで聞きにきてください。説明会も開催します。

日時　2008年6月19日木曜日　18:30～21:00

場所　Mebic扇町（大阪市北区南扇町6-28 水道局扇町庁舎2F）

http://www.mebic.com/

参加費　無料

事前お申し込み　不要




今日のテーマ

ずいぶんと昔の話ですが、ある日疲れて家に帰ると、彼女が待っていてくれました。


今日のテーマ

ずいぶんと昔の話ですが、ある日疲れて家に帰ると、彼女が待っていてくれました。

「疲れたでしょ、気分転換に一緒に胡麻だんごつくろ！！」


今日のテーマ



「自分がしてもらって嬉しいことが、相手にとってもありがたいこととは限りません」


ただそれでも、



「良かれと思ってやってくれているのだから、受け取り手も理解をする方が幸せになれます」


Webシステムとは？


「テンプレート」の役割

プログラムとデザインの接点


デザインであって、プログラム。

プログラムであって、デザイン。


Webシステムとは？


「テンプレート」の役割

とはいえ。。。


システムの仕様、テンプレートの記法はプログラマーの好みに寄りがち。

だってシステムを設計するのは大抵プログラマーだから。。。


・最初は理解しにくくても融通が利く仕様

・最初は理解しにくくてもコードを書く量が少なくなる仕様


「テンプレート」の役割

とはいえ。。。


システムの仕様、テンプレートの記法はプログラマーの好みに寄りがち。

だってシステムを設計するのは大抵プログラマーだから。。。


・最初は理解しにくくても融通が利く仕様

・最初は理解しにくくてもコードを書く量が少なくなる仕様


⇒胡麻だんご


MovableType テンプレート

 

    <MTIfArchiveTypeEnabled archive_type="Category">
<div class="archive-category archive">
    <h2 class="archive-header">カテゴリ</h2>
    <div class="archive-content">
    <MTTopLevelCategories>
        <MTSubCatIsFirst>
        <ul class="archive-list">
        </MTSubCatIsFirst>
        <MTIfNonZero tag="MTCategoryCount">
            <li class="archive-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a>
        <MTElse>
            <li class="archive-list-item"><$MTCategoryLabel$>
        </MTIfNonZero>
        <MTSubCatsRecurse>
            </li>
        <MTSubCatIsLast>
        </ul>
        </MTSubCatIsLast>
    </MTTopLevelCategories>
    </div>
</div>
</MTIfArchiveTypeEnabled>

 

 

 

WordPress テンプレート

 

    <?php get_header(); ?>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content('<p class="serif">' . __('Read the rest of this page &raquo;', 'kubrick') . '</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>' . __('Pages:', 'kubrick') . '</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link(__('Edit this entry.', 'kubrick'), '<p>', '</p>'); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

 

 

EC CUBE (Smarty) テンプレート

 

    <form name="member_form2" id="member_form2" method="post" action="./index.php">
      <input type="hidden" name="mode" value="nonmember" />
      <input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
    <div class="loginarea">
    <p>
      <img src="<!--{$TPL_DIR}-->img/login/guest.gif" width="247" height="16" alt="まだ会員登録されていないお客様" />
    </p>
    <p class="inputtext">会員登録をすると便利なMyページをご利用いただけます。<br />
      また、ログインするだけで、毎回お名前や住所などを入力することなくスムーズにお買い物をお楽しみいただけます。
    </p>
    <div class="inputbox02">
      <a href="<!--{$smarty.const.URL_DIR}-->entry/kiyaku.php" onmouseover="chgImg('<!--{$TPL_DIR}-->img/login/b_gotoentry_on.gif','b_gotoentry');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/login/b_gotoentry.gif','b_gotoentry');">
        <img src="<!--{$TPL_DIR}-->img/login/b_gotoentry.gif" width="130" height="30" alt="会員登録をする" border="0" name="b_gotoentry" />
      </a>
      <input type="image" onmouseover="chgImgImageSubmit('<!--{$TPL_DIR}-->img/login/b_buystep_on.gif',this)" onmouseout="chgImgImageSubmit('<!--{$TPL_DIR}-->img/login/b_buystep.gif',this)" src="<!--{$TPL_DIR}-->img/login/b_buystep.gif" class="box130"  alt="購入手続きへ" name="buystep" id="buystep" />
    </div>
  </div>
</form>

 

 

 

プログラムの得手不得手を知ろう！

どんなシステムでも基本的な得手不得手は一緒！


得意なこと

不得意なこと



プログラムの得手不得手を知ろう！

例その1


プログラムの得手不得手を知ろう！

例その2


配列A{a1,a2,a3}、B{b1,b2,b3}、C{c1,c2,c3}があったとして


プログラムの得手不得手を知ろう！

例その2


配列A{a1,a2,a3}、B{b1,b2,b3}、C{c1,c2,c3}があったとして


プログラミングの学び方

習うより慣れろ。


おすすめはJavaScript

ブラウザだけでできるから。環境構築もコンパイルも不要！


○×三つ並べるやつ

五目並べ

オセロ

テトリス



テンプレートはわかりやすく！

テンプレートは「人が読むもの」。

未来の自分は他人だと思いましょう。

テンプレートはプログラム。

プログラムのつもりで書きましょう。



EC CUBE ソース

 

      
　　 /*
     * 関数名：lfCheckActive()
     * 引数1 ：ディレクトリ名
     * 説明　：キャンペーン中かチェック
     * 戻り値：キャンペーン中なら true 終了なら false
     */
    function lfCheckActive($directory_name, &$objQuery) {
        $is_active = false;
        $col = "limit_count, total_count, start_date, end_date";
        $arrRet = $objQuery->select($col, "dtb_campaign", "directory_name = ? AND del_flg = 0", array($directory_name));
        // 開始日時・停止日時を成型
        $start_date = (date("YmdHis", strtotime($arrRet[0]['start_date'])));
        $end_date = (date("YmdHis", strtotime($arrRet[0]['end_date'])));
        $now_date = (date("YmdHis"));
        // キャンペーンが開催期間で、かつ申込制限内である
        if($now_date > $start_date && $now_date < $end_date
           && ($arrRet[0]['limit_count'] > $arrRet[0]['total_count'] || $arrRet[0]['limit_count'] < 1)) {
            $is_active = true;
        }
        return $is_active;
    }

 

 

 

どんなテンプレートがいいテンプレート？

人が読みやすく、コンピュータが解釈しやすい。



テンプレートに限らず、ずっと言われていることやん。。。


まとめ。

「プログラム」というものの癖を理解するといいことがあります。

 

 

あと、大事なのはIA(情報設計)。

 

 

ここから先は問題提起

テンプレートにロジック（動作）は書けたほうがいい？書けない方がいい？


昔から続く議論ですが、、、


SOY CMSでは、完全に分けてみました。


動作、設定は全て管理画面で行います。


作業の分担、オーサリングツールとの連携　　⇔　テンプレートだけで複雑な機能の実現


SOY CMSを作った理由

もともとCMSを作るつもりではありませんでした。




SOY CMSを作った理由

もともとCMSを作るつもりではありませんでした。


いろんなシステムを作っていて、ロジック（動作）とデザインをきっちり分離できて、それでいて

柔軟性の高いテンプレートエンジンがほしくなった

↓

作っちゃえ！(Wicketを参考)

↓

どうせならO/Rマッパーなんかも作っちゃえ！フレームワーク全部作っちゃえ！

↓

そのフレームワーク使ってCMS作っちゃえ！


SOY CMSを作った理由

社外のデザイナーさんとのコミュニケーションのコスト

使いやすいシステムを実現するにはデザインが重要



おまけ

このスライドはHTML Slidy　＋　SOY CMSで作っています。


とても相性がいいので、是非一度使ってみてください。


HTML Slidy

http://www.w3.org/Talks/Tools/