<p>React Nativeをいずれ試そうと考えていた所、Vue Nativeなるものが存在しているということを先日知りました。</p>
<p><a href="https://vue-native.io/" target="_blank">Vue Native</a></p>
<h2>React Native</h2>
<p><a href="https://facebook.github.io/react-native/" target="_blank">React Native</a></p>
<p>実はReact Nativeを知ったのもそんな前のことではなく、<br />
整理のためにどんなものか簡潔にいうと、<br />
・reactでアプリ(iOS,Android)が作れる、しかも一つのコードで。<br />
・つまり、Javascriptでアプリが作れる！<br />
・エディタも特に縛りはない<br />
・Chromeでのデバックもできる<br />
・もちろん、Reactの書き方を知っていなければならない</p>
<p>javaやswiftを知らずともアプリが作れるという非常に魅力的な存在です。<br />
私はその辺りの言語に手を伸ばすのは控えており、おのずとアプリ制作に目を向けてなかったのですが、javascriptでできるのであれば話は別で、自分でも作れることが可能であればいずれやってみたいと思っていました。</p>
<h2>Vue Native</h2>
<p>そして冒頭述べた、Vue Nativeの存在を知りVueでも可能ということにさらなる衝撃を受けました。</p>
<p>今学ぼうとしている順番としては、<br />
1.Vue + Nuxt<br />
2.React + Redux<br />
3.React Native<br />
だったので、React Nativeはまだ先でした。</p>
<p>このVue Nativeの存在で、<br />
1.Vue + Nuxt<br />
2.Vue Native<br />
3.React + Redux<br />
4.React Native<br />
に変更しようかなと考えています。</p>
<p>このVue Nativeは、React NativeのAPIを使用しているのことなので、<br />
感覚的にはReact NativeだけどVueで書けるようになった、みたいな感覚なのでしょうか？</p>
<p>まだ試すことができていないので、<br />
試されている記事を紹介します。</p>
<p><a href="https://qiita.com/nitaking/items/5c6fb6990d3bdb5769cc" target="_blank">Vue NativeでTodoアプリを作ろう その１ &#8211; Qiita</a><br />
<a href="https://qiita.com/taquaki-satwo/items/523f65723cf2bf7b049a" target="_blank">さっそくVue NativeでHello Worldしてみた &#8211; Qiita</a><br />
<a href="https://note.mu/ymfn4685/n/ne71a120b346f" target="_blank">話題のVue Nativeでサクッと「Hello World」してみた｜とっとこふな太郎＊⊿｜note</a></p>
<h2>Vue + Nuxt の話</h2>
<p>先程述べた様に、今はVue + Nuxtをやっています。<br />
Nuxtの話はこちら<br />
<a href="https://ja.nuxtjs.org/guide" target="_blank">はじめに &#8211; Nuxt.js</a></p>
<p>今回、一つのアウトプットして、<br />
<a href="https://qiita.com/aytdm/items/0096e497837ec3aa8b35#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88" target="_blank">Nuxt.jsでQiita投稿一覧サービスを作る &#8211; Qiita</a><br />
こちらをがっつり参考にして試しに制作してみました。</p>
<p>少し手を加えたりしましたが、制作したもの以下からご覧になれます。<br />
<a href="http://try.alan-trigger.info/" target="_blank" class="demo">DEMO</a></p>
<p>CSSのフレームワーク「element」を使用しているので、簡単かつキレイにUIが作れています。</p>


React NativeのVue版、Vue Nativeというものが存在していた

DOMmy.js

large_6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

medium_6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

small_6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

thumbnail_6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

6b46e395563f9bcf2edcf0a02c7000f1-1024x507.png

簡単なメモ帳に、markdown形式、ダウンロード、削除のモーダルの機能を追加してみた

medium_nino_eye130625.png

small_nino_eye130625.png

thumbnail_nino_eye130625.png

nino_eye130625.png

Three.jsで360°パノラマ動画を表示する

フロントエンドのフレームワーク「materialize」を使って簡単なメモ帳を作ってみた

<p class="code-line">2010年12月に WebGL が Chrome で利用可能となり、<br />
2011年には3月に Firefox、7月に Safari で利用可能となり、<br />
2013年10月には IE の最終版で WebGL も利用可能な IE11 が登場し、<br />
一般的なほとんどのブラウザで WebGL が利用可能となりました。</p>
<p class="code-line">それから5年経った2018年、ようやく GPU などのハード面でも WebGL の動作環境が一般的に整い、<br />
今、WebGL の実装の機会が増え、必要性も求められつつあります。</p>
<p class="code-line">私もそんな状況も踏まえ、WebGL の技術習得を本格的に目指そうと思い、<br />
WebGL のライブラリである Three.js について、これまでも何度か勉強してきたのですが、<br />
Three.js の 公式 DEMO をコピーして画像やモデルを差し替える程度に留まってしまい、<br />
技術を応用して新たに何かを作り出すというところまで行きつけずにいました。</p>
<p class="code-line">これはひょっとして、WebGL そのものや、3D グラフィックの仕組みについて理解できていないのが原因なのではないかと思うようになり、<br />
改めて素の WebGL について、学ぶことにいたしました。</p>
<p class="code-line">WebGL については、以下のサイトを中心に学ばせていただきました。<br />
<a class="link" title="https://wgld.org/" href="https://wgld.org/" target="_blank" rel="noopener">wgld.org</a><br />
（非常に詳しく、わかりやすく、これから WebGL を学ぶ方にとてもおすすめです。）</p>
<p class="code-line">こちらを中心に学ばせていただいた内容を基に、<br />
WebGL の基本の基本となる仕組みについて、私なりにまとめてみました。</p>
<ol>
<li class="code-line"><a href="#webgl1">WebGL とは</a></li>
<li class="code-line"><a href="#webgl2">WebGL における描画までの手順</a></li>
<li class="code-line"><a href="#webgl3">GLSL(OpenGL Shading Language) について</a></li>
<li class="code-line"><a href="#webgl4">シェーダーに渡す情報の基本となるモデル・ビュー・プロジェクションについて</a></li>
</ol>
<h2 id="webgl1" class="code-line">1. WebGL とは</h2>
<p class="code-line">WebGL とは、WEB ページ上で、OpenGL ES 2.0 を扱えるようにするための、JavaScript API のことです。<a title="https://ja.wikipedia.org/wiki/OpenGL" href="https://ja.wikipedia.org/wiki/OpenGL" target="_blank" rel="noopener">OpenGL</a> とは、GPU による高速な 2D・3D の画像描画処理を行い、画面に表示するための仕組みを提供しているライブラリで、オープン標準として、多くの GPU で利用可能です。そのため、WebGL を利用すると、WEB ページ上で高速な 2D・3D の画像描画処理が可能になります。<br />
WebGL で扱うことになる OpenGL ES 2.0 では、プログラマブルシェーダーを利用できるので、柔軟な描画を実現することができます。ただ、プログラマブルシェーダーの利用には <a href="https://ja.wikipedia.org/wiki/GLSL" target="_blank" rel="noopener">GLSL(OpenGL Shader Language)</a> というＣ言語ベースのプログラム言語での記述が必要となります。</p>
<h2 id="webgl2" class="code-line">2. WebGL における描画までの手順</h2>
<ol>
<li class="code-line">HTML から Canvas 要素を取得</li>
<li class="code-line">Canvas から WebGL コンテキストの取得</li>
<li class="code-line">シェーダーのコンパイル（シェーダーは GLSL で記述）</li>
<li class="code-line">モデルデータを用意（各頂点の座標・色・法線など）</li>
<li class="code-line">VBO(Vertex Buffer Object) の生成と通知</li>
<li class="code-line">（ポリゴンを扱う場合）IBO(Index Buffer Object) の生成と通知</li>
<li class="code-line">座標変換行列の生成と通知</li>
<li class="code-line">描画命令の発行</li>
<li class="code-line">Canvas を更新してレンダリング</li>
</ol>
<p class="code-line">参考: <a title="https://wgld.org/d/webgl/w014.html" href="https://wgld.org/d/webgl/w014.html" target="_blank" rel="noopener">wgld.org | WebGL: ポリゴンのレンダリング</a> より改変</p>
<h2 id="webgl3" class="code-line">3. GLSL(OpenGL Shading Language) について</h2>
<p class="code-line">GLSL(OpenGL Shading Language) は、OpenGL ES 2.0 以降で標準実装されたプログラマブルシェーダーを記述するためのプログラム言語です。 GLSL で記述するシェーダーは、以下の二つです。</p>
<ol>
<li class="code-line">頂点シェーダー: 頂点に関する情報</li>
<li class="code-line">フラグメントシェーダー: 色の情報 GLSL では描画処理を行うためのデータの型や組込関数が用意されています。以下はデータの一例です。</li>
</ol>
<h3 id="" class="code-line">変数の修飾子</h3>
<ul>
<li class="code-line">attribute 修飾子: 頂点の情報をシェーダー側で受け取る変数</li>
<li class="code-line">uniform 修飾子: すべての頂点に一律で渡す情報を渡すことが可能（モデル・ビュー・プロジェクションをかけ合わせた座標変換行列を WebGL から渡すのに利用）</li>
<li class="code-line">varying 修飾子: 頂点シェーダーとフラグメントシェーダーの橋渡し</li>
</ul>
<h3 id="" class="code-line">変数の型</h3>
<ul>
<li class="code-line">vec*: ベクトル; vec2 〜 vec4</li>
<li class="code-line">mat*: 正方行列; mat2 〜 mat4</li>
<li class="code-line">int: 整数</li>
<li class="code-line">float: 浮動小数点</li>
<li class="code-line">bool: 真偽</li>
</ul>
<p>GLSL の例</p>
<h4>頂点シェーダー</h4>
<p></p>

		<div id="crayon-649540264dae1786875938" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">頂点シェーダー</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">C</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
attribute vec3 position;
attribute vec4 color;
uniform   mat4 mvpMatrix;
varying   vec4 vColor;

void main(void) {
  vColor = color;
  gl_Position = mvpMatrix * vec4(position, 1.0);
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264dae1786875938-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-2">2</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-4">4</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-6">6</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae1786875938-8">8</div><div class="crayon-num" data-line="crayon-649540264dae1786875938-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264dae1786875938-1"><span class="crayon-m">attribute</span><span class="crayon-h"> </span><span class="crayon-e">vec3 </span><span class="crayon-i">position</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-2"><span class="crayon-m">attribute</span><span class="crayon-h"> </span><span class="crayon-e">vec4 </span><span class="crayon-i">color</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-3"><span class="crayon-e">uniform&nbsp;&nbsp; </span><span class="crayon-e">mat4 </span><span class="crayon-i">mvpMatrix</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-4"><span class="crayon-e">varying&nbsp;&nbsp; </span><span class="crayon-e">vec4 </span><span class="crayon-i">vColor</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-6"><span class="crayon-t">void</span><span class="crayon-h"> </span><span class="crayon-e">main</span><span class="crayon-sy">(</span><span class="crayon-t">void</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">vColor</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">color</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae1786875938-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">gl_Position</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">mvpMatrix</span><span class="crayon-h"> </span>*<span class="crayon-h"> </span><span class="crayon-e">vec4</span><span class="crayon-sy">(</span><span class="crayon-i">position</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">1.0</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae1786875938-9"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h4>フラグメントシェーダー</h4>
<p></p>

		<div id="crayon-649540264dae6022538408" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">フラグメントシェーダー</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">C</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
precision mediump float;
varying vec4 vColor;
void main(void) {
  gl_FragColor = vColor;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264dae6022538408-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae6022538408-2">2</div><div class="crayon-num" data-line="crayon-649540264dae6022538408-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264dae6022538408-4">4</div><div class="crayon-num" data-line="crayon-649540264dae6022538408-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264dae6022538408-1"><span class="crayon-e">precision </span><span class="crayon-e">mediump </span><span class="crayon-t">float</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae6022538408-2"><span class="crayon-e">varying </span><span class="crayon-e">vec4 </span><span class="crayon-i">vColor</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae6022538408-3"><span class="crayon-t">void</span><span class="crayon-h"> </span><span class="crayon-e">main</span><span class="crayon-sy">(</span><span class="crayon-t">void</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264dae6022538408-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">gl_FragColor</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">vColor</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264dae6022538408-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2 id="webgl4" class="code-line">4. シェーダーに渡す情報の基本となるモデル・ビュー・プロジェクションについて</h2>
<p>WebGL での描画処理までの過程では、シェーダーに頂点情報を渡す必要がありますが、<br />
その頂点情報はモデル・ビュー・プロジェクションの３つの座標を掛け合わされた情報で、<br />
WebGL を理解する上でこの３つについての理解はとても重要になりますので、ご紹介いたします。</p>
<p><a href="/uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-13909" src="/uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6.png" alt="" width="725" height="495" srcset="/uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6.png 725w, /uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6-300x205.png 300w, /uploads-archive/2018/05/0594cb54b580680d3862632e4299b9e6-228x156.png 228w" sizes="(max-width: 725px) 100vw, 725px" /></a></p>
<p class="code-line code-active-line">モデルとは、描画する対象のことです。モデルの座標を回転させたりして変換することをモデル変換と呼びます ビューとは、対象を撮影するカメラにあたります。こちらの変換はビュー変換と呼びます。 プロジェクションとは、描画する範囲や遠近の状態のことです。こちらの変換はプロジェクション変換と呼びます</p>
<p>&nbsp;</p>
<p>↓ 参考までに、学習中に作った DEMO です。<br />
<a class="demo" href="https://sterfield.co.jp/demo/ninomiya/138/">DEMO</a></p>
<p>ソース元: <a href="https://wgld.org/d/webgl/w036.html" target="_blank" rel="noopener">wgld.org | WebGL: 点や線のレンダリング</a></p>

small_0594cb54b580680d3862632e4299b9e6.png

thumbnail_0594cb54b580680d3862632e4299b9e6.png

0594cb54b580680d3862632e4299b9e6.png

WebGLの仕組みについてまとめ直してみました

【JavaScript】オブジェクト(連想配列)･JSON の操作を簡単にするJSツール作りました

<p>これまで、VRをWebサイトで作るのはハードルが高い印象がありましたが、</p>
<p>A-Frame というライブラリを使うと、場合によってはJavaScriptが書けなくても、HTMLのような感覚で簡単にWEBサイトでVRを実現することができます。</p>
<p>今回はその A-Frame を使って、VRをWEBサイトで作ってみました。</p>
<p>↓作ってみたもの</p>
<p><a class="demo" href="https://sterfield.co.jp/demo/ninomiya/135/">DEMO</a></p>
<h2>ソースコード</h2>
<h3>HTMLのhead</h3>
<p></p>

		<div id="crayon-649540264c6d4707919173" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML head</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script src="https://aframe.io/releases/0.7.0/aframe.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"&gt;&lt;/script&gt;
&lt;script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264c6d4707919173-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d4707919173-2">2</div><div class="crayon-num" data-line="crayon-649540264c6d4707919173-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264c6d4707919173-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"https://aframe.io/releases/0.7.0/aframe.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d4707919173-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d4707919173-3"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"http://html2canvas.hertzen.com/dist/html2canvas.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h3>HTMLのbody</h3>
<p></p>

		<div id="crayon-649540264c6d8071188107" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div class="asset"&gt;
  &lt;div class="panel" id="panel"&gt;
    &lt;figure class="panel__figure"&gt;&lt;img src="img/img_photo_01.jpg" alt="画像サンプル"&gt;&lt;/figure&gt;
    &lt;h3 class="panel__title"&gt;パネルのタイトル&lt;/h3&gt;
    &lt;p class="panel__summary"&gt;パネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入ります&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;a-scene&gt;
  &lt;a-sky src="img/Tropical_Beach_4k.jpg" rotation="0 -90 0"&gt;&lt;/a-sky&gt;
  &lt;a-box position="-10 -10 -1" rotation="0 45 0" width="5" height="5" depth="5" color="#4CC3D9"&gt;&lt;/a-box&gt;
  &lt;a-plane position="0 0 -1" width="16" height="16" material="shader:html;target: #panel;"&gt;&lt;/a-plane&gt;
  &lt;a-entity camera wasd-controls look-controls position="0 0 12"&gt;&lt;/a-entity&gt;
&lt;/a-scene&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264c6d8071188107-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-2">2</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-4">4</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-6">6</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-8">8</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-10">10</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-12">12</div><div class="crayon-num" data-line="crayon-649540264c6d8071188107-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264c6d8071188107-14">14</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264c6d8071188107-1"><span class="crayon-h">&lt;</span><span class="crayon-e">div </span><span class="crayon-t">class</span>=<span class="crayon-s">"asset"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">div </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel"</span><span class="crayon-h"> </span><span class="crayon-i">id</span>=<span class="crayon-s">"panel"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">figure </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel__figure"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span><span class="crayon-e">img </span><span class="crayon-i">src</span>=<span class="crayon-s">"img/img_photo_01.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">alt</span>=<span class="crayon-s">"画像サンプル"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">figure</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-e">h3 </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel__title"</span><span class="crayon-h">&gt;</span>パネルのタイトル<span class="crayon-h">&lt;</span>/<span class="crayon-i">h3</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">p</span><span class="crayon-h"> </span><span class="crayon-t">class</span>=<span class="crayon-s">"panel__summary"</span><span class="crayon-h">&gt;</span>パネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入りますパネルのテキストが入ります<span class="crayon-h">&lt;</span>/<span class="crayon-i">p</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">div</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-7"><span class="crayon-h">&lt;</span>/<span class="crayon-i">div</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-8">&nbsp;</div><div class="crayon-line" id="crayon-649540264c6d8071188107-9"><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-i">scene</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">sky </span><span class="crayon-i">src</span>=<span class="crayon-s">"img/Tropical_Beach_4k.jpg"</span><span class="crayon-h"> </span><span class="crayon-i">rotation</span>=<span class="crayon-s">"0 -90 0"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">sky</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">box </span><span class="crayon-i">position</span>=<span class="crayon-s">"-10 -10 -1"</span><span class="crayon-h"> </span><span class="crayon-i">rotation</span>=<span class="crayon-s">"0 45 0"</span><span class="crayon-h"> </span><span class="crayon-i">width</span>=<span class="crayon-s">"5"</span><span class="crayon-h"> </span><span class="crayon-i">height</span>=<span class="crayon-s">"5"</span><span class="crayon-h"> </span><span class="crayon-i">depth</span>=<span class="crayon-s">"5"</span><span class="crayon-h"> </span><span class="crayon-i">color</span>=<span class="crayon-s">"#4CC3D9"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">box</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">plane </span><span class="crayon-i">position</span>=<span class="crayon-s">"0 0 -1"</span><span class="crayon-h"> </span><span class="crayon-i">width</span>=<span class="crayon-s">"16"</span><span class="crayon-h"> </span><span class="crayon-i">height</span>=<span class="crayon-s">"16"</span><span class="crayon-h"> </span><span class="crayon-i">material</span>=<span class="crayon-s">"shader:html;target: #panel;"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">plane</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540264c6d8071188107-13"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-h">&lt;</span><span class="crayon-i">a</span>-<span class="crayon-e">entity </span><span class="crayon-e">camera </span><span class="crayon-i">wasd</span>-<span class="crayon-e">controls </span><span class="crayon-i">look</span>-<span class="crayon-e">controls </span><span class="crayon-i">position</span>=<span class="crayon-s">"0 0 12"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">entity</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264c6d8071188107-14"><span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span>-<span class="crayon-i">scene</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2>参考サイト</h2>
<p><a class="link" href="http://vr-lab.voyagegroup.com/entry/2016/11/16/122115#HTML-Shader%E3%81%A8html2canvas%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A8%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF" target="_blank" rel="noopener">A-FrameとHTML Shaderで美しい日本語テキストを表示する方法 &#8211; VOYAGE GROUP VR室ブログ</a></p>

A-Frame で簡単にVRを実装する

javascriptフレームワークのvue.jsを使ってみる④（vue-router）

D3.jsでアニメーション付き棒グラフを作ってみました

CodePenでReactを試してToDoリストを作ってみた

【jQuery】放物線を使ったカートインアニメーション

CSS3のPerspectiveを使ったパララックス

Three.jsでCSS3の3D描画ができた！

small_02d20a80b9e91d99c12c5823ea60be33.png

thumbnail_02d20a80b9e91d99c12c5823ea60be33.png

02d20a80b9e91d99c12c5823ea60be33.png

Googleスプレッドシートの更新をChatWorkへ通知してみた

small_nino-eye1.jpg

thumbnail_nino-eye1.jpg

nino-eye1.jpg

JSDoc で JavaScript のコメントを書こう

javascriptフレームワークのvue.jsを使ってみる③（簡単TODOリスト）

<p>CSS3 や SVG など、HTML5 のアニメーションに対応したブラウザが普及したことで、<br />
アニメーションを実装するのが以前と比べて簡単になってきました。</p>
<p>そのため、以前と比べるとアニメーションを WEB ページの多くの要素に使う機会が増えてきます。</p>
<p>ただ、自力でとなると、どうしても技術や工数の問題などで、アニメーションの種類が簡単なものに偏り、ワンパターンになってしまいがちなのが、最近気になってきていました。</p>
<p>そこで、もっとリッチなアニメーションを実装するためのライブラリがないか探していたところ、以下のサイトで「mo.js」というライブラリが紹介されているのを見つけました。</p>
<p><a class="link" href="http://creator.dwango.co.jp/6527.html" target="_blank" rel="noopener noreferrer">生き生きとしたモーションを作れるJSライブラリ、mo.jsがすごい | dwango creators&#8217; blog（ドワンゴクリエイターズブログ）</a></p>
<p>デモを見ると、とても凝ったアニメーションが実装されており、<br />
是非使ってみたいと思いました。</p>
<p><a class="link" href="http://mojs.io/" target="_blank" rel="noopener noreferrer">mo · js &#8211; Motion Graphics For The Web</a></p>
<p>mo.js は HTML の CSS3 と SVG によりアニメーションが実装されるため、<br />
Canvas のように枠にとらわれることもなければ、HTML + CSS3 でのアニメーションのように、形が制限されることもありません。<br />
また、IE9 以上のブラウザで使うことができるなど、多くのブラウザで使うことができるのも特徴です。</p>
<p>以下、mo.js を使って作ったものです。</p>
<p><a class="demo" href="/demo/ninomiya/128/">DEMO</a></p>
<p>使ってみての感想としては、難易度が高めという印象を受けました。<br />
理由は、</p>
<ul>
<li>JavaScript や SVG について、ある程度使い慣れている前提のライブラリになっているよう</li>
<li>習得するためには、<a href="http://mojs.io/tutorials/shape/" target="_blank" rel="noopener noreferrer">チュートリアル</a>を実践しながら、長い時間をかけて学習する必要がある</li>
<li>チュートリアルのデモコードが ECMAScript 6 で書かれているところがあるので、IEや旧ブラウザに対応させるために、そのままのコードは使えない場合がある(でもページからコードを引っこ抜く必要がある)</li>
</ul>


mo.jsを使った心地よいアニメーション

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #script

2018/08/23

2018/07/11

2018/07/11

2018/07/11

2018/06/13

2018/05/10

2018/02/23

2018/01/17

2017/12/13

2017/11/15

2017/11/14

2017/10/11

2017/09/30

2017/08/17

2017/08/10

2017/06/13

2017/05/10

2017/04/12