StackEdit の機能を最大限に使い blogger へ投稿

ブログを書く際に StackEdit を使用してるが、今ひとつ使いこなせていない気がしたので、再度機能の見直しをしてみると、有用な部分があったので紹介する。

今回見つけた機能は以下のとおり、
あと、説明上［］を全角にしているが、実際は半角で入力。

• 目次をつくる
• 注釈をつかう
• コードをのせる
• シーケンス図などものせる
• よく分からんこと
• まとめ

目次をつくる

次に、見出しを作る方法行の先頭に [toc] とつけると h1 等のタグを自動的に拾いリンクにしてくれる。
ただし、ページ全体の h1 タグをひらうので、途中にこの指定をしても、そこから以降にはならないので注意。

［toc］

↑こう書くとページの最初の様な目次が作成される。

注釈をつかう

ちょっとした自適感想などは、これまで () を使って表していたが、StackEdit の注釈機能を使うことにより、簡単に作成できる事がわかった。
書き方は、「［＾xxx］」で注釈のリンクをつけ、「［＾xxx］:」で説明を記述をすれば良い。

こんな感じにすれば良い［^footer説明］
［^footer説明］:こんな感じにする。

こんな感じにすれば良い1

コードをのせる

コードを載せたの時のシンタックスハイライトについては、これまでも実現していたが、簡易な方法として highlight.js を使用する方法があったので、これまでの物と合わせて使用するようにした2。
使用にあたっては、blogger 自体に設定が必要とはなるが、それほど難しくはないので試してみる価値はあるかと思う。
凝った表示にしたいのであれば、ここから手をいれるか、別の方法を検討しないといけない。

設定は、blogger のメニューからテンプレート > ブログで使用中の HTML の編集をクリックし、header 部分に以下のコードを追加する。

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/monokai-sublime.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js'/>
<script>
    hljs.initHighlightingOnLoad();
</script>

これを設定したら、コードブロック(“`)を使用してプログラムコードを入れると、いい感じにコードが見やすく色づけされる。

```ruby
puts 'The best way to log and share programmers knowledge.'
hoge = Hoge.new
```

↑こうかくと
↓このように表示される

puts 'The best way to log and share programmers knowledge.'
hoge = Hoge.new

シーケンス図などものせる

なんと、StackEdit は、URL やシーケンス図を DSL を使って表現できる Sequence diagrams や about Flow charts 構文もサポートしている。
そして、そのまま blogger へ送る事もできる。
流石に、この手の図は StackEdit 上では表示可能だが、blogger へ転送するとテキストに置き換わるだろうと思っていが、きちんと表示されている。
このブログでは CSS の関係で見づらいが、これはすごいと思う。

使い方は、これまたコードブロックに sequence 指定をして、然るべき書式を使うだけ。

```sequence
WEBサーバ->DBサーバ: データ挿入
Note right of DBサーバ: DataBaseには\nユーザデータが\n格納される
DBサーバ-->WEBサーバ: データ参照
WEBサーバ->>DBサーバ: データ更新
```

↑こうかくと
↓このように表示される

おまけ

これは、以前から使っていたけど、StackEdit を使ってそのまま、Upload したら公開されてしまうのが困る場合、やタグを入れたい場合は、ページの先頭に

---
tags: ["App"]
published: false
---

と記述しておくと、tag の指定と公開設定ができるので、おおまかな部分を StackEdit で書いてアップした後 blogger 側で調整することができる。

よく分からんこと

ここまででも十分なんだけど、実際のブログと見た目が違う点が少し残念。
StackEdit 内で CSS を設定したいがどこで設定したら良いかわからない。

まとめ

StackEdit の見直しをして、欲しかった目次つくる機能などを発見できたのは、すごく良かった。
通常の Markdown は対応しているし、まさかシーケンス図とうの図までそのまま送れるとは思わなかった。
これは blog を書く人は StackEdit を使わないと損するかもしれない。

Written with StackEdit.

---

1. こんな感じにする。 ↩
2. そのままでは、行番号を表示しないから併用するようにした。 ↩

StackEdit を使って blogger へ投稿の新しい発見

いいわけ

StackEdit を使用して blogger への投稿について以前は Markdown が使えるから良いよ！！って書いておきながら、しかし、「画像が結局面倒くさいんだよ」とか、「コードの部分を結局 blogger の編集で書かないとダメなんだよ」とか言ってました。
今回、改めてこの部分調査してみると。。。

どっちもできるじゃない!!

いやーお恥ずかしい。無知も良いところ。
と言うことで、調べた結果をお伝えします。

画像の挿入について

これまでは、画像は一旦 blogger にあげて、blogger の編集画面から画像挿入を行わないと画像の表示なんて出来ない物と思っていました。
しかし、なんと！非常に簡単な方法で画像を挿入できる事が判明しました。
方法は。。。プレビュー画面へのドラッグアンドドロップでOK。
この方法がわかった時には衝撃が走りました。

ドラッグアンドドロップしたファイルは Google フォトへアップロードされ、それを参照するといった内容になるようです(先日 Google フォトは容量無制限になったので、いくらでも Up 出来ますね)。

自分の画面サイズだと 640px の指定でいい感じ？のようです。

ただ、注意点としては日本語などが入っているとダメみたいです(offline モードとか言われる)。

画像の説明は、Google+ となっていますが、Google フォトへアップロードの間違いです。

コードの挿入について

これもまた、画像と同じように blogger の編集画面で HTML 編集モードにして書かないとダメと思っていました。
が、これも間違った認識のようで、StackEdit の編集画面で直接コード用の HTML 記述をすればできるようです。

ついでに、タグの指定や、公開の指定も可能なことが判明。
書き方は以下のとおり

ここぞとばかりに画像を使用しています。
地味に嬉しかったのは公開設定もできたというところ。

---
tags: ["環境設定", "Markdown"]
published: false
---

published を true にすると公開され、false なら下書きになります。
タグの編集は、文字列入力なので間違う可能性があるので、少し不安。

コードの記述は、「SyntaxHighlighter」を使用しています。
試しにこの下に、記述すると

<pre class="brush:shell" title="">
- (BOOL)isStackEditor
{
    return YES;
}
</pre>

が

- (BOOL)isStackEditor
{
    return YES;
}

と、うまく行っている。

総括

StackEdit は素晴らしい。
出来ない子と思っていた自分が出来ない子だったというブーメラン展開。
見事に頭に刺さり自分の無知加減に悶絶しているところです。

Markdown や、簡単に blogger への編集を行いたい方は、是非 StackEdit を使ってみてください。
余裕がある方は、スポンサーになってあげてください(他力本願)。

Written with StackEdit.

Atom エディタの再インストール

ここ最近あえて使用してる Atom エディタ。

今のところ、本当に物書きのエディタとしてしか使用していないのだが、気になる点が。
起動した後に、必ず警告が表示される様になった。
プラグインとの絡みなのは分かっていたが、どうも今ひとつ意味が分からない。
プラグインのアップデートがあったなら全て最新にして、その他の設定ファイルについてもデフォルト状態に戻しても、警告が表示される。
また、機嫌よく使っていた autocomplete-plus に至っては、.md 及び、.markdown ファイルで変換候補が表示されないと言った始末。
原因を突き止めようにも知識不足あってなかなか分からない。
そこで、再インストールを試みることにした。

これまでは Windows ばかり使用してきていたので、Mac のアプリの再インストールについてはどうすれば良いか分からず。
基本的に、ゴミ箱に入れればアンインストールは完了するとか見たけど、本当か？と半信半疑。
一応調べてみたら、以下の手順が書かれてあった。

1. アプリケーションフォルダの Atom を削除
2. rm -rf ~/.atom
3. rm /usr/local/bin/atom
4. rm /usr/local/bin/apm
5. rm ~/Library/Preferences/com.github.atom.plist
6. rm -rf ~/Library/Application Support/com.github.atom.ShipIt
7. rm -rf ~/Library/Application Support/Atom

これで、関連ファイル全て削除完了らしい。
実際に、手順を行い削除し、再度最新版を入手してインストールし直してみた。

インストール後、起動してみると、オープニング的なウインドウが立ちがる様になっていた。
バージョンアップを繰り返していた時には見たこと無いものだったので、少しびっくりした。

当然この時点で警告など出るわけもなかったので、早速元のプラグインを次々と入れていった。
そして、再起動を行った見たら、この状態でも警告が出なくなった。

これで、完璧！と思っていたが、やはりマークダウン系のファイルでは、autocomplete-plus が機能しない。
まっさらな状態にしても、動かないのか・・・と半ばあきらめを覚悟しながら、悪あがきで調べてみたら、以下の情報が

How to use fileBlacklist?
https://github.com/atom-community/autocomplete-plus/issues/153

内容としては、自分と同じく、マークダウン系の拡張子のファイルで autocomplete-plus が効かないので、効く方法は無いですか？という内容。
で、答えとしては、

autocomplete-plus の設定の Blacklist の項目に 「.*」を入れろ

と言うことらしい。
え？っと思ったが、とりあえず設定してみた所、見事マークダウン系のファイルで autocomplete-plus が効くようになった。

Blacklist って普通ここに設定したファイルは効果無効って意味じゃないのか？と思ったが、ひとまず動くことが確認出来たので、良しとしよう。。。

ひとまず、これでまたしばらく使ってみようと思います。

Written with StackEdit.

Trunk Notes 画像の表示が出来ない

Trunk Notes に画像を貼り付けていたが、今見ると表示されていない。

思い当たる点としては、Markdown のフォルダに画像ファイルが有ったけど、開こうとしてもファイル破損となっていたので、不要ファイルと思い消したのが原因なようだ。

そこで、Markdown のフォルダに画像ファイルを入れて、Dropbox 同期を取ろうとしたが、エラーになってしまう。
少し前までは、Markdown と同じフォルダ階層に画像ファイルを置いて問題なかった気がしたが現バージョンでは上手くいかないようだ。

気を取り直して画像の取り扱いについて、アプリ内のマニュアルを見ると、画像のアップロードを行って利用するようになっていた。
マニュアルの内容からすると、

1. 画面左上の NEW ボタンを押してメニューを出し、「フォトライブラリからの追加」か「写真を撮影して追加」から画像を選択する。
2. 表示たいページで image 関数を使って表示を行う。
   {{image File:xxxx.png}} のように指定。

上記の手順を踏むと無事画像が表示されるようになった。
ただ、画像サイズの指定は、関数では出来ないので、サイズを指定したい場合は、必然的に HTML の img タグを指定することとなる。


動きを見てみると、１．の画像追加で、Dropbox に同期を取ると、Trunk Notes の同期フォルダに「files」というフォルダが作成され、その中に２．で指定したファイルが格納されるようになっている。

アプリでのデータ管理方法としては、Markdown の文章と、マルチメディアを格納する場所を分けたということで、考え方的には良いと思う。
文章と画像が入り乱れると何か汚いからね。


注意点としては、手順が面倒だと思って、「files」のフォルダに直接画像データを追加し、image 関数や img タグで指定をしても画像は表示されないという事。
どうやら、「files」の内容をどこかで管理しているようだ。
う～んこの点、もうすこし融通が利けば楽に編集できるようになるのだが。

Chrome アプリ StackEdit を使い Markdown で作成そして Blogger へ投稿

タイトルが長いな。
Markdown 使ってますか？
最初は抵抗感があったけど、慣れると対応するサイトやアプリが無いと困るぐらいになってしまいました。
とはいえ、実際の所無くても Markdown で書いてるだけで出力しなくても結果が分かるぐらいになったんですけどね。
このブログを書き始めるときも Markdown 記述で投稿できる形にしたかったんですけど、 設定が上手く出来ず放置していました。
また、普段は TrunkNotes という Markdown が使えるパーソナル wiki に情報を貯め込んで居るんで、
いつかは Markdown でブログを編集したいと思っていました。
そんな事もあり、しつこく長いスパンで情報を調べていると、以下の記事がありました。
markdown+StackEdit+Bloggerで快適HP作成
http://qiita.com/yuu116atlab/items/a9f4ed8407033b6b898f
ページの方を拝見させていただくと、Chrome と Chrome アプリの StackEdit を使って Markdown での記事を書いて、
共有機能の出力先に Blogger が設定できるので、これで投稿が可能という事の様です。

と、いうことで早速導入してみました。
一応手順を記載しておきます。

準備 ：Google Chrome をインストール

StackEdit が Google Chrome のアプリのためインストールが必要です。

1. StackEdit のインストール

以下のリンクからアプリをインストールします。
StackEdit(Chrome ウェブストア)
https://chrome.google.com/webstore/detail/stackedit/iiooodelglhkcpgbajoejffhijaclcdg

2. 記事を書く

右上部分にタイトルを記入するところがあるので、好きなタイトルを記入します。

3. Blogger の設定をする

左上のメニューから PUBLISH → Publish on… → Blogger と辿ります。

投稿先のアドレスとフォーマットが出るので、共に設定します。
Blog URL は、「http://ユーザ名.blogspot.com」(Blogger の設定画面で指定した物)
Fromat は、 「HTML」 を選択して OK を押します。

OK を押したら、投稿ができます。 (認証とかあったと思うけど、キャプチャ取り忘れた)
以上が使い方となります。

最後に

現在上記の環境でこの記事を書いています。
やはり、Markdown で記事を書けることは嬉しいですね。
動作については、現在の PC の性能にもよるとは思いますが、
プレビューを出している分、動きがもっさりになっています。
あと、画像については、やはり気軽に貼り付けるのは出来ないので、
一旦 Blogger にアップロードしてからの指定となるので、
手が止まってしまいます。
この部分は、どんなエディタでも同じなので慣れるしかないですね。
非常に良いアプリとなっていますので、Markdown 愛好家の方で
Blogger を使っている方は、導入してみては如何でしょうか？

---

補足！？
以下の、アドレスを使えば、Firefox でも使えた。。。
https://stackedit.io/

Written with StackEdit.

---

[iPhone アプリ紹介]
簡単操作で素早く通話
「Smart Speed Dialer」
AppStore で、販売開始！
ただ今、PromoBook さんでプロモーションコード配布中！！

Mac の Markdown エディタ

iPhone のパーソナル Wiki の TrunkNotes が便利と思っている。

現在の編集方法は、ローカルで、エディタを使って Markdown を書き、iPhone で閲覧すると言う方法を取っている。
これは、TrunkNotes のデータをクラウド上に置く事によって実現している。

編集は、iPhone では厳しく、ローカルだと快適だからこの方法をとっているが、これで完璧か？と言うとちょっと違う。
現状の欠点としては、書いた後の見た目を iPhone 側で見ないと行けないため、記法が有ってるかの確認に手間がかかっている。

この部分については、以前から合った物の「しょうがない」と決め込んでいた。
しかし、今回ツールアプリの調査をしているときに、Markdown Editor を見つけてしまった。
これは、Mac 上でしかもリアルタイムプレビューが可能という物だ。

Windows には、「ひとりWiki」やその他ローカル上で Wiki を作成できる物を知っていたが、Mac でもあることに驚いた。

今回見つけて、使いやすそうだと思った物は、

Kobito
Mou

の 2 つ。
どちらもフリーとなっている(ただし、Mac 専用)。

Kobito については、Qiita との連携が取れるようになっているため(Qiita が作ってるから)、ユーザ登録を行わないと使用が出来ないが、登録は無料のため気兼ねなく使える(データ登録が面倒と思わなければ)。
また、国産だ。

Mou についても、外部との連携が取れるようになっているが、こちらはユーザ登録なしで、使用ができる。

どちらも専用のエディタというか編集領域があり、編集するとリアルタイムで結果が見える。

ただエディタは、これまで Vim を使っていたので、エディタはそのままで、結果のみ確認する使い方にした。
この使い方だと、Mou の読み込みが上手くいかなかった。

何はともあれ TrunkNotes に反映する前に確認出来るのは嬉しい。

また Markdown が好きになってしまった。

Markdown での改行

Markdown 使ってますか？
懲りずに Markdown についてです。

ここ最近使うツールが、Markdown 対応になっているので、記法がまとまり非常に嬉しかったりします。

 今回は、改行について。

現在のメインデータ保存先の TrunkNotes では、改行する場合は特に気にすることなく改行をすれば、反映されていたのですが、Bitbucket の Wiki の Markdown では、改行されずに表示され ??? 状態になりました。
そこで、HTML のタグを解釈するだろうと思い、<ｂｒ /> を入れてみたけど変わらず。
やはりちゃんと調べないとダメと言う事で、調べてみました。

つまり、

When you do want to insert a <br /> break tag using Markdown, you end a line with two or more spaces, then type return.

行の終わりに 2 つ以上の空白を入れろ

と言う事です。
ここら辺のルールの決め方がツールによりまちまちなのは、統一してくれたら良いのになと思います(改行は改行が良いんですけど。。。)。