5am! Web Illusions http://5am.jp 札幌でWebデザイナーをやっているRINの勉強ブログ。Web Design/PHP/CSS/写真メイン Sat, 14 Nov 2009 19:52:49 +0000 http://wordpress.org/?v=2.8.6 ja hourly 1 あなたの制作人生を「速記コーディング」で豊かにする、Texterを使ったアウトプット術 http://5am.jp/lifehack/texter/ http://5am.jp/lifehack/texter/#comments Tue, 27 Oct 2009 18:47:23 +0000 rin316 http://5am.jp/?p=240 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)

Texterの使い方

早速使ってみる。
日本語化Texterをダウンロードした人は、テキストエディタで

yrq

と打ってみよう！
[diq][ulq][dlq][imq][taq][h11][12q][scjq][$q][ [q ][phq][ifq]とか色々設定してみた。
入力した瞬間に文字が置換されて、カーソルが設定箇所に来ているはず。

自分は初めてTexterを使って置換された時、すごい感動した！
永年続くであろうキーボード入力の呪縛から開放されたような気分。

Texterの初期設定(オリジナル版のみ必要)

texter_1

Texter日本語化版は初期設定は一切不要！
オリジナル版は、そのままだと日本語が文字化けしてしまうので下記の変更が必要。

「Compatibility mode (default)」を
「Clipboard mode (Faster,but less compatible)」に変更。

その他の項目は、全てチェックを外してしまってOK。

  • Run Texter at start up
    OS起動時にTexterを起動。
  • Check for updates at launch?
    Texter起動時にアップデートを確認する。
  • Enable Universal Spelling AutoCorrect?
    最初からセットされている英単語をオートコレクトする。
    (英単語が何万語かセットされている)
  • Play sound when replacement triggered?
    置換された瞬間に音を出す。
  • Make Texter compatible across computers with Synergy?
    Synergy(macとwindowsでキーボードを共有するソフト)を使用時に
    不具合がある場合はチェック。

単語登録の方法

単語登録するときはショートカット[Ctrl+Shift+H]を押すか、
Texterアイコンを右クリックして「Create new hotstring」を選択。

texter_2

  • Hotstring
    変換のトリガーとなるキーを設定。
  • Text/Script
    簡易テキストモードか、より高度なスクリプトモードを選ぶ。詳しくは後述。
  • Bundle
    キーのセットをまとめてタブ化、タブごとに有効/無効を簡単に切り替えられる。
  • Enter your replacement text here…
    ここに変換したいテキストを入力。
  • Trigger
    Hotstringで指定したキーの後に、どのキーを押すと変換が発動するかを選べる。
    「Instant」を選べば、キーが入力された瞬間に変換されるのでオススメ。

「Text」モードと「Script」モードの違い

「Text」モードと「Script」モードはそれぞれ挙動が違う。
登録文によって使い分けることで幸せになれる。

簡易Textモード

「Text」を選んだ場合はクリップボード経由で貼り付けされるので、

  • 変換後の文に日本語を扱える。
  • [%|]を入れると、置換後その場所にカーソルが合う。

    <div>%|</div>

  • [%clipboard]を入れると、クリップボードの内容が、そこに貼付けされた状態で置換される。

    <a href=”%clipboard”>%|</a>

  • 他にも時刻の挿入が出来る。

    [%ds] → 3/9/2007
    [%dl] → Friday, March 09, 2007.
    [%t] → 1:30 PM.

  • Dreamwerverなどの予測変換(コードヒント)とバッティングしない。
  • ただの「貼り付け」なので複数行のインデントは保てない。
  • クリップボードの履歴管理ソフトを使っている場合は、
    履歴が「元の文 → 置換文 → 元の文」となって汚れる。

例文だと、[yrq]は日本語を含むのでTextで登録している。
下はTextモードのデモンストレーション。

Lifehacker Code: Texter (Windows) – Clips – Lifehacker

より高度なScriptモード

「Script」モードを選んだ場合はキーボードタイピングがエミュレートされる。
Textモードより高度な設定が可能。

  • 日本語が文字化けするので指定不可。
  • 下記カーソルキー、Home・Endキーなどの動きを登録可能、
    改行時もインデントを保って、柔軟でアクロバティックな登録が可能。

    {up}{left}{down}{right}{home}{end}{bs}{tab}

    改行を入れる場合は、
    「</タグ>{up}{end}{tab}」を活用。(※エディタのオートインデントがONの状態前提)

    <div>

    </div>{up}{end}{tab}

  • 修飾キーも含めて、どこまでも細かい設定が可能。

    ^ = Control
    ! = Alt
    # = Win
    + = Shift
    ^c = コピー
    ^v = 貼り付け
    ^s!{f4} = 保存してから終了

  • Dreamwerverの閉じタグ自動補完とバッティングするので、登録に工夫が必要。

例文だと、[yrq]以外は全てScriptで登録している。
下はScriptモードのデモンストレーション。

Lifehacker Code: Texter (Windows) – Clips – Lifehacker

おすすめ単語登録リスト

登録して、凄く便利に感じた個人的なおすすめ登録。
今回配布のTexterには下のリストの何倍も入れている。

おすすめ！

PHPとjQuery書くときの気持ち良さが130%増しに！

  • [q

    {
    　　|カーソル|
    }

  • 22q

    "|カーソル|";

  • $q

    $("|カーソル|").();

  • ifq

    if (|カーソル|){

    }

  • elq

    else {
    　　|カーソル|
    }

  • osq

    いつもお世話になっております。
    ■の■です。

コーディングだと…

Dreamweaverコードヒントのほぼ全てを代替して使っている。

  • maq

    margin: |カーソル|0px 0px 0px 0px;

  • paq

    padding: |カーソル|0px 0px 0px 0px;

  • boq

    border: 1px solid #|カーソル|;

  • baq

    background: url(img/|カーソル|) no-repeat 0px 0px;

  • wiq

    width: |カーソル|px;

  • heq

    height: |カーソル|px;

CSSハック

CSSハックは、できるだけ知識として覚えたくないので、Texterに覚えて貰うようにしている。

  • 10q ～ 26q (YUI2:Fonts CSSで相対指定)

    font-size: 77%; ～ font-size: 197%;

  • ieq

    /*--IE7 hack--*/
    *:first-child+html |ペースト| {

    }
    /*--IE6 hack--*/
    * html |ペースト| {
    　　|カーソル|
    }

  • leq

    float: left;
    display: inline;

  • riq

    float: right;
    display: inline;

  • minhq

    min-height: |カーソル|px;
    /* IE6 fix */
    height: auto !important;
    height: px;

  • minwq

    min-width: |カーソル|px;
    /* IE6 fix */
    width: auto !important;
    width: px;

  • ie8q

    /* IE8 fix */
    head~/* */body |ペースト| {
    　　|カーソル|
    }

  • hoq (IE6でもa要素以外で:hover擬似クラスを使うcsshover3.htc)

    <style type="text/css">
    <!-- body { behavior: url ("common/js/csshover3.htc"); } -->
    </style>

Texterのトラブルシューティング

Texter使用時に起きた問題の対処法をまとめてみた。

「Script」モードで閉じタグ自動補完とのバッティングを避けるには

Dreamwerverや他のテキストエディタなどで、
「</」や「>」を入れると閉じタグを自動補完するように使っている場合は、
素直に登録すると「<div></div></div>」と二重になってしまう。
それを避ける方法として、

  • 【開始タグ】 閉じタグを打って左に移動し、そこからタグの中身を書く。「>{left}<■■■{right}」

    >{left}<div{right}

  • 【終了タグ】 「/」の後に左、「<」、右、そして中身を書く。「/{left}<{right}■■■」

    /{left}<{right}div>

日本語入力ONの状態で置換されるときに、文字が多く消されてしまう。

例えば[yoroq]を[宜しく]に変換しようとすると、
IME ONの状態だと[よろｑ]となり3文字だが、
Texterの認識は[yoroq]で5文字となるため、置換時に2文字多く消されてしまう。

解決策としては、[yrq]のように母音を含まないトリガーで登録する。
もしくはトリガーの最初の一文字入力時に、Shiftキーを押すようにすれば、
IME ONの状態でも[Yoroq]と5文字になるので問題なく使える。

TexterとAutoHotKeyを同時に起動していると動作がおかしい

先にTexterを起動させてからAutoHotKeyのスクリプトを実行すればOK。
スタートアップに起動の順番を登録したい人は、テキストエディタで下記スクリプトを入力、
フォルダ階層を合わせた後、拡張子を[.txt]から[.vbs]に変えて起動時に実行させればOK!

Dim WshShell
Set WshShell = Wscript.CreateObject(”Wscript.Shell”)
WshShell.Run(”■\texter\texter.exe”)

WScript.Sleep 4000
WshShell.Run(”■\autohotkey\autohotkey.ahk”)

やっぱり登場、AutoHotKey

プログラム自体はAutoHotKeyベースで作られていて、
Hot Strings関数を利用、GUIでリスト表示するように出来ている。
ahkファイルも公開されているので、自分でカスタマイズも可能。

Texterを使わず、直接AutoHotKeyでスクリプトを書けば、
キー間のタイミング、キー押下時間、正規表現やソフトの制御などで、
想像を超える変態的なHackが可能！
日本語圏でもAutoHotKeyのユーザーが増えて、
打つ事の世界観が変わるライフハックが増えると嬉しいな～と思う。

時間の短縮以上のメリット

辞書登録と聞くと、時間短縮が一番のメリットのように映るけど、
自分が感じる本質的なメリットは、
「集中力が途切れない」点にあると思う。

集中力が途切れる瞬間を考えてみると、

  • 定型文をコピペの為に、エディタから他のウィンドウに移った瞬間。これは致命的。
  • 遠くのキーを押すために、ホームポジションから手を離した瞬間。
  • 左カーソルキーを何度も押して「戻る」動作をしている時。
  • インデントの整形の為にEnter・Tab・カーソルキーを駆使している時。

上の操作を行った瞬間、キーボードを打っている自分に気がついて、
「ディスプレイの内面世界」から「外の現実世界」に引き戻され、集中力が途切れると感じた。

例えばループさせる時。
自分が打ちたいのはあくまでも、

for ($i = 0; $i <= ■ここ■; $i++){
　　■ここ■
}

だけなのに、最初に枠組みを書いてから戻る打ち方をすると、

1. for($i = 0; $i <= ■; $i++){
2. Enterを2回
3. }を入力
4. 手をホームポジションからカーソルキーに移動、↑キー
5. Tabを押してインデント。

ここでやっと書きたかった場所まで到達。
Texterを使えば、魔法の一言”forq”の直後に整形完了。
記号まで自分で打つ必要性は、もうとてもじゃないけど理解できない。

毎日積み重なっていくモノの力は凄い

ちょうど一年くらい前、インターンで今の制作会社に入った時に、
どうすれば、出来ない仕事の生産性を上げられるんだろうってずっと考えてた。
スキルは足りない、コードが頭からぱっと出てこない、スペルミスは多い。
そんな時に、このエントリーに出会った。

剣道の達人は剣が身体の一部になっています。
まるで、剣の先にまで神経が生えているように、剣で感じ、剣を操ります。
もはや、道具を使っているという意識はなく、剣も含めて身体意識が形成されているのです。

思考の速度でパソコンを使う技術 – 分裂勘違い君劇場

PCを、意識せず自分の体の一部として認識、洗練させていく行為が
言語スキルを磨くのと同じ様に生産性を強く高める！と思い、主体的にハックを考える様になった。
実際仕事のスピードが飛躍的に高まったので、
人生を共にする仕事道具への接し方って大事だなと～実感した。

コードを書く仕組みを変える事は、自分へのメリットはもちろん、
ノウハウが共有されればweb全体の生産性も上がって素晴らしい世界に！

とか言う崇高な気持ちは無いんだけど
世界観が変わるようなライフハックを実践している人とか、
変態キーバインドでニヤニヤしている人になかなか出会えないので、
少しでもそんな人が増殖すれば良いなと思って書いてみた。

小さな事かも知れないけど、毎日積み重なっていくモノの力は凄い。
Texterを通した入力から得られる、「ストレスのない速記」の世界は
きっと制作人生を、時間単価の面でも、打つ楽しさの面でも豊かにしてくれる！

今回は誰でも簡単に導入できるTexterの紹介。
これからは、もっと根本的なAutoHotKeyを使ったキーバインドを書いていきたい。

RSS登録をyrq.
Life Hackerに感謝！

]]> http://5am.jp/lifehack/texter/feed/ 20 Dreamweaverで上書き保存した瞬間に、Firefoxを自動でリロードさせる、強力なコーディング高速化スクリプト http://5am.jp/autohotkey/autohotkey_dreamweaver_firefox_auto_reload_pre/ http://5am.jp/autohotkey/autohotkey_dreamweaver_firefox_auto_reload_pre/#comments Mon, 27 Jul 2009 03:31:17 +0000 rin316 http://5am.jp/?p=196 AutoHotKeyを使ったスクリプト

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

何が出来るの？

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

ダウンロードと使い方

【スクリプトのダウンロード】

zipを解凍した中に、起動するだけで使えるexeファイルがあるので実行。
セキュリティ不安な人は、
AutoHotkey公式サイトのDownloadページから「AutoHotkey Installer」でインストール。
その後、テキストファイルを作って下のソースを貼り付け、拡張子をtxtからahkに変えて実行。
zipの中にahkファイルも入れておきました。

ウィルスバスター起動していてうまくキーを乗っ取り出来ない場合は、例外指定するか、
exeファイルを使わず、インストール後ahkファイルを起動でOK。

会社のお昼休みなので詳細は後日！

スクリプトのソース

;FireFoxリロード
SetTitleMatchMode, 2

#IfWinActive, Dreamweaver

^s::
Send, ^s
sleep 700
WinGet, Fx,, Mozilla Firefox
ControlSend,, {F5}, ahk_id %Fx%
return

]]> http://5am.jp/autohotkey/autohotkey_dreamweaver_firefox_auto_reload_pre/feed/ 9 JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト http://5am.jp/javascript/form_change_javascript/ http://5am.jp/javascript/form_change_javascript/#comments Sun, 28 Jun 2009 16:11:10 +0000 rin316 http://5am.jp/?p=165

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

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

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

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

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

サンプルソース(ラジオボタン)

HTML


<form>
<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<th>利用方法</th>
		<td>
			<label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />初めて申し込む</label>
			<label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />2度目以降の利用</label>
		</td>
	</tr>

	<!-- 表示非表示切り替え -->
	<tr id="firstBox">
		<th>紹介者</th>
		<td><input type="text" />
		<p>紹介された方のお名前を入力してください。</p></td>
	</tr>
	
	<!-- 表示非表示切り替え -->
	<tr id="secondBox">
		<th>会員番号</th>
		<td><input type="text" />
		<p>会員番号を入力してください。</p></td>
	</tr>
</table>
</form>


<!-- 表示非表示切り替え -->
<div id="firstNotice">
	特典:初めての方は30%オフ！
</div>

JavaScript

<script type="text/javascript">
	function entryChange1(){
		radio = document.getElementsByName('entryPlan') 
		if(radio[0].checked) {
			//フォーム
			document.getElementById('firstBox').style.display = "";
			document.getElementById('secondBox').style.display = "none";
			//特典
			document.getElementById('firstNotice').style.display = "";
		}else if(radio[1].checked) {
			//フォーム
			document.getElementById('firstBox').style.display = "none";
			document.getElementById('secondBox').style.display = "";
			//特典
			document.getElementById('firstNotice').style.display = "none";
		}
	}
	
	//オンロードさせ、リロード時に選択を保持
	window.onload = entryChange1;
</script>

HTML側の説明

inputに「onclick=”関数名() 」を追加する。

<input type="radio" name="entryPlan" value="firstEntry" onclick="entryChange1(); />

JavaScript側の説明

最初にfunctionで関数名【entryChange1】を作る。

function entryChange1(){
　　　　//内容
}

変数【radio】に、フォームのname【entryPlan】が一致するものを代入する。

radio = document.getElementsByName(’entryPlan’)

もし1つ目のラジオボタンがチェックされたら1を実行、もし2つ目なら2を実行。

if(radio[0].checked) {
　　　　//1を実行
}else if(radio[1].checked) {
　　　　//2を実行
}

表示/非表示の切り替えはIDのdisplayを変える。

document.getElementById(’【ID名】’).style.display = “【表示方法】”;

こんな感じで切り替え。

if(radio[0].checked) {
　　　　document.getElementById(’firstBox’).style.display = “”;
}else if(radio[1].checked) {
　　　　document.getElementById(’firstBox’).style.display = “none”;
}

最初「display = “inherit”;」と書いたらIE6でエラーが出て切り替わらなかったので、
「display = “”;」と空白で記載したらうまく動いた。
今回であれば表示される行の所は「display = “table-row”;」
特典の所は「display = “block”;」でもOK

このままだと読み込み時にラジオボタンをクリックするまで両方の行が出てしまうので、
作った関数【entryChange1】をオンロードさせる。
最初「entryChange1()」のように「()」を付けていたら動かなくて困った。。

//オンロードさせ、リロード時に選択を保持
window.onload = entryChange1;

htmlのbodyに記載する方法もある。
ただbodyに入れるとjsとhtmlが分離されず管理が大変になりそう

<body onload="entryChange1()">

サンプルソース(セレクトボックス)

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

HTML


<form>
<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<th>利用方法</th>
		<td>
			<select id="changeSelect" name="hoge" onchange="entryChange2();">
				<option value="select1">初めて申し込む</option>
				<option value="select2">2度目以降の利用</option>
			</select>
		</td>
	</tr>

	<!-- 表示非表示切り替え -->
	<tr id="firstBox2">
		<th>紹介者</th>
		<td><input type="text" />
		<p>紹介された方のお名前を入力してください。</p></td>
	</tr>
	
	<!-- 表示非表示切り替え -->
	<tr id="secondBox2">
		<th>会員番号</th>
		<td><input type="text" />
		<p>会員番号を入力してください。</p></td>
	</tr>
</table>
</form>


<!-- 表示非表示切り替え -->
<div id="firstNotice2">
	特典:初めての方は30%オフ！
</div>

JavaScript

<script type="text/javascript">
	function entryChange2(){
		if(document.getElementById('changeSelect')){
			id = document.getElementById('changeSelect').value;
			
			if(id == 'select1'){
				//フォーム
				document.getElementById('firstBox2').style.display = "";
				document.getElementById('secondBox2').style.display = "none";
				//特典
				document.getElementById('firstNotice2').style.display = "";
			}else if(id == 'select2'){
				//フォーム
				document.getElementById('firstBox2').style.display = "none";
				document.getElementById('secondBox2').style.display = "";
				//特典
				document.getElementById('firstNotice2').style.display = "none";
			}
		}
	}
	
	//オンロードさせ、リロード時に選択を保持
	window.onload = entryChange2;
</script>

HTML側の説明

selectに「id=”changeSelect”」「onchange=”関数名() 」を追加する。

<select id="changeSelect" name="hoge" onchange="entryChange2();">
　　　　<option value="select1">初めて申し込む</option>
　　　　<option value="select2">2度目以降の利用</option>
</select>

JavaScript側の説明

もしIDがchangeSelectだったらこの中を実行

if(document.getElementById(’changeSelect’)){
　　　　//この中を実行
}

changeSelectの中で選んだvalueの値を変数【id】に代入

id = document.getElementById(’changeSelect’).value;

もし変数【id】(valueの値)が同じならこの中を実行

if(id == ’select1′){
　　　　//この中を実行
}else if(id == ’select2′){
　　　　//この中を実行
}

ひとつのページ内で複数のwindow.onloadが動作しない

今回のサンプルのようにひとつのページ内で2箇所以上window.onloadを使おうとしたら
最後のwindow.onload以外は反映されない問題が発生。。
下の例だとentryChange2しかonloadが反映されない。

window.onload = entryChange1;
window.onload = entryChange2;

そこで2つを1つの関数【init】にまとめてonloadしたら上手く反映された！

function init(){
　　　　entryChange1();
　　　　entryChange2();
}
window.onload = init;

ただこれだと、複数のJavaScriptライブラリがあって、
他にwindow.onloadが使われている場合上書きしてしまうので、
正確にはaddEventListener() メソッドとattachEvent()メソッドを使うのがベストみたい。

動的な書き換えって面白い！

普段JavaScriptに触る事が無かったので、
onloadのタイミングだったり、ブラウザによる差異などなど
fixする事が沢山あって難しいな～と感じた。
それにしても動的な書き換えって面白い！！
少しずつ使いこなせるようにがんばろう。
会社のプログラマに色々教えて貰いながらの作業でとても感謝！

]]> http://5am.jp/javascript/form_change_javascript/feed/ 0 jQueryを使ったタブメニューの実装サンプルまとめ http://5am.jp/jquery/jquery_ui_tabs/ http://5am.jp/jquery/jquery_ui_tabs/#comments Sat, 09 May 2009 15:10:46 +0000 rin316 http://5am.jp/?p=46 ul').tabs(); }); タブ1 タブ2 タブ3 タブ1の内容 タブ2の内容 タブ3の内容 フェードアウト/フェードイン エフェクト opacity: ‘toggle’, duration: ‘normal’ $(function() { $('#ui-tab2_normal > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } }); }); タブ1 タブ2 タブ3 タブ1の内容 タブ2の内容 タブ3の内容 opacity: ‘toggle’, duration: ’slow’ $(function() { $('#ui-tab2_slow > ul').tabs({ fx: { opacity: 'toggle', duration: 'slow' } }); }); タブ1 タブ2 タブ3 タブ1の内容 タブ2の内容 タブ3の内容 opacity: ‘toggle’, duration: ‘fast’ $(function() { $('#ui-tab2_fast > ul').tabs({ fx: { opacity: 'toggle', duration: 'fast' } }); }); タブ1 タブ2 タブ3 タブ1の内容 タブ2の内容 タブ3の内容 opacity: ‘toggle’, duration: milliseconds(1/1000秒) $(function() { $('#ui-tab2_milliseconds [...]]]>
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の内容

opacity: ‘toggle’, duration: ’slow’

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

タブ1の内容

タブ2の内容

タブ3の内容

opacity: ‘toggle’, duration: ‘fast’

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

タブ1の内容

タブ2の内容

タブ3の内容

opacity: ‘toggle’, duration: milliseconds(1/1000秒)

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

タブ1の内容

タブ2の内容

タブ3の内容

スライドエフェクト

height: ‘toggle’, duration: ‘normal’

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

タブ1の内容

タブ2の内容

タブ3の内容

height: ‘toggle’, duration: ’slow’

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

タブ1の内容

タブ2の内容

タブ3の内容

height: ‘toggle’, duration: ‘fast’

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

タブ1の内容

タブ2の内容

タブ3の内容

height: ‘toggle’, duration: milliseconds(1/1000秒)

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

タブ1の内容

タブ2の内容

タブ3の内容

フェード+スライドエフェクト

height: ‘toggle’ , opacity: ‘toggle’ , duration: ‘normal’

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

タブ1の内容

タブ2の内容

タブ3の内容

height: ‘toggle’ , opacity: ‘toggle’ , duration: ’slow’

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

タブ1の内容

タブ2の内容

タブ3の内容

height: ‘toggle’ , opacity: ‘toggle’ , duration: ‘fast’

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

タブ1の内容

タブ2の内容

タブ3の内容

height: ‘toggle’ , opacity: ‘toggle’ , duration: milliseconds(1/1000秒)

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

タブ1の内容

タブ2の内容

タブ3の内容

カスタムアニメーション

height: ’show’ , opacity: ’show’ , duration: ‘normal’

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

タブ1の内容

タブ2の内容

タブ3の内容

height: ’show’ , opacity: ’show’ , duration: ’slow’

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

タブ1の内容

タブ2の内容

タブ3の内容

height: ’show’ , opacity: ’show’ , duration: ‘fast’

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

タブ1の内容

タブ2の内容

タブ3の内容

height: ’show’ , opacity: ’show’ , duration: milliseconds(1/1000秒)

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

タブ1の内容

タブ2の内容

タブ3の内容

マウスオーバーで切り替え

event: ‘mouseover’

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

タブ1の内容

タブ2の内容

タブ3の内容

自動切り替え

.tabs(’rotate’, 3000)

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

タブ1の内容

タブ2の内容

タブ3の内容

参考リンク

本家のサイトを見ると他にも色々なイベントがある。
cookie取得したりできるみたい。
・jQuery UI – Demos & Documentation
・jQuery UI Tabs / Tabs 3

]]> http://5am.jp/jquery/jquery_ui_tabs/feed/ 2 アウトプット生活スタート！ http://5am.jp/diary/blog_start/ http://5am.jp/diary/blog_start/#comments Tue, 05 May 2009 03:53:02 +0000 rin316 http://5am.jp/?p=8

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

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

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

]]> http://5am.jp/diary/blog_start/feed/ 2