esa.io でゆるふわ情報共有 - Middleman Blog への Export サンプル付き #esa_io

# esa.io でゆるふわ情報共有 - Middleman Blog への Export サンプル付き #esaio
## <i class="fa fa-cubes" style="font-size:1em;"></i> 概要
<i class="fa fa-external-link-square" style="font-size:1em;"></i> [esa.io](https://esa.io/) でゆるふわ情報共有
![esa.png](https://qiita-image-store.s3.amazonaws.com/0/43480/3551e064-bf2e-0183-a205-21ae65be2126.png)![esa2.png](https://qiita-image-store.s3.amazonaws.com/0/43480/e016d512-67b2-fdd8-fd28-3250d92a3f07.png)

## <i class="fa fa-question-circle" style="font-size:1em;"></i> esa.io って何？
esa は「情報を育てる」という視点で作られた、 小さな開発チームのためのドキュメント共有サービスです。

2014/12/17 現在は、β版。無料期間中。
2015年前半に有料化予定とのこと。

## <i class="fa fa-exclamation-circle" style="font-size:1em;"></i> 注意
***esa*** だけだとググラビリティが低いので、 esa に関する情報を発信する側も検索する側も
esa.io にしたほうが良さそう。 golang みたいに。
ハッシュタグは「#esa_io」だろうか？

## <i class="fa fa-fire" style="font-size:1em;"></i> 類似サービス
### <i class="fa fa-external-link-square" style="font-size:1em;"></i> [QiitaTeam](https://teams.qiita.com/)
* esa.io について Qiita で詳しく書くのっていいのかな・・・ ((((；゜Д゜)))))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ
* 必ずしも競合ともいえないかも。 QiitaTeam と esa.io の両方を使うケースも考えられる
    * 例えば
        * 技術情報・手順は QiitaTeam
        * ポエム・スライドショーは esa.io
    * esa.io に関する情報を QiitaTeam に書くこともあるだろうし、その逆も

### <i class="fa fa-external-link-square" style="font-size:1em;"></i> [Docbase](https://docbase.io/)
* 試したことはないが、トップページの記述からするとターゲット層は esa.io に近そう
* ゆるふわな esa.io に比べて、 かっちりとしたビジネスライクな印象のサイトデザイン

## <i class="fa fa-pencil-square-o" style="font-size:1em;"></i> 特徴
### <i class="fa fa-caret-square-o-down" style="font-size:1em;"></i> 情報を書くことへの敷居を下げる工夫
* <i class="fa fa-external-link-square" style="font-size:1em;"></i> [カテゴライズが容易](https://docs.esa.io/posts/15#0-3-0)
    * 記事タイトルをスラッシュ区切りにするだけでカテゴライズ
    * かなり使い勝手が良く、他サービスとの大きな差別化になっている。投稿が増えてきたときに力を発揮するだろう
* <i class="fa fa-external-link-square" style="font-size:1em;"></i> [WIP](https://docs.esa.io/posts/15#0-4-1) 投稿
    * 生煮え上等。公開を迷うくらいならとりあえず WIP で記事化
    * 問題なくなったら Ship IT
* ゆるい雰囲気
    * 楽しさ
* <i class="fa fa-external-link-square" style="font-size:1em;"></i> [Star](https://docs.esa.io/posts/17)
* <i class="fa fa-external-link-square" style="font-size:1em;"></i> [emoji](https://docs.esa.io/posts/12#0-2-0)
    * 楽しさ
    * 分かりやすさ

### <i class="fa fa-paw" style="font-size:1em;"></i> ドックフーディングによる使い手感覚の機能
* <i class="fa fa-external-link-square" style="font-size:1em;"></i> [投稿テンプレート](https://docs.esa.io/posts/7)
    * 年月日、ユーザー名、チーム名などを変数として利用することも可能
* <i class="fa fa-external-link-square" style="font-size:1em;"></i> [ショートカットアクセス機能](https://docs.esa.io/posts/8)
    * 現状は少ないが、この機能をサポートする意思があるのがいい
* <i class="fa fa-external-link-square" style="font-size:1em;"></i> [記事をコピーして新規投稿](https://docs.esa.io/posts/15#0-2-0)
* <i class="fa fa-external-link-square" style="font-size:1em;"></i> [サジェスト機能](https://docs.esa.io/posts/12#0-2-0)
    * emoji
    * チーム内投稿へのリンクサジェスト
    * メンション

### <i class="fa fa-slideshare" style="font-size:1em;"></i> スライドショー
* 記事をスライドショー化
    * <i class="fa fa-github-square" style="font-size:1em;"></i> [reveal.js](https://github.com/hakimel/reveal.js/) 的なことを Markdown の記事を作成するだけで実現可能

### <i class="fa fa-cube" style="font-size:1em;"></i> よくある機能もちゃんと持っている
* <i class="fa fa-external-link-square" style="font-size:1em;"></i> [Web hooks](https://docs.esa.io/posts/10#0-1-0)
    * Slack
    * Hipchat
    * Idobata
* <i class="fa fa-external-link-square" style="font-size:1em;"></i> [Mail hooks](https://docs.esa.io/posts/10#0-2-0)
* GitHub Flavored Markdown をベースに拡張
    * TODO 記法
    * emoji 記法
* Realtime Preview
* タグ
    * 記事タイトルに `#tag_name` 形式で指定しやすい
* 記事の履歴管理
* インポート・エクスポート機能（インポートは開発中）
* API（開発中）

## <i class="fa fa-slideshare" style="font-size:1em;"></i> esa.io のデザイナさんのスライド
* [Webサービスの思想とかについて考えてた。](https://speakerdeck.com/ken_c_lo/websabisufalsesi-xiang-tokanituitekao-eteta-number-esa-io-number-tofalsekoto)
    * esa.io のデザイナさんのスライドショー

## <i class="fa fa-exchange" style="font-size:1em;"></i> エクスポートした記事を <i class="fa fa-external-link-square" style="font-size:1em;"></i> [Middleman blog](http://middlemanapp.com/jp/basics/blogging/) に公開してみる
* esa.io で記事を書きます

※タイトル

~~~
手順書/テンプレ利用テスト
~~~

※本文

~~~markdown
## 前提
* 前提1
* 前提2
* 前提3

## 手順
    class Hoge
      def hoge
        puts "hoge"
      end
    end

## 注意点
* なし
~~~

* Team Page の Request archive for exporting の Request Archive ボタンを押下
* メールが届くので、メールのリンクからファイルをダウンロード
* zip を解凍します
* 解凍したマークダウンの内容が Middleman 向けのフォーマットになっていることを確認します

```markdown
---
title: "テンプレ利用テスト"
date: 2014-12-17 10:42:06 +0900
tags: 
category: /手順書/
published: false
---

## 前提
* 前提1
* 前提2
* 前提3

## 手順
    class Hoge
      def hoge
        puts "hoge"
      end
    end

## 注意点
* なし
```

* Middleman blog 環境構築

~~~
# 作業用ディレクトリの作成
$ mkdir middleman
$ cd middleman

# Gemfile の生成
$ cat << EOS >> Gemfile
source "https://rubygems.org"
gem "middleman"
gem "middleman-blog"
EOS
$ bundle install

# middleman プロジェクト作成
$ middleman init esa --template=blog
$ cd esa
~~~

* 先ほど解凍した esa のファイルの1つを middleman で作成した esa/source にコピー
* ファイル名を 2014-12-17-procedures-template.md にします

~~~
# middleman の起動
$ bundle exec middleman
~~~

* http://localhost:4567/ にアクセス

![middleman_blog.png](https://qiita-image-store.s3.amazonaws.com/0/43480/c6e880c0-a8f9-0c76-5cdf-0adf6312af41.png)

※ Middleman は Itamae の検証用に疎通確認しかしたことがなくて、利用作法をあまり理解していない

## <i class="fa fa-meh-o" style="font-size:1em;"></i> 雑感
* 提供されている機能を見る限り今後の機能拡張も非常に期待が持てる（開発者のセンスを感じる）
* デザインも良い
    * ゆるふわ感を出すためのためのデザインのおかげで結果的にレイアウトにメリハリがついて情報を理解しやすいように感じる
        * 逆にのっぺりとした平坦なデザインは理解しにくい
    * マウスフォーカス時に動作や、アイコンの絵柄などわかりやすさへの配慮を感じる
* スライド機能がすごく良い
* 小さなチーム向け、ということで正式版の価格帯に注目が集まる

## <i class="fa fa-arrow-right" style="font-size:1em;"></i> 参照

* <i class="fa fa-slideshare" style="font-size:1em;"></i> [Webサービスの思想とかについて考えてた。](https://speakerdeck.com/ken_c_lo/websabisufalsesi-xiang-tokanituitekao-eteta-number-esa-io-number-tofalsekoto)
* <i class="fa fa-external-link-square" style="font-size:1em;"></i> [QiitaTeam](https://teams.qiita.com/)
* <i class="fa fa-external-link-square" style="font-size:1em;"></i> [Docbase](https://docbase.io/)