<p>There is a bit differences between Symfony 2.0.x and latest Symfony versions.</p>
<p>For symfony 2.o.x, firstly download the zip file from http://symfony.com/download(Legacy Release/Pick a specific version)</p>
<p>File and folder structure in symfony 2.0.x ,</p>
<p>Symfony</p>
<p style="padding-left: 30px;">&#8211; app</p>
<p style="padding-left: 30px;">&#8211; bin</p>
<p style="padding-left: 30px;">&#8211; deps</p>
<p style="padding-left: 30px;">&#8211; deps.lock</p>
<p style="padding-left: 30px;">&#8211; src</p>
<p style="padding-left: 30px;">&#8211; web</p>
<p>There is no &#8220;vendor&#8221; folder after archiving symfony 2.o.x.</p>
<p>To create &#8220;vendor&#8221; folder including all required third-party bundles: assetic, bundles, doctrine, monolog, symfony, twig etc</p>
<p>Please open Terminal(command line):</p>
<p><strong>$ cd /var/www/html/Symfony/</strong></p>
<p>* please be sure to add <strong>https</strong> to all links in &#8220;<strong>deps</strong>&#8221; file.</p>
<p>example:</p>
<p>[original data in deps]</p>
<p style="padding-left: 30px;">[symfony]</p>
<p style="padding-left: 30px;">    git=http://github.com/symfony/symfony.git</p>
<p style="padding-left: 30px;">    version=v2.0.1</p>
<p>[edited]</p>
<p style="padding-left: 30px;">[symfony]</p>
<p style="padding-left: 30px;">    git=http<span style="text-decoration: underline;"><strong>s</strong></span>://github.com/symfony/symfony.git</p>
<p style="padding-left: 30px;">    version=v2.0.1</p>
<p>Then if it&#8217;s firstly installation symfony, type:</p>
<p><strong>$ php bin/vendors install</strong></p>
<p>bin/vendors will firstly look &#8220;deps&#8221; files and will automatically create &#8220;vendor&#8221; folder under /var/www/html/Symfony/</p>
<p>Or if you want to add new bundle or update existing ones:</p>
<p><strong>$ php bin/vendors update</strong></p>
<p>If you want to know, which symfony version did you install?</p>
<p><strong>$ php app/console &#8211;version</strong></p>
<p>If you want to know, how to use &#8220;php app/console&#8221; command,</p>
<p><strong>$ php app/console &#8211;help</strong></p>
<p style="text-align: center;">##############################</p>
<p>In Symfony latest version (2.3 or 2.4):</p>
<p>We can install symfony via terminal easily.</p>
<p>Please install composer:(on Linux disto)</p>
<p><strong>$ curl -sS https://getcomposer.org/installer | php </strong>(assumed that you&#8217;ve already installed &#8220;curl&#8221; command)</p>
<p><strong>$ mv composer.phar /usr/local/bin/composer</strong></p>
<p>If so, you&#8217;ve already installed &#8220;composer&#8221; in your computer and can use &#8220;composer&#8221; command in Terminal.</p>
<p><strong>$ cd /var/www/html/</strong></p>

		<div id="crayon-64953fd594a80493195022" 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;">
$ composer create-project symfony/framework-standard-edition path/ 2.3.7</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-64953fd594a80493195022-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-64953fd594a80493195022-1"><span class="crayon-sy">$</span><span class="crayon-h"> </span><span class="crayon-e">composer </span><span class="crayon-i">create</span>-<span class="crayon-e">project </span><span class="crayon-i">symfony</span>/<span class="crayon-i">framework</span>-<span class="crayon-i">standard</span>-<span class="crayon-e">edition </span><span class="crayon-i">path</span>/<span class="crayon-h"> </span><span class="crayon-cn">2.3.7</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>Then composer will install symfony 2.3.7 (as above command) to /var/www/html/Symfony</p>
<p>Folder and file structure in symfony 2.3.7:</p>
<p style="padding-left: 30px;">&#8211; app</p>
<p style="padding-left: 30px;">&#8211; bin</p>
<p style="padding-left: 30px;">&#8211; composer.json</p>
<p style="padding-left: 30px;">&#8211; composer.lock</p>
<p style="padding-left: 30px;">&#8211; src</p>
<p style="padding-left: 30px;">&#8211; vendor</p>
<p style="padding-left: 30px;">&#8211; web</p>
<p><strong>$ cd Symfony</strong></p>
<p><strong>$ composer install</strong></p>
<p>composer command will firstly look &#8220;composer.json&#8221; and automatically install required bundles.</p>
<p>If you want to add new bundle or update existing one,</p>
<p><strong>$ composer update</strong></p>
<p>If you want to know, which symfony version did you install?</p>
<p><strong>$ php app/console &#8211;version</strong></p>
<p>The End!</p>

Differences between Symfony 2.0.x and latest Symfony versions installation

git再入門

<p>My first experience in installation symfony 2 on Mac made me crazy. I had experienced installing it on Ubuntu Linux and it worked fine. I used to setup web development on Ubuntu Linux and mobile development on Mac.</p>
<p>In Mac, for web development, I used MAMP (<strong>Macintosh, Apache, Mysql and PHP</strong>) instead of using built-in PHP and Apache Web server. I know that its time saving but it can&#8217;t make a complete and perfect development environment. But setting up built-in web server and using PHP take time to completely setup. So I was lazy to set it up.</p>
<p>In previous days, I need to install symfony 2 on my Mac. I thought installing a PHP framework is piece of cake for me. Because I&#8217;ve many experience since earlier. But, when I try to install symfony, I can&#8217;t get perfect installation. Installation stages reported back many errors. I was googling again and again to solve it. Finally, I found that Symfony 2 uses</p>
<ul>
<li>Alternative PHP Cache (APC) 3.1.13</li>
</ul>
<p>But in MAMP package, it can offer &#8220;Alternative PHP Cache (APC) 3.1.9&#8221; only. I can&#8217;t upgrade MAMP version anymore. If I will continue want to use current MAMP version, I can only downgrade symfony version, it may be version 1 of Symfony.</p>
<p>So, finally, I completely gave up using MAMP package and start setting up all required tools for web development in my local laptop. It took about half day to fully setting up it manually, but its the most suitable development for a developer.</p>
<p>Yes, of course, we developer guys like to setup our own web development environment by ourselves instead of using the ready-made already setting up working environment.</p>
<p>Ok, this is just my first experience when I try to install symfony 2 with MAMP.</p>
<p>Thank for reading at the end.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Symfony 2 installation problem with MAMP

【CentOS6】phpmyadminをインストールしてみた

<p>hoverの場合、画像の明るさを調整したいので、いつものようにcssを書きました。<br />
　　　</p>

		<div id="crayon-64953fd593fa8909326414" 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;">
opacity:0.6;</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-64953fd593fa8909326414-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-64953fd593fa8909326414-1"><span class="crayon-i">opacity</span><span class="crayon-sy">:</span><span class="crayon-cn">0.6</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>今回はIE8、FF、Safariを対応しないといけないので、</p>
<p>それぞれのブラウザを対応するcssを追加して、確認したところIE8ではうまくいかなかった。</p>
<p></p>

		<div id="crayon-64953fd593fac682675553" 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;">
filter: alpha(opacity=60);        /* ie lt 8 */
-ms-filter: "alpha(opacity=60)";  /* ie 8 */
-moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
-khtml-opacity: 0.6;              /* Safari 1.x */</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-64953fd593fac682675553-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593fac682675553-2">2</div><div class="crayon-num" data-line="crayon-64953fd593fac682675553-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593fac682675553-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd593fac682675553-1"><span class="crayon-i">filter</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">alpha</span><span class="crayon-sy">(</span><span class="crayon-i">opacity</span>=<span class="crayon-cn">60</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">/* ie lt 8 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593fac682675553-2">-<span class="crayon-i">ms</span>-<span class="crayon-i">filter</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"alpha(opacity=60)"</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">/* ie 8 */</span></div><div class="crayon-line" id="crayon-64953fd593fac682675553-3">-<span class="crayon-i">moz</span>-<span class="crayon-i">opacity</span><span class="crayon-sy">:</span><span class="crayon-cn">0.6</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-c">/* FF lt 1.5, Netscape */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593fac682675553-4">-<span class="crayon-i">khtml</span>-<span class="crayon-i">opacity</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0.6</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">/* Safari 1.x */</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>対策方法を検索した結果を</p>

		<div id="crayon-64953fd593fad858977391" 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;">
zoom:1;</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-64953fd593fad858977391-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-64953fd593fad858977391-1"><span class="crayon-i">zoom</span><span class="crayon-sy">:</span><span class="crayon-cn">1</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>を追加したら、早速うまくいったので、<br />
安心して、本番にアップしたら、本番環境ではうまくいっていない！</p>
<p>cssのパスが違っているか何度も確認しても、テスト環境との違いが見つからない！</p>
<p>それで、cssを変えようとして、また検索したところ、<br />
場合によって、「a」タグの幅と「display: block;」を指定しないといけないみたいです。</p>
<p>試してみたら本番環境もうまくいくようになりました。</p>
<p>cssも同じブラウザでも環境によって、動作がちがうって初めての体験でした。</p>

IE8対応 画像 opacity

<p>北欧のデザイン好きです。</p>
<p>かわいいものが好きと言うわけではないんですが、<br />
あの感じはとても心動かされます。</p>
<p>シンプルで機能的なデザインのタイプのものも好きなので、<br />
北欧デザインにドはまりです。いつか行ってみたいですね〜</p>
<p>そんな北欧の企業で、特に雑貨店が近年で日本に進出しているらしいです。</p>
<p>ちょっと前にはテレビにもでていたデンマークの「タイガー」が話題になっていました。<br />
まだ出始めの頃、大阪の店舗に行ってみたのですが、<br />
めちゃめちゃ混んでおり、さらに整理券が必要だとのことで、外から見るだけでした。<br />
この間、表参道にも出店されましたが、おそらく同じように混んでいることでしょう。。。</p>
<p>ちなみにタイガーは、「北欧の100円ショップ」と呼ばれていたりしますが、<br />
正確には「100円ショップ」ではなく「激安ショップ」といったところで、<br />
価格は数段階に分かれており、100円程度の商品もあれば、800円程度の商品もあります。</p>
<p><a class="link" href="http://www.flyingtiger.jp/" target="_blank">フライング タイガー コペンハーゲン : Flying Tiger Copenhagen</a></p>
<p>&nbsp;</p>
<h2>最近日本にやってきた北欧ブランド雑貨店</h3>
<p>そして、直近で日本に来たお店を紹介させていただきます。</p>
<p>&nbsp;</p>
<h3>ラガハウス</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3664" alt="LAGERHAUS JAPAN-ラガハウス  インテリア・雑貨の通販サイト" src="/uploads-archive/2013/11/1b6b9a6102969449edc243574da8c8db-1024x574.jpg" width="632" height="354" srcset="/uploads-archive/2013/11/1b6b9a6102969449edc243574da8c8db-1024x574.jpg 1024w, /uploads-archive/2013/11/1b6b9a6102969449edc243574da8c8db-300x168.jpg 300w, /uploads-archive/2013/11/1b6b9a6102969449edc243574da8c8db-228x127.jpg 228w, /uploads-archive/2013/11/1b6b9a6102969449edc243574da8c8db.jpg 1183w" sizes="(max-width: 632px) 100vw, 632px" /></p>
<p>ユニーが運営する大型総合スーパー「アピタ」内で出店されるそうで、<br />
まだ2,3店舗にしかなく、今後増えていくようです。<br />
価格は315円、525円、735円、1050円、1575円、2100円の6種類</p>
<p>&nbsp;</p>
<p><a class="link" href="http://lagerhaus-japan.jp/" target="_blank">LAGERHAUS JAPAN/ラガハウス | インテリア・雑貨の通販サイト</a></p>
<p>&nbsp;</p>
<h3>ソストレーネ・グレーネ</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3668" alt="Forside" src="/uploads-archive/2013/11/Forside-1024x582.jpg" width="630" height="358" srcset="/uploads-archive/2013/11/Forside-1024x582.jpg 1024w, /uploads-archive/2013/11/Forside-300x170.jpg 300w, /uploads-archive/2013/11/Forside-228x129.jpg 228w, /uploads-archive/2013/11/Forside.jpg 1168w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>12月20日に開業する「イオンモール幕張新都心」に日本1号店を出店されるそうで、<br />
今後の出店はまだ予定がないもののショッピングセンターを中心に出店いくとのことです。</p>
<p>価格は200～300円が中心</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.grenes.dk/" target="_blank">Forside</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>安いと必要なくてもついつい買っちゃうんですよね〜<br />
こういった雑貨は買わなくても見ているだけでも楽しくなれますよね！</p>
<p>&nbsp;</p>
<h2>既にある北欧ブランドのお店(家具・ファッション等)</h3>
<p>既に日本で人気かつ有名なブランドとして、<br />
IKEAやマリメッコやH&amp;Mなんかがありますよね！<br />
IKEAは大好きで、買うものなくても行きたいくらいです。</p>
<p>&nbsp;</p>
<h3>アラビア</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3663" alt="Arabia - Etusivu" src="/uploads-archive/2013/11/Arabia-Etusivu-1024x582.jpg" width="630" height="358" srcset="/uploads-archive/2013/11/Arabia-Etusivu-1024x582.jpg 1024w, /uploads-archive/2013/11/Arabia-Etusivu-300x170.jpg 300w, /uploads-archive/2013/11/Arabia-Etusivu-228x129.jpg 228w, /uploads-archive/2013/11/Arabia-Etusivu.jpg 1168w" sizes="(max-width: 630px) 100vw, 630px" /><br />
<a class="link" href="http://www.arabia.fi/web/Arabiawww.nsf/fi/etusivu" target="_blank">Arabia &#8211; Etusivu</a></p>
<p>&nbsp;</p>
<h3>イッタラ</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3667" alt="iittala - イッタラ" src="/uploads-archive/2013/11/6b192c3179fb8f854508683459273ed3-1024x582.jpg" width="630" height="358" srcset="/uploads-archive/2013/11/6b192c3179fb8f854508683459273ed3-1024x582.jpg 1024w, /uploads-archive/2013/11/6b192c3179fb8f854508683459273ed3-300x170.jpg 300w, /uploads-archive/2013/11/6b192c3179fb8f854508683459273ed3-228x129.jpg 228w, /uploads-archive/2013/11/6b192c3179fb8f854508683459273ed3.jpg 1168w" sizes="(max-width: 630px) 100vw, 630px" /><br />
<a class="link" href="http://www.scope.ne.jp/iittala/" target="_blank">iittala &#8211; イッタラ</a></p>
<p>&nbsp;</p>
<h3>イルムス</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3666" alt="イルムスオンラインショップ　北欧雑貨・インテリア　北欧ライフスタイルの通販" src="/uploads-archive/2013/11/129ecbe798d079e3ddd4dd0ae4281831-1024x649.jpg" width="630" height="399" srcset="/uploads-archive/2013/11/129ecbe798d079e3ddd4dd0ae4281831-1024x649.jpg 1024w, /uploads-archive/2013/11/129ecbe798d079e3ddd4dd0ae4281831-300x190.jpg 300w, /uploads-archive/2013/11/129ecbe798d079e3ddd4dd0ae4281831-228x144.jpg 228w, /uploads-archive/2013/11/129ecbe798d079e3ddd4dd0ae4281831.jpg 1163w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p><a class="link" href="http://www.illums-online.com/pc/" target="_blank">イルムスオンラインショップ　北欧雑貨・インテリア　北欧ライフスタイルの通販</a></p>
<p>&nbsp;</p>
<h2>その他番外編</h3>
<h3>スウェーデンハウス</h4>
<p>北欧デザインの家を建てたい方に！</p>
<p><a class="link" href="http://www.swedenhouse.co.jp/" target="_blank">スウェーデンハウス</a></p>
<p>&nbsp;</p>
<p>北欧デザインとは関係ないですが、<br />
北欧企業ということで、</p>
<h3>スウェーデンのスタートアップ企業Virtusize</h4>
<p>ファッションECサイト「MAGASEEK」で導入してある、<br />
ECサイトでバーチャル試着の機能を実装してくれるソリューションです。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3665" alt="Virtusize - Japanese" src="/uploads-archive/2013/11/Virtusize-Japanese-1024x582.jpg" width="630" height="358" srcset="/uploads-archive/2013/11/Virtusize-Japanese-1024x582.jpg 1024w, /uploads-archive/2013/11/Virtusize-Japanese-300x170.jpg 300w, /uploads-archive/2013/11/Virtusize-Japanese-228x129.jpg 228w, /uploads-archive/2013/11/Virtusize-Japanese.jpg 1168w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p><a class="link" href="http://www.virtusize.com/global/jp">Virtusize &#8211; Japanese</a></p>
<p>&nbsp;</p>
<h3>FJORD</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3662" alt="Fjord. The service design consultancy." src="/uploads-archive/2013/11/Fjord.-The-service-design-consultancy.-1024x649.jpg" width="630" height="399" srcset="/uploads-archive/2013/11/Fjord.-The-service-design-consultancy.-1024x649.jpg 1024w, /uploads-archive/2013/11/Fjord.-The-service-design-consultancy.-300x190.jpg 300w, /uploads-archive/2013/11/Fjord.-The-service-design-consultancy.-228x144.jpg 228w, /uploads-archive/2013/11/Fjord.-The-service-design-consultancy..jpg 1163w" sizes="(max-width: 630px) 100vw, 630px" /><br />
フィンランドのweb系制作会社で最近アクセンチュアに買収されたとか。</p>
<p><a class="link" href="http://www.fjordnet.com/">Fjord</a></p>
<p>北欧ブランドは素晴らしいですね！<br />
今後もいろいろな業態で進出してくる企業に期待したいと思います！</p>


素晴らしき北欧ブランド・デザインの雑貨店が日本に続々進出！！＋α

<p>１つのデータベースに、それぞれが異なる情報を持つ複数のテーブルを保持し、<br />
それぞれのテーブルに同じフィールドがあれば、それを利用してテーブル結合してデータを取得する事が出来ます。</p>
<p>今回はサンプルでcustomersテーブルとshopテーブルを利用して説明します。</p>
<p>先に以下の内容でテーブルを作りました。</p>
<h2>customersテーブル</h3>
<table>
<tr>
<th>id</th>
<th>name</th>
<th>address</th>
<th>products</th>
</tr>
<tr>
<td> 1 </td>
<td> poe </td>
<td>  shinjyuku </td>
<td> iphone5 </td>
</tr>
<tr>
<td> 2 </td>
<td> su  </td>
<td>  shinagawa </td>
<td> iphone3  </td>
</tr>
<tr>
<td> 3 </td>
<td> hnin </td>
<td> ikebukuro </td>
<td> iphone5  </td>
</tr>
<tr>
<td> 4 </td>
<td> ei </td>
<td> ikebukuro </td>
<td> iphone5  </td>
</tr>
</table>
<h2>shopテーブル</h3>
<table>
<tr>
<th>id</th>
<th>products</th>
<th>price</th>
<th>code</th>
</tr>
<tr>
<td> 1 </td>
<td> iphone </td>
<td>  30000 </td>
<td> IP01 </td>
</tr>
<tr>
<td> 2 </td>
<td> iphone4  </td>
<td>  40000 </td>
<td> IP02  </td>
</tr>
<tr>
<td> 3 </td>
<td> iphone4S </td>
<td> 42000 </td>
<td> IP03  </td>
</tr>
<tr>
<td> 4 </td>
<td> iphone5 </td>
<td> 50000 </td>
<td> IP04  </td>
</tr>
</table>
<p>customersテーブのproductsというフィールドとshopテーブルのproductsフィールドを一致して、<br />
現在販売されている商品とお客さんの情報を取得できます。</p>
<p>以下のようなmysql文で取得できます。</p>
<p></p>

		<div id="crayon-64953fd593847096081621" 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;">
SELECT * from customers,shop WHERE customers.products = shop.products;</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-64953fd593847096081621-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-64953fd593847096081621-1"><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">from </span><span class="crayon-i">customers</span><span class="crayon-sy">,</span><span class="crayon-e">shop </span><span class="crayon-e">WHERE </span><span class="crayon-i">customers</span><span class="crayon-sy">.</span><span class="crayon-i">products</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">shop</span><span class="crayon-sy">.</span><span class="crayon-i">products</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>結果の表示です。</p>
<table>
<tr>
<th>id</th>
<th>name</th>
<th>address</th>
<th>products</th>
<th>id</th>
<th>products</th>
<th>price</th>
<th>code</th>
</tr>
<tr>
<td>2 </td>
<td> su   </td>
<td> shinagawa </td>
<td> iphone4  </td>
<td>  2 </td>
<td> iphone4  </td>
<td> 40000 </td>
<td> IP02 </td>
</tr>
<tr>
<td>1 </td>
<td> poe  </td>
<td> shinjyuku </td>
<td> iphone5  </td>
<td>  4 </td>
<td> iphone5  </td>
<td> 50000 </td>
<td> IP04 </td>
</tr>
<tr>
<td>3 </td>
<td> hnin </td>
<td> ikebukuro </td>
<td> iphone5  </td>
<td>  4 </td>
<td> iphone5  </td>
<td> 50000 </td>
<td> IP04 </td>
</tr>
<tr>
<td>4 </td>
<td> ei </td>
<td> ikebukuro </td>
<td> iphone5  </td>
<td>  4 </td>
<td> iphone5  </td>
<td> 50000 </td>
<td> IP04 </td>
</tr>
</table>
<h2>NATURAL JOIN</h3>
<p>-NATURAL JOINは2つのテーブルを取り、同じ名前を持つ列を<br />
自動的に結合させます。<br />
サンプル :</p>

		<div id="crayon-64953fd59384c240439438" 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;">
SELECT * FROM customers NATURAL JOIN shop;</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-64953fd59384c240439438-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-64953fd59384c240439438-1"><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">FROM </span><span class="crayon-e">customers </span><span class="crayon-e">NATURAL </span><span class="crayon-e">JOIN </span><span class="crayon-i">shop</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>結果表示：</p>
<table>
<tr>
<th>id</th>
<th>products</th>
<th>name</th>
<th>address</th>
<th>price</th>
<th>code</th>
</tr>
<tr>
<td>2</td>
<td>iphone4</td>
<td>su</td>
<td>shinagawa</td>
<td>40000</td>
<td>IP02</td>
</tr>
<tr>
<td>4</td>
<td>iphone5</td>
<td>ei</td>
<td>ikebukuro</td>
<td>50000</td>
<td>IP04</td>
</tr>
</table>
<p>上記の場合、テーブルの両方に存在するカラムは「id」と「products」カラムだけですので「id」と「products」カラムを使って結合が行われます。</p>
<h2>JOIN…..ON</h3>
<p>2つのテーブルの結合させる列を指定したい場合には、JOIN…..ON構造を次のように使用します。<br />
サンプル：</p>
<p></p>

		<div id="crayon-64953fd59384d248140877" 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;">
SELECT * FROM customers JOIN shop ON customers.products = shop.products;</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-64953fd59384d248140877-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-64953fd59384d248140877-1"><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">FROM </span><span class="crayon-e">customers </span><span class="crayon-e">JOIN </span><span class="crayon-e">shop </span><span class="crayon-e">ON </span><span class="crayon-i">customers</span><span class="crayon-sy">.</span><span class="crayon-i">products</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">shop</span><span class="crayon-sy">.</span><span class="crayon-i">products</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>※結果は「SELECT * from customers,shop WHERE customers.products = shop.products;」と同じです。</p>
<h2>ASの使用</h3>
<p>ASキーワードを利用して、入力にかかる手数を減らしクエリを読みやすくする事も出来ます。<br />
サンンプル：</p>

		<div id="crayon-64953fd59384e693006288" 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;">
SELECT * from customers AS cust, shop AS sp WHERE cust.products = sp.products;</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-64953fd59384e693006288-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-64953fd59384e693006288-1"><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">from </span><span class="crayon-e">customers </span><span class="crayon-st">AS</span><span class="crayon-h"> </span><span class="crayon-i">cust</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">shop </span><span class="crayon-st">AS</span><span class="crayon-h"> </span><span class="crayon-e">sp </span><span class="crayon-e">WHERE </span><span class="crayon-i">cust</span><span class="crayon-sy">.</span><span class="crayon-i">products</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">sp</span><span class="crayon-sy">.</span><span class="crayon-i">products</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>※結果は「SELECT * from customers,shop WHERE customers.products = shop.products;」と同じです。</p>

テーブル結合

<p>最近コーディングをする時はすっかりSublimetextを使用するようになりました。</p>
<p>軽さ、機能、プラグインが良くて多用している日々でございます。</p>
<p>Sublimetextの魅力は、いろいろあるのですが、ここでは割愛させていただきます。<br />
代わりに記事を紹介しますので、そちらをご覧下さい。</p>
<p><a href="/programmer/%e6%96%b0%e3%81%97%e3%81%84%e5%b9%b4%e3%81%ab%e3%80%81%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf%e3%82%92sublime%e3%81%ab%e5%a4%89%e3%81%88%e3%81%9f.html">新しい年に、テキストエディタをsublimeに変えた | スターフィールド株式会社</a></p>
<p><a href="http://liginc.co.jp/designer/archives/6774">”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド！ | 株式会社LIG</a></p>
<p><a href="http://dotinstall.com/lessons/basic_sublimetext">Sublime Text 2入門 (全14回) &#8211; プログラミングならドットインストール</a></p>
<h2>オススメのプラグイン</h3>
<p>僕が今回オススメしたいのが「Hayaku」というプラグインです！<br />
こちらはその名の通り、cssを早く書けちゃうという代物でございます！</p>
<p><a href="https://github.com/hayaku/hayaku">hayaku/hayaku · GitHub</a></p>
<p>sublimetextを使っている人であれば、プラグインの「emmet」を入れて使用していると思います。<br />
emmetでもcssを簡略化して書けるじゃないか、とお思いの方もいると思いますが、<br />
emmetでは、簡略化の型が決まっているので、その型を覚えないといけないですよね・・・<br />
それってやっぱり面倒な人には面倒なことだと思います。</p>
<p>その型を覚える必要がないのが「Hayaku」なんです！</p>
<p>どういうことかと言いますと、<br />
cssを書く際に、適当に</p>
<p></p>

		<div id="crayon-64953fd593651318683169" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
/* w,wd,wid,widt いずれかの打ち方でも以下のスタイルに変換されます(Tabキーで変換です)！*/
width: 100%;
/* w960 */
width: 960px;</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-64953fd593651318683169-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593651318683169-2">2</div><div class="crayon-num" data-line="crayon-64953fd593651318683169-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593651318683169-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd593651318683169-1"><span class="crayon-c">/* w,wd,wid,widt いずれかの打ち方でも以下のスタイルに変換されます(Tabキーで変換です)！*/</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593651318683169-2"><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593651318683169-3"><span class="crayon-c">/* w960 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593651318683169-4"><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">960px</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>これすごくないですか？？笑</p>
<p>それっぽかったらある程度、思い通りに変換してくれちゃうんですよ！</p>
<p>だから型なんかを覚えることなく、頭に思い浮かべたスタイルの頭文字を適当に並べるだけでOKぐらいのレベルで、<br />
cssが書けちゃうわけです。</p>
<p>一部ですが以下のような形です。</p>
<p></p>

		<div id="crayon-64953fd593655829431568" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
	/* pl20 */
	padding-left: 20px;
	/* mb30 */
	margin-bottom: 30px;
	/* bgc */
	background-color: #FFF;
	/* pa */
	position: absolute;
	/* dn,dpn */
	display: none;
	/* fs14 */
	font-size: 14px;
	/* lh180% */
	line-height: 180%;
	/* bl1s */
	border-left: 1px solid;</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-64953fd593655829431568-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-2">2</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-4">4</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-6">6</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-8">8</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-10">10</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-12">12</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-14">14</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-16">16</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-64953fd593655829431568-1"><span class="crayon-h">	</span><span class="crayon-c">/* pl20 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-2"><span class="crayon-h">	</span><span class="crayon-e ">padding-left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">20px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-3"><span class="crayon-h">	</span><span class="crayon-c">/* mb30 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-4"><span class="crayon-h">	</span><span class="crayon-e ">margin-bottom</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">30px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-5"><span class="crayon-h">	</span><span class="crayon-c">/* bgc */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-6"><span class="crayon-h">	</span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#FFF</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-7"><span class="crayon-h">	</span><span class="crayon-c">/* pa */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-8"><span class="crayon-h">	</span><span class="crayon-e ">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">absolute</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-9"><span class="crayon-h">	</span><span class="crayon-c">/* dn,dpn */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-10"><span class="crayon-h">	</span><span class="crayon-e ">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">none</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-11"><span class="crayon-h">	</span><span class="crayon-c">/* fs14 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-12"><span class="crayon-h">	</span><span class="crayon-e ">font-size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">14px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-13"><span class="crayon-h">	</span><span class="crayon-c">/* lh180% */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-14"><span class="crayon-h">	</span><span class="crayon-e ">line-height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">180%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-15"><span class="crayon-h">	</span><span class="crayon-c">/* bl1s */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-16"><span class="crayon-h">	</span><span class="crayon-e ">border-left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>感覚で書いてる感じになりますねこれは。</p>
<p>ホントおすすめです！！</p>
<p>sublimetext、emmet共々、使いこなせば、コーディングがグッと早くなるかも！？<br />
いや、少しぐらいは早くなると思います。</p>
<h2>プラグインのインストール</h3>
<p>プラグインの入れ方は、通常のプラグインと同様、<br />
「command + shift + p」でinstall packageを開き、「hayaku」と記入すれば出てくるので、<br />
選択してインストール完了です。</p>
<p>ぜひぜひ活用してよいコーディングライフをお送りください！笑</p>

Sublimetext2 のプラグイン「Hayaku」が便利すぎてびっくりしました

<p>急な案件で、facebookとtwitterのAPI仕様の再確認になりました。</p>
<h2>facebook</h3>
<h3>sharer.php</h4>
<p>軽くソーシャルボタンで対応したいから、sharer.phpの仕様を調べてみたことろ、<br />
<a href="https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/" target="_blank">OGPの仕様追加</a>によって、サイトの「og:image」設定ではなく、個別の画像をソーシャルボタンで投稿することができなってしまいました。<br />
よって、今回も<a href="https://developers.facebook.com/docs/graph-api/" target="_blank">graph API</a>で対応することにしました。</p>
<h3>graph API</h4>
<p>こちらはあまり一年前と変わってないみたで、わりと簡単にできました。</p>
<h2>twitter</h3>
<h3>REST API</h4>
<p>1.0から1.1にアップデータしてから、ほぼ変化がないみたいです。<br />
oauth2が出て、<a href="https://dev.twitter.com/docs/auth/application-only-auth" target="_blank">application-only authentication</a>（bearer token）が新しく出てきたぐらいです。</p>
<h3>流れ</h4>
<p>忘れがちですが、<br />
request_tokenを取得してから、access_tokenを取得するのは基本です。</p>
<h3>ライブラリ</h4>
<p>以前は、<a href="https://github.com/abraham/twitteroauth" target="_blank">twitteroauth</a>を使ってきました。<br />
特に挫折なくできてましたが、<br />
今回は前方の都合で、<a href="https://github.com/themattharris/tmhOAuth" target="_blank">tmhOAuth</a>を使いました。<br />
直感使い方が違くて、twitteroauthのような便利のものではないようです。</p>


【API】facebookとtwitterのAPI再確認

MATCH Against In Boolean Mode

<p>こんなものがあるなんて今まで知りませんでした・・・</p>
<p>なぜ知らなかったのでしょう。勉強不足ですね。。。</p>
<p>&nbsp;</p>
<p>今日紹介するのは、photoshopの「CSS3Ps」というエクステンションです。</p>
<p>&nbsp;</p>
<p>シェイプレイヤーやテキストレイヤーのをcssで書き出しくれるという代物です。</p>
<p>もちろん名前の通りcss3対応です。</p>
<p>&nbsp;</p>
<p>どんな風に書きだされるのかが気になる所かと思いますが、</p>
<p>順をおって説明していきます。</p>
<p>&nbsp;</p>
<h2>まずはダウンロード</h3>
<p>&nbsp;<br />
まずは下記URLからダウンロードします。</p>
<p><a href="http://css3ps.com/" target="_blank">http://css3ps.com/</a></p>
<p>右上の「free download」をクリックです！<br />
&nbsp;</p>
<h2>ダウンロードしたファイルを開く</h3>
<p>ダウンロードしたファイルを開くと勝手にphotoshopへインストールしてくれます。</p>
<p>以下のような画面が立ち上がると思います。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-3568" alt="スクリーンショット 2013-11-12 13.47.09" src="/uploads-archive/2013/11/93dc3066d35b9c3171a9d6eedaa5d1d5.png" width="550" height="408" srcset="/uploads-archive/2013/11/93dc3066d35b9c3171a9d6eedaa5d1d5.png 825w, /uploads-archive/2013/11/93dc3066d35b9c3171a9d6eedaa5d1d5-300x222.png 300w, /uploads-archive/2013/11/93dc3066d35b9c3171a9d6eedaa5d1d5-228x169.png 228w" sizes="(max-width: 550px) 100vw, 550px" /></p>
<p>&nbsp;</p>
<h2>photoshopを開いて、エクステンションを表示</h3>
<p>&nbsp;<br />
もし今まで開いていたのであれば、<br />
１回終了してからまた開いてください。</p>
<p>そうすると、ウィンドウ &gt; エクステンションの所にcss3Psと表示されるのでクリックします。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3569" alt="スクリーンショット 2013-11-12 14.20.17（2）" src="/uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2-1024x201.png" width="607" height="119" srcset="/uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2-1024x201.png 1024w, /uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2-300x59.png 300w, /uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2-228x44.png 228w, /uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2.png 1220w" sizes="(max-width: 607px) 100vw, 607px" /></p>
<p>&nbsp;</p>
<h2>シェイプ選んでクリック</h3>
<p>シェイプレイヤーを選択状態にし、下の画面のCSS3Psの箇所をクリックします。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3570" alt="スクリーンショット 2013-11-12 14.00.57" src="/uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953-1024x641.png" width="600" height="375" srcset="/uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953-1024x641.png 1024w, /uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953-300x188.png 300w, /uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953-228x142.png 228w, /uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953.png 1241w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<p>&nbsp;</p>
<h2>cssの書きだしが完了！</h3>
<p>新規ブラウザウィンドウが立ち上がり、数秒待つと、<br />
cssが表示されます。<br />
そちらをコピーして後は自由に使用すると言った感じですね。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3571" alt="スクリーンショット 2013-11-12 14.04.49" src="/uploads-archive/2013/11/9571ea2391a4939314df01247606dc99-1024x569.png" width="601" height="334" srcset="/uploads-archive/2013/11/9571ea2391a4939314df01247606dc99-1024x569.png 1024w, /uploads-archive/2013/11/9571ea2391a4939314df01247606dc99-300x166.png 300w, /uploads-archive/2013/11/9571ea2391a4939314df01247606dc99-228x126.png 228w, /uploads-archive/2013/11/9571ea2391a4939314df01247606dc99.png 1191w" sizes="(max-width: 601px) 100vw, 601px" /></p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3572" alt="ページの画像" src="/uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac-1024x571.jpg" width="601" height="335" srcset="/uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac-1024x571.jpg 1024w, /uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac-300x167.jpg 300w, /uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac-228x127.jpg 228w, /uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac.jpg 1201w" sizes="(max-width: 601px) 100vw, 601px" /></p>
<p>&nbsp;</p>
<h2>複数も可能</h3>
<p>複数のレイヤーを選択して書き出すことも可能です。</p>
<p>以下のような形で書きだすと、<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3573" alt="スクリーンショット 2013-11-12 14.05.10" src="/uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3-1024x639.png" width="601" height="375" srcset="/uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3-1024x639.png 1024w, /uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3-300x187.png 300w, /uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3-228x142.png 228w, /uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3.png 1244w" sizes="(max-width: 601px) 100vw, 601px" /></p>
<p>&nbsp;</p>
<p>以下の様に表示されます。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3574" alt="ページの画像2" src="/uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428-706x1024.jpg" width="527" height="764" srcset="/uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428-706x1024.jpg 706w, /uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428-206x300.jpg 206w, /uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428-228x330.jpg 228w, /uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428.jpg 1186w" sizes="(max-width: 527px) 100vw, 527px" /></p>
<p>レイヤー重ねていても、それぞれのレイヤーを個々に書き出してくれます。</p>
<p>どこまでcssで書き出しくれるかもサイトに載っておりますので、</p>
<p>ぜひ使ってみて下さい！</p>
<p>&nbsp;<br />
<a href="http://css3ps.com/" target="_blank">http://css3ps.com/</a><br />
&nbsp;</p>


知らなかった！photoshopでcssを書き出してくれる無料のエクステンション「CSS3Ps」

<p>今日はMySQLの外部参照について話したいと思います。<br />
慣れないキーワードがちょっと出てきますが、安心してください。<br />
MySQLの外部参照はこれだけで覚えます。</p>
<h2>キーワード</h3>
<p>CONSTRAINT<br />
REFERENCES<br />
RESTRICT<br />
NO ACTION<br />
CASCADE<br />
SET NULL</p>
<h2>基本用法</h3>
<p></p>

		<div id="crayon-64953fd593043722562159" 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;">
CREATE TABLE 子テーブル名(子カラム名 データ型,
  CONSTRAINT キー名 FOREIGN KEY (子カラム名)
  REFERENCES 親テーブル名(親カラム名)
  ON DELETE reference_option
  ON UPDATE reference_option
) ENGINE=InnoDB;</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-64953fd593043722562159-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593043722562159-2">2</div><div class="crayon-num" data-line="crayon-64953fd593043722562159-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593043722562159-4">4</div><div class="crayon-num" data-line="crayon-64953fd593043722562159-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593043722562159-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-64953fd593043722562159-1"><span class="crayon-e">CREATE </span><span class="crayon-i">TABLE</span><span class="crayon-h"> </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-64953fd593043722562159-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">CONSTRAINT</span><span class="crayon-h"> </span>キー名<span class="crayon-h"> </span><span class="crayon-e">FOREIGN </span><span class="crayon-e">KEY</span><span class="crayon-h"> </span><span class="crayon-sy">(</span>子カラム名<span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-64953fd593043722562159-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">REFERENCES</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-64953fd593043722562159-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">ON </span><span class="crayon-e">DELETE </span><span class="crayon-e">reference_option</span></div><div class="crayon-line" id="crayon-64953fd593043722562159-5"><span class="crayon-e">&nbsp;&nbsp;</span><span class="crayon-e">ON </span><span class="crayon-e">UPDATE </span><span class="crayon-i">reference_option</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593043722562159-6"><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i">ENGINE</span>=<span class="crayon-i">InnoDB</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>reference_option</h3>
<h3>RESTRICT</h4>
<p>ON DELETE句やON UPDATE句にRESTRICTを指定した場合は、親テーブルに対して更新や削除を行うとエラーが発生します。RESTRICTはON DELETE句やON UPDATE句を明示的に指定しなかった場合に設定される値です。</p>
<h3>NO ACTION</h4>
<p>ON DELETE句やON UPDATE句にNO ACTIONを指定した場合は、親テーブルに対して更新や削除を行うとエラーが発生します。MySQLにおいてはNO ACTIONとRESTRICTは同じ挙動となります。</p>
<h3>CASCADE</h4>
<p>ON DELETE句やON UPDATE句にCASCADEを指定した場合は、親テーブルに対して更新を行うと子テーブルで同じ値を持つカラムの値も合わせて更新されます。また親テーブルに対して削除を行うと子テーブルで同じ値を持つデータが削除されます。</p>
<h3>SET NULL</h4>
<p>ON DELETE句やON UPDATE句にSET NULLを指定した場合は、親テーブルに対して更新を行うと子テーブルで同じ値を持つカラムの値がNULLに更新されます。また親テーブルに対して削除を行うと子テーブルで同じ値を持つデータのカラムの値がNULLに更新されます。</p>
<h2>参考リンク</h3>
<p><a href="http://dev.mysql.com/doc/refman/5.1/ja/innodb-foreign-key-constraints.html" target="_blank">http://dev.mysql.com/doc/refman/5.1/ja/innodb-foreign-key-constraints.html</a><br />
<a href="http://www.dbonline.jp/mysql/table/index12.html" target="_blank">http://www.dbonline.jp/mysql/table/index12.html</a></p>

【MySQL】外部参照について

<p>文章はほとんどのHPにあると思いますが、</p>
<p>その文章でちょっと悩ませるのが折り返しについてです。</p>
<p>&nbsp;</p>
<p>紙とは違い完全に思い通りにはならないものなのですが、</p>
<p>cssでいろいろな設定をすることができます。</p>
<p>&nbsp;</p>
<p>その主要なものが以下になります。</p>
<h3>word-wrap</h4>
<p><strong>normal</strong><br />
単語の途中で改行はせず、必要に応じて表示範囲を拡大。<br />
<strong>break-word</strong><br />
必要に応じて単語の途中で改行</p>
<h3>word-break</h4>
<p><strong>normal</strong><br />
英語等は単語の途中では改行せず、単語で改行。日本語等は表示範囲に合わせて改行され、単語の途中で改行されることもある。<br />
<strong>break-all</strong><br />
言語に関係なく表示範囲に合わせて改行。単語の途中で改行されることもある。<br />
<strong>keep-all</strong><br />
言語に関係なく単語の途中では改行せず、単語で改行。</p>
<h3>white-space</h4>
<p><strong>normal</strong><br />
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。ボックスの大きさが指定されている場合には、その大きさに応じて自動的に改行。<br />
<strong>pre</strong><br />
ソース中の連続する半角スペース・タブ・改行を、そのまま表示。<br />
<strong>nowrap</strong><br />
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。ボックスの大きさが指定されている場合にも、自動的に改行されない。</p>
<p>&nbsp;</p>
<p>となっておりますが、</p>
<p>言葉で説明されてもあまりピンとこないと思いますので、</p>
<p>英語と日本語で実際にhtmlで作成してみましたので、</p>
<p>ご覧ください。<br />
<a class="demo" href="/demo/abe/35/" target="_blank">DEMO</a></p>
<p>あまり変わらないような感じがしますね・・・</p>
<p>word-breakのbreal-allとwhite-spaceのpreが目に見えて違いますが、</p>
<p>おそらくhtmlの状況によって変わってくるのだと思います。</p>
<p>簡単な参考にしてください。</p>
<p>&nbsp;</p>
<p>ちなみに、DEMOに入ってるテキストは、</p>
<p>以下のサイトで生成されたものを使用しています。</p>
<p>テキスト何入れようかと迷った時はいいですね！</p>
<p>日本語<br />
<a href="http://www.blindtextgenerator.com/lorem-ipsum" target="_blank">http://www.blindtextgenerator.com/lorem-ipsum</a></p>
<p>英語<br />
<a href="http://lipsum.sugutsukaeru.jp/index.cgi" target="_blank">http://lipsum.sugutsukaeru.jp/index.cgi</a></p>


cssで制御する折り返しのまとめ

<h2>FULLTEXT</h3>
<p>FULLTEXTとは全文検索インデックスの事です。</p>
<p>利用できるデータベースはMyISAM型データベースのみです。</p>
<p>MyISAM型はテーブル作成時に設定できます。</p>

		<div id="crayon-64953fd592e56315761904" 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;">
CREATE TABLE table_name (
  id INT
) ENGINE=MyISAM;</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-64953fd592e56315761904-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd592e56315761904-2">2</div><div class="crayon-num" data-line="crayon-64953fd592e56315761904-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-64953fd592e56315761904-1"><span class="crayon-e">CREATE </span><span class="crayon-e">TABLE </span><span class="crayon-e">table_name</span><span class="crayon-h"> </span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd592e56315761904-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">id </span><span class="crayon-t">INT</span></div><div class="crayon-line" id="crayon-64953fd592e56315761904-3"><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i">ENGINE</span>=<span class="crayon-i">MyISAM</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>また、既存のテーブルをMyISAM型に設定する事も出来ます。</p>

		<div id="crayon-64953fd592e5a133533955" 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;">
 ALTER TABLE table_name ENGINE MyISAM; </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-64953fd592e5a133533955-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-64953fd592e5a133533955-1"><span class="crayon-h"> </span><span class="crayon-e">ALTER </span><span class="crayon-e">TABLE </span><span class="crayon-e">table_name </span><span class="crayon-e">ENGINE </span><span class="crayon-i">MyISAM</span><span class="crayon-sy">;</span><span class="crayon-h"> </span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>Fulltextの設定</h3>
<p></p>

		<div id="crayon-64953fd592e5b154149767" 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;">
CREATE TABLE table_name (
       id INT UNSIGNED AUTO_INCREMENT NOT NULL PRIMARY KEY,
       title VARCHAR(200),
       body TEXT,
       FULLTEXT (title,body)
  );</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-64953fd592e5b154149767-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd592e5b154149767-2">2</div><div class="crayon-num" data-line="crayon-64953fd592e5b154149767-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd592e5b154149767-4">4</div><div class="crayon-num" data-line="crayon-64953fd592e5b154149767-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd592e5b154149767-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-64953fd592e5b154149767-1"><span class="crayon-e">CREATE </span><span class="crayon-e">TABLE </span><span class="crayon-e">table_name</span><span class="crayon-h"> </span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd592e5b154149767-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-e">id </span><span class="crayon-t">INT</span><span class="crayon-h"> </span><span class="crayon-t">UNSIGNED</span><span class="crayon-h"> </span><span class="crayon-e">AUTO_INCREMENT </span><span class="crayon-st">NOT</span><span class="crayon-h"> </span><span class="crayon-t">NULL</span><span class="crayon-h"> </span><span class="crayon-e">PRIMARY </span><span class="crayon-i">KEY</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd592e5b154149767-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-e">title </span><span class="crayon-e">VARCHAR</span><span class="crayon-sy">(</span><span class="crayon-cn">200</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd592e5b154149767-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-e">body </span><span class="crayon-i">TEXT</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd592e5b154149767-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-e">FULLTEXT</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i">title</span><span class="crayon-sy">,</span><span class="crayon-i">body</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd592e5b154149767-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>MATCH &#8230;. AGAINST</h3>
<p>⬆に作成したテーブルに対して検索を行う場合は以下のように書きます。</p>

		<div id="crayon-64953fd592e5d956525213" 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;">
SELECT * FROM table_name WHERE MATCH (title,body) AGAINST ('database mysql');</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-64953fd592e5d956525213-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-64953fd592e5d956525213-1"><span class="crayon-e ">SELECT *</span><span class="crayon-h"> </span><span class="crayon-e">FROM </span><span class="crayon-e">table_name </span><span class="crayon-e">WHERE </span><span class="crayon-e">MATCH</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i">title</span><span class="crayon-sy">,</span><span class="crayon-i">body</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-e">AGAINST</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-s">'database mysql'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>「title」「body」の中に「database」と「mysql」という文字郡を検索する。<br />
結果として「database」と「mysql」が含まれるレコードが、<br />
順位づけられて返ってきます。</p>

FULLTEXT と MATCH &#8230;.AGAINST

<p>今日はmysqlの予約語について、やさしい話をしましょう。</p>
<h2>「予約語」と「識別子」</h3>
<p>mysqlには、select、from、 insert、into、joinなどの特定語があります。それらを「予約語」といいます。<br />
mysqlのテーブル名やカラム名といった「識別子」には、基本的に「予約語」が使えません※。</p>
<p>※「予約語」を「`」で囲んだら使えますが、<a href="http://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E9%96%A2%E4%BF%82%E3%83%9E%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0" target="_blank">ORM</a>を用いる各言語のフレームワークが対応していない場合があるため、「予約語」を「識別子」として使うことはお勧めできません。</p>
<p>例えば、注文のテーブルを作ろうとして、テーブル名をorderと命名するとします。</p>
<p></p>

		<div id="crayon-64953fd592c74079833880" 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;">
create table order (id int, name varchar(255)...);</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-64953fd592c74079833880-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-64953fd592c74079833880-1"><span class="crayon-e">create </span><span class="crayon-e">table </span><span class="crayon-e">order</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e">id </span><span class="crayon-t">int</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">name </span><span class="crayon-e">varchar</span><span class="crayon-sy">(</span><span class="crayon-cn">255</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ではSQL syntaxエラーが出ますが、</p>
<p></p>

		<div id="crayon-64953fd592c78010795743" 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;">
create table `order` (id int, name varchar(255)...);</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-64953fd592c78010795743-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-64953fd592c78010795743-1"><span class="crayon-e">create </span><span class="crayon-i">table</span><span class="crayon-h"> </span><span class="crayon-sy">`</span><span class="crayon-i">order</span><span class="crayon-sy">`</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e">id </span><span class="crayon-t">int</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">name </span><span class="crayon-e">varchar</span><span class="crayon-sy">(</span><span class="crayon-cn">255</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">.</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>と書けば、syntaxエラーがでません。</p>
<h2>mysqlの内部関数名はどうなる？</h3>
<p>mysqlの内部関数名（例えば、count関数）は、「予約語」ではないので、「識別子」として使えます。<br />
また、mysqlの内部関数を使うときは、その直後に「スペース」の使用は許可されていません。<br />
なぜなら、直後に「スペース」を使うと、それが関数名か、もしくはテーブル名（カラム名）か分からなくなるからのです。</p>
<h2>mysqlの予約語一覧</h3>
<p>下記リンクからご覧いただけます。<br />
<a href="http://dev.mysql.com/doc/refman/5.1/ja/reserved-words.html" target="_blank">http://dev.mysql.com/doc/refman/5.1/ja/reserved-words.html</a></p>

【MySQL】予約語について

<h2>レスポンシブコーディングの手順</h3>
<p>コーディングする際に焦りがちの私、結局修正が山ほど出てきて、より遅くなる。<br />
「急がば回れ」のどおり、今回は落ち着いて、コーディング作業に入る前に、<br />
以下の手順を心がけて行うようにした。<br />
&nbsp;<br />
&nbsp;<br />
・コーディングに入る前に、PCデザインとスマホデザインを比べてコーディング手順を考える<br />
&nbsp;<br />
・どの部分が共通できて、どこが要素ごと入れ替えないといけないかを決める<br />
&nbsp;<br />
・PCデザインがスマホデザインで共通できる部分があれば、<br />
  どの要素をどのような順番で作れば、スマホの場合うまくいくかを考える。<br />
&nbsp;<br />
・画像スライドする際もスマホ用の画像とpc用の画像の名前を分かるようにルールを決める。<br />
&nbsp;<br />
後、実際にコーディングに入るときには、<br />
・子要素を出来るだけwidthを指定しないでpaddingやmarginで指定する<br />
&nbsp;<br />
&nbsp;<br />
以前はどこの要素でもwidthを指定しがちですが、<br />
必要でないところで指定しているとスマホの場合うまくいかない事がよくありました。</p>


レスポンシブコーディングの手順

【codemirror】twig mode

<p>フラットデザインが流行っているのと共に、</p>
<p>ロングシャドウもじわじわと流行りつつあるようです。（もしかしたらもう流行ってる？？）</p>
<p>&nbsp;</p>
<p>ロングシャドウってなに？？っていう人は、</p>
<p>以下のサイトをご覧ください。</p>
<p>&nbsp;</p>
<p><a href="http://www.webdesignerdepot.com/2013/07/flat-design-casts-a-long-shadow/">Flat design casts a long shadow | Webdesigner Depot</a></p>
<p>&nbsp;</p>
<p>要はやたら長いドロップシャドウみたいな感じですね。</p>
<p>フラットデザインと相まっていい感じですね！！</p>
<p>&nbsp;</p>
<p>そんなドロップシャドウを簡単に作れる無料PSDがあります！</p>
<p>斜め45度限定になりますが、十分でしょう！</p>
<p>&nbsp;</p>
<p>以下からダウンロードして下さい！</p>
<p>&nbsp;</p>
<p><a href="http://graphicburger.com/long-shadow-generator/">Long Shadow Generator | GraphicBurger</a></p>
<p>&nbsp;</p>
<p>実際にPSDを開いてみると、</p>
<p>レイヤーがこんな感じになっているので、</p>
<p><a href="/uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3491" alt="スクリーンショット 2013-10-28 21.43.04" src="/uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db.png" width="342" height="327" srcset="/uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db.png 342w, /uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db-300x286.png 300w, /uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db-228x218.png 228w" sizes="(max-width: 342px) 100vw, 342px" /></a></p>
<p>Your design hereに合わせて、右クリックで、</p>
<p>「コンテンツを置き換え」をするとそのコンテンツに合わせてシャドウが生成されます。</p>
<p>テキスト、アイコンなんでもOKっぽいです。</p>
<p>&nbsp;</p>
<p>上のメインビジュアルが実際に作ってみたものになります。</p>
<p>&nbsp;</p>
<p>これはPSDですが、</p>
<p>htmlを生成してくれるサイトもあり、css3を使って表現しているようです。</p>
<p>以下のサイトになります。</p>
<p>&nbsp;</p>
<p><a href="http://sandbox.juan-i.com/longshadows/">Long Shadows Generator &#8211; by Juani</a></p>
<p>&nbsp;</p>
<p>実に簡単にできますね！！</p>
<p>これでロングシャドウは怖くないぞ！！</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>おまけ：</p>
<p>iOS７のカラーコードを一覧にしているサイトがあります。</p>
<p>カラーの参考にぜひどうぞ！</p>
<p>&nbsp;</p>
<p><a href="http://ios7colors.com/">iOS 7 colors</a></p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: スターフィールド編集部

2013/12/04

2013/12/03

2013/11/27

2013/11/27

2013/11/26

2013/11/26

2013/11/21

2013/11/21

2013/11/19

2013/11/13

2013/11/12

2013/11/12

2013/11/07

2013/11/06

2013/11/06

2013/10/30

2013/10/29

2013/10/29