テン＊シー＊シー -29ページ目

JavaScriptちゃんでプログラムしますぜい

　前回、最初に見せた3D画像ページはcube-600.htmlという名前のHTMLファイルをWebブラウザが読み込んで表示した結果っす。

↓こいつね

cube-600.html

　このHTMLファイルてのは、人間が直接読み書きできるテキストファイルなわけでして、Webブラウザで表示させたい内容を記述するためのタグ（<>で囲んだ文字列）によってブロック化されているってのが特長です。

　上の図のようにに<タグ名>と<タグ名/>に囲まれた部分が、そのタグ名のブロックとなります。

　<タグ名>　　←「タグ名」ブロック開始タグ

　・・・　　　← ブロックの内容

　<タグ名/>　 ←「タグ名」ブロック終了タグ

　ブロックは入れ子にもできて、HTMLファイルでは一番外側のブロックとしてhtmlブロックを用意し、その中にheadブロック、bodyブロックを置くという決まりがあります。

　注意）ちなみに一番最初の<!DOCTYPE html>は、それ一つでブロックとなるタグで「このテキストファイルはHTMLファイルですよ」ってのを示すためのタグです。無くても動いてくれますが礼儀として入れましょう。

　で、このうちbodyブロックに書かれた内容が、Webブラウザの画面内容として表示される仕組みです。

　基本的には、bodyブロック内に表示させたい文字列を書き込みます。

　注意）<br/>は改行を意味する単独のタグ

　で、これだけだと味気ないので、例えば一部分だけ文字を大きくするとか、赤色にするといった外観（HTMLでは、これをスタイルって呼んでます）の調整をしたいとか思うわけですよ。

　その場合、まずbodyブロック内の調整したい部分をdivタグでブロック化しておきます。

　そしてheadブロック側にstyleタグを置くことで、divブロックに対してスタイルを指定します。例えばdivタグ内の文字列は全て赤色という指定は次のようになり、結果divブロック内の文章は赤文字になるわけです。

　直接bodyブロック内でスタイルを指定することも可能なんですが、こんな感じでbodyブロックに内容、headブロックにスタイルと分離しておくのが今風のHTMLです。

　もちろん、これだけだとdivブロックか、そうでないか程度の組み合わせしかできません。なので、divブロックはそれぞれのブロックごとに識別子を付けることができ、その識別子ごとにスタイルを指定できるようにもなってます。

　識別子は<div id="識別子">とすることで指定できます。例えば

とすることで、このdivブロックはcanvas-frameという識別子を持つことになります。識別子として指定する文字列は任意です。ここではcanvas-frameとしたけどview-3dやgreatViewにしてもかまいません。

　注意）ただし半角スペースを使うのは不可。漢字も使えるみたいだけど半角英数を使うのが無難っす。あと先頭一文字目に数字は使えません

　でもって、styleタグ側ではdiv#識別子とすることで、その識別子を持つdivブロックだけに限定したスタイルを指定できます。例えば

　div#canvas-frame {
　 font-size:1cm
　}

と書くことで、識別子canvas-frameを持つdivブロックだけ、文字の大きさが1cmになります。

　div#canvas-frameのスタイルが、div側の文字色設定を引き継いでいるのはそういった取り決めがあるからです。こんな風に、自分のスタイルに定義されていないスタイルは、自分の上流（div#・・・ならdivが上流）のスタイルを引き継ぐ仕組みから、この取り決めをCSS（Cascading Style Sheets）と呼びます。

　注意）styleタグに書かれたtype="text/css"てのが、このタグに書かれた内容がCSS仕様に従うことを示しています

　このCSSを利用して、cube-600.htmlのbodyブロックでは、空のdivブロック（canvas-frameという識別子）を1つだけ持たせ、そのブロックにWebブラウザの画面上で幅：600ピクセル、高さ600ピクセルの大きさを持つように指定しています。

　で、この矩形指定から想像できると思いますが、このcanvas-frameというdivブロックこそが3D表示画面です。

　ただしHTMLでは、3D表示をbodyブロックに直接記述する機能は提供されてません。そのためbodyブロック内のcanvas-frameというdivブロックは空になるわけです。

　<div id="canvas-frame"></div>　　←3Dなんて書きようがないので、内容部は空

　んじゃ、なんで3D表示されてんだよっていうと、3D表示は表示矩形を確保したdivブロックにJavaScriptというプログラム言語を使って描いています。

これな↓

https://codeiq.jp/magazine/2015/10/30057/

　JavaScriptのプログラムは、次のようにheadブロック側にscriptというブロックを用意して記述します。

　　↓　JavaScriptのプログラム
   function threeStart() {
       //   描画領域の設定
       var frame = document.getElementById('canvas-frame');
・・・
</script>
</head>

　ここに書かれた3D空間に赤い球体を描く、灰色の立方体を描くっといった処理が、canvas-frameというdivブロック内に3D画像を表示させているわけです。

　cube-600.htmlを前回説明したSafariの開発ツールでソース表示させるかしてscriptブロック見てもらうとわかりますが、こんなふうに、赤い球体を描くにしても、灰色の立方体を描くにしても、色を指定したり、形を指定したり、座標を指定したりといろいろな処理が必要なわけです。

　で、これをにまとめているのが、functionというキーワードで始まるブロックです。

　このブロックを関数と呼びます。

　関数にも名前がつけられるようになっていて、その名前を使って関数内に書かれた一連の処理を実行させることができます。

　というところであらためてcube-600.htmlのbodyブロック見てみると

となっていて、threeStartという関数ブロック（以後threeStart関数って呼ぶ）に関する何かを指定してるのがわかると思います。

　で、何をやっているかというと、onloadが、このbodyブロックの内容が画面に表示された時を意味していて、ここに=をつなげて

　　="JavaScriptで書かれた実行したい処理"

とすることで、画面に表示された時に実行させたい処理を指定しているわけです。

　書かれているのは

　threeStart();

　で、これが上で言ったJavaScriptで、名前の付いた関数を実行させる（これを関数を呼び出すと言います）方法です。

　というわけで

　となり、ようやくthreeStartまでたどり着いたところで力尽きたので、続きは次回。

WebGLでいきますぜい

　おはこにゃばちにんこ〜！

　よーやくデスマーチから解放されました〜。

　親切本のXcode 8対応もひと段落ついたし、やりたくて仕方なかった物理シミュレーションやります。

　まずはWebGLだ！

　右のフリープラグインコーナーに出てる立方体に球体がめり込んでるやつね。

　WebGLはwebブラウザで3D描画をするための標準仕様でJava Scriptを使います。

　こいつね↑

　残念ながらscriptもiframeもアメブロ禁止タグなんで、ここに直接貼れません。

　なので使っていいフリープラグインコーナーに貼り付けますた。

　まるごと1つのHTMLページとして書いたのがこっち。

　WebGLで3Dプログラミングだ！

　当然ですが、JavaScriptとWebGLを使ってるので、表示させたい人はJavaScriptやWebGLを許可してください。例えばSafariだと環境設定のセキュリティタブにあるWebコンテンツのJavaScriptやWebGLを許可をチェックしておく必要があります。

　でもって、書かれてるJavaScriptはこんな感じです。

　HTMLとJavaScript知ってる人は、かなり少ない記述で3D表示できてるのがわかるはず。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>three.jsを使おう</title>
<script src="three.js"></script>

// 描画領域に表示する3D空間を撮影するカメラを決定
camera = new THREE.PerspectiveCamera( 45 ,

frame.clientWidth / frame.clientHeight , 1 , 10000 );
       camera.position.set(0, 50, 100);
       camera.up.set(0, 1, 0);
       camera.lookAt( {x:0, y:0, z:0 } );

// 3D空間を用意
scene = new THREE.Scene();

       //   用意した3D空間に光源を投入
   light = new THREE.PointLight(0xFFFFFF, 2, 300);
       light.position.set( 100, 60, 80 );
       scene.add(light);

       arrengeObjects();
       loop();
   }

   //   3D空間に物体を配置       立方体と球
   function arrengeObjects() {
       //   立方体
       cube = new THREE.Mesh(
           new THREE.CubeGeometry(50,50,50),
           new THREE.MeshLambertMaterial({color: 0xffffff}));
       scene.add(cube);
       cube.position.set(0,0,0);

       //   球
       sphere = new THREE.Mesh(
           new THREE.SphereGeometry(20,20,20),
           new THREE.MeshLambertMaterial({color: 0xff0000}));
       scene.add(sphere);
       sphere.position.set(0,20,0);
   }

   //   一定間隔で繰り返す作業（cubeを回転）
   var t = 0;
   function loop() {
       t++;
       cube.rotation.set(0, 0, t/100);
       renderer.clear();
       renderer.render(scene, camera);
       window.requestAnimationFrame(loop);
   }

</script>
</head>

<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>

　ちなみに、Safariの環境設定の詳細タブにある「メニューバーに"開発"メニューを表示」にチェックをつけると、メニューバーに"開発"メニューが表示されるんで、そこから「ソースを表示」を選べばSafari上で直接中身を見ることもできます。

というか、この開発メニューがかなり便利なのよ。

ソース見るどころかJavaScript用のデバッガまである。

　で、この開発画面ソースファイルの項目にcube-600.html以外に、three.jsてのが見えると思うけど、このファイルが少ない記述で3D表示できている理由です。

　three.jsは煩雑なWebGLの制御を請け負ってくれるライブラリで、iOSで言えばScene Kit（ごく一部の人にしかわからん例えだが…）みたいなもんです。

　直接WebGL使うなら必要ないけど、世界的にメジャーで本も出てるんでオススメ。

　使う場合は

って感じで指定するだけですが、当然three.jsファイル自体が必要となり、私もサイト内に置いて（実際のcube-600.htmlでは、同じ階層にjsってフォルダ作って、そこにthree.jsを置いてるので"js/three.js"ってなってる）ます。

　このthree.jsファイル自体は下のサイトからdownloadして解凍したフォルダのbuildからコピーします。

http://threejs.org

　ここね↑

buildフォルダの中に入ってるよ。

　ま〜、JavaScriptファイルなんで、コピーしなくてもネット上で公開されてる場所に置かれてるthree.jsファイルへのURL書けばいいんだけど、リンクされた側は

大迷惑なんでやめるように。

　相手にDDoS攻撃してるようなもんだからね。やめましょう。

　で、このthree.jsファイルさえあれば、あとはHTMLファイルをテキストエディタで作れば、自宅のパソコン上で簡単に3D表示プログラミングをして遊べます。

　例えば、仮にデスクトップ上にWebGLLabという名前の作業用フォルダ（別にデスクトップをそのまま作業用フォルダとして使ってもいいけど）を置いたとして、そこにthree.jsファイルをコピー、でもって自分で適当にthree.jsを使うJavaScriptを書いたHTMLファイルを用意すれば、そのHTMLファイルをダブルクリックかSafariの画面にドラッグ＆ドロップすることで3D画面が表示される。

　もしmacOS付属のテキストエディタで編集する場合は、新規作成直後に、フォーマット>標準テキストにするメニューで、標準テキストにしておくように。保存時のエンコードはUTF8ね。

　ちなみにこいつは、振り子を物理シミュレーションしたアニメーション。

振り子

　ソースファイルはこれ。

http://www.tetera.jp/xcc/ameba/src/lab.html.zip

　以下を参考に書いてみますた。

HTML5による物理シミュレーション環境の構築～WebGLライブラリThree.js 入門

　こっちのサイトでは精度上げるためにルンゲクッタ使ってますが、私のやつは「んじゃオイラーだと、どんだけダメなんだろ」ということを試すつもりで素のオイラーで実装してます。

　JavaScript読める人は、参考のサイトを読んでルンゲクッタに差し替えてみるといいです。

　説明は次回、じゃまた。

　暗号もそのうち再開。

ドリル本のXcode 8対応について　その1

Examplesについて

公式サポートで連絡する予定だけど、先行して進捗報告。

++、--は廃止されました。
関数の第1引数のラベルが無視されなくなりました。
inoutキーワードの位置が変わります。
Cスタイルのforループは廃止になりました。

UIApplicationMainの第2引数が変更されました。ていうか、CommandLine.unsafeArgvの型定義が追いついていないのかな。

UIApplicationMain(CommandLine.argc,
　UnsafeMutableRawPointer(CommandLine.unsafeArgv).bindMemory(
　　to: UnsafeMutablePointer<Int8>.self,
　　capacity: Int(CommandLine.argc)),
　nil,
　NSStringFromClass(AppDelegate.self)
)
あと、クラスオブジェクト指定に.selfが必要になった。

JavaScriptちゃんでプログラムしますぜい

WebGLでいきますぜい

ドリル本のXcode 8対応について その1

ドリル本のXcode 8対応について　その1