AWS
テスト
ツール
HTML,CSS,JavaScript
Webサービス

2018年【1-6月】使用中のおすすめWebサービス(プログラミング系)リスト

2018年【1-6月】使用中のおすすめWebサービス(プログラミング系)リストです。ごちゃついてうまく整理できてない気もしますが、それは追々精査していきます。
※画像は全てリンク先ページより転載しています。

おすすめシリーズ

  1. 2018年【1-6月】使用中のTrelloのおすすめエクステンションリスト - Qiita
  2. 2018年【1-6月】使用中のChromeのおすすめエクステンションリスト - Qiita
  3. 2018年【1-6月】使用中のMacのおすすめインストールアプリリスト - Qiita
  4. 2018年【1-6月】使用中のおすすめWebサービス(Web解析系)リスト - Qiita
  5. 2018年【1-6月】使用中のおすすめWebサービス(デザイン系)リスト - Qiita
  6. 2018年【1-6月】使用中のおすすめWebサービス(プログラミング系)リスト - Qiita

リスト

セキュリティ

Kaspersky Cyberthreat real-time map

サイバー脅威リアルタイム可視化ツール。世界のサイバー脅威をリアルタイムで可視化して地球儀上に表現します、Kasperskyのが一番綺麗。セキリュティ意識向上のため。

list-web-service-programming_01.png

Norse Attack Map

サイバー脅威リアルタイム可視化ツール。世界のサイバー脅威をリアルタイムで可視化して地図上に表現します。気分転換に眺めていたりします。でも、セキリュティ意識向上のため。

list-web-service-programming_02.png

リアルタイム・インターネット・モニター

インターネットの状況をリアルタイムで監視し、世界中の攻撃トラフィック、ウェブ接続速度、ウェブトラフィックの輻輳を表示。インターネットが好きなので、今どういう状況なのか知るために眺めたりしています。

list-web-service-programming_03.png

AWS構成図作成ツール

Cloudcraft

AWS構成図作成ツール。[ Cloudcraft Live ] 機能を使ってアカウントに紐づくAWS構成をスキャンして構成図を作成してくれるのはかなり便利な機能だと思う。

list-web-service-programming_04.png

AWS シンプルアイコン

AWS製品およびリソースの公式アイコンセット。PPTX、EPS、PNG、SVG等のアイコンセットをダウンロードできます。

list-web-service-programming_06.png

SSL設定

Generate Mozilla Security Recommended Web Server Configuration Files

各種WebサーバSSL設定生成ツール。Mozillaが開発しているサービスでconfigファイルを作成する際に使用します。

list-web-service-programming_07.png

Certbot

無料SSL/TLSサーバ証明書[ Let's Encrypt ]クライアントソフトウェア。「Certbot」を使用することで、SSL/TLSサーバ証明書の取得・更新作業を簡単に自動化できます。

list-web-service-programming_08.png

Qualys SSL Labs

SSL Server Test(SSL脆弱性診断)サービス。URLを入力して、SSLサーバ証明書の設定状況の確認や安全性診断などが無料で行えます。

list-web-service-programming_09.png

ローカル環境公開

ngrok

ローカル環境公開ネットワーク共有サービス。最近知ったサービス、ローカル環境をちょっと確認してもらいたかったり、スマホやIE上での動作確認をしてもらいたい時に、生成したリンクを送って確認してもらえます。SSL通信やBasic認証にも対応しています。

list-web-service-programming_10.png

Linuxコマンド

美女Linux | Linuxコマンドをもっと素敵で身近に

Linuxコマンドリファレンス。美女がLinuxコマンドのボードを持っています。

list-web-service-programming_11.png

HTML

HTML5リファレンス

HTML5のリファレンス。タグの参考に使用しています。

list-web-service-programming_12.png

HTMLHint

HTML構文チェックツール。設定を元に[ htmlhintrc ]ファイルを生成できます。

list-web-service-programming_13.png

CSS

stylelint

CSS構文チェックツール。CSSだけでなくSassやLessにも対応し、また不要なプレフィックスを制限することができます。

list-web-service-programming_14.png

Specificity Calculator

CSSセレクタのポイントビジュアル化サービス。CSSの優先順位が簡単に計測できます。

list-web-service-programming_15.png

Can I use

HTML・CSSのブラウザ対応確認サービス。HTMLやCSSが各種ブラウザに対応しているかチェックできます。

list-web-service-programming_16.png

I want to use

要素シェア確認サービス。使おうと検討している要素がどれくらいのシェアに対応できそうかチェックできます。

list-web-service-programming_17.png

Free Css generator

Media Queriesコード生成サービス。設定したブラウザやデバイスに対応したメディアクエリ設定のCSSコードを生成します。

list-web-service-programming_18.png

Unused CSS finder

未使用CSSチェックサービス。スタイルが当たってないCSSをチェックします。

list-web-service-programming_19.png

何番目系の便利なCSSデモ

CSS適応箇所チェックサービス。スタイルが当たる箇所をチェックします。

list-web-service-programming_21.png

Browserling

クロスブラウザチェックサービス。IEの簡易確認などで使用しています。

list-web-service-programming_22.png

css2sass

SASSコンバートサービス。CSSをSASSに変換できます。さっと確認したい時などに便利。

list-web-service-programming_23.png

Responsive Checker

レスポンシブイメージ確認サービス。さっと確認したい時などに便利。

list-web-service-programming_24.png

CSScomb

CSS記述順設定出力サービス。CSSプロパティの記述順を設定することができます。

list-web-service-programming_27.png

JS

ESLint

JS構文チェックツール。使用可能にしたら設定は公式の推奨を利用。

list-web-service-programming_25.png

JSBEN.CH

コードパフォーマンスチェックサービス。ブロック上の二つのコードのどちらがパフォーマンス的に優れているか比較できます。

list-web-service-programming_26.png

HTML/CSS/JSその他

The Ultimate Website Code Generator

HTML・CSSコード生成サービス。OGPやmeta要素にも対応しています。

list-web-service-programming_33.png

Href Tools

各種変換・圧縮まとめサービス。HTML/CSS/JSの圧縮、ファイル変換などを行うことができます。

list-web-service-programming_51.png

自作のWebツール集

各種Webツールサービス。チェッカーなど希望用途のものがあるかさっと確認する用に便利。

list-web-service-programming_34.png

copypet.jp

Webパーツリファレンスサービス。希望用途のものがあるかさっと確認する用に便利。

list-web-service-programming_35.png

The W3C Markup Validation Service

コードチェックサービス。W3C基準でコードが対応しているかチェックできます。

list-web-service-programming_36.png

CodePen

HTML/CSS/JSオンラインコードエディタ。動作をさっと確認したい時に便利。

list-web-service-programming_37.png

SNS対応

HEY META

OGP・meta要素用コード生成サービス。TwitterカードやFacebookのコード、Googleなどの検索エンジン用のコードを確認・生成できます。

list-web-service-programming_28.png

OGP画像シミュレータ

OGP画像シミュレータ。作成した画像をタイムライン上に載せた時の実際の見た目を検証することができます。

list-web-service-programming_29.png

デバッガー

シェアデバックサービス。ウェブサイトのコンテンツがFacebookやMessengerなどでシェアされたときに使用された情報を見ることができます。

list-web-service-programming_30.png

ページプラグイン

ウェブサイト埋め込み用Facebookページコード生成サービス。公式のサービスなのでなるべくこちらを使用するようにしています。

list-web-service-programming_31.png

Card Validator

Twitter Cards検証サービス。公式のサービスなのでなるべくこちらを使用するようにしています。

list-web-service-programming_32.png

その他

パスワード生成(パスワード作成)

パスワード生成サービス。シンプルなので結構頻繁に使っています。

list-web-service-programming_38.png

ご利用環境チェックツール

利用環境チェックサービス。同僚に便利だと思うと行ったら不思議に思われたけど、お客さんや非ITなど慣れてない人の現状をさっと調べたい時には便利だと思うんだけどな。

list-web-service-programming_39.png

全角半角 変換ツール

全角半角変換サービス。文章校正時の確認用。半角全角、あと空白は人間の目で確認しないように心がけています。

list-web-service-programming_40.png

疑似個人情報データ生成サービス

疑似個人情報データ生成サービス。検証用ダミーデータ作成の際に使用しています。結構細かく設定できます。

list-web-service-programming_41.png

ダミーテキストジェネレータ

ダミーテキスト生成サービス。サンプルを作成する際になるべくイメージに近づけるために使用しています。

list-web-service-programming_42.png

Gzipチェッカー

Gzipチェックサービス。サイトがGzipに対応しているか確認するために使用しています。

list-web-service-programming_43.png

リダイレクトチェッカーツール

リダイレクトチェックサービス。301やhttpからの遷移を確認するために使用しています。

list-web-service-programming_44.png

ファイル権限変換ツール

ファイル権限確認サービス。chmodコマンドを使用する時など、ぶっちゃけターミナルでオプションつけて整形してファイル権限の数値を確認することもできるけど、めんどくさい。

list-web-service-programming_45.png

Mergely

テキスト差分確認サービス。difff《デュフフ》も便利だと思うけど、コード差分の結合などをしたい時はこちら。

list-web-service-programming_46.png

HackMD

オンラインMarkdownエディタ。俺自身はローカルでさっと書いてファイルのエクスポートだけしたいのでLiveMdを使っているけど、エクスポートできない(はず)けどチームでリアルタイム編集したいならこれはとても使いやすいと思う。

list-web-service-programming_47.png

paiza.IO

オンラインIDEサービス。写経などの学習の際にさっとコードの動作確認したい時に便利です。

list-web-service-programming_48.png

codic

コードネームング生成サービス。ネーミングで迷った時に使います。

list-web-service-programming_49.png

文字エンコード判別

文字エンコード判別ツール。そのテキストの文字エンコードが何か知りたい時に使用します。

list-web-service-programming_50.png

その他情報