nino-eye-2.jpg

Three.jsによるWebGLで360度パノラマ表示

【WebGL】Three.jsを使ったWebGLに再挑戦

jQueryのアニメーションをCSS3アニメーションに置き換える

<p>360度動画が流行ってきつつある中で、<br />
弊社でも何人か注目していてちょっと遊んだりしています。</p>
<p>360度で先に思いつくのがTHETAで、<br />
別のものがこんな記事を書いていました。<br />
<a href="/blog/richoh-theta%ef%bc%88%e3%83%aa%e3%82%b3%e3%83%bc%e3%82%b7%e3%83%bc%e3%82%bf%ef%bc%89%e3%81%a7360%e5%ba%a6%e7%94%bb%e5%83%8f%e3%82%92%e6%92%ae%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%80%82%e5%8f%8b/" target="_blank">RICHOH THETA（リコーシータ）で360度画像を撮ってみた。友人結婚式編</a></p>
<p>他にも、<br />
<a href="/designer/cinema4d-%e3%81%a8-vray%e3%81%a7360%e3%81%ae%e4%b8%96%e7%95%8c%e3%82%92%e4%bd%9c%e3%82%8b%e3%80%80%e7%89%a9%e7%8f%8d%e3%81%97%e3%81%84%e3%81%86%e3%81%a1%e3%81%abhero%e5%8b%95%e7%94%bb%e3%81%a8/" target="_blank">cinema4d と vrayで360°の世界を作る　物珍しいうちにhero動画として活用</a></p>
<p>という記事もあり、360度といえばVRということで、</p>
<p><a href="/blog/other/it%e6%a5%ad%e7%95%8c/vr%e7%94%bb%e5%83%8f%e3%83%bb%e5%8b%95%e7%94%bb%e3%82%92%e6%92%ae%e5%bd%b1%e3%81%99%e3%82%8b%e3%81%ab%e3%81%af%e3%80%80cardboard/" target="_blank">VR画像・動画を撮影するには　Cardboard</a></p>
<p>こんな記事もあり、弊社でも注目度は高めな事項です。</p>
<h2>360Channel</h2>
<p>そんな、360度・VRを専門にした動画サイトがありました。</p>
<p>その名も360Channel。</p>
<p><img decoding="async" loading="lazy" width="1024" height="546" src="/uploads-archive/2016/06/5da7d304a6d6f15e5349ba3c15003919-1024x546.jpg" alt="360Channel（サンロクマルチャンネル）"  class="alignnone size-large wp-image-10917" srcset="/uploads-archive/2016/06/5da7d304a6d6f15e5349ba3c15003919-1024x546.jpg 1024w, /uploads-archive/2016/06/5da7d304a6d6f15e5349ba3c15003919-300x160.jpg 300w, /uploads-archive/2016/06/5da7d304a6d6f15e5349ba3c15003919-768x409.jpg 768w, /uploads-archive/2016/06/5da7d304a6d6f15e5349ba3c15003919-228x121.jpg 228w, /uploads-archive/2016/06/5da7d304a6d6f15e5349ba3c15003919.jpg 1250w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p><a href="https://www.360ch.tv/" class="link" target="_blank">360Channel（サンロクマルチャンネル）</a></p>
<p>現在はまだコンテンツは充実してないものの、ANAの工場見学、アイドルの企画、被災地の様子等々、<br />
360度動画の特製を活かしたラインナップになっております。</p>
<p>今後このサイトがどうなっていくかはわかりませんが、<br />
360動画、VRは今後流行っていくとは思うので注目していきたいですね！</p>
<h2>ここがすごい！</h2>
<p>このサイトを見ていてすごいと思ってしまったのは、<br />
動画撮影、動画編集、プレーヤーがどうなっているんだろうという疑問から、<br />
すべて自前で用意するのはかなり大変なことだろうなと理由です。</p>
<p>自前かどうかはわかりませんが、<br />
例えば最初に挙げたTHETAは、専用のアプリで見るか、THETAのサイトにアップロードしないと見れないので、<br />
このサイトではどういう技術を使っているか学びたいところです。。。</p>
<p>今後はそのような技術や機械も明らかになってくると思うので、<br />
とりあえずそんな情報を待ってみたいと思います。</p>


360度動画専門サイト「360Channel」がすごい

<p>私はこれまで、HTML＋CSSでテキストを組む場合で、<br />
左揃えを行う場合、</p>

		<div id="crayon-649540263e536258630715" 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">CSS</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;">
text-align: left;</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-649540263e536258630715-1">1</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-649540263e536258630715-1"><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">left</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>しか、方法がないと思っていました。<br />
この方法を使った場合、テキストの右側は文章によって<br />
がたがたになってしまったり、<br />
中途半端なところで折り返してしまったりして、<br />
あまり美しくない場合が多いのが悩みでした。</p>
<p>しかし、とあるサイトのCSSを調べていると、<br />
たまたま、以下の様な記述を見つけました。</p>

		<div id="crayon-649540263e53a607946156" 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">CSS</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;">
text-align: justify;
text-justify: inter-ideograph;</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-649540263e53a607946156-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263e53a607946156-2">2</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-649540263e53a607946156-1"><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">justify</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263e53a607946156-2"><span class="crayon-e ">text-justify</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">inter-ideograph</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>調べてみると、テキストを両端揃えをするための記述でした。<br />
しかも、すべての主要な最新ブラウザとIE8以上で利用できました。</p>
<p>↓こちらがDEMO</p>
<p><a class="demo" href="/demo/ninomiya/106/">DEMO</a></p>
<p>もっと早く知っていれば…と、恥ずかしながら今更ながらに気づきました。</p>
<p>今後は、どんどん利用していこうと思います。</p>

nino-eye-1.png

知らなかった…CSSでテキストの両端揃えが普通にできた

checkbox,radioがチェックされた時にちょっとアニメーションさせてみる

nino-eye (1).jpg

Canvasで波のアニメーションを描画する

スマホ時のyahooやgoogleにあるメニューを実装してみる

<p>クーポンコードの読み込みなど、<br />
WEBページの中からQRコードの読み取りを行いたい機会があるかもしれません。</p>
<p><a class="link" href="http://d.hatena.ne.jp/nakamura001/20141204/1417701203" target="_blank">Web上で QR コードを読むページ(QRコードリーダー)を作成しました &#8211; 強火で進め</a></p>
<p>↑こちらのサイトで、その方法についてご紹介いただいてましたので、<br />
紹介いたします。</p>
<p>&nbsp;</p>
<p>↓試しに作ってみたDEMO</p>
<p><a class="demo" href="/demo/ninomiya/103/">DEMO</a></p>
<p>JSのコードは、ほとんど紹介されていたサイトからお借りしています。</p>
<h2>仕組み</h2>
<p>大きく、以下の様な手順でQRコードの読み取りが進められています。</p>
<ol>
<li><a href="https://github.com/LazarSoft/jsqrcode">QRコード読み取りのJSライブラリ</a>と、<a href="http://d.hatena.ne.jp/shinichitomita/20120927/1348726674">iOSでのバグ回避のJS</a>を読み込み</li>
<li>ファイルフォームから画像の読み込み</li>
<li>フォームに読み込んだ画像をCanvasに表示して２値化(白黒に)</li>
<li>QRコード読み取りライブラリのAPIを利用してコードを解析し、結果を表示する</li>
</ol>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>大まかには、ファイルAPIとCanvasの連携で画像を読み込み・処理し、<br />
ライブラリで解析することで、コード内容の取得を実現しています。</p>
<p>具体的なコードの解説は、元のサイトの仕組みをそのまま利用させていただいているので、<br />
こちらでは省略させていただきます。</p>
<p>カメラからの読み取りの場合、<br />
QRコード以外の像が写り込んでいると、うまく解析できないようです。</p>
<p>どちらかと言えば、印刷物のQRコードの読み取り向けかもしれません。</p>


nino-eye.png

WEBページからQRコードを読み取る方法のご紹介

10秒止まってしまうことも…jQueryのセレクタの使い方に気をつけよう

pushState() + AJaxでスムーズなコンテンツの遷移

CSS3のtransform3dとjQueryを使って、ひっくり返すアニメーション

<p>海外のブログになりますが、<br />
イラストにて、デザインをする上で重要な知識、スキルとも言える「要素と原則」を丁寧に説明してくれています。</p>
<p><a href="https://designschool.canva.com/design-elements-principles/" target="_blank">Design Elements &amp; Principles</a></p>
<p><img decoding="async" src="/uploads-archive/2016/04/20DP_Infographic-662x3091.jpg" alt="20DP_Infographic-662x3091" width="500" class="aligncenter size-full wp-image-10423" srcset="/uploads-archive/2016/04/20DP_Infographic-662x3091.jpg 662w, /uploads-archive/2016/04/20DP_Infographic-662x3091-64x300.jpg 64w, /uploads-archive/2016/04/20DP_Infographic-662x3091-219x1024.jpg 219w, /uploads-archive/2016/04/20DP_Infographic-662x3091-228x1065.jpg 228w" sizes="(max-width: 662px) 100vw, 662px" /></p>
<p>ブログ内でそれぞれについて詳しく説明してくれていますが、<br />
僕はこの量の英語を読むのはさすがに苦労するので、翻訳したブログが出ることを期待します笑</p>
<p>この大元のブログがいろんなタメになる記事をいっぱい書いているので要チェックですね。</p>
<p><a href="https://designschool.canva.com/" target="_blank" class="link">Canva Design School Blog</a></p>


わかりやすいイラストによるデザインに大事な「要素と原則」

bc39ab4aa42da2e300a76b020e249067-1024x574.jpg

css3のflexboxを使うとすごい簡単になるレイアウトを試してみた

スマホに合ったステップリストをインラインSVGで

CSS3のtransform3dを使った奥行きの効果

<p>テクニカルクリエイターってご存じですか？？</p>
<p>2015年末から2016年頭にかけてサイバーエージェントさんで定義された新しい職種の名称のようです。</p>
<p><a href="http://ameblo.jp/shibuya/entry-12114099278.html" target="_blank">テクニカルクリエイター｜渋谷ではたらく社長のアメブロ</a></p>
<h2>テクニカルクリエイターとは？</h2>
<p>要は、エンジニアとデザイナーの両方の技術・仕事をする人達を呼ぶそうです。<br />
（プログラミングとデザインの両方の知識・技術を持ち合わせた人）</p>
<p>確かに最近は、その垣根がなくなりつつあり、webデザイナーといっても、<br />
ただデザインするだけでなく、コーディングはもちろん、wordpressの構築をも担当するようになっています。</p>
<p>その中で、なんと名乗ればいいのか困る時もあります。<br />
（僕自身もそんな感じで、いつも幅広くやってますと説明していました笑）</p>
<p>そういう時にこのような名称があるとちょっと説明しやすくなるかもしれません。</p>
<p>ただ、「フルスタックエンジニア」なんて言葉もありましたが浸透もいまいちだったので、<br />
(というかフルスタックエンジニアはフロントエンドとサーバサイドの技術を持った人に近いかも)<br />
この名称が定着するかはわかりません。</p>
<p>今回の「テクニカルクリエイター」はサイバーエージェントさん発信なのでもしかしたらこの名称が定着するようになるかもしれません。</p>
<p>こんなサイトもあります。<br />
（これはサイバーエージェントさんが発表する前からあったようです。偶然？？）</p>
<p><a href="http://technical-creator.com/" target="_blank" class="link">テクニカルクリエイター.com</a></p>
<p>このサイトの運営は、今では有名な「UI Crunch」の管理人の小島芳樹さんなので、こちらもどんどん浸透していく可能性は高いです。</p>
<p>テクニカルクリエイター関係ではこんなスライドも。</p>
<p><a href="http://www.slideshare.net/keisukeimura/ss-57090547" target="_blank">テクニカルクリエイターの憂鬱</a></p>
<p>うーん、今後どうなっていくんでしょうか？</p>
<p>この名称、奥さんに言ったら一言だけこう言われました。</p>
<p>「逆にださい」</p>
<p>なんの逆かはわかりませんが、あまりカッコイイ名称とは思えなかったようです笑</p>


テクニカルクリエイターという名称は定着するのだろうか？？

SVGを使った面白そうなテキストのアニメーションを再現してみました

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #デザイナー

2016/06/22

2016/06/15

2016/06/08

2016/06/01

2016/06/01

2016/05/25

2016/05/23

2016/05/18

2016/05/18

2016/05/10

2016/04/27

2016/04/20

2016/04/19

2016/04/13

2016/04/06

2016/03/30

2016/03/26

2016/03/26