Sencha Touch をちまちま触っています。
Sencha Touch を始めよう や Sencha Touch Examples を参考に、いろいろとAPIを試している所です。
少しずつ覚えた事を載せていければな~と思います。
まずは、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のプロパティ
プロパティ
説明
tabBar
Ext.TabBarのプロパティをオブジェクトリテラルで指定する。
※下記、Ext.TabBarのプロパティを参照。
tabBarPosition
タブを配置する場所を指定する。
指定できる値は ‘top’ , ‘bottom’
※’left’ , ‘right’ も指定できるけど、とりあえず動くという感じ。
ui
タブのテーマを指定。
指定できる値は ‘light’ , ‘dark’ , ‘metal’
animation
タブを切り替えるときのアニメーションを指定。
指定できるアニメーションは、 ‘fade’ , ’slide’ , ‘flip’ , ‘cube’ , ‘pop’ , ‘wipe’。
kitchensinkのアニメーションで動きを確認できる。
sortable
true にすると、タブをホールドしてドラッグすることができる。
activeItem
初期表示でアクティブにするコンポーネントを items のインデックスで指定する。
items
表示するコンポーネントを配列で指定。
Ext.TabBarのプロパティ
プロパティ
説明
dock
Ext.TabPanel の tabBarPosition と同様。
layout
Ext.TabBarのレイアウトの設定。
上記サンプルコードでは、pack プロパティでタブの配置位置を指定している。
’start’ , ‘center’ , ‘end’を指定できる。
ui
Ext.TabPanel の ui と同様。
sortHoldThreshold
タブのホールド時間をミリ秒で指定する。指定した時間の間、タブをホールドすると、ドラッグ可能になる。
デフォルトは300ミリ秒。
実行
以下のリンクからサンプルを実行できます。
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 -
先週ですが、Sencha Touchのベータ版がリリースされましたね。
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 を始めよう が公開されているので
次はこれを試してみます。
先週、ExtJS勉強会 に行ってきました。
その中で小堤さんがパフォーマンス向上のテクニックについて
紹介されていたのでそれを試してみました。
内容は・・・
大枠のパネルの中にカラムレイアウトなどでテキストフィールドとか
フォームのアイテムのレイアウトを行う場合は、”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を入れたりする場合は多々あるので、
その時にボーダーが重なったりしないのは嬉しいです。
まさに一石二鳥。
MacVimでHTML、CSS、JavaScriptを文法チェックできるようにしたのでその手順を。
HTMLとCSSはmakeコマンド、JavaScriptはファイル保存でチェックできるようにしました。
HTML
HTML Tidyを使って、チェックします。
ここからHTML Tidyをダウンロード
http://tidy.sourceforge.net/
ダウンロードしたファイルを、パスの通っているディレクトリに置く。
「.vim/ftplugin」下に”html.vim”を作成する。
“html.vim”に以下を記述する。
html.vim
compiler tidy
setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ \"%\"
CSS
“WebService::Validator:CSS::W3C”というperlモジュールを使って、チェックします。
“WebService::Validator:CSS::W3C”のモジュールをCPAN経由でインストール。
css.vimをダウンロードする。
http://www.vim.org/scripts/script.php?script_id=1577
“css.vim”を「.vim/compiler」に置く。
“validate_css”をパスの通っているディレクトリに置く。
「.vim/ftplugin」に”css.vim”を作成する。
以下を記述する。
css.vim
compiler css
JavaScript
JavaScript LintというチェックツールとjavaScriptLint.vimというプラグインを使います。
JavaScript Lintをダウンロード。
http://www.javascriptlint.com/
“jsl”を、パスの通っているディレクトリに置く。
javaScriptLint.vimをダウンロードする。
http://www.vim.org/scripts/script.php?script_id=2578
“javaScriptLint.vim”を、「.vim/plugin」に置く。
これでファイル保存時にチェックできるようになります。
エラーがある場合、下の画像のようにエラーメッセージが表示されて、
エラーのある行にカーソルが移動します。
所感
普段はHTMLやCSSよりもJSを書く方が多いのですが、保存したときに自動でチェックしてくれるのは
かなり便利です。今までvimでコード書いているときは、エラーを事前に知る術がなかったので。
あとよくやるのが、「カンマが余計に付いていてFireFoxじゃエラーにならないけどIEでエラーになる」
とかですが、それもきちんとチェックしてくれるので助かっています。
かなり更新が滞っている。。。
そろそろ書きたいなぁ〜と思いつつ日々が過ぎていました・・・。
最近は、MacVim一本でExtJSのコーディングしたりRailsの勉強したりしていますが、
やっとvimにも馴れてきたかな。と実感している今日この頃です。
以前、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一本で満足しています。
いろいろなキーワードの補完リストを自動的に表示してくれる
neocomplcache
というvimスクリプトを入れました。
autocomplpopみたいなスクリプトです。
主な機能
シンタックス補完
辞書ファイルの補完
タグファイルの補完
ファイル名の補完
オムニ補完
スニペット補完
これだけでも「おぉ!」と思いましたが、同じような機能 補完は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
TextMateライクなスニペット補完が可能になるsnipMate というvimスクリプトを入れました。
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,2,3・・・の順でカーソルが移動します。
プレースホルダの書き方は以下の通りです。
${1} ・・・ TAB移動するマーカ
${1:name} ・・・ デフォルトで”name”が入力される
${2:$1} ・・・ ${1}で入力した文字が${2}にも同期される
説明は、必須ではありませんが、トリガーのキーワードが重複している場合、
スニペットが一覧表示されますので、そのときにスニペットの説明として表示されます。
こんな感じの画面です。
この画面で展開したいスニペットの数字を入力すると、選択したスニペットが展開されます。
スニペットファイルが公開されているサイト
スニペットファイルがいくつか公開されていました。
所感
スニペットファイルも定義しやすいし、さくさく入力ができるのでかなりおすすめです。
ただ、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スクリプトは以下。
今日はここまで。
参考にしたサイト
ナレッジエース – Vim初心者的導入メモ 2/3 「vimrc設定」編
名無しのvim使い
JournlerからEvernoteへのデータ移行しました。
以下、手順です。
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
そ
最近知ったEvernoteというWebサービスのノートツールが素敵です。
Webではもちろん、Windows用、Mac用、iPhone用など専用の
クライアントアプリまで揃っていて、これがまた使いやすいです。
Mac用だとiSightでも画像メモ、iPhoneだとカメラの画像メモと
ボイスレコーダーでのボイスメモまで作成できる。
今までノートツールには、Journlerを使っていましたが、
Evernoteに乗り替えようかと画策中です。
Evernote
http://www.evernote.com/