少しずつ覚えた事を載せていければな～と思います。

まずは、Ext.TabPanelです。

ソースコード

Ext.setup({

	// onReady
	onReady: function() {
		new Ext.TabPanel({
			fullscreen: true,

			// TabBarの設定
			tabBar: {

				// タブを上部に配置
				dock: 'top',

				// スタイル設定
				ui: 'dark',

				layout: {

					// タブを中央寄せ
					pack: 'center'
				}
			},

			// Tab切り替えのアニメーション
			animation: 'slide',

			// 各Panelのデフォルト値設定
			defaults: {

				// スクロールを縦スクロール
				scroll: 'vertical'
			},
			items: [{
				title: 'About',
				html: '
About Page

',
				iconCls: 'info',
				cls: 'card1'
			},{
				title: 'User',
				iconCls: 'user',
				html: '
User Page

',
				cls: 'card2'
			}]
		});
	}
});

プロパティの説明

上記サンプルのTabPanelで使ったプロパティです。
tabBar プロパティでタブの設定、animation プロパティでタブ切り替えのアニメーション、
items プロパティで表示するコンポーネントをそれぞれ指定しています。

Ext.TabPanelのプロパティ

Ext.TabBarのプロパティ

実行

以下のリンクからサンプルを実行できます。
Firefoxだとレイアウトがかなり崩れますが、Google Chromeだと綺麗に見れます。
dock が top の場合
dock が bottom の場合

jsdo.itにも載せてみました。
Sencha Touch – Ext.TabPanel – - jsdo.it

使ったAPIのリンク

Sencha Touch API Documentation – Ext.TabPanel -
Sencha Touch API Documentation – Ext.TabBar -
Sencha Touch API Documentation – Ext.Panel -

Introducing Sencha Touch: HTML5モバイル用フレームワーク
先週の2つの発表（SenchaとSencha Touch）の件について

ということで早速、触ってみました。
Hello Worldが表示される簡単なページを作りました。
下の様な画面です。

ソースコード

Ext.setup({
	// apple-mobile-web-app-capableの設定
	fullscreen: true,

	// ホーム画面に登録された場合のアイコン設定
	icon: 'icon.png',

	// iPadからアクセスした場合のスプラッシュ画像
	tabletStartupScreen: 'tablet_startup.png',

	// iPhoneからアクセスした場合のスプラッシュ画像
	phoneStartupScreen: 'phone_startup.png',

	// アイコンの光沢効果を無効
	glossOnIcon: false,

	// ステータスバーを半透明表示
	statusBarStyle: 'black-translucent',

	// onReady
	onReady: function() {
		new Ext.Panel({
			fullscreen: true,
			html: 'Hello Sencha Touch',
			dockedItems: [{
				xtype: 'toolbar',
				ui: 'dark',
				dock: 'top',
				items: [{
					xtype: 'button',
					text: 'Back',
					ui: 'green'
				}]
			}]
		});
	}
});

サンプルではExt.setupでページの起動設定、onReadyプロパティではExt.Panelを生成しています。

サンプルを実行

Ext.setup

Ext.setupはページの起動設定をするメソッドです。以下のプロパティが指定できます。
（試しながら確認したのでたぶんあっているハズ･･･）

• fullscreen：trueにすると、apple-mobile-web-app-capableが有効になる。
• tableStartupScreen：フルスクリーン表示時のスプラッシュ画像を指定。iPad用。
• phoneStartupScreen：フルスクリーン表示時のスプラッシュ画像を指定。iPhoneやiPod Touch用
• statusBarStyle：フルスクリーン表示のときのステータスバー（時計とかバッテリーとか表示されているバー）の表示を指定。”black”（黒）と”black-translucent”（半透明）が指定できる。
• icon：ページをホーム画面に追加したときのアイコンを指定。このプロパティで設定されたアイコンはデバイス共通で使用される。
• tabletIcon：iPad用のアイコン設定
• phoneIcon：iPhone、iPod Touch、Android用のアイコン設定
• glossOnIcon：アイコンに光沢効果を適用するか
• preloadImages：事前にキャッシュしておきたい画像ファイルを配列で指定
• onReady：セットアップ完了後に実行される関数
• scope：onReadyの実行スコープ

所感

簡単にモバイル用のページが作れるのが、単純に楽しいです。

ネイティブアプリの知識なくてもSencha Touchを使えば、
基本的なHTMLやJavaScript、CSSの知識だけで
ネイティブアプリちっくなページが作れるなぁと。

Ext Japanのブログで、Sencha Touch を始めようが公開されているので
次はこれを試してみます。

内容は･･･

大枠のパネルの中にカラムレイアウトなどでテキストフィールドとか
フォームのアイテムのレイアウトを行う場合は、”container”を指定すると
パフォーマンスが向上する

という内容です。

詳しい内容については、小堤さんのブログで紹介されています。

サンプルソース

ソースは、フォームレイアウトの中にfieldsetを入れて、
さらにカラムレイアウトの中にテキストフィールドを4つ入れたセットを100個配置しているサンプルです。
それぞれ、カラムレイアウトとフォームレイアウトにcontainerを指定する場合と指定しない場合での
描画時間をアラートで表示します。
時間測定ってこんなので良いのだろうか･･･。

Ext.onReady(function() {
	Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.2.0/resources/images/default/s.gif';
	Ext.QuickTips.init();

	var start = new Date().getTime();

	var form = new Ext.Panel({
		renderTo: Ext.getBody(),
		title: 'FormPanel - Speed Test2 -',
		layout: 'form',
		width: 800,
		height: 600,
		padding: '20',
		autoScroll: true,
		items: [{
			xtype: 'fieldset',
			title: 'fieldset',
			items: [{
				layout: 'column',
				xtype: 'container',
				items: [{
					columnWidth: '.50',
					layout: 'form',
					xtype: 'container',
					items:[{
						xtype: 'textfield',
						fieldLabel: 'Sample1'
					},{
						xtype: 'textfield',
						fieldLabel: 'Sample2'
					}]
				},{
					columnWidth: '.50',
					layout: 'form',
					xtype: 'container',
					items:[{
						xtype: 'textfield',
						fieldLabel: 'Sample3'
					},{
						xtype: 'textfield',
						fieldLabel: 'Sample4'
					}]
				}]
			}]
		}

		・
		・
		・

	});

	var end = new Date().getTime();
	alert((end-start)/1000);
});

実行結果

containerを指定しない場合

containerを指定した場合

※ブラウザが固まるので注意して下さい！！

Core2 2.0GHzのchromeで7秒くらい違いました。
フィールドを100個も配置する様な画面は無いと思いますが。。。
IE6とか遅い環境だともっと早くなるでしょうね。
それよりもなによりも、ボーダーとか背景とか無駄な描画がされないことが嬉しいです。
フォームアイテムのレイアウトに限らず、Panelの中にPanelを入れたりする場合は多々あるので、
その時にボーダーが重なったりしないのは嬉しいです。
まさに一石二鳥。

HTML

HTML Tidyを使って、チェックします。

1. ここからHTML Tidyをダウンロード

http://tidy.sourceforge.net/

2. ダウンロードしたファイルを、パスの通っているディレクトリに置く。
3. 「.vim/ftplugin」下に”html.vim”を作成する。
4. “html.vim”に以下を記述する。

	html.vim
	compiler tidy
	setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ \"%\"
	

CSS

“WebService::Validator:CSS::W3C”というperlモジュールを使って、チェックします。

1. “WebService::Validator:CSS::W3C”のモジュールをCPAN経由でインストール。
2. css.vimをダウンロードする。

http://www.vim.org/scripts/script.php?script_id=1577

3. “css.vim”を「.vim/compiler」に置く。
4. “validate_css”をパスの通っているディレクトリに置く。
5. 「.vim/ftplugin」に”css.vim”を作成する。
6. 以下を記述する。

	css.vim
	compiler css
	

JavaScript

JavaScript LintというチェックツールとjavaScriptLint.vimというプラグインを使います。

1. JavaScript Lintをダウンロード。

http://www.javascriptlint.com/

2. “jsl”を、パスの通っているディレクトリに置く。
3. javaScriptLint.vimをダウンロードする。

   http://www.vim.org/scripts/script.php?script_id=2578

4. “javaScriptLint.vim”を、「.vim/plugin」に置く。

これでファイル保存時にチェックできるようになります。
エラーがある場合、下の画像のようにエラーメッセージが表示されて、
エラーのある行にカーソルが移動します。

所感

普段はHTMLやCSSよりもJSを書く方が多いのですが、保存したときに自動でチェックしてくれるのは
かなり便利です。今までvimでコード書いているときは、エラーを事前に知る術がなかったので。
あとよくやるのが、「カンマが余計に付いていてFireFoxじゃエラーにならないけどIEでエラーになる」
とかですが、それもきちんとチェックしてくれるので助かっています。

以前、neocomplcacheのスニペット補完よりsnipMateの方が使いやすかったと書きましたが、
そのときに作者様より、「neocomplcacheではプレースホルダの中にプレースホルダが定義できる」と
コメントを頂いたので、neocomplcacheでスニペット補完を試しました。（かなり前にですが。。。）

vimrcの設定

まず、vimrcの設定で、スニペット展開のキーマッピングとスニペットファイルの配置場所を定義します。

" スニペットファイルの配置場所
let g:NeoComplCache_SnippetsDir = '~/.vim/snippets'

" TABでスニペットを展開
imap <expr><TAB> neocomplcache#plugin#snippets_complete#expandable() ? "\<Plug>(neocomplcache_snippets_expand)" : "\<TAB>"
smap <TAB> <Plug>(neocomplcache_snippets_expand)

“neocomplcache#plugin#snippets_complete#expandable()”と”neocomplcache_snippets_expand”を使用して、
snipMateの様にTABキーでスニペットが展開できるようにしています。

“g:NeoComplCache_SnippetsDir”では、スニペットファイルの配置場所を指定しています。
自分で定義したスニペットファイルは、このフォルダに置いています。
以前は標準のスニペットファイルに追記していたのですが、neocomplcacheをアップデートしたときに
上書きされてしまって面倒なことになったので、自分で定義するスニペットファイルは
“g:NeoComplCache_SnippetsDir”で標準の場所とは別の場所に配置することをオススメします。

また、”g:NeoComplCache_SnippetsDir”を定義している場合、標準のものよりこちらのスニペットファイルを優先するそうです。
詳しくはヘルプに載っていたのでそちらを参照下さい。

便利なコマンド

• NeoComplCacheEditSnippets

スニペットファイルを編集するときに使うコマンドです。

引数にファイルタイプを指定すると、それに対応するスニペットファイルが表示されます。
指定しない場合は、編集中のファイルのファイルタイプに対応するスニペットファイルが表示されます。

このコマンドの便利なところは、編集したスニペットファイルが再ロードされるので、
変更した定義がすぐ反映されるところです。

私は、NeoComplCacheEditSnippetsと打つのが面倒だったので、”Nes”で開くようにしました。

		command! -nargs=* Nes NeoComplCacheEditSnippets <args>
	

• NeoComplCachePrintSnippets

編集中のファイルタイプで使用できるスニペットが表示できます。

スニペットはneocomplcacheが自動的に補完リストを表示してくれますが、
自分の意図しないスニペットが展開されたときなどは、
このコマンドを使って変な定義がされていないか確認しています。

所感

いろいろ調べているとneocomplcacheの方が便利なコマンドがあったり、
プレースホルダの中にプレースホルダが定義できたりと、こちらの方が使いやすかったです。
ってことで、今はneocomplcache一本で満足しています。

主な機能

• シンタックス補完
• 辞書ファイルの補完
• タグファイルの補完
• ファイル名の補完
• オムニ補完
• スニペット補完

これだけでも「おぉ！」と思いましたが、同じような機能補完はautocomplpopでもできるんですよね。
ただ、以下のような理由からneocomplcacheを選択しました。

• カスタマイズ項目が豊富
• プラグインで拡張が可能
• SnipMateのトリガーを補完リストに表示できる
• autocomplpopでもSnipMateのトリガーを補完リストに表示できるが、パッチを当てる必要があったり、対象が大文字の場合のみだったりと使いにくい

インストール

下のurlよりダウンロードして、『.vim』フォルダにインストール。
shougo’s neocomplcache at master – github

vimrcの設定

こんな感じです。

" neocomplcache
let g:NeoComplCache_EnableAtStartup = 1
" 大文字小文字を区別する
let g:NeoComplCache_SmartCase = 1
" キャメルケース補完を有効にする
let g:NeoComplCache_EnableCamelCaseCompletion = 1
" アンダーバー補完を有効にする
let g:NeoComplCache_EnableUnderbarCompletion = 1
" シンタックスファイルの補完対象キーワードとする最小の長さ
let g:NeoComplCache_MinSyntaxLength = 3
" プラグイン毎の補完関数を呼び出す文字数
let g:NeoComplCache_PluginCompletionLength = {
  \ 'keyword_complete'  : 2,
  \ 'syntax_complete'   : 2
  \ }
" ファイルタイプ毎の辞書ファイルの場所
let g:NeoComplCache_DictionaryFileTypeLists = {
            \ 'default' : '',
            \ 'java' : $HOME.'/.vim/dict/j2se14.dict',
            \ 'javascript' : $HOME.'/.vim/dict/javascript.dict',
            \ 'php' : $HOME.'/.vim/dict/PHP.dict',
            \ }

snipMateのトリガーを補完リストに表示する

“g:neocomplcache_snippetsdir”で任意のスニペットフォルダを指定できます。
このパラメータに、snipMateのスニペットフォルダを指定すると、
snipMateのトリガーも補完リストに表示してくれます。

ただ、個人的にsnipMateの方が使いやすかったので、スニペット補完に関してはsnipMateを使用しています。
このとき、補完リストにneocomplcacheとsnipMateのトリガーが重複して表示されてしまっていたので、
“g:neocomplcache_snippetsdir”の設定はしていません。
その代わり、snipMateのトリガーを補完リストに表示するneocomplcacheのプラグインが
公開されていたので、そちらを使用してトリガーが表示されるようにしました。

このサイトで紹介されています。
neocomplcache + snipMate の接着剤 snipMate_complete を試してみる

所感

初回起動時にキーワードがキャッシュされるので、ストレスなく補完リストが表示されました。
snipMateのトリガーを補完リストに表示することで、キーワードを覚えておく必要もないですし、
他にも辞書ファイルやシンタックスなどのキーワードが補完リストに表示されるので、
コーディングもしやすくなりました。
かなり素敵なスクリプトです！！作者の方に感謝です！！

追記

作者様よりコメントを頂き、若干修正しました。
http://lingr.com/room/vim/archives/2010/02/03

snipMateは下の動画で紹介されています。

snipMate.vim Introductory Screencast from Michael Sanders on Vimeo.

インストール

下のURLよりスクリプトをダウンロードし、『.vim』フォルダにコピーする。
snipMate – TextMate-style snippets for Vim

スニペットファイルの配置場所

ダウンロードしたファイルの中に”snippets”というフォルダがあるので、そのフォルダに
ファイルタイプ＋”.snippet”
のファイル形式で配置すれば、ファイルタイプに応じたスニペットファイルが読み込まれます。
デフォルトのスニペットファイルもいくつかあります。

スニペットファイルの書き方

書き方はこんな感じです。

	snippet トリガーとなるキーワード 説明
		展開する定型文

例えば、

snippet div
	<div id="${1}" class="${2}" style="${3}">
		${4}
	</div>

と定義した場合、
div<TAB>
と入力すると、定義した定型文が展開されます。
上の”${X}”は、<TAB>を入力する毎に、１，２，３･･･の順でカーソルが移動します。
プレースホルダの書き方は以下の通りです。

• ${1} ･･･　TAB移動するマーカ
• ${1:name}　･･･　デフォルトで”name”が入力される
• ${2:$1}　･･･　${1}で入力した文字が${2}にも同期される

説明は、必須ではありませんが、トリガーのキーワードが重複している場合、
スニペットが一覧表示されますので、そのときにスニペットの説明として表示されます。
こんな感じの画面です。

この画面で展開したいスニペットの数字を入力すると、選択したスニペットが展開されます。

スニペットファイルが公開されているサイト

スニペットファイルがいくつか公開されていました。

• vim-snipmate-ruby-snippets
• snipmate-snippets

所感

スニペットファイルも定義しやすいし、さくさく入力ができるのでかなりおすすめです。
ただ、TextMateのようにプレースホルダの中にプレースホルダを定義出来ないことが残念です。
将来のリリースに期待です。

vimでTextMateライクなスニペット補完が出来るとどこかのサイトで発見したのを発端に
去年の末からvimを触っています。
vimはほとんど初心者ですが、TextMateライクなエディタを目指して構築中です。
まずは、インストールと設定、カラースキーマ・便利なvimスクリプトを入れたのでそのメモから。

インストール

Mac版Gvimをインストールします。
macvim-kaoriya

必要なフォルダとファイルを作成

$HOMEに”.vim”というフォルダと、”.gvimrc”というファイルを作成します。
“.vim”は、MacVimが使用するカラースキーマやスクリプトを格納するフォルダ。
“.gvimrc”はgvimの設定ファイル。そのほかにvimの設定ファイルの”.vimrc”などがあるそうです。

設定

“.gvimrc”に必要な設定を記述。
こんな感じで。

"新しい行のインデントを現在行と同じにする
set autoindent
"バックアップファイルを作るディレクトリ
set backupdir=$HOME/vimbackup
"ファイル保存ダイアログの初期ディレクトリをバッファファイル位置に設定
set browsedir=buffer
"クリップボードをWindowsと連携
set clipboard=unnamed
"Vi互換をオフ
set nocompatible
"スワップファイル用のディレクトリ
set directory=$HOME/vimbackup
"タブの代わりに空白文字を挿入する
set expandtab
"変更中のファイルでも、保存しないで他のファイルを表示
set hidden
"インクリメンタルサーチを行う
set incsearch
"タブ文字、行末など不可視文字を表示する
set list
"listで表示される文字のフォーマットを指定する
set listchars=eol:$,tab:>\ ,extends:<
"行番号を表示する
set number
"シフト移動幅
"set shiftwidth=4
"閉じ括弧が入力されたとき、対応する括弧を表示する
set showmatch
"検索時に大文字を含んでいたら大/小を区別
set smartcase
"新しい行を作ったときに高度な自動インデントを行う
set smartindent
"行頭の余白内で Tab を打ち込むと、'shiftwidth' の数だけインデントする。
set smarttab
"ファイル内の <Tab> が対応する空白の数
"set tabstop=4
"カーソルを行頭、行末で止まらないようにする
set whichwrap=b,s,h,l,<,>,[,]
"検索をファイルの先頭へループしない
set nowrapscan
"縦幅
set lines=50
"横幅
set columns=150
"入力モード時、ステータスラインのカラーを変更
augroup InsertHook
autocmd!
autocmd InsertEnter * highlight StatusLine guifg=#ccdc90 guibg=#2E4340
autocmd InsertLeave * highlight StatusLine guifg=#2E4340 guibg=#ccdc90
augroup END
"日本語入力をリセット
au BufNewFile,BufRead * set iminsert=0
"タブ幅をリセット
au BufNewFile,BufRead * set tabstop=4 shiftwidth=4
"全角スペースを視覚化
highlight ZenkakuSpace cterm=underline ctermfg=lightblue guibg=#666666
au BufNewFile,BufRead * match ZenkakuSpace /　/
"常にタブを表示
set showtabline=2
"透明度を変更
set transparency=3
map <silent> gw :macaction selectNextWindow:
map <silent> gW :macaction selectPreviousWindow:
"フォント設定
set guifontwide=Osaka:h12
set guifont=Osaka-Mono:h14

設定の詳細については、以下のページが詳しく載ってます。
vim options

カラースキーマで色を変える

カラースキーマをインストールすることで、gvimの色を好きな色に変更することができます。
名無しのvim使いさんのサイトにプレビューが大量に載っていました。
カラースキーマ　−　名無しのvim使い

適用する場合は、好きなカラースキーマのファイルをダウンロードし、$HOME/.vim/colorsにダウンロードしたファイルをコピーします。
コピー後、.gvimrcでカラースキーマを設定すればOK。

colorscheme blackbeauty

vimスクリプトのインストール

vimスクリプトは、Eclipseでいうプラグインのようなもので、とにかく数が豊富。
入れたvimスクリプトは以下。

• autoclose.vim
• “({[を入力すると、自動的に閉じ記号を補完してくれる
• EnhancedCommentify.vim
• ビジュアルモードで選択した範囲にコメント記号を挿入／削除してくれる。詳しい設定は、こちら
• yankring.vim
• コピー履歴を保持し、履歴からペーストするテキストを選択できるようになる
• FavEx.vim
• フォルダ・ファイルをお気に入り登録し、登録したフォルダ・ファイルを開くことができる
• mru.vim
• 開いたファイルの履歴を保持し、開けるようにする
• NERD_tree.vim
• ファイルツリーを表示する
• project.vim
• gvimをIDEっぽくプロジェクトツリーを表示する

今日はここまで。

参考にしたサイト

ナレッジエース – Vim初心者的導入メモ 2/3 「vimrc設定」編
名無しのvim使い

以下、手順です。

Journlerからデータのエクスポート

「File -> Export Journal」で以下の画面が表示される。

私はオプションを上記画面のように設定しました。
『DataFormat』はWebアーカイブとかXHTMLとかもあったんですが、Evernoteにインポートした時
件名に〜.htmlとかがくっついてきたので、Rich Textでエクスポートしました。
『Include header』は余計だったので外しています。

Evernoteでの設定

Evernoteを起動して、Preferencesを表示する。
「Clipping」タブをクリックして、「After a clip」のチェックボックスを全て外す。
（インポートするときに毎回通知のアクションが走るので。）

Apple Scriptの作成

以下のApple Scriptを作成します。

set listOfNames to {}
set theFolder to choose folder "Select the source folder"

tell application "Finder"
 set filelist to every file of the folder theFolder
 repeat with currentFile in filelist
 set currentFileName to (the name of currentFile)
 set nom to currentFileName
 if text -4 of nom is "." then
 set currentFileName to (text 1 thru -5 of nom)
 end if
 set currentFileDate to (the creation date of currentFile)
 set currentFileLocation to currentFile as alias
 set currentFileFolder to (the name of theFolder)
 tell application "Evernote"
 create note title currentFileName created currentFileDate notebook currentFileFolder from file currentFileLocation
 end tell
 end repeat
end tell

そして、実行。

ファイル選択のダイアログが出てくるので、Journlerでエクスポートしたデータが

入っているフォルダを選択すると、一気にEvernoteへインポートされます。

以下、参考にしたサイトです。

Permanent Link to Migrating from Journler to Evernote

Mac用だとiSightでも画像メモ、iPhoneだとカメラの画像メモと
ボイスレコーダーでのボイスメモまで作成できる。

今までノートツールには、Journlerを使っていましたが、
Evernoteに乗り替えようかと画策中です。

Evernote

http://www.evernote.com/