道具や工具は、なにかの作業をするとき補助的役割をしてくれる。たとえばハンマーであれば、釘を打ったり打ち砕いたりの作業に欠かせない。ノコギリであれば、木材を切断するために活躍する。これらをITの用語ではユーティリティやソフトウェアなどと呼ばれることもあり、Web上で利用できるものをWebツールやWebサービスと呼ぶ。
道具や工具と同様に、欠かせないWebツールは各種ジャンルにあるもので、作業がはかどった経験があるのではないだろうか。
このエントリーでは、サイトコーディングに役立つWebツールをいくつか紹介したい。
もくじ
Diffchecker
Diffcheckerは、差分をチェックしてくれる。納品後の修正依頼でクライアントによる修正がどの程度及んでいるか確認するために利用することが多い。瑕疵か追加対応かの判断に役立つ。
Postwoman
Postwomanは、APIクライアントだ。公開されているWebAPIやサーバーサイドでこしらえたAPIリクエストを試すことができる。アプリケーションのPostmanのようなものだ。返り値の構造を確認したいときに役立つ。
アスペクト比計算ツール
縦横比を計算してくれる。レスポンシブデザインをコーディングする場合において、youtubeやGoogle mapの埋め込みに用いられるiframeや2Dグラフィック描画に用いるcanvasで縦横比を保持させるためのパーセント値を算出するときに役立つ。
HTML5 子要素・親要素対応
https://yoshikawaweb.com/element/
HTML5 子要素・親要素対応は、HTMLの梱包および内包が許される関係を視覚化したツールだ。記憶してしまえばそれまでの情報なのだが、HTMLタグの親子関係を説明するときに役立つ。
PXtoEM.com
PXtoEM.comは、CSSのfont-sizeプロパティ単位「em」を算出してくれるツールだ。まずベースのフォントサイズをセットして、ターゲットpx相当のem値を知ることができる。CSSのcalc()関数やSassで計算できる環境ならば不要なのだが、改修案件で既存のソースコードに手を加えるときに役立つ。
Polyfill.io
Polyfill.ioは、JavaScriptのモダンな機能が未実装なブラウザで、擬似的に動作するスクリプトをセレクトして結合できるツールだ。古いブラウザ対応を含む案件かつbabel等のトランスパイルする環境にいないときに役立つ。
HTML Arrows
https://www.toptal.com/designers/htmlarrows/
HTML Arrowsは、HTMLの特殊文字リファレンスだ。HTMLエンティティやCSSコードを一覧できる。HTML特殊文字に関しては、このサイトより充実したところも存在するが、Unicode、HEX code、HTML code、HTML entity、CSS codeを一覧できるのは、あまり知らない。なかでもCSS codeの一覧は役立つ。
Flexbox Playground
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
Flexbox Playgroundは、CSSのFlexboxプロパティ値を操作して体感するデモツールだ。サイト名のとおり遊び場だ。たくさん操作すればFlexboxの特性を理解できると思う。Flexboxの理解に役立つ。
まとめ
サイトコーディングに役立つWebツールの紹介だった。
ここで紹介したツール以外にも、きっとたくさんの有用なWebツールが存在するだろうし、わたしの知らないツールをあなたが知っていて日常的に使用しているケースも往々にあるだろう。その逆にわたしが日常的に使用していて、あなたが知らないケースもある。だからこのたび共有することにした次第だ。
このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。