html5とjavascriptで画像におえかきアプリ

html5とjavascriptで画像におえかきアプリ for Android

<機能>
1.「ファイルを選択」ボタンで画像をカメラまたは、携帯写真ギャラリーから選べます。
2.選んだ画像が画面にでてくるので、SMLのボタンでお絵描きのペン先を大きくしたり小さくしたりしながら黒、赤、青、緑の色を選んで、画像の上にメモできます。
3.描画できたら保存したプレビュー画像が表示され、サーバーに画像を保存できます。
画像にメモをしたい時に便利。

android1

html5の方が(html5ちゅーけどスクリプト打つのは断然javascriptの方が多い)デザイナーにはなじみがアル。
しかし、html5は環境によって全く動作が変わる。
世の中にはhtml5アプリを作ろう!簡単に作れる、みたいな風潮があるが、うまい表面の部分ばっかいってる。html5は環境によって本当に左右される。
そんな事を書いてない本、サイトが多すぎる。おいしい言葉ばかりにご用心!要は仕様段階で試して遊んでるだけの情報、仕事で作るバグトリの話は一切でてこない。
これは、風潮に流されず、しっかりわかっていた方がいい。
しかも、html5アプリは横向きに対応できない。
今回少し参考にした本は、ハイブリッドの開発環境でhtml5のアプリをパッケージ化してネィティブアプリとして開発する方法が載っていた。なんか、それ本のタイトルと矛盾していませんか…。「HTML5でモバイルアプリ開発入門」

どんどんでてくる問題。
1.ファイルアップロード(ファイルを選択ボタンの部分)<input type=”file”>はAndroidのみしか有効ではない。(iphoneは5sから)

2.<input type=”file”>の画面がダサイ。cssで画像代替えするもAndroidではファイルをアップロードする<input type=”file”>機能を認識しなくなる。なるたけダサくなく、androidが<input type=”file”>を認識するように調整。

3.saveボタン
保存する方法は3つある。
ひとつは、androidの機能を使用する方法。saveボタンを押すと画面が画像のみの画面に遷移するので、画像を長押しで保存する方法。確かダウンロードというところに保存されたような。それでは、機種によってどこに保存されるかわからない。しかも時間がかかる。却下。
もうひとつはlocalStorageで保存する方法、その方法が載っているサイトを放浪していたが、結局、使い方が納得いかなくて、その方法で保存するのは辞める。ちなみにlocalStorageとは簡易的なキャッシュ?のことである。一時的に保存だとか、コピーしたものを貼付けるやり方とか。
メールで送ることも考えた。
safariのみから画像保存の話。しかし今回<input type=”file”>が使用できる環境はAndroidのみなので却下。保存の方法としては理想的。
最終、phpでbase64でテキスト形式でサーバーに保存し、保存したプレビューをbase64からデコードした画像で表現。

4.しかし、画像の上にcanvas機能で絵を描くとパフォーマンス上の問題で線がギザギザになる

ネットで紹介されているお絵描きアプリを見たが、ただのお絵描きアプリばかり。
このアプリの特徴は画像の上にメモができるのが特徴。保存もしっかりサーバーに保存。
ここまでしているものはあまりなかった。

なんとか、問題を解決して完成。
これを色々応用できそうなので、応用はipadでまたアプリを開発する事にする。