StackEdit

「FoldingText 2 概論」の公開と、StackEditによる目次生成

(はてなブログからの移行記事です。正常に表示されていない場合、ご連絡いただけると助かります。)


ver. 2.0.2 - ¥3,000( 仕事効率化 )
Hog Bay Software

長い戦いだった……

FoldingText2の公開以来取り組んでいた、解説記事をようやく公開できました。

ご覧のとおり、wordpress.comに新規ブログを立ち上げて、そちらで公開する運びとなりました。なぜそんな面倒なことをするハメに陥ったのかというと、死ぬほど長くなったからです。

長文にはリンク付きの目次が必要だ

これまたご覧のとおり、「FoldingText 2 概論」には全ての見出しを網羅した目次(Table of Contents)を付けてあります。自分で書いておいてなんですが、さすがにこの量のテキストをウェブで読むのに、見出しでもなければ筆者でもメゲます。執筆中だって、FoldingTextの見出しフォーカス機能を活用しなければ気が狂うところでした。(と軽く宣伝)

とはいえ、この量の目次を自力で書くのはそれはそれで気が狂う。大方を書き終えたところで、目次をどうやって調達するかという問題が持ち上がったわけです。

はてな記法で目次あるとおもったら、はてなグループ限定だし。(目次記法とは - はてなキーワード

色々検討したのですが、現実的に満足のいく目次を生成する方法は、StackEditに頼る他ありませんでした。

StackEditによる目次生成

StackEditは、超強力なウェブベースMarkdownエディタです。ブラウザさえあれば環境を問わずに利用できる上、そんじょそこらのローカルアプリを上回る機能を持っています。

ざっと挙げますと……

  • 編集系
    • オートバレット
    • タブキーインデント
      • しかも完全な――カーソル位置を問わず実行可能
    • スマートハイライト
    • ショートカットでのシンタックス追加
      • プレビュートグル
      • テーマカスタマイズ
      • ファイル管理
      • 独自のファイルマネージャ
    • Dropbox/Google DriveへのSave/Open
    • ローカルファイルのSave/Openも可能
  • Publishによる外部公開
    • Blogger
      • Pages
    • Dropbox
    • Gist
    • Github
    • Google Drive
    • SSH Server
    • Tumblr
    • Wordpress
  • 多様な文法対応
    • Markdown Extra
    • LaTeX mathematical
    • ダイアグラム
    • [TOC]

といった具合です。なお、一部はβ限定で、UIも整理されているしバグもかなり修正されているので、βの利用を強く推奨します。

上記の通り、StackEditには目次生成機能がありまして、文中に[TOC]と書いておくと、見出し項目を検出して目次を自動生成し、ページ内リンクも張ってくれます。一瞬です。もうスクリプトで云々とか考えらんない。

なお、編集中のスクリーンショットがこちらです。
StackEditによるTOC生成

Publish

で、まあ、HTML変換してここに貼ろうとか、Evernoteに投げてインポートとか考えないでもなかったのですが。(Evernoteと連携してノベルティをゲット! Evernoteで保存したノートをブログで活用できる「Evernote貼り付け機能」をリリースしました - はてなブログ開発ブログ

しかし、他の記事と毛色も分量も違うし、今後似たようなの書くたびにやるのはめんどいので、おとなしくStackEditからPublishすることにしたわけです。

最初はTumblrにしようと思ったんですが、なぜか何度やっても弾かれる。短文だと通るので、なんぞ上限でもあるのでしょう。というわけでボツ。

Githubって内容でもないし、BloggerよりはまあWordPressか。

WordPressだと「ブログ!!!」って感じで、ポツーンというかドスーンと単発長文置いてあると変な感じですが、まあ日本語URLも通るしもう考えたくないしそれでいいかとブン投げました。

おや、できた? ってことで、コチョコチョっと「続きを読む」とカテゴリだけ付けて公開。終わってみれば簡単でした。

(実際にはソースの修正にけっこう手間取ることになったのですが。それは別項にて)

コンテンツ管理システムとしてのStackEditの可能性

今回使ってみて、StackEditをハブにしたコンテンツ管理はけっこうイケてるのではないかと思いましたね。

別にMarkdown書くだけならWordPressで書いたっていいわけですが、StackEditのほうがエディタとしては上だし、そもそもWordPressの管理画面は煩雑すぎます。ほんとにバリバリ書くならMarsEditなり使ったほうがいいのでしょうが、なんといっても無料だしウェブベースだし、StackEditでのブログライティングも検討の余地はあるのではないでしょうか。

StackEditによるWordPress Publish時の注意点

(はてなブログからの移行記事です。正常に表示されていない場合、ご連絡いただけると助かります。)

上記の記事で書いた通り、目次生成を目的としてStackEditを利用した記事公開を行いました。一応成功はしたのですが、よく見たらWordPress側のソースがひどい有様になっていました。

覚書として、事故ったポイントをまとめることにします。

「more」タグが消される

WordPressでは、以下のような行を記述することで、いわゆる「続きを読む」として、残るコンテンツをトップページなどで非表示にすることができます。(More Tag — Support — WordPress.com

1
2
<!--more-->
<!--more But wait, there's more!-->

ところが、StackEditはPublishの際にこれを必ず削除します

StackEdit「コメントアウトだから削除しておきますね^^」

いやいや、それはWordPress側で解釈するべきでしょ。ソースは保全してくれないと困るでしょ。

じゃあ、HTMLエンコードしてみたらどうなるのか?

1
2
<!--more-->
<!--more But wait, there's more!-->

WordPress側ではこうなります。

1
2
<p><!–more–></p>
<p><!--more But wait, there's more!--></p>

ですよねーーーー!!!

というわけで、MoreタグだけはWordPress側で入れる必要があります。別に一回ならいいんですが、StackEditから上書きPublishすると、そのたびに入れ直すハメに陥るので、なかなかメゲます。

文書内にHeading1がないと目次がおかしくなる

わざわざ本文中にタイトルを入れている理由はこれです。

例えば、こんな見出しから[toc]で目次生成したとしましょう。

1
2
## Heading2
### Heading3

StackEditでのプレビューはこんな感じです。

H1がない場合のTOC

目次自体はちゃんとできるのですが、位置が右にずれています。

この場合、WordPress側で目次部分のソースを抽出すると、こうなっています。

1
2
3
4
5
6
7
8
<ul>
<li>
<ul>
<li><a href="#heading2">Heading2</a><ul>
<li><a href="#heading3-1">Heading3</a></li>
</ul>
</li>
</ul>

内容のないulタグが生成されていることがわかります。そのため、目次リスト全体がネストされた状態になってしまっています。コード的におぞましいですね。

つまり、StackEditが生成する目次は、H1〜HnのHeading(見出し)項目を含むことを前提としているのです。

手動でWordPress側のソースを修正するか、HTML全体の構造が奇妙になることを受け入れるか。どっちも避けたい二択なんだよなあ。

コードブロック内のMarkdownがレンダリングされる/コードブロック内の改行が削除される(再現せず)

さっき実験したら、なぜか再現しませんでした。昨晩あんなに苦労させられたのはなんだったんだ。

StackEditシステム未だ完成に至らず

という感じです。見出しはともかくとして、Moreタグの件は、作業がStackEdit側で完結しなくなるのでどうにかしてほしいものです。Feedback送っておこう。