ホームページ講座
あえて旧式のＨＴＭＬ手書き
近年、ＷＥＢサービスの発展に伴い、ブログやＭｉｘｉなどのＳＮＳ、Twitterといったサービスによって、誰でも気軽に情報を世界に公開できるようになっています。
以前では、ネットに情報を公開するにはＨＴＭＬを覚える必要がありましたが、そんなことは現在では必要ありません。
ですが、このサイトはあえてＨＴＭＬによる手書きを選んでいます。
ここでは、HTMLの知識が多少ある方を中心に解説していきますので、単純に情報を公開したいと思う方は、ブログをすることがお勧めです。
いや、初心者でも、やりたいという根気があれば、WEBサイト作りは十分に楽しめます。
HTMLとJavascriptで作る基本ページ
フォルダ構成
ウェブサイトを作る上で考えなければならないことの一つがフォルダ構成です。
ここをきちんと決めておかないと、ページが増えてサイトが大きくなるにつれて苦労します。
自分の場合はこのようにしてます。
├[css] // cssファイルを入れておく
├[js] // javascriptファイルを入れておく
├[img]
│ └[コンテンツごとのフォルダ]
│ └画像ファイル.jpg
│
├index.html
├各種ページのHTML.html
ポイントはHTMLを「/(DocumentRoot)」の直下に置いておくこと、こうするとフォルダをエクスプローラで開いた時に、更新日付順で最新ファイルが確認できるので便利です。
画像フォルダは、たくさん置かれることになるのでコンテンツごとにフォルダを作ったほうが管理しやすいです。
基本ページ
HTMLだけによるホームページの欠点の一つが、サイト規模が大きくなると全体的なページ修正が大変になるということです。
しかし、あらかじめきちんとページの作り方を決めて、共通部分は外部ファイルに移す方法をとった場合は、修正箇所が極力少なくて済みます。
Javascriptを多用しますが、現在のWeb事情においてはJavascriptが動かない環境ということはまずありえないので、遠慮なくJavascriptで外部に置きます。
＜このページのHTMLの基本構成＞
<html>
<head>
<!-- 検索エンジン対策 -->
<title>タイトル</title>
<meta name="description" content="いろいろ">
<meta name="keywords" content="いろいろ">
<meta name="robots" content="いろいろ">
<link rel="stylesheet" type="text/css" href="共通のCSS" />
<script type="text/javascript" src="ブラウザCSS分け"></script>
<script type="text/javascript" src="外部ライブラリ"></script>
<script type="text/javascript" src="共通の関数"></script>
<script type="text/javascript" src="共通のページ処理"></script>
</head>
<body>
<!-- ヘッダーの部分 -->
<div class="head" id="head">
<script type="text/javascript" src="ヘッダー表示"></script>
</div>
<!-- 記事の部分 -->
<div class="body" id="body">
<div class="contents">
<!-- メインコンテンツはここに書く -->
</div>
<!-- メニューの部分 -->
<div class="menu" id="menu">
<script type="text/javascript" src="メニュー表示"></script>
</div>
<!-- フッターの部分 -->
<div class="foot" id="foot">
<script type="text/javascript" src="js/foot.js"></script>
</div>
このようにしておくと、このファイルをコピペして量産することができ、ページごとに変わる部分は、検索エンジン対策のHEADタグの部分のメインコンテンツの部分だけになります。
スマホ対応サイト
最近は、スマートフォンの普及とともにスマートフォンに最適可したサイトが増えてきました。
本来のスマートフォン売りは、「パソコンと同じサイトが見える」というのが売りでしたが、どうせなら見やすいほうが良いのでスマートフォンに最適化したサイトを作るということになります。
スマートフォンに対応させるには、「meta」タグの「viewport」を設定することがポイントです。
詳しいことは、「meta viewport」でググれば良いので割愛しますが。
<meta name="viewport" content="width=device-width,
user-scalable=no, initial-scale=1, maximum-scale=1" />
このように設定すると、横幅が画面いっぱいに合わせられ、拡大縮小できない状態。
つまり、スマホアプリのように一番閲覧しやすい状態になります。
ちなみに、ニンテンドー３ＤＳに最適化したページをつくるには、
<meta name="viewport" content="width=320" />
のようにすると良いと、任天堂公式ページに書かれています。
また、パソコンとスマホでは、画面の大きさやレイアウトが異なりますので、次のパソコンサイトとスマホサイトのスタイルの分離が必要になります。
スタイルの分離
パソコンとスマホでは、画面の大きさなどが違います。よって見やすいにように、スタイルを分ける必要があります。 スタイルを分ける方法はたくさんありますが、このサイトでは、ブラウザが送るブラウザを識別する文字列(UserAgent：通称UA)を元に判定しています。
(function(){
var strHtml="";
if(navigator.userAgent.indexOf('3DS') > 0){
document.write('<meta name="viewport" content="width=320" />');
}else{
document.write('<meta name="viewport" content="width=device-width,
user-scalable=no, initial-scale=1, maximum-scale=1" />');
}
var ua=navigator.userAgent;
if((ua.indexOf('iPhone') > 0 && ua.indexOf('iPad') == -1) ||
ua.indexOf('iPod') > 0 ||
ua.indexOf('Android') > 0 ||
ua.indexOf('3DS') > 0 ){
document.write('<link rel="stylesheet" type="text/css" href="css/style_sp.css">');
}else{
document.write('<link rel="stylesheet" type="text/css" href="css/style_pc.css">');
}
})();
ブラウザCSS分け処理はこのようになっており、これをページの最初で読み込ませることで、PCとスマホのスタイルを分離できます。
便利すぎるdocment.write
Javascriptのdocment.writeを使用すれば、共通で表示したい文言から共通で実行したいJavascriptまで、別のファイルに移すことができます。
これによって、修正箇所を極力少なくした、雛形のページを作ることができ、サーバーがなくても、PHPやJavaといったサーバープログラムに負けないくらいのメンテナンスのし易いページを作ることができます。
// menu.js
(function(){
var strHtml="";
strHtml+='<ul>';
strHtml+='<li class="menuItem">';
strHtml+=' <a href="index.html">トップ</a>';
strHtml+='</li>';
strHtml+='</ul>';
document.write(strHtml);
})();
<!-- HTML内の記述 -->
<div class="menu" id="menu">
<script type="text/javascript" src="js/menu.js"></script>
</div>
Javascriptが動いていない人のことは基本的に考えない
いくらJavascriptが便利だからと言っても、Javascriptが動作しないブラウザも世の中にはありますし、設定で無効にしている人もいます。
ま、そういう人は初めから効率良くWEBサイトを閲覧することを放棄しているので、そういう人たちへの配慮はしません。
ですが、何もできないのは可愛そうです。
実際にページを作成していみると、本当に必要なリンクはトップに戻るだけで十分ということがわかります。
なので、トップに戻るためのリンクは、ベタ書きで作成しておきましょう。
デザイン的に気に入らなければ、後からJavascriptで消すこともできます。
共通部品はJavascriptで作る
Javascriptで作れるものはたくさんあります。document.writeを使用すれば、普通のHTMLを変わらない早さで描画されますし、後から、コンテンツ部分を置き換えることもできます。
このページでは、メインメニュー、コンテンツ内の目次、フッターなどはJavascriptで作成しています。
画像表示用や・プチコンのプログラムリスト・ＱＲコードの表示用の別画面もJavascriptでパラメータを設定してからのリンクになっています。
要するに、HTMLで書かなければならない内容は、検索エンジンに読んでもらいたい文章だけで良いということにしています。
迷わず外部モジュールに頼る
動画を公開したければ、ニコニコ動画やYoutubeの外部プレイヤーが便利です。
アクセス解析はGoogleAnalyticsが便利です。
公式提供されているソーシャルプラグインを使用するとTwitterやFacebookと連携することができます。
このサイトでは、このような機能を使用しています。
また、このサイトでは使用していませんが、jqueryは本当に便利でよく出来たJavascript用のフレームワークです。
豊富なプラグインや、簡単に動的なページを記述できる機能があります。
これを使わない手は他にありません。
なので、WEBサイトを作っている方で、jqueryを使ったことがない人には、jqueryを是非おすすめします。
。HTML 5はWebアプリケーションのクライアントサイド開発における事実上の標準技術です。Webブラウザが使える環境であればどこでも動作するため、スマートフォンはもちろん、最近ではテレビなどでも利用できます。本書はユーザビリティからパフォーマンスまで実際に利用する際に役立つ技を逆引きリファレンスとして活用できるテクニック集です。