Ajax でデータ送信、受信

<p>以前にiphone5で<a href="/officer/iphone5au%E3%81%AE%E6%B6%B2%E6%99%B6%E5%89%B2%E3%82%8C%E3%81%8B%E3%82%89%E3%82%B8%E3%83%BC%E3%83%8B%E3%82%A2%E3%82%B9%E3%83%90%E3%83%BC%E3%81%A7%E4%BA%A4%E6%8F%9B%E3%81%BE%E3%81%A7%E3%81%AE%E9%A1%9B.html" target="_blank">ジーニアスバーにお世話になった記事</a>を書きましたが、今回はmacbookairの電源ケーブルが断線したということで、ジーニアスバーに行ってきました。</p>
<h2>Genius Barの予約</h3>
<p>前回ご紹介した通り、Genius Barへの予約はiphoneアプリの「<strong>Apple Store</strong>」が便利です。</p>
<p>今回は、行ったことのない銀座のapple storeの予約をしました。土曜日ということもありましが、午後18時の一箇所しか空いておりませんでした。</p>
<h2>Genius Barにて</h3>
<p>銀座のGenius Barは4階にあるんですね。おしゃれな透明なエレベーターに乗り、2階、3階のイベントスペースのようなフロアを見ながら上がっていきます。</p>
<p>4階に着くとあいかわらず盛況です。予約した旨を伝えて待っておりましたが、やはり、10分〜15分程度は待ちました。</p>
<p>ようやく通され、早速電源ケーブルが断線したという要件を伝えると</p>
<p>「<strong>macのシリアルを確認させてください！</strong>」</p>
<p>と一言。</p>
<p>「え、電源ケーブルは持って来たけどmacの本体なんて持って来てないんですけど・・・・・。」</p>
<p>ということでサポートを受けるためには、macのシリアルが必要です。</p>
<p>私の場合は、購入履歴から辿ることが出来ました。</p>
<p>但し、更なる関門が。</p>
<p>当たり前の話といえば当たり前なんですが、<strong>保証期間の1年</strong>がどちらにしても過ぎておりました。</p>
<p>また、最後に断線の状況を見てもらったところ、自然故障の類でないと保証が出来ない可能性があるとのことでした。</p>
<p>&nbsp;</p>
<p>ということで、同時に断線した購入一年以内のiphone5のケーブルだけ変えてもらって帰りました。</p>
<h2>まとめ</h3>
<p>ここで、スタッフの方にお聞きした内容を含めてまとめます。</p>
<ul>
<li>電源ケーブルでもmac本体を持っていくか、シリアル番号を控えて持っていけ！</li>
</ul>
<p>→本体からシリアルIDの調べ方は<a href="http://support.apple.com/kb/HT1941?viewlocale=ja_JP" target="_blank">こちら</a>、osからシリアルIDの調べ方は<a href="http://support.apple.com/kb/HT1529?viewlocale=ja_JP" target="_blank">こちら</a></p>
<ul>
<li>本体保証は1年間。3年間の延長サポートを受けたければAppleCare Protection Plan に入れ！</li>
</ul>
<p>→<a href="http://store.apple.com/jp/product/MD015J/A/macbook-macbook-air-13-macbook-pro-applecare-protection-plan" target="_blank">macbook air</a>で￥24,800、<a href="http://store.apple.com/jp/product/MD013J/A/applecare-protection-plan-for-15%E3%82%A4%E3%83%B3%E3%83%8117%E3%82%A4%E3%83%B3%E3%83%81macbook-pro15%E3%82%A4%E3%83%B3%E3%83%81macbook-pro-retina%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4%E3%83%A2%E3%83%87%E3%83%AB" target="_blank">macbook pro ratina 15</a>なら￥34,800だ！高い！</p>
<blockquote><p>AppleCare Protection Plan（3年）<br />
・本体購入から一年以内ならいつでも加入できる。<br />
・電源アダプタなどの付属アクセサリも保証。<br />
・落下/物損/水没/天災/盗難等は保証外。<br />
・保証内の修理であれば保証額、保証回数共に無制限。<br />
・無制限の電話サポート<br />
・修理に出す際の送料も無料<br />
・消耗したバッテリーの交換は保証外<br />
・メモリやHDを自分で交換した場合、交換の際の不備が故障の原因と認定された場合は保証外</p></blockquote>
<ul>
<li>状態によっては、故意による故障とみなされることもあるから注意しろ！</li>
</ul>
<p>→巻き方はフワッと<a href="http://www.monster-dive.com/blog/tools_software/20131005_001081.php" target="_blank">このサイト</a>のお手本のように。</p>
<h2>あとがき</h3>
<p>電源ケーブルが交換してもらえなかったので、amazonでとても安い互換アダプターがあったので購入しましたが、初日から接触が悪く充電出来ないことがあるという有り様で即返品させてもらいました。</p>
<p>レビューを見てみると大分個体差があるようで、私はハズレを引いたようでしたorz</p>


macbook電源ケーブルの断線からジーニアスバーまでの顛末

<p>今更ながらですが、google fontsについての記事を書くことにしました。</p>
<p>1,2年前ぐらいwebフォントが出現し、モリサワ等の会社もwebフォントを提供していますが、<br />
webフォントを実際のサイトで使用したことはまだありません。</p>
<p>その理由としては有料ということもあると思いますが、そこまでフォントに対してこだわるお客さんがいないといった所でしょうか。。webフォントを読み込むのに時間がかかってユーザビリティが悪いといった懸念もあるように思います。</p>
<p>google fontsは無料かつ商用可で、特に登録もなく利用できるのですが、<br />
こちらは英語しかないためまだ使用に至っていません。</p>
<p>結局の所、今後もしばらくはwebフォントを使う予定はないかもしれません笑</p>
<p>とはいえ、使い方を学んでおくにこしたことはないので、<br />
軽くでは試してみたので、そちらとその流れを紹介したいと思います。</p>
<p><a class="demo" href="/demo/abe/36/" target="_blank">DEMO</a></p>
<h2>Google Fontsを使ってみた</h3>
<p>まずは、<a href="http://www.google.com/fonts" target="_blank">Google Fonts</a>で使いたいフォントを選びます。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3728" alt="Google Fonts" src="/uploads-archive/2013/12/Google-Fonts-1024x592.jpg" width="630" height="364" srcset="/uploads-archive/2013/12/Google-Fonts-1024x592.jpg 1024w, /uploads-archive/2013/12/Google-Fonts-300x173.jpg 300w, /uploads-archive/2013/12/Google-Fonts-228x131.jpg 228w, /uploads-archive/2013/12/Google-Fonts.jpg 1206w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>&nbsp;</p>
<p>今は全部629種類のフォントがあるようですね。<br />
基本的にはこの画面から、<br />
フォントのカテゴリー（Serif,Sans Serif,Display,Handwriting）やThickness,Slant,Widthを設定して検索できます。</p>
<p>フォントの右下の⇒みたいなマークを押すと、</p>
<p>詳細画面に遷移します。</p>
<h2>webフォントのスクリプトタグをゲット！</h3>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/12/Google-Fonts2.jpg"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3727" alt="Google Fonts2" src="/uploads-archive/2013/12/Google-Fonts2-1024x592.jpg" width="630" height="364" srcset="/uploads-archive/2013/12/Google-Fonts2-1024x592.jpg 1024w, /uploads-archive/2013/12/Google-Fonts2-300x173.jpg 300w, /uploads-archive/2013/12/Google-Fonts2-228x131.jpg 228w, /uploads-archive/2013/12/Google-Fonts2.jpg 1206w" sizes="(max-width: 630px) 100vw, 630px" /></a></p>
<p>右側のストップウォッチみたいものはそのフォントを読み込むのかかる時間を表しているようです。</p>
<p>このページの下に、以下のようなwebフォントを読み込むスクリプトタグがあります。</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd594c5c654787806" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;link href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'&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-64953fd594c5c654787806-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-64953fd594c5c654787806-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">href</span>=<span class="crayon-s ">'http://fonts.googleapis.com/css?family=Wellfleet'</span><span class="crayon-h"> </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">'stylesheet'</span><span class="crayon-h"> </span><span class="crayon-e ">type</span>=<span class="crayon-s ">'text/css'</span><span class="crayon-r ">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>もうこれでOKです！</p>
<p>&nbsp;</p>
<p>あとはcssで、</p>
<p></p>

		<div id="crayon-64953fd594c60148252762" 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;">
font-family: 'Wellfleet', cursive;</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-64953fd594c60148252762-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-64953fd594c60148252762-1"><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'Wellfleet'</span><span class="crayon-i ">,</span><span class="crayon-h"> </span><span class="crayon-i ">cursive</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>としてすればOKです！</p>
<p>非常に簡単ですね！</p>
<p>&nbsp;</p>
<h2>Google Fontsを選ぶのに便利なサイト</h3>
<p>以下のサイトでは、実際にgoogle fontsを試せて、ダウンロードまでできるサイトです。<br />
フォントの数が多いのでこちらで試しながらフォントを決めるのがオススメです！</p>
<p><a href="http://typecast.com/preview/google" class="link" target="_blank">Typecast &#8211; Public Demo | Design in the browser with web fonts and real content</a></p>
<p>また、googlefontsとは関係ないのですが、<br />
フォント選びということで、便利なサイトを紹介します。</p>
<p>好きな文字/単語を、<br />
自分のパソコンに入っているフォントで一覧で表示してくれるサイトです。<br />
一つ一つPhotoshopで試すのはちょっと面倒ですよね！<br />
意外と役に経ちます。</p>
<p><a href="http://wordmark.it/" class="link" target="_blank">wordmark.it &#8211; helps you choose fonts!</a></p>
<p>&nbsp;<br />
&nbsp;<br />
&nbsp;</p>
<p>google fontsで日本語出してくれないかな〜</p>

Google Fontsを使ってみた＆フォント選びに便利なツール

<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

NivoスライダーみたいなエフェクトをjQueryで組んでみる

<p>今まで気付かなかった！GoogleAppsの空き容量が復活する方法があったのでご紹介します。</p>
<p>弊社では、GoogleAppsを導入し、Gmail、Googleカレンダー、Googleドライブで業務を遂行しています。</p>
<p>無料プランが存在していた時に導入をしていたので、幸い50ユーザーまで無料で使うことが出来ますが、容量が15GBと制限されています。</p>
<p>この15GBの容量というのが、GmailとGoogleドライブを合算した容量となっておりまして、日々の業務を遂行する上で、プレゼン資料や、psdやaiファイルなどを共有しているとあっという間に数GBになってしまいます。</p>
<p>ですので、日々プロジェクトが終了すると、社内のローカルサーバにファイルを移動して、Googleドライブの容量を確保するという運用をしておりますが、先日気づくと既に14GBほど、空き容量が1GBを切っている状態になっていました。</p>
<p>定期的にGoogleドライブのファイルは移動しているし、</p>
<p><a href="https://www.google.com/settings/storage">https://www.google.com/settings/storage</a></p>
<p>ここで容量を見てみると、Googleドライブが半分以上利用していることになっていました。</p>
<p>何よりPCで保存してあるGoogleドライブの容量と異なっていることが気になりました。</p>
<p>余計なファイルでもないかとWeb版のGoogleドライブにアクセスして判明致しました。</p>
<p><a href="/uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3687" alt="スター付き_-_Google_Drive-6" src="/uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98-300x196.jpg" width="300" height="196" srcset="/uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98-300x196.jpg 300w, /uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98-228x149.jpg 228w, /uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98.jpg 866w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>なんと左カラムに「ゴミ箱」なるものが！！！</p>
<p>ここに今まで削除したファイルがたんまり溜まっていました。</p>
<p>ゴミ箱を空にしたところ</p>
<p><a href="/uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3688" alt="ドライブ_ストレージ-2" src="/uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468-295x300.jpg" width="295" height="300" srcset="/uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468-295x300.jpg 295w, /uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468-228x231.jpg 228w, /uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468.jpg 511w" sizes="(max-width: 295px) 100vw, 295px" /></a></p>
<p>&nbsp;</p>
<p>5GB以上の空き容量が出来ましたとさ。</p>
<p>Web版は滅多にアクセスしないからそりゃ気が付かないって。</p>
<p>容量が逼迫している人はどうぞお試しあれ。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


GoogleAppsの空き容量回復！ドライブのゴミ箱に要注意！

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

<p>MTでサイトを運用しており、例えば以下のように</p>
<p><label for="sample1_1"><input id="sample1_1" type="radio" name="saple1" />東京</label><br />
<label for="sample1_2"><input id="sample1_2" type="radio" name="saple1" />埼玉</label><br />
<label for="sample1_3"><input id="sample1_3" type="radio" name="saple1" />神奈川</label><br />
<label for="sample1_4"><input id="sample1_4" type="radio" name="saple1" />茨城</label></p>
<p><a href="/uploads-archive/2013/11/1.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-3659" alt="1" src="/uploads-archive/2013/11/1.png" width="526" height="398" srcset="/uploads-archive/2013/11/1.png 876w, /uploads-archive/2013/11/1-300x227.png 300w, /uploads-archive/2013/11/1-228x172.png 228w" sizes="(max-width: 526px) 100vw, 526px" /></a></p>
<p>&nbsp;</p>
<p>エリアを選択させるラジオボタンのリストがあったとして、</p>
<p>途中で複数選択にしてほしいという要望はよくありそうで、実際に起こってしまったのでその対応方法。</p>
<p>要は<br />
<label for="sample2_1"><input id="sample2_1" type="checkbox" name="saple2" />東京</label><br />
<label for="sample2_2"><input id="sample2_2" type="checkbox" name="saple2" />埼玉</label><br />
<label for="sample2_3"><input id="sample2_3" type="checkbox" name="saple2" />神奈川</label><br />
<label for="sample2_4"><input id="sample2_4" type="checkbox" name="saple2" />茨城</label></p>
<p><a href="/uploads-archive/2013/11/2.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-3660" alt="2" src="/uploads-archive/2013/11/2.png" width="526" height="482" srcset="/uploads-archive/2013/11/2.png 876w, /uploads-archive/2013/11/2-300x275.png 300w, /uploads-archive/2013/11/2-228x209.png 228w" sizes="(max-width: 526px) 100vw, 526px" /></a></p>
<p>のようにしたいというもの。</p>
<p>単純にラジオボタンのフィールドを削除して新しくチェックボックスグループを追加すれば済む話だが</p>
<p>入力済みの記事がたくさんある場合は打ち直しがとてつもなく大変なため、DBを操作して無理やりチェックボックスグループに変更する方法。</p>
<p>使うのは以下2つのテーブル</p>
<p>&nbsp;</p>
<p>■mt_fieldテーブル</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;&#8212;&#8212;-+</p>
<p>| Field             | Type         | Null | Key | Default | Extra          |</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;&#8212;&#8212;-+</p>
<p>| field_id          | int(11)      | NO   | PRI | NULL    | auto_increment |</p>
<p>| field_basename    | varchar(255) | YES  | MUL | NULL    |                |</p>
<p>| field_blog_id     | int(11)      | YES  | MUL | NULL    |                |</p>
<p>| field_default     | mediumtext   | YES  |     | NULL    |                |</p>
<p>| field_description | mediumtext   | YES  |     | NULL    |                |</p>
<p>| field_name        | varchar(255) | NO   | MUL | NULL    |                |</p>
<p>| field_obj_type    | varchar(50)  | NO   | MUL | NULL    |                |</p>
<p>| field_options     | mediumtext   | YES  |     | NULL    |                |</p>
<p>| field_required    | tinyint(4)   | YES  |     | NULL    |                |</p>
<p>| field_tag         | varchar(255) | NO   |     | NULL    |                |</p>
<p>| field_type        | varchar(50)  | NO   | MUL | NULL    |                |</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;&#8212;&#8212;&#8212;-+</p>
<p>&nbsp;</p>
<p>■mt_entry_metaテーブル</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;-+</p>
<p>| Field                    | Type         | Null | Key | Default | Extra |</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;-+</p>
<p>| entry_meta_entry_id      | int(11)      | NO   | PRI | NULL    |       |</p>
<p>| entry_meta_type          | varchar(75)  | NO   | PRI | NULL    |       |</p>
<p>| entry_meta_vchar         | varchar(255) | YES  |     | NULL    |       |</p>
<p>| entry_meta_vchar_idx     | varchar(255) | YES  |     | NULL    |       |</p>
<p>| entry_meta_vdatetime     | datetime     | YES  |     | NULL    |       |</p>
<p>| entry_meta_vdatetime_idx | datetime     | YES  |     | NULL    |       |</p>
<p>| entry_meta_vinteger      | int(11)      | YES  |     | NULL    |       |</p>
<p>| entry_meta_vinteger_idx  | int(11)      | YES  |     | NULL    |       |</p>
<p>| entry_meta_vfloat        | float        | YES  |     | NULL    |       |</p>
<p>| entry_meta_vfloat_idx    | float        | YES  |     | NULL    |       |</p>
<p>| entry_meta_vblob         | mediumblob   | YES  |     | NULL    |       |</p>
<p>| entry_meta_vclob         | mediumtext   | YES  |     | NULL    |       |</p>
<p>+&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;&#8212;&#8212;&#8211;+&#8212;&#8212;+&#8212;&#8211;+&#8212;&#8212;&#8212;+&#8212;&#8212;-+</p>
<p>&nbsp;</p>
<p>まずカスタムフィールド自体のIDを用意する。</p>
<p>/mt.cgi?__mode=view&amp;_type=field&amp;blog_id=17&amp;id=906&amp;saved=1&amp;saved_added=1</p>
<p>例えばこのようなURLの場合、906がIDとなる。</p>
<p>これを使い、</p>

		<div id="crayon-64953fd5941a5252337217" 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">MySQL</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;">
SELECT * FROM mt_field where field_id=906;</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-64953fd5941a5252337217-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-64953fd5941a5252337217-1"><span class="crayon-st">SELECT</span><span class="crayon-h"> </span>*<span class="crayon-h"> </span><span class="crayon-st">FROM</span><span class="crayon-h"> </span>mt_field<span class="crayon-h"> </span><span class="crayon-st">where</span><span class="crayon-h"> </span>field_id<span class="crayon-o">=</span>906;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>などのようにSELECT文を実行して項目を確認。</p>
<p>field_typeがradioになっていることを確認し</p>

		<div id="crayon-64953fd5941aa356579294" 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">MySQL</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;">
UPDATE mt_field SET field_type='checkbox_group' where field_id=906;</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-64953fd5941aa356579294-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-64953fd5941aa356579294-1"><span class="crayon-st">UPDATE</span><span class="crayon-h"> </span>mt_field<span class="crayon-h"> </span><span class="crayon-st">SET</span><span class="crayon-h"> </span>field_type=<span class="crayon-s">'checkbox_group'</span><span class="crayon-h"> </span><span class="crayon-st">where</span><span class="crayon-h"> </span>field_id<span class="crayon-o">=</span>906;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>を実行してfield_typeをcheckbox_groupに変更する。</p>
<p>次に該当カスタムフィールドのベースネームを確認しておき、今回の場合だと</p>

		<div id="crayon-64953fd5941ab000998575" 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">MySQL</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;">
select entry_meta_entry_id,entry_meta_vchar,entry_meta_vchar_idx from mt_entry_meta where entry_meta_type like "%entry_area%";</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-64953fd5941ab000998575-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-64953fd5941ab000998575-1"><span class="crayon-st">select</span><span class="crayon-h"> </span>entry_meta_entry_id,entry_meta_vchar,entry_meta_vchar_idx<span class="crayon-h"> </span><span class="crayon-st">from</span><span class="crayon-h"> </span>mt_entry_meta<span class="crayon-h"> </span><span class="crayon-st">where</span><span class="crayon-h"> </span>entry_meta_type<span class="crayon-h"> </span><span class="crayon-st">like</span><span class="crayon-h"> </span><span class="crayon-s">"%entry_area%"</span>;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>などのようにして現在該当カスタムフィールドを使っている記事を確認する。</p>
<p>ラジオボタンのリストはカンマ区切りでentry_meta_vchar_idxカラムにデータが入っているが</p>
<p>チェックボックスリストはentry_meta_vcharカラムを使用するため</p>

		<div id="crayon-64953fd5941ac987169711" 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">MySQL</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;">
update mt_entry_meta set entry_meta_vchar=entry_meta_vchar_idx where entry_meta_type like "%entry_area%";</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-64953fd5941ac987169711-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-64953fd5941ac987169711-1"><span class="crayon-st">update</span><span class="crayon-h"> </span>mt_entry_meta<span class="crayon-h"> </span><span class="crayon-st">set</span><span class="crayon-h"> </span>entry_meta_vchar<span class="crayon-o">=</span>entry_meta_vchar_idx<span class="crayon-h"> </span><span class="crayon-st">where</span><span class="crayon-h"> </span>entry_meta_type<span class="crayon-h"> </span><span class="crayon-st">like</span><span class="crayon-h"> </span><span class="crayon-s">"%entry_area%"</span>;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>を実行して entry_meta_vcharにentry_meta_vchar_idxを入れてします。</p>
<p>checkbox_groupはentry_meta_vchar_idxカラムを使用しないため、値はそのままとっておいてOK。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

【MovableType】MoreCustomFieldsでラジオボタンをチェックボックスに変更する

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


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

nino_eye.jpg

jQueryプラグインを使わずにフリック＆ドラッグで動くスライダーを作ってみる

<p>mailto構文でメールを送る機能において文字コードをどうするか？</p>
<p>これは、今後も必ず発生する課題となるので、備忘録を兼ねてまとめておきたいと思います。</p>
<h2>結論</h3>
<p>まず、簡単に結論から述べてしまうと、</p>
<ul>
<li>UTF-8では、Windows環境Outlook系で文字化け</li>
<li>ShiftJISでは、Gmail、Thunderbird等で文字化け</li>
<li>すべての環境、メーラーで対応する術はなし</li>
</ul>
<p>となります。</p>
<h2>どちらも一長一短</h3>
<p>ご自身の環境で試されたい方はこちらが参考になります。</p>
<p><a href="http://dd-kaihatsu-room.blogspot.jp/2013/04/mailtoutf-8sjis.html" target="_blank">http://dd-kaihatsu-room.blogspot.jp/2013/04/mailtoutf-8sjis.html</a></p>
<p>Windows環境はS-JIS、それ以外のグローバルサービスではUTF-8がサポートされています。</p>
<p>メーラーを選択して、文字コードを出し分けるということは難しいため、上記のサイトのように</p>
<p>S-JISとUTF-8の両方のリンクを出さない限り、文字化けを回避することは出来ません。</p>
<p>&nbsp;</p>
<p>また、Outlook2007以降のようですと、UTF-8をサポートするというオプションがあるようですが、サイト上から一般のユーザー様にこのような操作を強いるのは酷ですね。</p>
<p><a href="http://www.justhpbs.jp/hpb16/outlook-mailto.html" target="_blank">http://www.justhpbs.jp/hpb16/outlook-mailto.html</a></p>
<h2>考察</h3>
<p>ということで、じゃあどうするのがベストなのかというのを、考察してみました。</p>
<p>通常のプロセスですとシェアに応じてプライオリティを定めるというのが王道かと思いますが、残念ながらメーラーシェアの統計でここ一年のようなものは容易に見つけることは出来ませんでした。</p>
<p>Gmialやsmartphoneが普及した昨今、WindowsベースのOutlookはシェアが落ちていることは確実かと思いますので、UTF-8一択でいいと結論着けてしまっていいものでしょうか？</p>
<p>私が考えたのは以下です。</p>
<ul>
<li>メールで送るという行為自体がレガシーなものになりつつある。</li>
<li>シェアする方法としてTwitterやFacebookが普及している。</li>
</ul>
<p>という前提からGmailやThunderbirdを使いこなすユーザーは、他の方法でシェアをする。</p>
<p>メールで送るという機能を使うユーザーこそ、Windows系に合致するため、メーラーはShiftJISで設定しておくのがベストではないかと考えます。</p>


メーラーの文字コードはUTF-8とS-JISどちらがいい？

<p>Pathみたいなナビゲーションが作れるjQueryプラグイン ferroMenuを使ってみた。</p>
<p><a class="demo" href="/demo/hoshino/49/">デモ</a></p>
<p>&nbsp;</p>
<p>以下設置方法</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd593a7d220585936" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;link rel="stylesheet" href="css/jquery.ferro.ferroMenu.css" /&gt;
&lt;script src="js/jquery.ferro.ferroMenu-1.0.min.js" type="text/javascript"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd593a7d220585936-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a7d220585936-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-64953fd593a7d220585936-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">"stylesheet"</span><span class="crayon-h"> </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"css/jquery.ferro.ferroMenu.css"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a7d220585936-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.ferro.ferroMenu-1.0.min.js"</span><span class="crayon-h"> </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>まずはダウンロードしたファイルを読み込む。</p>
<p>CSSは必ず読み込んだ方が良い。ただ、デフォルトで#navに対してスタイルをかけているが</p>
<p>変更が容易は容易だった。</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd593a81910894925" 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;">
$(document).ready(function()
{
	$("#left-bottom").ferroMenu();
});</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-64953fd593a81910894925-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a81910894925-2">2</div><div class="crayon-num" data-line="crayon-64953fd593a81910894925-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a81910894925-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-64953fd593a81910894925-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">document</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">ready</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a81910894925-2"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd593a81910894925-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#left-bottom"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">ferroMenu</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-64953fd593a81910894925-4"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>次にターゲットに対して ferroMenu関数を実行する。</p>
<p>1ページに複数ターゲットを置いて別々に指定したらエラーになり最後のものしか実行されなかった。</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd593a82857719733" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;ul id="left-bottom" class="nav"&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;1&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;2&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;3&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;4&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;5&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;i&gt;6&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&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-64953fd593a82857719733-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a82857719733-2">2</div><div class="crayon-num" data-line="crayon-64953fd593a82857719733-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a82857719733-4">4</div><div class="crayon-num" data-line="crayon-64953fd593a82857719733-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a82857719733-6">6</div><div class="crayon-num" data-line="crayon-64953fd593a82857719733-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593a82857719733-8">8</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-64953fd593a82857719733-1"><span class="crayon-r ">&lt;ul </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"left-bottom"</span><span class="crayon-h"> </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"nav"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a82857719733-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i&gt;</span><span class="crayon-i ">1</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd593a82857719733-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i&gt;</span><span class="crayon-i ">2</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a82857719733-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i&gt;</span><span class="crayon-i ">3</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd593a82857719733-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i&gt;</span><span class="crayon-i ">4</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a82857719733-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i&gt;</span><span class="crayon-i ">5</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd593a82857719733-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;a </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"#"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;i&gt;</span><span class="crayon-i ">6</span><span class="crayon-r ">&lt;/i&gt;</span><span class="crayon-r ">&lt;/a&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593a82857719733-8"><span class="crayon-r ">&lt;/ul&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ターゲットはulで指定した方が無難だった。</p>
<p>&nbsp;</p>
<p>また、以下はパラメータ一覧</p>
<p>&nbsp;</p>
<table>
<tr>
<th>パラメータ</th>
<th>値</th>
<th>デフォルト値</th>
<th>説明</th>
</tr>
<tr>
<td>closeTime</td>
<td>int</td>
<td>500</td>
<td>メニューが閉じる時の時間(ミリ秒)</td>
</tr>
<tr>
<td>delay</td>
<td>int</td>
<td>0</td>
<td>各アイテムのアニメーション開始時のディレイ</td>
</tr>
<tr>
<td>drag</td>
<td>bool</td>
<td>TRUE</td>
<td>メニューをドラッグできるか否か</td>
</tr>
<tr>
<td>easing</td>
<td>string</td>
<td>cubic-bezier(0.680, -0.550, 0.265, 1.550)</td>
<td>イージングの指定</td>
</tr>
<tr>
<td>margin</td>
<td>int</td>
<td>10</td>
<td>配置によるが、エッジに対するマージン</td>
</tr>
<tr>
<td>position</td>
<td>&#8216;left-top&#8217; | &#8216;center-top&#8217; | &#8216;right-top&#8217; | &#8216;right-bottom&#8217; |   &#8216;center-bottom&#8217; | &#8216;left-bottom&#8217; | &#8216;right-center&#8217; | &#8216;left-center&#8217; |   &#8216;center-center&#8217;</td>
<td>&#8216;left-bottom&#8217;</td>
<td>配置位置。dragがtrueであればデフォルトの位置</td>
</tr>
<tr>
<td>radius</td>
<td>int</td>
<td>100</td>
<td>アイテムの距離感</td>
</tr>
<tr>
<td>rotation</td>
<td>int</td>
<td>0</td>
<td>アイテムの回転角度</td>
</tr>
<tr>
<td>opened</td>
<td>bool</td>
<td>FALSE</td>
<td>デフォルトでメニューを開いてるか否か</td>
</tr>
<tr>
<td>openTime</td>
<td>int</td>
<td>500</td>
<td>アイテムが開くスピード(ミリ秒)</td>
</tr>
</table>

Pathみたいなナビゲーションが作れるjQueryプラグイン ferroMenu

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


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2013/12/04

2013/12/04

2013/12/04

2013/12/04

2013/12/03

2013/11/27

2013/11/27

2013/11/27

2013/11/27

2013/11/26

2013/11/26

2013/11/26

2013/11/21

2013/11/21

2013/11/21

2013/11/21

2013/11/21

2013/11/19