ブログ執筆はクラウドエディタ「StackEdit」がおすすめ　Part.1

ブログを書き始めてから色々なエディタを試していたのですが、StackEditの使い勝手が非常に良く、継続して使っていくことにしましたので、イントール方法、使い方、便利な機能などを紹介します。

StackEditを使えばブログ記事や書類をmarkdown形式で作成して、クラウドストレージに保存し、さらにそれをWinodws、Mac、Chromebookなど様々なOSの端末で同期して編集することができます。

画像の貼り付けや、プレビューの確認、Markdown形式の編集をサポートする機能が充実していて、操作に慣れてくるとブログを書くスピードがかなり上がります。ブログだけではなく、画像を使用する資料作成でも力を発揮すると思います。

なぜStackEditを使うようになったか

仕事でコーディング（プログラミング）をする機会があるため、色々なエディタを使ってきました。ざっと挙げると下記のような感じです。

現在もVisual Studio Codeはメインのエディタとして使っていますが、ブログ編集に必要な機能を満たしていなかったので、サブのエディタを探すことになり、色々なものを試した結果、StackEditを使うことにしました。

私がブログ記事を編集をする際に必要とする機能は下記の6つです。

6つ目はやや特殊ですが、他のものについてはみなさんも必要とする機能ではないでしょうか？

StackEditはこれらの機能を全て持っています。かなりざっくりしたものですが、他のエディタとの比較を表にまとめましたのでエディタ選びの参考にしていただければと思います。

表についての補足ですが、あくまでそれぞれのアプリケーションの素の状態の機能で比較しています。

VimやVisual Studio Codeなどは設定のカスタマイズやプラグインの追加によって機能を拡張することができますので、そういった変更を加えれば○になる項目もありますのでご注意ください。

Vimを素の状態で使う人はあまりいないので、ちょっとフェアじゃない比較の仕方ですが、細かいカスタマイズをしなくても便利な機能が使えるというところに注目したいという主旨なのでご容赦いただければと…。

	StackEdit	Vim	VSCode	秀丸エディタ	EmEditor
Win＆Macに対応	○	○	○	×	×
複数端末でのデータ同期	○	×	×	×	×
Googleフォトとの連携	○	×	×	×	×
markdownの補完機能	○	○	○	△	△
クラウドストレージへの保存	○	×	×	×	×
chromebookでの使用	○	△	×	×	×

	Mery	TeraPad	Paper	Evernote
複数OSでの編集、同期	×	×	○	○
複数端末でのデータ同期	×	×	○	○
Googleフォトとの連携	×	×	×	×
markdownの補完機能	△	×	△	×
クラウドストレージへの保存	×	×	○	○
chromebookでの使用	×	×	○	○

非常に優秀なエディタであるVimやVisual Studio Codeに×が多くつくという結果になっているのは、ブログ記事の編集を基準とした機能比較だからです。

エディタとしての全体的な評価ではないのであしからず。私も文章の編集やコーディングなどで使っているメインのエディタはStackEditではなくVisual Studio Codeです。

それではStackEditの使い方を説明していきます。

使い方としては下記URLにブラウザでアクセスするだけ。
https://StackEdit.io/

まず下記のような画面が出てくるのでstart writingをクリック
enter image description here

チュートリアルはスキップしてOKです。読んでもいいです。
チュートリアルが終わるとサンプルテキストの画面が出てきます。

2画面に別れていて左が編集画面、右がプレビュー画面です。左側を編集すると変更内容が右側にリアルタイムに反映されます。プレビュー画面は見るだけで編集できません。

新しいファイルの作成するにはまず左上のフォルダアイコンをクリックして、書類の追加アイコンをクリック。書類の削除、名前の変更もここからおこないます。フォルダを作ることも可能です。

サンプルが英語で分かりにくいので日本語のサンプルを作成しました。右のプレビュー画面だけではなく、編集画面のほうにもmarkdownの効果が簡易的に反映されていることがわかると思います。

左の画面と右の画面はスクロールも同期されているので、どちらかをスクロールするとそれに合わせて、もう片方の画面がついてきます。こんな感じです。

画像の挿入はこのアイコンをクリック。

画像のURLを貼り付けてOKを押せば反映されます。
enter image description here

googleフォトに画像を保存していればそこから画像を選択して貼り付けることもできます。先ほどの画像の貼り付け画面で、下のgoogleフォトのボタンをクリックしてID、パスワードを入力。
enter image description here

googleフォトの画像への許可をアクセスするとこのような画面が立ち上がってgoogleフォトの画像を選択するだけで貼り付けられます。
enter image description here

結果はこんな感じです。
enter image description here

操作になれてくるとかなり便利です。

文章の装飾や画像の挿入はショートカットキーでも可能です。下記がショートカットの一覧です。