hiromasa.another :o)

have a lot of interests.

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

投稿日時: 2015 年 6 月 15 日投稿者: ひろましゃ

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

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

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

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

OSC北海道 2015 ウェブサイト構築基盤、コーポレートサイトにちょうどいいCMS、baserCMSの紹介 from Hiromasa Tanaka

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Gradle と Brakets でお手軽 Sass 開発

投稿日時: 2015 年 3 月 4 日投稿者: ひろましゃ

返信

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 テンプレートのダウンロード」に進みます。

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 が未導入の場合、次のダイアログがでますので、詳しい情報を押下してダウンロードサイトにいきます。

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

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

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

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

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

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

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

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

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

$ cd /Users/hiromasa/Desktop/sample

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

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

$ ./gradlew compassWatch

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

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

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

Brakets からのファイル編集

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

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

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

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

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

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

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

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

この制作環境を人に渡したい時は、フォルダごとぽいっとあげれば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 制作環境で役立つプラグインが沢山ありますので試してがってん！

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

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

投稿日時: 2014 年 7 月 5 日投稿者: ひろましゃ

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

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

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

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

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

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

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

ライト

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

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

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

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

鍵

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

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

空気入れ

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

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

泥除け・スタンド

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

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

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

すそバンド

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

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

ドリンクホルダー

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

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

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

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

ハンドルグリップ

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

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

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

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

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

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

メッセンジャーバッグ

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

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

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

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

パンク修理セット

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

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

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

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

スマートフォンホルダー

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

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

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

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

Runtastic Roadbike

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

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

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

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

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

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

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

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

さぁ、目指せ支笏湖片道 50キロ！（超上りらしい…）