読者です 読者をやめる 読者になる 読者になる

Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

これから技術ブログを始めるなら知っておきたい5つのツール

ツール

これから技術ブログを始めようという人のために、僕が使えると思ったツールを5つ紹介しようと思う。


コード表示


技術ブログならやはりコードは載せていくだろう。各ブログサービスに標準で用意されている機能やWordPressならプラグインを使って書くことも出来るが、外部サービスも使えるものが多いので紹介しておく。


Gist


GistはGithubが提供しているコードの断片を管理できるサービス。

GitHub Gist


以下のように、Gistで書いたコードをブログに貼り付けることが出来る。スマホにも対応していて、コードを折り返さず横スクロール表示できるのが特徴。


コードの管理画面からscriptタグをコピーしてブログに貼り付けるだけなので、簡単。


はてなブログはてな記法モードを使っている人は、以下のように書くことで同様にGistの内容を表示することが可能(xxxxxxにはコードのIDをいれる)。

[gist:xxxxxx]


1点注意。はてなブログでGistを使いスマホで表示させた場合、長いコードは悲惨な折り返されかたをする(コード同士が重なって読むことが不可)。これははてなブログのスマホ用CSSが適用されているためであり、スマホ用CSSは編集することが出来ない仕様なので解決策は無い模様。



jsdo.it


jsdo.itはカヤックが提供しているHTML/CSS/JSのオンラインエディタ兼、コード共有のWebサービス。

jsdo.it


以下のようにブログに貼り付けることが出来る。実行時の挙動が見れるので、デモを載せたいときに最適。


コードの管理画面から画像の矢印部分のscriptタグをコピーしてブログに貼り付けると、上記のように表示される。表示方法も種類があるので、自分が好きなものを選べる。


CodePen


CodePenはjsdo.it同様、HTML/CSS/JSのオンラインエディタ兼、コード共有の海外Webサービス。デザインや使いやすさがすばらしい。

CodePen


以下のようにブログに貼り付けることが出来る。jsdo.it同様、実行時の挙動が見れるのでデモを載せたいときに最適。

Check out this Pen!


コード編集画面のShareボタンからscriptタグをコピーしてブログに貼り付けることが出来る。こちらも様々な表示方法が可能。



コードの解説などの際に、図があるとより良く伝わる。というわけで図を描けるツール。


Cacco


CaccoはWeb上で簡単に図を描くことのできるツール。

Cacco


こんな感じの図が本当に簡単に作れてしまう。Web上で描いていると感じさせないほど挙動もなめらかで、とても良い。ちなみにiframeタグでブログに図を埋め込むことが出来るが、pngでダウンロードしてuploadしたほうがおすすめ。


使い方はnanapiで公開されている。

Cacooの使い方ガイド


キャプチャ


キャプチャツールは紹介したいWebサービス、アプリの実行結果などの画像をキャプチャリングして、加工することの出来るツール。この記事でもさんざんつかっている。


SnapDraw


SnapDrawは非常に多機能なキャプチャツール。

SnapDraw


海外のツールなので全て英語であることと、多機能という点が初めて使う人に敷居の高さを感じさせるが、慣れてしまえば問題ない。
以前は有料であったが、無料化したそうだ。このツールの使い方は以下の記事が詳しい。

有料だったが無料化した超多機能スクリーンショットソフト「SnapDraw」


というわけで5つのツールを紹介した。これらをうまく使い、読者の方にとってわかりやすいブログを書いていきたいものである。

広告を非表示にする