平成 28 年度 卒業研究レポート
PDF 管理 Web アプリケーションの制作
～PDF ファイル探索時間の短縮化～
近畿大学工学部 情報学科
情報物理研究室
学籍番号 1310990049 陶山隼人
目次 1. 研究の背景と目的 ... 1 1.1. PDF 管理の現状 ... 1 1.2. PDF について ... 4 1.3. アプリケーションの形態について ... 4 1.3.1. アプリケーションの動作環境の現状 ... 4 1.3.2. ネイティブアプリケーション[3] ... 4 1.3.3. Web アプリケーション[3]... 5 1.3.4. ハイブリッドアプリケーション[3] ... 5 1.4. PDF 管理 Web アプリケーション制作の目的 ... 6 2. 使用技術 ... 6 2.1. HTML ... 6 2.2. CSS ... 7 2.3. JavaScript ... 7 2.4. Ruby ... 7 2.5. Ruby on Rails ... 8 3. PDF 管理 Web アプリケーションについて ... 9 3.1. 推奨動作環境 ... 9 3.2. 機能 ... 9 3.2.1. ユーザーアカウント機能 ... 10 3.2.2. サムネイル表示 ... 13 3.2.3. ルーペ機能 ... 15 3.2.4. リスト表示 ... 15 3.2.5. PDF ファイル情報編集機能 ... 16 3.2.6. 絞り込み検索 ... 18 3.2.7. 並び替え機能 ... 19 3.2.8. アップロード ... 20 4. セキュリティ ... 21 5. まとめ ... 21 6. 参考文献 ... 21
1 1. 研究の背景と目的 まず，本研究を行う背景となった PDF 管理の現状や PDF について，制作するアプリケーショ ンの形態を決定するためのアプリケーションの形態について検討する．その後，本研究の目的を 述べる． 1.1. PDF 管理の現状 PDF を管理するソフトをインストールしていない場合，OS にデフォルトでインストールされ ているファイル管理ツール（Windows ではエクスプローラー）によって PDF を管理するのが一 般的である．図 1 は Windows のエクスプローラーで PDF ファイルの入ったフォルダを表示した ものである． 図 1 Windows のエクスプローラー 図 1 の中の PDF ファイルはすべてインターネット上に公開されている論文であるが，ファイ ル名が論文を公開しているシステムが管理するために都合がいいものになっており，論文の内容 とは無関係な英数字で設定されている．そのため，ファイル名では論文の識別が困難である．ユ ーザーはファイル名を１つずつ内容の分かるファイル名に変更して管理するか，またはファイル を１つずつ開いて内容を確認しなければならない．
PDF を管理する専用アプリケーションには Icecream Ebook reader（図 2）や Adobe Digital Editions（図 3），Mendeley（図 4，図 5）などがある．
2
図 2 Icecream Ebook reader：+ サムネイル
図 3 Adobe Digital Editions：+ サムネイル + 著者 + α
Icecream Ebook reader と Adobe Digital Editions は Windows 用のネイティブアプリケーションで ある．Windows のエクスプローラーと比較すると，論文を識別するための情報として著者の項目 が追加されている．また，どちらも最初のページのサムネイルを表示する機能があるが，サムネ イルのサイズが小さいため，PDF ファイルの識別が十分ではない．
3
図 4 Mendeley ：+ タイトル
図 5 Mendeley Desktop：+ タイトル
図 4 は Mendeley の Web アプリケーションであり，図 5 の Mendeley Desktop は Windows 用のネ イティブアプリケーションである（Mac と Linux，iOS 版もあり）．Web アプリケーションとネ イティブアプリケーションは同期をとることができる．また，タイトルを PDF ファイルの中か ら自動で読み取る機能がある．しかし，誤った読み取りやファイル名をそのままタイトルにする 場合があり，確実にファイルを識別することはできていない．
4 1.2. PDF について
PDF(Portable Document Format)とは，Adobe Systems 社が開発したものであり，印刷ページと同 じ状態を保存する電子ファイルの形式である．PDF は情報交換のためのリンクやしおり，注釈， フォームなどの付加的な情報を加えるための様々な機能を追加できる．また，ソフトウェアや OS などの環境に依存しないため，環境の違いによるレイアウトの崩れが起こる可能性が低い． 現在では，論文や行政文書などの電子ファイルを Web 上に公開する際やビジネスでの文書の受 け渡しの際などの電子ファイルの形式としてデファクトスタンダードとなっている． 1.3. アプリケーションの形態について これからモバイルとパソコンの OS に何が使われているかを記述する．その後，アプリケーシ ョンの形態であるネイティブアプリケーション，Web アプリケーション，ハイブリッドアプリケ ーションについて記述する． 1.3.1. アプリケーションの動作環境の現状 表 1 は 2016 年 12 月時点のモバイル OS シェアである． OS 12 月のシェア Android 68.67％ iOS 25.71％ Windows Phone 1.75％ Java ME 1.57％ BlackBerry 1.28％ Symbian 0.95％ Samsung 0.04％ Kindle 0.01％ 表 1 2016 年 12 月時点のモバイル OS シェア[1] Android が約 70％と多くのシェアを占めているが，iOS が約 25％，その他も合わせて約 5％存在 し，複数の OS が混在している状況である． また，表 2 は 2016 年 12 月時点のパソコン OS シェアである． OS 12 月のシェア Windows 91.72％ Mac 6.07％ Linux 2.21％ FreeBSD 0.00％ 表 2 2016 年 12 月時点パソコン OS シェア[2]
Windows が約 90％とほとんどのシェアを占めているが，Mac や Linux を利用しているユーザーも 存在し，パソコンも複数の OS が混在している状況であるといえる．
1.3.2. ネイティブアプリケーション[3]
ネイティブアプリケーションは，特定の OS 上で直接実行可能なプログラムで構成されたアプ リケーションソフトウェアである．Android アプリケーションや iOS アプリケーション，
5
Windows アプリケーションなどがネイティブアプリケーションに該当する．インターネットに接 続していなくとも利用できるため，動作速度が速いことやデバイス固有の機能を活かすことがで きることが利点である．その反面，デバイスへのインストールが必須であることやユーザーがア ップデートを実行する必要があること，開発言語が Android なら Java，iOS なら Swift など OS に よって様々なため，マルチプラットフォーム化する場合には複数のコード管理が必要となり，開 発やメンテナンスのコストが高く，時間もかかることが欠点である．
1.3.3. Web アプリケーション[3]
Web アプリケーションは，HTML5 をサポートするブラウザ上で実行可能なアプリケーション ソフトウェアである．Web ページを閲覧する感覚でアプリケーションを利用できる．Gmail や Google Drive，Youtube，Google Maps などが Web アプリケーションに該当する．ブラウザ上で実 行可能たため，デバイスへのインストールが不要であることやユーザーがアップデートをする必 要がない点，マルチプラットフォーム化が容易であり，開発やメンテナンスのコストが低く，時 間も比較的かからないことが利点である．その反面，インターネットに接続することが必須なた め，ネイティブアプリケーションと比べると動作速度が遅いことやデバイス固有の機能が活かし にくいことが欠点である． 1.3.4. ハイブリッドアプリケーション[3] ハイブリッドアプリケーションは，一見ネイティブアプリケーションのようであるが，中身は Web アプリケーションであるアプリケーションソフトウェアである．Cookpad，Wikipedia のスマ ホ向けアプリなどがハイブリッドアプリケーションに該当する．動作速度はネイティブアプリケ ーションより遅く，Web アプリケーションより速い．ネイティブに実装する部分はデバイス固有 の機能を活かすことが可能なことが利点である．その反面，デバイスへのインストールが必須で あることやユーザーがアップデートする必要があること，ネイティブに実装する部分があるため， ネイティブアプリケーションと同様に開発やメンテナンスのコストが高く時間もかかることが欠 点である． 図 6 は Android 版の Cookpad をスクリーンショット撮影したものである．左がインターネット 接続した状態のトップページであり，右がインターネット接続していない状態のトップページで ある．
6 図 6 Android 版 Coodpad のインターネット接続ありの場合となしの場合の比較 メインコンテンツの部分はインターネット接続をしていない場合は表示されていないが，メニュ ーの部分はネイティブに実装されているため表示されているのがわかる． 1.4. PDF 管理 Web アプリケーション制作の目的 既存の PDF 管理ソフトでは PDF ファイルの識別情報が不足しているため，本研究では，PDF ファイルの識別性を向上させることで，目的の PDF ファイルを探索する時間を短縮する PDF 管 理ソフトを制作する．PDF がマルチプラットフォームであるため PDF 管理ソフトもマルチプラ ットフォームであるべきであることやデバイス固有の機能を実装しないこと，アプリケーション の制作期間のことを考慮し，Web アプリケーションでの制作とする． 2. 使用技術 本アプリの開発は，クライアントサイドでは HTML5，CSS3，JavaScript で行い，サーバサイ ドでは Ruby 2.3.0，Ruby on Rails 4.2.6 で行う．
2.1. HTML
HTML（Hyper Text Markup Language）とは，Web ページの要素や構造を指定するためのマーク アップ言語である．HTML5 は HTML4.01 までのバージョンではプラグインなど HTML 以外の技 術を併用しないと実現できなかった技術が比較的シンプルに実現できるようになったものである． 例えば，HTML4.01 までで動画を扱うには Flash を用いていたが，HTML5 からは<video>タグを 使用することで動画を扱えるようになった．動画共有サービスの「Youtube」も 2015 年 1 月 27
7
日にデフォルトプレイヤーを Flash から HTML5 に移行した． 2.2. CSS
CSS（Cascading Style Sheets）とは，Web ページのスタイルを指定するための言語である． CSS2.1 では透過処理やグラデーション，アニメーションなどの JavaScript を用いなければできな かった表現を CSS3 では JavaScript がなくとも表現可能となっている． 2.3. JavaScript JavaScript とは，Web ページにおいてインタラクティブな表現をするためのオブジェクト指向 スクリプト言語である．HTML と CSS が Web ページを静的に表現するものであるのに対し， JavaScript は Web ページを動的に表現するために利用されている．マウスオーバーやマウスクリ ックなどのイベントを発端としたイベント処理など，動的な表現を Web サーバーとの情報の送 受信がなくとも Web ブラウザ上でリアルタイムに行えることが JavaScript の利点である． 2.4. Ruby Ruby とは，まつもとゆきひろ（通称 Mats）が開発したオープンソースのオブジェクト指向ス クリプト言語であり，数値も含めて徹底的にオブジェクト指向であることや人に優しい直感的な 文法であることなどの特徴がある．2005 年に Web アプリケーションフレームワークである Ruby on Rails の登場により有名になった．現在では Ruby 2.4.0 が最新版となっている．表 3 は中央情 報システム株式会社（広島）の協力の下，開発経験（7 年）のあるエンジニアでそれぞれ Ruby と Java，Perl で同機能を有する Web システムを，あえて Web アプリケーションフレームワーク を使わずに開発し，生産性の比較を行った結果である．[4]
使用言語 Java Ruby Perl
行数 （コメントを除く） 177 行 46 行 42 行 工数（製造+テスト の時間） 製造：8 時間 テスト：1 時間 製造+テスト： 2 時間 製造+テスト： 0.75 時間 読み込み
モジュール数 （require 数）19 （require 数）2 （require 数）4 動作条件 Servlet コンテナ必須 一般的な Http サー バー 一般的な Http サー バー 動作確認サーバー Tomcat Apache Anhttp （他 CGI 動作可能 サーバー） Apache Anhttp （他 CGI 動作可能 サーバー） 使用言語経験年数 7 年 0 年 （開発経験は 7 年） 5 年（開発経験は 7 年） 表 3 Ruby と多言語の生産性比較[4] この結果から，Ruby は経験年数が 0 年にもかかわらず，経験年数 7 年の Java と比較すると， 行数と工数，モジュール数において大きく上回り，生産性が圧倒的に勝っていることが証明され た．また，同じスクリプト言語であり，経験年数 5 年の Perl と比較すると，ほぼ同じ行数やモジ
8
ュール数であり，工数は下回っているが Ruby の経験を積めば Perl 以上の速度が実現する可能性 も考えられるだろう．
2.5. Ruby on Rails
Ruby on Rails とは Ruby 環境で利用できる代表的な Web アプリケーションフレームワークであ る．Web アプリケーションフレームワークとは Web アプリケーションの開発で共通した作業に 伴う労力を軽減するための枠組みである．現在では，Ruby on Rails 5 が最新バージョンとなって いる．
Ruby on Rails は CoC（Convention over Configuration）の原則に則っている．CoC は，設定より も規約を重視する思想である．例えば，Rails で user というモデル（データベースを操作するも の）を作成すると，Active Record::Base クラスを継承した User クラスを定義する user.rb が作成さ れる． Rails は開発者がテーブルと連携する設定をせずとも，Active Record::Base クラスを継承し たクラスとそのクラス名の複数形の名前のテーブルを自動的に連携する．つまりこの例の場合， User クラスと users テーブルを自動的に連携させる．この思想により，複雑な設定をすることな く，Rails の規則に従うだけで単純にアプリケーションを制作することが可能なため，開発生産 性が高い．また， Rails 開発者同士で共通ルールでのコミュニケーションを取ることが可能であ る．
Ruby on Rails は MVC パターンという設計モデルを採用しており，アプリケーションを Model， View，Controller という役割で分離している．Model はデータベースの操作などを担当し，View は HTML などの最終的な出力の描画を担当し，Controller は Model や View の制御など全体の管 理を担当する．Ruby on Rails で制作したアプリケーションで Web ブラウザがリクエストをして からレスポンスを受け取るまでの流れを図 7 に示す．
9 図 7 の解説を以下に記す．
① Web ブラウザが Web サーバーにリクエストを送る．
② Web サーバーが①の手順で Web ブラウザから送られてきたリクエストを受け取り，解釈し， 必要なデータを取得する．リクエストが CSS や JavaScript，画像など頻繁に変化しないファ イルで Ruby on Rails アプリケーションの処理を必要としないものであれば，Web ブラウザに レスポンスを返し，一連の動作は完了する． リクエストが Ruby on Rails アプリケーションの 処理を必要とするものであれば，アプリケーションサーバーにリクエストを送る[5].
③ アプリケーションサーバーが②の手順で Web サーバーから受け取ったリクエストを Ruby on Rails アプリケーションに送る．アプリケーションサーバーとは Ruby on Rails アプリケーショ ンを動作させているものである[5]．
④ Ruby on Rails アプリケーションの router が③の手順でアプリケーションサーバーから受け取 ったリクエストを元に Controller にアクションメソッドを実行するように指示する．アクシ ョンメソッドとは Model に対する命令やテンプレート変数（View で使う変数）の設定などの 処理をするメソッドである． ⑤ Controller が④の手順で指定されたアクションメソッドを実行し，Model にデータベースを操 作するような命令を送る．データベースの操作が必要ない場合は，この手順は行われない． ⑥ Model が⑤の手 順で Controller か ら受け た命令を 元にデー タベース を操 作し， 結 果を Controller に返す．⑤の手順が行われていない場合は，この手順も行われない．
⑦ Controller が⑥の手順で Model から受け取った結果をテンプレート変数に代入し，View に送 る．
⑧ View が⑦の手順で Controller から受け取った結果などを用いて HTML を作成し，Controller に返す． ⑨ Controller が⑧の手順で受け取った HTML をレスポンスとしてアプリケーションサーバーに 返す． ⑩ アプリケーションサーバーが⑨の手順で受け取ったレスポンスを Web サーバーに返す． ⑪ Web サーバーが⑩の手順で受け取ったレスポンスを Web ブラウザに返す． 3. PDF 管理 Web アプリケーションについて 今回開発した PDF 管理 Web アプリケーションは PDF ファイルの識別性を向上させることで目 的の PDF ファイルの探索時間を短縮化することを目的としたアプリケーションである．アプリ ケーション名は，コンピューターにおいてファイル等を閲覧・検索するアプリケーションソフト ウェアという意味で使われる Explorer と PDF を組み合わせて「Expdf」とした． 3.1. 推奨動作環境 本アプリケーションは Web アプリケーションであり，Web ブラウザ上で動作するため，環境 に依存せず動作することができる． 3.2. 機能 本アプリケーションに実装する主な機能を列挙する．
10 ユーザーアカウント機能 サムネイル表示 ルーペ機能 リスト表示 PDF ファイル情報編集機能 絞り込み検索 並び替え機能 アップロード それぞれの機能について詳細に解説していく． 3.2.1. ユーザーアカウント機能 本アプリケーションはユーザーごとに PDF ファイルを管理するため，ユーザーアカウント登 録を必須としている．ユーザーアカウント登録をするには本アプリケーショントップページ（図 8）の白い「ユーザー登録」ボタンをクリックすることでユーザー登録ページ（図 9）に移動す る． 図 8 本アプリケーショントップページ
11 図 9 ユーザー登録ページ ユーザーアカウントの情報としてはユーザー名，メールアドレス，パスワードを設定しており， 空白は認めないように設定している．ユーザー名はユーザーページでログインしたユーザーが自 分のページであることを確認してもらうため，メールアドレスは大事な連絡やログイン，パスワ ードはログインのために使うことを想定して設定した．パスワードの長さは 8 文字以上に制限す るのが一般的であるが，PDF 管理に重度のセキュリティを設定する必要はないと考え，覚えやす さや入力文字数を優先し，6 文字とした．青い「ユーザーを登録」ボタンをクリックすることで ユーザー登録が完了し，ログインした状態でユーザーページに移動する．ユーザー情報が適切で ない場合は「ユーザーを登録」ボタンをクリックするとユーザー登録は失敗し，再度ユーザー登 録ページが表示され，エラーメッセージが表示される．図 10 は何も情報を入力せずに「ユーザ ーを登録」ボタンをクリックした場合の例である． 図 10 ユーザー登録に失敗した例
12 すでにユーザー登録をしている場合はトップページからログインすることでユーザーページに 移動する（図 11）． 図 11 トップページのログイン機能の部分 ユーザー名は名前が同じ人が存在する可能性を考慮して重複ありに設定しており，メールアドレ スは重複なしで設定しているため，アカウントを識別するための情報としてメールアドレスと本 人確認のためのパスワードをログイン情報として選択した．また，チェックボックスにチェック することで cookie が削除されない限りはブラウザを閉じた後でもログイン状態を保持する機能を 実装した． 青い「ログイン」ボタンをクリックすることでログインし，ユーザーページに移動 する．メールアドレスとパウワードが一致しなかった場合は再度トップページを表示する． ユーザーアカウント情報の編集はログインしている状態でヘッダーの右から 2 番目にある「ア カウント設定」からアカウント設定（図 12）のページに移動して行う． 図 12 アカウント設定ページ 変更したい情報を入力し，青い「変更を保存」ボタンをクリックすることで変更が完了し，ユー
13 ザーページに移動する．ユーザー情報が適切でなかった場合は，再度アカウント設定ページを表 示し，ユーザー登録と同様にエラーメッセージを表示する． また，アカウント設定ページの最下にある赤い「このアカウントを削除」ボタンをクリックす ることでアカウントを削除することができる．アカウントを削除するとそのアカウントでアップ ロードした PDF ファイルもすべて削除される．誤クリックによるアカウントの削除を防ぐため， 削除する際には確認アラートを出すようにしている（図 13）． 図 13 アカウント削除の確認アラート 3.2.2. サムネイル表示 PDF ファイルを識別できるようにするため，PDF の最初のページをサムネイルとして表示する 機能を実装している．背景を本棚にすることで書籍を並べているよう表現にした（図 14）．サ ムネイル下のファイル名をクリックすることで PDF ファイルが開く． 図 14 サムネイル表示の様子 また，最初のページをそのまま表示するのではなく，上下それぞれ 5％分余白をカットしてい る．これにより，不要な縦幅をとらないためページスクロールをなるべく少なくなるようにして いる．図 15 は Microsoft Office Word で余白を狭いで設定し，PDF 形式で保存したファイルであ る．上下 5％にしたのは，余白を狭いで設定してもぎりぎり隠れないようにするためである．
14 図 15 余白を狭いで設定した PDF ファイル 当初は HTML5 の<embed>タグを用いて PDF の全ページを読み込み，埋め込んでいた（図 16）． しかし，全ページ読み込むのは最初のページだけを読み込むのに比べ時間がかかることや拡大を 行うのにマウスクリックが必要である点から，現在は最初のページのみを表示し，ルーペ機能を 実装することにした． 図 16 以前の<embed>タグを用いた PDF の埋め込み
15 3.2.3. ルーペ機能 視力が悪いためにサムネイル画像から内容が読み取れない人が存在する可能性に配慮して，マ ウスオーバーでサムネイル画像を拡大するルーペ機能を実装した．図 16 はルーペ機能で拡大し ている様子である． 図 16 ルーペ機能で拡大している様子 3.2.4. リスト表示 サムネイル表示だけでなく，PDF ファイル情報を管理し，それを元に PDF を探索する人のこ とも考慮して，様々な PDF ファイル情報を項目として持つリスト表示機能を実装した．表示方 法を変更するには，表示方法のテキストまたは左のラジオボタンをクリックすることで変更でき る．リスト表示の様子と表示方法を変更する場所を図 17 に示す． 図 17 リスト表示の様子と表示方法変更
16 PDF ファイル情報のそれぞれの項目の解説を以下に記述する． ファイル名：PDF ファイルの元々のファイル名がアップロード時に設定される．変更できな いように設定してある． 著者：PDF ファイルの著者や作者をユーザーがアップロード時や編集で設定する． キーワード：PDF ファイルを一意に識別するためにユーザーが PDF ファイルの内容を連想 させる単語などをアップロード時や編集で設定する． タグ：PDF ファイルの分野やグループをユーザーがアップロード時や編集で設定する． 閲覧回数：PDF ファイルを閲覧した回数が入る．PDF ファイルのリンクをクリックするごと にカウントアップされる．編集で閲覧回数をリセットすることができる． 最終閲覧日時：PDF ファイルを最後に閲覧した日時が PDF ファイルのリンクをクリックす るごとに自動的に設定される． アップロード日時：PDF ファイルがアップロードされた日時がアップロード時に自動的に設 定される． 更新日時：PDF ファイルが更新された日時が自動的に設定される．初期値としてはアップロ ード日時が設定され，その後は PDF ファイルの編集やリンクがクリックされる度に変更さ れる． 3.2.5. PDF ファイル情報編集機能 PDF ファイルの情報をアップロード時に間違えて設定した場合や後で変更したくなる場合を想 定し，PDF ファイル情報を編集できる機能を実装した．サムネイル表示の場合はファイル名の左 下の「編集」ボタン（図 18）をクリックすることで PDF 情報編集ページに移動する．リスト表 示の場合はリストの項目右から 2 番目の「編集」リンク（図 19）をクリックすることで PDF 情 報編集ページに移動する．PDF 情報編集ページを図 20 に示す．変更できる PDF 情報は著者，キ ーワード，タグ，閲覧回数である．著者，キーワード，タグはテキストボックスに変更内容を記 述する．閲覧回数はリセットのみであり，「閲覧回数をリセットする」の左のチェックボックス にチェックを入れることで 0 回に設定する．青い「変更を保存」ボタンをクリックすることで変 更が完了し，ユーザーページに移動する． また，PDF の削除は「編集」ボタン，「削除」リンクの右にある「削除」ボタン（図 18）， 「削除」リンク（図 19）をクリックすることで行える．誤クリックで間違えて削除してしまう リスクを考慮し，確認のアラートを出すようにしている（図 21）．
17
図 18 編集ボタンと削除ボタン
図 19 編集リンクと削除リンク
18 図 21 PDF 削除の確認アラート 3.2.6. 絞り込み検索 管理する PDF ファイルが増えてくると目的の PDF ファイルを探索することが困難になるため， 絞り込み検索機能を実装することで，PDF 情報を元に絞り込み，目的の PDF の探索時間を短縮 する．図 22 に絞り込み検索の場所を示す． 図 22 絞り込み検索 ファイル名，著者，キーワード，閲覧回数はテキストボックスに記述する．タグはファイル名な どと比べて数が少なくなると思われるのでプルダウンメニューから選択する形にした．アップロ ード日，更新日，最終閲覧日は「日付選択」ボタンをクリックしてカレンダーを表示し，日付を 選択して指定する．以前は年，月，日をそれぞれプルダウンメニューで選択する形にしていた （図 23）が，本研究室のランチミーティングの際，それぞれ指定するのは操作が多いという指 摘を受けたためカレンダーからの選択（図 24）に変更した．カレンダーの日付の背景色を今日 を黄色，選択している日付を緑，アップロードや更新，最終閲覧された日をグレーとすることで 期間の選択を容易にしている． 図 23 プルダウンメニューによる日付の指定
19 図 24 カレンダーによる日付の指定 すべての項目を埋めなくとも検索を実行することが可能である．以前はテキストボックスやプ ルダウンメニューは空白だったが，本研究室で行われたランチミーティングの際，未入力のまま でも検索ができることを明示した方がいいという指摘を受け，テキストボックスはプレースホル ダーとして未入力も可，プルダウンメニューは未選択も可と表記するように変更した．ピンクの 「検索」ボタンをクリックすることで検索が実行される． 3.2.7. 並び替え機能 目的の PDF ファイルを探索する時間を短縮するための機能として，PDF ファイル情報を基に した並び替え機能を実装している．プルダウンメニューから並び替えの基準となる項目を選択す ることで並び替えが行われる（図 25）． 図 25 並び替え機能 並び替えの基準となる項目を以下に記述する． アップロード日時が新しい順 アップロード日時が古い順 更新日時が新しい順 更新日時が古い順
20 最終閲覧日時が新しい順 最終閲覧日時が古い順 閲覧回数が多い順 閲覧回数が少ない順 ファイル名の昇順 ファイル名の降順 著者の昇順 著者の降順 キーワードの昇順 キーワードの降順 タグの昇順 タグの降順 アップロードした日時が新しいファイルを閲覧する場合が多いであろうと考えたため，デフォル トでは LIFO（Last In, First Out）である「アップロード日時が新しい順」に設定した．
3.2.8. アップロード Expdf にファイルを追加する方法としてアップロード機能を実装している（図 26）．アップロ ードする際に同時に著者，キーワード，タグを設定できる．1 度に複数のファイルを指定し，ア ップロードすることができる．複数のファイルを指定する場合に著者，キーワード，タグを設定 する場合は，指定したファイルすべてに設定した情報が設定される． 図 26 アップロード機能 また，以前は絞り込み検索や並び替え，表示方法，アップロードの位置が図 27 のようだった． 図 27 以前の様々な機能の位置 これは機能を実装した順に左から右に並べただけであった．しかし，本研究室で行われたランチ ミーティングの際，使う頻度が高いものから並べたほうがいいという指摘を受け，現在の絞り込
21
み検索，並び替え，表示方法，アップロードという順にした． 4. セキュリティ
本アプリケーションのセキュリティを強化するため，SSL（Secure Sockets Layer）を用いてい る．これはローカルのサーバーからネットワークに流れる前に，大事な情報を暗号化する技術で ある．これによりパケットスニッファという LAN 上を通過するトラフィックを監視するソフト ウェアによる cookie の取り出しを防ぐ． また，データベースにパスワードを保存する際に，そのまま保存するのではなく，ハッシュ化 したものを保存するようにしている．これにより，データベースに保存されたパスワードを盗ま れたとしても，パスワードの安全性が保たれる． さらに，Rails のデフォルトで備わっている機能により，「<」，「>」，「&」などの HTML タグとして意味のある文字が入力された際に自動的にエスケープされる．これにより，クロスサ イトスクリプティングという入力フォームに悪意のあるコードを埋め込むことで，強制的にペー ジを移動することやクッキー情報を不正に取得することなどの脅威を防いでいる． 5. まとめ 本研究では，PDF 管理 Web アプリケーションを完成させた．サムネイル表示機能やルーペ機 能を実装して視覚的にファイルを識別しやすくした．また，管理するファイルが大量な場合のフ ァイル探索時間を短縮するために絞り込み検索や並び替え機能を実装した．Android や iOS 向け のハイブリッドアプリケーションを制作すればスマートフォンやタブレットでのユーザビリティ がさらに高まったであろうと考える． 本研究を通して，アプリケーションの開発を行う中でランチミーティングの際に徐 丙鉄教授， 情報物理研究室のメンバーから機能の提案やユーザーが使い方を理解しやすくなるようなデザイ ンにするための指摘を受けることで，私 1 人ではできなかったであろうレベルまでユーザビリテ ィを高めることができたと考える．これは，これから情報技術者として活躍する上で貴重な経験 となったと思う． 6. 参考文献 [1] iOS が増加 - 12 月 OS シェア(モバイル) | マイナビニュース <http://news.mynavi.jp/news/2017/01/03/084/> (アクセス 2017 年 1 月 28 日) [2] Windows 7/10/XP が増加 - 12 月 OS シェア | マイナビニュース <http://news.mynavi.jp/news/2017/01/03/043/> (アクセス 2017 年 1 月 28 日) [3] アプリ部 | あなたの毎日に，もっと役立つアプリを． 「ウェブアプリとネイティブアプリの 違い｜抑えておくべき 7 つの項目」 <https://appbu.jp/webapps-nativeapps> （アクセス 2017 年 1 月 28 日） [4] ちゅうごく地域 Ruby ビジネス活用研究会．(2009)“ちゅうごく地域 Ruby ビジネス活用研究
22
会 報 告 ” <http://www.chugoku.meti.go.jp/denshijyoho-hp/partner/uploaded/files/H21rubyreport.pdf P.15..>
[5] Rails 開発における web サーバーとアプリケーションサーバーの違い（翻訳） - Qiita < http://qiita.com/jnchito/items/3884f9a2ccc057f8f3a3> （アクセス 2017 年 1 月 26 日）
