camuro

Tokyo Middleman Meetup #1でSusyのお話をしてきた

2013年11月22日、今をときめく静的サイトジェネレータ "Middleman" について語る会ことTokyo Middleman Meetup #1が株式会社ジェニュインブルー様で開催されました。

せっかくの機会だったので、自分もお気に入りのcss frameworkであるところのSusyについてお話させていただきました。

MIDDLEMAN MEETS SUSY by kumano ayumi

スライドに出ているgridのサンプルはこちら。 Middleman Meets Susy - DEMO (Source on github)

当日の様子はこんな感じでした。(@machidaさんのtweet引用しまくります)

興味が湧いた方は、Susy公式のReferenceを見ながら試されると良いと思います。 日本語のリファレンスが少ないので、本番ではお話しきれなかった他のmixinなんかについても（PaddingやMarginのmixinなどなど）いずれどこかでまとめる予定です。 併せてBurbon x Burbon NEATもやりたいなーとも思っているところ。

Middleman エヴェンジェリスト(?)であるところの@yterajimaさんによるMiddleman Guides & How to Lean、 @kkotaro0111さんのMiddleman Usecase、 @hokacchaさんの middleman + rack-reverse-proxy でフロントエンドのアプリ開発などなど、 皆さんのお話から更にmiddlemanに関する知見を得ることが出来たの、本当に良かったです。

自分の発表に関しては、LTもやったことなくていきなり30分も喋られるのか自信ないままお話して、終わった後の敗北感が凄かったですが、 これに懲りずまた機会があったら挑戦したいなと思っています。 開催にまつわる関係者の皆様、大変ありがとうございました！

以上です！

Adventarのリニューアルデザインをお手伝いしたお話

2013年11月1日、本年度のAdventar(Advent Calendar)のリニューアル版がリリースされました。
Advent Calendarは本来、12月1日から24日までクリスマスを待つまでに1日に1つ、穴が空けられるようになっているカレンダーです。 Adventarでは、その風習に習い、12月1日から25日まで1日づつみんなで記事を投稿して、web上でAdvent Calendarを体験できます。

今回、自分はデザイン面でお手伝いさせていただきました。
もともとAdventarは2012年11月1日に@hokacchaさんがお一人でリリースされたサービスです。
今年はBlabo!のお仕事でもご一緒している@june29さんに「You、Adventarのデザインやってみない？」とお声をかけていただいたことがきかっけでした（若干脚色有り）。

2012版との大きな変更点は、今年らしくフラットデザインに。
各カレンダーに固有の色を持たせて賑やかな感じに。
カレンダーページには参加が登録しやすいようなUIに。

トップページ BEFORE

トップページ　AFTER

カレンダーページ BEFORE

カレンダーページ AFTER

@adventar
twitterの公式アカウントもあります。

興味をお持ちになった方、ぜひ参加してみてださいね！

WordPressからmiddlemanに移行してGithub Pagesで運用する方法

サイトをリニューアルしていました。 WordPressからmiddleman-blogに乗り換えました。 ホスティングもロリポップからgithub-pagesに乗り換え。 理由は普段使っているエディタでmarkdownでブログを書いてgitでデプロイする流れがやりたかったから。 static site generatorは数あれど、慣れたmiddlemanでやってしまおうと思っていました。 haml と sassでコーディングしています。コードはここに置いてあります→camuro.github.io

今回リニューアルするのにとった流れか下記の通りです。

  1. WordPressからデータをmarkdown形式でブッコ抜く
  2. Pureを少し使ってmiddleman-blogでコーディング
  3. githubにorganizationアカウントを作る
  4. middleman-deployでdeploy
  5. トップレベルドメイン(TLD)でDNSの変更

1. WordPressからデータをmarkdown形式でブッコ抜く

WordPressからxmlをexportしておく。 Octopress - WordPress から投稿データを移行！ の記事を参考にWpXml2Mdを使ってxmlからmarkdownにコンバートする。 wp-content/uploads/の画像をsource/images/にコピーする。 表示おかしいところなどを確認して直す。

正直、syntax-hilighterの調整で戸惑ったので、もっといい方法があるはず。 jekyllとかoctpressの記事を調べてもっと良い方法探した方がいいかも。

2. Pureを少し使ってmiddleman-blogでコーディング

グリッドとページングのところにPureを使いました。@yterajimaさんのgemが便利です。 markdownはmiddleman-syntaxでredcarpet、Syntax-Hilightはmiddleman-rouge、コメントはmiddleman-disqusのgemを使いました。

3. githubにorganizationアカウントを作る

ドメインを割り当てたい場合の対策です。 ユーザーアカウントにプロジェクトリポジトリを作成した場合は、masterブランチをdeployするとgh-pagesブランチが生成されてそこにbuildしたファイルがdeployされます。 http://username.github.io/projectnameでgh-pagesブランチのファイルが表示されるはずです。 ドメインを割り当てる場合は、username.github.ioという名前でリポジトリを作成してそこにドメインを書いたCNAMEファイルを置きます。（置き場所はsource/の下です。） github pagesのカスタムドメインは1ユーザにつき1つしか設定できないので、自分の場合はcamuro.org用にcamuroというorganizationアカウントを作りました。 そしてorganizationアカウントで新しいリポジトリをcamuro.github.ioという名前で作成します。 camuro/camuro.github.ioという感じですね。

4. middleman-deployでdeploy

（deployする前に、$ middleman buildしておいてくださいね。） 以前書いていたのですが、公開してなかった記事があったのでついでに公開します。 Middleman 実践（4）- Githubページへデプロイする方法 上記の記事の方法はdeploy.branchを指定しないと自動的にgh-pagesというブランチで生成されますが、ドメインを割り当てたい場合にはgh-pagesにCNAMEを置いても反映されず、あくまでmasterブランチでないと反映されません。 なので、config.rbに次のように設定しておきます。

activate :deploy do |deploy|
  deploy.method = :git
  deploy.branch = 'master'
end

これで、$ middleman deployしてあげるとmasterブランチにdeployされます。 まぎらわしいので本来のmasterブランチ的な役割はdevelopというブランチ名で作りました。 Coiney開発者ブログを参考にしました。（coiney.github.io）。

トップレベルドメイン(TLD)でDNSの変更

独自ドメインの取得先で DNS を設定します。 DNS で camuro.org の Aレコードを 204.232.175.78 にセットします。 セットした後にターミナルで確認します。

dig camuro.org +nostats +nocomments +nocmd

反映されていたらこんな感じで表示されるはずです。

; <<>> DiG 9.8.5-P1 <<>> camuro.org +nostats +nocomments +nocmd
;; global options: +cmd
;camuro.org.      IN  A
camuro.org.   3600  IN  A 204.232.175.78

これで、camuro.orgにアクセスしたらGithub Pagesに飛ぶようになります。 以上です！

RubyHiroba 2013 のサイトデザインしました

rubyhiroba2013

2013年6月2日（日）に日本マイクロソフト株式会社 品川本社で開催される、RubyHiroba 2013というイベントのサイトデザインなどに携わらせていただきました。

LTthon(Lightning Talk Hackathon)や、p4d(Programming for Designer)・dRuby（ハンズオン）・RailsGirls, More!のワークショップ、地域コミュニティなどのブース出展などを実施いたします。 doorkeeperから参加登録できます！ LTthonやブースの事前公募も開始いたしました。 ご興味のある方は是非ポチリとしていただきたいです。

サイトの他にも、LTthonのTシャツとノベルティのステッカーもデザインさせていただきました。 p4dがきっかけでこのような機会に恵まれて、とても感謝しております。

フィヨルドでのインターンでMiddlemanを学習したのを踏まえて、Middleman + Amicus(HTML5 Boilerplate, Haml, Sass, Compass, Susy grid system)でgithub-pages上にサイトを構築しました。Amicusについてはこちらの記事で少し触れています。

SusyでResponsive gridのコーディングするのはとてもとても楽しいです。 普段の業務ではカンプからコーディング、というフローで作業してますが、今回はイラストとロゴだけ作って後はブラウザでLiveReloadしながらコーディングするフローをとりました。 grid systemを使うと、イチからmedia queryなどで調整しながらレスポンシブにする場合よりも余計な事考えないで済むので、格段に捗ります。 またこういう機会があれば、やりたいなー。 そんな感じで、よろしくお願いします！

リモートインターン ｜ Middleman 実践（4）- Githubページへデプロイする方法

静的サイトジェネレータの良いところって色々あるとは思うのですが、Github Pagesで無料で静的ページを公開できる点が良いです。 Middlemanの他にもjekyll,Octopressなど今は静的にブログを作成できるものがあるので、それぞれ試してみたい…。

試してみたMiddlemanをGithubページへデプロイする方法 ### 方法１．Middleman Deployを使う 日本語ガイド Middleman Deploy Gitでデプロイする方法をやってみました。

手順 １．gemをインストール

$ gem install middleman-deploy

２．bundle Gemfileに下記を記述する。

gem "middleman-deploy", "~> 0.0.11"

bundleインストール

$ bundle install

３．config.rbに下記を記述

activate :deploy do |deploy|
  deploy.method = :git
end

オプションを記述しなければデプロイした時に、リモート名はoriginでgh-pagesという名前のブランチがリモートリポジトリへデフォルトで作られる。 オプションを書く場合は下記の通り。

activate :deploy do |deploy|
  deploy.method = :git
  deploy.remote = "some-other-remote-name"
  deploy.branch = "some-other-branch-name"
end

４．ビルド

$ middleman build

５．デプロイ

$ middleman deploy

上記の方法でMiddleman 実践（3）で作ったやつもデプロイしてみた。→デザインは入ってないので真っさら…。