開発部 川野です。今週木曜日（7/25）、キャノン IT ソリューションズ様主催の Sencha セミナーでお話させて頂くことになり、デモンストレーション用に表題のアプリを作成しました。Node.js と Sencha Touch を組み合わせてアプリを作りたい方の参考になる気がしたので、ソースコードを公開します。 Photo Sharing App（ソースコード）: https://github.com/kawanoshinobu/photo-sharing-app Photo Sharing App（デモ）: http://photo-sharing.herokuapp.com Sencha セミナーでは、このアプリの作成方法を解説します。開催時間が平日昼間なのですが、もしご都合のつく方は、ぜひぜひお越し下さい！参加費は無料です ^^ お申し込みは以下のサイトから ↓ Senchaセミ
開発部 川野です。昨日、キャノン IT ソリューションズ様主催の Sencha セミナーで講演させて頂きました。講演は、テキストエディタを使って Sencha Touch アプリを開発する、という内容です。参加者の方からとても元気が出る嬉しいフィードバックを頂いたので、興奮そのままにこの記事を書いています。 セミナーの後、何人かの方から、私の開発環境についてご質問を頂きました。私の個人的な環境ですが何かのお役に立てれば、ということで公開します。 === ◆テキストエディタ Sublime Text 2 Web エンジニアは UNIX 系のテキストエディタ（Emacs, Vim）を使う人が多い印象ですが、私は Sublime Text を使っています。Sublime Text も Emacs や Vim のようにカスタマイズできるテキストエディタなのですが、後発なだけあって、これまでのテキス
フラットデザイン、流行ってますね。乗るしかない、このビックウェーブに！ということで、今回は Sencha Touch アプリをフラットデザインにする方法を解説します。 # といいつつ、隠れた意図としては Sencha Touch 2.2 で改善されたテーマシステムの紹介です。 Problem: アプリを最近流行のフラットなデザインにしたい。 Solution: Touch 2.2 で導入された Base テーマを利用してスタイルを適用します。 Discussion: Sencha Touch 2.2 の目玉機能として Windows Phone 8 対応があります。ただ、日本市場では Windows Phone 8 はまだ発売されていないので、正直なところ恩恵はあまりない感じです。。でも、この機能追加をきっかけに行われたテーマシステムの改善は、どんなデバイスを対象としたアプリを作るにしても
先週の金曜日、アスキー・メディアワークス様の会議室をお借りして、第 2 回目の Sencha Touch 2 ソースコード読書会を開催しました。お越し頂いた皆様、どうもありがとうございました！ 今回もアスキー・メディアワークス様のご好意で Ustream 中継を実施して頂きました。録画が残っていますので、ご興味のある方はぜひご覧下さい。 – Ustream 録画 core/lang/Array.js まずはフレームワークの土台を支えるものから、ということで core ディレクトリのソースコードを読んでいます。前回、core/Ext.js、core/version/Version.js、core/lang/String.js と読み終えたので、今回はその続きの core/lang/Array.js から読み始めました。 splice について each forEach indexOf con
「Sencha Touch はハマることが多い。ハマりから抜け出すには、、、ソース嫁！」 先週の金曜日、Sencha Touch 2 のソースコード読書会第 1 回目を開催しました。上記の言葉は、会の冒頭で LT をして頂いた高岡さんの言葉です。（いつも私の無茶ぶりを引き受けて頂いて、本当にありがとうございます _o_） Sencha Touch を使ったアプリの開発は、一般的な Web アプリの開発とは違う作法が要求されます。そもそも HTML は書かないですし、独自のクラスシステムやイベントシステムに従ってコードを書くので JavaScript を書いている感覚もそれほどありません。だから、、、ハマります。何度もハマって痛い思いをしたあげく辿り着いた結論は、ライブラリのソースコードをしっかり読むことでした。 Sencha のフレームワーク上で効率良く開発するには、ソースコードの理解が必
「現場で役立つノウハウを」というコンセプトで始まった Practical Sencha Touch シリーズ、今回は第 2 回目です。Sencha Touch のアプリが動作する環境は様々です。場合によっては、特定の端末だけ動作がおかしい、ということもあるでしょう。今回は、そんな時に重宝するツールをご紹介します。 Problem: 特定の端末だけアプリの動作がおかしい。原因を調査するために、詳細な情報が欲しい。 Solution: weinre を使います。weinre は Web インスペクタ リモート（WEb INspector REmote）の略で、端末のブラウザで表示しているページを PC ブラウザ（*）の Web インスペクタを使ってデバッグできるツールです。気になる発音ですが、公式ページによると「”ワイナリー”か”ワイナー”と呼ばれているが、どちらの発音が正しいかは知らない」と
先週、「Sencha Touch パーフェクトガイド」が出版されました。売れ行きはなかなか好調のようです。ご購入頂いた皆様、本当にありがとうございます。そして「はじめに」の正誤表を読んで、大事なことを思い出しました。今週から週1回のペースで Sencha Touch の記事を投稿します。。 実は「Sencha Touch パーフェクトガイド」には、書いていない内容があります。それは、所謂「バッドノウハウ」です。バッドノウハウはバージョンが変わると必要なくなったりする代物ですが、実際の開発現場では役に立つ情報です。今週から「Practical Sencha Touch」シリーズと題しまして、Sencha Touch アプリを開発する現場で役に立つノウハウを公開します。また、開発に便利な周辺ツールも併せてご紹介したいと思います。 Problem: Sencha Touch のドキュメントに含ま
このノートは、Paul Irishによる記事 “WebKit for Developers” の日本語訳です。 僕ら開発者の多くにとって、WebKit はブラックボックスだ。HTML, CSS, JS, その他のアセットを投げると、WebKit は魔法でもかけたかのように、綺麗な Web ページを返してくれる。しかし、僕の同僚 Ilya Grigorik は本当の WebKit はこうだと言っている。 WebKit はブラックボックスではない。ホワイトボックスなんだ。さらにそれだけではなく、オープンなホワイトボックスなんだ。 じゃあ、これから次のことについて理解していこう。 WebKit ってなに？ なにが WebKit じゃないの？ WebKit ベースのブラウザで WebKit はどう使われているの？ なんですべての WebKit が同じじゃないの？ さて、世の中に数多くの WebKi
本記事は、Sencha Advent Calendar 2012 の23日目の記事です。1日遅れでごめんなさい！あ、今日であってた(;´▽｀A 当初完走は無理なんじゃないかと思ってたけど、みんなのがんばりで完走目前！おめでとうございます！ Sencha Touchで作ったネイティブよりも速いfacebookアプリ「fastbook」が話題になっていますね。 原文: The Making of Fastbook: An HTML5 Love Story 和訳: HTML5へのラブストーリー: メイキングオブFastbook ネイティブを凌ぐすごいパフォーマンスに驚きますよね！これらは実際にはどんなコンポーネントを使って作られているのかすごく気になります。そこで、ちょっと調べてみたいと思いました。 ネイティブアプリ向けパッケージが、https://github.com/extjs/fastbo
（12/23追記: リンク先にあるチュートリアルを書き直しました） 開発部 川野です。今週月曜日に Sencha が発表した「Fastbook」が、すごい話題になっていますね！この投稿を書いているのは午前3時なのですが、こんな遅い時間にも関わらず、関連のツイートがたくさん飛び交っています。 Facebookのモバイルアプリが失敗した理由はHTML5のせいじゃない。HTML5でサクサク動くFacebookアプリを作って見せたSencha Touch開発チーム Facebookアプリを、HTML5でどうしてサクサクにできたのか。Sencha Touch開発チームが用いた3つのテクニック 私も早速触って、その驚異的なスピードに感動しました。「もしや、空前の Sencha Touch ブームが来るのでは！」と期待に胸をふくらませています :p Fastbook の衝撃をきっかけに、「Sencha
Sencha Touchの開発チームがHTML5で高速に動作するFacebookアプリを開発したことを紹介した1つ前の記事 「Facebookのモバイルアプリが失敗した理由はHTML5のせいじゃない。HTML5でサクサク動くFacebookアプリを作って見せたSencha Touch開発チーム」は、非常に多くの読者に注目されました。 この記事で紹介したSencha Touch開発チームのブログ「The Making of Fastbook: An HTML5 Love Story」の後半では、どのようなテクニックを用いて高速なHTML5アプリケーションを実現したのかも紹介されています。 この記事では、その3つのテクニックについてポイントを紹介したいと思います。タイムラインやニュースフィードのようなユーザーインターフェイスを備えたモバイルアプリケーションは、これから広く開発されていくことにな
12/1に、福岡RubyKaiki01で、ぜんぜんRubyとは関係ないSencha Touchの話をしてきました。そのときに紹介したJSONPのコードについて。 JSONPについては、サーバーの記述も必要なので、本には書いてなかった、というか書かないから調べてなかったので。 Sencha Touchとは？ HTML5+JavaScript+CSS3用のモバイルアプリケーションフレームワークです。HTML5とはいえ、WebKit用なので、Firefoxなどではうまく動きません。 どんな感じかは、次のKitchenSinkをChromeやSafariで見てみてください。 http://cdn.sencha.io/touch/sencha-touch-2.1.0/examples/kitchensink/index.html サンプルのソースを見るとわかりますが、基本的にはHTMLのタグを書くこ
SenchaUG 勉強会 第2回@東京 での発表資料。 http://www.meetup.com/Japan-Sencha-User-Group/events/81279312/ ネタなので大目に見てやって下さいRead less
Ext JS や Sencha Touch など Sencha 製品は、世界中で使われています。Ext Japan のサイトでは、「世界中で100万人以上の開発者が Sencha フレームワークを使っています」と普及の規模を謳っています。携わるエンジニアが増えれば、コミュニティが発生するのは自然の流れで、Sencha 製品を利用する有志のコミュニティが世界各地で作られています。 大規模なところだと、ロンドン、シカゴ、パリ、、そして先日、日本でも Sencha 製品のユーザーグループが設立されました。 Japan Sencha User Group： http://www.meetup.com/Japan-Sencha-User-Group Japan Sencha User Group（※略して Sencha UG）は、Ext JS や Sencha Touch を使っているエンジニア同士
スマートフォンのブラウザで WEB アプリをストレスなく動作させるのは、結構難しいチャレンジです。モバイルブラウザは非力で、レンダリングもスクリプトの実行も PC ブラウザと比較すると桁違いに遅いです。また外出先で使われることが多い特性上、利用時のネットワーク状況も恵まれているとは言い難いですよね。 このような不利な状況でユーザーに快適に利用してもらうために、いくつか心がけたい工夫があります。 – サーバーへのリクエスト回数を最小限にする – ファイルのサイズを最小限にする – 静的ファイルを端末側にキャッシュさせる – ローディング画面を表示して、ユーザーを安心させる 特に、端末へのキャッシュは強力な手法で、うまく実装すれば電波の届かない状況で WEB アプリを動作させることも不可能ではありません。ただ、適切にファイルをキャッシュさせるのは、なかなか難しい課題のように思われます。意図通り
>> iOS アプリ開発を Windows PC 上で！ Sencha Touch 2 のリリースを報じる記事で、ネイティブパッケージング機能が大きく取り上げられていました。記事を読んで興味を惹かれた方も多いようなので、今回は Windows で iOS アプリ（iPhone、iPad で動くアプリ）を開発する手順について、ご紹介させて頂きたいと思います。 Problem: - 使い慣れた Windows PC で iOS アプリを開発したい - iOS アプリを開発してみたいが、手元に Windows PC しかない Solution: 実際のところ、作業はコマンドひとつで完了します。通常通り Sencha Touch で WEB アプリを開発した後、以下のコマンドを実行すると、iOS で実行可能なアプリケーションファイル（.app）が生成されます。 ネイティブパッケージングで変換した
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
