Node.js, MongoDB, Heroku, Sencha Touch を使った写真共有アプリ
開発部 川野です。今週木曜日（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セミ
Sencha Touch アプリの開発環境（@kawanoshinobu）
開発部 川野です。昨日、キャノン IT ソリューションズ様主催の Sencha セミナーで講演させて頂きました。講演は、テキストエディタを使って Sencha Touch アプリを開発する、という内容です。参加者の方からとても元気が出る嬉しいフィードバックを頂いたので、興奮そのままにこの記事を書いています。 セミナーの後、何人かの方から、私の開発環境についてご質問を頂きました。私の個人的な環境ですが何かのお役に立てれば、ということで公開します。 === ◆テキストエディタ Sublime Text 2 Web エンジニアは UNIX 系のテキストエディタ（Emacs, Vim）を使う人が多い印象ですが、私は Sublime Text を使っています。Sublime Text も Emacs や Vim のようにカスタマイズできるテキストエディタなのですが、後発なだけあって、これまでのテキス
Practical Sencha Touch #6: アプリをフラットデザインにする
フラットデザイン、流行ってますね。乗るしかない、このビックウェーブに！ということで、今回は Sencha Touch アプリをフラットデザインにする方法を解説します。 # といいつつ、隠れた意図としては Sencha Touch 2.2 で改善されたテーマシステムの紹介です。 Problem: アプリを最近流行のフラットなデザインにしたい。 Solution: Touch 2.2 で導入された Base テーマを利用してスタイルを適用します。 Discussion: Sencha Touch 2.2 の目玉機能として Windows Phone 8 対応があります。ただ、日本市場では Windows Phone 8 はまだ発売されていないので、正直なところ恩恵はあまりない感じです。。でも、この機能追加をきっかけに行われたテーマシステムの改善は、どんなデバイスを対象としたアプリを作るにしても
Sencha Touch 2 ソースコード読書会 第2回レポート
先週の金曜日、アスキー・メディアワークス様の会議室をお借りして、第 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 2 ソースコード読書会 第1回レポート
「Sencha Touch はハマることが多い。ハマりから抜け出すには、、、ソース嫁！」 先週の金曜日、Sencha Touch 2 のソースコード読書会第 1 回目を開催しました。上記の言葉は、会の冒頭で LT をして頂いた高岡さんの言葉です。（いつも私の無茶ぶりを引き受けて頂いて、本当にありがとうございます _o_） Sencha Touch を使ったアプリの開発は、一般的な Web アプリの開発とは違う作法が要求されます。そもそも HTML は書かないですし、独自のクラスシステムやイベントシステムに従ってコードを書くので JavaScript を書いている感覚もそれほどありません。だから、、、ハマります。何度もハマって痛い思いをしたあげく辿り着いた結論は、ライブラリのソースコードをしっかり読むことでした。 Sencha のフレームワーク上で効率良く開発するには、ソースコードの理解が必
Practical Sencha Touch #2: デバイス固有のバグを調査する
「現場で役立つノウハウを」というコンセプトで始まった Practical Sencha Touch シリーズ、今回は第 2 回目です。Sencha Touch のアプリが動作する環境は様々です。場合によっては、特定の端末だけ動作がおかしい、ということもあるでしょう。今回は、そんな時に重宝するツールをご紹介します。 Problem: 特定の端末だけアプリの動作がおかしい。原因を調査するために、詳細な情報が欲しい。 Solution: weinre を使います。weinre は Web インスペクタ リモート（WEb INspector REmote）の略で、端末のブラウザで表示しているページを PC ブラウザ（*）の Web インスペクタを使ってデバッグできるツールです。気になる発音ですが、公式ページによると「”ワイナリー”か”ワイナー”と呼ばれているが、どちらの発音が正しいかは知らない」と
Practical Sencha Touch #1: 画面の初期表示を速くする
先週、「Sencha Touch パーフェクトガイド」が出版されました。売れ行きはなかなか好調のようです。ご購入頂いた皆様、本当にありがとうございます。そして「はじめに」の正誤表を読んで、大事なことを思い出しました。今週から週1回のペースで Sencha Touch の記事を投稿します。。 実は「Sencha Touch パーフェクトガイド」には、書いていない内容があります。それは、所謂「バッドノウハウ」です。バッドノウハウはバージョンが変わると必要なくなったりする代物ですが、実際の開発現場では役に立つ情報です。今週から「Practical Sencha Touch」シリーズと題しまして、Sencha Touch アプリを開発する現場で役に立つノウハウを公開します。また、開発に便利な周辺ツールも併せてご紹介したいと思います。 Problem: Sencha Touch のドキュメントに含ま
開発者のための WebKit (“WebKit for Developers” 日本語訳)
このノートは、Paul Irishによる記事 “WebKit for Developers” の日本語訳です。 僕ら開発者の多くにとって、WebKit はブラックボックスだ。HTML, CSS, JS, その他のアセットを投げると、WebKit は魔法でもかけたかのように、綺麗な Web ページを返してくれる。しかし、僕の同僚 Ilya Grigorik は本当の WebKit はこうだと言っている。 WebKit はブラックボックスではない。ホワイトボックスなんだ。さらにそれだけではなく、オープンなホワイトボックスなんだ。 じゃあ、これから次のことについて理解していこう。 WebKit ってなに？ なにが WebKit じゃないの？ WebKit ベースのブラウザで WebKit はどう使われているの？ なんですべての WebKit が同じじゃないの？ さて、世の中に数多くの WebKi
ネイティブよりも速いと評判のfastbookの裏側を調べてみる - webとかmacとかやってみようか R
本記事は、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
Sencha Touch 2.1 のチュートリアルを書きました！
（12/23追記: リンク先にあるチュートリアルを書き直しました） 開発部 川野です。今週月曜日に Sencha が発表した「Fastbook」が、すごい話題になっていますね！この投稿を書いているのは午前3時なのですが、こんな遅い時間にも関わらず、関連のツイートがたくさん飛び交っています。 Facebookのモバイルアプリが失敗した理由はHTML5のせいじゃない。HTML5でサクサク動くFacebookアプリを作って見せたSencha Touch開発チーム Facebookアプリを、HTML5でどうしてサクサクにできたのか。Sencha Touch開発チームが用いた3つのテクニック 私も早速触って、その驚異的なスピードに感動しました。「もしや、空前の Sencha Touch ブームが来るのでは！」と期待に胸をふくらませています :p Fastbook の衝撃をきっかけに、「Sencha
Facebookアプリを、HTML5でどうしてサクサクにできたのか。Sencha Touch開発チームが用いた3つのテクニック
Sencha Touchの開発チームがHTML5で高速に動作するFacebookアプリを開発したことを紹介した1つ前の記事 「Facebookのモバイルアプリが失敗した理由はHTML5のせいじゃない。HTML5でサクサク動くFacebookアプリを作って見せたSencha Touch開発チーム」は、非常に多くの読者に注目されました。 この記事で紹介したSencha Touch開発チームのブログ「The Making of Fastbook: An HTML5 Love Story」の後半では、どのようなテクニックを用いて高速なHTML5アプリケーションを実現したのかも紹介されています。 この記事では、その3つのテクニックについてポイントを紹介したいと思います。タイムラインやニュースフィードのようなユーザーインターフェイスを備えたモバイルアプリケーションは、これから広く開発されていくことにな
Sencha TouchでのクロスドメインなJSONP通信 - きしだのHatena
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のタグを書くこ
Sencha Touch 2 vs jQuery Mobile
SenchaUG 勉強会 第2回@東京 での発表資料。 http://www.meetup.com/Japan-Sencha-User-Group/events/81279312/ ネタなので大目に見てやって下さい
Japan Sencha User Group ができたよ！＋第1回勉強会レポート
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 を使っているエンジニア同士
Sencha Touch 2 Recipes #6: アプリケーションを最適化する
スマートフォンのブラウザで WEB アプリをストレスなく動作させるのは、結構難しいチャレンジです。モバイルブラウザは非力で、レンダリングもスクリプトの実行も PC ブラウザと比較すると桁違いに遅いです。また外出先で使われることが多い特性上、利用時のネットワーク状況も恵まれているとは言い難いですよね。 このような不利な状況でユーザーに快適に利用してもらうために、いくつか心がけたい工夫があります。 – サーバーへのリクエスト回数を最小限にする – ファイルのサイズを最小限にする – 静的ファイルを端末側にキャッシュさせる – ローディング画面を表示して、ユーザーを安心させる 特に、端末へのキャッシュは強力な手法で、うまく実装すれば電波の届かない状況で WEB アプリを動作させることも不可能ではありません。ただ、適切にファイルをキャッシュさせるのは、なかなか難しい課題のように思われます。意図通り
Sencha Touch 2 Recipes #3: Windows で iOS アプリを開発する
>> iOS アプリ開発を Windows PC 上で！ Sencha Touch 2 のリリースを報じる記事で、ネイティブパッケージング機能が大きく取り上げられていました。記事を読んで興味を惹かれた方も多いようなので、今回は Windows で iOS アプリ（iPhone、iPad で動くアプリ）を開発する手順について、ご紹介させて頂きたいと思います。 Problem: - 使い慣れた Windows PC で iOS アプリを開発したい - iOS アプリを開発してみたいが、手元に Windows PC しかない Solution: 実際のところ、作業はコマンドひとつで完了します。通常通り Sencha Touch で WEB アプリを開発した後、以下のコマンドを実行すると、iOS で実行可能なアプリケーションファイル（.app）が生成されます。 ネイティブパッケージングで変換した
Sencha Launches Mobile HTML5 Cloud, Sencha.io | TechCrunch
Javascript Web app framework provider Sencha is today announcing the public beta launch of Sencha.io, its new HTML5 mobile cloud service. The service will allow Sencha app developers to build “shared experiences” in the browser, without having to write server code or manage hosting. At launch, Sencha.io will provide a set of cloud services, including Sencha.io Data, Sencha.io Messages, Sencha.io L
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sencha Touch Tutorial: メモ帳アプリを作る #1
Getting Started with Sencha Touch 2
HTML5ウェブアプリ開発に最適なクラウド環境「Sencha.io」
