HTML5」カテゴリーアーカイブ

iPad手書きアプリ「Noteshelf」向け能率手帳風テンプレートを作ってみました

膨大な数のiPadアプリの中でも、Must-Haveなものの一つとして定評のある手書きアプリ「Noteshelf」。とにかく書き心地がよくて、本当に癖になります。でも、ここ一年程セキュリティーの厳しい職場だったためスマホやタブレットなど録音や録画、撮影が可能なデバイスは休止して所謂システム手帳を使っていました。能率手帳Bindexから出ているDiaryリフィルをひさしぶりに手に入れて使ってみましたがこれが素晴らしい。「Noteshelf」に戻れなくなるんじゃないかと考えた程でした。

そこで「Noteshelf」と「能率手帳」風Diaryの好いとこ取りをしようと、能率手帳風「紙のスタイル」の元データをHTML5+CSSで作成してみました。

標準の「紙のスタイル」の中にも「日程表」が提供されていますが

「日程表」という「紙のスタイル」が元々提供されており、これでも大丈夫そうですが、やはり使い慣れたものがいいですよね。HTML5+CSSで作成してみました。

能率手帳風Diary表示ページはこちら

スリム版はこちら。1ページにメモとスケジュールを収めました

スリム版V2はこちら。複数日のPDF出力のため基準日と日数を指定できるようにしました
スリム版V2の2017年版はこちら。2017年元日から365日分表示します。印刷にPrimoPDF等のPDF出力アプリを使えばNoteshelfで使えます
スリム版V2の当月分はこちら。ただし31日分でるので変更するときはURLのパラメータを変えてください

月間目標版はこちら。2015年と2016年があります

日付部分のみ一週間分表示はこちら

左上にある日付の場所をタッチすると日付選択ができ、右上や左上にある日付に関連する表示を変更してくれます。能率手帳風Diaryの左ページ(メモ用)と右ページ(スケジュールやチェックリスト)を一度に表示します。iPad等で画像を取り込むときは、左右のページをそれぞれ取り込むか、横向き使用を想定して一度に取り込むかします。

iPadでの表示テストは初代iPad-miniを使用しており、新iPad-miniを含み歴代の標準サイズのiPadでは試していません。解像度の関係で表示結果がまちまちになるかも知れません。

iPad手書きアプリ「Noteshelf」への取り込み方法

ステップ1:iPadで上記ページにアクセスしてDiaryページを表示する

ステップ2:電源ボタン+ホームボタンの同時ONでDiaryページの画像を保存する

ステップ3:「Noteshelf」アプリを起動して

ステップ4:「ノートの新規作成」(書棚モードの右隅にある「+」を丸で囲んだアイコンをタッチ)

ステップ5:「ノートをカスタマイズ」の上段を「すべてのスタイル」から「カスタム」に変更

ステップ6:スタイルの新規追加でステップ2で保存した画像を設定する

カスタム「紙のスタイル」にはダイナミック表示の機能がない

カスタムスタイルを作ったのはいいのですが、自分であれこれ使ってみて、カスタム「紙のスタイル」にいちいち登録して使うのは根気が必要だと感じました。もちろん、日付部分を空にして手書きで入れればいいのですが、それだと「日程表」と変わらなくなり、ちょっとつまらない。

ストアで探せばいいのかな?

やはりダイナミックな「紙のスタイル」というのは原理的に難しいのでしょうね。しばらく使ってみていろいろ工夫してみようと思います。

DropboxなどからPDFを読み込む方法もあるようです

Noteshelfではテンプレートを使ってノートを作成する方法のほかに、DropboxなどからPDFを読み込む方法があるようです。これだと複数ページにわたるテンプレートのように使うことができますね。
スリム版をH29年分でまとめたPDFはこちら
スリム版をH29年12月分でまとめたPDFはこちら
スリム版をH29年11月分でまとめたPDFはこちら
スリム版をH29年10月分でまとめたPDFはこちら
スリム版をH29年9月分でまとめたPDFはこちら
スリム版をH29年8月分でまとめたPDFはこちら
スリム版をH29年7月分でまとめたPDFはこちら
スリム版をH29年6月分でまとめたPDFはこちら
スリム版をH29年5月分でまとめたPDFはこちら
スリム版をH29年4月分でまとめたPDFはこちら
スリム版をH29年3月分でまとめたPDFはこちら
スリム版をH29年2月分でまとめたPDFはこちら
スリム版をH29年1月分でまとめたPDFはこちら
スリム版をH28年12月分でまとめたPDFはこちら
スリム版をH28年11月分でまとめたPDFはこちら
スリム版をH28年10月分でまとめたPDFはこちら
スリム版をH28年9月分でまとめたPDFはこちら
スリム版をH28年8月分でまとめたPDFはこちら
スリム版をH28年7月分でまとめたPDFはこちら
スリム版をH28年6月分でまとめたPDFはこちら
スリム版をH28年5月分でまとめたPDFはこちら
スリム版をH28年4月分でまとめたPDFはこちら
スリム版をH28年3月分でまとめたPDFはこちら
スリム版をH28年2月分でまとめたPDFはこちら
スリム版をH28年1月分でまとめたPDFはこちら
スリム版を12月分でまとめたPDFはこちら
スリム版を11月分でまとめたPDFはこちら
スリム版を10月分でまとめたPDFはこちら
スリム版を9月分でまとめたPDFはこちら
スリム版を8月分でまとめたPDFはこちら
スリム版を7月分でまとめたPDFはこちら
スリム版を6月分でまとめたPDFはこちら
スリム版を5月分でまとめたPDFはこちら

関連する記事・ページ

お世話になったリンク

以上です。

流行りのフレームワークで作りました!「暗記の井戸クラウド」をβリリース

Javascript(jQuery)のMVCフレームワークというのか、いわゆるBackbone.jsと、アプリケーションサーバが不要なCakePHPを組み合わせた「暗記の井戸クラウド」をβリリースします。

スマホ版
タブレット版
PC版

※上記URLの最初にある「krapsiup」は、「quizpark」から来ています。お気づきになられた方もいらっしゃるかと思いますが、「park」を並べ替えると「krap」に、「quiz」を鏡面でみる(裏から眺める?)と「siup」になります

暗記の井戸シリーズの中でコード量が圧倒的に少なくなったにも関わらず、結構いろいろ拡張できそうな予感もあり、面白いと感じています。

とりあえずは、本サイトで紹介している「暗記データ例」を、PCでもスマホでも同じデータをいつでもどこでも参照できるようにしました。例えオフラインになっても最後にアクセスしたデータが残ってますので、気合を入れて暗記に集中できます。

画面は3種類あります

BOX画面、LIST画面、QUIZ画面の3種類。他に各種設定や編集画面がありますが、主なものは左記の3つです。

  • [BOX画面]メールボックスのリストような画面で、クイズ(問題)の集まりのリストです。
  • [LIST画面]メールボックスのような画面で、クイズ(問題)の集まりです。
  • [QUIZ画面]メッセージのような画面で、、クイズ(問題)の詳細です。画面の上半分にクイズ(問題)、下半分にアンサー(解答)、がそれぞれ表示されます

タイムトライアル機能を入れました

タイムトライアル機能?を入れてみました。画面の上半分をタッチ(もしくはクリック)すると機能をON/OFFできます。
※タイムトライアルの時間を変更できます。「BOX画面」下の「Settings」から「TimeTrialInterval」の数字を変更します。単位は秒数です(初期値は10)

「QUIZ画面」の前後移動は画面のタッチで

「QUIZ画面」の下半分の左側をタッチするとひとつ前の問題の「QUIZ画面」に移動します。右半分をタッチするとひとつ後の問題の「QUIZ画面」に移動します

※前後への移動でなく任意の問題の「QUIZ画面」に移動したい場合には、一旦LIST画面に戻ってから問題を選択します

関連する記事・ページ

暗記データ例 | 暗記の井戸HTML5
あなた方は神です!?古いCakePHPの導入で先人の知恵を拝借

お世話になったリンク

[CakePHP] JSON出力時にstring型をint型に戻す | XPages、ロータスノーツ・ドミノのモバイル・WEBアプリの開発・相談ならKTrick LLC.
AJAX ? CakePHP Cookbook v1.3 documentation
CakePHPでビューやレイアウトを使わない方法。 | Wataame Frog
Cakephp 1.3系でBackbone.jsの生成したjsonを受け取る。 – Qiita [キータ]

以上です。

あなた方は神です!?古いCakePHPの導入で先人の知恵を拝借

現在開発中のシステムではDBアクセスにCakephpを使っています。最新版で開発したものを、レンタルサーバの環境に合わせて調整する必要があり、その際に苦労したことを書いてみたいと思います。個人と組織。そのいづれがその能力を発揮できるのか。システム開発で参考になるネットの情報は個人から発信された情報が殆どだと思います。この記事がその一助になればと思います。

「Cakephp」とは

「Cakephp」とは、小・中規模WEBアプリケーションでは大きなシェアを占めるPHPのフレームワークのひとつです。サーバ(DBへのアクセスが主体)とのアクセスモジュールとしてみると、生PHPで書くのとは格段に違う生産性と読み易さが得られますし、単体でもMVCが構築できる秀逸なオープンソースです。

現在利用している「HostGator」などの格安レンタルサーバでもPHPがデフォルトで導入されています。今ご覧になっている本ブログのCMSであるWordPress自体がまさにPHPで書かれていて、MySQL仕様のDBともPHPでアクセスします。

生のPHPで書くシステムを企業やら行政やら金融やらで使えるようにする場合、コード量は現在の10倍以上になるでしょう。いろいろなケースに想定しないといけないからです。生PHPで簡単に書いたコードは「裸でジャングルに入るようなもの」なんでしょうね。

それに比べるとCakephpなどのフレームワークでは、「裸で」に比べるとかなり改善されるようです。いろいろ例外的な状況への対処が簡単な仕組みにカプセル化されているとのこと。すばらしいですね。これまで一生懸命条件分岐のコードを書いていたのは「何だったんだろう!あの時間を返してくれ!」と思わせるものがあります。

こうしてみるとメリットばかりのように見えますが、そうでもありません。学習のためのコストが掛かったりします。そしてもうひとつ重要なのがレンタルサーバなど自分で自由に環境構築できない場所での扱いです。例えば「HostGator」の場合PHPの版数がちょっと古いんです。古いのは安定につながるのでそれはそれで仕方ありませんが、こうした新しいものを取り入れるときにちょっとした障壁になりえます。

「HostGator」でCakePHP2.xxが使えない

「HostGator」がサポートするPHPの現在の版数は5.2.17です。CakePHP2.xxのサポート版数より低いです。フレームワークによってはベースとなるシステムの版数が低くても使えるものが多いんですけどね。CakePHPは違いました。受け付けてくれません

で、結局開発につかったCakePHP2.xxではなくCakePHP1.xxを導入せざるを得なくなりました。それでもJavaサーブレットやStrutsに比べるとかなりましです。Tomcat6などのアプリケーションサーバ環境自体を用意する必要がないからです。

格安レンタルサーバでアプリケーションサーバ環境をデフォルトで用意してくれるところはあるのでしょうかね。

新しい版から古い版へのフレームワークのマイグレーションは大変?

古い版のものには、リリースされて時間が経つ分皆が使っているので、情報が揃っています。ただ、新しい版のものでできたことを古い版でやろうとするとちょっと敷居が高いです。

もちろん、いきなりレンタルサーバにUPLOADしてコードをいじることはありません。まずはローカルな環境で古いCakePHP1.xxを入れて、それから本番環境にマイグレーションします。

ただし、ローカルに構築したそうした環境で動作するからといってレンタルサーバにそれをそのままコピペしても同じように動くとは限りません。逆に「まったく同じに動くことはないのだ」と思ったほうが幸せになれます

日本語のシステムなら「database.php」の「utf8」設定を有効に

これも「まったく同じに動くことはないのだ」のひとつですが、「database.php」の「utf8」設定を、ローカルでは外して動作していました。このときの「動作していました」の意味はキチンと日本語が見れましたの意味です。レンタルサーバでは日本語がみな「????????」と表記されるのです。まず、DBの中身をいろいろ調べ、次にローカルとの間でコードの違いを調べました。これに数時間も費やして、結局「utf8」を陽に設定すれば即解決しました。

JSON用のserialize機能がCakePHP1.xxにはない!

開発中のシステムは、CakePHPが動くサーバとAjaxで通信するAjaxアプリケーションから構成されます。こうした場合情報のやりとりにはJSONを使うのが定石のようですので、CakePHP2.xxでもそうした実装をしていました。たった2行書くだけでJSONをserialize出力できる便利な機能があるんですね。

ところがこの機能がCakePHP1.xxにはありません。当然ローカル環境でも遭遇しました。そこで、「お世話になったリンク」にもあるように、(CakePHP2.xxでは必要なかった)Viewの定義と、デフォルトLayoutsをバイパスしてあげることの2点で問題が解決しました。

Controller内でArray_map関数を使うとエラーになってしまう

次に、CakePHPのController定義で、レスポンスオブジェクトにある余計な情報を削除するため、Array_map関数をつかったところ、レンタルサーバでエラーになりました。ローカル環境では全く問題なかったのに。不思議です。

function index(){

    $this->layout = "";
    $shares = $this->Share->find('all');
    $shares = array_map(funtion($e){
        return $e['Share'];
    },$shares);
    $this->set('datas', $shares);
}

結局、次のように無名関数の定義を止めたら通りました。

function index(){

    function res($e){return $e['Share'];}// only Hostgator does this way!!!

    $this->layout = "";
    $shares = $this->Share->find('all');
    $shares = array_map("res",$shares);
    $this->set('datas', $shares);
}

極めつけはこれ。こんな情報どこにもなかった。あなたは神です

以上はCakePHPがDBにアクセスして一覧を出力するところに関連する部分になります。

ここからは通信方向が逆でAjaxアプリからCakePHPへのXmlHttpRequstのPUTリクエストに関するものです。POSTでも同じ方向のやりとりが発生します。URL情報と並行してテキストやストリームなどの情報が渡されます。

CakePHPのController定義内でこの情報にアクセスするには「this.requst」というオブジェクトを使います。でも下記リンクにもあるようにこれがあろうことか「null(空の意味)」になってしまいお手上げ状態です。いろいろ調べても本来渡されてくるべき情報がないので途方にくれていたところ、本当に凄い裏技を発見、というか、凄い裏技を発見した方がいました。こんな発見必要ないひとには本当に何でもないことですが、開発している最中にこれに出会ったときには「神がいらした」と感動しました。

Cakephp 1.3系でBackbone.jsの生成したjsonを受け取る。 – Qiita [キータ]

$this->data = json_decode(file_get_contents('php://input'));

こんなコードどうやって調べたんだろう!

結構複雑でわかりにくい話ですみません

関連する記事・ページ

お世話になったリンク

[CakePHP] JSON出力時にstring型をint型に戻す | XPages、ロータスノーツ・ドミノのモバイル・WEBアプリの開発・相談ならKTrick LLC.
AJAX ? CakePHP Cookbook v1.3 documentation
CakePHPでビューやレイアウトを使わない方法。 | Wataame Frog
Cakephp 1.3系でBackbone.jsの生成したjsonを受け取る。 – Qiita [キータ]

以上です。

自作無料WEBアプリ「10秒で10年日記 逆さ日記帳」に検索機能を追加しました

先日リリースした「10秒で10年日記 逆さ日記帳」に、検索機能を追加しました。

ChromeやSafariブラウザを持つ大抵の端末からGoogleカレンダの全検索が可能になります。WEBアプリですので面倒なインストール作業もなく、起動して10秒でカレンダ検索機能がGETできます。

AndroidやiPhone、iPadなどのモバイル端末に内蔵するカレンダアプリでも、過去のイベントを検索できますが、クラウド(Googleカレンダサーバー)のデータと全データを同期できない仕様になっているので、満足する検索結果が得られません。

今回追加した「10秒で10年日記 逆さ日記帳」の検索機能では、直接クラウド(Googleカレンダサーバー)のデータにアクセスしますので、全検索が可能です。

ちなみに、当方で開発しGooglePlay等リリースしているAndroidアプリ「Gカ検索」「Gカ検索2」の機能をほぼ包含したものです。

WEBアプリのリンク先はこちら

「10秒で10年日記 逆さ日記帳」正式版スマホ向けタブレット向け
「10秒で10年日記 逆さ日記帳」ベータ版PC向けスマホ向けタブレット向け

いくつか注意点があります

  • 「検索開始日」および「検索終了日」を指定できますが、指定のないときは、「1990/1/2」「アプリ起動日」になります。デバイスや環境設定のタイムゾーンに従います
  • 検索結果の出力数は最大100個です
  • 検索語はGoogle検索のそれが指定できますが、「語A 語B」のようなAND検索や「語A -語B」のような語Aを含むが語Bを含まない検索も可能のようです

目次

GetStarted | 10秒で10年日記 逆さ日記帳
使い方 | 10秒で10年日記 逆さ日記帳
表示 | 10秒で10年日記 逆さ日記帳
メニュ | 10秒で10年日記 逆さ日記帳
設定 | 10秒で10年日記 逆さ日記帳
制限および注意 | 10秒で10年日記 逆さ日記帳
今回の変更点と改版履歴 | 10秒で10年日記 逆さ日記帳

関連する記事・ページ

Android向け暗号化日記アプリ「クラウドJ2」をGoogle Playにてリリースしました
無料Androidアプリ「10秒で10年日記 逆さ日記帳」をGoogle Playにてリリースしました
「10秒で10年日記 逆さ日記帳」の設定に「全てのカレンダ」項目を追加しました
“Just10SecGet10yDiary R10Diary” has another feature of “All Calendars”
自作無料WEBアプリ「10秒で10年日記 逆さ日記帳」に検索機能を追加しました
「10秒で10年日記 逆さ日記帳」というWEBアプリをリリースしました
Gカレンダ暗号化/復号化ツール「MiniCJ2」を本サイトにてリリースしました
Gカレンダ暗号化/復号化ツール「MiniCJ」を本サイトにてリリースしました
Android端末の種類でGoogleカレンダの背景色が微妙に違う!?
クラウドジャーナル(androidアプリ)から見えなくなった日記データの復元方法について

以上です。

「10秒で10年日記 逆さ日記帳」というWEBアプリをリリースしました。

PCやスマホのブラウザで動作するWEBアプリ「10秒で10年日記 逆さ日記帳」をリリースしました。
IMG_3833_288x192

「10秒で10年日記 逆さ日記帳」は、グーグルカレンダーの「過去の予定」を日記と見なして、指定した日から過去10年間の同じ日の「過去の予定」を表示します。

グーグルカレンダー日記ライフログのIndexとして使っている場合には、本アプリを起動して10秒で10年日記が構築できます。

元のカレンダデータだけでなくメールやツイートなどの「過去に綴った「想い」や「考え」」を取り込んでしまえば、今まで10年かかっていた「10年日記」がほんの数日で完成します。10年待つ必要はありません。今から「10年後」ではなく「10年前」なので「逆さ日記帳」と呼んでいます。。

背景

コンセプトは、「グーグルカレンダを日付で串刺しして過去の「想い」「考え」「感動」を俯瞰する」です。

最近書店等でよく「10年日記」というのを見ますが、本当にいいです。最近のものはいろいろと工夫が凝らされてます。例えば、

  • 1日4行程度の分量で記載する
  • 家族全員の様子を記載できる
  • 1月や4月だけでなく何月からでも始められる等。

提供者は、「xxの特長があるので長く続けられますよ」とアピールします。

なぜ「10年日記」があるのか。なぜそんなに永く日記を綴りたいのか。それは長い時間をかけてたどってきた自分の人生を、生きた時間を俯瞰したいから。日記には自分の言葉で時を刻む力があります。新調の日記と永く使った日記では、自分にとっての価値に雲泥の差があるでしょう。そこに時が刻まれているからです。

しかし、紙の日記の場合致命的なポイントがあります。現時点以降の「想い」や「考え」をそこに綴ることはできても、過去に綴った「想い」や「考え」を手軽に纏めるのが困難なことです。

「10秒で10年日記 逆さ日記帳」は、グーグルカレンダーの「過去の予定」を日記と見なして、指定した日から過去10年間の同じ日の「過去の予定」を表示します。

グーグルカレンダーを日記やライフログのIndexとして使っている場合には、本アプリを起動して10秒で10年日記が構築できます。

元のカレンダデータだけでなくメールやツイートなどの「過去に綴った「想い」や「考え」」を取り込んでしまえば、今まで10年かかっていた「10年日記」がほんの数日で完成します。10年待つ必要はありません。今から「10年後」ではなく「10年前」なので「逆さ日記帳」と呼んでいます。

WEBアプリのリンク先はこちら

「10秒で10年日記 逆さ日記帳」正式版スマホ向けタブレット向け
「10秒で10年日記 逆さ日記帳」ベータ版PC向けスマホ向けタブレット向け

サポートツールについて

本サイトでは、「10秒で10年日記 逆さ日記帳」を含むカレンダ操作アプリをサポートするため、いくつかツールを用意しています
(本サイトでリリースしています)。

現在のところ、

  • [twt2iCal]TwitterのバックアップデータをGoogleカレンダ形式に一括変換するツール。Twitterのバックアップデータ機能は最近サポートされた機能のようです。過去のツイートデータを(JSON形式のデータとして再利用できる形で)バックアップできます。そのデータをこのツールに入れるとGoogleカレンダ形式に一括変換します。ファイルに落としてGoogleカレンダにインポートすれば(過去の)新規予定として登録されます。
  • [gml2iCal]Google GmailからGoogleカレンダに一括変換するツール。ただし、本ツールではHTTPSを利用しないため設定したLOGINやPASSWDが盗聴されてしまう危険があります。利用する際は一時的なPASSWDにして入力してください
  • [cj2cj2main]クラウド日記の暗号化/複合化を一括処理するツール。これは従来のクラウド日記(クラウドジャーナル)と現在開発中のクラウド日記2(CJ2)の暗号化/複合化処理をカレンダ単位で一括処理するツールです。

があります。

目次

GetStarted | 10秒で10年日記 逆さ日記帳
使い方 | 10秒で10年日記 逆さ日記帳
表示 | 10秒で10年日記 逆さ日記帳
メニュ | 10秒で10年日記 逆さ日記帳
設定 | 10秒で10年日記 逆さ日記帳
制限および注意 | 10秒で10年日記 逆さ日記帳
今回の変更点と改版履歴 | 10秒で10年日記 逆さ日記帳
クイックリファレンス | 10秒で10年日記 逆さ日記帳

関連する記事・ページ

Android向け暗号化日記アプリ「クラウドJ2」をGoogle Playにてリリースしました
無料Androidアプリ「10秒で10年日記 逆さ日記帳」をGoogle Playにてリリースしました
「10秒で10年日記 逆さ日記帳」の設定に「全てのカレンダ」項目を追加しました
“Just10SecGet10yDiary R10Diary” has another feature of “All Calendars”
自作無料WEBアプリ「10秒で10年日記 逆さ日記帳」に検索機能を追加しました
「10秒で10年日記 逆さ日記帳」というWEBアプリをリリースしました
Gカレンダ暗号化/復号化ツール「MiniCJ2」を本サイトにてリリースしました
Gカレンダ暗号化/復号化ツール「MiniCJ」を本サイトにてリリースしました
Android端末の種類でGoogleカレンダの背景色が微妙に違う!?
クラウドジャーナル(androidアプリ)から見えなくなった日記データの復元方法について

以上です。