<p><a href="/designer/javascript%E3%81%A7%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%82%92%E7%B5%84%E3%82%80.html">前回</a>JavaScriptのprototypeを使ってオブジェクト指向のプログラムを組む方法についてご紹介しましたが、</p>
<p>今回は、実際にprototypeを使ってオブジェクトを作ってみました。</p>
<p>&nbsp;</p>
<p>↓作ってみたもの</p>
<p><a class="demo" href="/demo/ninomiya/92/">DEMO</a></p>
<p>&nbsp;</p>
<h2>作ってみたものの概要</h2>
<p></p>

		<div id="crayon-64954015905ed606463937" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">JavaScript</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></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;">
//コンストラクトを定義
setBgImage = function (selector) {
    this.element = document.querySelector(selector);
    this.selector = selector;
    this.init(); //デフォルトで実行する関数の指定
};

//メソッドを定義
setBgImage.prototype = {
    getSrc: function() {
      return this.element.getAttribute('data-bgimg');
    },
    init: function() { //デフォルトで実行する関数の定義
      this.element.style.backgroundImage = "url(" + this.getSrc() + ")";
    }
};

//インスタンスの作成
var setBgImage1 = new setBgImage(".imageArea.first");
var setBgImage2 = new setBgImage(".imageArea.second");
var setBgImage3 = new setBgImage(".imageArea.last");

//各インスタンスでのメソッドの利用
setBgImage1.element.innerHTML = setBgImage1.getSrc();
setBgImage2.element.innerHTML = setBgImage2.selector;</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-64954015905ed606463937-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-2">2</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-4">4</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-6">6</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-8">8</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-10">10</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-12">12</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-14">14</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-16">16</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-18">18</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-20">20</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-22">22</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015905ed606463937-24">24</div><div class="crayon-num" data-line="crayon-64954015905ed606463937-25">25</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-64954015905ed606463937-1"><span class="crayon-c">//コンストラクトを定義</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-2"><span class="crayon-i">setBgImage</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i">selector</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-i">element</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">document</span><span class="crayon-sy">.</span><span class="crayon-e">querySelector</span><span class="crayon-sy">(</span><span class="crayon-i">selector</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-i">selector</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">selector</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">init</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//デフォルトで実行する関数の指定</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-6"><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-7">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-8"><span class="crayon-c">//メソッドを定義</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-9"><span class="crayon-i">setBgImage</span><span class="crayon-sy">.</span><span class="crayon-i">prototype</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">getSrc</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-i">element</span><span class="crayon-sy">.</span><span class="crayon-e">getAttribute</span><span class="crayon-sy">(</span><span class="crayon-s">'data-bgimg'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">init</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">//デフォルトで実行する関数の定義</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-i">element</span><span class="crayon-sy">.</span><span class="crayon-i">style</span><span class="crayon-sy">.</span><span class="crayon-i">backgroundImage</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"url("</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">getSrc</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-s">")"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-16"><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-17">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-18"><span class="crayon-c">//インスタンスの作成</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-19"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">setBgImage1</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">setBgImage</span><span class="crayon-sy">(</span><span class="crayon-s">".imageArea.first"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-20"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">setBgImage2</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">setBgImage</span><span class="crayon-sy">(</span><span class="crayon-s">".imageArea.second"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-21"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">setBgImage3</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">setBgImage</span><span class="crayon-sy">(</span><span class="crayon-s">".imageArea.last"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-22">&nbsp;</div><div class="crayon-line" id="crayon-64954015905ed606463937-23"><span class="crayon-c">//各インスタンスでのメソッドの利用</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015905ed606463937-24"><span class="crayon-i">setBgImage1</span><span class="crayon-sy">.</span><span class="crayon-i">element</span><span class="crayon-sy">.</span><span class="crayon-i">innerHTML</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">setBgImage1</span><span class="crayon-sy">.</span><span class="crayon-e">getSrc</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015905ed606463937-25"><span class="crayon-i">setBgImage2</span><span class="crayon-sy">.</span><span class="crayon-i">element</span><span class="crayon-sy">.</span><span class="crayon-i">innerHTML</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">setBgImage2</span><span class="crayon-sy">.</span><span class="crayon-i">selector</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>今回作ってみたものは、CSSのセレクターの形式で指定された要素で、</p>
<p>data-bgimgで指定された画像をスタイルの背景画像に適用するというものです。</p>
<p>&nbsp;</p>
<p>無条件でインスタンス作成時に実行する関数はコンストラクタ内にinit()として実行しており、</p>
<p>その中で、スタイルを設定しています。</p>
<p>必要に応じてgetSrc()などを実行できるようにしています。</p>

JavaScriptのprototypeを使ったオブジェクトを作ってみよう

<h2>一眼って必要ない？？</h2>
<p>インタビュー取材にでかけるとき、一人でインタビュアーとカメラマンの二役をしなければいけないときがあります。</p>
<p>カメラマンに同行してもらえるときは、僕がインタビューしている間にカッコよく一眼レフでバチバチ撮ってもらえていいのですが、一人取材でカメラマンの役割も自分がやらなければいけないときは少し困ったことになります。</p>
<p>なぜなら一眼レフカメラが使えないからです。</p>
<p>カメラの練習をすべきだとは常々思っているのですが、カメラが好きな人に「一眼で撮るコツとかありますかね」と聞くと、きまって返されるこの言葉。</p>
<p><strong>でも、いまのiphoneって一眼よりいいですよ</strong></p>
<p>つまり、慣れない一眼使ってピンボケ連発するくらいなら黙ってケータイで写メっとけ！　ということです。</p>
<h3>実際、海外の新聞社では…</h3>
<p>ですが、実際のところ昨今のスマホの画質と機動力を取り入れる動きはオールドメディアにもあり、スイスのあるテレビ局では下記のような試みを行っているようです。</p>
<p><a href="http://gigazine.net/news/20151002-switzerland-tv-use-iphone/" target="_blank">テレビカメラを全て「iPhone 6」に置き換えることに決定したスイスのテレビ局、実際の取材風景はこんな感じ</a></p>
<p>&nbsp;</p>
<h2>iphoneで一眼並みのぼけ写真がつくれるTadaa SLR</h2>
<p>ここから本題なのですが、「　iphone　」　　「　一眼　」　というキーワードで検索していたら、<strong>iphoneで撮った写真を一眼ぽくあとで加工するアプリ</strong>というものを見つけました。</p>
<p>ちなみにここでの「一眼ぽく」というのは非常に短絡的ですが、背景がボケているかどうかです。</p>
<p>&nbsp;</p>
<h3>社内で練習しました</h3>
<p>S田さんに被写体になってもらって加工していきます。</p>
<p>これは元画像。S田さんも背景もばっちりピントが合っています。</p>
<p><a href="/uploads-archive/2016/01/IMG_92231-e1452587249577.jpg" rel="attachment wp-att-9168"><img decoding="async" loading="lazy" class="alignnone wp-image-9168 size-large" src="/uploads-archive/2016/01/IMG_92231-e1452587249577-768x1024.jpg" alt="IMG_9223[1]" width="768" height="1024" srcset="/uploads-archive/2016/01/IMG_92231-e1452587249577-768x1024.jpg 768w, /uploads-archive/2016/01/IMG_92231-e1452587249577-225x300.jpg 225w, /uploads-archive/2016/01/IMG_92231-e1452587249577-228x304.jpg 228w" sizes="(max-width: 768px) 100vw, 768px" /></a></p>
<p>詳しい使い方はほかに方に譲るとしまして。。</p>
<p><a href="http://www.appbank.net/2013/11/23/iphone-application/703078.php" target="_blank">iPhoneで撮った写真を一眼レフカメラで撮った写真のようにできるカメラアプリ。</a></p>
<p><a href="http://rezv.net/apli-review/3346/" target="_blank">一眼レフ並みの背景ボケ写真が撮れるTadaa SLR【使い方解説】</a></p>
<p>&nbsp;</p>
<p>私が加工した写真はこちらです。</p>
<p><a href="/uploads-archive/2016/01/IMG_92251-1.jpg" rel="attachment wp-att-9180"><img decoding="async" loading="lazy" class="alignnone wp-image-9180 size-large" src="/uploads-archive/2016/01/IMG_92251-1-768x1024.jpg" alt="IMG_9225[1]" width="768" height="1024" srcset="/uploads-archive/2016/01/IMG_92251-1-768x1024.jpg 768w, /uploads-archive/2016/01/IMG_92251-1-225x300.jpg 225w, /uploads-archive/2016/01/IMG_92251-1-228x304.jpg 228w, /uploads-archive/2016/01/IMG_92251-1.jpg 1536w" sizes="(max-width: 768px) 100vw, 768px" /></a></p>
<p>いい感じにボケてますよねっ？！</p>
<p>操作も簡単で、慣れたら10秒でできそうです。</p>
<h2>残る葛藤…。そう、iphoneならね。</h2>
<p>もう、これでいいでしょ～という思いと同時に、このような感じでお手軽に「一眼ぽさ」が再現できてしまうと、いったい「一眼とはなにか」とか、「写真とはなにか」という問いも生まれます。</p>
<p>あと、この方法の一番のネックは、被写体に対して恰好がつかない、ということです。</p>
<p>iphoneの画質が良すぎるために生まれるこの葛藤。どうしましょうかね。<br />
&nbsp;</p>


インタビューの撮影ってiphoneでよくない？？

<h2>IE10以前はもう古い！？</h2>
<div style="padding-left: 15px;">
  Web屋の鬼門(？)のIEのサポート状況が大きく変わりました。</p>
<p>  サポートが終了すると何が変わるのか？<br />
  、、、と言いますと、公式から配布されていた<br />
  セキュリティ脆弱性対策バッチが今後なくなる。</p>
<p>  つまり脆弱性をついたスクリプトに対して無防備となってしまうと言う事です。
</p></div>
<h2>各OS別 サポート状況まとめ</h2>
<div style="padding-left: 15px;">
  Windows Vista : IE7, IE8 ともに2016年1月13日で終了。IE9は2017年4月12日に終了。<br />
  Windows 7 : IE8, IE9, IE10 ともに2016年1月13日で終了。IE11は2020年1月15日に終了。<br />
  Windows 8 : OSそのものが2016年1月13日にてサポート終了。<br />
  Windows 8.1 : IE11 のみ。2023年1月11日に終了。<br />
  Windwos 10 : IE11 2025年10月15日に終了。(MS Edgeと同じ)</p>
<p>  ※ その他Windows Serverなどについては<a href="http://www.atmarkit.co.jp/ait/articles/1503/11/news134.html">こちら</a>参照のこと
</div>
<h2>総評</h2>
<div style="padding-left: 15px;">
  未だにシステム移管などのコスト節減のために旧システムを<br />
  使用したままの企業やコンシューマーが多いのが現状。</p>
<p>  しかしセキュリティ面やブラウザでの新機能／汎用性の高いサービス向上のため<br />
  適度なシステム移行が好ましいと感じられた。</p>
<p>  ※ ただし新システム移行を無理強いするのはその限りではない。
</p></div>


ブラウザ事情の変化

<p>とあるSIMフリーのAndroid端末を既存の標準ROMから有志によって公開されているカスタムROMに書き換えるということをやってみました。</p>
<p>自分でも不思議なのですが、その上に乗っかるソフトウェアというのは興味が薄くて、ハードウェアが大好きです。</p>
<p>この感覚何が近いのかと考えていたのですが、小さいころに周りの人よりも異様にプラモデルが好きで100個くらいは持っていました。</p>
<p>そういう何かを自分の手で組み立てるというのが好きなんだと思います。</p>
<p>ここで、SIMフリー端末と書かせて頂いたのは、昨今のキャリアで販売されている端末はほとんどが多重の防止機構が施されており、今回紹介するようなことが出来ないからです。</p>
<p>さてさて軽く前提から紹介して行きます。</p>
<h2>カスタムROMのメリット・デメリット</h2>
<h3>メリット</h3>
<ul>
<li>メーカーがROMの提供を停止しているような古い端末でも有志によって作られていれば最新OSを利用できる。</li>
<li>Androidピュアな状態であるため、余計なアプリが入っていなかったり、動作を軽快にするようチューニングされている。</li>
</ul>
<h3>デメリット</h3>
<ul>
<li>開発者やバージョンによっては不安定。最悪起動しなくなるリスクも。</li>
<li>全てのメーカー保証から外れる。</li>
</ul>
<p>全て自己責任ということで、日本のメーカーはこういったことが起こらないし、させないようにロックを掛けているものだと思います。</p>
<h2>カスタムROMを焼くまでのステップ</h2>
<p><a href="/officer/sim%e3%83%95%e3%83%aa%e3%83%bc%e7%ab%af%e6%9c%ab%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0rom%e3%82%92%e7%84%bc%e3%81%84%e3%81%a6%e3%81%bf%e3%81%9f.html/attachment/600px-bootloader_simplified" rel="attachment wp-att-9167"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9167" src="/uploads-archive/2016/01/600px-Bootloader_simplified-300x114.png" alt="600px-Bootloader_simplified" width="300" height="114" srcset="/uploads-archive/2016/01/600px-Bootloader_simplified-300x114.png 300w, /uploads-archive/2016/01/600px-Bootloader_simplified-228x86.png 228w, /uploads-archive/2016/01/600px-Bootloader_simplified.png 600w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>最初に上図を理解しておくと分かりやすいです。</p>
<p>Androidの仕組みが最初にBootLoaderという領域が立ち上がりROMを読み込ます。</p>
<p>通常、一番左のBootLoaderという領域がロックされており、一方通行でROMの読み込みまで行きますが、まず、このBootLoaderをアンロックし、Recovery領域に入り、Recovery領域からROMを書き換えるというのが基本的な手順になります。</p>
<p>アプリ経由だったり、PCと接続する専用ツールだったりさまざまなやり方があるのですが、メジャーなやり方を一通り駆使やりました。</p>
<p>androidlover.netさんの記事を参考にさせて頂きましたが、Nexus5ではなくてもコマンドなどは一緒です。</p>
<p>&nbsp;</p>
<ol>
<li><a href="/officer/%e3%81%84%e3%82%8d%e3%81%84%e3%82%8d%e3%81%aa%e8%83%bd%e5%8a%9b%e3%83%94%e3%83%a9%e3%83%9f%e3%83%83%e3%83%89.html/attachment/imgb8ae27c0zik2zj" rel="attachment wp-att-8921"><br />
</a> <a href="/officer/sim%e3%83%95%e3%83%aa%e3%83%bc%e7%ab%af%e6%9c%ab%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0rom%e3%82%92%e7%84%bc%e3%81%84%e3%81%a6%e3%81%bf%e3%81%9f.html/attachment/img_20150202_202521-2" rel="attachment wp-att-9173"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9173" src="/uploads-archive/2016/01/IMG_20150202_202521-171x300.jpg" alt="IMG_20150202_202521" width="171" height="300" srcset="/uploads-archive/2016/01/IMG_20150202_202521-171x300.jpg 171w, /uploads-archive/2016/01/IMG_20150202_202521-768x1347.jpg 768w, /uploads-archive/2016/01/IMG_20150202_202521-584x1024.jpg 584w, /uploads-archive/2016/01/IMG_20150202_202521-228x400.jpg 228w, /uploads-archive/2016/01/IMG_20150202_202521.jpg 1824w" sizes="(max-width: 171px) 100vw, 171px" /></a><br />
ブートローダーをアンロック<br />
<a href="http://androidlover.net/smartphone/nexus-five/nexus-5-bootloader-unlock.html" target="_blank">http://androidlover.net/smartphone/nexus-five/nexus-5-bootloader-unlock.html</a></li>
<li>
<a href="/officer/sim%e3%83%95%e3%83%aa%e3%83%bc%e7%ab%af%e6%9c%ab%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0rom%e3%82%92%e7%84%bc%e3%81%84%e3%81%a6%e3%81%bf%e3%81%9f.html/attachment/twrp" rel="attachment wp-att-9174"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9174" src="/uploads-archive/2016/01/twrp-168x300.png" alt="twrp" width="168" height="300" srcset="/uploads-archive/2016/01/twrp-168x300.png 168w, /uploads-archive/2016/01/twrp-228x407.png 228w, /uploads-archive/2016/01/twrp.png 374w" sizes="(max-width: 168px) 100vw, 168px" /></a>カスタムリカバリ TWRPを導入<br />
<a href="http://androidlover.net/smartphone/nexus-five/nexus-5-twrp-custom-recovery.html" target="_blank">http://androidlover.net/smartphone/nexus-five/nexus-5-twrp-custom-recovery.html</a></li>
<li><a href="/officer/sim%e3%83%95%e3%83%aa%e3%83%bc%e7%ab%af%e6%9c%ab%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0rom%e3%82%92%e7%84%bc%e3%81%84%e3%81%a6%e3%81%bf%e3%81%9f.html/attachment/cyanogenmod_12_homescreen_english" rel="attachment wp-att-9175"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9175" src="/uploads-archive/2016/01/CyanogenMod_12_homescreen_english-169x300.png" alt="CyanogenMod_12_homescreen_english" width="169" height="300" srcset="/uploads-archive/2016/01/CyanogenMod_12_homescreen_english-169x300.png 169w, /uploads-archive/2016/01/CyanogenMod_12_homescreen_english.png 220w" sizes="(max-width: 169px) 100vw, 169px" /></a>カスタムROMを焼く<a href="http://andmem.blogspot.jp/2014/08/romwrite-twrp.html" target="_blank" rel="attachment wp-att-9175"><br />
http://andmem.blogspot.jp/2014/08/romwrite-twrp.html<br />
</a></li>
</ol>
<h2>まとめ</h2>
<p>理解をするまでに右往左往して、途中起動が異様に遅く壊してしまったかなど、不安になりましたが、一度全工程を終えて理解をしたら、このROMの書き換えの工程は全部で10〜20分くらいで終わるのではと思える内容でした。</p>
<p>そして、情報の収集は2chのスレッドを全部読みすることが一番の参考になりました。</p>
<p>掲示板の意義はすごいと初めて実感した瞬間かもしれません。定期的に私のような初心者の方が分からないことを聞いて、煽る人と既出の内容も丁寧に教えてくれる人が入り混じり、情報が蓄積されていき、自分にとっても一番有用な情報、リンクを精査してなんとか目的まで辿りつくことが出来ました。</p>


cutomrom-1024x606.png

SIMフリー端末にカスタムROMを焼いてみた

<p>マーケティングに動画を活用する動きは今年になってさらに活発になっています。</p>
<p>数年前まではとりあえず動画を作成するという段階にありましたが、去年あたりから何のためにどんな動画を作成するのかを重要視するべきとの声が強くなっているように感じます。この流れは必然であり、当たり前の事とも言えます。</p>
<h2>最近よく出てくる3Hって何？</h2>
<p>合わせて3Hという動画のカテゴリに対する呼ばれ方を良く聞くようになってきています（おそらくgoogleあたりが提唱しているのだと思いますが）。</p>
<p>この3Hとは「HERO」「HUB」「HELP」の頭文字で、簡単にいうと「HERO」はいわゆるバズる事を目指す動画でまずは多くの人にリーチして製品や企業、または試みなどを知ってもらう事を目的にした動画、「HUB」は製品や企業の良さを知ってもらい好きになってもらう為のイメージ戦略的な動画、「HELP」は製品の操作方法や詳細を説明する為の動画という事になります。</p>
<p>HEROに分類される動画は決して費用をかけたからと言ってウケるわけではなく、多くの人が興味を引く動画でなくてはいけません。「なんだこれは？」という感じで斬新である必要があります。</p>
<p>具体的には「物珍しい」「おどろき（ギャップ）」「心地よさ」など、本能的な部分に訴える動画を作る必要があるのです。</p>
<p>そこでHERO動画として、近頃増えてきた360°の動画は、少なからず「物珍しい」という点はクリアできているのではと思い、最近作成方法を色々と調べていました。</p>
<p>360度撮影可能なカメラがそこそこの値段で買えるようになったので、実写動画はかなり増えてきています。</p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/g6w6xkQeSHg" allowfullscreen="allowfullscreen"></iframe></p>
<p>しかし、物珍しさを求めるからには、まだアップされている数が少ない360°動画が適していると思いますのでCGを利用した動画の作成方法を調べてみました。</p>
<p>実写と違ってある程度、仕掛けを作りこみやすそうなところもCGで作成する魅力です。既にあるものとしては以下の様な動画が上がっています。</p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/6uG9vtckp1U" allowfullscreen="allowfullscreen"></iframe></p>
<h2>CINEMA４Dで360°動画を作成するには</h2>
<p>CG作成のソフトはCINEMA4Dを使用しているので、その方法をご紹介します。CINEMA４Dはafter　effectsとの連携がしやすいので実写とCGを合成した360°動画も作りやすいかもしれません。</p>
<p><a href="/uploads-archive/2016/01/1.jpg" rel="attachment wp-att-9162"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9162" src="/uploads-archive/2016/01/1.jpg" alt="1" width="640" height="551" srcset="/uploads-archive/2016/01/1.jpg 640w, /uploads-archive/2016/01/1-300x258.jpg 300w, /uploads-archive/2016/01/1-228x196.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="/uploads-archive/2016/01/3.jpg" rel="attachment wp-att-9191"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9191" src="/uploads-archive/2016/01/3.jpg" alt="3" width="640" height="430" srcset="/uploads-archive/2016/01/3.jpg 640w, /uploads-archive/2016/01/3-300x202.jpg 300w, /uploads-archive/2016/01/3-228x153.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>（上は通常のカメラ）</p>
<p>プラグインでVRAY　for C４Dを利用すると3D空間の中にRICOH THETAのような360°撮影可能なカメラを設置する事ができます。</p>
<p><a href="https://www.youtube.com/watch?v=Kcxn4ZeN0zg" rel="attachment wp-att-9163"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9163" src="/uploads-archive/2016/01/2.jpg" alt="2" width="640" height="413" srcset="/uploads-archive/2016/01/2.jpg 640w, /uploads-archive/2016/01/2-300x194.jpg 300w, /uploads-archive/2016/01/2-228x147.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>これを利用してレンダリングすれば360°動画を書き出すことができます。</p>
<p>実際にCINEMA4Dで作られた動画がこちらです。</p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/ZWXVszTvbyE" allowfullscreen="allowfullscreen"></iframe></p>
<p><iframe loading="lazy" width="425" height="350" src="//www.youtube.com/embed/mcd6ifj9ntg" allowfullscreen="allowfullscreen"></iframe></p>


cinema4d と vrayで360°の世界を作る　物珍しいうちにhero動画として活用

animationなグラフが描けるChartist.js使ってみました

<p>あけましておめでとうございます。Kahoです。</p>
<p>本日は、ちょっと前から私のいる通信事業部で議題に上がっているLINE＠。<br />
私自身、LINEは日常的に使用させてもらっていますが、LINE＠は正直使ったことも気にしたこともありませんでしたので、どういうものか一切わかりません。<br />
ただ、とってもお店にとって便利な機能が詰まっているっていう事だけ耳に入ってきていましたので、調べてみました！</p>
<h2>LINEとちょっと違う機能</h2>
<p>機能自体は普通のLINEと同じですが、やれることが増えています。<br />
基本的には様々な種類のメッセージをお客様やファンに届けることが出来ます。その他にも1：1のトークでお問い合わせ対応なども気軽にできたり、LINE内やWEB上に専用ホームページを作成したりもできます。</p>
<h3>メッセージは多くの人へ送れる一斉配信式</h3>
<p>・スマホ専用アプリやPC管理画面からメッセージを作成し、友だちになってくれたお客様へ一斉送信<br />
・予約配信が可能なため、キャンペーンやイベントに合わせて臨機応変に送信</p>
<h3>1：1トークでお客様と直接コミュニケーション</h3>
<p>・直接コミュニケーションをとることが可能<br />
・別々の問い合わせなどで使用</p>
<h3>簡単にアカウントページが作成できる</h3>
<p>・LINEないに専用ホームページを作成<br />
（お知らせやイベント告知、新着情報などショップについての情報を一般のWEBサイト同様に簡単に発信出来ちゃいます）</p>
<h3>タイムラインやホーム画面でショップの様子をリアル配信</h3>
<p>・タイムライン・ホーム機能で不特定多数のユーザーに向けてショップのニュースをお知らせ<br />
（メッセージ送信時、タイムラインに同時投稿することも可能ですので、より多くのお客様へショップを宣伝！）</p>
<h3>他にも便利な機能がたくさん</h3>
<p>・統計情報では、日々の追加数の変化からタイムラインの反応などを、数値データとして確認<br />
・メッセージには納めきれないリッチな情報やクーポンに関しては、PRページで宣伝<br />
・アンケートや人気投票のようなユーザー参加型コンテンツを配信する場合には、リサーチページなどで作成</p>
<p>うーん、なんだか見てるだけなら有能な機能が詰まっているようですが…<br />
さて、ではこの機能を使用するだけの料金はいくらかかるのでしょうか？</p>
<h2>気になる料金プラン</h2>
<blockquote><p>LINE@では、無料プランと有料プランの２つのプランをご用意しております。<br />
それぞれメッセージ配信通数（※）により月額費用が変動いたします。</p>
<p>・月の総配信数が1,000通までの場合、無料でご利用いただけますが、1,000通を超えて配信をご希望の場合は月額5,400円（税込み）の有料プランをご利用ください。<br />
・月の総配信数が50,000通を超える場合は別途1通あたり1.08円（税込み）の費用がかかります。（ご請求時に1円未満の端数が生じた場合は、小数点以下を四捨五入）</p></blockquote>
<p>まずはお試し1000通までは月額0円コース<br />
1万人にも毎週送れる月額5,400円（税込）コース<br />
送りたい分だけ送れる月額5,400円（税込）+メッセージ配信数に応じた費用コース</p>
<p>ちなみにここで気を付けて頂きたいのが、上記で定義しているメッセージ通数というのは、LINE＠から送信する吹き出しの数を差しています。</p>
<p>「<br />
　　　　例）無料プランで使用<br />
　　　　友だちリスト　1000人<br />
　　　　1月1日　　　　1000人すべてにメッセージ<br />
　　　　　　　　　　　　　　　　　　　　　　　　　　」</p>
<p>この場合は、1月1日の時点で1000通 送信されたことになりますので、無料プランの枠はすべて終了となります。<br />
また、プランによっては上記で紹介した機能が使用できない場合があるそうで…</p>
<p>無料プランに関しては、リッチメッセージが使用できない＆月次基本メッセージ配信数が少ないというだけ。<br />
有料プランに関しては、すべての機能が使用できる＆月次基本メッセージ配信数は月5万通まで送れます。さらに5万超過した分につき1通あたり1.08円の料金で追加配信できますので安心ですね。</p>
<p>また、アカウントには二つのアカウント。さらに、IDを指定できるプレミアムIDなどがあります。</p>
<h2>一般アカウントと認証済みアカウントの違い</h2>
<p>まずは、<span style="color: red;">一般アカウント</span>について</p>
<blockquote><p>団体や製品・ブランド、個人を含め、原則どなたでもLINE＠のアカウントを持つことが出来ます。<br />
1：1のトークやファンへの一斉配信など、LINE＠の基本機能をお使いいただける他、メッセージ通数に応じた有料プランやプレミアムID（有料）をお申込みいただくこともできます。</p></blockquote>
<p>続いて、<span style="color: red;">認証済みアカウント</span>について</p>
<blockquote><p>ローカルビジネス・ECもしくはメディアのカテゴリにてお申込み後、LINE審査を経て取得することが可能です。<br />
認証済みアカウントでは、一般アカウントの基本スペックに加え認証済みバッヂが付与され、LINE内での検索結果にも露出されるようになります。</p></blockquote>
<h2>通常IDとプレミアムIDの違い</h2>
<p>簡単に言えば、有料のプレミアムIDは自分で好きなIDが指定できますよといった事です。<br />
気にしないショップさんなのであれば、フォーマットが決まっている無料の通常IDで良いのではないでしょうか。</p>
<p>さて、いかがでしたでしょうか。<br />
2015年7月頃の情報ですが、LINEの国内利用者数は5,800万人もの人が使用しているとのことです。多くの人が目にする可能性があるLINE＠は、自社店舗などを宣伝するためのツールとして使用してみるのはアリだと思います。またこのLINE＠ですが、利用できない場合もありますので良く注意事項を確認の上ご登録下さい。使用出来ない基準については<a href="http://at.line.me/jp/plan" target="_blank">こちら</a>からご確認下さい。</p>
<p>通販事業部でもいつか使用出来たらいいな…。</p>


便利かな？LINE＠で使える機能をご紹介

<p>webデザインをする時はPhotoshop(CC)を使っており、ワイヤーフレームを自分で書くときもPhotoshopを使用しています。</p>
<p>最近、webデザインやアプリデザインをする場合は<a href="https://www.sketchapp.com/" target="_blank">Sketch</a>が着々と人気になっており、</p>
<p>ワイヤーフレームやモックアップを作る時は、</p>
<ul>
<li><a href="https://www.flinto.com/" target="_blank">Flinto</a></li>
<li><a href="http://www.pixate.com/" target="_blank">Pixate</a></li>
<li><a href="https://prottapp.com/ja/" target="_blank">Prott &#8211; Prototyping tool for Web iOS Android apps</a></li>
<li><a href="http://www.invisionapp.com/" target="_blank">InVision</a></li>
<li><a href="https://popapp.in/" target="_blank">POP</a></li>
<li><a href="https://moqups.com/" target="_blank">Moqups</a></li>
<li><a href="http://www.justinmind.com/" target="_blank">Justinmind</a></li>
<li><a href="http://frame.lab25.co.uk/" target="_blank">Frame</a></li>
</ul>
<p>といったいろいろなサービスが使われているようです。</p>
<p>非常に便利そうで使ってみたいのですが、有料のものが多く、なかなか使用することに踏みきれません。(どのサービスもトライアル期間がありますので試す事が可能です)</p>
<p>なので、photoshopでワイヤーフレームを作ってしまうという状況にあります。</p>
<p>上記に紹介しているようなサービスのように簡単にモックアップやワイヤーフレームを作りたいなぁと思っていた所、<br />
adobeであるモノを発見しました。</p>
<h2>Project Comet</h2>
<p>それがAdobeの「Project Comet」です。</p>
<p><a href="/uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5.png" rel="attachment wp-att-9119"><img decoding="async" loading="lazy" class="alignnone wp-image-9119" src="/uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5.png" alt="スクリーンショット 2016-01-12 14.28.24" width="640" height="449" srcset="/uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5.png 962w, /uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5-300x210.png 300w, /uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5-768x539.png 768w, /uploads-archive/2016/01/80c2375350c3b9839de8b16d555f4ed5-228x160.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p><a href="http://landing.adobe.com/en/na/products/creative-cloud/comet/229818-notifyme.html" target="_blank">User experience, prototyping and design app | Adobe Project Comet</a></p>
<p>ワイヤーフレームやモックアップが簡単に作れちゃいそうな雰囲気がしますね！</p>
<p>これが今年の早い段階で公開されるとのことでいつになるのかワクワクしております。<br />
そしてphotoshopCC利用者であれば無料になってくれないかなと淡い期待をしております笑</p>
<h2>Adode Comp</h2>
<p>スマホやタブレット限定になりますが、ワイヤーフレームやカンプを作るためのアプリ(iPhone)は既にあります。<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-9118" src="/uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853.png" alt="スクリーンショット 2016-01-12 14.27.49" width="640" height="420" srcset="/uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853.png 1016w, /uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853-300x197.png 300w, /uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853-768x504.png 768w, /uploads-archive/2016/01/901fb9a0c8fb6bf27e3e0aa2c5ff8853-228x150.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2015/images/comp-marquee.jpg" target="_blank">Adobe Comp CC</a></p>
<p>こちらは無料のアプリで、直感的に作成出来るので慣れたら楽にどこにいても作成することができるかと思います。</p>
<p>これのPC版がProject Cometなのでしょうか？？</p>
<h2>Photoshop CCも進化している！</h2>
<p>photoshopも負けておりません。<br />
当初は写真加工のツールだったにもかかわらず、どんどんwebデザインするのに適した機能が追加されています。<br />
CCになることによって短いスパンで機能が追加されていくのが日に日に便利になっているような気がします。</p>
<p><a href="https://helpx.adobe.com/jp/photoshop/tutorials.html" target="_blank">Photoshop CCチュートリアル | Photoshop CCの使い方</a></p>
<p>なかでも2015年11月に追加された「デザインスペース」というものが良く、「UXやモバイルアプリのデザイン作業に適している」とのことで、ちょっとsketchとかに寄せているんじゃないかと思わせるようなものになっています。</p>
<p>ccをご使用している方ならこれは必見です！！</p>
<p><a href="https://helpx.adobe.com/jp/photoshop/how-to/design-space.html?set=photoshop--whats-new--2015-11" target="_blank">デザインスペース（プレビュー）の概要 | Adobe Photoshop CC tutorials</a></p>
<p>こちらのデザインスペースに関してはまだ別に取り上げて見たいと思います。</p>
<p>昔はAdobe一択で、最近他のツールが出て来て盛りあがってますが、まだまだAdobeもいいですね！<br />
僕は期待してます！</p>


webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！

<p>最近はJavaScriptを使ったWEBページ上のアプリがどんどんリッチになってきており、<br />
それに合わせてプログラムの規模も大きくなることが増えてきています。<br />
プログラムの規模が大きくなってくると、<br />
いかにメモリを浪費しない、効率的なプログラムを記述するかということが重要になってきます。<br />
そこで重要になってくるのが、オブジェクト指向のプログラミング方法です。</p>
<p>オブジェクト指向とは、繰り返し利用するプログラムを部品として定義しておき、<br />
それを組み合わせてプログラムを組んでいく方法です。</p>
<p>&nbsp;</p>
<p>C++、C#、JAVA、PHPといった言語でオブジェクト指向のプログラムを行う場合は、<br />
クラスというものを使います。</p>

		<div id="crayon-64954015901a0853941209" 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">PHPの場合</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;">
//クラスを定義
class exampleClass() {
    public $var = 100; //プロパティの宣言

    // メソッドの宣言
    public function displayVar() {
        echo $this-&gt;var;
    }
}

$obj = new exampleClass();
$obj-&gt;displayVar();</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-64954015901a0853941209-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a0853941209-2">2</div><div class="crayon-num" data-line="crayon-64954015901a0853941209-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a0853941209-4">4</div><div class="crayon-num" data-line="crayon-64954015901a0853941209-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a0853941209-6">6</div><div class="crayon-num" data-line="crayon-64954015901a0853941209-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a0853941209-8">8</div><div class="crayon-num" data-line="crayon-64954015901a0853941209-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a0853941209-10">10</div><div class="crayon-num" data-line="crayon-64954015901a0853941209-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a0853941209-12">12</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-64954015901a0853941209-1"><span class="crayon-c">//クラスを定義</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a0853941209-2"><span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-e">exampleClass</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64954015901a0853941209-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-v">$var</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//プロパティの宣言</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a0853941209-4">&nbsp;</div><div class="crayon-line" id="crayon-64954015901a0853941209-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// メソッドの宣言</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a0853941209-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-m">public</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">displayVar</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64954015901a0853941209-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-k ">echo</span><span class="crayon-h"> </span><span class="crayon-v">$this</span>-<span class="crayon-h">&gt;</span><span class="crayon-t">var</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a0853941209-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64954015901a0853941209-9"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a0853941209-10">&nbsp;</div><div class="crayon-line" id="crayon-64954015901a0853941209-11"><span class="crayon-v">$obj</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">exampleClass</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-64954015901a0853941209-12"><span class="crayon-v">$obj</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">displayVar</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>
<p>JavaScriptでも、IE、Operaを除く最新のブラウザではクラスを利用することができますが、<br />
現在のところはprototypeという仕組みを使うのが通常です。</p>

		<div id="crayon-64954015901a4186286148" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">JavaScriptの場合</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
//コンストラクタを定義
function exampleObject() {
    this.var = 100; //プロパティの宣言
}

//メソッドを定義
exampleObject.prototype.alertVar = function() {
    alert(this.var);
} 

var obj = new exampleObject();
obj.alertVar();</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-64954015901a4186286148-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a4186286148-2">2</div><div class="crayon-num" data-line="crayon-64954015901a4186286148-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a4186286148-4">4</div><div class="crayon-num" data-line="crayon-64954015901a4186286148-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a4186286148-6">6</div><div class="crayon-num" data-line="crayon-64954015901a4186286148-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a4186286148-8">8</div><div class="crayon-num" data-line="crayon-64954015901a4186286148-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a4186286148-10">10</div><div class="crayon-num" data-line="crayon-64954015901a4186286148-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015901a4186286148-12">12</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-64954015901a4186286148-1"><span class="crayon-c">//コンストラクタを定義</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a4186286148-2"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">exampleObject</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64954015901a4186286148-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-t">var</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">100</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//プロパティの宣言</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a4186286148-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64954015901a4186286148-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a4186286148-6"><span class="crayon-c">//メソッドを定義</span></div><div class="crayon-line" id="crayon-64954015901a4186286148-7"><span class="crayon-i">exampleObject</span><span class="crayon-sy">.</span><span class="crayon-i">prototype</span><span class="crayon-sy">.</span><span class="crayon-i">alertVar</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a4186286148-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-t">var</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954015901a4186286148-9"><span class="crayon-sy">}</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015901a4186286148-10">&nbsp;</div><div class="crayon-line" id="crayon-64954015901a4186286148-11"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">obj</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">exampleObject</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-64954015901a4186286148-12"><span class="crayon-i">obj</span><span class="crayon-sy">.</span><span class="crayon-e">alertVar</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>
<p>Canvasなどで同じ図形を同時に大量に描画するようなプログラムでは欠かせないプログラムの方法ですので、<br />
私も使いこなせるように実務でも積極的に使っていきたいです。</p>
<p>&nbsp;</p>
<h3>参考図書</h3>
<p><a class="link" href="http://www.amazon.co.jp/dp/479813905X" target="_blank">ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまで</a></p>
<p>&nbsp;</p>
<h3> 参考サイト</h3>
<p><a class="link" href="http://php.net/manual/ja/language.oop5.basic.php" target="_blank">PHP: クラスの基礎 &#8211; Manual</a></p>
<p><a class="link" href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes" target="_blank">Classes &#8211; JavaScript | MDN</a></p>

JavaScriptでオブジェクト指向のプログラムを組む初歩の紹介

<h2>はじめに</h2>
<div style="padding-left: 15px;">
  PHP7が高速と言う話をしばらく前に聞いたので<br />
  実際、実効速度がどのくらいのものか既存のシステムを基に比較してみました。
</div>
<h2>別バージョンのPHPをインストール</h2>
<div style="padding-left: 15px;">
  phpenvと言うPHP複数バージョン管理ツールを使用します。</p>
<p>  phpenvをダウンロードし、実行パスを通す (bashの場合)</p>
<p></p>

		<div id="crayon-649540158ffbc491639751" 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">Shell</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;">
curl -L https://raw.github.com/CHH/phpenv/master/bin/phpenv-install.sh | bash
git clone git://github.com/CHH/php-build.git ~/.phpenv/plugins/php-build
echo 'export PATH="$HOME/.phpenv/bin:$PATH"' &gt;&gt; ~/.bashrc
echo 'eval "$(phpenv init -)"' &gt;&gt; ~/.bashrc
exec $SHELL -l</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-649540158ffbc491639751-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158ffbc491639751-2">2</div><div class="crayon-num" data-line="crayon-649540158ffbc491639751-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158ffbc491639751-4">4</div><div class="crayon-num" data-line="crayon-649540158ffbc491639751-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-649540158ffbc491639751-1"><span class="crayon-i">curl</span><span class="crayon-h"> </span>-<span class="crayon-i">L</span><span class="crayon-h"> </span><span class="crayon-i">https</span><span class="crayon-sy">:</span>//<span class="crayon-i">raw</span><span class="crayon-e">.github</span><span class="crayon-e">.com</span>/<span class="crayon-i">CHH</span>/<span class="crayon-i">phpenv</span>/<span class="crayon-i">master</span>/<span class="crayon-i">bin</span>/<span class="crayon-i">phpenv</span>-<span class="crayon-i">install</span><span class="crayon-e">.sh</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-r">bash</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158ffbc491639751-2"><span class="crayon-e">git </span><span class="crayon-r">clone</span><span class="crayon-h"> </span><span class="crayon-i">git</span><span class="crayon-sy">:</span>//<span class="crayon-i">github</span><span class="crayon-e">.com</span>/<span class="crayon-i">CHH</span>/<span class="crayon-i">php</span>-<span class="crayon-i">build</span><span class="crayon-e">.git</span><span class="crayon-h"> </span><span class="crayon-sy">~</span>/<span class="crayon-e">.phpenv</span>/<span class="crayon-i">plugins</span>/<span class="crayon-i">php</span>-<span class="crayon-e">build</span></div><div class="crayon-line" id="crayon-649540158ffbc491639751-3"><span class="crayon-r">echo</span><span class="crayon-h"> </span><span class="crayon-s">'export PATH="$HOME/.phpenv/bin:$PATH"'</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-sy">~</span>/<span class="crayon-e">.bashrc</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158ffbc491639751-4"><span class="crayon-r">echo</span><span class="crayon-h"> </span><span class="crayon-s">'eval "$(phpenv init -)"'</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-sy">~</span>/<span class="crayon-e">.bashrc</span></div><div class="crayon-line" id="crayon-649540158ffbc491639751-5"><span class="crayon-i">exec</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">SHELL</span><span class="crayon-h"> </span>-<span class="crayon-i">l</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>  指定のバージョンをインストールする (結構時間かかる)</p>
<p></p>

		<div id="crayon-649540158ffc0543617720" 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">Shell</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;">
phpenv install 7.0.1
phpenv install 5.3.3</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-649540158ffc0543617720-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158ffc0543617720-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-649540158ffc0543617720-1"><span class="crayon-e">phpenv </span><span class="crayon-i">install</span><span class="crayon-h"> </span><span class="crayon-cn">7.0.1</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158ffc0543617720-2"><span class="crayon-e">phpenv </span><span class="crayon-i">install</span><span class="crayon-h"> </span><span class="crayon-cn">5.3.3</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>  バージョンを切り替えてテストしてみる！</p></div>
<h2>いざ比較</h2>
<div style="padding-left: 15px;">
  結論から言えばSymfonyがphpenvの別バージョンを認識せず失敗。。。</p>
<p>  以下エビデンス<br />
<a href="/uploads-archive/2016/01/18533447eb66317f1ff8767f6efa0607.png" rel="attachment wp-att-9106"><img decoding="async" loading="lazy" src="/uploads-archive/2016/01/18533447eb66317f1ff8767f6efa0607-1024x36.png" alt="スクリーンショット 2016-01-05 17.51.21" width="1024" height="36" class="alignnone size-large wp-image-9106" srcset="/uploads-archive/2016/01/18533447eb66317f1ff8767f6efa0607-1024x36.png 1024w, /uploads-archive/2016/01/18533447eb66317f1ff8767f6efa0607-300x10.png 300w, /uploads-archive/2016/01/18533447eb66317f1ff8767f6efa0607-768x27.png 768w, /uploads-archive/2016/01/18533447eb66317f1ff8767f6efa0607-228x8.png 228w, /uploads-archive/2016/01/18533447eb66317f1ff8767f6efa0607.png 1059w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>  何故か7.0.1に切り替えても5.3.3のままです。<br />
  課題は残ったままとなりました。</p>
<p>  次回のための備忘録的なものとして残しておきます。</p></div>

高速！？ PHP7を試してみる！

<p>今年もこの季節がやってまいりました</p>
<p><a href="http://designmodo.com/web-design-trends-2016/" target="_blank">http://designmodo.com/web-design-trends-2016/</a></p>
<p>&nbsp;</p>
<p>自分の英語の勉強も兼ねて翻訳・要約してみた</p>
<p>&nbsp;</p>
<h2>縦スクロールとそのパターン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9069" src="/uploads-archive/2016/01/2016webtrend_1.jpg" alt="2016webtrend_1" width="900" height="496" srcset="/uploads-archive/2016/01/2016webtrend_1.jpg 900w, /uploads-archive/2016/01/2016webtrend_1-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_1-768x423.jpg 768w, /uploads-archive/2016/01/2016webtrend_1-228x126.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.beoplay.com/products/beoplayh7" target="_blank">http://www.beoplay.com/products/beoplayh7</a></p>
<p>モバイル端末からのアクセスが増えているので、今後ユーザーは縦スクロールの頻度が増え、 デザイナーは縦スクロールのユーザーインターフェイスをデザインすることの重要度が高まる</p>
<p>&nbsp;</p>
<h2>もっと、カード型デザイン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9065" src="/uploads-archive/2016/01/2016webtrend_2.jpg" alt="2016webtrend_2" width="900" height="494" srcset="/uploads-archive/2016/01/2016webtrend_2.jpg 900w, /uploads-archive/2016/01/2016webtrend_2-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_2-768x422.jpg 768w, /uploads-archive/2016/01/2016webtrend_2-228x125.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://block16omaha.com/" target="_blank">http://block16omaha.com/</a></p>
<p>マテリアルデザインから生まれたカード型デザインはアプリ、ウェブサイト、紙媒体などあらゆる場所で使われている。</p>
<p>カード型デザインはユーザーフレンドリーに情報整理ができ、作るのも楽しい。</p>
<p>更に、カード型デザインはデバイスを問わず動作するというメリットがある</p>
<p>&nbsp;</p>
<h2>ヒーロービデオヘッダー</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9066" src="/uploads-archive/2016/01/2016webtrend_3.jpg" alt="2016webtrend_3" width="900" height="490" srcset="/uploads-archive/2016/01/2016webtrend_3.jpg 900w, /uploads-archive/2016/01/2016webtrend_3-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_3-768x418.jpg 768w, /uploads-archive/2016/01/2016webtrend_3-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://follow-your-intuition.com/" target="_blank">http://follow-your-intuition.com/</a></p>
<p>ウェブデザインは映画制作のようになるだろう。</p>
<p>回線速度やモジュールの発展により映画のような体験をサイトに盛り込むことができるようになってきている。</p>
<p>ウェブ上の動画は、小さなものからフルカットへと進化し、高解像度で、くっきりとさくさく動作する。</p>
<p>これはユーザーに新しい体験だが、テレビでお馴染みの体験といえる</p>
<p>&nbsp;</p>
<h2>微細なアニメーション</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9067" src="/uploads-archive/2016/01/2016webtrend_4.jpg" alt="2016webtrend_4" width="900" height="487" srcset="/uploads-archive/2016/01/2016webtrend_4.jpg 900w, /uploads-archive/2016/01/2016webtrend_4-300x162.jpg 300w, /uploads-archive/2016/01/2016webtrend_4-768x416.jpg 768w, /uploads-archive/2016/01/2016webtrend_4-228x123.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://labs.convoy.me/camper/#!/landing" target="_blank">http://labs.convoy.me/camper/#!/landing</a></p>
<p>アニメーションは2015年からの最も大きなトレンドの1つだ。</p>
<p>ヒーローヘッダのようなサイトの顔から、見逃してしまうほど小さいものまで、<br />
アニメーションは至る所に存在している。</p>
<p>アニメーションを使う上で最も重要なことは、なぜこのアニメーションを作り、何を想定しているかといった<br />
目的を明らかにすることだ。</p>
<p>&nbsp;</p>
<h2>インタラクションデザイン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9068" src="/uploads-archive/2016/01/2016webtrend_5.jpg" alt="2016webtrend_5" width="900" height="473" srcset="/uploads-archive/2016/01/2016webtrend_5.jpg 900w, /uploads-archive/2016/01/2016webtrend_5-300x158.jpg 300w, /uploads-archive/2016/01/2016webtrend_5-768x404.jpg 768w, /uploads-archive/2016/01/2016webtrend_5-228x120.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.wove.com/" target="_blank">http://www.wove.com/</a></p>
<p>アニメーションと同時に活用されているのがインタラクションデザインだ。</p>
<p>インタラクションデザインはアプリやモバイルサイトにおいて、ユーザーとデバイスをつなぐ軸である。</p>
<p>良いインタラクションデザインはごくわずかな場合もあるが、ユーザーに価値を与えている。</p>
<p>メッセージ受信時のアラームから、ゲーム中にあなたの番が来た時の短い音など、<br />
ほんの小さなインタラクションデザインが人々とデバイスのやりとりを形作っている</p>
<p>&nbsp;</p>
<h2>更に美しいタイポグラフィ</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9059" src="/uploads-archive/2016/01/2016webtrend_6.jpg" alt="2016webtrend_6" width="900" height="488" srcset="/uploads-archive/2016/01/2016webtrend_6.jpg 900w, /uploads-archive/2016/01/2016webtrend_6-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_6-768x416.jpg 768w, /uploads-archive/2016/01/2016webtrend_6-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.viens-la.com/" target="_blank">http://www.viens-la.com/</a></p>
<p>合理化されたインターフェイスは美しいタイポグラフィへと導く。</p>
<p>大きくて太いタイポグラフィは他のトレンドとマッチすることから、今後も継続するだろう。</p>
<p>このシンプルな字体は他の要素との空間を広げ、高い可読性によりメッセージを伝えることができる。</p>
<p>単に読み易い書体のペアや、楽しくて珍しいものはぜひ挑戦したい小技だ</p>
<p>&nbsp;</p>
<h2>イラストとスケッチ</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9060" src="/uploads-archive/2016/01/2016webtrend_7.jpg" alt="2016webtrend_7" width="900" height="489" srcset="/uploads-archive/2016/01/2016webtrend_7.jpg 900w, /uploads-archive/2016/01/2016webtrend_7-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_7-768x417.jpg 768w, /uploads-archive/2016/01/2016webtrend_7-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://orangeyouglad.com/" target="_blank">http://orangeyouglad.com/</a></p>
<p>イラストやスケッチはサイトに気まぐれで楽しい要素を与える。</p>
<p>これらは全てのサイトに当てはまり、決して子供向けのサイトだけのものではない。</p>
<p>イラストは、アイコンやその他の要素などサイトの細かな部分から人気が高まってきている<br />
イラストはサイトにパーソナルな印象を持たせるという点が良い。</p>
<p>手書きのイラストやスケッチアイコンはユーザーに個性を感じさせ、ユーザーとの長いつながりに貢献するだろう</p>
<p>&nbsp;</p>
<h2>大胆で明るい色調 (80&#8217;sな雰囲気)</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9061" src="/uploads-archive/2016/01/2016webtrend_8.jpg" alt="2016webtrend_8" width="900" height="477" srcset="/uploads-archive/2016/01/2016webtrend_8.jpg 900w, /uploads-archive/2016/01/2016webtrend_8-300x159.jpg 300w, /uploads-archive/2016/01/2016webtrend_8-768x407.jpg 768w, /uploads-archive/2016/01/2016webtrend_8-228x121.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://circlesconference.com/" target="_blank">http://circlesconference.com/</a></p>
<p>大胆で明るい色調はフラットデザインとともに増加してきている。</p>
<p>Googleの&#8221;Material Design documentation&#8221;も協議が進んでおり、&#8221;Dribbble&#8221;を見ると色が散々としている。</p>
<p>これらはキーとなる指標であり、この色は年内にされに大きくなるだろう。</p>
<p>大胆な色使いにおいての幾つかの変化として、これらの色を使った文字がトレンドとなるだろう。</p>
<p>2015年はモノトーンが主流でしたが、80年代な大胆で明るい色使いが増えてくるだろう</p>
<p>&nbsp;</p>
<h2>ハンバーガーメニューと図解</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9062" src="/uploads-archive/2016/01/2016webtrend_9.jpg" alt="2016webtrend_9" width="900" height="425" srcset="/uploads-archive/2016/01/2016webtrend_9.jpg 900w, /uploads-archive/2016/01/2016webtrend_9-300x142.jpg 300w, /uploads-archive/2016/01/2016webtrend_9-768x363.jpg 768w, /uploads-archive/2016/01/2016webtrend_9-228x108.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.primeit.pt/en/" target="_blank">http://www.primeit.pt/en/</a></p>
<p>多くのデザイナーが楽しいアイコンや、簡単にアイコンを作れるキットをリリースしている。</p>
<p>その他に重要な点として、SVGの普及により巨大なアイコンを実験的に使用するデザイナーが出現していることだ</p>
<p>&nbsp;</p>
<h2>リアルと空想の融合</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9062" src="/uploads-archive/2016/01/2016webtrend_9.jpg" alt="2016webtrend_9" width="900" height="425" srcset="/uploads-archive/2016/01/2016webtrend_9.jpg 900w, /uploads-archive/2016/01/2016webtrend_9-300x142.jpg 300w, /uploads-archive/2016/01/2016webtrend_9-768x363.jpg 768w, /uploads-archive/2016/01/2016webtrend_9-228x108.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://bluestag.co.uk/" target="_blank">http://bluestag.co.uk/</a></p>
<p>次のゲーミフィケーションとデザインのステップは、リアルと空想(ウェブデザインにより作られたもの)の境界をぼかすことだ。</p>
<p>バーチャルリアリティからウェブサイトまで、これらはあなたに新しい要素を見つける選択肢を与え、ユーザーはこのタイプのカスタマイズを好む傾向にある</p>
<p>&nbsp;</p>
<h2>スライダー</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9064" src="/uploads-archive/2016/01/2016webtrend_11.jpg" alt="2016webtrend_11" width="900" height="494" srcset="/uploads-archive/2016/01/2016webtrend_11.jpg 900w, /uploads-archive/2016/01/2016webtrend_11-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_11-768x422.jpg 768w, /uploads-archive/2016/01/2016webtrend_11-228x125.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://yearinreview.fb.com/2015/us-presidential-election/" target="_blank">http://yearinreview.fb.com/2015/us-presidential-election/</a></p>
<p>まずはじめに、スライダーはウェブサイトの枠の中で画像を動かし複数見せることができた。</p>
<p>次の変化はフルスクリーンスライドだ。</p>
<p>それぞれのスライドは切替によって新たな内容を表示できる。クリック、スクロールや時間による処理もできる。<br />
ユーザーは前後のコンテンツに直感的に移動することができる。</p>
<p>このようなコンセプトは、数ヶ月のうちにさらに多く見かけることになるだろう</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ちなみに、以下は自分が昨年6月に2015年上半期のトレンドをまとめた記事</p>
<blockquote data-secret="znXQr4BvIU" class="wp-embedded-content"><p><a href="/officer/%e3%80%90web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%912015%e5%b9%b4-%e4%b8%8a%e5%8d%8a%e6%9c%9f%e3%81%ae%e3%83%88%e3%83%ac%e3%83%b3%e3%83%89.html">【Webデザイン】2015年 上半期のトレンド</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="display:none;" src="/officer/%e3%80%90web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%912015%e5%b9%b4-%e4%b8%8a%e5%8d%8a%e6%9c%9f%e3%81%ae%e3%83%88%e3%83%ac%e3%83%b3%e3%83%89.html/embed#?secret=znXQr4BvIU" data-secret="znXQr4BvIU" width="500" height="282" title="埋め込まれた WordPress の投稿" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<p>&nbsp;</p>
<p>そんなに変わってない気がするのは自分だけだろうか。</p>
<p>モバイルファーストや動画は当たり前、あとはマテリアルデザインとSVGが着々と広まってきているといった印象だ</p>


【Webデザイント】2016年に流行しそうなレンド11選

YeomanでMEAN環境を整える

<p>堀江貴文氏が運営しているYouTube番組「ホリエモンチャンネル」内でECサービスについて質問に回答していて、ちょうど、弊社が扱う商材も似た部分があり運営の方針として共感する部分が多々あったので、共有です。</p>
<p>&nbsp;</p>
<p>視聴しながら、まさに「あるある」と頷くことが何度もありました。</p>
<p>5分ほどの短い動画ですぐご覧になれます。</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/c3hqxRcIoDE?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2>低単価のECサイト運営者からの質問</h2>
<div>単価の低い商品をECで販売しているが件数が多く、無茶な要求や、問い合わせに返信する作業などの人件費を単価が低いため効率化する必要があるが­どのようにしたらいいかという趣旨でした。</div>
<h2>効率化よりも丁寧な対応</h2>
<p>上記の質問に対して、丁寧に対応することで顧客満足度が上がると回答していました。</p>
<p>大きな会社は、対応を早くすること自体で差別化しているが、ここで対抗するのではなく、丁寧な対応を心がけているところが伸びていると仰っていました。</p>
<p>具体的な方法としては、問い合わせの返信パターンを定型化しメンバーを共有することなど。</p>
<p>この部分については、弊社でもGoogleドライブ上で取りまとめて全員が閲覧出来る状態になっているので、同様な運営が出来ていました。</p>
<p>さらには、要求に対するどこまで対応すべきかというポリシーを統一すべきと述べられており、電話でのサポートなどでとっさの判断を求められる場合でも、個人に依存することなく均一の対応が出来るようしなくてはと感じました。（相手の方も感情を持った人なので、これは本当に難しい・・・）</p>
<h2>我々が目指すべき運営方法</h2>
<p>この動画を拝聴してはっきりとしたことが、大手では出来ないことで差別化していくことにフォーカスをするということ。</p>
<ul>
<li>価格競争に陥らず</li>
<li>マニュアル化されきっていないことを逆手に丁寧な対応</li>
<li>お客様の期待をいいほうに裏切るような仕掛け</li>
</ul>
<p>3つに絞って、お客様を掴んでどんどんリピーターになってもらうことが重要かと思います。</p>
<p>おかげさまで現状のところは、売上が伸び続けているのですが、今はやることをきちんとやっているためお客様の支持を得られた結果だと判断していますが、このやることがまだまだある状態ですが、今後、更なる売上の向上のため、具体的な施策をどんどん編み出していきたいと思います。</p>
<h2>参考</h2>
<p>バックナンバーはホリエモンドットコム内の<a href="http://horiemon.com/movie/" target="_blank">ホリエモンチャンネル</a>というカテゴリーで解説付きで掲載されています。</p>


ホリエモンが語るECサービスを発展させるコツ

<p>最近、displayのtable,table-cellを使用する機会が増えてきていますが、使用していてあるバグに当たりました。</p>
<p>それはタイトルの通りなんですが、<br />
display:table-cellのimgのmax-widthの指定が<br />
<strong>chrome</strong>は大丈夫なんですが、<strong>ie</strong>と<strong>firefox</strong>では無視されていました。。。</p>
<p>例えば以下のようなソースになります。</p>
<p></p>

		<div id="crayon-649540158faf8547440697" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">html</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div class="photo"&gt;
	&lt;figure&gt;
		&lt;img src="images/sample.jpg" alt=""&gt;
	&lt;/figure&gt;
&lt;/div&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-649540158faf8547440697-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158faf8547440697-2">2</div><div class="crayon-num" data-line="crayon-649540158faf8547440697-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158faf8547440697-4">4</div><div class="crayon-num" data-line="crayon-649540158faf8547440697-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-649540158faf8547440697-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"photo"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158faf8547440697-2"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;figure&gt;</span></div><div class="crayon-line" id="crayon-649540158faf8547440697-3"><span class="crayon-i ">		</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/sample.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">alt</span>=<span class="crayon-s ">""</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158faf8547440697-4"><span class="crayon-i ">	</span><span class="crayon-r ">&lt;/figure&gt;</span></div><div class="crayon-line" id="crayon-649540158faf8547440697-5"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p></p>

		<div id="crayon-649540158fafd754589208" 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">css</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;">
.photo {
	display: table;
	width: 200px;
}
.photo figure {
	display: table-cell;
}
.photo figure img {
	max-width: 100%;
	height: auto;
}</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-649540158fafd754589208-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158fafd754589208-2">2</div><div class="crayon-num" data-line="crayon-649540158fafd754589208-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158fafd754589208-4">4</div><div class="crayon-num" data-line="crayon-649540158fafd754589208-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158fafd754589208-6">6</div><div class="crayon-num" data-line="crayon-649540158fafd754589208-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158fafd754589208-8">8</div><div class="crayon-num" data-line="crayon-649540158fafd754589208-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158fafd754589208-10">10</div><div class="crayon-num" data-line="crayon-649540158fafd754589208-11">11</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-649540158fafd754589208-1"><span class="crayon-k ">.photo </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158fafd754589208-2"><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 ">table</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158fafd754589208-3"><span class="crayon-h">	</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">200px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158fafd754589208-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540158fafd754589208-5"><span class="crayon-k ">.photo figure </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158fafd754589208-6"><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 ">table-cell</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158fafd754589208-7"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158fafd754589208-8"><span class="crayon-k ">.photo figure img </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540158fafd754589208-9"><span class="crayon-h">	</span><span class="crayon-e ">max-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 crayon-striped-line" id="crayon-649540158fafd754589208-10"><span class="crayon-h">	</span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158fafd754589208-11"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>これだとmax-widthが無視されてしまうので、cssをひとつ調整すればOKです！</p>
<p></p>

		<div id="crayon-649540158faff542700970" 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">css</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;">
.photo {
  display: table;
  width: 200px;
  table-layout: fixed;
}
.photo figure {
  display: table-cell;
}
.photo figure img {
  max-width: 100%;
  height: auto;
}</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-649540158faff542700970-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158faff542700970-2">2</div><div class="crayon-num" data-line="crayon-649540158faff542700970-3">3</div><div class="crayon-num crayon-marked-num crayon-top crayon-bottom crayon-striped-num" data-line="crayon-649540158faff542700970-4">4</div><div class="crayon-num" data-line="crayon-649540158faff542700970-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158faff542700970-6">6</div><div class="crayon-num" data-line="crayon-649540158faff542700970-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158faff542700970-8">8</div><div class="crayon-num" data-line="crayon-649540158faff542700970-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158faff542700970-10">10</div><div class="crayon-num" data-line="crayon-649540158faff542700970-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158faff542700970-12">12</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-649540158faff542700970-1"><span class="crayon-k ">.photo </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158faff542700970-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">table</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158faff542700970-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">200px</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-marked-line crayon-top crayon-bottom crayon-striped-line" id="crayon-649540158faff542700970-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">table-layout</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">fixed</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540158faff542700970-5"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158faff542700970-6"><span class="crayon-k ">.photo figure </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540158faff542700970-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">table-cell</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158faff542700970-8"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540158faff542700970-9"><span class="crayon-k ">.photo figure img </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158faff542700970-10"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">max-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-649540158faff542700970-11"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">auto</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158faff542700970-12"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>display:tableを指定している要素に、<br />
table-layout: fixed;<br />
を追加してあげるだけでOKです！</p>
<p>これでie,firefoxでもmax-widthが効くようになります。</p>
<p>便利なdisplay:tableですが、tableにすることによって効かないcssも出て来ちゃうので、<br />
気をつけないといけないですね〜</p>

display:table-cellの中でimgのmax-width指定が効かなかったバグ

<p>最近、<a href="https://www.pluralsight.com/">Pluralsight</a>を使用してみたので、ここが良かった！と感じる点をまとめてみました。</p>
<h2>1．技術的な知識だけでなく英語も身につく</h2>
<p><strong>ドメドメ</strong>な環境で育った育ってきた私にとって、英語というのは今後仕事をしていくうえでの課題です…。<br />
仕事に関係がある内容を英語で学習する身に付けるというのは一石二鳥ぐらいの感じがしています。</p>
<h2>2．体系的に学べる</h2>
<p>あの構文の書き方なんだっけというような簡単なことを調べるには、Pluralsightは不向きですが、ある分野を<strong>総合的に</strong>学習しようと思ったときには便利だと思います。一つのlessonで6時間ぐらいかかるものもあるものもあり、<strong>基礎から</strong>順を追って学習できるのではないかと感じました（因みに動画は5分区切りぐらいで細かく分けられています）。</p>
<h2>3．気になっていた分野に気軽に飛び込める</h2>
<p>Pluralsightでは現在<strong>3000ぐらいのコース</strong>が用意されているようです。アニメーションに興味あったけどこれまで機会を逃してきたという方も、動画再生ボタンを押すだけでアニメーターになれるきっかけが掴めるかもしれません。</p>
<h2>4．スマートフォンにも対応</h2>
<p>スマートフォンにも対応しています。Pluralsightのアプリも存在しています。移動時間中、SNS、ゲーム、ニュースを読む等やりきってやることがなくなった！そういうときに便利かもしれません。ちなみにスマートフォンでも倍速で視聴することができます。</p>
<h2>5．Chrome Castにも対応</h2>
<p>Chrome Castにも対応してます。マルチディスプレイできる環境はないけど、Chrome Cast使えるという方は便利だと思います。</p>
<p>今のところ、2週間のfree trialで利用しているのですが、フリートライアル後も使い続けようかちょっと悩んでいます。<br />
<strong>ちなみに、法人向けもあるみたいです。</strong></p>
<p>参考：<br />
・<a href="http://jp.techcrunch.com/2015/12/12/20151211enki-launches-snackable-mobile-learning-app-for-developers/">一日にわずか５分の‘授業’でソフトウェア開発技術を学ぶモバイル学習サービスEnki…既存デベロッパのスキルアップに最適かも</a><br />
　&#8211; 類似サービス<br />
・<a href="http://jp.techcrunch.com/2013/07/25/20130724developer-training-platform-pluralsight-acquires-peepcode-to-expand-into-open-source-content/">デベロッパ教育訓練企業もMicrosoft/Windows偏重から脱出して現代化未来化へ転身</a></p>


Pluralsightここが良かった5つの点

Sphinxで充実ドキュメントライフを！

<p>Paidyという決済をご存知だろうか。</p>
<p>最近露出が増えてきているのでその紹介</p>
<p><a href="https://paidy.com/" target="_blank">https://paidy.com/</a></p>
<p>&nbsp;</p>
<p>要は、SMSとメールが受信できる環境さえあれば決済ができ、支払を保証してくれるという新しい決済サービス。</p>
<p>個人的な感想だが、利用者と加盟店のメリットをまとめてみた</p>
<table>
<tbody>
<tr>
<th></th>
<th>利用者</th>
<th>加盟店</th>
</tr>
<tr>
<td>クレジットカード不要</td>
<td colspan="2" rowspan="3">幅広い層が気軽に利用できる</td>
</tr>
<tr>
<td>審査・事前登録不要</td>
</tr>
<tr>
<td>電話番号とメアドだけでOK</td>
</tr>
<tr>
<td>分割払可能</td>
<td>高額商品の購入が可能に</td>
<td>手数料負担なし</td>
</tr>
<tr>
<td>まとめて支払える</td>
<td>入金の手間が軽減</td>
<td></td>
</tr>
<tr>
<td>支払保証</td>
<td>すぐ届く</td>
<td>改修リスク無し</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>費用は初期・月額無料で、必要なのは売上に応じたもので、クレジットカードど比べても割安感がある。</p>
<p>カードを持てない層の購入が多い商材を扱うサイトなどにはとても良さそうだ</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2016/01/13

2016/01/13

2016/01/13

2016/01/13

2016/01/13

2016/01/13

2016/01/13

2016/01/12

2016/01/06

2016/01/06

2016/01/06

2016/01/06

2016/01/06

2016/01/06

2015/12/25

2015/12/25

2015/12/22

2015/12/16