2009/10/19

ET withwithをまとめて解説

ここ数日怒涛のように作って来たET withwithなるアプリですが、実際のサイトは僕の仕事の情報が既に多数入力されているのであれなので、キャプチャ見ながらどんな感じかちょっと解説しようと思います。技術的な話はなるべく少なくなるようにします。

トップ画面

withwith_top

トップ画面では直近の20件のログが一覧表示されます。上部にある「Pick」は絞り込み機能、「Search」はキーワード検索機能です。テーブル左の「ビジネス」や「ET」をクリックすると、それぞれ絞り込んだ一覧画面にリンクしています。

新規投稿画面

withwith_add

新規の登録はカテゴリとクライアントをプルダウンで選んで、その他の項目をフィールドに入力し、時間を選ぶというスタイルです。作業が終わったタイミングで入力する時は、今の時間がデフォルトなので、そのまま「Submit」しちゃえばよいです。

カテゴリ / クライアント管理画面

withwith_category

上はカテゴリの管理画面ですが、クライアントも同様です。自由に追加、編集、削除することが可能です。

キーワード検索機能

withwith_search

右上の入力フィールドにキーワードを入れて「Search」してやると検索が可能です。「Client」と「Title」と「Content」を検索対象にしています。

絞り込み機能

withwith_pick

これがちと難渋したのですが、カテゴリとクライアント、それに期間を組み合わせて絞り込みができます。上の例は10月13日から10月17日までの期間に行われたETの業務、ということになりますが、期間だけ、カテゴリだけで絞り込みもできますし、全部の条件を組み合わせて絞り込むことも可能です。

withwith_datepick

日付の入力はjQuery UI Datepickerでカレンダーが表示されるのでラクチンです。

iPhone版

ET withwith with iPhone

iPhoneで使いやすいように、デザインをCSSでカスタマイズしています。やはり業務はあったその場でログを記録したいですから、iPhone対応は必須でした。

ET withwith with iPhone

iPhoneでレイアウトし易いことを前提としてWEB版のコードの書き方を工夫しました。すっきり見れると思います。

ET withwith with iPhone

iPhoneのホーム画面からこんなアイコンで起動します。うちのロゴがいい感じです。

とまあ、偉そうに書いていますが、5日くらいで作ったアプリなので、独自部分はそんなに多くないです。CakePHPというフレームワークとjQueryというライブラリに大いに助けられていて、僕のようなノン・プログラマーでも何とかそれなりになったみたい、という感じです。ゆっくり時間をかけて取り組んでみたい気もしますが、なかなか三十路手前でここからプログラミングの世界にどっぷり浸るというのもあまりリアリティないと思っていますが、最低限のものは作れるんだな、ということが確認できたので良かったです。

後はやっぱり今色々便利なWEBサービス出てきてますが、自分の業務の性質に最適なツールって必ずしも出揃っているわけじゃないと思うんですよね。たまたま今回、僕にとって必要なツールがシステム的にシンプルで、開発環境も優しいものが普及していて、インターネット上に簡単なものを作るのには十分な情報がたくさんあった、から役に立ちそうなものが作れたんだと思います。勉強になったし、ちょっとこれから色々これを使ってまた試行錯誤を続けていきたいなあと思っています。

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください!
Twitter / Instagram

(2012-10-5)
売り上げランキング: 14,705
100円