日々試行しながら未来へ進む


by ogw-m

カテゴリ:開発( 5 )

はじめに

Twitterで、@kayac_designさんのツイートもみていたら、こんなブログ記事を書かれていました。

◆誰でもできるiPhoneアプリのプロトタイプのつくりかた【サンプルつき!】
http://design.kayac.com/topics/2011/01/iphone-prototype.php

おお、これは簡単で面白そうということで、自分もやってみました。

まずはKeynote買う

自分は、Keynoteを持っていなかったので、これを機に買いました。

Mac版のApp Storeで2300円でした。iWorkを買わなくても、Keynote単体で購入できるので、PagesとかNumbersがいらない場合には、お安くあがっていいですね。
e0224347_10452859.jpg


透明な四角形にリンクを付ける

以前、手書きで描いていましたが、動きをつけられるのでそれより楽しいです。

こんな風に、リンクを付けたいところに透明の四角形を置いてリンクをつけると、
e0224347_10592062.jpg


実際にアプリが動いているように見えます。選択している行に薄いグレーを付けているようなイメージ。
e0224347_10595237.jpg


動きをつけていくと、アプリっぽくなってきますね。

最初のモックの説明

1)タスクの選択

メイン画面です。一番上に、現在の時刻と終了予定時刻が表示されています。やはり、これは一番目立つところにあるべきだと考えます。もっとも、終了予定が27時なのは破綻していると思いますが…。

画面左には、各時間帯ごとに絞って表示させるようなボタンというか、タブを用意する予定です。画面下の◯とか△とかは、それぞれが別々の機能を持っているボタンです。それで、一番大きなエリアにタスクの一覧が表示されるエリアがあります。
e0224347_11114399.jpg


と、ここまでは動きはまだ付けていません。動きをつけたのは、「実行済みタスク」という行の部分です。その行をクリックすると、次の画面のように薄いグレーの部分が移動します。この画面で、「タスクの名称」という行のあたりをクリックすると、その行が選択されたイメージで薄いグレーになります。ここは、行き来できるようにリンクをつけました。
e0224347_11221893.jpg


2)タスクのチェック

「タスクの名称」という行が選択された状態で、先頭にある「□」のあたりをクリックすると、現在の時刻が行に記録されるように動きをつけました。まずは上の段の開始時刻だけが記録されます。この時点では、先頭の□にはチェックは入りません。
e0224347_1127451.jpg


そして、タスクが完了した時点で、もう一度「□」のあたりをクリックすると、今度は下の段の終了時刻が記録されます。この時点ではじめて、先頭の□にチェックが入ります。と同時に、行に表示されていた見積時間が15分だったのが、実績の1分に変更されて表示されます。そして、画面上の終了時刻も早まります。
e0224347_11303481.jpg


せっかくなので公開

とまぁ、まだここまでなのですが、せっかくなのでKeynoteのファイルと合わせて公開します。公開場所はやっぱりEvernoteでしょ、ということでEvernoteに公開用のノートブックを作成して、荷物置場にしました。公開用ノートブック作成には、このページを参考にしました。

◆ノートブックをすべてのユーザーに公開するには
http://dekiru.impress.co.jp/contents/036/03631.htm

公開用のノートブックURLはこちら。

◆公開用ノートブックURL
http://www.evernote.com/pub/qpahborzal/shikotrain

KeynoteファイルとPDFファイルの両方とも入れておきました。

さいごに

まだまだつけたい動きがあります。モックをつくって実際にiPhoneで表示させてみて、これだと操作しにくいとかを確認した上でプログラムを作っていけば、後戻りなく作っていけるかなと思います。
[PR]
by ogw-m | 2011-04-03 11:56 | 開発
まだ、中身はこれから作るのですが、
自分のiPhoneに自作のアイコンが入りました。

これだけでも、感動しました。
e0224347_23375622.jpg

今日はここまで。
[PR]
by ogw-m | 2011-04-01 23:39 | 開発
はじめに

遅々として進まない、iPhoneアプリの開発ですが、いざやろうと思ってみると、意外と実際に作る以外の作業があったりします。せっかくなので、どんなところで時間が掛かっているのかを順を追って書き残しておこうと思います。

Macを買う

これは既に解決されていますが、最初にはこのハードルがありました。

iPhoneやiPadのアプリケーションを開発するには、Macが必要です。なぜなら、Macでないと開発できないからです。学生の頃から、Macには触れずにここまで来たので、このハードルは結構高かったです。そのハードルを超えた話をするには、少し昔に遡る必要があります。

2〜3年前、うちの嫁さんのノートパソコンがもう10年位使っていてだいぶガタがきていて、買い換えるという話が出ました。そこで嫁さんは何を思ったのか、Macにすると言い出したのが最初のきっかけでした。その後、嫁さんはMacに移行して、ことあるごとに「Macはいい、Macはいい」と、自分に対して言うようになりました。

自分の嫁さんが使うようになると自分もどんなものか見ることもできるし、触ることもできる。そうしていくうちに、「あぁ、Macに乗り換えてもいいかなぁ」という気持ちが湧いてきました。

ただ、それだけではまだ、ハードルを超えるだけの力を持ちませんでした。最後のひと押しが必要でした。最後のひと押しになったのは、友人からのひとことでした。

その友人は、学生時代のころからの付き合いで、自分が学生のときにいろいろとゲームを考えていたことを覚えてくれていました。そんなこともあってか、「iPhoneでゲームアプリでも作ったらいいのに」と言ってくれました。

このひと言が最後のひと押しとなって、じゃあMacを買おうという決心が付きました。最後のひと押しだけあってもダメで、それまでの嫁さんのMacへの乗り換えとか、それを自分がみていていいなぁと思う期間とかも必要だったと思います。


開発環境Xcodeを入れる

これも既に解決されていますが、これをやるまでに1年位かかっています。ここにもハードルがありました。

このハードルは、要は本気で取り組もうという気持ちになっていなかったのだと思います。特に期限も目標も設けずにいましたので、自分の悪いくせのひとつの「買っただけで満足」に陥っていたのだと思います。そもそも、開発環境を入れなくてもアプリケーションの構想などは作れたりしますが、最終的には開発環境を整えないとアプリケーションをつくりはじめることができません。何も考えずにインストールにとりかかればいいものの、ずっと先延ばしにしていました。

そんななか、1月からスピードハック研究会という会に参加をしています。その中の課題で、3ヶ月後の目標を掲げるというものがありました。1月の時点でTaskChuteというタスク管理ツールを使っていた自分は、このツールをiPhoneでも使いたいという思いを持ちました。そこで、3ヶ月後の目標として「TaskChuteのiPhoneアプリを作る」としました。

そう目標を設定したことで、改めて開発環境を構築することが必要だと認識しました。しかし、開発環境をインストールするのにも、準備が必要でした。Appleの開発者用Webサイトで、開発者登録をしないと、開発環境が入手できませんでした。まぁ無料だし、開発者登録を行い、開発環境をダウンロードしました。

実際に開発環境を自分のMacBookで動かしてみると、それだけでもわくわくしてきます。iPhoneのシミュレータがついていて、これまた付いている画面のデザインツールでデザインした画面がシミュレータ上で表示されます。特にコードを書かなくてもここまでは楽しめるし、Macを持っていれば特にお金はかかりません。さっさとやればよかったのに。

そうなると今度は自分のiPhoneで自分が作ったアプリを動かしてみたくなります。しかし、よくよく調べてみると、自分が作ったアプリをiPhoneにインストールするには、有償のApple Developer Programに入らないといけないということがわかりました。

Apple Developer Programに入る

このプログラムは年間契約で、年間約1万円になります。

まさか、有償のプログラムに入らないと自分の持ち物のiPhoneに自分の作ったアプリケーションをインストールすることすらできないのかと驚きました。驚きましたが、そうした取り組みをすることで安全な世界を作り上げているのだな、と理解しました。理解しましたが、お金がかかるのでちょっとだけ考えました。

でも、考えても仕方がないです。iPhoneアプリを作るためには、どうしても避けられない出費です。ここまでいろいろと時間をかけて、MacBookを買うお金もだしてまでやろうと決めたことなのに、ここでこの出費を惜しんでやめるのは馬鹿馬鹿しい。そう考え、このプログラムにお金を支払うことにしました。

そしたら、送られてきたActivation Codeが使えないという問題が発生しましたが、どうやらGoogleで調べてみるとよくあることみたいなので安心して、慣れない英語での問い合わせメールをAppleに送ったのが今日の午前中の出来事です。

まぁ、実機にインストールしなくてもシミュレータ上でアプリの動作は確認できるのだから、それでつくりはじめることもできるのですが、やはり実機で随時動かしながら開発していきたいのです。

さいごに

なんだか、言い訳のオンパレードみたいですが、やりたいと思ったことをやるには準備が必要だということが言いたいことです。あと、やりたいと思ったことを成し遂げるには、相当の根気が必要だということを改めて知りました。いろいろな問題が発生して、それに根気よく対処していかねばなりません。その根気のためには、自分だけの力ではたぶん「ま、いいか」となってしまってダメな気がしていて、誰か他の方にも興味を持ってもらうことが必要なのだと思いました。
[PR]
by ogw-m | 2011-03-21 16:34 | 開発
懲りずにまた画面イメージを手書きで書きました。
ショットノートです。Mサイズのやつです。

前回はメイン画面と詳細画面と2つの画面を書きましたが、今回はメイン画面のみのイメージです。全てのタスクが2行表示だと前後の見通しができないかと思ったわけで、選択タスク以外は1行表示にしてはどうかと思った次第です。全体を見通せるのはタスクシュートでは大事なことかと思ってますので。

見積時刻インジケータ(仮称)

自分的に外せないなというのは、常に終了予定を意識できるように、一番良く見えるところに終了予定を表示しておくことです。これは、詳細画面とか設定画面とか、このアプリのどの画面を表示していても表示させておこうかと思ったりしています。終了予定を常に意識するために。

あと、終了予定を意識するからには、自分自身の目標としている終了予定があるはずです。自分は、仕事での目標にしている終了予定は18:00ですし、オフの時間では24:00です。これは人によって当然違うかと思いますし、同じ人でも場面場面で違うかもしれませんので、設定でできる項目にしておきたいです。

間の三角の矢印は、見積時刻インジケータとかカッコよく呼んでみます。これは、2つの意味を持たせようとしています。

1つめは「色」で、目標にしている終了予定時刻に大して、現在の終了予定がちょうどいいのか、超過しているか、まだ詰め込めるのかを示します。まだ詰め込めるなら「青」で、目標を超過しているなら「赤」です。赤くなったら、組み直しタイミングですね。青なら青で、まだ詰め込めるので、組み直しのタイミングかもしれません。

2つめは「三角の数」で、これは今のタスクを進めるに当たって、タスク単位の見積時間とそれに掛けている現在の時間から、そろそろマキ気味でやった方がいいかどうかを教えてくれるものです。三角がひとつは、まだ余裕。三角がふたつも、まだ大丈夫ほぼ見積通りであれば、ふたつまでです。見積時間を超えると三角がみっつになって、マキでお願いしますと教えてくれます。ひとつのタスクでマキになると、おそらく終了予定が遅くなるので、インジケータの「色」も変わるでしょうし、次に続くタスクでは、いきなりマキでお願いしますと言ってくるかもしれません。

実行済みタスクは実績時間を表示

未実行のタスクでは、非選択タスクは1行で表示されたときに見積時間を表示しますが、実行済みのタスクは実績時間を表示します。見積時間よりも短く実施できたときには「青」で、見積時間より長かったときには「赤」で表示します。詳細な情報は、詳細画面でみることができます。メイン画面の非選択行は、実績(見積)時間だけ表示します。選択行は、開始時刻と終了時刻の実績も見ることができます。

時間帯タブ

メイン画面左には、時間帯タブを表示します。各時間帯のタスクのみを表示させることができます。また、時間帯タブの色で、その時間帯の埋まり具合を色で示します。「青」はまだ余裕がある、「赤」は3時間を越えています。

また、実績時刻の記録のときに間違ってタブを触っちゃって時間帯が変わっちゃうと嫌なので、タブをダブルクリックすると現在開いているタブだけを表示させてロックします。ロック解除するには同じくタブをダブルクリック。

選択タスクでできること

タスクを選択するとそのタスクのみ2行表示になり、少しタスクの情報が追加で表示されます。選択時に表示される情報としては、「見積時間」はそのままで、「開始時刻」と「終了時刻」の実績と、「プロジェクト名」の情報、タスクを並び替えるときのための「整列番号」が2行目に表示されます。(そんなにたくさん表示できるかな?)

また、選択時にはタスクにボタンが2つ追加されます。「時刻チェックボタン」と「詳細ページ表示ボタン」です。「時刻チェックボタン」は、そのタスクの開始時刻と終了時刻をチェックするためのボタンです。開始時刻が記録されていなければ、開始時刻を記録し、開始時刻はチェックされているなら、終了時刻を記録します。「詳細ページ表示ボタン」はそのタスクの詳細情報をみる画面へ移動します。

選択タスクに対しては、画面下の各機能ボタンが機能します。「編集ボタン」は、タスク情報の簡易修正ボードが表示されます。「追加ボタン」は、選択タスクの下に新規タスクを追加します。「複製ボタン」は、選択タスクをコピーして、同じタスクを下に追加します。「移動ボタン」は選択タスクをドラッグ&ドロップして、任意の場所に移動します。「設定ボタン」は、設定画面に移動します。

「編集ボタン」を押すと簡易編集ボードが画面右に表示されます。ここでは、選択タスクの「見積時間」「整理番号」「時間帯」が変更できます。また、再度編集ボタンを押すまでは簡易編集モードになっていて、他のタスクを選択して、簡易編集をすることを続けてできるようにします。これで、スピーディーなタスクの組み直しができると思います。

「追加ボタン」を押すと、ポップアップで「タスク名称」と「見積時間」を入力する画面が表示されます。その2つの情報を入力すると、選択したタスクの下に新規タスクが追加されます。

「複製ボタン」「移動ボタン」「設定ボタン」については、まぁその通りです。

e0224347_22141714.jpg


さいごに

このアプリの名前はまだ仮称ですが、ライフトレインとしています。レールに従って進むといえば、すぐに思いつくのは電車なのでトレイン。電車は、いくつかの車両を伴ってレールをダイヤ通りに走ります。車両はタスクですね。タスクが繋がっている様が電車のようなイメージと重なります。

最初はタスクとしようと思ったのですが、自分はオフの時間で使うことになると思うので、基本楽しいことに対してタスクという言葉はどうだろうと思い、ライフにしています。イメージではタスクってなってますが。

なんか、どんどん自分で使いたくなってきました。
[PR]
by ogw-m | 2011-02-19 22:15 | 開発
TaskChuteが好きです

昨年の年末まで、会社の作業記録を数年間付けていました。
そんななか、たまたまWebページをみていたところで、昨年末のシゴタノ!さんのセミナー、
「2011年を変える6時間セミナー/スピードハック総決算」
を受講させていただき、その中でタスクシュートという考え方と、TaskChuteというExcelのツールについて知り、学びました。

Excelで作られたツールということで、これは会社でも使えると思い、早速会社でも使おうと思いました。そして、その次の週の月曜から会社でTaskChuteを使い始めました。

もともと、Excelで作業記録を付けていたこともあって、ExcelのツールのTaskChuteにはすぐに馴染みました。会社で仕事をしているときにも、違和感がありませんし。

単純にExcelで作業記録を付けているときと違って、すぐにその効果を感じ始めました。一番大きかったのは、終了時刻を意識できることです。

単純に作業記録を書いているだけでは終了の予測は立てようがありませんが、TaskChuteは違います。見積時間を入れますので、終了予定が自動で出てきます。

これが新鮮な感覚でした。
自分は基本残業はしないで帰ろうと考えているのですが、定時刻では周囲は動かず、その中で自分だけ帰るのは、やや抵抗感がありました。
まぁ、それでも帰ってはいたのですが。

その抵抗感がTaskChuteを使い始めてからなくなりました。
「自分は自分のなすべきことをやった。だから帰るんだ」
と、自分を納得させて帰ることができ、すっきり帰れるようになりました。

あと、ルーチンとしている明日以降のタスクも決まっていったり、未来に予定を入れやすくなったりといろいろと別のいいこともありましたが、またそれは別の機会で。

そんなTaskChuteをオフの時間でも使おうと思いましたが、ハードルが高かったです。

More
[PR]
by ogw-m | 2011-02-15 22:04 | 開発