<p>after effectsのエフェクトを使って現在の高田馬場から昭和初期ごろに変えてみたいと思います。</p>
<p>こちらが現在の動画です。</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/oa5sKl6gX-A?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>こちらの動画にafter effectsを使って加工を加えていきます。</p>
<p>まずはフィルム焼けを表現するエフェクトのその名も「CC Burn Film」を調整レイヤーにかけます。それぞれのパラメーターにエクスプレッションを使ってサイズや位置がランダムで変わるように設定します。</p>
<p>続いて、シェイプレイヤーで縦線を作りX位置方向のみwiggleで動かします。このときかなり大きな数字を入れて、モーションブラーをかけるとフィルムっぽさが出ると思います。</p>
<p>さらに「CC Toner」と「輝度コントラスト」でカラー調整をします。最後に「アンシャープマスク」で画質についても調整します。</p>
<p>お好みでタイムリマップをかけて動きを早くすると当時の映像という感じがさらに出ると思います。</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/dDyH6_DWT6o?feature=oembed" frameborder="0" allowfullscreen></iframe></p>


after effects 作品例　古いフィルムで撮影した高田馬場

gitの構築から実用までの流れ (1)

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

<h2>コンペナビに広告を！</h2>
<p>２週続けて広告のお話です。</p>
<p>弊社はコンテスト情報ポータルサイト・<a href="http://compe.sterfield.jp/">コンペナビ</a>というものを運営しているのですが、そこに「広告を入れませんか」というご提案を受けました。</p>
<p>コンペナビに広告を入れるのは有りだと依然から思っていたのと、先週お伝えしたDSPをはじめ広告の仕組みに興味を持っていたところだったので、営業の方にお話を伺いました。</p>
<p>アドネットワークのnendさんという会社です。</p>
<p><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-11013" src="/uploads-archive/2016/06/img-all.png" alt="img-all" width="940" height="300" srcset="/uploads-archive/2016/06/img-all.png 940w, /uploads-archive/2016/06/img-all-300x96.png 300w, /uploads-archive/2016/06/img-all-768x245.png 768w, /uploads-archive/2016/06/img-all-228x73.png 228w" sizes="(max-width: 940px) 100vw, 940px" /></p>
<p>nendさんの仕組みは下記になります。</p>
<p><img decoding="async" loading="lazy" class="size-full wp-image-11012 aligncenter" src="/uploads-archive/2016/06/img-about.png" alt="img-about" width="700" height="300" /></p>
<p>我々はコンペナビ上の広告枠を提供して、nendさんが広告主を見つけてきてくれて広告出稿をしてもらい、うちはクリック当たりの成果報酬をもらうという流れです。</p>
<p>ちなみにアドネットワークと、前回のブログでご説明したDSPとの関係は下の図のようになります。</p>
<p><img decoding="async" loading="lazy" class="size-medium wp-image-11015 aligncenter" src="/uploads-archive/2016/06/35a2591609cbe6091fe1f4c840430fe1-277x300.jpg" alt="新規ドキュメント 5_1" width="650" height="500" /></p>
<p>いろんな広告枠をたばねているのが<span style="color: #ff0000;">アドネットワーク</span>で、色んなアドネットワークを束ねているプラットフォームがSSPと呼ばれるもので、SSPは媒体側（広告枠側）なので、それの対になるものとして広告を出稿する側のプラットフォームが<span style="color: #ff0000;">DSP</span>です。</p>
<h2>実際にどんな感じになるか</h2>
<h3>ネイティブアドとは</h3>
<p>広告の入れ方にもいろいろ種類があるのですが、今回はネイティブアドを提案してもらいました。</p>
<blockquote><p>
ネイティブアドとは「広告掲載面に広告を自然に溶け込ませることで、“ユーザーにコンテンツの一部として見てもらう”ことを目的とした広告」のこと<br />
<a href="http://dmlab.jp/adtech/new_tech/adtech150507_4.html">http://dmlab.jp/adtech/new_tech/adtech150507_4.html</a></p></blockquote>
<p>これならコンペナビ本来のコンテンツの邪魔にもならず良いですね！</p>
<h3>画面</h3>
<p>サンプルで提供してもらった画像です。</p>
<p>編集長ブログにネイティブアドを挿入したパターン<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2016/06/2a831ec055ed4fee4e1d0936ea40500d.jpg" alt="スライド2" width="960" height="720" class="alignleft size-full wp-image-11005" srcset="/uploads-archive/2016/06/2a831ec055ed4fee4e1d0936ea40500d.jpg 960w, /uploads-archive/2016/06/2a831ec055ed4fee4e1d0936ea40500d-300x225.jpg 300w, /uploads-archive/2016/06/2a831ec055ed4fee4e1d0936ea40500d-768x576.jpg 768w, /uploads-archive/2016/06/2a831ec055ed4fee4e1d0936ea40500d-228x171.jpg 228w" sizes="(max-width: 960px) 100vw, 960px" /></p>
<p>新着コンペにネイティブアドを挿入したパターン<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2016/06/ee3be1d100caf1aa771552d59c2bd436.jpg" alt="スライド3" width="960" height="720" class="alignleft size-full wp-image-11006" srcset="/uploads-archive/2016/06/ee3be1d100caf1aa771552d59c2bd436.jpg 960w, /uploads-archive/2016/06/ee3be1d100caf1aa771552d59c2bd436-300x225.jpg 300w, /uploads-archive/2016/06/ee3be1d100caf1aa771552d59c2bd436-768x576.jpg 768w, /uploads-archive/2016/06/ee3be1d100caf1aa771552d59c2bd436-228x171.jpg 228w" sizes="(max-width: 960px) 100vw, 960px" /></p>
<p>末尾にバナー広告を挿入したパターン<br />
<img decoding="async" loading="lazy" src="/uploads-archive/2016/06/04f86ea9c104d100d663feb8a9a65769.jpg" alt="スライド5" width="960" height="720" class="alignleft size-full wp-image-11008" srcset="/uploads-archive/2016/06/04f86ea9c104d100d663feb8a9a65769.jpg 960w, /uploads-archive/2016/06/04f86ea9c104d100d663feb8a9a65769-300x225.jpg 300w, /uploads-archive/2016/06/04f86ea9c104d100d663feb8a9a65769-768x576.jpg 768w, /uploads-archive/2016/06/04f86ea9c104d100d663feb8a9a65769-228x171.jpg 228w" sizes="(max-width: 960px) 100vw, 960px" /></p>
<h3>と、いうわけで</h3>
<p>ご提案内容がとても良かったので、導入することになりました。<br />
（営業の方もナイスガイでした！）</p>
<p>次回は設定方法などをお伝えしますね。</p>


コンペナビにアドネットワークの広告を貼るよ（１）

Ruby On Railsから既存アプリケーションのデーターベースに接続する

<p>去る6月10日に「熊本大分オープンミーティング powered by Google イノベーション東北」に参加してきました。</p>
<p><a href="/uploads-archive/2016/06/IMG_20160610_211741_HDR.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11011" src="/uploads-archive/2016/06/IMG_20160610_211741_HDR-300x225.jpg" alt="IMG_20160610_211741_HDR" width="300" height="225" srcset="/uploads-archive/2016/06/IMG_20160610_211741_HDR-300x225.jpg 300w, /uploads-archive/2016/06/IMG_20160610_211741_HDR-768x576.jpg 768w, /uploads-archive/2016/06/IMG_20160610_211741_HDR-1024x768.jpg 1024w, /uploads-archive/2016/06/IMG_20160610_211741_HDR-228x171.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>このような形でGoogleのハングアウトというコミュニケーションツールを使って、熊本、大分、福岡そして東京を繋ぎ、トークセッションをメインに行われました。</p>
<p>このような複数拠点でのビデオ会議を何ら変哲もないウェブカメラとPCを使って、イベントを出来てしまうのが素晴らしい時代になったもんだと一人別の事を考えながら、拝聴していました。</p>
<h2>熊本大分の現状</h2>
<p>登壇されている方はいずれも比較的、被災の少ない方達ではありましたが、それでも、キャンセルや客足自体が激減しているため、開店休業状態とのこと。</p>
<h2>東北がやってきたこと</h2>
<p>震災に見舞われてからの5年間に何をやって来たか。</p>
<h2>相互共有</h2>
<p>そこからは、熊本、大分の方が東北の方たちに、どのように局面を乗り切ってきたのか？いつ頃から日常が戻り始めたのか？という先に経験をした方たちへの共有がメインに会場を行き来しながら、トークセッションが繰り広げられました。</p>
<p>その間、東京会場は基本的に聞き入っているという状態でした。</p>
<h2>思ったこと</h2>
<p>今回は、お仕事を通じて、復興支援の為の支援というすこし遠回しではありますが、関わることが出来、その延長線上で参加したイベントですが、私なんかがおこがましいと思うほど、とても強い意思を感じました。</p>
<p>事実を理解し、どちら側の立場に立つことになっても自らに置き換えて考えるよいきっかけになりました。</p>


熊本大分オープンミーティング powered by Google イノベーション東北に参加しました。

<p>パスワードを複数生成するツールを作った。</p>
<p>LaunchCartを導入頂くにあたり、現行の顧客データを以降する際、パスワードが暗号化されていたり、そもそもダウンロードできない場合が多くある。</p>
<p>その場合はパスワードを新規作成し、新しいパスワードを顧客に通知するというのが一般的な解決策だ。</p>
<p>しかし、顧客情報のように時に数千〜万件になるデータに対し、パスワードをそれと同じ数出力してくれるサービスは自分は見たことがない。</p>
<p>そのため、以前作ったこれを複数出力できるように改良した。</p>
<blockquote data-secret="40XTxXJ3YU" class="wp-embedded-content"><p><a href="/officer/%e3%82%bb%e3%82%ad%e3%83%a5%e3%82%a2%e3%81%aa%e3%83%91%e3%82%b9%e3%83%af%e3%83%bc%e3%83%89%e3%82%92%e8%87%aa%e5%8b%95%e7%94%9f%e6%88%90%e3%81%99%e3%82%8b%e4%be%bf%e5%88%a9%e3%83%84%e3%83%bc%e3%83%ab/">セキュアなパスワードを自動生成する便利ツール</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="/officer/%e3%82%bb%e3%82%ad%e3%83%a5%e3%82%a2%e3%81%aa%e3%83%91%e3%82%b9%e3%83%af%e3%83%bc%e3%83%89%e3%82%92%e8%87%aa%e5%8b%95%e7%94%9f%e6%88%90%e3%81%99%e3%82%8b%e4%be%bf%e5%88%a9%e3%83%84%e3%83%bc%e3%83%ab/embed/#?secret=40XTxXJ3YU" data-secret="40XTxXJ3YU" width="500" height="282" title="&#8220;セキュアなパスワードを自動生成する便利ツール&#8221; &#8212; スターフィールド株式会社" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<p>&nbsp;</p>
<p><a href="/demo/hoshino/66/" target="_blank" class="demo">ツールへのリンク</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>


パスワードを複数生成するツール

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

<p>Railsとwordpressを一つのドメインで使用するという実装を行ったのでその導入方法のログを記事にしてみました。</p>
<p>passenger + apacheを利用している前提です。<br />
Railsアプリとwordpressを全く別のディレクトリに保存することも可能ですが、wordpressと同じディレクトリ内にインストールすれば、gitなど一つのリポジトリで管理できるので、同じディレトリ内に保存する方が楽だと思います。</p>
<h2>1 phpのインストール</h2>
<p>記事作成時点では公式の推奨phpのバージョンは5.6以降でしたので、今回インストールしたバージョンは5.6にいたしました。</p>

		<div id="crayon-649540263ec79405829604" 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">add repository</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;">
rpm -Uvh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm
rpm -Uvh http://dl.iuscommunity.org/pub/ius/stable/Redhat/6/x86_64/ius-release-1.0-11.ius.el6.noarch.rpm
rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm</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-649540263ec79405829604-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ec79405829604-2">2</div><div class="crayon-num" data-line="crayon-649540263ec79405829604-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-649540263ec79405829604-1"><span class="crayon-i">rpm</span><span class="crayon-h"> </span>-<span class="crayon-e">Uvh </span><span class="crayon-i">http</span><span class="crayon-sy">:</span><span class="crayon-c">//dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ec79405829604-2"><span class="crayon-i">rpm</span><span class="crayon-h"> </span>-<span class="crayon-e">Uvh </span><span class="crayon-i">http</span><span class="crayon-sy">:</span><span class="crayon-c">//dl.iuscommunity.org/pub/ius/stable/Redhat/6/x86_64/ius-release-1.0-11.ius.el6.noarch.rpm</span></div><div class="crayon-line" id="crayon-649540263ec79405829604-3"><span class="crayon-i">rpm</span><span class="crayon-h"> </span>-<span class="crayon-e">Uvh </span><span class="crayon-i">http</span><span class="crayon-sy">:</span><span class="crayon-c">//rpms.famillecollet.com/enterprise/remi-release-6.rpm</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>

		<div id="crayon-649540263ec7d797314086" 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">install php 5.6</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;">
yum -y install --enablerepo=remi-php56 php</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-649540263ec7d797314086-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-649540263ec7d797314086-1"><span class="crayon-i">yum</span><span class="crayon-h"> </span>-<span class="crayon-i">y</span><span class="crayon-h"> </span><span class="crayon-i">install</span><span class="crayon-h"> </span>--<span class="crayon-i">enablerepo</span>=<span class="crayon-i">remi</span>-<span class="crayon-e">php56 </span><span class="crayon-i">php</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>２ wordpressのインストール</h2>
<p>wordpressをインストールしたいディレクトリで<br />
wget https://ja.wordpress.org/wordpress-4.5.2-ja.tar.gz<br />
tar xfvz wordpress-4.5.2-ja.tar.gz<br />
を実行します。インストールするurlは<a href="https://ja.wordpress.org/" target="_blank">公式サイト</a>で新しいものを指定します。<br />
実行すると、wordpressディレトリが生成されます。<br />
用途に応じてwordpressディレクトリを変更します。</p>
<h2>3 apacheの設定</h2>
<p></p>

		<div id="crayon-649540263ec7e397056332" 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">edit httpd conf</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;">
Alias /post "/var/www/html/Railsのアプリ名/wordpressをインストールしたディレクトリ/"
&lt;Directory /var/www/html/Railsのアプリ名/wordpressをインストールしたディレクトリ/&gt;
  PassengerEnabled Off
  AllowOverride All                       
&lt;/Directory&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-649540263ec7e397056332-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ec7e397056332-2">2</div><div class="crayon-num" data-line="crayon-649540263ec7e397056332-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ec7e397056332-4">4</div><div class="crayon-num" data-line="crayon-649540263ec7e397056332-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-649540263ec7e397056332-1"><span class="crayon-i">Alias</span><span class="crayon-h"> </span>/<span class="crayon-i">post</span><span class="crayon-h"> </span><span class="crayon-s">"/var/www/html/Railsのアプリ名/wordpressをインストールしたディレクトリ/"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ec7e397056332-2"><span class="crayon-h">&lt;</span><span class="crayon-i">Directory</span><span class="crayon-h"> </span>/<span class="crayon-t">var</span>/<span class="crayon-i">www</span>/<span class="crayon-i">html</span>/<span class="crayon-i">Rails</span>のアプリ名/<span class="crayon-i">wordpress</span>をインストールしたディレクトリ/<span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540263ec7e397056332-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">PassengerEnabled </span><span class="crayon-e">Off</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ec7e397056332-4"><span class="crayon-e">&nbsp;&nbsp;</span><span class="crayon-e">AllowOverride </span><span class="crayon-i">All</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-649540263ec7e397056332-5"><span class="crayon-h">&lt;</span>/<span class="crayon-i">Directory</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>今回はroot_url/postというアドレスにアクセスしたときにrailsではなくwordpressにアクセスするという設定にいたしました。</p>
<p>以上で設定は完了です。root_url/postにアクセスすれば、wordpressのいつものインストール画面が表示されます。</p>

Railsとwordpressを共存させる

<p>中国国内向けのマーケティング施策として、DSP広告は依然有効である。</p>
<p>あまり詳しくないクライアントに「DSPとはなにか」と分かりやすく説明するために、WEB広告黎明期から時系列で広告の進化についてみてみたい。</p>
<h3>ベタ貼り</h3>
<p><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-10971" src="/uploads-archive/2016/06/IMG_0127-1.png" alt="IMG_0127" width="721" height="526" srcset="/uploads-archive/2016/06/IMG_0127-1.png 721w, /uploads-archive/2016/06/IMG_0127-1-300x219.png 300w, /uploads-archive/2016/06/IMG_0127-1-228x166.png 228w" sizes="(max-width: 721px) 100vw, 721px" /><br />
ネット広告黎明期の広告。<br />
サイトのトップページに、期間を定めて出していた。<br />
サイト運営者が手作業で広告画像を貼り付ける、一番原始的な方法。</p>
<p>サイトのアクセス=広告掲載レポート</p>
<h3>媒体社のアドサーバー利用</h3>
<p><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-10974" src="/uploads-archive/2016/06/IMG_0128-1.png" alt="IMG_0128" width="750" height="701" srcset="/uploads-archive/2016/06/IMG_0128-1.png 750w, /uploads-archive/2016/06/IMG_0128-1-300x280.png 300w, /uploads-archive/2016/06/IMG_0128-1-228x213.png 228w" sizes="(max-width: 750px) 100vw, 750px" /></p>
<p>各サイトが独自のアドサーバーを開発して、広告配信をしていた。<br />
サイトの広告スペースに、アドサーバーに画像を読み出しにいくための広告配信タグが貼られていて、ベタ貼り時代の手作業から自動化が図られた。<br />
広告の掲載状況や、レポート出力などもアドサーバーで管理できるようになり便利になったが、アドサーバーは個々のサイトでスペックがバラバラでクオリティも高くなかった。</p>
<h3>アドネットワークによる配信</h3>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/06/IMG_0129-1.png" alt="IMG_0129" width="750" height="779" class="aligncenter size-full wp-image-10972" srcset="/uploads-archive/2016/06/IMG_0129-1.png 750w, /uploads-archive/2016/06/IMG_0129-1-289x300.png 289w, /uploads-archive/2016/06/IMG_0129-1-228x237.png 228w" sizes="(max-width: 750px) 100vw, 750px" /></p>
<p>アドネットワークとは、複数サイトの複数広告枠をまとめて、広告を配信する事業のこと。<br />
サイト運営者（媒体社）としては、自社のウェブサイトの広告掲載面に指定のタグを貼るだけで、広告営業も掲載業務もレポート業務もすべて代行してもらえる仕組みなので、中小規模のサイトでも広告業務に煩わされることなくコンテンツつくりに専念することができるようになった。</p>
<h3>DSP</h3>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/06/IMG_0131-1.png" alt="IMG_0131" width="750" height="639" class="aligncenter size-full wp-image-10970" srcset="/uploads-archive/2016/06/IMG_0131-1.png 750w, /uploads-archive/2016/06/IMG_0131-1-300x256.png 300w, /uploads-archive/2016/06/IMG_0131-1-228x194.png 228w" sizes="(max-width: 750px) 100vw, 750px" /><br />
アドネットワークとDSPの違いを一言で表すと、<br />
アドネットワークは「複数のサイトをネットワーク化した広告ネットワーク」であるのに対し、DSPは「複数のアドネットワークへの配信を一元管理して行う事ができるツール」である。</p>
<h2>ポイント</h2>
<ul style="list-style-type: disc;">
<li>「枠」から「人」へ</li>
<li>「人」に広告をうつことで、ひとつひとつの広告配信を誰に向けて行い、誰がその広告に反応したかを見る（把握する）ことが可能に。</li>
<li>継続的に、PDCAを短いサイクルで回すことが可能</li>
</ul>
<h2>参考にさせてもらいました</h2>
<p><iframe loading="lazy" width="300" height="150" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=hsm3st-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=ss_til&amp;asins=4864780013" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>


ざっくり分かる！中国マーケティングで有力なDSPとは！！

<p>転換率、転換率、転換率、ずっと考えています。</p>
<p>その中でも一番影響するのが「かご落ち」。</p>
<p>商品をカートに入れたまではいいが、何らかの理由で注文完了まで至らないケースのことで「かご落ち」を改善するのは永遠の課題です。</p>
<p>かご落ちについて詳しく説明されている記事がありましたので合わせてご紹介します。</p>
<p><a href="https://f-tra.jp/blog/overseas/5680" target="_blank">https://f-tra.jp/blog/overseas/5680</a></p>
<p>今回はそんなかご落ちを少しでも防ぐツールがどんなものがあるのかまとめてみました。</p>
<h2>カゴ落ち・離脱防止ツール</h2>
<table>
<tbody>
<tr style="height: 24px;">
<td style="height: 24px;">サービス名</td>
<td style="height: 24px;">カートリカバリー</td>
<td style="height: 24px;">NaviPlus リタゲメール</td>
<td style="height: 24px;">Returner</td>
<td style="height: 24px;">3S</td>
<td style="height: 24px;">エフトラ CTA</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;">URL</td>
<td style="height: 24px;"><a href="http://www.cart-rcv.jp/" target="_blank">http://www.cart-rcv.jp/</a></td>
<td style="height: 24px;"><a href="http://www.naviplus.co.jp/rtg-mail/" target="_blank">http://www.naviplus.co.jp/rtg-mail/</a></td>
<td style="height: 24px;"><a href="http://www.returner.info/" target="_blank">http://www.returner.info/</a></td>
<td style="height: 24px;"><a href="http://www.3s-tools.com/" target="_blank">http://www.3s-tools.com/</a></td>
<td style="height: 24px;"><a href="http://f-tra.com/ja/cta/" target="_blank">http://f-tra.com/ja/cta/</a></td>
</tr>
<tr style="height: 96px;">
<td style="height: 96px;">サービス内容</td>
<td style="height: 96px;">かご落ちメール</p>
<p>かご落ちリマーケティング広告</td>
<td style="height: 96px;">かご落ちメール</td>
<td style="height: 96px;">離脱防止ポップアップバナー</td>
<td style="height: 96px;">離脱防止ポップアップバナー</td>
<td style="height: 96px;">離脱防止ポップアップバナー</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;">初期費用</td>
<td style="height: 24px;">50,000円</td>
<td style="height: 24px;">0円</td>
<td style="height: 24px;">0円</td>
<td style="height: 24px;">成果報酬型</td>
<td style="height: 24px;"> 0円</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;">月額費用</td>
<td style="height: 24px;">39,000円</td>
<td style="height: 24px;">50,000円</td>
<td style="height: 24px;">30,000円</td>
<td style="height: 24px;">成果報酬型</td>
<td style="height: 24px;">50,000円</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;">提供会社</td>
<td style="height: 24px;">株式会社イー・エージェンシー</td>
<td style="height: 24px;">ナビプラス株式会社</td>
<td style="height: 24px;">株式会社フリースクエア</td>
<td style="height: 24px;">ムーヴ株式会社</td>
<td style="height: 24px;">株式会社エフ・コード</td>
</tr>
</tbody>
</table>
<h2>まとめ</h2>
<p>かご落ちツールと離脱防止ツールを同時に紹介しましたが、かご落ちツールはかご落ちしてしまった後のフォロー施策、離脱防止ツールはかご落ち前にかご落ちを食い止める施策と言えそうです。</p>
<p>つまり、両社は共存可能ではないかと思うと共に当社の<a href="http://launchcart.jp/" target="_blank">LaunchCart</a>でも導入を検討していきたいと思います。</p>


カゴ落ち・離脱防止ツール5選

<p>無料で3Dファイルをアップロードして公開する事ができる<a href="https://sketchfab.com/">Sketchfab</a>というサイトがあります。</p>
<p>かなりシンプルな手順で公開ができる上に、VRでのプレビューもできるので、動画ファイルでいうところのyoutubeと言った方が伝わりやすいかもしれません。</p>
<p><a href="/uploads-archive/2016/06/1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10963" src="/uploads-archive/2016/06/1.jpg" alt="1" width="640" height="384" srcset="/uploads-archive/2016/06/1.jpg 640w, /uploads-archive/2016/06/1-300x180.jpg 300w, /uploads-archive/2016/06/1-228x137.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>今回はこのSketchfabにデモファイルをアップロードしてみたいと思います。</p>
<p><a href="/uploads-archive/2016/06/3.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10966" src="/uploads-archive/2016/06/3.jpg" alt="3" width="640" height="277" srcset="/uploads-archive/2016/06/3.jpg 640w, /uploads-archive/2016/06/3-300x130.jpg 300w, /uploads-archive/2016/06/3-228x99.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>アップロードの仕方は、これもyoutubeに似ていて右上のUPLOADをクリックしてファイルを選択するだけ、とてもシンプルです。</p>
<p><a href="/uploads-archive/2016/06/4.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10968" src="/uploads-archive/2016/06/4.jpg" alt="4" width="640" height="383" srcset="/uploads-archive/2016/06/4.jpg 640w, /uploads-archive/2016/06/4-300x180.jpg 300w, /uploads-archive/2016/06/4-228x136.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>アップロードしたページがこちらです。</p>
<p><a href="https://sketchfab.com/models/3df5dc1deeae41cf8f9d850ba184435d">https://sketchfab.com/models/3df5dc1deeae41cf8f9d850ba184435d</a></p>
<p>3dモデルについての説明なども入力できます。</p>
<p>記事に埋め込むとこんな感じになります。</p>
<p><iframe loading="lazy" width="640" height="480" src="https://sketchfab.com/models/3df5dc1deeae41cf8f9d850ba184435d/embed" frameborder="0" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" onmousewheel=""></iframe></p>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4a4a4a;"><a style="font-weight: bold; color: #1caad9;" href="https://sketchfab.com/models/3df5dc1deeae41cf8f9d850ba184435d?utm_medium=embed&amp;utm_source=website&amp;utm_campain=share-popup" target="_blank">Sterfield</a> by <a style="font-weight: bold; color: #1caad9;" href="https://sketchfab.com/launchmovie?utm_medium=embed&amp;utm_source=website&amp;utm_campain=share-popup" target="_blank">launchmovie</a> on <a style="font-weight: bold; color: #1caad9;" href="https://sketchfab.com?utm_medium=embed&amp;utm_source=website&amp;utm_campain=share-popup" target="_blank">Sketchfab</a></p>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4a4a4a;">
<p><iframe loading="lazy" width="600" height="400" frameborder="0" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" src="https://sketchfab.com/models/3df5dc1deeae41cf8f9d850ba184435d/embed?autostart=1&amp;transparent=1&amp;autospin=0.2&amp;controls=1&amp;watermark=1"></iframe></p>


3DファイルをSketchfabにアップロードしてみる

<p>当社では<a href="http://launchcart.jp/" target="_blank">越境EC</a>に力を入れている関係上、外国人に限定した採用活動をする場合がある。</p>
<p>有料の媒体はいくつかあるのだが、今回は無料で利用できるサービスをまとめてみた。</p>
<p>&nbsp;</p>
<h2>ハローワーク</h2>
<p>地区によっては外国人を専門に扱う部署がある。</p>
<p>新宿であれば「新宿外国人雇用支援・指導センター」というのがある。</p>
<p><a href="http://tokyo-hellowork.jsite.mhlw.go.jp/list/shinjuku/goriyoujikan_access/shinjukugaisen_map.html" target="_blank">http://tokyo-hellowork.jsite.mhlw.go.jp/list/shinjuku/goriyoujikan_access/shinjukugaisen_map.html</a></p>
<p>&nbsp;</p>
<p>通常と同じ手順で外国人雇用である旨伝えると、外国人が閲覧する用の求人票として扱ってくれる</p>
<p>また、東京だと「東京外国人雇用サービスセンター」という機関がある。</p>
<p><a href="http://tokyo-foreigner.jsite.mhlw.go.jp/home.html" target="_blank">http://tokyo-foreigner.jsite.mhlw.go.jp/home.html</a></p>
<p>&nbsp;</p>
<p>合同企業説明会・面接会や、無給インターンの斡旋などを行っている</p>
<p><a href="http://tokyo-foreigner.jsite.mhlw.go.jp/news_topics/kigyou_minasama/_119746/_119812.html" target="_blank">http://tokyo-foreigner.jsite.mhlw.go.jp/news_topics/kigyou_minasama/_119746/_119812.html</a></p>
<p><a href="http://tokyo-foreigner.jsite.mhlw.go.jp/news_topics/kigyou_minasama/_119737/_119831.html" target="_blank">http://tokyo-foreigner.jsite.mhlw.go.jp/news_topics/kigyou_minasama/_119737/_119831.html</a></p>
<p>&nbsp;</p>
<h2>Facebookグループ</h2>
<p>Part time job japanや留学生 アルバイト、インターンなどのキーワードで簡単に見つけることができる</p>
<p>このような広範囲のものから、</p>
<p><a href="https://www.facebook.com/groups/nsajobhunting/" target="_blank">https://www.facebook.com/groups/nsajobhunting/</a></p>
<p><a href="https://www.facebook.com/groups/1430410577228610/" target="_blank">https://www.facebook.com/groups/1430410577228610/</a></p>
<p>中国に絞ったものも複数ある</p>
<p><a href="https://www.facebook.com/groups/403444786531871/" target="_blank">https://www.facebook.com/groups/403444786531871/</a></p>
<p><a href="https://www.facebook.com/groups/364295343670994/" target="_blank">https://www.facebook.com/groups/364295343670994/</a></p>
<p>これらは承認制だが、承認を受ければ自由に求人情報を投稿して良いところが多い。</p>
<p>&nbsp;</p>
<h2>日本語学校</h2>
<p>学校によっては学生課や学生生活課などが設置されており、</p>
<p>アルバイトの面倒を見ているところも多い。</p>
<p>すごく嫌がられることは無いと思うので、近くの学校に問い合わせてみるのが良いと思う</p>
<p>ちなみに以下は当社近くにある学校で大きいところ10校。</p>
<p>これだけで定員で6千人弱なのでうまくいけばスムーズに見つけられそうだ</p>
<p>&nbsp;</p>
<table>
<tbody>
<tr>
<th>学校名</th>
<th>定員数</th>
<th>所在地</th>
</tr>
<tr>
<td>ISIランゲージスクール</td>
<td>990</td>
<td>東京都新宿区高田馬場2-14-19</td>
</tr>
<tr>
<td>新宿日本語学校</td>
<td>720</td>
<td>東京都新宿区高田馬場2-9-7</td>
</tr>
<tr>
<td>ヒューマンアカデミー日本語学校</td>
<td>1240</td>
<td>東京都新宿区高田馬場4-9-9</td>
</tr>
<tr>
<td>千駄ヶ谷日本語学校</td>
<td>739</td>
<td>東京都新宿区下落合1-1-6</td>
</tr>
<tr>
<td>東京国際大学付属日本語学校</td>
<td>420</td>
<td>東京都新宿区高田馬場4-23-23</td>
</tr>
<tr>
<td>早稲田EDU日本語学校</td>
<td>520</td>
<td>東京都新宿区高田馬場4-23-33</td>
</tr>
<tr>
<td>東進日本語学校</td>
<td>333</td>
<td>都新宿区高田馬場3-28-1</td>
</tr>
<tr>
<td>ヨシダ日本語学院</td>
<td>256</td>
<td>東京都新宿区西早稲田1-23-14</td>
</tr>
<tr>
<td>早稲田外語専門学校</td>
<td>160</td>
<td>東京都新宿区高田馬場1-23-9</td>
</tr>
<tr>
<td>進和外語アカデミー</td>
<td>311</td>
<td>東京都新宿区高田馬場2-14-30</td>
</tr>
</tbody>
</table>


無料で外国人スタッフを採用する方法

<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>真壁さんのブログに影響を受け、360度カメラに興味を持つようになりました。</p>
<p>360度画像を撮る方法はいくつかありますが、おそらく一番簡単だと思われる方法としてRICHOH THETA（リコーシータ）というカメラを購入しました。</p>
<p><iframe loading="lazy" width="300" height="150" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=hsm3st-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=ss_til&amp;asins=B00OYSZS1K" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>
<h2>360度ってすごい</h2>
<p>友人の結婚式で撮ってみました。</p>
<h3>静止画</h3>
<blockquote class="ricoh-theta-spherical-image" data-width="500" data-height="375"><p>バルーーーーン！ &#8211; <a href="https://theta360.com/s/ci85xO3zSgpXKcTjTqFHU6VAC" target="_blank">Spherical Image &#8211; RICOH THETA</a></p></blockquote>
<p><script src="https://theta360.com/widgets.js" async="" charset="utf-8"></script></p>
<blockquote class="ricoh-theta-spherical-image" data-width="500" data-height="375"><p>
ケーキカット &#8211; <a href="https://theta360.com/s/nScpzoCeCQBvx37lX2fETf0a4" target="_blank">Spherical Image &#8211; RICOH THETA</a>
</p></blockquote>
<p><script src="https://theta360.com/widgets.js" async="" charset="utf-8"></script></p>
<blockquote class="ricoh-theta-spherical-image" data-width="500" data-height="375"><p>三次会！ &#8211; <a href="https://theta360.com/s/rC8ypi4uCso3at1Ey1i5ixN6i" target="_blank">Spherical Image &#8211; RICOH THETA</a></p></blockquote>
<p><script src="https://theta360.com/widgets.js" async="" charset="utf-8"></script></p>
<h3>動画</h3>
<blockquote class="ricoh-theta-spherical-image" data-width="500" data-height="375"><p>
披露宴にて。 &#8211; <a href="https://theta360.com/m/fyt2K2OwSX9ryCOXY9jFWACuq" target="_blank">Spherical Image &#8211; RICOH THETA</a>
</p></blockquote>
<p><script src="https://theta360.com/widgets.js" async="" charset="utf-8"></script></p>
<blockquote class="ricoh-theta-spherical-image" data-width="500" data-height="375"><p>バルーン動画 &#8211; <a href="https://theta360.com/m/pVDbm2AVH3n8UIZspzRSzhJGW" target="_blank">Spherical Image &#8211; RICOH THETA</a></p></blockquote>
<p><script src="https://theta360.com/widgets.js" async="" charset="utf-8"></script></p>
<h2>ちょっとネガティブな感想</h2>
<ul style="list-style-type: disc;">
<li>2つのレンズがついているシータ。2つの画像を繋ぎあわせているのでしょうが、つなぎ目は全然わかりません。すごい。</li>
<li>画質も思ったより綺麗。</li>
<li>しかし、暗いところだとやはり粗さは目立つ。</li>
<li>共有する方法が限られている。現状、シータの専用サイトにアップして、そのURLを送りつけるか、youtubeにアップするかでしか共有できません。</li>
<li>使える範囲が限定されている感覚は強いです。「すごいと言えばすごいけどこれしかできないのかぁ」と思います。</li>
<li>飲み会でも使ってみましたが、「おおっ！」とはなります。</li>
<li>でも、「で、だから…？」という空気も感じました。</li>
</ul>
<h2>結論</h2>
<p>なんかもっと活かす使い方を考えたい！！</p>


RICHOH THETA（リコーシータ）で360度画像を撮ってみた。友人結婚式編

開発環境を統一してみる

<p>Ruby on Railsにbootstrapを使用したいときは、通常<br />
<a class="link" href="https://github.com/twbs/bootstrap-sass#a-ruby-on-rails" target="_blank">Bootstrap for Sass &#8211; GitHub</a><br />
のように、gemを利用することが多いですが、<br />
<em><strong>諸々の事情により</strong></em>、公式サイトよりインストールしたソース（しかもcss）を使用したい場合があるかと思いますが、そのときの設置方法を記事にしました。</p>
<h2>1. ファイルのインストール及び設置</h2>
<p>公式サイトよりダウンロードし、css、javascriptをそれぞれ<br />
app/assets/stylesheet<br />
app/assets/javascript<br />
に設置。また、glyphiconsのフォントを<br />
app/assets/font<br />
配下に配置する。</p>
<p>また、configにてconfig.assets.precompileによりcompileするassetsを指定している場合は、下記を追加する。</p>

		<div id="crayon-649540263e840651931066" 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">add config.assets.precompile</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;">
config.assets.precompile += %w(.eot .ttf .woff .woff2)</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-649540263e840651931066-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-649540263e840651931066-1"><span class="crayon-i">config</span><span class="crayon-sy">.</span><span class="crayon-i">assets</span><span class="crayon-sy">.</span><span class="crayon-i">precompile</span><span class="crayon-h"> </span>+=<span class="crayon-h"> </span><span class="crayon-sy">%</span><span class="crayon-e">w</span><span class="crayon-sy">(</span><span class="crayon-sy">.</span><span class="crayon-i">eot</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">ttf</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">woff</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">woff2</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>２. cssの書き換えを行う。</h2>
<p>上記のような設置方法の場合、glyphiconsのフォントは読み込まれないので、bootstrap.cssの書き換えを行う必要がある。<br />
まず、bootstrap.cssをbootstrap.css.erbにrenameを行う。<br />
その後、cssにてフォントをしている箇所にて、</p>

		<div id="crayon-649540263e844216893607" 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;">
src: url('../fonts/glyphicons-halflings-regular.eot');</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-649540263e844216893607-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-649540263e844216893607-1"><span class="crayon-i">src</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">url</span><span class="crayon-sy">(</span><span class="crayon-s">'../fonts/glyphicons-halflings-regular.eot'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>から</p>

		<div id="crayon-649540263e846068373465" 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;">
src: url(&lt;%= asset_path 'glyphicons-halflings-regular.eot' %&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-649540263e846068373465-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-649540263e846068373465-1"><span class="crayon-i">src</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">url</span><span class="crayon-sy">(</span><span class="crayon-ta">&lt;%=</span><span class="crayon-h"> </span><span class="crayon-i">asset_path</span><span class="crayon-h"> </span><span class="crayon-s">'glyphicons-halflings-regular.eot'</span><span class="crayon-h"> </span><span class="crayon-ta">%&gt;</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のような書き換えを行う。</p>
<p>以上により、設置は完了です。<br />
こちらを参考に致しました。<br />
<a href="https://gist.github.com/anotheruiguy/7379570" target="_blank" class="link">anotheruiguy/web-fonts-asset-pipeline.md &#8211; GitHub</a></p>

Railsでgemを使わずbootstarpを使用したいとき

<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>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - 2016年

2016/06/15

2016/06/15

2016/06/15

2016/06/15

2016/06/15

2016/06/15

2016/06/15

2016/06/08

2016/06/08

2016/06/08

2016/06/08

2016/06/08

2016/06/07

2016/06/01

2016/06/01

2016/06/01

2016/06/01

2016/06/01