【君はいくつ知っている？】【知らないと損する】開発の生産性を上げてくれる画期的なWebサービス 18選
はじめに
今回の記事では、普段のプログラマーの開発の生産性を向上させてくれる画期的なWebサービスを18も紹介する。個人の独断と偏見で紹介しているので、今回の記事で紹介しているものはあくまで一例にすぎない。
知っているだけで開発の生産性を急激に高めてくれるWebサービスは存在する。今回の記事を通して1つでも気になるWebサービスを見つけることができれば非常に幸いである。
CSSGradient
CSSで作れるグラデーションをまとめたサイト。1,000以上の種類から自分の好みのグラデーションを選べる。
Fontjoy
自分が制作するWebサイトに最適な組み合わせのフォントを選ぶ上で役立つ。主にデザイナー向けに作られたWebサイト。ポートフォリオサイトに使うフォントを選ぶ際に参考になるだろう。
Readme.so
Markdownとテンプレートを活用して、自分が開発したプロジェクトのREADMEを簡単かつ高速で作成できるWebサービス。
「README作るの面倒だな」と思っているプログラマーに最もオススメできるサービス。
Unminify
HTML、CSS、JavaScript、XMLやJSONのコードを整理してくれる無料のWebサービス。コピペするだけで簡単にコードを整理してくれる。
例えば、以下のプログラム(.jsonファイルや.jsファイル)をこのツールを使ってコードを整理すると以下のようになる。
使い方
▼コードを整理する前
// NOTE: ダミーデータで確認
[{"issuer":"MasterCard","cardNumber":"5129538783200656","exp":"12\/24","cvv":163,"name":"Tyrese Sporer Jr.","address":"24263 Darion Villages Apt. 247\nSouth Myles, WY 66237-2580","country":"Gambia","zipcode":"01730"},{"issuer":"MasterCard","cardNumber":"5545693374354358","exp":"02\/24","cvv":320,"name":"Peyton Gerlach","address":"24125 Rodolfo Springs Suite 216\nJaquelineshire, ID 66049-1821","country":"French Southern Territories","zipcode":"95345-4223"},{"issuer":"MasterCard","cardNumber":"5362769405973117","exp":"08\/25","cvv":164,"name":"Ara Prohaska","address":"462 Beatty Walks Suite 456\nPort Dereckchester, WV 77133","country":"Djibouti","zipcode":"86475-2219"},{"issuer":"MasterCard","cardNumber":"2572042089668624","exp":"03\/25","cvv":394,"name":"Hayley DuBuque","address":"6719 Rohan Passage\nSouth Mackburgh, MN 56154-7239","country":"Micronesia","zipcode":"74295-1192"},{"issuer":"MasterCard","cardNumber":"2391003827653442","exp":"04\/23","cvv":315,"name":"Obie Rippin DVM","address":"311 Rowan Hollow Apt. 389\nMustafaton, ID 13530-4325","country":"Antarctica (the territory South of 60 deg S)","zipcode":"06969-8571"}]
▼コードを整理したあと
// NOTE: ダミーデータで確認
[
{ "issuer": "MasterCard", "cardNumber": "5129538783200656", "exp": "12/24", "cvv": 163, "name": "Tyrese Sporer Jr.", "address": "24263 Darion Villages Apt. 247\nSouth Myles, WY 66237-2580", "country": "Gambia", "zipcode": "01730" },
{
"issuer": "MasterCard",
"cardNumber": "5545693374354358",
"exp": "02/24",
"cvv": 320,
"name": "Peyton Gerlach",
"address": "24125 Rodolfo Springs Suite 216\nJaquelineshire, ID 66049-1821",
"country": "French Southern Territories",
"zipcode": "95345-4223"
},
{ "issuer": "MasterCard", "cardNumber": "5362769405973117", "exp": "08/25", "cvv": 164, "name": "Ara Prohaska", "address": "462 Beatty Walks Suite 456\nPort Dereckchester, WV 77133", "country": "Djibouti", "zipcode": "86475-2219" },
{ "issuer": "MasterCard", "cardNumber": "2572042089668624", "exp": "03/25", "cvv": 394, "name": "Hayley DuBuque", "address": "6719 Rohan Passage\nSouth Mackburgh, MN 56154-7239", "country": "Micronesia", "zipcode": "74295-1192" },
{
"issuer": "MasterCard",
"cardNumber": "2391003827653442",
"exp": "04/23",
"cvv": 315,
"name": "Obie Rippin DVM",
"address": "311 Rowan Hollow Apt. 389\nMustafaton, ID 13530-4325",
"country": "Antarctica (the territory South of 60 deg S)",
"zipcode": "06969-8571"
}
]
▼JavaScriptでも同様に整理できる
// 整理する前
var File = function(url, object){
File.list = Array.isArray(File.list)? File.list : [];
File.progress = File.progress || 0;
this.progress = 0;
this.object = object;
this.url = url;
};
File.indexOf = function(term){
for(var index in File.list){
var file = File.list[index];
if (file.equals(term) || file.url === term || file.object === term) {
return index;
}
}
return -1;
};
File.find = function(term){
var index = File.indexOf(term);
return ~index && File.list[index];
};
File.prototype.equals = function(file){
var isFileType = file instanceof File;
return isFileType && this.url === file.url && this.object === file.object;
};
File.prototype.save = function(update){
update = typeof update === 'undefined'? true : update;
if(Array.isArray(File.list)){
var index = File.indexOf(this);
if(~index && update) {
File.list[index] = this;
console.warn('File `%s` has been loaded before and updated now for: %O.', this.url, this);
}else File.list.push(this);
console.log(File.list)
}else{
File.list = [this];
}
return this;
};
// 整理した後
var File = function (url, object) {
File.list = Array.isArray(File.list) ? File.list : [];
File.progress = File.progress || 0;
this.progress = 0;
this.object = object;
this.url = url;
};
File.indexOf = function (term) {
for (var index in File.list) {
var file = File.list[index];
if (file.equals(term) || file.url === term || file.object === term) {
return index;
}
}
return -1;
};
File.find = function (term) {
var index = File.indexOf(term);
return ~index && File.list[index];
};
File.prototype.equals = function (file) {
var isFileType = file instanceof File;
return isFileType && this.url === file.url && this.object === file.object;
};
File.prototype.save = function (update) {
update = typeof update === "undefined" ? true : update;
if (Array.isArray(File.list)) {
var index = File.indexOf(this);
if (~index && update) {
File.list[index] = this;
console.warn("File `%s` has been loaded before and updated now for: %O.", this.url, this);
} else File.list.push(this);
console.log(File.list);
} else {
File.list = [this];
}
return this;
};
favicon.io
これを使ってテキスト、画像や絵文字からfavicon(ファビコン、ブラウザのタブなどに表示されるWebサイトのアイコン)を生成できる。
remove.bg
5秒以内にワンクリックでアップロードした画像の背景を切り取ってくれるWebサービス。画像編集には欠かせないWebサービス。
Logo Ipsum
アプリケーションやWebサイトなどに使われるロゴを生成できる画期的なWebサービス。Webデザインで役立つ。基本的に.svg形式で保存される。
Poet.so
TwitterのツイートのURLをコピペするだけで簡単に以下のような画像を生成できるWebサービス。(私のアカウントで試した例)
職務経歴書にTwitterのツイートを使ったり、ツイートをおしゃれにしたりするときには非常にオススメできる。
PFPmaker
画像からポートフォリオ用に最適化したアイコンや画像を生成できるWebサービス。
Apption.co
サードパーティ製のWidgetをNotionに組み込めるWebサービス。使うには会員登録が必要だ。Notionを学習・開発でフル活用しているプログラマーは全員確認して損はないだろう。
Carbon
自分のソースコードを画像で保存できるWebサービス。コードの幅、フォントの種類・大きさ、背景色等を自由にカスタマイズできる。Twitterと連携して画像をツイートできる。
会員登録しなくても使えるものの、会員登録すれば自分が作ったソースコードの画像を保存できる。下の画像は実際にCarbonで生成したプログラムのサンプルコード。(言語はDart言語)
storytale
世界中のプロのクリエイターが作成した画像をダウンロードして使える。Webデザイナー向けのサービス。高品質の画像を探しているときには参考になるだろう。
storyset
storytale同様に、ポートフォリオサイトやLPなどで使える高品質な画像を提供しているサイト。会員登録不要で使える。
色と背景の画像を自由自在にカスタマイズでき、.pngと.svg両方の形式のダウンロードに対応している。
smallDev.tools
開発者向けに提供されている無料で使えるツールをまとめたWebサービス。会員登録不要ですぐに使える。
主に本サイトに登録されているサービスは以下の通り。
- サンプルコードの共有
- JSON、Base64やXMLなどの暗号化・復号化
- HTML、CSS、JavaScript、SQLのコードの自動整理
- テストデータ、クレジットカード(ダミーデータ)の自動生成
- Markdownのエディタ
- QRCodeの生成
- ダミーテキストの生成
Witeboard
iPadのように手書きでメモを書けるWebサービス。ダークモードや文字入力にも対応している。手書きで素早くメモを取りたい人に非常にオススメ。スマホにも対応している。
excaildraw
Witeboardと同じように、手書きでメモを書けるWEBサービス。Witeboardとの最大の違いは、矢印や図形など様々な記号に対応していることである。自分が手書きで書いた図形を自動できれいな形に修正してくれる。
ただし、SurfaceやiPadなど手書きに対応しているディスプレイでなければ真価を発揮できないのが欠点。ダウンロードなしですぐ使える。
whatruns
自分が現在閲覧しているWebサービスを開発するのに使われている技術を確認できるChrome拡張機能。自分が開発したいWebサービスと似たようなWebサービスが使われている技術を確認できる。
自分が普段使っている技術がどのようなWebサービスに使われているのかを知りたい人はインストールして損はない。
試しにTypeScript公式サイトの開発に使われている技術をwhatrunsで確認すると、以下のように出力される。(下の画像の右上に着目すると使われている技術がわかるだろう)
Keywords Everywhere
調べたいキーワードの、複数のWebサイトにおけるアクセス数等の様々なデータを確認できるChrome拡張機能。Firefoxにも対応している。出力されたデータはPDFやCSV形式で保存できる。
SEO対策に困っている人は活用することをオススメする。
flaticon
キーワード検索でWebデザインやポートフォリオサイト、Webサービスやスライドに活用できるアイコンを見つけられる。アイコンを.pngや.svg、.cssなど様々なデータ形式で出力できる。アイコンにアニメーションを付けておしゃれなデザインに仕上げることもできる。
スライドを使った発表やWebデザインで困っているなら、確認しておいて損はないだろう。
devicon
主にプログラミング・エンジニアリングで活用する技術(プログラミング言語やフレームワーク等)のアイコンを取り扱っているWebサービス。主にポートフォリオサイト、アーキテクチャ図の制作で重宝する。
.pngや.svg形式だけではなく、CDNにも対応しているので使い勝手がいい。
GoFullPage
単一のWebページのスクリーンショットをワンクリックで簡単に生成してくれるChrome拡張機能。自分のお気に入りのWebページや技術記事を画像に変換してくれる。
試しに、こちらのページでこの拡張機能を使ってみると以下のように画像が出力される。出力されたものは.pdf、あるいは.svg形式で保存できる。
出力された画像
Figma
主にWebデザインやアプリのプロトタイプ制作で非常に重宝するWebサービス。Webデザイナー向けに設計されているが、私たちプログラマーでも活用するサービスである。それだけではなく、特にTwitterに投稿する図解や、プレゼンで使うスライドを作るうえで非常に重宝する。個人的に、人生で最も使ってよかったサービスのトップ5に入るWebサービスである。(ちなみに、私の場合はデスクトップアプリをインストールして作業している)
▼私のTwitterアカウントのツイート。Twitterにアップしている図解はすべてFigmaで作っている。
参考サイト
Discussion