5am! Web Illusions
札幌でWebデザイナーをやっているRINの勉強ブログ。Web Design/PHP/CSS/写真メイン
あなたの制作人生を「速記コーディング」で豊かにする、Texterを使ったアウトプット術
In: Lifehack
28 10月 2009
何万回も同じ操作で同じ文字を打つ必要はありますか？
よく使う日本語や同じようなコードを、毎回同じように打つのは面倒くさいな…
思考した事がそのままの感覚でアウトプットできれば生産性はもっと高まるはず。
コードを書いている時、いつもそう感じていました。
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との違いをまとめてみました。
AutoHotKeyを使ったスクリプト
先週土曜日のSaCSSコーディング勉強会 vol.4のライトニングトークでお話した、
AutoHotKeyのスクリプトを作ったので、取り急ぎ公開します。
何が出来るの？
Dreamweaverで「Ctrl + s」を押して上書き保存された瞬間に、
バックグラウンドのFirefoxに「F5」を送って自動でブラウザをリロードさせるスクリプトです。
htmlやcssを書き換える度にブラウザを更新しなくても良くなるので、
活用すればコーディング速度がアップして集中力も途切れなくなるはずです。
JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト
In: JavaScriptを学ぶ
29 6月 2009こんなことありませんか？
フォームの項目が多くなり過ぎてしまい、ユーザーがストレスを感じそうと思う時はありませんか？
そんな時、押した項目によってその後の内容を変化させれば
項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはずです。
JavaScriptはかなりの初心者なので忘れないようメモしてみました。
【サンプル】例えばお申し込みフォームで…
・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。
・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。
jQueryを使ったタブメニューの実装サンプルまとめ
In: jQueryを学ぶ
10 5月 2009
仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。
それぞれの挙動も比較しやすいように並べてみました。
今日が勉強初投稿の日！
写真:新川通りで撮った桜。
まずはファイルの用意
下記リンクからダウンロード。
・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>
フェードアウト/フェードイン エフェクト
opacity: ‘toggle’, duration: ‘normal’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } });
});
</script>
アウトプット生活スタート！
In: 日記
5 5月 2009
始めましてRINです
いろいろ思うところがあって勉強ブログ始めました！
これからは日々の勉強をアウトプットしていきたいと思います。
写真は新川通を車で走っていたら出会った風景。
余りの綺麗さに車を止めて近づくと、視界全体を覆う白く薄いピンクの風景！
この桜の様に、清くフレッシュな気持ちと謙虚さ大切に
勉強をしていきたいと思います。
Profile
Name:RIN
Age:27
性別:男
Location:Sapporo
Job:Webデザイナー
札幌のWebデザイナーです。
Web Design/PHP/CSS/写真が
メインの勉強ブログです。
思い立ったがfollow me!
Twitter:rin316
Photostream
Categories
- AutoHotKeyを学ぶ (1)
- JavaScriptを学ぶ (1)
- jQueryを学ぶ (1)
- Lifehack (1)
- 日記 (1)
- 誰でもすぐに実践できる！文章をすばやく書ける7つのテクニック | Basic Design: [...] Texter 毎日毎日、同じ文章を入力する必要がある人に便利なツールで [...]
- タイピングを減らして作業効率化！ | noisecat Blog: [...] 高速で打ち込んだように文字が入るので使いこなすと周りからは魔法 [...]
- Moaijikomi: Ryuichiroさん $(function() { $('#ui-tab > ul').tabs({ selected: 1 }); }); このよう [...]
- Ryuichiro: 大変わかりやすくサンプルがあり助かります。ありがとうございます。 [...]
- タブメニュー追加 | Lord of LIFE: [...] この記事を参考に、タブメニューを導入しました。 必要ファイルは [...]