WordPress及びブラウザ経由で Developers.IO の執筆を加速させるテクニックをまとめていく

クラスメソッドでは「Developers.IO」でユーザーアカウントが発行されるとブログが好きなだけ書けるようになります。メンバー各位「好きなタイミングで好きなテーマを好きな時に書いている」のがクラスメソッドの日常ではあるのですが、執筆の際は極力手間を省き、また効率化出来るところは効率化して行きたいところではあります。

そこで当エントリでは、Developers.IOの基盤となっているWordPress環境下、及び執筆時に使えるテクニックを幾つかご紹介したいと思います。

目次

• Developers.IOで利用出来る記法
• Developers.IO組み込みの機能を使う
• 「Emmet」の機能を活用してHTMLタグ記載の手間を減らす
• Chrome拡張「Developers.IO編集アシスタント」 by shoito
• 情報収集・リンク生成のための作業を効率化
  • Create Linkで管理
  • ブックマークとして保存
  • 「ブログカード」で装飾
• まとめ

Developers.IOで利用出来る記法

Developers.IOのブログ編集では、HTMLタグ直書きの他にマークダウン(Markdown)記法が利用出来ます。HTMLタグの書き方に慣れていない人、少ない記述量で簡単に済ませたいという人にはオススメです。

• Markdown ｜ Developers.IO

Developers.IO組み込みの機能を使う

Developers.IOのブログ編集では、ユーザーの編集作業を効率化する組み込みの機能が幾つか用意されています。

• 新シンタックスハイライト ｜ Developers.IO
• 装飾用クラス ｜ Developers.IO

「Emmet」の機能を活用してHTMLタグ記載の手間を減らす

• HTMLの入力補助 ｜ Developers.IO

上記ヘルプページに記載の「Emmet」という機能。Developers.IOのブログ編集ではこの機能を利用出来ます。

(Developers.IOで利用出来るコードの)対象はHTMLタグのみのため、ブログ記法に「HTML」を用いているユーザーのみ恩恵に預かれる形となるのですが、この効果がとても強力なんです。HTMLタグの補完だけで無く、定められた略記法でコードを実行することで、煩雑だったHTMLタグの記載・展開が一発で済んでしまう素晴らしさ。どんな感じで出来るのかについては下記動画をご参照ください。

どんなコードを書くとどんな内容に展開されるのかについては下記「チートシート」にまとめられています。

Chrome拡張「Developers.IO編集アシスタント」 by shoitoを使ってカテゴリ選択を快適に

Developers.IOでブログ編集を行う際、任意のカテゴリ等を設定するには対象となる項目のチェックボックスを選択していく必要があります。現状、カテゴリ群については項目数が非常に多く増えているため、目的のものを探すのだけでも一苦労。そんな時に便利なのがこちらのChrome拡張機能です。

タグやカテゴリの選択エリアに検索窓が表示され、所定の入力文字列に該当するものを絞込表示してくれます。

情報収集・リンク生成のための作業を効率化

ブログ執筆に於いては、参照対象として任意のWebサイトのURLを貼る事は良くある事です。この情報を収集・追記するのも極力簡略化したいところ。主に以下の方法を用いることで実現が可能です。

Create Linkで管理

ブラウザのメニュー操作として、このURL情報(タイトル＆URL)を取得する方法。Google Chromeでは「Create Link」という拡張機能が用意されており、これを追加することで処理が実現出来ます。

取得項目・内容は個別に追加やカスタマイズが可能です。

所定のWebサイトに遷移後、右クリックメニューで選択を行うと、

以下の様な文字情報を得る事が出来ます。

<a href="https://dev.classmethod.jp/" target="_blank">クラスメソッド発「やってみた」系技術メディア | Developers.IO</a>

ブックマークとして保存

URL取得のためのコードを、ブラウザの「ブックマーク」として保存しておくというのもアリです。個人的にはこちらの方法が好きで良く使っています。

主に良く使っているのが以下2つ。「名前」に関してはお好みの文字列を設定してください。

プレーン形式("タイトル URL")

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;}})()

HTML形式(aタグで装飾、target="_blank"属性あり)

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;}})()

「ブログカード」で装飾

上記例はURLのリンク文字列生成としての情報取得方法ですが、「ブログカード」の形式で情報を得る事も可能です。詳細は以下のエントリをご参照ください。

まとめ

という訳で、Developers.IOでブログ執筆を行う上での「効率化が図れる」テクニックや設定のまとめでした。ものによってはブログ執筆以外の情報収集にも利用出来るかと思いますので、是非参考にして頂ければと思います。

• Developers.IO ブログ執筆ノウハウ共有 ｜ シリーズ ｜ Developers.IO