カテゴリー: 卒研メモ

　まずjQueryの手助けなしに，JavaScriptでAjaxを使うためのXMLHttpRequest関数を直接呼び出してDrag&Dropファイルアップロード機能を実装してみました。

動作は下記のビデオを参照して下さい。

　使用したものは，file_api_upload.htmlとupload.phpです。

file_api_upload.html:

upload.php:

使用方法は下記の手順となります。

1. file_api_upload.htmlとupload.phpを同じディレクトリ（フォルダ）に入れておき(以下semiとします)，”upload_files”というアップロードファイル格納用ディレクトリも掘っておく。
2. File API使用可能なブラウザからhttp://localhost/semi/file_api_upload.htmlにアクセスし，DropエリアにファイルをDrag&Dropする
3. アップロードボタンを押すとアップロード開始。画像ファイルは自動的に表示される。

　これを改変して，Drag&Drop直後にアップロード開始となるバージョンも作ってみましょう。file_api_upload.htmlの改変のみで可能なはずです。実行例は下記の動画をご覧下さい。

　普段のレポート作成や卒論執筆時に，ブロックダイアグラムや流れ図を描く必要が出てきます。そんな時は，ビットマップでグラフィックスファイルを作るツール（ペイントなど）より，ドロー(draw)系のツールを使う方が，拡大縮小時のジャギーを減らすことができ，何かと便利です。日経トレンディに，Google Chromeから使える”draw.io”の紹介記事が載っていましたので，早速使ってみました。

　draw.ioはChromeから使うWebアプリと，Windowsのデスクトップアプリとして無料で使えるバージョンがそれぞれ用意されています。どちらもChromeの拡張機能（見つからなければ”draw.io”で検索)からインストールできます。

　画面構成やメニューはWebアプリ版でもデスクトップ版でも同じですが，前者はGoogle Driveへの保存に対応しています。後者は複雑な図をスムーズに編集したい時に便利でしょう。

　試しに，本研究室のWebプログラミング教材に掲載されている図をdraw.ioで書き直してみました。普通保存するとXML形式になりますが，PDFファイル，PNGファイル，SVGファイルの形にエクスポートすることも可能です。下記はPNGファイルに200%の倍率で書きだしたものです。

　WordやExcelの図作成ツールでも簡単なものは書けますが，複雑なブロックダイアグラムを作る用途には向いていません。便利に使えるドロー系のツールを併用するようにして下さい。