Help us understand the problem. What is going on with this article?

ぼくのかんがえたさいきょうのQiitaメモ

More than 5 years have passed since last update.

概要

  • ローカルでメモを取りつつカジュアルにQiitaに投稿できるようにしたい。
  • メモはSphinxでbuildできて手元で参照しやすくしたい。
  • Alfred + Dashでも検索できるようにしたい。
  • メモはVimで書きたい。
  • Markdown記法で書いてもいい。

という欲求を満たすための環境構築メモ

やりたいことイメージ図

やりたいことイメージ図

  1. Markdownで色々メモる
  2. Sphinxでbuildする
  3. Sphinxドキュメントをブラウザで見れる
  4. Kobitoとファイル連携しつつ、KobitoからQiitaに投稿
  5. SphinxドキュメントをAlfred+Dashから素早く検索

環境

  • OS X Marverics
  • Python2.7

    • virtualenv(virtualenvwrapper)
    • pip
    • Sphinx
  • homebrew

  • Pandoc

  • Apache

  • Kobito.app <= 1.9.2

    • Kobito 2.0系は「外部ファイル連携」が一次的に利用できない
  • Dash.app

  • Alfred.app

準備

なにわともあれSphinxプロジェクトを用意

$ mkvirtualenv qiitanote # virualenvwrapperを使ってる

(qiitanote)$ pip install Sphinx
(qiitanote)$ mkdir qiitanote
(qiitanote)$ cd qiitanote
(qiitanote)$ sphinx-quickstarpt 

# 対話で色々きかれるのでポチポチ答えると作成おわり

# make htmlしてみる
(qiitanote)$ make html

# _build/html/以下にHTMLドキュメントが生成される
# ApacheでVirtualhostを切って、http://qiitanote.dev/ で_build/html以下を見れるようにしている

# ドキュメントの確認(Chromeが開く)
(qiitanote)$ open -a Google\ Chrome.app  http://qiitanote.dev

初期ディレクトリ構成

qiitanote
├── Makefile
├── _build
│   ├── doctrees
│   └── html <- ここにHTMLが生成される
├── _static
├── _templates
├── conf.py <- Sphinxの設定ファイル
└── index.rst

Markdownで書く

  • Sphinxは基本reStructuredText記法で文章を書くが、Qiitaへの投稿を考えてMarkdownで書くようにする。
  • MarkdownのテキストもSphinxでビルドできるように、下記リンクの拡張を利用する。
  • Sphinx 文書に markdown フォーマットを利用する

Pandocのインスコ

(qiitanote)$ brew install pandoc

拡張の設定

# conf.py を書き換える

# 以下の内容を追記
PROJECT_DIR = os.path.dirname(__file__)
sys.path.insert(0, PROJECT_DIR)
sys.path.insert(0, os.path.join(PROJECT_DIR, "libs"))  # libs以下に拡張スクリプト設置
extensions += ["sphinxcontrib_markdown"]

markdown_title = 'Qiita Note'
source_suffix = '.md'

適当に.mdファイルを作って書いてみる

(qiitanote)$ touch fisrtnote.md

中身

# My First Qiita Memo!!!

## 1. Hoge

hogehogehogehoge
hogehogehogehoge

## 2. Fuga

fugafugafugafuga
fugafugafugafuga

ビルド

(qiitanote)$ make html

結果

Mifirst Qiita Memo

Kobitoと連携させる

Qiitaに投稿するためにKobitoとファイル連携をさせる

(qiitanote)$ open -a Kobito firstnote.md
  • Kobitoが開いてファイル連携される。そのまま「Qiitaに投稿」を押せば投稿できる
  • vimで編集した内容がリアルタイムでKobitoで見れるのは地味に嬉しい。逆にKobitoで編集した内容はmdファイルに反映される。
  • 毎回連携コマンド叩くのは面倒なのでmake htmlした時に自動で連携させる。
  • .mdファイルをさらって連携コマンドを叩きまくるスクリプトを作る
# -*- coding: utf-8 -*-

import os
import time
import subprocess

TARGET_DIR = os.path.join(os.path.dirname(__file__), '..')
cmd = "open --hide -g -a Kobito {}"

# start Koibito.app
subprocess.call(cmd.format(""), shell=True)
time.sleep(3)

# associate .md file to Koibito.app
for root, dirs, files in os.walk(TARGET_DIR):
    for f in files:
        if f.endswith(".md"):
            f = os.path.abspath(os.path.join(root, f))
            subprocess.call(cmd.format(f), shell=True)

# hyde Kobito.app
subprocess.call(
    "osascript -e 'tell application \"Finder\"'"
    " -e 'set visible of process \"Kobito\" to false'"
    " -e 'end tell'",
    shell=True
)
  • 「libs/associate_kobito.py」などとして保存
  • Kobitoを起動してない状態で、連携コマンドを叩くとKobitoに二重登録されるので最初に起動してちょっと待ってる
  • make htmlするたびにKobitoが前面に出るのがウザいので、終わったらWindowを隠してる

「make html」した時にこのスクリプトを実行するようにする

html:
    $(SPHINXBUILD) -b html $(ALLSPHINXOPTS) $(BUILDDIR)/html
    python libs/associate_kobito.py  # <= 追加
    @echo
    @echo "Build finished. The HTML pages are in $(BUILDDIR)/html."

これでビルドすると勝手にKobitoにメモが現れる。

ここまでの構成

qiitanote
├── Makefile
├── _build
│   ├── doctrees
│   └── html
├── _static
├── _templates
├── conf.py
├── firstnote.md
├── index.md # <-追加
├── index.rst
└── libs
    ├── associate_kobito.py # <- 追加
    └── sphinxcontrib_markdown.py # <- 追加

Alfred + Dash で検索する

折角書いたメモなので手元で簡単に検索したい。AlfredとDashを使って検索する。AlfredもDashも有料版買った。

sphinxcontrib-dashbuilder を使うとSphinxドキュメントを簡単にDash用のDocsetにできる

インストール

(qiitanote)$ pip install sphinxcontrib-dashbuilder

設定ファイル変更

# conf.py
extensions += ["sphinxcontrib_markdown", "sphinxcontrib.dashbuilder"]
dash_name = 'QiitaNote'
dash_icon_file = '_static/qiita.png' # <- faviconは適当にQiitaから持って来た

Makefileの書き換え

# You can set these variables from the command line.
SPHINXOPTS    =
SPHINXBUILD   = sphinx-build
PAPER         =
BUILDDIR      = _build
DOCSETSDIR    = ~/Library/Application\ Support/Dash/DocSets/QiitaNote # <- 追加

〜省略〜

# .PHONYにもdashを追加
.PHONY: dash help ... 

〜省略〜

# dashターゲットを追加
dash:
    $(SPHINXBUILD) -b dash $(ALLSPHINXOPTS) $(DOCSETSDIR)
    @echo
    @echo "Build finished. The Docset are in $(DOCSETSDIR)."

ビルド

(qiitanote)$ make dash

Dashで確認する。Dashの設定画面 > Docsets > Rescan ボタンを押す

ReScan

DashのDocsetsにQiitaNoteが現れる

Dashの画面

毎回「make dash」を打つのも面倒なので「make html」の時にもdashをビルドする。

html:
    $(SPHINXBUILD) -b html $(ALLSPHINXOPTS) $(BUILDDIR)/html
    $(SPHINXBUILD) -b dash $(ALLSPHINXOPTS) $(DOCSETSDIR) # <- 追加
    python libs/associate_kobito.py  
    @echo
    @echo "Build finished. The HTML pages are in $(BUILDDIR)/html."

Alfredで検索できない

  • このままだと例えば見出しのHogeとかAlfredから検索できない。
  • Dashは、DocSetsのDBファイル(sqlite)から検索用インデックスを検索してる。
  • dashbuilderはreSTのindexをさらって、DBファイル(sqlite)を書き出してる。
  • つまりreSTのindexが必要

Markdown -> reST変換時に見出しを強制的にindexにする。

## Hoge

## Fuga 

こういう見出しがあるとする。 reSTに変換した時に下記のようにする。

.. index:: Hoge

Hoge
----

.. index:: Fuga

Fuga
----

libs/sphinxcontrib_markdown.py に下記処理を追加する。

48  # insert index directive                                                                
49  newlines = []                                                                           
50  for line in source[0].split(u"\n"):                                                     
51      if self._is_heading_line(line):                                                     
52          prev = newlines[-1]                                                             
53          inedexline = u".. index:: {0}\n".format(prev)
54          newlines.insert(-1, inedexline)                                                 
55      newlines.append(line)
56  source[0] = "\n".join(newlines)

これで再度ビルドするとAlfredから見出しが検索できる

Alfred検索

ここまでの構成

qiitanote
├── Makefile
├── _build
│   └── doctrees
├── _static
│   └── qiita.png # <- 追加
├── _templates
├── conf.py
├── firstnote.md
├── index.md
├── index.rst
└── libs
    ├── associate_kobito.py
    └── sphinxcontrib_markdown.py

Sphinxドキュメントの見た目を変える

  • Qiitaぽい色見にしたい
  • dashbuilderでdashに入れるとSphinxの検索が無効になる?-> 左カラムいらね。

拙作のsphinxテーマを利用する。

(qiitanote)$ pip install sphinxjp.themes.basicstrap

設定を変える

# conf.py

extensions += ["sphinxcontrib_markdown", "sphinxcontrib.dashbuilder", 'sphinxjp.themes.basicstrap']
html_theme = 'basicstrap'
html_theme_options = {
    'noheader': True,

    'header_inverse': True,
    'relbar_inverse': True,

    'inner_theme': True,
    'inner_theme_name': 'bootswatch-sandstone',
}

ビルド

(qiitanote)$ make html

結果

Qiita風

成果物

多少書いてある事と違いますが、Githubに置きました。ご査収ください。

https://github.com/tell-k/qiitanote

TODO

  • oktavia導入して検索できるようにしたい

まとめ

  • Qiitaに書くのはこれからなんですけどね。
  • ほとんどQiitaと関係ないことばかりを書いたような気がする
  • あとはぼくのやる気待ち。

追記(2014/10/18)

  • ついさっきKobitoを2.0にアップグレードしたら「ファイル連携機能は一時的に無効にされています」という履歴が出て、早々に破綻した。。。かなしい
  • ファイル連携が解除されてしまった後に、再度連携させる方法が分からなかったので、記事を作り直した。
tell-k
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away