CSS3のcolumn-countを知らなかったので使ってみた

何にでも使えるであろうナビゲーションバーをHTMLとCSSで作れるか試してみた

<p>通常gitで差分を表示するときは、下記のように縦に並べて差分が表示されるのですが、<br />
<a href="/uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2.png"><img decoding="async" loading="lazy" src="/uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-300x120.png" alt="スクリーンショット 2015-12-08 午後5.51.49" width="300" height="120" class="alignnone size-medium wp-image-8842" srcset="/uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-300x120.png 300w, /uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-1024x408.png 1024w, /uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-228x91.png 228w, /uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
たまにGUIを使ったときのような差分の表示の仕方のように横に並べて表示したくなるときがあるので、vimdiffを使った表示の方法を記述します。</p>
<h2>設定</h2>
<p>gitには外部のツールでdiffを表示させるという設定ができるので、それを実行します。</p>

		<div id="crayon-649540158ea79633126610" 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;">
git config --global diff.tool vimdiff
git config --global difftool.prompt false</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-649540158ea79633126610-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158ea79633126610-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-649540158ea79633126610-1"><span class="crayon-e">git </span><span class="crayon-i">config</span><span class="crayon-h"> </span>--<span class="crayon-m">global</span><span class="crayon-h"> </span><span class="crayon-i">diff</span><span class="crayon-sy">.</span><span class="crayon-e">tool </span><span class="crayon-e">vimdiff</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158ea79633126610-2"><span class="crayon-e">git </span><span class="crayon-i">config</span><span class="crayon-h"> </span>--<span class="crayon-m">global</span><span class="crayon-h"> </span><span class="crayon-i">difftool</span><span class="crayon-sy">.</span><span class="crayon-e">prompt </span><span class="crayon-t">false</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>使用方法</h2>
<p>通常git diffとしているところを、git difftoolと変更して使用します。<br />
git diff<br />
<a href="/uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2.png"><img decoding="async" loading="lazy" src="/uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-300x120.png" alt="スクリーンショット 2015-12-08 午後5.51.49" width="300" height="120" class="alignnone size-medium wp-image-8842" srcset="/uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-300x120.png 300w, /uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-1024x408.png 1024w, /uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2-228x91.png 228w, /uploads-archive/2015/12/170e2c24ca38a245aefcada2a8de7fa2.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><br />
git difftool<br />
<a href="/uploads-archive/2015/12/db01c3dcf3b320ce19f534c6e2d98452.png"><img decoding="async" loading="lazy" src="/uploads-archive/2015/12/db01c3dcf3b320ce19f534c6e2d98452-300x165.png" alt="スクリーンショット 2015-12-08 午後5.52.36" width="300" height="165" class="alignnone size-medium wp-image-8843" srcset="/uploads-archive/2015/12/db01c3dcf3b320ce19f534c6e2d98452-300x165.png 300w, /uploads-archive/2015/12/db01c3dcf3b320ce19f534c6e2d98452-1024x565.png 1024w, /uploads-archive/2015/12/db01c3dcf3b320ce19f534c6e2d98452-228x126.png 228w, /uploads-archive/2015/12/db01c3dcf3b320ce19f534c6e2d98452.png 1915w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

git-logo.jpg

git diffをvimdiffで表示する

<p>和風なwebサイトの場合、縦書きのデザインをすると思います。<br />
以下のサイトなんかも縦書きレイアウトをデザインを取り入れています。<br />
グッと和風感がでますよね！！</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8838" src="/uploads-archive/2015/12/79fd808a494939fc6983e2199d1678181-851x1024.jpg" alt="" width="630" height="758" srcset="/uploads-archive/2015/12/79fd808a494939fc6983e2199d1678181-851x1024.jpg 851w, /uploads-archive/2015/12/79fd808a494939fc6983e2199d1678181-249x300.jpg 249w, /uploads-archive/2015/12/79fd808a494939fc6983e2199d1678181-228x274.jpg 228w, /uploads-archive/2015/12/79fd808a494939fc6983e2199d1678181.jpg 1151w" sizes="(max-width: 630px) 100vw, 630px" /><br />
<a class="link" href="http://www.miyama-sansou.com/" target="_blank">深山山荘オフィシャルサイト</a></p>
<p>縦書きの表現は、画像か１つずつ文字をspanかなんかで囲んでっていうのが定石だったのですが、CSS3で簡単に縦書きが出来るようになっています。<br />
(IEは独自の表現で出来るようです)</p>
<p>とりあえず、DEMOを作りましたので、そちらご覧ください。</p>
<p><a class="demo" href="/demo/abe/64/" target="_blank">DEMO</a></p>
<h2>解説</h2>
<p>基本的には本当に簡単です。</p>

		<div id="crayon-649540158e737118802378" 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;">
.test{
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode:vertical-rl;
}</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-649540158e737118802378-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158e737118802378-2">2</div><div class="crayon-num" data-line="crayon-649540158e737118802378-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158e737118802378-4">4</div><div class="crayon-num" data-line="crayon-649540158e737118802378-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540158e737118802378-1"><span class="crayon-k ">.test</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158e737118802378-2"><span class="crayon-h">	</span><span class="crayon-e ">writing-mode</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">vertical-rl</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158e737118802378-3"><span class="crayon-h">	</span><span class="crayon-e ">-ms-writing-mode</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">tb-rl</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158e737118802378-4"><span class="crayon-h">	</span><span class="crayon-e ">-webkit-writing-mode</span><span class="crayon-sy">:</span><span class="crayon-i ">vertical-rl</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158e737118802378-5"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>とするだけで縦書きになります。<br />
IEの場合は少し違うのでご注意を。<br />
上記の書き方だと、行は右から左へと流れます。</p>
<p>ちなみにIE9以上から対応しているようですが、<br />
僕の環境ではVirtualBoxのIE8でも確認出来たのですが、DeveloperToolなので信用しないほうがいいかもしれません。</p>
<h2>補足</h2>
<p>縦書きにした場合、真ん中に寄せるのは、<strong>text-align</strong>でも<strong>vertical-align</strong>でも無理っぽい感じでした。</p>
<p>marginをかけたい場合は画面上で見た通り、左側であれば<strong>margin-left</strong>、右側であれば<strong>margin-right</strong>、でOKでした。</p>

CSSだけで縦書きを表現する

<p>商品画像を作成する際にCG画像を作成する事がありました。</p>
<p>after effects CCに付属しているcinema4D liteでどこまでできるかやってみました。基本的にcinema4D liteは映像制作で用いるためのものなのですが、単純で尚且つ画質の高さを求められないのであればある程度使えるかなと、正規版を購入するとかなり高いので、liteでどこまで使えるのか試してみました。</p>
<p>結果を先に言ってしまうと、フォトリアルな画像の作成は難しいとう事が分かりました。そもそも、フォトリアルな画像作るために必須のGI（グローバルイルミネーション)が使えないという事でした。</p>
<p>cinema4Dのグレードから言えば、primeでさえもGIが最近のバージョンでやっと使えるようになったばかりという事で、無料のLiteでは、なかなかそこまでの機能を提供していないようです。</p>
<p>&nbsp;</p>
<p>liteではやはり無理という事で、broadcastのバージョンを使用して違いを見てます。</p>
<h3>GI（グローバルイルミネーション）なし</h3>
<p><a href="/uploads-archive/2015/12/11.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8814" src="/uploads-archive/2015/12/11.jpg" alt="1" width="640" height="431" srcset="/uploads-archive/2015/12/11.jpg 640w, /uploads-archive/2015/12/11-300x202.jpg 300w, /uploads-archive/2015/12/11-228x154.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<h3>GI（グローバルイルミネーション）あり</h3>
<p><a href="/uploads-archive/2015/12/31.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8818" src="/uploads-archive/2015/12/31.jpg" alt="3" width="640" height="434" srcset="/uploads-archive/2015/12/31.jpg 640w, /uploads-archive/2015/12/31-300x203.jpg 300w, /uploads-archive/2015/12/31-228x155.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>上下の画像を見比べてみるとオブジェクトの質感や影の感じから下の方がリアルに見えるのではないでしょうか。</p>
<p>実写との合成を見比べてみるとさらによくわかります。</p>
<h3>GI（グローバルイルミネーション）なし</h3>
<p><a href="/uploads-archive/2015/12/41.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8834" src="/uploads-archive/2015/12/41.jpg" alt="4" width="640" height="508" srcset="/uploads-archive/2015/12/41.jpg 640w, /uploads-archive/2015/12/41-300x238.jpg 300w, /uploads-archive/2015/12/41-228x181.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<h3>GI（グローバルイルミネーション）あり</h3>
<p><a href="/uploads-archive/2015/12/51.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8836" src="/uploads-archive/2015/12/51.jpg" alt="5" width="640" height="514" srcset="/uploads-archive/2015/12/51.jpg 640w, /uploads-archive/2015/12/51-300x241.jpg 300w, /uploads-archive/2015/12/51-228x183.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>GIは照明など光源から発生した光以外に、オブジェクト間の光の反射も計算するということなので、実写との合成では必須といっていいかもしれません。</p>
<p>ちなみ人間型のオブジェクトには光源が当たっていない状態です。</p>
<p><a href="/uploads-archive/2015/12/21.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8815" src="/uploads-archive/2015/12/21.jpg" alt="2" width="632" height="532" srcset="/uploads-archive/2015/12/21.jpg 632w, /uploads-archive/2015/12/21-300x253.jpg 300w, /uploads-archive/2015/12/21-228x192.jpg 228w" sizes="(max-width: 632px) 100vw, 632px" /></a></p>
<p>GIを使用する際にはレンダリング設定から特殊効果、グローバルイルミネーションを選択します。</p>
<p>細かい設定があり、適当にいじくりまわしてしまうとレンダリング時間が大幅に長くなったり、リアルさが欠如してしまったりするので、分からない場合はデフォルトで作業する事をオススメします。</p>
<p>&nbsp;</p>


GIでフォトリアルなCGを作る Cinema4Dliteでどこまでできるか

<p>画像加工の中でもWeb制作において<br />
使用頻度が高いであろうトリミングにフォーカスを当ててみました。</p>
<p>筆者自身はイラストレーターでもデザイナーでもないので<br />
あくまでデータの扱い方という側面で記載します。</p>
<h3>画像抽出におけるコツ</h3>
<div style="padding-left: 15px;">
  おおまかに分けると以下に集約されます。</p>
<ol>
<li>抽出したい画像の輪郭に対して内外の特徴を把握する</li>
<li>部分的に1が異なればパーツパーツに分けて捉える</li>
<li>内側と外側の特徴を差別化し、その差を作業レイヤーで強調する</li>
</ol>
<p>  文面では解りづらいと思うので<br />
  実例にて紹介していきます。
</p></div>
<h3>実例</h3>
<div style="padding-left: 15px;">
  今回はある程度トリミングのしやすい画像を選びました。<br />
  動物(モフモフ系)は毛の境が非常に高度なテクニックを要するので割愛です。</p>
<div id="attachment_8763" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/maneki5_pic1.jpg"><img aria-describedby="caption-attachment-8763" decoding="async" loading="lazy" src="/uploads-archive/2015/12/maneki5_pic1-300x200.jpg" alt="ターゲット元画像" width="300" height="200" class="size-medium wp-image-8763" srcset="/uploads-archive/2015/12/maneki5_pic1-300x200.jpg 300w, /uploads-archive/2015/12/maneki5_pic1.jpg 1024w, /uploads-archive/2015/12/maneki5_pic1-228x152.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8763" class="wp-caption-text">ターゲット元画像</p></div>
<p>  招き猫を抽出します。<br />
  背景はグレーのグラデーションがかかったホワイト系。ターゲットは金と黒。</p>
<p>  やることは「白はより白く、色味(金等)・黒はより濃くして差別化する」です。</p>
<p>  作業レイヤーを作って「自動選択」で大雑把に選択して選択範囲を2,3px縮小して反転。<br />
  その後、彩度をグッと上げると招き猫が怖い感じに強調されます。<br />
<div id="attachment_8773" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1.png"><img aria-describedby="caption-attachment-8773" decoding="async" loading="lazy" src="/uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1-300x169.png" alt="色味を強調" width="300" height="169" class="size-medium wp-image-8773" srcset="/uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1-300x169.png 300w, /uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1-1024x576.png 1024w, /uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1-228x128.png 228w, /uploads-archive/2015/12/1c53014bcd75f0263aa05357c3bb460a1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8773" class="wp-caption-text">色味を強調</p></div></p>
<p>  ここでのポイントは「背景はほぼ無彩色」です。<br />
  なので、ある程度選択範囲の中に背景が入っていてもターゲット(だけ)の色が変わります。</p>
<p>  次に、色味のあるところを濃く(暗く)して背景と更に差を作りましょう。<br />
  選択範囲とレイヤーはそのままで、「特定色域の選択」にて「レッド」「マゼンタ」などのブラック要素を増やしましょう。<br />
  　※ 絶対値のラジオボタンをONにしておくのがコツです。</p>
<div id="attachment_8774" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41.png"><img aria-describedby="caption-attachment-8774" decoding="async" loading="lazy" src="/uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41-300x169.png" alt="有彩色を濃くした" width="300" height="169" class="size-medium wp-image-8774" srcset="/uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41-300x169.png 300w, /uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41-1024x576.png 1024w, /uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41-228x128.png 228w, /uploads-archive/2015/12/b20cf8fdaa10802de93e522c5bfbe8c41.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8774" class="wp-caption-text">有彩色を濃くした</p></div>
<p>  ズームアップしてみるとこんな感じまでなりました。<br />
<div id="attachment_8775" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71.png"><img aria-describedby="caption-attachment-8775" decoding="async" loading="lazy" src="/uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71-300x169.png" alt="輪郭ズーム" width="300" height="169" class="size-medium wp-image-8775" srcset="/uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71-300x169.png 300w, /uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71-1024x576.png 1024w, /uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71-228x128.png 228w, /uploads-archive/2015/12/2fcec6eb1dc51bda96aca4874f5838c71.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8775" class="wp-caption-text">輪郭ズーム</p></div></p>
<p>  今度は逆に、背景のグレー寄りをホワイトよりにしましょう。<br />
  背景を自動選択でザックリ選択後、拡張2,3pxして「特定色域の選択」にて<br />
  ホワイト、グレーのブラック要素をマイナスします。さっきの逆です。<br />
<div id="attachment_8776" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921.png"><img aria-describedby="caption-attachment-8776" decoding="async" loading="lazy" src="/uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921-300x169.png" alt="背景をよりホワイトに" width="300" height="169" class="size-medium wp-image-8776" srcset="/uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921-300x169.png 300w, /uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921-1024x576.png 1024w, /uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921-228x128.png 228w, /uploads-archive/2015/12/daffd3ebbafd2ca2a8f57fa04eb904921.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8776" class="wp-caption-text">背景をよりホワイトに</p></div></p>
<p>  あとは最後の仕上げです。<br />
  輪郭部分を強調します。上述の方法を同じく範囲選択後、「アンシャープマスク」をかけます。<br />
  微調整は画像を見ながら、基本的に全ての設定値は「大きめ」で。<br />
<div id="attachment_8777" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1.png"><img aria-describedby="caption-attachment-8777" decoding="async" loading="lazy" src="/uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1-300x169.png" alt="エッジ強調" width="300" height="169" class="size-medium wp-image-8777" srcset="/uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1-300x169.png 300w, /uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1-1024x576.png 1024w, /uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1-228x128.png 228w, /uploads-archive/2015/12/b5f6655a675fd534ba7c148dfa9bcace1.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8777" class="wp-caption-text">エッジ強調</p></div></p>
<p>  最後に背景を選択します。<br />
  適当に「自動選択」後、必要に応じてギザギザをごまかすために「輪郭を滑らかに」1-2px,<br />
  輪郭をぼかす 1-2px した後で「選択範囲を反転」し、作業用に作ったレイヤーは削除して切り抜くだけです！</p>
<div id="attachment_8778" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661.png"><img aria-describedby="caption-attachment-8778" decoding="async" loading="lazy" src="/uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661-300x169.png" alt="切り抜かれた招き猫" width="300" height="169" class="size-medium wp-image-8778" srcset="/uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661-300x169.png 300w, /uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661-1024x576.png 1024w, /uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661-228x128.png 228w, /uploads-archive/2015/12/e316ad288dccb17726c717c53c39f8661.png 1920w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8778" class="wp-caption-text">切り抜かれた招き猫</p></div>
<p>  <div id="attachment_8771" style="width: 310px" class="wp-caption alignnone"><a href="/uploads-archive/2015/12/maneki5_pic1.png"><img aria-describedby="caption-attachment-8771" decoding="async" loading="lazy" src="/uploads-archive/2015/12/maneki5_pic1-300x200.png" alt="出来た画像" width="300" height="200" class="size-medium wp-image-8771" srcset="/uploads-archive/2015/12/maneki5_pic1-300x200.png 300w, /uploads-archive/2015/12/maneki5_pic1.png 1024w, /uploads-archive/2015/12/maneki5_pic1-228x152.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a><p id="caption-attachment-8771" class="wp-caption-text">出来た画像</p></div>
</div>
<h3>最後に</h3>
<div style="padding-left: 15px;">
  さまざまな画像があり、シーンに応じて使う技術は異なります。<br />
  似たような画像であれば「アクション」を使用することで<br />
  ボタン一つ＋微調整で済むでしょう。</p>
<p>  「クイックマスク」などを使わなくても出来てしまう<br />
  ちょっとした加工技術みっちょな紹介でした。
</p></div>


PhotoShopでの画像加工のコツ基礎編

nino-eye (2).jpg

マウスとタッチのイベントはHammer.jsが便利

CSSでボーダーのアニメーションを考えてみたけど・・・

Railsの開発環境を作る（１）

<p>LaTeXという数式等を綺麗に記述してくれる組版システムがあるのですが、それをHTML内で使用できないのかと思い調べたところ、MathJaxというJavaScriptのライブラリがあったので紹介致します。</p>
<h2>使い方</h2>
<p>使い方はとても簡単で、下記のスクリプトをヘッダーに記載するだけで、HTML内でLaTeXの数式記述が可能になります。</p>

		<div id="crayon-649540158dd84417733683" 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">MathJax使用方法</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;">
&lt;script type="text/x-mathjax-config"&gt;
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\$','\$']]}});
&lt;/script&gt;
&lt;script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"&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-649540158dd84417733683-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158dd84417733683-2">2</div><div class="crayon-num" data-line="crayon-649540158dd84417733683-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158dd84417733683-4">4</div><div class="crayon-num" data-line="crayon-649540158dd84417733683-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158dd84417733683-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-649540158dd84417733683-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/x-mathjax-config"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158dd84417733683-2"><span class="crayon-i">MathJax</span><span class="crayon-sy">.</span><span class="crayon-i">Hub</span><span class="crayon-sy">.</span><span class="crayon-e">Config</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-i">tex2jax</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-i">inlineMath</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">[</span><span class="crayon-s">'$'</span><span class="crayon-sy">,</span><span class="crayon-s">'$'</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">'\$'</span><span class="crayon-sy">,</span><span class="crayon-s">'\$'</span><span class="crayon-sy">]</span><span class="crayon-sy">]</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158dd84417733683-3"><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158dd84417733683-4"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span></div><div class="crayon-line" id="crayon-649540158dd84417733683-5"><span class="crayon-e ">src</span>=<span class="crayon-s">"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158dd84417733683-6"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2>デモ</h2>
<p><a class="demo" href="/demo/mizutani/01/">デモ</a></p>
<h2>補足</h2>
<p>MathJax以外にも、jsLaTeXというjQueryを使用し、数式の画像を生成してくれるものも存在するようです。</p>
<h2>参考</h2>
<p><a href="https://www.mathjax.org/">MathJax</a><br />
<a href="http://blog.dreasgrech.com/2009/12/jslatex-jquery-plugin-to-directly-embed.html">jsLaTeX</a></p>

MathJaxを利用して数式をページ内に記述する

住所内に含まれる郵便番号の一覧を取得する方法

<p>Photoshopのccを契約して月約1000円を支払って使用しておりますが、<br />
常に最新の機能が使えるので便利ですね！</p>
<p>今年の6月にCC2015がリリースされ、今使用している中で嬉しい機能を紹介したいと思います。</p>
<h2>レイヤースタイルの重ねがけ</h2>
<p>それは、レイヤースタイルの重ねがけです。</p>
<p>下の画像をご覧ください。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8547" src="/uploads-archive/2015/11/93b3934e28bbdee6a1aa4c1bfab16164.png" alt="スクリーンショット 2015-11-24 12.22.27" width="630" height="400" srcset="/uploads-archive/2015/11/93b3934e28bbdee6a1aa4c1bfab16164.png 861w, /uploads-archive/2015/11/93b3934e28bbdee6a1aa4c1bfab16164-300x190.png 300w, /uploads-archive/2015/11/93b3934e28bbdee6a1aa4c1bfab16164-228x145.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>レイヤースタイルを適用する際に出てくる画面ですが、<br />
「境界線」「シャドウ(内側)」「カラーオーバーレイ」「グラデーションオーバーレイ」「ドロップシャドウ」<br />
の横に「＋」があるのがわかりますでしょうか？</p>
<p>この「＋」がある項目は、追加することが出来るので重ねがけができるんです！！</p>
<p>例えば、境界線の場合ですがまずはシェイプを作って、<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-8550" src="/uploads-archive/2015/11/2d95b9fe74fef95601fa3c45aaec4a8e.png" alt="スクリーンショット 2015-11-24 12.22.51" width="630" height="496" srcset="/uploads-archive/2015/11/2d95b9fe74fef95601fa3c45aaec4a8e.png 745w, /uploads-archive/2015/11/2d95b9fe74fef95601fa3c45aaec4a8e-300x236.png 300w, /uploads-archive/2015/11/2d95b9fe74fef95601fa3c45aaec4a8e-228x180.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>レイヤースタイルのパネルを開き、境界線の横の「＋」を押します。<br />
すると、下に同じ境界線が追加されます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8553" src="/uploads-archive/2015/11/32dbaf6c184323bbbcda358799c91c23.png" alt="スクリーンショット 2015-11-24 12.23.42" width="630" height="398" srcset="/uploads-archive/2015/11/32dbaf6c184323bbbcda358799c91c23.png 880w, /uploads-archive/2015/11/32dbaf6c184323bbbcda358799c91c23-300x190.png 300w, /uploads-archive/2015/11/32dbaf6c184323bbbcda358799c91c23-228x144.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>そして2つの境界線にそれぞれ設定すると、</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8556" src="/uploads-archive/2015/11/2a637b516bc3e4e76239bdc836ea9acd.png" alt="スクリーンショット 2015-11-24 12.27.58" width="630" height="401" srcset="/uploads-archive/2015/11/2a637b516bc3e4e76239bdc836ea9acd.png 855w, /uploads-archive/2015/11/2a637b516bc3e4e76239bdc836ea9acd-300x191.png 300w, /uploads-archive/2015/11/2a637b516bc3e4e76239bdc836ea9acd-228x145.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-8558" src="/uploads-archive/2015/11/8ff5b5311e0e5b5a36946488b74e121a.png" alt="スクリーンショット 2015-11-24 14.34.20" width="630" height="521" srcset="/uploads-archive/2015/11/8ff5b5311e0e5b5a36946488b74e121a.png 681w, /uploads-archive/2015/11/8ff5b5311e0e5b5a36946488b74e121a-300x248.png 300w, /uploads-archive/2015/11/8ff5b5311e0e5b5a36946488b74e121a-228x188.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>このようにひとつのシェイプに境界線を二重にすることができました！<br />
もっと重ねることもできます！</p>
<p>以前は、2つレイヤー用意したり、一度ラスタライズしたり等々やらなければなりませんでしたが、<br />
随分と簡単に設定できます。</p>
<p>ひとつ残念なのが、作ったPSDを他のverで開くと、境界線がまったくなくなってしまう点です。<br />
せめて最初の一つはそのままで・・・とは思いますが仕方ないですね。。。</p>
<p><a class="link" href="https://blogs.adobe.com/creativestation/photoshop_cc_2015">新登場、メジャーアップデート Photoshop CC 2015年リリース | Adobe Creative Station</a></p>


PhotoshopのCC2015ではレイヤースタイルの重ねがけが出来る！

<p>youtubeに360度をアップできるようになり表現の幅はかなり広がりました(2015年3月）。Ricoh の Thetaなど、安価で入手できる全方位カメラも出ているので手軽に360度の映像を扱えるようになってきたと思います。</p>
<p><a href="https://theta360.com/ja/"><img decoding="async" loading="lazy" class="alignnone wp-image-8538" src="/uploads-archive/2015/11/theta-e1448341309228.jpg" alt="theta" width="344" height="233" /></a></p>
<p>とはいえ、どうやってアップすりゃいいの？という話ですが、そもそも全方位カメラをもっていない私は何とか他の方法はないものかと模索してみました。</p>
<h2>スマホで360度撮影　Photo Sphere</h2>
<p>そういえばAndroidのカメラに「Photo Sphere」ってあったなと思い出し、実際に撮影してみたところ一応全方位の画像ができました。</p>
<p>さすがに動画は難しくても画像なら何とかなりました。</p>
<p><a href="/uploads-archive/2015/11/Screenshot_2015-11-24-14-11-17.png"><img decoding="async" loading="lazy" class="alignnone wp-image-8539" src="/uploads-archive/2015/11/Screenshot_2015-11-24-14-11-17.png" alt="Screenshot_2015-11-24-14-11-17" width="273" height="485" srcset="/uploads-archive/2015/11/Screenshot_2015-11-24-14-11-17.png 1080w, /uploads-archive/2015/11/Screenshot_2015-11-24-14-11-17-169x300.png 169w, /uploads-archive/2015/11/Screenshot_2015-11-24-14-11-17-576x1024.png 576w, /uploads-archive/2015/11/Screenshot_2015-11-24-14-11-17-228x405.png 228w" sizes="(max-width: 273px) 100vw, 273px" /></a></p>
<p><a href="/uploads-archive/2015/11/11.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8541" src="/uploads-archive/2015/11/11.jpg" alt="1" width="640" height="320" srcset="/uploads-archive/2015/11/11.jpg 640w, /uploads-archive/2015/11/11-300x150.jpg 300w, /uploads-archive/2015/11/11-228x114.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>画像のファイル形式が特殊だったからこの時点でアウトなので少し緊張気味でファイル形式を確認してみると、何のことはないJPGでした。</p>
<p>youtubeには基本的に動画しかアップロードできませんので（スライドショーとしてアップする方法もあるようですが）、撮影した画像を動画編集ソフトのシーケンスに張り付けて、無難なmp4ファイルにしておきます。</p>
<p><a href="/uploads-archive/2015/11/21.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8544" src="/uploads-archive/2015/11/21.jpg" alt="2" width="640" height="350" srcset="/uploads-archive/2015/11/21.jpg 640w, /uploads-archive/2015/11/21-300x164.jpg 300w, /uploads-archive/2015/11/21-228x125.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<h2>youtubeに360度動画をアップするには</h2>
<p>続いてyoutubeに上げる動画をアップロードするわけですが、調べてみるとどうやら360度の動画である事をyoutubeに認識させてために、アップロードするファイルにメタデータを含ませてやる必要があるとの事でした。</p>
<p>なんかハードルがかなり高そうなイメージですが、youtubeがメタデータを追加するためのアプリケーションを提供していました。</p>
<p><a href="https://support.google.com/youtube/answer/6178631?hl=ja"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8545" src="/uploads-archive/2015/11/31.jpg" alt="3" width="640" height="391" srcset="/uploads-archive/2015/11/31.jpg 640w, /uploads-archive/2015/11/31-300x183.jpg 300w, /uploads-archive/2015/11/31-228x139.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>詳しいことはこちらを確認して下さい。https://support.google.com/youtube/answer/6178631?hl=ja</p>
<p><a href="/uploads-archive/2015/11/41.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8546" src="/uploads-archive/2015/11/41.jpg" alt="4" width="640" height="492" srcset="/uploads-archive/2015/11/41.jpg 640w, /uploads-archive/2015/11/41-300x231.jpg 300w, /uploads-archive/2015/11/41-228x175.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>まずは上のページから360Video Metadataをダウンロードしてアプリケーションを立ち上げます。</p>
<p>openから先ほど作成したmp4ファイルを開き、Sphericalにのみチェックを入れてSave asで保存し直します。</p>
<p>これで動画ファイルにメタデータを含めることができているはずです。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8548" src="/uploads-archive/2015/11/5.jpg" alt="5" width="640" height="409" srcset="/uploads-archive/2015/11/5.jpg 640w, /uploads-archive/2015/11/5-300x192.jpg 300w, /uploads-archive/2015/11/5-228x146.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>ここまできたら後はyoutubeでファイルをアップロードするだけです。動画の尺に応じて多少処理に時間がかかるようです。</p>
<p>実際にアップロードした動画がこちら。</p>
<p><iframe loading="lazy" width="640" height="640" src="//www.youtube.com/embed/gM-AJb1gXLo" allowfullscreen="allowfullscreen"></iframe></p>
<p>youtubeにアップロードした動画は他のサイトに埋め込んでも360度ぐりぐり回せるので物件紹介などに応用できそうです。</p>
<p>スマホでこちらのyoutubeを見てみるとさらに面白いと思います。オキュラスリフトで見るようなGoogle Cardboard用の仕様で見る事ができます。</p>


スマホのphoto sphereで撮影した画像をyoutubeにアップする方法

nino-eye1 (1).jpg

JavaScriptでCSSを操作する方法

<p><img decoding="async" src="/uploads-archive/2015/11/symfony2-300x103.png" alt="symfony2" width="80%"/></p>
<p>MySQLにはテーブルにデータを挿入した順番に値を付けてくれるauto_incrementという機能（PostgreSQLではserial、SQLServerではidentityと呼ばれる）があるのですが、<br />
Symfony2を使用している上でその値を取得する方法を記載します。</p>
<p>&nbsp;</p>
<h2>Symfony2を利用していない場合</h2>
<p>mysql_query();によるMySQLへのデータ登録後、下記のPHPあるいはMySQLの関数を利用する。</p>
<h3>PHPの関数</h3>
<p></p>

		<div id="crayon-649540158d73f432719506" 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">PHP</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;">
$auto_increment_id = mysql_insert_id();</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-649540158d73f432719506-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-649540158d73f432719506-1"><span class="crayon-v">$auto_increment_id</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">mysql_insert_id</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h3>MySQLの関数</h3>
<p></p>

		<div id="crayon-649540158d743961777036" 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">PHP</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;">
$auto_increment_id = last_insert_id();</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-649540158d743961777036-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-649540158d743961777036-1"><span class="crayon-v">$auto_increment_id</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">last_insert_id</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2>Symfony2を利用している場合</h2>
<p>実は、何もしなくてもSymfonyが勝手にやってくれています。<br />
Symfony2ではデータをテーブルに登録後（Symfony2の場合、flush();という関数を発行することで、自動的にクエリを送信してくれますが）、auto_incrementの値を自動的に取得し、Entityに持たせてくれています。<br />
なのでDB登録後、getId();等のアクセッサーを利用することで取得できます。<br />
とても分かりやすく、親切ですね。</p>
<p>しかし、最近Symfony2を使用し始めたこともあり、上記のことを知らず、auto_incrementの取得に若干苦労しました…。<br />
今後、精進致します。</p>

Symfony2で新規挿入されたデータのauto_incrementの値を取得する

<p>「TTS」って聞いた事があるような無いような感じですが、「Text To Speech」の略でテキストを音声にして読み上げてくれるシステムを指します。他には「合成音声」と言ったり、スピーチシンセサイザーなんて呼ぶ場合もあるようです。</p>
<p>おそらくTTSで検索すると為替に関する用語にもあるらしく、そちらが多く表示されるので「Text To Speech」で検索した方がいいかもしれません。</p>
<p>TTSについては数年前くらいから、youtubeでナレーションとして使用されたり、地上波でもバラエティ番組のナレーションに使われたりしています。最近はよく利用されているので珍しくもなくなりましたが、海外向けの動画を制作する場合にナレーションって英語で入れたら親切だなと思いちょっと調べてみました。</p>
<p>TTSは特殊なソフトウェアが必要そうなイメージですが、実はgoogle翻訳を利用すると簡単にできます。</p>
<p><a class="demo" href="http://translate.google.com/translate_tts?tl=ja&amp;q=%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89">demo</a></p>
<p><a class="demo" href="http://translate.google.com/translate_tts?tl=en&amp;q=sterfield">demo</a></p>
<p>上のdemoから開けるページで右クリックをすればMP3の音声ファイルとして保存する事ができます。</p>
<p>「<strong>http://translate.google.com/translate_tts?tl=ja&amp;q=</strong>」こちらがそのURLになりますが、最後=の後に、しゃべらせたい言葉を入力すればＯＫです。滑らかなTTSが多くなってくると、逆にこのぎこちなさが良く感じてきたりもします。</p>
<p>ちなみ「<strong>tl=ja</strong>」の部分を<strong>「tl=en」</strong>に変えてあげれば英語に変更できます。</p>
<p><a href="http://soundoftext.com/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8507" src="/uploads-archive/2015/11/1.jpg" alt="1" width="640" height="341" srcset="/uploads-archive/2015/11/1.jpg 640w, /uploads-archive/2015/11/1-300x160.jpg 300w, /uploads-archive/2015/11/1-228x121.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="http://soundoftext.com/">http://soundoftext.com/</a></p>
<p>こちらのサイトはgoogle翻訳を使ったTTSを使いやすくしてくれています。若干日本語入力にバグがあるかもしれませんが。</p>
<p>&nbsp;</p>
<h2>テレ東のバレエティ番組のナレーションで使われているアレ</h2>
<p><a href="http://www.oddcast.com/home/demos/tts/tts_example.php"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8509" src="/uploads-archive/2015/11/2.jpg" alt="2" width="528" height="564" srcset="/uploads-archive/2015/11/2.jpg 528w, /uploads-archive/2015/11/2-281x300.jpg 281w, /uploads-archive/2015/11/2-228x244.jpg 228w" sizes="(max-width: 528px) 100vw, 528px" /></a></p>
<p>こちらはTexr-to-Speechのデモ画面です。LanguageをJapaneseにして、VoiceをShouに、Effectはnoneのままでテキストを入力してみてください。</p>
<p>バラエティ番組のナレーションをして使用されているTTSの声でしゃべらせる事ができます。知っている方は「あっ、聞いた事がある」と思うはずです。</p>
<p>このデモ画面にあるリンク先では、写真などから２Ｄまたは3Dのキャラクターを作り、しゃべらせるというサービスを提供しているようです。</p>
<p><a href="/uploads-archive/2015/11/3.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8510" src="/uploads-archive/2015/11/3.jpg" alt="3" width="640" height="657" srcset="/uploads-archive/2015/11/3.jpg 640w, /uploads-archive/2015/11/3-292x300.jpg 292w, /uploads-archive/2015/11/3-228x234.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="http://www.sitepal.com/">http://www.sitepal.com/</a></p>
<h2>最新のTTSは感情も表現できる</h2>
<p>メガネメーカーのイメージが強いHOYAですが、意外にもグループ会社の中にはTTSのサービスを提供している会社があります、その名もHOYAサービス株式会社。こちらで提供しているのが<strong><a href="http://voicetext.jp/">VOICE TEXT</a></strong>というサービスです。</p>
<p>どうやら先ほど上で紹介したバラエティ番組のナレーションについてもHOYAサービスで開発されたようです。気になる方はこちらに詳しく書いてあります。<a href="http://voicetext.jp/show/">http://voicetext.jp/show/</a></p>
<p>VOICE TEXTのでもページを見てみると、話し方にかなり自然で聞き取りやすい印象を受けます。</p>
<p>さらに新しい取り組みとして公開されていたのは、なんと感情を表現できるというものです。</p>
<p><a href="http://voicetext.jp/voicetextlab/"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-8511" src="/uploads-archive/2015/11/4.jpg" alt="4" width="640" height="472" srcset="/uploads-archive/2015/11/4.jpg 640w, /uploads-archive/2015/11/4-300x221.jpg 300w, /uploads-archive/2015/11/4-228x168.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>まだ試作段階のようですが、デモページで実際に試してみると、確かに感情が伝わってきます。今後、開発がさらに進めば、本当の人間が話しているのか、TTSなのかわからなくなるかもしれません。</p>
<p>知り合いのナレーターさんとTTSについて話した事が以前ありましたが、かなり戦々恐々としていました。その方は独特の声をお持ちなのですが、一度声をサンプリングしてしまえば、自分がいなくてもナレーションができてしまうと言っていました。そうなると、有名なナレーターが声を一般に売るという時代が来るかもしれません。</p>
<p>ちょっと話が飛躍してしまいましたが、今後期待の持てる分野です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


意外と知らないTTSの世界

<p>facebookのいいねボタンをサイトに設置することはもうお決まりのようなパターンになっております。</p>
<p>お決まりのソースを手元に用意してありますが、たまにちゃんとfacebookdeveloperからコードを取得してくることがあります。</p>
<p>そこで、最新のコードをゲットして使用したら、<br />
お客さんに「いいねボタンを押したら変な風になる」を言われました。</p>
<p>今までは押すと、数字が触れてキャンセルできるよう✕マークが表示される感じでしたが、<br />
最新のものは、押すと、shareボタンみたいに、ボックスが表示されコメントを記入することが出来るようになっています。<br />
(URLがよろしくない場合や設定されてない場合、一度「確認」という表示に代わり、確認を押すと「いいね」か「キャンセル」を選択するようになってます)</p>
<p>そして、大きく変わったのは取得するコードが一択になったところです。<br />
下の画像を見ると、今までiframeとかなんやら選択出来たんですが、それがありません。</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-8461" src="/uploads-archive/2015/11/22ad233a73b61d62a6d557939a55f65d.png" alt="スクリーンショット 2015-11-17 14.29.38" width="626" height="464" /></p>
<p>facebookはどんどん仕様が新しくなっていきますね！</p>
<h2>バージョンの注意</h2>
<p>今までのいいねボタンですと、そのうち使えなくなってしまうので注意が必要です！</p>
<p>facebookのバージョン管理のルールでは、<br />
バージョンが次のバージョンが出てから2年後に期限が切れてしまうようです。</p>
<blockquote><p>2014年4月30日にAPIバージョン2.0がリリースされ、2014年5月30日にAPIバージョン2.1がリリースされる場合、v2.1のリリースから2年後の2016年5月30日にv2.0の期限が切れます。</p></blockquote>
<p>詳しくは下記URLで。<br />
<a href="https://developers.facebook.com/docs/apps/versions?locale=ja_JP" target="_blank">Facebook Platform Versioning &#8211; App Development</a></p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-8463" src="/uploads-archive/2015/11/0957865e9e0ce58822f517120483a768.png" alt="スクリーンショット 2015-11-17 14.38.50" width="633" height="231" /></p>
<p>やっかいなことにバージョンは勝手に判断してもらえるものではなく、指定していないとダメらしく、<br />
バージョン指定がないと、ver1と判断されてしまいます(たぶん。。。)</p>
<p>なのでまだ今のままのいいねボタンがいいという人は、取り急ぎバージョン指定をすることをお薦めします！！</p>
<p>弊社サイトで仕様していたコードを以下に貼ります。<br />
hrefのところはwordpressのタグのままなので任意のものに変更してください。</p>
<p>以前の場合、</p>

		<div id="crayon-649540158d554162522802" 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;iframe src="http://www.facebook.com/plugins/like.php?href=&lt;?php the_permalink(); ?&gt;&amp;amp;layout=button_count&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;height=21&amp;amp;width=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; width:105px;" allowtransparency="true"&gt;&lt;/iframe&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-649540158d554162522802-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-649540158d554162522802-1"><span class="crayon-r ">&lt;iframe </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"http://www.facebook.com/plugins/like.php?href=<span class="crayon-ta">&lt;?php</span><span class="crayon-h"> </span><span class="crayon-e">the_permalink</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-ta">?&gt;</span>&amp;amp;layout=button_count&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;height=21&amp;amp;width=90"</span><span class="crayon-h"> </span><span class="crayon-e ">scrolling</span>=<span class="crayon-s ">"no"</span><span class="crayon-h"> </span><span class="crayon-e ">frameborder</span>=<span class="crayon-s ">"0"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span>=<span class="crayon-s ">"border:none; overflow:hidden; height:21px; width:105px;"</span><span class="crayon-h"> </span><span class="crayon-e ">allowtransparency</span>=<span class="crayon-s ">"true"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/iframe&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>バージョンを記入した場合、</p>

		<div id="crayon-649540158d559904714560" 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;iframe src="http://www.facebook.com/v2.0/plugins/like.php?href=&lt;?php the_permalink(); ?&gt;&amp;amp;layout=button_count&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;height=21&amp;amp;width=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; width:105px;" allowtransparency="true"&gt;&lt;/iframe&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-649540158d559904714560-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-649540158d559904714560-1"><span class="crayon-r ">&lt;iframe </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"http://www.facebook.com/v2.0/plugins/like.php?href=<span class="crayon-ta">&lt;?php</span><span class="crayon-h"> </span><span class="crayon-e">the_permalink</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-ta">?&gt;</span>&amp;amp;layout=button_count&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;height=21&amp;amp;width=90"</span><span class="crayon-h"> </span><span class="crayon-e ">scrolling</span>=<span class="crayon-s ">"no"</span><span class="crayon-h"> </span><span class="crayon-e ">frameborder</span>=<span class="crayon-s ">"0"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span>=<span class="crayon-s ">"border:none; overflow:hidden; height:21px; width:105px;"</span><span class="crayon-h"> </span><span class="crayon-e ">allowtransparency</span>=<span class="crayon-s ">"true"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/iframe&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ちなみに、弊社のサイトでは最新のコードを貼り付けているので、ぜひ押してみてください！<br />
(とはいえ、「確認」という表示に変わるかと思いますが・・・)</p>

facebookのいいねボタンの挙動が変わった(version2.5)

<p>ツイッターで企業アカウントがフォロワーを増やすときに注意すべき点をまとめました。</p>
<h2>【王道】フォロワーを増やす方法</h2>
<p>フォロワーを増やす方法について、ジャーナリストの津田大介氏は著書の中で以下のように述べています。</p>
<blockquote>
<p>       １ 自分自身がツイッターでフォローを増やす<br />
       ２ 有用な情報を発信することによってフォロワーに貢献する<br />
       ３ 自分の日常の様子やアイデアを書いて自身についても興味を持ってもらう<br />
       ４ それをくり返す</p>
<p>    （津田大介著『<a href="http://www.amazon.co.jp/%E3%82%B4%E3%83%9F%E6%83%85%E5%A0%B1%E3%81%AE%E6%B5%B7%E3%81%8B%E3%82%89%E5%AE%9D%E7%9F%B3%E3%82%92%E8%A6%8B%E3%81%A4%E3%81%91%E5%87%BA%E3%81%99-%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E3%81%AE%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E8%88%AA%E6%B5%B7%E8%A1%93-PHP%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9%E6%96%B0%E6%9B%B8-%E6%B4%A5%E7%94%B0-%E5%A4%A7%E4%BB%8B/dp/4569816738">ゴミ情報の海から宝石を見つけ出す これからのソーシャルメディア航海術</a>』）
</p></blockquote>
<p>正論です。<br />
ですが、実際それがすんなりできたら苦労はないわけです。</p>
<p>とくに、企業アカウントの場合は個人が趣味として楽しく運営するのとは違いますから、ある程度短期間で最大限の効果を発揮することが求められ、焦った担当者は安易にフォロワーを増やす愚策に走りがちです。</p>
<h2>【邪道】フォロワーを増やす方法</h2>
<p>有用な投稿をしてアカウントをじっくり育てる…という正当な過程をショートカットしようとする人はだいたいフォロー返しを期待して、自分のアカウントに興味がありそうな人をたくさんフォローしていきます。</p>
<p>もちろん、これ自体は違法なことではないですし、邪道というのは言い過ぎかもしれません。むしろツイッターを開始した初期に行う方法としてはおかしいものではありません。</p>
<p>しかし、フォロワー数に比べてあまりにフォロー数が多い場合、ツイッター社のからストップがかけられることになります。</p>
<h2>過剰フォローに対するルール</h2>
<p>ツイッター社の公式サイトには以下のように過剰フォローに対してのルールを定めています。</p>
<blockquote><p>
フォローできるユーザー数に上限はありません。ただし、他のユーザーを過剰にフォローしているユーザーがいるかどうかは常に確認しています。制限は、妥当な利用を妨げるようなことはなく、ほとんどのユーザーには影響しません。</p>
<p>Twitterでは、過剰なフォローおよびフォローチャーン (大量ユーザーのフォローとフォロー解除を繰り返す行為) がないかを確認するため、すべてのアカウントを注視しています。</p>
</blockquote>
<p>ですが、一日に何人フォローしたら凍結されるか…という明確な数字は公式サイトには記載されていません。</p>
<p>そのため、ネット上にはさまざまな憶測が飛び交っていますが、2015年現在、さまざまなサイトで紹介されている有力な数字はこちらになります。</p>
<blockquote><p>
    フォロワーが100人以下の場合：1日50フォローまで<br />
    フォロワーが100人～1000人の場合：1日100フォローまで<br />
    フォロワーが1000人以上の場合：1日300フォローまで<br />
    フォロワーが10000人以上の場合：1日500フォローまで
</p></blockquote>
<p>＜参考＞<br />
<a href="http://afidou.com/afi/859">twitterのフォロワー数を増やす上で重要な「フォロー数制限」</a><br />
<a href="http://affiliate-jpn.com/archives/2777">Twitterアカウントが凍結される18の理由＋凍結の解除法教えます。</a><br />
<a href="http://internet.watch.impress.co.jp/docs/news/20151028_727842.html">Twitter、フォロー数の制限を5000件に拡大、全ユーザーに適用 </a></p>
<p>ただ、この上限にびくびくしながらフォロー＆リムーブを繰り返すのもカッコ悪いですよね。</p>
<h2>最後に…</h2>
<p>ツイッター公式サイトでは、アカウントの規制についての記事の最後を以下のように結んでいます。</p>
<blockquote>
<p><strong>フォロワーを増やすには？</strong></p>
<p>Twitterはフォロワー獲得競争の場ではありません。興味のあるユーザーをフォローし、意味のあるツイートをしていれば、正当なユーザーがあなたを見つけ、ツイートを読んでくれるようになります。Twitterのユーザーは、自分の興味のある更新情報を読むために他のユーザーをフォローします。過度なフォローとフォロー解除は他のユーザーにとってわずらわしいものであり、すべてのユーザーにとってTwitter利用が後味の悪いものとなってしまいます。</p></blockquote>
<p>はーい！</p>
<p>僕も地道にがんばります！</p>
<p>            <a class="twitter-timeline"  href="https://twitter.com/CompeNavi" data-widget-id="666500548162547713">@CompeNaviさんのツイート</a><br />
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2015/12/09

2015/12/09

2015/12/09

2015/12/09

2015/12/09

2015/12/08

2015/12/03

2015/12/03

2015/12/03

2015/11/25

2015/11/25

2015/11/24

2015/11/24

2015/11/18

2015/11/18

2015/11/18

2015/11/17

2015/11/17