平成 28 年度卒業研究中間レポート Web アプリケーション制作リアルタイム通信を用いたファイルアップロードアプリ 近畿大学工学部情報学科 学籍番号 1310990107 新川大貴 1
目次 1. 研究の背景と目的 1.1. 背景 1.2. 目的 2. 研究計画 3. 現状報告 3.1. 制作中の Web アプリケーション 3.1.1. 使用する技術 3.1.2. 概要 3.1.3. 機能 3.1.4. 課題 3.1.5. 参考にしたサイト 書籍 3.2. その他の取り組み 4. 今後の課題 5. 参考 6. 引用 2
1. 研究の背景と目的 1.1. 背景 アプリケーションは大きく分けて 3 種類に分類できる. 一つは,Android アプリや ios アプリ,Windows アプリなど, 端末インストール型のアプリケーションであるネイティブアプリ. もう一つは, Javascript などの Web 技術を利用して構築されたアプリケーションである,Web アプリ. そして, 両者ネイティブアプリと Web アプリを組み合わせたハイブリットアプリである. IT 専門調査会社 IDC Japan 株式会社によると,2015 年の国内モバイルデバイス市場出荷台数は,2014 年比で 8.1% 減の 4,792 万台であった. そして 2016 年度の出荷台数は 2015 年比で 8.2% 減の 4,401 万台と予測されている. この理由は, 端末の買い替え長期化によるものであるため, 端末自体の売り上げ台数は減少したものの,PC タブレット スマートフォンはそれぞれ 965 万台 687 万台 2620 万台と依然として高いシェアを誇っている. 図 1: モバイル端末市場調査結果 [1] 現在主流の Web アプリではユーザが求めて初めて答えを返すプル型の情報通信が基本である. 反面, リアルタイム通信では Web ページで情報が更新されると, ユーザによる要求を待つことなく情報を送ることができる. リアルタイム通信 ( 非同期通信 ) を実現するためにはいくつかの方法がある. 一つは Ajax と javascript を利用した非同期通信処理を利用すること. または HTML5 に追加された WebSocket と呼ばれる通信規格を利用することも挙げられる. 図 2 には WebSocket の仕組みを表している. 3
図 2:WebSocket の概要図 1.2. 目的 私は, 近年の端末の多様化と 3 つのアプリケーションの性質から考えて,Web アプリケーションに成長の可能性を感じた. なぜなら, 端末ごとにインストールする手間を省くことができる. そして端末に依存することなく動作をするからだ. 開発者側の視点からでもメリットが様々にある. まず, 端末ごとに仕様を大きく変えることなくアプリ開発を行うことができる利点がある. そしてアプリの更新を行う際には, 開発者が Web ページの更新を行うだけで全ユーザに更新が反映されるため, ユーザにアプリのアップデートを行ってもらわなくてよいという利点もある. また, リアルタイムに情報更新する機能については実装する予定である. 現在主流の Web アプリではユーザが求めて初めて答えを返すプル型の情報通信が基本である. リアルタイム通信では Web ページで情報が更新されると, ユーザによる要求を待つことなく情報を送ることができる. 例えば Google 検索には文字を入力した瞬間に, ユーザが画面の再読み込みを行うことなく, 検索結果が表示される仕組みが整っている. 検索のたびにページ更新を行う手間が省けることによって, ユーザとしてはストレスを感じることなく非常に快適にサービスを利用することができる. よって, 現段階ではリアルタイムに情報更新されるファイルアップローダーの制作を行っている. 4
2. 研究計画 Web アプリのデザインのため HTML CSS を学習. 4 月 5 月 6 月 ファイルの送受信やデータの取り扱い方法を知るために Javascript PHP を学習. 7 月 リアルタイムでのデータ送受信実現のため milkcocoa の学習 中間レポート作成 8 月 制作するアプリの決定 9 月 10 月 基本プログラム部の完成 11 月 アプリのユーザインタフェース完成 12 月 大まかに完成 1 月 テストと修正を行いアプリを完成 2 月 論文の完成 発表練習 3. 現状報告 3.1. 制作中の Web アプリケーション 現在, ファイルの共有を数人でリアルタイムに行うことのできる機能を備えた Web アプリケーションを制作している. 使用する場面として, 数人で行う会議などを想定している. ファイルのアップロードはブラウザへドラッグアンドドロップをするのみで行うことができ, アップロードしたファイルの情報は, ブラウザで同じ画面を開いている人全員にリアルタイムに表示される. ファイルのアップロードには PHP を用いている. また, リアルタイムに情報更新される Web アプリを制作するために, 株式会社ウフルによって提供されている milkcocoa というサービスを利用している. 制御は Javascript で行っている. 3.1.1. 使用する技術 HTML CSS Javascript PHP サーバーサイドの milkcocoa 3.1.2. 概要現在以下の 4 ファイルで動作している. Bulletin_board.php save.php BB_file.js upfile_main.css ページの構成について Bulletin_board.php がメインの画面となり情報を表示する.Bulletin_board.php は画面遷移を 5
行わず, ユーザからのファイル送信の受付と送信を担当している. いわゆるシングルぺージ Web アプリケーションの構成となっている. ファイルは save.php によりサーバー送られるが, ファイルが送られた瞬間に, そのファイル情報を BB_file.js によって読み取り, Bulletin_board.php 内へリアルタイムに表示する. Save.php は bulletin_board.php から送られてくるファイルデータの保存を担当する. ファイルの種類を MIME タイプによって判別して, 該当するディレクトリ内に移動させ保存する. 3.1.3. 機能 ファイルのアップロードファイルのアップロードは本 Web アプリケーションのメイン機能である.PHP の POST 通信を利用する. データのリアルタイム送受信 Javascript ファイル (BB_file.js) のソースコード及び解説 var milkcocoa = new MilkCocoa('vueiqm54tm4.mlkcca.com'); milkcocoaapi を利用するために,milkcocoa へ登録した際に発行される ID( 私の ID は vueiqm54tm4) を引数として milkcocoa という Milkcocoa オブジェクトのインスタンスを作成する. インスタンス名は任意でよい. この一文によってユーザが Web アプリを読み込んだ際に milkcocoa サーバーとのコネクションが生まれて, 非同期通信が開始される. var chatdatastore = milkcocoa.datastore("files"); milkcocoa サーバーにはデータストアという名のデータベース機能も備わっている.Milkcocoa オブジェクトの中の datastore オブジェクトを呼び出して任意の名前のインスタンスを作成する.dataStore メソッドの引数はデータベースを参照する際のパスとなる. var files,board; files と borad という変数の作成 window.onload = function(){ board = document.getelementbyid("board"); } function clickevent(){ files = document.getelementbyid("up").value; var filename = files.split(/ /); sendfilename(filename); } Bulletin_board.php 内に記述した送信ボタン (onclick=clickevent() を記述してある ) をクリックした際に行われる機能. 送信したファイルのローカルパスを読み込んで, ファイル名に切り分けている. function sendfilename(filename){ chatdatastore.push({filename :filename[filename.length - 1]},function(data){ console.log(" 送信完了!"); //textarea.value = ""; }); } データベースに情報を送信 保存するメソッドとして push メソッドがある.JSON 形式での保存となるため push({ 文字列 : 変数 }) の形で引数を指定する. 図 4 では push メソッドによりファイル情報が送られて保存されたことが確認できる. 6
chatdatastore.on("push",function(data){ addfilename(data.value.filename); }); データベースに push メソッドで情報が送られたら addfilename を実行するように指定. function addfilename(filename){ var msgdom = document.createelement("li"); msgdom.innerhtml = filename + " をアップロードしました "; board.insertbefore(msgdom, board.firstchild); } HTML に新たに li タグを追加してどのファイルがアップロードされたかをリアルタイムに表示する. 図 3 ではブラウザを 2 つ開き, それぞれで Bulletin_board.php を読み込んでいる. そして指定域内にファイルをドラッグアンドドロップして送信ボタンを押した瞬間に haguruma3.gif をアップロードしました と,2 つのブラウザで同時に情報が表示された.Millkcocoa による WebSocket のコネクションが正常に行えていることがうかがえる. 図 3:Bulletin_board.php の画面 7
図 4:milkcocoa のデータベースへファイル情報が保存されている様子 4. 今後の課題 ユーザ管理ユーザを判別してファイルデータの送受信を行いたいので, ログインページ, ログアウトページを作成する. ユーザインタフェースのデザイン現在簡易的なファイル送信の仕組みのみの状態のため, どこにファイルをドラッグアンドドロップすればアップロードよされるか, どこを操作すればファイルがダウンロードできるかなどが直感的にわかりやすいユーザインタフェースのデザインをする. セキュリティファイルの送受信や保存においてセキュリティの面で対策がとれていない. 5. 参考 [1] IDCjapan 株式会社 2016 年国内モバイルデバイス市場予測を発表 ( アクセス日 : 2016/8/2 ) <http://www.idcjapan.co.jp/press/current/20160322apr.html> [2] ビジネス +IT ビジネスを加速する UX 時代の企業 Web システム ( アクセス日 : 2016/8/3 ) <http://www.sbbit.jp/article/cont1/28863> [3] ITmediaInc. 連載 : 人気順に説明する初めての HTML5 開発 : 双方向通信を実現! WebSocket を使いこなそう <http://www.atmarkit.co.jp/ait/articles/1111/11/news135.html>( アクセス日 :2016/8/3) 西沢夢路 基礎からの PHP SB クリエイティブ株式会社 (2015) 6. 引用 8