メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

知らなかったJavaScriptでデータが作成できるだなんて

newwebweb

今回とある仕事の為に端末持った人の現在地を緯度、経度取得してデータにしておく必要があったんですが、Geolocationを使うなら、データ作成もJSでやってしまいたいなぁと思って、隣の人に聞いてみたんですが、JSでそんなことできねぇよパガ!って言われました。嘘だと思って調べてみたら、HTML5ではFileApiなるものがあるそうで、これを使えばなんとかなりそうな感じでした。とりあえずこれについて調べてたらgoogleの人の資料が出てきたので、ラッキーと思ったので記事にしました。

追記
このAPI使っても任意のファイルへアクセスしたり書き込みが出来るわけではないようです・・・

FileAPIの対応ブラウザ

IEの対応バージョンは10以降ってなってます。Safariでも、5まで一部機能がサポートされていないです。いやもう使ってるのかな。僕まだ使ってないのでわかんない。とりあえず使えなかった機能を表にしておきます。

ブラウザ 未対応機能
IE10様 ファイルを動的に読み取って2進数のデータを取得する機能((FileReaderオブジェクトのreadAsBinaryStringメソッド)
Safari5以前 File内容読み取る機能(FileReaderオブジェクトが未実装)

アタシのブラウザ大丈夫かしら

このコードを書いてエラーが出なきゃFileAPI全て利用が可能です。

</p>
<p>if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob) {</p>
<p>} else {<br />
  alert('未対応');<br />
}</p>
<p>

何ができるの?

FileAPIを使うとJavaScriptでファイルの読み取りや書き込みができるようになるっぽいです。ざっと見た限り、良く出てきたサンプルプログラムは読み込みの方で、inputのname属性fileを使ってローカルから読んできたデータをブラウザに書き出すサンプルプログラムを結構な人が簡単に実装してました。で、これinput属性使わなくてもファイル読み取れるらしいんですがむりかも・・・あれ?やっぱできるっぽい?、まだ説明書完全に読んでないので、もしできたら今度書きます。Fileの書き込みについて書いてみたいと思ってます。fileWriter.write()で書き込めるらしいです。Blobって概念がまだちゃんと掴めてないので、あんまり詳しくはまだかけません。おしえてください。

追記

コメントでご指摘を頂いた通り、ファイルの書き込みとは、Webブラウザでダウンロードできるようにするって事みたいです。任意のファイルにアクセスしたり書き込みは出来ないそうです・・・。

詳しくFileAPIについて知りたい人向け資料

自分も今日発見したので、全然勉強してないです。でも、これ使ってプログラム組もうと思ってるので、これについてまた書くと思います。

FileAPIのスライド資料(仕組みが分かりやすい)
JavaScriptでローカルファイルを自在に操る – File API
HTML5のFile APIでローカルファイル情報取得してやんよ!!!

FileSystem API について知る
JavaScriptでローカルにファイルを保存する方法(その1)

HTML5に疎いなぁ。本当にでも勧告されたし覚えないとな。

W3C の HTML5 Logo では以下のカテゴリを HTML5 に含めている[7]。

セマンティックス – HTML5の新タグ、RDFa、マイクロデータ、マイクロフォーマット
オフラインとストレージ – App Cache、Web Storage、Indexed Database API、File API
デバイスアクセス – Geolocation API、マイク・カメラ、アドレス帳・カレンダー、端末の向き
接続性 – WebSocket、Server-Sent Events
マルチメディア – audio, video要素
3D、グラフィックス、エフェクト – SVG、canvas要素、WebGL、CSS3 3D
パフォーマンスと統合 – Web Workers、XMLHttpRequest Level 2
CSS3 – WOFFも含む

Wikipediaより引用

関連記事

  1. 通りすがり 2014.11.13 6:33pm

    Chromeであればフォルダを扱えるので一度Cドライブなりをinputで読みこめば任意のデータを取れる状況になります。
    それとダウンロードはaタグのdownload属性を利用します。

    • 0
    • 0
    • mikaduki 2014.11.17 2:45pm

      ご指摘どうもありがとうございます。どうも勘違いしてました。
      別にサーバーにデータが保存できたりローカルに直で保存できるわけではないんですねぇ・・・。

      File API

      • 0
      • 0