【未検証】Macでppkファイルを使ってCentOSのSSHに接続する件

<p>最近EC関連の会社やサービスが増えている気がする。<br />
一昔前までは、例えばECサイトを作ろうと思ったら、システム開発会社やデザイン会社にお願いしていたと思うが<br />
今はECサイト専用のシステム開発会社やデザイン会社が幾つかある。<br />
開発や制作だけではなく、それに付随するサービスも「EC特化」や「EC専門」と謳うところが増えているので、<br />
今後のためにもまとめ。</p>
<p>■レコメンドエンジン<br />
<a href="http://www.luckrec.jp/" target="_blank">http://www.luckrec.jp/</a><br />
とにかく簡単にできる。<br />
価格も手軽なので導入しやすい。</p>
<p>■サイト内検索<br />
<a href="http://search.appirits.com/" target="_blank">http://search.appirits.com/</a><br />
サイトごとにロジックの変更をしてくれる割には低価格。</p>
<p>■クラウドソーシング<br />
<a href="http://ecworkers.jp/" target="_blank">http://ecworkers.jp/</a><br />
はやりのクラウドソーシングをECに特化したサービス。</p>
<p>■アクセス解析<br />
<a href="http://www.inter-office.co.jp/econda/" target="_blank">http://www.inter-office.co.jp/econda/</a><br />
広告代理店にお願いしていたであろう効果測定が充実している。</p>
<p>■フリーペーパー<br />
<a href="http://ecnomikata.com/matching/mikata-tsushin/" target="_blank">http://ecnomikata.com/matching/mikata-tsushin/</a><br />
EC関連業者の中ではメジャーになりつつある。</p>
<p>■一括見積もり<br />
<a href="http://ecnomikata.com/matching/" target="_blank">http://ecnomikata.com/matching/</a><br />
こちらもECのミカタ通信と同じリョーマが運営。<br />
様々なカテゴリがある。主力は物流。</p>
<p>■コールセンター<br />
<a href="http://www.jmscom.co.jp/service/service_guide5.html" target="_blank">http://www.jmscom.co.jp/service/service_guide5.html</a><br />
通常のコールセンター業務と違うのは、電話からの注文があること。<br />
そこを専門的にカバーしてくれるのはうれしい。</p>
<p>■コンサルティング<br />
<a href="http://www.netshop-soken.co.jp/" target="_blank">http://www.netshop-soken.co.jp/</a><br />
「売る」ことを極めたコンサルティング会社。<br />
様々な取り組みは見ていて参考になる。</p>
<p>■就職<br />
<a href="http://www.ecjob.jp/" target="_blank">http://www.ecjob.jp/</a><br />
こんなのまであるのか、という採用サイト。<br />
お祝い金制度有り。</p>
<p>■素材<br />
<a href="http://ec-yobiko.com/" target="_blank">http://ec-yobiko.com/</a><br />
商用、加工OKで無料なのでありがたいサイト。</p>
<p>■テンプレート<br />
<a href="http://www.templatemonster.jp/gallery.php?type=21" target="_blank">http://www.templatemonster.jp/gallery.php?type=21</a><br />
EC用テンプレートが格安で購入できます。</p>


増えるECサイト専用・特化サービス

<p>先週末にミュシャ展にいってまいりました。</p>
<p>あまり展覧会に行くことはありませんが、<br />
今回、ミュシャは商業デザイナーでもあったということで、<br />
どのようなものか興味があり、久しぶりにいってまいりました。</p>
<h2>展覧会ってこんなに混むんだ・・・</h3>
<p>開館と同時に行ったのですが、「こんなに混むの⁉」とびっくりし、<br />
見終わり、入口付近を見ると<strong>40分待ち</strong>となっており、さらにびっくりしました。</p>
<p>実は、開館と同時に行ったのは、一緒に行った友人の提案であり、<br />
僕は、「そんなに混まないでしょ」とタカをくくっていました。<br />
友人はよく展覧会に行くらしく、「他の展覧会もこんなもん」と言っていたので、<br />
展覧会を見に行く時は、<strong>開館と同時がいい</strong>ということが勉強になりました。<br />
ちなみに美術館側からは夕方から終了間際の時間帯が空いているとのことです。</p>
<h2>展覧会を見て思ったこと</h3>
<p>肝心の内容はというと、僕は芸術を言葉に表せる程の文才を持ち合わせていないので、<br />
簡潔に説明させてもらいます。</p>
<p>カラーリトグラフが多かったのですが、油彩、水彩、木炭、鉛筆等々で描かれた作品があり、<br />
どれも素晴らしいものでした。</p>
<p>特に注目したのは、商業ポスター等で、<br />
舞台女優サラ・ベルナール、ネスレ、モエ・エ・シャンドンの宣伝ポスターや、自転車屋さんのものなんかもありました。</p>
<p>当初の目的としては、<br />
配色についてや、構成について等、デザインにするにあたって参考になるものがあればいいと<br />
思ってたんですが、混んでいたので、そこまでじっくり見ることができませんでした。</p>
<p>ただ、僕なりに感じたことは、<br />
絵が上手いのはもちろん、ミュシャの作品は、<br />
確立されたスタイルがあり、アール・ヌーボーであることは当たり前なんですが、<br />
構成というかレイアウトがどのポスターでも似ていて、<br />
誰が作ったのかを聞かずとも、「これミュシャの作品？？」とわかるものでした。</p>
<p>そのスタイルが素晴らしかったからこそ、発注者や世間から求められ、称賛されたのだと思います。</p>
<p>今後、制作を行なっていく上で、<br />
場合によっては変える必要もあると思いますが、<br />
ある程度、<strong>自分なりのスタイルってのを確立</strong>していくことが大事だなぁと思わされました。</p>
<p>久々に感銘を受け、思わずカタログまで買ってしまいましたww</p>
<p>また、違う展覧会も行ってみようかなと思います。</p>


ミュシャ展を見に行ってきました

<p>先日、スマートフォンを活用した○○という企画のキャンペーンを考えておりまして、キャンペーンの事例を探していたのですが、その中で久しぶりに度肝を抜かれるGoogleサービスを見つけました。相当な難易度で工数が必要だと直感して、感服です。さすがGoogleというところですが、PCとスマートフォンを連動させた迷路が公開されていました。</p>
<h4 id="watch-headline-title">Chrome World Wide Maze</h3>
<p><a href="http://chrome.com/maze/" target="_blank">http://chrome.com/maze/</a></p>
<h3>特徴</h4>
<ul>
<li>PC、スマートフォン共にGoogle Chromeでなければ遊べない</li>
<li><b>WebGL</b>で描かれた3Dグラフィック</li>
<li>スマートフォンを傾けてボールを動かす</li>
<li>どんなサイトでも迷路にできる</li>
</ul>
<p>とにかくすごいです。度肝を抜かれるクオリティです。</p>
<p>WebGLによる3D迷路だけでも難易度が高いと思いますが、サイトのURLを入力すると、どんなサイトでも迷路になるし、操作はスマートフォンを用いてほぼ遅延なく操作をすることが出来ます。</p>
<p>参考の動画ありましたので、以下をどうぞ。</p>
<p><iframe loading="lazy" width="640" height="360" src="http://www.youtube.com/embed/7AvTl9aU5D8?feature=player_detailpage" frameborder="0" allowfullscreen=""></iframe></p>
<h2>その他の連動サイト</h3>
<p>株式会社キャッチボール公式サイト</p>
<p><a href="http://catch-ball.co.jp/" target="_blank">http://catch-ball.co.jp/</a></p>
<p>&nbsp;</p>
<p>キャッチボールさんってECをやっていると「後払い.com」が有名なのですが、全く別の会社さんでした。</p>
<p>親会社はバスキュールさんでこのようなコンテンツの制作能力に納得しました。</p>
<p>HTML5が普及する、今から5年ほど前からFLASHを用いてガラケーと連動させる釣りゲームを展開して、驚嘆したのを今でも覚えています。</p>
<p><a href="http://gyorol.bascule.co.jp/" target="_blank">http://gyorol.bascule.co.jp/</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>


PCとスマートフォンが連動した3D迷路のブラウザゲーム

<p>今回お仕事で<strong>地球</strong>の<strong>イラスト</strong>画像が必要になったのですが、</p>
<p>日本を真ん中にあるものを選んだり、光のかかり方がイメージに合うものなど、</p>
<p>デザインの都合に合わせたものを、素材の中から探す出すのは、</p>
<p>とても大変な作業となります。</p>
<p>&nbsp;</p>
<p><strong>Illustrator</strong>では、「効果」→「3D」の機能を使って、</p>
<p>簡単な<strong>3D</strong>の<strong>イラスト</strong>を制作することができるのですが、</p>
<p>この機能を使えば、比較的簡単に都合に合わせた地球のイラストを制作することができます。</p>
<p>&nbsp;</p>
<p>そこで、今回はその方法をご紹介いたします。</p>
<p>&nbsp;</p>
<h2>手順</h3>
<ol>
<li>世界地図のベクター画像(AI、EPSなど)を準備する</li>
<li>世界地図の画像をシンボルに追加する</li>
<li>半円を作る</li>
<li>「効果」の「3D」で回転体を作成する</li>
<li>シンボル化した世界地図をマッピングする</li>
<li>位置や影のかかり方などを調整する</li>
</ol>
<p>&nbsp;</p>
<h2>方法</h3>
<h3>1.世界地図のベクター画像(AI、EPSなど)を準備する</h4>
<p>世界地図のAIやEPSなどのベクター画像は、フリーの素材で入手することが可能です。</p>
<p>ここでは、データを紹介しているサイトをご紹介いたします。</p>
<p>→「<a href="http://photoshopvip.net/archives/15537" target="_blank">ベクターアートでデザインされた高品質な世界地図の無料素材25個まとめ</a>」</p>
<p>&nbsp;</p>
<h3>2.世界地図の画像をシンボル化する</h4>
<p>Illustratorでファイルを新規作成し、</p>
<p>先程入手したデータをアートボードの外に、配置します。</p>
<p>配置できたら、「シンボル」パネルの「新規シンボル」のアイコンをクリックします。</p>
<p><img decoding="async" loading="lazy" alt="step1-1" src="/uploads-archive/2013/05/nino_image01.jpg" width="430" height="300" /></p>
<p>シンボルオプションが表示されたら、「種類」を「グラフィック」に変更して、「OK」をクリックします。</p>
<p><img decoding="async" loading="lazy" alt="1-2" src="/uploads-archive/2013/05/nino_image02.jpg" width="430" height="300" /></p>
<p>これで、世界地図のデータをシンボルに追加することができました。</p>
<p><img decoding="async" loading="lazy" alt="1-3" src="/uploads-archive/2013/05/nino_image03.jpg" width="430" height="300" /></p>
<p>&nbsp;</p>
<h3>3.半円を作る</h4>
<p>次に、半円を作ります。</p>
<p>半円を作る方法は多くありますが、「円ツール」を使った方法が一番簡単です。</p>
<p>まず、「円ツール」を選択し、[Shift]キーを押したままドラッグし、正円を描きます。</p>
<p><img decoding="async" loading="lazy" alt="2-1" src="/uploads-archive/2013/05/nino_image04.jpg" width="428" height="300" /></p>
<p>そして、「ダイレクト選択ツール」に切り替えて、円のアンカーポイントをひとつだけ選択します（左右のどちらかがいいです）。</p>
<p><img decoding="async" loading="lazy" alt="2-2" src="/uploads-archive/2013/05/nino_image05.jpg" width="428" height="300" /></p>
<p>[Delete]キーを押して選択したアンカーポイントを削除すれば、半円が出来上がります。</p>
<p><img decoding="async" loading="lazy" alt="2-3" src="/uploads-archive/2013/05/nino_image06.jpg" width="428" height="300" /></p>
<p>&nbsp;</p>
<h3>4.「効果」の「3D」で回転体を作成する</h4>
<p>「選択ツール」に切り替えてこの半円を選択した後で、</p>
<p>上のメニューから、「効果」→「3D」→「回転体」を選択します。</p>
<p><img decoding="async" loading="lazy" alt="4-1" src="/uploads-archive/2013/05/nino_image08.jpg" width="500" height="400" /></p>
<p>3D回転オプションが表示されますので、右の「プレビュー」にチェックを入れて、</p>
<p>作成される球体の状態を確認しながら、各種オプションを調整します。</p>
<p><img decoding="async" loading="lazy" alt="4-2" src="/uploads-archive/2013/05/nino_image09.jpg" width="500" height="400" /></p>
<p>地球のベースとなる球体はこれで出来上がりです。</p>
<p>&nbsp;</p>
<h3>5.シンボル化した世界地図をマッピングする</h4>
<p>続いて、先程準備した世界時図を球体の上に描きます。</p>
<p>まずは、先程の3D回転体オプションで、右にある「マッピング」をクリックします。</p>
<p><img decoding="async" loading="lazy" alt="5-1" src="/uploads-archive/2013/05/nino_image10.jpg" width="500" height="400" /></p>
<p>上の「シンボル」から、手順２で制作した世界地図のシンボルを選択します。</p>
<p><img decoding="async" loading="lazy" alt="5-2" src="/uploads-archive/2013/05/nino_image11.jpg" width="500" height="400" /></p>
<p>下の「面にあわせる」、「アートワークに陰影を適用」をクリックし、右の「プレビュー」にチェックを入れて、</p>
<p>状態を確認し、よければ「OK」をクリックします。</p>
<p><img decoding="async" loading="lazy" alt="5-3" src="/uploads-archive/2013/05/nino_image12_2.jpg" width="500" height="400" /></p>
<p>これで世界地図を球体上に描くことができました。</p>
<p>&nbsp;</p>
<h3>6.位置や影のかかり方などを調整する</h4>
<p>最後に、プレビューで状態を確認しながら、</p>
<p>3D回転体オプションの上側にある「位置」の立方体をドラッグで操作して、</p>
<p>マッピングの位置を調整したり、</p>
<p>&nbsp;</p>
<p>下側にある「表面」（こちらが表示されていない場合は、右側の「詳細オプション」をクリック）にある球体上にある</p>
<p>ポイントを調整して、陰影の位置を調整したりするなどして、</p>
<p>好みの状態に調整します。</p>
<p><img decoding="async" loading="lazy" alt="6-1" src="/uploads-archive/2013/05/nino_image12.jpg" width="500" height="400" /></p>
<p>これで、地球の3Dイラストが完成しました。</p>
<p><img decoding="async" loading="lazy" alt="6-2" src="/uploads-archive/2013/05/nino_image13.jpg" width="500" height="400" /></p>
<p>ベクターデータなので、大きさや状態を後から自由に変えることができますので、</p>
<p>一つ作っておくと便利です。</p>
<p>&nbsp;</p>
<h3>おまけ 海を半透明にする</h4>
<p>地球の海の部分を半透明にしたイラストもよく見られますが、</p>
<p>こちらも簡単に制作できます。</p>
<p>&nbsp;</p>
<p>世界地図をシンボル化する前に、世界地図に半透明の背景を配置しておき、</p>
<p>一緒にシンボル化します。</p>
<p>&nbsp;</p>
<p>そしてこれをマッピングで指定するのですが、</p>
<p>このままでは、ベースになっている球体の色により、</p>
<p>半透明ではなくなってしまいます。</p>
<p>&nbsp;</p>
<p>そこで、マッピングのオプションにある、下の「構造体を表示しない」にチェックを入れます。</p>
<p>これにより、球体の色が反映されなくなり、マッピングのみが表示されるようになります。</p>
<p>これで、海が半透明になった地球の3Dイラストを制作することができました。</p>
<p><img decoding="async" loading="lazy" alt="6-3" src="/uploads-archive/2013/05/nino_image14.jpg" width="500" height="400" /></p>
<p><img decoding="async" loading="lazy" alt="地球の3Dイラスト" src="/uploads-archive/2013/05/nino_eye.jpg" width="656" height="398" /></p>


Illustratorを使った地球の3Dイラストの作り方

<p>空のファイルを作成したり、ファイルの更新時やアクセス日時を変更するには、<br />
touch 関数を使います。</p>
<p> touch関数は、ファイルの最終更新日時や最終アクセス日時を変更して、<br />
成功したらTRUEを返します。<br />
失敗したらFALSEを返します。</p>
<p>引数で指定されたファイルが存在しない場合には、自動的に空のファイルが作成されます。</p>
<p>※touch 関数の使い方<br />
論理値 = touch( パス , [最終変更日時], [最終アクセス日時]);</p>
<p>最終更新日時と最終アクセス日時の引数には、タイムスタンプで変更したい時間を指定します。<br />
最終更新日時と最終アクセス日時を省略した場合には、現在の時間で更新されます。</p>
<p>サンプルコード</p>
<p></p>

		<div id="crayon-64953fd5896a2079541447" 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">touch関数　サンプルコード</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;?php
$file = "test.txt";
header("Content-Type: text/plain; charset=UTF-8");

clearstatcache();
echo "[{$file}]";
echo (is_file($file) ? "ファイルが存在します":"ファイルが存在しません")."\n";

//本日の０時の日付の最終更新日時と最終アクセス日時に更新する
$result = touch($file, mktime(0,0,0),mktime(0,0,0));
echo "実行結果　=&gt;";
var_dump($result);

clearstatcache();
echo "最終アクセス日時 =&gt;".date('Y/m/d H:i:s', fileatime($file))."\n";
echo "最終更新日時 =&gt;".date('Y/m/d H:i:s',filemtime($file))."\n";</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-64953fd5896a2079541447-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5896a2079541447-2">2</div><div class="crayon-num" data-line="crayon-64953fd5896a2079541447-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5896a2079541447-4">4</div><div class="crayon-num" data-line="crayon-64953fd5896a2079541447-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5896a2079541447-6">6</div><div class="crayon-num" data-line="crayon-64953fd5896a2079541447-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5896a2079541447-8">8</div><div class="crayon-num" data-line="crayon-64953fd5896a2079541447-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5896a2079541447-10">10</div><div class="crayon-num" data-line="crayon-64953fd5896a2079541447-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5896a2079541447-12">12</div><div class="crayon-num" data-line="crayon-64953fd5896a2079541447-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5896a2079541447-14">14</div><div class="crayon-num" data-line="crayon-64953fd5896a2079541447-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5896a2079541447-16">16</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5896a2079541447-1"><span class="crayon-h">&lt;</span><span class="crayon-sy">?</span><span class="crayon-i">php</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5896a2079541447-2"><span class="crayon-sy">$</span><span class="crayon-i">file</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"test.txt"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5896a2079541447-3"><span class="crayon-e">header</span><span class="crayon-sy">(</span><span class="crayon-s">"Content-Type: text/plain; charset=UTF-8"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5896a2079541447-4">&nbsp;</div><div class="crayon-line" id="crayon-64953fd5896a2079541447-5"><span class="crayon-e">clearstatcache</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-64953fd5896a2079541447-6"><span class="crayon-i">echo</span><span class="crayon-h"> </span><span class="crayon-s">"[{$file}]"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5896a2079541447-7"><span class="crayon-e">echo</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e">is_file</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-i">file</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">?</span><span class="crayon-h"> </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-s">"\n"</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5896a2079541447-8">&nbsp;</div><div class="crayon-line" id="crayon-64953fd5896a2079541447-9"><span class="crayon-c">//本日の０時の日付の最終更新日時と最終アクセス日時に更新する</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5896a2079541447-10"><span class="crayon-sy">$</span><span class="crayon-i">result</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">touch</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-i">file</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">mktime</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-e">mktime</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-cn">0</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5896a2079541447-11"><span class="crayon-i">echo</span><span class="crayon-h"> </span><span class="crayon-s">"実行結果　=&gt;"</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5896a2079541447-12"><span class="crayon-e">var_dump</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-i">result</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5896a2079541447-13">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5896a2079541447-14"><span class="crayon-e">clearstatcache</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5896a2079541447-15"><span class="crayon-i">echo</span><span class="crayon-h"> </span><span class="crayon-s">"最終アクセス日時 =&gt;"</span><span class="crayon-sy">.</span><span class="crayon-e">date</span><span class="crayon-sy">(</span><span class="crayon-s">'Y/m/d H:i:s'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">fileatime</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-i">file</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-s">"\n"</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5896a2079541447-16"><span class="crayon-i">echo</span><span class="crayon-h"> </span><span class="crayon-s">"最終更新日時 =&gt;"</span><span class="crayon-sy">.</span><span class="crayon-e">date</span><span class="crayon-sy">(</span><span class="crayon-s">'Y/m/d H:i:s'</span><span class="crayon-sy">,</span><span class="crayon-e">filemtime</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-i">file</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-s">"\n"</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>※clearstatcache()<br />
 ファイルのステータスのキャッシュをクリアする</p>
<p>一つのスクリプト上で同じファイルが何度もチェックされ、 そのファイルが変更されたり削除されたりする可能性がある場合、 ステータスキャッシュを消去しなければならない。 このようなケースでは、 clearstatcache()を使用することで ファイルの情報に関してPHPが持っているキャッシュをクリアすることができます。</p>

空のファイルを作成する

<p>Webフォントは、最新のブラウザやスマートフォンやタブレットPCで利用できるだけでなく、</p>
<p>形式によってはIE6などでも利用することができます。</p>
<p>&nbsp;</p>
<p>なんとなくとっつきにくいイメージがあったのですが、調べてみると、</p>
<p>サービスも広がっていて、今後実際に自分で使う機会も増えていくように感じました。</p>
<p>&nbsp;</p>
<p>今回調べた中で、自作したアイコンをWebフォントに変換して利用する方法がありましたので、</p>
<p>実際にやってみることにしました。</p>
<p>（参考サイト：<a href="http://www.slideshare.net/r360studio/css-nite68-iconv3" target="_blank">仕事で使える、アイコン作画のコツとSVG変換のススメ</a>）</p>
<p>↓こちらが作ってみたものです</p>
<p><a class="demo" href="/demo/ninomiya/19/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<h3> 1.SVGのアイコン画像を準備する</h4>
<p>参考のサイトでは、Fireworksを使った方法でしたが、</p>
<p>今回はIllustratorでアイコンを制作し、SVGで出力する方法を使いました。</p>
<h4>i.画像の準備</h6>
<p><img decoding="async" loading="lazy" alt="Illustratorでアイコンを制作" src="/uploads-archive/2013/05/nino_image_01.jpg" width="640" height="497" /></p>
<p>パスツールなどを使って画像を制作します。</p>
<p>ポイントは、シルエットにし、重なった部分は「パスファインダー」などを使って合体させておくことです。</p>
<p>合体させておかないと、Webフォントにしたときに、意図した形にならないことがあります。</p>
<p>&nbsp;</p>
<p>また、Webフォントに変換してしまうと、グラデーションはもちろん、色の情報はなくなってしまうので、</p>
<p>黒一色で制作するとわかりやすいです。</p>
<p>&nbsp;</p>
<h4>ii.SVGで出力</h6>
<p>できたら、「ファイル」→「Webおよびデバイス用に保存」で、保存形式をSVGに設定し、書き出します。</p>
<p><img decoding="async" loading="lazy" alt="SVG形式で出力" src="/uploads-archive/2013/05/nino_image_02.jpg" width="716" height="549" /></p>
<p>&nbsp;</p>
<h3>2.SVGをWebフォントに変換</h4>
<p>IcoMoonのWebアプリを使ってWebフォントに変換します。</p>
<p>サイトはこちら→<a href="http://icomoon.io/app/" target="_blank">http://icomoon.io/app/</a></p>
<h4>i.ファイルを選択する</h6>
<p><img decoding="async" loading="lazy" alt="IcoMoon　ファイルを選択" src="/uploads-archive/2013/05/nino_image_03.jpg" width="640" height="442" /></p>
<p>「import Icons」をクリックして画像を選択して（複数選択可）、</p>
<p>その後下に表示されたアイコンをクリックして選択します。</p>
<p>&nbsp;</p>
<h4>ii.アイコンをあてる文字を選択し、データをダウンロード</h6>
<p><img decoding="async" loading="lazy" alt="フォントをあてる文字を選択" src="/uploads-archive/2013/05/nino_image_04.jpg" width="656" height="385" /></p>
<p>アイコンをあてる文字をそれぞれ選択します。</p>
<p>ここで選択した文字を入力したときに、その文字にあてたアイコンが表示されることになります。</p>
<p>フォント名を「Preferences」から指定することができます。</p>
<p>入力が終わったら、下のDownloadのボタンからデータをダウンロードしてください。</p>
<p>&nbsp;</p>
<h3>3.HTML+CSSで実装する</h4>
<p>IcoMoonでダウンロードしたデータに、フォントのセットと、CSS等のサンプルが入っています。</p>
<p>こちらを利用して、Webフォントを指定していきます。</p>
<p>HTML</p>

		<div id="crayon-64953fd5894a6118355911" 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;p&gt;&lt;span class="icon"&gt;m&lt;/span&gt;&amp;nbsp;桃&amp;nbsp;-m-&lt;/p&gt;
&lt;p&gt;&lt;span class="icon"&gt;y&lt;/span&gt;&amp;nbsp;ヨット&amp;nbsp;-y-&lt;/p&gt;
&lt;p&gt;&lt;span class="icon"&gt;p&lt;/span&gt;&amp;nbsp;鉛筆&amp;nbsp;-p-&lt;/p&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-64953fd5894a6118355911-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894a6118355911-2">2</div><div class="crayon-num" data-line="crayon-64953fd5894a6118355911-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5894a6118355911-1"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">m</span><span class="crayon-r ">&lt;/span&gt;</span><span class="crayon-i ">&amp;nbsp;桃&amp;nbsp;-m-</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894a6118355911-2"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">y</span><span class="crayon-r ">&lt;/span&gt;</span><span class="crayon-i ">&amp;nbsp;ヨット&amp;nbsp;-y-</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-64953fd5894a6118355911-3"><span class="crayon-r ">&lt;p&gt;</span><span class="crayon-r ">&lt;span </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"icon"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">p</span><span class="crayon-r ">&lt;/span&gt;</span><span class="crayon-i ">&amp;nbsp;鉛筆&amp;nbsp;-p-</span><span class="crayon-r ">&lt;/p&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>アイコンをあてる文字のみ、&lt;span&gt;などでクラスをつけます。</p>
<p>CSS</p>

		<div id="crayon-64953fd5894aa728540308" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
@font-face {
	font-family: 'testicon';
	src:url('fonts/testicon.eot');
	src:url('fonts/testicon.eot?#iefix') format('embedded-opentype'),
		url('fonts/testicon.woff') format('woff'),
		url('fonts/testicon.ttf') format('truetype'),
		url('fonts/testicon.svg#testicon') format('svg');
	font-weight: normal;
	font-style: normal;
}
.icon{
	font-family: "testicon";
}</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-64953fd5894aa728540308-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-2">2</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-4">4</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-6">6</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-8">8</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-10">10</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5894aa728540308-12">12</div><div class="crayon-num" data-line="crayon-64953fd5894aa728540308-13">13</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-64953fd5894aa728540308-1"><span class="crayon-n">@font-face </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-2"><span class="crayon-h">	</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'testicon'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-3"><span class="crayon-h">	</span><span class="crayon-e ">src</span><span class="crayon-sy">:</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.eot'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-4"><span class="crayon-h">	</span><span class="crayon-e ">src</span><span class="crayon-sy">:</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.eot?#iefix'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'embedded-opentype'</span><span class="crayon-sy">)</span><span class="crayon-i ">,</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-5"><span class="crayon-h">		</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.woff'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'woff'</span><span class="crayon-sy">)</span><span class="crayon-i ">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-6"><span class="crayon-h">		</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.ttf'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'truetype'</span><span class="crayon-sy">)</span><span class="crayon-i ">,</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-7"><span class="crayon-h">		</span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'fonts/testicon.svg#testicon'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'svg'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-8"><span class="crayon-h">	</span><span class="crayon-e ">font-weight</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">normal</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-9"><span class="crayon-h">	</span><span class="crayon-e ">font-style</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">normal</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-10"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-11"><span class="crayon-k ">.icon</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5894aa728540308-12"><span class="crayon-h">	</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"testicon"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5894aa728540308-13"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ダウンロードしたデータに入っているstyle.cssにある「@font-face」をコピー&amp;ペーストし、</p>
<p>対象のクラスにフォント名を指定します。</p>
<p>あとは装飾などをCSSで指定すれば実装が完了します。</p>
<p>大きさを自由に変えられるので、Retinaなどの高解像度のデバイスでも安心です。</p>
<p>&nbsp;</p>
<p>アイコンを制作する時間や手間が取れないときは、多くのWebフォントアイコンを公開しているサイトもありますので、</p>
<p>是非ご利用してみてください。</p>
<p>「<a href="http://weboook.blog22.fc2.com/blog-entry-332.html" target="_blank">画像の代わりに使えるアイコンタイプのWebフォントのまとめ</a>」</p>
<p>&nbsp;</p>
<p>参考サイト：</p>
<p>アイコンのWebフォント化：</p>
<p><a href="http://www.slideshare.net/r360studio/css-nite68-iconv3" target="_blank">http://www.slideshare.net/r360studio/css-nite68-iconv3</a></p>
<p>Webフォントの形式と対応状況：</p>
<p><a href="http://tech.nitoyon.com/ja/blog/2012/04/26/web-font-popularity/">http://tech.nitoyon.com/ja/blog/2012/04/26/web-font-popularity/</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>

オリジナルアイコンをWebフォントで使ってみよう

<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">
<div class="booklink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/asin/4833420309/sackoh71-22/" target="_blank" ><img decoding="async" src="http://ecx.images-amazon.com/images/I/51cfJ0yPtSL._SL160_.jpg" style="border: none;" /></a></div>
<div class="booklink-info" style="line-height:120%;/zoom: 1;overflow: hidden;">
<div class="booklink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/asin/4833420309/sackoh71-22/" target="_blank" >BQ〜次代を生き抜く新しい能力〜</a></p>
<div class="booklink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom:5px;">林野 宏 プレジデント社 2012-12-19    </div>
<div class="booklink-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4833420309/sackoh71-22/" name="booklink" rel="nofollow" target="_blank">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left"></div>
</div>
<p>クレディセゾン社長の本。</p>
<p>新しい概念として、BQ（Business Quotient）ビジネス感度を提唱する。このような本の類は、ドラッカーしかりダニエル・ピンク氏のモチベーション3.0しかり、成長が約束された高度成長期時代からの変化に対応するための手段として、体得しておきたい内容です。</p>
<p>以下抜粋</p>
<ul>
<li>BQ（ビジネス感度）＝IQ（知性）×EQ（理性・人間性）×SQ（感性）</li>
<li>知識→（経験）→知恵→（行動）→富</li>
<li>構造変革期に入り、熾烈な椅子取りゲームに入っている。</li>
<li>市場が拡大する前提の上での終身雇用、昇給、年功序列は終わった。</li>
<li>熾烈な椅子取りゲームを勝ち残る人材として、BQが必要である。</li>
<li>ものづくり中心だった高度成長期はIQが活躍</li>
<li>安定成長期はEQの高い人が組織で出世</li>
<li>これからの時代はSQが一番重要！</li>
<li>開局に携わったJ-WAVEでは、音楽を流し続けるという新しスタイルを提案</li>
<li>クレディセゾンに転籍後は、サインレスや永久不滅ポイントなど各種イノベーションを牽引</li>
<li>BQはトレーニング次第で向上する</li>
<li>工業化社会→情報知識社会→知的感性社会</li>
<li>当時社長を務めていた堤清二さんの感性にしたがうネーミングに強い影響</li>
<li>BQの高さはジョブズ＞松下幸之助。感性が必要とされる社会ではなかった。しかし、高いEQを持っていた。</li>
<li>だらだら残業はBQの敵。</li>
<li>感情と感性を混同しない。感性がうずかないのならば、落ち着いて論理的に判断をすること</li>
<li>欠点は直さず、長所を伸ばせ</li>
<li>A＝cs<sup>2 </sup>Ability＝能力は、Concertration=集中したSecond＝秒の2乗に比例する</li>
<li>感性を磨くためには、まず芸術への接触頻度そして、仕事から遠いところにある経験や知識</li>
<li>リーダーシップを状況に合わせて使い分けろ。ビジョン型、コーチ型、リレーション型、パートナー型、ペースセッター型、パワー型</li>
<li>成功体験は生ゴミと同じ</li>
</ul>
<h2>まとめ</h3>
<p>時代が変わったということは常々感じていたが、感性という観点は非常に斬新であった。特に、感性を磨くための、芸術への接触と仕事から遠いところにある経験や知識というところは意識していきたいと思います。しかしながら、仕事から遠いことをしていても、この施設はどのように運営をしているのだろう？このお店は、なぜ人が入っているのか？などなど、四六時中ビジネスにつながることを考えてしまうんですけどね。</p>


BQ～次代を生き抜く新しい能力～

<p>この度、テンプレートモンスター ジャパンを運営する株式会社ネットオンと提携し、</p>
<p>テンプレートモンスター ジャパンのサイト内で、テンプレートをLaunchCartに適用させるオプションが追加されました。</p>
<p>これにより、クオリティの高いテンプレートを安価で手に入れることができるようになり、</p>
<p>ECサイト開設までの時間を短縮することが可能になりました。</p>
<p>&nbsp;</p>
<p>詳しくはこちらを御覧ください。</p>
<p><a href="http://www.value-press.com/pressrelease/110635" target="_blank">http://www.value-press.com/pressrelease/110635</a></p>
<p>&nbsp;</p>
<p>今回は、テンプレートモンスター ジャパンからLaunchCartのお申込みをする方法を簡単ですがご説明致します。</p>
<p>&nbsp;</p>
<h2>テンプレートモンスター ジャパンへアクセス</h3>
<p><a href="/uploads-archive/2013/05/1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2102" alt="1" src="/uploads-archive/2013/05/1.jpg" width="656" height="404" srcset="/uploads-archive/2013/05/1.jpg 656w, /uploads-archive/2013/05/1-300x185.jpg 300w, /uploads-archive/2013/05/1-228x140.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p><a href="http://www.templatemonster.jp/" target="_blank">http://www.templatemonster.jp/</a></p>
<p>へアクセスします。</p>
<p>ヘッダーの「ECサイトテンプレート」をクリックします。</p>
<p>&nbsp;</p>
<h2>好きなテンプレートを選ぶ</h3>
<p><a href="/uploads-archive/2013/05/2.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2103" alt="2" src="/uploads-archive/2013/05/2.jpg" width="656" height="404" srcset="/uploads-archive/2013/05/2.jpg 656w, /uploads-archive/2013/05/2-300x185.jpg 300w, /uploads-archive/2013/05/2-228x140.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>好きなテンプレートを選びます。</p>
<p>色や雰囲気で検索できるので、探しやすいと思います。</p>
<p>気に入ったテンプレートが見つかったら、サムネイルをクリックします。</p>
<p>&nbsp;</p>
<h2>オプションをチェック</h3>
<p><a href="/uploads-archive/2013/05/3.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2104" alt="3" src="/uploads-archive/2013/05/3.jpg" width="656" height="404" srcset="/uploads-archive/2013/05/3.jpg 656w, /uploads-archive/2013/05/3-300x185.jpg 300w, /uploads-archive/2013/05/3-228x140.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>ページ中段、右側に「テンプレート編集オプション」というボックスがあります。</p>
<p>「このデザインを、Launch Cartに適用させる 無料」というチェックボックスにチェックを入れ、</p>
<p>「購入に進む」ボタンをクリックします。</p>
<p>※一部LaunchCartオプションに対応していないテンプレートもございます。</p>
<p>&nbsp;</p>
<h2>購入画面に進む</h3>
<p><a href="/uploads-archive/2013/05/4.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2105" alt="4" src="/uploads-archive/2013/05/4.jpg" width="656" height="404" srcset="/uploads-archive/2013/05/4.jpg 656w, /uploads-archive/2013/05/4-300x185.jpg 300w, /uploads-archive/2013/05/4-228x140.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>あとは購入画面に進み、画面にしたがって入力をすれば完了です。</p>
<p>お知らせメールが送信されますので、本文にしたがってテンプレートをダウンロードして下さい。</p>
<p>その後当社からご連絡させて頂きます。</p>
<p>&nbsp;</p>
<p>LaunchCartは大規模ECサイトにも対応した高機能のECサイト構築システムですので</p>
<p>ぜひこの機会にシステムのお乗換えをご検討下さい。</p>
<p>&nbsp;</p>
<p>※Launchcartの詳細は以下を御覧ください。</p>
<p><a href="http://launchcart.jp/" target="_blank">http://launchcart.jp/</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


テンプレートモンスターでLaunchCartオプション(無料)が使えるようになりました

<p>wordpressのプラグインのTOP108個を元素記号表に見立て紹介しているサイトです。</p>
<p>よく使うものや、知らないプラグインもありますね〜<br />
こういう風に紹介しようと思った発想が素晴らしいですよねー</p>
<p>このサイトではどんなプラグインかはわからないんですけど、よく使われてるプラグインなので、<br />
きっと便利なプラグインなんでしょう！</p>
<p>いろいろと試してみてみたいですね〜</p>
<p><a href="http://plugintable.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2092" alt="The Periodic Table of WordPress Plugins" src="/uploads-archive/2013/05/The-Periodic-Table-of-WordPress-Plugins.jpg" width="641" height="400" srcset="/uploads-archive/2013/05/The-Periodic-Table-of-WordPress-Plugins.jpg 1361w, /uploads-archive/2013/05/The-Periodic-Table-of-WordPress-Plugins-300x188.jpg 300w, /uploads-archive/2013/05/The-Periodic-Table-of-WordPress-Plugins-768x481.jpg 768w, /uploads-archive/2013/05/The-Periodic-Table-of-WordPress-Plugins-228x143.jpg 228w, /uploads-archive/2013/05/The-Periodic-Table-of-WordPress-Plugins-1024x641.jpg 1024w" sizes="(max-width: 641px) 100vw, 641px" /></a><br />
<a href="http://plugintable.com/" target="_blank">The Periodic Table of WordPress Plugins</a></p>
<p>&nbsp;</p>
<p>この108個の中にはなかったんですが、<br />
僕がたまに使うプラグインを紹介します。</p>
<p><a href="http://wordpress.org/extend/plugins/custom-field-template/" target="_blank">Custom Field Template</a></p>
<p>名前の通り、カスタムフィールドを使ったものですが、<br />
ページや記事に一定の要素をカスタムフィールドで登録したい場合、テンプレートにして、<br />
自動的に表示してくれたり、カテゴリ等で、表示するテンプレートを切り替えたりなんてこともできます。</p>
<p>カスタムフィールドの値を wp_postmetaテーブルに保持するので、<br />
特に専用のタグを使うことなく、通常のカスタムフィールドを呼び出す感じで、使用できるのも良い点です。</p>
<p>もちろん、テキストフィールドだけでなく、テキストエリア、ラジオボタン、チェックボックス、セレクト、ファイルアップロードも使用できます。</p>
<p>詳しい使い方は、このサイトをご覧ください。</p>
<p><a href="http://komodo.arrow.jp/wp/46" target="_blank">Custom Field Template（カスタムフィールドテンプレート） | WordPress 編</a></p>


wordpressのプラグインを元素記号表に見立てTOP108個紹介しているサイト

<p>普段はPHPの<a href="http://www.php.net/manual/ja/function.exec.php" target="_blank">exec</a>や<a href="http://php.net/manual/ja/function.system.php" target="_blank">system</a>関数はあまり使わないですが、<br />
今回は外部ファイルを取得するため、OSの<a href="http://itpro.nikkeibp.co.jp/article/COLUMN/20060228/230995/" target="_blank">wget</a>コマンドを使いたいと思います。<br />
execとsystem関数の比較をしてみたいと思います。</p>
<h2>exec</h3>
<p></p>

		<div id="crayon-64953fd58928f284191255" 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;">
string exec ( string $command [, array &amp;$output [, int &amp;$return_var ]] )</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-64953fd58928f284191255-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-64953fd58928f284191255-1"><span class="crayon-t">string</span><span class="crayon-h"> </span><span class="crayon-e">exec</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">string</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">command</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">array</span><span class="crayon-h"> </span>&<span class="crayon-sy">$</span><span class="crayon-i">output</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">int</span><span class="crayon-h"> </span>&<span class="crayon-sy">$</span><span class="crayon-i">return_var</span><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>・戻り値<br />
マニュアルには、「コマンド結果の最後の行を返します」と書いてありますが、<br />
実は何か返してくるのが微妙に分かりません。</p>
<p>・$command<br />
実行したいコマンド</p>
<p>・$output<br />
コマンドの出力内容が、$outputに配列として格納します。<br />
実行結果の出力内容を調べるのに、このパラメーターを使えばいいと思います。</p>
<p>・$return_var<br />
コマンドの実行結果が正常の場合は数字の0、 異常野場合は数字の1になります。</p>
<h2>system</h3>
<p></p>

		<div id="crayon-64953fd589294690286249" 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;">
string system ( string $command [, int &amp;$return_var ] )</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-64953fd589294690286249-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-64953fd589294690286249-1"><span class="crayon-t">string</span><span class="crayon-h"> </span><span class="crayon-e">system</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-t">string</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">command</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-t">int</span><span class="crayon-h"> </span>&<span class="crayon-sy">$</span><span class="crayon-i">return_var</span><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>・戻り値<br />
マニュアルには、「成功時はコマンド出力の最後の行を返し、失敗時は FALSE を返します。」と書いてありますが、<br />
実はexecの$outputを配列ではなく文字列で返す感じです。</p>
<p>・$command<br />
実行したいコマンド</p>
<p>・$return_var<br />
コマンドの実行結果が正常の場合は数字の0、 異常野場合は数字の1になります。</p>
<h2>おまけ：Linuxの標準出力と標準エラー出力</h3>
<p>Linuxの標準出力は1番、標準エラー出力は2番です。<br />
標準エラー出力に標準出力にまとめるに、</p>
<p></p>

		<div id="crayon-64953fd589295620446433" 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;">
command 2 &gt; &amp;1</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd589295620446433-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-64953fd589295620446433-1"><span class="crayon-r">command</span><span class="crayon-h"> </span><span class="crayon-cn">2</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-h">&amp;1</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>と書きます。</p>
<p>それを利用して、execやsystemの出力結果に、正常の場合でも異常の場合でも、結果を取得することができます。</p>
<p></p>

		<div id="crayon-64953fd589296029197668" 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;">
$cmd = "ls -al 2&gt;&amp;1";

// execの場合
exec( $cmd, $output);
var_dump($output);// 結果出力

// systemの場合
$res = system($cmd);
var_dump($res);// 結果出力</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-64953fd589296029197668-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd589296029197668-2">2</div><div class="crayon-num" data-line="crayon-64953fd589296029197668-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd589296029197668-4">4</div><div class="crayon-num" data-line="crayon-64953fd589296029197668-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd589296029197668-6">6</div><div class="crayon-num" data-line="crayon-64953fd589296029197668-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd589296029197668-8">8</div><div class="crayon-num" data-line="crayon-64953fd589296029197668-9">9</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-64953fd589296029197668-1"><span class="crayon-v">$cmd</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"ls -al 2&gt;&amp;1"</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd589296029197668-2">&nbsp;</div><div class="crayon-line" id="crayon-64953fd589296029197668-3"><span class="crayon-c">// execの場合</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd589296029197668-4"><span class="crayon-e">exec</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">$cmd</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">$output</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd589296029197668-5"><span class="crayon-e">var_dump</span><span class="crayon-sy">(</span><span class="crayon-v">$output</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">// 結果出力</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd589296029197668-6">&nbsp;</div><div class="crayon-line" id="crayon-64953fd589296029197668-7"><span class="crayon-c">// systemの場合</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd589296029197668-8"><span class="crayon-v">$res</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">system</span><span class="crayon-sy">(</span><span class="crayon-v">$cmd</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd589296029197668-9"><span class="crayon-e">var_dump</span><span class="crayon-sy">(</span><span class="crayon-v">$res</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">// 結果出力</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

【PHP】外部プログラムの実行

CSS3でステップのリストをつくる

JSON形式

<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">
<div class="booklink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/asin/4478022372/sackoh71-22/" target="_blank" ><img decoding="async" src="http://ecx.images-amazon.com/images/I/51XZ4GdlF7L._SL160_.jpg" style="border: none;" /></a></div>
<div class="booklink-info" style="line-height:120%;/zoom: 1;overflow: hidden;">
<div class="booklink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/asin/4478022372/sackoh71-22/" target="_blank" >テレビショッピングは、なぜ値段を最後に言うのか?</a></p>
<div class="booklink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom:5px;">理央 周 ダイヤモンド社 2013-01-25    </div>
<div class="booklink-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4478022372/sackoh71-22/" name="booklink" rel="nofollow" target="_blank">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left"></div>
</div>
<p>タイトルに釣られて読んでみました。</p>
<p>内容としては、小説仕立てのマーケティング実践本でした。</p>
<p>いわゆる「もしドラ」系に類する本であると思います。</p>
<p>何より私も著者の秀逸なタイトル付け（ネーミング）というマーケティングに思わず手に取ってしまいました。</p>
<p>&nbsp;</p>
<p>以下抜粋です。</p>
<h2>マーケティングとは「売れる仕組み」を創り出すこと</h3>
<ul>
<li>マーケティングの原点はコトラーではなく、ドラッガー分かりやすく伝えること。</li>
<li>駅の広告にもヒントあり。定点観測で世の中の変化をキャッチ</li>
<li>小学生はDSで写真を取る。キレイである必要はなく、DSで加工して遊べるかどうか？</li>
<li>iphoneといちご大福は同じ理由で売れている。イノベーションは今までにない組合わせをすること</li>
<li>同じコンビニなのに、地方によって商品が違う。お客様のターゲットを絞り込むこと</li>
<li>値段を先に言うと値段設定が頭に刻まれてしまい（アンカリング）し、商品を正確に見れず思惑が混入（バイアス）がしてしまう。だから、テレビショッピングは、値段を最後にいう。</li>
<li>お客の心の動きに合わせて内容を構成する</li>
</ul>
<h2>まとめ</h3>
<p>マーケティングとはどのようなものか？様々な理論やフレームワークを分かりやすく解説してくれています。ビジネスを行なっていく上で、共通の概念となりますので、是非、営業、マーケティング職以外の方にも読んでいいただきたい一冊です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


テレビショッピングは、なぜ値段を最後に言うのか?

<p>フラットデザインとは、最近の流行りで、<br />
無駄を省いた、シンプルな質感でしばらくは今後のデザイントレンドになると考えられるものです。<br />
ミニマルな感じで僕は非常に好きなタイプなのですが、<br />
このデザインでキーとなるのが、<br />
「タイポグラフィ、写真、アイコン、配色」<br />
で、特に重要なのがタイポグラフィなので、<br />
日本語を使うサイトでは、英語圏のサイトに比べるとちと難易度が高いのが悩ましい所。。。</p>
<p>まぁそんなことをいってもしかたがないので、<br />
実際制作するにあたり、役に立つサイト等をお伝えします。</p>
<p>&nbsp;</p>
<p>まずは、他のサイトのフラットデザインはどんなもんかと調べるためのサイトをご紹介。<br />
<a href="http://fltdsgn.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2043" alt="Flat UI Design - A showcase of the best examples of the flat UI design aesthetic on the web." src="/uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web..jpg" width="601" height="334" srcset="/uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web..jpg 1167w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-300x167.jpg 300w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-768x427.jpg 768w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-228x127.jpg 228w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-1024x569.jpg 1024w" sizes="(max-width: 601px) 100vw, 601px" /></a></p>
<p><a href="http://fltdsgn.com/" target="_blank">Flat UI Design &#8211; A showcase of the best examples of the flat UI design aesthetic on the web.</a></p>
<p>&nbsp;</p>
<p>次に、フラットデザインで配色するための色を手っ取り早く知るためのサイト</p>
<p><a href="http://flatuicolors.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2046" alt="Flat UI Colors" src="/uploads-archive/2013/05/Flat-UI-Colors.jpg" width="600" height="329" srcset="/uploads-archive/2013/05/Flat-UI-Colors.jpg 1182w, /uploads-archive/2013/05/Flat-UI-Colors-300x165.jpg 300w, /uploads-archive/2013/05/Flat-UI-Colors-768x422.jpg 768w, /uploads-archive/2013/05/Flat-UI-Colors-1024x562.jpg 1024w, /uploads-archive/2013/05/Flat-UI-Colors-228x125.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://flatuicolors.com/" target="_blank">Flat UI Colors</a></p>
<p>&nbsp;</p>
<p>そして、フラットデザインに使えるアイコンの紹介。</p>
<p>こちらは先日書いた以下のブログをご覧ください！<br />
<a href="/designer/%E5%95%86%E7%94%A8%E7%84%A1%E6%96%99%EF%BC%81%E6%B5%81%E8%A1%8C%E3%82%8A%E3%81%AE%E3%83%95%E3%83%A9%E3%83%83%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%B4%E3%81%A3%E3%81%9F%E3%82%8A.html" target="_blank">商用無料！流行りのフラットデザインにぴったりなアイコン4セット</a></p>
<p>&nbsp;</p>
<p>最後は、実際にデザインしてあるパーツ等をPSDでダウンロード出来る素材のご紹介です。</p>
<p>縦長すぎるので、画像は省力しますが、<br />
この２つは手元に置いておきたい素材です。<br />
色味の参考にしてもよし、そのまま使ってもよしな非常にありがたい品です。</p>
<p><a href="http://designmodo.github.io/Flat-UI/" target="_blank">Flat UI</a></p>
<p><a href="http://designmodo.com/square-free/" target="_blank">Square UI Free &#8211; User Interface Kit &#8211; Designmodo</a><br />
こちらはツイッターでつぶやくとダウンロード出来るようになります。</p>
<p>&nbsp;</p>
<p>最後にあまり関係ないですが、<br />
webサイトで使用している色を教えてくれるサイトのご紹介です。<br />
urlを入れるだけで、そのサイトが実際に使っている色を割合も含めて表示してくれます。</p>
<p><a href="/uploads-archive/2013/05/Colours.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2054" alt="Colours" src="/uploads-archive/2013/05/Colours.jpg" width="600" height="333" srcset="/uploads-archive/2013/05/Colours.jpg 1167w, /uploads-archive/2013/05/Colours-300x167.jpg 300w, /uploads-archive/2013/05/Colours-768x427.jpg 768w, /uploads-archive/2013/05/Colours-228x127.jpg 228w, /uploads-archive/2013/05/Colours-1024x569.jpg 1024w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p><a href="http://webcolourdata.com/">Colours</a></p>


フラットデザインの制作に役立つあれこれ

jPlayerを使ってみた

<p>最近少し時間をできたから、スマートフォンアプリの開発ツールいくつを試すことができました。<br />
今回は、それらのツールを比較して、いいところとよくないところをまとめてみたいと思います。</p>
<p>また、比較は下記項目で行いたいと思います。<br />
・開発環境整備の容易さ<br />
・ツールの使い勝手<br />
・複数プラットフォームの対応<br />
・ソースコードの再利用性（別のプラットフォームでいかにソースコードを書けずに同じ動作のアプリを作れるか）<br />
・開発作業の役割分担に向く</p>
<h2>XCode</h3>
<p>・よいところ<br />
Macなら、XcodeをAppStoreからダウンロードしてインストールすれば、開発環境の整備が完了になりますので非常にやりやすいです。<br />
今後リリースなどのため、開発用itunes idを持つことはオススメです。</p>
<p>XCodeは非常に使いやすいです。<br />
コードを書かずに画面を弄るだけでも、簡単なアプリを作れるレベルなんです。</p>
<p>・よくないところ<br />
言うまでもなく、Androidアプリは作れないです。</p>
<h2>Titanium</h3>
<p>・よいところ<br />
Eclipseみたいな開発ツールが、Titaniumのサイトからダウンロードできます。<br />
Eclipseになれた人には親切で使いやすいと思います。</p>
<p>iOSとAndroidの環境を別々設定する必要ありますが、<br />
開発はTitaniumの開発ツールで一本のソースで対応できます。</p>
<p>また、javascriptの文法で開発を進みますので、<br />
javascriptになれた人は楽になります。</p>
<p>・よくないところ<br />
Simulatorで実行する前には、どういう見た目が出てくるのは分かりません。<br />
デザインがあっても、プログラマーがまずそれをjavasciprtに書き直す必要あります。<br />
その意味でプログラマーがやることが多くなるから、タスクの分解はしにくいかもしりません。</p>
<p>独自のAPIがあって、Objective-CやJavaになれた人でも、そのAPIを習わなくてはいけません。<br />
その意味では勉強コストがかかります。</p>
<h2>Phonegap</h3>
<p>・よいところ<br />
HTML5/CSS/JavaScriptが使えます！<br />
デザイナーが作ったHTMLが直接使えます！！<br />
開発する前にも見た目が分かったのは大きいです。</p>
<p>複数プラットフォームでも、大体同じHTMLコードで行けます。</p>
<p>・よくないところ<br />
自分でIDEがないため、iOSならXCodeを使い、AndroidならEclipseを使うことになります。<br />
ほかMonacaなどのWeb IDEサービスもありますが、Local IDEを使ってた人にとっては微妙な感じです。</p>
<p>Phonegapは、プロジェクト作成やSimulator実行のときだけ使うライブラリのようなものです。<br />
API（HTML5だけで使えないDeviceの機能、Push通知など）は、htmlに特別な書き方で書きます。<br />
が、プラットフォームによって微妙に違っています。</p>
<h2>まとめ</h3>
<p>iPhoneアプリだけ開発するなら、XCodeを使いたいと思います。<br />
Androidアプリも開発するなら、役割分担とソースの再利用性を考えればPhonegapを使いたいと思います。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2013/05/16

2013/05/16

2013/05/16

2013/05/16

2013/05/15

2013/05/09

2013/05/09

2013/05/09

2013/05/08

2013/05/08

2013/05/08

2013/05/02

2013/05/02

2013/05/02

2013/05/02

2013/05/02

2013/05/01

2013/04/25