「ブログをもっと効率的に書きたい」
「Affinger6を上手に使いたい」
ブログを書いている方はそんなお悩みがあることと思います。
僕はきぐちさんに（勝手に）師事していることから、
きぐちさんがよく使うマイボックスやリストも真似しまくってきぐちナイズドされたブログを目指しています。
そのため、記事を書くときにはマイボックスやリストをたくさん挿入するのですが、素早く入力できないのでヤキモキしてました。
例えばリストを作るにもポチポチポチと３ステップこなさなければなりません。
前に使ったやつをコピペすればいい
と思うかもしれませんが、できる限りキーボードから手を離さずに挿入したいというのがプログラマーの端くれとしての切なる願いです。
あれこれ模索した結果、裏技的ないい方法を見つけられたのでご紹介したいと思います。
これでブログ記事の作成が劇的に速くなると思います。
マイボックスやリストを一瞬で入力する
どのくらい劇的に早くなるのかというと、下の動画をご覧ください。
このあとお伝えする方法を実践すると、キーボードショートカットを使うことでデザイン指定済みのパーツを一瞬で配置することができるので、動画上では約6倍のスピードで作業ができています。なお、対応しているのはブロックエディタです。
実現方法
以下はMacでの実現方法です。
Windowsでも同じような方法が取れると思いますが、やり方がわからん！という方はコメント欄で教えてください。
Macでのステップは下記のとおりです。
- ショートカットキー（ホットキー）でペーストができるMacのアプリをインストールする
- 素早く入力したいブロックを適当な記事で作成する
- ブロックをコピーする
- ショートカットキーを設定する
1. ショートカットキー（ホットキー）でペーストができるMacのアプリをインストールする
あれこれ探したのですが、見つけられたフリーソフトは下記のみでした。
こちらからアプリの内容をご確認いただけます。
このアプリは自分で決めたショートカットキーを押すと、あらかじめ設定しておいた文字列が貼り付けられる、というものです。
ポイントは「貼り付けられる」というところです。
なぜここがポイントかは後述するので興味がある方は読んでみてください。
なお、この後の作業の中でこのアプリへのクリップボードへのアクセス許可を求められるタイミングがあると思うので、確認の上許可するようにしてください。
インストールが終わったら一旦次のステップに進みます。
2. 素早く入力したいブロックを適当な記事で作成する
素早く入力したいブロックは人それぞれなので、任意のWordPressの記事編集画面を開いてその要素を手元で作成します。
僕はきぐちナイズドされたブログにしたいので、例えばきぐちさんがよく使っている
- リスト
こういうリストを量産できるようにしたいと思います。
まずはいつも作っているように、ブロックを作ります。
3. ブロックをコピーする
作成できたらブロックをコピーします。
念の為あいてるスペースに貼り付けてみて、必要な範囲がコピーできていたことを確認します。
大丈夫そうですね。
僕らの感覚としてはブロックをコピーしたのですが、
コピーしたブロックをメモ帳などに貼り付けてみるとこんな文字をコピーできています。
<!-- wp:list {"backgroundColor":"light-green-cyan","className":"is-style-st-no-border"} -->
<ul class="is-style-st-no-border has-light-green-cyan-background-color has-background"><!-- wp:list-item -->
<li></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->WordPressの内部的にはこの文字列がペーストされると装飾されたブロックに変換してくれるということのようです。
4. ショートカットキーを設定する
いよいよショートカットキーを設定します。
先ほどインストールしたアプリを画面上部のメニューバーから開きます。
「Show Keyboard」で画面上にキーボードを開いたら任意のキーを選びます。
ここで選ぶキーは直接的なショートカットキーではないのでどれでも構いませんが、このアプリの意図としてはショートカットキーに使うつもりのキーを選んでおくとあとでわかりやすいよ、ということのようです。下の例では適当に５を選びました。
次に表示された画面に先ほどコピーしたブロックを貼り付けます。
最後にショートカットキーを設定します。
ショートカットキーはコピーとペーストそれぞれに設定できるので、ここでは「To paste」の方を選択してください。
下の例では「Shift + Command + A」に設定しています。
最後にAuto Paste Textというスイッチをオンにします。
以上で設定は完了です。
WordPressの記事編集画面で「Shift ＋ Command ＋ A」を押すと装飾されたリストが表示されるはずです。
これでブログ記事の作成が効率的に行えるようになったと思います👍
僕はMacユーザーなので一旦はMac向けの実現方法しかお伝えできないのですが、もしWindowsではどうすればいい？
という要望があれば検証してみるのでコメント欄で教えてください。
今回の話はわかったけど、そもそもHTMLってよくわからない。
という方、WordPressを使うにあたりHTMLの知識は役立つことがあるので、ぜひ今から10分だけHTMLの勉強をしてみましょう！
もっと簡単な方法はないのか？
ここからは興味がある方だけ読んでいただければと思うのですが、
今回紹介した方法以外にもっと簡単に実現する方法はないのか？とあれこれ模索しましたが、結果的に今回お伝えした方法がベストな方法でした。
もしもっといい方法をご存知の方がいたらぜひコメント欄で教えてください！（WordPressの設定でちょちょいのちょい！というのがあってもいい気がしています）
そもそもAffingerやWordPress単独で実現できる？
今回実施したかった装飾済みのブロックの挿入に関して、
外部のアプリを使わずにAffingerやWordPress単独で実現できないか？をまずは検討してみました。
- マイボックスを「/」で入力できないか？
- リストなどの設定をデフォルト値として保存できないか？
この2点に絞ってあれこれ調べてみたものの実現方法は見当たらず。
AffingerやWordPressのコードをいじればできるのでしょうが、あとで困りそうなのでAffingerやWordPress単体の実現は諦めました。
ブラウザの拡張機能で実現できる？
僕はChromeを使っているのでChromeの拡張機能で「設定しておいた文字列をショートカットキーで貼り付ける」という機能がないかを探してみました。
見つけられた限りあらゆるクリップボード系の拡張機能を試してみたのですがどれも目的は果たせませんでした。
実は、
ショートカットキーで設定しておいた文字列を貼り付ける
とうたっている拡張機能はあるんです。
ですが、その実態は
ショートカットキーで設定しておいた文字列を自動で入力する
というものでした。
何が違うのかですが、ここで冒頭でお伝えしていたポイントは「貼り付けられる」というところだ、という話が出てきます。
ブロックをコピーするとクリップボードに保存されるのは
!-- wp:list {"backgroundColor":"light-green-cyan","className":"is-style-st-no-border"} -->
<ul class="is-style-st-no-border has-light-green-cyan-background-color has-background"><!-- wp:list-item -->
<li></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->こういう文字列ですが、これを記事作成画面に直接打ち込んでも文字が表示されるだけでブロックには変換されません。
この文字列を「ペーストする」ことではじめてWordPressがブロックに変換してくれるというわけです。
そして、ブラウザの拡張機能には「ペーストする」機能はないようなので、ブラウザの拡張機能では実現不可能という結論になりました。
Macの他のアプリじゃだめ？
定型分をショートカットキーでペーストできるアプリ
をApp Storeや野良のものも含めて結構たくさん試してみたのですが目的を果たせたのは今回紹介したアプリのみでした。
あんまりニーズがない操作なんでしょうね。
ということで今のところベストな方法は今回お伝えした方法です。
今回はここまでです。
WordPressに詳しくなるにはHTMLの知識も役に立つので、ちょっと勉強してみたいよという方がいれば「今から」10分だけやってみましょう！