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でラジオボタンをチェックボックスに変更する

small_nino_eye.jpg

thumbnail_nino_eye.jpg

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>


【API】facebookとtwitterのAPI再確認

<p>Photoshopを使い始めて数年経ちましたが、</p>
<p>最近になってようやく知った、便利なショートカットを少しだけご紹介します。</p>
<p>&nbsp;</p>
<h2>移動ツール選択中に「ctrl(command) + 左クリック」</h3>
<p>このショートカットを使うと、Illustratorでオブジェクトを選択するときと同じように、</p>
<p>クリックした場所にある要素のレイヤーを選択することができます。</p>
<p>大量のレイヤーの中から、目的の要素があるレイヤーを選択するのに便利です。</p>
<p><img decoding="async" loading="lazy" alt="ss" src="/uploads-archive/2013/11/ss00.jpg" width="656" height="525" /></p>
<p>↓</p>
<p><img decoding="async" loading="lazy" alt="ss" src="/uploads-archive/2013/11/ss01.jpg" width="656" height="525" /></p>
<p>&nbsp;</p>
<h2>移動ツール選択中に「ctrl(command) + J」</h3>
<p>このショートカットを使うと、選択しているレイヤーを複製することができます。</p>
<p>同じ要素を多数複製したりする場合に便利です。</p>
<p><img decoding="async" loading="lazy" alt="ss" src="/uploads-archive/2013/11/ss02.jpg" width="656" height="525" /></p>
<p>&nbsp;</p>
<p>覚えるととても便利なショートカットですので、</p>
<p>使ったことのない方は、是非使ってみてください。</p>


ひそかに便利なPhotoshopのショートカット（レイヤー系）

MATCH Against In Boolean Mode

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


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

<p>今日はMySQLの外部参照について話したいと思います。<br />
慣れないキーワードがちょっと出てきますが、安心してください。<br />
MySQLの外部参照はこれだけで覚えます。</p>
<h2>キーワード</h3>
<p>CONSTRAINT<br />
REFERENCES<br />
RESTRICT<br />
NO ACTION<br />
CASCADE<br />
SET NULL</p>
<h2>基本用法</h3>
<p></p>

		<div id="crayon-64953fd593043722562159" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
CREATE TABLE 子テーブル名(子カラム名 データ型,
  CONSTRAINT キー名 FOREIGN KEY (子カラム名)
  REFERENCES 親テーブル名(親カラム名)
  ON DELETE reference_option
  ON UPDATE reference_option
) ENGINE=InnoDB;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd593043722562159-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593043722562159-2">2</div><div class="crayon-num" data-line="crayon-64953fd593043722562159-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593043722562159-4">4</div><div class="crayon-num" data-line="crayon-64953fd593043722562159-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593043722562159-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd593043722562159-1"><span class="crayon-e">CREATE </span><span class="crayon-i">TABLE</span><span class="crayon-h"> </span>子テーブル名<span class="crayon-sy">(</span>子カラム名<span class="crayon-h"> </span>データ型<span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593043722562159-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">CONSTRAINT</span><span class="crayon-h"> </span>キー名<span class="crayon-h"> </span><span class="crayon-e">FOREIGN </span><span class="crayon-e">KEY</span><span class="crayon-h"> </span><span class="crayon-sy">(</span>子カラム名<span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-64953fd593043722562159-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">REFERENCES</span><span class="crayon-h"> </span>親テーブル名<span class="crayon-sy">(</span>親カラム名<span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593043722562159-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">ON </span><span class="crayon-e">DELETE </span><span class="crayon-e">reference_option</span></div><div class="crayon-line" id="crayon-64953fd593043722562159-5"><span class="crayon-e">&nbsp;&nbsp;</span><span class="crayon-e">ON </span><span class="crayon-e">UPDATE </span><span class="crayon-i">reference_option</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593043722562159-6"><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i">ENGINE</span>=<span class="crayon-i">InnoDB</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h2>reference_option</h3>
<h3>RESTRICT</h4>
<p>ON DELETE句やON UPDATE句にRESTRICTを指定した場合は、親テーブルに対して更新や削除を行うとエラーが発生します。RESTRICTはON DELETE句やON UPDATE句を明示的に指定しなかった場合に設定される値です。</p>
<h3>NO ACTION</h4>
<p>ON DELETE句やON UPDATE句にNO ACTIONを指定した場合は、親テーブルに対して更新や削除を行うとエラーが発生します。MySQLにおいてはNO ACTIONとRESTRICTは同じ挙動となります。</p>
<h3>CASCADE</h4>
<p>ON DELETE句やON UPDATE句にCASCADEを指定した場合は、親テーブルに対して更新を行うと子テーブルで同じ値を持つカラムの値も合わせて更新されます。また親テーブルに対して削除を行うと子テーブルで同じ値を持つデータが削除されます。</p>
<h3>SET NULL</h4>
<p>ON DELETE句やON UPDATE句にSET NULLを指定した場合は、親テーブルに対して更新を行うと子テーブルで同じ値を持つカラムの値がNULLに更新されます。また親テーブルに対して削除を行うと子テーブルで同じ値を持つデータのカラムの値がNULLに更新されます。</p>
<h2>参考リンク</h3>
<p><a href="http://dev.mysql.com/doc/refman/5.1/ja/innodb-foreign-key-constraints.html" target="_blank">http://dev.mysql.com/doc/refman/5.1/ja/innodb-foreign-key-constraints.html</a><br />
<a href="http://www.dbonline.jp/mysql/table/index12.html" target="_blank">http://www.dbonline.jp/mysql/table/index12.html</a></p>

【MySQL】外部参照について

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


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

<p>&nbsp;</p>
<p>Android4.4が発表されましたので、備忘録を兼ねてまとめてみました。</p>
<p>個人としては、Nexus7（2013）を初めて本格的に保有するAndroid端末として購入しました。</p>
<p>ipadも保有しておりますが、一言で比較をすると、Android断片化の影響を強く受けていると感じました。</p>
<p>ipadであれば、画面サイズが決まっているため、アプリにしろWebにしろ、最適化されたサイズ操作性というものが用意されていることが多かったのですが、Androidの7インチ端末となると、アプリがスマートフォンの比率で表示されたりすることがあるため、異様にボタンの類が大きかったり、WebではPCサイトのまま表示されると7インチでは非常に小さくなってしまったりと、CPUスペックも解像度も十分で動作は申し分ないのですが、UXの部分で厳しさを感じました。</p>
<p>上記の感想を抱いていただけに、Android4.4の発表は非常に興味深いものでした。</p>
<p>&nbsp;</p>
<p>Nexus5と同時に発表されたものですが、主なポイントは下記になります。</p>
<ul>
<li>低スペックの端末でも動作可能</li>
<li>マルチタスキングの高速化</li>
<li>統合されたメッセージアプリHungout</li>
<li>絵文字の改良</li>
</ul>
<p>ここで、述べた興味深い内容というのが、低スペックの端末でも動作が可能というところです。</p>
<p>新興国ではいまだにメモリ512MBなど日本の主流端末の1/4ほどのスペックが多いとのことですが、そのような端末でも動作が可能になるように隅々まで効率化と最適化をしたとのことです。</p>
<p>バージョンアップをするにつれて、機能が増え、表現がリッチになり要求スペックを挙げていき、低スペック端末を切り捨てていくというのがソフトウェア開発の主たる流れなのかと思っていましたが、Googleのこの判断は素晴らしいと思います。</p>
<p>私がフラッグシップ端末を買って、感じていた断片化をまず、GoogleがOSレベルで収束をさせようとしているため、今後に期待です。</p>
<p>&nbsp;</p>
<h2><span style="font-size: 1em;">アップデートの提供は18ヶ月以内の発売端末に限る</span></h3>
<p>また 、リリース時期について、確認をしていたのですが、驚くべきことが分かりました。</p>
<p>GoogleのOSアップデートの提供基準が18ヶ月以内に発売された端末のみということです。</p>
<p>下記URLによると、GalaxyNEXUSは対象外になるということです。</p>
<p>断片化を取り除きつつもアップデートが18ヶ月以内というのは何とも矛盾するポリシーになっていますが、ここも今後に期待したいところです。</p>
<p><a href="https://support.google.com/nexus/answer/3507867?hl=ja&amp;ref_topic=3415518" target="_blank">https://support.google.com/nexus/answer/3507867?hl=ja&amp;ref_topic=3415518</a></p>
<p>&nbsp;</p>
<h2>参考サイト</h3>
<p><a href="http://www.android.com/versions/kit-kat-4-4/" target="_blank">http://www.android.com/versions/kit-kat-4-4/</a></p>
<p><a href="http://www.android.com/versions/kit-kat-4-4/" target="_blank">http://jp.techcrunch.com/2013/11/01/20131031android-4-4-kitkat-google/</a></p>
<p><a href="http://jp.techcrunch.com/2013/11/01/20131031android-4-4-kitkat-google/" target="_blank">http://smhn.info/201311-what-change-android-kitkat </a></p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2013/12/03

2013/11/27

2013/11/27

2013/11/27

2013/11/27

2013/11/26

2013/11/21

2013/11/21

2013/11/21

2013/11/21

2013/11/21

2013/11/19

2013/11/13

2013/11/13

2013/11/12

2013/11/12

2013/11/07

2013/11/07