【Canvas】円でぼかしのような視覚効果

<p>Chromeの拡張機能の紹介です。</p>
<p>Chromeのデフォルトのダッシュボードを海外のweb,デザイン系のブログ・ギャラリーサイトのフィードを表示しちゃう機能です。</p>
<p><a class="link" href="https://chrome.google.com/webstore/detail/panda-4-news-inspiration/haafibkemckmbknhfkiiniobjpgkebko" target="_blank">Panda</a></p>
<p>通常のダッシュボードは、<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-9688" src="/uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-1024x634.png" alt="スクリーンショット 2016-02-23 16.10.54" width="630" height="390" srcset="/uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-1024x634.png 1024w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-300x186.png 300w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-768x476.png 768w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-228x141.png 228w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b.png 1027w" sizes="(max-width: 630px) 100vw, 630px" /><br />
こんな感じのgoogleのページだと思うのですが、</p>
<p>この拡張機能をインストールして有効化させたら、<br />
以下のようなページがデフォルトとして表示されるようになります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-9693" src="/uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-1024x694.png" alt="スクリーンショット 2016-02-23 16.17.37" width="630" height="427" srcset="/uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-1024x694.png 1024w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-300x203.png 300w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-768x520.png 768w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-228x154.png 228w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017.png 1104w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>初期はこんな感じで、左側がニュースのリスト、右側がギャラリーというレイアウトなのですが、<br />
以下のように変更もできます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-9694" src="/uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-1024x690.png" alt="スクリーンショット 2016-02-23 16.19.12" width="630" height="425" srcset="/uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-1024x690.png 1024w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-300x202.png 300w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-768x518.png 768w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-228x154.png 228w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d.png 1104w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>有名なサイトばかり揃っており、自分で選択もできるので非常に良いです。</p>
<p>忙しいとサイトを見に行くことを忘れてしまうこともあると思いますが、<br />
これがあれば自然に目に入ってくる可能性が高いのでおすすめです!!</p>
<p>これの日本verが欲しいな・・・</p>


デザイナー必須!?のChromeのエクステンション「Panda」

<h2>検索ソートの種類</h2>
<p>検索結果のソートには様々なものがありますが、まとめると以下のような一覧になる気がしています。</p>
<ul>
<li>関連度 relevancy, relevance
</li>
<li>人気順（売れ筋順、ランキング順）top selling
</li>
<li>新着順、発売日順 new arrivals
</li>
<li>商品名順 昇順 あ→わ name a-z
</li>
<li>商品名順 降順 わ→あ name z-a
</li>
<li>重量 軽い順 heaviest
</li>
<li>重量 重い順 lightest
</li>
<li>評価順 top rated, avg. cusotmer review
</li>
<li>評価件数の多い順
</li>
<li>価格の低い順 price low to high
</li>
<li>価格の高い順 price high to low
</li>
<li>発売中 On Sale Now
</li>
<li>ポイント率 point rate
</li>
<li>お気に入りの数
</li>
<li>よく見られている順
</li>
</ul>
<h2>所感</h2>
<p>ECサイトにおいて上記のソートをすべて網羅しているサイトは少ないですが、用意されているといざというときに便利な気がしています。<br />
特に、海外配送においては、重量は配送量等に関わってくるので、重量でソートできると便利な気がしています。</p>


検索結果のソートについて考える

<h3>マウスジェスチャー機能とは？</h3>
<div style="padding-left: 15px;">
  マウスのクリックや上下左右の動きによって<br />
  各アプリケーションの機能を割り当てることです。<br />
  (主にブラウザ、ファイラーで使われます)</div>
<h3>ブラウザの動作をマウスジェスチャーで楽に！</h3>
<div style="padding-left: 15px;">
  今回はChromeのストアが提供している<br />
  「CrxMouse」<br />
  をChromeにインストールしてみました。</p>
<p>  <a haref="https://chrome.google.com/webstore/detail/crxmouse/jlgkpaicikihijadgifklkbpdajbkhjo/related?utm_source=chrome-ntp-icon">こちら</a>のページへ遷移して<br />
  右上の「無料＋」を押下してインストールするだけです。<br />
  Chromeの再起動は必要ありません。<br />
  「設定」＞「拡張機能」のCrxMouseの有効チェックをONにします。</p>
<p>  デフォルトの状態だけでも、それなりに色々出来ます。</p>
<p>  「↓→」：タブを閉じる<br />
  「↑←」：左のタブへ移動<br />
  「↑→」：右のタブへ移動<br />
  「↑↓」：再読み込み</p>
<p>  などなど。。</p>
<p>  自分の良く使う機能だけを登録して<br />
  自分だけの軽快なブラウジングを実現してみましょう！！</p></div>
<h3>参考：カスタマイズ例</h3>
<div style="padding-left: 15px;">
  例えば「→↓→」で「右側のタブ全てを閉じる」を設定します。</p>
<p>  拡張機能のアドオン一覧からCrxMouse下にある「オプション」押下。<br />
  「Mouse Gestures」の下部にある「Edit Gestures」が登録済みのジェスチャーです。</p>
<p>  登録済みのジェスチャはActionのプルダウンメニューを変更するだけ。</p>
<p>  今回の「→↓→」のジェスチャは未登録なので<br />
  ページ真ん中あたりにある「Add new」を押下します。</p>
<p>  すると画面がグレーアウトします。<br />
  この状態で右クリックを押したまま「→↓→」となぞります。</p>
<p>  画面上部に「→↓→」と表示されたら<br />
  Actionの中から「Close all tabs on the right」を選択し、Save押下。</p>
<p>  これだけです。</p></div>
<p>参考：<br />
<a href="/blog/other/it%e6%a5%ad%e7%95%8c/%e3%82%ad%e3%83%bc%e3%83%9c%e3%83%bc%e3%83%89%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b8%e3%83%b3%e3%82%b0%e3%81%a7web%e5%b7%a1%e5%9b%9e%e3%82%92%e3%81%93%e3%81%aa%e3%81%99.html">viChrome</a></p>


マウスジェスチャーを活用してみよう

<p>フリーランスになりたい！</p>
<p>というわけではないですが、このサイトに掲載されているツールはフリーランスに限らず、<br />
普通に便利なツールが載っています。</p>
<p>カラー関連、アイコン関連、フォント関連、写真関連、等々多くのサイトが一覧にまとめられています。</p>
<p>写真関連のサイトが多いですね〜</p>
<p><a href="https://www.hellobonsai.com/best-freelance-tools" class="link" target="_blank">Best Tools for Freelance Designers and Developers | Bonsai</a></p>
<p>以前、デザイナー向けツールのサイトの紹介もしていました。</p>
<p><a href="/designer/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%8a%e3%83%bc%e5%90%91%e3%81%91%e3%83%95%e3%83%aa%e3%83%bc%ef%bc%86%e6%9c%89%e6%96%99%e7%b4%a0%e6%9d%90%e3%81%be%e3%81%a8%e3%82%81%e3%82%b5%e3%82%a4%e3%83%88%e3%80%8cma.html" target="_blank" class="link">デザイナー向けフリー＆有料素材まとめサイト「Makerbook」 | スターフィールド株式会社</a></p>


フリーランスのデザイナー＆プログラマーにとって便利なツールのご紹介

<p>私は結構アナログ人間なところがあり、紙に書いてしまう癖があります。<br />
「あ！あとで見よう！」と思ってブックマークに登録しますが、どんどん詰まっていくと見づらくて見なくなっているサイトもしばしば。（整理しろという文句はまた今度聞きます）<br />
そんな私にピッタリの気になるページやテキスト、動画や画像なんかを残しておく時に便利なChrome拡張を見つけたので使用してみました。</p>
<p>その名も『DashNotes』<br />
こういった記録アプリに関しては、Evernoteとかが有名だと思うのですが、私的にはこっちの方が簡単でシンプルで使いやすいです。</p>
<h2>気になったテキストを選択して右クリックでペタリ</h2>
<p>DashNotesは、気になったテキストや動画・画像などを新しいタブとしてストックする事が出来ます。<br />
イメージ的には、付箋でぺたりと貼ったような感じです。</p>
<h3>右クリックメニューからコンテンツを保存し、新しいタブを作成します。</h3>
<p><a href="/uploads-archive/2016/02/dashnotes_1.jpg" rel="attachment wp-att-9583"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/dashnotes_1.jpg" alt="dashnotes_1" width="600" height="249" class="alignnone size-full wp-image-9583" srcset="/uploads-archive/2016/02/dashnotes_1.jpg 600w, /uploads-archive/2016/02/dashnotes_1-300x125.jpg 300w, /uploads-archive/2016/02/dashnotes_1-228x95.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>選択したコンテンツを画像の赤丸で囲っているコンテキストメニューを選ぶだけでOKです(*´▽｀*)簡単♥<br />
ちなみに動画に関しては、HTML5プレイヤーを使用しているものであれば動画プレイヤーごと保存しておくことが可能。<br />
ただし、外部サイトでの埋め込み再生を禁止している動画に関しては再生が出来ませんので【Youtubeで再生する】から画面遷移する必要がありますのでご注意下さい。</p>
<h3>どんどん新しい情報をペタリ</h3>
<p><a href="/uploads-archive/2016/02/dashnotes_2.jpg" rel="attachment wp-att-9584"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/dashnotes_2.jpg" alt="dashnotes_2" width="800" height="415" class="alignnone size-full wp-image-9584" srcset="/uploads-archive/2016/02/dashnotes_2.jpg 800w, /uploads-archive/2016/02/dashnotes_2-300x156.jpg 300w, /uploads-archive/2016/02/dashnotes_2-768x398.jpg 768w, /uploads-archive/2016/02/dashnotes_2-228x118.jpg 228w" sizes="(max-width: 800px) 100vw, 800px" /></a></p>
<p>画像はテキストリンクのみとなっていますが、テキストでメモしておけば後日見たい情報をすぐに見つける事ができますよね。<br />
忘れちゃっていた時でも、すぐに確認が出来るので忘れやすい私には本当ありがたいです。</p>
<p>左上にある「＋」からただのメモを残しておくことも可能。<br />
<a href="/uploads-archive/2016/02/dashnotes_1_01.jpg" rel="attachment wp-att-9590"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/dashnotes_1_01.jpg" alt="dashnotes_1_01" width="800" height="415" class="alignnone size-full wp-image-9590" srcset="/uploads-archive/2016/02/dashnotes_1_01.jpg 800w, /uploads-archive/2016/02/dashnotes_1_01-300x156.jpg 300w, /uploads-archive/2016/02/dashnotes_1_01-768x398.jpg 768w, /uploads-archive/2016/02/dashnotes_1_01-228x118.jpg 228w" sizes="(max-width: 800px) 100vw, 800px" /></a><br />
<a href="/uploads-archive/2016/02/dashnotes_1_02.jpg" rel="attachment wp-att-9589"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/dashnotes_1_02.jpg" alt="dashnotes_1_02" width="800" height="416" class="alignnone size-full wp-image-9589" srcset="/uploads-archive/2016/02/dashnotes_1_02.jpg 800w, /uploads-archive/2016/02/dashnotes_1_02-300x156.jpg 300w, /uploads-archive/2016/02/dashnotes_1_02-768x399.jpg 768w, /uploads-archive/2016/02/dashnotes_1_02-228x119.jpg 228w" sizes="(max-width: 800px) 100vw, 800px" /></a></p>
<h3>なんかすっごいおしゃれ</h3>
<p><a href="/uploads-archive/2016/02/dashnotes_0_01.jpg" rel="attachment wp-att-9587"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/dashnotes_0_01.jpg" alt="dashnotes_0_01" width="800" height="412" class="alignnone size-full wp-image-9587" srcset="/uploads-archive/2016/02/dashnotes_0_01.jpg 800w, /uploads-archive/2016/02/dashnotes_0_01-300x155.jpg 300w, /uploads-archive/2016/02/dashnotes_0_01-768x396.jpg 768w, /uploads-archive/2016/02/dashnotes_0_01-228x117.jpg 228w" sizes="(max-width: 800px) 100vw, 800px" /></a><br />
<a href="/uploads-archive/2016/02/dashnotes_0_02.jpg" rel="attachment wp-att-9586"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/dashnotes_0_02.jpg" alt="dashnotes_0_02" width="800" height="416" class="alignnone size-full wp-image-9586" srcset="/uploads-archive/2016/02/dashnotes_0_02.jpg 800w, /uploads-archive/2016/02/dashnotes_0_02-300x156.jpg 300w, /uploads-archive/2016/02/dashnotes_0_02-768x399.jpg 768w, /uploads-archive/2016/02/dashnotes_0_02-228x119.jpg 228w" sizes="(max-width: 800px) 100vw, 800px" /></a><br />
<a href="/uploads-archive/2016/02/dashnotes_0.jpg" rel="attachment wp-att-9585"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/dashnotes_0.jpg" alt="dashnotes_0" width="800" height="418" class="alignnone size-full wp-image-9585" srcset="/uploads-archive/2016/02/dashnotes_0.jpg 800w, /uploads-archive/2016/02/dashnotes_0-300x157.jpg 300w, /uploads-archive/2016/02/dashnotes_0-768x401.jpg 768w, /uploads-archive/2016/02/dashnotes_0-228x119.jpg 228w" sizes="(max-width: 800px) 100vw, 800px" /></a></p>
<p>これは、何も貼り付けていない状態のDashNotesです。<br />
新しいタブを開く度に画像が変更されます。なんだかとってもオシャンティです。<br />
あと右上の秒数カウント付きの時計が地味に嬉しいです。</p>
<p>試しに使ってみたい方は、無料ですので<a href="https://chrome.google.com/webstore/detail/dashnotes/akejfagjhbihofnhibbkdlhmoflckfdk">DashNotes</a>から拡張機能をインストールしてみてください。<br />
もし消したい場合には、google設定から「拡張機能を無効にする」で解除されますよ～。</p>


画像やページを残しておけるChrome拡張「DashNotes」

<p>個人的に、ドキュメントをきれいに作りたいときはillustratorを使っており、</p>
<p>レイアウトや色使いが自由にできるので満足しているのだが、ページ番号をふれない、という大きな問題がある。</p>
<p>数ページのドキュメントであれば手動でふればよいのだが、数十ページともなるとページ番号無しでいいかと妥協してしまう。</p>
<p>この度100ページ超えの資料を作る機会があり、同じ状況に直面。</p>
<p>今回はページ番号をふらなければまずかったので、良い方法が無いか調べてみた。</p>
<p>&nbsp;</p>
<p>結果として、illustratorにページ番号をふる機能は無く、プラグインを作るしか無いという結論に至った。</p>
<p>&nbsp;</p>
<p>illustratorのプラグインについて</p>
<p>言語の仕様としてはjavascriotで作成できるらしい</p>
<p>activeDocumentやlayerなどといったillustrator独自のオブジェクトがあり、これらをjsで操作できるようだ</p>
<p>ちょっとバージョンは古いが、以下のサイトが非常に参考になった</p>
<p><a href="http://www.openspc2.org/book/IllustratorCS4/" target="_blank">http://www.openspc2.org/book/IllustratorCS4/</a></p>
<p>&nbsp;</p>
<p>自分がやった処理は</p>
<ol>
<li>全てのレイヤーを順番に開く</li>
<li>非表示のレイヤーは強制的に表示させる</li>
<li>指定した場所にページ番号を表示させる</li>
<li>全レイヤーに実行したら完了</li>
</ol>
<p>という流れ</p>
<p>具体的には以下のように書いてみた</p>

		<div id="crayon-6495401591a07201117057" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
(function(){
	var layerCount = activeDocument.layers.length;
	for (var i = 0; i &lt; layerCount; i++ ) 
	{
		var targetLayer = activeDocument.layers[i];

		if( !targetLayer.visible ) targetLayer.visible = true;

		textObj = targetLayer.textFrames.add();
		textObj.contents = layerCount - i;

		textObj.position = [x座標, y座標];
	}

	alert("完了しました");
})();</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-6495401591a07201117057-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-2">2</div><div class="crayon-num" data-line="crayon-6495401591a07201117057-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-4">4</div><div class="crayon-num" data-line="crayon-6495401591a07201117057-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-6">6</div><div class="crayon-num" data-line="crayon-6495401591a07201117057-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-8">8</div><div class="crayon-num" data-line="crayon-6495401591a07201117057-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-10">10</div><div class="crayon-num" data-line="crayon-6495401591a07201117057-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-12">12</div><div class="crayon-num" data-line="crayon-6495401591a07201117057-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-14">14</div><div class="crayon-num" data-line="crayon-6495401591a07201117057-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591a07201117057-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-6495401591a07201117057-1"><span class="crayon-sy">(</span><span class="crayon-t">function</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-6495401591a07201117057-2"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">layerCount</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">activeDocument</span><span class="crayon-sy">.</span><span class="crayon-i">layers</span><span class="crayon-sy">.</span><span class="crayon-i">length</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401591a07201117057-3"><span class="crayon-h">	</span><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-i">layerCount</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-i">i</span>++<span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591a07201117057-4"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401591a07201117057-5"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">targetLayer</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">activeDocument</span><span class="crayon-sy">.</span><span class="crayon-i">layers</span><span class="crayon-sy">[</span><span class="crayon-i">i</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591a07201117057-6">&nbsp;</div><div class="crayon-line" id="crayon-6495401591a07201117057-7"><span class="crayon-h">		</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">!</span><span class="crayon-i">targetLayer</span><span class="crayon-sy">.</span><span class="crayon-i">visible</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i">targetLayer</span><span class="crayon-sy">.</span><span class="crayon-i">visible</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591a07201117057-8">&nbsp;</div><div class="crayon-line" id="crayon-6495401591a07201117057-9"><span class="crayon-h">		</span><span class="crayon-i">textObj</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">targetLayer</span><span class="crayon-sy">.</span><span class="crayon-i">textFrames</span><span class="crayon-sy">.</span><span class="crayon-e">add</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-6495401591a07201117057-10"><span class="crayon-h">		</span><span class="crayon-i">textObj</span><span class="crayon-sy">.</span><span class="crayon-i">contents</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">layerCount</span><span class="crayon-h"> </span>-<span class="crayon-h"> </span><span class="crayon-i">i</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401591a07201117057-11">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-6495401591a07201117057-12"><span class="crayon-h">		</span><span class="crayon-i">textObj</span><span class="crayon-sy">.</span><span class="crayon-i">position</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-i">x</span>座標<span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">y</span>座標<span class="crayon-sy">]</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401591a07201117057-13"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591a07201117057-14">&nbsp;</div><div class="crayon-line" id="crayon-6495401591a07201117057-15"><span class="crayon-h">	</span><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-s">"完了しました"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591a07201117057-16"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>以下は実際にaiで実行してpdf化したもの</p>
<p><a href="/uploads-archive/2016/02/1-7.pdf" rel="">サンプルPDF</a></p>
<p>&nbsp;</p>
<p>未だ理解が浅いが、jsでとっかかりやすいし便利そうなので、機会があれば今後も使ってみたい</p>

【illustrator】レイヤーに自動でページ番号を付ける方法

nadeshiko (1).jpg

プログラムと言う&#8221;言語&#8221;

<p><a href="/blog/product/javascript/reveal-js%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F.html">先週のブログ</a>に引き続き、プレゼンがテーマです。</p>
<p>先日<a href="http://scalamatsuri.org/">ScalaMatsuri 2016</a>というカンファレンスに参加したのですが、<br />
そこで登壇された方が、Scalaのreplを使ったプレゼンテーションをしていて、<br />
私も使用してみたい！と思い、ブログにしてみました。<br />
<small>（※replとは、read-eval-print-loopの略で、対話型実行環境のこと。）</small></p>
<h2>使い方</h2>
<p>下記を参考にしました。<br />
<a href="https://github.com/marconilanna/REPLesent">marconilanna/REPLesent</a><br />
ここで会社では簡単なデモを紹介しましたが、上のgithubにデモ動画が上がっています。下のやつでも確認できます。<br />
<script type="text/javascript" src="https://asciinema.org/a/16690.js" id="asciicast-16690" async></script></p>
<h2>所感</h2>
<h4>メリット</h4>
<ul>
<li>
  スライドの途中にScalaのプログラムを走らせることができる。
  </li>
<li>
  テキストファイルをいじるだけなので、簡単
  </li>
<li>
  絵文字が使える。
  </li>
</ul>
<h4>デメリット</h4>
<ul>
<li>
  日本語を使用すると若干レイアウトが崩れる
  </li>
</ul>
<h2>まとめ</h2>
<p>使用する機会がなさそうですが、いつか使用してみたいです。</p>


Scalaでプレゼン REPLesentを使ってみた

<p>photoshop ccやsketchでも使えるというプラグインです。</p>
<p>UI designを助けてくれるという触れ込みです。</p>
<p><a href="http://labs.invisionapp.com/craft" class="link" target="_blank">Craft by InVision LABS</a></p>
<p>以下の流れは基本「Photoshop」での話になりますのでご了承下さい。</p>
<h2>Craftのインストール</h2>
<p>まずは公式HPへリンクし、インストーラーをダウンロードします。<br />
windows/macは自動で判断しますので迷うことはありません。</p>
<p>インストーラーをダウンロードしたら起動します。<br />
そして、「sketch」か「photoshop」のどちらをインストールするか選択します。</p>
<p>これでインストール完了です。<br />
（photoshopを再起動させれば、エクステンションに追加されています。）</p>
<p>こちらのプラグインには、<br />
「Duplicate」「Type」「Photos」<br />
と大きく3つの機能があります。</p>
<p>簡単にはなりますがちょっとずつ説明していきます。</p>
<h3>Duplicate</h3>
<p>要素やシェイプを複製できるもので、ギャラリー等の制作に最適かもしれません。</p>
<p><a href="/uploads-archive/2016/02/6ap6Jo4mVg.gif" target="_blank"><img decoding="async" src="/uploads-archive/2016/02/6ap6Jo4mVg.gif" alt="6ap6Jo4mVg" width="640" class="alignnone size-large wp-image-9541" /></a></p>
<p>まず一つ元となるものを作り、それを選択し、<br />
縦、横にいくつ、<br />
どのくらいのマージンで、<br />
複製をするのかを決める感じです。</p>
<h3>Type</h3>
<p>こちらはあらゆるダミーテキストを一瞬で挿入できます。<br />
名前、見出し、文章、住所、日付、メールアドレス等など&#8230;</p>
<p>こちらも元のテキスト（なんでもOK）を用意し、それを選択しておきます。<br />
パネルを開き、変更したいものをクリックするだけで変更されます。</p>
<p><a href="/uploads-archive/2016/02/93JN3Zl7lD.gif" rel="attachment wp-att-9544"><img decoding="async" src="/uploads-archive/2016/02/93JN3Zl7lD.gif" alt="93JN3Zl7lD" width="640" class="alignnone size-large wp-image-9544" /></a></p>
<p>同じボタンを押してもランダムなので違う内容になります。</p>
<p>惜しいのは英語しかないという点ですね。日本語版があればすごくいいのに。。。</p>
<h3>Photos</h3>
<p>こちらは写真を挿入する機能になります。</p>
<p>ただ写真を貼り付けるだけなのかなと思っていましたが、作ったシェイプに合わせて写真を当て込んでくれるものでした。</p>
<p><a href="/uploads-archive/2016/02/sisGyFJoe1.gif" rel="attachment wp-att-9545"><img decoding="async" src="/uploads-archive/2016/02/sisGyFJoe1.gif" alt="sisGyFJoe1" width="640" class="alignnone size-large wp-image-9545" /></a></p>
<p><a href="https://unsplash.com/" target="_blank">Unsplash</a>というサイトから持ってこれますが、パソコンのフォルダやdropboxも指定できます。</p>
<p>どの場合も写真を選べるわけではなく、ランダムで入れてくれます。<br />
(自身のPCの場合、どこかのフォルダを選ぶと、そのフォルダ内にある写真をランダムで挿入します)</p>
<p>ですので、ダミー写真を用意するのに便利かと思います。</p>
<h2>終わりに</h2>
<p>管理画面、モックアップの作成にかなり使えるプラグインだと思いました。<br />
特に、SNS系、メディア系なんかのサイトに威力を発揮できるかもしれません。</p>
<p>僕は第一校のデザインは、全部同じ写真で出しちゃったりするので、ぜひ使用してみたいと思います。</p>
<p>おまけですが、こちら載せておきます。<br />
<a href="http://photoshopvip.net/ultimate-ps-tip" target="_blank">意外と知らない、Photoshop CCの隠し小技テクニック20個まとめました。 &#8211; PhotoshopVIP</a></p>


Photoshopが便利になるプラグイン「craft」

<h2>HTMLでプレゼンテーションスライドを</h2>
<p>見慣れた方にとっては今更感が強いかもしれませんが、<br />
HTMLでプレゼンテーションのスライドが作成できるJavaScriptのライブラリーを使用してみたく記事にしてみました。</p>
<p><a class="demo" href="/demo/mizutani/03/reveal.js/index.html" target="_blank">デモ</a></p>
<p>使い方はデモに書きました。</p>
<h2>感想</h2>
<ul>
<li>ソフトウェアを使用するより早く作れた気がします。基本的に一つのソースをいじるだけなので、いろんなところをクリックしたりする必要がないのがいいですね。</li>
<li>ソースコードを使ったスライドを作りたいときは良いかもしれません。</li>
</ul>
<h2>参照</h2>
<ul>
<li><a href="http://lab.hakim.se/reveal-js/">reveal.js</a></li>
</ul>


HTMLでスライドを作る　reveal.jsを使ってみた

Excelで見かけるはじめの列を固定させたTableをjQueryで実現してみる

AppleScriptでMac作業を楽にしてみよう

<p>いつでたのかは定かではありませんが、前々からgoogleフォームなるものの存在は知っていても利用することはありませんでした。</p>
<p>弊社で写真全員でブログを書いており、月毎で社員の投票により「<strong>ブログ賞</strong>」というものを決めています。</p>
<p>しかし、しばらくこの投票が行われない時期がありました。</p>
<p>それはなぜか考えた所、「投票が面倒くさい」からだろうと思い、なんかいいのないかなと思い利用したのが<strong>Googleフォーム</strong>でした。</p>
<p>実際に作成してみたところ簡単にできました。<br />
今月から使い初めたので集計がどうなるのかはわかりませんが、きっと便利そうな予感がします。（スプレッドシートに書き出されるのかな？？）</p>
<h2>Googleフォームの概要</h2>
<p>使い方は、まずはgoogleアカウントが必要ですね。<br />
そしてドライブから「<strong>新規</strong>」というボタンを押すと、「<strong>Googleフォーム</strong>」っていうのがあるのでそれをクリックです。</p>
<p>かなり雑な説明ですみません。この辺は大丈夫だと思うのだいぶ省略させていただきました。</p>
<p><a href="/uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9.png" rel="attachment wp-att-9439"><img decoding="async" loading="lazy" class="alignnone wp-image-9439" src="/uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-1024x561.png" alt="スクリーンショット 2016-02-02 17.55.10" width="640" height="351" srcset="/uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-1024x561.png 1024w, /uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-300x164.png 300w, /uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-768x421.png 768w, /uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-228x125.png 228w, /uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9.png 1104w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>そして、フォームのページに遷移後、<strong>右下の＋マーク</strong>を押すと新規で作成できます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-9437" src="/uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-1024x632.png" alt="screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949" width="640" height="395" srcset="/uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-1024x632.png 1024w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-300x185.png 300w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-768x474.png 768w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-228x141.png 228w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949.png 1155w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>色は好きな色が選べます。</p>
<p>&nbsp;</p>
<p>質問の項目としては、<br />
<strong>記述式、ラジオボタン、チェックボックス、プルダウン、均等目盛、選択式、日付、時刻</strong>といった要素があります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-9443" src="/uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-1024x758.png" alt="screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765" width="640" height="474" srcset="/uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-1024x758.png 1024w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-300x222.png 300w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-768x568.png 768w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-228x169.png 228w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765.png 1150w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>あとは、テキストはもちろん、<strong>画像</strong>や<strong>動画</strong>なんかも挿入できたりします！</p>
<p>回答できるユーザーも選択でき、<br />
全ユーザーであったり、googleアカウントを<strong>要ログイン</strong>であったり、<strong>一回のみ</strong>の回答という設定もできます！</p>
<p>共同で編集することもできます。</p>
<p>こんなに簡単に作れていろいろ設定も出来るとは思ってはいなかったでびっくりでした！！</p>
<p>社内向けアンケートであったり、イベントでのアンケートにぴったりですね！</p>


Googleフォームって実は簡単でとても便利だった！

<h3>はじめに</h3>
<div style="padding-left: 15px;">
特に意味もなく打鍵のカウントをしてみたかったので作ってみました。</p>
<p>基本はキーロガーと同じ要領です。<br />
OS XはWindowsと大分仕組みが違うため、<br />
フック(イベント情報を横取りする事)がなかなか難しい。</p>
<p>ので、今回はOS Xに絞って情報を集めてみた結果、、、<br />
SwiftでもなくObjective−CでもなくC言語にて組むことになりました。</p>
<p>ソースは別の用途で用いられる可能性があるため割愛させていただきます。</p></div>
<h3>流れ</h3>
<div style="padding-left: 15px;">
簡単な流れとして</p>
<ol>
<li>エントリーポイント実行 (所謂 main関数)</li>
<li>自作のイベント関数(CGEventRef)をループ実行として登録する (※後述)</li>
<li>ループイベント関数を実行開始する (※以下、関数例一覧)<br />
<blockquote><p>CFRunLoopSourceRef<br />
CFRunLoopAddSource<br />
CGEventTapEnable<br />
CFRunLoopRun()</p></blockquote>
</li>
</ol>
<p>と言った手順です。</p>
<p>2番の内容がここでの肝となります。<br />
毎回ログに吐き出すほどでもないので、<br />
10分間などの一定期間を定義して、その間の総計を出力するようにしました。</p>
<p>コードでの記述例で言うと</p>
<p></p>

		<div id="crayon-6495401591153277375030" 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">C</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;">
    # define INTERVAL_TIME
    if (now() - prev_time &gt; INTERVAL_TIME) {
        // ここにカウントした総計を出力する実装
        print("%d", key_count);
        fflush(stdout);
    }
    key_count++;</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-6495401591153277375030-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591153277375030-2">2</div><div class="crayon-num" data-line="crayon-6495401591153277375030-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591153277375030-4">4</div><div class="crayon-num" data-line="crayon-6495401591153277375030-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591153277375030-6">6</div><div class="crayon-num" data-line="crayon-6495401591153277375030-7">7</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-6495401591153277375030-1"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-p"># define INTERVAL_TIME</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591153277375030-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e">now</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span>-<span class="crayon-h"> </span><span class="crayon-i">prev_time</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-i">INTERVAL_TIME</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401591153277375030-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">// ここにカウントした総計を出力する実装</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591153277375030-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">print</span><span class="crayon-sy">(</span><span class="crayon-s">"%d"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">key_count</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401591153277375030-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e">fflush</span><span class="crayon-sy">(</span><span class="crayon-i">stdout</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591153277375030-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-6495401591153277375030-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">key_count</span>++<span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>と言った感じです。あくまで抜粋です。<br />
10分の間にグルグルとループしながらキーを打ったらカウント。</p>
<p>10分を超えた時点でキーを叩いたらまとめて<br />
画面に今までのカウントを出力します。</p>
<p>一回の実行で42億回まではカウントしてくれるので<br />
間違って立ち上げっぱなしでも一ヶ月は保ってくれそうです！！</p>
<p>もうちょっとUIもついたアプリに出来たらよかったのですが、、<br />
取り敢えずの目的は達したので、まずまずとします。</p></div>
<h3>最後に</h3>
<div style="padding-left: 15px;">
出力された(カウントされた)出力は実際には以下です。</p>
<p></p>

		<div id="crayon-6495401591158471901162" 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;">
426
1207
2979
3670
4936</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-6495401591158471901162-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591158471901162-2">2</div><div class="crayon-num" data-line="crayon-6495401591158471901162-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401591158471901162-4">4</div><div class="crayon-num" data-line="crayon-6495401591158471901162-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-6495401591158471901162-1"><span class="crayon-cn">426</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591158471901162-2"><span class="crayon-cn">1207</span></div><div class="crayon-line" id="crayon-6495401591158471901162-3"><span class="crayon-cn">2979</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401591158471901162-4"><span class="crayon-cn">3670</span></div><div class="crayon-line" id="crayon-6495401591158471901162-5"><span class="crayon-cn">4936</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>コマンド実行例は以下</p>

		<div id="crayon-6495401591159610640573" 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;">
sudo ./key_count &gt; ./key_count.log</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-6495401591159610640573-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-6495401591159610640573-1"><span class="crayon-i">sudo</span><span class="crayon-h"> </span><span class="crayon-sy">.</span>/<span class="crayon-i">key_count</span><span class="crayon-h"> </span><span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-sy">.</span>/<span class="crayon-i">key_count</span><span class="crayon-e">.log</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>4,50分の間に約5千回ほど打鍵してることが解りました。意外と少ないものですね。</p>
<p>以上です！</p></div>

打鍵数をカウントしてみた

よく使うgitコマンド

<p>以前、記事でwebサイトのモックアップを作れるサービスを紹介しましたが、<br />
<a href="/designer/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%a2%e3%83%83%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%83%84.html" target="_blank">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a></p>
<p>また新しいものを発見しました。<br />
その名も「Bootstrap Studio」です。<br />
<a class="link" href="https://bootstrapstudio.io/" target="_blank">Bootstrap Studio</a></p>
<p>こちらあの「Bootstrap」を元に作られており、bootstrapを使用したサイトのデザインが直感的にできます。</p>
<p>もはやphotoshopやsketchのようなデザインツールです。</p>
<p>有料のツールではありますが、手早くデザインを作れそうな感じがします。</p>
<p>こちらはアプリですが、Demoはブラウザ上で試すことが出来ます（google Chromeのみ）</p>
<h2>おまけ</h2>
<p>bootstrapではないCSSのフレームワークになります。<br />
<a href="http://foundation.zurb.com/sites.html">Foundation for Sites | Foundation for Sites</a></p>
<p>こちらのサイトではhtmlテンプレートが用意されており、<br />
自由にダウンロードできます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-9315" src="/uploads-archive/2016/01/Foundation-HTML-Templates-1024x663.jpg" alt="Foundation HTML Templates" width="640" height="414" srcset="/uploads-archive/2016/01/Foundation-HTML-Templates-1024x663.jpg 1024w, /uploads-archive/2016/01/Foundation-HTML-Templates-300x194.jpg 300w, /uploads-archive/2016/01/Foundation-HTML-Templates-768x497.jpg 768w, /uploads-archive/2016/01/Foundation-HTML-Templates-228x148.jpg 228w, /uploads-archive/2016/01/Foundation-HTML-Templates.jpg 1112w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://foundation.zurb.com/templates.html">Foundation | HTML Templates</a></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2016/02/24

2016/02/24

2016/02/17

2016/02/17

2016/02/17

2016/02/17

2016/02/16

2016/02/10

2016/02/10

2016/02/09

2016/02/03

2016/02/03

2016/02/03

2016/02/03

2016/01/27

2016/01/27

2016/01/26

2016/01/26