Ghostでブログを書くときのエディタの話 (Ghost editor, iA Writer, Ulysses)

Ghostでブログを書くときのエディタの話 (Ghost editor, iA Writer, Ulysses)
Photo by Art Lasovsky / Unsplash

Ghostでブログを始めるにあたり、記事を書いたりメモをしたりするのに使えるエディタを探した時の記録です。記事の管理や投稿にストレスの少ない環境を作って、ブログを継続しやすくできれば良いなと思っていくつかエディタを試してみました。

エディタの条件

そもそもGhostには記事を書く際のエディタ(以下Ghost editor)が標準で用意されています。

Intro to the editor
Ghost has a powerful visual editor with familiar formatting options. Designed to get out of the way and let you do your best work, the editor delivers power and flexibility, with the ability to quickly add dynamic content such as images, galleries, videos, embeds, and code! Rich editing at your

このエディタはすごく良くできていて、今のところ基本的な編集で特に困ったところはなく、全般的に満足しています。

ただこのエディタはオフラインだと使えません。いつでもメモしたり編集したりできる環境にしておきたかったためこの点には多少不便を感じました。

調べてみるとGhostとの連携機能を提供しているエディタもあることを知ったので、それらのエディタを試してみることにしました。

特に文章を書く習慣もなく、ブログも初心者で凝った要求もなかったので、エディタの条件としては上で書いた内容そのままです。

  1. オフラインで編集できること
  2. Ghostとの連携が簡単

1はブログの継続には必須の条件だと思っている点で、思いついたときにいつでもメモを書いたり編集したりできるようにしたかったためです。それだけならAppleデバイスに元々入っているNotesで十分なのですが、そこからまたGhostにコピペしたりするのが面倒ですし、記事を更新した場合の管理が大変そうなので、2の条件を付け加えました。

※ローカルにGhostをインストールして、そこでオフラインで編集したものをサーバーに上げるとかのやり方も出来そうだとは思うのですが、その辺り詳しくないのでわかりませんでした。Ghostをずっと使っていこうと思えたらまた考えたいと思います。

試してみたエディタ

Ghostの公式サイトに色々なアプリとの連携方法が紹介されているのですが、そこでWritingの項目をみると、いくつかエディタが載っています。

Ghost integrations – official apps, plugins & tools
Ghost plugins, tools & apps to integrate with your Ghost site for automation, analytics, marketing, support and much more! 👉
Writing項目で紹介されているアプリ
Writing項目で紹介されているアプリ

この中で最初の2つに表示されているiA WriterとUlyssesを今回試してみることにしました。

iA Writer

書くことに集中できることが売りのアプリのようです。

iA Writer: The Benchmark of Markdown Writing Apps
Plain text. Total focus. The Industry standard Markdown text editor. Available for Mac, iPhone, iPad, Android, and Windows. Download it now, try it for free

Ghostとの連携方法は以下のリンクに記載があります。

Official Ghost + iA Writer Integration
undefined

iA Writerの気に入った点

  • 買い切り
  • GhostにPublishする際の出力形式をGhost, Markdown, HTMLから選べる(ただGhostの形式で綺麗に出力できればそれでいいのであまり意味はないかも)
  • Previewを表示しながら編集可能
  • デザインがシンプル

iA Writerのイマイチな点

  • Ghostとの連携が微妙。試した限りでは特に以下の点が不満
    • Ghost形式で出力した際、日本語で書いていると記事内リンクがうまく機能しない(h2タグとかのidがおかしい)
    • PostのURLとかタグはGhost側で入力しないといけない。
  • 行数表示ができない
  • 単体でも高い上にプラットフォームごとに購入必要。MacとiOSに50ドルずつ、Windowsに30ドルなので、全部買うと130ドルにもなる。
iA Writerの価格
iA Writerの価格

Ghost用のエディタとしてのiA Writerの評価

余計な装飾がないので調べ物もすべて終わってあとは自分の中から出てくるものをただ書くだけという場合には集中できるので良さそうだけど、僕の場合は色々調べたり、現在の記事の状態(文字数とか構成)などを確認しながら書きたかったのでそこまで重要ではなかった。(できるのかもしれないけど、試用期間中にそこまで辿り着かなかった。)

Ghostとの連携に関してはHTMLでPublishすれば記事内リンクは大丈夫だけど、それだとGhostと連携する意味はあまりない。タグなどの設定もGhost Editorで行うので、Ghost連携機能のない一般的なエディタでHTML出力してコピペするのと対して労力が変わらないし、HTMLでの出力はGhost editorで編集しにくい。

という感じで、試した限りではあまり魅力を感じませんでした。恐らく僕が機能を使いこなせていないだけという面も多くあって、使い込めばまた違った感想になる気もするのですが、この状態で50ドル(Mac版だけにした場合)というのもなかなか厳しいかなと思い、今回は見送ることにしました。

Ulysses

あまりものを書かないので知らなかったのですが、MacとiOS用のライティングアプリとしてはとても有名なようです。

Ulysses -
A pleasant, focused writing experience combined with effective document management, fast syncing and flexible export make Ulysses the first choice for writers of all kinds.

Ghostとの連携方法は以下のリンクに記載があります。

Official Ghost + Ulysses Integration
Use Ulysses to write with focus on Mac, iPad and iPhone and export your content directly to your Ghost publication with a direct integration.

Ulyssesの気に入った点

  • iA WriterよりはGhostとの連携がきちんとできている。PostのURLとかタグの設定もGhostへのPublish時に設定できる
  • UIはApple Notesの上位版のような感じで使いやすい。デザインも好み
  • 専用のアプリでNotesからファイルを一括でインポートできる
  • ダッシュボードが便利。文字数・段落数・行数などのカウント、読むのにかかる時間、記事のアウトライン、貼ってあるリンクや画像などを見ながらライティングできる
  • MacもiOSも一括で価格に含まれている

Ulyssesのイマイチな点

  • サブスクなので使い続ける限り費用が発生する
  • プレビューみながら記事を書きたい場合、できるけどちょっとめんどくさい。
  • Ghost editorでの編集が必要
    • リンクはGhostのエディタで貼らないとサムネイルが出ない
    • 画像サイズはUlysses側でいじっても反映されてなさそう。
    • ネストされたリストはGhostにパブリッシュするときにうまく反映されない。Publish後にGhost側で反映させる必要がある(iA Writerでの挙動は未確認。試したかったのですが、試用期間が終わっていてできませんでした。)
    • iA Writerと同じで日本語の見出しに対して記事内リンク(#id)はうまくいかない。

Ghost用のエディタとしてのUlyssesの評価

こちらもiA Writerと同様に、結局最後にはGhost editorでの編集が必要になりそうです。(もしかしたら上手いやり方があるのかもしれませんが、試用期間ではわかりませんでした)
ただ、Ghost用のエディタとして考えた時に、個人的にiA Writerよりは使いやすそうだなと思ったので試用期間後ももう少し試してみようと思います。(サブスクは1ヶ月だけ試してみたいといった場合には便利ですね)

とりあえず今のワークフローは、

  1. Ulyssesでメモを書いたり管理したりする
  2. 記事を書く。記事を書く際にUlyssesでやることは、
    1. 記事の構成を考える
    2. 記事内容を書く
    3. 画像を貼り付けてCaptionを設定
    4. 記事タイトル、Post URLとTagを設定
    5. GhostにDraftとしてPublishする
  3. Ghost editorで以下の修正をする
    1. テキストで表示されているリンクのURLはカット&ペーストしてサムネイル表示にする
    2. ネストしたリストがある場合は、うまく表示されるように編集する
    3. 日本語の見出しに対するリンクがある場合には、PreviewでInspectしてID探して置き換えることでひとまず対処。ただ結構面倒なので見出しに対する記事内リンクはなるべく使わず、目次を用意してそこからは各見出しに飛べるようにしておく。(英語の場合は気にしなくて良い)
    4. Unsplash(画像素材)を使う場合はGhost editorから検索すると簡単なのでこちらで設定

といった感じで進めようかと思っています。

※3の記事内リンクの対処法は以下の情報を参考にした。

Ghost CMS Internal Linking: The Ultimate Guide to Anchor Links
Learn how to create in-page anchor links, improve navigation, and enhance the user experience of your Ghost blog

終わりに

というわけで、Ulysses + Ghost editorという組み合わせでひとまず運用してみることにしました。ブログがどういうものかまだよくわかっていないので、使っていく中でもっとやりやすい方法がないかどんどん試していこうかと思っています。

Read more

Ghostでコードブロックや画像を折りたたむ方法

Ghostでコードブロックや画像を折りたたむ方法

GhostのエディタではCardsという機能を使って記事本文中に様々な要素を埋め込むことができます。 Editor cardsJump to a card * Images * Markdown * HTML * Gallery * Divider * Bookmark * Email content * Email call to action * Public preview * Button * Callout * GIF * Toggle * Audio * Video * File * Product * Header * Embeds * Signup Card The Ghost editor includes rich media objects called Cards, which can be inserted into your content to add

ghost updateをすると編集したテーマファイルが元に戻ってしまう問題の解決策

ghost updateをすると編集したテーマファイルが元に戻ってしまう問題の解決策

以前Sourceテーマのファイルを編集して、タグ一覧のページを作りました。 Ghostブログにタグ一覧ページを作る (Sourceテーマの場合)記事を分類するのにタグをつけているのですが、いくらタグをつけたところで絞り込みに使えないのであれば何の意味もないですよね。 僕はSourceというGhostのデフォルトのテーマを使っているのですが、このテーマだと、それぞれのタグをそのままナビゲーションバーに設置することはできるんですが、ドロップダウンでタグを選んだり、タグの一覧を表示したりはすぐにはできないようです。 そこで今回は、Sourceテーマを使ってタグ一覧のページを作ってみましたという記事です。 Sourceテーマを使ってタグ絞り込みをしたいときにできること 上でも述べましたが、このテーマだと、ドロップダウンとか一覧ページはそのままだと出せません。 できるのは、それぞれのタグをナビゲーションバーに置くくらいです。 これは例えば、「ブログ」というタグをつけた記事があって、そのタグを持っている記事一覧を出せるようにしようと思ったら、ナビゲーションバーに「ブログ」という項目をわざわざ作ら

GhostにCode injectionでThree.jsの3Dモデルを埋め込んでみる

GhostにCode injectionでThree.jsの3Dモデルを埋め込んでみる

Three.jsを使って作られた3Dモデルをブログ記事の中にCode injectionを使って埋め込めるのかなとふと思ったので試してみました。 本文中でHTMLカードに<canvas>タグ、Code injectionのヘッダに<style>タグでCSSを、<script>タグでJavaScriptを貼り付けると、ちゃんと動かすことができました。 埋め込んだのはThree.jsのマニュアルにあった以下の例です。 three.js manual コードの中身は全く理解できていませんが、3Dって面白いですね。 Three.jsでは3Dモデルをインポートして使用することもできるようですが、以下のようなところから素材を使わせてもらうこともできるみたいですね。 OpenGameArt.orgというサイトで、ゲーム制作をしている人には有名なのかもしれませんが、僕は初めて知りました。 OpenGameArt.orgOpenGameArt.org 素材によってライセンス形態が異なるようですが、先日の記事で描いたCC0みたいなライセンスにしてある3D素材もあって、Three.j

Joseph Mallord William Turner "Mortlake Terrace", 1827 | Courtesy National Gallery of Art, Washington

部屋に飾る絵画とブログの画像

僕は特別アートに詳しいわけでもないですが、たまに絵を見たくなることもあります。 そういうとき、思い切って美術館に行くこともあるにはあるんですが、基本的に出不精なのでネットで調べて満足してしまうことが大半です。 ただやっぱり画面の中で見るのはその一瞬だけですし、なんだか味気ないってのも正直あります。 この記事は、そんなときはパブリックドメインになっている絵画データを印刷するとなんかいいよってことを伝えたくて書きました。 こういう自由に利用可能な素材はブログの画像なんかにも使えるのもいいですよね。この記事のトップにもパブリックドメインの絵画をお借りして載せてみました。 パブリックドメインってなんぞや 高画質な絵画データでもパブリックドメインで無償でダウンロード可能になってるものが結構あったりします。 パブリックドメインとは、誰でも自由に利用可能(商用利用含む)な素材です。 パブリックドメインになっている素材は大きく分けて、 1. 著作権が切れたもの 2. 著作者がパブリックドメインにしたもの(CC0と表記されている) の2種類があるようです。 💡僕は