Posted by & filed under 開発.


フラットデザイン、流行ってますね。乗るしかない、このビックウェーブに!ということで、今回は Sencha Touch アプリをフラットデザインにする方法を解説します。

# といいつつ、隠れた意図としては Sencha Touch 2.2 で改善されたテーマシステムの紹介です。

Problem:

アプリを最近流行のフラットなデザインにしたい。

Solution:

Touch 2.2 で導入された Base テーマを利用してスタイルを適用します。

flat

Discussion:

Sencha Touch 2.2 の目玉機能として Windows Phone 8 対応があります。ただ、日本市場では Windows Phone 8 はまだ発売されていないので、正直なところ恩恵はあまりない感じです。。でも、この機能追加をきっかけに行われたテーマシステムの改善は、どんなデバイスを対象としたアプリを作るにしても、ちゃんと恩恵を得られる素敵なものです。

Sencha Touch 2.2 で行われたテーマシステムの改善は、以下のものがあります。

– Sass(.scss)のリファクタリング
– Base テーマの追加
– プラットフォームに応じて利用する css ファイルの切り替え
– PlatformConfig
– アイコンフォントのサポート

アプリをフラットデザインにするにあたり、役に立つのが Base テーマです。これまでは、デフォルトの装飾の上からカスタマイズする必要があったため、適用するスタイルに無理が生じていました。Base テーマは、これらデフォルトの装飾を全てなくし、自由にデザインすることを想定したテーマです。アプリをデフォルトとは異なるデザインにしたい場合、このテーマをベースにすることで、これまでよりも簡単にスタイルを組み立てることができます。

Sencha Cmd で生成した雛形アプリに Base テーマを適用すると以下のようになります。

base-theme

冒頭の画面は Base テーマをベースにスタイルを構築しました。参考に、書き捨てのコードではありますが、記述内容を共有します。

app/view/Main.js

resources/sass/app.scss

See Also:

Theming Sencha Touch:
http://docs.sencha.com/touch/2.2.1/#!/guide/theming

Theme-Switching in Sencha Touch 2.2:
http://vimeo.com/66191847


関連文書:

Posted by & filed under いろいろ.


“There are 10 kinds of people in this world, 1 who know binary and 1 who doesnt.”

Confused?? How come 10 ? Well, such is the power of binary numbers that even 2 is written as 10. :P

With more of the high level programming language used these days, the power and effectiveness of using bits is becoming history now. Bit manipulation is one of the most useful and effective low-level optimization. It can help improve the speed and size of the program and also help simplify coding sometimes.

The four basic bit operators are AND (&), OR ( | ), NOT (!) and XOR (^). Here is the truth table:

So if A = 0101 (5) and B = 1011 (11), then:

  1. !A = 11111010 (number of leading 1’s depend on the type of A)
  2. A&B = 0001
  3. A|B = 1111
  4. A^B = 1110

Two more operators involving bits are left-shift ( a<<b) and right shift (a>>b) operators. Left-shift shifts the bits in a by b positions to the left, and assuming numbers are positive, this is equivalent to multiply a with 2band right shifting is same as dividing the number a with 2 b. The use of this is to set or clear a particular bit. Suppose a is 3. Then 1<<a in binary form is 1000(8). Thus every bit can be accessed in this way. So the following is the way to set or clear bits of a number:
To set a bit (b) of A, : A | = 1 << b
To clear a bit(b) of A: A&= ~(1 << b), where (~ is the negation symbol).

Many set operations can be done with bit manipulations:

  • Set Union : A|B
  • Set Intersection : A&B
  • Set subtraction: A & ~B
  • Set negation : SET_ALL_BIT ^ A
  • Where SET_ALL_BIT represent a number with all bits set

Also if one wishes to find all possible sets possible, which is (2N) he may iterate over all binary numbers in the range of 0 to (1<<N) . In Java, one can easily find the binary of a number by Integer.toBinaryString(i) method.

If anyone has any further doubt, he can reach me personally.
Follow up question : How would you take out the last set bit(1) of any natural number.


関連文書:

  • 関連文書は見つからんがな

Posted by & filed under 開発.


Open source community is so wonderful. My tiny custom component for Sencha Touch — Ext.ux.AccordionList is growing day by day thanks to their helps. Today, I want to introduce recent update of Ext.ux.AccordionList.

By the way, why I wrote this article in English although ariel-area’s main reader is Japanese? Lokesh and Vishal, Indian internship students who is working for Ariel, wrote the article in English. Maybe, I felt that I should write in English? Hmm,, I don’t know. Actually, this is just moods :p

Sencha Insights:

Do you know Sencha Insights? This is a e-mail based news magazine which published by Sencha.Inc. It’s a good source because it was curated the best news from around the interwebs by Sencha.Inc. If you are interested in, you can subscribe it from follows sites.

Sencha Insights:
http://www.senchainsights.com

And lucky to me, Sencha Insights introduced my custom component in news #6. It would be nice announcement of Ext.ux.AccordionList, then I got a some new users of this.

insights

New feature in 1.0.1:

Thanks to Sencha Insights, I got many patch for Ext.ux.AccordionLIst from open source community. Of Course, I welcome to these patch and merged them to the repository. Then I also added one other new feature. That’s why I released a new version and it was named 1.0.1.

1.0.1 has three new feature, Single expanded mode, Expand with animation, and Item count display. I describe them.

Single expanded mode

Special thanks to Istenes. This mode have list can expand only one item at a time.

Expand with animation

Special thanks to freedomson. This is a simple drop down folding animation.

Item count display

This is new feature that I implemented. It shows child item’s count in the header. Actually, I’ve always wanted to implement this.

Of course these feature are just a optional. You can set the config whether it use or not by singleMode option, animation option, showCount option.

I took the movie to introduce these feature. I’m happy if you watched it.

Social coding, it’s so enjoyable and it gives me a special feature I’ve never thought. Thanks to many friends!

See Also:

Repository:
https://github.com/kawanoshinobu/Ext.ux.AccordionList

Demo:
http://docs.kawanoshinobu.com/accordionlist


関連文書:

Posted by & filed under いろいろ.


Let’s start from scratch by describing the use of having a crash reporting system in your arsenal. A crash reporting system (CRS) provides information like stack trace of the crash, version of the software and other useful informations which provides the developer with enough resources to diagnose and fix the underlying problem causing the crash. Here enters Google Breakpad, a open source multi-platform crash reporting system that allows the distribution of applications to users without the compiler provided debugging information, it records crashes in compact minidump files and can send them back to a server where it is analysed to generate human readable c, c++ stack traces. It is being developed in collaboration by Google and Mozilla. Firefox,  Thunderbird, Google Chrome and Google Earth are some of the projects using Breakpad. It is on the verge of being the first open-source multi-platform crash reporting system. Lets see some intriguing features of its working.

Breakpad works by striping the debugging information from your application. This debugging information is then processed by breakpad’s symbol dumper tool which produces a symbol file in breakpad’s own format. This symbol file is used by the minidump processor to associate the minidump with a proper version of the application. The application is shipped to users along with the brekpad client. When the application crashes breakpad client writes a minidump file which can be sent to some server for processing where breakpad’s minidump processor kicks in and analyzes the minidump to generate a stack trace describing the crash.

Adding breakpad to your project will significantly reduce the burden of bug tracking :o and will ensure smooth maintenance of the software.

For more reading:

http://code.google.com/p/google-breakpad/w/list
https://wiki.mozilla.org/Breakpad

 


関連文書:

  • 関連文書は見つからんがな

Posted by & filed under いろいろ.


Before moving ahead, for all my Japanese friends, here is the youtube video for better understanding.

Year 2013. It really came as a surprise to the open-source community in general. A mysterious developer from God-knows-where, creates a digital currency, a protocol to enable its transmission and software to support it that storms the internet and the real economic world. Satoshi Nakamoto, his pseudonym, suggests that he’s a Japanese. But people who like to dig deep imply his British origin from his style of writing. Mysterious, indeed. But his creation may be the long-awaited revolution of the world economy after the dot-com bubble burst.

Enter Bitcoin.

BitCoins

Bitcoin is advertised as a peer-to-peer version of electronic cash. It allows online payments to be sent directly from one party to another without going through an intermediary financial institution, such as a bank gateway. A Bitcoin transaction is almost like e-mail. The payee has a Bitcoin wallet, which is a software installed on her computer or phone. The wallet has Bitcoin address, which she discloses to the payer. The payer can then transfer Bitcoins to the payee’s Bitcoin wallet. The advantages of Bitcoin are numerous. The transaction is secured by military-grade cryptographic algorithms. So, nobody can fake a transaction or steal your money without having a copy of the your wallet. The transactions are blazingly fast, as there are no banks or intermediaries to slow them down. Bitcoins are absolutely free to send and receive. And they allow anonymous transactions to be made. Pretty neat, huh?

All this seems magically, notoriously perfect. But the good news is, Satoshi Nakamoto, whoever he may be, has been able to create a nearly perfect currency that goes with the spirit of a free and open web. How does it all work? Let’s look at some technicalities.

The user chooses a wallet from many Bitcoin wallets available. A wallet is essentially a software for your computer or phone. At the heart of the entire Bitcoin network sits the blockchain, which is a shared public transaction log. The blockchain contains all confirmed Bitcoin transactions. A transaction of Bitcoins is a transfer of value between Bitcoin addresses. To make the transactions secure and authentic, each Bitcoin wallet uses private keys for each Bitcoin address. Once a transaction has been made between two users, it is confirmed by the Bitcoin network through a process called mining. During mining, each successful transaction is included in the blockchain by a distributed consensus. So, many computers on the network have to agree on the state of the system to approve a transaction. This way, no individual or organisation can affect a transaction.

Bitcoin decentralizes the authority of economic transactions on the internet. People have showed distrust in our existing financial organisations for long. Bitcoin seems to solve the problem by taking the banks out of the equation. By using Bitcoin as an individual, an organization or a developer, you will contribute to the rise of a truly free and open web, where transparency and equality are the buzz words.

More Details :
Wikipedia
Youtube Video


関連文書:

  • 関連文書は見つからんがな

Posted by & filed under いろいろ.


2週間前にインド人が二人、インターンとしてやってきたんだよ。二人はアリエルにくると、コロコロやラジオ体操の洗礼を受けて翌日は筋肉痛になっていたんだよ。アリエルってそういう会社なんだよね。彼らは7月の上旬までアリエルで働いてからインドに帰っていきます。社内ではインド人とは英語で何かやり取りしているみたいです。でも、なまりがあってちょっと大変。

という事で、彼らもありえるえりあでブログを書き始めました。英語だけど、頑張って読んでね。

 


2 Indian guys came to Ariel as intern, 2 weeks ago. Ariel made them to exercise by abs rollers and radio gymnastics, and they got muscular pain for a following few day. Ariel is such a company. They will be working until early in July, and  then go back to India. We talk to Indian guys in Engilish, but it is a little bit hard to listen to their English because of Indian accent.

Anyway, they started “ありえるえりあ” blog in English. Please check it.

 


関連文書:

  • 関連文書は見つからんがな

Posted by & filed under 開発.


After coming so far in technological advancements in computers we have hit the wall for the maximum amount of performance we can extract from a single core cpu and hence the multi core cpu’s have taken the helm bringing into picture the concept of parallel programming, solving many scientific problems which has intrigued a lot of minds in past. But there exists another device which possesses far greater performance in terms of multithreading leading to the democratization of parallel computing, namely the Graphics Processing Unit or the GPUs. GPU Computing has truly brought data-parallel computing to the masses making the massively parallel computing a commodity technology.

The term GPU Computing is the use of a GPU (Graphics Processing Unit) together with CPU’s to accelerate general-purpose scientific and engineering applications. What makes the GPU’s so powerful are its massively multithreaded multicore chips supporting a lot of parallel threads and giving it a edge over CPU’s and making it possible to use GPU Computing in accelerating a range of scientific applications.

GPU computing offers unprecedented application performance by offloading compute-intensive portions of the application to the GPU, while the remainder of the code still runs on the CPU. We use this hybrid, powerful combination because CPUs consist of a few cores optimized for serial processing while GPUs consist of thousands of smaller, more efficient cores designed for the sole purpose of parallel performance. Serial portions of the code run on the CPU while parallel portions run on the GPU.

The implementation of Parallel algorithms on GPUs has been made real easy by CUDA and OpenCL. CUDA (Compute Unified Device Architecture) is a parallel computing platform and programming model created by NVDIA and implemented by the GPU that they produce whereas OpenCL (Open Computing Language) is a framework for writing program that executes across heterogenous platforms consisting of CPUs, GPUs and other processors.

So, supercomputers for masses are no longer a dream but a achievable reality. The only things you need are desire, a little bit of money and a lot of innovation.

More reading, references and getting started Guides:

http://en.wikipedia.org/wiki/Graphics_processing_unit
http://en.wikipedia.org/wiki/Heterogeneous_computing
http://en.wikipedia.org/wiki/OpenCL
http://en.wikipedia.org/wiki/CUDA
https://developer.nvidia.com/get-started-cuda-cc
http://www.nvidia.com/object/SC09_Tutorial.html
http://developer.amd.com/tools-and-sdks/heterogeneous-computing/amd-accelerated-parallel-processing-app-sdk/introductory-tutorial-to-opencl/


関連文書:

  • 関連文書は見つからんがな

Posted by & filed under 勉強会.


先週の金曜日、アスキー・メディアワークス様の会議室をお借りして、第 2 回目の Sencha Touch 2 ソースコード読書会を開催しました。お越し頂いた皆様、どうもありがとうございました!

今回もアスキー・メディアワークス様のご好意で Ustream 中継を実施して頂きました。録画が残っていますので、ご興味のある方はぜひご覧下さい。

codereading

– Ustream 録画

<p><em>There is embedded content here that you cannot see. Please <a href="http://dev.ariel-networks.com/wp/?p=3640">open the post in a web browser</a> to see this.</em></p>

core/lang/Array.js

まずはフレームワークの土台を支えるものから、ということで core ディレクトリのソースコードを読んでいます。前回、core/Ext.js、core/version/Version.js、core/lang/String.js と読み終えたので、今回はその続きの core/lang/Array.js から読み始めました。

splice について

each

forEach

indexOf

contains

toArray

pluck

map

every

some

clean

unique

filter

from

remove

include

clone

merge

intersect

difference

slice

sort

flatten

min

max

mean

sum

erase

insert

replace

splice

core/lang/Number.js

core/lang/Array.js でかなりの時間を費やしたことに焦りつつも、続いて core/lang/Number.js へ。

constrain

snap

toFixed

from

以上で時間終了となりました。次回は core/lang/Object.js から。

Conclusion

今回も実感したのですが、やっぱり、みんなでソースコードを読む作業は楽しいですね。時間があっという間に過ぎていきました。自分一人では躓いてしまうコードでも、みんなの力を合わせることで読み解いていけるからだと思います。ナビゲーターをして頂いた高岡さんの解説もとても心地よいものでした。どうもありがとうございました。

ソースコード読書会は Japan Sencha User Group の個別イベントとして開催していたのですが、次回からは通常の勉強会の一部として開催します。興味が湧いた方は、ぜひぜひ Japan Sencha User Group にご参加お願いします :)

See Also

Sencha Touch 2 ソースコード読書会 第2回@東京 アジェンダ:
http://www.anatomyofsencha.com/touch/2-2/index.html#!/guide/meetup2


関連文書:

Posted by & filed under 勉強会.


おはようございます、開発部 川野です。突然ですが、勉強会のお知らせです。

アリエルでは、自社製品の開発で Sencha プロダクトに大変お世話になっています。具体的には、Aqua Designer という製品(アプリのビジュアルエディタ)に Ext JS を、グループウェア製品のスマートデバイス UI に Sencha Touch を利用しています。

以下の内容で、ありえるえりあ勉強会を開催しますので、参加者を募集します。

===
◆開催日時:
2013/06/07(金) 19:00~20:30

◆開催場所:
東京都港区虎ノ門3-4-7 虎ノ門36森ビル 7階 弊社セミナールーム
アクセスマップ => http://www.ariel-networks.com/company/map.html

◆募集人数:
20人ぐらい

◆内容:

===

Sencha プロダクトの実際の利用例を見てみたい!という方がいらっしゃれば、お気軽にお越し頂ければと ^^

あわせて、私が個人的に興味のある BaaS について、マッシュマトリックスの冨田さんにお話して頂く予定です。アリエルの事例は興味ないけど BaaS の話は聞いてみたい、という方のご参加も大歓迎です!

申し込みフォームは以下の URL です。

http://dev.ariel-networks.com/wp/arielarea-mini-study-5

皆様のご参加、お待ちしています!

– Aqua Designer

baas-1

– グループウェア製品のスマートデバイス UI

baas-2 baas-3

関連文書:

Posted by & filed under いろいろ.


朝来たら、「ありえるえりあ」の見た目がリニューアルされていて、びっくりします。誰が変えちゃったんでしょうね。今回のテーマはちょっとすっきりしすぎな感じもします。

前回からかなり時間があいちゃっいましたが、続きです。実は前回の投稿で終わりにするつもりだったんですが、会社の偉い人から「なぜ、スマフォについては書かないの?」としかられちゃいました。それに、会社の中で変な人感がますます強くなって、いじられキャラになりつつ川野忍からも、「アリエルはSencha Touchを使っているのに、そのことを書いてくれない」って嘆かれています。挙げ句の果てに、自分たちで書いた「HTML5モバイルアプリケーションフレームワーク Sencha Touchパーフェクトガイド」をもっと宣伝しろ、って脅しを書けてきます。全く困ったものです。誰か、川野忍の暴走を止めてください。

前回には、アリエルの開発環境について簡単に書きました。今時のビジュアルなエディタでドラッグアンドドロップで画面をデザインできます。記事には書きませんでしたが、画面デザインは分かるんだけどロジックはどうするの?ってよく聞かれます。アリエルのCTOが「実践JS サーバサイド JavaScript 入門」って言う本を書いているように、ここだけの話ですが、実はアリエルって昔からサーバーサイドJavaScriptを使っていたんですよ。びっくりでしょ。バックエンドはJavaで書かれているんですが、ユーザが開発したものはJavaのフレームワーク上で動作するJavaScriptでロジックを動かせるんです。今はJavaScriptエンジンにRhinoを使っているらしいですが、それは企業秘密です。で、ビジュアルツール上でJavaScriptをごりごり書けるので、いろんなことをやろうと思えばできるらしいです。JavaScriptのエディタは勝手にコード補完とかもしてくれるそうです。開発者はどや顔で話していましたが、今時、当たり前ですよね。

一度、ツール上で作ったものはPCだけじゃなくって、スマフォとかタブレットでも最適な形で表示できるようになります。タブレットは今のところiPadだけらしいです。偉い人に理由を聞いたら教えてもらえませんでしたが、社内ではその偉い人がApple信者らしいという噂があります。

Sencha Touchで作ったアプリにツールが作成されたアプリの設計情報をJSON形式に変換して読み込むそうです。設計情報にしたがってSencha Touchのアプリが動作するようになるそうです。現在はSencha Touchのコードを直接開発者が変更することはできないそうですが、将来的に何かやる、みたいなことを言っていました。それでも、十分簡単にモバイル用のアプリが作れるのは魅力的らしいです。それから、本を書いた人が言っていましたが、Sencha TouchやExt.jsはフレームワークとしてセキュリティの機能を提供していません。開発者が意識しないとクロスサイトスクリプティングが様々な脆弱性を簡単に埋め込めてしまえます。でも、アリエルのツールで作ったものは、Sencha Touchを完全に隠蔽しているので、開発者がセキュリティを意識しないと行けないことはあまりないのも、メリットらしいです。

 

JSONに変換された設計情報をもとにアプリは動作しますが、データはすべてサーバーサイドに保存されます。そのうち、ローカルストレージを上手く活用できるようにしたいと言っていましたが、今のところ大変そうです。でも、上手くサーバサイドと連携することでデータの永続化のことは気にしなくてもよくって、大量のデータを上手く裁けるらしいです。そのあたりの仕組みはとっても複雑で私が聞いてもよく分からなかったです。

何人かの人に、動くものが見てみたいって要望をもらったりしたので、次のありえるえりあミニ勉強会でデモすることにします。何故か、今回からしばらくは自分たちのサイトで申し込みをしてみようと言うことになりました。理由は、WordPressを使ってちょこっとしたものを作りたいんだけど、その調査目的です。とりあえず、Sencha Touchの実際の会社で使っている導入事例なので、気になる人は来てみてください。一緒にマッシュマトリックスの富田さんに「BaaS事業者の外観と特徴、および最新事情」と言うことでしゃべってもらいます。

 

でわでわ

 


関連文書:

  • 関連文書は見つからんがな