PHP – インクループ株式会社|神奈川県相模原市 ホームページ制作、WEBマーケティング https://incloop.com インクループ株式会社は、お客様の顧客獲得をマーケティングを活用して支援する会社です。 データ分析、市場調査に基づく企画立案、コンテンツ制作、運用を通じてお客様の目標を実現します。 Thu, 19 Nov 2020 00:59:16 +0000 ja hourly 1 https://wordpress.org/?v=4.9.19 PHPでランダムに近い数値を出力する三つの方法(乱数生成方法)をご紹介します! https://incloop.com/php%e3%81%a7%e3%83%a9%e3%83%b3%e3%83%80%e3%83%a0%e3%81%ab%e8%bf%91%e3%81%84%e6%95%b0%e5%80%a4%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/ https://incloop.com/php%e3%81%a7%e3%83%a9%e3%83%b3%e3%83%80%e3%83%a0%e3%81%ab%e8%bf%91%e3%81%84%e6%95%b0%e5%80%a4%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/#respond Mon, 16 Oct 2017 09:46:15 +0000 https://incloop.com/?p=14354 00.random_logo

PHPでランダムに近い数値を出力する三つの方法をご紹介します! いざ実装するときに少し迷うランダムな数値の出し […]]]>
00.random_logo

PHPでランダムに近い数値を出力する三つの方法をご紹介します!

いざ実装するときに少し迷うランダムな数値の出し方に関して。
出力の仕方はいろいろとありますが、自身が過去に使用したことのある三種類の出力方法をご紹介致します!
※本記事では1~100の範囲でランダムに近い数値を出す方法をご紹介致します。

mt_rand関数を使用する

もっとも簡単な方法は、mt_rand関数を使用してランダムな数値を出力する方法となります。
実際の使い方としては、下記のようなコードになります。

<?php
  // ランダム関数で取得
  $valRandFunc = mt_rand(1, 100);
  echo 'mt_rand関数で取得した値は「'. $valRandFunc. '」でした';
?>

上記のコードを実行すると、1~100の間でランダムな数値を出力して表示します。

これが、ランダムに近い数値を取得する一つ目の方法となります。

microtime関数を使用する

次に簡単な方法としては、microtime関数を使用して数値を出力する方法となります。

microtime関数はランダムな数値を出力する関数ではなく、現在時刻を秒数で出力する関数になります。
microtime関数はマイクロ秒までの時間を出力するため、マイクロ秒の末尾二桁の数値を「ランダムな数値」として活用します。

厳密な意味での「ランダムな数値」とは異なりますが、マイクロ秒の数値を狙って取得することは難しいため、簡単なランダム値が欲しい場合に使用することがあります。

実際の使い方としては、下記のようなコードになります。

<?php
  $valMsec = 0;
  // マイクロ秒まで取得
  $valMtimeFunc = microtime(true);
  // 小数点以下で文字列を分割
  $arrayMtimeFunc = explode('.', (string)$valMtimeFunc);
  if($arrayMtimeFunc[1] != null){
    // 小数点以下の下二桁取得
    $strMsec = mb_substr($arrayMtimeFunc[1], -2);
    // 1~100の範囲に値を調整
    $valMsec = (int)$strMsec + 1;
    echo 'microtime関数で処理をした値は「'. $valMsec. '」でした';
  }
?>

上記のコードを実行すると、1~100の間で数値を出力して表示します。

これが、ランダムに近い数値を取得する二つ目の方法となります。

mb5関数を使用する

三つ目の方法としては、mb5関数を使用して数値を出力する方法となります。

mb5関数はmd5ハッシュ値を出力する関数となります。
md5ハッシュ値は16進数の数値となりますので、16進数の数値の下二桁を切り取って、10進数に直した数値のさらに下二桁を切り取って「ランダムな数値」として活用します。

mb5関数はmd5ハッシュ値に変換するために文字列を入力する必要がありますので、今回はmicrotime関数で取得した値を入れてみましょう。

実際の使い方としては、下記のようなコードになります。

<?php
  // マイクロ秒まで取得
  $valMtimeFunc = microtime(true);
  // microtime関数で取得した値をハッシュ値に変換
  $strHashVal = md5((string)$valMtimeFunc);
  // 下二桁のみ取得
  $strHashCutVal = mb_substr($strHashVal, -2);
  // 16進数を10進数に変換
  $valDec = hexdec($strHashCutVal);
  if($valDec > 9){
    $strDec = mb_substr((string)$valDec, -2);
  } else {
    $strDec = mb_substr((string)$valDec, -1);
  }
  // 1~100の範囲に値を調整
  $valDec = (int)$strDec + 1;
  echo 'md5関数で10進数に変換して処理した値は「'. $valDec. '」でした';
?>

上記のコードを実行すると、1~100の間で数値を出力して表示します。

これが、ランダムに近い数値を取得する三つ目の方法となります。

ランダムに近い値を生成する方法はいろいろとあります

いかがでしたか?

今回ご紹介した三つの方法は、簡単な出力方法ではありますがそこそこ良い値が取れると思います。
完全にランダムな値を作成する事は難しいですが、mb関数を使用した方法のように、いくつかの関数を使用して値を作ることで、よりランダムに近い値を作成することは可能だと思います。

おそらくセキュリティ専門の方が見たら「こんなの法則性があってランダムな値とは違う!」というお叱りを受けそうな内容なので言及しておきますが…。
セキュリティ対策として使う場合の「ランダム値」はもっと厳密なものとなりますので、本記事のような方法で取得した値を使用するのは控えたほうが良いかもしれません…。

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/php%e3%81%a7%e3%83%a9%e3%83%b3%e3%83%80%e3%83%a0%e3%81%ab%e8%bf%91%e3%81%84%e6%95%b0%e5%80%a4%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/feed/ 0
JavaScriptとphpの違いって何?どう使い分けるの?ざっくりと違いをご紹介します! https://incloop.com/javascript%e3%81%a8php%e3%81%ae%e9%81%95%e3%81%84%e3%82%92%e3%81%96%e3%81%a3%e3%81%8f%e3%82%8a%e7%b4%b9%e4%bb%8b/ https://incloop.com/javascript%e3%81%a8php%e3%81%ae%e9%81%95%e3%81%84%e3%82%92%e3%81%96%e3%81%a3%e3%81%8f%e3%82%8a%e7%b4%b9%e4%bb%8b/#respond Mon, 04 Sep 2017 12:16:38 +0000 https://incloop.com/?p=13899

コードを組んでいるうちにいつの間にか違いを理解していたJavaScriptとphpの違いに関して、復習も兼ねて […]]]>

コードを組んでいるうちにいつの間にか違いを理解していたJavaScriptとphpの違いに関して、復習も兼ねて記事にしてみようと思います。

「バックエンド」や「フロントエンド」という難しい言葉は省いて、ざっくりと「どう違うのか?」「何故使い分けるのか?」という部分をご紹介します。

まず初めに「ブラウザ」と「サーバー」の仕事の違いを理解する

JavaScriptやphpの違いを考える前に、Webサイトを閲覧する際に必要な「ブラウザ」と、データを提供する「サーバー」の仕事を理解しなければなりません。

では、Webサイトを見るために使用している「ブラウザ」と「サーバー」はそれぞれどんな仕事をしているのか。各々の仕事の違いを見てみましょう。

ブラウザの仕事は?

ブラウザの仕事は「サーバーへの要求」と「サーバーから提供された情報に対する処理を行う」ことが主な仕事になります。
サーバーから提供されるデータにはJavascriptの記述もありますので、ブラウザではJavascriptの処理を行います。

サーバーの仕事は?

サーバーの仕事は「ブラウザの要求に対して必要なデータを提供する」ことが主な仕事になります。
ブラウザが要求したデータがphp形式であれば、phpで記述された箇所を処理して、データをブラウザ側へ提供します。

このように、ブラウザとサーバーは「要求」と「提供」をすることによって、様々なWebサイトを表示しています。

JavaScriptとphpの大きな違いは処理を行うタイミングにあります

見出しの通りですが、JavaScriptとphpの大きな違いは処理を行うタイミングにあります。
JavaScriptはブラウザ側で処理が行われて、phpはサーバー側で処理が行われます。

言葉ではなかなかイメージできないと思いますので、下記のようなソースコードを参考にして処理の流れを見てみましょう。

上記のソースコードをサーバーに設置してブラウザからアクセスをすると、phpの部分はサーバー側で処理が行われます。

サーバー側はphpの処理を行い、下記のようなコードに変換してブラウザ側にデータを送信します。

JavaScriptの記述はそのまま残るので、JavaScriptのコードはブラウザ側で処理されます。

phpはサーバー側で処理を行うため、データベースにもアクセスが可能となっています。そのため、記事のデータをデータベースに保管するCMS(WordPress等)ではphpの操作が必須となります。

ちょっとした余談になりますが、以前に私は下記のような記事を書きました。

「日替わり」や「期間限定」という言葉に弱いです、網干です。飲食店やスーパーマーケットで曜日替わりのサービスをやっているお店をよく見かけます。ですが、ホームペ...
JavaScriptで曜日ごとに文言の表示を変更する方法 - incloop.com

上記の記事では、JavaScriptを使用して「現在の曜日」を取得していますが、phpでも同様の処理をさせることができます。

しかし、JavaScriptとphpでは処理を行うタイミングが違うため、結果が異なる場合があります。

例えば、パソコンの日付設定が月曜日で、サーバーの日付設定が火曜日だった場合を考えてみましょう。

JavaScriptでプログラムを組んだ場合は、パソコンの設定で処理が行われるため、今回の例であれば月曜日が出力されます。
一方、phpでプログラムを組んだ場合は、サーバーの設定で処理が行われるため、今回の例であれば火曜日が出力されます。

このように、パソコンの設定とサーバーの設定が異なっていると違う結果が出力されます。
そのため、Webサイトで機能を実装する際には、JavaScriptとphpのどちらで組むべきかを事前に決める必要があります。

ささいな疑問でも解消するだけに留めず、しっかりと理解しましょう!

いかがでしたか?

JavaScriptとphpの違いは、プログラムを組んでいる人は何となく理解した気になってしまう部分だと思います。
かく言う私も、半年ほど前までは何となくで組んでいましたが、ふとJavascriptとphpを交互に組んでいるうちに「あれ?どっちが先に処理されるんだっけ?」と初歩的な部分に躓いてようやく理解しました。

こういったささいな躓きで理解していくことが、プログラマーにとっては大事なことなんだと思います。

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/javascript%e3%81%a8php%e3%81%ae%e9%81%95%e3%81%84%e3%82%92%e3%81%96%e3%81%a3%e3%81%8f%e3%82%8a%e7%b4%b9%e4%bb%8b/feed/ 0
PHPでparse_ini_file関数を使用した際に発生するWarningを解消する方法 https://incloop.com/parse_ini_file%e9%96%a2%e6%95%b0%e3%81%aewarning%e3%82%92%e8%a7%a3%e6%b6%88/ https://incloop.com/parse_ini_file%e9%96%a2%e6%95%b0%e3%81%aewarning%e3%82%92%e8%a7%a3%e6%b6%88/#respond Mon, 10 Jul 2017 08:31:33 +0000 https://incloop.com/?p=13222 00_parse_ini_fileの警告を解消ロゴ

今回はPHPでparse_ini_file関数を使用した際に発生するWarningを解消する方法をご紹介致しま […]]]>
00_parse_ini_fileの警告を解消ロゴ

今回はPHPでparse_ini_file関数を使用した際に発生するWarningを解消する方法をご紹介致します。
※2017年7月18日に記事を一部追記しました!

PHPでiniファイルを読み込んでいろいろと処理をさせようとした際に、警告が発生して思うように動かなかったことがあったのでメモとして残しておきます。

parse_ini_file関数で何かよくわからない警告が発生!

phpでiniファイルを読み込む際にparse_ini_file関数を使用して下記のようなコードを組んでみました。

<?php
  /* 定数定義 */
  $IniFilePass = './XXXXX/config.ini)'; // iniファイルのパス
  
  /* iniファイル読み込み */
  $ArrayIniFile = parse_ini_file($IniFilePass, true);
  
  if($ArrayIniFile != false){
    /* mode 取得*/
    $flgDebugMode = $ArrayIniFile[state][debug];
  }
?>

上記はiniファイルの[state]セクションの[debug]キーの値を取得しようとしています。

上記コードを実行してみると…。
01_警告内容

Warningが二件発生しました!
各警告の内容は下記のようになっています。

「Warning: parse_ini_file(): http:// wrapper is disabled in the server configuration by allow_url_include=0 in ./XXXXX/header.php on line 50」について

ざっくり翻訳すると「サーバーの設定で”allow_url_include”の設定が0(Off)になっているから、header.phpの50行目で使ってるparse_ini_file関数が使えない!」という事をサーバーさんが訴えています。
サーバーの設定を変えることで解決しそうな内容です。

「Warning: parse_ini_file(./XXXXX/config.ini): failed to open stream: no suitable wrapper could be found in ./XXXXX/header.php on line 50」について

ざっくり翻訳すると「指定したファイル(./XXXXX/config.ini)が開けません!なんかheader.phpの50行目がおかしくない?」という事をサーバーさんが訴えています。
上記の警告に関しては、一番目のエラーを解決できれば一緒に解決しそうです。

どちらも”line 50″(50行目)で発生している警告なので、対象ファイル(”header.php”)の50行目を直すことでどちらも解決することが考えられます。

「allow_url_include」の設定値を変更する

“allow_url_include”の設定を直せばparse_ini_file関数が動くようなので、設定を修正してみましょう。
“allow_url_include”の設定はサーバー内に設定しているpnp.iniファイルを修正する必要があります。
※実験用に持っているサーバーはminibird様のサーバーになるので、minibird様のサーバーでのphp.iniファイルの設定値の変更方法を記載します。

php.iniファイルの編集画面へ行く

minibird様のサーバーの場合は「PHP環境設定」画面にてphp.iniファイルを修正します。
02_PHP環境設定画面

「php.ini変更設定」画面も存在するのですが”allow_url_include”の設定項目が存在しないため「php.ini直接編集」画面にて”allow_url_include”の項目を直接変更します。
03_php.iniファイル編集

変更を確定してホームページを見てみると…、警告が消えました!
では、本当にiniファイルの内容を読み込んでいるのでしょうか?
javascriptの変数に値を入力して確認したところ、しっかり値が入力されていました!
04_iniファイル読み込み完了

これで、parse_ini_file関数で発生していた問題は解消しました。

【後日追記】allow_url_includeの設定値変更は、セキュリティ上の問題が発生する可能性があるので注意が必要!

そもそも何故allow_url_includeという設定がデフォルトでoffになっているのか?
調べてみるとこんな記事が出てきました。

新たな Web サイト改ざんの危険性:Linux 用コントロールパネル「Plesk」にゼロデイ脆弱性
ユーザー定義関数は外部ファイル(http経由)で呼びさせませんか?

要約すると「単純にallow_url_includeの設定をonにするとセキュリティ上よろしくないため、使用する場合はしっかりと対策をしましょう。」という事らしいです。
こういった記事をみると、設定値を読み込む際には外部ファイルから読み込むよりもデータベース上にデータを持って引っ張ってきた方が良いっぽいですね。

エラーや警告の解決のヒントは見逃さずに!

いかがでしたか?

プログラムでエラーが出ると精神的にゲンナリしてしまう事が多いですが、最近のプログラムは警告やエラーをしっかり出してくれることが多いです。
今回のPHPのように「〇〇というファイルの〇〇行目!」という形で出してくれることもあるため、修正をする際の大きなヒントをつかむことができます。
エラーや警告の内容に関しては、文章をそのままGoogleさんで検索すると大抵は解決方法が載っているため、問題の調査も非常に楽です。

問題を早期に解決できるようにログを出してくれる親切なシステムと、解決方法をネット上に公開している有志の方々のおかげで、プログラムの敷居の高さはかなり緩和されているのではないかと思います。

かく言う私も非常に助かっています!感謝感謝!

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/parse_ini_file%e9%96%a2%e6%95%b0%e3%81%aewarning%e3%82%92%e8%a7%a3%e6%b6%88/feed/ 0
【PHP】カスタムフィールドが空欄の時には中身があるかどうかチェックしてから表示する https://incloop.com/%e3%80%90php%e3%80%91%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%89%e3%81%8c%e7%a9%ba%e6%ac%84%e3%81%ae%e6%99%82%e3%81%ae%e5%87%a6%e7%90%86/ https://incloop.com/%e3%80%90php%e3%80%91%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%89%e3%81%8c%e7%a9%ba%e6%ac%84%e3%81%ae%e6%99%82%e3%81%ae%e5%87%a6%e7%90%86/#respond Thu, 10 Nov 2016 14:42:08 +0000 https://incloop.com/?p=9280 カスタムフィールドが空欄のとき非表示にさせる

WordPressで便利なプラグインとしてよく使われているアドバンスカスタムフィールド。 不動産の物件情報の詳 […]]]>
カスタムフィールドが空欄のとき非表示にさせる

WordPressで便利なプラグインとしてよく使われているアドバンスカスタムフィールド

不動産の物件情報の詳細や、ネットショップでの商品情報の詳細など投稿画面でオリジナルのフィールドを追加したい時に簡単にフィールドを追加できてしまうとっても便利なプラグインです。

 

カスタムフィールドが空欄のとき余白ができてしまった

便利なカスタムフィールドですが、カスタムフィールドを空欄にして公開した時に投稿に謎の余白ができまいました。

カスタムフィールドが空欄になることを想定せずにテンプレートを作ってしまったため、本来は余白部分(下の画像の赤枠)はカスタムフィールドに入力している情報が表示される部分なのですが、空欄なのでカスタムフィールド分ぽっかりと余計な空白ができてしまっている状態です。

これではいけません。テンプレートの改善が必要です。
カスタムフィールドが空欄だと余白ができる

投稿用テンプレート(signle.php)を修正する

カスタムフィールドに何も書いていない状態、つまり空欄のときには非表示にさせて余白をなくすようにテンプレートを修正していきたいと思います。

今回は投稿画面の改善なのでsingle.phpを修正していきます。

single.phpを修正する場合は次の手順です。

ダッシュボード > テーマの編集 > single.php

カスタムフィールドが空欄だと余白ができる

個別投稿の部分(下図の赤枠内)をクリックすると、single.phpの編集画面に切り替わります。

カスタムフィールドが空欄のとき非表示にしたい

カスタムフィールドが空欄のときはテーブルを非表示にする

そもそもなんで空白の行ができてしまっていたのかというと、以下のようにテンプレートを作っていたからです。

修正前

カスタムフィールドの値を取得して、テーブルに入れているわけですが、カスタムフィールドに値が入っていれば問題ないのですが、空欄になっていると、空っぽのテーブルだけができてしまいますね。。。。これが謎の余白の犯人です。

<table class="left">
<tr>
    <td>
    <?php
    $txt = get_field('物件名');
    echo $txt;
    ?>
    </td>
</tr>
<tr>
    <td>
    <?php
    $txt = get_field('駐車場');
    echo $txt;
    ?>
    </td>
</tr>
<tr>
    <td>
    <?php
    $txt = get_field('管理費');
    echo $txt;
    ?>
    </td>
</tr>
</table>

修正後

PHPのemptyという変数の中身が空かどうかを判定する関数を使って、カスタムフィールドの値が空っぽかどうか判定するif文を入れるように変更しました。
※ついでに<th>タグで項目名も表示するようにしてみました。

<table class="left">
<?php
$txt = get_field('物件名');
if (!empty($txt)) { ?>
<tr>
    <th class="wide">物件名</th>
    <td>
    <?php
    echo $txt;
    ?>
    </td>
</tr>
<?php } ?>
<?php
$txt = get_field('駐車場');
if (!empty($txt)) { ?>
<tr>
    <th class="wide">駐車場</th>
    <td>
    <?php
    echo $txt;
    ?>
    </td>
</tr>
<?php } ?>
<?php
$txt = get_field('管理費');
if (!empty($txt)) { ?>
<tr>
    <th class="wide">管理費</th>
    <td>
    <?php
    echo $txt;
    ?>
    </td>
</tr>
<?php } ?>
</table>

ちょっと解説をしておきますと、get_field()でカスタムフィールドの入力値を取得するのですが、取得した値を格納している変数$txtの中身が空かどうかを関数emptyを使って判定した後、空でなければ<tr>~~</tr>を表示するようにしました。

すると・・先程は余白があった部分が、綺麗さっぱり余白が消えてしまいました!

カスタムフィールドが空欄のとき非表示にできた

ちなみにカスタムフィールドが空欄でない場合はこのように表示されます。

カスタムフィールドが空欄だと余白ができる

参考までに今回使っているCSSも記載しておきます。良かったらコピペして使ってくださいませ。

table.left{
    width: 50%;
    float: left;
    margin-bottom: 0px;
    border-bottom: 0px solid #EDEDED;
    border-right: 1px solid #EDEDED;
    height: 340px;
}
table {
    border-bottom: 1px solid #ededed;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    line-height: 2;
    margin: 0 0 20px;
    width: 100%;
}
table.left th{
    width: 35%;
    text-align: center;
}
body th {
    border-top: 1px solid #ededed;
    background-color: rgba(247, 245, 231, 0.7);
}
body th, body td {
    padding: 0.8em;
}
td {
    border-top: 1px solid #ededed;
    padding: 6px 10px 6px 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}

プログラムを学ぶことでプログラミング思考で考えられるようになります

インクループでは社内研修でプログラミング研修を実施しています。(主にPHP。M氏が講師やってます。)

私はプログラミングについて全くの未経験だったので、最初は暗号の用に感じていたプログラムですが、今では変数の意味、if文、ループ文をなんとか使えるようになりつつあります。プログラミングを知らないままWordPressのテンプレートをいじってたころを思い出すとよく触ってたな・・と恐ろしさすら感じてしまいます。

今回の関数empty()を使って変数が空かどうかを判定するという内容も今となってはごくごく簡単なことなのですが、当時はif文の存在すら知らなかったので、もしカスタムフィールドの中身が空欄だったらなんてことを考えることすら頭の中にありませんでした。

プログラムを学ぶようになって良かったことは、単純にPHPが分かるようになってWordPressのテンプレートの意味が以前よりも理解しやすくなっただけではなく、テンプレートを作る時にフローチャートを頭の中で考えながら作れるようになったことです。もしXXXだったら??という思考が常に頭の中にあるようになりました。

さて、いかがでしたか?

PHPやJavaScript、JQueryなどのWEB系のプログラミング言語を使うことができればなんでもできてしまうような…そんな気がしています。(実際にそうなんですが。今はまだそのレベルには達していません。。。)

まだまだ初級編ですので、どんどん中級~上級クラスのプログラムもご紹介していきたいと思います!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/%e3%80%90php%e3%80%91%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%83%89%e3%81%8c%e7%a9%ba%e6%ac%84%e3%81%ae%e6%99%82%e3%81%ae%e5%87%a6%e7%90%86/feed/ 0
HTML,PHPの学習ならProgateが楽しい! https://incloop.com/html%e3%81%ae%e5%ad%a6%e7%bf%92%e3%81%aa%e3%82%89progate%e3%81%8c%e6%a5%bd%e3%81%97%e3%81%84%ef%bc%81/ https://incloop.com/html%e3%81%ae%e5%ad%a6%e7%bf%92%e3%81%aa%e3%82%89progate%e3%81%8c%e6%a5%bd%e3%81%97%e3%81%84%ef%bc%81/#respond Tue, 12 Apr 2016 16:08:48 +0000 https://incloop.com/?p=5414 Progateが楽しい

初心者がHTMLなどの言語を学習するとき、どのような学習体験が望ましいでしょうか。 あくまで私の経験からですが […]]]>
Progateが楽しい

初心者がHTMLなどの言語を学習するとき、どのような学習体験が望ましいでしょうか。
あくまで私の経験からですが、次のポイントがあると思っています。

  • 説明がシンプルで分かりやすい
  • 入力した結果がすぐに確認できる
  • 達成感がある

これらを兼ね備えた学習用WEBサイト「Progate」をご紹介します。
無料でHTML&CSS、PHP、jQuery、Ruby、Ruby on Rails、JavaScriptを学習することができます。

Progateにユーザー登録をしてみよう!

Progateのサイトにアクセスます。

https://prog-8.com/

ProgateWEBサイトのトップページ

ユーザー名、メールアドレス、パスワード(任意のもの)を入力し、新規登録をクリックします。
(facebookやTwitterでも登録可能です。)
ユーザー登録の画面

メールアドレスの認証メールが届きますので、メール本文中のURLをクリックして登録を完了してください。

レッスン一覧から学習したいレッスンを選択します。
学習コース一覧

学習をしてみよう!

学習の方法は「説明スライド」をまず読み、その後に実際にコードを書いて理解度を確認する流れになります。

説明スライドの画面↓
説明スライド

↓コード記述画面
コーディング画面

ご覧のように、記述したコードをもとに「プレビュー」が即座に表示されるので、入力した内容が正しかったのかをすぐに確認することができ、とても学習がし易いと思います。

学習をクリアすると、レベルが上がります!
このレベルUPの演出により達成感とヤル気が生まれますね。
レベルが上がった画面

いかがでしょうか。
ご覧いただいたように説明はとてもシンプルです。
初心者にとってはまず手を動かしてコードを書いて、「これを書いたらこういう表示になるんだ!」という経験をどんどん積むことが重要だと思います。その点、要点を絞ったシンプルな説明はとてもいいと思います。

HTMLやPHPなどのプログラミング言語の学習に!
Progateを活用してみてはいかがでしょうか。

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

]]>
https://incloop.com/html%e3%81%ae%e5%ad%a6%e7%bf%92%e3%81%aa%e3%82%89progate%e3%81%8c%e6%a5%bd%e3%81%97%e3%81%84%ef%bc%81/feed/ 0