2017年を振り返って。
今年は色々なものに刺激され、とても楽しい一年でした！
そして、プログラミングを知り、プログラミングに刺激され、自分の見る世界が変わったなと感じています。
１月
一月は合唱コンのピアノのコンクールに向けて頑張ってましたね。でも、落ちてしまって悲しかったことを覚えています。
２月
部活の友達と遊びに行ったことが印象に残っています。まだプログラミングなど知りません。
３月
３学期の最後に学校で、Life is Techの春休みキャンプのチラシが配られました。そのキャンプに前から興味があったWebサービスコースがあったので行くことにしました。そこでWebサービスを作ること、プログラミングをすることが楽しいことだなと感じました。
４月
Life is TechではSinatraで掲示板サイトを作るっというのがカルキュラムだったのですが、もっとRubyで面白いのを作りたいと思ったのでRailsを学ぶことにしました。初めて、技術書を買いました。
programing-haru.hatenablog.com
５月
未踏ジュニアに応募しました。その時好きだったお笑いのアイデアですか、二次審査で落ちていまいました。 アイデアがいまいちだったのと、それを実現する技術が不十分だったかなと思ってます。
６月
勉強を頑張ってました。
７月
バスケの合宿がありましたね。去年よりは辛くなかったですか、とても体力が上がったなと感じてます。
８月
未踏ジュニアに応募してから技術足りないと感じでいて、スクールに通いたいと思っていて、Tech:Campに行かせてもらいました。 Webアプリケーションのイナズマコースという一週間でRailsでWebサービスを作れるものに行きました。(詳細記事) そこで、Railsのカルキュラムを終わらせ、オリジナルWEBサービス(詳細記事)を作り、Webサービスを作ることががもっと好きになりました。
programing-haru.hatenablog.com
programing-haru.hatenablog.com
また、中学生科学コンテストがありました。 とても面白かった。
９月
中学生科学コンテストの結果がわかり、 中学生科学コンテストで銅賞をとりました。チームの２人と力を合わせてとった銅賞なのでとても嬉しく、達成感がありました。 また、全国中学生プログラミングに応募しました。二次審査で落ちてしまって、残念でした。
１０月
IoTにも興味を持ち始めます。 色々なアイデアも生まれてきます。
１１月
先輩が作ったScopionという言語に刺激を受けました。 中学生科学コンテストの表彰式に行ってきました。
１２月
合唱コンのピアノのコンクールに向けて頑張りまました。受かったので嬉しかったです。 学生LTに行きました。 Google Home mini、Raspberry piを買いました。 HACOというロボットを作っているYokiという会社を見に行きました。 そこで、開発を手伝う予定です。 IoT開発頑張ります。 Webも頑張ります！！！
2018年！！
いい年になるように頑張ります！！
WebVRでWebサイトを三次元で表現してみる！
WebVRでWebサイトを三次元で表現してみる をQiitaでも同じ内容書きました。読んでください。いいね👍お願いします。 qiita.com WebVRでWebサイトを三次元で表現してみる！ この記事は難しいってより とても楽しい記事なので気軽に読んでくださいーー！
WebVRって面白いよね！！
最近話題の、VR。 それがWeb上でできるんです！！！
投稿してきたWebVRについての記事
ちょっと前からWebVRを知って、qiitaで共有してます。
WebVRとは
Webブラウザ上でVRを使える技術のこと。
WebVR とは、ウェブブラウザ上で VR 体験を提供することです。狭義には、ウェブブラウザ上で 3D グラフィクスを表現する技術である WebGL をつかって、VR 体験を提供する技術を指します。 残念なことに、WebGL を直接利用して 3D グラフィクスを作るには、シェーダーやポリゴンといった 3D グラフィクスに特有の技法を学ぶ必要があります。そのため、WebGL を直接扱うのではなく ThreeJS をはじめとする WebGL の記述を楽にしてくれる Javascript ライブラリを用いて作られることが多いです。 WebVR はじめようから引用
WebVRのメリット
ブラウザでＶＲコンテンツを見ることができるので、 インストールが不要。 見たいときにすぐ見れる。
WebVRのデメリット
Unityで作ったような高度なコンテンツはまだできない。 比べると動作が重い。
WebVRを体験
サンプル http://cardboardclub.jp/study/160511/
こんな感じです。スマホをハコスコなどにいれれば,VRっぽくなります。
WebVRを使うには
今現在、簡単にできる方法は２つあります。
- Three.jsを使う
- A-Frameを使う
Three.jsを使う
JSで3Dオブジェクトをかけるライブラリ。 カスタマイズさせることでWebVRにすることが可能。 公式サイトはこちら
A-Frameを使う
Mozillaが作ったWebVR構築ライブラリ。なんとHTMLでWebVRを作れる。これはすごい。 しかも、JSで色々なことがかけます。 公式サイトはこちら
WebVRでWebサイトを三次元で表現してみる！
A-Frameの方がドキュメントが充実してるし、書きやすいので、A-Frameで書きます。
A-Frameの入門
WebVRを開発するときはfirefoxかchromeがおすすめです。 くわしい入門はこちら
A-Frameの導入
<!doctype html> <html> <head> <title>My first VR site</title> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> </a-scene> </body> </html>
scene（シーン）とは、三次元の空間のことです。 a-sceneタグにものを入れてきます。
カーソルを作る
<a-entity camera look-controls wasd-controls> <a-entity cursor="fuse: true;" position="0 0 -3" geometry="primitive: ring; radiusInner: 0.1; radiusOuter: 0.15;" material="color: #acacac; shader: flat; opacity: 0.8"> <a-animation begin="click" easing="ease-in" attribute="scale" dur="150" fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation> <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500" fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation> </a-entity> </a-entity>
これでアニメーションのあるカーソルが作れました。 jsで、カーソルに乗った時の処理をかけます。
<!doctype html> <html> <head> <title>My first VR site</title> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-entity camera look-controls wasd-controls> <a-entity cursor="fuse: true;" position="0 0 -3" geometry="primitive: ring; radiusInner: 0.1; radiusOuter: 0.15;" material="color: #acacac; shader: flat; opacity: 0.8"> <a-animation begin="click" easing="ease-in" attribute="scale" dur="150" fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation> <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500" fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation> </a-entity> </a-entity> <a-box color="red" depth="3" height="3" width="3" position="0 -1 -6"></a-box> <a-sky color="#87ceeb"></a-sky> </a-scene> <script src="/create-cursor/script.js"></script> </body> </html>
var boxEl = document.querySelector('a-box'); // カーソルがぶつかったら拡大 boxEl.addEventListener('mouseenter', function () { boxEl.setAttribute('width', 10); console.log("mouseenter"); }); // カーソルが離れたら元にもどす boxEl.addEventListener('mouseleave', function () { boxEl.setAttribute('width', 3); console.log("mouseleave"); });
このようにすると、ボックスがカーソルに触れた時にボックスが大きくなります。 サンプル https://anharu2394.github.io/web-site-vr/create-cursor/
リストを三次元で表現
例えば
- Home
- About
- Service
- Contact
のようなリストがあった時。
これをWebVRで表現すると、、、、、、、
<!doctype html> <html> <head> <title>My first VR site</title> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-text id="home" value="HOME" align="center" position="-4 0 -4" color="white" geometry="primitive:plane; width: 2"></a-text> <a-text id="about" value="ABOUT" align="center" position="-1.5 0 -4" color="white" geometry="primitive:plane; width: 2"></a-text> <a-text id="service" value="SERVICE" align="center" position="1.5 0 -4" color="white" geometry="primitive:plane; width: 2"></a-text> <a-text id="contact" value="CONTACT" align="center" position="4 0 -4" color="white" geometry="primitive:plane; width: 2"></a-text> <a-entity camera look-controls wasd-controls> <a-entity cursor="fuse: true;" position="0 0 -2" geometry="primitive: ring; radiusInner: 0.1; radiusOuter: 0.15;" material="color: #acacac; shader: flat; opacity: 0.8"> <a-animation begin="click" easing="ease-in" attribute="scale" dur="150" fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation> <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500" fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation> </a-entity> </a-entity> <a-sky color="#87ceeb"></a-sky> </a-scene> <script src="./script.js"></script> </body> </html>
var home = document.querySelector('#home'); var about = document.querySelector('#about'); var service = document.querySelector('#service'); var contact = document.querySelector('#contact'); home.addEventListener('click', function () { location.href = "/web-site-vr/web-site/"; }); about.addEventListener('click', function () { location.href = "/web-site-vr/web-site/about.html"; }); service.addEventListener('click', function () { location.href = "/web-site-vr/web-site/service.html"; }); contact.addEventListener('click', function () { location.href = "/web-site-vr/web-site/contact.html"; });
<!doctype html> <html> <head> <title>My first VR site</title> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-text id="home" value="HOME" align="center" position="0 1.5 -4" color="white" geometry="primitive:plane; width: 2"></a-text> <a-text id="about_now" value="ABOUT" align="center" position="0 0 -4" color="white" geometry="primitive:plane; width: 2"></a-text> <a-entity camera look-controls wasd-controls> <a-entity cursor="fuse: true;" position="0 0 -2" geometry="primitive: ring; radiusInner: 0.1; radiusOuter: 0.15;" material="color: #acacac; shader: flat; opacity: 0.8"> <a-animation begin="click" easing="ease-in" attribute="scale" dur="150" fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation> <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500" fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation> </a-entity> </a-entity> <a-sky color="#87ceeb"></a-sky> </a-scene> <script src="./script.js"></script> </body> </html>
<!doctype html> <html> <head> <title>My first VR site</title> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-text id="home" value="HOME" align="center" position="0 1.5 -4" color="white" geometry="primitive:plane; width: 2"></a-text> <a-text id="service_now" value="SERVICE" align="center" position="0 0 -4" color="white" geometry="primitive:plane; width: 2"></a-text> <a-entity camera look-controls wasd-controls> <a-entity cursor="fuse: true;" position="0 0 -2" geometry="primitive: ring; radiusInner: 0.1; radiusOuter: 0.15;" material="color: #acacac; shader: flat; opacity: 0.8"> <a-animation begin="click" easing="ease-in" attribute="scale" dur="150" fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation> <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500" fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation> </a-entity> </a-entity> <a-sky color="#87ceeb"></a-sky> </a-scene> <script src="./script.js"></script> </body> </html>
<!doctype html> <html> <head> <title>My first VR site</title> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-text id="home" value="HOME" align="center" position="0 1.5 -4" color="white" geometry="primitive:plane; width: 2"></a-text> <a-text id="contact_now" value="CONTACT" align="center" position="0 0 -4" color="white" geometry="primitive:plane; width: 2"></a-text> <a-entity camera look-controls wasd-controls> <a-entity cursor="fuse: true;" position="0 0 -2" geometry="primitive: ring; radiusInner: 0.1; radiusOuter: 0.15;" material="color: #acacac; shader: flat; opacity: 0.8"> <a-animation begin="click" easing="ease-in" attribute="scale" dur="150" fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation> <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500" fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation> </a-entity> </a-entity> <a-sky color="#87ceeb"></a-sky> </a-scene>((ここに脚注を書きます)) <script src="./script.js"></script> </body> </html>
＊ブラウザによって若干、背景の色が異なります。HOME,ABOUT,SERVICE,CONTACTのパネルは、色を指定してないので、ランダムです。
プレビューはこちら
リンクに飛ぶと、、、、、、
こんな感じです
プレビューはこちら
A-Frameのテキストの表示
<a-text id="home" value="HOME" align="center" position="0 1.5 -4" color="white" geometry="primitive:plane; width: 2"></a-text>
a-textタグは文字を表示できるタグですが、geometry属性をつけることで、３Dのものの上に文字を表示することができ、長方形、球、平面などが選べます。 この場合は、『plane』で平面です。色を選ばねければランダムになります。 a-textタグのalign="center"にすることで中央寄せができます。CSSみたいで面白いですね！！
A-Frameのリンクの実装
jsで実装しています。
var home = document.querySelector('#home'); home.addEventListener('click', function () { location.href = "/web-site-vr/web-site/"; });
リンクの実装はいたって簡単です。 idがhomeとつけてあるa-textタグがクリックされた時に、 location.hrefでリンク先を指定してるだけです。
まとめ
WebVRはとても奥が深くて面白いです！！ 基本的なところはWebの開発のように、CSSをいじってるようなのでとても面白いですね！！ ぜひ、WebVR開発をしてみてください。
Qiitaでも同じ内容書きました。読んでください。いいね👍お願いします。 qiita.com
持っている技術書のレビュー(Rails,HTML,Arduino,IoTなど)
あんまり書いてる時間がなかったので前に書いておいた記事です。
あと、 12月16日の学生LTAdventcCalenderで投稿した記事も見てください。
技術書が大好きなので、技術書のレビューをします。
なぜ技術書が好きか
インターネットの情報はごちゃごちゃしてて分かりにくいです。本の方が、情報が整理されている。
[Twitterで話題の画像でイメージ]
左がインターネットの情報で右が本の情報的な感じ。
ツイート詳細
- 図が書いていてとても分かりやすい。
- モチベーションが上がる。
- レベルによって自分にあった本がある(ないこともある)
技術書展行った
技術書が大好きなので、技術書展に行ってきました。技術書のコミケみたいな感じです。 安いし、興味深い内容なのでとても楽しかったです。
Ruby on Rails 5 超入門
私が初めて買った技術書です。Life is Techのキャンプで初めてプログラミングに触れ、Webアプリケーションをやり、面白いなと思ってRailsを勉強しようと思いました。中身はとても分かりやすく題名の通り超入門者向けですね。
Ruby on Rails 5 アプリケーション プログラミング
Tech CampのイナズマコースのWebアプリケーションコースを受講し終わった後に買ってもらった本です。基礎から応用まで幅広く書かれていてとても良いです。詳しくメゾットの説明など書かれています。だいたいRailsの基礎が分かっている人にオススメですね。
HTML5 + CSS3 の新しい教科書
HTML/CSSの理解を深めるために買った本です。
HTML/CSSの基礎が分かりやすく説明されています。
でも、意外と内容が薄くてそこまで必要な本ではなかったです。
Prototyping Lab
Arduino Unoを買い、Arduinoをしっかり学ぼうと思って買った本です。
何かをセンサーで測定したいと思ったらだいたいこの本に書いてあるので便利ですね。
流行りのBLEやesp8266についても書いてあるので面白いですね。
プログラミングコンテストチャレンジブック
JOI(情報オリンピック)にチャレンジしたいと思って買った本です。
プログラミングコンテストの問題の解き方が丁寧に説明されています。
まだ最初の方しか読んでないので最後まで理解していないのですが、こまめに図でプログラムを説明しており、とても分かりやすいです。
これで来年は必ずJOIの本戦に行きたい！！
技術書展で買った本はこんな感じ
A-Frameで注視点カーソルを作る方法（WebVR技術でWebサイトを三次元化する準備 その２）
WebVR技術でWebサイトを三次元化する準備
をしています。 WebVR技術でWebサイトを三次元化する準備その１はこちら WebVRを開発するときはfirefoxを使いましょう。firefoxはWebVR仕様ですが、他のブラウザは違います。ただし、基本的なことはchromeでもできます。
A-Frameでカーソルを作るよ！
A-Frame入門と導入
WebVR技術でWebサイトを三次元化する準備その１ を参考にしてください。
カーソルの作り方
（その１） ソースコードです。
<!doctype html>
<html>
<head>
<title>My first VR site</title>
<script src = "https://aframe.io/releases/0.7.0/aframe.js"></script>
</head>
<body>
<a-scene>
<a-box position="0 5 -5" rotation="0 45 45" scale="2 2 2" color="#EF2D5E">
<a-animation attribute="position" to="0 -4 -5" direction="alternate" dur="3000"
repeat="indefinite"></a-animation>
</a-box>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-scene>
<script type="text/javascript" src="/script.js"></script>
</body>
</html>
var boxEl = document.querySelector('a-box');
// カーソルがぶつかったら拡大
boxEl.addEventListener('mouseenter', function () {
boxEl.setAttribute('scale', {x: 5, y: 5, z: 5});
console.log("mouseenter");
});
// カーソルが離れたら元にもどす
boxEl.addEventListener('mouseleave', function () {
boxEl.setAttribute('scale', {x: 2, y: 2, z: 2});
console.log("mouseleave");
});
javascriptを読み込むときは、bodyの閉じタグの 前にしましょう。そうしないと、エラーが出てしまいます。
<a-camera>
<a-cursor></a-cursor>
</a-camera>
a-cursorタグは通常a-cameraの入れ子にします。
プレビュー
カーソルの作り方
（その２）
<!doctype html>
<html>
<head>
<title>My first VR site</title>
<script src = "https://aframe.io/releases/0.7.0/aframe.js"></script>
</head>
<body>
<a-scene>
<a-entity camera look-controls wasd-controls>
<a-entity cursor="fuse: true;"
position="0 0 -3"
geometry="primitive: ring; radiusInner: 0.1; radiusOuter: 0.15;"
material="color: #acacac; shader: flat; opacity: 0.6">
<a-animation begin="click" easing="ease-in" attribute="scale" dur="150"
fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
<a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500"
fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
</a-entity>
</a-entity>
<a-box position="0 0 -5" rotation="0 45 45" scale="2 2 2" color="#EF2D5E">
</a-box>
</a-scene>
<script type="text/javascript" src="/script.js"></script>
</body>
</html>
// Component to change to a sequential color on click.
AFRAME.registerComponent('cursor-listener', {
init: function () {
var lastIndex = -1;
var COLORS = ['red', 'green', 'blue'];
this.el.addEventListener('click', function (evt) {
lastIndex = (lastIndex + 1) % COLORS.length;
this.setAttribute('material', 'color', COLORS[lastIndex]);
console.log('I was clicked at: ', evt.detail.intersection.point);
});
}
});
A-frameのドキュメントを参考にしました。 A-frameのドキュメントを真似しても、
<a-entity camera >
を
<a-entity camera look-controls wasd-controls>
にしないと、うまく動作しないので注意してください。
プレビュー
hoverした時に、カーソルの円が小さくなります。
まとめ
A-frameではhtmlを数行、jsを数行書くだけで、カーソルを実装することができます。 次はVR上のリンクを実装していきたいと思います。
参考文献
https://aframe.io/docs/0.7.0/components/cursor.html#sidebar https://aframe.io/docs/0.7.0/primitives/a-cursor.html#sidebar (https://aframe.io/docs/0.7.0/primitives/a-cursor.html#sidebar)
WebVR技術でWebサイトを三次元化する準備(中学生でもできるWebVR入門)
WebVRとは
Webブラウザ上でVRを使える技術のこと。
WebVR とは、ウェブブラウザ上で VR 体験を提供することです。狭義には、ウェブブラウザ上で 3D グラフィクスを表現する技術である WebGL をつかって、VR 体験を提供する技術を指します。 残念なことに、WebGL を直接利用して 3D グラフィクスを作るには、シェーダーやポリゴンといった 3D グラフィクスに特有の技法を学ぶ必要があります。そのため、WebGL を直接扱うのではなく ThreeJS をはじめとする WebGL の記述を楽にしてくれる Javascript ライブラリを用いて作られることが多いです。 WebVR はじめようから引用
WebVRのメリット
ブラウザでＶＲコンテンツを見ることができるので、インストールが不要。 見たいときにすぐ見れる。
WebVRのデメリット
Unityで作ったような高度なコンテンツはまだできない。 動作が重い。
WebVRを体験
サンプル http://cardboardclub.jp/study/160511/ こんな感じです。スマホをハコスコなどにいれれば,VRっぽくなります。
WebVRを使うには
今現在、簡単にできる方法は２つあります。
- Three.jsを使う
- A-Frameを使う
Three.jsを使う
JSで3Dオブジェクトをかけるライブラリ。 カスタマイズさせることでWebVRにすることが可能。 公式サイトはこちら
A-Frameを使う
Mozillaが作ったWebVR構築ライブラリ。なんとHTMLでWebVRを作れる。これはすごい。 公式サイトはこちら
WebVR技術でWebサイトを三次元にしてみたい（本題）
Three.jsとA-Frameどちらがそれに向いているといえばA-Frameです。 Three.jsはあくまでも、ブラウザで3Dオブジェクトを作ったりするためのものであり、WebVRに特化してません。 それに比べて、A-FrameはWebVRのためのものなのでThree.jsよりやりやすいです。 しかし、A-Frameは少し重いです。
A-Frameの入門
WebVRを開発するときはfirefoxを使いましょう。firefoxはWebVR仕様ですが、他のブラウザは違います。ただし、基本的なことはchromeでもできます。
A-Frameの導入
まず、HTMLファイルにJSを読み込んでください。
3Dオブジェクトを置く
の中にコードを書きましょう。
a-sceneを追加しました。scene（シーン）とは、三次元の空間のことです。 この中にものを入れてきます。
A-FrameではHTML要素に属性をを指定することで３Dオブジェクトを作れます。 a-skyは空間の色などを決めます。colorで色を決めてます。一番最後に書きましょう。 a-cubeは立方体のオブジェクトを追加する要素です。colorでその箱の色、depth、height、widthでその箱の大きさを決めてます。positionは位置を決めてます。X軸、Y軸、Z軸の順番で指定します。デフォルトは0 です。 プレビュー 
まとめ
これから、WebVR技術でWebサイトを三次元化するために、A-Frameでもっと色々作っていきたいと思います。 A-Frameでは簡単に注視点カーソルが使えたり面白いので頑張ってみます。
10代がRailsでWebサービスを作ってみた
Twittter↓↓
ツイッターをフォロー
Webサービスを作る方法
1.TECHCAMPなどのプログラミングスクールを受講する
これが手っ取り早いです。これでWebサービスのことはほぼ理解しWebサービスをつくれるようになりました。
2.入門書を買う
私のおすすめの本はこれです。初心者向けで簡単に入門できます。しかしこれだけでオリジナルなWebサービスを作ることは難しいです。
Ruby on Rails5 超入門
作ったWebサービス
読書記録＆ランキングサービス
URL→読書記録＆ランキングサービス
こんな感じです。ぜひ使ってみてください。
PC版
スマホ版
このWebサービスの意見を聞かせてください
プログラミング仲間って凄い
これからはプログラミング仲間をつくってプログラミングのスキルをあげたいなと思った。
プログラミング仲間がいればできること
- プログラミングの質問のし合い、教え合いができる。
- 一緒に製品を開発できる
- 開発したものを使って意見をもらえる。
- プログラミングのモチベーションになる。
こんな風にいいことはいっぱいある。
もっとプログラミング仲間を増やしたい！！
自己紹介です
