#title(オンラインコンパイラ「Compilr」を使う) #navi(.NETプログラミング研究) #contents *オンラインコンパイラ「Compilr」を使う [#p8d8f16b] **オンラインコンパイラとは？ [#w8f5b997] 「オンラインコンパイラ」と呼ばれるサービスがあります。これは、Webブラウザを使ってオンラインでソースコードをコンパイルしたり、実行できるサービスです。さらには、オンラインIDE（統合開発環境）をうたったサービスも登場しています。 C#やVB.NETに対応したオンラインコンパイラを探してみたところ、結構見つかりました。そこで今回はその内「[[Compilr>http://compilr.com/]]」を紹介させていただきます。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7374907684/" title="01 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7233/7374907684_6962e249f4.jpg" width="500" height="300" alt="01"></a>); **アカウントを作成する [#ya104537] Compilrを使用するには、アカウントを作成する必要があります。アカウントを作成するには、メールアドレスと、ユーザー名、パスワードが必要です。これらを入力してアカウントを作成すれば、すぐに使用可能になります。 **新しいプロジェクトを作成する [#m6d16ffc] アカウントの作成に成功すると、「Create New Project」と「Explore Projects」の2つのボタンがあるページが表示されます。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7189666233/" title="02 by DOBON.NET, on Flickr"><img src="http://farm9.staticflickr.com/8004/7189666233_3147d61bcd.jpg" width="500" height="300" alt="02"></a>); 「Explore Projects」をクリック（あるいは、メニューの[Explore]をクリック）すると、Compilrで公開されている様々なプロジェクトの一覧を見ることができます。ここでプロジェクトを選択すると、そのプロジェクトを開いて閲覧することができます。ただし自分のプロジェクト以外は編集することができません。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7189665975/" title="03 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7074/7189665975_db016875a2.jpg" width="500" height="300" alt="03"></a>); 「Create New Project」をクリック（あるいは、メニューの[File]-[New Project]を選択）すると、新しいプロジェクトを作成するウィザードが開始されます。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7374908026/" title="04 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7229/7374908026_54a0aecddb.jpg" width="500" height="300" alt="04"></a>); まず「Programming language」でプログラミング言語を選択します。.NET関係では、C#とVBがあります。それ以外には、C、C++、Java、JavaScript、Pascal、PHP、Python、Rubyがあります。ここではC#を選んでみます。 次に「Language platform」を選択します。言語にC#かVBを選んだ場合は、ここで「.NET 2.0」、「.NET 3.5」、「.NET 4.0」、「XNA 4.0 Windows」のいずれかを選択できます。ここでは「.NET 4.0」を選択してみました。 次に「Project template」を選択します。「Language platform」で「.NET」を選択した場合は、ここで「Console Application」か「Windows Forms Application」を選択できます。「XNA 4.0 Windows」の場合は、「Windows 3D Game」か「Windows Empty Game」を選択できます。ここはとりあえず「Console Application」を試してみましょう。 「Next」ボタンをクリックすると、次のページに移動します。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7374907860/" title="05 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7083/7374907860_ecf528e14f.jpg" width="500" height="300" alt="05"></a>); 「Project name」には、プロジェクトの名前を入力します。日本語は文字化けしますので、使わないほうがよさそうです。プロジェクトの名前を入力すると、その名前によって「Project URL」が自動的に決まります。ここではプロジェクト名を「C# Console Application1」にしました。するとプロジェクトURLは「http://compilr.com/(アカウント名)/c-sharp-console-application1」になりました。公開されたプロジェクトの場合は、このURLのページから誰でもプロジェクトの閲覧や実行ができます。 次に「Project type」を「Private」か「Public」のどちらかから選択します。「Public」にした場合はプロジェクトが公開されます。公開したくないならば「Private」にします。しかし無料では「Public」しか選択できません。「Private」を選択するためには、アカウントのアップグレードが必要です。 次に「Project category」でプロジェクトのカテゴリを選択します。これはオプションですので、選択しなくても構いません。 「Next」をクリックすると、次のページに移動します。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7189666597/" title="06 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7216/7189666597_7762ac17d9.jpg" width="500" height="300" alt="06"></a>); 最後に「Project description」にプロジェクトの説明を入力できますが、しなくても大丈夫です。 「Finish」をクリックすれば、プロジェクトが作成されます。 **画面構成を観察する [#rbcb6413] 新しいプロジェクトを作成した直後の画面は以下のようになります。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7189666651/" title="07 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7215/7189666651_b097ee9191.jpg" width="500" height="300" alt="07"></a>); 左側にコードエディタのペイン、右側にプロジェクトに追加されているファイルを表示するペインがあります。 コードエディタはタブで複数のコードを開くことができます。エディタの左側には行番号が付いています。コードはシンタックスハイライトで色付けされています。コードを入力して改行すると、自動でインデントされます（VBではされませんでした）。しかし、IntelliSenseや自動でメンバを表示する機能のような高度な機能はありません。 画面の一番上にはメニューが、その下にはツールバーがあります。 さらに、状況によって、コードエディタの下にConsoleとErrorsタブが表示されます。 **プロジェクトを実行する [#h8f74f61] プロジェクトが作成された直後のコードは、次のようになっています。 #code(csharp){{ using System; namespace SampleNamespace { public class SampleClass { public static void Main() { // Write hello world to the console System.Console.WriteLine("Hello World!"); } // End of Main function (program statup) } // End of SampleClass } // End of SampleNamespace }} 早速実行させてみましょう。実行させるには、ツールバーにある三角のボタンをクリックするか、メニューで[Bulid]-[Run]を選択します。するとコードエディタの下に「Console」が現れ、以下のように表示されます。 #prescroll(wrap=true){{ Note: You can also start your application by typing 'start' followed by any command line arguments. Starting application... Starting... Application Started... Checking Libraries... Fetching References... Copying files... Processing Files... Compiling... Build Success ------------------------------ Hello World! Application Exited. }} 「Compiling」に多少の時間がかかりますが、無事に「Hello World!」が表示されました。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7374908296/" title="08 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7220/7374908296_7a47a55b06.jpg" width="500" height="300" alt="08"></a>); **プロジェクトをビルドし、ダウンロードする [#u4994fb5] 次にプロジェクトをビルドしてみましょう。Runボタンの左にある金槌のボタン（または、メニューの[Build]-[Build]）でビルドできます。 ビルドを開始すると、「Building Project...」という画面が表示されます。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7374908386/" title="09 by DOBON.NET, on Flickr"><img src="http://farm9.staticflickr.com/8156/7374908386_23e3fe3279.jpg" width="500" height="300" alt="09"></a>); しばらくしてビルドに成功すると、ダウンロードできるようになります。「Download」ボタンをクリックするとZIPファイルをダウンロードできます。このZIPファイルの中に「app.exe」というファイルが入っています。これがビルドされてできた実行ファイルです。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7189666825/" title="10 by DOBON.NET, on Flickr"><img src="http://farm6.staticflickr.com/5336/7189666825_2a71fc98fe.jpg" width="500" height="300" alt="10"></a>); **エラーを発生させてみる [#u914a1ed] 以下の様な間違のあるコードを実行してみました。 #code(csharp){{ using System; namespace SampleNamespace { public class SampleClass { public static void Main() { System.Console.WriteLine(Hello); } // End of Main function (program statup) } // End of SampleClass } // End of SampleNamespace }} すると、「Errors」タブがコードエディタの下に現れ、エラーが発生したファイル、行、列、説明が表示されました。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7380453476/" title="18 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7242/7380453476_d1316232d3.jpg" width="500" height="300" alt="18"></a>); **ユーザー入力ができるか試してみる [#f08dbf68] Console.ReadLineを使用できるか、以下の様なコードで試してみました。 #code(csharp){{ using System; namespace SampleNamespace { public class SampleClass { public static void Main() { string s = Console.ReadLine(); System.Console.WriteLine("入力された文字列は「" + s + "」です"); } // End of Main function (program statup) } // End of SampleClass } // End of SampleNamespace }} すると、「Console」で「------------------------------」が表示された後、入力待ちになりました。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7189666867/" title="11 by DOBON.NET, on Flickr"><img src="http://farm6.staticflickr.com/5343/7189666867_95672409e4.jpg" width="500" height="300" alt="11"></a>); ここで「hello」と入力してエンターキーを押すと、以下のように表示されました。 #prescroll(wrap=true){{ ????????????????????????????????????????????????????????????hello?????????????????? }} Console.ReadLineによるユーザーの入力は成功しました。しかし、日本語が文字化けしました。ブラウザ上だけでなく、ビルドしたEXEファイルをダウンロードして実行しても文字化けしました。 ユーザー入力の状態を放置すると、しばらくして「Session Time Out」となり終了します。20秒以内に入力しないといけないようです。 **ファイルへの書き込みと読み込みができるか試してみる [#g7c8a541] ファイルへの書き込み、読み込みができるか、以下の様なコードで試してみました。 #code(csharp){{ using System; namespace SampleNamespace { public class SampleClass { public static void Main() { System.IO.File.WriteAllText("hello.txt", "hello!"); string s = System.IO.File.ReadAllText("hello.txt"); Console.WriteLine(s); string path = System.IO.Directory.GetCurrentDirectory(); string[] files = System.IO.Directory.GetFiles(path); Console.WriteLine(string.Join("\n", files)); } // End of Main function (program statup) } // End of SampleClass } // End of SampleNamespace }} するとConsoleに #prescroll(wrap=true){{ hello! /root/bin/app.exe /root/bin/hello.txt }} と表示され、ファイルへの書き込みと読み込みができたことが分かりました。ただし作成されたファイルはプロジェクトを実行した時に削除されるようなので、永続的に保存はできません。 **「start」で実行する [#acfa0893] コードを実行すると、Consoleの先頭に「Note」として、「startとタイプしても実行できる」というようなことが書かれています。実際にConsoleに「start」と入力してエンターキーを押してみると、「Run」ボタンを押した時と同じように実行させることができました。 さらにこの方法ならコマンドライン引数も指定できるようなことが書かれているので、試してみました。コードを以下のように書き換えて、コマンドライン引数を表示するようにしました。 #code(csharp){{ using System; namespace SampleNamespace { public class SampleClass { public static void Main(string[] args) { System.Console.WriteLine(string.Join(", ", args)); } // End of Main function (program statup) } // End of SampleClass } // End of SampleNamespace }} そしてConsoleに「start /a /b /c」と入力し、エンターキーを押してみました。結果は以下の通りで、残念ながらコマンドライン引数は取得できませんでした。 #prescroll(wrap=true){{ start /a /b /c Starting application with args: [/a, /b, /c] Starting... Application Started... Deleting old files... Checking Libraries... Fetching References... Copying files... Processing Files... Compiling... Build Success ------------------------------ Application Exited. }} Environment.GetCommandLineArgsメソッドも試してみましたが、やはりコマンドライン引数を取得することはできませんでした。 **参照を追加する [#d0dd1746] デフォルトでは参照に「System」と「System.Data」と「Syatem.Xml」が追加されています。参照を変更（追加あるいは削除）するには、「Projects」タブで「References」フォルダを右クリックしてメニューを表示し、「Edit」を選択します。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7189666921/" title="12 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7217/7189666921_979d0d1a2c.jpg" width="500" height="300" alt="12"></a>); すると「Edit References」というウィンドウが表示され、追加できる参照の一覧が表示されます。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7189666997/" title="13 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7088/7189666997_582f687581.jpg" width="500" height="300" alt="13"></a>); このリストで選択状態になっている（白地に黒文字の）項目が現在プロジェクトに追加されている参照です。項目をクリックすることで選択状態を変えられますので、必要な参照だけを選択状態にしてから「Save」ボタンをクリックすれば、それがプロジェクトに反映されます。 なお追加できる参照は以下の通りです。 -Accessibility -CustomMarshalers -Microsoft.CSharp -Microsoft.VisualBasic -Microsoft.VisualC -System.ComponentModel.Composition -System.ComponentModel.DataAnnotations -System.Configuration.Install -System.Core -System.Data.DataSetExtensions -System.Data -System.Data.Linq -System.DirectoryServices -System -System.Drawing -System.EnterpriseServices -System.IdentityModel -System.IdentityModel.Selectors -System.Management -System.Messaging -System.Numerics -System.Runtime.DurableInstancing -System.Runtime.Remoting -System.Runtime.Serialization -System.Runtime.Serialization.Formatters.Soap -System.Security -System.ServiceModel.Discovery -System.ServiceModel -System.ServiceModel.Routing -System.ServiceProcess -System.Transactions -System.Web.ApplicationServices -System.Web.Services -System.Windows.Forms.DataVisualization -System.Windows.Forms -System.Xaml -System.Xml -System.Xml.Linq -WindowsBase **ライブラリを追加してみる [#t901d578] 「Projects」タブには、「Libraries」というフォルダもあります。これを右クリックするとメニューに「Upload Libraries」という項目が現れます。これでDLLをアップロードできるのかな？ということで、実際にやってみました。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7374908712/" title="14 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7088/7374908712_58bfc1850c.jpg" width="500" height="300" alt="14"></a>); 「Upload Libraries」を選択すると、「Import Files」というウィンドウが表示されます。ここで「Upload Files」ボタンをクリックすることで、アップロードするファイルを選択できます。ここで自分で作成した「ClassLibrary1.dll」というライブラリを選択してみました。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7189667127/" title="15 by DOBON.NET, on Flickr"><img src="http://farm9.staticflickr.com/8165/7189667127_07ebf10f46.jpg" width="500" height="300" alt="15"></a>); するとなぜかファイルをダウンロードするかブラウザから聞かれます。よくわからないのでとりあえずダウンロードしてみましたが、ファイルの中身はアップロードしたファイル名が書かれたテキストだけでした。なおダウンロードしなくてもアップロードされるようです。 その後「Import Files」ウィンドウを閉じても、Librariesフォルダには何も表示されません。しかしF5キーを押してブラウザのページを更新すると、Librariesフォルダに「ClassLibrary1.dll」が表示されました。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7374907482/" title="16 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7079/7374907482_2bdb49765f.jpg" width="500" height="300" alt="16"></a>); 無事に「ClassLibrary1.dll」を追加できたようなので、このライブラリを使ったコードを書いて実行してみました。しかし、残念ながらエラーが発生し、うまく行きませんでした。 **ファイルを追加する [#b21ccd62] ライブラリの追加には失敗しましたが、今度はcsファイルの追加に挑戦してみます。 メニューの[File]-[Import]を選択すると、ライブラリのアップロードと同じ「Import Files」ダイアログが現れます。ここでアップロード先のフォルダを選択して、「Upload Files」ボタンをクリックすると、ファイルをアップロードすることができます。ここでは、ルートのフォルダを選択して、「Class1.cs」というファイルをアップロードしてみました。すると先ほどと同じように、なぜかファイルをダウンロードするか聞かれます。また、「Import Files」ダイアログを閉じても「Projects」にはアップロードしたファイルが表示されませんが、ページを更新すると表示されます。 アップロードしたファイルはCompilrで開いて編集することもできます。 結果的に新しいファイルを作成してコピペするのと変わらないようですが、大量のファイルをアップロードしたい時に重宝しそうな機能です。 **プロジェクトをダウンロードする [#ia838d6f] メニューの[File]-[Export]によって、プロジェクトに追加されているファイルをダウンロードすることができます。ダウンロードされるファイルはZIPで、その中にファイルが入っています。 **プロジェクトの設定を変更する [#z06e6658] メニューで[View]-[Settings]を選択（あるいは、「Projects」タブでプロジェクトを右クリックしてコンテキストメニューを表示し、[Settings]を選択）して、プロジェクトの設定を変更できます。変更できる設定は、「Description」、「Project Type」、「Deployment Platform」、「Compile As」、「Main Class」です。 &embed(<a href="http://www.flickr.com/photos/dobondotnet/7375017142/" title="17 by DOBON.NET, on Flickr"><img src="http://farm8.staticflickr.com/7075/7375017142_af2279bd31.jpg" width="500" height="300" alt="17"></a>); 「Deployment Platform」は、プロジェクト作成時の設定「Language platform」と同じです。「Compile As」は「Project template」と同じですが、「Windows Application」と「Console Application」の他に「Library」を選択できます。ということはライブラリも作成できるのかと思い試してみましたが、ビルドしてできたファイルは「app.exe」でした。 「Main Class」には、メインとなるクラスを名前空間付きで入力できます。 **Windows Application、XNA 4.0 Windowsのプロジェクトを作成してみる [#j135ab11] 「Console Application」以外のプロジェクトも作成してみました。 「Windows Forms Application」のプロジェクトには、csファイルが2つ作成されます。1つはエントリポイントを持つメインクラスで、もう1つはフォームクラスです。フォームデザイナはありませんので、コントロールの追加などは自分でコードを書く必要があります。ビルドはできますが、オンラインで実行しようとするとエラーが発生します。 「XNA 4.0 Windows」の「Windows 3D Game」で作成されるプロジェクトは、[[追尾カメラサンプル>http://create.msdn.com/en-US/education/catalog/sample/chasecamera]]を元にしたもののようです。ビルドはできますが、オンラインで実行はできません。XNAのプロジェクトでは設定に「XNA Profile」が加わり、「Reach」か「HiDef」かを選択できます。 **最後に [#ja8ea222] Compilrでできることは限られていますが、アイデア次第では面白いことができるかもしれません。ただ、日本語が使えないのは残念です。 次回は別のオンラインコンパイラを試してみたいと思います。 **コメント [#r08881b2] #comment //これより下は編集しないでください #pageinfo([[:Category/.NET]] [[:Category/ASP.NET]],2012-06-18 (月) 04:35:10,DOBON!,2012-06-18 (月) 04:35:10,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.009 sec.