Grooscript で Canvas アニメーション

G* Advent Calendar 2015 16日目です!(更新前に来てくださった方すいません…)


Groovy を altJS にしてしまった驚異の Grooscript を紹介したいと思います。Groovy をかくとソースコードが JavaScript に変換され、ブラウザや node.js 上で実行できてしまいます。

論よりrunということで、Try online がありますので試してみると良いと思います。

Try groovy to javascript conversion with grooscript

http://grooscript.org/conversions.html

ここでは、ブラウザを Grooscript の実行環境とし、Groovy で Canvas を使ったアニメーションのプログラミングをしてみます。

Grooscript を始めるには Grooscript の Gradle plugin を使うと簡単です。初期コードの作成からファイルウォッチからの変換まで可能です。

build.gradle

plugins {
    id "org.grooscript.conversion" version "1.2.2"
}

これで、

gradle initStaticWeb

とすれば、初期コードを生成してくれます。

grooscript-01

この状態で次のようにすれば、src/main/groovy 配下の *.groovy ファイルの更新を監視して、src/main/webapp/js/app の下に変換した *.js を入れてくれます。

gradle --daemon convertThread

監視を止める場合は gradle のデーモンを停止させればOKです。(Windows, Linux, OS X とも動作するはずです)

gradle --stop

あとは Groovy をかけば完成です。 :)

ここでは Canvas アニメーションを実装するために、src/main/webapp/index.html を次のようにしました。

<html>
<head>
<title>groovy on browser!</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/lib/grooscript.min.js"></script>
<script type="text/javascript" src="js/app/Presenter.js"></script>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<canvas></canvas>
</body>

src/main/groovy/Presenter.groovy で Canvas に対するアニメーション処理を Groovy でかきました。

ブラウザの window や document などのオブジェクトはそのまま記述できます。

import org.grooscript.asts.GsNative

class Animation {

    static ANIMATION_FPS = 60;

    def canvas
    def context
    def width
    def height

    def actor
    def line

    Animation() {
        window.addEventListener('load', init, false)
        window.addEventListener('resize', init, false)
        window.addEventListener('orientationchange', init, false)
        window.setInterval(update, 1000 / ANIMATION_FPS, false)
        render()
    }

    def init() {
        actor = []
        canvas = document.getElementsByTagName('canvas')[0]
        context = canvas.getContext('2d')
        width = canvas.clientWidth
        height = canvas.clientHeight
        canvas.setAttribute("width" ,width);
        canvas.setAttribute("height" ,height);
        for(def degree = 0 ; degree <= 360; degree += 360/86) {
            this.actor << new Ham("images/ham.png"
                , this.width
                , this.height
                , degree
            )
        }
    }

    def update() {
        actor.each {
            it.update()
        }
    }

    def render() {
        window.requestAnimationFrame(render)
        if(!context) return
        context.fillStyle = "#000"
        context.fillRect(0, 0, width, height)
        actor.each {
            it.draw(context)
        }
    }
}

class Ham extends Actor {

    def swidth
    def sheight
    def degree
    def sx
    def sy
    def sv

    Ham(def url, def w, def h, def d) {
        super(url)
        swidth = w
        sheight = h
        sx = swidth / 2
        sy = sheight / 2
        sv = 1
        degree = d
        width = 48
        height = 48
    }

    @GsNative
    def update() {/*
        var radian = Math.PI / 180 * this.degree
        this.x = Math.cos(radian) * (this.sx / 2 - 24) + this.swidth / 2 - 24
        this.y = Math.sin(radian) * (this.sy / 2 - 24) + this.sheight / 2 - 24
        this.degree += 0.9
        if(this.degree > 360) {
            this.degree = 0
        }
        this.sx += this.sv * 8
        this.sy += this.sv * 8
        if(this.sx >= this.swidth
            || this.sy >= this.sheight
            || this.sx <= (this.swidth * -1) + 48 + 24
            || this.sy <= (this.sheight * -1) + 48 + 24
            ) {
            this.sv = this.sv * -1
        }
        this.width = 48 + (this.sx / 48)
        this.height = 48 + (this.sy / 48)
    */}
}

abstract class Actor {

    def image
    def x = 0
    def y = 0
    def width
    def height

    Actor(def url) {
        image = Resource.getInstance().getImage(url)
    }

    abstract update()

    @GsNative
    def draw(context) {/*
        if(!this.image['loaded']) return
        context.drawImage(this.image['image'], this.x, this.y, this.width, this.height)
    */}
}

class Resource {

    def static resource = new Resource()
    def images = [:]

    private Resource() { }
    
    def static getInstance() {
        return resource
    }

    def getImage(url) {
        if(!images.containsKey(url)) {
            images[url] = [:]
            def image = document.createElement('img')
            image.src = url
            image.addEventListener('load', {
                images[url]['image'] = image
                images[url]['loaded'] = true
                images[url]['width'] = image.naturalWidth
                images[url]['height'] = image.naturalHeight
            }, false)
        }
        return images[url]
    }
}

new Animation()

本当に Groovy です。 😀

一部 @GsNative というアノテーションがついたコメント実装されているメソッドは JavaScript のネイティブコードです。 速度を稼ぎたい部分は、このように(Groovy で変換された周りのコードを考えつつ) JS をそのままかくこともできます。

以下をクリックすると、実際に動いている様子が見ることができます。

ham

変換された JavaScript のコードを見ると面白いと思います。

Grooscript はここ1年で node.js、require.js や React.js の対応が進むなど、開発を見ているのも楽しいです。

ブラウザとのつなぎも簡単ですので、Groovy な方はぜひ試してみてください :)

Keep on Groovy-ing!

Groovy + Spring Boot + SWT でクライアントアプリケーションをつくる

G* Advent Calendar 2015 9日目です!

昨日は saba1024 さん「[Groovy] MongoDBを簡単に扱えるイケてる言語Groovy -Groovyの応用編-」でした!


 

職場などで業務改善的なツールをつくりたくなる場合がありますが、案外みんなの PC にスクリプト言語を動かす環境がなかったりします。そんな時は Groovy ! Java の現場であればそのままつくった jar を渡せますし、そうでなくても launch4j などで JRE ごと渡すことができます。

今回は「Groovy + Spring Boot + SWT」という組み合わせで、手軽に高速に GUI Groovy アプリケーションをつくる骨格を紹介してみたいと思います。

珍しい組み合わせかと思いますが、Spring Boot のオートコンフィグレーションと、後述する spring-loaded によるホットデプロイ(GUI 再起動無しで処理を変更できる)と Groovy によるプログラミングの組み合わせは、かなり高速に開発を進めることができると思います。

プロジェクトの構成は以下のような感じになります。

groovy-swt-02

まずは、build.gradle で Spring Boot と SWT を定義してあげます。

build.gradle

buildscript {
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath 'org.springframework.boot:spring-boot-gradle-plugin:1.3.0.RELEASE'
    }
}

apply plugin: 'groovy'
apply plugin: 'spring-boot'

repositories {
    mavenCentral()
    maven { url 'http://maven-eclipse.github.io/maven' }
}

dependencies {
    compile 'org.codehaus.groovy:groovy-all:2.4.5'
    compile 'org.springframework.boot:spring-boot-starter'
    compile "org.eclipse.swt:org.eclipse.swt.win32.win32.x86:4.5.1"
}

springBoot {
    mainClass = 'sample.Application'
}

SWT は Windows x86 のものを選択していますが、他の環境の定義は次の通りです。

    // The Standard Widget Toolkit(SWT)
    // System.getProperty('os.name').toLowerCase().split()[0]
    // System.getProperty("os.arch")
    // 
    // Windows x86
    // compile "org.eclipse.swt:org.eclipse.swt.win32.win32.x86:4.5.1"
    // Windows x64
    // compile 'org.eclipse.swt:org.eclipse.swt.win32.win32.x86_64:4.5.1'
    // Linux GTK+ x86
    // compile 'org.eclipse.swt:org.eclipse.swt.gtk.linux.x86:4.5.1'
    // Linux GTK+ x64
    // compile 'org.eclipse.swt:org.eclipse.swt.gtk.linux.x86_64:4.5.1'
    // OS X Cocoa x64
    // compile 'org.eclipse.swt:org.eclipse.swt.cocoa.macosx.x86_64:4.5.1'

次に Spring Boot の規約に従って(必要なら)ロガー(logback-spring.xml)と Application.yml を定義します。

src/main/resources/logback-spring.xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <include resource="org/springframework/boot/logging/logback/base.xml"/>
    <logger name="sample" level="DEBUG"/>
</configuration>

src/main/resources/Application.yml

setting:
    defaultPath: C:\Users

Application.yml は Spring Boot の設定も記述できますが、作成するアプリケーションで外だししたい設定なども書けます。これを読むための、ApplicationSetting は次のようになります。

src/main/groovy/ApplicationSetting.groovy

package sample;

import org.springframework.boot.context.properties.ConfigurationProperties
import org.springframework.stereotype.Component

@Component
@ConfigurationProperties(prefix = "setting")
public class ApplicationSetting {
    String defaultPath
}

Java でかくと Setter/Getter が必要ですが、Groovy ならこれだけです。.yml のキーと変数名を合わせれば勝手に Spring Boot がバインドしてくれます。

プログラムの起動点となる Application は次のようになります。

src/main/groovy/Application.groovy

package sample

import org.springframework.beans.factory.annotation.Autowired
import org.springframework.boot.autoconfigure.SpringBootApplication
import org.springframework.boot.SpringApplication
import sample.gui.Controller

@SpringBootApplication
class Application {

    @Autowired
    Controller controller

    static void main(args) {
        SpringApplication.run(Application.class, args).withCloseable {
            it.getBean(Application.class).controller.start()
        }
    }
}

通常の Java アプリケーションと同様に main を起動してあげると、Spring Boot が main があるパッケージ配下のコンポーネントを自動でスキャンしてクラスロードしてくれます。 @Autowired で GUI の Controller をインジェクションして main から呼び出しました。

呼び出される gui.Controller は次のようなものです。

src/main/groovy/gui/Controller.groovy

package sample.gui

import org.slf4j.*
import org.eclipse.swt.*
import org.eclipse.swt.events.SelectionListener
import org.eclipse.swt.graphics.*
import org.eclipse.swt.layout.*
import org.eclipse.swt.widgets.*
import org.springframework.beans.factory.annotation.Autowired
import org.springframework.stereotype.Component
import sample.ApplicationSetting
import sample.service.Convert

@Component
class Controller {

    static final logger = LoggerFactory.getLogger(Controller.class);

    @Autowired
    Convert convert

    @Autowired
    ApplicationSetting setting

    Display display
    Shell shell
    ToolItem open
    Table list

    def private init() {
        // Window Setting
        display = new Display()
        shell = new Shell(
            display, SWT.TITLE | SWT.RESIZE | SWT.MIN | SWT.MAX | SWT.CLOSE)
        shell.setSize(640, 480)
        shell.setText("Sample Application")
        shell.setLayout(new GridLayout())
        // Application Icon
        shell.setImage(new Image(display, this.getClass().getResourceAsStream(
            "/images/icon/calculator.32x32.png")))

        // Toolbar
        def toolbar = new ToolBar(shell, SWT.FLAT | SWT.RIGHT)
        // Open
        open = new ToolItem(toolbar, SWT.PUSH)
        open.setText('Open')
        open.setImage(new Image(display, this.getClass().getResourceAsStream(
            "/images/icon/start.32x32.png")))
        // Toolbar Size
        toolbar.pack()

        // List Table
        list = new Table(shell, SWT.FULL_SELECTION | SWT.BORDER)
        list.setHeaderVisible(true)
        list.setLayoutData(new GridData(GridData.FILL_BOTH))
        list.setFocus()

        // Event Listener
        open.addSelectionListener([
            widgetSelected : {  e ->
                def f = new FileDialog(shell, SWT.OPEN)
                f.setFilterPath(setting.defaultPath);
                f.setFilterExtensions(["*.csv"] as String[])
                def login = f.open()
                def message = convert.input(login);
                def box = new MessageBox(shell, SWT.OK | SWT.OK)
                box.setMessage(message)
                box.open()
            }
        ] as SelectionListener)
 
        shell.open()
    }

    public void loop() {
        while(!shell.isDisposed()) {
            if(!display.readAndDispatch()) {
                display.sleep();
            }
        }
        display.dispose()
    }

    def start() {
        try {
            init()
            loop()
        } catch(Exception e) {
            e.printStackTrace()
            def box = new MessageBox(shell, SWT.OK | SWT.ABORT)
            box.setMessage("例外が発生しました。\n" + e.message)
            box.open()
        }
    }
}

SWT の GUI 作成とメインイベントループがあります。

ソース先頭で、サービスクラスにあたる service.Convert と先ほど Application.yml を読むためにつくった ApplicationSetting を DI しています。

    @Autowired
    Convert convert

    @Autowired
    ApplicationSetting setting

ボタンを押したときのイベントでこれらを利用しています。

        // Event Listener
        open.addSelectionListener([
            widgetSelected : {  e ->
                def f = new FileDialog(shell, SWT.OPEN)
                f.setFilterPath(setting.defaultPath);
                f.setFilterExtensions(["*.csv"] as String[])
                def login = f.open()
                def message = convert.input(login);
                def box = new MessageBox(shell, SWT.OK | SWT.OK)
                box.setMessage(message)
                box.open()
            }
        ] as SelectionListener)

サービスクラスはとりあえず。

src/main/groovy/service/Convert.groovy

package sample.service;

import java.io.File;

import org.springframework.stereotype.Component;

@Component
public class Convert {
    def input(file) {
        return "converted!" 
    }
}

というわけで、Application.groovy を IDE から実行するか、./gradlew bootRun するとアプリケーションが起動します。

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v1.3.0.RELEASE)

2015-12-09 00:25:31.353  INFO 6560 --- [           main] sample.Application 

groovy-swt-01

さて、ここで大技です。 spring-loaded を実行時に javaagent で読み込むことで、実行中に修正したクラスをリロードできるようになります。 プロジェクトサイトから jar をダウンロードし、アプリケーション実行時の JVM 引数に以下を加えます。

-javaagent:${project_loc:template-springboot-swt}/lib/springloaded-1.2.5.RELEASE.jar -noverify

“${project_loc:template-springboot-swt}” は Eclipse 的なプロジェクトホームの指定ですので、適宜変更してください。

groovy-swt-04

なお、Eclipse で実行する場合は Application.groovy から Run してください。./gradle bootRun だとリロードされません。これは、Eclipse の場合、自動コンパイルの .class ファイルを置く先が bin/ ディレクトリ配下となり、bootRun した場合は build/ 配下の class ファイルで実行され、ファイルの更新がされないためです。

というわけで、spring-loaded ですが、やってみると異常に快適です。 GUI をつくる場合、対象の処理にたどり着くまでの操作が長くかかることがありますが、spring-loaded を入れておくとリトライが簡単で、なんだか世界が変わります。 :)

その他、Spring Boot 上であると、H2 の組み込み DB や、JPA や GORM などの O/R マッパーも、gradle の定義だけでオートコンフィグレーションされてすぐ使えるようになりますので、非常に便利です。

今回のサンプルでは、サービスクラスで CSV を H2 に読んで GORM で抽出をかけたかったのですが、出張先にて機材トラブルにより間に合いませんでした。ごめんなさい。。

以上、あまり手間をかけず、ゆるいフレームワーク規約で自由気ままにツールなどの GUI をつくりたいなんて時に、良ければお試しください。

最後に、Apache Groovy おめでとうございます! 今年も Groovy にずいぶん助けてもらいました。 :)

Keep on Groovy-ing!

統合環境で baserCMS のテンプレートで使える関数を補完する

baserCMS のテーマをつくっていると、関数の補完機能がほしくなってきます。

というわけで、Eclispe や PHPStorm などの統合環境を使っていれば、簡単な定義をするだけで補完が効くようになりますのでできますので紹介したいと思います。(NetBeans には NetBeans baserCMS support があります!)

補完というのは、オートコンプリート、インテリセンス、いわゆるこれです。

autocomp

使える関数(メソッド)が自動ででてくるあれですね。 :)

何もせずとも補完ができると良いのですが、PHP などの動的型付け言語は、プログラムの形が実行時まで決定しないため統合環境がうまくソースコードを解析できず補完できないパターンがあり、baserCMS のテーマ・テンプレートもこの条件に当てはまります。

以下は、baserCMS の Blog/index.php テンプレートですが、ここででてくる $this がどこの this であるかわからないため、統合環境が適切に補完を出すことができません。

<?php
/**
 * ブログトップ
 */
$this->BcBaser->css('admin/colorbox/colorbox', array('inline' => false));
$this->BcBaser->js('admin/jquery.colorbox-min-1.4.5', false);
$this->BcBaser->setDescription($this->Blog->getDescription());

というわけで、これを解決してあげるために統合環境に this を教えてあげます。

ファイル先頭などに @var コメントアノテーション行を追加し $this が AppView であることを明示します。(テーマ・テンプレートファイル全てに入れればよいです)

<?php /* @var $this AppView */ ?>
<?php
/**
 * ブログトップ
 */
$this->BcBaser->css('admin/colorbox/colorbox', array('inline' => false));
$this->BcBaser->js('admin/jquery.colorbox-min-1.4.5', false);
$this->BcBaser->setDescription($this->Blog->getDescription());
?>

これで $this が何者であるか統合環境が理解できるようになったのですが、こんどは $this->BcBaser の BcBaser が AppView のソースコード中に存在しないため、まだ setDescription などの関数の補完ができません。これは Helper オブジェクトが実行時に動的にインジェクションされ、ソースコードだけではプログラムの形がわからないためです。

というわけで、AppView にコメントをいれてあげます。幸い、baserCMS は lib/AppView.php のオーバーライドが app/View で可能ですので、app/View/AppView.php にコピーして以下のコメントを追加してあげます。(使わないものも含めてありったけ入れてしまいましたが…)

/**
 * View 拡張クラス
 *
 * @package			Baser.View
 * @property BcAdminHelper $BcAdmin
 * @property BcAppHelper $BcApp
 * @property BcArrayHelper $BcArray
 * @property BcBaserHelper $BcBaser
 * @property BcCacheHelper $BcCache
 * @property BcCkeditorHelper $BcCkeditor
 * @property BcCsvHelper $BcCsv
 * @property BcFormHelper $BcForm
 * @property BcFreezeHelper $BcFreeze
 * @property BcGooglemapsHelper $BcGooglemaps
 * @property BcHtmlHelper $BcHtml
 * @property BcMobileHelper $BcMobile
 * @property BcPageHelper $BcPage
 * @property BcSmartphoneHelper $BcSmartphone
 * @property BcTextHelper $BcText
 * @property BcTimeHelper $BcTime
 * @property BcUploadHelper $BcUpload
 * @property BcXmlHelper $BcXml
 */
class AppView extends BcAppView {
	
}

これでテーマ・テンプレートから補完ができるようになりました。 😀

Eclipse PHP for Developer の例。

baser-eclipse

PHPStorm の例。

baser-phpstome

両 IDE ともに AppView が複数存在していても、コメントをマージしてくれるようですので、ヘルパーが存在するプラグインでは (PluginDir)/View/AppView.php にコメントかいておけば補完を出すことができます。

同じ要領で、プラグインの Controler でも、基底クラスなどにコメントをかいておけば、インジェクションされてくるモデルも補完できます。(baserCart テーマでやってますのでご参考まで)

<?php
App::uses('BcPluginAppController', 'Controller');

/**
 * CartAppController
 * 
 * @property CartConfig $CartConfig
 * @property CartItem $CartItem
 * @property CartItemTag $CartItemTag
 * @property CartOrder $CartOrder
 * @property CartOrderDetail $CartOrderDetail
 * @property BcAuth $BcAuth
 * @property Session $Session
 * @author hiromasa
 */
class CartAppController extends BcPluginAppController {

ちなみに、WordPress はテンプレートタグ(関数)がグローバル空間に存在しますので、Eclipse、PHPStorm ともに何もしなくても補完がでます。

加えて、functions.php などでたとえば global $wpdb なんてグローバル変数経由のインスタンスを使う場合は、@var を使って以下のようにすると補完できます。

/* @var $wpdb wpdb */

wordpress-eclipse

てなわけで補完がきくときかないのでは、ずいぶん開発効率が違うと思いますので、良ければお試しください。 :)

OSC 北海道 2015 WordBench 札幌 & baserCMS ユーザ会セミナー・ブース出展

6/13(土) OSC 北海道 2015 2日目に、WordBench 札幌と baserCMS ユーザ会の名前で、セミナーとブース出展を行ってまいりました。 :)

今年のセミナーは WordPress を WP Multibyte Patch プラグインでおなじみ tenpuraさん(倉石さん)にお願いし、ぼくのほうは baserCMS のセミナーを担当させていただくという布陣で参加しています。

baserCMS のほうは、朝一番ということもあり、もしかして 10名くらいしか来られないのではないかと思っていたのですが、実際には倍以上の方が来場され、最後に質問もたくさん頂き、感謝、感謝でありました。

「ウェブサイト構築基盤、コーポレートサイトにちょうどいいCMS、baserCMSの紹介」というお題で、セミナーで使いましたスライドをこちらで公開します。

tenpura さんは「WordPress 最新情報、プロジェクト参加・貢献のご案内」ということでセミナーをされました。

WordPress でお金を稼いだことがある方は?

その中で、WordPress に貢献したことがある方は?

から「やべぇ、怒られるのか!?」と思わせるに十分な導入部は、

「貢献しよう」ではなく「貢献できます」

「押しつけがましいのは好きではないです。」

「こ、貢献してあげても、いいんだからね。」

というくだりに続き、オープンソースの本質をつく、OSC ならではのとても面白いセミナーとなりました。

セミナー中、最新 WordPress リリースリーダーをされた高橋大輔さんと、現存する最古の開発者(!?!?)としてぼくが並ぶ一幕もあり OSS の面白さを再確認することができました。(なんと年齢差 22 歳・・・ よぼよぼ。。)

さて、ブースのほうの話題ですが、baserCMS は今回なんと福岡から、開発リードをされています、江頭さんが来てくれまして、盛大に出展することができました。(ありがとうございました!)

手前から、baserCMS、WordBench 札幌、SaCSS ブースと仲良く並んでおります。 :)

いつもお世話になっている、SaCSS ハムさんシール。 :)

というわけで、数えてみたら OSC 北海道参加を続けて今年で 5年目でした。ネクストジェネレーションの活躍を楽しみに、来年もがんばろ〜。 :)

セミナー・ブース関係者のみなさま、OSC 関係者のみなさま、今年もありがとうございました!お疲れ様でした!

Gradle と Brakets でお手軽 Sass 開発

Sass をやってみたいだけなのに、OS に node.js 入れたり grunt 入れたり Ruby 入れたりなかなか大変な思いをしている方が結構いるようですので、「Gradle」を使ったお手軽な導入方法を紹介してみたいと思います!

Gradle は、JVM(Java) の世界で広く用いられているビルド・タスクランナーツールです。node.js でいうところの grunt や glup と似たものだと思えばOKです。

Gradle の良いところのひとつは、Gradle 自体の導入も不要な gradlew というラッパーが用意されていること。また、Java の豊富な資産を活用したさまざまなタスクをポータブルに準備し、手軽に実行することができます。

おそらく Sass のファイルウォッチからのコンパイルできる環境が 15分くらいでできると思いますので、よければ試していただければ。この方法は OS 環境に依存しないので、他の人とプロジェクトを共有するのもとても楽です。(フォルダをそのまま相手に配布するだけでそのまま全部働きます)

Gradle 環境は、Windows、Mac OS X、Linux とも同じ方法で動作させることができます。ここでは Mac での操作を紹介してみます。

(のハズだったのですが、実行に使われる gradle-jruby に Windows で動かす場合の不具合があって 2015/3 月時点では動きません。。すでに修正がでているようなので、なおり次第記事をアップデートします)

Java の導入

環境の構築とビルドに使う Gradle というプロダクトが OS に依存するのは Java の JVM のみです。

ターミナルを起動して「java -version」を入力し以下のような結果がでれば導入済みなので何もする必要はありません。次の「Gradle テンプレートのダウンロード」に進みます。

gradle00

macbookpro:~ hiromasa$ java -version
java version "1.8.0_25"
Java(TM) SE Runtime Environment (build 1.8.0_25-b17)
Java HotSpot(TM) 64-Bit Server VM (build 25.25-b02, mixed mode)

OS X で Java が未導入の場合、次のダイアログがでますので、詳しい情報を押下してダウンロードサイトにいきます。

gradle01

「JDK」から「jdk-8u25-macosx-x64.dmg」を探し、上部の「Accept License Agreement」ラジオボタンを選択し、リンククリックでファイルをダウンロードします。(jdk-8u25 の u25 はバージョン番号です。より新しいものがあればそちらを選択してください)

gradle02

.dmg をダブルクリックし、インストーラを起動して JDK を導入します。

gradle03

インストール後、一度ターミナルを開きなおして「java -version」して前述の表示がでれば準備完了です。

Gradle テンプレートのダウンロード

Gradle から Sass をコンパイルするための gradle-compass プラグインの定義ファイルと構成一式を以下からダウンロードします。(構成はぼくがそれなりにつくったものです)

https://github.com/h1romas4/gradle-template-web/archive/master.zip

.zip ファイルを任意の場所に展開して、自分の好みの名前をつけます。このフォルダがそのまま開発用の作業フォルダになります。

gradle10

ここでは「sample」にリネームしました。

gradle12

ターミナルのカレントディレクトリを「sample」に移します。(なお、この時パスに漢字などのマルチバイト文字が含まれるとビルドが不具合を起こすようですので、パスが半角英数字だけの場所にフォルダを配置します)

$ cd /Users/hiromasa/Desktop/sample

カレントディレクトリを移すには、ターミナルに cd スペースと入力したあとフォルダをドロップしてエンターを押すと確実です。

gradle13

できたら以下のコマンドを入力します。

$ ./gradlew compassWatch

gradle14

初回のみ、環境をインターネットからダウンロードするので時間がかかります。 5分ほどで終わりますのでのんびり待ちましょう。

gradle15

起動が無事完了すると、Sass ファイルのコンパイルウォッチ状態になります。これだけで環境構築は全て完了です。 😀

gradle16

作業をやめるときは Ctrl + C を押します。 後日再開する場合は、再び ./gradlew compassWatch してください。(今度はすぐ起動します)

Brakets からのファイル編集

「sample」フォルダ内の「www」フォルダの下に編集用の index.html と .scss ファイルのサンプルが用意してあります。 _sass/style.scss を編集するとウオッチが働いて css/style.css が生成される仕組みです。(ファイルは自由に追加できます)

HTML エディターである Adobe の Brakets でファイルを編集するとリアルタイムプレビューもできて便利です。

Brakets を導入し、「ファイル -> フォルダを開く」から「www」フォルダを選択します。

gradle20

フォルダ選択後、index.html を開き、画面右上の「雷アイコン」をクリックすると、リアルタイムプレビューモードでブラウザが起動します。

gradle21

_sass/style.scss を編集すると、ターミナルでウォッチが働き Sass のコンパイルが行われるとほぼ同時に、ブラウザがオートリロードし更新されます。

gradle22

なお、この状態でブラウザの開発者ツールを開くと、Brakets のリアルタイムプレビューの仕組みで改変された HTML が表示されてしまいます。

gradle23

開発者ツールのインスペクタなどを使いたい時は、Brakets の「雷アイコン」をもう一度押し、リアルタイムプレビューをきった状態にしてください。(プレビューがきれるだけで、ローカルで立ち上がった Web サーバはそのまま残るので、リロードなどの操作をしても問題ありません)

編集中の HTML や CSS がそのまま見えるようになります。 Gradle の Sass のコンパイル時に map ファイルを生成しているので、Firefox などでは対応した style.scss のソースを表示することができます。

gradle24

この制作環境を人に渡したい時は、フォルダごとぽいっとあげればOKです。相手方で同じように「./gradlew compassWatch」してもらえれば動きます。とてもポータブルで便利です。

さて最後に、Gradle でどんなことをやっているか気になったり、コンパイルオプションが気になった方は sample フォルダにある build.gradle を覗いてみてください。

/**
 * compass & sass build setting.
 * 
 * @see https://github.com/robfletcher/gradle-compass
 */
compass {
    cssDir = file("www/css")
    sassDir = file("www/_sass")
    // nested, expanded, compact, compressed
    outputStyle = "expanded"
    sourcemap = true
    noLineComments = true
    debugInfo = false 
}

Gradle はこの他にも Web 制作環境で役立つプラグインが沢山ありますので試してがってん!

(久しぶりのブログでオチが弱い上にどこかの記事とかぶってる…)

クロスバイクでサイクリング(追加で買ったもの編)

去年くらいから体調があまり良くなく(歳ですゆえ…)、運動不足解消のためにと最近クロスバイクを買ってサイクリングを始めました(^ ^

bscycle-01

実は買うまでクロスバイクの由来も知らなかったのですが、山を走るマウンテンバイクと、スピードレースをするロードバイクの間の子とのこと。

購入車種は Marin Bikes の MUIRWOODS SE 19 インチ。SE はジャパンスペシャルということで、タイヤのサイズが異なったり、ブレーキがディスクからVブレーキに変更されているなど、日本の事情に合わせたモデルになっているようです。

26インチの少し太めタイヤということで、通常のスピードを出すクロスより街乗り向き。700c 細タイヤは段差でアイタタタってなりますが、この自転車はクロモリ(鉄)フレームとも相まって、スピードは犠牲になるものの柔らかい乗り味なのではないかと思います。

ちなみに腕が悪いのかホイルベースの長さか(多分前者)アンダーステア気味でしょうか。おもったより曲がらなくてドキッとすることが何度かありました。

さて、街乗りクロスといえどスポーツ自転車には走る以外の機能はついていませんので、いくつかパーツを買い足す必要があります。

必需品からそうでないものまで、購入して2ヶ月使って良いなぁと思ったものを紹介してみたいと思います。初めてクロスバイクを買う方の参考になれば。

ライト

自転車にライトは必ずつけます。たまに夜のサイクリングロードに無灯火が走っていますが、本気でステルスなので危ないです。リアもあったほうが良さそうです。

bscycle-02

bscycle-03

ライトパネルを押し込むと点灯するタイプが操作もしやすく便利でした。

Amazon より「Blackburn(ブラックバーン) VOYAGER+MARS CLICK COMBO ヴォイジャー+マーズクリックコンボセット ブラック 3BB-VY/MS-CLK」

フロントリアライトセットがお買い得。ゴムバンドをきつく伸ばして自転車のフレームに装着します。

盗まれないように鍵をかけましょう。

bscycle-06

長め太めのワイヤーの鍵で、走行中には肩からかけると安全反射板の役割になるタイプもあるようです。(Amazon より )

空気入れ

スポーツ系の自転車のタイヤは常にパンパンにしておかないと、スピードも出づらくパンクもしやすいとのこと。タイヤに空気圧の仕様が書いてありますので、走る前に圧力計を見ながらいっぱい入れてあげましょう。ぼくのは6気圧でした。

bscycle-17

米式/英式/仏式とコネクタが3種類あって、アダプタで互換できる空気入れが多いようです。1000〜2000円くらい(Amzon より 空気入れ

泥除け・スタンド

ほとんどのクロスは、泥除けもスタンドもついていないので追加購入。

bscycle-07

雨天は走らないので泥除けはいらなかったかも。ちなみに後ろにしかつけなかったので、あまり意味もなしてません。。ホコリよけくらいにはなっているかな?(笑)

スタンドは多くの場合必要になると思いますので自転車屋さんで合わせて購入を。サービスで取り付けもしていくれると思います。価格は 1000〜2000円くらい。

すそバンド

すそが広い服を着てクロスをこぐと、右のギアにひっかけて破けます(経験者)。というわけで、特にスーツ通勤で使う方はすそバンドを買いましょう。

bscycle-14

服によってはもんぺみたいになるのが玉に瑕ですが、しょうがありません。。こちらも鍵と同様反射板になっているタイプがあるようです。(Amazon よりすそバンド)

ドリンクホルダー

長距離、といっても1時間くらい走るなら水分補給必須。市販のペットボトルがそのまま使えるドリンクホルダーがとても便利です。

bscycle-04

bscycle-05

丸ボトルでも四角ボトルでもがっりちホールドでしてくれます。ちなみに愛車の MARIN ちゃんは縦にも取り付けられるネジ穴あり。お手持ちの自転車を確認してみましょう。

Amazon より「Bikeguy ペットケージ (500mlペットボトル専用) ブラック」

これで 627円はお買い得。ドリンクの収納取り出しもさっとできてお勧めです。

ハンドルグリップ

クロスを乗り始めて2〜3日はおしりが痛く、スポーツ自転車はやっぱり乗り心地は悪いかななんて思いましたが、ハンドルとペダルとサドルの3点で平均して体重を支えるということを意識してからは快適に運転できるようになりました。最近ではこのサドルは柔らかいなぁなんて思います。

ただ、ハンドルの握りだけは丸いグリップを掴み続けると指が固まるような違和感が。こちらは結構な時間乗っても修正できなかったのでグリップを変更。

bscycle-10

エルゴノミクスタイプのグリップに。向きをうまく設定すれば、段差の不快なショックも吸収してくれてかなり快適です。お勧め。

Amazon より「ERGON(エルゴン) GP1 ロング Lサイズ HBG08001」

グリップの取り換えは、元のグリップをごじってハンドルから外すか(結構疲れる)、ゴムであればカッターで崩壊させて新しいものと付け替えます。

その際にブレーキ位置を奥に変えなければいけないかもしれません。この場合はブレーキワイヤーのテンションが変わるので要ブレーキ調整です。(気をつけて)

メッセンジャーバッグ

クロスには買い物カゴがついてませんので、荷物を運ぶために斜めがけができる小さめメッセンジャーバッグを持っていると便利です。

bscycle-08

サイクリングしていると同じもの持ってる人たまに見かけます。 定番なんでしょうか? :)

Amazon より「Manhattan Portage 1606VJR」と「[ManhattanPortage] ショルダーパッド LGサイズ SHOULDER PAD LG MP1001」

メッセンジャーバッグを使いながら自転車に乗っていると、結構ストラップが食い込んできますのでショルダーパッドをつけたほうが良さそうです。

パンク修理セット

遠出して自転車がパンクしたり故障したりしたら悲しいので、バッグには修理セットを忍ばせておきましょう。

bscycle-13

ポータブルの空気入れと、パンク修理セット。自転車に合わせて六角レンチ、ドライバーなども入れておくと良いと思います。

Amazon より「Panaracer(パナレーサー) ミニフロアポンプ [フットステップ装備] 米式/英式/仏式バルブ対応 BFP-AMAS1」と「 Panaracer(パナレーサー) タイヤレバー&パンク修理パッチキット [携帯用ポーチ付属] PTL-KIT」

携帯ポーチがお気に入り。

スマートフォンホルダー

走った記録を GPS から計測したり、地図を手軽に見るためにスマートフォンを装備。

bscycle-11

bscycle-12

Garaxy S4 ですが、うまく固定されています。

Amazon より「MINOURA(ミノウラ) スマートフォンホルダー [iH-500-STD] 」

サイドアーム側は段差の揺れにも耐え、かなりがっちり固定されますが、ある程度経過するとさすがに振動でフレーム側の固定ネジが緩むなどはしますので、念の為ストラップはつけておいたほうが良いです。気がついたらネジをきつくしめておきましょう!

Runtastic Roadbike

スマートフォンアプリ「Runtastic Roadbike」。 GPS から距離や速度を計測し、地図の情報と合わせて走行ログを記録してくれます。

bscycle-16

Pro 版を購入して使っていますが、アップダウンも計測してくれるのがお気に入り。総走行距離もでますのでやる気もアップ。

測定開始から2ヶ月で520キロ走行したようです。年内 1000 キロを目標にしていましたがこの調子ならいけそう。 北海道は自転車に乗れる次期が短いですが。。 😉

調べてみると札幌には距離が長めのサイクリングロードが結構あります。

サイクリングマップ/札幌市

建設局総務部自転車対策担当課では、市内一円のサイクリングロードを紹介する「さっぽろサイクリングマップ」を作成しております。

今日は豊平川を遡上して、滝野森林公園・滝野の森口まで片道約 20キロ。 1時間13分でした。帰りは思いっきり下りなので 45分くらい。

bscycle-15

途中上りが結構きつかったですが、たまたま走っていた練習中のロードの人と、サイクリングなマウンテンバイクな人をマイルストーンにさせてもらって無事到着。 :)

さぁ、目指せ支笏湖片道 50キロ!(超上りらしい…)

オープンソースカンファレンス北海道 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も楽しみです。

WordOnsen Sapporo 2014 と pre_get_posts による記事のソート処理

5/17 〜 5/18 に WordOnsen Sapporo 2014 が開催されました。定山渓温泉にてゆったり WordPress の勉強会という企画であります。 :)

sacss_wordOnsen_560160

セミナー講師を担当させていただきましたが、温泉ということでいつもの SaCSS の勉強会と趣を変えようかと、モニターにコードを映しながら、お題を「functions.php を使い、pre_get_posts フックを用いてカスタム投稿をソートする」と決めてライブコーディングする形式でしゃべらせて頂きました。

134_large

東京から来られましたまがりん様に相談しながら、ライブコーディングしていたら夢中になってしまい、気がついたら 90分も演っていたということで、すいませんすいません。。(←本人はとても楽しかったらしい…

ということで、申し訳ないので、このブログにてソースなどまとめてみたいと思います。 お役立ていただけたらと思います。

functions.php について

  • functions.php は WordPress の初期化後すぐに評価されるテーマ内のファイル。
  • functions.php にフックの追加処理を記述しておくことにより、WordPress 初期化後に実行されるメイン処理の挙動をテーマから変更することができる。
  • WordPress には処理の変更が行えるように、たくさんのフックが定義されている。
  • 今回はテンプレートファイルのループで出力される記事の抽出条件を変えることができる pre_get_posts フックを活用して、カスタムフィールドの値で記事の順番をソートすることをお題としました。

フィルターフックの基本形

add_filterに関数名(ここでは change_query)を設定する。

function change_query($query) {
    $query->set('posts_per_page', 1);
}

add_filter('pre_get_posts', 'change_query');

PHP 5.3 以降では無名関数が利用でき、フックが関数定義なしでかけるので、直感的で便利。(以下のコードはこの形式でかきます)

add_filter('pre_get_posts', function($query) {
    $query->set('posts_per_page', 1);
});

pre_get_posts フィルターフックによるメインクエリー改変

pre_get_posts フックから渡されてくる引数($queryオブジェクト)に set メソッドでパラメータを上書き設定すると記事の抽出条件が変更ができる。

例えば posts_per_page パラメータには出力する記事数が設定できる。

add_filter('pre_get_posts', function($query) {
    // var_dump($query);
    $query->set('posts_per_page', 1);
});

存在するパラメータは Codex の WP_Query をみるか、var_dump($query); をすると知ることができる。

pre_get_posts で改変できるクエリーは、サイト上の表示だけでなく WordPress の管理画面の一覧表示などでも使われるため、テンプレートファイルからのメインクエリー出力時のみ変更するように、次のような if で条件を絞る。

add_filter('pre_get_posts', function($query) {
    if(!is_admin() && $query->is_main_query()) {
        $query->set('posts_per_page', 1);
    }
});

pre_get_posts を使ったカスタムフィールド値でのソート処理

サイト上に配置された「昇順」「降順」などのリンククリックから、記事をカスタムフィールドに設定された値でソートを行う。例えば、カスタムフィールド PRICE に設定された値段で、商品の表示順をソートする場合。

商品を登録するカスタム投稿(post_menu)を定義。

add_action('init', function() {
    register_post_type('post_menu', array(
        // 管理画面ラベル名
        'label' => '商品',
        'public' => true,
        'supports' => array(
            'title', 'editor', 'thumbnail', 'custom-fields'
        ),
    ))
});

「昇順」「降順」のリンクとアーカイブページを作成するため、カスタム分類(sort)を定義。

add_action('init', function() {
    register_taxonomy('sort',
        // この分類はカスタム投稿 post_menu に属する
        array('post_menu'),
        array(
            // 管理画面ラベル名
            'label' => 'ソート',
            // 管理画面に表示する
            'show_ui' => true,
        )
    );
});

カスタム分類ができたら、「昇順」「降順」という分類を管理画面から登録し、スラッグをそれぞれ asc と desc に設定。(設定後、このカスタム分類は管理画面上に表示しなくてもよいため、show_ui を false にしてもOK)

functions.php でカスタム投稿・分類の設定を行った後は、管理画面から「パーマリンク」を一度ひらいてあげて、設定をリフレッシュしましょう。(←現地でわすれてまがりん様につっこまれる)

サイト上にカスタム分類(sort)のリンクを出力するため、テーマのテンプレートファイルに wp_list_categories テンプレートタグを配置。この分類には記事が属せず、そのままだとリンクが出力されないため、hide_empty を false に設定。(← true にしようとしてまがりん様につっこまれる)

<?php wp_list_categories(array(
    'title_li' => '',
    'taxonomy' => 'sort',
    'hide_empty' => false )); ?>

「昇順」「降順」リンクがサイトに出力されるも、そのままのクエリーだと、単純に分類に属する記事を抽出しようとするので、何もでてこない。

ここで pre_get_posts の出番。クエリーを改変し、「カスタム分類 sort 出力時は、カスタム投稿(post_menu)に属している記事」という条件にまずは変更。$query が持つ条件分岐タグ is_tax でクエリー改変条件を絞り込み。

add_filter('pre_get_posts', function($query) {
    // メインクエリーでカスタム分類 sort 時のクエリーを変更
    if(!is_admin() && $query->is_main_query() && $query->is_tax('sort')) {
        // カスタム投稿 post_menu の記事を抽出対象にする
        $query->set('post_type', 'post_menu');
        // カスタム分類 sort による抽出を削除してしまう
        $query->set('sort', '');
    }
});

この処理で「昇順」「降順」リンクをクリックで表示されるカスタム分類アーカイブページで、商品が日付順で出力されるようになる(まだどちらのリンクも同じ抽出結果)。

カスタムフィールド PRICE によるソート処理を追加。

add_filter('pre_get_posts', function($query) {
    // メインクエリーでカスタム分類 sort 時のクエリーを変更
    if(!is_admin() && $query->is_main_query() && $query->is_tax('sort')) {
        // カスタム投稿 post_menu の記事を抽出対象にする
        $query->set('post_type', 'post_menu');
        // カスタムフィールド PRICE でソートするようにクエリーを設定
        $query->set('meta_key', 'PRICE');
        $query->set('orderby', 'meta_value_num');
        // 押されたリンクにより昇順か降順のソートをクエリーに設定
        if($query->get('sort') == 'asc') {
            $query->set('order', 'ASC');
        } else {
            $query->set('order', 'DESC');
        }
        // カスタム分類 sort による抽出を削除してしまう
        $query->set('sort', '');
    }
});

これにて完成です。 :)

まとめると、カスタム分類 sort を作成することにより、カスタム分類アーカイブページの URL(クエリー)を WordPress 上に作成し、リンククリック時のクエリーを pre_get_posts により改変しカスタムフィールドでソートするという合わせ技となります。

この方法は、アーカイブページのクエリーに相乗りすることでページネーションも普通に行うことができますので、便利なのではないかと思います。

なお、セミナー中でも少しふれましたが、カスタムフィールドを使ったソートは、WP_Query で対応しているものの、WordPress の実装上、DB インデックスがあたらなかったり、value カラムが varchar になっている関係もあり、表示速度はそれほど期待できません。 記事が多いサイトで利用する場合は、事前に速度をテストしたり、もし遅い場合は、キャッシュ系の技術を併用するなどの対策を行ってください。

というわけで、WordOnsen Sapporo はセミナー後、開発合宿及び懇親会に突入。

まがりん様がもくもくと Stop the Bokettch のバージョンをあげ、マリメロ様が wp-otenki のカスタムお天気画像をつくり、気がつけばマミリンがぐーすか寝ているなど、盛り上がりをみせておりました。

71_large

翌日は円山公園散策。まがりん様のリス写真。

健康的! 楽しかったです(^ ^アリガトー

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 が標準サポートされるようです。ごくり。

ぐる。

Eclipse EGit の使い方(2/2)

前回に続き、EGit の使い方です。

目次

  1. 導入
  2. ローカルリポジトリの作成
  3. ファイル操作
  4. リモートリポジトリに接続
  5. ローカルブランチの作成
  6. リベースインタラクティブ
  7. ブランチからのマージ1
  8. ブランチからのマージ2
  9. コンフリクトの解消
  10. リベース
  11. コミットコメント修正
  12. コミットリセット
  13. リバートコミット

このページでは、7〜13までを記載しています。

ブランチからのマージ1

develp ローカルブランチのコミットを origin/master に接続している master ブランチにマージしてプッシュする操作です。この操作では、devel に行ったコミット操作が master に統合されます。

develp ローカルブランチは次のようになっています。

egit-rebasei05

1. master ブランチにスイッチします。

egit-margea01

2. プロジェクト右クリックから、Team -> Marge を選択します。

egit-margea02

3. devel ブランチを指定し Merge ボタンを押下すると、master ブランチに devel ブランチのコミットがマージされます。devel と master でコンフリクトがなく、Fast forward option で、If a fast-foward, only update the branch pointer を選択しているため、master のおしりに devel のコミットが結合されます。

egit-margea03

egit-margea04

4. リモートリポジトリにプッシュされていないコミットがあると↑印で分かります。 Team -> Push to Upstream でプッシュします。( devel ブランチで行った rebase -i で修正したコミットはプッシュされていないのが分かります)

egit-margea05

egit-margea07

egit-margea08

b03

5. 不要になったローカルブランチは、Git Repository View から右クリック Delete Branch で削除できます。

egit-margea09

ブランチからのマージ2

develp ローカルブランチのコミットを origin/master に接続している master ブランチにSquash マージしてプッシュする操作です。この操作では、devel ブランチに行ったコミット全てをひとつにまとめて master にコミットできます。

1. Team -> Swicth To -> New Branch から devel2 ローカルブランチを作成します。

egit-margeb01

2. devel2 で作業を行い、(恥ずかしい)コミットをいれます。

egit-margeb02

3. Team -> Swich To -> master から master ブランチに切り替えます。

egit-margea03

4. Team -> Merge を選択します。

egit-margeb03

5. devel2 ブランチを選択し、Merge options で Squash を選択し、Merge ボタンを押下すると、ソースコードがマージされます。(コミットはされません)

egit-margeb04

egit-margeb05

egit-margeb06

6. マージされたソースを master ブランチにコミットすると、devel2 の修正が新しいコミットとして作成できます。なお、Commit Changes ダイアログでは Commit and Push を押下すると、コミット後自動的にリモートブランチにプッシュが行えます。

egit-margeb07

egit-margeb08

b04

コンフリクトの解消

マージやプル操作などで、ソースに衝突が発生した場合は、次の手順でマージを行います。

master からブランチした devel3 ローカルブランチで作業中に、起点とした master に別な修正がかかりコンフリクトした例です。

egit-confrict01

master にスイッチして devel3 をマージしたところ衝突が起きました。該当のモジュールに赤印がつき、プロジェクトのマーカーに Conficts がつきます。

egit-confrict02

egit-confrict03

1. 衝突したモジュールを右クリックし、Maege Tool を選択します。

egit-confrict04

2. Select a Merge Mode で Use HEAD を選択します。

egit-confrict05

3. Merge Tool でソースコードのマージを解消します。

egit-confrict06

4. マージして赤くなっているモジュールを右クリックから、Team -> Add to Index を選択し、インデックスに戻してあげると、プロジェクトのマーカーが Merged に変わります。

egit-confrict07

egit-confrict08

5. コミットを行います。(マージコミットが作成されます)

egit-confrict09

egit-confrict10

b05

リベース

ローカルブランチで作業中に、ブランチの起点となったコミットを動かし、なるべくマージ(コミット)しないようにリベースする手順です。

master からブランチしたローカルブランチの devel4 をリベースし、最新の master を起点に追従します。

1. devel4 で作業中の master にリベースしたいタイミングで、Team -> Rebase を選択します。

egit-rebase01

2. master ブランチを選択し、Rebase を押下します。

egit-rebase02

3. rebase 時に不運にもソースコードにコンフリクトが起きた場合は、Start Merge Tool to resolve conflicts を選択し OK ボタンを押下します。

egit-rebase03

4. コンフリクトを解消するとマージ印がつきます。プロジェクトのマーカーは Rebase interractive になっており、まだ rebase 操作中であることが分かります。

egit-rebase04

5. Team -> Rebase -> Continue Rebase を選択し、全ての衝突を解消すると、リベースが完了します。

egit-rebase05

egit-rebase06

コミットコメント修正

コミットした直前のコミットコメントは修正できます。

egit-amend01

1. モジュールに修正をかけない状態で、再びコミットを行おうとすると、No files to commit ダイアログが表示されるので、はいを押下します。

egit-amend02

2. コミットダイアログが表示されるので、コミットコメントを修正し、Commit を押下すると直前のコミットコメントが修正されます。

egit-amend03

egit-amend04

コミットリセット

プッシュ前であれば、コミットを取り消す(HEADを移動させる)ことができます。

egit-reset01

1. ヒストリービューからいらないコミットの前(HEADにしたい)のコミットにカーソルを合わせて、Reset -> Mixed を選択すると、そこまでのコミットがなかったことになります。(Mixed を選択した場合、ワーキングディレクトリのファイルの内容はそのままになります。ファイルの内容も抹消したい場合は Hard を選択します)

egit-reset02

egit-reset03

egit-reset04

リバートコミット

プッシュしてしまったコミットを取り消すには、打ち消しのコミットを入れてプッシュします。

機能G追加のコミットが不要でしたが、リモートリポジトリにプッシュしてしまったので取り消します。

b06

egit-revert01

1. ヒストリービューから、取り消したいコミットを右クリックして Revert Commit を選択すると、取り消しとなるリバートコミットが行われます。

egit-revert02

egit-revert03

3. リバーとコミットをプッシュします。

egit-revert04

b07

以上、Egit の操作系の紹介でした。(実はプルを書き忘れていたりしますがそのうちなおしておきます…)

EGit ではその他にも、stash とかタグうちとか、ブランチ同士の比較なども同じような操作でできますので試してがってん。3.3.1 にて自分がやりそうな操作はひと通りできるようになっているようです。(3.4 も後少しで Eclipse Luna とともにリリースされるハズです)

気になっているのが JGit のコマンドラインインターフェースがあるような雰囲気なのですが、どうやって使うんでしょうか。

…てなわけで、オチがないので滝にうたれてきます。