カテゴリー: その他

開いているタブを閉じるときに以下の様なメッセージが表示される

　　（１）状況説明
　　　　・MicrosoftEdgeで発生する
　　　　　　GoogleChromeでは発生しない、

　　　　・JavaScriptのwindows.close命令で発生する
　　　　　　サイトを閉じるボタンを用意し、ボタン押下で発生する

　　（２）原因
　　　　セキュリティポリシーで禁止されている
　　　　　　自分でopenしたタブでなければ、closeｓしてはいけない
　　　　　　　　※「閉じる」と表示されてないボタンを押下して、閉じさせることができるから？

　　（３）必要性
　　　　・通常（ブラウザーの閉じるマーク（✖）を押す）の場合
　　　　　　連続して同じウィンドウに連続で重ねて表示させた場合、最初から全部閉じられてしまう

　　　　　　現在見ている画面だけを閉じたい場合に必要

　　　　・後処理が必要な場合
　　　　　　最終処理の確認を取る場合、初期化や書き戻しが必要な場合にクリックしてもらう
　　　　　　　　※押下しなかった場合への対応が必要となる

　　（４）対応策
　　　　　　close命令を　onclick=”window.open(‘about:blank’,’_self’).close()”　とする

　　認証の入力ダイアログを表示させずにサイトにアクセスする方法

　　ＢＡＳＩＣ認証が必要となるＷｅｂサイトにアクセスする場合
　　　　（１）ＵＲＬにＩＤとパスワードを埋め込んでアクセスする

　　 　　　http://user:password@192.168.0.1/
　　　　　　　　ユーザーＩＤ　＋　コロン　＋　パスワード

　　　　（２）ＰＨＰからアクセスする場合
　　　　　　【file_get_contents】にユーザーＩＤ　＋　コロン　＋　パスワードを指定する

　　　　　　$html = file_get_contents(“http://ユーザーＩＤ:パスワード@192.168.0.1”);
　　　　　　　　求められたhtmlを出力する（もしくは解析する）ことができる

　　　　（３）外部ＵＲＬを開けるようにする
　　　　　　【php.ini】が【allow_url_fopen = on】でないと外部ＵＲＬは開けない
　　　　　　　　通常はoff、他人のサイトはアクセスできないと考える
　

データベース移設（引越し）についての注意事項
　　ＷＰの移設には起きなかったエラーが発生する
　　　　入力チエックが貧弱なので、エラーデータが紛れ込んでいる

　　（１）和暦の年月日で２月２９日が存在するケース
　　　　１２７８－０２－２９　　　 弘安元年と改元
　　　　１５０１－０２－２９　　　 文亀元年と改元
　　　　１５０４－０２－３０　　　 永正元年と改元
　　　　　　※ＤＢ登録時には入力エラーとならない、移行時にエラーとなる

　　（２）小文字の【,】や【’】が紛れ込むケース
　　　　英文をコピーした場合
　　　　　　小文字のカンマはＣＳＶにとっては命取り、フォーマット相違（カラムずれ）エラーとなる
　　　　　　ＣＳＶファイルを表示した際に見苦しいので【”】で囲むことはしない
　　　　数字の位取りに使用した場合
　　　　　　全角での入力を心がけていはいるが、紛れ込むケースがある

サーバー移設（引越し）の「ＤＮＳ設定」について
　　「独自ドメインンの設定」が終了していること

　　（１）コントロールパネルに入る
　　　　「ドメイン操作」の「取得済みドメイン一覧」をクリックする

　　（２）変更できるドメインを選択する
　　　　取得済みドメイン一覧が表示されているので
　　　　　　設定変更するドメイン名の横の「緑色のＤＮＳ」をクリックする
　　　　　　　　ボタンの意味は「ＤＮＳレコードの変更/ＵＲＬ転送の変更」と示されている

　　（３）独自ドメインとサーバーを関連付けます
　　　　　　※これ以降、旧サーバーではなく新サーバーが本物になります
　　　　ここまで手順通りに進んでくると、設定値が既に表示されている
　　　　　　自動設定の文言の下に「サーバー名」を入力する
　　　　　　　　業者と契約した際に割り振られた「アカウント＠サーバー名」のサーバー名のこと
　　　　　　「保存する」をクリックする

　　（４）サーバー移設の完了
　　　　以上で全て完了です
　

サーバー移設（引越し）の「独自ドメインの設定」について
　　「ネームサーバーの変更」が終了していること

　　（１）コントロールパネルの左側メニューを見る
　　　　「ドメインの利用」の「ドメインウェブの設定」をクリックする

　　（２）独自ドメインの設定を行う
　　　　・Main欄にドメインを入力すると、public_htmlとドメインが同等になる
　　　　　　root直下がドメインの入り口になる
　　　　・Sub欄にドメインを入力すると、public_html内にドメインと同じフォルダが作成される
　　　　　　root直下にフォルダーが出来て、ここが入り口になる

　　　　・NoDirにはチェックを入れない

　　　　「ドメイン設定をする」をクリックする

　　（３）テストを続ける
　　　　サブドメインのテストなどが出来るようになる
　　　　　　※ここまでは新サーバーはテスト環境の様なもの
　　　　　　※但し、並行運用となるので旧サーバーの更新は必ず新サーバーに反映させること

　　（４）ＤＮＳ設定を行う
　　　　テストが完了すると
　　　　　　次に「サーバー移設（３）」に進む

サーバー移設（引越し）の「ネームサーバーの変更」について
　　取得した独自ドメインを活かして、別の業者のサーバーに移設する
　　　　移設作業は短時間で終了するが一度きりなので慎重に準備すること
　　　　　　※業者固有の手続きの部分もあるので一般的な移設手順ではない

　　（１）準備作業
　　　　新たに業者とサーバーのレンタル契約を結ぶ
　　　　　　新たに利用可能な「サブドメイン（ＵＲＬ）」が割り当てられる
　　　　　　ＩＰアドレスも割り振られ、自由に外部からアクセスできる状態になる

　　　　割り当てられたＵＲＬを使って、データ移行を行う
　　　　　　旧サーバーから新サーバーに順次プログラムやデータを移行する
　　　　　　事前テストも十分に行ってから、サーバー移設に取り掛かること
　　　　　　　　※「サーバー移設（３）」までは旧サーバーが本物、十分テストを繰り返すこと

　　（２）コントロールパネルの「ドメイン操作」に入る
　　　　「ネームサーバーの変更」をクリックする

　　（３）変更するドメインを指定する
　　　　「ネームサーバー変更」画面に所有するドメイン名が表示されている
　　　　　　該当する名前を選んで、「変更」をクリックする

　　（４）業者が用意したネームサーバーを設定する
　　　　汎用JPドメインの場合には、既に規定のネームサーバーが表示されている
　　　　確認したら「保存」をクリックして、作業は終了です

　　（５）独自ドメイン設定を行う
　　　　次に「サーバー移設（２）」に進む

ＣＭＳの選択基準を記述する
　　（１）代表的なＣＭＳ

　　（２）ＣＭＳを有効活用するには
　　　　・ＨＰを構築する際にＣＭＳを活用する
　　　　　　※どういったＣＭＳを使うかは、さほど重要ではない、

　　　　・他のサイトとの連携を上手に取ることが重要
　　　　　　自分自身のＨＰを活性化させ
　　　　　　　　外部のブログやＨＰと相互に連携させる
　　　　　　　　ＳＮＳを活用し、最新情報を手早く自分のＨＰに取込む
　　　　　　　　ＲＳＳを利用し、最新情報を手早く自分のＨＰに取込む

　　　　ＣＭＳを使って構築したＨＰによって
　　　　　　有効なコミュニケーションを図ることがＣＭＳの有効活用に繋がる
　

画像やリンクなどをクリックして、ウィンドウ内で画像を拡大表示する
　　画面が遷移せず、同一ウィンドウ内に表示されるのが特徴
　　　　無駄なクリック作業が無くなる

　　（１）【Lightbox2】のダウンロード
　　　　このサイトからダウンロードする　http://lokeshdhakar.com/projects/lightbox2/
　　　　　　ダウンロード完了後に解凍する

　　（２）Ｊａｖａスクリプトを設定する
　　　　スクリプトファイルをＨＴＭＬに施す
　　　　(例題）ダウンロードした中から探し出す
　　　　＜script src=”../js/jquery-1.11.0.min.js” type=”text/javascript”＞＜/script＞
　　　　＜script src=”../js/lightbox.js” type=”text/javascript”＞＜/script＞

　　　　必要な場所に設置し、ＨＴＭＬで定義する
　　　　　　指定する順序はこのまま

　　（３）ＣＳＳファイルを設定する
　　　　(例題）ダウンロードした中から探し出す
　　　　ＣＳＳファイルに定義を追加する　【@import url(‘lightbox.css’);】

　　（３）表示したい画像の定義
　　　　(例題）
　　　　＜a href=”img/image-1.jpg” data-lightbox=”group” data-title=”１枚目”＞写真１＜/a＞
　　　　＜a href=”img/image-2.jpg” data-lightbox=”group” data-title=”２枚目”＞写真２＜/a＞

　　　　【data-lightbox】を使ってグループ定義を施す
　　　　　　各々異なるモノを設定すると・・・・・・１個、１個個別に拡大表示される
　　　　　　　　※今回は統一した（１個なら個別表示、複数個なら連続表示となる）
　　　　　　同じモノを設定すると同一グループと見なされて、クリックすると次々と画像が表示される

　　　　通常は小さな画像を先に表示し、クリックして拡大表示する
　　　　　　※今回は小さな画像を作成する手間を省き、文字をクリックさせて画像を表示させる
　　　　　　必要なら＜img src=”../img/thumb-image-1.jpg”＞を「写真１」の所に入れる

パラメータ渡しの方法として【Ｇｅｔ】と【Ｐｏｓｔ】がある
　　【Ｇｅｔ】はＵＲＬに直接パラメータを記述して渡す方法
　　　　外部にパラメータの内容が見られてしまう
　　　　書き換えられると予期せぬ動きになる（入力チエックで防止する）
　　【Ｐｏｓｔ】はデータ部に格納してＵＲＬに渡す方法
　　　　外部にはパラメータの内容が見えない

　　今回のＤＢ移設に伴って【Ｇｅｔ】から【Ｐｏｓｔ】に切り替える
　　(例題）
　　　　＜a href=”#” onclick=”document.form11.submit();” target=”_self”＞アンカー用テキスト＜/a＞
　　　　＜form action=”index.htm” method=”post” name=”form11″＞
　　　　＜input type=”hidden” name=”パラメータＩＤ” value=”パラメータ内容”＞＜/form＞

　　　　アンカー部分をクリックするとｐｏｓｔでパラメータが渡される
　　　　複数個指定する場合にはペアを崩さずに数を増やせばよい

ＨＰで使用しているカラー見本を掲載する
　　時々、カラーコードを忘れてしまうので、備忘録として残す

通常、ＨＰのコンテンツは【DocumentRoot】配下のディレクトリに設置する必要がある
　　テスト環境等において、コンテンツの数が多くなるとホルダーの管理が煩わしくなる
　　【alias】機能を使って【DocumentRoot】の配下に配置されているかのように見せかける
　　　　※テスト環境の前提として【XAMPP】を使っていることにする
　　　　※本番環境にも使用できるが、却って覚えておくことが面倒なので本番環境には適用しない

　　（１）【httpd.conf】を探し出す
　　　　【XAMPP】配下の　apache　→　conf　配下の【httpd.conf】を探し出す

　　（２）【httpd.conf】を修正する
　　　　【】を探し出し【alias】を指定する
　　　　　　例として、【 include “F:/httpd-alias.ini”】の行を追加する
　　　　　　【alias】指定が多数なので別ファイルにしてまとめて読み込ませた
　　　　　　　　※直接に下記の様な【alias】指定を行うのもＯＫ

　　（３）【akias】指定ファイルを作成する
　　　　【Alias /元のフォルダー “F:/先のホルダー”】を複数記述する
　　　　　　※本来はこの形式で【httpd.conf】内に指定する

パスワードを暗号化する
　　ＩＤと（入力）パスワードを指定して、（設定）パスワードを作成する
　　通常のApache配下の場合とXAMPP配下の場合と作成方法が違うので注意すること
　　　　※XAMPPはローカル環境で個別テスト用に使われることが多い
　　　　　　ローカル環境下で基本認証が必要だとは思わないのだが念のために

先ずＡｐａｃｈｅ配下の場合
　　（１）パスワード作成サイトにアクセスする
　　　　・以下のサイトにアクセスする
　　　　　　htaccess による認証用　パスワード暗号化ツール
　　　　　　暗号化サービス
　　　　　　他　　にもあるので適当なサイトを探す

　　（２）設定するパスワードを求める
　　　　・ＩＤと（入力）パスワードを指定して、（設定）パスワードを求める
　　　　　　（入力）パスワードと（設定）パスワードを使い分けること
　　　　・ＩＤと（設定）パスワードの組み合わせを【.htpasswd】に記述する

　　注意点（１）
　　　　ＩＤと（入力）パスワードはBasic認証画面で手入力する値
　　　　ＩＤと（設定）パスワードは【.htpasswd】に設定する値

　　注意点（２）
　　　　パスワードの入力がどうやってもエラーになる場合
　　　　　　試しに下記のhtpasswd.exeを使って【.htpasswd】ファイルを作成してみるとよい
　　　　　　結果的に上手くいった

次にＸＡＭＰＰ配下の場合（作成方法が違うので注意すること）
　　（１）Apache付属のhtpasswd.exeを使ってパスワードファイルを作成する
　　　　cd F:\xampp\apache\bin
　　　　htpasswd.exe -bc {パスワード生成先のパス} {ID} {パスワード}
　　　　　　(例）cdコマンドでhtpasswd.exeが在る場所を特定する
　　　　　　　　F:/xampp/apache/bin>htpasswd.exe -bc .htpasswd UUUUUUUU PPPPPPP
　　　　　　　　　　特にパスを指定しなければ
　　　　　　　　　　F:\xampp\apache\binの中に【.htpasswd】ファイルが作成される

【.htpasswd】が存在する場所（絶対パス）を求める
　　【.htaccess】に【.htpasswd】ファイルの位置を記述する際に必要となる

（１）ＰＨＰプログラムを作成する
　　・以下のような内容で用意する
　　　　<?php
　　　　$cwd = getcwd();
　　　　$reqfile = strrchr($_SERVER[“REQUEST_URI”], “/”);
　　　　$urilen = strlen($_SERVER[“REQUEST_URI”]);
　　　　$reqfilelen = strlen($reqfile);
　　　　$reqdir = substr( $_SERVER[“REQUEST_URI”], 0, $urilen – $reqfilelen );
　　　　$current = $_SERVER[“HTTP_HOST”] . $reqdir;
　　　　echo “<p?>カレントディレクトリの絶対パス：$cwd</p?>”;
　　　　echo “<p?>カレントURL： http://$current/</p?>”;
　　　　?>

（２）絶対パスを表示させる
　　・ファイル名を【xxxxxxxx.php】として保存する
　　・調べたいサーバーのフォルダ配下にアップロードして設置する
　　・手動で当該プログラムを起動する

【.htaccess】を使用してパスワードによるアクセス制限が可能になる
　　設置したディレクトリ以下の全てのファイルにパスワード保護が適用される
　　クライアント側でブラウザを閉じるなどの操作が行われない限り
　　　　一度認証に成功したパスワードをブラウザで保持し
　　　　アクセスの度にユーザーがいちいち入力する手間を省く

（１）保護したいディレクトリの確認
　　必ず、パスワードで保護したいディレクトリを決めておく
　　　　各ディレクトリ単位で保護することもできるが、パスワード入力が煩わしくなるので
　　　　一般的にはサイト単位で設置する

（２）【htaccess.txt】の設定と作成
　　　　便宜的に拡張子を【.txt】として作成してから、作業完了後に【.txt】を削除する
　　・メモ帳またはエディタで作成する
　　・以下のようなアクセス制限を記入する（例）
　　　　AuthType Basic
　　　　AuthName “Input your ID and Password”
　　　　AuthUserFile /絶対アドレスを指定する/.htpasswd
　　　　　　※絶対アドレスの求め方は「Basic認証（.htpasswdの場所）」を参照
　　　　require valid-user
　　・【htaccess.txt】の名前でファイルを保存する

（３）【htpasswd.txt】の設定と作成
　　・ログイン用のユーザー名とパスワードを決める
　　　　※パスワードの決め方は「Basic認証（パスワードの暗号化）」を参照
　　・メモ帳またはエディタで作成する
　　・以下のようなユーザー名とパスワードを記入する
　　　　ユーザ名１:パスワード
　　　　ユーザ名２:パスワード
　　　　ユーザ名３:パスワード
　　・【htpasswd.txt】の名前でファイルを保存する

（４）【htaccess.txt】と【htpasswd.txt】をアップロードする
　　転送先のディレクトリは
　　　　サイト全体を保護する場合はindex.htmlと同じディレクトリにアップロードする

（５）ファイル名の変更
　　アップロードした【htaccess.txt】と【htpasswd.txt】のファイル名を変更する
　　　　【.htaccess】と【.htpasswd】に変更する

画像から文字を抜き出す（ＯＣＲ処理）ことが目的だが
　　さらに縦書き日本語を横書き日本語への変換を同時に行って欲しい
　　無論、有料のソフトでなく無料で変換できることが条件で探してみた

Googleドライブのドキュメント部分にＯＣＲ機能が有ることが分かった
　　通常はＷＯＲＤ文書の保存、編集などにGoogleドキュメントを使うことが多い
　　この中に、文書ファイルの代わりに画像ファイルをアップロードすると
　　　　完全に自動で画像の中の文字をテキスト文書として抜き出してくれる

　　（１）まず画像をＧｏｏｇｌｅドキュメントにアップロードする
　　　　・アップロード設定を忘れずに行うこと
　　　　　　アップロードの際に以下のような確認メッセージが表示されるので必ずチエックを入れる
　　　　　　「ＰＤＦや画像ファイルからテキストをＧｏｏｇｌｅドキュメントのドキュメントに変換する」

　　　　・画像ファイルの大きさは２Ｍ（メガ）を超えないこと
　　　　　　超えるとエラーになってアップロードできない
　　　　　　ＰＤＦファイルが２Ｍを超えている場合には下記の様なサービスを使ってファイルを分割する
　　　　　　　　http://foxyutils.com/blog/archive/

　　（２）Ｇｏｏｇｌｅドキュメント内で画像ファイルを開く
　　　　・ＰＤＦの場合だと、元のＰＤＦページの次に変換後の文字テキストページが表示される
　　　　　　変換結果を比較検証しやすいようになっているのが特徴である
　　　　　　コピーや貼り付けの作業が不要なのも特徴である

スマートフォンへの対応について整理しておく
　　スマホ対応において使われるサイト構築技術について記述する

　　（１）文字サイズを大きめに設定する
　　　　１４pt～１５ptにする、ＰＣサイトよりも大きめにする
　　　　　　外出先や移動中でも見ることができる大きさにする

　　（２）文字数を少なくする
　　　　表示可能な領域がＰＣと比べると小さいので、極力文字数を少なくする

　　（３）ボタンを大きくする
　　　　デザイン性のある大きなボタンや、画面の横幅いっぱいのボタンを配置する

　　（４）リンクはリスト化する
　　　　リンクが複数並ぶような時は、リスト化する
　　　　　　リスト化とはリンク項目に一覧性を持たせて並べることです
　　　　　　アイコン化して並べるのもリスト化の一方法です

　　（５）画像の使用を減らす
　　　　不必要な画像（ボタンやアイコンも含む）はＣＳＳ３を使うことにより極力減らす
　　　　　　ＣＳＳ３は角丸や影（シャドウ）の表現にも活かせる

　　（６）ブックマークを使用する
　　　　ブックマークを用意して、スクロールの代わりにページ内でジャンプし易くする

　　（７）文章を折りたたむ
　　　　記事は折りたたんで置き、必要に応じて開ける様にする

　　（８）メニューにはタブを使用する
　　　　画面遷移の状況が目に見えるので複数のコンテンツを上手にコントロールできる

　　（９）問合せ先や地図を用意する
　　　　機動性が高いといった特徴を活かして、電話番号や地図を載せて繋がりやすくする

　　（１０）ＳＮＳとの繋がりを意識する
　　　　数多くのコミュニティを図るために、ＳＮＳへ簡単に繋がる仕組みを設置しておく

　　（１１）位置情報を活用する
　　　　位置情報と連携させることによって、提供サービスの幅が広がる

スマートフォンへの対応について整理しておく
　　技術的な作成上の観点ではなく、デザインする際の基本的な考え方を記述する

　　（１）スマホ優先かＰＣ優先かを検討する
　　　　　　スマホ優先・・・移動中にアクセスされるか、戸外で使用されるか
　　　　　　ＰＣ優先・・・・じっくり家からアクセスされるので、内容に興味を持たせたり、画像を沢山用意して多彩な表現をするか
　　　　こういった点を考慮した上で、スマホ優先での対応を決定することにする

　　（２）常にシンプルな構造にする
　　　　通信環境は比較的改善されてはいるが、通信に必要なデータ量を多くしない
　　　　　　メニューやボタンは画像だけでなく、ＣＳＳを使いなるべくデータ量を少なくする
　　　　　　画面の表示要素をシンプルにする
　　　　　　　　フッターやサイドバーなどを思い切って無くすことも考える
　　　　　　　　便利さよりシンプルさを強調して、使いやすくする
　　　　サイトの階層を複雑にしない
　　　　　　一度の読み込みでできるだけ多くの情報が読み込めるように工夫をする
　　　　段組を使わない
　　　　　　横幅に限界があるので、サイドバーは設けない

　　（３）リンクは一目で分かるようにする
　　　　タッチパネル操作であることを考慮する
　　　　　　マウスポインタが表示されず、ロールオーバー（マウスオーバー）機能は使えない
　　　　　　　　マウスを文字の上に置くと、コメントが浮かび上がったり、文字の色が変わったりする機能
　　　　　　一目でリンクだとわかるように工夫する必要がある

　　（４）タッチ操作に最適な行間や余白をとる
　　　　タッチ操作が誤操作しない様に、文字や画像の行間を見直す
　　　　　　入力を求める場合には、キーボード入力しやすい工夫を施す
　　　　　　選択を求める場合には、選択しやすくボタン等にも配慮する

　　（５）リキッド（可変幅）でデザインする
　　　　縦長の画面と横長の画面の双方でアクセスされる、固定幅でデザインはしない
　　　　　　文節で区切って改行するのではなく、段落で区切って改行する
　　　　リキッド（可変幅）デザインにして、デザインが崩れていないかどうかをチェックする

　　（６）便利なソフトは使わない、見慣れた画面にする
　　　　Flashは使わずに代替手段を考える
　　　　　　可能であればアニメーションgifで代用する
　　　　　　動画をアップロードして、YouTube等の動画サイトへ繋げる
　　　　スマホのＯＳや標準アプリの操作性と一致させたデザインにする
　　　　　　操作の感覚がＯＳと似ていれば取っ付きやすくて分かりやすくなる
　　　　　　角丸で四角形のアイコンを使う、グラデーションの背景に大きなボタンを配置する

　　（７）ＨＴＭＬ５とＣＳＳ３を活用する
　　　　できるだけシンプルなデザインにして、ＣＳＳ３で表現力を高める
　　　　　　ＩＥは徐々に追い着いて来ているので、バージョンを気にする必要もなくなる

　　（８）画面のデザインをスホ用ＯＳに合わせる
　　　　スマホの操作性と一致させることによって、誰にでも簡単に操作に馴染んでもらう
　　　　　　角丸で四角形のアイコンを配置する
　　　　　　グラデーションの背景に大きなボタンを配置する

実際、ＰＣ用画面ににモバイル用の画面を切替えてみた
　　初めてということもあり、試行錯誤を繰り返しながら時間がかなり掛かった

　　いくら修正とテストを続けても一向に完成しないことに気付いた

　　レスポンシブなデザインにして、viewportを使えば
　　　　ＰＣ用でもモバイル用でも共有できるＨＴＭＬソースとＣＳＳソースが出来上がるのは分かった
　　　　これは技術的に可能だと言うことであって、必ずしも満足するモノに仕上がるとは限らない
　　　　双方を満足させようとしたら、時間が幾ら有っても足りないことに気付いた

以下のサンプルを使って説明します

スマホ画面

※※※　スマホの場合は左側の内容が画面いっぱいに表示されます
※※※　　　これ以上、表示項目を増やすと画面が煩雑になると思われた
※※※　パソコンの場合は右側の画面がスカスカ状態で表示されます
※※※　　　かといって表示項目を増やせばスマホ画面が煩雑になってしまう

※※※　要するに、それぞれに適した画面を個別に作成するのが一番良くて
※※※　　　作成者は効率よく作成でき、ユーザは使い勝手が良くなると分かりました

以下のように方針を決めて今後は対応する
　　スマホ対応の進め方（方針編）を参照してください

実際にHTMLやスタイルシートを変更して、どういった画面表示になるかを試してみる
　　基本方針としてはＣＳＳの変更のみで対応することにする

切替え作業に着手する前の状態は以下の通り
　　横幅を固定し、２カラムで作成したサイトを切替えの対象とする
　　最上段はheader部、中央はmain部と右横にsidebar部、最下段はfooter部となっている
　　横幅８００pxの固定幅で定義している

１．スマホの試行テストを開始する
スマホの表示をテストする
　　・違和感の有る画面が表示される
　　　　８００pxの固定幅画面全体を忠実にスマホ画面に表示する
　　　　　　文字は小さくて読みづらい、ピンチアウト（拡大）操作すれば読めるようにはなる

ＨＴＭＬを修正する（全ページのheader部の修正となるが、限定的なので方針内とする）
　　・ＨＴＭＬに【viewport】を追加する
　　　　　<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ >

スマホの表示をテストする
　　・違和感の有る画面が表示される
　　　　【initial-scale】を指定したにも関わらず、数倍に拡大されたものが表示される
　　　　　　sidebar部はオーバーフローしmain部の下方に回りこんで表示されている
　　　　　　文字は小さくて読みづらい、画面下方にはスライドバーが表示されている
　　　　ピンチイン（縮小）操作すれば読めるようにはなる、画面下方のスライドバーも見えなくなる

スマホ用のスタイルシートを用意する
　　・ＨＴＭＬに【link】を追加し、新たにスマホ用ＣＳＳを指定する
　　　　<link rel=”stylesheet” href=”css/smart.css” media=”screen and (max-width: 500px)” type=”text/css”/>
　　　　従来のＰＣ用ＣＳＳ定義の行の次に挿入する
　　　　　　共通のスタイルシートを先に、個別のスタイルシートを後に定義する
　　　　　　　　※ｌｉｎｋ命令と@import命令の読込み順位は不明、だが経験値としてこの順でないといけない

　　・ＣＳＳファイルを新たに用意する
　　　　【@import】命令で共通のスタイルシートを呼び出しておく
　　　　【width】で定義してある固定幅の値を１００％と上書き訂正する（当然複数箇所の対応となる）

スマホの表示をテストする
　　・違和感の有る画面が表示される
　　　　違和感は有るが、ＨＴＭＬとＣＳＳの値が反映され始めていると確信する
　　　　後は、ＣＳＳの微調整を繰り返して行い、気長に表示画面をスマホ用にするだけとなる

修正手順を整理しながら、少しづつ進める（実際には、行きつ戻りつの試行錯誤を何度と無く繰り返す）
　　・ＨＴＭＬの修正は以下の様にする・・・・・・表示幅の大きいモノから順に並べて定義する
　　　　<meta name=”viewport” content=”width=device-width,initial-scale=1″ / >
　　　　<link rel=”stylesheet” href=”css/pc.css” type=”text/css” media=”screen and (min-width: 1024px)”/>
　　　　<link rel=”stylesheet” href=”css/tablet.css” type=”text/css” media=”screen and (min-width:768px) and (max-width:1023px)”/>
　　　　<link rel=”stylesheet” href=”css/smart_l.css” type=”text/css” media=”screen and (min-width:480px) and (max-width:767px)”/>
　　　　<link rel=”stylesheet” href=”css/smart_s.css” type=”text/css” media=”screen and (max-width:479px)”/>

　　　　値の設定はスマホは320px x 480px、タブレットは768px x 1024pxと想定している

　　・ＣＳＳの修正は以下の様にする
　　　　【width】を１００％にする、画面横幅いっぱいに表示されると想定する
　　　　【background-color】を使って各ＣＳＳごとに色を変えた、ＣＳＳ定義の反映状況の確認に使用する
　　　　　　HTMLの記述やＣＳＳの定義に自信が無い初期段階での表示テストには有効であった

スマホの表示をテストする
　　　　縦にして表示すると
　　　　　　特定のブロックだけが右に飛び出している
　　　　　　背景の色を見て、修正した縦型ＣＳＳが反映されていると確信する
　　　　横にして表示すると
　　　　　　画面からはみ出さずにピッタリと収まっている
　　　　　　文字の大きさがアンバランスな感じ、途中で切れている部分もある
　　　　　　背景の色を見て、修正した横型ＣＳＳが反映されていると確信する
　　　　縦で表示してから横にすると
　　　　　　文字も大きくなり、画面からはみ出してしまう、ピッタリ収まっていたのに・・・・かなり長時間悩んだ
　　　　　　　　収まらなくなった原因は【inirtial-scale】はページを読み込んだ時のみ有効と分かる
　　　　　　　　読み込んだ後で縦横を変化させても、ページの再読み込みは行わないため
　　　　　　　　320px分を480pxにして表示したため、１．５倍の大きさになって表示されたと分かる

　　ここまでのテストで基本的な動きが保障されたので、後はＣＳＳの微調整だと割り切る
　　　　デバイスの表示幅の範囲に合わせて最適な固定幅を定義をしたり
　　　　デバイスの物理属性に合わせて最適なＣＳＳを選んだり
　　　　試行テストの種類にはまだ先がある、が一旦ここで打ち切ってＣＳＳの微調整を行って収束させる

２．タブレットの試行テストを開始する
タブレットの表示をテストする（８００pxの固定のまま）
　　　　横にして表示すると
　　　　　　画面からはみ出さずにこじんまりと中央に収まっている
　　　　　　背景の色は、タブレット用に指定した色ではなくて、ＰＣ用の色が反映されている

　　タブレットはＰＣ用のＣＳＳで賄えると判断し、タブレットのテストは終了させる

モバイル端末用に表示を切替える（試行編、対応編）も必ず読んでください

ＰＣサイトをモバイル端末用サイトに変換する方法
　　・ＷＰで構築したサイトはプラグインを使って切替える方法
　　　　【WPtouch】等のプラグインを使って、ＰＣサイトを変換する
　　　　PCサイトとのデザインの統合が取りにくい
　　・ＰＣサイトをサービスを使って切替える方法
　　　　【shutto】等のサービスを使って、ＰＣサイトを変換する
　　　　PCサイトから、パーツやコンテンツをドラッグアンドドロップして簡単に構築できる
　　・レスポンシブWebデザインへ切替える方法
　　　　スクリーンの横幅に合わせてスタイルシートを切り替える方法、手軽に対応できる
　　　　CSS3のメディアクエリを使って、ＰＣサイトを変換する
　　　　端末に合わせて、ファイルサイズやユーザインタフェースが最適化されるわけではない
　　・スマホ向けフレームワークを使って再構築する方法
　　　　オープンソースのスマホ向けフレームワークを利用して再構築する
　　　　【jQuery Mobile】等を使って、ＰＣサイトを変換する
　　・HTML5とCSS3で新たに構築する方法
　　　　モバイル端末用のサイトをゼロから構築する、ＰＣサイトは残す
　　　　デザインやレイアウトの自由度が最も高く、いちばん習得しやすい方法
　　　　ＰＣサイトと更新の同期をとる必要が発生する

「レスポンシブWebデザイン」での方法を記述する

ＨＴＭＬソースを修正する（その１）
　　HTMLヘッターのタグ部分に【viewport】を設定する
　　デバイスの横幅で表示する、という意味である

　　モバイル対応を施さないと
　　　　何も対応せずにPC 向けのサイトを表示すると、９８０pxの前提で表示するので
　　　　結果として、文字が小さくなって表示され読みにくくなる

　　デバイスの横幅で表示すると
　　　　<meta name=”viewport” content=”width=device-width”>
　　　　横向きにした時に、縦向きの画面を横に引き伸ばして表示しようとするので
　　　　結果として、表示される文字数は同じで、各文字が拡大表示され読みにくくなる

　　横向きの時は一行の文字数を増やすと
　　　　<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>
　　　　横向きにした時に、横に引き伸ばさずに等倍（１．０）で表示するので
　　　　結果として、横１行に表示される文字の数は多くなる
　　　　但し、ピンチによる拡大・縮小ができないという大きな弱点が生じる

　　ピンチを可能にする
　　　　<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ >
　　　　ピンチは可能で横向きにした時に１行の文字数も増える

　　最後に
　　　　文字のサイズを固定化したいなら、CSS に次の様に指定する
　　　　　　body {
　　　　　　-webkit-text-size-adjust: 100%;
　　　　　　}

ＨＴＭＬソースを修正する（その２）
　　外部スタイルシートをLink要素と【media】を用いて互いに適用させる
　　　　<link rel=”stylesheet” href=”css/smart.css” media=”screen and (max-width: 500px)” />
　　　　<link rel=”stylesheet” href=”css/tablet.css” media=”screen and (min-width: 501px) and (max-width: 800px)” />
　　　　<link rel=”stylesheet” href=”css/style.css” type=”text/css” />

　　　　１行目は、最大５００px（４８０pxのスマートフォンとする）の場合のＣＳＳを指定する
　　　　２行目は、５０１px～８００px（タブレットとする）の場合のＣＳＳを指定する
　　　　３行目は、それ以上（ＰＣとする）の場合のＣＳＳを指定する

ＨＴＭＬソースを追加修正する（その３）
　　画像の制御などは横幅に左右されるので、正確な対応が必要である
　　　　画像の横幅を指定しなかったり、１００%で指定する等等
　　　　対応しないと、横スクロールしようとするので見難くなる

スタイルシート（ＣＳＳ）を修正する
　　フレキシブルレイアウトを適用する場合には
　　　　要素の単位を%で指定したり、最小幅と最大幅を指定して微調整を図る

Webデザインのレイアウトをまとめる
　　レスポンシブwebデザイン(Responsive Web Design)
　　　　一つのソースでディスプレイの幅に合わせてデザインを最適化する方法
　　　　CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更する
　　エラスティックレイアウト(Erastic Layout)
　　　　要素の単位をemで指定する
　　　　emは1文字分の幅なので文字の大きさを自由に変えてレイアウト幅を変更する
　　リキッドレイアウト(Liquid Layout)
　　　　要素の単位を%で指定する
　　　　ブラウザサイズによって相対的・可変的に幅が変わり、サイズに合わせて情報を提供できる
　　フレキシブルレイアウト(Flexible Layout)
　　　　リキッドレイアウトと同じで要素の単位を%で指定する、最小幅と最大幅を指定する
　　　　最大値と最小幅を指定してるため可読性やレイアウトの崩れをコントロールできる
　　固定幅レイアウト(Fixed Layout)
　　　　要素の単位をpxで指定する
　　　　レイアウト幅が固定され、意図した通りのレイアウトで表示される
　　グリッドレイアウト(Grid Layout)
　　　　架空の縦横線を下地とし、そこに出来たブロックごとに文字や画像などの要素を配置する
　　　　整った安定感のあるレイアウトになるが、多くのサイトで使われているので見慣れたレイアウトになる
　　可変グリッドレイアウト(Fluid Grid Layout)
　　　　グリッドベースのpxを%に変えて、グリッドの仕組を可変レイアウトにする
　　　　ブラウザサイズに合わせて整った要素が再配置されるので、正確に情報を伝えられる