Wordpress研修 ～業務システム編～ 2016年7月 杉本　啓太

Wordpress研修～業務システム編～ 目次 1.　はじめに 本研修の目的・対象 注意点 2.　システム開発とは 一般的なシステム開発の工程 小規模個人開発における工程 3.　Wordpressが動く仕組み システム構成全体像 SQLとは データベースにアクセス PHPとは ウォーミングアップ IF文とループ文 4.　実際に作ってみよう 「案件管理システム」概要 要件定義/外部設計 実装 入力画面 担当Mgr別収支参照 案件一覧画面 ログイン画面 全案件状況 エクセル出力機能 5.　最後に より複雑なシステム例の紹介 Wordpressの得手/不得手

1. はじめに 2. システム開発とは 3. システムが動く仕組み 4. 実際に作ってみよう 5. 最後に

知識よりも「とりあえず作ってみる」イメージ 1. はじめに　－本研修の目的・対象－ 頭がいい人向けに 知識よりも「とりあえず作ってみる」イメージ 本研修は、簡単なシステム体験を通じ「Wordpressで業務システムを作るとはどういうことか」の基礎知識を身に付けるものである 本研修の対象者 ワードプレスによる業務システム構築を体験したい方 ワードプレスでどこまでのことができるか、仮説を立てるための基礎知識/経験を得たい方 本研修の目的 「ワードプレス（ブログ専用FW）」で業務システムが作れることが理解できる Wordpressの「できること」「得手/不得手」「難易度や手間」を把握する一助とする

1. はじめに －注意点－ 「Wordpressによる開発」を前提としている 「小規模開発のイメージを掴む」ことに限定している 1. はじめに　－注意点－ 今回体験する「Wordpressによるシステム構築」はあくまで簡素なシステムの一例であり、それをベースに自ら学び続けることが重要 本研修における注意点 「Wordpressによる開発」を前提としている 管理人がWordpressで業務システム構築で使用する理由は「オープンソースでありプラグインが豊富」「環境構築が容易であり、小規模開発に向いてる」「自由度が高い」等、フリーランスコンサルの延長で行うのに向いていることが理由である ただし、「経験があり得意だから」という理由も多分にあるため、他のFWも色々と存在することも認識しておいて頂きたい 「小規模開発のイメージを掴む」ことに限定している 本研修では「一般的な開発工程成果物」や「プログラミング技術」といった基礎練習＆本質的な部分を割愛し、「まず1つ構築できるイメージを掴んでもらう」ことに重点を置く 各成果物についても、「Wordpressによる小規模開発」を前提としたものであり、従来のウォーターフォール型開発からは大幅にアレンジしている 大規模開発や、体系立てた知識については、専門書等で補足が必要

1. はじめに 2. システム開発とは 3. システムが動く仕組み 4. 実際に作ってみよう 5. 最後に

2. システム開発とは －一般的なシステム開発の工程－ 2. システム開発とは　－一般的なシステム開発の工程－ より詳細な 「一般的な開発工程」の説明必要（成果物例とか）？ システム開発は一般的に以下の工程で行われる（保守は除く） 成果物については、規模/内容に応じてプロジェクトごとに定義される システム開発工程 要件定義 外部設計 内部設計 実装/ テスト 定義すべき こと 各業務を実施する為に、どのような機能が必要なのか それは誰がいつどのような流れで使用するのか 利用者が目にするもの（画面、帳票レイアウト等） 利用者が目にしないプログラム仕様 － 成果物 （例） システム目的 現状課題＆改善案 基本要件一覧と優先順位 システム実現手段 システム化範囲 ユースケース図 業務フロー システム構成図 テーブル定義書 基本要件と優先順位 機能一覧表 画面/帳票レイアウト I/O関連図 画面/帳票レイアウト 項目定義書 イベント仕様 テーブル・ファイルの参照・更新仕様 プログラム テスト設計書

2. システム開発とは －小規模個人開発における工程－ 2. システム開発とは　－小規模個人開発における工程－ 個人によるWordpress開発（ウォーターフォールで工程ごとにプロジェクトとするような悠長なことをやらないケース）の場合、杉本は以下のような工程で良いと考える システム開発工程※ 要件定義/ 外部設計 内部設計/ 実装/テスト 成果物 システム目的 現状課題と改善案 サーバ環境 業務フロー（AsIs/ToBe） 機能一覧 画面/帳票レイアウト（概要） プログラム テスト設計書 「システムの実現手段」はWordpress前提のため削除 「システム化範囲」「ユースケース図」は業務フローとマージ 小規模開発の場合、「やりたいこと」と「見たいもの」の距離が近く、「要件定義のみ終わっている状態」が無駄であると考えるため、要件定義と外部設計をマージ Wordpress前提の場合、制約が多く、内部設計で決められることも少ないため実装とマージ （見た目と機能が決まれば、実現方法は概ね決まる） テスト設計書はお好みで ※あくまでWordpress開発・小規模個人開発に限定した杉本独自の案

1. はじめに 2. システム開発とは 3. システムが動く仕組み 4. 実際に作ってみよう 5. 最後に

3. Wordpressが動く仕組み －システム構成全体像－ カスタマイズし、システム構築をするには、「HTML」「PHP」「SQL」について最低限の理解が必要 サーバ Wordpress PHPで出来ている HTML 見る HTMLを 吐き出す 個別のページ プラグインA プラグインB HTML プラグインC テーマ HTML SQLで やりとり MySQL

3. Wordpressが動く仕組み －SQLとは－ 大きく「select文」「update文」「insert文」「delete文」が存在する SQL基本の文 SELECT 文 データベースからデータを取得する（参照する）文 【実際に使ってみよう（SELECT文の例）】 ①以下にアクセス https://sv1409.xserver.jp/phpmyadmin5/ ユーザ：sugimotok_wp9 パス；5egwpbs1rl ②「wp_writer_mst」テーブルを表示 ③まずは、「表示」タブから全件を確認 ④以下のSQL文を「SQL」タブから実行 SELECT name FROM `wp_writer_mst` WHERE sex="女" UPDATE 文 既存のデータを更新する文 INSERT 文 新しい行を追加する文 DELETE 文 既存の行を削除する文 【SELECT句】 どの列を取得？ 【FROM句】 どのテーブルから取得？ 【WHERE句】 　条件は？

3. Wordpressが動く仕組み －PHPとは（ウォーミングアップ）－ PHPとは、ブラウザ上で動かすことができる、動的にWebページ（HTML）を作るためのプログラミング言語 「HTMLと混在して書くことができる」という特徴を持つ 【実際に使ってみよう】 ①プラグイン「Exec-PHP」を有効化 ※ページでPHPが動くようにするプラグイン ②固定ページを作成（名前は何でもよい） ③以下の内容を記載 ④「公開」ボタンを表示 記載内容 吐き出されるHTML 画面で見ると HTML <h1>サンプルページ</h1> <?php for ($i = 1; $i <= 10; $i++) { echo $i; echo "<br>"; } ?> <h1>サンプルページ</h1> <p>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10</p> PHP

3. Wordpressが動く仕組み －PHPとは（配列/ループ文IF文）－ 配列とは、複数の値をひと塊にして持つ変数の持ち方 ループ文とは、特定条件を満たすまで同じ処理を繰り返す構文 IF文とは、特定条件により、処理を変えるための構文 配列の例 ループ文の例 IF文の例 <?php $member = [ "name" => "sugimoto", "sex" => "male", "score" => 80 ]; ?> <?php for ($i = 1; $i <= 10; $i++) { echo $i; echo "<br>"; } ?> <?php $array1 = [ "name" => "sugimoto", "sex" => "male", "score" => 80 ]; $array2 = [ "name" => "koike", "score" => 50 if($array1["score"] > $array2["score"] ){ echo "sugimoto win"; } else { echo "koike win"; } ?> 「member」というひと塊 name:sugimoto sex:male score:80

1. はじめに 2. システム開発とは 3. システムが動く仕組み 4. 実際に作ってみよう 5. 最後に

4. 実際に作ってみよう －要件定義/外部設計①－ 4. 実際に作ってみよう　－要件定義/外部設計①－ 本研修では最終成果物の作成である「実装」部分に重点を置く。「このようなシステムを作るためにはこのようなInputが必要」という形で、上流成果物と最終成果物の関連性を実感してほしい 同時に、全社戦略・その中のIT戦略を立案する上で、「どの程度の費用で」「どの程度のことが実現できるか」の推定の一助としてほしい 全社戦略 矢羽の階層は、 「目的/手段」を表す 左右に並ぶものは 「Input/Outputの関係」を表す IT戦略 ②のために①がある システム構築 ①要件定義/ 外部設計 ②内部設計/ 実装/テスト 全社戦略のためにIT戦略がある IT戦略のために、システム構築がある システム構築の成果物として実装があり、その手段として設計がある 各業務を実施する為に、どのような機能が必要なのか それは誰がいつどのような流れで使用するのか 利用者が目にするもの（画面、帳票レイアウト等） 利用者が目にしないプログラム仕様

4. 実際に作ってみよう －要件定義/外部設計①－ 4. 実際に作ってみよう　－要件定義/外部設計①－ 今回のサンプルケースとして、以下のようなシチュエーションを設定する ケース概要/ 現状課題 とあるコンサルティング会社で、案件管理を行っている エクセルで管理しているものの、Mgr別の売上等の集計に手間がかかっている。 また、営業先から案件情報を入力できず、リアルタイムでの状況が把握できない 資料作成にも時間がかかっている システム目的 Webベースのシステムで、外部からでも案件状況を登録できるようにする 案件一覧・Mgr別支をいつでも参照できるようにする 各種資料の手間を削減する サーバ環境 レンタルサーバ（XServer）を使用

4. 実際に作ってみよう －要件定義/外部設計②－ 4. 実際に作ってみよう　－要件定義/外部設計②－ 今回のサンプルケースとして、以下のようなシチュエーションを設定する 受注/入力 収支集計 資料作成 業務フロー （AsIs） Mgr 営業 受注/ 入力 部長 Mgr別 収支計算 ステータス 確認 資料 作成 秘書 ファイル 案件 台帳 案件 台帳 Mgr別 収支表 案件 台帳 部長会 資料 Mgr別 収支表 業務フロー （ToBe） Mgr 営業 受注/ 入力 部長 案件状況/ Mgr別収支確認 秘書 ファイル/ システム システム システム 部長会 資料

4. 実際に作ってみよう －要件定義/外部設計③－ 4. 実際に作ってみよう　－要件定義/外部設計③－ 今回のサンプルケースとして、以下のようなシチュエーションを設定する 機能一覧 No 機能名 機能詳細 1 案件情報入力 案件情報（案件名、クライアント名、担当Mgr、売上、費用、概要）を登録する 2 案件情報参照 全ての案件の情報を参照できる 3 担当Mgr別 収支参照 担当マネージャー別の案件収支（売上-費用）が一覧で参照できる 4 部長会資料 出力 部長会資料を自動で作成・出力できる

4. 実際に作ってみよう －要件定義/外部設計④－ 4. 実際に作ってみよう　－要件定義/外部設計④－ 今回のサンプルケースとして、以下のようなシチュエーションを設定する 画面レイアウト（稼働中案件 収支参照画面の例） ◆担当Mgr別収支参照 担当Mgr 売上 費用 収支 マネージャーA 30,000,000 24,000,000 6,000,000 マネージャーB マネージャーC マネージャーD マネージャーE

4. 実際に作ってみよう －実装（演習）－ 入力画面 プラグイン（ACF）の導入 入力フォームの作成 担当Mgr別収支参照 ←メイン 4. 実際に作ってみよう　－実装（演習）－ 以下の順番に、一緒に作っていく 入力画面 プラグイン（ACF）の導入 入力フォームの作成 担当Mgr別収支参照　←メイン データの取得 データの入れ替え（ループ処理、配列の使いこなし） 出力（HTML） ログイン画面（改造） プラグインの導入 全案件状況　エクセル出力機能（※余裕があれば） エクセルフォーマットの作成 エクセルの読み込み、書き込み、保存 出力用リンクの作成

1. はじめに 2. システム開発とは 3. システムが動く仕組み 4. 実際に作ってみよう 5. 最後に

画面を参照 5. さいごに －より複雑なシステムの例－ 5. さいごに　－より複雑なシステムの例－ 「セミナー管理システム」「自習室の座席表予約システム」について、ソースコードを見ながら紹介する 見て理解することで、「Wordpressでこんなことができるんだ」とイメージする一助としてほしい 画面を参照

5. さいごに －Wordpressの得手/不得手－ 逆に、その他の自由度は高く、細かい仕様変更や見た目の調整はハードルが低く、アジャイル開発（サンプル作成後、「レビュー⇔修正」を繰り返す手法）には向いている 仕様面 開発形式/進め方 得手 特定の管理者権限を持ったメンバーのみが操作し、一般ユーザーは閲覧のみのサイト（コーポレートサイトやブログ） 業務管理システム等、社内に閉じた情報の整理・分析等 構築/修正の敷居が低いため、アジャイル開発（サンプル作成後、「レビュー⇔修正」を繰り返す手法）が得意 不得手 投稿画面に細かいリクエストがあるシステム（Wordpressの制約による） 不特定多数が登録＆更新するシステム ※ECサイトなど、投げっ放しで良い（一度登録したものを更新したりはしない）ならばその限りではない －