Blog

※ブログ移転しました。 → hamashun.me

Category » Life Hack

2006年10月10日

眠い時の対処法

プログラマーが眠い時の対処法は?というスレッドがありました。
みんな色んな方法で耐えてるんですねえ・・・・・・。
僕も、専門学校時代から、何度と無く徹夜をしてたりします。
そこで、僕流の対処法をご紹介したいと思います。

2007年02月22日

『あとで読む』を後で読む為の5つの工夫

ソーシャルブックマークのタグでよく見かける、『あとで読む』ですけど、本当に後で読むのは中々大変だったりします。
気づいたら『あとで読む』の山ができていたり・・・・・・。
今日は、そんな『あとで読む』を本当に後で読む為の工夫を考えてみました。

付箋紙にメモしてモニタに貼っておく
アナログ派に。
ToDoリストに追加する
あとで読む』をタスクに追加してしまいます。
重要な内容などに良いかもです。
自分のソーシャルブックマークのフィードを、RSSリーダーに追加する
一度読んだ記事の再確認にもなって一石二鳥!
あとで読むを利用する
メールを使って後で読める超有名サービスを使います。
これ超便利ですよね。
あとで読む意思と時間を持つ
結局は、これが一番大事なんですよね。 というオチ。

2007年03月14日

Web系のスクールについて

僕は「いわゆるスクール」を出てWeb業界に入った人だったりします。 て言うかデジハリ
周りを見渡すとデジハリ率は結構高くて、職場の先輩にも何人もいたりします。

そこで今日は、ずっと書こう書こうと思っていた、スクールに入るかどうしようか迷っている人の為の記事を書いてみようと思います。
そういう人がこのBlogを読んでくれているかどうかは微妙ですけれどw
なお、経験上どうしてもデジハリを意識した内容になってしまいますのでご了承ください。

学校選び

学校のタイプは大きく分けて二種類あります。
一つはデジハリのようにクラス制のシステム。 もう一つはマンツーマンで授業が進むシステム。

僕はクラス制は経験しているので詳しく書けるんですけど、マンツーマンは未経験なので殆ど情報がありません。
そういうご経験のある方にフィードバックとか頂けたら嬉しいです。

クラス制のメリット

Redさんも好きらしいので、今回もメリットとデメリットを書いていくよ!

  1. クラスメイトの存在がやる気を出させる
  2. それっぽい学校気分が味わえる
  3. 横の繋がりができる
  4. 人脈が築ける

一つめのクラスメイトの存在というのは、やはり大きいです。 宿題のデキをお互いに見せ合う時とか、「あーくそう! その手があったか!」とか、お互いに切磋琢磨できます。
二つめの学校気分というのは人それぞれでしょうけど、僕はかなり久しぶりの学校生活だったので、それだけで超楽しめました。
三つめの横の繋がりは、クラスメイトとの繋がりです。 卒業後も連絡を取り合ったり、中には一緒に仕事をするケースもあります。

四つめの人脈というのは、クラスメイトに限らず人との繋がりの意味で、それまでの三つとは勝手が違います。 と言うのも、自分から動かないと実感するのが難しいからです。
しかしこれは、ある意味、スクールでもっとも重要だと考えています。
例えばデザイナークラスとディレクタークラスだと、物の見方や考え方が全く違ったりするので、新鮮な刺激を受けられます。

また、クラスによっては既に業界経験者がいたりもするので、貴重な話を聞けたり、上手くすると在学中から仕事を回して貰えたりします。
ちなみに、僕が雑誌の執筆をさせて貰える事になったのも、ディレクタークラスの先輩のおかげでした。

クラス制のデメリット

世の中良い事があれば悪い事もあります。 という訳でデメリットはこんな感じ。

  1. 授業についていけないと厳しい
  2. 脱落者が出る
  3. 先生によって得意分野がある
  4. クラス内に温度差が発生する

一つめの授業についていけないケースは、普通の学校でも同じですね。 デジハリではアシスタントティーチャーを設置する事で対応しています。
二つめの脱落者は、ある程度は仕方がないようです。 軽い気持ちで入ってきた人は、その後に就職したとしてもやっぱり続かないですしね。

三つめの担当する先生によって得意分野が変わってくるのも、また良し悪しがあります。
デジハリの先生は基本的に現役で働いている人になるんですけど、人によってCSSが得意だったり大手制作会社の現役ディレクターだったりします。
この辺りは前もって情報を仕入れておけば、「こういう先生を希望したい」と相談できるので上手く活用したいところです。

最後のクラス内で温度差が発生する事も、一般の学校でも職場でもアフリカでもよくある事。 ここは大人の余裕で空気を読んで接したい所ですね。
余り温度差が激しくなると台風がおきる、と久米田先生も言っています。

ぶっちゃけ就職率ってどうなん?

デジハリに限っての話ですけど(そこしか経験してないので)、僕の周りを見た感じだと、卒業制作の提出にまでこぎつけた人は、どこかしらWeb関係の仕事に就けています。
イイ所に就職できる人は、経験者か才能ある人か海にも行かず山にも行かず休みの日も学校に泊り込んでGW返上で勉強した人なようです。

クラス制スクールはどんな人にお勧め?

一言で言うなら、燃えてる人です。
やる気ありまくりんぐとか情熱大陸とかクオリティ重視とか、とにかくポジティブな人にお勧めです。

反対に、消極的な人にはちょっと向かないかもしれません。
受身受身になってしまうと、授業中に解らない事があっても質問できなかったりで。

告知

今週末の17日(土曜)に、デジハリ池袋校の学校説明会で喋ります。
まあ、説明会と言ってもそんなに大げさな会じゃないんですけれど。

もし、デジハリに入ろうか悩んでいたり、雰囲気を知りたかったり、池袋校のロビーの豪華さを見たかったら(イームズとかあって凄いんですコレが)是非お越しください。 質問とかモリモリ答えちゃいます。
開始時間は14時頃からの予定で、予約は不要です。

2007年06月01日

Googleアドセンス勉強会のまとめ

追記

  • 2008-2-29 コメントに勉強会で話してくれた佐々木さんから補足を頂きました。 合わせてご覧ください

長文なので、終わりに3行のまとめを用意しました。 時間の無い方はそちらをどうぞー。

社内勉強会でGoogleアドセンスの効果的な使い方などの勉強会がありました。
かなり目から鱗だったのでまとめておきます。

広告は広告と分かる方が良い

悪い例は、コンテンツと違和感なくデザインしてしまうというケース。
これは一見すると、クリック率が上がって報奨金がたくさん貰えるように思うんですが、そこが落とし穴。

Googleアドセンスが望んでいるのは、単なるクリック数の増加ではなくクリックした先のサイトで何らかのアクションを起こしてもらう事。 つまり、広告主の目的を達成して貰う事です。
よって、アドセンスの報酬はクリック数ではなく、クリック数に対する目的の達成率で決まるんだそうです(それをどうやって調べているのかは不明)。

ここまでのまとめ

つまり、Googleアドセンスからの報酬を増やすには、その広告を本当に求めている人にだけクリックして貰う事が理想なんですね。

それを達成するには?

最も単純な方法は、それが広告と分かるようにするという事。 これにより、「誤クリックだったから1秒でリンク先サイトを閉じる」という行動が少なくなります。
そうするとデザイン的には浮いてしまう事が多いのですけど、そこはまあ、(お金とデザインとの)バランスという感じでしょうか。
ちなみに、ネタフルではコンテンツより上にアドセンスを配置するというかなり大胆なデザインになっていますが、それ以前と比べて3~4倍の効果があったとか(この数字は、あくまでネタフルという信頼とか色々があっての事だとは思いますけど)。

禁止事項に注意

逆に、コンテンツに溶け込ませて(悪く言えば)ユーザーを騙してクリック数を稼いでいるようなサイトは、度が過ぎるとGoogleからの警告やアカウント停止もありうるそうです。 そういえば、画像の横にアドセンスを配置する事は明確に禁止されていますね。

Google AdSense プログラム ポリシーを見てみると、そういった制限が意外と多い事がわかります。
これは別にイジワルをしている訳ではなく、Googleとしては顧客満足度を高めたいので、それを達成しやすいようにしているんだと思います。
て言うか、むしろこのポリシーはGoogleがこれまでに収集したデータの集大成と言ってもいいと思います。 これを参考にすれば、更に大きな収益に繋がるかもしれません。

例外

アドセンスをサイトに溶け込ませない、とは言いましたが、例外もあります。 それは、ユーザーが明らかに何かを求めて訪れるサイトの場合。
例えば、不動産を紹介するサイトでは、むしろサイトのデザインに溶け込ませた方が良い事もあります。

これはどういう事かと言うと、ユーザーとしては「不動産を探す」という目的を持って、そのサイトに訪れている訳です。
つまり、良い物件が見つかればサイトのコンテンツだろうとアドセンスだろうと問題ないと言えます。
サイト側としても、サイトのコンテンツでもアドセンスでも、自分のサイトから物件を見つけて貰えれば目的は達成されます。
そしてGoogleは、アドセンスを使って欲しい所でしょう。

検索エンジンの結果ページでも同じ事が言えます。 と言うか、Googleでも使われています。
例えばTシャツ 通販での検索結果を見ると解りやすいです。

まとめ

長くなったので3行でまとめ。

  • Googleアドセンスの報奨金は、クリック数ではなく、広告の効果があったかどうか。
  • それを達成するには、サイトの種類によってデザインを考える。
  • これを守れば、Googleはアドセンスの実績が上がってハッピー。 広告主はお客さんが来てハッピー。 サイト運営者は報奨金が増えてハッピー。 つまりみんながハッピー。

2007年08月27日

ez-HTMLの個人的なチートシートを作った

追記:2007-08-28
何を思ったかチートシートのフィードを配信してみました。
MTが吐く物を改変しただけなので、追々調べて修正していくかも。

これまでも何度か書いているんですけど、僕はez-HTMLというエディタを使っています。
各種補完機能やタブ表示があって、かつ設定項目が豊富にある事が気に入ってます。
ちなみにバージョンは7.20を使っています。

このez-HTML、使い出してから1年半も経っていて、それなりに自分色に染まってきました。
なので、自分で設定したショートカットなどをまとめた、個人的なチートシートを作ってみました。
「ez-HTMLは使っているけど、設定はほとんど素のままだよ!」という人には参考になるかもしれません。

なんて言うか、エディタに限らずなんですけど、同じ物を使い続けて段々となじんでいく感じが凄く好きです。

2007年09月23日

勉強会のまとめ方を公開するよ!

おかげさまで勉強会のまとめ記事が人気です。
知り合いからもまとめ方を知りたいと言われたので、hamashunのやり方を書いてみます。
ノートPCの使用が前提になっています(ある程度のタイプ速度が出せないと手書きの方がいいかも)。

勉強会当日のメモを取る時

多少の誤字は気にしない

「くだしあ」とか「でうs」とか、その程度の誤字は無視します。 あくまでメモなので、読み返した時に記憶を蘇らせるキーにする事が重要です。
あんまりにもひどい誤字は、スピーカーさんの喋りが一息ついた時に直します。 喋っている間はタイプし続けた方がいいと思います。

見出しを作る

スピーカーさんの話し方やスライドの雰囲気から察して、いわゆる大見出し的な発言は目立つようにします。 頭に■とか付けるだけでも大分違います。
僕が使っているez-htmlというエディタは、txtファイルでも色指定を設定できるので、視覚的に区別しやすいです。

example
■メモの取り方その1
◎メモの取り方その1
■□メモの取り方その1□■
インデントを使う

インデント無しで書くのは、中見出し的な言葉にします。 その見出しについての内容はインデントを一つ入れて書きます。
その内容から更に派生した内容がある場合には、更にインデントを入れます。 その繰り返しです。
と、文字で書いても解りづらいと思いますので、例をどうぞ。

example
■□マークアップのフロー□■

素のテキストをマークアップする
 その文書で最もレベルの高い見出しをh1で
  トップページならタイトル
  例えばBlogの個別記事ページなら記事タイトル
 その他もマークアップしていく
 divはまだ使わない
  今はデザインの事は考えない

divでラップする
 ただし文書的に不自然にならないように
  デザインを優先して、見出しと段落を分離とかダメじゃね?
スピーカー以外の言葉に目印を付ける

セッションの最中に参加者から突っ込みが入ったり、自分なりの解釈をメモする事があると思います。
後になって見返してからそれがスピーカーさんの発言では無い事が解るように、行頭に目印を付けておきます。
スピーカーさんの補足的発言に使ってもいいと思います。
今回は、#をスピーカーの補足、$を参加者の突っ込み、%を自分が思った事、としました。

example
■□マークアップのフロー□■

素のテキストをマークアップする
 その文書で最もレベルの高い見出しをh1で
  トップページならタイトル
  例えばBlogの個別記事ページなら記事タイトル
  %SEO効果もありそうやね
 その他もマークアップしていく
 divはまだ使わない
  今はデザインの事は考えない
  #考えると文書中心のマークアップに雑念が入るw
  %雑念てw

divでラップする
 ただし文書的に不自然にならないように
  デザインを優先して、見出しと段落を分離とかダメじゃね?
  $divで分離されていても、同じclassを付ければよいのでは?(○○さん
  #NGでは無いけど一般的では無いと思う
  %classよりも更にdivでラップするとか。 いやそれもうざいか

ただ、これは意識しててもいざタイピングしていると混同しがちなので、『スピーカーの発言とそれ以外』を最低限分けられればいいと思います。

家に帰ってからまとめる時

対象を定める

まとめ記事の対象を決めます。
完全に自分用、勉強会に参加した人向け、勉強会に参加してない人にも解るように、の3段階があると思います。 当然、後になる程作業的には大変になります。

僕は『勉強会に参加した人向け』で書く事が多いです。 なので、ここでは主にその解説です。
参加していない人にも解りやすく書くには、ソースや図版をふんだんに盛り込む必要があるのでは。

構成をまとめる

スピーカーさんも人間なので、スライドが進んでから「あ、まだ喋ってない事があった」とページを戻して喋る事があります。
その間にメモが進んでしまっていると順番がゴチャゴチャになってしまうので、それを整理して順番を正しくします。

内容の割合

記事中に自分の意見はあまり混ぜません。 内容を中心に書いていきます。
自分の文章は補足的に持ちいる以外は、最後か最初に書きます。 逐一感想を書いていくと、かなり文章量が増えてしまって読む方も大変です。

できるだけ早くまとめる

なんだかんだ言っても、これが一番大事だと思います。 時間が経てば経つほど、記憶は薄れていきますよね。
打ち上げなどで家に着くのが深夜という事もあると思いますが、メモをざっと読み返しておくだけでも理解度が変わってくると思います。

公開した後の事

記事を公開した後に、スピーカーさんが資料を公開する事はよくあります。
そうすると資料へのリンクを追加すると思うんですが、記事の冒頭にその旨を追記しておくと、フィードを読んでいる人に優しいです。

ご注意

サンプル中のテキストは、あくまでサンプルです。

おまけ

先日のデザイン勉強会の時のメモを公開します。 資料を公開されていないガクさんのセッション部分は削除しましたが、その他の部分は全てそのままです。
見て貰うと分かるんですけど、ここまで偉そうにアレコレ語ってるわりに実際のメモはかなり乱雑です。 ま、まあ、ヘタに形式を守ろうとして進行に付いていけないよりはいいと思うんです。

2008年11月13日

マルチディスプレイでHTML&CSSコーディングの速度を上げる

シリーズ目次

今よりコーディングのスピードを上げるには|CSS HappyLifeで17個の作業高速化Tipsが公開されていますが、ちょこちょこ言及頂いているので僕も持ちネタを出してみます。
一つ一つが長くなりそうなので、全部で5回に分けて公開しようと思います。

マルチモニタまじおすすめ

4)デュアルじゃなくてトリプルモニタにする。

自宅会社ともにデュアルモニタだけど、1枚増やしてみる。 これで、Photoshop、エディタ、ブラウザで分けれるっていう素晴らしさ。やりたいけど、金が・・・ hamaさんとかモニタ5枚だったっけ?(笑)

今よりコーディングのスピードを上げるには|CSS HappyLife より引用

モニタ2枚でデュアルにしている人は結構いますが、3枚でマルチにしてみると、更に快適になります。
「そんなに使わないよ!」という意見がたまにありますが、平澤さんも言ってるように、エディタ、ブラウザ、デザイン、とそれぞれのモニタに分離できる事がポイントです。

分離できると何が嬉しいのかと言うと、アプリケーションを切り替える手間が削減できます。
もしモニタが2枚の場合は、エディタとブラウザで一画面づつ占有するとして、デザインをどちらかのモニタで兼ねる必要があります。

アプリケーションを切り替える方法としては、マウスクリックやAlt+Tabなどがあると思いますが、マウスクリックはキーボードから手を離す必要があり、Alt+Tabは切り替えミスがイラッとします。
モニタが3枚あれば、そのどちらも解決できます。

モニタ3枚を実現する方法

では、実際にマルチモニタ環境を実現するには、どうすればよいのでしょうか?
それにはいくつかの方法があります。

グラボを増設する

少し敷居の高い方法ですが、グラボ増設さえしてしまえばモニタ4枚という環境も可能です。
僕はこれを試した事は無いのですが、マルチディスプレイ総合スレッドまとめサイト あたりが参考になるかもしれません。

MaxiVistaを使う

MaxiVistaというシェアウェアを使うと、不要になったノートPCをLAN経由で外部モニタとして使う事ができます。

日本版は既に終了しているので、本家から直接購入する事になります。 まあ、今(2008年秋)は円高なので良いんじゃないでしょうか。
僕が導入した際のメモが以下です。 多分この通りに進めれば、問題なくインストールできると思います。

  1. 公式サイトでBuy Nowをクリック
  2. Professionalを選択
  3. フォームを色々埋める。 必須項目あり
  4. シリアルを確認したら、フルバージョンをDL
  5. サーバ側となるPCにexeでインストール
  6. 英語で色々聞かれるのでいい感じに進める
  7. クライアントを何台設定するのか聞かれるので、3台(最高台数)に設定(ラジオボタンのやつ)
  8. 一台分のクライアントexeが作成された所で、再起動をうながすアラートが出る
  9. 再起動する
  10. 無印、B、C、のクライアントexeがデスクトップに出現
  11. それぞれのPCにクライアントexeを入れる
  12. クライアントexeを先に起動して、それからサーバexeを起動するっぽい
  13. タスクトレイのアイコン(ABC別々)を右クリックして、下から2番目と3番目の項目で、リモートモードや外部モニタモードを切り替えられる

MaxiVistaの何がいいって、グラボを増設できないノートPCでもモニタを増やせる事だと思います。 速度も問題無いです。
唯一惜しいのは、Windows限定という事くらい。

USBアダプタを使う

最後はUSBでモニタを接続する方法です。
これを実現するアダプタは結構な種類が存在するのですが、古い製品だと描画速度が遅すぎて使い物になりません。 僕も以前某製品を買って後悔したクチです。

そこいくとBUFFALOのUSB2.0用 ディスプレイ増設アダプタ | GX-DVI/U2は、ほぼ通常のモニタと同じ感覚で使う事ができます。
値段もamazonで6.700円くらいとお手ごろです。

性能も、ニコニコ動画がほぼ問題なく見られるレベルと言うとわかりやすいでしょうか。 かなり普通に使えます。
ただし、モニタサイズは最大でも1600×1200(ワイドなら1680×1050)までの対応である事には注意が必要です。

機器を6つまで同時接続ができたり回転表示ができたりと、全体的にかなりよくまとまっていると思います。
設定なども日本語なので、個人的に最近のイチオシです。 あ、ただ、これもWindowsのみです。

おまけ:hamashunの現在のモニタ環境

正面のモニタ
エディタ、ブラウジング用ブラウザ、ターミナルなど、【操作する物】を配置しています
左のモニタ
社内IRC、メーラー、作業用ブラウザなどを配置。 作業用ブラウザは最大化せず、メーラーの受信箱やIRCがチラリと見えるようにしています。
右のモニタ
ファイラー、デザイン画像、IMウィンドウなどを配置。 ちなみにこれの接続にGX-DVI/U2を使用しています。
右の右のモニタ
社外IRC、Twit、IM本体を配置。 顔を動かさないと視線に入らない位置にあるので、使用頻度の低い物・低くあるべき物を配置しています。 Twitterのやりすぎはよくないですね。
ちなみにチャンミス防止の意味で、IRCを社内と社外でクライアントごと分けています。 接続はMaxiVistaです。
番外:古いノートPC
この2台は、常時は起動していません。 Win2kのIE5.5とXPのIE6が入っているので、確認時のみ起動します。
古いブラウザの確認はスタンドアローン版でやる、という人も多いと思いますが、一応オフィシャルの物も用意しておこうかな、みたいな。 まあ、わざわざ買った訳ではなく、余ってたので使ってるというのが正直なところ。

もしかしたら近日中にPCを買い換えるかもしれないので、そしたらまた変わるかもしれないです。

2008年11月22日

キーボードとマウスを工夫してHTML&CSSコーディングの速度を上げる

シリーズ目次

マークアップエンジニア的キーボードの選び方

キーボード選びは、エディタ選びに負けず劣らず宗教戦争になりそうですが、ぶっちゃけ好みでOKだと思います。 自分に合った物を選ぶのが一番ですよね。
なので、ここでは僕の選択基準について書いてみます。

日本語配列か、英語配列か

個人的には日本語配列派です。
会社のプログラマーの人から「英語配列使いなよ! そうだ俺の余ってるから貸すから。 な? な!」としばしば言われるんですが、HTMLとCSSがメインなら、日本語配列と英語配列の違いはプログラムほどは無いんじゃないかなと思っています。

テンキー付きか、テンキーレスか

テンキーがあるとマウスが遠くなってしまうので、テンキーレスが好きです。
最近、ようやく数字キーをブラインドタッチできるようになってきました(0とかたまに怪しい)。

構造

メンブレン、メカニカル、静電容量無接点などがありますが、ダントツで静電容量無接点が好きです。
あの打鍵感覚は、普通にタイピングしてるだけでテンションが上がってきますね!

hamashun使用のキーボード

僕が使っているのは、東プレのRealforce 89UBというモデルです(参考:東プレ「RealForce 89U」が新たにブラックモデルとなって復活)。 なんか限定モデルらしく、メーカーのサイトには載ってませんでした。
日本語配列・テンキー、Win、appキーレス・静電容量無接点という、まさに僕の好みにガチはまりです。

マークアップエンジニア的マウスの選び方

キーボードにはこだわるけどマウスは意外と普通、という人をちょくちょく見かけます。 と、言うか、「殆どの作業はキーボードだからマウスはぶっちゃけ何でもいいw」なんて人もいますね。
まあでも、人によってはPhotoshopを使ったりするでしょうし、hamashun的マウス選びの基準を書いてみます。

形状

マウスの形状は、キーボード以上に多岐に渡っています。 基本的な形でもトラックボール型かマウス型かがありますし、それぞれが更に分類できます。
ここはもう好みでしょうけど、僕はロジクール系が好きです。

解像度変更機能

マウスの解像度って、高いのが欲しい時と低いのが欲しい時があるんですよね。
Photoshopで1pxだけ動かしたい時は低いのが便利ですし、マルチディスプレイの時に端から端に動かす時は高いのがラクですし…。

そんな時に便利なのが、解像度を動的に変更できる機能を持ったマウスです。
簡単に言うと、マウスのボタンを押すだけで、マウスの速度(って表現でいいのだろうか)が変わります!

任意のキーを設定

キーボードの任意のキーを設定できるマウスが便利です。
僕はCtrlキーを設定しているので、忙しい時に片手がふさがっていてもCtlr+クリックがスピーディに可能です。

hamashun使用のマウス

Logicool G5 Laser Mouseです。
ゲーム用マウスだけあってハードな使用が想定されているらしく、家の物は買ってから3年近く、会社の物ももうすぐ2年になりますが全く問題ありません。
本体の重量調整ができたりもします。

ところでキーボードやマウスを変えたら、本当にコーディングの速度が上がるの?

使い慣れてるキーボードやマウスが無い環境で作業をすると、かなり違和感を感じて効率が落ちてる気がするので、効果があるんじゃないでしょうか! たぶん!

まあ、目に見えた速度UPというよりは、「お気に入りの道具を使う」というモチベーションUPの効果が大きいかもしれません。

2008年11月29日

便利なツールを使ってHTML&CSSコーディングの速度を上げる

シリーズ目次

Windows XPを使っていると様々な不便を感じます。 その一つ一つは小さな物ですが、一日中PCを使う僕たちからするとかなりのストレスとなってしまいます。
そんな時はツールを使って解決すると良いです。

注意:紹介しているツールは全てWindows用です。

CLCL

かなり有名なクリップボード拡張ツールです。 「もう使ってるよ!」という人が多いと思います。

通常、Ctrl+Cなどでコピーしておける内容は一つのみです。 もう一度Ctrl+Cをすると、内容が上書きされてしまいますよね。 CLCLを使えば、その履歴を辿って呼び出す事ができます。

Alt-Tab Extender"Joe"

このツールは超オススメです。 レジストリは使っていないので、一度試してみてください。
僕は、このツールが無いとWin XPを使う気にならない程に依存しています。

マークアッパーはウィンドウが増えがちです。 エディタにはじまり、メーラー、IRC、IM、ファイラー、画像ビューワ、ブラウザ、ブラウザ、ブラウザ、ブラウザ、ブラウザ…。
しかも、これらを頻繁に切り替える必要があるのです。 そんな時に超便利なのが、このJoeです。

Joeを使えば、Alt+Tabを押した際にアイコンだけでなくタイトルも表示してくれます。 しかもマウスクリックで決定する事ができます(XPデフォルトの動作ではキャンセルされてしまいます)。

ぴたすちお

これまた有名ツールです。 様々な便利機能が詰め込まれていて、かゆい所に手が届きます。
ウィンドウを画面端にスナップさせる機能と、マウスホイール関連、キーボード関連などの機能を愛用しています。

出ておいで

マルチモニタ環境でいると、たまにウィンドウが画面外から戻せなくなってしまう事があります。 そんな時にこの『出ておいで』を使うと、強制的に画面内に戻す事ができます。

ファイルブラウザ・X-Finder

OS純正のファイラ(ファイルやフォルダのアイコンが並んでる、あのウィンドウです)を使っている人は、意外といるのではないでしょうか。 そんな人は、今すぐにその他のファイラに乗り換えるべきです。

僕が最近使っているファイラはX-Finderですが、結構頻繁にあれこれ乗り換えています。 なかなか好みの物が見つからないんですよね。
X-Finderはタブ表示、ウィンドウ分割、TortoiseSVNのアイコン表示、と機能面は良いんですが、ちょっと不安定なのが気になります。

通り抜けループ

デスクトップのアイコンをクリックしたい時に、何枚ものウィンドウを移動・最小化するのは面倒ですよね。 この通り抜けループを使えば、それらのウィンドウをまとめてペロリとめくる事ができます。

よく、「Win+Dでいいじゃん」と言われるのですが、ウィンドウ数が10を超えていたりPhotoshopのような重いソフトを起動してると、ちょっと抵抗あるんですよね。 Winキーレスのキーボードを使っているというのもありますが。

IrfanView 日本語版

PSDの画像を、見るだけのためにPhotoshopを起動するのはちょっと面倒です。 そんな時に使える画像ビューワがIrfan Viewです。
軽くて様々な画像形式に対応しているので、オプションでまとめて関連付けしてしまうと便利です。

Real VNC

「Windows PCがメインの作業環境で、Macは確認用にたまに使う。 ただMacは少し離れた机にある」なんて場合に便利です。 VNCを使えば、Win PCからMacを操作する事ができます。

VNCに関しては以前に書いた記事、Web制作をちょっと快適にしてくれるツール達 | Blog hamashun.comを参照してください。

2008年12月06日

エディタを使いこなしてHTML&CSSコーディングの速度を上げる

シリーズ目次

エディタをそのまま使っていませんか?

コーダー・マークアッパーの人たちは基本的にコードを書く事が仕事なので、IDEや各種エディタを使っていると思います。 それらの多くは設定可能な項目を持っていて、自分好みにカスタマイズする事ができます。
今回は参考までに、僕が設定している項目をご紹介します。

ショートカットキーを設定する

HTMLを書くのって、実は結構面倒です。 閉じタグとか超面倒ですし、そもそも"<"とか">"のたびに毎回Shiftキーを押すのが面倒です。 あーめんどくさいめんどくさい。




ショートカットキーを設定できるエディタなら、この問題を解決できます。 例えば僕は、Ctrl+Alt+PでP要素の開始タグ~閉じタグを出して、更にカーソルを開始タグと閉じタグの間に移動する設定をしています。
テキストを選択状態にして同じキーを叩くと、挟み込んだ状態にもしてくれます。 これは、『最初にテキスト素材を貼り付けて後からマークアップする』、なんて時に重宝します。




CSSでは、Ctlr+[で、{\n\t|\n}という設定をしています。
これは、『"{"の後に改行を入れて、タブを入れて改行、"}"を入れて、カーソルはタブの次に移動』という設定です。

他にも、Ctlr+;で『": ;"』が出るように設定しています。

ここまで読んだ方はお気づきかもしれませんが、設定しているショートカットキーには特徴があります。 基本的に、開始と終了が対になっている物はショートカットキー一発で出るようにしているんですね。
こうすれば、キーボードを叩く回数も減りますし、ホームポジションから手を離す頻度も下げることができます。

表示項目や表示色を変更する

白背景・黒文字・メニューでまくり


黒背景・白文字・メニュー最小限

同じエディタのビフォーアフター

色設定は黒背景に白文字が好みです。 これは好みなので、オススメの色っていうよりは好きな色にすると良いと思います。 あ、でも、暗めの色の方が目は疲れないような気はします。

メニューバーの表示は最小限にしています。
サイドバーや上部メニューは使わないので、スペースを稼ぐために非表示にしています。

オマケ(WinXP環境で確認しています)

コントロールパネル→キーボード で、『表示までの待ち時間』を短く、『表示の間隔』を速くすると、矢印キーでのカーソル移動が快適になります。 地味なんだけどストレスがかなり減るのでオススメです。

2008年12月07日

AutoHotkeyでHTML&CSSコーディングの速度を上げる

シリーズ目次

ちょっとした工夫で作業スピードを上げるシリーズの最後は、AutoHotkeyです。
マークアッパーでAutoHotkeyを使っている人はこれまでに見た事が無いのですが、コーディングがかなり快適になるので試してみると良いと思います。

AutoHotkeyとは、ホットキーへの機能の割り当てなど常駐ソフトの作成に特化したスクリプトエンジンautohotkeyとは - はてなキーワードより引用)です。

エディタからブラウザを遠隔更新するAHK

元ネタはmalaさんの最速インターフェース研究会 :: AutoHotkeyを使ってFirefoxをリロードするだけのexeファイルを作ってみたです。 使っているスクリプトもほぼ同じものですが、IE7用も使っています。

これをエディタの外部アプリケーション呼び出し機能に設定しているので、Ctrl+S → Ctrl+Dという動作で、保存 → Firefoxリロードがエディタから行えます。 一々FirefoxをアクティブにしてF5、とかやらずに済むのでとても便利です。

ただ、このスクリプトの効果を100%発揮するには、デュアル以上のディスプレイ環境が必要です。

キーボードショートカットを追加するAHK



CSSを書く時に、セミコロンを忘れないように先に書いておく書き方をする人は多いと思います。
でもそうすると、値を書く時に一つ左へカーソルを移して、書き終わった時に一つ右へカーソルを移さないといけないんですよね。



HTMLでも同じ事が言えます。 こんな時はどうしていますか? マウスでクリック? 矢印キーで移動? それともENDキーでしょうか。

どれも面倒

ぶっちゃけ、上記の3つの方法は全てキーボードのホームポジションから手を離さないといけないので、すごくすごく面倒です。 少しならいいんですが、CSSなんか一行ごとにその作業が発生するのでイライラしますね。
この問題を、AutoHotkeyで解決してみます。

矢印キーとHOME・ENDキーをホームポジションのままで使うAutoHotkeyスクリプト
$^h::
Send, {left}
return

$^j::
Send, {down}
return

$^k::
Send, {up}
return

$^l::
Send, {right}
return


$^+h::
Send, {Home}
return

$^+l::
Send, {End}
return

同じ種類の記述が続くからもうちょっと省略できるんじゃないかな、と思いつつもとりあえず動いているので妥協><

exeファイルのダウンロードを用意しました。 exeなのが心配な人は、AutoHotkey 公式サイトからエンジンをDLして上記コードをコピペして自作してください。
矢印キーとHOME・ENDキーをホームポジションのままで使うAutoHotkeyスクリプト のダウンロード(exeファイル)

解説

Ctrl+HJKLで、矢印キーになります。 Shift+Ctrl+HLで、HOME・ENDキーになります。
ブラウザにF5を送るAHKとは違い、これは起動しっぱなしで使うタイプです。

起動すると、全てのアプリケーションに適用されます。 設定を書き加えれば、エディタのみに効かせる事もできると思います。
「ブラウザの検索窓にフォーカスできないよ!」という人は、Ctrl+Eを試してみると良いと思います。

オマケ:キーボードのCtrlとCaps Lockを入れ替えておくと更に便利

ベクター辺りに色々あるので入れ替えると小指が攣らずに済みます。

参考リンク

AutoHotkeyを流行らせるページ


Blog Search
Search
Recent Entry
Category
Monthly Archive