2008年10月07日

全体的に驚き男です。Webアプリやばい。


 簡単に言うと、iPhoneのWebアプリがオフラインでも動作するようになりました。


オフラインキャッシュが実装されているっぽい



 
 いつも参考にさせてもらってるiPhone 3G Wiki blogさんでiPhoneOS2.1からsafariにオフラインキャッシュが実装されているとの情報がありました。オフラインキャッシュはHTML5で提供されるオフラインWebアプリケーションAPIのひとつです。

iPhoneSafariにアプリケーションキャッシュが実装されている件

HTML5のOffline Web applicationsとは、リソースファイルの定義を行うmanifestファイルをWebサイトに設置しHTMLファイルのヘッダ部分にそのmanifestファイルへの参照を記述することにより、ブラウザがキャッシュを利用したり、オンラインファイルを参照しに行くという処理を行うものです



ローカルストレージ
*オフラインキャッシュ

 この二つが揃ったことで、iPhone向けのWebアプリはオフラインでも動作することになりました。アプリケーションの記述言語としてのHTML5が本気を出し始めてきた感じですね。

 モバイル分野でAdobeやMicrosoftに先手を打てたことは、HTML5勢にとって大きいんじゃないかと思います。Androidに搭載されるWebkitも同じバージョンであるならば、AndroidにGoogleGearsが搭載されているという情報が見つからないのも納得です。WebKitはもう単体でWebをオフラインに運ぶ箱船なんですね。


Webアプリはじまったな



というわけで、Androidの発売前にWebアプリのオフライン化を可能にしたWebkit勢はよくやったと言うしかないですね。まぁ金にならない無料アプリはWebアプリで作らせてiPhoneとAndroidでシェアしましょうという姿勢が見えなくもないですが、多くの開発者にとってオフラインWebアプリケーションの実現は朗報だと思います。


 GPSやアップロードを使わない無料アプリはほとんどiPhoneとAndroidに流れることが予想されます。その資産を狙ってさらにiPhone規格の画面、Webkitベースのブラウザを搭載した端末が登場するっていうシナリオも現実的になってきたんじゃないでしょうか。


はじまりすぎてて全然寝れる気がしないです><






hayashi311 at 02:40コメント(2)トラックバック(0) 

2008年09月24日


Android


Google主導のモバイルOS Android が遂に発売になりました。



まだまだな点も多いのでしょうが、素直にほしいと思わせるOSだと思います。Googleは情報がどうあるべきか理解してますね。


Web周りで気になった点をいくつか



*iPhoneと同じ480 x 320 ハーフVGA
*ブラウザはWebkitベース
*マルチタッチはなし
*Flashの動作は可能(ストリートビュー等)。ただし、一般のサイトでは未対応。


Gears搭載という情報を見つけられなかったのですが、当然搭載してくるだろうと予測していただけに気になります。Flashの制限に関しては、これはもうAdobeをモバイルから閉め出す気満々ということなんでしょうかね。Webアプリがオフラインに進出するプラットフォームはHTML5であってAirではないというGoogleのメッセージなんじゃないでしょうか。

マルチタッチは端末側の制限?どうせくだらないこと(くぱぁとか宮藤芳佳をくぱぁとかおっぱいとか)にしか利用されないので、これは妥当な判断だと思います。

解像度もレンダリングエンジンもiPhoneに合わせてきたということは、既存のiPhone向けサイトを利用する気満々ですね。GoogleのサイトはちゃんとiPhone対応されていて素晴らしいと思っていましたが、どうやらAndroid対応をしていただけだったようです。

今後、少なくともアメリカでは、iPhone規格(480x320-webkit) がモバイルに最適化されたサイトの標準になりそうな感じですねー

動画で見る限りブラウザの出来が少し気になります。アップデートに期待したいところです。safari搭載すればいいのに。


iPhone規格のサイト



iPhone規格のサイトを作る場合、Android対応も視野に入ってくると思います。気を付けなければいけないのはたぶん2点だけ。

マルチタッチが使えない
(キーボード操作をよく使うので)横画面対応は必須

つまり、Googleみたいなサイトを作ればいいんですね!


G1について


g1officialnewnew
ださい。超ださい。早く日本のメーカーはハイスペックでかっこいいAndroid端末を世界中に見せつけてあげるべきです。Androidをこのちゃっちい端末から解放してあげてください><

hayashi311 at 13:25コメント(3)トラックバック(0) 

2008年09月08日

 ここ最近、iPhone向けWebアプリは放っておいてiPhone向けネイティブアプリを作ってたので、雑感を書いておきますね。Twitter見ながら書いたので日数は適当です。


〜0日:経緯


 もともとjavascriptとかPHPとかやって遊んでました。Cとか分かりません。フレームワークとか使ってぬるくプログラミングしている現代っ子です。
 iPhone向けのWebアプリとか作ってたのですが、ついうっかりiPhone向けネイティブアプリを作りたくなってしまいました。とは言っても、Macを持っていない上に、わざわざこのために買うお金も度胸もなかったので、

iPhoneのネイティブアプリが作りたくてMacbookをとりあえず買った*タムケンブログ
iPhone向けの何かをとりあえずやりたい方いらっしゃったら勉強がてら手伝っていただけると涙を流して喜びます。開発環境とiPhone実機と普通のお給料とお昼ご飯くらいはどうにかなると思うので夏休みの暇つぶしなどに是非。

 
というわけで学生ベンチャーのモバキッズに転がり込んでます。

1日目:Mac



 この日初めてMacを本格的に使いました。Windowsとの細かい違いに悶絶しながら、『Objective-C 2.0』を読みつつ、Hello Worldをいじってみる。なんとなく分かったけど、自分じゃ作れないよねっていうレベル。(後になって、なんとなくも理解できてなかったことが発覚><)


2〜5日目:Objective-C



 『Objective-C 2.0』にif文の書き方も書いていないのでサンプルを見てみていたら、Cを覚えないと始まらないことに気がつく。Cを覚えた上でNSobjectとかメッセージとかそんなのを覚えとく必要がある。さらさらと表面をなでるように勉強。

 とりあえず最初にメッセージの書き方を覚えればいいと思います。

-(NSnanchara *)tekito-na_hennsuu:(NSURL)xmlurl

 こんなフレームワーク側(?)が用意してくれてるメソッドが資料にいっぱい載っているのですが、メッセージの書き方が微妙だとさっぱり動きません。また、NSobject以下用意されているオブジェクトが使いにくすぎて、もう全部Cでいいじゃん!という気持ちになりますが、そんなことはないので理解してあげるといいと思います。配列関係はもう少し使いやすくなるといいなーという気はします。

 
 Objective-Cのメソッドはそれはもう変態的に長すぎて、文字列を連結させるのにも一苦労するくらいなので、CocoaプログラマはドMなの?とか思っていましたが、入力補完が快感になってきた僕も立派なMです。


5〜9日目


 
 ここに来て、NSobjectクラスを継承してるNS系クラスのインスタンス(=オブジェクト)が便利すぎることを発見。選択して右クリック(右クリックができないOSがなくなって良かったですね!)で『APIリファレンスのなんたら』見たいなのを選ぶとリファレンスが出てきて、いろいろ組み合わせると、なんとなくいろんな機能を実装できる。
 個人的にはXpathが使えたのがうれしかった。

 しばらくいじってると、やろうと思っていたことが全部できてしまった。

 この頃になるとXcodeのちょっとした心遣いに癒される。ファイルをコードの中に突っ込むと絶対パスになるとか。「そう、そうしたかったんだよ!」っていう機能がわりと多い。空気読める子。


9〜15日目(今)



 Interface Builderをちゃんと使おうと思ったけど、すぐに挫折。うにょーって引っ張るところがあるんですが、気がつくかよ!っていうようなUIで、間違った『直感的なUI』だと思った。Appleは直せばいいと思うよ。ま、本には普通に書いてあるんですけどね。

 サンプルをじっくり見ると分かるのですが、iPhoneアプリに関してInterface Builderはあってないようなもの。むしろ邪魔なんじゃないかという気さえします。

 そもそもInterface Builderは『基盤となるUIがあり変化しても少し』、というGUIを設計する時に威力を発揮するアプリケーションです(たぶん)。iPhoneアプリでよくある、小さい画面の中で次々にUIを変化させるアプリでは、結局コードの中からボタン等を生成することになり、それなら最初からIBいらないよ><っていうことになるんですよね。

 さらにイケてないことに、あらゆるスタイルはコードの中に書かなければいけません。CSSが欲しくなりますね。おかげで、デザインにこだわり始めるとぐっちゃぐちゃになる可能性大。本当は回避する方法があるのかな?

 悪いことだけではなくて、TableViewっていうのがiUIの本物なんですが、このTableViewの設定はメソッドを作ってその返り値で表現します。これがなかなか使いやすい。


 いままでUIはHTML+CSS+javascriptしか経験したことがなかったので、個人的にはかなり刺激を受けました。Webアプリを作るときは似たような概念で作りたいなーとかいろいろ妄想中。


まとめ



Web系のプログラミングしかしたことがない人が0から勉強してiPhoneのネイティブアプリを作ると、こんな風に進んでいきますよっていう、お話でした。なんかの参考になれば幸いです。

でも、読み返すと文字ばっかで超読みにくいですね><

hayashi311 at 01:24コメント(0)トラックバック(0) 

2008年08月16日

iPhoneユーザーの皆さんこんにちは!

また変なのつくりました!iPhone向けの画像しか見れないRSSリーダーです!超ニッチです!

画像をメインで吐いてるRSSって割とありますよね。そんなRSSから画像だけを取り出して眺めることができます。Webアプリなのに、ネイティブの写真アプリみたいな動きをしますよ。


何を言ってるのか分からないと思うのでDEMOと動画を置いておきますね。

DEMO(iPhone/touch):http://imgrss.hayashi311.com



iPhone2.0でのみ動作を確認しています。docomo2.0での動作は保証できません!反撃お願いします!


使っているのは

*CSS3のアニメーション(軽い、移動とか透明度とか!)
*Ajax
*PEARのXML_RSS
*サーバーとクライアントのやりとりは簡単なのでjson

とかとか

 後は、次の画像が読み込まれたタイミングで画面を移動させるのにちょっと苦労しました。画像自体は2つのDiv要素でうまくやりくりしてます。

 ネイティブアプリほどスピードはでませんが、Webアプリでサーバーから画像を持ってきていることを考えれば、まぁ悪くないスピードだと思います。

 とりあえず、RSSはみんな大好き beauty image bookmarking の『4u』さんから借りてきています。リクエストがあればコメント欄まで。

バグ・課題


余裕でバグや課題が山盛りなので気を付けてください。

*50枚目くらいで動かなくなるときがある。
*画面を擦りすぎるとバババってなる。困る。

*転送量がやばい。3日(開発で)使ったら40万かかりました。回線圧迫すること間違いなしです。

ローカルストレージ使ってなんとかできないかなー。一つ目のバグは原因を突き止め中です。アクセス中はフリックをしなければそこそこうまく動くみたいです。

これから



ないとは思うけど、サーバーが持たなかったらアクセス制限かけるかも。貧弱レンタルサーバーなのでちょっと不安です。


画像特化のRSSリーダーの裏


これから書く予定。

*CSS3でアニメーションをするnew!
*フリック・クリックを一括で管理する
*div要素二つで無限ループ

こんなところ。あと作りながら思ったこと。

*HTML5はアプリケーションを記述するための言語なんだなぁ

書くか分かりません。でも、すごく感じた。


おまけ



このアプリのWebClipは、デフォルトでインストールされてるカメラアプリと対になって顔になります。
e83efcf9-9c01-4203-8746-d3e224d29e93
こんな感じ。

おまけ2



並べてみた
92fb0fb5-5f7f-47e8-85bd-41fb28ee8fbd

おまけ3



調子に乗って針金を巻いてiPhoneお化けを作ろうとしたら、針金で傷が付いて完全に萎えた。
P1020016

まとめ


CSS3すごい!軽い!PCと同じように非同期とか平気でやっちゃうあたり、iPhoneすごい!確定前料金やばい!

タイトルはホッテントリメーカーです!dankogaiはマッチョなのでこのくらいで驚きません!


追記:同じものを作ってる方がいました!みんな考えること同じですね!

http://d.hatena.ne.jp/yositosi/20080817/p1[iphone]女の子画像ブックマーク「4U」をiPhone対応させてニヤニヤしてみた

hayashi311 at 08:00コメント(5)トラックバック(2) 

2008年08月02日

 とりあえず、要点&つまずいたところのメモを晒します。



 IPはなんでもいいけどよく分からない人はおとなしく同じIPを入れればいいと思います!



まずiPhoneとPC間で無線LANのアドホック接続を行います。


接続>ワイヤレスネットワーク接続 を右クリックからプロパティ

全般の中のこの接続は次の項目を使用しますの中からインターネットプロトコル(TCP/IP)を選択して、すぐ左下のプロパティをクリック。

IPアドレスに 192 168 10 2
サブネットマスクに 255 255 255 0

ワイヤレスネットワーク接続のプロパティに戻ってワイヤレスネットワークタブを開きます。

追加>ネットワーク名を好きに設定 パスワードを設定してOK

ワイヤレスネットワークタブの詳細設定からad hocのネットワークのみにチェックを入れて、「優先でないネットワークに自動的に接続」のチェックをはずす。

これでワイヤレス接続にPCが二つ並んだ接続が現れるのでクリックして接続を開始します。


iPhoneに移ります。
設定>wifiでオンにするとさきほど設定したものが出てくるので(>)をタップ。

IPアドレスに 192 168 10 1
サブネットマスクに 255 255 255 0

これで上で設定したパスワードを入力するとアドホック接続は通るはず。


またPC。

firefoxでの設定はツール>オプション>詳細>ネットワーク>接続設定

 で、SOCKSホストの欄にだけNetShareに書かれているProxyIPとPortを入力します。socks5vにチェックを入れてください。

NetShareを立ち上げてfireroxでアクセス!


追記:safariではアクセスできたということを書かれていた方がいました。参考までに。



リンク集

adhocの説明by microsoft


20080802iPhoneでWi-Fiを3Gへproxy Windows接続編(NetShareアプリ)

[iPhone 3G] 話題のNetShare Windows使用方法


 漏れや間違い、読みにくい点等あるかとは思いますが、とりあえず晒します!夕方以降に他の人がまとめていなければきれいにまとめるつもりなので、分かりにくい点、間違っている点等あれば指摘してください!

追記:めんどくさいのでやめました!

 尚、ご利用は自己責任でお願いします。

hayashi311 at 12:58コメント(1)トラックバック(1) 
Twitter
記事検索
QRコード
QRコード
  • ライブドアブログ