2011年12月31日土曜日

ノートアプリをつくってみました。

sencha touchでつくったウェブアプリの処女作。ノートアプリができました。
http://taktodtools.appspot.com/noteApp/index.htmlよりアクセスすることができます。
簡単なテキストの編集等が実行できるとてもベーシックなアプリです。

使い方
ファイルメニューに移動します。
するとルートディレクトリが開きます。
右上のボタンを押すと編集モードと選択モードを変更することができます。






編集モードにはいると左上のボタンが追加に変化します。
この追加ボタンをおすと、フォルダまたはファイルを追加することができます。






フォルダを作成し、フォルダを選択すると、対象フォルダに移動します。フォルダから上の階層に戻るには、フォルダを右にスライドしてください。






テキスト入力中に右上の編集ボタンをおすと、保存等を実行することができます。
あと、テキストエリアは、ピンチ(二本指で広げたり狭めたりすること)で拡大縮小がおこなえます。
文字入力中は、スクロールできませんが、ダブルタップで、スクロールのON OFFが実行できます。



とまぁ、こんな感じです。
将来的には、ここでつくったファイルを元にwebアプリを起動したりできるようにして、iPhoneだけでアプリをいじったりできるようにしたり、画像等も扱えるように等したいですね。

2011年12月29日木曜日

開発に必要なもの準備

では、さっそく開発にとりかかりたいと思います。
とりあえず選択するフレームワークはsencha touchでいきたいとおもいます。

では、必要なものを準備しましょう。
・sencha touch(1.1.1(企業用) or 1.1.0(オープンソース版))
・適当なエディタ(文字コード変換ができるとなおよし。)
・webkit系のブラウザ(PC上で確認するならあるとやりやすい。)
・webサーバー(端末上で確認するなら起動しておくと確認しやすい。)
この4つをあつめてください。

・sencha touch本体
http://extjs.co.jp/products/touch/download.phpからダウンロードして、適当なところに解凍してください。
examplesの中にあるkitchensinkは非常にわかりやすいサンプルになります。

・適当なエディタ
開発に利用する適当なエディタを準備してください。
windowsのメモ帳等でも開発できますが、日本語をつかうときにUTF-8指定で動作した方がよいので、文字コードをうまく扱えるエディタがいいでしょう。
僕は、eclipseのjavascript用の開発プラグインをつかっていたのですが、最近はaptana studioに乗り換えました。
フォーラム等によると、webStorm(有償)やnetBeansもメジャーみたいですね。

・webkit系のブラウザ
googleChromeかsafariを入手すると動作確認に利用できます。

・webサーバー
webサーバー(apacheあたり)をPCにインストールしておくと、開発しつつ直接端末でアクセスして動作確認できるので、便利です。

ちなみに僕の環境は
sencha touch 1.1.1 + Aptana studio3 + safari
webサーバーは準備せず、サクラのvpsにアップロードしてから確認するようにしてます。

Webアプリで利用するフレームワーク

Webアプリは、基本的に通常のWebと同じですが、スマートフォン用の拡張命令を使えるところが一般的なページとは異なります。

基本的にJavaScriptを駆使して書けばいいのですが、世の中にはいろいろと便利なフレームワークがありますので、それを利用したいと思います。

今回はそのフレームワークをいくつか紹介しておきます。
僕は一番はじめにつかってみたフレームワークで、JQueryがベースになっています。
そこそこの動作をしますが、テキストエリア等を使うと画面遷移で表示がこわれたり、下にスクロールしてると画面遷移が発動しない等、動作が微妙です。
また、開発メンバーがsencha touchに移ってしまったようですので、今後の更新もあまり期待できないとおもいます。
フルスクリーンで使わせる前提で簡単にぱぱっと使うなら、まぁありかな・・・といった感じ。

いま使いまくってるフレームワークで、ExtJSがベースになっています。動作は重め。動作はいい感じ。テキストエリアはうまく使わないとスクロールできないバグあり。
このブログでは、このフレームワークについて取り上げていきたいと思います。
なお、Webkitベースのブラウザでないと動作しないので、GoogleChromeかSafariを入手しておきたいところ。
また、JQueryを共存させることはできないと思った方がよさそうです。
こういった意味でも、使いにくい独特なフレームワーク
あと、ライセンスも微妙です。いまのところフリーで使えますがサーバー内部でつかうアプリだったら、選択しませんね。
こちらは、バージョンが1を超えていて、正式リリースバージョンになっています。

・jQuery Mobile(http://jquerymobile.com/)
サンプルを見る限りは動作はよさそう。ですが、Webサイトの延長線上といった感じです。
jQeuryを使っているWebサイトの開発者さんにはやりやすいのではないでしょうか。
こちらも、正式リリースバージョンがでています。

Webアプリをつくってみようよ。

スマートフォンを買ったら、いろんなアプリを追加して、使いやすいようにしていきますが、
そのアプリをつくってみませんか?

僕も先日iPhone4sを購入し、いろんなアプリを使っているうちに、ちょっとつくってみたいなと思うようになってきました。
とはいえ、普通にiPhoneアプリを作ろうとするとアップルに99ドルはらって開発プログラムに参加しなければいけませんが、そこまでしっかりやるつもりもないし・・・
もしくは、便利なアプリをつくりたいのに、appleの審査がとおらなさそうなので、なんとかしたい・・・
というあなたに朗報です。
Webページとして、それっぽく動作するサイトをつくるWebアプリの形をとれば、簡単に始めることができますよ。

というわけでWebアプリをつくってみましょう。