Hatena::Grouphatena

はてな技術発表会日記 このページをアンテナに追加 RSSフィード

株式会社はてなでは日々、開発者が持ち回りでひとつの技術トピックについて発表を行っており、公開可能なものについては、その内容を音声と動画で公開しています。

2007-08-21

8月17日の技術勉強会 - Flexレイアウト手書き勉強会

13:33 | 8月17日の技術勉強会 - Flexレイアウト手書き勉強会  - はてな技術発表会日記 を含むブックマーク はてなブックマーク - 8月17日の技術勉強会 - Flexレイアウト手書き勉強会  - はてな技術発表会日記

8月17日に行われました技術発表会の内容を撮影した動画ファイル/資料を公開いたしました。内容は以下のとおりです。

テーマFlexレイアウト手書き勉強会
発表d:id:secondlife

勉強会動画

ダウンロード動画

070816secondlife.mp4 filelist

音声

Download filelist

Flex mxml レイアウト手書き勉強会

vim!vim!

Flex Builder でのレイアウト

Flex Builder を使わないレイアウト配置

  • 直接レイアウトを弄った方が楽じゃない?
  • 相対的な指定(%)のほうが綺麗
  • 慣れるまでコツが
  • その Tips を紹介

mxml についておさらい

ソースを見ながら説明

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx               = "http://www.adobe.com/2006/mxml"
  xmlns                  = "*"
  width                  = "100%"
  height                 = "100%"
  paddingLeft            = "0"
  paddingRight           = "0"
  paddingTop             = "0"
  paddingBottom          = "0"
  horizontalScrollPolicy = "off"
  verticalScrollPolicy   = "off"
  backgroundColor        = "#333333"
  backgroundImage        = ""
  layout                 = "absolute"
  frameRate              = "60"
  >
  <mx:Style>
    <![CDATA[
    ]]>
  </mx:Style>
  <mx:VBox
    width="100%"
    height="100%"
    >
    <mx:HBox height="100%" width="100%">
      <mx:TitleWindow width="100%" title="A" height="100%" backgroundColor="0xDDDDDD" />
      <mx:HBox height="100%">
        <mx:Spacer width="30" />
        <mx:VBox height="100%">
          <mx:Spacer height="100%" />
          <mx:Button label="AA" />
          <mx:Spacer height="30" />
          <mx:Button label="BB" />
        </mx:VBox>
        <mx:Spacer width="30" />
      </mx:HBox>
      <mx:TitleWindow width="100%" title="B" height="100%" backgroundColor="0xDDDDDD" />
    </mx:HBox>
    <mx:VBox 
      paddingTop="5" 
      paddingBottom="5" 
      paddingRight="5" 
      paddingLeft="5" 
      width="100%">
      <mx:HBox 
        width="100%">
        <mx:Spacer width="100%" />
        <mx:VBox
          backgroundColor="0x333333"
          > 
          <mx:HBox
            width="100%">
            <mx:Spacer width="100%" />
            <mx:CheckBox label="auto shape size" color="0xDDDDDD" textRollOverColor="0xDDDDDD" textSelectedColor="0xDDDDDD" id="autoPairot" selected="true" />
            <mx:CheckBox label="img" color="0xDDDDDD" textRollOverColor="0xDDDDDD" textSelectedColor="0xDDDDDD" id="layerVisible"  />
            <mx:CheckBox label="animation" color="0xDDDDDD" textRollOverColor="0xDDDDDD" textSelectedColor="0xDDDDDD" id="motion" selected="true" />
            <mx:CheckBox label="stop" color="0xDDDDDD" textRollOverColor="0xDDDDDD" textSelectedColor="0xDDDDDD" id="stopped"  />
          </mx:HBox>

          <mx:HBox 
            width="100%">
            <mx:Spacer width="100%" />
            <mx:ComboBox rowCount="20" id="currentRenderer" />
            <mx:Label text="shape size" color="0xDDDDDD" />
            <mx:NumericStepper id="shapeSize" disabledColor="#000000" value="10" stepSize="1" minimum="3" maximum="50" />
            <mx:Label text="num" color="0xDDDDDD" />
            <mx:NumericStepper id="objectNum" disabledColor="#000000" value="5" stepSize="1" minimum="3" maximum="100" />
            <mx:Button id="saveImg" label="save image"  />
          </mx:HBox>

          <mx:Form 
            paddingTop="0" 
            paddingBottom="0" 
            paddingRight="0" 
            paddingLeft="0" 
            width="100%"
            defaultButton="{submit}">
            <mx:HBox width="100%">
              <mx:Spacer width="100%" />
              <mx:TextInput id="imageUrl" text="" width="350" />
              <mx:Button id="submit" label="load image" />
            </mx:HBox>
          </mx:Form>
        </mx:VBox>
      </mx:HBox> 
    </mx:VBox>
  </mx:VBox>
  <mx:Canvas x="500" y="500" width="100" height="100">
      <mx:TitleWindow width="100%" title="Canvas" height="100%" backgroundColor="0xDDDDDD" />
  </mx:Canvas>
</mx:Application>

レイアウトポイント・その1

最上位のコンテナ以外のコンテナは基本 height/width を100%に

  • コンテナとは、子供を持つことのできるコンポーネント
    • Box/VBox/HBox/TitleWindow/Panel/Canvas など
  • 子は親コンテナのheight/width によってレイアウトが決まる
  • 親のサイズを入れないと、子のサイズによって自動で親のサイズが決まる

レイアウトポイント・その2

VBox(縦)、HBox(横) を使いこなす

  • いわゆる Table ぽいレイアウト
    • VBox だと縦配置
    • HBox だと横配置

これを組み合わせることでほとんどのレイアウトを組める

レイアウトポイント・その3

Spacer

  • いわゆる spacer.gif
  • 超便利
  • width/height を可変させて使う
  • Flex では 100% にすると、親コンテナのサイズによってよしなに調整される

自由なレイアウト

Canvas + layout="absolute" を使うと自由な場所に配置が可能


CSS について

CSS は超複雑。ProgrammaticSkin がからんでくると、どうやって表示されるかは実装を見るまで解らない。

2007-03-24

3月22日の技術勉強会 - ActionScript3 / Flex / Apollo 勉強会

14:21 | 3月22日の技術勉強会 - ActionScript3 / Flex / Apollo 勉強会 - はてな技術発表会日記 を含むブックマーク はてなブックマーク - 3月22日の技術勉強会 - ActionScript3 / Flex / Apollo 勉強会 - はてな技術発表会日記

3月22日に行われました技術発表会の内容を撮影した動画ファイル/資料を公開いたしました。内容は以下のとおりです。

テーマ ActionScript3 / Flex / Apollo 勉強会
発表d:id:secondlife

勉強会動画

filelist

音声

Download filelist

ビデオiPod動画

070322apollo-01.mp4 filelist

070322apollo-02.mp4 filelist

070322apollo-03.mp4 filelist

070322apollo-04.mp4 filelist

070322apollo-05.mp4 filelist

070322apollo-06.mp4 filelist

070322apollo-07.mp4 filelist

ActionScript3 / Flex / Apollo 勉強会

やっぱこれからは Flash Da Yo Ne!(flash厨期)

目的

  • ActionScript3 / Flex / Apollo ってなんなの?

flash 作ったりするやつだよね、というのはなんとなく解るけど、具体的にどんなことができるのか解らない LLer かつ Web アプリケーションエンジニアのための勉強会

歴史

年末

AdobeMozilla Foundation に AVM2 のソースコードを提供

わりと興味なくてスルー

最近

というわけで初めて約一ヶ月、解ったことを整理するというのもかねて勉強会

いまさら Flash を覚えるわけ

使い方を知ってないとアイディアが浮かばない(自分は…)。

でもべつに AS2 でできるよね。

あえて AS3 を覚える理由

AS2 と AS3 は割と違うので、いまから AS2 というのは…。

  • FlashPlayer9 スギョイ
    • AVM2 はえー(最大十倍速)
    • SSE などに特化した関数も(Flash Player8 から?)

SSE (Streaming SIMD Extensions : ストリーミング SIMD 拡張) を提供するプロセッサで実行するときに処理が高速化されるフィルタ仕様もあります。畳み込み操作が高速される基準は次のとおりです。

  • フィルタは 3 × 3 フィルタである必要があります。
  • フィルタ項はすべて -127 ~ +127 の整数である必要があります。
  • すべてのフィルタ項の合計の絶対値は 127 を超えられません。
  • いずれかのフィルタ項が負である場合、除数は 2.00001 ~ 256 である必要があります。
  • フィルタ項がすべて正である場合、除数は 1.1 ~ 256 である必要があります。
  • バイアス整数である必要があります。

でもこれらはわりと AS2 でもがんばればどうにかなるじゃん?

AS2 だとどうがんばっても(たぶん)できないこと

ActionScript3 を書いてみて

初めに・よくある誤解

ActionScript3 と Flex2 の混同

ActionScript3 = Flex2 みたいに、ごちゃ混ぜにしてるのを見る

誤解の元

Flex2 SDK を使うと ActionScript3 を swfコンパイルできる!

  • これは Flex2 SDK の一機能

Flex2 とは

じゃあ Flex2 って?

AdobeR Flex 2は、Adobe FlashRをベースにしたリッチインターネットアプリケーションのためのフレームワークです。Flex 2を利用すれば、あらゆるプラットフォームユーザに対応できる、見ばえの良いスケーラブルなアプリケーションが効率良く開発できます。

http://www.adobe.com/jp/products/flex/

自分たちに嬉しいのは

コンポーネントレイアウトは基本 mxml という xml に書くよ。css も書けるよ。

内部的には

AS3 事始め

ActionScript3 を始めたいけどどうすればいいの?

インストロール(typo
ドキュメント
ローカルに落とそう
覚える順序

本気でやるなら

を最後まで続けると AS3 の基本はだいたい覚えられる。オススメ。下手にオフィシャル以外のドキュメントを読むと混乱しがちだよ。

ここまでの実際の習得コストは 40時間ぐらい?

その他よく参考にする情報

開発環境

Flex2 Builder (高い)を使う場合
  • Eclipce な IDE

Eclipce や統合開発環境スキー使ってください。裏側で自動コンパイルがうらやましかった(過去形)。

Flex2 Builder を使わない場合

俺たちゃオールタイプ

mxmlc でのコマンドラインコンパイル
$ mxmlc Example.as

大きな問題点

fcsh を使おう

コンパイル時にメモリ展開しておくことで、二回目からのコンパイルちょっぱやに。便利!

しかしそれでも

swf ができあがるまでに手動ですること

めんどい

そんなときの fcwrap

fcsh wrapper の fcwrap を使うと

インストール方法

svn co svn://rubyforge.org/var/svn/hotchpotch/fcwrap fcwrap
cd fcwrap
rake install_gem

Linux/OSX なら動くよ。win はこの方法だとうまく入らないらしい。

より詳しく(?)は Shibuya.es で。

debug

log.as を使うと、Object#inspect みたいにでき、かつ console.log に出力できて便利!

http://subtech.g.hatena.ne.jp/secondlife/20070219/1171872801

サーバサイドとの連携

連携方法いろいろ

get/post

普通の方法

Socket/XMLSocket

コネクションつなぎっぱであれこれ。

comet っぽいことも簡単に。

AMF0/3

Action Message Format

RemoteObject (Flex Data Service)

AS からリモートオブジェクトを叩けるよ。

Rails での実装もあるよ。

これで ruby 側のインスタンスのメソッドが簡単に呼び出せる!ベンリング!!!

例: 絵を描いてサーバサイドに保存

Paint.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" initialize="init()" backgroundColor="#ffffff">
  <mx:Script source="main.as" />
    <mx:VBox width="60%" horizontalAlign="center">
      <mx:Panel id="mainPanel" title="Paint" styleName="mainPanel" width="100%">
        <mx:Box width="100%" horizontalAlign="center" paddingTop="15">
            <mx:UIComponent width="300" height="300" id="canvas"/>
        </mx:Box>
        <mx:Form width="100%">
            <mx:Box width="100%" horizontalAlign="center">
              <mx:HBox>
                <mx:Label text="Pen Size"/>
                <mx:HSlider minimum="0" maximum="100" id="lineWidth" width="100" value="5" />
              </mx:HBox>
              <mx:HBox>
                <mx:Label text="Alpha"/>
                <mx:HSlider minimum="0" maximum="1" id="lineAlpha" width="100" value="1" />
              </mx:HBox>
              <mx:HBox>
                <mx:ColorPicker id="lineColor" />
              </mx:HBox>
              <mx:HBox>
                <mx:Button id="save" click="saveImage();" label="save" />
              </mx:HBox>
            </mx:Box>
        </mx:Form>
      </mx:Panel>
    </mx:VBox>
</mx:Application>
import flash.events.*;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import mx.rpc.remoting.RemoteObject;
import mx.rpc.events.ResultEvent;
import com.adobe.images.PNGEncoder;

private var _click:Boolean = false;

private function init():void {
    canvas.parent.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
    canvas.parent.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
    canvas.parent.addEventListener(MouseEvent.MOUSE_UP, upHandler);
}

private function moveHandler(e:MouseEvent):void {
    if(_click) {
        var p:Point = new Point(e.stageX, e.stageY);
        p = canvas.globalToLocal(p);
        canvas.graphics.lineTo(p.x, p.y);
    }
}

private function downHandler(e:MouseEvent):void {
    _click = true;
    canvas.graphics.lineStyle(lineWidth.value, lineColor.selectedColor, lineAlpha.value, true);
    var p:Point = new Point(e.stageX, e.stageY);
    p = canvas.globalToLocal(p);
    canvas.graphics.moveTo(p.x, p.y);
}

private function upHandler(e:MouseEvent):void {
    _click = false;
}

private function saveImage():void {
    var b:BitmapData = new BitmapData(canvas.width, canvas.height);
    b.draw(IBitmapDrawable(canvas));
    var png:ByteArray = PNGEncoder.encode(b);

    // リモートオブジェクトの呼び出し処理
    var remoteObject:RemoteObject = new RemoteObject();
    remoteObject.destination = 'ImageSaveService';
    remoteObject.addEventListener(ResultEvent.RESULT, openImage);
    remoteObject.savePng(png);
}

private function openImage(e:ResultEvent):void {
    var req:URLRequest = new URLRequest(String(e.result));
    navigateToURL(req, '_blank');
}
require 'digest/sha1'

class ImageSaveService
  def savePng(png)
    image = png.pack('c*')
    name = Digest::SHA1.hexdigest(image) + '.png'
    open(RAILS_ROOT + '/public/images/' + name, 'w') {|f| f.puts image }
    '/images/' + name
  end
end
RTMP

Real Time Message Protocol

関係ないけど

3D

AVM2 が速いので Flash3D ぽい表現するライブラリもすごいよ

Papervision3D
channel3

つかいやすい!

Apollo

http://labs.adobe.com/technologies/apollo/

AdobeデスクトップRIAランタイムエンジン

hatena_logo3d も…

http://rails2u.com/misc/swf/HatenaLogo3d.air

超簡単に移植

Apollo インストレーション

http://unknownplace.org/memo/2007/03/19#e001

Apollo SDK 展開して Flex2 SDK に上書きで OK

Apollo アプリを作るまで

もちろん Flex-Builder を使わない方法

ActionScript3 単体の場合
Shell.shell.addEventListener(InvokeEvent.INVOKE, onInvoke);

を追加

  • InvokeEVENT.INVOKE が呼ばれたときに

NativeWindow (< DisplayObjectContainer) の子クラスを作成

  • そこに sprite なり shape なりを追加して描画
コンパイル

amxmlc で swf ファイルを生成

adt でパッケージの作成

XML情報から .air ファイルを作る。

.air ファイルインストール

.air ファイルの実体は ZIP ファイル。これを win/macアプリがおのおののプラットフォームの exe へとコンパイルする。

完了!

かんたん!(ちょっとうそ)

まとめ

ActionScript3 を覚えることで表現できる事は増えるよ!

はじめてみるのもいいかも

lihaorong1lihaorong12007/09/22 12:49パートナー募集でますか?

申請職務:Flexプログラム要員

忙しい時にお邪魔します。会社は全部にFlexプログラム要員の30名ぐらいにいる。費用は600円/時間しかないです。ご連絡してください。よろしくお願い致します。会社のホームページhttp://www.busycode.jp。メールアドレスcogoing@gmail.com。


どうもありがとうございます、
田中

gjuyb698gjuyb6982010/01/11 14:34http://geinouinfo.goto-ex.com/
芸能関係のニュースを続々更新!!HOTな芸能情報を公開!!美人芸能人画像、セクシー画像がいっぱい、倉科カナおっぱい画像

2007-01-19

1月19日の技術勉強会

19:49 | 1月19日の技術勉強会 - はてな技術発表会日記 を含むブックマーク はてなブックマーク - 1月19日の技術勉強会 - はてな技術発表会日記

1月19日に行われました技術発表会の内容を撮影した動画ファイルを公開いたしました。内容は以下のとおりです。

テーマKeyTypeListener.js 勉強
発表d:id:secondlife

動画・音声ファイル

以下の再生画面より、勉強会の動画・音声をご覧いただけます。

動画

filelist

また以下のリンクから、高画質版のファイルダウンロードの後にご覧いただくことも可能です。(ビデオiPodでもご覧いただけます。)

070119keytipelistner.mp4 filelist

音声

Download filelist

KeyTypeListener.js

http://hatelabo.jp/js/KeyTypeListener.js

タイプされたキーに対するアクションを行う Observer 的なライブラリ

どんなときに便利なの?

じゃあいらなくない?でも

  • 削除したい
  • 特定の要素のみにキーマッピングりたい
  • 特定の要素は無視したい
    • input type='text' な要素とか…
  • チェインで繋げたい/チェインを解除したい
  • ctrl とか alt とかを楽に扱いたい

デモ

http://rails2u.com/misc/key_event_listener.html

addKeybind('a', function(ev) { log('a')});
addKeybind('a', function(ev) { log('a!!');}, $('loglog'));
addKeybind('B', function(ev) { log('B')});
addKeybind('B', function(ev) { log('B!!');  return false;}, $('loglog'));
addKeybind('ctrl-x', function(ev) { log('!!!!!!!!!')});
addKeybind('ctrl-alt-o', function() { log('????????') });

cancelKeybind($('cancel'));

var cfunc = addKeybind('c', function(ev) { log('c')});
var cfunc2 = addKeybind('c', function(ev) { log('c2')});
removeKeybind('c', cfunc);

関数一覧

addKeybind(key, func[, element = document])

指定したキーが押されたときの関数を追加します。element を指定しなかった場合は document に connect されます。追加した関数が返ります。

追加した関数は、false を返す、もしくは例外 KeyTypeListener.StopKeyChain を発生させない限り連鎖します。

addKeybind('a', function(ev) {}); // 実行される
addKeybind('a', function(ev) { return false;}); // 実行される
addKeybind('a', function(ev) {}); // 前回 false が返ったので、実行されない
removeKeybind(key, func[, element = document])

指定したキー、関数削除します。

var cfunc = addKeybind('c', function(ev) { alert('c')});
var cfunc2 = addKeybind('c', function(ev) { alert('c2')});
removeKeybind('c', cfunc);
// c を押すと alert('c2') だけ実行される
removeKeybindAll(key[, element = document])

指定したキーに指定してある関数すべてを削除します

cancelKeybind(element)

指定した要素でキーが叩かれても無視します

getBoundKeybindFunctions(key[, element = document])

指定したキーにひも付いている関数全部を取得します

その他

  • opera では ctrl/alt を組み合わせることができません。だれか patch ><

作った人

はてなスタッフ

  • id:motemen (基本部分の実装)
  • id:secondlife (その他)

2006-05-17

5月15日の技術勉強会

11:37 | 5月15日の技術勉強会 - はてな技術発表会日記 を含むブックマーク はてなブックマーク - 5月15日の技術勉強会 - はてな技術発表会日記

5月17日に行われました技術発表会の内容を撮影した動画ファイルを公開いたしました。内容は以下のとおりです。

テーマzsh勉強
発表d:id:secondlife
時間21:09

動画ファイル

以下の再生画面より、勉強会の動画をご覧いただけます。

filelist

zsh とは

至高のシェル

何がいいの?

強力すぎる autocomplete

autoload -U compinit; compinit

/usr/share/zsh/*/functions/Completion/

コマンドごとに様々な補完関数が定義されている (487個)

apt-get install rub[tab]
scp gorou@rails2u.com:[tab]
./configure --[tab]

C-q でのコマンドスタック

グローバルエイリアス

パイプ含めたエイリアスも作れるよ。

alias -g L="| $PAGER"
alias -g G="| grep"

あたりを設定しておくと超便利。

cd -[tab]

よしなに展開

ワイルドカード

grep foo */**
cd /h/s/t

かゆいところに手が届く設定

PROMPT,RPROMPT
preexec などのイベントで呼び出される関数
if [ "$TERM" = "screen" ]; then
  preexec() {
    # see [zsh-workers:13180]
    # http://www.zsh.org/mla/workers/2000/msg03993.html
    emulate -L zsh
    local -a cmd; cmd=(${(z)2})
    echo -n "^[k$cmd[1]:t^[\\"
  }
fi

vi mode

テトリス

autoload -U tetris; zle -N tetris

M-x tetris

その他オススメ設定

sudo cmd で補完したいけど補完が効かない…、という場合

zstyle ':completion:*:sudo:*' command-path /usr/local/sbin /usr/local/bin \
                             /usr/sbin /usr/bin /sbin /bin /usr/X11R6/bin

オレオオプション設定

# based by http://devel.aquahill.net/zsh/zshoptions

# 複数の zsh を同時に使う時など history ファイルに上書きせず追加する
setopt append_history

# 指定したコマンド名がなく、ディレクトリ名と一致した場合 cd する
setopt auto_cd

# 補完候補が複数ある時に、一覧表示する
setopt auto_list

# 補完キー(Tab, Ctrl+I) を連打するだけで順に補完候補を自動で補完する
setopt auto_menu

# カッコの対応などを自動的に補完する
setopt auto_param_keys

# ディレクトリ名の補完で末尾の / を自動的に付加し、次の補完に備える
setopt auto_param_slash

# 最後がディレクトリ名で終わっている場合末尾の / を自動的に取り除く
#setopt auto_remove_slash

# サスペンド中のプロセスと同じコマンド名を実行した場合はリジュームする
setopt auto_resume

# ビープ音を鳴らさないようにする
setopt NO_beep

# {a-c} を a b c に展開する機能を使えるようにする
setopt brace_ccl

# 内部コマンドの echo を BSD 互換にする
#setopt bsd_echo

# シンボリックリンクは実体を追うようになる
#setopt chase_links

# 既存のファイルを上書きしないようにする
#setopt clobber

# コマンドのスペルチェックをする
setopt correct

# コマンドライン全てのスペルチェックをする
#setopt correct_all

# =command を command のパス名に展開する
setopt equals

# ファイル名で #, ~, ^ の 3 文字を正規表現として扱う
setopt extended_glob

# zsh の開始・終了時刻をヒストリファイルに書き込む
#setopt extended_history

# Ctrl+S/Ctrl+Q によるフロー制御を使わないようにする
setopt NO_flow_control

# 各コマンドが実行されるときにパスをハッシュに入れる
#setopt hash_cmds

# 直前と同じコマンドラインはヒストリに追加しない
setopt hist_ignore_dups

# コマンドラインの先頭がスペースで始まる場合ヒストリに追加しない
setopt hist_ignore_space

# ヒストリを呼び出してから実行する間に一旦編集できる状態になる
setopt hist_verify

# シェルが終了しても裏ジョブに HUP シグナルを送らないようにする
setopt NO_hup

# Ctrl+D では終了しないようになる(exit, logout などを使う)
setopt ignore_eof

# コマンドラインでも # 以降をコメントと見なす
setopt interactive_comments

# auto_list の補完候補一覧で、ls -F のようにファイルの種別をマーク表示
setopt list_types

# 内部コマンド jobs の出力をデフォルトで jobs -l にする
setopt long_list_jobs

# コマンドラインの引数で --prefix=/usr などの = 以降でも補完できる
setopt magic_equal_subst

# メールスプール $MAIL が読まれていたらワーニングを表示する
#setopt mail_warning

# ファイル名の展開でディレクトリにマッチした場合末尾に / を付加する
setopt mark_dirs

# 補完候補が複数ある時、一覧表示 (auto_list) せず、すぐに最初の候補を補完する
#setopt menu_complete

# 複数のリダイレクトやパイプなど、必要に応じて tee や cat の機能が使われる
setopt multios

# ファイル名の展開で、辞書順ではなく数値的にソートされるようになる
setopt numeric_glob_sort

# コマンド名に / が含まれているとき PATH 中のサブディレクトリを探す
#setopt path_dirs

# 8 ビット目を通すようになり、日本語のファイル名などを見れるようになる
setopt print_eightbit

# 戻り値が 0 以外の場合終了コードを表示する
#setopt print_exit_value

# ディレクトリスタックに同じディレクトリを追加しないようになる
#setopt pushd_ignore_dups

# pushd を引数なしで実行した場合 pushd $HOME と見なされる
#setopt pushd_to_home

# rm * などの際、本当に全てのファイルを消して良いかの確認しないようになる
#setopt rm_star_silent

# rm_star_silent の逆で、10 秒間反応しなくなり、頭を冷ます時間が与えられる
#setopt rm_star_wait

# for, repeat, select, if, function などで簡略文法が使えるようになる
setopt short_loops

# デフォルトの複数行コマンドライン編集ではなく、1行編集モードになる
#setopt single_line_zle

# コマンドラインがどのように展開され実行されたかを表示するようになる
#setopt xtrace

# 色を使う
setopt prompt_subst

# シェルのプロセスごとに履歴を共有
setopt share_history

# history (fc -l) コマンドをヒストリリストから取り除く。
setopt hist_no_store

# 文字列末尾に改行コードが無い場合でも表示する
unsetopt promptcr

#コピペの時rpromptを非表示する
setopt transient_rprompt

# cd -[tab] でpushd
setopt autopushd

2006-05-15

5月8日の技術勉強会

17:46 |  5月8日の技術勉強会 - はてな技術発表会日記 を含むブックマーク はてなブックマーク -  5月8日の技術勉強会 - はてな技術発表会日記

5月8日に行われました技術発表会の内容を撮影した動画ファイルを公開いたしました。内容は以下のとおりです。

テーマsecondlife/.vimrc
発表d:id:secondlife
時間27:13

動画ファイル

以下の再生画面より、勉強会の動画をご覧いただけます。

filelist

発表資料

set nocompatible  " Use Vim defaults instead of 100% vi compatibility
set backspace=indent,eol,start  " more powerful backspacing

" Now we set some defaults for the editor 
set textwidth=0   " Don't wrap words by default
set nobackup    " Don't keep a backup file
set viminfo='50,<1000,s100,\"50 " read/write a .viminfo file, don't store more than
"set viminfo='50,<1000,s100,:0,n~/.vim/viminfo
set history=100   " keep 50 lines of command line history
set ruler   " show the cursor position all the time

" Suffixes that get lower priority when doing tab completion for filenames.
" These are files we are not likely to want to edit or read.
set suffixes=.bak,~,.swp,.o,.info,.aux,.log,.dvi,.bbl,.blg,.brf,.cb,.ind,.idx,.ilg,.inx,.out,.toc

" We know xterm-debian is a color terminal
if &term =~ "xterm-debian" || &term =~ "xterm-xfree86" || &term =~ "xterm-256color"
 set t_Co=16
 set t_Sf=[3%dm
 set t_Sb=[4%dm
endif

" Make p in Visual mode replace the selected text with the "" register.
vnoremap p <Esc>:let current_reg = @"<CR>gvdi<C-R>=current_reg<CR><Esc>

syntax on

if &term =~ "xterm-256color"
"  colorscheme desert256
  colorscheme inkpot
endif

" Debian uses compressed helpfiles. We must inform vim that the main
" helpfiles is compressed. Other helpfiles are stated in the tags-file.
" set helpfile=$VIMRUNTIME/doc/help.txt.gz
set helpfile=$VIMRUNTIME/doc/help.txt

if has("autocmd")
  " Enabled file type detection
  " Use the default filetype settings. If you also want to load indent files
  " to automatically do language-dependent indenting add 'indent' as well.
  filetype plugin on
  "そのファイルタイプにあわせたインデントを利用する
  filetype indent on
  " これらのftではインデントを無効に
  "autocmd FileType php filetype indent off
  
  " autocmd FileType php :set indentexpr=
  autocmd FileType html :set indentexpr=
  autocmd FileType xhtml :set indentexpr=
endif

" Some Debian-specific things
augroup filetype
  au BufRead reportbug.*    set ft=mail
  au BufRead reportbug-*    set ft=mail
augroup END

" タブ幅の設定
set expandtab
set tabstop=2
set softtabstop=2
set shiftwidth=2

set modelines=0

"インデントはスマートインデント
set smartindent
"検索文字列が小文字の場合は大文字小文字を区別なく検索する
set ignorecase
"検索文字列に大文字が含まれている場合は区別して検索する
set smartcase
"検索時に最後まで行ったら最初に戻る
set wrapscan
"検索文字列入力時に順次対象文字列にヒットさせない
set noincsearch
"タブの左側にカーソル表示
"set listchars=tab:\\ 
set nolist
"入力中のコマンドをステータスに表示する
set showcmd
"括弧入力時の対応する括弧を表示
set showmatch
"検索結果文字列のハイライトを有効にしない
set nohlsearch
"ステータスラインを常に表示
set laststatus=2

function! GetB()
  let c = matchstr(getline('.'), '.', col('.') - 1)
  let c = iconv(c, &enc, &fenc)
  return String2Hex(c)
endfunction
" :help eval-examples
" The function Nr2Hex() returns the Hex string of a number.
func! Nr2Hex(nr)
  let n = a:nr
  let r = ""
  while n
    let r = '0123456789ABCDEF'[n % 16] . r
    let n = n / 16
  endwhile
  return r
endfunc
" The function String2Hex() converts each character in a string to a two
" character Hex string.
func! String2Hex(str)
  let out = ''
  let ix = 0
  while ix < strlen(a:str)
    let out = out . Nr2Hex(char2nr(a:str[ix]))
    let ix = ix + 1
  endwhile
  return out
endfunc

"ステータスラインに文字コードと改行文字を表示する
" set statusline=%<[%n]%m%r%h%w%{'['.(&fenc!=''?&fenc:&enc).':'.&ff.']['.&ft.']'}\ %F%=%l,%c%V%8P
if winwidth(0) >= 120
  set statusline=%<[%n]%m%r%h%w%{'['.(&fenc!=''?&fenc:&enc).':'.&ff.']'}%y\ %F%=[%{GetB()}]\ %l,%c%V%8P
else
  set statusline=%<[%n]%m%r%h%w%{'['.(&fenc!=''?&fenc:&enc).':'.&ff.']'}%y\ %f%=[%{GetB()}]\ %l,%c%V%8P
endif

"set statusline=%{GetB()}

" コマンドライン補完するときに強化されたものを使う(参照 :help wildmenu)
" set wildmenu
" コマンドライン補間をシェルっぽく
set wildmode=list:longest
" バッファが編集中でもその他のファイルを開けるように
set hidden
" 外部のエディタで編集中のファイルが変更されたら自動で読み直す
set autoread

" 文字コード関連
" from ずんWiki http://www.kawaz.jp/pukiwiki/?vim#content_1_7
if &encoding !=# 'utf-8'
  set encoding=japan
endif
set fileencoding=japan
if has('iconv')
  let s:enc_euc = 'euc-jp'
  let s:enc_jis = 'iso-2022-jp'
  " iconvがJISX0213に対応しているかをチェック
  if iconv("\x87\x64\x87\x6a", 'cp932', 'euc-jisx0213') ==# "\xad\xc5\xad\xcb"
    let s:enc_euc = 'euc-jisx0213'
    let s:enc_jis = 'iso-2022-jp-3'
  endif
  " fileencodingsを構築
  if &encoding ==# 'utf-8'
    let s:fileencodings_default = &fileencodings
    let &fileencodings = s:enc_jis .','. s:enc_euc .',cp932'
    let &fileencodings = &fileencodings .','. s:fileencodings_default
    unlet s:fileencodings_default
  else
    let &fileencodings = &fileencodings .','. s:enc_jis
    set fileencodings+=utf-8,ucs-2le,ucs-2
    if &encoding =~# '^euc-\%(jp\|jisx0213\)$'
      set fileencodings+=cp932
      set fileencodings-=euc-jp
      set fileencodings-=euc-jisx0213
      let &encoding = s:enc_euc
    else
      let &fileencodings = &fileencodings .','. s:enc_euc
    endif
  endif
  " 定数を処分
  unlet s:enc_euc
  unlet s:enc_jis
endif

" cvs,svnの時は文字コードをeuc-jpに設定
autocmd FileType cvs :set fileencoding=euc-jp
autocmd FileType svn :set fileencoding=utf-8

" set tags
if has("autochdir")
  set autochdir
  set tags=tags;
else
  set tags=./tags,./../tags,./*/tags,./../../tags,./../../../tags,./../../../../tags,./../../../../../tags
endif


" tags key map (C-z を C-tに,C-tはGNU/screenとかぶる)
map <C-z> <C-t>

" phpでKでhelpをひく
"autocmd BufNewFile,Bufread *.php,*.php3,*.php4 set keywordprg="help"

" phpならindentファイルは使わない
"autocmd FileType php :filetype indent off

" %マッチでrubyのクラスやメソッドが対応するようにする
" autocmd FileType ruby :source ~/.vim/ftplugin/ruby-matchit.vim

" 辞書ファイルからの単語補間
:set complete+=k

" C-]でtjと同等の効果
nmap <C-]> g<C-]>

" yeでそのカーソル位置にある単語をレジスタに追加
nmap ye :let @"=expand("<cword>")<CR>

"set minibfexp
let g:miniBufExplMapWindowNavVim=1 "hjklで移動
let g:miniBufExplSplitBelow=0  " Put new window above
let g:miniBufExplMapWindowNavArrows=1
let g:miniBufExplMapCTabSwitchBufs=1
let g:miniBufExplModSelTarget=1 
let g:miniBufExplSplitToEdge=1

" CD.vim example:// は適用しない
autocmd BufEnter * if bufname("") !~ "^\[A-Za-z0-9\]*://" | lcd %:p:h | endif

" howm
"set runtimepath+=~/.vim/howm_vim

"im_custom
"if has('im_custom/canna')
" set imoptions=canna
" set noimcmdline
" set iminsert=0
" set imsearch=0
" inoremap :set iminsert=0
" inoremap :set imsearch=0
"" <C-i>でのインサートモードに入ったときは日本語入力On
"  nmap <C-i> :set iminsert=2<CR>i
"" imap <ESC> <ESC>:set iminsert=0<CR>
"endif

" insert mode時にc-jで抜ける
" imap <C-j> <esc>

" Taglist
" nnoremap <silent> <C-,> :Tlist<CR>
"nnoremap <C-q> :Tlist<CR>
"nnoremap <silent> <C-.> :TlistClose<CR>

" savevers.vim(backup)
"set backup
"set patchmode=.clean 
"set backupdir=~/.backup_vim
"let savevers_types = "*"
"let savevers_dirs = &backupdir

" command mode 時 tcsh風のキーバインドに
cmap <C-A> <Home>
cmap <C-F> <Right>
cmap <C-B> <Left>
cmap <C-D> <Delete>
cmap <Esc>b <S-Left>
cmap <Esc>f <S-Right>

"表示行単位で行移動する
nmap j gj
nmap k gk
vmap j gj
vmap k gk

"フレームサイズを怠惰に変更する
map <kPlus> <C-W>+
map <kMinus> <C-W>-

" 前回終了したカーソル行に移動
autocmd BufReadPost * if line("'\"") > 0 && line("'\"") <= line("$") | exe "normal g`\"" | endif

" closetab C-_でタグをとじる
"let g:closetag_html_style=1
"source ~/.vim/scripts/closetag.vim 

",e でそのコマンドを実行
nmap ,e :execute '!' &ft ' %'<CR>
"nmap ,e :execute 'set makeprg=' . expand(&ft) . '\ ' . expand('%')<CR>:make<CR>
 
" phpdoc
let g:foo_DefineAutoCommands = 1

" MiniBufExplorer で GNU screen likeなキーバインド
let mapleader = "" 
"nnoremap <Leader>f :last<CR>
"nnoremap <Leader><C-f> :last<CR>
nmap <Space> :MBEbn<CR>
nmap <F3> :MBEbp<CR>
nmap <F4> :MBEbn<CR>
nnoremap <Leader><Space> :MBEbn<CR>
nnoremap <Leader>n       :MBEbn<CR>
nnoremap <Leader><C-n>   :MBEbn<CR>
nnoremap <Leader>p       :MBEbp<CR>
nnoremap <Leader><C-p>   :MBEbp<CR>
nnoremap <Leader>c       :new<CR>
nnoremap <Leader><C-c>   :new<CR>
nnoremap <Leader>k       :bd<CR>
nnoremap <Leader><C-k>   :bd<CR>
nnoremap <Leader>s       :IncBufSwitch<CR>
nnoremap <Leader><C-s>   :IncBufSwitch<CR>
nnoremap <Leader><Tab>   :wincmd w<CR>
nnoremap <Leader>Q       :only<CR>
nnoremap <Leader>w       :ls<CR>
nnoremap <Leader><C-w>   :ls<CR>
nnoremap <Leader>a       :e #<CR>
nnoremap <Leader><C-a>   :e #<CR>
nnoremap <Leader>"       :BufExp<CR>
nnoremap <Leader>1   :e #1<CR>
nnoremap <Leader>2   :e #2<CR>
nnoremap <Leader>3   :e #3<CR>
nnoremap <Leader>4   :e #4<CR>
nnoremap <Leader>5   :e #5<CR>
nnoremap <Leader>6   :e #6<CR>
nnoremap <Leader>7   :e #7<CR>
nnoremap <Leader>8   :e #8<CR>
nnoremap <Leader>9   :e #9<CR>

nnoremap ,<Space> :MBEbn<CR>
nnoremap ,n       :MBEbn<CR>
nnoremap ,<C-n>   :MBEbn<CR>
"nnoremap ,p       :MBEbp<CR>
"nnoremap ,<C-p>   :MBEbp<CR>
nnoremap ,c       :new<CR>
nnoremap ,<C-c>   :new<CR>
nnoremap ,k       :bd<CR>
nnoremap ,<C-k>   :bd<CR>
nnoremap ,s       :IncBufSwitch<CR>
nnoremap ,<C-s>   :IncBufSwitch<CR>
nnoremap ,<Tab>   :wincmd w<CR>
nnoremap ,Q       :only<CR>
nnoremap ,w       :ls<CR>
nnoremap ,<C-w>   :ls<CR>
nnoremap ,a       :e #<CR>
nnoremap ,<C-a>   :e #<CR>
nnoremap ,"       :BufExp<CR>
nnoremap ,1   :e #1<CR>
nnoremap ,2   :e #2<CR>
nnoremap ,3   :e #3<CR>
nnoremap ,4   :e #4<CR>
nnoremap ,5   :e #5<CR>
nnoremap ,6   :e #6<CR>
nnoremap ,7   :e #7<CR>
nnoremap ,8   :e #8<CR>
nnoremap ,9   :e #9<CR>
" Taglist用
nnoremap <Leader>l       :Tlist<CR>
nnoremap <Leader><C-l>       :Tlist<CR>
nnoremap <Leader>o       :TlistClose<CR>
nnoremap <Leader><C-o>       :TlistClose<CR>

let mapleader = '\' 

" buf移動
"nmap <c-n>  :MBEbn<CR>
"nmap <c-p>  :MBEbp<CR> 

" いろいろ囲むよ
"fun! Quote(quote)
"  normal mz
"  exe 's/\(\k*\%#\k*\)/' . a:quote . '\1' . a:quote . '/'
"  normal `zl
"endfun
"
"fun! UnQuote()
"  normal mz
""  exe 's/["' . "'" . ']\(\k*\%#\k*\)[' . "'" . '"]/\1/'
"  exe 's/\(["' . "'" . ']\)\(\k*\%#\k*\)\1/\2/'
"  normal `z
"endfun

nnoremap <silent> ,q" :call Quote('"')<CR>
nnoremap <silent> ,q' :call Quote("'")<CR>
nnoremap <silent> ,qd :call UnQuote()<CR>

"" 'quote' a word 
"nnoremap ,q' :silent! normal mpea'<esc>bi'<esc>`pl 
"" double "quote" a word 
"nnoremap ,q" :silent! normal mpea"<esc>bi"<esc>`pl 
"nnoremap ,q( :silent! normal mpea)<esc>bi(<esc>`pl 
"nnoremap ,q[ :silent! normal mpea]<esc>bi[<esc>`pl 
"nnoremap ,q{ :silent! normal mpea}<esc>bi{<esc>`pl 
"" remove quotes from a word 
"nnoremap ,qd :silent! normal mpeld bhd `ph<CR>


" 現在行をhighlight
" set updatetime=1
" autocmd CursorHold * :match Search /^.*\%#.*$

" code2html
let html_use_css = 1

" ペースト時にautoindentを無効に
"set paste

" SeeTab
let g:SeeTabCtermFG="black"
let g:SeeTabCtermBG="red" 

" netrw-ftp
let g:netrw_ftp_cmd="netkit-ftp"

" netrw-http
let g:netrw_http_cmd="wget -q -O"

" mru.vim
" MRU は MiniBufExplorer と相性がわるいためつかわない
"let MRU_Max_Entries = 100
"let MRU_Use_Current_Window = 2
"let MRU_Window_Height=15

" YankRing.vim
nmap ,y :YRShow<CR>

" html escape function
:function HtmlEscape() 
silent s/&/\&amp;/eg 
silent s/</\&lt;/eg 
silent s/>/\&gt;/eg 
:endfunction 

:function HtmlUnEscape() 
silent s/&lt;/</eg 
silent s/&gt;/>/eg 
silent s/&amp;/\&/eg 
:endfunction 

" 16色
set t_Co=16
set t_Sf=[3%dm
set t_Sb=[4%dm

" 補完候補の色づけ for vim7
hi Pmenu ctermbg=8
hi PmenuSel ctermbg=12
hi PmenuSbar ctermbg=0

" 検索後、真ん中にフォーカスをあわせる
"nmap n nzz 
"nmap N Nzz 
"nmap * *zz 
"nmap # #zz 
"nmap g* g*zz 
"nmap g# g#zz

" changelog mode
if has("autocmd")
    autocmd FileType changelog map ,d ggi<CR><CR><ESC>kki<C-R>=strftime("%Y-%m-%d")<CR> gorou <hotchpotch@gmail.com><ESC>o<CR><TAB>* | map ,n ggo<CR><TAB>*
endif

if has("autocmd")
    autocmd FileType changelog map ,n :call InsertChangeLogEntry("gorou", "hotchpotch@gmail.com")<CR>a
endif

function! InsertChangeLogEntry(name, mail)
    if strpart(getline(1), 0, 10) == strftime("%Y-%m-%d")
        execute "normal ggo\<CR>\<TAB>*"
    else
        let s:header = strftime("%Y-%m-%d") . " " . a:name . " <" . a:mail . ">"
        execute "normal ggi\<CR>\<CR>\<ESC>kki" . s:header . "\<CR>\<CR>\<TAB>*"
    endif
endfunction

" encoding
nmap ,U :set encoding=utf-8<CR>
nmap ,E :set encoding=euc-jp<CR>
nmap ,S :set encoding=cp932<CR>

" rails
au BufNewFile,BufRead app/**/*.rhtml set fenc=utf-8
au BufNewFile,BufRead app/**/*.rb set fenc=utf-8

" cofs's fsync
au BufNewFile,BufRead /mnt/c/* set nofsync