サンプルデータを手軽に作成出来るオンラインツール・「generatedata.com」 generatedata.com generatedata.comは名前や住所等のデータのサンプルを生成してくれるオンラインツールです。HTMLのテーブルやリストなどのテストに役立ちそうですね。データのタイプもかなり豊富に揃えられてい...2013.10.15 | 9時44分03秒
HTML5のフォーム要素のデフォルト表示を確認出来る・「Native form elements」 Native form elements Native form elementsはHTML5のフォーム要素のデフォルト表示がブラウザでどのように見えるかを確認出来るWebサイトです。各エレメントの表示確認を手軽に行えるようになってい...2013.10.04 | 13時29分11秒
スマフォアプリのUIでクールなデザインを集めたギャラリー・「Inspired UI」 Inspired UI Inspired UIはiOSやAndroidのアプリでクールなUIのデザインを集めたWebサイトです。Tumblrで作ってるみたいですがリブログは出来ないようにしてるみたいですね。かなりの数を揃えているようで...2013.08.27 | 10時24分40秒
任意のWebページにWebフォントを使った状態で表示確認できる・「TypeWonder」 TypeWonder TypeWonderは任意のWebページで、Webフォントを使用した状態の表示確認が出来るツール。URLを指定し、Webフォントを選択すると、そのWebフォントを使った状態でWebサイトが表示されます。確認はして...2013.08.09 | 10時40分58秒
Google Web Fontのフォントの差分を確認出来る・「Tiff」 Tiff TiffはGoogle Web Fontでホスティングされているフォントを2つ指定して差分を確認出来るツールです。フォント名を入力し、任意のテキストを入力すれば文字同士が重なって表示されます。表示された文字はクリック...2013.07.17 | 13時00分31秒
別のブラウザで表示確認する際、URLのコピペを不要にするブックマークレット・「Catapulty」 Catapulty Catapultyは、別のブラウザで表示確認をしたい時にURLのコピペを不要にするブックマークレットです。閲覧中のページでThrowを起動し、別のブラウザでHitを起動させればThrowを起動したページが表示されま...2013.07.04 | 11時35分34秒
レスポンシブWebデザインの表示確認ツール・「Demonstrating Responsive Design」 Demonstrating Responsive Design Demonstrating Responsive DesignはレスポンシブWebデザインのデバイス別の表示を確認出来るツールです。URLを入力すればフレーム内に表示され...2013.06.15 | 11時17分01秒
BootstrapなどのフレームワークもサポートのWin/Mac対応オーサリングソフトウェア・「Pingendo」 Pingendo 各種フレームワークがビルトインされたオーサリングツール・Pingendoです。日本語も問題なし。Windows版とMac版が用意されています。使ってみた感じ、割と使いやすい印象でした。今だけかもしれませんが無料で利用...2013.06.01 | 12時06分51秒
タッチイベントをPCサイトで動作テストできるようにするブックマークレット・「Phantom Limb」 Phantom Limb Phantom Limbはデスクトップブラウザでタッチデバイス向けのイベントを動作テストできるブックマークレットです。任意のページでブックマークレットを起動するとクリックでタッチイベントが発火するようになりま...2013.05.11 | 9時38分49秒
JavaScript、HTML,CSSを書いてその場で動作確認出来る環境を作れるOSS・「Editr」 Editr Editrは、ブラウザでJavaScriptやHTML、CSSを動作確認出来るオープンソースのソフトウェアです。jsfiddleライクな環境を作成出来ますが、ユーザー登録、保存、Gist等に送るなどの機能の無い、シンプルな...2013.04.30 | 10時33分32秒
Webページのベースラインをチェック出来るブックマークレット・「Gridwax」 Gridwax GridwaxはWebページのベースラインをチェック出来るブックマークレットです。起動させると、ラインが表示されます。グリッドの高さはshift+↑や↓で、位置はshift+→や←で調整できます。グリッドの色は起動後に...2013.04.23 | 10時42分48秒
正規表現をブラウザ上で実行テスト・「refiddle」 refiddle refiddleはWeb上で正規表現をテストできるツールです。jsfiddleライクに正規表現を試すことが出来ます。上にコード、下にテキストを書いて、マッチした部分がハイライトされる仕組み。 refiddle2013.04.17 | 12時35分04秒
Webサイトのスクリーンショットを撮って注釈をつけて共有できる・「Bounce」 Bounce BounceはWebサイトのスクショを撮って、任意の箇所に注釈をつけてシェア出来るツールです。Web上の相手に的確に場所を伝えるのに便利そうですね。 Bounce2013.04.14 | 11時44分21秒
CSSを書いてリアルタイムでプレビューできる・「CSSDesk」 CSSDesk CSSDeskはその場でCSSを書くと、すぐに結果が反映されるインタラクティブなWebツールです。背景の変更や書いたコードをHTMLでダウンロードする事も可能。 CSSDesk2013.04.12 | 12時37分00秒
Webページの任意の箇所をハイライトして共有できる・「inFocus.cc」 inFocus.cc inFocus.ccは特定のWebページの任意の箇所をハイライトさせて共有できるWebツールです。画像として保存されるものではなく、マウスで設定して保存するとURLが発行される、というもの。特定の箇所をシンプルに...2013.04.01 | 10時44分29秒
transition-timing-functionのcubic-bezier関数を動作を見ながら設定出来る・「Visualize and manipulate CSS transition functions」 Visualize and manipulate CSS transition functions Visualize and manipulate CSS transition functionsはCSS3のtransition-t...2013.03.18 | 9時48分18秒
デバイス画像のモニターにサイトを表示させてレスポンシブ対応状態を確認する・「Am I Responsive?」 Am I Responsive? Am I Responsive?は、レスポンシブWebデザイン対応かどうかを確認するチェックツールです。デバイス画像のモニター部分はフレームの為、URLを指定すると上図のデバイス画像内に実際にサイトが...2013.03.17 | 19時32分46秒
JavaScriptコードをブラウザ上で動作テスト、共有できる・「Plunker」 Plunker Plunkerはjsfiddleやjsbinのようにブラウザ上でJavaScriptコードを開発、実行し、共有もできるWebツールです。アーカイブもあるので探しやすい印象です。書いたコードは即時反映されます。また、Gi...2013.03.13 | 9時40分21秒
CSSの更新状態を監視し、表示を即時反映させる・「CSSrefresh」 CSSrefresh CSSrefreshはサーバー側のCSSに更新があったら表示を即時反映させるスクリプトとブックマークレットです。開発者向けになります。環境次第では楽になる方もいるかもしれませんね。 CSSrefresh2013.03.01 | 13時46分00秒
レスポンシブWebデザイン対応確認用ブックマークレット・「VIEWPORT RESIZER」 VIEWPORT RESIZER VIEWPORT RESIZERは、閲覧中のWebサイトをリサイズしてレスポンシブWebデザイン対応状態を表示確認するブックマークレットです。PCと、タブレットやスマフォサイズに対応。 VIEW...2013.02.26 | 16時56分02秒
レスポンシブWebデザインのレイアウトチェックツール・「The Responsinator」 The Responsinator The Responsinatorは、レスポンシブWebデザインの表示テストを行えるツールです。縦長になってしまうのですが、まとめて表示確認出来るのは便利だと思います。 The Respons...2013.02.21 | 22時14分17秒
画面サイズごとの表示を確認出来る・「Screenqueri.es」 Screenqueri.es Screenqueri.esはレスポンシブWebデザインの表示確認ツール。iPhone、iPadやAndroidのような人気デバイスに限らず、GalaxyやBlackBerry、Kindleなど様々なデバ...2013.02.21 | 19時57分04秒