はてなブックマーク

STEP2-1 フレームワークについて フレームワークとは何か フレームワークとは、アプリケーションの開発をしやすくするための、プログラムのひな形のことをいいます。開発者が実装したプログラムをまとめて制御して動くようにしてくれるものです。 日本語訳だと「枠組み」「骨組み」「構造」などといった意味があります。 フレームワークを用いることのメリットは、 プログラムの見通しが良くなる 機能追加がしやすくなる 開発のスピードが上がる などです。 しかし、フレームワークを習得するまでに時間がかかるなど、デメリットもあります。 代表的なPHPフレームワーク 代表的なPHPのフレームワークには、 Laravel CakePHP Symfony などがあります。 今回は、現在最も勢いのあるフレームワーク、Laravelを使用します。 Laravelの基本的な構造 LaravelはMVCというアーキテクチャ

STEP2-2.Laravelを導入してみよう STEP1同様に、STEP2の開発環境もDockerを使って整えることができます。 LaravelのDockerを使った開発環境をLaradockを使って構築してみましょう。 なお、Step1-4ですでにdocker環境を整えていることを前提に説明は進めていきます。 Laravelの開発環境を作成して初期画面を表示しよう まず作業するディレクトリを作成して、そこに移動しましょう。 projectnameは自分の作業用のプロジェクトの名前にしましょう。 $ mkdir projectname $ cd projectname $ git init 作成したディレクトリにlaradockをcloneでDLしましょう。 file_path:/projectname $ git submodule add https://github.com/Lar

// messageというキーに「こんにちはlocalStorage」という値を保存 localStorage.setItem("message", "こんにちはlocalStorage"); // messageというキーに保存した値を取得して表示 localStorage.getItem("message"); これを実行すると「こんにちはlocalStorage」と表示されると思います。 ローカルストレージはキー（Key）と値（Value）をペアにしたデータのリストを保存します。 Chromeの開発者ツールのResourcesタブからも見ることができます。 このようにKeyとValueをペアとして保存する方式をKVS（Key-Value Store）と呼びます。 この方式はデータベースなどにも使われています。 データの保存と読み込み ローカルストレージを使うために主に6つの操作を使い

STEP3-1.Ajaxを使ってみる Ajaxとは、JavaScriptなどからHTTP通信をすることによって、ページのリロードをせずにサーバとデータのやり取りをする技術です。ここでは1秒ごとに自動で再読み込みを行うような簡単なチャットを作成してみます。 まずはAjaxで取得するデータを用意しましょう。データはSTEP1で作成した掲示板のデータを流用することにします。以下の内容をajax_get_data.phpという名前で保存します。今回はCakePHPは使用しませんのでhtdocsに保存してください。 <?php $mysqli = new mysqli('localhost', 'root', '', 'board'); $json = array(); $result = $mysqli->query("SELECT * FROM datas ORDER BY created DE

STEP2-7.CakePHPでログイン機能を書いてみる ログイン機能をCakePHP式に書き直してみましょう。まずはUserモデルです。 <?php App::uses('AppModel', 'Model'); class User extends AppModel { //入力チェック機能 public $validate = array( 'username' => array( array( 'rule' => 'isUnique', //重複禁止 'message' => '既に使用されている名前です。' ), array( 'rule' => 'alphaNumeric', //半角英数字のみ 'message' => '名前は半角英数字にしてください。' ), array( 'rule' => array('between', 2, 32), //2～32文字 'messa

STEP2-2.ログイン機能を作ってみる 今回はまたPHPに戻ってログイン機能を作ってみます。とりあえずユーザーの情報を保存するためのテーブルを作成します。名前はusersテーブルでusernameカラム, passwordカラムのどちらもCHAR型（固定長文字列）で長さは41にします。CHAR型は固定長文字列です。テーブル作成後、構造タブからusernameカラムをユニークに設定しておきます。これでusernameが同じ行が登録されなくなります。それでは新規登録画面(register.php)を作ります。 <?php $mysqli = new mysqli('localhost', 'root', '', 'board'); $status = "none"; if(!empty($_POST["username"]) && !empty($_POST["password"])){ /

STEP1-9.PHPからデータベースを操作してみる 接続 まずはPHPからデータベースに接続します。昔はmysql_connect関数を使っていましたが、最近はmysqliクラスを利用する方法が一般的です。 <?php //mysqliクラスのオブジェクトを作成 $mysqli = new mysqli('ホスト名', 'ユーザ名', 'パスワード', 'データベース名'); //エラーが発生したら if ($mysqli->connect_error){ print("接続失敗：" . $mysqli->connect_error); exit(); } ?> ホスト名はPHPを動かすサーバとデータベースを動かすサーバを分けない限りlocalhostです。初期設定ではユーザ名はroot、パスワードは無しになっています。エラーが発生したら、各種パラメータが合っているかどうか、MySQLが

// messageというキーに「こんにちはlocalStorage」という値を保存 localStorage.setItem("message", "こんにちはlocalStorage"); // messageというキーに保存した値を取得して表示 localStorage.getItem("message"); これを実行すると「こんにちはlocalStorage」と表示されると思います。 ローカルストレージはキー（Key）と値（Value）をペアにしたデータのリストを保存します。 Chromeの開発者ツールのResourcesタブからも見ることができます。 このようにKeyとValueをペアとして保存する方式をKVS（Key-Value Store）と呼びます。 この方式はデータベースなどにも使われています。 データの保存と読み込み ローカルストレージを使うために主に6つの操作を使い

# 始めに このサイトはチームラボ オンラインスキルアップ課題で使用する資料をまとめたサイトです。このサイト自体は誰でも見ることができますが、オンラインスキルアップ課題参加者には社内エンジニアによる課題のレビューなどがあります。 # 受講対象者 授業などである程度プログラミングに触れたことはあるが、Webサイトの作り方は分からないという方です。 # 課題 Vue.js + websocketを使用してリアルタイムチャットシステムを作ります。 # 学習内容 リアルタイムチャットシステムの開発を通じて以下について学びます。 Vue.jsについて ES6について gitの使い方 フロントエンドのローカルでの開発 VSCode lint websocket heroku

# 始めに このサイトはチームラボ オンラインスキルアップ課題で使用する資料をまとめたサイトです。このサイト自体は誰でも見ることができますが、オンラインスキルアップ課題参加者には社内エンジニアによる課題のレビューなどがあります。 # 受講対象者 授業などである程度プログラミングに触れたことはあるが、Webサイトの作り方は分からないという方です。 # 課題 Vue.js + websocketを使用してリアルタイムチャットシステムを作ります。 # 学習内容 リアルタイムチャットシステムの開発を通じて以下について学びます。 Vue.jsについて ES6について gitの使い方 フロントエンドのローカルでの開発 VSCode lint websocket heroku

STEP2-7.CakePHPでログイン機能を書いてみる ログイン機能をCakePHP式に書き直してみましょう。まずはUserモデルです。 <?php App::uses('AppModel', 'Model'); class User extends AppModel { //入力チェック機能 public $validate = array( 'username' => array( array( 'rule' => 'isUnique', //重複禁止 'message' => '既に使用されている名前です。' ), array( 'rule' => 'alphaNumeric', //半角英数字のみ 'message' => '名前は半角英数字にしてください。' ), array( 'rule' => array('between', 2, 32), //2～32文字 'messa

チームラボオンラインスキルアップ課題 このサイトはチームラボ オンラインスキルアップ課題で使用する資料をまとめたサイトです。 この資料の想定対象読者は、授業などである程度プログラミングに触れたことはあるが、Webサイトの作り方は分からないという方です。 内容は以下の通りとなっています。 STEP1 Webプログラミングをしてみよう Web上でのデータの流れ、データの送受信・保存の原理・方法、Webページ表示のための言語について学ぶ STEP2 Instagramもどきを作ろう セッションによるログイン機能、フレームワークによる中規模サイトの作成方法、データベースの設計方法について学ぶ 最終課題：Instagramもどきサイトの作成 また、想定OSはMac/Windowsとなっています。 その他のOSの方はダウンロードリンクやフォルダ構成などが一部異なります。 ブラウザはGoogleChro

チームラボオンラインスキルアップ課題 このサイトはチームラボ オンラインスキルアップ課題で使用する資料をまとめたサイトです。 この資料の想定対象読者は、授業などである程度プログラミングに触れたことはあるが、Webサイトの作り方は分からないという方です。 内容は以下の通りとなっています。 STEP1 Webプログラミングをしてみよう Web上でのデータの流れ、データの送受信・保存の原理・方法、Webページ表示のための言語について学ぶ STEP2 Instagramもどきを作ろう セッションによるログイン機能、フレームワークによる中規模サイトの作成方法、データベースの設計方法について学ぶ 最終課題：Instagramもどきサイトの作成 また、想定OSはMac/Windowsとなっています。 その他のOSの方はダウンロードリンクやフォルダ構成などが一部異なります。 ブラウザはGoogleChro