メモ的ななにか。

プログラミング関係の備忘録的な何か。

レスポンシブデザインとRuby CGIでモバイルフレンドリー(?)なWebサイトが作れるか試してみた


スポンサーリンク

今月のGoogleが行ったモバイルフレンドリーアップデートにより、モバイルユーザビリティーが検索結果に反映されることになりました。www.seohacks.net

こちらの記事を読み、自分が運営しているサイト「あんどろオレンジ工房」もそろそろスマートフォン対応させたいなと思ったわけです。

最近はWordPressやMovableTypeなどのCMSで簡単に作れたりしますが、そんな今時なぜCGIなのか!と思われる方も多いでしょう。

その理由は、私が面倒くさがり屋で使い慣れているRubyでサクっと作れそうだからです!(マテ
それと他の人がやってなさそうなので!

それにレスポンシブデザインを学ぶいい機会ですしね!

はたして無事にWebサイトのリニューアルができるのでしょうか!?

目次

  1. コンセプト
  2. デザイン
  3. HTML作成
  4. CGI化
  5. レンタルサーバにアップロード
  6. 動作確認
  7. 結果
  8. 課題

1. コンセプト

  • 無料レンタルサーバでも使える汎用性のあるWebサイト構築システムにする
  • 環境依存性の低いCGIでシステム構築、移行を容易にする
  • レスポンシブデザインによるマルチデバイス対応させる

ただ単に開発も運用も楽したい、というだけかもしれません!

2. デザイン

f:id:miz7maki:20150425020037p:plain
f:id:miz7maki:20150425020052p:plain

今回はCacooというWebサービスを利用してモックアップ(ワイヤーフレーム)を作りました。
無料プランの場合はPNGファイル出力しかできません。作成できる総シート数も25枚です。
有料プランだとPDF, PPT, PS, SVG, PNGファイル出力、総シート数も1,000枚~と機能制限が解除されます。
ビジネスプランだと複数人で共同利用もできるようになります。
作成したモックアップの共有や標準搭載されているチャットを使ってグループメンバーどうしで連携をとることもできるみたいですね!
今回のようにちょっとしたプロトタイプデザインだけあれば無料プランでも十分かもしれません!

3. HTML作成

まずはある程度の下地を作ろう!

まずはモックアップに沿ってある程度のHTML、CSS、javascriptを作っておきます。
作ったCSSはコピーしてPC用、タブレット用、スマートフォン用の3つのCSSファイルに分け、
メディアクエリを使い、画面サイズによってCSSを切替えるようにします。
あとはWebブラウザのウィンドウをリサイズし、バランスを見ながら各デバイス用のCSSを調整していきます。
以前書いた記事を参考にメディアクエリを組み込んでいきます。mizna.hatenablog.com


PC
f:id:miz7maki:20150430020027p:plain

タブレット
f:id:miz7maki:20150430020026p:plain

スマートフォン
f:id:miz7maki:20150430020301p:plain

スライドショーを実装しよう!

トップページにスライドショーがあると伝えたいことを視覚的に表現できるので、訪問者さんに真っ先に見てもらいたいものがあるときには非常に効果的です!
今回はFlexSlider2というものを使わせてもらいました!
jQuery1.11.1と組み合わせて使用してみましたが、特にこれといったバージョン互換の問題もなく動いてくれています。

Flexslider2読み込み
<script type="text/javascript" src="./js/lib/jquery.flexslider-min.js"></script>
javascript
<script type="text/javascript">
// 画像スライドショー
$(window).load(function(){
	$('.flexslider').flexslider({
		animation: "slide",
		pauseOnAction: false,
		slideshowSpeed: 5000,
		controlNav: true,
		directionNav: false
	});
});
</script>

animation: 画像切り替えのエフェクトを指定できます。スライドショーにしたいので"slide"を指定します。

pauseOnAction: コントロールナビ(スライドショーの下の●)などの操作後に自動再生するかどうか。自動再生を有効にする場合はfalseを指定します。

slideshowSpeed: スライドショーの切り替わるまでの時間(ms)です。今回は5秒間隔なので5000を指定しました。

controlNav: コントロールナビ(スライドショーの下の●)を表示するかどうか。表示する場合はtrueを指定します。

directionNav: ディレクションナビ(スライドショー左右端に次の画像、前の画像を表示するための操作ボタン)を表示するかどうか。表示させる場合はtrueを指定します。

そのほかにもサムネ表示や動画貼り付けなどカスタマイズできます。
サムネ表示にすればフォトギャラリーなんかも作れそうですね!

HTML
<div class="flexslider">
	<ul class="slides">
		<li><a href=""><img src="./image/top001.jpg" /></a></li>
		<li><a href=""><img src="./image/top002.jpg" /></a></li>
		<li><a href=""><img src="./image/top003.jpg" /></a></li>
	</ul>
</div>

4. CGI化

Webrickでテスト環境を作ろう!

Webrickを使うと簡単にWebサーバが作れるので、これを使ってローカルテストサーバを立てます。
ノートPC、ネットブックなどにRubyがインストールされていれば、USBフラッシュメモリにWebrick入れてどこでもCGI開発できて超便利!
メインで使用しているノートPCはWindows、持ち運び用に先日購入したネットブック"Aspire 1410"はLinuxなのでRubyスクリプトをそれぞれ作ってみました。
共通項目は設定(.conf)ファイルから読み込むようにしています。

Windows用スクリプト(WebrickServer_win.rb)
require 'webrick'
PROFILE_NUM = 1
CGIINTERPRETER = "C:/Ruby22/bin/ruby.exe" # Rubyのインストールされている場所を指定。個々で変更が必要です。

include WEBrick
module WEBrick::HTTPServlet
  FileHandler.add_handler('cgi',CGIHandler)
end

initFile = "WebrickServer.conf"
hash = Hash.new
File.open(initFile,'r'){|file|
	file.each{|line|
		elems = Array.new
		line.split('=').each{|e|
			elems << e.gsub(/\\/,'/').chomp unless e == nil
		}
		hash.store(elems[0],elems[1])
	}
}

document_root = File.join(hash['DOCUMENTROOT'])
ip_address = hash['IPADD_PROFILE' + PROFILE_NUM.to_s]
port = hash['PORT']
cgi_interpreter = CGIINTERPRETER

puts "*** Webrick Status ***"
puts "Document Root   : #{document_root}"
puts "IP Address      : #{ip_address}"
puts "Port            : #{port}"
puts "CGI Interpreter : #{cgi_interpreter}\n\n"
puts "*** Server Starting ***"

s = HTTPServer.new(
  :BindAddress => ip_address,
  :Port => port,
  :DocumentRoot => document_root,
  :CGIInterpreter => "\"#{cgi_interpreter}\""
)

trap("INT"){
s.shutdown
}

s.start
Linux用スクリプト(WebrickServer_linux.rb)
#!/usr/bin/ruby
require 'webrick'
PROFILE_NUM = 1
CGIINTERPRETER = "/usr/bin/ruby" # Rubyのインストールされている場所を指定。個々で変更が必要です。

include WEBrick
module WEBrick::HTTPServlet
  FileHandler.add_handler('cgi',CGIHandler)
end

initFile = "WebrickServer.conf"
hash = Hash.new
File.open(initFile,'r'){|file|
	file.each{|line|
		elems = Array.new
		line.split('=').each{|e|
			elems << e.gsub(/\\/,'/').chomp unless e == nil
		}
		hash.store(elems[0],elems[1])
	}
}

document_root = File.join(hash['DOCUMENTROOT'])
ip_address = hash['IPADD_PROFILE' + PROFILE_NUM.to_s]
port = hash['PORT']
cgi_interpreter = CGIINTERPRETER

puts "*** Webrick Status ***"
puts "Document Root   : #{document_root}"
puts "IP Address      : #{ip_address}"
puts "Port            : #{port}"
puts "CGI Interpreter : #{cgi_interpreter}\n\n"
puts "*** Server Starting ***"

s = HTTPServer.new(
  :BindAddress => ip_address,
  :Port => port,
  :DocumentRoot => document_root,
  :CGIInterpreter => "\"#{cgi_interpreter}\""
)

trap("INT"){
s.shutdown
}

s.start
設定ファイル(WebrickServer.conf)
[Webrick]
IPADD_PROFILE1=localhost
IPADD_PROFILE2=192.168.11.100
PORT=8000
DOCUMENTROOT=www
ディレクトリ構成

WebrickServer_win.rb
WebrickServer_linux.rb
WebrickServer.conf
/www ←このディレクトリに作ったcgiファイルを入れます

上記のままWebrickサーバを起動すると自PC内のみでCGIの動作テストができます。
CGIはWebブラウザのアドレス枠に"http://localhost:8000"と入力し、アクセスするとこで確認できます。

ちなみに"WebrickServer.conf"のIPADD_PROFILE2をWebrickサーバ機のローカルIPアドレスに、"WebrickServer.rb"のPROFILE_NUMを2に変更してWebrickサーバを起動すると、LAN内のほかのPCからも確認できるようになります!

CGIでヘッダーとヘッダーを外部ファイル化しよう!

HTMLのヘッダーとフッターの部分をCGI外部ファイル化すると他の新しく作るページでも使い回しができるので便利です!
こんな感じで!

index.cgi
#!/usr/local/bin/ruby
# -*- coding: utf-8 -*-
require 'cgi'
require 'kconv'
require './rb/header' # ヘッダーファイルの読み込み
require './rb/footer' # フッターファイルの読み込み
print "Content-type: text/html\n\n"
cgi = CGI.new
header = Header.new({
		:title=>"あんどろオレンジ工房",
		:keywords=>"Androidアプリ,Webアプリ,あんどろオレンジ工房",
		:description=>"Androidアプリの製作を行っている「あんどろオレンジ工房」のWebページです。実用系、おもしろ系をメインに作成しています。",
		:author=>"miz7maki",
		:language=>"ja"
	})
header.js
・
・
・
(以下略)
・
・
・
Footer.new
./rb/header.rb
#!/usr/local/bin/ruby
# -*- coding: utf-8 -*-

class Header
	def initialize(hash)
		print <<EOS
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="keywords" content="#{hash[:keywords]}">
		<meta name="description" content="#{hash[:description]}">
		<meta name="author" content="#{hash[:author]}">
		<meta http-equiv="content-language" content="#{hash[:language]}">
		<link rel="stylesheet" type="text/css" href="./css/lib/flexslider/flexslider.css" />
		<link rel="stylesheet" media="screen and (min-width: 769px)" type="text/css" href="./css/style.css" />
		<link rel="stylesheet" media="screen and (max-width: 768px)" type="text/css" href="./css/tablet.css" />
		<link rel="stylesheet" media="screen and (max-width: 640px)" type="text/css" href="./css/smart.css" />
		<script type="text/javascript" src="./js/lib/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="./js/lib/jquery.flexslider-min.js"></script>
		<link rel="shortcut icon" href="./icon/favicon.ico" />
		<title>#{hash[:title]}</title>
		<script type="text/javascript">
EOS
	end

	def js
		print <<EOS
// javascriptを記述
EOS
	end
end
./rb/footer.rb
#!/usr/local/bin/ruby
# -*- coding: utf-8 -*-

class Footer
	def initialize
print <<EOS
		<div id="footer">
			(C) 2015 <a href="./">あんどろオレンジ工房</a>
		</div>
	</body>
</html>
EOS
	end
end

カテゴリ(ナビゲーション)表示

f:id:miz7maki:20150501010124p:plain
ALL、Androidアプリ、Webアプリ、それぞれクリックしたときにカテゴリ別にエントリー表示とともにナビゲーションをアクティブにしたかったので。
今回はjavascriptじゃなくてCGIで簡単に実装しました!

index.cgi
# ナビゲーション アクティブ表示
li = Array.new
if cgi['ca'] == "android" then
	li = ['','class="active" ','']
elsif cgi['ca'] == "web" then
	li = ['','','class="active" ']
else
	li = ['class="active" ','','']
end
print <<EOS



<div class="category">
	<ul>
		<li><a #{li[0]}href="./">ALL</a></li>
		<li><a #{li[1]}href="./index.cgi?ca=android">Androidアプリ</a></li>
		<li><a #{li[2]}href="./index.cgi?ca=web">Webアプリ</a></li>
		<li><a href="http://mizna.hatenablog.com/">ブログ</a></li>
	</ul>
</div>



EOS

あとはやることやったらデバッグしようぜ!

とらいあんどえらー!でばっぐでばっぐ!( ゚∀゚)o彡°

5. レンタルサーバにアップロード

テスト用のcgiファイルを作りアップロードしてうまく動くか確認します。
サーバエラーが表示された場合は原因を探しましょう!

500エラーでよくあるのがcgiファイルやディレクトリのパーミッション間違え、Content-Type出力し忘れ、rubyパスの指定ミスです。

cgiファイルとディレクトリのパーミッションは755で動きました。

Content-Typeの出力に関してはrequire 'cgi'の後、CGI記述の前に以下のように書きましょう。

require 'cgi'

print "Content-type: text/html\n\n"

cgi = CGI.new

レンタルサーバでCGIを動かすためには実行パスを指定してあげる必要があります。
さくらインターネットのレンタルサーバの場合は"/usr/local/bin/ruby"にRubyがインストールされているので、以下のように書きました。
レンタルサーバによって実行ファイルのインストールされている場所が違うので確認しましょう!

#!/usr/local/bin/ruby
require 'cgi'

エラーが解消できたら実際のcgiファイルにも適用してアップロードしましょう!

6. 動作確認

あとは動作確認しておかしなところがあればすかさずデバッグします。
コンテンツの一部が表示されなかったら「ページのソースを表示」や「要素を検証」などでどこで処理が躓いているのか、Webrick環境でテストして出力されたバックトレース(エラー出力)から何行目でどんなエラーが起きているのか確認してその部分を修正しましょう。
レンタルサーバだとエラーログファイルを書き出してくれるところもあるみたいですね!さくらレンサバもその形式でした!

あとは恒例のアレです。

さぁみんなで・・・

とらいあんどえらー!でばっぐでばっぐ!( ゚∀゚)o彡°

7. 結果

andorange.sakura.ne.jp

レスポンシブデザインでスマートフォンやタブレットにも対応!

応答時間も悪くはないんじゃないでしょうかね!

どこまでモバイルフレンドリーになったのかは謎です(マテ

8. 課題

  • 簡単なCMS化
  • Webコンテンツの盛り込み
  • 更なるモバイルフレンドリーを目指す

久しぶりにブログ書けたと思ったら、なんか凄く長くなってしまい最後の方がグデグデになってしまいましたw
さすがに長文書くのはシンドイ!これも慣れなんでしょうかね!

それでは!ヾ( ´ー`)ノ

モバイルフレンドリーから始めるスマホSEO (渡辺隆広のSEO講座)

モバイルフレンドリーから始めるスマホSEO (渡辺隆広のSEO講座)