僕がよく使っているTODOアプリは、iPhoneアプリでは「たすくま」を使っています。
Webアプリでいうと、toodledoを使っています。iPhoneアプリのtoodledoは使っていません。
今回自作TODOアプリを作ろうと思ったのは、「たすくま」の一括登録がしやすいものが欲しかったためです。
そこで、まずは自分が使うために作ってみました。
ポイント
- Bootstrapを使用
- Webアプリ単位でのクッキー保存
- データ登録の制限機能
Webアプリのデモ
最初の画面です。
今回からログイン時の入力項目に、アプリIDを追加しました。「todo_0011」を入力してください。
こちらから動作確認できます。
ログイン後の画面です。
メニューのTopをクリックしたときの表示となります。
「登録可能フォルダ数」「登録可能タスク数」の表示件数分が登録できます。
メニューの「フォルダ」をクリックし、「フォルダ一覧」をクリックします。
フォルダ名を10件登録します。
FLDR01,FLDR02,...FLDR10
※「フォルダ」か「カテゴリ」か迷いましたが、「カテゴリ」は明確な分け方が必要な感じがしたのに対し、「フォルダ」はtoodledoでも使われており、汎用的な分け方ができる気がしたので「フォルダ」にしました。
フォルダを10件登録した時の画面です。
登録可能フォルダ数が0になっています。
「登録」ボタンが無効になっています。
フォルダの照会画面です（10件登録時）
「複製」ボタンが無効になっています。
削除ボタンを押下します。
フォルダ一覧は9件になりました。
フォルダの照会画面です（10件未満登録時）
「複製」ボタンが有効です。
「複製」ボタンを押下すると、以下のデータが表示されます。
フォルダ名に「（コピー）」が追加されたデータが追加されます。
フォルダの照会画面です（タスクが登録されている場合）
削除ボタンが無効です。
メニューの「タスク」をクリックすると一覧が表示されます。
「一括登録」ボタンを押下します。
タスクをまとめて登録できます。
１行が１タスクで、改行だけや空白だけの場合は無視されます。
登録可能タスク数より多い場合はアラート表示されます。
各フォルダに10件ずつ、タスクを登録します。
例）FLDR01の場合
F01TASK01,F01TASK02,...F01TASK10を登録します。
各フォルダに10件ずつ登録したときのタスク一覧です。
「一括登録」ボタンと「登録」ボタンが無効になっています。
登録可能タスク数は0件となりました。
左のチェックボックスをチェックしたあと、「一括削除」ボタンを押下すると、複数件の削除が可能です。
タスク照会画面
「複製」ボタンは登録可能タスク数が0件の場合は無効となります。
複製した場合は、タスク名に「（コピー）」が追加されたタスクが登録されます。
タスク訂正画面
「チェック日時」の「クリア」をチェックすると、終了日時の「クリア」もチェックされます。
「終了日時」の「クリア」のチェックは、「チェック日時」とは連動されません。
メニューから「候補」をクリックします。
タスクでチェックしていないものが表示されます。
データ3件をチェックします。
「chk」ボタンを押下します。
タスク名の先頭に「*:」がついていますが、iPhoneアプリの「たすくま」に登録したときに、このWebアプリのタスクと認識するためのものです。
メニューからTopリンクをクリックします。
表示されているタスクをチェックすることにより、タスク終了となります。
メニューから「フォルダ」の「フォルダ状態」をクリックします。
ポイント解説など
Bootstrapを使用
以前もちょっとBootstrapを使ってみましたが、今回はもうちょっと踏み込んで使ってみました。デザインが苦手でも、ある程度は整ったユーザーインターフェースなので、使いやすいと思います。
一番いいのは、スマホ対応ですね。
もっとデザインセンスがあれば、かっこよくできるかなぁと思ったりします。
「bootstrap ダッシュボード」で検索すると、かっこいいデザインがあるようなので、使ってみるのもいいですね。
参考サイト
Webアプリ単位でのクッキー保存
今までのクッキー保存は、ログインIDとライセンスコードの２つでした。いろんな自作Webアプリがあっても、クッキーに保存しておけば、入力することなく利用できました。
今回アプリIDを入力するようにしたのは、同じアプリでも、微妙に設定が違うものを使えるようにしたかったからです。
たとえば、お試し用と制限なし用とか。
そんなわけで、クッキー保存もアプリID単位で保存できると、再度ログインのときに便利だということで、変更しました。
簡単にいうと、たとえばログインIDの場合は、login_idだったものが、アプリIDがabcの場合は、abc_login_idの変数にセットする、という感じです。
データ登録の制限機能
以前も件数の制限をつけて登録可能かどうか作っていました。 その場合は、最大登録数の変数を用意し、登録時に最大件数かどうかチェックし、最大に達した場合は登録できないようにしました。
一覧表示の時だけ、登録件数と最大登録数を表示していました。
やはり、制限機能がある場合は、どんな画面でも登録可能数は知りたいと思いました。
そうなると、画面上に常に表示することとなります。
最初は、毎回SQLを発行して件数表示すればいいと思いました。
でも、多数の人がアクセスするとなると、毎回SQL発行は負荷がかかってきます。
件数が変わるのは登録と削除なので、そのときだけ件数を取得すればよく、あとはキャッシュというかセッション変数にいれておけばよいと思いました。
そうなると、それぞれの画面で処理を書くと大変です。
コピペするにしても、ちょっと長いコードだと、修正やメンテが大変です。
ということで、その部分はクラスを作って管理しました。
お試し用
// フォルダ最大数10：タスク最大数100
$g_data = new data_limit(10, 100);
自分で使う用
// フォルダ最大数、無制限：タスク最大数、無制限
$g_data = new data_limit(0, 0);
メソッドを使う場合
$g_data->disp_f()
$g_data->disp_t()
$g_data->init_f()
$g_data->init_t()
$g_data->isMaxF()
$g_data->isMaxT()
$g_data->zan_t()
まとめ
自分で作っていくと、いろいろと改善点がでてきますね。
今度作る場合は、サイドメニューを使ってみるのがいいかも。
今回のWebアプリは、入力項目数は少ないし、処理も複雑ではないので、初心者や中級者はソースを見て勉強になるかもしれません。
といっても、PHPは独学なので、ソース見て「なんだこりゃ！」って言われるかも。。。
PHPスクリプトの「ヒアドキュメント」が便利だと思っているので多用しています。実際のPHP開発ではどうなんでしょう？
というわけで、こちらからお試しできます。
ソースが気になる方は「うたらぼプライム」からお願いします。
★2020年12月1日追記
絵文字が登録できなかったので登録できるようにしました。
★2020年12月5日追記
具体的なデータを登録してみました。
