PHPを学ぼう!

▼PHPを学ぶチャプターです。


SMS付き2Gは、900円。
通話付きは、1600円。

 

素材メニュー

 ◆Chapter 1

 ◆Chapter 2

 ◆Chapter 3

 ◆Chapter 4

 

制作ヒント

 ◆制作のヒント

 

レッスンメニュー

 ◆Chapter2 練習問題

 ◆Chapter3 DB練習問題

 

サイト運営者がPHPを学んだ
お勧めの書籍です!
これ一冊で基本的なPHPの仕組み、簡単なプログラムの作成、SQLiteを使ったデータベースなどかなり学べる要素が詰まっています!

↓↓↓ ↓↓↓

PHPレッスンブック―PHP5対応

新品価格
¥2,520から
(2013/2/24 04:38時点)

 

 

サイバーテロの技法について書かれた書籍です!
ハッカーの手法を知ることでご自身のサイトがハッカーに攻撃されたときそれを防ぐ手法を紹介しています。

↓↓↓ ↓↓↓

PHPサイバーテロの技法―攻撃と防御の実際

新品価格
¥1,890から
(2013/11/5 10:09時点)

 

 

★初年度100円! サブドメインやメールアカウントを無制限に設置できます。
PHPやCGIは勿論、WordPress、Movable Type Open Source、掲示板、ブログ、ショッピングサイトなどが簡単に導入できるので複数サイトを運営したい場合に便利なサービスです。

↓↓↓ ↓↓↓

 

PHPが動作するサーバー

 

はじめてのHP | 無料素材 | タグ辞典 | CSSガイドEX | PHPを学ぼう!

◆Tip13 - スマホ・サイトを作るうえでの注意点

スマートフォンのサイトを作ろうと思うと何か難しいように思いがちですが、スマホサイトは通常のホームページの感覚で制作することもできます。

JavaScript を使ったアコーディング式のメニューのようなものを取り入れなければ通常のサイト制作と同じようにスマホサイトの制作ができるのです。
この Tip ではそんなサイト作りを目指す人に役立てて欲しいことを紹介します。

 

まずスマホや携帯サイトを作る際には、スマホや携帯でどのように表示されるのかを確認する為のシュミレーターが必要です。
勿論、実機があればそれが一番なのですが全ての機種を揃えるのは大変ですよね。
そこでパソコンで使えるビュワーやシュミレーターを使うことをお勧めします。

 

携帯のビューワーといえば、goo モバイルのサイトビューワiモード HTML シミュレータII などがあります。(2014年10月現在)
これらは携帯専用のものとなります。

 

このサイトの制作者は、主に FireFox を利用していますのでそのアドオンである「 User Agent Switcher 」をシュミレーターとして利用しています。
このアドオンでは別途、xml をインポートすればスマホやタブレット、携帯などの表示確認ができるので便利なツールだと思います。
詳しくは、「ROOM9 スマホのブラウザチェックならこれ!」を参照ください。

 

「 User Agent Switcher 」を使う上で注意したいのは、あくまでもシュミレーターはシュミレーターなので実機と全く同じ表示を期待することはできません。
特に注意してほしいのは、シュミレーターで表示確認ができても実機のスマホや OS、ブラウザによっては表示できないことがあるのです。

 

スマートフォンサイトの制作では次の事に注意してください。

  • インラインフレーム(iframe )の使用
  • スマートフォンでは読み込まれたページのスクロール対応ができないようです。というよりブラウザが対応していないのかな・・・。
    (2014年10月現在)

  • リンクの文字や画像サイズ
  • スマホやタブレットではリンク文字や画像は指先でタップ(クリック)するので行間やサイズを工夫する必要があります。 サイズは 4 の倍数を使うのが理想です。何故なら、拡大縮小した場合に割り切れるサイズであれば型崩れしにくくなるからです。
    文字なら 12pt か 16pt で、画像なら縦横 40px 以上で制作することをお勧めします。

  • フォルダやファイルの深度
  • 一つのサイトで PC、スマホ、タブレット、携帯用に合わせてホームページの表示が切り替わるよう制作するのが基本となります。
    大抵の場合、夫々のディレクトリ(フォルダ)で対応したページを用意することになります。
    ディレクトリの震度を深く、複雑化することでページ表示に問題を起こす場合があります。

  • モニターサイズを意識する
  • スマホやタブレットは機種によりモニター(画面)サイズがバラバラです。
    とくに新しい機種は解像度がどんどん良くなり、モニターサイズが大きくなってきます。 サイズを決めて振り分けて最適化することも必要になってくるでしょう。
    逆にスマホの横幅 320px、タブレットは 768px と決めてしまってもよいと思います。
    この場合、解像度の高い端末では画面が縮小されて表示されてしまうことがあります。
    モニターサイズで表示を切り替えたい場合には、Java Script を利用することになります。
    Java Script の値を PHP で使いたい場合、または逆に PHP の値を Java Script で使いたい場合には、「Javascriptの値をPHPで使う」を参照ください。

 

サイト制作をしていると、パソコン用、スマホ用、タブレット用、携帯用に分けて制作することがあります。
そのような場合には、次の PHP プログラムを参考にページ振り分けをしてみてください。

//▼振分処理
$ua = $_SERVER['HTTP_USER_AGENT'];
if((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {
  // スマートフォンからアクセスされた場合
  header("Location: ./s/index.php");
  exit();
}elseif((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) {
  // タブレットからアクセスされた場合
  header("Location: ./t/index.php");
  exit();
}elseif((strpos($ua, 'DoCoMo') !== false) || (strpos($ua, 'KDDI') !== false) || (strpos($ua, 'SoftBank') !== false) || (strpos($ua, 'Vodafone') !== false) || (strpos($ua, 'J-PHONE') !== false)) {
  // 携帯からアクセスされた場合
  header("Location: ./g/index.php");
  exit();
}else{
  // その他(PC)からアクセスされた場合
  header("Location: ./index.php");
  exit();
}

Location 先は適切、変更してください。
このプログラムにモニターサイズで振り返る要素を加えると、より細かいサイト作りもできます。

 

スマートフォンとタブレットのサイトには次のメタタグ(meta)を追加します。

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1, maximum-scale=1" />
<meta name=""format-detection" content="telephone=no" />

このメタタグは、上段はページ表示の倍率を設定しています。
viewport で幅をデバイスの幅にしてユーザーによる拡大を回避します。
スマートフォンに最適化されたサイトを初期表示倍率を 1 に、最大倍率を 1 にすることで表示されるサイトをデバイスに合わせて表示してくれるのです。
下段は、ページの中の数字の羅列で間違って電話をかけないようする為のものです。

 

ごく簡単な説明でしたが、これからスマホやタブレットのサイト制作にチャレンジする方の参考になればとありがたいです。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ex-mode.net | ツールEX | 素材EX | アフィモール | 初級者向 初めてのホームページ作り | Htmlタグ辞典 | 初めてのプランター菜園 | リンク・ボード
気のみ気のままなブログ | CSSガイドEX | ホビ★コレ | 班長日記!

▲UP

Copyright (C) ex-mode.net 2017. All Rights Reserved.