<%  eval(read("history.data"))  %>

<div class="row">

  <div class="col-sm-12 col-md-6">

  <div id="introduction" class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading"><h4>はじめに</h4></div>
      <div class="panel-body">
		<p align="justify">
			Ring は実用性のある汎用マルチパラダイム言語です。
			命令型、手続き型、オブジェクト指向、関数型、メタプログラミング、多重構造による宣言型プログラミング、および自然言語プログラミングのパラダイムに対応しています。
			移植性があり (Windows, Linux, macOS, Android, WebAssembly など)、コンソール, GUI, ウェブ, ゲーム, モバイルアプリケーションなどの開発ができます。
			そしてシンプル、小粒で柔軟な設計です。 					
		</p>

				
				<div class="col-sm-12">
					<a href="https://tio.run/#ring" class="btn btn-link btn-block">オンラインで体験 (Playground を開く)</a>
				</div>
				
			
		
       </div>
	
	
     </div>  
  </div>

	</div>

	  <div class="col-sm-12 col-md-6">

  <div id="news" class="panel-group">
    <div class="panel panel-info">
      <div class="panel-heading"><h4>新着情報</h4></div>
      <div class="panel-body">

			<table class="table table-striped">
				<thead>
				  <tr>
					<th width="40%"></th>
					<th></th>
				  </tr>
				</thead>
				<tbody>
				
				<% for x=1 to 3 %>
				  <tr>
					<td><%= aNews[x][1] %></td>
					<td><%= aNews[x][2] %></td>
				  </tr>
				<% next %>				 

				</tbody>
			</table>
			<div style="text-align:right;">	  
				  <a href="news.html">過去の新着情報</a>	  
			</div>
	  </div>
     </div>  
  </div>

	</div>

</div>




<br>


<a href="#innovative" class="btn btn-default" data-toggle="collapse" style="width:100%">ムチュウニなろう！</a>
  <div id="innovative" class="panel-group collapse in">
    <div class="panel panel-primary">
      <div class="panel-heading"><h4>いますぐわかる Ring のご紹介</h4></div>
      <div class="panel-body">

		<div class="row">
			<div class="col-sm-12 col-md-12">
			<p>
			Ring の宣言型と自然言語プログラミング機能は優れています。オブジェクト指向と関数型プログラミングの実用的な新技法でパラダイムに対応しています。コンパイラや構文解析などの事前知識は不要です。さらに、短時間でドメイン特化言語を作成、構築できる言語構成要素を標準装備しています。
			</p>
			
			<a id="ringarticle"  href="http://www.codeproject.com/Articles/1089887/The-Ring-Programming-Language" target="_blank" class="btn btn-default"  style="width:100%">Ring の記事</a> 
			<a id="ringarticle4" href="https://www.codeproject.com/Articles/1137388/Syntax-Flexibility-in-the-Ring-Programming-Languag" target="_blank" class="btn btn-default"  style="width:100%">シンタックスの柔軟性</a> 
			<a id="ringarticle5" href="https://www.codeproject.com/Articles/1222105/The-declarative-approach-of-the-Ring-programming-l" target="_blank" class="btn btn-default"  style="width:100%">宣言型手法</a> 
			<a id="ringarticle3" href="https://www.codeproject.com/Articles/1138605/Natural-Language-Programming-in-the-Ring-Programmi" target="_blank" class="btn btn-default"  style="width:100%">自然言語プログラミング</a> 
			<a id="ringarticle2" href="https://www.codeproject.com/Articles/1200766/Using-the-Natural-Language-Programming-Library-NLP" target="_blank" class="btn btn-default"  style="width:100%">自然言語プログラミングライブラリ</a> 
		
			
			</div>
		</div>
	  </div>
	 </div>
   </div>
 


 <a href="#practical" class="btn btn-default" data-toggle="collapse" style="width:100%">実用性</a>
  <div id="practical" class="panel-group collapse in">
    <div class="panel panel-default">
      <div class="panel-heading"><h4>ライブラリとツール</h4></div>
      <div class="panel-body">

		<div class="row">
			<div class="col-sm-12 col-md-12">
		<p>
		Ring ライブラリ (StdLib, WebLib, 自然言語ライブラリ、ゲームエンジンなど)、  
		 および Ring 統合開発環境 (Ring ノートパッド、フォームデザイナーなど) は Ring で記述されています。		
		Ring は今すぐ製品開発ができる即戦力であり、開発者の生産性を改善します。
		</p>
		<br>	

		
		
    <div class="panel panel-primary">
      <div class="panel-heading"><h4>カスタムスタイルとモダンプログラミングによるパラダイム</h4></div>
      <div class="panel-body">		

		<p>
			Ring はまるで母国語のように思えるでしょう！　多彩かつモダンなプログラミングパラダイムは
			即戦力であり自然言語プログラミングにより手早く
			自然言語のインタフェースをプログラムに統合できます。また、自然言語による説明を記述後にソフトウェアの開発を行い、
			その後に実装を追加することも可能です。
		</p>
		<p>
			
		</p>
		<br>

	  
				<div class="col-xs-12">
				  <div id="myCarousel" class="carousel slide" data-interval="false">
					<!-- Indicators -->
					<ol class="carousel-indicators">
					  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					  <li data-target="#myCarousel" data-slide-to="1"></li>
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">

					  <div class="item active">
						<img src="newringdemo1.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>

					 
					  <div class="item">
						<img src="newringdemo2.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>	  

					</div>

					<!-- Left and right controls -->
					<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
					  <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
					  <span class="sr-only">前へ</span>
					</a>
					<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
					  <span class="glyphicon glyphicon-chevron-right" aria-hidden="false"></span>
					  <span class="sr-only">次へ</span>
					</a>
					
				  </div>
				</div>
						
		
	</div>
	</div>

		

    <div class="panel panel-primary">
      <div class="panel-heading"><h4>GUI アプリケーション開発と RAD ツール</h4></div>
      <div class="panel-body">		

		<p>
			Ring により、短時間で様々な GUI アプリケーションを開発できると多くの開発者が述べています。Ring にはアプリケーション高速開発支援ツール (Rapid Application Development - RAD) が搭載されており、
			MVC デザインパターンにより GUI アプリケーションを迅速に開発できます。
			さらに、デスクトップ、ウェブ、およびモバイル機器用のアプリケーションを同じソースコードを用いて配布することも可能です。
		</p>
		<p>
			
		</p>
		<br>

	  
				<div class="col-xs-12">
				  <div id="myCarousel2" class="carousel slide" data-interval="false" >
					<!-- Indicators -->
					<ol class="carousel-indicators">
					  <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
					  <li data-target="#myCarousel2" data-slide-to="1"></li>
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">

					  <div class="item active">
						<img src="newringdemo6.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>

					  <div class="item">
						<img src="newringdemo5.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>


					</div>

					<!-- Left and right controls -->
					<a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev">
					  <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
					  <span class="sr-only">前へ</span>
					</a>
					<a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next">
					  <span class="glyphicon glyphicon-chevron-right" aria-hidden="false"></span>
					  <span class="sr-only">次へ</span>
					</a>
					
				  </div>
				</div>
						
		
	</div>
	</div>

		


    <div class="panel panel-primary">
      <div class="panel-heading"><h4>最高級のゲーム開発機能</h4></div>
      <div class="panel-body">		

		<p>			 
			世間の皆様にプログラミング学習の普及促進をするにはゲーム開発が優れた方法であると思います。
			Ring には標準ライブラリとしてゲーム開発用ライブラリを搭載しています。
			Ring は Allegro, LibSDL, RayLib, Tilengine, OpenGL および Qt3D ライブラリに標準対応しています。
			また、 Ring には宣言型プログラミングにより 2D ゲームを開発できるシンプルなゲームエンジンも搭載しています。 
		</p>
		<p>
			
		</p>
		<br>

	  
				<div class="col-xs-12">
				  <div id="myCarousel3" class="carousel slide" data-interval="false">
					<!-- Indicators -->
					<ol class="carousel-indicators">
					  <li data-target="#myCarousel3" data-slide-to="0" class="active"></li>
					  <li data-target="#myCarousel3" data-slide-to="1"></li>
					  <li data-target="#myCarousel3" data-slide-to="2"></li>
					  <li data-target="#myCarousel3" data-slide-to="3"></li>
					  <li data-target="#myCarousel3" data-slide-to="4"></li>
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">

					  <div class="item active">
						<img src="ringdemo13.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>		

					  <div class="item">
						<img src="goldmagic800.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>
					  
					  <div class="item">
						<img src="newringdemo3.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>
					  
					  <div class="item">
						<img src="snakegamecode.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>
					  
					  <div class="item">
						<img src="sokobangamecode.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>	 

				  		  

					</div>

					<!-- Left and right controls -->
					<a class="left carousel-control" href="#myCarousel3" role="button" data-slide="prev">
					  <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
					  <span class="sr-only">前へ</span>
					</a>
					<a class="right carousel-control" href="#myCarousel3" role="button" data-slide="next">
					  <span class="glyphicon glyphicon-chevron-right" aria-hidden="false"></span>
					  <span class="sr-only">次へ</span>
					</a>
					
				  </div>
				</div>
						
		
	</div>
	</div>

		

   <div class="panel panel-primary">
      <div class="panel-heading"><h4>WebAssembly (フロントエンド型のウェブ開発)</h4></div>
      <div class="panel-body">		

		<p>
			Ring で WebAssembly 形式のアプリケーションを手軽に開発できます
			 (ウェブページのサンドボックス環境で実行できるコードのバイナリ形式です。 
			この実行可能ファイル形式の動作速度はネイティブマシンのコードとほぼ同じです。
			なお、現在主流となっているウェブ・ブラウザで使用可能です)。			
		</p>
		<br>

	  
				<div class="col-xs-12">
				  <div id="myCarousel5" class="carousel slide" data-interval="false">
					<!-- Indicators -->
					<ol class="carousel-indicators">
					  <li data-target="#myCarousel5" data-slide-to="0" class="active"></li>
					  <li data-target="#myCarousel5" data-slide-to="1"></li>
					  <li data-target="#myCarousel5" data-slide-to="2"></li>
					  <li data-target="#myCarousel5" data-slide-to="3"></li>
					  <li data-target="#myCarousel5" data-slide-to="4"></li>
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">

					  <div class="item active">
						<img src="wasm_demo4.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>					
					
					  <div class="item ">
						<img src="wasm_demo1.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>

					  <div class="item">
						<img src="wasm_demo2.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>

					  <div class="item">
						<img src="wasm_demo3.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>

					<div class="item">
						<img src="wasm_demo5.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>					
										  
					  
					</div>

					<!-- Left and right controls -->
					<a class="left carousel-control" href="#myCarousel5" role="button" data-slide="prev">
					  <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
					  <span class="sr-only">前へ</span>
					</a>
					<a class="right carousel-control" href="#myCarousel5" role="button" data-slide="next">
					  <span class="glyphicon glyphicon-chevron-right" aria-hidden="false"></span>
					  <span class="sr-only">次へ</span>
					</a>
					
				  </div>
				</div>
						
		
	</div>
	</div>



		
	

   <div class="panel panel-primary">
      <div class="panel-heading"><h4>バックエンド型のウェブ開発</h4></div>
      <div class="panel-body">		

		<p>
			Ring を使うと MVC デザインパターンで GUI アプリケーションを迅速に開発できます。
			Ring コードは HTML テンプレートへ簡単に埋め込むことができます。 
			また、宣言型プログラミングにより Ring プログラムから HTML コードを生成可能です。
		</p>
		<br>

	  
				<div class="col-xs-12">
				  <div id="myCarousel4" class="carousel slide" data-interval="false">
					<!-- Indicators -->
					<ol class="carousel-indicators">
					  <li data-target="#myCarousel4" data-slide-to="0" class="active"></li>
					  <li data-target="#myCarousel4" data-slide-to="1"></li>
					  <li data-target="#myCarousel4" data-slide-to="2"></li>
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">

					  <div class="item active">
						<img src="mycoffee.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>
					  
					  <div class="item">
						<img src="newringdemo9.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>

					  <div class="item">
						<img src="newringdemo12.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>

					</div>

					<!-- Left and right controls -->
					<a class="left carousel-control" href="#myCarousel4" role="button" data-slide="prev">
					  <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
					  <span class="sr-only">前へ</span>
					</a>
					<a class="right carousel-control" href="#myCarousel4" role="button" data-slide="next">
					  <span class="glyphicon glyphicon-chevron-right" aria-hidden="false"></span>
					  <span class="sr-only">次へ</span>
					</a>
					
				  </div>
				</div>
						
		
	</div>
	</div>


	  <div class="panel panel-primary">
      <div class="panel-heading"><h4>モバイル開発</h4></div>
      <div class="panel-body">		

		<p>
			Ring でモバイル機器用のアプリケーションを配布できます (Android, iOS, など)
		</p>
		<br>

	  
				<div class="col-xs-12">
				  <div id="myCarousel7" class="carousel slide" data-interval="false" >

				  
				 	<!-- Indicators -->
					<ol class="carousel-indicators">
					  <li data-target="#myCarousel7" data-slide-to="0" class="active"></li>
					  <li data-target="#myCarousel7" data-slide-to="1"></li>
					</ol>
				  
					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">

					<div class="item active">
						<img src="android_demo1.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>

					
					  <div class="item">
						<img src="android_demo3.png" alt="" width="1366" height="729">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>



					</div>

					<!-- Left and right controls -->
					<a class="left carousel-control" href="#myCarousel7" role="button" data-slide="prev">
					  <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
					  <span class="sr-only">前へ</span>
					</a>
					<a class="right carousel-control" href="#myCarousel7" role="button" data-slide="next">
					  <span class="glyphicon glyphicon-chevron-right" aria-hidden="false"></span>
					  <span class="sr-only">次へ</span>
					</a>
					
				  </div>
				</div>
						
		
	</div>
	</div>
	
	
	
	

  <div class="panel panel-primary">
      <div class="panel-heading"><h4>ビルドツール (コマンドライン)</h4></div>
      <div class="panel-body">		

		<p>
			Ring でコマンドラインツール (CLI) を迅速に開発して手軽に配布できます。 
			Ring パッケージマネージャー (RingPM) は短時間で開発した実用ツールの好例です。
			なお、開発時間を記録しています (２１時間の開発期間後にステップごとの内容を解説してあります)。
		</p>
		<br>

	  
				<div class="col-xs-12">
				  <div id="myCarousel6" class="carousel slide" data-interval="false">

				  <!-- Indicators -->
					<ol class="carousel-indicators">
					  <li data-target="#myCarousel6" data-slide-to="0" class="active"></li>
					  <li data-target="#myCarousel6" data-slide-to="1"></li>
					</ol>
				  
					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">

					  <div class="item active">
						<img src="cmddemo2.png" alt="" width="1345" height="679">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>
	
					  <div class="item">
						<img src="cmddemo3.png" alt="" width="1345" height="679">
						<div class="carousel-caption">
						  <h3></h3>
						  <p></p>
						</div>
					  </div>	

					</div>
					
					<!-- Left and right controls -->
					<a class="left carousel-control" href="#myCarousel6" role="button" data-slide="prev">
					  <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
					  <span class="sr-only">前へ</span>
					</a>
					<a class="right carousel-control" href="#myCarousel6" role="button" data-slide="next">
					  <span class="glyphicon glyphicon-chevron-right" aria-hidden="false"></span>
					  <span class="sr-only">次へ</span>
					</a>
					
					
				  </div>
				</div>
						
		
	</div>
	</div>
	
		
		
			</div>
		</div>
	  </div>
	 </div>
   </div>



 
 

<a  id="why" href="#whyring" class="btn btn-default" data-toggle="collapse" style="width:100%">Ring をオススメする理由</a>
<div id="whyring" class="panel-group collapse in">
    <div class="panel panel-default">
      <div class="panel-heading"><h4>Ring をオススメする理由</h4></div>
      <div class="panel-body">
		<p align="justify">
		Ring は簡明、違和感の排除、組織化の奨励、および透過性とビジュアル実装からなるプログラミング言語です。 
		簡潔なシンタックス、そして自然なインタフェースの作成を可能にする機能群、 
		さらに少しの時間で構築できる宣言型問題解決特化言語があります。非常に小規模、高速なスマートガベージコレクターがあり、
		メモリをプログラマの制御下に置くことができます。また、多種多様なプログラミングパラダイムに対応しており、インストール後すぐに使える業界標準の実用ライブラリが付属しています。 
		この言語は生産性と拡張性に優れた高品質な解決方法の開発のために設計しました。
		
		</p>
		
		<br> 

        <div class="panel panel-primary" id="productivityscal">
	      <div class="panel-heading"><h4> 明確な設計目標</h4></div>
	      <div class="panel-body">

		<p>
			<ul>
			<li>アプリケーション開発用のプログラミング言語です。</li>
			<li>生産性と拡張性に優れた質の高い解決方法です。</li>			
			<li>小規模で高速な言語であり C/C++ プロジェクトへ組み込めます。</li>
			<li><ruby>文教<rp>(</rp><rt>ぶんきょう</rt><rp>)</rp></ruby>用途、およびコンパイラ・仮想計算機の概念における入門に使用できる単純明快な言語です。</li>
			<li>ドメイン特化ライブラリ、フレームワークおよびツールの作成に使用できる汎用言語です。 </li>
			<li>ビジュアルプログラミング言語である Programming Without Coding Technology (PWCT) ソフトウェアの次世代版を作成するために設計された実用言語です。</li>							
			</ul>

		</p>

	</div>
	</div>




        <div class="panel panel-primary" id="simple">
	      <div class="panel-heading"><h4> シンプル </h4></div>
	      <div class="panel-body">

		Ring は非常にシンプルなプログラミング言語であり、非常にわかりやすくすっきりしたシンタックスから構成されています。ボイラープレートコードのないプログラムの記述をプログラマに奨励しています。 
		<br>
		メッセージを標準出力へ表示するには 'See' 命令を使います。		

		<p>
			<pre>
<font color="purple">see</font> "Hello, World!" 
			</pre>
		</p>

		メイン関数はオプション扱いであり、ステートメントの後に実行されるため、ローカルスコープで有用です。
		
		<p>
			<pre>
<font color="purple">func</font> main
	<font color="purple">see</font> "Hello, World!" 
			</pre>
		</p>

		動的型付け、およびレキシカルスコープを使用しています。 		
		<br>
		文字列の連結で ‘+’ 演算子を使用できます。
		
		<p>
			<pre>
nCount = 10	<font color="green"># グローバル変数</font>
<font color="purple">func</font> main
	nID = 1	<font color="green"># ローカル変数</font>
	<font color="purple">see</font> "Count = " + nCount + nl + " ID = " + nID
			</pre>
		</p>



	</div>
	</div>

        <div class="panel panel-primary" id="natural">
	      <div class="panel-heading"><h4> 違和感の排除 </h4></div>
	      <div class="panel-body">

		Ring は大小英数文字を区別しません。
		
		<p>
			<pre>
<font color="purple">see</font> "Enter your name ?" 
<font color="purple">give</font> name
<font color="purple">see</font> "Hello " + Name	<font color="green"># Name は name と同じです。 </font>
			</pre>
		</p>

		リストのインデックス (添字番号) は 1 から開始します (Ring 1.11 以降は <a href="docs-1.14/zerolib.html">ZeroLib</a> ライブラリにより 0 から始めることもできます)。
		
		<p>
			<pre>
aList = ["one","two","three"]
<font color="purple">see</font> aList[1]	<font color="green"># one を表示</font>
			</pre>
		</p>

		定義前に関数を呼び出すには
		<p>
			<pre>
one() 
two() 
three()
<font color="purple">func</font> one 
	<font color="purple">see</font> "One" 
<font color="purple">func</font> two 
	<font color="purple">see</font> "two" 
<font color="purple">func</font> three 
	<font color="purple">see</font> "three" 
			</pre>
		</p>

		代入演算子は深いコピーを使用します (この操作は参照ではありません)。
		
		<p>
			<pre>
aList = ["one","two","three"]
aList2 = aList
aList[1] = 1
<font color="purple">see</font> alist[1]	<font color="green">#  1 を表示</font>
<font color="purple">see</font> aList2[1]	<font color="green"># one を表示</font>
			</pre>
		</p>

		数値と文字列は値渡しですが、リストとオブジェクトは参照渡しです。 
		<br>
		For in ループ でリストの項目 (アイテム、要素とも呼ばれています) を更新できます。
		<p>
			<pre>
<font color="purple">func</font> main
	aList = [1,2,3]
	update(aList)
	<font color="purple">see</font> aList	<font color="green"># one two three を表示</font>

<font color="purple">func</font> update aList
	<font color="purple">for</font> x <font color="purple">in</font> aList
		<font color="purple">switch</font> x
		<font color="purple">on</font> 1 x = "one"
		<font color="purple">on</font> 2 x = "two"
		<font color="purple">on</font> 3 x = "three"
		<font color="purple">off</font>
	<font color="purple">next</font>
			</pre>
		</p>

		リストと値の一括定義
		<p>
			<pre>
aList = [ [1,2,3,4,5] , aList[1] , aList[1] ]
<font color="purple">see</font> aList       <font color="green"># 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 を表示</font>
			</pre>
		</p>
		一階層以上のループから脱出
		
		<p>
			<pre>
<font color="purple">for</font> x = 1 <font color="purple">to</font> 10
        <font color="purple">for</font> y = 1 <font color="purple">to</font> 10
                <font color="purple">see</font> "x=" + x + " y=" + y + nl
                <font color="purple">if</font> x = 3 <font color="purple">and</font> y = 5
                        <font color="purple">exit</font> 2     <font color="green"># 二階層のループから脱出</font>
                <font color="purple">ok</font>
        <font color="purple">next</font>
<font color="purple">next</font>
			</pre>
		</p>


	</div>
	</div>


        <div class="panel panel-primary" id="encourageorg">
	      <div class="panel-heading"><h4> 組織化の奨励 </h4></div>
	      <div class="panel-body">

		Ring ではプログラムの組織化を奨励しています。まずは関数、次にクラス、
		そして関数とヘンテコなモノと組み合わせるプログラミング言語を使用していた悪夢の日々を忘却の彼方へ追いやります！ 
		<br><br>
		ソースファイルの構造は
		<br><br>
		<ul>
		<li>ファイルの読み込み</li>
		<li>ステートメントとグローバル変数</li>
		<li>関数</li>
		<li>パッケージとクラス</li>
		</ul>
		これにより構成要素で end キーワードを記述しなくてもパッケージ、
		クラスと関数が使えます。
		<br> <br>
		一行コメント、または複数行コメントを使えます。
		<br>
		一行コメントは # または // で始まります。
		<br>
		複数行コメントは /* ～ */ の間に記述します。
		<p>
		<pre>
<font color="green">/* 
	プログラム名	: Ring を使用したはじめてのプログラム
	開発者       : Ring Team 
*/</font>

<font color="purple">see</font> "What is your name?" 	<font color="green"># 画面上にメッセージを表示</font>
<font color="purple">give</font> cName 			<font color="green"># ユーザからの入力を取得</font>
<font color="purple">see</font> "Hello " + cName	<font color="green">	# hello を表示！</font>

<font color="green">// See "End of Program!"</font>
			</pre>
		</p>

	</div>
	</div>


	    <div class="panel panel-primary" id="libs">
	      <div class="panel-heading"><h4> データの表現方法 </h4></div>
	      <div class="panel-body">

<p>
Ring においてプログラムのデータ表現で使える型は四種類のみです。つまり、型として扱えるものは文字列、数値、リストとオブジェクトです。 

その狙いは、様々な状況で使いやすい関数を書くことであり、
型別にユースケースを多数定義すると柔軟性と性能が高くなります。
</p>

文字列型は下記の表現で使います: <br><br>

<ul>
<li>文字</li>
<li>複数文字による文字列</li>
<li>複数行による文字列</li>
<li>バイナリデータ </li>
</ul>

<pre>
cStr1 = "a"			<font color="green"># 文字</font>
cStr2 = "Hello, World!" 	<font color="green"># 複数文字による文字列</font>
cStr3 = "Hello
Welcome to the Ring language!
"				<font color="green"># 複数行による文字列</font>
cStr4 = read(EXEFileName())	<font color="green"># 実行可能ファイルの読み取り (バイナリデータ)</font>
</pre>

数値型は下記の表現で使います:<br><br>
<ul>
<li>ブール値 </li>
<li>符号あり・なし整数</li>
<li>浮動小数・倍精度小数 </li>
</ul>

<pre>
nNum1 = True		<font color="green"># ブール値 (1)</font>
nNum2 = False		<font color="green"># ブール値 (0)</font>
nNum3 = 10		<font color="green"># 整数</font>
nNum4 = -10		<font color="green"># 符号あり整数</font>
nNum5 = 1250.11		<font color="green"># 浮動小数・倍精度小数</font>
</pre>

リスト型は下記の表現で使います: <br><br>

<ul>
<li>一次元配列</li>
<li>多次元配列</li>
<li>複合型のリスト</li>
<li>多重リスト</li>
<li>ハッシュテーブル (キーと値)</li>
<li>ツリー</li>
<li>C ポインタとのラッパー接続</li>
</ul>

<pre>
aList1 = ["one","two","three"]				<font color="green"># 文字列</font>
aList2 = [1,2,3,4,5,6,7,8,9,10]				<font color="green"># 数値</font>
aList3 = ["Ring",1234]					<font color="green"># 複合型</font>
aList4 = [["Fayed","Egypt"],["Mansour","Tunisia"]]  	<font color="green"># 多重リスト</font>
aList5 = [ :name = "Fayed", :country = "Egypt"]		<font color="green"># ハッシュテーブル</font>
</pre>
オブジェクト型はクラスから生成されたオブジェクトを表現するために用いられます。<br><br>

また、クラスと演算子のオーバーロードを用いることで任意定義型を作れます。<br> 

		  
		</div>
		</div>


		  
	    <div class="panel panel-primary" id="libs">
	      <div class="panel-heading"><h4> 無駄のない小型で高性能なシンタックス </h4></div>
	      <div class="panel-body">


		
		<p>
			ステートメントの末尾に ; の記述や ENTER や TAB を押して<b>行を区切る</b>
			必要はありません。
		</p>
		<p>
			<pre>
<font color="purple">see</font> "The First Message"	<font color="purple">see</font> " Another message in the same line!" + <font color="red">nl</font>
<font color="purple">see</font> "Enter your name?" <font color="purple">give</font> <font color="red">Name</font> <font color="purple">see</font> "Hello " + <font color="red">Name</font>
			</pre>
		</p>
		<p>
			このコードは三種類の属性 X, Y および Z がある Point クラスを作成します。
			<b>パッケージ・クラス・関数の定義を終了するために end キーワードは使いません。</b>
			また、<b>クラスの名前の直下に属性の名前を書く</b>ことができます。
		</p>
		<p>
			<pre>
<font color="purple">class</font> Point X Y Z
			</pre>
		</p>
		<p>
			<b>定義前にクラスと関数を使用</b>できます。
			この用例では、オブジェクトの新規作成と属性の設定、および値を表示します。
		</p>
		<p>
			<pre>
o1 = <font color="purple">new</font> point	o1.x=10    o1.y=20   o1.z=30	<font color="purple">see</font> O1	<font color="purple">class</font> Point X Y Z
			</pre>
		</p>
		<p>
			ドット演算子 &#8216;.&#8217; でオブジェクトの属性とメソッドへアクセスするのではなく、 
			<b>括弧 { } でオブジェクトへアクセスできます。その後にオブジェクトの属性とメソッドを使用できます。</b>
		</p>
		<p>
			<pre> 
o1 = <font color="purple">new</font> point { x=10 y=20 z=30 } <font color="purple">see</font> O1  <font color="purple">class</font> Point X Y Z
			 </pre>
		</p>
		<p>
			<b>メソッドの呼出し後に { } でオブジェクトへアクセス</b>します。
		</p>
		<p>
<pre> 
oPerson = <font color="purple">new</font> Person
{
	Name = "Somebody"
	Address = "Somewhere"
	Phone = "0000000"
	Print()			<font color="green"># ここで Print() メソッドを呼び出します。</font>
}
<font color="purple">class</font> Person Name Address Phone
	<font color="purple">func</font> Print
		<font color="purple">see</font> "Name :" + name + nl +
		    "Address :" + Address + nl +
		    "Phone : " + phone + nl
</pre>
		</p>

		<p>
			{ } でオブジェクトへアクセスしてから任意のオブジェクトの名前を記述するとき、
			<b>自動的に呼び出される全ての setter/getter メソッドに対してクラスを検査します。</b>
		</p>
		<p>
<pre>
<font color="purple">new</font> Number {
		<font color="purple">see</font> one		<font color="green"># GetOne() の実行</font>
		<font color="purple">see</font> two		<font color="green"># GetTwo() の実行</font>
		<font color="purple">see</font> three	<font color="green"># GetThree() の実行</font>
}
<font color="purple">class</font> Number one two three
	<font color="purple">func</font> GetOne
		<font color="purple">see</font> "Number : One" + nl
		<font color="purple">return</font> 1
	<font color="purple">func</font> GetTwo
		<font color="purple">see</font> "Number : Two" + nl
		<font color="purple">return</font> 2
	<font color="purple">func</font> GetThree
		<font color="purple">see</font> "Number : Three" + nl
		<font color="purple">return</font> 3	
</pre>
</p>

		</div>
		</div>

		
				 <div class="panel panel-primary" id="designgoals_syntaxflexibility">
	      <div class="panel-heading"><h4> シンタックスの柔軟性</h4></div>
	      <div class="panel-body">

		<p>
			ソースコードの記述に関して様々な記法があります！ <br> <br>また、言語のキーワードと演算子を変更することで、お好みの記法を作成できます！<br>
		</p>

<ul>
<li> 第一形式 </li> <br>

<pre>
?"Welcome to Ring!"
<font color="purple">new</font> test { start() }

<font color="purple">class</font> Test
	x=10  y=20
	<font color="purple">func</font> start 
		?"x+y=" + (x+y)
		<font color="purple">for</font> t=1 <font color="purple">to</font> 10 
			?"t = " + t
			<font color="purple">if</font> t=3 
				?"Three" 
			<font color="purple">ok</font>
		<font color="purple">next</font>
</pre>

<li> 第二形式 </li> <br>

<pre>
<font color="purple">def</font> main
	<font color="purple">put</font> "Welcome to Ring!" + nl
	<font color="purple">new</font> test { start() }
<font color="purple">end</font>

<font color="purple">class</font> Test
	x = 10
	y = 20
	<font color="purple">def</font> start 
		<font color="purple">put</font> "x+y=" + (x+y) + nl
		<font color="purple">for</font> t=1 <font color="purple">to</font> 10 
			<font color="purple">put</font> "t = " + t + nl
			<font color="purple">if</font> t=3 
				<font color="purple">put</font> "Three" + nl
			<font color="purple">end</font>
		<font color="purple">end</font>
	<font color="purple">end</font>
<font color="purple">end</font>
</pre>

<li> 第三形式 </li> <br>

<pre>
<font color="purple">load</font> "stdlib.ring"

<font color="purple">func</font> main() {
	print("Welcome to Ring!\n")
	<font color="purple">new</font> test { start() }
}

<font color="purple">class</font> Test {
	x = 10
	y = 20
	<font color="purple">func</font> start {
		print("x+y=" + (x+y) + "\n")
		<font color="purple">for</font> t=1 to 10 {
			print("t = " + t + " \n")
			<font color="purple">if</font> t=3 {
				print("Three \n")
			}
		}
	}
}
</pre>

<li> キーワードの変更 </li> <br>

<pre>
<font color="purple">ChangeRingKeyword</font> See Print
<font color="purple">Print</font> "Hello, World!"
<font color="purple">ChangeRingKeyword</font> Print See
<font color="purple">See</font> "Hello, World!"
<font color="purple">ChangeRingKeyword</font> See Show
<font color="purple">Show</font> "Hello, World!"
</pre>

</ul>

		
		
		<br> 
		
		  </div>
		</div>
		
		
	    <div class="panel panel-primary" id="libs">
	      <div class="panel-heading"><h4> オブジェクト指向による自然言語ステートメントの定義 </h4></div>
	      <div class="panel-body">

		<p>
		{ } でオブジェクトへアクセス後にクラスに BraceEnd() メソッドがあれは BraceEnd() メソッドを実行します！
		</p>
<p>
<pre>
TimeForFun = <font color="purple">new</font> journey
<font color="green"># あっと驚く！</font>
<b>TimeForFun {
	Hello it is me		<font color="green"># なんと美しいプログラミングの世界でしょう！</font>
}</b>
<font color="green"># クラス本体</font>
<font color="purple">class</font> journey
	hello=0 it=0 is=0 me=0
	<font color="purple">func</font> GetHello
		<font color="purple">See</font> "Hello" + nl
	<font color="purple">func</font> braceEnd
		<font color="purple">See</font> "Goodbye!" + nl	
</pre>
</p>

		<p>
		<b>Eval() 関数は文字列に記述されたコード</b>を実行します。
		</p>
<p>
<pre>
cCode = "See 'Code that will be executed later!' "
Eval(cCode)	<font color="green"># コードを実行してメッセージを表示します</font>
</pre>
</p>

		<p>
		<b>リストの作成後にリストから実行用のコードを生成します。</b>
		</p>
<p>
<pre>
aWords = ["hello","it","is","me"]
<font color="purple">for</font> word <font color="purple">in</font> aWords cCode=word+"=0" eval(cCode) <font color="purple">next</font>
</pre>
</p>

		<p>
		<b>Read(cFileName) 関数</b>はテキストファイルを読み取ります。
		また、 </b>Write(cFileName,cString) 関数</b>はファイルへ書き込みます。
		</p>
<p>
<pre>
<font color="purple">see</font> "Enter File Name:" <font color="purple">give</font> cFileName <font color="purple">see</font> read(cFileName) <font color="green"># ファイルの内容を表示</font>
</pre>
</p>

		<p>
		この用例は二つの命令を定義するクラスの作成方法です。<br>
		最初の命令は : I want window<br>
		次の命令は : Window title = &lt;式&gt;<br>
		&#8216;the&#8217; などのキーワードは無視されます。<br>
		</p>
<p>
<pre>
<font color="purple">new</font> App
{
        I want window
        The window title = "hello world"
}

<font color="purple">class</font> App

	<font color="green"># I want window 命令の属性</font>
			i want window
			nIwantwindow = 0
	<font color="green"># Window title 命令の属性</font>
	<font color="green"># ここでは window 属性を再定義しません</font>
			title
			nWindowTitle = 0
	<font color="green"># 値を与えると、キーワードは無視されます</font>
			the=0

        <font color="purple">func</font> geti
                <font color="purple">if</font> nIwantwindow = 0
                        nIwantwindow++
                <font color="purple">ok</font>

        <font color="purple">func</font> getwant
                <font color="purple">if</font> nIwantwindow = 1
                        nIwantwindow++
                <font color="purple">ok</font>

        <font color="purple">func</font> getwindow
                <font color="purple">if</font> nIwantwindow = 2
                        nIwantwindow= 0
                        <font color="purple">see</font> "Instruction : I want window" + nl
                <font color="purple">ok</font>
                <font color="purple">if</font> nWindowTitle = 0
                        nWindowTitle++
                <font color="purple">ok</font>

        <font color="purple">func</font> settitle cValue
                <font color="purple">if</font> nWindowTitle = 1
                        nWindowTitle=0
                        <font color="purple">see</font> "Instruction : Window Title = " + cValue + nl
                <font color="purple">ok</font>

        
</pre>
</p>

		<p>
		前述の用例を完了するには read() でファイルの内容を取得します。
<pre>
        I want window
        The window title = "hello world"
</pre>
		そして eval() でファイルの内容を実行します！<br>
		また、 GUI ライブラリでウィンドウを作成するために GetWindow() と SetTitle() メソッドを更新します。<br>

		</p>

		</div>
		</div>

	    <div class="panel panel-primary" id="libs">
	      <div class="panel-heading"><h4> オブジェクト指向による多重構造の宣言型言語の定義 </h4></div>
	      <div class="panel-body">


		

		<p>
		<b>自然言語ステートメント形式のコード実行、
		および多重構造によるコードの実行方法は解説済みです。</b>
		</p>
		<p>
		この用例は Web ライブラリからの引用であり Bootstrap ライブラリで HTML ドキュメントを生成します。
		この用例では HTML コードを直接記述せずに類似言語を作成しています (ただの用例です)。
		その後、<b>宣言型言語により多重構造で HTML ドキュメントを生成しています。</b>
		<br>
		この用例での考え方として <b>GetDiv() と GetH1() メソッドは { } でアクセスできるオブジェクトを返します。 
		各オブジェクトへのアクセス後に BraceEnd() メソッドが実行されると生成された HTML を 
		BraceEnd() の出力表示がルートに到達するまで親オブジェクトへ送信します。</b>
		</p>
<p>
<pre>
<font color="purple">load</font> "weblib.ring"
<font color="purple">import</font> System.Web

<font color="purple">func</font> Main

  BootStrapWebPage()
  {
        div
        {
          classname = :container
          div
          {
                classname = :jumbotron
                H1 {   text("Bootstrap Page")   }
          }
          div
          {
                classname = :row
                for x = 1 to 3
                  div
                  {
                        classname = "col-sm-4"
                        H3 { html("Welcome to the Ring programming language") }
                        P  { html("Using a scripting language is very fun!") }
                  }
                next
          }
        }
  }
</pre>
</p>

		<p>
		宣言型インタフェースを強化するクラスは
		</p>
<p>
<pre>
<xmp>
	class Link from ObjsBase
		title  link
		func braceend			
			cOutput = nl+GetTabs() + "<a href='" + 
				  Link + "'> "+ Title + " </a> " + nl			

	class Div from ObjsBase 
		func braceend
			cOutput += nl+'<div'
			addattributes()
			AddStyle()
			getobjsdata()
			cOutput += nl+"</div>" + nl
			cOutput = TabMLString(cOutput)
	 
</xmp>
</pre>
</p>

		</div>
		</div>
		
	 
	 </div>  
  </div>

</div>

  
<a href="#implementation" class="btn btn-default" data-toggle="collapse" style="width:100%">実装について</a>

<div id="implementation" class="panel-group collapse in">

<div class="panel panel-default">
      <div class="panel-heading"><h4>実装技法</h4></div>
      <div class="panel-body">




<a name="education"></a>
		        <div class="panel panel-primary" id="transparentimplementation">
	      <div class="panel-heading"><h4> 透過型実装 </h4></div>
	      <div class="panel-body">

		Ring は透過型実装です。コンパイラの処理段階、および
		仮想計算機による実行中の処理内容を把握できます。<br />

		用例 : ring helloworld.ring -tokens -rules -ic -norun

		<p>
			<pre>
<font color="purple">see</font> "Hello, World!" 
			</pre>
		</p>

		実行結果 

		<p>
			<pre>
==================================================================
Tokens - Generated by the Scanner
==================================================================

   Keyword : SEE
   Literal : Hello, World!
   EndLine

==================================================================

==================================================================
Grammar Rules Used by The Parser
==================================================================

Rule : Program --> {Statement}

Line 1
Rule : Factor --> Literal
Rule : Range --> Factor
Rule : Term --> Range
Rule : Arithmetic --> Term
Rule : BitShift --> Arithmetic
Rule : BitAnd --> BitShift
Rule : BitOrXOR -->  BitAnd
Rule : Compare --> BitOrXOR
Rule : EqualOrNot --> Compare
Rule : LogicNot -> EqualOrNot
Rule : Expr --> LogicNot
Rule : Statement  --> 'See' Expr

==================================================================

==================================================================
Byte Code - Before Execution by the VM
==================================================================

     PC      OPCode        Data
      1     FuncExE
      2       PushC   Hello, World!
      3       Print
      4  ReturnNull

==================================================================
			</pre>
		</p>

	</div>
	</div>


	
		<div class="panel panel-primary" id="visualimplementation">
	      <div class="panel-heading"><h4> ビジュアル実装 </h4></div>
	      <div class="panel-body">
		  
		  プログラミング言語 Ring は<a href="http://doublesvsoop.sourceforge.net/" target="_blank">ビジュアルプログラミングツール PWCT (外部サイト)</a> で設計・開発しました。
		  <br><br>
		  
	<div class="col-xs-12">
  <div id="myCarouselPWCT" class="carousel slide" data-interval="false">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarouselPWCT" data-slide-to="0" class="active"></li>
      <li data-target="#myCarouselPWCT" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="ringvisualsrc1.jpg" alt="" width="1366" height="729">
        <div class="carousel-caption">
          <h3></h3>
          <p></p>
        </div>
      </div>

      <div class="item">
        <img src="ringvisualsrc2.jpg" alt="" width="1366" height="729">
        <div class="carousel-caption">
          <h3></h3>
          <p></p>
        </div>
      </div> 

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarouselPWCT" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
      <span class="sr-only">前へ</span>
    </a>
    <a class="right carousel-control" href="#myCarouselPWCT" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="false"></span>
      <span class="sr-only">次へ</span>
    </a>		  
		  
	</div>
	</div>

</div>		
		
 

	</div>
     



       <div class="panel panel-primary" id="smartgc">
	      <div class="panel-heading"><h4> スマートガベージコレクター </h4></div>
	      <div class="panel-body">

		わずらわしいメモリ操作関連の問題から開放されます。
		<br><br>
		<ul>
		 <li>メモリへの不正アクセス</li>
		 <li>メモリリーク</li>
		 <li>未初期化メモリへのアクセス</li>
		 <li>ダングリングポインタ</li>
		</ul>

		規則:
		<br><br>
		<ul>
 		<li>グローバル変数は代入ステートメントで削除するまでメモリに存在し続けます。</li>
		<li>ローカル変数は関数の処理終了後に削除されます。</li>
		<li>プログラマは代入ステートメントでメモリから変数を削除する時期を完全に制御できます。</li>
			<br>
      			用例:
			<pre>
aList = [1,2,3,4,5]
aList = "nice"
			</pre>
     二行目の直後、リスト [1,2,3,4,5] はメモリから削除され、文字列 &#8220;nice&#8221; が残ります。
	<br><br>
		<li>プログラマは callgc() 関数を呼び出すことで強制的に強制的にガベージコレクターを実行できます。</li>
		<li>変数に参照があれば (オブジェクトおよびリストを関数へ渡すとき)、参照カウントに基づき変数を削除します。未参照ならば全て削除しますが、参照があればデータはメモリに残ります。</li>
		</ul>
	</div>
	</div>

		
		 <div class="panel panel-primary" id="designgoals_nogil">
	      <div class="panel-heading"><h4> インタプリタ (VM) 全体の停止なし (GIL なし)</h4></div>
	      <div class="panel-body">

		<p>
			アプリケーションでスレッドを使用するとき、インタプリタ (VM) 全体の停止 (global interpreter (VM) lock - GIL) は起こりません。 <br><br>

			よって、スレッドは並列動作可能であり、Ring 命令は同時実行されます。 <br><br>

			これはスレッドと平行性において最良です (動作速度の向上が実現できます！) <br>

		</p>

		  </div>
		</div>
	

  <div id="fastenough" class="panel-group collapse in">
    <div class="panel panel-primary">
      <div class="panel-heading"><h4>高速動作</h4></div>
      <div class="panel-body">

		<div class="row">
			<div class="col-sm-12 col-md-12">
		<p>
		Ring は単純明快、小規模、柔軟な言語の頂点として設計されています。また、ほとんどのアプリケーションで十分に高速動作します。
		</p>
		<p>
		これまで５年以上にわたり、市販の電子計算機で Ring を使用してきました。<b>下記の処理は約１秒で完了します</b>。  <br><br>
		
		(1) 100,000 行コードのコンパイル <br>
		(2) 1 ～ 10,000,000 まで数え上げる空ループの実行  <br>
		(3) 100,000 項目から成るリストで最後の項目を見つけようとして、線形検索で1000 回の検索処理を実行 (最悪の場合) <br>
		(4) 1,000,000 項目から成るリストを作成後にリスト全項目の合計を計算<br>
		(5) GUI アプリケーションで ListWidget へ 20,000 アイテムを追加 <br>
		(6) GUI アプリケーションで TreeWidget へ 5,000 ノードを追加 <br>  
		(7) ターミナルのコンソールアプリケーションで 10,000 メッセージを表示 <br>		
		
		さらなる高速化をお求めでしたら C/C++ 拡張機能を使えます！！ <br><br>
		
		</p>
		<br>	

		<div class="col-xs-12">
  <div id="myCarouselPerformance" class="carousel slide" data-interval="false">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarouselPerformance" data-slide-to="0" class="active"></li>
      <li data-target="#myCarouselPerformance" data-slide-to="1"></li>
      <li data-target="#myCarouselPerformance" data-slide-to="2"></li>
      <li data-target="#myCarouselPerformance" data-slide-to="3"></li> 
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="ringdemo1_speed.png" alt="" width="1366" height="729">
        <div class="carousel-caption">
          <h3></h3>
          <p></p>
        </div>
      </div>

      <div class="item">
        <img src="ringdemo2_speed.png" alt="" width="1366" height="729">
        <div class="carousel-caption">
          <h3></h3>
          <p></p>
        </div>
      </div>
    
      <div class="item">
        <img src="ringdemo3_speed.png" alt="" width="1366" height="729">
        <div class="carousel-caption">
          <h3></h3>
          <p></p>
        </div>
      </div>

      <div class="item">
        <img src="ringdemo4_speed.png" alt="" width="1366" height="729">
        <div class="carousel-caption">
          <h3></h3>
          <p></p>
        </div>
      </div>
  
  

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarouselPerformance" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
      <span class="sr-only">前へ</span>
    </a>
    <a class="right carousel-control" href="#myCarouselPerformance" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="false"></span>
      <span class="sr-only">次へ</span>
    </a>
	
  </div>
</div>
			
		
			</div>
		</div>
	  </div>
	 </div>
   </div>

</div>
</div>
</div>
   

<a href="#features" class="btn btn-default" data-toggle="collapse" style="width:100%">主な機能</a>
  <div id="features" class="panel-group collapse in">
    <div class="panel panel-default">
      <div class="panel-heading"><h4>主な機能</h4></div>
      <div class="panel-body">

	  <div class="row">
	  <div class="col-sm-12 col-md-4">

	    <div class="panel panel-primary">
	      <div class="panel-heading">文法</div>
	      <div class="panel-body">
			<ul>
				<li>無駄のない小型で高性能なシンタックス</li>
				<li>三種類のソースコード記法</li>
				<li>レガシーコードの変換と移植、カスタマイズに対応できるシンタックスの柔軟性</li>
				<li>宣言型プログラミング </li>
				<li>自然言語プログラミング</li>
				<li>明瞭なプログラム構造 (ステートメントの後に関数、そしてパッケージとクラス)</li>				
				<li>括弧 { } によるオブジェクトへのアクセス、および属性・変数としてメソッド・関数を使用可能</li>				
				<li>ステートメントの明示的な end は不要 (; または ENTER は不要)</li>				
				<li>exit による一階層以上のループからの脱出</li>
				<li>関数・クラス・パッケージには end キーワードは不要</li>
			</ul>
	      </div>	      
            </div>
	 </div>

	 <div class="col-sm-12 col-md-4">
	    <div class="panel panel-primary">
	      <div class="panel-heading">信頼性の高い実装</div>
	      <div class="panel-body">

		<ul>
		<li>自由なオープンソース (MIT ライセンス)</li>			
		<li>ハイブリッド実装 (コンパイラと仮想計算機)</li>
		<li>コンパイラと仮想計算機は 20,000 行の C コード</li>
		<li>それ以外の 500,000 行のコードはライブラリ関連！</li>
		<li>透過型実装によりオプションで実行中の処理内容 (トークン、グラマー、バイトコード) を出力可能		
		<li>ANSI C で記述 (コード生成による)</li>
		<li>ビジュアル言語 (PWCT) による開発</li>
		<li>ゲーム開発に適したスマートガベージコレクター (エスケープ分析と参照カウントによる自動メモリ管理)</li>
		<li>インタプリタ全体の停止なし (GIL なし)</li>
		<li>移植性 (Windows, Linux, macOS, Android, WebAssembly など)</li>
		</ul>
	       </div>
           </div>
    	</div>

    	<div class="col-sm-12 col-md-4">

	    <div class="panel panel-primary">
	      <div class="panel-heading">シンプル</div>
	      <div class="panel-body">

		<ul>
		<li>コメント (一行および複数行)</li>
		<li>複数行リテラル</li>
		<li>大小英数文字同一視</li>
		<li>リストのインデックスは 1 から開始</li>
		<li>豪華な制御構造と演算子</li>
		<li>範囲演算子。用例: 1:10 および “a”:”z”</li>
		<li>メイン関数 (オプション扱い)</li>
		<li>定義前の関数呼び出し</li>
		<li>再帰処理</li>		
		<li>インデックスによる文字列内の文字へのアクセス (読み書き)</li>		
		<li>非値参照による For in  ループでの項目取得</li>
		<li>第一級変数、リスト、オブジェクトと関数</li>
		<li>値による格納・リストのコピー・オブジェクト (深いコピー)</li>		
		<li>参照によるリスト・オブジェクト渡し</li>
		<li>8-bit クリーン設計であるためバイナリデータの直接処理可能</li>
		</ul>
	      </div>
           </div>

    	</div>
	</div>

	<br> <br>

  	<div class="row">

	<div class="col-sm-12 col-md-4">

	    <div class="panel panel-primary">
	      <div class="panel-heading"> 動的言語</div>
	      <div class="panel-body">

		<ul>
		<li>動的型付け</li>
		<li>レキシカルスコープ (グローバル、ローカルおよびオブジェクトのステート)</li>
		<li>関数の内側の変数のデフォルトスコープ (ローカル)</li>
		<li>関数の外側の変数のデフォルトスコープ (グローバル)</li>
		<li>隔離グローバルスコープ空間へオプションモジュールを読み込み</li>
		<li>例外処理</li>
		<li>アプリケーション実行中に Eval() でコードを実行</li>
		</ul>
	      
	      </div>
           </div>
	</div>

	<div class="col-sm-12 col-md-4">

	    <div class="panel panel-primary">
	      <div class="panel-heading"> オブジェクト指向プログラミング (OOP)</div>
	      <div class="panel-body">

		<ul>
		<li>カプセル化</li>
		<li>Setter/Getter (オプション扱い)</li>
		<li>プライベートステート (オプション扱い)</li>
		<li>インスタンス化</li>
		<li>多態性</li>
		<li>コンポジション</li>
		<li>継承 (単一継承)</li>
		<li>演算子のオーバーロード</li>
		<li>パッケージ</li>
		<li>リフレクションとメタプログラミング</li>
		</ul>
     
	      </div>
           </div>
	</div>

	<div class="col-sm-12 col-md-4">

	    <div class="panel panel-primary">
	      <div class="panel-heading"> 標準ライブラリ </div>
	      <div class="panel-body">

		<ul>
		<li>入出力命令</li>
		<li>算術関数</li>
		<li>文字列関数</li>
		<li>リスト関数</li>
		<li>ファイル処理関数</li>
		<li>システム関数</li>
		<li>データベースへの対応 (ODBC, PostgreSQL, SQLite および MySQL)</li>
		<li>セキュリティ関数 (OpenSSL)</li>
		<li>インターネット関数 (LibCurl)</li>
		<li>強力な GUI フレームワーク (Qt)</li>
		<li>ウェブ開発ライブラリ</li>
		<li>多機能ゲームプログラミングライブラリ</li>
		</ul>
	      
	      </div>
           </div>

    	</div>
  </div>

	<br>
	<br>

  <div class="row">
    <div class="col-sm-12 col-md-4">

	    <div class="panel panel-primary">
	      <div class="panel-heading"> ウェブ開発 </div>
	      <div class="panel-body">

		<ul>
		<li>HTTP Get</li>
		<li>HTTP Post</li>
		<li>ファイルのアップロード</li>
		<li>クッキー</li>
		<li>URL エンコード</li>
		<li>テンプレート</li>
		<li>HTML 特殊文字</li>
		<li>関数による HTML の生成</li>
		<li>クラスによる HTML の生成</li>
		<li>CRUD の用例 (MVC を使用)</li>
		<li>ユーザーによる用例 (登録、ログインと確認)</li>
		<li>クラウドでのアプリケーション配布</li>
		</ul>

	      
	      </div>
           </div>
    </div>

    <div class="col-sm-12 col-md-4">

	    <div class="panel panel-primary">
	      <div class="panel-heading"> 拡張機能</div>
	      <div class="panel-body">

		<ul>
		<li>C/C++ による拡張機能の使用 (シンプルなAPI)</li>
		<li>C/C++ プログラムへの組み込み</li>
		<li>C/C++ ライブラリの迅速な運用を実現するバインディング生成器</li>
		<li>ネットワークプログラミング (SDLNet, Libuv など)
		<li>2D ゲームの開発 (Allegro &amp; LibSDL, Tilengine)</li>
		<li>3D ゲームの開発 (OpenGL, FreeGLUT, RayLib, Qt3D など)</li>
		<li>デスクトップ、 WebAssembly  およびモバイル機器用の GUI アプリケーションの開発 (Qt フレームワーク)</li>		
		</ul>
	      
	      </div>
           </div>
    </div>

    <div class="col-sm-12 col-md-4">
	    <div class="panel panel-primary">
	      <div class="panel-heading"> これ以外にも </div>
	      <div class="panel-body">

		<ul>
		<li>非常に安定した動作</li>
		<li>十分な処理能力</li>
		<li>完成度の高い取扱説明書</li>
		<li>豊富なライブラリを標準添付 (面倒な設定不要でインストール直後から使用可能)</li>
		<li>豊富なサンプル集 (学習しやすい)</li>
		<li>豊富なアプリケーション</li>
		<li>数百本以上の実用的な YouTube 動画 (アラビア語)</li>
		<li>頼りになる RAD ツール (コードエディタ、フォームデザイナー、REPL、デバッガ、Ring2EXE、パッケージマネージャーなど)</li>
		</ul>
	      
	      </div>
           </div>
    </div>
 
  </div>


 
      </div>
    </div>  
  </div>

  
<br><br>


</div>
<div id = "ringbook" class="container-fluid" style="color:white ; background: linear-gradient(to bottom, rgb(30, 32, 42) 0%, rgb(50, 52, 62) 47%, rgb(60, 62, 72) 100%) repeat scroll 0% 0% ; margin-bottom: 0%;">
<div class="container" style=" margin-bottom: 2%;">
<br> <br>
	<div class="row">
	
		<div class="col-sm-8 visible-xs">
			<table> 
				<td>
					<a href="https://www.apress.com/gp/book/9781484258323">
					<img src="ringbookbyapress.png" width="150" height="200">
					</a> 
				</td> 
				<td style="padding-left:5%"> 		
					<h3><ruby>Beginning<rp>(</rp><rt>ビギニング</rt><rp>)</rp></ruby> <ruby>Ring<rp>(</rp><rt>リング</rt><rp>)</rp></ruby> <ruby>Programming<rp>(</rp><rt>プログラミング</rt><rp>)</rp></ruby><h3>
					<h4><ruby>From<rp>(</rp><rt>フロム</rt><rp>)</rp></ruby> <ruby>Novice<rp>(</rp><rt>ノービス</rt><rp>)</rp></ruby> <ruby>to<rp>(</rp><rt>トゥ</rt><rp>)</rp></ruby> <ruby>Professional<rp>(</rp><rt>プロフェッショナル</rt><rp>)</rp></ruby></h4>		
					<p>
					本書の狙いは実践的で豊富な用例により Ring プログラミングの世界を解りやすく丁寧に解説することです。
					</p>
				 </td>
			</table>
			<br> <br>
		</div>
		
		
		<div class="col-md-3 hidden-xs">
			<div style="padding-left:5%">
				<br> <br> <br>
				<a href="https://www.apress.com/gp/book/9781484258323">
				<img src="ringbookbyapress.png" width="250" height="370">
				</a>
			</div>
		</div>	
	
		<div class="col-md-9 hidden-xs ">
			<div style="padding-left:5%">
				<h1><ruby>Beginning<rp>(</rp><rt>ビギニング</rt><rp>)</rp></ruby> <ruby>Ring<rp>(</rp><rt>リング</rt><rp>)</rp></ruby> <ruby>Programming<rp>(</rp><rt>プログラミング</rt><rp>)</rp></ruby><h1>
				<h2><ruby>From<rp>(</rp><rt>フロム</rt><rp>)</rp></ruby> <ruby>Novice<rp>(</rp><rt>ノービス</rt><rp>)</rp></ruby> <ruby>to<rp>(</rp><rt>トゥ</rt><rp>)</rp></ruby> <ruby>Professional<rp>(</rp><rt>プロフェッショナル</rt><rp>)</rp></ruby></h2>
				<p align=”justify” >
				本書の狙いは実践的で豊富な用例により Ring プログラミングの世界を解りやすく丁寧に解説することです。第一部では、言語と基本機能の基礎 (データ型、制御構造、関数、およびクラス) を示します。また、他に類を見ない方法で Ring プログラムの正確な構造を解説しています。 
				</p><p align="justify">
				第二部では、 Ring の入出力、およびそのやりとりについて説明します。計算機ロジックの基本構造 (シーケンス、セレクション、およびイテレーション) により単純かつ複雑なロジックフローを構築します。例えば、コードの複雑性の原因となるよくある誤りの探求により、それら解決に導く戦略を説明します (リファクタリング、コードの整理、変数の適切な命名規約)。そして、ローカル、オブジェクト、およびグローバル領域における Ring のスコープの処理方法について図解で解説しています。
				</p><p align="justify">
				第三部では、 Ring プログラミングで必須の構成要素である関数とオブジェクトを扱います。問題解決の構成方法、および宣言型と自然言語など高度なプログラミングパラダイムにより綺麗に実装する方法について学びます。議論の一環として、ゲームプログラミングにも取り組みます。Ring のコードにおいて、ビジュアル開発環境での設計と同様に、ゲームを宣言的手法で設計する方法についても学びます。
				</p><p align="justify">
				最終章では、筆者によるゲームを用いたプログラミングの学習方法を説明しています。また、 Ring プログラミングを会得するためにゲームがメタファーとなる可能性について偽りがないことをお教えします。
				</p><p align="justify">
				本書の読者は綺麗で、表現力豊か、かつ学習しやすいコードを書きたい熱心な方です。つまり、初心者を対象とした Ring の関連知識を伝授するだけに限らず、実社会、顧客向けプログラミングのプロジェクトで使われる知識や経験が体得できる万能教材集でもあります。
				</p>
			</div>
		</div>
		<br>


	</div>
</div>
</div>
<div class="container" style="display: none;">  
  