CINEMA4Dではシミュレーションタグを使用する事で簡単に風でなびく旗のCGを作成する事が出来ます。
まずプリミティブの平面など旗の布になるオブジェクトにシミュレーションタグのクロスを設置します。
本来このクロスタグは名前の通り、キャラクターなどに服を着させるためのシミュレーションタグになりますが、色んな使い方ができます。
シミュレーションさせるオブジェクトはこのとき、編集可能なオブジェクトに変更しておく必要があります。
<a href="/uploads-archive/2016/03/1-2.jpg" rel="attachment wp-att-9945"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9945" src="/uploads-archive/2016/03/1-2.jpg" alt="1" width="640" height="386" srcset="/uploads-archive/2016/03/1-2.jpg 640w, /uploads-archive/2016/03/1-2-300x181.jpg 300w, /uploads-archive/2016/03/1-2-228x138.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a>
続いてクロスタグの「着付け」から固定するポイント（またはポリゴン）を設定します。
ポイント選択またはポリゴン選択で棒に固定される部分を選択し、「着付け」の固定ポイントから「記録」します。
これで選択した部分は動かなくなります。
<a href="/uploads-archive/2016/03/2-2.jpg" rel="attachment wp-att-9946"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9946" src="/uploads-archive/2016/03/2-2.jpg" alt="2" width="640" height="350" srcset="/uploads-archive/2016/03/2-2.jpg 640w, /uploads-archive/2016/03/2-2-300x164.jpg 300w, /uploads-archive/2016/03/2-2-228x125.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a>
風を吹かせるにはフォースのパラメータを調整します。
<a href="/uploads-archive/2016/03/3-2.jpg" rel="attachment wp-att-9950"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9950" src="/uploads-archive/2016/03/3-2.jpg" alt="3" width="640" height="578" srcset="/uploads-archive/2016/03/3-2.jpg 640w, /uploads-archive/2016/03/3-2-300x271.jpg 300w, /uploads-archive/2016/03/3-2-228x206.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a>
旗の硬さなどはタグから調整する事ができます。
<a href="/uploads-archive/2016/03/4-2.jpg" rel="attachment wp-att-9951"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9951" src="/uploads-archive/2016/03/4-2.jpg" alt="4" width="640" height="581" srcset="/uploads-archive/2016/03/4-2.jpg 640w, /uploads-archive/2016/03/4-2-300x272.jpg 300w, /uploads-archive/2016/03/4-2-228x207.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a>
出来上がった物がこちらになります。
<div style="width: 720px;" class="wp-video"><video class="wp-video-shortcode" id="video-9944-4" width="720" height="404" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/03/test_4.mp4?_=4" /><a href="/uploads-archive/2016/03/test_4.mp4">/uploads-archive/2016/03/test_4.mp4</a></video></div>

CINEMA4D シミュレーションを使って旗を作る方法

以前、Project Cometについてブログを書きましたが、 
<a class="link" 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/">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a> 
とうとう、3月14日に「Adobe Experience Design CC」と名前を変え、登場しました。
<a class="link" href="http://www.adobe.com/products/experience-design.html" target="_blank">Adobe Experience Design CC</a>
<h2>Adobe Experience Design CC</h2>
以前お伝えした通り、こちらはモックアップ制作のためのツールになり、 
UX設計のためのツールとのことです。 
今はPreviewってことなのか、Adobeのアカウントがあれば無料で使えます。
実際に使ってみましょう！
<img decoding="async" loading="lazy" class="alignnone wp-image-9904" src="/uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86.png" alt="スクリーンショット 2016-03-15 14.32.04" width="463" height="269" srcset="/uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86.png 801w, /uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86-300x175.png 300w, /uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86-768x447.png 768w, /uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86-228x133.png 228w" sizes="(max-width: 463px) 100vw, 463px" />
スマホ、タブレット、webのサイズで作ることができます。
元々のサンプルや、iOSやGoogle Materialのkitがあるので、そちらを用いるのいいかもしれません。
とりあえず,iPhoneを選んで作成してみます。
<img decoding="async" src="/uploads-archive/2016/03/7VVRdbaNEe.gif" alt="7VVRdbaNEe" width="640" class="alignnone size-large wp-image-9905" />
<h2>Design</h2>
まずはDesign画面。 
スッキリしたインターフェイスで、ちょっとsketchっぽい感じもします。 
直線、図形、ペンツール、テキストが使え、画像はドラッグ＆ドロップで使えます。
図形やテキストに関しては、色、透明度、ボーダー、シャドウを適用することができます。 
Photoshopのように多くのスタイルは用意されていないようです。
ただ、モックアップはもちろん、最近のアプリのデザインのためにはそこまでスタイルは必要ないかもしれないので充分かもしれません。
Adobeということで、aiとpsdとの連携は抜群なので、このツールで作れない部分は、aiやpsdで作ると良いと思います。
同じようなパターンが続く場合は以下のようにサクッと作ることができます。
<img decoding="async" src="/uploads-archive/2016/03/01Hl7bnhpo.gif" alt="01Hl7bnhpo" width="640" class="alignnone size-large wp-image-9908" />
これはスゴいですね！！
<h2>Prototype</h2>
次にPrototype画面。 
これもスゴいですね。
Prototype設定画面に行って、選択して遷移させたい箇所につなげるだけでOKです。 
遷移のアニメーションも5つ(スライドレフト・ライト・アップ・ダウン、ディゾルブ)用意されています。
<img decoding="async" src="/demo/abe/gif/20160315.gif" alt="01Hl7bnhpo" width="640" />
実際画面がどの用意に遷移していくのか、リンク先はどこなのかこれを作って共有すれば基本理解出来ますね！
<h2>終わりに</h2>
いや〜、遂に登場しましたが、今後毎月新しい機能を追加していくとのことですが、 
どのようになっていくのでしょうか？ 
現状webサイトのデザインをするという視点からは見るとPhotoshopの方がいいかなという感じです。 
それはなぜかというと、
<h3>個人的に気になる点</h3>
・レイヤー機能がない 
・スライス機能がない 
・スタイルが少ない
まぁこのツールはそもそも「UXデザイナーのため」と謳っているので、上記の機能は必要ないのかもしれません。
しかし、今後の機能次第では、web・アプリの制作の定番ツールになりそうな気もします。
今後に期待です！！

遂に来た！Adobe Experience Design CCがいい！

知り合いにimport.ioというスクレイピングツールといことを教えていただきました。
<a href="https://www.import.io/" target="_blank" class="link">Import.io | Web Data Platform &amp; Free Web Scraping Tool</a>
スクレイピングという言葉自体を知りませんでした。
<blockquote>
ウェブスクレイピング（Web scraping）とは、ウェブサイトから情報を抽出するコンピュータソフトウェア技術のこと。ウェブ・クローラー(Web crawler) あるいはウェブ・スパイダー(Web spider)とも呼ばれる。 通常このようなソフトウェアプログラムは低レベルのHTTP（Hypertext Transfer Protocol）を実装することで、もしくはInternet ExplorerまたはMozilla FirefoxなどのWebブラウザを埋め込むことによって、人間によるWWWのブラウジングをシミュレートする。 
<a href="https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0">ウェブスクレイピング &#8211; Wikipedia</a>より
</blockquote>
要は、サイトのデータを一括で情報を取得できるということでしょうか。 
例えばECサイトの商品の一覧ページの情報を取得したりとか&#8230;
<h3>コンペナビで試してみた</h3>
とりあえず、弊社の<a href="http://compe.sterfield.jp/" target="_blank">コンペナビ</a>で試してみました。
<img decoding="async" src="/uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-1024x598.jpg" alt="import.io Magic Web Data Platform &amp; Free Web Scraping Tool2" width="500" class="alignnone size-large wp-image-9882" srcset="/uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-1024x598.jpg 1024w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-300x175.jpg 300w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-768x448.jpg 768w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-228x133.jpg 228w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2.jpg 1141w" sizes="(max-width: 1024px) 100vw, 1024px" /> 
(一部ぼかしてます)
いい感じで取得出来ている感じです。 
CSVで保存したり、APIにしたりすることが出来るようです！
webサイトのリニューアルで「現行サイトのデータを持って来といて」なんて言われることがあるんですが、そういう時使えそうな感じがします。

webサイトから素早く、綺麗に情報を抽出するツール「import.io」

UIという文字を頻繁に見かけるようになり、ワイヤーフレームやモックアップを制作するツールが多く生まれてきています。
以前、下記記事にてツールを紹介しましたが（すごい簡単にですが） 
<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> 
(cometはまだ動きがないようですね・・・)
こういったツールではなく、素材として制作を提供してくれるサイト、ブログがあります。 
しかもフリーで！！ 
その中でいいと思った3つをご紹介します。
<h3>ChatアプリのUIテンプレート</h3>
<img decoding="async" src="/uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-1024x678.jpg" alt="Free Chat UI kit for Photoshop and Sketch InVision" width="640" class="alignnone size-large wp-image-9747" srcset="/uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-1024x678.jpg 1024w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-300x199.jpg 300w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-768x508.jpg 768w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-228x151.jpg 228w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision.jpg 1109w" sizes="(max-width: 1024px) 100vw, 1024px" />
Chatアプリの制作に役にたちそうなkitです。そのままでもいい感じなのですが、これを元に制作していくと良さそうです。
photoshopかsketchか選択してダウンロードできます。
<img decoding="async" src="/uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-1024x712.png" alt="スクリーンショット 2016-03-01 12.33.46" width="640" class="alignnone size-large wp-image-9748" srcset="/uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-1024x712.png 1024w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-300x209.png 300w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-768x534.png 768w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-228x159.png 228w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82.png 1088w" sizes="(max-width: 1024px) 100vw, 1024px" />
デザインに使わなくて、どういったページが必要かを把握するだけでも十分良さそうです！ 
こんなのがフリーだなんてどうかしてますね、すごいな・・・invision。
<a href="http://www.invisionapp.com/chat" target="_blank" class="link">Free Chat UI kit for Photoshop and Sketch | InVision</a>
<h3>ワイヤーフレーム、フローチャートを作れるKIT</h3>
<img decoding="async" src="/uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-1024x687.jpg" alt="UI Tiles- Website Flowcharts" width="640" class="alignnone size-large wp-image-9749" srcset="/uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-1024x687.jpg 1024w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-300x201.jpg 300w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-768x515.jpg 768w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-228x153.jpg 228w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts.jpg 1094w" sizes="(max-width: 1024px) 100vw, 1024px" />
これはデザイナーはもちろん、ディレクターにも良いと思います！ 
こちらも凄まじい種類のページテンプレートが用意してあり、PNG,AI,PSD,SKETCH形式のものがダウンロードできます。
<img decoding="async" src="/uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155.png" alt="スクリーンショット 2016-03-01 12.49.02" width="400" class="alignnone size-full wp-image-9751" srcset="/uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155.png 639w, /uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155-260x300.png 260w, /uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155-228x263.png 228w" sizes="(max-width: 639px) 100vw, 639px" />
<a href="https://pixelbuddha.net/ui-tiles/" target="_blank" class="link">UI Tiles: Website Flowcharts</a>
<h3>高品質なECサイトのUIテンプレート</h3>
<img decoding="async" src="/uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-1024x687.jpg" alt="Portland UI Kit Free Sample Craftwork – Thoroughly Handpicked UI Freebies" width="640" class="alignnone size-large wp-image-9750" srcset="/uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-1024x687.jpg 1024w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-300x201.jpg 300w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-768x515.jpg 768w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-228x153.jpg 228w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f.jpg 1094w" sizes="(max-width: 1024px) 100vw, 1024px" />
こちらは無料ではTOPページのみになりますが参考になります。
<a href="http://getcraftwork.com/portland-ui-kit/" target="_blank" class="link">Portland UI Kit Free Sample | Craftwork – Thoroughly Handpicked UI Freebies</a>
というかここのサイトがすごい。。。
<a href="http://getcraftwork.com/ui-kits/" target="_blank" class="link">UI Kits | Craftwork – Thoroughly Handpicked UI Freebies</a>
こういうの活かしながらより良いサイト制作に勤しみたいと思います。

UIデザイン制作にすごい役立ちそうなフリー素材３つ

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

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

過去に2回程phonecleanに関する記事を書きました。
<a href="/officer/ios%E3%81%AE%E3%81%8A%E6%8E%83%E9%99%A4%E3%82%BD%E3%83%95%E3%83%88%E3%80%8Cphoneclean%E3%80%8D%E3%81%8C%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%83%E3%83%97%E3%81%97%E3%81%A6.html">iOSのお掃除ソフト「PhoneClean」がバージョンアップしていた</a>
<a href="/officer/ios%E3%81%AE%E3%81%8A%E6%8E%83%E9%99%A4%E3%82%BD%E3%83%95%E3%83%88%E3%80%8Cphoneclean%E3%80%8D.html">iOSのお掃除ソフト「PhoneClean」</a>
今回もメジャーバージョンアップしたというご連絡を頂きましたので、ご紹介したいと思います。
iphoneの中のキャッシュやゴミファイルを削除して容量を確保したいという方にはオススメのソフトです。
<h2>基本機能</h2>
<h3>クイッククリーン</h3>
<a href="/officer/ios%e3%81%ae%e3%81%8a%e6%8e%83%e9%99%a4%e3%82%bd%e3%83%95%e3%83%88%e3%80%8cphonclean4%e3%80%8d%e3%81%8c%e7%99%bb%e5%a0%b4.html/attachment/%e7%a9%ba%e7%99%bd_skitch_%e3%82%ad%e3%83%a3%e3%83%b3%e3%83%8f%e3%82%99%e3%82%b9" rel="attachment wp-att-9209"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9209" src="/uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4-300x186.png" alt="空白_Skitch_キャンバス" width="300" height="186" srcset="/uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4-300x186.png 300w, /uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4-768x476.png 768w, /uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4-228x141.png 228w, /uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4.png 1000w" sizes="(max-width: 300px) 100vw, 300px" /></a>
起動時の画面はこのクイッククリーンです。
メジャーバージョンアップということでUIも刷新されています。
<a href="/officer/ios%e3%81%ae%e3%81%8a%e6%8e%83%e9%99%a4%e3%82%bd%e3%83%95%e3%83%88%e3%80%8cphonclean4%e3%80%8d%e3%81%8c%e7%99%bb%e5%a0%b4.html/attachment/%e7%a9%ba%e7%99%bd_skitch_%e3%82%ad%e3%83%a3%e3%83%b3%e3%83%8f%e3%82%99%e3%82%b9-2" rel="attachment wp-att-9211"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9211" src="/uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4-300x186.jpg" alt="空白_Skitch_キャンバス" width="300" height="186" srcset="/uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4-300x186.jpg 300w, /uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4-768x476.jpg 768w, /uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4-228x141.jpg 228w, /uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px" /></a>
こんな感じでワンクリックでクリーンナップが可能です。
<a href="/officer/ios%e3%81%ae%e3%81%8a%e6%8e%83%e9%99%a4%e3%82%bd%e3%83%95%e3%83%88%e3%80%8cphonclean4%e3%80%8d%e3%81%8c%e7%99%bb%e5%a0%b4.html/attachment/%e7%a9%ba%e7%99%bd_skitch_%e3%82%ad%e3%83%a3%e3%83%b3%e3%83%8f%e3%82%99%e3%82%b9-3" rel="attachment wp-att-9214"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9214" src="/uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4-1-300x186.jpg" alt="空白_Skitch_キャンバス" width="300" height="186" srcset="/uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4-1-300x186.jpg 300w, /uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4-1-768x476.jpg 768w, /uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4-1-228x141.jpg 228w, /uploads-archive/2016/01/cd5aef7eb60fd69d969f305e193790d4-1.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px" /></a>
古いiphone5ですが、容量16GB中1.86GBも削除対象になりました。
<h3>インタネットクリーン</h3>
<a href="/officer/ios%e3%81%ae%e3%81%8a%e6%8e%83%e9%99%a4%e3%82%bd%e3%83%95%e3%83%88%e3%80%8cphonclean4%e3%80%8d%e3%81%8c%e7%99%bb%e5%a0%b4.html/attachment/%e7%a9%ba%e7%99%bd_skitch_%e3%82%ad%e3%83%a3%e3%83%b3%e3%83%8f%e3%82%99%e3%82%b9-2-2" rel="attachment wp-att-9216"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9216" src="/uploads-archive/2016/01/7dea7c7d690999ce9c39ca654463e151-300x186.jpg" alt="空白_Skitch_キャンバス 2" width="300" height="186" srcset="/uploads-archive/2016/01/7dea7c7d690999ce9c39ca654463e151-300x186.jpg 300w, /uploads-archive/2016/01/7dea7c7d690999ce9c39ca654463e151-768x476.jpg 768w, /uploads-archive/2016/01/7dea7c7d690999ce9c39ca654463e151-228x141.jpg 228w, /uploads-archive/2016/01/7dea7c7d690999ce9c39ca654463e151.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px" /></a>
Safariのファイルをクリーンナップしてくれます。
普段、Chromeに統一している私としては、是非とも他のブラウザも対象になってくれたら嬉しいなと思います。
<a href="/officer/ios%e3%81%ae%e3%81%8a%e6%8e%83%e9%99%a4%e3%82%bd%e3%83%95%e3%83%88%e3%80%8cphonclean4%e3%80%8d%e3%81%8c%e7%99%bb%e5%a0%b4.html/attachment/%e7%a9%ba%e7%99%bd_skitch_%e3%82%ad%e3%83%a3%e3%83%b3%e3%83%8f%e3%82%99%e3%82%b9-3-2" rel="attachment wp-att-9217"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9217" src="/uploads-archive/2016/01/c32e6f4f5e46a7a55ac8e9491733fbf7-300x186.jpg" alt="空白_Skitch_キャンバス 3" width="300" height="186" srcset="/uploads-archive/2016/01/c32e6f4f5e46a7a55ac8e9491733fbf7-300x186.jpg 300w, /uploads-archive/2016/01/c32e6f4f5e46a7a55ac8e9491733fbf7-768x476.jpg 768w, /uploads-archive/2016/01/c32e6f4f5e46a7a55ac8e9491733fbf7-228x141.jpg 228w, /uploads-archive/2016/01/c32e6f4f5e46a7a55ac8e9491733fbf7.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px" /></a>
このインターネットクリーンは「iphoneを探す」が有効になっているとダメなようです。
<a href="/officer/ios%e3%81%ae%e3%81%8a%e6%8e%83%e9%99%a4%e3%82%bd%e3%83%95%e3%83%88%e3%80%8cphonclean4%e3%80%8d%e3%81%8c%e7%99%bb%e5%a0%b4.html/attachment/%e7%a9%ba%e7%99%bd_skitch_%e3%82%ad%e3%83%a3%e3%83%b3%e3%83%8f%e3%82%99%e3%82%b9-4" rel="attachment wp-att-9218"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9218" src="/uploads-archive/2016/01/a7c1e0be3429927f66a1cc5a129d8082-300x186.jpg" alt="空白_Skitch_キャンバス 4" width="300" height="186" srcset="/uploads-archive/2016/01/a7c1e0be3429927f66a1cc5a129d8082-300x186.jpg 300w, /uploads-archive/2016/01/a7c1e0be3429927f66a1cc5a129d8082-768x476.jpg 768w, /uploads-archive/2016/01/a7c1e0be3429927f66a1cc5a129d8082-228x141.jpg 228w, /uploads-archive/2016/01/a7c1e0be3429927f66a1cc5a129d8082.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px" /></a>
iphoneの画面が復元中となり、再起動し始めました。
<h3>プライバシークリーン</h3>
<a href="/officer/ios%e3%81%ae%e3%81%8a%e6%8e%83%e9%99%a4%e3%82%bd%e3%83%95%e3%83%88%e3%80%8cphonclean4%e3%80%8d%e3%81%8c%e7%99%bb%e5%a0%b4.html/attachment/%e7%a9%ba%e7%99%bd_skitch_%e3%82%ad%e3%83%a3%e3%83%b3%e3%83%8f%e3%82%99%e3%82%b9-5" rel="attachment wp-att-9221"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9221" src="/uploads-archive/2016/01/69caa7b4783ae8a99e8f693646251bad-300x186.jpg" alt="空白_Skitch_キャンバス 5" width="300" height="186" srcset="/uploads-archive/2016/01/69caa7b4783ae8a99e8f693646251bad-300x186.jpg 300w, /uploads-archive/2016/01/69caa7b4783ae8a99e8f693646251bad-768x476.jpg 768w, /uploads-archive/2016/01/69caa7b4783ae8a99e8f693646251bad-228x141.jpg 228w, /uploads-archive/2016/01/69caa7b4783ae8a99e8f693646251bad.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px" /></a>
メッセージや通話履歴なども削除してしまいますので、必要に応じて使うという機能でしょうか。
<h3>システムクリーン</h3>
<a href="/officer/ios%e3%81%ae%e3%81%8a%e6%8e%83%e9%99%a4%e3%82%bd%e3%83%95%e3%83%88%e3%80%8cphonclean4%e3%80%8d%e3%81%8c%e7%99%bb%e5%a0%b4.html/attachment/%e7%a9%ba%e7%99%bd_skitch_%e3%82%ad%e3%83%a3%e3%83%b3%e3%83%8f%e3%82%99%e3%82%b9-6" rel="attachment wp-att-9223"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9223" src="/uploads-archive/2016/01/e9b34dcf927c09348b412c8aff8b2072-300x186.jpg" alt="空白_Skitch_キャンバス 6" width="300" height="186" srcset="/uploads-archive/2016/01/e9b34dcf927c09348b412c8aff8b2072-300x186.jpg 300w, /uploads-archive/2016/01/e9b34dcf927c09348b412c8aff8b2072-768x476.jpg 768w, /uploads-archive/2016/01/e9b34dcf927c09348b412c8aff8b2072-228x141.jpg 228w, /uploads-archive/2016/01/e9b34dcf927c09348b412c8aff8b2072.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px" /></a>
iOSの通知などOSレイヤーのファイルを削除してくれます。
<h3>ツールボックス</h3>
<a href="/officer/ios%e3%81%ae%e3%81%8a%e6%8e%83%e9%99%a4%e3%82%bd%e3%83%95%e3%83%88%e3%80%8cphonclean4%e3%80%8d%e3%81%8c%e7%99%bb%e5%a0%b4.html/attachment/%e7%a9%ba%e7%99%bd_skitch_%e3%82%ad%e3%83%a3%e3%83%b3%e3%83%8f%e3%82%99%e3%82%b9-7" rel="attachment wp-att-9224"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9224" src="/uploads-archive/2016/01/89b8f24ec17c294e5e4ba923e99d6731-300x186.jpg" alt="空白_Skitch_キャンバス 7" width="300" height="186" srcset="/uploads-archive/2016/01/89b8f24ec17c294e5e4ba923e99d6731-300x186.jpg 300w, /uploads-archive/2016/01/89b8f24ec17c294e5e4ba923e99d6731-768x476.jpg 768w, /uploads-archive/2016/01/89b8f24ec17c294e5e4ba923e99d6731-228x141.jpg 228w, /uploads-archive/2016/01/89b8f24ec17c294e5e4ba923e99d6731.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px" /></a>
ご覧の機能を個別にクリーンアップできます。
<h3>バックアップ</h3>
<a href="/officer/ios%e3%81%ae%e3%81%8a%e6%8e%83%e9%99%a4%e3%82%bd%e3%83%95%e3%83%88%e3%80%8cphonclean4%e3%80%8d%e3%81%8c%e7%99%bb%e5%a0%b4.html/attachment/%e7%a9%ba%e7%99%bd_skitch_%e3%82%ad%e3%83%a3%e3%83%b3%e3%83%8f%e3%82%99%e3%82%b9-8" rel="attachment wp-att-9226"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-9226" src="/uploads-archive/2016/01/d8c81df986a598a0439e815ed5eedb1a-300x186.jpg" alt="空白_Skitch_キャンバス 8" width="300" height="186" srcset="/uploads-archive/2016/01/d8c81df986a598a0439e815ed5eedb1a-300x186.jpg 300w, /uploads-archive/2016/01/d8c81df986a598a0439e815ed5eedb1a-768x476.jpg 768w, /uploads-archive/2016/01/d8c81df986a598a0439e815ed5eedb1a-228x141.jpg 228w, /uploads-archive/2016/01/d8c81df986a598a0439e815ed5eedb1a.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
<h2>無料版と正式版の機能差</h2>
正式版では、目玉機能の一つと思われるサイレントクリーンが使えるようになります。
個人用ライセンスは2,999円となっています。
インターネット履歴が正式版となっていますが、無料版でもその選択肢がありましたので、ここらへんの差が現時点だと分かりませんね。
<table class="buycpr_tb">
<tbody>
<tr>
<th align="left">自分に応じて選択してください</th>
<th class="buy_free_imgs_text">無料版</th>
<th class="buy_pro_imgs_text">正式版</th>
</tr>
<tr>
<td>AppジャンクのクリーンアップiOS 8.3以前のバージョンの利用者は、この効率的な機能をまだ使えて、多くのストレージを再利用します。</td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right.png" alt="" /></td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right2.png" alt="" /></td>
</tr>
<tr>
<td>ユーザージャンクのクリーンアップストレージを占有したり、iPhoneのパフォーマンスを低下させたりする大量のiOSジャンクをクリアします。</td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right.png" alt="" /></td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right2.png" alt="" /></td>
</tr>
<tr>
<td>容量&amp;古いファイルのクリーンアップ大容量ファイル、及び視聴したビデオや映画をクリアすることで、かなりのiPhoneストレージを取得します。</td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right.png" alt="" /></td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right2.png" alt="" /></td>
</tr>
<tr>
<td>7つの先進的なクリーンアップツール7つのiOSチューニング&amp;メンテナンス・ツールは、特定なジャンクを高効率にクリーンアップします。</td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right.png" alt="" /></td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right2.png" alt="" /></td>
</tr>
<tr>
<td>より安全なコンテンツ復元より安全なiPhone復元オプションを提供して、再度iTunes同期の面倒から避けて、突然のデータ紛失をご心配はありません。</td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right.png" alt="" /></td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right2.png" alt="" /></td>
</tr>
<tr>
<td>サイレントクリーンでiPhoneをクリーンアップハンズフリーなiOSクリーニング体験をお楽しみ &#8211; USBケーブルの接続が必要なく、プログラムの起動が必要なく、長い時間も必要ありません。</td>
<td class="buy_circle"></td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right2.png" alt="" /></td>
</tr>
<tr>
<td>写真ジャンクのクリーンアップ様々な写真ジャンクを削除することで、スペースを解放し、カメラの速い読み込みスピードを維持します。</td>
<td class="buy_circle"></td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right2.png" alt="" /></td>
</tr>
<tr>
<td>インターネット履歴のクリーンアップどんなウェブサイトを閲覧しても、メールを受送信しても、その履歴を安全かつ迅速に削除することができます。</td>
<td class="buy_circle"></td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right2.png" alt="" /></td>
</tr>
<tr>
<td>機密データのクリーンアップ受送信したメッセージ、画像、ビデオ記録、ボイスメールなど個人データを削除して、プライバシーを守ります。</td>
<td class="buy_circle"></td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right2.png" alt="" /></td>
</tr>
<tr>
<td>総合的なプライバシーのクリーンアップメッセージ、メモ、通話履歴など削除したデータが第三者復元アプリが取り戻されないように、徹底に削除します。</td>
<td class="buy_circle"></td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right2.png" alt="" /></td>
</tr>
<tr>
<td>iOSのクリーンアップと最適化iPhone 5、さらにもっと古いiPhoneを新品のように速く実行させます。それを簡単にします。</td>
<td class="buy_circle"></td>
<td><img decoding="async" src="http://www.imobie.jp/phoneclean/img/buy_list_right2.png" alt="" /></td>
</tr>
</tbody>
</table>
参考）<a href="http://www.imobie.jp/phoneclean/go-pro.htm" target="_blank">http://www.imobie.jp/phoneclean/go-pro.htm</a>
<h2>まとめ</h2>
UIも刷新されて順当にバージョンアップが遂げられています。
前に指摘してしまった日本語翻訳も改善されておりました！
また、正式版の「iPhone 5以前の端末を高速化」というのが気になっています。
&nbsp;

iOSのお掃除ソフト「PhoneClean4」が登場

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

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

完全に自分のためなのだが、データをカラム数を指定してテーブルにしてくれるツールを作った。
<a class="demo" href="/demo/hoshino/60/" target="_blank">デモ</a>
&nbsp;
ライティングをしていてとりあえずリスト化したあとに
ワイヤーなどにするとき表組みしたい時がしばしばある。
HTMLはそのまま使えるし、プレビューをコピーすればExcelに貼り付けることもできるようになっている。
&nbsp;
例えばLaunchCartの機能一覧をメモして5カラムの表にすると
<div style="height: 200px; overflow: scroll;">リッチテキストエディタ 
拡張フィールド 
SKU 
レビュー 
多階層カテゴリ 
お気に入り 
CSV登録 
棚卸し 
カスタマイズ帳票 
カスタマイズ注文CSV 
追跡番号 
ブログ・ニュース 
リソース管理 
スマホ対応 
フューチャーフォン対応 
休業日カレンダー 
配送指定日時自動計算 
売上分析 
管理者権限管理 
テンプレートエンジン 
非会員購入 
分割・リボ払い 
電話注文 
ギフト 
オプション商品 
同梱・別送 
複数配送先 
送料設定 
お届け先管理 
倉庫連携 
ポイント管理 
アンケート 
メルマガ 
コンバージョンタグ 
アフィリエイトタグ 
クーポンコード発行 
シリアルコード発行 
カスタム検索 
会員ランク 
メールテンプレート 
インポート・エクスポート 
決済手数料 
会員登録情報追加 
決済金額指定 
注文編集 
注文ステータス管理</div>
↓
<table>
<tbody>
<tr>
<td>リッチテキストエディタ</td>
<td>拡張フィールド</td>
<td>SKU</td>
<td>レビュー</td>
<td>多階層カテゴリ</td>
</tr>
<tr>
<td>お気に入り</td>
<td>CSV登録</td>
<td>棚卸し</td>
<td>カスタマイズ帳票</td>
<td>カスタマイズ注文CSV</td>
</tr>
<tr>
<td>追跡番号</td>
<td>ブログ・ニュース</td>
<td>リソース管理</td>
<td>スマホ対応</td>
<td>フューチャーフォン対応</td>
</tr>
<tr>
<td>休業日カレンダー</td>
<td>配送指定日時自動計算</td>
<td>売上分析</td>
<td>管理者権限管理</td>
<td>テンプレートエンジン</td>
</tr>
<tr>
<td>非会員購入</td>
<td>分割・リボ払い</td>
<td>電話注文</td>
<td>ギフト</td>
<td>オプション商品</td>
</tr>
<tr>
<td>同梱・別送</td>
<td>複数配送先</td>
<td>送料設定</td>
<td>お届け先管理</td>
<td>倉庫連携</td>
</tr>
<tr>
<td>ポイント管理</td>
<td>アンケート</td>
<td>メルマガ</td>
<td>コンバージョンタグ</td>
<td>アフィリエイトタグ</td>
</tr>
<tr>
<td>クーポンコード発行</td>
<td>シリアルコード発行</td>
<td>カスタム検索</td>
<td>会員ランク</td>
<td>メールテンプレート</td>
</tr>
<tr>
<td>インポート・エクスポート</td>
<td>決済手数料</td>
<td>会員登録情報追加</td>
<td>決済金額指定</td>
<td>注文編集</td>
</tr>
<tr>
<td>注文ステータス管理</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

改行区切りのデータをテーブルに加工するツール

先週、<a href="/officer/%E3%83%9E%E3%82%A6%E3%82%B9%E3%81%A8%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89lan%E3%81%A7%E5%85%B1%E6%9C%89%E3%81%99%E3%82%8B%E3%80%8Cshare-mouse%E3%80%8D.html" target="_blank">マウスとキーボードLANで共有する「Share Mouse」</a>を紹介しましたが、Androidも出来ないかな〜と調べてみたら、やっぱりあるんですね。
ShareKMというソフトです。ただ、残念ながら開発は止まってしまっているようで、今後のOS等のバージョンアップや互換性によっては動作しない可能性がありますのでご注意下さい。
<h2>ダウンロード</h2>
Windows用ソフト
<a href="https://sites.google.com/site/droidskm/download" target="_blank">https://sites.google.com/site/droidskm/download</a>
Android用ソフト
上記にURLにリンクは繋がっているのですが、現在はGoogleplayからダウンロードが出来ないので、以下のURLからダウンロード出来ます。
<a href="http://forum.xda-developers.com/showpost.php?p=51833757&amp;postcount=170" target="_blank">http://forum.xda-developers.com/showpost.php?p=51833757&amp;postcount=170</a>
<h2>インストール</h2>
それぞれのWindows側、Android側でソフトウェアをインストールします。
<h3>注意点1</h3>
Windows側でAndroidを認識するためのドライバーを入れておく必要があります。
<a href="http://developer.android.com/sdk/win-usb.html" target="_blank">http://developer.android.com/sdk/win-usb.html</a>
<h3>注意点1</h3>
Android側では、Googleplay外からのソフトウェアのインストールに関しては、
設定＞セキュリティ＞提供不明元のアプリ
許可にチェックをしておく必要があります。
<h2>起動</h2>
<h3>注意点2</h3>
Android側はUSBデバックモードにしておく必要があります。
これは、開発者向けオプションの設定欄で可能ですが、デフォルト状態では表示されておらず、
設定＞端末情報＞ビルド番号
のゾーンを連打することで出せます。
以上の設定が完了していると、Connectが表示されます。
実際の動いているイメージは以下のサンプル動画をどうぞ。
<iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/-C-SOEqr6-8?feature=oembed" frameborder="0" allowfullscreen></iframe>
<h2>まとめ</h2>
ShareMouseに比べて少し導入が大変でした。ソフトウェアの設定というよりはAndroidをUSB接続するという制限による部分が大きいです。
このソフトはWifiとBluetoothでの接続も出来ますが、それにはRoot化が必要でもっと知識が必要です。
以前に一度、<a href="/officer/nexus7%EF%BC%882013%EF%BC%89%E3%82%92root%E5%8C%96%E3%81%97%E3%81%A6airdroid%E3%82%92%E4%BD%BF%E3%81%86.html" target="_blank">Root化</a>も試みましたが、今はunrootに戻し、OSのバージョンアップに備えられるようにしています。
また、前回候補に上がっていた<a href="http://synergy-project.org/?hl=ja" target="_blank">Synergy</a>というソフトですが、どうやらAndroidも対応しているようです。
<a href="/uploads-archive/2015/10/e914124341ef0fff0c1634236ce1cfef.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-8256" src="/uploads-archive/2015/10/e914124341ef0fff0c1634236ce1cfef-300x154.jpg" alt="Synergy_-_マウス・キーボード共有ソフト" width="300" height="154" srcset="/uploads-archive/2015/10/e914124341ef0fff0c1634236ce1cfef-300x154.jpg 300w, /uploads-archive/2015/10/e914124341ef0fff0c1634236ce1cfef-228x117.jpg 228w, /uploads-archive/2015/10/e914124341ef0fff0c1634236ce1cfef.jpg 753w" sizes="(max-width: 300px) 100vw, 300px" /></a>
Windows＋Mac＋Linux＋Androidってもうほぼコンシューマー向けのOSをコンプリートしているじゃないですか。
はじめからこちらに挑戦しておけばよかったか。。。。
&nbsp;
<iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/yx274o1a3uA?feature=oembed" frameborder="0" allowfullscreen></iframe>
&nbsp;
&nbsp;

WindowsとAndroidでマウスとキーボードを共有する「ShareKM」

こういう眼から鱗が落ちるソフトが前からあるんですね〜。
メインにMacを使っていて、たまにWindowsが必要になる人なのですが、今までは2つのパターンしか知りませんでした。
&nbsp;
<h3>仮想化ソフトを用いた切り替え</h3>
<a href="/uploads-archive/2015/10/vmware_cloud_logo.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-8215" src="/uploads-archive/2015/10/vmware_cloud_logo-300x199.jpg" alt="vmware_cloud_logo" width="300" height="199" srcset="/uploads-archive/2015/10/vmware_cloud_logo-300x199.jpg 300w, /uploads-archive/2015/10/vmware_cloud_logo-228x151.jpg 228w, /uploads-archive/2015/10/vmware_cloud_logo.jpg 648w" sizes="(max-width: 300px) 100vw, 300px" /></a>
MaxOSの中に仮想化したWindowsOSを立ち上げるパターンなので切り替えというよりは、両立ですね。
ただ、このパターンは2015年のMacbookを持ってしても、激遅という訳ではないのですが、負荷が掛かっているのが分かるほど発熱を伴うので、本当に軽い作業やすぐに確認したいという場合しか利用しないようにしています。
<h3>USB切替器を用いた物理的な切り替え</h3>
<iframe loading="lazy" width="300" height="150" src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=sackoh71-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=ss_til&amp;asins=B0029ULLRU" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
物理的にPCを2台使う場合、このパターンしかないと思っていました。
自宅ではWindowsの自作デスクトップが鎮座しているので、切替器を買おうかな〜と本気で考えていました。
そんななか、第三のパターンを初めてしりました。
<h3>マウスとキーボードLANで共有する「Share Mouse」</h3>
<iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/veKYkc_u7hc?feature=oembed" frameborder="0" allowfullscreen></iframe>
まずはデモ動画を見てもらうのが一番早いですね。
<a href="/uploads-archive/2015/10/ShareMouse_monitormanager.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-8226" src="/uploads-archive/2015/10/ShareMouse_monitormanager-300x215.png" alt="ShareMouse_monitormanager" width="300" height="215" srcset="/uploads-archive/2015/10/ShareMouse_monitormanager-300x215.png 300w, /uploads-archive/2015/10/ShareMouse_monitormanager-228x164.png 228w, /uploads-archive/2015/10/ShareMouse_monitormanager.png 496w" sizes="(max-width: 300px) 100vw, 300px" /></a>
こんな感じでディスプレイを配置して一つのマウスとキーボードでWindowsとMac問わず（但しLinuxは否）行ったり来たりができちゃいます。
<a href="http://www.keyboard-and-mouse-sharing.com/" target="_blank">http://www.keyboard-and-mouse-sharing.com/</a>
無料版ではディスプレイ2つとPC2つまで対応しており、上記のようにディスプレイが3つ以上になるとPro Editionが必要になります。
料金表はこちら
<a href="http://www.keyboard-and-mouse-sharing.com/docs2/09/shop.php" target="_blank">http://www.keyboard-and-mouse-sharing.com/docs2/09/shop.php</a>
<h3>まとめ</h3>
実際に使ってみましたが、LANを経由しているタイムラグというのはほとんど体感できないレベルにまで仕上がっているので、言われてみないと気づかないかもしれません。そもそも、Bluetooth等の無線の規格でPCと繋がっているので、よほど遅延が致命的になるようなゲームでもなければキーボード入力においても問題ないです。
他にもLinuxまで対応しているマウス共有ソフトもあります。
<a href="http://synergy-project.org/" target="_blank">http://synergy-project.org/</a>
&nbsp;

マウスとキーボードLANで共有する「Share Mouse」

生産性アップには敏感な私ですが、このツールにはビビッときました！
パワーポイントもレポートをまとめるのに20個、エクセルにおいてもリストをまとめるのに20個以上と定常的に扱う仕事を複数やっているからです。作業中は、ウィンドウいっぱいで編集したい目的のファイルに辿り着くまでに一苦労という感じでした。
<a href="http://www.extendoffice.com/download/office-tab.html" target="_blank">http://www.extendoffice.com/download/office-tab.html</a>
こちらは、フリーソフトではなくて通常版の「Office Tab」で＄29、「Office Tab Enterprise」で＄39です。
また、Windows 8.1/64bitバージョンまで対応しているようで、Windows10はまだ正式対応待ちというところですね。
30日のフリートライアルが出来るので、試しにインストールしてみました。
<h2>バージョンの違い</h2>
「Office Tab」と「Office Tab Enterprise」の違いは、対応のOfficeの違いで通常版ではWord + Excel + PowerPoint、Enterprise版では更にPublisher + Access + Project + Visioまでがタブ化するという内容です。
<h2>インストール</h2>
サイトからexeファイルをダウンロードしてインストールする流れは通常通りです。
ダウンロードサイトは英語なのでてっきり英語のみかと思っていたら、ソフトウェア自体は日本語化されていました。
<a href="/uploads-archive/2015/09/Windows_8_1_1.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-8193" src="/uploads-archive/2015/09/Windows_8_1_1-300x275.png" alt="Windows_8_1_1" width="300" height="275" srcset="/uploads-archive/2015/09/Windows_8_1_1-300x275.png 300w, /uploads-archive/2015/09/Windows_8_1_1-1024x938.png 1024w, /uploads-archive/2015/09/Windows_8_1_1-228x209.png 228w, /uploads-archive/2015/09/Windows_8_1_1.png 1524w" sizes="(max-width: 300px) 100vw, 300px" /></a>
設定画面もほぼ日本語への翻訳が完了しています。
<h2>タブ化</h2>
<a href="/uploads-archive/2015/09/ca4c31cb9a92c5f1759d8e2c46dc69bf.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-8194" src="/uploads-archive/2015/09/ca4c31cb9a92c5f1759d8e2c46dc69bf-300x103.png" alt="Windows_8_1_と_新規投稿を追加_‹_スターフィールド株式会社_—_WordPress" width="300" height="103" srcset="/uploads-archive/2015/09/ca4c31cb9a92c5f1759d8e2c46dc69bf-300x103.png 300w, /uploads-archive/2015/09/ca4c31cb9a92c5f1759d8e2c46dc69bf-1024x353.png 1024w, /uploads-archive/2015/09/ca4c31cb9a92c5f1759d8e2c46dc69bf-228x79.png 228w, /uploads-archive/2015/09/ca4c31cb9a92c5f1759d8e2c46dc69bf.png 1126w" sizes="(max-width: 300px) 100vw, 300px" /></a>
普通にファイルを開いていったら、今までウィンドウで開かれていたものがタブとして開かれるようになりました。
このありがたさが分かる人には分かるはず！
他のイメージは↓で確認できます。
<a href="http://www.extendoffice.com/product/office-tab/office-tab-feature-demo.html" target="_blank">http://www.extendoffice.com/product/office-tab/office-tab-feature-demo.html</a>
<h2>まとめ</h2>
導入したらおそらく毎回十分レベルで変わってくるはず。そして、集中力も維持出来るであろうことから、Mac版が出たら即買いでも元取れると思います。
Microsoftはブラウザはタブ化されましたが、ファイルエクスプローラーやofficeツールではタブ化を是非進めて欲しいものです。
Macでは、ファインダーまではタブ化されました。

Officeをタブ化するツール「Office Tab」Mac版切望！

今でも業務で使うソフトといったら専らMicrosoftOfficeのWord,Exell,Powerpointだと思いますが、さらに業務別に特化したツールがどんどん出てきていることだと思います。
MicrosoftOfficemの汎用性と出来の良さと最早デファクトスタンダードとしての立ち位置で、ビジネスを進める上でなくてはならない存在は揺るぎないのですが、その中でも、例えば今までパワーポイントやエクセル（一部Adobe製品）の図形描画を駆使して作っていたワイヤーフレームやプロトタイプと呼ばれるデザイン前の骨組みを作成するためのツールは、オンラインでの共有がリアルタイムでの共同編集が出来るようなツールが進化して登場してきています。
そして、私が最近感じていたことが、汎用性と生産性がトレードオフとなって、Officeを超えて生産性を上げるツールが増えていることです。
こういった新しいツールを試してみることは非常に好きですし、生産性は常に改善を目指している中で、今までOfiiceでやっていたことを代替するものの一つが今回紹介する会議、議事録に特化したサービスです。
<h2>Minutes.io</h2>
<a href="/uploads-archive/2015/08/c9546107301adfc146a95932712ec5af.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7988" src="/uploads-archive/2015/08/c9546107301adfc146a95932712ec5af-300x165.jpg" alt="戦略会議" width="300" height="165" srcset="/uploads-archive/2015/08/c9546107301adfc146a95932712ec5af-300x165.jpg 300w, /uploads-archive/2015/08/c9546107301adfc146a95932712ec5af-1024x564.jpg 1024w, /uploads-archive/2015/08/c9546107301adfc146a95932712ec5af-228x126.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<a href="https://minutes.io/welcome" target="_blank">https://minutes.io/welcome</a>
こちらのツールは無料で、すぐに始めることが出来ます。
海外のサービスなので基本英語ですが、Web上でちゃんと日本語も入力できます。
<ul>
<li>プロジェクト名</li>
<li>タイトル</li>
<li>日時</li>
<li>場所</li>
<li>議事</li>
<li>参加者</li>
<li>各Todoに対して、ジャンル、対応者、期限</li>
</ul>
さらに画像の下部を見て頂くと、メールで送れたり、印刷したりといったところが出来ます。
以上のように会議に必要な要素は網羅されています。
<h2>LESS MEETING</h2>
<a href="/uploads-archive/2015/08/Less_Meeting___A_Quick_LessMeeting__Meeting_Page__Tutorial.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7989" src="/uploads-archive/2015/08/Less_Meeting___A_Quick_LessMeeting__Meeting_Page__Tutorial-300x203.jpg" alt="Less_Meeting___A_Quick_LessMeeting__Meeting_Page__Tutorial" width="300" height="203" srcset="/uploads-archive/2015/08/Less_Meeting___A_Quick_LessMeeting__Meeting_Page__Tutorial-300x203.jpg 300w, /uploads-archive/2015/08/Less_Meeting___A_Quick_LessMeeting__Meeting_Page__Tutorial-228x154.jpg 228w, /uploads-archive/2015/08/Less_Meeting___A_Quick_LessMeeting__Meeting_Page__Tutorial.jpg 1017w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<a href="http://lessmeeting.com/" target="_blank">http://lessmeeting.com/</a>
こちら有料で人数によって月額の課金額が変わるビジネスモデルになっています。
会議時間の削減を目的としたサービスで議事録の機能や、各種カレンダーアプリと連携してTodoのスケジュール管理といったところまでが出来るようになっています。
<a href="/uploads-archive/2015/08/Less_Meeting___Dashboard.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7990" src="/uploads-archive/2015/08/Less_Meeting___Dashboard-300x264.jpg" alt="Less_Meeting___Dashboard" width="300" height="264" srcset="/uploads-archive/2015/08/Less_Meeting___Dashboard-300x264.jpg 300w, /uploads-archive/2015/08/Less_Meeting___Dashboard-228x201.jpg 228w, /uploads-archive/2015/08/Less_Meeting___Dashboard.jpg 1011w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<h2>まとめ</h2>
お客様とのやり取りの場合、やはり、誰でも使っているソフトというのが求められてしまうこともありますが、まずは社内での試験導入という形から進めていこうかなと思います。
&nbsp;

議事録用のWebサービス「Minutes.io」と「LESS MEETING」

2週間前に紹介した<a href="/officer/mac%E3%81%AE%E6%96%B0%E3%81%97%E3%81%84%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%82%BD%E3%83%95%E3%83%88%E3%80%8Cmac-clean%E3%80%8D%E3%81%8C%E5%BC%B7%E5%8A%9B%E3%81%AB%E6%8E%83.html" target="_blank">mac向けのクリーニングソフト「Mac Clean」</a>ですが、その後またメールを頂戴しました。
「MacClean 2をリリースしたからまた宜しく！」と。 
press kitと称する公式のスクリーンショットを添えて。
製品リリースした際のこのマーケティングは見習うべきだなとすごく感心しました。 
常日頃から自社のことを調べつくしていないと企業ブログの一記事なんて見つけられないと思います。
ということでまた、新しい記事を紹介しておきます。
<h2>追加機能</h2>
UIの変更はあるものの基本の機能は、<a href="/officer/mac%E3%81%AE%E6%96%B0%E3%81%97%E3%81%84%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%82%BD%E3%83%95%E3%83%88%E3%80%8Cmac-clean%E3%80%8D%E3%81%8C%E5%BC%B7%E5%8A%9B%E3%81%AB%E6%8E%83.html" target="_blank">前回の記事</a>を参照して下さい。
<a href="/uploads-archive/2015/07/Smart-Clean.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7765" src="/uploads-archive/2015/07/Smart-Clean-300x200.png" alt="Smart-Clean" width="300" height="200" srcset="/uploads-archive/2015/07/Smart-Clean-300x200.png 300w, /uploads-archive/2015/07/Smart-Clean-228x152.png 228w, /uploads-archive/2015/07/Smart-Clean.png 900w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<a href="/uploads-archive/2015/07/Utility.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7766" src="/uploads-archive/2015/07/Utility-300x200.png" alt="Utility" width="300" height="200" srcset="/uploads-archive/2015/07/Utility-300x200.png 300w, /uploads-archive/2015/07/Utility-228x152.png 228w, /uploads-archive/2015/07/Utility.png 900w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
&nbsp;
今回追加されたのは、ユーティリティというのが別メニューで用意されています。
&nbsp;
&nbsp;
<a href="/uploads-archive/2015/07/b2d8e63f38da63aa0829e67ab835ec88.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7767" src="/uploads-archive/2015/07/b2d8e63f38da63aa0829e67ab835ec88-300x200.png" alt="スクリーンショット_2015_07_20_22_12" width="300" height="200" srcset="/uploads-archive/2015/07/b2d8e63f38da63aa0829e67ab835ec88-300x200.png 300w, /uploads-archive/2015/07/b2d8e63f38da63aa0829e67ab835ec88-228x152.png 228w, /uploads-archive/2015/07/b2d8e63f38da63aa0829e67ab835ec88.png 898w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<a href="/uploads-archive/2015/07/400277ccc24852bd98f7099da5260503.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7768" src="/uploads-archive/2015/07/400277ccc24852bd98f7099da5260503-300x200.png" alt="スクリーンショット_2015_07_20_22_12_1" width="300" height="200" srcset="/uploads-archive/2015/07/400277ccc24852bd98f7099da5260503-300x200.png 300w, /uploads-archive/2015/07/400277ccc24852bd98f7099da5260503-228x152.png 228w, /uploads-archive/2015/07/400277ccc24852bd98f7099da5260503.png 901w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
press kitももらったのですが、英語だったので一応自分で取った日本語スクリーンショットを。
<h3 id="-">掃除能力</h2>
<a href="/uploads-archive/2015/07/3dcff31d3e08cb70153b32f85e6b9cfb.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7769" src="/uploads-archive/2015/07/3dcff31d3e08cb70153b32f85e6b9cfb-300x200.jpg" alt="スクリーンショット_2015_07_20_22_14" width="300" height="200" srcset="/uploads-archive/2015/07/3dcff31d3e08cb70153b32f85e6b9cfb-300x200.jpg 300w, /uploads-archive/2015/07/3dcff31d3e08cb70153b32f85e6b9cfb-228x152.jpg 228w, /uploads-archive/2015/07/3dcff31d3e08cb70153b32f85e6b9cfb.jpg 899w" sizes="(max-width: 300px) 100vw, 300px" /></a>
今回も相変わらずごっそり掃除してくれますね。 
Cookie等も全てクリアになり、あらゆるウェブサイトで再ログインが必要になるため、頻度を上げると少々面倒な面も否めませんが、大掃除と通常掃除のような使い分けかなと思います。
<h3 id="-">まとめ</h2>
画面右上にFreeの文字が出現したので、おそらく有料版を準備しているのでしょう。 
PCのクリーニングソフトでは、無料版でも高性能なものがたくさんありますので、どのような機能を積んでくるのか今後に期待です。

Mac Cleanがメジャーバージョンアップ

以前に紹介した、phone cleanというiphoneのクリーニングソフトを紹介(参考：<a href="/officer/ios%E3%81%AE%E3%81%8A%E6%8E%83%E9%99%A4%E3%82%BD%E3%83%95%E3%83%88%E3%80%8Cphoneclean%E3%80%8D.html" target="_blank">iOSのお掃除ソフト「PhoneClean」</a>)しましたが、 
同社がmac向けのクリーニングソフトをリリースしておりましたのでご紹介です。
<a href="http://www.imobie.com/macclean/">http://www.imobie.com/macclean/</a>
<h2>クリーニング項目</h2>
<a href="/uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7678" src="/uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911-300x197.jpg" alt="MacClean_と_MacClean_Features_–_Clean_All_Safe-to-Remove_Junk_Files_out_of_Your_Mac_in_A_Smart_and_Worry-Free_Way" width="300" height="197" srcset="/uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911-300x197.jpg 300w, /uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911-228x150.jpg 228w, /uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911.jpg 837w" sizes="(max-width: 300px) 100vw, 300px" /></a>
下記のような項目でクリーニングしてくれます。
<ol>
<li>インターネットジャンク（safari　chrome　firefox）
<ol>
<li>キャッシュ</li>
<li>履歴</li>
<li>クッキー</li>
<li>ダウンロード履歴</li>
<li>セッション</li>
</ol>
</li>
<li>ユーザージャンク
<ol>
<li>ユーザーキャッシュ</li>
<li>ユーザーログ</li>
</ol>
</li>
<li>システムジャンク
<ol>
<li>システムキャッシュ</li>
<li>システムログ</li>
</ol>
</li>
<li>アプリジャンク</li>
</ol>
<h2>クリーニング結果</h2>
定期的にクリーニングソフトはかけているのですが、2.78GBが不要ファイルであると検出されました。 
MacAppstoreにあるDr.Cleanerというソフトも中々オススメですが、こちらは1GB程度の削除となっていたので、 
徹底的にクリーニングしてくれることが分かります。
おかげ、Googleのログイン情報周りのCookieも綺麗さっぱり、要再ログインという感じです。
まだバージョン1.06（2015年7月現在）と若いソフトウェアなので、今後の更なる進化に期待です。
ご利用は自己責任でお願いします。

Macの新しいクリーニングソフト「mac clean」が強力に掃除してくれる

この仕事を始めていこうずっと、webデザインを作成するときはPhotoshopを使っており、 
今は、Photoshop CCを使用しております。 
<a href="http://www.adobe.com/jp/products/photoshop.html" target="_blank">http://www.adobe.com/jp/products/photoshop.html</a> 
これのフォトグラフィプランですね(以前キャンペーンで期間限定的な感じだったのに、今もうプランとして固定されてる・・・)
Dreamweaverは数年前に辞め、 
Adobe製品はこれ以外には、時々illustratorを使うくらいなので、 
Photoshopをやめたら、脱Adobeになってしまうかもしれません。
とはいえ、Photoshopを辞めることなんて早々無いだろうと思っていたのですが、 
最近いろいろな情報を見ていると、Photoshopに劣らないであろう製品がいくつかあるようです。
よく目にする3つをご紹介します。
<h2>Photoshop以外の画像編集ツール</h2>
<h3>Sketch 3</h3>
<img decoding="async" loading="lazy" class="alignnone wp-image-7378" src="/uploads-archive/2015/05/Bohemian-Coding-Sketch-3-1024x621.jpg" alt="Bohemian Coding - Sketch 3" width="630" height="382" srcset="/uploads-archive/2015/05/Bohemian-Coding-Sketch-3-1024x621.jpg 1024w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3-300x182.jpg 300w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3-228x138.jpg 228w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /> 
mac向けで、webサイトのデザインやプレゼンテーションスライドの作成ができるようです。 
$99ですが、trialも出来るので試してみて良かったら購入できますね！
cssへワンクリックで書き出せるとか、 
起動が早いとかあるみたいで、
以下でしっかりまとめられてるのでご覧ください！ 
<a href="http://matome.naver.jp/odai/2140584105966404801">デザイナー必見！今注目のツール「Sketch3」の使い方を勉強できるサイト &#8211; NAVER まとめ</a>
私もTrialをダウンロードしましたが、今だ試せずにいます。
<a class="link" href="http://bohemiancoding.com/sketch/" target="_blank">Bohemian Coding &#8211; Sketch 3</a>
<h3>Pixelmator</h3>
<img decoding="async" loading="lazy" class="alignnone wp-image-7380" src="/uploads-archive/2015/05/Pixelmator-1024x621.jpg" alt="Pixelmator" width="630" height="382" srcset="/uploads-archive/2015/05/Pixelmator-1024x621.jpg 1024w, /uploads-archive/2015/05/Pixelmator-300x182.jpg 300w, /uploads-archive/2015/05/Pixelmator-228x138.jpg 228w, /uploads-archive/2015/05/Pixelmator.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /> 
こちらもmac向けですが、価格は3600円と安め。 
Photoshopと機能性はほぼ同じくらいでpsdファイルとの連携も問題ないそうです。 
最近iPhone用のアプリも発売されたようです。
<a href="http://blockworks.jp/pixelmator/" target="_blank">Pixelmator入門</a>
<a class="link" href="http://www.pixelmator.com/" target="_blank">Pixelmator</a>
<h3>GIMP</h3>
<img decoding="async" loading="lazy" class="alignnone wp-image-7379" src="/uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-1024x621.jpg" alt="GIMP - The GNU Image Manipulation Program" width="630" height="382" srcset="/uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-1024x621.jpg 1024w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-300x182.jpg 300w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-228x138.jpg 228w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /> 
もう何年も前からあるソフトで、こちらはwindowsでも使用できます。 
こちらは基本無償で、簡単な写真加工ならこれで充分できるようです。 
初心者で試しに・・・という人にこちらはオススメです！！
<a href="http://synclogue-navi.com/category/gimp" target="_blank">GIMPの使い方</a> 
<a class="link" href="http://www.gimp.org/" target="_blank">GIMP &#8211; The GNU Image Manipulation Program</a>

Photoshop以外の画像編集ツールでついにAdobe脱却！？

以前、CSSの優先順位についての記事を書いたのですが、 
<a href="/designer/%e5%88%9d%e7%b4%9a%e8%80%85%e3%81%af%e6%84%8f%e5%a4%96%e3%81%a8%e7%90%86%e8%a7%a3%e3%81%97%e3%81%a6%e3%81%aa%e3%81%84css%e3%81%ae%e5%84%aa%e5%85%88%e9%a0%86%e4%bd%8d%e3%81%ab%e3%81%a4%e3%81%84.html">初級者は意外と理解してない(?)CSSの優先順位について | スターフィールド株式会社</a>
その順位をチェックできるツールがありました。 
ポイント制になっておりわかりやすくなっています。
<img decoding="async" loading="lazy" class="alignnone wp-image-7175" src="/uploads-archive/2015/03/Specificity-Calculator-1024x591.jpg" alt="Specificity Calculator" width="640" height="369" srcset="/uploads-archive/2015/03/Specificity-Calculator-1024x591.jpg 1024w, /uploads-archive/2015/03/Specificity-Calculator-300x173.jpg 300w, /uploads-archive/2015/03/Specificity-Calculator-228x132.jpg 228w, /uploads-archive/2015/03/Specificity-Calculator.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" />
「+Duplicate」で比べたいセレクタを追加し、左上にある「Sort by specificity」を押すと、高い順に並べてくれます。
<a class="link" href="http://specificity.keegan.st/" target="_blank">Specificity Calculator</a>
<h2>CSS3のブラウザサポート表</h2>
<h3>HTML5 &amp; CSS3 Web Design</h3>
<img decoding="async" loading="lazy" class="alignnone wp-image-7174" src="/uploads-archive/2015/03/HTML5-CSS3-Web-Design-1024x591.jpg" alt="HTML5 &amp; CSS3 Web Design" width="640" height="369" srcset="/uploads-archive/2015/03/HTML5-CSS3-Web-Design-1024x591.jpg 1024w, /uploads-archive/2015/03/HTML5-CSS3-Web-Design-300x173.jpg 300w, /uploads-archive/2015/03/HTML5-CSS3-Web-Design-228x132.jpg 228w, /uploads-archive/2015/03/HTML5-CSS3-Web-Design.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" /> 
各css3がどのブラウザに対応しているかを表にしているサイトです。わかりやすいですね！
<a class="link" href="http://fmbip.com/litmus/" target="_blank">HTML5 &amp; CSS3 Web Design</a>
<h3>Can I use&#8230; Support tables for HTML5, CSS3, etc</h3>
<img decoding="async" loading="lazy" class="alignnone wp-image-7176" src="/uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-1024x591.jpg" alt="Can I use... Support tables for HTML5, CSS3, etc" width="640" height="369" srcset="/uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-1024x591.jpg 1024w, /uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-300x173.jpg 300w, /uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc-228x132.jpg 228w, /uploads-archive/2015/03/Can-I-use...-Support-tables-for-HTML5-CSS3-etc.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" />
こちら同様ですが、もっと細かく別れており、詳細ページへ行くと以下のようにわかり易く表示してくれています。こちらのサイトの方がブラウザ、バージョンの数は多いですね。
<img decoding="async" loading="lazy" class="alignnone wp-image-7177" src="/uploads-archive/2015/03/Can-I-use...-Support-tables-1024x591.jpg" alt="Can I use... Support tables" width="640" height="369" srcset="/uploads-archive/2015/03/Can-I-use...-Support-tables-1024x591.jpg 1024w, /uploads-archive/2015/03/Can-I-use...-Support-tables-300x173.jpg 300w, /uploads-archive/2015/03/Can-I-use...-Support-tables-228x132.jpg 228w, /uploads-archive/2015/03/Can-I-use...-Support-tables.jpg 1145w" sizes="(max-width: 640px) 100vw, 640px" />
赤がサポート外ですね。 
あとそれぞれの四角い項目にマウスオンすると、そのブラウザ（＆バージョン）のシェアの％を教えてくれます。 
便利ですね！
<a class="link" href="http://beta.caniuse.com/" target="_blank">Can I use&#8230; Support tables for HTML5, CSS3, etc</a>
これらを見ると、今はほぼIE9以上の対応でいい雰囲気なので、
・Box Sizing 
・Border Radius 
・Box Shadow 
・Background Size 
・CSS Transforms 
・nth-child等の擬似要素
なんかはもう普通に使用してもいいかもしれませんね！ 
これを使用できるだけでだいぶ違いますね〜
あとはcss animationやcss transitionが使えるようになると変わりますね。

CSSの優先順位をチェックできるツール＆CSS3のブラウザサポート表

Markdown記法すぐ忘れちゃう自分向けにまとめ。
文章は少なく行きます。使いやすそうなのだけピックアップ
<table>
<caption>Markdown記法早見表</caption>
<tbody>
<tr>
<th rowspan="2">要素</th>
<th>Markdown 記法</th>
<th>HTML出力</th>
</tr>
<tr>
<th colspan="2">説明</th>
</tr>
<tr>
<td rowspan="2">見出し</td>
<td> ### H3見出し</td>
<td>&lt;h3&gt;H3見出し&lt;/h3&gt;</td>
</tr>
<tr>
<td colspan="2"># はレベル数に応じる。</td>
</tr>
<tr>
<td rowspan="2">段落</td>
<td>文章文章</td>
<td>&lt;p&gt;文章&lt;/p&gt;&lt;p&gt;文章&lt;/p&gt;</td>
</tr>
<tr>
<td colspan="2">空行を挟むと上下の文章が別の段落</td>
</tr>
<tr>
<td rowspan="2">改行</td>
<td>改行する際は   半角スペース2つ以上を末尾に追加</td>
<td>改行する際は&lt;br /&gt;半角スペース2つ以上を末尾に追加</td>
</tr>
<tr>
<td colspan="2">半角スペース2つ入れて改行</td>
</tr>
<tr>
<td rowspan="2">並列リスト</td>
<td>* リスト* リストor- リスト
&#8211; リスト</td>
<td>&lt;ul&gt;
&lt;li&gt;リスト&lt;/li&gt;
&lt;li&gt;リスト&lt;/li&gt;
&lt;/ul&gt;</td>
</tr>
<tr>
<td colspan="2">*+ (半角スペース)もしくは-+ (半角スペース)</td>
</tr>
<tr>
<td rowspan="2">順序リスト</td>
<td>1.リスト1.リスト
2.リスト</td>
<td>&lt;ol&gt;
&lt;li&gt;リスト&lt;/li&gt;
&lt;li&gt;リスト&lt;/li&gt;
&lt;li&gt;リスト&lt;/li&gt;
&lt;/ol&gt;</td>
</tr>
<tr>
<td colspan="2">数字＋ピリオド+ (半角スペース）　数字は関係なく、順番に出力される</td>
</tr>
<tr>
<td rowspan="2">引用</td>
<td>&gt;引用</td>
<td>&lt;blockquote&gt;〇〇&lt;/blockquote&gt;</td>
</tr>
<tr>
<td colspan="2">文頭に&gt;</td>
</tr>
<tr>
<td rowspan="2">罫線</td>
<td>&#8211; &#8211; &#8211;</td>
<td>&lt;hr /&gt;</td>
</tr>
<tr>
<td colspan="2">アンダーバー+ (半角スペース）3回</td>
</tr>
<tr>
<td rowspan="2">斜体</td>
<td>*斜体*</td>
<td>&lt;i&gt;斜体&lt;/i&gt;</td>
</tr>
<tr>
<td colspan="2">前後に*（アスタリスク）を１つずつ</td>
</tr>
<tr>
<td rowspan="2">強調</td>
<td> **強調**</td>
<td>&lt;strong&gt;強調&lt;/strong&gt;</td>
</tr>
<tr>
<td colspan="2">前後に*（アスタリスク）を2つずつ</td>
</tr>
<tr>
<td rowspan="2">打ち消し線</td>
<td>~~打ち消し線~~</td>
<td>&lt;s&gt;打ち消し線&lt;/s&gt;</td>
</tr>
<tr>
<td colspan="2">前後に~（波線）を２つずつ</td>
</tr>
<tr>
<td rowspan="2">コード</td>
<td><code>コード</code></td>
<td>&lt;code&gt;コード&lt;/code&gt;</td>
</tr>
<tr>
<td colspan="2">前後に｀（バックティック）を１つずつ</td>
</tr>
<tr>
<td rowspan="2">リンク</td>
<td>[Google](http://google.com)</td>
<td>&lt;a href=&#8221;http://google.com&#8221;&gt;Google&lt;/a&gt;</td>
</tr>
<tr>
<td colspan="2">[リンク文字列](URL)</td>
</tr>
<tr>
<td rowspan="2">画像</td>
<td> ![画像名](http://xxx.com/img/logo.jpg)</td>
<td>&lt;img src=&#8221;http://xxx.com/img/logo.jpg&#8221; alt=&#8221;画像名&#8221; /&gt;</td>
</tr>
<tr>
<td colspan="2">![画像名](http://xxx.com/img/logo.jpg)</td>
</tr>
</tbody>
</table>

Markdown記法早見表

以前にMarkDown記法というのを紹介し、それに対応するエディター「<a href="/officer/markdown%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%80%8Cmou%E3%80%8D.html">Mou</a>」も合わせて紹介しました。
このブログももちろんMarkDownという記法を用いて記述をしています。まだ、リファレンスを見ながらでないと中々素早く記述が出来ませんが、このように強調したりといったところは、どんな言語よりも素早く記述することが出来ると思います。
githubからダウンロードするソースには、「readme.md」という（.mdがMarkDownファイルを示す拡張子）ファイルが大抵入っており、mdファイルを読み込むためのソフトウェアが必要になるシーンが増えているように思います。 
読み込むだけであれば、SublimeTextのプラグインでも十分なようですが、ブログを記述するなどライティングをする場合は、やはり、プレビュー機能などを備えたエディターというのが必要になります。
<h3 id="toc_0">Mouは開発停止状態になっていた</h2>
MarkDownエディターとして代表的なソフトウェアとして「Mou」がありましたが、現在は開発停止状態になっているようでした。 
サイトを訪れてみるとこれまた代表的なクラウドファンディングの一つである「INDIEGOGO」で出資を募っている最中でした。 
<a href="http://25.io/mou/" target="_blank">http://25.io/mou/</a>
<h3 id="toc_1">Mouのファンが作ったエディター「MacDown」</h2>
その開発停止状態になっていた「Mou」をこよなく愛したユーザーにより、開発されたのが今回紹介する「MacDown」になります。
公式サイト上でもMouに多大な影響を受けていると宣言しており、Mouが好きだというエピソードが記載されており、何とも熱い気持ちを受けました。
<a href="http://macdown.uranusjr.com/" target="_blank">http://macdown.uranusjr.com/</a>
FFFTPのように一度開発中止されたものが有志によって、オープンソースとして開発が再開された話しを思い出し、ソフトウェア開発における無情を感じつつも、その背景だけで一気にファンになりました。個人的な感想が入ってしまいましたが、比較した画像が以下になります。
<h3 id="toc_2">「Mou」と「MacDown」の比較画像</h2>
基本的には、左がエディター、右がプレビュー画面となっております。
<a href="/uploads-archive/2014/11/1.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6377" src="/uploads-archive/2014/11/1-300x214.png" alt="1" width="300" height="214" srcset="/uploads-archive/2014/11/1-300x214.png 300w, /uploads-archive/2014/11/1-228x163.png 228w, /uploads-archive/2014/11/1.png 1014w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<a href="/uploads-archive/2014/11/screenshot14.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6379" src="/uploads-archive/2014/11/screenshot14-300x163.png" alt="screenshot" width="300" height="163" srcset="/uploads-archive/2014/11/screenshot14-300x163.png 300w, /uploads-archive/2014/11/screenshot14-1024x556.png 1024w, /uploads-archive/2014/11/screenshot14-228x123.png 228w, /uploads-archive/2014/11/screenshot14.png 1899w" sizes="(max-width: 300px) 100vw, 300px" /></a>
MacDownはエディター部分が黒背景デフォルトとなっており、流行りのSublimeTextと彷彿とさせます。
エディター自体はほぼ同一機能を有しており（Mouをベースに作られているので当たり前ですが）、違和感なく操作が可能です。
<h3 id="toc_3">まとめ</h2>
Mouも開発資金＄20,000を超えて調達に成功をしているようですし、是非ともVer1をリリースして頂きつつ、MacDownも開発を継続してよりよいMarkDownエディタを提供してくれたら幸いです。

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #ソフト・ツール

2016/03/16

2016/03/16

2016/03/09

2016/03/01

2016/02/17

2016/01/19

2016/01/12

2015/11/06

2015/10/14

2015/10/07

2015/09/30

2015/08/26

2015/07/21

2015/07/08

2015/05/13

2015/03/25

2015/02/26

2014/11/26