VagrantをWindows7にインストールしてCentos6.5環境構築

<p>Subversion（svn）でどうやって前のバージョンに戻す方法について調べてみました。<br />
実際に使ったわけではなく、メモになります。</p>
<h2>ツール</h2>
<h3>svnコマンド（Macのターミナル）</h3>
<p>Xcodeをインストールしたついてくるらしいです。<br />
brewやmacportsでインストールこともあり。</p>
<p></p>

		<div id="crayon-649540157f6c5387415407" 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;">
which svn
/usr/bin/svn</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-649540157f6c5387415407-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157f6c5387415407-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-649540157f6c5387415407-1"><span class="crayon-e">which </span><span class="crayon-i">svn</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157f6c5387415407-2">/<span class="crayon-i">usr</span>/<span class="crayon-i">bin</span>/<span class="crayon-i">svn</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3> TortoiseSVN（Windows）</h3>
<p>GUI（フォルダの窓になる）。<br />
WindowsのShellでコマンドラインが使えるらしい。</p>
<h3>Eclipse</h3>
<p>Subversionプラグインをインストールすること。<br />
GUI。コマンドラインは使えないらしい。</p>
<h2>やり方</h2>
<p>コマンドラインでコマンドを打つか、EclipseのGUIで操作をするかでやり方が分けられます。</p>
<p>コマンドラインでコマンドを打つ方法で、svn merge と svn updateの２つの方法を紹介しますが、<br />
個人的にはsvn updateのほうが使えたとしても、ローカルファイルの更新のみになるので、もう一回svn commitが必要かと思います。</p>
<h3>svn merge</h3>
<p>リビジョン 31 を破棄して 30 に戻す例である。</p>

		<div id="crayon-649540157f6c9792510396" 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;">
svn merge -r 31:30 http://svn.example.com/repos/calc/trunk
svn commit -m "Undoing change committed in r31."</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-649540157f6c9792510396-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157f6c9792510396-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-649540157f6c9792510396-1"><span class="crayon-e">svn </span><span class="crayon-i">merge</span><span class="crayon-h"> </span>-<span class="crayon-i">r</span><span class="crayon-h"> </span><span class="crayon-cn">31</span><span class="crayon-sy">:</span><span class="crayon-cn">30</span><span class="crayon-h"> </span><span class="crayon-i">http</span><span class="crayon-sy">:</span><span class="crayon-c">//svn.example.com/repos/calc/trunk</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157f6c9792510396-2"><span class="crayon-e">svn </span><span class="crayon-i">commit</span><span class="crayon-h"> </span>-<span class="crayon-i">m</span><span class="crayon-h"> </span><span class="crayon-s">"Undoing change committed in r31."</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>svn update</h3>
<p></p>

		<div id="crayon-649540157f6cb742467329" 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;">
svn update -r 30</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-649540157f6cb742467329-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-649540157f6cb742467329-1"><span class="crayon-e">svn </span><span class="crayon-i">update</span><span class="crayon-h"> </span>-<span class="crayon-i">r</span><span class="crayon-h"> </span><span class="crayon-cn">30</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>おわり</h2>
<p>けっこう前からSubversionを使ってきましたが、やはりSubversionの機能全部は使えこなせていなかったのようです。<br />
Subversionサーバー構築もあるから、少し奥深い感じますね。</p>

svnを前のバージョンに戻す方法

<p>私がHTMLについて勉強を始めた頃はXHTML1.0が主流として使われており、</p>
<p>XHTMLでは要素（タグ）がインライン要素とブロック要素の2種類だけに分かれていて、</p>
<p>「インライン要素の中にブロック要素を入れてはいけない」「インライン要素は意味を持つブロック要素で囲む必要がある」といったことを念頭に入れていればコーディングで大きな間違いはなかったのですが、</p>
<p>&nbsp;</p>
<p>HTML5でコンテンツモデルという新たな要素の分類基準が設けられてからは、</p>
<p>a要素でブロック要素と呼ばれていたグループの要素を囲むことが可能になったりするなど、</p>
<p>要素の囲み方のルールが複雑になりました。</p>
<p>&nbsp;</p>
<p>tableの直下にはtbody, thead, trのいずれかしか配置してはいけないなど、</p>
<p>基本的な各要素の囲み方のルールはXHTMLと替わらないのですが、</p>
<p>「a要素で囲むことができるのはどこまで？」「spanやstrongのルールは変わったの？」</p>
<p>といった、HTML5からの新たなルールがどのようなものかわからないと、</p>
<p>間違ったコーディングをしてしまうことは避けられないので、</p>
<p>今回具体的に調べてみることにしました。</p>
<p>&nbsp;</p>
<p>参考サイト</p>
<p><a class="link" href="http://ascii.jp/elem/000/000/628/628869/" target="_blank">浜 俊太朗のHTML5マークアップ移行ガイド</a></p>
<p><a class="link" href="http://www.htmq.com/html5/007.shtml" target="_blank">HTML5における要素の分類（コンテンツ・モデル）－HTML5リファレンス</a></p>
<p><a class="link" href="http://www.w3.org/TR/2010/WD-html5-20101019/content-models.html" target="_blank">3.2.5 Content models — HTML5 </a></p>
<p>&nbsp;</p>
<p>参考図書</p>
<p><a class="link" href="http://www.amazon.co.jp/dp/4048660705" target="_blank">『HTML5マークアップ 現場で使える最短攻略ガイド』 浜俊太朗(著) 2013.12</a></p>
<p>&nbsp;</p>
<h2>HTML5のコンテンツモデルとは？</h2>
<p>コンテンツモデルとは、簡単に言うと、</p>
<p>「どの分類の要素が、どの分類の要素を含むことができるのか」というルールのことです。</p>
<p>HTML5では要素が14種類に分類されています。</p>
<p>&nbsp;</p>
<p>とはいえ、それぞれの要素が1つずつ分類を持っているのではなく、複数の分類を持ちます。</p>
<p>たとえば、h1要素は「フレージングコンテンツ」という<strong>コンテンツモデル</strong>に分類されており、</p>
<p>「フローコンテンツ」、「ヘッディングコンテンツ」という<strong>カテゴリー</strong>に属します。</p>
<p>&nbsp;</p>
<p>h1要素の場合、フレージングコンテンツというコンテンツモデルであり、</p>
<p>フレージングコンテンツのカテゴリーに属する要素のみを含むことができます。</p>
<p>&nbsp;</p>
<p>つまり、「どのコンテンツモデルが、どのカテゴリーの要素を含むことができるか」というルールが、</p>
<p>コンテンツモデルの基本になります。</p>
<p>&nbsp;</p>
<p>しかしながら、HTML5のコンテンツモデルはこの限りではなく、全部で次の７つのパターンがあります。</p>
<ol>
<li>カテゴリー単位で定義: h1, span etc.</li>
<li>カテゴリー単位で定義(条件つき): header, button etc.</li>
<li>特定の内容のみ入れられる: table, ul etc.</li>
<li>特定の内容のみ入れられる(条件つき): dl etc.</li>
<li>他の要素を入れられない: img, br etc.</li>
<li>親要素の条件を引き継ぐ: del, ins etc.</li>
<li>親要素の条件を引き継ぐ(条件付き): a, iframe etc.</li>
</ol>
<p>つまり、ある程度の基本的なルールはあるが、</p>
<p>各要素の特性によって含むことができる要素がそれぞれ限られているということのようです。</p>
<p>&nbsp;</p>
<p>とはいっても、この特性は、</p>
<p>「tableの直下にはtrやtbodyのようなテーブル関係の要素しか入れられない」</p>
<p>「dlには最低1つのdtとそれに続く１つ以上のddを入れなければならない」</p>
<p>「フレージングコンテンツのコンテンツモデルであるbuttonのような操作できる要素(インタラクティブコンテンツ)には、</p>
<p>フレージングコンテンツのカテゴリであってもaやiframeのような同じく操作できる要素を含むことはできない」</p>
<p>といった、</p>
<p>それぞれの要素の意味や基本的な使い方が理解できていれば迷うことのないものばかりですので、</p>
<p>そこまで複雑に考える必要はないと言えます。</p>
<p>&nbsp;</p>
<p>それでは、コンテンツモデルの基本になるカテゴリーとコンテンツモデルについて、具体的にご紹介いたします。</p>
<h2>カテゴリーと要素</h2>
<h3>メタデータコンテンツ(Metadata content)</h3>
<p>おもにhead要素に入る、メタデータやスタイル・スクリプトといった、基本的に描画されない要素です。</p>
<p>このカテゴリの要素: base, link, meta, noscript, script, style, title</p>
<p>&nbsp;</p>
<h3>フローコンテンツ(Flow content)</h3>
<p>文書に使われるほとんどの要素です。</p>
<p>このカテゴリーの要素: <em>a, abbr, address, area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, menu, meta, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style, sub, sup, svg, table, textarea, time, ul, var, video, wbr, テキスト</em></p>
<p>&nbsp;</p>
<h3>セクショニングコンテンツ(Sectioning content)</h3>
<p>セクションの範囲を定義する要素です。</p>
<p>このカテゴリの要素: <em>article, aside, nav, section</em></p>
<p>&nbsp;</p>
<h3>ヘッディングコンテンツ(Heading content)</h3>
<p>セクションのヘッダー(見出し)を表す要素です</p>
<p>このカテゴリの要素:<em> h1, h2, h3, h4, h5, h6 (hgroupは廃止)</em></p>
<p>&nbsp;</p>
<h3>フレージングコンテンツ(Phrasing content)</h3>
<p>文書のテキストを表す要素です。この要素の多くがフレージングコンテンツのコンテンツモデルとなります。</p>
<p>以前インライン要素と呼ばれていた要素の多くがこの要素にあたります。</p>
<p>このカテゴリの要素: <em>a, abbr, area, audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, meta, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, テキスト</em></p>
<p>&nbsp;</p>
<h3>エンベッディッドコンテンツ(Embedded content)</h3>
<p>文書に他のリソース(画像や動画)を埋め込んだり、他の語彙(svgなど)を挿入したりする要素です。</p>
<p>このカテゴリの要素: <em>audio, canvas, embed, iframe, img, math, object, svg, video</em></p>
<p>&nbsp;</p>
<h3>インタラクティブコンテンツ(Iteractive content)</h3>
<p>ユーザーが操作できる要素です。</p>
<p>このカテゴリの要素: <em>a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video</em></p>
<p>&nbsp;</p>
<h3>パルパブルコンテンツ(Palpable content)</h3>
<p>具体的な意味を持つ要素のことです。</p>
<p>br要素やhr要素のような、具体的な意味を持たない要素はこのコンテンツから省かれます。</p>
<p>フローティングコンテンツやフレージングコンテンツのコンテンツモデルをもつ要素は、</p>
<p>hidden属性の指定されていないパルパブルコンテンツを含まなければならないと定義されています。</p>
<p>このカテゴリの要素: <em>a, abbr, address, article, aside, audio(controls属性を持つ場合), b, bdi, bdo, blockquote, button, canvas, cite, code, data, details, dfn, div, dl(dtとddが一組以上ある場合), em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, input(type属性の値がhiddenでない場合), ins, kbd, keygen, label, map, mark, math, menu(type属性の値がtoolbarかlistの場合), meter, nav, object, ol(子要素に一つ以上のli要素を持つ場合), output, p, pre, progress, q, ruby, s, samp, section, select, small, span, strong, sub, sup, svg, table, textarea, time, u, ul(子要素に一つ以上のli要素を持つ場合), var, video, テキスト(半角スペースのみは除く)</em></p>
<p>&nbsp;</p>
<p><a href="http://ascii.jp/elem/000/000/628/628869/" target="_blank">こちら</a>のサイトで、それぞれの要素の具体的なルールが紹介されていますので、</p>
<p>是非、参考になされてください。</p>


インライン要素・ブロック要素に替わるHTML5のコンテンツモデルとは？

<p>ワインの通販市場を調べております。</p>
<p>「ワイン　通販」というキーワードで上位表示されているサイトをsimilarwebというツールを使って予想アクセス数を調べてみました。</p>
<p>1位は楽天のワインカテゴリーのサイトになるので除外しました。</p>
<p><a href="http://www.similarweb.com/website/belluna-gourmet.com" target="_blank">http://www.similarweb.com/website/belluna-gourmet.com</a></p>
<p><a href="/uploads-archive/2014/11/screenshot6.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6292" src="/uploads-archive/2014/11/screenshot6-300x172.png" alt="screenshot" width="300" height="172" srcset="/uploads-archive/2014/11/screenshot6-300x172.png 300w, /uploads-archive/2014/11/screenshot6-1024x589.png 1024w, /uploads-archive/2014/11/screenshot6-228x131.png 228w, /uploads-archive/2014/11/screenshot6.png 1108w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="http://www.similarweb.com/website/enoteca.co.jp" target="_blank">http://www.similarweb.com/website/enoteca.co.jp</a></p>
<p><a href="/uploads-archive/2014/11/screenshot7.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6293" src="/uploads-archive/2014/11/screenshot7-300x171.png" alt="screenshot" width="300" height="171" srcset="/uploads-archive/2014/11/screenshot7-300x171.png 300w, /uploads-archive/2014/11/screenshot7-1024x586.png 1024w, /uploads-archive/2014/11/screenshot7-228x130.png 228w, /uploads-archive/2014/11/screenshot7.png 1103w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p><a href="http://www.similarweb.com/website/biccamera.com" target="_blank">http://www.similarweb.com/website/biccamera.com</a> <a href="/uploads-archive/2014/11/screenshot9.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6295" src="/uploads-archive/2014/11/screenshot9-300x171.png" alt="screenshot" width="300" height="171" srcset="/uploads-archive/2014/11/screenshot9-300x171.png 300w, /uploads-archive/2014/11/screenshot9-1024x586.png 1024w, /uploads-archive/2014/11/screenshot9-228x130.png 228w, /uploads-archive/2014/11/screenshot9.png 1110w" sizes="(max-width: 300px) 100vw, 300px" /></a> <a href="http://www.similarweb.com/website/kbwine.com" target="_blank">http://www.similarweb.com/website/kbwine.com</a><a href="/uploads-archive/2014/11/screenshot10.png"><br />
</a> <a href="/uploads-archive/2014/11/screenshot11.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6297" src="/uploads-archive/2014/11/screenshot11-300x172.png" alt="screenshot" width="300" height="172" srcset="/uploads-archive/2014/11/screenshot11-300x172.png 300w, /uploads-archive/2014/11/screenshot11-1024x587.png 1024w, /uploads-archive/2014/11/screenshot11-228x130.png 228w, /uploads-archive/2014/11/screenshot11.png 1109w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>Estimated VisitsとPage Viewsの値がおおよその目安になります。</p>
<p>ここでBiccameraの小会社のBic酒販が200万ユーザーでトップですが、これは、ワイン以外の酒類の販売も含まれているためでしょう。</p>
<p>その他のサイトは、ワインのみを取り扱っているサイトになります。</p>
<p>その中では、エノテカさんが一番アクセスされているという結果が出ており、時点でベルーナのMyWineCLUBと続きます。</p>
<p>ここで上位を見渡してみると、全て総合的に商品を扱う通販サイトであることが分かります。</p>
<p>&nbsp;</p>
<p>しかしながら、ワインはとかく、嗜好性、専門性が高く、好きな人でなければ何を飲めばいいのか分からないということが大半かと思います。</p>
<p>そこで、アメリカでは既に違った切り口のワイン通販サイトとして成功を集めているのが下の2サイトです。</p>
<p><a href="http://www.similarweb.com/website/clubw.com" target="_blank">http://www.similarweb.com/website/clubw.com</a></p>
<p><a href="/uploads-archive/2014/11/screenshot12.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6324" src="/uploads-archive/2014/11/screenshot12-300x172.png" alt="screenshot" width="300" height="172" srcset="/uploads-archive/2014/11/screenshot12-300x172.png 300w, /uploads-archive/2014/11/screenshot12-1024x590.png 1024w, /uploads-archive/2014/11/screenshot12-228x131.png 228w, /uploads-archive/2014/11/screenshot12.png 1105w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>Club Wは、キュレーション型のサイトでたくさん商品を置くのではなく、あえてキュレーターが厳選したワインのみを置いています。</p>
<p>さらに、一番売れ筋の価格帯$10〜15のみを揃えています。</p>
<p>人間あまりにも選択肢が多すぎると「選択のパラドックス」という状態に陥ってしまうそうなのです。</p>
<p>選択のパラドックスに関しての詳細は<a href="http://164s.net/2428.html" target="_blank">こちら</a></p>
<p>ある程度「適度な不自由」がある方が満足度が高いようです。</p>
<p>これ、無数に選択肢があると何を選んでいいか分からないですが、「店長イチオシ」や「◯◯で紹介されました」「◯◯推薦」などがあるとついつい、選択肢として寄せてしまいますよね。</p>
<p><a href="http://www.similarweb.com/website/nakedwines.com" target="_blank">http://www.similarweb.com/website/nakedwines.com</a></p>
<p><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6325" src="/uploads-archive/2014/11/screenshot13-300x133.png" alt="screenshot" width="300" height="133" srcset="/uploads-archive/2014/11/screenshot13-300x133.png 300w, /uploads-archive/2014/11/screenshot13-1024x457.png 1024w, /uploads-archive/2014/11/screenshot13-228x101.png 228w, /uploads-archive/2014/11/screenshot13.png 1115w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>Naked Winesは、クラウドファンディングの要素を持たせ、エンジェルとして投資をすることでサイト上のワインを格安で買えるなど様々な得点があることで成長をしており、どちらもユーザー規模だけを見ると日本の上位サイトと桁が一つ違います。</p>
<p>&nbsp;</p>
<p>最後に今回調べたワイン通販・ECサイトをまとめておきます。</p>
<p>&nbsp;</p>
<h2>国内ワインECサイト</h2>
<h3>トータル</h3>
<h4>エノテカ</h4>
<p>エノテカ株式会社</p>
<p><a href="http://www.enoteca.co.jp/" target="_blank">http://www.enoteca.co.jp/</a></p>
<h4>MyWineCLUB</h4>
<p>株式会社ベルーナ</p>
<p><a href="http://belluna-gourmet.com/wine/" target="_blank">http://belluna-gourmet.com/wine/</a></p>
<h4>ビック酒販</h4>
<p>株式会社ビック酒販</p>
<p><a href="http://www.biccamera.com/bicbic/jsp/w/liquor/index.jsp" target="_blank">http://www.biccamera.com/bicbic/jsp/w/liquor/index.jsp</a></p>
<h3>サブスクリプション型(定期購入)</h3>
<h4>家ワイン</h4>
<p>アイオイクス株式会社</p>
<p><a href="http://iewine.jp/" target="_blank">http://iewine.jp/</a></p>
<h4>ワインナレッジ</h4>
<p>株式会社オンライフ</p>
<p><a href="http://wine-k.jp/" target="_blank">http://wine-k.jp/</a></p>
<h4>Vinica</h4>
<p>株式会社カカクコム</p>
<p><a href="http://vinica.me/sales/top" target="_blank">http://vinica.me/sales/top</a></p>
<h3>セレクトショップ</h3>
<h4>halcol</h4>
<p>株式会社ADDIX</p>
<p>https://www.halcol.com/</p>
<h2>海外ワインECサイト</h2>
<h3>キュレーション</h3>
<h4>Club W</h4>
<p>https://clubw.com/</p>
<h3>クラウドファンディング</h3>
<h4>Naked Wines</h4>
<p>http://www.nakedwines.com/</p>


ワイン通販ECサイト市場

<p>競合やターゲットのECサイトがどんなシステムを使っているのかを判定する方法のまとめ。</p>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th>システム名</th>
<th>対象ページ</th>
<th>URL</th>
</tr>
<tr>
<td>EC-CUBE</td>
<td>カートページ</td>
<td>products/list.php</td>
</tr>
<tr>
<td width="77">MakeShopショップサーブ</td>
<td>商品一覧</td>
<td>shop/shopbrand.html</td>
</tr>
<tr>
<td>えびすマート</td>
<td>新規会員登録ページ</td>
<td>member_regist_new.html</td>
</tr>
<tr>
<td>Mtcommerce</td>
<td>ログインページ</td>
<td>apps/shop.cgi</td>
</tr>
<tr>
<td>EC-Orange</td>
<td colspan="2">ECCUBEベースなのでECCUBEと同じ</td>
</tr>
<tr>
<td>たまごカート</td>
<td>カート</td>
<td>shop/display_cart</td>
</tr>
<tr>
<td>Commerce21</td>
<td>会員登録</td>
<td>member/CMmMemberForm.jsp<br />
※一部異なる店舗あり</td>
</tr>
<tr>
<td>HIT-MALL</td>
<td>会員登録</td>
<td>interim/index.html</td>
</tr>
<tr>
<td>EC-Bing</td>
<td>ログインページ</td>
<td>customer/menu.aspx</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>ASPでもスクラッチでも、URLに一定のクセがあるため、URLを検索するとみつかりやすい。</p>
<p>営業リストの作成などにも便利。</p>
<p>ちなみにGoogleはURL検索なくなったぽいので、Yahoo!のものを使うと良いかも。</p>
<p>http://search.yahoo.co.jp/web/advanced</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


【ECサイト】どのシステムを使っているか判定する方法

SQLセキュリティ対策

クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン

<p><a class="link" href="http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/" target="_blank">jquery.adaptive-backgrounds.js</a></p>
<p><a href="http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/" target="_blank">jquery.adaptive-backgrounds.js</a>はimgの画像のドミナントカラーを調べて、</p>
<p>背景色にしてくれるjQueryのプラグインです。</p>
<p>写真に合わせて背景色を変えるデザインなどで使えそうです。</p>
<p>&nbsp;</p>
<p>ちなみにこちらのjQueryプラグインでは、色の取得にHTML5のCanvasを使っているため、</p>
<p>HTML5に対応したブラウザで動作します。</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/ninomiya/57/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>使い方</h2>
<p><a href="https://github.com/briangonzalez/jquery.adaptive-backgrounds.js" target="_blank">こちら</a>からファイルをダウンロードし、htmlのheadでjqueryと一緒にJSファイルを読み込みます。</p>

		<div id="crayon-649540157eea3068449914" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><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;head&gt;
・・・
&lt;script type="text/javascript" src="js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.adaptive-backgrounds.js"&gt;&lt;/script&gt;
・・・
&lt;/head&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-649540157eea3068449914-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-2">2</div><div class="crayon-num" data-line="crayon-649540157eea3068449914-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-4">4</div><div class="crayon-num" data-line="crayon-649540157eea3068449914-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea3068449914-6">6</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-649540157eea3068449914-1"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-2"><span class="crayon-i ">・・・</span></div><div class="crayon-line" id="crayon-649540157eea3068449914-3"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-1.11.1.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-4"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.adaptive-backgrounds.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-649540157eea3068449914-5"><span class="crayon-i ">・・・</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea3068449914-6"><span class="crayon-r ">&lt;/head&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>色を取得するターゲットとなるimg要素に「data-adaptive-background=&#8217;1&#8217;」を、</p>
<p>背景色を設定する親要素に「data-ab-css-background=&#8217;1&#8217;」を設定します。</p>

		<div id="crayon-649540157eea7595854631" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><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;li class="image" data-ab-css-background='1'&gt;&lt;img src="images/spring1.jpg" alt="image" data-adaptive-background='1'&gt;&lt;/li&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-649540157eea7595854631-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-649540157eea7595854631-1"><span class="crayon-r ">&lt;li </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"image"</span><span class="crayon-h"> </span><span class="crayon-e ">data-ab-css-background</span>=<span class="crayon-s ">'1'</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/spring1.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">"image"</span><span class="crayon-h"> </span><span class="crayon-e ">data-adaptive-background</span>=<span class="crayon-s ">'1'</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>以下のコードでプラグインを実行します。</p>

		<div id="crayon-649540157eea9978137669" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">JavaScript</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><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;">
$(function(){
	$.adaptiveBackground.run();
});</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-649540157eea9978137669-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eea9978137669-2">2</div><div class="crayon-num" data-line="crayon-649540157eea9978137669-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-649540157eea9978137669-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eea9978137669-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-i">adaptiveBackground</span><span class="crayon-sy">.</span><span class="crayon-e">run</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eea9978137669-3"><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>取得した色の情報などは、以下のように記述することで取得が可能です。</p>

		<div id="crayon-649540157eeaa951081602" 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;">
$(function(){
	$.adaptiveBackground.run({
		success: function($img, data) {
			console.log("color-code: " + data.color);
		}
	});
});</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-649540157eeaa951081602-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-2">2</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-4">4</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157eeaa951081602-6">6</div><div class="crayon-num" data-line="crayon-649540157eeaa951081602-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-649540157eeaa951081602-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eeaa951081602-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-i">adaptiveBackground</span><span class="crayon-sy">.</span><span class="crayon-e">run</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-3"><span class="crayon-h">		</span><span class="crayon-i">success</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><span class="crayon-i">img</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">data</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eeaa951081602-4"><span class="crayon-h">			</span><span class="crayon-i">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">"color-code: "</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-i">data</span><span class="crayon-sy">.</span><span class="crayon-i">color</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-5"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157eeaa951081602-6"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157eeaa951081602-7"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>背景色に反映される色の data.color以外に、data.palette[0]〜data.palette[19]に画像からサンプリングした色が入っていますので、</p>
<p>こちらも合わせて使うと、もっとデザインの幅が広がるかもしれません。</p>
<p>&nbsp;</p>

写真のドミナントカラーを親要素の背景色にするjQueryプラグイン「jquery.adaptive-backgrounds.js」

<p>私の職場ではラジオをつけっぱなしにしているのですが、最近「石川遼選手も使っている」という例のスピードラーニングのラジオCMがよく流れます。”聞き流すだけで大丈夫”とか、”石川遼も英語ができるようになった”と言われるとちょっと気になるので調べてみました。</p>
<p>気になるのはやはり料金と効果です。</p>
<p>実際いくらくらいするものなのかと、公式ページを開いてみると、初回で例のCD2枚とテキストなどがいくつかついて9400円（税別）、さらに毎月4300円（税別）で新しいCDが届くとの事。</p>
<p>もし一年間続けたら6万円オーバー！ちょっと高いですよね・・・。なんと最終的には50枚ほどあるそうです・・・値段高すぎです。</p>
<p>じゃあ効果についてはどうなんだ？という事で動画でアップしている人がいたので確認してみたところセンテンスや会話の内容が日本語と英語の両方で流れるといった感じです。</p>
<p>実際、聞き流すだけで大丈夫とは思いませんが電車の中など移動しながら聞いたりするのには良さそうです。確かにあまり苦にならない感じがしました。</p>
<p>とは言え高すぎます！もっと安くて同じような英語の教材はないものかとネットで調べたり、書店に行って探したりしたところ、、、何ことはない、安くていいのがありました！</p>
<p>せっかくなので紹介させて頂きます。</p>
<p>&nbsp;</p>
<h6>おそらく値段は10分の１くらい　韓国の英語教材</h6>
<p>私が見つけたのはCD付きの書籍で「英会話リアルパターン５００+」というタイトルです。</p>
<p><iframe loading="lazy" width="300" height="150" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=ebakam-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=486454039X&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>
<p>著者はイ・ヴアンスという韓国の人です。元々韓国でかなり売れた本らしく、その後日本でも翻訳されたとの事です。</p>
<p>そもそも日本語も韓国語も文法的には英語と逆で同じなのに、韓国の人は英語が結構しゃべれるという印象があります。そんな理由もあって海外ではどう勉強しているのかも気になったので手にとりました。</p>
<p>ついてくるCDは日本語の後に英語が流れます。正直、例の教材より良い気がしました。</p>
<p>内容は、実際に会話の中で良く使う言い回しのパターンを繰り返していくという物です。１つのパターンについて5種類くらいの例文が流れたあとに、少し長めの会話文が流れます。</p>
<p>価格も安いし、文章的ではなく会話表現が集められているので、英語を話す事に重きを置く人や海外ドラマを字幕なしで観たいなんて人に丁度いいと思います。</p>
<p>オススメの勉強法は、例文の日本の後にCDと一緒に話してみるという方法です。</p>
<p>&nbsp;</p>
<p>ビジネス編とドラマ編もあります。私は最近ドラマ編を聞きながら通勤をしています。</p>
<p>一人でブツブツ言いながら歩いていると若干怪しく見えますが、かなりいい勉強になります。</p>
<p><iframe loading="lazy" width="300" height="150" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=ebakam-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4864540438&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>
<p><iframe loading="lazy" width="300" height="150" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=ebakam-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4864540403&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>


例の英語学習教材より安いのが書店に売っていた！

<p>インテリアショップ「Francfranc」がクリスマス向けのキャンペーンサイト『1<a href="https://100gifts.francfranc.com/" target="_blank">00 GIFTS Christmas Story</a>』を11月10日にオープンしたという情報が入ってきました。</p>
<p>こちらのサイトが新しいコマースの形「Vコマース」を取っており、おそらく本格的な展開としては、国内初ではないでしょうか？</p>
<h2>Vコマースとは</h2>
<p>VコマースはVideo Commerceの略です。</p>
<p>静止したWebサイトで行うのがEコマースでVコマースは動画上に掲載されている商品を直接購入出来るという仕組みになっております。</p>
<p>カートに入れてからの流れはEコマースと変りませんが、商品が動画で流れているので何ともウキウキしながら、衝動買いをしてしまいそうですね。</p>
<p><a href="/uploads-archive/2014/11/screenshot3.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6240" src="/uploads-archive/2014/11/screenshot3-300x136.png" alt="screenshot" width="300" height="136" srcset="/uploads-archive/2014/11/screenshot3-300x136.png 300w, /uploads-archive/2014/11/screenshot3-228x103.png 228w, /uploads-archive/2014/11/screenshot3.png 913w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>『100 GIFTS Christmas Story』はさらに特殊でサイトはFullFlashで構築されているのですが、動画内で100個の商品が散りばめられており、動画内を直接クリックしてカートに入れることが出来ます。</p>
<p><a href="/uploads-archive/2014/11/screenshot4.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6241" src="/uploads-archive/2014/11/screenshot4-300x214.png" alt="screenshot" width="300" height="214" srcset="/uploads-archive/2014/11/screenshot4-300x214.png 300w, /uploads-archive/2014/11/screenshot4-228x163.png 228w, /uploads-archive/2014/11/screenshot4.png 782w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>横スクロールで動画が流れているのですが、ちょうど右上の額の絵が商品になっています。</p>
<h2>Vコマースのいろいろ</h2>
<p>米国では既にZapposなどを初め、Vコマースが浸透しているようですが、国内の事例はまだまだ少ないですがその中で一部ご紹介です。</p>
<p>・「VAULT」（楽天）</p>
<p><a href="http://vault.rakuten.co.jp/" target="_blank">http://vault.rakuten.co.jp/</a></p>
<p>・「ポイント」（ポイント）</p>
<p><a href="http://www.point.jp/" target="_blank">http://www.point.jp/</a></p>
<p>&nbsp;</p>
<p>動画である以上、企業側の制作コストとユーザー側の通信コストが共に高くなることを解消することが出来れば日本でも普及も考えられる。</p>
<p>特に、スマートフォンで動画を見るユーザーにとっては、キャリア通信料の上限を設けている場合が多く、そういった外部要因を排除していく必要がある。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


国内の本格「Vコマース」サイト

ajaxの書き方

JSON形式のデータを返すAPI

横幅だけじゃない！Media Queryでの指定の方法

<p>やっぱりAPPLEはすごかった。<br />
何がすごいかとサポートの手厚さです。</p>
<p>高収益企業が利益を顧客満足度の向上のために投資する。はたまた、顧客満足度を追求したから高収益を生んだのか。2つはバランスするのだろう。</p>
<p>今回は、愛用中のiphone5のホームボタンがくるくる回ってしまう症状に見舞われました。</p>
<p>ウェブで調べてみると稀なケースなようで、中の爪が折れているので、下手をするとホームボタンが取れてしまうようです。</p>
<p>回転をするというのは通常◯の中に□が描かれている（iphone5s以降ではない）のですが、その四角が回転してしまって◇のようになってしまいます。</p>
<p>まだ、AppkeCareの期間はあるし、これは修理かな〜なんて思っていたのですが、AppleStoreに行って有料なんて言われても嫌なので、まず、症状を問い合わせてみようとサポートを辿っていたところ、チャットで問い合わせが出来ることが分かりました。</p>
<h2>appleオンラインサポートページへ</h2>
<p><a href="http://www.apple.com/jp/support/contact/" target="_blank">http://www.apple.com/jp/support/contact/</a></p>
<p><a href="/uploads-archive/2014/11/screenshot.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6206" src="/uploads-archive/2014/11/screenshot-300x205.png" alt="screenshot" width="300" height="205" srcset="/uploads-archive/2014/11/screenshot-300x205.png 300w, /uploads-archive/2014/11/screenshot-1024x703.png 1024w, /uploads-archive/2014/11/screenshot-228x156.png 228w, /uploads-archive/2014/11/screenshot.png 1034w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>都内ですとAppleStoreに行けてしまうので、予約して訪問するか迷うのですが、日本に数店舗しかないのでこの対応が充実していくのだなと思いました。</p>
<p><a href="/uploads-archive/2014/11/screenshot1.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6207" src="/uploads-archive/2014/11/screenshot1-151x300.png" alt="screenshot" width="151" height="300" srcset="/uploads-archive/2014/11/screenshot1-151x300.png 151w, /uploads-archive/2014/11/screenshot1-228x451.png 228w, /uploads-archive/2014/11/screenshot1.png 459w" sizes="(max-width: 151px) 100vw, 151px" /></a></p>
<p>指示通りに進めていくとこのような画面が立ち上がりました。</p>
<p>まずは、定型文から向こうもスタッフがスタンバイをするようで程なくしてチャットがスタートしました。インターフェースはimassageそのものですね。</p>
<p><a href="/uploads-archive/2014/11/screenshot2.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6208" src="/uploads-archive/2014/11/screenshot2-151x300.png" alt="screenshot" width="151" height="300" srcset="/uploads-archive/2014/11/screenshot2-151x300.png 151w, /uploads-archive/2014/11/screenshot2-228x451.png 228w, /uploads-archive/2014/11/screenshot2.png 459w" sizes="(max-width: 151px) 100vw, 151px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>メールですと、症状が上手く伝わらない場合、何度も往復するはめになるのですが、チャットであれば即レスを頂けます。</p>
<p>何度かのやりとりで状況の説明が終わり、</p>
<blockquote>
<p class="p1"><span class="s1">通常使用で、このような症状がでた場合には、おそらく無償で対応をさせていただけるかと思います。ただ、あくまでも工場判断になるため、落下痕などがあった場合には、4400円で対応をさせていただきます。</span></p>
</blockquote>
<p class="p1">と欲しかった返答を頂けたことで安心してチャットを終らせることが出来ました。</p>
<p class="p1">対応も非常に丁寧で終始、ちゃんとサポートするから安心をして欲しいという言葉が投げかけられ好感が持てました。</p>
<p class="p1">最後に、エビデンスとして残したいな〜とスクリーンショットを取っていたのですが、しっかりチャット全履歴がメールにて送られてくる辺りがさすがだな〜と思いました。</p>


apple製品サポートに困ったらチャットが使える！

small_nino-eye (5).jpg

thumbnail_nino-eye (5).jpg

nino-eye (5).jpg

「Matter.js」を使ってCanvasの物理演算をやってみました

<p>大手銀行と流通関係の業界団体が、銀行振込した際にリアルタイムで振込先に通知を送るシステムの共同実験をしているとのこと。</p>
<p>現在企業間の支払は請求書発行 → 振込 → 通帳確認 → 着金/未着 という流れが主流。</p>
<p>着金の確認や未着を探したり管理したりするのは面倒。</p>
<p>日々複数の商品とお金のやりとりが発生する流通業界では、どの入金がどの商品のものなのかを照合するのに一苦労だとのこと。</p>
<p>銀行名は非公開だが、大手銀行と流通関係の業界団体が今月実験を開始するという。</p>
<p>実験はEDI(電子データ交換)という通信回線を使い、従来数字とカナ20桁しかやりとりができなかった通信を</p>
<p>商品名や個数など含め140桁までやりとりできるようにするという。</p>
<p>買い手が振り込んだ情報がどの請求書に対するものかが自動で判断できるようになるとのこと。</p>
<p>要は振込に対してコールバックを受け取れるようになる。</p>
<p>考えてみれば、これだけECが一般化されている中で企業間取引で請求書と通帳を照合しているというのはおかしな話だ。</p>
<p>一部クレジットカードを使って取引できるサービスもあるが、手数料や決算時の集計の手間などで一般化はしていない。</p>
<p>銀行直結であれば話は別で、一気に広がりそうだ。</p>
<p>今までの常識が変わる注目したい流れ</p>


銀行振込にコールバック関数実装中

<p>I would like to make a special mention about<a href="http://www.awwwards.com/44-useful-infographics-for-web-designers.html"> Awwards’ Infographics post for Web designers</a>. The post collects a total of 44 Infographics complete with a vast quantity of information that I am sure both newbie and experienced designers are going to find out something new to learn.</p>
<p>The topics go from Web Design history, anatomy of effective Web Design, SEO, Colour Theory and Psychology, Typography, UE, Design trends, RWD, etc.</p>
<p>One of the Infographics I found more interesting and not as usually commented as others, like Color theory or RWD, is the Infographic about <a href="http://trends.e-strategyblog.com/2014/08/09/eye-tracking-technology-web-design-infographic/20668">eye tracking technology in Web Design</a>, in other words, about how your eyes move on a website.</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.41.48.png"><img decoding="async" loading="lazy" class="alignnone wp-image-6184 " src="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.41.48-1024x400.png" alt="Screen Shot 2014-11-04 at 17.41.48" width="651" height="225" /></a></p>
<p>Some interesting tips As it shows the Infographic:</p>
<ul>
<li>Users maintain and “F/E” shaped viewing pattern</li>
</ul>
<p><a href="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.42.06.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-6185" src="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.42.06-253x300.png" alt="Screen Shot 2014-11-04 at 17.42.06" width="299" height="366" /></a></p>
<ul>
<li>69% of the users’ time is spent looking at the left half of a Webpage.</li>
<li>Logos and brands on top left side are remembered 58,4% more than other placement areas.</li>
<li>Users spend 80% of their time looking at information above the “fold” or the portion of the web page that doesn’t require any scrolling.</li>
</ul>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2014/11/19

2014/11/19

2014/11/19

2014/11/18

2014/11/12

2014/11/12

2014/11/12

2014/11/12

2014/11/12

2014/11/11

2014/11/11

2014/11/06

2014/11/06

2014/11/05

2014/11/05

2014/11/05

2014/11/05

2014/11/04