iPhoneとPCでメモを共有できるWebアプリ作成

Pocket

iPhoneとPCのデータ同期を手軽に行えるMobileMeですが、残念ながらメモに対応していません。AppStoreも毎日眺めてますが、なかなか満足のいく同期機能付きメモソフトが出てきません。

そこで、当座しのぎとして簡単なASP型メモシステムを作ってみました。単なるPHP + RDBMSを使ったテキスト保存ページなので、iPhoneが圏外の時はアクセスできませんが…

iPhone専用っぽいUI部品やCSSを使って、外観をネイティブアプリっぽく仕上げたのがポイントです。

 

トップページ

トップページ。リストで見えてるのはカテゴリ一覧です。

右上が新規作成ボタン、左上が検索ボタンです。


メモ一覧 

カテゴリを選んで、メモ一覧に遷移したところ。

この画面から新規作成を押した場合、デフォルトで当該カテゴリが選ばれてる、とかいう細かいとこまで作り込みました(^^;)。


閲覧画面

閲覧画面。

PalmやiPhoneの内蔵メモなんかだと、いきなり編集状態になるのが普通なんですが、textareaに入れてしまうとスクロールが大変、というiPhone特有の問題を考慮して、とりあえずフォームにせず全文を表示する閲覧モードを設けることにしました。

写真には映ってないですが、下の方に編集と削除ボタンがあります。実は編集ボタンを押さずとも、textarea自体を触っても編集モードに移行できます。

電話番号、URLは自動的にリンクになります。


編集画面

編集画面。

こっちがtexeareaを使ったフォームです。

閲覧画面と間違えにくいよう、背景色を微妙に変えています。

widthを微妙に調整して、閲覧画面と折り返し位置が同じになるようしてみましたが、完璧にはなりませんでした(画面だと、一番下の行は折り返し位置がズレてます)。

下の方にカテゴリ選択メニューと保存、取り消し(保存しないで戻る)ボタンがあります。

編集中にページを閉じたりSafariを終了しようとした場合にも保存を促すようにしたいなと思っています。

検索画面

検索ページ。

全文検索ができます。


PCで見たところ

PC用のページをOpera9.5で表示させたところ。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)