個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

ブラウザでプログラミング!ブラウザでコードが書けて実行・確認できるサービス14

ブラウザがあればOK!コードを即実行・確認できるツール

ブラウザでコードが書けて実行・確認できるサービスをご紹介します。
サイトを実際に公開する前にテストするのは当然ですのことですが、できれば手早く、お金を掛けずに、サッサとテストして確認作業を済ませてしまいたいところ。
そんなときに便利なのがブラウザ上でコードをテストできるサービスです。
多くはコードを共有できるサービスとしても有名ですが、テスト環境としてはとっても便利なので、利用しない手はないでしょう。
またコードを勉強する側にとっても、とくに準備することなく即勉強を進められるのでオススメです。

paiza.IO

ブラウザでプログラミング!ブラウザでコードが書けて実行・確認できるサービス14
日本語で公開されているサービス。
対応言語はJava、C、C++、C#、Ruby、PHP、Python、Perl、JavaScriptと言ったメジャーな言語からGo言語やScala、Haskellなど24言語以上に対応。
プログラミングを練習する場合、まずつまづくのが開発環境をセットアップすることでしょう。
でも、このサービスなら、すぐに勉強したいプログラミング言語を始めることが可能です。
オンラインでプログラミングを練習したいという場合は最適のサービスです。
paiza.IO

Coding Ground

ブラウザがあればOK!コードを即実行・確認できるツール
HTML、CSS、JS、Scala、Ruby、C、Objective-C、AngularJS、jQueryなど、非常に幅広い言語に対応。
100以上のプログラミング言語をブラウザ上で実行させることが出来るサービスです。
以前は「CompileOnline」という名前のサービスでした。
Coding Ground

Ideone

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
人気のあるオンラインコンパイラとデバッグツール。
60以上のプログラミング言語をオンラインで実行することができます。
Ideone

Codepad

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
Webベースのコンパイラ/インタプリタ。
PHP、C++、Ruby,Perlなどのようなプログラミング言語を実行できるツールです。
Codepad

Google Code Playground

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
Googleが提供するAPIのJavaScriptサンプルの実行環境。
サンプルソースは編集することができ、編集したあとのプログラムは、そのままブラウザ上で実行することも可能です。
Google Code Playground

WriteCodeOnline

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
PHPとJSをオンライン上ですぐにテストできるツール。
WriteCodeOnline

CSSDesk

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
HTMLとCSSに絞った、シンプルなサービス。
通常のHTMLサイトだけなら、これで十分かも。
CSSDesk

JSBin

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
HTML、CSS、JSを実行できるサービス。
JSBin

jsFiddle

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
世界でももっとも人気のあるといっていいHTML、CSS、JSを実行できるサービス。
PrototypeやjQueryといった有名ライブラリも準備されています。
ライブラリを選んで、コードを書き、「Run」を押して実行。必要があれば保存します。
jsFiddle

Codepen

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
コードスニペット集として世界的に人気のサービス。
自分でも、HTML、CSS、JSを実行可能です。
Normalize.cssまたはReset.cssを選択することも可能です。
Codepen

Jsdo.it

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
HTML、CSS、JSを即実行できる日本発のサービス。
Jsdo.it

Dabblet

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
CSSとHTMLコードのスニペットを試すための「インタラクティブな遊び場」。
手軽に実行させたいときに最適です。
Dabblet

Liveweave

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
HTML、CSS、JSを実行できるサービスですが、最大の特徴はなんといってもコードヒント機能があること。
例えば、CSSでコードを入力する場合、最初の1文字を入力すれば候補が列挙されるので、うろ覚えの方にはうってつけのサービスといえるでしょう。
Liveweave

Tinkerbin

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
HTML、CSS、JSを実行できるサービス。
CoffeeScript, Sass (Compass), Less, HAMLなどもサポートしているのが特徴です。
Tinkerbin

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 2
  • 24

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

簡単・無料で利用できるこポリゴン画像生成ジェネレーターをご紹介。 背景画像などによく使われているポ

記事を読む

無料で利用できる検索フォーム12(CSS3,HTML5,jQuery)

検索フォームはサイトに欠かせない重要な要素の1つになっています。 最近では、アニメーションを用いた

記事を読む

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

CSSだけでつくられたアイコンセットのご紹介です。 近年のアイコンというと、アイコンフォントかSV

記事を読む

月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービス12

ホームページ制作を生業としているものにとっては、穏やかではないのが「無料でホームページを制作できてし

記事を読む

左右からメニューがスルッ!CSSだけで作れらたオフカンバスメニュー

左右からメニューがスルッ!CSSだけで作成されたオフカンバスメニュー6

CSSだけで作られたオフカンバスメニューをまとめてご紹介します。 「オフカンバスメニュー」は、ボタ

記事を読む

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。 リボン関連に

記事を読む

名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料!Dribble発Photoshop用サイトテンプレート

名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料!Dribble発Photoshop用サイトテンプレート45

今回もDribbbleから。 Dribbbleは世界の名だたるデザイナーが作品をアップしているコミ

記事を読む

無料のスクロール/パララックススクロール系jQueryプラグイン24

スクロール/パララックススクロールはコンテツをリッチにしてくれる魅力的な演出です。 今回はそんな魅

記事を読む

超簡単!CSSで上下左右センターにする方法

超簡単!CSSで上下左右センターにする方法

超簡単ですぐ実践できるCSSで上下左右センターにする方法をご紹介。 display:flexを使っ

記事を読む

WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」

WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」

WEBサイトの必要な部分だけを印刷したい場合に大変便利なブックマークレットをご紹介。 このブックマ

記事を読む