オープンソースカンファレンス北海道 2014 WordPress & baserCMS セミナー

2014/6/21(土) に開催されたオープンソースカンファレンス北海道にて、WordPress と baserCMS のセミナー & ブース出展を行ってきました!

oscdo-2014-04

今年はSaCSS(sapporo.css)ブースも加わり、メンバーのみなさまのご協力のもと、無事終了することが出来ました。ありがとうございました。

baserCMS ブースには、福岡より海老庵さんも! baser に興味を持っていただいた方の質問にたくさん答えてくださいました。(さすが)

マリメロちゃん製作のわぷーと、コモモさん製作のべっしーのかぶりものにより、いつにもましてブースも華やか(!?)に。 OSC らしい演出で良かったです。 😀

oscdo-2014-00

WordPress セミナー

ショッピングカートのサンプルテーマを使って、カスタムフィールドやカスタム投稿、フィルターフックの使いどころなどを、スクリーンキャストで実際にカーソルを動かしながら紹介しました。

oscdo-2014-01

テーマの名前は wordCart。 実は baserCMS でつくった baserCart を OSC のために WordPress に移植したものです。

wordcart-01 wordcart-02

スクリーンキャストを使っている関係上、スライドだけだと意味不明なので、ここでは fucntions.php のコード断片を紹介しておきます。

商品の入れ物となるカスタム投稿と、カスタム分類の作成。

/**
 * カスタム投稿、カスタム分類タイプを追加.
 */
add_action('init', function () {
    register_taxonomy('item_tag',
        array('item'),
        array(
            'label' => '商品タグ',
            'show_ui' => true,
            'hierarchical' => true,
            'rewrite' => array('slug' => 'item/category', 'with_front' => false)
        )
    );
    register_post_type('item', array(
        'label' => '商品',
        'public' => true,
        'menu_position' => 5,
        'supports' => array(
            'title', 'editor', 'thumbnail', 'custom-fields'),
        'has_archive' => true,
        'rewrite' => array('slug' => 'item', 'with_front' => false)
    ));
});

商品に添付されたメディア(画像)をテンプレートファイルから取得する関数。

/**
 * 記事に添付された画像を取得.
 */
function the_images() {
    $images = get_children(array(
            'post_parent' => get_the_ID(),
            'post_type' => 'attachment',
            'post_mime_type' => 'image',
            'order' => 'ASC'));
    $img = array();
    foreach(array_keys($images) as $key) {
        array_push($img, wp_get_attachment_image($key, 'full'));
    }
    return array_reverse($img);
}

投稿ページを固定ページに割り当て、フロントページにカスタム投稿のアーカイブを出力するための pre_get_posts フィルターフック。

/**
 * フロントページに商品の一覧を表示.
 */
add_filter('pre_get_posts', function($wp_query) {
    // 管理画面かメインループではなかったら何もしない
    if(is_admin() || !$wp_query->is_main_query()) {
        return;
    }
    // フロントページなら投稿タイプ・商品を表示
    if($wp_query->is_home() && $wp_query->get('pagename') == '') {
        $wp_query->set('post_type', 'item');
    }
});

フロントページでカスタム分類アーカイブと同じテンプレートファイル(taxonomy.php)を使うために、選択されるテンプレートファイルを変更するための template_include フィルターフック。

/**
 * フロントページのテンプレートファイルは taxonomy.php.
 */
add_filter('template_include', function($template) {
    global $wp_query;
    if($wp_query->is_home() && $wp_query->get('pagename') == '') {
        return get_taxonomy_template();
    }
    return $template;
});

各商品の下に Trust Form プラグインで作成したフォームを配置するための、the_content フィルターフック。

/**
 * カスタム投稿・商品の時は注文フォームを記事の下に付与する.
 */
add_filter('the_content', function($content) {
    if(get_post_type() == 'item') {
        return $content . '<hr />[trust-form id=10]';
    }
    return $content;
}, 0);

今年は少し製作よりの内容とさせていただいたのですが、セミナーで伺ってみたところ、来られた方の半数以上 WordPress 製作を行われている方とのことで、実際にサイトを作る際のヒントになりましたら嬉しく思います。

baserCMS セミナー

baserCMS セミナーでは、スライドとスクリーンキャストで baserCMS の特徴を説明させていただきました。

スクリーンキャストなしだと短いですが、端的に baser の特徴が分かると思いますので、よければご覧ください。(スライドシェアにアップロードしたら、すごいフォントになったですが、ノリでご覧ください。。)

前日までの数十時間におよぶ準備や、WordPress から2コマ連続セミナーだったのもあり、途中から放心にて事前録画のスクリーンキャストの内容を忘れてしまい、ぐだぐだになってすいません。。セミナー後に途中からしにそうになっていたと聞きました。。

それでもセミナー後にブースにいくつも質問をいただいたり、アンケートで面白かったと書いてくださった方がいてくれたりで嬉しかったです! ありがとうございました。

OSC北海道 2014 大懇親会

終了後の大懇親会は、アサヒビール園にてジンギスカンパーティー 😀

oscdo-2014-02

後ろにいるのは…!!w

OSC運営スタッフのみなさま、お疲れ様でした!

翌日

OSC北海道の翌日は、海老庵さん、モリコ、マリメロ、コモモで美瑛・富良野観光へ。 🙂

oscdo-2014-03

ジェットコースターロードすごい。

来年のOSCも楽しみです。

baserCMS テーマの github 公開と Gradle による Sass ビルド

baserCMS テーマコンテスト受賞作品の「Cafe Debut」と「basercart」テーマのソースコードを github に公開しました。 🙂

h1romas4/basercart

basercart

h1romas4/cafedebut

cafedebut

普通に baserCMS に導入してみたい方は、baserマーケットから .zip をダウンロードしていただければと思います。「Cafe Debut」は先日 baserCMS 3.0.4 に対応され、プラグイン同梱機能や、新しいコーディングスタンダードに対応した新板になっています。(調整していただきまして、どうもありがとうございました!)

今回公開した github のソースコードは、テーマの修正や開発用を想定したものです。

basercart のソースツリーには開発時に用いた sass ファイルと、gradle によるビルド定義を加えています。( .sass ファイルウォッチから .css への自動コンパイルができるように準備しています)

本テーマの製作時は grunt で sass のコンパイルを行っていたのですが、nodejs や Ruby の環境を導入したり、それらのバージョンを開発メンバー間で合わせたりするのが大変と感じましたので、github 公開版ではビルダーを Gradle に変更しました。

Gradle はウェブ制作の方にはあまり馴染みがないかとは思いますが、最近の Java 界隈で良く採用されているビルドツールです。ここでは、grunt と同じようなタスクランナーとして考えてもらって良いと思います。

Gradle が依存するのは Java の環境だけですので、Windows、Mac、Linux ともにほとんど準備なしに(Java が入ってなければ入れるだけ、nodejs や Ruby、各周辺ツールの導入なしに)動作させられ、いつでもポータブルに同一の結果が得られるのが、grunt から変更したポイントになります。

github に公開されているソースには Gradle から生成できる gradlew と呼ばれる Gradle 自体の環境を自動で準備するラッパープログラムもコミットされています。なので事前に Gradle を導入することすら不要です。

というわけで、github から git clone するか .zip をダウンロードしていただいた後、./gradlew watch するだけで .sass のウォッチ・ビルドが開始できます。(初回起動時のみ、環境をオートでつくるため時間が少々かかります)

cd basercart
./gradlew watch
#Windows の場合は、gradlew.bat watch

簡単あるね。 🙂

build.gradle では、次のプラグインを使わせて頂いています。

A SASS / Compass plugin for Gradle は、JRuby を用いて gem の取得や処理を行い、Sass / Compass のコンパイルを行います。この動きにより、ビルドを行う PC には事前に Ruby の導入が不要になる仕掛けになっています。

その他にも同様な動きで Java に含まれる JavaScript の実装(Rhino)を用い、CoffeeScript をコンパイルするプラグインもあるようです。(TypeScript も同じ実装、早くでないかなぁ。Nashorn だと面白そう :))

Gradle Watch Plugin は Java の NIO を用いて、各 OS のファイル監視 API からの通知を元に変更時のタスクが定義できます。(ちなみに、A SASS / Compass plugin だけでも watch はできそうでした)

Gradle の build.gradle 定義は、Groovy が持つ AST 変換や各種シンタックスシュガーなどの効果で、非常に簡潔にかくことができます。 これに慣れてしまうと、JS の (function() { }) とか .pipe(“”) などがずいぶん冗長に見えてしまいますね。 😛

というわけで、ウェブ制作にも Gradle いかがでしょうか。配布先に環境をつくらなくてよいのは、大きなメリットのように思います。

ちなみに、あんまり関係ないですが Groovy 版 Ruby on Rails の新板である Grails 2.3 からは同梱される Asset Pipeline Plugin により sass、less、coffeescript が標準サポートされるようです。ごくり。

ぐる。