海外のyoutuberさんが使っていたWEBツールです 使ったことがないものが多々ある。メモとして残しています
ジェネレーター:
- ダミーテキスト作成ツール -
www.lipsum.com
残念なことに日本語がない・・・記事データのダミーを作ってくれる。
- ファビコン作成ツール - www.favicon-generator.orgjpg,png,gifから16×16ピクセルの画像を作成してくれるツールです。サイトやブログの初期やリニューアルした時にお世話になる。apple-touch-iconの画像も作成できる。そしてヘッダーに書く内容も用意してくれます。
- ダミーデータ作成ツール - mockaroo.comカラムをきめて、何行作成するのかを決めるとダミーデータを作成してくれるツールです。テストする時に使う
- モバイルモックアップ作成ツール - mockuphone.com自分の画像をモックアップにはめ込みができるサービスです。デザイナーからもらったHTMLのイメージ図をあてはめることができるサービスです
- ロゴ作成ツール - www.logaster.com
作りたいワードをいれるといい感じのデザインのロゴを用意してくれます。日本語もいけるらしいのですが、自分のマシンではフリーズしてしまいました。
- UUID Generator - https://www.uuidgenerator.net/
UUID（Universally Unique Identifier）とは、ソフトウェア上でオブジェクトを一意に識別するための識別子である。 UUIDは128ビットの数値だが、十六進法による 550e8400-e29b-41d4-a716-446655440000 というような文字列 wikiより 230京回に１回かぶるらしいが・・・まぁ不可能だよね
ブログで使えるイメージ検索:
- フリーの画像商用OK - www.pexels.com
- フリーの画像商用OK - unsplash.com
- Vectors, PSD, Icons and photosが一部有料だけどほとんど無料 - www.freepik.com
ダミー画像を作成してくれる - source.unsplash.com
ユーザー指定またはランダムでの画像生成
サイズを指定できるのがいい感じサイズを指定した画像が作成されて、そのイメージにサイズが記載されている。モックアップにいい感じ - https://placeholder.com
例
https://source.unsplash.com/480x320/?cat
↑catの画像をランダムで表示してくれるFree Icons(有料もあります) - www.iconfinder.com
アイコンを１個単位でも検索できるからいい感じ
コードを短くするツール:
- Minify JS & CSS - minifier.org
- Code Optimization Tools - codebeautify.org
Minifyされたコードなどをきれいな形になおしてくれるツール、修正後に再度Minifyもできる
コードを比較するツール:
- Code Diff Checker - www.diffchecker.com
オンラインでやる必要ないと思うけど・・・
コードをコンパイルするツール:
ES6+ & JSX Compiler - babeljs.io
babelをしてくれる。ES6の読み方がわからない時にお世話になっております
Sass Converter - www.sassmeister.com
SassをCSSにリアルタイムで変換してくれるツール
業務ではお世話になっていないが人のソースを読んでいる時に使う
Less Converter & More - http://www.webtoolkitonline.com
LESSをCSSに変換してくるツール
業務ではお世話になっていないが人のソースを読んでいる時に使うJade Converter - www.html2jade.org node.jsのexpressのテンプレートエンジンを作る時に使う 業務では１回しか使ったことがない。
UMLダイヤグラムやフロチャート作成ツール:
Markdown Editor - stackedit.io
MarkdownならVScodeでいいよな気がするがUMLダイヤグラムとか作るときに使う。業務ではめったにない。
Draws simple SVG - http://flowchart.js.org/flowchart.js.org
リアルタイムでフロチャートを作成してくれるツール
日本語もいける
- diagrams - https://bramp.github.io/js-sequence-diagrams/bramp.github.io
リアルタイムでUMLシーケンシャルダイヤグラムを作成してくれるツール
日本語もいける
使い方は以下が詳しい qiita.com
画像を小さくするツール:
- Compress All Images - compressor.io
- Compress JPG - http://jpeg-optimizer.com/
横のサイズを指定する形式 - Compress PNG and JPG - tinypng.com
tinypngが一番使いやすい
APIが提供されていて、500画像 /月まで無料
それ以降は１枚につき0.009ドル
HTML・CSSチェックツール & 互換性チェック:
- HTMLチェッカー - validator.w3.org
- CSSチェッカー - https://jigsaw.w3.org/css-validator
- ブラウザごとの機能対応一覧 - https://caniuse.com/
- ブラウザごとの機能対応一覧(javascript) - https://kangax.github.io/compat-table/es6/
ブラウザだけでコーディングできるツール:
- Client Side Code - codepen.io
See the Pen Only CSS: 404 Rolling Box by Yusuke Nakaya (@YusukeNakaya) on CodePen.
- Client Side Code - jsfiddle.net
超ー簡単なreactなら動くっぽい - Client Side Code - http://liveweave.comliveweave.com
Server Side Code - https://repl.it
GPUが使える最強の環境 - https://colab.research.google.com/colab.research.google.com
Google先生が用意してくれた機械学習がブラウザだけでできるサイト
これが無料とか意味がわからない- ソースの共有（１ファイル系） - gist.github.com
はてなブログのサイドバーにあるぐらい有名なファイル共有サイト
共有例 ↓
色見本 & デザイン:
- Create Color Schemes - color.hailpixel.com
- Get Color Schemes of Websites - stylifyme.com
- Create Gradients - uigradients.com
- CSS Button Generator - http://css3buttongenerator.comcss3buttongenerator.com
- HTML Entity Lookup - http://entity-lookup.leftlogic.com/entity-lookup.leftlogic.com
レスポンシブテスト:
- Device Testing - www.responsinator.com
- What's My Browser Size - www.webpagefx.com
ワイヤーフレーム:
- In Browser Wireframing - app.moqups.com
- Very Basic In Browser Wireframing - wireframe.cc
スピードテスト:
- Speed & Performance Testing - tools.keycdn.com
- Pingdom Speed Test - tools.pingdom.com
