Blog

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

2008年12月Archives

2008年12月02日

マークアッパー的な人達などが集まって飲んだ会が忘年会だったらしい。

あちらこちらで報告エントリが上がってますが、マークアッパー的な人達などが集まった忘年会(忘年会だったのか!)に行ってきました。

メンバー(リンク先は報告エントリorトップページ)

雑感

「arataさんが出張で東京に来るので飲みませんか」というお誘いをTakazudoさんから頂いたのがきっかけだったんですが、気づいたらすげー豪華なメンバーに。
一番の衝撃は、「コリスに中の人は存在したんだ…!」というところなのは異論の無い所なのではござりませぬか。

話題をざっくりと

  • この店眺めいいね
  • このお通しおいしい
  • 不景気でどこも大変だよねえ
  • zoomってどうなん
  • 肉巻きネギうまー
  • Firefoxの印刷(ry
  • みんなウーロン茶頼みすぎw
  • 共通して使うパーツをモジュール化
  • IE8はかなり良いらしい
  • 会社の人数とコーダーの人数って?
  • 実際の業務ではどうなん
  • ワイヤーフレームってどの人が作ってる? ディレクター?
  • 霜降り牛うまいw
  • MTとWPについて
  • IAって何勉強したらいいんだろ?
  • ししとうコゲてるw
  • HTMLとCSSで、異なる文字コードってどうなん
  • キーボードはこだわる派とこだわらない派にわかれる
  • hamashun.FC2を購読しているとはさすが小山田さん
  • 魚もコゲてるwww
  • IKEA港北は駅から遠いけど、船橋は徒歩3分
  • 雑炊ハムッ、ハフハフッ
  • sugamo.css
  • エディタは要素名と属性は色分けしてくれた方がいいよねー
  • デザートまろやか
  • hamashunは新宿駅に弱すぎだろ

食べ物は全体的においしかったです。 話題はオフレコ話をポロリしたり、タイプの違う会社に興味津々だったりと、とても有意義でした。
次回は…新年会ですか?w

再び、マークアッパー的な人が集まるIRC(チャット)のお知らせ

どんなチャンネル?

HTMLとCSSが仕事だったり趣味だったりする人やそれ以外の人が、相談したり雑談したり恋の悩みを打ち明けたり飲み会の約束をしたりするチャンネルです(たぶん)。

IRC経験者向けの情報

サーバ
freenode
チャンネル
#markupper
文字コード
UTF-8

IRC未経験者向けの情報

  1. LimeChatからクライアント(ソフト)をDLする
  2. インストールする(ウィザードはとりあえず無視してOK)
  3. 起動したら、上部のメニューから『サーバ→サーバを追加』を選択
  4. 設定名
    freenode
    ホスト名
    irc.freenode.net (freenode)
    (フォームから選択可能)
    ポート番号
    6667
    ニックネーム
    任意
    ログイン名
    任意
    名前
    任意
    文字コード
    UTF-8
  5. 『チャンネル』タブを選択
  6. 『新規』ボタンを選択
  7. チャンネル名
    #markupper
  8. 設定が完了したら右下のペインにfreenodeが追加されているので、『右クリック→接続』を選択
  9. 接続できたら、#markupperを『右クリック→入る』

  10. 右上のペインに名前がズラズラッと出てくれば成功

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