前回、無料のCMSについての記事を書きましたが、
今回そこででてきた「joomla」について簡単ではありますが、書きたいと思います。
&nbsp;
<h2>Joomla!（ジュームラ）とは</h3>
Joomla!（ジュームラ）とは、
タイトル通り、コンテンツマネジメントシステム（CMS）と呼ばれるホームページ構築システムのひとつです。
Joomla!はオープンソースで開発されており
数あるCMSの中で、世界で8.8%(2012年11月現在)とwordpressに次ぐシェアです。
<a href="http://www.joomla.org/download.html" target="_blank">joomlaのダウンロード</a> 
<a href="http://sourceforge.jp/projects/joomla/" target="_blank">Joomla!じゃぱん 日本語同梱パッケージ</a>
<h2>Joomla!（ジュームラ）の特徴</h3>
<ul>
<li>Joomla!3.0はレスポンシブ対応
・・・Bootstrap（CSSのフレームワーク）を使用</li>
<li>会員管理機能
・・・標準で付いており、会員へメール一斉送信や会員用ページ作成など機能満載。</li>
<li>フォーム
・・・標準で簡単なお問い合わせフォーム機能が付いている</li>
<li>拡張機能
・・・エクステンションと呼ばれる、コンポーネント・プラグイン・モジュールが豊富。</li>
<li>複数人でのサイト運営
・・・標準でアクセスコントロール機能が付いているので、簡単に権限を付けられる。</li>
<li>更新のしやすさ
wordpressのようなエディタはもちろん、ワードやパワーポイント感覚で、webの更新が出来る</li>
<li>PHPが実行できる</li>
</ul>
&nbsp;
<h2>実際に使用されているサイト</h3>
ユニセフやIKEAで使用されているようですが、 
下記URLを見ていただけるとかなり多くの事例があります。
<a href="http://community.joomla.org/showcase/sites.html" target="_blank">http://community.joomla.org/showcase/sites.html</a>
&nbsp;
<h2>インストールしてみた</h3>
&nbsp;
実際の管理画面と、サンプルで使用できるサイトが以下になります。 
サンプルで使用出来るのはブログタイプ、通常のサイトがあります。
管理画面 
<a href="/uploads-archive/2013/07/test-Administration-Control-Panel.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2659" alt="test - Administration - Control Panel" src="/uploads-archive/2013/07/test-Administration-Control-Panel.jpg" width="632" height="409" srcset="/uploads-archive/2013/07/test-Administration-Control-Panel.jpg 1143w, /uploads-archive/2013/07/test-Administration-Control-Panel-768x497.jpg 768w, /uploads-archive/2013/07/test-Administration-Control-Panel-1024x663.jpg 1024w, /uploads-archive/2013/07/test-Administration-Control-Panel-228x148.jpg 228w, /uploads-archive/2013/07/test-Administration-Control-Panel-300x194.jpg 300w" sizes="(max-width: 632px) 100vw, 632px" /></a>
サンプルサイト 
<a href="/uploads-archive/2013/07/Home.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2660" alt="Home" src="/uploads-archive/2013/07/Home.jpg" width="632" height="611" srcset="/uploads-archive/2013/07/Home.jpg 1143w, /uploads-archive/2013/07/Home-300x291.jpg 300w, /uploads-archive/2013/07/Home-768x744.jpg 768w, /uploads-archive/2013/07/Home-1024x992.jpg 1024w, /uploads-archive/2013/07/Home-228x221.jpg 228w" sizes="(max-width: 632px) 100vw, 632px" /></a>
最新のjoomla!3をインストールしてみたんですが、 
アップロードでえらい時間かかりました。
インストールとしては、DatabaseのPHPがverが5.3.1以上ではいけないという箇所以外は、 
特につまずくことなく出来ました。
その手順なんかはまた改めて書きたいと思います。

無料CMSツール「joomla」について

緯度経度情報をまとまった数（100件以上）調べる必要がある時に、有効な手段をまとめました。
まず、2つのサイトを使います。
<h3>Geocording</h4>
<a href="http://www.geocoding.jp/" target="_blank">http://www.geocoding.jp/</a>
住所を一つ一つ調べることで検索結果に現れます。精度がかなり高いです。
<h3>住所から緯度経度を一括で調べるツール</h4>
<a href="http://napzak.com/tool/gcode/upload/#csv" target="_blank">http://napzak.com/tool/gcode/upload/#csv</a>
CSV形式のアップロードすることで、一括して調べることが出来ます。
<h2>1回目の一括ツール</h3>
まず、リストをCSV形式にしてアップロードをします。
住所をキーに一行ずつ緯度経度が帰って来ます。
速度は100件で15分程度です。
300件であれば、45分前後見ておく必要があります。
リストの精度にもよりますが、これでおおよそ7〜8割の緯度経度は取得出来ると思われます。
<h2>2回目の一括ツール</h3>
ここで、出力されたCSVを見て、緯度経度が出力出来なかった原因を調査します。
傾向としては、
・建物名が入っている
・○丁目○番地○号という表記になっている
というリストになっていると取得が出来ないことが多いです。
・建物名を消す
・○-○-○という番地をハイフンでつなげる
という形でリストを修正しアップロードします。
さらにこれで7〜8割程度は取得が出来ます。
300件程度であれば、残りは12件程度になります。
<h2>最後は、力技で1件ずつ調べる</h3>
ここで、先に挙げたGeocordingで調べます。
経験上かなりの精度で緯度経度がでます。
さらには、建物名でも調べることが出来ます。
<h2>まとめ</h3>
・一括ツールで10件程度まで絞り込めるように回す。300件であれば、2回程度。
・最後は力技。

large_google-map-logo-1024x709.jpg

medium_google-map-logo-1024x709.jpg

small_google-map-logo-1024x709.jpg

thumbnail_google-map-logo-1024x709.jpg

google-map-logo-1024x709.jpg

100件以上の緯度経度を調べる最短の方法

今やwebサイトの構築には、欠かせないといっても過言ではないCMS。
普通のwebサイト制作だと、ほぼCMSを使うことになるのですが、
CMSを使うのと、使わないとなると、全然勝手が違います。
特に完成した後の運用面での修正等がグッと楽になります。
&nbsp;
基本弊社では、Movable TypeかWordpressを利用して制作します。
しかし、昨年ぐらいからはほとんどWordpressで作ることのほうが多くなり、
Movable Typeで作る場合は、今までMovable Typeを使っていたというパターンです。
&nbsp;
僕自身はどちらでも構築できるのですが、
今ではWordpressの方がやりやすいと感じています。
というか最近MovableTypeの案件が少なく、忘れかけているというのもあります笑
&nbsp;
CMSについてですが、僕はその２つしか扱えないし、その２つしか知りませんでした。
最近、他にもCMSがあることを知り、軽く意識していたら、
以下の記事を発見しました。
&nbsp;
<a href="http://awoni.net/blog/2012/11/983#.UdvLt1P04_c">CMS の日本でのシェアは WordPress が一人勝ちになっている件 &#8211; Webサービス作成日記</a>
&nbsp;
やはり、世界的にもWordpressのシェアが多いとのこと。特に日本では。
そしてMovableTypeは下降気味であること、
ちょっと前にJoomlaとDrupalというCMSがあることを聞いていたので、その２つもシェアがなかなかあることを知り、
新たな発見と共に、勉強不足だなと感じました。
&nbsp;
JoomlaとDrupalの２つに関しては、実際試してみたいのですが、
まだその機会はなさそうなので、とりあえず今度特徴等を調べてみたいと思います。
その調べた結果をまた記事にしてみたいと思います。
&nbsp;
&nbsp;
&nbsp;

無料で使えるCMSについて

またものすごいアプリを見つけました。
macのトラックパッドに様々なジェスチャーを追加出来ます。また、Windows7の機能である「Aeroスナップ」というのもついています。
11inchのmacbookairを集中して覗きこんでいると、どうしても肩が凝ってしまうので、オフィスでは、積極的に外部ディスプレイに接続して、視点の高さと画面の広さを整え、無理な姿勢にならないようにしています。
しかしながら、ディスプレイの解像度が違うので、毎回、ウィンドウサイズを変更していました。前にも述べましたが、どうもカーソルを合わせてボタンを押すであったり、画面端からウィンドウを引っ張ってサイズを調整するということにストレスを感じます。
そんな中でWindows7のように画面の最大化が簡単だったりしないかなぁということで、ツールを探していたところ、まず、上述の「Aeroスナップ」というツールで「<a href="http://www.boastr.de/" target="_blank">BetterTouchTool</a>」が引っかかりました。
<h2>Macで「Aeroスナップ」のような機能</h3>
<a href="/uploads-archive/2013/05/ddcb287968896adb4a78ed0f1ecf812c.png"><img decoding="async" loading="lazy" alt="空白_Skitch_キャンバス" src="/uploads-archive/2013/05/ddcb287968896adb4a78ed0f1ecf812c-300x221.png" width="300" height="221" /></a>
&nbsp;
Windows7から標準でついている機能ですが、ウィンドウを画面の上端へドラッグで最大化、左端へドラッグで画面全体の左半分、右端へドラッグで右半分へ自動的にリサイズしてくれます。
これだけでも、緑ボタンを押す煩わしさから抜け出すことが出来ます。また、Excelを複数並べて処理をする時などでも、左右に整列させるのが非常に簡単です。
<h2>Global設定で3本指のジェスチャーの追加がよい</h3>
<a href="/uploads-archive/2013/05/dfb134d88aebbd8e7e12beb22f8586c8.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-2244" alt="空白_Skitch_キャンバス_3" src="/uploads-archive/2013/05/dfb134d88aebbd8e7e12beb22f8586c8-300x219.png" width="300" height="219" /></a>
ジェスチャーは上記のような設定画面で追加できます。今実際に設定している画面と下が内容です。
<table>
<tbody>
<tr>
<th>ジェスチャー</th>
<th>割り当てた動作</th>
</tr>
<tr>
<td>Three Finger Swipe Up
3本指で上へスワイプ</td>
<td>Command + T新規作成</td>
</tr>
<tr>
<td>Three Finger Swipe Down
3本指で下へスワイプ</td>
<td>Command + W&nbsp;
閉じる</td>
</tr>
<tr>
<td>Three Finger Tap3本指でタップ</td>
<td>Command + R&nbsp;
更新</td>
</tr>
<tr>
<td>Four Finger Tap
4本指でタップ</td>
<td>Zoom Window Below Cursor&nbsp;
緑ボタンをクリック</td>
</tr>
</tbody>
</table>
Global設定でOS全体に対して、ジェスチャーを設定します。サイトの確認などでよく使う更新もジェスチャーで設定しました。
さらに、これの素晴らしいところは、ショートカットのみならず、アプリケーションを切り替えるといったアクションも設定出来るところです。
そこで、私は、4本指のタップで「Zoom Window Below Cursor」を設定し、これは左上の緑ボタンをクリックしたアクションに相当します。
これで、ディスプレイの上部に持って行ったら最大化が出来るし、4本指タップで最適化が出来るという状態になりました。
<h2> Chromeのタブ切り替えもお手のもの</h3>
<a href="/uploads-archive/2013/05/beffb4fafaaab0dca49b1fe35622bb84.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-2245" alt="空白_Skitch_キャンバス_1" src="/uploads-archive/2013/05/beffb4fafaaab0dca49b1fe35622bb84-300x219.png" width="300" height="219" /></a>
&nbsp;
<table>
<tbody>
<tr>
<th>ジェスチャー</th>
<th>割り当てた動作</th>
</tr>
<tr>
<td>Three Finger Swipe Left
3本指で左へスワイプ</td>
<td>Control + Tab次のタブへ移動</td>
</tr>
<tr>
<td>Three Finger Swipe Right
3本指で右へスワイプ</td>
<td>Shift + Control + Tab前のタブへ移動</td>
</tr>
</tbody>
</table>
さらに、アプリケーション単位で設定ができます。これは、Global設定よりも優先順位が高く設定されます。
ここでは、Chromeにのみタブの切り替えを設定しました。
Global設定と合わせて、タブを閉じる、開く、更新、切り替えという最も使う操作BEST4を全てジェスチャーで設定することが出来ました。
<h2>VMwareへの設定で神アプリへ</h3>
<a href="/uploads-archive/2013/05/7129b3c2a6d1c35547a2f83c6f44e378.png"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-2246" alt="空白_Skitch_キャンバス_2" src="/uploads-archive/2013/05/7129b3c2a6d1c35547a2f83c6f44e378-300x219.png" width="300" height="219" /></a>
<table>
<tbody>
<tr>
<th>ジェスチャー</th>
<th>割り当てた動作</th>
</tr>
<tr>
<td>Two Finger Swipe Left&nbsp;
2本指で左へスワイプ</td>
<td>Alt + →&nbsp;
進む</td>
</tr>
<tr>
<td>Two Finger Swipe Right&nbsp;
2本指で右へスワイプ</td>
<td>Alt + ← 
戻る</td>
</tr>
<tr>
<td>Three Finger Swipe Up&nbsp;
3本指で上へスワイプ</td>
<td>Control + T&nbsp;
新規作成</td>
</tr>
<tr>
<td>Three Finger Swipe Down&nbsp;
3本指で下へスワイプ</td>
<td>Control + W&nbsp;
閉じる</td>
</tr>
<tr>
<td>Three Finger Swipe Left&nbsp;
3本指で左へスワイプ</td>
<td>Control + Tab&nbsp;
次のタブへ移動 </td>
</tr>
<tr>
<td>Three Finger Swipe Right&nbsp;
3本指で右へスワイプ</td>
<td>Shift + Control + Tab&nbsp;
前のタブへ移動</td>
</tr>
</tbody>
</table>
最後の紹介になりますが、実は解決が出来て一番良かったのが、このVMwareへの設定です。
ECサイトを運営しているとツールがWindowsにしか対応していないことが多々あり、毎日、Windows環境を同時に立ち上げています。
しかしながら、VMwareがトラックパッドのジェスチャーに対応しておらず、一番ストレスを抱える状況を一年以上継続しておりました。
ここに来て、アプリケーション単位でジェスチャーが設定出来るという神仕様により、全てが解決することが出来ました。
Mac側の最低限のジェスチャーを同じように設定、スクロールのナチュラルな動き等も再現することで、VMware上のWindowsでも
ほぼ同じ操作感保つことが出来ました。
<h2>まとめ</h3>
日々、生産性を上げるためにこういったツールを探しているのですが、久しぶりにこのアプリはすごいと思いました。しかも無料です。以前に、「<a href="/officer/macbook%E3%83%88%E3%83%A9%E3%83%83%E3%82%AF%E3%83%91%E3%83%83%E3%83%89%E3%82%92%E6%8B%A1%E5%BC%B5%E3%81%99%E3%82%8B%E3%82%A2%E3%83%97%E3%83%AA%E3%80%8Cnex-tab%E3%80%8D%E3%81%A7%E7%94%9F%E7%94%A3.html">nex Tab</a>」という有料アプリを紹介したのですが、「BetterTouchTool」はそのジェスチャーすらも全て内包してしまっているんですよね。
その時点では、このツールを知らなかったのでお金を出してでも欲しいと思ったのですが、ソフトウェアの値段、価値ってどういう風に捉えたらいいんですかね。
人それぞれ好みやもっとよい設定などもあると思いますが、設定のインポート・エクスポートも備えておりますので、複数台のMacをお持ちの方は、Dropbox等で設定を共有すれば、全てが同じ操作にすることが出来ます。

「BetterTouchTool」で劇的生産性アップ！VMwareもジェスチャー対応

<h2>全体把握のための課題と解決</h3>
当社で抱えていた課題、及び条件を下記のように設定し調査をしていました。
<ul>
<li>インストールの必要などがないウェブサービスが好ましい</li>
<li>導入コストは低いほうがよい</li>
<li>シンプルに扱えること</li>
<li>とにかく全体を俯瞰出来ること</li>
</ul>
<h3>インストールの必要がないウェブサービスが好ましい</h4>
まず、探していたのはウェブサービスに限定されます。個々のローカルにインストール作業が発生するアプリケーションですと、環境に依存してしまい、スムーズな情報共有が出来なります。また可能であれば、スマートフォンからも閲覧出来ることが望ましいわけです。
<h3>導入コストは低いほうがよい</h4>
説明は特に不要かと思います。
<h3>シンプルに扱えること</h4>
ここも重要です。様々なサービスがありますが、シンプルに扱うことが出来ないと、結果的に社内に浸透させることが出来ず、半ば自然消滅的になってしまいます。組織として、ルールを徹底させること、何かを根付かせることはものすごく大変なので、「Keep it Simple, Stupid」であることが条件となります。シンプルに扱える＝教育コストが低いということも利にかないます。
<h3>とにかく全体を俯瞰出来ること</h4>
目的でもあり、一番の解決したい課題になります。個人が並行して扱えるデータ量というのはそれほど多くないので、一覧性があり、情報が集約されていることが絶対条件です。
<h2>ガントチャートが最適という解</h3>
以上のような条件を元に検討をしていった結果、ガントチャートが最適という判断に至りました。 誰が何をどの期間でやっているのかこの3つが最低分かればよいので簡単に書くと以下のようになります。 一番の階層は誰がという点です。案件ごとではありません。
<ul>
<li>担当：○○
<ul>
<li>△△プロジェクト
<ul>
<li>1月○日〜2月○日</li>
</ul>
</li>
<li>▲▲プロジェクト
<ul>
<li>2月○日〜2月○日</li>
</ul>
</li>
</ul>
</li>
<li>担当：□□
<ul>
<li>・・・・・・・</li>
</ul>
</li>
</ul>
これだけがわかればいいので、時間軸を横に携わっている期間で長さを取ることが出来るガントチャートが一番ということが分かりました。
<h2>無料のガントチャートツール「Gantter」</h3>
様々な調査をした結果「<a href="http://gantter.com/" target="_blank">Gantter</a>」の導入を決めました。 redmineなどオープンソースも触ったことがありますが、出来ることが多すぎて結果わかりづらいんですよね。
<ul>
<li>インストールの必要などがないウェブサービスが好ましい
<ul>
<li>→クラウド型のサービス。さらにGoogleドライブ（もちろんGoogleAppsアカウントでも）との連携が可能！</li>
</ul>
</li>
<li>導入コストは低いほうがよい
<ul>
<li>→無料</li>
</ul>
</li>
<li>シンプルに扱えること
<ul>
<li>→慣れ親しんだGoogleスプレッドシートのUIです。これでも少し機能が多いかなと思うほどです。日本語に対応しているというところポイントが高いです</li>
</ul>
</li>
<li>とにかく全体を俯瞰出来ること
<ul>
<li>→もちろんガントチャートですから！</li>
</ul>
</li>
</ul>
<h2>まとめ</h3>
社内向けのエントリーということもありますが、これから「Gannter」導入していきます。
操作方法などは、以下の参考URLをご確認下さい。
<h4>参考URL</h6>
<a href="http://d.hatena.ne.jp/TAKEOFF/20110805/1312574779" target="_blank">http://d.hatena.ne.jp/TAKEOFF/20110805/1312574779</a>
<a href="http://www.uesora.com/2013/02/gantter.html" target="_blank">http://www.uesora.com/2013/02/gantter.html</a>
<a href="http://www.iscle.com/blog/goods/323.html" target="_blank">http://www.iscle.com/blog/goods/323.html</a>

無料のガントチャートツール「Gantter」

web制作において、ワイヤーフレームを書くことはほぼ必須になってはいますが、 
みなさん何を使って制作しているのでしょうか？？
僕はなぜかその時々によって違いますが、手書きやPSDでやります。 
ツールはいまいちな感じだったんですが、最近のはよくできているのが多いので、 
その中でも無料で使用できるものをご紹介します。
&nbsp;
<h2>ワイヤーフレーム作成の無料ツール</h3>
&nbsp;
<h3>moqups</h4>
<a href="https://moqups.com/#!/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire01.jpg" width="500" /></a>
・アカウント登録なしで使用できる（画像UPするのにアカウントが必要） 
・制限も特になし 
・ページ遷移の設定ができる
&nbsp;
<h3>cacoo</h4>
<a href="https://cacoo.com/lang/ja/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire02.jpg" width="500" /></a>
・オンラインで作成 
・アカウント作成の必要あり 
・フリー(機能限定)25枚、エクスポート機能３回まで 
・chromeの拡張機能でも使える 
・日本製
&nbsp;
<h3>wireframe.cc</h4>
<a href="http://wireframe.cc/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire03.jpg" width="500" /></a>
・アカウント登録なしで使用できる 
・URLを共有できる 
・スマホバージョンにもできる
&nbsp;
<h3>Justinmind</h4>
<a href="http://www.justinmind.com/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire04.jpg" width="500" /></a>
・ダウンロードしてローカルで使用(windows,mac) 
・スマホバージョンにもできる 
・PDF、画像書き出し 
・枚数制限なし
&nbsp;
<h3>google drive図形描画</h4>
・アカウント必要あり 
・日本語対応 
・wireframe専用ではない
&nbsp;
といった５つになります。 
僕的には、moqups、Justinmindがいいのではないかと思っています。 
moqupsのページの遷移ができるってのはかなり良いポイントですね！
&nbsp;
そして、 
こういうツールを使うのではなく、 
手書きの方がいい！っていう方のために、 
手書き用のテンプレートもご紹介します。 
もちろん、すべてフリーです。
&nbsp;
<h2>手書き用テンプレートPDF</h3>
&nbsp;
<h3>paper browser</h4>
<a href="http://www.raincreativelab.com/paperbrowser/#download-templates" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire05.jpg" width="500" /></a>
いくつか種類があるので、お好みのをダウンロードできます。
<a href="http://www.raincreativelab.com/paperbrowser/#download-templates" target="_blank">ダウンロードページ</a>
&nbsp;
<h3>ZURB Grid Paper</h4>
<a href="http://www.zurb.com/playground/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire06.jpg" width="500" /></a>
他にも様々なテンプレートがあります。
<a href="http://www.zurb.com/playground/playground/tools/ZURB-Grid-Paper.zip" target="_blank">ダウンロード</a>
&nbsp;
<h3>Web Sketching Template</h4>
<a href="http://www.flickr.com/photos/88005207@N00/3884016462/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire07.jpg" width="500" /></a>
<a href="http://www.flickr.com/photos/88005207@N00/3884016462/" target="_blank">ダウンロードページ</a>
&nbsp;
<h3>sneakpeekit</h4>
<a href="http://sneakpeekit.com/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire08.jpg" width="500" /></a>
ここは、webサイトだけでなく、ipadやiphone用等もあります。
<a href="http://sneakpeekit.com/wireframe-sketchsheets/" target="_blank">ダウンロードページ</a>
&nbsp;
<h3>paperkit</h4>
<a href="http://paperkit.net/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire09.jpg" width="500" /></a>
こちらはワイヤーフレームというわけではなく、 
方眼紙を自由なサイズにして、ダウンロードできるものです。
<a href="http://paperkit.net/" target="_blank">paperkit</a>
&nbsp;
以上となります。
&nbsp;
&nbsp;
大変便利ですね〜、こういうツールは本当にありがたい。

ワイヤーフレーム作成に無料で使えるツール5選、手書き用テンプレートPDFも紹介

macbookのトラックパッドのジェスチャーを拡張してタブブラウザの生産性を劇的にアップさせるすごいアプリ「nex TAB」を最近知ったので、ご紹介します。
以前に紹介した<a href="/officer/mac%E7%89%88chrome%E3%81%A7%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%B8%E3%82%A7%E3%82%B9%E3%83%81%E3%83%A3%E3%83%BC%E3%81%8C%E5%8B%95%E4%BD%9C%E3%81%99%E3%82%8B%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD.html" target="_blank">mac版chromeでマウスジェスチャーが動作する拡張機能「Smooth Gesture」</a>のように、私はブラウザの戻るボタンや、閉じるボタンを押すためにカーソルを合わせにいく作業が非常にストレスが溜まる性格です。ショートカットキーを暗記するところから始まりマウスジェスチャーを探し求め、私がMacを使う理由の一つでもある秀逸なトラックパッドのジェスチャーという段階まで来て、さらに、ジェスチャーを拡張するアプリということで一人胸踊りました。
既にVer.4が出ており、MacAppStoreで販売される350円の有料アプリで即ポチして試しました。
nex Tab
<a title="Next Tab" href="http://itunes.apple.com/jp/app/nextab/id468063641?mt=12" target="_blank">http://itunes.apple.com/jp/app/nextab/id468063641?mt=12</a>
<h2>操作方法</h3>
<h3>右隣のタブに移動したい時</h4>
<a href="/uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1702" alt="スクリーンショット_2013_03_13_11_19" src="/uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220-300x222.png" width="300" height="222" srcset="/uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220-300x222.png 300w, /uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220-228x169.png 228w, /uploads-archive/2013/03/bebca0634d9a6fae6c8723f5bab61220.png 483w" sizes="(max-width: 300px) 100vw, 300px" /></a>
2本の指を用います。左側の指を置きながら、右側の指をタップします。
逆に左隣のタブに移動したいときは、右側の指を固定し、左側の指をタップします。
<h3>タブを2個以上移動したい時</h4>
<a href="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1703" alt="スクリーンショット_2013_03_13_11_20" src="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb-300x221.png" width="300" height="221" srcset="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb-300x221.png 300w, /uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb-228x168.png 228w, /uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb.png 481w" sizes="(max-width: 300px) 100vw, 300px" /></a>
トラックパッドの上部の境目を移動したい方向になぞります。
<h3>タブを閉じたい時</h4>
<a href="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb1.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1704" alt="スクリーンショット_2013_03_13_11_20" src="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb1-300x218.png" width="300" height="218" /></a> 
3本指を用います。右側2本の指を置きながら、左側の指をタップします。
<h3>新規タブを追加したい時</h4>
<a href="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1705" alt="スクリーンショット_2013_03_13_11_20" src="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2-300x220.png" width="300" height="220" srcset="/uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2-300x220.png 300w, /uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2-228x168.png 228w, /uploads-archive/2013/03/db28ae2194f28ed12d6c2a34a5f7bceb2.png 479w" sizes="(max-width: 300px) 100vw, 300px" /></a>
3本指を用います。左側2本の指を置きながら、右側の指をタップします。
<h3>タブを更新したい時</h4>
<a href="/uploads-archive/2013/03/7a245d192479ff5db38067407bcbd7511.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1707" alt="スクリーンショット_2013_03_13_11_21" src="/uploads-archive/2013/03/7a245d192479ff5db38067407bcbd7511-300x220.png" width="300" height="220" /></a>
3本指を用います。真ん中の指をタップします。
<h3>ログイン画面に戻る</h4>
1本指でトラックパッドの右端から左端へ素早く移動させます。
※Ver4で追加された新機能です。
<h3>トップとボトムに移動する</h4>
2本指を用いてスクロールする要領で上端から下端に移動させます。
※Ver4.0現在スクロールの方向をナチュラルに設定している場合、スクロールと逆の動きになります。
<h2>まとめ</h3>
マウスジェスチャーにトラックパッドで最強です。ただ、ジェスチャーが体が記憶するのに時間が掛かりそうです。
&nbsp;

macbookトラックパッドを拡張するアプリ「nex Tab」で劇的生産性アップ

みなさんは、マウスジェスチャーを使用しますか？
私は、Windows、Firefoxを メインに使っていた数年前から、マウスジェスチャーを多用していました。
ブラウジングなどでは、マウスを持つ片手のみで完結し、戻るためにフォーカスを合わせる必要もないので捗ります。
mac、chromeに移行をしてからもSmooth Gestureというプラグインを利用していたのですが、
突然、Chrome Web Storeから削除されるという事態が起こりました。
<del><a href="/uploads-archive/2012/12/smooth-gesture-8.png"><img decoding="async" loading="lazy" class=" wp-image-1549 alignnone" alt="smooth-gesture-8" src="/uploads-archive/2012/12/smooth-gesture-8.png" width="24" height="24" /></a>Smooth Gesture</del>
当時の流れなどは↓のブログに書かれております。
<a href="http://blog.livedoor.jp/protanuki/archives/13931688.html" target="_blank">http://blog.livedoor.jp/protanuki/archives/13931688.html</a>
&nbsp;
その他にも
<a href="https://chrome.google.com/webstore/detail/gestures-for-chrometm/jpkfjicglakibpenojifdiepckckakgk?hl=ja" target="_blank">Gestures for Chrome(TM)</a>
などのマウスジェスチャーのプラグインがあるのですが、残念ながら現時点でmacには、対応しておりません。
マウスジェスチャーが失われてから数ヶ月、chromeを離れられる訳にもいかず、今でも長年の癖で空振りジェスチャーをしてしまっていましたが、ふと思い立って調べてみると、Smooth Gestureが復活していることが分かりました！
問題となったマルウェア削除したバージョンということですが、ご利用は自己責任でお願い致します。
<h2>リンク</h3>
<a href="http://nisza.org/" target="_blank">http://nisza.org/</a>
<a href="/uploads-archive/2012/12/fde42154af135f9fec5ec34d7c11da85.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-1550" alt="スクリーンショット_2013_02_20_12_15-3" src="/uploads-archive/2012/12/fde42154af135f9fec5ec34d7c11da85-300x123.jpg" width="300" height="123" /></a>
<blockquote>Smooth Gestures 0.15.4 &#8211; Hacked clean version (no malware)</blockquote>
と書いてある箇所からダウンロードが出来ます。
<h3>インストールの注意点</h4>
Chrome Web Store外からの拡張機能をインストールするためには「拡張機能の管理」を開き、
ダウンロードしたファイルを「拡張機能の管理」の画面にドラッグ＆ドロップでインストールをすることが出来ます。
&nbsp;

mac版chromeでマウスジェスチャーが動作する拡張機能「Smooth Gesture」

先日、弊社が入居する<a href="http://www.waseda.jp/rps/incubation/index.htm" target="_blank">早稲田大学インキュベーションセンター</a>の交流会に参加して来ました。
基本的には、入居者及び起業に関心を持つ学生限定のクローズドな会ですが、毎回ゲストをお呼びして、講演が行われます。
今回は
「IT従業者のメンタルヘルス」
という題材で早稲田大学スポーツ科学部　内田直教授によるものでした。
精神科医でもある内田先生の元に訪れる精神疾患者はIT従業者の割合が非常に高いということで、そのような現状と予防策を教えて頂きました。
まず、何故精神疾患に陥るのか簡単に説明すると、交感神経と副交感神経のバランスが崩れること。
交感神経は、緊張、副交感神経は緩和（リラックス）ですが、IT従業者は、交感神経が長時間働いている割合が多いと仰っていました。その理由として
<ul>
<li>一人への責任が大きい</li>
<li>長時間労働が多い</li>
<li>ゲーム等の趣味でもディスプレイを眺める人が多い</li>
<li>慢性的な運動不足</li>
</ul>
などがあり、その中の一つで、昨今話題のブルーライトについて言及されていました。ディスプレイから発生する光が太陽の波長に似ていて、脳が昼間だと勘違いし、交感神経系を刺激してしまい、精神疾患の一因になるだけではなく、複合的に<a href="http://www.lifehacker.jp/2011/03/110308_bed_ipad.html" target="_blank">睡眠障害</a>まで引き起こしてしまう可能性があるとのことです。
このブルーライトを抑制するメガネが流行っておりますが、同様の効果が得られるWindowsやMacのフリーソフト「<a href="http://stereopsis.com/flux/" target="_blank">F.lux</a>」を導入するとよいということを教えて頂きました。
実際に導入をすると、ディスプレイ全体が、オレンジ色にかかり、青白いが少なく、色温度が抑えられていることが実感出来ます。
また、デザイナーなど色を忠実に再現しなくてはいけないような場合には、ワンボタンで1時間動作を切るというありがたい機能も搭載しています。
エンジニアはまず、導入しておけってことですね。
&nbsp;
<h2>まとめ</h3>
&nbsp;
以上、ブルーライトを抑えるフリーソフトをご紹介しましたが、あくまで予防策の一つで何より一番は、運動をすること。その時間を作ることだと仰っていました。
&nbsp;
&nbsp;

Blogブログ

Articles

Contact Us