2017年1月23日月曜日

Markdownを書くにはStackEdit超便利!

,

StackEditが超便利です! 必要な情報はもう既にあなたの手に!

きっかけ

みなさんはどうやってMarkdown記法のドキュメントを書いていますか? 私は今までエディタとブラウザで作業していたんだけど、StackEditを見つけてちょっと使ってみたら、こちらのほうが捗る! ってことで、このツールの使い方を調べてみました。でも使っているとやっぱりテキストエディタのほうが楽だったりするかもしれませんが、まずは使ってみようと思ったのが始まりでした。

この記事は初めてStackEditとBloggerを使って作ったものです。とても楽にできました! あなたもStackEditを使ってBloggerに記事を書いてみませんか?

何ができるの?

Markdown記法っていうのは、メールなんかでわかりやすく文章を書く時の記号の使い方などを元に、余りたくさんのことを覚えなくても整理された文章を書くための書き方です。覚えることはそんなにないんですが、StackEditを使うことでもっともっと簡単になります。

StackEditのサイトはとってもシンプルで、トップページに機能概要が書いてありました。少し読んでみましょう。

  • 今までにないライティング体験を!
    • Rich Markdownエディタ
    • WYSIWYGコントロール
    • スクロール同期によるライブプレビュー
    • 内臓のスペルチェッカー
    • 完全なカスタマイズ
  • Webライターのためのデザイン
    • ブログに直接発行
    • 同時コラボ
    • コメントのレビュー

  • オフラインで書く!

  • 拡張Markdown書式

    • 目次機能
    • GitHub風Markdown
    • LaTeX数式表現
    • UML図

結構なことができますね。これからちょっとずつ使い方を覚えていきたいと思います。

どうやって使うの?

StackEditのサイトにアクセスするだけで使うことができます。
Chromeの場合、Chromeアプリがあり、Chromeにインストールして使うこともできます。
IE/Edge使いの人はStackEditのサイトにアクセスしてみてください。私はIE/Edgeを使わないのでわからないんですが、きっと簡単なはず。

StackEditの左上の#記号をクリックするとメニューがでてきます。そのなかのSettings→Utilをクリックすると、簡単なマニュアルであるHello! documentと、初めてStackEditを使ったときにでてくるポップアップによるWelcome Tourを見ることができます。

Hello! documentoは日本語に訳されてPDFで公開しているサイトがありました。それを読むのが一番早いと思います。

いくらかかるの?

気になる費用ですが、無料のようです。ライセンスはApache Licenseですね。メニューとかを触っているとちょくちょく、1年$5払ってスポンサーになってよ、というメッセージを見かけます。MonetizeJSというのが表示されているのですが商用ではないようです。私は使い続けるなら払ってもいいかもしれないって気持ちにさせてくれました。

誰が作っているの?

Benoit Schweblinさんが筆頭開発者のようですね。MonetizeJSへのリンクがツール内にもでてきます。そのサイトに飛んでみると、更にStripeっていうWebペイメントシステムの会社がでてきます。察するに、Stripeのシステムを下敷きにMonetizeJSっていうのを広めていこうとしてStackEditを公開しているんじゃないかと思います。今の段階、2017年1月23日時点で、MonetizeJSの導入事例はStackEditだけのようです。この推測、どうでしょう?

MonetizeJSは、詳しくみたわけではないですが、JavaScriptのコードで無料のプロダクトを作成したときに簡単にスポンサーを募ることができるライブラリと、その受け皿であるサービスを提供するものかなって思います。

なるほど、いままでなら寄付を募るにしても開発者は面倒な手続きやサービスの申込みが必要でしたが、そういったところを軽減してお金を集める仕組みを提供する、といったところでしょうか。新しいマネタイズのひとつですね。新しい、といっても2014年ごろから活動されているようですね。

なおMonetizeJSの所在地はアイルランドになってました。がんばれー、イギリスに負けるなー!

やってみた

この記事、StackEditで書きました! Bloggerも使ったこと、なかったんですが初めて記事をアップできました!

  1. Bloggerプロフィールを作成する。
    すでにGoogleアカウントは持っているので、Bloggerにアクセスし、プロフィールを作成ボタンを押します。
    すると、「Google+プロフィールを作成」と「Bloggerプロフィールを作成」のどちらかを選ぶ画面になるので、好きな方を選びます。私は「Bloggerプロフィールを作成」を選んでみました。


    すると「姓」「名」「性別」「生まれた月日」を入力する画面になるので、入力して「プロフィールを作成」ボタンを押します。


    Bloggerプロフィール作成2


    最後にプロフィールの確認画面になるので、良ければ「Bloggeへ移動」ボタンを押します。


    Bloggerプロフィール作成2


    するとブログ作成準備ができました!


    Bloggerプロフィール作成3

  2. ブログを作成する。
    プロフィールを作成したら、いよいよブログ作成です。「ブログを作成」ボタンを押すと、すこしBloggerのご案内が出てきた後、タイトルとサイトのFQDNを入力する画面がでてきます。


    ブログ作成画面1


    自分の情報を入力して「ブログを作成」ボタンをおすと、ほら! もうブログができました! 普通ならこの画面からブログの投稿ができるんですよね。


    ブログ管理画面


    いろんな設定がありますが、とりあえずあまり触らず、記事をアップしてみます。でも、テンプレートを選ぶだけですごく簡単にデザインを変えれるんですね。外の人から見える画面はこんな感じですね。


    Blogger画面

  3. Bloggerに記事をアップする。
    ここからStackEditの出番です。書いているこの記事をStackEditに表示させて左上の#→Publishing→Bloggerをクリックします。


    StackEditでBloggerに記事アップ


    するとアップロード先のアドレスと、形式にHTMLを選択する画面が表示されるので、入力して「OK」ボタンを押します。


    StackEditでBloggerに記事アップ2


    するとGoogleから「StackEditがGoogleにアクセスしてるけど、許可していい?」って聞いてくるので許可すると、はい、これで終わりです。記事がアップできました!
    最後にBloggerの管理画面→投稿に行くと、アップした記事が下書きになっているので、プレビューして公開すると、書いた記事が世界にGo!

きになったところ

書いた記事の保存場所

テキストエディタでMarkdownを書いているときは、ファイルの保存場所などは自分でできるのですが、StackEditを使うときはどのように管理されているんでしょうか。
ソースコードを置いているGitHubにReadme.mdがあって、そこには、ブラウザのローカルストレージに保管しているから、ほかのパソコンとは共有してないよ、またブラウザのローカルストレージをクリアしたらローカルの文書は消えるよ、と注意がありました。
クラウドのGoogle DriveやDropBoxとシンクするとか、ローカルディスクにエクスポートするとかして管理することでバックアップを持つことができそうです。よい管理方法があったら教えてください。

Bloggerに発行するときの画像ファイルの扱い

なんとStackEditに画像をドラッグアンドドロップで貼り付けるだけで、Googleフォトにアップロードされ、その画像が使われます。なおドラッグアンドドロップするときは、エディタの方で画像を貼りたいところにカーソルを持っていってから、プレビューの方にエクスプローラからドラッグアンドドロップします。エディタの方にドロップしてできないーって5分ほど悩みました。

では、Googleフォトにアップロードされた画像のアクセス権はどうなっているんでしょうか。アップロードした画像を使うんだから、当然公開されてることになるのかな? Googleフォトについてはまた今度調べてみよう。

見栄えが悪い

これでやったー! と思って、できたサイトにアクセスしたら実は…見栄えが悪いいんですよ! StackEditのプレビューではとってもきれいに見えていたのに、Bloggerをみたら、フォントはなんかギザギザだわ、見出しの間隔はなんか詰まってて見にくいわ、挙句の果てに元の画像サイズが大きすぎて画面の幅に収まっていないわと、ちょっと残念な結果になりました。

またちょっと調べてわかったら記事にしたいと思います。

参考情報 (日本語メイン)

既に色々情報があるだろうと思ってぐぐってみた結果です。主に日本語リソースを挙げておきます。皆さんに感謝!

ではでは。Hava nice blog life with StackEdit !!

投稿者 時刻:
ラベル: ,
1 件のコメント:
  1. jirow2018年1月4日 22:49:00 JST

    blogger user です！ stackeditが気になっていてとっても勉強になりました。有益な情報をありがとうございます！

    返信削除

気づいたこと、不具合、ご意見など、コメント待ってます!

登録: コメントの投稿 (Atom)