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 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 #1: 画面の初期表示を速くする
先週、「Sencha Touch パーフェクトガイド」が出版されました。売れ行きはなかなか好調のようです。ご購入頂いた皆様、本当にありがとうございます。そして「はじめに」の正誤表を読んで、大事なことを思い出しました。今週から週1回のペースで Sencha Touch の記事を投稿します。。 実は「Sencha Touch パーフェクトガイド」には、書いていない内容があります。それは、所謂「バッドノウハウ」です。バッドノウハウはバージョンが変わると必要なくなったりする代物ですが、実際の開発現場では役に立つ情報です。今週から「Practical Sencha Touch」シリーズと題しまして、Sencha Touch アプリを開発する現場で役に立つノウハウを公開します。また、開発に便利な周辺ツールも併せてご紹介したいと思います。 Problem: Sencha Touch のドキュメントに含ま
ネイティブよりも速いと評判の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 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
Building your First App
Sencha Touch 2.0 のRCが公開されています。 そのドキュメントのガイドにある Building your First App を翻訳しました。 最初のアプリを作る 準備 このガイドは Getting Started Guide (翻訳はこちら) で設定されたSDKがセットアップされ環境が完全に機能している前提に立脚しています。 まだでしたら、まず先のガイドを読んでから(数分しかかかりません)ここに戻ってきて、 最初のアプリケーションを作成することを勧めます。 何を作るか あなたの会社のモバイルサイトに使えるような、 簡単なWebサイトのようなモバイルアプリケーションを作成しようと思います。 ホームページ、コンタクトフォーム、最新のブログポストを取得するシンプルなリストを追加し、 それらを携帯電話で読めるようにします。 This is what we’re going to
Getting Started with Sencha Touch 2
Sencha Touch 2.0 のRCが公開されています。 そのドキュメントのガイドにある Getting Started with Sencha Touch 2 を翻訳しました。 Sencha Touch 2 をはじめよう Sencha Touch とは? Sencha Touch を使うと素早く簡単に、AndroidやiOS、Blackberryで動作する HTML5ベースのモバイルアプリケーションを作成でき、 ネイティブアプリケーションのような操作性をブラウザーのナックで実現できます。 必要なもの 最初に必要なものは次のとおりです。 フリーのSencha Touch 2.0 SDK ローカルで動作するWebサーバー モダンWebブラウザー。ChromeまたはSafariを推奨します。 SDKの最新バージョンをダウンロードして解凍します。 解凍したフォルダーをWebサーバーのドキュメ
Sencha Touch 2 Recipes #2: オリジナルのテーマを作る
Solution: Sencha Touch の SCSS ファイルに、カスタマイズ用の変数を追加してコンパイルすることで、オリジナルテーマの CSS を作ることができます。 今回は、Google+ 風な配色を意識したテーマをアプリに適用してみたいと思います。 作成した SCSS は以下。 この SCSS から作った CSS を適用すると、以下のような見た目のアプリが、 それっぽい雰囲気を醸し出すアプリに変わります。 – サンプルページ # WebKit系のブラウザ（Chrome, Safari）もしくはスマートフォンでのアクセスをお願いします _o_ http://recipe2.senchafy.com/ ツールバーの左にあるアイコンをタップすると、テーマのリストが出るので、そこで「G++」を選択すると、見た目が切り替わります。 Discussion: Sencha Touch は、テ
Sencha Touch での Sass 利用事例
開発部の川野です。今回も Sencha Touch をテーマに、記事を書かせて頂きます。 Sencha Touch と言えば、「綺麗な UI」が特徴ですよね （JavaScript だけで画面を構築する独特のスタイルも特徴ですが）。 本記事では、その綺麗な UI を支えている「Sass」「Compass」というツールについて、また、Sencha Touch で、それらをどのように利用しているかについて、少し覗いてみたいと思います。 Sass makes CSS fun again. Sass は、CSS の冗長性や、保守性・生産性の悪さを解決するために生まれた CSS の拡張言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。 Sass の具体的な説明は本記事では割愛させて頂きますが、一言で言うと、CSS の「プログラミング」を可能にしてくれます。押さえておきたい特
ハタさんのブログ(復刻版) : Ext JS＆Sencha Touch勉強会1月＠東京で話してきた
遅くなりました 先日行われた Ext JS＆Sencha Touch勉強会1月＠東京 で、Sencha Touchについて話す機会をいただけたので、「Sencha Touch + Scala でモバイルアプリ開発」と題して、Sencha Touchで開発しているときの話をさせていただきました。 スライドは→http://www.slideshare.net/nowelium/sencha20110126にアップロードしました Sencha勉強会20110126 View more presentations from nowelium. 発表で使ったコード類は→touch_20110126.zipに置きました。 取り急ぎ。。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sencha Touch Tutorial: メモ帳アプリを作る #1
Build and implement a single sign-on solution
Sencha勉強会20110126