#title(オンラインコンパイラ「CodeRun」を使う) #navi(.NETプログラミング研究) #contents *オンラインコンパイラ「CodeRun」を使う [#z710bd9c] 今回は、オンラインコンパイラ（オンラインIDE)「[[CodeRun>http://coderun.com/]]」を紹介します。前回の「Compilr」と似たようなサービスかと思いきや、だいぶ違いました。 CodeRunがサポートしている言語は、C#、JavaScript、PHPです。VBは未対応です。C#では、APS.NET、WPF、Silverlightのアプリケーションを作成できます。 CodeRunを使うには、Webブラウザで「http://coderun.com/ide/」を開きます。アカウント登録をしなくても使用できます。しかしサインインしないと作成したプロジェクトを後で開いたり、既存のプロジェクトをアップロードしたりすることができませんので、アカウントを作成しておいたほうが良いでしょう。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7431995514/" title="01 by DOBON.NET, on Flickr"><img src="http://farm9.staticflickr.com/8167/7431995514_3f51f4987d.jpg" width="500" height="300" alt="01"></a>); &embed(<a href="https://www.flickr.com/photos/dobondotnet/7431995514/" title="01 by DOBON.NET, on Flickr"><img src="https://farm9.staticflickr.com/8167/7431995514_3f51f4987d.jpg" width="500" height="300" alt="01"></a>); IDEのページを開いたらまず画面上部の「CodeRun is powered by SharpKit C# to JavaScript Compiler sharpkit.net」というメッセージを、右にある「X」をクリックして閉じた方が良いでしょう。この部分に大事なメッセージが表示されますが、「CodeRun is powered ...」のメッセージが表示されたままだと文字が重なり、読みづらくなります。 **新規プロジェクトを作成する [#tb14ba8f] 新規プロジェクトを作成するには、ツールバーのNewボタンをクリックします。すると、テンプレートの一覧が表示されます。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7431995394/" title="02 by DOBON.NET, on Flickr"><img src="http://farm9.staticflickr.com/8159/7431995394_0eaa84b06a.jpg" width="500" height="300" alt="02"></a>); &embed(<a href="https://www.flickr.com/photos/dobondotnet/7431995394/" title="02 by DOBON.NET, on Flickr"><img src="https://farm9.staticflickr.com/8159/7431995394_0eaa84b06a.jpg" width="500" height="300" alt="02"></a>); C#のテンプレートには、以下のようなものが用意されています。 -SharpKit Class Library -SharpKit Interface Library -SharpKit.BrowserModel Application -SharpKit.Web Application -SharpKit.Web.UI Application -Silverlight Application -Facebook Connect Application -Facebook Web Application -ASP.NET Ajax V3.5 Application -ASP.NET MVC Web Application -ASP.NET Web Application -ASP.NET Web Service Application -ASP.NET Web Site -Class Library -WPF Browser Application また、ここでプロジェクトの名前、ソリューションの名前を指定します。さらに、ブラウザがIEの時は「Create New Solution」の設定にチェックが入ったまま変更ができませんが、FirefoxやChromeでは変更できます。 ここではとりあえず「ASP.NET Web Application」のテンプレートを選択し、プロジェクトとソリューションの名前を「ASPNETWebApplication」（デフォルトのまま）として新しいプロジェクトを作成しました。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7431995654/" title="03 by DOBON.NET, on Flickr"><img src="http://farm6.staticflickr.com/5036/7431995654_8330046979.jpg" width="500" height="300" alt="03"></a>); &embed(<a href="https://www.flickr.com/photos/dobondotnet/7431995654/" title="03 by DOBON.NET, on Flickr"><img src="https://farm6.staticflickr.com/5036/7431995654_8330046979.jpg" width="500" height="300" alt="03"></a>); 作成された直後のプロジェクトには、「Default.aspx」、「Default.aspx.cs」、「Default.aspx.designer.cs」、「Web.config」、「AssemblyInfo.cs」といったファイルが含まれています。Visual Studio 2008の「ASP.NET Web アプリケーション」のテンプレートと同じファイル構成です。 「Default.aspx」には、はじめからラベルコントロール「Label1」とボタンコントロール「Button1」が配置されています。 **実行する [#u2b4ca84] 早速実行させてみましょう。ツールバーにあるRunボタンで実行させることができます。 すると、新しいウィンドウ（タブ）が開き、「Preparing Application...」と表示された後しばらくすると、Default.aspxが開きます。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7431995896/" title="04 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7116/7431995896_820ea16193.jpg" width="500" height="300" alt="04"></a>); &embed(<a href="https://www.flickr.com/photos/dobondotnet/7431995896/" title="04 by DOBON.NET, on Flickr"><img src="https://farm8.staticflickr.com/7116/7431995896_820ea16193.jpg" width="500" height="300" alt="04"></a>); IDE画面に戻って画面右側のCodeタブのRefreshボタンをクリックすると、新しく「bin」と「obj」フォルダが作成されていることが分かります。binフォルダには「ASPNETWebApplication.dll」と「ASPNETWebApplication.pdb」ファイルが作成されています。objフォルダにはDebugフォルダが作成され、その中に「ASPNETWebApplication.dll」と「ASPNETWebApplication.pdb」と「ASPNETWebApplication.csproj.FileListAbsolute.txt」が作成されています。 **自動補完機能を使ってコードを入力する [#mdcd0c20] CodeRunのコードエディタには、IntelliSenseのような自動補完機能があります。 例えばコードエディタで「labe」とタイプして、「Ctrl+Space」キーを押します。すると、「Loading...」と表示された後、補完候補のリストが表示されます。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7431995798/" title="05 by DOBON.NET, on Flickr"><img src="http://farm9.staticflickr.com/8143/7431995798_eedf27331a.jpg" width="500" height="300" alt="05"></a>); &embed(<a href="https://www.flickr.com/photos/dobondotnet/7431995798/" title="05 by DOBON.NET, on Flickr"><img src="https://farm9.staticflickr.com/8143/7431995798_eedf27331a.jpg" width="500" height="300" alt="05"></a>); 表示直後はリストで「Label」が選択されており、その右側にLabelコントロールの説明がツールチップで表示されます。矢印キーで入力したい候補を選択し、Enterキーを押すと、確定することができます。または、マウスでクリックして確定することもできます。ここではまず「Label1」と入力します。 「Label1」の後で「.」（ピリオド）を入力すると、ブラウザがFirefoxやChromeであれば、自動的にLabelコントロールのメンバのリストが表示されます。IEの場合は自動的には表示されませんが、「Ctrl+Space」キーを押すことで表示できます。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7431996066/" title="06 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7111/7431996066_f4d72de6de.jpg" width="500" height="300" alt="06"></a>); &embed(<a href="https://www.flickr.com/photos/dobondotnet/7431996066/" title="06 by DOBON.NET, on Flickr"><img src="https://farm8.staticflickr.com/7111/7431996066_f4d72de6de.jpg" width="500" height="300" alt="06"></a>); **デバッグ機能を使用する [#o5ebe887] CodeRunには、デバッグ機能もあります。 コードエディタの左端をクリックすると、赤い印が付き、ブレークポイントを設定できます。ただ、Chromeではクリックした行とは別の行にブレークポイントが設定されてしまうことが何度もありました。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7431996260/" title="07 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7273/7431996260_4b5162c395.jpg" width="500" height="300" alt="07"></a>); &embed(<a href="https://www.flickr.com/photos/dobondotnet/7431996260/" title="07 by DOBON.NET, on Flickr"><img src="https://farm8.staticflickr.com/7273/7431996260_4b5162c395.jpg" width="500" height="300" alt="07"></a>); ツールバーの「Debug」ボタンをクリックすることで、デバッグを開始できます。デバッグを開始すると、初回はメッセージボックスが出て「Debugging is not enabled on this website. Would you like to enable it now ?」と表示されます。「OK」をクリックすると別ウィンドウが表示され、「Preparing Application...」と表示されます。しばらくすると（時間がかかります）Default.aspxが表示され、ブレークポイントで停止します。 この時コードエディタを見ると、現在の行の背景が黄色になっています。ツールバーには「Step Into」、「Step Over」、「Step Out」ボタンがあり、これで「ステップイン」、「ステップオーバー」、「ステップアウト」を行うことができます。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7431996380/" title="08 by DOBON.NET, on Flickr"><img src="http://farm6.staticflickr.com/5239/7431996380_372dd5abdc.jpg" width="500" height="300" alt="08"></a>); &embed(<a href="https://www.flickr.com/photos/dobondotnet/7431996380/" title="08 by DOBON.NET, on Flickr"><img src="https://farm6.staticflickr.com/5239/7431996380_372dd5abdc.jpg" width="500" height="300" alt="08"></a>); コードエディタの下にある「Call Stack」タブには、呼び出し履歴が表示されます。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7431996526/" title="09 by DOBON.NET, on Flickr"><img src="http://farm6.staticflickr.com/5330/7431996526_82c3866f8b.jpg" width="500" height="300" alt="09"></a>); &embed(<a href="https://www.flickr.com/photos/dobondotnet/7431996526/" title="09 by DOBON.NET, on Flickr"><img src="https://farm6.staticflickr.com/5330/7431996526_82c3866f8b.jpg" width="500" height="300" alt="09"></a>); 「Watch」タブには、ウォッチ式を追加することができます。「Watch」タブにある「Add」ボタンをクリックすると、「Add Watch」ダイアログが表示されます。「Expression」に追加したいウォッチ式を入力し、「OK」をクリックします。するとそのウォッチ式がリストに追加されて、現在の値と型が表示されます。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7431995248/" title="10 by DOBON.NET, on Flickr"><img src="http://farm6.staticflickr.com/5455/7431995248_619d6ae464.jpg" width="500" height="300" alt="10"></a>); &embed(<a href="https://www.flickr.com/photos/dobondotnet/7431995248/" title="10 by DOBON.NET, on Flickr"><img src="https://farm6.staticflickr.com/5455/7431995248_619d6ae464.jpg" width="500" height="300" alt="10"></a>); このようにCodeRunには便利なデバッグ機能がありますが、私が試した限りでは、ほとんどの場合「Preparing Application...」がいつまでも表示され、デバッグを開始できませんでした。 **プロジェクトをダウンロードする [#m3d6a543] ツールバーのDownloadボタンをクリックすると、プロジェクトをダウンロードすることができます。ダウンロードされるのはZIPファイルで、その中にプロジェクトのファイルが入っています。slnとcsprojファイルも入っていますので、ダウンロードしたプロジェクトをVisual Studioで開くことができます。slnファイルのフォーマットバージョンは10.00ですので、Visual Studio 2008以降で開くことができます。 **プロジェクトをアップロードする [#l426012c] ツールバーのUploadボタンをクリックすると、プロジェクトをアップロードすることができます。アップロードできるのはZIPファイルのみで、プロジェクトをZIPファイルに圧縮してアップロードします。 Uploadボタンはサインインしないと有効になりませんので、アップロードにはユーザー登録が必要です。 Visual Studio 2010で作成したASP.NET Web アプリケーションのプロジェクトをアップロードしてみたところ、エラーになりました。Visual Studio 2008で作成したASP.NET Web アプリケーションのプロジェクトは問題なくアップロードに成功しました。 **リロードすると消える [#e36dad04] CodeRunのIDE画面は、F5キーを押してブラウザをリロードすると初期状態に戻ってしまいます。つまり、開いていたプロジェクトが消えます。サインインしている場合はセーブしているプロジェクトをOpenボタンで開くことができますが、サインインしていない場合は消えたプロジェクトを復活させる方法が多分ないです。よって、絶対リロードしてはいけません。 ただたまにCodeRunの機能が動かなくなり、メッセージでリロードを促されることがあります。そのため、できればサインインして、頻繁にセーブした方がよさそうです。 **コメント [#b1ee6d60] #comment //これより下は編集しないでください #pageinfo([[:Category/.NET]] [[:Category/ASP.NET]],2012-06-25 (月) 01:24:42,DOBON!,2012-06-25 (月) 01:24:42,DOBON!) |
Site admin: DOBON!
PukiWiki 1.5.0 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.6.40. HTML convert time: 0.002 sec.