沖縄地区

教育システム情報学会 2014年度学生研究発表会

琉球大学公式 Web サイトにおけるスマートフォンサイトの構築
Construction of smartphone sites in University of the Ryukyus official Website
安慶名 和人 *1 谷口 祐治 *2
Kazuto AGENA*1 Yuji TANIGUCHI*2*1 国立大学法人琉球大学 工学部 情報工学科*1 Department of Information Engineering, Faculty of Engineering, University of the Ryukyus*2 国立大学法人琉球大学 総合情報処理センター*2 Computing and Networking Center, University of the Ryukyus
Email: agena@osn.u-ryukyu.ac.jp, taniguchi@cc.u-ryukyu.ac.jp
あらまし：昨今のスマートフォンやタブレット端末の爆発的な普及により、Web サイトを構築する際にはモバイル端末からの見やすさ、使いやすさを考慮して構築する必要が出てきた。しかし、琉大公式
Web サイトは未だにモバイル対応を行っていない. そこで今回の研究では、静的サイトジェネレータである jekyll を利用し、代表的なモバイル対応方法であるレスポンシブデザインを琉大公式 Web に取り入れることを試みた。
キーワード：レスポンシブデザイン、jekyll、Web サイト

1.

はじめにデータベースを必要としないテンプレート化の可能なサイトでの使用を目的としている.

総務省の平成 26 年度情報通信白書[1]によると,
世界の携帯電話販売台数に占めるスマートフォン端末の比率はスマートフォン端末が台 頭 し 始 め た2009 年(平成 21 年)では約 27%にすぎなかったが, その比率は拡大を続け, 来年 2015 年(平成 27 年)では世界市場において 5 割を超える見通しとなっている.
この流れを受け, Web サイトを構築する際は従来の PC からの見やすさ使いやすさだけではなく, モバイル端末から見たときの見やすさ, 使いやすさも考慮する必要性が出てきた.
しかし琉球大学公式 Web サイト(以下, 琉大公式Web)では, そのような構築手法を導入せず, 未だにモバイル端末で見た際の見やすさ, 操作しやすさが考慮されていない状態である. このことに問題を感じた著者は, 琉大公式 Web を, 代表的な Static SiteGenerators のアプリケーションである jekyll を用いて、レスポンシブデザイン化することを試みた。

2.

SSG と似たツールに, WordPress や MovableType といった CMS(Content Management System)が挙げられるが,1. データベースを必要としない.
2. ページを生成してコンテンツを設置するだ
けなので, サーバ側の負担が少ない.
3. 最終的に静的なサイトを生成するので, CGIの脆弱性に対応する必要がない.という違いがある. 琉大公式 Web ではデータベースを必要としない静的なページで構成されているため,CMS よりも SSG を使用したほうが都合が良い.
2.3 jekyll
SSG には非常に多くの種類[2]があるが, その中で今回研究で選択した SSG は jekyll である.
jekyll を採用した理由は以下の 3 つである.

技術概要

1.

2.1 レスポンシブ Web デザイン
レスポンシブデザインとは, 2010 年 5 月米国マサ
チューセッツ州の Web デザイナの Ethan Marcotte 氏によって紹介された Web サイト制作手法で, 画面サイズに合わせて Web ページ上のコンポーネントを動的に移動, あるいは変形することでどの端末からWeb ページを閲覧しても見やすい Web ページを作成することが可能となる.

2.

3.

3.

2.2 Static Site Generators
Static Site Generators(以下, SSG)とは, 記事のテキストファイルや, テンプレート用ファイルを元にしてHTML を生成するツールのことである. ブログなど,Github のプロジェクトは 400 人を超えるコントリビュータによって jekyll の改良が盛んに行われているため.
Github のページで star の数が最も多く, 多くのユーザが使用している SSG であるため,他の SSG よりもドキュメント量が多い.
公式サイトの日本語翻訳サイト[3]があるた
め.

構築作業

3.1 モックアップの作成
現行の Web サイトをレスポンシブ Web デザインで書きなおすため, 最初に参考とするためのモック

173

教育システム情報学会 2014年度学生研究発表会

沖縄地区

3.2 Web サイトの構成
jekyll では_posts 以下の markdown を元にして HTMLの生成を行うため, すべての記事は_posts 以下に配置されることになる. 例えば, 琉大の学生や琉大で催されたイベントの詳細などを記載している
http://www.u-ryukyu.ac.jp/top_news/を実現するには,top¥_news というディレクトリを¥_posts の直下に配置し markdown で記事を記入しておけば良い. そうしておくとコマンドラインで jekyll build を実行した
際に_sites の直下に top_news というディレクトリとその直下に記事の HTML が設置されるのである.

アップ(模型)を作成した. PC 用のモックアップを図1 に示す.
モックアップを作成する際は,
1. 更新情報の表示領域が小さく, クリックしづら
いこと.
2. ヘッダの｢琉球大学へのアクセス｣, ｢問い合わせ一覧｣と言ったリンクの装飾が貧弱であること.
3. ヘッダ上部の｢大学情報｣, ｢学部･院等｣といった水色のリンクのすぐ下に, ｢入学希望者の皆様へ｣,｢在学者･保護者の皆様へ｣といったリンクがあるため, 誤ってリンクをクリックしてしまう可能性があること.
これらを解消するように設計した.
次に, スマートフォン用のモックアップを図 2 に示す.
スマートフォン用のモックアップでは, カルーセ
ルの上部と下部のリンク, そしてバナーリンクをモックアップの右に描いているようにドロップダウンで表示するようにした.

3.3 ページヘッダの作成
まず最初にページの共通部分の作成作業を行った.
最初に行ったのはヘッダの作成である. jekyll では共通部分の HTML ファイルを_includes に置いている
ので, このディレクトリ内の header.html と,css/main.scss と_sass/_layout.scss の 2 つの SCSS ファイルを編集した.
3.4 ページフッタの作成
次にフッタの作成を行った. フッタのテンプレート
HTML ファイルは_includes/_footer.html, SCSS ファイ
ルは_sass/_layout.scss 内に記入る.
header.html を編集しながら, ヘッダを修飾する
SCSS ファイルの編集も行い, ブラウザで表示を行いながら開発を行った. 編集した SCSS ファイルはcss/main.scss と_sass/_layout.scss である.

4.

まとめ

本研究では, 琉大公式 Web の改善案となるモックアップの作成を行い, 次に共同研究者である大城佳明
さんと共同開発を行うことで琉大公式 Web のヘッダとフッタの共通化を行うことが出来た.

5.
図1

今後の課題

今後も引き続き大城氏と開発を続ける. 今現在進行しているトップページの作成を行った後, 現行の琉大公式 Web の Web ページをスクリプトを用いてmarkdown 化し, 作成した jekyll プロジェクトへ統合した後, 既存の琉大公式 Web と差し替えることを目標とする. 最終的な成果物は, 大城氏の研究成果として紹介される予定である.

PC 用モックアップ

参考文献(1) 総務省｜平成 24 年版 情報通信白書 – スマー
トフォン等の急速な普及と端末市場の変化
http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h24/html/nc122110.html(2) Top Open-Source Static Site Generators - StaticGen
https://www.staticgen.com/(3) Jekyll • シンプルで、ブログのような、静的サイト
図2

http://jekyllrb-ja.github.io/

スマートフォン用モックアップ

174