ブログ執筆の際に使っている『おすすめツール』を教えてください。– DevelopersIO 著者のみんなに色々聞いてみた Advent Calendar 2021

アドベントカレンダー2021

しんや

2021.12.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

当エントリは『DevelopersIO 著者のみんなに色々聞いてみた Advent Calendar 2021』11日目のエントリです。

当エントリでは、今年2021年のアドベントカレンダー企画として、『著者の皆さんが使っているブログ執筆時のおすすめツール』のアンケート集計結果について紹介していこうと思います。

Q. ブログ執筆の際に使っている『おすすめツール』を教えてください。

『DevelopersIOでの作業』限ったことではありませんが、ブログ執筆を行う際には「文章を書く」を含めて様々な作業が発生します。その際にツールを活用することで効率化やスピードアップが図れるのは間違いない部分ではあります。今回のアンケートではそんな観点から「ブログ執筆の際に使っているおすすめツールがあれば教えてください」という設問を用意しました。

以下、ツールやサービスを列挙していきます。

Visual Studio Code

まずは『Visual Studio Code』。開発用途のみならず様々な利用が出来るこちらのツール、ブログ執筆にも活用しているという回答が得票数が一番多かったです。

Visual Studio Codeは様々な拡張機能を利用することが出来ます。今回のアンケートで回答が挙がっていたものを列挙しておきますので気になった方は是非Visual Studio Codeで執筆環境を整えてみてください。

Notion

続いての票が多かったツールは『Notion』。Markdown記法が使えるという事もあって、下書きベースのものをこちらで書いておき、最終的にDevelopersIOのプラットフォームにコピペ→微調整の上投稿...というケースを挙げる人が多かったです。私も最近は下書きはNotionである程度済ませ、内容文言チェック等を終えたらDevelopersIOにテキスト貼り付け＆微調整(画像表示などは別途DevelopersIOプラットフォーム上で行わなければならないので個別に対応)、からの投稿！という形で進めています。Notion独自のUI・使いやすさもそうですね『保存ボタンを都度押さなくても良い』のは行動を止めないで済むので地味に嬉しいですね。

Typora

Markdownエディタの『Typora』もNotionに次いでランクイン。

特になし

各種ツールを挙げる人が多い中で、『特に使っているツールはない』という意見も一定数ありました。かくいう私も暫く前まではテキストエディタに文章のみ記載していき、DevelopersIOでの編集プラットフォーム(WordPress)上で文字装飾やHTMLタグ加工等を行っていたのでここの回答(特に無し)に属する形ではありました。

GitHub

DevelopersIOでの執筆...という訳では無いのですが、同じく弊社で展開しているブログプラットフォーム『Zenn』でGitHub連携を利用している、というコメントは幾つかありました。

各種図形描画ツール

ブログの文章内容を補完するツールとして『Cacoo』や『Miro』のような構成図、図形描画ツールも回答に挙がっていました。事象や状況を分りやすく解説している図や絵があると無いとでは読者の理解度も全然違ってくるので、ブログを執筆する上では有効なツールと言えるでしょう。

リンク文字列生成ツール

Web上にある有用な情報を参考としてブログに追記する際、HTMLでのリンク表示可能な形(<a>タグでURLとタイトルを構成)でのコードが欲しくなりますが、都度手書きは手間を考えるととても面倒です。そんな時には簡単操作(1〜2クリック)でそれらの情報を取得出来る仕組みが便利ですね。というか必須です。そんな回答も多く挙がっていました。代表的なものは以下の2つ。

2つ目の『Creare Link』は私も好んで使っています。用途としては『はてなブックマークカード』形式でURLの情報を表示させる文字列を作る...とかですね。

Name:
(任意の名前でOK)

Format:
<iframe class="hatenablogcard" style="width:100%;height:150px;margin:0px; 0;max-width:100%;" title="%title%" src="https://hatenablog-parts.com/embed?url=%url%" frameborder="0" scrolling="no"></iframe>

実行イメージ：

取得コード：

<iframe class="hatenablogcard" style="width:100%;height:150px;max-width:100%;" title="AWS re:Invent 2021 JAPAN PORTAL | クラスメソッド" src="https://hatenablog-parts.com/embed?url=https://dev.classmethod.jp/reinvent/2021/" frameborder="0" scrolling="no"></iframe>

表示イメージ：

また、Google Chromeのブックマーク作成で似たような事をしており、こちらは通常リンク文字列生成で頻繁に利用しています。

javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value='<a target="_blank" href="'+location.href+'">'+ document.title +'</a>\n';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()

javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value=''+document.title+' '+location.href+'';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()