あなたの制作人生を「速記コーディング」で豊かにする、Texterを使ったアウトプット術

In: Lifehack

28 10月 2009

texter_main1

人生で、何万回も同じ操作で同じ文字を打つ必要はありますか？

よく使う日本語・同じようなコードを、何万回も同じ操作で打つ必要ってあるのかな。
頭ではコードが組み終わっているのに、それを全てキーボードで打つなんて無駄な気がする。
思考した事がそのままアウトプットできれば生産性はもっと高まるはず。
コードを打っているとき、自分はいつもそう感じていた。

Texterというソフトに出会ってから日常が少し変わった。
キーを打ったことを忘れて、 頭の中で浮かんだことがそのまま目の前に現れるような感覚、
まるで、「速記」を自動展開しているような心地良さを味わえた。

書くのが遅くなったけど、
今回はSACSS vol.5のライトニングトークでお話しさせて貰った「Texter」を紹介。
このTexterを使うようになってから、打つことが革命的に早く・楽しくなった！
効率化を追求している人にはお勧めのツール。

Texterって何ができるの？

Texterを一言で説明すると「英語圏の辞書登録ソフト」。
設定したトリガー、例えば[yrq]を入力した瞬間に、

yrq → 宜しくお願いいたします。
maq → margin: |カーソルキー|0px 0px 0px 0px;

上のように、トリガーを登録した単語に瞬時に置換してくれる。
しかも置換後のカーソルの位置が指定できる。
実際に下の動画を見て貰うと分かりやすいと思う。

Lifehacker Code: Texter (Windows) – Clips – Lifehacker

Windowsの辞書登録とはココが違う

これだけ見ると、IMEの単語登録と変わらないと思う人もいると思う。
一般的な単語登録とTexterとの違いをまとめてみた。

  • 改行やTab、カーソルキー・修飾キー(Shift,Ctrl,Altなど)を含めて登録できる。
  • 複数行入力が可能。
  • 変換後のカーソルキーの位置を自由に設定可能。
  • ローマ字をトリガーにして登録可能 = 変換キーを押さずに置換可能。
  • インストール不要のexeファイルなので、Dropboxなどのオンラインストレージに入れれば、
    自宅や職場のPCなどで、同じ環境で使用可能！
  • Dreamweaver以外のテキストエディタやブラウザ上など、
    「文章を打てる全てのスペース」で快適にアウトプットができるようになる。

作者はLife Hacker

Texterの作者は、ライフハックで有名なLife Hackerの本家、英語版。
MACで使われていた単語登録ソフト、「Text Expander」に影響を受けて、
Windows版を目指して作ったらしい。
さすがLife Hacker、人生をハックしてくれる！

Texterのダウンロード(日本語化済み)

前置きが長くなったけど、早速Texterのダウンロードと使い方。
GNUライセンスなので少し改造して公開。

  • 日本語化してみた。
  • 日本語を表示出来るよう、最初から「Compatibility mode」を「Clipboard mode」に変更。
  • 使いやすいようにサンプルコードを仕込んでみた。

Life Hackerの公開ソースには、右クリックでhotstringを変更する際にバグがあったため、
Exe2Ahkを使用し、実行ファイルを逆コンパイル、
includes/GUI/management_GUI.ahkの31～39行目に関数[EDITNAME]を追加。

まずはTexterをダウンロード。

Texterのダウンロード 日本語化済み・例文登録済み

ソース
オリジナル版(Life Hacker – Texter)

Dreamweaverで上書き保存した瞬間に、Firefoxを自動でリロードさせる、強力なコーディング高速化スクリプト

In: AutoHotKeyを学ぶ

27 7月 2009

AutoHotKeyを使ったスクリプト

先週土曜日のSaCSS vol.4 コーディング勉強会のライトニングトークでお話した、
AutoHotKeyのスクリプトを作ったので、取り急ぎ公開。

何が出来るの？

Dreamweaverで「Ctrl + s」を押して上書き保存された瞬間に、
バックグラウンドのFirefoxに「F5」を送って自動でブラウザをリロードさせるスクリプト。
htmlやcssを書き換える度にブラウザを更新しなくても良くなるので、
コーディング速度がアップして集中力も途切れなくなるはず！

JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト

In: JavaScriptを学ぶ

29 6月 2009

こんなことありませんか？

フォームを作っていて、項目が多くなり過ぎてユーザーがストレスを感じそうな時。
そんな時、押した項目によってその後の内容を変化させれば
項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはず。
JavaScriptはかなりの初心者なので忘れないようメモしてみた。

【サンプル】例えばお申し込みフォームで…

・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。
・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。

利用方法
紹介者
紹介された方のお名前を入力してください。
会員番号
会員番号を入力してください。
特典:初めての方は30%オフ！

jQueryを使ったタブメニューの実装サンプルまとめ

In: jQueryを学ぶ

10 5月 2009
img_67931

仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。
それぞれの挙動も比較しやすいように並べてみた。

今日が勉強初投稿の日！
photo:新川通り

まずはファイルの用意

下記リンクからダウンロード。
・jQuery本体…Past Releases内→最新バージョンのMinified
・ui.core.js/ui.tabs.js/ui.tabs.css一式(ui.tab.zip)　(Mirror)

head内にリンクを張る

ダウンロードしたファイルに対して、head内にリンクを張る

<head>
<!-- jQuery -->
	<script type="text/javascript" src="/jquery-1.####.min.js"></script>

<!-- ui tabs.js -->
	<script type="text/javascript" src="/ui.core.js"></script>
	<script type="text/javascript" src="/ui.tabs.js"></script>
	<link href="/ui.tabs.css" rel="stylesheet" type="text/css" />

</head>

さっそく使ってみる

本文にhtmlを追加。

<div id="ui-tab">
	<ul>
		<li><a href="#fragment-1"><span>タブ1</span></a></li>
		<li><a href="#fragment-2"><span>タブ2</span></a></li>
		<li><a href="#fragment-3"><span>タブ3</span></a></li>
	</ul>
	
	<div id="fragment-1">
		<p>タブ1の内容</p>
	</div>
	
	<div id="fragment-2">
		<p>タブ2の内容</p>
	</div>
	
	<div id="fragment-3">
		<p>タブ3の内容</p>
	</div>

</div>

下記scriptをheadかbodyどちらかに追加。

デフォルト

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs();
	});
</script>

タブ1の内容

タブ2の内容

タブ3の内容

フェードアウト/フェードイン エフェクト

opacity: ‘toggle’, duration: ‘normal’

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal'  } });
	});
</script>

タブ1の内容

タブ2の内容

タブ3の内容

アウトプット生活スタート！

In: 日記

5 5月 2009
img_6768

始めましてRINです いろいろ思うところがあって勉強ブログ始めました！
これからは日々の勉強をアウトプットしていきたいと思います。

写真は新川通を車で走っていたら出会った風景。
余りの綺麗さに車を止めて近づくと、視界全体を覆う白く薄いピンクの風景！

この桜の様に、清くフレッシュな気持ちと謙虚さ大切に
勉強をしていきたいと思います。

Profile

Name:RIN
Age:25
性別:男
Location:Sapporo
Job:Webデザイナー

札幌のWebデザイナーです。
Web Design/PHP/CSS/写真をメインに
勉強した事、思った事を書いていきます。

思い立ったがfollow me!
Twitter:rin316

mixi:3542288

Photostream

Categories

Archives

Copyright © 2007 - 5am! Web Illusions - is proudly powered by WordPress | ログイン

Compositio Theme is created by: Design Disease brought to you by PremiumThemes.com