CSS3の:targetセレクタを使って、アンカーリンクだけでpJaxのような演出

サーバー監視ツールの導入

<p>コーダーが作ってくれたウェブページを確認するのに、今まではChromeの「要素を検証」を使うことが多かったのですが、はるかに効率化が出来るツールを教えて頂きました。</p>
<p>教えて頂いた方は、日本でも有数の制作会社様で時には何千ページにも及ぶ大規模サイトを作って来た会社さんで同時に何千ページのチェックをしてきたことで圧倒的なノウハウを構築されていました。</p>
<p>「要素を検証」や「ソースを表示」するだけでは、不十分でチェックをするには、Firefoxの拡張機能その名も「<a href="https://addons.mozilla.org/ja/firefox/addon/web-developer/">Web Developer</a>」です。</p>
<h2>何故Firefoxなのか</h2>
<p>chrome版でも同じ作者が「<a href="https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm">WebDeveloper</a>」を公開していますが、Firefoxのみツールバーを追加することが出来ます。</p>
<p><a href="/uploads-archive/2016/09/98c11c99f7759ba00841adcabf40669d.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-11882" src="/uploads-archive/2016/09/98c11c99f7759ba00841adcabf40669d.png" alt="スクリーンショット_H28_09_06_14_21" width="2554" height="218" srcset="/uploads-archive/2016/09/98c11c99f7759ba00841adcabf40669d.png 2554w, /uploads-archive/2016/09/98c11c99f7759ba00841adcabf40669d-300x26.png 300w, /uploads-archive/2016/09/98c11c99f7759ba00841adcabf40669d-768x66.png 768w, /uploads-archive/2016/09/98c11c99f7759ba00841adcabf40669d-1024x87.png 1024w, /uploads-archive/2016/09/98c11c99f7759ba00841adcabf40669d-228x19.png 228w" sizes="(max-width: 2554px) 100vw, 2554px" /></a></p>
<p>ツールバーがあるかないかでこれまた作業効率が一段と変わります。</p>
<p>余談ですが、chromeが出る前からWebの仕事をしている方ってFirefoxの根強いファンが多い気がします。</p>
<h2>便利機能抜粋</h2>
<h3>altを表示</h3>
<p><a href="/uploads-archive/2016/09/0a1e3fc63ccedf5895f54cc4aeefd0ea.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11885" src="/uploads-archive/2016/09/0a1e3fc63ccedf5895f54cc4aeefd0ea-300x158.png" alt="越境EC｜システム開発｜スターフィールド株式会社" width="300" height="158" srcset="/uploads-archive/2016/09/0a1e3fc63ccedf5895f54cc4aeefd0ea-300x158.png 300w, /uploads-archive/2016/09/0a1e3fc63ccedf5895f54cc4aeefd0ea-768x406.png 768w, /uploads-archive/2016/09/0a1e3fc63ccedf5895f54cc4aeefd0ea-1024x541.png 1024w, /uploads-archive/2016/09/0a1e3fc63ccedf5895f54cc4aeefd0ea-228x120.png 228w, /uploads-archive/2016/09/0a1e3fc63ccedf5895f54cc4aeefd0ea.png 1276w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>こんな感じで画像に隣接する場所にaltを表示してくれます。</p>
<p>altってブラウザ表示しているだけでは見えないので見落としがちになるので本当にありがたいです。</p>
<p>他にも幅や高さを表示したり、パスを表示したり、ファイルサイズを表示したりといったソースを見なければ分からないことが画面上に表示できます。</p>
<h3>フォームの情報を表示</h3>
<p><a href="/uploads-archive/2016/09/aaf9661e090fc609628512139b616575.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11886" src="/uploads-archive/2016/09/aaf9661e090fc609628512139b616575-300x158.png" alt="お問い合わせ CAT S EYE" width="300" height="158" srcset="/uploads-archive/2016/09/aaf9661e090fc609628512139b616575-300x158.png 300w, /uploads-archive/2016/09/aaf9661e090fc609628512139b616575-768x406.png 768w, /uploads-archive/2016/09/aaf9661e090fc609628512139b616575-1024x541.png 1024w, /uploads-archive/2016/09/aaf9661e090fc609628512139b616575-228x120.png 228w, /uploads-archive/2016/09/aaf9661e090fc609628512139b616575.png 1276w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>もう一つチェックする上で時間を要すものがフォームですが、これもいろいろな操作が出来て、フォームの情報を画面内に表示したり、チェックボックスを外したりといったことが出来ます。</p>
<h3>その他</h3>
<p><a href="/uploads-archive/2016/09/f81c007da077c22997be1645a4adcd2e.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11887" src="/uploads-archive/2016/09/f81c007da077c22997be1645a4adcd2e-300x181.png" alt="越境EC｜システム開発｜スターフィールド株式会社_と_Downloads" width="300" height="181" srcset="/uploads-archive/2016/09/f81c007da077c22997be1645a4adcd2e-300x181.png 300w, /uploads-archive/2016/09/f81c007da077c22997be1645a4adcd2e-768x464.png 768w, /uploads-archive/2016/09/f81c007da077c22997be1645a4adcd2e-1024x619.png 1024w, /uploads-archive/2016/09/f81c007da077c22997be1645a4adcd2e-228x138.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>チェック用途ではないですが、そもそもWebDeveloperの機能として、CSSファイルをブラウザ内で閲覧、編集したり、様々なブロック、要素の情報を表示することが可能です。</p>
<h2>まとめ</h2>
<p>普段使いは変わらずChromeを使いつつチェック検証用のブラウザとしてFirefoxが決まりました。</p>


ウェブデザイン確認ツール「Web Developer」

<p>通常HTTPリクエストが行われる際に、ヘッダーの中にHTTP_ACCEPT_LANGUAGEが送信される。<br />
HTTP_ACCEPT_LANGUAGEの一覧には下記が参考になる。</p>
<p><a href="http://www.metamodpro.com/browser-language-codes">Web browser language identification codes</a></p>
<p>注意すべき点は、英語では、オーストラリア英語(en-au)、シンガポール英語(en-sg)など、中国語でも、台湾(zh-tw)、シンガポール(zh-sg)などといったように、細かく指定される点だろう。</p>
<p>webの設定言語を条件分岐する際は、IPかこのブラウザの設定言語が一般的ではないだろうか。</p>
<h2>参考</h2>
<p><a href="http://easyramble.com/get-language-setting-by-javascript.html">JavaScript でブラウザの言語設定を取得</a><br />
<a href="http://qiita.com/tadsan/items/24cf40f067295df2ffb8">Accept-Languageの実装例</a><br />
<a href="http://testpage.jp/m/tool/ua.php">ブラウザのユーザーエージェント・IPアドレスの確認</a></p>


ブラウザの設定言語

<h3>はじめに</h3>
<div style="padding-left: 15px;">
  Webアプリケーション開発に従事している人でも意外と知らないライセンス</p>
<p>  その主要なものを特徴とともに挙げます</p></div>
<h3>ライセンスの紹介</h3>
<div style="padding-left: 15px;">
<ul>
<li>GNU GPL<br />
<blockquote><p>
        オープンソースで最も有名であろうライセンス</p>
<p>        特徴は<br />
        ・再配布時の著作権表示<br />
        ・無保証<br />
        ・アプリケーションのGPLライセンス継承義務</p>
<p>        上記から「GPLウイルス」とも呼ばれる。</p>
<p>        CMSなどのパッケージでは本体がサーバーにあるため<br />
        「第三者への再配布」にあたらないためソースコードの開示義務は無い。<br />
        ただしバージョン3にて、この部分の改定提案がされている。
      </p></blockquote>
</li>
<li>LGPL<br />
<blockquote><p>
        GPLの規制力が緩和したもの</p>
<p>        ベースはGPLであり、<br />
        動的に読み込む外部モジュールの場合はLGPLの継承義務が無い。
      </p></blockquote>
</li>
<li>MIT, 修正済みBSD<br />
<blockquote><p>
        BSDと並ぶ格段に緩いライセンス</p>
<p>        特徴は<br />
        ・再配布時に著作権表示を残す<br />
        ・無保証である</p>
<p>        上記を守るだけでよい。
      </p></blockquote>
</li>
<li>CC (Creative Commons)<br />
<blockquote><p>
        条ずつのライセンスと違い<br />
        「著作物全般」に使用できるライセンス</p>
<p>        条件は<br />
        ・著作権者のクレジット表記<br />
        のみです。組み合わせは可能。</p>
<p>        その特徴からWebデザイナーに親しみが多いものです。</p>
<p>        ・クレジット表記義務<br />
        ・非営利の場合のみの使用許可<br />
        ・改変の禁止<br />
        ・同一条件の継承義務
        </p></blockquote>
</li>
</ul>
</div>
<h3>余談</h3>
<div style="padding-left: 15px;">
  筆者も自分が関わるときしか調べない程度に知らないですが<br />
  jQueryからRailsのgemまでプラグインの豊富なITにおいて知ってて損は無いかなと思わされます。</p>
<p>  プラグイン制作者やCMSパッケージ制作、ネイティブアプリの組み込みなどに携わっている方は詳しくなっておいた方が良さそうです</p></div>
<h3>関連URL</h3>
<div style="padding-left: 15px;">
https://www.gnu.org/licenses/gpl-faq.ja.html
</div>


ライセンスに関する備忘録

ちょっとかっこいいサイトのMENUを再現してみました

<p>マッチングサイトを制作する場合に情報が多いという点からwordpressという選択肢があると思いますが、マッチングや会員登録の機能を追加するのにはプラグインを駆使してもなかなかの手練れでなければ難しいところです。</p>
<p>そこで他にもっと簡単な方法はないかと探してみると、実はど真ん中のCMSが存在していました、その名もosclass。</p>
<p><a href="https://osclass.org/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11838" src="/uploads-archive/2016/08/1.gif" alt="1" width="640" height="585" /></a></p>
<p>osclassはwordpress同様、オープンソースです。どうやらインドの方が開発したそうです。</p>
<p>なんとデフォルトで会員登録機能やマッチング機能が備わっています。工数を考えるとosclassを使った方が早い！</p>
<p>wordpressに比べるとマイナーなので、それほど情報はありませんがこちらのサイトでosclassのインストール方法や日本語化のプラグインなど詳しく記事を書いてらっしゃるのでご参考下さい。</p>
<p>参考サイト：<a href="https://triz-web.com/toronomado/howto-install-for-osclass/">https://triz-web.com/toronomado/howto-install-for-osclass/</a></p>
<p>管理画面はこんな感じで、どことなくwordpressに似ていて入りやすいかなという印象です。</p>
<p><a href="/uploads-archive/2016/08/3.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11845" src="/uploads-archive/2016/08/3.gif" alt="3" width="640" height="565" /></a></p>
<p>デザインに関してはは、今一つな感じですがデモサイトはこんな感じです。</p>
<p><a href="https://demo.osclass.org/realestate/">不動産のデモサイト</a></p>
<p><a href="https://demo.osclass.org/cars/">車のデモサイト</a></p>


マッチングサイトを作るならosclassで

<p>仕事で常用しているメッセージサービス、コミュニケーションサービスとして、Skype、Facebookメッセンジャー、GoogleHongout、Gmailを2アカウント、chatwork、後は個人用Gmailやアカウント持っているだけとなっているが、slack、Whatsupなど溢れ返っています。</p>
<p>常用しているものは常にchromeのタブでピン留めしているというな状態でした。</p>
<p>そうなるとやはり便利な一元管理ツールを開発する人が現れて、今回は二つ見つけたのでご紹介です。</p>
<h2>オールインワンメッセンジャー</h2>
<p><a href="/uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11825" src="/uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6-300x193.png" alt="482fac77735ce46942cd5b958dd508b6" width="300" height="193" srcset="/uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6-300x193.png 300w, /uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6-768x493.png 768w, /uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6-228x146.png 228w, /uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6.png 984w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="https://chrome.google.com/webstore/detail/all-in-one-messenger/lainlkmlgipednloilifbppmhdocjbda" target="_blank">https://chrome.google.com/webstore/detail/all-in-one-messenger/lainlkmlgipednloilifbppmhdocjbda</a></p>
<h2>Franz</h2>
<p><a href="/uploads-archive/2016/08/franz_screenshot-97ec75912b.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11826" src="/uploads-archive/2016/08/franz_screenshot-97ec75912b-300x224.png" alt="franz_screenshot-97ec75912b" width="300" height="224" srcset="/uploads-archive/2016/08/franz_screenshot-97ec75912b-300x224.png 300w, /uploads-archive/2016/08/franz_screenshot-97ec75912b-768x574.png 768w, /uploads-archive/2016/08/franz_screenshot-97ec75912b-1024x765.png 1024w, /uploads-archive/2016/08/franz_screenshot-97ec75912b-228x170.png 228w, /uploads-archive/2016/08/franz_screenshot-97ec75912b.png 1362w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://meetfranz.com/" target="_blank">http://meetfranz.com/</a></p>
<h2>形式</h2>
<h3>オールインワンメッセンジャー</h3>
<p>Chromeアプリ</p>
<h3>Franz</h3>
<p>Windows、Mac、Linuxの独立アプリ</p>
<h2>対応サービス数</h2>
<h3>オールインワンメッセンジャー</h3>
<p><a href="/uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11827" src="/uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640-244x300.png" alt="3f42955c0ffef951da2d54b508745640" width="244" height="300" srcset="/uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640-244x300.png 244w, /uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640-228x280.png 228w, /uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640.png 702w" sizes="(max-width: 244px) 100vw, 244px" /></a></p>
<p>31サービス</p>
<h3>Franz</h3>
<p><a href="/uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11828" src="/uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a-300x216.png" alt="2fea6a28e87c7d445f684844992ef46a" width="300" height="216" srcset="/uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a-300x216.png 300w, /uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a-768x552.png 768w, /uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a-228x164.png 228w, /uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a.png 964w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>23サービス</p>
<h2>UI</h2>
<p><a href="/uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11829" src="/uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-300x177.png" alt="d908fb736282b278f1a0fcde7082a195" width="300" height="177" srcset="/uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-300x177.png 300w, /uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-768x452.png 768w, /uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-1024x603.png 1024w, /uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-228x134.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>左がオールインワンメッセンジャーで右がFranzです。</p>
<p>Franzは通知のバッチがついていますが、それにしても似てますね。</p>
<p><a href="/uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11830" src="/uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-300x177.png" alt="aba302fa363e55c926d38d5f86b46515" width="300" height="177" srcset="/uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-300x177.png 300w, /uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-768x453.png 768w, /uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-1024x603.png 1024w, /uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-228x134.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>chatworkを開いた画面ですが、基本的にはブラウザ版を読み込んでいるので差はありません。高さもほぼ一緒です。</p>
<h2>まとめ</h2>
<p>UIもコンセプトもほぼ同一に感じますが、Chromeアプリか独立アプリかは好みでの判断になると思います。Chromeアプリであれば、同期している他のブラウザでもインストールの手間が省けるといった利点も考えられます。</p>
<p>どちらも一元管理が出来、主要なサービスはほぼカバーしています。</p>
<p>対応サービスは多ければいいというものでもないと思いますが、日本ではメジャーなLineも追加されるとより便利になりますね。</p>


さまざまなメッセージングサービスをまとめるツール

<p>WebGLを扱いやすくするライブラリであるThree.jsには、<br />
Three.js本体以外に、ライブラリをさらに補助するために利用できるJSが多く含まれています。</p>
<p>今回はその中でも、マウスやタッチでの操作によるカメラの操作を容易にする、<br />
OrbitControl.jsの導入方法についてご紹介いたします。</p>
<p>↓参考にさせていただいたサイト<br />
<a class="link" href="http://gupuru.hatenablog.jp/entry/2013/12/18/223629" target="_blank">Three.js OrbitControls.js &#8211; Three.jsを使って、作ってみた</a></p>
<p>↓OrbitControlを使って作ってみたもの<br />
<a class="demo" href="/demo/ninomiya/115/">DEMO</a></p>
<h2>方法</h2>
<p>Three.jsを<a href="http://threejs.org/" target="_blank">ダウンロード</a>して、<br />
以下のファイルをコピーして、サイトのJSを配置するディレクトリに置く。</p>
<p>three.js-master/build/three.min.js<br />
three.js-master/examples/js/controls/OrbitControls.js</p>
<h3>HTMLで読み込む</h3>
<p></p>

		<div id="crayon-6495402643236094293399" 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;script src="js/three.min.js"&gt;&lt;/script&gt;
&lt;script src="js/OrbitControls.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-6495402643236094293399-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402643236094293399-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-6495402643236094293399-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/three.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-6495402643236094293399-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/OrbitControls.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>

		<div id="crayon-649540264323a044722614" 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 id="canvas-frame"&gt;&lt;/div&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-649540264323a044722614-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-649540264323a044722614-1"><span class="crayon-h">&lt;</span><span class="crayon-e">div </span><span class="crayon-i">id</span>=<span class="crayon-s">"canvas-frame"</span><span class="crayon-h">&gt;</span><span class="crayon-h">&lt;</span>/<span class="crayon-i">div</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h3>Three.jsを記述して、cameraオブジェクトにOrbitControlを適用する。</h3>
<p></p>

		<div id="crayon-649540264323b661828816" 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">JavaScript</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;">
camera = new THREE.PerspectiveCamera( fov, wrapperElm.clientWidth / wrapperElm.clientHeight, 1, 1000 );
camera.up.x = 0; camera.up.y = 0; camera.up.z = -1;
camera.position.set(0, 150, 400);
controls = new THREE.OrbitControls(camera);</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-649540264323b661828816-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264323b661828816-2">2</div><div class="crayon-num" data-line="crayon-649540264323b661828816-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264323b661828816-4">4</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-649540264323b661828816-1"><span class="crayon-i">camera</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-i">THREE</span><span class="crayon-sy">.</span><span class="crayon-e">PerspectiveCamera</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">fov</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">wrapperElm</span><span class="crayon-sy">.</span><span class="crayon-i">clientWidth</span><span class="crayon-h"> </span>/<span class="crayon-h"> </span><span class="crayon-i">wrapperElm</span><span class="crayon-sy">.</span><span class="crayon-i">clientHeight</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">1000</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264323b661828816-2"><span class="crayon-i">camera</span><span class="crayon-sy">.</span><span class="crayon-i">up</span><span class="crayon-sy">.</span><span class="crayon-i">x</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">camera</span><span class="crayon-sy">.</span><span class="crayon-i">up</span><span class="crayon-sy">.</span><span class="crayon-i">y</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">camera</span><span class="crayon-sy">.</span><span class="crayon-i">up</span><span class="crayon-sy">.</span><span class="crayon-i">z</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span>-<span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264323b661828816-3"><span class="crayon-i">camera</span><span class="crayon-sy">.</span><span class="crayon-i">position</span><span class="crayon-sy">.</span><span class="crayon-e">set</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">150</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">400</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264323b661828816-4"><span class="crayon-i">controls</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-i">THREE</span><span class="crayon-sy">.</span><span class="crayon-e">OrbitControls</span><span class="crayon-sy">(</span><span class="crayon-i">camera</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h3>レンダリングをする箇所で、controlのupdateを行う。</h3>
<p></p>

		<div id="crayon-649540264323c859716970" 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">JavaScript</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;">
    function animate() {
        requestAnimationFrame( animate );
        render();
    }
    function render() {
        controls.update();
　　　　　　　　・・・
        renderer.render( scene, camera );
    }</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-649540264323c859716970-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264323c859716970-2">2</div><div class="crayon-num" data-line="crayon-649540264323c859716970-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264323c859716970-4">4</div><div class="crayon-num" data-line="crayon-649540264323c859716970-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264323c859716970-6">6</div><div class="crayon-num" data-line="crayon-649540264323c859716970-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264323c859716970-8">8</div><div class="crayon-num" data-line="crayon-649540264323c859716970-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-649540264323c859716970-1"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">animate</span><span class="crayon-sy">(</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-649540264323c859716970-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">requestAnimationFrame</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">animate</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264323c859716970-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">render</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264323c859716970-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540264323c859716970-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">render</span><span class="crayon-sy">(</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-649540264323c859716970-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">controls</span><span class="crayon-sy">.</span><span class="crayon-e">update</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264323c859716970-7">　　　　　　　　・・・</div><div class="crayon-line crayon-striped-line" id="crayon-649540264323c859716970-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">renderer</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-i">scene</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">camera</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264323c859716970-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>

Three.jsのOrbitControl.jsを使ってマウスやタッチで簡単にカメラ操作

<p>CI（circle integration： 継続的インテグレーション）を図る上で、昨今ではCircleCi、Jenkins、Travis Ciなどが存在するが、<br />
合わせてRuby On RailsではRSpecを使用している人が多い。</p>
<p>導入方法としては以下の通り。</p>
<h2>導入</h2>
<p></p>

		<div id="crayon-6495402643029348902993" 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></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;">
group :development, :test do
  gem 'rspec-rails', '~&gt; 3.5'
end</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-6495402643029348902993-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402643029348902993-2">2</div><div class="crayon-num" data-line="crayon-6495402643029348902993-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-6495402643029348902993-1"><span class="crayon-i">group</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">development</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-e">test </span><span class="crayon-st">do</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402643029348902993-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">gem</span><span class="crayon-h"> </span><span class="crayon-s">'rspec-rails'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'~&gt; 3.5'</span></div><div class="crayon-line" id="crayon-6495402643029348902993-3"><span class="crayon-st">end</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>Gemfileに上記を追加し、bundle installを実施する。</p>

		<div id="crayon-649540264302d589884612" 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></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;">
bundle install</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-649540264302d589884612-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-649540264302d589884612-1"><span class="crayon-e">bundle </span><span class="crayon-i">install</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>そのあと、下記によりconfigファイルを生成する。</p>

		<div id="crayon-649540264302e876660649" 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></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;">
rails generate rspec:install</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-649540264302e876660649-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-649540264302e876660649-1"><span class="crayon-e">rails </span><span class="crayon-e">generate </span><span class="crayon-i">rspec</span><span class="crayon-sy">:</span><span class="crayon-i">install</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>以上で、導入は完了する。</p>
<p>ここで、</p>

		<div id="crayon-649540264302f897744725" 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></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;">
rails g rspec:model user</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-649540264302f897744725-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-649540264302f897744725-1"><span class="crayon-i">rails</span><span class="crayon-h"> </span><span class="crayon-i">g</span><span class="crayon-h"> </span><span class="crayon-i">rspec</span><span class="crayon-sy">:</span><span class="crayon-e">model </span><span class="crayon-i">user</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>を実行すれば、<br />
spec/models/user_spec.rb<br />
のようなファイルが生成されるので、ここにテストコードを書いていく。</p>
<p>RSpecのテストコードの書き方は独自のものが存在する。<br />
書き方は下記がわかりやすい。<br />
<a href="http://qiita.com/jnchito/items/3a590480ee291a70027c">RSpec</a><br />
<a href="https://leanpub.com/everydayrailsrspec-jp/read#leanpub-auto-section-15">Everyday Rails &#8211; RSpecによるRailsテスト入門</a></p>
<h2>参考</h2>
<p><a href="https://github.com/rspec/rspec-rails">GitHub &#8211; rspec/rspec-rails: RSpec for Rails-3+</a></p>

Ruby On RailsにRSpecを導入する

Railsで階層構造を簡単に作ってみる

<p>画像のレタッチでコントラストを強くする際に気を付けないと「白とび」や「黒潰れ」が起こってしまいます。つまり諧調が失われてしまうわけです。意図してやっているなら問題はないのですが、そうでない場合は確認しながら慎重に作業をする必要があります。</p>
<p>じゃあどうやって確認するのかという事ですがちゃんと方法があります。</p>
<p>photoshopに限らず画像のレタッチをする際には「レベル補正」または「トーンカーブ」を使う方が多いようです。今回ご紹介するのはこの２つの調整レイヤー（調整レイヤーでなくても直接修正ができます。）を使う場合の諧調つぶれを確認する方法です。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11731" src="/uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s.jpg" alt="c47d4b4d8e9ab61cd57208b1eced3f1f_s" width="640" height="424" srcset="/uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s.jpg 640w, /uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s-300x199.jpg 300w, /uploads-archive/2016/08/c47d4b4d8e9ab61cd57208b1eced3f1f_s-228x151.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>レベル補正でコントラストを上げてみます。</p>
<p><a href="/uploads-archive/2016/08/1-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11732" src="/uploads-archive/2016/08/1-1.jpg" alt="1" width="310" height="334" srcset="/uploads-archive/2016/08/1-1.jpg 310w, /uploads-archive/2016/08/1-1-278x300.jpg 278w, /uploads-archive/2016/08/1-1-228x246.jpg 228w" sizes="(max-width: 310px) 100vw, 310px" /></a></p>
<p><a href="/uploads-archive/2016/08/2-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11733" src="/uploads-archive/2016/08/2-1.jpg" alt="2" width="640" height="424" srcset="/uploads-archive/2016/08/2-1.jpg 640w, /uploads-archive/2016/08/2-1-300x199.jpg 300w, /uploads-archive/2016/08/2-1-228x151.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>コントラストが強くなって若干ですが夏らしさが増しました。しかし、赤い矢印で示した白と黒のスライダーをAltキーを押しながらクリックしてみると、、、</p>
<p><a href="/uploads-archive/2016/08/3.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11734" src="/uploads-archive/2016/08/3.jpg" alt="3" width="310" height="334" srcset="/uploads-archive/2016/08/3.jpg 310w, /uploads-archive/2016/08/3-278x300.jpg 278w, /uploads-archive/2016/08/3-228x246.jpg 228w" sizes="(max-width: 310px) 100vw, 310px" /></a></p>
<p>Altを押しながら白のスライダーをクリックした時（白い部分が白とび）</p>
<p><a href="/uploads-archive/2016/08/4.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11736" src="/uploads-archive/2016/08/4.jpg" alt="4" width="640" height="417" srcset="/uploads-archive/2016/08/4.jpg 640w, /uploads-archive/2016/08/4-300x195.jpg 300w, /uploads-archive/2016/08/4-228x149.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>Altを押しながら黒のスライダーをクリックした時（黒い部分が黒潰れ）</p>
<p><a href="/uploads-archive/2016/08/5-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11738" src="/uploads-archive/2016/08/5-1.jpg" alt="5" width="634" height="414" srcset="/uploads-archive/2016/08/5-1.jpg 634w, /uploads-archive/2016/08/5-1-300x196.jpg 300w, /uploads-archive/2016/08/5-1-228x149.jpg 228w" sizes="(max-width: 634px) 100vw, 634px" /></a></p>
<p>それぞれが意味する所は、白・黒・R・G・Bで諧調が潰れている（とんでいる）部分にその色がついています。</p>
<p>&nbsp;</p>
<p>トーンカーブの時は同じようにAltを押しながらスライダーをクリックすると、RGBの潰れがわかります。（白と黒に関してはカーブが上枠・下枠に設置してしまうと潰れる。）</p>
<p><a href="/uploads-archive/2016/08/6.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11739" src="/uploads-archive/2016/08/6.jpg" alt="6" width="318" height="402" srcset="/uploads-archive/2016/08/6.jpg 318w, /uploads-archive/2016/08/6-237x300.jpg 237w, /uploads-archive/2016/08/6-228x288.jpg 228w" sizes="(max-width: 318px) 100vw, 318px" /></a></p>
<p>かなり簡単な説明になってしまいましたが、直接触ってみるのが一番わかり安いので試してみてください。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


photoshop　白とび・黒潰れを確認する方法

nino-eye (3).jpg

Canvasで画像の白を透過にする

<p>3色といってもそれぞれに意味合いは違うのですが、これ使い分けると非常に便利です。</p>
<p>みなさんおなじみのGoogleChromeは一番左のカラフル版だと思います。</p>
<p>これは安定版として提供されているものです。</p>
<p>真ん中の青いアイコンはChromiumというオープンソースのブラウザで、GoogleがこのChromiumのソースを元にGoogle独自の機能を追加してリリースしているのがChromeになります。</p>
<p>一番右の金色のアイコンはChrome Canaryといって、安定版に乗る前の新機能を搭載してテストをするためのバージョンで、いわゆるベータ版よりも前のアルファ版に近いようなイメージです。</p>
<p>バグがある前提のバージョンではありますが、既にchromeの大部分は安定していて、頻繁に落ちるというようなこともなく、どちらかと言うと新機能追加がメインかと思います。</p>
<h2>3つのchromeの何が便利？</h2>
<p><a href="/uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11715" src="/uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-300x116.png" alt="dcc3650b7bb248afb5557ca9c73df37f" width="300" height="116" srcset="/uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-300x116.png 300w, /uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-768x297.png 768w, /uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-1024x396.png 1024w, /uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-228x88.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>ほぼこれを伝えたかったということに尽きるのですが、それぞれが独立したアプリケーションとして使うことが出来ます。</p>
<p>Chromeのベータ版やDEV版もダウンロード出来るのですが、これは、通常のchromeを上書きしてしまうので、独立したアプリケーションになりません。</p>
<p><a href="https://www.google.co.jp/chrome/browser/beta.html" target="_blank">https://www.google.co.jp/chrome/browser/beta.html</a></p>
<p>&nbsp;</p>
<p>独立したアプリケーションになることで</p>
<p>自分での使い方として以下になります。</p>
<ul>
<li>Googleアカウントが複数あるのでそれぞれ異なるアプリでログインしておく。<br />
→一つのアプリでマルチログインも出来ますがより便利</li>
<li>検証専用ブラウザにする。<br />
→スマートフォン幅を頻繁に確認する時など便利</li>
</ul>
<p>他にもいろいろな用途が考えられます。</p>
<h2>ダウンロード場所</h2>
<h3>Google Chrome Canary</h3>
<p><a href="https://www.google.co.jp/chrome/browser/canary.html" target="_blank">https://www.google.co.jp/chrome/browser/canary.html</a></p>
<h3>Chromium</h3>
<p><a href="https://download-chromium.appspot.com/" target="_blank">https://download-chromium.appspot.com/</a></p>
<h4>おまけ</h4>
<p>Chromiumは、自動アップデート機能がないので、下記のプラグインを入れて置くと随時バージョンを確認して最新バージョンをダウンロードしてくれます。</p>
<p><a href="https://chrome.google.com/webstore/detail/chromium-updater/ccgjmadhdidfloacagcnnodbkedkjedg?hl=ja" target="_blank">https://chrome.google.com/webstore/detail/chromium-updater/ccgjmadhdidfloacagcnnodbkedkjedg?hl=ja</a></p>


chorme_chromium_canary-1024x311.png

3色のGoogleChrome「chrome chromium canary」

<p>社名っぽい、ただそれだけの理由で「jQuery Starfield」というプラグインを使ってみた。</p>
<p><a href="https://github.com/rocketwagon/jquery-starfield" target="_blank">https://github.com/rocketwagon/jquery-starfield</a></p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/hoshino/70/" target="_blank">デモ</a></p>
<p>&nbsp;</p>
<p>使い方は簡単で、</p>
<p>JS</p>

		<div id="crayon-6495402642789019918057" 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">JavaScript</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;">
$( 'body' ).starfield( {
	starDensity: 4.0,
	mouseScale: 1.0,
	seedMovement: true
});</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-6495402642789019918057-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402642789019918057-2">2</div><div class="crayon-num" data-line="crayon-6495402642789019918057-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402642789019918057-4">4</div><div class="crayon-num" data-line="crayon-6495402642789019918057-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-6495402642789019918057-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'body'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">starfield</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-6495402642789019918057-2"><span class="crayon-h">	</span><span class="crayon-i">starDensity</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">4.0</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-6495402642789019918057-3"><span class="crayon-h">	</span><span class="crayon-i">mouseScale</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">1.0</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402642789019918057-4"><span class="crayon-h">	</span><span class="crayon-i">seedMovement</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div><div class="crayon-line" id="crayon-6495402642789019918057-5"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>CSS</p>

		<div id="crayon-649540264278d396942473" 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;">
html {height: 100%;}
body {padding: 0; margin: auto; width: 100%; height: 100%;}</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-649540264278d396942473-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264278d396942473-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-649540264278d396942473-1"><span class="crayon-k ">html </span><span class="crayon-sy">{</span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264278d396942473-2"><span class="crayon-k ">body </span><span class="crayon-sy">{</span><span class="crayon-e ">padding</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">margin</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>htmlのheightを100%にしないと表示されなかったので注意。</p>
<p>&nbsp;</p>
<p>以下はパラメータ</p>
<table>
<tbody>
<tr>
<th></th>
<th>Default</th>
<th>説明</th>
</tr>
<tr>
<td>starDensity</td>
<td>1.0</td>
<td>星の数</td>
</tr>
<tr>
<td>mouseScale</td>
<td>1.0</td>
<td>マウス動かした時のスピード感</td>
</tr>
<tr>
<td>seedMovement</td>
<td>true</td>
<td>マウス動かさなくても動作開始するか</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

jQuery Starfieldというのがあったので使ってみた

<h3>前置き</h3>
<div style="padding-left: 15px;">
便利なPhotoshopですが<br />
隠れに隠れた機能が多いアプリケーション</p>
<p>そんなの知ってるよ！</p>
<p>と思うのも多々あるかと思いますが備忘録的な感じで紹介します</p></div>
<h3>特徴</h3>
<div style="padding-left: 15px;">
<p>WindowsではControlキーがMacのCommandキーに相当します。</p>
<ul>
<li>Shift : 選択範囲など「プラス」のイメージ</li>
<li>Control : コマンド実行、他Shift, Alt等との組み合わせ識別</li>
<li>Alt : 選択範囲など「マイナス」のイメージ</li>
</ul>
</div>
<h3>良く使うキー組み合わせ</h3>
<div style="padding-left: 15px;">
<table>
<tbody>
<tr>
<th>キー・マウス動作</th>
<th>動作内容</th>
</tr>
<tr>
<td>Control + T</td>
<td>選択されたレイヤーの自由変形</td>
</tr>
<tr>
<td>Control 押しながらドラッグ</td>
<td>選択レイヤーの移動</td>
</tr>
<tr>
<td>Control + Shift + クリック</td>
<td>複数レイヤー選択</td>
</tr>
<tr>
<td>Control + E</td>
<td>上位レイヤーと結合</td>
</tr>
<tr>
<td>Control + Shift + E</td>
<td>表示されているレイヤー統合</td>
</tr>
<tr>
<td>d</td>
<td>描画色・背景色を黒白に初期化</td>
</tr>
<tr>
<td>x</td>
<td>描画色・背景色の入れ替え</td>
</tr>
<tr>
<td>q</td>
<td>クイックマスクモード切り替え</td>
</tr>
<tr>
<td>Control + R</td>
<td>定規の表示・非表示切り替え</td>
</tr>
<tr>
<td>Tab</td>
<td>メインウィンドウ以外の表示・非表示切り替え</td>
</tr>
</tbody>
</table>
<p>※ 上記は設定で「ツールの変更にShiftキーを使用」を敢えて外しています</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/DL3J_nBjDG0?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/W8fgF99Q3YA?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
</div>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2016/09/07

2016/09/07

2016/09/06

2016/08/31

2016/08/31

2016/08/31

2016/08/31

2016/08/30

2016/08/24

2016/08/24

2016/08/24

2016/08/10

2016/08/10

2016/08/10

2016/08/09

2016/08/03

2016/08/03

2016/08/03