メモ〜HTML、HTTP関係

目次

html文書の基本構造

XHTML 1.1

XML宣言

XMLの宣言を冒頭行に記述する。encodingの属性値には文字コードを指定。

【書式】
<?xml version="1.0" encoding="文字コード"?>

【例】文字コードがUTF-8の場合
<?xml version="1.0" encoding="UTF-8"?>
文書型宣言

XHTML 1.1の文書であることを宣言する。記述する値は下記値で固定。

【書式】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTMLヘッダ

<head> ... </head> の間に、内容の種別(コンテキストタイプ)、スタイルシート、スクリプト、記述に用いたアプリケーション、キーワード、内容の概要、著者、ページタイトルなど各種メタ情報を記述する。

【書式】
<head>
  <meta http-equiv="Content-text" content="本文の種類、文字コード"/>
  <meta http-equiv="Content-style-Type" content="スタイルシートの種別"/>
  <meta http-equiv="Content-script-Type" content="スクリプトの種別"/>
  <meta name="generator" content="エディタの種類"/>
  <meta name="keyword" content="キーワード"/>
  <meta name="description" content="内容説明"/>
  <meta name="author" content="著者"/>
  <title>ページタイトル</title>
</head>

【例】
<head>
  文書タイプとして「text/html」と記してもいいようだが、XHTMLであることを明確に宣言するには以下の記述がいいみたい
  <meta http-equiv="Content-text" content="application/xhtml+xml; charset=utf-8"/>
  <meta http-equiv="Content-style-Type" content="text/css"/>
  <meta http-equiv="Content-script-Type" content="text/javascript"/>
  <meta name="generator" content="GNU Emacs 22.1.1 (i386-apple-darwin8.9.1, Carbon Version 1.6.0)"/>
  <meta name="keyword" content="HTML,XHTML"/>
  <meta name="description" content="HTMLについて"/>
  <meta name="author" content="くどう"/>
  <title>HTMLについて</title>
</head>
HTML本体

私は概ね次のように書いています。

<body> ... </body> の中に実際ページに表示する内容を記述する。 まず、ページタイトルを<h1> ... </h1>で記述。 次に章ごとに<div> ... </div>で囲み、その中に<h2> ... </h2>で章のタイトル、<p> ... </p>で本文を記述。 またこの中に更なる<div> ... </div>を書いて下位節を示す。

【書式】
<body>
  <h1>ページタイトル<h1>
  <div>
    <h2>章タイトル<h2>
    <p>本文<h1>
    <div>
      <h3>節タイトル<h3>
      <p>本文<h1>
    </div>
  </div>
</body>
HTML文書のおわり

最後に</html>を記してHTMLコードはここまでであることを宣言。これ以降に何か書いてもウェブブラウザは無視するはず?

【書式】
<html>

HTML5

文書型宣言

以下の宣言を記すことによりHTML5の文書であることを宣言したことになるらしい。あまり意味はないが、この宣言がないとウェブブラウザは互換モードで表示してしまうらしく、標準モードで表示させるにはやはりこの宣言が必要とのこと[16]

【例】
<!DOCTYPE html>
HTMLヘッダ

XHTML 1.1と同様。但し、文字コード指定は以下のように短く書くことも可能[15]

【文字コード指定例】
<meta charset="UTF-8">

個別要素関係

p要素とdiv要素の違い

p要素は段落を表すブロックレベルの要素。中には素のテキストと、インライン要素を含むことができる。

一方div要素は、単にブロックレベルの入れ物というだけ。中にブロックレベル要素も含めることができる(p要素の中にブロックレベル要素を含めることはできない)

form要素の子要素

form要素はフォームを表すブロックレベル要素で、中に記述できるのはブロックレベル要素のみ(Transitional/Framesetでは可能)。 input要素はインライン要素であるため、p要素などで包んでその中に記述する必要あり。

参考サイト:参考サイト:HTML/XHTML - reflux flow form要素

formのcheckboxで複数の値を受け取る

以下のように同一のname属性値を持つcheckbox入力要素を複数設けても、一番後に登場するチェック済み要素のvalueだけが送られるよう。

<form action="hoge.php" method="post">
  <p>
    <label><input type="checkbox" name="mammal" value="dog"/>いぬ</label>
    <label><input type="checkbox" name="mammal" value="cat"/>ねこ</label>
    <label><input type="checkbox" name="mammal" value="deer"/>しか</label>
  </p>
  <p>
    <input type="submit" value="送信"/>
  </p>
</form>
↓ 「いぬ」と「ねこ」の両方をチェックして送信しても「ねこ」しか送られない
$_POST = array('mammal'=>'cat');

name属性の末尾を「[]」にして配列変数にすればOK[19](受領スクリプトコードはPHPで確認、他の言語もこれが通用するのかは未確認)

<form action="hoge.php" method="post">
  <p>
    <label><input type="checkbox" name="mammal[]" value="dog"/>いぬ</label>
    <label><input type="checkbox" name="mammal[]" value="cat"/>ねこ</label>
    <label><input type="checkbox" name="mammal[]" value="deer"/>しか</label>
  </p>
  <p>
    <input type="submit" value="送信"/>
  </p>
</form>
↓ 「いぬ」と「ねこ」の両方をチェックして送信すれば両方送られる
$_POST = array('mammal'=>array(0=>'dog',1=>'cat'));

イメージマップ

XHTML1.1の場合、img要素のusemap属性はID参照で指定するためusemap="id"のようにid属性値をそのまま記述(XHTML1.0以前はURI指定のためusemap="#id"のように記す)。またmap要素の名前はid属性で指定(XHTML1.0以前はname属性)。ところがこれを厳密に守ってもイメージマップが効かないことがある。

動作互換性上は7番がいいが、XHTML1.1には非準拠。

No img要素のusemap属性 map要素の名前 マップ要素指定に用いる要素 ブラウザ対応 XHTML
1.1適合
サンプル
(1)Mac+FF (2)Mac+OP (3)Mac+SF
1 URI
<img usemap="map"/>
name属性
<map name="map">
area要素
<area href... />
× × × Topへ
2 a要素
<a href...>...</a>
× × × ×

Topへ

3 id属性
<map id="map">
area要素
<area ... />
× × Topへ
4 a要素
<a href...>...</a>
× × ×

Topへ

5 URI
<img usemap="#map"/>
name属性
<map name="map">
area要素
<area href... />
× × Topへ
6 a要素
<a href...>...</a>
× × ×

Topへ

7 id属性
<map id="map">
area要素
<area ... />
× Topへ
8 a要素
<a href...>...</a>
× ×

Topへ

9 URI
<img usemap=
"html.html#imagemap"/>
id属性
<map id="map">
area要素
<area ... />
× Topへ
1
<img src="images/html_fig01.gif" usemap="#map01" alt=""/>
<map name="map01">
  <area href="index.html" shape="circle" coords="50,50,20" alt="Topへ" />
</map>
      
2
<img src="images/html_fig01.gif" usemap="#map02" alt=""/>
<map name="map02">
  <p>
    <a href="index.html" shape="circle" coords="50,50,20">Topへ</a>
  </p>
</map>
      

Applet関係

applet/object/embed要素の比較

Appletを表示するのに使える要素は applet、object、embed の3種類がある。それぞれの概要は以下の通り。object要素を使うのが

applet要素
appletを表示するのに特化しており、applet表示に関しては記述しやすいが、HTML4以降では使用非推奨の要素となっている。
object要素
appletの代替としてこの要素を使うことが推奨されている。appletだけではなくあらゆるオブジェクトの表示に用いることができるが、オブジェクトの型も表記しなければならないなど、記述がapplet要素に比べて煩雑。 またHTML4.01 Strict/XHTML1.0 Strict/XHTML 1.1では使用できないiframe要素をこの要素で代替。
embed要素
埋め込みオブジェクトを扱う要素で、いくつかのブラウザがサポートするが、W3Cの標準規格外の要素。

object要素について

object要素は文書、画像、Flash、Java Appletなど様々なオブジェクトを埋め込むための要素。iframe要素、img要素、embed要素、applet要素の機能を全て備えたような汎用要素。

オブジェクトにパラメータを渡す際は、object要素の子要素として必要な数だけ param要素 を記述する。

<object classid=""
        codetype=""
        data=""
        type=""
        width=""
        height=""
        name=""

固有属性

classid
オブジェクトのURI。ホームページアドレス(URL、例:http://www.hoge.com/)の他、Windowsのみで用いられていると思われるclsid(例:clsid:8AD9C840-044E-11D1-B3E9-00805F499D93→最新Java)、プラグラム名:クラス名(例:java:org.jdesktop.applet.util.JNLPAppletLauncher→環境に応じたJava OpenGL(JOGL)を自動ダウンロードするApplet Launcher)など。
codebase
codetype
data
type
archive
declare
standby

汎用属性

id, class
lang
dir
title
style
onclick, ondbclick, onmousedown, onmouseup, onmouseover, onmouseout, onkeypress, onkeydown, onkeyup
tabindex
usemap
name

object要素は指定されたオブジェクトを表示しようとするが、表示できない場合は次にobject要素内に記された別のobject要素を表示しようとする。つまり指定オブジェクトが表示できない時の表示対象次候補を子要素として記述できる。

<p>
<!-- 最初に Python applet の表示を試みる-->
<object title="The Earth as seen from space" 
        classid="http://www.observer.mars/TheEarth.py">
  <!-- 次に MPEGビデオの表示を試みる-->
  <object data="TheEarth.mpeg" type="application/mpeg">
    <!-- 次に GIF画像の表示を試みる-->
    <object data="TheEarth.gif" type="image/gif">
      <!-- 次に テキストの表示を試みる-->
     The <strong>Earth</strong> as seen from space.
    </object>
  </object>
</object>

Java Appletをobjectで記述する

Java Appletをobject要素で記述する場合、ブラウザによってオブジェクトを正常表示させるためのコードが異なるので、object要素を入れ子構造にしてどのブラウザでも表示できるようにする。なお、CGI、PHPなどでウェブページを表示している場合はユーザエージェント情報を見て、適したコードを返すようにすればobject要素を多重構造にしなくて済むかもしれない。

以下、分子構造ビュワーjVで、Applet Launcher(必要となるJOGLの環境に合ったものを、自動的にクライアントにダウンロードさせる仕組み)を使ったAppletについて。

【例】Macの場合
<object classid="java:org.jdesktop.applet.util.JNLPAppletLauncher"
	  type="application/x-java-applet" <!-- type属性:Safariでは必要、Firefox/OperaはあってもなくてもOK-->
          codetype="application/java"
          archive="/jv/applet-launcher.jar,
                   /jv/jogl.jar,
                   /jv/gluegen-rt.jar,
                   /jv/jv_signed.jar"
	width="100%" 
	height="500">
  <param name="code" value="org.jdesktop.applet.util.JNLPAppletLauncher"/>
  <param name="codebase_lookup" value="false"/>
  <param name="subapplet.classname" value="org.pdbj.viewer.gui.ViewerApplet"/>
  <param name="noddraw.check" value="true"/>
  <param name="noddraw.check.silent" value="true"/>
  <param name="jnlpNumExtensions" value="1"/>
  <param name="jnlpExtension1"
         value="http://www.pdbj.org/jv/jogl.jnlp"/>
  <param name="pdbmlURL" value="http://www.pdbj.org/XML/all-extatom/1smd-extatom.xml.gz"/>
  <param name="commands" value="set picking ident;background black;select all;wireframe off;
     select protein & (!hydrogen) & */1;cartoon on;color group;select (DNA || RNA) & (!hydrogen) & */1;
     wireframe 50;trace 100;color group;select (DNA || RNA) & (!hydrogen) & */1 & sidechain;color shapely;
     select hetero & (! water) & (!hydrogen) & */1;spacefill;color [200,200,200];select all;center;zoom 140"/>
  <param name="command_area" value="true"/>
  <param name="progressbar" value="true"/>
</object>

【例】Windowsの場合

jarファイルの署名

キーストア(暗号鍵の倉庫)とキーペア(公開鍵と秘密鍵の組み合わせ)を作成する。

【書式】
keytool -genkey -keyalg アルゴリズム名 -storepass パスワード -keystore ファイル名 -alias 別名 -keypass パスワード -validity 有効期限
    
-genkey
キーペアを作成。
-keyalg アルゴリズム名
署名アルゴリズムを指定。rsaなどを指定。
-storepass パスワード
キーストアのパスワード。新規キーストアの場合はパスワード設定、既存キーストアの場合はパスワード照合。
-keystore ファイル名
キーストアファイル名を指定。指定しなければホームディレクトリに.keystoreという名前でファイルが作成される。
-alias 別名
キーペアの別名。指定しないとmykeyが指定される。
-keypass パスワード
キーペアのパスワード設定。
-validity 有効期限
キーペアの有効期限を日数で指定。
-dname 識別名
X.500 識別名。以下のようなものが指定可能。
  • cn:common name(人の通称)
  • ou:organizational unit name(所属単位名、部や課などの所属部署名)
  • o:organization name(より大枠の組織名)
  • l:locality name(地域、都市名)
  • st:stateOrProvinceName(州または地方名)
  • c:countryName(2文字の国コード)
【例】
暗号鍵キーペア、キーストアを生成。暗号化アルゴリズムはRSA、キーストアパスワードはpass、
キーペアの別名はjws、キーペアパスワードはpass、有効期限は365日、
識別名は名前:mom、所属:PDBj、場所:Suita、州地方名:Osaka、国名:JP
shell> keytool -genkey -keyalg rsa -storepass pass -alias jws -keypass pass -validity 365
-dname "cn=mom,ou=PDBj,l=Suita,st=Osaka,c=JP"
    

jarファイルに署名する。キーペアの作成は初回のみで、2つ目以降のjarファイルには同じキーペアを使って署名する。

【書式】
jarsigner -keystore ファイル名 -storepass パスワード -keypass パスワード -signedjar 署名後ファイル名 署名前ファイル名 キーペア別名
    
-keystore ファイル名
キーストアファイル名を指定する。
-storepass パスワード
キーストアのパスワードを指定。
-keypass パスワード
キーペアのパスワードを指定。
-signedjar 署名後ファイル名
署名後のjarファイル名を指定
キーペア別名
署名に使用するキーペアの別名
【例】
shell> jarsigner -storepass pass -keypass pass -signedjar hoge.jar hoge_org.jar jws
    

YouTubeムービーをobjectで記述する

YouTubeの動画共有で表示される埋め込みコードは iframe 要素を用いて記述する内容になっている(2011/07/08現在)が、HTML 4.01 Strict などでは iframe 要素が使えず、object 要素を使ったコードに書き換える必要がある。

【Windows】
【Mac+Safari】
【Mac+Firefox】

iframeオブジェクトをobjectで記述する

TwitterのTweet Buttonはiframeでコードが生成されるが、これをobjectで記述する方法。

Tweet Buttonページで生成されるコードは以下のようなもの。

<a href="http://twitter.com/share" 
   class="twitter-share-button" 
   data-count="vertical | horizontal | none" ←カウント数表示位置(垂直、水平、なし)
   data-via="Twitterユーザ名" 
   data-lang="ja">ツイート</a>
<script type="text/javascript" 
       src="http://platform.twitter.com/widgets.js">
</script>

これがJavaScriptによって書き換えられ、以下のようなコードになる(カウント数表示位置水平の場合)。

<iframe title="WEBサイト向けTwitter: ツイートボタン" 
        style="width: 130px; height: 20px;"
        class="twitter-share-button twitter-count-horizontal" 
        src="http://platform0.twitter.com/widgets/tweet_button.html?_=1311728880115&count=horizontal&
             id=twitter_tweet_button_0&lang=ja&original_referer=ボタンを設置したページのエンコード済みURL
             &text=ボタンを設置したページのtitle&url=ボタンを設置したページのエンコード済みURL
             &via=Twitterユーザ名" 
        allowtransparency="true" 
        scrolling="no" frameborder="0">
</iframe>
<script type="text/javascript" 
       src="http://platform.twitter.com/widgets.js">
</script>

iframeはHTML 4.01 Strict, XHTML 1.0 Strict, XHTML 1.1 では使えないので、これらでも使えるobject要素を使って書き換えてみる。

<object title="WEBサイト向けTwitter: ツイートボタン" 
        style="width: 130px; height: 20px;"
        class="twitter-share-button twitter-count-horizontal" 
        data="http://platform0.twitter.com/widgets/tweet_button.html?_=1311728880115&count=horizontal&
             id=twitter_tweet_button_0&lang=ja&original_referer=ボタンを設置したページのエンコード済みURL
             &text=ボタンを設置したページのtitle&url=ボタンを設置したページのエンコード済みURL
             &via=Twitterユーザ名">
  <param name="allowtransparency" value="true"/>
  <param name="scrolling" value="no"/>
  <param name="frameborder" value="0"/>
</object>
<script type="text/javascript" 
       src="http://platform.twitter.com/widgets.js">
</script>

上記のように不明な灰色の帯がボタンの右側に現れて、カウント数が表示されない。下記のように高さを41px以上にすると表示される(高さを比較しやすいよう周囲に枠を表示している)。

HTML表記関係

HTMLエスケープ

文字 HTML記述
&(アンパサンド) &amp;
< &lt;
> &gt;
 (半角空白) &nbsp;
"(ダブルクォート) &quot;&#34;&#x22;
'(シングルクォート、アポストロフィ) &apos;&#39;&#x27;
&#x4f60;

キャラクターコードや文字コードで文字を指定するには、&#10進数; または &#x16進数;

UnicodeのPrivate Use領域にアイコンなどを配置して表示することができるらしい[13][14]。しかし、具体的方法不明。表示できているサイトのコードをそっくり持ってきても文字化けする。

参考文献・サイト:

改行コードのブラウザ依存

段落要素(<p>要素)などの中で改行を入れても、無視される…と思っていたが、ブラウザによって扱いは違うみたい。

ブラウザ 表示
Firefox 2.0.0.18+MacOSX(10.4.11) なし
Safari 3.1.2 (4525.22)+MacOSX(10.4.11) 空白
Opera 9.6.2 (Build 5256)+MacOSX(10.4.11) 空白

アクセスキー

htmlページ内のaccesskey属性が指定された場所(あるいはリンク先)へキー操作一つでジャンプすることができる。特定のキーと一緒にaccesskey属性値に指定されたキーを入力することでそれが実行できる。このアクセスキーを指示するのに使う「特定のキー」は環境によって異なる。

ブラウザ 組み合わせるキー 備考
Mac OS X 10.4.11 + Firefox 3.6.19 Ctrl
Mac OS X 10.4.11 + Opera 10.10 (build 6795) アクセスキーを使う時のキー操作は、Shift + ESC + [accesskey]
( Shift + ESC でアクセスキーリストが出る、それからアクセスキーを押しても動作する)
Mac OS X 10.4.11 + Safari 4.1.3 (4533.19.4) Ctrl + Option(Alt)

クリックで言語表示などを切り替える(1つのHTMLファイルで)

javascriptを使ってcssを切り替える。デフォルトでは切り替えリンクのある場所がハイパーリンク様の表示形式にならないので、その部分は意図的にスタイルを設定する。 共通して使用するスタイルを記述したスタイルシートを用意し、それとは別に個別設定のスタイルシートを準備する。 表示を消すには"display:none"のスタイルを使う。
参考サイト:http://www.din.or.jp/~hagi3/JavaScript/JSTips/Std/csschg.htm

JavaScript
function replace_css(id,url){
if(!document.getElementById) return false;
var element = document.getElementById(id);
if(!element || !element.cloneNode) return false;
var new_node = element.cloneNode(true);
new_node.href = url;
element.parentNode.replaceChild(new_node,element);
return true;
}
  
head 要素(linkタグにid属性をつける)
<link id="ccss" rel="stylesheet" href="csschg1.css" type="text/css">
  
つまり、id属性を指定した link タグでスタイルシートが定義されていることが前提です
replace_css 関数は linkタグに付けた id名と、切り替えたいスタイルシートの URLを引数で指定します
具体的には、HTMLの記述を以下のようにします
<head>
<link id="ccss" rel="stylesheet" href="csschg1.css" type="text/css">
</head>
:
<a onclick="replace_css('ccss','csschg2.css');">別のスタイル</a>
:
  

なお、Apache web server にはWebクライアントから送られてきたWebアクセス要求に含まれるクライアントの使用言語情報に基づいて返すWebコンテンツを変える「コンテントネゴシエーション」という機能がある。言語選択についてはこれを用いる方が拡張性は高そう。 但しサーバサイドの内容なので、プロバイダの個人ホームページスペースなどでは使えないかもしれない。 css+javascriptを用いる方法では、javascriptを無効にしている場合には切替が効かないという問題や、ページが複数存在して選択している言語情報を保持したい場合や、言語数が増えた場合はさらに処理が煩雑になるという問題がある。

アップロードするだけでそのファイルの表示内容を切り替える

javascript window.location window.location.hostname css 切り替え

ローカルでしか動作しないcgiへのリンクを含むページをそのままプロバイダのスペースにアップロードすると、リンク切れなどのあるページになってしまいます。 そういう時、アップロードしたファイルのある場所(URL)を認識して、cssを切り替えられるようにしておくと便利かと思います。

JavaScriptの"windos.location.hostname"でURLのホストネーム部分が取得できます。
→どうもxhtmlにするとJavaScriptが動作しない。宣言をhtml4.01に戻すとどうかな? →こちら

これを応用すれば、ページ内のパス記述部分にファイル位置を示す値を代入できるようにしておけば、パスが変わることによるリンク切れを防ぐことができると思われる。

ページリダイレクト

クライアントサイドで処理させる方法としては、(1)head要素内にmeta reflesh要素を書く方法や(2)Javascriptによる方法がある。 またApacheなどの設定により、(3)サーバサイドで処理する方法もある。

head要素内にmeta reflesh要素を書く

<meta http-equiv="refresh" content="リダイレクトまでの待ち時間;URL=リダイレクト先URL">
    

リダイレクト設定を中止してもリダイレクトが続く

サーバ側でリダイレクトの設定を中止しても、依然リダイレクトされてしまう場合、キャッシュをクリアすればよい。Mac OS X 10.4.11 + Firefox 3.6.7 の場合、[ツール]-[最近の履歴を消去...]から消去。

参考文献・サイト:

ソーシャルネットワークのボタンなど

Facebook いいね!ボタン

あるURLに対してFacebookの「いいね!」(Like!)をPOSTするためのボタンを表示させるコードは以下の通り[1]

【書式】
<div fb-xfbml-state="rendered" class="fb-like fb_edge_widget_with_comment fb_iframe_widget" 
     data-href="対象URL" data-send="false" data-layout="button_count" data-width="450" 
     data-show-faces="true">
<span style="height: 20px; width: 97px;">
<iframe src="http://www.facebook.com/plugins/like.php?api_key=&locale=表示言語コード&sdk=joey&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D25%23cb%3Dfc865670b4f8c%26origin%3Dhttp%253A%252F%252Flegacy.pdbj.org%252Ff2d0d4bbf88d32e%26domain%3Dlegacy.ipr.pdbj.org%26relation%3Dparent.parent&href=対象URL&node_type=link&width=450&layout=button_count&colorscheme=light&show_faces=false&send=false&extended_social_context=false" class="fb_ltr" title="Like this content on Facebook." style="border: medium none; overflow: hidden; height: 20px; width: 97px;" name="f2c9df6c05a6856" id="f1e3ec0859eca2" scrolling="no"></iframe>
</span>
</div>
対象URL
参照したいURL。URLはエンコード処理をかけておく
表示言語コード
ボタンに表示する文字列の指定。日本語で「いいね!」と表示するなら「ja_JP」を指定。
【例】http://legacy.pdbj.org/mom/index.php?l=ja&p=163 のいいね!ボタン
<div fb-xfbml-state="rendered" class="fb-like fb_edge_widget_with_comment fb_iframe_widget" 
     data-href="http://legacy.pdbj.org/mom/index.php?l=ja&p=163" data-send="false" 
     data-layout="button_count" data-width="450" data-show-faces="true">
<span style="height: 20px; width: 97px;">
<iframe src="http://www.facebook.com/plugins/like.php?api_key=&locale=ja_JP&sdk=joey&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D25%23cb%3Dfc865670b4f8c%26origin%3Dhttp%253A%252F%252Flegacy.pdbj.org%252Ff2d0d4bbf88d32e%26domain%3Dlegacy.pdbj.org%26relation%3Dparent.parent&href=http%3A%2F%2Flegacy.pdbj.org%2Fmom%2Findex.php%3Fl%3Dja%26p%3D163&node_type=link&width=450&layout=button_count&colorscheme=light&show_faces=false&send=false&extended_social_context=false" class="fb_ltr" title="Like this content on Facebook." style="border: medium none; overflow: hidden; height: 20px; width: 97px;" name="f2c9df6c05a6856" id="f1e3ec0859eca2" scrolling="no"></iframe>
</span>
</div>

Lineに送る

Lineの公式サイト[2]に従ってコードを書けば、ボタンは表示されたが、クリックしても同じページがリロードされるだけでLineは起動せず。公式サイトの方法では、Android環境でうまく機能しないらしく、修正してみた[2]。しかしまだ改善せず...と思ったが、Android既定のブラウザでアクセスし、「Lineで送る」ボタンをタップしたところ、リンク先を開くを尋ねる「アプリケーションを選択」ダイアログが出て、その中にちゃんとLineがあった。AndroidのFirefoxだと動作しないらしい。

Google+

[2]

URL関係

URL記述

a要素などでhtmlファイル中にURLを記載する際、URL引数に含まれる "&"(アンパサンド)は "&amp;" と記してエスケープする必要がある。なおこの処理はJavaScriptコード中などでは必要ないよう。

URLエンコード

「URLに使える文字」はRFC 3986で規定されていて、これ以外の文字はエスケープ処理が必要[15]

認証ID、パスワードをURLに含める

【書式】
http://ユーザID:パスワード@ホスト名・ドメイン名/

【例1】IDを"user"、パスワードを"pass"で http://www.hoge.com/ に接続するURL。
http://user:pass@www.hoge.com/

【例2】IDを"user@fuga.com"、パスワードを"pass"で http://www.hoge.com/ に接続するURL。
http://user%40fuga.com:pass@www.hoge.com/
    

ユーザID中に@を含む場合は、%40と記してエスケープエンコーディングを行って記述する。

参考文献・サイト:

HTTPプロトコル

Webコンテンツを取得(GET)する前に、WebクライアントはWebサーバと事前通信を行って情報を取得する。Firefoxでこの「HTTPヘッダ情報」を閲覧する方法は以下の通り。

1. Live HTTP Headers アドオンをインストール
Live HTTP Headersページの「+Firefoxへ追加」をクリックしてアドオン追加。指示に従い、Firefoxを再起動。
2. Firefoxの[ツール]-[ページの情報]を開く
3. [ヘッダ]タブを開く
Live HTTP Headersページの「+Firefoxへ追加」をクリックしてアドオン追加。指示に従い、Firefoxを再起動。

ウェブサーバから返される主なhttpステータスは以下の通り。200番台は正常終了、300番台は追加処理が必要なことを、400番台はリクエストが完了しなかったことを、500番台はサーバ側でエラーを検出したためリクエストが実行できないことを示す。3 4

ステータスコード 結果フレーズ 備考
200 OK クライアントからのリクエストは正常に終了。サーバからの応答にはリクエストされたデータが入っている。
301 Moved Permanently 恒久的にURIが変更された。新しいURIはLocationヘッダで指定される。
302 Found(HTTP/1.0はMoved Temporarily)
304 Not Modified 指定された日時以降、ドキュメントが無修正である場合の If-Modified-Since ヘッダに対応する応答コード。ボディ部は送信されないので、クライアンントは自分でコピーしたものを使用しなければならない。
307 Temporary Redirect
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
405 Method Not Allowed
408 Request Timeout
410 Gone
500 Internal Server Error
503 Service Unavailable

参考文献・サイト

モバイルアクセス対応

通常のPC用htmlコードで書かれたページにモバイル端末でアクセスすると画面が自動縮小されて字などが小さくなって見づらい。自動縮小を防ぐにはhead要素内に <meta name="viewport" content="width=device-width">を書いておくといい。デバイスの画面幅に応じた表示にしてくれる。

また、画像のスタイル指定でmax-width: 実際の画像幅;のようにしておくと、画面幅の大きいPCでは実寸で、画面幅の小さいモバイル端末では縮小して表示してくれる。