Archive for April 2, 2017

JavascriptとPerlでPCとスマートフォン用のCSSを切り替える

最近のブログシステムは自動的にPC用、スマートフォンそれぞれに適したデザインでWebを表示できるようになっていますが、ふつうのWebページで自動的に切り替えるには、ソースコードへの加筆など、少し工夫が必要です。

Javascript単独のソーソコードでも可能ですが、私は、JavascriptとPerlを組み合わせたものを使っています。より複雑な処理を、ユーザ側に見せることなく行うことができますので。

Javascript側: HTMLソースコードのヘッダの部分にこれを埋め込みます。

<script type=”text/Javascript” src=”http://www.nanoniele.jp/cgi-bin/http_output.pl”> </script>

Perl側: 実行ファイル (755とかいうやつね) としてしかるべきところ(大体cgi-binディレクトリ)に置いときます。本ケースではファイル名は”http_output.pl”。

#!/usr/bin/perl

 

use CGI qw(:standard);

use strict;

 

#———- User Agentを取得 ここから

my $data = $ENV{‘HTTP_USER_AGENT’};

#———- User Agentを取得 ここまで

 

#———- PC用CSSの置き場所 ここから

my $outdata = ‘<link rel=stylesheet type=”text/css” href=“http://www……/PC.css”>’;

#———- PC用CSSの置き場所 ここまで

 

#———- スマートフォン用CSSの置き場所 ここから

$outdata = ‘<link rel=stylesheet type=”text/css” href=“http://www……/mobile.css”>’ if (($data =~/iPhone/) or ($data =~/Android/));

#———- スマートフォン用CSSの置き場所 ここまで

 

#———- JavascriptにHTMLソースを渡す ここから

print “Content-type: application/x-javascript\n\n”;

print “document.write(‘$outdata’)\n\n”;

#———- ここまで JavascriptにHTMLソースを渡す

exit;

PC用CSSファイル (ここでは”PC.css”)とスマートフォン用CSSファイル (mobile.css)を置いておくことをお忘れなく。

 

あわせてどうぞ

PerlとJavascriptの連携でウェブコンテンツを表示させる方法

 

キーワード: Javascript Perl CGI CSS Webコンテンツ スマートフォン

Nanoniele正式版オープンしました。

5年間v0.8まで仮運用していました。

 

私のプログラミングスキルもだいぶ向上したので、Nanonieleの新バージョンを作成、2017年4月1日に公開しました。

本公開が最初の正式版です。

 

 

新バージョンの第1の特徴はスマートフォンとの親和性。第2の特徴は軽さ。

スマートフォンから旧版にアクセスすると、自動的に新版にジャンプします。

PCからは、旧版と新版の両方にアクセスできますので、お好きな方をお使いいただければよろしいかと思います。旧版の方が、ファイルのダウンロード等、機能が充実しています。

Nanoniele内部の検索エンジンやファイルシステムを一新した効果がよく現れていると自負しています。

 

URLは、http://www.nanoniele.jp/cgi-bin/nanoniele_v1.pl です。