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 らしい演出で良かったです。 😀

ひろましゃ

カリスマプログラマー

WordPress セミナー

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

ひろましゃ

ひろましゃ

テーマの名前は 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も楽しみです。