Sencha Touchをさわってみた

まわりに使った人がいないSencha Touchを試してみようと、この本を入手しました。

HTML5モバイルアプリケーションフレームワーク Sencha Touchパーフェクトガイド

ということで、この本にそってやってみた結果をメモしておきます。

第一部第2章「開発準備」

開発環境構築。 Sencha Touch 2.1 SDK入れてSencha Cmd入れるだけ。

Sencha Cmd入れた直後コマンドにパスが通ってなくて少々キョドったりもしたんですが、.bashrcにPATH設定がされていて、tmuxからzshな自分は恩恵を受けられなかっただけなのでした。同様の人は気をつけましょう。

第一部第3章「はじめてのSencha Touch」

Senchaっていまどきのアプリケーションフレームワーク風な感じなんですね。

$ sencha generate app appname path

でプロジェクト作って、

$ sencha generate model -n modelname -f field 

でモデル作って、ビューは自分で作って、コントローラは

$ sencha generate controller -n controllername

で作ると。MVCを意識した作りになりやすい感があります。

で、上記generateコマンドでapp.jsに生成したクラスが自動で追加されると本にはありますが、追加されないので調べてみたところ、

The majority of upgrade issues revolved around the "app.js" file. In previous releases, Sencha Cmd would add entries to "app.js" during code generation calls like sencha generate model (but also for controllers and the rest). Further, the location of this file differed by framework.

Due to the complications this approach creates and the fact that often these updates are not wanted on the application, these commands no longer update"app.js". You will need to add the newly created controllers, views, stores, etc. to the appropriate class. In many cases this will be on one of your controllers and not your application.

Sencha Cmd Release Notes

とのことで、追加されなくなったそうです。

あと、フォーム保存でいきなりgetForm()を使っている箇所がありますが、

    config: {
        refs: {
            'form': 'memoform'
        },

みたいにしないと、formのgetterであるgetForm生成されないようです。

これでlocalStorageにフォームの値を保存するアプリを作ることができました。

jQuery Mobileとの比較をよく目にしていたのだけど、ちょっと触っただけですがこりゃまったく別物ですね。JQuery Mobileがサイトを作っているのに対し、Sencha Touchはアプリを作ってる感じです。

続きもなにかあればメモしていきます。

Bootstrap 3がどんな感じになりそうかを見てみた

みんな大好きBootstrapですが、次のバージョンである3、こんなサイトができて、夏にはでるんじゃないかという話も聞いたので、その前にどんなのか見てみようかと。

まずはbootstrapのgithubから入手。3っぽいbranchは3.0.0-wipなので、それを。

入手したらそのディレクトリへ移動し、npm intallを実行すると、必要なものをごっそり取ってきてくれます。npmなんじゃらほいな人はnodeをインストールするとnpmが入ります。ちなみに最近はインストールパッケージもあるみたいですねnode。途中-gがどうとかWARNが出ましたが、とりあえずの確認にはスルーして問題ありませんでした。

npm installでごっそり導入し終わったら、そのままmakeを実行すると、JSHintやらLESSやらが実行されて、ビルド完了！

サンプルとかが見られるドキュメントはdocs/index.htmlとかなのですが、開いてみるとヘッダとかがない。調べてみたところ、これはJekyllのテンプレートのようです。２まではMustache使ってたのがJekyllに変わるようですね。Jekyllについては30分のチュートリアルでJekyllを理解するが参考になりました。

Jekyllを導入。gem install jekyllでOK。

インストール後はファイルを変換してもよいのですが、めんどくさかったのでサーバで起動しました。jekyll --serverで起動して http://localhost:9001 にアクセスすると、見えました！

まだ作り途中なので変なところもあるのですが、ちゃんと見ることができました。見た目の印象だけだと、グラデーションなくなりましたね。例えばボタンはこんな感じ。

Bootstrapもいわゆるフラットデザインでしょうか。すっきりしてていいですね。

他にも色々と変わってそうなので、夏がたのしみです！

enja-ossに参加しました

GitHubでのOSSの日本語訳をするenja-ossに参加しました。

自分がやってるCSS日本語組版関連仕様翻訳や、近くでやってる例の翻訳を差し置いてなにやってんだと言われそうではありますが。前者についてはCSS Text Decoration Module Level 3がLast Callになっているけども、コメント受付が今月中とかだったのでそれまで待って判断することにしました。後者についてはしばらくWeb技術中心でやってこうという判断です。gradleはたぶんやるけど。

で、enja-ossですが、すごい人達と一緒に翻訳できるので楽しいです。今まで一人でやってたこともあって、なおさら。複数人のGitHubマナーが全然わからなくて最初のpull requestはプルプルしましたが、もう大丈夫、のはず。

今は家族が増えたばかりで思った以上に時間は取れないのですが、これからのWebに少しでも貢献出来ればと思っています。

ということで、まずはSass。

Gradleで環境変数を使わずproxyを設定する

JenkinsからGradle Pluginを使ってビルドをしようとしたのですが、Gradleに対しJAVA_OPTなどGradle起動時の環境変数を設定することができないっぽい(あるのかもしれませんが見つけられず)。よって、proxyを指定できず。困った。

Mavenのsetting.xmlみたいなものはないかと調べてみたところ、gradle.propertiesってのを使えばよさげと判明。Gradle User Guideの20.2. Accessing the web via a proxyってところ。

具体的には、gradle.propertiesって名前のファイルを、

systemProp.http.proxyHost=proxyServer(HTTP)
systemProp.http.proxyPort=proxyPort(HTTP)
systemProp.https.proxyHost=proxyServer(HTTPS)
systemProp.https.proxyPort=proxyPort(HTTPS)

てな中身で作り、

• プロジェクトのルート
• USER_HOME/.gradle(未確認)

のどちらかに置いて、動かすとうまくいきました。

Macでテープ起こし

突然テープ起こし(文字起こし)をすることになりまして。

聞いたものを書き留めていけばいいってことでEmacsとiTunes程度で大丈夫かなと思ってたのですが、iTunesは少し巻き戻し/早送りとかがないとつらい。ほんとうにつらい。出来ればショートカットでそれをしたい。

ということで少し探してみて試してみたところExpress Scribeってのがよかったです。

Transcription Software. Foot Pedal Software Player

再生/停止/5秒戻る/進むのキーバインドが設定でき、バックグラウンドで動作しててもそれが効くのでエディタをアクティブにしたまま作業ができます。便利！

このソフト自体にエディタがついているので、慣れたエディタのない方はそれでもいいかも。

あと1つ、もらったmp3ファイル、定常的なノイズが結構あり耳が辛くなったので、除去する方法を少し調べてみたところ、Audacityってのでできるようでした。

Audacity: フリーのオーディオエディタ・レコーダー

ノイズ除去の方法はこちら。

この方法は、数秒間の無音部分をノイズサンプルとして選択し、それをもとに除去するのですが、僕の使っていた音声ファイルは無音部分が少なく、いい効果が得られませんでした。残念。音声ファイルには意識的に無音部分を残しておいたほうがよさそうです。

CSS3でのテーブル装飾に手を加えてみた

書こうとおもいつつずいぶん経ってしまい、すっかり乗り遅れた感がありますが。

CSS3を使って美しく装飾されたテーブルの作り方｜Webparkで紹介されていたCSS3でのテーブル装飾についてです。

これ、Chromeだとうまくいくんですが、MacのFirefox15.0.1だと、ちょっとおかしなところがあることに気づきました。こんな感じ。

右セルのshadowが下に被ってます。CSSの該当箇所は36-39行目。

table tr td:last-child {
  border-right: 1px solid #84b2e0;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}

ある意味指定通りではあります。Chromeだとシャドウはセルの下に隠れてくれるのですが、Firefoxはそうではないと。ちなみにW3C仕様のCSS Backgrounds and Borders Module Level 3を斜め読んでみた限りだと、このあたりの挙動は指定されていないようでした。

ということで、どうすればよいか考えてみたのですが、CSS3でテーブルを装飾するって結構面倒くさいですね…しばらく悩んだ結果、今回はこういう方針にしてみました。

1. thとtdだけでなくtableそのものにもborder-radiusを適用
2. thとtdにおけるouter box-shadowをやめる
3. tableそのものにbox-shadowを適用(なのでtableのborder-collapseをseparateにしている)

これで、Firefoxの表示もこんな感じになりました。

CSSはこんな感じです。tableとth,tdでborder-radiusを2重指定してるのがちょっと気持ち悪いです。もっと上手く書ける方法があれば教えてください。

table {
  width: auto;
  border-spacing: 0;
  font-size:14px;
  border-collapse: separate;
  border-radius: 5px;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
table th {
  color: #fff;
  padding: 8px 15px;
  background: #258;
  background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%);
  background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
  font-weight: bold;
  border-left:1px solid #258;
  border-top:1px solid #258;
  border-bottom:1px solid #258;
  line-height: 120%;
  text-align: center;
  text-shadow:0 -1px 0 rgba(34,85,136,0.9);
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
table th:first-child {
  border-radius: 5px 0 0 0;	
}
table th:last-child {
  border-radius:0 5px 0 0;
  border-right:1px solid #258;
}
table tr td {
  padding: 8px 15px;
  border-bottom: 1px solid #84b2e0;
  border-left: 1px solid #84b2e0;
  text-align: center;
}
table tr td:last-child {
  border-right: 1px solid #84b2e0;
}
table tr {
  background: #fff;
}
table tr:nth-child(2n+1) {
  background: #f1f6fc;
}
table tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}
table tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}
table tr:hover {
  background: #bbd4ee;
  cursor:pointer;
}

SaxストラップSaxHolderを購入した

趣味でテナーサックスをやってます。

今までストラップにはツェブラ使ってて、一応首に気を使ったストラップなのだけど、ネックストラップなんで長時間やってると疲れるし、汗もかく。ということで、首を使わないタイプを検討してた。BGのハーネスやブレステイキングあたりにしようかなーと思ってたのだけど、ふとSaxHolderってのを見かけて、評判もよいし、周りに持ってる人も居なかったので購入。

こっちは代理店のページかな。もうちょい詳しい情報が。
Select International

で、今日やっと使えた(普段は自宅でe-sax使ってるのでストラップを試せなかった)。

いいところ。

• 今までのネックストラップに比べて圧倒的に楽。そして軽い。2時間余裕。楽器が浮いてるように感じるレベル。お腹の支えが効いてるのか？
• 装着が楽。
• 装着しても汗をかかない。

いまいちなところ。

• 肩に引っかけてるだけなので、屈んだりする際の取り回しが不安。まだ慣れてないというのもある。大きめのアクションとかはたぶん無理(しないけど)。
• まあちょっと格好悪い。「武器みたい」って言われた。
• 少しかさばる。テナーならベルに入れられるとあるけど結構ギリギリ。

という感じ。トータルで見ると楽ってのにつきます。ほんとに楽。首に負担がないことの素晴らしさよ。ということで、これに乗り換えます。