html5」タグアーカイブ

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

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

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

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

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

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

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

スリム版V2はこちら。複数日のPDF出力のため基準日と日数を指定できるようにしました
スリム版V2の2018年版はこちら。2018年元日から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を読み込む方法があるようです。これだと複数ページにわたるテンプレートのように使うことができますね。
スリム版をH31年(西暦2019年)分でまとめたPDFはこちら
スリム版をH31年(西暦2019年)会計年度分でまとめたPDFはこちら
スリム版をH31年第1四半期(西暦2019年Q1)分でまとめたPDFはこちら
スリム版をH31年第2四半期(西暦2019年Q2)分でまとめたPDFはこちら
スリム版をH31年第3四半期(西暦2019年Q3)分でまとめたPDFはこちら
スリム版をH31年第4四半期(西暦2019年Q4)分でまとめたPDFはこちら
スリム版をH32年(西暦2020年)分でまとめたPDFはこちら
スリム版をH32年(西暦2020年)会計年度分でまとめたPDFはこちら(400日分あります)
スリム版をH33年(西暦2021年)分でまとめたPDFはこちら
スリム版をH33年(西暦2021年)会計年度分でまとめたPDFはこちら(400日分あります)
スリム版をH34年(西暦2022年)分でまとめたPDFはこちら

関連する記事・ページ

お世話になったリンク

バックアップのためのリンク

スリム版をH30年(西暦2018年)分でまとめたPDFはこちら
スリム版をH29年(西暦2017年)分でまとめた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 [キータ]

以上です。

不可解過ぎます!WebViewのHTML5アプリケーションキャッシュ

AndroidアプリからWEBアプリを操作するハイブリッドアプリを開発リリースしています。その際に用いたWebViewという機能。PC版Javaにも同様のものがあり非常に便利そうに見えるのですが、WebViewが提供するHTML5アプリケーションキャッシュに不可解なことが多くて困っています。

「アプリケーションキャッシュ」とは

「アプリケーションキャッシュ」とは、HTML5で導入されたもので、ネットワークへの接続があってもなくても、scriptやら画像データやらHTMLやら、本体のHTMLから参照される全ての外部ファイルを、そのアプリ専用のキャッシュから読み込んでくれるというもの。極論すればネイティブのアプリケーションのように動作しているように見えるというもの(多少遅いけど)。

この機能は非常に便利で、一度キャッシュされると、ちょっと厳格すぎるように見える手続きを陽に踏まない限り、テコでもキャッシュを更新してくれない位強力なものです。SafariやChromeブラウザでの経験しかありませんが、普通のいわゆるキャッシュとは全然違うようです。

キャッシュとアプリケーションキャッシュの違い

ネットを探してみると、膨大な情報がありますが、なんとなく「キャッシュ」と「アプリケーションキャッシュ」を同じものとして扱っている記事が多い感じです。名前が似ているので当たり前なのですが、それでは何故わざわざ「アプリケーション」キャッシュという言い方をするのでしょうね。

同じ、もしくは包含関係にある、それとも、全く排他的なものなのか、それも不明です。実際どちらにも当てはまりそうな場合がありました。

ここでは、「アプリケーションキャッシュ」でネイティブのアプリケーションのように動作させていながら、必要なときにはキャッシュを消去したり更新したりするにはどうすればいいか、ということを考えます。「更新が効く」/「更新が効かない」は、WebViewで呼ばれるURLにあるscriptファイルの文字列を一部変えてみて、表示に変化があれば「更新が効く」、なければ「更新が効かない」としています。もちろんscriptファイルはmanifestファイル内のCACHEフィールドに記述されておりmanifestファイルの文字列を一部マニュアルで更新しています。

WebView#clearCacheが効かない

ネットによると、キャッシュ消去の標準的なやり方は、WebView#clearCacheを使う方法のようです。onDestroy()中で、WebView#clearCache(true)を実行して「loadStorage」と「アプリケーションキャッシュ」で検証してみました。使い方や呼び出す順序がまずいのか、まったく効きません。ネットでは効くのが当然のような書き方が殆どなので恐らくなにか間違っているのでしょうね。これについては簡単なプログラムで確かめてみたいと思います。

省略値を陽に宣言しないと動作しないのは何故?

Enabling HTML5 AppCache in Android Webview programatically.のページには、WebView#AppCacheEnabled()はよいとして、WebView#AppCachePath()、WebView#AppCacheMaxSIze()にも省略値を陽に指定しないと動作しなかったとあります。実際Path指定がないとエラーになりました。

こういうことがひとつでもあると何を信じてよいか分からなくなりますね。ただ、どこかのページには「Pathを陽に示せ」と書いてあったようにも記憶しています。ちなみにAppCacheMaxSizeに1024*1024*5の代わりに「0」としても「アプリケーションキャッシュ」は動作していました。「0」ではなくて「1」とか思いっきり小さい値がよかったのかも知れませんね、この手の検証では。

「アプリケーションキャッシュ」ではなく、「キャッシュ」だけ使いたい場合にはこのような指定は必要ないのか、これも不明です。

Android端末のアプリケーション設定での謎!?

Android端末の「設定」に「アプリケーション」という設定項目があります。アプリを選び「本体データ削除」「キャッシュ消去」のうち、「キャッシュ消去」を有効にしてみました。すると、そこに出ているキャッシュデータ量を示す数字は0になりますが、依然として「アプリケーションキャッシュ」が動作していました。「キャッシュ消去」前の容量は、ちょうど「アプリケーションキャッシュ」のためにMaxサイズとして指定したものと一致しており、直感的に「キャッシュ」=「アプリケーションキャッシュ」もしくは包含されるように考えてしまいました。

「本体データ削除」だと「アプリケーションキャッシュ」が更新できますね。何故でしょう。ただ本体データ削除のデータ量は70kB程度で自分のアプリは画像を含め150kB程度ありますので、「アプリケーションキャッシュ」が「本体データ」に含まれるというのも数字が合いません。「キャッシュ消去」にでている量は5MB強とリーズナブルです。

やっとみつけたWorkAround(ワークアラウンド、回避策)

「本体データ削除」だと何故か「アプリケーションキャッシュ」が更新できますが、設定が多いと結構つらいです。なので、なにかいい方法はないかと探していたら、すぐ近くにありました。「強制停止」+「キャッシュ消去」です。理由は分かりませんが、設定もそのままでキャッシュ(アプリケーションキャッシュ?)やloadStorageもクリアできるようです。

PHPとは共存できないんでしょうか?

もうひとつ不思議なのが、PHPとの共存です。ご存知かも知れませんが、PHPコードは大抵サーバ側で処理するものですから、manifestファイルにindex.phpとあってもクライアントだけの環境ではうまく動作するはずがありませんが、index.phpそのものではなくindex.phpの処理結果をキャッシュしているのか、それなりに処理できています。いつも厳格な「アプリケーションキャッシュ」の風貌にそぐわない感じがしています。

WebViewのHTML5アプリケーションキャッシュ、不可解過ぎます。

といっても、恐らく私の勉強が足らないだけなのでしょうね。

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

関連する記事・ページ

無料Androidアプリ「10秒で10年日記 逆さ日記帳」をGoogle Playにてリリースしました
「10秒で10年日記 逆さ日記帳」の設定に「全てのカレンダ」項目を追加しました
“Just10SecGet10yDiary R10Diary” has another feature of “All Calendars”
自作無料WEBアプリ「10秒で10年日記 逆さ日記帳」に検索機能を追加しました
「10秒で10年日記 逆さ日記帳」というWEBアプリをリリースしました

お世話になったリンク

Enabling HTML5 AppCache in Android Webview programatically.
caching – Cache dynamic page using html5 cache manifest using Android webchromeclient – Stack Overflow

以上です。

GalaxyのGoogleChromeでparseIntがおかしな動作をしますね

「10秒で10年日記 逆日記帳」というWEBアプリを開発しています。
そのテスト中に、Javascriptの機種差(というかバグ?)に遭遇しましたので、
ここに記載しておきます。

文字列から整数に変換するparseInt()という関数でテスト機中
Galaxy S3 Progre(AU)だけが おかしな動作をします。

遭遇したのは、桁数をあわせるために左を0で埋めた日付けや時刻をあらわす
文字列から整数に変換する処理でした。

parseInt("09") => 0 (9)
parseInt("08") => 0 (8)
parseInt("07") => 7
parseInt("06") => 6
parseInt("05") => 5
parseInt("04") => 4
parseInt("03") => 3
parseInt("02") => 2
parseInt("01") => 1
parseInt("00") => 0

のように、08と09のみがうまく変換できません。

で対処方法はというと、

parseInt("09",10) => 9
parseInt("08",10) => 8

のように、(省略できる)進数のパラメータを明示するだけの簡単なものでした。

こうしたことに対処しようと省略パラメータを明示するのも手ですが、そういうものは
膨大に存在するので、大変になりますね。

テスト機のChromeのバージョン:18.0.1025308

以上です。