UlyssesとTextwellを使ってジャンプできる目次を一瞬でつくる【コーティング不要】
目次[閉じる]※この記事はMacでブログを書く方にも役に立つ内容になっております。（Ulysses、Textwellは共にMacも対応）
ブログにおける目次の重要性
今回の記事はタイトルにもあるように目次をコーティング作業をすることなく瞬時に作る方法をお伝えします。
その前に、ブログを書く上でなぜ目次を作るのが重要なのかについて少しだけ話します。目次には主に次のような効果があります。
- 読者に記事の概要・構成を伝える。
- 読みたいところまでジャンプする。
タイトルは字数が少ないので、読者が本当に必要な情報が書いてあるのかはわからないときがあります。まぁ、ちゃんと内容がわかるようにタイトルをつけるべきなんですが、、、
しかし、目次があればその記事でどんな内容が書かれているかを俯瞰的に把握することができます。記事の入り口に案内板を立ててあげるようなイメージです。なので、目次はできるだけ記事の構成・内容が端的にわかりやすく伝わるように意識しましょう。
記事の字数が多ければ多いほど、目次の効果は大きくなります。
例えば1万文字ある記事なのにどこに何が書いてあるか全くわからなかったらおそらく途中で離脱しちゃいますよね。
これがひとつめの効果です。
もうひとつは「読みたいところまでジャンプする」ことですが、これも記事の文字数が多いほど効果的です。
例えば、この記事は読む人によって目次のどこから読むかが異なると思われます。
- ブログを始めたばかりで目次を作ったことがない人→「1. ブログにおける目次の重要性」から読むべき人
- ブログで普段から目次を使っているが、Ulysses、Textasticのアプリを知らない人→「2. Ulysses、Textwellとは」から読むべき人
- UlyssesもTextwellも知っていて、やり方を早く知りたい人→「3. ジャンプできる目次をつくる」から読むべき人
アプリの機能も全て知っていて、そのやり方だけを知りたい人に目次の重要性を永遠と話しても「そんなこと知ってるからさっさとやり方だけ教えてくれ！」ってなりますよね。そんな人のために近道を用意してあげるのです。
目次をつくってあげることは、読みやすい記事を提供しようという読者に対する優しさであり、同時にブログの滞在時間を伸ばすために非常に重要なのです。
そんなこと言いながら前置きが長くなってきてしまったのでさっさと次にいきます。
Ulysses、Textwellとは
どちらのアプリも広い言い方をすれば「メモアプリ」です。
しかし、それぞれのアプリで役割が違っており、それぞれ以下のように役割分担しています。
- Ulysses →下書き
- Textwell →コーティング（タップするだけ）
Ulyssesはマークダウン式のメモアプリで、アイデアの整理、ブログの下書き、簡単なコーティングをしてくれるアプリで、ブログを書くためには必須中の必須アプリだと思っています。
年額4,400円の割と高額なサブスクリプション型のアプリですが、本気でブログをやるなら投資する価値はありますね。これはおすすめ。
Ulyssesの使い方などについて詳しく知りたい方はこちらをご覧ください。
2020/02/05
Textwellは一見、保存もできず、大した機能もないアプリに感じますが、「アクション」という機能を使うことでその可能性が一気に解放されます。
「アクション」とは、事前にJavaScriptで一連の作業を登録することで、いろんな作業をワンタップで完了させてしまう恐ろしいアプリです。
またこの記事ではJavaScriptの知識が一切なくても問題ありませんのでご安心ください。
金額は1,220円（Mac版）、340円（iPad、iPhone）で買い切り型です。非常に便利なアプリなのですが、JavaScriptの知識を使うため、中級者向けアプリとなります。プログラミングに抵抗がある方は使いこなす前にギブアップしてしまう可能性性もあるのでご注意を。
難易度は高めにしろ、慣れて使いこなせれば作業を「スーパー効率化」できます。実際私はこのアプリ使ってからはブログに必要なコーティング作業をほぼ自動化してしまっています。
Textwellについて詳しく知りたい方はこちらの記事をどうぞ
2020/02/26
それでは本題の「ジャンプできる目次の作り方」にいきましょう！
ジャンプできる目次をつくる
ジャンプできる目次のHTMLの構造
まず、ジャンプできる目次を作る前にジャンプするHTMLの構造を知る必要があります。
ジャンプするということは「Aをタップ（クリック）するとBに移動する」ということですから、AとBを繋げる必要があります。その繋げる役割をしてくれるのが「aタグ」と「id属性」です。
説明ばかりだとわかりにくいと思うので実際にコードを書いてみましょう。
このように「href="#〇〇"」と「id="〇〇"」の部分を同じものにすることで２つを繋げてジャンプすることができます。ここでは「href="#jump"」と「id="jump"」としています。
この考え方をベースに目次をつくっていきます。
作り方STEP1：Ulyssesによる下書き・書き出し
まずはUlyssesを使って下書きをします。Ulyssesはマークダウン式のメモアプリで、文章に「#」や「 」などの記号をつけることで、書き出したときに様々なタグを自動的につけることができます。
基本的には以下のようなルールで書いていきます。
- 「＃」 → ＝ タイトル（h1）
- 「##」→ ＝ 大見出し（h2）
- 「###」→ ＝ 小見出し（h3）
- 「1.」 → ＝ 目次の箇条書き
実際に上記のルールでブログの骨格をUlyssesで書いてみると以下のようになります。
特に目次の書き方には注意しましょう。大見出し（##）は大見出しで1、2、3と順序づけされたリストで記述し、小見出し（###）は小見出しで1、2、3と順序づけする必要があるあります。
このようにマークするためには操作する上でコツがあります。順序づけされたリストはEnterで改行すると自動的にに次の数字が出てくるのですが、このときに「Tab（iPad純正のキーボードの場合は数字の1の下にある右矢印のマーク）」を押すと1段字下げして新たに1から数字が始まります。
逆にEnterを押した後にもう一度Enterを押すと大見出しの次の数字にいきます。
下書きが終わったらHTMLで書き出しましょう。Textwellをダウンロードしている場合、書き出す先としてTextwellを選択することができます。
Ulyssesの下書きの状態とTextwellに書き出した状態を比較します。
左側がUlyssesで下書きしたもの、右側がTextwellにHTML形式で書き出した状態です。自動的にタグがつけられてます。
目次の部分はolタグの二重構造になっていますね！これだけでもコーティングの手間はかなり省けるはずです！
Textwellに書き出したら次は目次でジャンプするためのコーティングになります。
作り方STEP2：Textwellによるコーティング
残りは、目次をクリックしたときに該当する見出しにジャンプさせる作業です。
これは前に説明したように目次と見出しを「aタグ」と「id属性」で繋げる必要があります。この作業もTextwellがあればワンタップで終了です。
まずは以下のリンクからTextwellの2つのアクションをインポートしてください。
Import Textwell ActionJUMP目次その1
Import Textwell ActionJUMP目次その2
それでは早速やってみましょう！
まずは、左上のマークをタップするとアクションの一覧が表示されるので、先ほどダウンロードした「JUMP目次その1」をタップします。
するとh2、h3のタグにそれぞれid属性が追加されます。
続いて目次部分を処理します。まず、目次部分の全体を選択します。そして、選択されている状態で左上のマークをタップして今度は「JUMP目次その2」をタップします。すると、今度は目次の項目にそれぞれの見出しへのリンクがついたaタグが生成されます。
一連の流れを見てみましょう。
なんとこれでおしまいです！大見出し（h2）には「i-◯」という名前のid属性が、小見出し（h3）には「i-◯-◯」というid属性がそれぞれ追加されています。
最後に
いかがでしょうか？！コーティング作業が面倒な目次もTextwellを使えば、今まで手動で行っていたり、プラグインに頼っていた動作がワンタップで完了してしまいます！
Textwellの便利アクションはこのブログでもどんどん紹介していきますので、ぜひご活用ください！