<p>以前、Project Cometについてブログを書きましたが、<br />
<a class="link" href="/designer/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%a2%e3%83%83%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%83%84/">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a><br />
とうとう、3月14日に「Adobe Experience Design CC」と名前を変え、登場しました。</p>
<p><a class="link" href="http://www.adobe.com/products/experience-design.html" target="_blank">Adobe Experience Design CC</a></p>
<h2>Adobe Experience Design CC</h2>
<p>以前お伝えした通り、こちらはモックアップ制作のためのツールになり、<br />
UX設計のためのツールとのことです。<br />
今はPreviewってことなのか、Adobeのアカウントがあれば無料で使えます。</p>
<p>実際に使ってみましょう！</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-9904" src="/uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86.png" alt="スクリーンショット 2016-03-15 14.32.04" width="463" height="269" srcset="/uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86.png 801w, /uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86-300x175.png 300w, /uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86-768x447.png 768w, /uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86-228x133.png 228w" sizes="(max-width: 463px) 100vw, 463px" /></p>
<p>スマホ、タブレット、webのサイズで作ることができます。</p>
<p>元々のサンプルや、iOSやGoogle Materialのkitがあるので、そちらを用いるのいいかもしれません。</p>
<p>とりあえず,iPhoneを選んで作成してみます。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/7VVRdbaNEe.gif" alt="7VVRdbaNEe" width="640"  class="alignnone size-large wp-image-9905" /></p>
<h2>Design</h2>
<p>まずはDesign画面。<br />
スッキリしたインターフェイスで、ちょっとsketchっぽい感じもします。<br />
直線、図形、ペンツール、テキストが使え、画像はドラッグ＆ドロップで使えます。</p>
<p>図形やテキストに関しては、色、透明度、ボーダー、シャドウを適用することができます。<br />
Photoshopのように多くのスタイルは用意されていないようです。</p>
<p>ただ、モックアップはもちろん、最近のアプリのデザインのためにはそこまでスタイルは必要ないかもしれないので充分かもしれません。</p>
<p>Adobeということで、aiとpsdとの連携は抜群なので、このツールで作れない部分は、aiやpsdで作ると良いと思います。</p>
<p>同じようなパターンが続く場合は以下のようにサクッと作ることができます。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/01Hl7bnhpo.gif" alt="01Hl7bnhpo" width="640" class="alignnone size-large wp-image-9908" /></p>
<p>これはスゴいですね！！</p>
<h2>Prototype</h2>
<p>次にPrototype画面。<br />
これもスゴいですね。</p>
<p>Prototype設定画面に行って、選択して遷移させたい箇所につなげるだけでOKです。<br />
遷移のアニメーションも5つ(スライドレフト・ライト・アップ・ダウン、ディゾルブ)用意されています。</p>
<p><img decoding="async" src="/demo/abe/gif/20160315.gif" alt="01Hl7bnhpo" width="640" /></p>
<p>実際画面がどの用意に遷移していくのか、リンク先はどこなのかこれを作って共有すれば基本理解出来ますね！</p>
<h2>終わりに</h2>
<p>いや〜、遂に登場しましたが、今後毎月新しい機能を追加していくとのことですが、<br />
どのようになっていくのでしょうか？<br />
現状webサイトのデザインをするという視点からは見るとPhotoshopの方がいいかなという感じです。<br />
それはなぜかというと、</p>
<h3>個人的に気になる点</h3>
<p>・レイヤー機能がない<br />
・スライス機能がない<br />
・スタイルが少ない</p>
<p>まぁこのツールはそもそも「UXデザイナーのため」と謳っているので、上記の機能は必要ないのかもしれません。</p>
<p>しかし、今後の機能次第では、web・アプリの制作の定番ツールになりそうな気もします。</p>
<p>今後に期待です！！</p>


遂に来た！Adobe Experience Design CCがいい！

<p>先週に続きweibo情報です。<br />
企業がweiboを使う際にどんなことができるか調べてみました。</p>
<p>ざっくり言いますと、google、Facebook、Twitter、LINEの良いところを全部足して、プラス独自の機能があるという感じでした。<br />
中国全土にくまなく、しかも狙ったターゲットを外さずに情報を伝える仕組みが出来上がっています。<br />
すごいっす。</p>
<p>ざっくりと説明しましたが、主な機能についてまたざっくりとご紹介します。</p>
<h2>Feed広告</h2>
<p>広告枠を買って、タイムラインに投稿を表示させるものです。<br />
FacebookでもTwitterでもありますしこれは理解しやすいですよね。<br />
CPM・CPEの概念もばっちりあります。</p>
<h2>Adネットワーク</h2>
<p>weiboで影響力のあるアカウントに情報の配信、拡散を依頼します。<br />
たとえば、私が「中国の２０代の女性向けの化粧品」を扱っている場合、「中国の２０代女性の化粧品購買に影響力のあるアカウント」にお願いして、「わ～この化粧品すごくいい！わたしいつも使っているよ★」のような投稿を依頼できるのです。</p>
<p>これステマですよね。<br />
モデルや芸能人にこのような依頼をする手法はツイッターでもInstagramでも横行していますが、この仕組みを本部がおおっぴらにやってるのがすごいなと思いました。<br />
でもすごく合理的。</p>
<p>拡散を依頼される影響力の高いアカウントはKOL（=Key Opinion Leader）と言われ、企業から依頼される投稿を配信、拡散することで報酬がでます。<br />
Adネットワークにはどんなアカウントでも登録できますが、フォロワー数や投稿内容によってランキング化され、報酬金額に影響します。</p>
<h2>イベントツール</h2>
<p>下記のようなキャンペーンを展開できるツールです。<br />
上２つの広告手法との連動で使うものです。</p>
<p>・プレゼント応募キャンペーン<br />
・クーポン発行キャンペーン<br />
・サンプル配布キャンペーン<br />
・レビュー投稿キャンペーン</p>
<h2>ファンサービス</h2>
<p>Twitterで言うところのダイレクトメッセージサービスにカスタマイズ性を持たせたようなものです。<br />
双方向性の強さと管理機能の高性能さに関してはLINE＠にも似ています。</p>
<p>・フォロワー一斉ダイレクトメッセージ配信<br />
・自動返信<br />
・有料コンテンツ購読機能<br />
・フォロワーコンテンツ分析　など</p>
<h2>まとめ</h2>
<blockquote><p>Weiboは6億人の登録ユーザー、企業アカウント56万件、1日あたり6970万人のアクティブユーザー、そして1日あたり1.2億件の投稿がある中国最大のソーシャルメディアへと成長しました。しかし、情報の飽和やBOTアカウントの存在、さらにユーザーとの新密度（エッジランク）や行動時間の違いなどより、アカウント上での投稿だけでは本来のターゲットへ情報を届けることが難しくなって来ています。
</p></blockquote>
<p>さすが、中国。情報の過多具合、カオス具合も半端ないのでしょう。<br />
洗練されたマーケティングツールはこのような（ある意味）悪状況によって生まれたのかもしれません。</p>


超ざっくり！ Weiboでできるマーケティングツールが凄かった！

<p>知り合いにimport.ioというスクレイピングツールといことを教えていただきました。</p>
<p><a href="https://www.import.io/" target="_blank" class="link">Import.io | Web Data Platform &amp; Free Web Scraping Tool</a></p>
<p>スクレイピングという言葉自体を知りませんでした。</p>
<blockquote><p>
ウェブスクレイピング（Web scraping）とは、ウェブサイトから情報を抽出するコンピュータソフトウェア技術のこと。ウェブ・クローラー(Web crawler) あるいはウェブ・スパイダー(Web spider)とも呼ばれる。 通常このようなソフトウェアプログラムは低レベルのHTTP（Hypertext Transfer Protocol）を実装することで、もしくはInternet ExplorerまたはMozilla FirefoxなどのWebブラウザを埋め込むことによって、人間によるWWWのブラウジングをシミュレートする。<br />
<a href="https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0">ウェブスクレイピング &#8211; Wikipedia</a>より
</p></blockquote>
<p>要は、サイトのデータを一括で情報を取得できるということでしょうか。<br />
例えばECサイトの商品の一覧ページの情報を取得したりとか&#8230;</p>
<h3>コンペナビで試してみた</h3>
<p>とりあえず、弊社の<a href="http://compe.sterfield.jp/" target="_blank">コンペナビ</a>で試してみました。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-1024x598.jpg" alt="import.io Magic  Web Data Platform &amp; Free Web Scraping Tool2" width="500"  class="alignnone size-large wp-image-9882" srcset="/uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-1024x598.jpg 1024w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-300x175.jpg 300w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-768x448.jpg 768w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-228x133.jpg 228w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2.jpg 1141w" sizes="(max-width: 1024px) 100vw, 1024px" /><br />
(一部ぼかしてます)</p>
<p>いい感じで取得出来ている感じです。<br />
CSVで保存したり、APIにしたりすることが出来るようです！</p>
<p>webサイトのリニューアルで「現行サイトのデータを持って来といて」なんて言われることがあるんですが、そういう時使えそうな感じがします。</p>


webサイトから素早く、綺麗に情報を抽出するツール「import.io」

<p>中国本土でサイトを公開するのに許認可が必要なことをご存知だろうか?</p>
<p>正確には、中国本土にサーバーを設置、公開されるサイトに必要なライセンスで、増値電信業務経営許可証、通称ICP(Internet Contents Provider)ライセンスと呼ばれている。</p>
<p>これは情報統制のために2005年から行われている制度で、全てのサイトが対象となる。</p>
<p>他国にサーバーを設置したり、サーバーを独自に立てたりなどいくつか抜け道はあるそうだが、</p>
<p>基本的には義務であることと、百度SEOで評価が下がる?という都市伝説もあるらしく、許認可を受けることがスタンダードとなっている。</p>
<p>&nbsp;</p>
<h2>ICPライセンスには経営性と非経営性がある</h2>
<p>経営性 = 営利目的、非経営性 = 非営利目的の2種類がある。</p>
<p>営利目的の方が取得が難しく、手続きがやや複雑、非営利性は中国国内のサーバー会社などに依頼すれば比較的簡単に習得が可能だ。</p>
<p>ここで気になるのは、ECサイトはどちらにあたるのか?という点だ。</p>
<p>実際に、非経営性ライセンスでECサイトを運営している例は少なくないらしい。</p>
<p>ただ、これはかなりグレーであるため、サイトが大きくなってきたら経営性ライセンスに切り替えた方が懸命なようだ。</p>
<p>既に現地法人を設立済みで、且つ輸入の許認可を得ていれば取得しなくても良い場合もあるとのこと。</p>
<p>いずれにせよ、担当者やタイミングによってルールが変わってしまうおそれがあるため、常に最新の情報を入手することが重要だ。</p>
<p>&nbsp;</p>
<h2>中国向けの独自ECサイトを始めるにはどうしたら良いか?</h2>
<p>これはあくまで個人的な意見だが、</p>
<ol>
<li>日本国内で中国向けのサイトを構築する</li>
<li>売れてきたらICPライセンスを取得しておく</li>
<li>問題が起きたら中国国内サーバーに移動する</li>
</ol>
<p>というのが手堅いやり方だと思う。</p>
<p>3の最大の問題はブロックされるということだが</p>
<p>独自サイトでブロックされたという話は自分は聞いたことがない。</p>
<p>とはいえ十分にあり得そうな話なので、売上比率が大きくなれば備えたほうが良さそうだ。</p>
<p>&nbsp;</p>
<p>日本国内での中国向けECサイトは今後急速に増えていくことが予想されるが、</p>
<p>まだまだ知られていないことが多いので、常に最新の情報を知っておくことが重要だ</p>


【ICPライセンス】中国でのサイト公開に必要な許認可

<p>Vagrant＋CentOS6で開発を行っているのですが、httpsで開発を行う必要があったため、Vagrant内にオレオレ証明書の設定を行ったので、その設定ログをブログにしてみました。</p>
<p>通常運用しているサーバーであれば、有料でSSLサーバー証明書を有料で取得するのですが、Vagrantのような開発環境では有料で取得するにはもったいないので、オレオレ証明書（Self-Signed SSL Certificate）を利用しています。</p>
<h2>手順</h2>
<ul>
<li>mod_sslをインストールする</li>
<p></p>

		<div id="crayon-649540263a04d687767253" 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;">
yum install -y mod_ssl</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-649540263a04d687767253-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-649540263a04d687767253-1"><span class="crayon-e">yum </span><span class="crayon-i">install</span><span class="crayon-h"> </span>-<span class="crayon-i">y</span><span class="crayon-h"> </span><span class="crayon-i">mod_ssl</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>CentOSにはopensslがdefaultで入っているので、ダウンロードする必要はなかったのですが、もしインストールされていない場合は、インストールする必要があるようです。</p>
<li>/etc/httpd/conf.d/に移動する</li>
<p></p>

		<div id="crayon-649540263a05b890156589" 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;">
cd /etc/httpd/conf.d/</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-649540263a05b890156589-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-649540263a05b890156589-1"><span class="crayon-i">cd</span><span class="crayon-h"> </span>/<span class="crayon-i">etc</span>/<span class="crayon-i">httpd</span>/<span class="crayon-i">conf</span><span class="crayon-sy">.</span><span class="crayon-i">d</span>/</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>defaultであれば/etc/pki/tls/certs配下にSSLCertificateKeyFile等を作成するようですが、今回は、/etc/httpd/conf.d/配下に作成しました。</p>
<li>keyファイル等の作成</li>
<p></p>

		<div id="crayon-649540263a05c842572806" 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;">
openssl genrsa 2048 &gt; server.key
openssl req -new -key server.key &gt; server.csr
openssl x509 -days 3650 -req -signkey server.key &lt; server.csr &gt; server.crt</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-649540263a05c842572806-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263a05c842572806-2">2</div><div class="crayon-num" data-line="crayon-649540263a05c842572806-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-649540263a05c842572806-1"><span class="crayon-e">openssl </span><span class="crayon-i">genrsa</span><span class="crayon-h"> </span><span class="crayon-cn">2048</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-i">server</span><span class="crayon-sy">.</span><span class="crayon-e">key</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263a05c842572806-2"><span class="crayon-e">openssl </span><span class="crayon-i">req</span><span class="crayon-h"> </span>-<span class="crayon-r">new</span><span class="crayon-h"> </span>-<span class="crayon-e">key </span><span class="crayon-i">server</span><span class="crayon-sy">.</span><span class="crayon-i">key</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-i">server</span><span class="crayon-sy">.</span><span class="crayon-e">csr</span></div><div class="crayon-line" id="crayon-649540263a05c842572806-3"><span class="crayon-e">openssl </span><span class="crayon-i">x509</span><span class="crayon-h"> </span>-<span class="crayon-i">days</span><span class="crayon-h"> </span><span class="crayon-cn">3650</span><span class="crayon-h"> </span>-<span class="crayon-i">req</span><span class="crayon-h"> </span>-<span class="crayon-e">signkey </span><span class="crayon-i">server</span><span class="crayon-sy">.</span><span class="crayon-i">key</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-i">server</span><span class="crayon-sy">.</span><span class="crayon-i">csr</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-i">server</span><span class="crayon-sy">.</span><span class="crayon-i">crt</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<li>ssl.confの変更</li>
<p></p>

		<div id="crayon-649540263a05e504087575" 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;">
vim /etc/httpd/conf.d/ssl.conf
SSLCertificateFile /etc/httpd/conf.d/server.crt
SSLCertificateKeyFile /etc/httpd/conf.d/server.key</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-649540263a05e504087575-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263a05e504087575-2">2</div><div class="crayon-num" data-line="crayon-649540263a05e504087575-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-649540263a05e504087575-1"><span class="crayon-i">vim</span><span class="crayon-h"> </span>/<span class="crayon-i">etc</span>/<span class="crayon-i">httpd</span>/<span class="crayon-i">conf</span><span class="crayon-sy">.</span><span class="crayon-i">d</span>/<span class="crayon-i">ssl</span><span class="crayon-sy">.</span><span class="crayon-e">conf</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263a05e504087575-2"><span class="crayon-i">SSLCertificateFile</span><span class="crayon-h"> </span>/<span class="crayon-i">etc</span>/<span class="crayon-i">httpd</span>/<span class="crayon-i">conf</span><span class="crayon-sy">.</span><span class="crayon-i">d</span>/<span class="crayon-i">server</span><span class="crayon-sy">.</span><span class="crayon-e">crt</span></div><div class="crayon-line" id="crayon-649540263a05e504087575-3"><span class="crayon-i">SSLCertificateKeyFile</span><span class="crayon-h"> </span>/<span class="crayon-i">etc</span>/<span class="crayon-i">httpd</span>/<span class="crayon-i">conf</span><span class="crayon-sy">.</span><span class="crayon-i">d</span>/<span class="crayon-i">server</span><span class="crayon-sy">.</span><span class="crayon-i">key</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<li>apacheの再起動</li>
<p></p>

		<div id="crayon-649540263a05f821489134" 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;">
service httpd configtest
service httpd restart</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-649540263a05f821489134-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263a05f821489134-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-649540263a05f821489134-1"><span class="crayon-e">service </span><span class="crayon-e">httpd </span><span class="crayon-e">configtest</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263a05f821489134-2"><span class="crayon-e">service </span><span class="crayon-e">httpd </span><span class="crayon-i">restart</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>
</ul>
<p>実際に、オレオレ証明書をつけたものを見てみると警告はでたものの、サイトは表示されました。</p>
<h2>参考サイト</h2>
<p>
<a href="http://d.hatena.ne.jp/ozuma/20130511/1368284304">オレオレ証明書をopensslで作る（詳細版）</a></p>

Vagrantでオレオレ証明書（Self-Signed SSL Certificate） の設定を行う

<p>CINEMA4DのCモーションを使用すると簡単にキャラクタに歩行させる事ができるという内容を以前に書きましたが、今回もCモーションについてです。</p>
<h2>キャラクタに登山をさせる　Cモーション</h2>
<p>キャラクタを設定した後にCモーションを追加して、オブジェクトタブの歩行を「直進」にするとキャラクタが歩いてくれるというのは前回までと同じですが、</p>
<p>「直進」を選択すると「経路」というタブが表示されます。</p>
<p><a href="/uploads-archive/2016/03/3-1.jpg" rel="attachment wp-att-9872"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9872" src="/uploads-archive/2016/03/3-1.jpg" alt="3" width="640" height="332" srcset="/uploads-archive/2016/03/3-1.jpg 640w, /uploads-archive/2016/03/3-1-300x156.jpg 300w, /uploads-archive/2016/03/3-1-228x118.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>この経路タブの「サーフェス」に、キャラクタに上を歩かせたいオブジェクトをリンクしてあげると、この単純な作業だけで地形などの表面を歩いてくれます。</p>
<p><a href="/uploads-archive/2016/03/2-1.jpg" rel="attachment wp-att-9871"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9871" src="/uploads-archive/2016/03/2-1.jpg" alt="2" width="640" height="304" srcset="/uploads-archive/2016/03/2-1.jpg 640w, /uploads-archive/2016/03/2-1-300x143.jpg 300w, /uploads-archive/2016/03/2-1-228x108.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>地形オブジェクトをサーフェスにリンクさせたアニメーションがこちらになります。</p>
<div style="width: 720px;" class="wp-video">
<video class="wp-video-shortcode" id="video-9835-1" width="720" height="404" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/03/climb1.mp4?_=1" /><a href="/uploads-archive/2016/03/climb1.mp4">/uploads-archive/2016/03/climb1.mp4</a></video></div>
<p>キャラクタがオブジェクトに沈んでしまっている部分がある場合はオフセットを調節する事で回避できます。</p>
<p>ハブを整列にチェックを入れるとオブジェクトの角度に沿って進み、ターゲットを整列にチェックを入れると足が表面の形に合わせて着地してくれます。</p>
<h2>キャラクタをパスに沿って歩かせる　Cモーション</h2>
<p>オブジェクトタブの歩行から「パス」を選択して、パスにスプラインを指定すると、スプラインに沿って歩いてくれます。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2016/03/4-1.jpg" rel="attachment wp-att-9873"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9873" src="/uploads-archive/2016/03/4-1.jpg" alt="4" width="640" height="209" srcset="/uploads-archive/2016/03/4-1.jpg 640w, /uploads-archive/2016/03/4-1-300x98.jpg 300w, /uploads-archive/2016/03/4-1-228x74.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<div style="width: 720px;" class="wp-video"><video class="wp-video-shortcode" id="video-9835-2" width="720" height="404" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/03/climb2.mp4?_=2" /><a href="/uploads-archive/2016/03/climb2.mp4">/uploads-archive/2016/03/climb2.mp4</a></video></div>
<p>&nbsp;</p>
<p>サーフェスとして指定できるのはオブジェクトであれば、調整は色々と必要になりますが、おそらく何でもOKなはずです。</p>
<div style="width: 720px;" class="wp-video"><video class="wp-video-shortcode" id="video-9835-3" width="720" height="404" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/03/climb3.mp4?_=3" /><a href="/uploads-archive/2016/03/climb3.mp4">/uploads-archive/2016/03/climb3.mp4</a></video></div>

CINEMA4D　Cmotion　オブジェクトの表面をキャラクタに歩かせる

<p>以前、<a href="/blog/other/%E7%94%BB%E5%83%8F%E3%82%84%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97%E3%81%AB%E6%AE%8B%E3%81%97%E3%81%A6%E3%81%8A%E3%81%91%E3%82%8Bchrome%E6%8B%A1.html">画像やページを残しておけるChrome拡張「DashNotes」</a>をご紹介させて頂きましたが、あれから使用していて「こうだったらいいのに、ああだったらいいのに」と思うところがボロボロと出てきました。</p>
<h2>作ったメモが移動できない</h2>
<p><a href="/uploads-archive/2016/02/googlekeep01.jpg" rel="attachment wp-att-9735"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/googlekeep01-1024x507.jpg" alt="googlekeep01" width="1024" height="507" class="alignnone size-large wp-image-9735" srcset="/uploads-archive/2016/02/googlekeep01-1024x507.jpg 1024w, /uploads-archive/2016/02/googlekeep01-300x149.jpg 300w, /uploads-archive/2016/02/googlekeep01-768x380.jpg 768w, /uploads-archive/2016/02/googlekeep01-228x113.jpg 228w, /uploads-archive/2016/02/googlekeep01.jpg 1500w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>画像の通り、メモとして残したものはその場にしか貼り付けられないので移動が出来ません。プチ不便。</p>
<h2>作ったメモの改行が出来ない</h2>
<p><a href="/uploads-archive/2016/02/googlekeep02.jpg" rel="attachment wp-att-9737"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/googlekeep02-1024x507.jpg" alt="googlekeep02" width="1024" height="507" class="alignnone size-large wp-image-9737" srcset="/uploads-archive/2016/02/googlekeep02-1024x507.jpg 1024w, /uploads-archive/2016/02/googlekeep02-300x149.jpg 300w, /uploads-archive/2016/02/googlekeep02-768x380.jpg 768w, /uploads-archive/2016/02/googlekeep02-228x113.jpg 228w, /uploads-archive/2016/02/googlekeep02.jpg 1500w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>これもプチ不便。やっぱり改行して分けたい文章とかあるじゃないですか？<br />
それが出来ないとパッと見で把握したい事も少し考えてしまいますよね。</p>
<p>ちなみに、</p>
<p><a href="/uploads-archive/2016/02/googlekeep03.jpg" rel="attachment wp-att-9738"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/googlekeep03-1024x507.jpg" alt="googlekeep03" width="1024" height="507" class="alignnone size-large wp-image-9738" srcset="/uploads-archive/2016/02/googlekeep03-1024x507.jpg 1024w, /uploads-archive/2016/02/googlekeep03-300x149.jpg 300w, /uploads-archive/2016/02/googlekeep03-768x380.jpg 768w, /uploads-archive/2016/02/googlekeep03-228x113.jpg 228w, /uploads-archive/2016/02/googlekeep03.jpg 1500w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>もちろんHTMLも使えません。</p>
<p>DashNotesの良いところは、やっぱ即座に他のサイトが残せるというのがメインなんでしょうね。<br />
すごく便利な部分もありますが、もっと私が望んでいる拡張機能はないだろうかと調べた所、なかなか良さそうなアプリを見つけました。</p>
<h2>その名もGooglekeepを色分け＆ソートが出来るようになる拡張機能「Category Tabs for Google Keep」</h2>
<p>Google Keep自体は普通のメモが残せるコンテンツですが、こちらは本当にただのメモ帳だけでして…<br />
他のサイトを残す時は、自分で打ち込まないといけませんし…<br />
DashNotesのようなリンクを残す技はありませんが、共有したいメモ帳なんかを色分けで残せます。</p>
<p>元々、画像のような感じ　↓</p>
<p><a href="/uploads-archive/2016/02/googlekeep04.jpg" rel="attachment wp-att-9739"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/googlekeep04-1024x507.jpg" alt="googlekeep04" width="1024" height="507" class="alignnone size-large wp-image-9739" srcset="/uploads-archive/2016/02/googlekeep04-1024x507.jpg 1024w, /uploads-archive/2016/02/googlekeep04-300x149.jpg 300w, /uploads-archive/2016/02/googlekeep04-768x380.jpg 768w, /uploads-archive/2016/02/googlekeep04-228x113.jpg 228w, /uploads-archive/2016/02/googlekeep04.jpg 1500w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>Google Keepで検索をして頂くと、一番上にヒットします。</p>
<h3>画像などもいれられる</h3>
<p><a href="/uploads-archive/2016/02/googlekeep05.jpg" rel="attachment wp-att-9740"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/googlekeep05-1024x507.jpg" alt="googlekeep05" width="1024" height="507" class="alignnone size-large wp-image-9740" srcset="/uploads-archive/2016/02/googlekeep05-1024x507.jpg 1024w, /uploads-archive/2016/02/googlekeep05-300x149.jpg 300w, /uploads-archive/2016/02/googlekeep05-768x380.jpg 768w, /uploads-archive/2016/02/googlekeep05-228x113.jpg 228w, /uploads-archive/2016/02/googlekeep05.jpg 1500w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<h2>その他にもGoogle Keepだけでもメリットがたくさん</h2>
<p>・作成したメモ帳はドラッグ＆ドロップで移動が出来る（上下左右）<br />
・メモ内で改行も出来る<br />
・チェックボックス付きのアイテムリストも作れる<br />
・スケジュールなどの日時指定も設定できる</p>
<p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　などなど</p>
<p>これだけでも便利なのに、色分け＆ソートが出来るようになる拡張機能「Category Tabs for Google Keep」を入れる事でもっと便利に！</p>
<h2>色分けタブが作れるようになる</h2>
<p>画像のような色分けタブが作成できるようになります。</p>
<p><a href="/uploads-archive/2016/02/googlekeep06.jpg" rel="attachment wp-att-9741"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/googlekeep06-1024x505.jpg" alt="googlekeep06" width="1024" height="505" class="alignnone size-large wp-image-9741" srcset="/uploads-archive/2016/02/googlekeep06-1024x505.jpg 1024w, /uploads-archive/2016/02/googlekeep06-300x148.jpg 300w, /uploads-archive/2016/02/googlekeep06-768x379.jpg 768w, /uploads-archive/2016/02/googlekeep06-228x112.jpg 228w, /uploads-archive/2016/02/googlekeep06.jpg 1925w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>タイトルも自分の好きなように変更が出来るので、様々な情報を分けることが可能となります。<br />
また、タブをクリックすれば色分けした情報だけでソートが出来たり、上部の検索部分で検索なども出来ます。<br />
これによって自己管理…またはGoogleアカウントを共通にしておけば、連携がとれるようになりますよね。</p>
<p>…これって、思ってるより本当に便利なんじゃ…(((( ;ﾟдﾟ)))</p>
<h3>おまけ</h3>
<p>現在バージョンは、1.9.1ですが不具合が多少出ているような気がします。<br />
作成したメモを多選択出来るようにはなっているのですが、一括削除などが出来ません。<br />
この拡張機能で表示される色分けタブが邪魔してしまっているようですね。<br />
今後、これが解決すればもっと使いやすくなると思います。</p>


”DashNotes”より便利だと思うgoogle拡張機能で自己（チームもOK）管理を強める

<p>GoogleAnalyticsを拡張するサービス今回は「brick」を紹介したいと思います。</p>
<p>一ヶ月ほど前に「<a href="/officer/google%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E3%82%92%E6%8B%A1%E5%BC%B5%E3%81%99%E3%82%8B%E3%80%8Cdot-metrix%E3%80%8D%E3%81%AE%E4%B8%80%E8%A6%A7%E6%80%A7%E3%81%8C%E7%B4%A0/">dotmetrix</a>」というサービスを紹介しましたが、オンライン上だけでなく、レポートとして出力してくれるサービスを探していたところ、「brick」のお試し期間を登録してみて、非常に感動したので紹介です。</p>
<p>他にも月数万円かかる解析レポートサービスもありますが、高度な分析やリッチなグラフなど不要だが、とりあえず、オフラインで出力してほしい、最低限の編集を加えられるようにしたいなどというライト寄りのユーザーにとって、月4320円なら費用対効果が一番高いんじゃないかと考えられます。</p>
<h2>使い方</h2>
<p><a href="https://www.brick.tools/applications/autoreport-excel/" target="_blank">https://www.brick.tools/applications/autoreport-excel/</a></p>
<p>こちらからメールアドレスの登録かGoogleアカウントの認証で登録が出来ます。</p>
<p>メールアドレスからの登録は受信したメールからパスワードを設定するだけで個人情報の入力もなくすぐに登録できました。</p>
<p><a href="/officer/%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e8%a7%a3%e6%9e%90%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%88%e3%81%afbrick%e3%81%ae%e8%b2%bb%e7%94%a8%e5%af%be%e5%8a%b9%e6%9e%9c%e3%81%8c%e6%9c%80%e9%ab%98%ef%bc%81/attachment/brick%ef%bd%9c%e3%83%9b%e3%83%bc%e3%83%a0/" rel="attachment wp-att-9842"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9842" src="/uploads-archive/2016/03/7e2308a7d6184ecfd44b7da6e84dcd23-300x223.png" alt="brick｜ホーム" width="300" height="223" srcset="/uploads-archive/2016/03/7e2308a7d6184ecfd44b7da6e84dcd23-300x223.png 300w, /uploads-archive/2016/03/7e2308a7d6184ecfd44b7da6e84dcd23-768x571.png 768w, /uploads-archive/2016/03/7e2308a7d6184ecfd44b7da6e84dcd23-1024x762.png 1024w, /uploads-archive/2016/03/7e2308a7d6184ecfd44b7da6e84dcd23-228x170.png 228w, /uploads-archive/2016/03/7e2308a7d6184ecfd44b7da6e84dcd23.png 1281w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>brickというサービス自体がマーケティングツールを様々提供してくれておりまして、その中の一つとしてアクセス解析レポートがあるという位置づけですね。</p>
<p>ちなみに、他のサービスの料金は以下にのっています。</p>
<p><a href="https://www.brick.tools/pricing/" target="_blank">https://www.brick.tools/pricing/</a></p>
<p>全体的に安い！！！</p>
<p>今回はアクセス解析レポートのツールTOPページにいきます。</p>
<p><a href="/officer/%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e8%a7%a3%e6%9e%90%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%88%e3%81%afbrick%e3%81%ae%e8%b2%bb%e7%94%a8%e5%af%be%e5%8a%b9%e6%9e%9c%e3%81%8c%e6%9c%80%e9%ab%98%ef%bc%81/attachment/brick%ef%bd%9c%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e8%a7%a3%e6%9e%90%e3%83%ac%e3%83%9b%e3%82%9a%e3%83%bc%e3%83%88/" rel="attachment wp-att-9851"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9851" src="/uploads-archive/2016/03/6aeb4f4d237913055f66fae7c207f785-300x76.png" alt="brick｜アクセス解析レポート" width="300" height="76" srcset="/uploads-archive/2016/03/6aeb4f4d237913055f66fae7c207f785-300x76.png 300w, /uploads-archive/2016/03/6aeb4f4d237913055f66fae7c207f785-768x195.png 768w, /uploads-archive/2016/03/6aeb4f4d237913055f66fae7c207f785-1024x259.png 1024w, /uploads-archive/2016/03/6aeb4f4d237913055f66fae7c207f785-228x58.png 228w, /uploads-archive/2016/03/6aeb4f4d237913055f66fae7c207f785.png 1279w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>矢印の「Googleアナリティクス追加」ボタンから管理しているサイト（ビュー）を追加するだけで一覧に追加されていきます。</p>
<p>あとは説明不要なほぼ簡単でレポートの作成から過去3ヶ月から作成するレポート月を選択するだけです。</p>
<p>作成自体は何分かかかるようで、他の作業をして戻ってきたらダウンロードボタンが出現しました。</p>
<h2>アクセス解析レポート</h2>
<p><a href="/officer/%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e8%a7%a3%e6%9e%90%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%88%e3%81%afbrick%e3%81%ae%e8%b2%bb%e7%94%a8%e5%af%be%e5%8a%b9%e6%9e%9c%e3%81%8c%e6%9c%80%e9%ab%98%ef%bc%81/attachment/ga_report_201601_%e3%81%99%e3%81%b8%e3%82%99%e3%81%a6%e3%81%ae%e7%9b%ae%e6%a8%99/" rel="attachment wp-att-9853"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9853" src="/uploads-archive/2016/03/2d448d40fff682c79fb06f3ba71018a6-300x190.png" alt="ga_report_201601_すべての目標" width="300" height="190" srcset="/uploads-archive/2016/03/2d448d40fff682c79fb06f3ba71018a6-300x190.png 300w, /uploads-archive/2016/03/2d448d40fff682c79fb06f3ba71018a6-768x486.png 768w, /uploads-archive/2016/03/2d448d40fff682c79fb06f3ba71018a6-1024x647.png 1024w, /uploads-archive/2016/03/2d448d40fff682c79fb06f3ba71018a6-228x144.png 228w, /uploads-archive/2016/03/2d448d40fff682c79fb06f3ba71018a6.png 1860w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>エクセル形式でシートごとに分かれておりグラフも同時に出力されており、エクセレント！！！</p>
<p>感動してしまいました。</p>
<p>pdfにしたらフル版で120ページを超えるほどの分量でした。</p>
<p>シート自体に保護かかっており、項目を削除するくらいしか出来ないようにはなっております。</p>
<h2>まとめ</h2>
<p>繰り返しになりますが、費用対効果においては抜群です。もしアクセス解析レポートの作成に2時間以上かけているようであれば、十分コスト削減に繋がるサービスだと思います。</p>


アクセス解析レポートはbrickの費用対効果が最高！

<p>デザインをする上で、遠近法が助けになることは少なくありません。<br />
遠近法といえば、一点透視図法や二点透視図法で有名な幾何学遠近法が真っ先に思い浮かぶ方は多いと思いますが、<br />
遠近法は他にもいろいろ存在します。</p>
<p>いろいろな遠近法について、<a href="http://blog.livedoor.jp/kokinora/archives/1008065272.html" target="_blank">説明くださっているサイト</a>がありましたので、<br />
そちらを参考に、遠近法を試してみました。</p>
<p>&nbsp;</p>
<h2>重畳遠近法</h2>
<p><a href="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg" rel="attachment wp-att-9845"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9845" src="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg" alt="重畳遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg 656w, /uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773-300x220.jpg 300w, /uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>最もシンプルな遠近法です。<br />
２つ以上のものが重なっているとき、前よりも後ろの物のほうが遠くに見えるという遠近法です。</p>
<h2>上下遠近法</h2>
<p><a href="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg" rel="attachment wp-att-9847"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9847" src="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg" alt="上下遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg 656w, /uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2-300x220.jpg 300w, /uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>水平線に向かって、上にあるものほど遠くに見えるという遠近法です。</p>
<h2>大小遠近法</h2>
<p><a href="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg" rel="attachment wp-att-9849"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9849" src="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg" alt="大小遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg 656w, /uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993-300x220.jpg 300w, /uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>大きなものほど近く、小さなものほど遠くに見えるという遠近法です。</p>
<h2>空気遠近法</h2>
<p><a href="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg" rel="attachment wp-att-9844"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9844" src="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg" alt="空気遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg 656w, /uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2-300x220.jpg 300w, /uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>遠くのものは大気の影響で霞んでいくことから、<br />
彩度、コントラストが弱いものほど遠くに見えるという遠近法です。</p>
<h2>色彩遠近法</h2>
<p><a href="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg" rel="attachment wp-att-9848"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9848" src="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg" alt="色彩遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg 656w, /uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42-300x220.jpg 300w, /uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>色彩が寒色系に近づくほど遠く、暖色系に近づくほど近くに見えるという遠近法です。</p>
<h2>消失遠近法</h2>
<p><a href="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg" rel="attachment wp-att-9846"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9846" src="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg" alt="消失遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg 656w, /uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1-300x220.jpg 300w, /uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>焦点に由来する遠近法で、<br />
焦点がぼやけたところほど遠くに見えるという遠近法です。</p>
<h2>幾何学遠近法(透視図法)</h2>
<p><a href="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg" rel="attachment wp-att-9843"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9843" src="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg" alt="幾何学遠近法(透視図法)" width="656" height="480" srcset="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg 656w, /uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548-300x220.jpg 300w, /uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg" rel="attachment wp-att-9864"><img decoding="async" class="alignnone wp-image-9890 size-full" src="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg" alt="" width="100%" srcset="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg 656w, /uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1-300x220.jpg 300w, /uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>一番有名な遠近法ですが、一番難易度の高い遠近法です。<br />
消失点に近いものほど小さく、遠く見えるというもので、<br />
一点透視図法、二点透視図法、三点透視図法などがあります。</p>
<p>&nbsp;</p>
<p>思っていた以上に多くの遠近法があることを知ることができました。<br />
必要に応じて使い分けたり、デザインのヒントにしていきたいです。</p>
<h2>参考サイト</h2>
<p><a class="link" href="http://blog.livedoor.jp/kokinora/archives/1008065272.html" target="_blank">遠近法について知っておこう ー概要ー : ノラの絵画の時間</a></p>


small_db2bbcef7b5fbd7a6d2940b36cc645d1.jpg

thumbnail_db2bbcef7b5fbd7a6d2940b36cc645d1.jpg

db2bbcef7b5fbd7a6d2940b36cc645d1.jpg

いろんな遠近法

<h2>vimのデフォルトの終了・保存方法</h2>
<p>vimの終了・保存方法といえば、<br />
:q + Enter（終了）<br />
:q! + Enter（編集したけど保存せず終了）<br />
:w + Enter（保存）<br />
:wq + Enter（保存して終了）<br />
などですが、私はタイピングスピードがそこまで早くないのと、楽をしたいということがあって、<br />
終了・保存方法を変更しました。</p>
<h2>終了・保存方法を変えてみた</h2>
<p>変更方法<br />
.vimrcに下記を記載し、vimのキーマッピングを変更する。</p>

		<div id="crayon-6495402639ad9460699748" 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">.vimrc</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;">
nmap s :w!&lt;CR&gt;
nmap q :q&lt;CR&gt;
nmap &lt;S-q&gt; :q!&lt;CR&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-6495402639ad9460699748-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402639ad9460699748-2">2</div><div class="crayon-num" data-line="crayon-6495402639ad9460699748-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-6495402639ad9460699748-1"><span class="crayon-i">nmap</span><span class="crayon-h"> </span><span class="crayon-i">s</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">w</span><span class="crayon-sy">!</span><span class="crayon-h">&lt;</span><span class="crayon-i">CR</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402639ad9460699748-2"><span class="crayon-i">nmap</span><span class="crayon-h"> </span><span class="crayon-i">q</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">q</span><span class="crayon-h">&lt;</span><span class="crayon-i">CR</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-6495402639ad9460699748-3"><span class="crayon-i">nmap</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-i">S</span>-<span class="crayon-i">q</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">q</span><span class="crayon-sy">!</span><span class="crayon-h">&lt;</span><span class="crayon-i">CR</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>この記載により、vimの終了・保存方法は、<br />
q（終了）<br />
Shift+q（編集したけど保存せず終了）<br />
s（保存）<br />
sq（保存して終了）<br />
に変更されます。</p>
<h2>所感</h2>
<p>とても地味な変更なのですが、元来の保存を行う場合、「Shift + : + w + Enter」「Shift + : + w + q + Enter」といったように4、５回キーを打たなければなりませんが、<br />
設定の変更により、「s」「sq」キーを1、２回だけ打つだけに変わり、タイプミスの多い私にとって、大分楽になりました。</p>

vimの終了・保存方法を変更する

<p>デザインでイラストを入れたり、絵を描いたりするとき、<br />
質感を出来るだけ短時間で出すことが求められる機会は多いと思います。</p>
<p>この質感を出す上で、一つのポイントとなることがあるのが、<br />
目が見ている色と、脳が見ている色にはズレが出てくることがあることを意識することです。</p>
<p>今回はその中でも影と色の関係についての、基本的な部分についてご紹介いたします。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2016/03/shadow-color_2.jpg" rel="attachment wp-att-9782"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9782" src="/uploads-archive/2016/03/shadow-color_2.jpg" alt="shadow-color_2" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color_2.jpg 656w, /uploads-archive/2016/03/shadow-color_2-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color_2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>↑こちらのいらすとの、下にある白黒のチェックですが、<br />
円柱の影になっている箇所は、実際には↓のように、影になっていない黒の部分よりも暗い色なのですが、<br />
白として認識できると思います。</p>
<p><a href="/uploads-archive/2016/03/shadow-color.jpg" rel="attachment wp-att-9783"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9783" src="/uploads-archive/2016/03/shadow-color.jpg" alt="shadow-color" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color.jpg 656w, /uploads-archive/2016/03/shadow-color-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>実際は暗い色なのですが、<br />
影と色の関係から、脳が再処理を行ってくれるため、<br />
影になった部分も白としてみることができます。</p>
<p>&nbsp;</p>
<p>もうひとつですが、</p>
<p><a href="/uploads-archive/2016/03/shadow-color02.jpg" rel="attachment wp-att-9785"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9785" src="/uploads-archive/2016/03/shadow-color02.jpg" alt="shadow-color02" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color02.jpg 656w, /uploads-archive/2016/03/shadow-color02-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color02-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>こちらのような立方体があった場合、<br />
一つ一つの面が一色で構成されていると見ることができます。</p>
<p>しかし、実際には下のイラストのように床からの反射光で、側面はグラデーションになっています。</p>
<p><a href="/uploads-archive/2016/03/shadow-color02_2-1.jpg" rel="attachment wp-att-9802"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9802" src="/uploads-archive/2016/03/shadow-color02_2-1.jpg" alt="shadow-color02_2" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color02_2-1.jpg 656w, /uploads-archive/2016/03/shadow-color02_2-1-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color02_2-1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>しかし、脳はこの反射光を省いた状態を計算して、<br />
一面が一色になっていると認識します。</p>
<p>日常で生活する場合、<br />
この脳の働きが、色や影の実際の状態を知る手助けになりますが、</p>
<p>デザインをしたり絵を描いたりする場合は、<br />
脳が省いた情報を再現することが、質感を高める場合が多くなります。</p>
<p>こちらのことを意識することで、<br />
作品の作り込みやアイディアを増やすヒントにしていきたいです。</p>
<p>&nbsp;</p>
<h2>参考文献</h2>
<p><a class="link" href="http://www.amazon.co.jp/dp/4862461530" target="_blank">カラー&amp;ライト ~リアリズムのための色彩と光の描き方 2012/1/30 ジェームス・ガーニー(James Gurney) (著)</a></p>


目が見る色と頭が見る色

<h2>目指せ！ weiboマスター</h2>
<p>weiboというSNSをご存知でしょうか。</p>
<p>中国国内最大のSNSですが、知ってはいるけど登録はしていない、という人が大半ではないでしょうか。</p>
<p>いやいや、私はばっちり登録していて毎日ばりばり投稿しているよ、という人は少数ではないかと思います。</p>
<p>私自身、2013年に登録していたものの使い方が分からずずっと放置していました。使い方自体はツイッターとほとんど同じなので、中国語が分からなくても直感的に理解できるのですが、いかんせん飛び交う言葉が理解できないので実際に楽しめるところまでは至りませんでした。</p>
<p>中国でものを売るのにはweiboはマストですよ～と言いながらも、自分自身はそんな体たらくぶりだったので、これではイカンと思い、アカウントを再開することにしました。</p>
<h2>中国人のリアルな声を聞きました</h2>
<p>どのような投稿をしたらいいかわからなかったのですが、「習うより慣れろ」と思い、なるべく思考停止して東京在住の中国人の投稿に対して</p>
<p>Enjoy Japan!!</p>
<p>とコメントをしまくりました。</p>
<p>そうすると早速女の子から一件のコメントが…！！</p>
<p>アイコンめっちゃかわいい！　すごいぜweibo!!</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/03/image1-169x300.png" alt="image1" width="169" height="300" class="aligncenter size-medium wp-image-9796" srcset="/uploads-archive/2016/03/image1-169x300.png 169w, /uploads-archive/2016/03/image1-576x1024.png 576w, /uploads-archive/2016/03/image1-228x406.png 228w, /uploads-archive/2016/03/image1.png 750w" sizes="(max-width: 169px) 100vw, 169px" /></p>
<p>哟西～ ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄</p>
<p>とありますが、意味がわかりません。<br />
google翻訳でも出てきません。中国のスラングでしょうか。チョベリグ的な。</p>
<p>哟西　日本語でググるとこんな意味が。</p>
<blockquote><p>これは中国政府が日本軍の悪行三昧を喧伝するために作ったドラマの中に出てくる<br />
日本語です。実際に聞くと一体何を言ってるのか我々にはわからないのですが、<br />
彼らにはかなり馬鹿にした意味があるようです。</p>
<p>「哟西」は元々の日本語で「良し！」恐らく軍隊の用語で上官が部下に対して使う<br />
言葉だと思います。</p></blockquote>
<p>ふーん。。どっちかと言えばチョベリバな意味でした。</p>
<p>これに懲りることなく、アルファウェイバー目指して頑張りたいと思います!!</p>


Weiboで知った中国人の女の子のリアルな声

<p>前回に引き続きCINEMA4Dの機能紹介です。</p>
<p>実写映像とCGを合成する際にAfter effectsなどを使ってもトラッキングができますが、CINEMA４D内で行うとカメラ位置など同時も読み込んでくれるので作業工程がかなり簡単です。</p>
<h2>動画を読み込む</h2>
<p>まずはトラッキングする動画を読み込みます。</p>
<p><a href="/uploads-archive/2016/03/1.jpg" rel="attachment wp-att-9770"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9770" src="/uploads-archive/2016/03/1.jpg" alt="1" width="640" height="486" srcset="/uploads-archive/2016/03/1.jpg 640w, /uploads-archive/2016/03/1-300x228.jpg 300w, /uploads-archive/2016/03/1-228x173.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>モーショントラッカーから「フル３D解析」を選択して、トラッキングする動画を開きます。</p>
<p><a href="/uploads-archive/2016/03/2.jpg" rel="attachment wp-att-9771"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9771" src="/uploads-archive/2016/03/2.jpg" alt="2" width="640" height="290" srcset="/uploads-archive/2016/03/2.jpg 640w, /uploads-archive/2016/03/2-300x136.jpg 300w, /uploads-archive/2016/03/2-228x103.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>読込み中は画面のいちばん左下にゲージが表示されます。読み込む動画の尺などにもよりますが結構時間がかかるかもしれません。</p>
<p>ちなみにAVCHDは読込んでくれませんでした。</p>
<p><a href="/uploads-archive/2016/03/3.jpg" rel="attachment wp-att-9773"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9773" src="/uploads-archive/2016/03/3.jpg" alt="3" width="640" height="426" srcset="/uploads-archive/2016/03/3.jpg 640w, /uploads-archive/2016/03/3-300x200.jpg 300w, /uploads-archive/2016/03/3-228x152.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="/uploads-archive/2016/03/5.jpg" rel="attachment wp-att-9775"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9775" src="/uploads-archive/2016/03/5.jpg" alt="5" width="640" height="497" srcset="/uploads-archive/2016/03/5.jpg 640w, /uploads-archive/2016/03/5-300x233.jpg 300w, /uploads-archive/2016/03/5-228x177.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>読込みが完了するとトラッカーと解析済みのカメラが出来上がります。</p>
<p><a href="/uploads-archive/2016/03/4.jpg" rel="attachment wp-att-9774"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9774" src="/uploads-archive/2016/03/4.jpg" alt="4" width="640" height="199" srcset="/uploads-archive/2016/03/4.jpg 640w, /uploads-archive/2016/03/4-300x93.jpg 300w, /uploads-archive/2016/03/4-228x71.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>この時に背景オブジェクトを作成をクリックすると読込んだ動画の背景を同時に作成してくれるので便利です。</p>
<h2>軸を調整する</h2>
<p>マーカーの位置を見てみるとXYZ軸と多少ずれてしまっていますので、これを調整していきます。</p>
<p>まずは中心点（X=０,Y=０,Z=０)がカメラ位置になってしまっているので、中心点を調整します。</p>
<p><a href="/uploads-archive/2016/03/6.jpg" rel="attachment wp-att-9778"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9778" src="/uploads-archive/2016/03/6.jpg" alt="6" width="510" height="555" srcset="/uploads-archive/2016/03/6.jpg 510w, /uploads-archive/2016/03/6-276x300.jpg 276w, /uploads-archive/2016/03/6-228x248.jpg 228w" sizes="(max-width: 510px) 100vw, 510px" /></a></p>
<p>モーショントラッカーからコンストレイントを選び「位置コンストレイントを作成」をクリックします。</p>
<p>次に動画を見ながら安定していそうなマーカーを探してクリックします。するとそのマーカーが座標の中心点に切り替わってくれます。</p>
<p><a href="/uploads-archive/2016/03/7.jpg" rel="attachment wp-att-9781"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9781" src="/uploads-archive/2016/03/7.jpg" alt="7" width="640" height="446" srcset="/uploads-archive/2016/03/7.jpg 640w, /uploads-archive/2016/03/7-300x209.jpg 300w, /uploads-archive/2016/03/7-228x159.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>続いてY軸０の位置がずれているので調整します。</p>
<p><a href="/uploads-archive/2016/03/8.jpg" rel="attachment wp-att-9787"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9787" src="/uploads-archive/2016/03/8.jpg" alt="8" width="537" height="525" srcset="/uploads-archive/2016/03/8.jpg 537w, /uploads-archive/2016/03/8-300x293.jpg 300w, /uploads-archive/2016/03/8-228x223.jpg 228w" sizes="(max-width: 537px) 100vw, 537px" /></a></p>
<p>「平面コンストレイントを作成」をクリックし、Y軸が０になるマーカーを３つ選択します。</p>
<p><a href="/uploads-archive/2016/03/9.jpg" rel="attachment wp-att-9788"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9788" src="/uploads-archive/2016/03/9.jpg" alt="9" width="640" height="350" srcset="/uploads-archive/2016/03/9.jpg 640w, /uploads-archive/2016/03/9-300x164.jpg 300w, /uploads-archive/2016/03/9-228x125.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>平面コンストレイントを選択した状態で軸をYに変更すれば、先ほど選択した3点からなる面をY=０と認識してくれます。</p>
<p><a href="/uploads-archive/2016/03/10.jpg" rel="attachment wp-att-9789"><img decoding="async" loading="lazy" class="alignnone wp-image-9789" src="/uploads-archive/2016/03/10.jpg" alt="10" width="373" height="249" srcset="/uploads-archive/2016/03/10.jpg 640w, /uploads-archive/2016/03/10-300x200.jpg 300w, /uploads-archive/2016/03/10-228x152.jpg 228w" sizes="(max-width: 373px) 100vw, 373px" /></a></p>
<p>同様に垂直方向の軸を調整します。「ベクトルコンストレイントを作成」をクリックして、垂直になるマーカー2点を選択します。</p>
<p><a href="/uploads-archive/2016/03/11.jpg" rel="attachment wp-att-9790"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9790" src="/uploads-archive/2016/03/11.jpg" alt="11" width="411" height="525" srcset="/uploads-archive/2016/03/11.jpg 411w, /uploads-archive/2016/03/11-235x300.jpg 235w, /uploads-archive/2016/03/11-228x291.jpg 228w" sizes="(max-width: 411px) 100vw, 411px" /></a></p>
<p>今回も軸をYに変更します。</p>
<p><a href="/uploads-archive/2016/03/13.jpg" rel="attachment wp-att-9794"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9794" src="/uploads-archive/2016/03/13.jpg" alt="13" width="339" height="204" srcset="/uploads-archive/2016/03/13.jpg 339w, /uploads-archive/2016/03/13-300x181.jpg 300w, /uploads-archive/2016/03/13-228x137.jpg 228w" sizes="(max-width: 339px) 100vw, 339px" /></a></p>
<p>以上で位置の調整は完了です。</p>
<h2>オブジェクトを配置する</h2>
<p><a href="/uploads-archive/2016/03/14.jpg" rel="attachment wp-att-9795"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9795" src="/uploads-archive/2016/03/14.jpg" alt="14" width="640" height="438" srcset="/uploads-archive/2016/03/14.jpg 640w, /uploads-archive/2016/03/14-300x205.jpg 300w, /uploads-archive/2016/03/14-228x156.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>実写と合成したオブジェクトをそれぞれ配置して、後はレンダリングするだけです。</p>
<p>出来上がった動画がこちらです。</p>
<div style="width: 720px;" class="wp-video"><video class="wp-video-shortcode" id="video-9769-3" width="720" height="414" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/03/test_2_up.mp4?_=3" /><a href="/uploads-archive/2016/03/test_2_up.mp4">/uploads-archive/2016/03/test_2_up.mp4</a></video></div>
<p>今回はレンダリング時間軽減のためにライティングなどを全く行わず、かなり簡素な感じですが読込んだ動画を背景にしてGIを使用すれば実際に存在しているような質感を出す事ができます。</p>
<p>&nbsp;</p>


CINEMA4D モーショントラッカーを使用した実写合成

<p>横幅によってフォントサイズの調整と、文字長を自動で省略シてくれるjQueryプラグイン&#8221;Jquery-quickfit&#8221; が良さそうだったので使ってみた。</p>
<p><a href="http://chunksnbits.github.io/jquery-quickfit/" target="_blank">http://chunksnbits.github.io/jquery-quickfit/</a></p>
<p>&nbsp;</p>
<p>デモはこちら</p>
<p><a href="/demo/hoshino/63/index.html" target="_blank" class="demo">Demo</a></p>
<p>&nbsp;</p>
<h2>設置方法</h2>
<p>JS</p>

		<div id="crayon-6495401591e2a233328404" 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;">
$( window ).on( "resize", function()
{
	$( "#quickfit-a" ).quickfit( { max: 40, min: 16, truncate: false } );
	$( "#quickfit-b" ).quickfit( { max: 40, min: 20, truncate: 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-6495401591e2a233328404-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2a233328404-2">2</div><div class="crayon-num" data-line="crayon-6495401591e2a233328404-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2a233328404-4">4</div><div class="crayon-num" data-line="crayon-6495401591e2a233328404-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-6495401591e2a233328404-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-r">window</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">on</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">"resize"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591e2a233328404-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401591e2a233328404-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">"#quickfit-a"</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">quickfit</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">max</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">40</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">min</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">16</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">truncate</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-h"> </span><span class="crayon-sy">}</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-6495401591e2a233328404-4"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">"#quickfit-b"</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">quickfit</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">max</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">40</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">min</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">20</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">truncate</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-6495401591e2a233328404-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>HTML</p>

		<div id="crayon-6495401591e2e985673947" 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">XHTML</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;">
&lt;div id="quickfit-a"&gt;
フォントサイズ最大:40、最小:16。文字省略:無し
&lt;/div&gt;

&lt;div id="quickfit-b"&gt;
フォントサイズ最大:40、最小:20。文字省略:有り
&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-6495401591e2e985673947-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2e985673947-2">2</div><div class="crayon-num" data-line="crayon-6495401591e2e985673947-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2e985673947-4">4</div><div class="crayon-num" data-line="crayon-6495401591e2e985673947-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591e2e985673947-6">6</div><div class="crayon-num" data-line="crayon-6495401591e2e985673947-7">7</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-6495401591e2e985673947-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"quickfit-a"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591e2e985673947-2"><span class="crayon-i ">フォントサイズ最大:40、最小:16。文字省略:無し</span></div><div class="crayon-line" id="crayon-6495401591e2e985673947-3"><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591e2e985673947-4">&nbsp;</div><div class="crayon-line" id="crayon-6495401591e2e985673947-5"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"quickfit-b"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591e2e985673947-6"><span class="crayon-i ">フォントサイズ最大:40、最小:20。文字省略:有り</span></div><div class="crayon-line" id="crayon-6495401591e2e985673947-7"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>パラメータ</p>
<table>
<tbody>
<tr>
<td>キー名</td>
<td>データ型</td>
<td>内容</td>
</tr>
<tr>
<td>max</td>
<td>数値</td>
<td>親要素の幅によってフォントサイズが大きくなる中で、許容する最大のフォントサイズ</td>
</tr>
<tr>
<td>min</td>
<td>数値</td>
<td>親要素の幅によってフォントサイズが小さくなる中で、許容する最小のフォントサイズ</td>
</tr>
<tr>
<td>truncate</td>
<td>bool</td>
<td>親要素をはみ出してしまう場合、文字を切ることを許容するかどうか</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>レスポンシブでのコーディングの時などで便利そうだ</p>

【jQuery】幅によって自動でテキストを省略してくれるプラグイン

<p>まず、AMPって聞き慣れないですよね。</p>
<p>購読しているRSSの中で、AMPについての言及がよくされていましたが、まだ実施前だしいいか〜なんて思っていたのですが、去る2016年2月24日に日本でも若干前倒しで実装がされたようですので、本サイトも対応してみました。</p>
<h2>AMPについて</h2>
<p>まず、AMPとは、Accelerated Mobile Pagesの略で、スマートフォンから閲覧するページを高速化させましょうプロジェクトで、原則HTML＋CSSで遅くなるJSは禁止というAMPフレームワークを作ったので準拠して下さいというのが超簡単な解釈です。</p>
<p>オフィシャルのページは<a href="https://googleblog.blogspot.jp/2015/10/introducing-accelerated-mobile-pages.html" target="_blank">こちら</a>で詳しく知りたい方は、海外SEO情報ブログさんの<a href="https://www.suzukikenichi.com/blog/accelerated-mobile-pages-amp/" target="_blank">こちら</a>の記事が詳しく解説されています。</p>
<h2>AMPに対応するためのWordpressプラグイン</h2>
<p>この情報も海外SEO情報ブログさんの<a href="https://www.suzukikenichi.com/blog/how-to-make-your-wordpress-blog-amp-ready/" target="_blank">記事</a>を参考にさせて頂きました。</p>
<h3>AMP</h3>
<p>一つ目はその名もAMP。</p>
<p>プラグインの検索画面でAMPと入力すると一番上に出てきます。</p>
<p>こちらを有効化します。</p>
<p><a href="/officer/%e7%9b%ae%e6%a8%99%e9%81%94%e6%88%90%e7%94%a8%e7%b4%99%e3%81%aegoogle%e3%82%b9%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%83%88%e3%82%99%e3%82%b7%e3%83%bc%e3%83%88%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be.html">/officer/%e7%9b%ae%e6%a8%99%e9%81%94%e6%88%90%e7%94%a8%e7%b4%99%e3%81%aegoogle%e3%82%b9%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%83%88%e3%82%99%e3%82%b7%e3%83%bc%e3%83%88%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be.html</a></p>
<p>日本語URLにしたことを後悔しつつも、要は末尾に/ampをつけることでAMP対応のページを表示してくれます。</p>
<p><a href="/officer/%e7%9b%ae%e6%a8%99%e9%81%94%e6%88%90%e7%94%a8%e7%b4%99%e3%81%aegoogle%e3%82%b9%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%83%88%e3%82%99%e3%82%b7%e3%83%bc%e3%83%88%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be.html/amp">/officer/%e7%9b%ae%e6%a8%99%e9%81%94%e6%88%90%e7%94%a8%e7%b4%99%e3%81%aegoogle%e3%82%b9%e3%83%95%e3%82%9a%e3%83%ac%e3%83%83%e3%83%88%e3%82%99%e3%82%b7%e3%83%bc%e3%83%88%e3%81%a4%e3%81%8f%e3%82%8a%e3%81%be.html/amp</a></p>
<p>私達で用意したスタイルが反映されていないページが登場します。</p>
<p><a href="/officer/%e6%9c%ac%e3%82%b9%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%89%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92amp%e5%af%be%e5%bf%9c%e3%81%95%e3%81%9b%e3%81%be.html/attachment/developer_tools_-_http___sterfield_co_jp" rel="attachment wp-att-9760"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9760" src="/uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-300x47.png" alt="Developer_Tools_-_http___sterfield_co_jp" width="300" height="47" srcset="/uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-300x47.png 300w, /uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-768x121.png 768w, /uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-1024x161.png 1024w, /uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp-228x36.png 228w, /uploads-archive/2016/03/Developer_Tools_-_http___sterfield_co_jp.png 1528w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>要素の検証からもAMPに対応出来ていることが分かります。</p>
<h3>Facebook Instant Articles &amp; Google AMP Pages by PageFrog</h3>
<p>ここからスタイルをあてていくのが、このプラグインになります。</p>
<p><a href="/officer/%e6%9c%ac%e3%82%b9%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%89%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92amp%e5%af%be%e5%bf%9c%e3%81%95%e3%81%9b%e3%81%be.html/attachment/styling_pagefrog" rel="attachment wp-att-9761"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9761" src="/uploads-archive/2016/03/Styling_PageFrog-300x194.png" alt="Styling_PageFrog" width="300" height="194" srcset="/uploads-archive/2016/03/Styling_PageFrog-300x194.png 300w, /uploads-archive/2016/03/Styling_PageFrog-768x495.png 768w, /uploads-archive/2016/03/Styling_PageFrog-1024x660.png 1024w, /uploads-archive/2016/03/Styling_PageFrog-228x147.png 228w, /uploads-archive/2016/03/Styling_PageFrog.png 1293w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>素の状態ではロゴととにかくページを早く表示することだけのページです。</p>
<p>設定出来る項目も最低限という感じでこれ以上は、プラグインファイルを直接編集しないといけないとのことです。</p>


スターフィールドホームページをAMP対応

<p>UIという文字を頻繁に見かけるようになり、ワイヤーフレームやモックアップを制作するツールが多く生まれてきています。</p>
<p>以前、下記記事にてツールを紹介しましたが（すごい簡単にですが）<br />
<a href="/designer/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%a2%e3%83%83%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%83%84.html" target="blank">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a><br />
(cometはまだ動きがないようですね・・・)</p>
<p>こういったツールではなく、素材として制作を提供してくれるサイト、ブログがあります。<br />
しかもフリーで！！<br />
その中でいいと思った3つをご紹介します。</p>
<h3>ChatアプリのUIテンプレート</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-1024x678.jpg" alt="Free Chat UI kit for Photoshop and Sketch  InVision" width="640"  class="alignnone size-large wp-image-9747" srcset="/uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-1024x678.jpg 1024w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-300x199.jpg 300w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-768x508.jpg 768w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-228x151.jpg 228w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision.jpg 1109w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>Chatアプリの制作に役にたちそうなkitです。そのままでもいい感じなのですが、これを元に制作していくと良さそうです。</p>
<p>photoshopかsketchか選択してダウンロードできます。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-1024x712.png" alt="スクリーンショット 2016-03-01 12.33.46" width="640" class="alignnone size-large wp-image-9748" srcset="/uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-1024x712.png 1024w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-300x209.png 300w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-768x534.png 768w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-228x159.png 228w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82.png 1088w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>デザインに使わなくて、どういったページが必要かを把握するだけでも十分良さそうです！<br />
こんなのがフリーだなんてどうかしてますね、すごいな・・・invision。</p>
<p><a href="http://www.invisionapp.com/chat" target="_blank" class="link">Free Chat UI kit for Photoshop and Sketch | InVision</a></p>
<h3>ワイヤーフレーム、フローチャートを作れるKIT</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-1024x687.jpg" alt="UI Tiles- Website Flowcharts" width="640" class="alignnone size-large wp-image-9749" srcset="/uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-1024x687.jpg 1024w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-300x201.jpg 300w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-768x515.jpg 768w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-228x153.jpg 228w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts.jpg 1094w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>これはデザイナーはもちろん、ディレクターにも良いと思います！<br />
こちらも凄まじい種類のページテンプレートが用意してあり、PNG,AI,PSD,SKETCH形式のものがダウンロードできます。</p>
<p><img decoding="async" src="/uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155.png" alt="スクリーンショット 2016-03-01 12.49.02" width="400"  class="alignnone size-full wp-image-9751" srcset="/uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155.png 639w, /uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155-260x300.png 260w, /uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155-228x263.png 228w" sizes="(max-width: 639px) 100vw, 639px" /></p>
<p><a href="https://pixelbuddha.net/ui-tiles/" target="_blank" class="link">UI Tiles: Website Flowcharts</a></p>
<h3>高品質なECサイトのUIテンプレート</h3>
<p><img decoding="async" src="/uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-1024x687.jpg" alt="Portland UI Kit Free Sample  Craftwork – Thoroughly Handpicked UI Freebies" width="640" class="alignnone size-large wp-image-9750" srcset="/uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-1024x687.jpg 1024w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-300x201.jpg 300w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-768x515.jpg 768w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-228x153.jpg 228w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f.jpg 1094w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>こちらは無料ではTOPページのみになりますが参考になります。</p>
<p><a href="http://getcraftwork.com/portland-ui-kit/" target="_blank" class="link">Portland UI Kit Free Sample | Craftwork – Thoroughly Handpicked UI Freebies</a></p>
<p>というかここのサイトがすごい。。。</p>
<p><a href="http://getcraftwork.com/ui-kits/" target="_blank" class="link">UI Kits | Craftwork – Thoroughly Handpicked UI Freebies</a></p>
<p>こういうの活かしながらより良いサイト制作に勤しみたいと思います。</p>


UIデザイン制作にすごい役立ちそうなフリー素材３つ

<p>LINE＠を始めてみました！<br />
先日砂川さんがブログで紹介しているのを見て良さそうだと思ったので、試しに自分でもやってみることにしました。</p>
<p><a href="/blog/ec/%E4%BE%BF%E5%88%A9%E3%81%8B%E3%81%AA%EF%BC%9Fline%EF%BC%A0%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E6%A9%9F%E8%83%BD%E3%82%92%E3%81%94%E7%B4%B9%E4%BB%8B.html" target="_blank">便利かな？LINE＠で使える機能をご紹介</a></p>
<p>機能については、↑ 砂川さんのブログがとても詳しいので参考にしてください。</p>
<p>私は実際に登録してみての感想をお伝えします。</p>
<h2>結論からいうと、これはアリ！</h2>
<p>いまコンペナビでツイッターを使っているのですが、けっこう厳しいなぁと思うんです。<br />
ツイッターというものが浸透しきっていて、企業も個人もすでにあの手この手で面白いことをしている場に、新たに参入して注目をあつめるのは至難の業です。<br />
よっっぽど知名度があったり、いい投稿ができればいいんでしょうが、ぶっちゃけ厳しいです。</p>
<p>しかもツイッター自体が醸し出す停滞感もあります。<br />
これは個人的な感覚ですが、黎明期のような自由さがなく、業者感やBOT感や、担当者が仕方なくやってる感がタイムラインから漂ってきます。（コンペナビもその現状に一役買っているような気がしないでもないような…）</p>
<p>考えてみれば、ツイッターだけでなく、メールやフェイスブックもそんな感じじゃないでしょうか。<br />
連絡手段としては全然使えますし、アリですけど、商売として使おうとしたときには今ひとつワクワク感がありません。</p>
<p>メールがオワコンと言われ、フェイスブックは高年齢化し、ツイッターはオタク化・たこつぼ型している現状を考えれば、LINE＠がその次のマーケティングツールにとして、もっとのし上がってくると思います。<br />
まだまだ黎明期で、可能性に気づいているのが（美容業界とか以外で）あんまりまだいないんじゃないでしょうか。</p>
<p>サービスが定着するというのは、同時に”ダサいツール”であることを指し、マーケティング的な効果を出すのは難しくなります。多くの人がやっているから。</p>
<p>LINE＠に登録してみてまだちょっとしか触っていませんが、なんというかこう初めてメールを送った時や、留学生に教えられてまだ英語版しかなかった時代のフェイスブックにはじめてログインしたときや、まだ知る人ぞ知る存在だった時代のツイッターに触った時と同じようなワクワク感がありました。</p>
<p>いずれLINEも陳腐化することは明白です。ですが、それまでの短い期間に活用する価値は十分あると思います。</p>
<p>というわけで、記事タイトルにある「オススメする理由」は、まだあんまり人がやってないから！です。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/IMG_9520-169x300.png" alt="IMG_9520" width="169" height="300" class="aligncenter size-medium wp-image-9725" srcset="/uploads-archive/2016/02/IMG_9520-169x300.png 169w, /uploads-archive/2016/02/IMG_9520-576x1024.png 576w, /uploads-archive/2016/02/IMG_9520-228x406.png 228w, /uploads-archive/2016/02/IMG_9520.png 750w" sizes="(max-width: 169px) 100vw, 169px" /></p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/IMG_9519-169x300.png" alt="IMG_9519" width="169" height="300" class="aligncenter size-medium wp-image-9726" srcset="/uploads-archive/2016/02/IMG_9519-169x300.png 169w, /uploads-archive/2016/02/IMG_9519-576x1024.png 576w, /uploads-archive/2016/02/IMG_9519-228x406.png 228w, /uploads-archive/2016/02/IMG_9519.png 750w" sizes="(max-width: 169px) 100vw, 169px" /></p>
<p>ちなみに初投稿として、去年海に行った時の写真をアップしたら、規定に引っかかって送れませんでした。<br />
ま、これは写真というよりテキストがダメだったんでしょうね。</p>


LINE＠で個人アカウントをつくった！おすすめする一つの理由

<p>CINEMA4DにはCモーションという、簡単にキャラクターに動きをつけるためのツールが存在します。</p>
<p>今回はその方法をご説明します。</p>
<p>まずはキャラクタの作り方です。今回は事前にオブジェクトができるところから説明させて頂きます。</p>
<p>キャラクタから「キャラクタ」を選択します。</p>
<p><a href="/uploads-archive/2016/02/1-2.jpg" rel="attachment wp-att-9713"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9713" src="/uploads-archive/2016/02/1-2.jpg" alt="1" width="640" height="465" srcset="/uploads-archive/2016/02/1-2.jpg 640w, /uploads-archive/2016/02/1-2-300x218.jpg 300w, /uploads-archive/2016/02/1-2-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>人間や動物など数種類ある中から、該当する物を選択して、ルートから骨組みを構築していきます。</p>
<p>ここまでは「ビルド」で行う作業になります。</p>
<p><a href="/uploads-archive/2016/02/2-3.jpg" rel="attachment wp-att-9714"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9714" src="/uploads-archive/2016/02/2-3.jpg" alt="2" width="640" height="465" srcset="/uploads-archive/2016/02/2-3.jpg 640w, /uploads-archive/2016/02/2-3-300x218.jpg 300w, /uploads-archive/2016/02/2-3-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>次に「調整」でポイント（関節にあたるもの）の位置を決定します。</p>
<p>３Dでは色んな方向から確認しておかないとずれてしまっている事があるので要注意です。</p>
<p><a href="/uploads-archive/2016/02/3-2.jpg" rel="attachment wp-att-9715"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9715" src="/uploads-archive/2016/02/3-2.jpg" alt="3" width="640" height="465" srcset="/uploads-archive/2016/02/3-2.jpg 640w, /uploads-archive/2016/02/3-2-300x218.jpg 300w, /uploads-archive/2016/02/3-2-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>調整が済んだら次に、メッシュとなるオブジェクトをバインドします。</p>
<p>これは非常に簡単で、バインドしたいオブジェクトをドラッグ＆ドロップするだけで完了です。</p>
<p>このとき、同時にスキンが生成されます。</p>
<p><a href="/uploads-archive/2016/02/4-2.jpg" rel="attachment wp-att-9716"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9716" src="/uploads-archive/2016/02/4-2.jpg" alt="4" width="640" height="465" srcset="/uploads-archive/2016/02/4-2.jpg 640w, /uploads-archive/2016/02/4-2-300x218.jpg 300w, /uploads-archive/2016/02/4-2-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>次にいよいよ動きをつけて行きます。</p>
<p>アニメートから「歩行を追加」をクリックするとCモーションが追加されます。</p>
<p>Cモーションの歩行から「直進」に変更すると足踏みから歩き出してくれます。</p>
<p><a href="/uploads-archive/2016/02/5-2.jpg" rel="attachment wp-att-9717"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9717" src="/uploads-archive/2016/02/5-2.jpg" alt="5" width="640" height="465" srcset="/uploads-archive/2016/02/5-2.jpg 640w, /uploads-archive/2016/02/5-2-300x218.jpg 300w, /uploads-archive/2016/02/5-2-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>出来上がりはこんな感じになります。</p>
<div style="width: 1920px;" class="wp-video"><video class="wp-video-shortcode" id="video-9712-2" width="1920" height="1080" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/02/test_1.mp4?_=2" /><a href="/uploads-archive/2016/02/test_1.mp4">/uploads-archive/2016/02/test_1.mp4</a></video></div>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2016/03/16

2016/03/09

2016/03/09

2016/03/09

2016/03/09

2016/03/09

2016/03/09

2016/03/09

2016/03/09

2016/03/02

2016/03/02

2016/03/02

2016/03/02

2016/03/02

2016/03/02

2016/03/01

2016/02/24

2016/02/24