PHP

PHPでスマホサイトとPCサイトを振り分ける方法【初心者向け】

初心者向けにPHPでスマホサイトとPCサイトを振り分ける方法について解説しています。PCサイトでもスマートフォンサイトでもレスポンシブデザインを用いて同じページで表示している例が多いですが、内容によっては振り分けが方が良い場合もあります。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

PHPでスマホサイトとPCサイトを振り分ける方法について解説します。

そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。

今回は、PHPに関する内容だね！

どういう内容でしょうか？

PHPでスマホサイトとPCサイトを振り分ける方法について詳しく説明していくね！

お願いします！

スマホサイトとPCサイトを振り分ける方法

振り分ける方法としては、共通のHTMLを使ってCSSの機能だけでデザインを変更するレスポンシブデザインもありますが、完全にドキュメント構造から分けたい場合はPHPでユーザーエージェント情報などを参照してレスポンスする必要が出てきます。

ユーザーエージェントとはHTTPクライアントのことで一般的にはブラウザのことを指します。

ユーザーエージェントは自身の名前をHTTPヘッダにつけてHTTPサーバー（Web サーバー)にリクエストを送信します。

ここにPC用ブラウザかスマートフォン用ブラウザかのヒントがあります。
HTTPクライアントの自己申告ですので残念ながら、この方法で100%正しく判定できる保証はありません。

ブラウザ以外ではcURLや検索エンジンのクローラー、BOTなどがHTTPリクエストを送って来る可能性があります。これらのユーザーエージェントが何になるかはよくわかりませんので正確な判定は難しくなります。

また、新しいデバイスやOS、ブラウザなどが出現したり、バージョンが変わると判定方法が通用しなくなる可能性もあることは認識しておいてください。

しかし、メジャーなブラウザが判定できるだけでも実用上は支障がないと思われます。

実際に書いてみよう

<?php
function is_mobile()
{
    $user_agent = $_SERVER['HTTP_USER_AGENT']; // HTTP ヘッダからユーザー エージェントの文字列を取り出す

    return preg_match('/iphone|ipod|ipad|android/ui', $user_agent) != 0; // 既知の判定用文字列を検索
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>クライアントの判定</title>
</head>
<body>
    <p><?= $_SERVER['HTTP_USER_AGENT'] ?></p>
    <p>このリクエストは <?= is_mobile() ? '携帯端末' : 'PC' ?> からです</p>
</body>
</html>

実行結果（Chrome のデベロッパツールでの検証結果）

Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

このリクエストは携帯端末からです

この記事を監修してくれた方

大網清和（おおあみきよかず）
現在は派遣スタッフとして Laravel で大手ポータルサイトの開発業務をしています。

プログラム歴は長く中学生の頃から始めて35年くらいになります。古くは BASIC、C、COBOLなどを経験し SQL を集中的に使っていた時期もあります。
Web の開発はまだ2年位とあまり長くは無いですが、プログラミングの楽しさを伝えられたら良いなと思っています。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは、初心者でもPHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できるオンラインブートキャンプPHP/Laravel講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

【2019年最新】徹底比較！PHPの人気フレームワークまとめ

PHPは、Webシステムのためのプログラミング言語として登場し、現在も多くのサービスを生み出しています。そして、Webサービスを使う上で多用されているのがフレー...

PHP

PHPでarray_walkを使う方法【初心者向け】

PHPでarray_walkを使う方法について解説します。 array_walk関数を使うと、配列の各要素に対して処理を適用させることが出来ます。 ...

PHP

覚えておくと便利！PHPでコメントアウトする書き方【初心者向け】現役エンジニアが解説

PHPでコメントアウトをする書き方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。複数人で作業をす...

PHP

PHPでarray_searchを使う方法を現役エンジニアが解説【初心者向け】

PHPでarray_searchを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

PHP

PHPのforeachで順番を変える方法を現役エンジニアが解説【初心者向け】

今回は、PHPのforeachで順番を変える方法について解説します。そもそもPHPについてよく分からないという方は、PHPとは何なの...

PHP

PHPでデバッグを行う方法を現役エンジニアが解説【初心者向け】

今回は、PHPでデバッグを行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

PHP

あわせてよく読まれている記事

【入門編】今さら聞けない！PHPとは【初心者向け】｜現役エンジニアが解説

Web開発でよく使われている「PHP」という言語を初心者向けに解説した記事です。聞いたことはあるけど、いまいちPHPが何なのかよく分からないという人は、ぜひご覧ください。これからプログラミングを始めようと思っている人にも全体像がイメージできると思います。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。目次 PHPとは PHPでできることサーバーとクライアントとは PHPがプログラミング初心者向きな理由 PHPの将来性やエンジニア需要基本的なPHPの書き方 PHPの基本構文 PHPを学習できるWebサービス PHPを学習できる書籍 PHPとは PHPはHTMLに埋め込むことができるため、Web開発でよく使用されるスクリプト言語です。Web開発でよく使用されるスクリプト言語に、JavaScriptがありますが、PHPとJavaScriptの大きな違いは、そのコードがどこで実行されるかにあります。 JavaScriptは、クライアントサイド（Webサイトを閲覧しているブラウザ）がコードを受け取り、そこで動作します。そのため、どのようなコードが書かれているのか、誰でも見ることができてしまいます。一方、PHPはサーバーサイドでコードを実行します。クライアントサイドはその結果のみを受け取るため、どのようなコードで導き出された結果なのか見ることができません。 PHPを実行するには、PHPがインストールされたWebサーバーが必要です。ローカルに開発環境を用意したい場合は、XAMPPを使うのが便利です。また、すぐにPHPを使用することができるレンタルサーバーもあるので、すぐに勉強を始めたいという場合は便利です。大石ゆかり田島メンター！サーバーサイドで実行されるというのは、どういうことでしょうか？田島悠介簡単に例えると、サーバーサイドが自分の家、家に訪問してくる人がクライアントサイドかな。大石ゆかりサーバーサイドは訪問してくる人を選べるってことですか？田島悠介そうそう。外から入ってくる人を選べるので、セキュリティとか、管理人しか入れない領域とかを作ることが出来るんだ。ブログ・ショッピングサイト・SNSなど。では、PHPについて見てみよう！ [PR] PHPを学んで未経験からWebエンジニアを目指す方法とはPHPでできること PHPを使うと、ひとつのページに様々な情報を反映して動的なページを作ることができます。基本的にPHPでよく使用されるのは次の３つです。 HTMLソースコードを生成する PHPを使うと、HTMLソースコードを作成することができます。すべての文章をPHPで書く必要はなく、HTMLの一部分のみPHPで生成するということができます。データベースと連携する PHPを使うとMySqlやPostgerSQLなどさまざまなデータベースと連携したWebサイトを簡単に作成することができます。ブログや掲示板などのサイトは、記事をデータベースに記録し、サイトへのアクセスがあるとPHPでその記事のデータをデータベースから読み込んで表示させています。クライアントから送信された情報を受け取る HTMLのフォームでユーザーが入力した情報をPHPを使って受け取ることができます。HTMLで作成したフォームから送信された情報を受け取って、HTMLソースに表示したり、データベースに保存したりすることができます。サーバーとクライアントとは続いてサーバーとクライアントの違いについて、SNSの代表のツイッターを題材にお話しようと思います。まず言葉的な話ですが、クライアントとは、サービスを利用しているユーザー側という意味で、逆にサーバー側とは、データなどを取り扱っているサービス提供側という意味になります。ツイッターだとスマホを使って操作しているのがクライアント側で、ツイッターの運営会社がサーバー側という事になりますね。クライアントとサーバーと何故別れているかというと、システムの機能性と安全性のためです。クライアント側の役割例えばクライアント側(JavaScript)でのプログラムの処理といえば、まず初期表示の時にどこになんの文字または画像を表示させるのかという処理など「ツイート」をクリックすると画面にコメントボックスを表示する。「DM」を押すと、DMメッセージ一覧を表示させるなどの画面側での処理などをメインで行っています。実はクライアント側のプログラムというのはユーザー側のパソコンなどスマートフォンなどに、保存されていてそのプログラムを読み込んで動いています。サーバー側の役割逆にサーバー側(PHP)では、ユーザーさんがツイートしたデータをツイッター画面から送ってもらって企業側のデータベースに格納する。他のユーザーが、最新のツイートに取得する際に新しいツイートをユーザー側に送るというデータベースに関係する処理を行います。サーバー側のプログラムはユーザーには基本非公開ですので、改ざんの余地などもありません。ですのでデータ関係の処理をサーバー側に一任しているのです。 PHPがプログラミング初心者向きな理由まずPHPが他のプログラミング言語と違って初心者向きな所は、「関数」というものが豊富にある点です。関数とは値を渡せば様々な結果が返ってくるというとても便利なものになります。関数の中でも初心者におすすめの物がarray()という関数で、これはデータを取り扱うために必要な「配列」を作る関数になります。配列とは、複数のデータを保持しておける箱のようなものです。通常配列のデータを取得する際は、この箱の何番目のデータがほしいというように指定してデータを取得しますが、PHPでは上記の関数で通常の配列とは少し違う連想配列というものを手軽に作れます。連想配列ではデータの保存場所に数字ではなく名前をつける事ができます。たとえばこの箱の「◯◯」という名前のデータをください指定するだけで、データの取得および保管などができるのです。もう一点は、型の自動変換機能があるところだと思っています。プログラミング言語には、データを取り扱う際に型というもの概念があります。例えば「1234」は数字型で「あいうえお」は文字型「2020/06/25」は日付型という扱いがあります。上記で説明した配列にもこれは当てはまります。数値の配列という形で宣言した場合、数値のデータしかいれる事ができないのです。ですので、通常のプログラミング言語では数値型に文字型のデータなどを入れるとエラーが表示されますが、文字型の1234というデータを文字ではなく数値として変換すれば代入が可能になります。これをキャストといいます。 PHPではこのキャストを指示しなくても暗黙的に行います、ですので初心者で型の事を上手く理解できていない人でもプログラムを組むことができるのです。（余談ですがこの型がプログラムで難しいところといわれている所でもあります。） PHPの将来性やエンジニア需要 PHPは世界中で利用されています。最新のGitHubの調査(2019年)によるとPHPでは第4位に人気がある言語として記録されています。 PHPが登場したのは1995年ですから、それから20年以上もの間、高い人気を保ったまま利用されていることが分かります。この人気は今後しばらくは続くことでしょう。 GitHubよりまたPHPは日本国内のソフトウェアの開発現場でも多く利用されています。求人・転職情報サイトGreenでPHPの求人を検索してみると約1200件ヒットしました(2020年6月現在)。これはフロントエンド(約780件)、Python(約760件)よりも圧倒的に多く、開発現場で最も多く利用されているJava(約1800)の次ぐらいに多い求人数です。画像出典：Green またITベンダーやシステム開発会社の新入社員研修でもPHPはJavaと並んで多く採用されています。それもやはり求人数の多さから即戦力を意識してのことと思われます。エンジニアとしてはPHPとフロントエンドの知識を持っていれば、非常に重宝される人材となりうるでしょう。基本的なPHPの書き方 PHPファイルは「.php」という拡張子をつけることで、PHPファイルであることをコンピューターが認識してくれます。（例　index.php） PHPを記述する場合、「<?php」で始まり「?>」で終わるというルールがあります。この間に書かれるスクリプトは複数行になっても大丈夫です。また、スクリプトの最後には「;」が必要です。以下が、HTMLにPHPを埋め込んだ例です。 <!DOCTYPE html> <html> <head> <title>基本的なPHPの書き方</title> </head> <body> <?php echo "HELLO WORLD"; ?>

PHP

PHPのheader関数でリダイレクト処理を行う方法【初心者向け】

PHPプログラムのheader関数で別のページに移動させる方法やリダイレクトの使い方について解説します。会員機能などがあるサービスでは、よくあるページにリダイレクトされるのを目にすることがあると思いますが、実際の開発でも役立つ知識なので、ぜひ覚えておきましょう。目次 PHPのheader関数で別ページにリダイレクトする別ページへ移動するリダイレクトの使い方リダイレクト時に発生するエラーの対処方法おわりに PHPのheader関数で別ページにリダイレクトする header関数自体は、HTTPヘッダを送信する、という機能です。簡単に言うと、ブラウザでアクセスしてくれた人に、情報を送ることができます。 echoやprintなどの標準出力関数も似てますね。 echo("おはよう"); 上記とした場合、おはようが出力されると思いますが、PHPはサーバサイドで実行されるプログラミング言語です。ブラウザでアクセスした先のコンピュータ上で実行されて、ブラウザがあるコンピュータ側に、おはようと送信されます。 header関数だけが、HTTPヘッダを送信するわけではなく、PHPプログラミングがあれば、加工されてからHTTPヘッダとして送信されます。サンプルコード <?php 　 header('Location: https://techacademy.jp/'); 解説 1行目の<?php では、このプログラムがPHPプログラムであることを意味します。 2行目のheader('Location: https://techacademy.jp/'); では、header関数を利用して、techacademy.jpという位置をLocationと指定して、移動する処理を実装しています。この際、httpから始まる絶対パスでも、.から始まる相対パスでもOKです。今回は、アクセスした瞬間に「https://techacademy.jp」へ移動します。大石ゆかり田島メンター！リダイレクトでは、外部のサイトでも自分のサイトの別のページでも移動させることができるんですか？田島悠介そうだよ。別のサイトやページに移動させることができるんだ。大石ゆかりどういう時に使うんでしょうか？アクセスした途端に、別のURLに飛ばされたら嫌ですね。田島悠介 PHPによるリダイレクトなので、PHPに関わりがあるところが良いかな。実際の使用例を見てみよう！ [PR] PHPを学んで未経験からWebエンジニアを目指す方法とは別ページへ移動するリダイレクトの使い方ページにアクセスすると、別のページへ移動させる方法なんてHTMLでもJavaScriptでもあるのに、PHPのheader関数は必要なの？と思うかもしれません。どんな時に使用されるのか見ていきましょう。ログイン時アフィリエイトIDなどを隠したい場合 1. ログイン時ログインが必要なページにアクセスした場合、未ログインならば、IDとパスワードの入力を促されるページにリダイレクトするなどで使用します。 PHPの中で、条件にしたがって使用するリダイレクトです。サンプルコード <?php $user=''; if(!$user){ header('Location: https://techacademy.jp/'); } 解説 1行目の<?phpでは、このプログラムがPHPプログラムであることを意味します。 2行目の$user='';では今回サンプルプログラムを動作させるために、ユーザーがログインしていない状態を想定して、変数$userを空っぽの状態にしています。 3行目のif(!$user){では、変数$userに値が入っていなければという条件式を実装しています。変数の前に!を記載しているのは否定演算子です。つまり、変数$userを否定することで、変数$userの値がない場合という条件を作成しています。 PHPのif文に関しては次の記事を参考にしてみてください。 PHPで条件分岐（if文）を使う方法【初心者向け】 | TechAcademyマガジン 4行目のheader('Location: https://techacademy.jp/');では、header関数を利用して、ユーザーがログインしていない場合にこのページが表示された瞬間、Locationで指定したhttps://techacademy.jp/に移動する処理を実装しています。 2. アフィリエイトIDなどを隠したい場合アフィリエイトIDなどを隠したい場合に使用します。専用のリダイレクトページを用意して、header関数でリダイレクトさせることによって、アフィリエイトIDを表示させずに移動してもらうことができます。例えば、自分のURL上に、r.phpを用意しておきます。専用のリダイレクトプログラムです。また、別のページにある広告のリンク先を自分のURL/r.php?id=1などとしておきます。広告のリンクの飛び先を、リダイレクトページに指定しておいて、リダイレクトページにて実際に飛ばしたいページへ移動させます。サンプルコード <?php $redirect[1] = "http://affiliate-test.com?my_affiliate_id=33"; if( isset($_GET['id']) ){

PHP

PHPでhttpかhttpsかを判定する方法を現役エンジニアが解説【初心者向け】

今回は、PHPでhttpかhttpsかを判定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、PHP/Laravel講座の内容をもとに紹介しています。田島悠介今回は、PHPに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 PHPでhttpかhttpsかを判定する方法について詳しく説明していくね！大石ゆかりお願いします！ httpとhttpsの違いとはこの記事では、PHPでhttpかhttpsかを判定する方法を紹介します。まずは、httpとhttpsの違いについてついて説明していきます。 HTTPとは「Hyper Text Transfer Protocol（ハイパーテキストトランスファープロトコル）」のことです。ホームページのデータは文字だけでなく画像や動画などがあります。これらのデータをサーバとクライアントの間で通信するときの通信規約（プロトコル）がHTTPです。 HTTPに対してHTTPSには文字列の最後に「S」が付いています。この最後の「S」は「Secure（セキュア）」の「S」です。HTTPSもHTTPと同じプロトコルの一つですが、HTTPSではSSL（Secure Socket Layer）というプロトコルが使用されています。 SSLのプロトコルを使用することによりその通信の内容は暗号化されます。URLがhttpかhttpsかで何が変わるかというと、通信内容が暗号化されているか、されていないかの違いとなります。 URLがhttp://で始まるものは暗号化されておらず、URLがhttps://で始まるものは暗号化されているものとなります。暗号化されているということは、通信を行う際の安全性が高まり、通信経路の盗聴や改ざんによる、詐欺被害や、ハッキング、無線LAN経由でのサイバー攻撃などを受けにくくなります。反対にHTTP通信を行うことは、そのような被害を受けやすく、HTTPS通信を行うことが推奨されています。 httpsを判定する方法上記の通り、HTTPでの通信はセキュリティ面の安全性が不十分のため、もしユーザーがHTTP通信を行った場合、HTTPS通信に変換するような処理を行ったりすることができ、より安全にシステムの利用、運用を行えます。それでは、まずはユーザーがHTTP・HTTPSのどちらでシステムにアクセスしているか半別する方法を紹介します。 echo $_SERVER['HTTP']; 通信プロトコルの内容を知りたい時にPHPでは基本的に、$_SERVER というスーパーグローバル変数にアクセスすることで値を取得できます。上記では$_SERVERにHTTPという文字列を指定することで、通信の内容がHTTP通信であるかを確認できます。もし、HTTP通信であった場合は以下の結果となります 'on' 反対にHTTP通信でなかった場合は「NULL」になります。また、$_SERVERにHTTPSの文字列を渡すことで、その通信内容がHTTPSかどうかを判別できます。 [PR] PHPを学んで未経験からWebエンジニアを目指す方法とは実際に書いてみようそれでは、上記の判定方法を利用して、HTTP通信でシステムにアクセスされた場合、 HTTPS通信に変換するようなソースを見ていきましょう。 <?php // HTTPS通信でなかった場合HTTPS通信でリダイレクトする if (empty($_SERVER['HTTPS'])) { header("Location: https://{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}"); exit; } 上記のソースでは、まず、通信内容がHTTPSかどうかを判定し、そうでなかった場合は、https://で始まるURLに変換し、リダイレクト（自動的に指定したURLに転送）するという内容になっています。このような処理を行うことで、HTTPS通信による安全なシステムのアクセスできます。筆者プロフィール平野大輝（ひらのだいき）スキル：PHP・Java・JavaScriptを用いて様々なアプリを開発するWebエンジニア。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でも、PHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

PHP

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。目次スマホサイトとPCサイトを振り分ける方法実際に書いてみようそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！大石ゆかりえっ？オセロゲームを作るなんて、難しそうですね、、、田島悠介大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。大石ゆかりはい！よろしくお願いします！はじめに対象読者本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！入門向けのJavaScriptを学習できるサイト本記事の目的本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。設計から実装までの、エンジニアの思考プロセスを体験するゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛えるオセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！注意点本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間ゲームに限らず、いかなる実装においても設計は非常に重要です。機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。オセロゲームのルールを確認しようオセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。まずは前提条件となるオセロゲームのルールを確認していきます。オセロゲームのルール盤は8×8マスを利用する初期状態で真ん中の4マスに白黒の石を交互に配置する先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく石を置ける場所は、下記の条件を満たしている置くマスに他の石がないこと置くマスの上下左右、斜め1マスの場所に相手の石があること置いた石、相手の石があった方向の延長上に自身の石があること石を置ける条件を満たせない場合は、パスをして相手の番になるすべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする）ゲーム終了時点で石の数が多い方が勝ちとなる以上がオセロゲームのルール概要です。ルール以外の要件を定めようゲームのルールのほか、今回の実装では以下の条件を適用することとします。自動でパスする機能は実装せず、「パス」ボタンを設置する「現在どちらの手番であるか」を表示するゲーム終了後、白黒それぞれの石の数と勝敗を表示するゲームの初期化機能は実装しない石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない画像は用いないそれでは、要件を確認したところで実際の設計に移りましょう。要件に沿って実装設計をしてみよう同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。本記事の執筆者は、以下のように流れを作成しました。上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。本セクションは以上です。休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。 [PR] PHPを学んで未経験からWebエンジニアを目指す方法とは開発環境を整えよう 🕛目安時間：30分今回の開発に必要な環境は以下の通りです。コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）コードエディタを用意しようコードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説 Webブラウザの環境を整備しよう主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】盤面と石をブラウザ上に表示しよう 🕛目安時間：1時間30分このセクションでは、オセロゲームに必要な盤および石を表示するための実装を行います。本格的にHTML / CSS / JavaScriptのコードが登場するので、要点を1つ1つ理解しながらコーディングをしていきましょう。必要なフォルダとファイルを作成しようまずはプロジェクトのルートとなるフォルダを1つ、PCの任意の場所に作成してください。（例ではオセロゲームの一般的な英語名であるreversiというフォルダ名にしました）フォルダ内には、以下の3つのファイルを作成してください。 index.html style.css main.js 下図のような構成にできていればOKです。 HTMLをコーディングしよういよいよコーディング作業に入ります！今回はサンプルコードに従って、index.htmlの中身を記述してみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>オセロゲーム</title> <link rel="stylesheet" href="style.css"> </head> <body>  <div id="stage" class="stage"></div>  <div id="square-template" class="square"> <div class="stone"></div>

JavaScript

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。異なる単位で複雑な計算も簡単に指定できます。レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。目次スマホサイトとPCサイトを振り分ける方法実際に書いてみようそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？田島悠介いろいろ方法があるけどcalcファンクションを使えば簡単だよ。大石ゆかり calc？CSSで計算ができるんですか？田島悠介その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。大石ゆかりへぇー。わかりやすいですね。田島悠介そうなんだ。まずはどういった記述の仕方をするか見てみよう。大石ゆかりはい！ calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。 calcファンクションを使うメリット異なる単位で計算することができる計算が明白になる calc()は結果の値ではない異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。 [PR] PHPを学んで未経験からWebエンジニアを目指す方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。構文プロパティ（widthなど）: calc(式) 四則演算が使用できる指定する式では四則演算の演算子（+、-、*、/）が使えます。前後に空白が必要加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。入れ子が可能 calcファンクションは入れ子にできます。入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。 calcファンクションの実装例実際にcalcファンクションを使った実装例を見てみましょう。ルートに基づいたサイズ指定要素を3等分の幅にする左右のセンタリング上下の中央配置ヒーローヘッダーの高さ調整ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。ソースコード「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

CSS

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。目次スマホサイトとPCサイトを振り分ける方法実際に書いてみようそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。大石ゆかり PHPで文字を探すプログラムを作りたいんですけど、どうすればいいんでしょうか。田島悠介どうして文字を探したいのかな？何かの文字で区切っているから？それとも文字の位置を探したい？大石ゆかりええと、文字を探す方法がそんなにいろいろあるんですか？田島悠介そうなんだ。PHPではいろんな文字列の検索方法があるよ。まずは、区切り文字で検索する方法から見てみよう！区切り文字で分けて検索 – strstr関数 strstr関数は対象の文字列から検索文字列を探し、見つかったら検索文字列から対象の文字列の最後までを返します。区切る文字列を境にして文字列を取得したいときに使えます。構文検索対象の一部分の文字列 = strstr(検索対象の文字列, 検索文字列, [検索文字列より前の部分を取得するか]) 第1引数は検索文字を探し出す対象の文字列です。第2引数は検索する文字列です。検索文字列が半角のアルファベットの場合は、大文字小文字を区別して検索されます。第3引数は省略でき、検索文字より前の部分を返したい場合にtrueを指定しますが、標準ではfalseつまり検索文字より後の部分を取得します。戻り値は検索文字列が検索対象の文字列から見つかったときに、検索文字列を含む文字から検索対象の文字列の最後までの文字列を返します。たとえば、「dog&cat」の文字列から「&」を検索した場合、「&cat」が戻り値として返ります。ただし第3引数にtrueが指定されている場合は、検索文字を含まない前の部分を返します。もし検索文字が見つからなかったときはfalseを返します。 ※ある文字列中に別の文字列が存在するかどうかを確認したいだけならstrpos関数またはstr_contains関数（PHPの新しいバージョン8で使用可能)を使います。 ※大文字小文字を区別しないで検索したい場合は「stristr関数」を使うことで実現できます。 strstr関数の使い方 strstr関数を使ってある文字列で区切った文字列の分割をしてみましょう。ソースコードフルネーム「山田太郎」を半角スペースで姓と名に分けて出力するプログラムです。 <?php //検索文字列（半角スペース） $search = ' '; //対象文字列（空白で区切られたフルネーム） $target = '山田太郎'; echo "対象文字列：$target<br>"; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName<br>"; echo "名：$firstName"; } else { echo "文字が見つかりませんでした。"; } ?> ※ダブルクォーテーションで変数を囲うと、“$変数名”で変数の値を展開して出力できます。変数の展開について詳しくは公式ドキュメント「変数のパース」をご覧ください。 ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。表示結果解説 //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); 検索対象の文字列（$target）から検索文字（$search）が見つかったところより後ろの文字列を取得します。検索対象の文字列

PHP

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

PHPでスマホサイトとPCサイトを振り分ける方法【初心者向け】

スマホサイトとPCサイトを振り分ける方法